@mui/x-tree-view-pro 8.0.0-beta.0 → 8.0.0-beta.2

package/CHANGELOG.md

@@ -5,6 +5,177 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-beta.2
+
+_Mar 27, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔍 Update the Data Grid quick filter to be collapsed when not in use
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@lhilgert9.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @hasdfa, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @mnajdova, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.2`
+
+- [DataGrid] Fix error caused by trying to render rows that are not in the state anymore (#17057) @arminmeh
+- [DataGrid] Refactor: remove more material (#16922) @romgrk
+- [DataGrid] Update Quick Filter component to be expandable (#16862) @KenanYusuf
+- [DataGrid] Fix crash when used with `@mui/styled-engine-sc` (#17154) @KenanYusuf
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.2` [![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.0.0-beta.2`, plus:
+
+- [DataGridPro] Data source: Allow expanding groups with unknown children (#17144) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.2` [![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.0.0-beta.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.2`
+
+- [fields] Extract the props of each field slot into a standalone hook for easier re-use (#17114) @flaviendelangle
+- [pickers] Fix visual regression in Date Range Calendar's day (#17148) @flaviendelangle
+- [pickers] Remove all code duplication to apply default values to validation props (#17038) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.2` [![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.0.0-beta.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.2`
+
+- [charts] Memoize axes and series with default (#17156) @alexfauquette
+- [charts] Add pie benchmark (#17115) @JCQuintas
+- [charts] Fix CSS vars support for dark theme (#17106) @alexfauquette
+- [charts] Fix radar hover (#17134) @alexfauquette
+- [charts] Move axis interaction to selectors (#17039) @alexfauquette
+- [charts] Fix Pie benchmark (#17125) @JCQuintas
+
+#### `@mui/x-charts-pro@8.0.0-beta.2` [![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.0.0-beta.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.2` [![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.0.0-beta.2`.
+
+### `@mui/x-codemod@8.0.0-beta.1`
+
+- [codemod] Add Data Grid codemods (#17121, #17124) @MBilalShafi
+
+### Docs
+
+- [docs] Fix example import for `ExportExcel` component (#17110) @KenanYusuf
+
+### Core
+
+- [code-infra] Remove `@mui/styles` dependency & patches (#17071) @mnajdova
+- [code-infra] Add more tests to slow screenshot tests (#17075) @JCQuintas
+- [code-infra] Fix pickers codecov (#17120) @JCQuintas
+- [code-infra] Move `isDeepEqual` to @mui/x-internals (#17129) @JCQuintas
+- [code-infra] Remove `test_regressions` step from React 18 pipeline (#17108) @LukasTy
+- [code-infra] Update some data-grid tests for vitest (#17078, #17104, #17146) @JCQuintas
+- [code-infra] Update some date-pickers tests for vitest (#17083) @JCQuintas
+- [infra] Update `issue-status-label-handler.yml` @michelengelen
+- [infra] Added reusable issue status label handler workflow (#17145) @michelengelen
+- [infra] Switch to reusable 'stale issues/PRs' workflow (#17107) @michelengelen
+- [telemetry] Improve request body size, update dependencies, and optimize SSR handling (#17008) @hasdfa
+
+## 8.0.0-beta.1
+
+_Mar 21, 2025_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@jyash97.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.1`
+
+- [DataGrid] Fix error caused by `forwardRef` to `ClickAwayListener` (#17049) @arminmeh
+- [DataGrid] Fix error while editing rows with custom id (#17048) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.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@8.0.0-beta.1`, plus:
+
+- [DataGridPro] Fix header select checkbox state with `checkboxSelectionVisibleOnly` and `paginationMode="server"` (#17026) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.1` [![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.0.0-beta.1`, plus:
+
+- [DataGridPremium] Update column state correctly when grouping mode is updated with one grouping column (#17069) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.1`
+
+- [fields] Clean the `useField` hook (part 1) (#16944) @flaviendelangle
+- [fields] Improve the check for year in `doesSectionFormatHaveLeadingZeros` (#17051) @flaviendelangle
+- [pickers] Deprecate the `disableOpenPicker` prop (#17040) @flaviendelangle
+- [pickers] Simplify the `cleanLeadingZeros` method (#17063) @flaviendelangle
+- [pickers] Use the new `ownerState` in `PickersDay` and `DateRangePickerDay` (#17035) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.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@8.0.0-beta.1`, plus:
+
+- [DateRangePicker] Use desktop media query constant on range pickers (#17052) @flaviendelangle
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.1`
+
+- [charts] Fix horizontal bar with multiple axes (#17059) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-beta.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-charts@8.0.0-beta.1`, plus:
+
+- [charts-pro] Allow disabling Heatmap tooltip (#17060) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.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@8.0.0-beta.1`.
+
+### Docs
+
+- [docs] Fix 404 (#17033) @alexfauquette
+- [docs] Fix Data Grid advanced list view demo (#17064) @KenanYusuf
+
 ## 8.0.0-beta.0
 
 <img width="100%" alt="MUI X v8 Beta is live" src="https://github.com/user-attachments/assets/61ec4dd8-c946-456b-8b45-d51de8772f5d">

package/RichTreeViewPro/RichTreeViewPro.js

@@ -25,10 +25,21 @@ const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
-  const slots = {
-    root: ['root']
-  };
-  return (0, _composeClasses.default)(slots, _richTreeViewProClasses.getRichTreeViewProUtilityClass, classes);
+  return React.useMemo(() => {
+    const slots = {
+      root: ['root'],
+      item: ['item'],
+      itemContent: ['itemContent'],
+      itemGroupTransition: ['itemGroupTransition'],
+      itemIconContainer: ['itemIconContainer'],
+      itemLabel: ['itemLabel'],
+      itemLabelInput: ['itemLabelInput'],
+      itemCheckbox: ['itemCheckbox'],
+      itemDragAndDropOverlay: ['itemDragAndDropOverlay'],
+      itemErrorIcon: ['itemErrorIcon']
+    };
+    return (0, _composeClasses.default)(slots, _richTreeViewProClasses.getRichTreeViewProUtilityClass, classes);
+  }, [classes]);
 };
 const RichTreeViewProRoot = exports.RichTreeViewProRoot = (0, _zeroStyled.styled)('ul', {
   name: 'MuiRichTreeViewPro',
@@ -86,7 +97,8 @@ const RichTreeViewPro = exports.RichTreeViewPro = /*#__PURE__*/React.forwardRef(
     ownerState: props
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.TreeViewProvider, {
-    value: contextValue,
+    contextValue: contextValue,
+    classes: classes,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.RichTreeViewItems, {
         slots: slots,
@@ -140,8 +152,8 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   dataSource: _propTypes.default.shape({
-    getChildrenCount: _propTypes.default.func,
-    getTreeItems: _propTypes.default.func
+    getChildrenCount: _propTypes.default.func.isRequired,
+    getTreeItems: _propTypes.default.func.isRequired
   }),
   dataSourceCache: _propTypes.default.shape({
     clear: _propTypes.default.func.isRequired,

package/RichTreeViewPro/richTreeViewProClasses.d.ts

@@ -1,7 +1,5 @@
-export interface RichTreeViewProClasses {
-  /** Styles applied to the root element. */
-  root: string;
-}
+import { TreeViewClasses } from '@mui/x-tree-view/internals';
+export interface RichTreeViewProClasses extends TreeViewClasses {}
 export type RichTreeViewProClassKey = keyof RichTreeViewProClasses;
 export declare function getRichTreeViewProUtilityClass(slot: string): string;
 export declare const richTreeViewProClasses: RichTreeViewProClasses;

package/RichTreeViewPro/richTreeViewProClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getRichTreeViewProUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiRichTreeViewPro', slot);
 }
-const richTreeViewProClasses = exports.richTreeViewProClasses = (0, _generateUtilityClasses.default)('MuiRichTreeViewPro', ['root']);
+const richTreeViewProClasses = exports.richTreeViewProClasses = (0, _generateUtilityClasses.default)('MuiRichTreeViewPro', ['root', 'item', 'itemContent', 'itemGroupTransition', 'itemIconContainer', 'itemLabel', 'itemCheckbox', 'itemLabelInput', 'itemDragAndDropOverlay', 'itemErrorIcon', 'itemLoadingIcon']);

package/esm/RichTreeViewPro/RichTreeViewPro.js

@@ -18,10 +18,21 @@ const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
-  const slots = {
-    root: ['root']
-  };
-  return composeClasses(slots, getRichTreeViewProUtilityClass, classes);
+  return React.useMemo(() => {
+    const slots = {
+      root: ['root'],
+      item: ['item'],
+      itemContent: ['itemContent'],
+      itemGroupTransition: ['itemGroupTransition'],
+      itemIconContainer: ['itemIconContainer'],
+      itemLabel: ['itemLabel'],
+      itemLabelInput: ['itemLabelInput'],
+      itemCheckbox: ['itemCheckbox'],
+      itemDragAndDropOverlay: ['itemDragAndDropOverlay'],
+      itemErrorIcon: ['itemErrorIcon']
+    };
+    return composeClasses(slots, getRichTreeViewProUtilityClass, classes);
+  }, [classes]);
 };
 export const RichTreeViewProRoot = styled('ul', {
   name: 'MuiRichTreeViewPro',
@@ -79,7 +90,8 @@ const RichTreeViewPro = /*#__PURE__*/React.forwardRef(function RichTreeViewPro(i
     ownerState: props
   });
   return /*#__PURE__*/_jsx(TreeViewProvider, {
-    value: contextValue,
+    contextValue: contextValue,
+    classes: classes,
     children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
       children: [/*#__PURE__*/_jsx(RichTreeViewItems, {
         slots: slots,
@@ -133,8 +145,8 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   dataSource: PropTypes.shape({
-    getChildrenCount: PropTypes.func,
-    getTreeItems: PropTypes.func
+    getChildrenCount: PropTypes.func.isRequired,
+    getTreeItems: PropTypes.func.isRequired
   }),
   dataSourceCache: PropTypes.shape({
     clear: PropTypes.func.isRequired,

package/esm/RichTreeViewPro/richTreeViewProClasses.d.ts

@@ -1,7 +1,5 @@
-export interface RichTreeViewProClasses {
-  /** Styles applied to the root element. */
-  root: string;
-}
+import { TreeViewClasses } from '@mui/x-tree-view/internals';
+export interface RichTreeViewProClasses extends TreeViewClasses {}
 export type RichTreeViewProClassKey = keyof RichTreeViewProClasses;
 export declare function getRichTreeViewProUtilityClass(slot: string): string;
 export declare const richTreeViewProClasses: RichTreeViewProClasses;

package/esm/RichTreeViewPro/richTreeViewProClasses.js

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getRichTreeViewProUtilityClass(slot) {
   return generateUtilityClass('MuiRichTreeViewPro', slot);
 }
-export const richTreeViewProClasses = generateUtilityClasses('MuiRichTreeViewPro', ['root']);
+export const richTreeViewProClasses = generateUtilityClasses('MuiRichTreeViewPro', ['root', 'item', 'itemContent', 'itemGroupTransition', 'itemIconContainer', 'itemLabel', 'itemCheckbox', 'itemLabelInput', 'itemDragAndDropOverlay', 'itemErrorIcon', 'itemLoadingIcon']);

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view-pro v8.0.0-beta.0
+ * @mui/x-tree-view-pro v8.0.0-beta.2
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

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

@@ -1,21 +1,21 @@
 import * as React from 'react';
 import { useTreeViewContext, isTargetInDescendants, useSelector } from '@mui/x-tree-view/internals';
-import { selectorItemsReorderingDraggedItemProperties, selectorItemsReorderingIsValidTarget } from "./useTreeViewItemsReordering.selectors.js";
+import { selectorCanItemBeReordered, selectorDraggedItemProperties, selectorIsItemValidReorderingTarget } from "./useTreeViewItemsReordering.selectors.js";
 export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
 export const useTreeViewItemsReorderingItemPlugin = ({
   props
 }) => {
   const {
     instance,
-    store,
-    itemsReordering
+    store
   } = useTreeViewContext();
   const {
     itemId
   } = props;
   const validActionsRef = React.useRef(null);
-  const draggedItemProperties = useSelector(store, selectorItemsReorderingDraggedItemProperties, itemId);
-  const isValidTarget = useSelector(store, selectorItemsReorderingIsValidTarget, itemId);
+  const draggedItemProperties = useSelector(store, selectorDraggedItemProperties, itemId);
+  const canItemBeReordered = useSelector(store, selectorCanItemBeReordered);
+  const isValidTarget = useSelector(store, selectorIsItemValidReorderingTarget, itemId);
   return {
     propsEnhancers: {
       root: ({
@@ -23,7 +23,7 @@ export const useTreeViewItemsReorderingItemPlugin = ({
         contentRefObject,
         externalEventHandlers
       }) => {
-        if (!itemsReordering.enabled || itemsReordering.isItemReorderable && !itemsReordering.isItemReorderable(itemId)) {
+        if (!canItemBeReordered) {
           return {};
         }
         const handleDragStart = event => {

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

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { selectorItemIndex, selectorItemMeta, selectorItemOrderedChildrenIds } from '@mui/x-tree-view/internals';
 import { chooseActionToApply, isAncestor, moveItemInTree } from "./useTreeViewItemsReordering.utils.js";
 import { useTreeViewItemsReorderingItemPlugin } from "./useTreeViewItemsReordering.itemPlugin.js";
-import { selectorItemsReordering } from "./useTreeViewItemsReordering.selectors.js";
+import { selectorCurrentItemReordering } from "./useTreeViewItemsReordering.selectors.js";
 export const useTreeViewItemsReordering = ({
   params,
   store
@@ -19,18 +20,19 @@ export const useTreeViewItemsReordering = ({
     return true;
   }, [params.itemsReordering, params.isItemReorderable]);
   const getDroppingTargetValidActions = React.useCallback(itemId => {
-    const itemsReordering = selectorItemsReordering(store.value);
-    if (!itemsReordering) {
+    const currentReorder = selectorCurrentItemReordering(store.value);
+    if (!currentReorder) {
       throw new Error('There is no ongoing reordering.');
     }
-    if (itemId === itemsReordering.draggedItemId) {
+    if (itemId === currentReorder.draggedItemId) {
       return {};
     }
     const canMoveItemToNewPosition = params.canMoveItemToNewPosition;
     const targetItemMeta = selectorItemMeta(store.value, itemId);
     const targetItemIndex = selectorItemIndex(store.value, targetItemMeta.id);
-    const draggedItemMeta = selectorItemMeta(store.value, itemsReordering.draggedItemId);
+    const draggedItemMeta = selectorItemMeta(store.value, currentReorder.draggedItemId);
     const draggedItemIndex = selectorItemIndex(store.value, draggedItemMeta.id);
+    const isTargetLastSibling = targetItemIndex === selectorItemOrderedChildrenIds(store.value, targetItemMeta.parentId).length - 1;
     const oldPosition = {
       parentId: draggedItemMeta.parentId,
       index: draggedItemIndex
@@ -42,7 +44,7 @@ export const useTreeViewItemsReordering = ({
         isValid = false;
       } else if (canMoveItemToNewPosition) {
         isValid = canMoveItemToNewPosition({
-          itemId: itemsReordering.draggedItemId,
+          itemId: currentReorder.draggedItemId,
           oldPosition,
           newPosition: positionAfterAction
         });
@@ -60,10 +62,10 @@ export const useTreeViewItemsReordering = ({
         parentId: targetItemMeta.parentId,
         index: targetItemMeta.parentId === draggedItemMeta.parentId && targetItemIndex > draggedItemIndex ? targetItemIndex - 1 : targetItemIndex
       },
-      'reorder-below': targetItemMeta.expandable ? null : {
+      'reorder-below': !targetItemMeta.expandable || isTargetLastSibling ? {
         parentId: targetItemMeta.parentId,
         index: targetItemMeta.parentId === draggedItemMeta.parentId && targetItemIndex > draggedItemIndex ? targetItemIndex : targetItemIndex + 1
-      },
+      } : null,
       'move-to-parent': targetItemMeta.parentId == null ? null : {
         parentId: targetItemMeta.parentId,
         index: selectorItemOrderedChildrenIds(store.value, targetItemMeta.parentId).length
@@ -80,33 +82,39 @@ export const useTreeViewItemsReordering = ({
   }, [store, params.canMoveItemToNewPosition]);
   const startDraggingItem = React.useCallback(itemId => {
     store.update(prevState => _extends({}, prevState, {
-      itemsReordering: {
-        targetItemId: itemId,
-        draggedItemId: itemId,
-        action: null,
-        newPosition: null
-      }
+      itemsReordering: _extends({}, prevState.itemsReordering, {
+        currentReorder: {
+          targetItemId: itemId,
+          draggedItemId: itemId,
+          action: null,
+          newPosition: null
+        }
+      })
     }));
   }, [store]);
   const stopDraggingItem = React.useCallback(itemId => {
-    const itemsReordering = selectorItemsReordering(store.value);
-    if (itemsReordering == null || itemsReordering.draggedItemId !== itemId) {
+    const currentReorder = selectorCurrentItemReordering(store.value);
+    if (currentReorder == null || currentReorder.draggedItemId !== itemId) {
       return;
     }
-    if (itemsReordering.draggedItemId === itemsReordering.targetItemId || itemsReordering.action == null || itemsReordering.newPosition == null) {
+    if (currentReorder.draggedItemId === currentReorder.targetItemId || currentReorder.action == null || currentReorder.newPosition == null) {
       store.update(prevState => _extends({}, prevState, {
-        itemsReordering: null
+        itemsReordering: _extends({}, prevState.itemsReordering, {
+          currentReorder: null
+        })
       }));
       return;
     }
-    const draggedItemMeta = selectorItemMeta(store.value, itemsReordering.draggedItemId);
+    const draggedItemMeta = selectorItemMeta(store.value, currentReorder.draggedItemId);
     const oldPosition = {
       parentId: draggedItemMeta.parentId,
       index: selectorItemIndex(store.value, draggedItemMeta.id)
     };
-    const newPosition = itemsReordering.newPosition;
+    const newPosition = currentReorder.newPosition;
     store.update(prevState => _extends({}, prevState, {
-      itemsReordering: null,
+      itemsReordering: _extends({}, prevState.itemsReordering, {
+        currentReorder: null
+      }),
       items: moveItemInTree({
         itemToMoveId: itemId,
         newPosition,
@@ -130,8 +138,8 @@ export const useTreeViewItemsReordering = ({
     contentElement
   }) => {
     store.update(prevState => {
-      const prevSubState = prevState.itemsReordering;
-      if (prevSubState == null || isAncestor(store, itemId, prevSubState.draggedItemId)) {
+      const prevItemReorder = prevState.itemsReordering.currentReorder;
+      if (prevItemReorder == null || isAncestor(store, itemId, prevItemReorder.draggedItemId)) {
         return prevState;
       }
       const action = chooseActionToApply({
@@ -144,24 +152,27 @@ export const useTreeViewItemsReordering = ({
         contentElement
       });
       const newPosition = action == null ? null : validActions[action];
-      if (prevSubState.targetItemId === itemId && prevSubState.action === action && prevSubState.newPosition?.parentId === newPosition?.parentId && prevSubState.newPosition?.index === newPosition?.index) {
+      if (prevItemReorder.targetItemId === itemId && prevItemReorder.action === action && prevItemReorder.newPosition?.parentId === newPosition?.parentId && prevItemReorder.newPosition?.index === newPosition?.index) {
         return prevState;
       }
       return _extends({}, prevState, {
-        itemsReordering: _extends({}, prevSubState, {
-          targetItemId: itemId,
-          newPosition,
-          action
+        itemsReordering: _extends({}, prevState.itemsReordering, {
+          currentReorder: _extends({}, prevItemReorder, {
+            targetItemId: itemId,
+            newPosition,
+            action
+          })
         })
       });
     });
   }, [store, params.itemChildrenIndentation]);
-  const pluginContextValue = React.useMemo(() => ({
-    itemsReordering: {
-      enabled: params.itemsReordering,
-      isItemReorderable: params.isItemReorderable
-    }
-  }), [params.itemsReordering, params.isItemReorderable]);
+  useEnhancedEffect(() => {
+    store.update(prevState => _extends({}, prevState, {
+      itemsReordering: _extends({}, prevState.itemsReordering, {
+        isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
+      })
+    }));
+  }, [store, params.itemsReordering, params.isItemReorderable]);
   return {
     instance: {
       canItemBeDragged,
@@ -169,8 +180,7 @@ export const useTreeViewItemsReordering = ({
       startDraggingItem,
       stopDraggingItem,
       setDragTargetItem
-    },
-    contextValue: pluginContextValue
+    }
   };
 };
 useTreeViewItemsReordering.itemPlugin = useTreeViewItemsReorderingItemPlugin;
@@ -179,8 +189,11 @@ useTreeViewItemsReordering.getDefaultizedParams = ({
 }) => _extends({}, params, {
   itemsReordering: params.itemsReordering ?? false
 });
-useTreeViewItemsReordering.getInitialState = () => ({
-  itemsReordering: null
+useTreeViewItemsReordering.getInitialState = params => ({
+  itemsReordering: {
+    currentReorder: null,
+    isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
+  }
 });
 useTreeViewItemsReordering.params = {
   itemsReordering: true,