@mui/x-tree-view/internals/plugins/useTreeViewJSXItems/itemPlugin.js

The community edition of the MUI X Tree View components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useTreeViewJSXItemsItemPlugin = void 0;
var React = _interopRequireWildcard(require("react"));
var _store = require("@mui/x-internals/store");
var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
var _TreeViewProvider = require("../../TreeViewProvider");
var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
var _useTreeItemUtils = require("../../../hooks/useTreeItemUtils/useTreeItemUtils");
var _useTreeViewId = require("../../corePlugins/useTreeViewId");
var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
const useTreeViewJSXItemsItemPlugin = ({
  props,
  rootRef,
  contentRef
}) => {
  const {
    instance,
    store
  } = (0, _TreeViewProvider.useTreeViewContext)();
  const {
    children,
    disabled = false,
    disableSelection = false,
    label,
    itemId,
    id
  } = props;
  const parentContext = React.useContext(_TreeViewChildrenItemProvider.TreeViewChildrenItemContext);
  if (parentContext == null) {
    throw new Error(['MUI X: Could not find the Tree View Children Item context.', 'It looks like you rendered your component outside of a SimpleTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
  }
  const {
    registerChild,
    unregisterChild,
    parentId
  } = parentContext;
  const expandable = (0, _useTreeItemUtils.itemHasChildren)(children);
  const pluginContentRef = React.useRef(null);
  const handleContentRef = (0, _useMergedRefs.useMergedRefs)(pluginContentRef, contentRef);
  const treeId = (0, _store.useStore)(store, _useTreeViewId.idSelectors.treeId);

  // Prevent any flashing
  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
    const idAttribute = (0, _useTreeViewId2.generateTreeItemIdAttribute)({
      itemId,
      treeId,
      id
    });
    registerChild(idAttribute, itemId);
    return () => {
      unregisterChild(idAttribute);
      unregisterChild(idAttribute);
    };
  }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
    return instance.insertJSXItem({
      id: itemId,
      idAttribute: id,
      parentId,
      expandable,
      disabled,
      selectable: !disableSelection
    });
  }, [instance, parentId, itemId, expandable, disabled, disableSelection, id]);
  React.useEffect(() => {
    if (label) {
      return instance.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
    }
    return undefined;
  }, [instance, itemId, label]);
  return {
    contentRef: handleContentRef,
    rootRef
  };
};
exports.useTreeViewJSXItemsItemPlugin = useTreeViewJSXItemsItemPlugin;