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

package/node/TreeItem/TreeItem.js

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
 var _utils = require("@mui/base/utils");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _styles = require("@mui/material/styles");
 var _unsupportedProp = _interopRequireDefault(require("@mui/utils/unsupportedProp"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
@@ -20,8 +21,9 @@ var _TreeItemContent = require("./TreeItemContent");
 var _treeItemClasses = require("./treeItemClasses");
 var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
 var _icons = require("../icons");
+var _TreeItem2Provider = require("../TreeItem2Provider");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "nodeId", "id", "label", "onClick", "onMouseDown"],
+const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "itemId", "id", "label", "onClick", "onMouseDown", "onFocus", "onBlur", "onKeyDown"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"],
   _excluded4 = ["ownerState"];
@@ -152,18 +154,10 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     disabledItemsFocusable,
     instance
   } = (0, _useTreeViewContext.useTreeViewContext)();
-  const inPropsWithTheme = (0, _styles.useThemeProps)({
+  const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiTreeItem'
   });
-  const {
-    props,
-    ref,
-    wrapItem
-  } = runItemPlugins({
-    props: inPropsWithTheme,
-    ref: inRef
-  });
   const {
       children,
       className,
@@ -171,13 +165,21 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       slotProps: inSlotProps,
       ContentComponent = _TreeItemContent.TreeItemContent,
       ContentProps,
-      nodeId,
+      itemId,
       id,
       label,
       onClick,
-      onMouseDown
+      onMouseDown,
+      onBlur,
+      onKeyDown
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    contentRef,
+    rootRef
+  } = runItemPlugins(props);
+  const handleRootRef = (0, _useForkRef.default)(inRef, rootRef);
+  const handleContentRef = (0, _useForkRef.default)(ContentProps?.ref, contentRef);
   const slots = {
     expandIcon: inSlots?.expandIcon ?? contextIcons.slots.expandIcon ?? _icons.TreeViewExpandIcon,
     collapseIcon: inSlots?.collapseIcon ?? contextIcons.slots.collapseIcon ?? _icons.TreeViewCollapseIcon,
@@ -192,10 +194,10 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     return Boolean(reactChildren);
   };
   const expandable = isExpandable(children);
-  const expanded = instance.isNodeExpanded(nodeId);
-  const focused = instance.isNodeFocused(nodeId);
-  const selected = instance.isNodeSelected(nodeId);
-  const disabled = instance.isNodeDisabled(nodeId);
+  const expanded = instance.isNodeExpanded(itemId);
+  const focused = instance.isNodeFocused(itemId);
+  const selected = instance.isNodeSelected(itemId);
+  const disabled = instance.isNodeDisabled(itemId);
   const ownerState = (0, _extends2.default)({}, props, {
     expanded,
     focused,
@@ -257,62 +259,73 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     /* single-selection trees unset aria-selected on un-selected items.
      *
      * If the tree does not support multiple selection, aria-selected
-     * is set to true for the selected node and it is not present on any other node in the tree.
+     * is set to true for the selected item and it is not present on any other item in the tree.
      * Source: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
      */
     ariaSelected = true;
   }
   function handleFocus(event) {
-    // DOM focus stays on the tree which manages focus with aria-activedescendant
-    if (event.target === event.currentTarget) {
-      instance.focusRoot();
-    }
     const canBeFocused = !disabled || disabledItemsFocusable;
     if (!focused && canBeFocused && event.currentTarget === event.target) {
-      instance.focusNode(event, nodeId);
+      instance.focusItem(event, itemId);
     }
   }
-  const idAttribute = instance.getTreeItemId(nodeId, id);
-  const item = /*#__PURE__*/(0, _jsxRuntime.jsxs)(TreeItemRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, className),
-    role: "treeitem",
-    "aria-expanded": expandable ? expanded : undefined,
-    "aria-selected": ariaSelected,
-    "aria-disabled": disabled || undefined,
-    id: idAttribute,
-    tabIndex: -1
-  }, other, {
-    ownerState: ownerState,
-    onFocus: handleFocus,
-    ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTreeItemContent, (0, _extends2.default)({
-      as: ContentComponent,
-      classes: {
-        root: classes.content,
-        expanded: classes.expanded,
-        selected: classes.selected,
-        focused: classes.focused,
-        disabled: classes.disabled,
-        iconContainer: classes.iconContainer,
-        label: classes.label
-      },
-      label: label,
-      nodeId: nodeId,
-      onClick: onClick,
-      onMouseDown: onMouseDown,
-      icon: icon,
-      expansionIcon: expansionIcon,
-      displayIcon: displayIcon,
-      ownerState: ownerState
-    }, ContentProps)), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemGroup, (0, _extends2.default)({
-      as: GroupTransition
-    }, groupTransitionProps, {
-      children: children
-    }))]
-  }));
-  return wrapItem(item);
+  function handleBlur(event) {
+    onBlur?.(event);
+    instance.removeFocusedItem();
+  }
+  const handleKeyDown = event => {
+    onKeyDown?.(event);
+    instance.handleItemKeyDown(event, itemId);
+  };
+  const idAttribute = instance.getTreeItemId(itemId, id);
+  const tabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2Provider.TreeItem2Provider, {
+    itemId: itemId,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TreeItemRoot, (0, _extends2.default)({
+      className: (0, _clsx.default)(classes.root, className),
+      role: "treeitem",
+      "aria-expanded": expandable ? expanded : undefined,
+      "aria-selected": ariaSelected,
+      "aria-disabled": disabled || undefined,
+      id: idAttribute,
+      tabIndex: tabIndex
+    }, other, {
+      ownerState: ownerState,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      ref: handleRootRef,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTreeItemContent, (0, _extends2.default)({
+        as: ContentComponent,
+        classes: {
+          root: classes.content,
+          expanded: classes.expanded,
+          selected: classes.selected,
+          focused: classes.focused,
+          disabled: classes.disabled,
+          iconContainer: classes.iconContainer,
+          label: classes.label
+        },
+        label: label,
+        itemId: itemId,
+        onClick: onClick,
+        onMouseDown: onMouseDown,
+        icon: icon,
+        expansionIcon: expansionIcon,
+        displayIcon: displayIcon,
+        ownerState: ownerState
+      }, ContentProps, {
+        ref: handleContentRef
+      })), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemGroup, (0, _extends2.default)({
+        as: GroupTransition
+      }, groupTransitionProps, {
+        children: children
+      }))]
+    }))
+  });
 });
-TreeItem.propTypes = {
+process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
@@ -327,7 +340,7 @@ TreeItem.propTypes = {
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   /**
-   * The component used for the content node.
+   * The component used to render the content of the item.
    * @default TreeItemContent
    */
   ContentComponent: _elementTypeAcceptingRef.default,
@@ -336,21 +349,21 @@ TreeItem.propTypes = {
    */
   ContentProps: _propTypes.default.object,
   /**
-   * If `true`, the node is disabled.
+   * If `true`, the item is disabled.
    * @default false
    */
   disabled: _propTypes.default.bool,
   /**
-   * The tree node label.
+   * The id of the item.
    */
-  label: _propTypes.default.node,
+  itemId: _propTypes.default.string.isRequired,
   /**
-   * The id of the node.
+   * The tree item label.
    */
-  nodeId: _propTypes.default.string.isRequired,
+  label: _propTypes.default.node,
   /**
    * This prop isn't supported.
-   * Use the `onNodeFocus` callback on the tree if you need to monitor a node's focus.
+   * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.
    */
   onFocus: _unsupportedProp.default,
   /**
@@ -367,4 +380,4 @@ TreeItem.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
-};
+} : void 0;

package/node/TreeItem/TreeItemContent.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _useTreeItemState = require("./useTreeItemState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "nodeId", "onClick", "onMouseDown"];
+const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "itemId", "onClick", "onMouseDown"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -26,7 +26,7 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
       expansionIcon,
       icon: iconProp,
       label,
-      nodeId,
+      itemId,
       onClick,
       onMouseDown
     } = props,
@@ -39,7 +39,7 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
     handleExpansion,
     handleSelection,
     preventSelection
-  } = (0, _useTreeItemState.useTreeItemState)(nodeId);
+  } = (0, _useTreeItemState.useTreeItemState)(itemId);
   const icon = iconProp || expansionIcon || displayIcon;
   const handleMouseDown = event => {
     preventSelection(event);
@@ -83,23 +83,23 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   classes: _propTypes.default.object.isRequired,
   className: _propTypes.default.string,
   /**
-   * The icon to display next to the tree node's label. Either a parent or end icon.
+   * The icon to display next to the tree item's label. Either a parent or end icon.
    */
   displayIcon: _propTypes.default.node,
   /**
-   * The icon to display next to the tree node's label. Either an expansion or collapse icon.
+   * The icon to display next to the tree item's label. Either an expansion or collapse icon.
    */
   expansionIcon: _propTypes.default.node,
   /**
-   * The icon to display next to the tree node's label.
+   * The icon to display next to the tree item's label.
    */
   icon: _propTypes.default.node,
   /**
-   * The tree node label.
+   * The id of the item.
    */
-  label: _propTypes.default.node,
+  itemId: _propTypes.default.string.isRequired,
   /**
-   * The id of the node.
+   * The tree item label.
    */
-  nodeId: _propTypes.default.string.isRequired
+  label: _propTypes.default.node
 } : void 0;

package/node/TreeItem/useTreeItemState.js

@@ -5,47 +5,47 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeItemState = useTreeItemState;
 var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
-function useTreeItemState(nodeId) {
+function useTreeItemState(itemId) {
   const {
     instance,
     selection: {
       multiSelect
     }
   } = (0, _useTreeViewContext.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/node/TreeItem2/TreeItem2.js

@@ -0,0 +1,308 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeItem2Root = exports.TreeItem2Label = exports.TreeItem2IconContainer = exports.TreeItem2GroupTransition = exports.TreeItem2Content = exports.TreeItem2 = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _unsupportedProp = _interopRequireDefault(require("@mui/utils/unsupportedProp"));
+var _styles = require("@mui/material/styles");
+var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
+var _utils = require("@mui/base/utils");
+var _system = require("@mui/system");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useTreeItem = require("../useTreeItem2");
+var _TreeItem = require("../TreeItem");
+var _TreeItem2Icon = require("../TreeItem2Icon");
+var _TreeItem2Provider = require("../TreeItem2Provider");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const TreeItem2Root = exports.TreeItem2Root = (0, _styles.styled)('li', {
+  name: 'MuiTreeItem2',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  outline: 0
+});
+const TreeItem2Content = exports.TreeItem2Content = (0, _styles.styled)('div', {
+  name: 'MuiTreeItem2',
+  slot: 'Content',
+  overridesResolver: (props, styles) => styles.content,
+  shouldForwardProp: prop => (0, _system.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'
+    }
+  },
+  [`& .${_TreeItem.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})` : (0, _styles.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}))` : (0, _styles.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})` : (0, _styles.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}))` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    }
+  }]
+}));
+const TreeItem2Label = exports.TreeItem2Label = (0, _styles.styled)('div', {
+  name: 'MuiTreeItem2',
+  slot: 'Label',
+  overridesResolver: (props, styles) => styles.label
+})(({
+  theme
+}) => (0, _extends2.default)({
+  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));
+const TreeItem2IconContainer = exports.TreeItem2IconContainer = (0, _styles.styled)('div', {
+  name: 'MuiTreeItem2',
+  slot: 'IconContainer',
+  overridesResolver: (props, styles) => styles.iconContainer
+})({
+  width: 16,
+  display: 'flex',
+  flexShrink: 0,
+  justifyContent: 'center',
+  '& svg': {
+    fontSize: 18
+  }
+});
+const TreeItem2GroupTransition = exports.TreeItem2GroupTransition = (0, _styles.styled)(_Collapse.default, {
+  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 (0, _composeClasses.default)(slots, _TreeItem.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/)
+ */
+const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProps, forwardedRef) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiTreeItem2'
+  });
+  const {
+      id,
+      itemId,
+      label,
+      disabled,
+      children,
+      slots = {},
+      slotProps = {}
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    getRootProps,
+    getContentProps,
+    getIconContainerProps,
+    getLabelProps,
+    getGroupTransitionProps,
+    status
+  } = (0, _useTreeItem.unstable_useTreeItem2)({
+    id,
+    itemId,
+    children,
+    label,
+    disabled
+  });
+  const ownerState = (0, _extends2.default)({}, props, status);
+  const classes = useUtilityClasses(ownerState);
+  const Root = slots.root ?? TreeItem2Root;
+  const rootProps = (0, _utils.useSlotProps)({
+    elementType: Root,
+    getSlotProps: getRootProps,
+    externalForwardedProps: other,
+    externalSlotProps: slotProps.root,
+    additionalProps: {
+      ref: forwardedRef
+    },
+    ownerState: {},
+    className: classes.root
+  });
+  const Content = slots.content ?? TreeItem2Content;
+  const contentProps = (0, _utils.useSlotProps)({
+    elementType: Content,
+    getSlotProps: getContentProps,
+    externalSlotProps: slotProps.content,
+    ownerState: {},
+    className: (0, _clsx.default)(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 = (0, _utils.useSlotProps)({
+    elementType: IconContainer,
+    getSlotProps: getIconContainerProps,
+    externalSlotProps: slotProps.iconContainer,
+    ownerState: {},
+    className: classes.iconContainer
+  });
+  const Label = slots.label ?? TreeItem2Label;
+  const labelProps = (0, _utils.useSlotProps)({
+    elementType: Label,
+    getSlotProps: getLabelProps,
+    externalSlotProps: slotProps.label,
+    ownerState: {},
+    className: classes.label
+  });
+  const GroupTransition = slots.groupTransition ?? undefined;
+  const groupTransitionProps = (0, _utils.useSlotProps)({
+    elementType: GroupTransition,
+    getSlotProps: getGroupTransitionProps,
+    externalSlotProps: slotProps.groupTransition,
+    ownerState: {},
+    className: classes.groupTransition
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2Provider.TreeItem2Provider, {
+    itemId: itemId,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Content, (0, _extends2.default)({}, contentProps, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, (0, _extends2.default)({}, iconContainerProps, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2Icon.TreeItem2Icon, {
+            status: status,
+            slots: slots,
+            slotProps: slotProps
+          })
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelProps))]
+      })), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItem2GroupTransition, (0, _extends2.default)({
+        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.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  className: _propTypes.default.string,
+  /**
+   * If `true`, the item is disabled.
+   * @default false
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * The id attribute of the item. If not provided, it will be generated.
+   */
+  id: _propTypes.default.string,
+  /**
+   * The id of the item.
+   * Must be unique.
+   */
+  itemId: _propTypes.default.string.isRequired,
+  /**
+   * The label of the item.
+   */
+  label: _propTypes.default.node,
+  /**
+   * This prop isn't supported.
+   * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.
+   */
+  onFocus: _unsupportedProp.default,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
+} : void 0;

package/node/TreeItem2/TreeItem2.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});