Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Store the outlined cell in the state #7111

Merged
merged 11 commits into from
Jan 6, 2023
Merged

[DataGrid] Store the outlined cell in the state #7111

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4babd8b
[DataGrid] Store in the state the cell outlined
m4theushw Dec 6, 2022
3199aea
Update migration guide
m4theushw Dec 7, 2022
55686c7
Merge branch 'next' into cell-outline
m4theushw Jan 2, 2023
7623bd9
Decrease specificity
m4theushw Jan 2, 2023
00bffba
Fix return type
m4theushw Jan 2, 2023
70cd4d4
Fix return tag
m4theushw Jan 3, 2023
9b36e02
Fix conflicts
m4theushw Jan 3, 2023
ee400ee
yarn prettier
m4theushw Jan 3, 2023
7535fc0
Fix feature showcase demo
m4theushw Jan 4, 2023
297b7ca
Add example with gridClasses
m4theushw Jan 4, 2023
c7ea049
Don't document new selectors
m4theushw Jan 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions docs/data/data-grid/events/events.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@
"params": "GridAggregationModel",
"event": "MuiEvent<{}>"
},
{
"projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
"name": "cellBlur",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need cellFocusIn/cellFocusOut events?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, for editing. cellBlur is tied to the blur DOM event, meaning that it's published every time a cell loses focus, including when the focus is lost to a portaled element inside the same cell. In the other hand, cellFocusOut is only published when focus state is updated. If a cell loses focus to an portaled element inside it, cellFocusOut is not published but cellBlur is.

"description": "Fired when a <code>blur</code> event happens in a cell.",
"params": "GridCellParams",
"event": "MuiEvent<React.FocusEvent<HTMLElement>>"
},
{
"projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
"name": "cellClick",
Expand Down Expand Up @@ -38,6 +45,13 @@
"event": "MuiEvent<MuiBaseEvent>",
"componentProp": "onCellEditStop"
},
{
"projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
"name": "cellFocus",
"description": "Fired when a <code>focus</code> event happens in a cell.",
"params": "GridCellParams",
"event": "MuiEvent<React.FocusEvent<HTMLElement>>"
},
{
"projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
"name": "cellFocusIn",
Expand Down
3 changes: 2 additions & 1 deletion docs/pages/x/api/data-grid/data-grid-premium.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
"experimentalFeatures": {
"type": {
"name": "shape",
"description": "{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool, warnIfFocusStateIsNotSynced?: bool }"
"description": "{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool }"
}
},
"filterMode": {
Expand Down Expand Up @@ -341,6 +341,7 @@
"cell--textLeft",
"cell--textRight",
"cell--withRenderer",
"cell--outlined",
"cell",
"cellContent",
"cellCheckbox",
Expand Down
3 changes: 2 additions & 1 deletion docs/pages/x/api/data-grid/data-grid-pro.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
"experimentalFeatures": {
"type": {
"name": "shape",
"description": "{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool, warnIfFocusStateIsNotSynced?: bool }"
"description": "{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool }"
}
},
"filterMode": {
Expand Down Expand Up @@ -319,6 +319,7 @@
"cell--textLeft",
"cell--textRight",
"cell--withRenderer",
"cell--outlined",
"cell",
"cellContent",
"cellCheckbox",
Expand Down
6 changes: 2 additions & 4 deletions docs/pages/x/api/data-grid/data-grid.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,7 @@
"editRowsModel": { "type": { "name": "object" } },
"error": { "type": { "name": "any" } },
"experimentalFeatures": {
"type": {
"name": "shape",
"description": "{ columnGrouping?: bool, warnIfFocusStateIsNotSynced?: bool }"
}
"type": { "name": "shape", "description": "{ columnGrouping?: bool }" }
},
"filterMode": {
"type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
Expand Down Expand Up @@ -263,6 +260,7 @@
"cell--textLeft",
"cell--textRight",
"cell--withRenderer",
"cell--outlined",
"cell",
"cellContent",
"cellCheckbox",
Expand Down
12 changes: 12 additions & 0 deletions docs/pages/x/api/data-grid/selectors.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@
"description": "",
"supportsApiRef": true
},
{
"name": "gridCellOutlineCellSelector",
"returnType": "GridCellIdentifier | null",
"description": "",
"supportsApiRef": true
},
{
"name": "gridColumnGroupsHeaderMaxDepthSelector",
"returnType": "number",
Expand Down Expand Up @@ -134,6 +140,12 @@
"description": "",
"supportsApiRef": false
},
{
"name": "gridOutlineStateSelector",
"returnType": "GridOutlineState",
"description": "",
"supportsApiRef": false
},
{
"name": "gridPageCountSelector",
"returnType": "number",
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid-premium-pt.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,11 @@
"nodeName": "the cell element",
"conditions": "the cell has a custom renderer"
},
"cell--outlined": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the cell element",
"conditions": "the cell is outlined"
},
"cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
"cellContent": {
"description": "Styles applied to {{nodeName}}.",
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid-premium-zh.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,11 @@
"nodeName": "the cell element",
"conditions": "the cell has a custom renderer"
},
"cell--outlined": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the cell element",
"conditions": "the cell is outlined"
},
"cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
"cellContent": {
"description": "Styles applied to {{nodeName}}.",
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid-premium.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,11 @@
"nodeName": "the cell element",
"conditions": "the cell has a custom renderer"
},
"cell--outlined": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the cell element",
"conditions": "the cell is outlined"
},
"cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
"cellContent": {
"description": "Styles applied to {{nodeName}}.",
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid-pro-pt.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,11 @@
"nodeName": "the cell element",
"conditions": "the cell has a custom renderer"
},
"cell--outlined": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the cell element",
"conditions": "the cell is outlined"
},
"cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
"cellContent": {
"description": "Styles applied to {{nodeName}}.",
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid-pro-zh.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,11 @@
"nodeName": "the cell element",
"conditions": "the cell has a custom renderer"
},
"cell--outlined": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the cell element",
"conditions": "the cell is outlined"
},
"cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
"cellContent": {
"description": "Styles applied to {{nodeName}}.",
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid-pro.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,11 @@
"nodeName": "the cell element",
"conditions": "the cell has a custom renderer"
},
"cell--outlined": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the cell element",
"conditions": "the cell is outlined"
},
"cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
"cellContent": {
"description": "Styles applied to {{nodeName}}.",
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid-pt.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,11 @@
"nodeName": "the cell element",
"conditions": "the cell has a custom renderer"
},
"cell--outlined": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the cell element",
"conditions": "the cell is outlined"
},
"cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
"cellContent": {
"description": "Styles applied to {{nodeName}}.",
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid-zh.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,11 @@
"nodeName": "the cell element",
"conditions": "the cell has a custom renderer"
},
"cell--outlined": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the cell element",
"conditions": "the cell is outlined"
},
"cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
"cellContent": {
"description": "Styles applied to {{nodeName}}.",
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,11 @@
"nodeName": "the cell element",
"conditions": "the cell has a custom renderer"
},
"cell--outlined": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the cell element",
"conditions": "the cell is outlined"
},
"cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
"cellContent": {
"description": "Styles applied to {{nodeName}}.",
Expand Down
1 change: 0 additions & 1 deletion packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,7 +284,6 @@ DataGridPremiumRaw.propTypes = {
columnGrouping: PropTypes.bool,
lazyLoading: PropTypes.bool,
rowPinning: PropTypes.bool,
warnIfFocusStateIsNotSynced: PropTypes.bool,
}),
/**
* Filtering can be processed on the server or client-side.
Expand Down
1 change: 0 additions & 1 deletion packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,6 @@ DataGridProRaw.propTypes = {
columnGrouping: PropTypes.bool,
lazyLoading: PropTypes.bool,
rowPinning: PropTypes.bool,
warnIfFocusStateIsNotSynced: PropTypes.bool,
}),
/**
* Filtering can be processed on the server or client-side.
Expand Down
1 change: 0 additions & 1 deletion packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,6 @@ DataGridRaw.propTypes = {
*/
experimentalFeatures: PropTypes.shape({
columnGrouping: PropTypes.bool,
warnIfFocusStateIsNotSynced: PropTypes.bool,
}),
/**
* Filtering can be processed on the server or client-side.
Expand Down
5 changes: 3 additions & 2 deletions packages/grid/x-data-grid/src/components/GridRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
GridEditRowsModel,
GridCellModes,
} from '../models/gridEditRowModel';
import { useGridApiContext } from '../hooks/utils/useGridApiContext';
import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
import { useGridRootProps } from '../hooks/utils/useGridRootProps';
import { DataGridProcessedProps } from '../models/props/DataGridProps';
Expand All @@ -33,6 +32,7 @@ import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRows
import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
import { randomNumberBetween } from '../utils/utils';
import { GridCellProps } from './cell/GridCell';
import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';

export interface GridRowProps {
rowId: GridRowId;
Expand Down Expand Up @@ -122,7 +122,7 @@ const GridRow = React.forwardRef<
onMouseLeave,
...other
} = props;
const apiRef = useGridApiContext();
const apiRef = useGridPrivateApiContext();
const ref = React.useRef<HTMLDivElement>(null);
const rootProps = useGridRootProps();
const currentPage = useGridVisibleRows(apiRef, rootProps);
Expand Down Expand Up @@ -354,6 +354,7 @@ const GridRow = React.forwardRef<
cellMode={cellParams.cellMode}
colIndex={cellProps.indexRelativeToAllColumns}
isEditable={cellParams.isEditable}
isOutlined={apiRef.current.isCellOutlined(rowId, column.field)}
hasFocus={hasFocus}
tabIndex={tabIndex}
className={clsx(classNames)}
Expand Down
Loading