rsuite 5.59.3-alpha.1 → 5.60.0

package/esm/InputPicker/InputPicker.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-import React, { useState, useRef, useEffect, useCallback, useContext } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
@@ -13,7 +13,6 @@ import clone from 'lodash/clone';
 import isArray from 'lodash/isArray';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
-import getWidth from 'dom-lib/getWidth';
 import shallowEqual from '../utils/shallowEqual';
 import { filterNodesOfTree } from '../utils/treeUtils';
 import Plaintext from '../internals/Plaintext';
@@ -22,21 +21,12 @@ import { oneOf } from '../internals/propTypes';
 import { getDataGroupBy } from '../utils/getDataGroupBy';
 import { Listbox, ListItem, ListCheckItem, PickerToggle, PickerPopup, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePickerRef, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../internals/Picker';
 import Tag from '../Tag';
-import InputAutosize from './InputAutosize';
 import TextBox from './TextBox';
-import InputPickerContext from './InputPickerContext';
+import { useTagContext } from './InputPickerContext';
 import Stack from '../Stack';
-var convertSize = function convertSize(size) {
-  switch (size) {
-    case 'lg':
-      return 'lg';
-    case 'sm':
-    case 'xs':
-      return 'sm';
-    default:
-      return 'md';
-  }
-};
+import useInput from './hooks/useInput';
+import useData from './hooks/useData';
+import { convertSize } from './utils';
 /**
  * Single item selector with text box input.
  *
@@ -67,10 +57,13 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     overrideLocale = props.locale,
     toggleAs = props.toggleAs,
     style = props.style,
+    size = props.size,
     _props$searchable = props.searchable,
     searchable = _props$searchable === void 0 ? true : _props$searchable,
     controlledOpen = props.open,
     placeholder = props.placeholder,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
     groupBy = props.groupBy,
     menuClassName = props.menuClassName,
     menuStyle = props.menuStyle,
@@ -107,21 +100,17 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onBlur = props.onBlur,
     onFocus = props.onFocus,
     searchBy = props.searchBy,
-    size = props.size,
-    _props$placement = props.placement,
-    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "appearance", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "searchable", "open", "placeholder", "groupBy", "menuClassName", "menuStyle", "menuAutoWidth", "menuMaxHeight", "creatable", "shouldDisplayCreateOption", "value", "valueKey", "virtualized", "labelKey", "listProps", "id", "tabIndex", "sort", "renderMenu", "renderExtraFooter", "renderValue", "renderMenuItem", "renderMenuGroup", "onEnter", "onEntered", "onExit", "onExited", "onChange", "onClean", "onCreate", "onSearch", "onSelect", "onBlur", "onFocus", "searchBy", "size", "placement"]);
-  var _useContext = useContext(InputPickerContext),
-    multi = _useContext.multi,
-    tagProps = _useContext.tagProps,
-    trigger = _useContext.trigger,
-    disabledOptions = _useContext.disabledOptions,
-    onTagRemove = _useContext.onTagRemove,
-    renderCheckbox = _useContext.renderCheckbox;
+    rest = _objectWithoutPropertiesLoose(props, ["as", "appearance", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "size", "searchable", "open", "placeholder", "placement", "groupBy", "menuClassName", "menuStyle", "menuAutoWidth", "menuMaxHeight", "creatable", "shouldDisplayCreateOption", "value", "valueKey", "virtualized", "labelKey", "listProps", "id", "tabIndex", "sort", "renderMenu", "renderExtraFooter", "renderValue", "renderMenuItem", "renderMenuGroup", "onEnter", "onEntered", "onExit", "onExited", "onChange", "onClean", "onCreate", "onSearch", "onSelect", "onBlur", "onFocus", "searchBy"]);
+  var _useTagContext = useTagContext(),
+    multi = _useTagContext.multi,
+    tagProps = _useTagContext.tagProps,
+    trigger = _useTagContext.trigger,
+    disabledOptions = _useTagContext.disabledOptions,
+    onTagRemove = _useTagContext.onTagRemove,
+    renderCheckbox = _useTagContext.renderCheckbox;
   if (groupBy === valueKey || groupBy === labelKey) {
     throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');
   }
-  var inputRef = useRef();
   var _usePickerRef = usePickerRef(ref),
     triggerRef = _usePickerRef.trigger,
     root = _usePickerRef.root,
@@ -133,29 +122,34 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
-  var _useState = useState(controlledData),
-    uncontrolledData = _useState[0],
-    setData = _useState[1];
-  var _useState2 = useState(100),
-    maxWidth = _useState2[0],
-    setMaxWidth = _useState2[1];
-  var _useState3 = useState([]),
-    newData = _useState3[0],
-    setNewData = _useState3[1];
-  var _useState4 = useState(defaultOpen),
-    uncontrolledOpen = _useState4[0],
-    setOpen = _useState4[1];
-  var open = isUndefined(controlledOpen) ? uncontrolledOpen : controlledOpen;
-  var getAllData = useCallback(function () {
-    return [].concat(uncontrolledData, newData);
-  }, [uncontrolledData, newData]);
-  var getAllDataAndCache = useCallback(function () {
-    return [].concat(getAllData(), cacheData);
-  }, [getAllData, cacheData]);
-  var _useControlled = useControlled(valueProp, multi ? defaultValue || [] : defaultValue),
-    value = _useControlled[0],
-    setValue = _useControlled[1],
-    isControlled = _useControlled[2];
+  var _useControlled = useControlled(controlledOpen, defaultOpen),
+    open = _useControlled[0],
+    setOpen = _useControlled[1];
+  var _useInput = useInput({
+      multi: multi,
+      triggerRef: triggerRef
+    }),
+    inputRef = _useInput.inputRef,
+    inputProps = _useInput.inputProps,
+    focus = _useInput.focus,
+    blur = _useInput.blur;
+  var handleDataChange = function handleDataChange(data) {
+    var _data$;
+    setFocusItemValue(data === null || data === void 0 ? void 0 : (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$[valueKey]);
+  };
+  var _useData = useData({
+      controlledData: controlledData,
+      cacheData: cacheData,
+      onChange: handleDataChange
+    }),
+    data = _useData.data,
+    dataWithCache = _useData.dataWithCache,
+    newData = _useData.newData,
+    setNewData = _useData.setNewData;
+  var _useControlled2 = useControlled(valueProp, multi ? defaultValue || [] : defaultValue),
+    value = _useControlled2[0],
+    setValue = _useControlled2[1],
+    isControlled = _useControlled2[2];
   var cloneValue = function cloneValue() {
     return multi ? clone(value) || [] : value;
   };
@@ -166,62 +160,53 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // The focus is on the trigger button after closing
     (_target$current = target.current) === null || _target$current === void 0 ? void 0 : (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 ? void 0 : _target$current$focus.call(_target$current);
   });
+  var focusItemValueOptions = {
+    data: dataWithCache,
+    valueKey: valueKey,
+    target: function target() {
+      return overlay.current;
+    }
+  };
 
   // Used to hover the focuse item  when trigger `onKeydown`
-  var _useFocusItemValue = useFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {
-      data: getAllDataAndCache(),
-      valueKey: valueKey,
-      target: function target() {
-        return overlay.current;
-      }
-    }),
+  var _useFocusItemValue = useFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value, focusItemValueOptions),
     focusItemValue = _useFocusItemValue.focusItemValue,
     setFocusItemValue = _useFocusItemValue.setFocusItemValue,
     onKeyDown = _useFocusItemValue.onKeyDown;
-  var handleSearchCallback = useEventCallback(function (searchKeyword, filteredData, event) {
-    var _filteredData$;
-    // The first option after filtering is the focus.
-    setFocusItemValue(disabledOptions ? searchKeyword : (filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]) || searchKeyword);
+  var onSearchCallback = useEventCallback(function (searchKeyword, filteredData, event) {
+    if (!disabledOptions) {
+      var _filteredData$;
+      // The first option after filtering is the focus.
+      var firstItemValue = filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey];
+
+      // If there is no value in the option and new options are supported, the search keyword is the first option
+      if (!firstItemValue && creatable) {
+        firstItemValue = searchKeyword;
+      }
+      setFocusItemValue(firstItemValue);
+    }
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
   });
+  var searchOptions = {
+    labelKey: labelKey,
+    searchBy: searchBy,
+    callback: onSearchCallback
+  };
 
   // Use search keywords to filter options.
-  var _useSearch = useSearch(getAllData(), {
-      labelKey: labelKey,
-      searchBy: searchBy,
-      callback: handleSearchCallback
-    }),
+  var _useSearch = useSearch(data, searchOptions),
     searchKeyword = _useSearch.searchKeyword,
     resetSearch = _useSearch.resetSearch,
     checkShouldDisplay = _useSearch.checkShouldDisplay,
-    handleSearch = _useSearch.handleSearch; // Update the state when the data in props changes
+    handleSearch = _useSearch.handleSearch; // Update the position of the menu when the search keyword and value change
   useEffect(function () {
-    if (controlledData && !shallowEqual(controlledData, uncontrolledData)) {
-      var _controlledData$;
-      setData(controlledData);
-      setNewData([]);
-      setFocusItemValue(controlledData === null || controlledData === void 0 ? void 0 : (_controlledData$ = controlledData[0]) === null || _controlledData$ === void 0 ? void 0 : _controlledData$[valueKey]);
-    }
-  }, [setFocusItemValue, controlledData, uncontrolledData, valueKey]);
-  useEffect(function () {
-    var _triggerRef$current2;
-    // In multiple selection, you need to set a maximum width for the input.
-    if ((_triggerRef$current2 = triggerRef.current) !== null && _triggerRef$current2 !== void 0 && _triggerRef$current2.root) {
-      setMaxWidth(getWidth(triggerRef.current.root));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Update the position of the menu when the search keyword and value change
-  useEffect(function () {
-    var _triggerRef$current3, _triggerRef$current3$;
-    (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.updatePosition) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$current3);
+    var _triggerRef$current2, _triggerRef$current2$;
+    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.updatePosition) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchKeyword, value]);
   var getDataItem = function getDataItem(value) {
     // Find active `MenuItem` by `value`
-    var allData = getAllDataAndCache();
-    var activeItem = allData.find(function (item) {
+    var activeItem = dataWithCache.find(function (item) {
       return shallowEqual(item[valueKey], value);
     });
     var itemNode = placeholder;
@@ -234,33 +219,20 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       itemNode: itemNode
     };
   };
-  var getInput = function getInput() {
-    var _inputRef$current;
-    return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;
-  };
-  var focusInput = function focusInput() {
-    var _getInput;
-    return (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();
-  };
-  var blurInput = function blurInput() {
-    var _getInput2;
-    return (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();
-  };
 
   /**
    * Convert the string of the newly created option into an object.
    */
   var createOption = function createOption(value) {
-    var _ref2;
+    var _option;
+    var option = (_option = {
+      create: true
+    }, _option[valueKey] = value, _option[labelKey] = value, _option);
     if (groupBy) {
-      var _ref;
-      return _ref = {
-        create: true
-      }, _ref[groupBy] = locale === null || locale === void 0 ? void 0 : locale.newItem, _ref[valueKey] = value, _ref[labelKey] = value, _ref;
+      var _extends2;
+      return _extends((_extends2 = {}, _extends2[groupBy] = locale === null || locale === void 0 ? void 0 : locale.newItem, _extends2), option);
     }
-    return _ref2 = {
-      create: true
-    }, _ref2[valueKey] = value, _ref2[labelKey] = value, _ref2;
+    return option;
   };
   var handleChange = useEventCallback(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
@@ -320,7 +292,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setFocusItemValue(nextItemValue);
     handleSelect(val, item, event);
     handleChange(val, event);
-    focusInput();
+    focus();
   });
   var handleTagKeyPress = useEventCallback(function (event) {
     // When composing, ignore the keypress event.
@@ -328,31 +300,36 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return;
     }
     var val = cloneValue();
-    var data = getAllData();
-    if (!focusItemValue || !data) {
+    var newItemValue = focusItemValue || '';
+
+    // In TagInput
+    if (multi && disabledOptions) {
+      newItemValue = searchKeyword;
+    }
+    if (!newItemValue || !data) {
       return;
     }
 
     // If the value is disabled in this option, it is returned.
     if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {
-      return item === focusItemValue;
+      return item === newItemValue;
     })) {
       return;
     }
     if (!val.some(function (v) {
-      return shallowEqual(v, focusItemValue);
+      return shallowEqual(v, newItemValue);
     })) {
-      val.push(focusItemValue);
+      val.push(newItemValue);
     } else if (!disabledOptions) {
       remove(val, function (itemVal) {
-        return shallowEqual(itemVal, focusItemValue);
+        return shallowEqual(itemVal, newItemValue);
       });
     }
     var focusItem = data.find(function (item) {
-      return shallowEqual(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);
+      return shallowEqual(item === null || item === void 0 ? void 0 : item[valueKey], newItemValue);
     });
     if (!focusItem) {
-      focusItem = createOption(focusItemValue);
+      focusItem = createOption(newItemValue);
     }
     setValue(val);
     resetSearch();
@@ -372,8 +349,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     // Find active `MenuItem` by `value`
-    var allData = getAllData();
-    var focusItem = allData.find(function (item) {
+    var focusItem = data.find(function (item) {
       return shallowEqual(item[valueKey], focusItemValue);
     });
 
@@ -397,7 +373,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var removeLastItem = useEventCallback(function (event) {
     var target = event === null || event === void 0 ? void 0 : event.target;
     if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {
-      focusInput();
+      focus();
       return;
     }
     if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {
@@ -460,19 +436,20 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);
     resetSearch();
   });
-  var handleFocus = useEventCallback(function () {
+  var handleFocus = useEventCallback(function (event) {
     if (!readOnly) {
-      var _triggerRef$current4;
+      var _triggerRef$current3;
       setOpen(true);
-      (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();
+      (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : _triggerRef$current3.open();
     }
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
   });
   var handleEnter = useEventCallback(function () {
-    focusInput();
+    focus();
     setOpen(true);
   });
   var handleExit = useEventCallback(function () {
-    blurInput();
+    blur();
     setOpen(false);
   });
   var renderListItem = function renderListItem(label, item) {
@@ -543,7 +520,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       left: left,
       top: top
     });
-    var items = filterNodesOfTree(getAllData(), checkShouldDisplay);
+    var items = filterNodesOfTree(data, checkShouldDisplay);
     if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(function (item) {
       return item[valueKey] === searchKeyword;
     }))) {
@@ -582,8 +559,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ,
       group: !isUndefined(groupBy),
       groupBy: groupBy,
-      onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any
-      ,
+      onSelect: multi ? handleCheckTag : handleSelectItem,
       renderMenuGroup: renderMenuGroup,
       renderMenuItem: renderListItem,
       virtualized: virtualized
@@ -624,14 +600,6 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["tag"])))] = multi, _merge[prefix((multi ? 'tag' : 'input') + "-" + size)] = size, _merge[prefix(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["focused"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["disabled-options"])))] = disabledOptions, _merge));
   var searching = !!searchKeyword && open;
   var editable = searchable && !disabled && !rest.loading;
-  var inputProps = multi ? {
-    inputStyle: {
-      maxWidth: maxWidth - 63
-    },
-    as: InputAutosize
-  } : {
-    as: 'input'
-  };
   if (plaintext) {
     var plaintextProps = {};
 
@@ -663,7 +631,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,
     style: style,
-    onClick: focusInput,
+    onClick: focus,
     onKeyDown: onPickerKeyDown,
     ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
@@ -685,17 +653,17 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     size: size
   }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/React.createElement(TextBox, {
     showTagList: hasValue && multi,
+    inputRef: inputRef,
+    inputValue: open ? searchKeyword : '',
+    inputProps: inputProps,
     tags: tagElements,
     editable: editable,
     readOnly: readOnly,
     disabled: disabled,
     multiple: multi,
     onBlur: onBlur,
-    onFocus: createChainedFunction(handleFocus, onFocus),
-    inputRef: inputRef,
-    onChange: handleSearch,
-    inputValue: open ? searchKeyword : '',
-    inputProps: inputProps
+    onFocus: handleFocus,
+    onChange: handleSearch
   })));
 });
 InputPicker.displayName = 'InputPicker';

package/esm/InputPicker/InputPickerContext.d.ts

@@ -9,18 +9,26 @@ export interface TagOnlyProps {
      * Set the trigger for creating tags. only valid when creatable
      */
     trigger: TriggerType | TriggerType[];
-    /** Callback fired when a tag is removed. */
+    /**
+     * Callback fired when a tag is removed.
+     */
     onTagRemove?: (tag: string, event: React.MouseEvent) => void;
 }
 export interface InputPickerContextProps extends TagOnlyProps {
-    /** Multiple selections are allowed */
+    /**
+     * Multiple selections are allowed
+     */
     multi?: boolean;
     /**
      * No overlay provides options
      */
     disabledOptions?: boolean;
-    /** Custom render checkbox on menu item */
+    /**
+     * Custom render checkbox on menu item
+     */
     renderCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
 }
 declare const InputPickerContext: React.Context<InputPickerContextProps>;
+export declare function useTagContext(): InputPickerContextProps;
+export declare const TagProvider: React.Provider<InputPickerContextProps>;
 export default InputPickerContext;

package/esm/InputPicker/InputPickerContext.js

@@ -4,4 +4,8 @@ var InputPickerContext = /*#__PURE__*/React.createContext({
   tagProps: {},
   trigger: 'Enter'
 });
+export function useTagContext() {
+  return React.useContext(InputPickerContext);
+}
+export var TagProvider = InputPickerContext.Provider;
 export default InputPickerContext;

package/esm/InputPicker/hooks/useData.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { ItemDataType } from '../../@types/common';
+export interface InputItemDataType<T = number | string> extends ItemDataType<T> {
+    create?: boolean;
+}
+interface UseDataProps {
+    controlledData?: InputItemDataType[];
+    cacheData?: InputItemDataType[];
+    onChange?: (data: ItemDataType[]) => void;
+}
+declare function useData(props: UseDataProps): {
+    data: ItemDataType<string | number>[];
+    dataWithCache: ItemDataType<string | number>[];
+    newData: InputItemDataType<string | number>[];
+    setNewData: import("react").Dispatch<import("react").SetStateAction<InputItemDataType<string | number>[]>>;
+};
+export default useData;

package/esm/InputPicker/hooks/useData.js

@@ -0,0 +1,38 @@
+'use client';
+import { useState, useEffect, useMemo } from 'react';
+import shallowEqual from '../../utils/shallowEqual';
+function useData(props) {
+  var _props$controlledData = props.controlledData,
+    controlledData = _props$controlledData === void 0 ? [] : _props$controlledData,
+    _props$cacheData = props.cacheData,
+    cacheData = _props$cacheData === void 0 ? [] : _props$cacheData,
+    onChange = props.onChange;
+  var _useState = useState(controlledData),
+    uncontrolledData = _useState[0],
+    setData = _useState[1];
+  var _useState2 = useState([]),
+    newData = _useState2[0],
+    setNewData = _useState2[1];
+  var data = useMemo(function () {
+    return [].concat(uncontrolledData, newData);
+  }, [newData, uncontrolledData]);
+  var dataWithCache = useMemo(function () {
+    return [].concat(data, cacheData);
+  }, [data, cacheData]);
+
+  // Update the state when the data in props changes
+  useEffect(function () {
+    if (controlledData && !shallowEqual(controlledData, uncontrolledData)) {
+      setData(controlledData);
+      setNewData([]);
+      onChange === null || onChange === void 0 ? void 0 : onChange(controlledData);
+    }
+  }, [controlledData, uncontrolledData, onChange]);
+  return {
+    data: data,
+    dataWithCache: dataWithCache,
+    newData: newData,
+    setNewData: setNewData
+  };
+}
+export default useData;

package/esm/InputPicker/hooks/useInput.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { OverlayTriggerHandle } from '../../internals/Picker/PickerToggleTrigger';
+interface InputProps {
+    multi?: boolean;
+    triggerRef: React.RefObject<OverlayTriggerHandle>;
+}
+declare function useInput(props: InputProps): {
+    inputProps: {
+        inputStyle: {
+            maxWidth: number;
+        };
+        as: import("react").ForwardRefExoticComponent<import("../InputAutosize").InputAutosizeProps & import("react").RefAttributes<import("../InputAutosize").InputInstance>>;
+    } | {
+        as: string;
+        inputStyle?: undefined;
+    };
+    inputRef: import("react").MutableRefObject<any>;
+    focus: () => void;
+    blur: () => void;
+};
+export default useInput;

package/esm/InputPicker/hooks/useInput.js

@@ -0,0 +1,40 @@
+'use client';
+import { useRef, useCallback, useMemo } from 'react';
+import useMaxWidth from './useMaxWidth';
+import InputAutosize from '../InputAutosize';
+var INPUT_MARGIN_RIGHT = 60;
+function useInput(props) {
+  var multi = props.multi,
+    triggerRef = props.triggerRef;
+  var inputRef = useRef();
+  var maxWidth = useMaxWidth(triggerRef);
+  var getInput = useCallback(function () {
+    var _inputRef$current;
+    return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;
+  }, [multi]);
+  var focus = useCallback(function () {
+    var _getInput;
+    (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();
+  }, [getInput]);
+  var blur = useCallback(function () {
+    var _getInput2;
+    (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();
+  }, [getInput]);
+  var inputProps = useMemo(function () {
+    return multi ? {
+      inputStyle: {
+        maxWidth: maxWidth - INPUT_MARGIN_RIGHT
+      },
+      as: InputAutosize
+    } : {
+      as: 'input'
+    };
+  }, [maxWidth, multi]);
+  return {
+    inputProps: inputProps,
+    inputRef: inputRef,
+    focus: focus,
+    blur: blur
+  };
+}
+export default useInput;

package/esm/InputPicker/hooks/useMaxWidth.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { OverlayTriggerHandle } from '../../internals/Picker/PickerToggleTrigger';
+declare function useMaxWidth(triggerRef: React.RefObject<OverlayTriggerHandle>): number;
+export default useMaxWidth;

package/esm/InputPicker/hooks/useMaxWidth.js

@@ -0,0 +1,19 @@
+'use client';
+import { useState, useEffect } from 'react';
+import getWidth from 'dom-lib/getWidth';
+function useMaxWidth(triggerRef) {
+  var _useState = useState(100),
+    maxWidth = _useState[0],
+    setMaxWidth = _useState[1];
+  useEffect(function () {
+    var _triggerRef$current;
+    // In multiple selection, you need to set a maximum width for the input.
+    if ((_triggerRef$current = triggerRef.current) !== null && _triggerRef$current !== void 0 && _triggerRef$current.root) {
+      var _triggerRef$current2;
+      setMaxWidth(getWidth((_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.root));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return maxWidth;
+}
+export default useMaxWidth;

package/esm/InputPicker/index.d.ts

@@ -1,3 +1,4 @@
 import InputPicker from './InputPicker';
-export type { InputPickerProps, InputItemDataType } from './InputPicker';
+export type { InputItemDataType } from './hooks/useData';
+export type { InputPickerProps } from './InputPicker';
 export default InputPicker;

package/esm/InputPicker/utils.d.ts

@@ -0,0 +1 @@
+export declare const convertSize: (size?: string) => "lg" | "md" | "sm";

package/esm/InputPicker/utils.js

@@ -0,0 +1,12 @@
+'use client';
+export var convertSize = function convertSize(size) {
+  switch (size) {
+    case 'lg':
+      return 'lg';
+    case 'sm':
+    case 'xs':
+      return 'sm';
+    default:
+      return 'md';
+  }
+};