From b3700aeea386b28f3ec93393571270cb3c94e90d Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Fri, 18 Oct 2024 11:07:42 +0200 Subject: [PATCH 1/9] [DataGrid] Fix ugly prop-types for the `pageStyle` prop of the `GridPrintExportMenuItem` component (#15015) --- .../data-grid/grid-print-export-options.json | 2 +- .../components/toolbar/GridToolbarExport.tsx | 17 +---------------- packages/x-data-grid/src/models/gridExport.ts | 2 +- 3 files changed, 3 insertions(+), 18 deletions(-) diff --git a/docs/pages/x/api/data-grid/grid-print-export-options.json b/docs/pages/x/api/data-grid/grid-print-export-options.json index 6d19c1df3ffc..09e234b76a5a 100644 --- a/docs/pages/x/api/data-grid/grid-print-export-options.json +++ b/docs/pages/x/api/data-grid/grid-print-export-options.json @@ -18,6 +18,6 @@ "hideFooter": { "type": { "description": "boolean" }, "default": "false" }, "hideToolbar": { "type": { "description": "boolean" }, "default": "false" }, "includeCheckboxes": { "type": { "description": "boolean" }, "default": "false" }, - "pageStyle": { "type": { "description": "string | Function" } } + "pageStyle": { "type": { "description": "string | (() => string)" } } } } diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx index 672e5e32dbe1..7b3ee4453cf5 100644 --- a/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx +++ b/packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx @@ -107,22 +107,7 @@ GridPrintExportMenuItem.propTypes = { hideFooter: PropTypes.bool, hideToolbar: PropTypes.bool, includeCheckboxes: PropTypes.bool, - pageStyle: PropTypes.oneOfType([ - PropTypes.shape({ - '__@hasInstance@646': PropTypes.func.isRequired, - '__@metadata@648': PropTypes.any, - apply: PropTypes.func.isRequired, - arguments: PropTypes.any.isRequired, - bind: PropTypes.func.isRequired, - call: PropTypes.func.isRequired, - caller: PropTypes.object.isRequired, - length: PropTypes.number.isRequired, - name: PropTypes.string.isRequired, - prototype: PropTypes.any.isRequired, - toString: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), + pageStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), }), } as any; diff --git a/packages/x-data-grid/src/models/gridExport.ts b/packages/x-data-grid/src/models/gridExport.ts index 98220015a855..a0a628b4b38c 100644 --- a/packages/x-data-grid/src/models/gridExport.ts +++ b/packages/x-data-grid/src/models/gridExport.ts @@ -149,7 +149,7 @@ export interface GridPrintExportOptions extends GridExportOptions { /** * Provide Print specific styles to the print window. */ - pageStyle?: string | Function; + pageStyle?: string | (() => string); /** * Function that returns the list of row ids to export in the order they should be exported. * @param {GridPrintGetRowsToExportParams} params With all properties from [[GridPrintGetRowsToExportParams]]. From 5c8892154ec6ea197e65580deee125f9aa8af9a2 Mon Sep 17 00:00:00 2001 From: Philip <47861911+GITPHLAP@users.noreply.github.com> Date: Fri, 18 Oct 2024 15:29:02 +0200 Subject: [PATCH 2/9] [l10n] Improve Danish (da-DK) locale (#14951) --- docs/data/data-grid/localization/data.json | 2 +- packages/x-data-grid/src/locales/daDK.ts | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json index 15945bbcef96..a63c92d783cf 100644 --- a/docs/data/data-grid/localization/data.json +++ b/docs/data/data-grid/localization/data.json @@ -67,7 +67,7 @@ "languageTag": "da-DK", "importName": "daDK", "localeName": "Danish", - "missingKeysCount": 5, + "missingKeysCount": 0, "totalKeysCount": 122, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/daDK.ts" }, diff --git a/packages/x-data-grid/src/locales/daDK.ts b/packages/x-data-grid/src/locales/daDK.ts index 9e31979bb081..dc305634c30e 100644 --- a/packages/x-data-grid/src/locales/daDK.ts +++ b/packages/x-data-grid/src/locales/daDK.ts @@ -42,7 +42,7 @@ const daDKGrid: Partial = { columnsManagementSearchTitle: 'Søg', columnsManagementNoColumns: 'Ingen søjler', columnsManagementShowHideAllText: 'Vis/Skjul Alle', - // columnsManagementReset: 'Reset', + columnsManagementReset: 'Nulstil', // Filter panel text filterPanelAddFilter: 'Tilføj filter', @@ -58,9 +58,9 @@ const daDKGrid: Partial = { // Filter operators text filterOperatorContains: 'indeholder', - // filterOperatorDoesNotContain: 'does not contain', + filterOperatorDoesNotContain: 'indeholder ikke', filterOperatorEquals: 'lig med', - // filterOperatorDoesNotEqual: 'does not equal', + filterOperatorDoesNotEqual: 'ikke lig med', filterOperatorStartsWith: 'begynder med', filterOperatorEndsWith: 'ender med', filterOperatorIs: 'er lig med', @@ -81,9 +81,9 @@ const daDKGrid: Partial = { // Header filter operators text headerFilterOperatorContains: 'Indeholder', - // headerFilterOperatorDoesNotContain: 'Does not contain', + headerFilterOperatorDoesNotContain: 'Indeholder ikke', headerFilterOperatorEquals: 'Lig med', - // headerFilterOperatorDoesNotEqual: 'Does not equal', + headerFilterOperatorDoesNotEqual: 'Ikke lig med', headerFilterOperatorStartsWith: 'Begynder med', headerFilterOperatorEndsWith: 'Ender med', headerFilterOperatorIs: 'Er lig med', From 31391239f2c7b06e05750acab4536832e6ca5da0 Mon Sep 17 00:00:00 2001 From: merotosc <44845833+merotosc@users.noreply.github.com> Date: Fri, 18 Oct 2024 15:29:24 +0200 Subject: [PATCH 3/9] [l10n] Improve italian (it-IT) locale (#14950) --- docs/data/data-grid/localization/data.json | 2 +- packages/x-data-grid/src/locales/itIT.ts | 54 +++++++++++----------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json index a63c92d783cf..d03d4e5402ee 100644 --- a/docs/data/data-grid/localization/data.json +++ b/docs/data/data-grid/localization/data.json @@ -139,7 +139,7 @@ "languageTag": "it-IT", "importName": "itIT", "localeName": "Italian", - "missingKeysCount": 8, + "missingKeysCount": 0, "totalKeysCount": 122, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/itIT.ts" }, diff --git a/packages/x-data-grid/src/locales/itIT.ts b/packages/x-data-grid/src/locales/itIT.ts index 31b09da652c5..2058096d6165 100644 --- a/packages/x-data-grid/src/locales/itIT.ts +++ b/packages/x-data-grid/src/locales/itIT.ts @@ -39,10 +39,10 @@ const itITGrid: Partial = { toolbarExportExcel: 'Scarica come Excel', // Columns management text - // columnsManagementSearchTitle: 'Search', - // columnsManagementNoColumns: 'No columns', - // columnsManagementShowHideAllText: 'Show/Hide All', - // columnsManagementReset: 'Reset', + columnsManagementSearchTitle: 'Cerca', + columnsManagementNoColumns: 'Nessuna colonna', + columnsManagementShowHideAllText: 'Mostra/Nascondi Tutto', + columnsManagementReset: 'Resetta', // Filter panel text filterPanelAddFilter: 'Aggiungi un filtro', @@ -58,13 +58,13 @@ const itITGrid: Partial = { // Filter operators text filterOperatorContains: 'contiene', - // filterOperatorDoesNotContain: 'does not contain', + filterOperatorDoesNotContain: 'non contiene', filterOperatorEquals: 'uguale a', - // filterOperatorDoesNotEqual: 'does not equal', + filterOperatorDoesNotEqual: 'diverso da', filterOperatorStartsWith: 'comincia per', filterOperatorEndsWith: 'termina per', filterOperatorIs: 'uguale a', - filterOperatorNot: 'diversa da', + filterOperatorNot: 'diverso da', filterOperatorAfter: 'dopo il', filterOperatorOnOrAfter: 'a partire dal', filterOperatorBefore: 'prima del', @@ -81,26 +81,26 @@ const itITGrid: Partial = { // Header filter operators text headerFilterOperatorContains: 'Contiene', - // headerFilterOperatorDoesNotContain: 'Does not contain', - headerFilterOperatorEquals: 'uguale a', - // headerFilterOperatorDoesNotEqual: 'Does not equal', - headerFilterOperatorStartsWith: 'comincia per', - headerFilterOperatorEndsWith: 'termina per', - headerFilterOperatorIs: 'uguale a', - headerFilterOperatorNot: 'diversa da', - headerFilterOperatorAfter: 'dopo il', - headerFilterOperatorOnOrAfter: 'a partire dal', - headerFilterOperatorBefore: 'prima del', - headerFilterOperatorOnOrBefore: 'fino al', - headerFilterOperatorIsEmpty: 'è vuoto', - headerFilterOperatorIsNotEmpty: 'non è vuoto', - headerFilterOperatorIsAnyOf: 'è uno tra', - 'headerFilterOperator=': 'uguale a', - 'headerFilterOperator!=': 'diverso da', - 'headerFilterOperator>': 'maggiore di', - 'headerFilterOperator>=': 'maggiore o uguale a', - 'headerFilterOperator<': 'minore di', - 'headerFilterOperator<=': 'minore o uguale a', + headerFilterOperatorDoesNotContain: 'Non contiene', + headerFilterOperatorEquals: 'Uguale a', + headerFilterOperatorDoesNotEqual: 'Diverso da', + headerFilterOperatorStartsWith: 'Comincia per', + headerFilterOperatorEndsWith: 'Termina per', + headerFilterOperatorIs: 'Uguale a', + headerFilterOperatorNot: 'Diverso da', + headerFilterOperatorAfter: 'Dopo il', + headerFilterOperatorOnOrAfter: 'A partire dal', + headerFilterOperatorBefore: 'Prima del', + headerFilterOperatorOnOrBefore: 'Fino al', + headerFilterOperatorIsEmpty: 'È vuoto', + headerFilterOperatorIsNotEmpty: 'Non è vuoto', + headerFilterOperatorIsAnyOf: 'È uno tra', + 'headerFilterOperator=': 'Uguale a', + 'headerFilterOperator!=': 'Diverso da', + 'headerFilterOperator>': 'Maggiore di', + 'headerFilterOperator>=': 'Maggiore o uguale a', + 'headerFilterOperator<': 'Minore di', + 'headerFilterOperator<=': 'Minore o uguale a', // Filter values text filterValueAny: 'qualunque', From dbac5382f1960a0efdfc008023306cc3f10769f6 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Fri, 18 Oct 2024 13:37:43 -0400 Subject: [PATCH 4/9] [DataGrid] Refactor: remove some Box & Badge (#15013) --- .../x/api/data-grid/data-grid-premium.json | 12 ++++++++++++ docs/pages/x/api/data-grid/data-grid-pro.json | 12 ++++++++++++ docs/pages/x/api/data-grid/data-grid.json | 12 ++++++++++++ .../data-grid-premium/data-grid-premium.json | 2 ++ .../data-grid/data-grid-pro/data-grid-pro.json | 2 ++ .../data-grid/data-grid/data-grid.json | 2 ++ .../GridDataSourceTreeDataGroupingCell.tsx | 5 ++--- .../GridColumnHeaderFilterIconButton.tsx | 5 ++--- .../columnHeaders/GridColumnHeaderSortIcon.tsx | 5 ++--- .../src/components/toolbar/GridToolbar.tsx | 3 +-- .../toolbar/GridToolbarFilterButton.tsx | 5 ++--- .../columnMenu/useGridColumnMenuSlots.ts | 6 ++++-- packages/x-data-grid/src/joy/joySlots.tsx | 18 ++++++++++++++++++ packages/x-data-grid/src/material/index.ts | 4 ++++ .../src/models/gridSlotsComponent.ts | 10 ++++++++++ .../src/models/gridSlotsComponentsProps.ts | 7 +++++++ scripts/x-data-grid-premium.exports.json | 2 ++ scripts/x-data-grid-pro.exports.json | 2 ++ scripts/x-data-grid.exports.json | 2 ++ 19 files changed, 100 insertions(+), 16 deletions(-) diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 478f8854a196..99283c51b8ae 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -796,12 +796,24 @@ "default": "GridRow", "class": "MuiDataGridPremium-row" }, + { + "name": "baseBadge", + "description": "The custom Badge component used in the grid for both header and cells.", + "default": "Badge", + "class": null + }, { "name": "baseCheckbox", "description": "The custom Checkbox component used in the grid for both header and cells.", "default": "Checkbox", "class": null }, + { + "name": "baseDivider", + "description": "The custom Divider component used in the grid.", + "default": "Divider", + "class": null + }, { "name": "baseInputAdornment", "description": "The custom InputAdornment component used in the grid.", diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index 54a8ab54294e..3a0923e1a1d9 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -728,12 +728,24 @@ "default": "GridRow", "class": "MuiDataGridPro-row" }, + { + "name": "baseBadge", + "description": "The custom Badge component used in the grid for both header and cells.", + "default": "Badge", + "class": null + }, { "name": "baseCheckbox", "description": "The custom Checkbox component used in the grid for both header and cells.", "default": "Checkbox", "class": null }, + { + "name": "baseDivider", + "description": "The custom Divider component used in the grid.", + "default": "Divider", + "class": null + }, { "name": "baseInputAdornment", "description": "The custom InputAdornment component used in the grid.", diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 25e56f8402bc..87da7c9e9a81 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -615,12 +615,24 @@ "default": "GridRow", "class": "MuiDataGrid-row" }, + { + "name": "baseBadge", + "description": "The custom Badge component used in the grid for both header and cells.", + "default": "Badge", + "class": null + }, { "name": "baseCheckbox", "description": "The custom Checkbox component used in the grid for both header and cells.", "default": "Checkbox", "class": null }, + { + "name": "baseDivider", + "description": "The custom Divider component used in the grid.", + "default": "Divider", + "class": null + }, { "name": "baseInputAdornment", "description": "The custom InputAdornment component used in the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json index 5e463ec7b112..dc242fd21180 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json @@ -1230,9 +1230,11 @@ } }, "slotDescriptions": { + "baseBadge": "The custom Badge component used in the grid for both header and cells.", "baseButton": "The custom Button component used in the grid.", "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "baseChip": "The custom Chip component used in the grid.", + "baseDivider": "The custom Divider component used in the grid.", "baseFormControl": "The custom FormControl component used in the grid.", "baseIconButton": "The custom IconButton component used in the grid.", "baseInputAdornment": "The custom InputAdornment component used in the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json index b2b762362095..42302d388bbf 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json @@ -1168,9 +1168,11 @@ } }, "slotDescriptions": { + "baseBadge": "The custom Badge component used in the grid for both header and cells.", "baseButton": "The custom Button component used in the grid.", "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "baseChip": "The custom Chip component used in the grid.", + "baseDivider": "The custom Divider component used in the grid.", "baseFormControl": "The custom FormControl component used in the grid.", "baseIconButton": "The custom IconButton component used in the grid.", "baseInputAdornment": "The custom InputAdornment component used in the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json index 9cf3ea258f2a..141c83b1b2eb 100644 --- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json @@ -1048,9 +1048,11 @@ } }, "slotDescriptions": { + "baseBadge": "The custom Badge component used in the grid for both header and cells.", "baseButton": "The custom Button component used in the grid.", "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "baseChip": "The custom Chip component used in the grid.", + "baseDivider": "The custom Divider component used in the grid.", "baseFormControl": "The custom FormControl component used in the grid.", "baseIconButton": "The custom IconButton component used in the grid.", "baseInputAdornment": "The custom InputAdornment component used in the grid.", diff --git a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx index 79e002211adf..d5ee7aa79ab5 100644 --- a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx +++ b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import composeClasses from '@mui/utils/composeClasses'; import Box from '@mui/material/Box'; -import Badge from '@mui/material/Badge'; import { getDataGridUtilityClass, GridRenderCellParams, @@ -93,9 +92,9 @@ function GridTreeDataGroupingCellIcon(props: GridTreeDataGroupingCellIconProps) {...rootProps?.slotProps?.baseIconButton} > - + - + ) : null; diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx index d48bc0ccdfe2..92641c45e46e 100644 --- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx +++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils'; -import Badge from '@mui/material/Badge'; import { useGridSelector } from '../../hooks'; import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector'; import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; @@ -97,9 +96,9 @@ function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonPro > {counter > 1 && ( - + {iconButton} - + )} {counter === 1 && iconButton} diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx index 367931b7e3c9..778579bcc0e3 100644 --- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx +++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; -import Badge from '@mui/material/Badge'; import { GridSlotsComponent } from '../../models/gridSlotsComponent'; import { GridSortDirection } from '../../models/gridSortModel'; import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; @@ -80,9 +79,9 @@ function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps) { return ( {index != null && ( - + {iconButton} - + )} {index == null && iconButton} diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbar.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbar.tsx index 216335a99ba3..260f22437210 100644 --- a/packages/x-data-grid/src/components/toolbar/GridToolbar.tsx +++ b/packages/x-data-grid/src/components/toolbar/GridToolbar.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import Box from '@mui/material/Box'; import { GridToolbarContainer, GridToolbarContainerProps, @@ -61,7 +60,7 @@ const GridToolbar = React.forwardRef( // TODO: remove the reference to excelOptions in community package excelOptions={excelOptions} /> - +
{showQuickFilter && } ); diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx index 2e286a44519d..5f7bbb6f473f 100644 --- a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx +++ b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx @@ -6,7 +6,6 @@ import { unstable_capitalize as capitalize, unstable_useId as useId, } from '@mui/utils'; -import Badge from '@mui/material/Badge'; import { ButtonProps } from '@mui/material/Button'; import { TooltipProps } from '@mui/material/Tooltip'; import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector'; @@ -144,9 +143,9 @@ const GridToolbarFilterButton = React.forwardRef + - + } {...buttonProps} onClick={toggleFilter} diff --git a/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts b/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts index ee8b2fecd978..fbb6c996fd6f 100644 --- a/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts +++ b/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import Divider from '@mui/material/Divider'; import { GridColumnMenuRootProps } from './columnMenuInterfaces'; import { GridColDef } from '../../../models/colDef/gridColDef'; +import { useGridRootProps } from '../../utils/useGridRootProps'; import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext'; interface UseGridColumnMenuSlotsProps extends GridColumnMenuRootProps { @@ -16,6 +16,7 @@ type UseGridColumnMenuSlotsResponse = Array< const useGridColumnMenuSlots = (props: UseGridColumnMenuSlotsProps) => { const apiRef = useGridPrivateApiContext(); + const rootProps = useGridRootProps(); const { defaultSlots, defaultSlotProps, @@ -71,7 +72,7 @@ const useGridColumnMenuSlots = (props: UseGridColumnMenuSlotsProps) => { itemProps = { ...itemProps, ...customProps }; } return addDividers && index !== sorted.length - 1 - ? [...acc, [processedComponents[key]!, itemProps], [Divider, {}]] + ? [...acc, [processedComponents[key]!, itemProps], [rootProps.slots.baseDivider, {}]] : [...acc, [processedComponents[key]!, itemProps]]; }, []); }, [ @@ -82,6 +83,7 @@ const useGridColumnMenuSlots = (props: UseGridColumnMenuSlotsProps) => { processedComponents, processedSlotProps, userItems, + rootProps.slots.baseDivider, ]); }; diff --git a/packages/x-data-grid/src/joy/joySlots.tsx b/packages/x-data-grid/src/joy/joySlots.tsx index 246799f568a6..a5645d892066 100644 --- a/packages/x-data-grid/src/joy/joySlots.tsx +++ b/packages/x-data-grid/src/joy/joySlots.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { ColorPaletteProp, Theme, VariantProp } from '@mui/joy/styles'; +import JoyBadge from '@mui/joy/Badge'; import JoyCheckbox from '@mui/joy/Checkbox'; +import JoyDivider from '@mui/joy/Divider'; import JoyInput from '@mui/joy/Input'; import JoyFormControl from '@mui/joy/FormControl'; import JoyFormLabel from '@mui/joy/FormLabel'; @@ -69,6 +71,20 @@ function convertVariant>( + ({ slotProps, variant, color, sx, ...props }, ref) => { + return ( + } + ref={ref as any} + /> + ); + }, +); + const Checkbox = React.forwardRef< HTMLElement, NonNullable @@ -374,7 +390,9 @@ const LoadingOverlay = React.forwardRef< const joySlots: Partial = { ...joyIconSlots, + baseBadge: Badge, baseCheckbox: Checkbox, + baseDivider: JoyDivider, baseTextField: TextField, baseButton: Button, baseIconButton: IconButton, diff --git a/packages/x-data-grid/src/material/index.ts b/packages/x-data-grid/src/material/index.ts index 6011f2c4606e..5377891acffc 100644 --- a/packages/x-data-grid/src/material/index.ts +++ b/packages/x-data-grid/src/material/index.ts @@ -1,4 +1,6 @@ +import MUIBadge from '@mui/material/Badge'; import MUICheckbox from '@mui/material/Checkbox'; +import MUIDivider from '@mui/material/Divider'; import MUITextField from '@mui/material/TextField'; import MUIFormControl from '@mui/material/FormControl'; import MUISelect from '@mui/material/Select'; @@ -81,7 +83,9 @@ const iconSlots: GridIconSlotsComponent = { const materialSlots: GridBaseSlots & GridIconSlotsComponent = { ...iconSlots, + baseBadge: MUIBadge, baseCheckbox: MUICheckbox, + baseDivider: MUIDivider, baseTextField: MUITextField, baseFormControl: MUIFormControl, baseSelect: MUISelect, diff --git a/packages/x-data-grid/src/models/gridSlotsComponent.ts b/packages/x-data-grid/src/models/gridSlotsComponent.ts index 4fe7ea508c74..51fc7ccac3b8 100644 --- a/packages/x-data-grid/src/models/gridSlotsComponent.ts +++ b/packages/x-data-grid/src/models/gridSlotsComponent.ts @@ -5,6 +5,11 @@ import type { GridIconSlotsComponent } from './gridIconSlotsComponent'; export type { GridSlotProps } from './gridSlotsComponentsProps'; export interface GridBaseSlots { + /** + * The custom Badge component used in the grid for both header and cells. + * @default Badge + */ + baseBadge: React.JSXElementConstructor; /** * The custom Checkbox component used in the grid for both header and cells. * @default Checkbox @@ -15,6 +20,11 @@ export interface GridBaseSlots { * @default Chip */ baseChip: React.JSXElementConstructor; + /** + * The custom Divider component used in the grid. + * @default Divider + */ + baseDivider: React.JSXElementConstructor; /** * The custom InputAdornment component used in the grid. * @default InputAdornment diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts index 6ea9c9f27613..fb3a00c76088 100644 --- a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts +++ b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import type { BadgeProps } from '@mui/material/Badge'; import type { CheckboxProps } from '@mui/material/Checkbox'; import type { TextFieldProps } from '@mui/material/TextField'; import type { FormControlProps } from '@mui/material/FormControl'; @@ -31,8 +32,12 @@ import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay'; import type { GridRowCountProps } from '../components/GridRowCount'; import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon'; +type DividerProps = {}; + // Overrides for module augmentation +export interface BaseBadgePropsOverrides {} export interface BaseCheckboxPropsOverrides {} +export interface BaseDividerPropsOverrides {} export interface BaseTextFieldPropsOverrides {} export interface BaseFormControlPropsOverrides {} export interface BaseSelectPropsOverrides {} @@ -66,7 +71,9 @@ export interface SkeletonCellPropsOverrides {} export interface RowPropsOverrides {} export interface GridSlotProps { + baseBadge: BadgeProps & BaseBadgePropsOverrides; baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides; + baseDivider: DividerProps & BaseDividerPropsOverrides; baseTextField: TextFieldProps & BaseTextFieldPropsOverrides; baseFormControl: FormControlProps & BaseFormControlPropsOverrides; baseSelect: SelectProps & BaseSelectPropsOverrides; diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 5c536da99e51..f6e08468b288 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -1,7 +1,9 @@ [ + { "name": "BaseBadgePropsOverrides", "kind": "Interface" }, { "name": "BaseButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, { "name": "BaseChipPropsOverrides", "kind": "Interface" }, + { "name": "BaseDividerPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index dcb194f6eac7..e88ab0b759cf 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -1,7 +1,9 @@ [ + { "name": "BaseBadgePropsOverrides", "kind": "Interface" }, { "name": "BaseButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, { "name": "BaseChipPropsOverrides", "kind": "Interface" }, + { "name": "BaseDividerPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index cc85a19301e4..8414b824889b 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -1,7 +1,9 @@ [ + { "name": "BaseBadgePropsOverrides", "kind": "Interface" }, { "name": "BaseButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, { "name": "BaseChipPropsOverrides", "kind": "Interface" }, + { "name": "BaseDividerPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, From 86da73a2e935e49f895a896ffd978864c9d13928 Mon Sep 17 00:00:00 2001 From: Rajat Date: Sat, 19 Oct 2024 00:11:29 +0530 Subject: [PATCH 5/9] [l10n] Add Portuguese (PT-BR) translation (#15021) --- docs/data/data-grid/localization/data.json | 2 +- packages/x-data-grid/src/locales/ptBR.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json index d03d4e5402ee..40b3eef90a27 100644 --- a/docs/data/data-grid/localization/data.json +++ b/docs/data/data-grid/localization/data.json @@ -203,7 +203,7 @@ "languageTag": "pt-BR", "importName": "ptBR", "localeName": "Portuguese (Brazil)", - "missingKeysCount": 4, + "missingKeysCount": 0, "totalKeysCount": 122, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptBR.ts" }, diff --git a/packages/x-data-grid/src/locales/ptBR.ts b/packages/x-data-grid/src/locales/ptBR.ts index bd9a3153b868..4dbd7b806024 100644 --- a/packages/x-data-grid/src/locales/ptBR.ts +++ b/packages/x-data-grid/src/locales/ptBR.ts @@ -58,9 +58,9 @@ const ptBRGrid: Partial = { // Filter operators text filterOperatorContains: 'contém', - // filterOperatorDoesNotContain: 'does not contain', + filterOperatorDoesNotContain: 'não contém', filterOperatorEquals: 'é igual a', - // filterOperatorDoesNotEqual: 'does not equal', + filterOperatorDoesNotEqual: 'não é igual a', filterOperatorStartsWith: 'começa com', filterOperatorEndsWith: 'termina com', filterOperatorIs: 'é', @@ -81,9 +81,9 @@ const ptBRGrid: Partial = { // Header filter operators text headerFilterOperatorContains: 'Contém', - // headerFilterOperatorDoesNotContain: 'Does not contain', + headerFilterOperatorDoesNotContain: 'Não contém', headerFilterOperatorEquals: 'Igual', - // headerFilterOperatorDoesNotEqual: 'Does not equal', + headerFilterOperatorDoesNotEqual: 'Não é igual a', headerFilterOperatorStartsWith: 'Começa com', headerFilterOperatorEndsWith: 'Termina com', headerFilterOperatorIs: 'É', From 2880c9abb0dd28deecdc9013b23f9e261cef3582 Mon Sep 17 00:00:00 2001 From: kalyan90 Date: Sat, 19 Oct 2024 00:28:09 +0530 Subject: [PATCH 6/9] [Data grid] Fix number of rows to display for page size options with negative value (#14890) Co-authored-by: Rom Grk --- .../data-grid/pagination/PageSizeCustomOptions.js | 2 +- .../data-grid/pagination/PageSizeCustomOptions.tsx | 2 +- .../pagination/PageSizeCustomOptions.tsx.preview | 2 +- docs/data/data-grid/pagination/pagination.md | 4 ++-- .../features/pagination/gridPaginationSelector.ts | 13 +++++++++---- 5 files changed, 14 insertions(+), 9 deletions(-) diff --git a/docs/data/data-grid/pagination/PageSizeCustomOptions.js b/docs/data/data-grid/pagination/PageSizeCustomOptions.js index 667abfb9a412..2cdb2ddfa58b 100644 --- a/docs/data/data-grid/pagination/PageSizeCustomOptions.js +++ b/docs/data/data-grid/pagination/PageSizeCustomOptions.js @@ -17,7 +17,7 @@ export default function PageSizeCustomOptions() { ...data.initialState, pagination: { paginationModel: { pageSize: 5 } }, }} - pageSizeOptions={[5, 10, 25]} + pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]} />
); diff --git a/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx b/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx index 667abfb9a412..2cdb2ddfa58b 100644 --- a/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx +++ b/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx @@ -17,7 +17,7 @@ export default function PageSizeCustomOptions() { ...data.initialState, pagination: { paginationModel: { pageSize: 5 } }, }} - pageSizeOptions={[5, 10, 25]} + pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]} /> ); diff --git a/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx.preview b/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx.preview index 88965a8c26f4..1f4dad3d8994 100644 --- a/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx.preview +++ b/docs/data/data-grid/pagination/PageSizeCustomOptions.tsx.preview @@ -4,5 +4,5 @@ ...data.initialState, pagination: { paginationModel: { pageSize: 5 } }, }} - pageSizeOptions={[5, 10, 25]} + pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]} /> \ No newline at end of file diff --git a/docs/data/data-grid/pagination/pagination.md b/docs/data/data-grid/pagination/pagination.md index 90b26b56d8d7..7259d7fca5b0 100644 --- a/docs/data/data-grid/pagination/pagination.md +++ b/docs/data/data-grid/pagination/pagination.md @@ -41,10 +41,10 @@ You should provide an array of items, each item should be one of these types: ``` -- **object**, the `value` and `label` keys will be used respectively for the value and label of the option. +- **object**, the `value` and `label` keys will be used respectively for the value and label of the option. Define `value` as `-1` to display all results. ```jsx - + ``` {{"demo": "PageSizeCustomOptions.js", "bg": "inline"}} diff --git a/packages/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts b/packages/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts index 786ba8881b45..f9c8698e5929 100644 --- a/packages/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts +++ b/packages/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts @@ -8,6 +8,8 @@ import { import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector'; import { getPageCount } from './gridPaginationUtils'; +const ALL_RESULTS_PAGE_VALUE = -1; + /** * @category Pagination * @ignore - do not document. @@ -92,10 +94,13 @@ export const gridPaginationRowRangeSelector = createSelectorMemoized( paginationModel.pageSize * paginationModel.page, visibleTopLevelRowCount - 1, ); - const topLevelLastRowIndex = Math.min( - topLevelFirstRowIndex + paginationModel.pageSize - 1, - visibleTopLevelRowCount - 1, - ); + const topLevelLastRowIndex = + paginationModel.pageSize === ALL_RESULTS_PAGE_VALUE + ? visibleTopLevelRowCount - 1 + : Math.min( + topLevelFirstRowIndex + paginationModel.pageSize - 1, + visibleTopLevelRowCount - 1, + ); // The range contains no element if (topLevelFirstRowIndex === -1 || topLevelLastRowIndex === -1) { From 361602bde6994ad6f4a5abad52c62599978376be Mon Sep 17 00:00:00 2001 From: Caio Lins Date: Mon, 21 Oct 2024 17:20:49 +0900 Subject: [PATCH 7/9] [charts] Export data type in onAxisClick(_, data) callback (#15038) --- .../src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx | 4 ++-- scripts/x-charts-pro.exports.json | 1 + scripts/x-charts.exports.json | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx b/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx index 326f12ef6f4b..c4da5f03a666 100644 --- a/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx +++ b/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx @@ -6,7 +6,7 @@ import { useSeries } from '../hooks/useSeries'; import { useSvgRef } from '../hooks'; import { useCartesianContext } from '../context/CartesianProvider'; -type AxisData = { +export type ChartsAxisData = { dataIndex: number; axisValue?: number | Date | string; seriesValues: Record; @@ -19,7 +19,7 @@ export interface ChartsOnAxisClickHandlerProps { * @param {MouseEvent} event The mouse event recorded on the `` element. * @param {null | AxisData} data The data about the clicked axis and items associated with it. */ - onAxisClick?: (event: MouseEvent, data: null | AxisData) => void; + onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void; } function ChartsOnAxisClickHandler(props: ChartsOnAxisClickHandlerProps) { diff --git a/scripts/x-charts-pro.exports.json b/scripts/x-charts-pro.exports.json index 22db3a452177..28020ea97fb9 100644 --- a/scripts/x-charts-pro.exports.json +++ b/scripts/x-charts-pro.exports.json @@ -61,6 +61,7 @@ { "name": "ChartsAxisClasses", "kind": "Interface" }, { "name": "ChartsAxisClassKey", "kind": "TypeAlias" }, { "name": "ChartsAxisContentProps", "kind": "TypeAlias" }, + { "name": "ChartsAxisData", "kind": "TypeAlias" }, { "name": "ChartsAxisHighlight", "kind": "Function" }, { "name": "chartsAxisHighlightClasses", "kind": "Variable" }, { "name": "ChartsAxisHighlightClasses", "kind": "Interface" }, diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index e95e714b9698..312af2248e5a 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -59,6 +59,7 @@ { "name": "ChartsAxisClasses", "kind": "Interface" }, { "name": "ChartsAxisClassKey", "kind": "TypeAlias" }, { "name": "ChartsAxisContentProps", "kind": "TypeAlias" }, + { "name": "ChartsAxisData", "kind": "TypeAlias" }, { "name": "ChartsAxisHighlight", "kind": "Function" }, { "name": "chartsAxisHighlightClasses", "kind": "Variable" }, { "name": "ChartsAxisHighlightClasses", "kind": "Interface" }, From 922c8d0691d569402fb04e38a65e044fc4d5abc8 Mon Sep 17 00:00:00 2001 From: Rajat Date: Mon, 21 Oct 2024 15:45:06 +0530 Subject: [PATCH 8/9] [DataGrid] Fix `GridPanelAnchor` positioning (#15022) --- .../src/components/virtualization/GridMainContainer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx b/packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx index c8b4ca5e33be..70d727b3afd5 100644 --- a/packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx +++ b/packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx @@ -8,6 +8,7 @@ const GridPanelAnchor = styled('div')({ position: 'absolute', top: `var(--DataGrid-headersTotalHeight)`, left: 0, + width: 'calc(100% - (var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize)))', }); type OwnerState = DataGridProcessedProps; From afdf04e7e49b2be62d2cd97e9f0d301d170e9539 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Mon, 21 Oct 2024 12:52:11 +0200 Subject: [PATCH 9/9] [TreeView] Make the cancellable event types public (#14992) --- .../useTreeViewItemsReordering.itemPlugin.ts | 12 +++++----- .../useTreeViewItemsReordering.types.ts | 17 ++++++++------ .../src/TreeItem/TreeItem.types.ts | 5 ++--- .../src/TreeItem/TreeItemContent.tsx | 4 ++-- .../src/TreeItem/useTreeItemState.ts | 4 ++-- .../src/TreeItem2/TreeItem2.types.ts | 6 ++--- .../TreeItem2LabelInput.types.ts | 6 ++--- .../useTreeItem2Utils/useTreeItem2Utils.tsx | 4 ++-- packages/x-tree-view/src/internals/index.ts | 2 -- .../internals/models/MuiCancellableEvent.ts | 5 ----- .../x-tree-view/src/internals/models/index.ts | 1 - .../useTreeViewFocus/useTreeViewFocus.ts | 4 ++-- .../useTreeViewKeyboardNavigation.ts | 5 +++-- .../useTreeViewKeyboardNavigation.types.ts | 8 +++---- .../useTreeViewLabel.itemPlugin.ts | 9 +++++--- packages/x-tree-view/src/models/events.ts | 8 +++++++ packages/x-tree-view/src/models/index.ts | 1 + .../src/useTreeItem2/useTreeItem2.ts | 22 +++++++++---------- .../src/useTreeItem2/useTreeItem2.types.ts | 20 ++++++++--------- scripts/x-tree-view-pro.exports.json | 2 ++ scripts/x-tree-view.exports.json | 2 ++ 21 files changed, 78 insertions(+), 69 deletions(-) delete mode 100644 packages/x-tree-view/src/internals/models/MuiCancellableEvent.ts create mode 100644 packages/x-tree-view/src/models/events.ts diff --git a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.ts b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.ts index 18d5014bfccf..3720fcc1e347 100644 --- a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.ts +++ b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.ts @@ -1,6 +1,6 @@ import * as React from 'react'; +import { TreeViewCancellableEvent } from '@mui/x-tree-view/models'; import { - MuiCancellableEvent, TreeViewItemPlugin, useTreeViewContext, UseTreeViewItemsSignature, @@ -38,7 +38,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin { + const handleDragStart = (event: React.DragEvent & TreeViewCancellableEvent) => { externalEventHandlers.onDragStart?.(event); if (event.defaultMuiPrevented || event.defaultPrevented) { return; @@ -66,7 +66,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin { + const handleRootDragOver = (event: React.DragEvent & TreeViewCancellableEvent) => { externalEventHandlers.onDragOver?.(event); if (event.defaultMuiPrevented) { return; @@ -75,7 +75,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin { + const handleRootDragEnd = (event: React.DragEvent & TreeViewCancellableEvent) => { externalEventHandlers.onDragEnd?.(event); if (event.defaultMuiPrevented) { return; @@ -100,7 +100,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin { + const handleDragOver = (event: React.DragEvent & TreeViewCancellableEvent) => { externalEventHandlers.onDragOver?.(event); if (event.defaultMuiPrevented || validActionsRef.current == null) { return; @@ -119,7 +119,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin { + const handleDragEnter = (event: React.DragEvent & TreeViewCancellableEvent) => { externalEventHandlers.onDragEnter?.(event); if (event.defaultMuiPrevented) { return; diff --git a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts index aa5f519e2c85..55f09656d05b 100644 --- a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts +++ b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts @@ -3,9 +3,12 @@ import { DefaultizedProps, TreeViewPluginSignature, UseTreeViewItemsSignature, - MuiCancellableEventHandler, } from '@mui/x-tree-view/internals'; -import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models'; +import { + TreeViewItemId, + TreeViewItemsReorderingAction, + TreeViewCancellableEventHandler, +} from '@mui/x-tree-view/models'; import { TreeItem2DragAndDropOverlayProps } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay'; export interface UseTreeViewItemsReorderingInstance { @@ -136,14 +139,14 @@ export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{ export interface UseTreeItem2RootSlotPropsFromItemsReordering { draggable?: true; - onDragStart?: MuiCancellableEventHandler; - onDragOver?: MuiCancellableEventHandler; - onDragEnd?: MuiCancellableEventHandler; + onDragStart?: TreeViewCancellableEventHandler; + onDragOver?: TreeViewCancellableEventHandler; + onDragEnd?: TreeViewCancellableEventHandler; } export interface UseTreeItem2ContentSlotPropsFromItemsReordering { - onDragEnter?: MuiCancellableEventHandler; - onDragOver?: MuiCancellableEventHandler; + onDragEnter?: TreeViewCancellableEventHandler; + onDragOver?: TreeViewCancellableEventHandler; } export interface UseTreeItem2DragAndDropOverlaySlotPropsFromItemsReordering diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts b/packages/x-tree-view/src/TreeItem/TreeItem.types.ts index c00ccde26717..222266527fa9 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts +++ b/packages/x-tree-view/src/TreeItem/TreeItem.types.ts @@ -5,9 +5,8 @@ import { TransitionProps } from '@mui/material/transitions'; import { SxProps } from '@mui/system'; import { TreeItemContentProps } from './TreeItemContent'; import { TreeItemClasses } from './treeItemClasses'; -import { TreeViewItemId } from '../models'; +import { TreeViewItemId, TreeViewCancellableEventHandler } from '../models'; import { SlotComponentPropsFromProps } from '../internals/models'; -import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent'; import { UseTreeViewIconsSignature } from '../internals/plugins/useTreeViewIcons'; import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection'; import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems'; @@ -103,7 +102,7 @@ export interface TreeItemProps extends Omit, /** * Callback fired when a key of the keyboard is pressed on the item. */ - onKeyDown?: MuiCancellableEventHandler>; + onKeyDown?: TreeViewCancellableEventHandler>; } export interface TreeItemOwnerState extends TreeItemProps { diff --git a/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx b/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx index 5df9134e2cf1..15a0d7349679 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx @@ -8,7 +8,7 @@ import { TreeItem2DragAndDropOverlayProps, } from '../TreeItem2DragAndDropOverlay'; import { TreeItem2LabelInput, TreeItem2LabelInputProps } from '../TreeItem2LabelInput'; -import { MuiCancellableEvent } from '../internals/models'; +import { TreeViewCancellableEvent } from '../models'; export interface TreeItemContentProps extends React.HTMLAttributes { className?: string; @@ -136,7 +136,7 @@ const TreeItemContent = React.forwardRef(function TreeItemContent( } }; - const handleLabelDoubleClick = (event: React.MouseEvent & MuiCancellableEvent) => { + const handleLabelDoubleClick = (event: React.MouseEvent & TreeViewCancellableEvent) => { if (event.defaultMuiPrevented) { return; } diff --git a/packages/x-tree-view/src/TreeItem/useTreeItemState.ts b/packages/x-tree-view/src/TreeItem/useTreeItemState.ts index f28549c2603c..555368413188 100644 --- a/packages/x-tree-view/src/TreeItem/useTreeItemState.ts +++ b/packages/x-tree-view/src/TreeItem/useTreeItemState.ts @@ -1,6 +1,6 @@ 'use client'; import * as React from 'react'; -import { MuiCancellableEvent } from '../internals/models/MuiCancellableEvent'; +import { TreeViewCancellableEvent } from '../models'; import { useTreeViewContext } from '../internals/TreeViewProvider'; import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection'; import { UseTreeViewExpansionSignature } from '../internals/plugins/useTreeViewExpansion'; @@ -107,7 +107,7 @@ export function useTreeItemState(itemId: string) { }; const handleSaveItemLabel = ( - event: React.SyntheticEvent & MuiCancellableEvent, + event: React.SyntheticEvent & TreeViewCancellableEvent, label: string, ) => { if (!hasPlugin(instance, useTreeViewLabel)) { diff --git a/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts b/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts index e72de430bd95..d4be82964189 100644 --- a/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts +++ b/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts @@ -3,7 +3,7 @@ import { SlotComponentProps } from '@mui/utils'; import { UseTreeItem2Parameters, UseTreeItem2Status } from '../useTreeItem2'; import { TreeItemClasses } from '../TreeItem'; import { TreeItem2IconSlotProps, TreeItem2IconSlots } from '../TreeItem2Icon'; -import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent'; +import { TreeViewCancellableEventHandler } from '../models'; export interface TreeItem2Slots extends TreeItem2IconSlots { /** @@ -87,11 +87,11 @@ export interface TreeItem2Props /** * Callback fired when the item root is blurred. */ - onBlur?: MuiCancellableEventHandler>; + onBlur?: TreeViewCancellableEventHandler>; /** * Callback fired when a key is pressed on the keyboard and the tree is in focus. */ - onKeyDown?: MuiCancellableEventHandler>; + onKeyDown?: TreeViewCancellableEventHandler>; } export interface TreeItem2OwnerState extends Omit, UseTreeItem2Status {} diff --git a/packages/x-tree-view/src/TreeItem2LabelInput/TreeItem2LabelInput.types.ts b/packages/x-tree-view/src/TreeItem2LabelInput/TreeItem2LabelInput.types.ts index 099b8c5b2b5e..73b8e8159fa2 100644 --- a/packages/x-tree-view/src/TreeItem2LabelInput/TreeItem2LabelInput.types.ts +++ b/packages/x-tree-view/src/TreeItem2LabelInput/TreeItem2LabelInput.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent'; +import { TreeViewCancellableEventHandler } from '../models'; export interface TreeItem2LabelInputProps { value?: string; @@ -8,8 +8,8 @@ export interface TreeItem2LabelInputProps { */ 'data-element'?: 'labelInput'; onChange?: React.ChangeEventHandler; - onKeyDown?: MuiCancellableEventHandler>; - onBlur?: MuiCancellableEventHandler>; + onKeyDown?: TreeViewCancellableEventHandler>; + onBlur?: TreeViewCancellableEventHandler>; autoFocus?: true; type?: 'text'; } diff --git a/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx b/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx index cac94733ea71..1204f925ff97 100644 --- a/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx +++ b/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { MuiCancellableEvent } from '../../internals/models/MuiCancellableEvent'; +import { TreeViewCancellableEvent } from '../../models'; import { useTreeViewContext } from '../../internals/TreeViewProvider'; import { UseTreeViewSelectionSignature } from '../../internals/plugins/useTreeViewSelection'; import { UseTreeViewExpansionSignature } from '../../internals/plugins/useTreeViewExpansion'; @@ -150,7 +150,7 @@ export const useTreeItem2Utils = < }; const handleSaveItemLabel = ( - event: React.SyntheticEvent & MuiCancellableEvent, + event: React.SyntheticEvent & TreeViewCancellableEvent, label: string, ) => { if (!hasPlugin(instance, useTreeViewLabel)) { diff --git a/packages/x-tree-view/src/internals/index.ts b/packages/x-tree-view/src/internals/index.ts index 6fd119a8ffb9..fa24b5ede3fb 100644 --- a/packages/x-tree-view/src/internals/index.ts +++ b/packages/x-tree-view/src/internals/index.ts @@ -16,8 +16,6 @@ export type { TreeViewInstance, DefaultizedProps, TreeViewItemPlugin, - MuiCancellableEvent, - MuiCancellableEventHandler, } from './models'; // Core plugins diff --git a/packages/x-tree-view/src/internals/models/MuiCancellableEvent.ts b/packages/x-tree-view/src/internals/models/MuiCancellableEvent.ts deleted file mode 100644 index 78596ff9ba9e..000000000000 --- a/packages/x-tree-view/src/internals/models/MuiCancellableEvent.ts +++ /dev/null @@ -1,5 +0,0 @@ -export type MuiCancellableEvent = { - defaultMuiPrevented?: boolean; -}; - -export type MuiCancellableEventHandler = (event: Event & MuiCancellableEvent) => void; diff --git a/packages/x-tree-view/src/internals/models/index.ts b/packages/x-tree-view/src/internals/models/index.ts index 7478186e4ea9..9095cd823af3 100644 --- a/packages/x-tree-view/src/internals/models/index.ts +++ b/packages/x-tree-view/src/internals/models/index.ts @@ -2,4 +2,3 @@ export * from './helpers'; export * from './plugin'; export * from './itemPlugin'; export * from './treeView'; -export * from './MuiCancellableEvent'; diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts index 96fe7f1b34a3..5e86c40374bd 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts @@ -7,7 +7,7 @@ import { UseTreeViewFocusSignature } from './useTreeViewFocus.types'; import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler'; import { getActiveElement } from '../../utils/utils'; import { getFirstNavigableItem } from '../../utils/tree'; -import { MuiCancellableEvent } from '../../models/MuiCancellableEvent'; +import { TreeViewCancellableEvent } from '../../../models'; import { convertSelectedItemsToArray } from '../useTreeViewSelection/useTreeViewSelection.utils'; const useDefaultFocusableItemId = ( @@ -110,7 +110,7 @@ export const useTreeViewFocus: TreeViewPlugin = ({ const createRootHandleFocus = (otherHandlers: EventHandlers) => - (event: React.FocusEvent & MuiCancellableEvent) => { + (event: React.FocusEvent & TreeViewCancellableEvent) => { otherHandlers.onFocus?.(event); if (event.defaultMuiPrevented) { return; diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts index 5b2739b6f988..e5f587f75571 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts @@ -1,7 +1,8 @@ import * as React from 'react'; import { useRtl } from '@mui/system/RtlProvider'; import useEventCallback from '@mui/utils/useEventCallback'; -import { TreeViewItemMeta, TreeViewPlugin, MuiCancellableEvent } from '../../models'; +import { TreeViewCancellableEvent } from '../../../models'; +import { TreeViewItemMeta, TreeViewPlugin } from '../../models'; import { getFirstNavigableItem, getLastNavigableItem, @@ -85,7 +86,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin< // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction const handleItemKeyDown = ( - event: React.KeyboardEvent & MuiCancellableEvent, + event: React.KeyboardEvent & TreeViewCancellableEvent, itemId: string, ) => { if (event.defaultMuiPrevented) { diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.ts index 921e874c9e80..deaec508ac61 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.ts @@ -1,10 +1,10 @@ import * as React from 'react'; -import { TreeViewPluginSignature, MuiCancellableEvent } from '../../models'; +import { TreeViewPluginSignature } from '../../models'; import { UseTreeViewItemsSignature } from '../useTreeViewItems'; import { UseTreeViewSelectionSignature } from '../useTreeViewSelection'; import { UseTreeViewFocusSignature } from '../useTreeViewFocus'; import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion'; -import { TreeViewItemId } from '../../../models'; +import { TreeViewItemId, TreeViewCancellableEvent } from '../../../models'; import { UseTreeViewLabelSignature } from '../useTreeViewLabel'; export interface UseTreeViewKeyboardNavigationInstance { @@ -18,11 +18,11 @@ export interface UseTreeViewKeyboardNavigationInstance { /** * Callback fired when a key is pressed on an item. * Handles all the keyboard navigation logic. - * @param {React.KeyboardEvent & MuiCancellableEvent} event The keyboard event that triggered the callback. + * @param {React.KeyboardEvent & TreeViewCancellableEvent} event The keyboard event that triggered the callback. * @param {TreeViewItemId} itemId The id of the item that the event was triggered on. */ handleItemKeyDown: ( - event: React.KeyboardEvent & MuiCancellableEvent, + event: React.KeyboardEvent & TreeViewCancellableEvent, itemId: TreeViewItemId, ) => void; } diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.ts index 3a663be337b8..6f2aaf91f2f3 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.ts @@ -1,6 +1,7 @@ import * as React from 'react'; import { useTreeViewContext } from '../../TreeViewProvider'; -import { MuiCancellableEvent, TreeViewItemPlugin } from '../../models'; +import { TreeViewCancellableEvent } from '../../../models'; +import { TreeViewItemPlugin } from '../../models'; import { UseTreeViewItemsSignature } from '../useTreeViewItems'; import { UseTreeItem2LabelInputSlotPropsFromLabelEditing, @@ -34,7 +35,7 @@ export const useTreeViewLabelItemPlugin: TreeViewItemPlugin = ({ props }) = } const handleKeydown = ( - event: React.KeyboardEvent & MuiCancellableEvent, + event: React.KeyboardEvent & TreeViewCancellableEvent, ) => { externalEventHandlers.onKeyDown?.(event); if (event.defaultMuiPrevented) { @@ -49,7 +50,9 @@ export const useTreeViewLabelItemPlugin: TreeViewItemPlugin = ({ props }) = } }; - const handleBlur = (event: React.FocusEvent & MuiCancellableEvent) => { + const handleBlur = ( + event: React.FocusEvent & TreeViewCancellableEvent, + ) => { externalEventHandlers.onBlur?.(event); if (event.defaultMuiPrevented) { return; diff --git a/packages/x-tree-view/src/models/events.ts b/packages/x-tree-view/src/models/events.ts new file mode 100644 index 000000000000..bddb1e4fea7e --- /dev/null +++ b/packages/x-tree-view/src/models/events.ts @@ -0,0 +1,8 @@ +export type TreeViewCancellableEvent = { + // TODO: Rename `defaultXTreeViewPrevented` + defaultMuiPrevented?: boolean; +}; + +export type TreeViewCancellableEventHandler = ( + event: Event & TreeViewCancellableEvent, +) => void; diff --git a/packages/x-tree-view/src/models/index.ts b/packages/x-tree-view/src/models/index.ts index d3853dec6dd7..460d553fdd5c 100644 --- a/packages/x-tree-view/src/models/index.ts +++ b/packages/x-tree-view/src/models/index.ts @@ -1,4 +1,5 @@ export * from './items'; +export * from './events'; // Utils shared across the X packages export type { PropsFromSlot } from '@mui/x-internals/slots'; diff --git a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts index 54f210b799e5..6eb05172543f 100644 --- a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts +++ b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts @@ -2,6 +2,7 @@ import * as React from 'react'; import { EventHandlers } from '@mui/utils'; import extractEventHandlers from '@mui/utils/extractEventHandlers'; import useForkRef from '@mui/utils/useForkRef'; +import { TreeViewCancellableEvent } from '../models'; import { UseTreeItem2Parameters, UseTreeItem2ReturnValue, @@ -19,10 +20,7 @@ import { UseTreeItem2ContentSlotPropsFromUseTreeItem, } from './useTreeItem2.types'; import { useTreeViewContext } from '../internals/TreeViewProvider'; -import { - MuiCancellableEvent, - TreeViewItemPluginSlotPropsEnhancerParams, -} from '../internals/models'; +import { TreeViewItemPluginSlotPropsEnhancerParams } from '../internals/models'; import { useTreeItem2Utils } from '../hooks/useTreeItem2Utils'; import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext'; import { isTargetInDescendants } from '../internals/utils/tree'; @@ -65,7 +63,7 @@ export const useTreeItem2 = < const createRootHandleFocus = (otherHandlers: EventHandlers) => - (event: React.FocusEvent & MuiCancellableEvent) => { + (event: React.FocusEvent & TreeViewCancellableEvent) => { otherHandlers.onFocus?.(event); if (event.defaultMuiPrevented) { return; @@ -79,7 +77,7 @@ export const useTreeItem2 = < const createRootHandleBlur = (otherHandlers: EventHandlers) => - (event: React.FocusEvent & MuiCancellableEvent) => { + (event: React.FocusEvent & TreeViewCancellableEvent) => { otherHandlers.onBlur?.(event); if (event.defaultMuiPrevented) { return; @@ -109,7 +107,7 @@ export const useTreeItem2 = < const createRootHandleKeyDown = (otherHandlers: EventHandlers) => - (event: React.KeyboardEvent & MuiCancellableEvent) => { + (event: React.KeyboardEvent & TreeViewCancellableEvent) => { otherHandlers.onKeyDown?.(event); if ( event.defaultMuiPrevented || @@ -122,7 +120,7 @@ export const useTreeItem2 = < }; const createLabelHandleDoubleClick = - (otherHandlers: EventHandlers) => (event: React.MouseEvent & MuiCancellableEvent) => { + (otherHandlers: EventHandlers) => (event: React.MouseEvent & TreeViewCancellableEvent) => { otherHandlers.onDoubleClick?.(event); if (event.defaultMuiPrevented) { return; @@ -131,7 +129,7 @@ export const useTreeItem2 = < }; const createContentHandleClick = - (otherHandlers: EventHandlers) => (event: React.MouseEvent & MuiCancellableEvent) => { + (otherHandlers: EventHandlers) => (event: React.MouseEvent & TreeViewCancellableEvent) => { otherHandlers.onClick?.(event); onItemClick?.(event, itemId); @@ -148,7 +146,7 @@ export const useTreeItem2 = < }; const createContentHandleMouseDown = - (otherHandlers: EventHandlers) => (event: React.MouseEvent & MuiCancellableEvent) => { + (otherHandlers: EventHandlers) => (event: React.MouseEvent & TreeViewCancellableEvent) => { otherHandlers.onMouseDown?.(event); if (event.defaultMuiPrevented) { return; @@ -162,7 +160,7 @@ export const useTreeItem2 = < const createCheckboxHandleChange = (otherHandlers: EventHandlers) => - (event: React.ChangeEvent & MuiCancellableEvent) => { + (event: React.ChangeEvent & TreeViewCancellableEvent) => { otherHandlers.onChange?.(event); if (event.defaultMuiPrevented) { return; @@ -176,7 +174,7 @@ export const useTreeItem2 = < }; const createIconContainerHandleClick = - (otherHandlers: EventHandlers) => (event: React.MouseEvent & MuiCancellableEvent) => { + (otherHandlers: EventHandlers) => (event: React.MouseEvent & TreeViewCancellableEvent) => { otherHandlers.onClick?.(event); if (event.defaultMuiPrevented) { return; diff --git a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts index a859514bd283..3d711b079230 100644 --- a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts +++ b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { TreeViewItemId } from '../models'; -import { TreeViewPublicAPI, MuiCancellableEventHandler } from '../internals/models'; +import { TreeViewItemId, TreeViewCancellableEventHandler } from '../models'; +import { TreeViewPublicAPI } from '../internals/models'; import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection'; import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems'; import { UseTreeViewFocusSignature } from '../internals/plugins/useTreeViewFocus'; @@ -41,9 +41,9 @@ export interface UseTreeItem2RootSlotPropsFromUseTreeItem { 'aria-expanded': React.AriaAttributes['aria-expanded']; 'aria-selected': React.AriaAttributes['aria-selected']; 'aria-disabled': React.AriaAttributes['aria-disabled']; - onFocus: MuiCancellableEventHandler>; - onBlur: MuiCancellableEventHandler>; - onKeyDown: MuiCancellableEventHandler>; + onFocus: TreeViewCancellableEventHandler>; + onBlur: TreeViewCancellableEventHandler>; + onKeyDown: TreeViewCancellableEventHandler>; ref: React.RefCallback; /** * Only defined when the `indentationAtItemLevel` experimental feature is enabled. @@ -57,8 +57,8 @@ export type UseTreeItem2RootSlotProps = ExternalProps & UseTreeItem2RootSlotOwnProps; export interface UseTreeItem2ContentSlotPropsFromUseTreeItem { - onClick: MuiCancellableEventHandler; - onMouseDown: MuiCancellableEventHandler; + onClick: TreeViewCancellableEventHandler; + onMouseDown: TreeViewCancellableEventHandler; ref: React.RefCallback | null; status: UseTreeItem2Status; /** @@ -74,7 +74,7 @@ export type UseTreeItem2ContentSlotProps = ExternalProps & UseTreeItem2ContentSlotOwnProps; export interface UseTreeItem2IconContainerSlotOwnProps { - onClick: MuiCancellableEventHandler; + onClick: TreeViewCancellableEventHandler; } export type UseTreeItemIconContainerSlotProps = ExternalProps & @@ -82,7 +82,7 @@ export type UseTreeItemIconContainerSlotProps = ExternalProp export interface UseTreeItem2LabelSlotOwnProps { children: React.ReactNode; - onDoubleClick: MuiCancellableEventHandler; + onDoubleClick: TreeViewCancellableEventHandler; /** * Only defined when the `isItemEditable` experimental feature is enabled. */ @@ -100,7 +100,7 @@ export type UseTreeItem2LabelInputSlotProps = ExternalProps export interface UseTreeItem2CheckboxSlotOwnProps { visible: boolean; checked: boolean; - onChange: MuiCancellableEventHandler>; + onChange: TreeViewCancellableEventHandler>; disabled: boolean; ref: React.RefObject; tabIndex: -1; diff --git a/scripts/x-tree-view-pro.exports.json b/scripts/x-tree-view-pro.exports.json index aa48d50761f1..decec771aa7f 100644 --- a/scripts/x-tree-view-pro.exports.json +++ b/scripts/x-tree-view-pro.exports.json @@ -51,6 +51,8 @@ { "name": "TreeItemSlots", "kind": "Interface" }, { "name": "TreeView", "kind": "Variable" }, { "name": "TreeViewBaseItem", "kind": "TypeAlias" }, + { "name": "TreeViewCancellableEvent", "kind": "TypeAlias" }, + { "name": "TreeViewCancellableEventHandler", "kind": "TypeAlias" }, { "name": "treeViewClasses", "kind": "Variable" }, { "name": "TreeViewClasses", "kind": "Interface" }, { "name": "TreeViewClassKey", "kind": "TypeAlias" }, diff --git a/scripts/x-tree-view.exports.json b/scripts/x-tree-view.exports.json index ad00319179cf..67797b594ce1 100644 --- a/scripts/x-tree-view.exports.json +++ b/scripts/x-tree-view.exports.json @@ -55,6 +55,8 @@ { "name": "TreeItemSlots", "kind": "Interface" }, { "name": "TreeView", "kind": "Variable" }, { "name": "TreeViewBaseItem", "kind": "TypeAlias" }, + { "name": "TreeViewCancellableEvent", "kind": "TypeAlias" }, + { "name": "TreeViewCancellableEventHandler", "kind": "TypeAlias" }, { "name": "treeViewClasses", "kind": "Variable" }, { "name": "TreeViewClasses", "kind": "Interface" }, { "name": "TreeViewClassKey", "kind": "TypeAlias" },