@mui/x-tree-view 7.18.0 → 7.20.0

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.20.0",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,13 +33,13 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.6",
-    "@mui/utils": "^5.16.6",
+    "@babel/runtime": "^7.25.7",
+    "@mui/utils": "^5.16.6 || ^6.0.0",
     "@types/react-transition-group": "^4.4.11",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "7.18.0"
+    "@mui/x-internals": "7.20.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

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 type { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2Status, UseTreeItem2RootSlotOwnProps, UseTreeItem2ContentSlotOwnProps, UseTreeItem2LabelInputSlotOwnProps, UseTreeItem2LabelSlotOwnProps, UseTreeItem2IconContainerSlotOwnProps, UseTreeItem2GroupTransitionSlotOwnProps, UseTreeItem2DragAndDropOverlaySlotOwnProps, } from './useTreeItem2.types';
+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, UseTreeItem2CheckboxSlotOwnProps, 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,

package/useTreeItem2/useTreeItem2.types.d.ts

@@ -83,7 +83,7 @@ export type UseTreeItem2LabelInputSlotProps<ExternalProps = {}> = ExternalProps
 export interface UseTreeItem2CheckboxSlotOwnProps {
     visible: boolean;
     checked: boolean;
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    onChange: MuiCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
     disabled: boolean;
     ref: React.RefObject<HTMLButtonElement>;
     tabIndex: -1;