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

The community edition of the MUI X Tree View components.

"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;