@mui/x-data-grid 8.0.0-alpha.11 → 8.0.0-alpha.13

package/modern/components/columnsManagement/GridColumnsManagement.js

@@ -3,17 +3,17 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import FormControlLabel from '@mui/material/FormControlLabel';
 import { styled } from '@mui/material/styles';
 import { inputBaseClasses } from '@mui/material/InputBase';
-import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
+import { vars } from "../../constants/cssVariables.js";
+import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, gridInitialColumnVisibilityModelSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { useLazyRef } from "../../hooks/utils/useLazyRef.js";
 import { checkColumnVisibilityModelsSame, defaultSearchPredicate } from "./utils.js";
 import { NotRendered } from "../../utils/assert.js";
+import { GridShadowScrollArea } from "../GridShadowScrollArea.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -33,7 +33,7 @@ function GridColumnsManagement(props) {
   const apiRef = useGridApiContext();
   const searchInputRef = React.useRef(null);
   const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
-  const initialColumnVisibilityModel = useLazyRef(() => gridColumnVisibilityModelSelector(apiRef)).current;
+  const initialColumnVisibilityModel = useGridSelector(apiRef, gridInitialColumnVisibilityModelSelector);
   const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   const rootProps = useGridRootProps();
   const [searchValue, setSearchValue] = React.useState('');
@@ -133,20 +133,20 @@ function GridColumnsManagement(props) {
         type: "search",
         slotProps: {
           input: {
-            startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-              position: "start",
-              children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {})
+            startAdornment: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
+              fontSize: "small"
             }),
             endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-              "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
               size: "small",
+              "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
               style: searchValue ? {
                 visibility: 'visible'
               } : {
                 visibility: 'hidden'
               },
               tabIndex: -1,
-              onClick: handleSearchReset
+              onClick: handleSearchReset,
+              edge: "end"
             }, rootProps.slotProps?.baseIconButton, {
               children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
                 fontSize: "small"
@@ -160,42 +160,38 @@ function GridColumnsManagement(props) {
         autoComplete: "off",
         fullWidth: true
       }, rootProps.slotProps?.baseTextField, searchInputProps))
-    }), /*#__PURE__*/_jsxs(GridColumnsManagementBody, {
-      className: classes.root,
+    }), /*#__PURE__*/_jsx(GridColumnsManagementScrollArea, {
       ownerState: rootProps,
-      children: [currentColumns.map(column => /*#__PURE__*/_jsx(FormControlLabel, {
-        className: classes.row,
-        control: /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+      children: /*#__PURE__*/_jsxs(GridColumnsManagementBody, {
+        className: classes.root,
+        ownerState: rootProps,
+        children: [currentColumns.map(column => /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+          className: classes.row,
           disabled: column.hideable === false,
           checked: columnVisibilityModel[column.field] !== false,
           onClick: toggleColumn,
           name: column.field,
-          sx: {
-            p: 0.5
-          },
-          inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
-        }, rootProps.slotProps?.baseCheckbox)),
-        label: column.headerName || column.field
-      }, column.field)), currentColumns.length === 0 && /*#__PURE__*/_jsx(GridColumnsManagementEmptyText, {
-        ownerState: rootProps,
-        children: apiRef.current.getLocaleText('columnsManagementNoColumns')
-      })]
-    }), (!disableShowHideToggle || !disableResetButton) && currentColumns.length > 0 ? /*#__PURE__*/_jsxs(GridColumnsManagementFooter, {
+          inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined,
+          label: column.headerName || column.field,
+          density: "compact",
+          fullWidth: true
+        }, rootProps.slotProps?.baseCheckbox), column.field)), currentColumns.length === 0 && /*#__PURE__*/_jsx(GridColumnsManagementEmptyText, {
+          ownerState: rootProps,
+          children: apiRef.current.getLocaleText('columnsManagementNoColumns')
+        })]
+      })
+    }), !disableShowHideToggle || !disableResetButton ? /*#__PURE__*/_jsxs(GridColumnsManagementFooter, {
       ownerState: rootProps,
       className: classes.footer,
-      children: [!disableShowHideToggle ? /*#__PURE__*/_jsx(FormControlLabel, {
-        control: /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-          disabled: hideableColumns.length === 0,
-          checked: allHideableColumnsVisible,
-          indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
-          onClick: () => toggleAllColumns(!allHideableColumnsVisible),
-          name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
-          sx: {
-            p: 0.5
-          }
-        }, rootProps.slotProps?.baseCheckbox)),
-        label: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
-      }) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+      children: [!disableShowHideToggle ? /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+        disabled: hideableColumns.length === 0,
+        checked: allHideableColumnsVisible,
+        indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
+        onClick: () => toggleAllColumns(!allHideableColumnsVisible),
+        name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
+        label: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
+        density: "compact"
+      }, rootProps.slotProps?.baseCheckbox)) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
         disabled: isResetDisabled
       }, rootProps.slotProps?.baseButton, {
@@ -269,62 +265,52 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
 } : void 0;
 const GridColumnsManagementBody = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnsManagement',
-  overridesResolver: (props, styles) => styles.columnsManagement
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(0, 3, 1.5),
+  slot: 'ColumnsManagement'
+})({
   display: 'flex',
   flexDirection: 'column',
-  overflow: 'auto',
-  flex: '1 1',
-  maxHeight: 400,
-  alignItems: 'flex-start'
-}));
+  padding: vars.spacing(0.5, 1.5)
+});
+const GridColumnsManagementScrollArea = styled(GridShadowScrollArea, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementScrollArea'
+})({
+  maxHeight: 400
+});
 const GridColumnsManagementHeader = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnsManagementHeader',
-  overridesResolver: (props, styles) => styles.columnsManagementHeader
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(1.5, 3)
-}));
+  slot: 'ColumnsManagementHeader'
+})({
+  padding: vars.spacing(1.5, 2),
+  borderBottom: `1px solid ${vars.colors.border.base}`
+});
 const SearchInput = styled(NotRendered, {
   name: 'MuiDataGrid',
-  slot: 'ColumnsManagementSearchInput',
-  overridesResolver: (props, styles) => styles.columnsManagementSearchInput
-})(({
-  theme
-}) => ({
-  [`& .${inputBaseClasses.root}`]: {
-    padding: theme.spacing(0, 1.5, 0, 1.5)
-  },
+  slot: 'ColumnsManagementSearchInput'
+})({
   [`& .${inputBaseClasses.input}::-webkit-search-decoration,
-  & .${inputBaseClasses.input}::-webkit-search-cancel-button,
-  & .${inputBaseClasses.input}::-webkit-search-results-button,
-  & .${inputBaseClasses.input}::-webkit-search-results-decoration`]: {
+      & .${inputBaseClasses.input}::-webkit-search-cancel-button,
+      & .${inputBaseClasses.input}::-webkit-search-results-button,
+      & .${inputBaseClasses.input}::-webkit-search-results-decoration`]: {
     /* clears the 'X' icon from Chrome */
     display: 'none'
   }
-}));
+});
 const GridColumnsManagementFooter = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnsManagementFooter',
-  overridesResolver: (props, styles) => styles.columnsManagementFooter
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(0.5, 1, 0.5, 3),
+  slot: 'ColumnsManagementFooter'
+})({
+  padding: vars.spacing(1, 1, 1, 1.5),
   display: 'flex',
   justifyContent: 'space-between',
-  borderTop: `1px solid ${theme.palette.divider}`
-}));
-const GridColumnsManagementEmptyText = styled('div')(({
-  theme
-}) => ({
-  padding: theme.spacing(0.5, 0),
-  color: theme.palette.grey[500]
-}));
+  borderTop: `1px solid ${vars.colors.border.base}`
+});
+const GridColumnsManagementEmptyText = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementEmptyText'
+})({
+  padding: vars.spacing(1, 0),
+  alignSelf: 'center',
+  fontSize: vars.typography.body.fontSize
+});
 export { GridColumnsManagement };

package/modern/components/columnsManagement/index.d.ts

@@ -0,0 +1 @@
+export * from "./GridColumnsManagement.js";

package/modern/components/columnsManagement/utils.d.ts

@@ -0,0 +1,4 @@
+import { GridColumnVisibilityModel } from "../../hooks/features/columns/gridColumnsInterfaces.js";
+import type { GridColumnsManagementProps } from './GridColumnsManagement';
+export declare const checkColumnVisibilityModelsSame: (a: GridColumnVisibilityModel, b: GridColumnVisibilityModel) => boolean;
+export declare const defaultSearchPredicate: NonNullable<GridColumnsManagementProps['searchPredicate']>;

package/modern/components/containers/GridFooterContainer.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+export type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+  sx?: SxProps<Theme>;
+};
+declare const GridFooterContainer: React.ForwardRefExoticComponent<GridFooterContainerProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  sx?: SxProps<Theme>;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridFooterContainer };

package/modern/components/containers/GridOverlay.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Theme, SxProps } from '@mui/system';
+export type GridOverlayProps = React.HTMLAttributes<HTMLDivElement> & {
+  sx?: SxProps<Theme>;
+};
+declare const GridOverlay: React.ForwardRefExoticComponent<GridOverlayProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  sx?: SxProps<Theme>;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridOverlay };

package/modern/components/containers/GridOverlay.js

@@ -7,6 +7,7 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars } from "../../constants/cssVariables.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,16 +22,17 @@ const useUtilityClasses = ownerState => {
 };
 const GridOverlayRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'Overlay',
-  overridesResolver: (_, styles) => styles.overlay
+  slot: 'Overlay'
 })({
   width: '100%',
   height: '100%',
   display: 'flex',
+  gap: vars.spacing(1),
+  flexDirection: 'column',
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: 'var(--unstable_DataGrid-overlayBackground)'
+  backgroundColor: vars.colors.background.backdrop
 });
 const GridOverlay = forwardRef(function GridOverlay(props, ref) {
   const {

package/modern/components/containers/GridRoot.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+export interface GridRootProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+declare const MemoizedGridRoot: React.ForwardRefExoticComponent<GridRootProps> | React.ForwardRefExoticComponent<GridRootProps & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedGridRoot as GridRoot };

package/modern/components/containers/GridRoot.js

@@ -8,6 +8,7 @@ import { unstable_useForkRef as useForkRef, unstable_capitalize as capitalize, u
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridRootStyles } from "./GridRootStyles.js";
+import { useCSSVariablesContext } from "../../utils/css/context.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -47,18 +48,19 @@ const GridRoot = forwardRef(function GridRoot(props, ref) {
   const handleRef = useForkRef(rootElementRef, ref, rootMountCallback);
   const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState, density);
+  const cssVariables = useCSSVariablesContext();
   const isSSR = useIsSSR();
   if (isSSR) {
     return null;
   }
   return /*#__PURE__*/_jsxs(GridRootStyles, _extends({
-    className: clsx(classes.root, className),
+    className: clsx(classes.root, className, cssVariables.className),
     ownerState: ownerState
   }, other, {
     ref: handleRef,
     children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
       children: children
-    }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
+    }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {}), cssVariables.tag]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {

package/modern/components/containers/GridRootStyles.d.ts

@@ -0,0 +1,5 @@
+import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
+export type OwnerState = DataGridProcessedProps;
+export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  ownerState: OwnerState;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;