rsuite 5.49.0 → 5.50.0

package/cjs/MultiCascader/MultiCascader.js

@@ -120,15 +120,12 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useState2 = (0, _react.useState)(),
     selectedPaths = _useState2[0],
     setSelectedPaths = _useState2[1];
-  var triggerRef = (0, _react.useRef)(null);
-  var overlayRef = (0, _react.useRef)(null);
-  var targetRef = (0, _react.useRef)(null);
-  var searchInputRef = (0, _react.useRef)(null);
-  (0, _Picker.usePublicMethods)(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef
-  });
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    searchInput = _usePickerRef.searchInput;
   var _useCustom = (0, _utils3.useCustom)('Picker', overrideLocale),
     locale = _useCustom.locale,
     rtl = _useCustom.rtl;
@@ -145,7 +142,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       valueKey: valueKey,
       defaultLayer: selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length ? selectedPaths.length - 1 : 0,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       },
       callback: (0, _react.useCallback)(function (value) {
         var _getColumnsAndPaths = (0, _utils2.getColumnsAndPaths)(data, flattenData.find(function (item) {
@@ -179,16 +176,16 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useState3 = (0, _react.useState)(''),
     searchKeyword = _useState3[0],
     setSearchKeyword = _useState3[1];
-  var handleEntered = (0, _react.useCallback)(function () {
+  var handleEntered = (0, _utils3.useEventCallback)(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
-  }, [onOpen]);
-  var handleExited = (0, _react.useCallback)(function () {
+  });
+  var handleExited = (0, _utils3.useEventCallback)(function () {
     setActive(false);
     setSearchKeyword('');
-  }, []);
-  var handleSelect = (0, _react.useCallback)(function (node, cascadePaths, event) {
-    var _node$childrenKey, _node$childrenKey2, _triggerRef$current, _triggerRef$current$u;
+  });
+  var handleSelect = (0, _utils3.useEventCallback)(function (node, cascadePaths, event) {
+    var _node$childrenKey, _node$childrenKey2, _trigger$current, _trigger$current$upda;
     setSelectedPaths(cascadePaths);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
     var columnIndex = cascadePaths.length;
@@ -201,7 +198,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         children.then(function (data) {
           node.loading = false;
           node[childrenKey] = data;
-          if (targetRef.current || inline) {
+          if (target.current || inline) {
             addFlattenData(data, node);
             addColumn(data, columnIndex);
           }
@@ -218,9 +215,9 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       // Removes subsequent columns of the current column when the clicked node is a leaf node.
       removeColumnByIndex(columnIndex);
     }
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$u = _triggerRef$current.updatePosition) === null || _triggerRef$current$u === void 0 ? void 0 : _triggerRef$current$u.call(_triggerRef$current);
-  }, [onSelect, getChildren, childrenKey, inline, addFlattenData, addColumn, removeColumnByIndex]);
-  var handleCheck = (0, _react.useCallback)(function (node, event, checked) {
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$upda = _trigger$current.updatePosition) === null || _trigger$current$upda === void 0 ? void 0 : _trigger$current$upda.call(_trigger$current);
+  });
+  var handleCheck = (0, _utils3.useEventCallback)(function (node, event, checked) {
     var nodeValue = node[valueKey];
     var nextValue = [];
     if (cascade) {
@@ -238,38 +235,38 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     setValue(nextValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);
-  }, [cascade, onChange, onCheck, setValue, splitValue, value, valueKey]);
-  var handleClean = (0, _react.useCallback)(function (event) {
-    if (disabled || !targetRef.current) {
+  });
+  var handleClean = (0, _utils3.useEventCallback)(function (event) {
+    if (disabled || !target.current) {
       return;
     }
     setSelectedPaths([]);
     setValue([]);
     setColumnData([data]);
     onChange === null || onChange === void 0 ? void 0 : onChange([], event);
-  }, [data, disabled, onChange, setColumnData, setValue]);
-  var handleMenuPressEnter = (0, _react.useCallback)(function (event) {
-    var _overlayRef$current;
+  });
+  var handleMenuPressEnter = (0, _utils3.useEventCallback)(function (event) {
+    var _overlay$current;
     var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {
       return item[valueKey] === focusItemValue;
     });
-    var checkbox = (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.querySelector("[data-key=\"" + focusItemValue + "\"] [type=\"checkbox\"]");
+    var checkbox = (_overlay$current = overlay.current) === null || _overlay$current === void 0 ? void 0 : _overlay$current.querySelector("[data-key=\"" + focusItemValue + "\"] [type=\"checkbox\"]");
     if (checkbox) {
       handleCheck(focusItem, event, (checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) !== 'true');
     }
-  }, [data, focusItemValue, handleCheck, valueKey]);
+  });
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.default)({
     toggle: !focusItemValue || !active,
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    overlayRef: overlayRef,
-    searchInputRef: searchInputRef,
+    trigger: trigger,
+    target: target,
+    overlay: overlay,
+    searchInput: searchInput,
     active: active,
     onExit: handleClean,
     onMenuKeyDown: onFocusItem,
     onMenuPressEnter: handleMenuPressEnter
   }, rest));
-  var handleSearch = (0, _react.useCallback)(function (value, event) {
+  var handleSearch = (0, _utils3.useEventCallback)(function (value, event) {
     setSearchKeyword(value);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
     if (value) {
@@ -278,8 +275,8 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       setLayer(selectedPaths.length - 1);
     }
     setKeys([]);
-  }, [onSearch, selectedPaths, setKeys, setLayer]);
-  var getSearchResult = (0, _react.useCallback)(function () {
+  });
+  var getSearchResult = function getSearchResult() {
     var items = [];
     var result = flattenData.filter(function (item) {
       if (uncheckableItemValues.some(function (value) {
@@ -301,7 +298,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       }
     }
     return items;
-  }, [flattenData, labelKey, searchKeyword, uncheckableItemValues, valueKey]);
+  };
   var renderSearchRow = function renderSearchRow(item, key) {
     var _extends2;
     var nodes = (0, _treeUtils.getNodeParents)(item);
@@ -386,16 +383,16 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       inline: inline
     }));
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
-      ref: (0, _utils3.mergeRefs)(overlayRef, speakerRef),
+      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),
       className: classes,
       style: styles,
-      target: triggerRef,
+      target: trigger,
       onKeyDown: onPickerKeyDown
     }, searchable && /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {
       placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeyword,
-      inputRef: searchInputRef
+      inputRef: searchInput
     }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {
       id: id ? id + "-listbox" : undefined,
       cascade: cascade,
@@ -451,7 +448,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEnter: (0, _utils3.createChainedFunction)(handleEntered, onEnter),
     onExited: (0, _utils3.createChainedFunction)(handleExited, onExited),
@@ -459,13 +456,14 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     speaker: renderDropdownMenu
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
     id: id,
     as: toggleAs,
     appearance: appearance,
     disabled: disabled,
-    ref: targetRef,
+    ref: target,
     onClean: (0, _utils3.createChainedFunction)(handleClean, onClean),
     onKeyDown: onPickerKeyDown,
     cleanable: cleanable && !disabled,

package/cjs/{DatePicker → Picker}/PickerIndicator.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 interface PickerIndicatorProps {
     loading?: boolean;
     caretAs?: React.ElementType | null;
-    onClose?: () => void;
+    onClose?: (event: React.MouseEvent<HTMLElement>) => void;
     showCleanButton?: boolean;
     as?: React.ElementType;
 }

package/cjs/{DatePicker → Picker}/PickerIndicator.js

@@ -39,7 +39,8 @@ var PickerIndicator = function PickerIndicator(_ref) {
       });
     }
     return caretAs && /*#__PURE__*/_react.default.createElement(_icons.Icon, {
-      as: caretAs
+      as: caretAs,
+      className: prefix('caret-icon')
     });
   };
   return /*#__PURE__*/_react.default.createElement(Component, null, addon());

package/cjs/{DatePicker → Picker}/PickerLabel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface PickerLabelProps {
-    id: string;
+    id?: string;
     className?: string;
     children?: React.ReactNode;
     as?: React.ElementType;

package/cjs/Picker/PickerToggle.d.ts

@@ -4,38 +4,33 @@ import { RsRefForwardingComponent, TypeAttributes } from '../@types/common';
 import { IconProps } from '@rsuite/icons/lib/Icon';
 declare type ValueType = string | number;
 export interface PickerToggleProps extends ToggleButtonProps {
-    value?: ValueType | ValueType[];
-    inputValue?: ValueType | ValueType[];
-    id?: string;
+    active?: boolean;
     hasValue?: boolean;
     cleanable?: boolean;
     caret?: boolean;
-    active?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    plaintext?: boolean;
-    tabIndex?: number;
-    /** Whether to display an loading indicator on toggle button */
-    loading?: boolean;
-    editable?: boolean;
-    name?: string;
-    inputPlaceholder?: string;
-    inputMask?: (string | RegExp)[];
-    onInputChange?: (value: string, event: React.ChangeEvent) => void;
-    onInputPressEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onInputBackspace?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onInputBlur?: (event: React.FocusEvent<HTMLElement>) => void;
-    onInputFocus?: (event: React.FocusEvent<HTMLElement>) => void;
-    placement?: TypeAttributes.Placement;
     /**
      * Custom caret component
      * @deprecated Use `caretAs` instead
      */
     caretComponent?: React.FC<IconProps>;
-    /** Custom caret component */
+    /**
+     * Custom caret component
+     */
     caretAs?: React.ElementType;
-    onClean?: (event: React.MouseEvent) => void;
+    disabled?: boolean;
+    placement?: TypeAttributes.Placement;
+    readOnly?: boolean;
+    plaintext?: boolean;
+    tabIndex?: number;
+    /**
+     * Whether to display an loading indicator on toggle button
+     */
+    loading?: boolean;
     label?: React.ReactNode;
+    name?: string;
+    id?: string;
+    inputValue?: ValueType | ValueType[];
+    onClean?: (event: React.MouseEvent) => void;
 }
 declare const PickerToggle: RsRefForwardingComponent<typeof ToggleButton, PickerToggleProps>;
 export default PickerToggle;

package/cjs/Picker/PickerToggle.js

@@ -5,25 +5,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 exports.__esModule = true;
 exports.default = void 0;
-var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _ToggleButton = _interopRequireDefault(require("./ToggleButton"));
-var _CloseButton = _interopRequireDefault(require("../CloseButton"));
 var _utils = require("../utils");
 var _Plaintext = _interopRequireDefault(require("../Plaintext"));
 var _useToggleCaret = _interopRequireDefault(require("../utils/useToggleCaret"));
-var _TextMask = _interopRequireDefault(require("../MaskedInput/TextMask"));
-var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
-var _Loader = _interopRequireDefault(require("../Loader"));
 var _Stack = _interopRequireDefault(require("../Stack"));
-var _templateObject, _templateObject2;
-var defaultInputMask = [];
+var _PickerIndicator = _interopRequireDefault(require("./PickerIndicator"));
+var _PickerLabel = _interopRequireDefault(require("./PickerLabel"));
+var _templateObject;
 var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var activeProp = props.active,
+  var active = props.active,
     _props$as = props.as,
     Component = _props$as === void 0 ? _ToggleButton.default : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -36,26 +31,14 @@ var PickerToggle = /*#__PURE__*/_react.default.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,
@@ -63,102 +46,29 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,
     label = props.label,
     name = props.name,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useCustom)(),
-    locale = _useCustom.locale;
-  var inputRef = (0, _react.useRef)(null);
-  var comboboxRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(false),
-    activeState = _useState[0],
-    setActive = _useState[1];
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "loading", "cleanable", "tabIndex", "id", "inputValue", "onClean", "placement", "caretComponent", "caretAs", "label", "name"]);
+  var combobox = (0, _react.useRef)(null);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
-  var getInputValue = (0, _react.useCallback)(function () {
-    return typeof inputValueProp === 'undefined' ? Array.isArray(value) ? value.join(',') : value : inputValueProp;
-  }, [inputValueProp, value]);
-  var _useState2 = (0, _react.useState)(getInputValue),
-    inputValue = _useState2[0],
-    setInputValue = _useState2[1];
-  (0, _react.useEffect)(function () {
-    if (comboboxRef.current) {
-      var _value = getInputValue();
-      setInputValue(_value);
+  var inputValue = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(function (event) {
-    var _inputRef$current2, _comboboxRef$current;
+  var handleClean = (0, _utils.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 = (0, _react.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 = (0, _react.useCallback)(function (event) {
-    if (editable) {
-      if (event.key === _utils.KEY_VALUES.ENTER) {
-        onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);
-      }
-      if (event.key === _utils.KEY_VALUES.BACKSPACE) {
-        onInputBackspace === null || onInputBackspace === void 0 ? void 0 : onInputBackspace(event);
-      }
-    }
-  }, [editable, onInputPressEnter, onInputBackspace]);
-  var renderInput = (0, _react.useCallback)(function (ref, props) {
-    return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
-      type: "text",
-      autoComplete: "off",
-      ref: (0, _utils.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 = (0, _useToggleCaret.default)(placement);
   var Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;
   if (plaintext) {
@@ -167,89 +77,54 @@ var PickerToggle = /*#__PURE__*/_react.default.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.default.createElement(Component, (0, _extends2.default)({
     role: "combobox",
     "aria-haspopup": "listbox",
-    "aria-expanded": activeProp,
+    "aria-expanded": active,
     "aria-disabled": disabled,
     "aria-owns": id ? id + "-listbox" : undefined
   }, rest, {
-    ref: (0, _utils.mergeRefs)(comboboxRef, ref),
+    ref: (0, _utils.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 ? (0, _debounce.default)(handleBlur, 200) : null
-  }), /*#__PURE__*/_react.default.createElement(_Stack.default, null, label && /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement("span", {
-    className: prefix('label')
+    tabIndex: disabled ? undefined : tabIndex,
+    className: classes
+  }), /*#__PURE__*/_react.default.createElement(_Stack.default, null, label && /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement(_PickerLabel.default, {
+    as: "span",
+    className: prefix('label'),
+    id: id ? id + "-label" : undefined
   }, label)), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {
     grow: 1,
     style: {
       overflow: 'hidden'
     }
-  }, loading ? /*#__PURE__*/_react.default.createElement(_Loader.default, {
-    style: {
-      display: 'block',
-      padding: '1px 0'
-    },
-    "data-testid": "spinner"
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TextMask.default, {
-    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.default.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.default.createElement("span", {
     className: prefix(hasValue ? 'value' : 'placeholder'),
     "aria-placeholder": typeof children === 'string' ? children : undefined
-  }, children) : null)), showCleanButton && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
-    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["clean"]))),
-    tabIndex: -1,
-    locale: {
-      closeLabel: locale === null || locale === void 0 ? void 0 : locale.clear
-    },
-    onClick: handleClean
-  }), caret && !showCleanButton && /*#__PURE__*/_react.default.createElement(Caret, {
-    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["caret"])))
-  })));
+  }, children) : null), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {
+    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["indicator"])))
+  }, /*#__PURE__*/_react.default.createElement(_PickerIndicator.default, {
+    as: _react.default.Fragment,
+    loading: loading,
+    caretAs: caret ? Caret : null,
+    onClose: handleClean,
+    showCleanButton: showCleanButton
+  }))));
 });
 PickerToggle.displayName = 'PickerToggle';
-PickerToggle.propTypes = {
-  classPrefix: _propTypes.default.string,
-  hasValue: _propTypes.default.bool,
-  cleanable: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  children: _propTypes.default.node,
-  caret: _propTypes.default.bool,
-  as: _propTypes.default.elementType,
-  onClean: _propTypes.default.func,
-  active: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  plaintext: _propTypes.default.bool,
-  caretComponent: (0, _deprecatePropType.default)(_propTypes.default.elementType, 'Use `caretAs` instead.'),
-  caretAs: _propTypes.default.elementType
-};
 var _default = PickerToggle;
 exports.default = _default;

package/cjs/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/cjs/Picker/index.js

@@ -11,13 +11,16 @@ var _exportNames = {
   DropdownMenuItem: true,
   PickerOverlay: true,
   PickerToggle: true,
+  PickerLabel: true,
+  PickerIndicator: true,
   PickerToggleTrigger: true,
   SearchBar: true,
   SelectedElement: true,
+  usePickerRef: true,
   pickTriggerPropKeys: true,
   omitTriggerPropKeys: true
 };
-exports.SelectedElement = exports.SearchBar = exports.PickerToggleTrigger = exports.PickerToggle = exports.PickerOverlay = exports.DropdownMenuItem = exports.DropdownMenuGroup = exports.DropdownMenuCheckItem = exports.DropdownMenu = void 0;
+exports.usePickerRef = exports.SelectedElement = exports.SearchBar = exports.PickerToggleTrigger = exports.PickerIndicator = exports.PickerLabel = exports.PickerToggle = exports.PickerOverlay = exports.DropdownMenuItem = exports.DropdownMenuGroup = exports.DropdownMenuCheckItem = exports.DropdownMenu = void 0;
 var _PickerToggleTrigger = _interopRequireWildcard(require("./PickerToggleTrigger"));
 exports.pickTriggerPropKeys = _PickerToggleTrigger.pickTriggerPropKeys;
 exports.omitTriggerPropKeys = _PickerToggleTrigger.omitTriggerPropKeys;
@@ -34,10 +37,16 @@ var _PickerOverlay = _interopRequireDefault(require("./PickerOverlay"));
 exports.PickerOverlay = _PickerOverlay.default;
 var _PickerToggle = _interopRequireDefault(require("./PickerToggle"));
 exports.PickerToggle = _PickerToggle.default;
+var _PickerLabel = _interopRequireDefault(require("./PickerLabel"));
+exports.PickerLabel = _PickerLabel.default;
+var _PickerIndicator = _interopRequireDefault(require("./PickerIndicator"));
+exports.PickerIndicator = _PickerIndicator.default;
 var _SearchBar = _interopRequireDefault(require("./SearchBar"));
 exports.SearchBar = _SearchBar.default;
 var _SelectedElement = _interopRequireDefault(require("./SelectedElement"));
 exports.SelectedElement = _SelectedElement.default;
+var _usePickerRef = _interopRequireDefault(require("./usePickerRef"));
+exports.usePickerRef = _usePickerRef.default;
 var _utils = require("./utils");
 Object.keys(_utils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/Picker/usePickerRef.d.ts

@@ -9,9 +9,11 @@ export interface PickerDependentParameters {
  */
 declare function usePickerRef(ref: any, parmas?: PickerDependentParameters): {
     trigger: import("react").RefObject<OverlayTriggerHandle>;
-    root: import("react").RefObject<HTMLElement>;
+    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;