@rc-component/select 1.0.0

package/lib/Selector/index.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Cursor rule:
+ * 1. Only `showSearch` enabled
+ * 2. Only `open` is `true`
+ * 3. When typing, set `open` to `true` which hit rule of 2
+ *
+ * Accessibility:
+ * - https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
+ */
+import type { ScrollTo } from 'rc-virtual-list/lib/List';
+import * as React from 'react';
+import type { CustomTagProps, DisplayValueType, Mode, RenderNode } from '../BaseSelect';
+export interface InnerSelectorProps {
+    prefixCls: string;
+    id: string;
+    mode: Mode;
+    title?: string;
+    inputRef: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
+    placeholder?: React.ReactNode;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    autoComplete?: string;
+    values: DisplayValueType[];
+    showSearch?: boolean;
+    searchValue: string;
+    autoClearSearchValue?: boolean;
+    activeDescendantId?: string;
+    open: boolean;
+    tabIndex?: number;
+    maxLength?: number;
+    onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onInputMouseDown: React.MouseEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onInputChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onInputPaste: React.ClipboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onInputCompositionStart: React.CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onInputCompositionEnd: React.CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onInputBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}
+export interface RefSelectorProps {
+    focus: (options?: FocusOptions) => void;
+    blur: () => void;
+    scrollTo?: ScrollTo;
+}
+export interface SelectorProps {
+    id: string;
+    prefixCls: string;
+    showSearch?: boolean;
+    open: boolean;
+    /** Display in the Selector value, it's not same as `value` prop */
+    values: DisplayValueType[];
+    mode: Mode;
+    searchValue: string;
+    activeValue: string;
+    autoClearSearchValue: boolean;
+    inputElement: JSX.Element;
+    maxLength?: number;
+    autoFocus?: boolean;
+    activeDescendantId?: string;
+    tabIndex?: number;
+    disabled?: boolean;
+    placeholder?: React.ReactNode;
+    removeIcon?: RenderNode;
+    prefix?: React.ReactNode;
+    maxTagCount?: number | 'responsive';
+    maxTagTextLength?: number;
+    maxTagPlaceholder?: React.ReactNode | ((omittedValues: DisplayValueType[]) => React.ReactNode);
+    tagRender?: (props: CustomTagProps) => React.ReactElement;
+    /** Check if `tokenSeparators` contains `\n` or `\r\n` */
+    tokenWithEnter?: boolean;
+    choiceTransitionName?: string;
+    onToggleOpen: (open?: boolean) => void;
+    /** `onSearch` returns go next step boolean to check if need do toggle open */
+    onSearch: (searchText: string, fromTyping: boolean, isCompositing: boolean) => boolean;
+    onSearchSubmit?: (searchText: string) => void;
+    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

@@ -0,0 +1,191 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _KeyCode = _interopRequireDefault(require("@rc-component/util/lib/KeyCode"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _useLock = _interopRequireDefault(require("../hooks/useLock"));
+var _keyUtil = require("../utils/keyUtil");
+var _MultipleSelector = _interopRequireDefault(require("./MultipleSelector"));
+var _SingleSelector = _interopRequireDefault(require("./SingleSelector"));
+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 }; }
+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); } /**
+ * Cursor rule:
+ * 1. Only `showSearch` enabled
+ * 2. Only `open` is `true`
+ * 3. When typing, set `open` to `true` which hit rule of 2
+ *
+ * Accessibility:
+ * - https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
+ */
+const Selector = (props, ref) => {
+  const inputRef = (0, _react.useRef)(null);
+  const compositionStatusRef = (0, _react.useRef)(false);
+  const {
+    prefixCls,
+    open,
+    mode,
+    showSearch,
+    tokenWithEnter,
+    disabled,
+    prefix,
+    autoClearSearchValue,
+    onSearch,
+    onSearchSubmit,
+    onToggleOpen,
+    onInputKeyDown,
+    onInputBlur,
+    domRef
+  } = props;
+
+  // ======================= Ref =======================
+  React.useImperativeHandle(ref, () => ({
+    focus: options => {
+      inputRef.current.focus(options);
+    },
+    blur: () => {
+      inputRef.current.blur();
+    }
+  }));
+
+  // ====================== Input ======================
+  const [getInputMouseDown, setInputMouseDown] = (0, _useLock.default)(0);
+  const onInternalInputKeyDown = event => {
+    const {
+      which
+    } = event;
+
+    // Compatible with multiple lines in TextArea
+    const isTextAreaElement = inputRef.current instanceof HTMLTextAreaElement;
+    if (!isTextAreaElement && open && (which === _KeyCode.default.UP || which === _KeyCode.default.DOWN)) {
+      event.preventDefault();
+    }
+    if (onInputKeyDown) {
+      onInputKeyDown(event);
+    }
+    if (which === _KeyCode.default.ENTER && mode === 'tags' && !compositionStatusRef.current && !open) {
+      // When menu isn't open, OptionList won't trigger a value change
+      // So when enter is pressed, the tag's input value should be emitted here to let selector know
+      onSearchSubmit?.(event.target.value);
+    }
+    // Move within the text box
+    if (isTextAreaElement && !open && ~[_KeyCode.default.UP, _KeyCode.default.DOWN, _KeyCode.default.LEFT, _KeyCode.default.RIGHT].indexOf(which)) {
+      return;
+    }
+    if ((0, _keyUtil.isValidateOpenKey)(which)) {
+      onToggleOpen(true);
+    }
+  };
+
+  /**
+   * We can not use `findDOMNode` sine it will get warning,
+   * have to use timer to check if is input element.
+   */
+  const onInternalInputMouseDown = () => {
+    setInputMouseDown(true);
+  };
+
+  // When paste come, ignore next onChange
+  const pastedTextRef = (0, _react.useRef)(null);
+  const triggerOnSearch = value => {
+    if (onSearch(value, true, compositionStatusRef.current) !== false) {
+      onToggleOpen(true);
+    }
+  };
+  const onInputCompositionStart = () => {
+    compositionStatusRef.current = true;
+  };
+  const onInputCompositionEnd = e => {
+    compositionStatusRef.current = false;
+
+    // Trigger search again to support `tokenSeparators` with typewriting
+    if (mode !== 'combobox') {
+      triggerOnSearch(e.target.value);
+    }
+  };
+  const onInputChange = event => {
+    let {
+      target: {
+        value
+      }
+    } = event;
+
+    // Pasted text should replace back to origin content
+    if (tokenWithEnter && pastedTextRef.current && /[\r\n]/.test(pastedTextRef.current)) {
+      // CRLF will be treated as a single space for input element
+      const replacedText = pastedTextRef.current.replace(/[\r\n]+$/, '').replace(/\r\n/g, ' ').replace(/[\r\n]/g, ' ');
+      value = value.replace(replacedText, pastedTextRef.current);
+    }
+    pastedTextRef.current = null;
+    triggerOnSearch(value);
+  };
+  const onInputPaste = e => {
+    const {
+      clipboardData
+    } = e;
+    const value = clipboardData?.getData('text');
+    pastedTextRef.current = value || '';
+  };
+  const onClick = ({
+    target
+  }) => {
+    if (target !== inputRef.current) {
+      // Should focus input if click the selector
+      const isIE = document.body.style.msTouchAction !== undefined;
+      if (isIE) {
+        setTimeout(() => {
+          inputRef.current.focus();
+        });
+      } else {
+        inputRef.current.focus();
+      }
+    }
+  };
+  const onMouseDown = event => {
+    const inputMouseDown = getInputMouseDown();
+
+    // when mode is combobox and it is disabled, don't prevent default behavior
+    // https://github.com/ant-design/ant-design/issues/37320
+    // https://github.com/ant-design/ant-design/issues/48281
+    if (event.target !== inputRef.current && !inputMouseDown && !(mode === 'combobox' && disabled)) {
+      event.preventDefault();
+    }
+    if (mode !== 'combobox' && (!showSearch || !inputMouseDown) || !open) {
+      if (open && autoClearSearchValue !== false) {
+        onSearch('', true, false);
+      }
+      onToggleOpen();
+    }
+  };
+
+  // ================= Inner Selector ==================
+  const sharedProps = {
+    inputRef,
+    onInputKeyDown: onInternalInputKeyDown,
+    onInputMouseDown: onInternalInputMouseDown,
+    onInputChange,
+    onInputPaste,
+    onInputCompositionStart,
+    onInputCompositionEnd,
+    onInputBlur
+  };
+  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,
+    className: `${prefixCls}-selector`,
+    onClick: onClick,
+    onMouseDown: onMouseDown
+  }, prefix && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-prefix`
+  }, prefix), selectNode);
+};
+const ForwardSelector = /*#__PURE__*/React.forwardRef(Selector);
+if (process.env.NODE_ENV !== 'production') {
+  ForwardSelector.displayName = 'Selector';
+}
+var _default = exports.default = ForwardSelector;

package/lib/TransBtn.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { RenderNode } from './BaseSelect';
+export interface TransBtnProps {
+    className: string;
+    customizeIcon: RenderNode;
+    customizeIconProps?: any;
+    onMouseDown?: React.MouseEventHandler<HTMLSpanElement>;
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+    children?: React.ReactNode;
+}
+declare const TransBtn: React.FC<TransBtnProps>;
+export default TransBtn;

package/lib/TransBtn.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+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; }
+const TransBtn = props => {
+  const {
+    className,
+    customizeIcon,
+    customizeIconProps,
+    children,
+    onMouseDown,
+    onClick
+  } = props;
+  const icon = typeof customizeIcon === 'function' ? customizeIcon(customizeIconProps) : customizeIcon;
+  return /*#__PURE__*/React.createElement("span", {
+    className: className,
+    onMouseDown: event => {
+      event.preventDefault();
+      onMouseDown?.(event);
+    },
+    style: {
+      userSelect: 'none',
+      WebkitUserSelect: 'none'
+    },
+    unselectable: "on",
+    onClick: onClick,
+    "aria-hidden": true
+  }, icon !== undefined ? icon : /*#__PURE__*/React.createElement("span", {
+    className: (0, _classnames.default)(className.split(/\s+/).map(cls => `${cls}-icon`))
+  }, children));
+};
+var _default = exports.default = TransBtn;

package/lib/hooks/useAllowClear.d.ts

@@ -0,0 +1,8 @@
+import type { DisplayValueType, Mode, RenderNode } from '../interface';
+import React from 'react';
+export declare const useAllowClear: (prefixCls: string, onClearMouseDown: React.MouseEventHandler<HTMLSpanElement>, displayValues: DisplayValueType[], allowClear?: boolean | {
+    clearIcon?: RenderNode;
+}, clearIcon?: RenderNode, disabled?: boolean, mergedSearchValue?: string, mode?: Mode) => {
+    allowClear: boolean;
+    clearIcon: React.JSX.Element;
+};

package/lib/hooks/useAllowClear.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAllowClear = void 0;
+var _TransBtn = _interopRequireDefault(require("../TransBtn"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const useAllowClear = (prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon, disabled = false, mergedSearchValue, mode) => {
+  const mergedClearIcon = _react.default.useMemo(() => {
+    if (typeof allowClear === 'object') {
+      return allowClear.clearIcon;
+    }
+    if (clearIcon) {
+      return clearIcon;
+    }
+  }, [allowClear, clearIcon]);
+  const mergedAllowClear = _react.default.useMemo(() => {
+    if (!disabled && !!allowClear && (displayValues.length || mergedSearchValue) && !(mode === 'combobox' && mergedSearchValue === '')) {
+      return true;
+    }
+    return false;
+  }, [allowClear, disabled, displayValues.length, mergedSearchValue, mode]);
+  return {
+    allowClear: mergedAllowClear,
+    clearIcon: /*#__PURE__*/_react.default.createElement(_TransBtn.default, {
+      className: `${prefixCls}-clear`,
+      onMouseDown: onClearMouseDown,
+      customizeIcon: mergedClearIcon
+    }, "\xD7")
+  };
+};
+exports.useAllowClear = useAllowClear;

package/lib/hooks/useBaseProps.d.ts

@@ -0,0 +1,13 @@
+/**
+ * BaseSelect provide some parsed data into context.
+ * You can use this hooks to get them.
+ */
+import * as React from 'react';
+import type { BaseSelectProps } from '../BaseSelect';
+export interface BaseSelectContextProps extends BaseSelectProps {
+    triggerOpen: boolean;
+    multiple: boolean;
+    toggleOpen: (open?: boolean) => void;
+}
+export declare const BaseSelectContext: React.Context<BaseSelectContextProps>;
+export default function useBaseProps(): BaseSelectContextProps;

package/lib/hooks/useBaseProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseSelectContext = void 0;
+exports.default = useBaseProps;
+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; }
+/**
+ * BaseSelect provide some parsed data into context.
+ * You can use this hooks to get them.
+ */
+
+const BaseSelectContext = exports.BaseSelectContext = /*#__PURE__*/React.createContext(null);
+function useBaseProps() {
+  return React.useContext(BaseSelectContext);
+}

package/lib/hooks/useCache.d.ts

@@ -0,0 +1,7 @@
+import type { RawValueType } from '../BaseSelect';
+import type { DefaultOptionType, LabelInValueType } from '../Select';
+/**
+ * Cache `value` related LabeledValue & options.
+ */
+declare const _default: (labeledValues: LabelInValueType[], valueOptions: Map<RawValueType, DefaultOptionType>) => [LabelInValueType[], (val: RawValueType) => DefaultOptionType];
+export default _default;

package/lib/hooks/useCache.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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; }
+/**
+ * Cache `value` related LabeledValue & options.
+ */
+var _default = (labeledValues, valueOptions) => {
+  const cacheRef = React.useRef({
+    values: new Map(),
+    options: new Map()
+  });
+  const filledLabeledValues = React.useMemo(() => {
+    const {
+      values: prevValueCache,
+      options: prevOptionCache
+    } = cacheRef.current;
+
+    // Fill label by cache
+    const patchedValues = labeledValues.map(item => {
+      if (item.label === undefined) {
+        return {
+          ...item,
+          label: prevValueCache.get(item.value)?.label
+        };
+      }
+      return item;
+    });
+
+    // Refresh cache
+    const valueCache = new Map();
+    const optionCache = new Map();
+    patchedValues.forEach(item => {
+      valueCache.set(item.value, item);
+      optionCache.set(item.value, valueOptions.get(item.value) || prevOptionCache.get(item.value));
+    });
+    cacheRef.current.values = valueCache;
+    cacheRef.current.options = optionCache;
+    return patchedValues;
+  }, [labeledValues, valueOptions]);
+  const getOption = React.useCallback(val => valueOptions.get(val) || cacheRef.current.options.get(val), [valueOptions]);
+  return [filledLabeledValues, getOption];
+};
+exports.default = _default;

package/lib/hooks/useDelayReset.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Similar with `useLock`, but this hook will always execute last value.
+ * When set to `true`, it will keep `true` for a short time even if `false` is set.
+ */
+export default function useDelayReset(timeout?: number): [boolean, (val: boolean, callback?: () => void) => void, () => void];

package/lib/hooks/useDelayReset.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useDelayReset;
+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; }
+/**
+ * Similar with `useLock`, but this hook will always execute last value.
+ * When set to `true`, it will keep `true` for a short time even if `false` is set.
+ */
+function useDelayReset(timeout = 10) {
+  const [bool, setBool] = React.useState(false);
+  const delayRef = React.useRef(null);
+  const cancelLatest = () => {
+    window.clearTimeout(delayRef.current);
+  };
+  React.useEffect(() => cancelLatest, []);
+  const delaySetBool = (value, callback) => {
+    cancelLatest();
+    delayRef.current = window.setTimeout(() => {
+      setBool(value);
+      if (callback) {
+        callback();
+      }
+    }, timeout);
+  };
+  return [bool, delaySetBool, cancelLatest];
+}

package/lib/hooks/useFilterOptions.d.ts

@@ -0,0 +1,3 @@
+import type { FieldNames, DefaultOptionType, SelectProps } from '../Select';
+declare const _default: (options: DefaultOptionType[], fieldNames: FieldNames, searchValue?: string, filterOption?: SelectProps['filterOption'], optionFilterProp?: string) => DefaultOptionType[];
+export default _default;

package/lib/hooks/useFilterOptions.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _commonUtil = require("../utils/commonUtil");
+var _valueUtil = require("../utils/valueUtil");
+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 includes(test, search) {
+  return (0, _commonUtil.toArray)(test).join('').toUpperCase().includes(search);
+}
+var _default = (options, fieldNames, searchValue, filterOption, optionFilterProp) => React.useMemo(() => {
+  if (!searchValue || filterOption === false) {
+    return options;
+  }
+  const {
+    options: fieldOptions,
+    label: fieldLabel,
+    value: fieldValue
+  } = fieldNames;
+  const filteredOptions = [];
+  const customizeFilter = typeof filterOption === 'function';
+  const upperSearch = searchValue.toUpperCase();
+  const filterFunc = customizeFilter ? filterOption : (_, option) => {
+    // Use provided `optionFilterProp`
+    if (optionFilterProp) {
+      return includes(option[optionFilterProp], upperSearch);
+    }
+
+    // Auto select `label` or `value` by option type
+    if (option[fieldOptions]) {
+      // hack `fieldLabel` since `OptionGroup` children is not `label`
+      return includes(option[fieldLabel !== 'children' ? fieldLabel : 'label'], upperSearch);
+    }
+    return includes(option[fieldValue], upperSearch);
+  };
+  const wrapOption = customizeFilter ? opt => (0, _valueUtil.injectPropsWithOption)(opt) : opt => opt;
+  options.forEach(item => {
+    // Group should check child options
+    if (item[fieldOptions]) {
+      // Check group first
+      const matchGroup = filterFunc(searchValue, wrapOption(item));
+      if (matchGroup) {
+        filteredOptions.push(item);
+      } else {
+        // Check option
+        const subOptions = item[fieldOptions].filter(subItem => filterFunc(searchValue, wrapOption(subItem)));
+        if (subOptions.length) {
+          filteredOptions.push({
+            ...item,
+            [fieldOptions]: subOptions
+          });
+        }
+      }
+      return;
+    }
+    if (filterFunc(searchValue, wrapOption(item))) {
+      filteredOptions.push(item);
+    }
+  });
+  return filteredOptions;
+}, [options, filterOption, optionFilterProp, searchValue, fieldNames]);
+exports.default = _default;

package/lib/hooks/useId.d.ts

@@ -0,0 +1,5 @@
+/** 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

@@ -0,0 +1,40 @@
+"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;
+}

package/lib/hooks/useLayoutEffect.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Wrap `React.useLayoutEffect` which will not throw warning message in test env
+ */
+export default function useLayoutEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;

package/lib/hooks/useLayoutEffect.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useLayoutEffect;
+var React = _interopRequireWildcard(require("react"));
+var _commonUtil = require("../utils/commonUtil");
+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; }
+/* eslint-disable react-hooks/rules-of-hooks */
+
+/**
+ * Wrap `React.useLayoutEffect` which will not throw warning message in test env
+ */
+function useLayoutEffect(effect, deps) {
+  // Never happen in test env
+  if (_commonUtil.isBrowserClient) {
+    /* istanbul ignore next */
+    React.useLayoutEffect(effect, deps);
+  } else {
+    React.useEffect(effect, deps);
+  }
+}
+/* eslint-enable */