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

package/esm/ButtonGroup/ButtonGroupContext.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { SizeType } from '../internals/types';
+import { Size } from '../internals/types';
 export interface ButtonGroupContextProps {
-    size?: SizeType;
+    size?: Size;
+    disabled?: boolean;
 }
 declare const ButtonGroupContext: React.Context<ButtonGroupContextProps | null>;
 export default ButtonGroupContext;

package/esm/ButtonToolbar/ButtonToolbar.d.ts

@@ -13,6 +13,6 @@ export interface ButtonToolbarProps extends WithAsProps {
  * @see https://rsuitejs.com/components/button/#button-toolbar
  */
 declare const ButtonToolbar: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", StackProps, never> & {
-    Item: typeof import("../Stack/StackItem").default;
+    Item: import("../internals/types").InternalRefForwardingComponent<"div", import("../Stack/StackItem").StackItemProps, never> & Record<string, never>;
 }, ButtonToolbarProps, never> & Record<string, never>;
 export default ButtonToolbar;

package/esm/ButtonToolbar/ButtonToolbar.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Stack from "../Stack/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
@@ -14,22 +14,21 @@ const ButtonToolbar = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('ButtonToolbar', props);
   const {
+    as: Component = Stack,
     className,
     classPrefix = 'btn-toolbar',
-    as: Component = Stack,
     role = 'toolbar',
     ...rest
   } = propsWithDefaults;
   const stackProps = Component === Stack ? {
     wrap: true,
-    spacing: 10,
-    childrenRenderMode: 'clone'
+    spacing: 10
   } : null;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(Component, _extends({}, stackProps, rest, {
     role: role,
     ref: ref,

package/esm/Calendar/Calendar.js

@@ -6,7 +6,7 @@ import Button from "../Button/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { isSameMonth, startOfDay } from "../internals/utils/date/index.js";
 import { FormattedDate } from "../CustomProvider/index.js";
-import { useClassNames, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useEventCallback } from "../internals/hooks/index.js";
 import { useCalendarDate } from "./hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
@@ -56,8 +56,8 @@ const Calendar = forwardRef((props, ref) => {
   const {
     prefix,
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
+    withPrefix
+  } = useStyles(classPrefix);
   const renderToolbar = () => /*#__PURE__*/React.createElement(Button, {
     className: prefix('btn-today'),
     size: "sm",
@@ -67,7 +67,7 @@ const Calendar = forwardRef((props, ref) => {
     date: date,
     formatStr: (locale === null || locale === void 0 ? void 0 : locale.formattedMonthPattern) || 'MMMM  yyyy'
   });
-  const classes = merge(className, withClassPrefix('panel', {
+  const classes = merge(className, withPrefix('panel', {
     bordered,
     compact
   }));

package/esm/Calendar/CalendarBody.js

@@ -4,7 +4,7 @@ import React from 'react';
 import Grid from "./Grid/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { getWeekStartDates, setDate } from "../internals/utils/date/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { useCalendar } from "./hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 const CalendarBody = forwardRef((props, ref) => {
@@ -28,9 +28,9 @@ const CalendarBody = forwardRef((props, ref) => {
   const thisMonthDate = setDate(date, 1);
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes

package/esm/Calendar/CalendarContainer.js

@@ -7,7 +7,7 @@ import MonthDropdown from "./MonthDropdown/index.js";
 import TimeDropdown from "./TimeDropdown/index.js";
 import CalendarBody from "./CalendarBody.js";
 import CalendarHeader from "./CalendarHeader.js";
-import { useClassNames, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { startOfToday, disableTime, isSameMonth, calendarOnlyProps, omitHideDisabledProps, DateMode, useDateMode, isValid } from "../internals/utils/date/index.js";
 import { CalendarProvider } from "./CalendarProvider.js";
@@ -51,10 +51,10 @@ const CalendarContainer = forwardRef((props, ref) => {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const calendarDate = useMemo(() => {
     return isValid(calendarDateProp) ? calendarDateProp : startOfToday();
   }, [calendarDateProp]);
@@ -83,7 +83,7 @@ const CalendarContainer = forwardRef((props, ref) => {
   const timeMode = calendarState === CalendarState.TIME || mode === DateMode.Time;
   const monthMode = calendarState === CalendarState.MONTH || mode === DateMode.Month;
   const inSameThisMonthDate = date => isSameMonth(calendarDate, date);
-  const calendarClasses = merge(className, withClassPrefix({
+  const calendarClasses = merge(className, withPrefix({
     'time-view': timeMode,
     'month-view': monthMode,
     'only-time': mode === DateMode.Time,

package/esm/Calendar/CalendarHeader.js

@@ -6,7 +6,7 @@ import PageNextIcon from '@rsuite/icons/PageNext';
 import IconButton from "../IconButton/index.js";
 import Button from "../Button/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { extractTimeFormat } from "../internals/utils/date/index.js";
 import { FormattedDate } from "../CustomProvider/index.js";
 import { useCalendar } from "./hooks/index.js";
@@ -43,9 +43,9 @@ const CalendarHeader = forwardRef((props, ref) => {
   } = useDateRangePicker();
   const {
     prefix,
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const btnProps = {
     appearance: 'subtle',
     size: inline ? 'sm' : 'xs'
@@ -102,7 +102,7 @@ const CalendarHeader = forwardRef((props, ref) => {
     icon: /*#__PURE__*/React.createElement(PageNextIcon, null)
   })));
   const hasMonth = showDate || showMonth;
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     'has-month': hasMonth,
     'has-time': showTime
   }));

package/esm/Calendar/Grid/Grid.js

@@ -4,7 +4,7 @@ import React from 'react';
 import GridRow from "./GridRow.js";
 import GridHeaderRow from "./GridHeaderRow.js";
 import { forwardRef } from "../../internals/utils/index.js";
-import { useClassNames } from "../../internals/hooks/index.js";
+import { useStyles } from "../../internals/hooks/index.js";
 import { useCalendar } from "../hooks/index.js";
 const Grid = forwardRef((props, ref) => {
   const {
@@ -16,9 +16,9 @@ const Grid = forwardRef((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   const {
     targetId
   } = useCalendar();

package/esm/Calendar/Grid/GridCell.js

@@ -4,7 +4,7 @@ import React from 'react';
 import partial from 'lodash/partial';
 import { forwardRef } from "../../internals/utils/index.js";
 import { isSameDay, getDate } from "../../internals/utils/date/index.js";
-import { useClassNames } from "../../internals/hooks/index.js";
+import { useStyles } from "../../internals/hooks/index.js";
 import { useCustom } from "../../CustomProvider/index.js";
 import { useCalendar } from "../hooks/index.js";
 import { getAriaLabel } from "../utils/index.js";
@@ -32,7 +32,7 @@ const GridCell = forwardRef((props, ref) => {
   const {
     prefix,
     merge
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const {
     getLocale,
     formatDate

package/esm/Calendar/Grid/GridHeaderRow.js

@@ -4,7 +4,7 @@ import React from 'react';
 import upperFirst from 'lodash/upperFirst';
 import { forwardRef } from "../../internals/utils/index.js";
 import { getWeekKeys } from "../../internals/utils/date/index.js";
-import { useClassNames } from "../../internals/hooks/index.js";
+import { useStyles } from "../../internals/hooks/index.js";
 import { useCalendar } from "../hooks/index.js";
 const GridHeaderRow = forwardRef((props, ref) => {
   const {
@@ -22,7 +22,7 @@ const GridHeaderRow = forwardRef((props, ref) => {
   const {
     merge,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const classes = merge(className, prefix('row', 'header-row'));
   const weeks = getWeekKeys(isoWeek ? 1 : weekStart);
   return /*#__PURE__*/React.createElement(Component, _extends({

package/esm/Calendar/Grid/GridRow.js

@@ -5,7 +5,7 @@ import GridCell from "./GridCell.js";
 import { forwardRef } from "../../internals/utils/index.js";
 import { isSameDay, addDays, isBefore, isAfter, format } from "../../internals/utils/date/index.js";
 import { DATERANGE_DISABLED_TARGET } from "../../internals/constants/index.js";
-import { useClassNames } from "../../internals/hooks/index.js";
+import { useStyles } from "../../internals/hooks/index.js";
 import { useCalendar } from "../hooks/index.js";
 const GridRow = forwardRef((props, ref) => {
   var _locale$dateLocale$op, _locale$dateLocale;
@@ -32,7 +32,7 @@ const GridRow = forwardRef((props, ref) => {
   const {
     prefix,
     merge
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const handleSelect = useCallback((date, disabled, event) => {
     if (disabled) {
       return;

package/esm/Calendar/MonthDropdown/MonthDropdown.js

@@ -5,7 +5,7 @@ import MonthDropdownItem from "./MonthDropdownItem.js";
 import { forwardRef } from "../../internals/utils/index.js";
 import { getMonth, getYear } from "../../internals/utils/date/index.js";
 import { AutoSizer, FixedSizeList } from "../../internals/Windowing/index.js";
-import { useClassNames } from "../../internals/hooks/index.js";
+import { useStyles } from "../../internals/hooks/index.js";
 import { useCalendar } from "../hooks/index.js";
 import { isEveryDateInMonth } from "../utils/index.js";
 // Array representing the index of each month
@@ -34,8 +34,8 @@ const MonthDropdown = forwardRef((props, ref) => {
   const {
     prefix,
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
+    withPrefix
+  } = useStyles(classPrefix);
   const thisYear = getYear(new Date());
   const startYear = limitStartYear ? thisYear - limitStartYear + 1 : 1900;
   const rowCount = useMemo(() => {
@@ -90,7 +90,7 @@ const MonthDropdown = forwardRef((props, ref) => {
       });
     })));
   }, [Item, date, isMonthDisabled, merge, prefix, itemClassName, rowCount, startYear]);
-  const classes = merge(className, withClassPrefix(), {
+  const classes = merge(className, withPrefix(), {
     show
   });
   const initialItemIndex = getYear(date) - startYear;

package/esm/Calendar/MonthDropdown/MonthDropdownItem.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import { forwardRef, composeFunctions } from "../../internals/utils/index.js";
 import { setMonth, setYear } from "../../internals/utils/date/index.js";
-import { useClassNames, useEventCallback } from "../../internals/hooks/index.js";
+import { useStyles, useEventCallback } from "../../internals/hooks/index.js";
 import { useCustom } from "../../CustomProvider/index.js";
 import { useCalendar } from "../hooks/index.js";
 import { getAriaLabel } from "../utils/index.js";
@@ -45,9 +45,9 @@ const MonthDropdownItem = forwardRef((props, ref) => {
   const {
     prefix,
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix({
     active
   }), {
     disabled

package/esm/Calendar/TimeDropdown/TimeDropdown.js

@@ -6,7 +6,7 @@ import camelCase from 'lodash/camelCase';
 import isNumber from 'lodash/isNumber';
 import TimeColumn from "./TimeColumn.js";
 import { forwardRef } from "../../internals/utils/index.js";
-import { useClassNames, useEventCallback } from "../../internals/hooks/index.js";
+import { useStyles, useEventCallback } from "../../internals/hooks/index.js";
 import { startOfToday, getHours, setHours, setMinutes, setSeconds, omitHideDisabledProps } from "../../internals/utils/date/index.js";
 import { useCalendar } from "../hooks/index.js";
 import { getTimeLimits, getClockTime, scrollToTime, formatWithLeadingZero } from "./utils/index.js";
@@ -71,7 +71,7 @@ const TimeDropdown = forwardRef((props, ref) => {
     prefix,
     rootPrefix,
     merge
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const renderColumn = (type, value) => {
     if (!isNumber(value)) {
       return null;

package/esm/Card/Card.js

@@ -4,9 +4,9 @@ import React from 'react';
 import CardHeader from "./CardHeader.js";
 import CardBody from "./CardBody.js";
 import CardFooter from "./CardFooter.js";
-import { forwardRef } from "../internals/utils/index.js";
+import { forwardRef, mergeStyles, getCssValue } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 const Subcomponents = {
   Header: CardHeader,
   Body: CardBody,
@@ -31,17 +31,15 @@ const Card = forwardRef((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix(direction, size, {
+    withPrefix,
+    cssVar
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix(direction, size, {
     bordered,
     shaded: shaded === true,
     ['shaded-hover']: shaded === 'hover'
   }));
-  const styles = {
-    ...style,
-    '--rs-card-width': typeof width === 'number' ? `${width}px` : width
-  };
+  const styles = mergeStyles(style, cssVar('width', width, getCssValue));
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
     className: classes,

package/esm/CardGroup/CardGroup.js

@@ -1,8 +1,8 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import { forwardRef, getCssValue } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { forwardRef, getCssValue, mergeStyles } from "../internals/utils/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 const CardGroup = forwardRef((props, ref) => {
   const {
@@ -20,14 +20,11 @@ const CardGroup = forwardRef((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
-  const styles = {
-    '--rs-columns': columns,
-    '--rs-spacing': getCssValue(spacing),
-    ...style
-  };
+    withPrefix,
+    cssVar
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
+  const styles = mergeStyles(style, cssVar('columns', columns), cssVar('spacing', spacing, getCssValue));
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
     className: classes,

package/esm/Carousel/Carousel.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState, useMemo, useCallback, useRef } from 'react';
 import classNames from 'classnames';
-import { useClassNames, useControlled, useUpdateEffect, useTimeout } from "../internals/hooks/index.js";
+import { useStyles, useControlled, useUpdateEffect, useTimeout } from "../internals/hooks/index.js";
 import { forwardRef, guid, ReactChildren, mergeRefs } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
@@ -33,8 +33,8 @@ const Carousel = forwardRef((props, ref) => {
   const {
     prefix,
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
+    withPrefix
+  } = useStyles(classPrefix);
   const count = ReactChildren.count(children);
   const labels = [];
   const vertical = placement === 'left' || placement === 'right';
@@ -81,6 +81,7 @@ const Carousel = forwardRef((props, ref) => {
   }, [activeIndex, onSlideEnd]);
   const uniqueId = useMemo(() => guid(), []);
   const items = ReactChildren.map(children, (child, index) => {
+    var _child$props;
     if (!child) {
       return;
     }
@@ -106,10 +107,10 @@ const Carousel = forwardRef((props, ref) => {
         ...child.props.style,
         [lengthKey]: `${100 / count}%`
       },
-      className: classNames(prefix('slider-item'), child.props.className)
+      className: classNames(prefix('slider-item'), (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className)
     });
   });
-  const classes = merge(className, withClassPrefix(`placement-${placement}`, `shape-${shape}`));
+  const classes = merge(className, withPrefix(`placement-${placement}`, `shape-${shape}`));
   const positiveOrder = vertical || !rtl;
   const sign = positiveOrder ? '-' : '';
   const activeRatio = `${sign}${100 / count * activeIndex}%`;

package/esm/CascadeTree/CascadeTree.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import type { CascadeTreeProps } from './types';
 export interface CascadeTreeComponent {
-    <T>(props: CascadeTreeProps<T>): JSX.Element | null;
+    <T>(props: CascadeTreeProps<T>): React.ReactElement | null;
     displayName?: string;
 }
 /**

package/esm/CascadeTree/CascadeTree.js

@@ -6,7 +6,7 @@ import SearchView from "./SearchView.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { getParentMap } from "../internals/Tree/utils/index.js";
 import { flattenTree } from "../Tree/utils/index.js";
-import { useMap, useControlled, useClassNames, useEventCallback } from "../internals/hooks/index.js";
+import { useMap, useControlled, useStyles, useEventCallback } from "../internals/hooks/index.js";
 import { useSearch, useSelect, usePaths } from "./hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
@@ -102,10 +102,10 @@ const CascadeTree = forwardRef((props, ref) => {
     }
   });
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   const onSearchCallback = useCallback((value, _items, event) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event), [onSearch]);
   const {
     items,

package/esm/CascadeTree/SearchView.d.ts

@@ -1,18 +1,18 @@
 import React from 'react';
-import { ItemDataType, WithAsProps } from '../internals/types';
+import { Option, WithAsProps } from '../internals/types';
 interface SearchViewProps<T> extends WithAsProps {
     searchKeyword: string;
     labelKey: string;
     valueKey: string;
-    parentMap: WeakMap<ItemDataType<T>, ItemDataType<T>>;
-    data: ItemDataType<T>[];
+    parentMap: WeakMap<Option<T>, Option<T>>;
+    data: Option<T>[];
     focusItemValue?: T | null;
     disabledItemValues: any[];
     locale?: Record<string, string>;
-    renderSearchItem?: (label: React.ReactNode, items: ItemDataType<T>[]) => React.ReactNode;
-    onSelect: (item: ItemDataType<T>, items: ItemDataType<T>[], event: React.MouseEvent) => void;
+    renderSearchItem?: (label: React.ReactNode, items: Option<T>[]) => React.ReactNode;
+    onSelect: (item: Option<T>, items: Option<T>[], event: React.MouseEvent) => void;
     onSearch: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
-    inputRef?: React.RefObject<HTMLInputElement>;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
 }
 declare function SearchView<T>(props: SearchViewProps<T>): React.JSX.Element;
 export default SearchView;

package/esm/CascadeTree/SearchView.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import SearchBox from "../internals/SearchBox/index.js";
 import Highlight from "../Highlight/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { getPathTowardsItem } from "../internals/Tree/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 function SearchView(props) {
@@ -28,10 +28,10 @@ function SearchView(props) {
   const {
     merge,
     prefix,
-    withClassPrefix,
+    withPrefix,
     rootPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   const {
     getLocale
   } = useCustom();

package/esm/CascadeTree/TreeView.d.ts

@@ -1,18 +1,18 @@
 import React from 'react';
-import type { ItemDataType, WithAsProps, DataProps, ToArray } from '../internals/types';
+import type { Option, WithAsProps, DataProps, ToArray } from '../internals/types';
 import type { SelectNode, CascadeColumn } from './types';
 type SetLike<T = unknown> = {
     has(value: T): boolean;
 };
-export interface TreeViewProps<T = any> extends WithAsProps, Omit<DataProps<ItemDataType<T>>, 'data'> {
-    data?: (readonly ItemDataType<T>[])[];
+export interface TreeViewProps<T = any> extends WithAsProps, Omit<DataProps<Option<T>>, 'data'> {
+    data?: (readonly Option<T>[])[];
     disabledItemValues?: ToArray<NonNullable<T>>;
     activeItemValue?: T | null;
-    loadingItemsSet?: SetLike<ItemDataType<T>>;
-    cascadePaths?: ItemDataType<T>[];
+    loadingItemsSet?: SetLike<Option<T>>;
+    cascadePaths?: Option<T>[];
     columnWidth?: number;
     columnHeight?: number | string;
-    renderTreeNode?: (node: React.ReactNode, itemData: ItemDataType<T>) => React.ReactNode;
+    renderTreeNode?: (node: React.ReactNode, itemData: Option<T>) => React.ReactNode;
     renderColumn?: (childNodes: React.ReactNode, column: CascadeColumn<T>) => React.ReactNode;
     onSelect?: (node: SelectNode<T>, event: React.MouseEvent) => void;
 }

package/esm/CascadeTree/TreeView.js

@@ -8,8 +8,8 @@ import scrollTop from 'dom-lib/scrollTop';
 import SpinnerIcon from '@rsuite/icons/Spinner';
 import ArrowLeftLineIcon from '@rsuite/icons/ArrowLeftLine';
 import ArrowRightLineIcon from '@rsuite/icons/ArrowRightLine';
-import { forwardRef, shallowEqual, mergeRefs } from "../internals/utils/index.js";
-import { useClassNames, useEventCallback } from "../internals/hooks/index.js";
+import { forwardRef, shallowEqual, mergeRefs, mergeStyles } from "../internals/utils/index.js";
+import { useStyles, useEventCallback } from "../internals/hooks/index.js";
 import { ListItem, useCombobox } from "../internals/Picker/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 const emptyArray = [];
@@ -37,9 +37,9 @@ const TreeView = forwardRef((props, ref) => {
   const {
     merge,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const classes = merge(className, prefix('items'));
-  const rootRef = useRef();
+  const rootRef = useRef(null);
   const {
     rtl
   } = useCustom();
@@ -120,7 +120,9 @@ const TreeView = forwardRef((props, ref) => {
       value: value,
       className: children ? prefix('has-children') : undefined,
       onSelect: (_value, event) => handleSelect(layer, itemData, event)
-    }, renderTreeNode ? renderTreeNode(label, itemData) : label, children ? /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: prefix('item-label')
+    }, renderTreeNode ? renderTreeNode(label, itemData) : label), children ? /*#__PURE__*/React.createElement(Icon, {
       className: prefix('caret'),
       spin: loading,
       "data-testid": "spinner"
@@ -155,10 +157,9 @@ const TreeView = forwardRef((props, ref) => {
       layer
     }) : childNodes);
   });
-  const styles = {
-    ...style,
+  const styles = mergeStyles(style, {
     width: data.length * columnWidth
-  };
+  });
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "tree",
     id: id ? `${id}-${popupType}` : undefined,

package/esm/CascadeTree/hooks/useSearch.d.ts

@@ -1,17 +1,17 @@
 /// <reference types="react" />
-import { ItemDataType } from '../../internals/types';
+import { Option } from '../../internals/types';
 interface SearchPanelProps<T> {
     labelKey: string;
     childrenKey: string;
-    parentMap: WeakMap<ItemDataType<T>, ItemDataType<T>>;
-    flattenedData: ItemDataType<T>[];
+    parentMap: WeakMap<Option<T>, Option<T>>;
+    flattenedData: Option<T>[];
     parentSelectable?: boolean;
-    onSearch: (value: string, items: ItemDataType<T>[], event: React.SyntheticEvent) => void;
+    onSearch: (value: string, items: Option<T>[], event: React.SyntheticEvent) => void;
 }
 declare function useSearch<T>(props: SearchPanelProps<T>): {
     searchKeyword: string;
     setSearchKeyword: import("react").Dispatch<import("react").SetStateAction<string>>;
-    items: ItemDataType<T>[];
+    items: Option<T>[];
     handleSearch: (...args: any[]) => any;
 };
 export default useSearch;