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

package/components/cell/GridEditInputCell.js

@@ -14,6 +14,7 @@ var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _assert = require("../../utils/assert");
+var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -31,9 +32,7 @@ const useUtilityClasses = ownerState => {
 const GridEditInputCellRoot = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'EditInputCell'
-})(({
-  theme
-}) => (0, _extends2.default)({}, theme.typography.body2, {
+})((0, _extends2.default)({}, _cssVariables.vars.typography.body, {
   padding: '1px 0',
   '& input': {
     padding: '0 16px',

package/components/columnSelection/GridHeaderCheckbox.js

@@ -21,6 +21,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridFilterSelector = require("../../hooks/features/filter/gridFilterSelector");
 var _gridPaginationSelector = require("../../hooks/features/pagination/gridPaginationSelector");
+var _gridRowSelectionManager = require("../../models/gridRowSelectionManager");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["field", "colDef"];
 const useUtilityClasses = ownerState => {
@@ -46,39 +47,72 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
   const visibleRowIds = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridExpandedSortedRowIdsSelector);
   const paginatedVisibleRowIds = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginatedVisibleSortedGridRowIdsSelector);
   const filteredSelection = React.useMemo(() => {
-    if (typeof rootProps.isRowSelectable !== 'function') {
+    const isRowSelectable = rootProps.isRowSelectable;
+    if (typeof isRowSelectable !== 'function') {
       return selection;
     }
-    return selection.filter(id => {
+    if (selection.type === 'exclude') {
+      return selection;
+    }
+
+    // selection.type === 'include'
+    const selectionModel = {
+      type: 'include',
+      ids: new Set()
+    };
+    for (const id of selection.ids) {
       if (rootProps.keepNonExistentRowsSelected) {
-        return true;
+        selectionModel.ids.add(id);
       }
       // The row might have been deleted
       if (!apiRef.current.getRow(id)) {
-        return false;
+        continue;
+      }
+      if (isRowSelectable(apiRef.current.getRowParams(id))) {
+        selectionModel.ids.add(id);
       }
-      return rootProps.isRowSelectable(apiRef.current.getRowParams(id));
-    });
-  }, [apiRef, rootProps.isRowSelectable, selection, rootProps.keepNonExistentRowsSelected]);
+    }
+    return selectionModel;
+  }, [apiRef, rootProps.isRowSelectable, rootProps.keepNonExistentRowsSelected, selection]);
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
     const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly ? visibleRowIds : paginatedVisibleRowIds;
 
-    // Convert to an object to make O(1) checking if a row exists or not
-    // TODO create selector that returns visibleRowIds/paginatedVisibleRowIds as an object
-    return rowIds.reduce((acc, id) => {
-      if (!apiRef.current.isRowSelectable(id)) {
-        return acc;
+    // Convert to a Set to make O(1) checking if a row exists or not
+    const candidates = new Set();
+    for (let i = 0; i < rowIds.length; i += 1) {
+      const id = rowIds[i];
+      if (apiRef.current.isRowSelectable(id)) {
+        candidates.add(id);
       }
-      acc[id] = true;
-      return acc;
-    }, {});
+    }
+    return candidates;
   }, [apiRef, rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
-  const currentSelectionSize = React.useMemo(() => filteredSelection.filter(id => selectionCandidates[id]).length, [filteredSelection, selectionCandidates]);
-  const isIndeterminate = currentSelectionSize > 0 && currentSelectionSize < Object.keys(selectionCandidates).length;
+  const currentSelectionSize = React.useMemo(() => {
+    const selectionManager = (0, _gridRowSelectionManager.createRowSelectionManager)(filteredSelection);
+    let size = 0;
+    for (const id of selectionCandidates) {
+      if (selectionManager.has(id)) {
+        size += 1;
+      }
+    }
+    return size;
+  }, [filteredSelection, selectionCandidates]);
+  const isIndeterminate = React.useMemo(() => {
+    if (filteredSelection.ids.size === 0) {
+      return false;
+    }
+    const selectionManager = (0, _gridRowSelectionManager.createRowSelectionManager)(filteredSelection);
+    for (const rowId of selectionCandidates) {
+      if (!selectionManager.has(rowId)) {
+        return true;
+      }
+    }
+    return false;
+  }, [filteredSelection, selectionCandidates]);
   const isChecked = currentSelectionSize > 0;
   const handleChange = event => {
     const params = {

package/components/columnsManagement/GridColumnsManagement.js

@@ -12,14 +12,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
 var _InputBase = require("@mui/material/InputBase");
+var _cssVariables = require("../../constants/cssVariables");
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
-var _useLazyRef = require("../../hooks/utils/useLazyRef");
 var _utils = require("./utils");
 var _assert = require("../../utils/assert");
+var _GridShadowScrollArea = require("../GridShadowScrollArea");
 var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 
@@ -41,7 +42,7 @@ function GridColumnsManagement(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const searchInputRef = React.useRef(null);
   const columns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
-  const initialColumnVisibilityModel = (0, _useLazyRef.useLazyRef)(() => (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef)).current;
+  const initialColumnVisibilityModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridInitialColumnVisibilityModelSelector);
   const columnVisibilityModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const [searchValue, setSearchValue] = React.useState('');
@@ -141,20 +142,20 @@ function GridColumnsManagement(props) {
         type: "search",
         slotProps: {
           input: {
-            startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
-              position: "start",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {})
+            startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
+              fontSize: "small"
             }),
             endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-              "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__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
                 fontSize: "small"
@@ -168,25 +169,27 @@ function GridColumnsManagement(props) {
         autoComplete: "off",
         fullWidth: true
       }, rootProps.slotProps?.baseTextField, searchInputProps))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementBody, {
-      className: classes.root,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementScrollArea, {
       ownerState: rootProps,
-      children: [currentColumns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
-        className: classes.row,
-        disabled: column.hideable === false,
-        checked: columnVisibilityModel[column.field] !== false,
-        onClick: toggleColumn,
-        name: column.field,
-        inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined,
-        label: column.headerName || column.field,
-        size: "medium",
-        density: "compact",
-        fullWidth: true
-      }, rootProps.slotProps?.baseCheckbox), column.field)), currentColumns.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementEmptyText, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementBody, {
+        className: classes.root,
         ownerState: rootProps,
-        children: apiRef.current.getLocaleText('columnsManagementNoColumns')
-      })]
-    }), (!disableShowHideToggle || !disableResetButton) && currentColumns.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementFooter, {
+        children: [currentColumns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
+          className: classes.row,
+          disabled: column.hideable === false,
+          checked: columnVisibilityModel[column.field] !== false,
+          onClick: toggleColumn,
+          name: column.field,
+          inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined,
+          label: column.headerName || column.field,
+          density: "compact",
+          fullWidth: true
+        }, rootProps.slotProps?.baseCheckbox), column.field)), currentColumns.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementEmptyText, {
+          ownerState: rootProps,
+          children: apiRef.current.getLocaleText('columnsManagementNoColumns')
+        })]
+      })
+    }), !disableShowHideToggle || !disableResetButton ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementFooter, {
       ownerState: rootProps,
       className: classes.footer,
       children: [!disableShowHideToggle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
@@ -195,7 +198,8 @@ function GridColumnsManagement(props) {
         indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
         onClick: () => toggleAllColumns(!allHideableColumnsVisible),
         name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
-        label: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
+        label: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
+        density: "compact"
       }, rootProps.slotProps?.baseCheckbox)) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), !disableResetButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
         onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
         disabled: isResetDisabled
@@ -271,56 +275,50 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
 const GridColumnsManagementBody = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagement'
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(0, 2, 1.5),
+})({
   display: 'flex',
   flexDirection: 'column',
-  overflow: 'auto',
-  flex: '1 1',
-  maxHeight: 400,
-  alignItems: 'flex-start'
-}));
+  padding: _cssVariables.vars.spacing(0.5, 1.5)
+});
+const GridColumnsManagementScrollArea = (0, _styles.styled)(_GridShadowScrollArea.GridShadowScrollArea, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementScrollArea'
+})({
+  maxHeight: 400
+});
 const GridColumnsManagementHeader = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementHeader'
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(1.5, 3)
-}));
+})({
+  padding: _cssVariables.vars.spacing(1.5, 2),
+  borderBottom: `1px solid ${_cssVariables.vars.colors.border.base}`
+});
 const SearchInput = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementSearchInput'
-})(({
-  theme
-}) => ({
-  [`& .${_InputBase.inputBaseClasses.root}`]: {
-    padding: theme.spacing(0, 1.5, 0, 1.5)
-  },
+})({
   [`& .${_InputBase.inputBaseClasses.input}::-webkit-search-decoration,
-  & .${_InputBase.inputBaseClasses.input}::-webkit-search-cancel-button,
-  & .${_InputBase.inputBaseClasses.input}::-webkit-search-results-button,
-  & .${_InputBase.inputBaseClasses.input}::-webkit-search-results-decoration`]: {
+      & .${_InputBase.inputBaseClasses.input}::-webkit-search-cancel-button,
+      & .${_InputBase.inputBaseClasses.input}::-webkit-search-results-button,
+      & .${_InputBase.inputBaseClasses.input}::-webkit-search-results-decoration`]: {
     /* clears the 'X' icon from Chrome */
     display: 'none'
   }
-}));
+});
 const GridColumnsManagementFooter = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementFooter'
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(0.5, 1, 0.5, 3),
+})({
+  padding: _cssVariables.vars.spacing(1, 1, 1, 1.5),
   display: 'flex',
   justifyContent: 'space-between',
-  borderTop: `1px solid ${theme.palette.divider}`
-}));
-const GridColumnsManagementEmptyText = (0, _styles.styled)('div')(({
-  theme
-}) => ({
-  padding: theme.spacing(0.5, 0),
-  color: theme.palette.grey[500]
-}));
+  borderTop: `1px solid ${_cssVariables.vars.colors.border.base}`
+});
+const GridColumnsManagementEmptyText = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementEmptyText'
+})({
+  padding: _cssVariables.vars.spacing(1, 0),
+  alignSelf: 'center',
+  fontSize: _cssVariables.vars.typography.body.fontSize
+});

package/components/containers/GridOverlay.js

@@ -14,6 +14,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -29,21 +30,18 @@ const useUtilityClasses = ownerState => {
 };
 const GridOverlayRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'Overlay',
-  overridesResolver: (_, styles) => styles.overlay
-})(({
-  theme
-}) => ({
+  slot: 'Overlay'
+})({
   width: '100%',
   height: '100%',
   display: 'flex',
-  gap: theme.spacing(1),
+  gap: _cssVariables.vars.spacing(1),
   flexDirection: 'column',
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: 'var(--unstable_DataGrid-overlayBackground)'
-}));
+  backgroundColor: _cssVariables.vars.colors.background.backdrop
+});
 const GridOverlay = exports.GridOverlay = (0, _forwardRef.forwardRef)(function GridOverlay(props, ref) {
   const {
       className

package/components/containers/GridRoot.js

@@ -15,6 +15,7 @@ var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _GridRootStyles = require("./GridRootStyles");
+var _context = require("../../utils/css/context");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -55,18 +56,19 @@ const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
   const handleRef = (0, _utils.unstable_useForkRef)(rootElementRef, ref, rootMountCallback);
   const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState, density);
+  const cssVariables = (0, _context.useCSSVariablesContext)();
   const isSSR = (0, _useIsSSR.useIsSSR)();
   if (isSSR) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, className),
+    className: (0, _clsx.default)(classes.root, className, cssVariables.className),
     ownerState: ownerState
   }, other, {
     ref: handleRef,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeader.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.GridBody, {
       children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.GridFooterPlaceholder, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.GridFooterPlaceholder, {}), cssVariables.tag]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {

package/components/containers/GridRootStyles.d.ts

@@ -1,6 +1,5 @@
-import { Theme } from '@mui/material/styles';
 import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export type OwnerState = DataGridProcessedProps;
-export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
+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>>, {}>;