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

package/node/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -17,42 +17,45 @@ var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChil
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
 var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
+var _useTreeItemUtils = require("../../../hooks/useTreeItemUtils/useTreeItemUtils");
+var _useSelector = require("../../hooks/useSelector");
+var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const useTreeViewJSXItems = ({
   instance,
-  setState
+  store
 }) => {
   instance.preventItemUpdates();
   const insertJSXItem = (0, _useEventCallback.default)(item => {
-    setState(prevState => {
-      if (prevState.items.itemMetaMap[item.id] != null) {
+    store.update(prevState => {
+      if (prevState.items.itemMetaLookup[item.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: "${item.id}"`].join('\n'));
       }
       return (0, _extends2.default)({}, prevState, {
         items: (0, _extends2.default)({}, prevState.items, {
-          itemMetaMap: (0, _extends2.default)({}, prevState.items.itemMetaMap, {
+          itemMetaLookup: (0, _extends2.default)({}, prevState.items.itemMetaLookup, {
             [item.id]: item
           }),
           // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
-          itemMap: (0, _extends2.default)({}, prevState.items.itemMap, {
+          itemModelLookup: (0, _extends2.default)({}, prevState.items.itemModelLookup, {
             [item.id]: {
               id: item.id,
-              label: item.label
+              label: item.label ?? ''
             }
           })
         })
       });
     });
     return () => {
-      setState(prevState => {
-        const newItemMetaMap = (0, _extends2.default)({}, prevState.items.itemMetaMap);
-        const newItemMap = (0, _extends2.default)({}, prevState.items.itemMap);
-        delete newItemMetaMap[item.id];
-        delete newItemMap[item.id];
+      store.update(prevState => {
+        const newItemMetaLookup = (0, _extends2.default)({}, prevState.items.itemMetaLookup);
+        const newItemModelLookup = (0, _extends2.default)({}, prevState.items.itemModelLookup);
+        delete newItemMetaLookup[item.id];
+        delete newItemModelLookup[item.id];
         return (0, _extends2.default)({}, prevState, {
           items: (0, _extends2.default)({}, prevState.items, {
-            itemMetaMap: newItemMetaMap,
-            itemMap: newItemMap
+            itemMetaLookup: newItemMetaLookup,
+            itemModelLookup: newItemModelLookup
           })
         });
       });
@@ -63,12 +66,12 @@ const useTreeViewJSXItems = ({
   });
   const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
     const parentIdWithDefault = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
-    setState(prevState => (0, _extends2.default)({}, prevState, {
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
       items: (0, _extends2.default)({}, prevState.items, {
-        itemOrderedChildrenIds: (0, _extends2.default)({}, prevState.items.itemOrderedChildrenIds, {
+        itemOrderedChildrenIdsLookup: (0, _extends2.default)({}, prevState.items.itemOrderedChildrenIdsLookup, {
           [parentIdWithDefault]: orderedChildrenIds
         }),
-        itemChildrenIndexes: (0, _extends2.default)({}, prevState.items.itemChildrenIndexes, {
+        itemChildrenIndexesLookup: (0, _extends2.default)({}, prevState.items.itemChildrenIndexesLookup, {
           [parentIdWithDefault]: (0, _useTreeViewItems.buildSiblingIndexes)(orderedChildrenIds)
         })
       })
@@ -96,12 +99,6 @@ const useTreeViewJSXItems = ({
   };
 };
 exports.useTreeViewJSXItems = useTreeViewJSXItems;
-const isItemExpandable = reactChildren => {
-  if (Array.isArray(reactChildren)) {
-    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
-  }
-  return Boolean(reactChildren);
-};
 const useTreeViewJSXItemsItemPlugin = ({
   props,
   rootRef,
@@ -109,7 +106,7 @@ const useTreeViewJSXItemsItemPlugin = ({
 }) => {
   const {
     instance,
-    treeId
+    store
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const {
     children,
@@ -127,9 +124,10 @@ const useTreeViewJSXItemsItemPlugin = ({
     unregisterChild,
     parentId
   } = parentContext;
-  const expandable = isItemExpandable(children);
+  const expandable = (0, _useTreeItemUtils.isItemExpandable)(children);
   const pluginContentRef = React.useRef(null);
   const handleContentRef = (0, _useForkRef.default)(pluginContentRef, contentRef);
+  const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId2.selectorTreeViewId);
 
   // Prevent any flashing
   (0, _useEnhancedEffect.default)(() => {
@@ -141,9 +139,10 @@ const useTreeViewJSXItemsItemPlugin = ({
     registerChild(idAttribute, itemId);
     return () => {
       unregisterChild(idAttribute);
+      unregisterChild(idAttribute);
     };
-  }, [registerChild, unregisterChild, itemId, id, treeId]);
-  React.useEffect(() => {
+  }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
+  (0, _useEnhancedEffect.default)(() => {
     return instance.insertJSXItem({
       id: itemId,
       idAttribute: id,
@@ -166,12 +165,14 @@ const useTreeViewJSXItemsItemPlugin = ({
 useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
 useTreeViewJSXItems.wrapItem = ({
   children,
-  itemId
+  itemId,
+  idAttribute
 }) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewChildrenItemProvider.TreeViewChildrenItemProvider, {
     itemId: itemId,
+    idAttribute: idAttribute,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
       value: depthContext + 1,
       children: children
@@ -181,6 +182,8 @@ useTreeViewJSXItems.wrapItem = ({
 useTreeViewJSXItems.wrapRoot = ({
   children
 }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewChildrenItemProvider.TreeViewChildrenItemProvider, {
+  itemId: null,
+  idAttribute: null,
   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
     value: 0,
     children: children

package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -12,19 +12,25 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _tree = require("../../utils/tree");
 var _plugins = require("../../utils/plugins");
 var _useTreeViewLabel = require("../useTreeViewLabel");
+var _useSelector = require("../../hooks/useSelector");
+var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
+var _useTreeViewLabel2 = require("../useTreeViewLabel/useTreeViewLabel.selectors");
+var _useTreeViewSelection = require("../useTreeViewSelection/useTreeViewSelection.selectors");
+var _useTreeViewExpansion = require("../useTreeViewExpansion/useTreeViewExpansion.selectors");
 function isPrintableKey(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
 const useTreeViewKeyboardNavigation = ({
   instance,
-  params,
-  state
+  store,
+  params
 }) => {
   const isRtl = (0, _RtlProvider.useRtl)();
   const firstCharMap = React.useRef({});
   const updateFirstCharMap = (0, _useEventCallback.default)(callback => {
     firstCharMap.current = callback(firstCharMap.current);
   });
+  const itemMetaLookup = (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorItemMetaLookup);
   React.useEffect(() => {
     if (instance.areItemUpdatesPrevented()) {
       return;
@@ -33,16 +39,16 @@ const useTreeViewKeyboardNavigation = ({
     const processItem = item => {
       newFirstCharMap[item.id] = item.label.substring(0, 1).toLowerCase();
     };
-    Object.values(state.items.itemMetaMap).forEach(processItem);
+    Object.values(itemMetaLookup).forEach(processItem);
     firstCharMap.current = newFirstCharMap;
-  }, [state.items.itemMetaMap, params.getItemId, instance]);
+  }, [itemMetaLookup, params.getItemId, instance]);
   const getFirstMatchingItem = (itemId, query) => {
     const cleanQuery = query.toLowerCase();
     const getNextItem = itemIdToCheck => {
-      const nextItemId = (0, _tree.getNextNavigableItem)(instance, itemIdToCheck);
+      const nextItemId = (0, _tree.getNextNavigableItem)(store.value, itemIdToCheck);
       // We reached the end of the tree, check from the beginning
       if (nextItemId === null) {
-        return (0, _tree.getFirstNavigableItem)(instance);
+        return (0, _tree.getFirstNavigableItem)(store.value);
       }
       return nextItemId;
     };
@@ -60,9 +66,9 @@ const useTreeViewKeyboardNavigation = ({
     }
     return matchingItemId;
   };
-  const canToggleItemSelection = itemId => !params.disableSelection && !instance.isItemDisabled(itemId);
+  const canToggleItemSelection = itemId => !params.disableSelection && !(0, _useTreeViewItems.selectorIsItemDisabled)(store.value, itemId);
   const canToggleItemExpansion = itemId => {
-    return !instance.isItemDisabled(itemId) && instance.isItemExpandable(itemId);
+    return !(0, _useTreeViewItems.selectorIsItemDisabled)(store.value, itemId) && (0, _useTreeViewExpansion.selectorIsItemExpandable)(store.value, itemId);
   };
 
   // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
@@ -99,7 +105,10 @@ const useTreeViewKeyboardNavigation = ({
       // If the focused item has no children, we select it.
       case key === 'Enter':
         {
-          if ((0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel) && instance.isItemEditable(itemId) && !instance.isItemBeingEdited(itemId)) {
+          if ((0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel) && (0, _useTreeViewLabel2.selectorIsItemEditable)(store.value, {
+            itemId,
+            isItemEditable: params.isItemEditable
+          }) && !(0, _useTreeViewLabel2.selectorIsItemBeingEdited)(store.value, itemId)) {
             instance.setEditedItemId(itemId);
           } else if (canToggleItemExpansion(itemId)) {
             instance.toggleItemExpansion(event, itemId);
@@ -112,7 +121,7 @@ const useTreeViewKeyboardNavigation = ({
                 itemId,
                 keepExistingSelection: true
               });
-            } else if (!instance.isItemSelected(itemId)) {
+            } else if (!(0, _useTreeViewSelection.selectorIsItemSelected)(store.value, itemId)) {
               instance.selectItem({
                 event,
                 itemId
@@ -126,7 +135,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focus the next focusable item
       case key === 'ArrowDown':
         {
-          const nextItem = (0, _tree.getNextNavigableItem)(instance, itemId);
+          const nextItem = (0, _tree.getNextNavigableItem)(store.value, itemId);
           if (nextItem) {
             event.preventDefault();
             instance.focusItem(event, nextItem);
@@ -143,7 +152,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focuses the previous focusable item
       case key === 'ArrowUp':
         {
-          const previousItem = (0, _tree.getPreviousNavigableItem)(instance, itemId);
+          const previousItem = (0, _tree.getPreviousNavigableItem)(store.value, itemId);
           if (previousItem) {
             event.preventDefault();
             instance.focusItem(event, previousItem);
@@ -164,8 +173,8 @@ const useTreeViewKeyboardNavigation = ({
           if (ctrlPressed) {
             return;
           }
-          if (instance.isItemExpanded(itemId)) {
-            const nextItemId = (0, _tree.getNextNavigableItem)(instance, itemId);
+          if ((0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId)) {
+            const nextItemId = (0, _tree.getNextNavigableItem)(store.value, itemId);
             if (nextItemId) {
               instance.focusItem(event, nextItemId);
               event.preventDefault();
@@ -184,11 +193,11 @@ const useTreeViewKeyboardNavigation = ({
           if (ctrlPressed) {
             return;
           }
-          if (canToggleItemExpansion(itemId) && instance.isItemExpanded(itemId)) {
+          if (canToggleItemExpansion(itemId) && (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId)) {
             instance.toggleItemExpansion(event, itemId);
             event.preventDefault();
           } else {
-            const parent = instance.getItemMeta(itemId).parentId;
+            const parent = (0, _useTreeViewItems.selectorItemParentId)(store.value, itemId);
             if (parent) {
               instance.focusItem(event, parent);
               event.preventDefault();
@@ -205,7 +214,7 @@ const useTreeViewKeyboardNavigation = ({
           if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
             instance.selectRangeFromStartToItem(event, itemId);
           } else {
-            instance.focusItem(event, (0, _tree.getFirstNavigableItem)(instance));
+            instance.focusItem(event, (0, _tree.getFirstNavigableItem)(store.value));
           }
           event.preventDefault();
           break;
@@ -219,7 +228,7 @@ const useTreeViewKeyboardNavigation = ({
           if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
             instance.selectRangeFromItemToEnd(event, itemId);
           } else {
-            instance.focusItem(event, (0, _tree.getLastNavigableItem)(instance));
+            instance.focusItem(event, (0, _tree.getLastNavigableItem)(store.value));
           }
           event.preventDefault();
           break;

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

@@ -7,30 +7,38 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewLabelItemPlugin = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _TreeViewProvider = require("../../TreeViewProvider");
+var _useSelector = require("../../hooks/useSelector");
+var _useTreeViewLabel = require("./useTreeViewLabel.selectors");
 const useTreeViewLabelItemPlugin = ({
   props
 }) => {
   const {
-    instance
+    store,
+    label: {
+      isItemEditable
+    }
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const {
     label,
     itemId
   } = props;
   const [labelInputValue, setLabelInputValue] = React.useState(label);
-  const isItemBeingEdited = instance.isItemBeingEdited(itemId);
+  const editable = (0, _useSelector.useSelector)(store, _useTreeViewLabel.selectorIsItemEditable, {
+    itemId,
+    isItemEditable
+  });
+  const editing = (0, _useSelector.useSelector)(store, _useTreeViewLabel.selectorIsItemBeingEdited, itemId);
   React.useEffect(() => {
-    if (!isItemBeingEdited) {
+    if (!editing) {
       setLabelInputValue(label);
     }
-  }, [isItemBeingEdited, label]);
+  }, [editing, label]);
   return {
     propsEnhancers: {
       labelInput: ({
         externalEventHandlers,
         interactions
       }) => {
-        const editable = instance.isItemEditable(itemId);
         if (!editable) {
           return {};
         }

package/node/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -11,41 +11,26 @@ var React = _interopRequireWildcard(require("react"));
 var _warning = require("@mui/x-internals/warning");
 var _useTreeViewLabel = require("./useTreeViewLabel.itemPlugin");
 const useTreeViewLabel = ({
-  instance,
-  state,
-  setState,
+  store,
   params
 }) => {
-  const editedItemRef = React.useRef(state.editedItemId);
-  const isItemBeingEditedRef = itemId => editedItemRef.current === itemId;
   const setEditedItemId = editedItemId => {
-    setState(prevState => (0, _extends2.default)({}, prevState, {
-      editedItemId
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
+      label: {
+        editedItemId
+      }
     }));
-    editedItemRef.current = editedItemId;
-  };
-  const isItemBeingEdited = itemId => itemId === state.editedItemId;
-  const isTreeViewEditable = Boolean(params.isItemEditable);
-  const isItemEditable = itemId => {
-    if (itemId == null || !isTreeViewEditable) {
-      return false;
-    }
-    const item = instance.getItem(itemId);
-    if (!item) {
-      return false;
-    }
-    return typeof params.isItemEditable === 'function' ? params.isItemEditable(item) : Boolean(params.isItemEditable);
   };
   const updateItemLabel = (itemId, label) => {
     if (!label) {
       throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'The label of an item cannot be empty.', itemId].join('\n'));
     }
-    setState(prevState => {
-      const item = prevState.items.itemMetaMap[itemId];
+    store.update(prevState => {
+      const item = prevState.items.itemMetaLookup[itemId];
       if (item.label !== label) {
         return (0, _extends2.default)({}, prevState, {
           items: (0, _extends2.default)({}, prevState.items, {
-            itemMetaMap: (0, _extends2.default)({}, prevState.items.itemMetaMap, {
+            itemMetaLookup: (0, _extends2.default)({}, prevState.items.itemMetaLookup, {
               [itemId]: (0, _extends2.default)({}, item, {
                 label
               })
@@ -59,18 +44,20 @@ const useTreeViewLabel = ({
       params.onItemLabelChange(itemId, label);
     }
   };
+  const pluginContextValue = React.useMemo(() => ({
+    label: {
+      isItemEditable: params.isItemEditable
+    }
+  }), [params.isItemEditable]);
   return {
     instance: {
       setEditedItemId,
-      isItemBeingEdited,
-      updateItemLabel,
-      isItemEditable,
-      isTreeViewEditable,
-      isItemBeingEditedRef
+      updateItemLabel
     },
     publicAPI: {
       updateItemLabel
-    }
+    },
+    contextValue: pluginContextValue
   };
 };
 exports.useTreeViewLabel = useTreeViewLabel;
@@ -90,7 +77,9 @@ useTreeViewLabel.getDefaultizedParams = ({
   });
 };
 useTreeViewLabel.getInitialState = () => ({
-  editedItemId: null
+  label: {
+    editedItemId: null
+  }
 });
 useTreeViewLabel.params = {
   onItemLabelChange: true,

package/node/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorIsItemEditable = exports.selectorIsItemBeingEdited = void 0;
+var _selectors = require("../../utils/selectors");
+var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
+const selectorTreeViewLabelState = state => state.label;
+
+/**
+ * Check if an item is editable.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {object} params The parameters.
+ * @param {TreeViewItemId} params.itemId The id of the item to check.
+ * @param {((item: any) => boolean) | boolean} params.isItemEditable The function to determine if an item is editable.
+ * @returns {boolean} `true` if the item is editable, `false` otherwise.
+ */
+const selectorIsItemEditable = exports.selectorIsItemEditable = (0, _selectors.createSelector)([(_, args) => args, (state, args) => (0, _useTreeViewItems.selectorItemModel)(state, args.itemId)], (args, itemModel) => {
+  if (!itemModel || !args.isItemEditable) {
+    return false;
+  }
+  return typeof args.isItemEditable === 'function' ? args.isItemEditable(itemModel) : true;
+});
+
+/**
+ * Check if an item is being edited.
+ * @param {TreeViewState<[UseTreeViewLabelSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is being edited, `false` otherwise.
+ */
+const selectorIsItemBeingEdited = exports.selectorIsItemBeingEdited = (0, _selectors.createSelector)([selectorTreeViewLabelState, (_, itemId) => itemId], (labelState, itemId) => labelState.editedItemId === itemId);

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

@@ -7,19 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewSelectionItemPlugin = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _TreeViewProvider = require("../../TreeViewProvider");
-function getCheckboxStatus({
+var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
+var _useTreeViewSelection = require("./useTreeViewSelection.selectors");
+var _useSelector = require("../../hooks/useSelector");
+function selectorItemCheckboxStatus(state, {
   itemId,
-  instance,
-  selectionPropagation,
-  selected
+  selectionPropagation
 }) {
-  if (selected) {
+  if ((0, _useTreeViewSelection.selectorIsItemSelected)(state, itemId)) {
     return {
       indeterminate: false,
       checked: true
     };
   }
-  const children = instance.getItemOrderedChildrenIds(itemId);
+  const children = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemId);
   if (children.length === 0) {
     return {
       indeterminate: false,
@@ -30,18 +31,18 @@ function getCheckboxStatus({
   let hasUnSelectedDescendant = false;
   const traverseDescendants = itemToTraverseId => {
     if (itemToTraverseId !== itemId) {
-      if (instance.isItemSelected(itemToTraverseId)) {
+      if ((0, _useTreeViewSelection.selectorIsItemSelected)(state, itemToTraverseId)) {
         hasSelectedDescendant = true;
       } else {
         hasUnSelectedDescendant = true;
       }
     }
-    instance.getItemOrderedChildrenIds(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 = ({
@@ -51,13 +52,17 @@ const useTreeViewSelectionItemPlugin = ({
     itemId
   } = props;
   const {
-    instance,
+    store,
     selection: {
       disableSelection,
       checkboxSelection,
       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: ({
@@ -75,12 +80,6 @@ const useTreeViewSelectionItemPlugin = ({
           }
           interactions.handleCheckboxSelection(event);
         };
-        const checkboxStatus = getCheckboxStatus({
-          instance,
-          itemId,
-          selectionPropagation,
-          selected: status.selected
-        });
         return (0, _extends2.default)({
           visible: checkboxSelection,
           disabled: disableSelection || status.disabled,