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

package/esm/CheckPicker/CheckPicker.js

@@ -4,16 +4,14 @@ import React, { useState } from 'react';
 import clone from 'lodash/clone';
 import isFunction from 'lodash/isFunction';
 import remove from 'lodash/remove';
-import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import isNil from 'lodash/isNil';
 import SearchBox from "../internals/SearchBox/index.js";
-import Box from "../internals/Box/index.js";
 import { filterNodesOfTree } from "../internals/Tree/utils/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { forwardRef, createChainedFunction, shallowEqual, mergeRefs, getDataGroupBy } from "../internals/utils/index.js";
-import { Listbox, ListCheckItem, PickerToggle, PickerPopup, SelectedElement, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys } from "../internals/Picker/index.js";
+import { Listbox, ListCheckItem, PickerToggle, PickerPopup, SelectedElement, PickerToggleTrigger, useFocusItemValue, useSearch, useToggleKeyDownEvent, usePickerRef, triggerPropKeys } from "../internals/Picker/index.js";
 const emptyArray = [];
 /**
  * A component for selecting checkable items in a dropdown list.
@@ -24,33 +22,35 @@ const CheckPicker = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('CheckPicker', props);
   const {
-    as,
     appearance = 'default',
+    as,
+    block,
+    className,
+    cleanable = true,
     classPrefix = 'picker',
     countable = true,
     data = emptyArray,
+    defaultValue,
+    disabled,
     disabledItemValues = emptyArray,
-    valueKey = 'value',
+    groupBy,
+    id,
     labelKey = 'label',
-    searchable = true,
-    virtualized,
-    cleanable = true,
+    listProps,
+    listboxMaxHeight = 320,
+    locale,
+    placeholder,
     placement = 'bottomStart',
     popupAutoWidth = true,
-    listboxMaxHeight = 320,
     popupClassName,
     popupStyle,
-    locale,
-    placeholder,
-    disabled,
-    toggleAs,
-    style,
+    searchable = true,
     sticky,
+    style,
+    toggleAs,
     value: valueProp,
-    defaultValue,
-    groupBy,
-    listProps,
-    id,
+    valueKey = 'value',
+    virtualized,
     sort,
     searchBy,
     renderOption,
@@ -61,8 +61,7 @@ const CheckPicker = forwardRef((props, ref) => {
     onGroupTitleClick,
     onSearch,
     onEnter,
-    onEntered,
-    onExited,
+    onExit,
     onClean,
     onChange,
     onSelect,
@@ -180,10 +179,10 @@ const CheckPicker = forwardRef((props, ref) => {
     handleSelect(nextValue, item, event);
     handleChangeValue(nextValue, event);
   });
-  const handleEntered = useEventCallback(() => {
+  const handleEnter = useEventCallback(() => {
     setActive(true);
   });
-  const handleExited = useEventCallback(() => {
+  const handleExit = useEventCallback(() => {
     resetSearch();
     setFocusItemValue(null);
     setActive(false);
@@ -272,31 +271,28 @@ const CheckPicker = forwardRef((props, ref) => {
       inputRef: searchInput
     }), renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
-  const [classes, usedClassNamePropKeys] = usePickerClassName({
-    ...props,
-    appearance,
-    classPrefix,
-    cleanable,
-    countable,
-    hasValue,
-    name: 'check'
-  });
+  const triggerProps = {
+    ...pick(props, triggerPropKeys),
+    onEnter: createChainedFunction(initStickyItems, handleEnter, onEnter),
+    onExit: createChainedFunction(handleExit, onExit)
+  };
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    as: as,
     id: id,
     multiple: true,
-    pickerProps: pick(props, pickTriggerPropKeys),
+    name: "check",
+    block: block,
+    disabled: disabled,
+    appearance: appearance,
+    triggerProps: triggerProps,
     ref: trigger,
     placement: placement,
-    onEnter: createChainedFunction(initStickyItems, onEnter),
-    onEntered: createChainedFunction(handleEntered, onEntered),
-    onExited: createChainedFunction(handleExited, onExited),
-    speaker: renderPopup
-  }, /*#__PURE__*/React.createElement(Box, {
-    as: as,
-    className: classes,
+    speaker: renderPopup,
+    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,
     disabled: disabled,
@@ -304,12 +300,13 @@ const CheckPicker = forwardRef((props, ref) => {
     onKeyDown: onPickerKeyDown,
     as: toggleAs,
     cleanable: cleanable && !disabled,
+    countable: countable,
     hasValue: hasValue,
     active: active,
     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)));
 });
 CheckPicker.displayName = 'CheckPicker';
 export default CheckPicker;

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';
@@ -82,7 +83,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';
@@ -108,6 +108,7 @@ import type { TreePickerProps } from '../TreePicker';
 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 +171,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>;
@@ -196,7 +198,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>;
@@ -222,5 +223,6 @@ export interface ReactSuiteComponents {
     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]);
 };