@rc-component/select 1.0.1 → 1.0.2

package/es/BaseSelect/index.d.ts

@@ -56,17 +56,18 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
     style?: React.CSSProperties;
     classNames?: Partial<Record<BaseSelectSemanticName, string>>;
     styles?: Partial<Record<BaseSelectSemanticName, React.CSSProperties>>;
-    title?: string;
     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,20 +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,
-    classNames: selectClassNames,
-    styles
-  } = 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;
@@ -426,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                            ==
@@ -438,7 +436,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   let arrowNode;
   if (showSuffixIcon) {
     arrowNode = /*#__PURE__*/React.createElement(TransBtn, {
-      className: classNames(`${prefixCls}-arrow`, selectClassNames?.suffix, {
+      className: cls(`${prefixCls}-arrow`, classNames?.suffix, {
         [`${prefixCls}-arrow-loading`]: loading
       }),
       style: styles?.suffix,
@@ -474,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,
@@ -516,7 +514,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, customizeRawInputElement ? ( /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
     ref: customizeRawInputRef
   })) : /*#__PURE__*/React.createElement(Selector, _extends({}, props, {
-    prefixClassName: selectClassNames?.prefix,
+    prefixClassName: classNames?.prefix,
     prefixStyle: styles?.prefix,
     domRef: selectorDomRef,
     prefixCls: prefixCls,

package/es/Select.d.ts

@@ -108,7 +108,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     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,7 +86,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     labelInValue,
     onChange,
     maxCount,
-    classNames: selectClassNames,
+    classNames,
     styles,
     ...restProps
   } = props;
@@ -428,10 +428,10 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
       childrenAsData,
       maxCount,
       optionRender,
-      classNames: selectClassNames,
+      classNames,
       styles
     };
-  }, [selectClassNames, 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') {
@@ -451,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

@@ -2,6 +2,9 @@ import * as React from 'react';
 import type { RawValueType, RenderNode } from './BaseSelect';
 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>>;

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,7 +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";
+import useBaseProps from "../hooks/useBaseProps";
 const Input = (props, ref) => {
   const {
     prefixCls,
@@ -29,7 +29,7 @@ const Input = (props, ref) => {
   const {
     classNames: contextClassNames,
     styles: contextStyles
-  } = React.useContext(SelectContext) || {};
+  } = useBaseProps() || {};
   let inputNode = inputElement || /*#__PURE__*/React.createElement("input", null);
   const {
     ref: originRef,

package/lib/BaseSelect/index.d.ts

@@ -56,17 +56,18 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
     style?: React.CSSProperties;
     classNames?: Partial<Record<BaseSelectSemanticName, string>>;
     styles?: Partial<Record<BaseSelectSemanticName, React.CSSProperties>>;
-    title?: string;
     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,20 +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,
-    classNames: selectClassNames,
-    styles
-  } = 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;
@@ -436,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                            ==
@@ -448,7 +446,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   let arrowNode;
   if (showSuffixIcon) {
     arrowNode = /*#__PURE__*/React.createElement(_TransBtn.default, {
-      className: (0, _classnames.default)(`${prefixCls}-arrow`, selectClassNames?.suffix, {
+      className: (0, _classnames.default)(`${prefixCls}-arrow`, classNames?.suffix, {
         [`${prefixCls}-arrow-loading`]: loading
       }),
       style: styles?.suffix,
@@ -526,7 +524,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, customizeRawInputElement ? ( /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
     ref: customizeRawInputRef
   })) : /*#__PURE__*/React.createElement(_Selector.default, _extends({}, props, {
-    prefixClassName: selectClassNames?.prefix,
+    prefixClassName: classNames?.prefix,
     prefixStyle: styles?.prefix,
     domRef: selectorDomRef,
     prefixCls: prefixCls,

package/lib/Select.d.ts

@@ -108,7 +108,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     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,7 +93,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     labelInValue,
     onChange,
     maxCount,
-    classNames: selectClassNames,
+    classNames,
     styles,
     ...restProps
   } = props;
@@ -435,10 +435,10 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
       childrenAsData,
       maxCount,
       optionRender,
-      classNames: selectClassNames,
+      classNames,
       styles
     };
-  }, [selectClassNames, 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') {
@@ -458,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

@@ -2,6 +2,9 @@ import * as React from 'react';
 import type { RawValueType, RenderNode } from './BaseSelect';
 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>>;

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,7 +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"));
+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; }
@@ -38,7 +38,7 @@ const Input = (props, ref) => {
   const {
     classNames: contextClassNames,
     styles: contextStyles
-  } = React.useContext(_SelectContext.default) || {};
+  } = (0, _useBaseProps.default)() || {};
   let inputNode = inputElement || /*#__PURE__*/React.createElement("input", null);
   const {
     ref: originRef,

package/package.json

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