rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250403

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

package/cjs/Grid/utils/styles.js

@@ -0,0 +1,43 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.getResponsiveGutterStyles = void 0;
+var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));
+var _constants = require("../../internals/constants");
+var _utils = require("../../internals/utils");
+/**
+ * Generates CSS variable styles for grid gutters, supporting both single values and arrays [horizontal, vertical]
+ */
+const getResponsiveGutterStyles = gutter => {
+  if (typeof gutter === 'undefined') {
+    return {};
+  }
+
+  // Helper function to process gutter values and generate CSS variables
+  const processGutterValue = function (value, prefix) {
+    if (prefix === void 0) {
+      prefix = '';
+    }
+    const [h, v] = Array.isArray(value) ? value : [value, value];
+    return {
+      [`--rs-grid-gutter${prefix}`]: (0, _utils.getCssValue)(h),
+      [`--rs-grid-row-gutter${prefix}`]: (0, _utils.getCssValue)(v)
+    };
+  };
+
+  // Handle responsive object
+  if ((0, _isPlainObject.default)(gutter)) {
+    return _constants.BREAKPOINTS.reduce((styles, breakpoint) => {
+      const value = gutter[breakpoint];
+      if (!value) return styles;
+      const prefix = breakpoint === 'xs' ? '' : `-${breakpoint}`;
+      return (0, _utils.mergeStyles)(styles, processGutterValue(value, prefix));
+    }, {});
+  }
+
+  // Handle non-responsive value
+  return processGutterValue(gutter);
+};
+exports.getResponsiveGutterStyles = getResponsiveGutterStyles;