rsuite 5.59.3-alpha.1 → 5.60.1

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,30 @@
+## [5.60.1](https://github.com/rsuite/rsuite/compare/v5.60.0...v5.60.1) (2024-05-03)
+
+
+### Bug Fixes
+
+* **DateRangePicker:** fix not auto switching to the end calendar when only one calendar is displayed ([#3781](https://github.com/rsuite/rsuite/issues/3781)) ([5322f9c](https://github.com/rsuite/rsuite/commit/5322f9cc747750b865e8184dcab36609e906b274))
+* **DateRangePicker:** fix not updating time on calendar when typing to change time ([#3777](https://github.com/rsuite/rsuite/issues/3777)) ([d1a7350](https://github.com/rsuite/rsuite/commit/d1a73502908026ceb20b5f2f49709b4dd03f334a))
+* **toggle:** block pointer events when disabled ([#3774](https://github.com/rsuite/rsuite/issues/3774)) ([d833a0a](https://github.com/rsuite/rsuite/commit/d833a0ab1c759b568bba6d87d697687e3ca7cbed))
+* **Toggle:** fix the height problem of the switch element ([#3780](https://github.com/rsuite/rsuite/issues/3780)) ([ff1570c](https://github.com/rsuite/rsuite/commit/ff1570c7d8776f2a120f1c048237725597157143))
+
+
+
+# [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))
+* **TagPicker:** fix text flicker when entering ([#3758](https://github.com/rsuite/rsuite/issues/3758)) ([f7058d1](https://github.com/rsuite/rsuite/commit/f7058d1e9234e43c9f8d7884636a09d83f40fcb9))
+
+
+### Features
+
+* **Form:** add support for onSubmit and onReset ([#3750](https://github.com/rsuite/rsuite/issues/3750)) ([d9b747e](https://github.com/rsuite/rsuite/commit/d9b747e97f3aaaa1d0b047ab81150d2a01764ed1))
+
+
 ## [5.59.2](https://github.com/rsuite/rsuite/compare/v5.59.1...v5.59.2) (2024-04-19)
 
 

package/DateRangePicker/styles/index.css

@@ -4017,9 +4017,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-popup .rs-calendar-month-dropdown-list {
   width: 185px;
 }
-.rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
-  max-width: 255px;
-}
 .rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar-ranges {
   width: 190px;
 }
@@ -4058,6 +4055,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   bottom: -1px;
   border-bottom: 2px solid #3498ff;
   left: 0;
+  -webkit-transition: left 0.3s;
+  transition: left 0.3s;
 }
 .rs-picker-daterange-header.rs-picker-tab-active-end::after {
   left: 50%;

package/DateRangePicker/styles/index.less

@@ -62,11 +62,11 @@
     }
   }
 
-  .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
-    max-width: @date-range-picker-calendar-default-width;
-
-    &-ranges {
-      width: 190px;
+  .rs-picker-daterange-panel-show-one-calendar {
+    .rs-picker-toolbar {
+      &-ranges {
+        width: 190px;
+      }
     }
   }
 
@@ -105,6 +105,7 @@
       bottom: -1px;
       border-bottom: 2px solid #3498ff;
       left: 0;
+      transition: left 0.3s;
     }
   }
 

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/Toggle/styles/index.css

@@ -114,6 +114,7 @@
 }
 .rs-toggle {
   position: relative;
+  display: inline-block;
 }
 .rs-toggle .rs-toggle-loader {
   width: 18px;
@@ -239,7 +240,7 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
           box-shadow: inset 0 0 0 1px #fff;
           box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
-  cursor: not-allowed;
+  pointer-events: none;
 }
 .rs-toggle-checked .rs-toggle-presentation {
   background-color: #3498ff;

package/Toggle/styles/index.less

@@ -10,6 +10,7 @@
 // todo: Consider renaming as .rs-toggle
 .rs-toggle {
   position: relative;
+  display: inline-block;
 
   // Default size is middle.
   .toggle(md);
@@ -70,7 +71,7 @@
     background-color: var(--rs-toggle-disabled-bg);
     color: var(--rs-toggle-disabled-thumb);
     box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
-    cursor: not-allowed;
+    pointer-events: none;
   }
 
   // checked state

package/cjs/DateRangePicker/DateRangePicker.js

@@ -108,7 +108,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     prefix = _useClassNames.prefix;
   var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),
     locale = _useCustom.locale,
-    formatDate = _useCustom.formatDate;
+    formatDate = _useCustom.formatDate; // Default gap between two calendars, if `showOneCalendar` is set, the gap is 0
+  var calendarGap = showOneCalendar ? 0 : 1;
   var rangeFormatStr = "" + formatStr + character + formatStr;
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
     value = _useControlled[0],
@@ -135,7 +136,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   var _useState2 = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),
     selectedDates = _useState2[0],
     setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
-  var _useState3 = (0, _react.useState)(null),
+  var _useState3 = (0, _react.useState)(value),
     hoverDateRange = _useState3[0],
     setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.
   var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({
@@ -171,14 +172,14 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var nextValue = dateRange;
 
     // The time should remain the same when the dates in the date range are changed.
-    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime' && eventName !== 'shortcutSelection') {
+    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {
       var _startDate = (0, _dateUtils.copyTime)({
         from: getCalendarDatetime('start'),
         to: dateRange[0]
       });
       var _endDate = (0, _dateUtils.copyTime)({
         from: getCalendarDatetime('end'),
-        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, 1) : dateRange[1]
+        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, calendarGap) : dateRange[1]
       });
       nextValue = [_startDate, _endDate];
     } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {
@@ -188,7 +189,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var nextCalendarDate = (0, _utils2.getSafeCalendarDate)({
       value: nextValue,
       calendarKey: calendarKey,
-      allowAameMonth: onlyShowMonth
+      // When only the month is displayed and only one calendar is displayed,
+      // there is no need to add a month and two calendar panels are allowed to display the same month
+      allowSameMonth: onlyShowMonth || showOneCalendar
     });
     setCalendarDate(nextCalendarDate);
     if (onlyShowMonth && eventName === 'changeMonth') {
@@ -337,6 +340,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     } else {
       setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);
     }
+    if (isSelectedIdle) {
+      setActiveCalendarKey('end');
+    } else {
+      setActiveCalendarKey('start');
+    }
     setSelectedDates(nextSelectDates);
     setCalendarDateRange({
       dateRange: nextSelectDates,
@@ -408,7 +416,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (value && value.length) {
       var _startDate3 = value[0],
         endData = value[1];
-      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];
+      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, calendarGap) : endData];
     } else {
       // Reset the date on the calendar to the default date
       nextCalendarDate = (0, _utils2.getSafeCalendarDate)({
@@ -737,11 +745,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     format: formatStr,
     placeholder: placeholder ? placeholder : rangeFormatStr,
     disabled: disabled,
-    onChange: handleInputChange,
     readOnly: readOnly || !editable || loading,
     plaintext: plaintext,
-    onKeyDown: handleInputKeyDown,
-    htmlSize: getInputHtmlSize()
+    htmlSize: getInputHtmlSize(),
+    onChange: handleInputChange,
+    onKeyDown: handleInputKeyDown
   })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {
     loading: loading,
     caretAs: caretAs,

package/cjs/DateRangePicker/utils.d.ts

@@ -1,8 +1,8 @@
 import { DateRange } from './types';
-export declare function getSafeCalendarDate({ value, calendarKey, allowAameMonth }: {
+export declare function getSafeCalendarDate({ value, calendarKey, allowSameMonth }: {
     value: [] | [Date] | [Date, Date] | null;
     calendarKey?: 'start' | 'end';
-    allowAameMonth?: boolean;
+    allowSameMonth?: boolean;
 }): DateRange;
 export declare const isSameRange: (source: DateRange | null, dest: DateRange | null, format: string) => boolean;
 export declare const getMonthHoverRange: (date: Date) => DateRange;

package/cjs/DateRangePicker/utils.js

@@ -10,10 +10,10 @@ function getSafeCalendarDate(_ref) {
   var value = _ref.value,
     _ref$calendarKey = _ref.calendarKey,
     calendarKey = _ref$calendarKey === void 0 ? 'start' : _ref$calendarKey,
-    allowAameMonth = _ref.allowAameMonth;
+    allowSameMonth = _ref.allowSameMonth;
   // Update calendarDate if the value is not null
   value = (_value = value) !== null && _value !== void 0 ? _value : [];
-  var gap = allowAameMonth ? 0 : 1;
+  var gap = allowSameMonth ? 0 : 1;
   if (value[0] && value[1]) {
     var diffMonth = (0, _dateUtils.differenceInCalendarMonths)(value[1], value[0]);
     if (calendarKey === 'start') {

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;
 }