@mui/x-tree-view 8.23.0 → 8.24.0

package/internals/plugins/{useTreeViewItems/useTreeViewItems.utils.js → items/utils.js}

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TREE_VIEW_ROOT_PARENT_ID = void 0;
 exports.buildItemsLookups = buildItemsLookups;
-exports.buildItemsState = buildItemsState;
 exports.isItemDisabled = exports.buildSiblingIndexes = void 0;
 const TREE_VIEW_ROOT_PARENT_ID = exports.TREE_VIEW_ROOT_PARENT_ID = '__TREE_VIEW_ROOT_PARENT_ID__';
 const buildSiblingIndexes = siblings => {
@@ -48,53 +47,9 @@ const isItemDisabled = (itemMetaLookup, itemId) => {
   return false;
 };
 exports.isItemDisabled = isItemDisabled;
-function buildItemsState(parameters) {
-  const {
-    config,
-    items: itemsParam,
-    disabledItemsFocusable
-  } = parameters;
-  const itemMetaLookup = {};
-  const itemModelLookup = {};
-  const itemOrderedChildrenIdsLookup = {};
-  const itemChildrenIndexesLookup = {};
-  function processSiblings(items, parentId, depth) {
-    const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
-    const {
-      metaLookup,
-      modelLookup,
-      orderedChildrenIds,
-      childrenIndexes,
-      itemsChildren
-    } = buildItemsLookups({
-      config,
-      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(itemsParam, null, 0);
-  return {
-    disabledItemsFocusable,
-    itemMetaLookup,
-    itemModelLookup,
-    itemOrderedChildrenIdsLookup,
-    itemChildrenIndexesLookup,
-    domStructure: 'nested'
-  };
-}
 function buildItemsLookups(parameters) {
   const {
-    config,
+    storeParameters,
     items,
     parentId,
     depth,
@@ -106,7 +61,7 @@ function buildItemsLookups(parameters) {
   const orderedChildrenIds = [];
   const itemsChildren = [];
   const processItem = item => {
-    const id = config.getItemId ? config.getItemId(item) : item.id;
+    const id = storeParameters.getItemId ? storeParameters.getItemId(item) : item.id;
     checkId({
       id,
       parentId,
@@ -114,11 +69,11 @@ function buildItemsLookups(parameters) {
       itemMetaLookup: otherItemsMetaLookup,
       siblingsMetaLookup: metaLookup
     });
-    const label = config.getItemLabel ? config.getItemLabel(item) : item.label;
+    const label = storeParameters.getItemLabel ? storeParameters.getItemLabel(item) : item.label;
     if (label == null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'Alternatively, you can use the `getItemLabel` prop to specify a custom label for each item.', 'An item was provided without label in the `items` prop:', JSON.stringify(item)].join('\n'));
     }
-    const children = (config.getItemChildren ? config.getItemChildren(item) : item.children) || [];
+    const children = (storeParameters.getItemChildren ? storeParameters.getItemChildren(item) : item.children) || [];
     itemsChildren.push({
       id,
       children
@@ -130,8 +85,8 @@ function buildItemsLookups(parameters) {
       parentId,
       idAttribute: undefined,
       expandable: isItemExpandable(item, children),
-      disabled: config.isItemDisabled ? config.isItemDisabled(item) : false,
-      selectable: config.isItemSelectionDisabled ? !config.isItemSelectionDisabled(item) : true,
+      disabled: storeParameters.isItemDisabled ? storeParameters.isItemDisabled(item) : false,
+      selectable: storeParameters.isItemSelectionDisabled ? !storeParameters.isItemSelectionDisabled(item) : true,
       depth
     };
     orderedChildrenIds.push(id);

package/internals/plugins/{useTreeViewJSXItems/useTreeViewJSXItems.types.d.ts → jsxItems/TreeViewJSXItemsPlugin.d.ts}

@@ -1,8 +1,9 @@
-import { TreeViewItemMeta, TreeViewPluginSignature } from "../../models/index.js";
-import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
-import { UseTreeViewKeyboardNavigationSignature } from "../useTreeViewKeyboardNavigation/index.js";
 import { TreeViewItemId } from "../../../models/index.js";
-export interface UseTreeViewItemsInstance {
+import { TreeViewItemMeta } from "../../models/index.js";
+import type { SimpleTreeViewStore } from "../../SimpleTreeViewStore/index.js";
+export declare class TreeViewJSXItemsPlugin {
+  private store;
+  constructor(store: SimpleTreeViewStore<any>);
   /**
    * Insert a new item in the state from a Tree Item component.
    * @param {TreeViewItemMeta} item The meta-information of the item to insert.
@@ -24,12 +25,4 @@ export interface UseTreeViewItemsInstance {
    * @param {TreeViewItemId[]} orderedChildrenIds The ids of the item's children.
    */
   setJSXItemsOrderedChildrenIds: (parentId: TreeViewItemId | null, orderedChildrenIds: TreeViewItemId[]) => void;
-}
-export interface UseTreeViewJSXItemsParameters {}
-export interface UseTreeViewItemsParametersWithDefaults {}
-export type UseTreeViewJSXItemsSignature = TreeViewPluginSignature<{
-  params: UseTreeViewJSXItemsParameters;
-  paramsWithDefaults: UseTreeViewItemsParametersWithDefaults;
-  instance: UseTreeViewItemsInstance;
-  dependencies: [UseTreeViewItemsSignature, UseTreeViewKeyboardNavigationSignature];
-}>;
+}

package/internals/plugins/jsxItems/TreeViewJSXItemsPlugin.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewJSXItemsPlugin = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _items = require("../items");
+var _itemPlugin = require("./itemPlugin");
+class TreeViewJSXItemsPlugin {
+  constructor(store) {
+    this.store = store;
+    store.itemPluginManager.register(_itemPlugin.useJSXItemsItemPlugin, _itemPlugin.jsxItemsitemWrapper);
+  }
+
+  /**
+   * Insert a new item in the state from a Tree Item component.
+   * @param {TreeViewItemMeta} item The meta-information of the item to insert.
+   * @returns {() => void} A function to remove the item from the state.
+   */
+  insertJSXItem = item => {
+    if (this.store.state.itemMetaLookup[item.id] != null) {
+      throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${item.id}"`].join('\n'));
+    }
+    this.store.update({
+      itemMetaLookup: (0, _extends2.default)({}, this.store.state.itemMetaLookup, {
+        [item.id]: item
+      }),
+      // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
+      itemModelLookup: (0, _extends2.default)({}, this.store.state.itemModelLookup, {
+        [item.id]: {
+          id: item.id,
+          label: item.label ?? ''
+        }
+      })
+    });
+    return () => {
+      const newItemMetaLookup = (0, _extends2.default)({}, this.store.state.itemMetaLookup);
+      const newItemModelLookup = (0, _extends2.default)({}, this.store.state.itemModelLookup);
+      delete newItemMetaLookup[item.id];
+      delete newItemModelLookup[item.id];
+      this.store.update({
+        itemMetaLookup: newItemMetaLookup,
+        itemModelLookup: newItemModelLookup
+      });
+    };
+  };
+
+  /**
+   * Updates the `labelMap` to register the first character of the given item's label.
+   * This map is used to navigate the tree using type-ahead search.
+   * @param {TreeViewItemId} itemId The id of the item to map the label of.
+   * @param {string} label The item's label.
+   * @returns {() => void} A function to remove the item from the `labelMap`.
+   */
+  mapLabelFromJSX = (itemId, label) => {
+    this.store.keyboardNavigation.updateLabelMap(labelMap => {
+      labelMap[itemId] = label;
+      return labelMap;
+    });
+    return () => {
+      this.store.keyboardNavigation.updateLabelMap(labelMap => {
+        const newMap = (0, _extends2.default)({}, labelMap);
+        delete newMap[itemId];
+        return newMap;
+      });
+    };
+  };
+
+  /**
+   * Store the ids of a given item's children in the state.
+   * Those ids must be passed in the order they should be rendered.
+   * @param {TreeViewItemId | null} parentId The id of the item to store the children of.
+   * @param {TreeViewItemId[]} orderedChildrenIds The ids of the item's children.
+   */
+  setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
+    const parentIdWithDefault = parentId ?? _items.TREE_VIEW_ROOT_PARENT_ID;
+    this.store.update({
+      itemOrderedChildrenIdsLookup: (0, _extends2.default)({}, this.store.state.itemOrderedChildrenIdsLookup, {
+        [parentIdWithDefault]: orderedChildrenIds
+      }),
+      itemChildrenIndexesLookup: (0, _extends2.default)({}, this.store.state.itemChildrenIndexesLookup, {
+        [parentIdWithDefault]: (0, _items.buildSiblingIndexes)(orderedChildrenIds)
+      })
+    });
+  };
+}
+exports.TreeViewJSXItemsPlugin = TreeViewJSXItemsPlugin;

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

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

package/internals/plugins/jsxItems/index.js

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

package/internals/plugins/jsxItems/itemPlugin.d.ts

@@ -0,0 +1,4 @@
+import { TreeItemWrapper, TreeViewItemPlugin } from "../../models/index.js";
+import { SimpleTreeViewStore } from "../../SimpleTreeViewStore/index.js";
+export declare const useJSXItemsItemPlugin: TreeViewItemPlugin;
+export declare const jsxItemsitemWrapper: TreeItemWrapper<SimpleTreeViewStore<any>>;

package/internals/plugins/{useTreeViewJSXItems → jsxItems}/itemPlugin.js

@@ -5,23 +5,23 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTreeViewJSXItemsItemPlugin = void 0;
+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 _useTreeViewId = require("../../corePlugins/useTreeViewId");
-var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
-const useTreeViewJSXItemsItemPlugin = ({
+var _id = require("../id");
+var _jsxRuntime = require("react/jsx-runtime");
+const useJSXItemsItemPlugin = ({
   props,
   rootRef,
   contentRef
 }) => {
   const {
-    instance,
     store
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const {
@@ -44,23 +44,18 @@ const useTreeViewJSXItemsItemPlugin = ({
   const expandable = (0, _useTreeItemUtils.itemHasChildren)(children);
   const pluginContentRef = React.useRef(null);
   const handleContentRef = (0, _useMergedRefs.useMergedRefs)(pluginContentRef, contentRef);
-  const treeId = (0, _store.useStore)(store, _useTreeViewId.idSelectors.treeId);
+  const idAttribute = (0, _store.useStore)(store, _id.idSelectors.treeItemIdAttribute, itemId, id);
 
   // Prevent any flashing
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    const idAttribute = (0, _useTreeViewId2.generateTreeItemIdAttribute)({
-      itemId,
-      treeId,
-      id
-    });
     registerChild(idAttribute, itemId);
     return () => {
       unregisterChild(idAttribute);
       unregisterChild(idAttribute);
     };
-  }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
+  }, [store, registerChild, unregisterChild, idAttribute, itemId]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    return instance.insertJSXItem({
+    return store.jsxItems.insertJSXItem({
       id: itemId,
       idAttribute: id,
       parentId,
@@ -68,16 +63,34 @@ const useTreeViewJSXItemsItemPlugin = ({
       disabled,
       selectable: !disableSelection
     });
-  }, [instance, parentId, itemId, expandable, disabled, disableSelection, id]);
+  }, [store, parentId, itemId, expandable, disabled, disableSelection, id]);
   React.useEffect(() => {
     if (label) {
-      return instance.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
+      return store.jsxItems.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
     }
     return undefined;
-  }, [instance, itemId, label]);
+  }, [store, itemId, label]);
   return {
     contentRef: handleContentRef,
     rootRef
   };
 };
-exports.useTreeViewJSXItemsItemPlugin = useTreeViewJSXItemsItemPlugin;
+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";

package/internals/plugins/keyboardNavigation/TreeViewKeyboardNavigationPlugin.d.ts

@@ -0,0 +1,28 @@
+import { TreeViewCancellableEvent, TreeViewItemId } from "../../../models/index.js";
+type TreeViewLabelMap = {
+  [itemId: string]: string;
+};
+export declare class TreeViewKeyboardNavigationPlugin {
+  private store;
+  private labelMap;
+  private typeaheadQuery;
+  constructor(store: any);
+  private canToggleItemSelection;
+  private canToggleItemExpansion;
+  private getFirstItemMatchingTypeaheadQuery;
+  /**
+   * Updates the `labelMap` to add/remove the first character of some item's labels.
+   * This map is used to navigate the tree using type-ahead search.
+   * This method is only used by the `useTreeViewJSXItems` plugin, otherwise the updates are handled internally.
+   * @param {(map: TreeViewLabelMap) => TreeViewLabelMap} updater The function to update the map.
+   */
+  updateLabelMap: (callback: (labelMap: TreeViewLabelMap) => TreeViewLabelMap) => void;
+  /**
+   * Callback fired when a key is pressed on an item.
+   * Handles all the keyboard navigation logic.
+   * @param {React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent} event The keyboard event that triggered the callback.
+   * @param {TreeViewItemId} itemId The id of the item that the event was triggered on.
+   */
+  handleItemKeyDown: (event: React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent, itemId: TreeViewItemId) => Promise<void>;
+}
+export {};

package/internals/plugins/keyboardNavigation/TreeViewKeyboardNavigationPlugin.js

@@ -0,0 +1,313 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewKeyboardNavigationPlugin = void 0;
+var _expansion = require("../expansion");
+var _items = require("../items");
+var _labelEditing = require("../labelEditing");
+var _selectors = require("../selection/selectors");
+var _tree = require("../../utils/tree");
+const TYPEAHEAD_TIMEOUT = 500;
+class TreeViewKeyboardNavigationPlugin {
+  typeaheadQuery = '';
+
+  // We can't type `store`, otherwise we get the following TS error:
+  // 'keyboardNavigation' 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;
+    this.labelMap = createLabelMapFromItemMetaLookup(_items.itemsSelectors.itemMetaLookup(this.store.state));
+
+    // Whenever the itemMetaLookup changes, we need to regen the label map.
+    this.store.registerStoreEffect(_items.itemsSelectors.itemMetaLookup, (_, itemMetaLookup) => {
+      if (this.store.shouldIgnoreItemsStateUpdate()) {
+        return;
+      }
+      this.labelMap = createLabelMapFromItemMetaLookup(itemMetaLookup);
+    });
+  }
+  canToggleItemSelection = itemId => _selectors.selectionSelectors.canItemBeSelected(this.store.state, itemId);
+  canToggleItemExpansion = itemId => {
+    return !_items.itemsSelectors.isItemDisabled(this.store.state, itemId) && _expansion.expansionSelectors.isItemExpandable(this.store.state, itemId);
+  };
+  getFirstItemMatchingTypeaheadQuery = (itemId, newKey) => {
+    const getNextItem = itemIdToCheck => {
+      const nextItemId = (0, _tree.getNextNavigableItem)(this.store.state, itemIdToCheck);
+      // We reached the end of the tree, check from the beginning
+      if (nextItemId === null) {
+        return (0, _tree.getFirstNavigableItem)(this.store.state);
+      }
+      return nextItemId;
+    };
+    const getNextMatchingItemId = query => {
+      let matchingItemId = null;
+      const checkedItems = {};
+      // If query length > 1, first check if current item matches
+      let currentItemId = query.length > 1 ? itemId : getNextItem(itemId);
+      // The "!checkedItems[currentItemId]" condition avoids an infinite loop when there is no matching item.
+      while (matchingItemId == null && !checkedItems[currentItemId]) {
+        const itemLabel = this.labelMap[currentItemId];
+        if (itemLabel?.startsWith(query)) {
+          matchingItemId = currentItemId;
+        } else {
+          checkedItems[currentItemId] = true;
+          currentItemId = getNextItem(currentItemId);
+        }
+      }
+      return matchingItemId;
+    };
+    const cleanNewKey = newKey.toLowerCase();
+
+    // Try matching with accumulated query + new key
+    const concatenatedQuery = `${this.typeaheadQuery}${cleanNewKey}`;
+
+    // check if the entire typed query matches an item
+    const concatenatedQueryMatchingItemId = getNextMatchingItemId(concatenatedQuery);
+    if (concatenatedQueryMatchingItemId != null) {
+      this.typeaheadQuery = concatenatedQuery;
+      return concatenatedQueryMatchingItemId;
+    }
+    const newKeyMatchingItemId = getNextMatchingItemId(cleanNewKey);
+    if (newKeyMatchingItemId != null) {
+      this.typeaheadQuery = cleanNewKey;
+      return newKeyMatchingItemId;
+    }
+    this.typeaheadQuery = '';
+    return null;
+  };
+
+  /**
+   * Updates the `labelMap` to add/remove the first character of some item's labels.
+   * This map is used to navigate the tree using type-ahead search.
+   * This method is only used by the `useTreeViewJSXItems` plugin, otherwise the updates are handled internally.
+   * @param {(map: TreeViewLabelMap) => TreeViewLabelMap} updater The function to update the map.
+   */
+  updateLabelMap = callback => {
+    this.labelMap = callback(this.labelMap);
+  };
+
+  // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
+  /**
+   * Callback fired when a key is pressed on an item.
+   * Handles all the keyboard navigation logic.
+   * @param {React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent} event The keyboard event that triggered the callback.
+   * @param {TreeViewItemId} itemId The id of the item that the event was triggered on.
+   */
+  handleItemKeyDown = async (event, itemId) => {
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    if (event.altKey || (0, _tree.isTargetInDescendants)(event.target, event.currentTarget)) {
+      return;
+    }
+    const ctrlPressed = event.ctrlKey || event.metaKey;
+    const key = event.key;
+    const isMultiSelectEnabled = _selectors.selectionSelectors.isMultiSelectEnabled(this.store.state);
+
+    // eslint-disable-next-line default-case
+    switch (true) {
+      // Select the item when pressing "Space"
+      case key === ' ' && this.canToggleItemSelection(itemId):
+        {
+          event.preventDefault();
+          if (isMultiSelectEnabled && event.shiftKey) {
+            this.store.selection.expandSelectionRange(event, itemId);
+          } else {
+            this.store.selection.setItemSelection({
+              event,
+              itemId,
+              keepExistingSelection: isMultiSelectEnabled,
+              shouldBeSelected: undefined
+            });
+          }
+          break;
+        }
+
+      // If the focused item has children, we expand it.
+      // If the focused item has no children, we select it.
+      case key === 'Enter':
+        {
+          if (this.store.labelEditing?.setEditedItem && _labelEditing.labelSelectors.isItemEditable(this.store.state, itemId) && !_labelEditing.labelSelectors.isItemBeingEdited(this.store.state, itemId)) {
+            this.store.labelEditing.setEditedItem(itemId);
+          } else if (this.canToggleItemExpansion(itemId)) {
+            this.store.expansion.setItemExpansion({
+              event,
+              itemId
+            });
+            event.preventDefault();
+          } else if (this.canToggleItemSelection(itemId)) {
+            if (isMultiSelectEnabled) {
+              event.preventDefault();
+              this.store.selection.setItemSelection({
+                event,
+                itemId,
+                keepExistingSelection: true
+              });
+            } else if (!_selectors.selectionSelectors.isItemSelected(this.store.state, itemId)) {
+              this.store.selection.setItemSelection({
+                event,
+                itemId
+              });
+              event.preventDefault();
+            }
+          }
+          break;
+        }
+
+      // Focus the next focusable item
+      case key === 'ArrowDown':
+        {
+          const nextItem = (0, _tree.getNextNavigableItem)(this.store.state, itemId);
+          if (nextItem) {
+            event.preventDefault();
+            this.store.focus.focusItem(event, nextItem);
+
+            // Multi select behavior when pressing Shift + ArrowDown
+            // Toggles the selection state of the next item
+            if (isMultiSelectEnabled && event.shiftKey && this.canToggleItemSelection(nextItem)) {
+              this.store.selection.selectItemFromArrowNavigation(event, itemId, nextItem);
+            }
+          }
+          break;
+        }
+
+      // Focuses the previous focusable item
+      case key === 'ArrowUp':
+        {
+          const previousItem = (0, _tree.getPreviousNavigableItem)(this.store.state, itemId);
+          if (previousItem) {
+            event.preventDefault();
+            this.store.focus.focusItem(event, previousItem);
+
+            // Multi select behavior when pressing Shift + ArrowUp
+            // Toggles the selection state of the previous item
+            if (isMultiSelectEnabled && event.shiftKey && this.canToggleItemSelection(previousItem)) {
+              this.store.selection.selectItemFromArrowNavigation(event, itemId, previousItem);
+            }
+          }
+          break;
+        }
+
+      // If the focused item is expanded, we move the focus to its first child
+      // If the focused item is collapsed and has children, we expand it
+      case key === 'ArrowRight' && !this.store.parameters.isRtl || key === 'ArrowLeft' && this.store.parameters.isRtl:
+        {
+          if (ctrlPressed) {
+            return;
+          }
+          if (_expansion.expansionSelectors.isItemExpanded(this.store.state, itemId)) {
+            const nextItemId = (0, _tree.getNextNavigableItem)(this.store.state, itemId);
+            if (nextItemId) {
+              this.store.focus.focusItem(event, nextItemId);
+              event.preventDefault();
+            }
+          } else if (this.canToggleItemExpansion(itemId)) {
+            this.store.expansion.setItemExpansion({
+              event,
+              itemId
+            });
+            event.preventDefault();
+          }
+          break;
+        }
+
+      // If the focused item is expanded, we collapse it
+      // If the focused item is collapsed and has a parent, we move the focus to this parent
+      case key === 'ArrowLeft' && !this.store.parameters.isRtl || key === 'ArrowRight' && this.store.parameters.isRtl:
+        {
+          if (ctrlPressed) {
+            return;
+          }
+          if (this.canToggleItemExpansion(itemId) && _expansion.expansionSelectors.isItemExpanded(this.store.state, itemId)) {
+            this.store.expansion.setItemExpansion({
+              event,
+              itemId
+            });
+            event.preventDefault();
+          } else {
+            const parent = _items.itemsSelectors.itemParentId(this.store.state, itemId);
+            if (parent) {
+              this.store.focus.focusItem(event, parent);
+              event.preventDefault();
+            }
+          }
+          break;
+        }
+
+      // Focuses the first item in the tree
+      case key === 'Home':
+        {
+          // Multi select behavior when pressing Ctrl + Shift + Home
+          // Selects the focused item and all items up to the first item.
+          if (this.canToggleItemSelection(itemId) && isMultiSelectEnabled && ctrlPressed && event.shiftKey) {
+            this.store.selection.selectRangeFromStartToItem(event, itemId);
+          } else {
+            this.store.focus.focusItem(event, (0, _tree.getFirstNavigableItem)(this.store.state));
+          }
+          event.preventDefault();
+          break;
+        }
+
+      // Focuses the last item in the tree
+      case key === 'End':
+        {
+          // Multi select behavior when pressing Ctrl + Shirt + End
+          // Selects the focused item and all the items down to the last item.
+          if (this.canToggleItemSelection(itemId) && isMultiSelectEnabled && ctrlPressed && event.shiftKey) {
+            this.store.selection.selectRangeFromItemToEnd(event, itemId);
+          } else {
+            this.store.focus.focusItem(event, (0, _tree.getLastNavigableItem)(this.store.state));
+          }
+          event.preventDefault();
+          break;
+        }
+
+      // Expand all siblings that are at the same level as the focused item
+      case key === '*':
+        {
+          this.store.expansion.expandAllSiblings(event, itemId);
+          event.preventDefault();
+          break;
+        }
+
+      // Multi select behavior when pressing Ctrl + a
+      // Selects all the items
+      case String.fromCharCode(event.keyCode) === 'A' && ctrlPressed && isMultiSelectEnabled && _selectors.selectionSelectors.enabled(this.store.state):
+        {
+          this.store.selection.selectAllNavigableItems(event);
+          event.preventDefault();
+          break;
+        }
+
+      // Type-ahead
+      case !ctrlPressed && !event.shiftKey && isPrintableKey(key):
+        {
+          this.store.timeoutManager.clearTimeout('typeahead');
+          const matchingItem = this.getFirstItemMatchingTypeaheadQuery(itemId, key);
+          if (matchingItem != null) {
+            this.store.focus.focusItem(event, matchingItem);
+            event.preventDefault();
+          } else {
+            this.typeaheadQuery = '';
+          }
+          this.store.timeoutManager.startTimeout('typeahead', TYPEAHEAD_TIMEOUT, () => {
+            this.typeaheadQuery = '';
+          });
+          break;
+        }
+    }
+  };
+}
+exports.TreeViewKeyboardNavigationPlugin = TreeViewKeyboardNavigationPlugin;
+function isPrintableKey(string) {
+  return !!string && string.length === 1 && !!string.match(/\S/);
+}
+function createLabelMapFromItemMetaLookup(itemMetaLookup) {
+  const labelMap = {};
+  const processItem = item => {
+    labelMap[item.id] = item.label.toLowerCase();
+  };
+  Object.values(itemMetaLookup).forEach(processItem);
+  return labelMap;
+}

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

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