@mui/x-license 7.7.0 → 7.8.0

package/CHANGELOG.md

@@ -3,6 +3,187 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.8.0
+
+_Jun 28, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛰 Introduce server-side data source for improved server integration in the Data Grid.
+
+  Supports server-side pagination, sorting and filtering on plain and tree data, and automatic caching.
+
+  To enable, provide a `getRows` function to the `unstable_dataSource` prop on the Data Grid component.
+
+  ```tsx
+  const dataSource = {
+    getRows: async (params: GridServerGetRowsParams) => {
+      const data = await fetch(
+        `https://api.example.com/data?${new URLSearchParams({
+          page: params.page,
+          pageSize: params.pageSize,
+          sortModel: JSON.stringify(params.sortModel),
+          filterModel: JSON.stringify(params.filterModel),
+        }).toString()}`,
+      );
+      return {
+        rows: data.rows,
+        totalRows: data.totalRows,
+      };
+    },
+  }
+  <DataGridPro
+    unstable_dataSource={dataSource}
+    {...otherProps}
+  />
+  ```
+
+  See [server-side data documentation](https://mui.com/x/react-data-grid/server-side-data/) for more details.
+
+- 📈 Support Date data on the BarChart component
+- ↕️ Support custom column sort icons on the Data Grid
+- 🖱️ Support modifying the expansion trigger on the Tree View components
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.8.0`
+
+- [DataGrid] Add `columnHeaderSortIcon` slot (#13563) @arminmeh
+- [DataGrid] Fix dimensions lag issue after autosize (#13587) @MBilalShafi
+- [DataGrid] Fix print export failure when `hideFooter` option is set (#13034) @tarunrajput
+
+#### `@mui/x-data-grid-pro@7.8.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.8.0`, plus:
+
+- [DataGridPro] Fix multi-sorting indicator being cut off (#13625) @KenanYusuf
+- [DataGridPro] Server-side tree data support (#12317) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@7.8.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.8.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.8.0`
+
+- [fields] Fix section clearing behavior on Android (#13652) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.8.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.8.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.8.0`
+
+- [charts] Fix line chart props not passing correct event handlers (#13609) @JCQuintas
+- [charts] Support BarChart with `Date` data (#13471) @alexfauquette
+- [charts] Support RTL for y-axis (#13614) @alexfauquette
+- [charts] Use default values instead of non-null assertion to prevent error being thrown (#13637) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.8.0`
+
+- [TreeView] Add `expansionTrigger` prop (#13533) @noraleonte
+- [TreeView] Support experimental features from plugin's dependencies (#13632) @flaviendelangle
+
+### Docs
+
+- [docs] Add callout for `Luxon` `throwOnInvalid` support (#13621) @LukasTy
+- [docs] Add "Overlays" section to the Data Grid documentation (#13624) @KenanYusuf
+
+### Core
+
+- [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas
+- [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot
+- [license] Allow usage of charts and tree view pro package for old premium licenses (#13619) @flaviendelangle
+
+## 7.7.1
+
+_Jun 21, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Portuguese (pt-PT) locale on the Data Grid
+- 🌍 Improve Danish (da-DK) locale on the Date and Time Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.7.1`
+
+- [DataGrid][docs] Clarify enabling pagination (#13350) @oliviertassinari
+- [DataGrid] Fix CSV export escaping for non-string values (#13560) @joeycumines-scw
+- [l10n] Improve Portuguese (pt-PT) locale (#13348) @joaosreis
+
+#### `@mui/x-data-grid-pro@7.7.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.7.1`, plus:
+
+- [DataGrid] Warn about `getTreeDataPath` reference (#13519) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.7.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@7.7.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.7.1`
+
+- [fields] Prevent digit editing on the `Space` key down (#13510) @flaviendelangle
+- [l10n] Improve Danish (da-DK) locale (#13375) @jacrowland1
+- [pickers] Add context to `onAccept` callback (#13511) @flaviendelangle
+- [pickers] Always use the same timezone in the field, the view and the layout components (#13481) @flaviendelangle
+- [pickers] Fix `AdapterDateFnsV3` generated method types (#13464) @alexey-kozlenkov
+- [pickers] Fix controlled `view` behavior (#13552) @LukasTy
+- [TimePicker] Improves RTL verification for the time pickers default views (#13447) @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.7.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.7.1`, plus:
+
+- [DateRangePicker] Add accessible name to calendar grid (#13538) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.7.1`
+
+- [charts] Divide `CartesianProvider` to use logic in Pro package (#13531) @JCQuintas
+- [charts] Do not publish the pro package (#13539) @alexfauquette
+- [charts] Export `Pro` versions of regular charts (#13547) @JCQuintas
+- [charts] Prepare `ChartContainerPro` for future Zoom changes (#13532) @JCQuintas
+- [charts] Remove unnecessary proptypes from internal component (#13518) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.7.1`
+
+- [TreeView] Improve typing to support optional dependencies in plugins and in the item (#13523) @flaviendelangle
+- [TreeView] Move `useTreeViewId` to the core plugins (#13566) @flaviendelangle
+- [TreeView] Remove unused state from `useTreeViewId` (#13579) @flaviendelangle
+- [TreeView] Support `itemId` with escaping characters when using `SimpleTreeView` (#13487) @oukunan
+
+### Docs
+
+- [docs] Add section about the new uncovered product watermark (#13568) @michelengelen
+- [docs] Document the `PickerValidDate` type override (#13476) @flaviendelangle
+- [docs] Fix typo (#13507) @anshtiwatne
+- [docs] Remove "-" in heat-map and tree-map urls (#13569) @alexfauquette
+- [docs] Use dedicated tab for weather dataset (#13513) @alexfauquette
+- [x-license] license update proposal (#13459) @michelengelen
+
+### Core
+
+- [core] Fix failing CI test (#13574) @alexfauquette
+- [infra] Remove explicit `@testing-library/react` dependency (#13478) @LukasTy
+
 ## 7.7.0
 
 _Jun 13, 2024_

package/Watermark/Watermark.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MuiCommercialPackageName } from '../useLicenseVerifier';
+import { MuiCommercialPackageName } from '../utils/commercialPackages';
 interface WatermarkProps {
     packageName: MuiCommercialPackageName;
     releaseInfo: string;

package/Watermark/Watermark.js

@@ -13,6 +13,8 @@ function getLicenseErrorMessage(licenseStatus) {
       return 'MUI X Invalid license key';
     case LICENSE_STATUS.OutOfScope:
       return 'MUI X License key plan mismatch';
+    case LICENSE_STATUS.NotAvailableInInitialProPlan:
+      return 'MUI X Product not covered by plan';
     case LICENSE_STATUS.NotFound:
       return 'MUI X Missing license key';
     default:

package/generateLicense/generateLicense.d.ts

@@ -1,9 +1,10 @@
-import { LicenseScope } from '../utils/licenseScope';
+import { LicenseScope, PlanVersion } from '../utils/licenseScope';
 import { LicensingModel } from '../utils/licensingModel';
 export interface LicenseDetails {
     orderNumber: string;
     expiryDate: Date;
     scope: LicenseScope;
     licensingModel: LicensingModel;
+    planVersion: PlanVersion;
 }
 export declare function generateLicense(details: LicenseDetails): string;

package/generateLicense/generateLicense.js

@@ -10,7 +10,8 @@ function getClearLicenseString(details) {
   if (details.licensingModel && !LICENSING_MODELS.includes(details.licensingModel)) {
     throw new Error('MUI X: Invalid licensing model');
   }
-  return `O=${details.orderNumber},E=${details.expiryDate.getTime()},S=${details.scope},LM=${details.licensingModel},KV=${licenseVersion}`;
+  const keyParts = [`O=${details.orderNumber}`, `E=${details.expiryDate.getTime()}`, `S=${details.scope}`, `LM=${details.licensingModel}`, `PV=${details.planVersion}`, `KV=${licenseVersion}`];
+  return keyParts.join(',');
 }
 export function generateLicense(details) {
   const licenseStr = getClearLicenseString(details);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-license v7.7.0
+ * @mui/x-license v7.8.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/Watermark/Watermark.js

@@ -13,6 +13,8 @@ function getLicenseErrorMessage(licenseStatus) {
       return 'MUI X Invalid license key';
     case LICENSE_STATUS.OutOfScope:
       return 'MUI X License key plan mismatch';
+    case LICENSE_STATUS.NotAvailableInInitialProPlan:
+      return 'MUI X Product not covered by plan';
     case LICENSE_STATUS.NotFound:
       return 'MUI X Missing license key';
     default:

package/modern/generateLicense/generateLicense.js

@@ -10,7 +10,8 @@ function getClearLicenseString(details) {
   if (details.licensingModel && !LICENSING_MODELS.includes(details.licensingModel)) {
     throw new Error('MUI X: Invalid licensing model');
   }
-  return `O=${details.orderNumber},E=${details.expiryDate.getTime()},S=${details.scope},LM=${details.licensingModel},KV=${licenseVersion}`;
+  const keyParts = [`O=${details.orderNumber}`, `E=${details.expiryDate.getTime()}`, `S=${details.scope}`, `LM=${details.licensingModel}`, `PV=${details.planVersion}`, `KV=${licenseVersion}`];
+  return keyParts.join(',');
 }
 export function generateLicense(details) {
   const licenseStr = getClearLicenseString(details);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-license v7.7.0
+ * @mui/x-license v7.8.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/useLicenseVerifier/useLicenseVerifier.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { verifyLicense } from '../verifyLicense/verifyLicense';
 import { LicenseInfo } from '../utils/licenseInfo';
-import { showExpiredAnnualGraceLicenseKeyError, showExpiredAnnualLicenseKeyError, showInvalidLicenseKeyError, showMissingLicenseKeyError, showLicenseKeyPlanMismatchError, showExpiredPackageVersionError } from '../utils/licenseErrorMessageUtils';
+import { showExpiredAnnualGraceLicenseKeyError, showExpiredAnnualLicenseKeyError, showInvalidLicenseKeyError, showMissingLicenseKeyError, showLicenseKeyPlanMismatchError, showExpiredPackageVersionError, showNotAvailableInInitialProPlanError } from '../utils/licenseErrorMessageUtils';
 import { LICENSE_STATUS } from '../utils/licenseStatus';
 import MuiLicenseInfoContext from '../Unstable_LicenseInfoProvider/MuiLicenseInfoContext';
 export const sharedLicenseStatuses = {};
@@ -17,18 +17,19 @@ export function useLicenseVerifier(packageName, releaseInfo) {
     if (sharedLicenseStatuses[packageName] && sharedLicenseStatuses[packageName].key === licenseKey) {
       return sharedLicenseStatuses[packageName].licenseVerifier;
     }
-    const acceptedScopes = packageName.includes('premium') ? ['premium'] : ['pro', 'premium'];
     const plan = packageName.includes('premium') ? 'Premium' : 'Pro';
     const licenseStatus = verifyLicense({
       releaseInfo,
       licenseKey,
-      acceptedScopes
+      packageName
     });
     const fullPackageName = `@mui/${packageName}`;
     if (licenseStatus.status === LICENSE_STATUS.Valid) {
       // Skip
     } else if (licenseStatus.status === LICENSE_STATUS.Invalid) {
       showInvalidLicenseKeyError();
+    } else if (licenseStatus.status === LICENSE_STATUS.NotAvailableInInitialProPlan) {
+      showNotAvailableInInitialProPlanError();
     } else if (licenseStatus.status === LICENSE_STATUS.OutOfScope) {
       showLicenseKeyPlanMismatchError();
     } else if (licenseStatus.status === LICENSE_STATUS.NotFound) {

package/modern/utils/commercialPackages.js

@@ -0,0 +1 @@
+export {};

package/modern/utils/licenseErrorMessageUtils.js

@@ -7,6 +7,9 @@ export function showInvalidLicenseKeyError() {
 export function showLicenseKeyPlanMismatchError() {
   showError(['MUI X: License key plan mismatch.', '', 'Your use of MUI X is not compatible with the plan of your license key. The feature you are trying to use is not included in the plan of your license key. This happens if you try to use `DataGridPremium` with a license key for the Pro plan.', '', 'To solve the issue, you can upgrade your plan from Pro to Premium at https://mui.com/r/x-get-license?scope=premium.', "Of if you didn't intend to use Premium features, you can replace the import of `@mui/x-data-grid-premium` with `@mui/x-data-grid-pro`."]);
 }
+export function showNotAvailableInInitialProPlanError() {
+  showError(['MUI X: Component not included in your license.', '', 'The component you are trying to use is not included in the Pro Plan you purchased.', '', 'Your license is from an old version of the Pro Plan that is only compatible with the `@mui/x-data-grid-pro` and `@mui/x-date-pickers-pro` commercial packages.', '', 'To start using another Pro package, please consider reaching to our sales team to upgrade your license or visit https://mui.com/r/x-get-license to get a new license key.']);
+}
 export function showMissingLicenseKeyError({
   plan,
   packageName

package/modern/utils/licenseScope.js

@@ -1 +1,2 @@
-export const LICENSE_SCOPES = ['pro', 'premium'];
+export const LICENSE_SCOPES = ['pro', 'premium'];
+export const PLAN_VERSIONS = ['initial', 'Q3-2024'];

package/modern/utils/licenseStatus.js

@@ -7,5 +7,6 @@ export let LICENSE_STATUS = /*#__PURE__*/function (LICENSE_STATUS) {
   LICENSE_STATUS["ExpiredVersion"] = "ExpiredVersion";
   LICENSE_STATUS["Valid"] = "Valid";
   LICENSE_STATUS["OutOfScope"] = "OutOfScope";
+  LICENSE_STATUS["NotAvailableInInitialProPlan"] = "NotAvailableInInitialProPlan";
   return LICENSE_STATUS;
 }({});

package/modern/verifyLicense/verifyLicense.js

@@ -11,7 +11,20 @@ const getDefaultReleaseDate = () => {
 export function generateReleaseInfo(releaseDate = getDefaultReleaseDate()) {
   return base64Encode(releaseDate.getTime().toString());
 }
+function isLicenseScopeSufficient(packageName, licenseScope) {
+  let acceptedScopes;
+  if (packageName.includes('-pro')) {
+    acceptedScopes = ['pro', 'premium'];
+  } else if (packageName.includes('-premium')) {
+    acceptedScopes = ['premium'];
+  } else {
+    acceptedScopes = [];
+  }
+  return acceptedScopes.includes(licenseScope);
+}
 const expiryReg = /^.*EXPIRY=([0-9]+),.*$/;
+const PRO_PACKAGES_AVAILABLE_IN_INITIAL_PRO_PLAN = ['x-data-grid-pro', 'x-date-pickers-pro'];
+
 /**
  * Format: ORDER:${orderNumber},EXPIRY=${expiryTimestamp},KEYVERSION=1
  */
@@ -28,18 +41,20 @@ const decodeLicenseVersion1 = license => {
   return {
     scope: 'pro',
     licensingModel: 'perpetual',
-    expiryTimestamp
+    expiryTimestamp,
+    planVersion: 'initial'
   };
 };
 
 /**
- * Format: O=${orderNumber},E=${expiryTimestamp},S=${scope},LM=${licensingModel},KV=2`;
+ * Format: O=${orderNumber},E=${expiryTimestamp},S=${scope},LM=${licensingModel},PV=${planVersion},KV=2`;
  */
 const decodeLicenseVersion2 = license => {
   const licenseInfo = {
     scope: null,
     licensingModel: null,
-    expiryTimestamp: null
+    expiryTimestamp: null,
+    planVersion: 'initial'
   };
   license.split(',').map(token => token.split('=')).filter(el => el.length === 2).forEach(([key, value]) => {
     if (key === 'S') {
@@ -54,6 +69,9 @@ const decodeLicenseVersion2 = license => {
         licenseInfo.expiryTimestamp = expiryTimestamp;
       }
     }
+    if (key === 'PV') {
+      licenseInfo.planVersion = value;
+    }
   });
   return licenseInfo;
 };
@@ -74,7 +92,7 @@ const decodeLicense = encodedLicense => {
 export function verifyLicense({
   releaseInfo,
   licenseKey,
-  acceptedScopes
+  packageName
 }) {
   if (!releaseInfo) {
     throw new Error('MUI X: The release information is missing. Not able to validate license.');
@@ -143,16 +161,23 @@ export function verifyLicense({
     }
   }
   if (license.scope == null || !LICENSE_SCOPES.includes(license.scope)) {
-    console.error('Error checking license. scope not found or invalid!');
+    console.error('MUI X: Error checking license. scope not found or invalid!');
     return {
       status: LICENSE_STATUS.Invalid
     };
   }
-  if (!acceptedScopes.includes(license.scope)) {
+  if (!isLicenseScopeSufficient(packageName, license.scope)) {
     return {
       status: LICENSE_STATUS.OutOfScope
     };
   }
+
+  // 'charts-pro' or 'tree-view-pro' can only be used with a newer Pro license
+  if (license.planVersion === 'initial' && license.scope === 'pro' && !PRO_PACKAGES_AVAILABLE_IN_INITIAL_PRO_PLAN.includes(packageName)) {
+    return {
+      status: LICENSE_STATUS.NotAvailableInInitialProPlan
+    };
+  }
   return {
     status: LICENSE_STATUS.Valid
   };

package/node/Watermark/Watermark.js

@@ -21,6 +21,8 @@ function getLicenseErrorMessage(licenseStatus) {
       return 'MUI X Invalid license key';
     case _licenseStatus.LICENSE_STATUS.OutOfScope:
       return 'MUI X License key plan mismatch';
+    case _licenseStatus.LICENSE_STATUS.NotAvailableInInitialProPlan:
+      return 'MUI X Product not covered by plan';
     case _licenseStatus.LICENSE_STATUS.NotFound:
       return 'MUI X Missing license key';
     default:

package/node/generateLicense/generateLicense.js

@@ -16,7 +16,8 @@ function getClearLicenseString(details) {
   if (details.licensingModel && !_licensingModel.LICENSING_MODELS.includes(details.licensingModel)) {
     throw new Error('MUI X: Invalid licensing model');
   }
-  return `O=${details.orderNumber},E=${details.expiryDate.getTime()},S=${details.scope},LM=${details.licensingModel},KV=${licenseVersion}`;
+  const keyParts = [`O=${details.orderNumber}`, `E=${details.expiryDate.getTime()}`, `S=${details.scope}`, `LM=${details.licensingModel}`, `PV=${details.planVersion}`, `KV=${licenseVersion}`];
+  return keyParts.join(',');
 }
 function generateLicense(details) {
   const licenseStr = getClearLicenseString(details);

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-license v7.7.0
+ * @mui/x-license v7.8.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/useLicenseVerifier/useLicenseVerifier.js

@@ -27,18 +27,19 @@ function useLicenseVerifier(packageName, releaseInfo) {
     if (sharedLicenseStatuses[packageName] && sharedLicenseStatuses[packageName].key === licenseKey) {
       return sharedLicenseStatuses[packageName].licenseVerifier;
     }
-    const acceptedScopes = packageName.includes('premium') ? ['premium'] : ['pro', 'premium'];
     const plan = packageName.includes('premium') ? 'Premium' : 'Pro';
     const licenseStatus = (0, _verifyLicense.verifyLicense)({
       releaseInfo,
       licenseKey,
-      acceptedScopes
+      packageName
     });
     const fullPackageName = `@mui/${packageName}`;
     if (licenseStatus.status === _licenseStatus.LICENSE_STATUS.Valid) {
       // Skip
     } else if (licenseStatus.status === _licenseStatus.LICENSE_STATUS.Invalid) {
       (0, _licenseErrorMessageUtils.showInvalidLicenseKeyError)();
+    } else if (licenseStatus.status === _licenseStatus.LICENSE_STATUS.NotAvailableInInitialProPlan) {
+      (0, _licenseErrorMessageUtils.showNotAvailableInInitialProPlanError)();
     } else if (licenseStatus.status === _licenseStatus.LICENSE_STATUS.OutOfScope) {
       (0, _licenseErrorMessageUtils.showLicenseKeyPlanMismatchError)();
     } else if (licenseStatus.status === _licenseStatus.LICENSE_STATUS.NotFound) {

package/node/utils/commercialPackages.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/utils/licenseErrorMessageUtils.js

@@ -9,6 +9,7 @@ exports.showExpiredPackageVersionError = showExpiredPackageVersionError;
 exports.showInvalidLicenseKeyError = showInvalidLicenseKeyError;
 exports.showLicenseKeyPlanMismatchError = showLicenseKeyPlanMismatchError;
 exports.showMissingLicenseKeyError = showMissingLicenseKeyError;
+exports.showNotAvailableInInitialProPlanError = showNotAvailableInInitialProPlanError;
 function showError(message) {
   console.error(['*************************************************************', '', ...message, '', '*************************************************************'].join('\n'));
 }
@@ -18,6 +19,9 @@ function showInvalidLicenseKeyError() {
 function showLicenseKeyPlanMismatchError() {
   showError(['MUI X: License key plan mismatch.', '', 'Your use of MUI X is not compatible with the plan of your license key. The feature you are trying to use is not included in the plan of your license key. This happens if you try to use `DataGridPremium` with a license key for the Pro plan.', '', 'To solve the issue, you can upgrade your plan from Pro to Premium at https://mui.com/r/x-get-license?scope=premium.', "Of if you didn't intend to use Premium features, you can replace the import of `@mui/x-data-grid-premium` with `@mui/x-data-grid-pro`."]);
 }
+function showNotAvailableInInitialProPlanError() {
+  showError(['MUI X: Component not included in your license.', '', 'The component you are trying to use is not included in the Pro Plan you purchased.', '', 'Your license is from an old version of the Pro Plan that is only compatible with the `@mui/x-data-grid-pro` and `@mui/x-date-pickers-pro` commercial packages.', '', 'To start using another Pro package, please consider reaching to our sales team to upgrade your license or visit https://mui.com/r/x-get-license to get a new license key.']);
+}
 function showMissingLicenseKeyError({
   plan,
   packageName

package/node/utils/licenseScope.js

@@ -3,5 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LICENSE_SCOPES = void 0;
-const LICENSE_SCOPES = exports.LICENSE_SCOPES = ['pro', 'premium'];
+exports.PLAN_VERSIONS = exports.LICENSE_SCOPES = void 0;
+const LICENSE_SCOPES = exports.LICENSE_SCOPES = ['pro', 'premium'];
+const PLAN_VERSIONS = exports.PLAN_VERSIONS = ['initial', 'Q3-2024'];

package/node/utils/licenseStatus.js

@@ -13,5 +13,6 @@ let LICENSE_STATUS = exports.LICENSE_STATUS = /*#__PURE__*/function (LICENSE_STA
   LICENSE_STATUS["ExpiredVersion"] = "ExpiredVersion";
   LICENSE_STATUS["Valid"] = "Valid";
   LICENSE_STATUS["OutOfScope"] = "OutOfScope";
+  LICENSE_STATUS["NotAvailableInInitialProPlan"] = "NotAvailableInInitialProPlan";
   return LICENSE_STATUS;
 }({});

package/node/verifyLicense/verifyLicense.js

@@ -18,7 +18,20 @@ const getDefaultReleaseDate = () => {
 function generateReleaseInfo(releaseDate = getDefaultReleaseDate()) {
   return (0, _base.base64Encode)(releaseDate.getTime().toString());
 }
+function isLicenseScopeSufficient(packageName, licenseScope) {
+  let acceptedScopes;
+  if (packageName.includes('-pro')) {
+    acceptedScopes = ['pro', 'premium'];
+  } else if (packageName.includes('-premium')) {
+    acceptedScopes = ['premium'];
+  } else {
+    acceptedScopes = [];
+  }
+  return acceptedScopes.includes(licenseScope);
+}
 const expiryReg = /^.*EXPIRY=([0-9]+),.*$/;
+const PRO_PACKAGES_AVAILABLE_IN_INITIAL_PRO_PLAN = ['x-data-grid-pro', 'x-date-pickers-pro'];
+
 /**
  * Format: ORDER:${orderNumber},EXPIRY=${expiryTimestamp},KEYVERSION=1
  */
@@ -35,18 +48,20 @@ const decodeLicenseVersion1 = license => {
   return {
     scope: 'pro',
     licensingModel: 'perpetual',
-    expiryTimestamp
+    expiryTimestamp,
+    planVersion: 'initial'
   };
 };
 
 /**
- * Format: O=${orderNumber},E=${expiryTimestamp},S=${scope},LM=${licensingModel},KV=2`;
+ * Format: O=${orderNumber},E=${expiryTimestamp},S=${scope},LM=${licensingModel},PV=${planVersion},KV=2`;
  */
 const decodeLicenseVersion2 = license => {
   const licenseInfo = {
     scope: null,
     licensingModel: null,
-    expiryTimestamp: null
+    expiryTimestamp: null,
+    planVersion: 'initial'
   };
   license.split(',').map(token => token.split('=')).filter(el => el.length === 2).forEach(([key, value]) => {
     if (key === 'S') {
@@ -61,6 +76,9 @@ const decodeLicenseVersion2 = license => {
         licenseInfo.expiryTimestamp = expiryTimestamp;
       }
     }
+    if (key === 'PV') {
+      licenseInfo.planVersion = value;
+    }
   });
   return licenseInfo;
 };
@@ -81,7 +99,7 @@ const decodeLicense = encodedLicense => {
 function verifyLicense({
   releaseInfo,
   licenseKey,
-  acceptedScopes
+  packageName
 }) {
   if (!releaseInfo) {
     throw new Error('MUI X: The release information is missing. Not able to validate license.');
@@ -150,16 +168,23 @@ function verifyLicense({
     }
   }
   if (license.scope == null || !_licenseScope.LICENSE_SCOPES.includes(license.scope)) {
-    console.error('Error checking license. scope not found or invalid!');
+    console.error('MUI X: Error checking license. scope not found or invalid!');
     return {
       status: _licenseStatus.LICENSE_STATUS.Invalid
     };
   }
-  if (!acceptedScopes.includes(license.scope)) {
+  if (!isLicenseScopeSufficient(packageName, license.scope)) {
     return {
       status: _licenseStatus.LICENSE_STATUS.OutOfScope
     };
   }
+
+  // 'charts-pro' or 'tree-view-pro' can only be used with a newer Pro license
+  if (license.planVersion === 'initial' && license.scope === 'pro' && !PRO_PACKAGES_AVAILABLE_IN_INITIAL_PRO_PLAN.includes(packageName)) {
+    return {
+      status: _licenseStatus.LICENSE_STATUS.NotAvailableInInitialProPlan
+    };
+  }
   return {
     status: _licenseStatus.LICENSE_STATUS.Valid
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-license",
-  "version": "7.7.0",
+  "version": "7.8.0",
   "description": "MUI X License verification",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
-    "@mui/utils": "^5.15.14"
+    "@mui/utils": "^5.15.20"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0"

package/useLicenseVerifier/index.d.ts

@@ -1,2 +1 @@
 export { useLicenseVerifier } from './useLicenseVerifier';
-export type { MuiCommercialPackageName } from './useLicenseVerifier';

package/useLicenseVerifier/useLicenseVerifier.d.ts

@@ -1,5 +1,5 @@
 import { LicenseStatus } from '../utils/licenseStatus';
-export type MuiCommercialPackageName = 'x-data-grid-pro' | 'x-data-grid-premium' | 'x-date-pickers-pro' | 'x-tree-view-pro' | 'x-charts-pro';
+import { MuiCommercialPackageName } from '../utils/commercialPackages';
 export declare const sharedLicenseStatuses: {
     [packageName in MuiCommercialPackageName]?: {
         key: string | undefined;

package/useLicenseVerifier/useLicenseVerifier.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { verifyLicense } from '../verifyLicense/verifyLicense';
 import { LicenseInfo } from '../utils/licenseInfo';
-import { showExpiredAnnualGraceLicenseKeyError, showExpiredAnnualLicenseKeyError, showInvalidLicenseKeyError, showMissingLicenseKeyError, showLicenseKeyPlanMismatchError, showExpiredPackageVersionError } from '../utils/licenseErrorMessageUtils';
+import { showExpiredAnnualGraceLicenseKeyError, showExpiredAnnualLicenseKeyError, showInvalidLicenseKeyError, showMissingLicenseKeyError, showLicenseKeyPlanMismatchError, showExpiredPackageVersionError, showNotAvailableInInitialProPlanError } from '../utils/licenseErrorMessageUtils';
 import { LICENSE_STATUS } from '../utils/licenseStatus';
 import MuiLicenseInfoContext from '../Unstable_LicenseInfoProvider/MuiLicenseInfoContext';
 export const sharedLicenseStatuses = {};
@@ -17,18 +17,19 @@ export function useLicenseVerifier(packageName, releaseInfo) {
     if (sharedLicenseStatuses[packageName] && sharedLicenseStatuses[packageName].key === licenseKey) {
       return sharedLicenseStatuses[packageName].licenseVerifier;
     }
-    const acceptedScopes = packageName.includes('premium') ? ['premium'] : ['pro', 'premium'];
     const plan = packageName.includes('premium') ? 'Premium' : 'Pro';
     const licenseStatus = verifyLicense({
       releaseInfo,
       licenseKey,
-      acceptedScopes
+      packageName
     });
     const fullPackageName = `@mui/${packageName}`;
     if (licenseStatus.status === LICENSE_STATUS.Valid) {
       // Skip
     } else if (licenseStatus.status === LICENSE_STATUS.Invalid) {
       showInvalidLicenseKeyError();
+    } else if (licenseStatus.status === LICENSE_STATUS.NotAvailableInInitialProPlan) {
+      showNotAvailableInInitialProPlanError();
     } else if (licenseStatus.status === LICENSE_STATUS.OutOfScope) {
       showLicenseKeyPlanMismatchError();
     } else if (licenseStatus.status === LICENSE_STATUS.NotFound) {

package/utils/commercialPackages.d.ts

@@ -0,0 +1 @@
+export type MuiCommercialPackageName = 'x-data-grid-pro' | 'x-data-grid-premium' | 'x-date-pickers-pro' | 'x-tree-view-pro' | 'x-charts-pro';

package/utils/commercialPackages.js

@@ -0,0 +1 @@
+export {};

package/utils/index.d.ts

@@ -3,3 +3,4 @@ export * from './licenseInfo';
 export * from './licenseStatus';
 export type { LicenseScope } from './licenseScope';
 export type { LicensingModel } from './licensingModel';
+export type { MuiCommercialPackageName } from './commercialPackages';

package/utils/licenseErrorMessageUtils.d.ts

@@ -1,5 +1,6 @@
 export declare function showInvalidLicenseKeyError(): void;
 export declare function showLicenseKeyPlanMismatchError(): void;
+export declare function showNotAvailableInInitialProPlanError(): void;
 export declare function showMissingLicenseKeyError({ plan, packageName, }: {
     plan: string;
     packageName: string;

package/utils/licenseErrorMessageUtils.js

@@ -7,6 +7,9 @@ export function showInvalidLicenseKeyError() {
 export function showLicenseKeyPlanMismatchError() {
   showError(['MUI X: License key plan mismatch.', '', 'Your use of MUI X is not compatible with the plan of your license key. The feature you are trying to use is not included in the plan of your license key. This happens if you try to use `DataGridPremium` with a license key for the Pro plan.', '', 'To solve the issue, you can upgrade your plan from Pro to Premium at https://mui.com/r/x-get-license?scope=premium.', "Of if you didn't intend to use Premium features, you can replace the import of `@mui/x-data-grid-premium` with `@mui/x-data-grid-pro`."]);
 }
+export function showNotAvailableInInitialProPlanError() {
+  showError(['MUI X: Component not included in your license.', '', 'The component you are trying to use is not included in the Pro Plan you purchased.', '', 'Your license is from an old version of the Pro Plan that is only compatible with the `@mui/x-data-grid-pro` and `@mui/x-date-pickers-pro` commercial packages.', '', 'To start using another Pro package, please consider reaching to our sales team to upgrade your license or visit https://mui.com/r/x-get-license to get a new license key.']);
+}
 export function showMissingLicenseKeyError({
   plan,
   packageName

package/utils/licenseScope.d.ts

@@ -1,2 +1,4 @@
 export declare const LICENSE_SCOPES: readonly ["pro", "premium"];
+export declare const PLAN_VERSIONS: readonly ["initial", "Q3-2024"];
 export type LicenseScope = (typeof LICENSE_SCOPES)[number];
+export type PlanVersion = (typeof PLAN_VERSIONS)[number];

package/utils/licenseScope.js

@@ -1 +1,2 @@
-export const LICENSE_SCOPES = ['pro', 'premium'];
+export const LICENSE_SCOPES = ['pro', 'premium'];
+export const PLAN_VERSIONS = ['initial', 'Q3-2024'];

package/utils/licenseStatus.d.ts

@@ -5,6 +5,7 @@ export declare enum LICENSE_STATUS {
     ExpiredAnnualGrace = "ExpiredAnnualGrace",
     ExpiredVersion = "ExpiredVersion",
     Valid = "Valid",
-    OutOfScope = "OutOfScope"
+    OutOfScope = "OutOfScope",
+    NotAvailableInInitialProPlan = "NotAvailableInInitialProPlan"
 }
 export type LicenseStatus = keyof typeof LICENSE_STATUS;

package/utils/licenseStatus.js

@@ -7,5 +7,6 @@ export let LICENSE_STATUS = /*#__PURE__*/function (LICENSE_STATUS) {
   LICENSE_STATUS["ExpiredVersion"] = "ExpiredVersion";
   LICENSE_STATUS["Valid"] = "Valid";
   LICENSE_STATUS["OutOfScope"] = "OutOfScope";
+  LICENSE_STATUS["NotAvailableInInitialProPlan"] = "NotAvailableInInitialProPlan";
   return LICENSE_STATUS;
 }({});

package/verifyLicense/verifyLicense.d.ts

@@ -1,10 +1,10 @@
 import { LicenseStatus } from '../utils/licenseStatus';
-import { LicenseScope } from '../utils/licenseScope';
+import { MuiCommercialPackageName } from '../utils/commercialPackages';
 export declare function generateReleaseInfo(releaseDate?: Date): string;
-export declare function verifyLicense({ releaseInfo, licenseKey, acceptedScopes, }: {
+export declare function verifyLicense({ releaseInfo, licenseKey, packageName, }: {
     releaseInfo: string;
-    licenseKey: string | undefined;
-    acceptedScopes: LicenseScope[];
+    licenseKey?: string;
+    packageName: MuiCommercialPackageName;
 }): {
     status: LicenseStatus;
     meta?: any;

package/verifyLicense/verifyLicense.js

@@ -11,7 +11,20 @@ const getDefaultReleaseDate = () => {
 export function generateReleaseInfo(releaseDate = getDefaultReleaseDate()) {
   return base64Encode(releaseDate.getTime().toString());
 }
+function isLicenseScopeSufficient(packageName, licenseScope) {
+  let acceptedScopes;
+  if (packageName.includes('-pro')) {
+    acceptedScopes = ['pro', 'premium'];
+  } else if (packageName.includes('-premium')) {
+    acceptedScopes = ['premium'];
+  } else {
+    acceptedScopes = [];
+  }
+  return acceptedScopes.includes(licenseScope);
+}
 const expiryReg = /^.*EXPIRY=([0-9]+),.*$/;
+const PRO_PACKAGES_AVAILABLE_IN_INITIAL_PRO_PLAN = ['x-data-grid-pro', 'x-date-pickers-pro'];
+
 /**
  * Format: ORDER:${orderNumber},EXPIRY=${expiryTimestamp},KEYVERSION=1
  */
@@ -28,18 +41,20 @@ const decodeLicenseVersion1 = license => {
   return {
     scope: 'pro',
     licensingModel: 'perpetual',
-    expiryTimestamp
+    expiryTimestamp,
+    planVersion: 'initial'
   };
 };
 
 /**
- * Format: O=${orderNumber},E=${expiryTimestamp},S=${scope},LM=${licensingModel},KV=2`;
+ * Format: O=${orderNumber},E=${expiryTimestamp},S=${scope},LM=${licensingModel},PV=${planVersion},KV=2`;
  */
 const decodeLicenseVersion2 = license => {
   const licenseInfo = {
     scope: null,
     licensingModel: null,
-    expiryTimestamp: null
+    expiryTimestamp: null,
+    planVersion: 'initial'
   };
   license.split(',').map(token => token.split('=')).filter(el => el.length === 2).forEach(([key, value]) => {
     if (key === 'S') {
@@ -54,6 +69,9 @@ const decodeLicenseVersion2 = license => {
         licenseInfo.expiryTimestamp = expiryTimestamp;
       }
     }
+    if (key === 'PV') {
+      licenseInfo.planVersion = value;
+    }
   });
   return licenseInfo;
 };
@@ -74,7 +92,7 @@ const decodeLicense = encodedLicense => {
 export function verifyLicense({
   releaseInfo,
   licenseKey,
-  acceptedScopes
+  packageName
 }) {
   if (!releaseInfo) {
     throw new Error('MUI X: The release information is missing. Not able to validate license.');
@@ -143,16 +161,23 @@ export function verifyLicense({
     }
   }
   if (license.scope == null || !LICENSE_SCOPES.includes(license.scope)) {
-    console.error('Error checking license. scope not found or invalid!');
+    console.error('MUI X: Error checking license. scope not found or invalid!');
     return {
       status: LICENSE_STATUS.Invalid
     };
   }
-  if (!acceptedScopes.includes(license.scope)) {
+  if (!isLicenseScopeSufficient(packageName, license.scope)) {
     return {
       status: LICENSE_STATUS.OutOfScope
     };
   }
+
+  // 'charts-pro' or 'tree-view-pro' can only be used with a newer Pro license
+  if (license.planVersion === 'initial' && license.scope === 'pro' && !PRO_PACKAGES_AVAILABLE_IN_INITIAL_PRO_PLAN.includes(packageName)) {
+    return {
+      status: LICENSE_STATUS.NotAvailableInInitialProPlan
+    };
+  }
   return {
     status: LICENSE_STATUS.Valid
   };