diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json index 15945bbcef96..40b3eef90a27 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" }, @@ -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" }, @@ -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/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/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/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/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-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/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/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/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/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; 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/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) { 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/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', 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', 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: 'É', 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/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]]. 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/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 0559aec75bb8..adf5760aa0fb 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, @@ -52,7 +52,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin { + const handleDragStart = (event: React.DragEvent & TreeViewCancellableEvent) => { externalEventHandlers.onDragStart?.(event); if (event.defaultMuiPrevented || event.defaultPrevented) { return; @@ -80,7 +80,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin { + const handleRootDragOver = (event: React.DragEvent & TreeViewCancellableEvent) => { externalEventHandlers.onDragOver?.(event); if (event.defaultMuiPrevented) { return; @@ -89,7 +89,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin { + const handleRootDragEnd = (event: React.DragEvent & TreeViewCancellableEvent) => { externalEventHandlers.onDragEnd?.(event); if (event.defaultMuiPrevented) { return; @@ -113,7 +113,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin { + const handleDragOver = (event: React.DragEvent & TreeViewCancellableEvent) => { externalEventHandlers.onDragOver?.(event); if (event.defaultMuiPrevented || validActionsRef.current == null) { return; @@ -132,7 +132,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 68d850c6375e..92ec3965813b 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 e11172952051..b3b3da0aac99 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 1220ab3a666b..60155e5a3f34 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'; @@ -124,7 +124,7 @@ export function useTreeItemState(itemId: string) { }; const handleSaveItemLabel = ( - event: React.SyntheticEvent & MuiCancellableEvent, + event: React.SyntheticEvent & TreeViewCancellableEvent, newLabel: 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 49c1d77c483d..a34a31951c7c 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'; @@ -174,7 +174,7 @@ export const useTreeItem2Utils = < }; const handleSaveItemLabel = ( - event: React.SyntheticEvent & MuiCancellableEvent, + event: React.SyntheticEvent & TreeViewCancellableEvent, newLabel: 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 ff637415292e..2675b3f72db8 100644 --- a/packages/x-tree-view/src/internals/index.ts +++ b/packages/x-tree-view/src/internals/index.ts @@ -18,8 +18,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 ee10da87408b..bf4557d4ff02 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts @@ -6,7 +6,7 @@ import { TreeViewPlugin, TreeViewUsedInstance, TreeViewUsedStore } from '../../m import { UseTreeViewFocusSignature } from './useTreeViewFocus.types'; import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler'; import { getFirstNavigableItem } from '../../utils/tree'; -import { MuiCancellableEvent } from '../../models/MuiCancellableEvent'; +import { TreeViewCancellableEvent } from '../../../models'; import { convertSelectedItemsToArray } from '../useTreeViewSelection/useTreeViewSelection.utils'; import { selectorDefaultFocusableItemId, @@ -118,7 +118,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 fc4c344541d9..bcbccc6cd42e 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, @@ -93,7 +94,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 1e749a886dcc..33d66fc3d7d5 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, @@ -37,7 +38,7 @@ export const useTreeViewLabelItemPlugin: TreeViewItemPlugin = ({ props }) = } const handleKeydown = ( - event: React.KeyboardEvent & MuiCancellableEvent, + event: React.KeyboardEvent & TreeViewCancellableEvent, ) => { externalEventHandlers.onKeyDown?.(event); if (event.defaultMuiPrevented) { @@ -52,7 +53,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 d79e43ca0031..bd5af922cdb0 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'; @@ -71,7 +69,7 @@ export const useTreeItem2 = < const createRootHandleFocus = (otherHandlers: EventHandlers) => - (event: React.FocusEvent & MuiCancellableEvent) => { + (event: React.FocusEvent & TreeViewCancellableEvent) => { otherHandlers.onFocus?.(event); if (event.defaultMuiPrevented) { return; @@ -85,7 +83,7 @@ export const useTreeItem2 = < const createRootHandleBlur = (otherHandlers: EventHandlers) => - (event: React.FocusEvent & MuiCancellableEvent) => { + (event: React.FocusEvent & TreeViewCancellableEvent) => { otherHandlers.onBlur?.(event); if (event.defaultMuiPrevented) { return; @@ -115,7 +113,7 @@ export const useTreeItem2 = < const createRootHandleKeyDown = (otherHandlers: EventHandlers) => - (event: React.KeyboardEvent & MuiCancellableEvent) => { + (event: React.KeyboardEvent & TreeViewCancellableEvent) => { otherHandlers.onKeyDown?.(event); if ( event.defaultMuiPrevented || @@ -128,7 +126,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; @@ -137,7 +135,7 @@ export const useTreeItem2 = < }; const createContentHandleClick = - (otherHandlers: EventHandlers) => (event: React.MouseEvent & MuiCancellableEvent) => { + (otherHandlers: EventHandlers) => (event: React.MouseEvent & TreeViewCancellableEvent) => { otherHandlers.onClick?.(event); onItemClick(event, itemId); @@ -154,7 +152,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; @@ -168,7 +166,7 @@ export const useTreeItem2 = < const createCheckboxHandleChange = (otherHandlers: EventHandlers) => - (event: React.ChangeEvent & MuiCancellableEvent) => { + (event: React.ChangeEvent & TreeViewCancellableEvent) => { otherHandlers.onChange?.(event); if (event.defaultMuiPrevented) { return; @@ -182,7 +180,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 c92ca98bb527..4d7b15fb60e2 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'; @@ -46,9 +46,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. @@ -62,8 +62,8 @@ export type UseTreeItem2RootSlotProps = ExternalProps & UseTreeItem2RootSlotOwnProps; export interface UseTreeItem2ContentSlotPropsFromUseTreeItem { - onClick: MuiCancellableEventHandler; - onMouseDown: MuiCancellableEventHandler; + onClick: TreeViewCancellableEventHandler; + onMouseDown: TreeViewCancellableEventHandler; ref: React.RefCallback | null; status: UseTreeItem2Status; /** @@ -79,7 +79,7 @@ export type UseTreeItem2ContentSlotProps = ExternalProps & UseTreeItem2ContentSlotOwnProps; export interface UseTreeItem2IconContainerSlotOwnProps { - onClick: MuiCancellableEventHandler; + onClick: TreeViewCancellableEventHandler; } export type UseTreeItemIconContainerSlotProps = ExternalProps & @@ -87,7 +87,7 @@ export type UseTreeItemIconContainerSlotProps = ExternalProp export interface UseTreeItem2LabelSlotOwnProps { children: React.ReactNode; - onDoubleClick: MuiCancellableEventHandler; + onDoubleClick: TreeViewCancellableEventHandler; /** * Only defined when the `isItemEditable` experimental feature is enabled. */ @@ -105,7 +105,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-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" }, 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" }, 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" },