refactor: popup object (#644)

Author: thinkasany

src/OptionList.tsx

@@ -344,8 +344,8 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
       )}
       <UnstableContext.Provider value={{ nodeDisabled }}>
         <Tree
-          classNames={treeClassNames}
-          styles={styles}
+          classNames={treeClassNames?.popup}
+          styles={styles?.popup}
           ref={treeRef}
           focusable={false}
           prefixCls={`${prefixCls}-tree`}

src/TreeSelect.tsx

@@ -35,12 +35,19 @@ import type {
   LegacyDataNode,
 } from './interface';
 
+export type SemanticName = 'input' | 'prefix' | 'suffix';
+export type PopupSemantic = 'item' | 'itemTitle';
 export interface TreeSelectProps<ValueType = any, OptionType extends DataNode = DataNode>
-  extends Omit<BaseSelectPropsWithoutPrivate, 'mode'> {
+  extends Omit<BaseSelectPropsWithoutPrivate, 'mode' | 'classNames' | 'styles'> {
   prefixCls?: string;
   id?: string;
   children?: React.ReactNode;
-
+  styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
+    popup?: Partial<Record<PopupSemantic, React.CSSProperties>>;
+  };
+  classNames?: Partial<Record<SemanticName, string>> & {
+    popup?: Partial<Record<PopupSemantic, string>>;
+  };
   // >>> Value
   value?: ValueType;
   defaultValue?: ValueType;

src/TreeSelectContext.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 import type { ExpandAction } from '@rc-component/tree/lib/Tree';
 import type { DataNode, FieldNames, Key } from './interface';
 import type useDataEntities from './hooks/useDataEntities';
+import { TreeSelectProps } from './TreeSelect';
 
-export type SemanticName = 'item' | 'itemTitle' | 'input' | 'prefix' | 'suffix';
 export interface TreeSelectContextProps {
   virtual?: boolean;
   popupMatchSelectWidth?: boolean | number;
@@ -22,8 +22,8 @@ export interface TreeSelectContextProps {
   /** When `true`, only take leaf node as count, or take all as count with `maxCount` limitation */
   leafCountOnly: boolean;
   valueEntities: ReturnType<typeof useDataEntities>['valueEntities'];
-  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
-  classNames?: Partial<Record<SemanticName, string>>;
+  classNames: TreeSelectProps['classNames'];
+  styles: TreeSelectProps['styles'];
 }
 
 const TreeSelectContext = React.createContext<TreeSelectContextProps>(null as any);

tests/Select.spec.tsx

@@ -666,15 +666,19 @@ describe('TreeSelect.basic', () => {
       prefix: 'test-prefix',
       input: 'test-input',
       suffix: 'test-suffix',
-      item: 'test-item',
-      itemTitle: 'test-item-title',
+      popup: {
+        item: 'test-item',
+        itemTitle: 'test-item-title',
+      },
     };
     const customStyles = {
       prefix: { color: 'green' },
       input: { color: 'blue' },
       suffix: { color: 'yellow' },
-      item: { color: 'black' },
-      itemTitle: { color: 'purple' },
+      popup: {
+        item: { color: 'black' },
+        itemTitle: { color: 'purple' },
+      },
     };
     const { container } = render(
       <TreeSelect
@@ -693,16 +697,16 @@ describe('TreeSelect.basic', () => {
     const input = container.querySelector('.rc-tree-select-selection-search-input');
     const suffix = container.querySelector('.rc-tree-select-arrow');
     const itemTitle = container.querySelector('.rc-tree-select-tree-title');
-    const item = container.querySelector(`.${customClassNames.item}`);
+    const item = container.querySelector(`.${customClassNames.popup.item}`);
     expect(prefix).toHaveClass(customClassNames.prefix);
     expect(input).toHaveClass(customClassNames.input);
     expect(suffix).toHaveClass(customClassNames.suffix);
-    expect(itemTitle).toHaveClass(customClassNames.itemTitle);
+    expect(itemTitle).toHaveClass(customClassNames.popup.itemTitle);
 
     expect(prefix).toHaveStyle(customStyles.prefix);
     expect(input).toHaveStyle(customStyles.input);
     expect(suffix).toHaveStyle(customStyles.suffix);
-    expect(itemTitle).toHaveStyle(customStyles.itemTitle);
-    expect(item).toHaveStyle(customStyles.item);
+    expect(itemTitle).toHaveStyle(customStyles.popup.itemTitle);
+    expect(item).toHaveStyle(customStyles.popup.item);
   });
 });