rsuite 5.49.0 → 5.51.0

package/cjs/Picker/PickerToggle.js

@@ -5,25 +5,21 @@ 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 _useCombobox2 = _interopRequireDefault(require("./hooks/useCombobox"));
+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 +32,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,
-    id = props.id,
-    value = props.value,
-    inputPlaceholder = props.inputPlaceholder,
+    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
     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,
+    focusItemValue = props.focusItemValue,
     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 +47,33 @@ 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", "inputValue", "focusItemValue", "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 _useCombobox = (0, _useCombobox2.default)(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType;
+  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 +82,56 @@ 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,
+    id: id,
+    "aria-haspopup": popupType,
+    "aria-expanded": active,
     "aria-disabled": disabled,
-    "aria-owns": id ? id + "-listbox" : undefined
+    "aria-controls": id + "-" + popupType,
+    "aria-labelledby": labelId,
+    "aria-describedby": id + "-describe",
+    "aria-activedescendant": active && focusItemValue ? id + "-opt-" + focusItemValue : 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: labelId
   }, label)), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {
     grow: 1,
     style: {
       overflow: 'hidden'
     }
-  }, loading ? /*#__PURE__*/_react.default.createElement(_Loader.default, {
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    readOnly: true,
+    "aria-hidden": true,
+    tabIndex: -1,
+    "data-testid": "picker-toggle-input",
+    name: name,
+    value: inputValue,
+    className: prefix('textbox', 'read-only'),
     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,
-    "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"
+      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"])))
-  })));
+    id: id + "-describe",
+    "data-testid": "picker-describe"
+  }, 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/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;