@mui/x-tree-view 7.0.0-beta.6 → 7.0.0

package/TreeItem/useTreeItemState.js

@@ -1,45 +1,45 @@
 import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
-export function useTreeItemState(nodeId) {
+export function useTreeItemState(itemId) {
   const {
     instance,
     selection: {
       multiSelect
     }
   } = useTreeViewContext();
-  const expandable = instance.isNodeExpandable(nodeId);
-  const expanded = instance.isNodeExpanded(nodeId);
-  const focused = instance.isNodeFocused(nodeId);
-  const selected = instance.isNodeSelected(nodeId);
-  const disabled = instance.isNodeDisabled(nodeId);
+  const expandable = instance.isNodeExpandable(itemId);
+  const expanded = instance.isNodeExpanded(itemId);
+  const focused = instance.isNodeFocused(itemId);
+  const selected = instance.isNodeSelected(itemId);
+  const disabled = instance.isNodeDisabled(itemId);
   const handleExpansion = event => {
     if (!disabled) {
       if (!focused) {
-        instance.focusNode(event, nodeId);
+        instance.focusItem(event, itemId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
       // If already expanded and trying to toggle selection don't close
-      if (expandable && !(multiple && instance.isNodeExpanded(nodeId))) {
-        instance.toggleNodeExpansion(event, nodeId);
+      if (expandable && !(multiple && instance.isNodeExpanded(itemId))) {
+        instance.toggleNodeExpansion(event, itemId);
       }
     }
   };
   const handleSelection = event => {
     if (!disabled) {
       if (!focused) {
-        instance.focusNode(event, nodeId);
+        instance.focusItem(event, itemId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
       if (multiple) {
         if (event.shiftKey) {
           instance.selectRange(event, {
-            end: nodeId
+            end: itemId
           });
         } else {
-          instance.selectNode(event, nodeId, true);
+          instance.selectNode(event, itemId, true);
         }
       } else {
-        instance.selectNode(event, nodeId);
+        instance.selectNode(event, itemId);
       }
     }
   };

package/TreeItem2/TreeItem2.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { TreeItem2Props } from './TreeItem2.types';
+export declare const TreeItem2Root: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof React.ClassAttributes<HTMLLIElement> | keyof React.LiHTMLAttributes<HTMLLIElement>>, {}>;
+export declare const TreeItem2Content: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TreeItem2Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const TreeItem2IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const TreeItem2GroupTransition: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Collapse").CollapseProps, keyof import("@mui/material/Collapse").CollapseProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+/**
+ *
+ * Demos:
+ *
+ * - [Tree View](https://mui.com/x/react-tree-view/)
+ *
+ * API:
+ *
+ * - [TreeItem2 API](https://mui.com/x/api/tree-view/tree-item-2/)
+ */
+export declare const TreeItem2: React.ForwardRefExoticComponent<TreeItem2Props & React.RefAttributes<HTMLLIElement>>;

package/TreeItem2/TreeItem2.js

@@ -0,0 +1,300 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import unsupportedProp from '@mui/utils/unsupportedProp';
+import { alpha, styled, useThemeProps } from '@mui/material/styles';
+import Collapse from '@mui/material/Collapse';
+import { useSlotProps } from '@mui/base/utils';
+import { shouldForwardProp } from '@mui/system';
+import composeClasses from '@mui/utils/composeClasses';
+import { unstable_useTreeItem2 as useTreeItem2 } from '../useTreeItem2';
+import { getTreeItemUtilityClass, treeItemClasses } from '../TreeItem';
+import { TreeItem2Icon } from '../TreeItem2Icon';
+import { TreeItem2Provider } from '../TreeItem2Provider';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const TreeItem2Root = styled('li', {
+  name: 'MuiTreeItem2',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  outline: 0
+});
+export const TreeItem2Content = styled('div', {
+  name: 'MuiTreeItem2',
+  slot: 'Content',
+  overridesResolver: (props, styles) => styles.content,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'status'
+})(({
+  theme
+}) => ({
+  padding: theme.spacing(0.5, 1),
+  borderRadius: theme.shape.borderRadius,
+  width: '100%',
+  boxSizing: 'border-box',
+  // prevent width + padding to overflow
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  cursor: 'pointer',
+  WebkitTapHighlightColor: 'transparent',
+  '&:hover': {
+    backgroundColor: (theme.vars || theme).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  },
+  [`& .${treeItemClasses.groupTransition}`]: {
+    margin: 0,
+    padding: 0,
+    paddingLeft: 12
+  },
+  variants: [{
+    props: ({
+      status
+    }) => status.disabled,
+    style: {
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
+      backgroundColor: 'transparent'
+    }
+  }, {
+    props: ({
+      status
+    }) => status.focused,
+    style: {
+      backgroundColor: (theme.vars || theme).palette.action.focus
+    }
+  }, {
+    props: ({
+      status
+    }) => status.selected,
+    style: {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+        }
+      }
+    }
+  }, {
+    props: ({
+      status
+    }) => status.selected && status.focused,
+    style: {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    }
+  }]
+}));
+export const TreeItem2Label = styled('div', {
+  name: 'MuiTreeItem2',
+  slot: 'Label',
+  overridesResolver: (props, styles) => styles.label
+})(({
+  theme
+}) => _extends({
+  width: '100%',
+  boxSizing: 'border-box',
+  // prevent width + padding to overflow
+  // fixes overflow - see https://github.com/mui/material-ui/issues/27372
+  minWidth: 0,
+  position: 'relative'
+}, theme.typography.body1));
+export const TreeItem2IconContainer = styled('div', {
+  name: 'MuiTreeItem2',
+  slot: 'IconContainer',
+  overridesResolver: (props, styles) => styles.iconContainer
+})({
+  width: 16,
+  display: 'flex',
+  flexShrink: 0,
+  justifyContent: 'center',
+  '& svg': {
+    fontSize: 18
+  }
+});
+export const TreeItem2GroupTransition = styled(Collapse, {
+  name: 'MuiTreeItem2GroupTransition',
+  slot: 'GroupTransition',
+  overridesResolver: (props, styles) => styles.groupTransition
+})({
+  margin: 0,
+  padding: 0,
+  paddingLeft: 12
+});
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    content: ['content'],
+    expanded: ['expanded'],
+    selected: ['selected'],
+    focused: ['focused'],
+    disabled: ['disabled'],
+    iconContainer: ['iconContainer'],
+    label: ['label'],
+    groupTransition: ['groupTransition']
+  };
+  return composeClasses(slots, getTreeItemUtilityClass, classes);
+};
+
+/**
+ *
+ * Demos:
+ *
+ * - [Tree View](https://mui.com/x/react-tree-view/)
+ *
+ * API:
+ *
+ * - [TreeItem2 API](https://mui.com/x/api/tree-view/tree-item-2/)
+ */
+export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProps, forwardedRef) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiTreeItem2'
+  });
+  const {
+      id,
+      itemId,
+      label,
+      disabled,
+      children,
+      slots = {},
+      slotProps = {}
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    getRootProps,
+    getContentProps,
+    getIconContainerProps,
+    getLabelProps,
+    getGroupTransitionProps,
+    status
+  } = useTreeItem2({
+    id,
+    itemId,
+    children,
+    label,
+    disabled
+  });
+  const ownerState = _extends({}, props, status);
+  const classes = useUtilityClasses(ownerState);
+  const Root = slots.root ?? TreeItem2Root;
+  const rootProps = useSlotProps({
+    elementType: Root,
+    getSlotProps: getRootProps,
+    externalForwardedProps: other,
+    externalSlotProps: slotProps.root,
+    additionalProps: {
+      ref: forwardedRef
+    },
+    ownerState: {},
+    className: classes.root
+  });
+  const Content = slots.content ?? TreeItem2Content;
+  const contentProps = useSlotProps({
+    elementType: Content,
+    getSlotProps: getContentProps,
+    externalSlotProps: slotProps.content,
+    ownerState: {},
+    className: clsx(classes.content, status.expanded && classes.expanded, status.selected && classes.selected, status.focused && classes.focused, status.disabled && classes.disabled)
+  });
+  const IconContainer = slots.iconContainer ?? TreeItem2IconContainer;
+  const iconContainerProps = useSlotProps({
+    elementType: IconContainer,
+    getSlotProps: getIconContainerProps,
+    externalSlotProps: slotProps.iconContainer,
+    ownerState: {},
+    className: classes.iconContainer
+  });
+  const Label = slots.label ?? TreeItem2Label;
+  const labelProps = useSlotProps({
+    elementType: Label,
+    getSlotProps: getLabelProps,
+    externalSlotProps: slotProps.label,
+    ownerState: {},
+    className: classes.label
+  });
+  const GroupTransition = slots.groupTransition ?? undefined;
+  const groupTransitionProps = useSlotProps({
+    elementType: GroupTransition,
+    getSlotProps: getGroupTransitionProps,
+    externalSlotProps: slotProps.groupTransition,
+    ownerState: {},
+    className: classes.groupTransition
+  });
+  return /*#__PURE__*/_jsx(TreeItem2Provider, {
+    itemId: itemId,
+    children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
+      children: [/*#__PURE__*/_jsxs(Content, _extends({}, contentProps, {
+        children: [/*#__PURE__*/_jsx(IconContainer, _extends({}, iconContainerProps, {
+          children: /*#__PURE__*/_jsx(TreeItem2Icon, {
+            status: status,
+            slots: slots,
+            slotProps: slotProps
+          })
+        })), /*#__PURE__*/_jsx(Label, _extends({}, labelProps))]
+      })), children && /*#__PURE__*/_jsx(TreeItem2GroupTransition, _extends({
+        as: GroupTransition
+      }, groupTransitionProps))]
+    }))
+  });
+});
+process.env.NODE_ENV !== "production" ? TreeItem2.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  /**
+   * If `true`, the item is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * The id attribute of the item. If not provided, it will be generated.
+   */
+  id: PropTypes.string,
+  /**
+   * The id of the item.
+   * Must be unique.
+   */
+  itemId: PropTypes.string.isRequired,
+  /**
+   * The label of the item.
+   */
+  label: PropTypes.node,
+  /**
+   * This prop isn't supported.
+   * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.
+   */
+  onFocus: unsupportedProp,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;

package/TreeItem2/TreeItem2.types.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/base/utils';
+import { UseTreeItem2Parameters, UseTreeItem2Status } from '../useTreeItem2';
+import { TreeItemClasses } from '../TreeItem';
+import { TreeItem2IconSlotProps, TreeItem2IconSlots } from '../TreeItem2Icon';
+export interface TreeItem2Slots extends TreeItem2IconSlots {
+    /**
+     * The component that renders the root.
+     * @default TreeItem2Root
+     */
+    root?: React.ElementType;
+    /**
+     * The component that renders the content of the item.
+     * (e.g.: everything related to this item, not to its children).
+     * @default TreeItem2Content
+     */
+    content?: React.ElementType;
+    /**
+     * The component that renders the children of the item.
+     * @default TreeItem2GroupTransition
+     */
+    groupTransition?: React.ElementType;
+    /**
+     * The component that renders the icon.
+     * @default TreeItem2IconContainer
+     */
+    iconContainer?: React.ElementType;
+    /**
+     * The component that renders the item label.
+     * @default TreeItem2Label
+     */
+    label?: React.ElementType;
+}
+export interface TreeItem2SlotProps extends TreeItem2IconSlotProps {
+    root?: SlotComponentProps<'li', {}, {}>;
+    content?: SlotComponentProps<'div', {}, {}>;
+    groupTransition?: SlotComponentProps<'div', {}, {}>;
+    iconContainer?: SlotComponentProps<'div', {}, {}>;
+    label?: SlotComponentProps<'div', {}, {}>;
+}
+export interface TreeItem2Props extends Omit<UseTreeItem2Parameters, 'rootRef'>, Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {
+    className?: string;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<TreeItemClasses>;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: TreeItem2Slots;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: TreeItem2SlotProps;
+    /**
+     * This prop isn't supported.
+     * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.
+     */
+    onFocus?: null;
+}
+export interface TreeItem2OwnerState extends Omit<TreeItem2Props, 'disabled'>, UseTreeItem2Status {
+}

package/TreeItem2/TreeItem2.types.js

@@ -0,0 +1 @@
+export {};

package/TreeItem2/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItem2, TreeItem2Root, TreeItem2Content, TreeItem2IconContainer, TreeItem2GroupTransition, TreeItem2Label, } from './TreeItem2';
+export type { TreeItem2Props, TreeItem2Slots, TreeItem2SlotProps } from './TreeItem2.types';

package/TreeItem2/index.js

@@ -0,0 +1 @@
+export { TreeItem2, TreeItem2Root, TreeItem2Content, TreeItem2IconContainer, TreeItem2GroupTransition, TreeItem2Label } from './TreeItem2';

package/TreeItem2/package.json

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

package/TreeItem2Icon/TreeItem2Icon.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TreeItem2IconProps } from './TreeItem2Icon.types';
+declare function TreeItem2Icon(props: TreeItem2IconProps): React.JSX.Element | null;
+declare namespace TreeItem2Icon {
+    var propTypes: any;
+}
+export { TreeItem2Icon };

package/TreeItem2Icon/TreeItem2Icon.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
+import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
+import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+function TreeItem2Icon(props) {
+  const {
+    slots,
+    slotProps,
+    status
+  } = props;
+  const context = useTreeViewContext();
+  const contextIcons = _extends({}, context.icons.slots, {
+    expandIcon: context.icons.slots.expandIcon ?? TreeViewExpandIcon,
+    collapseIcon: context.icons.slots.collapseIcon ?? TreeViewCollapseIcon
+  });
+  const contextIconProps = context.icons.slotProps;
+  let iconName;
+  if (slots?.icon) {
+    iconName = 'icon';
+  } else if (status.expandable) {
+    if (status.expanded) {
+      iconName = 'collapseIcon';
+    } else {
+      iconName = 'expandIcon';
+    }
+  } else {
+    iconName = 'endIcon';
+  }
+  const Icon = slots?.[iconName] ?? contextIcons[iconName];
+  const iconProps = useSlotProps({
+    elementType: Icon,
+    externalSlotProps: tempOwnerState => _extends({}, resolveComponentProps(contextIconProps[iconName], tempOwnerState), resolveComponentProps(slotProps?.[iconName], tempOwnerState)),
+    // TODO: Add proper ownerState
+    ownerState: {}
+  });
+  if (!Icon) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Icon, _extends({}, iconProps));
+}
+process.env.NODE_ENV !== "production" ? TreeItem2Icon.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  status: PropTypes.shape({
+    disabled: PropTypes.bool.isRequired,
+    expandable: PropTypes.bool.isRequired,
+    expanded: PropTypes.bool.isRequired,
+    focused: PropTypes.bool.isRequired,
+    selected: PropTypes.bool.isRequired
+  }).isRequired
+} : void 0;
+export { TreeItem2Icon };

package/TreeItem2Icon/TreeItem2Icon.types.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/base/utils';
+import { UseTreeItem2Status } from '../useTreeItem2';
+export interface TreeItem2IconSlots {
+    /**
+     * The icon used to collapse the node.
+     */
+    collapseIcon?: React.ElementType;
+    /**
+     * The icon used to expand the node.
+     */
+    expandIcon?: React.ElementType;
+    /**
+     * The icon displayed next to an end node.
+     */
+    endIcon?: React.ElementType;
+    /**
+     * The icon to display next to the tree node's label.
+     */
+    icon?: React.ElementType;
+}
+export interface TreeItem2IconSlotProps {
+    collapseIcon?: SlotComponentProps<'svg', {}, {}>;
+    expandIcon?: SlotComponentProps<'svg', {}, {}>;
+    endIcon?: SlotComponentProps<'svg', {}, {}>;
+    icon?: SlotComponentProps<'svg', {}, {}>;
+}
+export interface TreeItem2IconProps {
+    status: UseTreeItem2Status;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: TreeItem2IconSlots;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: TreeItem2IconSlotProps;
+}

package/TreeItem2Icon/TreeItem2Icon.types.js

@@ -0,0 +1 @@
+export {};

package/TreeItem2Icon/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItem2Icon } from './TreeItem2Icon';
+export type { TreeItem2IconProps, TreeItem2IconSlots, TreeItem2IconSlotProps, } from './TreeItem2Icon.types';

package/TreeItem2Icon/index.js

@@ -0,0 +1 @@
+export { TreeItem2Icon } from './TreeItem2Icon';

package/TreeItem2Icon/package.json

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

package/TreeItem2Provider/TreeItem2Provider.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TreeItem2ProviderProps } from './TreeItem2Provider.types';
+declare function TreeItem2Provider(props: TreeItem2ProviderProps): import("react").ReactNode;
+declare namespace TreeItem2Provider {
+    var propTypes: any;
+}
+export { TreeItem2Provider };

package/TreeItem2Provider/TreeItem2Provider.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
+function TreeItem2Provider(props) {
+  const {
+    children,
+    itemId
+  } = props;
+  const {
+    wrapItem
+  } = useTreeViewContext();
+  return wrapItem({
+    children,
+    itemId
+  });
+}
+TreeItem2Provider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  itemId: PropTypes.string.isRequired
+};
+export { TreeItem2Provider };

package/TreeItem2Provider/TreeItem2Provider.types.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { TreeViewItemId } from '../models';
+export interface TreeItem2ProviderProps {
+    children: React.ReactNode;
+    itemId: TreeViewItemId;
+}

package/TreeItem2Provider/TreeItem2Provider.types.js

@@ -0,0 +1 @@
+export {};

package/TreeItem2Provider/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItem2Provider } from './TreeItem2Provider';
+export type { TreeItem2ProviderProps } from './TreeItem2Provider.types';

package/TreeItem2Provider/index.js

@@ -0,0 +1 @@
+export { TreeItem2Provider } from './TreeItem2Provider';

package/TreeItem2Provider/package.json

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

package/TreeView/TreeView.d.ts

@@ -5,7 +5,7 @@ type TreeViewComponent = (<Multiple extends boolean | undefined = undefined>(pro
 };
 /**
  * This component has been deprecated in favor of the new `SimpleTreeView` component.
- * You can have a look at how to migrate to the new component in the v7 [migration guide](https://next.mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
+ * You can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
  *
  * Demos:
  *