refactor: popup structure (react-component#1145)

Author: thinkasany

src/OptionList.tsx

@@ -329,8 +329,8 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
         direction={direction}
         innerProps={virtual ? null : a11yProps}
         showScrollBar={showScrollBar}
-        className={contextClassNames?.list}
-        style={contextStyles?.list}
+        className={contextClassNames?.popup?.list}
+        style={contextStyles?.popup?.list}
       >
         {(item, itemIndex) => {
           const { group, groupOption, data, label, value } = item;
@@ -363,7 +363,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
             itemPrefixCls,
             optionPrefixCls,
             className,
-            contextClassNames?.listItem,
+            contextClassNames?.popup?.listItem,
             {
               [`${optionPrefixCls}-grouped`]: groupOption,
               [`${optionPrefixCls}-active`]: activeIndex === itemIndex && !mergedDisabled,
@@ -403,7 +403,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
                   onSelectValue(value);
                 }
               }}
-              style={{ ...contextStyles?.listItem, ...style }}
+              style={{ ...contextStyles?.popup?.listItem, ...style }}
             >
               <div className={`${optionPrefixCls}-content`}>
                 {typeof optionRender === 'function'

src/Select.tsx

@@ -108,7 +108,8 @@ export type SelectHandler<ValueType, OptionType extends BaseOptionType = Default
 
 type ArrayElementType<T> = T extends (infer E)[] ? E : T;
 
-export type SemanticName = BaseSelectSemanticName | 'listItem' | 'list';
+export type SemanticName = BaseSelectSemanticName;
+export type PopupSemantic = 'listItem' | 'list';
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType>
   extends BaseSelectPropsWithoutPrivate {
   prefixCls?: string;

src/SelectContext.ts

@@ -7,6 +7,7 @@ import type {
   OnInternalSelect,
   SelectProps,
   SemanticName,
+  PopupSemantic,
 } from './Select';
 import type { FlattenOptionData } from './interface';
 
@@ -15,8 +16,12 @@ import type { FlattenOptionData } from './interface';
  * SelectContext is only used for Select. BaseSelect should not consume this context.
  */
 export interface SelectContextProps {
-  classNames?: Partial<Record<SemanticName, string>>;
-  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  classNames?: Partial<Record<SemanticName, string>> & {
+    popup?: Partial<Record<PopupSemantic, string>>;
+  };
+  styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
+    popup?: Partial<Record<PopupSemantic, React.CSSProperties>>;
+  };
   options: BaseOptionType[];
   optionRender?: SelectProps['optionRender'];
   flattenOptions: FlattenOptionData<BaseOptionType>[];

tests/Select.test.tsx

@@ -2423,16 +2423,20 @@ describe('Select.Basic', () => {
     const customClassNames = {
       prefix: 'custom-prefix',
       suffix: 'custom-suffix',
-      list: 'custom-list',
-      listItem: 'custom-item',
       input: 'custom-input',
+      popup: {
+        list: 'custom-list',
+        listItem: 'custom-item',
+      },
     };
     const customStyle = {
       prefix: { color: 'red' },
       suffix: { color: 'green' },
-      list: { color: 'yellow' },
-      listItem: { color: 'blue' },
       input: { color: 'black' },
+      popup: {
+        list: { color: 'yellow' },
+        listItem: { color: 'blue' },
+      },
     };
     const { container } = render(
       <Select
@@ -2459,10 +2463,10 @@ describe('Select.Basic', () => {
     expect(prefix).toHaveStyle(customStyle.prefix);
     expect(suffix).toHaveClass(customClassNames.suffix);
     expect(suffix).toHaveStyle(customStyle.suffix);
-    expect(item).toHaveClass(customClassNames.listItem);
-    expect(item).toHaveStyle(customStyle.listItem);
-    expect(list).toHaveClass(customClassNames.list);
-    expect(list).toHaveStyle(customStyle.list);
+    expect(item).toHaveClass(customClassNames.popup.listItem);
+    expect(item).toHaveStyle(customStyle.popup.listItem);
+    expect(list).toHaveClass(customClassNames.popup.list);
+    expect(list).toHaveStyle(customStyle.popup.list);
     expect(input).toHaveClass(customClassNames.input);
     expect(input).toHaveStyle(customStyle.input);
   });