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

package/esm/AutoComplete/AutoComplete.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BoxProps } from '../internals/Box';
 import type { FormControlPickerProps, Placement, Option, Size, ListboxProps, PopupProps } from '../internals/types';
+import type { BoxProps } from '../internals/Box';
 export interface AutoCompleteProps<T = string> extends BoxProps, FormControlPickerProps<T, any, Option | string>, ListboxProps, PopupProps {
     /** The placement of component */
     placement?: Placement;

package/esm/AutoComplete/AutoComplete.js

@@ -5,12 +5,11 @@ import pick from 'lodash/pick';
 import omit from 'lodash/omit';
 import Combobox from "./Combobox.js";
 import Plaintext from "../internals/Plaintext/index.js";
-import Box from "../internals/Box/index.js";
 import { useStyles, useControlled, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, mergeRefs, partitionHTMLProps } from "../internals/utils/index.js";
-import { PickerToggleTrigger, onMenuKeyDown, Listbox, ListItem, PickerPopup, useFocusItemValue, usePickerRef, pickTriggerPropKeys } from "../internals/Picker/index.js";
 import { transformData, shouldDisplay } from "./utils.js";
 import { useCustom } from "../CustomProvider/index.js";
+import { PickerToggleTrigger, onMenuKeyDown, Listbox, ListItem, PickerPopup, useFocusItemValue, usePickerRef, triggerPropKeys } from "../internals/Picker/index.js";
 /**
  * Autocomplete function of input field.
  * @see https://rsuitejs.com/components/auto-complete
@@ -147,7 +146,7 @@ const AutoComplete = forwardRef((props, ref) => {
   const classes = merge(className, withPrefix({
     disabled
   }));
-  const [htmlInputProps, restProps] = partitionHTMLProps(omit(rest, pickTriggerPropKeys));
+  const [htmlInputProps, restProps] = partitionHTMLProps(omit(rest, triggerPropKeys));
   const renderPopup = (positionProps, speakerRef) => {
     const {
       className
@@ -179,19 +178,22 @@ const AutoComplete = forwardRef((props, ref) => {
     }, typeof value === 'undefined' ? defaultValue : value);
   }
   const expanded = open || focus && hasItems;
-  return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+  const triggerProps = {
+    ...pick(props, triggerPropKeys),
+    open: expanded
+  };
+  return /*#__PURE__*/React.createElement(PickerToggleTrigger, _extends({
+    as: as,
     id: id,
     ref: trigger,
     placement: placement,
-    pickerProps: pick(props, pickTriggerPropKeys),
+    triggerProps: triggerProps,
     trigger: ['click', 'focus'],
-    open: expanded,
-    speaker: renderPopup
-  }, /*#__PURE__*/React.createElement(Box, _extends({
-    as: as,
+    speaker: renderPopup,
     className: classes,
     style: style,
-    ref: root
+    rootRef: root,
+    responsive: false
   }, restProps), /*#__PURE__*/React.createElement(Combobox, _extends({}, htmlInputProps, {
     disabled: disabled,
     value: value,
@@ -203,7 +205,7 @@ const AutoComplete = forwardRef((props, ref) => {
     onFocus: handleInputFocus,
     onChange: handleChange,
     onKeyDown: handleKeyDownEvent
-  }))));
+  })));
 });
 AutoComplete.displayName = 'AutoComplete';
 export default AutoComplete;

package/esm/Avatar/Avatar.d.ts

@@ -1,13 +1,12 @@
 import React, { CSSProperties } from 'react';
+import { StyledBoxProps } from '../internals/StyledBox';
 import type { BoxProps } from '../internals/Box';
-import type { ColorScheme, Size } from '../internals/types';
+import type { ColorScheme } from '../internals/types';
 export interface AvatarProps extends BoxProps {
     /**
      * A avatar can have different sizes.
-     *
-     * @default 'md'
      */
-    size?: Size;
+    size?: StyledBoxProps['size'];
     /**
      * The `src` attribute for the `img` element.
      */

package/esm/Breadcrumb/Breadcrumb.js

@@ -4,7 +4,7 @@ import React, { useState, useMemo } from 'react';
 import BreadcrumbItem from "./BreadcrumbItem.js";
 import StyledBox from "../internals/StyledBox/index.js";
 import { useStyles, useEventCallback } from "../internals/hooks/index.js";
-import { forwardRef, ReactChildren, createComponent } from "../internals/utils/index.js";
+import { forwardRef, rch, createComponent } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 const Subcomponents = {
   Item: BreadcrumbItem
@@ -46,8 +46,8 @@ const Breadcrumb = forwardRef((props, ref) => {
     onExpand === null || onExpand === void 0 || onExpand(event);
   });
   const content = useMemo(() => {
-    const count = ReactChildren.count(children);
-    const items = ReactChildren.mapCloneElement(children, (item, index) => {
+    const count = rch.count(children);
+    const items = rch.mapCloneElement(children, (item, index) => {
       const isLast = index === count - 1;
       return {
         ...item.props,

package/esm/Breadcrumb/BreadcrumbItem.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import SafeAnchor from "../SafeAnchor/index.js";
+import SafeAnchor from "../internals/SafeAnchor/index.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";

package/esm/Button/Button.js

@@ -3,9 +3,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext, useMemo } from 'react';
 import Ripple from "../internals/Ripple/index.js";
 import Box from "../internals/Box/index.js";
-import SafeAnchor from "../SafeAnchor/index.js";
+import SafeAnchor from "../internals/SafeAnchor/index.js";
 import { ButtonGroupContext } from "../ButtonGroup/index.js";
-import { forwardRef, isOneOf } from "../internals/utils/index.js";
+import { forwardRef, isOneOf, isDisableableElement } from "../internals/utils/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
@@ -13,7 +13,6 @@ import { useCustom } from "../CustomProvider/index.js";
  * @see https://rsuitejs.com/components/button
  */
 const Button = forwardRef((props, ref) => {
-  var _rest$role;
   const {
     propsWithDefaults
   } = useCustom('Button', props);
@@ -29,6 +28,7 @@ const Button = forwardRef((props, ref) => {
     color,
     disabled = buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.disabled,
     loading,
+    role,
     ripple = true,
     size = (buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.size) || 'md',
     startIcon,
@@ -72,18 +72,17 @@ const Button = forwardRef((props, ref) => {
   });
   const buttonAs = as || (rest.href ? SafeAnchor : 'button');
   const isCustomElement = buttonAs !== 'button' && buttonAs !== SafeAnchor;
-  const type = typeProp !== null && typeProp !== void 0 ? typeProp : buttonAs === 'button' ? 'button' : undefined;
-  const role = (_rest$role = rest.role) !== null && _rest$role !== void 0 ? _rest$role : isCustomElement ? 'button' : undefined;
-  return /*#__PURE__*/React.createElement(Box, _extends({}, rest, {
+  const uncertainProps = {
+    [isDisableableElement(buttonAs) || buttonAs === SafeAnchor ? 'disabled' : 'aria-disabled']: disabled,
+    type: typeProp !== null && typeProp !== void 0 ? typeProp : buttonAs === 'button' ? 'button' : undefined,
+    role: role !== null && role !== void 0 ? role : isCustomElement ? 'button' : undefined
+  };
+  return /*#__PURE__*/React.createElement(Box, _extends({
     as: buttonAs,
-    role: role,
-    type: type,
     ref: ref,
-    disabled: disabled,
-    "aria-disabled": disabled,
     className: classes,
     onClick: handleClick
-  }), buttonContent);
+  }, uncertainProps, rest), buttonContent);
 });
 Button.displayName = 'Button';
 export default Button;

package/esm/Carousel/Carousel.js

@@ -4,7 +4,7 @@ import React, { useState, useMemo, useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import Box from "../internals/Box/index.js";
 import { useStyles, useControlled, useUpdateEffect, useTimeout } from "../internals/hooks/index.js";
-import { forwardRef, guid, ReactChildren, mergeRefs } from "../internals/utils/index.js";
+import { forwardRef, guid, rch, mergeRefs } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * The Carousel component is used to display a series of content.
@@ -36,7 +36,7 @@ const Carousel = forwardRef((props, ref) => {
     merge,
     withPrefix
   } = useStyles(classPrefix);
-  const count = ReactChildren.count(children);
+  const count = rch.count(children);
   const labels = [];
   const vertical = placement === 'left' || placement === 'right';
   const lengthKey = vertical ? 'height' : 'width';
@@ -81,7 +81,7 @@ const Carousel = forwardRef((props, ref) => {
     onSlideEnd === null || onSlideEnd === void 0 || onSlideEnd(activeIndex, event);
   }, [activeIndex, onSlideEnd]);
   const uniqueId = useMemo(() => guid(), []);
-  const items = ReactChildren.map(children, (child, index) => {
+  const items = rch.map(children, (child, index) => {
     var _child$props;
     if (!child) {
       return;

package/esm/Cascader/Cascader.js

@@ -1,19 +1,17 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useCallback, useMemo } from 'react';
-import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import TreeView from "../CascadeTree/TreeView.js";
 import SearchView from "../CascadeTree/SearchView.js";
-import Box from "../internals/Box/index.js";
 import { usePaths, useSelect, useSearch } from "../CascadeTree/hooks/index.js";
 import { flattenTree } from "../Tree/utils/index.js";
 import { findNodeOfTree, getParentMap } from "../internals/Tree/utils/index.js";
 import { useControlled, useStyles, useEventCallback, useMap } from "../internals/hooks/index.js";
 import { forwardRef, createChainedFunction, mergeRefs, shallowEqual } from "../internals/utils/index.js";
-import { PickerToggle, PickerPopup, PickerToggleTrigger, usePickerClassName, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys } from "../internals/Picker/index.js";
+import { PickerToggle, PickerPopup, PickerToggleTrigger, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, triggerPropKeys } from "../internals/Picker/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import useActive from "./useActive.js";
 const emptyArray = [];
@@ -27,41 +25,43 @@ const Cascader = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Cascader', props);
   const {
+    appearance = 'default',
     as,
-    data = emptyArray,
+    block,
+    className,
+    cleanable = true,
     classPrefix = 'picker',
-    childrenKey = 'children',
-    valueKey = 'value',
-    labelKey = 'label',
+    columnHeight,
+    columnWidth,
+    data = emptyArray,
     defaultValue,
-    placeholder,
     disabled,
     disabledItemValues = emptyArray,
-    appearance = 'default',
-    cleanable = true,
+    childrenKey = 'children',
+    id,
+    labelKey = 'label',
     locale,
-    toggleAs,
-    style,
-    value: valueProp,
-    popupClassName,
-    popupStyle,
-    columnHeight,
-    columnWidth,
-    searchable = true,
     parentSelectable,
+    placeholder,
     placement = 'bottomStart',
-    id,
+    popupClassName,
+    popupStyle,
     renderColumn,
-    renderTreeNode,
+    renderExtraFooter,
     renderSearchItem,
+    renderTreeNode,
     renderValue,
-    renderExtraFooter,
-    onEntered,
-    onExited,
+    searchable = true,
+    style,
+    toggleAs,
+    value: valueProp,
+    valueKey = 'value',
     onClean,
     onChange,
-    onSelect,
+    onEnter,
+    onExit,
     onSearch,
+    onSelect,
     getChildren,
     ...rest
   } = propsWithDefaults;
@@ -204,11 +204,10 @@ const Cascader = forwardRef((props, ref) => {
   });
   const {
     active,
-    handleEntered,
-    handleExited
+    events
   } = useActive({
-    onEntered,
-    onExited,
+    onEnter,
+    onExit,
     target,
     setSearchKeyword
   });
@@ -341,29 +340,27 @@ const Cascader = forwardRef((props, ref) => {
       hasValue = false;
     }
   }
-  const [classes, usedClassNamePropKeys] = usePickerClassName({
-    ...props,
-    classPrefix,
-    hasValue,
-    name: 'cascader',
-    appearance,
-    cleanable
-  });
+  const triggerProps = {
+    ...pick(props, triggerPropKeys),
+    ...events
+  };
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    as: as,
     id: id,
+    name: "cascader",
+    block: block,
+    disabled: disabled,
+    appearance: appearance,
     popupType: "tree",
-    pickerProps: pick(props, pickTriggerPropKeys),
+    triggerProps: triggerProps,
     ref: trigger,
     placement: placement,
-    onEntered: handleEntered,
-    onExited: handleExited,
-    speaker: renderTreeView
-  }, /*#__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,
     as: toggleAs,
     appearance: appearance,
@@ -376,7 +373,7 @@ const Cascader = forwardRef((props, ref) => {
     placement: placement,
     inputValue: value !== null && value !== void 0 ? value : '',
     focusItemValue: focusItemValue
-  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));
+  }, rest), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));
 });
 Cascader.displayName = 'Cascader';
 export default Cascader;

package/esm/Cascader/useActive.d.ts

@@ -3,13 +3,15 @@ interface UseActiveProps {
     target: React.RefObject<HTMLElement | null>;
     onOpen?: () => void;
     onClose?: () => void;
-    onEntered?: (node: HTMLElement) => void;
-    onExited?: (node: HTMLElement) => void;
+    onEnter?: (node: HTMLElement) => void;
+    onExit?: (node: HTMLElement) => void;
     setSearchKeyword: (keyword: string) => void;
 }
 declare const useActive: (props: UseActiveProps) => {
     active: boolean;
-    handleEntered: (...args: any[]) => any;
-    handleExited: (...args: any[]) => any;
+    events: {
+        onEnter: (...args: any[]) => any;
+        onExit: (...args: any[]) => any;
+    };
 };
 export default useActive;

package/esm/Cascader/useActive.js

@@ -5,23 +5,23 @@ const useActive = props => {
   const {
     onOpen,
     onClose,
-    onEntered,
-    onExited,
     target,
     setSearchKeyword
   } = props;
   // Use component active state to support keyboard events.
   const [active, setActive] = useState(false);
-  const handleEntered = useEventCallback(node => {
-    onEntered === null || onEntered === void 0 || onEntered(node);
+  const onEnter = useEventCallback(node => {
+    var _props$onEnter;
+    (_props$onEnter = props.onEnter) === null || _props$onEnter === void 0 || _props$onEnter.call(props, node);
     if (!target.current) {
       return;
     }
     onOpen === null || onOpen === void 0 || onOpen();
     setActive(true);
   });
-  const handleExited = useEventCallback(node => {
-    onExited === null || onExited === void 0 || onExited(node);
+  const onExit = useEventCallback(node => {
+    var _props$onExit;
+    (_props$onExit = props.onExit) === null || _props$onExit === void 0 || _props$onExit.call(props, node);
     if (!target.current) {
       return;
     }
@@ -31,8 +31,10 @@ const useActive = props => {
   });
   return {
     active,
-    handleEntered,
-    handleExited
+    events: {
+      onEnter,
+      onExit
+    }
   };
 };
 export default useActive;

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;