@mui/x-tree-view 8.10.2 → 8.11.1

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js

@@ -1,56 +1,36 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTreeViewSelectionItemPlugin = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
+var _store = require("@mui/x-internals/store");
 var _TreeViewProvider = require("../../TreeViewProvider");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
 var _useTreeViewSelection = require("./useTreeViewSelection.selectors");
-var _useSelector = require("../../hooks/useSelector");
-function selectorItemCheckboxStatus(state, itemId) {
-  const isCheckboxSelectionEnabled = (0, _useTreeViewSelection.selectorIsCheckboxSelectionEnabled)(state);
-  const isSelectionEnabledForItem = (0, _useTreeViewSelection.selectorIsItemSelectionEnabled)(state, itemId);
-  if ((0, _useTreeViewSelection.selectorIsItemSelected)(state, itemId)) {
-    return {
-      disabled: !isSelectionEnabledForItem,
-      visible: isCheckboxSelectionEnabled,
-      indeterminate: false,
-      checked: true
-    };
-  }
-  const children = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemId);
-  if (children.length === 0) {
-    return {
-      disabled: !isSelectionEnabledForItem,
-      visible: isCheckboxSelectionEnabled,
-      indeterminate: false,
-      checked: false
-    };
+const selectorCheckboxSelectionStatus = (0, _store.createSelector)((state, itemId) => {
+  if (_useTreeViewSelection.selectionSelectors.isItemSelected(state, itemId)) {
+    return 'checked';
   }
   let hasSelectedDescendant = false;
   let hasUnSelectedDescendant = false;
   const traverseDescendants = itemToTraverseId => {
     if (itemToTraverseId !== itemId) {
-      if ((0, _useTreeViewSelection.selectorIsItemSelected)(state, itemToTraverseId)) {
+      if (_useTreeViewSelection.selectionSelectors.isItemSelected(state, itemToTraverseId)) {
         hasSelectedDescendant = true;
       } else {
         hasUnSelectedDescendant = true;
       }
     }
-    (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemToTraverseId).forEach(traverseDescendants);
+    _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, itemToTraverseId).forEach(traverseDescendants);
   };
   traverseDescendants(itemId);
-  return {
-    disabled: !isSelectionEnabledForItem,
-    visible: isCheckboxSelectionEnabled,
-    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant,
-    checked: (0, _useTreeViewSelection.selectorSelectionPropagationRules)(state).parents ? hasSelectedDescendant && !hasUnSelectedDescendant : false
-  };
-}
+  if (hasSelectedDescendant && hasUnSelectedDescendant) {
+    return 'indeterminate';
+  }
+  const shouldSelectBasedOnDescendants = _useTreeViewSelection.selectionSelectors.propagationRules(state).parents;
+  return shouldSelectBasedOnDescendants && hasSelectedDescendant && !hasUnSelectedDescendant ? 'checked' : 'empty';
+});
 const useTreeViewSelectionItemPlugin = ({
   props
 }) => {
@@ -60,7 +40,9 @@ const useTreeViewSelectionItemPlugin = ({
   const {
     store
   } = (0, _TreeViewProvider.useTreeViewContext)();
-  const checkboxStatus = (0, _useSelector.useSelector)(store, selectorItemCheckboxStatus, itemId, _fastObjectShallowCompare.fastObjectShallowCompare);
+  const isCheckboxSelectionEnabled = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.isCheckboxSelectionEnabled);
+  const isItemSelectionEnabled = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.canItemBeSelected, itemId);
+  const checkboxSelectionStatus = (0, _store.useStore)(store, selectorCheckboxSelectionStatus, itemId);
   return {
     propsEnhancers: {
       checkbox: ({
@@ -72,15 +54,19 @@ const useTreeViewSelectionItemPlugin = ({
           if (event.defaultMuiPrevented) {
             return;
           }
-          if (!(0, _useTreeViewSelection.selectorIsItemSelectionEnabled)(store.value, itemId)) {
+          if (!_useTreeViewSelection.selectionSelectors.canItemBeSelected(store.state, itemId)) {
             return;
           }
           interactions.handleCheckboxSelection(event);
         };
-        return (0, _extends2.default)({
+        return {
           tabIndex: -1,
-          onChange: handleChange
-        }, checkboxStatus);
+          onChange: handleChange,
+          visible: isCheckboxSelectionEnabled,
+          disabled: !isItemSelectionEnabled,
+          checked: checkboxSelectionStatus === 'checked',
+          indeterminate: checkboxSelectionStatus === 'indeterminate'
+        };
       }
     }
   };

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -27,9 +27,9 @@ const useTreeViewSelection = ({
   const lastSelectedItem = React.useRef(null);
   const lastSelectedRange = React.useRef({});
   const setSelectedItems = (event, newModel, additionalItemsToPropagate) => {
-    const oldModel = (0, _useTreeViewSelection2.selectorSelectionModel)(store.value);
+    const oldModel = _useTreeViewSelection2.selectionSelectors.selectedItemsRaw(store.state);
     let cleanModel;
-    const isMultiSelectEnabled = (0, _useTreeViewSelection2.selectorIsMultiSelectEnabled)(store.value);
+    const isMultiSelectEnabled = _useTreeViewSelection2.selectionSelectors.isMultiSelectEnabled(store.state);
     if (isMultiSelectEnabled && (params.selectionPropagation.descendants || params.selectionPropagation.parents)) {
       cleanModel = (0, _useTreeViewSelection.propagateSelection)({
         store,
@@ -66,10 +66,8 @@ const useTreeViewSelection = ({
       }
     }
     if (params.selectedItems === undefined) {
-      store.update(prevState => (0, _extends2.default)({}, prevState, {
-        selection: (0, _extends2.default)({}, prevState.selection, {
-          selectedItems: cleanModel
-        })
+      store.set('selection', (0, _extends2.default)({}, store.state.selection, {
+        selectedItems: cleanModel
       }));
     }
     params.onSelectedItemsChange?.(event, cleanModel);
@@ -80,14 +78,14 @@ const useTreeViewSelection = ({
     keepExistingSelection = false,
     shouldBeSelected
   }) => {
-    if (!(0, _useTreeViewSelection2.selectorIsSelectionEnabled)(store.value)) {
+    if (!_useTreeViewSelection2.selectionSelectors.enabled(store.state)) {
       return;
     }
     let newSelected;
-    const isMultiSelectEnabled = (0, _useTreeViewSelection2.selectorIsMultiSelectEnabled)(store.value);
+    const isMultiSelectEnabled = _useTreeViewSelection2.selectionSelectors.isMultiSelectEnabled(store.state);
     if (keepExistingSelection) {
-      const oldSelected = (0, _useTreeViewSelection2.selectorSelectionModelArray)(store.value);
-      const isSelectedBefore = (0, _useTreeViewSelection2.selectorIsItemSelected)(store.value, itemId);
+      const oldSelected = _useTreeViewSelection2.selectionSelectors.selectedItems(store.state);
+      const isSelectedBefore = _useTreeViewSelection2.selectionSelectors.isItemSelected(store.state, itemId);
       if (isSelectedBefore && (shouldBeSelected === false || shouldBeSelected == null)) {
         newSelected = oldSelected.filter(id => id !== itemId);
       } else if (!isSelectedBefore && (shouldBeSelected === true || shouldBeSelected == null)) {
@@ -97,25 +95,25 @@ const useTreeViewSelection = ({
       }
     } else {
       // eslint-disable-next-line no-lonely-if
-      if (shouldBeSelected === false || shouldBeSelected == null && (0, _useTreeViewSelection2.selectorIsItemSelected)(store.value, itemId)) {
+      if (shouldBeSelected === false || shouldBeSelected == null && _useTreeViewSelection2.selectionSelectors.isItemSelected(store.state, itemId)) {
         newSelected = isMultiSelectEnabled ? [] : null;
       } else {
         newSelected = isMultiSelectEnabled ? [itemId] : itemId;
       }
     }
     setSelectedItems(event, newSelected,
-    // If shouldBeSelected === selectorIsItemSelected(store, itemId), we still want to propagate the select.
+    // If shouldBeSelected === selectionSelectors.isItemSelected(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 = {};
   };
   const selectRange = (event, [start, end]) => {
-    const isMultiSelectEnabled = (0, _useTreeViewSelection2.selectorIsMultiSelectEnabled)(store.value);
+    const isMultiSelectEnabled = _useTreeViewSelection2.selectionSelectors.isMultiSelectEnabled(store.state);
     if (!isMultiSelectEnabled) {
       return;
     }
-    let newSelectedItems = (0, _useTreeViewSelection2.selectorSelectionModelArray)(store.value).slice();
+    let newSelectedItems = _useTreeViewSelection2.selectionSelectors.selectedItems(store.state).slice();
 
     // If the last selection was a range selection,
     // remove the items that were part of the last range from the model
@@ -125,7 +123,7 @@ const useTreeViewSelection = ({
 
     // Add to the model the items that are part of the new range and not already part of the model.
     const selectedItemsLookup = (0, _useTreeViewSelection.getLookupFromArray)(newSelectedItems);
-    const range = (0, _tree.getNonDisabledItemsInRange)(store.value, start, end);
+    const range = (0, _tree.getNonDisabledItemsInRange)(store.state, start, end);
     const itemsToAddToModel = range.filter(id => !selectedItemsLookup[id]);
     newSelectedItems = newSelectedItems.concat(itemsToAddToModel);
     setSelectedItems(event, newSelectedItems);
@@ -133,31 +131,31 @@ const useTreeViewSelection = ({
   };
   const expandSelectionRange = (event, itemId) => {
     if (lastSelectedItem.current != null) {
-      const [start, end] = (0, _tree.findOrderInTremauxTree)(store.value, itemId, lastSelectedItem.current);
+      const [start, end] = (0, _tree.findOrderInTremauxTree)(store.state, itemId, lastSelectedItem.current);
       selectRange(event, [start, end]);
     }
   };
   const selectRangeFromStartToItem = (event, itemId) => {
-    selectRange(event, [(0, _tree.getFirstNavigableItem)(store.value), itemId]);
+    selectRange(event, [(0, _tree.getFirstNavigableItem)(store.state), itemId]);
   };
   const selectRangeFromItemToEnd = (event, itemId) => {
-    selectRange(event, [itemId, (0, _tree.getLastNavigableItem)(store.value)]);
+    selectRange(event, [itemId, (0, _tree.getLastNavigableItem)(store.state)]);
   };
   const selectAllNavigableItems = event => {
-    const isMultiSelectEnabled = (0, _useTreeViewSelection2.selectorIsMultiSelectEnabled)(store.value);
+    const isMultiSelectEnabled = _useTreeViewSelection2.selectionSelectors.isMultiSelectEnabled(store.state);
     if (!isMultiSelectEnabled) {
       return;
     }
-    const navigableItems = (0, _tree.getAllNavigableItems)(store.value);
+    const navigableItems = (0, _tree.getAllNavigableItems)(store.state);
     setSelectedItems(event, navigableItems);
     lastSelectedRange.current = (0, _useTreeViewSelection.getLookupFromArray)(navigableItems);
   };
   const selectItemFromArrowNavigation = (event, currentItem, nextItem) => {
-    const isMultiSelectEnabled = (0, _useTreeViewSelection2.selectorIsMultiSelectEnabled)(store.value);
+    const isMultiSelectEnabled = _useTreeViewSelection2.selectionSelectors.isMultiSelectEnabled(store.state);
     if (!isMultiSelectEnabled) {
       return;
     }
-    let newSelectedItems = (0, _useTreeViewSelection2.selectorSelectionModelArray)(store.value).slice();
+    let newSelectedItems = _useTreeViewSelection2.selectionSelectors.selectedItems(store.state).slice();
     if (Object.keys(lastSelectedRange.current).length === 0) {
       newSelectedItems.push(nextItem);
       lastSelectedRange.current = {
@@ -179,18 +177,16 @@ const useTreeViewSelection = ({
     setSelectedItems(event, newSelectedItems);
   };
   (0, _useEnhancedEffect.default)(() => {
-    store.update(prevState => (0, _extends2.default)({}, prevState, {
-      selection: {
-        selectedItems: params.selectedItems === undefined ? prevState.selection.selectedItems : params.selectedItems,
-        isEnabled: !params.disableSelection,
-        isMultiSelectEnabled: params.multiSelect,
-        isCheckboxSelectionEnabled: params.checkboxSelection,
-        selectionPropagation: {
-          descendants: params.selectionPropagation.descendants,
-          parents: params.selectionPropagation.parents
-        }
+    store.set('selection', {
+      selectedItems: params.selectedItems === undefined ? store.state.selection.selectedItems : params.selectedItems,
+      isEnabled: !params.disableSelection,
+      isMultiSelectEnabled: params.multiSelect,
+      isCheckboxSelectionEnabled: params.checkboxSelection,
+      selectionPropagation: {
+        descendants: params.selectionPropagation.descendants,
+        parents: params.selectionPropagation.parents
       }
-    }));
+    });
   }, [store, params.selectedItems, params.multiSelect, params.checkboxSelection, params.disableSelection, params.selectionPropagation.descendants, params.selectionPropagation.parents]);
   return {
     getRootProps: () => ({