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

package/cjs/CheckPicker/CheckPicker.js

@@ -9,11 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _clone = _interopRequireDefault(require("lodash/clone"));
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 var _remove = _interopRequireDefault(require("lodash/remove"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
-var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/Tree/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -31,33 +29,35 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.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,
@@ -68,8 +68,7 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
     onGroupTitleClick,
     onSearch,
     onEnter,
-    onEntered,
-    onExited,
+    onExit,
     onClean,
     onChange,
     onSelect,
@@ -187,10 +186,10 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
     handleSelect(nextValue, item, event);
     handleChangeValue(nextValue, event);
   });
-  const handleEntered = (0, _hooks.useEventCallback)(() => {
+  const handleEnter = (0, _hooks.useEventCallback)(() => {
     setActive(true);
   });
-  const handleExited = (0, _hooks.useEventCallback)(() => {
+  const handleExit = (0, _hooks.useEventCallback)(() => {
     resetSearch();
     setFocusItemValue(null);
     setActive(false);
@@ -279,31 +278,28 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
       inputRef: searchInput
     }), renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
-  const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({
-    ...props,
-    appearance,
-    classPrefix,
-    cleanable,
-    countable,
-    hasValue,
-    name: 'check'
-  });
+  const triggerProps = {
+    ...(0, _pick.default)(props, _Picker.triggerPropKeys),
+    onEnter: (0, _utils2.createChainedFunction)(initStickyItems, handleEnter, onEnter),
+    onExit: (0, _utils2.createChainedFunction)(handleExit, onExit)
+  };
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+    as: as,
     id: id,
     multiple: true,
-    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
+    name: "check",
+    block: block,
+    disabled: disabled,
+    appearance: appearance,
+    triggerProps: triggerProps,
     ref: trigger,
     placement: placement,
-    onEnter: (0, _utils2.createChainedFunction)(initStickyItems, onEnter),
-    onEntered: (0, _utils2.createChainedFunction)(handleEntered, onEntered),
-    onExited: (0, _utils2.createChainedFunction)(handleExited, onExited),
-    speaker: renderPopup
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    as: as,
-    className: classes,
+    speaker: renderPopup,
+    rootRef: root,
     style: style,
-    ref: root
-  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys]), {
+    classPrefix: classPrefix,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({
     ref: target,
     appearance: appearance,
     disabled: disabled,
@@ -311,12 +307,13 @@ const CheckPicker = (0, _utils2.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';
 var _default = exports.default = CheckPicker;

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -8,7 +8,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _CheckTreeView = _interopRequireDefault(require("../CheckTree/CheckTreeView"));
-var _Box = _interopRequireDefault(require("../internals/Box"));
 var _useTreeValue = _interopRequireDefault(require("../CheckTree/hooks/useTreeValue"));
 var _useFlattenTree = _interopRequireDefault(require("../Tree/hooks/useFlattenTree"));
 var _useTreeWithChildren = _interopRequireDefault(require("../Tree/hooks/useTreeWithChildren"));
@@ -17,7 +16,6 @@ var _useFocusState = _interopRequireDefault(require("./hooks/useFocusState"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _Picker = require("../internals/Picker");
@@ -39,9 +37,11 @@ const CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {
     as,
     id,
     appearance = 'default',
+    block,
     cleanable = true,
     countable = true,
     cascade = true,
+    className,
     classPrefix = 'picker',
     childrenKey = 'children',
     disabled,
@@ -58,11 +58,11 @@ const CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {
     placement = 'bottomStart',
     treeHeight = 320,
     toggleAs,
-    style,
     searchBy,
     searchKeyword,
     showIndentLine,
     searchable = true,
+    style,
     valueKey = 'value',
     value: controlledValue,
     virtualized = false,
@@ -257,35 +257,33 @@ const CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {
       }
     }
   }
-  const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({
-    ...props,
-    classPrefix,
-    appearance,
-    countable,
-    cleanable,
-    disabled,
-    hasValue: hasValidValue,
-    name: 'check-tree'
-  });
-  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+    as: as,
     id: id,
+    name: "check-tree",
+    block: block,
+    disabled: disabled,
+    appearance: appearance,
     popupType: "tree",
     multiple: true,
-    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
+    triggerProps: {
+      ...(0, _pick.default)(props, _Picker.triggerPropKeys),
+      ...triggerProps
+    },
     ref: trigger,
     placement: placement,
-    speaker: renderTreeView
-  }, triggerProps), /*#__PURE__*/_react.default.createElement(_Box.default, {
-    as: as,
-    className: classes,
+    speaker: renderTreeView,
+    rootRef: root,
     style: style,
-    ref: root
-  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys]), {
+    classPrefix: classPrefix,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({
     ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
     cleanable: cleanable && !disabled,
+    countable: countable,
     disabled: disabled,
     as: toggleAs,
     hasValue: hasValidValue,
@@ -293,7 +291,7 @@ const CheckTreePicker = (0, _utils.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';
 var _default = exports.default = CheckTreePicker;

package/cjs/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/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';
@@ -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/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;