@mui/x-tree-view 7.11.0 → 7.12.0

package/node/useTreeItem2/useTreeItem2.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeItem2 = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/base/utils");
+var _extractEventHandlers = _interopRequireDefault(require("@mui/utils/extractEventHandlers"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
+var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _useTreeItem2Utils = require("../hooks/useTreeItem2Utils");
 var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
 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); }
@@ -17,6 +17,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const useTreeItem2 = parameters => {
   const {
     runItemPlugins,
+    items: {
+      onItemClick,
+      disabledItemsFocusable,
+      indentationAtItemLevel
+    },
     selection: {
       multiSelect,
       disableSelection,
@@ -25,11 +30,9 @@ const useTreeItem2 = parameters => {
     expansion: {
       expansionTrigger
     },
-    disabledItemsFocusable,
-    indentationAtItemLevel,
     instance,
     publicAPI
-  } = (0, _useTreeViewContext.useTreeViewContext)();
+  } = (0, _TreeViewProvider.useTreeViewContext)();
   const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
   const {
     id,
@@ -40,7 +43,8 @@ const useTreeItem2 = parameters => {
   } = parameters;
   const {
     rootRef: pluginRootRef,
-    contentRef
+    contentRef,
+    propsEnhancers
   } = runItemPlugins(parameters);
   const {
     interactions,
@@ -49,8 +53,11 @@ const useTreeItem2 = parameters => {
     itemId,
     children
   });
+  const rootRefObject = React.useRef(null);
+  const contentRefObject = React.useRef(null);
   const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
-  const handleRootRef = (0, _useForkRef.default)(rootRef, pluginRootRef);
+  const handleRootRef = (0, _useForkRef.default)(rootRef, pluginRootRef, rootRefObject);
+  const handleContentRef = (0, _useForkRef.default)(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
@@ -78,6 +85,7 @@ const useTreeItem2 = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
+    onItemClick?.(event, itemId);
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
@@ -119,7 +127,7 @@ const useTreeItem2 = parameters => {
     }
   };
   const getRootProps = (externalProps = {}) => {
-    const externalEventHandlers = (0, _extends2.default)({}, (0, _utils.extractEventHandlers)(parameters), (0, _utils.extractEventHandlers)(externalProps));
+    const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(parameters), (0, _extractEventHandlers.default)(externalProps));
     let ariaSelected;
     if (multiSelect) {
       ariaSelected = status.selected;
@@ -132,7 +140,7 @@ const useTreeItem2 = parameters => {
        */
       ariaSelected = true;
     }
-    const response = (0, _extends2.default)({}, externalEventHandlers, {
+    const props = (0, _extends2.default)({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
       tabIndex: instance.canItemBeTabbed(itemId) ? 0 : -1,
@@ -146,27 +154,37 @@ const useTreeItem2 = parameters => {
       onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
     if (indentationAtItemLevel) {
-      response.style = {
+      props.style = {
         '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
       };
     }
-    return response;
+    const enhancedRootProps = propsEnhancers.root?.({
+      rootRefObject,
+      contentRefObject,
+      externalEventHandlers
+    }) ?? {};
+    return (0, _extends2.default)({}, props, enhancedRootProps);
   };
   const getContentProps = (externalProps = {}) => {
-    const externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);
-    const response = (0, _extends2.default)({}, externalEventHandlers, externalProps, {
-      ref: contentRef,
+    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
+    const props = (0, _extends2.default)({}, externalEventHandlers, externalProps, {
+      ref: handleContentRef,
       onClick: createContentHandleClick(externalEventHandlers),
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
     if (indentationAtItemLevel) {
-      response.indentationAtItemLevel = true;
-    }
-    return response;
+      props.indentationAtItemLevel = true;
+    }
+    const enhancedContentProps = propsEnhancers.content?.({
+      rootRefObject,
+      contentRefObject,
+      externalEventHandlers
+    }) ?? {};
+    return (0, _extends2.default)({}, props, enhancedContentProps);
   };
   const getCheckboxProps = (externalProps = {}) => {
-    const externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);
+    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
     return (0, _extends2.default)({}, externalEventHandlers, {
       visible: checkboxSelection,
       ref: checkboxRef,
@@ -178,19 +196,19 @@ const useTreeItem2 = parameters => {
     });
   };
   const getLabelProps = (externalProps = {}) => {
-    const externalEventHandlers = (0, _extends2.default)({}, (0, _utils.extractEventHandlers)(parameters), (0, _utils.extractEventHandlers)(externalProps));
+    const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(externalProps));
     return (0, _extends2.default)({}, externalEventHandlers, {
       children: label
     }, externalProps);
   };
   const getIconContainerProps = (externalProps = {}) => {
-    const externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);
+    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
     return (0, _extends2.default)({}, externalEventHandlers, externalProps, {
       onClick: createIconContainerHandleClick(externalEventHandlers)
     });
   };
   const getGroupTransitionProps = (externalProps = {}) => {
-    const externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);
+    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
     const response = (0, _extends2.default)({}, externalEventHandlers, {
       unmountOnExit: true,
       component: 'ul',
@@ -203,6 +221,15 @@ const useTreeItem2 = parameters => {
     }
     return response;
   };
+  const getDragAndDropOverlayProps = (externalProps = {}) => {
+    const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(externalProps));
+    const enhancedDragAndDropOverlayProps = propsEnhancers.dragAndDropOverlay?.({
+      rootRefObject,
+      contentRefObject,
+      externalEventHandlers
+    }) ?? {};
+    return (0, _extends2.default)({}, externalProps, enhancedDragAndDropOverlayProps);
+  };
   return {
     getRootProps,
     getContentProps,
@@ -210,6 +237,7 @@ const useTreeItem2 = parameters => {
     getIconContainerProps,
     getCheckboxProps,
     getLabelProps,
+    getDragAndDropOverlayProps,
     rootRef: handleRootRef,
     status,
     publicAPI

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.11.0",
+  "version": "7.12.0",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,15 +33,14 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.8",
-    "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.16.2",
-    "@mui/utils": "^5.16.2",
+    "@babel/runtime": "^7.25.0",
+    "@mui/system": "^5.16.5",
+    "@mui/utils": "^5.16.5",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "7.11.0"
+    "@mui/x-internals": "7.12.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/useTreeItem2/index.d.ts

@@ -1,2 +1,2 @@
 export { useTreeItem2 as unstable_useTreeItem2 } from './useTreeItem2';
-export type { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2Status, UseTreeItem2ContentSlotOwnProps, } from './useTreeItem2.types';
+export type { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2Status, UseTreeItem2RootSlotOwnProps, UseTreeItem2ContentSlotOwnProps, UseTreeItem2LabelSlotOwnProps, UseTreeItem2IconContainerSlotOwnProps, UseTreeItem2GroupTransitionSlotOwnProps, UseTreeItem2DragAndDropOverlaySlotOwnProps, } from './useTreeItem2.types';

package/useTreeItem2/useTreeItem2.js

@@ -1,13 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { extractEventHandlers } from '@mui/base/utils';
+import extractEventHandlers from '@mui/utils/extractEventHandlers';
 import useForkRef from '@mui/utils/useForkRef';
-import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
+import { useTreeViewContext } from '../internals/TreeViewProvider';
 import { useTreeItem2Utils } from '../hooks/useTreeItem2Utils';
 import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
 export const useTreeItem2 = parameters => {
   const {
     runItemPlugins,
+    items: {
+      onItemClick,
+      disabledItemsFocusable,
+      indentationAtItemLevel
+    },
     selection: {
       multiSelect,
       disableSelection,
@@ -16,8 +21,6 @@ export const useTreeItem2 = parameters => {
     expansion: {
       expansionTrigger
     },
-    disabledItemsFocusable,
-    indentationAtItemLevel,
     instance,
     publicAPI
   } = useTreeViewContext();
@@ -31,7 +34,8 @@ export const useTreeItem2 = parameters => {
   } = parameters;
   const {
     rootRef: pluginRootRef,
-    contentRef
+    contentRef,
+    propsEnhancers
   } = runItemPlugins(parameters);
   const {
     interactions,
@@ -40,8 +44,11 @@ export const useTreeItem2 = parameters => {
     itemId,
     children
   });
+  const rootRefObject = React.useRef(null);
+  const contentRefObject = React.useRef(null);
   const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
-  const handleRootRef = useForkRef(rootRef, pluginRootRef);
+  const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject);
+  const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
@@ -69,6 +76,7 @@ export const useTreeItem2 = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
+    onItemClick?.(event, itemId);
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
@@ -123,7 +131,7 @@ export const useTreeItem2 = parameters => {
        */
       ariaSelected = true;
     }
-    const response = _extends({}, externalEventHandlers, {
+    const props = _extends({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
       tabIndex: instance.canItemBeTabbed(itemId) ? 0 : -1,
@@ -137,24 +145,34 @@ export const useTreeItem2 = parameters => {
       onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
     if (indentationAtItemLevel) {
-      response.style = {
+      props.style = {
         '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
       };
     }
-    return response;
+    const enhancedRootProps = propsEnhancers.root?.({
+      rootRefObject,
+      contentRefObject,
+      externalEventHandlers
+    }) ?? {};
+    return _extends({}, props, enhancedRootProps);
   };
   const getContentProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    const response = _extends({}, externalEventHandlers, externalProps, {
-      ref: contentRef,
+    const props = _extends({}, externalEventHandlers, externalProps, {
+      ref: handleContentRef,
       onClick: createContentHandleClick(externalEventHandlers),
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
     if (indentationAtItemLevel) {
-      response.indentationAtItemLevel = true;
-    }
-    return response;
+      props.indentationAtItemLevel = true;
+    }
+    const enhancedContentProps = propsEnhancers.content?.({
+      rootRefObject,
+      contentRefObject,
+      externalEventHandlers
+    }) ?? {};
+    return _extends({}, props, enhancedContentProps);
   };
   const getCheckboxProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
@@ -169,7 +187,7 @@ export const useTreeItem2 = parameters => {
     });
   };
   const getLabelProps = (externalProps = {}) => {
-    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    const externalEventHandlers = _extends({}, extractEventHandlers(externalProps));
     return _extends({}, externalEventHandlers, {
       children: label
     }, externalProps);
@@ -194,6 +212,15 @@ export const useTreeItem2 = parameters => {
     }
     return response;
   };
+  const getDragAndDropOverlayProps = (externalProps = {}) => {
+    const externalEventHandlers = _extends({}, extractEventHandlers(externalProps));
+    const enhancedDragAndDropOverlayProps = propsEnhancers.dragAndDropOverlay?.({
+      rootRefObject,
+      contentRefObject,
+      externalEventHandlers
+    }) ?? {};
+    return _extends({}, externalProps, enhancedDragAndDropOverlayProps);
+  };
   return {
     getRootProps,
     getContentProps,
@@ -201,6 +228,7 @@ export const useTreeItem2 = parameters => {
     getIconContainerProps,
     getCheckboxProps,
     getLabelProps,
+    getDragAndDropOverlayProps,
     rootRef: handleRootRef,
     status,
     publicAPI

package/useTreeItem2/useTreeItem2.types.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { TreeViewItemId } from '../models';
-import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent';
-import { TreeViewPublicAPI } from '../internals/models';
+import { TreeViewPublicAPI, MuiCancellableEventHandler } from '../internals/models';
 import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection';
 import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems';
 import { UseTreeViewFocusSignature } from '../internals/plugins/useTreeViewFocus';
@@ -32,7 +31,7 @@ export interface UseTreeItem2Parameters {
      */
     children?: React.ReactNode;
 }
-export interface UseTreeItem2RootSlotOwnProps {
+export interface UseTreeItem2RootSlotPropsFromUseTreeItem {
     role: 'treeitem';
     tabIndex: 0 | -1;
     id: string;
@@ -48,8 +47,10 @@ export interface UseTreeItem2RootSlotOwnProps {
      */
     style?: React.CSSProperties;
 }
+export interface UseTreeItem2RootSlotOwnProps extends UseTreeItem2RootSlotPropsFromUseTreeItem {
+}
 export type UseTreeItem2RootSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2RootSlotOwnProps;
-export interface UseTreeItem2ContentSlotOwnProps {
+export interface UseTreeItem2ContentSlotPropsFromUseTreeItem {
     onClick: MuiCancellableEventHandler<React.MouseEvent>;
     onMouseDown: MuiCancellableEventHandler<React.MouseEvent>;
     ref: React.RefCallback<HTMLDivElement> | null;
@@ -59,6 +60,8 @@ export interface UseTreeItem2ContentSlotOwnProps {
      */
     indentationAtItemLevel?: true;
 }
+export interface UseTreeItem2ContentSlotOwnProps extends UseTreeItem2ContentSlotPropsFromUseTreeItem {
+}
 export type UseTreeItem2ContentSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2ContentSlotOwnProps;
 export interface UseTreeItem2IconContainerSlotOwnProps {
     onClick: MuiCancellableEventHandler<React.MouseEvent>;
@@ -89,6 +92,9 @@ export interface UseTreeItem2GroupTransitionSlotOwnProps {
     indentationAtItemLevel?: true;
 }
 export type UseTreeItem2GroupTransitionSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2GroupTransitionSlotOwnProps;
+export interface UseTreeItem2DragAndDropOverlaySlotOwnProps {
+}
+export type UseTreeItem2DragAndDropOverlaySlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2DragAndDropOverlaySlotOwnProps;
 export interface UseTreeItem2Status {
     expandable: boolean;
     expanded: boolean;
@@ -133,6 +139,13 @@ export interface UseTreeItem2ReturnValue<TSignatures extends UseTreeItem2Minimal
      * @returns {UseTreeItem2GroupTransitionSlotProps<ExternalProps>} Props that should be spread on the GroupTransition slot
      */
     getGroupTransitionProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2GroupTransitionSlotProps<ExternalProps>;
+    /**
+     * Resolver for the DragAndDropOverlay slot's props.
+     * Warning: This slot is only useful when using the `RichTreeViewPro` component.
+     * @param {ExternalProps} externalProps Additional props for the DragAndDropOverlay slot
+     * @returns {UseTreeItem2DragAndDropOverlaySlotProps<ExternalProps>} Props that should be spread on the DragAndDropOverlay slot
+     */
+    getDragAndDropOverlayProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2DragAndDropOverlaySlotProps<ExternalProps>;
     /**
      * A ref to the component's root DOM element.
      */