@mui/x-tree-view/internals/components/RichTreeViewItems.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.RichTreeViewItem = void 0;
exports.RichTreeViewItems = RichTreeViewItems;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _empty = require("@base-ui/utils/empty");
var _store = require("@mui/x-internals/store");
var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
var _TreeItem = require("../../TreeItem");
var _items = require("../plugins/items");
var _TreeViewProvider = require("../TreeViewProvider");
var _expansion = require("../plugins/expansion");
var _lazyLoading = require("../plugins/lazyLoading");
var _RichTreeViewLoading = require("./RichTreeViewLoading");
var _useTreeViewRootProps = require("../hooks/useTreeViewRootProps");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ownerState"];
const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
if (process.env.NODE_ENV !== "production") RichTreeViewItemsContext.displayName = "RichTreeViewItemsContext";
const selectorNoChildren = () => _empty.EMPTY_ARRAY;
const selectorChildrenIdsNull = state => _items.itemsSelectors.itemOrderedChildrenIds(state, null);

/**
 * Renders the loading rows for the children of an item that lazily loads them.
 * It only mounts while the item is loading, so the `loading` slot props are not
 * resolved for the other items.
 */
function RichTreeViewItemLoadingChildren({
  itemId
}) {
  const {
    store
  } = (0, _TreeViewProvider.useTreeViewContext)();
  const {
    classes,
    slots: styleSlots,
    slotProps: styleSlotProps
  } = (0, _TreeViewProvider.useTreeViewStyleContext)();
  const itemDepth = (0, _store.useStore)(store, _items.itemsSelectors.itemDepth, itemId);
  const loadingChildrenCount = (0, _store.useStore)(store, _lazyLoading.lazyLoadingSelectors.itemLoadingChildrenCount, itemId);
  const Loading = styleSlots.loading;
  const loadingProps = (0, _useSlotProps2.default)({
    elementType: Loading ?? 'div',
    externalSlotProps: styleSlotProps.loading,
    ownerState: {
      itemId
    }
  });

  // The count reported by `getChildrenCount()` wins over `slotProps.loading.itemsCount`,
  // which only acts as a fallback when the count is unknown.
  const itemsCount = loadingChildrenCount > 0 ? Math.min(loadingChildrenCount, _RichTreeViewLoading.MAX_LOADING_ITEMS_COUNT) : (0, _RichTreeViewLoading.getLoadingItemsCount)(loadingProps.itemsCount);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichTreeViewLoading.RichTreeViewLoadingContext, {
    store: store,
    itemDepth: itemDepth + 1,
    children: Loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Loading, (0, _extends2.default)({}, loadingProps, {
      itemsCount: itemsCount
    })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichTreeViewLoading.RichTreeViewItemLoaders, {
      classes: classes,
      slots: {
        itemLoader: styleSlots.itemLoader
      },
      slotProps: {
        itemLoader: styleSlotProps.itemLoader
      },
      itemsCount: itemsCount
    })
  });
}
const RichTreeViewItem = exports.RichTreeViewItem = /*#__PURE__*/React.memo(function RichTreeViewItem({
  itemSlot,
  itemSlotProps,
  itemId,
  skipChildren
}) {
  const renderItemForRichTreeView = React.useContext(RichTreeViewItemsContext);
  const {
    store
  } = (0, _TreeViewProvider.useTreeViewContext)();
  const itemMeta = (0, _store.useStore)(store, _items.itemsSelectors.itemMeta, itemId);
  const children = (0, _store.useStore)(store, skipChildren ? selectorNoChildren : _items.itemsSelectors.itemOrderedChildrenIds, itemId);
  const isLoadingChildren = (0, _store.useStore)(store, _lazyLoading.lazyLoadingSelectors.isItemLoading, itemId);
  const Item = itemSlot ?? _TreeItem.TreeItem;
  const _useSlotProps = (0, _useSlotProps2.default)({
      elementType: Item,
      externalSlotProps: itemSlotProps,
      additionalProps: {
        label: itemMeta?.label,
        id: itemMeta?.idAttribute,
        itemId
      },
      ownerState: {
        itemId,
        label: itemMeta?.label
      }
    }),
    itemProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
  let renderedChildren = renderItemForRichTreeView ? children?.map(renderItemForRichTreeView) : null;
  if (isLoadingChildren && !skipChildren && (children == null || children.length === 0)) {
    renderedChildren = /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItemLoadingChildren, {
      itemId: itemId
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, (0, _extends2.default)({}, itemProps, {
    children: renderedChildren
  }));
}, _fastObjectShallowCompare.fastObjectShallowCompare);
if (process.env.NODE_ENV !== "production") RichTreeViewItem.displayName = "RichTreeViewItem";
function RichTreeViewItems(props) {
  const {
    slots,
    slotProps,
    ownerState,
    forwardedProps,
    rootRef
  } = props;
  const {
    store
  } = (0, _TreeViewProvider.useTreeViewContext)();
  const {
    classes
  } = (0, _TreeViewProvider.useTreeViewStyleContext)();
  const itemSlot = slots?.item;
  const itemSlotProps = slotProps?.item;
  const domStructure = (0, _store.useStore)(store, _items.itemsSelectors.domStructure);
  const items = (0, _store.useStore)(store, domStructure === 'flat' ? _expansion.expansionSelectors.flatList : selectorChildrenIdsNull);
  const getRootProps = (0, _useTreeViewRootProps.useTreeViewRootProps)(store, forwardedProps, rootRef);
  const Root = slots.root;
  const rootProps = (0, _useSlotProps2.default)({
    elementType: Root,
    externalSlotProps: slotProps?.root,
    className: classes.root,
    getSlotProps: getRootProps,
    ownerState
  });
  const skipChildren = domStructure === 'flat';
  const renderItem = React.useCallback(itemId => {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItem, {
      itemSlot: itemSlot,
      itemSlotProps: itemSlotProps,
      itemId: itemId,
      skipChildren: skipChildren
    }, itemId);
  }, [itemSlot, itemSlotProps, skipChildren]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItemsContext.Provider, {
    value: renderItem,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
      children: items.map(renderItem)
    }))
  });
}