diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 331ec624e5e8..d1c1f904a16d 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -441,7 +441,6 @@ "columnHeaders", "columnHeadersInner", "columnHeadersInner--scrollable", - "columnSeparator--resizable", "columnSeparator--resizing", "columnSeparator--sideLeft", "columnSeparator--sideRight", diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index 57271f54fb1c..ffe77678d4e4 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -405,7 +405,6 @@ "columnHeaders", "columnHeadersInner", "columnHeadersInner--scrollable", - "columnSeparator--resizable", "columnSeparator--resizing", "columnSeparator--sideLeft", "columnSeparator--sideRight", diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 269421b9abee..4b46684aedae 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -336,7 +336,6 @@ "columnHeaders", "columnHeadersInner", "columnHeadersInner--scrollable", - "columnSeparator--resizable", "columnSeparator--resizing", "columnSeparator--sideLeft", "columnSeparator--sideRight", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json index 62328c336953..91d306d8bc6b 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -365,11 +365,6 @@ "nodeName": "the column headers's inner element", "conditions": "there is a horizontal scrollbar" }, - "columnSeparator--resizable": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the column header separator", - "conditions": "the column is resizable" - }, "columnSeparator--resizing": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the column header separator", diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json index 6ed00e418dd2..10daf50e8de9 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -347,11 +347,6 @@ "nodeName": "the column headers's inner element", "conditions": "there is a horizontal scrollbar" }, - "columnSeparator--resizable": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the column header separator", - "conditions": "the column is resizable" - }, "columnSeparator--resizing": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the column header separator", diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index 093527bec3aa..5146c8356535 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -314,11 +314,6 @@ "nodeName": "the column headers's inner element", "conditions": "there is a horizontal scrollbar" }, - "columnSeparator--resizable": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the column header separator", - "conditions": "the column is resizable" - }, "columnSeparator--resizing": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the column header separator", diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index 28f49e8924b1..10ba31f569e2 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -252,7 +252,7 @@ export const useGridColumnResize = ( } // Skip if the column isn't resizable - if (!event.currentTarget.classList.contains(gridClasses['columnSeparator--resizable'])) { + if (!event.currentTarget.classList.contains(gridClasses.columnSeparator)) { return; } @@ -345,10 +345,7 @@ export const useGridColumnResize = ( }); const handleTouchStart = useEventCallback((event: any) => { - const cellSeparator = findParentElementFromClassName( - event.target, - gridClasses['columnSeparator--resizable'], - ); + const cellSeparator = findParentElementFromClassName(event.target, gridClasses.columnSeparator); // Let the event bubble if the target is not a col separator if (!cellSeparator) { return; diff --git a/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx index d40189b6e492..2ad39c945fde 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx @@ -170,9 +170,7 @@ describe(' - Column Headers', () => { clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); - const separator = columnToResizeCell.querySelector( - `.${gridClasses['columnSeparator--resizable']}`, - )!; + const separator = columnToResizeCell.querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator); clock.runToLast(); expect(screen.queryByRole('menu')).to.equal(null); diff --git a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx index 57a1a02ef3e9..feb3ca14ca4e 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx @@ -153,7 +153,7 @@ describe(' - Column pinning', () => { )!; expect(renderZone).toHaveInlineStyle({ transform: 'translate3d(100px, 0px, 0px)' }); const columnHeader = getColumnHeaderCell(0); - const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; + const separator = columnHeader.querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseUp(separator); @@ -172,7 +172,7 @@ describe(' - Column pinning', () => { )!; expect(columnHeadersInner).toHaveInlineStyle({ transform: 'translate3d(100px, 0px, 0px)' }); const columnHeader = getColumnHeaderCell(0); - const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; + const separator = columnHeader.querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseUp(separator); @@ -203,7 +203,7 @@ describe(' - Column pinning', () => { const columnHeader = getColumnHeaderCell(2); expect(columnHeader).toHaveInlineStyle({ width: '100px' }); - const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; + const separator = columnHeader.querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator, { clientX: 200 }); fireEvent.mouseMove(separator, { clientX: 190, buttons: 1 }); fireEvent.mouseUp(separator); @@ -221,7 +221,7 @@ describe(' - Column pinning', () => { const columnHeader = getColumnHeaderCell(2); expect(columnHeader).toHaveInlineStyle({ width: '100px' }); - const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; + const separator = columnHeader.querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator, { clientX: 200 }); fireEvent.mouseMove(separator, { clientX: 210, buttons: 1 }); fireEvent.mouseUp(separator); diff --git a/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx index e9454dca917f..9754e1a0134a 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx @@ -172,7 +172,7 @@ describe(' - Column Spanning', () => { expect(getColumnHeaderCell(1).offsetWidth).to.equal(100); expect(getCell(0, 0).offsetWidth).to.equal(200); - const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; + const separator = document.querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 200, buttons: 1 }); fireEvent.mouseUp(separator); diff --git a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx index cf971f4c1935..ad6b7f6ebfe2 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx @@ -93,7 +93,7 @@ describe(' - Columns', () => { it('should allow to resize columns with the mouse', () => { render(); - const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; + const separator = document.querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseUp(separator); @@ -107,7 +107,7 @@ describe(' - Columns', () => { this.skip(); } render(); - const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; + const separator = document.querySelector(`.${gridClasses.columnSeparator}`)!; const now = Date.now(); fireEvent.touchStart(separator, { changedTouches: [new Touch({ identifier: now, target: separator, clientX: 100 })], @@ -125,7 +125,7 @@ describe(' - Columns', () => { it('should call onColumnResize during resizing', () => { const onColumnResize = spy(); render(); - const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; + const separator = document.querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 }); @@ -138,7 +138,7 @@ describe(' - Columns', () => { it('should call onColumnWidthChange after resizing', () => { const onColumnWidthChange = spy(); render(); - const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; + const separator = document.querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 }); @@ -185,9 +185,7 @@ describe(' - Columns', () => { expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' }); expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - const separator = getColumnHeaderCell(1).querySelector( - `.${gridClasses['columnSeparator--resizable']}`, - )!; + const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -242,9 +240,7 @@ describe(' - Columns', () => { expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' }); expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - const separator = getColumnHeaderCell(1).querySelector( - `.${gridClasses['columnSeparator--resizable']}`, - )!; + const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -265,9 +261,7 @@ describe(' - Columns', () => { expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '98px' }); expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '200px' }); - const separator = getColumnHeaderCell(1).querySelector( - `.${gridClasses['columnSeparator--resizable']}`, - )!; + const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 50, buttons: 1 }); @@ -305,9 +299,7 @@ describe(' - Columns', () => { expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' }); expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - const separator = getColumnHeaderCell(1).querySelector( - `.${gridClasses['columnSeparator--resizable']}`, - )!; + const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -327,9 +319,7 @@ describe(' - Columns', () => { expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' }); - const separator = getColumnHeaderCell(0).querySelector( - `.${gridClasses['columnSeparator--resizable']}`, - )!; + const separator = getColumnHeaderCell(0).querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator, { clientX: 200 }); fireEvent.mouseMove(separator, { clientX: 100, buttons: 1 }); diff --git a/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx index 824cdbe06c80..6212b660c5dd 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx @@ -135,7 +135,7 @@ describe(' - Columns Visibility', () => { fireEvent.click(document.querySelector('[role="tooltip"] [name="id"]')!); expect(getColumnHeadersTextContent()).to.deep.equal(['id']); - const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; + const separator = document.querySelector(`.${gridClasses.columnSeparator}`)!; fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseUp(separator); diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx index ea85556f5675..78a38ef4b0a5 100644 --- a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx +++ b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx @@ -14,7 +14,6 @@ enum GridColumnHeaderSeparatorSides { } export interface GridColumnHeaderSeparatorProps extends React.HTMLAttributes { - resizable: boolean; resizing: boolean; height: number; side?: GridColumnHeaderSeparatorSides; @@ -25,12 +24,11 @@ type OwnerState = GridColumnHeaderSeparatorProps & { }; const useUtilityClasses = (ownerState: OwnerState) => { - const { resizable, resizing, classes, side } = ownerState; + const { resizing, classes, side } = ownerState; const slots = { root: [ 'columnSeparator', - resizable && 'columnSeparator--resizable', resizing && 'columnSeparator--resizing', side && `columnSeparator--side${capitalize(side)}`, ], @@ -41,13 +39,7 @@ const useUtilityClasses = (ownerState: OwnerState) => { }; function GridColumnHeaderSeparatorRaw(props: GridColumnHeaderSeparatorProps) { - const { - resizable, - resizing, - height, - side = GridColumnHeaderSeparatorSides.Right, - ...other - } = props; + const { resizing, height, side = GridColumnHeaderSeparatorSides.Right, ...other } = props; const rootProps = useGridRootProps(); const ownerState = { ...props, side, classes: rootProps.classes }; const classes = useUtilityClasses(ownerState); @@ -78,7 +70,6 @@ GridColumnHeaderSeparatorRaw.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- height: PropTypes.number.isRequired, - resizable: PropTypes.bool.isRequired, resizing: PropTypes.bool.isRequired, side: PropTypes.oneOf(['left', 'right']), } as any; diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx index 7382079ad97a..33342bb2f673 100644 --- a/packages/grid/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx +++ b/packages/grid/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx @@ -99,6 +99,7 @@ const GridGenericColumnHeaderItem = React.forwardRef(function GridGenericColumnH } }, [apiRef, hasFocus]); + const showColumnHeaderSeparator = !rootProps.disableColumnResize && !!resizable; return (
{columnMenuIconButton}
- + {showColumnHeaderSeparator ? ( + + ) : null} {columnMenu} ); diff --git a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts index f81c045ed837..42228ec1aea3 100644 --- a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts +++ b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts @@ -72,7 +72,6 @@ export const GridRootStyles = styled('div', { { [`& .${gridClasses.columnHeaderCheckbox}`]: styles.columnHeaderCheckbox }, { [`& .${gridClasses.columnHeaderDraggableContainer}`]: styles.columnHeaderDraggableContainer }, { [`& .${gridClasses.columnHeaderTitleContainer}`]: styles.columnHeaderTitleContainer }, - { [`& .${gridClasses['columnSeparator--resizable']}`]: styles['columnSeparator--resizable'] }, { [`& .${gridClasses['columnSeparator--resizing']}`]: styles['columnSeparator--resizing'] }, { [`& .${gridClasses.columnSeparator}`]: styles.columnSeparator }, { [`& .${gridClasses.filterIcon}`]: styles.filterIcon }, @@ -162,6 +161,7 @@ export const GridRootStyles = styled('div', { position: 'relative', display: 'flex', alignItems: 'center', + borderRight: '1px solid transparent', }, [`& .${gridClasses['columnHeader--sorted']} .${gridClasses.iconButtonContainer}, & .${gridClasses['columnHeader--filtered']} .${gridClasses.iconButtonContainer}`]: { @@ -246,19 +246,6 @@ export const GridRootStyles = styled('div', { flexDirection: 'column', justifyContent: 'center', color: borderColor, - }, - [`& .${gridClasses.columnHeaders}:hover .${gridClasses.columnSeparator}, .${gridClasses['columnSeparator--resizing']}`]: - { - visibility: 'visible', - width: 'auto', - }, - [`& .${gridClasses['columnSeparator--sideLeft']}`]: { - left: -12, - }, - [`& .${gridClasses['columnSeparator--sideRight']}`]: { - right: -12, - }, - [`& .${gridClasses['columnSeparator--resizable']}`]: { cursor: 'col-resize', touchAction: 'none', '&:hover': { @@ -275,6 +262,21 @@ export const GridRootStyles = styled('div', { pointerEvents: 'none', }, }, + [`& .${gridClasses.columnHeaders}:hover`]: { + [`& .${gridClasses.columnSeparator}, .${gridClasses['columnSeparator--resizing']}`]: { + visibility: 'visible', + width: 'auto', + }, + [`& .${gridClasses.columnHeader}`]: { + borderRightColor: `${borderColor}`, + }, + }, + [`& .${gridClasses['columnSeparator--sideLeft']}`]: { + left: -12, + }, + [`& .${gridClasses['columnSeparator--sideRight']}`]: { + right: -12, + }, [`& .${gridClasses.iconSeparator}`]: { color: 'inherit', }, @@ -422,14 +424,17 @@ export const GridRootStyles = styled('div', { }, [`.${gridClasses.withBorderColor}`]: { borderColor, + borderRightColor: 'transparent', }, [`& .${gridClasses['cell--withRightBorder']}`]: { borderRightWidth: '1px', borderRightStyle: 'solid', + borderRightColor: borderColor, }, [`& .${gridClasses['columnHeader--withRightBorder']}`]: { borderRightWidth: '1px', borderRightStyle: 'solid', + borderRightColor: borderColor, }, [`& .${gridClasses['cell--textLeft']}`]: { justifyContent: 'flex-start', diff --git a/packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx b/packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx index 313b5d1994d5..e5577893d55a 100644 --- a/packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx +++ b/packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { styled, SxProps, Theme } from '@mui/system'; +import { alpha, styled, darken, lighten, Theme, SxProps } from '@mui/material/styles'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; @@ -22,6 +22,15 @@ const useUtilityClasses = (ownerState: OwnerState) => { return composeClasses(slots, getDataGridUtilityClass, classes); }; +function getBorderColor(theme: Theme) { + if (theme.vars) { + return theme.vars.palette.TableCell.border; + } + if (theme.palette.mode === 'light') { + return lighten(alpha(theme.palette.divider, 1), 0.88); + } + return darken(alpha(theme.palette.divider, 1), 0.68); +} const GridToolbarContainerRoot = styled('div', { name: 'MuiDataGrid', @@ -32,7 +41,8 @@ const GridToolbarContainerRoot = styled('div', { alignItems: 'center', flexWrap: 'wrap', gap: theme.spacing(1), - padding: theme.spacing(0.5, 0.5, 0), + padding: theme.spacing(0.5, 0.5, 0.5), + borderBottom: `1px solid ${getBorderColor(theme)}`, })); const GridToolbarContainer = React.forwardRef( diff --git a/packages/grid/x-data-grid/src/constants/gridClasses.ts b/packages/grid/x-data-grid/src/constants/gridClasses.ts index 620e6ceb50c9..5e9f11895a99 100644 --- a/packages/grid/x-data-grid/src/constants/gridClasses.ts +++ b/packages/grid/x-data-grid/src/constants/gridClasses.ts @@ -192,10 +192,6 @@ export interface GridClasses { * 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. - */ - 'columnSeparator--resizable': string; /** * Styles applied to the column header separator if the column is being resized. */ @@ -585,7 +581,6 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [ 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', - 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', diff --git a/packages/grid/x-data-grid/src/material/icons/index.tsx b/packages/grid/x-data-grid/src/material/icons/index.tsx index bd0e790fc728..071b66557b5e 100644 --- a/packages/grid/x-data-grid/src/material/icons/index.tsx +++ b/packages/grid/x-data-grid/src/material/icons/index.tsx @@ -50,7 +50,7 @@ export const GridColumnIcon = createSvgIcon( 'ColumnIcon', ); -export const GridSeparatorIcon = createSvgIcon(, 'Separator'); +export const GridSeparatorIcon = createSvgIcon(, 'Separator'); export const GridViewHeadlineIcon = createSvgIcon( , diff --git a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx index f30ddb084a54..732ad5a47181 100644 --- a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx @@ -641,7 +641,7 @@ describe(' - Layout & Warnings', () => { expect( Array.from(document.querySelectorAll('[role="columnheader"]')).reduce( - (width, item) => width + item.clientWidth, + (width, item) => width + (item as HTMLElement).offsetWidth, 0, ), ).to.equal(totalWidth - 2);