rsuite 5.59.3-alpha.1 → 5.60.0

package/Animation/styles/fade.less

@@ -5,6 +5,6 @@
 
   &.rs-anim-in {
     opacity: 1;
-    pointer-events: unset;
+    pointer-events: auto;
   }
 }

package/Animation/styles/index.css

@@ -343,7 +343,7 @@ tbody.rs-anim-collapse.rs-anim-in {
 }
 .rs-anim-fade.rs-anim-in {
   opacity: 1;
-  pointer-events: unset;
+  pointer-events: auto;
 }
 
 /*# sourceMappingURL=index.css.map */

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [5.60.0](https://github.com/rsuite/rsuite/compare/v5.59.2...v5.60.0) (2024-04-26)
+
+
+### Bug Fixes
+
+* **Fade:** fix Picker not working in Drawer without backdrop ([#3759](https://github.com/rsuite/rsuite/issues/3759)) ([930a321](https://github.com/rsuite/rsuite/commit/930a3212b58202f4d0bf05a8bb191195944d589c))
+* **TagPicker:** fix misalignment of large size tag with textbox ([#3755](https://github.com/rsuite/rsuite/issues/3755)) ([2bcd793](https://github.com/rsuite/rsuite/commit/2bcd793cd7cf1b181643125fe92f4ffb0e18f771))
+
+
+### Features
+
+* **Form:** add support for onSubmit and onReset ([#3750](https://github.com/rsuite/rsuite/issues/3750)) ([d9b747e](https://github.com/rsuite/rsuite/commit/d9b747e97f3aaaa1d0b047ab81150d2a01764ed1))
+* **TagPicker:** fix text flicker when entering ([#3758](https://github.com/rsuite/rsuite/issues/3758)) ([f7058d1](https://github.com/rsuite/rsuite/commit/f7058d1e9234e43c9f8d7884636a09d83f40fcb9))
+
+
+
 ## [5.59.2](https://github.com/rsuite/rsuite/compare/v5.59.1...v5.59.2) (2024-04-19)
 
 

package/TagInput/styles/index.css

@@ -3610,30 +3610,6 @@ textarea.rs-picker-search-input {
 .rs-plaintext .rs-tag {
   margin: 0;
 }
-.rs-picker-tag-lg .rs-picker-textbox {
-  padding-bottom: 6px;
-}
-.rs-picker-tag-lg .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 16px;
-  margin-top: 6px;
-  font-size: 16px;
-}
-.rs-picker-tag-lg .rs-picker-textbox input {
-  height: 20px;
-}
-.rs-picker-tag-lg .rs-picker-toggle {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-.rs-picker-tag-lg .rs-picker-textbox {
-  min-height: 40px;
-}
-.rs-picker-tag-lg .rs-picker-tag-list .rs-tag-lg {
-  margin-top: 6px;
-  margin-left: 6px;
-}
 .rs-picker-tag .rs-picker-textbox,
 .rs-picker-tag-md .rs-picker-textbox {
   padding-bottom: 5px;
@@ -3660,6 +3636,30 @@ textarea.rs-picker-search-input {
   margin-top: 5px;
   margin-left: 5px;
 }
+.rs-picker-tag-lg .rs-picker-textbox {
+  padding-bottom: 7px;
+}
+.rs-picker-tag-lg .rs-picker-textbox .rs-picker-search-input {
+  padding-left: 16px;
+  margin-top: 7px;
+  font-size: 16px;
+}
+.rs-picker-tag-lg .rs-picker-textbox input {
+  height: 20px;
+}
+.rs-picker-tag-lg .rs-picker-toggle {
+  padding-top: 9px;
+  padding-bottom: 9px;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.rs-picker-tag-lg .rs-picker-textbox {
+  min-height: 40px;
+}
+.rs-picker-tag-lg .rs-picker-tag-list .rs-tag-lg {
+  margin-top: 6px;
+  margin-left: 6px;
+}
 .rs-picker-tag-sm .rs-picker-textbox {
   padding-bottom: 2px;
 }

package/TagPicker/styles/index.css

@@ -3610,30 +3610,6 @@ textarea.rs-picker-search-input {
 .rs-plaintext .rs-tag {
   margin: 0;
 }
-.rs-picker-tag-lg .rs-picker-textbox {
-  padding-bottom: 6px;
-}
-.rs-picker-tag-lg .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 16px;
-  margin-top: 6px;
-  font-size: 16px;
-}
-.rs-picker-tag-lg .rs-picker-textbox input {
-  height: 20px;
-}
-.rs-picker-tag-lg .rs-picker-toggle {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-.rs-picker-tag-lg .rs-picker-textbox {
-  min-height: 40px;
-}
-.rs-picker-tag-lg .rs-picker-tag-list .rs-tag-lg {
-  margin-top: 6px;
-  margin-left: 6px;
-}
 .rs-picker-tag .rs-picker-textbox,
 .rs-picker-tag-md .rs-picker-textbox {
   padding-bottom: 5px;
@@ -3660,6 +3636,30 @@ textarea.rs-picker-search-input {
   margin-top: 5px;
   margin-left: 5px;
 }
+.rs-picker-tag-lg .rs-picker-textbox {
+  padding-bottom: 7px;
+}
+.rs-picker-tag-lg .rs-picker-textbox .rs-picker-search-input {
+  padding-left: 16px;
+  margin-top: 7px;
+  font-size: 16px;
+}
+.rs-picker-tag-lg .rs-picker-textbox input {
+  height: 20px;
+}
+.rs-picker-tag-lg .rs-picker-toggle {
+  padding-top: 9px;
+  padding-bottom: 9px;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.rs-picker-tag-lg .rs-picker-textbox {
+  min-height: 40px;
+}
+.rs-picker-tag-lg .rs-picker-tag-list .rs-tag-lg {
+  margin-top: 6px;
+  margin-left: 6px;
+}
 .rs-picker-tag-sm .rs-picker-textbox {
   padding-bottom: 2px;
 }

package/TagPicker/styles/index.less

@@ -67,16 +67,6 @@
 
 // Tag Picker Size
 // --------------------------------------------------
-.rs-picker-tag-lg {
-  .rs-tag-picker-size(@padding-y-lg - 1; @padding-x-lg; @font-size-large; @line-height-large);
-  .rs-picker-textbox {
-    min-height: 40px;
-  }
-  .rs-picker-tag-list .rs-tag-lg {
-    margin-top: 6px;
-    margin-left: 6px;
-  }
-}
 
 // Default size
 .rs-picker-tag,
@@ -88,6 +78,17 @@
   }
 }
 
+.rs-picker-tag-lg {
+  .rs-tag-picker-size(@padding-y-lg; @padding-x-lg; @font-size-large; @line-height-large);
+  .rs-picker-textbox {
+    min-height: 40px;
+  }
+  .rs-picker-tag-list .rs-tag-lg {
+    margin-top: 6px;
+    margin-left: 6px;
+  }
+}
+
 .rs-picker-tag-sm {
   .rs-tag-picker-size(@padding-y-sm; @padding-x-sm; @font-size-base; @line-height-base);
   .rs-picker-textbox {

package/cjs/Form/Form.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FormHTMLAttributes } from 'react';
 import { Schema } from 'schema-typed';
 import FormControl from '../FormControl';
 import FormControlLabel from '../FormControlLabel';
@@ -7,9 +7,9 @@ import FormGroup from '../FormGroup';
 import FormHelpText from '../FormHelpText';
 import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../@types/common';
 import { FormInstance } from './hooks/useFormRef';
-export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
-    [P in keyof T]?: errorMsgType;
-}> extends WithAsProps, Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onChange' | 'onSubmit' | 'onError'> {
+export interface FormProps<V = Record<string, any>, M = any, E = {
+    [P in keyof V]?: M;
+}> extends WithAsProps, Omit<FormHTMLAttributes<HTMLFormElement>, 'onChange' | 'onSubmit' | 'onError' | 'onReset'> {
     /**
      * Set the left and right columns of the layout of the elements within the form。
      *
@@ -23,11 +23,11 @@ export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
     /**
      * Current value of the input. Creates a controlled component
      */
-    formValue?: T | null;
+    formValue?: V | null;
     /**
      * Initial value
      */
-    formDefaultValue?: T | null;
+    formDefaultValue?: V | null;
     /**
      * Error message of form
      */
@@ -77,7 +77,7 @@ export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
     /**
      * Callback fired when data changing
      */
-    onChange?: (formValue: T, event?: React.SyntheticEvent) => void;
+    onChange?: (formValue: V, event?: React.SyntheticEvent) => void;
     /**
      * Callback fired when error checking
      */
@@ -87,9 +87,13 @@ export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
      */
     onCheck?: (formError: E) => void;
     /**
-     * Callback fired when form submit
+     * Callback fired when form submit，only when the form data is validated will trigger
      */
-    onSubmit?: (checkPassed: boolean, event: React.FormEvent<HTMLFormElement>) => void;
+    onSubmit?: (formValue: V | null, event?: React.FormEvent<HTMLFormElement>) => void;
+    /**
+     * Callback fired when form reset
+     */
+    onReset?: (formValue: V | null, event?: React.FormEvent<HTMLFormElement>) => void;
 }
 export interface FormComponent extends RsRefForwardingComponent<'form', FormProps & {
     ref?: React.Ref<FormInstance>;

package/cjs/Form/Form.js

@@ -21,6 +21,7 @@ var _useSchemaModel2 = _interopRequireDefault(require("./hooks/useSchemaModel"))
 var _useFormValidate2 = _interopRequireDefault(require("./hooks/useFormValidate"));
 var _useFormValue2 = _interopRequireDefault(require("./hooks/useFormValue"));
 var _useFormClassNames = _interopRequireDefault(require("./hooks/useFormClassNames"));
+var _useFormRef = _interopRequireDefault(require("./hooks/useFormRef"));
 var defaultSchema = (0, _schemaTyped.SchemaModel)({});
 
 /**
@@ -51,10 +52,11 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     children = props.children,
     disabled = props.disabled,
     onSubmit = props.onSubmit,
+    onReset = props.onReset,
     onCheck = props.onCheck,
     onError = props.onError,
     onChange = props.onChange,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["checkTrigger", "classPrefix", "errorFromContext", "formDefaultValue", "formValue", "formError", "fluid", "nestedField", "layout", "model", "readOnly", "plaintext", "className", "children", "disabled", "onSubmit", "onCheck", "onError", "onChange"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["checkTrigger", "classPrefix", "errorFromContext", "formDefaultValue", "formValue", "formError", "fluid", "nestedField", "layout", "model", "readOnly", "plaintext", "className", "children", "disabled", "onSubmit", "onReset", "onCheck", "onError", "onChange"]);
   var _useSchemaModel = (0, _useSchemaModel2.default)(formModel),
     getCombinedModel = _useSchemaModel.getCombinedModel,
     pushFieldRule = _useSchemaModel.pushFieldRule,
@@ -65,9 +67,9 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }),
     formValue = _useFormValue.formValue,
     onRemoveValue = _useFormValue.onRemoveValue,
-    setFieldValue = _useFormValue.setFieldValue;
+    setFieldValue = _useFormValue.setFieldValue,
+    resetFormValue = _useFormValue.resetFormValue;
   var formValidateProps = {
-    ref: ref,
     formValue: formValue,
     getCombinedModel: getCombinedModel,
     onCheck: onCheck,
@@ -79,7 +81,12 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setFieldError = _useFormValidate.setFieldError,
     onRemoveError = _useFormValidate.onRemoveError,
     check = _useFormValidate.check,
-    formRef = _useFormValidate.formRef;
+    checkAsync = _useFormValidate.checkAsync,
+    checkForField = _useFormValidate.checkForField,
+    checkForFieldAsync = _useFormValidate.checkForFieldAsync,
+    cleanErrors = _useFormValidate.cleanErrors,
+    resetErrors = _useFormValidate.resetErrors,
+    cleanErrorForField = _useFormValidate.cleanErrorForField;
   var classes = (0, _useFormClassNames.default)({
     classPrefix: classPrefix,
     className: className,
@@ -89,22 +96,58 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     plaintext: plaintext,
     disabled: disabled
   });
-  var removeFieldValue = (0, _utils.useEventCallback)(function (name) {
-    var formValue = onRemoveValue(name);
-    onChange === null || onChange === void 0 ? void 0 : onChange(formValue);
+  var submit = (0, _utils.useEventCallback)(function (event) {
+    // Check the form before submitting
+    if (check()) {
+      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formValue, event);
+    }
   });
-  var removeFieldError = (0, _utils.useEventCallback)(function (name) {
-    onRemoveError(name);
+  var reset = (0, _utils.useEventCallback)(function (event) {
+    resetErrors();
+    onReset === null || onReset === void 0 ? void 0 : onReset(resetFormValue(), event);
   });
   var handleSubmit = (0, _utils.useEventCallback)(function (event) {
     var _event$preventDefault, _event$stopPropagatio;
     event === null || event === void 0 ? void 0 : (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 ? void 0 : _event$preventDefault.call(event);
     event === null || event === void 0 ? void 0 : (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 ? void 0 : _event$stopPropagatio.call(event);
+
+    // Prevent submission when the form is disabled, readOnly, or plaintext
     if (disabled || readOnly || plaintext) {
       return;
     }
-    var checkResult = check();
-    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(checkResult, event);
+    submit();
+  });
+  var handleReset = (0, _utils.useEventCallback)(function (event) {
+    var _event$preventDefault2, _event$stopPropagatio2;
+    event === null || event === void 0 ? void 0 : (_event$preventDefault2 = event.preventDefault) === null || _event$preventDefault2 === void 0 ? void 0 : _event$preventDefault2.call(event);
+    event === null || event === void 0 ? void 0 : (_event$stopPropagatio2 = event.stopPropagation) === null || _event$stopPropagatio2 === void 0 ? void 0 : _event$stopPropagatio2.call(event);
+
+    // Prevent reset when the form is disabled, readOnly, or plaintext
+    if (disabled || readOnly || plaintext) {
+      return;
+    }
+    reset(event);
+  });
+  var imperativeMethods = {
+    check: check,
+    checkForField: checkForField,
+    checkAsync: checkAsync,
+    checkForFieldAsync: checkForFieldAsync,
+    cleanErrors: cleanErrors,
+    cleanErrorForField: cleanErrorForField,
+    reset: reset,
+    resetErrors: resetErrors,
+    submit: submit
+  };
+  var formRef = (0, _useFormRef.default)(ref, {
+    imperativeMethods: imperativeMethods
+  });
+  var removeFieldValue = (0, _utils.useEventCallback)(function (name) {
+    var formValue = onRemoveValue(name);
+    onChange === null || onChange === void 0 ? void 0 : onChange(formValue);
+  });
+  var removeFieldError = (0, _utils.useEventCallback)(function (name) {
+    onRemoveError(name);
   });
   var onFieldError = (0, _utils.useEventCallback)(function (name, checkResult) {
     setFieldError(name, checkResult);
@@ -136,6 +179,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement("form", (0, _extends2.default)({}, rest, {
     ref: formRef,
     onSubmit: handleSubmit,
+    onReset: handleReset,
     className: classes
   }), /*#__PURE__*/_react.default.createElement(_FormContext.FormProvider, {
     value: formContextValue

package/cjs/Form/FormContext.d.ts

@@ -3,8 +3,8 @@ import { TypeAttributes } from '../@types/common';
 import type { Schema, CheckResult } from 'schema-typed';
 import type { FieldRuleType } from './hooks/useSchemaModel';
 declare type RecordAny = Record<string, any>;
-interface TrulyFormContextValue<T = RecordAny, errorMsgType = any, E = {
-    [P in keyof T]?: errorMsgType;
+interface TrulyFormContextValue<T = RecordAny, M = any, E = {
+    [P in keyof T]?: M;
 }> {
     formError: E;
     nestedField: boolean;

package/cjs/Form/hooks/useFormRef.d.ts

@@ -31,6 +31,14 @@ export interface FormImperativeMethods<T = Record<string, any>, M = string, E =
      * All error messages are reset, and an initial value can be set
      */
     resetErrors: (formError?: E) => void;
+    /**
+     * Reset form data to initial value and clear all error messages
+     */
+    reset: () => void;
+    /**
+     * Submit form data and verify
+     */
+    submit: () => void;
 }
 export interface FormInstance<T = Record<string, any>, M = string, E = {
     [P in keyof T]?: M;
@@ -43,13 +51,7 @@ export interface FormInstance<T = Record<string, any>, M = string, E = {
 interface FormRefProps<T = Record<string, any>, M = string, E = {
     [P in keyof T]?: M;
 }> {
-    formError: E;
-    nestedField?: boolean;
-    setFormError: (formError: E) => void;
-    check: (callback?: (formError: E) => void) => boolean;
-    checkForField: (fieldName: keyof T, callback?: (checkResult: CheckResult<M>) => void) => boolean;
-    checkAsync: () => Promise<any>;
-    checkForFieldAsync: (fieldName: keyof T) => Promise<CheckResult>;
+    imperativeMethods: FormImperativeMethods<T, M, E>;
 }
 export default function useFormRef(ref: React.Ref<FormInstance>, props: FormRefProps): import("react").RefObject<HTMLFormElement>;
 export {};

package/cjs/Form/hooks/useFormRef.js

@@ -4,42 +4,15 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = useFormRef;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
-var _omit = _interopRequireDefault(require("lodash/omit"));
-var _useEventCallback = _interopRequireDefault(require("../../utils/useEventCallback"));
-var _utils = require("../../FormControl/utils");
 function useFormRef(ref, props) {
   var rootRef = (0, _react.useRef)(null);
-  var formError = props.formError,
-    setFormError = props.setFormError,
-    nestedField = props.nestedField,
-    check = props.check,
-    checkForField = props.checkForField,
-    checkAsync = props.checkAsync,
-    checkForFieldAsync = props.checkForFieldAsync;
-  var cleanErrors = (0, _useEventCallback.default)(function () {
-    setFormError({});
-  });
-  var resetErrors = (0, _useEventCallback.default)(function (formError) {
-    if (formError === void 0) {
-      formError = {};
-    }
-    setFormError(formError);
-  });
-  var cleanErrorForField = (0, _useEventCallback.default)(function (fieldName) {
-    setFormError((0, _omit.default)(formError, [nestedField ? (0, _utils.nameToPath)(fieldName) : fieldName]));
-  });
+  var imperativeMethods = props.imperativeMethods;
   (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      root: rootRef.current,
-      check: check,
-      checkForField: checkForField,
-      checkAsync: checkAsync,
-      checkForFieldAsync: checkForFieldAsync,
-      cleanErrors: cleanErrors,
-      cleanErrorForField: cleanErrorForField,
-      resetErrors: resetErrors
-    };
+    return (0, _extends2.default)({
+      root: rootRef.current
+    }, imperativeMethods);
   });
   return rootRef;
 }

package/cjs/Form/hooks/useFormValidate.d.ts

@@ -1,9 +1,6 @@
-/// <reference types="react" />
 /// <reference types="lodash" />
 import type { CheckResult } from 'schema-typed';
-import { FormInstance } from './useFormRef';
 export interface FormErrorProps {
-    ref: React.Ref<FormInstance>;
     formValue: any;
     getCombinedModel: () => any;
     onCheck?: (formError: any) => void;
@@ -11,9 +8,14 @@ export interface FormErrorProps {
     nestedField?: boolean;
 }
 export default function useFormValidate(formError: any, props: FormErrorProps): {
-    formRef: import("react").RefObject<HTMLFormElement>;
     formError: any;
     check: (...args: any[]) => any;
+    checkForField: (...args: any[]) => any;
+    checkAsync: (...args: any[]) => any;
+    checkForFieldAsync: (...args: any[]) => any;
+    cleanErrors: (...args: any[]) => any;
+    resetErrors: (...args: any[]) => any;
+    cleanErrorForField: (...args: any[]) => any;
     setFieldError: (fieldName: string, checkResult: string | CheckResult) => any;
     onRemoveError: (name: string) => import("lodash").Omit<any, string>;
 };

package/cjs/Form/hooks/useFormValidate.js

@@ -11,10 +11,8 @@ var _set = _interopRequireDefault(require("lodash/set"));
 var _utils = require("../../utils");
 var _utils2 = require("../../FormControl/utils");
 var _useEventCallback = _interopRequireDefault(require("../../utils/useEventCallback"));
-var _useFormRef = _interopRequireDefault(require("./useFormRef"));
 function useFormValidate(formError, props) {
-  var ref = props.ref,
-    formValue = props.formValue,
+  var formValue = props.formValue,
     getCombinedModel = props.getCombinedModel,
     onCheck = props.onCheck,
     onError = props.onError,
@@ -138,19 +136,27 @@ function useFormValidate(formError, props) {
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
     return nextFormError;
   }, [formError, nestedField, onCheck, onError, setFormError]);
-  var formRef = (0, _useFormRef.default)(ref, {
-    check: check,
-    checkForField: checkForField,
-    checkAsync: checkAsync,
-    checkForFieldAsync: checkForFieldAsync,
-    formError: formError,
-    setFormError: setFormError,
-    nestedField: nestedField
+  var cleanErrors = (0, _useEventCallback.default)(function () {
+    setFormError({});
+  });
+  var resetErrors = (0, _useEventCallback.default)(function (formError) {
+    if (formError === void 0) {
+      formError = {};
+    }
+    setFormError(formError);
+  });
+  var cleanErrorForField = (0, _useEventCallback.default)(function (fieldName) {
+    setFormError((0, _omit.default)(formError, [nestedField ? (0, _utils2.nameToPath)(fieldName) : fieldName]));
   });
   return {
-    formRef: formRef,
     formError: realFormError,
     check: check,
+    checkForField: checkForField,
+    checkAsync: checkAsync,
+    checkForFieldAsync: checkForFieldAsync,
+    cleanErrors: cleanErrors,
+    resetErrors: resetErrors,
+    cleanErrorForField: cleanErrorForField,
     setFieldError: setFieldError,
     onRemoveError: onRemoveError
   };

package/cjs/Form/hooks/useFormValue.d.ts

@@ -1,7 +1,14 @@
 /// <reference types="lodash" />
-export default function useFormValue(controlledValue: any, props: any): {
+declare type RecordAny = Record<string, any>;
+interface UseFormValueProps<V = RecordAny> {
+    formDefaultValue: V;
+    nestedField: boolean;
+}
+export default function useFormValue<V>(controlledValue: any, props: UseFormValueProps<V>): {
     formValue: any;
     setFormValue: (value: any) => void;
     setFieldValue: (fieldName: string, fieldValue: any) => any;
     onRemoveValue: (name: string) => import("lodash").Omit<any, string>;
+    resetFormValue: (nextValue?: V) => V;
 };
+export {};

package/cjs/Form/hooks/useFormValue.js

@@ -33,10 +33,16 @@ function useFormValue(controlledValue, props) {
     setFormValue(formValue);
     return formValue;
   }, [setFormValue]);
+  var resetFormValue = (0, _react.useCallback)(function (nextValue) {
+    var value = nextValue || formDefaultValue;
+    setFormValue(value);
+    return value;
+  }, [formDefaultValue, setFormValue]);
   return {
     formValue: formValue,
     setFormValue: setFormValue,
     setFieldValue: setFieldValue,
-    onRemoveValue: onRemoveValue
+    onRemoveValue: onRemoveValue,
+    resetFormValue: resetFormValue
   };
 }

package/cjs/InputPicker/InputAutosize.js

@@ -48,9 +48,9 @@ var useInputWidth = function useInputWidth(props, sizerRef, placeholderRef) {
     }
     var width;
     if (placeholder && !value && placeholderRef.current) {
-      width = Math.max(sizerRef.current.scrollWidth, placeholderRef.current.scrollWidth) + 2;
+      width = Math.max(sizerRef.current.scrollWidth, placeholderRef.current.scrollWidth) + 10;
     } else {
-      width = sizerRef.current.scrollWidth + 2;
+      width = sizerRef.current.scrollWidth + 10;
     }
     if (width < minWidth) {
       width = minWidth;

package/cjs/InputPicker/InputPicker.d.ts

@@ -1,24 +1,22 @@
 import React from 'react';
 import { PickerComponent, PickerToggleProps } from '../internals/Picker';
+import { type InputItemDataType } from './hooks/useData';
 import type { ItemDataType, FormControlPickerProps } from '../@types/common';
 import type { InputPickerLocale } from '../locales';
 import type { SelectProps } from '../SelectPicker';
-export interface InputItemDataType extends ItemDataType {
-    create?: boolean;
-}
 export declare type ValueType = any;
-export interface InputPickerProps<T = ValueType> extends FormControlPickerProps<T, InputPickerLocale, InputItemDataType>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
+export interface InputPickerProps<V = ValueType> extends FormControlPickerProps<V, InputPickerLocale, InputItemDataType>, SelectProps<V>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
     tabIndex?: number;
     /** Settings can create new options */
     creatable?: boolean;
     /** Option to cache value when searching asynchronously */
-    cacheData?: InputItemDataType[];
+    cacheData?: InputItemDataType<V>[];
     /** The `onBlur` attribute for the `input` element. */
     onBlur?: React.FocusEventHandler;
     /** The `onFocus` attribute for the `input` element. */
     onFocus?: React.FocusEventHandler;
     /** Called when the option is created */
-    onCreate?: (value: ValueType, item: ItemDataType, event: React.SyntheticEvent) => void;
+    onCreate?: (value: V, item: ItemDataType, event: React.SyntheticEvent) => void;
     /**
      * Customize whether to display "Create option" action with given textbox value
      *
@@ -27,7 +25,7 @@ export interface InputPickerProps<T = ValueType> extends FormControlPickerProps<
      * @param searchKeyword Value of the textbox
      * @param filteredData The items filtered by the searchKeyword
      */
-    shouldDisplayCreateOption?: (searchKeyword: string, filteredData: InputItemDataType[]) => boolean;
+    shouldDisplayCreateOption?: (searchKeyword: string, filteredData: InputItemDataType<V>[]) => boolean;
 }
 /**
  * Single item selector with text box input.