@rc-component/select 1.0.0 → 1.0.2

package/es/BaseSelect/index.d.ts

@@ -2,6 +2,7 @@ import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/int
 import type { ScrollConfig, ScrollTo } from 'rc-virtual-list/lib/List';
 import * as React from 'react';
 import type { DisplayInfoType, DisplayValueType, Mode, Placement, RawValueType, RenderDOMFunc, RenderNode } from '../interface';
+export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input';
 export type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType, };
 export interface RefOptionListProps {
     onKeyDown: React.KeyboardEventHandler;
@@ -53,17 +54,20 @@ export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSele
 export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttributes {
     className?: string;
     style?: React.CSSProperties;
-    title?: string;
+    classNames?: Partial<Record<BaseSelectSemanticName, string>>;
+    styles?: Partial<Record<BaseSelectSemanticName, React.CSSProperties>>;
     showSearch?: boolean;
     tagRender?: (props: CustomTagProps) => React.ReactElement;
     direction?: 'ltr' | 'rtl';
-    maxLength?: number;
-    showScrollBar?: boolean | 'optional';
-    tabIndex?: number;
     autoFocus?: boolean;
-    notFoundContent?: React.ReactNode;
     placeholder?: React.ReactNode;
+    maxCount?: number;
+    title?: string;
+    tabIndex?: number;
+    notFoundContent?: React.ReactNode;
     onClear?: () => void;
+    maxLength?: number;
+    showScrollBar?: boolean | 'optional';
     choiceTransitionName?: string;
     mode?: Mode;
     disabled?: boolean;

package/es/BaseSelect/index.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import classNames from 'classnames';
+import cls from 'classnames';
 import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
 import useMergedState from "@rc-component/util/es/hooks/useMergedState";
 import isMobile from "@rc-component/util/es/isMobile";
@@ -14,7 +14,6 @@ import Selector from "../Selector";
 import SelectTrigger from "../SelectTrigger";
 import TransBtn from "../TransBtn";
 import { getSeparatedContent, isValidCount } from "../utils/valueUtil";
-import SelectContext from "../SelectContext";
 import Polite from "./Polite";
 const DEFAULT_OMIT_PROPS = ['value', 'onChange', 'removeIcon', 'placeholder', 'autoFocus', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'tabIndex'];
 export const isMultiple = mode => mode === 'tags' || mode === 'multiple';
@@ -23,6 +22,8 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     id,
     prefixCls,
     className,
+    styles,
+    classNames,
     showSearch,
     tagRender,
     showScrollBar = 'optional',
@@ -34,6 +35,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     emptyOptions,
     notFoundContent = 'Not Found',
     onClear,
+    maxCount,
     // Mode
     mode,
     // Status
@@ -171,18 +173,14 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // ============================= Search =============================
   const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
-  const {
-    maxCount,
-    rawValues
-  } = React.useContext(SelectContext) || {};
   const onInternalSearch = (searchText, fromTyping, isCompositing) => {
-    if (multiple && isValidCount(maxCount) && rawValues?.size >= maxCount) {
+    if (multiple && isValidCount(maxCount) && displayValues.length >= maxCount) {
       return;
     }
     let ret = true;
     let newSearchText = searchText;
     onActiveValueChange?.(null);
-    const separatedList = getSeparatedContent(searchText, tokenSeparators, isValidCount(maxCount) ? maxCount - rawValues.size : undefined);
+    const separatedList = getSeparatedContent(searchText, tokenSeparators, isValidCount(maxCount) ? maxCount - displayValues.length : undefined);
 
     // Check if match the `tokenSeparators`
     const patchLabels = isCompositing ? null : separatedList;
@@ -424,8 +422,10 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     showSearch: mergedShowSearch,
     multiple,
     toggleOpen: onToggleOpen,
-    showScrollBar
-  }), [props, notFoundContent, triggerOpen, mergedOpen, id, mergedShowSearch, multiple, onToggleOpen, showScrollBar]);
+    showScrollBar,
+    styles,
+    classNames
+  }), [props, notFoundContent, triggerOpen, mergedOpen, id, mergedShowSearch, multiple, onToggleOpen, showScrollBar, styles, classNames]);
 
   // ==================================================================
   // ==                            Render                            ==
@@ -436,9 +436,10 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   let arrowNode;
   if (showSuffixIcon) {
     arrowNode = /*#__PURE__*/React.createElement(TransBtn, {
-      className: classNames(`${prefixCls}-arrow`, {
+      className: cls(`${prefixCls}-arrow`, classNames?.suffix, {
         [`${prefixCls}-arrow-loading`]: loading
       }),
+      style: styles?.suffix,
       customizeIcon: suffixIcon,
       customizeIconProps: {
         loading,
@@ -471,7 +472,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
 
   // ============================= Select =============================
-  const mergedClassName = classNames(prefixCls, className, {
+  const mergedClassName = cls(prefixCls, className, {
     [`${prefixCls}-focused`]: mockFocused,
     [`${prefixCls}-multiple`]: multiple,
     [`${prefixCls}-single`]: !multiple,
@@ -513,6 +514,8 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, customizeRawInputElement ? ( /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
     ref: customizeRawInputRef
   })) : /*#__PURE__*/React.createElement(Selector, _extends({}, props, {
+    prefixClassName: classNames?.prefix,
+    prefixStyle: styles?.prefix,
     domRef: selectorDomRef,
     prefixCls: prefixCls,
     inputElement: customizeInputElement,

package/es/OptionList.js

@@ -49,7 +49,9 @@ const OptionList = (_, ref) => {
     direction,
     listHeight,
     listItemHeight,
-    optionRender
+    optionRender,
+    classNames: contextClassNames,
+    styles: contextStyles
   } = React.useContext(SelectContext);
   const itemPrefixCls = `${prefixCls}-item`;
   const memoFlattenOptions = useMemo(() => flattenOptions, [open, flattenOptions], (prev, next) => next[0] && prev[1] !== next[1]);
@@ -290,7 +292,9 @@ const OptionList = (_, ref) => {
     virtual: virtual,
     direction: direction,
     innerProps: virtual ? null : a11yProps,
-    showScrollBar: showScrollBar
+    showScrollBar: showScrollBar,
+    className: contextClassNames?.list,
+    style: contextStyles?.list
   }, (item, itemIndex) => {
     const {
       group,
@@ -325,7 +329,7 @@ const OptionList = (_, ref) => {
     const selected = isSelected(value);
     const mergedDisabled = disabled || !selected && overMaxCount;
     const optionPrefixCls = `${itemPrefixCls}-option`;
-    const optionClassName = classNames(itemPrefixCls, optionPrefixCls, className, {
+    const optionClassName = classNames(itemPrefixCls, optionPrefixCls, className, contextClassNames?.listItem, {
       [`${optionPrefixCls}-grouped`]: groupOption,
       [`${optionPrefixCls}-active`]: activeIndex === itemIndex && !mergedDisabled,
       [`${optionPrefixCls}-disabled`]: mergedDisabled,
@@ -356,7 +360,10 @@ const OptionList = (_, ref) => {
           onSelectValue(value);
         }
       },
-      style: style
+      style: {
+        ...contextStyles?.listItem,
+        ...style
+      }
     }), /*#__PURE__*/React.createElement("div", {
       className: `${optionPrefixCls}-content`
     }, typeof optionRender === 'function' ? optionRender(item, {

package/es/Select.d.ts

@@ -29,7 +29,7 @@
  * - `combobox` mode not support `optionLabelProp`
  */
 import * as React from 'react';
-import type { BaseSelectPropsWithoutPrivate, BaseSelectRef, DisplayValueType, RenderNode } from './BaseSelect';
+import type { BaseSelectPropsWithoutPrivate, BaseSelectRef, BaseSelectSemanticName, DisplayValueType, RenderNode } from './BaseSelect';
 import OptGroup from './OptGroup';
 import Option from './Option';
 import type { FlattenOptionData } from './interface';
@@ -65,6 +65,7 @@ export interface DefaultOptionType extends BaseOptionType {
 }
 export type SelectHandler<ValueType, OptionType extends BaseOptionType = DefaultOptionType> = (value: ValueType, option: OptionType) => void;
 type ArrayElementType<T> = T extends (infer E)[] ? E : T;
+export type SemanticName = BaseSelectSemanticName | 'listItem' | 'list';
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends BaseSelectPropsWithoutPrivate {
     prefixCls?: string;
     id?: string;
@@ -104,8 +105,10 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     defaultValue?: ValueType | null;
     maxCount?: number;
     onChange?: (value: ValueType, option?: OptionType | OptionType[]) => void;
+    classNames?: Partial<Record<SemanticName, string>>;
+    styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
+declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
     children?: React.ReactNode;
 } & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;

package/es/Select.js

@@ -86,6 +86,8 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     labelInValue,
     onChange,
     maxCount,
+    classNames,
+    styles,
     ...restProps
   } = props;
   const mergedId = useId(id);
@@ -425,9 +427,11 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
       listItemHeight,
       childrenAsData,
       maxCount,
-      optionRender
+      optionRender,
+      classNames,
+      styles
     };
-  }, [maxCount, parsedOptions, displayOptions, onActiveValue, mergedDefaultActiveFirstOption, onInternalSelect, menuItemSelectedIcon, rawValues, mergedFieldNames, virtual, popupMatchSelectWidth, direction, listHeight, listItemHeight, childrenAsData, optionRender]);
+  }, [maxCount, parsedOptions, displayOptions, onActiveValue, mergedDefaultActiveFirstOption, onInternalSelect, menuItemSelectedIcon, rawValues, mergedFieldNames, virtual, popupMatchSelectWidth, direction, listHeight, listItemHeight, childrenAsData, optionRender, classNames, styles]);
 
   // ========================== Warning ===========================
   if (process.env.NODE_ENV !== 'production') {
@@ -447,10 +451,15 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref,
     omitDomProps: OMIT_DOM_PROPS,
     mode: mode
+    // >>> Style
+    ,
+    classNames: classNames,
+    styles: styles
     // >>> Values
     ,
     displayValues: displayValues,
-    onDisplayValuesChange: onDisplayValuesChange
+    onDisplayValuesChange: onDisplayValuesChange,
+    maxCount: maxCount
     // >>> Trigger
     ,
     direction: direction

package/es/SelectContext.d.ts

@@ -1,8 +1,13 @@
 import * as React from 'react';
 import type { RawValueType, RenderNode } from './BaseSelect';
-import type { BaseOptionType, FieldNames, OnActiveValue, OnInternalSelect, SelectProps } from './Select';
+import type { BaseOptionType, FieldNames, OnActiveValue, OnInternalSelect, SelectProps, SemanticName } from './Select';
 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>>;
     options: BaseOptionType[];
     optionRender?: SelectProps['optionRender'];
     flattenOptions: FlattenOptionData<BaseOptionType>[];

package/es/SelectContext.js

@@ -1,6 +1,9 @@
 import * as React from 'react';
 
 // Use any here since we do not get the type during compilation
+/**
+ * SelectContext is only used for Select. BaseSelect should not consume this context.
+ */
 
 const SelectContext = /*#__PURE__*/React.createContext(null);
 export default SelectContext;

package/es/Selector/Input.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { composeRef } from "@rc-component/util/es/ref";
 import { warning } from "@rc-component/util/es/warning";
+import useBaseProps from "../hooks/useBaseProps";
 const Input = (props, ref) => {
   const {
     prefixCls,
@@ -25,6 +26,10 @@ const Input = (props, ref) => {
     open,
     attrs
   } = props;
+  const {
+    classNames: contextClassNames,
+    styles: contextStyles
+  } = useBaseProps() || {};
   let inputNode = inputElement || /*#__PURE__*/React.createElement("input", null);
   const {
     ref: originRef,
@@ -50,7 +55,7 @@ const Input = (props, ref) => {
     tabIndex,
     autoComplete: autoComplete || 'off',
     autoFocus,
-    className: classNames(`${prefixCls}-selection-search-input`, inputNode?.props?.className),
+    className: classNames(`${prefixCls}-selection-search-input`, inputNode?.props?.className, contextClassNames?.input),
     role: 'combobox',
     'aria-expanded': open || false,
     'aria-haspopup': 'listbox',
@@ -65,7 +70,8 @@ const Input = (props, ref) => {
     unselectable: !editable ? 'on' : null,
     style: {
       ...style,
-      opacity: editable ? null : 0
+      opacity: editable ? null : 0,
+      ...contextStyles?.input
     },
     onKeyDown: event => {
       onKeyDown(event);

package/es/Selector/index.d.ts

@@ -42,6 +42,8 @@ export interface RefSelectorProps {
     scrollTo?: ScrollTo;
 }
 export interface SelectorProps {
+    prefixClassName: string;
+    prefixStyle: React.CSSProperties;
     id: string;
     prefixCls: string;
     showSearch?: boolean;

package/es/Selector/index.js

@@ -16,10 +16,13 @@ import useLock from "../hooks/useLock";
 import { isValidateOpenKey } from "../utils/keyUtil";
 import MultipleSelector from "./MultipleSelector";
 import SingleSelector from "./SingleSelector";
+import classNames from 'classnames';
 const Selector = (props, ref) => {
   const inputRef = useRef(null);
   const compositionStatusRef = useRef(false);
   const {
+    prefixClassName,
+    prefixStyle,
     prefixCls,
     open,
     mode,
@@ -174,7 +177,8 @@ const Selector = (props, ref) => {
     onClick: onClick,
     onMouseDown: onMouseDown
   }, prefix && /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-prefix`
+    className: classNames(`${prefixCls}-prefix`, prefixClassName),
+    style: prefixStyle
   }, prefix), selectNode);
 };
 const ForwardSelector = /*#__PURE__*/React.forwardRef(Selector);

package/es/TransBtn.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { RenderNode } from './BaseSelect';
 export interface TransBtnProps {
     className: string;
+    style?: React.CSSProperties;
     customizeIcon: RenderNode;
     customizeIconProps?: any;
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>;

package/es/TransBtn.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 const TransBtn = props => {
   const {
     className,
+    style,
     customizeIcon,
     customizeIconProps,
     children,
@@ -18,7 +19,8 @@ const TransBtn = props => {
     },
     style: {
       userSelect: 'none',
-      WebkitUserSelect: 'none'
+      WebkitUserSelect: 'none',
+      ...style
     },
     unselectable: "on",
     onClick: onClick,

package/lib/BaseSelect/index.d.ts

@@ -2,6 +2,7 @@ import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/int
 import type { ScrollConfig, ScrollTo } from 'rc-virtual-list/lib/List';
 import * as React from 'react';
 import type { DisplayInfoType, DisplayValueType, Mode, Placement, RawValueType, RenderDOMFunc, RenderNode } from '../interface';
+export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input';
 export type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType, };
 export interface RefOptionListProps {
     onKeyDown: React.KeyboardEventHandler;
@@ -53,17 +54,20 @@ export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSele
 export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttributes {
     className?: string;
     style?: React.CSSProperties;
-    title?: string;
+    classNames?: Partial<Record<BaseSelectSemanticName, string>>;
+    styles?: Partial<Record<BaseSelectSemanticName, React.CSSProperties>>;
     showSearch?: boolean;
     tagRender?: (props: CustomTagProps) => React.ReactElement;
     direction?: 'ltr' | 'rtl';
-    maxLength?: number;
-    showScrollBar?: boolean | 'optional';
-    tabIndex?: number;
     autoFocus?: boolean;
-    notFoundContent?: React.ReactNode;
     placeholder?: React.ReactNode;
+    maxCount?: number;
+    title?: string;
+    tabIndex?: number;
+    notFoundContent?: React.ReactNode;
     onClear?: () => void;
+    maxLength?: number;
+    showScrollBar?: boolean | 'optional';
     choiceTransitionName?: string;
     mode?: Mode;
     disabled?: boolean;

package/lib/BaseSelect/index.js

@@ -19,7 +19,6 @@ var _Selector = _interopRequireDefault(require("../Selector"));
 var _SelectTrigger = _interopRequireDefault(require("../SelectTrigger"));
 var _TransBtn = _interopRequireDefault(require("../TransBtn"));
 var _valueUtil = require("../utils/valueUtil");
-var _SelectContext = _interopRequireDefault(require("../SelectContext"));
 var _Polite = _interopRequireDefault(require("./Polite"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -33,6 +32,8 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     id,
     prefixCls,
     className,
+    styles,
+    classNames,
     showSearch,
     tagRender,
     showScrollBar = 'optional',
@@ -44,6 +45,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     emptyOptions,
     notFoundContent = 'Not Found',
     onClear,
+    maxCount,
     // Mode
     mode,
     // Status
@@ -181,18 +183,14 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // ============================= Search =============================
   const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
-  const {
-    maxCount,
-    rawValues
-  } = React.useContext(_SelectContext.default) || {};
   const onInternalSearch = (searchText, fromTyping, isCompositing) => {
-    if (multiple && (0, _valueUtil.isValidCount)(maxCount) && rawValues?.size >= maxCount) {
+    if (multiple && (0, _valueUtil.isValidCount)(maxCount) && displayValues.length >= maxCount) {
       return;
     }
     let ret = true;
     let newSearchText = searchText;
     onActiveValueChange?.(null);
-    const separatedList = (0, _valueUtil.getSeparatedContent)(searchText, tokenSeparators, (0, _valueUtil.isValidCount)(maxCount) ? maxCount - rawValues.size : undefined);
+    const separatedList = (0, _valueUtil.getSeparatedContent)(searchText, tokenSeparators, (0, _valueUtil.isValidCount)(maxCount) ? maxCount - displayValues.length : undefined);
 
     // Check if match the `tokenSeparators`
     const patchLabels = isCompositing ? null : separatedList;
@@ -434,8 +432,10 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     showSearch: mergedShowSearch,
     multiple,
     toggleOpen: onToggleOpen,
-    showScrollBar
-  }), [props, notFoundContent, triggerOpen, mergedOpen, id, mergedShowSearch, multiple, onToggleOpen, showScrollBar]);
+    showScrollBar,
+    styles,
+    classNames
+  }), [props, notFoundContent, triggerOpen, mergedOpen, id, mergedShowSearch, multiple, onToggleOpen, showScrollBar, styles, classNames]);
 
   // ==================================================================
   // ==                            Render                            ==
@@ -446,9 +446,10 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   let arrowNode;
   if (showSuffixIcon) {
     arrowNode = /*#__PURE__*/React.createElement(_TransBtn.default, {
-      className: (0, _classnames.default)(`${prefixCls}-arrow`, {
+      className: (0, _classnames.default)(`${prefixCls}-arrow`, classNames?.suffix, {
         [`${prefixCls}-arrow-loading`]: loading
       }),
+      style: styles?.suffix,
       customizeIcon: suffixIcon,
       customizeIconProps: {
         loading,
@@ -523,6 +524,8 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, customizeRawInputElement ? ( /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
     ref: customizeRawInputRef
   })) : /*#__PURE__*/React.createElement(_Selector.default, _extends({}, props, {
+    prefixClassName: classNames?.prefix,
+    prefixStyle: styles?.prefix,
     domRef: selectorDomRef,
     prefixCls: prefixCls,
     inputElement: customizeInputElement,

package/lib/OptionList.js

@@ -57,7 +57,9 @@ const OptionList = (_, ref) => {
     direction,
     listHeight,
     listItemHeight,
-    optionRender
+    optionRender,
+    classNames: contextClassNames,
+    styles: contextStyles
   } = React.useContext(_SelectContext.default);
   const itemPrefixCls = `${prefixCls}-item`;
   const memoFlattenOptions = (0, _useMemo.default)(() => flattenOptions, [open, flattenOptions], (prev, next) => next[0] && prev[1] !== next[1]);
@@ -298,7 +300,9 @@ const OptionList = (_, ref) => {
     virtual: virtual,
     direction: direction,
     innerProps: virtual ? null : a11yProps,
-    showScrollBar: showScrollBar
+    showScrollBar: showScrollBar,
+    className: contextClassNames?.list,
+    style: contextStyles?.list
   }, (item, itemIndex) => {
     const {
       group,
@@ -333,7 +337,7 @@ const OptionList = (_, ref) => {
     const selected = isSelected(value);
     const mergedDisabled = disabled || !selected && overMaxCount;
     const optionPrefixCls = `${itemPrefixCls}-option`;
-    const optionClassName = (0, _classnames.default)(itemPrefixCls, optionPrefixCls, className, {
+    const optionClassName = (0, _classnames.default)(itemPrefixCls, optionPrefixCls, className, contextClassNames?.listItem, {
       [`${optionPrefixCls}-grouped`]: groupOption,
       [`${optionPrefixCls}-active`]: activeIndex === itemIndex && !mergedDisabled,
       [`${optionPrefixCls}-disabled`]: mergedDisabled,
@@ -364,7 +368,10 @@ const OptionList = (_, ref) => {
           onSelectValue(value);
         }
       },
-      style: style
+      style: {
+        ...contextStyles?.listItem,
+        ...style
+      }
     }), /*#__PURE__*/React.createElement("div", {
       className: `${optionPrefixCls}-content`
     }, typeof optionRender === 'function' ? optionRender(item, {

package/lib/Select.d.ts

@@ -29,7 +29,7 @@
  * - `combobox` mode not support `optionLabelProp`
  */
 import * as React from 'react';
-import type { BaseSelectPropsWithoutPrivate, BaseSelectRef, DisplayValueType, RenderNode } from './BaseSelect';
+import type { BaseSelectPropsWithoutPrivate, BaseSelectRef, BaseSelectSemanticName, DisplayValueType, RenderNode } from './BaseSelect';
 import OptGroup from './OptGroup';
 import Option from './Option';
 import type { FlattenOptionData } from './interface';
@@ -65,6 +65,7 @@ export interface DefaultOptionType extends BaseOptionType {
 }
 export type SelectHandler<ValueType, OptionType extends BaseOptionType = DefaultOptionType> = (value: ValueType, option: OptionType) => void;
 type ArrayElementType<T> = T extends (infer E)[] ? E : T;
+export type SemanticName = BaseSelectSemanticName | 'listItem' | 'list';
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends BaseSelectPropsWithoutPrivate {
     prefixCls?: string;
     id?: string;
@@ -104,8 +105,10 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     defaultValue?: ValueType | null;
     maxCount?: number;
     onChange?: (value: ValueType, option?: OptionType | OptionType[]) => void;
+    classNames?: Partial<Record<SemanticName, string>>;
+    styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
+declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
     children?: React.ReactNode;
 } & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;

package/lib/Select.js

@@ -93,6 +93,8 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     labelInValue,
     onChange,
     maxCount,
+    classNames,
+    styles,
     ...restProps
   } = props;
   const mergedId = (0, _useId.default)(id);
@@ -432,9 +434,11 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
       listItemHeight,
       childrenAsData,
       maxCount,
-      optionRender
+      optionRender,
+      classNames,
+      styles
     };
-  }, [maxCount, parsedOptions, displayOptions, onActiveValue, mergedDefaultActiveFirstOption, onInternalSelect, menuItemSelectedIcon, rawValues, mergedFieldNames, virtual, popupMatchSelectWidth, direction, listHeight, listItemHeight, childrenAsData, optionRender]);
+  }, [maxCount, parsedOptions, displayOptions, onActiveValue, mergedDefaultActiveFirstOption, onInternalSelect, menuItemSelectedIcon, rawValues, mergedFieldNames, virtual, popupMatchSelectWidth, direction, listHeight, listItemHeight, childrenAsData, optionRender, classNames, styles]);
 
   // ========================== Warning ===========================
   if (process.env.NODE_ENV !== 'production') {
@@ -454,10 +458,15 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref,
     omitDomProps: OMIT_DOM_PROPS,
     mode: mode
+    // >>> Style
+    ,
+    classNames: classNames,
+    styles: styles
     // >>> Values
     ,
     displayValues: displayValues,
-    onDisplayValuesChange: onDisplayValuesChange
+    onDisplayValuesChange: onDisplayValuesChange,
+    maxCount: maxCount
     // >>> Trigger
     ,
     direction: direction

package/lib/SelectContext.d.ts

@@ -1,8 +1,13 @@
 import * as React from 'react';
 import type { RawValueType, RenderNode } from './BaseSelect';
-import type { BaseOptionType, FieldNames, OnActiveValue, OnInternalSelect, SelectProps } from './Select';
+import type { BaseOptionType, FieldNames, OnActiveValue, OnInternalSelect, SelectProps, SemanticName } from './Select';
 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>>;
     options: BaseOptionType[];
     optionRender?: SelectProps['optionRender'];
     flattenOptions: FlattenOptionData<BaseOptionType>[];

package/lib/SelectContext.js

@@ -8,6 +8,9 @@ var React = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // Use any here since we do not get the type during compilation
+/**
+ * SelectContext is only used for Select. BaseSelect should not consume this context.
+ */
 
 const SelectContext = /*#__PURE__*/React.createContext(null);
 var _default = exports.default = SelectContext;

package/lib/Selector/Input.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ref = require("@rc-component/util/lib/ref");
 var _warning = require("@rc-component/util/lib/warning");
+var _useBaseProps = _interopRequireDefault(require("../hooks/useBaseProps"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -34,6 +35,10 @@ const Input = (props, ref) => {
     open,
     attrs
   } = props;
+  const {
+    classNames: contextClassNames,
+    styles: contextStyles
+  } = (0, _useBaseProps.default)() || {};
   let inputNode = inputElement || /*#__PURE__*/React.createElement("input", null);
   const {
     ref: originRef,
@@ -59,7 +64,7 @@ const Input = (props, ref) => {
     tabIndex,
     autoComplete: autoComplete || 'off',
     autoFocus,
-    className: (0, _classnames.default)(`${prefixCls}-selection-search-input`, inputNode?.props?.className),
+    className: (0, _classnames.default)(`${prefixCls}-selection-search-input`, inputNode?.props?.className, contextClassNames?.input),
     role: 'combobox',
     'aria-expanded': open || false,
     'aria-haspopup': 'listbox',
@@ -74,7 +79,8 @@ const Input = (props, ref) => {
     unselectable: !editable ? 'on' : null,
     style: {
       ...style,
-      opacity: editable ? null : 0
+      opacity: editable ? null : 0,
+      ...contextStyles?.input
     },
     onKeyDown: event => {
       onKeyDown(event);

package/lib/Selector/index.d.ts

@@ -42,6 +42,8 @@ export interface RefSelectorProps {
     scrollTo?: ScrollTo;
 }
 export interface SelectorProps {
+    prefixClassName: string;
+    prefixStyle: React.CSSProperties;
     id: string;
     prefixCls: string;
     showSearch?: boolean;

package/lib/Selector/index.js

@@ -11,6 +11,7 @@ var _useLock = _interopRequireDefault(require("../hooks/useLock"));
 var _keyUtil = require("../utils/keyUtil");
 var _MultipleSelector = _interopRequireDefault(require("./MultipleSelector"));
 var _SingleSelector = _interopRequireDefault(require("./SingleSelector"));
+var _classnames = _interopRequireDefault(require("classnames"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,6 +28,8 @@ const Selector = (props, ref) => {
   const inputRef = (0, _react.useRef)(null);
   const compositionStatusRef = (0, _react.useRef)(false);
   const {
+    prefixClassName,
+    prefixStyle,
     prefixCls,
     open,
     mode,
@@ -181,7 +184,8 @@ const Selector = (props, ref) => {
     onClick: onClick,
     onMouseDown: onMouseDown
   }, prefix && /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-prefix`
+    className: (0, _classnames.default)(`${prefixCls}-prefix`, prefixClassName),
+    style: prefixStyle
   }, prefix), selectNode);
 };
 const ForwardSelector = /*#__PURE__*/React.forwardRef(Selector);

package/lib/TransBtn.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { RenderNode } from './BaseSelect';
 export interface TransBtnProps {
     className: string;
+    style?: React.CSSProperties;
     customizeIcon: RenderNode;
     customizeIconProps?: any;
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>;

package/lib/TransBtn.js

@@ -12,6 +12,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const TransBtn = props => {
   const {
     className,
+    style,
     customizeIcon,
     customizeIconProps,
     children,
@@ -27,7 +28,8 @@ const TransBtn = props => {
     },
     style: {
       userSelect: 'none',
-      WebkitUserSelect: 'none'
+      WebkitUserSelect: 'none',
+      ...style
     },
     unselectable: "on",
     onClick: onClick,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/select",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"