@mui/x-tree-view/internals/components/RichTreeViewItems.mjs

The community edition of the MUI X Tree View components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["ownerState"];
import * as React from 'react';
import { EMPTY_ARRAY } from '@base-ui/utils/empty';
import { useStore } from '@mui/x-internals/store';
import useSlotProps from '@mui/utils/useSlotProps';
import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
import { TreeItem } from "../../TreeItem/index.mjs";
import { itemsSelectors } from "../plugins/items/index.mjs";
import { useTreeViewContext, useTreeViewStyleContext } from "../TreeViewProvider/index.mjs";
import { expansionSelectors } from "../plugins/expansion/index.mjs";
import { useTreeViewRootProps } from "../hooks/useTreeViewRootProps.mjs";
import { jsx as _jsx } from "react/jsx-runtime";
const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
if (process.env.NODE_ENV !== "production") RichTreeViewItemsContext.displayName = "RichTreeViewItemsContext";
const selectorNoChildren = () => EMPTY_ARRAY;
const selectorChildrenIdsNull = state => itemsSelectors.itemOrderedChildrenIds(state, null);
export const RichTreeViewItem = /*#__PURE__*/React.memo(function RichTreeViewItem({
  itemSlot,
  itemSlotProps,
  itemId,
  skipChildren
}) {
  const renderItemForRichTreeView = React.useContext(RichTreeViewItemsContext);
  const {
    store
  } = useTreeViewContext();
  const itemMeta = useStore(store, itemsSelectors.itemMeta, itemId);
  const children = useStore(store, skipChildren ? selectorNoChildren : itemsSelectors.itemOrderedChildrenIds, itemId);
  const Item = itemSlot ?? TreeItem;
  const _useSlotProps = useSlotProps({
      elementType: Item,
      externalSlotProps: itemSlotProps,
      additionalProps: {
        label: itemMeta?.label,
        id: itemMeta?.idAttribute,
        itemId
      },
      ownerState: {
        itemId,
        label: itemMeta?.label
      }
    }),
    itemProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
  return /*#__PURE__*/_jsx(Item, _extends({}, itemProps, {
    children: renderItemForRichTreeView ? children?.map(renderItemForRichTreeView) : null
  }));
}, fastObjectShallowCompare);
if (process.env.NODE_ENV !== "production") RichTreeViewItem.displayName = "RichTreeViewItem";
export function RichTreeViewItems(props) {
  const {
    slots,
    slotProps,
    ownerState,
    forwardedProps,
    rootRef
  } = props;
  const {
    store
  } = useTreeViewContext();
  const {
    classes
  } = useTreeViewStyleContext();
  const itemSlot = slots?.item;
  const itemSlotProps = slotProps?.item;
  const domStructure = useStore(store, itemsSelectors.domStructure);
  const items = useStore(store, domStructure === 'flat' ? expansionSelectors.flatList : selectorChildrenIdsNull);
  const getRootProps = useTreeViewRootProps(store, forwardedProps, rootRef);
  const Root = slots.root;
  const rootProps = useSlotProps({
    elementType: Root,
    externalSlotProps: slotProps?.root,
    className: classes.root,
    getSlotProps: getRootProps,
    ownerState
  });
  const skipChildren = domStructure === 'flat';
  const renderItem = React.useCallback(itemId => {
    return /*#__PURE__*/_jsx(RichTreeViewItem, {
      itemSlot: itemSlot,
      itemSlotProps: itemSlotProps,
      itemId: itemId,
      skipChildren: skipChildren
    }, itemId);
  }, [itemSlot, itemSlotProps, skipChildren]);
  return /*#__PURE__*/_jsx(RichTreeViewItemsContext.Provider, {
    value: renderItem,
    children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
      children: items.map(renderItem)
    }))
  });
}