@mui/x-tree-view 7.18.0 → 7.19.0

package/node/TreeItem/TreeItemContent.js

@@ -85,7 +85,7 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
     /*#__PURE__*/
     /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
     (0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({}, other, {
-      className: (0, _clsx.default)(className, classes.root, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
+      className: (0, _clsx.default)(classes.root, className, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
       onClick: handleClick,
       onMouseDown: handleMouseDown,
       ref: ref,

package/node/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -7,13 +7,6 @@ exports.useTreeItem2Utils = void 0;
 var _TreeViewProvider = require("../../internals/TreeViewProvider");
 var _useTreeViewLabel = require("../../internals/plugins/useTreeViewLabel");
 var _plugins = require("../../internals/utils/plugins");
-const isItemExpandable = reactChildren => {
-  if (Array.isArray(reactChildren)) {
-    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
-  }
-  return Boolean(reactChildren);
-};
-
 /**
  * Plugins that need to be present in the Tree View in order for `useTreeItem2Utils` to work correctly.
  */
@@ -22,6 +15,12 @@ const isItemExpandable = reactChildren => {
  * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
  */
 
+const isItemExpandable = reactChildren => {
+  if (Array.isArray(reactChildren)) {
+    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
+  }
+  return Boolean(reactChildren);
+};
 const useTreeItem2Utils = ({
   itemId,
   children
@@ -30,7 +29,8 @@ const useTreeItem2Utils = ({
     instance,
     selection: {
       multiSelect
-    }
+    },
+    publicAPI
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const status = {
     expandable: isItemExpandable(children),
@@ -140,7 +140,8 @@ const useTreeItem2Utils = ({
   };
   return {
     interactions,
-    status
+    status,
+    publicAPI
   };
 };
 exports.useTreeItem2Utils = useTreeItem2Utils;

package/node/index.js

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

package/node/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useTreeViewContext = require("./useTreeViewContext");
 var _utils = require("../utils/utils");
+var _useTreeViewId = require("../corePlugins/useTreeViewId/useTreeViewId.utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const TreeViewChildrenItemContext = exports.TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
@@ -23,6 +24,7 @@ function TreeViewChildrenItemProvider(props) {
   } = props;
   const {
     instance,
+    treeId,
     rootRef
   } = (0, _useTreeViewContext.useTreeViewContext)();
   const childrenIdAttrToIdRef = React.useRef(new Map());
@@ -37,7 +39,11 @@ function TreeViewChildrenItemProvider(props) {
       // Undefined during 1st render
       const itemMeta = instance.getItemMeta(itemId);
       if (itemMeta !== undefined) {
-        idAttr = instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute);
+        idAttr = (0, _useTreeViewId.generateTreeItemIdAttribute)({
+          itemId,
+          treeId,
+          id: itemMeta.idAttribute
+        });
       }
     }
     if (idAttr == null) {

package/node/internals/TreeViewProvider/TreeViewProvider.js

@@ -21,7 +21,8 @@ function TreeViewProvider(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewContext.TreeViewContext.Provider, {
     value: value,
     children: value.wrapRoot({
-      children
+      children,
+      instance: value.instance
     })
   });
 }

package/node/internals/corePlugins/useTreeViewId/useTreeViewId.js

@@ -1,28 +1,49 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTreeViewId = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useTreeViewId = require("./useTreeViewId.utils");
 const useTreeViewId = ({
-  params
+  params,
+  state,
+  setState
 }) => {
-  const treeId = (0, _useId.default)(params.id);
-  const getTreeItemIdAttribute = React.useCallback((itemId, idAttribute) => idAttribute ?? `${treeId}-${itemId}`, [treeId]);
+  const treeId = state.id.treeId;
+  React.useEffect(() => {
+    setState(prevState => {
+      if (prevState.id.treeId === params.id) {
+        return prevState;
+      }
+      return (0, _extends2.default)({}, prevState, {
+        id: (0, _extends2.default)({}, prevState.id, {
+          treeId: params.id ?? (0, _useTreeViewId.createTreeViewDefaultId)()
+        })
+      });
+    });
+  }, [setState, params.id]);
   return {
     getRootProps: () => ({
       id: treeId
     }),
-    instance: {
-      getTreeItemIdAttribute
+    contextValue: {
+      treeId
     }
   };
 };
 exports.useTreeViewId = useTreeViewId;
 useTreeViewId.params = {
   id: true
-};
+};
+useTreeViewId.getInitialState = ({
+  id
+}) => ({
+  id: {
+    treeId: id ?? (0, _useTreeViewId.createTreeViewDefaultId)()
+  }
+});

package/node/internals/corePlugins/useTreeViewId/useTreeViewId.utils.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateTreeItemIdAttribute = exports.createTreeViewDefaultId = void 0;
+let globalTreeViewDefaultId = 0;
+const createTreeViewDefaultId = () => {
+  globalTreeViewDefaultId += 1;
+  return `mui-tree-view-${globalTreeViewDefaultId}`;
+};
+
+/**
+ * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a tree item.
+ * If the user explicitly defined an id attribute, it will be returned.
+ * Otherwise, the method creates a unique id for the item based on the Tree View id attribute and the item `itemId`
+ * @param {object} params The parameters to determine the id attribute of the item.
+ * @param {TreeViewItemId} params.itemId The id of the item to get the id attribute of.
+ * @param {string | undefined} params.idAttribute The id attribute of the item if explicitly defined by the user.
+ * @param {string} params.treeId The id attribute of the Tree View.
+ * @returns {string} The id attribute of the item.
+ */
+exports.createTreeViewDefaultId = createTreeViewDefaultId;
+const generateTreeItemIdAttribute = ({
+  id,
+  treeId = '',
+  itemId
+}) => {
+  if (id != null) {
+    return id;
+  }
+  return `${treeId}-${itemId}`;
+};
+exports.generateTreeItemIdAttribute = generateTreeItemIdAttribute;

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

@@ -95,7 +95,9 @@ useTreeViewExpansion.models = {
   }
 };
 const DEFAULT_EXPANDED_ITEMS = [];
-useTreeViewExpansion.getDefaultizedParams = params => (0, _extends2.default)({}, params, {
+useTreeViewExpansion.getDefaultizedParams = ({
+  params
+}) => (0, _extends2.default)({}, params, {
   defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_ITEMS
 });
 useTreeViewExpansion.params = {

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

@@ -72,7 +72,7 @@ const useTreeViewFocus = ({
     }
     const itemMeta = instance.getItemMeta(state.focusedItemId);
     if (itemMeta) {
-      const itemElement = document.getElementById(instance.getTreeItemIdAttribute(state.focusedItemId, itemMeta.idAttribute));
+      const itemElement = instance.getItemDOMElement(state.focusedItemId);
       if (itemElement) {
         itemElement.blur();
       }

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

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
 var _useTreeViewItems = require("./useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
+var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children"];
 const updateItemsState = ({
@@ -118,7 +119,11 @@ const useTreeViewItems = ({
     if (itemMeta == null) {
       return null;
     }
-    return document.getElementById(instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute));
+    return document.getElementById((0, _useTreeViewId.generateTreeItemIdAttribute)({
+      treeId: state.id.treeId,
+      itemId,
+      id: itemMeta.idAttribute
+    }));
   };
   const isItemNavigable = itemId => {
     if (params.disabledItemsFocusable) {
@@ -209,7 +214,9 @@ useTreeViewItems.getInitialState = params => ({
     getItemLabel: params.getItemLabel
   })
 });
-useTreeViewItems.getDefaultizedParams = params => (0, _extends2.default)({}, params, {
+useTreeViewItems.getDefaultizedParams = ({
+  params
+}) => (0, _extends2.default)({}, params, {
   disabledItemsFocusable: params.disabledItemsFocusable ?? false,
   itemChildrenIndentation: params.itemChildrenIndentation ?? '12px'
 });

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

@@ -16,6 +16,7 @@ var _TreeViewProvider = require("../../TreeViewProvider");
 var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
+var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useTreeViewJSXItems = ({
   instance,
@@ -107,7 +108,8 @@ const useTreeViewJSXItemsItemPlugin = ({
   contentRef
 }) => {
   const {
-    instance
+    instance,
+    treeId
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const {
     children,
@@ -131,12 +133,16 @@ const useTreeViewJSXItemsItemPlugin = ({
 
   // Prevent any flashing
   (0, _useEnhancedEffect.default)(() => {
-    const idAttributeWithDefault = instance.getTreeItemIdAttribute(itemId, id);
-    registerChild(idAttributeWithDefault, itemId);
+    const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
+      itemId,
+      treeId,
+      id
+    });
+    registerChild(idAttribute, itemId);
     return () => {
-      unregisterChild(idAttributeWithDefault);
+      unregisterChild(idAttribute);
     };
-  }, [instance, registerChild, unregisterChild, itemId, id]);
+  }, [registerChild, unregisterChild, itemId, id, treeId]);
   React.useEffect(() => {
     return instance.insertJSXItem({
       id: itemId,

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

@@ -161,6 +161,9 @@ const useTreeViewKeyboardNavigation = ({
       // If the focused item is collapsed and has children, we expand it
       case key === 'ArrowRight' && !isRtl || key === 'ArrowLeft' && isRtl:
         {
+          if (ctrlPressed) {
+            return;
+          }
           if (instance.isItemExpanded(itemId)) {
             const nextItemId = (0, _tree.getNextNavigableItem)(instance, itemId);
             if (nextItemId) {
@@ -178,6 +181,9 @@ const useTreeViewKeyboardNavigation = ({
       // If the focused item is collapsed and has a parent, we move the focus to this parent
       case key === 'ArrowLeft' && !isRtl || key === 'ArrowRight' && isRtl:
         {
+          if (ctrlPressed) {
+            return;
+          }
           if (canToggleItemExpansion(itemId) && instance.isItemExpanded(itemId)) {
             instance.toggleItemExpansion(event, itemId);
             event.preventDefault();

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

@@ -14,14 +14,8 @@ const useTreeViewLabel = ({
   instance,
   state,
   setState,
-  params,
-  experimentalFeatures
+  params
 }) => {
-  if (process.env.NODE_ENV !== 'production') {
-    if (params.isItemEditable && !experimentalFeatures?.labelEditing) {
-      (0, _warning.warnOnce)(['MUI X: The label editing feature requires the `labelEditing` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ labelEditing: true}}` to the `RichTreeViewPro` component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/editing/']);
-    }
-  }
   const editedItemRef = React.useRef(state.editedItemId);
   const isItemBeingEditedRef = itemId => editedItemRef.current === itemId;
   const setEditedItemId = editedItemId => {
@@ -31,7 +25,7 @@ const useTreeViewLabel = ({
     editedItemRef.current = editedItemId;
   };
   const isItemBeingEdited = itemId => itemId === state.editedItemId;
-  const isTreeViewEditable = Boolean(params.isItemEditable) && !!experimentalFeatures.labelEditing;
+  const isTreeViewEditable = Boolean(params.isItemEditable);
   const isItemEditable = itemId => {
     if (itemId == null || !isTreeViewEditable) {
       return false;
@@ -81,6 +75,20 @@ const useTreeViewLabel = ({
 };
 exports.useTreeViewLabel = useTreeViewLabel;
 useTreeViewLabel.itemPlugin = _useTreeViewLabel.useTreeViewLabelItemPlugin;
+useTreeViewLabel.getDefaultizedParams = ({
+  params,
+  experimentalFeatures
+}) => {
+  const canUseFeature = experimentalFeatures?.labelEditing;
+  if (process.env.NODE_ENV !== 'production') {
+    if (params.isItemEditable && !canUseFeature) {
+      (0, _warning.warnOnce)(['MUI X: The label editing feature requires the `labelEditing` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ labelEditing: true}}` to the `RichTreeViewPro` component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/editing/']);
+    }
+  }
+  return (0, _extends2.default)({}, params, {
+    isItemEditable: canUseFeature ? params.isItemEditable ?? false : false
+  });
+};
 useTreeViewLabel.getInitialState = () => ({
   editedItemId: null
 });

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

@@ -183,7 +183,9 @@ useTreeViewSelection.models = {
   }
 };
 const DEFAULT_SELECTED_ITEMS = [];
-useTreeViewSelection.getDefaultizedParams = params => (0, _extends2.default)({}, params, {
+useTreeViewSelection.getDefaultizedParams = ({
+  params
+}) => (0, _extends2.default)({}, params, {
   disableSelection: params.disableSelection ?? false,
   multiSelect: params.multiSelect ?? false,
   checkboxSelection: params.checkboxSelection ?? false,

package/node/internals/useTreeView/extractPluginParamsFromProps.js

@@ -13,7 +13,7 @@ const extractPluginParamsFromProps = _ref => {
         slots,
         slotProps,
         apiRef,
-        experimentalFeatures
+        experimentalFeatures: inExperimentalFeatures
       },
       plugins
     } = _ref,
@@ -32,9 +32,13 @@ const extractPluginParamsFromProps = _ref => {
       forwardedProps[propName] = prop;
     }
   });
+  const experimentalFeatures = inExperimentalFeatures ?? {};
   const defaultizedPluginParams = plugins.reduce((acc, plugin) => {
     if (plugin.getDefaultizedParams) {
-      return plugin.getDefaultizedParams(acc);
+      return plugin.getDefaultizedParams({
+        params: acc,
+        experimentalFeatures
+      });
     }
     return acc;
   }, pluginParams);
@@ -44,7 +48,7 @@ const extractPluginParamsFromProps = _ref => {
     pluginParams: defaultizedPluginParams,
     slots: slots ?? {},
     slotProps: slotProps ?? {},
-    experimentalFeatures: experimentalFeatures ?? {}
+    experimentalFeatures
   };
 };
 exports.extractPluginParamsFromProps = extractPluginParamsFromProps;

package/node/useTreeItem2/useTreeItem2.js

@@ -14,6 +14,7 @@ var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _useTreeItem2Utils = require("../hooks/useTreeItem2Utils");
 var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
 var _tree = require("../internals/utils/tree");
+var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeViewId.utils");
 const useTreeItem2 = parameters => {
   const {
     runItemPlugins,
@@ -30,6 +31,7 @@ const useTreeItem2 = parameters => {
     expansion: {
       expansionTrigger
     },
+    treeId,
     instance,
     publicAPI
   } = (0, _TreeViewProvider.useTreeViewContext)();
@@ -55,10 +57,14 @@ const useTreeItem2 = parameters => {
   });
   const rootRefObject = React.useRef(null);
   const contentRefObject = React.useRef(null);
-  const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
   const handleRootRef = (0, _useForkRef.default)(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = (0, _useForkRef.default)(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
+  const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
+    itemId,
+    treeId,
+    id
+  });
   const rootTabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
   const sharedPropsEnhancerParams = {
     rootRefObject,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.18.0",
+  "version": "7.19.0",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",

package/useTreeItem2/index.d.ts

@@ -1,3 +1,3 @@
-export declare const useTreeItem2: <TSignatures extends import("./useTreeItem2.types").UseTreeItem2MinimalPlugins = import("./useTreeItem2.types").UseTreeItem2MinimalPlugins, TOptionalSignatures extends import("./useTreeItem2.types").UseTreeItem2OptionalPlugins = readonly []>(parameters: import("./useTreeItem2.types").UseTreeItem2Parameters) => import("./useTreeItem2.types").UseTreeItem2ReturnValue<TSignatures, TOptionalSignatures>;
-export declare const unstable_useTreeItem2: <TSignatures extends import("./useTreeItem2.types").UseTreeItem2MinimalPlugins = import("./useTreeItem2.types").UseTreeItem2MinimalPlugins, TOptionalSignatures extends import("./useTreeItem2.types").UseTreeItem2OptionalPlugins = readonly []>(parameters: import("./useTreeItem2.types").UseTreeItem2Parameters) => import("./useTreeItem2.types").UseTreeItem2ReturnValue<TSignatures, TOptionalSignatures>;
+export declare const useTreeItem2: <TSignatures extends import("./useTreeItem2.types").UseTreeItem2MinimalPlugins = import("./useTreeItem2.types").UseTreeItem2MinimalPlugins, TOptionalSignatures extends import("./useTreeItem2.types").UseTreeItem2OptionalPlugins = readonly []>(parameters: import("@mui/x-tree-view/useTreeItem2").UseTreeItem2Parameters) => import("@mui/x-tree-view/useTreeItem2").UseTreeItem2ReturnValue<TSignatures, TOptionalSignatures>;
+export declare const unstable_useTreeItem2: <TSignatures extends import("./useTreeItem2.types").UseTreeItem2MinimalPlugins = import("./useTreeItem2.types").UseTreeItem2MinimalPlugins, TOptionalSignatures extends import("./useTreeItem2.types").UseTreeItem2OptionalPlugins = readonly []>(parameters: import("@mui/x-tree-view/useTreeItem2").UseTreeItem2Parameters) => import("@mui/x-tree-view/useTreeItem2").UseTreeItem2ReturnValue<TSignatures, TOptionalSignatures>;
 export type { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2Status, UseTreeItem2RootSlotOwnProps, UseTreeItem2ContentSlotOwnProps, UseTreeItem2LabelInputSlotOwnProps, UseTreeItem2LabelSlotOwnProps, UseTreeItem2IconContainerSlotOwnProps, UseTreeItem2GroupTransitionSlotOwnProps, UseTreeItem2DragAndDropOverlaySlotOwnProps, } from './useTreeItem2.types';

package/useTreeItem2/useTreeItem2.js

@@ -6,6 +6,7 @@ import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
 import { useTreeItem2Utils } from "../hooks/useTreeItem2Utils/index.js";
 import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.js";
 import { isTargetInDescendants } from "../internals/utils/tree.js";
+import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
 export const useTreeItem2 = parameters => {
   const {
     runItemPlugins,
@@ -22,6 +23,7 @@ export const useTreeItem2 = parameters => {
     expansion: {
       expansionTrigger
     },
+    treeId,
     instance,
     publicAPI
   } = useTreeViewContext();
@@ -47,10 +49,14 @@ export const useTreeItem2 = parameters => {
   });
   const rootRefObject = React.useRef(null);
   const contentRefObject = React.useRef(null);
-  const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
   const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
+  const idAttribute = generateTreeItemIdAttribute({
+    itemId,
+    treeId,
+    id
+  });
   const rootTabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
   const sharedPropsEnhancerParams = {
     rootRefObject,