rsuite 5.67.0 → 5.68.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# [5.68.0](https://github.com/rsuite/rsuite/compare/v5.67.0...v5.68.0) (2024-07-26)
+
+
+### Bug Fixes
+
+* **DateInput,DateRangeInput:** fix the date in the text box cannot be copied ([#3888](https://github.com/rsuite/rsuite/issues/3888)) ([1d95107](https://github.com/rsuite/rsuite/commit/1d95107d96ebe5bacb73c3fee8427efc59b1f673))
+* **Form:** fix `proxy` function in `schema-typed` not work in form ([#3863](https://github.com/rsuite/rsuite/issues/3863)) ([63c0e3a](https://github.com/rsuite/rsuite/commit/63c0e3a07a17eeb1158c75b49fb8fc3a65199e16))
+* **Stack:** fix the compatibility of spacing in Linux Firefox ([#3889](https://github.com/rsuite/rsuite/issues/3889)) ([44ed16f](https://github.com/rsuite/rsuite/commit/44ed16f7f1f41c7beda063a86588cbe9c52c6496))
+* **Whisper:** fix Whisper children not support string and other basic types ([#3893](https://github.com/rsuite/rsuite/issues/3893)) ([70fb61d](https://github.com/rsuite/rsuite/commit/70fb61da619ce0a94129eb6f02972b4ce16c5016))
+
+
+### Features
+
+* **Nav,Tabs:** add `pills` value to the appearance property ([#3890](https://github.com/rsuite/rsuite/issues/3890)) ([eae279f](https://github.com/rsuite/rsuite/commit/eae279fa5ede8c6ce2c3676585f1cc85c9644b8e))
+
+
+
 # [5.67.0](https://github.com/rsuite/rsuite/compare/v5.66.0...v5.67.0) (2024-07-19)
 
 

package/Nav/styles/index.css

@@ -70,6 +70,7 @@
   --rs-violet-800: #470c99;
   --rs-violet-900: #390085;
   --rs-text-primary: var(--rs-gray-800);
+  --rs-text-secondary: var(--rs-gray-600);
   --rs-text-disabled: var(--rs-gray-600);
   --rs-border-primary: var(--rs-gray-200);
   --rs-bg-card: var(--rs-gray-0);
@@ -119,6 +120,12 @@
   --rs-navs-tab-border: var(--rs-gray-300);
   --rs-navs-subtle-border: var(--rs-gray-50);
   --rs-navs-selected: var(--rs-primary-700);
+  --rs-navs-pills-bg: var(--rs-gray-100);
+  --rs-navs-pills-item-color: var(--rs-text-secondary);
+  --rs-navs-pills-item-active-bg: var(--rs-gray-0);
+  --rs-navs-pills-item-active-color: var(--rs-gray-900);
+  --rs-navs-pills-item-disabled-color: var(--rs-gray-400);
+  --rs-navs-pills-item-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
 }
 @supports not (color: rgb(from white r g b)) {
   :root,
@@ -200,6 +207,7 @@
   --rs-violet-800: #470c99;
   --rs-violet-900: #390085;
   --rs-text-primary: var(--rs-gray-50);
+  --rs-text-secondary: var(--rs-gray-200);
   --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
   --rs-bg-card: var(--rs-gray-800);
@@ -249,6 +257,11 @@
   --rs-navs-tab-border: var(--rs-gray-600);
   --rs-navs-subtle-border: var(--rs-gray-600);
   --rs-navs-selected: var(--rs-primary-500);
+  --rs-navs-pills-bg: var(--rs-gray-700);
+  --rs-navs-pills-item-color: var(--rs-text-secondary);
+  --rs-navs-pills-item-active-bg: var(--rs-gray-600);
+  --rs-navs-pills-item-active-color: var(--rs-gray-0);
+  --rs-navs-pills-item-disabled-color: var(--rs-gray-400);
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
@@ -329,6 +342,7 @@
   --rs-violet-800: #470c99;
   --rs-violet-900: #390085;
   --rs-text-primary: var(--rs-gray-50);
+  --rs-text-secondary: var(--rs-gray-200);
   --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-100);
   --rs-bg-card: var(--rs-gray-800);
@@ -381,6 +395,11 @@
   --rs-navs-tab-border: var(--rs-gray-600);
   --rs-navs-subtle-border: var(--rs-gray-600);
   --rs-navs-selected: var(--rs-primary-500);
+  --rs-navs-pills-bg: var(--rs-gray-700);
+  --rs-navs-pills-item-color: var(--rs-text-secondary);
+  --rs-navs-pills-item-active-bg: var(--rs-gray-600);
+  --rs-navs-pills-item-active-color: var(--rs-primary-500);
+  --rs-navs-pills-item-disabled-color: var(--rs-gray-400);
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-high-contrast {
@@ -1664,6 +1683,7 @@
   cursor: pointer;
   color: #343434;
   color: var(--rs-navs-text);
+  background: transparent;
   -webkit-transition: color 0.15s ease-out, background-color 0.15s ease-out;
   transition: color 0.15s ease-out, background-color 0.15s ease-out;
   overflow: hidden;
@@ -1749,6 +1769,9 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   vertical-align: top;
 }
 .rs-nav-horizontal .rs-nav-bar {
@@ -1889,6 +1912,51 @@
   right: auto;
   left: 0;
 }
+.rs-nav-pills {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  background-color: #f2f2f5;
+  background-color: var(--rs-navs-pills-bg);
+  border-radius: 6px;
+  padding: 4px;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+}
+.rs-nav-pills .rs-nav-item {
+  border-radius: 6px;
+  position: relative;
+  padding: 4px 12px;
+  color: #717273;
+  color: var(--rs-navs-pills-item-color);
+}
+.rs-nav-pills .rs-nav-item-active {
+  background-color: #fff;
+  background-color: var(--rs-navs-pills-item-active-bg);
+  color: #121212;
+  color: var(--rs-navs-pills-item-active-color);
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: var(--rs-navs-pills-item-shadow);
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+          box-shadow: var(--rs-navs-pills-item-shadow);
+}
+.rs-nav-pills .rs-nav-item-disabled {
+  color: #b6b7b8;
+  color: var(--rs-navs-pills-item-disabled-color);
+}
+.rs-nav-pills.rs-nav-vertical {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.rs-nav-pills.rs-nav-vertical .rs-nav-item {
+  padding: 6px 12px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
 .rs-nav-justified {
   display: -webkit-box;
   display: -ms-flexbox;

package/Nav/styles/index.less

@@ -32,6 +32,7 @@
   padding: 8px 12px;
   cursor: pointer;
   color: var(--rs-navs-text);
+  background: transparent;
   transition: @nav-item-transition;
   .ellipsis-basic();
   .safari-border-radius-overflow-hidden();
@@ -101,6 +102,7 @@
   > .rs-nav-item {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     vertical-align: top;
   }
 
@@ -300,6 +302,41 @@
   }
 }
 
+// Pills Nav
+.rs-nav-pills {
+  display: inline-flex;
+  background-color: var(--rs-navs-pills-bg);
+  border-radius: 6px;
+  padding: 4px;
+  width: max-content;
+
+  .rs-nav-item {
+    border-radius: 6px;
+    position: relative;
+    padding: 4px 12px;
+    color: var(--rs-navs-pills-item-color);
+
+    &-active {
+      background-color: var(--rs-navs-pills-item-active-bg);
+      color: var(--rs-navs-pills-item-active-color);
+      box-shadow: var(--rs-navs-pills-item-shadow);
+    }
+
+    &-disabled {
+      color: var(--rs-navs-pills-item-disabled-color);
+    }
+  }
+
+  &.rs-nav-vertical {
+    flex-direction: column;
+
+    .rs-nav-item {
+      padding: 6px 12px;
+      justify-content: center;
+    }
+  }
+}
+
 // Justified
 .rs-nav-justified {
   display: flex;

package/Tabs/styles/index.css

@@ -70,6 +70,7 @@
   --rs-violet-800: #470c99;
   --rs-violet-900: #390085;
   --rs-text-primary: var(--rs-gray-800);
+  --rs-text-secondary: var(--rs-gray-600);
   --rs-text-disabled: var(--rs-gray-600);
   --rs-border-primary: var(--rs-gray-200);
   --rs-bg-card: var(--rs-gray-0);
@@ -119,6 +120,12 @@
   --rs-navs-tab-border: var(--rs-gray-300);
   --rs-navs-subtle-border: var(--rs-gray-50);
   --rs-navs-selected: var(--rs-primary-700);
+  --rs-navs-pills-bg: var(--rs-gray-100);
+  --rs-navs-pills-item-color: var(--rs-text-secondary);
+  --rs-navs-pills-item-active-bg: var(--rs-gray-0);
+  --rs-navs-pills-item-active-color: var(--rs-gray-900);
+  --rs-navs-pills-item-disabled-color: var(--rs-gray-400);
+  --rs-navs-pills-item-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
 }
 @supports not (color: rgb(from white r g b)) {
   :root,
@@ -200,6 +207,7 @@
   --rs-violet-800: #470c99;
   --rs-violet-900: #390085;
   --rs-text-primary: var(--rs-gray-50);
+  --rs-text-secondary: var(--rs-gray-200);
   --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
   --rs-bg-card: var(--rs-gray-800);
@@ -249,6 +257,11 @@
   --rs-navs-tab-border: var(--rs-gray-600);
   --rs-navs-subtle-border: var(--rs-gray-600);
   --rs-navs-selected: var(--rs-primary-500);
+  --rs-navs-pills-bg: var(--rs-gray-700);
+  --rs-navs-pills-item-color: var(--rs-text-secondary);
+  --rs-navs-pills-item-active-bg: var(--rs-gray-600);
+  --rs-navs-pills-item-active-color: var(--rs-gray-0);
+  --rs-navs-pills-item-disabled-color: var(--rs-gray-400);
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
@@ -329,6 +342,7 @@
   --rs-violet-800: #470c99;
   --rs-violet-900: #390085;
   --rs-text-primary: var(--rs-gray-50);
+  --rs-text-secondary: var(--rs-gray-200);
   --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-100);
   --rs-bg-card: var(--rs-gray-800);
@@ -381,6 +395,11 @@
   --rs-navs-tab-border: var(--rs-gray-600);
   --rs-navs-subtle-border: var(--rs-gray-600);
   --rs-navs-selected: var(--rs-primary-500);
+  --rs-navs-pills-bg: var(--rs-gray-700);
+  --rs-navs-pills-item-color: var(--rs-text-secondary);
+  --rs-navs-pills-item-active-bg: var(--rs-gray-600);
+  --rs-navs-pills-item-active-color: var(--rs-primary-500);
+  --rs-navs-pills-item-disabled-color: var(--rs-gray-400);
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-high-contrast {
@@ -1664,6 +1683,7 @@
   cursor: pointer;
   color: #343434;
   color: var(--rs-navs-text);
+  background: transparent;
   -webkit-transition: color 0.15s ease-out, background-color 0.15s ease-out;
   transition: color 0.15s ease-out, background-color 0.15s ease-out;
   overflow: hidden;
@@ -1749,6 +1769,9 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   vertical-align: top;
 }
 .rs-nav-horizontal .rs-nav-bar {
@@ -1889,6 +1912,51 @@
   right: auto;
   left: 0;
 }
+.rs-nav-pills {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  background-color: #f2f2f5;
+  background-color: var(--rs-navs-pills-bg);
+  border-radius: 6px;
+  padding: 4px;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+}
+.rs-nav-pills .rs-nav-item {
+  border-radius: 6px;
+  position: relative;
+  padding: 4px 12px;
+  color: #717273;
+  color: var(--rs-navs-pills-item-color);
+}
+.rs-nav-pills .rs-nav-item-active {
+  background-color: #fff;
+  background-color: var(--rs-navs-pills-item-active-bg);
+  color: #121212;
+  color: var(--rs-navs-pills-item-active-color);
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: var(--rs-navs-pills-item-shadow);
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+          box-shadow: var(--rs-navs-pills-item-shadow);
+}
+.rs-nav-pills .rs-nav-item-disabled {
+  color: #b6b7b8;
+  color: var(--rs-navs-pills-item-disabled-color);
+}
+.rs-nav-pills.rs-nav-vertical {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.rs-nav-pills.rs-nav-vertical .rs-nav-item {
+  padding: 6px 12px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
 .rs-nav-justified {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1931,9 +1999,6 @@
       -ms-flex: 1;
           flex: 1;
 }
-.rs-tabs .rs-nav-item {
-  background: none;
-}
 .rs-tabs .rs-nav-vertical {
   display: -webkit-box;
   display: -ms-flexbox;

package/Tabs/styles/index.less

@@ -17,10 +17,6 @@
     }
   }
 
-  .rs-nav-item {
-    background: none;
-  }
-
   .rs-nav-vertical {
     display: flex;
     flex-direction: column;

package/cjs/DateInput/DateInput.js

@@ -11,13 +11,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
+var _date = require("../internals/utils/date");
 var _utils2 = require("./utils");
 var _useDateInputState2 = _interopRequireDefault(require("./hooks/useDateInputState"));
 var _useKeyboardInputEvent = _interopRequireDefault(require("./hooks/useKeyboardInputEvent"));
 var _useIsFocused2 = _interopRequireDefault(require("./hooks/useIsFocused"));
 var _useFieldCursor2 = _interopRequireDefault(require("./hooks/useFieldCursor"));
 var _useSelectedState2 = _interopRequireDefault(require("./hooks/useSelectedState"));
-var _excluded = ["format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus"];
+var _excluded = ["format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus", "onPaste"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -35,13 +36,15 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onKeyDown = props.onKeyDown,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
+    onPaste = props.onPaste,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   var inputRef = (0, _react.useRef)();
   var _useSelectedState = (0, _useSelectedState2.default)(),
     selectedState = _useSelectedState.selectedState,
     setSelectedState = _useSelectedState.setSelectedState;
   var _useCustom = (0, _hooks.useCustom)('Calendar'),
-    locale = _useCustom.locale;
+    locale = _useCustom.locale,
+    parseDate = _useCustom.parseDate;
   var dateLocale = locale.dateLocale;
   var _useControlled = (0, _hooks.useControlled)(valueProp, defaultValue),
     value = _useControlled[0],
@@ -56,6 +59,7 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     dateField = _useDateInputState.dateField,
     setDateOffset = _useDateInputState.setDateOffset,
     setDateField = _useDateInputState.setDateField,
+    setNewDate = _useDateInputState.setNewDate,
     getDateField = _useDateInputState.getDateField,
     toDateString = _useDateInputState.toDateString,
     isEmptyValue = _useDateInputState.isEmptyValue;
@@ -169,6 +173,17 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       reset();
     }
   });
+  var handlePaste = (0, _hooks.useEventCallback)(function (event) {
+    var _event$clipboardData;
+    event.preventDefault();
+    var pasteText = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData('text');
+    var nextDate = parseDate(pasteText, formatStr);
+    if ((0, _date.isValid)(nextDate)) {
+      handleChange(nextDate, event);
+      setNewDate(nextDate);
+    }
+    onPaste === null || onPaste === void 0 ? void 0 : onPaste(event);
+  });
   var onKeyboardInput = (0, _useKeyboardInputEvent.default)({
     onSegmentChange: onSegmentChange,
     onSegmentValueChange: onSegmentValueChange,
@@ -196,6 +211,7 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ref: (0, _utils.mergeRefs)(inputRef, ref),
     onKeyDown: onKeyboardInput,
     onClick: handleClick,
+    onPaste: handlePaste,
     value: renderedValue,
     placeholder: placeholder || formatStr
   }, focusEventProps, rest));

package/cjs/DateInput/hooks/useDateInputState.d.ts

@@ -131,6 +131,7 @@ export declare function useDateInputState({ formatStr, locale, date, isControlle
     };
     setDateOffset: (pattern: string, offset: number, callback?: ((newDate: Date | null) => void) | undefined) => void;
     setDateField: (pattern: string, value: number | null, callback?: ((newDate: Date | null) => void) | undefined) => void;
+    setNewDate: (value: Date | null) => void;
     getDateField: (pattern: string) => {
         name: any;
         value: any;

package/cjs/DateInput/hooks/useDateInputState.js

@@ -101,25 +101,26 @@ function useDateInputState(_ref) {
     // if date is not valid, return uncontrolled date string
     return toDateString();
   };
+  var setNewDate = (0, _react.useCallback)(function (value) {
+    dispatch({
+      type: 'setNewDate',
+      value: value
+    });
+  }, [dispatch]);
   (0, _react.useEffect)(function () {
     if (isControlledDate) {
       if (date && (0, _date.isValid)(date)) {
-        dispatch({
-          type: 'setNewDate',
-          value: date
-        });
+        setNewDate(date);
       } else if (date === null) {
-        dispatch({
-          type: 'setNewDate',
-          value: null
-        });
+        setNewDate(null);
       }
     }
-  }, [date, dispatch, isControlledDate]);
+  }, [date, dispatch, isControlledDate, setNewDate]);
   return {
     dateField: dateField,
     setDateOffset: setDateOffset,
     setDateField: setDateField,
+    setNewDate: setNewDate,
     getDateField: getDateField,
     toDateString: isControlledDate ? toControlledDateString : toDateString,
     isEmptyValue: isEmptyValue

package/cjs/DateInput/hooks/useKeyboardInputEvent.js

@@ -33,6 +33,11 @@ function useKeyboardInputEvent(_ref) {
         onSegmentValueChangeWithNumericKeys === null || onSegmentValueChangeWithNumericKeys === void 0 ? void 0 : onSegmentValueChangeWithNumericKeys(event);
         event.preventDefault();
       case (_key$match2 = key.match(/[a-z]/)) === null || _key$match2 === void 0 ? void 0 : _key$match2[0]:
+        // Determine whether the Ctrl or Command key is pressed, does not affect user copy and paste
+        if (event.ctrlKey || event.metaKey) {
+          break;
+        }
+
         // Prevent letters from being entered
         event.preventDefault();
         break;

package/cjs/DateRangeInput/DateRangeInput.js

@@ -9,11 +9,12 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Input = _interopRequireDefault(require("../Input"));
+var _date = require("../internals/utils/date");
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _DateInput = require("../DateInput");
 var _utils2 = require("./utils");
-var _excluded = ["className", "classPrefix", "character", "format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus"];
+var _excluded = ["className", "classPrefix", "character", "format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus", "onPaste"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -37,6 +38,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     onKeyDown = props.onKeyDown,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
+    onPaste = props.onPaste,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
@@ -47,7 +49,8 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     selectedState = _useSelectedState.selectedState,
     setSelectedState = _useSelectedState.setSelectedState;
   var _useCustom = (0, _hooks.useCustom)('Calendar'),
-    locale = _useCustom.locale;
+    locale = _useCustom.locale,
+    parseDate = _useCustom.parseDate;
   var rangeFormatStr = "" + formatStr + character + formatStr;
   var dateLocale = locale.dateLocale;
   var _useControlled = (0, _hooks.useControlled)(valueProp, defaultValue),
@@ -218,6 +221,24 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       reset();
     }
   });
+  var handlePaste = (0, _hooks.useEventCallback)(function (event) {
+    var _event$clipboardData;
+    event.preventDefault();
+    var pasteText = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData('text');
+    var _ref = pasteText.split(character).map(function (date) {
+        return parseDate(date, formatStr);
+      }),
+      start = _ref[0],
+      end = _ref[1];
+    if ((0, _date.isValid)(start) && (0, _date.isValid)(end)) {
+      var nextValue = [start, end];
+      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+      setValue(nextValue);
+      startDateState.setNewDate(start);
+      endDateState.setNewDate(end);
+    }
+    onPaste === null || onPaste === void 0 ? void 0 : onPaste(event);
+  });
   var onKeyboardInput = (0, _DateInput.useKeyboardInputEvent)({
     onSegmentChange: onSegmentChange,
     onSegmentValueChange: onSegmentValueChange,
@@ -234,6 +255,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     ref: (0, _utils.mergeRefs)(inputRef, ref),
     onKeyDown: onKeyboardInput,
     onClick: handleClick,
+    onPaste: handlePaste,
     value: renderedValue,
     placeholder: placeholder || rangeFormatStr
   }, focusEventProps, rest));

package/cjs/Form/Form.js

@@ -79,12 +79,13 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   };
   var _useFormValidate = (0, _useFormValidate2.default)(controlledFormError, formValidateProps),
     formError = _useFormValidate.formError,
-    setFieldError = _useFormValidate.setFieldError,
     onRemoveError = _useFormValidate.onRemoveError,
     check = _useFormValidate.check,
     checkAsync = _useFormValidate.checkAsync,
     checkForField = _useFormValidate.checkForField,
+    checkFieldForNextValue = _useFormValidate.checkFieldForNextValue,
     checkForFieldAsync = _useFormValidate.checkForFieldAsync,
+    checkFieldAsyncForNextValue = _useFormValidate.checkFieldAsyncForNextValue,
     cleanErrors = _useFormValidate.cleanErrors,
     resetErrors = _useFormValidate.resetErrors,
     cleanErrorForField = _useFormValidate.cleanErrorForField;
@@ -150,12 +151,6 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var removeFieldError = (0, _hooks.useEventCallback)(function (name) {
     onRemoveError(name);
   });
-  var onFieldError = (0, _hooks.useEventCallback)(function (name, checkResult) {
-    setFieldError(name, checkResult);
-  });
-  var onFieldSuccess = (0, _hooks.useEventCallback)(function (name) {
-    removeFieldError(name);
-  });
   var onFieldChange = (0, _hooks.useEventCallback)(function (name, value, event) {
     var nextFormValue = setFieldValue(name, value);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);
@@ -169,13 +164,12 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     formError: formError,
     nestedField: nestedField,
     pushFieldRule: pushFieldRule,
-    getCombinedModel: getCombinedModel,
     removeFieldValue: removeFieldValue,
     removeFieldError: removeFieldError,
     removeFieldRule: removeFieldRule,
-    onFieldSuccess: onFieldSuccess,
     onFieldChange: onFieldChange,
-    onFieldError: onFieldError
+    checkFieldForNextValue: checkFieldForNextValue,
+    checkFieldAsyncForNextValue: checkFieldAsyncForNextValue
   };
   return /*#__PURE__*/_react.default.createElement("form", (0, _extends2.default)({}, rest, {
     ref: formRef,

package/cjs/Form/FormContext.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { TypeAttributes } from '../internals/types';
-import type { Schema, CheckResult } from 'schema-typed';
 import type { FieldRuleType } from './hooks/useSchemaModel';
 type RecordAny = Record<string, any>;
 interface TrulyFormContextValue<T = RecordAny, M = any, E = {
@@ -8,14 +7,13 @@ interface TrulyFormContextValue<T = RecordAny, M = any, E = {
 }> {
     formError: E;
     nestedField: boolean;
-    getCombinedModel: () => Schema;
     removeFieldValue: (name: string) => void;
     removeFieldError: (name: string) => void;
     removeFieldRule: (name: string) => void;
     pushFieldRule: (name: string, fieldRule: FieldRuleType) => void;
-    onFieldError: (name: string, fieldError: string | CheckResult) => void;
     onFieldChange: (name: string, value: any, event: React.SyntheticEvent) => void;
-    onFieldSuccess: (name: string) => void;
+    checkFieldForNextValue: (name: string, nextValue: Record<string, unknown>, callback?: (checkResult: Record<string, unknown>) => void) => boolean;
+    checkFieldAsyncForNextValue: (name: string, nextValue: Record<string, unknown>) => Promise<Record<string, unknown>>;
 }
 type ExternalPropsContextValue = {
     checkTrigger?: TypeAttributes.CheckTrigger;

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

@@ -1,5 +1,4 @@
 /// <reference types="lodash" />
-import type { CheckResult } from 'schema-typed';
 export interface FormErrorProps {
     formValue: any;
     getCombinedModel: () => any;
@@ -11,11 +10,12 @@ export default function useFormValidate(formError: any, props: FormErrorProps):
     formError: any;
     check: (...args: any[]) => any;
     checkForField: (...args: any[]) => any;
+    checkFieldForNextValue: (...args: any[]) => any;
     checkAsync: (...args: any[]) => any;
     checkForFieldAsync: (...args: any[]) => any;
+    checkFieldAsyncForNextValue: (...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>;
 };