@rc-component/select 1.0.3 → 1.0.5

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

@@ -127,18 +127,20 @@ const OptionList = (_, ref) => {
      * `setActive` function will call root accessibility state update which makes re-render.
      * So we need to delay to let Input component trigger onChange first.
      */
-    const timeoutId = setTimeout(() => {
-      if (!multiple && open && rawValues.size === 1) {
-        const value = Array.from(rawValues)[0];
-        const index = memoFlattenOptions.findIndex(({
-          data
-        }) => data.value === value);
-        if (index !== -1) {
-          setActive(index);
+    let timeoutId;
+    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
+      }) => searchValue ? String(data.value).startsWith(searchValue) : data.value === value);
+      if (index !== -1) {
+        setActive(index);
+        timeoutId = setTimeout(() => {
           scrollIntoView(index);
-        }
+        });
       }
-    });
+    }
 
     // Force trigger scrollbar visible when open
     if (open) {

package/es/Select.d.ts

@@ -77,6 +77,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     autoClearSearchValue?: boolean;
     onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
     onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+    onActive?: (value: ValueType) => void;
     /**
      * In Select, `false` means do nothing.
      * In TreeSelect, `false` will highlight match item.
@@ -109,9 +110,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> & {
-    children?: React.ReactNode;
-} & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
     OptGroup: typeof OptGroup;
 };

package/es/Select.js

@@ -64,6 +64,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     // Select
     onSelect,
     onDeselect,
+    onActive,
     popupMatchSelectWidth = true,
     // Options
     filterOption,
@@ -305,6 +306,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [activeValue, setActiveValue] = React.useState(null);
   const [accessibilityIndex, setAccessibilityIndex] = React.useState(0);
   const mergedDefaultActiveFirstOption = defaultActiveFirstOption !== undefined ? defaultActiveFirstOption : mode !== 'combobox';
+  const activeEventRef = React.useRef();
   const onActiveValue = React.useCallback((active, index, {
     source = 'keyboard'
   } = {}) => {
@@ -312,7 +314,16 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (backfill && mode === 'combobox' && active !== null && source === 'keyboard') {
       setActiveValue(String(active));
     }
-  }, [backfill, mode]);
+
+    // Active will call multiple times.
+    // We only need trigger the last one.
+    const promise = Promise.resolve().then(() => {
+      if (activeEventRef.current === promise) {
+        onActive?.(active);
+      }
+    });
+    activeEventRef.current = promise;
+  }, [backfill, mode, onActive]);
 
   // ========================= OptionList =========================
   const triggerSelect = (val, selected, type) => {

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

@@ -135,18 +135,20 @@ const OptionList = (_, ref) => {
      * `setActive` function will call root accessibility state update which makes re-render.
      * So we need to delay to let Input component trigger onChange first.
      */
-    const timeoutId = setTimeout(() => {
-      if (!multiple && open && rawValues.size === 1) {
-        const value = Array.from(rawValues)[0];
-        const index = memoFlattenOptions.findIndex(({
-          data
-        }) => data.value === value);
-        if (index !== -1) {
-          setActive(index);
+    let timeoutId;
+    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
+      }) => searchValue ? String(data.value).startsWith(searchValue) : data.value === value);
+      if (index !== -1) {
+        setActive(index);
+        timeoutId = setTimeout(() => {
           scrollIntoView(index);
-        }
+        });
       }
-    });
+    }
 
     // Force trigger scrollbar visible when open
     if (open) {

package/lib/Select.d.ts

@@ -77,6 +77,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     autoClearSearchValue?: boolean;
     onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
     onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+    onActive?: (value: ValueType) => void;
     /**
      * In Select, `false` means do nothing.
      * In TreeSelect, `false` will highlight match item.
@@ -109,9 +110,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> & {
-    children?: React.ReactNode;
-} & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
     OptGroup: typeof OptGroup;
 };

package/lib/Select.js

@@ -71,6 +71,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     // Select
     onSelect,
     onDeselect,
+    onActive,
     popupMatchSelectWidth = true,
     // Options
     filterOption,
@@ -312,6 +313,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [activeValue, setActiveValue] = React.useState(null);
   const [accessibilityIndex, setAccessibilityIndex] = React.useState(0);
   const mergedDefaultActiveFirstOption = defaultActiveFirstOption !== undefined ? defaultActiveFirstOption : mode !== 'combobox';
+  const activeEventRef = React.useRef();
   const onActiveValue = React.useCallback((active, index, {
     source = 'keyboard'
   } = {}) => {
@@ -319,7 +321,16 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (backfill && mode === 'combobox' && active !== null && source === 'keyboard') {
       setActiveValue(String(active));
     }
-  }, [backfill, mode]);
+
+    // Active will call multiple times.
+    // We only need trigger the last one.
+    const promise = Promise.resolve().then(() => {
+      if (activeEventRef.current === promise) {
+        onActive?.(active);
+      }
+    });
+    activeEventRef.current = promise;
+  }, [backfill, mode, onActive]);
 
   // ========================= OptionList =========================
   const triggerSelect = (val, selected, type) => {

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.3",
+  "version": "1.0.5",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"