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 edc4a7247504c..5d4b6ab35c318 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 d538fe1fe53a9..ff93565ac4880 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 70275eb92d007..9a0a7fa8d4f3e 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 fef9a8145a76c..c278f02c68a45 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 65f85ed661714..2f686357b240a 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 7e576cec4eb9b..d953a4a8e5a50 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 d0b6b900bd9f7..59f15f197ed9c 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 f1c58395989a1..b73b7a2a8e04e 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 4e89cdfd4d6cd..ac8188dd7226f 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 8a013ae22b229..940697a2f697b 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 0dc98c5bcaba6..b4f9c9b6eee11 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 5974991f1bf83..ac755a5f2a237 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 7353974fabb98..83a922a3048f7 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 b62cc90fed944..10a9afae0135d 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 32c79a69e6b76..96818381042ce 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 89a645bbf5ae6..34fe4a92caebe 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 7e245b9180657..be151d2f7ad61 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 ef87d1fa8ba4a..ed0f16c05223c 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 6695d23d52880..dcda0ab319bd4 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 c94c6d0fdca33..8cee898b22223 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 26b2606b33e17..4bca6499be150 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 f9ad726dd2ea2..84c2df95e8387 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 cb7e99c92deb1..a02338eabb0bb 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 59f15f197ed9c..e6dfeab02fdf1 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 b73b7a2a8e04e..f93e61e875b22 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 fd806aea30711..bae5e67639324 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 940697a2f697b..e23e5f98ecccc 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 ac755a5f2a237..d27336afc8653 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 96818381042ce..725189153a289 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 457218861b733..7a8ec2f7ca76a 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 e23e5f98ecccc..8a013ae22b229 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 92c2717b2eae8..f7a45091220cb 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 34fe4a92caebe..89a645bbf5ae6 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 ff93565ac4880..0e3c8b7be48ef 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 8a013ae22b229..23e6a8dcfc85e 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 7a8ec2f7ca76a..457218861b733 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 c77fe2f388f9a..b25858988c0a4 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 83a922a3048f7..db1ea9d1d3eb6 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 10a9afae0135d..215608379c39a 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 725189153a289..f8dc457521aa1 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 9aad08242be56..230971be89b91 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 be151d2f7ad61..7c5819657da0f 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 f2e7826a07ec0..481d3ce2072a5 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 f7683fe808231..c9dc85267765f 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 45967dee087cf..aedf8ceb29a95 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.