Skip to content

Commit ec73831

Browse files
siriwatknpsiriwatknp
committed
[DataGrid] Add baseModal slot, route multiSelect popup through it
1 parent b1fae5a commit ec73831

15 files changed

Lines changed: 58 additions & 34 deletions

File tree

‎docs/pages/x/api/data-grid/data-grid-premium.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1067,6 +1067,12 @@
10671067
"default": "MenuItem",
10681068
"class": null
10691069
},
1070+
{
1071+
"name": "baseModal",
1072+
"description": "The custom Modal component used in the grid.",
1073+
"default": "Modal",
1074+
"class": null
1075+
},
10701076
{
10711077
"name": "baseTextField",
10721078
"description": "The custom TextField component used in the grid.",
@@ -2269,12 +2275,6 @@
22692275
"description": "Styles applied to the edit multi-select cell root element.",
22702276
"isGlobal": false
22712277
},
2272-
{
2273-
"key": "editMultiSelectCellValue",
2274-
"className": "MuiDataGridPremium-editMultiSelectCellValue",
2275-
"description": "Styles applied to the edit multi-select cell value display element.",
2276-
"isGlobal": false
2277-
},
22782278
{
22792279
"key": "filterForm",
22802280
"className": "MuiDataGridPremium-filterForm",

‎docs/pages/x/api/data-grid/data-grid-pro.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -861,6 +861,12 @@
861861
"default": "MenuItem",
862862
"class": null
863863
},
864+
{
865+
"name": "baseModal",
866+
"description": "The custom Modal component used in the grid.",
867+
"default": "Modal",
868+
"class": null
869+
},
864870
{
865871
"name": "baseTextField",
866872
"description": "The custom TextField component used in the grid.",
@@ -1817,12 +1823,6 @@
18171823
"description": "Styles applied to the edit multi-select cell root element.",
18181824
"isGlobal": false
18191825
},
1820-
{
1821-
"key": "editMultiSelectCellValue",
1822-
"className": "MuiDataGridPro-editMultiSelectCellValue",
1823-
"description": "Styles applied to the edit multi-select cell value display element.",
1824-
"isGlobal": false
1825-
},
18261826
{
18271827
"key": "filterForm",
18281828
"className": "MuiDataGridPro-filterForm",

‎docs/pages/x/api/data-grid/data-grid.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -694,6 +694,12 @@
694694
"default": "MenuItem",
695695
"class": null
696696
},
697+
{
698+
"name": "baseModal",
699+
"description": "The custom Modal component used in the grid.",
700+
"default": "Modal",
701+
"class": null
702+
},
697703
{
698704
"name": "baseTextField",
699705
"description": "The custom TextField component used in the grid.",
@@ -1638,12 +1644,6 @@
16381644
"description": "Styles applied to the edit multi-select cell root element.",
16391645
"isGlobal": false
16401646
},
1641-
{
1642-
"key": "editMultiSelectCellValue",
1643-
"className": "MuiDataGrid-editMultiSelectCellValue",
1644-
"description": "Styles applied to the edit multi-select cell value display element.",
1645-
"isGlobal": false
1646-
},
16471647
{
16481648
"key": "filterForm",
16491649
"className": "MuiDataGrid-filterForm",

‎docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1475,10 +1475,6 @@
14751475
"description": "Styles applied to {{nodeName}}.",
14761476
"nodeName": "the edit multi-select cell root element"
14771477
},
1478-
"editMultiSelectCellValue": {
1479-
"description": "Styles applied to {{nodeName}}.",
1480-
"nodeName": "the edit multi-select cell value display element"
1481-
},
14821478
"filterForm": {
14831479
"description": "Styles applied to {{nodeName}}.",
14841480
"nodeName": "the root of the filter form component"
@@ -1994,6 +1990,7 @@
19941990
"baseLinearProgress": "The custom LinearProgress component used in the grid.",
19951991
"baseMenuItem": "The custom MenuItem component used in the grid.",
19961992
"baseMenuList": "The custom MenuList component used in the grid.",
1993+
"baseModal": "The custom Modal component used in the grid.",
19971994
"basePagination": "The custom Pagination component used in the grid.",
19981995
"basePopper": "The custom Popper component used in the grid.",
19991996
"baseSelect": "The custom Select component used in the grid.",

‎docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1275,10 +1275,6 @@
12751275
"description": "Styles applied to {{nodeName}}.",
12761276
"nodeName": "the edit multi-select cell root element"
12771277
},
1278-
"editMultiSelectCellValue": {
1279-
"description": "Styles applied to {{nodeName}}.",
1280-
"nodeName": "the edit multi-select cell value display element"
1281-
},
12821278
"filterForm": {
12831279
"description": "Styles applied to {{nodeName}}.",
12841280
"nodeName": "the root of the filter form component"
@@ -1797,6 +1793,7 @@
17971793
"baseLinearProgress": "The custom LinearProgress component used in the grid.",
17981794
"baseMenuItem": "The custom MenuItem component used in the grid.",
17991795
"baseMenuList": "The custom MenuList component used in the grid.",
1796+
"baseModal": "The custom Modal component used in the grid.",
18001797
"basePagination": "The custom Pagination component used in the grid.",
18011798
"basePopper": "The custom Popper component used in the grid.",
18021799
"baseSelect": "The custom Select component used in the grid.",

‎docs/translations/api-docs/data-grid/data-grid/data-grid.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1074,10 +1074,6 @@
10741074
"description": "Styles applied to {{nodeName}}.",
10751075
"nodeName": "the edit multi-select cell root element"
10761076
},
1077-
"editMultiSelectCellValue": {
1078-
"description": "Styles applied to {{nodeName}}.",
1079-
"nodeName": "the edit multi-select cell value display element"
1080-
},
10811077
"filterForm": {
10821078
"description": "Styles applied to {{nodeName}}.",
10831079
"nodeName": "the root of the filter form component"
@@ -1596,6 +1592,7 @@
15961592
"baseLinearProgress": "The custom LinearProgress component used in the grid.",
15971593
"baseMenuItem": "The custom MenuItem component used in the grid.",
15981594
"baseMenuList": "The custom MenuList component used in the grid.",
1595+
"baseModal": "The custom Modal component used in the grid.",
15991596
"basePagination": "The custom Pagination component used in the grid.",
16001597
"basePopper": "The custom Popper component used in the grid.",
16011598
"baseSelect": "The custom Select component used in the grid.",

‎packages/x-data-grid-pro/src/components/cell/GridEditMultiSelectCell.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ import {
2929
import type { AutocompleteProps } from '@mui/x-data-grid/internals';
3030
import { autocompleteClasses } from '@mui/material/Autocomplete';
3131
import { inputBaseClasses } from '@mui/material/InputBase';
32-
import MUIModal from '@mui/material/Modal';
3332
import type { DataGridProProcessedProps } from '../../models/dataGridProProps';
3433
import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
3534
import { GridMultiSelectChips } from './GridMultiSelectChips';
@@ -271,13 +270,15 @@ function GridEditMultiSelectCell<V extends ValueOptions = ValueOptions>(
271270
// clicks on the cell focus the autocomplete which opens the editor.
272271
}}
273272
/>
274-
<MUIModal
273+
<rootProps.slots.baseModal
275274
open={showPopup}
276275
disableAutoFocus
277276
disableEnforceFocus
278277
disableRestoreFocus
279278
onClose={handleModalClose}
280-
slotProps={{ root: { style: { zIndex: 'auto' }}, backdrop: { invisible: true } }}
279+
material={{
280+
slotProps: { root: { style: { zIndex: 'auto' } }, backdrop: { invisible: true } },
281+
}}
281282
>
282283
<GridEditMultiSelectCellPopper
283284
as={rootProps.slots.basePopper}
@@ -321,7 +322,7 @@ function GridEditMultiSelectCell<V extends ValueOptions = ValueOptions>(
321322
/>
322323
</GridEditMultiSelectCellPopperContent>
323324
</GridEditMultiSelectCellPopper>
324-
</MUIModal>
325+
</rootProps.slots.baseModal>
325326
</React.Fragment>
326327
);
327328
}

‎packages/x-data-grid/src/material/augmentation.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import type { DividerProps } from '@mui/material/Divider';
77
import type { LinearProgressProps } from '@mui/material/LinearProgress';
88
import type { MenuListProps } from '@mui/material/MenuList';
99
import type { MenuItemProps } from '@mui/material/MenuItem';
10+
import type { ModalProps } from '@mui/material/Modal';
1011
import type { TextFieldProps } from '@mui/material/TextField';
1112
import type { SwitchProps } from '@mui/material/Switch';
1213
import type { ButtonProps } from '@mui/material/Button';
@@ -52,6 +53,9 @@ declare module '@mui/x-data-grid' {
5253
interface BaseMenuItemPropsOverrides {
5354
material?: Partial<MenuItemProps>;
5455
}
56+
interface BaseModalPropsOverrides {
57+
material?: Partial<ModalProps>;
58+
}
5559
interface BaseTextFieldPropsOverrides {
5660
material?: Partial<TextFieldProps>;
5761
}

‎packages/x-data-grid/src/material/index.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import MUIListItemText, { listItemTextClasses } from '@mui/material/ListItemText
1717
import type { MenuProps as MUIMenuProps } from '@mui/material/Menu';
1818
import MUIMenuList from '@mui/material/MenuList';
1919
import MUIMenuItem from '@mui/material/MenuItem';
20+
import MUIModal from '@mui/material/Modal';
2021
import MUITextField from '@mui/material/TextField';
2122
import MUITextareaAutosize from '@mui/material/TextareaAutosize';
2223
import MUIFormControl from '@mui/material/FormControl';
@@ -425,6 +426,11 @@ function BaseMenuItem(props: P['baseMenuItem']) {
425426
]);
426427
}
427428

429+
function BaseModal(props: P['baseModal']) {
430+
const { material, ...other } = props;
431+
return <MUIModal {...other} {...material} />;
432+
}
433+
428434
function BaseTextField(props: P['baseTextField']) {
429435
const { slotProps, material, ...other } = props;
430436
const theme = useTheme();
@@ -843,6 +849,7 @@ const baseSlots: GridBaseSlots = {
843849
baseLinearProgress: BaseLinearProgress,
844850
baseMenuList: BaseMenuList,
845851
baseMenuItem: BaseMenuItem,
852+
baseModal: BaseModal,
846853
baseTextField: BaseTextField,
847854
baseButton: BaseButton,
848855
baseIconButton: BaseIconButton,

‎packages/x-data-grid/src/models/gridBaseSlots.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,16 @@ export type PopperProps = CommonProps & {
264264
placement?: Placement;
265265
};
266266

267+
export type ModalProps = CommonProps & {
268+
open: boolean;
269+
children: React.ReactElement<unknown>;
270+
onClose?: (event: object, reason: 'backdropClick' | 'escapeKeyDown') => void;
271+
keepMounted?: boolean;
272+
disableAutoFocus?: boolean;
273+
disableEnforceFocus?: boolean;
274+
disableRestoreFocus?: boolean;
275+
};
276+
267277
export type CircularProgressProps = CommonProps & {
268278
/**
269279
* Pixels or CSS value.

0 commit comments

Comments
 (0)