From 635481b794fc80846d4d001a28ba5856adedd857 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 23 Jan 2024 11:58:49 -0500 Subject: [PATCH 01/13] refactor: add slot typings --- .../src/models/gridSlotsComponent.ts | 72 +++++----- .../src/models/gridSlotsComponentsProps.ts | 123 ++++++++++-------- 2 files changed, 104 insertions(+), 91 deletions(-) diff --git a/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts b/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts index edc4a7247504..5d4b6ab35c31 100644 --- a/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts +++ b/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts @@ -1,77 +1,73 @@ import * as React from 'react'; +import type { GridSlotProps } from './gridSlotsComponentsProps'; import type { GridIconSlotsComponent } from './gridIconSlotsComponent'; -import type { GridRowProps } from '../components/GridRow'; -import type { GridDetailPanelsProps } from '../components/GridDetailPanels'; -import type { GridPinnedRowsProps } from '../components/GridPinnedRows'; -import type { GridColumnHeadersProps } from '../components/GridColumnHeaders'; -// TODO: Convert all `any` to `Props & PropsOverrides` export interface GridBaseSlots { /** * The custom Checkbox component used in the grid for both header and cells. * @default Checkbox */ - baseCheckbox: React.JSXElementConstructor; + baseCheckbox: React.JSXElementConstructor; /** * The custom Chip component used in the grid. * @default Chip */ - baseChip: React.JSXElementConstructor; + baseChip: React.JSXElementConstructor; /** * The custom InputAdornment component used in the grid. * @default InputAdornment */ - baseInputAdornment: React.JSXElementConstructor; + baseInputAdornment: React.JSXElementConstructor; /** * The custom TextField component used in the grid. * @default TextField */ - baseTextField: React.JSXElementConstructor; + baseTextField: React.JSXElementConstructor; /** * The custom FormControl component used in the grid. * @default FormControl */ - baseFormControl: React.JSXElementConstructor; + baseFormControl: React.JSXElementConstructor; /** * The custom Select component used in the grid. * @default Select */ - baseSelect: React.JSXElementConstructor; + baseSelect: React.JSXElementConstructor; /** * The custom Switch component used in the grid. * @default Switch */ - baseSwitch: React.JSXElementConstructor; + baseSwitch: React.JSXElementConstructor; /** * The custom Button component used in the grid. * @default Button */ - baseButton: React.JSXElementConstructor; + baseButton: React.JSXElementConstructor; /** * The custom IconButton component used in the grid. * @default IconButton */ - baseIconButton: React.JSXElementConstructor; + baseIconButton: React.JSXElementConstructor; /** * The custom Tooltip component used in the grid. * @default Tooltip */ - baseTooltip: React.JSXElementConstructor; + baseTooltip: React.JSXElementConstructor; /** * The custom Popper component used in the grid. * @default Popper */ - basePopper: React.JSXElementConstructor; + basePopper: React.JSXElementConstructor; /** * The custom InputLabel component used in the grid. * @default InputLabel */ - baseInputLabel: React.JSXElementConstructor; + baseInputLabel: React.JSXElementConstructor; /** * The custom SelectOption component used in the grid. * @default MenuItem */ - baseSelectOption: React.JSXElementConstructor; + baseSelectOption: React.JSXElementConstructor; } /** @@ -82,95 +78,97 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen * The custom Chip component used in the grid. * @default Chip */ - baseChip: React.JSXElementConstructor; + baseChip: React.JSXElementConstructor; /** * Component rendered for each cell. * @default GridCell */ - cell: React.JSXElementConstructor; + cell: React.JSXElementConstructor; /** * Component rendered for each skeleton cell. * @default GridSkeletonCell */ - skeletonCell: React.JSXElementConstructor; + skeletonCell: React.JSXElementConstructor; /** * Filter icon component rendered in each column header. * @default GridColumnHeaderFilterIconButton */ - columnHeaderFilterIconButton: React.JSXElementConstructor; + columnHeaderFilterIconButton: React.JSXElementConstructor< + GridSlotProps['columnHeaderFilterIconButton'] + >; /** * Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers. * @default GridColumnMenu */ - columnMenu: React.JSXElementConstructor; + columnMenu: React.JSXElementConstructor; /** * Component responsible for rendering the column headers. * @default DataGridColumnHeaders */ - columnHeaders: React.JSXElementConstructor; + columnHeaders: React.JSXElementConstructor; /** * Component responsible for rendering the detail panels. * @default GridDetailPanels */ - detailPanels: React.JSXElementConstructor; + detailPanels: React.JSXElementConstructor; /** * Footer component rendered at the bottom of the grid viewport. * @default GridFooter */ - footer: React.JSXElementConstructor; + footer: React.JSXElementConstructor; /** * Row count component rendered in the footer * @default GridRowCount */ - footerRowCount: React.JSXElementConstructor; + footerRowCount: React.JSXElementConstructor; /** * Toolbar component rendered inside the Header component. * @default null */ - toolbar: React.JSXElementConstructor | null; + toolbar: React.JSXElementConstructor | null; /** * Pinned rows container. * @ignore - do not document */ - pinnedRows: React.JSXElementConstructor; + pinnedRows: React.JSXElementConstructor; /** * Loading overlay component rendered when the grid is in a loading state. * @default GridLoadingOverlay */ - loadingOverlay: React.JSXElementConstructor; + loadingOverlay: React.JSXElementConstructor; /** * No results overlay component rendered when the grid has no results after filtering. * @default GridNoResultsOverlay */ - noResultsOverlay: React.JSXElementConstructor; + noResultsOverlay: React.JSXElementConstructor; /** * No rows overlay component rendered when the grid has no rows. * @default GridNoRowsOverlay */ - noRowsOverlay: React.JSXElementConstructor; + noRowsOverlay: React.JSXElementConstructor; /** * Pagination component rendered in the grid footer by default. * @default Pagination */ - pagination: React.JSXElementConstructor | null; + pagination: React.JSXElementConstructor | null; /** * Filter panel component rendered when clicking the filter button. * @default GridFilterPanel */ - filterPanel: React.JSXElementConstructor; + filterPanel: React.JSXElementConstructor; /** * GridColumns panel component rendered when clicking the columns button. * @default GridColumnsPanel */ - columnsPanel: React.JSXElementConstructor; + columnsPanel: React.JSXElementConstructor; /** * Panel component wrapping the filters and columns panels. * @default GridPanel */ - panel: React.JSXElementConstructor; + panel: React.JSXElementConstructor; /** * Component rendered for each row. * @default GridRow */ - row: React.JSXElementConstructor; + row: React.JSXElementConstructor; } diff --git a/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts index d538fe1fe53a..ff93565ac488 100644 --- a/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts +++ b/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts @@ -1,26 +1,31 @@ import * as React from 'react'; -import { CheckboxProps } from '@mui/material/Checkbox'; -import { TextFieldProps } from '@mui/material/TextField'; -import { FormControlProps } from '@mui/material/FormControl'; -import { SelectProps } from '@mui/material/Select'; -import { SwitchProps } from '@mui/material/Switch'; -import { ButtonProps } from '@mui/material/Button'; -import { IconButtonProps } from '@mui/material/IconButton'; -import { TooltipProps } from '@mui/material/Tooltip'; +import type { CheckboxProps } from '@mui/material/Checkbox'; +import type { TextFieldProps } from '@mui/material/TextField'; +import type { FormControlProps } from '@mui/material/FormControl'; +import type { SelectProps } from '@mui/material/Select'; +import type { SwitchProps } from '@mui/material/Switch'; +import type { ButtonProps } from '@mui/material/Button'; +import type { IconButtonProps } from '@mui/material/IconButton'; +import type { InputAdornmentProps } from '@mui/material/InputAdornment'; +import type { TooltipProps } from '@mui/material/Tooltip'; import type { InputLabelProps } from '@mui/material/InputLabel'; -import { PopperProps } from '@mui/material/Popper'; -import { TablePaginationProps } from '@mui/material/TablePagination'; -import { ChipProps } from '@mui/material/Chip'; -import { GridToolbarProps } from '../components/toolbar/GridToolbar'; -import { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton'; -import { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps'; -import { GridColumnsPanelProps } from '../components/panel/GridColumnsPanel'; -import { GridFilterPanelProps } from '../components/panel/filterPanel/GridFilterPanel'; -import { GridFooterContainerProps } from '../components/containers/GridFooterContainer'; -import { GridOverlayProps } from '../components/containers/GridOverlay'; -import { GridPanelProps } from '../components/panel/GridPanel'; +import type { PopperProps } from '@mui/material/Popper'; +import type { TablePaginationProps } from '@mui/material/TablePagination'; +import type { ChipProps } from '@mui/material/Chip'; +import type { GridToolbarProps } from '../components/toolbar/GridToolbar'; +import type { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton'; +import type { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps'; +import type { GridColumnsPanelProps } from '../components/panel/GridColumnsPanel'; +import type { GridFilterPanelProps } from '../components/panel/filterPanel/GridFilterPanel'; +import type { GridFooterContainerProps } from '../components/containers/GridFooterContainer'; +import type { GridOverlayProps } from '../components/containers/GridOverlay'; +import type { GridPanelProps } from '../components/panel/GridPanel'; +import type { GridSkeletonCellProps } from '../components/cell/GridSkeletonCell'; import type { GridRowProps } from '../components/GridRow'; import type { GridCellProps } from '../components/cell/GridCell'; +import type { GridColumnHeadersProps } from '../components/GridColumnHeaders'; +import type { GridDetailPanelsProps } from '../components/GridDetailPanels'; +import type { GridPinnedRowsProps } from '../components/GridPinnedRows'; import type { GridRowCountProps } from '../components'; // Overrides for module augmentation @@ -31,6 +36,7 @@ export interface BaseSelectPropsOverrides {} export interface BaseSwitchPropsOverrides {} export interface BaseButtonPropsOverrides {} export interface BaseIconButtonPropsOverrides {} +export interface BaseInputAdornmentPropsOverrides {} export interface BaseTooltipPropsOverrides {} export interface BasePopperPropsOverrides {} export interface BaseInputLabelPropsOverrides {} @@ -41,6 +47,7 @@ export interface ToolbarPropsOverrides {} export interface ColumnHeaderFilterIconButtonPropsOverrides {} export interface ColumnMenuPropsOverrides {} export interface ColumnsPanelPropsOverrides {} +export interface DetailPanelsPropsOverrides {} export interface FilterPanelPropsOverrides {} export interface FooterPropsOverrides {} export interface FooterRowCountOverrides {} @@ -49,44 +56,52 @@ export interface LoadingOverlayPropsOverrides {} export interface NoResultsOverlayPropsOverrides {} export interface NoRowsOverlayPropsOverrides {} export interface PanelPropsOverrides {} +export interface PinnedRowsPropsOverrides {} +export interface SkeletonCellPropsOverrides {} export interface RowPropsOverrides {} -type SlotProps = Partial; +export interface GridSlotProps { + baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides; + baseTextField: TextFieldProps & BaseTextFieldPropsOverrides; + baseFormControl: FormControlProps & BaseFormControlPropsOverrides; + baseSelect: SelectProps & BaseSelectPropsOverrides; + baseSwitch: SwitchProps & BaseSwitchPropsOverrides; + baseButton: ButtonProps & BaseButtonPropsOverrides; + baseIconButton: IconButtonProps & BaseIconButtonPropsOverrides; + basePopper: PopperProps & BasePopperPropsOverrides; + baseTooltip: TooltipProps & BaseTooltipPropsOverrides; + baseInputLabel: InputLabelProps & BaseInputLabelPropsOverrides; + baseInputAdornment: InputAdornmentProps & BaseInputAdornmentPropsOverrides; + baseSelectOption: { + native: boolean; + value: any; + children?: React.ReactNode; + } & BaseSelectOptionPropsOverrides; + baseChip: ChipProps & BaseChipPropsOverrides; + cell: GridCellProps & CellPropsOverrides; + columnHeaders: GridColumnHeadersProps; + columnHeaderFilterIconButton: ColumnHeaderFilterIconButtonProps & + ColumnHeaderFilterIconButtonPropsOverrides; + columnMenu: GridColumnMenuProps & ColumnMenuPropsOverrides; + columnsPanel: GridColumnsPanelProps & ColumnsPanelPropsOverrides; + detailPanels: GridDetailPanelsProps & DetailPanelsPropsOverrides; + filterPanel: GridFilterPanelProps & FilterPanelPropsOverrides; + footer: GridFooterContainerProps & FooterPropsOverrides; + footerRowCount: GridRowCountProps & FooterRowCountOverrides; + loadingOverlay: GridOverlayProps & LoadingOverlayPropsOverrides; + noResultsOverlay: GridOverlayProps & NoResultsOverlayPropsOverrides; + noRowsOverlay: GridOverlayProps & NoRowsOverlayPropsOverrides; + pagination: TablePaginationProps & PaginationPropsOverrides; + panel: GridPanelProps & PanelPropsOverrides; + pinnedRows: GridPinnedRowsProps & PinnedRowsPropsOverrides; + row: GridRowProps & RowPropsOverrides; + skeletonCell: GridSkeletonCellProps & SkeletonCellPropsOverrides; + toolbar: GridToolbarProps & ToolbarPropsOverrides; +} /** * Overridable components props dynamically passed to the component at rendering. */ -export interface GridSlotsComponentsProps { - baseCheckbox?: SlotProps; - baseTextField?: SlotProps; - baseFormControl?: SlotProps; - baseSelect?: SlotProps; - baseSwitch?: SlotProps; - baseButton?: SlotProps; - baseIconButton?: SlotProps; - basePopper?: SlotProps; - baseTooltip?: SlotProps; - baseInputLabel?: SlotProps; - baseSelectOption?: SlotProps< - { native: boolean; value: any; children?: React.ReactNode }, - BaseSelectOptionPropsOverrides - >; - baseChip?: SlotProps; - cell?: SlotProps; - columnHeaderFilterIconButton?: SlotProps< - ColumnHeaderFilterIconButtonProps, - ColumnHeaderFilterIconButtonPropsOverrides - >; - columnMenu?: SlotProps; - columnsPanel?: SlotProps; - filterPanel?: SlotProps; - footer?: SlotProps; - footerRowCount?: SlotProps; - loadingOverlay?: SlotProps; - noResultsOverlay?: SlotProps; - noRowsOverlay?: SlotProps; - pagination?: SlotProps; - panel?: SlotProps; - row?: SlotProps; - toolbar?: SlotProps; -} +export type GridSlotsComponentsProps = Partial<{ + [K in keyof GridSlotProps]: Partial; +}>; From 85bd4583c42e018dbe74226641f125b2510361ad Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Wed, 24 Jan 2024 10:41:56 -0500 Subject: [PATCH 02/13] fix: typings --- docs/data/data-grid/components/CustomColumnMenu.tsx | 3 ++- .../data-grid/components/CustomLoadingOverlayGrid.tsx | 4 ++-- docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx | 3 ++- docs/data/data-grid/editing/StartEditButtonGrid.tsx | 3 ++- .../data-grid/filtering/CustomFilterPanelPosition.tsx | 3 ++- .../data/data-grid/row-updates/InfiniteLoadingGrid.tsx | 4 ++-- docs/data/data-grid/state/RestoreStateInitialState.tsx | 3 ++- .../src/DataGridPremium/DataGridPremium.tsx | 1 + .../x-data-grid-pro/src/DataGridPro/DataGridPro.tsx | 1 + .../headerFiltering/GridHeaderFilterMenuContainer.tsx | 7 +++++-- packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx | 1 + .../grid/x-data-grid/src/components/GridFooter.tsx | 2 +- packages/grid/x-data-grid/src/components/GridRow.tsx | 2 +- .../src/components/base/GridFooterPlaceholder.tsx | 2 +- .../columnSelection/GridCellCheckboxRenderer.tsx | 4 ++-- .../components/columnSelection/GridHeaderCheckbox.tsx | 2 +- .../components/panel/filterPanel/GridFilterForm.tsx | 6 +++--- .../panel/filterPanel/GridFilterInputBoolean.tsx | 4 ++-- .../panel/filterPanel/GridFilterInputSingleSelect.tsx | 6 +++--- .../src/constants/defaultGridSlotsComponents.ts | 2 +- packages/grid/x-data-grid/src/joy/joySlots.tsx | 10 +++++----- .../x-data-grid/src/tests/filtering.DataGrid.test.tsx | 5 +++-- scripts/x-data-grid-premium.exports.json | 8 +++++++- scripts/x-data-grid-pro.exports.json | 8 +++++++- scripts/x-data-grid.exports.json | 8 +++++++- 25 files changed, 66 insertions(+), 36 deletions(-) diff --git a/docs/data/data-grid/components/CustomColumnMenu.tsx b/docs/data/data-grid/components/CustomColumnMenu.tsx index 70275eb92d00..9a0a7fa8d4f3 100644 --- a/docs/data/data-grid/components/CustomColumnMenu.tsx +++ b/docs/data/data-grid/components/CustomColumnMenu.tsx @@ -10,6 +10,7 @@ import { GridColumnMenuSortItem, useGridApiRef, DataGridPro, + GridSlots, } from '@mui/x-data-grid-pro'; import StarOutlineIcon from '@mui/icons-material/StarOutline'; @@ -119,7 +120,7 @@ export default function CustomColumnMenu() { }, ]} slots={{ - columnMenu: CustomColumnMenuComponent, + columnMenu: CustomColumnMenuComponent as GridSlots['columnMenu'], }} slotProps={{ columnMenu: { color }, diff --git a/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx b/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx index fef9a8145a76..c278f02c68a4 100644 --- a/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx +++ b/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DataGrid } from '@mui/x-data-grid'; +import { DataGrid, GridSlots } from '@mui/x-data-grid'; import LinearProgress from '@mui/material/LinearProgress'; import { useDemoData } from '@mui/x-data-grid-generator'; @@ -14,7 +14,7 @@ export default function CustomLoadingOverlayGrid() {
setCellModesModel(model)} slots={{ - toolbar: EditToolbar, + toolbar: EditToolbar as GridSlots['toolbar'], }} slotProps={{ toolbar: { diff --git a/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx b/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx index 65f85ed66171..2f686357b240 100644 --- a/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx +++ b/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { DataGrid, + GridSlots, GridToolbarContainer, GridToolbarFilterButton, } from '@mui/x-data-grid'; @@ -35,7 +36,7 @@ export default function CustomFilterPanelPosition() {
diff --git a/docs/data/data-grid/state/RestoreStateInitialState.tsx b/docs/data/data-grid/state/RestoreStateInitialState.tsx index 7e576cec4eb9..d953a4a8e5a5 100644 --- a/docs/data/data-grid/state/RestoreStateInitialState.tsx +++ b/docs/data/data-grid/state/RestoreStateInitialState.tsx @@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack'; import { DataGridPro, GridInitialState, + GridSlots, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarFilterButton, @@ -62,7 +63,7 @@ export default function RestoreStateInitialState() { diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index d0b6b900bd9f..59f15f197ed9 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -22,6 +22,7 @@ import { } from '../models/dataGridPremiumProps'; import { useDataGridPremiumProps } from './useDataGridPremiumProps'; import { getReleaseInfo } from '../utils/releaseInfo'; +export type { GridPremiumSlotsComponent as GridSlots } from '../models'; const releaseInfo = getReleaseInfo(); diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index f1c58395989a..b73b7a2a8e04 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -15,6 +15,7 @@ import { DataGridProProps } from '../models/dataGridProProps'; import { useDataGridProProps } from './useDataGridProProps'; import { getReleaseInfo } from '../utils/releaseInfo'; import { propValidatorsDataGridPro } from '../internals/propValidation'; +export type { GridProSlotsComponent as GridSlots } from '../models'; const releaseInfo = getReleaseInfo(); diff --git a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx b/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx index 4e89cdfd4d6c..ac8188dd7226 100644 --- a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx +++ b/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx @@ -53,13 +53,16 @@ function GridHeaderFilterMenuContainer(props: { return null; } + const label = apiRef.current.getLocaleText('filterPanelOperator'); + const labelString = label ? String(label) : undefined; + return ( [] = [ ...propValidatorsDataGrid, diff --git a/packages/grid/x-data-grid/src/components/GridFooter.tsx b/packages/grid/x-data-grid/src/components/GridFooter.tsx index 8a013ae22b22..940697a2f697 100644 --- a/packages/grid/x-data-grid/src/components/GridFooter.tsx +++ b/packages/grid/x-data-grid/src/components/GridFooter.tsx @@ -38,7 +38,7 @@ const GridFooter = React.forwardRef(fu const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && ( - + ); return ( diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 0dc98c5bcaba..b4f9c9b6eee1 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -389,7 +389,7 @@ const GridRow = React.forwardRef(function GridRow( width={width} contentWidth={contentWidth} field={column.field} - align={column.align} + align={column.align ?? 'left'} /> ); } diff --git a/packages/grid/x-data-grid/src/components/base/GridFooterPlaceholder.tsx b/packages/grid/x-data-grid/src/components/base/GridFooterPlaceholder.tsx index 5974991f1bf8..ac755a5f2a23 100644 --- a/packages/grid/x-data-grid/src/components/base/GridFooterPlaceholder.tsx +++ b/packages/grid/x-data-grid/src/components/base/GridFooterPlaceholder.tsx @@ -8,5 +8,5 @@ export function GridFooterPlaceholder() { return null; } - return ; + return ; } diff --git a/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx index 7353974fabb9..83a922a3048f 100644 --- a/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx +++ b/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx @@ -96,7 +96,7 @@ const GridCellCheckboxForwardRef = React.forwardRef diff --git a/packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx b/packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx index b62cc90fed94..10a9afae0135 100644 --- a/packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx +++ b/packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx @@ -131,7 +131,7 @@ const GridHeaderCheckbox = React.forwardRef( }, [item, currentColumn]); const changeColumn = React.useCallback( - (event: SelectChangeEvent) => { + (event: SelectChangeEvent) => { const field = event.target.value as string; const column = apiRef.current.getColumn(field)!; @@ -369,7 +369,7 @@ const GridFilterForm = React.forwardRef( ); const changeOperator = React.useCallback( - (event: SelectChangeEvent) => { + (event: SelectChangeEvent) => { const operator = event.target.value as string; const newOperator = currentColumn?.filterOperators!.find((op) => op.value === operator); @@ -388,7 +388,7 @@ const GridFilterForm = React.forwardRef( ); const changeLogicOperator = React.useCallback( - (event: SelectChangeEvent) => { + (event: SelectChangeEvent) => { const logicOperator = (event.target.value as string) === GridLogicOperator.And.toString() ? GridLogicOperator.And diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx index 32c79a69e6b7..96818381042c 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx @@ -80,12 +80,12 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) { id={selectId} label={label} value={filterValueState} - onChange={onFilterChange} + onChange={onFilterChange as any /* FIXME: typing error */} variant="standard" native={isSelectNative} displayEmpty inputProps={{ ref: focusElementRef, tabIndex }} - {...others} + {...others as any /* FIXME: typing error */} {...baseSelectProps} > { + (event: SelectChangeEvent) => { let value = event.target.value; // NativeSelect casts the value to a string. @@ -137,7 +137,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) { label={label} labelId={labelId} value={filterValue} - onChange={onFilterChange} + onChange={onFilterChange as any /* FIXME: typing error */} variant="standard" type={type || 'text'} inputProps={{ @@ -146,7 +146,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) { placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder'), }} native={isSelectNative} - {...others} + {...others as any /* FIXME: typing error */} {...rootProps.slotProps?.baseSelect} > {renderSingleSelectOptions({ diff --git a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts index 89a645bbf5ae..34fe4a92caeb 100644 --- a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts +++ b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts @@ -37,7 +37,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS: GridSlotsComponent = { loadingOverlay: GridLoadingOverlay, noResultsOverlay: GridNoResultsOverlay, noRowsOverlay: GridNoRowsOverlay, - pagination: GridPagination, + pagination: GridPagination as React.JSXElementConstructor /* FIXME: typing error */, filterPanel: GridFilterPanel, columnsPanel: GridColumnsPanel, panel: GridPanel, diff --git a/packages/grid/x-data-grid/src/joy/joySlots.tsx b/packages/grid/x-data-grid/src/joy/joySlots.tsx index 7e245b918065..be151d2f7ad6 100644 --- a/packages/grid/x-data-grid/src/joy/joySlots.tsx +++ b/packages/grid/x-data-grid/src/joy/joySlots.tsx @@ -439,13 +439,13 @@ const joySlots: Partial = { baseTextField: TextField, baseButton: Button, baseIconButton: IconButton, - baseSwitch: Switch, - baseSelect: Select, + baseSwitch: Switch as any /* FIXME: typing error */, + baseSelect: Select as any /* FIXME: typing error */, baseSelectOption: Option, baseInputLabel: InputLabel, - baseFormControl: JoyFormControl, - baseTooltip: JoyTooltip, - pagination: Pagination, + baseFormControl: JoyFormControl as any /* FIXME: typing error */, + baseTooltip: JoyTooltip as any /* FIXME: typing error */, + pagination: Pagination as any /* FIXME: typing error */, loadingOverlay: LoadingOverlay, }; diff --git a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx index ef87d1fa8ba4..ed0f16c05223 100644 --- a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx @@ -8,6 +8,7 @@ import { GridColDef, GridFilterItem, GridPreferencePanelsValue, + GridSlots, GridToolbar, GridFilterOperator, } from '@mui/x-data-grid'; @@ -1305,7 +1306,7 @@ describe(' - Filter', () => { type: 'number', }, ]} - slots={{ toolbar: GridToolbarFilterButton }} + slots={{ toolbar: GridToolbarFilterButton as GridSlots['toolbar'] }} />, ); @@ -1369,7 +1370,7 @@ describe(' - Filter', () => { ] as GridFilterOperator[], }, ]} - slots={{ toolbar: GridToolbarFilterButton }} + slots={{ toolbar: GridToolbarFilterButton as GridSlots['toolbar'] }} /> , ); diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 6695d23d5288..dcda0ab319bd 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -4,6 +4,7 @@ { "name": "BaseChipPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectOptionPropsOverrides", "kind": "Interface" }, @@ -27,6 +28,7 @@ { "name": "DataGridPro", "kind": "Function" }, { "name": "DEFAULT_GRID_AUTOSIZE_OPTIONS", "kind": "Variable" }, { "name": "DEFAULT_GRID_COL_TYPE_KEY", "kind": "Variable" }, + { "name": "DetailPanelsPropsOverrides", "kind": "Interface" }, { "name": "ElementSize", "kind": "Interface" }, { "name": "EMPTY_PINNED_COLUMN_FIELDS", "kind": "Variable" }, { "name": "EMPTY_RENDER_CONTEXT", "kind": "Variable" }, @@ -524,8 +526,10 @@ { "name": "GridSkeletonCell", "kind": "Function" }, { "name": "GridSkeletonCellProps", "kind": "Interface" }, { "name": "GridSkeletonRowNode", "kind": "Interface" }, + { "name": "GridSlotProps", "kind": "Interface" }, + { "name": "GridSlots", "kind": "Interface" }, { "name": "GridSlotsComponent", "kind": "Interface" }, - { "name": "GridSlotsComponentsProps", "kind": "Interface" }, + { "name": "GridSlotsComponentsProps", "kind": "TypeAlias" }, { "name": "GridSortApi", "kind": "Interface" }, { "name": "GridSortCellParams", "kind": "Interface" }, { "name": "GridSortColumnLookup", "kind": "TypeAlias" }, @@ -603,6 +607,7 @@ { "name": "OutputSelector", "kind": "Interface" }, { "name": "PaginationPropsOverrides", "kind": "Interface" }, { "name": "PanelPropsOverrides", "kind": "Interface" }, + { "name": "PinnedRowsPropsOverrides", "kind": "Interface" }, { "name": "renderActionsCell", "kind": "Variable" }, { "name": "renderBooleanCell", "kind": "Variable" }, { "name": "renderEditBooleanCell", "kind": "Variable" }, @@ -614,6 +619,7 @@ { "name": "selectedGridRowsSelector", "kind": "Variable" }, { "name": "selectedIdsLookupSelector", "kind": "Variable" }, { "name": "setupExcelExportWebWorker", "kind": "Function" }, + { "name": "SkeletonCellPropsOverrides", "kind": "Interface" }, { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "useFirstRender", "kind": "Variable" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index c94c6d0fdca3..8cee898b2222 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -4,6 +4,7 @@ { "name": "BaseChipPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectOptionPropsOverrides", "kind": "Interface" }, @@ -26,6 +27,7 @@ { "name": "DataGridProProps", "kind": "Interface" }, { "name": "DEFAULT_GRID_AUTOSIZE_OPTIONS", "kind": "Variable" }, { "name": "DEFAULT_GRID_COL_TYPE_KEY", "kind": "Variable" }, + { "name": "DetailPanelsPropsOverrides", "kind": "Interface" }, { "name": "ElementSize", "kind": "Interface" }, { "name": "EMPTY_PINNED_COLUMN_FIELDS", "kind": "Variable" }, { "name": "EMPTY_RENDER_CONTEXT", "kind": "Variable" }, @@ -479,8 +481,10 @@ { "name": "GridSkeletonCell", "kind": "Function" }, { "name": "GridSkeletonCellProps", "kind": "Interface" }, { "name": "GridSkeletonRowNode", "kind": "Interface" }, + { "name": "GridSlotProps", "kind": "Interface" }, + { "name": "GridSlots", "kind": "Interface" }, { "name": "GridSlotsComponent", "kind": "Interface" }, - { "name": "GridSlotsComponentsProps", "kind": "Interface" }, + { "name": "GridSlotsComponentsProps", "kind": "TypeAlias" }, { "name": "GridSortApi", "kind": "Interface" }, { "name": "GridSortCellParams", "kind": "Interface" }, { "name": "GridSortColumnLookup", "kind": "TypeAlias" }, @@ -556,6 +560,7 @@ { "name": "OutputSelector", "kind": "Interface" }, { "name": "PaginationPropsOverrides", "kind": "Interface" }, { "name": "PanelPropsOverrides", "kind": "Interface" }, + { "name": "PinnedRowsPropsOverrides", "kind": "Interface" }, { "name": "renderActionsCell", "kind": "Variable" }, { "name": "renderBooleanCell", "kind": "Variable" }, { "name": "renderEditBooleanCell", "kind": "Variable" }, @@ -566,6 +571,7 @@ { "name": "selectedGridRowsCountSelector", "kind": "Variable" }, { "name": "selectedGridRowsSelector", "kind": "Variable" }, { "name": "selectedIdsLookupSelector", "kind": "Variable" }, + { "name": "SkeletonCellPropsOverrides", "kind": "Interface" }, { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "useFirstRender", "kind": "Variable" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 26b2606b33e1..4bca6499be15 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -4,6 +4,7 @@ { "name": "BaseChipPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, + { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" }, { "name": "BaseSelectOptionPropsOverrides", "kind": "Interface" }, @@ -23,6 +24,7 @@ { "name": "DataGrid", "kind": "Variable" }, { "name": "DataGridProps", "kind": "TypeAlias" }, { "name": "DEFAULT_GRID_COL_TYPE_KEY", "kind": "Variable" }, + { "name": "DetailPanelsPropsOverrides", "kind": "Interface" }, { "name": "ElementSize", "kind": "Interface" }, { "name": "EMPTY_PINNED_COLUMN_FIELDS", "kind": "Variable" }, { "name": "EMPTY_RENDER_CONTEXT", "kind": "Variable" }, @@ -434,8 +436,10 @@ { "name": "GridSkeletonCell", "kind": "Function" }, { "name": "GridSkeletonCellProps", "kind": "Interface" }, { "name": "GridSkeletonRowNode", "kind": "Interface" }, + { "name": "GridSlotProps", "kind": "Interface" }, + { "name": "GridSlots", "kind": "Interface" }, { "name": "GridSlotsComponent", "kind": "Interface" }, - { "name": "GridSlotsComponentsProps", "kind": "Interface" }, + { "name": "GridSlotsComponentsProps", "kind": "TypeAlias" }, { "name": "GridSortApi", "kind": "Interface" }, { "name": "GridSortCellParams", "kind": "Interface" }, { "name": "GridSortColumnLookup", "kind": "TypeAlias" }, @@ -509,6 +513,7 @@ { "name": "OutputSelector", "kind": "Interface" }, { "name": "PaginationPropsOverrides", "kind": "Interface" }, { "name": "PanelPropsOverrides", "kind": "Interface" }, + { "name": "PinnedRowsPropsOverrides", "kind": "Interface" }, { "name": "renderActionsCell", "kind": "Variable" }, { "name": "renderBooleanCell", "kind": "Variable" }, { "name": "renderEditBooleanCell", "kind": "Variable" }, @@ -519,6 +524,7 @@ { "name": "selectedGridRowsCountSelector", "kind": "Variable" }, { "name": "selectedGridRowsSelector", "kind": "Variable" }, { "name": "selectedIdsLookupSelector", "kind": "Variable" }, + { "name": "SkeletonCellPropsOverrides", "kind": "Interface" }, { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "useFirstRender", "kind": "Variable" }, From 456693d04335511a0b58c6d29856d4027d3969eb Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Wed, 24 Jan 2024 11:21:24 -0500 Subject: [PATCH 03/13] lint --- .../components/CustomLoadingOverlayGrid.tsx.preview | 2 +- .../data/data-grid/editing/FullFeaturedCrudGrid.tsx.preview | 2 +- .../filtering/CustomFilterPanelPosition.tsx.preview | 2 +- .../data-grid/row-updates/InfiniteLoadingGrid.tsx.preview | 2 +- .../data-grid/state/RestoreStateInitialState.tsx.preview | 2 +- .../src/DataGridPremium/DataGridPremium.tsx | 1 + .../grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx | 1 + packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx | 1 + packages/grid/x-data-grid/src/components/GridFooter.tsx | 6 +++++- .../src/components/base/GridFooterPlaceholder.tsx | 4 +++- .../components/panel/filterPanel/GridFilterInputBoolean.tsx | 4 +++- .../panel/filterPanel/GridFilterInputSingleSelect.tsx | 4 +++- 12 files changed, 22 insertions(+), 9 deletions(-) diff --git a/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx.preview b/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx.preview index f9ad726dd2ea..84c2df95e838 100644 --- a/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx.preview +++ b/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx.preview @@ -1,6 +1,6 @@ \ No newline at end of file diff --git a/docs/data/data-grid/state/RestoreStateInitialState.tsx.preview b/docs/data/data-grid/state/RestoreStateInitialState.tsx.preview index cb7e99c92deb..a02338eabb0b 100644 --- a/docs/data/data-grid/state/RestoreStateInitialState.tsx.preview +++ b/docs/data/data-grid/state/RestoreStateInitialState.tsx.preview @@ -2,7 +2,7 @@ diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index 59f15f197ed9..e6dfeab02fdf 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -22,6 +22,7 @@ import { } from '../models/dataGridPremiumProps'; import { useDataGridPremiumProps } from './useDataGridPremiumProps'; import { getReleaseInfo } from '../utils/releaseInfo'; + export type { GridPremiumSlotsComponent as GridSlots } from '../models'; const releaseInfo = getReleaseInfo(); diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index b73b7a2a8e04..f93e61e875b2 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -15,6 +15,7 @@ import { DataGridProProps } from '../models/dataGridProProps'; import { useDataGridProProps } from './useDataGridProProps'; import { getReleaseInfo } from '../utils/releaseInfo'; import { propValidatorsDataGridPro } from '../internals/propValidation'; + export type { GridProSlotsComponent as GridSlots } from '../models'; const releaseInfo = getReleaseInfo(); diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx index fd806aea3071..bae5e6763932 100644 --- a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx @@ -11,6 +11,7 @@ import { propValidatorsDataGrid, validateProps, } from '../internals/utils/propValidation'; + export type { GridSlotsComponent as GridSlots } from '../models'; const propValidators: PropValidator[] = [ diff --git a/packages/grid/x-data-grid/src/components/GridFooter.tsx b/packages/grid/x-data-grid/src/components/GridFooter.tsx index 940697a2f697..e23e5f98eccc 100644 --- a/packages/grid/x-data-grid/src/components/GridFooter.tsx +++ b/packages/grid/x-data-grid/src/components/GridFooter.tsx @@ -38,7 +38,11 @@ const GridFooter = React.forwardRef(fu const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && ( - + ); return ( diff --git a/packages/grid/x-data-grid/src/components/base/GridFooterPlaceholder.tsx b/packages/grid/x-data-grid/src/components/base/GridFooterPlaceholder.tsx index ac755a5f2a23..d27336afc865 100644 --- a/packages/grid/x-data-grid/src/components/base/GridFooterPlaceholder.tsx +++ b/packages/grid/x-data-grid/src/components/base/GridFooterPlaceholder.tsx @@ -8,5 +8,7 @@ export function GridFooterPlaceholder() { return null; } - return ; + return ( + + ); } diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx index 96818381042c..725189153a28 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx @@ -85,7 +85,9 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) { native={isSelectNative} displayEmpty inputProps={{ ref: focusElementRef, tabIndex }} - {...others as any /* FIXME: typing error */} + { + ...(others as any) /* FIXME: typing error */ + } {...baseSelectProps} > {renderSingleSelectOptions({ From 6fca90f553d782f55ccffb0263519da0bee497eb Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Wed, 24 Jan 2024 11:45:54 -0500 Subject: [PATCH 04/13] lint --- packages/grid/x-data-grid/src/components/GridRow.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 457218861b73..7a8ec2f7ca76 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -211,9 +211,9 @@ const GridRow = React.forwardRef(function GridRow( const publish = React.useCallback( ( - eventName: keyof GridRowEventLookup, - propHandler: React.MouseEventHandler | undefined, - ): React.MouseEventHandler => + eventName: keyof GridRowEventLookup, + propHandler: React.MouseEventHandler | undefined, + ): React.MouseEventHandler => (event) => { // Ignore portal if (isEventTargetInPortal(event)) { From 580efa3bcea5bd50f7d11d0d28580a4828faadc0 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Wed, 24 Jan 2024 14:42:37 -0500 Subject: [PATCH 05/13] ci: run From 09340b89d8eab83e64f9599f89a8ff67f222473c Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Thu, 25 Jan 2024 12:48:35 +0100 Subject: [PATCH 06/13] fix some ts issues --- packages/grid/x-data-grid/src/components/GridFooter.tsx | 6 +----- packages/grid/x-data-grid/src/components/GridPagination.tsx | 2 +- .../x-data-grid/src/constants/defaultGridSlotsComponents.ts | 2 +- .../grid/x-data-grid/src/models/gridSlotsComponentsProps.ts | 2 +- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridFooter.tsx b/packages/grid/x-data-grid/src/components/GridFooter.tsx index e23e5f98eccc..8a013ae22b22 100644 --- a/packages/grid/x-data-grid/src/components/GridFooter.tsx +++ b/packages/grid/x-data-grid/src/components/GridFooter.tsx @@ -38,11 +38,7 @@ const GridFooter = React.forwardRef(fu const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && ( - + ); return ( diff --git a/packages/grid/x-data-grid/src/components/GridPagination.tsx b/packages/grid/x-data-grid/src/components/GridPagination.tsx index 92c2717b2eae..f7a45091220c 100644 --- a/packages/grid/x-data-grid/src/components/GridPagination.tsx +++ b/packages/grid/x-data-grid/src/components/GridPagination.tsx @@ -26,7 +26,7 @@ const GridPaginationRoot = styled(TablePagination)(({ theme }) => ({ }, })) as typeof TablePagination; -export const GridPagination = React.forwardRef>( +export const GridPagination = React.forwardRef>( function GridPagination(props, ref) { const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); diff --git a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts index 34fe4a92caeb..89a645bbf5ae 100644 --- a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts +++ b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts @@ -37,7 +37,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS: GridSlotsComponent = { loadingOverlay: GridLoadingOverlay, noResultsOverlay: GridNoResultsOverlay, noRowsOverlay: GridNoRowsOverlay, - pagination: GridPagination as React.JSXElementConstructor /* FIXME: typing error */, + pagination: GridPagination, filterPanel: GridFilterPanel, columnsPanel: GridColumnsPanel, panel: GridPanel, diff --git a/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts index ff93565ac488..0e3c8b7be48e 100644 --- a/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts +++ b/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts @@ -91,7 +91,7 @@ export interface GridSlotProps { loadingOverlay: GridOverlayProps & LoadingOverlayPropsOverrides; noResultsOverlay: GridOverlayProps & NoResultsOverlayPropsOverrides; noRowsOverlay: GridOverlayProps & NoRowsOverlayPropsOverrides; - pagination: TablePaginationProps & PaginationPropsOverrides; + pagination: Partial & PaginationPropsOverrides; panel: GridPanelProps & PanelPropsOverrides; pinnedRows: GridPinnedRowsProps & PinnedRowsPropsOverrides; row: GridRowProps & RowPropsOverrides; From 36d881417a78b260676506a968c0c358f2db49da Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 25 Jan 2024 17:17:06 +0300 Subject: [PATCH 07/13] prettier --- .../x-data-grid/src/components/GridFooter.tsx | 71 +++++++++---------- .../x-data-grid/src/components/GridRow.tsx | 6 +- 2 files changed, 38 insertions(+), 39 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridFooter.tsx b/packages/grid/x-data-grid/src/components/GridFooter.tsx index 8a013ae22b22..23e6a8dcfc85 100644 --- a/packages/grid/x-data-grid/src/components/GridFooter.tsx +++ b/packages/grid/x-data-grid/src/components/GridFooter.tsx @@ -9,46 +9,45 @@ import { GridSelectedRowCount } from './GridSelectedRowCount'; import { GridFooterContainer, GridFooterContainerProps } from './containers/GridFooterContainer'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; -const GridFooter = React.forwardRef(function GridFooter( - props, - ref, -) { - const apiRef = useGridApiContext(); - const rootProps = useGridRootProps(); - const totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector); - const selectedRowCount = useGridSelector(apiRef, selectedGridRowsCountSelector); - const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector); +const GridFooter = React.forwardRef( + function GridFooter(props, ref) { + const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); + const totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector); + const selectedRowCount = useGridSelector(apiRef, selectedGridRowsCountSelector); + const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector); - const selectedRowCountElement = - !rootProps.hideFooterSelectedRowCount && selectedRowCount > 0 ? ( - - ) : ( -
- ); + const selectedRowCountElement = + !rootProps.hideFooterSelectedRowCount && selectedRowCount > 0 ? ( + + ) : ( +
+ ); - const rowCountElement = - !rootProps.hideFooterRowCount && !rootProps.pagination ? ( - - ) : null; + const rowCountElement = + !rootProps.hideFooterRowCount && !rootProps.pagination ? ( + + ) : null; - const paginationElement = rootProps.pagination && - !rootProps.hideFooterPagination && - rootProps.slots.pagination && ( - - ); + const paginationElement = rootProps.pagination && + !rootProps.hideFooterPagination && + rootProps.slots.pagination && ( + + ); - return ( - - {selectedRowCountElement} - {rowCountElement} - {paginationElement} - - ); -}); + return ( + + {selectedRowCountElement} + {rowCountElement} + {paginationElement} + + ); + }, +); GridFooter.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 7a8ec2f7ca76..457218861b73 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -211,9 +211,9 @@ const GridRow = React.forwardRef(function GridRow( const publish = React.useCallback( ( - eventName: keyof GridRowEventLookup, - propHandler: React.MouseEventHandler | undefined, - ): React.MouseEventHandler => + eventName: keyof GridRowEventLookup, + propHandler: React.MouseEventHandler | undefined, + ): React.MouseEventHandler => (event) => { // Ignore portal if (isEventTargetInPortal(event)) { From 8cb0fde8e9a4f165f3263e50819355a3266bd54d Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 25 Jan 2024 17:29:22 +0300 Subject: [PATCH 08/13] Fix a type issue --- .../grid/x-data-grid/src/models/api/gridLocaleTextApi.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts index c77fe2f388f9..b25858988c0a 100644 --- a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts +++ b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts @@ -41,9 +41,9 @@ export interface GridLocaleText { toolbarExportExcel: string; // Columns management text - columnsManagementSearchTitle: React.ReactNode; - columnsManagementNoColumns: React.ReactNode; - columnsManagementShowHideAllText: React.ReactNode; + columnsManagementSearchTitle: string; + columnsManagementNoColumns: string; + columnsManagementShowHideAllText: string; // Filter panel text filterPanelAddFilter: React.ReactNode; From 3743df52868d2a2e5e83ff28e98f02376a9cbc06 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Thu, 25 Jan 2024 15:38:39 +0100 Subject: [PATCH 09/13] avoid using as any --- .../components/columnSelection/GridCellCheckboxRenderer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx index 83a922a3048f..db1ea9d1d3eb 100644 --- a/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx +++ b/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx @@ -49,7 +49,7 @@ const GridCellCheckboxForwardRef = React.forwardRef(null); + const checkboxElement = React.useRef(null); const rippleRef = React.useRef(null); const handleRef = useForkRef(checkboxElement, ref); @@ -96,7 +96,7 @@ const GridCellCheckboxForwardRef = React.forwardRef Date: Thu, 25 Jan 2024 16:05:11 +0100 Subject: [PATCH 10/13] avoid as any --- .../src/components/columnSelection/GridHeaderCheckbox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx b/packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx index 10a9afae0135..215608379c39 100644 --- a/packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx +++ b/packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx @@ -27,7 +27,7 @@ const useUtilityClasses = (ownerState: OwnerState) => { return composeClasses(slots, getDataGridUtilityClass, classes); }; -const GridHeaderCheckbox = React.forwardRef( +const GridHeaderCheckbox = React.forwardRef( function GridHeaderCheckbox(props, ref) { const { field, colDef, ...other } = props; const [, forceUpdate] = React.useState(false); @@ -131,7 +131,7 @@ const GridHeaderCheckbox = React.forwardRef Date: Thu, 25 Jan 2024 16:13:17 +0100 Subject: [PATCH 11/13] avoid as any --- .../src/components/panel/filterPanel/GridFilterInputBoolean.tsx | 2 +- .../panel/filterPanel/GridFilterInputSingleSelect.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx index 725189153a28..f8dc457521aa 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx @@ -80,7 +80,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) { id={selectId} label={label} value={filterValueState} - onChange={onFilterChange as any /* FIXME: typing error */} + onChange={onFilterChange} variant="standard" native={isSelectNative} displayEmpty diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx index 9aad08242be5..230971be89b9 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx @@ -137,7 +137,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) { label={label} labelId={labelId} value={filterValue} - onChange={onFilterChange as any /* FIXME: typing error */} + onChange={onFilterChange} variant="standard" type={type || 'text'} inputProps={{ From 94c1637378d086d190ce970bf50c92db6a7ccf85 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Wed, 31 Jan 2024 17:16:57 +0100 Subject: [PATCH 12/13] better types for some joy slots --- .../grid/x-data-grid/src/joy/joySlots.tsx | 31 +++++++------------ 1 file changed, 11 insertions(+), 20 deletions(-) diff --git a/packages/grid/x-data-grid/src/joy/joySlots.tsx b/packages/grid/x-data-grid/src/joy/joySlots.tsx index be151d2f7ad6..7c5819657da0 100644 --- a/packages/grid/x-data-grid/src/joy/joySlots.tsx +++ b/packages/grid/x-data-grid/src/joy/joySlots.tsx @@ -16,7 +16,7 @@ import JoyCircularProgress from '@mui/joy/CircularProgress'; import JoyTooltip from '@mui/joy/Tooltip'; import { unstable_useForkRef as useForkRef } from '@mui/utils'; import joyIconSlots, { GridKeyboardArrowRight, GridKeyboardArrowLeft } from './icons'; -import type { GridSlotsComponent, GridSlotsComponentsProps } from '../models'; +import type { GridSlotProps, GridSlotsComponent, GridSlotsComponentsProps } from '../models'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { gridFilteredTopLevelRowCountSelector, gridPaginationModelSelector } from '../hooks'; @@ -116,10 +116,10 @@ const TextField = React.forwardRef< ); }); -const Button = React.forwardRef< - HTMLButtonElement, - NonNullable ->(function Button({ startIcon, color, endIcon, size, sx, variant, ...props }, ref) { +const Button = React.forwardRef(function Button( + { startIcon, color, endIcon, size, sx, variant, ...props }, + ref, +) { return ( ->(function Switch( +const Switch = React.forwardRef(function Switch( { name, checkedIcon, @@ -204,10 +201,7 @@ const Switch = React.forwardRef< ); }); -const Select = React.forwardRef< - HTMLButtonElement, - NonNullable ->( +const Select = React.forwardRef( ( { open, @@ -314,10 +308,7 @@ const getLabelDisplayedRowsTo = ({ return pageSize === -1 ? rowCount : Math.min(rowCount, (page + 1) * pageSize); }; -const Pagination = React.forwardRef< - HTMLDivElement, - NonNullable ->((props, ref) => { +const Pagination = React.forwardRef((props, ref) => { const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const paginationModel = gridPaginationModelSelector(apiRef); @@ -439,13 +430,13 @@ const joySlots: Partial = { baseTextField: TextField, baseButton: Button, baseIconButton: IconButton, - baseSwitch: Switch as any /* FIXME: typing error */, - baseSelect: Select as any /* FIXME: typing error */, + baseSwitch: Switch, + baseSelect: Select, baseSelectOption: Option, baseInputLabel: InputLabel, baseFormControl: JoyFormControl as any /* FIXME: typing error */, baseTooltip: JoyTooltip as any /* FIXME: typing error */, - pagination: Pagination as any /* FIXME: typing error */, + pagination: Pagination, loadingOverlay: LoadingOverlay, }; From cfcc18ecef52feab82deac211fe5ced77bbf0707 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Mon, 5 Feb 2024 10:01:23 -0500 Subject: [PATCH 13/13] doc: update doc & migration guide --- docs/data/data-grid/components/components.md | 18 +++++++++++++++--- .../migration-data-grid-v6.md | 1 + .../src/models/gridSlotsComponent.ts | 2 ++ 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/docs/data/data-grid/components/components.md b/docs/data/data-grid/components/components.md index f2e7826a07ec..481d3ce2072a 100644 --- a/docs/data/data-grid/components/components.md +++ b/docs/data/data-grid/components/components.md @@ -8,16 +8,16 @@ As part of the customization API, the Data Grid allows you to override internal The prop accepts an object of type [`GridSlotsComponent`](/x/api/data-grid/data-grid/#slots). If you wish to pass additional props in a component slot, you can do it using the `slotProps` prop. -This prop is of type `GridSlotsComponentsProps`. +This prop is of type `GridSlotsComponentsProps`. Note that if you do and you use typescript, you'll need to cast your custom component so it can fit in the slot type. As an example, you could override the column menu and pass additional props as below. -```jsx +```tsx ``` +If you want to ensure type safety, you can declare your component using the slot props typings: + +```tsx +import { GridSlotProps } from '@mui/x-data-grid'; + +function MyCustomColumnMenu( + props: GridSlotProps['columnMenu'] & { background: string; counter: number }, +) { + // ... +} +``` + ### Interacting with the data grid The grid exposes two hooks to help you to access the data grid data while overriding component slots. diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index f7683fe80823..c9dc85267765 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -375,5 +375,6 @@ Here's the list of affected features, colDef flags and props to disable them and - The slot `row` has had these props removed: `containerWidth`, `position`. - The slot `row` has typed props now. - The slot `headerFilterCell` has had these props removed: `filterOperators`. +- All slots are now strongly typed, previously were `React.JSXElementConstructor`. diff --git a/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts b/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts index 45967dee087c..aedf8ceb29a9 100644 --- a/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts +++ b/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts @@ -2,6 +2,8 @@ import * as React from 'react'; import type { GridSlotProps } from './gridSlotsComponentsProps'; import type { GridIconSlotsComponent } from './gridIconSlotsComponent'; +export type { GridSlotProps } from './gridSlotsComponentsProps'; + export interface GridBaseSlots { /** * The custom Checkbox component used in the grid for both header and cells.