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

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);

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

@@ -3,7 +3,6 @@ import { TreeViewPluginSignature } from '../../models';
 import type { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import type { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
-import { TreeViewItemId } from '../../../models';
 export interface UseTreeViewFocusPublicAPI {
     /**
      * Focus the item with the given id.
@@ -16,20 +15,6 @@ export interface UseTreeViewFocusPublicAPI {
     focusItem: (event: React.SyntheticEvent, itemId: string) => void;
 }
 export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
-    /**
-     * Check if an item is the currently focused item.
-     * @param {TreeViewItemId} itemId The id of the item to check.
-     * @returns {boolean} `true` if the item is focused, `false` otherwise.
-     */
-    isItemFocused: (itemId: TreeViewItemId) => boolean;
-    /**
-     * Check if an item 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 {TreeViewItemId} itemId The id of the item to check.
-     * @returns {boolean} `true` if the item can be sequentially focusable, `false` otherwise.
-     */
-    canItemBeTabbed: (itemId: TreeViewItemId) => boolean;
     /**
      * Remove the focus from the currently focused item (both from the internal state and the DOM).
      */
@@ -45,7 +30,10 @@ export interface UseTreeViewFocusParameters {
 }
 export type UseTreeViewFocusDefaultizedParameters = UseTreeViewFocusParameters;
 export interface UseTreeViewFocusState {
-    focusedItemId: string | null;
+    focus: {
+        focusedItemId: string | null;
+        defaultFocusableItemId: string | null;
+    };
 }
 export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
     params: UseTreeViewFocusParameters;

package/internals/plugins/useTreeViewIcons/useTreeViewIcons.js

@@ -1,22 +1,24 @@
+import * as React from 'react';
 export const useTreeViewIcons = ({
   slots,
   slotProps
 }) => {
-  return {
-    contextValue: {
-      icons: {
-        slots: {
-          collapseIcon: slots.collapseIcon,
-          expandIcon: slots.expandIcon,
-          endIcon: slots.endIcon
-        },
-        slotProps: {
-          collapseIcon: slotProps.collapseIcon,
-          expandIcon: slotProps.expandIcon,
-          endIcon: slotProps.endIcon
-        }
+  const pluginContextValue = React.useMemo(() => ({
+    icons: {
+      slots: {
+        collapseIcon: slots.collapseIcon,
+        expandIcon: slots.expandIcon,
+        endIcon: slots.endIcon
+      },
+      slotProps: {
+        collapseIcon: slotProps.collapseIcon,
+        expandIcon: slotProps.expandIcon,
+        endIcon: slotProps.endIcon
       }
     }
+  }), [slots.collapseIcon, slots.expandIcon, slots.endIcon, slotProps.collapseIcon, slotProps.expandIcon, slotProps.endIcon]);
+  return {
+    contextValue: pluginContextValue
   };
 };
 useTreeViewIcons.params = {};

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
+import { SlotComponentProps } from '@mui/utils/types';
 import { TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';

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

@@ -1,3 +1,3 @@
 export { useTreeViewItems } from './useTreeViewItems';
-export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, UseTreeViewItemsState, TreeViewItemToRenderProps, } from './useTreeViewItems.types';
+export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, UseTreeViewItemsState, } from './useTreeViewItems.types';
 export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './useTreeViewItems.utils';