@rc-component/select 1.0.4 → 1.0.6

package/es/OptionList.js

@@ -127,19 +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];
-        // 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);
+    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

@@ -40,7 +40,7 @@ import OptionList from "./OptionList";
 import SelectContext from "./SelectContext";
 import useCache from "./hooks/useCache";
 import useFilterOptions from "./hooks/useFilterOptions";
-import useId from "./hooks/useId";
+import useId from "@rc-component/util/es/hooks/useId";
 import useOptions from "./hooks/useOptions";
 import useRefFunc from "./hooks/useRefFunc";
 import { hasValue, isComboNoValue, toArray } from "./utils/commonUtil";
@@ -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/lib/OptionList.js

@@ -135,19 +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];
-        // 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);
+    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

@@ -14,7 +14,7 @@ var _OptionList = _interopRequireDefault(require("./OptionList"));
 var _SelectContext = _interopRequireDefault(require("./SelectContext"));
 var _useCache = _interopRequireDefault(require("./hooks/useCache"));
 var _useFilterOptions = _interopRequireDefault(require("./hooks/useFilterOptions"));
-var _useId = _interopRequireDefault(require("./hooks/useId"));
+var _useId = _interopRequireDefault(require("@rc-component/util/lib/hooks/useId"));
 var _useOptions = _interopRequireDefault(require("./hooks/useOptions"));
 var _useRefFunc = _interopRequireDefault(require("./hooks/useRefFunc"));
 var _commonUtil = require("./utils/commonUtil");
@@ -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/package.json

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

package/es/hooks/useId.d.ts

@@ -1,5 +0,0 @@
-/** Is client side and not jsdom */
-export declare const isBrowserClient: boolean;
-/** Get unique id for accessibility usage */
-export declare function getUUID(): number | string;
-export default function useId(id?: string): string;

package/es/hooks/useId.js

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import canUseDom from "@rc-component/util/es/Dom/canUseDom";
-let uuid = 0;
-
-/** Is client side and not jsdom */
-export const isBrowserClient = process.env.NODE_ENV !== 'test' && canUseDom();
-
-/** Get unique id for accessibility usage */
-export function getUUID() {
-  let retId;
-
-  // Test never reach
-  /* istanbul ignore if */
-  if (isBrowserClient) {
-    retId = uuid;
-    uuid += 1;
-  } else {
-    retId = 'TEST_OR_SSR';
-  }
-  return retId;
-}
-export default function useId(id) {
-  // Inner id for accessibility usage. Only work in client side
-  const [innerId, setInnerId] = React.useState();
-  React.useEffect(() => {
-    setInnerId(`rc_select_${getUUID()}`);
-  }, []);
-  return id || innerId;
-}

package/lib/hooks/useId.d.ts

@@ -1,5 +0,0 @@
-/** Is client side and not jsdom */
-export declare const isBrowserClient: boolean;
-/** Get unique id for accessibility usage */
-export declare function getUUID(): number | string;
-export default function useId(id?: string): string;

package/lib/hooks/useId.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useId;
-exports.getUUID = getUUID;
-exports.isBrowserClient = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _canUseDom = _interopRequireDefault(require("@rc-component/util/lib/Dom/canUseDom"));
-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; }
-let uuid = 0;
-
-/** Is client side and not jsdom */
-const isBrowserClient = exports.isBrowserClient = process.env.NODE_ENV !== 'test' && (0, _canUseDom.default)();
-
-/** Get unique id for accessibility usage */
-function getUUID() {
-  let retId;
-
-  // Test never reach
-  /* istanbul ignore if */
-  if (isBrowserClient) {
-    retId = uuid;
-    uuid += 1;
-  } else {
-    retId = 'TEST_OR_SSR';
-  }
-  return retId;
-}
-function useId(id) {
-  // Inner id for accessibility usage. Only work in client side
-  const [innerId, setInnerId] = React.useState();
-  React.useEffect(() => {
-    setInnerId(`rc_select_${getUUID()}`);
-  }, []);
-  return id || innerId;
-}