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

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import CheckTreeView from "../CheckTree/CheckTreeView.js";
-import Box from "../internals/Box/index.js";
 import useTreeValue from "../CheckTree/hooks/useTreeValue.js";
 import useFlattenTree from "../Tree/hooks/useFlattenTree.js";
 import useTreeWithChildren from "../Tree/hooks/useTreeWithChildren.js";
@@ -12,10 +11,9 @@ import useFocusState from "./hooks/useFocusState.js";
 import isNil from 'lodash/isNil';
 import pick from 'lodash/pick';
 import isFunction from 'lodash/isFunction';
-import omit from 'lodash/omit';
 import { useStyles, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, createChainedFunction, mergeRefs } from "../internals/utils/index.js";
-import { PickerToggle, onMenuKeyDown, PickerPopup, SelectedElement, PickerToggleTrigger, usePickerClassName, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys } from "../internals/Picker/index.js";
+import { PickerToggle, onMenuKeyDown, PickerPopup, SelectedElement, PickerToggleTrigger, useToggleKeyDownEvent, usePickerRef, triggerPropKeys } from "../internals/Picker/index.js";
 import { getSelectedItems } from "../CheckTree/utils.js";
 import { TreeProvider, useTreeImperativeHandle } from "../internals/Tree/TreeProvider.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -32,9 +30,11 @@ const CheckTreePicker = forwardRef((props, ref) => {
     as,
     id,
     appearance = 'default',
+    block,
     cleanable = true,
     countable = true,
     cascade = true,
+    className,
     classPrefix = 'picker',
     childrenKey = 'children',
     disabled,
@@ -51,11 +51,11 @@ const CheckTreePicker = forwardRef((props, ref) => {
     placement = 'bottomStart',
     treeHeight = 320,
     toggleAs,
-    style,
     searchBy,
     searchKeyword,
     showIndentLine,
     searchable = true,
+    style,
     valueKey = 'value',
     value: controlledValue,
     virtualized = false,
@@ -250,35 +250,33 @@ const CheckTreePicker = forwardRef((props, ref) => {
       }
     }
   }
-  const [classes, usedClassNamePropKeys] = usePickerClassName({
-    ...props,
-    classPrefix,
-    appearance,
-    countable,
-    cleanable,
-    disabled,
-    hasValue: hasValidValue,
-    name: 'check-tree'
-  });
-  return /*#__PURE__*/React.createElement(PickerToggleTrigger, _extends({
+  return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    as: as,
     id: id,
+    name: "check-tree",
+    block: block,
+    disabled: disabled,
+    appearance: appearance,
     popupType: "tree",
     multiple: true,
-    pickerProps: pick(props, pickTriggerPropKeys),
+    triggerProps: {
+      ...pick(props, triggerPropKeys),
+      ...triggerProps
+    },
     ref: trigger,
     placement: placement,
-    speaker: renderTreeView
-  }, triggerProps), /*#__PURE__*/React.createElement(Box, {
-    as: as,
-    className: classes,
+    speaker: renderTreeView,
+    rootRef: root,
     style: style,
-    ref: root
-  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [...omitTriggerPropKeys, ...usedClassNamePropKeys]), {
+    classPrefix: classPrefix,
+    className: className
+  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({
     ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
     onClean: createChainedFunction(handleClean, onClean),
     cleanable: cleanable && !disabled,
+    countable: countable,
     disabled: disabled,
     as: toggleAs,
     hasValue: hasValidValue,
@@ -286,7 +284,7 @@ const CheckTreePicker = forwardRef((props, ref) => {
     placement: placement,
     inputValue: value,
     focusItemValue: focusItemValue
-  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));
+  }, rest), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));
 });
 CheckTreePicker.displayName = 'CheckTreePicker';
 export default CheckTreePicker;

package/esm/CustomProvider/CustomProvider.d.ts

@@ -267,10 +267,7 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
     } | undefined;
     Toggle?: {
         on: string;
-        off: string; /**
-         * If true, the ripple effect is disabled.
-         * Affected components include: Button, Nav.Item, Pagination.
-         */
+        off: string;
     } | undefined;
 }>>;
 /**

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

@@ -11,16 +11,16 @@ import Stack from "../Stack/index.js";
 import PredefinedRanges from "./PredefinedRanges.js";
 import DateInput from "../DateInput/index.js";
 import InputGroup from "../InputGroup/index.js";
-import Box from "../internals/Box/index.js";
 import useMonthView from "./hooks/useMonthView.js";
 import useFocus from "./hooks/useFocus.js";
 import useCustomizedInput from "./hooks/useCustomizedInput.js";
+import Box from "../internals/Box/index.js";
 import { useCalendarDate } from "../Calendar/hooks/index.js";
 import { isEveryDateInMonth } from "../Calendar/utils/index.js";
 import { forwardRef, mergeRefs, partitionHTMLProps, createChainedFunction } from "../internals/utils/index.js";
 import { useStyles, useControlled, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
 import { isValid, copyTime, disableTime, DateMode, useDateMode, calendarOnlyProps } from "../internals/utils/date/index.js";
-import { PickerPopup, PickerLabel, PickerIndicator, PickerToggleTrigger, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from "../internals/Picker/index.js";
+import { PickerPopup, PickerLabel, PickerIndicator, PickerToggleTrigger, triggerPropKeys, usePickerRef, onMenuKeyDown } from "../internals/Picker/index.js";
 import { OverlayCloseCause } from "../internals/Overlay/OverlayTrigger.js";
 import { splitRanges, getRestProps } from "./utils.js";
 import { startOfToday } from "../internals/utils/date/index.js";
@@ -36,6 +36,7 @@ const DatePicker = forwardRef((props, ref) => {
   } = useCustom('DatePicker', props);
   const {
     as,
+    block,
     className,
     classPrefix = 'picker',
     calendarDefaultDate,
@@ -363,8 +364,9 @@ const DatePicker = forwardRef((props, ref) => {
       target: trigger,
       onKeyDown: handlePickerPopupKeyDown
     }, /*#__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('date-predefined'),
@@ -373,7 +375,9 @@ const DatePicker = forwardRef((props, ref) => {
       locale: locale,
       disableShortcut: isDatetimeDisabled,
       onShortcutClick: handleShortcutPageDate
-    }), /*#__PURE__*/React.createElement(Stack.Item, null, /*#__PURE__*/React.createElement(CalendarContainer, _extends({}, calendarProps, {
+    }), /*#__PURE__*/React.createElement(Box, {
+      className: prefix('box')
+    }, /*#__PURE__*/React.createElement(CalendarContainer, _extends({}, calendarProps, {
       targetId: id,
       locale: locale,
       showWeekNumbers: showWeekNumbers,
@@ -409,15 +413,6 @@ const DatePicker = forwardRef((props, ref) => {
     }))));
   };
   const hasValue = isValid(value);
-  const [classes, usedClassNamePropKeys] = usePickerClassName({
-    ...props,
-    className,
-    classPrefix,
-    name: 'date',
-    appearance,
-    hasValue,
-    cleanable
-  });
   const caretAs = useMemo(() => {
     if (caretAsProp === null) {
       return null;
@@ -454,27 +449,35 @@ const DatePicker = forwardRef((props, ref) => {
     Input,
     events
   } = useCustomizedInput(customizedProps);
-  return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
-    trigger: "active",
-    pickerProps: pick(props, pickTriggerPropKeys),
-    ref: trigger,
-    placement: placement,
+  const triggerProps = {
+    ...pick(props, triggerPropKeys),
     onClose: handleTriggerClose,
     onEnter: createChainedFunction(events.onActive, onEnter),
-    onExit: createChainedFunction(events.onInactive, onExit),
-    speaker: renderCalendarOverlay
-  }, /*#__PURE__*/React.createElement(Box, {
+    onExit: createChainedFunction(events.onInactive, onExit)
+  };
+  return /*#__PURE__*/React.createElement(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.createElement(DateInput, {
     value: value,
     format: formatStr,
     plaintext: plaintext
-  }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, getRestProps(rest, usedClassNamePropKeys), {
+  }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, getRestProps(rest), {
     inside: true,
     size: size,
     disabled: disabled,
@@ -503,7 +506,7 @@ const DatePicker = forwardRef((props, ref) => {
     caretAs: caretAs,
     onClose: handleClean,
     showCleanButton: showCleanButton
-  }))));
+  })));
 });
 DatePicker.displayName = 'DatePicker';
 export default DatePicker;

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

@@ -1,6 +1,6 @@
 'use client';
 import omit from 'lodash/omit';
-import { omitTriggerPropKeys } from "../internals/Picker/index.js";
+import { overlayPropKeys } from "../internals/Picker/index.js";
 import { subDays, startOfDay, endOfDay, calendarOnlyProps, startOfToday } from "../internals/utils/date/index.js";
 export function getDefaultRanges(value) {
   const today = startOfToday();
@@ -61,10 +61,10 @@ export const getRanges = _ref3 => {
 };
 export 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
@@ -74,5 +74,5 @@ export const getRestProps = function (props, omitProps) {
   if (omitProps === void 0) {
     omitProps = [];
   }
-  return omit(props, [...omitTriggerPropKeys, ...calendarOnlyProps, ...omitProps]);
+  return omit(props, [...overlayPropKeys, ...calendarOnlyProps, ...omitProps]);
 };

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/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/esm/Divider/Divider.js

@@ -21,7 +21,7 @@ const Divider = forwardRef((props, ref) => {
     children,
     color,
     label = children,
-    labelPosition,
+    labelPlacement,
     vertical,
     spacing,
     style,
@@ -46,7 +46,7 @@ const Divider = 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/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 */