@mui/x-tree-view 7.21.0 → 7.22.1

package/CHANGELOG.md

@@ -3,6 +3,148 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.22.1
+
+_Nov 1, 2024_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Polish (pl-PL) locale on the Date Pickers
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@wojtkolos, @dpak-maurya, @k-rajat19.
+Following are all team members who have contributed to this release:
+@LukasTy, @arminmeh, @MBilalShafi, @KenanYusuf, @flaviendelangle.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.22.1`
+
+- [DataGrid] Fix right column group header border (#15152) @KenanYusuf
+- [DataGrid] Fix scroll jump when holding down arrow keys (#15167) @arminmeh
+- [DataGrid] Move `rowGroupingModelChange` handler to respective hook (#15127) @MBilalShafi
+- [DataGrid] Prevent error when deleting the last row (#15153) @dpak-maurya
+- [DataGrid] Fix overlay height in autoHeight mode (#15205) @cherniavskii
+
+#### `@mui/x-data-grid-pro@7.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.22.1`, plus:
+
+- [DataGridPro] Add list view tests (#15166) @KenanYusuf
+
+#### `@mui/x-data-grid-premium@7.22.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+- [DataGridPremium] Keep focus on the grouping cell on space bar press #15155 @k-rajat19
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.22.1`
+
+- [l10n] Improve Polish (pl-PL) locale (#15177) @wojtkolos
+
+#### `@mui/x-date-pickers-pro@7.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.22.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.22.1`
+
+- [TreeView] Export `TreeItem2DragAndDropOverlay` and `TreeItem2LabelInput` from the root of each package (#15208) @flaviendelangle
+- [TreeView] Fix drag and drop color usage (#15149) @LukasTy
+
+#### `@mui/x-tree-view-pro@7.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@7.22.1`.
+
+### Docs
+
+- [docs] Add section explaining how to keep the selection while filtering in Data grid docs (#15199) @arminmeh
+
+## 7.22.0
+
+_Oct 25, 2024_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛰 Introduce [server-side support for Data Grid row grouping](https://mui.com/x/react-data-grid/server-side-data/row-grouping/)
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Portuguese (pt-BR) locale on the Data Grid component
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@clins1994, @GITPHLAP, @k-rajat19, @kalyan90, @merotosc, @yash49.
+Following are all team members who have contributed to this release:
+@cherniavskii, @flaviendelangle, @LukasTy, @MBilalShafi, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.22.0`
+
+- [DataGrid] Fix `GridPanelAnchor` positioning (#15022) @k-rajat19
+- [DataGrid] Fix ugly prop-types for the `pageStyle` prop of the `GridPrintExportMenuItem` component (#15015) @flaviendelangle
+- [DataGrid] Fix value type in filter model for number and boolean column type (#14733) @k-rajat19
+- [DataGrid] Focus next row when the focused row is deleted (#15067) @cherniavskii
+- [DataGrid] Remove some usages of `<Box />` and `<Badge />` (#15013) @romgrk
+- [DataGrid] Fix number of rows to display for page size options with negative value (#14890) @kalyan90
+- [l10n] Improve Portuguese (pt-BR) locale (#15021) @k-rajat19
+
+#### `@mui/x-data-grid-pro@7.22.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.22.0`, plus:
+
+- [DataGridPro] Fix column pinning layout (#15073) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.22.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.22.0`, plus:
+
+- [DataGridPremium] Server-side data source with row grouping (#15109) @MBilalShafi
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.22.0`
+
+- [pickers] Fix `DateCalendar` timezone management (#15119) @LukasTy
+- [pickers] Fix `DigitalClock` time options on a `DST` switch day (#15092) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.22.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.22.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.22.0`
+
+- [charts] Export data type in `onAxisClick(_, data)` callback (#15038) @clins1994
+
+#### `@mui/x-charts-pro@7.0.0-beta.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.22.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.22.0`
+
+- [TreeView] Make the cancellable event types public (#14992) @flaviendelangle
+
+### Docs
+
+- [docs] Fix typo in Tree View docs (#15047) @yash49
+
+### Core
+
+- [core] Adjust cherry-pick GH actions (#15101) @LukasTy
+- [core] Update prettier target branch (#15100) @MBilalShafi
+- [core] Update some `default-branch-switch` instances for `v7.x` (#15085) @MBilalShafi
+- [test] Revert to using `fireEvent` instead of `userEvent` (#14927) @LukasTy
+
 ## 7.21.0
 
 _Oct 17, 2024_

package/TreeItem/TreeItem.types.d.ts

@@ -5,9 +5,8 @@ import { TransitionProps } from '@mui/material/transitions';
 import { SxProps } from '@mui/system';
 import { TreeItemContentProps } from './TreeItemContent';
 import { TreeItemClasses } from './treeItemClasses';
-import { TreeViewItemId } from '../models';
+import { TreeViewItemId, TreeViewCancellableEventHandler } from '../models';
 import { SlotComponentPropsFromProps } from '../internals/models';
-import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent';
 import { UseTreeViewIconsSignature } from '../internals/plugins/useTreeViewIcons';
 import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection';
 import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems';
@@ -102,7 +101,7 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
     /**
      * Callback fired when a key of the keyboard is pressed on the item.
      */
-    onKeyDown?: MuiCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>;
+    onKeyDown?: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>;
 }
 export interface TreeItemOwnerState extends TreeItemProps {
     expanded: boolean;

package/TreeItem/useTreeItemState.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MuiCancellableEvent } from '../internals/models/MuiCancellableEvent';
+import { TreeViewCancellableEvent } from '../models';
 export declare function useTreeItemState(itemId: string): {
     disabled: boolean;
     expanded: boolean;
@@ -16,6 +16,6 @@ export declare function useTreeItemState(itemId: string): {
     preventSelection: (event: React.MouseEvent<HTMLDivElement>) => void;
     expansionTrigger: "content" | "iconContainer" | undefined;
     toggleItemEditing: () => void;
-    handleSaveItemLabel: (event: React.SyntheticEvent & MuiCancellableEvent, label: string) => void;
+    handleSaveItemLabel: (event: React.SyntheticEvent & TreeViewCancellableEvent, label: string) => void;
     handleCancelItemLabelEditing: (event: React.SyntheticEvent) => void;
 };

package/TreeItem2/TreeItem2.types.d.ts

@@ -3,7 +3,7 @@ import { SlotComponentProps } from '@mui/utils';
 import { UseTreeItem2Parameters, UseTreeItem2Status } from '../useTreeItem2';
 import { TreeItemClasses } from '../TreeItem';
 import { TreeItem2IconSlotProps, TreeItem2IconSlots } from '../TreeItem2Icon';
-import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent';
+import { TreeViewCancellableEventHandler } from '../models';
 export interface TreeItem2Slots extends TreeItem2IconSlots {
     /**
      * The component that renders the root.
@@ -82,11 +82,11 @@ export interface TreeItem2Props extends Omit<UseTreeItem2Parameters, 'rootRef'>,
     /**
      * Callback fired when the item root is blurred.
      */
-    onBlur?: MuiCancellableEventHandler<React.FocusEvent<HTMLLIElement>>;
+    onBlur?: TreeViewCancellableEventHandler<React.FocusEvent<HTMLLIElement>>;
     /**
      * Callback fired when a key is pressed on the keyboard and the tree is in focus.
      */
-    onKeyDown?: MuiCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>;
+    onKeyDown?: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>;
 }
 export interface TreeItem2OwnerState extends Omit<TreeItem2Props, 'disabled'>, UseTreeItem2Status {
 }

package/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.d.ts

@@ -1,4 +1,7 @@
 import * as React from 'react';
 import { TreeItem2DragAndDropOverlayProps } from './TreeItem2DragAndDropOverlay.types';
 declare function TreeItem2DragAndDropOverlay(props: TreeItem2DragAndDropOverlayProps): React.JSX.Element | null;
+declare namespace TreeItem2DragAndDropOverlay {
+    var propTypes: any;
+}
 export { TreeItem2DragAndDropOverlay };

package/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { alpha } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system';
 import { styled } from "../internals/zero-styled/index.js";
@@ -26,38 +27,32 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
       borderRadius: theme.shape.borderRadius,
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.dark} / ${0.15})` : alpha(theme.palette.primary.dark, 0.15)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.darkChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.dark, theme.palette.action.focusOpacity)
     }
   }, {
     props: {
       action: 'reorder-above'
     },
-    style: _extends({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderTop: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderTopColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
-    }))
+      borderTop: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }, {
     props: {
       action: 'reorder-below'
     },
-    style: _extends({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
-    }))
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }, {
     props: {
       action: 'move-to-parent'
     },
-    style: _extends({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))',
-      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
-    }))
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }]
 }));
 function TreeItem2DragAndDropOverlay(props) {
@@ -66,4 +61,12 @@ function TreeItem2DragAndDropOverlay(props) {
   }
   return /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlayRoot, _extends({}, props));
 }
+process.env.NODE_ENV !== "production" ? TreeItem2DragAndDropOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  action: PropTypes.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
+  style: PropTypes.object
+} : void 0;
 export { TreeItem2DragAndDropOverlay };

package/TreeItem2LabelInput/TreeItem2LabelInput.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @ignore - internal component.
+ */
 declare const TreeItem2LabelInput: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, {}>;
 export { TreeItem2LabelInput };

package/TreeItem2LabelInput/TreeItem2LabelInput.js

@@ -1,5 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from "../internals/zero-styled/index.js";
+
+/**
+ * @ignore - internal component.
+ */
 const TreeItem2LabelInput = styled('input', {
   name: 'MuiTreeItem2',
   slot: 'LabelInput',

package/TreeItem2LabelInput/TreeItem2LabelInput.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent';
+import { TreeViewCancellableEventHandler } from '../models';
 export interface TreeItem2LabelInputProps {
     value?: string;
     /**
@@ -7,8 +7,8 @@ export interface TreeItem2LabelInputProps {
      */
     'data-element'?: 'labelInput';
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    onKeyDown?: MuiCancellableEventHandler<React.KeyboardEvent<HTMLInputElement>>;
-    onBlur?: MuiCancellableEventHandler<React.FocusEvent<HTMLInputElement>>;
+    onKeyDown?: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLInputElement>>;
+    onBlur?: TreeViewCancellableEventHandler<React.FocusEvent<HTMLInputElement>>;
     autoFocus?: true;
     type?: 'text';
 }

package/index.d.ts

@@ -6,6 +6,8 @@ export * from './TreeItem2';
 export * from './useTreeItem2';
 export * from './TreeItem2Icon';
 export * from './TreeItem2Provider';
+export * from './TreeItem2DragAndDropOverlay';
+export * from './TreeItem2LabelInput';
 export { unstable_resetCleanupTracking } from './internals/hooks/useInstanceEventHandler';
 export * from './models';
 export * from './icons';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.21.0
+ * @mui/x-tree-view v7.22.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -16,6 +16,8 @@ export * from "./TreeItem2/index.js";
 export * from "./useTreeItem2/index.js";
 export * from "./TreeItem2Icon/index.js";
 export * from "./TreeItem2Provider/index.js";
+export * from "./TreeItem2DragAndDropOverlay/index.js";
+export * from "./TreeItem2LabelInput/index.js";
 export { unstable_resetCleanupTracking } from "./internals/hooks/useInstanceEventHandler.js";
 export * from "./models/index.js";
 export * from "./icons/index.js";

package/internals/index.d.ts

@@ -2,7 +2,7 @@ export { useTreeView } from './useTreeView';
 export { TreeViewProvider, useTreeViewContext } from './TreeViewProvider';
 export { RichTreeViewItems } from './components/RichTreeViewItems';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
-export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, TreeViewItemMeta, TreeViewInstance, DefaultizedProps, TreeViewItemPlugin, MuiCancellableEvent, MuiCancellableEventHandler, } from './models';
+export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, TreeViewItemMeta, TreeViewInstance, DefaultizedProps, TreeViewItemPlugin, } from './models';
 export type { TreeViewCorePluginParameters } from './corePlugins';
 export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
 export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters, } from './plugins/useTreeViewExpansion';

package/internals/models/index.d.ts

@@ -2,4 +2,3 @@ export * from './helpers';
 export * from './plugin';
 export * from './itemPlugin';
 export * from './treeView';
-export * from './MuiCancellableEvent';

package/internals/models/index.js

@@ -1,5 +1,4 @@
 export * from "./helpers.js";
 export * from "./plugin.js";
 export * from "./itemPlugin.js";
-export * from "./treeView.js";
-export * from "./MuiCancellableEvent.js";
+export * from "./treeView.js";

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { TreeViewPluginSignature, MuiCancellableEvent } from '../../models';
+import { TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 import { UseTreeViewFocusSignature } from '../useTreeViewFocus';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
-import { TreeViewItemId } from '../../../models';
+import { TreeViewItemId, TreeViewCancellableEvent } from '../../../models';
 import { UseTreeViewLabelSignature } from '../useTreeViewLabel';
 export interface UseTreeViewKeyboardNavigationInstance {
     /**
@@ -17,10 +17,10 @@ export interface UseTreeViewKeyboardNavigationInstance {
     /**
      * Callback fired when a key is pressed on an item.
      * Handles all the keyboard navigation logic.
-     * @param {React.KeyboardEvent<HTMLElement> & MuiCancellableEvent} event The keyboard event that triggered the callback.
+     * @param {React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent} event The keyboard event that triggered the callback.
      * @param {TreeViewItemId} itemId The id of the item that the event was triggered on.
      */
-    handleItemKeyDown: (event: React.KeyboardEvent<HTMLElement> & MuiCancellableEvent, itemId: TreeViewItemId) => void;
+    handleItemKeyDown: (event: React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent, itemId: TreeViewItemId) => void;
 }
 export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
     instance: UseTreeViewKeyboardNavigationInstance;

package/models/events.d.ts

@@ -0,0 +1,4 @@
+export type TreeViewCancellableEvent = {
+    defaultMuiPrevented?: boolean;
+};
+export type TreeViewCancellableEventHandler<Event> = (event: Event & TreeViewCancellableEvent) => void;

package/models/index.d.ts

@@ -1,2 +1,3 @@
 export * from './items';
+export * from './events';
 export type { PropsFromSlot } from '@mui/x-internals/slots';

package/models/index.js

@@ -1,4 +1,5 @@
 export * from "./items.js";
+export * from "./events.js";
 
 // Utils shared across the X packages
 export {};

package/modern/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { alpha } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system';
 import { styled } from "../internals/zero-styled/index.js";
@@ -26,38 +27,32 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
       borderRadius: theme.shape.borderRadius,
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.dark} / ${0.15})` : alpha(theme.palette.primary.dark, 0.15)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.darkChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.dark, theme.palette.action.focusOpacity)
     }
   }, {
     props: {
       action: 'reorder-above'
     },
-    style: _extends({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderTop: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderTopColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
-    }))
+      borderTop: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }, {
     props: {
       action: 'reorder-below'
     },
-    style: _extends({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
-    }))
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }, {
     props: {
       action: 'move-to-parent'
     },
-    style: _extends({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))',
-      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
-    }))
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }]
 }));
 function TreeItem2DragAndDropOverlay(props) {
@@ -66,4 +61,12 @@ function TreeItem2DragAndDropOverlay(props) {
   }
   return /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlayRoot, _extends({}, props));
 }
+process.env.NODE_ENV !== "production" ? TreeItem2DragAndDropOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  action: PropTypes.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
+  style: PropTypes.object
+} : void 0;
 export { TreeItem2DragAndDropOverlay };

package/modern/TreeItem2LabelInput/TreeItem2LabelInput.js

@@ -1,5 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from "../internals/zero-styled/index.js";
+
+/**
+ * @ignore - internal component.
+ */
 const TreeItem2LabelInput = styled('input', {
   name: 'MuiTreeItem2',
   slot: 'LabelInput',

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.21.0
+ * @mui/x-tree-view v7.22.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -16,6 +16,8 @@ export * from "./TreeItem2/index.js";
 export * from "./useTreeItem2/index.js";
 export * from "./TreeItem2Icon/index.js";
 export * from "./TreeItem2Provider/index.js";
+export * from "./TreeItem2DragAndDropOverlay/index.js";
+export * from "./TreeItem2LabelInput/index.js";
 export { unstable_resetCleanupTracking } from "./internals/hooks/useInstanceEventHandler.js";
 export * from "./models/index.js";
 export * from "./icons/index.js";

package/modern/internals/models/index.js

@@ -1,5 +1,4 @@
 export * from "./helpers.js";
 export * from "./plugin.js";
 export * from "./itemPlugin.js";
-export * from "./treeView.js";
-export * from "./MuiCancellableEvent.js";
+export * from "./treeView.js";

package/modern/models/index.js

@@ -1,4 +1,5 @@
 export * from "./items.js";
+export * from "./events.js";
 
 // Utils shared across the X packages
 export {};

package/node/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TreeItem2DragAndDropOverlay = TreeItem2DragAndDropOverlay;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _system = require("@mui/system");
 var _zeroStyled = require("../internals/zero-styled");
@@ -34,38 +35,32 @@ const TreeItem2DragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
     style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
       borderRadius: theme.shape.borderRadius,
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.dark} / ${0.15})` : (0, _styles.alpha)(theme.palette.primary.dark, 0.15)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.darkChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _styles.alpha)(theme.palette.primary.dark, theme.palette.action.focusOpacity)
     }
   }, {
     props: {
       action: 'reorder-above'
     },
-    style: (0, _extends2.default)({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderTop: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${(0, _styles.alpha)(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderTopColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : (0, _styles.alpha)(theme.palette.grey[100], 0.6)
-    }))
+      borderTop: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }, {
     props: {
       action: 'reorder-below'
     },
-    style: (0, _extends2.default)({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${(0, _styles.alpha)(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : (0, _styles.alpha)(theme.palette.grey[100], 0.6)
-    }))
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }, {
     props: {
       action: 'move-to-parent'
     },
-    style: (0, _extends2.default)({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))',
-      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${(0, _styles.alpha)(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : (0, _styles.alpha)(theme.palette.grey[100], 0.6)
-    }))
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }]
 }));
 function TreeItem2DragAndDropOverlay(props) {
@@ -73,4 +68,12 @@ function TreeItem2DragAndDropOverlay(props) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItem2DragAndDropOverlayRoot, (0, _extends2.default)({}, props));
-}
+}
+process.env.NODE_ENV !== "production" ? TreeItem2DragAndDropOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  action: _propTypes.default.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
+  style: _propTypes.default.object
+} : void 0;

package/node/TreeItem2LabelInput/TreeItem2LabelInput.js

@@ -7,6 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.TreeItem2LabelInput = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _zeroStyled = require("../internals/zero-styled");
+/**
+ * @ignore - internal component.
+ */
 const TreeItem2LabelInput = exports.TreeItem2LabelInput = (0, _zeroStyled.styled)('input', {
   name: 'MuiTreeItem2',
   slot: 'LabelInput',

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.21.0
+ * @mui/x-tree-view v7.22.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -115,6 +115,30 @@ Object.keys(_TreeItem2Provider).forEach(function (key) {
     }
   });
 });
+var _TreeItem2DragAndDropOverlay = require("./TreeItem2DragAndDropOverlay");
+Object.keys(_TreeItem2DragAndDropOverlay).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TreeItem2DragAndDropOverlay[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeItem2DragAndDropOverlay[key];
+    }
+  });
+});
+var _TreeItem2LabelInput = require("./TreeItem2LabelInput");
+Object.keys(_TreeItem2LabelInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TreeItem2LabelInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeItem2LabelInput[key];
+    }
+  });
+});
 var _useInstanceEventHandler = require("./internals/hooks/useInstanceEventHandler");
 var _models = require("./models");
 Object.keys(_models).forEach(function (key) {

package/node/internals/models/index.js

@@ -46,15 +46,4 @@ Object.keys(_treeView).forEach(function (key) {
       return _treeView[key];
     }
   });
-});
-var _MuiCancellableEvent = require("./MuiCancellableEvent");
-Object.keys(_MuiCancellableEvent).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _MuiCancellableEvent[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _MuiCancellableEvent[key];
-    }
-  });
 });

package/node/models/index.js

@@ -13,4 +13,15 @@ Object.keys(_items).forEach(function (key) {
       return _items[key];
     }
   });
+});
+var _events = require("./events");
+Object.keys(_events).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _events[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _events[key];
+    }
+  });
 });

package/package.json

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

package/useTreeItem2/useTreeItem2.types.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { TreeViewItemId } from '../models';
-import { TreeViewPublicAPI, MuiCancellableEventHandler } from '../internals/models';
+import { TreeViewItemId, TreeViewCancellableEventHandler } from '../models';
+import { TreeViewPublicAPI } from '../internals/models';
 import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection';
 import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems';
 import { UseTreeViewFocusSignature } from '../internals/plugins/useTreeViewFocus';
@@ -39,9 +39,9 @@ export interface UseTreeItem2RootSlotPropsFromUseTreeItem {
     'aria-expanded': React.AriaAttributes['aria-expanded'];
     'aria-selected': React.AriaAttributes['aria-selected'];
     'aria-disabled': React.AriaAttributes['aria-disabled'];
-    onFocus: MuiCancellableEventHandler<React.FocusEvent<HTMLElement>>;
-    onBlur: MuiCancellableEventHandler<React.FocusEvent<HTMLElement>>;
-    onKeyDown: MuiCancellableEventHandler<React.KeyboardEvent<HTMLElement>>;
+    onFocus: TreeViewCancellableEventHandler<React.FocusEvent<HTMLElement>>;
+    onBlur: TreeViewCancellableEventHandler<React.FocusEvent<HTMLElement>>;
+    onKeyDown: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLElement>>;
     ref: React.RefCallback<HTMLLIElement>;
     /**
      * Only defined when the `indentationAtItemLevel` experimental feature is enabled.
@@ -52,8 +52,8 @@ export interface UseTreeItem2RootSlotOwnProps extends UseTreeItem2RootSlotPropsF
 }
 export type UseTreeItem2RootSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2RootSlotOwnProps;
 export interface UseTreeItem2ContentSlotPropsFromUseTreeItem {
-    onClick: MuiCancellableEventHandler<React.MouseEvent>;
-    onMouseDown: MuiCancellableEventHandler<React.MouseEvent>;
+    onClick: TreeViewCancellableEventHandler<React.MouseEvent>;
+    onMouseDown: TreeViewCancellableEventHandler<React.MouseEvent>;
     ref: React.RefCallback<HTMLDivElement> | null;
     status: UseTreeItem2Status;
     /**
@@ -65,12 +65,12 @@ export interface UseTreeItem2ContentSlotOwnProps extends UseTreeItem2ContentSlot
 }
 export type UseTreeItem2ContentSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2ContentSlotOwnProps;
 export interface UseTreeItem2IconContainerSlotOwnProps {
-    onClick: MuiCancellableEventHandler<React.MouseEvent>;
+    onClick: TreeViewCancellableEventHandler<React.MouseEvent>;
 }
 export type UseTreeItemIconContainerSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2IconContainerSlotOwnProps;
 export interface UseTreeItem2LabelSlotOwnProps {
     children: React.ReactNode;
-    onDoubleClick: MuiCancellableEventHandler<React.MouseEvent>;
+    onDoubleClick: TreeViewCancellableEventHandler<React.MouseEvent>;
     /**
      * Only defined when the `isItemEditable` experimental feature is enabled.
      */
@@ -83,7 +83,7 @@ export type UseTreeItem2LabelInputSlotProps<ExternalProps = {}> = ExternalProps
 export interface UseTreeItem2CheckboxSlotOwnProps {
     visible: boolean;
     checked: boolean;
-    onChange: MuiCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
+    onChange: TreeViewCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
     disabled: boolean;
     ref: React.RefObject<HTMLButtonElement>;
     tabIndex: -1;

package/internals/models/MuiCancellableEvent.d.ts

@@ -1,4 +0,0 @@
-export type MuiCancellableEvent = {
-    defaultMuiPrevented?: boolean;
-};
-export type MuiCancellableEventHandler<Event> = (event: Event & MuiCancellableEvent) => void;