@rc-component/select 1.0.2 → 1.0.4

package/es/BaseSelect/index.js

@@ -4,6 +4,7 @@ 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";
 import { useComposeRef } from "@rc-component/util/es/ref";
+import { getDOM } from "@rc-component/util/es/Dom/findDOMNode";
 import * as React from 'react';
 import { useAllowClear } from "../hooks/useAllowClear";
 import { BaseSelectContext } from "../hooks/useBaseProps";
@@ -109,11 +110,11 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // ============================== Refs ==============================
   const containerRef = React.useRef(null);
-  const selectorDomRef = React.useRef(null);
   const triggerRef = React.useRef(null);
   const selectorRef = React.useRef(null);
   const listRef = React.useRef(null);
   const blurRef = React.useRef(false);
+  const customDomRef = React.useRef(null);
 
   /** Used for component focused management */
   const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset();
@@ -123,7 +124,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     focus: selectorRef.current?.focus,
     blur: selectorRef.current?.blur,
     scrollTo: arg => listRef.current?.scrollTo(arg),
-    nativeElement: containerRef.current || selectorDomRef.current
+    nativeElement: containerRef.current || selectorRef.current?.nativeElement || getDOM(customDomRef.current)
   }));
 
   // ========================== Search Value ==========================
@@ -141,7 +142,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Used for customize replacement for `rc-cascader`
   const customizeRawInputElement = typeof getRawInputElement === 'function' && getRawInputElement();
-  const customizeRawInputRef = useComposeRef(selectorDomRef, customizeRawInputElement?.props?.ref);
+  const customizeRawInputRef = useComposeRef(customDomRef, customizeRawInputElement?.props?.ref);
 
   // ============================== Open ==============================
   // SSR not support Portal which means we need delay `open` for the first time render
@@ -504,11 +505,6 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     builtinPlacements: builtinPlacements,
     getPopupContainer: getPopupContainer,
     empty: emptyOptions,
-    getTriggerDOMNode: node =>
-    // TODO: This is workaround and should be removed in `rc-select`
-    // And use new standard `nativeElement` for ref.
-    // But we should update `rc-resize-observer` first.
-    selectorDomRef.current || node,
     onPopupVisibleChange: onTriggerVisibleChange,
     onPopupMouseEnter: onPopupMouseEnter
   }, customizeRawInputElement ? ( /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
@@ -516,7 +512,6 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   })) : /*#__PURE__*/React.createElement(Selector, _extends({}, props, {
     prefixClassName: classNames?.prefix,
     prefixStyle: styles?.prefix,
-    domRef: selectorDomRef,
     prefixCls: prefixCls,
     inputElement: customizeInputElement,
     ref: selectorRef,

package/es/OptionList.js

@@ -130,9 +130,10 @@ const OptionList = (_, ref) => {
     const timeoutId = setTimeout(() => {
       if (!multiple && open && rawValues.size === 1) {
         const value = Array.from(rawValues)[0];
+        // Scroll to the option closest to the searchValue if searching.
         const index = memoFlattenOptions.findIndex(({
           data
-        }) => data.value === value);
+        }) => searchValue ? String(data.value).startsWith(searchValue) : data.value === value);
         if (index !== -1) {
           setActive(index);
           scrollIntoView(index);
@@ -293,8 +294,8 @@ const OptionList = (_, ref) => {
     direction: direction,
     innerProps: virtual ? null : a11yProps,
     showScrollBar: showScrollBar,
-    className: contextClassNames?.list,
-    style: contextStyles?.list
+    className: contextClassNames?.popup?.list,
+    style: contextStyles?.popup?.list
   }, (item, itemIndex) => {
     const {
       group,
@@ -329,7 +330,7 @@ const OptionList = (_, ref) => {
     const selected = isSelected(value);
     const mergedDisabled = disabled || !selected && overMaxCount;
     const optionPrefixCls = `${itemPrefixCls}-option`;
-    const optionClassName = classNames(itemPrefixCls, optionPrefixCls, className, contextClassNames?.listItem, {
+    const optionClassName = classNames(itemPrefixCls, optionPrefixCls, className, contextClassNames?.popup?.listItem, {
       [`${optionPrefixCls}-grouped`]: groupOption,
       [`${optionPrefixCls}-active`]: activeIndex === itemIndex && !mergedDisabled,
       [`${optionPrefixCls}-disabled`]: mergedDisabled,
@@ -361,7 +362,7 @@ const OptionList = (_, ref) => {
         }
       },
       style: {
-        ...contextStyles?.listItem,
+        ...contextStyles?.popup?.listItem,
         ...style
       }
     }), /*#__PURE__*/React.createElement("div", {

package/es/Select.d.ts

@@ -65,7 +65,8 @@ 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 type SemanticName = BaseSelectSemanticName;
+export type PopupSemantic = 'listItem' | 'list';
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends BaseSelectPropsWithoutPrivate {
     prefixCls?: string;
     id?: string;
@@ -108,7 +109,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 DefaultOptionType | BaseOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
+declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
     children?: React.ReactNode;
 } & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;

package/es/SelectContext.d.ts

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

package/es/SelectTrigger.d.ts

@@ -22,7 +22,6 @@ export interface SelectTriggerProps {
     getPopupContainer?: RenderDOMFunc;
     popupAlign: AlignType;
     empty: boolean;
-    getTriggerDOMNode: (node: HTMLElement) => HTMLElement;
     onPopupVisibleChange?: (visible: boolean) => void;
     onPopupMouseEnter: () => void;
 }

package/es/SelectTrigger.js

@@ -63,7 +63,6 @@ const SelectTrigger = (props, ref) => {
     popupAlign,
     getPopupContainer,
     empty,
-    getTriggerDOMNode,
     onPopupVisibleChange,
     onPopupMouseEnter,
     ...restProps
@@ -127,7 +126,6 @@ const SelectTrigger = (props, ref) => {
       [`${popupPrefixCls}-empty`]: empty
     }),
     popupStyle: mergedPopupStyle,
-    getTriggerDOMNode: getTriggerDOMNode,
     onPopupVisibleChange: onPopupVisibleChange
   }), children);
 };

package/es/Selector/index.d.ts

@@ -40,6 +40,7 @@ export interface RefSelectorProps {
     focus: (options?: FocusOptions) => void;
     blur: () => void;
     scrollTo?: ScrollTo;
+    nativeElement: HTMLDivElement;
 }
 export interface SelectorProps {
     prefixClassName: string;
@@ -77,11 +78,6 @@ export interface SelectorProps {
     onRemove: (value: DisplayValueType) => void;
     onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     onInputBlur?: () => void;
-    /**
-     * @private get real dom for trigger align.
-     * This may be removed after React provides replacement of `findDOMNode`
-     */
-    domRef: React.Ref<HTMLDivElement>;
 }
 declare const ForwardSelector: React.ForwardRefExoticComponent<SelectorProps & React.RefAttributes<RefSelectorProps>>;
 export default ForwardSelector;

package/es/Selector/index.js

@@ -35,18 +35,19 @@ const Selector = (props, ref) => {
     onSearchSubmit,
     onToggleOpen,
     onInputKeyDown,
-    onInputBlur,
-    domRef
+    onInputBlur
   } = props;
 
   // ======================= Ref =======================
+  const containerRef = React.useRef(null);
   React.useImperativeHandle(ref, () => ({
     focus: options => {
       inputRef.current.focus(options);
     },
     blur: () => {
       inputRef.current.blur();
-    }
+    },
+    nativeElement: containerRef.current
   }));
 
   // ====================== Input ======================
@@ -172,7 +173,7 @@ const Selector = (props, ref) => {
   };
   const selectNode = mode === 'multiple' || mode === 'tags' ? /*#__PURE__*/React.createElement(MultipleSelector, _extends({}, props, sharedProps)) : /*#__PURE__*/React.createElement(SingleSelector, _extends({}, props, sharedProps));
   return /*#__PURE__*/React.createElement("div", {
-    ref: domRef,
+    ref: containerRef,
     className: `${prefixCls}-selector`,
     onClick: onClick,
     onMouseDown: onMouseDown

package/lib/BaseSelect/index.js

@@ -9,6 +9,7 @@ var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/ho
 var _useMergedState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useMergedState"));
 var _isMobile = _interopRequireDefault(require("@rc-component/util/lib/isMobile"));
 var _ref = require("@rc-component/util/lib/ref");
+var _findDOMNode = require("@rc-component/util/lib/Dom/findDOMNode");
 var React = _interopRequireWildcard(require("react"));
 var _useAllowClear = require("../hooks/useAllowClear");
 var _useBaseProps = require("../hooks/useBaseProps");
@@ -119,11 +120,11 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // ============================== Refs ==============================
   const containerRef = React.useRef(null);
-  const selectorDomRef = React.useRef(null);
   const triggerRef = React.useRef(null);
   const selectorRef = React.useRef(null);
   const listRef = React.useRef(null);
   const blurRef = React.useRef(false);
+  const customDomRef = React.useRef(null);
 
   /** Used for component focused management */
   const [mockFocused, setMockFocused, cancelSetMockFocused] = (0, _useDelayReset.default)();
@@ -133,7 +134,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     focus: selectorRef.current?.focus,
     blur: selectorRef.current?.blur,
     scrollTo: arg => listRef.current?.scrollTo(arg),
-    nativeElement: containerRef.current || selectorDomRef.current
+    nativeElement: containerRef.current || selectorRef.current?.nativeElement || (0, _findDOMNode.getDOM)(customDomRef.current)
   }));
 
   // ========================== Search Value ==========================
@@ -151,7 +152,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Used for customize replacement for `rc-cascader`
   const customizeRawInputElement = typeof getRawInputElement === 'function' && getRawInputElement();
-  const customizeRawInputRef = (0, _ref.useComposeRef)(selectorDomRef, customizeRawInputElement?.props?.ref);
+  const customizeRawInputRef = (0, _ref.useComposeRef)(customDomRef, customizeRawInputElement?.props?.ref);
 
   // ============================== Open ==============================
   // SSR not support Portal which means we need delay `open` for the first time render
@@ -514,11 +515,6 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     builtinPlacements: builtinPlacements,
     getPopupContainer: getPopupContainer,
     empty: emptyOptions,
-    getTriggerDOMNode: node =>
-    // TODO: This is workaround and should be removed in `rc-select`
-    // And use new standard `nativeElement` for ref.
-    // But we should update `rc-resize-observer` first.
-    selectorDomRef.current || node,
     onPopupVisibleChange: onTriggerVisibleChange,
     onPopupMouseEnter: onPopupMouseEnter
   }, customizeRawInputElement ? ( /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
@@ -526,7 +522,6 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   })) : /*#__PURE__*/React.createElement(_Selector.default, _extends({}, props, {
     prefixClassName: classNames?.prefix,
     prefixStyle: styles?.prefix,
-    domRef: selectorDomRef,
     prefixCls: prefixCls,
     inputElement: customizeInputElement,
     ref: selectorRef,

package/lib/OptionList.js

@@ -138,9 +138,10 @@ const OptionList = (_, ref) => {
     const timeoutId = setTimeout(() => {
       if (!multiple && open && rawValues.size === 1) {
         const value = Array.from(rawValues)[0];
+        // Scroll to the option closest to the searchValue if searching.
         const index = memoFlattenOptions.findIndex(({
           data
-        }) => data.value === value);
+        }) => searchValue ? String(data.value).startsWith(searchValue) : data.value === value);
         if (index !== -1) {
           setActive(index);
           scrollIntoView(index);
@@ -301,8 +302,8 @@ const OptionList = (_, ref) => {
     direction: direction,
     innerProps: virtual ? null : a11yProps,
     showScrollBar: showScrollBar,
-    className: contextClassNames?.list,
-    style: contextStyles?.list
+    className: contextClassNames?.popup?.list,
+    style: contextStyles?.popup?.list
   }, (item, itemIndex) => {
     const {
       group,
@@ -337,7 +338,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, contextClassNames?.listItem, {
+    const optionClassName = (0, _classnames.default)(itemPrefixCls, optionPrefixCls, className, contextClassNames?.popup?.listItem, {
       [`${optionPrefixCls}-grouped`]: groupOption,
       [`${optionPrefixCls}-active`]: activeIndex === itemIndex && !mergedDisabled,
       [`${optionPrefixCls}-disabled`]: mergedDisabled,
@@ -369,7 +370,7 @@ const OptionList = (_, ref) => {
         }
       },
       style: {
-        ...contextStyles?.listItem,
+        ...contextStyles?.popup?.listItem,
         ...style
       }
     }), /*#__PURE__*/React.createElement("div", {

package/lib/Select.d.ts

@@ -65,7 +65,8 @@ 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 type SemanticName = BaseSelectSemanticName;
+export type PopupSemantic = 'listItem' | 'list';
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends BaseSelectPropsWithoutPrivate {
     prefixCls?: string;
     id?: string;
@@ -108,7 +109,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 DefaultOptionType | BaseOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
+declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
     children?: React.ReactNode;
 } & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;

package/lib/SelectContext.d.ts

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

package/lib/SelectTrigger.d.ts

@@ -22,7 +22,6 @@ export interface SelectTriggerProps {
     getPopupContainer?: RenderDOMFunc;
     popupAlign: AlignType;
     empty: boolean;
-    getTriggerDOMNode: (node: HTMLElement) => HTMLElement;
     onPopupVisibleChange?: (visible: boolean) => void;
     onPopupMouseEnter: () => void;
 }

package/lib/SelectTrigger.js

@@ -72,7 +72,6 @@ const SelectTrigger = (props, ref) => {
     popupAlign,
     getPopupContainer,
     empty,
-    getTriggerDOMNode,
     onPopupVisibleChange,
     onPopupMouseEnter,
     ...restProps
@@ -136,7 +135,6 @@ const SelectTrigger = (props, ref) => {
       [`${popupPrefixCls}-empty`]: empty
     }),
     popupStyle: mergedPopupStyle,
-    getTriggerDOMNode: getTriggerDOMNode,
     onPopupVisibleChange: onPopupVisibleChange
   }), children);
 };

package/lib/Selector/index.d.ts

@@ -40,6 +40,7 @@ export interface RefSelectorProps {
     focus: (options?: FocusOptions) => void;
     blur: () => void;
     scrollTo?: ScrollTo;
+    nativeElement: HTMLDivElement;
 }
 export interface SelectorProps {
     prefixClassName: string;
@@ -77,11 +78,6 @@ export interface SelectorProps {
     onRemove: (value: DisplayValueType) => void;
     onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     onInputBlur?: () => void;
-    /**
-     * @private get real dom for trigger align.
-     * This may be removed after React provides replacement of `findDOMNode`
-     */
-    domRef: React.Ref<HTMLDivElement>;
 }
 declare const ForwardSelector: React.ForwardRefExoticComponent<SelectorProps & React.RefAttributes<RefSelectorProps>>;
 export default ForwardSelector;

package/lib/Selector/index.js

@@ -42,18 +42,19 @@ const Selector = (props, ref) => {
     onSearchSubmit,
     onToggleOpen,
     onInputKeyDown,
-    onInputBlur,
-    domRef
+    onInputBlur
   } = props;
 
   // ======================= Ref =======================
+  const containerRef = React.useRef(null);
   React.useImperativeHandle(ref, () => ({
     focus: options => {
       inputRef.current.focus(options);
     },
     blur: () => {
       inputRef.current.blur();
-    }
+    },
+    nativeElement: containerRef.current
   }));
 
   // ====================== Input ======================
@@ -179,7 +180,7 @@ const Selector = (props, ref) => {
   };
   const selectNode = mode === 'multiple' || mode === 'tags' ? /*#__PURE__*/React.createElement(_MultipleSelector.default, _extends({}, props, sharedProps)) : /*#__PURE__*/React.createElement(_SingleSelector.default, _extends({}, props, sharedProps));
   return /*#__PURE__*/React.createElement("div", {
-    ref: domRef,
+    ref: containerRef,
     className: `${prefixCls}-selector`,
     onClick: onClick,
     onMouseDown: onMouseDown

package/package.json

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