@mui/x-tree-view 7.22.1 → 8.0.0-alpha.1

package/node/{useTreeItem2/useTreeItem2.js → useTreeItem/useTreeItem.js}

@@ -1,27 +1,30 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTreeItem2 = void 0;
+exports.useTreeItem = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _extractEventHandlers = _interopRequireDefault(require("@mui/utils/extractEventHandlers"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _TreeViewProvider = require("../internals/TreeViewProvider");
-var _useTreeItem2Utils = require("../hooks/useTreeItem2Utils");
+var _useTreeItemUtils = require("../hooks/useTreeItemUtils");
 var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
 var _tree = require("../internals/utils/tree");
+var _useSelector = require("../internals/hooks/useSelector");
+var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors");
 var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeViewId.utils");
-const useTreeItem2 = parameters => {
+var _useTreeViewItems = require("../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
+var _useTreeViewId2 = require("../internals/corePlugins/useTreeViewId/useTreeViewId.selectors");
+const useTreeItem = parameters => {
   const {
     runItemPlugins,
     items: {
-      onItemClick,
-      disabledItemsFocusable,
-      indentationAtItemLevel
+      onItemClick
     },
     selection: {
       disableSelection,
@@ -30,11 +33,18 @@ const useTreeItem2 = parameters => {
     expansion: {
       expansionTrigger
     },
-    treeId,
+    label: labelContext,
     instance,
-    publicAPI
+    publicAPI,
+    store
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
+  const depth = (0, _useSelector.useSelector)(store, (...params) => {
+    if (typeof depthContext === 'function') {
+      return depthContext(...params);
+    }
+    return depthContext;
+  }, parameters.itemId);
   const {
     id,
     itemId,
@@ -50,7 +60,7 @@ const useTreeItem2 = parameters => {
   const {
     interactions,
     status
-  } = (0, _useTreeItem2Utils.useTreeItem2Utils)({
+  } = (0, _useTreeItemUtils.useTreeItemUtils)({
     itemId,
     children
   });
@@ -59,24 +69,25 @@ const useTreeItem2 = parameters => {
   const handleRootRef = (0, _useForkRef.default)(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = (0, _useForkRef.default)(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
+  const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId2.selectorTreeViewId);
   const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
     itemId,
     treeId,
     id
   });
-  const rootTabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
+  const shouldBeAccessibleWithTab = (0, _useSelector.useSelector)(store, _useTreeViewFocus.selectorIsItemTheDefaultFocusableItem, itemId);
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
-    interactions
+    interactions,
+    status
   };
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
     if (event.defaultMuiPrevented) {
       return;
     }
-    const canBeFocused = !status.disabled || disabledItemsFocusable;
-    if (!status.focused && canBeFocused && event.currentTarget === event.target) {
+    if (!status.focused && (0, _useTreeViewItems.selectorCanItemBeFocused)(store.value, itemId) && event.currentTarget === event.target) {
       instance.focusItem(event, itemId);
     }
   };
@@ -114,7 +125,7 @@ const useTreeItem2 = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
-    onItemClick?.(event, itemId);
+    onItemClick(event, itemId);
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
@@ -136,16 +147,6 @@ const useTreeItem2 = parameters => {
       event.preventDefault();
     }
   };
-  const createCheckboxHandleChange = otherHandlers => event => {
-    otherHandlers.onChange?.(event);
-    if (event.defaultMuiPrevented) {
-      return;
-    }
-    if (disableSelection || status.disabled) {
-      return;
-    }
-    interactions.handleCheckboxSelection(event);
-  };
   const createIconContainerHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
     if (event.defaultMuiPrevented) {
@@ -155,6 +156,10 @@ const useTreeItem2 = parameters => {
       interactions.handleExpansion(event);
     }
   };
+  const getContextProviderProps = () => ({
+    itemId,
+    id
+  });
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(parameters), (0, _extractEventHandlers.default)(externalProps));
 
@@ -173,21 +178,19 @@ const useTreeItem2 = parameters => {
     const props = (0, _extends2.default)({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
-      tabIndex: rootTabIndex,
+      tabIndex: shouldBeAccessibleWithTab ? 0 : -1,
       id: idAttribute,
       'aria-expanded': status.expandable ? status.expanded : undefined,
       'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
+      style: (0, _extends2.default)({}, externalProps.style ?? {}, {
+        '--TreeView-itemDepth': depth
+      }),
       onFocus: createRootHandleFocus(externalEventHandlers),
       onBlur: createRootHandleBlur(externalEventHandlers),
       onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
-    if (indentationAtItemLevel) {
-      props.style = {
-        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
-      };
-    }
     const enhancedRootProps = propsEnhancers.root?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
@@ -201,9 +204,6 @@ const useTreeItem2 = parameters => {
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
-    if (indentationAtItemLevel) {
-      props.indentationAtItemLevel = true;
-    }
     const enhancedContentProps = propsEnhancers.content?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
@@ -211,15 +211,13 @@ const useTreeItem2 = parameters => {
   };
   const getCheckboxProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
-    return (0, _extends2.default)({}, externalEventHandlers, {
-      visible: checkboxSelection,
-      ref: checkboxRef,
-      checked: status.selected,
-      disabled: disableSelection || status.disabled,
-      tabIndex: -1
-    }, externalProps, {
-      onChange: createCheckboxHandleChange(externalEventHandlers)
-    });
+    const props = (0, _extends2.default)({}, externalEventHandlers, {
+      ref: checkboxRef
+    }, externalProps);
+    const enhancedCheckboxProps = propsEnhancers.checkbox?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
+    return (0, _extends2.default)({}, props, enhancedCheckboxProps);
   };
   const getLabelProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(externalProps));
@@ -228,19 +226,16 @@ const useTreeItem2 = parameters => {
     }, externalProps, {
       onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
     });
-    if (instance.isTreeViewEditable) {
+    if (labelContext?.isItemEditable) {
       props.editable = status.editable;
     }
     return props;
   };
   const getLabelInputProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
-    const enhancedLabelInputProps = propsEnhancers.labelInput?.({
-      rootRefObject,
-      contentRefObject,
-      externalEventHandlers,
-      interactions
-    }) ?? {};
+    const enhancedLabelInputProps = propsEnhancers.labelInput?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
     return (0, _extends2.default)({}, externalProps, enhancedLabelInputProps);
   };
   const getIconContainerProps = (externalProps = {}) => {
@@ -258,9 +253,6 @@ const useTreeItem2 = parameters => {
       in: status.expanded,
       children
     }, externalProps);
-    if (indentationAtItemLevel) {
-      response.indentationAtItemLevel = true;
-    }
     return response;
   };
   const getDragAndDropOverlayProps = (externalProps = {}) => {
@@ -271,6 +263,7 @@ const useTreeItem2 = parameters => {
     return (0, _extends2.default)({}, externalProps, enhancedDragAndDropOverlayProps);
   };
   return {
+    getContextProviderProps,
     getRootProps,
     getContentProps,
     getGroupTransitionProps,
@@ -284,4 +277,4 @@ const useTreeItem2 = parameters => {
     publicAPI
   };
 };
-exports.useTreeItem2 = useTreeItem2;
+exports.useTreeItem = useTreeItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.22.1",
+  "version": "8.0.0-alpha.1",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,21 +33,23 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.7",
+    "@babel/runtime": "^7.26.0",
     "@mui/utils": "^5.16.6 || ^6.0.0",
     "@types/react-transition-group": "^4.4.11",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "7.21.0"
+    "reselect": "^5.1.1",
+    "use-sync-external-store": "^1.2.2",
+    "@mui/x-internals": "8.0.0-alpha.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.15.14 || ^6.0.0",
     "@mui/system": "^5.15.14 || ^6.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@emotion/react": {

package/themeAugmentation/components.d.ts

@@ -11,21 +11,11 @@ export interface TreeViewComponents<Theme = unknown> {
     styleOverrides?: ComponentsOverrides<Theme>['MuiRichTreeView'];
     variants?: ComponentsVariants<Theme>['MuiRichTreeView'];
   };
-  MuiTreeView?: {
-    defaultProps?: ComponentsProps['MuiTreeView'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiTreeView'];
-    variants?: ComponentsVariants<Theme>['MuiTreeView'];
-  };
   MuiTreeItem?: {
     defaultProps?: ComponentsProps['MuiTreeItem'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTreeItem'];
     variants?: ComponentsVariants<Theme>['MuiTreeItem'];
   };
-  MuiTreeItem2?: {
-    defaultProps?: ComponentsProps['MuiTreeItem2'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiTreeItem2'];
-    variants?: ComponentsVariants<Theme>['MuiTreeItem2'];
-  };
 }
 
 declare module '@mui/material/styles' {

package/themeAugmentation/overrides.d.ts

@@ -1,15 +1,12 @@
 import { RichTreeViewClassKey } from '../RichTreeView';
 import { SimpleTreeViewClassKey } from '../SimpleTreeView';
-import { TreeViewClassKey } from '../TreeView';
 import { TreeItemClassKey } from '../TreeItem';
 
 // prettier-ignore
 export interface TreeViewComponentNameToClassKey {
   MuiSimpleTreeView: SimpleTreeViewClassKey;
   MuiRichTreeView: RichTreeViewClassKey;
-  MuiTreeView: TreeViewClassKey;
   MuiTreeItem: TreeItemClassKey;
-  MuiTreeItem2: TreeItemClassKey;
 }
 
 declare module '@mui/material/styles' {

package/themeAugmentation/props.d.ts

@@ -1,15 +1,11 @@
-import { TreeItemProps } from '../TreeItem';
-import { TreeViewProps } from '../TreeView';
 import { SimpleTreeViewProps } from '../SimpleTreeView';
 import { RichTreeViewProps } from '../RichTreeView';
-import { TreeItem2Props } from '../TreeItem2';
+import { TreeItemProps } from '../TreeItem';
 
 export interface TreeViewComponentsPropsList {
   MuiSimpleTreeView: SimpleTreeViewProps<any>;
   MuiRichTreeView: RichTreeViewProps<any, any>;
-  MuiTreeView: TreeViewProps<any>;
   MuiTreeItem: TreeItemProps;
-  MuiTreeItem2: TreeItem2Props;
 }
 
 declare module '@mui/material/styles' {

package/useTreeItem/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeItem } from './useTreeItem';
+export type { UseTreeItemParameters, UseTreeItemReturnValue, UseTreeItemStatus, UseTreeItemRootSlotOwnProps, UseTreeItemContentSlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemLabelSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemIconContainerSlotOwnProps, UseTreeItemGroupTransitionSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps, } from './useTreeItem.types';

package/useTreeItem/index.js

@@ -0,0 +1 @@
+export { useTreeItem } from "./useTreeItem.js";

package/{TreeItem2 → useTreeItem}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
   "module": "./index.js",
-  "main": "../node/TreeItem2/index.js",
+  "main": "../node/useTreeItem/index.js",
   "types": "./index.d.ts"
 }

package/useTreeItem/useTreeItem.d.ts

@@ -0,0 +1,2 @@
+import { UseTreeItemParameters, UseTreeItemReturnValue, UseTreeItemMinimalPlugins, UseTreeItemOptionalPlugins } from './useTreeItem.types';
+export declare const useTreeItem: <TSignatures extends UseTreeItemMinimalPlugins = UseTreeItemMinimalPlugins, TOptionalSignatures extends UseTreeItemOptionalPlugins = readonly []>(parameters: UseTreeItemParameters) => UseTreeItemReturnValue<TSignatures, TOptionalSignatures>;

package/{useTreeItem2/useTreeItem2.js → useTreeItem/useTreeItem.js}

@@ -1,19 +1,23 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import extractEventHandlers from '@mui/utils/extractEventHandlers';
 import useForkRef from '@mui/utils/useForkRef';
 import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
-import { useTreeItem2Utils } from "../hooks/useTreeItem2Utils/index.js";
+import { useTreeItemUtils } from "../hooks/useTreeItemUtils/index.js";
 import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.js";
 import { isTargetInDescendants } from "../internals/utils/tree.js";
+import { useSelector } from "../internals/hooks/useSelector.js";
+import { selectorIsItemTheDefaultFocusableItem } from "../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js";
 import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
-export const useTreeItem2 = parameters => {
+import { selectorCanItemBeFocused } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
+export const useTreeItem = parameters => {
   const {
     runItemPlugins,
     items: {
-      onItemClick,
-      disabledItemsFocusable,
-      indentationAtItemLevel
+      onItemClick
     },
     selection: {
       disableSelection,
@@ -22,11 +26,18 @@ export const useTreeItem2 = parameters => {
     expansion: {
       expansionTrigger
     },
-    treeId,
+    label: labelContext,
     instance,
-    publicAPI
+    publicAPI,
+    store
   } = useTreeViewContext();
   const depthContext = React.useContext(TreeViewItemDepthContext);
+  const depth = useSelector(store, (...params) => {
+    if (typeof depthContext === 'function') {
+      return depthContext(...params);
+    }
+    return depthContext;
+  }, parameters.itemId);
   const {
     id,
     itemId,
@@ -42,7 +53,7 @@ export const useTreeItem2 = parameters => {
   const {
     interactions,
     status
-  } = useTreeItem2Utils({
+  } = useTreeItemUtils({
     itemId,
     children
   });
@@ -51,24 +62,25 @@ export const useTreeItem2 = parameters => {
   const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
+  const treeId = useSelector(store, selectorTreeViewId);
   const idAttribute = generateTreeItemIdAttribute({
     itemId,
     treeId,
     id
   });
-  const rootTabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
+  const shouldBeAccessibleWithTab = useSelector(store, selectorIsItemTheDefaultFocusableItem, itemId);
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
-    interactions
+    interactions,
+    status
   };
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
     if (event.defaultMuiPrevented) {
       return;
     }
-    const canBeFocused = !status.disabled || disabledItemsFocusable;
-    if (!status.focused && canBeFocused && event.currentTarget === event.target) {
+    if (!status.focused && selectorCanItemBeFocused(store.value, itemId) && event.currentTarget === event.target) {
       instance.focusItem(event, itemId);
     }
   };
@@ -106,7 +118,7 @@ export const useTreeItem2 = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
-    onItemClick?.(event, itemId);
+    onItemClick(event, itemId);
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
@@ -128,16 +140,6 @@ export const useTreeItem2 = parameters => {
       event.preventDefault();
     }
   };
-  const createCheckboxHandleChange = otherHandlers => event => {
-    otherHandlers.onChange?.(event);
-    if (event.defaultMuiPrevented) {
-      return;
-    }
-    if (disableSelection || status.disabled) {
-      return;
-    }
-    interactions.handleCheckboxSelection(event);
-  };
   const createIconContainerHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
     if (event.defaultMuiPrevented) {
@@ -147,6 +149,10 @@ export const useTreeItem2 = parameters => {
       interactions.handleExpansion(event);
     }
   };
+  const getContextProviderProps = () => ({
+    itemId,
+    id
+  });
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
 
@@ -165,21 +171,19 @@ export const useTreeItem2 = parameters => {
     const props = _extends({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
-      tabIndex: rootTabIndex,
+      tabIndex: shouldBeAccessibleWithTab ? 0 : -1,
       id: idAttribute,
       'aria-expanded': status.expandable ? status.expanded : undefined,
       'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
+      style: _extends({}, externalProps.style ?? {}, {
+        '--TreeView-itemDepth': depth
+      }),
       onFocus: createRootHandleFocus(externalEventHandlers),
       onBlur: createRootHandleBlur(externalEventHandlers),
       onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
-    if (indentationAtItemLevel) {
-      props.style = {
-        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
-      };
-    }
     const enhancedRootProps = propsEnhancers.root?.(_extends({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
@@ -193,9 +197,6 @@ export const useTreeItem2 = parameters => {
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
-    if (indentationAtItemLevel) {
-      props.indentationAtItemLevel = true;
-    }
     const enhancedContentProps = propsEnhancers.content?.(_extends({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
@@ -203,15 +204,13 @@ export const useTreeItem2 = parameters => {
   };
   const getCheckboxProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    return _extends({}, externalEventHandlers, {
-      visible: checkboxSelection,
-      ref: checkboxRef,
-      checked: status.selected,
-      disabled: disableSelection || status.disabled,
-      tabIndex: -1
-    }, externalProps, {
-      onChange: createCheckboxHandleChange(externalEventHandlers)
-    });
+    const props = _extends({}, externalEventHandlers, {
+      ref: checkboxRef
+    }, externalProps);
+    const enhancedCheckboxProps = propsEnhancers.checkbox?.(_extends({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
+    return _extends({}, props, enhancedCheckboxProps);
   };
   const getLabelProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(externalProps));
@@ -220,19 +219,16 @@ export const useTreeItem2 = parameters => {
     }, externalProps, {
       onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
     });
-    if (instance.isTreeViewEditable) {
+    if (labelContext?.isItemEditable) {
       props.editable = status.editable;
     }
     return props;
   };
   const getLabelInputProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    const enhancedLabelInputProps = propsEnhancers.labelInput?.({
-      rootRefObject,
-      contentRefObject,
-      externalEventHandlers,
-      interactions
-    }) ?? {};
+    const enhancedLabelInputProps = propsEnhancers.labelInput?.(_extends({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
     return _extends({}, externalProps, enhancedLabelInputProps);
   };
   const getIconContainerProps = (externalProps = {}) => {
@@ -250,9 +246,6 @@ export const useTreeItem2 = parameters => {
       in: status.expanded,
       children
     }, externalProps);
-    if (indentationAtItemLevel) {
-      response.indentationAtItemLevel = true;
-    }
     return response;
   };
   const getDragAndDropOverlayProps = (externalProps = {}) => {
@@ -263,6 +256,7 @@ export const useTreeItem2 = parameters => {
     return _extends({}, externalProps, enhancedDragAndDropOverlayProps);
   };
   return {
+    getContextProviderProps,
     getRootProps,
     getContentProps,
     getGroupTransitionProps,