rsuite 5.50.0 → 5.51.0

package/cjs/Picker/PickerToggleTrigger.d.ts

@@ -4,6 +4,14 @@ import { PositionChildProps } from '../Overlay/Position';
 import { TypeAttributes, AnimationEventProps } from '../@types/common';
 export type { OverlayTriggerHandle, PositionChildProps };
 export interface PickerToggleTriggerProps extends Omit<AnimationEventProps, 'onEntering' | 'onExiting'>, Pick<OverlayTriggerProps, 'speaker' | 'onClose'> {
+    id?: string;
+    /**
+     * Identifies the combobox has having a popout, and indicates the type.
+     *
+     * @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup
+     */
+    popupType?: 'listbox' | 'tree' | 'grid' | 'dialog' | 'menu';
+    multiple?: boolean;
     placement?: TypeAttributes.Placement;
     pickerProps: any;
     open?: boolean;
@@ -12,5 +20,12 @@ export interface PickerToggleTriggerProps extends Omit<AnimationEventProps, 'onE
 }
 export declare const omitTriggerPropKeys: string[];
 export declare const pickTriggerPropKeys: string[];
+export interface ComboboxContextProps {
+    id?: string;
+    multiple?: boolean;
+    hasLabel?: boolean;
+    popupType?: 'listbox' | 'tree' | 'grid' | 'dialog' | 'menu';
+}
+export declare const ComboboxContextContext: React.Context<ComboboxContextProps>;
 declare const PickerToggleTrigger: React.ForwardRefExoticComponent<PickerToggleTriggerProps & React.RefAttributes<any>>;
 export default PickerToggleTrigger;

package/cjs/Picker/PickerToggleTrigger.js

@@ -3,7 +3,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = exports.pickTriggerPropKeys = exports.omitTriggerPropKeys = void 0;
+exports.default = exports.ComboboxContextContext = exports.pickTriggerPropKeys = exports.omitTriggerPropKeys = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
@@ -12,25 +12,41 @@ var _OverlayTrigger = _interopRequireDefault(require("../Overlay/OverlayTrigger"
 var _utils = require("../utils");
 var omitTriggerPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'defaultOpen', 'container', 'containerPadding', 'preventOverflow'];
 exports.omitTriggerPropKeys = omitTriggerPropKeys;
-var pickTriggerPropKeys = [].concat(omitTriggerPropKeys, ['disabled', 'plaintext', 'readOnly', 'loading']);
+var pickTriggerPropKeys = [].concat(omitTriggerPropKeys, ['disabled', 'plaintext', 'readOnly', 'loading', 'label']);
 exports.pickTriggerPropKeys = pickTriggerPropKeys;
+var ComboboxContextContext = /*#__PURE__*/_react.default.createContext({
+  popupType: 'listbox'
+});
+exports.ComboboxContextContext = ComboboxContextContext;
 var PickerToggleTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var pickerProps = props.pickerProps,
     speaker = props.speaker,
     placement = props.placement,
     _props$trigger = props.trigger,
     trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["pickerProps", "speaker", "placement", "trigger"]);
+    id = props.id,
+    multiple = props.multiple,
+    _props$popupType = props.popupType,
+    popupType = _props$popupType === void 0 ? 'listbox' : _props$popupType,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["pickerProps", "speaker", "placement", "trigger", "id", "multiple", "popupType"]);
   var pickerTriggerProps = (0, _pick.default)(pickerProps, pickTriggerPropKeys);
+  var pickerId = (0, _utils.useUniqueId)('rs-', id);
   var _useCustom = (0, _utils.useCustom)(),
     rtl = _useCustom.rtl;
-  return /*#__PURE__*/_react.default.createElement(_OverlayTrigger.default, (0, _extends2.default)({}, pickerTriggerProps, rest, {
+  return /*#__PURE__*/_react.default.createElement(ComboboxContextContext.Provider, {
+    value: {
+      id: pickerId,
+      hasLabel: typeof pickerTriggerProps.label !== 'undefined',
+      multiple: multiple,
+      popupType: popupType
+    }
+  }, /*#__PURE__*/_react.default.createElement(_OverlayTrigger.default, (0, _extends2.default)({}, pickerTriggerProps, rest, {
     disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,
     ref: ref,
     trigger: trigger,
     placement: (0, _utils.placementPolyfill)(placement, rtl),
     speaker: speaker
-  }));
+  })));
 });
 PickerToggleTrigger.displayName = 'PickerToggleTrigger';
 var _default = PickerToggleTrigger;

package/cjs/Picker/SearchBar.js

@@ -1,14 +1,12 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireWildcard(require("react"));
-var _get = _interopRequireDefault(require("lodash/get"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Search = _interopRequireDefault(require("@rsuite/icons/legacy/Search"));
 var _utils = require("../utils");
@@ -29,15 +27,15 @@ var SearchBar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var classes = merge(className, withClassPrefix());
-  var handleChange = (0, _react.useCallback)(function (event) {
-    onChange === null || onChange === void 0 ? void 0 : onChange((0, _get.default)(event, 'target.value'), event);
-  }, [onChange]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "searchbox"
-  }, rest, {
+  var handleChange = (0, _utils.useEventCallback)(function (event) {
+    var _event$target;
+    onChange === null || onChange === void 0 ? void 0 : onChange((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
+  });
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes
   }), /*#__PURE__*/_react.default.createElement("input", {
+    role: "searchbox",
     className: prefix('input'),
     value: value,
     onChange: handleChange,

package/cjs/Picker/TreeView.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TreeViewProps extends React.HTMLAttributes<HTMLDivElement> {
+    treeRootClassName: string;
+    multiselectable?: boolean;
+}
+declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLDivElement>>;
+export default TreeView;

package/cjs/Picker/TreeView.js

@@ -0,0 +1,31 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _useCombobox2 = _interopRequireDefault(require("./hooks/useCombobox"));
+var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var children = props.children,
+    treeRootClassName = props.treeRootClassName,
+    multiselectable = props.multiselectable,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "treeRootClassName", "multiselectable"]);
+  var _useCombobox = (0, _useCombobox2.default)(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType;
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    role: "tree",
+    id: id + "-" + popupType,
+    "aria-multiselectable": multiselectable,
+    "aria-labelledby": labelId,
+    ref: ref
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    className: treeRootClassName
+  }, children));
+});
+var _default = TreeView;
+exports.default = _default;

package/cjs/Picker/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export { default as usePickerRef } from './usePickerRef';
+export { default as useCombobox } from './useCombobox';
+export { default as useFocusItemValue } from './useFocusItemValue';
+export { default as useToggleKeyDownEvent } from './useToggleKeyDownEvent';
+export { default as useSearch } from './useSearch';
+export { default as usePickerClassName } from './usePickerClassName';

package/cjs/Picker/hooks/index.js

@@ -0,0 +1,18 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.usePickerClassName = exports.useSearch = exports.useToggleKeyDownEvent = exports.useFocusItemValue = exports.useCombobox = exports.usePickerRef = void 0;
+var _usePickerRef = _interopRequireDefault(require("./usePickerRef"));
+exports.usePickerRef = _usePickerRef.default;
+var _useCombobox = _interopRequireDefault(require("./useCombobox"));
+exports.useCombobox = _useCombobox.default;
+var _useFocusItemValue = _interopRequireDefault(require("./useFocusItemValue"));
+exports.useFocusItemValue = _useFocusItemValue.default;
+var _useToggleKeyDownEvent = _interopRequireDefault(require("./useToggleKeyDownEvent"));
+exports.useToggleKeyDownEvent = _useToggleKeyDownEvent.default;
+var _useSearch = _interopRequireDefault(require("./useSearch"));
+exports.useSearch = _useSearch.default;
+var _usePickerClassName = _interopRequireDefault(require("./usePickerClassName"));
+exports.usePickerClassName = _usePickerClassName.default;

package/cjs/Picker/hooks/useCombobox.d.ts

@@ -0,0 +1,7 @@
+declare function useCombobox(): {
+    id: string | undefined;
+    popupType: "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    multiple: boolean | undefined;
+    labelId: string | undefined;
+};
+export default useCombobox;

package/cjs/Picker/hooks/useCombobox.js

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _PickerToggleTrigger = require("../PickerToggleTrigger");
+function useCombobox() {
+  var _useContext = (0, _react.useContext)(_PickerToggleTrigger.ComboboxContextContext),
+    id = _useContext.id,
+    hasLabel = _useContext.hasLabel,
+    popupType = _useContext.popupType,
+    multiple = _useContext.multiple;
+  return {
+    id: id,
+    popupType: popupType,
+    multiple: multiple,
+    labelId: hasLabel ? id + "-label" : undefined
+  };
+}
+var _default = useCombobox;
+exports.default = _default;

package/cjs/Picker/hooks/useFocusItemValue.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+interface FocusItemValueProps<T = unknown> {
+    target: HTMLElement | null | (() => HTMLElement | null);
+    data?: T[];
+    /**
+     *  When the down arrow key is pressed, whether to automatically focus on the option
+     */
+    focusToOption?: boolean;
+    valueKey?: string;
+    focusableQueryKey?: string;
+    defaultLayer?: number;
+    rtl?: boolean;
+    callback?: (value: any, event: React.KeyboardEvent) => void;
+    getParent?: (node: T) => T | undefined;
+}
+/**
+ * A hook that manages the focus state of the option.
+ * @param defaultFocusItemValue
+ * @param props
+ */
+declare const useFocusItemValue: <T, D>(defaultFocusItemValue: T | null | undefined, props: FocusItemValueProps<D>) => {
+    focusItemValue: T | null | undefined;
+    setFocusItemValue: import("react").Dispatch<import("react").SetStateAction<T | null | undefined>>;
+    layer: number;
+    setLayer: import("react").Dispatch<import("react").SetStateAction<number>>;
+    keys: any[];
+    setKeys: import("react").Dispatch<import("react").SetStateAction<any[]>>;
+    onKeyDown: (...args: any[]) => any;
+};
+export default useFocusItemValue;

package/cjs/Picker/hooks/useFocusItemValue.js

@@ -0,0 +1,246 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
+var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
+var _find = _interopRequireDefault(require("lodash/find"));
+var _domLib = require("dom-lib");
+var _utils = require("../../utils");
+var _treeUtils = require("../../utils/treeUtils");
+var _utils2 = require("../utils");
+/**
+ * A hook that manages the focus state of the option.
+ * @param defaultFocusItemValue
+ * @param props
+ */
+var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props) {
+  var _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    _props$focusableQuery = props.focusableQueryKey,
+    focusableQueryKey = _props$focusableQuery === void 0 ? '[data-key][aria-disabled="false"]' : _props$focusableQuery,
+    _props$defaultLayer = props.defaultLayer,
+    defaultLayer = _props$defaultLayer === void 0 ? 0 : _props$defaultLayer,
+    _props$focusToOption = props.focusToOption,
+    focusToOption = _props$focusToOption === void 0 ? true : _props$focusToOption,
+    data = props.data,
+    target = props.target,
+    rtl = props.rtl,
+    callback = props.callback,
+    _props$getParent = props.getParent,
+    getParent = _props$getParent === void 0 ? function (item) {
+      return item === null || item === void 0 ? void 0 : item.parent;
+    } : _props$getParent;
+  var _useState = (0, _react.useState)(defaultFocusItemValue),
+    focusItemValue = _useState[0],
+    setFocusItemValue = _useState[1];
+  var _useState2 = (0, _react.useState)(defaultLayer),
+    layer = _useState2[0],
+    setLayer = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    keys = _useState3[0],
+    setKeys = _useState3[1];
+  var focusCallback = (0, _utils.useEventCallback)(function (value, event) {
+    if (focusToOption) {
+      var menu = (0, _isFunction.default)(target) ? target() : target;
+      var focusElement = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-key=\"" + value + "\"]");
+      focusElement === null || focusElement === void 0 ? void 0 : focusElement.focus();
+    }
+    callback === null || callback === void 0 ? void 0 : callback(value, event);
+  });
+  var getScrollContainer = (0, _utils.useEventCallback)(function () {
+    var menu = (0, _isFunction.default)(target) ? target() : target;
+
+    // For Cascader and MutiCascader
+    var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-layer=\"" + layer + "\"]");
+    if (subMenu) {
+      return subMenu;
+    }
+
+    // For SelectPicker、CheckPicker、Autocomplete、InputPicker、TagPicker
+    return menu === null || menu === void 0 ? void 0 : menu.querySelector('[role="listbox"]');
+  });
+
+  /**
+   * Get the elements visible in all options.
+   */
+  var getFocusableMenuItems = function getFocusableMenuItems() {
+    if (!target) {
+      return [];
+    }
+    var currentKeys = keys;
+    if (layer < 1) {
+      var popup = (0, _isFunction.default)(target) ? target() : target;
+      var rootMenu = popup === null || popup === void 0 ? void 0 : popup.querySelector('[data-layer="0"]');
+      if (rootMenu) {
+        var _rootMenu$querySelect;
+        currentKeys = Array.from((_rootMenu$querySelect = rootMenu.querySelectorAll(focusableQueryKey)) !== null && _rootMenu$querySelect !== void 0 ? _rootMenu$querySelect : []).map(function (item) {
+          var _item$dataset;
+          return (_item$dataset = item.dataset) === null || _item$dataset === void 0 ? void 0 : _item$dataset.key;
+        });
+      } else {
+        var _popup$querySelectorA;
+        currentKeys = Array.from((_popup$querySelectorA = popup === null || popup === void 0 ? void 0 : popup.querySelectorAll(focusableQueryKey)) !== null && _popup$querySelectorA !== void 0 ? _popup$querySelectorA : []).map(function (item) {
+          var _item$dataset2;
+          return (_item$dataset2 = item.dataset) === null || _item$dataset2 === void 0 ? void 0 : _item$dataset2.key;
+        });
+      }
+    }
+
+    // 1. It is necessary to traverse the `keys` instead of `data` here to preserve the order of the array.
+    // 2. The values ​​in `keys` are all string, so the corresponding value of `data` should also be converted to string
+    return currentKeys.map(function (key) {
+      return (0, _find.default)(data, function (i) {
+        return "" + i[valueKey] === key;
+      });
+    });
+  };
+
+  /**
+   * Get the index of the focus item.
+   */
+  var findFocusItemIndex = (0, _utils.useEventCallback)(function (callback) {
+    var items = getFocusableMenuItems();
+    for (var i = 0; i < items.length; i += 1) {
+      var _items$i;
+      if ((0, _utils.shallowEqual)(focusItemValue, (_items$i = items[i]) === null || _items$i === void 0 ? void 0 : _items$i[valueKey])) {
+        callback(items, i);
+        return;
+      }
+    }
+    callback(items, -1);
+  });
+  var scrollListItem = (0, _utils.useEventCallback)(function (direction, itemValue, willOverflow) {
+    var container = getScrollContainer();
+    var item = container === null || container === void 0 ? void 0 : container.querySelector("[data-key=\"" + itemValue + "\"]");
+    if (willOverflow && container) {
+      var scrollHeight = container.scrollHeight,
+        clientHeight = container.clientHeight;
+      container.scrollTop = direction === 'top' ? scrollHeight - clientHeight : 0;
+      return;
+    }
+    if (item && container) {
+      if (!isVisible(item, container, direction)) {
+        var height = (0, _domLib.getHeight)(item);
+        scrollTo(container, direction, height);
+      }
+    }
+  });
+  var focusNextMenuItem = (0, _utils.useEventCallback)(function (event) {
+    findFocusItemIndex(function (items, index) {
+      var willOverflow = index + 2 > items.length;
+      var nextIndex = willOverflow ? 0 : index + 1;
+      var focusItem = items[nextIndex];
+      if (!(0, _isUndefined.default)(focusItem)) {
+        setFocusItemValue(focusItem[valueKey]);
+        focusCallback(focusItem[valueKey], event);
+        scrollListItem('bottom', focusItem[valueKey], willOverflow);
+      }
+    });
+  });
+  var focusPrevMenuItem = (0, _utils.useEventCallback)(function (event) {
+    findFocusItemIndex(function (items, index) {
+      var willOverflow = index === 0;
+      var nextIndex = willOverflow ? items.length - 1 : index - 1;
+      var focusItem = items[nextIndex];
+      if (!(0, _isUndefined.default)(focusItem)) {
+        setFocusItemValue(focusItem[valueKey]);
+        focusCallback(focusItem[valueKey], event);
+        scrollListItem('top', focusItem[valueKey], willOverflow);
+      }
+    });
+  });
+  var getSubMenuKeys = function getSubMenuKeys(nextLayer) {
+    var menu = (0, _isFunction.default)(target) ? target() : target;
+    var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-layer=\"" + nextLayer + "\"]");
+    if (subMenu) {
+      var _Array$from;
+      return (_Array$from = Array.from(subMenu.querySelectorAll(focusableQueryKey))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(function (item) {
+        var _item$dataset3;
+        return (_item$dataset3 = item.dataset) === null || _item$dataset3 === void 0 ? void 0 : _item$dataset3.key;
+      });
+    }
+    return null;
+  };
+  var focusNextLevelMenu = (0, _utils.useEventCallback)(function (event) {
+    var nextLayer = layer + 1;
+    var nextKeys = getSubMenuKeys(nextLayer);
+    if (nextKeys) {
+      setKeys(nextKeys);
+      setLayer(nextLayer);
+      setFocusItemValue(nextKeys[0]);
+      focusCallback(nextKeys[0], event);
+    }
+  });
+  var focusPrevLevelMenu = (0, _utils.useEventCallback)(function (event) {
+    var nextLayer = layer - 1;
+    var nextKeys = getSubMenuKeys(nextLayer);
+    if (nextKeys) {
+      var _getParent;
+      setKeys(nextKeys);
+      setLayer(nextLayer);
+      var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {
+        return item[valueKey] === focusItemValue;
+      });
+      var parentItemValue = (_getParent = getParent(focusItem)) === null || _getParent === void 0 ? void 0 : _getParent[valueKey];
+      if (parentItemValue) {
+        setFocusItemValue(parentItemValue);
+        focusCallback(parentItemValue, event);
+      }
+    }
+  });
+  var handleKeyDown = (0, _utils.useEventCallback)(function (event) {
+    var _onMenuKeyDown;
+    (0, _utils2.onMenuKeyDown)(event, (_onMenuKeyDown = {
+      down: focusNextMenuItem,
+      up: focusPrevMenuItem
+    }, _onMenuKeyDown[rtl ? 'left' : 'right'] = focusNextLevelMenu, _onMenuKeyDown[rtl ? 'right' : 'left'] = focusPrevLevelMenu, _onMenuKeyDown));
+  });
+  return {
+    focusItemValue: focusItemValue,
+    setFocusItemValue: setFocusItemValue,
+    layer: layer,
+    setLayer: setLayer,
+    keys: keys,
+    setKeys: setKeys,
+    onKeyDown: handleKeyDown
+  };
+};
+function scrollTo(container, direction, step) {
+  var scrollTop = container.scrollTop;
+  container.scrollTop = direction === 'top' ? scrollTop - step : scrollTop + step;
+}
+
+/**
+ * Checks if the element has a vertical scrollbar.
+ */
+function hasVerticalScroll(element) {
+  var scrollHeight = element.scrollHeight,
+    clientHeight = element.clientHeight;
+  return scrollHeight > clientHeight;
+}
+
+/**
+ * Checks if the element is within the visible area of the container
+ */
+function isVisible(element, container, direction) {
+  if (!hasVerticalScroll(container)) {
+    return true;
+  }
+  var _element$getBoundingC = element.getBoundingClientRect(),
+    top = _element$getBoundingC.top,
+    bottom = _element$getBoundingC.bottom,
+    height = _element$getBoundingC.height;
+  var _container$getBoundin = container.getBoundingClientRect(),
+    containerTop = _container$getBoundin.top,
+    containerBottom = _container$getBoundin.bottom;
+  if (direction === 'top') {
+    return top + height > containerTop;
+  }
+  return bottom - height < containerBottom;
+}
+var _default = useFocusItemValue;
+exports.default = _default;

package/cjs/Picker/hooks/usePickerClassName.d.ts

@@ -0,0 +1,21 @@
+import { TypeAttributes } from '../../@types/common';
+export interface PickerClassNameProps {
+    name?: string;
+    classPrefix: string;
+    className?: string;
+    placement?: TypeAttributes.Placement;
+    appearance?: 'default' | 'subtle';
+    cleanable?: boolean;
+    block?: boolean;
+    disabled?: boolean;
+    countable?: boolean;
+    readOnly?: boolean;
+    plaintext?: boolean;
+    hasValue?: boolean;
+    classes?: any;
+}
+/**
+ * The className of the assembled Toggle is on the Picker.
+ */
+declare function usePickerClassName(props: PickerClassNameProps): [string, string[]];
+export default usePickerClassName;

package/cjs/Picker/hooks/usePickerClassName.js

@@ -0,0 +1,39 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _utils = require("../../utils");
+/**
+ * The className of the assembled Toggle is on the Picker.
+ */
+function usePickerClassName(props) {
+  var _withClassPrefix;
+  var name = props.name,
+    classPrefix = props.classPrefix,
+    className = props.className,
+    placement = props.placement,
+    appearance = props.appearance,
+    cleanable = props.cleanable,
+    block = props.block,
+    disabled = props.disabled,
+    countable = props.countable,
+    readOnly = props.readOnly,
+    plaintext = props.plaintext,
+    hasValue = props.hasValue,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["name", "classPrefix", "className", "placement", "appearance", "cleanable", "block", "disabled", "countable", "readOnly", "plaintext", "hasValue"]);
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  var classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', (_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix['read-only'] = readOnly, _withClassPrefix['has-value'] = hasValue, _withClassPrefix.cleanable = cleanable, _withClassPrefix.block = block, _withClassPrefix.disabled = disabled, _withClassPrefix.countable = countable, _withClassPrefix.plaintext = plaintext, _withClassPrefix)));
+
+  // Those props that're used for composing the className
+  var usedClassNamePropKeys = Object.keys((0, _omit.default)(props, [].concat(Object.keys(rest || {}), ['disabled', 'readOnly', 'plaintext', 'name'])));
+  return [classes, usedClassNamePropKeys];
+}
+var _default = usePickerClassName;
+exports.default = _default;

package/cjs/Picker/{usePickerRef.d.ts → hooks/usePickerRef.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { OverlayTriggerHandle } from './PickerToggleTrigger';
-import type { ListHandle } from '../Windowing';
+import type { OverlayTriggerHandle } from '../PickerToggleTrigger';
+import type { ListHandle } from '../../Windowing';
 export interface PickerDependentParameters {
     inline?: boolean;
 }

package/cjs/Picker/{usePickerRef.js → hooks/usePickerRef.js}

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _react = require("react");
-var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
+var _useEventCallback = _interopRequireDefault(require("../../utils/useEventCallback"));
 /**
  * A hook of the exposed method of Picker
  */

package/cjs/Picker/hooks/useSearch.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+interface SearchOptions<T> {
+    labelKey: string;
+    searchBy?: (keyword: string, label: any, item: T) => boolean;
+    callback?: (keyword: string, data: T[], event: React.SyntheticEvent) => void;
+}
+declare type UseSearchResult<T> = {
+    searchKeyword: string;
+    filteredData: T[];
+    checkShouldDisplay: (item: T, keyword?: string) => boolean;
+    handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
+    resetSearch: () => void;
+};
+/**
+ * A hook that handles search filter options
+ */
+declare function useSearch<T>(data: readonly T[], props: SearchOptions<T>): UseSearchResult<T>;
+export default useSearch;

package/cjs/Picker/hooks/useSearch.js

@@ -0,0 +1,57 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
+var _utils = require("../utils");
+/**
+ * A hook that handles search filter options
+ */
+function useSearch(data, props) {
+  var labelKey = props.labelKey,
+    searchBy = props.searchBy,
+    callback = props.callback; // Use search keywords to filter options.
+  var _useState = (0, _react.useState)(''),
+    searchKeyword = _useState[0],
+    setSearchKeyword = _useState[1];
+  var resetSearch = (0, _react.useCallback)(function () {
+    setSearchKeyword('');
+  }, []);
+
+  /**
+   * Index of keyword  in `label`
+   * @param {node} label
+   */
+  var checkShouldDisplay = (0, _react.useCallback)(function (item, keyword) {
+    var checkValue = typeof item === 'object' ? item === null || item === void 0 ? void 0 : item[labelKey] : String(item);
+    var _keyword = (0, _isUndefined.default)(keyword) ? searchKeyword : keyword;
+    if (typeof searchBy === 'function') {
+      return searchBy(_keyword, checkValue, item);
+    }
+    return (0, _utils.shouldDisplay)(checkValue, _keyword);
+  }, [labelKey, searchBy, searchKeyword]);
+  var filteredData = (0, _react.useMemo)(function () {
+    return data.filter(function (item) {
+      return checkShouldDisplay(item, searchKeyword);
+    });
+  }, [checkShouldDisplay, data, searchKeyword]);
+  var handleSearch = function handleSearch(searchKeyword, event) {
+    var filteredData = data.filter(function (item) {
+      return checkShouldDisplay(item, searchKeyword);
+    });
+    setSearchKeyword(searchKeyword);
+    callback === null || callback === void 0 ? void 0 : callback(searchKeyword, filteredData, event);
+  };
+  return {
+    searchKeyword: searchKeyword,
+    filteredData: filteredData,
+    checkShouldDisplay: checkShouldDisplay,
+    handleSearch: handleSearch,
+    resetSearch: resetSearch
+  };
+}
+var _default = useSearch;
+exports.default = _default;