rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250416

package/cjs/CustomProvider/types.d.ts

@@ -56,6 +56,7 @@ import type { InputNumberProps } from '../InputNumber';
 import type { InputPickerProps } from '../InputPicker';
 import type { KbdProps } from '../Kbd';
 import type { ImageProps } from '../Image';
+import type { LinkProps } from '../Link';
 import type { ListProps } from '../List';
 import type { LoaderProps } from '../Loader';
 import type { MaskedInputProps } from '../MaskedInput';
@@ -66,6 +67,8 @@ import type { MultiCascaderProps } from '../MultiCascader';
 import type { NavProps } from '../Nav';
 import type { NavbarProps } from '../Navbar';
 import type { NotificationProps } from '../Notification';
+import type { PasswordInputProps } from '../PasswordInput';
+import type { PasswordStrengthMeterProps } from '../PasswordStrengthMeter';
 import type { PaginationProps } from '../Pagination';
 import type { PanelProps } from '../Panel';
 import type { PanelGroupProps } from '../PanelGroup';
@@ -82,7 +85,6 @@ import type { RadioTileGroupProps } from '../RadioTileGroup';
 import type { RangeSliderProps } from '../RangeSlider';
 import type { RateProps } from '../Rate';
 import type { RowProps } from '../Row';
-import type { SafeAnchorProps } from '../SafeAnchor';
 import type { SelectPickerProps } from '../SelectPicker';
 import type { SidebarProps } from '../Sidebar';
 import type { SidenavProps } from '../Sidenav';
@@ -105,9 +107,11 @@ import type { ToggleProps } from '../Toggle';
 import type { TooltipProps } from '../Tooltip';
 import type { TreeProps } from '../Tree';
 import type { TreePickerProps } from '../TreePicker';
+import type { TextareaProps } from '../Textarea';
 import type { UploaderProps } from '../Uploader';
 import type { VisuallyHiddenProps } from '../VisuallyHidden';
 import type { WhisperProps } from '../Whisper';
+import type { SafeAnchorProps } from '../internals/SafeAnchor';
 interface ComponentProps<T> {
     defaultProps: Partial<T>;
 }
@@ -170,6 +174,7 @@ export interface ReactSuiteComponents {
     InputPicker: ComponentProps<InputPickerProps>;
     Image: ComponentProps<ImageProps>;
     Kbd: ComponentProps<KbdProps>;
+    Link: ComponentProps<LinkProps>;
     List: ComponentProps<ListProps>;
     Loader: ComponentProps<LoaderProps>;
     MaskedInput: ComponentProps<MaskedInputProps>;
@@ -180,6 +185,8 @@ export interface ReactSuiteComponents {
     Nav: ComponentProps<NavProps>;
     Navbar: ComponentProps<NavbarProps>;
     Notification: ComponentProps<NotificationProps>;
+    PasswordInput: ComponentProps<PasswordInputProps>;
+    PasswordStrengthMeter: ComponentProps<PasswordStrengthMeterProps>;
     Pagination: ComponentProps<PaginationProps>;
     Panel: ComponentProps<PanelProps>;
     PanelGroup: ComponentProps<PanelGroupProps>;
@@ -196,7 +203,6 @@ export interface ReactSuiteComponents {
     RangeSlider: ComponentProps<RangeSliderProps>;
     Rate: ComponentProps<RateProps>;
     Row: ComponentProps<RowProps>;
-    SafeAnchor: ComponentProps<SafeAnchorProps>;
     SelectPicker: ComponentProps<SelectPickerProps>;
     Sidebar: ComponentProps<SidebarProps>;
     Sidenav: ComponentProps<SidenavProps>;
@@ -219,8 +225,10 @@ export interface ReactSuiteComponents {
     Tooltip: ComponentProps<TooltipProps>;
     Tree: ComponentProps<TreeProps>;
     TreePicker: ComponentProps<TreePickerProps>;
+    Textarea: ComponentProps<TextareaProps>;
     Uploader: ComponentProps<UploaderProps>;
     VisuallyHidden: ComponentProps<VisuallyHiddenProps>;
     Whisper: ComponentProps<WhisperProps>;
+    SafeAnchor: ComponentProps<SafeAnchorProps>;
 }
 export {};

package/cjs/DatePicker/DatePicker.d.ts

@@ -69,7 +69,7 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     /**
      * Predefined date Ranges
      */
-    ranges?: DateOptionPreset<Date>[];
+    ranges?: DateOptionPreset<Date | null>[];
     /**
      * Whether to show week numbers
      */

package/cjs/DatePicker/DatePicker.js

@@ -16,10 +16,10 @@ var _Stack = _interopRequireDefault(require("../Stack"));
 var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
 var _DateInput = _interopRequireDefault(require("../DateInput"));
 var _InputGroup = _interopRequireDefault(require("../InputGroup"));
-var _Box = _interopRequireDefault(require("../internals/Box"));
 var _useMonthView = _interopRequireDefault(require("./hooks/useMonthView"));
 var _useFocus = _interopRequireDefault(require("./hooks/useFocus"));
 var _useCustomizedInput = _interopRequireDefault(require("./hooks/useCustomizedInput"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../Calendar/hooks");
 var _utils = require("../Calendar/utils");
 var _utils2 = require("../internals/utils");
@@ -42,6 +42,7 @@ const DatePicker = (0, _utils2.forwardRef)((props, ref) => {
   } = (0, _CustomProvider.useCustom)('DatePicker', props);
   const {
     as,
+    block,
     className,
     classPrefix = 'picker',
     calendarDefaultDate,
@@ -369,8 +370,9 @@ const DatePicker = (0, _utils2.forwardRef)((props, ref) => {
       target: trigger,
       onKeyDown: handlePickerPopupKeyDown
     }, /*#__PURE__*/_react.default.createElement(_Stack.default, {
-      align: "flex-start"
-    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
+      align: "flex-start",
+      h: "100%"
+    }, sideRanges && sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
       direction: "column",
       spacing: 0,
       className: prefix('date-predefined'),
@@ -379,7 +381,9 @@ const DatePicker = (0, _utils2.forwardRef)((props, ref) => {
       locale: locale,
       disableShortcut: isDatetimeDisabled,
       onShortcutClick: handleShortcutPageDate
-    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {
+    }), /*#__PURE__*/_react.default.createElement(_Box.default, {
+      className: prefix('box')
+    }, /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {
       targetId: id,
       locale: locale,
       showWeekNumbers: showWeekNumbers,
@@ -415,15 +419,6 @@ const DatePicker = (0, _utils2.forwardRef)((props, ref) => {
     }))));
   };
   const hasValue = (0, _date.isValid)(value);
-  const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({
-    ...props,
-    className,
-    classPrefix,
-    name: 'date',
-    appearance,
-    hasValue,
-    cleanable
-  });
   const caretAs = (0, _react.useMemo)(() => {
     if (caretAsProp === null) {
       return null;
@@ -460,27 +455,35 @@ const DatePicker = (0, _utils2.forwardRef)((props, ref) => {
     Input,
     events
   } = (0, _useCustomizedInput.default)(customizedProps);
-  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
-    trigger: "active",
-    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
-    ref: trigger,
-    placement: placement,
+  const triggerProps = {
+    ...(0, _pick.default)(props, _Picker.triggerPropKeys),
     onClose: handleTriggerClose,
     onEnter: (0, _utils2.createChainedFunction)(events.onActive, onEnter),
-    onExit: (0, _utils2.createChainedFunction)(events.onInactive, onExit),
-    speaker: renderCalendarOverlay
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    onExit: (0, _utils2.createChainedFunction)(events.onInactive, onExit)
+  };
+  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     as: as,
-    className: merge(classes, {
+    name: "date",
+    classPrefix: classPrefix,
+    className: merge(className, {
       [prefix('error')]: invalidValue
     }),
+    block: block,
+    disabled: disabled,
+    appearance: appearance,
     style: style,
-    ref: root
+    rootRef: root,
+    trigger: "active",
+    triggerProps: triggerProps,
+    ref: trigger,
+    placement: placement,
+    speaker: renderCalendarOverlay,
+    "data-cleanable": cleanable
   }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateInput.default, {
     value: value,
     format: formatStr,
     plaintext: plaintext
-  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _utils3.getRestProps)(rest, usedClassNamePropKeys), {
+  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _utils3.getRestProps)(rest), {
     inside: true,
     size: size,
     disabled: disabled,
@@ -509,7 +512,7 @@ const DatePicker = (0, _utils2.forwardRef)((props, ref) => {
     caretAs: caretAs,
     onClose: handleClean,
     showCleanButton: showCleanButton
-  }))));
+  })));
 });
 DatePicker.displayName = 'DatePicker';
 var _default = exports.default = DatePicker;

package/cjs/DatePicker/utils.d.ts

@@ -10,8 +10,8 @@ export declare function getDefaultRanges<T extends Date | DateRange>(value: T):
  * @param calendarDate
  */
 export declare const getRanges: <T extends Date | DateRange>({ ranges, calendarDate }: Pick<ToolbarProps<T, T>, "calendarDate" | "ranges">) => InnerRange<T | null>[];
-export declare function splitRanges(ranges?: DateOptionPreset<Date>[]): {
-    sideRanges: DateOptionPreset<Date>[];
-    bottomRanges: DateOptionPreset<Date>[];
+export declare function splitRanges<T extends Date | DateRange>(ranges?: DateOptionPreset<T | null>[]): {
+    sideRanges: DateOptionPreset<T | null>[] | undefined;
+    bottomRanges: DateOptionPreset<T | null>[] | undefined;
 };
 export declare const getRestProps: (props: any, omitProps?: string[]) => import("lodash").Omit<any, string>;

package/cjs/DatePicker/utils.js

@@ -69,10 +69,10 @@ const getRanges = _ref3 => {
 exports.getRanges = getRanges;
 function splitRanges(ranges) {
   // The shortcut option on the left side of the calendar panel
-  const sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(range => (range === null || range === void 0 ? void 0 : range.placement) === 'left')) || [];
+  const sideRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(range => (range === null || range === void 0 ? void 0 : range.placement) === 'left');
 
   // The shortcut option on the bottom of the calendar panel
-  const bottomRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(range => (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined)) || [];
+  const bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(range => (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined);
   return {
     sideRanges,
     bottomRanges
@@ -82,6 +82,6 @@ const getRestProps = function (props, omitProps) {
   if (omitProps === void 0) {
     omitProps = [];
   }
-  return (0, _omit.default)(props, [..._Picker.omitTriggerPropKeys, ..._date.calendarOnlyProps, ...omitProps]);
+  return (0, _omit.default)(props, [..._Picker.overlayPropKeys, ..._date.calendarOnlyProps, ...omitProps]);
 };
 exports.getRestProps = getRestProps;

package/cjs/DateRangePicker/DateRangePicker.js

@@ -19,16 +19,17 @@ var _InputGroup = _interopRequireDefault(require("../InputGroup"));
 var _Header = _interopRequireDefault(require("./Header"));
 var _useDateDisabled = _interopRequireDefault(require("./hooks/useDateDisabled"));
 var _useCustomizedInput = _interopRequireDefault(require("../DatePicker/hooks/useCustomizedInput"));
-var _Calendar2 = _interopRequireDefault(require("./Calendar"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
+var _Calendar2 = _interopRequireDefault(require("./Calendar"));
 var StaticMethods = _interopRequireWildcard(require("./disabledDateUtils"));
 var _DateRangePickerProvider = require("./DateRangePickerProvider");
 var _utils = require("./utils");
 var _constants = require("../internals/constants");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
+var _utils2 = require("../DatePicker/utils");
 var _Picker = require("../internals/Picker");
-var _utils2 = require("../internals/utils");
+var _utils3 = require("../internals/utils");
 var _date = require("../internals/utils/date");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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,7 +38,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  *
  * @see https://rsuitejs.com/components/date-range-picker
  */
-const DateRangePicker = (0, _utils2.forwardRef)((props, ref) => {
+const DateRangePicker = (0, _utils3.forwardRef)((props, ref) => {
   var _ref, _ref2;
   const {
     formatDate,
@@ -45,6 +46,7 @@ const DateRangePicker = (0, _utils2.forwardRef)((props, ref) => {
   } = (0, _CustomProvider.useCustom)('DateRangePicker', props);
   const {
     as,
+    block,
     classPrefix = 'picker',
     className,
     appearance = 'default',
@@ -230,7 +232,7 @@ const DateRangePicker = (0, _utils2.forwardRef)((props, ref) => {
       const [startDate, endDate] = value;
       strings = `${formatDate(startDate, formatStr)}${character}${formatDate(endDate, formatStr)}`;
     }
-    return (0, _utils2.getStringLength)(strings) + padding;
+    return (0, _utils3.getStringLength)(strings) + padding;
   };
 
   /**
@@ -650,22 +652,25 @@ const DateRangePicker = (0, _utils2.forwardRef)((props, ref) => {
         index: 1
       }, calendarProps)));
     };
-    const sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(range => (range === null || range === void 0 ? void 0 : range.placement) === 'left')) || [];
-    const bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(range => (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined);
+    const {
+      sideRanges,
+      bottomRanges
+    } = (0, _utils2.splitRanges)(ranges);
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       role: "dialog",
       "aria-labelledby": label ? `${id}-label` : undefined,
       tabIndex: -1,
       className: classes,
-      ref: (0, _utils2.mergeRefs)(overlay, speakerRef),
+      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),
       target: trigger,
       style: popupStyle
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: panelClasses,
       style: panelStyles
     }, /*#__PURE__*/_react.default.createElement(_Stack.default, {
-      align: "flex-start"
-    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
+      align: "flex-start",
+      h: "100%"
+    }, sideRanges && sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
       direction: "column",
       spacing: 0,
       className: prefix('daterange-predefined'),
@@ -675,7 +680,9 @@ const DateRangePicker = (0, _utils2.forwardRef)((props, ref) => {
       disableShortcut: shouldDisableShortcut,
       onShortcutClick: handleShortcutPageDate,
       "data-testid": "daterange-predefined-side"
-    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement("div", {
+    }), /*#__PURE__*/_react.default.createElement(_Box.default, {
+      className: prefix('box')
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('daterange-content')
     }, showHeader && /*#__PURE__*/_react.default.createElement(_Header.default, {
       value: isSelectedIdle ? selectedDates : hoverDateRange,
@@ -702,15 +709,6 @@ const DateRangePicker = (0, _utils2.forwardRef)((props, ref) => {
     })))));
   };
   const hasValue = !(0, _isNil.default)(value) && value.length > 1;
-  const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({
-    ...props,
-    classPrefix,
-    className,
-    name: 'daterange',
-    appearance,
-    hasValue,
-    cleanable
-  });
   const caretAs = (0, _react.useMemo)(() => {
     if (caretAsProp === null) {
       return null;
@@ -743,7 +741,7 @@ const DateRangePicker = (0, _utils2.forwardRef)((props, ref) => {
     }
     return false;
   };
-  const [ariaProps, rest] = (0, _utils2.partitionHTMLProps)(restProps, {
+  const [ariaProps, rest] = (0, _utils3.partitionHTMLProps)(restProps, {
     htmlProps: [],
     includeAria: true
   });
@@ -763,26 +761,34 @@ const DateRangePicker = (0, _utils2.forwardRef)((props, ref) => {
     editable,
     loading
   });
+  const triggerProps = {
+    ...(0, _pick.default)(props, _Picker.triggerPropKeys),
+    onEnter: (0, _utils3.createChainedFunction)(events.onActive, handleEnter, onEnter),
+    onExit: (0, _utils3.createChainedFunction)(events.onInactive, handleExit, onExit)
+  };
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
-    trigger: "active",
-    ref: trigger,
-    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
-    placement: placement,
-    onEnter: (0, _utils2.createChainedFunction)(events.onActive, handleEnter, onEnter),
-    onExit: (0, _utils2.createChainedFunction)(events.onInactive, handleExit, onExit),
-    speaker: renderCalendarOverlay
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: as,
-    ref: root,
-    className: merge(classes, {
+    name: "date-range",
+    classPrefix: classPrefix,
+    className: merge(className, {
       [prefix('error')]: invalidValue
     }),
-    style: style
+    block: block,
+    disabled: disabled,
+    appearance: appearance,
+    style: style,
+    rootRef: root,
+    ref: trigger,
+    placement: placement,
+    trigger: "active",
+    triggerProps: triggerProps,
+    speaker: renderCalendarOverlay,
+    "data-cleanable": cleanable
   }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, {
     value: value,
     format: formatStr,
     plaintext: plaintext
-  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys, ..._date.calendarOnlyProps]), {
+  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._date.calendarOnlyProps, ..._Picker.triggerPropKeys]), {
     inside: true,
     className: prefix`input-group`,
     disabled: disabled,
@@ -812,7 +818,7 @@ const DateRangePicker = (0, _utils2.forwardRef)((props, ref) => {
     caretAs: caretAs,
     onClose: handleClean,
     showCleanButton: showCleanButton
-  }))));
+  })));
 }, StaticMethods);
 DateRangePicker.displayName = 'DateRangePicker';
 var _default = exports.default = DateRangePicker;

package/cjs/Divider/Divider.d.ts

@@ -11,9 +11,10 @@ export interface DividerProps extends BoxProps {
      */
     label?: React.ReactNode;
     /**
-     * The position of the label.
+     * The placement of the label.
+     * @version 6.0.0
      */
-    labelPosition?: 'left' | 'right' | 'center';
+    labelPlacement?: 'start' | 'center' | 'end';
     /**
      * Vertical dividing line. Cannot be used with label.
      */

package/cjs/Divider/Divider.js

@@ -26,7 +26,7 @@ const Divider = (0, _utils.forwardRef)((props, ref) => {
     children,
     color,
     label = children,
-    labelPosition,
+    labelPlacement,
     vertical,
     spacing,
     style,
@@ -51,7 +51,7 @@ const Divider = (0, _utils.forwardRef)((props, ref) => {
     "data-appearance": appearance,
     "data-orientation": vertical ? 'vertical' : 'horizontal',
     "data-with-label": label ? 'true' : undefined,
-    "data-position": labelPosition
+    "data-placement": labelPlacement
   }, rest), label);
 });
 Divider.displayName = 'Divider';

package/cjs/Form/hooks/useSchemaModel.js

@@ -5,59 +5,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _schemaTyped = require("schema-typed");
 var _react = require("react");
-/**
- * Convert a flat schema object to a nested schema object
- *
- * @example
- *
- * ```js
- * const schema = {
- *  'address.city': StringType().isRequired('City is required'),
- *  'address.street': StringType().isRequired('Street is required')
- * };
- *
- * const result = unflattenSchemaObject(schema);
- *
- * // result
- * {
- *    address: ObjectType().shape({
- *      city: StringType().isRequired('City is required'),
- *      street: StringType().isRequired('Street is required')
- *    })
- * }
- * ```
- */
-function unflattenSchemaObject(schema) {
-  const result = {};
-  const $type = Symbol('schema-type');
-  Object.keys(schema).forEach(key => {
-    if (key.includes('.')) {
-      const keys = key.split('.');
-      const lastKey = keys.pop() || '';
-      let current = result;
-      keys.forEach(subKey => {
-        current[subKey] = current[subKey] || {
-          [$type]: 'object-type'
-        };
-        current = current[subKey];
-      });
-      current[lastKey] = schema[key];
-    } else {
-      result[key] = schema[key];
-    }
-  });
-  function convertToShape(obj) {
-    Object.keys(obj).forEach(key => {
-      var _obj$key;
-      if (((_obj$key = obj[key]) === null || _obj$key === void 0 ? void 0 : _obj$key[$type]) === 'object-type') {
-        delete obj[key][$type];
-        obj[key] = (0, _schemaTyped.ObjectType)().shape(convertToShape(obj[key]));
-      }
-    });
-    return obj;
-  }
-  return convertToShape(result);
-}
+var _constructFlatSchema = require("../utils/constructFlatSchema");
 function useSchemaModel(formModel, nestedField) {
   const subRulesRef = (0, _react.useRef)([]);
   const pushFieldRule = (0, _react.useCallback)((name, fieldRule) => {
@@ -86,7 +34,7 @@ function useSchemaModel(formModel, nestedField) {
         [name]: fieldRule.current
       };
     }).reduce((a, b) => Object.assign(a, b), {});
-    return _schemaTyped.SchemaModel.combine(formModel, (0, _schemaTyped.SchemaModel)(nestedField ? unflattenSchemaObject(subRuleObject) : subRuleObject));
+    return _schemaTyped.SchemaModel.combine(formModel, (0, _schemaTyped.SchemaModel)(nestedField ? (0, _constructFlatSchema.constructFlatSchema)(subRuleObject) : subRuleObject));
   }, [formModel, nestedField]);
   return {
     getCombinedModel,

package/cjs/Form/utils/constructFlatSchema.d.ts

@@ -0,0 +1,4 @@
+/**
+ * combine flat schema to nested schema
+ */
+export declare function constructFlatSchema(schema: any): any;

package/cjs/Form/utils/constructFlatSchema.js

@@ -0,0 +1,41 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.constructFlatSchema = constructFlatSchema;
+var _schemaTyped = require("schema-typed");
+var _set = _interopRequireDefault(require("lodash/set"));
+/**
+ * combine flat schema to nested schema
+ */
+function constructFlatSchema(schema) {
+  const shape = {};
+  Object.keys(schema).forEach(key => {
+    (0, _set.default)(shape, key, {
+      schema: schema[key],
+      primitiveType: true
+    });
+  });
+  function convertShapeToSchema(shape, result, internal) {
+    Object.keys(shape).forEach(key => {
+      const currentShape = shape[key];
+      if (Array.isArray(currentShape)) {
+        result[key] = (0, _schemaTyped.ArrayType)().of(...currentShape.map(v => {
+          if (v.primitiveType) {
+            return v.schema;
+          }
+          return convertShapeToSchema(v, {}, true);
+        }));
+      } else {
+        if (currentShape.primitiveType) {
+          result[key] = currentShape.schema;
+        } else {
+          result[key] = convertShapeToSchema(currentShape, {}, true);
+        }
+      }
+    });
+    return internal ? (0, _schemaTyped.ObjectType)().shape(result) : result;
+  }
+  return convertShapeToSchema(shape, {});
+}

package/cjs/Grid/Row.d.ts

@@ -1,9 +1,9 @@
 import { BoxProps } from '../internals/Box';
 import type { ResponsiveValue } from '../internals/types';
-import type { RowAlignment, RowJustify } from './types';
+import type { RowAlignment, RowJustify, GutterType } from './types';
 export interface RowProps extends BoxProps {
     /** Spacing between columns. Support responsive values */
-    gutter?: number | string | ResponsiveValue<number | string>;
+    gutter?: GutterType | ResponsiveValue<GutterType>;
     /** Vertical alignment of columns. Support responsive values */
     align?: RowAlignment | ResponsiveValue<RowAlignment>;
     /** Horizontal distribution of columns. Support responsive values */

package/cjs/Grid/Row.js

@@ -10,25 +10,7 @@ var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
-var _constants = require("../internals/constants");
-const getResponsiveGutterStyles = gutter => {
-  if (!gutter) {
-    return {};
-  }
-  if (typeof gutter !== 'object') {
-    return {
-      '--rs-grid-gutter': (0, _utils.getCssValue)(gutter)
-    };
-  }
-  return _constants.BREAKPOINTS.reduce((styles, breakpoint) => {
-    const breakpointValue = gutter[breakpoint];
-    if (!breakpointValue) return styles;
-    const newStyles = {
-      [`--rs-grid-gutter${breakpoint === 'xs' ? '' : `-${breakpoint}`}`]: (0, _utils.getCssValue)(breakpointValue)
-    };
-    return (0, _utils.mergeStyles)(styles, newStyles);
-  }, {});
-};
+var _styles = require("./utils/styles");
 /**
  * The Row component is used to create a row container that can contain Col components.
  * @see https://rsuitejs.com/components/grid
@@ -53,7 +35,7 @@ const Row = (0, _utils.forwardRef)((props, ref) => {
     responsive
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix(), ...responsive(align), ...responsive(justify));
-  const rowStyles = (0, _utils.mergeStyles)(style, getResponsiveGutterStyles(gutter));
+  const rowStyles = (0, _utils.mergeStyles)(style, (0, _styles.getResponsiveGutterStyles)(gutter));
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as
   }, rest, {

package/cjs/Grid/types.d.ts

@@ -1,5 +1,6 @@
 export type RowAlignment = 'top' | 'middle' | 'bottom';
 export type RowJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+export type GutterType = number | string | [number | string, number | string];
 /** @deprecated Use new responsive props format instead */
 export interface DeprecatedColProps {
     /** @deprecated Use span={{ xs: number }} instead */

package/cjs/Grid/utils/styles.d.ts

@@ -0,0 +1,6 @@
+import type { ResponsiveValue } from '../../internals/types';
+import type { GutterType } from '../types';
+/**
+ * Generates CSS variable styles for grid gutters, supporting both single values and arrays [horizontal, vertical]
+ */
+export declare const getResponsiveGutterStyles: (gutter?: GutterType | ResponsiveValue<GutterType>) => Record<string, string>;