From f352442bb9a793d37a22cc9e7758f07062d8e0a5 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Mon, 28 Apr 2025 16:06:56 +0800
Subject: [PATCH] refactor: popup structure

---
 src/OptionList.tsx    |  8 ++++----
 src/Select.tsx        |  3 ++-
 src/SelectContext.ts  |  9 +++++++--
 tests/Select.test.tsx | 20 ++++++++++++--------
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/OptionList.tsx b/src/OptionList.tsx
index 4a54cce5a..78abe706b 100644
--- a/src/OptionList.tsx
+++ b/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'
diff --git a/src/Select.tsx b/src/Select.tsx
index 39da90411..f278d6c3e 100644
--- a/src/Select.tsx
+++ b/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;
diff --git a/src/SelectContext.ts b/src/SelectContext.ts
index 8918e4935..9a78d1c54 100644
--- a/src/SelectContext.ts
+++ b/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>[];
diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx
index b79b9a131..c39c271c0 100644
--- a/tests/Select.test.tsx
+++ b/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);
   });