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

package/esm/DateRangePicker/DateRangePicker.js

@@ -14,15 +14,16 @@ import InputGroup from "../InputGroup/index.js";
 import Header from "./Header.js";
 import useDateDisabled from "./hooks/useDateDisabled.js";
 import useCustomizedInput from "../DatePicker/hooks/useCustomizedInput.js";
-import Calendar from "./Calendar.js";
 import Box from "../internals/Box/index.js";
+import Calendar from "./Calendar.js";
 import * as StaticMethods from "./disabledDateUtils.js";
 import { DateRangePickerProvider } from "./DateRangePickerProvider.js";
 import { getSafeCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange } from "./utils.js";
 import { DATERANGE_DISABLED_TARGET as TARGET } from "../internals/constants/index.js";
 import { useStyles, useControlled, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-import { omitTriggerPropKeys, PickerPopup, PickerToggleTrigger, PickerIndicator, PickerLabel, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from "../internals/Picker/index.js";
+import { splitRanges } from "../DatePicker/utils.js";
+import { PickerPopup, PickerToggleTrigger, PickerIndicator, PickerLabel, triggerPropKeys, usePickerRef, onMenuKeyDown } from "../internals/Picker/index.js";
 import { forwardRef, createChainedFunction, mergeRefs, partitionHTMLProps, getStringLength } from "../internals/utils/index.js";
 import { addMonths, addDays, copyTime, calendarOnlyProps, endOfDay, isValid, isBefore, isSameDay, isAfter, isSameMonth, reverseDateRangeOmitTime, startOfDay, DateMode, useDateMode } from "../internals/utils/date/index.js";
 /**
@@ -38,6 +39,7 @@ const DateRangePicker = forwardRef((props, ref) => {
   } = useCustom('DateRangePicker', props);
   const {
     as,
+    block,
     classPrefix = 'picker',
     className,
     appearance = 'default',
@@ -643,8 +645,10 @@ const DateRangePicker = 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
+    } = splitRanges(ranges);
     return /*#__PURE__*/React.createElement(PickerPopup, {
       role: "dialog",
       "aria-labelledby": label ? `${id}-label` : undefined,
@@ -657,8 +661,9 @@ const DateRangePicker = forwardRef((props, ref) => {
       className: panelClasses,
       style: panelStyles
     }, /*#__PURE__*/React.createElement(Stack, {
-      align: "flex-start"
-    }, sideRanges.length > 0 && /*#__PURE__*/React.createElement(PredefinedRanges, {
+      align: "flex-start",
+      h: "100%"
+    }, sideRanges && sideRanges.length > 0 && /*#__PURE__*/React.createElement(PredefinedRanges, {
       direction: "column",
       spacing: 0,
       className: prefix('daterange-predefined'),
@@ -668,7 +673,9 @@ const DateRangePicker = forwardRef((props, ref) => {
       disableShortcut: shouldDisableShortcut,
       onShortcutClick: handleShortcutPageDate,
       "data-testid": "daterange-predefined-side"
-    }), /*#__PURE__*/React.createElement(Stack.Item, null, /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(Box, {
+      className: prefix('box')
+    }, /*#__PURE__*/React.createElement("div", {
       className: prefix('daterange-content')
     }, showHeader && /*#__PURE__*/React.createElement(Header, {
       value: isSelectedIdle ? selectedDates : hoverDateRange,
@@ -695,15 +702,6 @@ const DateRangePicker = forwardRef((props, ref) => {
     })))));
   };
   const hasValue = !isNil(value) && value.length > 1;
-  const [classes, usedClassNamePropKeys] = usePickerClassName({
-    ...props,
-    classPrefix,
-    className,
-    name: 'daterange',
-    appearance,
-    hasValue,
-    cleanable
-  });
   const caretAs = useMemo(() => {
     if (caretAsProp === null) {
       return null;
@@ -756,26 +754,34 @@ const DateRangePicker = forwardRef((props, ref) => {
     editable,
     loading
   });
-  return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
-    trigger: "active",
-    ref: trigger,
-    pickerProps: pick(props, pickTriggerPropKeys),
-    placement: placement,
+  const triggerProps = {
+    ...pick(props, triggerPropKeys),
     onEnter: createChainedFunction(events.onActive, handleEnter, onEnter),
-    onExit: createChainedFunction(events.onInactive, handleExit, onExit),
-    speaker: renderCalendarOverlay
-  }, /*#__PURE__*/React.createElement(Box, {
+    onExit: createChainedFunction(events.onInactive, handleExit, onExit)
+  };
+  return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     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.createElement(DateRangeInput, {
     value: value,
     format: formatStr,
     plaintext: plaintext
-  }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, omit(rest, [...omitTriggerPropKeys, ...usedClassNamePropKeys, ...calendarOnlyProps]), {
+  }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, omit(rest, [...calendarOnlyProps, ...triggerPropKeys]), {
     inside: true,
     className: prefix`input-group`,
     disabled: disabled,
@@ -805,7 +811,7 @@ const DateRangePicker = forwardRef((props, ref) => {
     caretAs: caretAs,
     onClose: handleClean,
     showCleanButton: showCleanButton
-  }))));
+  })));
 }, StaticMethods);
 DateRangePicker.displayName = 'DateRangePicker';
 export default DateRangePicker;

package/esm/Form/hooks/useSchemaModel.js

@@ -1,59 +1,7 @@
 'use client';
-import { SchemaModel, ObjectType } from 'schema-typed';
+import { SchemaModel } from 'schema-typed';
 import { useRef, useCallback } from '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] = ObjectType().shape(convertToShape(obj[key]));
-      }
-    });
-    return obj;
-  }
-  return convertToShape(result);
-}
+import { constructFlatSchema } from "../utils/constructFlatSchema.js";
 function useSchemaModel(formModel, nestedField) {
   const subRulesRef = useRef([]);
   const pushFieldRule = useCallback((name, fieldRule) => {
@@ -82,7 +30,7 @@ function useSchemaModel(formModel, nestedField) {
         [name]: fieldRule.current
       };
     }).reduce((a, b) => Object.assign(a, b), {});
-    return SchemaModel.combine(formModel, SchemaModel(nestedField ? unflattenSchemaObject(subRuleObject) : subRuleObject));
+    return SchemaModel.combine(formModel, SchemaModel(nestedField ? constructFlatSchema(subRuleObject) : subRuleObject));
   }, [formModel, nestedField]);
   return {
     getCombinedModel,

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

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

package/esm/Form/utils/constructFlatSchema.js

@@ -0,0 +1,37 @@
+'use client';
+import { ObjectType, ArrayType } from 'schema-typed';
+import set from 'lodash/set';
+
+/**
+ * combine flat schema to nested schema
+ */
+export function constructFlatSchema(schema) {
+  const shape = {};
+  Object.keys(schema).forEach(key => {
+    set(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] = 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 ? ObjectType().shape(result) : result;
+  }
+  return convertShapeToSchema(shape, {});
+}

package/esm/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/esm/Grid/Row.js

@@ -4,26 +4,8 @@ import React from 'react';
 import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-import { forwardRef, mergeStyles, getCssValue } from "../internals/utils/index.js";
-import { BREAKPOINTS } from "../internals/constants/index.js";
-const getResponsiveGutterStyles = gutter => {
-  if (!gutter) {
-    return {};
-  }
-  if (typeof gutter !== 'object') {
-    return {
-      '--rs-grid-gutter': getCssValue(gutter)
-    };
-  }
-  return BREAKPOINTS.reduce((styles, breakpoint) => {
-    const breakpointValue = gutter[breakpoint];
-    if (!breakpointValue) return styles;
-    const newStyles = {
-      [`--rs-grid-gutter${breakpoint === 'xs' ? '' : `-${breakpoint}`}`]: getCssValue(breakpointValue)
-    };
-    return mergeStyles(styles, newStyles);
-  }, {});
-};
+import { forwardRef, mergeStyles } from "../internals/utils/index.js";
+import { getResponsiveGutterStyles } from "./utils/styles.js";
 /**
  * The Row component is used to create a row container that can contain Col components.
  * @see https://rsuitejs.com/components/grid

package/esm/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/esm/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/esm/Grid/utils/styles.js

@@ -0,0 +1,37 @@
+'use client';
+import isPlainObject from 'lodash/isPlainObject';
+import { BREAKPOINTS } from "../../internals/constants/index.js";
+import { mergeStyles, getCssValue } from "../../internals/utils/index.js";
+/**
+ * Generates CSS variable styles for grid gutters, supporting both single values and arrays [horizontal, vertical]
+ */
+export 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}`]: getCssValue(h),
+      [`--rs-grid-row-gutter${prefix}`]: getCssValue(v)
+    };
+  };
+
+  // Handle responsive object
+  if (isPlainObject(gutter)) {
+    return BREAKPOINTS.reduce((styles, breakpoint) => {
+      const value = gutter[breakpoint];
+      if (!value) return styles;
+      const prefix = breakpoint === 'xs' ? '' : `-${breakpoint}`;
+      return mergeStyles(styles, processGutterValue(value, prefix));
+    }, {});
+  }
+
+  // Handle non-responsive value
+  return processGutterValue(gutter);
+};