@mui/x-tree-view/TreeItemLoader/TreeItemLoader.mjs

The community edition of the MUI X Tree View components.

'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 };