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

package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createExpandedItemsMap = void 0;
+exports.getExpansionTrigger = exports.createExpandedItemsMap = void 0;
 const createExpandedItemsMap = expandedItems => {
   const expandedItemsMap = new Map();
   expandedItems.forEach(id => {
@@ -11,4 +11,17 @@ const createExpandedItemsMap = expandedItems => {
   });
   return expandedItemsMap;
 };
-exports.createExpandedItemsMap = createExpandedItemsMap;
+exports.createExpandedItemsMap = createExpandedItemsMap;
+const getExpansionTrigger = ({
+  isItemEditable,
+  expansionTrigger
+}) => {
+  if (expansionTrigger) {
+    return expansionTrigger;
+  }
+  if (isItemEditable) {
+    return 'iconContainer';
+  }
+  return 'content';
+};
+exports.getExpansionTrigger = getExpansionTrigger;

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/node/useTreeItem/useTreeItem.js

@@ -20,6 +20,7 @@ var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus/useTreeVi
 var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeViewId.utils");
 var _useTreeViewItems = require("../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
 var _useTreeViewId2 = require("../internals/corePlugins/useTreeViewId/useTreeViewId.selectors");
+var _useTreeViewExpansion = require("../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
 const useTreeItem = parameters => {
   const {
     runItemPlugins,
@@ -30,9 +31,6 @@ const useTreeItem = parameters => {
       disableSelection,
       checkboxSelection
     },
-    expansion: {
-      expansionTrigger
-    },
     label: labelContext,
     instance,
     publicAPI,
@@ -129,7 +127,7 @@ const useTreeItem = parameters => {
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
-    if (expansionTrigger === 'content') {
+    if ((0, _useTreeViewExpansion.selectorItemExpansionTrigger)(store.value) === 'content') {
       interactions.handleExpansion(event);
     }
     if (!checkboxSelection) {
@@ -152,7 +150,7 @@ const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    if (expansionTrigger === 'iconContainer') {
+    if ((0, _useTreeViewExpansion.selectorItemExpansionTrigger)(store.value) === 'iconContainer') {
       interactions.handleExpansion(event);
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.0.0-alpha.1",
+  "version": "8.0.0-alpha.10",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,15 +33,15 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.0",
+    "@babel/runtime": "^7.26.7",
     "@mui/utils": "^5.16.6 || ^6.0.0",
-    "@types/react-transition-group": "^4.4.11",
+    "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
     "reselect": "^5.1.1",
-    "use-sync-external-store": "^1.2.2",
-    "@mui/x-internals": "8.0.0-alpha.1"
+    "use-sync-external-store": "^1.4.0",
+    "@mui/x-internals": "8.0.0-alpha.10"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/useTreeItem/useTreeItem.js

@@ -13,6 +13,7 @@ import { selectorIsItemTheDefaultFocusableItem } from "../internals/plugins/useT
 import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
 import { selectorCanItemBeFocused } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
 import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
+import { selectorItemExpansionTrigger } from "../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
 export const useTreeItem = parameters => {
   const {
     runItemPlugins,
@@ -23,9 +24,6 @@ export const useTreeItem = parameters => {
       disableSelection,
       checkboxSelection
     },
-    expansion: {
-      expansionTrigger
-    },
     label: labelContext,
     instance,
     publicAPI,
@@ -122,7 +120,7 @@ export const useTreeItem = parameters => {
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
-    if (expansionTrigger === 'content') {
+    if (selectorItemExpansionTrigger(store.value) === 'content') {
       interactions.handleExpansion(event);
     }
     if (!checkboxSelection) {
@@ -145,7 +143,7 @@ export const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    if (expansionTrigger === 'iconContainer') {
+    if (selectorItemExpansionTrigger(store.value) === 'iconContainer') {
       interactions.handleExpansion(event);
     }
   };

package/useTreeItem/useTreeItem.types.d.ts

@@ -78,7 +78,7 @@ export interface UseTreeItemLabelInputSlotOwnProps {
 }
 export type UseTreeItemLabelInputSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemLabelInputSlotOwnProps;
 export interface UseTreeItemCheckboxSlotOwnProps {
-    ref: React.RefObject<HTMLButtonElement>;
+    ref: React.RefObject<HTMLButtonElement | null>;
 }
 export type UseTreeItemCheckboxSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemCheckboxSlotOwnProps;
 export interface UseTreeItemGroupTransitionSlotOwnProps {