rsuite 6.0.0-canary-20250507 → 6.0.0-canary-2025062016

package/esm/SegmentedControl/SegmentedItem.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SegmentedItemDataType } from './SegmentedControl';
+export interface SegmentedItemProps {
+    item: SegmentedItemDataType;
+    index: number;
+    name?: string;
+    active: boolean;
+    disabled?: boolean;
+    classPrefix: string;
+    onChange: (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const SegmentedItem: {
+    ({ item, index, name, active, disabled, classPrefix, onChange }: SegmentedItemProps): React.JSX.Element;
+    displayName: string;
+};
+export default SegmentedItem;

package/esm/SegmentedControl/SegmentedItem.js

@@ -0,0 +1,39 @@
+'use client';
+import React from 'react';
+import { useStyles } from "../internals/hooks/index.js";
+const SegmentedItem = ({
+  item,
+  index,
+  name,
+  active,
+  disabled,
+  classPrefix,
+  onChange
+}) => {
+  const {
+    prefix
+  } = useStyles(classPrefix);
+  const handleChange = event => {
+    if (disabled) return;
+    onChange(item.value, event);
+  };
+  return /*#__PURE__*/React.createElement("label", {
+    className: prefix('item'),
+    "data-value": item.value,
+    "data-index": index,
+    "data-active": active || undefined,
+    "data-disabled": disabled || undefined
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "radio",
+    name: name,
+    value: String(item.value),
+    checked: active,
+    disabled: disabled,
+    onChange: handleChange,
+    className: prefix('radio')
+  }), /*#__PURE__*/React.createElement("span", {
+    className: prefix('label')
+  }, item.label));
+};
+SegmentedItem.displayName = 'SegmentedItem';
+export default SegmentedItem;

package/esm/SegmentedControl/hooks/useIndicatorPosition.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+interface UseIndicatorPositionProps {
+    containerRef: RefObject<HTMLDivElement | null>;
+    activeIndex?: number;
+    indicator: 'pill' | 'underline';
+    data?: Array<{
+        value: string | number;
+    }>;
+    block?: boolean;
+}
+/**
+ * Custom hook to calculate and update the indicator position
+ */
+declare const useIndicatorPosition: ({ containerRef, activeIndex, indicator, data }: UseIndicatorPositionProps) => {
+    style: import("react").CSSProperties;
+};
+export default useIndicatorPosition;

package/esm/SegmentedControl/hooks/useIndicatorPosition.js

@@ -0,0 +1,50 @@
+'use client';
+import { useCallback, useEffect, useState } from 'react';
+import isEqual from 'lodash/isEqual';
+import { useElementResize } from "../../internals/hooks/index.js";
+/**
+ * Updates the indicator position based on the active item
+ */
+const updateIndicatorPosition = (container, activeIndex, indicator) => {
+  if (activeIndex === -1) return {};
+  const activeItem = container.querySelector(`[data-index="${activeIndex}"]`);
+  if (!activeItem) return {};
+  const containerStyle = window.getComputedStyle(container);
+  const paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;
+  return {
+    transform: `translateX(${activeItem.offsetLeft - paddingLeft}px)`,
+    width: activeItem.offsetWidth,
+    height: indicator === 'underline' ? 2 : activeItem.offsetHeight
+  };
+};
+
+/**
+ * Custom hook to calculate and update the indicator position
+ */
+const useIndicatorPosition = ({
+  containerRef,
+  activeIndex,
+  indicator,
+  data
+}) => {
+  const [indicatorStyle, setIndicatorStyle] = useState({});
+  const updatePosition = useCallback(() => {
+    if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) {
+      return;
+    }
+    const newStyle = updateIndicatorPosition(containerRef.current, activeIndex, indicator);
+    setIndicatorStyle(prev => isEqual(prev, newStyle) ? prev : newStyle);
+  }, [containerRef, activeIndex, indicator]);
+
+  // Update position when active item or data changes
+  useEffect(() => {
+    updatePosition();
+  }, [updatePosition, data]);
+
+  // Set up resize observer
+  useElementResize(containerRef, updatePosition);
+  return {
+    style: indicatorStyle
+  };
+};
+export default useIndicatorPosition;

package/esm/SegmentedControl/index.d.ts

@@ -0,0 +1,4 @@
+import SegmentedControl from './SegmentedControl';
+export type { SegmentedControlProps, SegmentedItemDataType } from './SegmentedControl';
+export { SegmentedControl };
+export default SegmentedControl;

package/esm/SegmentedControl/index.js

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

package/esm/Sidenav/ExpandedSidenavDropdown.js

@@ -9,7 +9,7 @@ import SidenavDropdownToggle from "./SidenavDropdownToggle.js";
 import Box from "../internals/Box/index.js";
 import { useStyles, useInternalId } from "../internals/hooks/index.js";
 import { forwardRef, kebabPlace, mergeRefs } from "../internals/utils/index.js";
-import { SidenavContext } from "./Sidenav.js";
+import { SidenavContext } from "./SidenavContext.js";
 import { NavMenuContext } from "../Nav/NavMenu.js";
 const ExpandedSidenavDropdown = forwardRef((props, ref) => {
   const sidenav = useContext(SidenavContext);
@@ -71,10 +71,9 @@ const ExpandedSidenavDropdown = forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(Disclosure, {
     open: open,
     onToggle: handleToggleDisclosure
-  }, (_ref, containerRef) => {
-    let {
-      open
-    } = _ref;
+  }, ({
+    open
+  }, containerRef) => {
     const classes = merge(className, withPrefix({
       [open ? 'expand' : 'collapse']: true,
       disabled
@@ -95,15 +94,12 @@ const ExpandedSidenavDropdown = forwardRef((props, ref) => {
       renderToggle: renderToggle,
       icon: icon,
       placement: placement
-    }, omit(buttonProps, ['open'])), title)), /*#__PURE__*/React.createElement(Disclosure.Content, null, _ref2 => {
-      let {
-        open
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(SidenavDropdownCollapse, {
-        open: open,
-        style: menuStyle
-      }, children);
-    }));
+    }, omit(buttonProps, ['open'])), title)), /*#__PURE__*/React.createElement(Disclosure.Content, null, ({
+      open
+    }) => /*#__PURE__*/React.createElement(SidenavDropdownCollapse, {
+      open: open,
+      style: menuStyle
+    }, children)));
   });
 });
 ExpandedSidenavDropdown.displayName = 'Sidenav.Dropdown';

package/esm/Sidenav/ExpandedSidenavDropdownItem.js

@@ -6,7 +6,7 @@ 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";
-import { SidenavContext } from "./Sidenav.js";
+import { SidenavContext } from "./SidenavContext.js";
 import { useRenderMenuItem } from "../internals/Menu/useRenderMenuItem.js";
 /**
  * Tree View Node

package/esm/Sidenav/ExpandedSidenavDropdownMenu.js

@@ -11,7 +11,7 @@ import ArrowRightLine from '@rsuite/icons/ArrowRightLine';
 import Box from "../internals/Box/index.js";
 import { forwardRef, createChainedFunction } from "../internals/utils/index.js";
 import { useStyles, useCustom } from "../internals/hooks/index.js";
-import { SidenavContext } from "./Sidenav.js";
+import { SidenavContext } from "./SidenavContext.js";
 /**
  * Tree View Node
  * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView
@@ -61,10 +61,9 @@ const ExpandedSidenavDropdownMenu = forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(Disclosure, {
     open: !isNil(eventKey) && openKeys.includes(eventKey),
     onToggle: (_, event) => onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(eventKey, event)
-  }, _ref => {
-    let {
-      open
-    } = _ref;
+  }, ({
+    open
+  }) => {
     const classes = merge(className, prefix('submenu'), prefix(`pull-${rtl ? 'left' : 'right'}`), prefix(open ? 'expand' : 'collapse'), withPrefix({
       'with-icon': icon,
       // open,
@@ -86,10 +85,9 @@ const ExpandedSidenavDropdownMenu = forwardRef((props, ref) => {
       }), title, /*#__PURE__*/React.createElement(Icon, {
         className: iconClasses
       }), /*#__PURE__*/React.createElement(Ripple, null));
-    }), /*#__PURE__*/React.createElement(Disclosure.Content, null, _ref2 => {
-      let {
-        open
-      } = _ref2;
+    }), /*#__PURE__*/React.createElement(Disclosure.Content, null, ({
+      open
+    }) => {
       return /*#__PURE__*/React.createElement(SidenavDropdownCollapse, {
         open: open
       }, children);

package/esm/Sidenav/Sidenav.d.ts

@@ -22,21 +22,6 @@ export interface SidenavProps<T = string | number> extends BoxProps {
      */
     onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
-export declare const SidenavContext: React.Context<SidenavContextType<string | number> | null>;
-export interface SidenavContextType<T = string | number> {
-    openKeys: T[];
-    /**
-     * @deprecated Use activeKey from NavContext instead
-     */
-    activeKey: T | undefined;
-    sidenav: boolean;
-    expanded: boolean;
-    onOpenChange: (eventKey: T, event: React.SyntheticEvent) => void;
-    /**
-     * @deprecated Use onSelect from NavContext instead
-     */
-    onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
-}
 /**
  * The `Sidenav` component is an encapsulation of the page sidebar `Nav`.
  * @see https://rsuitejs.com/components/sidenav/

package/esm/Sidenav/Sidenav.js

@@ -11,7 +11,7 @@ import SidenavGroupLabel from "./SidenavGroupLabel.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef, mergeRefs, shallowEqual } from "../internals/utils/index.js";
 import { useStyles, useCustom, useControlled } from "../internals/hooks/index.js";
-export const SidenavContext = /*#__PURE__*/React.createContext(null);
+import { SidenavContext } from "./SidenavContext.js";
 const emptyArray = [];
 const Subcomponents = {
   Header: SidenavHeader,

package/esm/Sidenav/SidenavContext.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface SidenavContextType<T = string | number> {
+    openKeys: T[];
+    /**
+     * @deprecated Use activeKey from NavContext instead
+     */
+    activeKey: T | undefined;
+    sidenav: boolean;
+    expanded: boolean;
+    onOpenChange: (eventKey: T, event: React.SyntheticEvent) => void;
+    /**
+     * @deprecated Use onSelect from NavContext instead
+     */
+    onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
+}
+export declare const SidenavContext: React.Context<SidenavContextType<string | number> | null>;

package/esm/Sidenav/SidenavContext.js

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

package/esm/Sidenav/SidenavDropdown.js

@@ -14,7 +14,7 @@ import Box from "../internals/Box/index.js";
 import { NavMenuContext } from "../Nav/NavMenu.js";
 import { forwardRef, mergeRefs, kebabPlace } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
-import { SidenavContext } from "./Sidenav.js";
+import { SidenavContext } from "./SidenavContext.js";
 const Subcomponents = {
   Item: NavDropdownItem,
   Menu: NavDropdownMenu
@@ -101,11 +101,10 @@ const SidenavDropdown = forwardRef((props, ref) => {
   }
   const renderMenuButton = (menuButtonProps, buttonRef) => /*#__PURE__*/React.createElement(MenuItem, {
     disabled: disabled
-  }, (_ref, menuitemRef) => {
-    let {
-      active,
-      ...menuitemProps
-    } = _ref;
+  }, ({
+    active,
+    ...menuitemProps
+  }, menuitemRef) => {
     return /*#__PURE__*/React.createElement(SidenavDropdownToggle, _extends({
       ref: mergeRefs(buttonRef, menuitemRef),
       as: toggleAs,
@@ -118,11 +117,10 @@ const SidenavDropdown = forwardRef((props, ref) => {
     menuButtonText: title,
     renderMenuButton: renderMenuButton,
     openMenuOn: menuButtonTriggers,
-    renderMenuPopup: (_ref2, popupRef) => {
-      let {
-        open,
-        ...popupProps
-      } = _ref2;
+    renderMenuPopup: ({
+      open,
+      ...popupProps
+    }, popupRef) => {
       const menuClassName = mergeMenuClassName(className, withMenuClassPrefix({}));
       // When inside a collapsed <Sidenav>, render a header in menu
       const showHeader = !!sidenav;
@@ -144,11 +142,10 @@ const SidenavDropdown = forwardRef((props, ref) => {
         onClose === null || onClose === void 0 || onClose();
       }
     }
-  }, (_ref3, menuContainerRef) => {
-    let {
-      open,
-      ...menuContainer
-    } = _ref3;
+  }, ({
+    open,
+    ...menuContainer
+  }, menuContainerRef) => {
     const classes = merge(className, withPrefix({
       disabled,
       open,

package/esm/Sidenav/SidenavDropdownItem.js

@@ -7,7 +7,7 @@ import isNil from 'lodash/isNil';
 import NavContext from "../Nav/NavContext.js";
 import ExpandedSidenavDropdownItem from "./ExpandedSidenavDropdownItem.js";
 import { forwardRef, mergeRefs, shallowEqual } from "../internals/utils/index.js";
-import { SidenavContext } from "./Sidenav.js";
+import { SidenavContext } from "./SidenavContext.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useRenderMenuItem } from "../internals/Menu/useRenderMenuItem.js";
 /**
@@ -79,12 +79,11 @@ const SidenavDropdownItem = forwardRef((props, ref) => {
     selected: selected,
     disabled: disabled,
     onActivate: handleSelectItem
-  }, (_ref, menuitemRef) => {
-    let {
-      selected,
-      active,
-      ...menuitem
-    } = _ref;
+  }, ({
+    selected,
+    active,
+    ...menuitem
+  }, menuitemRef) => {
     const classes = merge(className, withPrefix({
       'with-icon': icon,
       active: selected,

package/esm/Sidenav/SidenavDropdownMenu.js

@@ -10,7 +10,7 @@ import NavContext from "../Nav/NavContext.js";
 import ExpandedSidenavDropdownMenu from "./ExpandedSidenavDropdownMenu.js";
 import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { mergeRefs } from "../internals/utils/index.js";
-import { SidenavContext } from "./Sidenav.js";
+import { SidenavContext } from "./SidenavContext.js";
 /**
  * @private this component is not supposed to be used directly
  *          Instead it's rendered by a <Nav.Menu> within a <Sidenav>
@@ -72,43 +72,38 @@ const SidenavDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
   const Icon = rtl ? ArrowLeftLine : ArrowRightLine;
   return /*#__PURE__*/React.createElement(Menu, {
     openMenuOn: ['mouseover', 'click'],
-    renderMenuButton: (_ref, buttonRef) => {
-      let {
-        open,
-        ...menuButtonProps
-      } = _ref;
-      return /*#__PURE__*/React.createElement(MenuItem, {
-        disabled: disabled
-      }, (_ref2, menuitemRef) => {
-        let {
-          selected,
-          active,
-          ...menuitem
-        } = _ref2;
-        const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix({
-          'with-icon': icon,
-          open,
-          active: selected,
-          disabled,
-          focus: active
-        }));
-        return /*#__PURE__*/React.createElement("div", _extends({
-          ref: mergeRefs(buttonRef, menuitemRef),
-          className: classes,
-          "data-event-key": eventKey,
-          "data-event-key-type": typeof eventKey
-        }, menuitem, omit(menuButtonProps, ['role'])), icon && /*#__PURE__*/React.cloneElement(icon, {
-          className: prefix('menu-icon')
-        }), title, /*#__PURE__*/React.createElement(Icon, {
-          className: prefix`toggle-icon`
-        }));
-      });
-    },
-    renderMenuPopup: (_ref3, popupRef) => {
-      let {
+    renderMenuButton: ({
+      open,
+      ...menuButtonProps
+    }, buttonRef) => /*#__PURE__*/React.createElement(MenuItem, {
+      disabled: disabled
+    }, ({
+      selected,
+      active,
+      ...menuitem
+    }, menuitemRef) => {
+      const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix({
+        'with-icon': icon,
         open,
-        ...popupProps
-      } = _ref3;
+        active: selected,
+        disabled,
+        focus: active
+      }));
+      return /*#__PURE__*/React.createElement("div", _extends({
+        ref: mergeRefs(buttonRef, menuitemRef),
+        className: classes,
+        "data-event-key": eventKey,
+        "data-event-key-type": typeof eventKey
+      }, menuitem, omit(menuButtonProps, ['role'])), icon && /*#__PURE__*/React.cloneElement(icon, {
+        className: prefix('menu-icon')
+      }), title, /*#__PURE__*/React.createElement(Icon, {
+        className: prefix`toggle-icon`
+      }));
+    }),
+    renderMenuPopup: ({
+      open,
+      ...popupProps
+    }, popupRef) => {
       const menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
       return /*#__PURE__*/React.createElement("ul", _extends({
         ref: popupRef,
@@ -117,11 +112,10 @@ const SidenavDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
       }, popupProps, menuProps), children);
     },
     onToggleMenu: handleToggleSubmenu
-  }, (_ref4, menuContainerRef) => {
-    let {
-      open,
-      ...menuContainer
-    } = _ref4;
+  }, ({
+    open,
+    ...menuContainer
+  }, menuContainerRef) => {
     const classes = mergeItemClassNames(className, withItemClassPrefix({
       disabled,
       open,

package/esm/Sidenav/SidenavItem.js

@@ -12,7 +12,7 @@ import Tooltip from "../Tooltip/index.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef, shallowEqual, mergeRefs, createChainedFunction } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
-import { SidenavContext } from "./Sidenav.js";
+import { SidenavContext } from "./SidenavContext.js";
 
 /**
  * Props of SidenavItem component
@@ -81,12 +81,11 @@ const SidenavItem = forwardRef((props, ref) => {
       selected: selected,
       disabled: disabled,
       onActivate: handleClick
-    }, (_ref, menuitemRef) => {
-      let {
-        selected,
-        active,
-        ...menuitem
-      } = _ref;
+    }, ({
+      selected,
+      active,
+      ...menuitem
+    }, menuitemRef) => {
       const classes = merge(className, withPrefix({
         focus: active,
         active: selected,

package/esm/Sidenav/SidenavToggle.js

@@ -4,7 +4,7 @@ import React, { useContext } from 'react';
 import ArrowLeftLineIcon from '@rsuite/icons/ArrowLeftLine';
 import IconButton from "../IconButton/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { SidenavContext } from "./Sidenav.js";
+import { SidenavContext } from "./SidenavContext.js";
 import { useStyles, useEventCallback } from "../internals/hooks/index.js";
 const SidenavToggle = forwardRef((props, ref) => {
   const sidenav = useContext(SidenavContext);

package/esm/Slider/ProgressBar.d.ts

@@ -1,7 +1,6 @@
 import { BoxProps } from '../internals/Box';
 interface ProgressBarProps extends BoxProps {
     vertical?: boolean;
-    rtl?: boolean;
     start?: number;
     end?: number;
 }

package/esm/Slider/ProgressBar.js

@@ -9,7 +9,6 @@ const ProgressBar = forwardRef((props, ref) => {
     as,
     classPrefix = 'slider-progress-bar',
     vertical,
-    rtl,
     end = 0,
     start = 0,
     style,
@@ -21,8 +20,7 @@ const ProgressBar = forwardRef((props, ref) => {
     withPrefix
   } = useStyles(classPrefix);
   const sizeKey = vertical ? 'height' : 'width';
-  const dirKey = rtl ? 'right' : 'left';
-  const startKey = vertical ? 'bottom' : dirKey;
+  const startKey = vertical ? 'bottom' : 'insetInlineStart';
   const styles = mergeStyles(style, {
     [startKey]: `${start}%`,
     [sizeKey]: `${end - start}%`

package/esm/Slider/Slider.js

@@ -110,9 +110,19 @@ const Slider = forwardRef((props, ref) => {
       pageX,
       pageY
     } = getPosition(event);
-    const offset = vertical ? barOffset.top + barOffset.height - pageY : pageX - barOffset.left;
-    const offsetValue = rtl && !vertical ? barOffset.width - offset : offset;
-    return getValueByOffset(offsetValue) + min;
+    let offset;
+    if (vertical) {
+      // For vertical sliders, top is 0% and bottom is 100% in both LTR and RTL
+      offset = barOffset.top + barOffset.height - pageY;
+    } else {
+      // For horizontal sliders, handle RTL direction
+      offset = pageX - barOffset.left;
+      if (rtl) {
+        // In RTL, invert the offset so that dragging right decreases the value
+        offset = barOffset.width - offset;
+      }
+    }
+    return getValueByOffset(offset) + min;
   }, [getValueByOffset, min, rtl, vertical]);
 
   /**
@@ -188,7 +198,6 @@ const Slider = forwardRef((props, ref) => {
     onClick: handleClickBar,
     "data-testid": "slider-bar"
   }, progress && /*#__PURE__*/React.createElement(ProgressBar, {
-    rtl: rtl,
     vertical: vertical,
     start: 0,
     end: (value - min) / (max - min) * 100

package/esm/Stack/Stack.js

@@ -41,8 +41,10 @@ const Stack = forwardRef((props, ref) => {
     cssVar,
     responsive
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(), ...responsive(direction));
-  const styles = mergeStyles(style, cssVar('spacing', spacing, getCssValue), cssVar('align', align), cssVar('justify', justify), cssVar('wrap', wrap ? 'wrap' : undefined));
+  const classes = merge(className, withPrefix({
+    wrap
+  }), ...responsive(direction));
+  const styles = mergeStyles(style, cssVar('spacing', spacing, getCssValue), cssVar('align', align), cssVar('justify', justify));
   const filteredChildren = React.Children.toArray(children);
   const childCount = filteredChildren.length;
   return /*#__PURE__*/React.createElement(Box, _extends({

package/esm/Stack/VStack.js

@@ -12,9 +12,7 @@ const VStack = forwardRef((props, ref) => {
     ...rest
   } = props;
   const direction = reverse ? 'column-reverse' : 'column';
-  return /*#__PURE__*/React.createElement(Stack, _extends({
-    align: "flex-start"
-  }, rest, {
+  return /*#__PURE__*/React.createElement(Stack, _extends({}, rest, {
     direction: direction,
     ref: ref
   }));

package/esm/Tree/TreeView.js

@@ -217,12 +217,11 @@ const TreeView = forwardRef((props, ref) => {
       key: node[valueKey]
     }, nodeProps));
   };
-  const renderVirtualListNode = _ref => {
-    let {
-      index,
-      style,
-      data
-    } = _ref;
+  const renderVirtualListNode = ({
+    index,
+    style,
+    data
+  }) => {
     const node = data[index];
     const {
       layer,
@@ -276,20 +275,17 @@ const TreeView = forwardRef((props, ref) => {
       height: 'auto'
     },
     className: prefix('virt-auto-sizer')
-  }, _ref2 => {
-    let {
-      height
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(List, _extends({
-      ref: listRef,
-      height: height,
-      itemSize: defaultItemSize,
-      itemCount: formattedNodes.length,
-      itemData: formattedNodes,
-      className: prefix('virt-list'),
-      scrollShadow: scrollShadow
-    }, listProps), renderVirtualListNode);
-  }) : formattedNodes));
+  }, ({
+    height
+  }) => /*#__PURE__*/React.createElement(List, _extends({
+    ref: listRef,
+    height: height,
+    itemSize: defaultItemSize,
+    itemCount: formattedNodes.length,
+    itemData: formattedNodes,
+    className: prefix('virt-list'),
+    scrollShadow: scrollShadow
+  }, listProps), renderVirtualListNode)) : formattedNodes));
 });
 TreeView.displayName = 'TreeView';
 export default TreeView;