@mui/x-data-grid 7.0.0-beta.6 → 7.0.0

package/components/toolbar/GridToolbarDensitySelector.js

@@ -5,7 +5,7 @@ import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
+import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
 import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -15,7 +15,6 @@ import { gridClasses } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
     slotProps = {}
   } = props;
@@ -23,7 +22,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   const tooltipProps = slotProps.tooltip || {};
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const densityValue = useGridSelector(apiRef, gridDensityValueSelector);
+  const density = useGridSelector(apiRef, gridDensitySelector);
   const densityButtonId = useId();
   const densityMenuId = useId();
   const [open, setOpen] = React.useState(false);
@@ -43,7 +42,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
     value: 'comfortable'
   }];
   const startIcon = React.useMemo(() => {
-    switch (densityValue) {
+    switch (density) {
       case 'compact':
         return /*#__PURE__*/_jsx(rootProps.slots.densityCompactIcon, {});
       case 'comfortable':
@@ -51,11 +50,10 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
       default:
         return /*#__PURE__*/_jsx(rootProps.slots.densityStandardIcon, {});
     }
-  }, [densityValue, rootProps]);
+  }, [density, rootProps]);
   const handleDensitySelectorOpen = event => {
-    var _buttonProps$onClick;
     setOpen(prevOpen => !prevOpen);
-    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
+    buttonProps.onClick?.(event);
   };
   const handleDensitySelectorClose = () => {
     setOpen(false);
@@ -79,7 +77,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   }
   const densityElements = densityOptions.map((option, index) => /*#__PURE__*/_jsxs(MenuItem, {
     onClick: () => handleDensityUpdate(option.value),
-    selected: option.value === densityValue,
+    selected: option.value === density,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
       children: option.icon
     }), option.label]
@@ -88,7 +86,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('toolbarDensityLabel'),
       enterDelay: 1000
-    }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         ref: handleRef,
         size: "small",
@@ -100,7 +98,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
         id: densityButtonId
       }, buttonProps, {
         onClick: handleDensitySelectorOpen
-      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+      }, rootProps.slotProps?.baseButton, {
         children: apiRef.current.getLocaleText('toolbarDensity')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

package/components/toolbar/GridToolbarExport.js

@@ -19,7 +19,7 @@ export function GridCsvExportMenuItem(props) {
   return /*#__PURE__*/_jsx(MenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsCsv(options);
-      hideMenu == null || hideMenu();
+      hideMenu?.();
     }
   }, other, {
     children: apiRef.current.getLocaleText('toolbarExportCSV')
@@ -35,7 +35,7 @@ export function GridPrintExportMenuItem(props) {
   return /*#__PURE__*/_jsx(MenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsPrint(options);
-      hideMenu == null || hideMenu();
+      hideMenu?.();
     }
   }, other, {
     children: apiRef.current.getLocaleText('toolbarExportPrint')

package/components/toolbar/GridToolbarExportContainer.js

@@ -11,7 +11,6 @@ import { gridClasses } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
     children,
     slotProps = {}
@@ -26,9 +25,8 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
   const buttonRef = React.useRef(null);
   const handleRef = useForkRef(ref, buttonRef);
   const handleMenuOpen = event => {
-    var _buttonProps$onClick;
     setOpen(prevOpen => !prevOpen);
-    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
+    buttonProps.onClick?.(event);
   };
   const handleMenuClose = () => setOpen(false);
   const handleListKeyDown = event => {
@@ -46,7 +44,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('toolbarExportLabel'),
       enterDelay: 1000
-    }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         ref: handleRef,
         size: "small",
@@ -58,7 +56,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
         id: exportButtonId
       }, buttonProps, {
         onClick: handleMenuOpen
-      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+      }, rootProps.slotProps?.baseButton, {
         children: apiRef.current.getLocaleText('toolbarExport')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

package/components/toolbar/GridToolbarFilterButton.js

@@ -34,7 +34,6 @@ const GridToolbarFilterListRoot = styled('ul', {
   padding: theme.spacing(0, 1)
 }));
 const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
     slotProps = {}
   } = props;
@@ -77,7 +76,6 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     });
   }, [apiRef, rootProps, preferencePanel.open, activeFilters, lookup, classes]);
   const toggleFilter = event => {
-    var _buttonProps$onClick;
     const {
       open,
       openedPanelValue
@@ -87,7 +85,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     } else {
       apiRef.current.showPreferences(GridPreferencePanelsValue.filters, filterPanelId, filterButtonId);
     }
-    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
+    buttonProps.onClick?.(event);
   };
 
   // Disable the button if the corresponding is disabled
@@ -98,7 +96,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: tooltipContentNode,
     enterDelay: 1000
-  }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
       ref: ref,
       id: filterButtonId,
@@ -114,7 +112,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
       })
     }, buttonProps, {
       onClick: toggleFilter
-    }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+    }, rootProps.slotProps?.baseButton, {
       children: apiRef.current.getLocaleText('toolbarFilters')
     }))
   }));

package/components/toolbar/GridToolbarQuickFilter.js

@@ -45,7 +45,6 @@ const GridToolbarQuickFilterRoot = styled(TextField, {
 const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
 const defaultSearchValueFormatter = values => values.join(' ');
 function GridToolbarQuickFilter(props) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
@@ -55,7 +54,7 @@ function GridToolbarQuickFilter(props) {
       debounceMs = rootProps.filterDebounceMs
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []));
+  const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
   const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
   React.useEffect(() => {
     if (!isDeepEqual(prevQuickFilterValuesRef.current, quickFilterValues)) {
@@ -63,7 +62,7 @@ function GridToolbarQuickFilter(props) {
       prevQuickFilterValuesRef.current = quickFilterValues;
 
       // Update the input value if needed to match the new model
-      setSearchValue(prevSearchValue => isDeepEqual(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []));
+      setSearchValue(prevSearchValue => isDeepEqual(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues ?? []));
     }
   }, [quickFilterValues, quickFilterFormatter, quickFilterParser]);
   const updateSearchValue = React.useCallback(newSearchValue => {
@@ -102,13 +101,13 @@ function GridToolbarQuickFilter(props) {
           visibility: searchValue ? 'visible' : 'hidden'
         },
         onClick: handleSearchReset
-      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+      }, rootProps.slotProps?.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
           fontSize: "small"
         })
       }))
     }, other.InputProps)
-  }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseTextField));
+  }, rootProps.slotProps?.baseTextField));
 }
 process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/virtualization/GridVirtualScrollbar.js

@@ -35,6 +35,8 @@ const ScrollbarVertical = styled(Scrollbar)({
   height: 'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-topContainerHeight) - var(--DataGrid-bottomContainerHeight) - var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize)))',
   overflowY: 'auto',
   overflowX: 'hidden',
+  // Disable focus-visible style, it's a scrollbar.
+  outline: 0,
   '& > div': {
     width: 'var(--size)'
   },
@@ -46,6 +48,8 @@ const ScrollbarHorizontal = styled(Scrollbar)({
   height: 'var(--size)',
   overflowY: 'hidden',
   overflowX: 'auto',
+  // Disable focus-visible style, it's a scrollbar.
+  outline: 0,
   '& > div': {
     height: 'var(--size)'
   },

package/components/virtualization/GridVirtualScroller.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { GridScrollArea } from '../GridScrollArea';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -66,7 +67,11 @@ function GridVirtualScroller(props) {
   return /*#__PURE__*/_jsxs(Container, _extends({
     className: classes.root
   }, getContainerProps(), {
-    children: [/*#__PURE__*/_jsxs(Scroller, _extends({
+    children: [/*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "left"
+    }), /*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "right"
+    }), /*#__PURE__*/_jsxs(Scroller, _extends({
       className: classes.scroller
     }, getScrollerProps(), {
       ownerState: rootProps,

package/components/virtualization/GridVirtualScrollerContent.js

@@ -21,9 +21,8 @@ const VirtualScrollerContentRoot = styled('div', {
   overridesResolver: (props, styles) => styles.virtualScrollerContent
 })({});
 const GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
-  var _props$style;
   const rootProps = useGridRootProps();
-  const overflowedContent = !rootProps.autoHeight && ((_props$style = props.style) == null ? void 0 : _props$style.minHeight) === 'auto';
+  const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
   const classes = useUtilityClasses(rootProps, overflowedContent);
   return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({
     ref: ref

package/components/virtualization/GridVirtualScrollerFiller.js

@@ -38,6 +38,7 @@ function GridVirtualScrollerFiller() {
     viewportOuterSize,
     minimumSize,
     hasScrollX,
+    hasScrollY,
     scrollbarSize,
     leftPinnedWidth,
     rightPinnedWidth
@@ -62,7 +63,7 @@ function GridVirtualScrollerFiller() {
     }), /*#__PURE__*/_jsx(Main, {}), rightPinnedWidth > 0 && /*#__PURE__*/_jsx(PinnedRight, {
       className: gridClasses['filler--pinnedRight'],
       style: {
-        width: rightPinnedWidth
+        width: rightPinnedWidth + (hasScrollY ? scrollbarSize : 0)
       }
     })]
   });

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -40,10 +40,9 @@ const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function Gri
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   const offsetTop = useGridSelector(apiRef, () => {
-    var _rowsMeta$positions$r;
     const renderContext = gridRenderContextSelector(apiRef);
     const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
-    return (_rowsMeta$positions$r = rowsMeta.positions[renderContext.firstRowIndex]) != null ? _rowsMeta$positions$r : 0;
+    return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
   });
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
     ref: ref,

package/constants/gridClasses.d.ts

@@ -148,14 +148,12 @@ export interface GridClasses {
      * Styles applied to the column header if the column has a filter applied to it.
      */
     'columnHeader--filtered': string;
+    'columnHeader--pinnedLeft': string;
+    'columnHeader--pinnedRight': string;
     /**
      * Styles applied to the column header element.
      */
     columnHeader: string;
-    /**
-     * Styles applied to the column group header element.
-     */
-    columnGroupHeader: string;
     /**
      * Styles applied to the header checkbox cell element.
      */
@@ -168,10 +166,6 @@ export interface GridClasses {
      * Styles applied to the row's draggable placeholder element inside the special row reorder cell.
      */
     rowReorderCellPlaceholder: string;
-    /**
-     * Styles applied to the column headers wrapper if a column is being dragged.
-     */
-    columnHeaderDropZone: string;
     /**
      * Styles applied to the column header's title element;
      */
@@ -192,22 +186,10 @@ export interface GridClasses {
      * Styles applied to the empty column group header cell.
      */
     'columnHeader--emptyGroup': string;
-    /**
-     * Styles applied to the column group header cell when show column border.
-     */
-    'columnHeader--showColumnBorder': string;
     /**
      * Styles applied to the column headers.
      */
     columnHeaders: string;
-    /**
-     * Styles applied to the column headers's inner element.
-     */
-    columnHeadersInner: string;
-    /**
-     * Styles applied to the column headers's inner element if there is a horizontal scrollbar.
-     */
-    'columnHeadersInner--scrollable': string;
     /**
      * Styles applied to the column header separator if the column is resizable.
      */
@@ -302,14 +284,17 @@ export interface GridClasses {
     editBooleanCell: string;
     /**
      * Styles applied to the filler row.
+     * @ignore - do not document.
      */
     filler: string;
     /**
      * Styles applied to the filler row pinned left section.
+     * @ignore - do not document.
      */
     'filler--pinnedLeft': string;
     /**
      * Styles applied to the filler row pinned right section.
+     * @ignore - do not document.
      */
     'filler--pinnedRight': string;
     /**
@@ -420,18 +405,6 @@ export interface GridClasses {
      * Styles applied to the pinned columns.
      */
     pinnedColumns: string;
-    /**
-     * Styles applied to the pinned column headers.
-     */
-    pinnedColumnHeaders: string;
-    /**
-     * Styles applied to the left pinned column headers.
-     */
-    'pinnedColumnHeaders--left': string;
-    /**
-     * Styles applied to the right pinned column headers.
-     */
-    'pinnedColumnHeaders--right': string;
     /**
      * Styles applied to the root element.
      */
@@ -582,6 +555,7 @@ export interface GridClasses {
      * Styles applied the column header if `showColumnVerticalBorder={true}`.
      */
     'columnHeader--withRightBorder': string;
+    'columnHeader--withLeftBorder': string;
     /**
      * Styles applied to the root of the grouping column of the tree data.
      */

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--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', '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', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', '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']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', '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', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { GridCellIndexCoordinates, GridScrollParams, GridColDef, GridCellCoordinates, GridCellParams, GridEditMode } from '../../../models';
 import { GridInitialStateCommunity } from '../../../models/gridStateCommunity';
 import { GridExportStateParams, GridRestoreStatePreProcessingContext, GridRestoreStatePreProcessingValue } from '../../features/statePersistence/gridStatePersistenceInterface';
-import { GridHydrateColumnsValue } from '../../features/columns/gridColumnsInterfaces';
+import { GridHydrateColumnsValue, GridPinnedColumnPosition } from '../../features/columns/gridColumnsInterfaces';
 import { GridRowEntry, GridRowId } from '../../../models/gridRows';
 import { GridHydrateRowsValue } from '../../features/rows/gridRowsInterfaces';
 import { GridPreferencePanelsValue } from '../../features/preferencesPanel';
@@ -75,6 +75,10 @@ export interface GridPipeProcessingLookup {
             editMode: GridEditMode;
         };
     };
+    isColumnPinned: {
+        value: GridPinnedColumnPosition | false;
+        context: string;
+    };
 }
 export type GridPipeProcessor<P extends GridPipeProcessorGroup> = (value: GridPipeProcessingLookup[P]['value'], context: GridPipeProcessingLookup[P] extends {
     context: any;

package/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -85,7 +85,6 @@ export const useGridStrategyProcessing = apiRef => {
     return processor(params);
   }, [apiRef]);
   const getActiveStrategy = React.useCallback(strategyGroup => {
-    var _availableStrategyEnt;
     const strategyEntries = Array.from(availableStrategies.current.entries());
     const availableStrategyEntry = strategyEntries.find(([, strategy]) => {
       if (strategy.group !== strategyGroup) {
@@ -93,7 +92,7 @@ export const useGridStrategyProcessing = apiRef => {
       }
       return strategy.isAvailable();
     });
-    return (_availableStrategyEnt = availableStrategyEntry == null ? void 0 : availableStrategyEntry[0]) != null ? _availableStrategyEnt : GRID_DEFAULT_STRATEGY;
+    return availableStrategyEntry?.[0] ?? GRID_DEFAULT_STRATEGY;
   }, []);
   const setStrategyAvailability = React.useCallback((strategyGroup, strategyName, isAvailable) => {
     availableStrategies.current.set(strategyName, {

package/hooks/core/useGridApiInitialization.js

@@ -12,8 +12,7 @@ export function unwrapPrivateAPI(publicApi) {
 }
 let globalId = 0;
 function createPrivateAPI(publicApiRef) {
-  var _publicApiRef$current;
-  const existingPrivateApi = (_publicApiRef$current = publicApiRef.current) == null ? void 0 : _publicApiRef$current[SYMBOL_API_PRIVATE];
+  const existingPrivateApi = publicApiRef.current?.[SYMBOL_API_PRIVATE];
   if (existingPrivateApi) {
     return existingPrivateApi;
   }
@@ -31,7 +30,7 @@ function createPrivateAPI(publicApiRef) {
     Object.keys(methods).forEach(methodName => {
       const method = methods[methodName];
       const currentPrivateMethod = privateApi[methodName];
-      if ((currentPrivateMethod == null ? void 0 : currentPrivateMethod.spying) === true) {
+      if (currentPrivateMethod?.spying === true) {
         currentPrivateMethod.target = method;
       } else {
         privateApi[methodName] = method;
@@ -39,7 +38,7 @@ function createPrivateAPI(publicApiRef) {
       if (visibility === 'public') {
         const publicApi = publicApiRef.current;
         const currentPublicMethod = publicApi[methodName];
-        if ((currentPublicMethod == null ? void 0 : currentPublicMethod.spying) === true) {
+        if (currentPublicMethod?.spying === true) {
           currentPublicMethod.target = method;
         } else {
           publicApi[methodName] = method;
@@ -69,7 +68,6 @@ function createPublicAPI(privateApiRef) {
   return publicApi;
 }
 export function useGridApiInitialization(inputApiRef, props) {
-  var _inputApiRef$current;
   const publicApiRef = React.useRef();
   const privateApiRef = React.useRef();
   if (!privateApiRef.current) {
@@ -100,7 +98,7 @@ export function useGridApiInitialization(inputApiRef, props) {
     subscribeEvent,
     publishEvent
   }, 'public');
-  if (inputApiRef && !((_inputApiRef$current = inputApiRef.current) != null && _inputApiRef$current.state)) {
+  if (inputApiRef && !inputApiRef.current?.state) {
     inputApiRef.current = publicApiRef.current;
   }
   React.useImperativeHandle(inputApiRef, () => publicApiRef.current, [publicApiRef]);

package/hooks/features/clipboard/useGridClipboard.js

@@ -30,9 +30,8 @@ function copyToClipboard(data) {
   }
 }
 function hasNativeSelection(element) {
-  var _window$getSelection;
   // When getSelection is called on an <iframe> that is not displayed Firefox will return null.
-  if ((_window$getSelection = window.getSelection()) != null && _window$getSelection.toString()) {
+  if (window.getSelection()?.toString()) {
     return true;
   }
 
@@ -51,7 +50,7 @@ function hasNativeSelection(element) {
  */
 export const useGridClipboard = (apiRef, props) => {
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
-  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   const handleCopy = React.useCallback(event => {
     if (!((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c' && !event.shiftKey && !event.altKey)) {
@@ -68,7 +67,8 @@ export const useGridClipboard = (apiRef, props) => {
       textToCopy = apiRef.current.getDataAsCsv({
         includeHeaders: false,
         // TODO: make it configurable
-        delimiter: clipboardCopyCellDelimiter
+        delimiter: clipboardCopyCellDelimiter,
+        shouldAppendQuotes: false
       });
     } else {
       const focusedCell = gridFocusCellSelector(apiRef);
@@ -76,7 +76,8 @@ export const useGridClipboard = (apiRef, props) => {
         const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
         textToCopy = serializeCellValue(cellParams, {
           delimiterCharacter: clipboardCopyCellDelimiter,
-          ignoreValueFormatter
+          ignoreValueFormatter,
+          shouldAppendQuotes: false
         });
       }
     }

package/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -4,19 +4,7 @@ import { createSelector, createSelectorMemoized } from '../../../utils/createSel
  * @ignore - do not document.
  */
 export const gridColumnGroupingSelector = state => state.columnGrouping;
-export const gridColumnGroupsUnwrappedModelSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => {
-  var _columnGrouping$unwra;
-  return (_columnGrouping$unwra = columnGrouping == null ? void 0 : columnGrouping.unwrappedGroupingModel) != null ? _columnGrouping$unwra : {};
-});
-export const gridColumnGroupsLookupSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => {
-  var _columnGrouping$looku;
-  return (_columnGrouping$looku = columnGrouping == null ? void 0 : columnGrouping.lookup) != null ? _columnGrouping$looku : {};
-});
-export const gridColumnGroupsHeaderStructureSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => {
-  var _columnGrouping$heade;
-  return (_columnGrouping$heade = columnGrouping == null ? void 0 : columnGrouping.headerStructure) != null ? _columnGrouping$heade : [];
-});
-export const gridColumnGroupsHeaderMaxDepthSelector = createSelector(gridColumnGroupingSelector, columnGrouping => {
-  var _columnGrouping$maxDe;
-  return (_columnGrouping$maxDe = columnGrouping == null ? void 0 : columnGrouping.maxDepth) != null ? _columnGrouping$maxDe : 0;
-});
+export const gridColumnGroupsUnwrappedModelSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.unwrappedGroupingModel ?? {});
+export const gridColumnGroupsLookupSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.lookup ?? {});
+export const gridColumnGroupsHeaderStructureSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.headerStructure ?? []);
+export const gridColumnGroupsHeaderMaxDepthSelector = createSelector(gridColumnGroupingSelector, columnGrouping => columnGrouping?.maxDepth ?? 0);

package/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -35,26 +35,22 @@ export const unwrapGroupingColumnModel = columnGroupingModel => {
   return unwrappedSubTree;
 };
 export const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel, pinnedFields) => {
-  const getParents = field => {
-    var _unwrappedGroupingMod;
-    return (_unwrappedGroupingMod = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod : [];
-  };
+  const getParents = field => unwrappedGroupingModel[field] ?? [];
   const groupingHeaderStructure = [];
   const maxDepth = Math.max(...orderedColumns.map(field => getParents(field).length));
   const haveSameParents = (field1, field2, depth) => isDeepEqual(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
   const haveDifferentContainers = (field1, field2) => {
-    if (pinnedFields != null && pinnedFields.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
+    if (pinnedFields?.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
       return true;
     }
-    if (pinnedFields != null && pinnedFields.right && !pinnedFields.right.includes(field1) && pinnedFields.right.includes(field2)) {
+    if (pinnedFields?.right && !pinnedFields.right.includes(field1) && pinnedFields.right.includes(field2)) {
       return true;
     }
     return false;
   };
   for (let depth = 0; depth < maxDepth; depth += 1) {
     const depthStructure = orderedColumns.reduce((structure, newField) => {
-      var _getParents$depth;
-      const groupId = (_getParents$depth = getParents(newField)[depth]) != null ? _getParents$depth : null;
+      const groupId = getParents(newField)[depth] ?? null;
       if (structure.length === 0) {
         return [{
           columnFields: [newField],