@mui/x-tree-view-pro 8.18.0 → 8.19.0

package/CHANGELOG.md

@@ -5,6 +5,119 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.19.0
+
+_Nov 20, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔎 Add pan on `wheel` to the charts zoom
+- ⌨️ Allow opt-in to [tab navigation](https://mui.com/x/react-data-grid/accessibility/#tab-navigation) inside the Data Grid.
+- ⚙️ New way of defining [action columns](https://mui.com/x/react-data-grid/column-definition/#ActionsWithModalGrid.tsx) in the Data Grid that makes it easier to keep `columns` prop stable.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@lauri865, @noobyogi0010, @sai6855
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mj12albert, @noraleonte, @rita-codes, @siriwatknp, @ZeeshanTamboli
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.19.0`
+
+- [DataGrid] Add `tabNavigation` prop to control tab navigation in the grid (#20286) @arminmeh
+- [DataGrid] Allow to focus disabled checkbox cells (#19959) @mj12albert
+- [DataGrid] Alternative actions column definition API (#15041) @cherniavskii
+- [DataGrid] Fix failing tests (#20332) @cherniavskii
+- [DataGrid] Prevent Safari 26 error in the event handler (#20369) @arminmeh
+- [DataGrid] Undeprecate the `autoHeight` prop (#20363) @cherniavskii
+- [DataGrid] Fix print export grid dimensions with dynamic row height and print styles (#19835) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.19.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@8.19.0`.
+
+#### `@mui/x-data-grid-premium@8.19.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@8.19.0`, plus:
+
+- [DataGridPremium] Fix aggregation with sorting (#19892) @lauri865
+- [DataGridPremium] Lock `ExcelJS` version (#20329) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.19.0`
+
+- [pickers] Do not loose `slotProps.field.slotProps` (#20322) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.19.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@8.19.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.19.0`
+
+- [charts] Expose `niceDomain` utility (#20250) @bernardobelchior
+- [charts] Fix benchmark regression by downgrading to JSDOM v26 (#20405) @bernardobelchior
+- [charts] Fix Pie Chart keyboard focus highlight (#20358) @JCQuintas
+- [charts] Memoize series selectors (#20326) @JCQuintas
+- [charts] Relax dataset type (#20294) @bernardobelchior
+- [charts] Remove `touch-action: pan-y` when zoom is disabled (#20204) @bernardobelchior
+- [charts] Use `getBBox()` for correct SVG sizes in firefox (#20309) @JCQuintas
+- [charts] Use directly selector from `@mui/x-internals` (#20365) @alexfauquette
+- [charts] Fix unnecessary errors in dev mode (#20380) @JCQuintas
+
+#### `@mui/x-charts-pro@8.19.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-charts@8.19.0`, plus:
+
+- [charts-pro] Add pan on `wheel` to zoom (#19998) @JCQuintas
+- [charts-pro] Fix zoom slider preview having an opaque background in dark mode (#20367) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.19.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-charts-pro@8.19.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.19.0`
+
+- [tree view] Enable lazy load when children count is not know in tree view (#18680) @noobyogi0010
+- [tree view] Fix unwanted behaviors on the item re-ordering (#20368) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.19.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-tree-view@8.19.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.19.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add minimum Typescript version to migration guide (#20320) @siriwatknp
+- [docs] Fix Autosizing documentation (#20348) @siriwatknp
+- [docs] Fix separator opacity in demo (#20293) @sai6855
+- [docs] Replace deprecated `LoadingButton` with `Button` component (#20208) @Janpot
+
+### Core
+
+- [code-infra] Add new broken links checker (#20120) @Janpot
+- [code-infra] Disable Codspeed pipeline (#20370) @JCQuintas
+- [code-infra] Optimize `checkMaterialVersion` (#20307) @Janpot
+- [code-infra] Use utils from code-infra for changelog and PR creation (#20406) @brijeshb42
+- [docs-infra] Revert `@docsearch/react` (#20313) @Janpot
+
+### Miscellaneous
+
+- [test] Fix browser tests skipping some projects (#20318) @cherniavskii
+- [test] Update `use-react-version` pnpm script (#20319) @cherniavskii
+
 ## 8.18.0
 
 <!-- generated comparing v8.17.0..master -->

package/RichTreeViewPro/RichTreeViewPro.js

@@ -52,7 +52,7 @@ const RichTreeViewProRoot = exports.RichTreeViewProRoot = (0, _zeroStyled.styled
   outline: 0,
   position: 'relative'
 });
-const releaseInfo = "MTc2Mjk5MjAwMDAwMA==";
+const releaseInfo = "MTc2MzU5NjgwMDAwMA==";
 
 /**
  *

package/esm/RichTreeViewPro/RichTreeViewPro.js

@@ -45,7 +45,7 @@ export const RichTreeViewProRoot = styled('ul', {
   outline: 0,
   position: 'relative'
 });
-const releaseInfo = "MTc2Mjk5MjAwMDAwMA==";
+const releaseInfo = "MTc2MzU5NjgwMDAwMA==";
 
 /**
  *

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view-pro v8.18.0
+ * @mui/x-tree-view-pro v8.19.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/esm/internals/plugins/useTreeViewItemsReordering/itemPlugin.js

@@ -16,7 +16,7 @@ export const useTreeViewItemsReorderingItemPlugin = ({
   const validActionsRef = React.useRef(null);
   const draggedItemProperties = useStore(store, itemsReorderingSelectors.draggedItemProperties, itemId);
   const canItemBeReordered = useStore(store, itemsReorderingSelectors.canItemBeReordered, itemId);
-  const isValidTarget = useStore(store, itemsReorderingSelectors.isItemValidDropTarget, itemId);
+  const isDragging = useStore(store, itemsReorderingSelectors.isDragging, itemId);
   return {
     propsEnhancers: {
       root: ({
@@ -24,12 +24,9 @@ export const useTreeViewItemsReorderingItemPlugin = ({
         contentRefObject,
         externalEventHandlers
       }) => {
-        if (!canItemBeReordered) {
-          return {};
-        }
         const handleDragStart = event => {
           externalEventHandlers.onDragStart?.(event);
-          if (event.defaultMuiPrevented || event.defaultPrevented) {
+          if (!canItemBeReordered || event.defaultMuiPrevented || event.defaultPrevented) {
             return;
           }
 
@@ -75,7 +72,7 @@ export const useTreeViewItemsReorderingItemPlugin = ({
           instance.completeDraggingItem(itemId);
         };
         return {
-          draggable: true,
+          draggable: canItemBeReordered ? true : undefined,
           onDragStart: handleDragStart,
           onDragOver: handleRootDragOver,
           onDragEnd: handleRootDragEnd
@@ -85,15 +82,15 @@ export const useTreeViewItemsReorderingItemPlugin = ({
         externalEventHandlers,
         contentRefObject
       }) => {
-        if (!isValidTarget) {
+        if (!isDragging) {
           return {};
         }
         const handleDragOver = event => {
           externalEventHandlers.onDragOver?.(event);
-          if (event.defaultMuiPrevented || validActionsRef.current == null) {
+          if (event.defaultMuiPrevented || validActionsRef.current == null || !contentRefObject.current) {
             return;
           }
-          const rect = event.target.getBoundingClientRect();
+          const rect = contentRefObject.current.getBoundingClientRect();
           const y = event.clientY - rect.top;
           const x = event.clientX - rect.left;
           instance.setDragTargetItem({

package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js

@@ -9,16 +9,6 @@ export const useTreeViewItemsReordering = ({
   params,
   store
 }) => {
-  const canItemBeDragged = React.useCallback(itemId => {
-    if (!params.itemsReordering) {
-      return false;
-    }
-    const isItemReorderable = params.isItemReorderable;
-    if (isItemReorderable) {
-      return isItemReorderable(itemId);
-    }
-    return true;
-  }, [params.itemsReordering, params.isItemReorderable]);
   const getDroppingTargetValidActions = React.useCallback(itemId => {
     const currentReorder = itemsReorderingSelectors.currentReorder(store.state);
     if (!currentReorder) {
@@ -178,7 +168,6 @@ export const useTreeViewItemsReordering = ({
   }, [store, params.itemsReordering, params.isItemReorderable]);
   return {
     instance: {
-      canItemBeDragged,
       getDroppingTargetValidActions,
       startDraggingItem,
       cancelDraggingItem,

package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts

@@ -20,9 +20,9 @@ export declare const itemsReorderingSelectors: {
     targetDepth: number;
   } | null;
   /**
-   * Checks whether an item is a valid target for the dragged item.
+   * Checks whether an item is being dragged.
    */
-  isItemValidDropTarget: (state: TreeViewState<[UseTreeViewItemsReorderingSignature]>, itemId: string) => boolean;
+  isDragging: (state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => boolean;
   /**
    * Checks whether an item can be reordered.
    */

package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js

@@ -22,12 +22,9 @@ export const itemsReorderingSelectors = {
     };
   }),
   /**
-   * Checks whether an item is a valid target for the dragged item.
+   * Checks whether an item is being dragged.
    */
-  isItemValidDropTarget: createSelector((state, itemId) => {
-    const draggedItemId = state.itemsReordering.currentReorder?.draggedItemId;
-    return draggedItemId != null && draggedItemId !== itemId;
-  }),
+  isDragging: createSelector(state => !!state.itemsReordering.currentReorder?.draggedItemId),
   /**
    * Checks whether an item can be reordered.
    */

package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts

@@ -2,12 +2,6 @@ import { DefaultizedProps } from '@mui/x-internals/types';
 import { TreeViewPluginSignature, UseTreeViewItemsSignature } from '@mui/x-tree-view/internals';
 import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
 export interface UseTreeViewItemsReorderingInstance {
-  /**
-   * Check if a given item can be dragged.
-   * @param {TreeViewItemId} itemId The id of the item to check.
-   * @returns {boolean} `true` if the item can be dragged, `false` otherwise.
-   */
-  canItemBeDragged: (itemId: TreeViewItemId) => boolean;
   /**
    * Get the valid reordering action if a given item is the target of the ongoing reordering.
    * @param {TreeViewItemId} itemId The id of the item to get the action of.

package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts

@@ -5,7 +5,7 @@ import { TreeViewItemItemReorderingValidActions, TreeViewItemReorderPosition, Us
  * Checks if the item with the id itemIdB is an ancestor of the item with the id itemIdA.
  */
 export declare const isAncestor: (store: TreeViewUsedStore<UseTreeViewItemsReorderingSignature>, itemIdA: string, itemIdB: string) => boolean;
-interface GetNewPositionParams {
+interface GetNewPositionParameters {
   itemChildrenIndentation: string | number;
   validActions: TreeViewItemItemReorderingValidActions;
   targetHeight: number;
@@ -22,7 +22,7 @@ export declare const chooseActionToApply: ({
   cursorX,
   cursorY,
   contentElement
-}: GetNewPositionParams) => TreeViewItemsReorderingAction | null;
+}: GetNewPositionParameters) => TreeViewItemsReorderingAction | null;
 export declare const moveItemInTree: <R extends {}>({
   itemToMoveId,
   oldPosition,

package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js

@@ -247,5 +247,5 @@ function useLazyLoadOnMount({
   }, [instance, params.items, params.dataSource, store]);
 }
 function getExpandableItemsFromDataSource(store, dataSource) {
-  return Object.values(store.state.items.itemMetaLookup).filter(itemMeta => !itemMeta.expandable && dataSource.getChildrenCount(store.state.items.itemModelLookup[itemMeta.id]) > 0).map(item => item.id);
+  return Object.values(store.state.items.itemMetaLookup).filter(itemMeta => !itemMeta.expandable && dataSource.getChildrenCount(store.state.items.itemModelLookup[itemMeta.id]) !== 0).map(item => item.id);
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view-pro v8.18.0
+ * @mui/x-tree-view-pro v8.19.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/internals/plugins/useTreeViewItemsReordering/itemPlugin.js

@@ -24,7 +24,7 @@ const useTreeViewItemsReorderingItemPlugin = ({
   const validActionsRef = React.useRef(null);
   const draggedItemProperties = (0, _store.useStore)(store, _useTreeViewItemsReordering.itemsReorderingSelectors.draggedItemProperties, itemId);
   const canItemBeReordered = (0, _store.useStore)(store, _useTreeViewItemsReordering.itemsReorderingSelectors.canItemBeReordered, itemId);
-  const isValidTarget = (0, _store.useStore)(store, _useTreeViewItemsReordering.itemsReorderingSelectors.isItemValidDropTarget, itemId);
+  const isDragging = (0, _store.useStore)(store, _useTreeViewItemsReordering.itemsReorderingSelectors.isDragging, itemId);
   return {
     propsEnhancers: {
       root: ({
@@ -32,12 +32,9 @@ const useTreeViewItemsReorderingItemPlugin = ({
         contentRefObject,
         externalEventHandlers
       }) => {
-        if (!canItemBeReordered) {
-          return {};
-        }
         const handleDragStart = event => {
           externalEventHandlers.onDragStart?.(event);
-          if (event.defaultMuiPrevented || event.defaultPrevented) {
+          if (!canItemBeReordered || event.defaultMuiPrevented || event.defaultPrevented) {
             return;
           }
 
@@ -83,7 +80,7 @@ const useTreeViewItemsReorderingItemPlugin = ({
           instance.completeDraggingItem(itemId);
         };
         return {
-          draggable: true,
+          draggable: canItemBeReordered ? true : undefined,
           onDragStart: handleDragStart,
           onDragOver: handleRootDragOver,
           onDragEnd: handleRootDragEnd
@@ -93,15 +90,15 @@ const useTreeViewItemsReorderingItemPlugin = ({
         externalEventHandlers,
         contentRefObject
       }) => {
-        if (!isValidTarget) {
+        if (!isDragging) {
           return {};
         }
         const handleDragOver = event => {
           externalEventHandlers.onDragOver?.(event);
-          if (event.defaultMuiPrevented || validActionsRef.current == null) {
+          if (event.defaultMuiPrevented || validActionsRef.current == null || !contentRefObject.current) {
             return;
           }
-          const rect = event.target.getBoundingClientRect();
+          const rect = contentRefObject.current.getBoundingClientRect();
           const y = event.clientY - rect.top;
           const x = event.clientX - rect.left;
           instance.setDragTargetItem({

package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js

@@ -17,16 +17,6 @@ const useTreeViewItemsReordering = ({
   params,
   store
 }) => {
-  const canItemBeDragged = React.useCallback(itemId => {
-    if (!params.itemsReordering) {
-      return false;
-    }
-    const isItemReorderable = params.isItemReorderable;
-    if (isItemReorderable) {
-      return isItemReorderable(itemId);
-    }
-    return true;
-  }, [params.itemsReordering, params.isItemReorderable]);
   const getDroppingTargetValidActions = React.useCallback(itemId => {
     const currentReorder = _useTreeViewItemsReordering2.itemsReorderingSelectors.currentReorder(store.state);
     if (!currentReorder) {
@@ -186,7 +176,6 @@ const useTreeViewItemsReordering = ({
   }, [store, params.itemsReordering, params.isItemReorderable]);
   return {
     instance: {
-      canItemBeDragged,
       getDroppingTargetValidActions,
       startDraggingItem,
       cancelDraggingItem,

package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts

@@ -20,9 +20,9 @@ export declare const itemsReorderingSelectors: {
     targetDepth: number;
   } | null;
   /**
-   * Checks whether an item is a valid target for the dragged item.
+   * Checks whether an item is being dragged.
    */
-  isItemValidDropTarget: (state: TreeViewState<[UseTreeViewItemsReorderingSignature]>, itemId: string) => boolean;
+  isDragging: (state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => boolean;
   /**
    * Checks whether an item can be reordered.
    */

package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js

@@ -28,12 +28,9 @@ const itemsReorderingSelectors = exports.itemsReorderingSelectors = {
     };
   }),
   /**
-   * Checks whether an item is a valid target for the dragged item.
+   * Checks whether an item is being dragged.
    */
-  isItemValidDropTarget: (0, _store.createSelector)((state, itemId) => {
-    const draggedItemId = state.itemsReordering.currentReorder?.draggedItemId;
-    return draggedItemId != null && draggedItemId !== itemId;
-  }),
+  isDragging: (0, _store.createSelector)(state => !!state.itemsReordering.currentReorder?.draggedItemId),
   /**
    * Checks whether an item can be reordered.
    */

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

@@ -2,12 +2,6 @@ import { DefaultizedProps } from '@mui/x-internals/types';
 import { TreeViewPluginSignature, UseTreeViewItemsSignature } from '@mui/x-tree-view/internals';
 import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
 export interface UseTreeViewItemsReorderingInstance {
-  /**
-   * Check if a given item can be dragged.
-   * @param {TreeViewItemId} itemId The id of the item to check.
-   * @returns {boolean} `true` if the item can be dragged, `false` otherwise.
-   */
-  canItemBeDragged: (itemId: TreeViewItemId) => boolean;
   /**
    * Get the valid reordering action if a given item is the target of the ongoing reordering.
    * @param {TreeViewItemId} itemId The id of the item to get the action of.

package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts

@@ -5,7 +5,7 @@ import { TreeViewItemItemReorderingValidActions, TreeViewItemReorderPosition, Us
  * Checks if the item with the id itemIdB is an ancestor of the item with the id itemIdA.
  */
 export declare const isAncestor: (store: TreeViewUsedStore<UseTreeViewItemsReorderingSignature>, itemIdA: string, itemIdB: string) => boolean;
-interface GetNewPositionParams {
+interface GetNewPositionParameters {
   itemChildrenIndentation: string | number;
   validActions: TreeViewItemItemReorderingValidActions;
   targetHeight: number;
@@ -22,7 +22,7 @@ export declare const chooseActionToApply: ({
   cursorX,
   cursorY,
   contentElement
-}: GetNewPositionParams) => TreeViewItemsReorderingAction | null;
+}: GetNewPositionParameters) => TreeViewItemsReorderingAction | null;
 export declare const moveItemInTree: <R extends {}>({
   itemToMoveId,
   oldPosition,

package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js

@@ -255,5 +255,5 @@ function useLazyLoadOnMount({
   }, [instance, params.items, params.dataSource, store]);
 }
 function getExpandableItemsFromDataSource(store, dataSource) {
-  return Object.values(store.state.items.itemMetaLookup).filter(itemMeta => !itemMeta.expandable && dataSource.getChildrenCount(store.state.items.itemModelLookup[itemMeta.id]) > 0).map(item => item.id);
+  return Object.values(store.state.items.itemMetaLookup).filter(itemMeta => !itemMeta.expandable && dataSource.getChildrenCount(store.state.items.itemModelLookup[itemMeta.id]) !== 0).map(item => item.id);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view-pro",
-  "version": "8.18.0",
+  "version": "8.19.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Tree View components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -40,9 +40,9 @@
     "react-transition-group": "^4.4.5",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-license": "8.18.0",
-    "@mui/x-tree-view": "8.18.0",
-    "@mui/x-internals": "8.18.0"
+    "@mui/x-internals": "8.19.0",
+    "@mui/x-license": "8.19.0",
+    "@mui/x-tree-view": "8.19.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",