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

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

@@ -102,12 +102,36 @@ interface UseTreeViewItemsEventLookup {
 }
 export interface UseTreeViewItemsState<R extends {}> {
     items: {
+        /**
+         * If `true`, will allow focus on disabled items.
+         * Always equal to `props.disabledItemsFocusable` (or `false` if not provided).
+         */
         disabledItemsFocusable: boolean;
-        itemModelLookup: TreeViewItemModelLookup<R>;
-        itemMetaLookup: TreeViewItemMetaLookup;
+        /**
+         * Model of each item as provided by `props.items` or by imperative items updates.
+         * It is not updated when properties derived from the model are updated:
+         * - when the label of an item is updated, `itemMetaLookup` is updated, not `itemModelLookup`.
+         * - when the children of an item are updated, `itemOrderedChildrenIdsLookup` and `itemChildrenIndexesLookup` are updated, not `itemModelLookup`.
+         * This means that the `children`, `label` or `id` properties of an item model should never be used directly, always use the structured sub-states instead.
+         */
+        itemModelLookup: {
+            [itemId: string]: TreeViewBaseItem<R>;
+        };
+        /**
+         * Meta data of each item.
+         */
+        itemMetaLookup: {
+            [itemId: string]: TreeViewItemMeta;
+        };
+        /**
+         * Ordered children ids of each item.
+         */
         itemOrderedChildrenIdsLookup: {
             [parentItemId: string]: string[];
         };
+        /**
+         * Index of each child in the ordered children ids of its parent.
+         */
         itemChildrenIndexesLookup: {
             [parentItemId: string]: {
                 [itemId: string]: number;
@@ -129,10 +153,4 @@ export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
     state: UseTreeViewItemsState<TreeViewDefaultItemModelProperties>;
     contextValue: UseTreeViewItemsContextValue;
 }>;
-export type TreeViewItemMetaLookup = {
-    [itemId: string]: TreeViewItemMeta;
-};
-export type TreeViewItemModelLookup<R extends {}> = {
-    [itemId: string]: TreeViewBaseItem<R>;
-};
 export {};

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

@@ -2,19 +2,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { useTreeViewContext } from "../../TreeViewProvider/index.js";
 import { selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 import { selectorIsItemSelected } from "./useTreeViewSelection.selectors.js";
-function getCheckboxStatus({
+import { useSelector } from "../../hooks/useSelector.js";
+function selectorItemCheckboxStatus(state, {
   itemId,
-  store,
-  selectionPropagation,
-  selected
+  selectionPropagation
 }) {
-  if (selected) {
+  if (selectorIsItemSelected(state, itemId)) {
     return {
       indeterminate: false,
       checked: true
     };
   }
-  const children = selectorItemOrderedChildrenIds(store.value, itemId);
+  const children = selectorItemOrderedChildrenIds(state, itemId);
   if (children.length === 0) {
     return {
       indeterminate: false,
@@ -25,18 +24,18 @@ function getCheckboxStatus({
   let hasUnSelectedDescendant = false;
   const traverseDescendants = itemToTraverseId => {
     if (itemToTraverseId !== itemId) {
-      if (selectorIsItemSelected(store.value, itemToTraverseId)) {
+      if (selectorIsItemSelected(state, itemToTraverseId)) {
         hasSelectedDescendant = true;
       } else {
         hasUnSelectedDescendant = true;
       }
     }
-    selectorItemOrderedChildrenIds(store.value, itemToTraverseId).forEach(traverseDescendants);
+    selectorItemOrderedChildrenIds(state, itemToTraverseId).forEach(traverseDescendants);
   };
   traverseDescendants(itemId);
   return {
-    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant && !selected,
-    checked: selectionPropagation.parents ? hasSelectedDescendant : selected
+    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant,
+    checked: selectionPropagation.parents ? hasSelectedDescendant : false
   };
 }
 export const useTreeViewSelectionItemPlugin = ({
@@ -53,6 +52,10 @@ export const useTreeViewSelectionItemPlugin = ({
       selectionPropagation
     }
   } = useTreeViewContext();
+  const checkboxStatus = useSelector(store, selectorItemCheckboxStatus, {
+    itemId,
+    selectionPropagation
+  }, (a, b) => a.checked === b.checked && a.indeterminate === b.indeterminate);
   return {
     propsEnhancers: {
       checkbox: ({
@@ -70,12 +73,6 @@ export const useTreeViewSelectionItemPlugin = ({
           }
           interactions.handleCheckboxSelection(event);
         };
-        const checkboxStatus = getCheckboxStatus({
-          store,
-          itemId,
-          selectionPropagation,
-          selected: status.selected
-        });
         return _extends({
           visible: checkboxSelection,
           disabled: disableSelection || status.disabled,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v8.0.0-alpha.2
+ * @mui/x-tree-view v8.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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

@@ -2,19 +2,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { useTreeViewContext } from "../../TreeViewProvider/index.js";
 import { selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 import { selectorIsItemSelected } from "./useTreeViewSelection.selectors.js";
-function getCheckboxStatus({
+import { useSelector } from "../../hooks/useSelector.js";
+function selectorItemCheckboxStatus(state, {
   itemId,
-  store,
-  selectionPropagation,
-  selected
+  selectionPropagation
 }) {
-  if (selected) {
+  if (selectorIsItemSelected(state, itemId)) {
     return {
       indeterminate: false,
       checked: true
     };
   }
-  const children = selectorItemOrderedChildrenIds(store.value, itemId);
+  const children = selectorItemOrderedChildrenIds(state, itemId);
   if (children.length === 0) {
     return {
       indeterminate: false,
@@ -25,18 +24,18 @@ function getCheckboxStatus({
   let hasUnSelectedDescendant = false;
   const traverseDescendants = itemToTraverseId => {
     if (itemToTraverseId !== itemId) {
-      if (selectorIsItemSelected(store.value, itemToTraverseId)) {
+      if (selectorIsItemSelected(state, itemToTraverseId)) {
         hasSelectedDescendant = true;
       } else {
         hasUnSelectedDescendant = true;
       }
     }
-    selectorItemOrderedChildrenIds(store.value, itemToTraverseId).forEach(traverseDescendants);
+    selectorItemOrderedChildrenIds(state, itemToTraverseId).forEach(traverseDescendants);
   };
   traverseDescendants(itemId);
   return {
-    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant && !selected,
-    checked: selectionPropagation.parents ? hasSelectedDescendant : selected
+    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant,
+    checked: selectionPropagation.parents ? hasSelectedDescendant : false
   };
 }
 export const useTreeViewSelectionItemPlugin = ({
@@ -53,6 +52,10 @@ export const useTreeViewSelectionItemPlugin = ({
       selectionPropagation
     }
   } = useTreeViewContext();
+  const checkboxStatus = useSelector(store, selectorItemCheckboxStatus, {
+    itemId,
+    selectionPropagation
+  }, (a, b) => a.checked === b.checked && a.indeterminate === b.indeterminate);
   return {
     propsEnhancers: {
       checkbox: ({
@@ -70,12 +73,6 @@ export const useTreeViewSelectionItemPlugin = ({
           }
           interactions.handleCheckboxSelection(event);
         };
-        const checkboxStatus = getCheckboxStatus({
-          store,
-          itemId,
-          selectionPropagation,
-          selected: status.selected
-        });
         return _extends({
           visible: checkboxSelection,
           disabled: disableSelection || status.disabled,

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v8.0.0-alpha.2
+ * @mui/x-tree-view v8.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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

@@ -9,19 +9,18 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _TreeViewProvider = require("../../TreeViewProvider");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
 var _useTreeViewSelection = require("./useTreeViewSelection.selectors");
-function getCheckboxStatus({
+var _useSelector = require("../../hooks/useSelector");
+function selectorItemCheckboxStatus(state, {
   itemId,
-  store,
-  selectionPropagation,
-  selected
+  selectionPropagation
 }) {
-  if (selected) {
+  if ((0, _useTreeViewSelection.selectorIsItemSelected)(state, itemId)) {
     return {
       indeterminate: false,
       checked: true
     };
   }
-  const children = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(store.value, itemId);
+  const children = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemId);
   if (children.length === 0) {
     return {
       indeterminate: false,
@@ -32,18 +31,18 @@ function getCheckboxStatus({
   let hasUnSelectedDescendant = false;
   const traverseDescendants = itemToTraverseId => {
     if (itemToTraverseId !== itemId) {
-      if ((0, _useTreeViewSelection.selectorIsItemSelected)(store.value, itemToTraverseId)) {
+      if ((0, _useTreeViewSelection.selectorIsItemSelected)(state, itemToTraverseId)) {
         hasSelectedDescendant = true;
       } else {
         hasUnSelectedDescendant = true;
       }
     }
-    (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(store.value, itemToTraverseId).forEach(traverseDescendants);
+    (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemToTraverseId).forEach(traverseDescendants);
   };
   traverseDescendants(itemId);
   return {
-    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant && !selected,
-    checked: selectionPropagation.parents ? hasSelectedDescendant : selected
+    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant,
+    checked: selectionPropagation.parents ? hasSelectedDescendant : false
   };
 }
 const useTreeViewSelectionItemPlugin = ({
@@ -60,6 +59,10 @@ const useTreeViewSelectionItemPlugin = ({
       selectionPropagation
     }
   } = (0, _TreeViewProvider.useTreeViewContext)();
+  const checkboxStatus = (0, _useSelector.useSelector)(store, selectorItemCheckboxStatus, {
+    itemId,
+    selectionPropagation
+  }, (a, b) => a.checked === b.checked && a.indeterminate === b.indeterminate);
   return {
     propsEnhancers: {
       checkbox: ({
@@ -77,12 +80,6 @@ const useTreeViewSelectionItemPlugin = ({
           }
           interactions.handleCheckboxSelection(event);
         };
-        const checkboxStatus = getCheckboxStatus({
-          store,
-          itemId,
-          selectionPropagation,
-          selected: status.selected
-        });
         return (0, _extends2.default)({
           visible: checkboxSelection,
           disabled: disableSelection || status.disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.4",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -40,7 +40,7 @@
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
     "reselect": "^5.1.1",
-    "use-sync-external-store": "^1.2.2",
+    "use-sync-external-store": "^1.4.0",
     "@mui/x-internals": "8.0.0-alpha.2"
   },
   "peerDependencies": {