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

The community edition of the MUI X Tree View components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useSelectionItemPlugin = void 0;
var _store = require("@base-ui/utils/store");
var _TreeViewProvider = require("../../TreeViewProvider");
var _selectors = require("../items/selectors");
var _selectors2 = require("./selectors");
const useSelectionItemPlugin = ({
  props
}) => {
  const {
    itemId
  } = props;
  const {
    store
  } = (0, _TreeViewProvider.useTreeViewContext)();
  const isCheckboxSelectionEnabled = (0, _store.useStore)(store, _selectors2.selectionSelectors.isCheckboxSelectionEnabled);
  const isFeatureEnabledForItem = (0, _store.useStore)(store, _selectors2.selectionSelectors.isFeatureEnabledForItem, itemId);
  const canItemBeSelected = (0, _store.useStore)(store, _selectors2.selectionSelectors.canItemBeSelected, itemId);
  const isItemDisabled = (0, _store.useStore)(store, _selectors.itemsSelectors.isItemDisabled, itemId);
  const isItemSelectable = (0, _store.useStore)(store, _selectors2.selectionSelectors.isItemSelectable, itemId);
  const selectionStatus = (0, _store.useStore)(store, _selectors2.selectionSelectors.itemSelectionStatus, itemId);
  const isItemSelected = (0, _store.useStore)(store, _selectors2.selectionSelectors.isItemSelected, itemId);

  // An item is "inherently not selectable" when disabled or excluded via isItemSelectionDisabled,
  // regardless of the global disableSelection flag. Such items must not have aria-checked.
  const isItemInherentlyNotSelectable = isItemDisabled || !isItemSelectable;
  return {
    propsEnhancers: {
      root: () => {
        // https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
        // `aria-checked` belongs to the tree variant with checkboxes; a tree without
        // checkboxes conveys selection through `aria-selected` instead.
        let value;
        if (isItemInherentlyNotSelectable) {
          // - if the tree contains nodes that are not selectable, the attribute is not present on those nodes.
          value = undefined;
        } else if (isCheckboxSelectionEnabled ? selectionStatus === 'selected' : isItemSelected) {
          // - each selected node has the attribute set to true.
          // Without checkboxes, only the selection model (not selection propagated from
          // descendants) decides `aria-selected`, so it stays in sync with the highlight.
          value = true;
        } else if (isCheckboxSelectionEnabled && selectionStatus === 'indeterminate') {
          value = 'mixed';
        } else if (!canItemBeSelected) {
          // disableSelection=true with an unselected item: the attribute is not present.
          value = undefined;
        } else {
          // - all nodes that are selectable but not selected have the attribute set to false.
          value = false;
        }
        return isCheckboxSelectionEnabled ? {
          'aria-checked': value,
          'aria-selected': undefined
        } :
        // aria-selected has no tri-state value, so an indeterminate item (a parent
        // with some but not all descendants selected) is reported as not selected.
        {
          'aria-checked': undefined,
          'aria-selected': value === 'mixed' ? false : value
        };
      },
      checkbox: ({
        externalEventHandlers,
        interactions
      }) => {
        const handleChange = event => {
          externalEventHandlers.onChange?.(event);
          if (event.defaultMuiPrevented) {
            return;
          }
          if (!_selectors2.selectionSelectors.canItemBeSelected(store.state, itemId)) {
            return;
          }
          interactions.handleCheckboxSelection(event);
        };
        return {
          tabIndex: -1,
          onChange: handleChange,
          visible: isCheckboxSelectionEnabled && isFeatureEnabledForItem,
          disabled: !canItemBeSelected,
          checked: selectionStatus === 'selected',
          indeterminate: selectionStatus === 'indeterminate'
        };
      }
    }
  };
};
exports.useSelectionItemPlugin = useSelectionItemPlugin;