@mui/x-tree-view/internals/plugins/jsxItems/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.useJSXItemsItemPlugin = exports.jsxItemsitemWrapper = 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 _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
var _useTreeItemUtils = require("../../../hooks/useTreeItemUtils/useTreeItemUtils");
var _id = require("../id");
var _jsxRuntime = require("react/jsx-runtime");
const useJSXItemsItemPlugin = ({
  props,
  rootRef,
  contentRef
}) => {
  const {
    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 idAttribute = (0, _store.useStore)(store, _id.idSelectors.treeItemIdAttribute, itemId, id);

  // Prevent any flashing
  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
    registerChild(idAttribute, itemId);
    return () => {
      unregisterChild(idAttribute);
      unregisterChild(idAttribute);
    };
  }, [store, registerChild, unregisterChild, idAttribute, itemId]);
  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
    return store.jsxItems.insertJSXItem({
      id: itemId,
      idAttribute: id,
      parentId,
      expandable,
      disabled,
      selectable: !disableSelection
    });
  }, [store, parentId, itemId, expandable, disabled, disableSelection, id]);
  React.useEffect(() => {
    if (label) {
      return store.jsxItems.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
    }
    return undefined;
  }, [store, itemId, label]);
  return {
    contentRef: handleContentRef,
    rootRef
  };
};
exports.useJSXItemsItemPlugin = useJSXItemsItemPlugin;
const jsxItemsitemWrapper = ({
  children,
  itemId,
  idAttribute
}) => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewChildrenItemProvider.TreeViewChildrenItemProvider, {
    itemId: itemId,
    idAttribute: idAttribute,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
      value: depthContext + 1,
      children: children
    })
  });
};
exports.jsxItemsitemWrapper = jsxItemsitemWrapper;
if (process.env.NODE_ENV !== "production") jsxItemsitemWrapper.displayName = "jsxItemsitemWrapper";