@mui/x-tree-view 8.22.0 → 8.24.0

package/internals/plugins/focus/TreeViewFocusPlugin.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewFocusPlugin = void 0;
+var _expansion = require("../expansion");
+var _selectors = require("./selectors");
+var _items = require("../items");
+class TreeViewFocusPlugin {
+  // We can't type `store`, otherwise we get the following TS error:
+  // 'focus' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+  constructor(store) {
+    this.store = store;
+
+    // Whenever the items change, we need to ensure the focused item is still present.
+    this.store.registerStoreEffect(_items.itemsSelectors.itemMetaLookup, () => {
+      const focusedItemId = _selectors.focusSelectors.focusedItemId(store.state);
+      if (focusedItemId == null) {
+        return;
+      }
+      const hasItemBeenRemoved = !_items.itemsSelectors.itemMeta(store.state, focusedItemId);
+      if (!hasItemBeenRemoved) {
+        return;
+      }
+      const defaultFocusableItemId = _selectors.focusSelectors.defaultFocusableItemId(store.state);
+      if (defaultFocusableItemId == null) {
+        this.setFocusedItemId(null);
+        return;
+      }
+      this.applyItemFocus(null, defaultFocusableItemId);
+    });
+  }
+  setFocusedItemId = itemId => {
+    const focusedItemId = _selectors.focusSelectors.focusedItemId(this.store.state);
+    if (focusedItemId === itemId) {
+      return;
+    }
+    this.store.set('focusedItemId', itemId);
+  };
+  applyItemFocus = (event, itemId) => {
+    this.store.items.getItemDOMElement(itemId)?.focus();
+    this.setFocusedItemId(itemId);
+    this.store.parameters.onItemFocus?.(event, itemId);
+  };
+  buildPublicAPI = () => {
+    return {
+      focusItem: this.focusItem
+    };
+  };
+
+  /**
+   * Focus the item with the given id.
+   *
+   * If the item is the child of a collapsed item, then this method will do nothing.
+   * Make sure to expand the ancestors of the item before calling this method if needed.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item to focus.
+   */
+  focusItem = (event, itemId) => {
+    // If we receive an itemId, and it is visible, the focus will be set to it
+    const itemMeta = _items.itemsSelectors.itemMeta(this.store.state, itemId);
+    const isItemVisible = itemMeta && (itemMeta.parentId == null || _expansion.expansionSelectors.isItemExpanded(this.store.state, itemMeta.parentId));
+    if (isItemVisible) {
+      this.applyItemFocus(event, itemId);
+    }
+  };
+
+  /**
+   * Remove the focus from the currently focused item (both from the internal state and the DOM).
+   */
+  removeFocusedItem = () => {
+    const focusedItemId = _selectors.focusSelectors.focusedItemId(this.store.state);
+    if (focusedItemId == null) {
+      return;
+    }
+    const itemMeta = _items.itemsSelectors.itemMeta(this.store.state, focusedItemId);
+    if (itemMeta) {
+      const itemElement = this.store.items.getItemDOMElement(focusedItemId);
+      if (itemElement) {
+        itemElement.blur();
+      }
+    }
+    this.setFocusedItemId(null);
+  };
+
+  /**
+   * Event handler to fire when the `root` slot of the Tree View is focused.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   */
+  handleRootFocus = event => {
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+
+    // if the event bubbled (which is React specific) we don't want to steal focus
+    const defaultFocusableItemId = _selectors.focusSelectors.defaultFocusableItemId(this.store.state);
+    if (event.target === event.currentTarget && defaultFocusableItemId != null) {
+      this.applyItemFocus(event, defaultFocusableItemId);
+    }
+  };
+
+  /**
+   * Event handler to fire when the `root` slot of the Tree View is blurred.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   */
+  handleRootBlur = event => {
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    this.setFocusedItemId(null);
+  };
+}
+exports.TreeViewFocusPlugin = TreeViewFocusPlugin;

package/internals/plugins/focus/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TreeViewFocusPlugin.js";
+export * from "./selectors.js";

package/internals/plugins/focus/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TreeViewFocusPlugin = require("./TreeViewFocusPlugin");
+Object.keys(_TreeViewFocusPlugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeViewFocusPlugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeViewFocusPlugin[key];
+    }
+  });
+});
+var _selectors = require("./selectors");
+Object.keys(_selectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectors[key];
+    }
+  });
+});

package/internals/plugins/focus/selectors.d.ts

@@ -0,0 +1,21 @@
+import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
+export declare const focusSelectors: {
+  /**
+   * Gets the item that should be sequentially focusable (usually with the Tab key).
+   * At any point in time, there is a single item that can be sequentially focused in the Tree View.
+   * This item is the first selected item (that is both visible and navigable), if any, or the first navigable item if no item is selected.
+   */
+  defaultFocusableItemId: (args_0: MinimalTreeViewState<any, any>) => any;
+  /**
+   * Checks whether an item is the default focusable item.
+   */
+  isItemTheDefaultFocusableItem: (args_0: MinimalTreeViewState<any, any>, itemId: any) => boolean;
+  /**
+   * Gets the id of the item that is currently focused.
+   */
+  focusedItemId: (state: MinimalTreeViewState<any, any>) => string | null;
+  /**
+   * Checks whether an item is focused.
+   */
+  isItemFocused: (state: MinimalTreeViewState<any, any>, itemId: string) => boolean;
+};

package/internals/plugins/{useTreeViewFocus/useTreeViewFocus.selectors.js → focus/selectors.js}

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.focusSelectors = void 0;
 var _store = require("@mui/x-internals/store");
-var _useTreeViewSelection = require("../useTreeViewSelection/useTreeViewSelection.selectors");
-var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
-var _useTreeViewItems2 = require("../useTreeViewItems/useTreeViewItems.utils");
-var _useTreeViewExpansion = require("../useTreeViewExpansion/useTreeViewExpansion.selectors");
-const defaultFocusableItemIdSelector = (0, _store.createSelectorMemoized)(_useTreeViewSelection.selectionSelectors.selectedItems, _useTreeViewExpansion.expansionSelectors.expandedItemsMap, _useTreeViewItems.itemsSelectors.itemMetaLookup, _useTreeViewItems.itemsSelectors.disabledItemFocusable, state => _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, null), (selectedItems, expandedItemsMap, itemMetaLookup, disabledItemsFocusable, orderedRootItemIds) => {
+var _selectors = require("../selection/selectors");
+var _selectors2 = require("../items/selectors");
+var _utils = require("../items/utils");
+var _selectors3 = require("../expansion/selectors");
+const defaultFocusableItemIdSelector = (0, _store.createSelectorMemoized)(_selectors.selectionSelectors.selectedItems, _selectors3.expansionSelectors.expandedItemsMap, _selectors2.itemsSelectors.itemMetaLookup, _selectors2.itemsSelectors.disabledItemFocusable, state => _selectors2.itemsSelectors.itemOrderedChildrenIds(state, null), (selectedItems, expandedItemsMap, itemMetaLookup, disabledItemsFocusable, orderedRootItemIds) => {
   const firstSelectedItem = selectedItems.find(itemId => {
-    if (!disabledItemsFocusable && (0, _useTreeViewItems2.isItemDisabled)(itemMetaLookup, itemId)) {
+    if (!disabledItemsFocusable && (0, _utils.isItemDisabled)(itemMetaLookup, itemId)) {
       return false;
     }
     const itemMeta = itemMetaLookup[itemId];
@@ -20,7 +20,7 @@ const defaultFocusableItemIdSelector = (0, _store.createSelectorMemoized)(_useTr
   if (firstSelectedItem != null) {
     return firstSelectedItem;
   }
-  const firstNavigableItem = orderedRootItemIds.find(itemId => disabledItemsFocusable || !(0, _useTreeViewItems2.isItemDisabled)(itemMetaLookup, itemId));
+  const firstNavigableItem = orderedRootItemIds.find(itemId => disabledItemsFocusable || !(0, _utils.isItemDisabled)(itemMetaLookup, itemId));
   if (firstNavigableItem != null) {
     return firstNavigableItem;
   }
@@ -40,9 +40,9 @@ const focusSelectors = exports.focusSelectors = {
   /**
    * Gets the id of the item that is currently focused.
    */
-  focusedItemId: (0, _store.createSelector)(state => state.focus.focusedItemId),
+  focusedItemId: (0, _store.createSelector)(state => state.focusedItemId),
   /**
    * Checks whether an item is focused.
    */
-  isItemFocused: (0, _store.createSelector)((state, itemId) => state.focus.focusedItemId === itemId)
+  isItemFocused: (0, _store.createSelector)((state, itemId) => state.focusedItemId === itemId)
 };

package/internals/plugins/id/index.d.ts

@@ -0,0 +1 @@
+export * from "./selectors.js";

package/internals/plugins/id/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _selectors = require("./selectors");
+Object.keys(_selectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectors[key];
+    }
+  });
+});

package/internals/plugins/id/selectors.d.ts

@@ -0,0 +1,13 @@
+import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
+export declare const idSelectors: {
+  /**
+   * Get the id attribute of the tree view.
+   */
+  treeId: (state: MinimalTreeViewState<any, any>) => string | undefined;
+  /**
+   * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a Tree Item.
+   * If the user explicitly defined an id attribute, it will be returned.
+   * Otherwise, the method creates a unique id for the item based on the Tree View id attribute and the item `itemId`
+   */
+  treeItemIdAttribute: (args_0: MinimalTreeViewState<any, any>, itemId: string, providedIdAttribute: string | undefined) => string;
+};

package/internals/plugins/id/selectors.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.idSelectors = void 0;
+var _store = require("@mui/x-internals/store");
+const idSelectors = exports.idSelectors = {
+  /**
+   * Get the id attribute of the tree view.
+   */
+  treeId: (0, _store.createSelector)(state => state.treeId),
+  /**
+   * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a Tree Item.
+   * If the user explicitly defined an id attribute, it will be returned.
+   * Otherwise, the method creates a unique id for the item based on the Tree View id attribute and the item `itemId`
+   */
+  treeItemIdAttribute: (0, _store.createSelector)(state => state.treeId, (treeId, itemId, providedIdAttribute) => {
+    if (providedIdAttribute != null) {
+      return providedIdAttribute;
+    }
+    return `${treeId ?? ''}-${itemId}`;
+  })
+};

package/internals/plugins/items/TreeViewItemsPlugin.d.ts

@@ -0,0 +1,105 @@
+import { TreeViewItemId, TreeViewValidItem } from "../../../models/index.js";
+import { MinimalTreeViewParameters } from "../../MinimalTreeViewStore/MinimalTreeViewStore.types.js";
+export declare class TreeViewItemsPlugin<R extends TreeViewValidItem<R>> {
+  private store;
+  constructor(store: any);
+  /**
+   * Determines if the items state should be rebuilt based on the new and previous parameters.
+   */
+  static shouldRebuildItemsState: <R2 extends TreeViewValidItem<R2>>(newParameters: MinimalTreeViewParameters<R2, any>, previousParameters: MinimalTreeViewParameters<R2, any>) => boolean;
+  /**
+   * Builds the state properties derived from the `items` prop.
+   */
+  static buildItemsStateIfNeeded: <R2 extends TreeViewValidItem<R2>>(parameters: Pick<MinimalTreeViewParameters<R2, any>, "items" | "isItemDisabled" | "isItemSelectionDisabled" | "getItemId" | "getItemLabel" | "getItemChildren">) => {
+    itemMetaLookup: {
+      [itemId: string]: import("../../index.js").TreeViewItemMeta;
+    };
+    itemModelLookup: {
+      [itemId: string]: R2;
+    };
+    itemOrderedChildrenIdsLookup: {
+      [parentItemId: string]: string[];
+    };
+    itemChildrenIndexesLookup: {
+      [parentItemId: string]: {
+        [itemId: string]: number;
+      };
+    };
+  };
+  /**
+   * Get the item with the given id.
+   * When used in the Simple Tree View, it returns an object with the `id` and `label` properties.
+   * @param {TreeViewItemId} itemId The id of the item to retrieve.
+   * @returns {R} The item with the given id.
+   */
+  private getItem;
+  /**
+   * Get all the items in the same format as provided by `props.items`.
+   * @returns {R[]} The items in the tree.
+   */
+  private getItemTree;
+  /**
+   * Get the ids of a given item's children.
+   * Those ids are returned in the order they should be rendered.
+   * To get the root items, pass `null` as the `itemId`.
+   * @param {TreeViewItemId | null} itemId The id of the item to get the children of.
+   * @returns {TreeViewItemId[]} The ids of the item's children.
+   */
+  private getItemOrderedChildrenIds;
+  /** * Get the id of the parent item.
+   * @param {TreeViewItemId} itemId The id of the item to whose parentId we want to retrieve.
+   * @returns {TreeViewItemId | null} The id of the parent item.
+   */
+  private getParentId;
+  /**
+   * Toggle the disabled state of the item with the given id.
+   * @param {object} parameters The params of the method.
+   * @param {TreeViewItemId } parameters.itemId The id of the item to get the children of.
+   * @param {boolean } parameters.shouldBeDisabled true if the item should be disabled.
+   */
+  private setIsItemDisabled;
+  buildPublicAPI: () => {
+    getItem: (itemId: TreeViewItemId) => R;
+    getItemDOMElement: (itemId: TreeViewItemId) => HTMLElement | null;
+    getItemOrderedChildrenIds: (itemId: TreeViewItemId | null) => TreeViewItemId[];
+    getItemTree: () => R[];
+    getParentId: (itemId: TreeViewItemId) => TreeViewItemId | null;
+    setIsItemDisabled: ({
+      itemId,
+      shouldBeDisabled
+    }: {
+      itemId: TreeViewItemId;
+      shouldBeDisabled?: boolean;
+    }) => void;
+  };
+  /**
+   * Get the DOM element of the item with the given id.
+   * @param {TreeViewItemId} itemId The id of the item to get the DOM element of.
+   * @returns {HTMLElement | null} The DOM element of the item with the given id.
+   */
+  getItemDOMElement: (itemId: TreeViewItemId) => HTMLElement | null;
+  /**
+   * Add an array of items to the tree.
+   * @param {SetItemChildrenParameters<R>} args The items to add to the tree and information about their ancestors.
+   */
+  setItemChildren: ({
+    items,
+    parentId,
+    getChildrenCount
+  }: {
+    items: readonly R[];
+    parentId: TreeViewItemId | null;
+    getChildrenCount: (item: R) => number;
+  }) => void;
+  /**
+   * Remove the children of an item.
+   * @param {TreeViewItemId | null} parentId The id of the item to remove the children of.
+   */
+  removeChildren: (parentId: TreeViewItemId | null) => void;
+  /**
+   * Callback fired when the `content` slot of a given Tree Item is clicked.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item being clicked.
+   */
+  handleItemClick: (event: React.MouseEvent, itemId: TreeViewItemId) => void;
+}

package/internals/plugins/items/TreeViewItemsPlugin.js

@@ -0,0 +1,231 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewItemsPlugin = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _id = require("../id");
+var _selectors = require("./selectors");
+var _utils = require("./utils");
+class TreeViewItemsPlugin {
+  // We can't type `store`, otherwise we get the following TS error:
+  // 'items' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+  constructor(store) {
+    this.store = store;
+  }
+
+  /**
+   * Determines if the items state should be rebuilt based on the new and previous parameters.
+   */
+  static shouldRebuildItemsState = (newParameters, previousParameters) => {
+    return ['items', 'isItemDisabled', 'isItemSelectionDisabled', 'getItemId', 'getItemLabel', 'getItemChildren'].some(key => {
+      const typedKey = key;
+      return newParameters[typedKey] !== previousParameters[typedKey];
+    });
+  };
+
+  /**
+   * Builds the state properties derived from the `items` prop.
+   */
+  static buildItemsStateIfNeeded = parameters => {
+    const itemMetaLookup = {};
+    const itemModelLookup = {};
+    const itemOrderedChildrenIdsLookup = {};
+    const itemChildrenIndexesLookup = {};
+    function processSiblings(items, parentId, depth) {
+      const parentIdWithDefault = parentId ?? _utils.TREE_VIEW_ROOT_PARENT_ID;
+      const {
+        metaLookup,
+        modelLookup,
+        orderedChildrenIds,
+        childrenIndexes,
+        itemsChildren
+      } = (0, _utils.buildItemsLookups)({
+        storeParameters: parameters,
+        items,
+        parentId,
+        depth,
+        isItemExpandable: (item, children) => !!children && children.length > 0,
+        otherItemsMetaLookup: itemMetaLookup
+      });
+      Object.assign(itemMetaLookup, metaLookup);
+      Object.assign(itemModelLookup, modelLookup);
+      itemOrderedChildrenIdsLookup[parentIdWithDefault] = orderedChildrenIds;
+      itemChildrenIndexesLookup[parentIdWithDefault] = childrenIndexes;
+      for (const item of itemsChildren) {
+        processSiblings(item.children || [], item.id, depth + 1);
+      }
+    }
+    processSiblings(parameters.items, null, 0);
+    return {
+      itemMetaLookup,
+      itemModelLookup,
+      itemOrderedChildrenIdsLookup,
+      itemChildrenIndexesLookup
+    };
+  };
+
+  /**
+   * Get the item with the given id.
+   * When used in the Simple Tree View, it returns an object with the `id` and `label` properties.
+   * @param {TreeViewItemId} itemId The id of the item to retrieve.
+   * @returns {R} The item with the given id.
+   */
+  getItem = itemId => _selectors.itemsSelectors.itemModel(this.store.state, itemId);
+
+  /**
+   * Get all the items in the same format as provided by `props.items`.
+   * @returns {R[]} The items in the tree.
+   */
+  getItemTree = () => {
+    const getItemFromItemId = itemId => {
+      const item = _selectors.itemsSelectors.itemModel(this.store.state, itemId);
+      const itemToMutate = (0, _extends2.default)({}, item);
+      const newChildren = _selectors.itemsSelectors.itemOrderedChildrenIds(this.store.state, itemId);
+      if (newChildren.length > 0) {
+        itemToMutate.children = newChildren.map(getItemFromItemId);
+      } else {
+        delete itemToMutate.children;
+      }
+      return itemToMutate;
+    };
+    return _selectors.itemsSelectors.itemOrderedChildrenIds(this.store.state, null).map(getItemFromItemId);
+  };
+
+  /**
+   * Get the ids of a given item's children.
+   * Those ids are returned in the order they should be rendered.
+   * To get the root items, pass `null` as the `itemId`.
+   * @param {TreeViewItemId | null} itemId The id of the item to get the children of.
+   * @returns {TreeViewItemId[]} The ids of the item's children.
+   */
+  getItemOrderedChildrenIds = itemId => _selectors.itemsSelectors.itemOrderedChildrenIds(this.store.state, itemId);
+
+  /** * Get the id of the parent item.
+   * @param {TreeViewItemId} itemId The id of the item to whose parentId we want to retrieve.
+   * @returns {TreeViewItemId | null} The id of the parent item.
+   */
+  getParentId = itemId => {
+    const itemMeta = _selectors.itemsSelectors.itemMeta(this.store.state, itemId);
+    return itemMeta?.parentId || null;
+  };
+
+  /**
+   * Toggle the disabled state of the item with the given id.
+   * @param {object} parameters The params of the method.
+   * @param {TreeViewItemId } parameters.itemId The id of the item to get the children of.
+   * @param {boolean } parameters.shouldBeDisabled true if the item should be disabled.
+   */
+  setIsItemDisabled = ({
+    itemId,
+    shouldBeDisabled
+  }) => {
+    if (!this.store.state.itemMetaLookup[itemId]) {
+      return;
+    }
+    const itemMetaLookup = (0, _extends2.default)({}, this.store.state.itemMetaLookup);
+    itemMetaLookup[itemId] = (0, _extends2.default)({}, itemMetaLookup[itemId], {
+      disabled: shouldBeDisabled ?? !itemMetaLookup[itemId].disabled
+    });
+    this.store.set('itemMetaLookup', itemMetaLookup);
+  };
+  buildPublicAPI = () => {
+    return {
+      getItem: this.getItem,
+      getItemDOMElement: this.getItemDOMElement,
+      getItemOrderedChildrenIds: this.getItemOrderedChildrenIds,
+      getItemTree: this.getItemTree,
+      getParentId: this.getParentId,
+      setIsItemDisabled: this.setIsItemDisabled
+    };
+  };
+
+  /**
+   * Get the DOM element of the item with the given id.
+   * @param {TreeViewItemId} itemId The id of the item to get the DOM element of.
+   * @returns {HTMLElement | null} The DOM element of the item with the given id.
+   */
+  getItemDOMElement = itemId => {
+    const itemMeta = _selectors.itemsSelectors.itemMeta(this.store.state, itemId);
+    if (itemMeta == null) {
+      return null;
+    }
+    const idAttribute = _id.idSelectors.treeItemIdAttribute(this.store.state, itemId, itemMeta.idAttribute);
+    return document.getElementById(idAttribute);
+  };
+
+  /**
+   * Add an array of items to the tree.
+   * @param {SetItemChildrenParameters<R>} args The items to add to the tree and information about their ancestors.
+   */
+  setItemChildren = ({
+    items,
+    parentId,
+    getChildrenCount
+  }) => {
+    const parentIdWithDefault = parentId ?? _utils.TREE_VIEW_ROOT_PARENT_ID;
+    const parentDepth = parentId == null ? -1 : _selectors.itemsSelectors.itemDepth(this.store.state, parentId);
+    const {
+      metaLookup,
+      modelLookup,
+      orderedChildrenIds,
+      childrenIndexes
+    } = (0, _utils.buildItemsLookups)({
+      storeParameters: this.store.parameters,
+      items,
+      parentId,
+      depth: parentDepth + 1,
+      isItemExpandable: getChildrenCount ? item => getChildrenCount(item) !== 0 : () => false,
+      otherItemsMetaLookup: _selectors.itemsSelectors.itemMetaLookup(this.store.state)
+    });
+    this.store.update({
+      itemModelLookup: (0, _extends2.default)({}, this.store.state.itemModelLookup, modelLookup),
+      itemMetaLookup: (0, _extends2.default)({}, this.store.state.itemMetaLookup, metaLookup),
+      itemOrderedChildrenIdsLookup: (0, _extends2.default)({}, this.store.state.itemOrderedChildrenIdsLookup, {
+        [parentIdWithDefault]: orderedChildrenIds
+      }),
+      itemChildrenIndexesLookup: (0, _extends2.default)({}, this.store.state.itemChildrenIndexesLookup, {
+        [parentIdWithDefault]: childrenIndexes
+      })
+    });
+  };
+
+  /**
+   * Remove the children of an item.
+   * @param {TreeViewItemId | null} parentId The id of the item to remove the children of.
+   */
+  removeChildren = parentId => {
+    const itemMetaLookup = this.store.state.itemMetaLookup;
+    const newMetaMap = Object.keys(itemMetaLookup).reduce((acc, key) => {
+      const item = itemMetaLookup[key];
+      if (item.parentId === parentId) {
+        return acc;
+      }
+      return (0, _extends2.default)({}, acc, {
+        [item.id]: item
+      });
+    }, {});
+    const newItemOrderedChildrenIdsLookup = (0, _extends2.default)({}, this.store.state.itemOrderedChildrenIdsLookup);
+    const newItemChildrenIndexesLookup = (0, _extends2.default)({}, this.store.state.itemChildrenIndexesLookup);
+    const cleanId = parentId ?? _utils.TREE_VIEW_ROOT_PARENT_ID;
+    delete newItemChildrenIndexesLookup[cleanId];
+    delete newItemOrderedChildrenIdsLookup[cleanId];
+    this.store.update({
+      itemMetaLookup: newMetaMap,
+      itemOrderedChildrenIdsLookup: newItemOrderedChildrenIdsLookup,
+      itemChildrenIndexesLookup: newItemChildrenIndexesLookup
+    });
+  };
+
+  /**
+   * Callback fired when the `content` slot of a given Tree Item is clicked.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item being clicked.
+   */
+  handleItemClick = (event, itemId) => {
+    this.store.parameters.onItemClick?.(event, itemId);
+  };
+}
+exports.TreeViewItemsPlugin = TreeViewItemsPlugin;

package/internals/plugins/items/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./TreeViewItemsPlugin.js";
+export * from "./selectors.js";
+export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./utils.js";

package/internals/plugins/items/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  buildSiblingIndexes: true,
+  TREE_VIEW_ROOT_PARENT_ID: true
+};
+Object.defineProperty(exports, "TREE_VIEW_ROOT_PARENT_ID", {
+  enumerable: true,
+  get: function () {
+    return _utils.TREE_VIEW_ROOT_PARENT_ID;
+  }
+});
+Object.defineProperty(exports, "buildSiblingIndexes", {
+  enumerable: true,
+  get: function () {
+    return _utils.buildSiblingIndexes;
+  }
+});
+var _TreeViewItemsPlugin = require("./TreeViewItemsPlugin");
+Object.keys(_TreeViewItemsPlugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TreeViewItemsPlugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeViewItemsPlugin[key];
+    }
+  });
+});
+var _selectors = require("./selectors");
+Object.keys(_selectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _selectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectors[key];
+    }
+  });
+});
+var _utils = require("./utils");