rsuite 5.50.0 → 5.51.0

package/esm/Form/Form.js

@@ -1,9 +1,10 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useMemo, useCallback, useImperativeHandle, useRef } from 'react';
+import React, { useMemo, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
+import set from 'lodash/set';
 import { SchemaModel } from 'schema-typed';
 import FormContext, { FormValueContext } from './FormContext';
 import FormControl from '../FormControl';
@@ -13,7 +14,7 @@ import FormGroup from '../FormGroup';
 import FormHelpText from '../FormHelpText';
 import { useFormClassNames } from './useFormClassNames';
 import useSchemaModel from './useSchemaModel';
-import { useControlled } from '../utils';
+import { useControlled, useEventCallback } from '../utils';
 /**
  * The `Form` component is a form interface for collecting and validating user input.
  * @see https://rsuitejs.com/components/form
@@ -30,6 +31,8 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     formValue = props.formValue,
     formError = props.formError,
     fluid = props.fluid,
+    _props$nestedField = props.nestedField,
+    nestedField = _props$nestedField === void 0 ? false : _props$nestedField,
     _props$layout = props.layout,
     layout = _props$layout === void 0 ? 'vertical' : _props$layout,
     _props$model = props.model,
@@ -43,7 +46,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onCheck = props.onCheck,
     onError = props.onError,
     onChange = props.onChange,
-    rest = _objectWithoutPropertiesLoose(props, ["checkTrigger", "classPrefix", "errorFromContext", "formDefaultValue", "formValue", "formError", "fluid", "layout", "model", "readOnly", "plaintext", "className", "children", "disabled", "onSubmit", "onCheck", "onError", "onChange"]);
+    rest = _objectWithoutPropertiesLoose(props, ["checkTrigger", "classPrefix", "errorFromContext", "formDefaultValue", "formValue", "formError", "fluid", "nestedField", "layout", "model", "readOnly", "plaintext", "className", "children", "disabled", "onSubmit", "onCheck", "onError", "onChange"]);
   var _useSchemaModel = useSchemaModel(formModel),
     getCombinedModel = _useSchemaModel.getCombinedModel,
     pushFieldRule = _useSchemaModel.pushFieldRule,
@@ -73,7 +76,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * The error message after verification is returned in the callback.
    * @param callback
    */
-  var check = useCallback(function (callback) {
+  var check = useEventCallback(function (callback) {
     var formValue = realFormValue || {};
     var formError = {};
     var errorCount = 0;
@@ -93,14 +96,14 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return false;
     }
     return true;
-  }, [realFormValue, getCombinedModel, setFormError, onCheck, onError]);
+  });
 
   /**
    * Check the data field
    * @param fieldName
    * @param callback
    */
-  var checkForField = useCallback(function (fieldName, callback) {
+  var checkForField = useEventCallback(function (fieldName, callback) {
     var _extends2;
     var formValue = realFormValue || {};
     var model = getCombinedModel();
@@ -113,12 +116,12 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onError === null || onError === void 0 ? void 0 : onError(formError);
     }
     return !checkResult.hasError;
-  }, [realFormValue, getCombinedModel, realFormError, setFormError, onCheck, onError]);
+  });
 
   /**
    * Check form data asynchronously and return a Promise
    */
-  var checkAsync = useCallback(function () {
+  var checkAsync = useEventCallback(function () {
     var formValue = realFormValue || {};
     var promises = [];
     var keys = [];
@@ -146,13 +149,13 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
         formError: formError
       };
     });
-  }, [realFormValue, getCombinedModel, onCheck, setFormError, onError]);
+  });
 
   /**
    * Asynchronously check form fields and return Promise
    * @param fieldName
    */
-  var checkForFieldAsync = useCallback(function (fieldName) {
+  var checkForFieldAsync = useEventCallback(function (fieldName) {
     var formValue = realFormValue || {};
     var model = getCombinedModel();
     return model.checkForFieldAsync(fieldName, formValue).then(function (checkResult) {
@@ -165,19 +168,19 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
       return checkResult;
     });
-  }, [realFormValue, getCombinedModel, realFormError, onCheck, setFormError, onError]);
-  var cleanErrors = useCallback(function () {
+  });
+  var cleanErrors = useEventCallback(function () {
     setFormError({});
-  }, [setFormError]);
-  var cleanErrorForField = useCallback(function (fieldName) {
+  });
+  var cleanErrorForField = useEventCallback(function (fieldName) {
     setFormError(omit(realFormError, [fieldName]));
-  }, [realFormError, setFormError]);
-  var resetErrors = useCallback(function (formError) {
+  });
+  var resetErrors = useEventCallback(function (formError) {
     if (formError === void 0) {
       formError = {};
     }
     setFormError(formError);
-  }, [setFormError]);
+  });
   useImperativeHandle(ref, function () {
     return {
       root: rootRef.current,
@@ -190,7 +193,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
       resetErrors: resetErrors
     };
   });
-  var removeFieldError = useCallback(function (name) {
+  var removeFieldError = useEventCallback(function (name) {
     /**
      * when this function is called when the children component is unmount, it's an old render frame
      * so use Ref to get future error
@@ -199,8 +202,8 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     realFormErrorRef.current = formError;
     setFormError(formError);
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
-  }, [onCheck, setFormError]);
-  var removeFieldValue = useCallback(function (name) {
+  });
+  var removeFieldValue = useEventCallback(function (name) {
     /**
      * when this function is called when the children component is unmount, it's an old render frame
      * so use Ref to get future value
@@ -209,8 +212,8 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     realFormValueRef.current = formValue;
     setFormValue(formValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(formValue);
-  }, [onChange, setFormValue]);
-  var handleSubmit = useCallback(function (event) {
+  });
+  var handleSubmit = useEventCallback(function (event) {
     if (disabled || readOnly || plaintext) {
       return;
     }
@@ -218,24 +221,29 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     event.stopPropagation();
     var checkStatus = check();
     onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(checkStatus, event);
-  }, [disabled, readOnly, plaintext, check, onSubmit]);
-  var handleFieldError = useCallback(function (name, errorMessage) {
+  });
+  var handleFieldError = useEventCallback(function (name, errorMessage) {
     var _extends4;
     var formError = _extends({}, realFormError, (_extends4 = {}, _extends4[name] = errorMessage, _extends4));
     setFormError(formError);
     onError === null || onError === void 0 ? void 0 : onError(formError);
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
-  }, [realFormError, setFormError, onError, onCheck]);
-  var handleFieldSuccess = useCallback(function (name) {
+  });
+  var handleFieldSuccess = useEventCallback(function (name) {
     removeFieldError(name);
-  }, [removeFieldError]);
-  var handleFieldChange = useCallback(function (name, value, event) {
+  });
+  var setFieldValue = function setFieldValue(formValue, fieldName, fieldValue) {
     var _extends5;
-    var formValue = realFormValue;
-    var nextFormValue = _extends({}, formValue, (_extends5 = {}, _extends5[name] = value, _extends5));
+    if (nestedField) {
+      return set(_extends({}, formValue), fieldName, fieldValue);
+    }
+    return _extends({}, formValue, (_extends5 = {}, _extends5[fieldName] = fieldValue, _extends5));
+  };
+  var handleFieldChange = useEventCallback(function (name, value, event) {
+    var nextFormValue = setFieldValue(realFormValue, name, value);
     setFormValue(nextFormValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);
-  }, [realFormValue, setFormValue, onChange]);
+  });
   var rootRef = useRef(null);
   var formContextValue = useMemo(function () {
     return {
@@ -246,6 +254,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
       plaintext: plaintext,
       disabled: disabled,
       formError: realFormError,
+      nestedField: nestedField,
       removeFieldValue: removeFieldValue,
       removeFieldError: removeFieldError,
       pushFieldRule: pushFieldRule,
@@ -254,7 +263,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onFieldError: handleFieldError,
       onFieldSuccess: handleFieldSuccess
     };
-  }, [getCombinedModel, checkTrigger, errorFromContext, readOnly, plaintext, disabled, realFormError, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
+  }, [getCombinedModel, checkTrigger, errorFromContext, readOnly, plaintext, disabled, realFormError, nestedField, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
   return /*#__PURE__*/React.createElement("form", _extends({}, rest, {
     ref: rootRef,
     onSubmit: handleSubmit,

package/esm/Form/FormContext.d.ts

@@ -7,6 +7,7 @@ interface TrulyFormContextValue<T = Record<string, any>, errorMsgType = any, E =
 }> {
     getCombinedModel: () => Schema;
     formError: E;
+    nestedField: boolean;
     removeFieldValue: (name: string) => void;
     removeFieldError: (name: string) => void;
     pushFieldRule: (name: string, fieldRule: FieldRuleType) => void;

package/esm/FormControl/FormControl.js

@@ -13,7 +13,7 @@ import FormErrorMessage from '../FormErrorMessage';
 import { useClassNames } from '../utils';
 import FormContext, { FormValueContext } from '../Form/FormContext';
 import { FormGroupContext } from '../FormGroup/FormGroup';
-import { useWillUnmount } from '../utils';
+import { useWillUnmount, useEventCallback } from '../utils';
 import useRegisterModel from './useRegisterModel';
 import Toggle from '../Toggle';
 
@@ -33,6 +33,7 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabledContext = _useContext.disabled,
     errorFromContext = _useContext.errorFromContext,
     formError = _useContext.formError,
+    nestedField = _useContext.nestedField,
     removeFieldValue = _useContext.removeFieldValue,
     removeFieldError = _useContext.removeFieldError,
     pushFieldRule = _useContext.pushFieldRule,
@@ -82,46 +83,67 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var trigger = checkTrigger || contextCheckTrigger;
   var formValue = useContext(FormValueContext);
-  var val = isUndefined(value) ? get(formValue, name) : value;
+  var getFieldValue = function getFieldValue(fieldName) {
+    if (!isUndefined(value)) {
+      return value;
+    }
+    return nestedField ? get(formValue, fieldName) : formValue === null || formValue === void 0 ? void 0 : formValue[name];
+  };
+  var setFieldValue = function setFieldValue(fieldName, fieldValue) {
+    var _extends2;
+    if (nestedField) {
+      return set(_extends({}, formValue), fieldName, fieldValue);
+    }
+    return _extends({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));
+  };
+  var getFieldError = function getFieldError(fieldName) {
+    if (nestedField) {
+      var _name = fieldName.includes('.') ? fieldName.replace('.', '.object.') + '.errorMessage' : fieldName;
+      return get(formError, _name);
+    }
+    return formError === null || formError === void 0 ? void 0 : formError[fieldName];
+  };
+  var fieldValue = getFieldValue(name);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
   var classes = withClassPrefix('wrapper');
-  var handleFieldChange = function handleFieldChange(value, event) {
+  var handleFieldChange = useEventCallback(function (value, event) {
     handleFieldCheck(value, trigger === 'change');
     onFieldChange === null || onFieldChange === void 0 ? void 0 : onFieldChange(name, value, event);
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  };
-  var handleFieldBlur = function handleFieldBlur(event) {
-    handleFieldCheck(val, trigger === 'blur');
+  });
+  var handleFieldBlur = useEventCallback(function (event) {
+    handleFieldCheck(fieldValue, trigger === 'blur');
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-  };
-  var handleFieldCheck = function handleFieldCheck(value, isCheckTrigger) {
+  });
+  var handleFieldCheck = useEventCallback(function (value, isCheckTrigger) {
+    var checkFieldName = nestedField ? name.split('.')[0] : name;
     var callbackEvents = function callbackEvents(checkResult) {
       // The relevant event is triggered only when the inspection is allowed.
       if (isCheckTrigger) {
         if (checkResult.hasError) {
-          onFieldError === null || onFieldError === void 0 ? void 0 : onFieldError(name, (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult);
+          onFieldError === null || onFieldError === void 0 ? void 0 : onFieldError(checkFieldName, (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult);
         } else {
-          onFieldSuccess === null || onFieldSuccess === void 0 ? void 0 : onFieldSuccess(name);
+          onFieldSuccess === null || onFieldSuccess === void 0 ? void 0 : onFieldSuccess(checkFieldName);
         }
       }
       return checkResult;
     };
-    var nextFormValue = set(formValue || {}, name, value);
+    var nextFormValue = setFieldValue(name, value);
     var model = getCombinedModel();
     if (checkAsync) {
-      return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(name, nextFormValue).then(function (checkResult) {
+      return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(checkFieldName, nextFormValue).then(function (checkResult) {
         return callbackEvents(checkResult);
       });
     }
-    return Promise.resolve(callbackEvents(model === null || model === void 0 ? void 0 : model.checkForField(name, nextFormValue)));
-  };
+    return Promise.resolve(callbackEvents(model === null || model === void 0 ? void 0 : model.checkForField(checkFieldName, nextFormValue)));
+  });
   var messageNode = null;
   if (!isUndefined(errorMessage)) {
     messageNode = errorMessage;
   } else if (errorFromContext) {
-    var fieldError = formError === null || formError === void 0 ? void 0 : formError[name];
+    var fieldError = getFieldError(name);
     if (typeof fieldError === 'string' || !(fieldError !== null && fieldError !== void 0 && fieldError.array) && !(fieldError !== null && fieldError !== void 0 && fieldError.object) && fieldError !== null && fieldError !== void 0 && fieldError.hasError) {
       messageNode = fieldError;
     }
@@ -135,7 +157,7 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
   if (AccepterComponent === Toggle) {
     valueKey = 'checked';
   }
-  var accepterProps = (_accepterProps = {}, _accepterProps[valueKey] = val === undefined ? defaultValue : val, _accepterProps);
+  var accepterProps = (_accepterProps = {}, _accepterProps[valueKey] = fieldValue === undefined ? defaultValue : fieldValue, _accepterProps);
   return /*#__PURE__*/React.createElement(Component, {
     className: classes,
     ref: ref,
@@ -154,7 +176,7 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onChange: handleFieldChange,
     onBlur: handleFieldBlur
   })), /*#__PURE__*/React.createElement(FormErrorMessage, {
-    id: controlId + "-error-message",
+    id: controlId ? controlId + "-error-message" : undefined,
     role: "alert",
     "aria-relevant": "all",
     show: !!messageNode,

package/esm/FormGroup/FormGroup.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames } from '../utils';
+import { useClassNames, useUniqueId } from '../utils';
 export var FormGroupContext = /*#__PURE__*/React.createContext({});
 
 /**
@@ -15,13 +15,14 @@ var FormGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'form-group' : _props$classPrefix,
-    controlId = props.controlId,
+    controlIdProp = props.controlId,
     className = props.className,
     rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "controlId", "className"]);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix());
+  var controlId = useUniqueId('rs-', controlIdProp);
   var contextValue = useMemo(function () {
     return {
       controlId: controlId

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';
@@ -19,11 +19,22 @@ import { filterNodesOfTree } from '../utils/treeUtils';
 import Plaintext from '../Plaintext';
 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, usePickerRef, 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.
  *
@@ -206,7 +217,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     (_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) {
@@ -464,7 +475,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     blurInput();
     setOpen(false);
   });
-  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;
@@ -476,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);
@@ -497,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)
@@ -520,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;
@@ -544,21 +557,20 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       items = items.sort(sort(false));
     }
     if (disabledOptions) {
-      return /*#__PURE__*/React.createElement(PickerOverlay, {
+      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: 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],
@@ -573,12 +585,12 @@ 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, {
+    return /*#__PURE__*/React.createElement(PickerPopup, {
       ref: mergeRefs(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
@@ -611,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
@@ -637,6 +649,8 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
   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",
@@ -644,7 +658,7 @@ 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,
@@ -653,7 +667,6 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onKeyDown: onPickerKeyDown,
     ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
     appearance: appearance,
     readOnly: readOnly,
     plaintext: plaintext,
@@ -667,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;