@mui/x-data-grid 7.0.0-alpha.8 → 7.0.0-beta.0

package/components/virtualization/GridVirtualScrollbar.js

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { useOnMount } from '../../hooks/utils/useOnMount';
+import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
+import { gridDimensionsSelector, useGridSelector } from '../../hooks';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = (ownerState, position) => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['scrollbar', `scrollbar--${position}`],
+    content: ['scrollbarContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const Scrollbar = styled('div')({
+  position: 'absolute',
+  display: 'inline-block',
+  zIndex: 6,
+  '& > div': {
+    display: 'inline-block'
+  },
+  // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
+  // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
+  // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
+  // don't have a method to find the required size for scrollbars on those platforms.
+  '--size': 'calc(max(var(--DataGrid-scrollbarSize), 14px))'
+});
+const ScrollbarVertical = styled(Scrollbar)({
+  width: 'var(--size)',
+  height: 'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-topContainerHeight) - var(--DataGrid-bottomContainerHeight) - var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize)))',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  '& > div': {
+    width: 'var(--size)'
+  },
+  top: 'var(--DataGrid-topContainerHeight)',
+  right: '0px'
+});
+const ScrollbarHorizontal = styled(Scrollbar)({
+  width: '100%',
+  height: 'var(--size)',
+  overflowY: 'hidden',
+  overflowX: 'auto',
+  '& > div': {
+    height: 'var(--size)'
+  },
+  bottom: '0px'
+});
+const Content = styled('div')({
+  display: 'inline-block'
+});
+const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualScrollbar(props, ref) {
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const isLocked = React.useRef(false);
+  const lastPosition = React.useRef(0);
+  const scrollbarRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const classes = useUtilityClasses(rootProps, props.position);
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
+  const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
+  const hasScroll = props.position === 'vertical' ? dimensions.hasScrollX : dimensions.hasScrollY;
+  const contentSize = dimensions.minimumSize[propertyDimension] + (hasScroll ? dimensions.scrollbarSize : 0);
+  const scrollbarSize = props.position === 'vertical' ? dimensions.viewportInnerSize.height : dimensions.viewportOuterSize.width;
+  const scrollbarInnerSize = scrollbarSize * (contentSize / dimensions.viewportOuterSize[propertyDimension]);
+  const onScrollerScroll = useEventCallback(() => {
+    const scroller = apiRef.current.virtualScrollerRef.current;
+    const scrollbar = scrollbarRef.current;
+    if (scroller[propertyScroll] === lastPosition.current) {
+      return;
+    }
+    if (isLocked.current) {
+      isLocked.current = false;
+      return;
+    }
+    isLocked.current = true;
+    const value = scroller[propertyScroll] / contentSize;
+    scrollbar[propertyScroll] = value * scrollbarInnerSize;
+    lastPosition.current = scroller[propertyScroll];
+  });
+  const onScrollbarScroll = useEventCallback(() => {
+    const scroller = apiRef.current.virtualScrollerRef.current;
+    const scrollbar = scrollbarRef.current;
+    if (isLocked.current) {
+      isLocked.current = false;
+      return;
+    }
+    isLocked.current = true;
+    const value = scrollbar[propertyScroll] / scrollbarInnerSize;
+    scroller[propertyScroll] = value * contentSize;
+  });
+  useOnMount(() => {
+    const scroller = apiRef.current.virtualScrollerRef.current;
+    const scrollbar = scrollbarRef.current;
+    scroller.addEventListener('scroll', onScrollerScroll, {
+      capture: true
+    });
+    scrollbar.addEventListener('scroll', onScrollbarScroll, {
+      capture: true
+    });
+    return () => {
+      scroller.removeEventListener('scroll', onScrollerScroll, {
+        capture: true
+      });
+      scrollbar.removeEventListener('scroll', onScrollbarScroll, {
+        capture: true
+      });
+    };
+  });
+  React.useEffect(() => {
+    const content = contentRef.current;
+    content.style.setProperty(propertyDimension, `${scrollbarInnerSize}px`);
+  }, [scrollbarInnerSize, propertyDimension]);
+  const Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
+  return /*#__PURE__*/_jsx(Container, {
+    ref: useForkRef(ref, scrollbarRef),
+    className: classes.root,
+    tabIndex: -1,
+    children: /*#__PURE__*/_jsx(Content, {
+      ref: contentRef,
+      className: classes.content
+    })
+  });
+});
+export { GridVirtualScrollbar };

package/components/virtualization/GridVirtualScroller.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { SxProps, Theme } from '@mui/system';
-declare const GridVirtualScroller: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    sx?: SxProps<Theme> | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+export interface GridVirtualScrollerProps {
+    children?: React.ReactNode;
+}
+declare function GridVirtualScroller(props: GridVirtualScrollerProps): React.JSX.Element;
 export { GridVirtualScroller };

package/components/virtualization/GridVirtualScroller.js

@@ -1,42 +1,95 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import clsx from 'clsx';
 import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridDimensionsSelector } from '../../hooks/features/dimensions';
+import { useGridVirtualScroller } from '../../hooks/features/virtualization/useGridVirtualScroller';
+import { GridOverlays } from '../base/GridOverlays';
+import { GridHeaders } from '../GridHeaders';
+import { GridMainContainer as Container } from './GridMainContainer';
+import { GridTopContainer as TopContainer } from './GridTopContainer';
+import { GridBottomContainer as BottomContainer } from './GridBottomContainer';
+import { GridVirtualScrollerContent as Content } from './GridVirtualScrollerContent';
+import { GridVirtualScrollerFiller as SpaceFiller } from './GridVirtualScrollerFiller';
+import { GridVirtualScrollerRenderZone as RenderZone } from './GridVirtualScrollerRenderZone';
+import { GridVirtualScrollbar as Scrollbar } from './GridVirtualScrollbar';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = (ownerState, dimensions) => {
   const {
     classes
   } = ownerState;
   const slots = {
-    root: ['virtualScroller']
+    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight'],
+    scroller: ['virtualScroller']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
-const VirtualScrollerRoot = styled('div', {
+const Scroller = styled('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScroller',
   overridesResolver: (props, styles) => styles.virtualScroller
 })({
-  overflow: 'auto',
-  height: '100%',
-  // See https://github.com/mui/mui-x/issues/4360
   position: 'relative',
+  height: '100%',
+  overflow: 'scroll',
+  scrollbarWidth: 'none' /* Firefox */,
+  '&::-webkit-scrollbar': {
+    display: 'none' /* Safari and Chrome */
+  },
   '@media print': {
     overflow: 'hidden'
   },
-  zIndex: 0 // See https://github.com/mui/mui-x/issues/10547
+  // See https://github.com/mui/mui-x/issues/10547
+  zIndex: 0
 });
-const GridVirtualScroller = /*#__PURE__*/React.forwardRef(function GridVirtualScroller(props, ref) {
+function GridVirtualScroller(props) {
+  const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const classes = useUtilityClasses(rootProps);
-  return /*#__PURE__*/_jsx(VirtualScrollerRoot, _extends({
-    ref: ref
-  }, props, {
-    className: clsx(classes.root, props.className),
-    ownerState: rootProps
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const classes = useUtilityClasses(rootProps, dimensions);
+  const virtualScroller = useGridVirtualScroller();
+  const {
+    getContainerProps,
+    getScrollerProps,
+    getContentProps,
+    getRenderZoneProps,
+    getScrollbarVerticalProps,
+    getScrollbarHorizontalProps
+  } = virtualScroller;
+  return /*#__PURE__*/_jsxs(Container, _extends({
+    className: classes.root
+  }, getContainerProps(), {
+    children: [/*#__PURE__*/_jsxs(Scroller, _extends({
+      className: classes.scroller
+    }, getScrollerProps(), {
+      ownerState: rootProps,
+      children: [/*#__PURE__*/_jsxs(TopContainer, {
+        children: [/*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
+          position: "top",
+          virtualScroller: virtualScroller
+        })]
+      }), /*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
+        children: /*#__PURE__*/_jsxs(RenderZone, _extends({}, getRenderZoneProps(), {
+          children: [virtualScroller.getRows(), /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
+            virtualScroller: virtualScroller
+          })]
+        }))
+      })), /*#__PURE__*/_jsx(SpaceFiller, {}), /*#__PURE__*/_jsx(BottomContainer, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
+          position: "bottom",
+          virtualScroller: virtualScroller
+        })
+      })]
+    })), /*#__PURE__*/_jsx(Scrollbar, _extends({
+      position: "vertical"
+    }, getScrollbarVerticalProps())), /*#__PURE__*/_jsx(Scrollbar, _extends({
+      position: "horizontal"
+    }, getScrollbarHorizontalProps())), props.children]
   }));
-});
+}
 export { GridVirtualScroller };

package/components/virtualization/GridVirtualScrollerFiller.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare function GridVirtualScrollerFiller(): React.JSX.Element | null;
+declare const Memoized: typeof GridVirtualScrollerFiller;
+export { Memoized as GridVirtualScrollerFiller };

package/components/virtualization/GridVirtualScrollerFiller.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { fastMemo } from '../../utils/fastMemo';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { gridDimensionsSelector } from '../../hooks/features/dimensions';
+import { gridClasses } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Filler = styled('div')({
+  display: 'flex',
+  flexDirection: 'row',
+  width: 'var(--DataGrid-rowWidth)',
+  boxSizing: 'border-box'
+});
+const Pinned = styled('div')({
+  position: 'sticky',
+  height: '100%',
+  boxSizing: 'border-box',
+  borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+  backgroundColor: 'var(--DataGrid-pinnedBackground)'
+});
+const PinnedLeft = styled(Pinned)({
+  left: 0,
+  borderRight: '1px solid var(--DataGrid-rowBorderColor)'
+});
+const PinnedRight = styled(Pinned)({
+  right: 0,
+  borderLeft: '1px solid var(--DataGrid-rowBorderColor)'
+});
+const Main = styled('div')({
+  flexGrow: 1,
+  borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+});
+function GridVirtualScrollerFiller() {
+  const apiRef = useGridApiContext();
+  const {
+    viewportOuterSize,
+    minimumSize,
+    hasScrollX,
+    scrollbarSize,
+    leftPinnedWidth,
+    rightPinnedWidth
+  } = useGridSelector(apiRef, gridDimensionsSelector);
+  const scrollbarHeight = hasScrollX ? scrollbarSize : 0;
+  const expandedHeight = viewportOuterSize.height - minimumSize.height - scrollbarHeight;
+  const height = Math.max(scrollbarHeight, expandedHeight);
+  if (height === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Filler, {
+    className: gridClasses.filler,
+    role: "presentation",
+    style: {
+      height
+    },
+    children: [leftPinnedWidth > 0 && /*#__PURE__*/_jsx(PinnedLeft, {
+      className: gridClasses['filler--pinnedLeft'],
+      style: {
+        width: leftPinnedWidth
+      }
+    }), /*#__PURE__*/_jsx(Main, {}), rightPinnedWidth > 0 && /*#__PURE__*/_jsx(PinnedRight, {
+      className: gridClasses['filler--pinnedRight'],
+      style: {
+        width: rightPinnedWidth
+      }
+    })]
+  });
+}
+const Memoized = fastMemo(GridVirtualScrollerFiller);
+export { Memoized as GridVirtualScrollerFiller };

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -25,7 +25,8 @@ const VirtualScrollerRenderZoneRoot = styled('div', {
   position: 'absolute',
   display: 'flex',
   // Prevents margin collapsing when using `getRowSpacing`
-  flexDirection: 'column'
+  flexDirection: 'column',
+  transform: 'translate3d(0, var(--DataGrid-offsetTop), 0)'
 });
 const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   const {

package/constants/defaultGridSlotsComponents.js

@@ -1,28 +1,33 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount } from '../components';
-import { GridCellV7 } from '../components/cell/GridCell';
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement } from '../components';
+import { GridCell } from '../components/cell/GridCell';
 import { GridColumnHeaders } from '../components/GridColumnHeaders';
 import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
+import { GridDetailPanels } from '../components/GridDetailPanels';
+import { GridPinnedRows } from '../components/GridPinnedRows';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
 import materialSlots from '../material';
 
 // TODO: camelCase these key. It's a private helper now.
 // Remove then need to call `uncapitalizeObjectKeys`.
 export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
-  cell: GridCellV7,
+  cell: GridCell,
   skeletonCell: GridSkeletonCell,
   columnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   columnMenu: GridColumnMenu,
   columnHeaders: GridColumnHeaders,
+  detailPanels: GridDetailPanels,
   footer: GridFooter,
   footerRowCount: GridRowCount,
   toolbar: null,
+  pinnedRows: GridPinnedRows,
   loadingOverlay: GridLoadingOverlay,
   noResultsOverlay: GridNoResultsOverlay,
   noRowsOverlay: GridNoRowsOverlay,
   pagination: GridPagination,
   filterPanel: GridFilterPanel,
   columnsPanel: GridColumnsPanel,
+  columnsManagement: GridColumnsManagement,
   panel: GridPanel,
   row: GridRow
 });

package/constants/gridClasses.d.ts

@@ -75,6 +75,14 @@ export interface GridClasses {
      * Styles applied to the cell element if it is at the right edge of a cell selection range.
      */
     'cell--rangeRight': string;
+    /**
+     * Styles applied to the cell element if it is pinned to the left.
+     */
+    'cell--pinnedLeft': string;
+    /**
+     * Styles applied to the cell element if it is pinned to the right.
+     */
+    'cell--pinnedRight': string;
     /**
      * Styles applied to the cell element if it is in a cell selection range.
      */
@@ -91,6 +99,10 @@ export interface GridClasses {
      * Styles applied to the cell checkbox element.
      */
     cellCheckbox: string;
+    /**
+     * Styles applied to the empty cell element.
+     */
+    cellEmpty: string;
     /**
      * Styles applied to the skeleton cell element.
      */
@@ -216,13 +228,29 @@ export interface GridClasses {
      */
     columnSeparator: string;
     /**
-     * Styles applied to the columns panel element.
+     * Styles applied to the columns management body.
+     */
+    columnsManagement: string;
+    /**
+     * Styles applied to the columns management row element.
+     */
+    columnsManagementRow: string;
+    /**
+     * Styles applied to the columns management header element.
      */
-    columnsPanel: string;
+    columnsManagementHeader: string;
     /**
-     * Styles applied to the columns panel row element.
+     * Styles applied to the columns management footer element.
      */
-    columnsPanelRow: string;
+    columnsManagementFooter: string;
+    /**
+     * Styles applied to the top container.
+     */
+    'container--top': string;
+    /**
+     * Styles applied to the bottom container.
+     */
+    'container--bottom': string;
     /**
      * Styles applied to the detail panel element.
      */
@@ -271,6 +299,18 @@ export interface GridClasses {
      * Styles applied to root of the boolean edit component.
      */
     editBooleanCell: string;
+    /**
+     * Styles applied to the filler row.
+     */
+    filler: string;
+    /**
+     * Styles applied to the filler row pinned left section.
+     */
+    'filler--pinnedLeft': string;
+    /**
+     * Styles applied to the filler row pinned right section.
+     */
+    'filler--pinnedRight': string;
     /**
      * Styles applied to the root of the filter form component.
      */
@@ -323,6 +363,10 @@ export interface GridClasses {
      * Styles applied to the main container element.
      */
     main: string;
+    /**
+     * Styles applied to the main container element when it has right pinned columns.
+     */
+    'main--hasPinnedRight': string;
     /**
      * Styles applied to the menu element.
      */
@@ -375,14 +419,6 @@ export interface GridClasses {
      * Styles applied to the pinned columns.
      */
     pinnedColumns: string;
-    /**
-     * Styles applied to the left pinned columns.
-     */
-    'pinnedColumns--left': string;
-    /**
-     * Styles applied to the right pinned columns.
-     */
-    'pinnedColumns--right': string;
     /**
      * Styles applied to the pinned column headers.
      */
@@ -427,6 +463,10 @@ export interface GridClasses {
      * Styles applied to the floating special row reorder cell element when it is dragged.
      */
     'row--dragging': string;
+    /**
+     * Styles applied to the first visible row element on every page of the grid.
+     */
+    'row--firstVisible': string;
     /**
      * Styles applied to the last visible row element on every page of the grid.
      */
@@ -472,6 +512,18 @@ export interface GridClasses {
      * Styles applied to the right scroll area element.
      */
     'scrollArea--right': string;
+    /**
+     * Styles applied to the scrollbars.
+     */
+    scrollbar: string;
+    /**
+     * Styles applied to the horizontal scrollbar.
+     */
+    'scrollbar--horizontal': string;
+    /**
+     * Styles applied to the horizontal scrollbar.
+     */
+    'scrollbar--vertical': string;
     /**
      * Styles applied to the footer selected row count element.
      */
@@ -488,6 +540,10 @@ export interface GridClasses {
      * Styles applied to the toolbar filter list element.
      */
     toolbarFilterList: string;
+    /**
+     * Styles applied the grid if `showColumnVerticalBorder={true}`.
+     */
+    withVerticalBorder: string;
     /**
      * Styles applied to cells, column header and other elements that have border.
      * Sets border color only.
@@ -497,6 +553,10 @@ export interface GridClasses {
      * Styles applied the cell if `showColumnVerticalBorder={true}`.
      */
     'cell--withRightBorder': string;
+    /**
+     * Styles applied the cell if `showColumnVerticalBorder={true}`.
+     */
+    'cell--withLeftBorder': string;
     /**
      * Styles applied the column header if `showColumnVerticalBorder={true}`.
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/constants/localeTextConstants.js

@@ -27,12 +27,10 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarExportCSV: 'Download as CSV',
   toolbarExportPrint: 'Print',
   toolbarExportExcel: 'Download as Excel',
-  // Columns panel text
-  columnsPanelTextFieldLabel: 'Find column',
-  columnsPanelTextFieldPlaceholder: 'Column title',
-  columnsPanelDragIconLabel: 'Reorder column',
-  columnsPanelShowAllButton: 'Show all',
-  columnsPanelHideAllButton: 'Hide all',
+  // Columns management text
+  columnsManagementSearchTitle: 'Search',
+  columnsManagementNoColumns: 'No columns',
+  columnsManagementShowHideAllText: 'Show/Hide All',
   // Filter panel text
   filterPanelAddFilter: 'Add filter',
   filterPanelRemoveAll: 'Remove all',

package/hooks/core/gridCoreSelector.d.ts

@@ -0,0 +1,6 @@
+import { GridStateCommunity } from '../../models/gridStateCommunity';
+/**
+ * Get the theme state
+ * @category Core
+ */
+export declare const gridThemeSelector: (state: GridStateCommunity) => import("@mui/material").Theme;

package/hooks/core/gridCoreSelector.js

@@ -0,0 +1,5 @@
+/**
+ * Get the theme state
+ * @category Core
+ */
+export const gridThemeSelector = state => state.theme;

package/hooks/core/useGridApiInitialization.js

@@ -69,6 +69,7 @@ function createPublicAPI(privateApiRef) {
   return publicApi;
 }
 export function useGridApiInitialization(inputApiRef, props) {
+  var _inputApiRef$current;
   const publicApiRef = React.useRef();
   const privateApiRef = React.useRef();
   if (!privateApiRef.current) {
@@ -99,6 +100,9 @@ export function useGridApiInitialization(inputApiRef, props) {
     subscribeEvent,
     publishEvent
   }, 'public');
+  if (inputApiRef && !((_inputApiRef$current = inputApiRef.current) != null && _inputApiRef$current.state)) {
+    inputApiRef.current = publicApiRef.current;
+  }
   React.useImperativeHandle(inputApiRef, () => publicApiRef.current, [publicApiRef]);
   React.useEffect(() => {
     const api = privateApiRef.current;

package/hooks/core/useGridInitialization.js

@@ -1,3 +1,5 @@
+import { useGridRefs } from './useGridRefs';
+import { useGridTheme } from './useGridTheme';
 import { useGridLoggerFactory } from './useGridLoggerFactory';
 import { useGridApiInitialization } from './useGridApiInitialization';
 import { useGridLocaleText } from './useGridLocaleText';
@@ -10,6 +12,8 @@ import { useGridStateInitialization } from './useGridStateInitialization';
  */
 export const useGridInitialization = (inputApiRef, props) => {
   const privateApiRef = useGridApiInitialization(inputApiRef, props);
+  useGridRefs(privateApiRef);
+  useGridTheme(privateApiRef);
   useGridLoggerFactory(privateApiRef, props);
   useGridStateInitialization(privateApiRef, props);
   useGridPipeProcessing(privateApiRef);

package/hooks/core/useGridRefs.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+export declare const useGridRefs: <PrivateApi extends GridPrivateApiCommon>(apiRef: React.MutableRefObject<PrivateApi>) => void;

package/hooks/core/useGridRefs.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export const useGridRefs = apiRef => {
+  const rootElementRef = React.useRef(null);
+  const mainElementRef = React.useRef(null);
+  const virtualScrollerRef = React.useRef(null);
+  apiRef.current.register('public', {
+    rootElementRef
+  });
+  apiRef.current.register('private', {
+    mainElementRef,
+    virtualScrollerRef
+  });
+};

package/hooks/core/useGridTheme.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+export declare const useGridTheme: (apiRef: React.MutableRefObject<GridPrivateApiCommon>) => void;