@mui/x-tree-view 9.11.0 → 9.13.0

package/RichTreeView/richTreeViewClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getRichTreeViewUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiRichTreeView', slot);
 }
-const richTreeViewClasses = exports.richTreeViewClasses = (0, _generateUtilityClasses.default)('MuiRichTreeView', ['root', 'item', 'itemContent', 'itemGroupTransition', 'itemIconContainer', 'itemLabel', 'itemCheckbox', 'itemLabelInput']);
+const richTreeViewClasses = exports.richTreeViewClasses = (0, _generateUtilityClasses.default)('MuiRichTreeView', ['root', 'item', 'itemContent', 'itemGroupTransition', 'itemIconContainer', 'itemLabel', 'itemCheckbox', 'itemLabelInput', 'itemLoader']);

package/RichTreeView/richTreeViewClasses.mjs

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getRichTreeViewUtilityClass(slot) {
   return generateUtilityClass('MuiRichTreeView', slot);
 }
-export const richTreeViewClasses = generateUtilityClasses('MuiRichTreeView', ['root', 'item', 'itemContent', 'itemGroupTransition', 'itemIconContainer', 'itemLabel', 'itemCheckbox', 'itemLabelInput']);
+export const richTreeViewClasses = generateUtilityClasses('MuiRichTreeView', ['root', 'item', 'itemContent', 'itemGroupTransition', 'itemIconContainer', 'itemLabel', 'itemCheckbox', 'itemLabelInput', 'itemLoader']);

package/RichTreeView/useExtractRichTreeViewParameters.d.mts

@@ -291,4 +291,5 @@ export declare function useExtractRichTreeViewParameters<R extends TreeViewValid
     classes?: Partial<import("./richTreeViewClasses.mjs").RichTreeViewClasses>;
     sx?: import("@mui/system").SxProps<import("@mui/material/styles").Theme>;
   };
+  loading: boolean | undefined;
 };

package/RichTreeView/useExtractRichTreeViewParameters.d.ts

@@ -291,4 +291,5 @@ export declare function useExtractRichTreeViewParameters<R extends TreeViewValid
     classes?: Partial<import("./richTreeViewClasses.js").RichTreeViewClasses>;
     sx?: import("@mui/system").SxProps<import("@mui/material/styles").Theme>;
   };
+  loading: boolean | undefined;
 };

package/RichTreeView/useExtractRichTreeViewParameters.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useExtractRichTreeViewParameters = useExtractRichTreeViewParameters;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-const _excluded = ["apiRef", "slots", "slotProps", "disabledItemsFocusable", "items", "isItemDisabled", "isItemSelectionDisabled", "getItemLabel", "getItemChildren", "getItemId", "onItemClick", "itemChildrenIndentation", "id", "expandedItems", "defaultExpandedItems", "onExpandedItemsChange", "onItemExpansionToggle", "expansionTrigger", "disableSelection", "selectedItems", "defaultSelectedItems", "multiSelect", "checkboxSelection", "selectionPropagation", "onSelectedItemsChange", "onItemSelectionToggle", "onItemFocus", "itemHeight", "onItemLabelChange", "isItemEditable", "domStructure"];
+const _excluded = ["apiRef", "slots", "slotProps", "disabledItemsFocusable", "items", "isItemDisabled", "isItemSelectionDisabled", "getItemLabel", "getItemChildren", "getItemId", "onItemClick", "itemChildrenIndentation", "id", "expandedItems", "defaultExpandedItems", "onExpandedItemsChange", "onItemExpansionToggle", "expansionTrigger", "disableSelection", "selectedItems", "defaultSelectedItems", "multiSelect", "checkboxSelection", "selectionPropagation", "onSelectedItemsChange", "onItemSelectionToggle", "onItemFocus", "itemHeight", "onItemLabelChange", "isItemEditable", "domStructure", "loading"];
 function useExtractRichTreeViewParameters(props) {
   const {
       // Props for Provider
@@ -44,7 +44,9 @@ function useExtractRichTreeViewParameters(props) {
       // RichTreeViewStore parameters
       onItemLabelChange,
       isItemEditable,
-      domStructure
+      domStructure,
+      // Render-only props
+      loading
 
       // Forwarded props
     } = props,
@@ -90,6 +92,7 @@ function useExtractRichTreeViewParameters(props) {
     slots,
     slotProps,
     parameters,
-    forwardedProps
+    forwardedProps,
+    loading
   };
 }

package/RichTreeView/useExtractRichTreeViewParameters.mjs

@@ -1,5 +1,5 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["apiRef", "slots", "slotProps", "disabledItemsFocusable", "items", "isItemDisabled", "isItemSelectionDisabled", "getItemLabel", "getItemChildren", "getItemId", "onItemClick", "itemChildrenIndentation", "id", "expandedItems", "defaultExpandedItems", "onExpandedItemsChange", "onItemExpansionToggle", "expansionTrigger", "disableSelection", "selectedItems", "defaultSelectedItems", "multiSelect", "checkboxSelection", "selectionPropagation", "onSelectedItemsChange", "onItemSelectionToggle", "onItemFocus", "itemHeight", "onItemLabelChange", "isItemEditable", "domStructure"];
+const _excluded = ["apiRef", "slots", "slotProps", "disabledItemsFocusable", "items", "isItemDisabled", "isItemSelectionDisabled", "getItemLabel", "getItemChildren", "getItemId", "onItemClick", "itemChildrenIndentation", "id", "expandedItems", "defaultExpandedItems", "onExpandedItemsChange", "onItemExpansionToggle", "expansionTrigger", "disableSelection", "selectedItems", "defaultSelectedItems", "multiSelect", "checkboxSelection", "selectionPropagation", "onSelectedItemsChange", "onItemSelectionToggle", "onItemFocus", "itemHeight", "onItemLabelChange", "isItemEditable", "domStructure", "loading"];
 import * as React from 'react';
 export function useExtractRichTreeViewParameters(props) {
   const {
@@ -36,7 +36,9 @@ export function useExtractRichTreeViewParameters(props) {
       // RichTreeViewStore parameters
       onItemLabelChange,
       isItemEditable,
-      domStructure
+      domStructure,
+      // Render-only props
+      loading
 
       // Forwarded props
     } = props,
@@ -82,6 +84,7 @@ export function useExtractRichTreeViewParameters(props) {
     slots,
     slotProps,
     parameters,
-    forwardedProps
+    forwardedProps,
+    loading
   };
 }

package/SimpleTreeView/simpleTreeViewClasses.d.mts

@@ -1,5 +1,5 @@
 import type { TreeViewClasses } from "../internals/TreeViewProvider/TreeViewStyleContext.mjs";
-export interface SimpleTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemLabelInput' | 'itemErrorIcon' | 'itemLoadingIcon'> {}
+export interface SimpleTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemLabelInput' | 'itemErrorIcon' | 'itemLoadingIcon' | 'itemLoader'> {}
 export type SimpleTreeViewClassKey = keyof SimpleTreeViewClasses;
 export declare function getSimpleTreeViewUtilityClass(slot: string): string;
 export declare const simpleTreeViewClasses: SimpleTreeViewClasses;

package/SimpleTreeView/simpleTreeViewClasses.d.ts

@@ -1,5 +1,5 @@
 import type { TreeViewClasses } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
-export interface SimpleTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemLabelInput' | 'itemErrorIcon' | 'itemLoadingIcon'> {}
+export interface SimpleTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemLabelInput' | 'itemErrorIcon' | 'itemLoadingIcon' | 'itemLoader'> {}
 export type SimpleTreeViewClassKey = keyof SimpleTreeViewClasses;
 export declare function getSimpleTreeViewUtilityClass(slot: string): string;
 export declare const simpleTreeViewClasses: SimpleTreeViewClasses;

package/TreeItem/TreeItem.js

@@ -27,6 +27,7 @@ var _TreeItemDragAndDropOverlay = require("../TreeItemDragAndDropOverlay");
 var _TreeItemProvider = require("../TreeItemProvider");
 var _TreeItemLabelInput = require("../TreeItemLabelInput");
 var _TreeViewProvider = require("../internals/TreeViewProvider");
+var _constants = require("../internals/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["visible"],
   _excluded2 = ["id", "itemId", "label", "disabled", "disableSelection", "children", "slots", "slotProps", "classes"];
@@ -117,7 +118,7 @@ const TreeItemIconContainer = exports.TreeItemIconContainer = (0, _zeroStyled.st
   name: 'MuiTreeItem',
   slot: 'IconContainer'
 })({
-  width: 16,
+  width: _constants.TREE_ITEM_ICON_CONTAINER_WIDTH_PX,
   display: 'flex',
   flexShrink: 0,
   justifyContent: 'center',

package/TreeItem/TreeItem.mjs

@@ -22,6 +22,7 @@ import { TreeItemDragAndDropOverlay } from "../TreeItemDragAndDropOverlay/index.
 import { TreeItemProvider } from "../TreeItemProvider/index.mjs";
 import { TreeItemLabelInput } from "../TreeItemLabelInput/index.mjs";
 import { useTreeViewStyleContext } from "../internals/TreeViewProvider/index.mjs";
+import { TREE_ITEM_ICON_CONTAINER_WIDTH_PX } from "../internals/constants.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTreeItem');
 export const TreeItemRoot = styled('li', {
@@ -110,7 +111,7 @@ export const TreeItemIconContainer = styled('div', {
   name: 'MuiTreeItem',
   slot: 'IconContainer'
 })({
-  width: 16,
+  width: TREE_ITEM_ICON_CONTAINER_WIDTH_PX,
   display: 'flex',
   flexShrink: 0,
   justifyContent: 'center',

package/TreeItemLoader/TreeItemLoader.d.mts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { TreeItemLoaderProps } from "./TreeItemLoader.types.mjs";
+export declare const TreeItemLoaderRoot: 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>>, {}>;
+/**
+ * Semantic wrapper for one loading row of the Rich Tree View.
+ *
+ * It renders a `li` element with the `role`, `aria` attributes, indentation and
+ * height of a tree item, so custom loading UIs stay accessible and aligned.
+ * Without children, it renders the default skeleton placeholders.
+ *
+ * Demos:
+ *
+ * - [Tree View](https://mui.com/x/react-tree-view/)
+ *
+ * API:
+ *
+ * - [TreeItemLoader API](https://mui.com/x/api/tree-view/tree-item-loader/)
+ */
+declare const TreeItemLoader: React.ForwardRefExoticComponent<TreeItemLoaderProps & React.RefAttributes<HTMLLIElement>>;
+export { TreeItemLoader };

package/TreeItemLoader/TreeItemLoader.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { TreeItemLoaderProps } from "./TreeItemLoader.types.js";
+export declare const TreeItemLoaderRoot: 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>>, {}>;
+/**
+ * Semantic wrapper for one loading row of the Rich Tree View.
+ *
+ * It renders a `li` element with the `role`, `aria` attributes, indentation and
+ * height of a tree item, so custom loading UIs stay accessible and aligned.
+ * Without children, it renders the default skeleton placeholders.
+ *
+ * Demos:
+ *
+ * - [Tree View](https://mui.com/x/react-tree-view/)
+ *
+ * API:
+ *
+ * - [TreeItemLoader API](https://mui.com/x/api/tree-view/tree-item-loader/)
+ */
+declare const TreeItemLoader: React.ForwardRefExoticComponent<TreeItemLoaderProps & React.RefAttributes<HTMLLIElement>>;
+export { TreeItemLoader };

package/TreeItemLoader/TreeItemLoader.js

@@ -0,0 +1,152 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeItemLoaderRoot = exports.TreeItemLoader = 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 _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _zeroStyled = require("../internals/zero-styled");
+var _constants = require("../internals/constants");
+var _treeItemLoaderClasses = require("./treeItemLoaderClasses");
+var _TreeItemLoaderContext = require("./TreeItemLoaderContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "className", "classes", "style", "ownerState"];
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTreeItemLoader');
+
+// Rotated with `nth-of-type` so consecutive rows render labels of different widths.
+const LABEL_WIDTHS = ['40%', '70%', '55%', '50%', '65%'];
+const TreeItemLoaderRoot = exports.TreeItemLoaderRoot = (0, _zeroStyled.styled)('li', {
+  name: 'MuiTreeItemLoader',
+  slot: 'Root'
+})(({
+  theme
+}) => (0, _extends2.default)({
+  listStyle: 'none',
+  margin: 0
+}, theme.typography.body1, {
+  padding: theme.spacing(0.5, 1),
+  // Same indentation formula as the tree item content.
+  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth, 0))`,
+  height: 'var(--TreeView-itemHeight, unset)',
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  [`& .${_treeItemLoaderClasses.treeItemLoaderClasses.iconContainer}`]: {
+    width: _constants.TREE_ITEM_ICON_CONTAINER_WIDTH_PX,
+    flexShrink: 0,
+    display: 'inline-block'
+  },
+  [`& .${_treeItemLoaderClasses.treeItemLoaderClasses.checkbox}`]: {
+    flexShrink: 0
+  }
+}, Object.fromEntries(LABEL_WIDTHS.map((width, index) => [`&:nth-of-type(5n + ${index + 1}) .${_treeItemLoaderClasses.treeItemLoaderClasses.label}`, {
+  width
+}]))));
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    iconContainer: ['iconContainer'],
+    checkbox: ['checkbox'],
+    label: ['label']
+  };
+  return (0, _composeClasses.default)(slots, _treeItemLoaderClasses.getTreeItemLoaderUtilityClass, classes);
+};
+
+/**
+ * Semantic wrapper for one loading row of the Rich Tree View.
+ *
+ * It renders a `li` element with the `role`, `aria` attributes, indentation and
+ * height of a tree item, so custom loading UIs stay accessible and aligned.
+ * Without children, it renders the default skeleton placeholders.
+ *
+ * Demos:
+ *
+ * - [Tree View](https://mui.com/x/react-tree-view/)
+ *
+ * API:
+ *
+ * - [TreeItemLoader API](https://mui.com/x/api/tree-view/tree-item-loader/)
+ */
+const TreeItemLoader = exports.TreeItemLoader = /*#__PURE__*/React.forwardRef(function TreeItemLoader(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiTreeItemLoader'
+  });
+  const {
+      children,
+      className,
+      classes: classesProp,
+      style
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    itemDepth,
+    itemHeight,
+    isCheckboxSelectionEnabled
+  } = React.useContext(_TreeItemLoaderContext.TreeItemLoaderContext);
+  const classes = useUtilityClasses(classesProp);
+  const rootStyle = (0, _extends2.default)({
+    '--TreeView-itemDepth': itemDepth
+  }, itemHeight == null ? {} : {
+    '--TreeView-itemHeight': `${itemHeight}px`
+  }, style);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemLoaderRoot, (0, _extends2.default)({
+    role: "treeitem",
+    "aria-disabled": true
+  }, other, {
+    className: (0, _clsx.default)(classes.root, className),
+    style: rootStyle,
+    ref: ref,
+    children: children ?? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: classes.iconContainer
+      }), isCheckboxSelectionEnabled &&
+      /*#__PURE__*/
+      // Same size as the checkbox rendered by the tree item, to keep the labels aligned.
+      (0, _jsxRuntime.jsx)(_Skeleton.default, {
+        variant: "circular",
+        width: 24,
+        height: 24,
+        className: classes.checkbox
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+        className: classes.label
+      })]
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") TreeItemLoader.displayName = "TreeItemLoader";
+process.env.NODE_ENV !== "production" ? TreeItemLoader.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the loading row.
+   * When not provided, the default skeleton placeholders are rendered.
+   */
+  children: _propTypes.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * State of the loading row, forwarded by the `itemLoader` slot.
+   * The component does not render it.
+   */
+  ownerState: _propTypes.default.shape({
+    index: _propTypes.default.number.isRequired,
+    isCheckboxSelectionEnabled: _propTypes.default.bool.isRequired,
+    itemDepth: _propTypes.default.number.isRequired,
+    itemsCount: _propTypes.default.number.isRequired
+  })
+} : void 0;

package/TreeItemLoader/TreeItemLoader.mjs

@@ -0,0 +1,146 @@
+'use client';
+
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["children", "className", "classes", "style", "ownerState"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import Skeleton from '@mui/material/Skeleton';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled, createUseThemeProps } from "../internals/zero-styled/index.mjs";
+import { TREE_ITEM_ICON_CONTAINER_WIDTH_PX } from "../internals/constants.mjs";
+import { getTreeItemLoaderUtilityClass, treeItemLoaderClasses } from "./treeItemLoaderClasses.mjs";
+import { TreeItemLoaderContext } from "./TreeItemLoaderContext.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTreeItemLoader');
+
+// Rotated with `nth-of-type` so consecutive rows render labels of different widths.
+const LABEL_WIDTHS = ['40%', '70%', '55%', '50%', '65%'];
+export const TreeItemLoaderRoot = styled('li', {
+  name: 'MuiTreeItemLoader',
+  slot: 'Root'
+})(({
+  theme
+}) => _extends({
+  listStyle: 'none',
+  margin: 0
+}, theme.typography.body1, {
+  padding: theme.spacing(0.5, 1),
+  // Same indentation formula as the tree item content.
+  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth, 0))`,
+  height: 'var(--TreeView-itemHeight, unset)',
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  [`& .${treeItemLoaderClasses.iconContainer}`]: {
+    width: TREE_ITEM_ICON_CONTAINER_WIDTH_PX,
+    flexShrink: 0,
+    display: 'inline-block'
+  },
+  [`& .${treeItemLoaderClasses.checkbox}`]: {
+    flexShrink: 0
+  }
+}, Object.fromEntries(LABEL_WIDTHS.map((width, index) => [`&:nth-of-type(5n + ${index + 1}) .${treeItemLoaderClasses.label}`, {
+  width
+}]))));
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    iconContainer: ['iconContainer'],
+    checkbox: ['checkbox'],
+    label: ['label']
+  };
+  return composeClasses(slots, getTreeItemLoaderUtilityClass, classes);
+};
+
+/**
+ * Semantic wrapper for one loading row of the Rich Tree View.
+ *
+ * It renders a `li` element with the `role`, `aria` attributes, indentation and
+ * height of a tree item, so custom loading UIs stay accessible and aligned.
+ * Without children, it renders the default skeleton placeholders.
+ *
+ * Demos:
+ *
+ * - [Tree View](https://mui.com/x/react-tree-view/)
+ *
+ * API:
+ *
+ * - [TreeItemLoader API](https://mui.com/x/api/tree-view/tree-item-loader/)
+ */
+const TreeItemLoader = /*#__PURE__*/React.forwardRef(function TreeItemLoader(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiTreeItemLoader'
+  });
+  const {
+      children,
+      className,
+      classes: classesProp,
+      style
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    itemDepth,
+    itemHeight,
+    isCheckboxSelectionEnabled
+  } = React.useContext(TreeItemLoaderContext);
+  const classes = useUtilityClasses(classesProp);
+  const rootStyle = _extends({
+    '--TreeView-itemDepth': itemDepth
+  }, itemHeight == null ? {} : {
+    '--TreeView-itemHeight': `${itemHeight}px`
+  }, style);
+  return /*#__PURE__*/_jsx(TreeItemLoaderRoot, _extends({
+    role: "treeitem",
+    "aria-disabled": true
+  }, other, {
+    className: clsx(classes.root, className),
+    style: rootStyle,
+    ref: ref,
+    children: children ?? /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        className: classes.iconContainer
+      }), isCheckboxSelectionEnabled &&
+      /*#__PURE__*/
+      // Same size as the checkbox rendered by the tree item, to keep the labels aligned.
+      _jsx(Skeleton, {
+        variant: "circular",
+        width: 24,
+        height: 24,
+        className: classes.checkbox
+      }), /*#__PURE__*/_jsx(Skeleton, {
+        className: classes.label
+      })]
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") TreeItemLoader.displayName = "TreeItemLoader";
+process.env.NODE_ENV !== "production" ? TreeItemLoader.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the loading row.
+   * When not provided, the default skeleton placeholders are rendered.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * State of the loading row, forwarded by the `itemLoader` slot.
+   * The component does not render it.
+   */
+  ownerState: PropTypes.shape({
+    index: PropTypes.number.isRequired,
+    isCheckboxSelectionEnabled: PropTypes.bool.isRequired,
+    itemDepth: PropTypes.number.isRequired,
+    itemsCount: PropTypes.number.isRequired
+  })
+} : void 0;
+export { TreeItemLoader };

package/TreeItemLoader/TreeItemLoader.types.d.mts

@@ -0,0 +1,36 @@
+import type * as React from 'react';
+import type { TreeItemLoaderClasses } from "./treeItemLoaderClasses.mjs";
+export interface TreeItemLoaderOwnerState {
+  /**
+   * Index of the loading row inside its group.
+   */
+  index: number;
+  /**
+   * Number of loading rows rendered in the group.
+   */
+  itemsCount: number;
+  /**
+   * Depth of the loading rows.
+   */
+  itemDepth: number;
+  /**
+   * Whether each row renders a checkbox placeholder.
+   */
+  isCheckboxSelectionEnabled: boolean;
+}
+export interface TreeItemLoaderProps extends React.HTMLAttributes<HTMLLIElement> {
+  /**
+   * The content of the loading row.
+   * When not provided, the default skeleton placeholders are rendered.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TreeItemLoaderClasses>;
+  /**
+   * State of the loading row, forwarded by the `itemLoader` slot.
+   * The component does not render it.
+   */
+  ownerState?: TreeItemLoaderOwnerState;
+}

package/TreeItemLoader/TreeItemLoader.types.d.ts

@@ -0,0 +1,36 @@
+import type * as React from 'react';
+import type { TreeItemLoaderClasses } from "./treeItemLoaderClasses.js";
+export interface TreeItemLoaderOwnerState {
+  /**
+   * Index of the loading row inside its group.
+   */
+  index: number;
+  /**
+   * Number of loading rows rendered in the group.
+   */
+  itemsCount: number;
+  /**
+   * Depth of the loading rows.
+   */
+  itemDepth: number;
+  /**
+   * Whether each row renders a checkbox placeholder.
+   */
+  isCheckboxSelectionEnabled: boolean;
+}
+export interface TreeItemLoaderProps extends React.HTMLAttributes<HTMLLIElement> {
+  /**
+   * The content of the loading row.
+   * When not provided, the default skeleton placeholders are rendered.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TreeItemLoaderClasses>;
+  /**
+   * State of the loading row, forwarded by the `itemLoader` slot.
+   * The component does not render it.
+   */
+  ownerState?: TreeItemLoaderOwnerState;
+}

package/TreeItemLoader/TreeItemLoader.types.js

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

package/TreeItemLoader/TreeItemLoader.types.mjs

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

package/TreeItemLoader/TreeItemLoaderContext.d.mts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface TreeItemLoaderContextValue {
+  /**
+   * Depth of the loading rows.
+   * `0` for the whole-tree loading UI, parent depth + 1 for the children of a lazily loading item.
+   */
+  itemDepth: number;
+  /**
+   * Fixed height of the rows, from the `itemHeight` prop of the tree.
+   */
+  itemHeight: number | null;
+  /**
+   * Whether each row renders a checkbox placeholder.
+   */
+  isCheckboxSelectionEnabled: boolean;
+}
+/**
+ * Provides the layout information of the surrounding tree to `TreeItemLoader`.
+ * The loading UI renders outside of the tree items, so the depth and height
+ * cannot be derived from an item.
+ *
+ * @ignore - internal context.
+ */
+export declare const TreeItemLoaderContext: React.Context<TreeItemLoaderContextValue>;

package/TreeItemLoader/TreeItemLoaderContext.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface TreeItemLoaderContextValue {
+  /**
+   * Depth of the loading rows.
+   * `0` for the whole-tree loading UI, parent depth + 1 for the children of a lazily loading item.
+   */
+  itemDepth: number;
+  /**
+   * Fixed height of the rows, from the `itemHeight` prop of the tree.
+   */
+  itemHeight: number | null;
+  /**
+   * Whether each row renders a checkbox placeholder.
+   */
+  isCheckboxSelectionEnabled: boolean;
+}
+/**
+ * Provides the layout information of the surrounding tree to `TreeItemLoader`.
+ * The loading UI renders outside of the tree items, so the depth and height
+ * cannot be derived from an item.
+ *
+ * @ignore - internal context.
+ */
+export declare const TreeItemLoaderContext: React.Context<TreeItemLoaderContextValue>;

package/TreeItemLoader/TreeItemLoaderContext.js

@@ -0,0 +1,22 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeItemLoaderContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * Provides the layout information of the surrounding tree to `TreeItemLoader`.
+ * The loading UI renders outside of the tree items, so the depth and height
+ * cannot be derived from an item.
+ *
+ * @ignore - internal context.
+ */
+const TreeItemLoaderContext = exports.TreeItemLoaderContext = /*#__PURE__*/React.createContext({
+  itemDepth: 0,
+  itemHeight: null,
+  isCheckboxSelectionEnabled: false
+});
+if (process.env.NODE_ENV !== "production") TreeItemLoaderContext.displayName = "TreeItemLoaderContext";

package/TreeItemLoader/TreeItemLoaderContext.mjs

@@ -0,0 +1,16 @@
+'use client';
+
+import * as React from 'react';
+/**
+ * Provides the layout information of the surrounding tree to `TreeItemLoader`.
+ * The loading UI renders outside of the tree items, so the depth and height
+ * cannot be derived from an item.
+ *
+ * @ignore - internal context.
+ */
+export const TreeItemLoaderContext = /*#__PURE__*/React.createContext({
+  itemDepth: 0,
+  itemHeight: null,
+  isCheckboxSelectionEnabled: false
+});
+if (process.env.NODE_ENV !== "production") TreeItemLoaderContext.displayName = "TreeItemLoaderContext";