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

package/cjs/Stat/StatLabel.js

@@ -24,9 +24,9 @@ const StatLabel = (0, _utils.forwardRef)((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     uppercase
   }));
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({

package/cjs/Stat/StatTrend.js

@@ -46,9 +46,9 @@ const StatTrend = (0, _utils.forwardRef)((props, ref) => {
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(appearance, indicator));
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(appearance, indicator));
   const IndicatorIcon = indicator === 'up' ? ArrowUp : ArrowDown;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,

package/cjs/Stat/StatValue.js

@@ -21,9 +21,9 @@ const StatValue = (0, _utils.forwardRef)((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix());
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
     className: classes

package/cjs/StatGroup/StatGroup.js

@@ -25,14 +25,11 @@ const StatGroup = (0, _utils.forwardRef)((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix());
-  const styles = {
-    '--rs-columns': columns,
-    '--rs-spacing': (0, _utils.getCssValue)(spacing),
-    ...style
-  };
+    withPrefix,
+    cssVar
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
+  const styles = (0, _utils.mergeStyles)(style, cssVar('columns', columns), cssVar('spacing', spacing, _utils.getCssValue));
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
     className: classes,

package/cjs/Steps/StepItem.js

@@ -38,29 +38,26 @@ const StepItem = (0, _utils.forwardRef)((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     custom: icon,
     [`status-${status}`]: status
   }));
-  const styles = {
-    width: itemWidth,
-    ...style
-  };
-  let iconNode = /*#__PURE__*/_react.default.createElement("span", {
-    className: prefix('icon', `icon-${status}`)
+  const iconNode = icon ? /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix('icon')
+  }, icon) : /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix('icon', {
+      [`icon-${status}`]: status
+    })
   }, status ? (_STEP_STATUS_ICON$sta = STEP_STATUS_ICON[status]) !== null && _STEP_STATUS_ICON$sta !== void 0 ? _STEP_STATUS_ICON$sta : stepNumber : stepNumber);
-  if (icon) {
-    iconNode = /*#__PURE__*/_react.default.createElement("span", {
-      className: prefix('icon')
-    }, icon);
-  }
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes,
-    style: styles
+    style: (0, _utils.mergeStyles)({
+      width: itemWidth
+    }, style)
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('tail')
   }), /*#__PURE__*/_react.default.createElement("div", {

package/cjs/Steps/Steps.js

@@ -37,10 +37,10 @@ const Steps = (0, _utils.forwardRef)((props, ref) => {
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const horizontal = !vertical;
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     small,
     vertical,
     horizontal: !vertical

package/cjs/Table/Table.d.ts

@@ -16,7 +16,7 @@ declare const Table: (<Row extends RowDataType<any>, Key extends RowKeyType>(pro
     /**
      * The `Table.Cell` component  is used to display data in a table cell.
      */
-    Cell: <Row_1 extends RowDataType<any>, Key_1 extends RowKeyType>(props: import("rsuite-table/lib/Cell").InnerCellProps<Row_1, Key_1> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    Cell: <Row_1 extends RowDataType<any>, Key_1 extends RowKeyType>(props: import("rsuite-table/lib/Cell").InnerCellProps<Row_1, Key_1> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
     /**
      * The `Table.Column` component  is used to define a column in a table.
      */
@@ -24,7 +24,7 @@ declare const Table: (<Row extends RowDataType<any>, Key extends RowKeyType>(pro
     /**
      * The `Table.HeaderCell` component  is used to define a header cell in a table.
      */
-    HeaderCell: <Row_2 extends RowDataType<any>, Key_2 extends RowKeyType>(props: import("rsuite-table").HeaderCellProps<Row_2, Key_2> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    HeaderCell: <Row_2 extends RowDataType<any>, Key_2 extends RowKeyType>(props: import("rsuite-table").HeaderCellProps<Row_2, Key_2> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
     /**
      * The `Table.ColumnGroup` component  is used to define a column group in a table.
      */

package/cjs/Tabs/TabPanel.js

@@ -18,15 +18,15 @@ const TabPanel = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "tabpanel",
     ref: ref,
     tabIndex: 0,
     hidden: !active,
-    className: merge(className, withClassPrefix())
+    className: merge(className, withPrefix())
   }, rest), children);
 });
 TabPanel.displayName = 'TabPanel';

package/cjs/Tabs/Tabs.js

@@ -134,10 +134,10 @@ const Tabs = (0, _utils.forwardRef)((props, ref) => {
   const id = (0, _hooks.useUniqueId)('tab-', idProp);
   const [activeKey, setActiveKey] = (0, _hooks.useControlled)(activeKeyProp, defaultActiveKey);
   const {
-    withClassPrefix,
+    withPrefix,
     prefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const tablistRef = _react.default.useRef(null);
   const handleSelect = (0, _hooks.useEventCallback)((eventKey, event) => {
     setActiveKey(eventKey);
@@ -183,8 +183,9 @@ const Tabs = (0, _utils.forwardRef)((props, ref) => {
       item.focus();
     }
   });
+  const hasChildren = _react.default.Children.toArray(children).some(child => /*#__PURE__*/_react.default.isValidElement(child) && child.props.children);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    className: merge(className, withClassPrefix({
+    className: merge(className, withPrefix({
       reversed,
       vertical
     }))
@@ -203,7 +204,7 @@ const Tabs = (0, _utils.forwardRef)((props, ref) => {
   }, renderTabs(children, {
     id,
     activeKey
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), hasChildren && /*#__PURE__*/_react.default.createElement("div", {
     className: prefix`content`
   }, renderPanels(children, {
     id,

package/cjs/Tag/Tag.js

@@ -40,13 +40,11 @@ const Tag = (0, _utils.forwardRef)((props, ref) => {
     remove
   } = getLocale('common', overrideLocale);
   const {
-    withClassPrefix,
+    withPrefix,
     prefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(size, (0, _utils.isPresetColor)(color) && color, {
-    closable
-  }));
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(size, (0, _utils.isPresetColor)(color) && color));
   const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, (0, _utils.createColorVariables)(color, '--rs-tag-bg', '--rs-tag-text')), [style, color]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,

package/cjs/TagPicker/TagPicker.d.ts

@@ -1,18 +1,23 @@
 import React from 'react';
 import { InputPickerProps } from '../InputPicker/InputPicker';
 import { TagOnlyProps } from '../InputPicker/InputPickerContext';
+import type { Option } from '../internals/types';
 import type { CheckboxProps } from '../Checkbox';
-export interface TagPickerProps extends InputPickerProps, Partial<TagOnlyProps> {
+interface DeprecatedProps {
     /**
-     * Custom render checkbox on menu item
-     * @version 5.47.0
-     **/
+     * @deprecated Use `renderCheckbox` instead
+     */
     renderMenuItemCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
 }
+export interface TagPickerProps<V = any> extends Omit<InputPickerProps<V>, 'renderValue'>, DeprecatedProps, Partial<TagOnlyProps> {
+    renderCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
+    /** Custom render selected items */
+    renderValue?: (values: V[], items: Option<V>[], selectedElement: React.ReactNode) => React.ReactNode;
+}
 /**
  * `TagPicker` component enables multi-selection by tags and supports new options.
  *
  * @see https://rsuitejs.com/components/tag-picker/
  */
-declare const TagPicker: import("../internals/types").InternalRefForwardingComponent<"div", TagPickerProps, never> & Record<string, never>;
+declare const TagPicker: import("../internals/types").InternalRefForwardingComponent<"div", TagPickerProps<any>, never> & Record<string, never>;
 export default TagPicker;

package/cjs/TagPicker/TagPicker.js

@@ -24,8 +24,10 @@ const TagPicker = (0, _utils.forwardRef)((props, ref) => {
   const {
     tagProps = {},
     trigger = 'Enter',
+    size = 'md',
     onTagRemove,
-    renderMenuItemCheckbox,
+    renderCheckbox,
+    renderValue,
     ...rest
   } = propsWithDefaults;
   const contextValue = (0, _react.useMemo)(() => ({
@@ -33,11 +35,14 @@ const TagPicker = (0, _utils.forwardRef)((props, ref) => {
     trigger,
     tagProps,
     onTagRemove,
-    renderCheckbox: renderMenuItemCheckbox
-  }), [onTagRemove, renderMenuItemCheckbox, tagProps, trigger]);
+    renderCheckbox
+  }), [onTagRemove, renderCheckbox, tagProps, trigger]);
   return /*#__PURE__*/_react.default.createElement(_InputPickerContext.TagProvider, {
     value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({
+    size: size,
+    renderValue: renderValue
+  }, rest, {
     ref: ref
   })));
 });

package/cjs/Text/Text.d.ts

@@ -1,12 +1,5 @@
 import React from 'react';
-import type { WithAsProps, Color } from '../internals/types';
-declare const fontSizeMap: {
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-    xxl: number;
-};
+import { WithAsProps, Color, TextSize } from '../internals/types';
 export interface TextProps extends WithAsProps {
     /**
      * The font color of the text.
@@ -16,7 +9,7 @@ export interface TextProps extends WithAsProps {
     /**
      * The font size of the text.
      */
-    size?: keyof typeof fontSizeMap | number | string;
+    size?: TextSize | number | string;
     /**
      * To set the text to be muted.
      */

package/cjs/Text/Text.js

@@ -9,15 +9,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
+var _types = require("../internals/types");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const fontSizeMap = {
-  sm: 12,
-  md: 14,
-  lg: 16,
-  xl: 18,
-  xxl: 20
-};
+const fontSizes = Object.values(_types.TypographySizeEnum);
 /**
  *
  * The `Text` component is used to display text.
@@ -43,19 +38,25 @@ const Text = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix((0, _utils.isPresetColor)(color) && color, align, weight, transform, {
+  } = (0, _hooks.useStyles)(classPrefix);
+  const hasSize = size && fontSizes.includes(size);
+  const classes = merge(className, withPrefix((0, _utils.isPresetColor)(color) && color, align, weight, transform, hasSize && size, {
     muted,
     ellipsis: maxLines
   }));
-  const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)({
-    fontSize: fontSizeMap[size] || size,
-    ...(maxLines ? {
-      WebkitLineClamp: maxLines
-    } : null)
-  }, (0, _utils.createColorVariables)(color, '--rs-text-color'), style), [style, color, size, maxLines]);
+  const styles = (0, _react.useMemo)(() => {
+    const textStyles = (0, _utils.mergeStyles)({
+      ...(maxLines ? {
+        WebkitLineClamp: maxLines
+      } : null)
+    }, (0, _utils.createColorVariables)(color, '--rs-text-color'), style);
+    if (size && !hasSize) {
+      textStyles.fontSize = size;
+    }
+    return textStyles;
+  }, [style, color, size, maxLines]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes,

package/cjs/TimeRangePicker/TimeRangePicker.d.ts

@@ -9,7 +9,7 @@ export interface TimeRangePickerProps extends PickerBaseProps<DatePickerLocale>,
      */
     caretAs?: React.ElementType | null;
     /** Predefined date ranges */
-    ranges?: DateOptionPreset<DateRange>[];
+    ranges?: DateOptionPreset<DateRange | null>[];
     /**
      * Format of the date displayed in the input box
      */

package/cjs/Timeline/Timeline.js

@@ -40,14 +40,14 @@ const Timeline = (0, _utils.forwardRef)((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const count = _utils.ReactChildren.count(children);
   const withTime = (0, _some.default)(_react.default.Children.toArray(children), item => {
     var _item$props;
     return item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.time;
   });
-  const classes = merge(className, withClassPrefix(`align-${align}`, {
+  const classes = merge(className, withPrefix(`align-${align}`, {
     endless,
     'with-time': withTime
   }));

package/cjs/Timeline/TimelineItem.js

@@ -27,10 +27,10 @@ const TimelineItem = (0, _utils.forwardRef)((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     last: DEPRECATED_last,
     active: INTERNAL_active
   }));

package/cjs/Toggle/Toggle.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { WithAsProps, ColorType, SizeType } from '../internals/types';
+import type { SanitizedInputProps, WithAsProps, Color, Size } from '../internals/types';
 import type { ToggleLocale } from '../locales';
-export interface ToggleProps extends WithAsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+export interface ToggleProps extends WithAsProps, SanitizedInputProps {
     /**
      * The color of the toggle.
      */
-    color?: ColorType;
+    color?: Color;
     /**
      * Whether to disabled toggle
      */
@@ -41,7 +41,7 @@ export interface ToggleProps extends WithAsProps, Omit<React.InputHTMLAttributes
     /**
      * The size of the toggle
      */
-    size?: Omit<SizeType, 'xs'>;
+    size?: Omit<Size, 'xs'>;
     /**
      * Custom locale
      */

package/cjs/Toggle/Toggle.js

@@ -36,7 +36,7 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
     classPrefix = 'toggle',
     checked: checkedProp,
     defaultChecked,
-    size,
+    size = 'md',
     locale,
     onChange,
     ...rest
@@ -45,10 +45,10 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
   const [checked, setChecked] = (0, _hooks.useControlled)(checkedProp, defaultChecked);
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(size, color, {
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(size, color, {
     checked,
     disabled,
     loading

package/cjs/Tooltip/Tooltip.js

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * The `Tooltip` component is used to describe a element.
  *
@@ -30,15 +32,14 @@ const Tooltip = (0, _utils.forwardRef)((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     arrow
   }));
-  const styles = {
-    opacity: visible ? 1 : undefined,
-    ...style
-  };
+  const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, {
+    ['--rs-opacity']: visible ? 1 : undefined
+  }), [visible, style]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "tooltip"
   }, rest, {

package/cjs/Tree/IndentLine.js

@@ -9,7 +9,7 @@ var _hooks = require("../internals/hooks");
 const IndentLine = () => {
   const {
     prefix
-  } = (0, _hooks.useClassNames)('tree');
+  } = (0, _hooks.useStyles)('tree');
   return /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('indent-line'),
     "data-testid": "indent-line"

package/cjs/Tree/TreeNode.js

@@ -57,8 +57,8 @@ const TreeNode = (0, _utils.forwardRef)((props, ref) => {
   const {
     prefix,
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const labelStr = (0, _react.useMemo)(() => (0, _utils.stringifyReactNode)(label), [label]);
   const handleExpand = (0, _hooks.useEventCallback)(event => {
     var _event$nativeEvent, _event$nativeEvent$st;
@@ -99,17 +99,14 @@ const TreeNode = (0, _utils.forwardRef)((props, ref) => {
     event.stopPropagation();
     onDrop === null || onDrop === void 0 || onDrop(nodeData, event);
   });
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     disabled,
     active,
     'text-muted': disabled,
     focus
   }));
   const treeItemRef = (0, _hooks.useFocusVirtualListItem)(focus);
-  const styles = virtualized ? {
-    ...style,
-    ...(0, _utils2.indentTreeNode)(rtl, layer - 1)
-  } : style;
+  const styles = virtualized ? (0, _utils.mergeStyles)(style, (0, _utils2.indentTreeNode)(rtl, layer - 1)) : style;
   return visible ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: (0, _utils.mergeRefs)(treeItemRef, ref),
     role: "treeitem",

package/cjs/Tree/TreeNodeToggle.js

@@ -29,7 +29,7 @@ function TreeNodeToggle(props) {
   } = (0, _TreeProvider.useTreeCustomRenderer)();
   const {
     prefix
-  } = (0, _hooks.useClassNames)('tree-node');
+  } = (0, _hooks.useStyles)('tree-node');
   const IconElementType = expanded ? _ArrowDown.default : rtl ? _ArrowLeft.default : _ArrowRight.default;
   let icon = /*#__PURE__*/_react.default.createElement(IconElementType, {
     className: prefix('toggle-icon')

package/cjs/Tree/TreeView.d.ts

@@ -19,11 +19,11 @@ export interface TreeViewProps<V = number | string | null> extends TreeViewBaseP
     /**
      * Virtualized list ref object.
      */
-    listRef?: React.RefObject<ListHandle>;
+    listRef?: React.RefObject<ListHandle | null>;
     /**
      * Searchbox input ref object.
      */
-    searchInputRef?: React.RefObject<HTMLInputElement>;
+    searchInputRef?: React.RefObject<HTMLInputElement | null>;
     /**
      * Called when scrolling.
      */

package/cjs/Tree/TreeView.js

@@ -86,8 +86,8 @@ const TreeView = (0, _utils.forwardRef)((props, ref) => {
   const {
     prefix,
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const handleSearchCallback = (0, _hooks.useEventCallback)((value, _data, event) => {
     onSearch === null || onSearch === void 0 || onSearch(value, event);
   });
@@ -252,7 +252,7 @@ const TreeView = (0, _utils.forwardRef)((props, ref) => {
       ref: ref => saveTreeNodeRef(ref, node.refKey)
     }, treeNodeProps));
   };
-  const classes = merge(withClassPrefix({
+  const classes = merge(withPrefix({
     virtualized
   }), className);
   const formattedNodes = getFormattedNodes(renderNode);

package/cjs/Tree/hooks/useFocusTree.d.ts

@@ -13,7 +13,7 @@ interface UseFocusTreeProps<T extends TreeNode> {
  * Custom hook that manages the focus behavior of a tree component.
  */
 declare function useFocusTree(props: UseFocusTreeProps<TreeNode>): {
-    treeViewRef: import("react").RefObject<HTMLDivElement>;
+    treeViewRef: import("react").RefObject<HTMLDivElement | null>;
     focusTreeFirstNode: (...args: any[]) => any;
     focusItemValue: string | number | null | undefined;
     treeNodesRefs: {};

package/cjs/TreePicker/TreePicker.d.ts

@@ -3,21 +3,13 @@ import { type TreeViewProps } from '../Tree/TreeView';
 import { PickerLocale } from '../locales';
 import { PickerToggleProps } from '../internals/Picker';
 import { TreeNode } from '../internals/Tree/types';
-import type { FormControlPickerProps, DeprecatedPickerProps } from '../internals/types';
+import type { FormControlPickerProps, DeprecatedMenuProps } from '../internals/types';
 import type { TreeExtraProps } from '../Tree/types';
-export interface TreePickerProps<V = number | string | null> extends TreeViewProps<V>, TreeExtraProps, DeprecatedPickerProps, FormControlPickerProps<V, PickerLocale, TreeNode>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
+export interface TreePickerProps<V = number | string | null> extends TreeViewProps<V>, TreeExtraProps, DeprecatedMenuProps, FormControlPickerProps<V, PickerLocale, TreeNode>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
     /**
      * Custom render selected items
      */
     renderValue?: (value: V, selectedNode: TreeNode, selectedElement: React.ReactNode) => React.ReactNode;
-    /**
-     * Custom popup style
-     */
-    popupClassName?: string;
-    /**
-     * Custom popup style
-     */
-    popupStyle?: React.CSSProperties;
     /**
      * The height of the tree
      */