rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/esm/Loader/Loader.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, useUniqueId } from "../internals/hooks/index.js";
+import { useStyles, useUniqueId } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `Loader` component is used to indicate the loading state of a page or a section.
@@ -22,20 +22,19 @@ const Loader = forwardRef((props, ref) => {
     center,
     vertical,
     content,
-    size,
+    size = 'sm',
     ...rest
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const labelId = useUniqueId('loader-label-');
-  const classes = merge(className, prefix('wrapper', `speed-${speed}`, size, {
-    'backdrop-wrapper': backdrop,
+  const classes = merge(className, prefix(`speed-${speed}`, size, {
+    center: backdrop || center,
     vertical,
-    inverse,
-    center
+    inverse
   }));
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "status",
@@ -46,7 +45,7 @@ const Loader = forwardRef((props, ref) => {
   }), backdrop && /*#__PURE__*/React.createElement("div", {
     className: prefix('backdrop')
   }), /*#__PURE__*/React.createElement("div", {
-    className: withClassPrefix()
+    className: withPrefix()
   }, /*#__PURE__*/React.createElement("span", {
     className: prefix('spin')
   }), content && /*#__PURE__*/React.createElement("span", {

package/esm/MaskedInput/MaskedInput.d.ts

@@ -1,5 +1,6 @@
 import { InputProps } from '../Input';
+import type { PropsWithoutChange } from '../internals/types';
 import type { TextMaskProps } from './TextMask';
-export type MaskedInputProps = Omit<TextMaskProps, 'onChange'> & Omit<InputProps, 'type'>;
+export type MaskedInputProps = PropsWithoutChange<TextMaskProps> & Omit<InputProps, 'type'>;
 declare const MaskedInput: import("../internals/types").InternalRefForwardingComponent<"input", MaskedInputProps, never> & Record<string, never>;
 export default MaskedInput;

package/esm/MaskedInput/TextMask.js

@@ -30,7 +30,7 @@ const TextMask = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const inputRef = useRef(null);
-  const textMaskInputElement = useRef();
+  const textMaskInputElement = useRef(null);
   const initTextMask = useCallback(() => {
     var _textMaskInputElement;
     textMaskInputElement.current = createTextMaskInputElement({

package/esm/Menu/Menu.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { StandardProps, HTMLPropsWithoutSelect } from '../internals/types';
+export interface MenuProps<T = string | number> extends StandardProps, HTMLPropsWithoutSelect<HTMLUListElement> {
+    /** Set the active key for the menu */
+    activeKey?: T;
+    /** Callback function triggered when an item is selected */
+    onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
+}
+/**
+ * The `<Menu>` component is used to create a menu.
+ *
+ * @see https://rsuitejs.com/components/menu
+ */
+declare const Menu: import("../internals/types").InternalRefForwardingComponent<"ul", MenuProps<string | number>, never> & {
+    Item: import("../internals/types").InternalRefForwardingComponent<"li", import("./MenuItem").MenuItemProps<any>, never> & Record<string, never>;
+    Separator: import("../internals/types").InternalRefForwardingComponent<"li", import("./MenuSeparator").MenuSeparatorProps, never> & Record<string, never>;
+};
+export default Menu;

package/esm/Menu/Menu.js

@@ -0,0 +1,49 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useMemo } from 'react';
+import Menubar from "../internals/Menu/Menubar.js";
+import MenuContext from "./MenuContext.js";
+import MenuItem from "./MenuItem.js";
+import MenuSeparator from "./MenuSeparator.js";
+import { useStyles } from "../internals/hooks/index.js";
+import { mergeRefs, forwardRef } from "../internals/utils/index.js";
+const Subcomponents = {
+  Item: MenuItem,
+  Separator: MenuSeparator
+};
+
+/**
+ * The `<Menu>` component is used to create a menu.
+ *
+ * @see https://rsuitejs.com/components/menu
+ */
+const Menu = forwardRef((props, ref) => {
+  const {
+    activeKey,
+    classPrefix = 'menu',
+    className,
+    children,
+    onSelect,
+    ...rest
+  } = props;
+  const {
+    merge,
+    withPrefix
+  } = useStyles(classPrefix);
+  const contextValue = useMemo(() => ({
+    activeKey,
+    onSelect
+  }), [activeKey, onSelect]);
+  const classes = merge(className, withPrefix());
+  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Menubar, {
+    vertical: true
+  }, (menubar, menubarRef) => /*#__PURE__*/React.createElement("ul", _extends({}, menubar, rest, {
+    ref: mergeRefs(menubarRef, ref),
+    className: classes,
+    role: "menu"
+  }), children)));
+}, Subcomponents);
+Menu.displayName = 'Menu';
+export default Menu;

package/esm/Menu/MenuContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface MenuContextProps {
+    activeKey?: string | number;
+    onSelect?: (eventKey: string | undefined, event: React.SyntheticEvent) => void;
+}
+declare const MenuContext: React.Context<MenuContextProps | null>;
+export default MenuContext;

package/esm/Menu/MenuContext.js

@@ -0,0 +1,5 @@
+'use client';
+import React from 'react';
+const MenuContext = /*#__PURE__*/React.createContext(null);
+MenuContext.displayName = 'MenuContext';
+export default MenuContext;

package/esm/Menu/MenuItem.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { IconProps } from '@rsuite/icons/Icon';
+import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+export interface MenuItemProps<T = any> extends WithAsProps, HTMLPropsWithoutSelect {
+    /** Active the current option */
+    active?: boolean;
+    /** Disable the current option */
+    disabled?: boolean;
+    /** The description of the current option */
+    description?: React.ReactNode;
+    /** The value of the current option */
+    eventKey?: T;
+    /** Set the icon */
+    icon?: React.ReactElement<IconProps>;
+    /**
+     * The menu item keyboard shortcut.
+     */
+    shortcut?: React.ReactNode;
+    /**
+     * Select the callback function for the current option
+     */
+    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
+}
+declare const MenuItem: import("../internals/types").InternalRefForwardingComponent<"li", MenuItemProps<any>, never> & Record<string, never>;
+export default MenuItem;

package/esm/Menu/MenuItem.js

@@ -0,0 +1,77 @@
+'use client';
+import React, { useCallback, useContext, cloneElement } from 'react';
+import classNames from 'classnames';
+import MenuItemBase from "../internals/Menu/MenuItem.js";
+import MenuContext from "./MenuContext.js";
+import isNil from 'lodash/isNil';
+import Text from "../Text/index.js";
+import { useStyles } from "../internals/hooks/index.js";
+import { forwardRef, mergeRefs, shallowEqual } from "../internals/utils/index.js";
+import { useRenderMenuItem } from "../internals/Menu/useRenderMenuItem.js";
+const MenuItem = forwardRef((props, ref) => {
+  const {
+    as: Component = 'li',
+    active: activeProp,
+    classPrefix = 'menu-item',
+    className,
+    description,
+    shortcut,
+    eventKey,
+    icon,
+    children,
+    disabled,
+    onSelect,
+    ...rest
+  } = props;
+  const menu = useContext(MenuContext);
+  const {
+    merge,
+    withPrefix,
+    prefix
+  } = useStyles(classPrefix);
+  const handleSelectItem = useCallback(event => {
+    var _menu$onSelect;
+    onSelect === null || onSelect === void 0 || onSelect(eventKey, event);
+    menu === null || menu === void 0 || (_menu$onSelect = menu.onSelect) === null || _menu$onSelect === void 0 || _menu$onSelect.call(menu, eventKey, event);
+  }, [onSelect, eventKey, menu]);
+  const selected = activeProp || !isNil(eventKey) && shallowEqual(menu === null || menu === void 0 ? void 0 : menu.activeKey, eventKey);
+  const renderMenuItem = useRenderMenuItem(Component);
+  return /*#__PURE__*/React.createElement(MenuItemBase, {
+    selected: selected,
+    disabled: disabled,
+    onActivate: handleSelectItem
+  }, (_ref, menuitemRef) => {
+    let {
+      selected,
+      active,
+      ...menuitem
+    } = _ref;
+    const classes = merge(className, withPrefix({
+      active: selected,
+      disabled,
+      focus: active
+    }));
+    return renderMenuItem({
+      ref: mergeRefs(ref, menuitemRef),
+      className: classes,
+      ...menuitem,
+      ...rest,
+      children: /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/cloneElement(icon, {
+        className: classNames(prefix('menu-icon'), icon.props.className)
+      }), /*#__PURE__*/React.createElement("div", {
+        className: prefix('content')
+      }, /*#__PURE__*/React.createElement(Text, {
+        as: "span"
+      }, children), /*#__PURE__*/React.createElement(Text, {
+        as: "span",
+        muted: true
+      }, description)), shortcut && /*#__PURE__*/React.createElement(Text, {
+        as: "kbd",
+        className: prefix('shortcut'),
+        muted: true
+      }, shortcut))
+    });
+  });
+});
+MenuItem.displayName = 'MenuItem';
+export default MenuItem;

package/esm/Menu/MenuSeparator.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { WithAsProps } from '../internals/types';
+export interface MenuSeparatorProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {
+    /** You can use a custom element for this component */
+    as?: React.ElementType;
+}
+/**
+ * The `<Menu.Separator>` API
+ *
+ */
+declare const MenuSeparator: import("../internals/types").InternalRefForwardingComponent<"li", MenuSeparatorProps, never> & Record<string, never>;
+export default MenuSeparator;

package/esm/Menu/MenuSeparator.js

@@ -0,0 +1,28 @@
+'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";
+/**
+ * The `<Menu.Separator>` API
+ *
+ */
+const MenuSeparator = forwardRef((props, ref) => {
+  const {
+    classPrefix = 'menu-item-divider',
+    className,
+    as: Component = 'li',
+    ...restProps
+  } = props;
+  const {
+    merge,
+    withPrefix
+  } = useStyles(classPrefix);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    role: "separator",
+    className: merge(withPrefix(), className)
+  }, restProps));
+});
+MenuSeparator.displayName = 'MenuSeparator';
+export default MenuSeparator;

package/esm/Menu/index.d.ts

@@ -0,0 +1,8 @@
+import Menu from './Menu';
+import MenuItem from './MenuItem';
+import MenuSeparator from './MenuSeparator';
+export type { MenuProps } from './Menu';
+export type { MenuItemProps } from './MenuItem';
+export type { MenuSeparatorProps } from './MenuSeparator';
+export { Menu, MenuItem, MenuSeparator };
+export default Menu;

package/esm/Menu/index.js

@@ -0,0 +1,10 @@
+'use client';
+import Menu from "./Menu.js";
+import MenuItem from "./MenuItem.js";
+import MenuSeparator from "./MenuSeparator.js";
+
+// export types
+
+// export components
+export { Menu, MenuItem, MenuSeparator };
+export default Menu;

package/esm/Message/Message.js

@@ -1,11 +1,11 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import CloseButton from "../internals/CloseButton/index.js";
 import useDelayedClosure from "../toaster/hooks/useDelayedClosure.js";
 import { mergeRefs, forwardRef } from "../internals/utils/index.js";
 import { MESSAGE_STATUS_ICONS } from "../internals/constants/statusIcons.js";
-import { useClassNames, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `Message` component is used to display important messages to users.
@@ -33,12 +33,12 @@ const Message = forwardRef((props, ref) => {
   } = propsWithDefaults;
   const [display, setDisplay] = useState('show');
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const isMounted = useIsMounted();
-  const targetRef = React.useRef(null);
+  const targetRef = useRef(null);
 
   // Timed close message
   const {
@@ -61,7 +61,7 @@ const Message = forwardRef((props, ref) => {
   if (display === 'hide') {
     return null;
   }
-  const classes = merge(className, withClassPrefix(type, display, {
+  const classes = merge(className, withPrefix(type, display, {
     full,
     bordered,
     centered,
@@ -75,9 +75,7 @@ const Message = forwardRef((props, ref) => {
     className: classes
   }), /*#__PURE__*/React.createElement("div", {
     className: prefix`container`
-  }, closable && /*#__PURE__*/React.createElement(CloseButton, {
-    onClick: handleClose
-  }), showIcon && /*#__PURE__*/React.createElement("div", {
+  }, showIcon && /*#__PURE__*/React.createElement("div", {
     className: prefix`icon`
   }, MESSAGE_STATUS_ICONS[type]), /*#__PURE__*/React.createElement("div", {
     className: prefix`content`
@@ -85,7 +83,9 @@ const Message = forwardRef((props, ref) => {
     className: prefix`header`
   }, header), children && /*#__PURE__*/React.createElement("div", {
     className: prefix`body`
-  }, children))));
+  }, children)), closable && /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: handleClose
+  })));
 });
 Message.displayName = 'Message';
 export default Message;

package/esm/Modal/Modal.d.ts

@@ -8,6 +8,8 @@ export interface ModalProps extends BaseModalProps, Pick<React.HTMLAttributes<HT
     animationTimeout?: number;
     /** Set an animation effect for Modal, the default is Bounce.  */
     animation?: React.ElementType;
+    /** Set the centered position of the modal */
+    centered?: boolean;
     /** CSS class applied to Dialog DOM nodes */
     dialogClassName?: string;
     /** CSS style applied to dialog DOM nodes */

package/esm/Modal/Modal.js

@@ -11,7 +11,7 @@ import ModalBody from "./ModalBody.js";
 import ModalHeader from "./ModalHeader.js";
 import ModalTitle from "./ModalTitle.js";
 import ModalFooter from "./ModalFooter.js";
-import { useClassNames, useWillUnmount, useUniqueId } from "../internals/hooks/index.js";
+import { useStyles, useWillUnmount, useUniqueId } from "../internals/hooks/index.js";
 import { mergeRefs, forwardRef } from "../internals/utils/index.js";
 import { ModalContext } from "./ModalContext.js";
 import { useBodyStyles } from "./utils.js";
@@ -43,6 +43,7 @@ const Modal = forwardRef((props, ref) => {
     backdrop = true,
     className,
     classPrefix = 'modal',
+    centered,
     dialogClassName,
     dialogStyle,
     dialogAs: Dialog = ModalDialog,
@@ -67,14 +68,14 @@ const Modal = forwardRef((props, ref) => {
   const {
     merge,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const [shake, setShake] = useState(false);
   const classes = merge(className, prefix({
     full,
     [size]: modalSizes.includes(size)
   }));
   const dialogRef = useRef(null);
-  const transitionEndListener = useRef();
+  const transitionEndListener = useRef(null);
 
   // The style of the Modal body will be updated with the size of the window or container.
   const [bodyStyles, onChangeBodyStyles, onDestroyEvents] = useBodyStyles(dialogRef, {
@@ -105,7 +106,7 @@ const Modal = forwardRef((props, ref) => {
     onEntering === null || onEntering === void 0 || onEntering(node);
     onChangeBodyStyles(true);
   }, [onChangeBodyStyles, onEntering]);
-  const backdropClick = React.useRef();
+  const backdropClick = useRef(null);
   const handleMouseDown = useCallback(event => {
     backdropClick.current = event.target === event.currentTarget;
   }, []);
@@ -162,6 +163,7 @@ const Modal = forwardRef((props, ref) => {
     }
   }, [backdrop, enforceFocusProp, isDrawer]);
   const wrapperClassName = merge(prefix`wrapper`, {
+    [prefix`centered`]: centered,
     [prefix`no-backdrop`]: backdrop === false
   });
   return /*#__PURE__*/React.createElement(ModalContext.Provider, {
@@ -198,7 +200,7 @@ const Modal = forwardRef((props, ref) => {
       role: role,
       id: dialogId,
       "aria-labelledby": ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : `${dialogId}-title`,
-      "aria-describedby": ariaDescribedby,
+      "aria-describedby": ariaDescribedby !== null && ariaDescribedby !== void 0 ? ariaDescribedby : `${dialogId}-description`,
       style: {
         [sizeKey]: modalSizes.includes(size) ? undefined : size
       }

package/esm/Modal/ModalBody.js

@@ -3,9 +3,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import IconButton from "../IconButton/index.js";
 import Close from '@rsuite/icons/Close';
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { ModalContext } from "./ModalContext.js";
-import { forwardRef } from "../internals/utils/index.js";
+import { forwardRef, mergeStyles } from "../internals/utils/index.js";
 const ModalBody = forwardRef((props, ref) => {
   const {
     as: Component = 'div',
@@ -16,15 +16,16 @@ const ModalBody = forwardRef((props, ref) => {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   const context = useContext(ModalContext);
   const {
     getBodyStyles,
     closeButton,
+    dialogId,
     onModalClose
   } = context || {};
   const bodyStyles = getBodyStyles === null || getBodyStyles === void 0 ? void 0 : getBodyStyles();
@@ -39,11 +40,9 @@ const ModalBody = forwardRef((props, ref) => {
     }) : closeButton;
   }
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    id: dialogId ? `${dialogId}-description` : undefined,
     ref: ref,
-    style: {
-      ...bodyStyles,
-      ...style
-    },
+    style: mergeStyles(bodyStyles, style),
     className: classes
   }), buttonElement, children);
 });

package/esm/Modal/ModalDialog.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { WithAsProps, SizeType } from '../internals/types';
+import type { WithAsProps, Size } from '../internals/types';
 export interface ModalDialogProps extends WithAsProps {
     /** A modal can have different sizes */
-    size?: SizeType;
+    size?: Size;
     dialogClassName?: string;
     dialogStyle?: React.CSSProperties;
 }

package/esm/Modal/ModalDialog.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 { forwardRef, mergeStyles } from "../internals/utils/index.js";
 const ModalDialog = forwardRef((props, ref) => {
   const {
@@ -17,28 +17,25 @@ const ModalDialog = forwardRef((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix(size));
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix(size));
   const dialogClasses = merge(dialogClassName, prefix('dialog'));
   const modalStyle = mergeStyles({
     display: 'block'
   }, style);
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "dialog",
-    "aria-modal": true
-  }, rest, {
+    "aria-modal": true,
     ref: ref,
     className: classes,
     style: modalStyle
-  }), /*#__PURE__*/React.createElement("div", {
+  }, rest), /*#__PURE__*/React.createElement("div", {
     role: "document",
     className: dialogClasses,
     style: dialogStyle
-  }, /*#__PURE__*/React.createElement("div", {
-    className: prefix`content`
-  }, children)));
+  }, children));
 });
 ModalDialog.displayName = 'ModalDialog';
 export default ModalDialog;

package/esm/Modal/ModalHeader.js

@@ -4,7 +4,7 @@ import React, { useContext } from 'react';
 import CloseButton from "../internals/CloseButton/index.js";
 import IconButton from "../IconButton/index.js";
 import { forwardRef, createChainedFunction } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { ModalContext } from "./ModalContext.js";
 const ModalHeader = forwardRef((props, ref) => {
   const {
@@ -18,10 +18,10 @@ const ModalHeader = forwardRef((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   const context = useContext(ModalContext);
   const {
     isDrawer,

package/esm/Modal/ModalTitle.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import { ModalContext } from "./ModalContext.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 const ModalTitle = forwardRef((props, ref) => {
   const {
@@ -13,10 +13,10 @@ const ModalTitle = forwardRef((props, ref) => {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   const context = useContext(ModalContext);
   return /*#__PURE__*/React.createElement(Component, _extends({
     id: context ? `${context.dialogId}-title` : undefined

package/esm/Modal/utils.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { SizeType } from '../internals/types';
-export type ModalSize = SizeType | 'full' | number | string;
-export declare const useBodyStyles: (ref: React.RefObject<HTMLElement>, options: {
+import type { Size } from '../internals/types';
+export type ModalSize = Size | 'full' | number | string;
+export declare const useBodyStyles: (ref: React.RefObject<HTMLElement | null>, options: {
     overflow: boolean;
     size?: ModalSize | undefined;
     prefix: (...classes: any) => string;

package/esm/Modal/utils.js

@@ -10,9 +10,9 @@ export const useBodyStyles = (ref, options) => {
     prefix,
     size
   } = options;
-  const windowResizeListener = useRef();
+  const windowResizeListener = useRef(null);
   const contentElement = useRef(null);
-  const contentElementResizeObserver = useRef();
+  const contentElementResizeObserver = useRef(null);
   const updateBodyStyles = useCallback((_event, entering) => {
     const dialog = ref.current;
     const scrollHeight = dialog ? dialog.scrollHeight : 0;

package/esm/MultiCascadeTree/MultiCascadeTree.js

@@ -5,7 +5,7 @@ import TreeView from "./TreeView.js";
 import SearchView from "./SearchView.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useCascadeValue, useSelect, useSearch } from "./hooks/index.js";
-import { useClassNames, useControlled } from "../internals/hooks/index.js";
+import { useStyles, useControlled } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 const emptyArray = [];
 
@@ -87,10 +87,10 @@ const MultiCascadeTree = forwardRef((props, ref) => {
     onSearch
   });
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix('multi'));
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix('multi'));
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
     className: classes