rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/esm/InputGroup/InputGroupButton.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import Button from "../Button/index.js";
 /**
  * The `InputGroup.Button` component is used to specify an input field with an add-on.
@@ -14,13 +14,10 @@ const InputGroupButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const {
-    withClassPrefix: withAddOnClassPrefix
-  } = useClassNames('input-group-addon');
-  const classes = merge(withAddOnClassPrefix(), className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
     ref: ref,
     className: classes

package/esm/InputNumber/InputNumber.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps, SizeType, AppearanceType, FormControlBaseProps } from '../internals/types';
-export interface InputNumberProps<T = number | string | null> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'prefix'>, WithAsProps, FormControlBaseProps<T> {
+import type { SanitizedInputProps, FormControlBaseProps, AppearanceType, WithAsProps, Size } from '../internals/types';
+export interface InputNumberProps<T = number | string | null> extends Omit<SanitizedInputProps, 'value' | 'defaultValue' | 'prefix'>, WithAsProps, FormControlBaseProps<T> {
     /**
      * Button can have different appearances
      */
@@ -45,7 +45,7 @@ export interface InputNumberProps<T = number | string | null> extends Omit<React
     /**
      * An Input can have different sizes
      */
-    size?: SizeType;
+    size?: Size;
     /**
      * Whether the value can be changed through the wheel event
      */

package/esm/InputNumber/InputNumber.js

@@ -9,7 +9,7 @@ import InputGroup from "../InputGroup/InputGroup.js";
 import InputGroupAddon from "../InputGroup/InputGroupAddon.js";
 import Input from "../Input/index.js";
 import Button from "../Button/index.js";
-import { useClassNames, useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { KEY_VALUES } from "../internals/constants/index.js";
 import { forwardRef, partitionHTMLProps, createChainedFunction } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -104,13 +104,13 @@ const InputNumber = forwardRef((props, ref) => {
   const [value, setValue] = useControlled(valueProp, defaultValue);
   const [isFocused, setIsFocused] = useState(false);
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   const [htmlInputProps, rest] = partitionHTMLProps(restProps);
-  const inputRef = useRef();
+  const inputRef = useRef(null);
   const getSafeValue = value => {
     if (!Number.isNaN(value)) {
       if (+value > max) {
@@ -274,14 +274,16 @@ const InputNumber = forwardRef((props, ref) => {
     className: prefix('touchspin-up'),
     onClick: handleStepUp,
     disabled: stepUpDisabled,
-    "aria-label": "Increment"
+    "aria-label": "Increment",
+    size: size
   }, /*#__PURE__*/React.createElement(ArrowUpLineIcon, null)), /*#__PURE__*/React.createElement(Button, {
     tabIndex: -1,
     appearance: buttonAppearance,
     className: prefix('touchspin-down'),
     onClick: handleStepDown,
     disabled: stepDownDisabled,
-    "aria-label": "Decrement"
+    "aria-label": "Decrement",
+    size: size
   }, /*#__PURE__*/React.createElement(ArrowDownLineIcon, null))), postfix && /*#__PURE__*/React.createElement(InputGroupAddon, null, postfix));
 });
 InputNumber.displayName = 'InputNumber';

package/esm/InputPicker/InputPicker.d.ts

@@ -1,22 +1,22 @@
 import React from 'react';
-import { type InputItemDataType } from './hooks/useData';
+import { type InputOption } from './hooks/useData';
 import { PickerToggleProps } from '../internals/Picker';
-import type { ItemDataType, FormControlPickerProps } from '../internals/types';
+import type { Option, FormControlPickerProps } from '../internals/types';
 import type { InputPickerLocale } from '../locales';
 import type { SelectProps } from '../SelectPicker';
 export type ValueType = any;
-export interface InputPickerProps<V = ValueType> extends FormControlPickerProps<V, InputPickerLocale, InputItemDataType>, SelectProps<V>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
+export interface InputPickerProps<V = ValueType> extends FormControlPickerProps<V, InputPickerLocale, InputOption>, Omit<SelectProps<V>, 'renderValue'>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
     tabIndex?: number;
     /** Settings can create new options */
     creatable?: boolean;
     /** Option to cache value when searching asynchronously */
-    cacheData?: InputItemDataType<V>[];
+    cacheData?: InputOption<V>[];
     /** The `onBlur` attribute for the `input` element. */
     onBlur?: React.FocusEventHandler;
     /** The `onFocus` attribute for the `input` element. */
     onFocus?: React.FocusEventHandler;
     /** Called when the option is created */
-    onCreate?: (value: V, item: ItemDataType, event: React.SyntheticEvent) => void;
+    onCreate?: (value: V, item: Option, event: React.SyntheticEvent) => void;
     /**
      * Customize whether to display "Create option" action with given textbox value
      *
@@ -25,7 +25,8 @@ export interface InputPickerProps<V = ValueType> extends FormControlPickerProps<
      * @param searchKeyword Value of the textbox
      * @param filteredData The items filtered by the searchKeyword
      */
-    shouldDisplayCreateOption?: (searchKeyword: string, filteredData: InputItemDataType<V>[]) => boolean;
+    shouldDisplayCreateOption?: (searchKeyword: string, filteredData: InputOption<V>[]) => boolean;
+    renderValue?: (value: V, item: Option<V>, selectedElement: React.ReactNode) => React.ReactNode;
 }
 /**
  * Single item selector with text box input.

package/esm/InputPicker/InputPicker.js

@@ -15,13 +15,14 @@ import useInput from "./hooks/useInput.js";
 import useData from "./hooks/useData.js";
 import Plaintext from "../internals/Plaintext/index.js";
 import { filterNodesOfTree } from "../internals/Tree/utils/index.js";
-import { useClassNames, useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { KEY_VALUES } from "../internals/constants/index.js";
 import { useTagContext } from "./InputPickerContext.js";
 import { convertSize } from "./utils.js";
 import { useCustom } from "../CustomProvider/index.js";
-import { forwardRef, shallowEqual, getDataGroupBy, createChainedFunction, tplTransform, mergeRefs, isOneOf } from "../internals/utils/index.js";
+import { forwardRef, shallowEqual, getDataGroupBy, createChainedFunction, tplTransform, mergeRefs, isOneOf, mergeStyles } from "../internals/utils/index.js";
 import { Listbox, ListItem, ListCheckItem, PickerToggle, PickerPopup, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePickerRef, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys } from "../internals/Picker/index.js";
+import { getPositionStyle } from "../internals/Overlay/Position.js";
 /**
  * Single item selector with text box input.
  *
@@ -47,16 +48,16 @@ const InputPicker = forwardRef((props, ref) => {
     locale,
     toggleAs,
     style,
-    size,
+    size = 'md',
     searchable = true,
     open: controlledOpen,
     placeholder,
     placement = 'bottomStart',
     groupBy,
-    menuClassName,
-    menuStyle,
-    menuAutoWidth = true,
-    menuMaxHeight = 320,
+    popupClassName,
+    popupStyle,
+    popupAutoWidth = true,
+    listboxMaxHeight = 320,
     creatable,
     shouldDisplayCreateOption,
     value: valueProp,
@@ -67,11 +68,11 @@ const InputPicker = forwardRef((props, ref) => {
     id,
     tabIndex,
     sort,
-    renderMenu,
+    renderListbox,
     renderExtraFooter,
     renderValue,
-    renderMenuItem,
-    renderMenuGroup,
+    renderOption,
+    renderOptionGroup,
     onEnter,
     onEntered,
     onExit,
@@ -107,7 +108,7 @@ const InputPicker = forwardRef((props, ref) => {
   const {
     prefix,
     merge
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const [open, setOpen] = useControlled(controlledOpen, defaultOpen);
   const {
     inputRef,
@@ -352,7 +353,13 @@ const InputPicker = forwardRef((props, ref) => {
     handleChange(val, event);
   });
   const handleClean = useEventCallback(event => {
-    if (disabled || searchKeyword !== '') {
+    if (disabled) {
+      return;
+    }
+
+    // When there is a value in the search box and the user presses the delete key on the keyboard,
+    // do not trigger clearing
+    if (inputRef.current === event.target && searchKeyword !== '') {
       return;
     }
     setValue(null);
@@ -424,7 +431,7 @@ const InputPicker = forwardRef((props, ref) => {
   const renderListItem = (label, item) => {
     // 'Create option "{0}"' =>  Create option "xxxxx"
     const newLabel = item.create ? /*#__PURE__*/React.createElement("span", null, tplTransform((locale === null || locale === void 0 ? void 0 : locale.createOption) || '', label)) : label;
-    return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;
+    return renderOption ? renderOption(newLabel, item) : newLabel;
   };
   const checkValue = () => {
     if (multi) {
@@ -481,17 +488,13 @@ const InputPicker = forwardRef((props, ref) => {
   };
   const renderPopup = (positionProps, speakerRef) => {
     const {
+      className,
       left,
-      top,
-      className
+      top
     } = positionProps;
     const menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';
-    const classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));
-    const styles = {
-      ...menuStyle,
-      left,
-      top
-    };
+    const classes = merge(className, popupClassName, prefix(multi ? 'check-menu' : 'select-menu'));
+    const mergedPopupStyle = mergeStyles(getPositionStyle(left, top), popupStyle);
     let items = filterNodesOfTree(data, checkShouldDisplay);
     if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(item => item[valueKey] === searchKeyword))) {
       items = [...items, createOption(searchKeyword)];
@@ -508,7 +511,7 @@ const InputPicker = forwardRef((props, ref) => {
         ref: mergeRefs(overlay, speakerRef)
       });
     }
-    const menu = items.length ? /*#__PURE__*/React.createElement(Listbox, {
+    const listbox = items.length ? /*#__PURE__*/React.createElement(Listbox, {
       listProps: listProps,
       listRef: list,
       disabledItemValues: disabledItemValues,
@@ -522,25 +525,25 @@ const InputPicker = forwardRef((props, ref) => {
       },
       activeItemValues: multi ? value : [value],
       focusItemValue: focusItemValue,
-      maxHeight: menuMaxHeight,
+      maxHeight: listboxMaxHeight,
       data: items,
       query: searchKeyword,
       groupBy: groupBy,
       onSelect: multi ? handleCheckTag : handleSelectItem,
-      renderMenuGroup: renderMenuGroup,
-      renderMenuItem: renderListItem,
+      renderOptionGroup: renderOptionGroup,
+      renderOption: renderListItem,
       virtualized: virtualized
     }) : /*#__PURE__*/React.createElement("div", {
       className: prefix`none`
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
     return /*#__PURE__*/React.createElement(PickerPopup, {
       ref: mergeRefs(overlay, speakerRef),
-      autoWidth: menuAutoWidth,
+      autoWidth: popupAutoWidth,
       className: classes,
-      style: styles,
+      style: mergedPopupStyle,
       target: triggerRef,
       onKeyDown: onPickerKeyDown
-    }, renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
+    }, renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
   const {
     isValid,
@@ -580,7 +583,6 @@ const InputPicker = forwardRef((props, ref) => {
       plaintextProps.as = Stack;
       plaintextProps.spacing = 6;
       plaintextProps.wrap = true;
-      plaintextProps.childrenRenderMode = 'clone';
     }
     return /*#__PURE__*/React.createElement(Plaintext, _extends({
       localeKey: "notSelected",
@@ -624,7 +626,7 @@ const InputPicker = forwardRef((props, ref) => {
     caret: !disabledOptions,
     size: size
   }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/React.createElement(TextBox, {
-    showTagList: hasValue && multi,
+    showTagList: multi,
     inputRef: inputRef,
     inputValue: open ? searchKeyword : '',
     inputProps: inputProps,

package/esm/InputPicker/InputSearch.d.ts

@@ -1,6 +1,6 @@
-import React, { HTMLAttributes } from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface InputSearchProps extends WithAsProps, Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {
+import React from 'react';
+import type { WithAsProps, HTMLPropsWithoutChange } from '../internals/types';
+export interface InputSearchProps extends WithAsProps, HTMLPropsWithoutChange<HTMLInputElement> {
     readOnly?: boolean;
     value?: string;
     inputStyle?: React.CSSProperties;

package/esm/InputPicker/InputSearch.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import { forwardRef } from "../internals/utils/index.js";
-import { useClassNames, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useEventCallback } from "../internals/hooks/index.js";
 const InputSearch = forwardRef((props, ref) => {
   const {
     as: Component = 'input',
@@ -21,11 +21,11 @@ const InputSearch = forwardRef((props, ref) => {
     onChange === null || onChange === void 0 || onChange(event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
   });
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: classes,

package/esm/InputPicker/TagList.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import useCombobox from "../internals/Picker/hooks/useCombobox.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 const TagList = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     children,
@@ -10,7 +10,7 @@ const TagList = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const {
     prefix
-  } = useClassNames('picker');
+  } = useStyles('picker');
   const {
     id
   } = useCombobox();

package/esm/InputPicker/TextBox.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import TagList from "./TagList.js";
 import InputSearch from "./InputSearch.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 const TextBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     tags,
@@ -22,14 +22,11 @@ const TextBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const {
     prefix
-  } = useClassNames('picker');
+  } = useStyles('picker');
   if (!multiple && disabled) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: prefix`textbox`,
-    ref: ref
-  }, rest), showTagList ? /*#__PURE__*/React.createElement(TagList, null, tags) : null, editable && /*#__PURE__*/React.createElement(InputSearch, _extends({}, inputProps, {
+  const input = editable ? /*#__PURE__*/React.createElement(InputSearch, _extends({}, inputProps, {
     tabIndex: -1,
     readOnly: readOnly,
     onBlur: onBlur,
@@ -37,7 +34,11 @@ const TextBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     inputRef: inputRef,
     onChange: onChange,
     value: inputValue
-  })));
+  })) : null;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: prefix`textbox`,
+    ref: ref
+  }, rest), showTagList ? /*#__PURE__*/React.createElement(TagList, null, tags, input) : input);
 });
 TextBox.displayName = 'TextBox';
 export default TextBox;

package/esm/InputPicker/hooks/useData.d.ts

@@ -1,17 +1,17 @@
 /// <reference types="react" />
-import type { ItemDataType } from '../../internals/types';
-export interface InputItemDataType<T = number | string> extends ItemDataType<T> {
+import type { Option } from '../../internals/types';
+export interface InputOption<T = number | string> extends Option<T> {
     create?: boolean;
 }
 interface UseDataProps {
-    controlledData?: InputItemDataType[];
-    cacheData?: InputItemDataType[];
-    onChange?: (data: ItemDataType[]) => void;
+    controlledData?: InputOption[];
+    cacheData?: InputOption[];
+    onChange?: (data: Option[]) => void;
 }
 declare function useData(props: UseDataProps): {
-    data: ItemDataType<string | number>[];
-    dataWithCache: ItemDataType<string | number>[];
-    newData: InputItemDataType<string | number>[];
-    setNewData: import("react").Dispatch<import("react").SetStateAction<InputItemDataType<string | number>[]>>;
+    data: Option<string | number>[];
+    dataWithCache: Option<string | number>[];
+    newData: InputOption<string | number>[];
+    setNewData: import("react").Dispatch<import("react").SetStateAction<InputOption<string | number>[]>>;
 };
 export default useData;

package/esm/InputPicker/hooks/useInput.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import type { OverlayTriggerHandle } from '../../internals/Picker/PickerToggleTrigger';
+import type { OverlayTriggerHandle } from '../../internals/Overlay';
 import type { InputSearchProps } from '../InputSearch';
 interface InputProps {
     multi?: boolean;
-    triggerRef: React.RefObject<OverlayTriggerHandle>;
+    triggerRef: React.RefObject<OverlayTriggerHandle | null>;
 }
 declare function useInput(props: InputProps): {
     inputProps: InputSearchProps;
-    inputRef: React.MutableRefObject<any>;
+    inputRef: React.RefObject<any>;
     focus: () => void;
     blur: () => void;
 };

package/esm/InputPicker/hooks/useInput.js

@@ -8,7 +8,7 @@ function useInput(props) {
     multi,
     triggerRef
   } = props;
-  const inputRef = useRef();
+  const inputRef = useRef(null);
   const maxWidth = useMaxWidth(triggerRef);
   const getInput = useCallback(() => {
     var _inputRef$current;

package/esm/InputPicker/hooks/useMaxWidth.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { OverlayTriggerHandle } from '../../internals/Picker/PickerToggleTrigger';
-declare function useMaxWidth(triggerRef: React.RefObject<OverlayTriggerHandle>): number;
+import type { OverlayTriggerHandle } from '../../internals/Overlay';
+declare function useMaxWidth(triggerRef: React.RefObject<OverlayTriggerHandle | null>): number;
 export default useMaxWidth;

package/esm/InputPicker/utils.d.ts

@@ -1 +1 @@
-export declare const convertSize: (size?: string) => "lg" | "md" | "sm";
+export declare const convertSize: (size?: string) => "sm" | "md" | "lg";

package/esm/Kbd/Kbd.d.ts

@@ -0,0 +1,15 @@
+import type { WithAsProps, Size } from '../internals/types';
+export interface KbdProps extends WithAsProps {
+    /**
+     * Sets Kbd size.
+     */
+    size?: Size;
+}
+/**
+ *
+ * The `Kbd` component is used to display a Kbd.
+ *
+ * @see https://rsuitejs.com/components/kbd
+ */
+declare const Kbd: import("../internals/types").InternalRefForwardingComponent<"kbd", KbdProps, never> & Record<string, never>;
+export default Kbd;

package/esm/Kbd/Kbd.js

@@ -0,0 +1,35 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import { forwardRef } from "../internals/utils/index.js";
+import { useStyles } from "../internals/hooks/index.js";
+import { useCustom } from "../CustomProvider/index.js";
+/**
+ *
+ * The `Kbd` component is used to display a Kbd.
+ *
+ * @see https://rsuitejs.com/components/kbd
+ */
+const Kbd = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('Kbd', props);
+  const {
+    as: Component = 'kbd',
+    classPrefix = 'kbd',
+    className,
+    size = 'md',
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withPrefix,
+    merge
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix(size));
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    ref: ref,
+    className: classes
+  }));
+});
+Kbd.displayName = 'Kbd';
+export default Kbd;

package/esm/Kbd/index.d.ts

@@ -0,0 +1,4 @@
+import Kbd from './Kbd';
+export type { KbdProps } from './Kbd';
+export { Kbd };
+export default Kbd;

package/esm/Kbd/index.js

@@ -0,0 +1,8 @@
+'use client';
+import Kbd from "./Kbd.js";
+
+// export types
+
+// export components
+export { Kbd };
+export default Kbd;

package/esm/List/List.js

@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import useSortHelper from "./helper/useSortHelper.js";
 import ListContext from "./ListContext.js";
 import ListItem from "./ListItem.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef, mergeRefs } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 const Subcomponents = {
@@ -39,9 +39,9 @@ const List = forwardRef((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const {
     containerRef,
     register,
@@ -57,7 +57,7 @@ const List = forwardRef((props, ref) => {
     pressDelay,
     transitionDuration
   });
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     bordered,
     sortable,
     sorting,

package/esm/List/ListItem.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext, useEffect, useRef } from 'react';
 import ListContext from "./ListContext.js";
 import { forwardRef, mergeRefs } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 /**
  * The `List.Item` component is used to specify the layout of the list item.
  * @see https://rsuitejs.com/components/list
@@ -27,9 +27,9 @@ const ListItem = forwardRef((props, ref) => {
   } = useContext(ListContext);
   const size = sizeProp || parentSize;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const listItemRef = useRef(null);
   useEffect(() => {
     if (listItemRef.current) {
@@ -47,7 +47,7 @@ const ListItem = forwardRef((props, ref) => {
       return unregister;
     }
   }, [collection, disabled, index, register]);
-  const classes = merge(className, withClassPrefix(size, {
+  const classes = merge(className, withPrefix(size, {
     disabled,
     bordered
   }));

package/esm/List/helper/useSortHelper.d.ts

@@ -18,7 +18,7 @@ export type SortConfig = {
 declare const useSortHelper: (config: SortConfig) => {
     handleStart: MouseEventHandler<Element>;
     handleEnd: MouseEventHandler<Element>;
-    containerRef: import("react").RefObject<HTMLDivElement>;
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
     sorting: boolean;
     register: (item: ManagedItem) => {
         unregister: () => void;

package/esm/List/helper/useSortHelper.js

@@ -19,7 +19,7 @@ const useSortHelper = config => {
   } = config;
   const [sorting, setSorting] = useState(false);
   const containerRef = useRef(null);
-  const pressTimer = useRef();
+  const pressTimer = useRef(null);
   const {
     listItemRegister,
     getManagedItem,

package/esm/Loader/Loader.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { WithAsProps, SizeType } from '../internals/types';
+import type { WithAsProps, Size } from '../internals/types';
 export interface LoaderProps extends WithAsProps {
     /** Centered in the container */
     center?: boolean;
@@ -14,7 +14,7 @@ export interface LoaderProps extends WithAsProps {
     /** The speed at which the loader rotates */
     speed?: 'normal' | 'fast' | 'slow' | 'paused';
     /** A loader can have different sizes */
-    size?: SizeType;
+    size?: Size;
 }
 /**
  * The `Loader` component is used to indicate the loading state of a page or a section.