rsuite 5.49.0 → 5.51.0

package/esm/InputPicker/InputPicker.js

@@ -2,7 +2,7 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import React, { useState, useRef, useEffect, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import isUndefined from 'lodash/isUndefined';
@@ -17,13 +17,24 @@ import getWidth from 'dom-lib/getWidth';
 import shallowEqual from '../utils/shallowEqual';
 import { filterNodesOfTree } from '../utils/treeUtils';
 import Plaintext from '../Plaintext';
-import { createChainedFunction, tplTransform, useClassNames, useCustom, useControlled, mergeRefs, isOneOf, KEY_VALUES } from '../utils';
+import { createChainedFunction, tplTransform, useClassNames, useCustom, useControlled, useEventCallback, mergeRefs, isOneOf, KEY_VALUES } from '../utils';
 import { getDataGroupBy } from '../utils/getDataGroupBy';
-import { DropdownMenu, DropdownMenuItem, DropdownMenuCheckItem, PickerToggle, PickerOverlay, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { Listbox, ListItem, ListCheckItem, PickerToggle, PickerPopup, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePickerRef, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 import Tag from '../Tag';
 import InputAutosize from './InputAutosize';
-import InputSearch from './InputSearch';
+import TextBox from './TextBox';
 import InputPickerContext from './InputPickerContext';
+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.
  *
@@ -109,11 +120,13 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   if (groupBy === valueKey || groupBy === labelKey) {
     throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');
   }
-  var overlayRef = useRef(null);
-  var targetRef = useRef(null);
-  var triggerRef = useRef(null);
   var inputRef = useRef();
-  var listRef = useRef(null);
+  var _usePickerRef = usePickerRef(ref),
+    triggerRef = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    list = _usePickerRef.list;
   var _useCustom = useCustom(['Picker', 'InputPicker'], overrideLocale),
     locale = _useCustom.locale;
   var _useClassNames = useClassNames(classPrefix),
@@ -142,34 +155,34 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     value = _useControlled[0],
     setValue = _useControlled[1],
     isControlled = _useControlled[2];
-  var cloneValue = useCallback(function () {
+  var cloneValue = function cloneValue() {
     return multi ? clone(value) || [] : value;
-  }, [multi, value]);
-  var handleClose = useCallback(function () {
-    var _triggerRef$current, _targetRef$current, _targetRef$current$fo;
+  };
+  var handleClose = useEventCallback(function () {
+    var _triggerRef$current, _target$current, _target$current$focus;
     triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();
 
     // The focus is on the trigger button after closing
-    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$fo = _targetRef$current.focus) === null || _targetRef$current$fo === void 0 ? void 0 : _targetRef$current$fo.call(_targetRef$current);
-  }, []);
+    (_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);
+  });
 
   // 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 overlayRef.current;
+        return overlay.current;
       }
     }),
     focusItemValue = _useFocusItemValue.focusItemValue,
     setFocusItemValue = _useFocusItemValue.setFocusItemValue,
     onKeyDown = _useFocusItemValue.onKeyDown;
-  var handleSearchCallback = useCallback(function (searchKeyword, filteredData, event) {
+  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);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
-  }, [disabledOptions, setFocusItemValue, valueKey, onSearch]);
+  });
 
   // Use search keywords to filter options.
   var _useSearch = useSearch(getAllData(), {
@@ -195,14 +208,16 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchKeyword, value]);
-  var getDateItem = function getDateItem(value) {
+  var getDataItem = function getDataItem(value) {
     // Find active `MenuItem` by `value`
     var allData = getAllDataAndCache();
     var activeItem = allData.find(function (item) {
@@ -218,23 +233,23 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       itemNode: itemNode
     };
   };
-  var getInput = useCallback(function () {
+  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;
-  }, [inputRef, multi]);
-  var focusInput = useCallback(function () {
+  };
+  var focusInput = function focusInput() {
     var _getInput;
     return (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();
-  }, [getInput]);
-  var blurInput = useCallback(function () {
+  };
+  var blurInput = function blurInput() {
     var _getInput2;
     return (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();
-  }, [getInput]);
+  };
 
   /**
    * Convert the string of the newly created option into an object.
    */
-  var createOption = useCallback(function (value) {
+  var createOption = function createOption(value) {
     var _ref2;
     if (groupBy) {
       var _ref;
@@ -245,11 +260,11 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return _ref2 = {
       create: true
     }, _ref2[valueKey] = value, _ref2[labelKey] = value, _ref2;
-  }, [groupBy, valueKey, labelKey, locale]);
-  var handleChange = useCallback(function (value, event) {
+  };
+  var handleChange = useEventCallback(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange]);
-  var handleRemoveItemByTag = useCallback(function (tag, event) {
+  });
+  var handleRemoveItemByTag = useEventCallback(function (tag, event) {
     event.stopPropagation();
     var val = cloneValue();
     remove(val, function (itemVal) {
@@ -258,15 +273,15 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setValue(val);
     handleChange(val, event);
     onTagRemove === null || onTagRemove === void 0 ? void 0 : onTagRemove(tag, event);
-  }, [cloneValue, setValue, handleChange, onTagRemove]);
-  var handleSelect = useCallback(function (value, item, event) {
+  });
+  var handleSelect = useEventCallback(function (value, item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);
     if (creatable && item.create) {
       delete item.create;
       onCreate === null || onCreate === void 0 ? void 0 : onCreate(value, item, event);
       setNewData(newData.concat(item));
     }
-  }, [creatable, newData, onSelect, onCreate]);
+  });
 
   /**
    * Callback triggered by single selection
@@ -274,14 +289,14 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * @param item
    * @param event
    */
-  var handleSelectItem = function handleSelectItem(value, item, event) {
+  var handleSelectItem = useEventCallback(function (value, item, event) {
     setValue(value);
     setFocusItemValue(value);
     resetSearch();
     handleSelect(value, item, event);
     handleChange(value, event);
     handleClose();
-  };
+  });
 
   /**
    * Callback triggered by multiple selection
@@ -290,7 +305,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * @param event
    * @param checked
    */
-  var handleCheckTag = function handleCheckTag(nextItemValue, item, event, checked) {
+  var handleCheckTag = useEventCallback(function (nextItemValue, item, event, checked) {
     var val = cloneValue();
     if (checked) {
       val.push(nextItemValue);
@@ -305,8 +320,8 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     handleSelect(val, item, event);
     handleChange(val, event);
     focusInput();
-  };
-  var handleTagKeyPress = useCallback(function (event) {
+  });
+  var handleTagKeyPress = useEventCallback(function (event) {
     // When composing, ignore the keypress event.
     if (event.nativeEvent.isComposing) {
       return;
@@ -342,8 +357,8 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     resetSearch();
     handleSelect(val, focusItem, event);
     handleChange(val, event);
-  }, [cloneValue, getAllData, focusItemValue, disabledItemValues, disabledOptions, setValue, resetSearch, handleSelect, handleChange, valueKey, createOption]);
-  var handleMenuItemKeyPress = useCallback(function (event) {
+  });
+  var handleMenuItemKeyPress = useEventCallback(function (event) {
     if (!focusItemValue || !controlledData) {
       return;
     }
@@ -372,19 +387,13 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     handleChange(focusItemValue, event);
     handleClose();
-  }, [setValue, disabledItemValues, controlledData, focusItemValue, valueKey, searchKeyword, handleClose, resetSearch, createOption, getAllData, handleChange, handleSelect]);
-  usePublicMethods(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef
   });
 
   /**
    * Remove the last item, after pressing the back key on the keyboard.
    * @param event
    */
-  var removeLastItem = useCallback(function (event) {
+  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();
@@ -397,8 +406,8 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     val.pop();
     setValue(val);
     handleChange(val, event);
-  }, [setValue, focusInput, handleChange, cloneValue]);
-  var handleClean = useCallback(function (event) {
+  });
+  var handleClean = useEventCallback(function (event) {
     if (disabled || searchKeyword !== '') {
       return;
     }
@@ -411,14 +420,14 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       handleChange(null, event);
     }
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
-  }, [disabled, searchKeyword, setValue, setFocusItemValue, resetSearch, multi, onClean, handleChange]);
+  });
   var events = {
     onMenuPressBackspace: multi ? removeLastItem : handleClean,
     onMenuKeyDown: onKeyDown,
     onMenuPressEnter: undefined,
     onKeyDown: undefined
   };
-  var handleKeyPress = useCallback(function (event) {
+  var handleKeyPress = useEventCallback(function (event) {
     // When typing a space, create a tag.
     if (isOneOf('Space', trigger) && event.key === KEY_VALUES.SPACE) {
       handleTagKeyPress(event);
@@ -430,7 +439,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       handleTagKeyPress(event);
       event.preventDefault();
     }
-  }, [handleTagKeyPress, trigger]);
+  });
   if (multi) {
     if (isOneOf('Enter', trigger)) {
       events.onMenuPressEnter = handleTagKeyPress;
@@ -442,31 +451,31 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     events.onMenuPressEnter = handleMenuItemKeyPress;
   }
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    overlayRef: overlayRef
+    trigger: triggerRef,
+    target: target,
+    overlay: overlay
   }, events, rest));
-  var handleExited = useCallback(function () {
+  var handleExited = useEventCallback(function () {
     setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);
     resetSearch();
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [setFocusItemValue, resetSearch, onClose, value, multi]);
-  var handleFocus = useCallback(function () {
+  });
+  var handleFocus = useEventCallback(function () {
     if (!readOnly) {
       var _triggerRef$current4;
       setOpen(true);
       (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();
     }
-  }, [readOnly]);
-  var handleEnter = useCallback(function () {
+  });
+  var handleEnter = useEventCallback(function () {
     focusInput();
     setOpen(true);
-  }, [focusInput]);
-  var handleExit = useCallback(function () {
+  });
+  var handleExit = useEventCallback(function () {
     blurInput();
     setOpen(false);
-  }, [blurInput]);
-  var renderDropdownMenuItem = function renderDropdownMenuItem(label, item) {
+  });
+  var renderListItem = function renderListItem(label, item) {
     // 'Create option "{0}"' =>  Create option "xxxxx"
     var newLabel = item.create ? /*#__PURE__*/React.createElement("span", null, tplTransform(locale.createOption, label)) : label;
     return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;
@@ -478,7 +487,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         itemNode: null
       };
     }
-    var dataItem = getDateItem(value);
+    var dataItem = getDataItem(value);
     var itemNode = dataItem.itemNode;
     if (!isNil(value) && isFunction(renderValue)) {
       itemNode = renderValue(value, dataItem.activeItem, itemNode);
@@ -499,17 +508,19 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var tags = value || [];
     var items = [];
     var tagElements = tags.map(function (tag) {
-      var _getDateItem = getDateItem(tag),
-        isValid = _getDateItem.isValid,
-        itemNode = _getDateItem.itemNode,
-        activeItem = _getDateItem.activeItem;
+      var _getDataItem = getDataItem(tag),
+        isValid = _getDataItem.isValid,
+        itemNode = _getDataItem.itemNode,
+        activeItem = _getDataItem.activeItem;
       items.push(activeItem);
       if (!isValid) {
         return null;
       }
-      return /*#__PURE__*/React.createElement(Tag, _extends({}, tagRest, {
+      return /*#__PURE__*/React.createElement(Tag, _extends({
+        role: "option"
+      }, tagRest, {
         key: tag,
-        size: rest.size === 'lg' ? 'lg' : rest.size === 'xs' ? 'sm' : 'md',
+        size: convertSize(rest.size),
         closable: !disabled && closable && !readOnly && !plaintext,
         title: typeof itemNode === 'string' ? itemNode : undefined,
         onClose: createChainedFunction(handleRemoveItemByTag.bind(null, tag), onClose)
@@ -522,7 +533,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     return tagElements;
   };
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  var renderPopup = function renderPopup(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
@@ -546,21 +557,20 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       items = items.sort(sort(false));
     }
     if (disabledOptions) {
-      return /*#__PURE__*/React.createElement(PickerOverlay, {
-        ref: mergeRefs(overlayRef, speakerRef)
+      return /*#__PURE__*/React.createElement(PickerPopup, {
+        ref: mergeRefs(overlay, speakerRef)
       });
     }
-    var menu = items.length ? /*#__PURE__*/React.createElement(DropdownMenu, {
-      id: id ? id + "-listbox" : undefined,
+    var menu = items.length ? /*#__PURE__*/React.createElement(Listbox, {
       listProps: listProps,
-      listRef: listRef,
+      listRef: list,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
       classPrefix: menuClassPrefix,
-      dropdownMenuItemClassPrefix: multi ? undefined : menuClassPrefix + "-item",
-      dropdownMenuItemAs: multi ? DropdownMenuCheckItem : DropdownMenuItem,
-      dropdownMenuItemProps: {
+      listItemClassPrefix: multi ? undefined : menuClassPrefix + "-item",
+      listItemAs: multi ? ListCheckItem : ListItem,
+      listItemProps: {
         renderMenuItemCheckbox: renderMenuItemCheckbox
       },
       activeItemValues: multi ? value : [value],
@@ -575,13 +585,13 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any
       ,
       renderMenuGroup: renderMenuGroup,
-      renderMenuItem: renderDropdownMenuItem,
+      renderMenuItem: renderListItem,
       virtualized: virtualized
     }) : /*#__PURE__*/React.createElement("div", {
       className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["none"])))
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
-      ref: mergeRefs(overlayRef, speakerRef),
+    return /*#__PURE__*/React.createElement(PickerPopup, {
+      ref: mergeRefs(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
       style: styles,
@@ -613,7 +623,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     usedClassNamePropKeys = _usePickerClassName[1];
   var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["tag"])))] = multi, _merge[prefix(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["focused"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["disabled-options"])))] = disabledOptions, _merge));
   var searching = !!searchKeyword && open;
-  var displaySearchInput = searchable && !disabled && !rest.loading;
+  var editable = searchable && !disabled && !rest.loading;
   var inputProps = multi ? {
     inputStyle: {
       maxWidth: maxWidth - 63
@@ -634,11 +644,13 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     return /*#__PURE__*/React.createElement(Plaintext, _extends({
       localeKey: "notSelected",
-      ref: targetRef
+      ref: target
     }, plaintextProps), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);
   }
   var placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    id: id,
+    multiple: multi,
     pickerProps: pick(props, pickTriggerPropKeys),
     ref: triggerRef,
     trigger: "active",
@@ -646,19 +658,19 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onEntered: createChainedFunction(onEntered, onOpen),
     onExit: createChainedFunction(handleExit, onExit),
     onExited: createChainedFunction(handleExited, onExited),
-    speaker: renderDropdownMenu,
+    speaker: renderPopup,
     placement: placement
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,
     style: style,
     onClick: focusInput,
-    onKeyDown: onPickerKeyDown
+    onKeyDown: onPickerKeyDown,
+    ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
     appearance: appearance,
     readOnly: readOnly,
     plaintext: plaintext,
-    ref: targetRef,
+    ref: target,
     as: toggleAs,
     tabIndex: tabIndex,
     onClean: handleClean,
@@ -668,18 +680,22 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled: disabled,
     placement: placement,
     inputValue: value,
+    focusItemValue: focusItemValue,
     caret: !disabledOptions
-  }), searching || multi && hasValue ? null : itemNode || placeholderNode), !(!multi && disabled) && /*#__PURE__*/React.createElement("div", {
-    className: prefix(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["tag-wrapper"])))
-  }, tagElements, displaySearchInput && /*#__PURE__*/React.createElement(InputSearch, _extends({}, inputProps, {
-    tabIndex: -1,
+  }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/React.createElement(TextBox, {
+    showTagList: hasValue && multi,
+    tags: tagElements,
+    editable: editable,
     readOnly: readOnly,
+    disabled: disabled,
+    multiple: multi,
     onBlur: onBlur,
     onFocus: createChainedFunction(handleFocus, onFocus),
     inputRef: inputRef,
     onChange: handleSearch,
-    value: open ? searchKeyword : ''
-  })))));
+    inputValue: open ? searchKeyword : '',
+    inputProps: inputProps
+  })));
 });
 InputPicker.displayName = 'InputPicker';
 InputPicker.propTypes = _extends({}, listPickerPropTypes, {

package/esm/InputPicker/InputSearch.js

@@ -3,9 +3,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject;
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { TypeChecker, useClassNames } from '../utils';
+import React from 'react';
+import { useClassNames, useEventCallback } from '../utils';
 var InputSearch = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'input' : _props$as,
@@ -19,10 +18,10 @@ var InputSearch = /*#__PURE__*/React.forwardRef(function (props, ref) {
     readOnly = props.readOnly,
     onChange = props.onChange,
     rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "children", "className", "value", "inputRef", "style", "readOnly", "onChange"]);
-  var handleChange = useCallback(function (event) {
+  var handleChange = useEventCallback(function (event) {
     var _event$target;
     onChange === null || onChange === void 0 ? void 0 : onChange(event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
-  }, [onChange]);
+  });
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
@@ -41,14 +40,4 @@ var InputSearch = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })), children);
 });
 InputSearch.displayName = 'InputSearch';
-InputSearch.propTypes = {
-  classPrefix: PropTypes.string,
-  value: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  style: PropTypes.object,
-  inputRef: TypeChecker.refType,
-  as: PropTypes.elementType,
-  onChange: PropTypes.func
-};
 export default InputSearch;

package/esm/InputPicker/TagList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TagList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export default TagList;

package/esm/InputPicker/TagList.js

@@ -0,0 +1,23 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _templateObject;
+import React from 'react';
+import { useClassNames } from '../utils';
+import useCombobox from '../Picker/hooks/useCombobox';
+var TagList = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    rest = _objectWithoutPropertiesLoose(props, ["children"]);
+  var _useClassNames = useClassNames('picker'),
+    prefix = _useClassNames.prefix;
+  var _useCombobox = useCombobox(),
+    id = _useCombobox.id;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    role: "listbox",
+    id: id + "-describe",
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["tag-list"])))
+  }, rest), children);
+});
+export default TagList;

package/esm/InputPicker/TextBox.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { InputSearchProps } from './InputSearch';
+interface TextBoxProps {
+    tags?: React.ReactNode;
+    inputProps?: InputSearchProps;
+    readOnly?: boolean;
+    disabled?: boolean;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    inputValue?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    editable?: boolean;
+    multiple?: boolean;
+    showTagList?: boolean;
+}
+declare const TextBox: React.ForwardRefExoticComponent<TextBoxProps & React.RefAttributes<HTMLDivElement>>;
+export default TextBox;

package/esm/InputPicker/TextBox.js

@@ -0,0 +1,42 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _templateObject;
+import React from 'react';
+import TagList from './TagList';
+import { useClassNames } from '../utils';
+import InputSearch from './InputSearch';
+var TextBox = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var tags = props.tags,
+    inputProps = props.inputProps,
+    readOnly = props.readOnly,
+    disabled = props.disabled,
+    multiple = props.multiple,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    onChange = props.onChange,
+    inputValue = props.inputValue,
+    inputRef = props.inputRef,
+    editable = props.editable,
+    showTagList = props.showTagList,
+    rest = _objectWithoutPropertiesLoose(props, ["tags", "inputProps", "readOnly", "disabled", "multiple", "onBlur", "onFocus", "onChange", "inputValue", "inputRef", "editable", "showTagList"]);
+  var _useClassNames = useClassNames('picker'),
+    prefix = _useClassNames.prefix;
+  if (!multiple && disabled) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["textbox"]))),
+    ref: ref
+  }, rest), showTagList ? /*#__PURE__*/React.createElement(TagList, null, tags) : null, editable && /*#__PURE__*/React.createElement(InputSearch, _extends({}, inputProps, {
+    tabIndex: -1,
+    readOnly: readOnly,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    inputRef: inputRef,
+    onChange: onChange,
+    value: inputValue
+  })));
+});
+export default TextBox;