rsuite 5.2.2 → 5.4.0

package/cjs/Sidenav/SidenavItem.d.ts

@@ -11,7 +11,7 @@ export interface SidenavItemProps<T = any> extends WithAsProps, Omit<React.HTMLA
     /** The value of the current option */
     eventKey?: T;
     /** Selected callback function */
-    onSelect?: (eventKey: T, event: React.MouseEvent<HTMLElement>) => void;
+    onSelect?: (eventKey: T, event: React.MouseEvent) => void;
     divider?: boolean;
     panel?: boolean;
 }

package/cjs/Sidenav/SidenavItem.js

@@ -50,6 +50,10 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "children", "className", "disabled", "classPrefix", "icon", "eventKey", "style", "onClick", "onSelect", "divider", "panel"]);
   var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
 
+  if (!sidenav) {
+    throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');
+  }
+
   var _useContext = (0, _react.useContext)(_NavContext.default),
       activeKey = _useContext.activeKey,
       onSelectFromNav = _useContext.onSelect;

package/cjs/Slider/Graduated.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface GraduatedProps extends WithAsProps {
-    step?: number;
-    min?: number;
-    max?: number;
-    count?: number;
-    value?: number | number[];
+    step: number;
+    min: number;
+    max: number;
+    count: number;
+    value: number | number[];
     renderMark?: (mark: number) => React.ReactNode;
 }
 declare const Graduated: RsRefForwardingComponent<'div', GraduatedProps>;

package/cjs/Slider/Handle.d.ts

@@ -7,7 +7,7 @@ export interface HandleProps extends WithAsProps, React.HTMLAttributes<HTMLDivEl
     rtl?: boolean;
     position?: number;
     value?: number;
-    renderTooltip?: (value: number) => React.ReactNode;
+    renderTooltip?: (value: number | undefined) => React.ReactNode;
     onDragMove?: (event: React.DragEvent, dataset?: DOMStringMap) => void;
     onDragStart?: (event: React.MouseEvent) => void;
     onDragEnd?: (event: React.MouseEvent, dataset?: DOMStringMap) => void;

package/cjs/Slider/Handle.js

@@ -58,7 +58,7 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       active = _useState[0],
       setActive = _useState[1];
 
-  var rootRef = (0, _react.useRef)();
+  var rootRef = (0, _react.useRef)(null);
   var horizontalKey = rtl ? 'right' : 'left';
   var direction = vertical ? 'bottom' : horizontalKey;
   var styles = (0, _extends3.default)({}, style, (_extends2 = {}, _extends2[direction] = position + "%", _extends2));
@@ -70,7 +70,7 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleClasses = merge(className, prefix('handle'), {
     active: active
   });
-  var tooltipRef = (0, _react.useRef)();
+  var tooltipRef = (0, _react.useRef)(null);
   var mouseMoveTracker = (0, _react.useRef)();
   var releaseMouseMoves = (0, _react.useCallback)(function () {
     var _mouseMoveTracker$cur;
@@ -90,20 +90,24 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var _mouseMoveTracker$cur2;
 
     if ((_mouseMoveTracker$cur2 = mouseMoveTracker.current) !== null && _mouseMoveTracker$cur2 !== void 0 && _mouseMoveTracker$cur2.isDragging()) {
-      onDragMove === null || onDragMove === void 0 ? void 0 : onDragMove(event, rootRef.current.dataset);
+      var _rootRef$current;
+
+      onDragMove === null || onDragMove === void 0 ? void 0 : onDragMove(event, (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.dataset);
       setTooltipPosition();
     }
   }, [onDragMove, setTooltipPosition]);
   var handleDragEnd = (0, _react.useCallback)(function (event) {
+    var _rootRef$current2;
+
     setActive(false);
     releaseMouseMoves();
-    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, rootRef.current.dataset);
+    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.dataset);
   }, [onDragEnd, releaseMouseMoves]);
   var getMouseMoveTracker = (0, _react.useCallback)(function () {
     return mouseMoveTracker.current || new _DOMMouseMoveTracker.default(handleDragMove, handleDragEnd, document.body);
   }, [handleDragEnd, handleDragMove]);
   var handleMouseDown = (0, _react.useCallback)(function (event) {
-    var _mouseMoveTracker$cur3, _rootRef$current;
+    var _mouseMoveTracker$cur3, _rootRef$current3;
 
     if (disabled) {
       return;
@@ -111,7 +115,7 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     mouseMoveTracker.current = getMouseMoveTracker();
     (_mouseMoveTracker$cur3 = mouseMoveTracker.current) === null || _mouseMoveTracker$cur3 === void 0 ? void 0 : _mouseMoveTracker$cur3.captureMouseMoves(event);
-    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.focus();
+    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.focus();
     setActive(true);
     onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
   }, [disabled, getMouseMoveTracker, onDragStart]);

package/cjs/Slider/Mark.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface MarkProps extends WithAsProps {
-    mark?: number;
+    mark: number;
     last?: boolean;
     renderMark?: (mark: number) => React.ReactNode;
 }

package/cjs/Slider/Slider.d.ts

@@ -45,7 +45,7 @@ export interface SliderProps<T = number> extends WithAsProps, FormControlBasePro
     /** Customize labels on the render ruler */
     renderMark?: (mark: number) => React.ReactNode;
     /** Customize the content of the rendered Tooltip. */
-    renderTooltip?: (value: number) => React.ReactNode;
+    renderTooltip?: (value: number | undefined) => React.ReactNode;
     /** Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. */
     getAriaValueText?: (value: number, eventKey?: 'start' | 'end') => string;
     /** Callback function that is fired when the mouseup is triggered. */

package/cjs/Slider/Slider.js

@@ -96,7 +96,7 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onChange = props.onChange,
       onChangeCommitted = props.onChangeCommitted,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "graduated", "className", "barClassName", "progress", "vertical", "disabled", "readOnly", "plaintext", "classPrefix", "min", "handleClassName", "handleStyle", "handleTitle", "tooltip", "step", "defaultValue", "value", "max", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
-  var barRef = (0, _react.useRef)();
+  var barRef = (0, _react.useRef)(null);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -265,7 +265,7 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onDragMove: handleChangeValue,
     onKeyDown: handleKeyDown,
     onDragEnd: handleChangeCommitted,
-    tabIndex: disabled || readOnly ? null : 0,
+    tabIndex: disabled || readOnly ? undefined : 0,
     "aria-orientation": vertical ? 'vertical' : 'horizontal',
     "aria-valuenow": value,
     "aria-disabled": disabled,

package/cjs/Slider/utils.d.ts

@@ -1,2 +1,3 @@
 export declare const precisionMath: (value: any) => number;
-export declare const checkValue: (value: number, min: number, max: number) => number;
+declare function checkValue<T extends number | undefined>(value: T, min: number, max: number): T extends undefined ? undefined : number;
+export { checkValue };

package/cjs/Slider/utils.js

@@ -1,7 +1,8 @@
 "use strict";
 
 exports.__esModule = true;
-exports.checkValue = exports.precisionMath = void 0;
+exports.checkValue = checkValue;
+exports.precisionMath = void 0;
 
 var precisionMath = function precisionMath(value) {
   return parseFloat(value.toFixed(10));
@@ -9,7 +10,7 @@ var precisionMath = function precisionMath(value) {
 
 exports.precisionMath = precisionMath;
 
-var checkValue = function checkValue(value, min, max) {
+function checkValue(value, min, max) {
   if (typeof value === 'undefined') {
     return value;
   }
@@ -23,6 +24,4 @@ var checkValue = function checkValue(value, min, max) {
   }
 
   return value;
-};
-
-exports.checkValue = checkValue;
+}

package/cjs/Stack/Stack.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { WithAsProps } from '../@types/common';
+export interface StackProps extends WithAsProps {
+    /**
+     * The direction of the children in the stack.
+     */
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    /**
+     * Define the alignment of the children in the stack on the cross axis
+     */
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    /**
+     *  Define the alignment of the children in the stack on the inline axis
+     */
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+    /** Define the spacing between immediate children */
+    spacing?: number | string | (number | string)[];
+    /** Add an element between each child */
+    divider?: React.ReactNode;
+    /**
+     * Define whether the children in the stack are forced onto one line or can wrap onto multiple lines
+     */
+    wrap?: boolean;
+}
+declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+export default Stack;

package/cjs/Stack/Stack.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("../utils");
+
+var Stack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _itemStyles;
+
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      _props$alignItems = props.alignItems,
+      alignItems = _props$alignItems === void 0 ? 'center' : _props$alignItems,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'stack' : _props$classPrefix,
+      className = props.className,
+      children = props.children,
+      direction = props.direction,
+      justifyContent = props.justifyContent,
+      spacing = props.spacing,
+      divider = props.divider,
+      style = props.style,
+      wrap = props.wrap,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "alignItems", "classPrefix", "className", "children", "direction", "justifyContent", "spacing", "divider", "style", "wrap"]);
+
+  var _useCustom = (0, _utils.useCustom)('Stack'),
+      rtl = _useCustom.rtl;
+
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix,
+      merge = _useClassNames.merge,
+      prefix = _useClassNames.prefix;
+
+  var classes = merge(className, withClassPrefix());
+  var isSupportGridGap = !(0, _utils.isIE)();
+
+  var count = _react.default.Children.count(children);
+
+  var gridGap = Array.isArray(spacing) ? spacing : [spacing, 0];
+  var itemStyles = (_itemStyles = {}, _itemStyles[rtl ? 'marginLeft' : 'marginRight'] = gridGap[0], _itemStyles.marginBottom = gridGap[1], _itemStyles);
+  var styles = (0, _extends2.default)({
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    flexDirection: direction,
+    flexWrap: wrap ? 'wrap' : undefined,
+    gap: isSupportGridGap ? spacing : undefined
+  }, style);
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    ref: ref,
+    className: classes,
+    style: styles
+  }), _react.default.Children.map(children, function (child, index) {
+    var childNode = /*#__PURE__*/_react.default.createElement("div", {
+      className: prefix('item'),
+      style: !isSupportGridGap ? itemStyles : undefined
+    }, child);
+
+    return [childNode, index < count - 1 ? divider : null];
+  }));
+});
+
+Stack.displayName = 'Stack';
+Stack.propTypes = {
+  className: _propTypes.default.string,
+  children: _propTypes.default.node,
+  classPrefix: _propTypes.default.string,
+  direction: _propTypes.default.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
+  alignItems: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),
+  justifyContent: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),
+  spacing: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array]),
+  divider: _propTypes.default.node,
+  wrap: _propTypes.default.bool
+};
+var _default = Stack;
+exports.default = _default;

package/cjs/Stack/index.d.ts

@@ -0,0 +1,3 @@
+import Stack from './Stack';
+export type { StackProps } from './Stack';
+export default Stack;

package/cjs/Stack/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _Stack = _interopRequireDefault(require("./Stack"));
+
+var _default = _Stack.default;
+exports.default = _default;

package/cjs/Steps/StepItem.js

@@ -57,7 +57,7 @@ var StepItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var iconNode = /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('icon', "icon-" + status)
-  }, (_STEP_STATUS_ICON$sta = STEP_STATUS_ICON[status]) !== null && _STEP_STATUS_ICON$sta !== void 0 ? _STEP_STATUS_ICON$sta : stepNumber);
+  }, 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", {

package/cjs/TagInput/index.js

@@ -45,7 +45,7 @@ var TagInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     value: value,
     defaultValue: defaultValue,
     data: data,
-    placement: null,
+    placement: undefined,
     creatable: true,
     ref: ref
   })));

package/cjs/Toggle/Toggle.js

@@ -40,7 +40,7 @@ var Toggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       localeProp = props.locale,
       onChange = props.onChange,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "readOnly", "loading", "plaintext", "className", "checkedChildren", "unCheckedChildren", "classPrefix", "checked", "defaultChecked", "size", "locale", "onChange"]);
-  var inputRef = (0, _react.useRef)();
+  var inputRef = (0, _react.useRef)(null);
 
   var _useControlled = (0, _utils.useControlled)(checkedProp, defaultChecked),
       checked = _useControlled[0],
@@ -62,14 +62,14 @@ var Toggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var inner = checked ? checkedChildren : unCheckedChildren;
   var label = checked ? locale.on : locale.off;
   var handleInputChange = (0, _react.useCallback)(function (e) {
-    if (disabled || readOnly) {
+    if (disabled || readOnly || loading) {
       return;
     }
 
     var checked = e.target.checked;
     setChecked(checked);
     onChange === null || onChange === void 0 ? void 0 : onChange(checked, e);
-  }, [disabled, readOnly, setChecked, onChange]);
+  }, [disabled, readOnly, loading, setChecked, onChange]);
 
   if (plaintext) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, null, inner || label);

package/cjs/Tree/Tree.d.ts

@@ -36,13 +36,14 @@ export interface TreeDragProps<ItemDataType = Record<string, any>> {
     onDragEnd?: (nodeData: ItemDataType, e: React.DragEvent) => void;
     /** Called when node drop */
     onDrop?: (dropData: DropData<ItemDataType>, e: React.DragEvent) => void;
-    renderDragNode?: (dragNode: ItemDataType) => React.ReactNode;
 }
 export interface TreeBaseProps<ValueType = string | number, ItemDataType = Record<string, any>> extends StandardProps {
     /** The height of Dropdown */
     height?: number;
     /** Whether display search input box */
     searchable?: boolean;
+    /** Display an auxiliary line when the tree node is indented. */
+    showIndentLine?: boolean;
     /** Whether using virtualized list */
     virtualized?: boolean;
     /**
@@ -59,7 +60,7 @@ export interface TreeBaseProps<ValueType = string | number, ItemDataType = Recor
     /** Set the option value for the expand node with controlled*/
     expandItemValues?: any[];
     /** Callback function for data change */
-    onExpand?: (expandItemValues: ItemDataType[], activeNode: ItemDataType, concat: (data: ItemDataType[], children: React.ReactNode) => ItemDataType[]) => void;
+    onExpand?: (expandItemValues: ItemDataType[], activeNode: ItemDataType, concat: (data: ItemDataType[], children: ItemDataType[]) => ItemDataType[]) => void;
     /** Callback function after selecting tree node */
     onSelect?: (activeNode: ItemDataType, value: ValueType, event: React.SyntheticEvent) => void;
     /** Custom Render tree Node */

package/cjs/Tree/Tree.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -9,7 +7,7 @@ exports.default = exports.TREE_NODE_DROP_POSITION = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _TreePicker = _interopRequireDefault(require("../TreePicker"));
 
@@ -28,11 +26,9 @@ exports.TREE_NODE_DROP_POSITION = TREE_NODE_DROP_POSITION;
 })(TREE_NODE_DROP_POSITION || (exports.TREE_NODE_DROP_POSITION = TREE_NODE_DROP_POSITION = {}));
 
 var Tree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var dragNodeRef = (0, _react.useRef)();
   return /*#__PURE__*/_react.default.createElement(_TreeContext.default.Provider, {
     value: {
-      inline: true,
-      dragNodeRef: dragNodeRef
+      inline: true
     }
   }, /*#__PURE__*/_react.default.createElement(_TreePicker.default, (0, _extends2.default)({
     ref: ref

package/cjs/Tree/TreeContext.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 export interface TreeContextProps {
     inline?: boolean;
-    dragNodeRef?: React.MutableRefObject<any>;
 }
 declare const TreeContext: React.Context<TreeContextProps>;
 export default TreeContext;

package/cjs/TreePicker/TreeNode.js

@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 
-var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -21,15 +21,13 @@ var _ArrowDown = _interopRequireDefault(require("@rsuite/icons/legacy/ArrowDown"
 
 var _Spinner = _interopRequireDefault(require("@rsuite/icons/legacy/Spinner"));
 
-var _TreeContext = _interopRequireDefault(require("../Tree/TreeContext"));
-
 var _reactToString = _interopRequireDefault(require("../utils/reactToString"));
 
 var _utils = require("../utils");
 
-var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _extends2;
+var _treeUtils = require("../utils/treeUtils");
 
+var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$as = _ref.as,
       Component = _ref$as === void 0 ? 'div' : _ref$as,
       rtl = _ref.rtl,
@@ -70,9 +68,6 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       merge = _useClassNames.merge,
       withClassPrefix = _useClassNames.withClassPrefix;
 
-  var _useContext = (0, _react.useContext)(_TreeContext.default),
-      dragNodeRef = _useContext.dragNodeRef;
-
   var getTitle = (0, _react.useCallback)(function () {
     if (typeof label === 'string') {
       return label;
@@ -102,16 +97,8 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, event);
   }, [nodeData, disabled, prefix, onSelect]);
   var handleDragStart = (0, _react.useCallback)(function (event) {
-    var dragNode = dragNodeRef === null || dragNodeRef === void 0 ? void 0 : dragNodeRef.current;
-
-    if (dragNode) {
-      var _event$dataTransfer;
-
-      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragNode, 0, 0);
-    }
-
     onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
-  }, [dragNodeRef, nodeData, onDragStart]);
+  }, [nodeData, onDragStart]);
   var handleDragEnter = (0, _react.useCallback)(function (event) {
     event.preventDefault();
     event.stopPropagation();
@@ -194,11 +181,9 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     active: active,
     'text-muted': disabled,
     focus: focus
-  })); // layer start from 1
-
-  var padding = (layer - 1) * _utils.TREE_NODE_PADDING + _utils.TREE_NODE_ROOT_PADDING;
-  var styles = (0, _extends3.default)({}, style, (_extends2 = {}, _extends2[rtl ? 'paddingRight' : 'paddingLeft'] = padding, _extends2));
-  return visible ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({
+  }));
+  var styles = (0, _extends2.default)({}, style, (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1));
+  return visible ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "treeitem"
   }, rest, {
     "aria-expanded": expand,