rsuite 5.59.2 → 5.60.0

package/cjs/InputPicker/InputPicker.js

@@ -6,7 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 exports.__esModule = true;
 exports.default = void 0;
 var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -18,7 +18,6 @@ var _clone = _interopRequireDefault(require("lodash/clone"));
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
-var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
 var _shallowEqual = _interopRequireDefault(require("../utils/shallowEqual"));
 var _treeUtils = require("../utils/treeUtils");
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
@@ -27,22 +26,13 @@ var _propTypes2 = require("../internals/propTypes");
 var _getDataGroupBy = require("../utils/getDataGroupBy");
 var _Picker = require("../internals/Picker");
 var _Tag = _interopRequireDefault(require("../Tag"));
-var _InputAutosize = _interopRequireDefault(require("./InputAutosize"));
 var _TextBox = _interopRequireDefault(require("./TextBox"));
-var _InputPickerContext = _interopRequireDefault(require("./InputPickerContext"));
+var _InputPickerContext = require("./InputPickerContext");
 var _Stack = _interopRequireDefault(require("../Stack"));
+var _useInput2 = _interopRequireDefault(require("./hooks/useInput"));
+var _useData2 = _interopRequireDefault(require("./hooks/useData"));
+var _utils2 = require("./utils");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var convertSize = function convertSize(size) {
-  switch (size) {
-    case 'lg':
-      return 'lg';
-    case 'sm':
-    case 'xs':
-      return 'sm';
-    default:
-      return 'md';
-  }
-};
 /**
  * Single item selector with text box input.
  *
@@ -73,10 +63,13 @@ var InputPicker = /*#__PURE__*/_react.default.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,
@@ -113,21 +106,17 @@ var InputPicker = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _react.useContext)(_InputPickerContext.default),
-    multi = _useContext.multi,
-    tagProps = _useContext.tagProps,
-    trigger = _useContext.trigger,
-    disabledOptions = _useContext.disabledOptions,
-    onTagRemove = _useContext.onTagRemove,
-    renderCheckbox = _useContext.renderCheckbox;
+    rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _InputPickerContext.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 = (0, _react.useRef)();
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     triggerRef = _usePickerRef.trigger,
     root = _usePickerRef.root,
@@ -139,29 +128,34 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
-  var _useState = (0, _react.useState)(controlledData),
-    uncontrolledData = _useState[0],
-    setData = _useState[1];
-  var _useState2 = (0, _react.useState)(100),
-    maxWidth = _useState2[0],
-    setMaxWidth = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
-    newData = _useState3[0],
-    setNewData = _useState3[1];
-  var _useState4 = (0, _react.useState)(defaultOpen),
-    uncontrolledOpen = _useState4[0],
-    setOpen = _useState4[1];
-  var open = (0, _isUndefined.default)(controlledOpen) ? uncontrolledOpen : controlledOpen;
-  var getAllData = (0, _react.useCallback)(function () {
-    return [].concat(uncontrolledData, newData);
-  }, [uncontrolledData, newData]);
-  var getAllDataAndCache = (0, _react.useCallback)(function () {
-    return [].concat(getAllData(), cacheData);
-  }, [getAllData, cacheData]);
-  var _useControlled = (0, _utils.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue),
-    value = _useControlled[0],
-    setValue = _useControlled[1],
-    isControlled = _useControlled[2];
+  var _useControlled = (0, _utils.useControlled)(controlledOpen, defaultOpen),
+    open = _useControlled[0],
+    setOpen = _useControlled[1];
+  var _useInput = (0, _useInput2.default)({
+      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 = (0, _useData2.default)({
+      controlledData: controlledData,
+      cacheData: cacheData,
+      onChange: handleDataChange
+    }),
+    data = _useData.data,
+    dataWithCache = _useData.dataWithCache,
+    newData = _useData.newData,
+    setNewData = _useData.setNewData;
+  var _useControlled2 = (0, _utils.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue),
+    value = _useControlled2[0],
+    setValue = _useControlled2[1],
+    isControlled = _useControlled2[2];
   var cloneValue = function cloneValue() {
     return multi ? (0, _clone.default)(value) || [] : value;
   };
@@ -172,62 +166,53 @@ var InputPicker = /*#__PURE__*/_react.default.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 = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {
-      data: getAllDataAndCache(),
-      valueKey: valueKey,
-      target: function target() {
-        return overlay.current;
-      }
-    }),
+  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, focusItemValueOptions),
     focusItemValue = _useFocusItemValue.focusItemValue,
     setFocusItemValue = _useFocusItemValue.setFocusItemValue,
     onKeyDown = _useFocusItemValue.onKeyDown;
-  var handleSearchCallback = (0, _utils.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 = (0, _utils.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 = (0, _Picker.useSearch)(getAllData(), {
-      labelKey: labelKey,
-      searchBy: searchBy,
-      callback: handleSearchCallback
-    }),
+  var _useSearch = (0, _Picker.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
   (0, _react.useEffect)(function () {
-    if (controlledData && !(0, _shallowEqual.default)(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]);
-  (0, _react.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((0, _getWidth.default)(triggerRef.current.root));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Update the position of the menu when the search keyword and value change
-  (0, _react.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 (0, _shallowEqual.default)(item[valueKey], value);
     });
     var itemNode = placeholder;
@@ -240,33 +225,20 @@ var InputPicker = /*#__PURE__*/_react.default.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 (0, _extends3.default)((_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 = (0, _utils.useEventCallback)(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
@@ -326,7 +298,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setFocusItemValue(nextItemValue);
     handleSelect(val, item, event);
     handleChange(val, event);
-    focusInput();
+    focus();
   });
   var handleTagKeyPress = (0, _utils.useEventCallback)(function (event) {
     // When composing, ignore the keypress event.
@@ -334,31 +306,36 @@ var InputPicker = /*#__PURE__*/_react.default.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 (0, _shallowEqual.default)(v, focusItemValue);
+      return (0, _shallowEqual.default)(v, newItemValue);
     })) {
-      val.push(focusItemValue);
+      val.push(newItemValue);
     } else if (!disabledOptions) {
       (0, _remove.default)(val, function (itemVal) {
-        return (0, _shallowEqual.default)(itemVal, focusItemValue);
+        return (0, _shallowEqual.default)(itemVal, newItemValue);
       });
     }
     var focusItem = data.find(function (item) {
-      return (0, _shallowEqual.default)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);
+      return (0, _shallowEqual.default)(item === null || item === void 0 ? void 0 : item[valueKey], newItemValue);
     });
     if (!focusItem) {
-      focusItem = createOption(focusItemValue);
+      focusItem = createOption(newItemValue);
     }
     setValue(val);
     resetSearch();
@@ -378,8 +355,7 @@ var InputPicker = /*#__PURE__*/_react.default.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 (0, _shallowEqual.default)(item[valueKey], focusItemValue);
     });
 
@@ -403,7 +379,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var removeLastItem = (0, _utils.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) {
@@ -457,7 +433,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   } else {
     events.onMenuPressEnter = handleMenuItemKeyPress;
   }
-  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
+  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.default)({
     trigger: triggerRef,
     target: target,
     overlay: overlay
@@ -466,19 +442,20 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);
     resetSearch();
   });
-  var handleFocus = (0, _utils.useEventCallback)(function () {
+  var handleFocus = (0, _utils.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 = (0, _utils.useEventCallback)(function () {
-    focusInput();
+    focus();
     setOpen(true);
   });
   var handleExit = (0, _utils.useEventCallback)(function () {
-    blurInput();
+    blur();
     setOpen(false);
   });
   var renderListItem = function renderListItem(label, item) {
@@ -522,11 +499,11 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       if (!isValid) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends3.default)({
         role: "option"
       }, tagRest, {
         key: tag,
-        size: convertSize(size),
+        size: (0, _utils2.convertSize)(size),
         closable: !disabled && closable && !readOnly && !plaintext,
         title: typeof itemNode === 'string' ? itemNode : undefined,
         onClose: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose)
@@ -545,11 +522,11 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       className = positionProps.className;
     var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';
     var classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));
-    var styles = (0, _extends2.default)({}, menuStyle, {
+    var styles = (0, _extends3.default)({}, menuStyle, {
       left: left,
       top: top
     });
-    var items = (0, _treeUtils.filterNodesOfTree)(getAllData(), checkShouldDisplay);
+    var items = (0, _treeUtils.filterNodesOfTree)(data, checkShouldDisplay);
     if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(function (item) {
       return item[valueKey] === searchKeyword;
     }))) {
@@ -588,8 +565,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       ,
       group: !(0, _isUndefined.default)(groupBy),
       groupBy: groupBy,
-      onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any
-      ,
+      onSelect: multi ? handleCheckTag : handleSelectItem,
       renderMenuGroup: renderMenuGroup,
       renderMenuItem: renderListItem,
       virtualized: virtualized
@@ -618,7 +594,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);
   var hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);
   var hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;
-  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
+  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {
       classPrefix: classPrefix,
       appearance: appearance,
       hasValue: hasValue,
@@ -630,14 +606,6 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["tag"])))] = multi, _merge[prefix((multi ? 'tag' : 'input') + "-" + size)] = size, _merge[prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["focused"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["disabled-options"])))] = disabledOptions, _merge));
   var searching = !!searchKeyword && open;
   var editable = searchable && !disabled && !rest.loading;
-  var inputProps = multi ? {
-    inputStyle: {
-      maxWidth: maxWidth - 63
-    },
-    as: _InputAutosize.default
-  } : {
-    as: 'input'
-  };
   if (plaintext) {
     var plaintextProps = {};
 
@@ -648,7 +616,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       plaintextProps.wrap = true;
       plaintextProps.childrenRenderMode = 'clone';
     }
-    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends3.default)({
       localeKey: "notSelected",
       ref: target
     }, plaintextProps), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);
@@ -669,10 +637,10 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
     style: style,
-    onClick: focusInput,
+    onClick: focus,
     onKeyDown: onPickerKeyDown,
     ref: root
-  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
+  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
     appearance: appearance,
     readOnly: readOnly,
     plaintext: plaintext,
@@ -691,21 +659,21 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     size: size
   }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {
     showTagList: hasValue && multi,
+    inputRef: inputRef,
+    inputValue: open ? searchKeyword : '',
+    inputProps: inputProps,
     tags: tagElements,
     editable: editable,
     readOnly: readOnly,
     disabled: disabled,
     multiple: multi,
     onBlur: onBlur,
-    onFocus: (0, _utils.createChainedFunction)(handleFocus, onFocus),
-    inputRef: inputRef,
-    onChange: handleSearch,
-    inputValue: open ? searchKeyword : '',
-    inputProps: inputProps
+    onFocus: handleFocus,
+    onChange: handleSearch
   })));
 });
 InputPicker.displayName = 'InputPicker';
-InputPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {
+InputPicker.propTypes = (0, _extends3.default)({}, _Picker.listPickerPropTypes, {
   locale: _propTypes.default.any,
   appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),
   cacheData: _propTypes.default.array,

package/cjs/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/cjs/InputPicker/InputPickerContext.js

@@ -3,11 +3,17 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = void 0;
+exports.useTagContext = useTagContext;
+exports.default = exports.TagProvider = void 0;
 var _react = _interopRequireDefault(require("react"));
 var InputPickerContext = /*#__PURE__*/_react.default.createContext({
   tagProps: {},
   trigger: 'Enter'
 });
+function useTagContext() {
+  return _react.default.useContext(InputPickerContext);
+}
+var TagProvider = InputPickerContext.Provider;
+exports.TagProvider = TagProvider;
 var _default = InputPickerContext;
 exports.default = _default;

package/cjs/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/cjs/InputPicker/hooks/useData.js

@@ -0,0 +1,44 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _shallowEqual = _interopRequireDefault(require("../../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 = (0, _react.useState)(controlledData),
+    uncontrolledData = _useState[0],
+    setData = _useState[1];
+  var _useState2 = (0, _react.useState)([]),
+    newData = _useState2[0],
+    setNewData = _useState2[1];
+  var data = (0, _react.useMemo)(function () {
+    return [].concat(uncontrolledData, newData);
+  }, [newData, uncontrolledData]);
+  var dataWithCache = (0, _react.useMemo)(function () {
+    return [].concat(data, cacheData);
+  }, [data, cacheData]);
+
+  // Update the state when the data in props changes
+  (0, _react.useEffect)(function () {
+    if (controlledData && !(0, _shallowEqual.default)(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
+  };
+}
+var _default = useData;
+exports.default = _default;

package/cjs/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;