[DataGridPremium] Bootstrap @mui/x-data-grid-premium (#4223)

mui · Apr 27, 2022 · 3b9b6d7 · 3b9b6d7
1 parent b778028
commit 3b9b6d7
Show file tree

Hide file tree

Showing 189 changed files with 5,044 additions and 712 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -5,6 +5,7 @@
     "packages/x-license-pro",
     "packages/grid/x-data-grid",
     "packages/grid/x-data-grid-pro",
+    "packages/grid/x-data-grid-premium",
     "packages/grid/x-data-grid-generator",
     "packages/x-date-pickers",
     "packages/x-date-pickers-pro"
@@ -13,6 +14,7 @@
     "@mui/x-license-pro": "packages/x-license-pro/build",
     "@mui/x-data-grid": "packages/grid/x-data-grid/build",
     "@mui/x-data-grid-pro": "packages/grid/x-data-grid-pro/build",
+    "@mui/x-data-grid-premium": "packages/grid/x-data-grid-premium/build",
     "@mui/x-data-grid-generator": "packages/grid/x-data-grid-generator/build",
     "@mui/x-date-pickers": "packages/x-date-pickers/build",
     "@mui/x-date-pickers-pro": "packages/x-date-pickers-pro/build"

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -54,6 +54,7 @@ module.exports = {
       excludedFiles: [
         'packages/grid/x-data-grid/src/themeAugmentation/index.js', // TypeScript ignores JS files with the same name as the TS file
         'packages/grid/x-data-grid-pro/src/themeAugmentation/index.js',
+        'packages/grid/x-data-grid-premium/src/themeAugmentation/index.js',
       ],
       rules: {
         'material-ui/no-direct-state-access': 'error',

diff --git a/README.md b/README.md
@@ -32,6 +32,8 @@ A feature should only be commercial if it has no great MIT alternatives.
 
 Find more details [on the docs](https://mui.com/x/advanced-components/#licenses).
 
+- [DataGridPremium](https://mui.com/components/data-grid/#commercial-version), published under `@mui/x-data-grid-premium`, commercially licensed.
+
 ## Questions
 
 For _how-to_ questions and other non-issues,
@@ -43,8 +45,9 @@ There is a StackOverflow tag called "mui" that you can use to tag your questions
 You can create an [issue](https://github.com/mui/mui-x/issues) on this repository.
 Please always provide a reproduction case, the following templates can be a good start:
 
-- [DataGrid free version](https://codesandbox.io/s/datagrid-v5-quick-start-54iz1)
-- [DataGridPro paid version](https://codesandbox.io/s/datagridpro-v5-quick-start-5pjhc)
+- [DataGrid community version](https://codesandbox.io/s/datagrid-v5-quick-start-54iz1)
+- [DataGridPro commercial version](https://codesandbox.io/s/datagridpro-v5-quick-start-5pjhc)
+- [DataGridPremium commercial version](https://codesandbox.io/s/datagridpremium-v5-quick-start-h2ztp2)
 
 ## Contributing
 

diff --git a/babel.config.js b/babel.config.js
@@ -10,6 +10,7 @@ const defaultAlias = {
   '@mui/x-data-grid': resolveAliasPath('./packages/grid/x-data-grid/src'),
   '@mui/x-data-grid-generator': resolveAliasPath('./packages/grid/x-data-grid-generator/src'),
   '@mui/x-data-grid-pro': resolveAliasPath('./packages/grid/x-data-grid-pro/src'),
+  '@mui/x-data-grid-premium': resolveAliasPath('./packages/grid/x-data-grid-premium/src'),
   '@mui/x-license-pro': resolveAliasPath('./packages/x-license-pro/src'),
   '@mui/x-date-pickers': resolveAliasPath('./packages/x-date-pickers/src'),
   '@mui/x-date-pickers-pro': resolveAliasPath('./packages/x-date-pickers-pro/src'),

diff --git a/docs/babel.config.js b/docs/babel.config.js
@@ -14,6 +14,7 @@ const alias = {
   '@mui/x-data-grid': '../packages/grid/x-data-grid/src',
   '@mui/x-data-grid-generator': '../packages/grid/x-data-grid-generator/src',
   '@mui/x-data-grid-pro': '../packages/grid/x-data-grid-pro/src',
+  '@mui/x-data-grid-premium': '../packages/grid/x-data-grid-premium/src',
   '@mui/x-date-pickers': '../packages/x-date-pickers/src',
   '@mui/x-date-pickers-pro': '../packages/x-date-pickers-pro/src',
   '@mui/x-license-pro': '../packages/x-license-pro/src',

diff --git a/docs/data/data-grid/export/CsvGetRowsToExportRowGrouping.js b/docs/data/data-grid/export/CsvGetRowsToExportRowGrouping.js
@@ -3,12 +3,12 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 import Button from '@mui/material/Button';
 import { createSvgIcon } from '@mui/material/utils';
 import {
-  DataGridPro,
+  DataGridPremium,
   gridRowTreeSelector,
   GridToolbarContainer,
   gridFilteredSortedRowIdsSelector,
   useGridApiContext,
-} from '@mui/x-data-grid-pro';
+} from '@mui/x-data-grid-premium';
 
 const getRowsWithGroups = ({ apiRef }) => gridFilteredSortedRowIdsSelector(apiRef);
 
@@ -62,7 +62,7 @@ export default function CsvGetRowsToExportRowGrouping() {
 
   return (
     <div style={{ height: 300, width: '100%' }}>
-      <DataGridPro
+      <DataGridPremium
         {...data}
         loading={loading}
         components={{ Toolbar: CustomToolbar }}
@@ -71,7 +71,6 @@ export default function CsvGetRowsToExportRowGrouping() {
             model: ['commodity'],
           },
         }}
-        experimentalFeatures={{ rowGrouping: true }}
       />
     </div>
   );

diff --git a/docs/data/data-grid/export/CsvGetRowsToExportRowGrouping.tsx b/docs/data/data-grid/export/CsvGetRowsToExportRowGrouping.tsx
@@ -3,14 +3,14 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 import Button, { ButtonProps } from '@mui/material/Button';
 import { createSvgIcon } from '@mui/material/utils';
 import {
-  DataGridPro,
+  DataGridPremium,
   GridCsvExportOptions,
   GridCsvGetRowsToExportParams,
   gridRowTreeSelector,
   GridToolbarContainer,
   gridFilteredSortedRowIdsSelector,
   useGridApiContext,
-} from '@mui/x-data-grid-pro';
+} from '@mui/x-data-grid-premium';
 
 const getRowsWithGroups = ({ apiRef }: GridCsvGetRowsToExportParams) =>
   gridFilteredSortedRowIdsSelector(apiRef);
@@ -66,7 +66,7 @@ export default function CsvGetRowsToExportRowGrouping() {
 
   return (
     <div style={{ height: 300, width: '100%' }}>
-      <DataGridPro
+      <DataGridPremium
         {...data}
         loading={loading}
         components={{ Toolbar: CustomToolbar }}
@@ -75,7 +75,6 @@ export default function CsvGetRowsToExportRowGrouping() {
             model: ['commodity'],
           },
         }}
-        experimentalFeatures={{ rowGrouping: true }}
       />
     </div>
   );

diff --git a/docs/data/data-grid/export/CsvGetRowsToExportRowGrouping.tsx.preview b/docs/data/data-grid/export/CsvGetRowsToExportRowGrouping.tsx.preview
@@ -1,4 +1,4 @@
-<DataGridPro
+<DataGridPremium
   {...data}
   loading={loading}
   components={{ Toolbar: CustomToolbar }}
@@ -7,5 +7,4 @@
       model: ['commodity'],
     },
   }}
-  experimentalFeatures={{ rowGrouping: true }}
 />
diff --git a/docs/data/data-grid/getting-started/getting-started.md b/docs/data/data-grid/getting-started/getting-started.md
@@ -122,10 +122,11 @@ Internally, it uses module augmentation to extend the default theme structure.
 // When using TypeScript 4.x and above
 import type {} from '@mui/x-data-grid/themeAugmentation';
 import type {} from '@mui/x-data-grid-pro/themeAugmentation';
+import type {} from '@mui/x-data-grid-premium/themeAugmentation';
 
 const theme = createTheme({
   components: {
-    // Use `MuiDataGrid` on both DataGrid and DataGridPro
+    // Use `MuiDataGrid` on DataGrid, DataGridPro and DataGridPremium
     MuiDataGrid: {
       styleOverrides: {
         root: {
@@ -148,6 +149,7 @@ The component comes [in different plans](/pricing/):
 
 - **Community** Plan: [`@mui/x-data-grid`](https://www.npmjs.com/package/@mui/x-data-grid), published under the [MIT license](https://tldrlegal.com/license/mit-license) and [free forever](https://mui-org.notion.site/Stewardship-542a2226043d4f4a96dfb429d16cf5bd).
 - **Pro** Plan: [`@mui/x-data-grid-pro`](https://www.npmjs.com/package/@mui/x-data-grid-pro) published under a [Commercial license](/x/license/).
+- **Premium** Plan: [`@mui/x-data-grid-premium`](https://www.npmjs.com/package/@mui/x-data-grid-premium) published under a [Commercial license](/x/license/).
 
 More information about the various plans on [the dedicated section](/x/advanced-components#plans)
 

diff --git a/docs/data/data-grid/row-grouping/RowGroupingBasicExample.js b/docs/data/data-grid/row-grouping/RowGroupingBasicExample.js
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {
-  DataGridPro,
+  DataGridPremium,
   gridColumnVisibilityModelSelector,
   GridEvents,
   useGridApiRef,
-} from '@mui/x-data-grid-pro';
+} from '@mui/x-data-grid-premium';
 import { useMovieData } from '@mui/x-data-grid-generator';
 
 const INITIAL_GROUPING_COLUMN_MODEL = ['company'];
@@ -57,7 +57,7 @@ export default function RowGroupingBasicExample() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGridPro
+      <DataGridPremium
         {...data}
         apiRef={apiRef}
         columns={columns}
@@ -67,9 +67,6 @@ export default function RowGroupingBasicExample() {
             model: INITIAL_GROUPING_COLUMN_MODEL,
           },
         }}
-        experimentalFeatures={{
-          rowGrouping: true,
-        }}
       />
     </div>
   );

diff --git a/docs/data/data-grid/row-grouping/RowGroupingBasicExample.tsx b/docs/data/data-grid/row-grouping/RowGroupingBasicExample.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import {
-  DataGridPro,
+  DataGridPremium,
   GridApi,
   GridColumns,
   gridColumnVisibilityModelSelector,
   GridEvents,
   GridRowGroupingModel,
   useGridApiRef,
-} from '@mui/x-data-grid-pro';
+} from '@mui/x-data-grid-premium';
 import { useMovieData } from '@mui/x-data-grid-generator';
 
 const INITIAL_GROUPING_COLUMN_MODEL = ['company'];
@@ -64,7 +64,7 @@ export default function RowGroupingBasicExample() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGridPro
+      <DataGridPremium
         {...data}
         apiRef={apiRef}
         columns={columns}
@@ -74,9 +74,6 @@ export default function RowGroupingBasicExample() {
             model: INITIAL_GROUPING_COLUMN_MODEL,
           },
         }}
-        experimentalFeatures={{
-          rowGrouping: true,
-        }}
       />
     </div>
   );

diff --git a/docs/data/data-grid/row-grouping/RowGroupingBasicExample.tsx.preview b/docs/data/data-grid/row-grouping/RowGroupingBasicExample.tsx.preview
@@ -1,4 +1,4 @@
-<DataGridPro
+<DataGridPremium
   {...data}
   apiRef={apiRef}
   columns={columns}
@@ -8,7 +8,4 @@
       model: INITIAL_GROUPING_COLUMN_MODEL,
     },
   }}
-  experimentalFeatures={{
-    rowGrouping: true,
-  }}
 />
diff --git a/docs/data/data-grid/row-grouping/RowGroupingColDefCanBeGrouped.js b/docs/data/data-grid/row-grouping/RowGroupingColDefCanBeGrouped.js
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {
-  DataGridPro,
+  DataGridPremium,
   gridColumnVisibilityModelSelector,
   GridEvents,
   useGridApiRef,
-} from '@mui/x-data-grid-pro';
+} from '@mui/x-data-grid-premium';
 import { useMovieData } from '@mui/x-data-grid-generator';
 
 const INITIAL_GROUPING_COLUMN_MODEL = ['company'];
@@ -65,7 +65,7 @@ export default function RowGroupingColDefCanBeGrouped() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGridPro
+      <DataGridPremium
         {...data}
         apiRef={apiRef}
         columns={columnWithNoDirectorGroup}
@@ -75,9 +75,6 @@ export default function RowGroupingColDefCanBeGrouped() {
             model: INITIAL_GROUPING_COLUMN_MODEL,
           },
         }}
-        experimentalFeatures={{
-          rowGrouping: true,
-        }}
       />
     </div>
   );

diff --git a/docs/data/data-grid/row-grouping/RowGroupingColDefCanBeGrouped.tsx b/docs/data/data-grid/row-grouping/RowGroupingColDefCanBeGrouped.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import {
-  DataGridPro,
+  DataGridPremium,
   GridApi,
   GridColumns,
   gridColumnVisibilityModelSelector,
   GridEvents,
   GridRowGroupingModel,
   useGridApiRef,
-} from '@mui/x-data-grid-pro';
+} from '@mui/x-data-grid-premium';
 import { useMovieData } from '@mui/x-data-grid-generator';
 
 const INITIAL_GROUPING_COLUMN_MODEL = ['company'];
@@ -72,7 +72,7 @@ export default function RowGroupingColDefCanBeGrouped() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGridPro
+      <DataGridPremium
         {...data}
         apiRef={apiRef}
         columns={columnWithNoDirectorGroup}
@@ -82,9 +82,6 @@ export default function RowGroupingColDefCanBeGrouped() {
             model: INITIAL_GROUPING_COLUMN_MODEL,
           },
         }}
-        experimentalFeatures={{
-          rowGrouping: true,
-        }}
       />
     </div>
   );

diff --git a/docs/data/data-grid/row-grouping/RowGroupingColDefCanBeGrouped.tsx.preview b/docs/data/data-grid/row-grouping/RowGroupingColDefCanBeGrouped.tsx.preview
@@ -1,4 +1,4 @@
-<DataGridPro
+<DataGridPremium
   {...data}
   apiRef={apiRef}
   columns={columnWithNoDirectorGroup}
@@ -8,7 +8,4 @@
       model: INITIAL_GROUPING_COLUMN_MODEL,
     },
   }}
-  experimentalFeatures={{
-    rowGrouping: true,
-  }}
 />
diff --git a/docs/data/data-grid/row-grouping/RowGroupingControlled.js b/docs/data/data-grid/row-grouping/RowGroupingControlled.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
 import { useMovieData } from '@mui/x-data-grid-generator';
 
 const INITIAL_GROUPING_COLUMN_MODEL = ['company', 'director'];
@@ -13,13 +13,10 @@ export default function RowGroupingControlled() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGridPro
+      <DataGridPremium
         {...data}
         rowGroupingModel={rowGroupingModel}
         onRowGroupingModelChange={(model) => setRowGroupingModel(model)}
-        experimentalFeatures={{
-          rowGrouping: true,
-        }}
       />
     </div>
   );

diff --git a/docs/data/data-grid/row-grouping/RowGroupingControlled.tsx b/docs/data/data-grid/row-grouping/RowGroupingControlled.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridPro, GridRowGroupingModel } from '@mui/x-data-grid-pro';
+import { DataGridPremium, GridRowGroupingModel } from '@mui/x-data-grid-premium';
 import { useMovieData } from '@mui/x-data-grid-generator';
 
 const INITIAL_GROUPING_COLUMN_MODEL = ['company', 'director'];
@@ -12,13 +12,10 @@ export default function RowGroupingControlled() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGridPro
+      <DataGridPremium
         {...data}
         rowGroupingModel={rowGroupingModel}
         onRowGroupingModelChange={(model) => setRowGroupingModel(model)}
-        experimentalFeatures={{
-          rowGrouping: true,
-        }}
       />
     </div>
   );

diff --git a/docs/data/data-grid/row-grouping/RowGroupingControlled.tsx.preview b/docs/data/data-grid/row-grouping/RowGroupingControlled.tsx.preview
@@ -1,8 +1,5 @@
-<DataGridPro
+<DataGridPremium
   {...data}
   rowGroupingModel={rowGroupingModel}
   onRowGroupingModelChange={(model) => setRowGroupingModel(model)}
-  experimentalFeatures={{
-    rowGrouping: true,
-  }}
 />