feat: SelectLike components support z-index manager (#45494)

* feat: dropdown support z-index manager

* feat: update snap

* feat: optimize code

* feat: SelectLike components support z-index manager

* feat: ColorPicker support z-index manager

---------

Signed-off-by: kiner-tang(文辉) <1127031143@qq.com>

components/_util/__tests__/useZIndex.test.tsx

@@ -207,7 +207,7 @@ describe('Test useZIndex hooks', () => {
   });
   const containers = Object.keys(containerComponent);
   // const containers = ['Modal'];
-  const consumers = ['Dropdown'];
+  const consumers = ['Dropdown', 'SelectLike'];
   // const consumers = Object.keys(consumerComponent);
 
   containers.forEach((containerKey) => {
@@ -312,7 +312,7 @@ describe('Test useZIndex hooks', () => {
           }
 
           unmount();
-        });
+        }, 15000);
       });
     });
   });

components/auto-complete/index.tsx

@@ -18,6 +18,7 @@ import type {
   SelectProps,
 } from '../select';
 import Select from '../select';
+import { useZIndex } from '../_util/hooks/useZIndex';
 
 const { Option } = Select;
 
@@ -128,6 +129,9 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
 
   const prefixCls = getPrefixCls('select', customizePrefixCls);
 
+  // ============================ zIndex ============================
+  const [zIndex] = useZIndex('SelectLike', props.dropdownStyle?.zIndex as number);
+
   return (
     <Select
       ref={ref}
@@ -135,6 +139,10 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
       {...omit(props, ['dataSource', 'dropdownClassName'])}
       prefixCls={prefixCls}
       popupClassName={popupClassName || dropdownClassName}
+      dropdownStyle={{
+        ...props.dropdownStyle,
+        zIndex,
+      }}
       className={classNames(`${prefixCls}-auto-complete`, className)}
       mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as SelectProps['mode']}
       {...{

components/cascader/index.tsx

@@ -34,6 +34,7 @@ import useCheckable from './hooks/useCheckable';
 import useColumnIcons from './hooks/useColumnIcons';
 import CascaderPanel from './Panel';
 import useStyle from './style';
+import { useZIndex } from '../_util/hooks/useZIndex';
 
 // Align the design since we use `rc-select` in root. This help:
 // - List search content will show all content
@@ -288,6 +289,9 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
 
   const mergedAllowClear = allowClear === true ? { clearIcon } : allowClear;
 
+  // ============================ zIndex ============================
+  const [zIndex] = useZIndex('SelectLike', restProps.dropdownStyle?.zIndex as number);
+
   // ==================== Render =====================
   const renderNode = (
     <RcCascader
@@ -324,6 +328,10 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
       checkable={checkable}
       dropdownClassName={mergedDropdownClassName}
       dropdownPrefixCls={customizePrefixCls || cascaderPrefixCls}
+      dropdownStyle={{
+        ...restProps.dropdownStyle,
+        zIndex,
+      }}
       choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
       transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
       getPopupContainer={getPopupContainer || getContextPopupContainer}

components/select/index.tsx

@@ -272,7 +272,7 @@ const InternalSelect = <
       disabled={mergedDisabled}
       dropdownStyle={{
         ...props?.dropdownStyle,
-        zIndex: props.dropdownStyle?.zIndex ?? zIndex,
+        zIndex,
       }}
     />,
   );

components/tree-select/index.tsx

@@ -28,6 +28,7 @@ import type { AntTreeNodeProps, TreeProps } from '../tree';
 import type { SwitcherIcon } from '../tree/Tree';
 import SwitcherIconCom from '../tree/utils/iconUtil';
 import useStyle from './style';
+import { useZIndex } from '../_util/hooks/useZIndex';
 
 type RawValue = string | number;
 
@@ -249,6 +250,9 @@ const InternalTreeSelect = <
     />
   );
 
+  // ============================ zIndex ============================
+  const [zIndex] = useZIndex('SelectLike', props.dropdownStyle?.zIndex as number);
+
   const returnNode = (
     <RcTreeSelect
       virtual={virtual}
@@ -276,6 +280,10 @@ const InternalTreeSelect = <
       getPopupContainer={getPopupContainer || getContextPopupContainer}
       treeMotion={null}
       dropdownClassName={mergedDropdownClassName}
+      dropdownStyle={{
+        ...props.dropdownStyle,
+        zIndex,
+      }}
       choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
       transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
       treeExpandAction={treeExpandAction}