@mui/x-tree-view/hooks/useTreeItemUtils/useTreeItemUtils.js

The community edition of the MUI X Tree View components.

"use strict";
'use client';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useTreeItemUtils = exports.itemHasChildren = void 0;
var _store = require("@mui/x-internals/store");
var _TreeViewProvider = require("../../internals/TreeViewProvider");
var _useTreeViewLabel = require("../../internals/plugins/useTreeViewLabel");
var _plugins = require("../../internals/utils/plugins");
var _useTreeViewExpansion = require("../../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
var _useTreeViewFocus = require("../../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors");
var _useTreeViewItems = require("../../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
var _useTreeViewSelection = require("../../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors");
var _useTreeViewLazyLoading = require("../../internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors");
var _useTreeViewLabel2 = require("../../internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors");
/**
 * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
 */

/**
 * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
 */

const itemHasChildren = reactChildren => {
  if (Array.isArray(reactChildren)) {
    return reactChildren.length > 0 && reactChildren.some(itemHasChildren);
  }
  return Boolean(reactChildren);
};
exports.itemHasChildren = itemHasChildren;
const useTreeItemUtils = ({
  itemId,
  children
}) => {
  const {
    instance,
    store,
    publicAPI
  } = (0, _TreeViewProvider.useTreeViewContext)();
  const isItemExpandable = (0, _store.useStore)(store, _useTreeViewExpansion.expansionSelectors.isItemExpandable, itemId);
  const isLoading = (0, _store.useStore)(store, _useTreeViewLazyLoading.lazyLoadingSelectors.isItemLoading, itemId);
  const hasError = (0, _store.useStore)(store, _useTreeViewLazyLoading.lazyLoadingSelectors.itemHasError, itemId);
  const isExpandable = itemHasChildren(children) || isItemExpandable;
  const isExpanded = (0, _store.useStore)(store, _useTreeViewExpansion.expansionSelectors.isItemExpanded, itemId);
  const isFocused = (0, _store.useStore)(store, _useTreeViewFocus.focusSelectors.isItemFocused, itemId);
  const isSelected = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.isItemSelected, itemId);
  const isDisabled = (0, _store.useStore)(store, _useTreeViewItems.itemsSelectors.isItemDisabled, itemId);
  const isEditing = (0, _store.useStore)(store, _useTreeViewLabel2.labelSelectors.isItemBeingEdited, itemId);
  const isEditable = (0, _store.useStore)(store, _useTreeViewLabel2.labelSelectors.isItemEditable, itemId);
  const status = {
    expandable: isExpandable,
    expanded: isExpanded,
    focused: isFocused,
    selected: isSelected,
    disabled: isDisabled,
    editing: isEditing,
    editable: isEditable,
    loading: isLoading,
    error: hasError
  };
  const handleExpansion = event => {
    if (status.disabled) {
      return;
    }
    if (!status.focused) {
      instance.focusItem(event, itemId);
    }
    const multiple = _useTreeViewSelection.selectionSelectors.isMultiSelectEnabled(store.state) && (event.shiftKey || event.ctrlKey || event.metaKey);

    // If already expanded and trying to toggle selection don't close
    if (status.expandable && !(multiple && _useTreeViewExpansion.expansionSelectors.isItemExpanded(store.state, itemId))) {
      // make sure the children selection is propagated again
      instance.setItemExpansion({
        event,
        itemId
      });
    }
  };
  const handleSelection = event => {
    if (!_useTreeViewSelection.selectionSelectors.canItemBeSelected(store.state, itemId)) {
      return;
    }
    if (!status.focused && !status.editing) {
      instance.focusItem(event, itemId);
    }
    const multiple = _useTreeViewSelection.selectionSelectors.isMultiSelectEnabled(store.state) && (event.shiftKey || event.ctrlKey || event.metaKey);
    if (multiple) {
      if (event.shiftKey) {
        instance.expandSelectionRange(event, itemId);
      } else {
        instance.setItemSelection({
          event,
          itemId,
          keepExistingSelection: true
        });
      }
    } else {
      instance.setItemSelection({
        event,
        itemId,
        shouldBeSelected: true
      });
    }
  };
  const handleCheckboxSelection = event => {
    const hasShift = event.nativeEvent.shiftKey;
    const isMultiSelectEnabled = _useTreeViewSelection.selectionSelectors.isMultiSelectEnabled(store.state);
    if (isMultiSelectEnabled && hasShift) {
      instance.expandSelectionRange(event, itemId);
    } else {
      instance.setItemSelection({
        event,
        itemId,
        keepExistingSelection: isMultiSelectEnabled,
        shouldBeSelected: event.target.checked
      });
    }
  };
  const toggleItemEditing = () => {
    if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
      return;
    }
    if (isEditing) {
      instance.setEditedItem(null);
    } else {
      instance.setEditedItem(itemId);
    }
  };
  const handleSaveItemLabel = (event, newLabel) => {
    if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
      return;
    }

    // As a side effect of `instance.focusItem` called here and in `handleCancelItemLabelEditing` the `labelInput` is blurred
    // The `onBlur` event is triggered, which calls `handleSaveItemLabel` again.
    // To avoid creating an unwanted behavior we need to check if the item is being edited before calling `updateItemLabel`
    if (_useTreeViewLabel2.labelSelectors.isItemBeingEdited(store.state, itemId)) {
      instance.updateItemLabel(itemId, newLabel);
      toggleItemEditing();
      instance.focusItem(event, itemId);
    }
  };
  const handleCancelItemLabelEditing = event => {
    if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
      return;
    }
    if (_useTreeViewLabel2.labelSelectors.isItemBeingEdited(store.state, itemId)) {
      toggleItemEditing();
      instance.focusItem(event, itemId);
    }
  };
  const interactions = {
    handleExpansion,
    handleSelection,
    handleCheckboxSelection,
    toggleItemEditing,
    handleSaveItemLabel,
    handleCancelItemLabelEditing
  };
  return {
    interactions,
    status,
    publicAPI
  };
};
exports.useTreeItemUtils = useTreeItemUtils;