@mui/x-tree-view 7.22.1 → 8.0.0-alpha.1

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -1,51 +1,66 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from "../../utils/tree.js";
-import { convertSelectedItemsToArray, getLookupFromArray } from "./useTreeViewSelection.utils.js";
+import { convertSelectedItemsToArray, propagateSelection, getAddedAndRemovedItems, getLookupFromArray, createSelectedItemsMap } from "./useTreeViewSelection.utils.js";
+import { selectorIsItemSelected } from "./useTreeViewSelection.selectors.js";
+import { useTreeViewSelectionItemPlugin } from "./useTreeViewSelection.itemPlugin.js";
 export const useTreeViewSelection = ({
-  instance,
+  store,
   params,
   models
 }) => {
   const lastSelectedItem = React.useRef(null);
   const lastSelectedRange = React.useRef({});
-  const selectedItemsMap = React.useMemo(() => {
-    const temp = new Map();
-    if (Array.isArray(models.selectedItems.value)) {
-      models.selectedItems.value.forEach(id => {
-        temp.set(id, true);
+  useEnhancedEffect(() => {
+    store.update(prevState => _extends({}, prevState, {
+      selection: {
+        selectedItemsMap: createSelectedItemsMap(models.selectedItems.value)
+      }
+    }));
+  }, [store, models.selectedItems.value]);
+  const setSelectedItems = (event, newModel, additionalItemsToPropagate) => {
+    let cleanModel;
+    if (params.multiSelect && (params.selectionPropagation.descendants || params.selectionPropagation.parents)) {
+      cleanModel = propagateSelection({
+        store,
+        selectionPropagation: params.selectionPropagation,
+        newModel: newModel,
+        oldModel: models.selectedItems.value,
+        additionalItemsToPropagate
       });
-    } else if (models.selectedItems.value != null) {
-      temp.set(models.selectedItems.value, true);
+    } else {
+      cleanModel = newModel;
     }
-    return temp;
-  }, [models.selectedItems.value]);
-  const setSelectedItems = (event, newSelectedItems) => {
     if (params.onItemSelectionToggle) {
       if (params.multiSelect) {
-        const addedItems = newSelectedItems.filter(itemId => !instance.isItemSelected(itemId));
-        const removedItems = models.selectedItems.value.filter(itemId => !newSelectedItems.includes(itemId));
-        addedItems.forEach(itemId => {
-          params.onItemSelectionToggle(event, itemId, true);
-        });
-        removedItems.forEach(itemId => {
-          params.onItemSelectionToggle(event, itemId, false);
+        const changes = getAddedAndRemovedItems({
+          store,
+          newModel: cleanModel,
+          oldModel: models.selectedItems.value
         });
-      } else if (newSelectedItems !== models.selectedItems.value) {
+        if (params.onItemSelectionToggle) {
+          changes.added.forEach(itemId => {
+            params.onItemSelectionToggle(event, itemId, true);
+          });
+          changes.removed.forEach(itemId => {
+            params.onItemSelectionToggle(event, itemId, false);
+          });
+        }
+      } else if (params.onItemSelectionToggle && cleanModel !== models.selectedItems.value) {
         if (models.selectedItems.value != null) {
           params.onItemSelectionToggle(event, models.selectedItems.value, false);
         }
-        if (newSelectedItems != null) {
-          params.onItemSelectionToggle(event, newSelectedItems, true);
+        if (cleanModel != null) {
+          params.onItemSelectionToggle(event, cleanModel, true);
         }
       }
     }
     if (params.onSelectedItemsChange) {
-      params.onSelectedItemsChange(event, newSelectedItems);
+      params.onSelectedItemsChange(event, cleanModel);
     }
-    models.selectedItems.setControlledValue(newSelectedItems);
+    models.selectedItems.setControlledValue(cleanModel);
   };
-  const isItemSelected = itemId => selectedItemsMap.has(itemId);
   const selectItem = ({
     event,
     itemId,
@@ -58,7 +73,7 @@ export const useTreeViewSelection = ({
     let newSelected;
     if (keepExistingSelection) {
       const cleanSelectedItems = convertSelectedItemsToArray(models.selectedItems.value);
-      const isSelectedBefore = instance.isItemSelected(itemId);
+      const isSelectedBefore = selectorIsItemSelected(store.value, itemId);
       if (isSelectedBefore && (shouldBeSelected === false || shouldBeSelected == null)) {
         newSelected = cleanSelectedItems.filter(id => id !== itemId);
       } else if (!isSelectedBefore && (shouldBeSelected === true || shouldBeSelected == null)) {
@@ -68,13 +83,16 @@ export const useTreeViewSelection = ({
       }
     } else {
       // eslint-disable-next-line no-lonely-if
-      if (shouldBeSelected === false || shouldBeSelected == null && instance.isItemSelected(itemId)) {
+      if (shouldBeSelected === false || shouldBeSelected == null && selectorIsItemSelected(store.value, itemId)) {
         newSelected = params.multiSelect ? [] : null;
       } else {
         newSelected = params.multiSelect ? [itemId] : itemId;
       }
     }
-    setSelectedItems(event, newSelected);
+    setSelectedItems(event, newSelected,
+    // If shouldBeSelected === selectorIsItemSelected(store, itemId), we still want to propagate the select.
+    // This is useful when the element is in an indeterminate state.
+    [itemId]);
     lastSelectedItem.current = itemId;
     lastSelectedRange.current = {};
   };
@@ -92,7 +110,7 @@ export const useTreeViewSelection = ({
 
     // Add to the model the items that are part of the new range and not already part of the model.
     const selectedItemsLookup = getLookupFromArray(newSelectedItems);
-    const range = getNonDisabledItemsInRange(instance, start, end);
+    const range = getNonDisabledItemsInRange(store.value, start, end);
     const itemsToAddToModel = range.filter(id => !selectedItemsLookup[id]);
     newSelectedItems = newSelectedItems.concat(itemsToAddToModel);
     setSelectedItems(event, newSelectedItems);
@@ -100,21 +118,21 @@ export const useTreeViewSelection = ({
   };
   const expandSelectionRange = (event, itemId) => {
     if (lastSelectedItem.current != null) {
-      const [start, end] = findOrderInTremauxTree(instance, itemId, lastSelectedItem.current);
+      const [start, end] = findOrderInTremauxTree(store.value, itemId, lastSelectedItem.current);
       selectRange(event, [start, end]);
     }
   };
   const selectRangeFromStartToItem = (event, itemId) => {
-    selectRange(event, [getFirstNavigableItem(instance), itemId]);
+    selectRange(event, [getFirstNavigableItem(store.value), itemId]);
   };
   const selectRangeFromItemToEnd = (event, itemId) => {
-    selectRange(event, [itemId, getLastNavigableItem(instance)]);
+    selectRange(event, [itemId, getLastNavigableItem(store.value)]);
   };
   const selectAllNavigableItems = event => {
     if (params.disableSelection || !params.multiSelect) {
       return;
     }
-    const navigableItems = getAllNavigableItems(instance);
+    const navigableItems = getAllNavigableItems(store.value);
     setSelectedItems(event, navigableItems);
     lastSelectedRange.current = getLookupFromArray(navigableItems);
   };
@@ -143,6 +161,17 @@ export const useTreeViewSelection = ({
     }
     setSelectedItems(event, newSelectedItems);
   };
+  const pluginContextValue = React.useMemo(() => ({
+    selection: {
+      multiSelect: params.multiSelect,
+      checkboxSelection: params.checkboxSelection,
+      disableSelection: params.disableSelection,
+      selectionPropagation: {
+        descendants: params.selectionPropagation.descendants,
+        parents: params.selectionPropagation.parents
+      }
+    }
+  }), [params.multiSelect, params.checkboxSelection, params.disableSelection, params.selectionPropagation.descendants, params.selectionPropagation.parents]);
   return {
     getRootProps: () => ({
       'aria-multiselectable': params.multiSelect
@@ -151,7 +180,6 @@ export const useTreeViewSelection = ({
       selectItem
     },
     instance: {
-      isItemSelected,
       selectItem,
       selectAllNavigableItems,
       expandSelectionRange,
@@ -159,28 +187,35 @@ export const useTreeViewSelection = ({
       selectRangeFromItemToEnd,
       selectItemFromArrowNavigation
     },
-    contextValue: {
-      selection: {
-        multiSelect: params.multiSelect,
-        checkboxSelection: params.checkboxSelection,
-        disableSelection: params.disableSelection
-      }
-    }
+    contextValue: pluginContextValue
   };
 };
+useTreeViewSelection.itemPlugin = useTreeViewSelectionItemPlugin;
 useTreeViewSelection.models = {
   selectedItems: {
     getDefaultValue: params => params.defaultSelectedItems
   }
 };
 const DEFAULT_SELECTED_ITEMS = [];
+const EMPTY_SELECTION_PROPAGATION = {};
 useTreeViewSelection.getDefaultizedParams = ({
   params
 }) => _extends({}, params, {
   disableSelection: params.disableSelection ?? false,
   multiSelect: params.multiSelect ?? false,
   checkboxSelection: params.checkboxSelection ?? false,
-  defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_ITEMS : null)
+  defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_ITEMS : null),
+  selectionPropagation: params.selectionPropagation ?? EMPTY_SELECTION_PROPAGATION
+});
+useTreeViewSelection.getInitialState = params => ({
+  selection: {
+    selectedItemsMap: createSelectedItemsMap(params.selectedItems === undefined ? params.defaultSelectedItems : params.selectedItems)
+  }
+});
+useTreeViewSelection.getInitialState = params => ({
+  selection: {
+    selectedItemsMap: createSelectedItemsMap(params.selectedItems === undefined ? params.defaultSelectedItems : params.selectedItems)
+  }
 });
 useTreeViewSelection.params = {
   disableSelection: true,
@@ -189,5 +224,6 @@ useTreeViewSelection.params = {
   defaultSelectedItems: true,
   selectedItems: true,
   onSelectedItemsChange: true,
-  onItemSelectionToggle: true
+  onItemSelectionToggle: true,
+  selectionPropagation: true
 };

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js

@@ -0,0 +1,9 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectorTreeViewSelectionState = state => state.selection;
+
+/**
+ * Check if an item is selected.
+ * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is selected, `false` otherwise.
+ */
+export const selectorIsItemSelected = createSelector([selectorTreeViewSelectionState, (_, itemId) => itemId], (selectionState, itemId) => selectionState.selectedItemsMap.has(itemId));

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js

@@ -1,3 +1,6 @@
+import { selectorIsItemSelected } from "./useTreeViewSelection.selectors.js";
+import { selectorItemOrderedChildrenIds, selectorItemParentId } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+
 /**
  * Transform the `selectedItems` model to be an array if it was a string or null.
  * @param {string[] | string | null} model The raw model.
@@ -12,10 +15,112 @@ export const convertSelectedItemsToArray = model => {
   }
   return [];
 };
+export const createSelectedItemsMap = selectedItems => {
+  const selectedItemsMap = new Map();
+  convertSelectedItemsToArray(selectedItems).forEach(id => {
+    selectedItemsMap.set(id, true);
+  });
+  return selectedItemsMap;
+};
 export const getLookupFromArray = array => {
   const lookup = {};
   array.forEach(itemId => {
     lookup[itemId] = true;
   });
   return lookup;
+};
+export const getAddedAndRemovedItems = ({
+  store,
+  oldModel,
+  newModel
+}) => {
+  const newModelLookup = createSelectedItemsMap(newModel);
+  return {
+    added: newModel.filter(itemId => !selectorIsItemSelected(store.value, itemId)),
+    removed: oldModel.filter(itemId => !newModelLookup.has(itemId))
+  };
+};
+export const propagateSelection = ({
+  store,
+  selectionPropagation,
+  newModel,
+  oldModel,
+  additionalItemsToPropagate
+}) => {
+  if (!selectionPropagation.descendants && !selectionPropagation.parents) {
+    return newModel;
+  }
+  let shouldRegenerateModel = false;
+  const newModelLookup = getLookupFromArray(newModel);
+  const changes = getAddedAndRemovedItems({
+    store,
+    newModel,
+    oldModel
+  });
+  additionalItemsToPropagate?.forEach(itemId => {
+    if (newModelLookup[itemId]) {
+      if (!changes.added.includes(itemId)) {
+        changes.added.push(itemId);
+      }
+    } else if (!changes.removed.includes(itemId)) {
+      changes.removed.push(itemId);
+    }
+  });
+  changes.added.forEach(addedItemId => {
+    if (selectionPropagation.descendants) {
+      const selectDescendants = itemId => {
+        if (itemId !== addedItemId) {
+          shouldRegenerateModel = true;
+          newModelLookup[itemId] = true;
+        }
+        selectorItemOrderedChildrenIds(store.value, itemId).forEach(selectDescendants);
+      };
+      selectDescendants(addedItemId);
+    }
+    if (selectionPropagation.parents) {
+      const checkAllDescendantsSelected = itemId => {
+        if (!newModelLookup[itemId]) {
+          return false;
+        }
+        const children = selectorItemOrderedChildrenIds(store.value, itemId);
+        return children.every(checkAllDescendantsSelected);
+      };
+      const selectParents = itemId => {
+        const parentId = selectorItemParentId(store.value, itemId);
+        if (parentId == null) {
+          return;
+        }
+        const siblings = selectorItemOrderedChildrenIds(store.value, parentId);
+        if (siblings.every(checkAllDescendantsSelected)) {
+          shouldRegenerateModel = true;
+          newModelLookup[parentId] = true;
+          selectParents(parentId);
+        }
+      };
+      selectParents(addedItemId);
+    }
+  });
+  changes.removed.forEach(removedItemId => {
+    if (selectionPropagation.parents) {
+      let parentId = selectorItemParentId(store.value, removedItemId);
+      while (parentId != null) {
+        if (newModelLookup[parentId]) {
+          shouldRegenerateModel = true;
+          delete newModelLookup[parentId];
+        }
+        parentId = selectorItemParentId(store.value, parentId);
+      }
+    }
+    if (selectionPropagation.descendants) {
+      const deSelectDescendants = itemId => {
+        if (itemId !== removedItemId) {
+          shouldRegenerateModel = true;
+          delete newModelLookup[itemId];
+        }
+        selectorItemOrderedChildrenIds(store.value, itemId).forEach(deSelectDescendants);
+      };
+      deSelectDescendants(removedItemId);
+    }
+  });
+  return shouldRegenerateModel ? Object.keys(newModelLookup) : newModel;
 };

package/modern/internals/useTreeView/useTreeView.js

@@ -5,6 +5,7 @@ import { useTreeViewModels } from "./useTreeViewModels.js";
 import { TREE_VIEW_CORE_PLUGINS } from "../corePlugins/index.js";
 import { extractPluginParamsFromProps } from "./extractPluginParamsFromProps.js";
 import { useTreeViewBuildContext } from "./useTreeViewBuildContext.js";
+import { TreeViewStore } from "../utils/TreeViewStore.js";
 export function useTreeViewApiInitialization(inputApiRef) {
   const fallbackPublicApiRef = React.useRef({});
   if (inputApiRef) {
@@ -15,12 +16,13 @@ export function useTreeViewApiInitialization(inputApiRef) {
   }
   return fallbackPublicApiRef.current;
 }
+let globalId = 0;
 export const useTreeView = ({
   plugins: inPlugins,
   rootRef,
   props
 }) => {
-  const plugins = [...TREE_VIEW_CORE_PLUGINS, ...inPlugins];
+  const plugins = React.useMemo(() => [...TREE_VIEW_CORE_PLUGINS, ...inPlugins], [inPlugins]);
   const {
     pluginParams,
     forwardedProps,
@@ -38,22 +40,30 @@ export const useTreeView = ({
   const publicAPI = useTreeViewApiInitialization(apiRef);
   const innerRootRef = React.useRef(null);
   const handleRootRef = useForkRef(innerRootRef, rootRef);
-  const contextValue = useTreeViewBuildContext({
-    plugins,
-    instance,
-    publicAPI,
-    rootRef: innerRootRef
-  });
-  const [state, setState] = React.useState(() => {
-    const temp = {};
+  const storeRef = React.useRef(null);
+  if (storeRef.current == null) {
+    globalId += 1;
+    const initialState = {
+      cacheKey: {
+        id: globalId
+      }
+    };
     plugins.forEach(plugin => {
       if (plugin.getInitialState) {
-        Object.assign(temp, plugin.getInitialState(pluginParams));
+        Object.assign(initialState, plugin.getInitialState(pluginParams));
       }
     });
-    return temp;
+    storeRef.current = new TreeViewStore(initialState);
+  }
+  const baseContextValue = useTreeViewBuildContext({
+    plugins,
+    instance,
+    publicAPI,
+    store: storeRef.current,
+    rootRef: innerRootRef
   });
   const rootPropsGetters = [];
+  const pluginContextValues = [];
   const runPlugin = plugin => {
     const pluginResponse = plugin({
       instance,
@@ -61,11 +71,10 @@ export const useTreeView = ({
       slots,
       slotProps,
       experimentalFeatures,
-      state,
-      setState,
       rootRef: innerRootRef,
       models,
-      plugins
+      plugins,
+      store: storeRef.current
     });
     if (pluginResponse.getRootProps) {
       rootPropsGetters.push(pluginResponse.getRootProps);
@@ -77,7 +86,7 @@ export const useTreeView = ({
       Object.assign(instance, pluginResponse.instance);
     }
     if (pluginResponse.contextValue) {
-      Object.assign(contextValue, pluginResponse.contextValue);
+      pluginContextValues.push(pluginResponse.contextValue);
     }
   };
   plugins.forEach(runPlugin);
@@ -92,10 +101,14 @@ export const useTreeView = ({
     });
     return rootProps;
   };
+  const contextValue = React.useMemo(() => {
+    const copiedBaseContextValue = _extends({}, baseContextValue);
+    return Object.assign(copiedBaseContextValue, ...pluginContextValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [baseContextValue, ...pluginContextValues]);
   return {
     getRootProps,
     rootRef: handleRootRef,
-    contextValue,
-    instance
+    contextValue
   };
 };

package/modern/internals/useTreeView/useTreeViewBuildContext.js

@@ -1,10 +1,12 @@
+import * as React from 'react';
 export const useTreeViewBuildContext = ({
   plugins,
   instance,
   publicAPI,
+  store,
   rootRef
 }) => {
-  const runItemPlugins = itemPluginProps => {
+  const runItemPlugins = React.useCallback(itemPluginProps => {
     let finalRootRef = null;
     let finalContentRef = null;
     const pluginPropEnhancers = [];
@@ -49,10 +51,11 @@ export const useTreeViewBuildContext = ({
       rootRef: finalRootRef,
       propsEnhancers
     };
-  };
-  const wrapItem = ({
+  }, [plugins]);
+  const wrapItem = React.useCallback(({
     itemId,
-    children
+    children,
+    idAttribute
   }) => {
     let finalChildren = children;
     // The wrappers are reversed to ensure that the first wrapper is the outermost one.
@@ -60,15 +63,16 @@ export const useTreeViewBuildContext = ({
       const plugin = plugins[i];
       if (plugin.wrapItem) {
         finalChildren = plugin.wrapItem({
+          instance,
           itemId,
           children: finalChildren,
-          instance
+          idAttribute
         });
       }
     }
     return finalChildren;
-  };
-  const wrapRoot = ({
+  }, [plugins, instance]);
+  const wrapRoot = React.useCallback(({
     children
   }) => {
     let finalChildren = children;
@@ -77,19 +81,21 @@ export const useTreeViewBuildContext = ({
       const plugin = plugins[i];
       if (plugin.wrapRoot) {
         finalChildren = plugin.wrapRoot({
-          children: finalChildren,
-          instance
+          children: finalChildren
         });
       }
     }
     return finalChildren;
-  };
-  return {
-    runItemPlugins,
-    wrapItem,
-    wrapRoot,
-    instance,
-    rootRef,
-    publicAPI
-  };
+  }, [plugins]);
+  return React.useMemo(() => {
+    return {
+      runItemPlugins,
+      wrapItem,
+      wrapRoot,
+      instance,
+      publicAPI,
+      store,
+      rootRef
+    };
+  }, [runItemPlugins, wrapItem, wrapRoot, instance, publicAPI, store, rootRef]);
 };

package/modern/internals/utils/TreeViewStore.js

@@ -0,0 +1,24 @@
+export class TreeViewStore {
+  constructor(value) {
+    this.value = void 0;
+    this.listeners = void 0;
+    this.subscribe = fn => {
+      this.listeners.add(fn);
+      return () => {
+        this.listeners.delete(fn);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.value;
+    };
+    this.update = updater => {
+      const newState = updater(this.value);
+      if (newState !== this.value) {
+        this.value = newState;
+        this.listeners.forEach(l => l(newState));
+      }
+    };
+    this.value = value;
+    this.listeners = new Set();
+  }
+}

package/modern/internals/utils/selectors.js

@@ -0,0 +1,37 @@
+import { lruMemoize, createSelectorCreator } from 'reselect';
+const reselectCreateSelector = createSelectorCreator({
+  memoize: lruMemoize,
+  memoizeOptions: {
+    maxSize: 1,
+    equalityCheck: Object.is
+  }
+});
+const cache = new WeakMap();
+/**
+ * Method wrapping reselect's createSelector to provide caching for tree view instances.
+ *
+ */
+export const createSelector = (...createSelectorArgs) => {
+  const selector = (state, selectorArgs) => {
+    const cacheKey = state.cacheKey;
+
+    // If there is no cache for the current tree view instance, create one.
+    let cacheForCurrentTreeViewInstance = cache.get(cacheKey);
+    if (!cacheForCurrentTreeViewInstance) {
+      cacheForCurrentTreeViewInstance = new Map();
+      cache.set(cacheKey, cacheForCurrentTreeViewInstance);
+    }
+
+    // If there is a cached selector, execute it.
+    const cachedSelector = cacheForCurrentTreeViewInstance.get(createSelectorArgs);
+    if (cachedSelector) {
+      return cachedSelector(state, selectorArgs);
+    }
+
+    // Otherwise, create a new selector and cache it and execute it.
+    const fn = reselectCreateSelector(...createSelectorArgs);
+    cacheForCurrentTreeViewInstance.set(createSelectorArgs, fn);
+    return fn(state, selectorArgs);
+  };
+  return selector;
+};