@mui/x-tree-view 8.0.0-alpha.0 → 8.0.0-alpha.10

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

@@ -0,0 +1,180 @@
+import { TreeViewRootSelector } from '../../utils/selectors';
+import { UseTreeViewExpansionSignature } from './useTreeViewExpansion.types';
+/**
+ * Check if an item is expanded.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is expanded, `false` otherwise.
+ */
+export declare const selectorIsItemExpanded: ((state: any, itemId: string) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        expandedItemsMap: Map<string, true>;
+        expansionTrigger: "content" | "iconContainer";
+    }, resultFuncArgs_1: string) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        expandedItemsMap: Map<string, true>;
+        expansionTrigger: "content" | "iconContainer";
+    }, resultFuncArgs_1: string) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [TreeViewRootSelector<UseTreeViewExpansionSignature>, (_: any, itemId: string) => string];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if an item is expandable.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is expandable, `false` otherwise.
+ */
+export declare const selectorIsItemExpandable: ((state: any, itemId: string | null) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: import("../..").TreeViewItemMeta | null) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: import("../..").TreeViewItemMeta | null) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [((state: any, itemId: string | null) => import("../..").TreeViewItemMeta | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: {
+            [itemId: string]: import("../..").TreeViewItemMeta;
+        }, resultFuncArgs_1: string | null) => import("../..").TreeViewItemMeta | null;
+        memoizedResultFunc: ((resultFuncArgs_0: {
+            [itemId: string]: import("../..").TreeViewItemMeta;
+        }, resultFuncArgs_1: string | null) => import("../..").TreeViewItemMeta | null) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => import("../..").TreeViewItemMeta | null;
+        dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("../useTreeViewItems").UseTreeViewItemsState<import("../../..").TreeViewDefaultItemModelProperties> & Partial<{}> & {
+            cacheKey: import("../../models").TreeViewStateCacheKey;
+        }) => {
+            [itemId: string]: import("../..").TreeViewItemMeta;
+        }) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        } & {
+            resultFunc: (resultFuncArgs_0: {
+                disabledItemsFocusable: boolean;
+                itemModelLookup: {
+                    [itemId: string]: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
+                };
+                itemMetaLookup: {
+                    [itemId: string]: import("../..").TreeViewItemMeta;
+                };
+                itemOrderedChildrenIdsLookup: {
+                    [parentItemId: string]: string[];
+                };
+                itemChildrenIndexesLookup: {
+                    [parentItemId: string]: {
+                        [itemId: string]: number;
+                    };
+                };
+            }) => {
+                [itemId: string]: import("../..").TreeViewItemMeta;
+            };
+            memoizedResultFunc: ((resultFuncArgs_0: {
+                disabledItemsFocusable: boolean;
+                itemModelLookup: {
+                    [itemId: string]: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
+                };
+                itemMetaLookup: {
+                    [itemId: string]: import("../..").TreeViewItemMeta;
+                };
+                itemOrderedChildrenIdsLookup: {
+                    [parentItemId: string]: string[];
+                };
+                itemChildrenIndexesLookup: {
+                    [parentItemId: string]: {
+                        [itemId: string]: number;
+                    };
+                };
+            }) => {
+                [itemId: string]: import("../..").TreeViewItemMeta;
+            }) & {
+                clearCache: () => void;
+                resultsCount: () => number;
+                resetResultsCount: () => void;
+            };
+            lastResult: () => {
+                [itemId: string]: import("../..").TreeViewItemMeta;
+            };
+            dependencies: [TreeViewRootSelector<import("../useTreeViewItems").UseTreeViewItemsSignature>];
+            recomputations: () => number;
+            resetRecomputations: () => void;
+            dependencyRecomputations: () => number;
+            resetDependencyRecomputations: () => void;
+        } & {
+            argsMemoize: typeof import("reselect").weakMapMemoize;
+            memoize: typeof import("reselect").weakMapMemoize;
+        }, (_: any, itemId: string | null) => string | null];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Get the slot that triggers the item's expansion when clicked.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {'content' | 'iconContainer'} The slot that triggers the item's expansion when clicked. Is `null` if the item is not expandable.
+ */
+export declare const selectorItemExpansionTrigger: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewExpansion.types").UseTreeViewExpansionState & Partial<{}> & {
+    cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => "content" | "iconContainer") & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        expandedItemsMap: Map<string, true>;
+        expansionTrigger: "content" | "iconContainer";
+    }) => "content" | "iconContainer";
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        expandedItemsMap: Map<string, true>;
+        expansionTrigger: "content" | "iconContainer";
+    }) => "content" | "iconContainer") & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => "content" | "iconContainer";
+    dependencies: [TreeViewRootSelector<UseTreeViewExpansionSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js

@@ -0,0 +1,24 @@
+import { createSelector } from "../../utils/selectors.js";
+import { selectorItemMeta } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+const selectorExpansion = state => state.expansion;
+
+/**
+ * Check if an item is expanded.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is expanded, `false` otherwise.
+ */
+export const selectorIsItemExpanded = createSelector([selectorExpansion, (_, itemId) => itemId], (expansionState, itemId) => expansionState.expandedItemsMap.has(itemId));
+
+/**
+ * Check if an item is expandable.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is expandable, `false` otherwise.
+ */
+export const selectorIsItemExpandable = createSelector([selectorItemMeta], itemMeta => itemMeta?.expandable ?? false);
+
+/**
+ * Get the slot that triggers the item's expansion when clicked.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {'content' | 'iconContainer'} The slot that triggers the item's expansion when clicked. Is `null` if the item is not expandable.
+ */
+export const selectorItemExpansionTrigger = createSelector([selectorExpansion], expansionState => expansionState.expansionTrigger);

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts

@@ -14,20 +14,6 @@ export interface UseTreeViewExpansionPublicAPI {
     setItemExpansion: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
 }
 export interface UseTreeViewExpansionInstance extends UseTreeViewExpansionPublicAPI {
-    /**
-     * Check if an item is expanded.
-     * @param {TreeViewItemId} itemId The id of the item to check.
-     * @returns {boolean} `true` if the item is expanded, `false` otherwise.
-     */
-    isItemExpanded: (itemId: TreeViewItemId) => boolean;
-    /**
-     * Check if an item is expandable.
-     * Currently, an item is expandable if it has children.
-     * In the future, the user should be able to flag an item as expandable even if it has no loaded children to support children lazy loading.
-     * @param {TreeViewItemId} itemId The id of the item to check.
-     * @returns {boolean} `true` if the item can be expanded, `false` otherwise.
-     */
-    isItemExpandable: (itemId: TreeViewItemId) => boolean;
     /**
      * Toggle the current expansion of an item.
      * If it is expanded, it will be collapsed, and vice versa.
@@ -74,8 +60,11 @@ export interface UseTreeViewExpansionParameters {
     expansionTrigger?: 'content' | 'iconContainer';
 }
 export type UseTreeViewExpansionDefaultizedParameters = DefaultizedProps<UseTreeViewExpansionParameters, 'defaultExpandedItems'>;
-interface UseTreeViewExpansionContextValue {
-    expansion: Pick<UseTreeViewExpansionParameters, 'expansionTrigger'>;
+export interface UseTreeViewExpansionState {
+    expansion: {
+        expandedItemsMap: Map<string, true>;
+        expansionTrigger: 'content' | 'iconContainer';
+    };
 }
 export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
     params: UseTreeViewExpansionParameters;
@@ -83,8 +72,7 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
     instance: UseTreeViewExpansionInstance;
     publicAPI: UseTreeViewExpansionPublicAPI;
     modelNames: 'expandedItems';
-    contextValue: UseTreeViewExpansionContextValue;
+    state: UseTreeViewExpansionState;
     dependencies: [UseTreeViewItemsSignature];
     optionalDependencies: [UseTreeViewLabelSignature];
 }>;
-export {};

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.d.ts

@@ -0,0 +1,4 @@
+import { TreeViewUsedDefaultizedParams } from '../../models';
+import { UseTreeViewExpansionSignature } from './useTreeViewExpansion.types';
+export declare const createExpandedItemsMap: (expandedItems: string[]) => Map<string, true>;
+export declare const getExpansionTrigger: ({ isItemEditable, expansionTrigger, }: Pick<TreeViewUsedDefaultizedParams<UseTreeViewExpansionSignature>, "isItemEditable" | "expansionTrigger">) => "content" | "iconContainer";

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.js

@@ -0,0 +1,19 @@
+export const createExpandedItemsMap = expandedItems => {
+  const expandedItemsMap = new Map();
+  expandedItems.forEach(id => {
+    expandedItemsMap.set(id, true);
+  });
+  return expandedItemsMap;
+};
+export const getExpansionTrigger = ({
+  isItemEditable,
+  expansionTrigger
+}) => {
+  if (expansionTrigger) {
+    return expansionTrigger;
+  }
+  if (isItemEditable) {
+    return 'iconContainer';
+  }
+  return 'content';
+};

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -1,46 +1,56 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import ownerDocument from '@mui/utils/ownerDocument';
 import { useInstanceEventHandler } from "../../hooks/useInstanceEventHandler.js";
-import { getActiveElement } from "../../utils/utils.js";
 import { getFirstNavigableItem } from "../../utils/tree.js";
 import { convertSelectedItemsToArray } from "../useTreeViewSelection/useTreeViewSelection.utils.js";
-const useDefaultFocusableItemId = (instance, selectedItems) => {
-  let tabbableItemId = convertSelectedItemsToArray(selectedItems).find(itemId => {
-    if (!instance.isItemNavigable(itemId)) {
-      return false;
-    }
-    const itemMeta = instance.getItemMeta(itemId);
-    return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
-  });
-  if (tabbableItemId == null) {
-    tabbableItemId = getFirstNavigableItem(instance);
-  }
-  return tabbableItemId;
-};
+import { selectorDefaultFocusableItemId, selectorFocusedItemId } from "./useTreeViewFocus.selectors.js";
+import { selectorIsItemExpanded } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { selectorCanItemBeFocused, selectorItemMeta } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 export const useTreeViewFocus = ({
   instance,
   params,
-  state,
-  setState,
-  models,
-  rootRef
+  store,
+  models
 }) => {
-  const defaultFocusableItemId = useDefaultFocusableItemId(instance, models.selectedItems.value);
-  const setFocusedItemId = useEventCallback(itemId => {
-    const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedItemId) : itemId;
-    if (state.focusedItemId !== cleanItemId) {
-      setState(prevState => _extends({}, prevState, {
-        focusedItemId: cleanItemId
-      }));
+  React.useEffect(() => {
+    let defaultFocusableItemId = convertSelectedItemsToArray(models.selectedItems.value).find(itemId => {
+      if (!selectorCanItemBeFocused(store.value, itemId)) {
+        return false;
+      }
+      const itemMeta = selectorItemMeta(store.value, itemId);
+      return itemMeta && (itemMeta.parentId == null || selectorIsItemExpanded(store.value, itemMeta.parentId));
+    });
+    if (defaultFocusableItemId == null) {
+      defaultFocusableItemId = getFirstNavigableItem(store.value) ?? null;
     }
+    store.update(prevState => {
+      if (defaultFocusableItemId === prevState.focus.defaultFocusableItemId) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        focus: _extends({}, prevState.focus, {
+          defaultFocusableItemId
+        })
+      });
+    });
+  }, [store, models.selectedItems.value]);
+  const setFocusedItemId = useEventCallback(itemId => {
+    store.update(prevState => {
+      const focusedItemId = selectorFocusedItemId(prevState);
+      if (focusedItemId === itemId) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        focus: _extends({}, prevState.focus, {
+          focusedItemId: itemId
+        })
+      });
+    });
   });
-  const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current.contains(getActiveElement(ownerDocument(rootRef.current))), [rootRef]);
-  const isItemFocused = React.useCallback(itemId => state.focusedItemId === itemId && isTreeViewFocused(), [state.focusedItemId, isTreeViewFocused]);
   const isItemVisible = itemId => {
-    const itemMeta = instance.getItemMeta(itemId);
-    return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
+    const itemMeta = selectorItemMeta(store.value, itemId);
+    return itemMeta && (itemMeta.parentId == null || selectorIsItemExpanded(store.value, itemMeta.parentId));
   };
   const innerFocusItem = (event, itemId) => {
     const itemElement = instance.getItemDOMElement(itemId);
@@ -59,23 +69,25 @@ export const useTreeViewFocus = ({
     }
   });
   const removeFocusedItem = useEventCallback(() => {
-    if (state.focusedItemId == null) {
+    const focusedItemId = selectorFocusedItemId(store.value);
+    if (focusedItemId == null) {
       return;
     }
-    const itemMeta = instance.getItemMeta(state.focusedItemId);
+    const itemMeta = selectorItemMeta(store.value, focusedItemId);
     if (itemMeta) {
-      const itemElement = instance.getItemDOMElement(state.focusedItemId);
+      const itemElement = instance.getItemDOMElement(focusedItemId);
       if (itemElement) {
         itemElement.blur();
       }
     }
     setFocusedItemId(null);
   });
-  const canItemBeTabbed = itemId => itemId === defaultFocusableItemId;
   useInstanceEventHandler(instance, 'removeItem', ({
     id
   }) => {
-    if (state.focusedItemId === id) {
+    const focusedItemId = selectorFocusedItemId(store.value);
+    const defaultFocusableItemId = selectorDefaultFocusableItemId(store.value);
+    if (focusedItemId === id && defaultFocusableItemId != null) {
       innerFocusItem(null, defaultFocusableItemId);
     }
   });
@@ -86,27 +98,37 @@ export const useTreeViewFocus = ({
     }
 
     // if the event bubbled (which is React specific) we don't want to steal focus
-    if (event.target === event.currentTarget) {
+    const defaultFocusableItemId = selectorDefaultFocusableItemId(store.value);
+    if (event.target === event.currentTarget && defaultFocusableItemId != null) {
       innerFocusItem(event, defaultFocusableItemId);
     }
   };
+  const createRootHandleBlur = otherHandlers => event => {
+    otherHandlers.onBlur?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    setFocusedItemId(null);
+  };
   return {
     getRootProps: otherHandlers => ({
-      onFocus: createRootHandleFocus(otherHandlers)
+      onFocus: createRootHandleFocus(otherHandlers),
+      onBlur: createRootHandleBlur(otherHandlers)
     }),
     publicAPI: {
       focusItem
     },
     instance: {
-      isItemFocused,
-      canItemBeTabbed,
       focusItem,
       removeFocusedItem
     }
   };
 };
 useTreeViewFocus.getInitialState = () => ({
-  focusedItemId: null
+  focus: {
+    focusedItemId: null,
+    defaultFocusableItemId: null
+  }
 });
 useTreeViewFocus.params = {
   onItemFocus: true

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

@@ -0,0 +1,182 @@
+import { UseTreeViewFocusSignature } from './useTreeViewFocus.types';
+import { TreeViewRootSelector } from '../../utils/selectors';
+/**
+ * Get 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.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemId | null} The id of the item that should be sequentially focusable.
+ */
+export declare const selectorDefaultFocusableItemId: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewFocus.types").UseTreeViewFocusState & Partial<{}> & {
+    cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => string | null) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        focusedItemId: string | null;
+        defaultFocusableItemId: string | null;
+    }) => string | null;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        focusedItemId: string | null;
+        defaultFocusableItemId: string | null;
+    }) => string | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => string | null;
+    dependencies: [TreeViewRootSelector<UseTreeViewFocusSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if an item is the default focusable item.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is the default focusable item, `false` otherwise.
+ */
+export declare const selectorIsItemTheDefaultFocusableItem: ((state: any, itemId: string) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: string | null, resultFuncArgs_1: string) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: string | null, resultFuncArgs_1: string) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewFocus.types").UseTreeViewFocusState & Partial<{}> & {
+        cacheKey: import("../../models").TreeViewStateCacheKey;
+    }) => string | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: {
+            focusedItemId: string | null;
+            defaultFocusableItemId: string | null;
+        }) => string | null;
+        memoizedResultFunc: ((resultFuncArgs_0: {
+            focusedItemId: string | null;
+            defaultFocusableItemId: string | null;
+        }) => string | null) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => string | null;
+        dependencies: [TreeViewRootSelector<UseTreeViewFocusSignature>];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }, (_: any, itemId: string) => string];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Get the id of the item that is currently focused.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemId | null} The id of the item that is currently focused.
+ */
+export declare const selectorFocusedItemId: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewFocus.types").UseTreeViewFocusState & Partial<{}> & {
+    cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => string | null) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        focusedItemId: string | null;
+        defaultFocusableItemId: string | null;
+    }) => string | null;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        focusedItemId: string | null;
+        defaultFocusableItemId: string | null;
+    }) => string | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => string | null;
+    dependencies: [TreeViewRootSelector<UseTreeViewFocusSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if an item is focused.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is focused, `false` otherwise.
+ */
+export declare const selectorIsItemFocused: ((state: any, itemId: string) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: string | null, resultFuncArgs_1: string) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: string | null, resultFuncArgs_1: string) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewFocus.types").UseTreeViewFocusState & Partial<{}> & {
+        cacheKey: import("../../models").TreeViewStateCacheKey;
+    }) => string | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: {
+            focusedItemId: string | null;
+            defaultFocusableItemId: string | null;
+        }) => string | null;
+        memoizedResultFunc: ((resultFuncArgs_0: {
+            focusedItemId: string | null;
+            defaultFocusableItemId: string | null;
+        }) => string | null) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => string | null;
+        dependencies: [TreeViewRootSelector<UseTreeViewFocusSignature>];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }, (_: any, itemId: string) => string];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js

@@ -0,0 +1,34 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectorTreeViewFocusState = state => state.focus;
+
+/**
+ * Get 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.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemId | null} The id of the item that should be sequentially focusable.
+ */
+export const selectorDefaultFocusableItemId = createSelector(selectorTreeViewFocusState, focus => focus.defaultFocusableItemId);
+
+/**
+ * Check if an item is the default focusable item.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is the default focusable item, `false` otherwise.
+ */
+export const selectorIsItemTheDefaultFocusableItem = createSelector([selectorDefaultFocusableItemId, (_, itemId) => itemId], (defaultFocusableItemId, itemId) => defaultFocusableItemId === itemId);
+
+/**
+ * Get the id of the item that is currently focused.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemId | null} The id of the item that is currently focused.
+ */
+export const selectorFocusedItemId = createSelector(selectorTreeViewFocusState, focus => focus.focusedItemId);
+
+/**
+ * Check if an item is focused.
+ * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is focused, `false` otherwise.
+ */
+export const selectorIsItemFocused = createSelector([selectorFocusedItemId, (_, itemId) => itemId], (focusedItemId, itemId) => focusedItemId === itemId);