[core] Isolate DataGrid and XGrid

docs/src/pages/components/data-grid/selection/ControlledSelectionGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGrid, GridRowId } from '@material-ui/data-grid';
+import { DataGrid, GridSelectionModel } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
 export default function ControlledSelectionGrid() {
@@ -9,7 +9,7 @@ export default function ControlledSelectionGrid() {
     maxColumns: 6,
   });
 
-  const [selectionModel, setSelectionModel] = React.useState<GridRowId[]>([]);
+  const [selectionModel, setSelectionModel] = React.useState<GridSelectionModel>([]);
 
   return (
     <div style={{ height: 400, width: '100%' }}>

packages/grid/_modules_/grid/GridComponentProps.ts

@@ -52,10 +52,6 @@ export interface GridComponentProps extends GridOptionsProp {
    * Return the id of a given [[GridRowData]].
    */
   getRowId?: GridRowIdGetter;
-  /**
-   * @internal enum
-   */
-  licenseStatus: string;
   /**
    * If `true`, a  loading overlay is displayed.
    */

packages/grid/_modules_/grid/components/Watermark.tsx

@@ -1,4 +1,7 @@
 import * as React from 'react';
+import { GridState } from '../hooks/features/core/gridState';
+import { useGridSelector } from '../hooks/features/core/useGridSelector';
+import { useGridApiContext } from '../hooks/root/useGridApiContext';
 
 // we duplicate licenseStatus to avoid adding a dependency on x-license.
 enum LicenseStatus {
@@ -21,12 +24,12 @@ function getLicenseErrorMessage(licenseStatus: string) {
   }
 }
 
-export interface WatermarkProps {
-  licenseStatus: string;
-}
+const licenseStatusSelector = (state: GridState) => state.licenseStatus;
+
+export function Watermark() {
+  const apiRef = useGridApiContext();
 
-export const Watermark = (props: WatermarkProps) => {
-  const { licenseStatus } = props;
+  const licenseStatus = useGridSelector(apiRef, licenseStatusSelector);
   if (licenseStatus === LicenseStatus.Valid.toString()) {
     return null;
   }
@@ -50,4 +53,4 @@ export const Watermark = (props: WatermarkProps) => {
       {getLicenseErrorMessage(licenseStatus)}{' '}
     </div>
   );
-};
+}

packages/grid/_modules_/grid/GridBody.tsx → packages/grid/_modules_/grid/components/base/GridBody.tsx

@@ -1,18 +1,22 @@
 import * as React from 'react';
-import { GridColumnsHeader } from './components/columnHeaders/GridColumnHeaders';
-import { GridColumnsContainer } from './components/containers/GridColumnsContainer';
-import { GridMainContainer } from './components/containers/GridMainContainer';
-import { GridWindow } from './components/containers/GridWindow';
-import { useGridApiContext } from './hooks/root/useGridApiContext';
-import { GridAutoSizer } from './components/GridAutoSizer';
-import { GridViewport } from './components/GridViewport';
-import { Watermark } from './components/Watermark';
-import { GRID_RESIZE } from './constants/eventsConstants';
+import { GRID_RESIZE } from '../../constants/eventsConstants';
+import { useGridApiContext } from '../../hooks/root/useGridApiContext';
+import { ElementSize } from '../../models/elementSize';
+import { GridColumnsHeader } from '../columnHeaders/GridColumnHeaders';
+import { GridColumnsContainer } from '../containers/GridColumnsContainer';
+import { GridMainContainer } from '../containers/GridMainContainer';
+import { GridWindow } from '../containers/GridWindow';
+import { GridAutoSizer } from '../GridAutoSizer';
+import { GridViewport } from '../GridViewport';
 import { GridOverlays } from './GridOverlays';
-import { ElementSize } from './models/elementSize';
-import { useGridRootProps } from './hooks/utils/useGridRootProps';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
-export function GridBody() {
+interface GridBodyProps {
+  children?: React.ReactNode;
+}
+
+export function GridBody(props: GridBodyProps) {
+  const { children } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
 
@@ -34,7 +38,6 @@ export function GridBody() {
   return (
     <GridMainContainer>
       <GridOverlays />
-      <Watermark licenseStatus={rootProps.licenseStatus} />
       <GridColumnsContainer ref={columnsContainerRef}>
         <GridColumnsHeader ref={columnsHeaderRef} />
       </GridColumnsContainer>
@@ -49,6 +52,7 @@ export function GridBody() {
           </GridWindow>
         )}
       </GridAutoSizer>
+      {children}
     </GridMainContainer>
   );
 }

packages/grid/_modules_/grid/GridErrorHandler.tsx → packages/grid/_modules_/grid/components/base/GridErrorHandler.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { GridMainContainer } from './components/containers/GridMainContainer';
-import { ErrorBoundary } from './components/ErrorBoundary';
-import { useGridApiContext } from './hooks/root/useGridApiContext';
-import { useGridState } from './hooks/features/core/useGridState';
-import { useLogger } from './hooks/utils/useLogger';
-import { useGridRootProps } from './hooks/utils/useGridRootProps';
+import { useGridState } from '../../hooks/features/core/useGridState';
+import { useGridApiContext } from '../../hooks/root/useGridApiContext';
+import { useLogger } from '../../hooks/utils/useLogger';
+import { GridMainContainer } from '../containers/GridMainContainer';
+import { ErrorBoundary } from '../ErrorBoundary';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 export function GridErrorHandler(props) {
   const { children } = props;

packages/grid/_modules_/grid/GridFooterPlaceholder.tsx → packages/grid/_modules_/grid/components/base/GridFooterPlaceholder.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useGridApiContext } from './hooks/root/useGridApiContext';
-import { useGridRootProps } from './hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/root/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 export function GridFooterPlaceholder() {
   const apiRef = useGridApiContext();

packages/grid/_modules_/grid/GridHeaderPlaceholder.tsx → packages/grid/_modules_/grid/components/base/GridHeaderPlaceholder.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useGridApiContext } from './hooks/root/useGridApiContext';
-import { useGridRootProps } from './hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/root/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 export function GridHeaderPlaceholder() {
   const apiRef = useGridApiContext();

packages/grid/_modules_/grid/GridOverlays.tsx → packages/grid/_modules_/grid/components/base/GridOverlays.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { useGridApiContext } from './hooks/root/useGridApiContext';
-import { useGridSelector } from './hooks/features/core/useGridSelector';
-import { visibleGridRowCountSelector } from './hooks/features/filter/gridFilterSelector';
-import { gridRowCountSelector } from './hooks/features/rows/gridRowsSelector';
-import { useGridRootProps } from './hooks/utils/useGridRootProps';
+import { useGridSelector } from '../../hooks/features/core/useGridSelector';
+import { visibleGridRowCountSelector } from '../../hooks/features/filter/gridFilterSelector';
+import { gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
+import { useGridApiContext } from '../../hooks/root/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 export function GridOverlays() {
   const apiRef = useGridApiContext();

packages/grid/_modules_/grid/components/base/index.ts

@@ -0,0 +1,5 @@
+export * from './GridBody';
+export * from './GridErrorHandler';
+export * from './GridFooterPlaceholder';
+export * from './GridHeaderPlaceholder';
+export * from './GridOverlays';

packages/grid/_modules_/grid/components/index.ts

@@ -1,3 +1,4 @@
+export * from './base';
 export * from './cell';
 export * from './containers';
 export * from './columnHeaders';

packages/grid/_modules_/grid/hooks/features/columnReorder/useGridColumnReorder.tsx

@@ -38,6 +38,9 @@ const hasCursorPositionChanged = (
 ): boolean =>
   currentCoordinates.x !== nextCoordinates.x || currentCoordinates.y !== nextCoordinates.y;
 
+/**
+ * Only available in XGrid
+ */
 export const useGridColumnReorder = (apiRef: GridApiRef): void => {
   const logger = useLogger('useGridColumnReorder');
 

packages/grid/_modules_/grid/hooks/features/core/gridState.ts

@@ -1,3 +1,4 @@
+import { LicenseStatus } from '@material-ui/x-license';
 import { getInitialGridColumnsState, GridColumnsState } from '../../../models/colDef/gridColDef';
 import {
   GridContainerProps,
@@ -9,8 +10,8 @@ import { GridEditRowsModel } from '../../../models/gridEditRowModel';
 import { DEFAULT_GRID_OPTIONS, GridOptions } from '../../../models/gridOptions';
 import { GridColumnMenuState } from '../columnMenu/columnMenuState';
 import {
-  GridColumnReorderState,
   getInitialGridColumnReorderState,
+  GridColumnReorderState,
 } from '../columnReorder/columnReorderState';
 import {
   getInitialGridColumnResizeState,
@@ -25,7 +26,7 @@ import {
 import { GridFocusState, GridTabIndexState } from '../focus/gridFocusState';
 import { GridPreferencePanelState } from '../preferencesPanel/gridPreferencePanelState';
 import { getInitialGridRowState, InternalGridRowsState } from '../rows/gridRowsState';
-import { GridSelectionState } from '../selection/gridSelectionState';
+import { GridSelectionModel } from '../../../models/gridSelectionModel';
 import { getInitialGridSortingState, GridSortingState } from '../sorting/gridSortingState';
 import {
   getInitialGridRenderingState,
@@ -50,16 +51,18 @@ export interface GridState {
   sorting: GridSortingState;
   focus: GridFocusState;
   tabIndex: GridTabIndexState;
-  selection: GridSelectionState;
+  selection: GridSelectionModel;
   filter: GridFilterModel;
   visibleRows: VisibleGridRowsState;
   preferencePanel: GridPreferencePanelState;
   density: GridGridDensity;
   error?: any;
+  licenseStatus: LicenseStatus;
 }
 
 export const getInitialGridState = (): GridState => ({
   rows: getInitialGridRowState(),
+  licenseStatus: LicenseStatus.NotFound,
   editRows: {},
   pagination: getInitialPaginationState(),
   options: DEFAULT_GRID_OPTIONS,

packages/grid/_modules_/grid/hooks/features/density/densityState.ts

@@ -1,5 +1,4 @@
-import { GridDensity } from '../../../models/gridDensity';
-import { DEFAULT_GRID_OPTIONS } from '../../../models/gridOptions';
+import { GridDensity, GridDensityTypes } from '../../../models/gridDensity';
 
 export interface GridGridDensity {
   value: GridDensity;
@@ -9,8 +8,8 @@ export interface GridGridDensity {
 
 export function getInitialGridDensityState(): GridGridDensity {
   return {
-    value: DEFAULT_GRID_OPTIONS.density,
-    rowHeight: DEFAULT_GRID_OPTIONS.rowHeight,
-    headerHeight: DEFAULT_GRID_OPTIONS.headerHeight,
+    value: GridDensityTypes.Standard,
+    rowHeight: 52,
+    headerHeight: 56,
   };
 }

packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts

@@ -1,22 +1,22 @@
 import { createSelector, OutputSelector } from 'reselect';
 import { gridRowsLookupSelector, GridRowsLookup } from '../rows/gridRowsSelector';
 import { GridState } from '../core/gridState';
-import { GridSelectionState } from './gridSelectionState';
 import { GridRowId, GridRowModel } from '../../../models/gridRows';
+import { GridSelectionModel } from '../../../models/gridSelectionModel';
 
 export const gridSelectionStateSelector = (state: GridState) => state.selection;
 export const selectedGridRowsCountSelector: OutputSelector<
   GridState,
   number,
-  (res: GridSelectionState) => number
-> = createSelector<GridState, GridSelectionState, number>(
+  (res: GridSelectionModel) => number
+> = createSelector<GridState, GridSelectionModel, number>(
   gridSelectionStateSelector,
   (selection) => selection.length,
 );
 
 export const selectedGridRowsSelector = createSelector<
   GridState,
-  GridSelectionState,
+  GridSelectionModel,
   GridRowsLookup,
   Map<GridRowId, GridRowModel>
 >(
@@ -28,8 +28,8 @@ export const selectedGridRowsSelector = createSelector<
 export const selectedIdsLookupSelector: OutputSelector<
   GridState,
   Record<string, GridRowId>,
-  (res: GridSelectionState) => Record<string, GridRowId>
-> = createSelector<GridState, GridSelectionState, Record<string, GridRowId>>(
+  (res: GridSelectionModel) => Record<string, GridRowId>
+> = createSelector<GridState, GridSelectionModel, Record<string, GridRowId>>(
   gridSelectionStateSelector,
   (selection) =>
     selection.reduce((lookup, rowId) => {

packages/grid/_modules_/grid/hooks/features/selection/index.ts

@@ -1,3 +1,2 @@
-export * from './gridSelectionState';
 export * from './gridSelectionSelector';
 export * from './useGridSelection';