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

package/esm/Sidenav/ExpandedSidenavDropdownItem.js

@@ -2,7 +2,7 @@
 import React, { useCallback, useContext } from 'react';
 import isNil from 'lodash/isNil';
 import Ripple from "../internals/Ripple/index.js";
-import SafeAnchor from "../SafeAnchor/index.js";
+import SafeAnchor from "../internals/SafeAnchor/index.js";
 import NavContext from "../Nav/NavContext.js";
 import { forwardRef, createChainedFunction, shallowEqual } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";

package/esm/Sidenav/SidenavItem.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext, useCallback } from 'react';
 import classNames from 'classnames';
 import isNil from 'lodash/isNil';
-import SafeAnchor from "../SafeAnchor/index.js";
+import SafeAnchor from "../internals/SafeAnchor/index.js";
 import NavContext from "../Nav/NavContext.js";
 import MenuItem from "../internals/Menu/MenuItem.js";
 import omit from 'lodash/omit';

package/esm/Slider/Graduated.d.ts

@@ -6,6 +6,10 @@ export interface GraduatedProps extends BoxProps {
     max: number;
     count: number;
     value: number | number[];
+    marks?: {
+        value: number;
+        label: React.ReactNode;
+    }[];
     renderMark?: (mark: number) => React.ReactNode;
 }
 declare const Graduated: import("../internals/types").InternalRefForwardingComponent<"div", GraduatedProps, never> & Record<string, never>;

package/esm/Slider/Graduated.js

@@ -16,12 +16,14 @@ const Graduated = forwardRef((props, ref) => {
     value,
     classPrefix = 'slider',
     className,
+    marks = [],
     renderMark,
     ...rest
   } = props;
   const {
     merge,
-    prefix
+    prefix,
+    cssVar
   } = useStyles(classPrefix);
   const activeIndexs = [];
   let startIndex = 0;
@@ -37,32 +39,53 @@ const Graduated = forwardRef((props, ref) => {
     activeIndexs.push(precisionMath(Math.ceil((value - min) / (max - min) * count)));
   }
   const graduatedItems = [];
-  for (let i = 0; i < count; i += 1) {
-    const classes = prefix({
-      pass: i >= startIndex && i <= endIndex,
-      active: ~activeIndexs.indexOf(i)
+
+  // If custom marks are provided, use them
+  if (marks.length > 0) {
+    // Only create DOM nodes for the specific mark values
+    marks.forEach((mark, index) => {
+      // Calculate the position index for this mark
+      const markPosition = precisionMath((mark.value - min) / (max - min) * count);
+      graduatedItems.push(/*#__PURE__*/React.createElement("li", {
+        className: prefix('tick'),
+        key: `${mark.value}-${index}`,
+        "data-pass": markPosition >= startIndex && markPosition <= endIndex,
+        "data-active": activeIndexs.indexOf(markPosition) !== -1,
+        style: cssVar('tick-offset', `${(mark.value - min) / (max - min) * 100}%`)
+      }, /*#__PURE__*/React.createElement(Mark, {
+        mark: mark.value,
+        renderMark: () => mark.label || mark.value
+      })));
     });
-    const mark = precisionMath(i * step + min);
-    const lastMark = Math.min(max, mark + step);
-    const last = i === count - 1;
-    graduatedItems.push(/*#__PURE__*/React.createElement("li", {
-      className: classes,
-      key: i
-    }, /*#__PURE__*/React.createElement(Mark, {
-      mark: mark,
-      renderMark: renderMark
-    }), last ? /*#__PURE__*/React.createElement(Mark, {
-      mark: lastMark,
-      renderMark: renderMark,
-      last: last
-    }) : null));
+  } else {
+    // Original implementation for when no custom marks are provided
+    for (let i = 0; i < count; i += 1) {
+      const mark = precisionMath(i * step + min);
+      const lastMark = Math.min(max, mark + step);
+      const last = i === count - 1;
+      graduatedItems.push(/*#__PURE__*/React.createElement("li", {
+        className: prefix('tick'),
+        "data-pass": i >= startIndex && i <= endIndex,
+        "data-active": activeIndexs.indexOf(i) !== -1,
+        key: i
+      }, /*#__PURE__*/React.createElement(Mark, {
+        mark: mark,
+        renderMark: renderMark
+      }), last ? /*#__PURE__*/React.createElement(Mark, {
+        mark: lastMark,
+        renderMark: renderMark,
+        last: last
+      }) : null));
+    }
   }
   const classes = merge(className, prefix('graduator'));
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,
     className: classes
-  }, rest), /*#__PURE__*/React.createElement("ol", null, graduatedItems));
+  }, rest, {
+    "data-with-marks": marks.length > 0
+  }), /*#__PURE__*/React.createElement("ol", null, graduatedItems));
 });
 Graduated.displayName = 'Graduated';
 export default Graduated;

package/esm/Slider/Handle.d.ts

@@ -4,9 +4,9 @@ export interface HandleProps extends BoxProps, React.HTMLAttributes<HTMLDivEleme
     disabled?: boolean;
     vertical?: boolean;
     tooltip?: boolean;
-    rtl?: boolean;
     position?: number;
     value?: number;
+    keepTooltipOpen?: boolean;
     renderTooltip?: (value: number | undefined) => React.ReactNode;
     onDragMove?: (event: React.DragEvent, dataset?: DOMStringMap) => void;
     onDragStart?: (event: React.MouseEvent) => void;

package/esm/Slider/Handle.js

@@ -18,10 +18,10 @@ const Handle = forwardRef((props, ref) => {
     position,
     vertical,
     tooltip,
-    rtl,
     value,
     role,
     tabIndex,
+    keepTooltipOpen,
     renderTooltip,
     onDragStart,
     onDragMove,
@@ -31,15 +31,13 @@ const Handle = forwardRef((props, ref) => {
     'data-key': dateKey,
     ...rest
   } = props;
-  const horizontalKey = rtl ? 'right' : 'left';
-  const direction = vertical ? 'bottom' : horizontalKey;
-  const styles = mergeStyles(style, {
-    [direction]: `${position}%`
-  });
+  const actualTooltip = tooltip || keepTooltipOpen;
   const {
     merge,
-    prefix
+    prefix,
+    cssVar
   } = useStyles(classPrefix);
+  const styles = mergeStyles(style, cssVar('offset', `${position}%`));
   const {
     active,
     onMoveStart,
@@ -47,14 +45,15 @@ const Handle = forwardRef((props, ref) => {
     rootRef,
     tooltipRef
   } = useDrag({
-    tooltip,
+    tooltip: actualTooltip,
     disabled,
     onDragStart,
     onDragMove,
-    onDragEnd
+    onDragEnd,
+    keepTooltipOpen
   });
   const handleClasses = merge(className, prefix('handle'), {
-    active
+    active: active || keepTooltipOpen
   });
   return /*#__PURE__*/React.createElement(Box, {
     as: as,
@@ -70,10 +69,11 @@ const Handle = forwardRef((props, ref) => {
     "data-range": dataRange,
     "data-key": dateKey,
     "data-testid": "slider-handle"
-  }, tooltip && /*#__PURE__*/React.createElement(Tooltip, {
+  }, actualTooltip && /*#__PURE__*/React.createElement(Tooltip, {
     "aria-hidden": "true",
     ref: tooltipRef,
-    className: merge(prefix('tooltip'), 'placement-top')
+    className: prefix('tooltip'),
+    "data-placement": vertical ? 'left' : 'top'
   }, renderTooltip ? renderTooltip(value) : value), /*#__PURE__*/React.createElement(Input, _extends({
     tabIndex: -1,
     value: value

package/esm/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps } from '../internals/Box';
-import type { FormControlBaseProps } from '../internals/types';
+import type { FormControlBaseProps, Size } from '../internals/types';
 export interface LocaleType {
     placeholder?: string;
     searchPlaceholder?: string;
@@ -44,6 +44,21 @@ export interface SliderProps<T = number> extends BoxProps, FormControlBaseProps<
     placeholder?: React.ReactNode;
     /** Vertical Slide */
     vertical?: boolean;
+    /** If true, tooltip will always be visible  even without hover */
+    keepTooltipOpen?: boolean;
+    /**
+     * A slider can have different sizes.
+     *
+     * @default 'sm'
+     */
+    size?: Size;
+    /**
+     * Custom marks on the ruler
+     */
+    marks?: {
+        value: number;
+        label: React.ReactNode;
+    }[];
     /** Customize labels on the render ruler */
     renderMark?: (mark: number) => React.ReactNode;
     /** Customize the content of the rendered Tooltip. */

package/esm/Slider/Slider.js

@@ -42,15 +42,18 @@ const Slider = forwardRef((props, ref) => {
     handleTitle,
     tooltip = true,
     step = 1,
+    size = 'sm',
     defaultValue = 0,
     value: valueProp,
     max: maxProp = 100,
     placeholder,
+    marks,
     getAriaValueText,
     renderTooltip,
     renderMark,
     onChange,
     onChangeCommitted,
+    keepTooltipOpen,
     ...rest
   } = propsWithDefaults;
   const barRef = useRef(null);
@@ -178,7 +181,8 @@ const Slider = forwardRef((props, ref) => {
     as: as,
     ref: ref,
     role: "presentation",
-    className: classes
+    className: classes,
+    "data-size": size
   }, rest), /*#__PURE__*/React.createElement("div", {
     ref: barRef,
     className: merge(barClassName, prefix('bar')),
@@ -195,6 +199,7 @@ const Slider = forwardRef((props, ref) => {
     max: max,
     count: count,
     value: value,
+    marks: marks,
     renderMark: renderMark
   })), /*#__PURE__*/React.createElement(Handle, {
     position: (value - min) / (max - min) * 100,
@@ -203,8 +208,8 @@ const Slider = forwardRef((props, ref) => {
     disabled: disabled,
     vertical: vertical,
     tooltip: tooltip,
-    rtl: rtl,
     value: value,
+    keepTooltipOpen: keepTooltipOpen,
     renderTooltip: renderTooltip,
     onDragMove: handleChangeValue,
     onKeyDown: handleKeyDown,

package/esm/Slider/useDrag.d.ts

@@ -5,6 +5,7 @@ interface DragProps {
     onDragStart?: (event: React.MouseEvent) => void;
     onDragMove?: (event: React.DragEvent, dataset?: DOMStringMap) => void;
     onDragEnd?: (event: React.MouseEvent, dataset?: DOMStringMap) => void;
+    keepTooltipOpen?: boolean;
 }
 declare const useDrag: (props: DragProps) => {
     active: boolean;

package/esm/Slider/useDrag.js

@@ -12,7 +12,8 @@ const useDrag = props => {
     disabled,
     onDragMove,
     onDragEnd,
-    onDragStart
+    onDragStart,
+    keepTooltipOpen
   } = props;
   const [active, setActive] = useState(false);
   const moveTracker = useRef(null);
@@ -27,8 +28,9 @@ const useDrag = props => {
     const tooltipElement = tooltipRef.current;
     if (tooltip && tooltipElement) {
       const width = getWidth(tooltipElement);
+
       // Set the position of the tooltip
-      addStyle(tooltipElement, 'left', `-${width / 2}px`);
+      addStyle(tooltipElement, '--rs-tooltip-offset', `-${width / 2}px`);
     }
   }, [tooltip]);
   const handleDragMove = useEventCallback((_deltaX, _deltaY, event) => {
@@ -67,10 +69,13 @@ const useDrag = props => {
     setTooltipPosition();
   });
   useEffect(() => {
+    if (keepTooltipOpen) {
+      onMouseEnter();
+    }
     return () => {
       releaseMoves();
     };
-  }, [releaseMoves]);
+  }, [releaseMoves, keepTooltipOpen]);
   return {
     active,
     rootRef,

package/esm/Steps/Steps.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import StepItem from "./StepItem.js";
 import Box from "../internals/Box/index.js";
-import { forwardRef, ReactChildren } from "../internals/utils/index.js";
+import { forwardRef, rch } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 const Subcomponents = {
@@ -41,8 +41,8 @@ const Steps = forwardRef((props, ref) => {
     vertical,
     horizontal: !vertical
   }));
-  const count = ReactChildren.count(children);
-  const items = ReactChildren.mapCloneElement(children, (item, index) => {
+  const count = rch.count(children);
+  const items = rch.mapCloneElement(children, (item, index) => {
     const itemStyles = {
       flexBasis: index < count - 1 ? `${100 / (count - 1)}%` : undefined,
       maxWidth: index === count - 1 ? `${100 / count}%` : undefined

package/esm/Tabs/Tabs.js

@@ -5,7 +5,7 @@ import Nav from "../Nav/index.js";
 import Tab from "./Tab.js";
 import TabPanel from "./TabPanel.js";
 import Box from "../internals/Box/index.js";
-import { forwardRef, ReactChildren } from "../internals/utils/index.js";
+import { forwardRef, rch } from "../internals/utils/index.js";
 import { useStyles, useControlled, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 
@@ -56,7 +56,7 @@ const renderPanels = (children, tabProps) => {
     id,
     activeKey
   } = tabProps;
-  return ReactChildren.map(children, child => {
+  return rch.map(children, child => {
     const {
       eventKey,
       children
@@ -75,7 +75,7 @@ const renderTabs = (children, tabPanelProps) => {
     id,
     activeKey
   } = tabPanelProps;
-  return ReactChildren.map(children, child => {
+  return rch.map(children, child => {
     const {
       eventKey,
       title,

package/esm/Textarea/Textarea.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { InputBaseCommonProps } from '../internals/InputBase';
+import type { SanitizedTextareaProps, PropsWithoutChange, FormControlBaseProps, Size } from '../internals/types';
+export interface TextareaProps extends InputBaseCommonProps, SanitizedTextareaProps, PropsWithoutChange<FormControlBaseProps> {
+    /**
+     * The size of the textarea.
+     * @default 'md'
+     */
+    size?: Size;
+    /** Enable auto resize of the textarea based on content */
+    autosize?: boolean;
+    /**
+     * Maximum number of rows up to which the textarea can grow
+     * Auto resize props for react-textarea-autosize
+     */
+    maxRows?: number;
+    /**
+     * Minimum number of rows up to which the textarea can shrink
+     * Auto resize props for react-textarea-autosize
+     */
+    minRows?: number;
+    /**
+     * Whether to allow the textarea to be resized
+     */
+    resize?: React.CSSProperties['resize'];
+    /**
+     * Called when Enter key is pressed
+     */
+    onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+}
+declare const Textarea: import("../internals/types").InternalRefForwardingComponent<"textarea", TextareaProps, never> & Record<string, never>;
+export default Textarea;

package/esm/Textarea/Textarea.js

@@ -0,0 +1,46 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import ReactTextareaAutosize from 'react-textarea-autosize';
+import InputBase from "../internals/InputBase/index.js";
+import { forwardRef, mergeStyles } from "../internals/utils/index.js";
+import { useStyles } from "../internals/hooks/index.js";
+import { useCustom } from "../CustomProvider/index.js";
+const Textarea = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('Textarea', props);
+  const {
+    rows = 3,
+    classPrefix = 'textarea',
+    className,
+    size = 'md',
+    autosize,
+    maxRows,
+    minRows,
+    resize,
+    style,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withPrefix,
+    merge,
+    cssVar
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
+  const styles = mergeStyles(style, cssVar('resize', resize));
+  const autosizeProps = autosize ? {
+    maxRows,
+    minRows
+  } : {};
+  return /*#__PURE__*/React.createElement(InputBase, _extends({
+    as: autosize ? ReactTextareaAutosize : 'textarea',
+    ref: ref,
+    size: size,
+    rows: rows,
+    className: classes,
+    style: styles
+  }, autosizeProps, rest));
+});
+Textarea.displayName = 'Textarea';
+export default Textarea;

package/esm/Textarea/index.d.ts

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

package/esm/Textarea/index.js

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

package/esm/Timeline/Timeline.js

@@ -6,7 +6,7 @@ import TimelineItem from "./TimelineItem.js";
 import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-import { forwardRef, ReactChildren } from "../internals/utils/index.js";
+import { forwardRef, rch } from "../internals/utils/index.js";
 const ACTIVE_FIRST = index => index === 0;
 const ACTIVE_LAST = (index, totalItemsCount) => index === totalItemsCount - 1;
 const SubcomponentsAndStaticMethods = {
@@ -38,7 +38,7 @@ const Timeline = forwardRef((props, ref) => {
     merge,
     withPrefix
   } = useStyles(classPrefix);
-  const count = ReactChildren.count(children);
+  const count = rch.count(children);
   const withTime = some(React.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;
@@ -51,7 +51,7 @@ const Timeline = forwardRef((props, ref) => {
     as: as,
     ref: ref,
     className: classes
-  }, rest), ReactChildren.mapCloneElement(children, (_child, index) => ({
+  }, rest), rch.mapCloneElement(children, (_child, index) => ({
     last: index + 1 === count,
     INTERNAL_active: isItemActive(index, count),
     align

package/esm/Toggle/Toggle.d.ts

@@ -42,11 +42,20 @@ export interface ToggleProps extends BoxProps, SanitizedInputProps {
     /**
      * The size of the toggle
      */
-    size?: Omit<Size, 'xs'>;
+    size?: Size;
     /**
      * Custom locale
      */
     locale?: ToggleLocale;
+    /**
+     * The label of the toggle switch
+     */
+    label?: React.ReactNode;
+    /**
+     * The placement of the label
+     * @version 6.0.0
+     */
+    labelPlacement?: 'start' | 'end';
     /**
      * Called when the state of the toggle changes
      */

package/esm/Toggle/Toggle.js

@@ -32,6 +32,8 @@ const Toggle = forwardRef((props, ref) => {
     defaultChecked,
     size = 'md',
     locale,
+    label = children,
+    labelPlacement = 'end',
     onChange,
     ...rest
   } = propsWithDefaults;
@@ -48,10 +50,10 @@ const Toggle = forwardRef((props, ref) => {
     loading
   }));
   const inner = checked ? checkedChildren : unCheckedChildren;
-  const label = checked ? locale === null || locale === void 0 ? void 0 : locale.on : locale === null || locale === void 0 ? void 0 : locale.off;
+  const innerLabel = checked ? locale === null || locale === void 0 ? void 0 : locale.on : locale === null || locale === void 0 ? void 0 : locale.off;
   const labelId = useUniqueId('rs-label');
   const innerId = inner ? labelId + '-inner' : undefined;
-  const labelledby = children ? labelId : innerId;
+  const labelledby = label ? labelId : innerId;
   const [htmlInputProps, restProps] = partitionHTMLProps(rest);
   const handleInputChange = useEventCallback(e => {
     if (disabled || readOnly || loading) {
@@ -64,12 +66,13 @@ const Toggle = forwardRef((props, ref) => {
     onChange === null || onChange === void 0 || onChange(checked, e);
   });
   if (plaintext) {
-    return /*#__PURE__*/React.createElement(Plaintext, null, inner || label);
+    return /*#__PURE__*/React.createElement(Plaintext, null, inner || innerLabel);
   }
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,
-    className: classes
+    className: classes,
+    "data-placement": labelPlacement
   }, restProps), /*#__PURE__*/React.createElement("input", _extends({}, htmlInputProps, {
     ref: inputRef,
     type: "checkbox",
@@ -83,19 +86,19 @@ const Toggle = forwardRef((props, ref) => {
     "aria-checked": checked,
     "aria-disabled": disabled,
     "aria-labelledby": labelledby,
-    "aria-label": labelledby ? undefined : label,
+    "aria-label": labelledby ? undefined : innerLabel,
     "aria-busy": loading || undefined
   })), /*#__PURE__*/React.createElement("span", {
-    className: prefix('presentation')
-  }, /*#__PURE__*/React.createElement("span", {
+    className: prefix('track')
+  }, inner && /*#__PURE__*/React.createElement("span", {
     className: prefix('inner'),
     id: innerId
   }, inner), loading && /*#__PURE__*/React.createElement(Loader, {
     className: prefix('loader')
-  })), children && /*#__PURE__*/React.createElement("span", {
+  })), label && /*#__PURE__*/React.createElement("span", {
     className: prefix('label'),
     id: labelId
-  }, children));
+  }, label));
 });
 Toggle.displayName = 'Toggle';
 export default Toggle;

package/esm/TreePicker/TreePicker.js

@@ -2,7 +2,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import pick from 'lodash/pick';
-import omit from 'lodash/omit';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import useTreeWithChildren from "../Tree/hooks/useTreeWithChildren.js";
@@ -10,11 +9,10 @@ import useFlattenTree from "../Tree/hooks/useFlattenTree.js";
 import useFocusState from "./hooks/useFocusState.js";
 import useExpandTree from "../Tree/hooks/useExpandTree.js";
 import TreeView from "../Tree/TreeView.js";
-import Box from "../internals/Box/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, createChainedFunction, mergeRefs } from "../internals/utils/index.js";
 import { getActiveItem, getTreeActiveNode } from "../Tree/utils/index.js";
-import { PickerToggle, PickerPopup, PickerToggleTrigger, usePickerClassName, usePickerRef, onMenuKeyDown, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from "../internals/Picker/index.js";
+import { PickerToggle, PickerPopup, PickerToggleTrigger, usePickerRef, onMenuKeyDown, triggerPropKeys, useToggleKeyDownEvent } from "../internals/Picker/index.js";
 import { TreeProvider, useTreeImperativeHandle } from "../internals/Tree/TreeProvider.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
@@ -40,6 +38,8 @@ const TreePicker = forwardRef((props, ref) => {
     defaultExpandItemValues = [],
     expandItemValues: controlledExpandItemValues,
     id,
+    block,
+    className,
     locale,
     labelKey = 'label',
     placeholder,
@@ -246,27 +246,26 @@ const TreePicker = forwardRef((props, ref) => {
       }
     }
   }
-  const [classes, usedClassNamePropKeys] = usePickerClassName({
-    ...props,
-    classPrefix,
-    appearance,
-    hasValue: hasValidValue,
-    name: 'tree',
-    cleanable
-  });
-  return /*#__PURE__*/React.createElement(PickerToggleTrigger, _extends({
+  return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    as: as,
     id: id,
+    name: "tree",
+    block: block,
+    disabled: disabled,
+    appearance: appearance,
     popupType: "tree",
-    pickerProps: pick(props, pickTriggerPropKeys),
+    triggerProps: {
+      ...pick(props, triggerPropKeys),
+      ...triggerProps
+    },
     ref: trigger,
     placement: placement,
-    speaker: renderTreeView
-  }, triggerProps), /*#__PURE__*/React.createElement(Box, {
-    as: as,
-    className: classes,
+    speaker: renderTreeView,
+    rootRef: root,
     style: style,
-    ref: root
-  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [...omitTriggerPropKeys, ...usedClassNamePropKeys, 'cascade']), {
+    classPrefix: classPrefix,
+    className: className
+  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({
     ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
@@ -279,7 +278,7 @@ const TreePicker = forwardRef((props, ref) => {
     placement: placement,
     inputValue: value,
     focusItemValue: focusItemValue
-  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));
+  }, rest), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));
 });
 TreePicker.displayName = 'TreePicker';
 export default TreePicker;