@mui/x-tree-view 7.8.0 → 7.10.0

package/node/RichTreeView/RichTreeView.js

@@ -146,6 +146,10 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
     current: _propTypes.default.shape({
       focusItem: _propTypes.default.func.isRequired,
       getItem: _propTypes.default.func.isRequired,
+      getItemDOMElement: _propTypes.default.func.isRequired,
+      getItemOrderedChildrenIds: _propTypes.default.func.isRequired,
+      getItemTree: _propTypes.default.func.isRequired,
+      selectItem: _propTypes.default.func.isRequired,
       setItemExpansion: _propTypes.default.func.isRequired
     })
   }),
@@ -243,34 +247,34 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   multiSelect: _propTypes.default.bool,
   /**
    * Callback fired when tree items are expanded/collapsed.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemIds The ids of the expanded items.
    */
   onExpandedItemsChange: _propTypes.default.func,
   /**
    * Callback fired when a tree item is expanded or collapsed.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
   onItemExpansionToggle: _propTypes.default.func,
   /**
    * Callback fired when tree items are focused.
-   * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
    * @param {string} itemId The id of the focused item.
    * @param {string} value of the focused item.
    */
   onItemFocus: _propTypes.default.func,
   /**
    * Callback fired when a tree item is selected or deselected.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
   onItemSelectionToggle: _propTypes.default.func,
   /**
    * Callback fired when tree items are selected/deselected.
-   * @param {React.SyntheticEvent} event The event source of the callback
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {string[] | string} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
    */

package/node/SimpleTreeView/SimpleTreeView.js

@@ -104,6 +104,10 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
     current: _propTypes.default.shape({
       focusItem: _propTypes.default.func.isRequired,
       getItem: _propTypes.default.func.isRequired,
+      getItemDOMElement: _propTypes.default.func.isRequired,
+      getItemOrderedChildrenIds: _propTypes.default.func.isRequired,
+      getItemTree: _propTypes.default.func.isRequired,
+      selectItem: _propTypes.default.func.isRequired,
       setItemExpansion: _propTypes.default.func.isRequired
     })
   }),
@@ -179,34 +183,34 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   multiSelect: _propTypes.default.bool,
   /**
    * Callback fired when tree items are expanded/collapsed.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemIds The ids of the expanded items.
    */
   onExpandedItemsChange: _propTypes.default.func,
   /**
    * Callback fired when a tree item is expanded or collapsed.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
   onItemExpansionToggle: _propTypes.default.func,
   /**
    * Callback fired when tree items are focused.
-   * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
    * @param {string} itemId The id of the focused item.
    * @param {string} value of the focused item.
    */
   onItemFocus: _propTypes.default.func,
   /**
    * Callback fired when a tree item is selected or deselected.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
   onItemSelectionToggle: _propTypes.default.func,
   /**
    * Callback fired when tree items are selected/deselected.
-   * @param {React.SyntheticEvent} event The event source of the callback
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {string[] | string} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
    */

package/node/TreeItem/useTreeItemState.js

@@ -45,10 +45,18 @@ function useTreeItemState(itemId) {
         if (event.shiftKey) {
           instance.expandSelectionRange(event, itemId);
         } else {
-          instance.selectItem(event, itemId, true);
+          instance.selectItem({
+            event,
+            itemId,
+            keepExistingSelection: true
+          });
         }
       } else {
-        instance.selectItem(event, itemId, false);
+        instance.selectItem({
+          event,
+          itemId,
+          shouldBeSelected: true
+        });
       }
     }
   };
@@ -60,7 +68,12 @@ function useTreeItemState(itemId) {
     if (multiSelect && hasShift) {
       instance.expandSelectionRange(event, itemId);
     } else {
-      instance.selectItem(event, itemId, multiSelect, event.target.checked);
+      instance.selectItem({
+        event,
+        itemId,
+        keepExistingSelection: multiSelect,
+        shouldBeSelected: event.target.checked
+      });
     }
   };
   const preventSelection = event => {

package/node/TreeView/TreeView.js

@@ -81,6 +81,10 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
     current: _propTypes.default.shape({
       focusItem: _propTypes.default.func.isRequired,
       getItem: _propTypes.default.func.isRequired,
+      getItemDOMElement: _propTypes.default.func.isRequired,
+      getItemOrderedChildrenIds: _propTypes.default.func.isRequired,
+      getItemTree: _propTypes.default.func.isRequired,
+      selectItem: _propTypes.default.func.isRequired,
       setItemExpansion: _propTypes.default.func.isRequired
     })
   }),
@@ -156,34 +160,34 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
   multiSelect: _propTypes.default.bool,
   /**
    * Callback fired when tree items are expanded/collapsed.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemIds The ids of the expanded items.
    */
   onExpandedItemsChange: _propTypes.default.func,
   /**
    * Callback fired when a tree item is expanded or collapsed.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
   onItemExpansionToggle: _propTypes.default.func,
   /**
    * Callback fired when tree items are focused.
-   * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
    * @param {string} itemId The id of the focused item.
    * @param {string} value of the focused item.
    */
   onItemFocus: _propTypes.default.func,
   /**
    * Callback fired when a tree item is selected or deselected.
-   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
   onItemSelectionToggle: _propTypes.default.func,
   /**
    * Callback fired when tree items are selected/deselected.
-   * @param {React.SyntheticEvent} event The event source of the callback
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {string[] | string} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
    */

package/node/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -63,10 +63,18 @@ const useTreeItem2Utils = ({
       if (event.shiftKey) {
         instance.expandSelectionRange(event, itemId);
       } else {
-        instance.selectItem(event, itemId, true);
+        instance.selectItem({
+          event,
+          itemId,
+          keepExistingSelection: true
+        });
       }
     } else {
-      instance.selectItem(event, itemId, false);
+      instance.selectItem({
+        event,
+        itemId,
+        shouldBeSelected: true
+      });
     }
   };
   const handleCheckboxSelection = event => {
@@ -74,7 +82,12 @@ const useTreeItem2Utils = ({
     if (multiSelect && hasShift) {
       instance.expandSelectionRange(event, itemId);
     } else {
-      instance.selectItem(event, itemId, multiSelect, event.target.checked);
+      instance.selectItem({
+        event,
+        itemId,
+        keepExistingSelection: multiSelect,
+        shouldBeSelected: event.target.checked
+      });
     }
   };
   const interactions = {

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.8.0
+ * @mui/x-tree-view v7.10.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/corePlugins/corePlugins.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TREE_VIEW_CORE_PLUGINS = void 0;
 var _useTreeViewInstanceEvents = require("./useTreeViewInstanceEvents");
+var _useTreeViewOptionalPlugins = require("./useTreeViewOptionalPlugins");
 var _useTreeViewId = require("./useTreeViewId");
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the tree view components.
  */
-const TREE_VIEW_CORE_PLUGINS = exports.TREE_VIEW_CORE_PLUGINS = [_useTreeViewInstanceEvents.useTreeViewInstanceEvents, _useTreeViewId.useTreeViewId];
+const TREE_VIEW_CORE_PLUGINS = exports.TREE_VIEW_CORE_PLUGINS = [_useTreeViewInstanceEvents.useTreeViewInstanceEvents, _useTreeViewOptionalPlugins.useTreeViewOptionalPlugins, _useTreeViewId.useTreeViewId];

package/node/internals/corePlugins/useTreeViewOptionalPlugins/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useTreeViewOptionalPlugins", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewOptionalPlugins.useTreeViewOptionalPlugins;
+  }
+});
+var _useTreeViewOptionalPlugins = require("./useTreeViewOptionalPlugins");

package/node/internals/corePlugins/useTreeViewOptionalPlugins/useTreeViewOptionalPlugins.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewOptionalPlugins = void 0;
+const useTreeViewOptionalPlugins = ({
+  plugins
+}) => {
+  const pluginSet = new Set(plugins);
+  const getAvailablePlugins = () => pluginSet;
+  return {
+    instance: {
+      getAvailablePlugins
+    }
+  };
+};
+exports.useTreeViewOptionalPlugins = useTreeViewOptionalPlugins;
+useTreeViewOptionalPlugins.params = {};

package/node/internals/corePlugins/useTreeViewOptionalPlugins/useTreeViewOptionalPlugins.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -52,8 +52,7 @@ const useTreeViewFocus = ({
     return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
   };
   const innerFocusItem = (event, itemId) => {
-    const itemMeta = instance.getItemMeta(itemId);
-    const itemElement = document.getElementById(instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute));
+    const itemElement = instance.getItemDOMElement(itemId);
     if (itemElement) {
       itemElement.focus();
     }

package/node/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -6,11 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeViewItems = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
 var _useTreeViewItems = require("./useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const updateItemsState = ({
@@ -46,7 +48,6 @@ const updateItemsState = ({
       depth
     };
     itemMap[id] = item;
-    itemOrderedChildrenIds[id] = [];
     const parentIdWithDefault = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
     if (!itemOrderedChildrenIds[parentIdWithDefault]) {
       itemOrderedChildrenIds[parentIdWithDefault] = [];
@@ -75,6 +76,18 @@ const useTreeViewItems = ({
 }) => {
   const getItemMeta = React.useCallback(itemId => state.items.itemMetaMap[itemId], [state.items.itemMetaMap]);
   const getItem = React.useCallback(itemId => state.items.itemMap[itemId], [state.items.itemMap]);
+  const getItemTree = React.useCallback(() => {
+    const getItemFromItemId = id => {
+      const _state$items$itemMap$ = state.items.itemMap[id],
+        item = (0, _objectWithoutPropertiesLoose2.default)(_state$items$itemMap$, _excluded);
+      const newChildren = state.items.itemOrderedChildrenIds[id];
+      if (newChildren) {
+        item.children = newChildren.map(getItemFromItemId);
+      }
+      return item;
+    };
+    return state.items.itemOrderedChildrenIds[_useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID].map(getItemFromItemId);
+  }, [state.items.itemMap, state.items.itemOrderedChildrenIds]);
   const isItemDisabled = React.useCallback(itemId => {
     if (itemId == null) {
       return false;
@@ -101,6 +114,13 @@ const useTreeViewItems = ({
     return state.items.itemChildrenIndexes[parentId][itemId];
   }, [instance, state.items.itemChildrenIndexes]);
   const getItemOrderedChildrenIds = React.useCallback(itemId => state.items.itemOrderedChildrenIds[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? [], [state.items.itemOrderedChildrenIds]);
+  const getItemDOMElement = itemId => {
+    const itemMeta = instance.getItemMeta(itemId);
+    if (itemMeta == null) {
+      return null;
+    }
+    return document.getElementById(instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute));
+  };
   const isItemNavigable = itemId => {
     if (params.disabledItemsFocusable) {
       return true;
@@ -142,7 +162,7 @@ const useTreeViewItems = ({
         label: item.label,
         itemId: item.id,
         id: item.idAttribute,
-        children: state.items.itemOrderedChildrenIds[id].map(getPropsFromItemId)
+        children: state.items.itemOrderedChildrenIds[id]?.map(getPropsFromItemId)
       };
     };
     return state.items.itemOrderedChildrenIds[_useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID].map(getPropsFromItemId);
@@ -154,13 +174,18 @@ const useTreeViewItems = ({
       }
     }),
     publicAPI: {
-      getItem
+      getItem,
+      getItemDOMElement,
+      getItemTree,
+      getItemOrderedChildrenIds
     },
     instance: {
       getItemMeta,
       getItem,
+      getItemTree,
       getItemsToRender,
       getItemIndex,
+      getItemDOMElement,
       getItemOrderedChildrenIds,
       isItemDisabled,
       isItemNavigable,

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

@@ -83,10 +83,13 @@ const useTreeViewKeyboardNavigation = ({
           event.preventDefault();
           if (params.multiSelect && event.shiftKey) {
             instance.expandSelectionRange(event, itemId);
-          } else if (params.multiSelect) {
-            instance.selectItem(event, itemId, true);
           } else {
-            instance.selectItem(event, itemId, false);
+            instance.selectItem({
+              event,
+              itemId,
+              keepExistingSelection: params.multiSelect,
+              shouldBeSelected: params.multiSelect ? undefined : true
+            });
           }
           break;
         }
@@ -101,9 +104,16 @@ const useTreeViewKeyboardNavigation = ({
           } else if (canToggleItemSelection(itemId)) {
             if (params.multiSelect) {
               event.preventDefault();
-              instance.selectItem(event, itemId, true);
+              instance.selectItem({
+                event,
+                itemId,
+                keepExistingSelection: true
+              });
             } else if (!instance.isItemSelected(itemId)) {
-              instance.selectItem(event, itemId, false);
+              instance.selectItem({
+                event,
+                itemId
+              });
               event.preventDefault();
             }
           }

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

@@ -55,7 +55,12 @@ const useTreeViewSelection = ({
     models.selectedItems.setControlledValue(newSelectedItems);
   };
   const isItemSelected = itemId => selectedItemsMap.has(itemId);
-  const selectItem = (event, itemId, keepExistingSelection, newValue) => {
+  const selectItem = ({
+    event,
+    itemId,
+    keepExistingSelection = false,
+    shouldBeSelected
+  }) => {
     if (params.disableSelection) {
       return;
     }
@@ -63,16 +68,16 @@ const useTreeViewSelection = ({
     if (keepExistingSelection) {
       const cleanSelectedItems = (0, _useTreeViewSelection.convertSelectedItemsToArray)(models.selectedItems.value);
       const isSelectedBefore = instance.isItemSelected(itemId);
-      if (isSelectedBefore && (newValue === false || newValue == null)) {
+      if (isSelectedBefore && (shouldBeSelected === false || shouldBeSelected == null)) {
         newSelected = cleanSelectedItems.filter(id => id !== itemId);
-      } else if (!isSelectedBefore && (newValue === true || newValue == null)) {
+      } else if (!isSelectedBefore && (shouldBeSelected === true || shouldBeSelected == null)) {
         newSelected = [itemId].concat(cleanSelectedItems);
       } else {
         newSelected = cleanSelectedItems;
       }
     } else {
       // eslint-disable-next-line no-lonely-if
-      if (newValue === false) {
+      if (shouldBeSelected === false || shouldBeSelected == null && instance.isItemSelected(itemId)) {
         newSelected = params.multiSelect ? [] : null;
       } else {
         newSelected = params.multiSelect ? [itemId] : itemId;
@@ -151,6 +156,9 @@ const useTreeViewSelection = ({
     getRootProps: () => ({
       'aria-multiselectable': params.multiSelect
     }),
+    publicAPI: {
+      selectItem
+    },
     instance: {
       isItemSelected,
       selectItem,

package/node/internals/useTreeView/useTreeView.js

@@ -129,7 +129,8 @@ const useTreeView = ({
       state,
       setState,
       rootRef: innerRootRef,
-      models
+      models,
+      plugins
     });
     if (pluginResponse.getRootProps) {
       rootPropsGetters.push(pluginResponse.getRootProps);

package/node/internals/utils/plugins.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasPlugin = void 0;
+const hasPlugin = (instance, plugin) => {
+  const plugins = instance.getAvailablePlugins();
+  return plugins.has(plugin);
+};
+exports.hasPlugin = hasPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.8.0",
+  "version": "7.10.0",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -35,8 +35,8 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.15.20",
-    "@mui/utils": "^5.15.20",
+    "@mui/system": "^5.16.0",
+    "@mui/utils": "^5.16.0",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",