rsuite 5.48.1 → 5.50.0

package/esm/Picker/PickerToggle.js

@@ -1,23 +1,18 @@
 'use client';
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _templateObject, _templateObject2;
-import React, { useState, useCallback, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import debounce from 'lodash/debounce';
+var _templateObject;
+import React, { useRef, useMemo } from 'react';
 import ToggleButton from './ToggleButton';
-import CloseButton from '../CloseButton';
-import { useClassNames, useCustom, KEY_VALUES, mergeRefs } from '../utils';
+import { useClassNames, mergeRefs, useEventCallback } from '../utils';
 import Plaintext from '../Plaintext';
 import useToggleCaret from '../utils/useToggleCaret';
-import TextMask from '../MaskedInput/TextMask';
-import deprecatePropType from '../utils/deprecatePropType';
-import Loader from '../Loader';
 import Stack from '../Stack';
-var defaultInputMask = [];
+import PickerIndicator from './PickerIndicator';
+import PickerLabel from './PickerLabel';
 var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var activeProp = props.active,
+  var active = props.active,
     _props$as = props.as,
     Component = _props$as === void 0 ? ToggleButton : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -30,26 +25,14 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     readOnly = props.readOnly,
     plaintext = props.plaintext,
     hasValue = props.hasValue,
-    editable = props.editable,
     _props$loading = props.loading,
     loading = _props$loading === void 0 ? false : _props$loading,
-    cleanableProp = props.cleanable,
+    cleanable = props.cleanable,
     _props$tabIndex = props.tabIndex,
-    tabIndexProp = _props$tabIndex === void 0 ? editable ? -1 : 0 : _props$tabIndex,
+    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
     id = props.id,
-    value = props.value,
-    inputPlaceholder = props.inputPlaceholder,
     inputValueProp = props.inputValue,
-    _props$inputMask = props.inputMask,
-    inputMask = _props$inputMask === void 0 ? defaultInputMask : _props$inputMask,
-    onInputChange = props.onInputChange,
-    onInputPressEnter = props.onInputPressEnter,
-    onInputBackspace = props.onInputBackspace,
-    onInputBlur = props.onInputBlur,
-    onInputFocus = props.onInputFocus,
     onClean = props.onClean,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
     caretComponent = props.caretComponent,
@@ -57,102 +40,29 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,
     label = props.label,
     name = props.name,
-    rest = _objectWithoutPropertiesLoose(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "editable", "loading", "cleanable", "tabIndex", "id", "value", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBackspace", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs", "label", "name"]);
-  var _useCustom = useCustom(),
-    locale = _useCustom.locale;
-  var inputRef = useRef(null);
-  var comboboxRef = useRef(null);
-  var _useState = useState(false),
-    activeState = _useState[0],
-    setActive = _useState[1];
+    rest = _objectWithoutPropertiesLoose(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "loading", "cleanable", "tabIndex", "id", "inputValue", "onClean", "placement", "caretComponent", "caretAs", "label", "name"]);
+  var combobox = useRef(null);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
-  var getInputValue = useCallback(function () {
-    return typeof inputValueProp === 'undefined' ? Array.isArray(value) ? value.join(',') : value : inputValueProp;
-  }, [inputValueProp, value]);
-  var _useState2 = useState(getInputValue),
-    inputValue = _useState2[0],
-    setInputValue = _useState2[1];
-  useEffect(function () {
-    if (comboboxRef.current) {
-      var _value = getInputValue();
-      setInputValue(_value);
+  var inputValue = useMemo(function () {
+    if (typeof inputValueProp === 'number' || typeof inputValueProp === 'string') {
+      return inputValueProp;
+    } else if (Array.isArray(inputValueProp)) {
+      return inputValueProp.join(',');
     }
-  }, [getInputValue]);
+    return '';
+  }, [inputValueProp]);
   var classes = merge(className, withClassPrefix({
-    active: activeProp || activeState
+    active: active
   }));
-  var handleFocus = useCallback(function (event) {
-    if (!loading) {
-      setActive(true);
-    }
-    if (editable) {
-      // Avoid firing the onFocus event twice when DatePicker and DateRangePicker allow keyboard input.
-      if (event.target === inputRef.current) {
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-      }
-
-      // Force the input to be focused and editable.
-      if (document.activeElement === comboboxRef.current) {
-        var _inputRef$current;
-        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-      }
-    } else {
-      onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-    }
-  }, [editable, loading, onFocus]);
-  var handleBlur = useCallback(function (event) {
-    if (inputRef.current && !editable) {
-      setActive(false);
-    }
-
-    // When activeElement is an input, it remains active.
-    if (editable && inputRef.current && document.activeElement !== inputRef.current) {
-      setActive(false);
-    }
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-  }, [editable, onBlur]);
-  var handleInputBlur = function handleInputBlur(event) {
-    setInputValue(getInputValue());
-    onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(event);
-  };
-  var handleClean = useCallback(function (event) {
-    var _inputRef$current2, _comboboxRef$current;
+  var handleClean = useEventCallback(function (event) {
+    var _combobox$current;
     event.stopPropagation();
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
-
-    // When the value is cleared, the current component is still in focus.
-    editable ? (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus() : (_comboboxRef$current = comboboxRef.current) === null || _comboboxRef$current === void 0 ? void 0 : _comboboxRef$current.focus();
-  }, [editable, onClean]);
-  var handleInputChange = useCallback(function (event) {
-    var _event$target;
-    var value = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value;
-    setInputValue(value);
-    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(value, event);
-  }, [onInputChange]);
-  var handleInputKeyDown = useCallback(function (event) {
-    if (editable) {
-      if (event.key === KEY_VALUES.ENTER) {
-        onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);
-      }
-      if (event.key === KEY_VALUES.BACKSPACE) {
-        onInputBackspace === null || onInputBackspace === void 0 ? void 0 : onInputBackspace(event);
-      }
-    }
-  }, [editable, onInputPressEnter, onInputBackspace]);
-  var renderInput = useCallback(function (ref, props) {
-    return /*#__PURE__*/React.createElement("input", _extends({
-      type: "text",
-      autoComplete: "off",
-      ref: mergeRefs(inputRef, ref),
-      name: name,
-      style: {
-        pointerEvents: editable ? undefined : 'none'
-      }
-    }, props));
-  }, [editable, name]);
+    (_combobox$current = combobox.current) === null || _combobox$current === void 0 ? void 0 : _combobox$current.focus();
+  });
   var ToggleCaret = useToggleCaret(placement);
   var Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;
   if (plaintext) {
@@ -161,88 +71,53 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
       localeKey: "notSelected"
     }, hasValue ? children : null);
   }
-  var showCleanButton = cleanableProp && hasValue && !readOnly;
-
-  // When the component is read-only or disabled, the input is not interactive.
-  var inputFocused = readOnly || disabled ? false : editable && activeState;
-  var tabIndex = disabled ? undefined : tabIndexProp;
+  var showCleanButton = cleanable && hasValue && !readOnly;
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "combobox",
     "aria-haspopup": "listbox",
-    "aria-expanded": activeProp,
+    "aria-expanded": active,
     "aria-disabled": disabled,
     "aria-owns": id ? id + "-listbox" : undefined
   }, rest, {
-    ref: mergeRefs(comboboxRef, ref),
+    ref: mergeRefs(combobox, ref),
     disabled: disabled,
-    tabIndex: tabIndex,
-    className: classes,
-    onFocus: !disabled ? handleFocus : null
-    // The debounce is set to 200 to solve the flicker caused by the switch between input and div.
-    ,
-    onBlur: !disabled ? debounce(handleBlur, 200) : null
-  }), /*#__PURE__*/React.createElement(Stack, null, label && /*#__PURE__*/React.createElement(Stack.Item, null, /*#__PURE__*/React.createElement("span", {
-    className: prefix('label')
+    tabIndex: disabled ? undefined : tabIndex,
+    className: classes
+  }), /*#__PURE__*/React.createElement(Stack, null, label && /*#__PURE__*/React.createElement(Stack.Item, null, /*#__PURE__*/React.createElement(PickerLabel, {
+    as: "span",
+    className: prefix('label'),
+    id: id ? id + "-label" : undefined
   }, label)), /*#__PURE__*/React.createElement(Stack.Item, {
     grow: 1,
     style: {
       overflow: 'hidden'
     }
-  }, loading ? /*#__PURE__*/React.createElement(Loader, {
-    style: {
-      display: 'block',
-      padding: '1px 0'
-    },
-    "data-testid": "spinner"
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextMask, {
-    keepCharPositions: true,
-    mask: inputMask,
-    value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,
-    onBlur: handleInputBlur,
-    onFocus: onInputFocus,
-    onChange: handleInputChange,
-    onKeyDown: handleInputKeyDown,
-    id: id,
-    "aria-hidden": !inputFocused,
-    readOnly: !inputFocused,
-    disabled: disabled,
+  }, /*#__PURE__*/React.createElement("input", {
+    readOnly: true,
+    "aria-hidden": true,
     "aria-controls": id ? id + "-listbox" : undefined,
-    tabIndex: editable ? 0 : -1,
-    className: prefix('textbox', {
-      'read-only': !inputFocused
-    }),
-    placeholder: inputPlaceholder,
-    render: renderInput,
-    "data-testid": "picker-toggle-input"
+    "aria-labelledby": label ? id + "-label" : undefined,
+    tabIndex: -1,
+    "data-testid": "picker-toggle-input",
+    name: name,
+    value: inputValue,
+    id: id,
+    className: prefix('textbox', 'read-only'),
+    style: {
+      pointerEvents: 'none'
+    }
   }), children ? /*#__PURE__*/React.createElement("span", {
     className: prefix(hasValue ? 'value' : 'placeholder'),
     "aria-placeholder": typeof children === 'string' ? children : undefined
-  }, children) : null)), showCleanButton && /*#__PURE__*/React.createElement(CloseButton, {
-    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["clean"]))),
-    tabIndex: -1,
-    locale: {
-      closeLabel: locale === null || locale === void 0 ? void 0 : locale.clear
-    },
-    onClick: handleClean
-  }), caret && !showCleanButton && /*#__PURE__*/React.createElement(Caret, {
-    className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["caret"])))
-  })));
+  }, children) : null), /*#__PURE__*/React.createElement(Stack.Item, {
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["indicator"])))
+  }, /*#__PURE__*/React.createElement(PickerIndicator, {
+    as: React.Fragment,
+    loading: loading,
+    caretAs: caret ? Caret : null,
+    onClose: handleClean,
+    showCleanButton: showCleanButton
+  }))));
 });
 PickerToggle.displayName = 'PickerToggle';
-PickerToggle.propTypes = {
-  classPrefix: PropTypes.string,
-  hasValue: PropTypes.bool,
-  cleanable: PropTypes.bool,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  caret: PropTypes.bool,
-  as: PropTypes.elementType,
-  onClean: PropTypes.func,
-  active: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  disabled: PropTypes.bool,
-  plaintext: PropTypes.bool,
-  caretComponent: deprecatePropType(PropTypes.elementType, 'Use `caretAs` instead.'),
-  caretAs: PropTypes.elementType
-};
 export default PickerToggle;

package/esm/Picker/index.d.ts

@@ -7,9 +7,12 @@ export { default as DropdownMenuGroup } from './DropdownMenuGroup';
 export { default as DropdownMenuItem } from './DropdownMenuItem';
 export { default as PickerOverlay } from './PickerOverlay';
 export { default as PickerToggle } from './PickerToggle';
+export { default as PickerLabel } from './PickerLabel';
+export { default as PickerIndicator } from './PickerIndicator';
 export { default as PickerToggleTrigger } from './PickerToggleTrigger';
 export { default as SearchBar } from './SearchBar';
 export { default as SelectedElement } from './SelectedElement';
+export { default as usePickerRef } from './usePickerRef';
 export { pickTriggerPropKeys, omitTriggerPropKeys };
 export type { OverlayTriggerHandle, PositionChildProps, PickerHandle, PickerComponent, PickerToggleProps };
 export * from './utils';

package/esm/Picker/index.js

@@ -6,9 +6,12 @@ export { default as DropdownMenuGroup } from './DropdownMenuGroup';
 export { default as DropdownMenuItem } from './DropdownMenuItem';
 export { default as PickerOverlay } from './PickerOverlay';
 export { default as PickerToggle } from './PickerToggle';
+export { default as PickerLabel } from './PickerLabel';
+export { default as PickerIndicator } from './PickerIndicator';
 export { default as PickerToggleTrigger } from './PickerToggleTrigger';
 export { default as SearchBar } from './SearchBar';
 export { default as SelectedElement } from './SelectedElement';
+export { default as usePickerRef } from './usePickerRef';
 export { pickTriggerPropKeys, omitTriggerPropKeys };
 export * from './utils';
 export * from './propTypes';

package/esm/Picker/usePickerRef.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { OverlayTriggerHandle } from './PickerToggleTrigger';
+import type { ListHandle } from '../Windowing';
+export interface PickerDependentParameters {
+    inline?: boolean;
+}
+/**
+ * A hook of the exposed method of Picker
+ */
+declare function usePickerRef(ref: any, parmas?: PickerDependentParameters): {
+    trigger: import("react").RefObject<OverlayTriggerHandle>;
+    root: import("react").MutableRefObject<any>;
+    overlay: import("react").RefObject<HTMLElement>;
+    target: import("react").RefObject<HTMLElement>;
+    list: import("react").RefObject<ListHandle>;
+    searchInput: import("react").RefObject<HTMLInputElement>;
+    treeView: import("react").RefObject<HTMLDivElement>;
+};
+export default usePickerRef;

package/esm/Picker/usePickerRef.js

@@ -0,0 +1,82 @@
+'use client';
+import { useImperativeHandle, useRef } from 'react';
+import useEventCallback from '../utils/useEventCallback';
+/**
+ * A hook of the exposed method of Picker
+ */
+function usePickerRef(ref, parmas) {
+  var trigger = useRef(null);
+  var root = useRef(null);
+  var target = useRef(null);
+  var overlay = useRef(null);
+  var list = useRef(null);
+  var searchInput = useRef(null);
+  var treeView = useRef(null);
+  var _ref = parmas || {},
+    inline = _ref.inline;
+  var handleOpen = useEventCallback(function () {
+    var _trigger$current;
+    trigger === null || trigger === void 0 ? void 0 : (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$current.open();
+  });
+  var handleClose = useEventCallback(function () {
+    var _trigger$current2;
+    trigger === null || trigger === void 0 ? void 0 : (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.close();
+  });
+  var handleUpdatePosition = useEventCallback(function () {
+    var _trigger$current3;
+    trigger === null || trigger === void 0 ? void 0 : (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.updatePosition();
+  });
+  useImperativeHandle(ref, function () {
+    // Tree and CheckTree
+    if (inline) {
+      return {
+        get root() {
+          var _trigger$current$root, _trigger$current4;
+          return root !== null && root !== void 0 && root.current ? root === null || root === void 0 ? void 0 : root.current : (_trigger$current$root = trigger === null || trigger === void 0 ? void 0 : (_trigger$current4 = trigger.current) === null || _trigger$current4 === void 0 ? void 0 : _trigger$current4.root) !== null && _trigger$current$root !== void 0 ? _trigger$current$root : null;
+        },
+        get list() {
+          if (!(list !== null && list !== void 0 && list.current)) {
+            throw new Error('The list is not found, please set `virtualized` for the component.');
+          }
+          return list === null || list === void 0 ? void 0 : list.current;
+        }
+      };
+    }
+    return {
+      get root() {
+        var _ref2, _trigger$current5;
+        return (_ref2 = (root === null || root === void 0 ? void 0 : root.current) || (trigger === null || trigger === void 0 ? void 0 : (_trigger$current5 = trigger.current) === null || _trigger$current5 === void 0 ? void 0 : _trigger$current5.root)) !== null && _ref2 !== void 0 ? _ref2 : null;
+      },
+      get overlay() {
+        var _overlay$current;
+        if (!(overlay !== null && overlay !== void 0 && overlay.current)) {
+          throw new Error('The overlay is not found. Please confirm whether the picker is open.');
+        }
+        return (_overlay$current = overlay === null || overlay === void 0 ? void 0 : overlay.current) !== null && _overlay$current !== void 0 ? _overlay$current : null;
+      },
+      get target() {
+        var _target$current;
+        return (_target$current = target === null || target === void 0 ? void 0 : target.current) !== null && _target$current !== void 0 ? _target$current : null;
+      },
+      get list() {
+        if (!(list !== null && list !== void 0 && list.current)) {
+          throw new Error("\n            The list is not found.\n            1.Please set virtualized for the component.\n            2.Please confirm whether the picker is open.\n          ");
+        }
+        return list === null || list === void 0 ? void 0 : list.current;
+      },
+      updatePosition: handleUpdatePosition,
+      open: handleOpen,
+      close: handleClose
+    };
+  });
+  return {
+    trigger: trigger,
+    root: root,
+    overlay: overlay,
+    target: target,
+    list: list,
+    searchInput: searchInput,
+    treeView: treeView
+  };
+}
+export default usePickerRef;

package/esm/Picker/utils.d.ts

@@ -68,10 +68,10 @@ export declare const useFocusItemValue: <T, D>(defaultFocusItemValue: T | null |
 };
 export interface ToggleKeyDownEventProps {
     toggle?: boolean;
-    triggerRef: React.RefObject<any>;
-    targetRef: React.RefObject<any>;
-    overlayRef?: React.RefObject<any>;
-    searchInputRef?: React.RefObject<any>;
+    trigger: React.RefObject<any>;
+    target: React.RefObject<any>;
+    overlay?: React.RefObject<any>;
+    searchInput?: React.RefObject<any>;
     active?: boolean;
     readOnly?: boolean;
     disabled?: boolean;
@@ -88,7 +88,7 @@ export interface ToggleKeyDownEventProps {
  * A hook to control the toggle keyboard operation
  * @param props
  */
-export declare const useToggleKeyDownEvent: (props: ToggleKeyDownEventProps) => (event: React.KeyboardEvent) => void;
+export declare const useToggleKeyDownEvent: (props: ToggleKeyDownEventProps) => (...args: any[]) => any;
 interface SearchOptions<T> {
     labelKey: string;
     searchBy?: (keyword: string, label: any, item: T) => boolean;
@@ -113,8 +113,4 @@ export interface PickerDependentParameters {
     listRef?: React.RefObject<ListHandle>;
     inline?: boolean;
 }
-/**
- * A hook of the exposed method of Picker
- */
-export declare function usePublicMethods(ref: any, parmas: PickerDependentParameters): void;
 export {};

package/esm/Picker/utils.js

@@ -1,6 +1,6 @@
 'use client';
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useState, useImperativeHandle, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import kebabCase from 'lodash/kebabCase';
 import trim from 'lodash/trim';
 import isFunction from 'lodash/isFunction';
@@ -8,7 +8,7 @@ import isUndefined from 'lodash/isUndefined';
 import omit from 'lodash/omit';
 import find from 'lodash/find';
 import { findNodeOfTree } from '../utils/treeUtils';
-import { KEY_VALUES, useClassNames, shallowEqual, reactToString, placementPolyfill } from '../utils';
+import { KEY_VALUES, useClassNames, shallowEqual, reactToString, placementPolyfill, useEventCallback } from '../utils';
 import { getHeight } from 'dom-lib';
 var defaultNodeKeys = {
   valueKey: 'value',
@@ -353,10 +353,10 @@ export var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue,
 export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
   var _props$toggle = props.toggle,
     toggle = _props$toggle === void 0 ? true : _props$toggle,
-    triggerRef = props.triggerRef,
-    targetRef = props.targetRef,
-    overlayRef = props.overlayRef,
-    searchInputRef = props.searchInputRef,
+    trigger = props.trigger,
+    target = props.target,
+    overlay = props.overlay,
+    searchInput = props.searchInput,
     active = props.active,
     readOnly = props.readOnly,
     disabled = props.disabled,
@@ -368,32 +368,32 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
     onMenuKeyDown = props.onMenuKeyDown,
     onMenuPressEnter = props.onMenuPressEnter,
     onMenuPressBackspace = props.onMenuPressBackspace;
-  var handleClose = useCallback(function () {
-    var _triggerRef$current, _triggerRef$current$c, _targetRef$current, _targetRef$current$fo;
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
+  var handleClose = useEventCallback(function () {
+    var _trigger$current, _trigger$current$clos, _trigger$current2, _trigger$current2$foc;
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);
 
     // The focus is on the trigger button after closing
-    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$fo = _targetRef$current.focus) === null || _targetRef$current$fo === void 0 ? void 0 : _targetRef$current$fo.call(_targetRef$current);
+    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$foc = _trigger$current2.focus) === null || _trigger$current2$foc === void 0 ? void 0 : _trigger$current2$foc.call(_trigger$current2);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, targetRef, triggerRef]);
-  var handleOpen = useCallback(function () {
-    var _triggerRef$current2, _triggerRef$current2$;
-    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);
+  });
+  var handleOpen = useEventCallback(function () {
+    var _trigger$current3, _trigger$current3$ope;
+    (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : (_trigger$current3$ope = _trigger$current3.open) === null || _trigger$current3$ope === void 0 ? void 0 : _trigger$current3$ope.call(_trigger$current3);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen, triggerRef]);
-  var handleToggleDropdown = useCallback(function () {
+  });
+  var handleToggleDropdown = useEventCallback(function () {
     if (active) {
       handleClose();
       return;
     }
     handleOpen();
-  }, [active, handleOpen, handleClose]);
-  var onToggle = useCallback(function (event) {
+  });
+  var onToggle = useEventCallback(function (event) {
     // Keyboard events should not be processed when readOnly and disabled are set.
     if (readOnly || disabled || loading) {
       return;
     }
-    if (event.target === (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current)) {
+    if (event.target === (target === null || target === void 0 ? void 0 : target.current)) {
       // enter
       if (toggle && event.key === KEY_VALUES.ENTER) {
         handleToggleDropdown();
@@ -404,7 +404,7 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
         onExit === null || onExit === void 0 ? void 0 : onExit(event);
       }
     }
-    if (overlayRef !== null && overlayRef !== void 0 && overlayRef.current) {
+    if (overlay !== null && overlay !== void 0 && overlay.current) {
       // The keyboard operation callback on the menu.
       onMenuKeyDown === null || onMenuKeyDown === void 0 ? void 0 : onMenuKeyDown(event);
       if (event.key === KEY_VALUES.ENTER) {
@@ -415,7 +415,7 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
        * There is no callback when typing the Backspace key in the search box.
        * The default is to remove search keywords
        */
-      if (event.key === KEY_VALUES.BACKSPACE && event.target !== (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current)) {
+      if (event.key === KEY_VALUES.BACKSPACE && event.target !== (searchInput === null || searchInput === void 0 ? void 0 : searchInput.current)) {
         onMenuPressBackspace === null || onMenuPressBackspace === void 0 ? void 0 : onMenuPressBackspace(event);
       }
 
@@ -425,8 +425,8 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
         // Exclude Input
         // eg: <SelectPicker renderExtraFooter={() => <Input />} />
         if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) !== 'INPUT') {
-          var _searchInputRef$curre;
-          searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+          var _searchInput$current;
+          searchInput === null || searchInput === void 0 ? void 0 : (_searchInput$current = searchInput.current) === null || _searchInput$current === void 0 ? void 0 : _searchInput$current.focus();
         }
       }
     }
@@ -436,7 +436,7 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
 
     // Native event callback
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-  }, [readOnly, disabled, loading, targetRef, overlayRef, onKeyDown, toggle, handleToggleDropdown, onExit, onMenuKeyDown, searchInputRef, onMenuPressEnter, onMenuPressBackspace, handleClose]);
+  });
   return onToggle;
 };
 /**
@@ -484,70 +484,4 @@ export function useSearch(data, props) {
     handleSearch: handleSearch,
     resetSearch: resetSearch
   };
-}
-/**
- * A hook of the exposed method of Picker
- */
-export function usePublicMethods(ref, parmas) {
-  var triggerRef = parmas.triggerRef,
-    overlayRef = parmas.overlayRef,
-    targetRef = parmas.targetRef,
-    rootRef = parmas.rootRef,
-    listRef = parmas.listRef,
-    inline = parmas.inline;
-  var handleOpen = useCallback(function () {
-    var _triggerRef$current3;
-    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : _triggerRef$current3.open();
-  }, [triggerRef]);
-  var handleClose = useCallback(function () {
-    var _triggerRef$current4;
-    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.close();
-  }, [triggerRef]);
-  var handleUpdatePosition = useCallback(function () {
-    var _triggerRef$current5;
-    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current5 = triggerRef.current) === null || _triggerRef$current5 === void 0 ? void 0 : _triggerRef$current5.updatePosition();
-  }, [triggerRef]);
-  useImperativeHandle(ref, function () {
-    // Tree and CheckTree
-    if (inline) {
-      return {
-        get root() {
-          var _triggerRef$current$r, _triggerRef$current6;
-          return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current$r = triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root) !== null && _triggerRef$current$r !== void 0 ? _triggerRef$current$r : null;
-        },
-        get list() {
-          if (!(listRef !== null && listRef !== void 0 && listRef.current)) {
-            throw new Error('The list is not found, please set `virtualized` for the component.');
-          }
-          return listRef === null || listRef === void 0 ? void 0 : listRef.current;
-        }
-      };
-    }
-    return {
-      get root() {
-        var _ref, _triggerRef$current7;
-        return (_ref = (rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) || (triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current7 = triggerRef.current) === null || _triggerRef$current7 === void 0 ? void 0 : _triggerRef$current7.root)) !== null && _ref !== void 0 ? _ref : null;
-      },
-      get overlay() {
-        var _overlayRef$current;
-        if (!(overlayRef !== null && overlayRef !== void 0 && overlayRef.current)) {
-          throw new Error('The overlay is not found. Please confirm whether the picker is open.');
-        }
-        return (_overlayRef$current = overlayRef === null || overlayRef === void 0 ? void 0 : overlayRef.current) !== null && _overlayRef$current !== void 0 ? _overlayRef$current : null;
-      },
-      get target() {
-        var _targetRef$current2;
-        return (_targetRef$current2 = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _targetRef$current2 !== void 0 ? _targetRef$current2 : null;
-      },
-      get list() {
-        if (!(listRef !== null && listRef !== void 0 && listRef.current)) {
-          throw new Error("\n            The list is not found.\n            1.Please set virtualized for the component.\n            2.Please confirm whether the picker is open.\n          ");
-        }
-        return listRef === null || listRef === void 0 ? void 0 : listRef.current;
-      },
-      updatePosition: handleUpdatePosition,
-      open: handleOpen,
-      close: handleClose
-    };
-  });
 }