@rc-component/tree-select 1.1.0 → 1.1.1

package/es/OptionList.js

@@ -42,7 +42,9 @@ const OptionList = (_, ref) => {
     onPopupScroll,
     leftMaxCount,
     leafCountOnly,
-    valueEntities
+    valueEntities,
+    classNames: treeClassNames,
+    styles
   } = React.useContext(TreeSelectContext);
   const {
     checkable,
@@ -308,6 +310,8 @@ const OptionList = (_, ref) => {
       nodeDisabled
     }
   }, /*#__PURE__*/React.createElement(Tree, _extends({
+    classNames: treeClassNames,
+    styles: styles,
     ref: treeRef,
     focusable: false,
     prefixCls: `${prefixCls}-tree`,

package/es/TreeSelect.js

@@ -77,6 +77,8 @@ const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     treeMotion,
     treeTitleRender,
     onPopupScroll,
+    classNames: treeSelectClassNames,
+    styles,
     ...restProps
   } = props;
   const mergedId = useId(id);
@@ -441,9 +443,11 @@ const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       onPopupScroll,
       leftMaxCount: maxCount === undefined ? null : maxCount - cachedDisplayValues.length,
       leafCountOnly: mergedShowCheckedStrategy === 'SHOW_CHILD' && !treeCheckStrictly && !!treeCheckable,
-      valueEntities
+      valueEntities,
+      classNames: treeSelectClassNames,
+      styles
     };
-  }, [virtual, popupMatchSelectWidth, listHeight, listItemHeight, listItemScrollOffset, filteredTreeData, mergedFieldNames, onOptionSelect, treeExpandAction, treeTitleRender, onPopupScroll, maxCount, cachedDisplayValues.length, mergedShowCheckedStrategy, treeCheckStrictly, treeCheckable, valueEntities]);
+  }, [virtual, popupMatchSelectWidth, listHeight, listItemHeight, listItemScrollOffset, filteredTreeData, mergedFieldNames, onOptionSelect, treeExpandAction, treeTitleRender, onPopupScroll, maxCount, cachedDisplayValues.length, mergedShowCheckedStrategy, treeCheckStrictly, treeCheckable, valueEntities, treeSelectClassNames, styles]);
 
   // ======================= Legacy Context =======================
   const legacyContext = React.useMemo(() => ({
@@ -474,7 +478,18 @@ const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, /*#__PURE__*/React.createElement(BaseSelect, _extends({
     ref: ref
   }, restProps, {
+    classNames: {
+      prefix: treeSelectClassNames?.prefix,
+      suffix: treeSelectClassNames?.suffix,
+      input: treeSelectClassNames?.input
+    },
+    styles: {
+      prefix: styles?.prefix,
+      suffix: styles?.suffix,
+      input: styles?.input
+    }
     // >>> MISC
+    ,
     id: mergedId,
     prefixCls: prefixCls,
     mode: mergedMultiple ? 'multiple' : undefined

package/es/TreeSelectContext.d.ts

@@ -2,6 +2,7 @@ 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';
+export type SemanticName = 'item' | 'itemTitle' | 'input' | 'prefix' | 'suffix';
 export interface TreeSelectContextProps {
     virtual?: boolean;
     popupMatchSelectWidth?: boolean | number;
@@ -20,6 +21,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>>;
 }
 declare const TreeSelectContext: React.Context<TreeSelectContextProps>;
 export default TreeSelectContext;

package/lib/OptionList.js

@@ -50,7 +50,9 @@ const OptionList = (_, ref) => {
     onPopupScroll,
     leftMaxCount,
     leafCountOnly,
-    valueEntities
+    valueEntities,
+    classNames: treeClassNames,
+    styles
   } = React.useContext(_TreeSelectContext.default);
   const {
     checkable,
@@ -316,6 +318,8 @@ const OptionList = (_, ref) => {
       nodeDisabled
     }
   }, /*#__PURE__*/React.createElement(_tree.default, _extends({
+    classNames: treeClassNames,
+    styles: styles,
     ref: treeRef,
     focusable: false,
     prefixCls: `${prefixCls}-tree`,

package/lib/TreeSelect.js

@@ -86,6 +86,8 @@ const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     treeMotion,
     treeTitleRender,
     onPopupScroll,
+    classNames: treeSelectClassNames,
+    styles,
     ...restProps
   } = props;
   const mergedId = (0, _useId.default)(id);
@@ -450,9 +452,11 @@ const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       onPopupScroll,
       leftMaxCount: maxCount === undefined ? null : maxCount - cachedDisplayValues.length,
       leafCountOnly: mergedShowCheckedStrategy === 'SHOW_CHILD' && !treeCheckStrictly && !!treeCheckable,
-      valueEntities
+      valueEntities,
+      classNames: treeSelectClassNames,
+      styles
     };
-  }, [virtual, popupMatchSelectWidth, listHeight, listItemHeight, listItemScrollOffset, filteredTreeData, mergedFieldNames, onOptionSelect, treeExpandAction, treeTitleRender, onPopupScroll, maxCount, cachedDisplayValues.length, mergedShowCheckedStrategy, treeCheckStrictly, treeCheckable, valueEntities]);
+  }, [virtual, popupMatchSelectWidth, listHeight, listItemHeight, listItemScrollOffset, filteredTreeData, mergedFieldNames, onOptionSelect, treeExpandAction, treeTitleRender, onPopupScroll, maxCount, cachedDisplayValues.length, mergedShowCheckedStrategy, treeCheckStrictly, treeCheckable, valueEntities, treeSelectClassNames, styles]);
 
   // ======================= Legacy Context =======================
   const legacyContext = React.useMemo(() => ({
@@ -483,7 +487,18 @@ const TreeSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, /*#__PURE__*/React.createElement(_select.BaseSelect, _extends({
     ref: ref
   }, restProps, {
+    classNames: {
+      prefix: treeSelectClassNames?.prefix,
+      suffix: treeSelectClassNames?.suffix,
+      input: treeSelectClassNames?.input
+    },
+    styles: {
+      prefix: styles?.prefix,
+      suffix: styles?.suffix,
+      input: styles?.input
+    }
     // >>> MISC
+    ,
     id: mergedId,
     prefixCls: prefixCls,
     mode: mergedMultiple ? 'multiple' : undefined

package/lib/TreeSelectContext.d.ts

@@ -2,6 +2,7 @@ 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';
+export type SemanticName = 'item' | 'itemTitle' | 'input' | 'prefix' | 'suffix';
 export interface TreeSelectContextProps {
     virtual?: boolean;
     popupMatchSelectWidth?: boolean | number;
@@ -20,6 +21,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>>;
 }
 declare const TreeSelectContext: React.Context<TreeSelectContextProps>;
 export default TreeSelectContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/tree-select",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "tree-select ui component for react",
   "keywords": [
     "react",
@@ -45,8 +45,8 @@
   },
   "dependencies": {
     "classnames": "2.x",
-    "@rc-component/select": "~1.0.0",
-    "@rc-component/tree": "~1.0.0",
+    "@rc-component/select": "~1.0.2",
+    "@rc-component/tree": "~1.0.1",
     "@rc-component/util": "^1.2.1"
   },
   "devDependencies": {