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

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -1,21 +1,23 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children"];
 import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { publishTreeViewEvent } from "../../utils/publishTreeViewEvent.js";
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
+import { selectorItemMeta, selectorItemOrderedChildrenIds, selectorItemModel, selectorItemDepth } from "./useTreeViewItems.selectors.js";
+import { selectorTreeViewId } from "../../corePlugins/useTreeViewId/useTreeViewId.selectors.js";
 import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const updateItemsState = ({
+  disabledItemsFocusable,
   items,
   isItemDisabled,
   getItemLabel,
   getItemId
 }) => {
-  const itemMetaMap = {};
-  const itemMap = {};
-  const itemOrderedChildrenIds = {
+  const itemMetaLookup = {};
+  const itemModelLookup = {};
+  const itemOrderedChildrenIdsLookup = {
     [TREE_VIEW_ROOT_PARENT_ID]: []
   };
   const processItem = (item, depth, parentId) => {
@@ -23,14 +25,14 @@ const updateItemsState = ({
     if (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.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
     }
-    if (itemMetaMap[id] != null) {
+    if (itemMetaLookup[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: "${id}"`].join('\n'));
     }
     const label = getItemLabel ? 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'));
     }
-    itemMetaMap[id] = {
+    itemMetaLookup[id] = {
       id,
       label,
       parentId,
@@ -39,88 +41,58 @@ const updateItemsState = ({
       disabled: isItemDisabled ? isItemDisabled(item) : false,
       depth
     };
-    itemMap[id] = item;
+    itemModelLookup[id] = item;
     const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
-    if (!itemOrderedChildrenIds[parentIdWithDefault]) {
-      itemOrderedChildrenIds[parentIdWithDefault] = [];
+    if (!itemOrderedChildrenIdsLookup[parentIdWithDefault]) {
+      itemOrderedChildrenIdsLookup[parentIdWithDefault] = [];
     }
-    itemOrderedChildrenIds[parentIdWithDefault].push(id);
+    itemOrderedChildrenIdsLookup[parentIdWithDefault].push(id);
     item.children?.forEach(child => processItem(child, depth + 1, id));
   };
   items.forEach(item => processItem(item, 0, null));
-  const itemChildrenIndexes = {};
-  Object.keys(itemOrderedChildrenIds).forEach(parentId => {
-    itemChildrenIndexes[parentId] = buildSiblingIndexes(itemOrderedChildrenIds[parentId]);
+  const itemChildrenIndexesLookup = {};
+  Object.keys(itemOrderedChildrenIdsLookup).forEach(parentId => {
+    itemChildrenIndexesLookup[parentId] = buildSiblingIndexes(itemOrderedChildrenIdsLookup[parentId]);
   });
   return {
-    itemMetaMap,
-    itemMap,
-    itemOrderedChildrenIds,
-    itemChildrenIndexes
+    disabledItemsFocusable,
+    itemMetaLookup,
+    itemModelLookup,
+    itemOrderedChildrenIdsLookup,
+    itemChildrenIndexesLookup
   };
 };
 export const useTreeViewItems = ({
   instance,
   params,
-  state,
-  setState
+  store
 }) => {
-  const getItemMeta = React.useCallback(itemId => state.items.itemMetaMap[itemId], [state.items.itemMetaMap]);
-  const getItem = React.useCallback(itemId => state.items.itemMap[itemId], [state.items.itemMap]);
+  const getItem = React.useCallback(itemId => selectorItemModel(store.value, itemId), [store]);
   const getItemTree = React.useCallback(() => {
-    const getItemFromItemId = id => {
-      const _state$items$itemMap$ = state.items.itemMap[id],
-        item = _objectWithoutPropertiesLoose(_state$items$itemMap$, _excluded);
-      const newChildren = state.items.itemOrderedChildrenIds[id];
-      if (newChildren) {
+    const getItemFromItemId = itemId => {
+      const item = selectorItemModel(store.value, itemId);
+      const newChildren = selectorItemOrderedChildrenIds(store.value, itemId);
+      if (newChildren.length > 0) {
         item.children = newChildren.map(getItemFromItemId);
+      } else {
+        delete item.children;
       }
       return item;
     };
-    return state.items.itemOrderedChildrenIds[TREE_VIEW_ROOT_PARENT_ID].map(getItemFromItemId);
-  }, [state.items.itemMap, state.items.itemOrderedChildrenIds]);
-  const isItemDisabled = React.useCallback(itemId => {
-    if (itemId == null) {
-      return false;
-    }
-    let itemMeta = instance.getItemMeta(itemId);
-
-    // This can be called before the item has been added to the item map.
-    if (!itemMeta) {
-      return false;
-    }
-    if (itemMeta.disabled) {
-      return true;
-    }
-    while (itemMeta.parentId != null) {
-      itemMeta = instance.getItemMeta(itemMeta.parentId);
-      if (itemMeta.disabled) {
-        return true;
-      }
-    }
-    return false;
-  }, [instance]);
-  const getItemIndex = React.useCallback(itemId => {
-    const parentId = instance.getItemMeta(itemId).parentId ?? TREE_VIEW_ROOT_PARENT_ID;
-    return state.items.itemChildrenIndexes[parentId][itemId];
-  }, [instance, state.items.itemChildrenIndexes]);
-  const getItemOrderedChildrenIds = React.useCallback(itemId => state.items.itemOrderedChildrenIds[itemId ?? TREE_VIEW_ROOT_PARENT_ID] ?? [], [state.items.itemOrderedChildrenIds]);
+    return selectorItemOrderedChildrenIds(store.value, null).map(getItemFromItemId);
+  }, [store]);
+  const getItemOrderedChildrenIds = React.useCallback(itemId => selectorItemOrderedChildrenIds(store.value, itemId), [store]);
   const getItemDOMElement = itemId => {
-    const itemMeta = instance.getItemMeta(itemId);
+    const itemMeta = selectorItemMeta(store.value, itemId);
     if (itemMeta == null) {
       return null;
     }
-    return document.getElementById(generateTreeItemIdAttribute({
-      treeId: state.id.treeId,
+    const idAttribute = generateTreeItemIdAttribute({
+      treeId: selectorTreeViewId(store.value),
       itemId,
       id: itemMeta.idAttribute
-    }));
-  };
-  const isItemNavigable = itemId => {
-    if (params.disabledItemsFocusable) {
-      return true;
-    }
-    return !instance.isItemDisabled(itemId);
+    });
+    return document.getElementById(idAttribute);
   };
   const areItemUpdatesPreventedRef = React.useRef(false);
   const preventItemUpdates = React.useCallback(() => {
@@ -131,15 +103,16 @@ export const useTreeViewItems = ({
     if (instance.areItemUpdatesPrevented()) {
       return;
     }
-    setState(prevState => {
+    store.update(prevState => {
       const newState = updateItemsState({
+        disabledItemsFocusable: params.disabledItemsFocusable,
         items: params.items,
         isItemDisabled: params.isItemDisabled,
         getItemId: params.getItemId,
         getItemLabel: params.getItemLabel
       });
-      Object.values(prevState.items.itemMetaMap).forEach(item => {
-        if (!newState.itemMetaMap[item.id]) {
+      Object.values(prevState.items.itemMetaLookup).forEach(item => {
+        if (!newState.itemMetaLookup[item.id]) {
           publishTreeViewEvent(instance, 'removeItem', {
             id: item.id
           });
@@ -149,19 +122,19 @@ export const useTreeViewItems = ({
         items: newState
       });
     });
-  }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
-  const getItemsToRender = () => {
-    const getPropsFromItemId = id => {
-      const item = state.items.itemMetaMap[id];
-      return {
-        label: item.label,
-        itemId: item.id,
-        id: item.idAttribute,
-        children: state.items.itemOrderedChildrenIds[id]?.map(getPropsFromItemId)
-      };
-    };
-    return state.items.itemOrderedChildrenIds[TREE_VIEW_ROOT_PARENT_ID].map(getPropsFromItemId);
-  };
+  }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel]);
+
+  // Wrap `props.onItemClick` with `useEventCallback` to prevent unneeded context updates.
+  const handleItemClick = useEventCallback((event, itemId) => {
+    if (params.onItemClick) {
+      params.onItemClick(event, itemId);
+    }
+  });
+  const pluginContextValue = React.useMemo(() => ({
+    items: {
+      onItemClick: handleItemClick
+    }
+  }), [handleItemClick]);
   return {
     getRootProps: () => ({
       style: {
@@ -175,28 +148,16 @@ export const useTreeViewItems = ({
       getItemOrderedChildrenIds
     },
     instance: {
-      getItemMeta,
-      getItem,
-      getItemTree,
-      getItemsToRender,
-      getItemIndex,
       getItemDOMElement,
-      getItemOrderedChildrenIds,
-      isItemDisabled,
-      isItemNavigable,
       preventItemUpdates,
       areItemUpdatesPrevented
     },
-    contextValue: {
-      items: {
-        onItemClick: params.onItemClick,
-        disabledItemsFocusable: params.disabledItemsFocusable
-      }
-    }
+    contextValue: pluginContextValue
   };
 };
 useTreeViewItems.getInitialState = params => ({
   items: updateItemsState({
+    disabledItemsFocusable: params.disabledItemsFocusable,
     items: params.items,
     isItemDisabled: params.isItemDisabled,
     getItemId: params.getItemId,
@@ -210,11 +171,10 @@ useTreeViewItems.getDefaultizedParams = ({
   itemChildrenIndentation: params.itemChildrenIndentation ?? '12px'
 });
 useTreeViewItems.wrapRoot = ({
-  children,
-  instance
+  children
 }) => {
   return /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
-    value: itemId => instance.getItemMeta(itemId)?.depth ?? 0,
+    value: selectorItemDepth,
     children: children
   });
 };