@mui/x-tree-view-pro 8.0.0-alpha.10 → 8.0.0-alpha.11

package/CHANGELOG.md

@@ -5,6 +5,110 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## **8.0.0-alpha.11**
+
+_Feb 7, 2025_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ Mount and resize performance improvements for the Data Grid
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@lauri865.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @KenanYusuf, @LukasTy, @MBilalShafi, @noraleonte, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- `createUseGridApiEventHandler()` is not exported anymore.
+- The `filteredRowsLookup` object of the filter state does not contain `true` values anymore. If the row is filtered out, the value is `false`. Otherwise, the row id is not present in the object.
+  This change only impacts you if you relied on `filteredRowsLookup` to get ids of filtered rows. In this case,use `gridDataRowIdsSelector` selector to get row ids and check `filteredRowsLookup` for `false` values:
+
+  ```diff
+   const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+  -const filteredRowIds = Object.keys(filteredRowsLookup).filter((rowId) => filteredRowsLookup[rowId] === true);
+  +const rowIds = gridDataRowIdsSelector(apiRef);
+  +const filteredRowIds = rowIds.filter((rowId) => filteredRowsLookup[rowId] !== false);
+  ```
+
+- The `visibleRowsLookup` state does not contain `true` values anymore. If the row is not visible, the value is `false`. Otherwise, the row id is not present in the object:
+
+  ```diff
+   const visibleRowsLookup = gridVisibleRowsLookupSelector(apiRef);
+  -const isRowVisible = visibleRowsLookup[rowId] === true;
+  +const isRowVisible = visibleRowsLookup[rowId] !== false;
+  ```
+
+#### `@mui/x-data-grid@8.0.0-alpha.11`
+
+- [DataGrid] Avoid `<GridRoot />` double-render pass on mount in SPA mode (#15648) @lauri865
+- [DataGrid] Fix loading overlay not in sync with scroll (#16437) @MBilalShafi
+- [DataGrid] Refactor: remove material `MenuList` import (#16444) @romgrk
+- [DataGrid] Refactor: simplify `useGridApiEventHandler()` (#16479) @romgrk
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.11` [![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-alpha.11`, plus:
+
+- [DataGridPro] Fix the return type of `useGridApiContext()` for Pro and Premium packages on React < 19 (#16441) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.11` [![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-alpha.11`, plus:
+
+- [DataGridPremium] Fix "no rows" overlay not showing with active aggregation (#16466) @KenanYusuf
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-alpha.11`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.11` [![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-alpha.11`, plus:
+
+- [DateRangeCalendar] Support arrow navigation with multiple months rendered (#16363) @flaviendelangle
+- [DateRangePicker] Fix `currentMonthCalendarPosition` prop behavior on mobile (#16455) @LukasTy
+- [DateRangePicker] Fix vertical alignment for multi input fields (#16489) @noraleonte
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.11`
+
+- [charts] Add `color` prop to `Sparkline` and deprecate `colors` (#16477) @bernardobelchior
+- [charts] Make typescript more flexible about plugins and their params (#16478) @alexfauquette
+- [charts] Remove component for axis event listener (#16314) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-alpha.11` [![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-alpha.11`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.11`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.11` [![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-alpha.11`.
+
+### Docs
+
+- [docs] Update charts colors default value (#16484) @bernardobelchior
+
+### Core
+
+- [core] Fix corepack and pnpm installation in CircleCI (#16434) @flaviendelangle
+- [code-infra] Update monorepo (#16112) @Janpot
+- [test] Avoid test warning when running on React 18 (#16486) @LukasTy
+- [test] Disable `react-transition-group` transitions in unit testing (#16288) @lauri865
+
 ## 8.0.0-alpha.10
 
 _Jan 30, 2025_
@@ -50,6 +154,7 @@ Following are all team members who have contributed to this release:
   +  },
    });
   ```
+
 - The `detailPanels`, `pinnedColumns`, and `pinnedRowsRenderZone` classes have been removed.
 - Return type of the `useGridApiRef()` hook and the type of `apiRef` prop are updated to explicitly include the possibilty of `null`. In addition to this, `useGridApiRef()` returns a reference that is initialized with `null` instead of `{}`.
 
@@ -91,7 +196,7 @@ Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.10`.
 
 #### Breaking changes
 
-- The component passed to the `field` slot no longer receives the `ref`,  `disabled`, `className`, `sx`, `label`, `name`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections`, `onSelectedSectionsChange` and `inputRef` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
+- The component passed to the `field` slot no longer receives the `ref`, `disabled`, `className`, `sx`, `label`, `name`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections`, `onSelectedSectionsChange` and `inputRef` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
 - The `MuiPickersPopper` theme entry have been renamed `MuiPickerPopper` and some of its props have been removed — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#muipickerspopper)
 
 #### `@mui/x-date-pickers@8.0.0-alpha.10`
@@ -111,7 +216,7 @@ Same changes as in `@mui/x-date-pickers@8.0.0-alpha.10`.
 
 - Replace `legend.position.horizontal` from `"left" | "middle" | "right"` to `"start" | "center" | "end"`.
   This is to align with the CSS values and reflect the RTL ability of the legend component.
-- The default colors have changed. To keep using the old palette. It is possible to import `blueberryTwilightPalette` from  `@mui/x-charts/colorPalettes` and set it on the `colors` property of charts.
+- The default colors have changed. To keep using the old palette. It is possible to import `blueberryTwilightPalette` from `@mui/x-charts/colorPalettes` and set it on the `colors` property of charts.
 - The `id` property is now optional on the `Pie` and `Scatter` data types.
 
 #### `@mui/x-charts@8.0.0-alpha.10`

package/RichTreeViewPro/RichTreeViewPro.js

@@ -167,10 +167,7 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`,
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
-  experimentalFeatures: PropTypes.shape({
-    itemsReordering: PropTypes.bool,
-    labelEditing: PropTypes.bool
-  }),
+  experimentalFeatures: PropTypes.object,
   /**
    * Used to determine the id of a given item.
    *
@@ -202,17 +199,15 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
    */
   isItemDisabled: PropTypes.func,
   /**
-   * Determines if a given item is editable or not.
-   * Make sure to also enable the `labelEditing` experimental feature:
-   * `<RichTreeViewPro experimentalFeatures={{ labelEditing: true }}  />`.
-   * By default, the items are not editable.
+   * Determine if a given item can be edited.
    * @template R
    * @param {R} item The item to check.
-   * @returns {boolean} `true` if the item is editable.
+   * @returns {boolean} `true` if the item can be edited.
+   * @default () => false
    */
   isItemEditable: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   /**
-   * Used to determine if a given item can be reordered.
+   * Determine if a given item can be reordered.
    * @param {string} itemId The id of the item to check.
    * @returns {boolean} `true` if the item can be reordered.
    * @default () => true
@@ -227,8 +222,6 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
   items: PropTypes.array.isRequired,
   /**
    * If `true`, the reordering of items is enabled.
-   * Make sure to also enable the `itemsReordering` experimental feature:
-   * `<RichTreeViewPro experimentalFeatures={{ itemsReordering: true }} itemsReordering />`.
    * @default false
    */
   itemsReordering: PropTypes.bool,

package/index.js

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

package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { selectorItemIndex, selectorItemMeta, selectorItemOrderedChildrenIds } from '@mui/x-tree-view/internals';
-import { warnOnce } from '@mui/x-internals/warning';
 import { chooseActionToApply, isAncestor, moveItemInTree } from "./useTreeViewItemsReordering.utils.js";
 import { useTreeViewItemsReorderingItemPlugin } from "./useTreeViewItemsReordering.itemPlugin.js";
 import { selectorItemsReordering } from "./useTreeViewItemsReordering.selectors.js";
@@ -176,19 +175,10 @@ export const useTreeViewItemsReordering = ({
 };
 useTreeViewItemsReordering.itemPlugin = useTreeViewItemsReorderingItemPlugin;
 useTreeViewItemsReordering.getDefaultizedParams = ({
-  params,
-  experimentalFeatures
-}) => {
-  const canUseFeature = experimentalFeatures?.itemsReordering;
-  if (process.env.NODE_ENV !== 'production') {
-    if (params.itemsReordering && !canUseFeature) {
-      warnOnce(['MUI X: The items reordering feature requires the `itemsReordering` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ itemsReordering: true }}` to the `<RichTreeViewPro />`component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/']);
-    }
-  }
-  return _extends({}, params, {
-    itemsReordering: canUseFeature ? params.itemsReordering ?? false : false
-  });
-};
+  params
+}) => _extends({}, params, {
+  itemsReordering: params.itemsReordering ?? false
+});
 useTreeViewItemsReordering.getInitialState = () => ({
   itemsReordering: null
 });

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

@@ -56,13 +56,11 @@ export type TreeViewItemItemReorderingValidActions = {
 export interface UseTreeViewItemsReorderingParameters {
     /**
      * If `true`, the reordering of items is enabled.
-     * Make sure to also enable the `itemsReordering` experimental feature:
-     * `<RichTreeViewPro experimentalFeatures={{ itemsReordering: true }} itemsReordering />`.
      * @default false
      */
     itemsReordering?: boolean;
     /**
-     * Used to determine if a given item can be reordered.
+     * Determine if a given item can be reordered.
      * @param {string} itemId The id of the item to check.
      * @returns {boolean} `true` if the item can be reordered.
      * @default () => true
@@ -115,7 +113,6 @@ export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{
     instance: UseTreeViewItemsReorderingInstance;
     state: UseTreeViewItemsReorderingState;
     contextValue: UseTreeViewItemsReorderingContextValue;
-    experimentalFeatures: 'itemsReordering';
     dependencies: [UseTreeViewItemsSignature];
 }>;
 export interface UseTreeItemRootSlotPropsFromItemsReordering {

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import ponyfillGlobal from '@mui/utils/ponyfillGlobal';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczODI5OTYwMDAwMA==";
+  const releaseInfo = "MTczODg4MjgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/RichTreeViewPro/RichTreeViewPro.js

@@ -167,10 +167,7 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`,
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
-  experimentalFeatures: PropTypes.shape({
-    itemsReordering: PropTypes.bool,
-    labelEditing: PropTypes.bool
-  }),
+  experimentalFeatures: PropTypes.object,
   /**
    * Used to determine the id of a given item.
    *
@@ -202,17 +199,15 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
    */
   isItemDisabled: PropTypes.func,
   /**
-   * Determines if a given item is editable or not.
-   * Make sure to also enable the `labelEditing` experimental feature:
-   * `<RichTreeViewPro experimentalFeatures={{ labelEditing: true }}  />`.
-   * By default, the items are not editable.
+   * Determine if a given item can be edited.
    * @template R
    * @param {R} item The item to check.
-   * @returns {boolean} `true` if the item is editable.
+   * @returns {boolean} `true` if the item can be edited.
+   * @default () => false
    */
   isItemEditable: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   /**
-   * Used to determine if a given item can be reordered.
+   * Determine if a given item can be reordered.
    * @param {string} itemId The id of the item to check.
    * @returns {boolean} `true` if the item can be reordered.
    * @default () => true
@@ -227,8 +222,6 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
   items: PropTypes.array.isRequired,
   /**
    * If `true`, the reordering of items is enabled.
-   * Make sure to also enable the `itemsReordering` experimental feature:
-   * `<RichTreeViewPro experimentalFeatures={{ itemsReordering: true }} itemsReordering />`.
    * @default false
    */
   itemsReordering: PropTypes.bool,

package/modern/index.js

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

package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { selectorItemIndex, selectorItemMeta, selectorItemOrderedChildrenIds } from '@mui/x-tree-view/internals';
-import { warnOnce } from '@mui/x-internals/warning';
 import { chooseActionToApply, isAncestor, moveItemInTree } from "./useTreeViewItemsReordering.utils.js";
 import { useTreeViewItemsReorderingItemPlugin } from "./useTreeViewItemsReordering.itemPlugin.js";
 import { selectorItemsReordering } from "./useTreeViewItemsReordering.selectors.js";
@@ -176,19 +175,10 @@ export const useTreeViewItemsReordering = ({
 };
 useTreeViewItemsReordering.itemPlugin = useTreeViewItemsReorderingItemPlugin;
 useTreeViewItemsReordering.getDefaultizedParams = ({
-  params,
-  experimentalFeatures
-}) => {
-  const canUseFeature = experimentalFeatures?.itemsReordering;
-  if (process.env.NODE_ENV !== 'production') {
-    if (params.itemsReordering && !canUseFeature) {
-      warnOnce(['MUI X: The items reordering feature requires the `itemsReordering` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ itemsReordering: true }}` to the `<RichTreeViewPro />`component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/']);
-    }
-  }
-  return _extends({}, params, {
-    itemsReordering: canUseFeature ? params.itemsReordering ?? false : false
-  });
-};
+  params
+}) => _extends({}, params, {
+  itemsReordering: params.itemsReordering ?? false
+});
 useTreeViewItemsReordering.getInitialState = () => ({
   itemsReordering: null
 });

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import ponyfillGlobal from '@mui/utils/ponyfillGlobal';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczODI5OTYwMDAwMA==";
+  const releaseInfo = "MTczODg4MjgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/RichTreeViewPro/RichTreeViewPro.js

@@ -174,10 +174,7 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`,
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
-  experimentalFeatures: _propTypes.default.shape({
-    itemsReordering: _propTypes.default.bool,
-    labelEditing: _propTypes.default.bool
-  }),
+  experimentalFeatures: _propTypes.default.object,
   /**
    * Used to determine the id of a given item.
    *
@@ -209,17 +206,15 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
    */
   isItemDisabled: _propTypes.default.func,
   /**
-   * Determines if a given item is editable or not.
-   * Make sure to also enable the `labelEditing` experimental feature:
-   * `<RichTreeViewPro experimentalFeatures={{ labelEditing: true }}  />`.
-   * By default, the items are not editable.
+   * Determine if a given item can be edited.
    * @template R
    * @param {R} item The item to check.
-   * @returns {boolean} `true` if the item is editable.
+   * @returns {boolean} `true` if the item can be edited.
+   * @default () => false
    */
   isItemEditable: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
   /**
-   * Used to determine if a given item can be reordered.
+   * Determine if a given item can be reordered.
    * @param {string} itemId The id of the item to check.
    * @returns {boolean} `true` if the item can be reordered.
    * @default () => true
@@ -234,8 +229,6 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
   items: _propTypes.default.array.isRequired,
   /**
    * If `true`, the reordering of items is enabled.
-   * Make sure to also enable the `itemsReordering` experimental feature:
-   * `<RichTreeViewPro experimentalFeatures={{ itemsReordering: true }} itemsReordering />`.
    * @default false
    */
   itemsReordering: _propTypes.default.bool,

package/node/index.js

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

package/node/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js

@@ -9,7 +9,6 @@ exports.useTreeViewItemsReordering = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-tree-view/internals");
-var _warning = require("@mui/x-internals/warning");
 var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering.utils");
 var _useTreeViewItemsReordering2 = require("./useTreeViewItemsReordering.itemPlugin");
 var _useTreeViewItemsReordering3 = require("./useTreeViewItemsReordering.selectors");
@@ -185,19 +184,10 @@ const useTreeViewItemsReordering = ({
 exports.useTreeViewItemsReordering = useTreeViewItemsReordering;
 useTreeViewItemsReordering.itemPlugin = _useTreeViewItemsReordering2.useTreeViewItemsReorderingItemPlugin;
 useTreeViewItemsReordering.getDefaultizedParams = ({
-  params,
-  experimentalFeatures
-}) => {
-  const canUseFeature = experimentalFeatures?.itemsReordering;
-  if (process.env.NODE_ENV !== 'production') {
-    if (params.itemsReordering && !canUseFeature) {
-      (0, _warning.warnOnce)(['MUI X: The items reordering feature requires the `itemsReordering` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ itemsReordering: true }}` to the `<RichTreeViewPro />`component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/']);
-    }
-  }
-  return (0, _extends2.default)({}, params, {
-    itemsReordering: canUseFeature ? params.itemsReordering ?? false : false
-  });
-};
+  params
+}) => (0, _extends2.default)({}, params, {
+  itemsReordering: params.itemsReordering ?? false
+});
 useTreeViewItemsReordering.getInitialState = () => ({
   itemsReordering: null
 });

package/node/internals/utils/releaseInfo.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _ponyfillGlobal = _interopRequireDefault(require("@mui/utils/ponyfillGlobal"));
 const getReleaseInfo = () => {
-  const releaseInfo = "MTczODI5OTYwMDAwMA==";
+  const releaseInfo = "MTczODg4MjgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view-pro",
-  "version": "8.0.0-alpha.10",
+  "version": "8.0.0-alpha.11",
   "description": "The Pro plan edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -41,9 +41,9 @@
     "react-transition-group": "^4.4.5",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.4.0",
-    "@mui/x-internals": "8.0.0-alpha.10",
-    "@mui/x-tree-view": "8.0.0-alpha.10",
-    "@mui/x-license": "8.0.0-alpha.10"
+    "@mui/x-internals": "8.0.0-alpha.11",
+    "@mui/x-license": "8.0.0-alpha.11",
+    "@mui/x-tree-view": "8.0.0-alpha.11"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",