@rc-component/select 1.0.0 → 1.0.1

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,6 +54,8 @@ export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSele
 export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttributes {
     className?: string;
     style?: React.CSSProperties;
+    classNames?: Partial<Record<BaseSelectSemanticName, string>>;
+    styles?: Partial<Record<BaseSelectSemanticName, React.CSSProperties>>;
     title?: string;
     showSearch?: boolean;
     tagRender?: (props: CustomTagProps) => React.ReactElement;

package/es/BaseSelect/index.js

@@ -173,7 +173,9 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
   const {
     maxCount,
-    rawValues
+    rawValues,
+    classNames: selectClassNames,
+    styles
   } = React.useContext(SelectContext) || {};
   const onInternalSearch = (searchText, fromTyping, isCompositing) => {
     if (multiple && isValidCount(maxCount) && rawValues?.size >= maxCount) {
@@ -436,9 +438,10 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   let arrowNode;
   if (showSuffixIcon) {
     arrowNode = /*#__PURE__*/React.createElement(TransBtn, {
-      className: classNames(`${prefixCls}-arrow`, {
+      className: classNames(`${prefixCls}-arrow`, selectClassNames?.suffix, {
         [`${prefixCls}-arrow-loading`]: loading
       }),
+      style: styles?.suffix,
       customizeIcon: suffixIcon,
       customizeIconProps: {
         loading,
@@ -513,6 +516,8 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, customizeRawInputElement ? ( /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
     ref: customizeRawInputRef
   })) : /*#__PURE__*/React.createElement(Selector, _extends({}, props, {
+    prefixClassName: selectClassNames?.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,6 +105,8 @@ 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> & {
     children?: React.ReactNode;

package/es/Select.js

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

package/es/SelectContext.d.ts

@@ -1,8 +1,10 @@
 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';
 export interface SelectContextProps {
+    classNames?: Partial<Record<SemanticName, string>>;
+    styles?: Partial<Record<SemanticName, React.CSSProperties>>;
     options: BaseOptionType[];
     optionRender?: SelectProps['optionRender'];
     flattenOptions: FlattenOptionData<BaseOptionType>[];

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 SelectContext from "../SelectContext";
 const Input = (props, ref) => {
   const {
     prefixCls,
@@ -25,6 +26,10 @@ const Input = (props, ref) => {
     open,
     attrs
   } = props;
+  const {
+    classNames: contextClassNames,
+    styles: contextStyles
+  } = React.useContext(SelectContext) || {};
   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,6 +54,8 @@ export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSele
 export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttributes {
     className?: string;
     style?: React.CSSProperties;
+    classNames?: Partial<Record<BaseSelectSemanticName, string>>;
+    styles?: Partial<Record<BaseSelectSemanticName, React.CSSProperties>>;
     title?: string;
     showSearch?: boolean;
     tagRender?: (props: CustomTagProps) => React.ReactElement;

package/lib/BaseSelect/index.js

@@ -183,7 +183,9 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
   const {
     maxCount,
-    rawValues
+    rawValues,
+    classNames: selectClassNames,
+    styles
   } = React.useContext(_SelectContext.default) || {};
   const onInternalSearch = (searchText, fromTyping, isCompositing) => {
     if (multiple && (0, _valueUtil.isValidCount)(maxCount) && rawValues?.size >= maxCount) {
@@ -446,9 +448,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`, selectClassNames?.suffix, {
         [`${prefixCls}-arrow-loading`]: loading
       }),
+      style: styles?.suffix,
       customizeIcon: suffixIcon,
       customizeIconProps: {
         loading,
@@ -523,6 +526,8 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, customizeRawInputElement ? ( /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
     ref: customizeRawInputRef
   })) : /*#__PURE__*/React.createElement(_Selector.default, _extends({}, props, {
+    prefixClassName: selectClassNames?.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,6 +105,8 @@ 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> & {
     children?: React.ReactNode;

package/lib/Select.js

@@ -93,6 +93,8 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     labelInValue,
     onChange,
     maxCount,
+    classNames: selectClassNames,
+    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: selectClassNames,
+      styles
     };
-  }, [maxCount, parsedOptions, displayOptions, onActiveValue, mergedDefaultActiveFirstOption, onInternalSelect, menuItemSelectedIcon, rawValues, mergedFieldNames, virtual, popupMatchSelectWidth, direction, listHeight, listItemHeight, childrenAsData, optionRender]);
+  }, [selectClassNames, styles, maxCount, parsedOptions, displayOptions, onActiveValue, mergedDefaultActiveFirstOption, onInternalSelect, menuItemSelectedIcon, rawValues, mergedFieldNames, virtual, popupMatchSelectWidth, direction, listHeight, listItemHeight, childrenAsData, optionRender]);
 
   // ========================== Warning ===========================
   if (process.env.NODE_ENV !== 'production') {

package/lib/SelectContext.d.ts

@@ -1,8 +1,10 @@
 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';
 export interface SelectContextProps {
+    classNames?: Partial<Record<SemanticName, string>>;
+    styles?: Partial<Record<SemanticName, React.CSSProperties>>;
     options: BaseOptionType[];
     optionRender?: SelectProps['optionRender'];
     flattenOptions: FlattenOptionData<BaseOptionType>[];

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 _SelectContext = _interopRequireDefault(require("../SelectContext"));
 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
+  } = React.useContext(_SelectContext.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.1",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"