@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;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useJSXItemsItemPlugin = exports.jsxItemsitemWrapper = void 0;
var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
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 _useRefWithInit = require("@base-ui/utils/useRefWithInit");
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(process.env.NODE_ENV !== "production" ? `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.` : (0, _formatErrorMessage2.default)(196));
  }
  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);
  const isMountedRef = React.useRef(true);
  const ownerTokenRef = (0, _useRefWithInit.useRefWithInit)(Symbol);

  // Prevent any flashing
  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
    registerChild(idAttribute, itemId);
    return () => {
      unregisterChild(idAttribute);
      unregisterChild(idAttribute);
    };
  }, [store, registerChild, unregisterChild, idAttribute, itemId]);
  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
    isMountedRef.current = true;
    return () => {
      isMountedRef.current = false;
    };
  }, []);
  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
    const remove = store.jsxItems.upsertJSXItem({
      id: itemId,
      idAttribute: id,
      parentId,
      expandable,
      disabled,
      selectable: !disableSelection
    }, ownerTokenRef.current);
    return () => {
      // Only remove the item if the component is unmounting, not if the dependencies are changing.
      if (!isMountedRef.current) {
        remove();
      }
    };
  }, [store, parentId, itemId, expandable, disabled, disableSelection, id, ownerTokenRef]);
  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";