From b109ff5e3bc2a98a745e624c20b6304baa8109e7 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Mon, 24 Oct 2022 15:19:46 +0500 Subject: [PATCH 001/104] Improves column menu --- .../data-grid/column-header/column-header.md | 6 -- .../ColumnMenuGrid.js | 2 +- .../ColumnMenuGrid.tsx | 2 +- .../column-menu/CondensedColumnMenuGrid.js | 17 ++++ .../column-menu/CondensedColumnMenuGrid.tsx | 17 ++++ .../CondensedColumnMenuGrid.tsx.preview | 1 + .../column-menu/CondensedColumnMenuGridPro.js | 20 +++++ .../CondensedColumnMenuGridPro.tsx | 20 +++++ .../column-menu/DisabledColumnMenuGrid.js | 17 ++++ .../column-menu/DisabledColumnMenuGrid.tsx | 17 ++++ .../DisabledColumnMenuGrid.tsx.preview} | 0 .../data/data-grid/column-menu/column-menu.md | 43 +++++++++ docs/data/pages.ts | 1 + docs/pages/x/react-data-grid/column-menu.js | 7 ++ docsTech/README.md | 10 +-- docsTech/filtering.md | 2 +- docsTech/processing.md | 17 ++-- .../GridAggregationColumnMenuItem.tsx | 89 ++++++++++++------- .../useGridAggregationPreProcessors.tsx | 13 +-- .../rowGrouping/useGridRowGrouping.tsx | 8 +- .../components/GridColumnPinningMenuItems.tsx | 77 +++++++++++++++- .../columnPinning/useGridColumnPinning.tsx | 40 ++++++--- .../src/components/menu/GridMenu.tsx | 3 + .../menu/columnMenu/GridColumnMenu.tsx | 15 +++- .../menu/columnMenu/GridColumnMenuProps.ts | 1 + .../menu/columnMenu/GridColumnsMenuItem.tsx | 30 ++++++- .../menu/columnMenu/GridFilterItemProps.ts | 1 + .../menu/columnMenu/GridFilterMenuItem.tsx | 33 ++++++- .../menu/columnMenu/HideGridColMenuItem.tsx | 16 +++- .../menu/columnMenu/SortGridMenuItems.tsx | 65 +++++++++++++- .../src/constants/localeTextConstants.ts | 5 ++ .../src/models/api/gridLocaleTextApi.ts | 5 ++ 32 files changed, 521 insertions(+), 79 deletions(-) rename docs/data/data-grid/{column-header => column-menu}/ColumnMenuGrid.js (88%) rename docs/data/data-grid/{column-header => column-menu}/ColumnMenuGrid.tsx (88%) create mode 100644 docs/data/data-grid/column-menu/CondensedColumnMenuGrid.js create mode 100644 docs/data/data-grid/column-menu/CondensedColumnMenuGrid.tsx create mode 100644 docs/data/data-grid/column-menu/CondensedColumnMenuGrid.tsx.preview create mode 100644 docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.js create mode 100644 docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.tsx create mode 100644 docs/data/data-grid/column-menu/DisabledColumnMenuGrid.js create mode 100644 docs/data/data-grid/column-menu/DisabledColumnMenuGrid.tsx rename docs/data/data-grid/{column-header/ColumnMenuGrid.tsx.preview => column-menu/DisabledColumnMenuGrid.tsx.preview} (100%) create mode 100644 docs/data/data-grid/column-menu/column-menu.md create mode 100644 docs/pages/x/react-data-grid/column-menu.js diff --git a/docs/data/data-grid/column-header/column-header.md b/docs/data/data-grid/column-header/column-header.md index 62984f63f2b6..81d30f06025b 100644 --- a/docs/data/data-grid/column-header/column-header.md +++ b/docs/data/data-grid/column-header/column-header.md @@ -42,12 +42,6 @@ const columns: GridColDef[] = [ You can check the [styling header](/x/react-data-grid/style/#styling-column-headers) section for more information. -## Column menu - -By default, each column header displays a column menu. The column menu allows actions to be performed in the context of the target column, e.g. filtering. To disable the column menu, set the prop `disableColumnMenu={true}`. - -{{"demo": "ColumnMenuGrid.js", "bg": "inline"}} - ## API - [DataGrid](/x/api/data-grid/data-grid/) diff --git a/docs/data/data-grid/column-header/ColumnMenuGrid.js b/docs/data/data-grid/column-menu/ColumnMenuGrid.js similarity index 88% rename from docs/data/data-grid/column-header/ColumnMenuGrid.js rename to docs/data/data-grid/column-menu/ColumnMenuGrid.js index ed82e19e0b43..2a353c33dca2 100644 --- a/docs/data/data-grid/column-header/ColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/ColumnMenuGrid.js @@ -11,7 +11,7 @@ export default function ColumnMenuGrid() { return (
- +
); } diff --git a/docs/data/data-grid/column-header/ColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/ColumnMenuGrid.tsx similarity index 88% rename from docs/data/data-grid/column-header/ColumnMenuGrid.tsx rename to docs/data/data-grid/column-menu/ColumnMenuGrid.tsx index ed82e19e0b43..2a353c33dca2 100644 --- a/docs/data/data-grid/column-header/ColumnMenuGrid.tsx +++ b/docs/data/data-grid/column-menu/ColumnMenuGrid.tsx @@ -11,7 +11,7 @@ export default function ColumnMenuGrid() { return (
- +
); } diff --git a/docs/data/data-grid/column-menu/CondensedColumnMenuGrid.js b/docs/data/data-grid/column-menu/CondensedColumnMenuGrid.js new file mode 100644 index 000000000000..96cd3ebc5459 --- /dev/null +++ b/docs/data/data-grid/column-menu/CondensedColumnMenuGrid.js @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +export default function CondensedColumnMenuGrid() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 20, + maxColumns: 5, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-menu/CondensedColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/CondensedColumnMenuGrid.tsx new file mode 100644 index 000000000000..96cd3ebc5459 --- /dev/null +++ b/docs/data/data-grid/column-menu/CondensedColumnMenuGrid.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +export default function CondensedColumnMenuGrid() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 20, + maxColumns: 5, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-menu/CondensedColumnMenuGrid.tsx.preview b/docs/data/data-grid/column-menu/CondensedColumnMenuGrid.tsx.preview new file mode 100644 index 000000000000..6c7418eb0fb2 --- /dev/null +++ b/docs/data/data-grid/column-menu/CondensedColumnMenuGrid.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.js b/docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.js new file mode 100644 index 000000000000..80b505121767 --- /dev/null +++ b/docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.js @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { DataGridPremium } from '@mui/x-data-grid-premium'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +export default function CondensedColumnMenuGridPro() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 20, + maxColumns: 5, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.tsx b/docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.tsx new file mode 100644 index 000000000000..80b505121767 --- /dev/null +++ b/docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { DataGridPremium } from '@mui/x-data-grid-premium'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +export default function CondensedColumnMenuGridPro() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 20, + maxColumns: 5, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.js b/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.js new file mode 100644 index 000000000000..cda06a5599bd --- /dev/null +++ b/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.js @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +export default function DisabledColumnMenuGrid() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 20, + maxColumns: 5, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.tsx new file mode 100644 index 000000000000..cda06a5599bd --- /dev/null +++ b/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +export default function DisabledColumnMenuGrid() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 20, + maxColumns: 5, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-header/ColumnMenuGrid.tsx.preview b/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.tsx.preview similarity index 100% rename from docs/data/data-grid/column-header/ColumnMenuGrid.tsx.preview rename to docs/data/data-grid/column-menu/DisabledColumnMenuGrid.tsx.preview diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md new file mode 100644 index 000000000000..a9c31983670b --- /dev/null +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -0,0 +1,43 @@ +--- +title: Data Grid - Column menu +--- + +# Data grid - Column menu + +

Customize your columns menu.

+ +## Column menu + +Each header comes with a column menu using which displays quickly accessible grid features like visibility of columns, sorting, filtering and others. + +It can be accessed by clicking on 3-dots icon that appear on hover on a header cell. + +{{"demo": "ColumnMenuGrid.js", "bg": "inline"}} + +## Disabled column menu + +By default, each column header displays a column menu. The column menu allows actions to be performed in the context of the target column, e.g. filtering. To disable the column menu, set the prop `disableColumnMenu={true}`. + +{{"demo": "DisabledColumnMenuGrid.js", "bg": "inline"}} + +## Condensed column menu + +In order to have a more viewable column menu you can use `condensed: true` componentProp which is `false` by default. + +```tsx + +``` + +{{"demo": "CondensedColumnMenuGrid.js", "bg": "inline"}} + +### Condensed column menu with Pro/Premium options [](/x/introduction/licensing/#pro-plan)[](/x/introduction/licensing/#premium-plan) + +You can also access `Pro` features like column pinning etc from the column menu when using `DataGridPro` or `DataGridPremium`. + +{{"demo": "CondensedColumnMenuGridPro.js", "bg": "inline"}} + +## API + +- [DataGrid](/x/api/data-grid/data-grid/) +- [DataGridPro](/x/api/data-grid/data-grid-pro/) +- [DataGridPremium](/x/api/data-grid/data-grid-premium/) diff --git a/docs/data/pages.ts b/docs/data/pages.ts index aba888d0aaa6..8859bbba7c3c 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -31,6 +31,7 @@ const pages: MuiPage[] = [ { pathname: '/x/react-data-grid/column-dimensions' }, { pathname: '/x/react-data-grid/column-visibility' }, { pathname: '/x/react-data-grid/column-header' }, + { pathname: '/x/react-data-grid/column-menu' }, { pathname: '/x/react-data-grid/column-ordering', plan: 'pro' }, { pathname: '/x/react-data-grid/column-pinning', plan: 'pro' }, { pathname: '/x/react-data-grid/column-spanning' }, diff --git a/docs/pages/x/react-data-grid/column-menu.js b/docs/pages/x/react-data-grid/column-menu.js new file mode 100644 index 000000000000..293f6c798aca --- /dev/null +++ b/docs/pages/x/react-data-grid/column-menu.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/data-grid/column-menu/column-menu.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docsTech/README.md b/docsTech/README.md index 5ebbf937a50e..005337f752ad 100644 --- a/docsTech/README.md +++ b/docsTech/README.md @@ -13,7 +13,7 @@ Here we will discuss how the code is structured, to simplify codebase navigation In folder `packages` you will find one subfolder per exported package (`@mui/x-data-grid`, `@mui/x-data-grid-pro`, ...) -Since `@mui/x-data-grid-pro` is an extension of `@mui/x-data-grid`, it imports all the common features from `@mui/x-data-grid` and the internal logic are imported from `@mui/x-data-grid/internals` which is defined in `x-data-grid/src/internals/index.ts`. +Since `@mui/x-data-grid-pro` is an extension of `@mui/x-data-grid`, it imports all the common features from `@mui/x-data-grid` and the internal logic are imported from `@mui/x-data-grid/internals` which is defined in `x-data-grid/src/internals/index.ts`. And `@mui/x-data-grid-premium` is a further extension of `@mui/x-data-grid-pro`, it imports all the common features from both `@mui/x-data-grid` and `@mui/x-data-grid-pro` and adds some new features on top of that. In each package, the most used folders are: @@ -22,7 +22,7 @@ In each package, the most used folders are: - `hooks/core` defines logics for developers: initialization of the grid, error handling, translations, ... - `hooks/utils` defines logics for contributors: manipulating the state, managing events, ... - `hooks/features` defines logics for end-users: selection, filtering, editing, ... -- `DataGrid[Pro]/useDataGrid[Pro]Component.tsx` is the file in which all the hooks are added to the grid +- `DataGrid[Pro|Premium]/useDataGrid[Pro|Premium]Component.tsx` is the file in which all the hooks are added to the grid - `colDef` contains the default values for each [column type](https://mui.com/x/react-data-grid/column-definition/#column-types): rendering cell, filter operators, sorting method, ... - `models` define the typescript interfaces of the gird @@ -68,7 +68,7 @@ Notice that all the events do not have an associated prop `on` Here you will find more precision about how some features are designed. -- [filtering](./filtering) -- [virtualization](./virtualization) -- [processing](./processing) +- [filtering](./filtering.md) +- [virtualization](./virtualization.md) +- [processing](./processing.md) - print (TODO) diff --git a/docsTech/filtering.md b/docsTech/filtering.md index 29f295c29c98..37e1234003a3 100644 --- a/docsTech/filtering.md +++ b/docsTech/filtering.md @@ -4,7 +4,7 @@ ### Data -First, let's see how the filtering is saved in the state. Here are the types of the [filter model](https://mui.com/x/api/data-grid/grid-filter-model/). It is made of a `linkOperator`, and a list of [items](https://mui.com/x/api/data-grid/grid-filter-item/). Each item corresponds to a line in the filtering panel. Each item corresponds to a line in the filter panel. +First, let's see how the filtering is saved in the state. Here are the types of the [filter model](https://mui.com/x/api/data-grid/grid-filter-model/). It is made of a `linkOperator`, and a list of [items](https://mui.com/x/api/data-grid/grid-filter-item/). Each item corresponds to a line in the filtering panel. ```ts interface GridFilterModel { diff --git a/docsTech/processing.md b/docsTech/processing.md index 220ed641bb91..e402ae734f62 100644 --- a/docsTech/processing.md +++ b/docsTech/processing.md @@ -35,7 +35,12 @@ We can classify the pipe-processing into several categories: **Publisher**: `useGridColumns` plugin before updating `state.columns`. -**Why register to this processing**: Add some columns (eg: processor of the Selection plugin) or re-order the columns (eg: processor of the Column Pinning plugin). +**Why register to this processing** + +A few possible reasons could be to: + +- Add some columns (eg: processor of the Selection plugin) +- Re-order the columns (eg: processor of the Column Pinning plugin). **Example**: @@ -59,17 +64,19 @@ const addCustomFeatureColumn = React.useCallback> [apiRef, customFeatureHeightLookup], ); -useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight); +useGridRegisterPipeProcessor(apiRef, 'rowHeight', addCustomFeatureHeight); ``` ##### `'hydrateRows'` diff --git a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx index 384ee60b2229..e84d8842c589 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx @@ -1,7 +1,10 @@ import * as React from 'react'; import { GridColDef, useGridSelector } from '@mui/x-data-grid-pro'; import MenuItem from '@mui/material/MenuItem'; +import Stack from '@mui/material/Stack'; import FormControl from '@mui/material/FormControl'; +import IconButton from '@mui/material/IconButton'; +import ClearIcon from '@mui/icons-material/Clear'; import InputLabel from '@mui/material/InputLabel'; import { unstable_useId as useId } from '@mui/material/utils'; import Select, { SelectChangeEvent } from '@mui/material/Select'; @@ -18,10 +21,11 @@ interface GridAggregationColumnMenuItemsProps { column: GridColDef; label: string; availableAggregationFunctions: string[]; + condensed?: boolean; } export const GridAggregationColumnMenuItem = (props: GridAggregationColumnMenuItemsProps) => { - const { column, label, availableAggregationFunctions } = props; + const { column, label, availableAggregationFunctions, condensed } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const id = useId(); @@ -47,7 +51,7 @@ export const GridAggregationColumnMenuItem = (props: GridAggregationColumnMenuIt }, [rootProps.aggregationFunctions, aggregationModel, column]); const handleAggregationItemChange = (event: SelectChangeEvent) => { - const newAggregationItem = event.target.value || undefined; + const newAggregationItem = event.target?.value || undefined; const currentModel = gridAggregationModelSelector(apiRef); const { [column.field]: columnItem, ...otherColumnItems } = currentModel; const newModel: GridAggregationModel = @@ -56,36 +60,59 @@ export const GridAggregationColumnMenuItem = (props: GridAggregationColumnMenuIt : { ...otherColumnItems, [column.field]: newAggregationItem }; apiRef.current.setAggregationModel(newModel); - apiRef.current.hideColumnMenu(); + if (!condensed) { + apiRef.current.hideColumnMenu(); + } }; - return ( - - - {label} - - - + const handleClearClick = () => { + const currentModel = gridAggregationModelSelector(apiRef); + const { [column.field]: columnItem, ...otherColumnItems } = currentModel; + apiRef.current.setAggregationModel(otherColumnItems); + }; + + const renderFormControl = () => ( + + {label} + + ); + if (condensed) { + return ( + + {renderFormControl()} + + + + + ); + } + + return {renderFormControl()}; }; diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx index 99c8dc033a6e..cb61a43d67bf 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx @@ -28,7 +28,7 @@ export const useGridAggregationPreProcessors = ( apiRef: React.MutableRefObject, props: Pick< DataGridPremiumProcessedProps, - 'aggregationFunctions' | 'disableAggregation' | 'getAggregationPosition' + 'aggregationFunctions' | 'disableAggregation' | 'getAggregationPosition' | 'componentsProps' >, ) => { const updateAggregatedColumns = React.useCallback>( @@ -108,9 +108,9 @@ export const useGridAggregationPreProcessors = ( ); const addColumnMenuButtons = React.useCallback>( - (initialValue, column) => { + (columnMenuItems, column) => { if (props.disableAggregation) { - return initialValue; + return columnMenuItems; } const availableAggregationFunctions = getAvailableAggregationFunctions({ @@ -119,16 +119,19 @@ export const useGridAggregationPreProcessors = ( }); if (availableAggregationFunctions.length === 0) { - return initialValue; + return columnMenuItems; } + const condensed = props.componentsProps?.columnMenu?.condensed ?? false; + return [ - ...initialValue, + ...columnMenuItems, , , ]; }, diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx index c34db6880e42..c2fdcad1dcad 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import MuiDivider from '@mui/material/Divider'; +import MuiDivider, { DividerProps } from '@mui/material/Divider'; import { GridEventListener, useGridApiEventHandler, @@ -32,7 +32,9 @@ import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGrou import { GridRowGroupingColumnMenuItems } from '../../../components/GridRowGroupingColumnMenuItems'; import { GridInitialStatePremium } from '../../../models/gridStatePremium'; -const Divider = () => event.stopPropagation()} />; +const Divider = (props: DividerProps) => ( + event.stopPropagation()} /> +); export const rowGroupingStateInitializer: GridStateInitializer< Pick @@ -174,7 +176,7 @@ export const useGridRowGrouping = ( return initialValue; } - return [...initialValue, , menuItems]; + return [...initialValue, , menuItems]; }, [props.disableRowGrouping], ); diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx b/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx index 9c2a4a25aa24..cea4a1f1cf8a 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx @@ -1,6 +1,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import Stack from '@mui/material/Stack'; +import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; +import ClearIcon from '@mui/icons-material/Clear'; import MenuItem from '@mui/material/MenuItem'; +import PushPinIcon from '@mui/icons-material/PushPin'; import { GridColDef } from '@mui/x-data-grid'; import { GridPinnedPosition } from '../hooks/features/columnPinning'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; @@ -8,16 +14,17 @@ import { useGridApiContext } from '../hooks/utils/useGridApiContext'; interface GridColumnPinningMenuItemsProps { column?: GridColDef; onClick?: (event: React.MouseEvent) => void; + condensed?: boolean; } const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { - const { column, onClick } = props; + const { column, onClick, condensed } = props; const apiRef = useGridApiContext(); const pinColumn = (side: GridPinnedPosition) => (event: React.MouseEvent) => { apiRef.current.pinColumn(column!.field, side); - if (onClick) { + if (onClick && !condensed) { onClick(event); } }; @@ -25,7 +32,7 @@ const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { const unpinColumn = (event: React.MouseEvent) => { apiRef.current.unpinColumn(column!.field); - if (onClick) { + if (onClick && !condensed) { onClick(event); } }; @@ -36,6 +43,70 @@ const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { const side = apiRef.current.isColumnPinned(column.field); + if (condensed) { + return ( + + + Pin to + + + + + + + + + + + + ); + } + if (side) { const otherSide = side === GridPinnedPosition.right ? GridPinnedPosition.left : GridPinnedPosition.right; diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx index 32943fdc14f7..2258e34e054d 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import MuiDivider from '@mui/material/Divider'; +import MuiDivider, { DividerProps } from '@mui/material/Divider'; import { useGridSelector, gridVisibleColumnDefinitionsSelector, @@ -30,7 +30,9 @@ import { import { gridPinnedColumnsSelector } from './gridColumnPinningSelector'; import { filterColumns } from '../../../components/DataGridProVirtualScroller'; -const Divider = () => event.stopPropagation()} />; +const Divider = (props: DividerProps) => ( + event.stopPropagation()} /> +); export const columnPinningStateInitializer: GridStateInitializer< Pick @@ -64,7 +66,11 @@ export const useGridColumnPinning = ( apiRef: React.MutableRefObject, props: Pick< DataGridProProcessedProps, - 'disableColumnPinning' | 'initialState' | 'pinnedColumns' | 'onPinnedColumnsChange' + | 'disableColumnPinning' + | 'initialState' + | 'pinnedColumns' + | 'onPinnedColumnsChange' + | 'componentsProps' >, ): void => { const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector); @@ -170,19 +176,33 @@ export const useGridColumnPinning = ( [apiRef, pinnedColumns, props.disableColumnPinning], ); - const addColumnMenuButtons = React.useCallback>( - (initialValue, column) => { + const addColumnMenuItems = React.useCallback>( + (columnMenuItems, column) => { if (props.disableColumnPinning) { - return initialValue; + return columnMenuItems; } if (column.pinnable === false) { - return initialValue; + return columnMenuItems; } + const condensed = props.componentsProps?.columnMenu?.condensed ?? false; + + // Insert `pin to` after `sort by`, researching alternate solution + return columnMenuItems.reduce((finalItems, columnMenuItem: any) => { + if (columnMenuItem?.type?.name === 'SortGridMenuItems') { + return [ + ...finalItems, + columnMenuItem, + , + , + ]; + } + return [...finalItems, columnMenuItem]; + }, [] as any); - return [...initialValue, , ]; + // return [...initialValue, , ]; }, - [props.disableColumnPinning], + [props.componentsProps?.columnMenu?.condensed, props.disableColumnPinning], ); const checkIfCanBeReordered = React.useCallback>( @@ -252,7 +272,7 @@ export const useGridColumnPinning = ( ); useGridRegisterPipeProcessor(apiRef, 'scrollToIndexes', calculateScrollLeft); - useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons); + useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItems); useGridRegisterPipeProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered); useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing); useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing); diff --git a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx index b1c9c6842a9e..cb3bd17dcc57 100644 --- a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx @@ -49,6 +49,9 @@ const GridMenuRoot = styled(Popper, { [`& .${gridClasses.menuList}`]: { outline: 0, }, + '& .MuiPaper-root': { + borderRadius: '10px', + }, })); export interface GridMenuProps extends Omit { diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx index 3e33f4e141be..e35f9538f1a8 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import Divider from '@mui/material/Divider'; import { GridColumnMenuContainer } from './GridColumnMenuContainer'; import { GridColumnMenuProps } from './GridColumnMenuProps'; import { GridColumnsMenuItem } from './GridColumnsMenuItem'; @@ -10,7 +11,7 @@ import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; const GridColumnMenu = React.forwardRef( function GridColumnMenu(props: GridColumnMenuProps, ref) { - const { hideMenu, currentColumn } = props; + const { hideMenu, currentColumn, condensed } = props; const apiRef = useGridApiContext(); const defaultButtons = [ @@ -20,9 +21,19 @@ const GridColumnMenu = React.forwardRef( , ]; + const condensedButtons = [ + , + , + , + , + , + , + , + ]; + const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors( 'columnMenu', - defaultButtons, + condensed ? condensedButtons : defaultButtons, currentColumn, ); diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts index 4d99a4d8a4a3..680e366c3b70 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts @@ -7,4 +7,5 @@ export interface GridColumnMenuProps extends React.HTMLAttributes { - const { onClick } = props; + const { onClick, condensed } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -23,6 +26,31 @@ const GridColumnsMenuItem = (props: GridFilterItemProps) => { return null; } + if (condensed) { + return ( + + + + + {apiRef.current.getLocaleText('columnMenuShowColumns')} + + ); + } + return ( {apiRef.current.getLocaleText('columnMenuShowColumns')} diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterItemProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterItemProps.ts index 2ecdfe35b278..67addaee7b56 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterItemProps.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterItemProps.ts @@ -4,4 +4,5 @@ import { GridColDef } from '../../../models/colDef/gridColDef'; export interface GridFilterItemProps { column: GridColDef; onClick: (event: React.MouseEvent) => void; + condensed?: boolean; } diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx index 3b2f61d300e5..81e91618b5a4 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx @@ -1,14 +1,20 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MenuItem from '@mui/material/MenuItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import FilterAltIcon from '@mui/icons-material/FilterAlt'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; +import { useGridSelector } from '../../../hooks/utils/useGridSelector'; +import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector'; import { GridFilterItemProps } from './GridFilterItemProps'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; const GridFilterMenuItem = (props: GridFilterItemProps) => { - const { column, onClick } = props; + const { column, onClick, condensed } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); + const filterModel = useGridSelector(apiRef, gridFilterModelSelector); const showFilter = React.useCallback( (event: React.MouseEvent) => { @@ -22,6 +28,31 @@ const GridFilterMenuItem = (props: GridFilterItemProps) => { return null; } + if (condensed) { + return ( + 0 ? 'primary.main' : 'common.black', + '& .MuiSvgIcon-root': { + color: filterModel.items?.length > 0 ? 'primary.main' : 'grey.700', + }, + '& .MuiListItemIcon-root': { + minWidth: '29px', + }, + '& .MuiTypography-root': { + fontSize: '16px', + }, + }} + > + + + + {apiRef.current.getLocaleText('columnMenuFilter')} + + ); + } + return ( {apiRef.current.getLocaleText('columnMenuFilter')} ); diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx index 6c4cae71bebf..185b85705b6f 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx @@ -1,13 +1,16 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MenuItem from '@mui/material/MenuItem'; +import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; +import ListItemText from '@mui/material/ListItemText'; +import ListItemIcon from '@mui/material/ListItemIcon'; import { GridFilterItemProps } from './GridFilterItemProps'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; import { gridVisibleColumnDefinitionsSelector } from '../../../hooks/features/columns'; const HideGridColMenuItem = (props: GridFilterItemProps) => { - const { column, onClick } = props; + const { column, onClick, condensed } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const timeoutRef = React.useRef(); @@ -48,6 +51,17 @@ const HideGridColMenuItem = (props: GridFilterItemProps) => { return null; } + if (condensed) { + return ( + + + + + {apiRef.current.getLocaleText('columnMenuHideColumnCondensed')} + + ); + } + return ( {apiRef.current.getLocaleText('columnMenuHideColumn')} diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx index 29d6f366f1b5..78b36a9ffdac 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx @@ -1,6 +1,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import Stack from '@mui/material/Stack'; +import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; +import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; +import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; +import ClearIcon from '@mui/icons-material/Clear'; import MenuItem from '@mui/material/MenuItem'; +import { Typography } from '@mui/material'; import { useGridSelector } from '../../../hooks/utils/useGridSelector'; import { gridSortModelSelector } from '../../../hooks/features/sorting/gridSortingSelector'; import { GridSortDirection } from '../../../models/gridSortModel'; @@ -8,7 +15,7 @@ import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; import { GridFilterItemProps } from './GridFilterItemProps'; const SortGridMenuItems = (props: GridFilterItemProps) => { - const { column, onClick } = props; + const { column, onClick, condensed } = props; const apiRef = useGridApiContext(); const sortModel = useGridSelector(apiRef, gridSortModelSelector); @@ -22,17 +29,69 @@ const SortGridMenuItems = (props: GridFilterItemProps) => { const onSortMenuItemClick = React.useCallback( (event: React.MouseEvent) => { - onClick(event); + if (!condensed) { + // Menu shouldn't be closed in condensed view? + onClick(event); + } const direction = event.currentTarget.getAttribute('data-value') || null; apiRef.current.sortColumn(column!, direction as GridSortDirection); }, - [apiRef, column, onClick], + [apiRef, column, onClick, condensed], ); if (!column || !column.sortable) { return null; } + if (condensed) { + return ( + + + Sort by + + + + + + + + + + + + ); + } + return ( diff --git a/packages/grid/x-data-grid/src/constants/localeTextConstants.ts b/packages/grid/x-data-grid/src/constants/localeTextConstants.ts index 50f763a2b86f..c752e5aaff2d 100644 --- a/packages/grid/x-data-grid/src/constants/localeTextConstants.ts +++ b/packages/grid/x-data-grid/src/constants/localeTextConstants.ts @@ -80,9 +80,12 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = { columnMenuShowColumns: 'Show columns', columnMenuFilter: 'Filter', columnMenuHideColumn: 'Hide', + columnMenuHideColumnCondensed: 'Hide column', columnMenuUnsort: 'Unsort', columnMenuSortAsc: 'Sort by ASC', columnMenuSortDesc: 'Sort by DESC', + columnMenuSortCondensedAsc: 'ASC', + columnMenuSortCondensedDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -119,7 +122,9 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = { // Column pinning text pinToLeft: 'Pin to left', + pinToLeftCondensed: 'Left', pinToRight: 'Pin to right', + pinToRightCondensed: 'Right', unpin: 'Unpin', // Tree Data diff --git a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts index 39b6978b3d78..5ae21f423096 100644 --- a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts +++ b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts @@ -83,9 +83,12 @@ export interface GridLocaleText { columnMenuShowColumns: React.ReactNode; columnMenuFilter: React.ReactNode; columnMenuHideColumn: React.ReactNode; + columnMenuHideColumnCondensed: React.ReactNode; columnMenuUnsort: React.ReactNode; columnMenuSortAsc: React.ReactNode; columnMenuSortDesc: React.ReactNode; + columnMenuSortCondensedAsc: React.ReactNode; + columnMenuSortCondensedDesc: React.ReactNode; // Column header text columnHeaderFiltersTooltipActive: (count: number) => React.ReactNode; @@ -117,7 +120,9 @@ export interface GridLocaleText { // Column pinning text pinToLeft: string; + pinToLeftCondensed: string; pinToRight: string; + pinToRightCondensed: string; unpin: string; // Tree Data From b6bdee40aa406a48d23e1484f2d1e97e1cfbf4a3 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 25 Oct 2022 15:52:01 +0500 Subject: [PATCH 002/104] Does some visual updates as per discussion --- .../GridAggregationColumnMenuItem.tsx | 2 +- .../useGridAggregationPreProcessors.tsx | 49 +++++++--- .../rowGrouping/useGridRowGrouping.tsx | 18 ++-- .../components/GridColumnPinningMenuItems.tsx | 89 ++++++++----------- .../columnPinning/useGridColumnPinning.tsx | 28 +++--- .../src/utils/columnMenu/index.ts | 1 + .../src/utils/columnMenu/insertItemsInMenu.ts | 21 +++++ .../grid/x-data-grid-pro/src/utils/index.ts | 1 + .../src/components/menu/GridMenu.tsx | 1 + .../menu/columnMenu/GridColumnMenu.tsx | 4 +- .../menu/columnMenu/GridColumnsMenuItem.tsx | 6 ++ .../menu/columnMenu/GridFilterMenuItem.tsx | 65 ++++++++++---- .../menu/columnMenu/SortGridMenuItems.tsx | 68 ++++++-------- .../src/constants/localeTextConstants.ts | 2 +- 14 files changed, 211 insertions(+), 144 deletions(-) create mode 100644 packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts create mode 100644 packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInMenu.ts diff --git a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx index e84d8842c589..649119065929 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx @@ -100,7 +100,7 @@ export const GridAggregationColumnMenuItem = (props: GridAggregationColumnMenuIt ); if (condensed) { return ( - + {renderFormControl()} event.stopPropagation()} />; +const Divider = (props: DividerProps) => ( + event.stopPropagation()} /> +); export const useGridAggregationPreProcessors = ( apiRef: React.MutableRefObject, @@ -124,18 +126,37 @@ export const useGridAggregationPreProcessors = ( const condensed = props.componentsProps?.columnMenu?.condensed ?? false; - return [ - ...columnMenuItems, - , - , - ]; + return insertItemsInMenu( + columnMenuItems, + [ + , + , + ], + 'GridFilterMenuItem', + ); + + // return [ + // ...columnMenuItems, + // , + // , + // ]; }, - [apiRef, props.aggregationFunctions, props.disableAggregation], + [ + apiRef, + props.aggregationFunctions, + props.componentsProps?.columnMenu?.condensed, + props.disableAggregation, + ], ); const stateExportPreProcessing = React.useCallback>( diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx index c2fdcad1dcad..c81a75047300 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx @@ -5,6 +5,7 @@ import { useGridApiEventHandler, useGridApiMethod, gridColumnLookupSelector, + insertItemsInMenu, } from '@mui/x-data-grid-pro'; import { useGridRegisterPipeProcessor, @@ -163,20 +164,25 @@ export const useGridRowGrouping = ( return initialValue; } - let menuItems: React.ReactNode; + let menuItem: React.ReactNode; if (isGroupingColumn(column.field)) { - menuItems = ; + menuItem = ; } else if (column.groupable) { - menuItems = ; + menuItem = ; } else { - menuItems = null; + menuItem = null; } - if (menuItems == null) { + if (menuItem == null) { return initialValue; } - return [...initialValue, , menuItems]; + return insertItemsInMenu( + initialValue, + [, menuItem], + 'GridAggregationColumnMenuItem', + ); + // return [...initialValue, , menuItem]; }, [props.disableRowGrouping], ); diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx b/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx index cea4a1f1cf8a..916edf938dff 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx @@ -2,9 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; -import ClearIcon from '@mui/icons-material/Clear'; import MenuItem from '@mui/material/MenuItem'; import PushPinIcon from '@mui/icons-material/PushPin'; import { GridColDef } from '@mui/x-data-grid'; @@ -24,7 +22,7 @@ const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { const pinColumn = (side: GridPinnedPosition) => (event: React.MouseEvent) => { apiRef.current.pinColumn(column!.field, side); - if (onClick && !condensed) { + if (onClick) { onClick(event); } }; @@ -32,7 +30,7 @@ const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { const unpinColumn = (event: React.MouseEvent) => { apiRef.current.unpinColumn(column!.field); - if (onClick && !condensed) { + if (onClick) { onClick(event); } }; @@ -49,59 +47,46 @@ const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { Pin to - - + - - - + ); diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx index 2258e34e054d..da94e1f10779 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx @@ -29,6 +29,7 @@ import { } from './gridColumnPinningInterface'; import { gridPinnedColumnsSelector } from './gridColumnPinningSelector'; import { filterColumns } from '../../../components/DataGridProVirtualScroller'; +import { insertItemsInMenu } from '../../../utils'; const Divider = (props: DividerProps) => ( event.stopPropagation()} /> @@ -188,17 +189,22 @@ export const useGridColumnPinning = ( const condensed = props.componentsProps?.columnMenu?.condensed ?? false; // Insert `pin to` after `sort by`, researching alternate solution - return columnMenuItems.reduce((finalItems, columnMenuItem: any) => { - if (columnMenuItem?.type?.name === 'SortGridMenuItems') { - return [ - ...finalItems, - columnMenuItem, - , - , - ]; - } - return [...finalItems, columnMenuItem]; - }, [] as any); + return insertItemsInMenu( + columnMenuItems, + [, ], + 'SortGridMenuItems', + ); + // return columnMenuItems.reduce((finalItems, columnMenuItem: any) => { + // if (columnMenuItem?.type?.name === 'SortGridMenuItems') { + // return [ + // ...finalItems, + // columnMenuItem, + // , + // , + // ]; + // } + // return [...finalItems, columnMenuItem]; + // }, [] as any); // return [...initialValue, , ]; }, diff --git a/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts b/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts new file mode 100644 index 000000000000..e089be180136 --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts @@ -0,0 +1 @@ +export { insertItemsInMenu } from './insertItemsInMenu'; diff --git a/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInMenu.ts b/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInMenu.ts new file mode 100644 index 000000000000..0e0084ac6c79 --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInMenu.ts @@ -0,0 +1,21 @@ +/** + * Method used to insert specific React nodes after a node + * in column menu items list + * + * @param {React.ReactNode[]} initialNodes actual array of nodes + * @param {React.ReactNode[]} noesToInsert new nodes to be inserted + * @param {string} afterComponentName name of the component/node after which the nodes should be inserted + * @returns {React.ReactNode[]} newArray with updated nodes + */ +export const insertItemsInMenu = ( + initialNodes: React.ReactNode[], + nodesToInsert: React.ReactNode[], + afterComponentName: string, +) => + // TODO: Fix typing + initialNodes.reduce((finalItems, item: any) => { + if (item?.type?.name === afterComponentName) { + return [...finalItems, item, ...nodesToInsert]; + } + return [...finalItems, item]; + }, [] as any); diff --git a/packages/grid/x-data-grid-pro/src/utils/index.ts b/packages/grid/x-data-grid-pro/src/utils/index.ts index 50842b59a3b1..66b2de707ccf 100644 --- a/packages/grid/x-data-grid-pro/src/utils/index.ts +++ b/packages/grid/x-data-grid-pro/src/utils/index.ts @@ -1 +1,2 @@ export * from './tree'; +export * from './columnMenu'; diff --git a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx index cb3bd17dcc57..9ad623f1de75 100644 --- a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx @@ -51,6 +51,7 @@ const GridMenuRoot = styled(Popper, { }, '& .MuiPaper-root': { borderRadius: '10px', + minWidth: '248px', }, })); diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx index e35f9538f1a8..e62eabaff6ad 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx @@ -22,12 +22,12 @@ const GridColumnMenu = React.forwardRef( ]; const condensedButtons = [ - , - , , , , , + , + , , ]; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx index db2d3f624694..02da55c26aff 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx @@ -31,13 +31,19 @@ const GridColumnsMenuItem = (props: GridFilterItemProps) => { { const rootProps = useGridRootProps(); const filterModel = useGridSelector(apiRef, gridFilterModelSelector); + const isColumnFiltered = React.useMemo(() => { + if (filterModel.items.length <= 0) { + return false; + } + return filterModel.items.some((item) => item.columnField === column.field); + }, [column.field, filterModel.items]); + const showFilter = React.useCallback( (event: React.MouseEvent) => { onClick(event); @@ -24,32 +33,54 @@ const GridFilterMenuItem = (props: GridFilterItemProps) => { [apiRef, column?.field, onClick], ); + const clearFilters = React.useCallback(() => { + if (isColumnFiltered) { + apiRef.current.upsertFilterItems( + filterModel.items.filter((item) => item.columnField !== column.field), + ); + } + }, [apiRef, column.field, filterModel.items, isColumnFiltered]); + if (rootProps.disableColumnFilter || !column?.filterable) { return null; } if (condensed) { return ( - 0 ? 'primary.main' : 'common.black', - '& .MuiSvgIcon-root': { - color: filterModel.items?.length > 0 ? 'primary.main' : 'grey.700', - }, - '& .MuiListItemIcon-root': { - minWidth: '29px', - }, - '& .MuiTypography-root': { + '& .MuiButton-root': { fontSize: '16px', + fontWeight: '400', + textTransform: 'none', }, }} > - - - - {apiRef.current.getLocaleText('columnMenuFilter')} - + + + + + ); } diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx index 78b36a9ffdac..812970848ed4 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx @@ -2,12 +2,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; -import ClearIcon from '@mui/icons-material/Clear'; import MenuItem from '@mui/material/MenuItem'; -import { Typography } from '@mui/material'; +import Typography from '@mui/material/Typography'; import { useGridSelector } from '../../../hooks/utils/useGridSelector'; import { gridSortModelSelector } from '../../../hooks/features/sorting/gridSortingSelector'; import { GridSortDirection } from '../../../models/gridSortModel'; @@ -34,9 +32,12 @@ const SortGridMenuItems = (props: GridFilterItemProps) => { onClick(event); } const direction = event.currentTarget.getAttribute('data-value') || null; - apiRef.current.sortColumn(column!, direction as GridSortDirection); + apiRef.current.sortColumn( + column!, + (direction === sortDirection ? null : direction) as GridSortDirection, + ); }, - [apiRef, column, onClick, condensed], + [apiRef, column, onClick, sortDirection, condensed], ); if (!column || !column.sortable) { @@ -49,44 +50,31 @@ const SortGridMenuItems = (props: GridFilterItemProps) => { Sort by - - + - - - + ); diff --git a/packages/grid/x-data-grid/src/constants/localeTextConstants.ts b/packages/grid/x-data-grid/src/constants/localeTextConstants.ts index c752e5aaff2d..67b4693c72e7 100644 --- a/packages/grid/x-data-grid/src/constants/localeTextConstants.ts +++ b/packages/grid/x-data-grid/src/constants/localeTextConstants.ts @@ -77,7 +77,7 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = { // Column menu text columnMenuLabel: 'Menu', - columnMenuShowColumns: 'Show columns', + columnMenuShowColumns: 'Manage columns', columnMenuFilter: 'Filter', columnMenuHideColumn: 'Hide', columnMenuHideColumnCondensed: 'Hide column', From c466fac8f3b71059c223d1a67eb55b6e093a0b3e Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 25 Oct 2022 16:42:04 +0500 Subject: [PATCH 003/104] Runs scripts --- .../src/components/GridColumnPinningMenuItems.tsx | 1 + .../src/components/menu/columnMenu/GridColumnMenu.tsx | 1 + .../src/components/menu/columnMenu/GridColumnMenuContainer.tsx | 1 + .../src/components/menu/columnMenu/GridColumnsMenuItem.tsx | 1 + .../src/components/menu/columnMenu/GridFilterMenuItem.tsx | 1 + .../src/components/menu/columnMenu/HideGridColMenuItem.tsx | 1 + .../src/components/menu/columnMenu/SortGridMenuItems.tsx | 1 + 7 files changed, 7 insertions(+) diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx b/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx index 916edf938dff..9f3c386b1c86 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx @@ -123,6 +123,7 @@ GridColumnPinningMenuItems.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- column: PropTypes.object, + condensed: PropTypes.bool, onClick: PropTypes.func, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx index e62eabaff6ad..52f744579b0e 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx @@ -52,6 +52,7 @@ GridColumnMenu.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + condensed: PropTypes.bool, currentColumn: PropTypes.object.isRequired, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx index e8995bcdffbb..1379f18e0f5b 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx @@ -43,6 +43,7 @@ GridColumnMenuContainer.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + condensed: PropTypes.bool, currentColumn: PropTypes.object.isRequired, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx index 02da55c26aff..12934e84311a 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx @@ -70,6 +70,7 @@ GridColumnsMenuItem.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- column: PropTypes.object.isRequired, + condensed: PropTypes.bool, onClick: PropTypes.func.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx index 1e9e7821cd9b..dca3ef328f07 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx @@ -95,6 +95,7 @@ GridFilterMenuItem.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- column: PropTypes.object.isRequired, + condensed: PropTypes.bool, onClick: PropTypes.func.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx index 185b85705b6f..b5696a98fb4e 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx @@ -75,6 +75,7 @@ HideGridColMenuItem.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- column: PropTypes.object.isRequired, + condensed: PropTypes.bool, onClick: PropTypes.func.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx index 812970848ed4..b7f5637e17d1 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx @@ -101,6 +101,7 @@ SortGridMenuItems.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- column: PropTypes.object.isRequired, + condensed: PropTypes.bool, onClick: PropTypes.func.isRequired, } as any; From ad098836e00ce2d8a3cad038fedadc04c2de5ea6 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 25 Oct 2022 16:51:12 +0500 Subject: [PATCH 004/104] Runs scripts --- docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview | 1 + .../column-menu/CondensedColumnMenuGridPro.tsx.preview | 4 ++++ 2 files changed, 5 insertions(+) create mode 100644 docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview create mode 100644 docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.tsx.preview diff --git a/docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview b/docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview new file mode 100644 index 000000000000..4eba0f23a52f --- /dev/null +++ b/docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.tsx.preview b/docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.tsx.preview new file mode 100644 index 000000000000..0eda396e76ff --- /dev/null +++ b/docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.tsx.preview @@ -0,0 +1,4 @@ + \ No newline at end of file From 18e526fe75c1a9abdfd5f238c5ccb286a2dac368 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 25 Oct 2022 17:20:17 +0500 Subject: [PATCH 005/104] Runs scripts --- docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview | 2 +- .../data-grid/column-menu/CondensedColumnMenuGrid.tsx.preview | 2 +- .../column-menu/CondensedColumnMenuGridPro.tsx.preview | 2 +- .../data-grid/column-menu/DisabledColumnMenuGrid.tsx.preview | 2 +- scripts/x-data-grid-premium.exports.json | 1 + scripts/x-data-grid-pro.exports.json | 1 + 6 files changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview b/docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview index 4eba0f23a52f..d37247d8daf9 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview +++ b/docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/data/data-grid/column-menu/CondensedColumnMenuGrid.tsx.preview b/docs/data/data-grid/column-menu/CondensedColumnMenuGrid.tsx.preview index 6c7418eb0fb2..3c99d91aa52b 100644 --- a/docs/data/data-grid/column-menu/CondensedColumnMenuGrid.tsx.preview +++ b/docs/data/data-grid/column-menu/CondensedColumnMenuGrid.tsx.preview @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.tsx.preview b/docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.tsx.preview index 0eda396e76ff..3adf55f5186d 100644 --- a/docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.tsx.preview +++ b/docs/data/data-grid/column-menu/CondensedColumnMenuGridPro.tsx.preview @@ -1,4 +1,4 @@ \ No newline at end of file +/> diff --git a/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.tsx.preview b/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.tsx.preview index da05302dbe74..195f52c3078a 100644 --- a/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.tsx.preview +++ b/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.tsx.preview @@ -1 +1 @@ - \ No newline at end of file + diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 5a06f0cb1a5e..c0b971e1eebc 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -545,6 +545,7 @@ { "name": "heIL", "kind": "Variable" }, { "name": "HideGridColMenuItem", "kind": "Variable" }, { "name": "huHU", "kind": "Variable" }, + { "name": "insertItemsInMenu", "kind": "Variable" }, { "name": "isLeaf", "kind": "Function" }, { "name": "itIT", "kind": "Variable" }, { "name": "jaJP", "kind": "Variable" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index 78c0e8a5a823..944b7aca396d 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -508,6 +508,7 @@ { "name": "heIL", "kind": "Variable" }, { "name": "HideGridColMenuItem", "kind": "Variable" }, { "name": "huHU", "kind": "Variable" }, + { "name": "insertItemsInMenu", "kind": "Variable" }, { "name": "isLeaf", "kind": "Function" }, { "name": "itIT", "kind": "Variable" }, { "name": "jaJP", "kind": "Variable" }, From 533c11c8b411d70d98c241f904b6251f5aa63501 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 27 Oct 2022 17:56:42 +0500 Subject: [PATCH 006/104] Improves logic and adjusts styling --- .../GridAggregationColumnMenuItem.tsx | 21 ++-------- .../GridRowGroupableColumnMenuItems.tsx | 36 +++++++++++++++- .../GridRowGroupingColumnMenuItems.tsx | 17 +++++++- .../useGridAggregationPreProcessors.tsx | 42 ++++++++----------- .../rowGrouping/useGridRowGrouping.tsx | 31 +++++++++----- .../components/GridColumnPinningMenuItems.tsx | 2 +- .../columnPinning/useGridColumnPinning.tsx | 37 +++++++--------- .../src/utils/columnMenu/index.ts | 2 +- .../columnMenu/insertItemsInColumnMenu.ts | 21 ++++++++++ .../src/utils/columnMenu/insertItemsInMenu.ts | 21 ---------- .../menu/columnMenu/GridColumnMenu.tsx | 26 ++++++++---- .../menu/columnMenu/GridColumnsMenuItem.tsx | 20 ++++----- .../menu/columnMenu/GridFilterMenuItem.tsx | 19 +++++---- .../menu/columnMenu/SortGridMenuItems.tsx | 2 +- .../pipeProcessing/gridPipeProcessingApi.ts | 3 +- .../columnMenu/columnMenuInterfaces.ts | 11 +++++ .../features/columnMenu/columnMenuState.ts | 4 -- .../src/hooks/features/columnMenu/index.ts | 2 +- 18 files changed, 177 insertions(+), 140 deletions(-) create mode 100644 packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts delete mode 100644 packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInMenu.ts create mode 100644 packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts delete mode 100644 packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuState.ts diff --git a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx index 649119065929..7f050c7ad66e 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx @@ -3,8 +3,6 @@ import { GridColDef, useGridSelector } from '@mui/x-data-grid-pro'; import MenuItem from '@mui/material/MenuItem'; import Stack from '@mui/material/Stack'; import FormControl from '@mui/material/FormControl'; -import IconButton from '@mui/material/IconButton'; -import ClearIcon from '@mui/icons-material/Clear'; import InputLabel from '@mui/material/InputLabel'; import { unstable_useId as useId } from '@mui/material/utils'; import Select, { SelectChangeEvent } from '@mui/material/Select'; @@ -65,20 +63,15 @@ export const GridAggregationColumnMenuItem = (props: GridAggregationColumnMenuIt } }; - const handleClearClick = () => { - const currentModel = gridAggregationModelSelector(apiRef); - const { [column.field]: columnItem, ...otherColumnItems } = currentModel; - apiRef.current.setAggregationModel(otherColumnItems); - }; - const renderFormControl = () => ( - + {label} e.stopPropagation()} - fullWidth - > - ... - {availableAggregationFunctions.map((aggFunc) => ( - - {getAggregationFunctionLabel({ - apiRef, - aggregationRule: { - aggregationFunctionName: aggFunc, - aggregationFunction: rootProps.aggregationFunctions[aggFunc], - }, - })} - - ))} - - + return ( + + + {label} + + + ); - if (condensed) { - return ( - - {renderFormControl()} - - ); - } - - return {renderFormControl()}; }; diff --git a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuSimpleItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuSimpleItem.tsx new file mode 100644 index 000000000000..987650c4913c --- /dev/null +++ b/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuSimpleItem.tsx @@ -0,0 +1,92 @@ +import * as React from 'react'; +import { GridColDef, useGridSelector } from '@mui/x-data-grid-pro'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import InputLabel from '@mui/material/InputLabel'; +import { unstable_useId as useId } from '@mui/material/utils'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import { useGridApiContext } from '../hooks/utils/useGridApiContext'; +import { useGridRootProps } from '../hooks/utils/useGridRootProps'; +import { + canColumnHaveAggregationFunction, + getAggregationFunctionLabel, +} from '../hooks/features/aggregation/gridAggregationUtils'; +import { gridAggregationModelSelector } from '../hooks/features/aggregation/gridAggregationSelectors'; +import { GridAggregationModel } from '../hooks/features/aggregation/gridAggregationInterfaces'; + +interface GridAggregationColumnMenuItemsProps { + column: GridColDef; + label: string; + availableAggregationFunctions: string[]; +} + +export const GridAggregationColumnMenuSimpleItem = (props: GridAggregationColumnMenuItemsProps) => { + const { column, label, availableAggregationFunctions } = props; + const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); + const id = useId(); + const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector); + + const selectedAggregationRule = React.useMemo(() => { + if (!column || !aggregationModel[column.field]) { + return ''; + } + + const aggregationFunctionName = aggregationModel[column.field]; + if ( + canColumnHaveAggregationFunction({ + column, + aggregationFunctionName, + aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName], + }) + ) { + return aggregationFunctionName; + } + + return ''; + }, [rootProps.aggregationFunctions, aggregationModel, column]); + + const handleAggregationItemChange = (event: SelectChangeEvent) => { + const newAggregationItem = event.target?.value || undefined; + const currentModel = gridAggregationModelSelector(apiRef); + const { [column.field]: columnItem, ...otherColumnItems } = currentModel; + const newModel: GridAggregationModel = + newAggregationItem == null + ? otherColumnItems + : { ...otherColumnItems, [column.field]: newAggregationItem }; + + apiRef.current.setAggregationModel(newModel); + apiRef.current.hideColumnMenu(); + }; + + return ( + + + {label} + + + + ); +}; diff --git a/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx b/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx index b3d714c1d136..6d98669c2cc6 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx @@ -1,22 +1,32 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import MenuItem from '@mui/material/MenuItem'; import GroupWorkIcon from '@mui/icons-material/GroupWork'; import WorkspacesIcon from '@mui/icons-material/Workspaces'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import { gridColumnLookupSelector, useGridSelector, GridColDef } from '@mui/x-data-grid-pro'; +import { styled } from '@mui/material'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector'; interface GridRowGroupableColumnMenuItemsProps { column?: GridColDef; onClick?: (event: React.MouseEvent) => void; - condensed?: boolean; } +const StyledStack = styled(Stack)(({ theme }) => ({ + padding: theme.spacing(1, 1.5, 1, 1.5), + flexDirection: 'row', +})); + +const StyledButton = styled(Button)(() => ({ + fontSize: '16px', + fontWeight: '400', + textTransform: 'none', +})); + const GridRowGroupableColumnMenuItems = (props: GridRowGroupableColumnMenuItemsProps) => { - const { column, onClick, condensed } = props; + const { column, onClick } = props; const apiRef = useGridApiContext(); const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector); const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector); @@ -42,39 +52,21 @@ const GridRowGroupableColumnMenuItems = (props: GridRowGroupableColumnMenuItemsP const name = columnsLookup[column.field].headerName ?? column.field; if (rowGroupingModel.includes(column.field)) { - if (condensed) { - return ( - - - - ); - } return ( - - {apiRef.current.getLocaleText('unGroupColumn')(name)} - + + } + color="inherit" + > + {apiRef.current.getLocaleText('unGroupColumn')(name)} + + ); } - return condensed ? ( + return ( - ) : ( - {apiRef.current.getLocaleText('groupColumn')(name)} ); }; diff --git a/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuSimpleItems.tsx b/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuSimpleItems.tsx new file mode 100644 index 000000000000..c2e49d405438 --- /dev/null +++ b/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuSimpleItems.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import MenuItem from '@mui/material/MenuItem'; +import { gridColumnLookupSelector, useGridSelector, GridColDef } from '@mui/x-data-grid-pro'; +import { useGridApiContext } from '../hooks/utils/useGridApiContext'; +import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector'; + +interface GridRowGroupableColumnMenuItemsProps { + column?: GridColDef; + onClick?: (event: React.MouseEvent) => void; +} + +const GridRowGroupableColumnMenuSimpleItems = (props: GridRowGroupableColumnMenuItemsProps) => { + const { column, onClick } = props; + const apiRef = useGridApiContext(); + const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector); + const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector); + + if (!column?.groupable) { + return null; + } + + const ungroupColumn = (event: React.MouseEvent) => { + apiRef.current.removeRowGroupingCriteria(column.field); + if (onClick) { + onClick(event); + } + }; + + const groupColumn = (event: React.MouseEvent) => { + apiRef.current.addRowGroupingCriteria(column.field); + if (onClick) { + onClick(event); + } + }; + + const name = columnsLookup[column.field].headerName ?? column.field; + + if (rowGroupingModel.includes(column.field)) { + return ( + + {apiRef.current.getLocaleText('unGroupColumn')(name)} + + ); + } + + return ( + {apiRef.current.getLocaleText('groupColumn')(name)} + ); +}; + +GridRowGroupableColumnMenuSimpleItems.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + column: PropTypes.object, + onClick: PropTypes.func, +} as any; + +export { GridRowGroupableColumnMenuSimpleItems }; diff --git a/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItems.tsx b/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItems.tsx index 9336ba680fb1..28d6bcee3e5d 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItems.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItems.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import MenuItem from '@mui/material/MenuItem'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import WorkspacesIcon from '@mui/icons-material/Workspaces'; import { useGridSelector, gridColumnLookupSelector, GridColDef } from '@mui/x-data-grid-pro'; +import { styled } from '@mui/system'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector'; import { @@ -16,11 +16,21 @@ import { interface GridRowGroupingColumnMenuItemsProps { column?: GridColDef; onClick?: (event: React.MouseEvent) => void; - condensed?: boolean; } +const StyledStack = styled(Stack)(({ theme }) => ({ + padding: theme.spacing(1, 1.5, 1, 1.5), + flexDirection: 'row', +})); + +const StyledButton = styled(Button)(() => ({ + fontSize: '16px', + fontWeight: '400', + textTransform: 'none', +})); + const GridRowGroupingColumnMenuItems = (props: GridRowGroupingColumnMenuItemsProps) => { - const { column, onClick, condensed } = props; + const { column, onClick } = props; const apiRef = useGridApiContext(); const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector); const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector); @@ -35,36 +45,17 @@ const GridRowGroupingColumnMenuItems = (props: GridRowGroupingColumnMenuItemsPro const name = columnsLookup[field].headerName ?? field; - if (condensed) { - return ( - - - - ); - } - return ( - - {apiRef.current.getLocaleText('unGroupColumn')(name)} - + + } + color="inherit" + > + {apiRef.current.getLocaleText('unGroupColumn')(name)} + + ); }; diff --git a/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuSimpleItems.tsx b/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuSimpleItems.tsx new file mode 100644 index 000000000000..90e6757d5eb8 --- /dev/null +++ b/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuSimpleItems.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import MenuItem from '@mui/material/MenuItem'; +import { useGridSelector, gridColumnLookupSelector, GridColDef } from '@mui/x-data-grid-pro'; +import { useGridApiContext } from '../hooks/utils/useGridApiContext'; +import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector'; +import { + getRowGroupingCriteriaFromGroupingField, + GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, + isGroupingColumn, +} from '../hooks/features/rowGrouping/gridRowGroupingUtils'; + +interface GridRowGroupingColumnMenuItemsProps { + column?: GridColDef; + onClick?: (event: React.MouseEvent) => void; +} + +const GridRowGroupingColumnMenuSimpleItems = (props: GridRowGroupingColumnMenuItemsProps) => { + const { column, onClick } = props; + const apiRef = useGridApiContext(); + const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector); + const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector); + + const renderUnGroupingMenuItem = (field: string) => { + const ungroupColumn = (event: React.MouseEvent) => { + apiRef.current.removeRowGroupingCriteria(field); + if (onClick) { + onClick(event); + } + }; + + const name = columnsLookup[field].headerName ?? field; + + return ( + + {apiRef.current.getLocaleText('unGroupColumn')(name)} + + ); + }; + + if (!column || !isGroupingColumn(column.field)) { + return null; + } + + if (column.field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD) { + return {rowGroupingModel.map(renderUnGroupingMenuItem)}; + } + + return renderUnGroupingMenuItem(getRowGroupingCriteriaFromGroupingField(column.field)!); +}; + +GridRowGroupingColumnMenuSimpleItems.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + column: PropTypes.object, + onClick: PropTypes.func, +} as any; + +export { GridRowGroupingColumnMenuSimpleItems }; diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx index a61579346c77..7602130e1055 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx @@ -19,6 +19,7 @@ import { } from './wrapColumnWithAggregation'; import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps'; import { GridAggregationColumnMenuItem } from '../../../components/GridAggregationColumnMenuItem'; +import { GridAggregationColumnMenuSimpleItem } from '../../../components/GridAggregationColumnMenuSimpleItem'; import { gridAggregationModelSelector } from './gridAggregationSelectors'; import { GridInitialStatePremium } from '../../../models/gridStatePremium'; @@ -124,31 +125,29 @@ export const useGridAggregationPreProcessors = ( return columnMenuItems; } - const condensed = props.componentsProps?.columnMenu?.condensed ?? false; - - const nodesToInsert = [ - { displayName: 'divider', component: }, - { - displayName: 'GridAggregationColumnMenuItem', - component: ( - - ), - }, - ]; + const aggregationItemProps = { + column, + label: apiRef.current.getLocaleText('aggregationMenuItemHeader'), + availableAggregationFunctions, + }; + + const item = columnMenuItems.some(({ displayName }) => + displayName?.includes('GridFilterMenuSimple'), + ) + ? { + displayName: 'GridAggregationColumnMenuSimpleItem', + component: , + } + : { + displayName: 'GridAggregationColumnMenuItem', + component: , + }; + + const nodesToInsert = [{ displayName: 'divider', component: }, item]; return insertItemsInColumnMenu(columnMenuItems, nodesToInsert, 'GridFilterMenuItem'); }, - [ - apiRef, - props.aggregationFunctions, - props.componentsProps?.columnMenu?.condensed, - props.disableAggregation, - ], + [apiRef, props.aggregationFunctions, props.disableAggregation], ); const stateExportPreProcessing = React.useCallback>( diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx index 9d879f1919ba..d9276725a531 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx @@ -6,6 +6,7 @@ import { useGridApiMethod, gridColumnLookupSelector, insertItemsInColumnMenu, + GridColumnMenuValue, } from '@mui/x-data-grid-pro'; import { useGridRegisterPipeProcessor, @@ -29,7 +30,9 @@ import { areGroupingRulesEqual, } from './gridRowGroupingUtils'; import { GridRowGroupingApi } from './gridRowGroupingInterfaces'; +import { GridRowGroupableColumnMenuSimpleItems } from '../../../components/GridRowGroupableColumnMenuSimpleItems'; import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGroupableColumnMenuItems'; +import { GridRowGroupingColumnMenuSimpleItems } from '../../../components/GridRowGroupingColumnMenuSimpleItems'; import { GridRowGroupingColumnMenuItems } from '../../../components/GridRowGroupingColumnMenuItems'; import { GridInitialStatePremium } from '../../../models/gridStatePremium'; @@ -160,37 +163,60 @@ export const useGridRowGrouping = ( * PRE-PROCESSING */ const addColumnMenuButtons = React.useCallback>( - (initialValue, column) => { + (columnMenuItems, column) => { if (props.disableRowGrouping) { - return initialValue; + return columnMenuItems; } - const condensed = props.componentsProps?.columnMenu?.condensed ?? false; + const isSimpleMenu = columnMenuItems.some(({ displayName }) => + displayName?.includes('GridAggregationColumnMenuSimple'), + ); + + const groupingItem = isSimpleMenu + ? { + displayName: 'GridRowGroupingColumnMenuSimpleItems', + component: , + } + : { + displayName: 'GridRowGroupingColumnMenuItems', + component: , + }; + + const groupableItem = isSimpleMenu + ? { + displayName: 'GridRowGroupableColumnMenuSimpleItems', + component: , + } + : { + displayName: 'GridRowGroupableColumnMenuItems', + component: , + }; let menuItem; if (isGroupingColumn(column.field)) { - menuItem = { - displayName: 'GridRowGroupingColumnMenuItems', - component: , - }; + menuItem = groupingItem; } else if (column.groupable) { - menuItem = { - displayName: 'GridRowGroupableColumnMenuItems', - component: , - }; + menuItem = groupableItem; } else { menuItem = null; } if (menuItem == null) { - return initialValue; + return columnMenuItems; } - const nodesToInsert = [{ displayName: 'divider', component: }, menuItem]; + const nodesToInsert: GridColumnMenuValue = [ + { displayName: 'divider', component: }, + menuItem, + ]; - return insertItemsInColumnMenu(initialValue, nodesToInsert, 'GridAggregationColumnMenuItem'); + return insertItemsInColumnMenu( + columnMenuItems, + nodesToInsert, + 'GridAggregationColumnMenuItem', + ); }, - [props.componentsProps?.columnMenu?.condensed, props.disableRowGrouping], + [props.disableRowGrouping], ); const stateExportPreProcessing = React.useCallback>( diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx b/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx index 6685d83f5824..f6c4e138967a 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx @@ -3,20 +3,29 @@ import PropTypes from 'prop-types'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; -import MenuItem from '@mui/material/MenuItem'; import PushPinIcon from '@mui/icons-material/PushPin'; import { GridColDef } from '@mui/x-data-grid'; +import { styled } from '@mui/material'; import { GridPinnedPosition } from '../hooks/features/columnPinning'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; interface GridColumnPinningMenuItemsProps { column?: GridColDef; onClick?: (event: React.MouseEvent) => void; - condensed?: boolean; } +const StyledStack = styled(Stack)(({ theme }) => ({ + padding: theme.spacing(1, 1.5, 1, 1.5), +})); + +const StyledButton = styled(Button)(() => ({ + fontSize: '16px', + fontWeight: '400', + textTransform: 'none', +})); + const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { - const { column, onClick, condensed } = props; + const { column, onClick } = props; const apiRef = useGridApiContext(); const pinColumn = (side: GridPinnedPosition) => (event: React.MouseEvent) => { @@ -41,77 +50,42 @@ const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { const side = apiRef.current.isColumnPinned(column.field); - if (condensed) { - return ( - - - Pin to - - + + Pin to + + + } + color={side === GridPinnedPosition.left ? 'primary' : 'inherit'} + sx={{ + '& .MuiSvgIcon-root': { + transform: 'rotate(30deg)', + }, + }} + > + {apiRef.current.getLocaleText('pinToLeftCondensed')} + + } + color={side === GridPinnedPosition.right ? 'primary' : 'inherit'} sx={{ - '& .MuiButton-root': { - fontSize: '16px', - fontWeight: '400', - textTransform: 'none', + '& .MuiSvgIcon-root': { + transform: 'rotate(-30deg)', }, }} > - - - + {apiRef.current.getLocaleText('pinToRightCondensed')} + - ); - } - - if (side) { - const otherSide = - side === GridPinnedPosition.right ? GridPinnedPosition.left : GridPinnedPosition.right; - const label = otherSide === GridPinnedPosition.right ? 'pinToRight' : 'pinToLeft'; - - return ( - - {apiRef.current.getLocaleText(label)} - {apiRef.current.getLocaleText('unpin')} - - ); - } - - return ( - - - {apiRef.current.getLocaleText('pinToLeft')} - - - {apiRef.current.getLocaleText('pinToRight')} - - + ); }; @@ -121,7 +95,6 @@ GridColumnPinningMenuItems.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- column: PropTypes.object, - condensed: PropTypes.bool, onClick: PropTypes.func, } as any; diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuSimpleItems.tsx b/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuSimpleItems.tsx new file mode 100644 index 000000000000..651712445040 --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuSimpleItems.tsx @@ -0,0 +1,73 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import MenuItem from '@mui/material/MenuItem'; +import { GridColDef } from '@mui/x-data-grid'; +import { GridPinnedPosition } from '../hooks/features/columnPinning'; +import { useGridApiContext } from '../hooks/utils/useGridApiContext'; + +interface GridColumnPinningMenuItemsProps { + column?: GridColDef; + onClick?: (event: React.MouseEvent) => void; +} + +const GridColumnPinningMenuSimpleItems = (props: GridColumnPinningMenuItemsProps) => { + const { column, onClick } = props; + const apiRef = useGridApiContext(); + + const pinColumn = (side: GridPinnedPosition) => (event: React.MouseEvent) => { + apiRef.current.pinColumn(column!.field, side); + + if (onClick) { + onClick(event); + } + }; + + const unpinColumn = (event: React.MouseEvent) => { + apiRef.current.unpinColumn(column!.field); + + if (onClick) { + onClick(event); + } + }; + + if (!column) { + return null; + } + + const side = apiRef.current.isColumnPinned(column.field); + + if (side) { + const otherSide = + side === GridPinnedPosition.right ? GridPinnedPosition.left : GridPinnedPosition.right; + const label = otherSide === GridPinnedPosition.right ? 'pinToRight' : 'pinToLeft'; + + return ( + + {apiRef.current.getLocaleText(label)} + {apiRef.current.getLocaleText('unpin')} + + ); + } + + return ( + + + {apiRef.current.getLocaleText('pinToLeft')} + + + {apiRef.current.getLocaleText('pinToRight')} + + + ); +}; + +GridColumnPinningMenuSimpleItems.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + column: PropTypes.object, + onClick: PropTypes.func, +} as any; + +export { GridColumnPinningMenuSimpleItems }; diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx index acbd6d711412..0a6900d3e08f 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx @@ -22,6 +22,7 @@ import { GridApiPro } from '../../../models/gridApiPro'; import { GridInitialStatePro, GridStatePro } from '../../../models/gridStatePro'; import { DataGridProProcessedProps } from '../../../models/dataGridProProps'; import { GridColumnPinningMenuItems } from '../../../components/GridColumnPinningMenuItems'; +import { GridColumnPinningMenuSimpleItems } from '../../../components/GridColumnPinningMenuSimpleItems'; import { GridColumnPinningApi, GridPinnedPosition, @@ -178,28 +179,37 @@ export const useGridColumnPinning = ( ); const addColumnMenuItems = React.useCallback>( - (initialValue, column) => { + (columnMenuItems, column) => { if (props.disableColumnPinning) { - return initialValue; + return columnMenuItems; } if (column.pinnable === false) { - return initialValue; + return columnMenuItems; } - const condensed = props.componentsProps?.columnMenu?.condensed ?? false; + + const isSimple = columnMenuItems.some(({ displayName }) => + displayName?.includes('SortGridMenuSimple'), + ); + + const component = isSimple ? ( + + ) : ( + + ); const nodesToInsert = [ { displayName: 'divider', component: }, { displayName: 'GridColumnPinningMenuItems', - component: , + component, }, ]; // Insert `pin to` after `sort by` - return insertItemsInColumnMenu(initialValue, nodesToInsert, 'SortGridMenuItems'); + return insertItemsInColumnMenu(columnMenuItems, nodesToInsert, 'SortGridMenuItems'); }, - [props.componentsProps?.columnMenu?.condensed, props.disableColumnPinning], + [props.disableColumnPinning], ); const checkIfCanBeReordered = React.useCallback>( diff --git a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx index 9ad623f1de75..c1b9271a885e 100644 --- a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx @@ -43,7 +43,7 @@ const useUtilityClasses = (ownerState: OwnerState) => { const GridMenuRoot = styled(Popper, { name: 'MuiDataGrid', slot: 'Menu', - overridesResolver: (props, styles) => styles.menu, + overridesResolver: (_, styles) => styles.menu, })(({ theme }) => ({ zIndex: theme.zIndex.modal, [`& .${gridClasses.menuList}`]: { @@ -51,10 +51,18 @@ const GridMenuRoot = styled(Popper, { }, '& .MuiPaper-root': { borderRadius: '10px', - minWidth: '248px', + // minWidth: '248px', }, })); +const StyledPaper = styled(Paper, { + name: 'MuiDataGrid', + slot: 'Paper', + overridesResolver: (_, styles) => styles.paper, +})(() => ({ + borderRadius: '10px', +})); + export interface GridMenuProps extends Omit { open: boolean; target: HTMLElement | null; @@ -119,7 +127,7 @@ const GridMenu = (props: GridMenuProps) => { style={{ transformOrigin: transformOrigin[placement as keyof typeof transformOrigin] }} onExited={handleExited(TransitionProps?.onExited)} > - {children} + {children} )} diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx index 13d3e7dd45d1..2fbc0ad052fb 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx @@ -10,64 +10,36 @@ import { HideGridColMenuItem } from './HideGridColMenuItem'; import { SortGridMenuItems } from './SortGridMenuItems'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; -const GridColumnMenu = React.forwardRef( +const GridColumnMenu = React.forwardRef( function GridColumnMenu(props: GridColumnMenuProps, ref) { - const { hideMenu, currentColumn, condensed } = props; + const { hideMenu, currentColumn } = props; const apiRef = useGridApiContext(); - const defaultMenuItems: GridColumnMenuValue = [ + const menuItems: GridColumnMenuValue = [ { displayName: 'SortGridMenuItems', component: , }, - // TODO update types to allow `onClick` and `column` to be optional - { - displayName: 'GridFilterMenuItem', - component: , - }, - { - displayName: 'HideGridColMenuItem', - component: , - }, - { - displayName: 'GridColumnsMenuItem', - component: , - }, - ]; - - const condensedMenuItems: GridColumnMenuValue = [ - { - displayName: 'SortGridMenuItems', - component: ( - - ), - }, { displayName: 'divider', component: }, { displayName: 'GridFilterMenuItem', - component: ( - - ), + component: , }, { displayName: 'Divider', component: }, { displayName: 'HideGridColMenuItem', - component: ( - - ), + component: , }, { displayName: 'Divider', component: }, { displayName: 'GridColumnsMenuItem', - component: ( - - ), + component: , }, ]; const preProcessedValue = apiRef.current.unstable_applyPipeProcessors( 'columnMenu', - condensed ? condensedMenuItems : defaultMenuItems, + menuItems, currentColumn, ); @@ -90,7 +62,6 @@ GridColumnMenu.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - condensed: PropTypes.bool, currentColumn: PropTypes.object.isRequired, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx index 1379f18e0f5b..151b31af71fd 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx @@ -1,14 +1,21 @@ import clsx from 'clsx'; import PropTypes from 'prop-types'; import * as React from 'react'; -import MenuList from '@mui/material/MenuList'; +import { styled } from '@mui/material/styles'; import { isHideMenuKey, isTabKey } from '../../../utils/keyboardUtils'; import { GridColumnMenuProps } from './GridColumnMenuProps'; import { gridClasses } from '../../../constants/gridClasses'; -const GridColumnMenuContainer = React.forwardRef( +const GridColumnMenuContainerRoot = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + minWidth: '248px', + padding: theme.spacing(1, 0), +})); + +const GridColumnMenuContainer = React.forwardRef( function GridColumnMenuContainer(props: GridColumnMenuProps, ref) { - const { hideMenu, currentColumn, open, id, labelledby, className, children, ...other } = props; + const { hideMenu, currentColumn, id, labelledby, className, children, ...other } = props; const handleListKeyDown = React.useCallback( (event: React.KeyboardEvent) => { @@ -23,17 +30,16 @@ const GridColumnMenuContainer = React.forwardRef {children} - + ); }, ); @@ -43,7 +49,6 @@ GridColumnMenuContainer.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - condensed: PropTypes.bool, currentColumn: PropTypes.object.isRequired, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts index 680e366c3b70..0906925fdd4a 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts @@ -1,11 +1,10 @@ import * as React from 'react'; import { GridColDef } from '../../../models/colDef/gridColDef'; -export interface GridColumnMenuProps extends React.HTMLAttributes { +export interface GridColumnMenuProps extends React.HTMLAttributes { hideMenu: (event: React.SyntheticEvent) => void; currentColumn: GridColDef; open: boolean; id?: string; labelledby?: string; - condensed?: boolean; } diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx index d9104bd14ba3..f7641b3230d4 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx @@ -1,16 +1,21 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import MenuItem from '@mui/material/MenuItem'; import ViewWeekIcon from '@mui/icons-material/ViewColumn'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; +import { styled } from '@mui/material'; import { GridPreferencePanelsValue } from '../../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; import { GridFilterItemProps } from './GridFilterItemProps'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; +const StyledStack = styled(Stack)(({ theme }) => ({ + padding: theme.spacing(1, 1.5, 0, 1.5), + flexDirection: 'row', +})); + const GridColumnsMenuItem = (props: GridFilterItemProps) => { - const { onClick, condensed } = props; + const { onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -26,20 +31,12 @@ const GridColumnsMenuItem = (props: GridFilterItemProps) => { return null; } - if (condensed) { - return ( - - - - ); - } - return ( - - {apiRef.current.getLocaleText('columnMenuShowColumns')} - + + + ); }; @@ -49,7 +46,6 @@ GridColumnsMenuItem.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- column: PropTypes.object.isRequired, - condensed: PropTypes.bool, onClick: PropTypes.func.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterItemProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterItemProps.ts index 67addaee7b56..2ecdfe35b278 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterItemProps.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterItemProps.ts @@ -4,5 +4,4 @@ import { GridColDef } from '../../../models/colDef/gridColDef'; export interface GridFilterItemProps { column: GridColDef; onClick: (event: React.MouseEvent) => void; - condensed?: boolean; } diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx index dd3a6cad66cf..57d891f7cc68 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx @@ -1,19 +1,31 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import MenuItem from '@mui/material/MenuItem'; import Button from '@mui/material/Button'; import IconButton from '@mui/material/IconButton'; import FilterAltIcon from '@mui/icons-material/FilterAlt'; import ClearIcon from '@mui/icons-material/Clear'; import Stack from '@mui/material/Stack'; +import { styled } from '@mui/material'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; import { useGridSelector } from '../../../hooks/utils/useGridSelector'; import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector'; import { GridFilterItemProps } from './GridFilterItemProps'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; +const StyledStack = styled(Stack)(({ theme }) => ({ + padding: theme.spacing(0.5, 1.5, 0.5, 1.5), + flexDirection: 'row', + justifyContent: 'space-between', +})); + +const StyledButton = styled(Button)(() => ({ + fontSize: '16px', + fontWeight: '400', + textTransform: 'none', +})); + const GridFilterMenuItem = (props: GridFilterItemProps) => { - const { column, onClick, condensed } = props; + const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const filterModel = useGridSelector(apiRef, gridFilterModelSelector); @@ -45,43 +57,22 @@ const GridFilterMenuItem = (props: GridFilterItemProps) => { return null; } - if (condensed) { - return ( - - - {isColumnFiltered && ( - - - - )} - - ); - } - return ( - {apiRef.current.getLocaleText('columnMenuFilter')} + + } + color={isColumnFiltered ? 'primary' : 'inherit'} + aria-label={apiRef.current.getLocaleText('columnMenuFilter') as string} + > + {apiRef.current.getLocaleText('columnMenuFilter')} + + {isColumnFiltered && ( + + + + )} + ); }; @@ -91,7 +82,6 @@ GridFilterMenuItem.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- column: PropTypes.object.isRequired, - condensed: PropTypes.bool, onClick: PropTypes.func.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx index 269f7f5baa69..74fe8428d940 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx @@ -1,16 +1,28 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import MenuItem from '@mui/material/MenuItem'; import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; +import { styled } from '@mui/material'; import { GridFilterItemProps } from './GridFilterItemProps'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; import { gridVisibleColumnDefinitionsSelector } from '../../../hooks/features/columns'; +const StyledStack = styled(Stack)(({ theme }) => ({ + padding: theme.spacing(0.5, 1.5, 0.5, 1.5), + flexDirection: 'row', + justifyContent: 'space-between', +})); + +const StyledButton = styled(Button)(() => ({ + fontSize: '16px', + fontWeight: '400', + textTransform: 'none', +})); + const HideGridColMenuItem = (props: GridFilterItemProps) => { - const { column, onClick, condensed } = props; + const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const timeoutRef = React.useRef(); @@ -51,36 +63,17 @@ const HideGridColMenuItem = (props: GridFilterItemProps) => { return null; } - if (condensed) { - return ( - - - - ); - } - return ( - - {apiRef.current.getLocaleText('columnMenuHideColumn')} - + + } + color="inherit" + > + {apiRef.current.getLocaleText('columnMenuHideColumnCondensed')} + + ); }; @@ -90,7 +83,6 @@ HideGridColMenuItem.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- column: PropTypes.object.isRequired, - condensed: PropTypes.bool, onClick: PropTypes.func.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx index b6dd09f91401..54b5716fb143 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx @@ -4,16 +4,25 @@ import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; -import MenuItem from '@mui/material/MenuItem'; import Typography from '@mui/material/Typography'; +import { styled } from '@mui/material'; import { useGridSelector } from '../../../hooks/utils/useGridSelector'; import { gridSortModelSelector } from '../../../hooks/features/sorting/gridSortingSelector'; import { GridSortDirection } from '../../../models/gridSortModel'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; import { GridFilterItemProps } from './GridFilterItemProps'; +const StyledStack = styled(Stack)(({ theme }) => ({ + padding: theme.spacing(0.5, 1.5, 0.5, 1.5), +})); + +const StyledButton = styled(Button)(() => ({ + fontSize: '16px', + fontWeight: '400', +})); + const SortGridMenuItems = (props: GridFilterItemProps) => { - const { column, onClick, condensed } = props; + const { column } = props; const apiRef = useGridApiContext(); const sortModel = useGridSelector(apiRef, gridSortModelSelector); @@ -27,71 +36,43 @@ const SortGridMenuItems = (props: GridFilterItemProps) => { const onSortMenuItemClick = React.useCallback( (event: React.MouseEvent) => { - if (!condensed) { - // Menu shouldn't be closed in condensed view? - onClick(event); - } const direction = event.currentTarget.getAttribute('data-value') || null; apiRef.current.sortColumn( column!, (direction === sortDirection ? null : direction) as GridSortDirection, ); }, - [apiRef, column, onClick, sortDirection, condensed], + [apiRef, column, sortDirection], ); if (!column || !column.sortable) { return null; } - if (condensed) { - return ( - - - Sort by - - + + Sort by + + + } + color={sortDirection === 'asc' ? 'primary' : 'inherit'} + > + {apiRef.current.getLocaleText('columnMenuSortCondensedAsc')} + + } + color={sortDirection === 'desc' ? 'primary' : 'inherit'} > - - - + {apiRef.current.getLocaleText('columnMenuSortCondensedDesc')} + - ); - } - - return ( - - - {apiRef.current.getLocaleText('columnMenuUnsort')} - - - {apiRef.current.getLocaleText('columnMenuSortAsc')} - - - {apiRef.current.getLocaleText('columnMenuSortDesc')} - - + ); }; @@ -101,7 +82,6 @@ SortGridMenuItems.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- column: PropTypes.object.isRequired, - condensed: PropTypes.bool, onClick: PropTypes.func.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts index 595ecb7bedd1..a986ad47cbfa 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts @@ -1,3 +1,4 @@ +export * from './simple'; export * from './GridColumnsMenuItem'; export * from './GridFilterItemProps'; export * from './GridFilterMenuItem'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx new file mode 100644 index 000000000000..bec3ce8b893e --- /dev/null +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { GridColumnMenuValue } from '../../../../hooks/features/columnMenu'; +import { GridColumnMenuSimpleContainer } from './GridColumnMenuSimpleContainer'; +import { GridColumnMenuSimpleProps } from './GridColumnMenuSimpleProps'; +import { GridColumnsMenuSimpleItem } from './GridColumnsMenuSimpleItem'; +import { GridFilterMenuSimpleItem } from './GridFilterMenuSimpleItem'; +import { HideGridColMenuSimpleItem } from './HideGridColMenuSimpleItem'; +import { SortGridMenuSimpleItems } from './SortGridMenuSimpleItems'; +import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; + +const GridColumnMenuSimple = React.forwardRef( + function GridColumnMenuSimple(props: GridColumnMenuSimpleProps, ref) { + const { hideMenu, currentColumn } = props; + const apiRef = useGridApiContext(); + + const menuItems: GridColumnMenuValue = [ + { + displayName: 'SortGridMenuSimpleItems', + component: , + }, + // TODO update types to allow `onClick` and `column` to be optional + { + displayName: 'GridFilterMenuSimpleItem', + component: , + }, + { + displayName: 'HideGridColMenuSimpleItem', + component: , + }, + { + displayName: 'GridColumnsMenuSimpleItem', + component: , + }, + ]; + + const preProcessedValue = apiRef.current.unstable_applyPipeProcessors( + 'columnMenu', + menuItems, + currentColumn, + ); + + return ( + + {preProcessedValue.map((item: any, index: number) => + React.cloneElement(item.component, { + key: index, + onClick: hideMenu, + column: currentColumn, + }), + )} + + ); + }, +); + +GridColumnMenuSimple.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + currentColumn: PropTypes.object.isRequired, + hideMenu: PropTypes.func.isRequired, + id: PropTypes.string, + labelledby: PropTypes.string, + open: PropTypes.bool.isRequired, +} as any; + +export { GridColumnMenuSimple }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx new file mode 100644 index 000000000000..5b42b70aeecc --- /dev/null +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx @@ -0,0 +1,53 @@ +import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import * as React from 'react'; +import MenuList from '@mui/material/MenuList'; +import { isHideMenuKey, isTabKey } from '../../../../utils/keyboardUtils'; +import { GridColumnMenuSimpleProps } from './GridColumnMenuSimpleProps'; +import { gridClasses } from '../../../../constants/gridClasses'; + +const GridColumnMenuSimpleContainer = React.forwardRef( + function GridColumnMenuSimpleContainer(props: GridColumnMenuSimpleProps, ref) { + const { hideMenu, currentColumn, open, id, labelledby, className, children, ...other } = props; + + const handleListKeyDown = React.useCallback( + (event: React.KeyboardEvent) => { + if (isTabKey(event.key)) { + event.preventDefault(); + } + if (isHideMenuKey(event.key)) { + hideMenu(event); + } + }, + [hideMenu], + ); + + return ( + + {children} + + ); + }, +); + +GridColumnMenuSimpleContainer.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + currentColumn: PropTypes.object.isRequired, + hideMenu: PropTypes.func.isRequired, + id: PropTypes.string, + labelledby: PropTypes.string, + open: PropTypes.bool.isRequired, +} as any; + +export { GridColumnMenuSimpleContainer }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleProps.ts new file mode 100644 index 000000000000..b3d250e486c4 --- /dev/null +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleProps.ts @@ -0,0 +1,10 @@ +import * as React from 'react'; +import { GridColDef } from '../../../../models/colDef/gridColDef'; + +export interface GridColumnMenuSimpleProps extends React.HTMLAttributes { + hideMenu: (event: React.SyntheticEvent) => void; + currentColumn: GridColDef; + open: boolean; + id?: string; + labelledby?: string; +} diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx new file mode 100644 index 000000000000..485d5c9191b7 --- /dev/null +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import MenuItem from '@mui/material/MenuItem'; +import { GridPreferencePanelsValue } from '../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; +import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; +import { GridFilterItemProps } from '../GridFilterItemProps'; +import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; + +const GridColumnsMenuSimpleItem = (props: GridFilterItemProps) => { + const { onClick } = props; + const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); + + const showColumns = React.useCallback( + (event: React.MouseEvent) => { + onClick(event); + apiRef.current.showPreferences(GridPreferencePanelsValue.columns); + }, + [apiRef, onClick], + ); + + if (rootProps.disableColumnSelector) { + return null; + } + + return ( + + {apiRef.current.getLocaleText('columnMenuShowColumns')} + + ); +}; + +GridColumnsMenuSimpleItem.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + column: PropTypes.object.isRequired, + onClick: PropTypes.func.isRequired, +} as any; + +export { GridColumnsMenuSimpleItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridFilterMenuSimpleItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridFilterMenuSimpleItem.tsx new file mode 100644 index 000000000000..44abddb54d2f --- /dev/null +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridFilterMenuSimpleItem.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import MenuItem from '@mui/material/MenuItem'; +import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; +import { GridFilterItemProps } from '../GridFilterItemProps'; +import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; + +const GridFilterMenuSimpleItem = (props: GridFilterItemProps) => { + const { column, onClick } = props; + const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); + + const showFilter = React.useCallback( + (event: React.MouseEvent) => { + onClick(event); + apiRef.current.showFilterPanel(column?.field); + }, + [apiRef, column?.field, onClick], + ); + + if (rootProps.disableColumnFilter || !column?.filterable) { + return null; + } + + return ( + {apiRef.current.getLocaleText('columnMenuFilter')} + ); +}; + +GridFilterMenuSimpleItem.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + column: PropTypes.object.isRequired, + onClick: PropTypes.func.isRequired, +} as any; + +export { GridFilterMenuSimpleItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx new file mode 100644 index 000000000000..65a3097b96af --- /dev/null +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx @@ -0,0 +1,67 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import MenuItem from '@mui/material/MenuItem'; +import { GridFilterItemProps } from '../GridFilterItemProps'; +import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; +import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; +import { gridVisibleColumnDefinitionsSelector } from '../../../../hooks/features/columns'; + +const HideGridColMenuSimpleItem = (props: GridFilterItemProps) => { + const { column, onClick } = props; + const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); + const timeoutRef = React.useRef(); + + const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef); + const columnsWithMenu = visibleColumns.filter((col) => col.disableColumnMenu !== true); + // do not allow to hide the last column with menu + const disabled = columnsWithMenu.length === 1; + + const toggleColumn = React.useCallback( + (event: React.MouseEvent) => { + /** + * Disabled `MenuItem` would trigger `click` event + * after imperative `.click()` call on HTML element. + * Also, click is triggered in testing environment as well. + */ + if (disabled) { + return; + } + onClick(event); + // time for the transition + timeoutRef.current = setTimeout(() => { + apiRef.current.setColumnVisibility(column?.field, false); + }, 100); + }, + [apiRef, column?.field, onClick, disabled], + ); + + React.useEffect(() => { + return () => clearTimeout(timeoutRef.current); + }, []); + + if (rootProps.disableColumnSelector) { + return null; + } + + if (column.hideable === false) { + return null; + } + + return ( + + {apiRef.current.getLocaleText('columnMenuHideColumn')} + + ); +}; + +HideGridColMenuSimpleItem.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + column: PropTypes.object.isRequired, + onClick: PropTypes.func.isRequired, +} as any; + +export { HideGridColMenuSimpleItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx new file mode 100644 index 000000000000..4526bf1bfef4 --- /dev/null +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx @@ -0,0 +1,63 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import MenuItem from '@mui/material/MenuItem'; +import { useGridSelector } from '../../../../hooks/utils/useGridSelector'; +import { gridSortModelSelector } from '../../../../hooks/features/sorting/gridSortingSelector'; +import { GridSortDirection } from '../../../../models/gridSortModel'; +import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; +import { GridFilterItemProps } from '../GridFilterItemProps'; + +const SortGridMenuSimpleItems = (props: GridFilterItemProps) => { + const { column, onClick } = props; + const apiRef = useGridApiContext(); + const sortModel = useGridSelector(apiRef, gridSortModelSelector); + + const sortDirection = React.useMemo(() => { + if (!column) { + return null; + } + const sortItem = sortModel.find((item) => item.field === column.field); + return sortItem?.sort; + }, [column, sortModel]); + + const onSortMenuItemClick = React.useCallback( + (event: React.MouseEvent) => { + onClick(event); + const direction = event.currentTarget.getAttribute('data-value') || null; + apiRef.current.sortColumn( + column!, + (direction === sortDirection ? null : direction) as GridSortDirection, + ); + }, + [apiRef, column, onClick, sortDirection], + ); + + if (!column || !column.sortable) { + return null; + } + + return ( + + + {apiRef.current.getLocaleText('columnMenuUnsort')} + + + {apiRef.current.getLocaleText('columnMenuSortAsc')} + + + {apiRef.current.getLocaleText('columnMenuSortDesc')} + + + ); +}; + +SortGridMenuSimpleItems.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + column: PropTypes.object.isRequired, + onClick: PropTypes.func.isRequired, +} as any; + +export { SortGridMenuSimpleItems }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts new file mode 100644 index 000000000000..b9cfd73f12d2 --- /dev/null +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts @@ -0,0 +1,6 @@ +export * from './GridColumnsMenuSimpleItem'; +export * from './GridFilterMenuSimpleItem'; +export * from './GridColumnMenuSimple'; +export * from './HideGridColMenuSimpleItem'; +export * from './SortGridMenuSimpleItems'; +export * from './GridColumnMenuSimpleContainer'; From efbaff2295f40a3428fe44a71c5e5668c8b7a044 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sat, 29 Oct 2022 02:50:22 +0500 Subject: [PATCH 010/104] Removes localization change --- .../data-grid/column-menu/ColumnMenuGridPro.js | 17 +++++++---------- .../data-grid/column-menu/ColumnMenuGridPro.tsx | 7 ++----- 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridPro.js b/docs/data/data-grid/column-menu/ColumnMenuGridPro.js index d31983422f3c..0b2149ce6e7d 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridPro.js +++ b/docs/data/data-grid/column-menu/ColumnMenuGridPro.js @@ -1,20 +1,17 @@ -import * as React from 'react'; -import { DataGridPremium, frFR } from '@mui/x-data-grid-premium'; -import { useDemoData } from '@mui/x-data-grid-generator'; +import * as React from 'react' +import { DataGridPremium } from '@mui/x-data-grid-premium' +import { useDemoData } from '@mui/x-data-grid-generator' -export default function ColumnMenuGridPro() { +export default function ColumnMenuGridPro () { const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 20, maxColumns: 5, - }); + }) return (
- +
- ); + ) } diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx b/docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx index d31983422f3c..91d4fee9726b 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx +++ b/docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DataGridPremium, frFR } from '@mui/x-data-grid-premium'; +import { DataGridPremium } from '@mui/x-data-grid-premium'; import { useDemoData } from '@mui/x-data-grid-generator'; export default function ColumnMenuGridPro() { @@ -11,10 +11,7 @@ export default function ColumnMenuGridPro() { return (
- +
); } From f7ee267515741a6073b273a07d1f1aee915554bb Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 2 Nov 2022 12:18:52 +0500 Subject: [PATCH 011/104] Allows disabling, removing, reordering, adding of menu items and other refactorings --- .../column-menu/ColumnMenuGridPro.tsx.preview | 5 +- .../column-menu/FilterColumnMenuGrid.js | 66 +++++++++ .../column-menu/FilterColumnMenuGrid.tsx | 63 +++++++++ .../data/data-grid/column-menu/column-menu.md | 55 +++++++- .../useGridAggregationPreProcessors.tsx | 8 +- .../rowGrouping/useGridRowGrouping.tsx | 11 +- .../columnPinning/useGridColumnPinning.tsx | 3 +- .../src/components/menu/GridMenu.tsx | 4 - .../menu/columnMenu/GridColumnMenu.tsx | 126 +++++++++++------- .../menu/columnMenu/GridColumnMenuProps.ts | 19 +++ ...ridFilterItemProps.ts => GridItemProps.ts} | 2 +- .../{ => default}/GridColumnMenuContainer.tsx | 23 +++- .../default/GridColumnMenuDefault.tsx | 68 ++++++++++ .../{ => default}/GridColumnsMenuItem.tsx | 10 +- .../{ => default}/GridFilterMenuItem.tsx | 12 +- .../{ => default}/HideGridColMenuItem.tsx | 10 +- .../{ => default}/SortGridMenuItems.tsx | 12 +- .../menu/columnMenu/default/index.ts | 5 + .../src/components/menu/columnMenu/index.ts | 14 +- .../simple/GridColumnMenuSimple.tsx | 33 +++-- .../simple/GridColumnMenuSimpleContainer.tsx | 19 ++- .../simple/GridColumnMenuSimpleProps.ts | 10 -- .../constants/defaultGridSlotsComponents.ts | 4 +- .../columnMenu/columnMenuInterfaces.ts | 12 +- .../src/models/colDef/gridColDef.ts | 9 ++ 25 files changed, 464 insertions(+), 139 deletions(-) create mode 100644 docs/data/data-grid/column-menu/FilterColumnMenuGrid.js create mode 100644 docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx rename packages/grid/x-data-grid/src/components/menu/columnMenu/{GridFilterItemProps.ts => GridItemProps.ts} (81%) rename packages/grid/x-data-grid/src/components/menu/columnMenu/{ => default}/GridColumnMenuContainer.tsx (74%) create mode 100644 packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx rename packages/grid/x-data-grid/src/components/menu/columnMenu/{ => default}/GridColumnsMenuItem.tsx (78%) rename packages/grid/x-data-grid/src/components/menu/columnMenu/{ => default}/GridFilterMenuItem.tsx (85%) rename packages/grid/x-data-grid/src/components/menu/columnMenu/{ => default}/HideGridColMenuItem.tsx (87%) rename packages/grid/x-data-grid/src/components/menu/columnMenu/{ => default}/SortGridMenuItems.tsx (85%) create mode 100644 packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts delete mode 100644 packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleProps.ts diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx.preview b/docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx.preview index ffbb446ace6b..19b199652560 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx.preview +++ b/docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx.preview @@ -1,4 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js new file mode 100644 index 000000000000..cb73bcf164c3 --- /dev/null +++ b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js @@ -0,0 +1,66 @@ +import * as React from 'react' +import { DataGrid, GridFilterMenuSimpleItem } from '@mui/x-data-grid' +import { useDemoData } from '@mui/x-data-grid-generator' +import Stack from '@mui/material/Stack' +import Button from '@mui/material/Button' + +const MenuCloseComponent = props => { + console.log(props, 'props') + return ( + + + + ) +} + +const FilterComponent = props => ( + + + +) + +export default function ColumnMenuGrid () { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 20, + maxColumns: 5, + }) + const columns = data.columns + // only show `Manage Columns` for last column + columns[4].filterColumnMenuItems = () => ['closeMenu', 'manageColumns'] + + const columnMenuItems = { + ['filter']: { + // existing slot + component: , // overriden property + }, + ['closeMenu']: { + // registering new slot + component: , + displayName: 'MenuClose', + addDivider: true, + }, + } + + return ( +
+ [ + 'hideColumn', + 'filter', + 'closeMenu', + 'manageColumns', + ], + }, + }} + /> +
+ ) +} diff --git a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx new file mode 100644 index 000000000000..7beb4851330d --- /dev/null +++ b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx @@ -0,0 +1,63 @@ +import * as React from 'react'; +import { DataGrid, GridFilterMenuSimpleItem } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Stack from '@mui/material/Stack'; +import Button from '@mui/material/Button'; + +const MenuCloseComponent = (props: any) => ( + + + +); + +const FilterComponent = (props: any) => ( + + + +); + +export default function ColumnMenuGrid() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 20, + maxColumns: 5, + }); + const columns = data.columns; + // only show `Manage Columns` for last column + columns[4].filterColumnMenuItems = () => ['closeMenu', 'manageColumns']; + + const columnMenuItems = { + ['filter']: { + // existing slot + component: , // overriden property + }, + ['closeMenu']: { + // registering new slot + component: , + displayName: 'MenuClose', + addDivider: true, + }, + }; + + return ( +
+ [ + 'hideColumn', + 'filter', + 'closeMenu', + 'manageColumns', + ], + }, + }} + /> +
+ ); +} diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index 0ca9cabf3d15..4fbe675b9ab2 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -20,18 +20,61 @@ By default, each column header displays a column menu. The column menu allows ac {{"demo": "DisabledColumnMenuGrid.js", "bg": "inline"}} -## Column menu with Pro/Premium options [](/x/introduction/licensing/#pro-plan)[](/x/introduction/licensing/#premium-plan) - -You can also access commercial features like column pinning etc from the column menu when using `DataGridPro` or `DataGridPremium`. - -{{"demo": "ColumnMenuGridPro.js", "bg": "inline"}} - ## Simple column menu In case you like the look and feel of the old column menu, you can replace the default one with `GridColumnMenuSimple` component. {{"demo": "SimpleColumnMenuGrid.js", "bg": "inline"}} +## Customise column menu items + +You can also customise column menu based on some conditions. Every item in the menu is assigned a `slot` using which it's possible to: + +- Hide/Show specific items +- Override default items (if you want to override one item and not the whole menu) +- Add new items +- Change display order for items + +For that purpose you can use `filterColumnMenuItems` and `columnMenuItems`. + +**filterColumnMenuItems**: It is available in both `GridColDef` and `componentsProps.columnMenu`, it receives list of all registered slots and should return a `filtered` and `ordered` list of items that are needed to be shown. It can be used either per-column basis by passing in `GridColDef` or for whole Grid by passing in `componentsProps.columnMenu`. If you have it in both, the preference will be given to the `GridColDef` one. + +**columnMenuItems**: It could be used to override or register new items to the menu. You can simply pass the object with existing or new items and they will be updated/added to the grid. + +```tsx +const columnMenuItems = { + ['filter']: { // existing slot + component: , // overriden property + addDivider: true, + }, + ['manageColumns']: { // override another existing slot + addDivider: true, + }, + ['closeMenu']: { // registering new slot + component: , + displayName: 'MenuClose', + } +} + +// add new item in visible items and append it to the last of list +const filterColumnMenuItems = (defaultItems) => [...defaultItems, 'closeMenu']; + + +``` + +Currently available default slots for _DataGridCommunity_ are `filter`, `sorting`, `hideColumn` and `manageColumns`. + +{{"demo": "FilterColumnMenuGrid.js", "bg": "inline"}} + +## Column menu with Pro/Premium options [](/x/introduction/licensing/#pro-plan)[](/x/introduction/licensing/#premium-plan) + +You can also access commercial features like column pinning etc from the column menu when using `DataGridPro` or `DataGridPremium`. + +{{"demo": "ColumnMenuGridPro.js", "bg": "inline"}} + ## API - [DataGrid](/x/api/data-grid/data-grid/) diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx index 7602130e1055..e82d1d13aa5d 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx @@ -135,17 +135,17 @@ export const useGridAggregationPreProcessors = ( displayName?.includes('GridFilterMenuSimple'), ) ? { + slot: 'aggregation', displayName: 'GridAggregationColumnMenuSimpleItem', component: , } : { + slot: 'aggregation', displayName: 'GridAggregationColumnMenuItem', component: , + addDivider: true, }; - - const nodesToInsert = [{ displayName: 'divider', component: }, item]; - - return insertItemsInColumnMenu(columnMenuItems, nodesToInsert, 'GridFilterMenuItem'); + return insertItemsInColumnMenu(columnMenuItems, [item], 'GridFilterMenuItem'); }, [apiRef, props.aggregationFunctions, props.disableAggregation], ); diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx index d9276725a531..020181064fb3 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx @@ -174,22 +174,28 @@ export const useGridRowGrouping = ( const groupingItem = isSimpleMenu ? { + slot: 'grouping', displayName: 'GridRowGroupingColumnMenuSimpleItems', component: , } : { + slot: 'grouping', displayName: 'GridRowGroupingColumnMenuItems', component: , + addDivider: true, }; const groupableItem = isSimpleMenu ? { + slot: 'groupable', displayName: 'GridRowGroupableColumnMenuSimpleItems', component: , } : { + slot: 'groupable', displayName: 'GridRowGroupableColumnMenuItems', component: , + addDivider: true, }; let menuItem; @@ -205,10 +211,7 @@ export const useGridRowGrouping = ( return columnMenuItems; } - const nodesToInsert: GridColumnMenuValue = [ - { displayName: 'divider', component: }, - menuItem, - ]; + const nodesToInsert: GridColumnMenuValue = [menuItem]; return insertItemsInColumnMenu( columnMenuItems, diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx index 0a6900d3e08f..fc9203cac2a3 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx @@ -199,9 +199,10 @@ export const useGridColumnPinning = ( ); const nodesToInsert = [ - { displayName: 'divider', component: }, { + slot: 'pinning', displayName: 'GridColumnPinningMenuItems', + addDivider: true, component, }, ]; diff --git a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx index c1b9271a885e..fb1f7535f28e 100644 --- a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx @@ -49,10 +49,6 @@ const GridMenuRoot = styled(Popper, { [`& .${gridClasses.menuList}`]: { outline: 0, }, - '& .MuiPaper-root': { - borderRadius: '10px', - // minWidth: '248px', - }, })); const StyledPaper = styled(Paper, { diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx index 2fbc0ad052fb..59110570254e 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx @@ -1,61 +1,93 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Divider from '@mui/material/Divider'; -import { GridColumnMenuValue } from '../../../hooks/features/columnMenu'; -import { GridColumnMenuContainer } from './GridColumnMenuContainer'; +import { + GridColumnMenuLookup, + GridColumnMenuSlot, + GridColumnMenuValue, +} from '../../../hooks/features/columnMenu'; import { GridColumnMenuProps } from './GridColumnMenuProps'; -import { GridColumnsMenuItem } from './GridColumnsMenuItem'; -import { GridFilterMenuItem } from './GridFilterMenuItem'; -import { HideGridColMenuItem } from './HideGridColMenuItem'; -import { SortGridMenuItems } from './SortGridMenuItems'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; -const GridColumnMenu = React.forwardRef( - function GridColumnMenu(props: GridColumnMenuProps, ref) { - const { hideMenu, currentColumn } = props; - const apiRef = useGridApiContext(); +const GridColumnMenu = (props: GridColumnMenuProps) => { + const { hideMenu, currentColumn, menuItems, columnMenuItems: userItems } = props; - const menuItems: GridColumnMenuValue = [ - { - displayName: 'SortGridMenuItems', - component: , - }, - { displayName: 'divider', component: }, - { - displayName: 'GridFilterMenuItem', - component: , - }, - { displayName: 'Divider', component: }, - { - displayName: 'HideGridColMenuItem', - component: , - }, - { displayName: 'Divider', component: }, - { - displayName: 'GridColumnsMenuItem', - component: , - }, - ]; + const apiRef = useGridApiContext(); - const preProcessedValue = apiRef.current.unstable_applyPipeProcessors( - 'columnMenu', - menuItems, - currentColumn, + const preProcessedValue = apiRef.current.unstable_applyPipeProcessors( + 'columnMenu', + menuItems, + currentColumn, + ); + + const extendedColumnMenuItems = React.useMemo(() => { + if (!userItems || !Object.keys(userItems).length) { + return preProcessedValue; + } + // Overrides for default items + const userSlots = new Set( + Object.keys(userItems) as Array, ); + const overridenItems = preProcessedValue.reduce((acc, item) => { + if (userSlots.has(item.slot)) { + // override + userSlots.delete(item.slot); + return [...acc, { ...item, ...userItems[item.slot] }]; + } + return [...acc, item]; + }, [] as GridColumnMenuValue); + + // New items to add + // TODO: Handle typings for newly added slots + if (userSlots.size > 0) { + const newItems = Array.from(userSlots).map((slot: GridColumnMenuSlot) => ({ + slot, + ...userItems[slot], + })); + return [...overridenItems, ...newItems]; + } + return overridenItems; + }, [preProcessedValue, userItems]); + + const filteredColumnMenuItems: GridColumnMenuValue = React.useMemo(() => { + const filterCallback = currentColumn.filterColumnMenuItems ?? props.filterColumnMenuItems; + if (!filterCallback || typeof filterCallback !== 'function') { + return extendedColumnMenuItems; + } - return ( - - {preProcessedValue.map((item: any, index: number) => - React.cloneElement(item.component, { - key: index, - onClick: hideMenu, - column: currentColumn, - }), - )} - + const menuItemSlots = extendedColumnMenuItems.reduce( + (slots, item) => (item.slot ? [...slots, item.slot] : slots), + [] as Array, ); - }, -); + const filteredSlots = filterCallback(menuItemSlots); + if (!filteredSlots?.length) { + return extendedColumnMenuItems; + } + + return filteredSlots.reduce((acc, slot) => { + const item = extendedColumnMenuItems.find((menuItem) => menuItem.slot === slot); + return item ? [...acc, item] : acc; + }, [] as GridColumnMenuValue); + }, [currentColumn.filterColumnMenuItems, props.filterColumnMenuItems, extendedColumnMenuItems]); + + return ( + + {filteredColumnMenuItems.map((item: any, index: number) => { + const itemProps = { + ...item.component.props, + onClick: hideMenu, + column: currentColumn, + }; + return item.component.type(itemProps) ? ( + + + {item.addDivider ? : null} + + ) : null; + })} + + ); +}; GridColumnMenu.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts index 0906925fdd4a..c34e9660c20c 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts @@ -1,5 +1,10 @@ import * as React from 'react'; import { GridColDef } from '../../../models/colDef/gridColDef'; +import { + GridColumnMenuLookup, + GridColumnMenuValue, + GridColumnMenuSlot, +} from '../../../hooks/features/columnMenu'; export interface GridColumnMenuProps extends React.HTMLAttributes { hideMenu: (event: React.SyntheticEvent) => void; @@ -7,4 +12,18 @@ export interface GridColumnMenuProps extends React.HTMLAttributes, + ) => Array; + /** + * To override existing and add new items in column menu + * If the slot is already registered, it will be overwritten otherwise a new slot will be registered + */ + columnMenuItems?: { + [key in GridColumnMenuSlot]: Pick< + GridColumnMenuLookup, + 'component' | 'displayName' | 'addDivider' + >; + }; } diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterItemProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridItemProps.ts similarity index 81% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterItemProps.ts rename to packages/grid/x-data-grid/src/components/menu/columnMenu/GridItemProps.ts index 2ecdfe35b278..0bcdec9ef5a0 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterItemProps.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridItemProps.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { GridColDef } from '../../../models/colDef/gridColDef'; -export interface GridFilterItemProps { +export interface GridItemProps { column: GridColDef; onClick: (event: React.MouseEvent) => void; } diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx similarity index 74% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx rename to packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx index 151b31af71fd..d167727e0e07 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx @@ -2,9 +2,9 @@ import clsx from 'clsx'; import PropTypes from 'prop-types'; import * as React from 'react'; import { styled } from '@mui/material/styles'; -import { isHideMenuKey, isTabKey } from '../../../utils/keyboardUtils'; -import { GridColumnMenuProps } from './GridColumnMenuProps'; -import { gridClasses } from '../../../constants/gridClasses'; +import { isHideMenuKey, isTabKey } from '../../../../utils/keyboardUtils'; +import { GridColumnMenuProps } from '../GridColumnMenuProps'; +import { gridClasses } from '../../../../constants/gridClasses'; const GridColumnMenuContainerRoot = styled('div')(({ theme }) => ({ display: 'flex', @@ -13,8 +13,21 @@ const GridColumnMenuContainerRoot = styled('div')(({ theme }) => ({ padding: theme.spacing(1, 0), })); -const GridColumnMenuContainer = React.forwardRef( - function GridColumnMenuContainer(props: GridColumnMenuProps, ref) { +export interface GridColumnMenuContainerProps + extends Pick< + GridColumnMenuProps, + | 'hideMenu' + | 'currentColumn' + | 'open' + | 'filterColumnMenuItems' + | 'id' + | 'labelledby' + | 'className' + | 'children' + > {} + +const GridColumnMenuContainer = React.forwardRef( + function GridColumnMenuContainer(props: GridColumnMenuContainerProps, ref) { const { hideMenu, currentColumn, id, labelledby, className, children, ...other } = props; const handleListKeyDown = React.useCallback( diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx new file mode 100644 index 000000000000..ddb2f1c797bc --- /dev/null +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx @@ -0,0 +1,68 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { GridColumnMenuValue } from '../../../../hooks/features/columnMenu'; +import { GridColumnMenuContainer } from './GridColumnMenuContainer'; +import { GridColumnMenu } from '../GridColumnMenu'; +import { GridColumnMenuProps } from '../GridColumnMenuProps'; +import { GridColumnsMenuItem } from './GridColumnsMenuItem'; +import { GridFilterMenuItem } from './GridFilterMenuItem'; +import { HideGridColMenuItem } from './HideGridColMenuItem'; +import { SortGridMenuItems } from './SortGridMenuItems'; + +export interface GridColumnMenuDefaultProps + extends Pick< + GridColumnMenuProps, + 'hideMenu' | 'currentColumn' | 'open' | 'filterColumnMenuItems' + > {} + +const GridColumnMenuDefault = React.forwardRef( + function GridColumnMenuDefault(props: GridColumnMenuDefaultProps, ref) { + const { hideMenu, currentColumn } = props; + + const menuItems: GridColumnMenuValue = [ + { + slot: 'sorting', + displayName: 'SortGridMenuItems', + component: , + addDivider: true, + }, + { + slot: 'filter', + displayName: 'GridFilterMenuItem', + component: , + addDivider: true, + }, + { + slot: 'hideColumn', + displayName: 'HideGridColMenuItem', + component: , + addDivider: true, + }, + { + slot: 'manageColumns', + displayName: 'GridColumnsMenuItem', + component: , + }, + ]; + + return ( + + + + ); + }, +); + +GridColumnMenuDefault.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + currentColumn: PropTypes.object.isRequired, + hideMenu: PropTypes.func.isRequired, + id: PropTypes.string, + labelledby: PropTypes.string, + open: PropTypes.bool.isRequired, +} as any; + +export { GridColumnMenuDefault }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx similarity index 78% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx rename to packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx index f7641b3230d4..d5e43bea8ad3 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnsMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx @@ -4,17 +4,17 @@ import ViewWeekIcon from '@mui/icons-material/ViewColumn'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import { styled } from '@mui/material'; -import { GridPreferencePanelsValue } from '../../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; -import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; -import { GridFilterItemProps } from './GridFilterItemProps'; -import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; +import { GridPreferencePanelsValue } from '../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; +import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; +import { GridItemProps } from '../GridItemProps'; +import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; const StyledStack = styled(Stack)(({ theme }) => ({ padding: theme.spacing(1, 1.5, 0, 1.5), flexDirection: 'row', })); -const GridColumnsMenuItem = (props: GridFilterItemProps) => { +const GridColumnsMenuItem = (props: GridItemProps) => { const { onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx similarity index 85% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx rename to packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx index 57d891f7cc68..9b2348b2c602 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridFilterMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx @@ -6,11 +6,11 @@ import FilterAltIcon from '@mui/icons-material/FilterAlt'; import ClearIcon from '@mui/icons-material/Clear'; import Stack from '@mui/material/Stack'; import { styled } from '@mui/material'; -import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; -import { useGridSelector } from '../../../hooks/utils/useGridSelector'; -import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector'; -import { GridFilterItemProps } from './GridFilterItemProps'; -import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; +import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; +import { useGridSelector } from '../../../../hooks/utils/useGridSelector'; +import { gridFilterModelSelector } from '../../../../hooks/features/filter/gridFilterSelector'; +import { GridItemProps } from '../GridItemProps'; +import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; const StyledStack = styled(Stack)(({ theme }) => ({ padding: theme.spacing(0.5, 1.5, 0.5, 1.5), @@ -24,7 +24,7 @@ const StyledButton = styled(Button)(() => ({ textTransform: 'none', })); -const GridFilterMenuItem = (props: GridFilterItemProps) => { +const GridFilterMenuItem = (props: GridItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx similarity index 87% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx rename to packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx index 74fe8428d940..96db0570769a 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/HideGridColMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx @@ -4,10 +4,10 @@ import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import { styled } from '@mui/material'; -import { GridFilterItemProps } from './GridFilterItemProps'; -import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; -import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; -import { gridVisibleColumnDefinitionsSelector } from '../../../hooks/features/columns'; +import { GridItemProps } from '../GridItemProps'; +import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; +import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; +import { gridVisibleColumnDefinitionsSelector } from '../../../../hooks/features/columns'; const StyledStack = styled(Stack)(({ theme }) => ({ padding: theme.spacing(0.5, 1.5, 0.5, 1.5), @@ -21,7 +21,7 @@ const StyledButton = styled(Button)(() => ({ textTransform: 'none', })); -const HideGridColMenuItem = (props: GridFilterItemProps) => { +const HideGridColMenuItem = (props: GridItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx similarity index 85% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx rename to packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx index 54b5716fb143..d116187d4d44 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx @@ -6,11 +6,11 @@ import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; import Typography from '@mui/material/Typography'; import { styled } from '@mui/material'; -import { useGridSelector } from '../../../hooks/utils/useGridSelector'; -import { gridSortModelSelector } from '../../../hooks/features/sorting/gridSortingSelector'; -import { GridSortDirection } from '../../../models/gridSortModel'; -import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; -import { GridFilterItemProps } from './GridFilterItemProps'; +import { useGridSelector } from '../../../../hooks/utils/useGridSelector'; +import { gridSortModelSelector } from '../../../../hooks/features/sorting/gridSortingSelector'; +import { GridSortDirection } from '../../../../models/gridSortModel'; +import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; +import { GridItemProps } from '../GridItemProps'; const StyledStack = styled(Stack)(({ theme }) => ({ padding: theme.spacing(0.5, 1.5, 0.5, 1.5), @@ -21,7 +21,7 @@ const StyledButton = styled(Button)(() => ({ fontWeight: '400', })); -const SortGridMenuItems = (props: GridFilterItemProps) => { +const SortGridMenuItems = (props: GridItemProps) => { const { column } = props; const apiRef = useGridApiContext(); const sortModel = useGridSelector(apiRef, gridSortModelSelector); diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts new file mode 100644 index 000000000000..b6c592a44155 --- /dev/null +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts @@ -0,0 +1,5 @@ +export * from './GridColumnsMenuItem'; +export * from './GridFilterMenuItem'; +export * from './HideGridColMenuItem'; +export * from './GridColumnMenuContainer'; +export * from './GridColumnMenuDefault'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts index a986ad47cbfa..3f8267fc84f6 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts @@ -1,10 +1,10 @@ -export * from './simple'; -export * from './GridColumnsMenuItem'; -export * from './GridFilterItemProps'; -export * from './GridFilterMenuItem'; +// shared modules export * from './GridColumnHeaderMenu'; export * from './GridColumnMenu'; -export * from './HideGridColMenuItem'; -export * from './SortGridMenuItems'; -export * from './GridColumnMenuContainer'; export * from './GridColumnMenuProps'; + +// default one +export * from './default'; + +// simple one +export * from './simple'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index bec3ce8b893e..c01b94c696c8 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -2,53 +2,50 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { GridColumnMenuValue } from '../../../../hooks/features/columnMenu'; import { GridColumnMenuSimpleContainer } from './GridColumnMenuSimpleContainer'; -import { GridColumnMenuSimpleProps } from './GridColumnMenuSimpleProps'; +import { GridColumnMenuProps } from '../GridColumnMenuProps'; import { GridColumnsMenuSimpleItem } from './GridColumnsMenuSimpleItem'; import { GridFilterMenuSimpleItem } from './GridFilterMenuSimpleItem'; import { HideGridColMenuSimpleItem } from './HideGridColMenuSimpleItem'; import { SortGridMenuSimpleItems } from './SortGridMenuSimpleItems'; -import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; +import { GridColumnMenu } from '../GridColumnMenu'; -const GridColumnMenuSimple = React.forwardRef( - function GridColumnMenuSimple(props: GridColumnMenuSimpleProps, ref) { +interface Props + extends Pick< + GridColumnMenuProps, + 'hideMenu' | 'currentColumn' | 'open' | 'filterColumnMenuItems' + > {} + +const GridColumnMenuSimple = React.forwardRef( + function GridColumnMenuSimple(props: Props, ref) { const { hideMenu, currentColumn } = props; - const apiRef = useGridApiContext(); const menuItems: GridColumnMenuValue = [ { + slot: 'sorting', displayName: 'SortGridMenuSimpleItems', component: , }, // TODO update types to allow `onClick` and `column` to be optional { + slot: 'filter', displayName: 'GridFilterMenuSimpleItem', component: , }, { + slot: 'hideColumn', displayName: 'HideGridColMenuSimpleItem', component: , }, { + slot: 'manageColumns', displayName: 'GridColumnsMenuSimpleItem', component: , }, ]; - const preProcessedValue = apiRef.current.unstable_applyPipeProcessors( - 'columnMenu', - menuItems, - currentColumn, - ); - return ( - {preProcessedValue.map((item: any, index: number) => - React.cloneElement(item.component, { - key: index, - onClick: hideMenu, - column: currentColumn, - }), - )} + ); }, diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx index 5b42b70aeecc..8cc2d3b6c463 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx @@ -3,11 +3,24 @@ import PropTypes from 'prop-types'; import * as React from 'react'; import MenuList from '@mui/material/MenuList'; import { isHideMenuKey, isTabKey } from '../../../../utils/keyboardUtils'; -import { GridColumnMenuSimpleProps } from './GridColumnMenuSimpleProps'; +import { GridColumnMenuProps } from '../GridColumnMenuProps'; import { gridClasses } from '../../../../constants/gridClasses'; -const GridColumnMenuSimpleContainer = React.forwardRef( - function GridColumnMenuSimpleContainer(props: GridColumnMenuSimpleProps, ref) { +interface Props + extends Pick< + GridColumnMenuProps, + | 'hideMenu' + | 'currentColumn' + | 'open' + | 'filterColumnMenuItems' + | 'id' + | 'labelledby' + | 'className' + | 'children' + > {} + +const GridColumnMenuSimpleContainer = React.forwardRef( + function GridColumnMenuSimpleContainer(props: Props, ref) { const { hideMenu, currentColumn, open, id, labelledby, className, children, ...other } = props; const handleListKeyDown = React.useCallback( diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleProps.ts deleted file mode 100644 index b3d250e486c4..000000000000 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleProps.ts +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react'; -import { GridColDef } from '../../../../models/colDef/gridColDef'; - -export interface GridColumnMenuSimpleProps extends React.HTMLAttributes { - hideMenu: (event: React.SyntheticEvent) => void; - currentColumn: GridColDef; - open: boolean; - id?: string; - labelledby?: string; -} diff --git a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts index 3219512d1b9d..b7e5efe42b99 100644 --- a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts +++ b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts @@ -15,7 +15,7 @@ import { GridCheckIcon, GridCloseIcon, GridColumnIcon, - GridColumnMenu, + GridColumnMenuDefault, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, @@ -91,7 +91,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS: GridSlotsComponent = { Cell: GridCell, SkeletonCell: GridSkeletonCell, ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton, - ColumnMenu: GridColumnMenu, + ColumnMenu: GridColumnMenuDefault, ErrorOverlay, Footer: GridFooter, Header: GridHeader, diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts index 3810834a1b9a..23208644de5d 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts @@ -1,11 +1,21 @@ +import { OverridableStringUnion } from '@mui/types'; + export interface GridColumnMenuState { open: boolean; field?: string; } +export type GridColumnMenuSlot = 'filter' | 'sorting' | 'hideColumn' | 'manageColumns'; +export interface GridColumnMenuSlotOverrides {} + export interface GridColumnMenuLookup { - displayName?: string; + /** + * Will be used to filter or override a specific item in `columnMenu` + */ + slot: OverridableStringUnion; component: React.ReactNode; + displayName?: string; + addDivider?: boolean; } export interface GridColumnMenuValue extends Array {} diff --git a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts b/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts index 3d19688f3cd1..0686cfcf9ccc 100644 --- a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts +++ b/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts @@ -2,6 +2,7 @@ import * as React from 'react'; import { GridCellClassNamePropType } from '../gridCellClass'; import { GridColumnHeaderClassNamePropType } from '../gridColumnHeaderClass'; import { GridFilterOperator } from '../gridFilterOperator'; +import { GridColumnMenuLookup } from '../../hooks/features/columnMenu'; import { GridCellParams, GridRenderCellParams, @@ -240,6 +241,14 @@ export interface GridColDef { * @default 1 */ colSpan?: number | ((params: GridCellParams) => number | undefined); + /** + * Recieves registered column menu slots and should return the slots which should be shown. + * @param {Array} slots Registered column menu item slots. + * @returns {Array} Slots ehich are needed to be shown. + */ + filterColumnMenuItems?: ( + slots: Array, + ) => Array; } export interface GridActionsColDef From c5b0a7b6419b0ae84754c7d6227e90d70d25e468 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 2 Nov 2022 15:56:49 +0500 Subject: [PATCH 012/104] Uses svg icons instead of icons-material ones --- .../GridRowGroupableColumnMenuItems.tsx | 8 +-- .../GridRowGroupingColumnMenuItems.tsx | 5 +- .../components/GridColumnPinningMenuItems.tsx | 21 ++---- .../src/components/icons/index.tsx | 49 +++++++++++++ .../menu/columnMenu/GridColumnMenu.tsx | 68 +++++++++++++++++++ .../default/GridColumnMenuContainer.tsx | 1 + .../default/GridColumnMenuDefault.tsx | 3 +- .../default/GridColumnsMenuItem.tsx | 6 +- .../columnMenu/default/GridFilterMenuItem.tsx | 6 +- .../default/HideGridColMenuItem.tsx | 5 +- .../columnMenu/default/SortGridMenuItems.tsx | 12 ++-- .../simple/GridColumnMenuSimple.tsx | 3 +- .../simple/GridColumnMenuSimpleContainer.tsx | 1 + .../simple/GridColumnsMenuSimpleItem.tsx | 13 +--- .../simple/GridFilterMenuSimpleItem.tsx | 11 +-- .../simple/HideGridColMenuSimpleItem.tsx | 13 +--- .../simple/SortGridMenuSimpleItems.tsx | 13 +--- .../constants/defaultGridSlotsComponents.ts | 17 +++++ .../src/constants/localeTextConstants.ts | 10 +-- .../src/models/api/gridLocaleTextApi.ts | 10 +-- .../src/models/gridIconSlotsComponent.ts | 50 ++++++++++++++ 21 files changed, 232 insertions(+), 93 deletions(-) diff --git a/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx b/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx index 6d98669c2cc6..f3727355a23f 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx @@ -1,12 +1,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import GroupWorkIcon from '@mui/icons-material/GroupWork'; -import WorkspacesIcon from '@mui/icons-material/Workspaces'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import { gridColumnLookupSelector, useGridSelector, GridColDef } from '@mui/x-data-grid-pro'; import { styled } from '@mui/material'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; +import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector'; interface GridRowGroupableColumnMenuItemsProps { @@ -28,6 +27,7 @@ const StyledButton = styled(Button)(() => ({ const GridRowGroupableColumnMenuItems = (props: GridRowGroupableColumnMenuItemsProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector); const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector); @@ -57,7 +57,7 @@ const GridRowGroupableColumnMenuItems = (props: GridRowGroupableColumnMenuItemsP } + startIcon={} color="inherit" > {apiRef.current.getLocaleText('unGroupColumn')(name)} @@ -82,7 +82,7 @@ const GridRowGroupableColumnMenuItems = (props: GridRowGroupableColumnMenuItemsP diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx index 9b2348b2c602..99aa60ba866e 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx @@ -2,8 +2,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Button from '@mui/material/Button'; import IconButton from '@mui/material/IconButton'; -import FilterAltIcon from '@mui/icons-material/FilterAlt'; -import ClearIcon from '@mui/icons-material/Clear'; import Stack from '@mui/material/Stack'; import { styled } from '@mui/material'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; @@ -61,7 +59,7 @@ const GridFilterMenuItem = (props: GridItemProps) => { } + startIcon={} color={isColumnFiltered ? 'primary' : 'inherit'} aria-label={apiRef.current.getLocaleText('columnMenuFilter') as string} > @@ -69,7 +67,7 @@ const GridFilterMenuItem = (props: GridItemProps) => { {isColumnFiltered && ( - + )} diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx index 96db0570769a..b3eb38626dae 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import { styled } from '@mui/material'; @@ -68,10 +67,10 @@ const HideGridColMenuItem = (props: GridItemProps) => { } + startIcon={} color="inherit" > - {apiRef.current.getLocaleText('columnMenuHideColumnCondensed')} + {apiRef.current.getLocaleText('columnMenuHideColumnDefault')} ); diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx index d116187d4d44..2c1ce2e225dd 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx @@ -2,14 +2,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; -import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; import Typography from '@mui/material/Typography'; import { styled } from '@mui/material'; import { useGridSelector } from '../../../../hooks/utils/useGridSelector'; import { gridSortModelSelector } from '../../../../hooks/features/sorting/gridSortingSelector'; import { GridSortDirection } from '../../../../models/gridSortModel'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; +import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; import { GridItemProps } from '../GridItemProps'; const StyledStack = styled(Stack)(({ theme }) => ({ @@ -24,6 +23,7 @@ const StyledButton = styled(Button)(() => ({ const SortGridMenuItems = (props: GridItemProps) => { const { column } = props; const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); const sortModel = useGridSelector(apiRef, gridSortModelSelector); const sortDirection = React.useMemo(() => { @@ -58,18 +58,18 @@ const SortGridMenuItems = (props: GridItemProps) => { } + startIcon={} color={sortDirection === 'asc' ? 'primary' : 'inherit'} > - {apiRef.current.getLocaleText('columnMenuSortCondensedAsc')} + {apiRef.current.getLocaleText('columnMenuSortDefaultAsc')} } + startIcon={} color={sortDirection === 'desc' ? 'primary' : 'inherit'} > - {apiRef.current.getLocaleText('columnMenuSortCondensedDesc')} + {apiRef.current.getLocaleText('columnMenuSortDefaultDesc')} diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index c01b94c696c8..d55001a5976b 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -57,9 +57,8 @@ GridColumnMenuSimple.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- currentColumn: PropTypes.object.isRequired, + filterColumnMenuItems: PropTypes.func, hideMenu: PropTypes.func.isRequired, - id: PropTypes.string, - labelledby: PropTypes.string, open: PropTypes.bool.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx index 8cc2d3b6c463..8cf57825e2b8 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx @@ -57,6 +57,7 @@ GridColumnMenuSimpleContainer.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- currentColumn: PropTypes.object.isRequired, + filterColumnMenuItems: PropTypes.func, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, labelledby: PropTypes.string, diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx index 485d5c9191b7..4b1351c1394f 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx @@ -3,10 +3,10 @@ import PropTypes from 'prop-types'; import MenuItem from '@mui/material/MenuItem'; import { GridPreferencePanelsValue } from '../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; -import { GridFilterItemProps } from '../GridFilterItemProps'; +import { GridItemProps } from '../GridItemProps'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; -const GridColumnsMenuSimpleItem = (props: GridFilterItemProps) => { +const GridColumnsMenuSimpleItem = (props: GridItemProps) => { const { onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -30,13 +30,4 @@ const GridColumnsMenuSimpleItem = (props: GridFilterItemProps) => { ); }; -GridColumnsMenuSimpleItem.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - column: PropTypes.object.isRequired, - onClick: PropTypes.func.isRequired, -} as any; - export { GridColumnsMenuSimpleItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridFilterMenuSimpleItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridFilterMenuSimpleItem.tsx index 44abddb54d2f..f739d364622f 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridFilterMenuSimpleItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridFilterMenuSimpleItem.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MenuItem from '@mui/material/MenuItem'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; -import { GridFilterItemProps } from '../GridFilterItemProps'; +import { GridItemProps } from '../GridItemProps'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; const GridFilterMenuSimpleItem = (props: GridFilterItemProps) => { @@ -27,13 +27,4 @@ const GridFilterMenuSimpleItem = (props: GridFilterItemProps) => { ); }; -GridFilterMenuSimpleItem.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - column: PropTypes.object.isRequired, - onClick: PropTypes.func.isRequired, -} as any; - export { GridFilterMenuSimpleItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx index 65a3097b96af..26e081701ffa 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MenuItem from '@mui/material/MenuItem'; -import { GridFilterItemProps } from '../GridFilterItemProps'; +import { GridItemProps } from '../GridItemProps'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; import { gridVisibleColumnDefinitionsSelector } from '../../../../hooks/features/columns'; -const HideGridColMenuSimpleItem = (props: GridFilterItemProps) => { +const HideGridColMenuSimpleItem = (props: GridItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -55,13 +55,4 @@ const HideGridColMenuSimpleItem = (props: GridFilterItemProps) => { ); }; -HideGridColMenuSimpleItem.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - column: PropTypes.object.isRequired, - onClick: PropTypes.func.isRequired, -} as any; - export { HideGridColMenuSimpleItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx index 4526bf1bfef4..02a4095243e2 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx @@ -5,9 +5,9 @@ import { useGridSelector } from '../../../../hooks/utils/useGridSelector'; import { gridSortModelSelector } from '../../../../hooks/features/sorting/gridSortingSelector'; import { GridSortDirection } from '../../../../models/gridSortModel'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; -import { GridFilterItemProps } from '../GridFilterItemProps'; +import { GridItemProps } from '../GridItemProps'; -const SortGridMenuSimpleItems = (props: GridFilterItemProps) => { +const SortGridMenuSimpleItems = (props: GridItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const sortModel = useGridSelector(apiRef, gridSortModelSelector); @@ -51,13 +51,4 @@ const SortGridMenuSimpleItems = (props: GridFilterItemProps) => { ); }; -SortGridMenuSimpleItems.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - column: PropTypes.object.isRequired, - onClick: PropTypes.func.isRequired, -} as any; - export { SortGridMenuSimpleItems }; diff --git a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts index b7e5efe42b99..f2e49a853bb2 100644 --- a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts +++ b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts @@ -42,6 +42,13 @@ import { GridDragIcon, GridColumnHeaderFilterIconButton, GridSearchIcon, + GridVisibilityOffIcon, + GridViewColumnIcon, + GridPushPinLeftIcon, + GridPushPinRightIcon, + GridWorkspacesIcon, + GridGroupWorkIcon, + GridClearIcon, } from '../components'; import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon'; import { ErrorOverlay } from '../components/ErrorOverlay'; @@ -73,6 +80,16 @@ const DEFAULT_GRID_ICON_SLOTS_COMPONENTS: GridIconSlotsComponent = { RowReorderIcon: GridDragIcon, QuickFilterIcon: GridSearchIcon, QuickFilterClearIcon: GridCloseIcon, + ColumnMenuHideIcon: GridVisibilityOffIcon, + ColumnMenuSortAscendingIcon: GridArrowUpwardIcon, + ColumnMenuSortDescendingIcon: GridArrowDownwardIcon, + ColumnMenuFilterIcon: GridFilterAltIcon, + ColumnMenuManageColumnsIcon: GridViewColumnIcon, + ColumnMenuPinRightIcon: GridPushPinRightIcon, + ColumnMenuPinLeftIcon: GridPushPinLeftIcon, + ColumnMenuUngroupIcon: GridWorkspacesIcon, + ColumnMenuGroupIcon: GridGroupWorkIcon, + ColumnMenuClearIcon: GridClearIcon, }; /** diff --git a/packages/grid/x-data-grid/src/constants/localeTextConstants.ts b/packages/grid/x-data-grid/src/constants/localeTextConstants.ts index 67b4693c72e7..b1e3965f9e84 100644 --- a/packages/grid/x-data-grid/src/constants/localeTextConstants.ts +++ b/packages/grid/x-data-grid/src/constants/localeTextConstants.ts @@ -80,12 +80,12 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = { columnMenuShowColumns: 'Manage columns', columnMenuFilter: 'Filter', columnMenuHideColumn: 'Hide', - columnMenuHideColumnCondensed: 'Hide column', + columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Unsort', columnMenuSortAsc: 'Sort by ASC', columnMenuSortDesc: 'Sort by DESC', - columnMenuSortCondensedAsc: 'ASC', - columnMenuSortCondensedDesc: 'DESC', + columnMenuSortDefaultAsc: 'ASC', + columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -122,9 +122,9 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = { // Column pinning text pinToLeft: 'Pin to left', - pinToLeftCondensed: 'Left', + pinToLeftDefault: 'Left', pinToRight: 'Pin to right', - pinToRightCondensed: 'Right', + pinToRightDefault: 'Right', unpin: 'Unpin', // Tree Data diff --git a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts index 5ae21f423096..44baee2d0584 100644 --- a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts +++ b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts @@ -83,12 +83,12 @@ export interface GridLocaleText { columnMenuShowColumns: React.ReactNode; columnMenuFilter: React.ReactNode; columnMenuHideColumn: React.ReactNode; - columnMenuHideColumnCondensed: React.ReactNode; + columnMenuHideColumnDefault: React.ReactNode; columnMenuUnsort: React.ReactNode; columnMenuSortAsc: React.ReactNode; columnMenuSortDesc: React.ReactNode; - columnMenuSortCondensedAsc: React.ReactNode; - columnMenuSortCondensedDesc: React.ReactNode; + columnMenuSortDefaultAsc: React.ReactNode; + columnMenuSortDefaultDesc: React.ReactNode; // Column header text columnHeaderFiltersTooltipActive: (count: number) => React.ReactNode; @@ -120,9 +120,9 @@ export interface GridLocaleText { // Column pinning text pinToLeft: string; - pinToLeftCondensed: string; + pinToLeftDefault: string; pinToRight: string; - pinToRightCondensed: string; + pinToRightDefault: string; unpin: string; // Tree Data diff --git a/packages/grid/x-data-grid/src/models/gridIconSlotsComponent.ts b/packages/grid/x-data-grid/src/models/gridIconSlotsComponent.ts index 69d7ebdf2506..5843c337ceb8 100644 --- a/packages/grid/x-data-grid/src/models/gridIconSlotsComponent.ts +++ b/packages/grid/x-data-grid/src/models/gridIconSlotsComponent.ts @@ -130,4 +130,54 @@ export interface GridIconSlotsComponent { * @default GridCloseIcon */ QuickFilterClearIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for hiding column + * @default GridVisibilityOffIcon + */ + ColumnMenuHideIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for ascending sort + * @default GridArrowUpwardIcon + */ + ColumnMenuSortAscendingIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for descending sort + * @default GridArrowDownwardIcon + */ + ColumnMenuSortDescendingIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for filter + * @default GridFilterAltIcon + */ + ColumnMenuFilterIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for showing all columns + * @default GridViewColumnIcon + */ + ColumnMenuManageColumnsIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for left pinning + * @default GridPushPinLeftIcon + */ + ColumnMenuPinLeftIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for right pinning + * @default GridPushPinRightIcon + */ + ColumnMenuPinRightIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for ungrouping + * @default GridWorkspacesIcon + */ + ColumnMenuUngroupIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for grouping + * @default GridGroupWorkIcon + */ + ColumnMenuGroupIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for clearing values + * @default GridClearIcon + */ + ColumnMenuClearIcon: React.JSXElementConstructor; } From 0342f8df9040ca00aa276890e046c54d6e6ae632 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 2 Nov 2022 15:57:54 +0500 Subject: [PATCH 013/104] Generates proptypes --- .../menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx | 9 +++++++++ .../menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx | 9 +++++++++ .../menu/columnMenu/simple/SortGridMenuSimpleItems.tsx | 9 +++++++++ 3 files changed, 27 insertions(+) diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx index 4b1351c1394f..fd7443eb3632 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx @@ -30,4 +30,13 @@ const GridColumnsMenuSimpleItem = (props: GridItemProps) => { ); }; +GridColumnsMenuSimpleItem.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + column: PropTypes.object.isRequired, + onClick: PropTypes.func.isRequired, +} as any; + export { GridColumnsMenuSimpleItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx index 26e081701ffa..344f65ad237b 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx @@ -55,4 +55,13 @@ const HideGridColMenuSimpleItem = (props: GridItemProps) => { ); }; +HideGridColMenuSimpleItem.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + column: PropTypes.object.isRequired, + onClick: PropTypes.func.isRequired, +} as any; + export { HideGridColMenuSimpleItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx index 02a4095243e2..622946dfec4f 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx @@ -51,4 +51,13 @@ const SortGridMenuSimpleItems = (props: GridItemProps) => { ); }; +SortGridMenuSimpleItems.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + column: PropTypes.object.isRequired, + onClick: PropTypes.func.isRequired, +} as any; + export { SortGridMenuSimpleItems }; From 756d2d4c43ce6ae3acb38d78ed99787a06cb53f5 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 2 Nov 2022 16:15:25 +0500 Subject: [PATCH 014/104] Updates method name and a few changes --- .../data-grid/column-menu/FilterColumnMenuGrid.js | 4 ++-- .../data-grid/column-menu/FilterColumnMenuGrid.tsx | 4 ++-- docs/data/data-grid/column-menu/column-menu.md | 8 ++++---- .../src/components/menu/columnMenu/GridColumnMenu.tsx | 11 ++++++++--- .../components/menu/columnMenu/GridColumnMenuProps.ts | 2 +- .../columnMenu/default/GridColumnMenuContainer.tsx | 4 ++-- .../menu/columnMenu/default/GridColumnMenuDefault.tsx | 4 ++-- .../menu/columnMenu/simple/GridColumnMenuSimple.tsx | 4 ++-- .../simple/GridColumnMenuSimpleContainer.tsx | 4 ++-- .../grid/x-data-grid/src/models/colDef/gridColDef.ts | 2 +- 10 files changed, 26 insertions(+), 21 deletions(-) diff --git a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js index cb73bcf164c3..32727a2d87d3 100644 --- a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js @@ -29,7 +29,7 @@ export default function ColumnMenuGrid () { }) const columns = data.columns // only show `Manage Columns` for last column - columns[4].filterColumnMenuItems = () => ['closeMenu', 'manageColumns'] + columns[4].getVisibleColumnMenuItems = () => ['closeMenu', 'manageColumns'] const columnMenuItems = { ['filter']: { @@ -52,7 +52,7 @@ export default function ColumnMenuGrid () { componentsProps={{ columnMenu: { columnMenuItems, - filterColumnMenuItems: () => [ + getVisibleColumnMenuItems: () => [ 'hideColumn', 'filter', 'closeMenu', diff --git a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx index 7beb4851330d..73d6237dc1a0 100644 --- a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx +++ b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx @@ -26,7 +26,7 @@ export default function ColumnMenuGrid() { }); const columns = data.columns; // only show `Manage Columns` for last column - columns[4].filterColumnMenuItems = () => ['closeMenu', 'manageColumns']; + columns[4].getVisibleColumnMenuItems = () => ['closeMenu', 'manageColumns']; const columnMenuItems = { ['filter']: { @@ -49,7 +49,7 @@ export default function ColumnMenuGrid() { componentsProps={{ columnMenu: { columnMenuItems, - filterColumnMenuItems: () => [ + getVisibleColumnMenuItems: () => [ 'hideColumn', 'filter', 'closeMenu', diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index 4fbe675b9ab2..078a6918724f 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -35,9 +35,9 @@ You can also customise column menu based on some conditions. Every item in the m - Add new items - Change display order for items -For that purpose you can use `filterColumnMenuItems` and `columnMenuItems`. +For that purpose you can use `getVisibleColumnMenuItems` and `columnMenuItems`. -**filterColumnMenuItems**: It is available in both `GridColDef` and `componentsProps.columnMenu`, it receives list of all registered slots and should return a `filtered` and `ordered` list of items that are needed to be shown. It can be used either per-column basis by passing in `GridColDef` or for whole Grid by passing in `componentsProps.columnMenu`. If you have it in both, the preference will be given to the `GridColDef` one. +**getVisibleColumnMenuItems**: It is available in both `GridColDef` and `componentsProps.columnMenu`, it receives list of all registered slots and should return a `filtered` and `ordered` list of items that are needed to be shown. It can be used either per-column basis by passing in `GridColDef` or for whole Grid by passing in `componentsProps.columnMenu`. If you have it in both, the preference will be given to the `GridColDef` one. **columnMenuItems**: It could be used to override or register new items to the menu. You can simply pass the object with existing or new items and they will be updated/added to the grid. @@ -57,11 +57,11 @@ const columnMenuItems = { } // add new item in visible items and append it to the last of list -const filterColumnMenuItems = (defaultItems) => [...defaultItems, 'closeMenu']; +const getVisibleColumnMenuItems = (defaultItems) => [...defaultItems, 'closeMenu']; ``` diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx index 6f8af8a79ed2..eaddc1ec8381 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx @@ -52,7 +52,8 @@ const GridColumnMenu = (props: GridColumnMenuProps) => { }, [preProcessedValue, userItems]); const filteredColumnMenuItems: GridColumnMenuValue = React.useMemo(() => { - const filterCallback = currentColumn.filterColumnMenuItems ?? props.filterColumnMenuItems; + const filterCallback = + currentColumn.getVisibleColumnMenuItems ?? props.getVisibleColumnMenuItems; if (!filterCallback || typeof filterCallback !== 'function') { return extendedColumnMenuItems; } @@ -71,7 +72,11 @@ const GridColumnMenu = (props: GridColumnMenuProps) => { const item = extendedColumnMenuItems.find((menuItem) => menuItem.slot === slot); return item ? [...acc, item] : acc; }, [] as GridColumnMenuValue); - }, [currentColumn.filterColumnMenuItems, props.filterColumnMenuItems, extendedColumnMenuItems]); + }, [ + currentColumn.getVisibleColumnMenuItems, + props.getVisibleColumnMenuItems, + extendedColumnMenuItems, + ]); return ( @@ -125,7 +130,7 @@ GridColumnMenu.propTypes = { }).isRequired, }), currentColumn: PropTypes.object.isRequired, - filterColumnMenuItems: PropTypes.func, + getVisibleColumnMenuItems: PropTypes.func, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, labelledby: PropTypes.string, diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts index c34e9660c20c..85abb16d38af 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts @@ -13,7 +13,7 @@ export interface GridColumnMenuProps extends React.HTMLAttributes, ) => Array; /** diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx index 54e46c316e99..08dbd81b7034 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx @@ -19,7 +19,7 @@ export interface GridColumnMenuContainerProps | 'hideMenu' | 'currentColumn' | 'open' - | 'filterColumnMenuItems' + | 'getVisibleColumnMenuItems' | 'id' | 'labelledby' | 'className' @@ -63,7 +63,7 @@ GridColumnMenuContainer.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- currentColumn: PropTypes.object.isRequired, - filterColumnMenuItems: PropTypes.func, + getVisibleColumnMenuItems: PropTypes.func, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, labelledby: PropTypes.string, diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx index fd6184319f2a..b2373c6126e5 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx @@ -12,7 +12,7 @@ import { SortGridMenuItems } from './SortGridMenuItems'; export interface GridColumnMenuDefaultProps extends Pick< GridColumnMenuProps, - 'hideMenu' | 'currentColumn' | 'open' | 'filterColumnMenuItems' + 'hideMenu' | 'currentColumn' | 'open' | 'getVisibleColumnMenuItems' > {} const GridColumnMenuDefault = React.forwardRef( @@ -59,7 +59,7 @@ GridColumnMenuDefault.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- currentColumn: PropTypes.object.isRequired, - filterColumnMenuItems: PropTypes.func, + getVisibleColumnMenuItems: PropTypes.func, hideMenu: PropTypes.func.isRequired, open: PropTypes.bool.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index d55001a5976b..7a1c6fe482ce 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -12,7 +12,7 @@ import { GridColumnMenu } from '../GridColumnMenu'; interface Props extends Pick< GridColumnMenuProps, - 'hideMenu' | 'currentColumn' | 'open' | 'filterColumnMenuItems' + 'hideMenu' | 'currentColumn' | 'open' | 'getVisibleColumnMenuItems' > {} const GridColumnMenuSimple = React.forwardRef( @@ -57,7 +57,7 @@ GridColumnMenuSimple.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- currentColumn: PropTypes.object.isRequired, - filterColumnMenuItems: PropTypes.func, + getVisibleColumnMenuItems: PropTypes.func, hideMenu: PropTypes.func.isRequired, open: PropTypes.bool.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx index 8cf57825e2b8..9b4a1f300abe 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx @@ -12,7 +12,7 @@ interface Props | 'hideMenu' | 'currentColumn' | 'open' - | 'filterColumnMenuItems' + | 'getVisibleColumnMenuItems' | 'id' | 'labelledby' | 'className' @@ -57,7 +57,7 @@ GridColumnMenuSimpleContainer.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- currentColumn: PropTypes.object.isRequired, - filterColumnMenuItems: PropTypes.func, + getVisibleColumnMenuItems: PropTypes.func, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, labelledby: PropTypes.string, diff --git a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts b/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts index 0686cfcf9ccc..dfc3bafd2d7f 100644 --- a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts +++ b/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts @@ -246,7 +246,7 @@ export interface GridColDef { * @param {Array} slots Registered column menu item slots. * @returns {Array} Slots ehich are needed to be shown. */ - filterColumnMenuItems?: ( + getVisibleColumnMenuItems?: ( slots: Array, ) => Array; } From e9e5b547ee5c1c534f79ede77662ebd16230beb0 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 3 Nov 2022 16:00:34 +0500 Subject: [PATCH 015/104] Updates types, docs and other refactorings --- .../column-menu/ColumnMenuGridPro.js | 12 +- .../column-menu/FilterColumnMenuGrid.js | 23 ++-- .../column-menu/FilterColumnMenuGrid.tsx | 52 +++++--- .../column-menu/SimpleColumnMenuGrid.js | 12 +- .../data/data-grid/column-menu/column-menu.md | 74 +++++++++-- .../useGridAggregationPreProcessors.tsx | 37 ++++-- .../rowGrouping/useGridRowGrouping.tsx | 40 +++--- .../src/typeOverloads/modules.ts | 6 + .../columnPinning/useGridColumnPinning.tsx | 40 +++--- .../src/typeOverloads/modules.ts | 4 + .../src/utils/columnMenu/index.ts | 2 +- .../columnMenu/insertItemsInColumnMenu.ts | 21 --- .../columnMenu/insertSlotsInColumnMenu.ts | 25 ++++ .../src/components/menu/GridMenu.tsx | 6 +- .../menu/columnMenu/GridColumnMenu.tsx | 124 +++++++----------- .../columnMenu/GridColumnMenuItemProps.ts | 7 + .../menu/columnMenu/GridColumnMenuProps.ts | 25 ++-- .../menu/columnMenu/GridItemProps.ts | 7 - .../default/GridColumnMenuDefault.tsx | 44 ++++--- .../default/GridColumnsMenuItem.tsx | 10 +- .../columnMenu/default/GridFilterMenuItem.tsx | 18 +-- .../default/HideGridColMenuItem.tsx | 16 ++- .../columnMenu/default/SortGridMenuItems.tsx | 8 +- .../menu/columnMenu/default/index.ts | 1 + .../src/components/menu/columnMenu/index.ts | 1 + .../simple/GridColumnMenuSimple.tsx | 28 ++-- .../simple/GridColumnMenuSimpleContainer.tsx | 6 +- .../simple/GridColumnsMenuSimpleItem.tsx | 10 +- .../simple/GridFilterMenuSimpleItem.tsx | 15 ++- .../simple/HideGridColMenuSimpleItem.tsx | 18 ++- .../simple/SortGridMenuSimpleItems.tsx | 10 +- .../columnMenu/columnMenuInterfaces.ts | 19 ++- 32 files changed, 415 insertions(+), 306 deletions(-) delete mode 100644 packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts create mode 100644 packages/grid/x-data-grid-pro/src/utils/columnMenu/insertSlotsInColumnMenu.ts create mode 100644 packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuItemProps.ts delete mode 100644 packages/grid/x-data-grid/src/components/menu/columnMenu/GridItemProps.ts diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridPro.js b/docs/data/data-grid/column-menu/ColumnMenuGridPro.js index 0b2149ce6e7d..91d4fee9726b 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridPro.js +++ b/docs/data/data-grid/column-menu/ColumnMenuGridPro.js @@ -1,17 +1,17 @@ -import * as React from 'react' -import { DataGridPremium } from '@mui/x-data-grid-premium' -import { useDemoData } from '@mui/x-data-grid-generator' +import * as React from 'react'; +import { DataGridPremium } from '@mui/x-data-grid-premium'; +import { useDemoData } from '@mui/x-data-grid-generator'; -export default function ColumnMenuGridPro () { +export default function ColumnMenuGridPro() { const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 20, maxColumns: 5, - }) + }); return (
- ) + ); } diff --git a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js index 32727a2d87d3..30bbeb2afd05 100644 --- a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js @@ -5,7 +5,6 @@ import Stack from '@mui/material/Stack' import Button from '@mui/material/Button' const MenuCloseComponent = props => { - console.log(props, 'props') return ( - -); +declare module '@mui/x-data-grid' { + interface GridColumnMenuSlotOverrides { + closeMenu: true; + } +} + +const MenuCloseComponent = (props: GridColumnMenuItemProps) => { + return ( + + + + ); +}; -const FilterComponent = (props: any) => ( +const FilterComponent = (props: GridColumnMenuItemProps) => ( ); -export default function ColumnMenuGrid() { +export default function FilterColumnMenuGrid() { const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 20, maxColumns: 5, }); const columns = data.columns; - // only show `Manage Columns` for last column - columns[4].getVisibleColumnMenuItems = () => ['closeMenu', 'manageColumns']; + // Show specific items for this column + columns[4].getVisibleColumnMenuItems = () => [ + 'closeMenu', + 'divider', + 'manageColumns', + ]; const columnMenuItems = { - ['filter']: { - // existing slot + filter: { + // overriding existing item component: , // overriden property }, - ['closeMenu']: { - // registering new slot + closeMenu: { + // adding new item component: , displayName: 'MenuClose', - addDivider: true, }, }; @@ -51,8 +66,11 @@ export default function ColumnMenuGrid() { columnMenuItems, getVisibleColumnMenuItems: () => [ 'hideColumn', + 'divider', 'filter', + 'divider', 'closeMenu', + 'divider', 'manageColumns', ], }, diff --git a/docs/data/data-grid/column-menu/SimpleColumnMenuGrid.js b/docs/data/data-grid/column-menu/SimpleColumnMenuGrid.js index 878c31300912..fc703960ebdf 100644 --- a/docs/data/data-grid/column-menu/SimpleColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/SimpleColumnMenuGrid.js @@ -1,17 +1,17 @@ -import * as React from 'react' -import { DataGrid, GridColumnMenuSimple } from '@mui/x-data-grid' -import { useDemoData } from '@mui/x-data-grid-generator' +import * as React from 'react'; +import { DataGrid, GridColumnMenuSimple } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; -export default function SimpleColumnMenuGrid () { +export default function SimpleColumnMenuGrid() { const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 20, maxColumns: 5, - }) + }); return (
- ) + ); } diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index 078a6918724f..d33fe28d259d 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -41,31 +41,79 @@ For that purpose you can use `getVisibleColumnMenuItems` and `columnMenuItems`. **columnMenuItems**: It could be used to override or register new items to the menu. You can simply pass the object with existing or new items and they will be updated/added to the grid. +### Hide/Show Specific Items: + +For every column menu component there's a default order of items configured by default called `visibleMenuItems`, for default column menu it's: + +```tsx +[ + 'sorting', + 'divider', + 'filter', + 'divider', + 'hideColumn', + 'divider', + 'manageColumns', +]; +``` + +Using `getVisibleColumnMenuItems` method, you can override this order based on configured slots for the column menu. + +```tsx +const getVisibleColumnMenuItems = () => ['sorting', 'divider', 'filter']; // only show `sort` & `filter` + +return ( + +); +``` + +### Override default items and add new items: + +Using `componentsProps.columnMenu.columnMenuItems`, you can: + +1. Override Existing Items +2. Add new Items + ```tsx const columnMenuItems = { - ['filter']: { // existing slot + ['filter']: { + // overiding existing slot component: , // overriden property - addDivider: true, }, - ['manageColumns']: { // override another existing slot - addDivider: true, - }, - ['closeMenu']: { // registering new slot + ['closeMenu']: { + // adding new slot component: , displayName: 'MenuClose', - } -} + }, +}; // add new item in visible items and append it to the last of list const getVisibleColumnMenuItems = (defaultItems) => [...defaultItems, 'closeMenu']; - +; +``` + +If you're using TypeScript, for new items that you are adding, you'll need to specify new slots you are registering, using [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation). + +```tsx +declare module '@mui/x-data-grid' { + interface GridColumnMenuSlotOverrides { + closeMenu: true; + } +} ``` -Currently available default slots for _DataGridCommunity_ are `filter`, `sorting`, `hideColumn` and `manageColumns`. +### Default column menu items + +Currently available default slots for **x-data-grid** are `filter`, `sorting`, `hideColumn`, `divider` and `manageColumns`, wheras **x-data-grid-pro** adds `pinning` and **x-data-grid-premium** adds `grouping` and `aggregation` on top of them. + +Here's a demo overriding some existing items, adding some new items and displaying different items for a column. {{"demo": "FilterColumnMenuGrid.js", "bg": "inline"}} diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx index e82d1d13aa5d..f5e17f1856c1 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx @@ -1,6 +1,10 @@ import * as React from 'react'; -import MuiDivider, { DividerProps } from '@mui/material/Divider'; -import { gridColumnLookupSelector, insertItemsInColumnMenu } from '@mui/x-data-grid-pro'; +import { + gridColumnLookupSelector, + GridColumnMenuValue, + GridColumnMenuLookup, + insertSlotsInColumnMenu, +} from '@mui/x-data-grid-pro'; import { GridPipeProcessor, GridRestoreStatePreProcessingContext, @@ -23,10 +27,6 @@ import { GridAggregationColumnMenuSimpleItem } from '../../../components/GridAgg import { gridAggregationModelSelector } from './gridAggregationSelectors'; import { GridInitialStatePremium } from '../../../models/gridStatePremium'; -const Divider = (props: DividerProps) => ( - event.stopPropagation()} /> -); - export const useGridAggregationPreProcessors = ( apiRef: React.MutableRefObject, props: Pick< @@ -111,9 +111,9 @@ export const useGridAggregationPreProcessors = ( ); const addColumnMenuButtons = React.useCallback>( - (columnMenuItems, column) => { + (columnMenuValue: GridColumnMenuValue, column) => { if (props.disableAggregation) { - return columnMenuItems; + return columnMenuValue; } const availableAggregationFunctions = getAvailableAggregationFunctions({ @@ -122,7 +122,7 @@ export const useGridAggregationPreProcessors = ( }); if (availableAggregationFunctions.length === 0) { - return columnMenuItems; + return columnMenuValue; } const aggregationItemProps = { @@ -131,21 +131,32 @@ export const useGridAggregationPreProcessors = ( availableAggregationFunctions, }; - const item = columnMenuItems.some(({ displayName }) => + const slot: GridColumnMenuLookup['slot'] = 'aggregation'; + + const aggregationItem = columnMenuValue.items.some(({ displayName }) => displayName?.includes('GridFilterMenuSimple'), ) ? { - slot: 'aggregation', + slot, displayName: 'GridAggregationColumnMenuSimpleItem', component: , } : { - slot: 'aggregation', + slot, displayName: 'GridAggregationColumnMenuItem', component: , addDivider: true, }; - return insertItemsInColumnMenu(columnMenuItems, [item], 'GridFilterMenuItem'); + + const items = [...columnMenuValue.items, aggregationItem]; + + const visibleSlots = insertSlotsInColumnMenu( + columnMenuValue.visibleSlots, + aggregationItem.addDivider ? ['divider', aggregationItem.slot] : [aggregationItem.slot], + 'filter', + ); + + return { visibleSlots, items }; }, [apiRef, props.aggregationFunctions, props.disableAggregation], ); diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx index 020181064fb3..b5a8faa5a15b 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import MuiDivider, { DividerProps } from '@mui/material/Divider'; import { GridEventListener, useGridApiEventHandler, useGridApiMethod, gridColumnLookupSelector, - insertItemsInColumnMenu, + insertSlotsInColumnMenu, GridColumnMenuValue, + GridColumnMenuLookup, } from '@mui/x-data-grid-pro'; import { useGridRegisterPipeProcessor, @@ -36,10 +36,6 @@ import { GridRowGroupingColumnMenuSimpleItems } from '../../../components/GridRo import { GridRowGroupingColumnMenuItems } from '../../../components/GridRowGroupingColumnMenuItems'; import { GridInitialStatePremium } from '../../../models/gridStatePremium'; -const Divider = (props: DividerProps) => ( - event.stopPropagation()} /> -); - export const rowGroupingStateInitializer: GridStateInitializer< Pick > = (state, props, apiRef) => { @@ -163,39 +159,39 @@ export const useGridRowGrouping = ( * PRE-PROCESSING */ const addColumnMenuButtons = React.useCallback>( - (columnMenuItems, column) => { + (columnMenuValue: GridColumnMenuValue, column) => { if (props.disableRowGrouping) { - return columnMenuItems; + return columnMenuValue; } - const isSimpleMenu = columnMenuItems.some(({ displayName }) => + const isSimpleMenu = columnMenuValue.items.some(({ displayName }) => displayName?.includes('GridAggregationColumnMenuSimple'), ); + const slot: GridColumnMenuLookup['slot'] = 'grouping'; + const groupingItem = isSimpleMenu ? { - slot: 'grouping', + slot, displayName: 'GridRowGroupingColumnMenuSimpleItems', component: , } : { - slot: 'grouping', + slot, displayName: 'GridRowGroupingColumnMenuItems', component: , - addDivider: true, }; const groupableItem = isSimpleMenu ? { - slot: 'groupable', + slot, displayName: 'GridRowGroupableColumnMenuSimpleItems', component: , } : { - slot: 'groupable', + slot, displayName: 'GridRowGroupableColumnMenuItems', component: , - addDivider: true, }; let menuItem; @@ -208,16 +204,18 @@ export const useGridRowGrouping = ( } if (menuItem == null) { - return columnMenuItems; + return columnMenuValue; } - const nodesToInsert: GridColumnMenuValue = [menuItem]; + const items = [...columnMenuValue.items, menuItem]; - return insertItemsInColumnMenu( - columnMenuItems, - nodesToInsert, - 'GridAggregationColumnMenuItem', + const visibleSlots = insertSlotsInColumnMenu( + columnMenuValue.visibleSlots, + !isSimpleMenu ? ['divider', slot] : [slot], + 'aggregation', ); + + return { visibleSlots, items }; }, [props.disableRowGrouping], ); diff --git a/packages/grid/x-data-grid-premium/src/typeOverloads/modules.ts b/packages/grid/x-data-grid-premium/src/typeOverloads/modules.ts index 639df7d02ef6..49a154e8efcb 100644 --- a/packages/grid/x-data-grid-premium/src/typeOverloads/modules.ts +++ b/packages/grid/x-data-grid-premium/src/typeOverloads/modules.ts @@ -73,6 +73,12 @@ declare module '@mui/x-data-grid-pro' { interface GridColumnHeaderParams extends GridColumnHeaderParamsPremium {} interface GridApiCaches extends GridApiCachesPremium {} + + interface GridColumnMenuSlotInternalOverrides { + pinning: true; + aggregation: true; + grouping: true; + } } declare module '@mui/x-data-grid-pro/internals' { diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx index fc9203cac2a3..26e2082c372e 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import MuiDivider, { DividerProps } from '@mui/material/Divider'; import { useGridSelector, gridVisibleColumnDefinitionsSelector, @@ -11,6 +10,8 @@ import { useGridApiEventHandler, GridEventListener, gridColumnFieldsSelector, + GridColumnMenuValue, + GridColumnMenuLookup, } from '@mui/x-data-grid'; import { useGridRegisterPipeProcessor, @@ -30,11 +31,7 @@ import { } from './gridColumnPinningInterface'; import { gridPinnedColumnsSelector } from './gridColumnPinningSelector'; import { filterColumns } from '../../../components/DataGridProVirtualScroller'; -import { insertItemsInColumnMenu } from '../../../utils'; - -const Divider = (props: DividerProps) => ( - event.stopPropagation()} /> -); +import { insertSlotsInColumnMenu } from '../../../utils'; export const columnPinningStateInitializer: GridStateInitializer< Pick @@ -179,36 +176,39 @@ export const useGridColumnPinning = ( ); const addColumnMenuItems = React.useCallback>( - (columnMenuItems, column) => { + (columnMenuValue: GridColumnMenuValue, column): GridColumnMenuValue => { if (props.disableColumnPinning) { - return columnMenuItems; + return columnMenuValue; } if (column.pinnable === false) { - return columnMenuItems; + return columnMenuValue; } - const isSimple = columnMenuItems.some(({ displayName }) => - displayName?.includes('SortGridMenuSimple'), - ); + const isDefault = columnMenuValue.visibleSlots.some((slot) => slot?.includes('divider')); - const component = isSimple ? ( - - ) : ( + const component = isDefault ? ( + ) : ( + ); - const nodesToInsert = [ + const items = [ + ...columnMenuValue.items, { - slot: 'pinning', + slot: 'pinning' as GridColumnMenuLookup['slot'], displayName: 'GridColumnPinningMenuItems', - addDivider: true, component, }, ]; - // Insert `pin to` after `sort by` - return insertItemsInColumnMenu(columnMenuItems, nodesToInsert, 'SortGridMenuItems'); + const visibleSlots = insertSlotsInColumnMenu( + columnMenuValue.visibleSlots, + ['divider', 'pinning'], + isDefault ? 'sorting' : undefined, + ); + + return { visibleSlots, items }; }, [props.disableColumnPinning], ); diff --git a/packages/grid/x-data-grid-pro/src/typeOverloads/modules.ts b/packages/grid/x-data-grid-pro/src/typeOverloads/modules.ts index e804ab1b6d3d..a6d24f5f6449 100644 --- a/packages/grid/x-data-grid-pro/src/typeOverloads/modules.ts +++ b/packages/grid/x-data-grid-pro/src/typeOverloads/modules.ts @@ -57,6 +57,10 @@ declare module '@mui/x-data-grid' { interface GridControlledStateEventLookup extends GridControlledStateEventLookupPro {} interface GridPipeProcessingLookup extends GridPipeProcessingLookupPro {} + + interface GridColumnMenuSlotInternalOverrides { + pinning: true; + } } declare module '@mui/x-data-grid/internals' { diff --git a/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts b/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts index fce0fef7d8fa..d1228cc09904 100644 --- a/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts +++ b/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts @@ -1 +1 @@ -export { insertItemsInColumnMenu } from './insertItemsInColumnMenu'; +export { insertSlotsInColumnMenu } from './insertSlotsInColumnMenu'; diff --git a/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts b/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts deleted file mode 100644 index 899923231a3a..000000000000 --- a/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { GridColumnMenuValue } from '@mui/x-data-grid'; - -/** - * Method used to insert specific items after an item in column menu items list - * - * @param {GridColumnMenuValue} columnMenuValues value from `columnMenu` pipe processor - * @param {GridColumnMenuValue} nodesToInsert new nodes to be inserted with `displayName` - * @param {string} afterComponentName name of the component/node after which the new nodes should be inserted - * @returns {GridColumnMenuValue} value from `columnMenu` pipe processor with updated nodes - */ -export const insertItemsInColumnMenu = ( - columnMenuValues: GridColumnMenuValue, - nodesToInsert: GridColumnMenuValue, - afterComponentName: string, -) => - columnMenuValues.reduce((finalItems, item) => { - if (item.displayName === afterComponentName) { - return [...finalItems, item, ...nodesToInsert]; - } - return [...finalItems, item]; - }, [] as GridColumnMenuValue); diff --git a/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertSlotsInColumnMenu.ts b/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertSlotsInColumnMenu.ts new file mode 100644 index 000000000000..01f29271d649 --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertSlotsInColumnMenu.ts @@ -0,0 +1,25 @@ +import { GridColumnMenuValue, GridColumnMenuLookup } from '@mui/x-data-grid'; + +/** + * Method used to insert specific items after an item in column menu + * + * @param {GridColumnMenuValue['visibleSlots']} visibleSlots ordered list of visible slots + * @param {GridColumnMenuValue['visibleSlots']} newSlots new slots to be inserted + * @param {GridColumnMenuLookup['slot'] | undefined} afterSlot name of the slot after which the new slots should be inserted + * @returns {GridColumnMenuValue['visibleSlots']} updated slots + */ +export const insertSlotsInColumnMenu = ( + visibleSlots: GridColumnMenuValue['visibleSlots'], + newSlots: GridColumnMenuValue['visibleSlots'], + afterSlot: GridColumnMenuLookup['slot'] | undefined, +) => { + if (!afterSlot) { + return [...visibleSlots, ...newSlots]; + } + return visibleSlots.reduce((finalItems, slot) => { + if (slot === afterSlot) { + return [...finalItems, slot, ...newSlots]; + } + return [...finalItems, slot]; + }, [] as GridColumnMenuValue['visibleSlots']); +}; diff --git a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx index fb1f7535f28e..765de06321d4 100644 --- a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx @@ -51,11 +51,7 @@ const GridMenuRoot = styled(Popper, { }, })); -const StyledPaper = styled(Paper, { - name: 'MuiDataGrid', - slot: 'Paper', - overridesResolver: (_, styles) => styles.paper, -})(() => ({ +const StyledPaper = styled(Paper)(() => ({ borderRadius: '10px', })); diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx index eaddc1ec8381..19091b5a91da 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx @@ -1,69 +1,68 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import Divider from '@mui/material/Divider'; -import { - GridColumnMenuLookup, - GridColumnMenuSlot, - GridColumnMenuValue, -} from '../../../hooks/features/columnMenu'; +import { GridColumnMenuLookup, GridColumnMenuValue } from '../../../hooks/features/columnMenu'; import { GridColumnMenuProps } from './GridColumnMenuProps'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; const GridColumnMenu = (props: GridColumnMenuProps) => { - const { hideMenu, currentColumn, menuItems, columnMenuItems: userItems } = props; + const { + hideMenu, + currentColumn, + defaultMenuItems, + defaultVisibleSlots, + columnMenuItems: userMenuItems, + } = props; const apiRef = useGridApiContext(); const preProcessedValue = apiRef.current.unstable_applyPipeProcessors( 'columnMenu', - menuItems, + { items: defaultMenuItems, visibleSlots: defaultVisibleSlots }, currentColumn, ); const extendedColumnMenuItems = React.useMemo(() => { - if (!userItems || !Object.keys(userItems).length) { - return preProcessedValue; + if (!userMenuItems || !Object.keys(userMenuItems).length) { + return preProcessedValue.items; } // Overrides for default items - const userSlots = new Set( - Object.keys(userItems) as Array, + const userSlots = new Set( + Object.keys(userMenuItems) as Array, ); - const overridenItems = preProcessedValue.reduce((acc, item) => { + const overridenItems = preProcessedValue.items.reduce((acc, item) => { if (userSlots.has(item.slot)) { // override userSlots.delete(item.slot); - return [...acc, { ...item, ...userItems[item.slot] }]; + return [...acc, { ...item, ...userMenuItems[item.slot] }]; } return [...acc, item]; - }, [] as GridColumnMenuValue); + }, [] as GridColumnMenuValue['items']); // New items to add // TODO: Handle typings for newly added slots if (userSlots.size > 0) { - const newItems = Array.from(userSlots).map((slot: GridColumnMenuSlot) => ({ + const newItems = Array.from(userSlots).map((slot: GridColumnMenuLookup['slot']) => ({ slot, - ...userItems[slot], + ...userMenuItems[slot], })); return [...overridenItems, ...newItems]; } return overridenItems; - }, [preProcessedValue, userItems]); + }, [preProcessedValue.items, userMenuItems]); - const filteredColumnMenuItems: GridColumnMenuValue = React.useMemo(() => { + const filteredColumnMenuItems: GridColumnMenuValue['items'] = React.useMemo(() => { const filterCallback = currentColumn.getVisibleColumnMenuItems ?? props.getVisibleColumnMenuItems; - if (!filterCallback || typeof filterCallback !== 'function') { - return extendedColumnMenuItems; - } - const menuItemSlots = extendedColumnMenuItems.reduce( - (slots, item) => (item.slot ? [...slots, item.slot] : slots), - [] as Array, - ); + const menuItemSlots = extendedColumnMenuItems.map((item) => item.slot); + + const filteredSlots: Array = + !filterCallback || typeof filterCallback !== 'function' + ? preProcessedValue.visibleSlots + : filterCallback(menuItemSlots); - const filteredSlots = filterCallback(menuItemSlots); if (!filteredSlots?.length) { return extendedColumnMenuItems; } @@ -71,11 +70,12 @@ const GridColumnMenu = (props: GridColumnMenuProps) => { return filteredSlots.reduce((acc, slot) => { const item = extendedColumnMenuItems.find((menuItem) => menuItem.slot === slot); return item ? [...acc, item] : acc; - }, [] as GridColumnMenuValue); + }, [] as GridColumnMenuValue['items']); }, [ currentColumn.getVisibleColumnMenuItems, props.getVisibleColumnMenuItems, extendedColumnMenuItems, + preProcessedValue.visibleSlots, ]); return ( @@ -85,14 +85,10 @@ const GridColumnMenu = (props: GridColumnMenuProps) => { ...item.component.props, onClick: hideMenu, column: currentColumn, + key: index, }; - return item.component.type(itemProps) ? ( - - - {item.addDivider ? : null} - - ) : null; + return React.cloneElement(item.component, itemProps); })} ); @@ -108,69 +104,47 @@ GridColumnMenu.propTypes = { * If the slot is already registered, it will be overwritten otherwise a new slot will be registered */ columnMenuItems: PropTypes.shape({ + divider: PropTypes.shape({ + component: PropTypes.node, + displayName: PropTypes.string, + }).isRequired, filter: PropTypes.shape({ - addDivider: PropTypes.bool, component: PropTypes.node, displayName: PropTypes.string, }).isRequired, hideColumn: PropTypes.shape({ - addDivider: PropTypes.bool, component: PropTypes.node, displayName: PropTypes.string, }).isRequired, manageColumns: PropTypes.shape({ - addDivider: PropTypes.bool, component: PropTypes.node, displayName: PropTypes.string, }).isRequired, sorting: PropTypes.shape({ - addDivider: PropTypes.bool, component: PropTypes.node, displayName: PropTypes.string, }).isRequired, }), currentColumn: PropTypes.object.isRequired, + defaultMenuItems: PropTypes.arrayOf( + PropTypes.shape({ + component: PropTypes.node, + displayName: PropTypes.string, + slot: PropTypes.oneOf(['divider', 'filter', 'hideColumn', 'manageColumns', 'sorting']) + .isRequired, + }), + ).isRequired, + /** + * Default column menu items in order that needs to be shown + * Could be overriden by `getVisibleColumnMenuItems` + */ + defaultVisibleSlots: PropTypes.arrayOf( + PropTypes.oneOf(['divider', 'filter', 'hideColumn', 'manageColumns', 'sorting']).isRequired, + ).isRequired, getVisibleColumnMenuItems: PropTypes.func, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, labelledby: PropTypes.string, - menuItems: PropTypes.shape({ - '__@iterator@451': PropTypes.func.isRequired, - '__@unscopables@453': PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - copyWithin: PropTypes.func.isRequired, - entries: PropTypes.func.isRequired, - every: PropTypes.func.isRequired, - fill: PropTypes.func.isRequired, - filter: PropTypes.func.isRequired, - find: PropTypes.func.isRequired, - findIndex: PropTypes.func.isRequired, - flat: PropTypes.func.isRequired, - flatMap: PropTypes.func.isRequired, - forEach: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - join: PropTypes.func.isRequired, - keys: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - map: PropTypes.func.isRequired, - pop: PropTypes.func.isRequired, - push: PropTypes.func.isRequired, - reduce: PropTypes.func.isRequired, - reduceRight: PropTypes.func.isRequired, - reverse: PropTypes.func.isRequired, - shift: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - some: PropTypes.func.isRequired, - sort: PropTypes.func.isRequired, - splice: PropTypes.func.isRequired, - toLocaleString: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - unshift: PropTypes.func.isRequired, - values: PropTypes.func.isRequired, - }).isRequired, open: PropTypes.bool.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuItemProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuItemProps.ts new file mode 100644 index 000000000000..2822872d5d00 --- /dev/null +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuItemProps.ts @@ -0,0 +1,7 @@ +import * as React from 'react'; +import { GridColDef } from '../../../models/colDef/gridColDef'; + +export interface GridColumnMenuItemProps { + column?: GridColDef; + onClick?: (event: React.MouseEvent) => void; +} diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts index 85abb16d38af..1a837aa8c442 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts @@ -1,10 +1,6 @@ import * as React from 'react'; import { GridColDef } from '../../../models/colDef/gridColDef'; -import { - GridColumnMenuLookup, - GridColumnMenuValue, - GridColumnMenuSlot, -} from '../../../hooks/features/columnMenu'; +import { GridColumnMenuLookup, GridColumnMenuValue } from '../../../hooks/features/columnMenu'; export interface GridColumnMenuProps extends React.HTMLAttributes { hideMenu: (event: React.SyntheticEvent) => void; @@ -12,18 +8,21 @@ export interface GridColumnMenuProps extends React.HTMLAttributes, - ) => Array; + defaultMenuItems: GridColumnMenuValue['items']; /** * To override existing and add new items in column menu * If the slot is already registered, it will be overwritten otherwise a new slot will be registered */ columnMenuItems?: { - [key in GridColumnMenuSlot]: Pick< - GridColumnMenuLookup, - 'component' | 'displayName' | 'addDivider' - >; + [key in GridColumnMenuLookup['slot']]: Pick; }; + getVisibleColumnMenuItems?: ( + items: Array, + ) => Array; + + /** + * Default column menu items in order that needs to be shown + * Could be overriden by `getVisibleColumnMenuItems` + */ + defaultVisibleSlots: Array; } diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridItemProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridItemProps.ts deleted file mode 100644 index 0bcdec9ef5a0..000000000000 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridItemProps.ts +++ /dev/null @@ -1,7 +0,0 @@ -import * as React from 'react'; -import { GridColDef } from '../../../models/colDef/gridColDef'; - -export interface GridItemProps { - column: GridColDef; - onClick: (event: React.MouseEvent) => void; -} diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx index b2373c6126e5..91eadeb333f6 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { GridColumnMenuValue } from '../../../../hooks/features/columnMenu'; +import Divider from '@mui/material/Divider'; +import { GridColumnMenuValue, GridColumnMenuLookup } from '../../../../hooks/features/columnMenu'; import { GridColumnMenuContainer } from './GridColumnMenuContainer'; import { GridColumnMenu } from '../GridColumnMenu'; import { GridColumnMenuProps } from '../GridColumnMenuProps'; @@ -10,44 +11,54 @@ import { HideGridColMenuItem } from './HideGridColMenuItem'; import { SortGridMenuItems } from './SortGridMenuItems'; export interface GridColumnMenuDefaultProps - extends Pick< - GridColumnMenuProps, - 'hideMenu' | 'currentColumn' | 'open' | 'getVisibleColumnMenuItems' - > {} + extends Pick {} + +const defaultVisibleSlots: Array = [ + 'sorting', + 'divider', + 'filter', + 'divider', + 'hideColumn', + 'divider', + 'manageColumns', +]; const GridColumnMenuDefault = React.forwardRef( function GridColumnMenuDefault(props: GridColumnMenuDefaultProps, ref) { - const { hideMenu, currentColumn } = props; - - const menuItems: GridColumnMenuValue = [ + const defaultMenuItems: GridColumnMenuValue['items'] = [ { slot: 'sorting', displayName: 'SortGridMenuItems', - component: , - addDivider: true, + component: , }, { slot: 'filter', displayName: 'GridFilterMenuItem', - component: , - addDivider: true, + component: , }, { slot: 'hideColumn', displayName: 'HideGridColMenuItem', - component: , - addDivider: true, + component: , }, { slot: 'manageColumns', displayName: 'GridColumnsMenuItem', - component: , + component: , + }, + { + slot: 'divider', + component: , }, ]; return ( - + ); }, @@ -59,7 +70,6 @@ GridColumnMenuDefault.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- currentColumn: PropTypes.object.isRequired, - getVisibleColumnMenuItems: PropTypes.func, hideMenu: PropTypes.func.isRequired, open: PropTypes.bool.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx index aa69377303a2..3db0e5f1ee08 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx @@ -5,7 +5,7 @@ import Button from '@mui/material/Button'; import { styled } from '@mui/material'; import { GridPreferencePanelsValue } from '../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; -import { GridItemProps } from '../GridItemProps'; +import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; const StyledStack = styled(Stack)(({ theme }) => ({ @@ -13,14 +13,14 @@ const StyledStack = styled(Stack)(({ theme }) => ({ flexDirection: 'row', })); -const GridColumnsMenuItem = (props: GridItemProps) => { +const GridColumnsMenuItem = (props: GridColumnMenuItemProps) => { const { onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const showColumns = React.useCallback( (event: React.MouseEvent) => { - onClick(event); + onClick?.(event); apiRef.current.showPreferences(GridPreferencePanelsValue.columns); }, [apiRef, onClick], @@ -47,8 +47,8 @@ GridColumnsMenuItem.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - column: PropTypes.object.isRequired, - onClick: PropTypes.func.isRequired, + column: PropTypes.object, + onClick: PropTypes.func, } as any; export { GridColumnsMenuItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx index 99aa60ba866e..eb3d134b2823 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx @@ -7,7 +7,7 @@ import { styled } from '@mui/material'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { useGridSelector } from '../../../../hooks/utils/useGridSelector'; import { gridFilterModelSelector } from '../../../../hooks/features/filter/gridFilterSelector'; -import { GridItemProps } from '../GridItemProps'; +import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; const StyledStack = styled(Stack)(({ theme }) => ({ @@ -22,7 +22,7 @@ const StyledButton = styled(Button)(() => ({ textTransform: 'none', })); -const GridFilterMenuItem = (props: GridItemProps) => { +const GridFilterMenuItem = (props: GridColumnMenuItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -32,12 +32,12 @@ const GridFilterMenuItem = (props: GridItemProps) => { if (filterModel.items.length <= 0) { return false; } - return filterModel.items.some((item) => item.columnField === column.field); - }, [column.field, filterModel.items]); + return filterModel.items.some((item) => item.columnField === column?.field); + }, [column?.field, filterModel.items]); const showFilter = React.useCallback( (event: React.MouseEvent) => { - onClick(event); + onClick?.(event); apiRef.current.showFilterPanel(column?.field); }, [apiRef, column?.field, onClick], @@ -46,10 +46,10 @@ const GridFilterMenuItem = (props: GridItemProps) => { const clearFilters = React.useCallback(() => { if (isColumnFiltered) { apiRef.current.upsertFilterItems( - filterModel.items.filter((item) => item.columnField !== column.field), + filterModel.items.filter((item) => item.columnField !== column?.field), ); } - }, [apiRef, column.field, filterModel.items, isColumnFiltered]); + }, [apiRef, column?.field, filterModel.items, isColumnFiltered]); if (rootProps.disableColumnFilter || !column?.filterable) { return null; @@ -79,8 +79,8 @@ GridFilterMenuItem.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - column: PropTypes.object.isRequired, - onClick: PropTypes.func.isRequired, + column: PropTypes.object, + onClick: PropTypes.func, } as any; export { GridFilterMenuItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx index b3eb38626dae..44fce31cdcfb 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import { styled } from '@mui/material'; -import { GridItemProps } from '../GridItemProps'; +import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; import { gridVisibleColumnDefinitionsSelector } from '../../../../hooks/features/columns'; @@ -20,7 +20,7 @@ const StyledButton = styled(Button)(() => ({ textTransform: 'none', })); -const HideGridColMenuItem = (props: GridItemProps) => { +const HideGridColMenuItem = (props: GridColumnMenuItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -41,10 +41,12 @@ const HideGridColMenuItem = (props: GridItemProps) => { if (disabled) { return; } - onClick(event); + onClick?.(event); // time for the transition timeoutRef.current = setTimeout(() => { - apiRef.current.setColumnVisibility(column?.field, false); + if (column?.field) { + apiRef.current.setColumnVisibility(column.field, false); + } }, 100); }, [apiRef, column?.field, onClick, disabled], @@ -58,7 +60,7 @@ const HideGridColMenuItem = (props: GridItemProps) => { return null; } - if (column.hideable === false) { + if (column?.hideable === false) { return null; } @@ -81,8 +83,8 @@ HideGridColMenuItem.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - column: PropTypes.object.isRequired, - onClick: PropTypes.func.isRequired, + column: PropTypes.object, + onClick: PropTypes.func, } as any; export { HideGridColMenuItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx index 2c1ce2e225dd..e36eef116f7f 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx @@ -9,7 +9,7 @@ import { gridSortModelSelector } from '../../../../hooks/features/sorting/gridSo import { GridSortDirection } from '../../../../models/gridSortModel'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; -import { GridItemProps } from '../GridItemProps'; +import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; const StyledStack = styled(Stack)(({ theme }) => ({ padding: theme.spacing(0.5, 1.5, 0.5, 1.5), @@ -20,7 +20,7 @@ const StyledButton = styled(Button)(() => ({ fontWeight: '400', })); -const SortGridMenuItems = (props: GridItemProps) => { +const SortGridMenuItems = (props: GridColumnMenuItemProps) => { const { column } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -81,8 +81,8 @@ SortGridMenuItems.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - column: PropTypes.object.isRequired, - onClick: PropTypes.func.isRequired, + column: PropTypes.object, + onClick: PropTypes.func, } as any; export { SortGridMenuItems }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts index b6c592a44155..83e0f037ea84 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts @@ -3,3 +3,4 @@ export * from './GridFilterMenuItem'; export * from './HideGridColMenuItem'; export * from './GridColumnMenuContainer'; export * from './GridColumnMenuDefault'; +export * from './SortGridMenuItems'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts index 3f8267fc84f6..bd618de4ebef 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts @@ -2,6 +2,7 @@ export * from './GridColumnHeaderMenu'; export * from './GridColumnMenu'; export * from './GridColumnMenuProps'; +export * from './GridColumnMenuItemProps'; // default one export * from './default'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index 7a1c6fe482ce..383e9a747c79 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { GridColumnMenuValue } from '../../../../hooks/features/columnMenu'; +import { GridColumnMenuLookup, GridColumnMenuValue } from '../../../../hooks/features/columnMenu'; import { GridColumnMenuSimpleContainer } from './GridColumnMenuSimpleContainer'; import { GridColumnMenuProps } from '../GridColumnMenuProps'; import { GridColumnsMenuSimpleItem } from './GridColumnsMenuSimpleItem'; @@ -15,37 +15,45 @@ interface Props 'hideMenu' | 'currentColumn' | 'open' | 'getVisibleColumnMenuItems' > {} +const defaultVisibleSlots: Array = [ + 'sorting', + 'filter', + 'hideColumn', + 'manageColumns', +]; + const GridColumnMenuSimple = React.forwardRef( function GridColumnMenuSimple(props: Props, ref) { - const { hideMenu, currentColumn } = props; - - const menuItems: GridColumnMenuValue = [ + const defaultMenuItems: GridColumnMenuValue['items'] = [ { slot: 'sorting', displayName: 'SortGridMenuSimpleItems', - component: , + component: , }, - // TODO update types to allow `onClick` and `column` to be optional { slot: 'filter', displayName: 'GridFilterMenuSimpleItem', - component: , + component: , }, { slot: 'hideColumn', displayName: 'HideGridColMenuSimpleItem', - component: , + component: , }, { slot: 'manageColumns', displayName: 'GridColumnsMenuSimpleItem', - component: , + component: , }, ]; return ( - + ); }, diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx index 9b4a1f300abe..59ee9530d607 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx @@ -6,7 +6,7 @@ import { isHideMenuKey, isTabKey } from '../../../../utils/keyboardUtils'; import { GridColumnMenuProps } from '../GridColumnMenuProps'; import { gridClasses } from '../../../../constants/gridClasses'; -interface Props +interface GridColumnMenuSimpleProps extends Pick< GridColumnMenuProps, | 'hideMenu' @@ -19,8 +19,8 @@ interface Props | 'children' > {} -const GridColumnMenuSimpleContainer = React.forwardRef( - function GridColumnMenuSimpleContainer(props: Props, ref) { +const GridColumnMenuSimpleContainer = React.forwardRef( + function GridColumnMenuSimpleContainer(props: GridColumnMenuSimpleProps, ref) { const { hideMenu, currentColumn, open, id, labelledby, className, children, ...other } = props; const handleListKeyDown = React.useCallback( diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx index fd7443eb3632..e0bd6591f7f9 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx @@ -3,17 +3,17 @@ import PropTypes from 'prop-types'; import MenuItem from '@mui/material/MenuItem'; import { GridPreferencePanelsValue } from '../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; -import { GridItemProps } from '../GridItemProps'; +import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; -const GridColumnsMenuSimpleItem = (props: GridItemProps) => { +const GridColumnsMenuSimpleItem = (props: GridColumnMenuItemProps) => { const { onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const showColumns = React.useCallback( (event: React.MouseEvent) => { - onClick(event); + onClick?.(event); // hide column menu apiRef.current.showPreferences(GridPreferencePanelsValue.columns); }, [apiRef, onClick], @@ -35,8 +35,8 @@ GridColumnsMenuSimpleItem.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - column: PropTypes.object.isRequired, - onClick: PropTypes.func.isRequired, + column: PropTypes.object, + onClick: PropTypes.func, } as any; export { GridColumnsMenuSimpleItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridFilterMenuSimpleItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridFilterMenuSimpleItem.tsx index f739d364622f..5d50613e7b58 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridFilterMenuSimpleItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridFilterMenuSimpleItem.tsx @@ -2,17 +2,17 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MenuItem from '@mui/material/MenuItem'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; -import { GridItemProps } from '../GridItemProps'; +import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; -const GridFilterMenuSimpleItem = (props: GridFilterItemProps) => { +const GridFilterMenuSimpleItem = (props: GridColumnMenuItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const showFilter = React.useCallback( (event: React.MouseEvent) => { - onClick(event); + onClick?.(event); apiRef.current.showFilterPanel(column?.field); }, [apiRef, column?.field, onClick], @@ -27,4 +27,13 @@ const GridFilterMenuSimpleItem = (props: GridFilterItemProps) => { ); }; +GridFilterMenuSimpleItem.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + column: PropTypes.object, + onClick: PropTypes.func, +} as any; + export { GridFilterMenuSimpleItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx index 344f65ad237b..f1ef9535e6ea 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MenuItem from '@mui/material/MenuItem'; -import { GridItemProps } from '../GridItemProps'; +import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; import { gridVisibleColumnDefinitionsSelector } from '../../../../hooks/features/columns'; -const HideGridColMenuSimpleItem = (props: GridItemProps) => { +const HideGridColMenuSimpleItem = (props: GridColumnMenuItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -27,10 +27,14 @@ const HideGridColMenuSimpleItem = (props: GridItemProps) => { if (disabled) { return; } - onClick(event); + if (onClick) { + onClick(event); + } // time for the transition timeoutRef.current = setTimeout(() => { - apiRef.current.setColumnVisibility(column?.field, false); + if (column?.field) { + apiRef.current.setColumnVisibility(column.field, false); + } }, 100); }, [apiRef, column?.field, onClick, disabled], @@ -44,7 +48,7 @@ const HideGridColMenuSimpleItem = (props: GridItemProps) => { return null; } - if (column.hideable === false) { + if (column?.hideable === false) { return null; } @@ -60,8 +64,8 @@ HideGridColMenuSimpleItem.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - column: PropTypes.object.isRequired, - onClick: PropTypes.func.isRequired, + column: PropTypes.object, + onClick: PropTypes.func, } as any; export { HideGridColMenuSimpleItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx index 622946dfec4f..9239085a253a 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/SortGridMenuSimpleItems.tsx @@ -5,9 +5,9 @@ import { useGridSelector } from '../../../../hooks/utils/useGridSelector'; import { gridSortModelSelector } from '../../../../hooks/features/sorting/gridSortingSelector'; import { GridSortDirection } from '../../../../models/gridSortModel'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; -import { GridItemProps } from '../GridItemProps'; +import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; -const SortGridMenuSimpleItems = (props: GridItemProps) => { +const SortGridMenuSimpleItems = (props: GridColumnMenuItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const sortModel = useGridSelector(apiRef, gridSortModelSelector); @@ -22,7 +22,7 @@ const SortGridMenuSimpleItems = (props: GridItemProps) => { const onSortMenuItemClick = React.useCallback( (event: React.MouseEvent) => { - onClick(event); + onClick?.(event); const direction = event.currentTarget.getAttribute('data-value') || null; apiRef.current.sortColumn( column!, @@ -56,8 +56,8 @@ SortGridMenuSimpleItems.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - column: PropTypes.object.isRequired, - onClick: PropTypes.func.isRequired, + column: PropTypes.object, + onClick: PropTypes.func, } as any; export { SortGridMenuSimpleItems }; diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts index 23208644de5d..83458842378e 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts @@ -5,17 +5,28 @@ export interface GridColumnMenuState { field?: string; } -export type GridColumnMenuSlot = 'filter' | 'sorting' | 'hideColumn' | 'manageColumns'; +// To be used by Pro and Premium packages for overriding +export interface GridColumnMenuSlotInternalOverrides {} + +// To be used by users for overriding export interface GridColumnMenuSlotOverrides {} export interface GridColumnMenuLookup { /** * Will be used to filter or override a specific item in `columnMenu` */ - slot: OverridableStringUnion; + slot: OverridableStringUnion< + OverridableStringUnion< + 'filter' | 'sorting' | 'hideColumn' | 'manageColumns' | 'divider', + GridColumnMenuSlotInternalOverrides + >, + GridColumnMenuSlotOverrides + >; component: React.ReactNode; displayName?: string; - addDivider?: boolean; } -export interface GridColumnMenuValue extends Array {} +export interface GridColumnMenuValue { + items: Array; + visibleSlots: Array; +} From 376dfab3ebdecb61fbeb3b6e8b50a6d997d9750e Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 3 Nov 2022 20:15:00 +0500 Subject: [PATCH 016/104] Moves icons and components in appropriate packages --- .../useDataGridPremiumProps.ts | 16 ++++++---- .../src/components/icons.tsx | 13 ++++++++ .../src/components/index.ts | 1 + .../dataGridPremiumDefaultSlotsComponents.ts | 13 ++++++++ .../src/constants/index.ts | 1 + .../grid/x-data-grid-premium/src/index.ts | 1 + .../models/gridPremiumIconSlotsComponent.ts | 14 ++++++++ .../src/models/gridPremiumSlotsComponent.ts | 7 ++++ .../x-data-grid-premium/src/models/index.ts | 2 ++ .../src/DataGridPro/useDataGridProProps.ts | 6 ++-- .../x-data-grid-pro/src/components/icons.tsx | 21 ++++++++++++ .../x-data-grid-pro/src/components/index.ts | 1 + .../dataGridProDefaultSlotsComponents.ts | 13 ++++++++ .../x-data-grid-pro/src/constants/index.ts | 1 + packages/grid/x-data-grid-pro/src/index.ts | 1 + .../src/models/gridProIconSlotsComponent.ts | 14 ++++++++ .../src/models/gridProSlotsComponent.ts | 7 ++++ .../grid/x-data-grid-pro/src/models/index.ts | 2 ++ .../src/components/icons/index.tsx | 32 ------------------- .../simple/GridColumnMenuSimple.tsx | 5 +++ .../constants/defaultGridSlotsComponents.ts | 8 ----- .../src/models/gridIconSlotsComponent.ts | 20 ------------ 22 files changed, 130 insertions(+), 69 deletions(-) create mode 100644 packages/grid/x-data-grid-premium/src/components/icons.tsx create mode 100644 packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts create mode 100644 packages/grid/x-data-grid-premium/src/constants/index.ts create mode 100644 packages/grid/x-data-grid-premium/src/models/gridPremiumIconSlotsComponent.ts create mode 100644 packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts create mode 100644 packages/grid/x-data-grid-pro/src/components/icons.tsx create mode 100644 packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts create mode 100644 packages/grid/x-data-grid-pro/src/constants/index.ts create mode 100644 packages/grid/x-data-grid-pro/src/models/gridProIconSlotsComponent.ts create mode 100644 packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts b/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts index 5c24b04f1f64..37a201feb39f 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts @@ -2,7 +2,6 @@ import * as React from 'react'; import { useThemeProps } from '@mui/material/styles'; import { DATA_GRID_PRO_PROPS_DEFAULT_VALUES, - DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, GridSlotsComponent, } from '@mui/x-data-grid-pro'; @@ -12,6 +11,7 @@ import { DataGridPremiumPropsWithDefaultValue, } from '../models/dataGridPremiumProps'; import { GRID_AGGREGATION_FUNCTIONS } from '../hooks/features/aggregation'; +import { DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS } from '../constants'; /** * The default values of `DataGridPremiumPropsWithDefaultValue` to inject in the props of DataGridPremium. @@ -38,16 +38,20 @@ export const useDataGridPremiumProps = (inProps: DataGridPremiumProps) => { const overrides = themedProps.components; if (!overrides) { - return { ...DATA_GRID_DEFAULT_SLOTS_COMPONENTS }; + return { ...DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS }; } const mergedComponents = {} as GridSlotsComponent; type GridSlots = keyof GridSlotsComponent; - Object.entries(DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => { - mergedComponents[key as GridSlots] = - overrides[key as GridSlots] === undefined ? defaultComponent : overrides[key as GridSlots]; - }); + Object.entries(DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS).forEach( + ([key, defaultComponent]) => { + mergedComponents[key as GridSlots] = + overrides[key as GridSlots] === undefined + ? defaultComponent + : overrides[key as GridSlots]; + }, + ); return mergedComponents; }, [themedProps.components]); diff --git a/packages/grid/x-data-grid-premium/src/components/icons.tsx b/packages/grid/x-data-grid-premium/src/components/icons.tsx new file mode 100644 index 000000000000..14d636721b09 --- /dev/null +++ b/packages/grid/x-data-grid-premium/src/components/icons.tsx @@ -0,0 +1,13 @@ +import { createSvgIcon } from '@mui/material/utils'; + +export const GridWorkspacesIcon = createSvgIcon( + + + , + 'Workspaces', +); + +export const GridGroupWorkIcon = createSvgIcon( + , + 'GroupWork', +); diff --git a/packages/grid/x-data-grid-premium/src/components/index.ts b/packages/grid/x-data-grid-premium/src/components/index.ts index 29256c8c750c..0d67fcb043c0 100644 --- a/packages/grid/x-data-grid-premium/src/components/index.ts +++ b/packages/grid/x-data-grid-premium/src/components/index.ts @@ -1 +1,2 @@ export * from './GridExcelExportMenuItem'; +export * from './icons'; diff --git a/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts b/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts new file mode 100644 index 000000000000..d9dd1c4a2ded --- /dev/null +++ b/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts @@ -0,0 +1,13 @@ +import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid-pro'; +import { GridPremiumSlotsComponent, GridPremiumIconSlotsComponent } from '../models'; +import { GridWorkspacesIcon, GridGroupWorkIcon } from '../components'; + +export const DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS: GridPremiumIconSlotsComponent = { + ColumnMenuUngroupIcon: GridWorkspacesIcon, + ColumnMenuGroupIcon: GridGroupWorkIcon, +}; + +export const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS: GridPremiumSlotsComponent = { + ...DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS, + ...DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS, +}; diff --git a/packages/grid/x-data-grid-premium/src/constants/index.ts b/packages/grid/x-data-grid-premium/src/constants/index.ts new file mode 100644 index 000000000000..22aa4dceec69 --- /dev/null +++ b/packages/grid/x-data-grid-premium/src/constants/index.ts @@ -0,0 +1 @@ +export * from './dataGridPremiumDefaultSlotsComponents'; diff --git a/packages/grid/x-data-grid-premium/src/index.ts b/packages/grid/x-data-grid-premium/src/index.ts index 3dbd958fe7d7..384e0a25d94a 100644 --- a/packages/grid/x-data-grid-premium/src/index.ts +++ b/packages/grid/x-data-grid-premium/src/index.ts @@ -18,6 +18,7 @@ export * from './DataGridPremium'; export * from './hooks'; export * from './models'; export * from './components'; +export * from './constants'; export type { DataGridPremiumProps, diff --git a/packages/grid/x-data-grid-premium/src/models/gridPremiumIconSlotsComponent.ts b/packages/grid/x-data-grid-premium/src/models/gridPremiumIconSlotsComponent.ts new file mode 100644 index 000000000000..e45906e2342c --- /dev/null +++ b/packages/grid/x-data-grid-premium/src/models/gridPremiumIconSlotsComponent.ts @@ -0,0 +1,14 @@ +import * as React from 'react'; + +export interface GridPremiumIconSlotsComponent { + /** + * Icon displayed in column menu for ungrouping + * @default GridWorkspacesIcon + */ + ColumnMenuUngroupIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for grouping + * @default GridGroupWorkIcon + */ + ColumnMenuGroupIcon: React.JSXElementConstructor; +} diff --git a/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts b/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts new file mode 100644 index 000000000000..509b7d03ac7e --- /dev/null +++ b/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts @@ -0,0 +1,7 @@ +import { GridProSlotsComponent } from '@mui/x-data-grid-pro'; + +/** + * Grid components React prop interface containing all the overridable components + * for Premium package + */ +export interface GridPremiumSlotsComponent extends GridProSlotsComponent {} diff --git a/packages/grid/x-data-grid-premium/src/models/index.ts b/packages/grid/x-data-grid-premium/src/models/index.ts index 1caadc53e7dc..03a21344b06b 100644 --- a/packages/grid/x-data-grid-premium/src/models/index.ts +++ b/packages/grid/x-data-grid-premium/src/models/index.ts @@ -1 +1,3 @@ export * from './gridGroupingValueGetterParams'; +export * from './gridPremiumIconSlotsComponent'; +export * from './gridPremiumSlotsComponent'; diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts b/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts index 7e4c954c34cc..7153f25ea3ce 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts @@ -1,7 +1,6 @@ import * as React from 'react'; import { useThemeProps } from '@mui/material/styles'; import { - DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, GridSlotsComponent, DATA_GRID_PROPS_DEFAULT_VALUES, @@ -12,6 +11,7 @@ import { DataGridProProcessedProps, DataGridProPropsWithDefaultValue, } from '../models/dataGridProProps'; +import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '../constants'; /** * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro. @@ -41,13 +41,13 @@ export const useDataGridProProps = (inProps: DataGr const overrides = themedProps.components; if (!overrides) { - return { ...DATA_GRID_DEFAULT_SLOTS_COMPONENTS }; + return { ...DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS }; } const mergedComponents = {} as GridSlotsComponent; type GridSlots = keyof GridSlotsComponent; - Object.entries(DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => { + Object.entries(DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => { mergedComponents[key as GridSlots] = overrides[key as GridSlots] === undefined ? defaultComponent : overrides[key as GridSlots]; }); diff --git a/packages/grid/x-data-grid-pro/src/components/icons.tsx b/packages/grid/x-data-grid-pro/src/components/icons.tsx new file mode 100644 index 000000000000..3bf159243213 --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/components/icons.tsx @@ -0,0 +1,21 @@ +import { createSvgIcon } from '@mui/material/utils'; + +export const GridPushPinRightIcon = createSvgIcon( + + + , + 'PushPinRight', +); + +export const GridPushPinLeftIcon = createSvgIcon( + + + , + 'PushPinLeft', +); diff --git a/packages/grid/x-data-grid-pro/src/components/index.ts b/packages/grid/x-data-grid-pro/src/components/index.ts index b3301a1fe59f..80e9140ddcb9 100644 --- a/packages/grid/x-data-grid-pro/src/components/index.ts +++ b/packages/grid/x-data-grid-pro/src/components/index.ts @@ -2,3 +2,4 @@ export * from './GridTreeDataGroupingCell'; export * from './GridColumnPinningMenuItems'; export * from './GridDetailPanelToggleCell'; +export * from './icons'; diff --git a/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts b/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts new file mode 100644 index 000000000000..1ff6fe8b0c0f --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts @@ -0,0 +1,13 @@ +import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid'; +import { GridProSlotsComponent, GridProIconSlotsComponent } from '../models'; +import { GridPushPinRightIcon, GridPushPinLeftIcon } from '../components'; + +export const DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS: GridProIconSlotsComponent = { + ColumnMenuPinRightIcon: GridPushPinRightIcon, + ColumnMenuPinLeftIcon: GridPushPinLeftIcon, +}; + +export const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS: GridProSlotsComponent = { + ...DATA_GRID_DEFAULT_SLOTS_COMPONENTS, + ...DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS, +}; diff --git a/packages/grid/x-data-grid-pro/src/constants/index.ts b/packages/grid/x-data-grid-pro/src/constants/index.ts new file mode 100644 index 000000000000..5f01ef8e43a6 --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/constants/index.ts @@ -0,0 +1 @@ +export * from './dataGridProDefaultSlotsComponents'; diff --git a/packages/grid/x-data-grid-pro/src/index.ts b/packages/grid/x-data-grid-pro/src/index.ts index 10755a0d6edf..cd59259cda2d 100644 --- a/packages/grid/x-data-grid-pro/src/index.ts +++ b/packages/grid/x-data-grid-pro/src/index.ts @@ -19,6 +19,7 @@ export * from './DataGridPro'; export * from './hooks'; export * from './models'; export * from './components'; +export * from './constants'; export * from './utils'; export type { DataGridProProps, GridExperimentalProFeatures } from './models/dataGridProProps'; diff --git a/packages/grid/x-data-grid-pro/src/models/gridProIconSlotsComponent.ts b/packages/grid/x-data-grid-pro/src/models/gridProIconSlotsComponent.ts new file mode 100644 index 000000000000..634bb5645548 --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/models/gridProIconSlotsComponent.ts @@ -0,0 +1,14 @@ +import * as React from 'react'; + +export interface GridProIconSlotsComponent { + /** + * Icon displayed in column menu for left pinning + * @default GridPushPinLeftIcon + */ + ColumnMenuPinLeftIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for right pinning + * @default GridPushPinRightIcon + */ + ColumnMenuPinRightIcon: React.JSXElementConstructor; +} diff --git a/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts b/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts new file mode 100644 index 000000000000..91a87145db8a --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts @@ -0,0 +1,7 @@ +import { GridSlotsComponent } from '@mui/x-data-grid'; + +/** + * Grid components React prop interface containing all the overridable components + * for Pro package + */ +export interface GridProSlotsComponent extends GridSlotsComponent {} diff --git a/packages/grid/x-data-grid-pro/src/models/index.ts b/packages/grid/x-data-grid-pro/src/models/index.ts index 43bbe4ae8279..58cfd0bf2f8e 100644 --- a/packages/grid/x-data-grid-pro/src/models/index.ts +++ b/packages/grid/x-data-grid-pro/src/models/index.ts @@ -2,3 +2,5 @@ export * from './gridGroupingColDefOverride'; export * from './gridRowScrollEndParams'; export * from './gridRowOrderChangeParams'; export * from './gridFetchRowsParams'; +export * from './gridProSlotsComponent'; +export * from './gridProIconSlotsComponent'; diff --git a/packages/grid/x-data-grid/src/components/icons/index.tsx b/packages/grid/x-data-grid/src/components/icons/index.tsx index 71d1f7900a45..0a8893105c15 100644 --- a/packages/grid/x-data-grid/src/components/icons/index.tsx +++ b/packages/grid/x-data-grid/src/components/icons/index.tsx @@ -118,38 +118,6 @@ export const GridViewColumnIcon = createSvgIcon( 'ViewColumn', ); -export const GridPushPinRightIcon = createSvgIcon( - - - , - 'PushPinRight', -); - -export const GridPushPinLeftIcon = createSvgIcon( - - - , - 'PushPinLeft', -); - -export const GridWorkspacesIcon = createSvgIcon( - - - , - 'Workspaces', -); - -export const GridGroupWorkIcon = createSvgIcon( - , - 'GroupWork', -); - export const GridClearIcon = createSvgIcon( , 'Clear', diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index 383e9a747c79..e54f307c4447 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import Divider from '@mui/material/Divider'; import { GridColumnMenuLookup, GridColumnMenuValue } from '../../../../hooks/features/columnMenu'; import { GridColumnMenuSimpleContainer } from './GridColumnMenuSimpleContainer'; import { GridColumnMenuProps } from '../GridColumnMenuProps'; @@ -45,6 +46,10 @@ const GridColumnMenuSimple = React.forwardRef( displayName: 'GridColumnsMenuSimpleItem', component: , }, + { + slot: 'divider', + component: , + }, ]; return ( diff --git a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts index f2e49a853bb2..d598312bc0ce 100644 --- a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts +++ b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts @@ -44,10 +44,6 @@ import { GridSearchIcon, GridVisibilityOffIcon, GridViewColumnIcon, - GridPushPinLeftIcon, - GridPushPinRightIcon, - GridWorkspacesIcon, - GridGroupWorkIcon, GridClearIcon, } from '../components'; import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon'; @@ -85,10 +81,6 @@ const DEFAULT_GRID_ICON_SLOTS_COMPONENTS: GridIconSlotsComponent = { ColumnMenuSortDescendingIcon: GridArrowDownwardIcon, ColumnMenuFilterIcon: GridFilterAltIcon, ColumnMenuManageColumnsIcon: GridViewColumnIcon, - ColumnMenuPinRightIcon: GridPushPinRightIcon, - ColumnMenuPinLeftIcon: GridPushPinLeftIcon, - ColumnMenuUngroupIcon: GridWorkspacesIcon, - ColumnMenuGroupIcon: GridGroupWorkIcon, ColumnMenuClearIcon: GridClearIcon, }; diff --git a/packages/grid/x-data-grid/src/models/gridIconSlotsComponent.ts b/packages/grid/x-data-grid/src/models/gridIconSlotsComponent.ts index 5843c337ceb8..14e4e0f6661b 100644 --- a/packages/grid/x-data-grid/src/models/gridIconSlotsComponent.ts +++ b/packages/grid/x-data-grid/src/models/gridIconSlotsComponent.ts @@ -155,26 +155,6 @@ export interface GridIconSlotsComponent { * @default GridViewColumnIcon */ ColumnMenuManageColumnsIcon: React.JSXElementConstructor; - /** - * Icon displayed in column menu for left pinning - * @default GridPushPinLeftIcon - */ - ColumnMenuPinLeftIcon: React.JSXElementConstructor; - /** - * Icon displayed in column menu for right pinning - * @default GridPushPinRightIcon - */ - ColumnMenuPinRightIcon: React.JSXElementConstructor; - /** - * Icon displayed in column menu for ungrouping - * @default GridWorkspacesIcon - */ - ColumnMenuUngroupIcon: React.JSXElementConstructor; - /** - * Icon displayed in column menu for grouping - * @default GridGroupWorkIcon - */ - ColumnMenuGroupIcon: React.JSXElementConstructor; /** * Icon displayed in column menu for clearing values * @default GridClearIcon From 3ccd35dd77daf032c7b4b223cbe51825d76f1d7b Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 3 Nov 2022 20:22:51 +0500 Subject: [PATCH 017/104] Some remaining adjustments to differ Community, Pro and Premium components --- .../src/DataGridPremium/useDataGridPremiumProps.ts | 13 +++++-------- .../src/DataGridPro/useDataGridProProps.ts | 8 ++++---- .../src/constants/defaultGridSlotsComponents.ts | 3 --- 3 files changed, 9 insertions(+), 15 deletions(-) diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts b/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts index 37a201feb39f..bf4d19518c1d 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts @@ -1,15 +1,12 @@ import * as React from 'react'; import { useThemeProps } from '@mui/material/styles'; -import { - DATA_GRID_PRO_PROPS_DEFAULT_VALUES, - GRID_DEFAULT_LOCALE_TEXT, - GridSlotsComponent, -} from '@mui/x-data-grid-pro'; +import { DATA_GRID_PRO_PROPS_DEFAULT_VALUES, GRID_DEFAULT_LOCALE_TEXT } from '@mui/x-data-grid-pro'; import { DataGridPremiumProps, DataGridPremiumProcessedProps, DataGridPremiumPropsWithDefaultValue, } from '../models/dataGridPremiumProps'; +import { GridPremiumSlotsComponent } from '../models'; import { GRID_AGGREGATION_FUNCTIONS } from '../hooks/features/aggregation'; import { DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS } from '../constants'; @@ -34,16 +31,16 @@ export const useDataGridPremiumProps = (inProps: DataGridPremiumProps) => { [themedProps.localeText], ); - const components = React.useMemo(() => { + const components = React.useMemo(() => { const overrides = themedProps.components; if (!overrides) { return { ...DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS }; } - const mergedComponents = {} as GridSlotsComponent; + const mergedComponents = {} as GridPremiumSlotsComponent; - type GridSlots = keyof GridSlotsComponent; + type GridSlots = keyof GridPremiumSlotsComponent; Object.entries(DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS).forEach( ([key, defaultComponent]) => { mergedComponents[key as GridSlots] = diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts b/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts index 7153f25ea3ce..8a71c5f81590 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts @@ -2,7 +2,6 @@ import * as React from 'react'; import { useThemeProps } from '@mui/material/styles'; import { GRID_DEFAULT_LOCALE_TEXT, - GridSlotsComponent, DATA_GRID_PROPS_DEFAULT_VALUES, GridValidRowModel, } from '@mui/x-data-grid'; @@ -11,6 +10,7 @@ import { DataGridProProcessedProps, DataGridProPropsWithDefaultValue, } from '../models/dataGridProProps'; +import { GridProSlotsComponent } from '../models'; import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '../constants'; /** @@ -37,16 +37,16 @@ export const useDataGridProProps = (inProps: DataGr [themedProps.localeText], ); - const components = React.useMemo(() => { + const components = React.useMemo(() => { const overrides = themedProps.components; if (!overrides) { return { ...DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS }; } - const mergedComponents = {} as GridSlotsComponent; + const mergedComponents = {} as GridProSlotsComponent; - type GridSlots = keyof GridSlotsComponent; + type GridSlots = keyof GridProSlotsComponent; Object.entries(DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => { mergedComponents[key as GridSlots] = overrides[key as GridSlots] === undefined ? defaultComponent : overrides[key as GridSlots]; diff --git a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts index d598312bc0ce..c838013e2f48 100644 --- a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts +++ b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts @@ -84,9 +84,6 @@ const DEFAULT_GRID_ICON_SLOTS_COMPONENTS: GridIconSlotsComponent = { ColumnMenuClearIcon: GridClearIcon, }; -/** - * TODO: Differentiate community and pro value and interface - */ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS: GridSlotsComponent = { ...DEFAULT_GRID_ICON_SLOTS_COMPONENTS, BaseCheckbox: MUICheckbox, From a796fe633e10409313829bea67b59fe8539df0f4 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sat, 5 Nov 2022 11:58:48 +0500 Subject: [PATCH 018/104] Apply suggestions from code review Co-authored-by: Andrew Cherniavskii Signed-off-by: Bilal Shafi --- docs/data/data-grid/column-menu/column-menu.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index d33fe28d259d..0a5de3c72201 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -8,21 +8,21 @@ title: Data Grid - Column menu ## Column menu -Each header comes with a column menu using which displays quickly accessible grid features like visibility of columns, sorting, filtering and others. +Each column header comes with a column menu with quickly accessible grid features like column visibility, sorting, filtering, and others. It can be accessed by clicking on 3-dots icon that appear on hover on a header cell. {{"demo": "ColumnMenuGrid.js", "bg": "inline"}} -## Disabled column menu +## Disable column menu -By default, each column header displays a column menu. The column menu allows actions to be performed in the context of the target column, e.g. filtering. To disable the column menu, set the prop `disableColumnMenu={true}`. +By default, each column header has the column menu enabled. To disable the column menu, set the prop `disableColumnMenu={true}`. {{"demo": "DisabledColumnMenuGrid.js", "bg": "inline"}} ## Simple column menu -In case you like the look and feel of the old column menu, you can replace the default one with `GridColumnMenuSimple` component. +You can replace the default column menu with a simplified one using `GridColumnMenuSimple` component. {{"demo": "SimpleColumnMenuGrid.js", "bg": "inline"}} @@ -37,7 +37,7 @@ You can also customise column menu based on some conditions. Every item in the m For that purpose you can use `getVisibleColumnMenuItems` and `columnMenuItems`. -**getVisibleColumnMenuItems**: It is available in both `GridColDef` and `componentsProps.columnMenu`, it receives list of all registered slots and should return a `filtered` and `ordered` list of items that are needed to be shown. It can be used either per-column basis by passing in `GridColDef` or for whole Grid by passing in `componentsProps.columnMenu`. If you have it in both, the preference will be given to the `GridColDef` one. +**getVisibleColumnMenuItems**: It is available in both `GridColDef` and `componentsProps.columnMenu`, it receives list of all registered slots and should return a *filtered* and *ordered* list of items that are needed to be shown. It can be used either per-column basis by passing in `GridColDef` or for the whole Grid by passing in `componentsProps.columnMenu`. If you have it in both, the preference will be given to the `GridColDef` one. **columnMenuItems**: It could be used to override or register new items to the menu. You can simply pass the object with existing or new items and they will be updated/added to the grid. @@ -79,11 +79,11 @@ Using `componentsProps.columnMenu.columnMenuItems`, you can: ```tsx const columnMenuItems = { - ['filter']: { + filter: { // overiding existing slot component: , // overriden property }, - ['closeMenu']: { + closeMenu: { // adding new slot component: , displayName: 'MenuClose', From 9aeb360c015e3275f102c1b3759f68fb198a6f8d Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sat, 5 Nov 2022 14:06:19 +0500 Subject: [PATCH 019/104] Resolves code comments and refactors --- .../column-menu/FilterColumnMenuGrid.js | 57 ++++------ .../column-menu/FilterColumnMenuGrid.tsx | 27 ++--- .../data/data-grid/column-menu/column-menu.md | 47 +++----- .../src/DataGridPremium/DataGridPremium.tsx | 2 +- .../GridAggregationColumnMenuItem.tsx | 2 +- .../GridRowGroupableColumnMenuItems.tsx | 26 ++--- .../src/components/icons.tsx | 1 + .../dataGridPremiumDefaultSlotsComponents.ts | 6 + .../useGridAggregationPreProcessors.tsx | 51 ++++----- .../rowGrouping/useGridRowGrouping.tsx | 59 +++------- .../src/models/dataGridPremiumProps.ts | 20 +++- .../src/models/gridPremiumSlotsComponent.ts | 21 +++- .../src/typeOverloads/modules.ts | 2 +- .../src/DataGridPro/DataGridPro.tsx | 3 - .../components/GridColumnPinningMenuItems.tsx | 9 +- .../x-data-grid-pro/src/components/icons.tsx | 1 + .../dataGridProDefaultSlotsComponents.ts | 7 +- .../columnPinning/useGridColumnPinning.tsx | 34 ++---- .../src/models/dataGridProProps.ts | 15 ++- .../src/models/gridProSlotsComponent.ts | 10 +- .../src/typeOverloads/modules.ts | 2 +- .../src/utils/columnMenu/index.ts | 2 +- .../columnMenu/insertItemsInColumnMenu.ts | 25 +++++ .../columnMenu/insertSlotsInColumnMenu.ts | 25 ----- .../src/components/menu/GridMenu.tsx | 6 +- .../menu/columnMenu/GridColumnMenu.tsx | 104 +++++------------- .../menu/columnMenu/GridColumnMenuProps.ts | 23 ++-- .../default/GridColumnMenuDefault.tsx | 40 ++----- .../default/GridColumnsMenuItem.tsx | 2 +- .../columnMenu/default/GridFilterMenuItem.tsx | 2 +- .../default/HideGridColMenuItem.tsx | 2 +- .../columnMenu/default/SortGridMenuItems.tsx | 2 +- .../simple/GridColumnMenuSimple.tsx | 40 ++----- .../columnMenu/columnMenuInterfaces.ts | 22 ++-- .../src/models/colDef/gridColDef.ts | 12 +- 35 files changed, 293 insertions(+), 416 deletions(-) create mode 100644 packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts delete mode 100644 packages/grid/x-data-grid-pro/src/utils/columnMenu/insertSlotsInColumnMenu.ts diff --git a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js index 30bbeb2afd05..d4298480707e 100644 --- a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js @@ -1,50 +1,37 @@ -import * as React from 'react' -import { DataGrid, GridFilterMenuSimpleItem } from '@mui/x-data-grid' -import { useDemoData } from '@mui/x-data-grid-generator' -import Stack from '@mui/material/Stack' -import Button from '@mui/material/Button' +import * as React from 'react'; +import { DataGrid, GridFilterMenuSimpleItem } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Stack from '@mui/material/Stack'; +import Button from '@mui/material/Button'; -const MenuCloseComponent = props => { +const MenuCloseComponent = (props) => { return ( - - - - ) -} + + ); +}; -const FilterComponent = props => ( +const FilterComponent = (props) => ( -) +); -export default function FilterColumnMenuGrid () { +export default function FilterColumnMenuGrid() { const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 20, maxColumns: 5, - }) - const columns = data.columns - // Show specific items for this column - columns[4].getVisibleColumnMenuItems = () => [ - 'closeMenu', - 'divider', - 'manageColumns', - ] + }); + const columns = data.columns; + // Show only specific items for this column + columns[4].getVisibleColumnMenuItems = () => []; const columnMenuItems = { - filter: { - // overriding existing item - component: , // overriden property - }, - closeMenu: { - // adding new item - component: , - displayName: 'MenuClose', - }, - } + filter: , // overriding existing item + closeMenu: , // adding new item + }; return (
@@ -67,5 +54,5 @@ export default function FilterColumnMenuGrid () { }} />
- ) + ); } diff --git a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx index 0358a3659a1d..fe8dc4c8a8d2 100644 --- a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx +++ b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx @@ -16,11 +16,9 @@ declare module '@mui/x-data-grid' { const MenuCloseComponent = (props: GridColumnMenuItemProps) => { return ( - - - + ); }; @@ -37,23 +35,12 @@ export default function FilterColumnMenuGrid() { maxColumns: 5, }); const columns = data.columns; - // Show specific items for this column - columns[4].getVisibleColumnMenuItems = () => [ - 'closeMenu', - 'divider', - 'manageColumns', - ]; + // Show only specific items for this column + columns[4].getVisibleColumnMenuItems = () => ['closeMenu', 'manageColumns']; const columnMenuItems = { - filter: { - // overriding existing item - component: , // overriden property - }, - closeMenu: { - // adding new item - component: , - displayName: 'MenuClose', - }, + filter: , // overriding existing item + closeMenu: , // adding new item }; return ( diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index 0a5de3c72201..2985f5ab0a1d 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -28,39 +28,31 @@ You can replace the default column menu with a simplified one using `GridColumnM ## Customise column menu items -You can also customise column menu based on some conditions. Every item in the menu is assigned a `slot` using which it's possible to: +You can also customise column menu based on some conditions. Every item in the menu is assigned a `key` which serves as a unique identifier of that item using which it's possible to: - Hide/Show specific items -- Override default items (if you want to override one item and not the whole menu) +- Override default items (if you want to override some items and not the whole menu) - Add new items -- Change display order for items +- Configure custom display order for items For that purpose you can use `getVisibleColumnMenuItems` and `columnMenuItems`. -**getVisibleColumnMenuItems**: It is available in both `GridColDef` and `componentsProps.columnMenu`, it receives list of all registered slots and should return a *filtered* and *ordered* list of items that are needed to be shown. It can be used either per-column basis by passing in `GridColDef` or for the whole Grid by passing in `componentsProps.columnMenu`. If you have it in both, the preference will be given to the `GridColDef` one. +**getVisibleColumnMenuItems**: It is available in both `GridColDef` and `componentsProps.columnMenu`, it receives keys of all registered items and should return a _filtered_ and _ordered_ list of keys that are needed to be shown. It can be used either per-column basis by passing in `GridColDef` or for the whole Grid by passing in `componentsProps.columnMenu`. If you have it in both, the preference will be given to the `GridColDef` one. + +```tsx + +``` **columnMenuItems**: It could be used to override or register new items to the menu. You can simply pass the object with existing or new items and they will be updated/added to the grid. ### Hide/Show Specific Items: -For every column menu component there's a default order of items configured by default called `visibleMenuItems`, for default column menu it's: - -```tsx -[ - 'sorting', - 'divider', - 'filter', - 'divider', - 'hideColumn', - 'divider', - 'manageColumns', -]; -``` +For every column menu component there's a default order of items configured by default called `visibleMenuItems`, for default column menu it's: `['sorting', 'divider', 'filter', 'divider', 'hideColumn', 'divider', 'manageColumns']` -Using `getVisibleColumnMenuItems` method, you can override this order based on configured slots for the column menu. +Using `getVisibleColumnMenuItems` method, you can override this order based on configured items for the column menu. ```tsx -const getVisibleColumnMenuItems = () => ['sorting', 'divider', 'filter']; // only show `sort` & `filter` +const getVisibleColumnMenuItems = () => ['sorting', 'filter']; // only show `sort` & `filter` return ( , // overriden property - }, - closeMenu: { - // adding new slot - component: , - displayName: 'MenuClose', - }, + filter: , // override existing item + closeMenu: , // add new item }; // add new item in visible items and append it to the last of list @@ -99,7 +84,7 @@ const getVisibleColumnMenuItems = (defaultItems) => [...defaultItems, 'closeMenu />; ``` -If you're using TypeScript, for new items that you are adding, you'll need to specify new slots you are registering, using [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation). +If you're using TypeScript, for new items that you are adding, you'll need to specify new items you are registering, using [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation). ```tsx declare module '@mui/x-data-grid' { @@ -111,7 +96,7 @@ declare module '@mui/x-data-grid' { ### Default column menu items -Currently available default slots for **x-data-grid** are `filter`, `sorting`, `hideColumn`, `divider` and `manageColumns`, wheras **x-data-grid-pro** adds `pinning` and **x-data-grid-premium** adds `grouping` and `aggregation` on top of them. +Default slots for **DataGrid** are `filter`, `sorting`, `hideColumn`, `divider` and `manageColumns`, wheras **DataGridPro** adds `pinning` and **DataGridPremium** adds `grouping` and `aggregation` on top of them. Here's a demo overriding some existing items, adding some new items and displaying different items for a column. @@ -119,7 +104,7 @@ Here's a demo overriding some existing items, adding some new items and displayi ## Column menu with Pro/Premium options [](/x/introduction/licensing/#pro-plan)[](/x/introduction/licensing/#premium-plan) -You can also access commercial features like column pinning etc from the column menu when using `DataGridPro` or `DataGridPremium`. +You can access commercial features like column pinning etc from the column menu when using `DataGridPro` or `DataGridPremium`. {{"demo": "ColumnMenuGridPro.js", "bg": "inline"}} diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index 639a69c192db..c6b93cafbcff 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -154,7 +154,7 @@ DataGridPremiumRaw.propTypes = { */ columnVisibilityModel: PropTypes.object, /** - * Overrideable components. + * Overrideable Pro components. */ components: PropTypes.object, /** diff --git a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx index 52994503614a..3780895416a4 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx @@ -6,7 +6,7 @@ import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/material/InputLabel'; import { unstable_useId as useId } from '@mui/material/utils'; import Select, { SelectChangeEvent } from '@mui/material/Select'; -import { styled } from '@mui/material'; +import { styled } from '@mui/material/styles'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { diff --git a/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx b/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx index f3727355a23f..1a4bdb940400 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import { gridColumnLookupSelector, useGridSelector, GridColDef } from '@mui/x-data-grid-pro'; -import { styled } from '@mui/material'; +import { styled } from '@mui/material/styles'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector'; @@ -51,13 +51,16 @@ const GridRowGroupableColumnMenuItems = (props: GridRowGroupableColumnMenuItemsP const name = columnsLookup[column.field].headerName ?? column.field; + const UngroupIcon = rootProps.components?.ColumnMenuUngroupIcon; + const GroupIcon = rootProps.components?.ColumnMenuGroupIcon; + if (rowGroupingModel.includes(column.field)) { return ( } + startIcon={UngroupIcon ? : null} color="inherit" > {apiRef.current.getLocaleText('unGroupColumn')(name)} @@ -67,26 +70,15 @@ const GridRowGroupableColumnMenuItems = (props: GridRowGroupableColumnMenuItemsP } return ( - - + ); }; diff --git a/packages/grid/x-data-grid-premium/src/components/icons.tsx b/packages/grid/x-data-grid-premium/src/components/icons.tsx index 14d636721b09..532ec53fe0f4 100644 --- a/packages/grid/x-data-grid-premium/src/components/icons.tsx +++ b/packages/grid/x-data-grid-premium/src/components/icons.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import { createSvgIcon } from '@mui/material/utils'; export const GridWorkspacesIcon = createSvgIcon( diff --git a/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts b/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts index d9dd1c4a2ded..2a51bc38865a 100644 --- a/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts +++ b/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts @@ -1,6 +1,9 @@ import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid-pro'; import { GridPremiumSlotsComponent, GridPremiumIconSlotsComponent } from '../models'; import { GridWorkspacesIcon, GridGroupWorkIcon } from '../components'; +import { GridAggregationColumnMenuItem } from '../components/GridAggregationColumnMenuItem'; +import { GridRowGroupableColumnMenuItems } from '../components/GridRowGroupableColumnMenuItems'; +import { GridRowGroupingColumnMenuItems } from '../components/GridRowGroupingColumnMenuItems'; export const DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS: GridPremiumIconSlotsComponent = { ColumnMenuUngroupIcon: GridWorkspacesIcon, @@ -10,4 +13,7 @@ export const DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS: GridPremiumIconSlotsCom export const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS: GridPremiumSlotsComponent = { ...DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS, ...DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS, + ColumnMenuAggregationItem: GridAggregationColumnMenuItem, + ColumnMenuRowGroupingItem: GridRowGroupingColumnMenuItems, + ColumnMenuRowGroupableItem: GridRowGroupableColumnMenuItems, }; diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx index 42b48a0e66a5..bdba7982a088 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; import { gridColumnLookupSelector, GridColumnMenuValue, - GridColumnMenuLookup, - insertSlotsInColumnMenu, + insertItemsInColumnMenu, } from '@mui/x-data-grid-pro'; import { GridPipeProcessor, @@ -22,8 +21,6 @@ import { unwrapColumnFromAggregation, } from './wrapColumnWithAggregation'; import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps'; -import { GridAggregationColumnMenuItem } from '../../../components/GridAggregationColumnMenuItem'; -import { GridAggregationColumnMenuSimpleItem } from '../../../components/GridAggregationColumnMenuSimpleItem'; import { gridAggregationModelSelector } from './gridAggregationSelectors'; import { GridInitialStatePremium } from '../../../models/gridStatePremium'; @@ -31,7 +28,11 @@ export const useGridAggregationPreProcessors = ( apiRef: React.MutableRefObject, props: Pick< DataGridPremiumProcessedProps, - 'aggregationFunctions' | 'disableAggregation' | 'getAggregationPosition' | 'componentsProps' + | 'aggregationFunctions' + | 'disableAggregation' + | 'getAggregationPosition' + | 'componentsProps' + | 'components' >, ) => { const updateAggregatedColumns = React.useCallback>( @@ -131,34 +132,26 @@ export const useGridAggregationPreProcessors = ( availableAggregationFunctions, }; - const slot: GridColumnMenuLookup['slot'] = 'aggregation'; - - const aggregationItem = columnMenuValue.items.some(({ displayName }) => - displayName?.includes('GridFilterMenuSimple'), - ) - ? { - slot, - displayName: 'GridAggregationColumnMenuSimpleItem', - component: , - } - : { - slot, - displayName: 'GridAggregationColumnMenuItem', - component: , - addDivider: true, - }; - - const items = [...columnMenuValue.items, aggregationItem]; - - const visibleSlots = insertSlotsInColumnMenu( - columnMenuValue.visibleSlots, - aggregationItem.addDivider ? ['divider', aggregationItem.slot] : [aggregationItem.slot], + const Component = props.components?.ColumnMenuAggregationItem; + const items = { + ...columnMenuValue.items, + aggregation: Component ? : null, + }; + + const visibleItemKeys = insertItemsInColumnMenu( + columnMenuValue.visibleItemKeys, + ['divider', 'aggregation'], 'filter', ); - return { visibleSlots, items }; + return { visibleItemKeys, items }; }, - [apiRef, props.aggregationFunctions, props.disableAggregation], + [ + apiRef, + props.aggregationFunctions, + props.components?.ColumnMenuAggregationItem, + props.disableAggregation, + ], ); const stateExportPreProcessing = React.useCallback>( diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx index 1f6cf8381d07..9eefedb98f48 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx @@ -4,9 +4,8 @@ import { useGridApiEventHandler, useGridApiMethod, gridColumnLookupSelector, - insertSlotsInColumnMenu, + insertItemsInColumnMenu, GridColumnMenuValue, - GridColumnMenuLookup, } from '@mui/x-data-grid-pro'; import { useGridRegisterPipeProcessor, @@ -30,10 +29,6 @@ import { areGroupingRulesEqual, } from './gridRowGroupingUtils'; import { GridRowGroupingApi } from './gridRowGroupingInterfaces'; -import { GridRowGroupableColumnMenuSimpleItems } from '../../../components/GridRowGroupableColumnMenuSimpleItems'; -import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGroupableColumnMenuItems'; -import { GridRowGroupingColumnMenuSimpleItems } from '../../../components/GridRowGroupingColumnMenuSimpleItems'; -import { GridRowGroupingColumnMenuItems } from '../../../components/GridRowGroupingColumnMenuItems'; import { GridInitialStatePremium } from '../../../models/gridStatePremium'; export const rowGroupingStateInitializer: GridStateInitializer< @@ -69,6 +64,7 @@ export const useGridRowGrouping = ( | 'rowGroupingColumnMode' | 'disableRowGrouping' | 'componentsProps' + | 'components' >, ) => { apiRef.current.registerControlState({ @@ -164,41 +160,14 @@ export const useGridRowGrouping = ( return columnMenuValue; } - const isSimpleMenu = columnMenuValue.items.some(({ displayName }) => - displayName?.includes('GridAggregationColumnMenuSimple'), - ); - - const slot: GridColumnMenuLookup['slot'] = 'grouping'; - - const groupingItem = isSimpleMenu - ? { - slot, - displayName: 'GridRowGroupingColumnMenuSimpleItems', - component: , - } - : { - slot, - displayName: 'GridRowGroupingColumnMenuItems', - component: , - }; - - const groupableItem = isSimpleMenu - ? { - slot, - displayName: 'GridRowGroupableColumnMenuSimpleItems', - component: , - } - : { - slot, - displayName: 'GridRowGroupableColumnMenuItems', - component: , - }; + const GroupingComponent = props.components?.ColumnMenuRowGroupingItem; + const GroupableComponent = props.components?.ColumnMenuRowGroupableItem; let menuItem; if (isGroupingColumn(column.field)) { - menuItem = groupingItem; + menuItem = GroupingComponent ? : null; } else if (column.groupable) { - menuItem = groupableItem; + menuItem = GroupableComponent ? : null; } else { menuItem = null; } @@ -207,17 +176,21 @@ export const useGridRowGrouping = ( return columnMenuValue; } - const items = [...columnMenuValue.items, menuItem]; + const items = { ...columnMenuValue.items, grouping: menuItem }; - const visibleSlots = insertSlotsInColumnMenu( - columnMenuValue.visibleSlots, - !isSimpleMenu ? ['divider', slot] : [slot], + const visibleItemKeys = insertItemsInColumnMenu( + columnMenuValue.visibleItemKeys, + ['divider', 'grouping'], 'aggregation', ); - return { visibleSlots, items }; + return { visibleItemKeys, items }; }, - [props.disableRowGrouping], + [ + props.components?.ColumnMenuRowGroupableItem, + props.components?.ColumnMenuRowGroupingItem, + props.disableRowGrouping, + ], ); const stateExportPreProcessing = React.useCallback>( diff --git a/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts b/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts index e49135d95820..e3a8e8e62c77 100644 --- a/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts +++ b/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts @@ -13,18 +13,27 @@ import type { GridAggregationFunction, GridAggregationPosition, } from '../hooks/features/aggregation'; +import { GridPremiumSlotsComponent } from './gridPremiumSlotsComponent'; import { GridInitialStatePremium } from './gridStatePremium'; import { GridApiPremium } from './gridApiPremium'; export interface GridExperimentalPremiumFeatures extends GridExperimentalProFeatures {} +export interface DataGridPremiumPropsWithComplexDefaultValueBeforeProcessing + extends Pick { + /** + * Overrideable Pro components. + */ + components?: Partial; +} + /** - * The props users can give to the `DataGridProProps` component. + * The props users can give to the `DataGridPremiumProps` component. */ export interface DataGridPremiumProps extends Omit< Partial & - DataGridPropsWithComplexDefaultValueBeforeProcessing & + DataGridPremiumPropsWithComplexDefaultValueBeforeProcessing & DataGridPremiumPropsWithoutDefaultValue, DataGridPremiumForcedPropsKey > { @@ -35,12 +44,17 @@ export interface DataGridPremiumProps experimentalFeatures?: Partial; } +export interface DataGridPremiumPropsWithComplexDefaultValueAfterProcessing + extends Pick { + components?: Partial; +} + /** * The props of the `DataGridPremium` component after the pre-processing phase. */ export interface DataGridPremiumProcessedProps extends DataGridPremiumPropsWithDefaultValue, - DataGridPropsWithComplexDefaultValueAfterProcessing, + DataGridPremiumPropsWithComplexDefaultValueAfterProcessing, DataGridPremiumPropsWithoutDefaultValue {} export type DataGridPremiumForcedPropsKey = 'signature'; diff --git a/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts b/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts index 509b7d03ac7e..f6c8d893cac6 100644 --- a/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts +++ b/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts @@ -1,7 +1,26 @@ import { GridProSlotsComponent } from '@mui/x-data-grid-pro'; +import { GridPremiumIconSlotsComponent } from './gridPremiumIconSlotsComponent'; /** * Grid components React prop interface containing all the overridable components * for Premium package */ -export interface GridPremiumSlotsComponent extends GridProSlotsComponent {} +export interface GridPremiumSlotsComponent + extends GridProSlotsComponent, + GridPremiumIconSlotsComponent { + /** + * The custom Checkbox component used in the grid for both header and cells. + * @default GridAggregationColumnMenuItem + */ + ColumnMenuAggregationItem: React.JSXElementConstructor; + /** + * The custom Checkbox component used in the grid for both header and cells. + * @default GridRowGroupingColumnMenuItems + */ + ColumnMenuRowGroupingItem: React.JSXElementConstructor; + /** + * The custom Checkbox component used in the grid for both header and cells. + * @default GridRowGroupableColumnMenuItems + */ + ColumnMenuRowGroupableItem: React.JSXElementConstructor; +} diff --git a/packages/grid/x-data-grid-premium/src/typeOverloads/modules.ts b/packages/grid/x-data-grid-premium/src/typeOverloads/modules.ts index 49a154e8efcb..672c065441d0 100644 --- a/packages/grid/x-data-grid-premium/src/typeOverloads/modules.ts +++ b/packages/grid/x-data-grid-premium/src/typeOverloads/modules.ts @@ -74,7 +74,7 @@ declare module '@mui/x-data-grid-pro' { interface GridApiCaches extends GridApiCachesPremium {} - interface GridColumnMenuSlotInternalOverrides { + interface GridColumnMenuKeysInternalOverrides { pinning: true; aggregation: true; grouping: true; diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 863185380ab9..6c33d8ca3711 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -134,9 +134,6 @@ DataGridProRaw.propTypes = { * If defined, the grid will ignore the `hide` property in [[GridColDef]]. */ columnVisibilityModel: PropTypes.object, - /** - * Overrideable components. - */ components: PropTypes.object, /** * Overrideable components props dynamically passed to the component at rendering. diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx b/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx index 124ed26642ed..07e12c5f120d 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx @@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; import { GridColDef } from '@mui/x-data-grid'; -import { styled } from '@mui/material'; +import { styled } from '@mui/material/styles'; import { GridPinnedPosition } from '../hooks/features/columnPinning'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; @@ -51,6 +51,9 @@ const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { const side = apiRef.current.isColumnPinned(column.field); + const LeftIcon = rootProps.components?.ColumnMenuPinLeftIcon; + const RightIcon = rootProps.components?.ColumnMenuPinRightIcon; + return ( @@ -61,7 +64,7 @@ const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { onClick={ side === GridPinnedPosition.left ? unpinColumn : pinColumn(GridPinnedPosition.left) } - startIcon={} + startIcon={LeftIcon ? : null} color={side === GridPinnedPosition.left ? 'primary' : 'inherit'} > {apiRef.current.getLocaleText('pinToLeftDefault')} @@ -70,7 +73,7 @@ const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { onClick={ side === GridPinnedPosition.right ? unpinColumn : pinColumn(GridPinnedPosition.right) } - startIcon={} + startIcon={RightIcon ? : null} color={side === GridPinnedPosition.right ? 'primary' : 'inherit'} > {apiRef.current.getLocaleText('pinToRightDefault')} diff --git a/packages/grid/x-data-grid-pro/src/components/icons.tsx b/packages/grid/x-data-grid-pro/src/components/icons.tsx index 3bf159243213..f3b00c071306 100644 --- a/packages/grid/x-data-grid-pro/src/components/icons.tsx +++ b/packages/grid/x-data-grid-pro/src/components/icons.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import { createSvgIcon } from '@mui/material/utils'; export const GridPushPinRightIcon = createSvgIcon( diff --git a/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts b/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts index 1ff6fe8b0c0f..dcf9761bc512 100644 --- a/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts +++ b/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts @@ -1,6 +1,10 @@ import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid'; import { GridProSlotsComponent, GridProIconSlotsComponent } from '../models'; -import { GridPushPinRightIcon, GridPushPinLeftIcon } from '../components'; +import { + GridPushPinRightIcon, + GridPushPinLeftIcon, + GridColumnPinningMenuItems, +} from '../components'; export const DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS: GridProIconSlotsComponent = { ColumnMenuPinRightIcon: GridPushPinRightIcon, @@ -10,4 +14,5 @@ export const DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS: GridProIconSlotsComponent = export const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS: GridProSlotsComponent = { ...DATA_GRID_DEFAULT_SLOTS_COMPONENTS, ...DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS, + ColumnMenuPinningItem: GridColumnPinningMenuItems, }; diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx index 3f03107d84a3..8b414a1577a8 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx @@ -11,7 +11,6 @@ import { GridEventListener, gridColumnFieldsSelector, GridColumnMenuValue, - GridColumnMenuLookup, } from '@mui/x-data-grid'; import { useGridRegisterPipeProcessor, @@ -22,8 +21,6 @@ import { import { GridPrivateApiPro } from '../../../models/gridApiPro'; import { GridInitialStatePro, GridStatePro } from '../../../models/gridStatePro'; import { DataGridProProcessedProps } from '../../../models/dataGridProProps'; -import { GridColumnPinningMenuItems } from '../../../components/GridColumnPinningMenuItems'; -import { GridColumnPinningMenuSimpleItems } from '../../../components/GridColumnPinningMenuSimpleItems'; import { GridColumnPinningApi, GridPinnedPosition, @@ -31,7 +28,7 @@ import { } from './gridColumnPinningInterface'; import { gridPinnedColumnsSelector } from './gridColumnPinningSelector'; import { filterColumns } from '../../../components/DataGridProVirtualScroller'; -import { insertSlotsInColumnMenu } from '../../../utils'; +import { insertItemsInColumnMenu } from '../../../utils'; export const columnPinningStateInitializer: GridStateInitializer< Pick @@ -70,6 +67,7 @@ export const useGridColumnPinning = ( | 'pinnedColumns' | 'onPinnedColumnsChange' | 'componentsProps' + | 'components' >, ): void => { const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector); @@ -185,32 +183,22 @@ export const useGridColumnPinning = ( return columnMenuValue; } - const isDefault = columnMenuValue.visibleSlots.some((slot) => slot?.includes('divider')); + const Component = props.components?.ColumnMenuPinningItem; - const component = isDefault ? ( - - ) : ( - - ); - - const items = [ + const items = { ...columnMenuValue.items, - { - slot: 'pinning' as GridColumnMenuLookup['slot'], - displayName: 'GridColumnPinningMenuItems', - component, - }, - ]; + pinning: Component ? : null, + }; - const visibleSlots = insertSlotsInColumnMenu( - columnMenuValue.visibleSlots, + const visibleItemKeys = insertItemsInColumnMenu( + columnMenuValue.visibleItemKeys, ['divider', 'pinning'], - isDefault ? 'sorting' : undefined, + 'sorting', ); - return { visibleSlots, items }; + return { visibleItemKeys, items }; }, - [props.disableColumnPinning], + [props.disableColumnPinning, props.components], ); const checkIfCanBeReordered = React.useCallback>( diff --git a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts index a460c4698275..ff8813cfcfb6 100644 --- a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts +++ b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts @@ -23,6 +23,7 @@ import { GridGroupingColDefOverrideParams, } from './gridGroupingColDefOverride'; import { GridInitialStatePro } from './gridStatePro'; +import { GridProSlotsComponent } from './gridProSlotsComponent'; export interface GridExperimentalProFeatures extends GridExperimentalFeatures { /** @@ -35,23 +36,33 @@ export interface GridExperimentalProFeatures extends GridExperimentalFeatures { rowPinning: boolean; } +interface DataGridProPropsWithComplexDefaultValueBeforeProcessing + extends Omit { + components?: GridProSlotsComponent; +} + /** * The props users can give to the `DataGridProProps` component. */ export interface DataGridProProps extends Omit< Partial & - DataGridPropsWithComplexDefaultValueBeforeProcessing & + DataGridProPropsWithComplexDefaultValueBeforeProcessing & DataGridProPropsWithoutDefaultValue, DataGridProForcedPropsKey > {} +interface DataGridProPropsWithComplexDefaultValueAfterProcessing + extends Omit { + components?: Partial; +} + /** * The props of the `DataGridPro` component after the pre-processing phase. */ export interface DataGridProProcessedProps extends DataGridProPropsWithDefaultValue, - DataGridPropsWithComplexDefaultValueAfterProcessing, + DataGridProPropsWithComplexDefaultValueAfterProcessing, DataGridProPropsWithoutDefaultValue {} export type DataGridProForcedPropsKey = 'signature'; diff --git a/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts b/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts index 91a87145db8a..64ed013f44f2 100644 --- a/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts +++ b/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts @@ -1,7 +1,15 @@ +import * as React from 'react'; import { GridSlotsComponent } from '@mui/x-data-grid'; +import { GridProIconSlotsComponent } from './gridProIconSlotsComponent'; /** * Grid components React prop interface containing all the overridable components * for Pro package */ -export interface GridProSlotsComponent extends GridSlotsComponent {} +export interface GridProSlotsComponent extends GridSlotsComponent, GridProIconSlotsComponent { + /** + * The custom Checkbox component used in the grid for both header and cells. + * @default GridColumnPinningMenuItems + */ + ColumnMenuPinningItem: React.JSXElementConstructor; +} diff --git a/packages/grid/x-data-grid-pro/src/typeOverloads/modules.ts b/packages/grid/x-data-grid-pro/src/typeOverloads/modules.ts index a6d24f5f6449..9284d8b60e5c 100644 --- a/packages/grid/x-data-grid-pro/src/typeOverloads/modules.ts +++ b/packages/grid/x-data-grid-pro/src/typeOverloads/modules.ts @@ -58,7 +58,7 @@ declare module '@mui/x-data-grid' { interface GridPipeProcessingLookup extends GridPipeProcessingLookupPro {} - interface GridColumnMenuSlotInternalOverrides { + interface GridColumnMenuKeysInternalOverrides { pinning: true; } } diff --git a/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts b/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts index d1228cc09904..fce0fef7d8fa 100644 --- a/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts +++ b/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts @@ -1 +1 @@ -export { insertSlotsInColumnMenu } from './insertSlotsInColumnMenu'; +export { insertItemsInColumnMenu } from './insertItemsInColumnMenu'; diff --git a/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts b/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts new file mode 100644 index 000000000000..448e2d83fef3 --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts @@ -0,0 +1,25 @@ +import { GridColumnMenuValue, GridColumnMenuTypes } from '@mui/x-data-grid'; + +/** + * Method used to insert specific items after an item in column menu + * + * @param {GridColumnMenuValue['visibleItemKeys']} visibleKeys ordered list of keys for column menu items + * @param {GridColumnMenuValue['visibleItemKeys']} newKeys new keys to be inserted + * @param {GridColumnMenuTypes['key'] | undefined} afterKey key of the item after which the new keys should be inserted + * @returns {GridColumnMenuValue['visibleItemKeys']} updated keys + */ +export const insertItemsInColumnMenu = ( + visibleKeys: GridColumnMenuValue['visibleItemKeys'], + newKeys: GridColumnMenuValue['visibleItemKeys'], + afterKey: GridColumnMenuTypes['key'] | undefined, +) => { + if (!afterKey) { + return [...visibleKeys, ...newKeys]; + } + return visibleKeys.reduce((finalItems, key) => { + if (key === afterKey) { + return [...finalItems, key, ...newKeys]; + } + return [...finalItems, key]; + }, []); +}; diff --git a/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertSlotsInColumnMenu.ts b/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertSlotsInColumnMenu.ts deleted file mode 100644 index 01f29271d649..000000000000 --- a/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertSlotsInColumnMenu.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { GridColumnMenuValue, GridColumnMenuLookup } from '@mui/x-data-grid'; - -/** - * Method used to insert specific items after an item in column menu - * - * @param {GridColumnMenuValue['visibleSlots']} visibleSlots ordered list of visible slots - * @param {GridColumnMenuValue['visibleSlots']} newSlots new slots to be inserted - * @param {GridColumnMenuLookup['slot'] | undefined} afterSlot name of the slot after which the new slots should be inserted - * @returns {GridColumnMenuValue['visibleSlots']} updated slots - */ -export const insertSlotsInColumnMenu = ( - visibleSlots: GridColumnMenuValue['visibleSlots'], - newSlots: GridColumnMenuValue['visibleSlots'], - afterSlot: GridColumnMenuLookup['slot'] | undefined, -) => { - if (!afterSlot) { - return [...visibleSlots, ...newSlots]; - } - return visibleSlots.reduce((finalItems, slot) => { - if (slot === afterSlot) { - return [...finalItems, slot, ...newSlots]; - } - return [...finalItems, slot]; - }, [] as GridColumnMenuValue['visibleSlots']); -}; diff --git a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx index e00638968a52..24f3ea259b90 100644 --- a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx @@ -50,10 +50,6 @@ const GridMenuRoot = styled(Popper, { }, })); -const StyledPaper = styled(Paper)(() => ({ - borderRadius: '10px', -})); - export interface GridMenuProps extends Omit { open: boolean; target: HTMLElement | null; @@ -118,7 +114,7 @@ function GridMenu(props: GridMenuProps) { style={{ transformOrigin: transformOrigin[placement as keyof typeof transformOrigin] }} onExited={handleExited(TransitionProps?.onExited)} > - {children} + {children} )} diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx index 19091b5a91da..9b252f622566 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { GridColumnMenuLookup, GridColumnMenuValue } from '../../../hooks/features/columnMenu'; +import { GridColumnMenuTypes, GridColumnMenuValue } from '../../../hooks/features/columnMenu'; import { GridColumnMenuProps } from './GridColumnMenuProps'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; @@ -9,7 +9,7 @@ const GridColumnMenu = (props: GridColumnMenuProps) => { hideMenu, currentColumn, defaultMenuItems, - defaultVisibleSlots, + defaultVisibleItems, columnMenuItems: userMenuItems, } = props; @@ -17,78 +17,48 @@ const GridColumnMenu = (props: GridColumnMenuProps) => { const preProcessedValue = apiRef.current.unstable_applyPipeProcessors( 'columnMenu', - { items: defaultMenuItems, visibleSlots: defaultVisibleSlots }, + { items: defaultMenuItems, visibleItems: defaultVisibleItems }, currentColumn, ); - const extendedColumnMenuItems = React.useMemo(() => { + const extendedColumnMenuItems: GridColumnMenuValue['items'] = React.useMemo(() => { if (!userMenuItems || !Object.keys(userMenuItems).length) { return preProcessedValue.items; } - // Overrides for default items - const userSlots = new Set( - Object.keys(userMenuItems) as Array, - ); - const overridenItems = preProcessedValue.items.reduce((acc, item) => { - if (userSlots.has(item.slot)) { - // override - userSlots.delete(item.slot); - return [...acc, { ...item, ...userMenuItems[item.slot] }]; - } - return [...acc, item]; - }, [] as GridColumnMenuValue['items']); - - // New items to add - // TODO: Handle typings for newly added slots - if (userSlots.size > 0) { - const newItems = Array.from(userSlots).map((slot: GridColumnMenuLookup['slot']) => ({ - slot, - ...userMenuItems[slot], - })); - - return [...overridenItems, ...newItems]; - } - return overridenItems; + return { ...preProcessedValue.items, ...userMenuItems }; }, [preProcessedValue.items, userMenuItems]); - const filteredColumnMenuItems: GridColumnMenuValue['items'] = React.useMemo(() => { + const filteredAndSortedItems = React.useMemo(() => { const filterCallback = currentColumn.getVisibleColumnMenuItems ?? props.getVisibleColumnMenuItems; - const menuItemSlots = extendedColumnMenuItems.map((item) => item.slot); - - const filteredSlots: Array = + const filteredItemKeys = !filterCallback || typeof filterCallback !== 'function' - ? preProcessedValue.visibleSlots - : filterCallback(menuItemSlots); + ? preProcessedValue.visibleItemKeys + : filterCallback(Object.keys(extendedColumnMenuItems) as Array); - if (!filteredSlots?.length) { - return extendedColumnMenuItems; - } + const visibleItems = filteredItemKeys || defaultVisibleItems; - return filteredSlots.reduce((acc, slot) => { - const item = extendedColumnMenuItems.find((menuItem) => menuItem.slot === slot); - return item ? [...acc, item] : acc; - }, [] as GridColumnMenuValue['items']); + return visibleItems.map((itemName) => extendedColumnMenuItems[itemName]); }, [ currentColumn.getVisibleColumnMenuItems, props.getVisibleColumnMenuItems, + preProcessedValue.visibleItemKeys, extendedColumnMenuItems, - preProcessedValue.visibleSlots, + defaultVisibleItems, ]); return ( - {filteredColumnMenuItems.map((item: any, index: number) => { + {filteredAndSortedItems.map((component: any, index: number) => { const itemProps = { - ...item.component.props, onClick: hideMenu, column: currentColumn, key: index, }; - return React.cloneElement(item.component, itemProps); + return React.cloneElement(component, itemProps); })} ); @@ -101,44 +71,28 @@ GridColumnMenu.propTypes = { // ---------------------------------------------------------------------- /** * To override existing and add new items in column menu - * If the slot is already registered, it will be overwritten otherwise a new slot will be registered + * If the item is already registered, it will be overwritten otherwise a new item will be registered */ columnMenuItems: PropTypes.shape({ - divider: PropTypes.shape({ - component: PropTypes.node, - displayName: PropTypes.string, - }).isRequired, - filter: PropTypes.shape({ - component: PropTypes.node, - displayName: PropTypes.string, - }).isRequired, - hideColumn: PropTypes.shape({ - component: PropTypes.node, - displayName: PropTypes.string, - }).isRequired, - manageColumns: PropTypes.shape({ - component: PropTypes.node, - displayName: PropTypes.string, - }).isRequired, - sorting: PropTypes.shape({ - component: PropTypes.node, - displayName: PropTypes.string, - }).isRequired, + divider: PropTypes.node, + filter: PropTypes.node, + hideColumn: PropTypes.node, + manageColumns: PropTypes.node, + sorting: PropTypes.node, }), currentColumn: PropTypes.object.isRequired, - defaultMenuItems: PropTypes.arrayOf( - PropTypes.shape({ - component: PropTypes.node, - displayName: PropTypes.string, - slot: PropTypes.oneOf(['divider', 'filter', 'hideColumn', 'manageColumns', 'sorting']) - .isRequired, - }), - ).isRequired, + defaultMenuItems: PropTypes.shape({ + divider: PropTypes.node, + filter: PropTypes.node, + hideColumn: PropTypes.node, + manageColumns: PropTypes.node, + sorting: PropTypes.node, + }).isRequired, /** * Default column menu items in order that needs to be shown * Could be overriden by `getVisibleColumnMenuItems` */ - defaultVisibleSlots: PropTypes.arrayOf( + defaultVisibleItems: PropTypes.arrayOf( PropTypes.oneOf(['divider', 'filter', 'hideColumn', 'manageColumns', 'sorting']).isRequired, ).isRequired, getVisibleColumnMenuItems: PropTypes.func, diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts index 1a837aa8c442..58bc21fec5d2 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { GridColDef } from '../../../models/colDef/gridColDef'; -import { GridColumnMenuLookup, GridColumnMenuValue } from '../../../hooks/features/columnMenu'; +import { GridColumnMenuValue, GridColumnMenuTypes } from '../../../hooks/features/columnMenu'; export interface GridColumnMenuProps extends React.HTMLAttributes { hideMenu: (event: React.SyntheticEvent) => void; @@ -8,21 +8,18 @@ export interface GridColumnMenuProps extends React.HTMLAttributes; - }; + defaultVisibleItems: Array; getVisibleColumnMenuItems?: ( - items: Array, - ) => Array; - + items: Array, + ) => Array; /** - * Default column menu items in order that needs to be shown - * Could be overriden by `getVisibleColumnMenuItems` + * To override existing and add new items in column menu + * If the item is already registered, it will be overwritten otherwise a new item will be registered */ - defaultVisibleSlots: Array; + columnMenuItems?: GridColumnMenuValue['items']; + defaultMenuItems: GridColumnMenuValue['items']; } diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx index 91eadeb333f6..1cf3c999e546 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Divider from '@mui/material/Divider'; -import { GridColumnMenuValue, GridColumnMenuLookup } from '../../../../hooks/features/columnMenu'; +import { GridColumnMenuValue, GridColumnMenuTypes } from '../../../../hooks/features/columnMenu'; import { GridColumnMenuContainer } from './GridColumnMenuContainer'; import { GridColumnMenu } from '../GridColumnMenu'; import { GridColumnMenuProps } from '../GridColumnMenuProps'; @@ -13,7 +13,7 @@ import { SortGridMenuItems } from './SortGridMenuItems'; export interface GridColumnMenuDefaultProps extends Pick {} -const defaultVisibleSlots: Array = [ +const defaultVisibleItems: Array = [ 'sorting', 'divider', 'filter', @@ -25,37 +25,19 @@ const defaultVisibleSlots: Array = [ const GridColumnMenuDefault = React.forwardRef( function GridColumnMenuDefault(props: GridColumnMenuDefaultProps, ref) { - const defaultMenuItems: GridColumnMenuValue['items'] = [ - { - slot: 'sorting', - displayName: 'SortGridMenuItems', - component: , - }, - { - slot: 'filter', - displayName: 'GridFilterMenuItem', - component: , - }, - { - slot: 'hideColumn', - displayName: 'HideGridColMenuItem', - component: , - }, - { - slot: 'manageColumns', - displayName: 'GridColumnsMenuItem', - component: , - }, - { - slot: 'divider', - component: , - }, - ]; + // TODO: Fix typing + const defaultMenuItems: GridColumnMenuValue['items'] = { + sorting: , + filter: , + hideColumn: , + manageColumns: , + divider: , + }; return ( diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx index 3db0e5f1ee08..f1306f129d98 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import { styled } from '@mui/material'; +import { styled } from '@mui/material/styles'; import { GridPreferencePanelsValue } from '../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx index eb3d134b2823..f8952b61f203 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import Button from '@mui/material/Button'; import IconButton from '@mui/material/IconButton'; import Stack from '@mui/material/Stack'; -import { styled } from '@mui/material'; +import { styled } from '@mui/material/styles'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { useGridSelector } from '../../../../hooks/utils/useGridSelector'; import { gridFilterModelSelector } from '../../../../hooks/features/filter/gridFilterSelector'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx index 44fce31cdcfb..acd9d8a322f8 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import { styled } from '@mui/material'; +import { styled } from '@mui/material/styles'; import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx index e36eef116f7f..32d803564740 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; -import { styled } from '@mui/material'; +import { styled } from '@mui/material/styles'; import { useGridSelector } from '../../../../hooks/utils/useGridSelector'; import { gridSortModelSelector } from '../../../../hooks/features/sorting/gridSortingSelector'; import { GridSortDirection } from '../../../../models/gridSortModel'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index e54f307c4447..4eac41dc8d81 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Divider from '@mui/material/Divider'; -import { GridColumnMenuLookup, GridColumnMenuValue } from '../../../../hooks/features/columnMenu'; +import { GridColumnMenuTypes } from '../../../../hooks/features/columnMenu'; import { GridColumnMenuSimpleContainer } from './GridColumnMenuSimpleContainer'; import { GridColumnMenuProps } from '../GridColumnMenuProps'; import { GridColumnsMenuSimpleItem } from './GridColumnsMenuSimpleItem'; @@ -16,7 +16,7 @@ interface Props 'hideMenu' | 'currentColumn' | 'open' | 'getVisibleColumnMenuItems' > {} -const defaultVisibleSlots: Array = [ +const defaultVisibleItems: Array = [ 'sorting', 'filter', 'hideColumn', @@ -25,38 +25,20 @@ const defaultVisibleSlots: Array = [ const GridColumnMenuSimple = React.forwardRef( function GridColumnMenuSimple(props: Props, ref) { - const defaultMenuItems: GridColumnMenuValue['items'] = [ - { - slot: 'sorting', - displayName: 'SortGridMenuSimpleItems', - component: , - }, - { - slot: 'filter', - displayName: 'GridFilterMenuSimpleItem', - component: , - }, - { - slot: 'hideColumn', - displayName: 'HideGridColMenuSimpleItem', - component: , - }, - { - slot: 'manageColumns', - displayName: 'GridColumnsMenuSimpleItem', - component: , - }, - { - slot: 'divider', - component: , - }, - ]; + const defaultMenuItems = { + sorting: , + filter: , + hideColumn: , + manageColumns: , + divider: , + }; return ( diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts index 83458842378e..2cfc6d11b3ae 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts @@ -1,4 +1,5 @@ import { OverridableStringUnion } from '@mui/types'; +import React from 'react'; export interface GridColumnMenuState { open: boolean; @@ -6,27 +7,22 @@ export interface GridColumnMenuState { } // To be used by Pro and Premium packages for overriding -export interface GridColumnMenuSlotInternalOverrides {} +export interface GridColumnMenuKeysInternalOverrides {} // To be used by users for overriding -export interface GridColumnMenuSlotOverrides {} +export interface GridColumnMenuKeysOverrides {} -export interface GridColumnMenuLookup { - /** - * Will be used to filter or override a specific item in `columnMenu` - */ - slot: OverridableStringUnion< +export interface GridColumnMenuTypes { + key: OverridableStringUnion< OverridableStringUnion< 'filter' | 'sorting' | 'hideColumn' | 'manageColumns' | 'divider', - GridColumnMenuSlotInternalOverrides + GridColumnMenuKeysInternalOverrides >, - GridColumnMenuSlotOverrides + GridColumnMenuKeysOverrides >; - component: React.ReactNode; - displayName?: string; } export interface GridColumnMenuValue { - items: Array; - visibleSlots: Array; + items: { [key in GridColumnMenuTypes['key']]: React.ReactNode }; + visibleItemKeys: Array; } diff --git a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts b/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts index dfc3bafd2d7f..591fd46d3d26 100644 --- a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts +++ b/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { GridCellClassNamePropType } from '../gridCellClass'; import { GridColumnHeaderClassNamePropType } from '../gridColumnHeaderClass'; import { GridFilterOperator } from '../gridFilterOperator'; -import { GridColumnMenuLookup } from '../../hooks/features/columnMenu'; +import { GridColumnMenuTypes } from '../../hooks/features/columnMenu'; import { GridCellParams, GridRenderCellParams, @@ -242,13 +242,13 @@ export interface GridColDef { */ colSpan?: number | ((params: GridCellParams) => number | undefined); /** - * Recieves registered column menu slots and should return the slots which should be shown. - * @param {Array} slots Registered column menu item slots. - * @returns {Array} Slots ehich are needed to be shown. + * Recieves registered column menu items and should return the items which should be shown. + * @param {Array} keys Registered column menu items. + * @returns {Array} Keys of items which are needed to be shown. */ getVisibleColumnMenuItems?: ( - slots: Array, - ) => Array; + keys: Array, + ) => Array; } export interface GridActionsColDef From 2f4a246cda09edcbfb5df1776a59889589d1ba41 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sat, 5 Nov 2022 15:16:30 +0500 Subject: [PATCH 020/104] Separates locales for two themes --- docs/data/data-grid/column-menu/FilterColumnMenuGrid.js | 2 +- docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx | 2 +- .../src/components/menu/columnMenu/GridColumnMenu.tsx | 2 +- .../components/menu/columnMenu/default/GridColumnsMenuItem.tsx | 2 +- packages/grid/x-data-grid/src/constants/localeTextConstants.ts | 3 ++- packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts | 1 + 6 files changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js index d4298480707e..8b464717d0f5 100644 --- a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js @@ -26,7 +26,7 @@ export default function FilterColumnMenuGrid() { }); const columns = data.columns; // Show only specific items for this column - columns[4].getVisibleColumnMenuItems = () => []; + columns[4].getVisibleColumnMenuItems = () => ['closeMenu']; const columnMenuItems = { filter: , // overriding existing item diff --git a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx index fe8dc4c8a8d2..e3657a44743a 100644 --- a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx +++ b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx @@ -36,7 +36,7 @@ export default function FilterColumnMenuGrid() { }); const columns = data.columns; // Show only specific items for this column - columns[4].getVisibleColumnMenuItems = () => ['closeMenu', 'manageColumns']; + columns[4].getVisibleColumnMenuItems = () => ['closeMenu']; const columnMenuItems = { filter: , // overriding existing item diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx index 9b252f622566..c5b2cd094712 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx @@ -17,7 +17,7 @@ const GridColumnMenu = (props: GridColumnMenuProps) => { const preProcessedValue = apiRef.current.unstable_applyPipeProcessors( 'columnMenu', - { items: defaultMenuItems, visibleItems: defaultVisibleItems }, + { items: defaultMenuItems, visibleItemKeys: defaultVisibleItems }, currentColumn, ); diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx index f1306f129d98..ab6e3a217c2f 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx @@ -36,7 +36,7 @@ const GridColumnsMenuItem = (props: GridColumnMenuItemProps) => { onClick={showColumns} startIcon={} > - {apiRef.current.getLocaleText('columnMenuShowColumns')} + {apiRef.current.getLocaleText('columnMenuManageColumns')} ); diff --git a/packages/grid/x-data-grid/src/constants/localeTextConstants.ts b/packages/grid/x-data-grid/src/constants/localeTextConstants.ts index b1e3965f9e84..7f21832d8c55 100644 --- a/packages/grid/x-data-grid/src/constants/localeTextConstants.ts +++ b/packages/grid/x-data-grid/src/constants/localeTextConstants.ts @@ -77,7 +77,8 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = { // Column menu text columnMenuLabel: 'Menu', - columnMenuShowColumns: 'Manage columns', + columnMenuShowColumns: 'Show columns', + columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filter', columnMenuHideColumn: 'Hide', columnMenuHideColumnDefault: 'Hide column', diff --git a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts index 44baee2d0584..21229bb10ad2 100644 --- a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts +++ b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts @@ -81,6 +81,7 @@ export interface GridLocaleText { // Column menu text columnMenuLabel: string; columnMenuShowColumns: React.ReactNode; + columnMenuManageColumns: React.ReactNode; columnMenuFilter: React.ReactNode; columnMenuHideColumn: React.ReactNode; columnMenuHideColumnDefault: React.ReactNode; From 150f7747271fd2136557f8cfac96eb411e55c719 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sat, 5 Nov 2022 15:54:41 +0500 Subject: [PATCH 021/104] Updates locales --- docs/data/data-grid/column-menu/column-menu.md | 4 ---- packages/grid/x-data-grid/src/locales/arSD.ts | 4 ++++ packages/grid/x-data-grid/src/locales/bgBG.ts | 4 ++++ packages/grid/x-data-grid/src/locales/csCZ.ts | 4 ++++ packages/grid/x-data-grid/src/locales/daDK.ts | 4 ++++ packages/grid/x-data-grid/src/locales/deDE.ts | 4 ++++ packages/grid/x-data-grid/src/locales/elGR.ts | 4 ++++ packages/grid/x-data-grid/src/locales/esES.ts | 4 ++++ packages/grid/x-data-grid/src/locales/faIR.ts | 4 ++++ packages/grid/x-data-grid/src/locales/fiFI.ts | 4 ++++ packages/grid/x-data-grid/src/locales/frFR.ts | 4 ++++ packages/grid/x-data-grid/src/locales/heIL.ts | 4 ++++ packages/grid/x-data-grid/src/locales/huHU.ts | 4 ++++ packages/grid/x-data-grid/src/locales/itIT.ts | 4 ++++ packages/grid/x-data-grid/src/locales/jaJP.ts | 4 ++++ packages/grid/x-data-grid/src/locales/koKR.ts | 4 ++++ packages/grid/x-data-grid/src/locales/nbNO.ts | 4 ++++ packages/grid/x-data-grid/src/locales/nlNL.ts | 4 ++++ packages/grid/x-data-grid/src/locales/plPL.ts | 4 ++++ packages/grid/x-data-grid/src/locales/ptBR.ts | 4 ++++ packages/grid/x-data-grid/src/locales/roRO.ts | 4 ++++ packages/grid/x-data-grid/src/locales/ruRU.ts | 4 ++++ packages/grid/x-data-grid/src/locales/skSK.ts | 4 ++++ packages/grid/x-data-grid/src/locales/svSE.ts | 4 ++++ packages/grid/x-data-grid/src/locales/trTR.ts | 4 ++++ packages/grid/x-data-grid/src/locales/ukUA.ts | 4 ++++ packages/grid/x-data-grid/src/locales/viVN.ts | 4 ++++ packages/grid/x-data-grid/src/locales/zhCN.ts | 4 ++++ packages/grid/x-data-grid/src/locales/zhTW.ts | 4 ++++ 29 files changed, 112 insertions(+), 4 deletions(-) diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index 2985f5ab0a1d..bf82621ce803 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -39,10 +39,6 @@ For that purpose you can use `getVisibleColumnMenuItems` and `columnMenuItems`. **getVisibleColumnMenuItems**: It is available in both `GridColDef` and `componentsProps.columnMenu`, it receives keys of all registered items and should return a _filtered_ and _ordered_ list of keys that are needed to be shown. It can be used either per-column basis by passing in `GridColDef` or for the whole Grid by passing in `componentsProps.columnMenu`. If you have it in both, the preference will be given to the `GridColDef` one. -```tsx - -``` - **columnMenuItems**: It could be used to override or register new items to the menu. You can simply pass the object with existing or new items and they will be updated/added to the grid. ### Hide/Show Specific Items: diff --git a/packages/grid/x-data-grid/src/locales/arSD.ts b/packages/grid/x-data-grid/src/locales/arSD.ts index 6c8898f04b16..8ff6fe75d7f6 100644 --- a/packages/grid/x-data-grid/src/locales/arSD.ts +++ b/packages/grid/x-data-grid/src/locales/arSD.ts @@ -82,11 +82,15 @@ const arSDGrid: Partial = { // Column menu text columnMenuLabel: 'القائمة', columnMenuShowColumns: 'إظهار الأعمدة', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'المرشِح', columnMenuHideColumn: 'إخفاء', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'الغاء الفرز', columnMenuSortAsc: 'الفرز تصاعدياً', columnMenuSortDesc: 'الفرز تنازلياً', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/bgBG.ts b/packages/grid/x-data-grid/src/locales/bgBG.ts index d0b07342863b..f65c9d2e5205 100644 --- a/packages/grid/x-data-grid/src/locales/bgBG.ts +++ b/packages/grid/x-data-grid/src/locales/bgBG.ts @@ -81,11 +81,15 @@ const bgBGGrid: Partial = { // Column menu text columnMenuLabel: 'Меню', columnMenuShowColumns: 'Покажи колоните', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Филтри', columnMenuHideColumn: 'Скрий', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Отмени сортирането', columnMenuSortAsc: 'Сортирай по възходящ ред', columnMenuSortDesc: 'Сортирай по низходящ ред', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => `${count} активни филтри`, diff --git a/packages/grid/x-data-grid/src/locales/csCZ.ts b/packages/grid/x-data-grid/src/locales/csCZ.ts index ede9e18f048f..4bf4e573946f 100644 --- a/packages/grid/x-data-grid/src/locales/csCZ.ts +++ b/packages/grid/x-data-grid/src/locales/csCZ.ts @@ -91,11 +91,15 @@ const csCZGrid: Partial = { // Column menu text columnMenuLabel: 'Menu', columnMenuShowColumns: 'Zobrazit sloupce', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtr', columnMenuHideColumn: 'Skrýt', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Zrušit filtry', columnMenuSortAsc: 'Seřadit vzestupně', columnMenuSortDesc: 'Seřadit sestupně', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => { diff --git a/packages/grid/x-data-grid/src/locales/daDK.ts b/packages/grid/x-data-grid/src/locales/daDK.ts index 7ad6038f6b76..3b89f3748687 100644 --- a/packages/grid/x-data-grid/src/locales/daDK.ts +++ b/packages/grid/x-data-grid/src/locales/daDK.ts @@ -82,11 +82,15 @@ const daDKGrid: Partial = { // Column menu text columnMenuLabel: 'Menu', columnMenuShowColumns: 'Vis Kolonner', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtre', columnMenuHideColumn: 'Skjul', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Fjern sortering', columnMenuSortAsc: 'Sorter stigende', columnMenuSortDesc: 'Sorter faldende', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/deDE.ts b/packages/grid/x-data-grid/src/locales/deDE.ts index 62e1227fdafe..9e666a032d35 100644 --- a/packages/grid/x-data-grid/src/locales/deDE.ts +++ b/packages/grid/x-data-grid/src/locales/deDE.ts @@ -82,11 +82,15 @@ const deDEGrid: Partial = { // Column menu text columnMenuLabel: 'Menü', columnMenuShowColumns: 'Zeige alle Spalten', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filter', columnMenuHideColumn: 'Verbergen', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Sortierung deaktivieren', columnMenuSortAsc: 'Sortiere aufsteigend', columnMenuSortDesc: 'Sortiere absteigend', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/elGR.ts b/packages/grid/x-data-grid/src/locales/elGR.ts index 16a9f15cfeb0..47195e6f31e7 100644 --- a/packages/grid/x-data-grid/src/locales/elGR.ts +++ b/packages/grid/x-data-grid/src/locales/elGR.ts @@ -81,11 +81,15 @@ const elGRGrid: Partial = { // Column menu text columnMenuLabel: 'Μενού', columnMenuShowColumns: 'Εμφάνιση στηλών', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Φίλτρο', columnMenuHideColumn: 'Απόκρυψη', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Απενεργοποίηση ταξινόμησης', columnMenuSortAsc: 'Ταξινόμηση σε αύξουσα σειρά', columnMenuSortDesc: 'Ταξινόμηση σε φθίνουσα σειρά', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/esES.ts b/packages/grid/x-data-grid/src/locales/esES.ts index 7266f01be908..f92f9f174b5b 100644 --- a/packages/grid/x-data-grid/src/locales/esES.ts +++ b/packages/grid/x-data-grid/src/locales/esES.ts @@ -82,11 +82,15 @@ const esESGrid: Partial = { // Column menu text columnMenuLabel: 'Menú', columnMenuShowColumns: 'Mostrar columnas', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtro', columnMenuHideColumn: 'Ocultar', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Desordenar', columnMenuSortAsc: 'Ordenar ASC', columnMenuSortDesc: 'Ordenar DESC', + columnMenuSortDefaultAsc: 'ASC', + columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/faIR.ts b/packages/grid/x-data-grid/src/locales/faIR.ts index 837104776078..4c76b6bb9fb6 100644 --- a/packages/grid/x-data-grid/src/locales/faIR.ts +++ b/packages/grid/x-data-grid/src/locales/faIR.ts @@ -82,11 +82,15 @@ const faIRGrid: Partial = { // Column menu text columnMenuLabel: 'فهرست', columnMenuShowColumns: 'نمایش ستون‌ها', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'فیلتر', columnMenuHideColumn: 'مخفی', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'نامرتب‌کردن', columnMenuSortAsc: 'مرتب‌کردن صعودی', columnMenuSortDesc: 'مرتب‌کردن نزولی', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/fiFI.ts b/packages/grid/x-data-grid/src/locales/fiFI.ts index 1ca3c6810310..d93dc886686d 100644 --- a/packages/grid/x-data-grid/src/locales/fiFI.ts +++ b/packages/grid/x-data-grid/src/locales/fiFI.ts @@ -82,11 +82,15 @@ const fiFIGrid: Partial = { // Column menu text columnMenuLabel: 'Valikko', columnMenuShowColumns: 'Näytä sarakkeet', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Suodata', columnMenuHideColumn: 'Piilota', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Poista järjestys', columnMenuSortAsc: 'Järjestä laskevasti', columnMenuSortDesc: 'Järjestä nousevasti', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/frFR.ts b/packages/grid/x-data-grid/src/locales/frFR.ts index 9b5e716fa9db..b8c4f926dd3e 100644 --- a/packages/grid/x-data-grid/src/locales/frFR.ts +++ b/packages/grid/x-data-grid/src/locales/frFR.ts @@ -82,11 +82,15 @@ const frFRGrid: Partial = { // Column menu text columnMenuLabel: 'Menu', columnMenuShowColumns: 'Afficher les colonnes', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtrer', columnMenuHideColumn: 'Cacher', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Annuler le tri', columnMenuSortAsc: 'Tri ascendant', columnMenuSortDesc: 'Tri descendant', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/heIL.ts b/packages/grid/x-data-grid/src/locales/heIL.ts index 527b4d189b4f..8efcf0d3f9a7 100644 --- a/packages/grid/x-data-grid/src/locales/heIL.ts +++ b/packages/grid/x-data-grid/src/locales/heIL.ts @@ -82,11 +82,15 @@ const heILGrid: Partial = { // Column menu text columnMenuLabel: 'תפריט', columnMenuShowColumns: 'הצג עמודות', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'סנן', columnMenuHideColumn: 'הסתר', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'בטל מיון', columnMenuSortAsc: 'מיין בסדר עולה', columnMenuSortDesc: 'מיין בסדר יורד', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/huHU.ts b/packages/grid/x-data-grid/src/locales/huHU.ts index eaa826160aec..1562df61461b 100644 --- a/packages/grid/x-data-grid/src/locales/huHU.ts +++ b/packages/grid/x-data-grid/src/locales/huHU.ts @@ -81,11 +81,15 @@ const huHUGrid: Partial = { // Column menu text columnMenuLabel: 'Menü', columnMenuShowColumns: 'Oszlopok megjelenítése', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Szűrők', columnMenuHideColumn: 'Elrejtés', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Sorrend visszaállítása', columnMenuSortAsc: 'Növekvő sorrendbe', columnMenuSortDesc: 'Csökkenő sorrendbe', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => `${count} aktív szűrő`, diff --git a/packages/grid/x-data-grid/src/locales/itIT.ts b/packages/grid/x-data-grid/src/locales/itIT.ts index e7155c3709f9..3c8bc26486e0 100644 --- a/packages/grid/x-data-grid/src/locales/itIT.ts +++ b/packages/grid/x-data-grid/src/locales/itIT.ts @@ -82,11 +82,15 @@ const itITGrid: Partial = { // Column menu text columnMenuLabel: 'Menu', columnMenuShowColumns: 'Mostra le colonne', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtra', columnMenuHideColumn: 'Nascondi', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: "Annulla l'ordinamento", columnMenuSortAsc: 'Ordinamento crescente', columnMenuSortDesc: 'Ordinamento decrescente', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/jaJP.ts b/packages/grid/x-data-grid/src/locales/jaJP.ts index dfc086dde375..c17e4760baee 100644 --- a/packages/grid/x-data-grid/src/locales/jaJP.ts +++ b/packages/grid/x-data-grid/src/locales/jaJP.ts @@ -81,11 +81,15 @@ const jaJPGrid: Partial = { // Column menu text columnMenuLabel: 'メニュー', columnMenuShowColumns: '列表示', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'フィルター', columnMenuHideColumn: '列非表示', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'ソート解除', columnMenuSortAsc: '昇順ソート', columnMenuSortDesc: '降順ソート', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => `${count}件のフィルターを適用中`, diff --git a/packages/grid/x-data-grid/src/locales/koKR.ts b/packages/grid/x-data-grid/src/locales/koKR.ts index 7143c36883ad..9b3a5224a8e7 100644 --- a/packages/grid/x-data-grid/src/locales/koKR.ts +++ b/packages/grid/x-data-grid/src/locales/koKR.ts @@ -81,11 +81,15 @@ const koKRGrid: Partial = { // Column menu text columnMenuLabel: '메뉴', columnMenuShowColumns: '열 표시', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: '필터', columnMenuHideColumn: '열 숨기기', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: '정렬 해제', columnMenuSortAsc: '오름차순 정렬', columnMenuSortDesc: '내림차순 정렬', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => `${count}건의 필터를 적용중`, diff --git a/packages/grid/x-data-grid/src/locales/nbNO.ts b/packages/grid/x-data-grid/src/locales/nbNO.ts index a675314cd06d..4316b2ed365d 100644 --- a/packages/grid/x-data-grid/src/locales/nbNO.ts +++ b/packages/grid/x-data-grid/src/locales/nbNO.ts @@ -82,11 +82,15 @@ const nbNOGrid: Partial = { // Column menu text columnMenuLabel: 'Meny', columnMenuShowColumns: 'Vis kolonner', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filter', columnMenuHideColumn: 'Skjul', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Usorter', columnMenuSortAsc: 'Sorter ØKENDE', columnMenuSortDesc: 'Sorter SYNKENDE', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/nlNL.ts b/packages/grid/x-data-grid/src/locales/nlNL.ts index e41a18ac07d5..8cbff1044b81 100644 --- a/packages/grid/x-data-grid/src/locales/nlNL.ts +++ b/packages/grid/x-data-grid/src/locales/nlNL.ts @@ -82,11 +82,15 @@ const nlNLGrid: Partial = { // Column menu text columnMenuLabel: 'Menu', columnMenuShowColumns: 'Toon kolommen', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filteren', columnMenuHideColumn: 'Verbergen', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Annuleer sortering', columnMenuSortAsc: 'Oplopend sorteren', columnMenuSortDesc: 'Aflopend sorteren', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/plPL.ts b/packages/grid/x-data-grid/src/locales/plPL.ts index 122fdd6275c0..0d8482acee06 100644 --- a/packages/grid/x-data-grid/src/locales/plPL.ts +++ b/packages/grid/x-data-grid/src/locales/plPL.ts @@ -81,11 +81,15 @@ const plPLGrid: Partial = { // Column menu text columnMenuLabel: 'Menu', columnMenuShowColumns: 'Pokaż wszystkie kolumny', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtr', columnMenuHideColumn: 'Ukryj', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Anuluj sortowanie', columnMenuSortAsc: 'Sortuj rosnąco', columnMenuSortDesc: 'Sortuj malejąco', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => `Liczba aktywnych filtrów: ${count}`, diff --git a/packages/grid/x-data-grid/src/locales/ptBR.ts b/packages/grid/x-data-grid/src/locales/ptBR.ts index 9d771c09de46..aed969a35794 100644 --- a/packages/grid/x-data-grid/src/locales/ptBR.ts +++ b/packages/grid/x-data-grid/src/locales/ptBR.ts @@ -82,11 +82,15 @@ const ptBRGrid: Partial = { // Column menu text columnMenuLabel: 'Menu', columnMenuShowColumns: 'Exibir colunas', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtrar', columnMenuHideColumn: 'Ocultar', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Desfazer ordenação', columnMenuSortAsc: 'Ordenar do menor para o maior', columnMenuSortDesc: 'Ordenar do maior para o menor', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/roRO.ts b/packages/grid/x-data-grid/src/locales/roRO.ts index 48999d940d04..d0793fe42af1 100644 --- a/packages/grid/x-data-grid/src/locales/roRO.ts +++ b/packages/grid/x-data-grid/src/locales/roRO.ts @@ -82,11 +82,15 @@ const roROGrid: Partial = { // Column menu text columnMenuLabel: 'Meniu', columnMenuShowColumns: 'Afișează toate coloanele', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtru', columnMenuHideColumn: 'Ascunde', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Dezactivare sortare', columnMenuSortAsc: 'Sortează crescător', columnMenuSortDesc: 'Sortează descrescător', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/ruRU.ts b/packages/grid/x-data-grid/src/locales/ruRU.ts index 5e177b4632f6..2f85742da435 100644 --- a/packages/grid/x-data-grid/src/locales/ruRU.ts +++ b/packages/grid/x-data-grid/src/locales/ruRU.ts @@ -92,11 +92,15 @@ const ruRUGrid: Partial = { // Column menu text columnMenuLabel: 'Меню', columnMenuShowColumns: 'Показать столбцы', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Фильтр', columnMenuHideColumn: 'Скрыть', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Отменить сортировку', columnMenuSortAsc: 'Сортировать по возрастанию', columnMenuSortDesc: 'Сортировать по убыванию', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => { diff --git a/packages/grid/x-data-grid/src/locales/skSK.ts b/packages/grid/x-data-grid/src/locales/skSK.ts index 58b4689d347f..6cb60ec1944a 100644 --- a/packages/grid/x-data-grid/src/locales/skSK.ts +++ b/packages/grid/x-data-grid/src/locales/skSK.ts @@ -91,11 +91,15 @@ const skSKGrid: Partial = { // Column menu text columnMenuLabel: 'Menu', columnMenuShowColumns: 'Zobraziť stĺpce', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filter', columnMenuHideColumn: 'Skryť', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Zrušiť filtre', columnMenuSortAsc: 'Zoradiť vzostupne', columnMenuSortDesc: 'Zoradiť zostupne', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => { diff --git a/packages/grid/x-data-grid/src/locales/svSE.ts b/packages/grid/x-data-grid/src/locales/svSE.ts index 5f6998439bee..dd83ce0ccc29 100644 --- a/packages/grid/x-data-grid/src/locales/svSE.ts +++ b/packages/grid/x-data-grid/src/locales/svSE.ts @@ -82,11 +82,15 @@ const svSEGrid: Partial = { // Column menu text columnMenuLabel: 'Meny', columnMenuShowColumns: 'Visa kolumner', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtrera', columnMenuHideColumn: 'Dölj', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Osortera', columnMenuSortAsc: 'Sortera stigande', columnMenuSortDesc: 'Sortera fallande', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/trTR.ts b/packages/grid/x-data-grid/src/locales/trTR.ts index 47391d308576..bd28dc27cdee 100644 --- a/packages/grid/x-data-grid/src/locales/trTR.ts +++ b/packages/grid/x-data-grid/src/locales/trTR.ts @@ -81,11 +81,15 @@ const trTRGrid: Partial = { // Column menu text columnMenuLabel: 'Menü', columnMenuShowColumns: 'Sütunları göster', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtre uygula', columnMenuHideColumn: 'Gizle', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Sıralama', columnMenuSortAsc: 'Sırala - Artan', columnMenuSortDesc: 'Sırala - Azalan', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => `${count} filtre aktif`, diff --git a/packages/grid/x-data-grid/src/locales/ukUA.ts b/packages/grid/x-data-grid/src/locales/ukUA.ts index e00ff85dec2e..9b176cb8bfad 100644 --- a/packages/grid/x-data-grid/src/locales/ukUA.ts +++ b/packages/grid/x-data-grid/src/locales/ukUA.ts @@ -105,11 +105,15 @@ const ukUAGrid: Partial = { // Column menu text columnMenuLabel: 'Меню', columnMenuShowColumns: 'Показати стовпці', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Фільтр', columnMenuHideColumn: 'Приховати', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Скасувати сортування', columnMenuSortAsc: 'Сортувати за зростанням', columnMenuSortDesc: 'Сортувати за спаданням', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/viVN.ts b/packages/grid/x-data-grid/src/locales/viVN.ts index 192564318e7f..fd0417df0aab 100644 --- a/packages/grid/x-data-grid/src/locales/viVN.ts +++ b/packages/grid/x-data-grid/src/locales/viVN.ts @@ -82,11 +82,15 @@ const viVNGrid: Partial = { // Column menu text columnMenuLabel: 'Danh mục', columnMenuShowColumns: 'Danh sách cột', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Bộ lọc', columnMenuHideColumn: 'Ẩn cột', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: 'Bỏ sắp xếp', columnMenuSortAsc: 'Sắp xếp tăng dần', columnMenuSortDesc: 'Sắp xếp giảm dần', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/zhCN.ts b/packages/grid/x-data-grid/src/locales/zhCN.ts index a7458c34b052..5ce5c15d36bc 100644 --- a/packages/grid/x-data-grid/src/locales/zhCN.ts +++ b/packages/grid/x-data-grid/src/locales/zhCN.ts @@ -81,11 +81,15 @@ const zhCNGrid: Partial = { // Column menu text columnMenuLabel: '菜单', columnMenuShowColumns: '显示', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: '筛选器', columnMenuHideColumn: '隐藏', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: '恢复默认', columnMenuSortAsc: '升序', columnMenuSortDesc: '降序', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => diff --git a/packages/grid/x-data-grid/src/locales/zhTW.ts b/packages/grid/x-data-grid/src/locales/zhTW.ts index c8d0a07cfc5f..98c63c87b8c3 100644 --- a/packages/grid/x-data-grid/src/locales/zhTW.ts +++ b/packages/grid/x-data-grid/src/locales/zhTW.ts @@ -81,11 +81,15 @@ const zhTWGrid: Partial = { // Column menu text columnMenuLabel: '選單', columnMenuShowColumns: '顯示欄位', + // columnMenuManageColumns: 'Manage columns', columnMenuFilter: '篩選器', columnMenuHideColumn: '隱藏', + // columnMenuHideColumnDefault: 'Hide column', columnMenuUnsort: '預設排序', columnMenuSortAsc: '升序', columnMenuSortDesc: '降序', + // columnMenuSortDefaultAsc: 'ASC', + // columnMenuSortDefaultDesc: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => `${count} 個篩選器`, From 59bdca8b20d0ef4f1a9d387595f8a7ccdb15e544 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sat, 5 Nov 2022 16:00:42 +0500 Subject: [PATCH 022/104] Adds remaining locale variables --- packages/grid/x-data-grid/src/constants/localeTextConstants.ts | 2 +- packages/grid/x-data-grid/src/locales/arSD.ts | 2 ++ packages/grid/x-data-grid/src/locales/bgBG.ts | 2 ++ packages/grid/x-data-grid/src/locales/csCZ.ts | 2 ++ packages/grid/x-data-grid/src/locales/daDK.ts | 2 ++ packages/grid/x-data-grid/src/locales/deDE.ts | 2 ++ packages/grid/x-data-grid/src/locales/elGR.ts | 2 ++ packages/grid/x-data-grid/src/locales/esES.ts | 2 ++ packages/grid/x-data-grid/src/locales/faIR.ts | 2 ++ packages/grid/x-data-grid/src/locales/fiFI.ts | 2 ++ packages/grid/x-data-grid/src/locales/frFR.ts | 2 ++ packages/grid/x-data-grid/src/locales/heIL.ts | 2 ++ packages/grid/x-data-grid/src/locales/huHU.ts | 2 ++ packages/grid/x-data-grid/src/locales/itIT.ts | 2 ++ packages/grid/x-data-grid/src/locales/jaJP.ts | 2 ++ packages/grid/x-data-grid/src/locales/koKR.ts | 2 ++ packages/grid/x-data-grid/src/locales/nbNO.ts | 2 ++ packages/grid/x-data-grid/src/locales/nlNL.ts | 2 ++ packages/grid/x-data-grid/src/locales/plPL.ts | 2 ++ packages/grid/x-data-grid/src/locales/ptBR.ts | 2 ++ packages/grid/x-data-grid/src/locales/roRO.ts | 2 ++ packages/grid/x-data-grid/src/locales/ruRU.ts | 2 ++ packages/grid/x-data-grid/src/locales/skSK.ts | 2 ++ packages/grid/x-data-grid/src/locales/svSE.ts | 2 ++ packages/grid/x-data-grid/src/locales/trTR.ts | 2 ++ packages/grid/x-data-grid/src/locales/ukUA.ts | 2 ++ packages/grid/x-data-grid/src/locales/viVN.ts | 2 ++ packages/grid/x-data-grid/src/locales/zhCN.ts | 2 ++ packages/grid/x-data-grid/src/locales/zhTW.ts | 2 ++ 29 files changed, 57 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/constants/localeTextConstants.ts b/packages/grid/x-data-grid/src/constants/localeTextConstants.ts index 7f21832d8c55..e8b8c849f1a2 100644 --- a/packages/grid/x-data-grid/src/constants/localeTextConstants.ts +++ b/packages/grid/x-data-grid/src/constants/localeTextConstants.ts @@ -123,8 +123,8 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = { // Column pinning text pinToLeft: 'Pin to left', - pinToLeftDefault: 'Left', pinToRight: 'Pin to right', + pinToLeftDefault: 'Left', pinToRightDefault: 'Right', unpin: 'Unpin', diff --git a/packages/grid/x-data-grid/src/locales/arSD.ts b/packages/grid/x-data-grid/src/locales/arSD.ts index 8ff6fe75d7f6..985f812b35ac 100644 --- a/packages/grid/x-data-grid/src/locales/arSD.ts +++ b/packages/grid/x-data-grid/src/locales/arSD.ts @@ -126,6 +126,8 @@ const arSDGrid: Partial = { // Column pinning text pinToLeft: 'التدبيس يميناً', pinToRight: 'التدبيس يساراً', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'الغاء التدبيس', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/bgBG.ts b/packages/grid/x-data-grid/src/locales/bgBG.ts index f65c9d2e5205..7cd77103f636 100644 --- a/packages/grid/x-data-grid/src/locales/bgBG.ts +++ b/packages/grid/x-data-grid/src/locales/bgBG.ts @@ -126,6 +126,8 @@ const bgBGGrid: Partial = { // Column pinning text pinToLeft: 'Закачи в ляво', pinToRight: 'Закачи в дясно', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Откачи', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/csCZ.ts b/packages/grid/x-data-grid/src/locales/csCZ.ts index 4bf4e573946f..9f8ffb1dc568 100644 --- a/packages/grid/x-data-grid/src/locales/csCZ.ts +++ b/packages/grid/x-data-grid/src/locales/csCZ.ts @@ -160,6 +160,8 @@ const csCZGrid: Partial = { // Column pinning text pinToLeft: 'Připnout na levo', pinToRight: 'Připnout na pravo', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Odepnout', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/daDK.ts b/packages/grid/x-data-grid/src/locales/daDK.ts index 3b89f3748687..76837274356c 100644 --- a/packages/grid/x-data-grid/src/locales/daDK.ts +++ b/packages/grid/x-data-grid/src/locales/daDK.ts @@ -126,6 +126,8 @@ const daDKGrid: Partial = { // Column pinning text pinToLeft: 'Fastgør til venstre', pinToRight: 'Fastgør til højre', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Frigiv', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/deDE.ts b/packages/grid/x-data-grid/src/locales/deDE.ts index 9e666a032d35..87792ef88eee 100644 --- a/packages/grid/x-data-grid/src/locales/deDE.ts +++ b/packages/grid/x-data-grid/src/locales/deDE.ts @@ -128,6 +128,8 @@ const deDEGrid: Partial = { // Column pinning text pinToLeft: 'Links anheften', pinToRight: 'Rechts anheften', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Loslösen', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/elGR.ts b/packages/grid/x-data-grid/src/locales/elGR.ts index 47195e6f31e7..86975f39ca5f 100644 --- a/packages/grid/x-data-grid/src/locales/elGR.ts +++ b/packages/grid/x-data-grid/src/locales/elGR.ts @@ -127,6 +127,8 @@ const elGRGrid: Partial = { // Column pinning text // pinToLeft: 'Pin to left', // pinToRight: 'Pin to right', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', // unpin: 'Unpin', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/esES.ts b/packages/grid/x-data-grid/src/locales/esES.ts index f92f9f174b5b..d7ae50c501fb 100644 --- a/packages/grid/x-data-grid/src/locales/esES.ts +++ b/packages/grid/x-data-grid/src/locales/esES.ts @@ -128,6 +128,8 @@ const esESGrid: Partial = { // Column pinning text // pinToLeft: 'Pin to left', // pinToRight: 'Pin to right', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', // unpin: 'Unpin', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/faIR.ts b/packages/grid/x-data-grid/src/locales/faIR.ts index 4c76b6bb9fb6..a45a0ccead90 100644 --- a/packages/grid/x-data-grid/src/locales/faIR.ts +++ b/packages/grid/x-data-grid/src/locales/faIR.ts @@ -128,6 +128,8 @@ const faIRGrid: Partial = { // Column pinning text pinToLeft: 'سنجاق کردن به چپ', pinToRight: 'سنجاق کردن به راست', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'برداشتن سنجاق', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/fiFI.ts b/packages/grid/x-data-grid/src/locales/fiFI.ts index d93dc886686d..1b8cfe75e462 100644 --- a/packages/grid/x-data-grid/src/locales/fiFI.ts +++ b/packages/grid/x-data-grid/src/locales/fiFI.ts @@ -128,6 +128,8 @@ const fiFIGrid: Partial = { // Column pinning text pinToLeft: 'Kiinnitä vasemmalle', pinToRight: 'Kiinnitä oikealle', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Irrota kiinnitys', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/frFR.ts b/packages/grid/x-data-grid/src/locales/frFR.ts index b8c4f926dd3e..4da5328d4f75 100644 --- a/packages/grid/x-data-grid/src/locales/frFR.ts +++ b/packages/grid/x-data-grid/src/locales/frFR.ts @@ -128,6 +128,8 @@ const frFRGrid: Partial = { // Column pinning text pinToLeft: 'Épingler à gauche', pinToRight: 'Épingler à droite', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Désépingler', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/heIL.ts b/packages/grid/x-data-grid/src/locales/heIL.ts index 8efcf0d3f9a7..2fa2c23a9e6b 100644 --- a/packages/grid/x-data-grid/src/locales/heIL.ts +++ b/packages/grid/x-data-grid/src/locales/heIL.ts @@ -126,6 +126,8 @@ const heILGrid: Partial = { // Column pinning text pinToLeft: 'נעץ משמאל', pinToRight: 'נעץ מימין', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'בטל נעיצה', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/huHU.ts b/packages/grid/x-data-grid/src/locales/huHU.ts index 1562df61461b..94c5d7ffc0aa 100644 --- a/packages/grid/x-data-grid/src/locales/huHU.ts +++ b/packages/grid/x-data-grid/src/locales/huHU.ts @@ -123,6 +123,8 @@ const huHUGrid: Partial = { // Column pinning text pinToLeft: 'Rögzítés balra', pinToRight: 'Rögzítés jobbra', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Rögzítés törlése', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/itIT.ts b/packages/grid/x-data-grid/src/locales/itIT.ts index 3c8bc26486e0..d9d28249e698 100644 --- a/packages/grid/x-data-grid/src/locales/itIT.ts +++ b/packages/grid/x-data-grid/src/locales/itIT.ts @@ -128,6 +128,8 @@ const itITGrid: Partial = { // Column pinning text pinToLeft: 'Blocca a sinistra', pinToRight: 'Blocca a destra', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Sblocca', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/jaJP.ts b/packages/grid/x-data-grid/src/locales/jaJP.ts index c17e4760baee..65049a6f6079 100644 --- a/packages/grid/x-data-grid/src/locales/jaJP.ts +++ b/packages/grid/x-data-grid/src/locales/jaJP.ts @@ -123,6 +123,8 @@ const jaJPGrid: Partial = { // Column pinning text pinToLeft: '左側に固定', pinToRight: '右側に固定', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: '固定解除', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/koKR.ts b/packages/grid/x-data-grid/src/locales/koKR.ts index 9b3a5224a8e7..68faf90ad96e 100644 --- a/packages/grid/x-data-grid/src/locales/koKR.ts +++ b/packages/grid/x-data-grid/src/locales/koKR.ts @@ -123,6 +123,8 @@ const koKRGrid: Partial = { // Column pinning text pinToLeft: '왼쪽에 고정', pinToRight: '오른쪽에 고정', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: '고정 해제', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/nbNO.ts b/packages/grid/x-data-grid/src/locales/nbNO.ts index 4316b2ed365d..7baf134df70b 100644 --- a/packages/grid/x-data-grid/src/locales/nbNO.ts +++ b/packages/grid/x-data-grid/src/locales/nbNO.ts @@ -126,6 +126,8 @@ const nbNOGrid: Partial = { // Column pinning text pinToLeft: 'Fest til venstre', pinToRight: 'Fest til høyre', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Løsne', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/nlNL.ts b/packages/grid/x-data-grid/src/locales/nlNL.ts index 8cbff1044b81..1476a39a9b49 100644 --- a/packages/grid/x-data-grid/src/locales/nlNL.ts +++ b/packages/grid/x-data-grid/src/locales/nlNL.ts @@ -128,6 +128,8 @@ const nlNLGrid: Partial = { // Column pinning text pinToLeft: 'Links vastzetten', pinToRight: 'Rechts vastzetten', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Losmaken', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/plPL.ts b/packages/grid/x-data-grid/src/locales/plPL.ts index 0d8482acee06..9478df3a3ee5 100644 --- a/packages/grid/x-data-grid/src/locales/plPL.ts +++ b/packages/grid/x-data-grid/src/locales/plPL.ts @@ -123,6 +123,8 @@ const plPLGrid: Partial = { // Column pinning text pinToLeft: 'Przypnij do lewej', pinToRight: 'Przypnij do prawej', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Odepnij', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/ptBR.ts b/packages/grid/x-data-grid/src/locales/ptBR.ts index aed969a35794..4bb10658e4c6 100644 --- a/packages/grid/x-data-grid/src/locales/ptBR.ts +++ b/packages/grid/x-data-grid/src/locales/ptBR.ts @@ -128,6 +128,8 @@ const ptBRGrid: Partial = { // Column pinning text pinToLeft: 'Fixar à esquerda', pinToRight: 'Fixar à direita', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Desafixar', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/roRO.ts b/packages/grid/x-data-grid/src/locales/roRO.ts index d0793fe42af1..7b45f458d640 100644 --- a/packages/grid/x-data-grid/src/locales/roRO.ts +++ b/packages/grid/x-data-grid/src/locales/roRO.ts @@ -128,6 +128,8 @@ const roROGrid: Partial = { // Column pinning text pinToLeft: 'Fixare în stânga', pinToRight: 'Fixare în dreapta', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Anulare fixare', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/ruRU.ts b/packages/grid/x-data-grid/src/locales/ruRU.ts index 2f85742da435..9fd675cb53ce 100644 --- a/packages/grid/x-data-grid/src/locales/ruRU.ts +++ b/packages/grid/x-data-grid/src/locales/ruRU.ts @@ -156,6 +156,8 @@ const ruRUGrid: Partial = { // Column pinning text pinToLeft: 'Закрепить слева', pinToRight: 'Закрепить справа', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Открепить', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/skSK.ts b/packages/grid/x-data-grid/src/locales/skSK.ts index 6cb60ec1944a..802bbb3a8beb 100644 --- a/packages/grid/x-data-grid/src/locales/skSK.ts +++ b/packages/grid/x-data-grid/src/locales/skSK.ts @@ -160,6 +160,8 @@ const skSKGrid: Partial = { // Column pinning text pinToLeft: 'Pripnúť na ľavo', pinToRight: 'Pripnúť na pravo', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Odopnúť', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/svSE.ts b/packages/grid/x-data-grid/src/locales/svSE.ts index dd83ce0ccc29..89e83fa8c9c4 100644 --- a/packages/grid/x-data-grid/src/locales/svSE.ts +++ b/packages/grid/x-data-grid/src/locales/svSE.ts @@ -128,6 +128,8 @@ const svSEGrid: Partial = { // Column pinning text pinToLeft: 'Fäst till vänster', pinToRight: 'Fäst till höger', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Ta bort fäste', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/trTR.ts b/packages/grid/x-data-grid/src/locales/trTR.ts index bd28dc27cdee..06b1e488ce7e 100644 --- a/packages/grid/x-data-grid/src/locales/trTR.ts +++ b/packages/grid/x-data-grid/src/locales/trTR.ts @@ -123,6 +123,8 @@ const trTRGrid: Partial = { // Column pinning text pinToLeft: 'Sola sabitle', pinToRight: 'Sağa sabitle', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Sabitlemeyi kaldır', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/ukUA.ts b/packages/grid/x-data-grid/src/locales/ukUA.ts index 9b176cb8bfad..46a371606b18 100644 --- a/packages/grid/x-data-grid/src/locales/ukUA.ts +++ b/packages/grid/x-data-grid/src/locales/ukUA.ts @@ -157,6 +157,8 @@ const ukUAGrid: Partial = { // Column pinning text pinToLeft: 'Закріпити ліворуч', pinToRight: 'Закріпити праворуч', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Відкріпити', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/viVN.ts b/packages/grid/x-data-grid/src/locales/viVN.ts index fd0417df0aab..ec29b48f2eac 100644 --- a/packages/grid/x-data-grid/src/locales/viVN.ts +++ b/packages/grid/x-data-grid/src/locales/viVN.ts @@ -126,6 +126,8 @@ const viVNGrid: Partial = { // Column pinning text pinToLeft: 'Ghim cột bên trái', pinToRight: 'Ghim cột bên phải', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: 'Bỏ ghim', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/zhCN.ts b/packages/grid/x-data-grid/src/locales/zhCN.ts index 5ce5c15d36bc..0ead3d0d19be 100644 --- a/packages/grid/x-data-grid/src/locales/zhCN.ts +++ b/packages/grid/x-data-grid/src/locales/zhCN.ts @@ -124,6 +124,8 @@ const zhCNGrid: Partial = { // Column pinning text pinToLeft: '固定到左侧', pinToRight: '固定到右侧', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: '取消固定', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/zhTW.ts b/packages/grid/x-data-grid/src/locales/zhTW.ts index 98c63c87b8c3..7d7803f0b8a3 100644 --- a/packages/grid/x-data-grid/src/locales/zhTW.ts +++ b/packages/grid/x-data-grid/src/locales/zhTW.ts @@ -123,6 +123,8 @@ const zhTWGrid: Partial = { // Column pinning text pinToLeft: '釘選在左側', pinToRight: '釘選在右側', + // pinToLeftDefault: 'Left', + // pinToRightDefault: 'Right', unpin: '取消釘選', // Tree Data From eb8110e916c8533031a1c7ee45d1f12b2b6d8dd5 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sat, 5 Nov 2022 16:30:11 +0500 Subject: [PATCH 023/104] Fixes a typo and types --- docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx | 2 +- .../x-data-grid-premium/src/models/dataGridPremiumProps.ts | 2 +- packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts | 2 +- .../menu/columnMenu/default/GridColumnMenuDefault.tsx | 3 ++- .../components/menu/columnMenu/simple/GridColumnMenuSimple.tsx | 2 +- 5 files changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx index e3657a44743a..4252133f0b0e 100644 --- a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx +++ b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx @@ -9,7 +9,7 @@ import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; declare module '@mui/x-data-grid' { - interface GridColumnMenuSlotOverrides { + interface GridColumnMenuKeysOverrides { closeMenu: true; } } diff --git a/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts b/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts index e3a8e8e62c77..522603c8fe33 100644 --- a/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts +++ b/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts @@ -46,7 +46,7 @@ export interface DataGridPremiumProps export interface DataGridPremiumPropsWithComplexDefaultValueAfterProcessing extends Pick { - components?: Partial; + components: Partial; } /** diff --git a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts index ff8813cfcfb6..a2a4652a82ea 100644 --- a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts +++ b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts @@ -54,7 +54,7 @@ export interface DataGridProProps interface DataGridProPropsWithComplexDefaultValueAfterProcessing extends Omit { - components?: Partial; + components: Partial; } /** diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx index 1cf3c999e546..a194b8a8e93a 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx @@ -25,7 +25,8 @@ const defaultVisibleItems: Array = [ const GridColumnMenuDefault = React.forwardRef( function GridColumnMenuDefault(props: GridColumnMenuDefaultProps, ref) { - // TODO: Fix typing + // TODO: Figure out a workaround + // @ts-ignore as it's not getting proper types due to overrides from Pro/Premium const defaultMenuItems: GridColumnMenuValue['items'] = { sorting: , filter: , diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index 4eac41dc8d81..e338f3c818c1 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -36,7 +36,7 @@ const GridColumnMenuSimple = React.forwardRef( return ( Date: Mon, 7 Nov 2022 14:34:11 +0500 Subject: [PATCH 024/104] Updates docs and resolves comments --- .../column-menu/ColumnMenuGridPro.js | 4 +- .../data/data-grid/column-menu/column-menu.md | 50 ++++++++-- .../GridAggregationColumnMenuItem.tsx | 67 ++++++++------ .../GridAggregationColumnMenuSimpleItem.tsx | 92 ------------------- ...GridRowGroupableColumnMenuItemsSimple.tsx} | 6 +- .../GridRowGroupingColumnMenuItems.tsx | 4 +- ... GridRowGroupingColumnMenuItemsSimple.tsx} | 6 +- .../src/components/index.ts | 5 + .../dataGridPremiumDefaultSlotsComponents.ts | 7 +- ...x => GridColumnPinningMenuItemsSimple.tsx} | 6 +- .../x-data-grid-pro/src/components/index.ts | 1 + .../src/models/dataGridProProps.ts | 2 +- 12 files changed, 106 insertions(+), 144 deletions(-) delete mode 100644 packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuSimpleItem.tsx rename packages/grid/x-data-grid-premium/src/components/{GridRowGroupableColumnMenuSimpleItems.tsx => GridRowGroupableColumnMenuItemsSimple.tsx} (92%) rename packages/grid/x-data-grid-premium/src/components/{GridRowGroupingColumnMenuSimpleItems.tsx => GridRowGroupingColumnMenuItemsSimple.tsx} (92%) rename packages/grid/x-data-grid-pro/src/components/{GridColumnPinningMenuSimpleItems.tsx => GridColumnPinningMenuItemsSimple.tsx} (93%) diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridPro.js b/docs/data/data-grid/column-menu/ColumnMenuGridPro.js index 91d4fee9726b..12152dd262b1 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridPro.js +++ b/docs/data/data-grid/column-menu/ColumnMenuGridPro.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DataGridPremium } from '@mui/x-data-grid-premium'; +import { DataGridPremium, GridColumnMenuSimple } from '@mui/x-data-grid-premium'; import { useDemoData } from '@mui/x-data-grid-generator'; export default function ColumnMenuGridPro() { @@ -11,7 +11,7 @@ export default function ColumnMenuGridPro() { return (
- +
); } diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index bf82621ce803..263ff3921fb6 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -20,12 +20,6 @@ By default, each column header has the column menu enabled. To disable the colum {{"demo": "DisabledColumnMenuGrid.js", "bg": "inline"}} -## Simple column menu - -You can replace the default column menu with a simplified one using `GridColumnMenuSimple` component. - -{{"demo": "SimpleColumnMenuGrid.js", "bg": "inline"}} - ## Customise column menu items You can also customise column menu based on some conditions. Every item in the menu is assigned a `key` which serves as a unique identifier of that item using which it's possible to: @@ -84,7 +78,7 @@ If you're using TypeScript, for new items that you are adding, you'll need to sp ```tsx declare module '@mui/x-data-grid' { - interface GridColumnMenuSlotOverrides { + interface GridColumnMenuKeysOverrides { closeMenu: true; } } @@ -92,7 +86,7 @@ declare module '@mui/x-data-grid' { ### Default column menu items -Default slots for **DataGrid** are `filter`, `sorting`, `hideColumn`, `divider` and `manageColumns`, wheras **DataGridPro** adds `pinning` and **DataGridPremium** adds `grouping` and `aggregation` on top of them. +Default `keys` for **DataGrid** are `filter`, `sorting`, `hideColumn`, `divider` and `manageColumns`, wheras **DataGridPro** adds `pinning` and **DataGridPremium** adds `grouping` and `aggregation` on top of them. Here's a demo overriding some existing items, adding some new items and displaying different items for a column. @@ -104,6 +98,46 @@ You can access commercial features like column pinning etc from the column menu {{"demo": "ColumnMenuGridPro.js", "bg": "inline"}} +## Simple column menu + +You can replace the default column menu with a simplified one using `GridColumnMenuSimple` component. + +{{"demo": "SimpleColumnMenuGrid.js", "bg": "inline"}} + +For _Pro_ and _Premium_ packages you have specific `slot` for each of the column menu item using which you can import simple variant or pass on your own component, or you can also use [column menu customizing](#customise-column-menu-items) to use your custom component based on item `key`. + +Here's a list of column menu items and their overridable slots for Commercial features. + +| **Item** | **Package** | **Key** | **Slot** | **Default** | +| ----------------------- | ----------- | ------------- | ---------------------------- | ------------------------------- | +| Pinning | Pro | 'pinning' | 'ColumnMenuPinningItem' | GridColumnPinningMenuItems | +| Groupable (not grouped) | Premium | 'grouping' | 'ColumnMenuRowGroupableItem' | GridRowGroupableColumnMenuItems | +| Grouping (grouped) | Premium | 'grouping' | 'ColumnMenuRowGroupingItem' | GridRowGroupingColumnMenuItems | +| Aggregation | Premium | 'aggregation' | 'ColumnMenuAggregationItem' | GridAggregationColumnMenuItem | + +This example is using simple Column Menu for basic menu and overriding some slots for premium items and customizing the display order and the items shown. + +```tsx + [ + 'pinning', + 'sorting', + 'filter', + 'aggregation', + ], + }, + }} + components={{ + ColumnMenu: GridColumnMenuSimple, + ColumnMenuPinningItem: GridColumnPinningMenuItemsSimple, + ColumnMenuAggregationItem: SomeCustomAggregationComponent, + }} +/> +``` + ## API - [DataGrid](/x/api/data-grid/data-grid/) diff --git a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx index 3780895416a4..c485c30dca90 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx @@ -26,7 +26,7 @@ const StyledStack = styled(Stack)(({ theme }) => ({ padding: theme.spacing(1, 1.5, 1, 1.5), })); -export const GridAggregationColumnMenuItem = (props: GridAggregationColumnMenuItemsProps) => { +const GridAggregationColumnMenuItemRoot = (props: GridAggregationColumnMenuItemsProps) => { const { column, label, availableAggregationFunctions } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -65,33 +65,42 @@ export const GridAggregationColumnMenuItem = (props: GridAggregationColumnMenuIt }; return ( - - - {label} - - - + + {label} + + ); }; + +export const GridAggregationColumnMenuItem = (props: GridAggregationColumnMenuItemsProps) => ( + + + +); +export const GridAggregationColumnMenuItemSimple = (props: GridAggregationColumnMenuItemsProps) => ( + + + +); diff --git a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuSimpleItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuSimpleItem.tsx deleted file mode 100644 index 987650c4913c..000000000000 --- a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuSimpleItem.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import * as React from 'react'; -import { GridColDef, useGridSelector } from '@mui/x-data-grid-pro'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import InputLabel from '@mui/material/InputLabel'; -import { unstable_useId as useId } from '@mui/material/utils'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import { useGridApiContext } from '../hooks/utils/useGridApiContext'; -import { useGridRootProps } from '../hooks/utils/useGridRootProps'; -import { - canColumnHaveAggregationFunction, - getAggregationFunctionLabel, -} from '../hooks/features/aggregation/gridAggregationUtils'; -import { gridAggregationModelSelector } from '../hooks/features/aggregation/gridAggregationSelectors'; -import { GridAggregationModel } from '../hooks/features/aggregation/gridAggregationInterfaces'; - -interface GridAggregationColumnMenuItemsProps { - column: GridColDef; - label: string; - availableAggregationFunctions: string[]; -} - -export const GridAggregationColumnMenuSimpleItem = (props: GridAggregationColumnMenuItemsProps) => { - const { column, label, availableAggregationFunctions } = props; - const apiRef = useGridApiContext(); - const rootProps = useGridRootProps(); - const id = useId(); - const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector); - - const selectedAggregationRule = React.useMemo(() => { - if (!column || !aggregationModel[column.field]) { - return ''; - } - - const aggregationFunctionName = aggregationModel[column.field]; - if ( - canColumnHaveAggregationFunction({ - column, - aggregationFunctionName, - aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName], - }) - ) { - return aggregationFunctionName; - } - - return ''; - }, [rootProps.aggregationFunctions, aggregationModel, column]); - - const handleAggregationItemChange = (event: SelectChangeEvent) => { - const newAggregationItem = event.target?.value || undefined; - const currentModel = gridAggregationModelSelector(apiRef); - const { [column.field]: columnItem, ...otherColumnItems } = currentModel; - const newModel: GridAggregationModel = - newAggregationItem == null - ? otherColumnItems - : { ...otherColumnItems, [column.field]: newAggregationItem }; - - apiRef.current.setAggregationModel(newModel); - apiRef.current.hideColumnMenu(); - }; - - return ( - - - {label} - - - - ); -}; diff --git a/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuSimpleItems.tsx b/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItemsSimple.tsx similarity index 92% rename from packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuSimpleItems.tsx rename to packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItemsSimple.tsx index c2e49d405438..034c07297c78 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuSimpleItems.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItemsSimple.tsx @@ -10,7 +10,7 @@ interface GridRowGroupableColumnMenuItemsProps { onClick?: (event: React.MouseEvent) => void; } -const GridRowGroupableColumnMenuSimpleItems = (props: GridRowGroupableColumnMenuItemsProps) => { +const GridRowGroupableColumnMenuItemsSimple = (props: GridRowGroupableColumnMenuItemsProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector); @@ -49,7 +49,7 @@ const GridRowGroupableColumnMenuSimpleItems = (props: GridRowGroupableColumnMenu ); }; -GridRowGroupableColumnMenuSimpleItems.propTypes = { +GridRowGroupableColumnMenuItemsSimple.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -58,4 +58,4 @@ GridRowGroupableColumnMenuSimpleItems.propTypes = { onClick: PropTypes.func, } as any; -export { GridRowGroupableColumnMenuSimpleItems }; +export { GridRowGroupableColumnMenuItemsSimple }; diff --git a/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItems.tsx b/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItems.tsx index f1fd945a7965..41059343fb3d 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItems.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItems.tsx @@ -46,12 +46,14 @@ const GridRowGroupingColumnMenuItems = (props: GridRowGroupingColumnMenuItemsPro const name = columnsLookup[field].headerName ?? field; + const ColumnMenuUngroupIcon = rootProps.components.ColumnMenuUngroupIcon; + return ( } + startIcon={ColumnMenuUngroupIcon ? : null} color="inherit" > {apiRef.current.getLocaleText('unGroupColumn')(name)} diff --git a/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuSimpleItems.tsx b/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItemsSimple.tsx similarity index 92% rename from packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuSimpleItems.tsx rename to packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItemsSimple.tsx index 90e6757d5eb8..6d534c3d51f4 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuSimpleItems.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItemsSimple.tsx @@ -15,7 +15,7 @@ interface GridRowGroupingColumnMenuItemsProps { onClick?: (event: React.MouseEvent) => void; } -const GridRowGroupingColumnMenuSimpleItems = (props: GridRowGroupingColumnMenuItemsProps) => { +const GridRowGroupingColumnMenuItemsSimple = (props: GridRowGroupingColumnMenuItemsProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector); @@ -49,7 +49,7 @@ const GridRowGroupingColumnMenuSimpleItems = (props: GridRowGroupingColumnMenuIt return renderUnGroupingMenuItem(getRowGroupingCriteriaFromGroupingField(column.field)!); }; -GridRowGroupingColumnMenuSimpleItems.propTypes = { +GridRowGroupingColumnMenuItemsSimple.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -58,4 +58,4 @@ GridRowGroupingColumnMenuSimpleItems.propTypes = { onClick: PropTypes.func, } as any; -export { GridRowGroupingColumnMenuSimpleItems }; +export { GridRowGroupingColumnMenuItemsSimple }; diff --git a/packages/grid/x-data-grid-premium/src/components/index.ts b/packages/grid/x-data-grid-premium/src/components/index.ts index 0d67fcb043c0..7d08be69f7cd 100644 --- a/packages/grid/x-data-grid-premium/src/components/index.ts +++ b/packages/grid/x-data-grid-premium/src/components/index.ts @@ -1,2 +1,7 @@ export * from './GridExcelExportMenuItem'; export * from './icons'; +export * from './GridAggregationColumnMenuItem'; +export * from './GridRowGroupingColumnMenuItems'; +export * from './GridRowGroupableColumnMenuItems'; +export * from './GridRowGroupingColumnMenuItemsSimple'; +export * from './GridRowGroupableColumnMenuItemsSimple'; diff --git a/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts b/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts index 2a51bc38865a..29816ffd59c2 100644 --- a/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts +++ b/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts @@ -1,7 +1,10 @@ import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid-pro'; import { GridPremiumSlotsComponent, GridPremiumIconSlotsComponent } from '../models'; -import { GridWorkspacesIcon, GridGroupWorkIcon } from '../components'; -import { GridAggregationColumnMenuItem } from '../components/GridAggregationColumnMenuItem'; +import { + GridWorkspacesIcon, + GridGroupWorkIcon, + GridAggregationColumnMenuItem, +} from '../components'; import { GridRowGroupableColumnMenuItems } from '../components/GridRowGroupableColumnMenuItems'; import { GridRowGroupingColumnMenuItems } from '../components/GridRowGroupingColumnMenuItems'; diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuSimpleItems.tsx b/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItemsSimple.tsx similarity index 93% rename from packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuSimpleItems.tsx rename to packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItemsSimple.tsx index 651712445040..70a6d536e5b6 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuSimpleItems.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItemsSimple.tsx @@ -10,7 +10,7 @@ interface GridColumnPinningMenuItemsProps { onClick?: (event: React.MouseEvent) => void; } -const GridColumnPinningMenuSimpleItems = (props: GridColumnPinningMenuItemsProps) => { +const GridColumnPinningMenuItemsSimple = (props: GridColumnPinningMenuItemsProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); @@ -61,7 +61,7 @@ const GridColumnPinningMenuSimpleItems = (props: GridColumnPinningMenuItemsProps ); }; -GridColumnPinningMenuSimpleItems.propTypes = { +GridColumnPinningMenuItemsSimple.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -70,4 +70,4 @@ GridColumnPinningMenuSimpleItems.propTypes = { onClick: PropTypes.func, } as any; -export { GridColumnPinningMenuSimpleItems }; +export { GridColumnPinningMenuItemsSimple }; diff --git a/packages/grid/x-data-grid-pro/src/components/index.ts b/packages/grid/x-data-grid-pro/src/components/index.ts index 80e9140ddcb9..543d5a5ad2da 100644 --- a/packages/grid/x-data-grid-pro/src/components/index.ts +++ b/packages/grid/x-data-grid-pro/src/components/index.ts @@ -1,5 +1,6 @@ // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro` export * from './GridTreeDataGroupingCell'; export * from './GridColumnPinningMenuItems'; +export * from './GridColumnPinningMenuItemsSimple'; export * from './GridDetailPanelToggleCell'; export * from './icons'; diff --git a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts index a2a4652a82ea..6f9022c1671c 100644 --- a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts +++ b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts @@ -38,7 +38,7 @@ export interface GridExperimentalProFeatures extends GridExperimentalFeatures { interface DataGridProPropsWithComplexDefaultValueBeforeProcessing extends Omit { - components?: GridProSlotsComponent; + components?: Partial; } /** From b4d4270640f439ffa107ecfbef6a6020e64a2001 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Mon, 7 Nov 2022 14:50:51 +0500 Subject: [PATCH 025/104] Fixes types --- .../grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts | 2 +- packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts | 2 +- packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts b/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts index 522603c8fe33..cfe9837cd445 100644 --- a/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts +++ b/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts @@ -46,7 +46,7 @@ export interface DataGridPremiumProps export interface DataGridPremiumPropsWithComplexDefaultValueAfterProcessing extends Pick { - components: Partial; + components: GridPremiumSlotsComponent; } /** diff --git a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts index 6f9022c1671c..481e467fe360 100644 --- a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts +++ b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts @@ -54,7 +54,7 @@ export interface DataGridProProps interface DataGridProPropsWithComplexDefaultValueAfterProcessing extends Omit { - components: Partial; + components: GridProSlotsComponent; } /** diff --git a/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts b/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts index fce0fef7d8fa..5b5284b01a8f 100644 --- a/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts +++ b/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts @@ -1 +1 @@ -export { insertItemsInColumnMenu } from './insertItemsInColumnMenu'; +export * from './insertItemsInColumnMenu'; From 7827a64c2288a390a1a9d196c9732a2d1ddb51c9 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 8 Nov 2022 16:21:53 +0500 Subject: [PATCH 026/104] Resolves some comments and refactors a few codeblocks --- .../column-menu/ColumnMenuGrid.tsx.preview | 1 + .../column-menu/ColumnMenuGridPro.js | 4 +- .../column-menu/FilterColumnMenuGrid.js | 4 +- .../column-menu/FilterColumnMenuGrid.tsx | 4 +- .../SimpleColumnMenuGrid.tsx.preview | 4 +- .../data/data-grid/column-menu/column-menu.md | 32 +- .../x/api/data-grid/data-grid-premium.json | 41 + docs/pages/x/api/data-grid/data-grid-pro.json | 78 +- docs/pages/x/api/data-grid/data-grid.json | 15 + docs/pages/x/api/data-grid/grid-col-def.md | 79 +- .../data-grid/data-grid-premium-pt.json | 18 +- .../data-grid/data-grid-premium-zh.json | 18 +- .../api-docs/data-grid/data-grid-premium.json | 18 +- .../api-docs/data-grid/data-grid-pro-pt.json | 54 +- .../api-docs/data-grid/data-grid-pro-zh.json | 54 +- .../api-docs/data-grid/data-grid-pro.json | 54 +- .../api-docs/data-grid/data-grid-pt.json | 8 +- .../api-docs/data-grid/data-grid-zh.json | 8 +- .../api-docs/data-grid/data-grid.json | 8 +- .../GridAggregationColumnMenuItem.tsx | 106 - .../GridColumnMenuAggregationItem.tsx | 6646 +++++++++++++++++ ...ems.tsx => GridColumnMenuRowGroupItem.tsx} | 25 +- ...x => GridColumnMenuRowGroupItemSimple.tsx} | 19 +- ...s.tsx => GridColumnMenuRowUngroupItem.tsx} | 30 +- ...=> GridColumnMenuRowUngroupItemSimple.tsx} | 17 +- .../src/components/index.ts | 10 +- .../dataGridPremiumDefaultSlotsComponents.ts | 12 +- .../useGridAggregationPreProcessors.tsx | 6 +- .../src/hooks/features/rowGrouping/index.ts | 1 + .../rowGrouping/useGridRowGrouping.tsx | 12 +- .../src/models/gridPremiumSlotsComponent.ts | 16 +- ...tems.tsx => GridColumnMenuPinningItem.tsx} | 26 +- ...sx => GridColumnMenuPinningItemSimple.tsx} | 13 +- .../x-data-grid-pro/src/components/index.ts | 4 +- .../dataGridProDefaultSlotsComponents.ts | 4 +- .../columnPinning/useGridColumnPinning.tsx | 4 +- .../src/models/gridProSlotsComponent.ts | 2 +- .../columnMenu/insertItemsInColumnMenu.ts | 6 +- .../menu/columnMenu/GridColumnMenu.tsx | 42 +- .../menu/columnMenu/GridColumnMenuProps.ts | 12 +- ...Item.tsx => GridColumnMenuColumnsItem.tsx} | 6 +- .../default/GridColumnMenuContainer.tsx | 2 +- .../default/GridColumnMenuDefault.tsx | 22 +- ...uItem.tsx => GridColumnMenuFilterItem.tsx} | 38 +- ...enuItem.tsx => GridColumnMenuHideItem.tsx} | 12 +- ...nuItems.tsx => GridColumnMenuSortItem.tsx} | 12 +- .../menu/columnMenu/default/index.ts | 11 +- ...sx => GridColumnMenuColumnsItemSimple.tsx} | 6 +- ...tsx => GridColumnMenuFilterItemSimple.tsx} | 6 +- ...m.tsx => GridColumnMenuHideItemSimple.tsx} | 6 +- .../simple/GridColumnMenuSimple.tsx | 21 +- ...s.tsx => GridColumnMenuSortItemSimple.tsx} | 6 +- .../menu/columnMenu/simple/index.ts | 13 +- .../columnMenu/columnMenuInterfaces.ts | 26 +- .../src/models/colDef/gridColDef.ts | 11 +- scripts/x-data-grid-premium.exports.json | 49 +- scripts/x-data-grid-pro.exports.json | 38 +- scripts/x-data-grid.exports.json | 27 +- 58 files changed, 7170 insertions(+), 657 deletions(-) create mode 100644 docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview delete mode 100644 packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx create mode 100644 packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx rename packages/grid/x-data-grid-premium/src/components/{GridRowGroupingColumnMenuItems.tsx => GridColumnMenuRowGroupItem.tsx} (82%) rename packages/grid/x-data-grid-premium/src/components/{GridRowGroupingColumnMenuItemsSimple.tsx => GridColumnMenuRowGroupItemSimple.tsx} (81%) rename packages/grid/x-data-grid-premium/src/components/{GridRowGroupableColumnMenuItems.tsx => GridColumnMenuRowUngroupItem.tsx} (76%) rename packages/grid/x-data-grid-premium/src/components/{GridRowGroupableColumnMenuItemsSimple.tsx => GridColumnMenuRowUngroupItemSimple.tsx} (80%) rename packages/grid/x-data-grid-pro/src/components/{GridColumnPinningMenuItems.tsx => GridColumnMenuPinningItem.tsx} (78%) rename packages/grid/x-data-grid-pro/src/components/{GridColumnPinningMenuItemsSimple.tsx => GridColumnMenuPinningItemSimple.tsx} (85%) rename packages/grid/x-data-grid/src/components/menu/columnMenu/default/{GridColumnsMenuItem.tsx => GridColumnMenuColumnsItem.tsx} (91%) rename packages/grid/x-data-grid/src/components/menu/columnMenu/default/{GridFilterMenuItem.tsx => GridColumnMenuFilterItem.tsx} (70%) rename packages/grid/x-data-grid/src/components/menu/columnMenu/default/{HideGridColMenuItem.tsx => GridColumnMenuHideItem.tsx} (90%) rename packages/grid/x-data-grid/src/components/menu/columnMenu/default/{SortGridMenuItems.tsx => GridColumnMenuSortItem.tsx} (90%) rename packages/grid/x-data-grid/src/components/menu/columnMenu/simple/{GridColumnsMenuSimpleItem.tsx => GridColumnMenuColumnsItemSimple.tsx} (89%) rename packages/grid/x-data-grid/src/components/menu/columnMenu/simple/{GridFilterMenuSimpleItem.tsx => GridColumnMenuFilterItemSimple.tsx} (88%) rename packages/grid/x-data-grid/src/components/menu/columnMenu/simple/{HideGridColMenuSimpleItem.tsx => GridColumnMenuHideItemSimple.tsx} (93%) rename packages/grid/x-data-grid/src/components/menu/columnMenu/simple/{SortGridMenuSimpleItems.tsx => GridColumnMenuSortItemSimple.tsx} (93%) diff --git a/docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview b/docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview new file mode 100644 index 000000000000..4eba0f23a52f --- /dev/null +++ b/docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridPro.js b/docs/data/data-grid/column-menu/ColumnMenuGridPro.js index 12152dd262b1..91d4fee9726b 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridPro.js +++ b/docs/data/data-grid/column-menu/ColumnMenuGridPro.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DataGridPremium, GridColumnMenuSimple } from '@mui/x-data-grid-premium'; +import { DataGridPremium } from '@mui/x-data-grid-premium'; import { useDemoData } from '@mui/x-data-grid-generator'; export default function ColumnMenuGridPro() { @@ -11,7 +11,7 @@ export default function ColumnMenuGridPro() { return (
- +
); } diff --git a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js index 8b464717d0f5..139e08d94d06 100644 --- a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DataGrid, GridFilterMenuSimpleItem } from '@mui/x-data-grid'; +import { DataGrid, GridColumnMenuFilterItemSimple } from '@mui/x-data-grid'; import { useDemoData } from '@mui/x-data-grid-generator'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; @@ -14,7 +14,7 @@ const MenuCloseComponent = (props) => { const FilterComponent = (props) => ( - + ); diff --git a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx index 4252133f0b0e..8ba4a887718b 100644 --- a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx +++ b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { DataGrid, - GridFilterMenuSimpleItem, + GridColumnMenuFilterItemSimple, GridColumnMenuItemProps, } from '@mui/x-data-grid'; import { useDemoData } from '@mui/x-data-grid-generator'; @@ -24,7 +24,7 @@ const MenuCloseComponent = (props: GridColumnMenuItemProps) => { const FilterComponent = (props: GridColumnMenuItemProps) => ( - + ); diff --git a/docs/data/data-grid/column-menu/SimpleColumnMenuGrid.tsx.preview b/docs/data/data-grid/column-menu/SimpleColumnMenuGrid.tsx.preview index bc4f43936b35..877066130fd7 100644 --- a/docs/data/data-grid/column-menu/SimpleColumnMenuGrid.tsx.preview +++ b/docs/data/data-grid/column-menu/SimpleColumnMenuGrid.tsx.preview @@ -1,3 +1 @@ -import { GridColumnMenuSimple } from '@mui/x-data-grid' - - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index 263ff3921fb6..b315afdc00a4 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -31,7 +31,18 @@ You can also customise column menu based on some conditions. Every item in the m For that purpose you can use `getVisibleColumnMenuItems` and `columnMenuItems`. -**getVisibleColumnMenuItems**: It is available in both `GridColDef` and `componentsProps.columnMenu`, it receives keys of all registered items and should return a _filtered_ and _ordered_ list of keys that are needed to be shown. It can be used either per-column basis by passing in `GridColDef` or for the whole Grid by passing in `componentsProps.columnMenu`. If you have it in both, the preference will be given to the `GridColDef` one. +**getVisibleColumnMenuItems**: It is available in both `GridColDef` and `componentsProps.columnMenu`, it receives `column`, `itemKeys` and `visibleItemKeys` and should return a _filtered_ and _ordered_ list of keys that are needed to be shown. It can be used either per-column basis by passing in `GridColDef` or for the whole Grid by passing in `componentsProps.columnMenu`. If you have it in both, the preference will be given to the `GridColDef` one. + +```tsx +interface GetVisibleColumnMenuItemsArgs { + visibleItemKeys: Array; // keys of currently visible items + itemKeys: Array; // keys of default menu items + column: GridColDef; // current column +} + +getVisibleColumnMenuItems?: (args: GetVisibleColumnMenuItemsArgs) + => Array; +``` **columnMenuItems**: It could be used to override or register new items to the menu. You can simply pass the object with existing or new items and they will be updated/added to the grid. @@ -66,7 +77,10 @@ const columnMenuItems = { }; // add new item in visible items and append it to the last of list -const getVisibleColumnMenuItems = (defaultItems) => [...defaultItems, 'closeMenu']; +const getVisibleColumnMenuItems = ({ visibleItemKeys }) => [ + ...visibleItemKeys, + 'closeMenu', +]; 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 14e19a0fc0b6..019a21cb6cc7 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -266,10 +266,51 @@ "type": { "name": "elementType" } }, "ColumnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } }, + "ColumnMenuAggregationItem": { + "default": "GridColumnMenuAggregationItem", + "type": { "name": "elementType" } + }, + "ColumnMenuClearIcon": { "default": "GridClearIcon", "type": { "name": "elementType" } }, + "ColumnMenuFilterIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, + "ColumnMenuGroupIcon": { "default": "GridGroupWorkIcon", "type": { "name": "elementType" } }, + "ColumnMenuHideIcon": { "default": "GridVisibilityOffIcon", "type": { "name": "elementType" } }, "ColumnMenuIcon": { "default": "GridTripleDotsVerticalIcon", "type": { "name": "elementType" } }, + "ColumnMenuManageColumnsIcon": { + "default": "GridViewColumnIcon", + "type": { "name": "elementType" } + }, + "ColumnMenuPinLeftIcon": { + "default": "GridPushPinLeftIcon", + "type": { "name": "elementType" } + }, + "ColumnMenuPinningItem": { + "default": "GridColumnMenuPinningItems", + "type": { "name": "elementType" } + }, + "ColumnMenuPinRightIcon": { + "default": "GridPushPinRightIcon", + "type": { "name": "elementType" } + }, + "ColumnMenuRowGroupItem": { + "default": "GridColumnMenuRowGroupItem", + "type": { "name": "elementType" } + }, + "ColumnMenuRowUngroupItem": { + "default": "GridColumnMenuRowUngroupItem", + "type": { "name": "elementType" } + }, + "ColumnMenuSortAscendingIcon": { + "default": "GridArrowUpwardIcon", + "type": { "name": "elementType" } + }, + "ColumnMenuSortDescendingIcon": { + "default": "GridArrowDownwardIcon", + "type": { "name": "elementType" } + }, + "ColumnMenuUngroupIcon": { "default": "GridWorkspacesIcon", "type": { "name": "elementType" } }, "ColumnResizeIcon": { "default": "GridSeparatorIcon", "type": { "name": "elementType" } }, "ColumnSelectorIcon": { "default": "GridColumnIcon", "type": { "name": "elementType" } }, "ColumnSortedAscendingIcon": { 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 28e677fd89e1..cd958a124ec0 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -24,7 +24,6 @@ "columnThreshold": { "type": { "name": "number" }, "default": "3" }, "columnTypes": { "type": { "name": "object" } }, "columnVisibilityModel": { "type": { "name": "object" } }, - "components": { "type": { "name": "object" } }, "componentsProps": { "type": { "name": "object" } }, "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" }, "density": { @@ -226,82 +225,7 @@ "throttleRowsMs": { "type": { "name": "number" }, "default": "0" }, "treeData": { "type": { "name": "bool" } } }, - "slots": { - "BaseButton": { "default": "Button", "type": { "name": "elementType" } }, - "BaseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } }, - "BaseFormControl": { "default": "FormControl", "type": { "name": "elementType" } }, - "BasePopper": { "default": "Popper", "type": { "name": "elementType" } }, - "BaseSelect": { "default": "Select", "type": { "name": "elementType" } }, - "BaseSwitch": { "default": "Switch", "type": { "name": "elementType" } }, - "BaseTextField": { "default": "TextField", "type": { "name": "elementType" } }, - "BaseTooltip": { "default": "Tooltip", "type": { "name": "elementType" } }, - "BooleanCellFalseIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } }, - "BooleanCellTrueIcon": { "default": "GridCheckIcon", "type": { "name": "elementType" } }, - "Cell": { "default": "GridCell", "type": { "name": "elementType" } }, - "ColumnFilteredIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, - "ColumnHeaderFilterIconButton": { - "default": "GridColumnHeaderFilterIconButton", - "type": { "name": "elementType" } - }, - "ColumnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } }, - "ColumnMenuIcon": { - "default": "GridTripleDotsVerticalIcon", - "type": { "name": "elementType" } - }, - "ColumnResizeIcon": { "default": "GridSeparatorIcon", "type": { "name": "elementType" } }, - "ColumnSelectorIcon": { "default": "GridColumnIcon", "type": { "name": "elementType" } }, - "ColumnSortedAscendingIcon": { - "default": "GridArrowUpwardIcon", - "type": { "name": "elementType | null" } - }, - "ColumnSortedDescendingIcon": { - "default": "GridArrowDownwardIcon", - "type": { "name": "elementType | null" } - }, - "ColumnsPanel": { "default": "GridColumnsPanel", "type": { "name": "elementType" } }, - "ColumnUnsortedIcon": { - "default": "GridColumnUnsortedIcon", - "type": { "name": "elementType | null" } - }, - "DensityComfortableIcon": { - "default": "GridViewStreamIcon", - "type": { "name": "elementType" } - }, - "DensityCompactIcon": { "default": "GridViewHeadlineIcon", "type": { "name": "elementType" } }, - "DensityStandardIcon": { "default": "GridTableRowsIcon", "type": { "name": "elementType" } }, - "DetailPanelCollapseIcon": { "default": "GridRemoveIcon", "type": { "name": "elementType" } }, - "DetailPanelExpandIcon": { "default": "GridAddIcon", "type": { "name": "elementType" } }, - "ErrorOverlay": { "default": "ErrorOverlay", "type": { "name": "elementType" } }, - "ExportIcon": { "default": "GridSaveAltIcon", "type": { "name": "elementType" } }, - "FilterPanel": { "default": "GridFilterPanel", "type": { "name": "elementType" } }, - "FilterPanelDeleteIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } }, - "Footer": { "default": "GridFooter", "type": { "name": "elementType" } }, - "GroupingCriteriaCollapseIcon": { - "default": "GridExpandMoreIcon", - "type": { "name": "elementType" } - }, - "GroupingCriteriaExpandIcon": { - "default": "GridKeyboardArrowRight", - "type": { "name": "elementType" } - }, - "Header": { "default": "GridHeader", "type": { "name": "elementType" } }, - "LoadingOverlay": { "default": "GridLoadingOverlay", "type": { "name": "elementType" } }, - "MoreActionsIcon": { "default": "GridMoreVertIcon", "type": { "name": "elementType" } }, - "NoResultsOverlay": { "default": "GridNoResultsOverlay", "type": { "name": "elementType" } }, - "NoRowsOverlay": { "default": "GridNoRowsOverlay", "type": { "name": "elementType" } }, - "OpenFilterButtonIcon": { "default": "GridFilterListIcon", "type": { "name": "elementType" } }, - "Pagination": { "default": "Pagination", "type": { "name": "elementType | null" } }, - "Panel": { "default": "GridPanel", "type": { "name": "elementType" } }, - "PreferencesPanel": { "default": "GridPreferencesPanel", "type": { "name": "elementType" } }, - "QuickFilterClearIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } }, - "QuickFilterIcon": { "default": "GridSearchIcon", "type": { "name": "elementType" } }, - "Row": { "default": "GridRow", "type": { "name": "elementType" } }, - "RowReorderIcon": { "default": "GridDragIcon", "type": { "name": "elementType" } }, - "SkeletonCell": { "default": "GridSkeletonCell", "type": { "name": "elementType" } }, - "Toolbar": { "default": "null", "type": { "name": "elementType | null" } }, - "TreeDataCollapseIcon": { "default": "GridExpandMoreIcon", "type": { "name": "elementType" } }, - "TreeDataExpandIcon": { "default": "GridKeyboardArrowRight", "type": { "name": "elementType" } } - }, + "slots": {}, "name": "DataGridPro", "styles": { "classes": [ diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 2b18af14fb77..7daa2da2ffcf 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -189,10 +189,25 @@ "type": { "name": "elementType" } }, "ColumnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } }, + "ColumnMenuClearIcon": { "default": "GridClearIcon", "type": { "name": "elementType" } }, + "ColumnMenuFilterIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, + "ColumnMenuHideIcon": { "default": "GridVisibilityOffIcon", "type": { "name": "elementType" } }, "ColumnMenuIcon": { "default": "GridTripleDotsVerticalIcon", "type": { "name": "elementType" } }, + "ColumnMenuManageColumnsIcon": { + "default": "GridViewColumnIcon", + "type": { "name": "elementType" } + }, + "ColumnMenuSortAscendingIcon": { + "default": "GridArrowUpwardIcon", + "type": { "name": "elementType" } + }, + "ColumnMenuSortDescendingIcon": { + "default": "GridArrowDownwardIcon", + "type": { "name": "elementType" } + }, "ColumnResizeIcon": { "default": "GridSeparatorIcon", "type": { "name": "elementType" } }, "ColumnSelectorIcon": { "default": "GridColumnIcon", "type": { "name": "elementType" } }, "ColumnSortedAscendingIcon": { diff --git a/docs/pages/x/api/data-grid/grid-col-def.md b/docs/pages/x/api/data-grid/grid-col-def.md index 53da8972dfc4..1403ffaa7605 100644 --- a/docs/pages/x/api/data-grid/grid-col-def.md +++ b/docs/pages/x/api/data-grid/grid-col-def.md @@ -14,42 +14,43 @@ import { GridColDef } from '@mui/x-data-grid'; ## Properties -| Name | Type | Default | Description | -| :-------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| align? | GridAlignment | | Allows to align the column values in cells. | -| cellClassName? | GridCellClassNamePropType | | Class name that will be added in cells for that column. | -| colSpan? | number \| ((params: GridCellParams<V, R, F>) => number \| undefined) | 1 | Number of columns a cell should span. | -| description? | string | | The description of the column rendered as tooltip if the column header name is not fully displayed. | -| disableColumnMenu? | boolean | false | If `true`, the column menu is disabled for this column. | -| disableExport? | boolean | false | If `true`, this column will not be included in exports. | -| disableReorder? | boolean | false | If `true`, this column cannot be reordered. | -| editable? | boolean | false | If `true`, the cells of the column are editable. | -| field | string | | The column identifier. It's used to map with GridRowModel values. | -| filterable? | boolean | true | If `true`, the column is filterable. | -| filterOperators? | GridFilterOperator<R, V, F>[] | | Allows setting the filter operators for this column. | -| flex? | number | | If set, it indicates that a column has fluid width. Range [0, ∞). | -| getApplyQuickFilterFn? | (value: any, colDef: GridStateColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => null \| ((params: GridCellParams<V, R, F>) => boolean) | | The callback that generates a filtering function for a given quick filter value.
This function can return `null` to skip filtering for this value and column. | -| groupable? | boolean | true | If `true`, the rows can be grouped based on this column values (pro-plan only).
Only available in DataGridPremium. | -| headerAlign? | GridAlignment | | Header cell element alignment. | -| headerClassName? | GridColumnHeaderClassNamePropType | | Class name that will be added in the column header cell. | -| headerName? | string | | The title of the column rendered in the column header cell. | -| hideable? | boolean | true | If `false`, removes the buttons for hiding this column. | -| hideSortIcons? | boolean | false | Toggle the visibility of the sort icons. | -| maxWidth? | number | Infinity | Sets the maximum width of a column. | -| minWidth? | number | 50 | Sets the minimum width of a column. | -| pinnable? | boolean | true | If `false`, the menu items for column pinning menu will not be rendered.
Only available in DataGridPro. | -| preProcessEditCellProps? | (params: GridPreProcessEditCellProps) => GridEditCellProps \| Promise<GridEditCellProps> | | Callback fired when the edit props of the cell changes.
It allows to process the props that saved into the state. | -| renderCell? | (params: GridRenderCellParams<V, R, F>) => React.ReactNode | | Allows to override the component rendered as cell for this column. | -| renderEditCell? | (params: GridRenderEditCellParams<V>) => React.ReactNode | | Allows to override the component rendered in edit cell mode for this column. | -| renderHeader? | (params: GridColumnHeaderParams<V, R, F>) => React.ReactNode | | Allows to render a component in the column header cell. | -| resizable? | boolean | true | If `true`, the column is resizable. | -| sortable? | boolean | true | If `true`, the column is sortable. | -| sortComparator? | GridComparatorFn<V> | | A comparator function used to sort rows. | -| sortingOrder? | GridSortDirection[] | | The order of the sorting sequence. | -| type? | GridColType | 'string' | Type allows to merge this object with a default definition [GridColDef](/x/api/data-grid/grid-col-def/). | -| valueFormatter? | (params: GridValueFormatterParams<V>) => F | | Function that allows to apply a formatter before rendering its value. | -| valueGetter? | (params: GridValueGetterParams<any, R>) => V | | Function that allows to get a specific data instead of field to render in the cell. | -| valueOptions? | Array<ValueOptions> \| ((params: GridValueOptionsParams<R>) => Array<ValueOptions>) | | To be used in combination with `type: 'singleSelect'`. This is an array (or a function returning an array) of the possible cell values and labels. | -| valueParser? | (value: F \| undefined, params?: GridCellParams<V, R, F>) => V | | Function that takes the user-entered value and converts it to a value used internally. | -| valueSetter? | (params: GridValueSetterParams<R, V>) => R | | Function that allows to customize how the entered value is stored in the row.
It only works with cell/row editing. | -| width? | number | 100 | Set the width of the column. | +| Name | Type | Default | Description | +| :---------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| align? | GridAlignment | | Allows to align the column values in cells. | +| cellClassName? | GridCellClassNamePropType | | Class name that will be added in cells for that column. | +| colSpan? | number \| ((params: GridCellParams<V, R, F>) => number \| undefined) | 1 | Number of columns a cell should span. | +| description? | string | | The description of the column rendered as tooltip if the column header name is not fully displayed. | +| disableColumnMenu? | boolean | false | If `true`, the column menu is disabled for this column. | +| disableExport? | boolean | false | If `true`, this column will not be included in exports. | +| disableReorder? | boolean | false | If `true`, this column cannot be reordered. | +| editable? | boolean | false | If `true`, the cells of the column are editable. | +| field | string | | The column identifier. It's used to map with GridRowModel values. | +| filterable? | boolean | true | If `true`, the column is filterable. | +| filterOperators? | GridFilterOperator<R, V, F>[] | | Allows setting the filter operators for this column. | +| flex? | number | | If set, it indicates that a column has fluid width. Range [0, ∞). | +| getApplyQuickFilterFn? | (value: any, colDef: GridStateColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => null \| ((params: GridCellParams<V, R, F>) => boolean) | | The callback that generates a filtering function for a given quick filter value.
This function can return `null` to skip filtering for this value and column. | +| getVisibleColumnMenuItems? | (args: GetVisibleColumnMenuItemsArgs) => Array<GridColumnMenuKey> | | Recieves registered column menu items and should return the items which should be shown. | +| groupable? | boolean | true | If `true`, the rows can be grouped based on this column values (pro-plan only).
Only available in DataGridPremium. | +| headerAlign? | GridAlignment | | Header cell element alignment. | +| headerClassName? | GridColumnHeaderClassNamePropType | | Class name that will be added in the column header cell. | +| headerName? | string | | The title of the column rendered in the column header cell. | +| hideable? | boolean | true | If `false`, removes the buttons for hiding this column. | +| hideSortIcons? | boolean | false | Toggle the visibility of the sort icons. | +| maxWidth? | number | Infinity | Sets the maximum width of a column. | +| minWidth? | number | 50 | Sets the minimum width of a column. | +| pinnable? | boolean | true | If `false`, the menu items for column pinning menu will not be rendered.
Only available in DataGridPro. | +| preProcessEditCellProps? | (params: GridPreProcessEditCellProps) => GridEditCellProps \| Promise<GridEditCellProps> | | Callback fired when the edit props of the cell changes.
It allows to process the props that saved into the state. | +| renderCell? | (params: GridRenderCellParams<V, R, F>) => React.ReactNode | | Allows to override the component rendered as cell for this column. | +| renderEditCell? | (params: GridRenderEditCellParams<V>) => React.ReactNode | | Allows to override the component rendered in edit cell mode for this column. | +| renderHeader? | (params: GridColumnHeaderParams<V, R, F>) => React.ReactNode | | Allows to render a component in the column header cell. | +| resizable? | boolean | true | If `true`, the column is resizable. | +| sortable? | boolean | true | If `true`, the column is sortable. | +| sortComparator? | GridComparatorFn<V> | | A comparator function used to sort rows. | +| sortingOrder? | GridSortDirection[] | | The order of the sorting sequence. | +| type? | GridColType | 'string' | Type allows to merge this object with a default definition [GridColDef](/x/api/data-grid/grid-col-def/). | +| valueFormatter? | (params: GridValueFormatterParams<V>) => F | | Function that allows to apply a formatter before rendering its value. | +| valueGetter? | (params: GridValueGetterParams<any, R>) => V | | Function that allows to get a specific data instead of field to render in the cell. | +| valueOptions? | Array<ValueOptions> \| ((params: GridValueOptionsParams<R>) => Array<ValueOptions>) | | To be used in combination with `type: 'singleSelect'`. This is an array (or a function returning an array) of the possible cell values and labels. | +| valueParser? | (value: F \| undefined, params?: GridCellParams<V, R, F>) => V | | Function that takes the user-entered value and converts it to a value used internally. | +| valueSetter? | (params: GridValueSetterParams<R, V>) => R | | Function that allows to customize how the entered value is stored in the row.
It only works with cell/row editing. | +| width? | number | 100 | Set the width of the column. | diff --git a/docs/translations/api-docs/data-grid/data-grid-premium-pt.json b/docs/translations/api-docs/data-grid/data-grid-premium-pt.json index 9a6e01d2cd4f..237fcaa177f1 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium-pt.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium-pt.json @@ -18,7 +18,7 @@ "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", "columnTypes": "Extend native column types with your new column types.", "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", - "components": "Overrideable components.", + "components": "Overrideable Pro components.", "componentsProps": "Overrideable components props dynamically passed to the component at rendering.", "defaultGroupingExpansionDepth": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", "density": "Set the density of the grid.", @@ -658,6 +658,10 @@ } }, "slotDescriptions": { + "ColumnMenuAggregationItem": "The custom component for aggregation menu item.", + "ColumnMenuRowUngroupItem": "The custom component for ungrouped menu item.", + "ColumnMenuRowGroupItem": "The custom component for grouped menu item.", + "ColumnMenuPinningItem": "The custom Checkbox component used in the grid for both header and cells.", "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "BaseTextField": "The custom TextField component used in the grid.", "BaseFormControl": "The custom FormControl component used in the grid.", @@ -707,6 +711,16 @@ "FilterPanelDeleteIcon": "Icon displayed for deleting the filter from filter Panel.", "RowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", "QuickFilterIcon": "Icon displayed on the quick filter input.", - "QuickFilterClearIcon": "Icon displayed on the quick filter reset input." + "QuickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "ColumnMenuHideIcon": "Icon displayed in column menu for hiding column", + "ColumnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "ColumnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "ColumnMenuFilterIcon": "Icon displayed in column menu for filter", + "ColumnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "ColumnMenuClearIcon": "Icon displayed in column menu for clearing values", + "ColumnMenuPinLeftIcon": "Icon displayed in column menu for left pinning", + "ColumnMenuPinRightIcon": "Icon displayed in column menu for right pinning", + "ColumnMenuUngroupIcon": "Icon displayed in column menu for ungrouping", + "ColumnMenuGroupIcon": "Icon displayed in column menu for grouping" } } diff --git a/docs/translations/api-docs/data-grid/data-grid-premium-zh.json b/docs/translations/api-docs/data-grid/data-grid-premium-zh.json index 9a6e01d2cd4f..237fcaa177f1 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium-zh.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium-zh.json @@ -18,7 +18,7 @@ "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", "columnTypes": "Extend native column types with your new column types.", "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", - "components": "Overrideable components.", + "components": "Overrideable Pro components.", "componentsProps": "Overrideable components props dynamically passed to the component at rendering.", "defaultGroupingExpansionDepth": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", "density": "Set the density of the grid.", @@ -658,6 +658,10 @@ } }, "slotDescriptions": { + "ColumnMenuAggregationItem": "The custom component for aggregation menu item.", + "ColumnMenuRowUngroupItem": "The custom component for ungrouped menu item.", + "ColumnMenuRowGroupItem": "The custom component for grouped menu item.", + "ColumnMenuPinningItem": "The custom Checkbox component used in the grid for both header and cells.", "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "BaseTextField": "The custom TextField component used in the grid.", "BaseFormControl": "The custom FormControl component used in the grid.", @@ -707,6 +711,16 @@ "FilterPanelDeleteIcon": "Icon displayed for deleting the filter from filter Panel.", "RowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", "QuickFilterIcon": "Icon displayed on the quick filter input.", - "QuickFilterClearIcon": "Icon displayed on the quick filter reset input." + "QuickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "ColumnMenuHideIcon": "Icon displayed in column menu for hiding column", + "ColumnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "ColumnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "ColumnMenuFilterIcon": "Icon displayed in column menu for filter", + "ColumnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "ColumnMenuClearIcon": "Icon displayed in column menu for clearing values", + "ColumnMenuPinLeftIcon": "Icon displayed in column menu for left pinning", + "ColumnMenuPinRightIcon": "Icon displayed in column menu for right pinning", + "ColumnMenuUngroupIcon": "Icon displayed in column menu for ungrouping", + "ColumnMenuGroupIcon": "Icon displayed in column menu for grouping" } } diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json index 9a6e01d2cd4f..237fcaa177f1 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -18,7 +18,7 @@ "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", "columnTypes": "Extend native column types with your new column types.", "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", - "components": "Overrideable components.", + "components": "Overrideable Pro components.", "componentsProps": "Overrideable components props dynamically passed to the component at rendering.", "defaultGroupingExpansionDepth": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", "density": "Set the density of the grid.", @@ -658,6 +658,10 @@ } }, "slotDescriptions": { + "ColumnMenuAggregationItem": "The custom component for aggregation menu item.", + "ColumnMenuRowUngroupItem": "The custom component for ungrouped menu item.", + "ColumnMenuRowGroupItem": "The custom component for grouped menu item.", + "ColumnMenuPinningItem": "The custom Checkbox component used in the grid for both header and cells.", "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "BaseTextField": "The custom TextField component used in the grid.", "BaseFormControl": "The custom FormControl component used in the grid.", @@ -707,6 +711,16 @@ "FilterPanelDeleteIcon": "Icon displayed for deleting the filter from filter Panel.", "RowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", "QuickFilterIcon": "Icon displayed on the quick filter input.", - "QuickFilterClearIcon": "Icon displayed on the quick filter reset input." + "QuickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "ColumnMenuHideIcon": "Icon displayed in column menu for hiding column", + "ColumnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "ColumnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "ColumnMenuFilterIcon": "Icon displayed in column menu for filter", + "ColumnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "ColumnMenuClearIcon": "Icon displayed in column menu for clearing values", + "ColumnMenuPinLeftIcon": "Icon displayed in column menu for left pinning", + "ColumnMenuPinRightIcon": "Icon displayed in column menu for right pinning", + "ColumnMenuUngroupIcon": "Icon displayed in column menu for ungrouping", + "ColumnMenuGroupIcon": "Icon displayed in column menu for grouping" } } diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json index b18392d6fd2a..01e347ee1bba 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json @@ -15,7 +15,6 @@ "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", "columnTypes": "Extend native column types with your new column types.", "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", - "components": "Overrideable components.", "componentsProps": "Overrideable components props dynamically passed to the component at rendering.", "defaultGroupingExpansionDepth": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", "density": "Set the density of the grid.", @@ -647,56 +646,5 @@ "nodeName": "pinned rows render zones" } }, - "slotDescriptions": { - "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", - "BaseTextField": "The custom TextField component used in the grid.", - "BaseFormControl": "The custom FormControl component used in the grid.", - "BaseSelect": "The custom Select component used in the grid.", - "BaseSwitch": "The custom Switch component used in the grid.", - "BaseButton": "The custom Button component used in the grid.", - "BaseTooltip": "The custom Tooltip component used in the grid.", - "BasePopper": "The custom Popper component used in the grid.", - "Cell": "Component rendered for each cell.", - "SkeletonCell": "Component rendered for each skeleton cell.", - "ColumnHeaderFilterIconButton": "Filter icon component rendered in each column header.", - "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", - "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.", - "Footer": "Footer component rendered at the bottom of the grid viewport.", - "Header": "Header component rendered above the grid column header bar.\nPrefer using the Toolbar slot. You should never need to use this slot.", - "Toolbar": "Toolbar component rendered inside the Header component.", - "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.", - "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", - "NoResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", - "NoRowsOverlay": "No rows overlay component rendered when the grid has no rows.", - "Pagination": "Pagination component rendered in the grid footer by default.", - "FilterPanel": "Filter panel component rendered when clicking the filter button.", - "ColumnsPanel": "GridColumns panel component rendered when clicking the columns button.", - "Panel": "Panel component wrapping the filters and columns panels.", - "Row": "Component rendered for each row.", - "BooleanCellTrueIcon": "Icon displayed on the boolean cell to represent the true value.", - "BooleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.", - "ColumnMenuIcon": "Icon displayed on the side of the column header title to display the filter input component.", - "OpenFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", - "ColumnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", - "ColumnSelectorIcon": "Icon displayed on the column menu selector tab.", - "ColumnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.", - "ColumnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", - "ColumnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.", - "ColumnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", - "DensityCompactIcon": "Icon displayed on the compact density option in the toolbar.", - "DensityStandardIcon": "Icon displayed on the standard density option in the toolbar.", - "DensityComfortableIcon": "Icon displayed on the "comfortable" density option in the toolbar.", - "ExportIcon": "Icon displayed on the open export button present in the toolbar by default.", - "MoreActionsIcon": "Icon displayed on the actions column type to open the menu.", - "TreeDataExpandIcon": "Icon displayed on the tree data toggling column when the children are collapsed", - "TreeDataCollapseIcon": "Icon displayed on the tree data toggling column when the children are expanded", - "GroupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", - "GroupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", - "DetailPanelExpandIcon": "Icon displayed on the detail panel toggle column when collapsed.", - "DetailPanelCollapseIcon": "Icon displayed on the detail panel toggle column when expanded.", - "FilterPanelDeleteIcon": "Icon displayed for deleting the filter from filter Panel.", - "RowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", - "QuickFilterIcon": "Icon displayed on the quick filter input.", - "QuickFilterClearIcon": "Icon displayed on the quick filter reset input." - } + "slotDescriptions": {} } diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json index b18392d6fd2a..01e347ee1bba 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json @@ -15,7 +15,6 @@ "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", "columnTypes": "Extend native column types with your new column types.", "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", - "components": "Overrideable components.", "componentsProps": "Overrideable components props dynamically passed to the component at rendering.", "defaultGroupingExpansionDepth": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", "density": "Set the density of the grid.", @@ -647,56 +646,5 @@ "nodeName": "pinned rows render zones" } }, - "slotDescriptions": { - "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", - "BaseTextField": "The custom TextField component used in the grid.", - "BaseFormControl": "The custom FormControl component used in the grid.", - "BaseSelect": "The custom Select component used in the grid.", - "BaseSwitch": "The custom Switch component used in the grid.", - "BaseButton": "The custom Button component used in the grid.", - "BaseTooltip": "The custom Tooltip component used in the grid.", - "BasePopper": "The custom Popper component used in the grid.", - "Cell": "Component rendered for each cell.", - "SkeletonCell": "Component rendered for each skeleton cell.", - "ColumnHeaderFilterIconButton": "Filter icon component rendered in each column header.", - "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", - "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.", - "Footer": "Footer component rendered at the bottom of the grid viewport.", - "Header": "Header component rendered above the grid column header bar.\nPrefer using the Toolbar slot. You should never need to use this slot.", - "Toolbar": "Toolbar component rendered inside the Header component.", - "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.", - "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", - "NoResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", - "NoRowsOverlay": "No rows overlay component rendered when the grid has no rows.", - "Pagination": "Pagination component rendered in the grid footer by default.", - "FilterPanel": "Filter panel component rendered when clicking the filter button.", - "ColumnsPanel": "GridColumns panel component rendered when clicking the columns button.", - "Panel": "Panel component wrapping the filters and columns panels.", - "Row": "Component rendered for each row.", - "BooleanCellTrueIcon": "Icon displayed on the boolean cell to represent the true value.", - "BooleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.", - "ColumnMenuIcon": "Icon displayed on the side of the column header title to display the filter input component.", - "OpenFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", - "ColumnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", - "ColumnSelectorIcon": "Icon displayed on the column menu selector tab.", - "ColumnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.", - "ColumnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", - "ColumnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.", - "ColumnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", - "DensityCompactIcon": "Icon displayed on the compact density option in the toolbar.", - "DensityStandardIcon": "Icon displayed on the standard density option in the toolbar.", - "DensityComfortableIcon": "Icon displayed on the "comfortable" density option in the toolbar.", - "ExportIcon": "Icon displayed on the open export button present in the toolbar by default.", - "MoreActionsIcon": "Icon displayed on the actions column type to open the menu.", - "TreeDataExpandIcon": "Icon displayed on the tree data toggling column when the children are collapsed", - "TreeDataCollapseIcon": "Icon displayed on the tree data toggling column when the children are expanded", - "GroupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", - "GroupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", - "DetailPanelExpandIcon": "Icon displayed on the detail panel toggle column when collapsed.", - "DetailPanelCollapseIcon": "Icon displayed on the detail panel toggle column when expanded.", - "FilterPanelDeleteIcon": "Icon displayed for deleting the filter from filter Panel.", - "RowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", - "QuickFilterIcon": "Icon displayed on the quick filter input.", - "QuickFilterClearIcon": "Icon displayed on the quick filter reset input." - } + "slotDescriptions": {} } diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json index b18392d6fd2a..01e347ee1bba 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -15,7 +15,6 @@ "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", "columnTypes": "Extend native column types with your new column types.", "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", - "components": "Overrideable components.", "componentsProps": "Overrideable components props dynamically passed to the component at rendering.", "defaultGroupingExpansionDepth": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", "density": "Set the density of the grid.", @@ -647,56 +646,5 @@ "nodeName": "pinned rows render zones" } }, - "slotDescriptions": { - "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", - "BaseTextField": "The custom TextField component used in the grid.", - "BaseFormControl": "The custom FormControl component used in the grid.", - "BaseSelect": "The custom Select component used in the grid.", - "BaseSwitch": "The custom Switch component used in the grid.", - "BaseButton": "The custom Button component used in the grid.", - "BaseTooltip": "The custom Tooltip component used in the grid.", - "BasePopper": "The custom Popper component used in the grid.", - "Cell": "Component rendered for each cell.", - "SkeletonCell": "Component rendered for each skeleton cell.", - "ColumnHeaderFilterIconButton": "Filter icon component rendered in each column header.", - "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", - "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.", - "Footer": "Footer component rendered at the bottom of the grid viewport.", - "Header": "Header component rendered above the grid column header bar.\nPrefer using the Toolbar slot. You should never need to use this slot.", - "Toolbar": "Toolbar component rendered inside the Header component.", - "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.", - "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", - "NoResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", - "NoRowsOverlay": "No rows overlay component rendered when the grid has no rows.", - "Pagination": "Pagination component rendered in the grid footer by default.", - "FilterPanel": "Filter panel component rendered when clicking the filter button.", - "ColumnsPanel": "GridColumns panel component rendered when clicking the columns button.", - "Panel": "Panel component wrapping the filters and columns panels.", - "Row": "Component rendered for each row.", - "BooleanCellTrueIcon": "Icon displayed on the boolean cell to represent the true value.", - "BooleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.", - "ColumnMenuIcon": "Icon displayed on the side of the column header title to display the filter input component.", - "OpenFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", - "ColumnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", - "ColumnSelectorIcon": "Icon displayed on the column menu selector tab.", - "ColumnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.", - "ColumnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", - "ColumnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.", - "ColumnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", - "DensityCompactIcon": "Icon displayed on the compact density option in the toolbar.", - "DensityStandardIcon": "Icon displayed on the standard density option in the toolbar.", - "DensityComfortableIcon": "Icon displayed on the "comfortable" density option in the toolbar.", - "ExportIcon": "Icon displayed on the open export button present in the toolbar by default.", - "MoreActionsIcon": "Icon displayed on the actions column type to open the menu.", - "TreeDataExpandIcon": "Icon displayed on the tree data toggling column when the children are collapsed", - "TreeDataCollapseIcon": "Icon displayed on the tree data toggling column when the children are expanded", - "GroupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", - "GroupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", - "DetailPanelExpandIcon": "Icon displayed on the detail panel toggle column when collapsed.", - "DetailPanelCollapseIcon": "Icon displayed on the detail panel toggle column when expanded.", - "FilterPanelDeleteIcon": "Icon displayed for deleting the filter from filter Panel.", - "RowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", - "QuickFilterIcon": "Icon displayed on the quick filter input.", - "QuickFilterClearIcon": "Icon displayed on the quick filter reset input." - } + "slotDescriptions": {} } diff --git a/docs/translations/api-docs/data-grid/data-grid-pt.json b/docs/translations/api-docs/data-grid/data-grid-pt.json index f379676dfff0..fff055a46a81 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pt.json +++ b/docs/translations/api-docs/data-grid/data-grid-pt.json @@ -665,6 +665,12 @@ "FilterPanelDeleteIcon": "Icon displayed for deleting the filter from filter Panel.", "RowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", "QuickFilterIcon": "Icon displayed on the quick filter input.", - "QuickFilterClearIcon": "Icon displayed on the quick filter reset input." + "QuickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "ColumnMenuHideIcon": "Icon displayed in column menu for hiding column", + "ColumnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "ColumnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "ColumnMenuFilterIcon": "Icon displayed in column menu for filter", + "ColumnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "ColumnMenuClearIcon": "Icon displayed in column menu for clearing values" } } diff --git a/docs/translations/api-docs/data-grid/data-grid-zh.json b/docs/translations/api-docs/data-grid/data-grid-zh.json index f379676dfff0..fff055a46a81 100644 --- a/docs/translations/api-docs/data-grid/data-grid-zh.json +++ b/docs/translations/api-docs/data-grid/data-grid-zh.json @@ -665,6 +665,12 @@ "FilterPanelDeleteIcon": "Icon displayed for deleting the filter from filter Panel.", "RowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", "QuickFilterIcon": "Icon displayed on the quick filter input.", - "QuickFilterClearIcon": "Icon displayed on the quick filter reset input." + "QuickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "ColumnMenuHideIcon": "Icon displayed in column menu for hiding column", + "ColumnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "ColumnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "ColumnMenuFilterIcon": "Icon displayed in column menu for filter", + "ColumnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "ColumnMenuClearIcon": "Icon displayed in column menu for clearing values" } } diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index f379676dfff0..fff055a46a81 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -665,6 +665,12 @@ "FilterPanelDeleteIcon": "Icon displayed for deleting the filter from filter Panel.", "RowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", "QuickFilterIcon": "Icon displayed on the quick filter input.", - "QuickFilterClearIcon": "Icon displayed on the quick filter reset input." + "QuickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "ColumnMenuHideIcon": "Icon displayed in column menu for hiding column", + "ColumnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "ColumnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "ColumnMenuFilterIcon": "Icon displayed in column menu for filter", + "ColumnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "ColumnMenuClearIcon": "Icon displayed in column menu for clearing values" } } diff --git a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx deleted file mode 100644 index c485c30dca90..000000000000 --- a/packages/grid/x-data-grid-premium/src/components/GridAggregationColumnMenuItem.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import * as React from 'react'; -import { GridColDef, useGridSelector } from '@mui/x-data-grid-pro'; -import MenuItem from '@mui/material/MenuItem'; -import Stack from '@mui/material/Stack'; -import FormControl from '@mui/material/FormControl'; -import InputLabel from '@mui/material/InputLabel'; -import { unstable_useId as useId } from '@mui/material/utils'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import { styled } from '@mui/material/styles'; -import { useGridApiContext } from '../hooks/utils/useGridApiContext'; -import { useGridRootProps } from '../hooks/utils/useGridRootProps'; -import { - canColumnHaveAggregationFunction, - getAggregationFunctionLabel, -} from '../hooks/features/aggregation/gridAggregationUtils'; -import { gridAggregationModelSelector } from '../hooks/features/aggregation/gridAggregationSelectors'; -import { GridAggregationModel } from '../hooks/features/aggregation/gridAggregationInterfaces'; - -interface GridAggregationColumnMenuItemsProps { - column: GridColDef; - label: string; - availableAggregationFunctions: string[]; -} - -const StyledStack = styled(Stack)(({ theme }) => ({ - padding: theme.spacing(1, 1.5, 1, 1.5), -})); - -const GridAggregationColumnMenuItemRoot = (props: GridAggregationColumnMenuItemsProps) => { - const { column, label, availableAggregationFunctions } = props; - const apiRef = useGridApiContext(); - const rootProps = useGridRootProps(); - const id = useId(); - const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector); - - const selectedAggregationRule = React.useMemo(() => { - if (!column || !aggregationModel[column.field]) { - return ''; - } - - const aggregationFunctionName = aggregationModel[column.field]; - if ( - canColumnHaveAggregationFunction({ - column, - aggregationFunctionName, - aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName], - }) - ) { - return aggregationFunctionName; - } - - return ''; - }, [rootProps.aggregationFunctions, aggregationModel, column]); - - const handleAggregationItemChange = (event: SelectChangeEvent) => { - const newAggregationItem = event.target?.value || undefined; - const currentModel = gridAggregationModelSelector(apiRef); - const { [column.field]: columnItem, ...otherColumnItems } = currentModel; - const newModel: GridAggregationModel = - newAggregationItem == null - ? otherColumnItems - : { ...otherColumnItems, [column.field]: newAggregationItem }; - - apiRef.current.setAggregationModel(newModel); - }; - - return ( - - {label} - - - ); -}; - -export const GridAggregationColumnMenuItem = (props: GridAggregationColumnMenuItemsProps) => ( - - - -); -export const GridAggregationColumnMenuItemSimple = (props: GridAggregationColumnMenuItemsProps) => ( - - - -); diff --git a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx new file mode 100644 index 000000000000..562ff67687fa --- /dev/null +++ b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx @@ -0,0 +1,6646 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { GridColDef, GridColumnMenuItemProps, useGridSelector } from '@mui/x-data-grid-pro'; +import MenuItem from '@mui/material/MenuItem'; +import Stack from '@mui/material/Stack'; +import FormControl from '@mui/material/FormControl'; +import InputLabel from '@mui/material/InputLabel'; +import { unstable_useId as useId } from '@mui/material/utils'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import { styled } from '@mui/material/styles'; +import { useGridApiContext } from '../hooks/utils/useGridApiContext'; +import { useGridRootProps } from '../hooks/utils/useGridRootProps'; +import { + canColumnHaveAggregationFunction, + getAggregationFunctionLabel, +} from '../hooks/features/aggregation/gridAggregationUtils'; +import { gridAggregationModelSelector } from '../hooks/features/aggregation/gridAggregationSelectors'; +import { GridAggregationModel } from '../hooks/features/aggregation/gridAggregationInterfaces'; + +interface GridColumnMenuAggregationItemProps extends GridColumnMenuItemProps { + column: GridColDef; + label: string; + availableAggregationFunctions: string[]; +} + +const StyledStack = styled(Stack)(({ theme }) => ({ + padding: theme.spacing(1, 1.5, 1, 1.5), +})); + +StyledStack.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + alignContent: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'baseline', + 'center', + 'end', + 'flex-end', + 'flex-start', + 'inherit', + 'initial', + 'normal', + 'revert-layer', + 'revert', + 'space-around', + 'space-between', + 'space-evenly', + 'start', + 'stretch', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + alignItems: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'baseline', + 'center', + 'end', + 'flex-end', + 'flex-start', + 'inherit', + 'initial', + 'normal', + 'revert-layer', + 'revert', + 'self-end', + 'self-start', + 'start', + 'stretch', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + alignSelf: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'auto', + 'baseline', + 'center', + 'end', + 'flex-end', + 'flex-start', + 'inherit', + 'initial', + 'normal', + 'revert-layer', + 'revert', + 'self-end', + 'self-start', + 'start', + 'stretch', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + bgcolor: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'ActiveBorder', + 'ActiveCaption', + 'aliceblue', + 'antiquewhite', + 'AppWorkspace', + 'aqua', + 'aquamarine', + 'azure', + 'Background', + 'beige', + 'bisque', + 'black', + 'blanchedalmond', + 'blue', + 'blueviolet', + 'brown', + 'burlywood', + 'ButtonFace', + 'ButtonHighlight', + 'ButtonShadow', + 'ButtonText', + 'cadetblue', + 'CaptionText', + 'chartreuse', + 'chocolate', + 'coral', + 'cornflowerblue', + 'cornsilk', + 'crimson', + 'currentcolor', + 'cyan', + 'darkblue', + 'darkcyan', + 'darkgoldenrod', + 'darkgray', + 'darkgreen', + 'darkgrey', + 'darkkhaki', + 'darkmagenta', + 'darkolivegreen', + 'darkorange', + 'darkorchid', + 'darkred', + 'darksalmon', + 'darkseagreen', + 'darkslateblue', + 'darkslategray', + 'darkslategrey', + 'darkturquoise', + 'darkviolet', + 'deeppink', + 'deepskyblue', + 'dimgray', + 'dimgrey', + 'dodgerblue', + 'firebrick', + 'floralwhite', + 'forestgreen', + 'fuchsia', + 'gainsboro', + 'ghostwhite', + 'gold', + 'goldenrod', + 'gray', + 'GrayText', + 'green', + 'greenyellow', + 'grey', + 'Highlight', + 'HighlightText', + 'honeydew', + 'hotpink', + 'InactiveBorder', + 'InactiveCaption', + 'InactiveCaptionText', + 'indianred', + 'indigo', + 'InfoBackground', + 'InfoText', + 'inherit', + 'initial', + 'ivory', + 'khaki', + 'lavender', + 'lavenderblush', + 'lawngreen', + 'lemonchiffon', + 'lightblue', + 'lightcoral', + 'lightcyan', + 'lightgoldenrodyellow', + 'lightgray', + 'lightgreen', + 'lightgrey', + 'lightpink', + 'lightsalmon', + 'lightseagreen', + 'lightskyblue', + 'lightslategray', + 'lightslategrey', + 'lightsteelblue', + 'lightyellow', + 'lime', + 'limegreen', + 'linen', + 'magenta', + 'maroon', + 'mediumaquamarine', + 'mediumblue', + 'mediumorchid', + 'mediumpurple', + 'mediumseagreen', + 'mediumslateblue', + 'mediumspringgreen', + 'mediumturquoise', + 'mediumvioletred', + 'Menu', + 'MenuText', + 'midnightblue', + 'mintcream', + 'mistyrose', + 'moccasin', + 'navajowhite', + 'navy', + 'oldlace', + 'olive', + 'olivedrab', + 'orange', + 'orangered', + 'orchid', + 'palegoldenrod', + 'palegreen', + 'paleturquoise', + 'palevioletred', + 'papayawhip', + 'peachpuff', + 'peru', + 'pink', + 'plum', + 'powderblue', + 'purple', + 'rebeccapurple', + 'red', + 'revert-layer', + 'revert', + 'rosybrown', + 'royalblue', + 'saddlebrown', + 'salmon', + 'sandybrown', + 'Scrollbar', + 'seagreen', + 'seashell', + 'sienna', + 'silver', + 'skyblue', + 'slateblue', + 'slategray', + 'slategrey', + 'snow', + 'springgreen', + 'steelblue', + 'tan', + 'teal', + 'thistle', + 'ThreeDDarkShadow', + 'ThreeDFace', + 'ThreeDHighlight', + 'ThreeDLightShadow', + 'ThreeDShadow', + 'tomato', + 'transparent', + 'turquoise', + 'unset', + 'violet', + 'wheat', + 'white', + 'whitesmoke', + 'Window', + 'WindowFrame', + 'WindowText', + 'yellow', + 'yellowgreen', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + border: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'ActiveBorder', + 'ActiveCaption', + 'aliceblue', + 'antiquewhite', + 'AppWorkspace', + 'aqua', + 'aquamarine', + 'azure', + 'Background', + 'beige', + 'bisque', + 'black', + 'blanchedalmond', + 'blue', + 'blueviolet', + 'brown', + 'burlywood', + 'ButtonFace', + 'ButtonHighlight', + 'ButtonShadow', + 'ButtonText', + 'cadetblue', + 'CaptionText', + 'chartreuse', + 'chocolate', + 'coral', + 'cornflowerblue', + 'cornsilk', + 'crimson', + 'currentcolor', + 'cyan', + 'darkblue', + 'darkcyan', + 'darkgoldenrod', + 'darkgray', + 'darkgreen', + 'darkgrey', + 'darkkhaki', + 'darkmagenta', + 'darkolivegreen', + 'darkorange', + 'darkorchid', + 'darkred', + 'darksalmon', + 'darkseagreen', + 'darkslateblue', + 'darkslategray', + 'darkslategrey', + 'darkturquoise', + 'darkviolet', + 'dashed', + 'deeppink', + 'deepskyblue', + 'dimgray', + 'dimgrey', + 'dodgerblue', + 'dotted', + 'double', + 'firebrick', + 'floralwhite', + 'forestgreen', + 'fuchsia', + 'gainsboro', + 'ghostwhite', + 'gold', + 'goldenrod', + 'gray', + 'GrayText', + 'green', + 'greenyellow', + 'grey', + 'groove', + 'hidden', + 'Highlight', + 'HighlightText', + 'honeydew', + 'hotpink', + 'InactiveBorder', + 'InactiveCaption', + 'InactiveCaptionText', + 'indianred', + 'indigo', + 'InfoBackground', + 'InfoText', + 'inherit', + 'initial', + 'inset', + 'ivory', + 'khaki', + 'lavender', + 'lavenderblush', + 'lawngreen', + 'lemonchiffon', + 'lightblue', + 'lightcoral', + 'lightcyan', + 'lightgoldenrodyellow', + 'lightgray', + 'lightgreen', + 'lightgrey', + 'lightpink', + 'lightsalmon', + 'lightseagreen', + 'lightskyblue', + 'lightslategray', + 'lightslategrey', + 'lightsteelblue', + 'lightyellow', + 'lime', + 'limegreen', + 'linen', + 'magenta', + 'maroon', + 'medium', + 'mediumaquamarine', + 'mediumblue', + 'mediumorchid', + 'mediumpurple', + 'mediumseagreen', + 'mediumslateblue', + 'mediumspringgreen', + 'mediumturquoise', + 'mediumvioletred', + 'Menu', + 'MenuText', + 'midnightblue', + 'mintcream', + 'mistyrose', + 'moccasin', + 'navajowhite', + 'navy', + 'none', + 'oldlace', + 'olive', + 'olivedrab', + 'orange', + 'orangered', + 'orchid', + 'outset', + 'palegoldenrod', + 'palegreen', + 'paleturquoise', + 'palevioletred', + 'papayawhip', + 'peachpuff', + 'peru', + 'pink', + 'plum', + 'powderblue', + 'purple', + 'rebeccapurple', + 'red', + 'revert-layer', + 'revert', + 'ridge', + 'rosybrown', + 'royalblue', + 'saddlebrown', + 'salmon', + 'sandybrown', + 'Scrollbar', + 'seagreen', + 'seashell', + 'sienna', + 'silver', + 'skyblue', + 'slateblue', + 'slategray', + 'slategrey', + 'snow', + 'solid', + 'springgreen', + 'steelblue', + 'tan', + 'teal', + 'thick', + 'thin', + 'thistle', + 'ThreeDDarkShadow', + 'ThreeDFace', + 'ThreeDHighlight', + 'ThreeDLightShadow', + 'ThreeDShadow', + 'tomato', + 'transparent', + 'turquoise', + 'unset', + 'violet', + 'wheat', + 'white', + 'whitesmoke', + 'Window', + 'WindowFrame', + 'WindowText', + 'yellow', + 'yellowgreen', + ]), + PropTypes.arrayOf( + PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'ActiveBorder', + 'ActiveCaption', + 'aliceblue', + 'antiquewhite', + 'AppWorkspace', + 'aqua', + 'aquamarine', + 'azure', + 'Background', + 'beige', + 'bisque', + 'black', + 'blanchedalmond', + 'blue', + 'blueviolet', + 'brown', + 'burlywood', + 'ButtonFace', + 'ButtonHighlight', + 'ButtonShadow', + 'ButtonText', + 'cadetblue', + 'CaptionText', + 'chartreuse', + 'chocolate', + 'coral', + 'cornflowerblue', + 'cornsilk', + 'crimson', + 'currentcolor', + 'cyan', + 'darkblue', + 'darkcyan', + 'darkgoldenrod', + 'darkgray', + 'darkgreen', + 'darkgrey', + 'darkkhaki', + 'darkmagenta', + 'darkolivegreen', + 'darkorange', + 'darkorchid', + 'darkred', + 'darksalmon', + 'darkseagreen', + 'darkslateblue', + 'darkslategray', + 'darkslategrey', + 'darkturquoise', + 'darkviolet', + 'dashed', + 'deeppink', + 'deepskyblue', + 'dimgray', + 'dimgrey', + 'dodgerblue', + 'dotted', + 'double', + 'firebrick', + 'floralwhite', + 'forestgreen', + 'fuchsia', + 'gainsboro', + 'ghostwhite', + 'gold', + 'goldenrod', + 'gray', + 'GrayText', + 'green', + 'greenyellow', + 'grey', + 'groove', + 'hidden', + 'Highlight', + 'HighlightText', + 'honeydew', + 'hotpink', + 'InactiveBorder', + 'InactiveCaption', + 'InactiveCaptionText', + 'indianred', + 'indigo', + 'InfoBackground', + 'InfoText', + 'inherit', + 'initial', + 'inset', + 'ivory', + 'khaki', + 'lavender', + 'lavenderblush', + 'lawngreen', + 'lemonchiffon', + 'lightblue', + 'lightcoral', + 'lightcyan', + 'lightgoldenrodyellow', + 'lightgray', + 'lightgreen', + 'lightgrey', + 'lightpink', + 'lightsalmon', + 'lightseagreen', + 'lightskyblue', + 'lightslategray', + 'lightslategrey', + 'lightsteelblue', + 'lightyellow', + 'lime', + 'limegreen', + 'linen', + 'magenta', + 'maroon', + 'medium', + 'mediumaquamarine', + 'mediumblue', + 'mediumorchid', + 'mediumpurple', + 'mediumseagreen', + 'mediumslateblue', + 'mediumspringgreen', + 'mediumturquoise', + 'mediumvioletred', + 'Menu', + 'MenuText', + 'midnightblue', + 'mintcream', + 'mistyrose', + 'moccasin', + 'navajowhite', + 'navy', + 'none', + 'oldlace', + 'olive', + 'olivedrab', + 'orange', + 'orangered', + 'orchid', + 'outset', + 'palegoldenrod', + 'palegreen', + 'paleturquoise', + 'palevioletred', + 'papayawhip', + 'peachpuff', + 'peru', + 'pink', + 'plum', + 'powderblue', + 'purple', + 'rebeccapurple', + 'red', + 'revert-layer', + 'revert', + 'ridge', + 'rosybrown', + 'royalblue', + 'saddlebrown', + 'salmon', + 'sandybrown', + 'Scrollbar', + 'seagreen', + 'seashell', + 'sienna', + 'silver', + 'skyblue', + 'slateblue', + 'slategray', + 'slategrey', + 'snow', + 'solid', + 'springgreen', + 'steelblue', + 'tan', + 'teal', + 'thick', + 'thin', + 'thistle', + 'ThreeDDarkShadow', + 'ThreeDFace', + 'ThreeDHighlight', + 'ThreeDLightShadow', + 'ThreeDShadow', + 'tomato', + 'transparent', + 'turquoise', + 'unset', + 'violet', + 'wheat', + 'white', + 'whitesmoke', + 'Window', + 'WindowFrame', + 'WindowText', + 'yellow', + 'yellowgreen', + ]), + PropTypes.number, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + ), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + borderBottom: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + borderColor: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'ActiveBorder', + 'ActiveCaption', + 'aliceblue', + 'antiquewhite', + 'AppWorkspace', + 'aqua', + 'aquamarine', + 'azure', + 'Background', + 'beige', + 'bisque', + 'black', + 'blanchedalmond', + 'blue', + 'blueviolet', + 'brown', + 'burlywood', + 'ButtonFace', + 'ButtonHighlight', + 'ButtonShadow', + 'ButtonText', + 'cadetblue', + 'CaptionText', + 'chartreuse', + 'chocolate', + 'coral', + 'cornflowerblue', + 'cornsilk', + 'crimson', + 'currentcolor', + 'cyan', + 'darkblue', + 'darkcyan', + 'darkgoldenrod', + 'darkgray', + 'darkgreen', + 'darkgrey', + 'darkkhaki', + 'darkmagenta', + 'darkolivegreen', + 'darkorange', + 'darkorchid', + 'darkred', + 'darksalmon', + 'darkseagreen', + 'darkslateblue', + 'darkslategray', + 'darkslategrey', + 'darkturquoise', + 'darkviolet', + 'deeppink', + 'deepskyblue', + 'dimgray', + 'dimgrey', + 'dodgerblue', + 'firebrick', + 'floralwhite', + 'forestgreen', + 'fuchsia', + 'gainsboro', + 'ghostwhite', + 'gold', + 'goldenrod', + 'gray', + 'GrayText', + 'green', + 'greenyellow', + 'grey', + 'Highlight', + 'HighlightText', + 'honeydew', + 'hotpink', + 'InactiveBorder', + 'InactiveCaption', + 'InactiveCaptionText', + 'indianred', + 'indigo', + 'InfoBackground', + 'InfoText', + 'inherit', + 'initial', + 'ivory', + 'khaki', + 'lavender', + 'lavenderblush', + 'lawngreen', + 'lemonchiffon', + 'lightblue', + 'lightcoral', + 'lightcyan', + 'lightgoldenrodyellow', + 'lightgray', + 'lightgreen', + 'lightgrey', + 'lightpink', + 'lightsalmon', + 'lightseagreen', + 'lightskyblue', + 'lightslategray', + 'lightslategrey', + 'lightsteelblue', + 'lightyellow', + 'lime', + 'limegreen', + 'linen', + 'magenta', + 'maroon', + 'mediumaquamarine', + 'mediumblue', + 'mediumorchid', + 'mediumpurple', + 'mediumseagreen', + 'mediumslateblue', + 'mediumspringgreen', + 'mediumturquoise', + 'mediumvioletred', + 'Menu', + 'MenuText', + 'midnightblue', + 'mintcream', + 'mistyrose', + 'moccasin', + 'navajowhite', + 'navy', + 'oldlace', + 'olive', + 'olivedrab', + 'orange', + 'orangered', + 'orchid', + 'palegoldenrod', + 'palegreen', + 'paleturquoise', + 'palevioletred', + 'papayawhip', + 'peachpuff', + 'peru', + 'pink', + 'plum', + 'powderblue', + 'purple', + 'rebeccapurple', + 'red', + 'revert-layer', + 'revert', + 'rosybrown', + 'royalblue', + 'saddlebrown', + 'salmon', + 'sandybrown', + 'Scrollbar', + 'seagreen', + 'seashell', + 'sienna', + 'silver', + 'skyblue', + 'slateblue', + 'slategray', + 'slategrey', + 'snow', + 'springgreen', + 'steelblue', + 'tan', + 'teal', + 'thistle', + 'ThreeDDarkShadow', + 'ThreeDFace', + 'ThreeDHighlight', + 'ThreeDLightShadow', + 'ThreeDShadow', + 'tomato', + 'transparent', + 'turquoise', + 'unset', + 'violet', + 'wheat', + 'white', + 'whitesmoke', + 'Window', + 'WindowFrame', + 'WindowText', + 'yellow', + 'yellowgreen', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + borderLeft: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + borderRadius: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + borderRight: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + borderTop: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + bottom: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + boxShadow: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'inherit', + 'initial', + 'none', + 'revert-layer', + 'revert', + 'unset', + ]), + PropTypes.arrayOf( + PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'inherit', + 'initial', + 'none', + 'revert-layer', + 'revert', + 'unset', + ]), + PropTypes.number, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + ), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + boxSizing: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'border-box', + 'content-box', + 'inherit', + 'initial', + 'revert-layer', + 'revert', + 'unset', + ]), + PropTypes.arrayOf( + PropTypes.oneOf([ + '-moz-initial', + 'border-box', + 'content-box', + 'inherit', + 'initial', + 'revert-layer', + 'revert', + 'unset', + ]).isRequired, + ), + PropTypes.func, + PropTypes.object, + ]), + color: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'ActiveBorder', + 'ActiveCaption', + 'aliceblue', + 'antiquewhite', + 'AppWorkspace', + 'aqua', + 'aquamarine', + 'azure', + 'Background', + 'beige', + 'bisque', + 'black', + 'blanchedalmond', + 'blue', + 'blueviolet', + 'brown', + 'burlywood', + 'ButtonFace', + 'ButtonHighlight', + 'ButtonShadow', + 'ButtonText', + 'cadetblue', + 'CaptionText', + 'chartreuse', + 'chocolate', + 'coral', + 'cornflowerblue', + 'cornsilk', + 'crimson', + 'currentcolor', + 'cyan', + 'darkblue', + 'darkcyan', + 'darkgoldenrod', + 'darkgray', + 'darkgreen', + 'darkgrey', + 'darkkhaki', + 'darkmagenta', + 'darkolivegreen', + 'darkorange', + 'darkorchid', + 'darkred', + 'darksalmon', + 'darkseagreen', + 'darkslateblue', + 'darkslategray', + 'darkslategrey', + 'darkturquoise', + 'darkviolet', + 'deeppink', + 'deepskyblue', + 'dimgray', + 'dimgrey', + 'dodgerblue', + 'firebrick', + 'floralwhite', + 'forestgreen', + 'fuchsia', + 'gainsboro', + 'ghostwhite', + 'gold', + 'goldenrod', + 'gray', + 'GrayText', + 'green', + 'greenyellow', + 'grey', + 'Highlight', + 'HighlightText', + 'honeydew', + 'hotpink', + 'InactiveBorder', + 'InactiveCaption', + 'InactiveCaptionText', + 'indianred', + 'indigo', + 'InfoBackground', + 'InfoText', + 'inherit', + 'initial', + 'ivory', + 'khaki', + 'lavender', + 'lavenderblush', + 'lawngreen', + 'lemonchiffon', + 'lightblue', + 'lightcoral', + 'lightcyan', + 'lightgoldenrodyellow', + 'lightgray', + 'lightgreen', + 'lightgrey', + 'lightpink', + 'lightsalmon', + 'lightseagreen', + 'lightskyblue', + 'lightslategray', + 'lightslategrey', + 'lightsteelblue', + 'lightyellow', + 'lime', + 'limegreen', + 'linen', + 'magenta', + 'maroon', + 'mediumaquamarine', + 'mediumblue', + 'mediumorchid', + 'mediumpurple', + 'mediumseagreen', + 'mediumslateblue', + 'mediumspringgreen', + 'mediumturquoise', + 'mediumvioletred', + 'Menu', + 'MenuText', + 'midnightblue', + 'mintcream', + 'mistyrose', + 'moccasin', + 'navajowhite', + 'navy', + 'oldlace', + 'olive', + 'olivedrab', + 'orange', + 'orangered', + 'orchid', + 'palegoldenrod', + 'palegreen', + 'paleturquoise', + 'palevioletred', + 'papayawhip', + 'peachpuff', + 'peru', + 'pink', + 'plum', + 'powderblue', + 'purple', + 'rebeccapurple', + 'red', + 'revert-layer', + 'revert', + 'rosybrown', + 'royalblue', + 'saddlebrown', + 'salmon', + 'sandybrown', + 'Scrollbar', + 'seagreen', + 'seashell', + 'sienna', + 'silver', + 'skyblue', + 'slateblue', + 'slategray', + 'slategrey', + 'snow', + 'springgreen', + 'steelblue', + 'tan', + 'teal', + 'thistle', + 'ThreeDDarkShadow', + 'ThreeDFace', + 'ThreeDHighlight', + 'ThreeDLightShadow', + 'ThreeDShadow', + 'tomato', + 'transparent', + 'turquoise', + 'unset', + 'violet', + 'wheat', + 'white', + 'whitesmoke', + 'Window', + 'WindowFrame', + 'WindowText', + 'yellow', + 'yellowgreen', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + columnGap: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + display: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + '-ms-flexbox', + '-ms-grid', + '-ms-inline-flexbox', + '-ms-inline-grid', + '-webkit-flex', + '-webkit-inline-flex', + 'block', + 'contents', + 'flex', + 'flow-root', + 'flow', + 'grid', + 'inherit', + 'initial', + 'inline-block', + 'inline-flex', + 'inline-grid', + 'inline-list-item', + 'inline-table', + 'inline', + 'list-item', + 'none', + 'revert-layer', + 'revert', + 'ruby-base-container', + 'ruby-base', + 'ruby-text-container', + 'ruby-text', + 'ruby', + 'run-in', + 'table-caption', + 'table-cell', + 'table-column-group', + 'table-column', + 'table-footer-group', + 'table-header-group', + 'table-row-group', + 'table-row', + 'table', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + displayPrint: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + '-ms-flexbox', + '-ms-grid', + '-ms-inline-flexbox', + '-ms-inline-grid', + '-webkit-flex', + '-webkit-inline-flex', + 'block', + 'contents', + 'flex', + 'flow-root', + 'flow', + 'grid', + 'inherit', + 'initial', + 'inline-block', + 'inline-flex', + 'inline-grid', + 'inline-list-item', + 'inline-table', + 'inline', + 'list-item', + 'none', + 'revert-layer', + 'revert', + 'ruby-base-container', + 'ruby-base', + 'ruby-text-container', + 'ruby-text', + 'ruby', + 'run-in', + 'table-caption', + 'table-cell', + 'table-column-group', + 'table-column', + 'table-footer-group', + 'table-header-group', + 'table-row-group', + 'table-row', + 'table', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + flex: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + flexBasis: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + flexDirection: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'column-reverse', + 'column', + 'inherit', + 'initial', + 'revert-layer', + 'revert', + 'row-reverse', + 'row', + 'unset', + ]), + PropTypes.arrayOf( + PropTypes.oneOf([ + '-moz-initial', + 'column-reverse', + 'column', + 'inherit', + 'initial', + 'revert-layer', + 'revert', + 'row-reverse', + 'row', + 'unset', + ]).isRequired, + ), + PropTypes.func, + PropTypes.object, + ]), + flexGrow: PropTypes.oneOfType([ + PropTypes.oneOf(['-moz-initial', 'inherit', 'initial', 'revert-layer', 'revert', 'unset']), + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + flexShrink: PropTypes.oneOfType([ + PropTypes.oneOf(['-moz-initial', 'inherit', 'initial', 'revert-layer', 'revert', 'unset']), + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + flexWrap: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'inherit', + 'initial', + 'nowrap', + 'revert-layer', + 'revert', + 'unset', + 'wrap-reverse', + 'wrap', + ]), + PropTypes.arrayOf( + PropTypes.oneOf([ + '-moz-initial', + 'inherit', + 'initial', + 'nowrap', + 'revert-layer', + 'revert', + 'unset', + 'wrap-reverse', + 'wrap', + ]).isRequired, + ), + PropTypes.func, + PropTypes.object, + ]), + fontFamily: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'cursive', + 'fantasy', + 'inherit', + 'initial', + 'monospace', + 'revert-layer', + 'revert', + 'sans-serif', + 'serif', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + fontSize: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + fontStyle: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'inherit', + 'initial', + 'italic', + 'normal', + 'oblique', + 'revert-layer', + 'revert', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + fontWeight: PropTypes.oneOfType([ + PropTypes.arrayOf( + PropTypes.oneOfType([ + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + ), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + gap: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + gridArea: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'auto', + 'inherit', + 'initial', + 'revert-layer', + 'revert', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + gridAutoColumns: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + gridAutoFlow: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'column', + 'dense', + 'inherit', + 'initial', + 'revert-layer', + 'revert', + 'row', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + gridAutoRows: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + gridColumn: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'auto', + 'inherit', + 'initial', + 'revert-layer', + 'revert', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + gridRow: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'auto', + 'inherit', + 'initial', + 'revert-layer', + 'revert', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + gridTemplateAreas: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'inherit', + 'initial', + 'none', + 'revert-layer', + 'revert', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + gridTemplateColumns: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + gridTemplateRows: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + height: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + justifyContent: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'center', + 'end', + 'flex-end', + 'flex-start', + 'inherit', + 'initial', + 'left', + 'normal', + 'revert-layer', + 'revert', + 'right', + 'space-around', + 'space-between', + 'space-evenly', + 'start', + 'stretch', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + justifyItems: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'baseline', + 'center', + 'end', + 'flex-end', + 'flex-start', + 'inherit', + 'initial', + 'left', + 'legacy', + 'normal', + 'revert-layer', + 'revert', + 'right', + 'self-end', + 'self-start', + 'start', + 'stretch', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + justifySelf: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'auto', + 'baseline', + 'center', + 'end', + 'flex-end', + 'flex-start', + 'inherit', + 'initial', + 'left', + 'normal', + 'revert-layer', + 'revert', + 'right', + 'self-end', + 'self-start', + 'start', + 'stretch', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + left: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + letterSpacing: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.string, + ]), + lineHeight: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + m: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + margin: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + marginBottom: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + marginLeft: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + marginRight: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + marginTop: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + marginX: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + marginY: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + maxHeight: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + maxWidth: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + mb: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + minHeight: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + minWidth: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + ml: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + mr: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + mt: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + mx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + my: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + order: PropTypes.oneOfType([ + PropTypes.oneOf(['-moz-initial', 'inherit', 'initial', 'revert-layer', 'revert', 'unset']), + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + overflow: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-hidden-unscrollable', + '-moz-initial', + 'auto', + 'clip', + 'hidden', + 'inherit', + 'initial', + 'revert-layer', + 'revert', + 'scroll', + 'unset', + 'visible', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + p: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + padding: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + paddingBottom: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + paddingLeft: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + paddingRight: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + paddingTop: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + paddingX: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + paddingY: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + pb: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + pl: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + position: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + '-webkit-sticky', + 'absolute', + 'fixed', + 'inherit', + 'initial', + 'relative', + 'revert-layer', + 'revert', + 'static', + 'sticky', + 'unset', + ]), + PropTypes.arrayOf( + PropTypes.oneOf([ + '-moz-initial', + '-webkit-sticky', + 'absolute', + 'fixed', + 'inherit', + 'initial', + 'relative', + 'revert-layer', + 'revert', + 'static', + 'sticky', + 'unset', + ]).isRequired, + ), + PropTypes.func, + PropTypes.object, + ]), + pr: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + pt: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + px: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + py: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + right: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + rowGap: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + textAlign: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'center', + 'end', + 'inherit', + 'initial', + 'justify', + 'left', + 'match-parent', + 'revert-layer', + 'revert', + 'right', + 'start', + 'unset', + ]), + PropTypes.arrayOf( + PropTypes.oneOf([ + '-moz-initial', + 'center', + 'end', + 'inherit', + 'initial', + 'justify', + 'left', + 'match-parent', + 'revert-layer', + 'revert', + 'right', + 'start', + 'unset', + ]).isRequired, + ), + PropTypes.func, + PropTypes.object, + ]), + textOverflow: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'clip', + 'ellipsis', + 'inherit', + 'initial', + 'revert-layer', + 'revert', + 'unset', + ]), + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + ]), + textTransform: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'capitalize', + 'full-size-kana', + 'full-width', + 'inherit', + 'initial', + 'lowercase', + 'none', + 'revert-layer', + 'revert', + 'unset', + 'uppercase', + ]), + PropTypes.arrayOf( + PropTypes.oneOf([ + '-moz-initial', + 'capitalize', + 'full-size-kana', + 'full-width', + 'inherit', + 'initial', + 'lowercase', + 'none', + 'revert-layer', + 'revert', + 'unset', + 'uppercase', + ]).isRequired, + ), + PropTypes.func, + PropTypes.object, + ]), + top: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + typography: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.string), + PropTypes.func, + PropTypes.object, + PropTypes.string, + ]), + visibility: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + 'collapse', + 'hidden', + 'inherit', + 'initial', + 'revert-layer', + 'revert', + 'unset', + 'visible', + ]), + PropTypes.arrayOf( + PropTypes.oneOf([ + '-moz-initial', + 'collapse', + 'hidden', + 'inherit', + 'initial', + 'revert-layer', + 'revert', + 'unset', + 'visible', + ]).isRequired, + ), + PropTypes.func, + PropTypes.object, + ]), + whiteSpace: PropTypes.oneOfType([ + PropTypes.oneOf([ + '-moz-initial', + '-moz-pre-wrap', + 'break-spaces', + 'inherit', + 'initial', + 'normal', + 'nowrap', + 'pre-line', + 'pre-wrap', + 'pre', + 'revert-layer', + 'revert', + 'unset', + ]), + PropTypes.arrayOf( + PropTypes.oneOf([ + '-moz-initial', + '-moz-pre-wrap', + 'break-spaces', + 'inherit', + 'initial', + 'normal', + 'nowrap', + 'pre-line', + 'pre-wrap', + 'pre', + 'revert-layer', + 'revert', + 'unset', + ]).isRequired, + ), + PropTypes.func, + PropTypes.object, + ]), + width: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.func, + PropTypes.number, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + zIndex: PropTypes.oneOfType([ + PropTypes.arrayOf( + PropTypes.oneOfType([ + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), + ), + PropTypes.func, + PropTypes.object, + PropTypes.shape({ + '__@iterator@18589': PropTypes.func.isRequired, + anchor: PropTypes.func.isRequired, + at: PropTypes.func.isRequired, + big: PropTypes.func.isRequired, + blink: PropTypes.func.isRequired, + bold: PropTypes.func.isRequired, + charAt: PropTypes.func.isRequired, + charCodeAt: PropTypes.func.isRequired, + codePointAt: PropTypes.func.isRequired, + concat: PropTypes.func.isRequired, + endsWith: PropTypes.func.isRequired, + fixed: PropTypes.func.isRequired, + fontcolor: PropTypes.func.isRequired, + fontsize: PropTypes.func.isRequired, + includes: PropTypes.func.isRequired, + indexOf: PropTypes.func.isRequired, + italics: PropTypes.func.isRequired, + lastIndexOf: PropTypes.func.isRequired, + length: PropTypes.number.isRequired, + link: PropTypes.func.isRequired, + localeCompare: PropTypes.func.isRequired, + match: PropTypes.func.isRequired, + matchAll: PropTypes.func.isRequired, + normalize: PropTypes.func.isRequired, + padEnd: PropTypes.func.isRequired, + padStart: PropTypes.func.isRequired, + repeat: PropTypes.func.isRequired, + replace: PropTypes.func.isRequired, + replaceAll: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + slice: PropTypes.func.isRequired, + small: PropTypes.func.isRequired, + split: PropTypes.func.isRequired, + startsWith: PropTypes.func.isRequired, + strike: PropTypes.func.isRequired, + sub: PropTypes.func.isRequired, + substr: PropTypes.func.isRequired, + substring: PropTypes.func.isRequired, + sup: PropTypes.func.isRequired, + toLocaleLowerCase: PropTypes.func.isRequired, + toLocaleUpperCase: PropTypes.func.isRequired, + toLowerCase: PropTypes.func.isRequired, + toString: PropTypes.func.isRequired, + toUpperCase: PropTypes.func.isRequired, + trim: PropTypes.func.isRequired, + trimEnd: PropTypes.func.isRequired, + trimLeft: PropTypes.func.isRequired, + trimRight: PropTypes.func.isRequired, + trimStart: PropTypes.func.isRequired, + valueOf: PropTypes.func.isRequired, + }), + PropTypes.string, + ]), +} as any; + +const GridColumnMenuAggregationItemRoot: React.FC = (props) => { + const { column, label, availableAggregationFunctions } = props; + const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); + const id = useId(); + const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector); + + const selectedAggregationRule = React.useMemo(() => { + if (!column || !aggregationModel[column.field]) { + return ''; + } + + const aggregationFunctionName = aggregationModel[column.field]; + if ( + canColumnHaveAggregationFunction({ + column, + aggregationFunctionName, + aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName], + }) + ) { + return aggregationFunctionName; + } + + return ''; + }, [rootProps.aggregationFunctions, aggregationModel, column]); + + const handleAggregationItemChange = (event: SelectChangeEvent) => { + const newAggregationItem = event.target?.value || undefined; + const currentModel = gridAggregationModelSelector(apiRef); + const { [column?.field]: columnItem, ...otherColumnItems } = currentModel; + const newModel: GridAggregationModel = + newAggregationItem == null + ? otherColumnItems + : { ...otherColumnItems, [column?.field]: newAggregationItem }; + + apiRef.current.setAggregationModel(newModel); + }; + + return ( + + {label} + + + ); +}; + +GridColumnMenuAggregationItemRoot.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + availableAggregationFunctions: PropTypes.arrayOf(PropTypes.string).isRequired, + column: PropTypes.object.isRequired, + label: PropTypes.string.isRequired, + onClick: PropTypes.func, +} as any; + +const GridColumnMenuAggregationItem = (props: GridColumnMenuAggregationItemProps) => ( + + + +); + +GridColumnMenuAggregationItem.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + availableAggregationFunctions: PropTypes.arrayOf(PropTypes.string).isRequired, + column: PropTypes.object.isRequired, + label: PropTypes.string.isRequired, + onClick: PropTypes.func, +} as any; + +export { GridColumnMenuAggregationItem }; + +const GridColumnMenuAggregationItemSimple = (props: GridColumnMenuAggregationItemProps) => ( + + + +); + +GridColumnMenuAggregationItemSimple.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + availableAggregationFunctions: PropTypes.arrayOf(PropTypes.string).isRequired, + column: PropTypes.object.isRequired, + label: PropTypes.string.isRequired, + onClick: PropTypes.func, +} as any; + +export { GridColumnMenuAggregationItemSimple }; diff --git a/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItems.tsx b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx similarity index 82% rename from packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItems.tsx rename to packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx index 41059343fb3d..fa56ea8b7d33 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItems.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx @@ -2,8 +2,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import { useGridSelector, gridColumnLookupSelector, GridColDef } from '@mui/x-data-grid-pro'; -import { styled } from '@mui/system'; +import { + useGridSelector, + gridColumnLookupSelector, + GridColumnMenuItemProps, +} from '@mui/x-data-grid-pro'; +import { styled } from '@mui/material/styles'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector'; @@ -13,23 +17,18 @@ import { isGroupingColumn, } from '../hooks/features/rowGrouping/gridRowGroupingUtils'; -interface GridRowGroupingColumnMenuItemsProps { - column?: GridColDef; - onClick?: (event: React.MouseEvent) => void; -} - const StyledStack = styled(Stack)(({ theme }) => ({ padding: theme.spacing(1, 1.5, 1, 1.5), flexDirection: 'row', })); -const StyledButton = styled(Button)(() => ({ - fontSize: '16px', - fontWeight: '400', +const StyledButton = styled(Button)(({ theme }) => ({ + fontSize: theme.typography.pxToRem(16), + fontWeight: theme.typography.fontWeightRegular, textTransform: 'none', })); -const GridRowGroupingColumnMenuItems = (props: GridRowGroupingColumnMenuItemsProps) => { +const GridColumnMenuRowGroupItem: React.FC = (props) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -73,7 +72,7 @@ const GridRowGroupingColumnMenuItems = (props: GridRowGroupingColumnMenuItemsPro return renderUnGroupingMenuItem(getRowGroupingCriteriaFromGroupingField(column.field)!); }; -GridRowGroupingColumnMenuItems.propTypes = { +GridColumnMenuRowGroupItem.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -82,4 +81,4 @@ GridRowGroupingColumnMenuItems.propTypes = { onClick: PropTypes.func, } as any; -export { GridRowGroupingColumnMenuItems }; +export { GridColumnMenuRowGroupItem }; diff --git a/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItemsSimple.tsx b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItemSimple.tsx similarity index 81% rename from packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItemsSimple.tsx rename to packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItemSimple.tsx index 6d534c3d51f4..7d684cfc86d1 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridRowGroupingColumnMenuItemsSimple.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItemSimple.tsx @@ -1,7 +1,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MenuItem from '@mui/material/MenuItem'; -import { useGridSelector, gridColumnLookupSelector, GridColDef } from '@mui/x-data-grid-pro'; +import { + useGridSelector, + gridColumnLookupSelector, + GridColumnMenuItemProps, +} from '@mui/x-data-grid-pro'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector'; import { @@ -10,12 +14,9 @@ import { isGroupingColumn, } from '../hooks/features/rowGrouping/gridRowGroupingUtils'; -interface GridRowGroupingColumnMenuItemsProps { - column?: GridColDef; - onClick?: (event: React.MouseEvent) => void; -} - -const GridRowGroupingColumnMenuItemsSimple = (props: GridRowGroupingColumnMenuItemsProps) => { +const GridColumnMenuRowGroupItemSimple: React.FC = ( + props: GridColumnMenuItemProps, +) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector); @@ -49,7 +50,7 @@ const GridRowGroupingColumnMenuItemsSimple = (props: GridRowGroupingColumnMenuIt return renderUnGroupingMenuItem(getRowGroupingCriteriaFromGroupingField(column.field)!); }; -GridRowGroupingColumnMenuItemsSimple.propTypes = { +GridColumnMenuRowGroupItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -58,4 +59,4 @@ GridRowGroupingColumnMenuItemsSimple.propTypes = { onClick: PropTypes.func, } as any; -export { GridRowGroupingColumnMenuItemsSimple }; +export { GridColumnMenuRowGroupItemSimple }; diff --git a/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx similarity index 76% rename from packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx rename to packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx index 1a4bdb940400..ee2f578afd96 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItems.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx @@ -2,29 +2,28 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import { gridColumnLookupSelector, useGridSelector, GridColDef } from '@mui/x-data-grid-pro'; +import { + gridColumnLookupSelector, + useGridSelector, + GridColumnMenuItemProps, +} from '@mui/x-data-grid-pro'; import { styled } from '@mui/material/styles'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector'; -interface GridRowGroupableColumnMenuItemsProps { - column?: GridColDef; - onClick?: (event: React.MouseEvent) => void; -} - const StyledStack = styled(Stack)(({ theme }) => ({ padding: theme.spacing(1, 1.5, 1, 1.5), flexDirection: 'row', })); -const StyledButton = styled(Button)(() => ({ - fontSize: '16px', - fontWeight: '400', +const StyledButton = styled(Button)(({ theme }) => ({ + fontSize: theme.typography.pxToRem(16), + fontWeight: theme.typography.fontWeightRegular, textTransform: 'none', })); -const GridRowGroupableColumnMenuItems = (props: GridRowGroupableColumnMenuItemsProps) => { +const GridColumnMenuRowUngroupItem: React.FC = (props) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -51,16 +50,13 @@ const GridRowGroupableColumnMenuItems = (props: GridRowGroupableColumnMenuItemsP const name = columnsLookup[column.field].headerName ?? column.field; - const UngroupIcon = rootProps.components?.ColumnMenuUngroupIcon; - const GroupIcon = rootProps.components?.ColumnMenuGroupIcon; - if (rowGroupingModel.includes(column.field)) { return ( : null} + startIcon={} color="inherit" > {apiRef.current.getLocaleText('unGroupColumn')(name)} @@ -74,7 +70,7 @@ const GridRowGroupableColumnMenuItems = (props: GridRowGroupableColumnMenuItemsP : null} + startIcon={} color="inherit" > {apiRef.current.getLocaleText('groupColumn')(name)} @@ -83,7 +79,7 @@ const GridRowGroupableColumnMenuItems = (props: GridRowGroupableColumnMenuItemsP ); }; -GridRowGroupableColumnMenuItems.propTypes = { +GridColumnMenuRowUngroupItem.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -92,4 +88,4 @@ GridRowGroupableColumnMenuItems.propTypes = { onClick: PropTypes.func, } as any; -export { GridRowGroupableColumnMenuItems }; +export { GridColumnMenuRowUngroupItem }; diff --git a/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItemsSimple.tsx b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItemSimple.tsx similarity index 80% rename from packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItemsSimple.tsx rename to packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItemSimple.tsx index 034c07297c78..83c01b000a43 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridRowGroupableColumnMenuItemsSimple.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItemSimple.tsx @@ -1,16 +1,15 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MenuItem from '@mui/material/MenuItem'; -import { gridColumnLookupSelector, useGridSelector, GridColDef } from '@mui/x-data-grid-pro'; +import { + gridColumnLookupSelector, + useGridSelector, + GridColumnMenuItemProps, +} from '@mui/x-data-grid-pro'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector'; -interface GridRowGroupableColumnMenuItemsProps { - column?: GridColDef; - onClick?: (event: React.MouseEvent) => void; -} - -const GridRowGroupableColumnMenuItemsSimple = (props: GridRowGroupableColumnMenuItemsProps) => { +const GridColumnMenuRowUngroupItemSimple: React.FC = (props) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector); @@ -49,7 +48,7 @@ const GridRowGroupableColumnMenuItemsSimple = (props: GridRowGroupableColumnMenu ); }; -GridRowGroupableColumnMenuItemsSimple.propTypes = { +GridColumnMenuRowUngroupItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -58,4 +57,4 @@ GridRowGroupableColumnMenuItemsSimple.propTypes = { onClick: PropTypes.func, } as any; -export { GridRowGroupableColumnMenuItemsSimple }; +export { GridColumnMenuRowUngroupItemSimple }; diff --git a/packages/grid/x-data-grid-premium/src/components/index.ts b/packages/grid/x-data-grid-premium/src/components/index.ts index 7d08be69f7cd..78f49aaca117 100644 --- a/packages/grid/x-data-grid-premium/src/components/index.ts +++ b/packages/grid/x-data-grid-premium/src/components/index.ts @@ -1,7 +1,7 @@ export * from './GridExcelExportMenuItem'; export * from './icons'; -export * from './GridAggregationColumnMenuItem'; -export * from './GridRowGroupingColumnMenuItems'; -export * from './GridRowGroupableColumnMenuItems'; -export * from './GridRowGroupingColumnMenuItemsSimple'; -export * from './GridRowGroupableColumnMenuItemsSimple'; +export * from './GridColumnMenuAggregationItem'; +export * from './GridColumnMenuRowGroupItem'; +export * from './GridColumnMenuRowGroupItemSimple'; +export * from './GridColumnMenuRowUngroupItem'; +export * from './GridColumnMenuRowUngroupItemSimple'; diff --git a/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts b/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts index 29816ffd59c2..116ceb14d958 100644 --- a/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts +++ b/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts @@ -3,10 +3,10 @@ import { GridPremiumSlotsComponent, GridPremiumIconSlotsComponent } from '../mod import { GridWorkspacesIcon, GridGroupWorkIcon, - GridAggregationColumnMenuItem, + GridColumnMenuAggregationItem, } from '../components'; -import { GridRowGroupableColumnMenuItems } from '../components/GridRowGroupableColumnMenuItems'; -import { GridRowGroupingColumnMenuItems } from '../components/GridRowGroupingColumnMenuItems'; +import { GridColumnMenuRowUngroupItem } from '../components/GridColumnMenuRowUngroupItem'; +import { GridColumnMenuRowGroupItem } from '../components/GridColumnMenuRowGroupItem'; export const DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS: GridPremiumIconSlotsComponent = { ColumnMenuUngroupIcon: GridWorkspacesIcon, @@ -16,7 +16,7 @@ export const DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS: GridPremiumIconSlotsCom export const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS: GridPremiumSlotsComponent = { ...DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS, ...DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS, - ColumnMenuAggregationItem: GridAggregationColumnMenuItem, - ColumnMenuRowGroupingItem: GridRowGroupingColumnMenuItems, - ColumnMenuRowGroupableItem: GridRowGroupableColumnMenuItems, + ColumnMenuAggregationItem: GridColumnMenuAggregationItem, + ColumnMenuRowGroupItem: GridColumnMenuRowGroupItem, + ColumnMenuRowUngroupItem: GridColumnMenuRowUngroupItem, }; diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx index bdba7982a088..b03ae725679f 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx @@ -132,10 +132,10 @@ export const useGridAggregationPreProcessors = ( availableAggregationFunctions, }; - const Component = props.components?.ColumnMenuAggregationItem; + const ColumnMenuAggregationItem = props.components.ColumnMenuAggregationItem; const items = { ...columnMenuValue.items, - aggregation: Component ? : null, + aggregation: , }; const visibleItemKeys = insertItemsInColumnMenu( @@ -149,7 +149,7 @@ export const useGridAggregationPreProcessors = ( [ apiRef, props.aggregationFunctions, - props.components?.ColumnMenuAggregationItem, + props.components.ColumnMenuAggregationItem, props.disableAggregation, ], ); diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/index.ts b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/index.ts index 4a716de78898..1896d1be8042 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/index.ts +++ b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/index.ts @@ -3,4 +3,5 @@ export * from './gridRowGroupingInterfaces'; export { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingFieldFromGroupingCriteria, + isGroupingColumn, } from './gridRowGroupingUtils'; diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx index 9eefedb98f48..dfa89454ca6c 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx @@ -160,14 +160,14 @@ export const useGridRowGrouping = ( return columnMenuValue; } - const GroupingComponent = props.components?.ColumnMenuRowGroupingItem; - const GroupableComponent = props.components?.ColumnMenuRowGroupableItem; + const GroupComponent = props.components.ColumnMenuRowGroupItem; + const UngroupComponent = props.components.ColumnMenuRowUngroupItem; let menuItem; if (isGroupingColumn(column.field)) { - menuItem = GroupingComponent ? : null; + menuItem = ; } else if (column.groupable) { - menuItem = GroupableComponent ? : null; + menuItem = ; } else { menuItem = null; } @@ -187,8 +187,8 @@ export const useGridRowGrouping = ( return { visibleItemKeys, items }; }, [ - props.components?.ColumnMenuRowGroupableItem, - props.components?.ColumnMenuRowGroupingItem, + props.components.ColumnMenuRowUngroupItem, + props.components.ColumnMenuRowGroupItem, props.disableRowGrouping, ], ); diff --git a/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts b/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts index f6c8d893cac6..ce6c5832ed0a 100644 --- a/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts +++ b/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts @@ -9,18 +9,18 @@ export interface GridPremiumSlotsComponent extends GridProSlotsComponent, GridPremiumIconSlotsComponent { /** - * The custom Checkbox component used in the grid for both header and cells. - * @default GridAggregationColumnMenuItem + * The custom component for aggregation menu item. + * @default GridColumnMenuAggregationItem */ ColumnMenuAggregationItem: React.JSXElementConstructor; /** - * The custom Checkbox component used in the grid for both header and cells. - * @default GridRowGroupingColumnMenuItems + * The custom component for ungrouped menu item. + * @default GridColumnMenuRowUngroupItem */ - ColumnMenuRowGroupingItem: React.JSXElementConstructor; + ColumnMenuRowUngroupItem: React.JSXElementConstructor; /** - * The custom Checkbox component used in the grid for both header and cells. - * @default GridRowGroupableColumnMenuItems + * The custom component for grouped menu item. + * @default GridColumnMenuRowGroupItem */ - ColumnMenuRowGroupableItem: React.JSXElementConstructor; + ColumnMenuRowGroupItem: React.JSXElementConstructor; } diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx b/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx similarity index 78% rename from packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx rename to packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx index 07e12c5f120d..a42fa568df15 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItems.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx @@ -3,28 +3,23 @@ import PropTypes from 'prop-types'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; -import { GridColDef } from '@mui/x-data-grid'; +import { GridColumnMenuItemProps } from '@mui/x-data-grid'; import { styled } from '@mui/material/styles'; import { GridPinnedPosition } from '../hooks/features/columnPinning'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; -interface GridColumnPinningMenuItemsProps { - column?: GridColDef; - onClick?: (event: React.MouseEvent) => void; -} - const StyledStack = styled(Stack)(({ theme }) => ({ padding: theme.spacing(1, 1.5, 1, 1.5), })); -const StyledButton = styled(Button)(() => ({ - fontSize: '16px', - fontWeight: '400', +const StyledButton = styled(Button)(({ theme }) => ({ + fontSize: theme.typography.pxToRem(16), + fontWeight: theme.typography.fontWeightRegular, textTransform: 'none', })); -const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { +const GridColumnMenuPinningItem: React.FC = (props) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -51,9 +46,6 @@ const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { const side = apiRef.current.isColumnPinned(column.field); - const LeftIcon = rootProps.components?.ColumnMenuPinLeftIcon; - const RightIcon = rootProps.components?.ColumnMenuPinRightIcon; - return ( @@ -64,7 +56,7 @@ const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { onClick={ side === GridPinnedPosition.left ? unpinColumn : pinColumn(GridPinnedPosition.left) } - startIcon={LeftIcon ? : null} + startIcon={} color={side === GridPinnedPosition.left ? 'primary' : 'inherit'} > {apiRef.current.getLocaleText('pinToLeftDefault')} @@ -73,7 +65,7 @@ const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { onClick={ side === GridPinnedPosition.right ? unpinColumn : pinColumn(GridPinnedPosition.right) } - startIcon={RightIcon ? : null} + startIcon={} color={side === GridPinnedPosition.right ? 'primary' : 'inherit'} > {apiRef.current.getLocaleText('pinToRightDefault')} @@ -83,7 +75,7 @@ const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => { ); }; -GridColumnPinningMenuItems.propTypes = { +GridColumnMenuPinningItem.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -92,4 +84,4 @@ GridColumnPinningMenuItems.propTypes = { onClick: PropTypes.func, } as any; -export { GridColumnPinningMenuItems }; +export { GridColumnMenuPinningItem }; diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItemsSimple.tsx b/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItemSimple.tsx similarity index 85% rename from packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItemsSimple.tsx rename to packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItemSimple.tsx index 70a6d536e5b6..fceb5ff2e258 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridColumnPinningMenuItemsSimple.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItemSimple.tsx @@ -1,16 +1,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MenuItem from '@mui/material/MenuItem'; -import { GridColDef } from '@mui/x-data-grid'; +import { GridColumnMenuItemProps } from '@mui/x-data-grid'; import { GridPinnedPosition } from '../hooks/features/columnPinning'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; -interface GridColumnPinningMenuItemsProps { - column?: GridColDef; - onClick?: (event: React.MouseEvent) => void; -} - -const GridColumnPinningMenuItemsSimple = (props: GridColumnPinningMenuItemsProps) => { +const GridColumnMenuPinningItemSimple: React.FC = (props) => { const { column, onClick } = props; const apiRef = useGridApiContext(); @@ -61,7 +56,7 @@ const GridColumnPinningMenuItemsSimple = (props: GridColumnPinningMenuItemsProps ); }; -GridColumnPinningMenuItemsSimple.propTypes = { +GridColumnMenuPinningItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -70,4 +65,4 @@ GridColumnPinningMenuItemsSimple.propTypes = { onClick: PropTypes.func, } as any; -export { GridColumnPinningMenuItemsSimple }; +export { GridColumnMenuPinningItemSimple }; diff --git a/packages/grid/x-data-grid-pro/src/components/index.ts b/packages/grid/x-data-grid-pro/src/components/index.ts index 543d5a5ad2da..75a3bdb4c9fa 100644 --- a/packages/grid/x-data-grid-pro/src/components/index.ts +++ b/packages/grid/x-data-grid-pro/src/components/index.ts @@ -1,6 +1,6 @@ // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro` export * from './GridTreeDataGroupingCell'; -export * from './GridColumnPinningMenuItems'; -export * from './GridColumnPinningMenuItemsSimple'; +export * from './GridColumnMenuPinningItem'; +export * from './GridColumnMenuPinningItemSimple'; export * from './GridDetailPanelToggleCell'; export * from './icons'; diff --git a/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts b/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts index dcf9761bc512..23cfb06716a1 100644 --- a/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts +++ b/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts @@ -3,7 +3,7 @@ import { GridProSlotsComponent, GridProIconSlotsComponent } from '../models'; import { GridPushPinRightIcon, GridPushPinLeftIcon, - GridColumnPinningMenuItems, + GridColumnMenuPinningItem, } from '../components'; export const DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS: GridProIconSlotsComponent = { @@ -14,5 +14,5 @@ export const DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS: GridProIconSlotsComponent = export const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS: GridProSlotsComponent = { ...DATA_GRID_DEFAULT_SLOTS_COMPONENTS, ...DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS, - ColumnMenuPinningItem: GridColumnPinningMenuItems, + ColumnMenuPinningItem: GridColumnMenuPinningItem, }; diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx index 8b414a1577a8..3bbf67742fd6 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx @@ -183,11 +183,11 @@ export const useGridColumnPinning = ( return columnMenuValue; } - const Component = props.components?.ColumnMenuPinningItem; + const ColumnMenuPinningItem = props.components.ColumnMenuPinningItem; const items = { ...columnMenuValue.items, - pinning: Component ? : null, + pinning: , }; const visibleItemKeys = insertItemsInColumnMenu( diff --git a/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts b/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts index 64ed013f44f2..ac2d1a844eda 100644 --- a/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts +++ b/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts @@ -9,7 +9,7 @@ import { GridProIconSlotsComponent } from './gridProIconSlotsComponent'; export interface GridProSlotsComponent extends GridSlotsComponent, GridProIconSlotsComponent { /** * The custom Checkbox component used in the grid for both header and cells. - * @default GridColumnPinningMenuItems + * @default GridColumnMenuPinningItems */ ColumnMenuPinningItem: React.JSXElementConstructor; } diff --git a/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts b/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts index 448e2d83fef3..3d4bd49fb33f 100644 --- a/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts +++ b/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts @@ -1,17 +1,17 @@ -import { GridColumnMenuValue, GridColumnMenuTypes } from '@mui/x-data-grid'; +import { GridColumnMenuValue, GridColumnMenuKey } from '@mui/x-data-grid'; /** * Method used to insert specific items after an item in column menu * * @param {GridColumnMenuValue['visibleItemKeys']} visibleKeys ordered list of keys for column menu items * @param {GridColumnMenuValue['visibleItemKeys']} newKeys new keys to be inserted - * @param {GridColumnMenuTypes['key'] | undefined} afterKey key of the item after which the new keys should be inserted + * @param {GridColumnMenuKey | undefined} afterKey key of the item after which the new keys should be inserted * @returns {GridColumnMenuValue['visibleItemKeys']} updated keys */ export const insertItemsInColumnMenu = ( visibleKeys: GridColumnMenuValue['visibleItemKeys'], newKeys: GridColumnMenuValue['visibleItemKeys'], - afterKey: GridColumnMenuTypes['key'] | undefined, + afterKey: GridColumnMenuKey | undefined, ) => { if (!afterKey) { return [...visibleKeys, ...newKeys]; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx index c5b2cd094712..f9687bd65711 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { GridColumnMenuTypes, GridColumnMenuValue } from '../../../hooks/features/columnMenu'; +import { GridColumnMenuKey } from '../../../hooks/features/columnMenu'; import { GridColumnMenuProps } from './GridColumnMenuProps'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; @@ -21,7 +21,7 @@ const GridColumnMenu = (props: GridColumnMenuProps) => { currentColumn, ); - const extendedColumnMenuItems: GridColumnMenuValue['items'] = React.useMemo(() => { + const extendedColumnMenuItems = React.useMemo(() => { if (!userMenuItems || !Object.keys(userMenuItems).length) { return preProcessedValue.items; } @@ -29,29 +29,35 @@ const GridColumnMenu = (props: GridColumnMenuProps) => { return { ...preProcessedValue.items, ...userMenuItems }; }, [preProcessedValue.items, userMenuItems]); - const filteredAndSortedItems = React.useMemo(() => { + const filteredAndSortedItemKeys = React.useMemo(() => { const filterCallback = currentColumn.getVisibleColumnMenuItems ?? props.getVisibleColumnMenuItems; + const itemKeys = Object.keys(extendedColumnMenuItems) as Array; + const filteredItemKeys = !filterCallback || typeof filterCallback !== 'function' ? preProcessedValue.visibleItemKeys - : filterCallback(Object.keys(extendedColumnMenuItems) as Array); + : filterCallback({ itemKeys, column: currentColumn, visibleItemKeys: defaultVisibleItems }); const visibleItems = filteredItemKeys || defaultVisibleItems; - return visibleItems.map((itemName) => extendedColumnMenuItems[itemName]); + return visibleItems; }, [ - currentColumn.getVisibleColumnMenuItems, + currentColumn, props.getVisibleColumnMenuItems, - preProcessedValue.visibleItemKeys, extendedColumnMenuItems, + preProcessedValue.visibleItemKeys, defaultVisibleItems, ]); return ( - {filteredAndSortedItems.map((component: any, index: number) => { + {filteredAndSortedItemKeys.map((itemKey, index: number) => { + const component = extendedColumnMenuItems[itemKey]; + if (!component) { + return null; + } const itemProps = { onClick: hideMenu, column: currentColumn, @@ -74,19 +80,19 @@ GridColumnMenu.propTypes = { * If the item is already registered, it will be overwritten otherwise a new item will be registered */ columnMenuItems: PropTypes.shape({ - divider: PropTypes.node, - filter: PropTypes.node, - hideColumn: PropTypes.node, - manageColumns: PropTypes.node, - sorting: PropTypes.node, + divider: PropTypes.element, + filter: PropTypes.element, + hideColumn: PropTypes.element, + manageColumns: PropTypes.element, + sorting: PropTypes.element, }), currentColumn: PropTypes.object.isRequired, defaultMenuItems: PropTypes.shape({ - divider: PropTypes.node, - filter: PropTypes.node, - hideColumn: PropTypes.node, - manageColumns: PropTypes.node, - sorting: PropTypes.node, + divider: PropTypes.element, + filter: PropTypes.element, + hideColumn: PropTypes.element, + manageColumns: PropTypes.element, + sorting: PropTypes.element, }).isRequired, /** * Default column menu items in order that needs to be shown diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts index 58bc21fec5d2..4da0a482d7d0 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts @@ -1,6 +1,10 @@ import * as React from 'react'; import { GridColDef } from '../../../models/colDef/gridColDef'; -import { GridColumnMenuValue, GridColumnMenuTypes } from '../../../hooks/features/columnMenu'; +import { + GridColumnMenuValue, + GridColumnMenuKey, + GetVisibleColumnMenuItemsArgs, +} from '../../../hooks/features/columnMenu'; export interface GridColumnMenuProps extends React.HTMLAttributes { hideMenu: (event: React.SyntheticEvent) => void; @@ -12,10 +16,8 @@ export interface GridColumnMenuProps extends React.HTMLAttributes; - getVisibleColumnMenuItems?: ( - items: Array, - ) => Array; + defaultVisibleItems: Array; + getVisibleColumnMenuItems?: (args: GetVisibleColumnMenuItemsArgs) => Array; /** * To override existing and add new items in column menu * If the item is already registered, it will be overwritten otherwise a new item will be registered diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuColumnsItem.tsx similarity index 91% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx rename to packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuColumnsItem.tsx index ab6e3a217c2f..a1d0db0d330f 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnsMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuColumnsItem.tsx @@ -13,7 +13,7 @@ const StyledStack = styled(Stack)(({ theme }) => ({ flexDirection: 'row', })); -const GridColumnsMenuItem = (props: GridColumnMenuItemProps) => { +const GridColumnMenuColumnsItem = (props: GridColumnMenuItemProps) => { const { onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -42,7 +42,7 @@ const GridColumnsMenuItem = (props: GridColumnMenuItemProps) => { ); }; -GridColumnsMenuItem.propTypes = { +GridColumnMenuColumnsItem.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -51,4 +51,4 @@ GridColumnsMenuItem.propTypes = { onClick: PropTypes.func, } as any; -export { GridColumnsMenuItem }; +export { GridColumnMenuColumnsItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx index 08dbd81b7034..206b4ad70c08 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx @@ -9,7 +9,7 @@ import { gridClasses } from '../../../../constants/gridClasses'; const GridColumnMenuContainerRoot = styled('div')(({ theme }) => ({ display: 'flex', flexDirection: 'column', - minWidth: '248px', + minWidth: theme.typography.pxToRem(248), padding: theme.spacing(1, 0), })); diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx index a194b8a8e93a..9ff47c3609df 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx @@ -1,19 +1,19 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Divider from '@mui/material/Divider'; -import { GridColumnMenuValue, GridColumnMenuTypes } from '../../../../hooks/features/columnMenu'; +import { GridColumnMenuValue, GridColumnMenuKey } from '../../../../hooks/features/columnMenu'; import { GridColumnMenuContainer } from './GridColumnMenuContainer'; import { GridColumnMenu } from '../GridColumnMenu'; import { GridColumnMenuProps } from '../GridColumnMenuProps'; -import { GridColumnsMenuItem } from './GridColumnsMenuItem'; -import { GridFilterMenuItem } from './GridFilterMenuItem'; -import { HideGridColMenuItem } from './HideGridColMenuItem'; -import { SortGridMenuItems } from './SortGridMenuItems'; +import { GridColumnMenuColumnsItem } from './GridColumnMenuColumnsItem'; +import { GridColumnMenuFilterItem } from './GridColumnMenuFilterItem'; +import { GridColumnMenuHideItem } from './GridColumnMenuHideItem'; +import { GridColumnMenuSortItem } from './GridColumnMenuSortItem'; export interface GridColumnMenuDefaultProps extends Pick {} -const defaultVisibleItems: Array = [ +const defaultVisibleItems: Array = [ 'sorting', 'divider', 'filter', @@ -25,13 +25,11 @@ const defaultVisibleItems: Array = [ const GridColumnMenuDefault = React.forwardRef( function GridColumnMenuDefault(props: GridColumnMenuDefaultProps, ref) { - // TODO: Figure out a workaround - // @ts-ignore as it's not getting proper types due to overrides from Pro/Premium const defaultMenuItems: GridColumnMenuValue['items'] = { - sorting: , - filter: , - hideColumn: , - manageColumns: , + sorting: , + filter: , + hideColumn: , + manageColumns: , divider: , }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuFilterItem.tsx similarity index 70% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx rename to packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuFilterItem.tsx index f8952b61f203..9c0de8156d3f 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridFilterMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuFilterItem.tsx @@ -6,7 +6,10 @@ import Stack from '@mui/material/Stack'; import { styled } from '@mui/material/styles'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { useGridSelector } from '../../../../hooks/utils/useGridSelector'; -import { gridFilterModelSelector } from '../../../../hooks/features/filter/gridFilterSelector'; +import { + gridFilterModelSelector, + gridFilterActiveItemsLookupSelector, +} from '../../../../hooks/features/filter/gridFilterSelector'; import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; @@ -16,24 +19,23 @@ const StyledStack = styled(Stack)(({ theme }) => ({ justifyContent: 'space-between', })); -const StyledButton = styled(Button)(() => ({ - fontSize: '16px', - fontWeight: '400', +const StyledButton = styled(Button)(({ theme }) => ({ + fontSize: theme.typography.pxToRem(16), + fontWeight: theme.typography.fontWeightRegular, textTransform: 'none', })); -const GridFilterMenuItem = (props: GridColumnMenuItemProps) => { +const GridColumnMenuFilterItem = (props: GridColumnMenuItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const filterModel = useGridSelector(apiRef, gridFilterModelSelector); + const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector); - const isColumnFiltered = React.useMemo(() => { - if (filterModel.items.length <= 0) { - return false; - } - return filterModel.items.some((item) => item.columnField === column?.field); - }, [column?.field, filterModel.items]); + const filtersForCurrentColumn = React.useMemo( + () => (column?.field ? filterColumnLookup[column.field] ?? [] : []), + [column?.field, filterColumnLookup], + ); const showFilter = React.useCallback( (event: React.MouseEvent) => { @@ -44,12 +46,12 @@ const GridFilterMenuItem = (props: GridColumnMenuItemProps) => { ); const clearFilters = React.useCallback(() => { - if (isColumnFiltered) { + if (filtersForCurrentColumn.length) { apiRef.current.upsertFilterItems( filterModel.items.filter((item) => item.columnField !== column?.field), ); } - }, [apiRef, column?.field, filterModel.items, isColumnFiltered]); + }, [apiRef, column?.field, filterModel.items, filtersForCurrentColumn]); if (rootProps.disableColumnFilter || !column?.filterable) { return null; @@ -60,21 +62,21 @@ const GridFilterMenuItem = (props: GridColumnMenuItemProps) => { } - color={isColumnFiltered ? 'primary' : 'inherit'} + color={filtersForCurrentColumn.length ? 'primary' : 'inherit'} aria-label={apiRef.current.getLocaleText('columnMenuFilter') as string} > {apiRef.current.getLocaleText('columnMenuFilter')} - {isColumnFiltered && ( + {filtersForCurrentColumn.length ? ( - )} + ) : null} ); }; -GridFilterMenuItem.propTypes = { +GridColumnMenuFilterItem.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -83,4 +85,4 @@ GridFilterMenuItem.propTypes = { onClick: PropTypes.func, } as any; -export { GridFilterMenuItem }; +export { GridColumnMenuFilterItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuHideItem.tsx similarity index 90% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx rename to packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuHideItem.tsx index acd9d8a322f8..1a6490029bba 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/HideGridColMenuItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuHideItem.tsx @@ -14,13 +14,13 @@ const StyledStack = styled(Stack)(({ theme }) => ({ justifyContent: 'space-between', })); -const StyledButton = styled(Button)(() => ({ - fontSize: '16px', - fontWeight: '400', +const StyledButton = styled(Button)(({ theme }) => ({ + fontSize: theme.typography.pxToRem(16), + fontWeight: theme.typography.fontWeightRegular, textTransform: 'none', })); -const HideGridColMenuItem = (props: GridColumnMenuItemProps) => { +const GridColumnMenuHideItem = (props: GridColumnMenuItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -78,7 +78,7 @@ const HideGridColMenuItem = (props: GridColumnMenuItemProps) => { ); }; -HideGridColMenuItem.propTypes = { +GridColumnMenuHideItem.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -87,4 +87,4 @@ HideGridColMenuItem.propTypes = { onClick: PropTypes.func, } as any; -export { HideGridColMenuItem }; +export { GridColumnMenuHideItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuSortItem.tsx similarity index 90% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx rename to packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuSortItem.tsx index 32d803564740..89c213d453cf 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/SortGridMenuItems.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuSortItem.tsx @@ -15,12 +15,12 @@ const StyledStack = styled(Stack)(({ theme }) => ({ padding: theme.spacing(0.5, 1.5, 0.5, 1.5), })); -const StyledButton = styled(Button)(() => ({ - fontSize: '16px', - fontWeight: '400', +const StyledButton = styled(Button)(({ theme }) => ({ + fontSize: theme.typography.pxToRem(16), + fontWeight: theme.typography.fontWeightRegular, })); -const SortGridMenuItems = (props: GridColumnMenuItemProps) => { +const GridColumnMenuSortItem = (props: GridColumnMenuItemProps) => { const { column } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -76,7 +76,7 @@ const SortGridMenuItems = (props: GridColumnMenuItemProps) => { ); }; -SortGridMenuItems.propTypes = { +GridColumnMenuSortItem.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -85,4 +85,4 @@ SortGridMenuItems.propTypes = { onClick: PropTypes.func, } as any; -export { SortGridMenuItems }; +export { GridColumnMenuSortItem }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts index 83e0f037ea84..faa97ed7729c 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts @@ -1,6 +1,9 @@ -export * from './GridColumnsMenuItem'; -export * from './GridFilterMenuItem'; -export * from './HideGridColMenuItem'; +// items +export * from './GridColumnMenuColumnsItem'; +export * from './GridColumnMenuFilterItem'; +export * from './GridColumnMenuHideItem'; +export * from './GridColumnMenuSortItem'; + +// components export * from './GridColumnMenuContainer'; export * from './GridColumnMenuDefault'; -export * from './SortGridMenuItems'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuColumnsItemSimple.tsx similarity index 89% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx rename to packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuColumnsItemSimple.tsx index e0bd6591f7f9..022631cd409e 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnsMenuSimpleItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuColumnsItemSimple.tsx @@ -6,7 +6,7 @@ import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; -const GridColumnsMenuSimpleItem = (props: GridColumnMenuItemProps) => { +const GridColumnMenuColumnsItemSimple = (props: GridColumnMenuItemProps) => { const { onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -30,7 +30,7 @@ const GridColumnsMenuSimpleItem = (props: GridColumnMenuItemProps) => { ); }; -GridColumnsMenuSimpleItem.propTypes = { +GridColumnMenuColumnsItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -39,4 +39,4 @@ GridColumnsMenuSimpleItem.propTypes = { onClick: PropTypes.func, } as any; -export { GridColumnsMenuSimpleItem }; +export { GridColumnMenuColumnsItemSimple }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridFilterMenuSimpleItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuFilterItemSimple.tsx similarity index 88% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridFilterMenuSimpleItem.tsx rename to packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuFilterItemSimple.tsx index 5d50613e7b58..0b12f3990496 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridFilterMenuSimpleItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuFilterItemSimple.tsx @@ -5,7 +5,7 @@ import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; -const GridFilterMenuSimpleItem = (props: GridColumnMenuItemProps) => { +const GridColumnMenuFilterItemSimple = (props: GridColumnMenuItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -27,7 +27,7 @@ const GridFilterMenuSimpleItem = (props: GridColumnMenuItemProps) => { ); }; -GridFilterMenuSimpleItem.propTypes = { +GridColumnMenuFilterItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -36,4 +36,4 @@ GridFilterMenuSimpleItem.propTypes = { onClick: PropTypes.func, } as any; -export { GridFilterMenuSimpleItem }; +export { GridColumnMenuFilterItemSimple }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuHideItemSimple.tsx similarity index 93% rename from packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx rename to packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuHideItemSimple.tsx index f1ef9535e6ea..c2196626d2fd 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/HideGridColMenuSimpleItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuHideItemSimple.tsx @@ -6,7 +6,7 @@ import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; import { gridVisibleColumnDefinitionsSelector } from '../../../../hooks/features/columns'; -const HideGridColMenuSimpleItem = (props: GridColumnMenuItemProps) => { +const GridColumnMenuHideItemSimple = (props: GridColumnMenuItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -59,7 +59,7 @@ const HideGridColMenuSimpleItem = (props: GridColumnMenuItemProps) => { ); }; -HideGridColMenuSimpleItem.propTypes = { +GridColumnMenuHideItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -68,4 +68,4 @@ HideGridColMenuSimpleItem.propTypes = { onClick: PropTypes.func, } as any; -export { HideGridColMenuSimpleItem }; +export { GridColumnMenuHideItemSimple }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index e338f3c818c1..6851ca8c8cf8 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Divider from '@mui/material/Divider'; -import { GridColumnMenuTypes } from '../../../../hooks/features/columnMenu'; +import { GridColumnMenuKey } from '../../../../hooks/features/columnMenu'; import { GridColumnMenuSimpleContainer } from './GridColumnMenuSimpleContainer'; import { GridColumnMenuProps } from '../GridColumnMenuProps'; -import { GridColumnsMenuSimpleItem } from './GridColumnsMenuSimpleItem'; -import { GridFilterMenuSimpleItem } from './GridFilterMenuSimpleItem'; -import { HideGridColMenuSimpleItem } from './HideGridColMenuSimpleItem'; -import { SortGridMenuSimpleItems } from './SortGridMenuSimpleItems'; +import { GridColumnMenuColumnsItemSimple } from './GridColumnMenuColumnsItemSimple'; +import { GridColumnMenuFilterItemSimple } from './GridColumnMenuFilterItemSimple'; +import { GridColumnMenuHideItemSimple } from './GridColumnMenuHideItemSimple'; +import { GridColumnMenuSortItemSimple } from './GridColumnMenuSortItemSimple'; import { GridColumnMenu } from '../GridColumnMenu'; interface Props @@ -16,7 +16,7 @@ interface Props 'hideMenu' | 'currentColumn' | 'open' | 'getVisibleColumnMenuItems' > {} -const defaultVisibleItems: Array = [ +const defaultVisibleItems: Array = [ 'sorting', 'filter', 'hideColumn', @@ -26,17 +26,16 @@ const defaultVisibleItems: Array = [ const GridColumnMenuSimple = React.forwardRef( function GridColumnMenuSimple(props: Props, ref) { const defaultMenuItems = { - sorting: , - filter: , - hideColumn: , - manageColumns: , + sorting: , + filter: , + hideColumn: , + manageColumns: , divider: , }; return ( { +const GridColumnMenuSortItemSimple = (props: GridColumnMenuItemProps) => { const { column, onClick } = props; const apiRef = useGridApiContext(); const sortModel = useGridSelector(apiRef, gridSortModelSelector); @@ -51,7 +51,7 @@ const SortGridMenuSimpleItems = (props: GridColumnMenuItemProps) => { ); }; -SortGridMenuSimpleItems.propTypes = { +GridColumnMenuSortItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | @@ -60,4 +60,4 @@ SortGridMenuSimpleItems.propTypes = { onClick: PropTypes.func, } as any; -export { SortGridMenuSimpleItems }; +export { GridColumnMenuSortItemSimple }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts index b9cfd73f12d2..bf2d82db7417 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts @@ -1,6 +1,9 @@ -export * from './GridColumnsMenuSimpleItem'; -export * from './GridFilterMenuSimpleItem'; -export * from './GridColumnMenuSimple'; -export * from './HideGridColMenuSimpleItem'; -export * from './SortGridMenuSimpleItems'; +// items +export * from './GridColumnMenuColumnsItemSimple'; +export * from './GridColumnMenuFilterItemSimple'; +export * from './GridColumnMenuHideItemSimple'; +export * from './GridColumnMenuSortItemSimple'; + +// components export * from './GridColumnMenuSimpleContainer'; +export * from './GridColumnMenuSimple'; diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts index 2cfc6d11b3ae..0c7b2e80609c 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts @@ -1,5 +1,8 @@ import { OverridableStringUnion } from '@mui/types'; import React from 'react'; +// TODO Fix cyclic deps +// eslint-disable-next-line import/no-cycle +import { GridColDef } from '../../../models/colDef/gridColDef'; export interface GridColumnMenuState { open: boolean; @@ -12,17 +15,18 @@ export interface GridColumnMenuKeysInternalOverrides {} // To be used by users for overriding export interface GridColumnMenuKeysOverrides {} -export interface GridColumnMenuTypes { - key: OverridableStringUnion< - OverridableStringUnion< - 'filter' | 'sorting' | 'hideColumn' | 'manageColumns' | 'divider', - GridColumnMenuKeysInternalOverrides - >, - GridColumnMenuKeysOverrides - >; -} +export type GridColumnMenuKey = OverridableStringUnion< + 'filter' | 'sorting' | 'hideColumn' | 'manageColumns' | 'divider', + GridColumnMenuKeysInternalOverrides & GridColumnMenuKeysOverrides +>; export interface GridColumnMenuValue { - items: { [key in GridColumnMenuTypes['key']]: React.ReactNode }; - visibleItemKeys: Array; + items: { [key in GridColumnMenuKey]?: React.ReactElement }; + visibleItemKeys: Array; +} + +export interface GetVisibleColumnMenuItemsArgs { + visibleItemKeys: Array; + itemKeys: Array; + column: GridColDef; } diff --git a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts b/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts index 591fd46d3d26..83e508a4e724 100644 --- a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts +++ b/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts @@ -2,7 +2,8 @@ import * as React from 'react'; import { GridCellClassNamePropType } from '../gridCellClass'; import { GridColumnHeaderClassNamePropType } from '../gridColumnHeaderClass'; import { GridFilterOperator } from '../gridFilterOperator'; -import { GridColumnMenuTypes } from '../../hooks/features/columnMenu'; +// eslint-disable-next-line import/no-cycle +import { GridColumnMenuKey, GetVisibleColumnMenuItemsArgs } from '../../hooks/features/columnMenu'; import { GridCellParams, GridRenderCellParams, @@ -243,12 +244,10 @@ export interface GridColDef { colSpan?: number | ((params: GridCellParams) => number | undefined); /** * Recieves registered column menu items and should return the items which should be shown. - * @param {Array} keys Registered column menu items. - * @returns {Array} Keys of items which are needed to be shown. + * @param {GetVisibleColumnMenuItemsArgs} args Arguments of type GetVisibleColumnMenuItemsArgs. + * @returns {Array} Keys of items which are needed to be shown. */ - getVisibleColumnMenuItems?: ( - keys: Array, - ) => Array; + getVisibleColumnMenuItems?: (args: GetVisibleColumnMenuItemsArgs) => Array; } export interface GridActionsColDef diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index f9e3f4e90416..7144a6e3f09e 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -13,11 +13,13 @@ { "name": "CursorCoordinates", "kind": "Interface" }, { "name": "daDK", "kind": "Variable" }, { "name": "DATA_GRID_DEFAULT_SLOTS_COMPONENTS", "kind": "Variable" }, + { "name": "DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS", "kind": "Variable" }, { "name": "DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES", "kind": "Variable" }, { "name": "DataGridPremium", "kind": "Variable" }, { "name": "DataGridPremiumProps", "kind": "Interface" }, { "name": "deDE", "kind": "Variable" }, { "name": "DEFAULT_GRID_COL_TYPE_KEY", "kind": "Variable" }, + { "name": "DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS", "kind": "Variable" }, { "name": "ElementSize", "kind": "Interface" }, { "name": "elGR", "kind": "Variable" }, { "name": "enUS", "kind": "Variable" }, @@ -46,6 +48,7 @@ { "name": "getGridStringQuickFilterFn", "kind": "Variable" }, { "name": "getGroupRowIdFromPath", "kind": "Variable" }, { "name": "getRowGroupingFieldFromGroupingCriteria", "kind": "Variable" }, + { "name": "GetVisibleColumnMenuItemsArgs", "kind": "Interface" }, { "name": "GRID_ACTIONS_COL_DEF", "kind": "Variable" }, { "name": "GRID_ACTIONS_COLUMN_TYPE", "kind": "Variable" }, { "name": "GRID_AGGREGATION_FUNCTIONS", "kind": "Variable" }, @@ -124,6 +127,7 @@ { "name": "gridClasses", "kind": "Variable" }, { "name": "GridClasses", "kind": "Interface" }, { "name": "GridClassKey", "kind": "TypeAlias" }, + { "name": "GridClearIcon", "kind": "Variable" }, { "name": "GridClipboardApi", "kind": "Interface" }, { "name": "GridCloseIcon", "kind": "Variable" }, { "name": "GridColDef", "kind": "Interface" }, @@ -165,16 +169,41 @@ { "name": "GridColumnLookup", "kind": "TypeAlias" }, { "name": "gridColumnLookupSelector", "kind": "Variable" }, { "name": "GridColumnMenu", "kind": "Variable" }, + { "name": "GridColumnMenuAggregationItem", "kind": "Variable" }, + { "name": "GridColumnMenuAggregationItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuApi", "kind": "Interface" }, + { "name": "GridColumnMenuColumnsItem", "kind": "Variable" }, + { "name": "GridColumnMenuColumnsItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuContainer", "kind": "Variable" }, + { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, + { "name": "GridColumnMenuDefault", "kind": "Variable" }, + { "name": "GridColumnMenuDefaultProps", "kind": "Interface" }, + { "name": "GridColumnMenuFilterItem", "kind": "Variable" }, + { "name": "GridColumnMenuFilterItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuHideItem", "kind": "Variable" }, + { "name": "GridColumnMenuHideItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuItemProps", "kind": "Interface" }, + { "name": "GridColumnMenuKey", "kind": "TypeAlias" }, + { "name": "GridColumnMenuKeysInternalOverrides", "kind": "Interface" }, + { "name": "GridColumnMenuKeysOverrides", "kind": "Interface" }, + { "name": "GridColumnMenuPinningItem", "kind": "Variable" }, + { "name": "GridColumnMenuPinningItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuProps", "kind": "Interface" }, + { "name": "GridColumnMenuRowGroupItem", "kind": "Variable" }, + { "name": "GridColumnMenuRowGroupItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuRowUngroupItem", "kind": "Variable" }, + { "name": "GridColumnMenuRowUngroupItemSimple", "kind": "Variable" }, { "name": "gridColumnMenuSelector", "kind": "Variable" }, + { "name": "GridColumnMenuSimple", "kind": "Variable" }, + { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, + { "name": "GridColumnMenuSortItem", "kind": "Variable" }, + { "name": "GridColumnMenuSortItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuState", "kind": "Interface" }, + { "name": "GridColumnMenuValue", "kind": "Interface" }, { "name": "GridColumnNode", "kind": "TypeAlias" }, { "name": "GridColumnOrderChangeParams", "kind": "Interface" }, { "name": "GridColumnPinningApi", "kind": "Interface" }, { "name": "GridColumnPinningInternalCache", "kind": "Interface" }, - { "name": "GridColumnPinningMenuItems", "kind": "Function" }, { "name": "GridColumnPinningState", "kind": "TypeAlias" }, { "name": "gridColumnPositionsSelector", "kind": "Variable" }, { "name": "gridColumnReorderDragColSelector", "kind": "Variable" }, @@ -186,7 +215,6 @@ { "name": "GridColumns", "kind": "TypeAlias" }, { "name": "GridColumnsGroupingState", "kind": "Interface" }, { "name": "GridColumnsInitialState", "kind": "Interface" }, - { "name": "GridColumnsMenuItem", "kind": "Function" }, { "name": "GridColumnsMeta", "kind": "Interface" }, { "name": "gridColumnsMetaSelector", "kind": "Variable" }, { "name": "GridColumnsPanel", "kind": "Function" }, @@ -298,9 +326,7 @@ { "name": "GridFilterInputValue", "kind": "Function" }, { "name": "GridFilterInputValueProps", "kind": "TypeAlias" }, { "name": "GridFilterItem", "kind": "Interface" }, - { "name": "GridFilterItemProps", "kind": "Interface" }, { "name": "GridFilterListIcon", "kind": "Variable" }, - { "name": "GridFilterMenuItem", "kind": "Function" }, { "name": "GridFilterModel", "kind": "Interface" }, { "name": "gridFilterModelSelector", "kind": "Variable" }, { "name": "GridFilterOperator", "kind": "Interface" }, @@ -325,6 +351,7 @@ { "name": "GridGroupingRules", "kind": "TypeAlias" }, { "name": "GridGroupingValueGetterParams", "kind": "Interface" }, { "name": "GridGroupNode", "kind": "TypeAlias" }, + { "name": "GridGroupWorkIcon", "kind": "Variable" }, { "name": "GridHeader", "kind": "Variable" }, { "name": "GridHeaderCheckbox", "kind": "Variable" }, { "name": "GridHeaderPlaceholder", "kind": "Function" }, @@ -386,11 +413,17 @@ { "name": "GridPreferencePanelsValue", "kind": "Enum" }, { "name": "GridPreferencesPanel", "kind": "Variable" }, { "name": "GridPreferencesPanelApi", "kind": "Interface" }, + { "name": "GridPremiumIconSlotsComponent", "kind": "Interface" }, + { "name": "GridPremiumSlotsComponent", "kind": "Interface" }, { "name": "GridPreProcessEditCellProps", "kind": "Interface" }, { "name": "GridPrintExportApi", "kind": "Interface" }, { "name": "GridPrintExportMenuItem", "kind": "Function" }, { "name": "GridPrintExportMenuItemProps", "kind": "TypeAlias" }, { "name": "GridPrintExportOptions", "kind": "Interface" }, + { "name": "GridProIconSlotsComponent", "kind": "Interface" }, + { "name": "GridProSlotsComponent", "kind": "Interface" }, + { "name": "GridPushPinLeftIcon", "kind": "Variable" }, + { "name": "GridPushPinRightIcon", "kind": "Variable" }, { "name": "gridQuickFilterValuesSelector", "kind": "Variable" }, { "name": "GridRemoveIcon", "kind": "Variable" }, { "name": "GridRenderCellParams", "kind": "Interface" }, @@ -530,9 +563,11 @@ { "name": "GridValueGetterParams", "kind": "Interface" }, { "name": "GridValueOptionsParams", "kind": "Interface" }, { "name": "GridValueSetterParams", "kind": "Interface" }, + { "name": "GridViewColumnIcon", "kind": "Variable" }, { "name": "GridViewHeadlineIcon", "kind": "Variable" }, { "name": "GridViewStreamIcon", "kind": "Variable" }, { "name": "GridVirtualScrollerApi", "kind": "Interface" }, + { "name": "GridVisibilityOffIcon", "kind": "Variable" }, { "name": "gridVisibleColumnDefinitionsSelector", "kind": "Variable" }, { "name": "gridVisibleColumnFieldsSelector", "kind": "Variable" }, { "name": "gridVisibleRowCountSelector", "kind": "Variable" }, @@ -542,10 +577,11 @@ { "name": "gridVisibleSortedRowIdsSelector", "kind": "Variable" }, { "name": "gridVisibleSortedTopLevelRowEntriesSelector", "kind": "Variable" }, { "name": "gridVisibleTopLevelRowCountSelector", "kind": "Variable" }, + { "name": "GridWorkspacesIcon", "kind": "Variable" }, { "name": "heIL", "kind": "Variable" }, - { "name": "HideGridColMenuItem", "kind": "Function" }, { "name": "huHU", "kind": "Variable" }, - { "name": "insertItemsInMenu", "kind": "Variable" }, + { "name": "insertItemsInColumnMenu", "kind": "Variable" }, + { "name": "isGroupingColumn", "kind": "Variable" }, { "name": "isLeaf", "kind": "Function" }, { "name": "itIT", "kind": "Variable" }, { "name": "jaJP", "kind": "Variable" }, @@ -571,7 +607,6 @@ { "name": "selectedGridRowsSelector", "kind": "Variable" }, { "name": "selectedIdsLookupSelector", "kind": "Variable" }, { "name": "skSK", "kind": "Variable" }, - { "name": "SortGridMenuItems", "kind": "Function" }, { "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" }, { "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" }, { "name": "svSE", "kind": "Variable" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index a12e11376dff..7122b26132f1 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -12,11 +12,13 @@ { "name": "CursorCoordinates", "kind": "Interface" }, { "name": "daDK", "kind": "Variable" }, { "name": "DATA_GRID_DEFAULT_SLOTS_COMPONENTS", "kind": "Variable" }, + { "name": "DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS", "kind": "Variable" }, { "name": "DATA_GRID_PRO_PROPS_DEFAULT_VALUES", "kind": "Variable" }, { "name": "DataGridPro", "kind": "Variable" }, { "name": "DataGridProProps", "kind": "Interface" }, { "name": "deDE", "kind": "Variable" }, { "name": "DEFAULT_GRID_COL_TYPE_KEY", "kind": "Variable" }, + { "name": "DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS", "kind": "Variable" }, { "name": "ElementSize", "kind": "Interface" }, { "name": "elGR", "kind": "Variable" }, { "name": "enUS", "kind": "Variable" }, @@ -43,6 +45,7 @@ { "name": "getGridStringOperators", "kind": "Variable" }, { "name": "getGridStringQuickFilterFn", "kind": "Variable" }, { "name": "getGroupRowIdFromPath", "kind": "Variable" }, + { "name": "GetVisibleColumnMenuItemsArgs", "kind": "Interface" }, { "name": "GRID_ACTIONS_COL_DEF", "kind": "Variable" }, { "name": "GRID_ACTIONS_COLUMN_TYPE", "kind": "Variable" }, { "name": "GRID_BOOLEAN_COL_DEF", "kind": "Variable" }, @@ -103,6 +106,7 @@ { "name": "gridClasses", "kind": "Variable" }, { "name": "GridClasses", "kind": "Interface" }, { "name": "GridClassKey", "kind": "TypeAlias" }, + { "name": "GridClearIcon", "kind": "Variable" }, { "name": "GridClipboardApi", "kind": "Interface" }, { "name": "GridCloseIcon", "kind": "Variable" }, { "name": "GridColDef", "kind": "Interface" }, @@ -145,15 +149,34 @@ { "name": "gridColumnLookupSelector", "kind": "Variable" }, { "name": "GridColumnMenu", "kind": "Variable" }, { "name": "GridColumnMenuApi", "kind": "Interface" }, + { "name": "GridColumnMenuColumnsItem", "kind": "Variable" }, + { "name": "GridColumnMenuColumnsItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuContainer", "kind": "Variable" }, + { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, + { "name": "GridColumnMenuDefault", "kind": "Variable" }, + { "name": "GridColumnMenuDefaultProps", "kind": "Interface" }, + { "name": "GridColumnMenuFilterItem", "kind": "Variable" }, + { "name": "GridColumnMenuFilterItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuHideItem", "kind": "Variable" }, + { "name": "GridColumnMenuHideItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuItemProps", "kind": "Interface" }, + { "name": "GridColumnMenuKey", "kind": "TypeAlias" }, + { "name": "GridColumnMenuKeysInternalOverrides", "kind": "Interface" }, + { "name": "GridColumnMenuKeysOverrides", "kind": "Interface" }, + { "name": "GridColumnMenuPinningItem", "kind": "Variable" }, + { "name": "GridColumnMenuPinningItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuProps", "kind": "Interface" }, { "name": "gridColumnMenuSelector", "kind": "Variable" }, + { "name": "GridColumnMenuSimple", "kind": "Variable" }, + { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, + { "name": "GridColumnMenuSortItem", "kind": "Variable" }, + { "name": "GridColumnMenuSortItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuState", "kind": "Interface" }, + { "name": "GridColumnMenuValue", "kind": "Interface" }, { "name": "GridColumnNode", "kind": "TypeAlias" }, { "name": "GridColumnOrderChangeParams", "kind": "Interface" }, { "name": "GridColumnPinningApi", "kind": "Interface" }, { "name": "GridColumnPinningInternalCache", "kind": "Interface" }, - { "name": "GridColumnPinningMenuItems", "kind": "Function" }, { "name": "GridColumnPinningState", "kind": "TypeAlias" }, { "name": "gridColumnPositionsSelector", "kind": "Variable" }, { "name": "gridColumnReorderDragColSelector", "kind": "Variable" }, @@ -165,7 +188,6 @@ { "name": "GridColumns", "kind": "TypeAlias" }, { "name": "GridColumnsGroupingState", "kind": "Interface" }, { "name": "GridColumnsInitialState", "kind": "Interface" }, - { "name": "GridColumnsMenuItem", "kind": "Function" }, { "name": "GridColumnsMeta", "kind": "Interface" }, { "name": "gridColumnsMetaSelector", "kind": "Variable" }, { "name": "GridColumnsPanel", "kind": "Function" }, @@ -272,9 +294,7 @@ { "name": "GridFilterInputValue", "kind": "Function" }, { "name": "GridFilterInputValueProps", "kind": "TypeAlias" }, { "name": "GridFilterItem", "kind": "Interface" }, - { "name": "GridFilterItemProps", "kind": "Interface" }, { "name": "GridFilterListIcon", "kind": "Variable" }, - { "name": "GridFilterMenuItem", "kind": "Function" }, { "name": "GridFilterModel", "kind": "Interface" }, { "name": "gridFilterModelSelector", "kind": "Variable" }, { "name": "GridFilterOperator", "kind": "Interface" }, @@ -362,6 +382,10 @@ { "name": "GridPrintExportMenuItem", "kind": "Function" }, { "name": "GridPrintExportMenuItemProps", "kind": "TypeAlias" }, { "name": "GridPrintExportOptions", "kind": "Interface" }, + { "name": "GridProIconSlotsComponent", "kind": "Interface" }, + { "name": "GridProSlotsComponent", "kind": "Interface" }, + { "name": "GridPushPinLeftIcon", "kind": "Variable" }, + { "name": "GridPushPinRightIcon", "kind": "Variable" }, { "name": "gridQuickFilterValuesSelector", "kind": "Variable" }, { "name": "GridRemoveIcon", "kind": "Variable" }, { "name": "GridRenderCellParams", "kind": "Interface" }, @@ -493,9 +517,11 @@ { "name": "GridValueGetterParams", "kind": "Interface" }, { "name": "GridValueOptionsParams", "kind": "Interface" }, { "name": "GridValueSetterParams", "kind": "Interface" }, + { "name": "GridViewColumnIcon", "kind": "Variable" }, { "name": "GridViewHeadlineIcon", "kind": "Variable" }, { "name": "GridViewStreamIcon", "kind": "Variable" }, { "name": "GridVirtualScrollerApi", "kind": "Interface" }, + { "name": "GridVisibilityOffIcon", "kind": "Variable" }, { "name": "gridVisibleColumnDefinitionsSelector", "kind": "Variable" }, { "name": "gridVisibleColumnFieldsSelector", "kind": "Variable" }, { "name": "gridVisibleRowCountSelector", "kind": "Variable" }, @@ -506,9 +532,8 @@ { "name": "gridVisibleSortedTopLevelRowEntriesSelector", "kind": "Variable" }, { "name": "gridVisibleTopLevelRowCountSelector", "kind": "Variable" }, { "name": "heIL", "kind": "Variable" }, - { "name": "HideGridColMenuItem", "kind": "Function" }, { "name": "huHU", "kind": "Variable" }, - { "name": "insertItemsInMenu", "kind": "Variable" }, + { "name": "insertItemsInColumnMenu", "kind": "Variable" }, { "name": "isLeaf", "kind": "Function" }, { "name": "itIT", "kind": "Variable" }, { "name": "jaJP", "kind": "Variable" }, @@ -534,7 +559,6 @@ { "name": "selectedGridRowsSelector", "kind": "Variable" }, { "name": "selectedIdsLookupSelector", "kind": "Variable" }, { "name": "skSK", "kind": "Variable" }, - { "name": "SortGridMenuItems", "kind": "Function" }, { "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" }, { "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" }, { "name": "svSE", "kind": "Variable" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index d1f2fb2b56c8..a3cb543c78c5 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -42,6 +42,7 @@ { "name": "getGridSingleSelectQuickFilterFn", "kind": "Variable" }, { "name": "getGridStringOperators", "kind": "Variable" }, { "name": "getGridStringQuickFilterFn", "kind": "Variable" }, + { "name": "GetVisibleColumnMenuItemsArgs", "kind": "Interface" }, { "name": "GRID_ACTIONS_COL_DEF", "kind": "Variable" }, { "name": "GRID_ACTIONS_COLUMN_TYPE", "kind": "Variable" }, { "name": "GRID_BOOLEAN_COL_DEF", "kind": "Variable" }, @@ -98,6 +99,7 @@ { "name": "gridClasses", "kind": "Variable" }, { "name": "GridClasses", "kind": "Interface" }, { "name": "GridClassKey", "kind": "TypeAlias" }, + { "name": "GridClearIcon", "kind": "Variable" }, { "name": "GridClipboardApi", "kind": "Interface" }, { "name": "GridCloseIcon", "kind": "Variable" }, { "name": "GridColDef", "kind": "Interface" }, @@ -140,10 +142,28 @@ { "name": "gridColumnLookupSelector", "kind": "Variable" }, { "name": "GridColumnMenu", "kind": "Variable" }, { "name": "GridColumnMenuApi", "kind": "Interface" }, + { "name": "GridColumnMenuColumnsItem", "kind": "Variable" }, + { "name": "GridColumnMenuColumnsItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuContainer", "kind": "Variable" }, + { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, + { "name": "GridColumnMenuDefault", "kind": "Variable" }, + { "name": "GridColumnMenuDefaultProps", "kind": "Interface" }, + { "name": "GridColumnMenuFilterItem", "kind": "Variable" }, + { "name": "GridColumnMenuFilterItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuHideItem", "kind": "Variable" }, + { "name": "GridColumnMenuHideItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuItemProps", "kind": "Interface" }, + { "name": "GridColumnMenuKey", "kind": "TypeAlias" }, + { "name": "GridColumnMenuKeysInternalOverrides", "kind": "Interface" }, + { "name": "GridColumnMenuKeysOverrides", "kind": "Interface" }, { "name": "GridColumnMenuProps", "kind": "Interface" }, { "name": "gridColumnMenuSelector", "kind": "Variable" }, + { "name": "GridColumnMenuSimple", "kind": "Variable" }, + { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, + { "name": "GridColumnMenuSortItem", "kind": "Variable" }, + { "name": "GridColumnMenuSortItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuState", "kind": "Interface" }, + { "name": "GridColumnMenuValue", "kind": "Interface" }, { "name": "GridColumnNode", "kind": "TypeAlias" }, { "name": "GridColumnOrderChangeParams", "kind": "Interface" }, { "name": "gridColumnPositionsSelector", "kind": "Variable" }, @@ -151,7 +171,6 @@ { "name": "GridColumns", "kind": "TypeAlias" }, { "name": "GridColumnsGroupingState", "kind": "Interface" }, { "name": "GridColumnsInitialState", "kind": "Interface" }, - { "name": "GridColumnsMenuItem", "kind": "Function" }, { "name": "GridColumnsMeta", "kind": "Interface" }, { "name": "gridColumnsMetaSelector", "kind": "Variable" }, { "name": "GridColumnsPanel", "kind": "Function" }, @@ -250,9 +269,7 @@ { "name": "GridFilterInputValue", "kind": "Function" }, { "name": "GridFilterInputValueProps", "kind": "TypeAlias" }, { "name": "GridFilterItem", "kind": "Interface" }, - { "name": "GridFilterItemProps", "kind": "Interface" }, { "name": "GridFilterListIcon", "kind": "Variable" }, - { "name": "GridFilterMenuItem", "kind": "Function" }, { "name": "GridFilterModel", "kind": "Interface" }, { "name": "gridFilterModelSelector", "kind": "Variable" }, { "name": "GridFilterOperator", "kind": "Interface" }, @@ -459,9 +476,11 @@ { "name": "GridValueGetterParams", "kind": "Interface" }, { "name": "GridValueOptionsParams", "kind": "Interface" }, { "name": "GridValueSetterParams", "kind": "Interface" }, + { "name": "GridViewColumnIcon", "kind": "Variable" }, { "name": "GridViewHeadlineIcon", "kind": "Variable" }, { "name": "GridViewStreamIcon", "kind": "Variable" }, { "name": "GridVirtualScrollerApi", "kind": "Interface" }, + { "name": "GridVisibilityOffIcon", "kind": "Variable" }, { "name": "gridVisibleColumnDefinitionsSelector", "kind": "Variable" }, { "name": "gridVisibleColumnFieldsSelector", "kind": "Variable" }, { "name": "gridVisibleRowCountSelector", "kind": "Variable" }, @@ -472,7 +491,6 @@ { "name": "gridVisibleSortedTopLevelRowEntriesSelector", "kind": "Variable" }, { "name": "gridVisibleTopLevelRowCountSelector", "kind": "Variable" }, { "name": "heIL", "kind": "Variable" }, - { "name": "HideGridColMenuItem", "kind": "Function" }, { "name": "huHU", "kind": "Variable" }, { "name": "isLeaf", "kind": "Function" }, { "name": "itIT", "kind": "Variable" }, @@ -499,7 +517,6 @@ { "name": "selectedGridRowsSelector", "kind": "Variable" }, { "name": "selectedIdsLookupSelector", "kind": "Variable" }, { "name": "skSK", "kind": "Variable" }, - { "name": "SortGridMenuItems", "kind": "Function" }, { "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" }, { "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" }, { "name": "svSE", "kind": "Variable" }, From e6608ff6195654bd93aa6e4d9d34c71e16b5cc8f Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sun, 13 Nov 2022 13:02:42 +0500 Subject: [PATCH 027/104] Does refactoring as per discussion --- ...enuGridPro.js => ColumnMenuGridPremium.js} | 2 +- ...uGridPro.tsx => ColumnMenuGridPremium.tsx} | 2 +- .../column-menu/CustomColumnMenuGrid.js | 57 + .../column-menu/CustomColumnMenuGrid.tsx | 59 + .../column-menu/FilterColumnMenuGrid.js | 58 - .../column-menu/FilterColumnMenuGrid.tsx | 68 - .../data/data-grid/column-menu/column-menu.md | 129 +- .../DisableColumnPinningButtons.js | 16 +- .../DisableColumnPinningButtons.tsx | 16 +- .../data-grid/components/CustomColumnMenu.js | 47 +- .../data-grid/components/CustomColumnMenu.tsx | 22 +- docs/data/data-grid/components/components.md | 8 +- .../GridColumnMenuAggregationItem.tsx | 6529 +---------------- .../GridPremiumColumnMenuDefault.tsx | 57 + .../GridPremiumColumnMenuSimple.tsx | 57 + .../src/components/reexports.ts | 2 + .../dataGridPremiumDefaultSlotsComponents.ts | 13 +- .../useGridAggregationPreProcessors.tsx | 39 +- .../rowGrouping/useGridRowGrouping.tsx | 39 +- .../grid/x-data-grid-premium/src/index.ts | 2 + .../src/models/gridPremiumSlotsComponent.ts | 18 +- .../components/GridProColumnMenuDefault.tsx | 41 + .../components/GridProColumnMenuSimple.tsx | 50 + .../x-data-grid-pro/src/components/index.ts | 5 + .../src/components/reexports.ts | 2 + .../dataGridProDefaultSlotsComponents.ts | 9 +- .../columnPinning/useGridColumnPinning.tsx | 24 +- packages/grid/x-data-grid-pro/src/index.ts | 2 + .../src/models/gridProSlotsComponent.ts | 9 +- .../src/utils/columnMenu/index.ts | 1 - .../columnMenu/insertItemsInColumnMenu.ts | 25 - .../grid/x-data-grid-pro/src/utils/index.ts | 1 - .../menu/columnMenu/GridColumnMenu.tsx | 111 - .../menu/columnMenu/GridColumnMenuProps.ts | 17 - .../default/GridColumnMenuContainer.tsx | 10 +- .../default/GridColumnMenuDefault.tsx | 97 +- .../menu/columnMenu/default/index.ts | 9 +- .../src/components/menu/columnMenu/index.ts | 1 - .../simple/GridColumnMenuSimple.tsx | 97 +- .../simple/GridColumnMenuSimpleContainer.tsx | 10 +- .../menu/columnMenu/simple/index.ts | 7 +- .../src/components/reexportable.ts | 2 + .../constants/defaultGridSlotsComponents.ts | 2 +- .../pipeProcessing/gridPipeProcessingApi.ts | 10 +- .../columnMenu/columnMenuInterfaces.ts | 29 +- packages/grid/x-data-grid/src/index.ts | 5 + .../src/models/colDef/gridColDef.ts | 8 - 47 files changed, 618 insertions(+), 7206 deletions(-) rename docs/data/data-grid/column-menu/{ColumnMenuGridPro.js => ColumnMenuGridPremium.js} (88%) rename docs/data/data-grid/column-menu/{ColumnMenuGridPro.tsx => ColumnMenuGridPremium.tsx} (88%) create mode 100644 docs/data/data-grid/column-menu/CustomColumnMenuGrid.js create mode 100644 docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx delete mode 100644 docs/data/data-grid/column-menu/FilterColumnMenuGrid.js delete mode 100644 docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx create mode 100644 packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx create mode 100644 packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx create mode 100644 packages/grid/x-data-grid-premium/src/components/reexports.ts create mode 100644 packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx create mode 100644 packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx create mode 100644 packages/grid/x-data-grid-pro/src/components/reexports.ts delete mode 100644 packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts delete mode 100644 packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts delete mode 100644 packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx create mode 100644 packages/grid/x-data-grid/src/components/reexportable.ts diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridPro.js b/docs/data/data-grid/column-menu/ColumnMenuGridPremium.js similarity index 88% rename from docs/data/data-grid/column-menu/ColumnMenuGridPro.js rename to docs/data/data-grid/column-menu/ColumnMenuGridPremium.js index 91d4fee9726b..429f73b44f82 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridPro.js +++ b/docs/data/data-grid/column-menu/ColumnMenuGridPremium.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { DataGridPremium } from '@mui/x-data-grid-premium'; import { useDemoData } from '@mui/x-data-grid-generator'; -export default function ColumnMenuGridPro() { +export default function ColumnMenuGridPremium() { const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 20, diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx b/docs/data/data-grid/column-menu/ColumnMenuGridPremium.tsx similarity index 88% rename from docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx rename to docs/data/data-grid/column-menu/ColumnMenuGridPremium.tsx index 91d4fee9726b..429f73b44f82 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx +++ b/docs/data/data-grid/column-menu/ColumnMenuGridPremium.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { DataGridPremium } from '@mui/x-data-grid-premium'; import { useDemoData } from '@mui/x-data-grid-generator'; -export default function ColumnMenuGridPro() { +export default function ColumnMenuGridPremium() { const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 20, diff --git a/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js b/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js new file mode 100644 index 000000000000..f2b41c656679 --- /dev/null +++ b/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js @@ -0,0 +1,57 @@ +import * as React from 'react'; +import { + DataGrid, + GridColumnMenuFilterItem, + GridColumnMenuSortItem, + GridColumnMenuColumnsItem, +} from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Stack from '@mui/material/Stack'; +import Button from '@mui/material/Button'; +import Divider from '@mui/material/Divider'; + +function MenuCloseComponent(props) { + return ( + + ); +} + +function CustomColumnMenu(props) { + const itemProps = { + column: props.currentColumn, + onClick: props.hideMenu, + }; + return ( + + + {/* Only provide filtering on desk */} + {itemProps.column.field === 'desk' ? ( + + ) : null} + + + + + ); +} + +export default function CustomColumnMenuGrid() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 20, + maxColumns: 5, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx new file mode 100644 index 000000000000..3e2d5a831fc4 --- /dev/null +++ b/docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import { + DataGrid, + GridColumnMenuFilterItem, + GridColumnMenuSortItem, + GridColumnMenuColumnsItem, + GridColumnMenuItemProps, + GridColumnMenuProps, +} from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Stack from '@mui/material/Stack'; +import Button from '@mui/material/Button'; +import Divider from '@mui/material/Divider'; + +function MenuCloseComponent(props: GridColumnMenuItemProps) { + return ( + + ); +} + +function CustomColumnMenu(props: GridColumnMenuProps) { + const itemProps = { + column: props.currentColumn, + onClick: props.hideMenu, + }; + return ( + + + {/* Only provide filtering on desk */} + {itemProps.column.field === 'desk' ? ( + + ) : null} + + + + + ); +} + +export default function CustomColumnMenuGrid() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 20, + maxColumns: 5, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js deleted file mode 100644 index 139e08d94d06..000000000000 --- a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.js +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from 'react'; -import { DataGrid, GridColumnMenuFilterItemSimple } from '@mui/x-data-grid'; -import { useDemoData } from '@mui/x-data-grid-generator'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; - -const MenuCloseComponent = (props) => { - return ( - - ); -}; - -const FilterComponent = (props) => ( - - - -); - -export default function FilterColumnMenuGrid() { - const { data } = useDemoData({ - dataSet: 'Commodity', - rowLength: 20, - maxColumns: 5, - }); - const columns = data.columns; - // Show only specific items for this column - columns[4].getVisibleColumnMenuItems = () => ['closeMenu']; - - const columnMenuItems = { - filter: , // overriding existing item - closeMenu: , // adding new item - }; - - return ( -
- [ - 'hideColumn', - 'divider', - 'filter', - 'divider', - 'closeMenu', - 'divider', - 'manageColumns', - ], - }, - }} - /> -
- ); -} diff --git a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx deleted file mode 100644 index 8ba4a887718b..000000000000 --- a/docs/data/data-grid/column-menu/FilterColumnMenuGrid.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import * as React from 'react'; -import { - DataGrid, - GridColumnMenuFilterItemSimple, - GridColumnMenuItemProps, -} from '@mui/x-data-grid'; -import { useDemoData } from '@mui/x-data-grid-generator'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; - -declare module '@mui/x-data-grid' { - interface GridColumnMenuKeysOverrides { - closeMenu: true; - } -} - -const MenuCloseComponent = (props: GridColumnMenuItemProps) => { - return ( - - ); -}; - -const FilterComponent = (props: GridColumnMenuItemProps) => ( - - - -); - -export default function FilterColumnMenuGrid() { - const { data } = useDemoData({ - dataSet: 'Commodity', - rowLength: 20, - maxColumns: 5, - }); - const columns = data.columns; - // Show only specific items for this column - columns[4].getVisibleColumnMenuItems = () => ['closeMenu']; - - const columnMenuItems = { - filter: , // overriding existing item - closeMenu: , // adding new item - }; - - return ( -
- [ - 'hideColumn', - 'divider', - 'filter', - 'divider', - 'closeMenu', - 'divider', - 'manageColumns', - ], - }, - }} - /> -
- ); -} diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index b315afdc00a4..d79cbab6b43d 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -20,97 +20,30 @@ By default, each column header has the column menu enabled. To disable the colum {{"demo": "DisabledColumnMenuGrid.js", "bg": "inline"}} -## Customise column menu items +## Customise column menu -You can also customise column menu based on some conditions. Every item in the menu is assigned a `key` which serves as a unique identifier of that item using which it's possible to: +You can customise column menu by passing your own component for slot `ColumnMenu`, you can blend existing menu items with your custom components for a custom look and feel. -- Hide/Show specific items -- Override default items (if you want to override some items and not the whole menu) -- Add new items -- Configure custom display order for items +It's also possible to conditionally render some items based on the `currentColumn` (the column whose menu is currently open) which you recieve in the props of column menu. -For that purpose you can use `getVisibleColumnMenuItems` and `columnMenuItems`. +{{"demo": "CustomColumnMenuGrid.js", "bg": "inline"}} -**getVisibleColumnMenuItems**: It is available in both `GridColDef` and `componentsProps.columnMenu`, it receives `column`, `itemKeys` and `visibleItemKeys` and should return a _filtered_ and _ordered_ list of keys that are needed to be shown. It can be used either per-column basis by passing in `GridColDef` or for the whole Grid by passing in `componentsProps.columnMenu`. If you have it in both, the preference will be given to the `GridColDef` one. +Here's the list of default available items for each package and column menu design: -```tsx -interface GetVisibleColumnMenuItemsArgs { - visibleItemKeys: Array; // keys of currently visible items - itemKeys: Array; // keys of default menu items - column: GridColDef; // current column -} - -getVisibleColumnMenuItems?: (args: GetVisibleColumnMenuItemsArgs) - => Array; -``` - -**columnMenuItems**: It could be used to override or register new items to the menu. You can simply pass the object with existing or new items and they will be updated/added to the grid. - -### Hide/Show Specific Items: - -For every column menu component there's a default order of items configured by default called `visibleMenuItems`, for default column menu it's: `['sorting', 'divider', 'filter', 'divider', 'hideColumn', 'divider', 'manageColumns']` - -Using `getVisibleColumnMenuItems` method, you can override this order based on configured items for the column menu. - -```tsx -const getVisibleColumnMenuItems = () => ['sorting', 'filter']; // only show `sort` & `filter` - -return ( - -); -``` - -### Override default items and add new items: - -Using `componentsProps.columnMenu.columnMenuItems`, you can: - -1. Override Existing Items -2. Add new Items - -```tsx -const columnMenuItems = { - filter: , // override existing item - closeMenu: , // add new item -}; - -// add new item in visible items and append it to the last of list -const getVisibleColumnMenuItems = ({ visibleItemKeys }) => [ - ...visibleItemKeys, - 'closeMenu', -]; - -; -``` - -If you're using TypeScript, for new items that you are adding, you'll need to specify new items you are registering, using [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation). - -```tsx -declare module '@mui/x-data-grid' { - interface GridColumnMenuKeysOverrides { - closeMenu: true; - } -} -``` - -### Default column menu items - -Default `keys` for **DataGrid** are `filter`, `sorting`, `hideColumn`, `divider` and `manageColumns`, wheras **DataGridPro** adds `pinning` and **DataGridPremium** adds `grouping` and `aggregation` on top of them. - -Here's a demo overriding some existing items, adding some new items and displaying different items for a column. - -{{"demo": "FilterColumnMenuGrid.js", "bg": "inline"}} +| **Package** | **Design** | **Available Items** | +| :---------: | :--------: | :-------------------------------------------------------------------------------------------------------------------------: | +| Community | default | GridColumnMenuFilterItem, GridColumnMenuSortItem, GridColumnMenuHideItem, GridColumnMenuColumnsItem | +| Community | simple | GridColumnMenuFilterItemSimple, GridColumnMenuSortItemSimple, GridColumnMenuHideItemSimple, GridColumnMenuColumnsItemSimple | +| Pro | default | GridColumnMenuPinningItem | +| Pro | simple | GridColumnMenuPinningItemSimple | +| Premium | default | GridColumnMenuAggregationItem, GridColumnMenuRowGroupItem, GridColumnMenuRowUngroupItem | +| Premium | simple | GridColumnMenuAggregationItemSimple, GridColumnMenuRowGroupItemSimple, GridColumnMenuRowUngroupItemSimple | ## Column menu with Pro/Premium options [](/x/introduction/licensing/#pro-plan)[](/x/introduction/licensing/#premium-plan) You can access commercial features like column pinning etc from the column menu when using `DataGridPro` or `DataGridPremium`. -{{"demo": "ColumnMenuGridPro.js", "bg": "inline"}} +{{"demo": "ColumnMenuGridPremium.js", "bg": "inline"}} ## Simple column menu @@ -118,40 +51,6 @@ You can replace the default column menu with a simplified one using `GridColumnM {{"demo": "SimpleColumnMenuGrid.js", "bg": "inline"}} -For _Pro_ and _Premium_ packages you have specific `slot` for each of the column menu item using which you can import simple variant or pass on your own component, or you can also use [column menu customizing](#customise-column-menu-items) to use your custom component based on item `key`. - -Here's a list of column menu items and their overridable slots for Commercial features. - -| **Item** | **Package** | **Key** | **Slot** | **Default** | -| ----------- | ----------- | ------------- | --------------------------- | ----------------------------- | -| Pinning | Pro | 'pinning' | 'ColumnMenuPinningItem' | GridColumnMenuPinningItems | -| Ungroup | Premium | 'grouping' | 'ColumnMenuRowUngroupItem' | GridColumnMenuRowUngroupItem | -| Group | Premium | 'grouping' | 'ColumnMenuRowGroupItem' | GridColumnMenuRowGroupItem | -| Aggregation | Premium | 'aggregation' | 'ColumnMenuAggregationItem' | GridColumnMenuAggregationItem | - -This example is using simple Column Menu for basic menu and overriding some slots for premium items and customizing the display order and the items shown. - -```tsx - [ - 'pinning', - 'sorting', - 'filter', - 'aggregation', - ], - }, - }} - components={{ - ColumnMenu: GridColumnMenuSimple, - ColumnMenuPinningItem: GridColumnMenuPinningItemSimple, - ColumnMenuAggregationItem: SomeCustomAggregationComponent, - }} -/> -``` - ## API - [DataGrid](/x/api/data-grid/data-grid/) diff --git a/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.js b/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.js index 0141adb23a4a..c6c6ce82d1fa 100644 --- a/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.js +++ b/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.js @@ -3,10 +3,10 @@ import PropTypes from 'prop-types'; import { DataGridPro, GridColumnMenuContainer, - SortGridMenuItems, - HideGridColMenuItem, - GridColumnsMenuItem, - GridFilterMenuItem, + GridColumnMenuSortItem, + GridColumnMenuHideItem, + GridColumnMenuColumnsItem, + GridColumnMenuFilterItem, } from '@mui/x-data-grid-pro'; import { randomCreatedDate, @@ -24,10 +24,10 @@ function CustomColumnMenu(props) { currentColumn={currentColumn} {...other} > - - - - + + + + ); } diff --git a/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.tsx b/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.tsx index 91c656fab06a..10839c3757e5 100644 --- a/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.tsx +++ b/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.tsx @@ -4,10 +4,10 @@ import { GridColumns, GridRowsProp, GridColumnMenuContainer, - SortGridMenuItems, - HideGridColMenuItem, - GridColumnsMenuItem, - GridFilterMenuItem, + GridColumnMenuSortItem, + GridColumnMenuHideItem, + GridColumnMenuColumnsItem, + GridColumnMenuFilterItem, GridColumnMenuProps, } from '@mui/x-data-grid-pro'; import { @@ -26,10 +26,10 @@ export function CustomColumnMenu(props: GridColumnMenuProps) { currentColumn={currentColumn} {...other} > - - - - + + + + ); } diff --git a/docs/data/data-grid/components/CustomColumnMenu.js b/docs/data/data-grid/components/CustomColumnMenu.js index 37ebd7d1fa90..c3226ea957f4 100644 --- a/docs/data/data-grid/components/CustomColumnMenu.js +++ b/docs/data/data-grid/components/CustomColumnMenu.js @@ -1,31 +1,34 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; -import { styled } from '@mui/material/styles'; +import { styled, Theme } from '@mui/material/styles'; import Button from '@mui/material/Button'; import { - GridColumnMenu, - GridColumnMenuContainer, - GridFilterMenuItem, - SortGridMenuItems, + GridColumnMenuSimple, + GridColumnMenuSimpleContainer, + GridColumnMenuFilterItemSimple, + GridColumnMenuSortItemSimple, useGridApiRef, + gridProColumnMenuSlots, + gridProColumnMenuInitItems, DataGridPro, } from '@mui/x-data-grid-pro'; import StarOutlineIcon from '@mui/icons-material/StarOutline'; -const StyledGridColumnMenuContainer = styled(GridColumnMenuContainer)( - ({ theme, ownerState }) => ({ - background: theme.palette[ownerState.color].main, - color: theme.palette[ownerState.color].contrastText, - }), -); +const StyledGridColumnMenuContainer = styled(GridColumnMenuSimpleContainer)<{ + ownerState +}>(({ theme, ownerState }: { theme: Theme; ownerState: OwnerState }) => ({ + background: theme.palette[ownerState.color].main, + color: theme.palette[ownerState.color].contrastText, +})); -const StyledGridColumnMenu = styled(GridColumnMenu)(({ theme, ownerState }) => ({ +const StyledGridColumnMenuSimple = styled(GridColumnMenuSimple)<{ + ownerState +}>(({ theme, ownerState }) => ({ background: theme.palette[ownerState.color].main, color: theme.palette[ownerState.color].contrastText, })); -function CustomColumnMenuComponent(props) { +export function CustomColumnMenuComponent(props) { const { hideMenu, currentColumn, color, ...other } = props; if (currentColumn.field === 'name') { @@ -36,8 +39,8 @@ function CustomColumnMenuComponent(props) { ownerState={{ color }} {...other} > - - + + ); } @@ -65,23 +68,17 @@ function CustomColumnMenuComponent(props) { ); } return ( - ); } -CustomColumnMenuComponent.propTypes = { - color: PropTypes.oneOf(['primary', 'secondary']).isRequired, - currentColumn: PropTypes.object.isRequired, - hideMenu: PropTypes.func.isRequired, -}; - -export { CustomColumnMenuComponent }; - export default function CustomColumnMenu() { const [color, setColor] = React.useState('primary'); const apiRef = useGridApiRef(); diff --git a/docs/data/data-grid/components/CustomColumnMenu.tsx b/docs/data/data-grid/components/CustomColumnMenu.tsx index f63eced58617..59b8e801f89d 100644 --- a/docs/data/data-grid/components/CustomColumnMenu.tsx +++ b/docs/data/data-grid/components/CustomColumnMenu.tsx @@ -3,12 +3,14 @@ import Box from '@mui/material/Box'; import { styled, Theme } from '@mui/material/styles'; import Button from '@mui/material/Button'; import { - GridColumnMenu, - GridColumnMenuContainer, + GridColumnMenuSimple, + GridColumnMenuSimpleContainer, GridColumnMenuProps, - GridFilterMenuItem, - SortGridMenuItems, + GridColumnMenuFilterItemSimple, + GridColumnMenuSortItemSimple, useGridApiRef, + gridProColumnMenuSlots, + gridProColumnMenuInitItems, DataGridPro, } from '@mui/x-data-grid-pro'; import StarOutlineIcon from '@mui/icons-material/StarOutline'; @@ -18,14 +20,14 @@ type OwnerState = { color: PaletteColorKey; }; -const StyledGridColumnMenuContainer = styled(GridColumnMenuContainer)<{ +const StyledGridColumnMenuContainer = styled(GridColumnMenuSimpleContainer)<{ ownerState: OwnerState; }>(({ theme, ownerState }: { theme: Theme; ownerState: OwnerState }) => ({ background: theme.palette[ownerState.color].main, color: theme.palette[ownerState.color].contrastText, })); -const StyledGridColumnMenu = styled(GridColumnMenu)<{ +const StyledGridColumnMenuSimple = styled(GridColumnMenuSimple)<{ ownerState: OwnerState; }>(({ theme, ownerState }: { theme: Theme; ownerState: OwnerState }) => ({ background: theme.palette[ownerState.color].main, @@ -43,8 +45,8 @@ export function CustomColumnMenuComponent(props: GridColumnMenuProps & OwnerStat ownerState={{ color }} {...other} > - - + + ); } @@ -72,10 +74,12 @@ export function CustomColumnMenuComponent(props: GridColumnMenuProps & OwnerStat ); } return ( - ); diff --git a/docs/data/data-grid/components/components.md b/docs/data/data-grid/components/components.md index 8a27c78ea302..12a0d56e26f1 100644 --- a/docs/data/data-grid/components/components.md +++ b/docs/data/data-grid/components/components.md @@ -75,10 +75,10 @@ export const GridColumnMenu = React.forwardRef< return ( - - - - + + + + ); }); diff --git a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx index 562ff67687fa..b247a4d2b888 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { GridColDef, GridColumnMenuItemProps, useGridSelector } from '@mui/x-data-grid-pro'; +import { GridColumnMenuItemProps, useGridSelector } from '@mui/x-data-grid-pro'; import MenuItem from '@mui/material/MenuItem'; import Stack from '@mui/material/Stack'; import FormControl from '@mui/material/FormControl'; @@ -13,6528 +13,31 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { canColumnHaveAggregationFunction, getAggregationFunctionLabel, + getAvailableAggregationFunctions, } from '../hooks/features/aggregation/gridAggregationUtils'; import { gridAggregationModelSelector } from '../hooks/features/aggregation/gridAggregationSelectors'; import { GridAggregationModel } from '../hooks/features/aggregation/gridAggregationInterfaces'; -interface GridColumnMenuAggregationItemProps extends GridColumnMenuItemProps { - column: GridColDef; - label: string; - availableAggregationFunctions: string[]; -} - const StyledStack = styled(Stack)(({ theme }) => ({ padding: theme.spacing(1, 1.5, 1, 1.5), })); -StyledStack.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - alignContent: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'baseline', - 'center', - 'end', - 'flex-end', - 'flex-start', - 'inherit', - 'initial', - 'normal', - 'revert-layer', - 'revert', - 'space-around', - 'space-between', - 'space-evenly', - 'start', - 'stretch', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - alignItems: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'baseline', - 'center', - 'end', - 'flex-end', - 'flex-start', - 'inherit', - 'initial', - 'normal', - 'revert-layer', - 'revert', - 'self-end', - 'self-start', - 'start', - 'stretch', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - alignSelf: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'auto', - 'baseline', - 'center', - 'end', - 'flex-end', - 'flex-start', - 'inherit', - 'initial', - 'normal', - 'revert-layer', - 'revert', - 'self-end', - 'self-start', - 'start', - 'stretch', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - bgcolor: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'ActiveBorder', - 'ActiveCaption', - 'aliceblue', - 'antiquewhite', - 'AppWorkspace', - 'aqua', - 'aquamarine', - 'azure', - 'Background', - 'beige', - 'bisque', - 'black', - 'blanchedalmond', - 'blue', - 'blueviolet', - 'brown', - 'burlywood', - 'ButtonFace', - 'ButtonHighlight', - 'ButtonShadow', - 'ButtonText', - 'cadetblue', - 'CaptionText', - 'chartreuse', - 'chocolate', - 'coral', - 'cornflowerblue', - 'cornsilk', - 'crimson', - 'currentcolor', - 'cyan', - 'darkblue', - 'darkcyan', - 'darkgoldenrod', - 'darkgray', - 'darkgreen', - 'darkgrey', - 'darkkhaki', - 'darkmagenta', - 'darkolivegreen', - 'darkorange', - 'darkorchid', - 'darkred', - 'darksalmon', - 'darkseagreen', - 'darkslateblue', - 'darkslategray', - 'darkslategrey', - 'darkturquoise', - 'darkviolet', - 'deeppink', - 'deepskyblue', - 'dimgray', - 'dimgrey', - 'dodgerblue', - 'firebrick', - 'floralwhite', - 'forestgreen', - 'fuchsia', - 'gainsboro', - 'ghostwhite', - 'gold', - 'goldenrod', - 'gray', - 'GrayText', - 'green', - 'greenyellow', - 'grey', - 'Highlight', - 'HighlightText', - 'honeydew', - 'hotpink', - 'InactiveBorder', - 'InactiveCaption', - 'InactiveCaptionText', - 'indianred', - 'indigo', - 'InfoBackground', - 'InfoText', - 'inherit', - 'initial', - 'ivory', - 'khaki', - 'lavender', - 'lavenderblush', - 'lawngreen', - 'lemonchiffon', - 'lightblue', - 'lightcoral', - 'lightcyan', - 'lightgoldenrodyellow', - 'lightgray', - 'lightgreen', - 'lightgrey', - 'lightpink', - 'lightsalmon', - 'lightseagreen', - 'lightskyblue', - 'lightslategray', - 'lightslategrey', - 'lightsteelblue', - 'lightyellow', - 'lime', - 'limegreen', - 'linen', - 'magenta', - 'maroon', - 'mediumaquamarine', - 'mediumblue', - 'mediumorchid', - 'mediumpurple', - 'mediumseagreen', - 'mediumslateblue', - 'mediumspringgreen', - 'mediumturquoise', - 'mediumvioletred', - 'Menu', - 'MenuText', - 'midnightblue', - 'mintcream', - 'mistyrose', - 'moccasin', - 'navajowhite', - 'navy', - 'oldlace', - 'olive', - 'olivedrab', - 'orange', - 'orangered', - 'orchid', - 'palegoldenrod', - 'palegreen', - 'paleturquoise', - 'palevioletred', - 'papayawhip', - 'peachpuff', - 'peru', - 'pink', - 'plum', - 'powderblue', - 'purple', - 'rebeccapurple', - 'red', - 'revert-layer', - 'revert', - 'rosybrown', - 'royalblue', - 'saddlebrown', - 'salmon', - 'sandybrown', - 'Scrollbar', - 'seagreen', - 'seashell', - 'sienna', - 'silver', - 'skyblue', - 'slateblue', - 'slategray', - 'slategrey', - 'snow', - 'springgreen', - 'steelblue', - 'tan', - 'teal', - 'thistle', - 'ThreeDDarkShadow', - 'ThreeDFace', - 'ThreeDHighlight', - 'ThreeDLightShadow', - 'ThreeDShadow', - 'tomato', - 'transparent', - 'turquoise', - 'unset', - 'violet', - 'wheat', - 'white', - 'whitesmoke', - 'Window', - 'WindowFrame', - 'WindowText', - 'yellow', - 'yellowgreen', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - border: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'ActiveBorder', - 'ActiveCaption', - 'aliceblue', - 'antiquewhite', - 'AppWorkspace', - 'aqua', - 'aquamarine', - 'azure', - 'Background', - 'beige', - 'bisque', - 'black', - 'blanchedalmond', - 'blue', - 'blueviolet', - 'brown', - 'burlywood', - 'ButtonFace', - 'ButtonHighlight', - 'ButtonShadow', - 'ButtonText', - 'cadetblue', - 'CaptionText', - 'chartreuse', - 'chocolate', - 'coral', - 'cornflowerblue', - 'cornsilk', - 'crimson', - 'currentcolor', - 'cyan', - 'darkblue', - 'darkcyan', - 'darkgoldenrod', - 'darkgray', - 'darkgreen', - 'darkgrey', - 'darkkhaki', - 'darkmagenta', - 'darkolivegreen', - 'darkorange', - 'darkorchid', - 'darkred', - 'darksalmon', - 'darkseagreen', - 'darkslateblue', - 'darkslategray', - 'darkslategrey', - 'darkturquoise', - 'darkviolet', - 'dashed', - 'deeppink', - 'deepskyblue', - 'dimgray', - 'dimgrey', - 'dodgerblue', - 'dotted', - 'double', - 'firebrick', - 'floralwhite', - 'forestgreen', - 'fuchsia', - 'gainsboro', - 'ghostwhite', - 'gold', - 'goldenrod', - 'gray', - 'GrayText', - 'green', - 'greenyellow', - 'grey', - 'groove', - 'hidden', - 'Highlight', - 'HighlightText', - 'honeydew', - 'hotpink', - 'InactiveBorder', - 'InactiveCaption', - 'InactiveCaptionText', - 'indianred', - 'indigo', - 'InfoBackground', - 'InfoText', - 'inherit', - 'initial', - 'inset', - 'ivory', - 'khaki', - 'lavender', - 'lavenderblush', - 'lawngreen', - 'lemonchiffon', - 'lightblue', - 'lightcoral', - 'lightcyan', - 'lightgoldenrodyellow', - 'lightgray', - 'lightgreen', - 'lightgrey', - 'lightpink', - 'lightsalmon', - 'lightseagreen', - 'lightskyblue', - 'lightslategray', - 'lightslategrey', - 'lightsteelblue', - 'lightyellow', - 'lime', - 'limegreen', - 'linen', - 'magenta', - 'maroon', - 'medium', - 'mediumaquamarine', - 'mediumblue', - 'mediumorchid', - 'mediumpurple', - 'mediumseagreen', - 'mediumslateblue', - 'mediumspringgreen', - 'mediumturquoise', - 'mediumvioletred', - 'Menu', - 'MenuText', - 'midnightblue', - 'mintcream', - 'mistyrose', - 'moccasin', - 'navajowhite', - 'navy', - 'none', - 'oldlace', - 'olive', - 'olivedrab', - 'orange', - 'orangered', - 'orchid', - 'outset', - 'palegoldenrod', - 'palegreen', - 'paleturquoise', - 'palevioletred', - 'papayawhip', - 'peachpuff', - 'peru', - 'pink', - 'plum', - 'powderblue', - 'purple', - 'rebeccapurple', - 'red', - 'revert-layer', - 'revert', - 'ridge', - 'rosybrown', - 'royalblue', - 'saddlebrown', - 'salmon', - 'sandybrown', - 'Scrollbar', - 'seagreen', - 'seashell', - 'sienna', - 'silver', - 'skyblue', - 'slateblue', - 'slategray', - 'slategrey', - 'snow', - 'solid', - 'springgreen', - 'steelblue', - 'tan', - 'teal', - 'thick', - 'thin', - 'thistle', - 'ThreeDDarkShadow', - 'ThreeDFace', - 'ThreeDHighlight', - 'ThreeDLightShadow', - 'ThreeDShadow', - 'tomato', - 'transparent', - 'turquoise', - 'unset', - 'violet', - 'wheat', - 'white', - 'whitesmoke', - 'Window', - 'WindowFrame', - 'WindowText', - 'yellow', - 'yellowgreen', - ]), - PropTypes.arrayOf( - PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'ActiveBorder', - 'ActiveCaption', - 'aliceblue', - 'antiquewhite', - 'AppWorkspace', - 'aqua', - 'aquamarine', - 'azure', - 'Background', - 'beige', - 'bisque', - 'black', - 'blanchedalmond', - 'blue', - 'blueviolet', - 'brown', - 'burlywood', - 'ButtonFace', - 'ButtonHighlight', - 'ButtonShadow', - 'ButtonText', - 'cadetblue', - 'CaptionText', - 'chartreuse', - 'chocolate', - 'coral', - 'cornflowerblue', - 'cornsilk', - 'crimson', - 'currentcolor', - 'cyan', - 'darkblue', - 'darkcyan', - 'darkgoldenrod', - 'darkgray', - 'darkgreen', - 'darkgrey', - 'darkkhaki', - 'darkmagenta', - 'darkolivegreen', - 'darkorange', - 'darkorchid', - 'darkred', - 'darksalmon', - 'darkseagreen', - 'darkslateblue', - 'darkslategray', - 'darkslategrey', - 'darkturquoise', - 'darkviolet', - 'dashed', - 'deeppink', - 'deepskyblue', - 'dimgray', - 'dimgrey', - 'dodgerblue', - 'dotted', - 'double', - 'firebrick', - 'floralwhite', - 'forestgreen', - 'fuchsia', - 'gainsboro', - 'ghostwhite', - 'gold', - 'goldenrod', - 'gray', - 'GrayText', - 'green', - 'greenyellow', - 'grey', - 'groove', - 'hidden', - 'Highlight', - 'HighlightText', - 'honeydew', - 'hotpink', - 'InactiveBorder', - 'InactiveCaption', - 'InactiveCaptionText', - 'indianred', - 'indigo', - 'InfoBackground', - 'InfoText', - 'inherit', - 'initial', - 'inset', - 'ivory', - 'khaki', - 'lavender', - 'lavenderblush', - 'lawngreen', - 'lemonchiffon', - 'lightblue', - 'lightcoral', - 'lightcyan', - 'lightgoldenrodyellow', - 'lightgray', - 'lightgreen', - 'lightgrey', - 'lightpink', - 'lightsalmon', - 'lightseagreen', - 'lightskyblue', - 'lightslategray', - 'lightslategrey', - 'lightsteelblue', - 'lightyellow', - 'lime', - 'limegreen', - 'linen', - 'magenta', - 'maroon', - 'medium', - 'mediumaquamarine', - 'mediumblue', - 'mediumorchid', - 'mediumpurple', - 'mediumseagreen', - 'mediumslateblue', - 'mediumspringgreen', - 'mediumturquoise', - 'mediumvioletred', - 'Menu', - 'MenuText', - 'midnightblue', - 'mintcream', - 'mistyrose', - 'moccasin', - 'navajowhite', - 'navy', - 'none', - 'oldlace', - 'olive', - 'olivedrab', - 'orange', - 'orangered', - 'orchid', - 'outset', - 'palegoldenrod', - 'palegreen', - 'paleturquoise', - 'palevioletred', - 'papayawhip', - 'peachpuff', - 'peru', - 'pink', - 'plum', - 'powderblue', - 'purple', - 'rebeccapurple', - 'red', - 'revert-layer', - 'revert', - 'ridge', - 'rosybrown', - 'royalblue', - 'saddlebrown', - 'salmon', - 'sandybrown', - 'Scrollbar', - 'seagreen', - 'seashell', - 'sienna', - 'silver', - 'skyblue', - 'slateblue', - 'slategray', - 'slategrey', - 'snow', - 'solid', - 'springgreen', - 'steelblue', - 'tan', - 'teal', - 'thick', - 'thin', - 'thistle', - 'ThreeDDarkShadow', - 'ThreeDFace', - 'ThreeDHighlight', - 'ThreeDLightShadow', - 'ThreeDShadow', - 'tomato', - 'transparent', - 'turquoise', - 'unset', - 'violet', - 'wheat', - 'white', - 'whitesmoke', - 'Window', - 'WindowFrame', - 'WindowText', - 'yellow', - 'yellowgreen', - ]), - PropTypes.number, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - ), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - borderBottom: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - borderColor: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'ActiveBorder', - 'ActiveCaption', - 'aliceblue', - 'antiquewhite', - 'AppWorkspace', - 'aqua', - 'aquamarine', - 'azure', - 'Background', - 'beige', - 'bisque', - 'black', - 'blanchedalmond', - 'blue', - 'blueviolet', - 'brown', - 'burlywood', - 'ButtonFace', - 'ButtonHighlight', - 'ButtonShadow', - 'ButtonText', - 'cadetblue', - 'CaptionText', - 'chartreuse', - 'chocolate', - 'coral', - 'cornflowerblue', - 'cornsilk', - 'crimson', - 'currentcolor', - 'cyan', - 'darkblue', - 'darkcyan', - 'darkgoldenrod', - 'darkgray', - 'darkgreen', - 'darkgrey', - 'darkkhaki', - 'darkmagenta', - 'darkolivegreen', - 'darkorange', - 'darkorchid', - 'darkred', - 'darksalmon', - 'darkseagreen', - 'darkslateblue', - 'darkslategray', - 'darkslategrey', - 'darkturquoise', - 'darkviolet', - 'deeppink', - 'deepskyblue', - 'dimgray', - 'dimgrey', - 'dodgerblue', - 'firebrick', - 'floralwhite', - 'forestgreen', - 'fuchsia', - 'gainsboro', - 'ghostwhite', - 'gold', - 'goldenrod', - 'gray', - 'GrayText', - 'green', - 'greenyellow', - 'grey', - 'Highlight', - 'HighlightText', - 'honeydew', - 'hotpink', - 'InactiveBorder', - 'InactiveCaption', - 'InactiveCaptionText', - 'indianred', - 'indigo', - 'InfoBackground', - 'InfoText', - 'inherit', - 'initial', - 'ivory', - 'khaki', - 'lavender', - 'lavenderblush', - 'lawngreen', - 'lemonchiffon', - 'lightblue', - 'lightcoral', - 'lightcyan', - 'lightgoldenrodyellow', - 'lightgray', - 'lightgreen', - 'lightgrey', - 'lightpink', - 'lightsalmon', - 'lightseagreen', - 'lightskyblue', - 'lightslategray', - 'lightslategrey', - 'lightsteelblue', - 'lightyellow', - 'lime', - 'limegreen', - 'linen', - 'magenta', - 'maroon', - 'mediumaquamarine', - 'mediumblue', - 'mediumorchid', - 'mediumpurple', - 'mediumseagreen', - 'mediumslateblue', - 'mediumspringgreen', - 'mediumturquoise', - 'mediumvioletred', - 'Menu', - 'MenuText', - 'midnightblue', - 'mintcream', - 'mistyrose', - 'moccasin', - 'navajowhite', - 'navy', - 'oldlace', - 'olive', - 'olivedrab', - 'orange', - 'orangered', - 'orchid', - 'palegoldenrod', - 'palegreen', - 'paleturquoise', - 'palevioletred', - 'papayawhip', - 'peachpuff', - 'peru', - 'pink', - 'plum', - 'powderblue', - 'purple', - 'rebeccapurple', - 'red', - 'revert-layer', - 'revert', - 'rosybrown', - 'royalblue', - 'saddlebrown', - 'salmon', - 'sandybrown', - 'Scrollbar', - 'seagreen', - 'seashell', - 'sienna', - 'silver', - 'skyblue', - 'slateblue', - 'slategray', - 'slategrey', - 'snow', - 'springgreen', - 'steelblue', - 'tan', - 'teal', - 'thistle', - 'ThreeDDarkShadow', - 'ThreeDFace', - 'ThreeDHighlight', - 'ThreeDLightShadow', - 'ThreeDShadow', - 'tomato', - 'transparent', - 'turquoise', - 'unset', - 'violet', - 'wheat', - 'white', - 'whitesmoke', - 'Window', - 'WindowFrame', - 'WindowText', - 'yellow', - 'yellowgreen', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - borderLeft: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - borderRadius: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - borderRight: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - borderTop: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - bottom: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - boxShadow: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'inherit', - 'initial', - 'none', - 'revert-layer', - 'revert', - 'unset', - ]), - PropTypes.arrayOf( - PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'inherit', - 'initial', - 'none', - 'revert-layer', - 'revert', - 'unset', - ]), - PropTypes.number, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - ), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - boxSizing: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'border-box', - 'content-box', - 'inherit', - 'initial', - 'revert-layer', - 'revert', - 'unset', - ]), - PropTypes.arrayOf( - PropTypes.oneOf([ - '-moz-initial', - 'border-box', - 'content-box', - 'inherit', - 'initial', - 'revert-layer', - 'revert', - 'unset', - ]).isRequired, - ), - PropTypes.func, - PropTypes.object, - ]), - color: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'ActiveBorder', - 'ActiveCaption', - 'aliceblue', - 'antiquewhite', - 'AppWorkspace', - 'aqua', - 'aquamarine', - 'azure', - 'Background', - 'beige', - 'bisque', - 'black', - 'blanchedalmond', - 'blue', - 'blueviolet', - 'brown', - 'burlywood', - 'ButtonFace', - 'ButtonHighlight', - 'ButtonShadow', - 'ButtonText', - 'cadetblue', - 'CaptionText', - 'chartreuse', - 'chocolate', - 'coral', - 'cornflowerblue', - 'cornsilk', - 'crimson', - 'currentcolor', - 'cyan', - 'darkblue', - 'darkcyan', - 'darkgoldenrod', - 'darkgray', - 'darkgreen', - 'darkgrey', - 'darkkhaki', - 'darkmagenta', - 'darkolivegreen', - 'darkorange', - 'darkorchid', - 'darkred', - 'darksalmon', - 'darkseagreen', - 'darkslateblue', - 'darkslategray', - 'darkslategrey', - 'darkturquoise', - 'darkviolet', - 'deeppink', - 'deepskyblue', - 'dimgray', - 'dimgrey', - 'dodgerblue', - 'firebrick', - 'floralwhite', - 'forestgreen', - 'fuchsia', - 'gainsboro', - 'ghostwhite', - 'gold', - 'goldenrod', - 'gray', - 'GrayText', - 'green', - 'greenyellow', - 'grey', - 'Highlight', - 'HighlightText', - 'honeydew', - 'hotpink', - 'InactiveBorder', - 'InactiveCaption', - 'InactiveCaptionText', - 'indianred', - 'indigo', - 'InfoBackground', - 'InfoText', - 'inherit', - 'initial', - 'ivory', - 'khaki', - 'lavender', - 'lavenderblush', - 'lawngreen', - 'lemonchiffon', - 'lightblue', - 'lightcoral', - 'lightcyan', - 'lightgoldenrodyellow', - 'lightgray', - 'lightgreen', - 'lightgrey', - 'lightpink', - 'lightsalmon', - 'lightseagreen', - 'lightskyblue', - 'lightslategray', - 'lightslategrey', - 'lightsteelblue', - 'lightyellow', - 'lime', - 'limegreen', - 'linen', - 'magenta', - 'maroon', - 'mediumaquamarine', - 'mediumblue', - 'mediumorchid', - 'mediumpurple', - 'mediumseagreen', - 'mediumslateblue', - 'mediumspringgreen', - 'mediumturquoise', - 'mediumvioletred', - 'Menu', - 'MenuText', - 'midnightblue', - 'mintcream', - 'mistyrose', - 'moccasin', - 'navajowhite', - 'navy', - 'oldlace', - 'olive', - 'olivedrab', - 'orange', - 'orangered', - 'orchid', - 'palegoldenrod', - 'palegreen', - 'paleturquoise', - 'palevioletred', - 'papayawhip', - 'peachpuff', - 'peru', - 'pink', - 'plum', - 'powderblue', - 'purple', - 'rebeccapurple', - 'red', - 'revert-layer', - 'revert', - 'rosybrown', - 'royalblue', - 'saddlebrown', - 'salmon', - 'sandybrown', - 'Scrollbar', - 'seagreen', - 'seashell', - 'sienna', - 'silver', - 'skyblue', - 'slateblue', - 'slategray', - 'slategrey', - 'snow', - 'springgreen', - 'steelblue', - 'tan', - 'teal', - 'thistle', - 'ThreeDDarkShadow', - 'ThreeDFace', - 'ThreeDHighlight', - 'ThreeDLightShadow', - 'ThreeDShadow', - 'tomato', - 'transparent', - 'turquoise', - 'unset', - 'violet', - 'wheat', - 'white', - 'whitesmoke', - 'Window', - 'WindowFrame', - 'WindowText', - 'yellow', - 'yellowgreen', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - columnGap: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - display: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - '-ms-flexbox', - '-ms-grid', - '-ms-inline-flexbox', - '-ms-inline-grid', - '-webkit-flex', - '-webkit-inline-flex', - 'block', - 'contents', - 'flex', - 'flow-root', - 'flow', - 'grid', - 'inherit', - 'initial', - 'inline-block', - 'inline-flex', - 'inline-grid', - 'inline-list-item', - 'inline-table', - 'inline', - 'list-item', - 'none', - 'revert-layer', - 'revert', - 'ruby-base-container', - 'ruby-base', - 'ruby-text-container', - 'ruby-text', - 'ruby', - 'run-in', - 'table-caption', - 'table-cell', - 'table-column-group', - 'table-column', - 'table-footer-group', - 'table-header-group', - 'table-row-group', - 'table-row', - 'table', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - displayPrint: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - '-ms-flexbox', - '-ms-grid', - '-ms-inline-flexbox', - '-ms-inline-grid', - '-webkit-flex', - '-webkit-inline-flex', - 'block', - 'contents', - 'flex', - 'flow-root', - 'flow', - 'grid', - 'inherit', - 'initial', - 'inline-block', - 'inline-flex', - 'inline-grid', - 'inline-list-item', - 'inline-table', - 'inline', - 'list-item', - 'none', - 'revert-layer', - 'revert', - 'ruby-base-container', - 'ruby-base', - 'ruby-text-container', - 'ruby-text', - 'ruby', - 'run-in', - 'table-caption', - 'table-cell', - 'table-column-group', - 'table-column', - 'table-footer-group', - 'table-header-group', - 'table-row-group', - 'table-row', - 'table', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - flex: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - flexBasis: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - flexDirection: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'column-reverse', - 'column', - 'inherit', - 'initial', - 'revert-layer', - 'revert', - 'row-reverse', - 'row', - 'unset', - ]), - PropTypes.arrayOf( - PropTypes.oneOf([ - '-moz-initial', - 'column-reverse', - 'column', - 'inherit', - 'initial', - 'revert-layer', - 'revert', - 'row-reverse', - 'row', - 'unset', - ]).isRequired, - ), - PropTypes.func, - PropTypes.object, - ]), - flexGrow: PropTypes.oneOfType([ - PropTypes.oneOf(['-moz-initial', 'inherit', 'initial', 'revert-layer', 'revert', 'unset']), - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - flexShrink: PropTypes.oneOfType([ - PropTypes.oneOf(['-moz-initial', 'inherit', 'initial', 'revert-layer', 'revert', 'unset']), - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - flexWrap: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'inherit', - 'initial', - 'nowrap', - 'revert-layer', - 'revert', - 'unset', - 'wrap-reverse', - 'wrap', - ]), - PropTypes.arrayOf( - PropTypes.oneOf([ - '-moz-initial', - 'inherit', - 'initial', - 'nowrap', - 'revert-layer', - 'revert', - 'unset', - 'wrap-reverse', - 'wrap', - ]).isRequired, - ), - PropTypes.func, - PropTypes.object, - ]), - fontFamily: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'cursive', - 'fantasy', - 'inherit', - 'initial', - 'monospace', - 'revert-layer', - 'revert', - 'sans-serif', - 'serif', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - fontSize: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - fontStyle: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'inherit', - 'initial', - 'italic', - 'normal', - 'oblique', - 'revert-layer', - 'revert', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - fontWeight: PropTypes.oneOfType([ - PropTypes.arrayOf( - PropTypes.oneOfType([ - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - ), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - gap: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - gridArea: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'auto', - 'inherit', - 'initial', - 'revert-layer', - 'revert', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - gridAutoColumns: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - gridAutoFlow: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'column', - 'dense', - 'inherit', - 'initial', - 'revert-layer', - 'revert', - 'row', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - gridAutoRows: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - gridColumn: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'auto', - 'inherit', - 'initial', - 'revert-layer', - 'revert', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - gridRow: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'auto', - 'inherit', - 'initial', - 'revert-layer', - 'revert', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - gridTemplateAreas: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'inherit', - 'initial', - 'none', - 'revert-layer', - 'revert', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - gridTemplateColumns: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - gridTemplateRows: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - height: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - justifyContent: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'center', - 'end', - 'flex-end', - 'flex-start', - 'inherit', - 'initial', - 'left', - 'normal', - 'revert-layer', - 'revert', - 'right', - 'space-around', - 'space-between', - 'space-evenly', - 'start', - 'stretch', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - justifyItems: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'baseline', - 'center', - 'end', - 'flex-end', - 'flex-start', - 'inherit', - 'initial', - 'left', - 'legacy', - 'normal', - 'revert-layer', - 'revert', - 'right', - 'self-end', - 'self-start', - 'start', - 'stretch', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - justifySelf: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'auto', - 'baseline', - 'center', - 'end', - 'flex-end', - 'flex-start', - 'inherit', - 'initial', - 'left', - 'normal', - 'revert-layer', - 'revert', - 'right', - 'self-end', - 'self-start', - 'start', - 'stretch', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - left: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - letterSpacing: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.string, - ]), - lineHeight: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - m: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - margin: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - marginBottom: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - marginLeft: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - marginRight: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - marginTop: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - marginX: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - marginY: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - maxHeight: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - maxWidth: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - mb: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - minHeight: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - minWidth: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - ml: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - mr: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - mt: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - mx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - my: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - order: PropTypes.oneOfType([ - PropTypes.oneOf(['-moz-initial', 'inherit', 'initial', 'revert-layer', 'revert', 'unset']), - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - overflow: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-hidden-unscrollable', - '-moz-initial', - 'auto', - 'clip', - 'hidden', - 'inherit', - 'initial', - 'revert-layer', - 'revert', - 'scroll', - 'unset', - 'visible', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - p: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - padding: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - paddingBottom: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - paddingLeft: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - paddingRight: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - paddingTop: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - paddingX: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - paddingY: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - pb: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - pl: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - position: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - '-webkit-sticky', - 'absolute', - 'fixed', - 'inherit', - 'initial', - 'relative', - 'revert-layer', - 'revert', - 'static', - 'sticky', - 'unset', - ]), - PropTypes.arrayOf( - PropTypes.oneOf([ - '-moz-initial', - '-webkit-sticky', - 'absolute', - 'fixed', - 'inherit', - 'initial', - 'relative', - 'revert-layer', - 'revert', - 'static', - 'sticky', - 'unset', - ]).isRequired, - ), - PropTypes.func, - PropTypes.object, - ]), - pr: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - pt: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - px: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - py: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - right: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - rowGap: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - textAlign: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'center', - 'end', - 'inherit', - 'initial', - 'justify', - 'left', - 'match-parent', - 'revert-layer', - 'revert', - 'right', - 'start', - 'unset', - ]), - PropTypes.arrayOf( - PropTypes.oneOf([ - '-moz-initial', - 'center', - 'end', - 'inherit', - 'initial', - 'justify', - 'left', - 'match-parent', - 'revert-layer', - 'revert', - 'right', - 'start', - 'unset', - ]).isRequired, - ), - PropTypes.func, - PropTypes.object, - ]), - textOverflow: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'clip', - 'ellipsis', - 'inherit', - 'initial', - 'revert-layer', - 'revert', - 'unset', - ]), - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - ]), - textTransform: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'capitalize', - 'full-size-kana', - 'full-width', - 'inherit', - 'initial', - 'lowercase', - 'none', - 'revert-layer', - 'revert', - 'unset', - 'uppercase', - ]), - PropTypes.arrayOf( - PropTypes.oneOf([ - '-moz-initial', - 'capitalize', - 'full-size-kana', - 'full-width', - 'inherit', - 'initial', - 'lowercase', - 'none', - 'revert-layer', - 'revert', - 'unset', - 'uppercase', - ]).isRequired, - ), - PropTypes.func, - PropTypes.object, - ]), - top: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - typography: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.string), - PropTypes.func, - PropTypes.object, - PropTypes.string, - ]), - visibility: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - 'collapse', - 'hidden', - 'inherit', - 'initial', - 'revert-layer', - 'revert', - 'unset', - 'visible', - ]), - PropTypes.arrayOf( - PropTypes.oneOf([ - '-moz-initial', - 'collapse', - 'hidden', - 'inherit', - 'initial', - 'revert-layer', - 'revert', - 'unset', - 'visible', - ]).isRequired, - ), - PropTypes.func, - PropTypes.object, - ]), - whiteSpace: PropTypes.oneOfType([ - PropTypes.oneOf([ - '-moz-initial', - '-moz-pre-wrap', - 'break-spaces', - 'inherit', - 'initial', - 'normal', - 'nowrap', - 'pre-line', - 'pre-wrap', - 'pre', - 'revert-layer', - 'revert', - 'unset', - ]), - PropTypes.arrayOf( - PropTypes.oneOf([ - '-moz-initial', - '-moz-pre-wrap', - 'break-spaces', - 'inherit', - 'initial', - 'normal', - 'nowrap', - 'pre-line', - 'pre-wrap', - 'pre', - 'revert-layer', - 'revert', - 'unset', - ]).isRequired, - ), - PropTypes.func, - PropTypes.object, - ]), - width: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), - PropTypes.func, - PropTypes.number, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - zIndex: PropTypes.oneOfType([ - PropTypes.arrayOf( - PropTypes.oneOfType([ - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), - ), - PropTypes.func, - PropTypes.object, - PropTypes.shape({ - '__@iterator@18589': PropTypes.func.isRequired, - anchor: PropTypes.func.isRequired, - at: PropTypes.func.isRequired, - big: PropTypes.func.isRequired, - blink: PropTypes.func.isRequired, - bold: PropTypes.func.isRequired, - charAt: PropTypes.func.isRequired, - charCodeAt: PropTypes.func.isRequired, - codePointAt: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - endsWith: PropTypes.func.isRequired, - fixed: PropTypes.func.isRequired, - fontcolor: PropTypes.func.isRequired, - fontsize: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - italics: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - link: PropTypes.func.isRequired, - localeCompare: PropTypes.func.isRequired, - match: PropTypes.func.isRequired, - matchAll: PropTypes.func.isRequired, - normalize: PropTypes.func.isRequired, - padEnd: PropTypes.func.isRequired, - padStart: PropTypes.func.isRequired, - repeat: PropTypes.func.isRequired, - replace: PropTypes.func.isRequired, - replaceAll: PropTypes.func.isRequired, - search: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - small: PropTypes.func.isRequired, - split: PropTypes.func.isRequired, - startsWith: PropTypes.func.isRequired, - strike: PropTypes.func.isRequired, - sub: PropTypes.func.isRequired, - substr: PropTypes.func.isRequired, - substring: PropTypes.func.isRequired, - sup: PropTypes.func.isRequired, - toLocaleLowerCase: PropTypes.func.isRequired, - toLocaleUpperCase: PropTypes.func.isRequired, - toLowerCase: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - toUpperCase: PropTypes.func.isRequired, - trim: PropTypes.func.isRequired, - trimEnd: PropTypes.func.isRequired, - trimLeft: PropTypes.func.isRequired, - trimRight: PropTypes.func.isRequired, - trimStart: PropTypes.func.isRequired, - valueOf: PropTypes.func.isRequired, - }), - PropTypes.string, - ]), -} as any; - -const GridColumnMenuAggregationItemRoot: React.FC = (props) => { - const { column, label, availableAggregationFunctions } = props; +const GridColumnMenuAggregationItemRoot: React.FC = (props) => { + const column = props.column!; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const id = useId(); const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector); + const availableAggregationFunctions = React.useMemo( + () => + getAvailableAggregationFunctions({ + aggregationFunctions: rootProps.aggregationFunctions, + column, + }), + [column, rootProps.aggregationFunctions], + ); + const selectedAggregationRule = React.useMemo(() => { if (!column || !aggregationModel[column.field]) { return ''; @@ -6566,6 +69,8 @@ const GridColumnMenuAggregationItemRoot: React.FC {label} @@ -6607,7 +112,7 @@ GridColumnMenuAggregationItemRoot.propTypes = { onClick: PropTypes.func, } as any; -const GridColumnMenuAggregationItem = (props: GridColumnMenuAggregationItemProps) => ( +const GridColumnMenuAggregationItem = (props: GridColumnMenuItemProps) => ( @@ -6626,7 +131,7 @@ GridColumnMenuAggregationItem.propTypes = { export { GridColumnMenuAggregationItem }; -const GridColumnMenuAggregationItemSimple = (props: GridColumnMenuAggregationItemProps) => ( +const GridColumnMenuAggregationItemSimple = (props: GridColumnMenuItemProps) => ( diff --git a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx new file mode 100644 index 000000000000..7f7e99998831 --- /dev/null +++ b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { + GridColumnMenuDefaultRoot, + GridColumnMenuDefaultProps, + gridProColumnMenuSlots, + gridProColumnMenuInitItems, + GridColumnMenuItemProps, +} from '@mui/x-data-grid-pro'; +import { GridColumnMenuAggregationItem } from './GridColumnMenuAggregationItem'; +import { isGroupingColumn } from '../hooks/features/rowGrouping'; +import { GridColumnMenuRowGroupItem } from './GridColumnMenuRowGroupItem'; +import { GridColumnMenuRowUngroupItem } from './GridColumnMenuRowUngroupItem'; + +const GroupingItem = (props: GridColumnMenuItemProps) => { + const column = props.column!; + if (isGroupingColumn(column.field)) { + return ; + } + if (column.groupable) { + return ; + } + return null; +}; + +export const gridPremiumColumnMenuSlots = { + ...gridProColumnMenuSlots, + ColumnMenuAggregationItem: { component: GridColumnMenuAggregationItem, priority: 17 }, + ColumnMenuGroupingItem: { component: GroupingItem, priority: 13 }, +}; + +export const gridPremiumColumnMenuInitItems = [...gridProColumnMenuInitItems]; + +const GridPremiumColumnMenuDefault = React.forwardRef( + function GridPremiumColumnMenuDefault(props, ref) { + return ( + + ); + }, +); + +GridPremiumColumnMenuDefault.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + currentColumn: PropTypes.object.isRequired, + hideMenu: PropTypes.func.isRequired, + open: PropTypes.bool.isRequired, +} as any; + +export { GridPremiumColumnMenuDefault }; diff --git a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx new file mode 100644 index 000000000000..0c05483eca99 --- /dev/null +++ b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { + GridColumnMenuSimpleRoot, + GridColumnMenuDefaultProps, + gridProColumnMenuSimpleSlots, + gridProColumnMenuSimpleInitItems, + GridColumnMenuItemProps, +} from '@mui/x-data-grid-pro'; +import { GridColumnMenuAggregationItemSimple } from './GridColumnMenuAggregationItem'; +import { isGroupingColumn } from '../hooks/features/rowGrouping'; +import { GridColumnMenuRowGroupItemSimple } from './GridColumnMenuRowGroupItemSimple'; +import { GridColumnMenuRowUngroupItemSimple } from './GridColumnMenuRowUngroupItemSimple'; + +const GroupingItem = (props: GridColumnMenuItemProps) => { + const column = props.column!; + if (isGroupingColumn(column.field)) { + return ; + } + if (column.groupable) { + return ; + } + return null; +}; + +export const gridPremiumColumnMenuSimpleSlots = { + ...gridProColumnMenuSimpleSlots, + ColumnMenuAggregationItem: { component: GridColumnMenuAggregationItemSimple, priority: 32 }, + ColumnMenuGroupingItem: { component: GroupingItem, priority: 22 }, +}; + +export const gridPremiumColumnMenuSimpleInitItems = [...gridProColumnMenuSimpleInitItems]; + +const GridPremiumColumnMenuSimple = React.forwardRef( + function GridPremiumColumnMenuSimple(props, ref) { + return ( + + ); + }, +); + +GridPremiumColumnMenuSimple.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + currentColumn: PropTypes.object.isRequired, + hideMenu: PropTypes.func.isRequired, + open: PropTypes.bool.isRequired, +} as any; + +export { GridPremiumColumnMenuSimple }; diff --git a/packages/grid/x-data-grid-premium/src/components/reexports.ts b/packages/grid/x-data-grid-premium/src/components/reexports.ts new file mode 100644 index 000000000000..3e0cd580c6c3 --- /dev/null +++ b/packages/grid/x-data-grid-premium/src/components/reexports.ts @@ -0,0 +1,2 @@ +export { GridPremiumColumnMenuDefault as GridColumnMenuDefault } from './GridPremiumColumnMenuDefault'; +export { GridPremiumColumnMenuSimple as GridColumnMenuSimple } from './GridPremiumColumnMenuSimple'; diff --git a/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts b/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts index 116ceb14d958..33f6649dfff2 100644 --- a/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts +++ b/packages/grid/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts @@ -1,12 +1,7 @@ import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid-pro'; import { GridPremiumSlotsComponent, GridPremiumIconSlotsComponent } from '../models'; -import { - GridWorkspacesIcon, - GridGroupWorkIcon, - GridColumnMenuAggregationItem, -} from '../components'; -import { GridColumnMenuRowUngroupItem } from '../components/GridColumnMenuRowUngroupItem'; -import { GridColumnMenuRowGroupItem } from '../components/GridColumnMenuRowGroupItem'; +import { GridWorkspacesIcon, GridGroupWorkIcon } from '../components'; +import { GridPremiumColumnMenuDefault } from '../components/GridPremiumColumnMenuDefault'; export const DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS: GridPremiumIconSlotsComponent = { ColumnMenuUngroupIcon: GridWorkspacesIcon, @@ -16,7 +11,5 @@ export const DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS: GridPremiumIconSlotsCom export const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS: GridPremiumSlotsComponent = { ...DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS, ...DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS, - ColumnMenuAggregationItem: GridColumnMenuAggregationItem, - ColumnMenuRowGroupItem: GridColumnMenuRowGroupItem, - ColumnMenuRowUngroupItem: GridColumnMenuRowUngroupItem, + ColumnMenu: GridPremiumColumnMenuDefault, }; diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx index b03ae725679f..833f94e3a8c9 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx @@ -1,9 +1,5 @@ import * as React from 'react'; -import { - gridColumnLookupSelector, - GridColumnMenuValue, - insertItemsInColumnMenu, -} from '@mui/x-data-grid-pro'; +import { gridColumnLookupSelector, GridColumnMenuValue } from '@mui/x-data-grid-pro'; import { GridPipeProcessor, GridRestoreStatePreProcessingContext, @@ -112,9 +108,9 @@ export const useGridAggregationPreProcessors = ( ); const addColumnMenuButtons = React.useCallback>( - (columnMenuValue: GridColumnMenuValue, column) => { + (columnMenuItems: GridColumnMenuValue, { column, slots }) => { if (props.disableAggregation) { - return columnMenuValue; + return columnMenuItems; } const availableAggregationFunctions = getAvailableAggregationFunctions({ @@ -123,35 +119,12 @@ export const useGridAggregationPreProcessors = ( }); if (availableAggregationFunctions.length === 0) { - return columnMenuValue; + return columnMenuItems; } - const aggregationItemProps = { - column, - label: apiRef.current.getLocaleText('aggregationMenuItemHeader'), - availableAggregationFunctions, - }; - - const ColumnMenuAggregationItem = props.components.ColumnMenuAggregationItem; - const items = { - ...columnMenuValue.items, - aggregation: , - }; - - const visibleItemKeys = insertItemsInColumnMenu( - columnMenuValue.visibleItemKeys, - ['divider', 'aggregation'], - 'filter', - ); - - return { visibleItemKeys, items }; + return [...columnMenuItems, slots.ColumnMenuAggregationItem]; }, - [ - apiRef, - props.aggregationFunctions, - props.components.ColumnMenuAggregationItem, - props.disableAggregation, - ], + [props.aggregationFunctions, props.disableAggregation], ); const stateExportPreProcessing = React.useCallback>( diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx index dfa89454ca6c..db2490062a60 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx @@ -4,7 +4,6 @@ import { useGridApiEventHandler, useGridApiMethod, gridColumnLookupSelector, - insertItemsInColumnMenu, GridColumnMenuValue, } from '@mui/x-data-grid-pro'; import { @@ -155,42 +154,16 @@ export const useGridRowGrouping = ( * PRE-PROCESSING */ const addColumnMenuButtons = React.useCallback>( - (columnMenuValue: GridColumnMenuValue, column) => { + (columnMenuItems: GridColumnMenuValue, { column, slots }) => { if (props.disableRowGrouping) { - return columnMenuValue; + return columnMenuItems; } - - const GroupComponent = props.components.ColumnMenuRowGroupItem; - const UngroupComponent = props.components.ColumnMenuRowUngroupItem; - - let menuItem; - if (isGroupingColumn(column.field)) { - menuItem = ; - } else if (column.groupable) { - menuItem = ; - } else { - menuItem = null; - } - - if (menuItem == null) { - return columnMenuValue; + if (isGroupingColumn(column.field) || column.groupable) { + return [...columnMenuItems, slots.ColumnMenuGroupingItem]; } - - const items = { ...columnMenuValue.items, grouping: menuItem }; - - const visibleItemKeys = insertItemsInColumnMenu( - columnMenuValue.visibleItemKeys, - ['divider', 'grouping'], - 'aggregation', - ); - - return { visibleItemKeys, items }; + return columnMenuItems; }, - [ - props.components.ColumnMenuRowUngroupItem, - props.components.ColumnMenuRowGroupItem, - props.disableRowGrouping, - ], + [props.disableRowGrouping], ); const stateExportPreProcessing = React.useCallback>( diff --git a/packages/grid/x-data-grid-premium/src/index.ts b/packages/grid/x-data-grid-premium/src/index.ts index a0634878a930..6d630234ef6a 100644 --- a/packages/grid/x-data-grid-premium/src/index.ts +++ b/packages/grid/x-data-grid-premium/src/index.ts @@ -27,3 +27,5 @@ export type { export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports'; export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexports'; + +export { GridColumnMenuDefault, GridColumnMenuSimple } from './components/reexports'; diff --git a/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts b/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts index ce6c5832ed0a..b9e307b89652 100644 --- a/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts +++ b/packages/grid/x-data-grid-premium/src/models/gridPremiumSlotsComponent.ts @@ -7,20 +7,4 @@ import { GridPremiumIconSlotsComponent } from './gridPremiumIconSlotsComponent'; */ export interface GridPremiumSlotsComponent extends GridProSlotsComponent, - GridPremiumIconSlotsComponent { - /** - * The custom component for aggregation menu item. - * @default GridColumnMenuAggregationItem - */ - ColumnMenuAggregationItem: React.JSXElementConstructor; - /** - * The custom component for ungrouped menu item. - * @default GridColumnMenuRowUngroupItem - */ - ColumnMenuRowUngroupItem: React.JSXElementConstructor; - /** - * The custom component for grouped menu item. - * @default GridColumnMenuRowGroupItem - */ - ColumnMenuRowGroupItem: React.JSXElementConstructor; -} + GridPremiumIconSlotsComponent {} diff --git a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx new file mode 100644 index 000000000000..e0f8483767b8 --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { + GridColumnMenuDefaultRoot, + GridColumnMenuDefaultProps, + gridColumnMenuSlots, + gridColumnMenuInitItems, +} from '@mui/x-data-grid'; +import { GridColumnMenuPinningItem } from './GridColumnMenuPinningItem'; + +export const gridProColumnMenuSlots = { + ...gridColumnMenuSlots, + ColumnMenuPinningItem: { component: GridColumnMenuPinningItem, priority: 5 }, +}; + +export const gridProColumnMenuInitItems = [...gridColumnMenuInitItems]; + +const GridProColumnMenuDefault = React.forwardRef( + function GridProColumnMenuDefault(props: GridColumnMenuDefaultProps, ref) { + return ( + + ); + }, +); + +GridProColumnMenuDefault.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + currentColumn: PropTypes.object.isRequired, + hideMenu: PropTypes.func.isRequired, + open: PropTypes.bool.isRequired, +} as any; + +export { GridProColumnMenuDefault }; diff --git a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx new file mode 100644 index 000000000000..6231401d4dee --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx @@ -0,0 +1,50 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import Divider from '@mui/material/Divider'; +import { + GridColumnMenuSimpleRoot, + GridColumnMenuDefaultProps, + gridColumnMenuSimpleSlots, + gridColumnMenuSimpleInitItems, + GridColumnMenuItemProps, +} from '@mui/x-data-grid'; +import { GridColumnMenuPinningItemSimple } from './GridColumnMenuPinningItemSimple'; + +const PinningWithDivider = (props: GridColumnMenuItemProps) => ( + + + + +); + +export const gridProColumnMenuSimpleSlots = { + ...gridColumnMenuSimpleSlots, + ColumnMenuPinningItem: { component: PinningWithDivider, priority: 40 }, +}; + +export const gridProColumnMenuSimpleInitItems = [...gridColumnMenuSimpleInitItems]; + +const GridProColumnMenuSimple = React.forwardRef( + function GridProColumnMenuDefault(props, ref) { + return ( + + ); + }, +); + +GridProColumnMenuSimple.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + currentColumn: PropTypes.object.isRequired, + hideMenu: PropTypes.func.isRequired, + open: PropTypes.bool.isRequired, +} as any; + +export { GridProColumnMenuSimple }; diff --git a/packages/grid/x-data-grid-pro/src/components/index.ts b/packages/grid/x-data-grid-pro/src/components/index.ts index 75a3bdb4c9fa..d8d49fbd10b7 100644 --- a/packages/grid/x-data-grid-pro/src/components/index.ts +++ b/packages/grid/x-data-grid-pro/src/components/index.ts @@ -3,4 +3,9 @@ export * from './GridTreeDataGroupingCell'; export * from './GridColumnMenuPinningItem'; export * from './GridColumnMenuPinningItemSimple'; export * from './GridDetailPanelToggleCell'; +export { gridProColumnMenuSlots, gridProColumnMenuInitItems } from './GridProColumnMenuDefault'; +export { + gridProColumnMenuSimpleSlots, + gridProColumnMenuSimpleInitItems, +} from './GridProColumnMenuSimple'; export * from './icons'; diff --git a/packages/grid/x-data-grid-pro/src/components/reexports.ts b/packages/grid/x-data-grid-pro/src/components/reexports.ts new file mode 100644 index 000000000000..d247a877e844 --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/components/reexports.ts @@ -0,0 +1,2 @@ +export { GridProColumnMenuDefault as GridColumnMenuDefault } from './GridProColumnMenuDefault'; +export { GridProColumnMenuSimple as GridColumnMenuSimple } from './GridProColumnMenuSimple'; diff --git a/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts b/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts index 23cfb06716a1..56f16bf0c0ce 100644 --- a/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts +++ b/packages/grid/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts @@ -1,10 +1,7 @@ import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid'; import { GridProSlotsComponent, GridProIconSlotsComponent } from '../models'; -import { - GridPushPinRightIcon, - GridPushPinLeftIcon, - GridColumnMenuPinningItem, -} from '../components'; +import { GridPushPinRightIcon, GridPushPinLeftIcon } from '../components'; +import { GridProColumnMenuDefault } from '../components/GridProColumnMenuDefault'; export const DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS: GridProIconSlotsComponent = { ColumnMenuPinRightIcon: GridPushPinRightIcon, @@ -14,5 +11,5 @@ export const DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS: GridProIconSlotsComponent = export const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS: GridProSlotsComponent = { ...DATA_GRID_DEFAULT_SLOTS_COMPONENTS, ...DEFAULT_GRID_PRO_ICON_SLOTS_COMPONENTS, - ColumnMenuPinningItem: GridColumnMenuPinningItem, + ColumnMenu: GridProColumnMenuDefault, }; diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx index 3bbf67742fd6..d46f302209a0 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx @@ -28,7 +28,6 @@ import { } from './gridColumnPinningInterface'; import { gridPinnedColumnsSelector } from './gridColumnPinningSelector'; import { filterColumns } from '../../../components/DataGridProVirtualScroller'; -import { insertItemsInColumnMenu } from '../../../utils'; export const columnPinningStateInitializer: GridStateInitializer< Pick @@ -174,31 +173,18 @@ export const useGridColumnPinning = ( ); const addColumnMenuItems = React.useCallback>( - (columnMenuValue: GridColumnMenuValue, column): GridColumnMenuValue => { + (columnMenuItems: GridColumnMenuValue, { column, slots }): GridColumnMenuValue => { if (props.disableColumnPinning) { - return columnMenuValue; + return columnMenuItems; } if (column.pinnable === false) { - return columnMenuValue; + return columnMenuItems; } - const ColumnMenuPinningItem = props.components.ColumnMenuPinningItem; - - const items = { - ...columnMenuValue.items, - pinning: , - }; - - const visibleItemKeys = insertItemsInColumnMenu( - columnMenuValue.visibleItemKeys, - ['divider', 'pinning'], - 'sorting', - ); - - return { visibleItemKeys, items }; + return [...columnMenuItems, slots.ColumnMenuPinningItem]; }, - [props.disableColumnPinning, props.components], + [props.disableColumnPinning], ); const checkIfCanBeReordered = React.useCallback>( diff --git a/packages/grid/x-data-grid-pro/src/index.ts b/packages/grid/x-data-grid-pro/src/index.ts index 0286ece6a657..febef3943243 100644 --- a/packages/grid/x-data-grid-pro/src/index.ts +++ b/packages/grid/x-data-grid-pro/src/index.ts @@ -26,3 +26,5 @@ export type { DataGridProProps, GridExperimentalProFeatures } from './models/dat export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports'; export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexports'; + +export { GridColumnMenuDefault, GridColumnMenuSimple } from './components/reexports'; diff --git a/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts b/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts index ac2d1a844eda..6c14dfd9f2c9 100644 --- a/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts +++ b/packages/grid/x-data-grid-pro/src/models/gridProSlotsComponent.ts @@ -1,4 +1,3 @@ -import * as React from 'react'; import { GridSlotsComponent } from '@mui/x-data-grid'; import { GridProIconSlotsComponent } from './gridProIconSlotsComponent'; @@ -6,10 +5,4 @@ import { GridProIconSlotsComponent } from './gridProIconSlotsComponent'; * Grid components React prop interface containing all the overridable components * for Pro package */ -export interface GridProSlotsComponent extends GridSlotsComponent, GridProIconSlotsComponent { - /** - * The custom Checkbox component used in the grid for both header and cells. - * @default GridColumnMenuPinningItems - */ - ColumnMenuPinningItem: React.JSXElementConstructor; -} +export interface GridProSlotsComponent extends GridSlotsComponent, GridProIconSlotsComponent {} diff --git a/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts b/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts deleted file mode 100644 index 5b5284b01a8f..000000000000 --- a/packages/grid/x-data-grid-pro/src/utils/columnMenu/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './insertItemsInColumnMenu'; diff --git a/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts b/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts deleted file mode 100644 index 3d4bd49fb33f..000000000000 --- a/packages/grid/x-data-grid-pro/src/utils/columnMenu/insertItemsInColumnMenu.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { GridColumnMenuValue, GridColumnMenuKey } from '@mui/x-data-grid'; - -/** - * Method used to insert specific items after an item in column menu - * - * @param {GridColumnMenuValue['visibleItemKeys']} visibleKeys ordered list of keys for column menu items - * @param {GridColumnMenuValue['visibleItemKeys']} newKeys new keys to be inserted - * @param {GridColumnMenuKey | undefined} afterKey key of the item after which the new keys should be inserted - * @returns {GridColumnMenuValue['visibleItemKeys']} updated keys - */ -export const insertItemsInColumnMenu = ( - visibleKeys: GridColumnMenuValue['visibleItemKeys'], - newKeys: GridColumnMenuValue['visibleItemKeys'], - afterKey: GridColumnMenuKey | undefined, -) => { - if (!afterKey) { - return [...visibleKeys, ...newKeys]; - } - return visibleKeys.reduce((finalItems, key) => { - if (key === afterKey) { - return [...finalItems, key, ...newKeys]; - } - return [...finalItems, key]; - }, []); -}; diff --git a/packages/grid/x-data-grid-pro/src/utils/index.ts b/packages/grid/x-data-grid-pro/src/utils/index.ts index 66b2de707ccf..50842b59a3b1 100644 --- a/packages/grid/x-data-grid-pro/src/utils/index.ts +++ b/packages/grid/x-data-grid-pro/src/utils/index.ts @@ -1,2 +1 @@ export * from './tree'; -export * from './columnMenu'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx deleted file mode 100644 index f9687bd65711..000000000000 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { GridColumnMenuKey } from '../../../hooks/features/columnMenu'; -import { GridColumnMenuProps } from './GridColumnMenuProps'; -import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; - -const GridColumnMenu = (props: GridColumnMenuProps) => { - const { - hideMenu, - currentColumn, - defaultMenuItems, - defaultVisibleItems, - columnMenuItems: userMenuItems, - } = props; - - const apiRef = useGridApiContext(); - - const preProcessedValue = apiRef.current.unstable_applyPipeProcessors( - 'columnMenu', - { items: defaultMenuItems, visibleItemKeys: defaultVisibleItems }, - currentColumn, - ); - - const extendedColumnMenuItems = React.useMemo(() => { - if (!userMenuItems || !Object.keys(userMenuItems).length) { - return preProcessedValue.items; - } - - return { ...preProcessedValue.items, ...userMenuItems }; - }, [preProcessedValue.items, userMenuItems]); - - const filteredAndSortedItemKeys = React.useMemo(() => { - const filterCallback = - currentColumn.getVisibleColumnMenuItems ?? props.getVisibleColumnMenuItems; - - const itemKeys = Object.keys(extendedColumnMenuItems) as Array; - - const filteredItemKeys = - !filterCallback || typeof filterCallback !== 'function' - ? preProcessedValue.visibleItemKeys - : filterCallback({ itemKeys, column: currentColumn, visibleItemKeys: defaultVisibleItems }); - - const visibleItems = filteredItemKeys || defaultVisibleItems; - - return visibleItems; - }, [ - currentColumn, - props.getVisibleColumnMenuItems, - extendedColumnMenuItems, - preProcessedValue.visibleItemKeys, - defaultVisibleItems, - ]); - - return ( - - {filteredAndSortedItemKeys.map((itemKey, index: number) => { - const component = extendedColumnMenuItems[itemKey]; - if (!component) { - return null; - } - const itemProps = { - onClick: hideMenu, - column: currentColumn, - key: index, - }; - - return React.cloneElement(component, itemProps); - })} - - ); -}; - -GridColumnMenu.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * To override existing and add new items in column menu - * If the item is already registered, it will be overwritten otherwise a new item will be registered - */ - columnMenuItems: PropTypes.shape({ - divider: PropTypes.element, - filter: PropTypes.element, - hideColumn: PropTypes.element, - manageColumns: PropTypes.element, - sorting: PropTypes.element, - }), - currentColumn: PropTypes.object.isRequired, - defaultMenuItems: PropTypes.shape({ - divider: PropTypes.element, - filter: PropTypes.element, - hideColumn: PropTypes.element, - manageColumns: PropTypes.element, - sorting: PropTypes.element, - }).isRequired, - /** - * Default column menu items in order that needs to be shown - * Could be overriden by `getVisibleColumnMenuItems` - */ - defaultVisibleItems: PropTypes.arrayOf( - PropTypes.oneOf(['divider', 'filter', 'hideColumn', 'manageColumns', 'sorting']).isRequired, - ).isRequired, - getVisibleColumnMenuItems: PropTypes.func, - hideMenu: PropTypes.func.isRequired, - id: PropTypes.string, - labelledby: PropTypes.string, - open: PropTypes.bool.isRequired, -} as any; - -export { GridColumnMenu }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts index 4da0a482d7d0..0906925fdd4a 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts @@ -1,10 +1,5 @@ import * as React from 'react'; import { GridColDef } from '../../../models/colDef/gridColDef'; -import { - GridColumnMenuValue, - GridColumnMenuKey, - GetVisibleColumnMenuItemsArgs, -} from '../../../hooks/features/columnMenu'; export interface GridColumnMenuProps extends React.HTMLAttributes { hideMenu: (event: React.SyntheticEvent) => void; @@ -12,16 +7,4 @@ export interface GridColumnMenuProps extends React.HTMLAttributes; - getVisibleColumnMenuItems?: (args: GetVisibleColumnMenuItemsArgs) => Array; - /** - * To override existing and add new items in column menu - * If the item is already registered, it will be overwritten otherwise a new item will be registered - */ - columnMenuItems?: GridColumnMenuValue['items']; - defaultMenuItems: GridColumnMenuValue['items']; } diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx index 206b4ad70c08..e5c7a0e38a36 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuContainer.tsx @@ -16,14 +16,7 @@ const GridColumnMenuContainerRoot = styled('div')(({ theme }) => ({ export interface GridColumnMenuContainerProps extends Pick< GridColumnMenuProps, - | 'hideMenu' - | 'currentColumn' - | 'open' - | 'getVisibleColumnMenuItems' - | 'id' - | 'labelledby' - | 'className' - | 'children' + 'hideMenu' | 'currentColumn' | 'open' | 'id' | 'labelledby' | 'className' | 'children' > {} const GridColumnMenuContainer = React.forwardRef( @@ -63,7 +56,6 @@ GridColumnMenuContainer.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- currentColumn: PropTypes.object.isRequired, - getVisibleColumnMenuItems: PropTypes.func, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, labelledby: PropTypes.string, diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx index 9ff47c3609df..df56df5cb14e 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx @@ -1,46 +1,87 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Divider from '@mui/material/Divider'; -import { GridColumnMenuValue, GridColumnMenuKey } from '../../../../hooks/features/columnMenu'; import { GridColumnMenuContainer } from './GridColumnMenuContainer'; -import { GridColumnMenu } from '../GridColumnMenu'; import { GridColumnMenuProps } from '../GridColumnMenuProps'; import { GridColumnMenuColumnsItem } from './GridColumnMenuColumnsItem'; import { GridColumnMenuFilterItem } from './GridColumnMenuFilterItem'; import { GridColumnMenuHideItem } from './GridColumnMenuHideItem'; import { GridColumnMenuSortItem } from './GridColumnMenuSortItem'; +import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; +import { GridColumnMenuValue, GridColumnMenuSlot } from '../../../../hooks/features/columnMenu'; export interface GridColumnMenuDefaultProps - extends Pick {} - -const defaultVisibleItems: Array = [ - 'sorting', - 'divider', - 'filter', - 'divider', - 'hideColumn', - 'divider', - 'manageColumns', + extends Pick { + initialItems: GridColumnMenuValue; + slots: { [key: string]: GridColumnMenuSlot }; +} + +// TODO: Future enhancement: Replace with `rootProps.components.{x}` +export const gridColumnMenuSlots = { + ColumnMenuSortItem: { component: GridColumnMenuSortItem, priority: 0 }, + ColumnMenuFilterItem: { component: GridColumnMenuFilterItem, priority: 10 }, + ColumnMenuHideItem: { component: GridColumnMenuHideItem, priority: 20 }, + ColumnMenuColumnsItem: { component: GridColumnMenuColumnsItem, priority: 30 }, +}; + +// Nice to have TODO: Inject these values from respected hooks where possible +export const gridColumnMenuInitItems = [ + gridColumnMenuSlots.ColumnMenuSortItem, + gridColumnMenuSlots.ColumnMenuFilterItem, + gridColumnMenuSlots.ColumnMenuHideItem, + gridColumnMenuSlots.ColumnMenuColumnsItem, ]; -const GridColumnMenuDefault = React.forwardRef( - function GridColumnMenuDefault(props: GridColumnMenuDefaultProps, ref) { - const defaultMenuItems: GridColumnMenuValue['items'] = { - sorting: , - filter: , - hideColumn: , - manageColumns: , - divider: , - }; +export const GridColumnMenuDefaultRoot = React.forwardRef< + HTMLDivElement, + GridColumnMenuDefaultProps +>(function GridColumnMenuDefault(props, ref) { + const apiRef = useGridApiContext(); + const itemProps = { + onClick: props.hideMenu, + column: props.currentColumn, + }; + + const preProcessedItems = apiRef.current.unstable_applyPipeProcessors( + 'columnMenu', + props.initialItems, + { + column: props.currentColumn, + slots: props.slots, + }, + ); + const orderedItems = React.useMemo( + () => preProcessedItems.sort((a, b) => a.priority - b.priority), + [preProcessedItems], + ); + + return ( + + {orderedItems.map((item, index: number) => { + if (!item) { + return null; + } + return ( + + + {index !== orderedItems.length - 1 ? : null} + + ); + })} + + ); +}); + +const GridColumnMenuDefault = React.forwardRef( + function GridColumnMenuSimple(props, ref) { return ( - - - + ); }, ); diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts index faa97ed7729c..d71b8880a2d6 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts @@ -6,4 +6,11 @@ export * from './GridColumnMenuSortItem'; // components export * from './GridColumnMenuContainer'; -export * from './GridColumnMenuDefault'; +export { + gridColumnMenuSlots, + gridColumnMenuInitItems, + GridColumnMenuDefaultRoot, + // GridColumnMenuDefault exported from `./index.ts` to be able to reexported +} from './GridColumnMenuDefault'; + +export type { GridColumnMenuDefaultProps } from './GridColumnMenuDefault'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts index bd618de4ebef..0a40a9f85c2a 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts @@ -1,6 +1,5 @@ // shared modules export * from './GridColumnHeaderMenu'; -export * from './GridColumnMenu'; export * from './GridColumnMenuProps'; export * from './GridColumnMenuItemProps'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index 6851ca8c8cf8..61d4b035bf4c 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -1,46 +1,80 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import Divider from '@mui/material/Divider'; -import { GridColumnMenuKey } from '../../../../hooks/features/columnMenu'; import { GridColumnMenuSimpleContainer } from './GridColumnMenuSimpleContainer'; import { GridColumnMenuProps } from '../GridColumnMenuProps'; import { GridColumnMenuColumnsItemSimple } from './GridColumnMenuColumnsItemSimple'; import { GridColumnMenuFilterItemSimple } from './GridColumnMenuFilterItemSimple'; import { GridColumnMenuHideItemSimple } from './GridColumnMenuHideItemSimple'; import { GridColumnMenuSortItemSimple } from './GridColumnMenuSortItemSimple'; -import { GridColumnMenu } from '../GridColumnMenu'; - -interface Props - extends Pick< - GridColumnMenuProps, - 'hideMenu' | 'currentColumn' | 'open' | 'getVisibleColumnMenuItems' - > {} - -const defaultVisibleItems: Array = [ - 'sorting', - 'filter', - 'hideColumn', - 'manageColumns', +import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; +import { GridColumnMenuValue, GridColumnMenuSlot } from '../../../../hooks/features/columnMenu'; + +// TODO Remove +interface GridColumnMenuDefaultProps + extends Pick { + initialItems: GridColumnMenuValue; + slots: { [key: string]: GridColumnMenuSlot }; +} + +export const gridColumnMenuSimpleSlots = { + ColumnMenuSortItem: { component: GridColumnMenuSortItemSimple, priority: 0 }, + ColumnMenuFilterItem: { component: GridColumnMenuFilterItemSimple, priority: 10 }, + ColumnMenuHideItem: { component: GridColumnMenuHideItemSimple, priority: 20 }, + ColumnMenuColumnsItem: { component: GridColumnMenuColumnsItemSimple, priority: 30 }, +}; + +export const gridColumnMenuSimpleInitItems = [ + gridColumnMenuSimpleSlots.ColumnMenuSortItem, + gridColumnMenuSimpleSlots.ColumnMenuFilterItem, + gridColumnMenuSimpleSlots.ColumnMenuHideItem, + gridColumnMenuSimpleSlots.ColumnMenuColumnsItem, ]; -const GridColumnMenuSimple = React.forwardRef( - function GridColumnMenuSimple(props: Props, ref) { - const defaultMenuItems = { - sorting: , - filter: , - hideColumn: , - manageColumns: , - divider: , - }; +export const GridColumnMenuSimpleRoot = React.forwardRef< + HTMLUListElement, + GridColumnMenuDefaultProps +>(function GridColumnMenuSimpleRoot(props: GridColumnMenuDefaultProps, ref) { + const apiRef = useGridApiContext(); + const itemProps = { + onClick: props.hideMenu, + column: props.currentColumn, + }; + + const preProcessedItems = apiRef.current.unstable_applyPipeProcessors( + 'columnMenu', + props.initialItems, + { + column: props.currentColumn, + slots: props.slots, + }, + ); + + const orderedItems = React.useMemo( + () => preProcessedItems.sort((a, b) => a.priority - b.priority), + [preProcessedItems], + ); + + return ( + + {orderedItems.map((item, index) => { + if (!item) { + return null; + } + return ; + })} + + ); +}); +const GridColumnMenuSimple = React.forwardRef( + function GridColumnMenuSimple(props: GridColumnMenuDefaultProps, ref) { return ( - - - + ); }, ); @@ -51,7 +85,6 @@ GridColumnMenuSimple.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- currentColumn: PropTypes.object.isRequired, - getVisibleColumnMenuItems: PropTypes.func, hideMenu: PropTypes.func.isRequired, open: PropTypes.bool.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx index 59ee9530d607..266fddb70c15 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx @@ -9,14 +9,7 @@ import { gridClasses } from '../../../../constants/gridClasses'; interface GridColumnMenuSimpleProps extends Pick< GridColumnMenuProps, - | 'hideMenu' - | 'currentColumn' - | 'open' - | 'getVisibleColumnMenuItems' - | 'id' - | 'labelledby' - | 'className' - | 'children' + 'hideMenu' | 'currentColumn' | 'open' | 'id' | 'labelledby' | 'className' | 'children' > {} const GridColumnMenuSimpleContainer = React.forwardRef( @@ -57,7 +50,6 @@ GridColumnMenuSimpleContainer.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- currentColumn: PropTypes.object.isRequired, - getVisibleColumnMenuItems: PropTypes.func, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, labelledby: PropTypes.string, diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts index bf2d82db7417..14844b209826 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts @@ -6,4 +6,9 @@ export * from './GridColumnMenuSortItemSimple'; // components export * from './GridColumnMenuSimpleContainer'; -export * from './GridColumnMenuSimple'; +export { + gridColumnMenuSimpleSlots, + gridColumnMenuSimpleInitItems, + GridColumnMenuSimpleRoot, + // GridColumnMenuSimple exported from `./index.ts` to be able to reexported +} from './GridColumnMenuSimple'; diff --git a/packages/grid/x-data-grid/src/components/reexportable.ts b/packages/grid/x-data-grid/src/components/reexportable.ts new file mode 100644 index 000000000000..96c66d87e92f --- /dev/null +++ b/packages/grid/x-data-grid/src/components/reexportable.ts @@ -0,0 +1,2 @@ +export { GridColumnMenuDefault } from './menu/columnMenu/default/GridColumnMenuDefault'; +export { GridColumnMenuSimple } from './menu/columnMenu/simple/GridColumnMenuSimple'; diff --git a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts index c838013e2f48..4edb601296db 100644 --- a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts +++ b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts @@ -15,7 +15,6 @@ import { GridCheckIcon, GridCloseIcon, GridColumnIcon, - GridColumnMenuDefault, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, @@ -46,6 +45,7 @@ import { GridViewColumnIcon, GridClearIcon, } from '../components'; +import { GridColumnMenuDefault } from '../components/reexportable'; import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon'; import { ErrorOverlay } from '../components/ErrorOverlay'; import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay'; diff --git a/packages/grid/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts b/packages/grid/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts index 8901eb8b51b2..b6e449d68934 100644 --- a/packages/grid/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts +++ b/packages/grid/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts @@ -7,7 +7,10 @@ import { GridRestoreStatePreProcessingValue, } from '../../features/statePersistence/gridStatePersistenceInterface'; import { GridHydrateColumnsValue } from '../../features/columns/gridColumnsInterfaces'; -import { GridColumnMenuValue } from '../../features/columnMenu/columnMenuInterfaces'; +import { + GridColumnMenuValue, + GridColumnMenuSlot, +} from '../../features/columnMenu/columnMenuInterfaces'; import { GridRowEntry, GridRowId } from '../../../models/gridRows'; import { GridHydrateRowsValue } from '../../features/rows/gridRowsInterfaces'; import { GridPreferencePanelsValue } from '../../features/preferencesPanel'; @@ -15,7 +18,10 @@ import { GridPreferencePanelsValue } from '../../features/preferencesPanel'; export type GridPipeProcessorGroup = keyof GridPipeProcessingLookup; export interface GridPipeProcessingLookup { - columnMenu: { value: GridColumnMenuValue; context: GridColDef }; + columnMenu: { + value: GridColumnMenuValue; + context: { column: GridColDef; slots: { [key: string]: GridColumnMenuSlot } }; + }; exportState: { value: GridInitialStateCommunity; context: GridExportStateParams }; hydrateColumns: { value: GridHydrateColumnsValue; diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts index 0c7b2e80609c..421a71a5ef02 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts @@ -1,32 +1,13 @@ -import { OverridableStringUnion } from '@mui/types'; -import React from 'react'; -// TODO Fix cyclic deps -// eslint-disable-next-line import/no-cycle -import { GridColDef } from '../../../models/colDef/gridColDef'; +import * as React from 'react'; export interface GridColumnMenuState { open: boolean; field?: string; } -// To be used by Pro and Premium packages for overriding -export interface GridColumnMenuKeysInternalOverrides {} - -// To be used by users for overriding -export interface GridColumnMenuKeysOverrides {} - -export type GridColumnMenuKey = OverridableStringUnion< - 'filter' | 'sorting' | 'hideColumn' | 'manageColumns' | 'divider', - GridColumnMenuKeysInternalOverrides & GridColumnMenuKeysOverrides ->; - -export interface GridColumnMenuValue { - items: { [key in GridColumnMenuKey]?: React.ReactElement }; - visibleItemKeys: Array; +export interface GridColumnMenuSlot { + component: React.JSXElementConstructor; + priority: number; } -export interface GetVisibleColumnMenuItemsArgs { - visibleItemKeys: Array; - itemKeys: Array; - column: GridColDef; -} +export type GridColumnMenuValue = Array; diff --git a/packages/grid/x-data-grid/src/index.ts b/packages/grid/x-data-grid/src/index.ts index ca9c0514a38f..4c7a1cd02186 100644 --- a/packages/grid/x-data-grid/src/index.ts +++ b/packages/grid/x-data-grid/src/index.ts @@ -20,6 +20,11 @@ export type { DataGridProps, GridExperimentalFeatures } from './models/props/Dat export type { GridToolbarExportProps } from './components/toolbar/GridToolbarExport'; export type { GridExportFormat, GridExportExtension } from './models/gridExport'; +/** + * Reexportable components. + */ +export { GridColumnMenuDefault, GridColumnMenuSimple } from './components/reexportable'; + /** * The full grid API. */ diff --git a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts b/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts index 83e508a4e724..3d19688f3cd1 100644 --- a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts +++ b/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts @@ -2,8 +2,6 @@ import * as React from 'react'; import { GridCellClassNamePropType } from '../gridCellClass'; import { GridColumnHeaderClassNamePropType } from '../gridColumnHeaderClass'; import { GridFilterOperator } from '../gridFilterOperator'; -// eslint-disable-next-line import/no-cycle -import { GridColumnMenuKey, GetVisibleColumnMenuItemsArgs } from '../../hooks/features/columnMenu'; import { GridCellParams, GridRenderCellParams, @@ -242,12 +240,6 @@ export interface GridColDef { * @default 1 */ colSpan?: number | ((params: GridCellParams) => number | undefined); - /** - * Recieves registered column menu items and should return the items which should be shown. - * @param {GetVisibleColumnMenuItemsArgs} args Arguments of type GetVisibleColumnMenuItemsArgs. - * @returns {Array} Keys of items which are needed to be shown. - */ - getVisibleColumnMenuItems?: (args: GetVisibleColumnMenuItemsArgs) => Array; } export interface GridActionsColDef From a040816d3bc66e51551af5087fabcd18c839eb29 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sun, 13 Nov 2022 13:08:56 +0500 Subject: [PATCH 028/104] Some housekeeping --- .../x/api/data-grid/data-grid-premium.json | 16 ---- docs/pages/x/api/data-grid/grid-col-def.md | 79 +++++++++---------- .../data-grid/data-grid-premium-pt.json | 4 - .../data-grid/data-grid-premium-zh.json | 4 - .../api-docs/data-grid/data-grid-premium.json | 4 - .../GridColumnMenuAggregationItem.tsx | 4 +- .../default/GridColumnMenuDefault.tsx | 7 ++ .../simple/GridColumnMenuSimple.tsx | 7 ++ scripts/x-data-grid-premium.exports.json | 19 +++-- scripts/x-data-grid-pro.exports.json | 19 +++-- scripts/x-data-grid.exports.json | 14 ++-- 11 files changed, 86 insertions(+), 91 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 019a21cb6cc7..f8125b7c61ab 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -266,10 +266,6 @@ "type": { "name": "elementType" } }, "ColumnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } }, - "ColumnMenuAggregationItem": { - "default": "GridColumnMenuAggregationItem", - "type": { "name": "elementType" } - }, "ColumnMenuClearIcon": { "default": "GridClearIcon", "type": { "name": "elementType" } }, "ColumnMenuFilterIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, "ColumnMenuGroupIcon": { "default": "GridGroupWorkIcon", "type": { "name": "elementType" } }, @@ -286,22 +282,10 @@ "default": "GridPushPinLeftIcon", "type": { "name": "elementType" } }, - "ColumnMenuPinningItem": { - "default": "GridColumnMenuPinningItems", - "type": { "name": "elementType" } - }, "ColumnMenuPinRightIcon": { "default": "GridPushPinRightIcon", "type": { "name": "elementType" } }, - "ColumnMenuRowGroupItem": { - "default": "GridColumnMenuRowGroupItem", - "type": { "name": "elementType" } - }, - "ColumnMenuRowUngroupItem": { - "default": "GridColumnMenuRowUngroupItem", - "type": { "name": "elementType" } - }, "ColumnMenuSortAscendingIcon": { "default": "GridArrowUpwardIcon", "type": { "name": "elementType" } diff --git a/docs/pages/x/api/data-grid/grid-col-def.md b/docs/pages/x/api/data-grid/grid-col-def.md index 1403ffaa7605..53da8972dfc4 100644 --- a/docs/pages/x/api/data-grid/grid-col-def.md +++ b/docs/pages/x/api/data-grid/grid-col-def.md @@ -14,43 +14,42 @@ import { GridColDef } from '@mui/x-data-grid'; ## Properties -| Name | Type | Default | Description | -| :---------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| align? | GridAlignment | | Allows to align the column values in cells. | -| cellClassName? | GridCellClassNamePropType | | Class name that will be added in cells for that column. | -| colSpan? | number \| ((params: GridCellParams<V, R, F>) => number \| undefined) | 1 | Number of columns a cell should span. | -| description? | string | | The description of the column rendered as tooltip if the column header name is not fully displayed. | -| disableColumnMenu? | boolean | false | If `true`, the column menu is disabled for this column. | -| disableExport? | boolean | false | If `true`, this column will not be included in exports. | -| disableReorder? | boolean | false | If `true`, this column cannot be reordered. | -| editable? | boolean | false | If `true`, the cells of the column are editable. | -| field | string | | The column identifier. It's used to map with GridRowModel values. | -| filterable? | boolean | true | If `true`, the column is filterable. | -| filterOperators? | GridFilterOperator<R, V, F>[] | | Allows setting the filter operators for this column. | -| flex? | number | | If set, it indicates that a column has fluid width. Range [0, ∞). | -| getApplyQuickFilterFn? | (value: any, colDef: GridStateColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => null \| ((params: GridCellParams<V, R, F>) => boolean) | | The callback that generates a filtering function for a given quick filter value.
This function can return `null` to skip filtering for this value and column. | -| getVisibleColumnMenuItems? | (args: GetVisibleColumnMenuItemsArgs) => Array<GridColumnMenuKey> | | Recieves registered column menu items and should return the items which should be shown. | -| groupable? | boolean | true | If `true`, the rows can be grouped based on this column values (pro-plan only).
Only available in DataGridPremium. | -| headerAlign? | GridAlignment | | Header cell element alignment. | -| headerClassName? | GridColumnHeaderClassNamePropType | | Class name that will be added in the column header cell. | -| headerName? | string | | The title of the column rendered in the column header cell. | -| hideable? | boolean | true | If `false`, removes the buttons for hiding this column. | -| hideSortIcons? | boolean | false | Toggle the visibility of the sort icons. | -| maxWidth? | number | Infinity | Sets the maximum width of a column. | -| minWidth? | number | 50 | Sets the minimum width of a column. | -| pinnable? | boolean | true | If `false`, the menu items for column pinning menu will not be rendered.
Only available in DataGridPro. | -| preProcessEditCellProps? | (params: GridPreProcessEditCellProps) => GridEditCellProps \| Promise<GridEditCellProps> | | Callback fired when the edit props of the cell changes.
It allows to process the props that saved into the state. | -| renderCell? | (params: GridRenderCellParams<V, R, F>) => React.ReactNode | | Allows to override the component rendered as cell for this column. | -| renderEditCell? | (params: GridRenderEditCellParams<V>) => React.ReactNode | | Allows to override the component rendered in edit cell mode for this column. | -| renderHeader? | (params: GridColumnHeaderParams<V, R, F>) => React.ReactNode | | Allows to render a component in the column header cell. | -| resizable? | boolean | true | If `true`, the column is resizable. | -| sortable? | boolean | true | If `true`, the column is sortable. | -| sortComparator? | GridComparatorFn<V> | | A comparator function used to sort rows. | -| sortingOrder? | GridSortDirection[] | | The order of the sorting sequence. | -| type? | GridColType | 'string' | Type allows to merge this object with a default definition [GridColDef](/x/api/data-grid/grid-col-def/). | -| valueFormatter? | (params: GridValueFormatterParams<V>) => F | | Function that allows to apply a formatter before rendering its value. | -| valueGetter? | (params: GridValueGetterParams<any, R>) => V | | Function that allows to get a specific data instead of field to render in the cell. | -| valueOptions? | Array<ValueOptions> \| ((params: GridValueOptionsParams<R>) => Array<ValueOptions>) | | To be used in combination with `type: 'singleSelect'`. This is an array (or a function returning an array) of the possible cell values and labels. | -| valueParser? | (value: F \| undefined, params?: GridCellParams<V, R, F>) => V | | Function that takes the user-entered value and converts it to a value used internally. | -| valueSetter? | (params: GridValueSetterParams<R, V>) => R | | Function that allows to customize how the entered value is stored in the row.
It only works with cell/row editing. | -| width? | number | 100 | Set the width of the column. | +| Name | Type | Default | Description | +| :-------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| align? | GridAlignment | | Allows to align the column values in cells. | +| cellClassName? | GridCellClassNamePropType | | Class name that will be added in cells for that column. | +| colSpan? | number \| ((params: GridCellParams<V, R, F>) => number \| undefined) | 1 | Number of columns a cell should span. | +| description? | string | | The description of the column rendered as tooltip if the column header name is not fully displayed. | +| disableColumnMenu? | boolean | false | If `true`, the column menu is disabled for this column. | +| disableExport? | boolean | false | If `true`, this column will not be included in exports. | +| disableReorder? | boolean | false | If `true`, this column cannot be reordered. | +| editable? | boolean | false | If `true`, the cells of the column are editable. | +| field | string | | The column identifier. It's used to map with GridRowModel values. | +| filterable? | boolean | true | If `true`, the column is filterable. | +| filterOperators? | GridFilterOperator<R, V, F>[] | | Allows setting the filter operators for this column. | +| flex? | number | | If set, it indicates that a column has fluid width. Range [0, ∞). | +| getApplyQuickFilterFn? | (value: any, colDef: GridStateColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => null \| ((params: GridCellParams<V, R, F>) => boolean) | | The callback that generates a filtering function for a given quick filter value.
This function can return `null` to skip filtering for this value and column. | +| groupable? | boolean | true | If `true`, the rows can be grouped based on this column values (pro-plan only).
Only available in DataGridPremium. | +| headerAlign? | GridAlignment | | Header cell element alignment. | +| headerClassName? | GridColumnHeaderClassNamePropType | | Class name that will be added in the column header cell. | +| headerName? | string | | The title of the column rendered in the column header cell. | +| hideable? | boolean | true | If `false`, removes the buttons for hiding this column. | +| hideSortIcons? | boolean | false | Toggle the visibility of the sort icons. | +| maxWidth? | number | Infinity | Sets the maximum width of a column. | +| minWidth? | number | 50 | Sets the minimum width of a column. | +| pinnable? | boolean | true | If `false`, the menu items for column pinning menu will not be rendered.
Only available in DataGridPro. | +| preProcessEditCellProps? | (params: GridPreProcessEditCellProps) => GridEditCellProps \| Promise<GridEditCellProps> | | Callback fired when the edit props of the cell changes.
It allows to process the props that saved into the state. | +| renderCell? | (params: GridRenderCellParams<V, R, F>) => React.ReactNode | | Allows to override the component rendered as cell for this column. | +| renderEditCell? | (params: GridRenderEditCellParams<V>) => React.ReactNode | | Allows to override the component rendered in edit cell mode for this column. | +| renderHeader? | (params: GridColumnHeaderParams<V, R, F>) => React.ReactNode | | Allows to render a component in the column header cell. | +| resizable? | boolean | true | If `true`, the column is resizable. | +| sortable? | boolean | true | If `true`, the column is sortable. | +| sortComparator? | GridComparatorFn<V> | | A comparator function used to sort rows. | +| sortingOrder? | GridSortDirection[] | | The order of the sorting sequence. | +| type? | GridColType | 'string' | Type allows to merge this object with a default definition [GridColDef](/x/api/data-grid/grid-col-def/). | +| valueFormatter? | (params: GridValueFormatterParams<V>) => F | | Function that allows to apply a formatter before rendering its value. | +| valueGetter? | (params: GridValueGetterParams<any, R>) => V | | Function that allows to get a specific data instead of field to render in the cell. | +| valueOptions? | Array<ValueOptions> \| ((params: GridValueOptionsParams<R>) => Array<ValueOptions>) | | To be used in combination with `type: 'singleSelect'`. This is an array (or a function returning an array) of the possible cell values and labels. | +| valueParser? | (value: F \| undefined, params?: GridCellParams<V, R, F>) => V | | Function that takes the user-entered value and converts it to a value used internally. | +| valueSetter? | (params: GridValueSetterParams<R, V>) => R | | Function that allows to customize how the entered value is stored in the row.
It only works with cell/row editing. | +| width? | number | 100 | Set the width of the column. | diff --git a/docs/translations/api-docs/data-grid/data-grid-premium-pt.json b/docs/translations/api-docs/data-grid/data-grid-premium-pt.json index 237fcaa177f1..c81be6ccf1bf 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium-pt.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium-pt.json @@ -658,10 +658,6 @@ } }, "slotDescriptions": { - "ColumnMenuAggregationItem": "The custom component for aggregation menu item.", - "ColumnMenuRowUngroupItem": "The custom component for ungrouped menu item.", - "ColumnMenuRowGroupItem": "The custom component for grouped menu item.", - "ColumnMenuPinningItem": "The custom Checkbox component used in the grid for both header and cells.", "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "BaseTextField": "The custom TextField component used in the grid.", "BaseFormControl": "The custom FormControl component used in the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium-zh.json b/docs/translations/api-docs/data-grid/data-grid-premium-zh.json index 237fcaa177f1..c81be6ccf1bf 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium-zh.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium-zh.json @@ -658,10 +658,6 @@ } }, "slotDescriptions": { - "ColumnMenuAggregationItem": "The custom component for aggregation menu item.", - "ColumnMenuRowUngroupItem": "The custom component for ungrouped menu item.", - "ColumnMenuRowGroupItem": "The custom component for grouped menu item.", - "ColumnMenuPinningItem": "The custom Checkbox component used in the grid for both header and cells.", "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "BaseTextField": "The custom TextField component used in the grid.", "BaseFormControl": "The custom FormControl component used in the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json index 237fcaa177f1..c81be6ccf1bf 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -658,10 +658,6 @@ } }, "slotDescriptions": { - "ColumnMenuAggregationItem": "The custom component for aggregation menu item.", - "ColumnMenuRowUngroupItem": "The custom component for ungrouped menu item.", - "ColumnMenuRowGroupItem": "The custom component for grouped menu item.", - "ColumnMenuPinningItem": "The custom Checkbox component used in the grid for both header and cells.", "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "BaseTextField": "The custom TextField component used in the grid.", "BaseFormControl": "The custom FormControl component used in the grid.", diff --git a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx index b247a4d2b888..d2b2051dfb7d 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx @@ -142,9 +142,7 @@ GridColumnMenuAggregationItemSimple.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - availableAggregationFunctions: PropTypes.arrayOf(PropTypes.string).isRequired, - column: PropTypes.object.isRequired, - label: PropTypes.string.isRequired, + column: PropTypes.object, onClick: PropTypes.func, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx index df56df5cb14e..e407ace439b7 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx @@ -93,7 +93,14 @@ GridColumnMenuDefault.propTypes = { // ---------------------------------------------------------------------- currentColumn: PropTypes.object.isRequired, hideMenu: PropTypes.func.isRequired, + initialItems: PropTypes.arrayOf( + PropTypes.shape({ + component: PropTypes.elementType.isRequired, + priority: PropTypes.number.isRequired, + }), + ).isRequired, open: PropTypes.bool.isRequired, + slots: PropTypes.object.isRequired, } as any; export { GridColumnMenuDefault }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index 61d4b035bf4c..0bcacce9a6c1 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -86,7 +86,14 @@ GridColumnMenuSimple.propTypes = { // ---------------------------------------------------------------------- currentColumn: PropTypes.object.isRequired, hideMenu: PropTypes.func.isRequired, + initialItems: PropTypes.arrayOf( + PropTypes.shape({ + component: PropTypes.elementType.isRequired, + priority: PropTypes.number.isRequired, + }), + ).isRequired, open: PropTypes.bool.isRequired, + slots: PropTypes.object.isRequired, } as any; export { GridColumnMenuSimple }; diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index e5acd893013e..33be8c0c6702 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -42,7 +42,6 @@ { "name": "getGridStringQuickFilterFn", "kind": "Variable" }, { "name": "getGroupRowIdFromPath", "kind": "Variable" }, { "name": "getRowGroupingFieldFromGroupingCriteria", "kind": "Variable" }, - { "name": "GetVisibleColumnMenuItemsArgs", "kind": "Interface" }, { "name": "GRID_ACTIONS_COL_DEF", "kind": "Variable" }, { "name": "GRID_ACTIONS_COLUMN_TYPE", "kind": "Variable" }, { "name": "GRID_AGGREGATION_FUNCTIONS", "kind": "Variable" }, @@ -160,7 +159,6 @@ { "name": "GridColumnIdentifier", "kind": "TypeAlias" }, { "name": "GridColumnLookup", "kind": "TypeAlias" }, { "name": "gridColumnLookupSelector", "kind": "Variable" }, - { "name": "GridColumnMenu", "kind": "Variable" }, { "name": "GridColumnMenuAggregationItem", "kind": "Variable" }, { "name": "GridColumnMenuAggregationItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuApi", "kind": "Interface" }, @@ -170,14 +168,13 @@ { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, { "name": "GridColumnMenuDefault", "kind": "Variable" }, { "name": "GridColumnMenuDefaultProps", "kind": "Interface" }, + { "name": "GridColumnMenuDefaultRoot", "kind": "Variable" }, { "name": "GridColumnMenuFilterItem", "kind": "Variable" }, { "name": "GridColumnMenuFilterItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuHideItem", "kind": "Variable" }, { "name": "GridColumnMenuHideItemSimple", "kind": "Variable" }, + { "name": "gridColumnMenuInitItems", "kind": "Variable" }, { "name": "GridColumnMenuItemProps", "kind": "Interface" }, - { "name": "GridColumnMenuKey", "kind": "TypeAlias" }, - { "name": "GridColumnMenuKeysInternalOverrides", "kind": "Interface" }, - { "name": "GridColumnMenuKeysOverrides", "kind": "Interface" }, { "name": "GridColumnMenuPinningItem", "kind": "Variable" }, { "name": "GridColumnMenuPinningItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuProps", "kind": "Interface" }, @@ -188,10 +185,15 @@ { "name": "gridColumnMenuSelector", "kind": "Variable" }, { "name": "GridColumnMenuSimple", "kind": "Variable" }, { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, + { "name": "gridColumnMenuSimpleInitItems", "kind": "Variable" }, + { "name": "GridColumnMenuSimpleRoot", "kind": "Variable" }, + { "name": "gridColumnMenuSimpleSlots", "kind": "Variable" }, + { "name": "GridColumnMenuSlot", "kind": "Interface" }, + { "name": "gridColumnMenuSlots", "kind": "Variable" }, { "name": "GridColumnMenuSortItem", "kind": "Variable" }, { "name": "GridColumnMenuSortItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuState", "kind": "Interface" }, - { "name": "GridColumnMenuValue", "kind": "Interface" }, + { "name": "GridColumnMenuValue", "kind": "TypeAlias" }, { "name": "GridColumnNode", "kind": "TypeAlias" }, { "name": "GridColumnOrderChangeParams", "kind": "Interface" }, { "name": "GridColumnPinningApi", "kind": "Interface" }, @@ -411,6 +413,10 @@ { "name": "GridPrintExportMenuItem", "kind": "Function" }, { "name": "GridPrintExportMenuItemProps", "kind": "TypeAlias" }, { "name": "GridPrintExportOptions", "kind": "Interface" }, + { "name": "gridProColumnMenuInitItems", "kind": "Variable" }, + { "name": "gridProColumnMenuSimpleInitItems", "kind": "Variable" }, + { "name": "gridProColumnMenuSimpleSlots", "kind": "Variable" }, + { "name": "gridProColumnMenuSlots", "kind": "Variable" }, { "name": "GridProIconSlotsComponent", "kind": "Interface" }, { "name": "GridProSlotsComponent", "kind": "Interface" }, { "name": "GridPushPinLeftIcon", "kind": "Variable" }, @@ -568,7 +574,6 @@ { "name": "GridWorkspacesIcon", "kind": "Variable" }, { "name": "heIL", "kind": "Variable" }, { "name": "huHU", "kind": "Variable" }, - { "name": "insertItemsInColumnMenu", "kind": "Variable" }, { "name": "isGroupingColumn", "kind": "Variable" }, { "name": "isLeaf", "kind": "Function" }, { "name": "itIT", "kind": "Variable" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index 09bcb12f9279..b9814ead7927 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -39,7 +39,6 @@ { "name": "getGridStringOperators", "kind": "Variable" }, { "name": "getGridStringQuickFilterFn", "kind": "Variable" }, { "name": "getGroupRowIdFromPath", "kind": "Variable" }, - { "name": "GetVisibleColumnMenuItemsArgs", "kind": "Interface" }, { "name": "GRID_ACTIONS_COL_DEF", "kind": "Variable" }, { "name": "GRID_ACTIONS_COLUMN_TYPE", "kind": "Variable" }, { "name": "GRID_BOOLEAN_COL_DEF", "kind": "Variable" }, @@ -139,7 +138,6 @@ { "name": "GridColumnIdentifier", "kind": "TypeAlias" }, { "name": "GridColumnLookup", "kind": "TypeAlias" }, { "name": "gridColumnLookupSelector", "kind": "Variable" }, - { "name": "GridColumnMenu", "kind": "Variable" }, { "name": "GridColumnMenuApi", "kind": "Interface" }, { "name": "GridColumnMenuColumnsItem", "kind": "Variable" }, { "name": "GridColumnMenuColumnsItemSimple", "kind": "Variable" }, @@ -147,24 +145,28 @@ { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, { "name": "GridColumnMenuDefault", "kind": "Variable" }, { "name": "GridColumnMenuDefaultProps", "kind": "Interface" }, + { "name": "GridColumnMenuDefaultRoot", "kind": "Variable" }, { "name": "GridColumnMenuFilterItem", "kind": "Variable" }, { "name": "GridColumnMenuFilterItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuHideItem", "kind": "Variable" }, { "name": "GridColumnMenuHideItemSimple", "kind": "Variable" }, + { "name": "gridColumnMenuInitItems", "kind": "Variable" }, { "name": "GridColumnMenuItemProps", "kind": "Interface" }, - { "name": "GridColumnMenuKey", "kind": "TypeAlias" }, - { "name": "GridColumnMenuKeysInternalOverrides", "kind": "Interface" }, - { "name": "GridColumnMenuKeysOverrides", "kind": "Interface" }, { "name": "GridColumnMenuPinningItem", "kind": "Variable" }, { "name": "GridColumnMenuPinningItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuProps", "kind": "Interface" }, { "name": "gridColumnMenuSelector", "kind": "Variable" }, { "name": "GridColumnMenuSimple", "kind": "Variable" }, { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, + { "name": "gridColumnMenuSimpleInitItems", "kind": "Variable" }, + { "name": "GridColumnMenuSimpleRoot", "kind": "Variable" }, + { "name": "gridColumnMenuSimpleSlots", "kind": "Variable" }, + { "name": "GridColumnMenuSlot", "kind": "Interface" }, + { "name": "gridColumnMenuSlots", "kind": "Variable" }, { "name": "GridColumnMenuSortItem", "kind": "Variable" }, { "name": "GridColumnMenuSortItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuState", "kind": "Interface" }, - { "name": "GridColumnMenuValue", "kind": "Interface" }, + { "name": "GridColumnMenuValue", "kind": "TypeAlias" }, { "name": "GridColumnNode", "kind": "TypeAlias" }, { "name": "GridColumnOrderChangeParams", "kind": "Interface" }, { "name": "GridColumnPinningApi", "kind": "Interface" }, @@ -373,6 +375,10 @@ { "name": "GridPrintExportMenuItem", "kind": "Function" }, { "name": "GridPrintExportMenuItemProps", "kind": "TypeAlias" }, { "name": "GridPrintExportOptions", "kind": "Interface" }, + { "name": "gridProColumnMenuInitItems", "kind": "Variable" }, + { "name": "gridProColumnMenuSimpleInitItems", "kind": "Variable" }, + { "name": "gridProColumnMenuSimpleSlots", "kind": "Variable" }, + { "name": "gridProColumnMenuSlots", "kind": "Variable" }, { "name": "GridProIconSlotsComponent", "kind": "Interface" }, { "name": "GridProSlotsComponent", "kind": "Interface" }, { "name": "GridPushPinLeftIcon", "kind": "Variable" }, @@ -521,7 +527,6 @@ { "name": "gridVisibleTopLevelRowCountSelector", "kind": "Variable" }, { "name": "heIL", "kind": "Variable" }, { "name": "huHU", "kind": "Variable" }, - { "name": "insertItemsInColumnMenu", "kind": "Variable" }, { "name": "isLeaf", "kind": "Function" }, { "name": "itIT", "kind": "Variable" }, { "name": "jaJP", "kind": "Variable" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index b63d319ea386..b62ca3b712ea 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -36,7 +36,6 @@ { "name": "getGridSingleSelectQuickFilterFn", "kind": "Variable" }, { "name": "getGridStringOperators", "kind": "Variable" }, { "name": "getGridStringQuickFilterFn", "kind": "Variable" }, - { "name": "GetVisibleColumnMenuItemsArgs", "kind": "Interface" }, { "name": "GRID_ACTIONS_COL_DEF", "kind": "Variable" }, { "name": "GRID_ACTIONS_COLUMN_TYPE", "kind": "Variable" }, { "name": "GRID_BOOLEAN_COL_DEF", "kind": "Variable" }, @@ -132,7 +131,6 @@ { "name": "GridColumnIdentifier", "kind": "TypeAlias" }, { "name": "GridColumnLookup", "kind": "TypeAlias" }, { "name": "gridColumnLookupSelector", "kind": "Variable" }, - { "name": "GridColumnMenu", "kind": "Variable" }, { "name": "GridColumnMenuApi", "kind": "Interface" }, { "name": "GridColumnMenuColumnsItem", "kind": "Variable" }, { "name": "GridColumnMenuColumnsItemSimple", "kind": "Variable" }, @@ -140,22 +138,26 @@ { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, { "name": "GridColumnMenuDefault", "kind": "Variable" }, { "name": "GridColumnMenuDefaultProps", "kind": "Interface" }, + { "name": "GridColumnMenuDefaultRoot", "kind": "Variable" }, { "name": "GridColumnMenuFilterItem", "kind": "Variable" }, { "name": "GridColumnMenuFilterItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuHideItem", "kind": "Variable" }, { "name": "GridColumnMenuHideItemSimple", "kind": "Variable" }, + { "name": "gridColumnMenuInitItems", "kind": "Variable" }, { "name": "GridColumnMenuItemProps", "kind": "Interface" }, - { "name": "GridColumnMenuKey", "kind": "TypeAlias" }, - { "name": "GridColumnMenuKeysInternalOverrides", "kind": "Interface" }, - { "name": "GridColumnMenuKeysOverrides", "kind": "Interface" }, { "name": "GridColumnMenuProps", "kind": "Interface" }, { "name": "gridColumnMenuSelector", "kind": "Variable" }, { "name": "GridColumnMenuSimple", "kind": "Variable" }, { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, + { "name": "gridColumnMenuSimpleInitItems", "kind": "Variable" }, + { "name": "GridColumnMenuSimpleRoot", "kind": "Variable" }, + { "name": "gridColumnMenuSimpleSlots", "kind": "Variable" }, + { "name": "GridColumnMenuSlot", "kind": "Interface" }, + { "name": "gridColumnMenuSlots", "kind": "Variable" }, { "name": "GridColumnMenuSortItem", "kind": "Variable" }, { "name": "GridColumnMenuSortItemSimple", "kind": "Variable" }, { "name": "GridColumnMenuState", "kind": "Interface" }, - { "name": "GridColumnMenuValue", "kind": "Interface" }, + { "name": "GridColumnMenuValue", "kind": "TypeAlias" }, { "name": "GridColumnNode", "kind": "TypeAlias" }, { "name": "GridColumnOrderChangeParams", "kind": "Interface" }, { "name": "gridColumnPositionsSelector", "kind": "Variable" }, From 886268fa1fbcf69f670db3aeed66aba928833529 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sun, 13 Nov 2022 17:04:31 +0500 Subject: [PATCH 029/104] Removes types in .js file --- .../data-grid/components/CustomColumnMenu.js | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/data/data-grid/components/CustomColumnMenu.js b/docs/data/data-grid/components/CustomColumnMenu.js index c3226ea957f4..9eb7f9e3c1a1 100644 --- a/docs/data/data-grid/components/CustomColumnMenu.js +++ b/docs/data/data-grid/components/CustomColumnMenu.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { styled, Theme } from '@mui/material/styles'; +import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import { GridColumnMenuSimple, @@ -14,19 +14,19 @@ import { } from '@mui/x-data-grid-pro'; import StarOutlineIcon from '@mui/icons-material/StarOutline'; -const StyledGridColumnMenuContainer = styled(GridColumnMenuSimpleContainer)<{ - ownerState -}>(({ theme, ownerState }: { theme: Theme; ownerState: OwnerState }) => ({ - background: theme.palette[ownerState.color].main, - color: theme.palette[ownerState.color].contrastText, -})); +const StyledGridColumnMenuContainer = styled(GridColumnMenuSimpleContainer)( + ({ theme, ownerState }) => ({ + background: theme.palette[ownerState.color].main, + color: theme.palette[ownerState.color].contrastText, + }), +); -const StyledGridColumnMenuSimple = styled(GridColumnMenuSimple)<{ - ownerState -}>(({ theme, ownerState }) => ({ - background: theme.palette[ownerState.color].main, - color: theme.palette[ownerState.color].contrastText, -})); +const StyledGridColumnMenuSimple = styled(GridColumnMenuSimple)( + ({ theme, ownerState }) => ({ + background: theme.palette[ownerState.color].main, + color: theme.palette[ownerState.color].contrastText, + }), +); export function CustomColumnMenuComponent(props) { const { hideMenu, currentColumn, color, ...other } = props; @@ -39,8 +39,8 @@ export function CustomColumnMenuComponent(props) { ownerState={{ color }} {...other} > - - + + ); } From de4f04c3476a64510d292569d35c275473810950 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sun, 13 Nov 2022 18:19:15 +0500 Subject: [PATCH 030/104] Runs docs:typescript --- .../column-menu/ColumnMenuGridPremium.tsx.preview | 1 + .../data-grid/column-menu/CustomColumnMenuGrid.js | 11 +++++++++++ .../column-menu/CustomColumnMenuGrid.tsx.preview | 6 ++++++ docs/data/data-grid/components/CustomColumnMenu.js | 11 ++++++++++- 4 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 docs/data/data-grid/column-menu/ColumnMenuGridPremium.tsx.preview create mode 100644 docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx.preview diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridPremium.tsx.preview b/docs/data/data-grid/column-menu/ColumnMenuGridPremium.tsx.preview new file mode 100644 index 000000000000..19b199652560 --- /dev/null +++ b/docs/data/data-grid/column-menu/ColumnMenuGridPremium.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js b/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js index f2b41c656679..3a7f63322153 100644 --- a/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import { DataGrid, GridColumnMenuFilterItem, @@ -18,11 +19,16 @@ function MenuCloseComponent(props) { ); } +MenuCloseComponent.propTypes = { + onClick: PropTypes.func, +}; + function CustomColumnMenu(props) { const itemProps = { column: props.currentColumn, onClick: props.hideMenu, }; + return ( @@ -37,6 +43,11 @@ function CustomColumnMenu(props) { ); } +CustomColumnMenu.propTypes = { + currentColumn: PropTypes.object.isRequired, + hideMenu: PropTypes.func.isRequired, +}; + export default function CustomColumnMenuGrid() { const { data } = useDemoData({ dataSet: 'Commodity', diff --git a/docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx.preview b/docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx.preview new file mode 100644 index 000000000000..7583bcf20a33 --- /dev/null +++ b/docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx.preview @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/components/CustomColumnMenu.js b/docs/data/data-grid/components/CustomColumnMenu.js index 9eb7f9e3c1a1..a4b0fffe45c3 100644 --- a/docs/data/data-grid/components/CustomColumnMenu.js +++ b/docs/data/data-grid/components/CustomColumnMenu.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; @@ -28,7 +29,7 @@ const StyledGridColumnMenuSimple = styled(GridColumnMenuSimple)( }), ); -export function CustomColumnMenuComponent(props) { +function CustomColumnMenuComponent(props) { const { hideMenu, currentColumn, color, ...other } = props; if (currentColumn.field === 'name') { @@ -79,6 +80,14 @@ export function CustomColumnMenuComponent(props) { ); } +CustomColumnMenuComponent.propTypes = { + color: PropTypes.oneOf(['primary', 'secondary']).isRequired, + currentColumn: PropTypes.object.isRequired, + hideMenu: PropTypes.func.isRequired, +}; + +export { CustomColumnMenuComponent }; + export default function CustomColumnMenu() { const [color, setColor] = React.useState('primary'); const apiRef = useGridApiRef(); From 559c7def645f539ae018aeac0a623b36f905c9fc Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sun, 13 Nov 2022 22:52:43 +0500 Subject: [PATCH 031/104] Refactors multiple things --- .../column-menu/ColumnMenuGridPro.tsx.preview | 1 - .../data-grid/components/CustomColumnMenu.js | 68 +++++++++---------- .../data-grid/components/CustomColumnMenu.tsx | 18 ++--- .../GridColumnMenuAggregationItem.tsx | 16 ++--- .../components/GridColumnMenuRowGroupItem.tsx | 4 +- .../GridColumnMenuRowGroupItemSimple.tsx | 4 +- .../GridColumnMenuRowUngroupItem.tsx | 10 +-- .../GridColumnMenuRowUngroupItemSimple.tsx | 10 +-- .../GridPremiumColumnMenuDefault.tsx | 2 +- .../GridPremiumColumnMenuSimple.tsx | 2 +- .../useGridAggregationPreProcessors.tsx | 4 +- .../rowGrouping/useGridRowGrouping.tsx | 3 +- .../src/typeOverloads/modules.ts | 6 -- .../components/GridColumnMenuPinningItem.tsx | 14 ++-- .../GridColumnMenuPinningItemSimple.tsx | 14 ++-- .../columnPinning/useGridColumnPinning.tsx | 3 +- .../src/typeOverloads/modules.ts | 4 -- .../columnMenu/GridColumnMenuItemProps.ts | 4 +- .../default/GridColumnMenuColumnsItem.tsx | 2 +- .../default/GridColumnMenuDefault.tsx | 2 +- .../default/GridColumnMenuFilterItem.tsx | 10 +-- .../default/GridColumnMenuHideItem.tsx | 10 ++- .../GridColumnMenuColumnsItemSimple.tsx | 2 +- .../simple/GridColumnMenuFilterItemSimple.tsx | 8 +-- .../simple/GridColumnMenuHideItemSimple.tsx | 12 ++-- .../simple/GridColumnMenuSortItemSimple.tsx | 2 +- 26 files changed, 94 insertions(+), 141 deletions(-) delete mode 100644 docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx.preview diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx.preview b/docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx.preview deleted file mode 100644 index 19b199652560..000000000000 --- a/docs/data/data-grid/column-menu/ColumnMenuGridPro.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/data-grid/components/CustomColumnMenu.js b/docs/data/data-grid/components/CustomColumnMenu.js index a4b0fffe45c3..fd099e90db1a 100644 --- a/docs/data/data-grid/components/CustomColumnMenu.js +++ b/docs/data/data-grid/components/CustomColumnMenu.js @@ -1,36 +1,36 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Box from '@mui/material/Box'; -import { styled } from '@mui/material/styles'; -import Button from '@mui/material/Button'; +import * as React from 'react' +import PropTypes from 'prop-types' +import Box from '@mui/material/Box' +import { styled } from '@mui/material/styles' +import Button from '@mui/material/Button' import { - GridColumnMenuSimple, - GridColumnMenuSimpleContainer, - GridColumnMenuFilterItemSimple, - GridColumnMenuSortItemSimple, + GridColumnMenuDefault, + GridColumnMenuContainer, + GridColumnMenuFilterItem, + GridColumnMenuSortItem, useGridApiRef, gridProColumnMenuSlots, gridProColumnMenuInitItems, DataGridPro, -} from '@mui/x-data-grid-pro'; -import StarOutlineIcon from '@mui/icons-material/StarOutline'; +} from '@mui/x-data-grid-pro' +import StarOutlineIcon from '@mui/icons-material/StarOutline' -const StyledGridColumnMenuContainer = styled(GridColumnMenuSimpleContainer)( +const StyledGridColumnMenuContainer = styled(GridColumnMenuContainer)( ({ theme, ownerState }) => ({ background: theme.palette[ownerState.color].main, color: theme.palette[ownerState.color].contrastText, }), -); +) -const StyledGridColumnMenuSimple = styled(GridColumnMenuSimple)( +const StyledGridColumnMenu = styled(GridColumnMenuDefault)( ({ theme, ownerState }) => ({ background: theme.palette[ownerState.color].main, color: theme.palette[ownerState.color].contrastText, }), -); +) -function CustomColumnMenuComponent(props) { - const { hideMenu, currentColumn, color, ...other } = props; +function CustomColumnMenuComponent (props) { + const { hideMenu, currentColumn, color, ...other } = props if (currentColumn.field === 'name') { return ( @@ -40,10 +40,10 @@ function CustomColumnMenuComponent(props) { ownerState={{ color }} {...other} > - - + + - ); + ) } if (currentColumn.field === 'stars') { return ( @@ -66,10 +66,10 @@ function CustomColumnMenuComponent(props) { - ); + ) } return ( - - ); + ) } CustomColumnMenuComponent.propTypes = { color: PropTypes.oneOf(['primary', 'secondary']).isRequired, currentColumn: PropTypes.object.isRequired, hideMenu: PropTypes.func.isRequired, -}; +} -export { CustomColumnMenuComponent }; +export { CustomColumnMenuComponent } -export default function CustomColumnMenu() { - const [color, setColor] = React.useState('primary'); - const apiRef = useGridApiRef(); +export default function CustomColumnMenu () { + const [color, setColor] = React.useState('primary') + const apiRef = useGridApiRef() return ( + ); +} + +function CustomColumnMenu(props) { + return ( + + ); +} + +export default function ReuseColumnMenuGrid() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 20, + maxColumns: 5, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx new file mode 100644 index 000000000000..892b68873453 --- /dev/null +++ b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx @@ -0,0 +1,55 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import IconFilter from '@mui/icons-material/FilterAlt'; +import { + DataGrid, + GridColumnMenuDefault, + GridColumnMenuProps, + gridColumnMenuSlots, + GridColumnMenuItemProps, +} from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +function CustomFilterItem(props: GridColumnMenuItemProps) { + const { column, onClick } = props; + return ( + + ); +} + +function CustomColumnMenu(props: GridColumnMenuProps) { + return ( + + ); +} + +export default function ReuseColumnMenuGrid() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 20, + maxColumns: 5, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx.preview b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx.preview new file mode 100644 index 000000000000..9112f9e6ce3e --- /dev/null +++ b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index d79cbab6b43d..d0a40e786b15 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -22,9 +22,22 @@ By default, each column header has the column menu enabled. To disable the colum ## Customise column menu -You can customise column menu by passing your own component for slot `ColumnMenu`, you can blend existing menu items with your custom components for a custom look and feel. +You can customise column menu either by passing `slots` in default component or by passing your own component for slot `ColumnMenu`, you can blend existing menu items with your custom components for a custom look and feel. -It's also possible to conditionally render some items based on the `currentColumn` (the column whose menu is currently open) which you recieve in the props of column menu. +### Hide/reorder some column menu items + +Grid exports a variable called `gridColumnMenuSlots` for default and `gridColumnMenuSimpleSlots` for simple menu which contains all the available slots for the active grid package. You can use this with default column menu components to: + +- Hide items +- Reorder items + +{{"demo": "ReuseColumnMenuGrid.js", "bg": "inline"}} + +### Custom component + +You can also opt not to use the column menu component exposed by us and pass a totally new component with your custom logic. You can add more items to the menu and obviously can blend in some existing items if you want. + +To conditionally render some items, you can use ColDef properties on the `currentColumn` (the column whose menu is currently open) which you recieve in the props. {{"demo": "CustomColumnMenuGrid.js", "bg": "inline"}} diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts index 233f1032fc0c..1616e72a2588 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts @@ -14,5 +14,6 @@ export type GridColumnMenuValue = Array; export interface GridColumnMenuRootProps { initialItems: GridColumnMenuValue; + // TODO: type this `key` for each package slots: { [key: string]: GridColumnMenuSlot }; } From 32ce8678ffedb36d95f837dd55c3682908eb1c4b Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 22 Nov 2022 14:49:27 +0500 Subject: [PATCH 042/104] Update docs/data/data-grid/column-menu/column-menu.md Co-authored-by: Andrew Cherniavskii Signed-off-by: Bilal Shafi --- docs/data/data-grid/column-menu/column-menu.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index d0a40e786b15..194573d51df3 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -20,9 +20,9 @@ By default, each column header has the column menu enabled. To disable the colum {{"demo": "DisabledColumnMenuGrid.js", "bg": "inline"}} -## Customise column menu +## Customize column menu -You can customise column menu either by passing `slots` in default component or by passing your own component for slot `ColumnMenu`, you can blend existing menu items with your custom components for a custom look and feel. +You can customize the column menu either by passing `slots` to the column menu component or by overriding the `ColumnMenu` slot of the data grid component. ### Hide/reorder some column menu items From 3224311fbb3b220e42810ec86f1702a1b7071e10 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 23 Nov 2022 12:11:58 +0500 Subject: [PATCH 043/104] Adds some docs and some refactoring --- .../column-menu/CustomColumnMenuGrid.js | 1 - .../column-menu/ReuseColumnMenuGrid.js | 44 +++++++++---- .../column-menu/ReuseColumnMenuGrid.tsx | 44 +++++++++---- .../data/data-grid/column-menu/column-menu.md | 62 ++++++++++++++++--- .../GridColumnMenuAggregationItem.tsx | 2 +- .../GridPremiumColumnMenuDefault.tsx | 4 +- .../GridPremiumColumnMenuSimple.tsx | 4 +- .../components/GridProColumnMenuDefault.tsx | 2 +- .../components/GridProColumnMenuSimple.tsx | 2 +- .../default/GridColumnMenuDefault.tsx | 10 +-- .../simple/GridColumnMenuSimple.tsx | 10 +-- .../columnMenu/columnMenuInterfaces.ts | 8 ++- .../useGridColumnMenuPreProcessing.ts | 2 +- 13 files changed, 142 insertions(+), 53 deletions(-) diff --git a/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js b/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js index 8e4cac4ba1a0..99d260cc9bc4 100644 --- a/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js @@ -28,7 +28,6 @@ function CustomColumnMenu(props) { column: props.currentColumn, onClick: props.hideMenu, }; - return ( diff --git a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js index 82d5c550e44e..d580fe381d30 100644 --- a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js @@ -1,6 +1,7 @@ import * as React from 'react'; import Button from '@mui/material/Button'; import IconFilter from '@mui/icons-material/FilterAlt'; +import IconClose from '@mui/icons-material/Close'; import { DataGrid, GridColumnMenuDefault, @@ -17,23 +18,40 @@ function CustomFilterItem(props) { ); } +function CustomMenuItem(props) { + const { onClick } = props; + return ( + + ); +} + function CustomColumnMenu(props) { + const slots = { + ...gridColumnMenuSlots, + ColumnMenuFilterItem: { + // override Filter slot + component: CustomFilterItem, + // put in start + displayOrder: 1, + }, + ColumnMenuSortItem: { + ...gridColumnMenuSlots.ColumnMenuSortItem, + // modify `displayOrder` to put after `Filter` + displayOrder: 2, + }, + CustomComponent: { + component: CustomMenuItem, + // place in last, after `ColumnMenuColumnsItem` + displayOrder: 31, + }, + }; return ( ); } diff --git a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx index 892b68873453..57494b331cef 100644 --- a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx +++ b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import Button from '@mui/material/Button'; import IconFilter from '@mui/icons-material/FilterAlt'; +import IconClose from '@mui/icons-material/Close'; import { DataGrid, GridColumnMenuDefault, @@ -19,23 +20,40 @@ function CustomFilterItem(props: GridColumnMenuItemProps) { ); } +function CustomMenuItem(props: GridColumnMenuItemProps) { + const { onClick } = props; + return ( + + ); +} + function CustomColumnMenu(props: GridColumnMenuProps) { + const slots = { + ...gridColumnMenuSlots, + ColumnMenuFilterItem: { + // override Filter slot + component: CustomFilterItem, + // put in start + displayOrder: 1, + }, + ColumnMenuSortItem: { + ...gridColumnMenuSlots.ColumnMenuSortItem, + // modify `displayOrder` to put after `Filter` + displayOrder: 2, + }, + CustomComponent: { + component: CustomMenuItem, + // place in last, after `ColumnMenuColumnsItem` + displayOrder: 31, + }, + }; return ( ); } diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index 194573d51df3..3469bd889339 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -22,25 +22,73 @@ By default, each column header has the column menu enabled. To disable the colum ## Customize column menu -You can customize the column menu either by passing `slots` to the column menu component or by overriding the `ColumnMenu` slot of the data grid component. +You can customize the column menu either by passing `slots` and `initialItems` to the column menu component or by using custom component using the `ColumnMenu` slot of the data grid component. -### Hide/reorder some column menu items +### Hide, reorder and add new items -Grid exports a variable called `gridColumnMenuSlots` for default and `gridColumnMenuSimpleSlots` for simple menu which contains all the available slots for the active grid package. You can use this with default column menu components to: +Grid exports a variable called `gridColumnMenuSlots` for default and `gridColumnMenuSimpleSlots` for simple menu which contains all the available slots for the active grid package. You can use this to: -- Hide items +- Hide default items +- Add new items - Reorder items +Here's how `gridColumnMenuSlots` looks like: + +```tsx +interface GridColumnMenuSlot { + component: React.JSXElementConstructor; + displayOrder: number; +} + +type GridColumnMenuSlots = { [key: string]: GridColumnMenuSlot }; + +// default slots for column menu +const gridColumnMenuSlots: GridColumnMenuSlots = { + ColumnMenuSortItem: { component: GridColumnMenuSortItem, displayOrder: 0 }, + ColumnMenuPinningItem: { component: GridColumnMenuPinningItem, displayOrder: 5 }, // pro and premium only slot + ColumnMenuFilterItem: { component: GridColumnMenuFilterItem, displayOrder: 10 }, + ColumnMenuGroupingItem: { component: GroupingItem, displayOrder: 13 }, // premium only slot + ColumnMenuAggregationItem: { + component: GridColumnMenuAggregationItem, + displayOrder: 17, + }, // premium only slot + ColumnMenuHideItem: { component: GridColumnMenuHideItem, displayOrder: 20 }, + ColumnMenuColumnsItem: { component: GridColumnMenuColumnsItem, displayOrder: 30 }, +}; +``` + +**displayOrder**: Every item has a `displayOrder` based which it will be placed before or after other items in the menu. Default order is shown in above code snippet, there's a gap between default items to allow the users to add more items in between. + +**slots**: Prop accepted by column menu components `` or ``, the default value used is `gridColumnMenuSlots` but you can override it. + +**initialItems**: Rendering of default items take place from respective hooks, based on certain conditions or feature flags, pass `initialItems` to column menu components `` or `` to add custom items. + +```diff + +``` + +In the following demo you can see a new item being added and default items being overriden or reordered. + {{"demo": "ReuseColumnMenuGrid.js", "bg": "inline"}} -### Custom component +:::info +**Tip:** To hide/remove a default item, you can simply filter it from `slots` before passing to column menu component +::: -You can also opt not to use the column menu component exposed by us and pass a totally new component with your custom logic. You can add more items to the menu and obviously can blend in some existing items if you want. +### Custom component -To conditionally render some items, you can use ColDef properties on the `currentColumn` (the column whose menu is currently open) which you recieve in the props. +You can also opt not to use the column menu component exposed by us and pass a totally new component with your custom logic using `ColumnMenu` slot. {{"demo": "CustomColumnMenuGrid.js", "bg": "inline"}} +:::info +To conditionally render some items, you can use ColDef properties on the `currentColumn` recieved in the props. +::: + Here's the list of default available items for each package and column menu design: | **Package** | **Design** | **Available Items** | diff --git a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx index 75886122b7b6..70a74d632ecf 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx @@ -72,7 +72,7 @@ const GridColumnMenuAggregationItemRoot: React.FC = (pr const label = apiRef.current.getLocaleText('aggregationMenuItemHeader'); return ( - + {label} ); -}; +} GridColumnMenuAggregationItemRoot.propTypes = { // ----------------------------- Warning -------------------------------- @@ -110,11 +110,13 @@ GridColumnMenuAggregationItemRoot.propTypes = { onClick: PropTypes.func.isRequired, } as any; -const GridColumnMenuAggregationItem = (props: GridColumnMenuItemProps) => ( - - - -); +function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps) { + return ( + + + + ); +} GridColumnMenuAggregationItem.propTypes = { // ----------------------------- Warning -------------------------------- @@ -127,11 +129,13 @@ GridColumnMenuAggregationItem.propTypes = { export { GridColumnMenuAggregationItem }; -const GridColumnMenuAggregationItemSimple = (props: GridColumnMenuItemProps) => ( - - - -); +function GridColumnMenuAggregationItemSimple(props: GridColumnMenuItemProps) { + return ( + + + + ); +} GridColumnMenuAggregationItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx index cd2642ea0c81..9bb16179f334 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItem.tsx @@ -28,7 +28,7 @@ const StyledButton = styled(Button)(({ theme }) => ({ textTransform: 'none', })); -const GridColumnMenuRowGroupItem: React.FC = (props) => { +function GridColumnMenuRowGroupItem(props: GridColumnMenuItemProps) { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -66,7 +66,7 @@ const GridColumnMenuRowGroupItem: React.FC = (props) => } return renderUnGroupingMenuItem(getRowGroupingCriteriaFromGroupingField(column.field)!); -}; +} GridColumnMenuRowGroupItem.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItemSimple.tsx b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItemSimple.tsx index db1817d3fa30..333ad63f63d4 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItemSimple.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowGroupItemSimple.tsx @@ -14,9 +14,7 @@ import { isGroupingColumn, } from '../hooks/features/rowGrouping/gridRowGroupingUtils'; -const GridColumnMenuRowGroupItemSimple: React.FC = ( - props: GridColumnMenuItemProps, -) => { +function GridColumnMenuRowGroupItemSimple(props: GridColumnMenuItemProps) { const { column, onClick } = props; const apiRef = useGridApiContext(); const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector); @@ -46,7 +44,7 @@ const GridColumnMenuRowGroupItemSimple: React.FC = ( } return renderUnGroupingMenuItem(getRowGroupingCriteriaFromGroupingField(column.field)!); -}; +} GridColumnMenuRowGroupItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx index bb2bff41569c..0379c6631218 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx @@ -23,7 +23,7 @@ const StyledButton = styled(Button)(({ theme }) => ({ textTransform: 'none', })); -const GridColumnMenuRowUngroupItem: React.FC = (props) => { +function GridColumnMenuRowUngroupItem(props: GridColumnMenuItemProps) { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -73,7 +73,7 @@ const GridColumnMenuRowUngroupItem: React.FC = (props) ); -}; +} GridColumnMenuRowUngroupItem.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItemSimple.tsx b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItemSimple.tsx index 8927594922cc..1e8ddb31dd4c 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItemSimple.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItemSimple.tsx @@ -9,7 +9,7 @@ import { import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector'; -const GridColumnMenuRowUngroupItemSimple: React.FC = (props) => { +function GridColumnMenuRowUngroupItemSimple(props: GridColumnMenuItemProps) { const { column, onClick } = props; const apiRef = useGridApiContext(); const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector); @@ -42,7 +42,7 @@ const GridColumnMenuRowUngroupItemSimple: React.FC = (p return ( {apiRef.current.getLocaleText('groupColumn')(name)} ); -}; +} GridColumnMenuRowUngroupItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx index cbccd18e3149..539d9a6d0ad7 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx @@ -12,7 +12,7 @@ import { isGroupingColumn } from '../hooks/features/rowGrouping'; import { GridColumnMenuRowGroupItem } from './GridColumnMenuRowGroupItem'; import { GridColumnMenuRowUngroupItem } from './GridColumnMenuRowUngroupItem'; -const GroupingItem = (props: GridColumnMenuItemProps) => { +function GroupingItem(props: GridColumnMenuItemProps) { const { column } = props; if (isGroupingColumn(column.field)) { return ; @@ -21,7 +21,7 @@ const GroupingItem = (props: GridColumnMenuItemProps) => { return ; } return null; -}; +} export const COLUMN_MENU_DEFAULT_SLOTS_PREMIUM = { ...COLUMN_MENU_DEFAULT_SLOTS, diff --git a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx index 061271edba5e..bf0a09601213 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx @@ -13,7 +13,7 @@ import { isGroupingColumn } from '../hooks/features/rowGrouping'; import { GridColumnMenuRowGroupItemSimple } from './GridColumnMenuRowGroupItemSimple'; import { GridColumnMenuRowUngroupItemSimple } from './GridColumnMenuRowUngroupItemSimple'; -const GroupingItem = (props: GridColumnMenuItemProps) => { +function GroupingItem(props: GridColumnMenuItemProps) { const { column } = props; if (isGroupingColumn(column.field)) { return ( @@ -32,16 +32,16 @@ const GroupingItem = (props: GridColumnMenuItemProps) => { ); } return null; -}; +} -const AggregationItem = (props: GridColumnMenuItemProps) => { +function AggregationItem(props: GridColumnMenuItemProps) { return ( ); -}; +} export const COLUMN_MENU_SIMPLE_SLOTS_PREMIUM = { ...COLUMN_MENU_SIMPLE_SLOTS, diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx b/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx index 8573a621b280..130a91e3c57d 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx @@ -19,7 +19,7 @@ const StyledButton = styled(Button)(({ theme }) => ({ textTransform: 'none', })); -const GridColumnMenuPinningItem: React.FC = (props) => { +function GridColumnMenuPinningItem(props: GridColumnMenuItemProps) { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -67,7 +67,7 @@ const GridColumnMenuPinningItem: React.FC = (props) => ); -}; +} GridColumnMenuPinningItem.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItemSimple.tsx b/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItemSimple.tsx index 84e06f9bc14f..02e6809aa39b 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItemSimple.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItemSimple.tsx @@ -5,7 +5,7 @@ import { GridColumnMenuItemProps } from '@mui/x-data-grid'; import { GridPinnedPosition } from '../hooks/features/columnPinning'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; -const GridColumnMenuPinningItemSimple: React.FC = (props) => { +function GridColumnMenuPinningItemSimple(props: GridColumnMenuItemProps) { const { column, onClick } = props; const apiRef = useGridApiContext(); @@ -48,7 +48,7 @@ const GridColumnMenuPinningItemSimple: React.FC = (prop ); -}; +} GridColumnMenuPinningItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx index da42e9fdf714..0f2d145ba5ae 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx @@ -10,12 +10,14 @@ import { } from '@mui/x-data-grid'; import { GridColumnMenuPinningItemSimple } from './GridColumnMenuPinningItemSimple'; -const PinningWithDivider = (props: GridColumnMenuItemProps) => ( - - - - -); +function PinningWithDivider(props: GridColumnMenuItemProps) { + return ( + + + + + ); +} export const COLUMN_MENU_SIMPLE_SLOTS_PRO = { ...COLUMN_MENU_SIMPLE_SLOTS, diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuColumnsItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuColumnsItem.tsx index bcb720478062..7e682bbf954e 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuColumnsItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuColumnsItem.tsx @@ -13,7 +13,7 @@ const StyledStack = styled(Stack)(({ theme }) => ({ flexDirection: 'row', })); -const GridColumnMenuColumnsItem = (props: GridColumnMenuItemProps) => { +function GridColumnMenuColumnsItem(props: GridColumnMenuItemProps) { const { onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -40,7 +40,7 @@ const GridColumnMenuColumnsItem = (props: GridColumnMenuItemProps) => { ); -}; +} GridColumnMenuColumnsItem.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx index f2a256b214f4..ac315b9a9258 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx @@ -58,17 +58,29 @@ GridColumnMenuDefault.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- currentColumn: PropTypes.object.isRequired, + /** + * Initial `slots` - it is internal, to be overrriden by Pro or Premium packages + * @ignore - do not document. + */ + defaultSlots: PropTypes.object, + /** + * Initial `slotsProps` - it is internal, to be overrriden by Pro or Premium packages + * @ignore - do not document. + */ + defaultSlotsProps: PropTypes.object, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, - initialItems: PropTypes.arrayOf( - PropTypes.shape({ - component: PropTypes.elementType.isRequired, - displayOrder: PropTypes.number.isRequired, - }), - ), labelledby: PropTypes.string, open: PropTypes.bool.isRequired, + /** + * `slots` could be used to override default column menu slots + */ slots: PropTypes.object, + /** + * Could be used to override props specific to a column menu slot + * e.g. `displayOrder` + */ + slotsProps: PropTypes.object, } as any; export { GridColumnMenuDefault }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuFilterItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuFilterItem.tsx index 35cb10d171c3..c64426f2cfb0 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuFilterItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuFilterItem.tsx @@ -25,7 +25,7 @@ const StyledButton = styled(Button)(({ theme }) => ({ textTransform: 'none', })); -const GridColumnMenuFilterItem = (props: GridColumnMenuItemProps) => { +function GridColumnMenuFilterItem(props: GridColumnMenuItemProps) { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -74,7 +74,7 @@ const GridColumnMenuFilterItem = (props: GridColumnMenuItemProps) => { ) : null} ); -}; +} GridColumnMenuFilterItem.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuHideItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuHideItem.tsx index 7792e50b6cc8..db79b47237ec 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuHideItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuHideItem.tsx @@ -20,7 +20,7 @@ const StyledButton = styled(Button)(({ theme }) => ({ textTransform: 'none', })); -const GridColumnMenuHideItem = (props: GridColumnMenuItemProps) => { +function GridColumnMenuHideItem(props: GridColumnMenuItemProps) { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -74,7 +74,7 @@ const GridColumnMenuHideItem = (props: GridColumnMenuItemProps) => { ); -}; +} GridColumnMenuHideItem.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuSortItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuSortItem.tsx index e0595e4ff50f..6fa0b3e1c247 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuSortItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuSortItem.tsx @@ -20,7 +20,7 @@ const StyledButton = styled(Button)(({ theme }) => ({ fontWeight: theme.typography.fontWeightRegular, })); -const GridColumnMenuSortItem = (props: GridColumnMenuItemProps) => { +function GridColumnMenuSortItem(props: GridColumnMenuItemProps) { const { column } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -74,7 +74,7 @@ const GridColumnMenuSortItem = (props: GridColumnMenuItemProps) => { ); -}; +} GridColumnMenuSortItem.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuColumnsItemSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuColumnsItemSimple.tsx index 377d4f1e0ba0..dac74a65cdec 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuColumnsItemSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuColumnsItemSimple.tsx @@ -6,7 +6,7 @@ import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; -const GridColumnMenuColumnsItemSimple = (props: GridColumnMenuItemProps) => { +function GridColumnMenuColumnsItemSimple(props: GridColumnMenuItemProps) { const { onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -28,7 +28,7 @@ const GridColumnMenuColumnsItemSimple = (props: GridColumnMenuItemProps) => { {apiRef.current.getLocaleText('columnMenuShowColumns')} ); -}; +} GridColumnMenuColumnsItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuFilterItemSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuFilterItemSimple.tsx index 182fea3752e2..1b0b3f32ab79 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuFilterItemSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuFilterItemSimple.tsx @@ -5,7 +5,7 @@ import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; -const GridColumnMenuFilterItemSimple = (props: GridColumnMenuItemProps) => { +function GridColumnMenuFilterItemSimple(props: GridColumnMenuItemProps) { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -25,7 +25,7 @@ const GridColumnMenuFilterItemSimple = (props: GridColumnMenuItemProps) => { return ( {apiRef.current.getLocaleText('columnMenuFilter')} ); -}; +} GridColumnMenuFilterItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuHideItemSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuHideItemSimple.tsx index efd3bdc5b012..fec2d8704d45 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuHideItemSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuHideItemSimple.tsx @@ -6,7 +6,7 @@ import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps'; import { gridVisibleColumnDefinitionsSelector } from '../../../../hooks/features/columns'; -const GridColumnMenuHideItemSimple = (props: GridColumnMenuItemProps) => { +function GridColumnMenuHideItemSimple(props: GridColumnMenuItemProps) { const { column, onClick } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -53,7 +53,7 @@ const GridColumnMenuHideItemSimple = (props: GridColumnMenuItemProps) => { {apiRef.current.getLocaleText('columnMenuHideColumn')} ); -}; +} GridColumnMenuHideItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index 773d5b516c50..961633cfc5d2 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -55,17 +55,29 @@ GridColumnMenuSimple.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- currentColumn: PropTypes.object.isRequired, + /** + * Initial `slots` - it is internal, to be overrriden by Pro or Premium packages + * @ignore - do not document. + */ + defaultSlots: PropTypes.object, + /** + * Initial `slotsProps` - it is internal, to be overrriden by Pro or Premium packages + * @ignore - do not document. + */ + defaultSlotsProps: PropTypes.object, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, - initialItems: PropTypes.arrayOf( - PropTypes.shape({ - component: PropTypes.elementType.isRequired, - displayOrder: PropTypes.number.isRequired, - }), - ), labelledby: PropTypes.string, open: PropTypes.bool.isRequired, + /** + * `slots` could be used to override default column menu slots + */ slots: PropTypes.object, + /** + * Could be used to override props specific to a column menu slot + * e.g. `displayOrder` + */ + slotsProps: PropTypes.object, } as any; export { GridColumnMenuSimple }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSortItemSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSortItemSimple.tsx index 5bbd69c5c461..afd8177c778f 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSortItemSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSortItemSimple.tsx @@ -7,7 +7,7 @@ import { GridSortDirection } from '../../../../models/gridSortModel'; import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext'; import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps'; -const GridColumnMenuSortItemSimple = (props: GridColumnMenuItemProps) => { +function GridColumnMenuSortItemSimple(props: GridColumnMenuItemProps) { const { column, onClick } = props; const apiRef = useGridApiContext(); const sortModel = useGridSelector(apiRef, gridSortModelSelector); @@ -49,7 +49,7 @@ const GridColumnMenuSortItemSimple = (props: GridColumnMenuItemProps) => { ); -}; +} GridColumnMenuSortItemSimple.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 4f4b7e07618c..c3483640fb38 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -166,33 +166,33 @@ { "name": "GridColumnIdentifier", "kind": "TypeAlias" }, { "name": "GridColumnLookup", "kind": "TypeAlias" }, { "name": "gridColumnLookupSelector", "kind": "Variable" }, - { "name": "GridColumnMenuAggregationItem", "kind": "Variable" }, - { "name": "GridColumnMenuAggregationItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuAggregationItem", "kind": "Function" }, + { "name": "GridColumnMenuAggregationItemSimple", "kind": "Function" }, { "name": "GridColumnMenuApi", "kind": "Interface" }, - { "name": "GridColumnMenuColumnsItem", "kind": "Variable" }, - { "name": "GridColumnMenuColumnsItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuColumnsItem", "kind": "Function" }, + { "name": "GridColumnMenuColumnsItemSimple", "kind": "Function" }, { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, { "name": "GridColumnMenuDefault", "kind": "Variable" }, { "name": "GridColumnMenuDefaultContainer", "kind": "Variable" }, - { "name": "GridColumnMenuFilterItem", "kind": "Variable" }, - { "name": "GridColumnMenuFilterItemSimple", "kind": "Variable" }, - { "name": "GridColumnMenuHideItem", "kind": "Variable" }, - { "name": "GridColumnMenuHideItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuFilterItem", "kind": "Function" }, + { "name": "GridColumnMenuFilterItemSimple", "kind": "Function" }, + { "name": "GridColumnMenuHideItem", "kind": "Function" }, + { "name": "GridColumnMenuHideItemSimple", "kind": "Function" }, { "name": "GridColumnMenuItemProps", "kind": "Interface" }, - { "name": "GridColumnMenuPinningItem", "kind": "Variable" }, - { "name": "GridColumnMenuPinningItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuPinningItem", "kind": "Function" }, + { "name": "GridColumnMenuPinningItemSimple", "kind": "Function" }, { "name": "GridColumnMenuProps", "kind": "Interface" }, { "name": "GridColumnMenuRootProps", "kind": "Interface" }, - { "name": "GridColumnMenuRowGroupItem", "kind": "Variable" }, - { "name": "GridColumnMenuRowGroupItemSimple", "kind": "Variable" }, - { "name": "GridColumnMenuRowUngroupItem", "kind": "Variable" }, - { "name": "GridColumnMenuRowUngroupItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuRowGroupItem", "kind": "Function" }, + { "name": "GridColumnMenuRowGroupItemSimple", "kind": "Function" }, + { "name": "GridColumnMenuRowUngroupItem", "kind": "Function" }, + { "name": "GridColumnMenuRowUngroupItemSimple", "kind": "Function" }, { "name": "gridColumnMenuSelector", "kind": "Variable" }, { "name": "GridColumnMenuSimple", "kind": "Variable" }, { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, { "name": "GridColumnMenuSlotProps", "kind": "Interface" }, - { "name": "GridColumnMenuSortItem", "kind": "Variable" }, - { "name": "GridColumnMenuSortItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuSortItem", "kind": "Function" }, + { "name": "GridColumnMenuSortItemSimple", "kind": "Function" }, { "name": "GridColumnMenuState", "kind": "Interface" }, { "name": "GridColumnMenuValue", "kind": "TypeAlias" }, { "name": "GridColumnNode", "kind": "TypeAlias" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index 9418d901d58a..02fcb2ac13f7 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -144,26 +144,26 @@ { "name": "GridColumnLookup", "kind": "TypeAlias" }, { "name": "gridColumnLookupSelector", "kind": "Variable" }, { "name": "GridColumnMenuApi", "kind": "Interface" }, - { "name": "GridColumnMenuColumnsItem", "kind": "Variable" }, - { "name": "GridColumnMenuColumnsItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuColumnsItem", "kind": "Function" }, + { "name": "GridColumnMenuColumnsItemSimple", "kind": "Function" }, { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, { "name": "GridColumnMenuDefault", "kind": "Variable" }, { "name": "GridColumnMenuDefaultContainer", "kind": "Variable" }, - { "name": "GridColumnMenuFilterItem", "kind": "Variable" }, - { "name": "GridColumnMenuFilterItemSimple", "kind": "Variable" }, - { "name": "GridColumnMenuHideItem", "kind": "Variable" }, - { "name": "GridColumnMenuHideItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuFilterItem", "kind": "Function" }, + { "name": "GridColumnMenuFilterItemSimple", "kind": "Function" }, + { "name": "GridColumnMenuHideItem", "kind": "Function" }, + { "name": "GridColumnMenuHideItemSimple", "kind": "Function" }, { "name": "GridColumnMenuItemProps", "kind": "Interface" }, - { "name": "GridColumnMenuPinningItem", "kind": "Variable" }, - { "name": "GridColumnMenuPinningItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuPinningItem", "kind": "Function" }, + { "name": "GridColumnMenuPinningItemSimple", "kind": "Function" }, { "name": "GridColumnMenuProps", "kind": "Interface" }, { "name": "GridColumnMenuRootProps", "kind": "Interface" }, { "name": "gridColumnMenuSelector", "kind": "Variable" }, { "name": "GridColumnMenuSimple", "kind": "Variable" }, { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, { "name": "GridColumnMenuSlotProps", "kind": "Interface" }, - { "name": "GridColumnMenuSortItem", "kind": "Variable" }, - { "name": "GridColumnMenuSortItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuSortItem", "kind": "Function" }, + { "name": "GridColumnMenuSortItemSimple", "kind": "Function" }, { "name": "GridColumnMenuState", "kind": "Interface" }, { "name": "GridColumnMenuValue", "kind": "TypeAlias" }, { "name": "GridColumnNode", "kind": "TypeAlias" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index fc907172eb2d..3ece574b6d94 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -136,15 +136,15 @@ { "name": "GridColumnLookup", "kind": "TypeAlias" }, { "name": "gridColumnLookupSelector", "kind": "Variable" }, { "name": "GridColumnMenuApi", "kind": "Interface" }, - { "name": "GridColumnMenuColumnsItem", "kind": "Variable" }, - { "name": "GridColumnMenuColumnsItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuColumnsItem", "kind": "Function" }, + { "name": "GridColumnMenuColumnsItemSimple", "kind": "Function" }, { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, { "name": "GridColumnMenuDefault", "kind": "Variable" }, { "name": "GridColumnMenuDefaultContainer", "kind": "Variable" }, - { "name": "GridColumnMenuFilterItem", "kind": "Variable" }, - { "name": "GridColumnMenuFilterItemSimple", "kind": "Variable" }, - { "name": "GridColumnMenuHideItem", "kind": "Variable" }, - { "name": "GridColumnMenuHideItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuFilterItem", "kind": "Function" }, + { "name": "GridColumnMenuFilterItemSimple", "kind": "Function" }, + { "name": "GridColumnMenuHideItem", "kind": "Function" }, + { "name": "GridColumnMenuHideItemSimple", "kind": "Function" }, { "name": "GridColumnMenuItemProps", "kind": "Interface" }, { "name": "GridColumnMenuProps", "kind": "Interface" }, { "name": "GridColumnMenuRootProps", "kind": "Interface" }, @@ -152,8 +152,8 @@ { "name": "GridColumnMenuSimple", "kind": "Variable" }, { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, { "name": "GridColumnMenuSlotProps", "kind": "Interface" }, - { "name": "GridColumnMenuSortItem", "kind": "Variable" }, - { "name": "GridColumnMenuSortItemSimple", "kind": "Variable" }, + { "name": "GridColumnMenuSortItem", "kind": "Function" }, + { "name": "GridColumnMenuSortItemSimple", "kind": "Function" }, { "name": "GridColumnMenuState", "kind": "Interface" }, { "name": "GridColumnMenuValue", "kind": "TypeAlias" }, { "name": "GridColumnNode", "kind": "TypeAlias" }, From f59b06645241a52710e11ecab8ac846c7adf3755 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 24 Nov 2022 18:55:52 +0500 Subject: [PATCH 047/104] Converts slots to components --- .../column-menu/ReuseColumnMenuGrid.js | 4 +- .../column-menu/ReuseColumnMenuGrid.tsx | 4 +- .../data/data-grid/column-menu/column-menu.md | 20 +++++----- .../GridPremiumColumnMenuDefault.tsx | 16 ++++---- .../GridPremiumColumnMenuSimple.tsx | 16 ++++---- .../src/components/reexports.ts | 8 ++-- .../grid/x-data-grid-premium/src/index.ts | 8 ++-- .../components/GridProColumnMenuDefault.tsx | 16 ++++---- .../components/GridProColumnMenuSimple.tsx | 16 ++++---- .../src/components/reexports.ts | 8 ++-- packages/grid/x-data-grid-pro/src/index.ts | 8 ++-- .../default/GridColumnMenuDefault.tsx | 38 +++++++++---------- .../simple/GridColumnMenuSimple.tsx | 38 +++++++++---------- .../src/components/reexportable.ts | 8 ++-- .../columnMenu/columnMenuInterfaces.ts | 16 ++++---- .../useGridColumnMenuPreProcessing.ts | 27 +++++++------ packages/grid/x-data-grid/src/index.ts | 8 ++-- scripts/x-data-grid-premium.exports.json | 8 ++-- scripts/x-data-grid-pro.exports.json | 8 ++-- scripts/x-data-grid.exports.json | 8 ++-- 20 files changed, 143 insertions(+), 140 deletions(-) diff --git a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js index 292b4b824eba..3a7d407eab57 100644 --- a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js @@ -22,13 +22,13 @@ function CustomColumnMenu(props) { return ( ` or ``, could be used to override default column menu components. +**components**: Prop accepted by column menu components `` or ``, could be used to override default column menu components. ```tsx ``` -Default slots supported by community package are `ColumnMenuSortItem`, `ColumnMenuFilterItem`, `ColumnMenuHideItem` and `ColumnMenuColumnsItem`. Pro package adds `ColumnMenuPinningItem` and Premium package adds `ColumnMenuAggregationItem` and `ColumnMenuGroupingItem`. +Default components supported by community package are `ColumnMenuSortItem`, `ColumnMenuFilterItem`, `ColumnMenuHideItem` and `ColumnMenuColumnsItem`. Pro package adds `ColumnMenuPinningItem` and Premium package adds `ColumnMenuAggregationItem` and `ColumnMenuGroupingItem`. -**slotsProps**: Every item has a `displayOrder` based which it will be placed before or after other items in the menu. It can be overriden using `slotsProps`. +**componentsProps**: Every item has a `displayOrder` based which it will be placed before or after other items in the menu. It can be overriden using `componentsProps`. ```tsx ); }, diff --git a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx index bf0a09601213..58c6cde21664 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx @@ -4,8 +4,8 @@ import Divider from '@mui/material/Divider'; import { GridColumnMenuSimple, GridColumnMenuProps, - COLUMN_MENU_SIMPLE_SLOTS, - COLUMN_MENU_SIMPLE_SLOTS_PROPS, + COLUMN_MENU_SIMPLE_COMPONENTS, + COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, GridColumnMenuItemProps, } from '@mui/x-data-grid-pro'; import { GridColumnMenuAggregationItemSimple } from './GridColumnMenuAggregationItem'; @@ -43,14 +43,14 @@ function AggregationItem(props: GridColumnMenuItemProps) { ); } -export const COLUMN_MENU_SIMPLE_SLOTS_PREMIUM = { - ...COLUMN_MENU_SIMPLE_SLOTS, +export const COLUMN_MENU_SIMPLE_COMPONENTS_PREMIUM = { + ...COLUMN_MENU_SIMPLE_COMPONENTS, ColumnMenuAggregationItem: AggregationItem, ColumnMenuGroupingItem: GroupingItem, }; -export const COLUMN_MENU_SIMPLE_SLOTS_PROPS_PREMIUM = { - ...COLUMN_MENU_SIMPLE_SLOTS_PROPS, +export const COLUMN_MENU_SIMPLE_COMPONENTS_PROPS_PREMIUM = { + ...COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, ColumnMenuAggregationItem: { displayOrder: 37 }, ColumnMenuGroupingItem: { displayOrder: 33 }, }; @@ -61,8 +61,8 @@ const GridPremiumColumnMenuSimple = React.forwardRef ); }, diff --git a/packages/grid/x-data-grid-premium/src/components/reexports.ts b/packages/grid/x-data-grid-premium/src/components/reexports.ts index da6340e72e05..18680b5d7675 100644 --- a/packages/grid/x-data-grid-premium/src/components/reexports.ts +++ b/packages/grid/x-data-grid-premium/src/components/reexports.ts @@ -1,10 +1,10 @@ export { GridPremiumColumnMenuDefault as GridColumnMenuDefault, - COLUMN_MENU_DEFAULT_SLOTS_PREMIUM as COLUMN_MENU_DEFAULT_SLOTS, - COLUMN_MENU_DEFAULT_SLOTS_PROPS_PREMIUM as COLUMN_MENU_DEFAULT_SLOTS_PROPS, + COLUMN_MENU_DEFAULT_COMPONENTS_PREMIUM as COLUMN_MENU_DEFAULT_COMPONENTS, + COLUMN_MENU_DEFAULT_COMPONENTS_PROPS_PREMIUM as COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, } from './GridPremiumColumnMenuDefault'; export { GridPremiumColumnMenuSimple as GridColumnMenuSimple, - COLUMN_MENU_SIMPLE_SLOTS_PREMIUM as COLUMN_MENU_SIMPLE_SLOTS, - COLUMN_MENU_SIMPLE_SLOTS_PROPS_PREMIUM as COLUMN_MENU_SIMPLE_SLOTS_PROPS, + COLUMN_MENU_SIMPLE_COMPONENTS_PREMIUM as COLUMN_MENU_SIMPLE_COMPONENTS, + COLUMN_MENU_SIMPLE_COMPONENTS_PROPS_PREMIUM as COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, } from './GridPremiumColumnMenuSimple'; diff --git a/packages/grid/x-data-grid-premium/src/index.ts b/packages/grid/x-data-grid-premium/src/index.ts index d45a6dc175da..d60e286c42ec 100644 --- a/packages/grid/x-data-grid-premium/src/index.ts +++ b/packages/grid/x-data-grid-premium/src/index.ts @@ -30,9 +30,9 @@ export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexp export { GridColumnMenuDefault, - COLUMN_MENU_DEFAULT_SLOTS, - COLUMN_MENU_DEFAULT_SLOTS_PROPS, + COLUMN_MENU_DEFAULT_COMPONENTS, + COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, GridColumnMenuSimple, - COLUMN_MENU_SIMPLE_SLOTS, - COLUMN_MENU_SIMPLE_SLOTS_PROPS, + COLUMN_MENU_SIMPLE_COMPONENTS, + COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, } from './components/reexports'; diff --git a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx index edf9dc735fc1..d65eb10165cd 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx @@ -3,18 +3,18 @@ import PropTypes from 'prop-types'; import { GridColumnMenuDefault, GridColumnMenuProps, - COLUMN_MENU_DEFAULT_SLOTS, - COLUMN_MENU_DEFAULT_SLOTS_PROPS, + COLUMN_MENU_DEFAULT_COMPONENTS, + COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, } from '@mui/x-data-grid'; import { GridColumnMenuPinningItem } from './GridColumnMenuPinningItem'; -export const COLUMN_MENU_DEFAULT_SLOTS_PRO = { - ...COLUMN_MENU_DEFAULT_SLOTS, +export const COLUMN_MENU_DEFAULT_COMPONENTS_PRO = { + ...COLUMN_MENU_DEFAULT_COMPONENTS, ColumnMenuPinningItem: GridColumnMenuPinningItem, }; -export const COLUMN_MENU_DEFAULT_SLOTS_PROPS_PRO = { - ...COLUMN_MENU_DEFAULT_SLOTS_PROPS, +export const COLUMN_MENU_DEFAULT_COMPONENTS_PROPS_PRO = { + ...COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, ColumnMenuPinningItem: { displayOrder: 5 }, }; @@ -23,8 +23,8 @@ const GridProColumnMenuDefault = React.forwardRef ); diff --git a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx index 0f2d145ba5ae..f4ea154fbd92 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx @@ -4,8 +4,8 @@ import Divider from '@mui/material/Divider'; import { GridColumnMenuSimple, GridColumnMenuProps, - COLUMN_MENU_SIMPLE_SLOTS, - COLUMN_MENU_SIMPLE_SLOTS_PROPS, + COLUMN_MENU_SIMPLE_COMPONENTS, + COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, GridColumnMenuItemProps, } from '@mui/x-data-grid'; import { GridColumnMenuPinningItemSimple } from './GridColumnMenuPinningItemSimple'; @@ -19,13 +19,13 @@ function PinningWithDivider(props: GridColumnMenuItemProps) { ); } -export const COLUMN_MENU_SIMPLE_SLOTS_PRO = { - ...COLUMN_MENU_SIMPLE_SLOTS, +export const COLUMN_MENU_SIMPLE_COMPONENTS_PRO = { + ...COLUMN_MENU_SIMPLE_COMPONENTS, ColumnMenuPinningItem: PinningWithDivider, }; -export const COLUMN_MENU_SIMPLE_SLOTS_PROPS_PRO = { - ...COLUMN_MENU_SIMPLE_SLOTS_PROPS, +export const COLUMN_MENU_SIMPLE_COMPONENTS_PROPS_PRO = { + ...COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, ColumnMenuPinningItem: { displayOrder: 35, }, @@ -37,8 +37,8 @@ const GridProColumnMenuSimple = React.forwardRef ); }, diff --git a/packages/grid/x-data-grid-pro/src/components/reexports.ts b/packages/grid/x-data-grid-pro/src/components/reexports.ts index 574e9d48c68c..fec2ba9ff3fb 100644 --- a/packages/grid/x-data-grid-pro/src/components/reexports.ts +++ b/packages/grid/x-data-grid-pro/src/components/reexports.ts @@ -1,10 +1,10 @@ export { GridProColumnMenuDefault as GridColumnMenuDefault, - COLUMN_MENU_DEFAULT_SLOTS_PRO as COLUMN_MENU_DEFAULT_SLOTS, - COLUMN_MENU_DEFAULT_SLOTS_PROPS_PRO as COLUMN_MENU_DEFAULT_SLOTS_PROPS, + COLUMN_MENU_DEFAULT_COMPONENTS_PRO as COLUMN_MENU_DEFAULT_COMPONENTS, + COLUMN_MENU_DEFAULT_COMPONENTS_PROPS_PRO as COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, } from './GridProColumnMenuDefault'; export { GridProColumnMenuSimple as GridColumnMenuSimple, - COLUMN_MENU_SIMPLE_SLOTS_PRO as COLUMN_MENU_SIMPLE_SLOTS, - COLUMN_MENU_SIMPLE_SLOTS_PROPS_PRO as COLUMN_MENU_SIMPLE_SLOTS_PROPS, + COLUMN_MENU_SIMPLE_COMPONENTS_PRO as COLUMN_MENU_SIMPLE_COMPONENTS, + COLUMN_MENU_SIMPLE_COMPONENTS_PROPS_PRO as COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, } from './GridProColumnMenuSimple'; diff --git a/packages/grid/x-data-grid-pro/src/index.ts b/packages/grid/x-data-grid-pro/src/index.ts index 895af4d3ac09..8611a6f8390c 100644 --- a/packages/grid/x-data-grid-pro/src/index.ts +++ b/packages/grid/x-data-grid-pro/src/index.ts @@ -29,9 +29,9 @@ export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexp export { GridColumnMenuDefault, - COLUMN_MENU_DEFAULT_SLOTS, - COLUMN_MENU_DEFAULT_SLOTS_PROPS, + COLUMN_MENU_DEFAULT_COMPONENTS, + COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, GridColumnMenuSimple, - COLUMN_MENU_SIMPLE_SLOTS, - COLUMN_MENU_SIMPLE_SLOTS_PROPS, + COLUMN_MENU_SIMPLE_COMPONENTS, + COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, } from './components/reexports'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx index ac315b9a9258..440f726e8246 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx @@ -10,14 +10,14 @@ import { GridColumnMenuHideItem } from './GridColumnMenuHideItem'; import { GridColumnMenuSortItem } from './GridColumnMenuSortItem'; import { useGridPrivateApiContext } from '../../../../hooks/utils/useGridPrivateApiContext'; -export const COLUMN_MENU_DEFAULT_SLOTS = { +export const COLUMN_MENU_DEFAULT_COMPONENTS = { ColumnMenuSortItem: GridColumnMenuSortItem, ColumnMenuFilterItem: GridColumnMenuFilterItem, ColumnMenuHideItem: GridColumnMenuHideItem, ColumnMenuColumnsItem: GridColumnMenuColumnsItem, }; -export const COLUMN_MENU_DEFAULT_SLOTS_PROPS = { +export const COLUMN_MENU_DEFAULT_COMPONENTS_PROPS = { ColumnMenuSortItem: { displayOrder: 0 }, ColumnMenuFilterItem: { displayOrder: 10 }, ColumnMenuHideItem: { displayOrder: 20 }, @@ -27,16 +27,16 @@ export const COLUMN_MENU_DEFAULT_SLOTS_PROPS = { const GridColumnMenuDefault = React.forwardRef( function GridColumnMenuDefault(props, ref) { const { - defaultSlots = COLUMN_MENU_DEFAULT_SLOTS, - defaultSlotsProps = COLUMN_MENU_DEFAULT_SLOTS_PROPS, + defaultComponents = COLUMN_MENU_DEFAULT_COMPONENTS, + defaultComponentsProps = COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, ...other } = props; const apiRef = useGridPrivateApiContext(); const orderedComponents = useGridColumnMenuPreProcessing(apiRef, { ...other, - defaultSlots, - defaultSlotsProps, + defaultComponents, + defaultComponentsProps, }); return ( @@ -57,30 +57,30 @@ GridColumnMenuDefault.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * `components` could be used to override default column menu items + */ + components: PropTypes.object, + /** + * Could be used to override props specific to a column menu component + * e.g. `displayOrder` + */ + componentsProps: PropTypes.object, currentColumn: PropTypes.object.isRequired, /** - * Initial `slots` - it is internal, to be overrriden by Pro or Premium packages + * Initial `components` - it is internal, to be overrriden by Pro or Premium packages * @ignore - do not document. */ - defaultSlots: PropTypes.object, + defaultComponents: PropTypes.object, /** - * Initial `slotsProps` - it is internal, to be overrriden by Pro or Premium packages + * Initial `componentsProps` - it is internal, to be overrriden by Pro or Premium packages * @ignore - do not document. */ - defaultSlotsProps: PropTypes.object, + defaultComponentsProps: PropTypes.object, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, labelledby: PropTypes.string, open: PropTypes.bool.isRequired, - /** - * `slots` could be used to override default column menu slots - */ - slots: PropTypes.object, - /** - * Could be used to override props specific to a column menu slot - * e.g. `displayOrder` - */ - slotsProps: PropTypes.object, } as any; export { GridColumnMenuDefault }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index 961633cfc5d2..f0320335f87a 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -9,14 +9,14 @@ import { GridColumnMenuHideItemSimple } from './GridColumnMenuHideItemSimple'; import { GridColumnMenuSortItemSimple } from './GridColumnMenuSortItemSimple'; import { GridColumnMenuProps } from '../GridColumnMenuProps'; -export const COLUMN_MENU_SIMPLE_SLOTS = { +export const COLUMN_MENU_SIMPLE_COMPONENTS = { ColumnMenuSortItem: GridColumnMenuSortItemSimple, ColumnMenuFilterItem: GridColumnMenuFilterItemSimple, ColumnMenuHideItem: GridColumnMenuHideItemSimple, ColumnMenuColumnsItem: GridColumnMenuColumnsItemSimple, }; -export const COLUMN_MENU_SIMPLE_SLOTS_PROPS = { +export const COLUMN_MENU_SIMPLE_COMPONENTS_PROPS = { ColumnMenuSortItem: { displayOrder: 0 }, ColumnMenuFilterItem: { displayOrder: 10 }, ColumnMenuHideItem: { displayOrder: 20 }, @@ -26,8 +26,8 @@ export const COLUMN_MENU_SIMPLE_SLOTS_PROPS = { const GridColumnMenuSimple = React.forwardRef( function GridColumnMenuSimpleRoot(props, ref) { const { - defaultSlots = COLUMN_MENU_SIMPLE_SLOTS, - defaultSlotsProps = COLUMN_MENU_SIMPLE_SLOTS_PROPS, + defaultComponents = COLUMN_MENU_SIMPLE_COMPONENTS, + defaultComponentsProps = COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, ...other } = props; @@ -35,8 +35,8 @@ const GridColumnMenuSimple = React.forwardRef>; export interface GridColumnMenuRootProps { /** - * Initial `slots` - it is internal, to be overrriden by Pro or Premium packages + * Initial `components` - it is internal, to be overrriden by Pro or Premium packages * @ignore - do not document. */ - defaultSlots: { [key: string]: React.JSXElementConstructor }; + defaultComponents: { [key: string]: React.JSXElementConstructor }; /** - * Initial `slotsProps` - it is internal, to be overrriden by Pro or Premium packages + * Initial `componentsProps` - it is internal, to be overrriden by Pro or Premium packages * @ignore - do not document. */ - defaultSlotsProps: { [key: string]: GridColumnMenuSlotProps }; + defaultComponentsProps: { [key: string]: GridColumnMenuSlotProps }; /** - * `slots` could be used to override default column menu slots + * `components` could be used to override default column menu items */ - slots?: { [key: string]: React.JSXElementConstructor | null }; + components?: { [key: string]: React.JSXElementConstructor | null }; /** - * Could be used to override props specific to a column menu slot + * Could be used to override props specific to a column menu component * e.g. `displayOrder` */ - slotsProps?: { [key: string]: GridColumnMenuSlotProps }; + componentsProps?: { [key: string]: GridColumnMenuSlotProps }; } diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuPreProcessing.ts b/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuPreProcessing.ts index 3064a71cd15a..c5ed3fa33924 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuPreProcessing.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuPreProcessing.ts @@ -11,23 +11,28 @@ const useGridColumnMenuPreProcessing = ( apiRef: React.MutableRefObject, props: GridColumnMenuPreProcessingProps, ) => { - const { defaultSlots, defaultSlotsProps, slots = {}, slotsProps = {} } = props; + const { + defaultComponents, + defaultComponentsProps, + components = {}, + componentsProps = {}, + } = props; const processedSlots = React.useMemo( - () => ({ ...defaultSlots, ...slots }), - [defaultSlots, slots], + () => ({ ...defaultComponents, ...components }), + [defaultComponents, components], ); const processedSlotsProps = React.useMemo(() => { - if (!slotsProps || Object.keys(slotsProps).length === 0) { - return defaultSlotsProps; + if (!componentsProps || Object.keys(componentsProps).length === 0) { + return defaultComponentsProps; } - const mergedProps = {} as typeof defaultSlotsProps; - Object.entries(defaultSlotsProps).forEach(([key, currentSlotProps]) => { - mergedProps[key] = { ...currentSlotProps, ...(slotsProps[key] || {}) }; + const mergedProps = {} as typeof defaultComponentsProps; + Object.entries(defaultComponentsProps).forEach(([key, currentComponentProps]) => { + mergedProps[key] = { ...currentComponentProps, ...(componentsProps[key] || {}) }; }); return mergedProps; - }, [defaultSlotsProps, slotsProps]); + }, [defaultComponentsProps, componentsProps]); const preProcessedItems = apiRef.current.unstable_applyPipeProcessors( 'columnMenu', @@ -35,7 +40,7 @@ const useGridColumnMenuPreProcessing = ( props.currentColumn, ); - const components = React.useMemo(() => { + return React.useMemo(() => { const sorted = preProcessedItems.sort( (a, b) => processedSlotsProps[a].displayOrder - processedSlotsProps[b].displayOrder, ); @@ -47,8 +52,6 @@ const useGridColumnMenuPreProcessing = ( return [...acc, processedSlots[key]!]; }, []); }, [preProcessedItems, processedSlots, processedSlotsProps]); - - return components; }; export { useGridColumnMenuPreProcessing }; diff --git a/packages/grid/x-data-grid/src/index.ts b/packages/grid/x-data-grid/src/index.ts index 2d2882aaf886..d45dc29336cd 100644 --- a/packages/grid/x-data-grid/src/index.ts +++ b/packages/grid/x-data-grid/src/index.ts @@ -25,11 +25,11 @@ export type { GridExportFormat, GridExportExtension } from './models/gridExport' */ export { GridColumnMenuDefault, - COLUMN_MENU_DEFAULT_SLOTS, - COLUMN_MENU_DEFAULT_SLOTS_PROPS, + COLUMN_MENU_DEFAULT_COMPONENTS, + COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, GridColumnMenuSimple, - COLUMN_MENU_SIMPLE_SLOTS, - COLUMN_MENU_SIMPLE_SLOTS_PROPS, + COLUMN_MENU_SIMPLE_COMPONENTS, + COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, } from './components/reexportable'; /** diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index c3483640fb38..81a2b9e86c9f 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -4,10 +4,10 @@ { "name": "AutoSizerSize", "kind": "Interface" }, { "name": "bgBG", "kind": "Variable" }, { "name": "checkGridRowIdIsValid", "kind": "Function" }, - { "name": "COLUMN_MENU_DEFAULT_SLOTS", "kind": "Variable" }, - { "name": "COLUMN_MENU_DEFAULT_SLOTS_PROPS", "kind": "Variable" }, - { "name": "COLUMN_MENU_SIMPLE_SLOTS", "kind": "Variable" }, - { "name": "COLUMN_MENU_SIMPLE_SLOTS_PROPS", "kind": "Variable" }, + { "name": "COLUMN_MENU_DEFAULT_COMPONENTS", "kind": "Variable" }, + { "name": "COLUMN_MENU_DEFAULT_COMPONENTS_PROPS", "kind": "Variable" }, + { "name": "COLUMN_MENU_SIMPLE_COMPONENTS", "kind": "Variable" }, + { "name": "COLUMN_MENU_SIMPLE_COMPONENTS_PROPS", "kind": "Variable" }, { "name": "ColumnHeaderFilterIconButtonProps", "kind": "Interface" }, { "name": "ColumnsStylesInterface", "kind": "Interface" }, { "name": "createUseGridApiEventHandler", "kind": "Function" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index 02fcb2ac13f7..fbe71078cc47 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -4,10 +4,10 @@ { "name": "AutoSizerSize", "kind": "Interface" }, { "name": "bgBG", "kind": "Variable" }, { "name": "checkGridRowIdIsValid", "kind": "Function" }, - { "name": "COLUMN_MENU_DEFAULT_SLOTS", "kind": "Variable" }, - { "name": "COLUMN_MENU_DEFAULT_SLOTS_PROPS", "kind": "Variable" }, - { "name": "COLUMN_MENU_SIMPLE_SLOTS", "kind": "Variable" }, - { "name": "COLUMN_MENU_SIMPLE_SLOTS_PROPS", "kind": "Variable" }, + { "name": "COLUMN_MENU_DEFAULT_COMPONENTS", "kind": "Variable" }, + { "name": "COLUMN_MENU_DEFAULT_COMPONENTS_PROPS", "kind": "Variable" }, + { "name": "COLUMN_MENU_SIMPLE_COMPONENTS", "kind": "Variable" }, + { "name": "COLUMN_MENU_SIMPLE_COMPONENTS_PROPS", "kind": "Variable" }, { "name": "ColumnHeaderFilterIconButtonProps", "kind": "Interface" }, { "name": "createUseGridApiEventHandler", "kind": "Function" }, { "name": "csCZ", "kind": "Variable" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 3ece574b6d94..6e46a1d1f991 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -4,10 +4,10 @@ { "name": "AutoSizerSize", "kind": "Interface" }, { "name": "bgBG", "kind": "Variable" }, { "name": "checkGridRowIdIsValid", "kind": "Function" }, - { "name": "COLUMN_MENU_DEFAULT_SLOTS", "kind": "Variable" }, - { "name": "COLUMN_MENU_DEFAULT_SLOTS_PROPS", "kind": "Variable" }, - { "name": "COLUMN_MENU_SIMPLE_SLOTS", "kind": "Variable" }, - { "name": "COLUMN_MENU_SIMPLE_SLOTS_PROPS", "kind": "Variable" }, + { "name": "COLUMN_MENU_DEFAULT_COMPONENTS", "kind": "Variable" }, + { "name": "COLUMN_MENU_DEFAULT_COMPONENTS_PROPS", "kind": "Variable" }, + { "name": "COLUMN_MENU_SIMPLE_COMPONENTS", "kind": "Variable" }, + { "name": "COLUMN_MENU_SIMPLE_COMPONENTS_PROPS", "kind": "Variable" }, { "name": "ColumnHeaderFilterIconButtonProps", "kind": "Interface" }, { "name": "createUseGridApiEventHandler", "kind": "Function" }, { "name": "csCZ", "kind": "Variable" }, From 38e475482a8a11e1beb63737ba17e5520babfefe Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 24 Nov 2022 23:18:30 +0500 Subject: [PATCH 048/104] Resolves some comments --- docs/pages/x/api/data-grid/data-grid-pro.json | 101 +++++++++++++++++- .../data-grid/data-grid-premium-pt.json | 2 +- .../data-grid/data-grid-premium-zh.json | 2 +- .../api-docs/data-grid/data-grid-premium.json | 2 +- .../api-docs/data-grid/data-grid-pro-pt.json | 62 ++++++++++- .../api-docs/data-grid/data-grid-pro-zh.json | 62 ++++++++++- .../api-docs/data-grid/data-grid-pro.json | 62 ++++++++++- .../src/DataGridPremium/DataGridPremium.tsx | 2 +- .../GridPremiumColumnMenuDefault.tsx | 16 +-- .../GridPremiumColumnMenuSimple.tsx | 16 +-- .../src/components/reexports.ts | 8 +- .../grid/x-data-grid-premium/src/index.ts | 8 +- .../src/models/dataGridPremiumProps.ts | 2 +- .../src/DataGridPro/DataGridPro.tsx | 3 + .../components/GridProColumnMenuDefault.tsx | 16 +-- .../components/GridProColumnMenuSimple.tsx | 16 +-- .../src/components/reexports.ts | 8 +- packages/grid/x-data-grid-pro/src/index.ts | 8 +- .../src/models/dataGridProProps.ts | 3 + .../default/GridColumnMenuDefault.tsx | 16 +-- .../simple/GridColumnMenuSimple.tsx | 16 +-- .../src/components/reexportable.ts | 8 +- .../constants/defaultGridSlotsComponents.ts | 2 +- ...sing.ts => useGridColumnMenuComponents.ts} | 22 ++-- packages/grid/x-data-grid/src/index.ts | 8 +- scripts/x-data-grid-premium.exports.json | 8 +- scripts/x-data-grid-pro.exports.json | 8 +- scripts/x-data-grid.exports.json | 8 +- 28 files changed, 394 insertions(+), 101 deletions(-) rename packages/grid/x-data-grid/src/hooks/features/columnMenu/{useGridColumnMenuPreProcessing.ts => useGridColumnMenuComponents.ts} (67%) 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 0834b32a12f9..3c5ca2f1552c 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -24,6 +24,7 @@ "columnThreshold": { "type": { "name": "number" }, "default": "3" }, "columnTypes": { "type": { "name": "object" } }, "columnVisibilityModel": { "type": { "name": "object" } }, + "components": { "type": { "name": "object" } }, "componentsProps": { "type": { "name": "object" } }, "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" }, "density": { @@ -226,7 +227,105 @@ "throttleRowsMs": { "type": { "name": "number" }, "default": "0" }, "treeData": { "type": { "name": "bool" } } }, - "slots": {}, + "slots": { + "BaseButton": { "default": "Button", "type": { "name": "elementType" } }, + "BaseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } }, + "BaseFormControl": { "default": "FormControl", "type": { "name": "elementType" } }, + "BasePopper": { "default": "Popper", "type": { "name": "elementType" } }, + "BaseSelect": { "default": "Select", "type": { "name": "elementType" } }, + "BaseSwitch": { "default": "Switch", "type": { "name": "elementType" } }, + "BaseTextField": { "default": "TextField", "type": { "name": "elementType" } }, + "BaseTooltip": { "default": "Tooltip", "type": { "name": "elementType" } }, + "BooleanCellFalseIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } }, + "BooleanCellTrueIcon": { "default": "GridCheckIcon", "type": { "name": "elementType" } }, + "Cell": { "default": "GridCell", "type": { "name": "elementType" } }, + "ColumnFilteredIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, + "ColumnHeaderFilterIconButton": { + "default": "GridColumnHeaderFilterIconButton", + "type": { "name": "elementType" } + }, + "ColumnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } }, + "ColumnMenuClearIcon": { "default": "GridClearIcon", "type": { "name": "elementType" } }, + "ColumnMenuFilterIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, + "ColumnMenuHideIcon": { "default": "GridVisibilityOffIcon", "type": { "name": "elementType" } }, + "ColumnMenuIcon": { + "default": "GridTripleDotsVerticalIcon", + "type": { "name": "elementType" } + }, + "ColumnMenuManageColumnsIcon": { + "default": "GridViewColumnIcon", + "type": { "name": "elementType" } + }, + "ColumnMenuPinLeftIcon": { + "default": "GridPushPinLeftIcon", + "type": { "name": "elementType" } + }, + "ColumnMenuPinRightIcon": { + "default": "GridPushPinRightIcon", + "type": { "name": "elementType" } + }, + "ColumnMenuSortAscendingIcon": { + "default": "GridArrowUpwardIcon", + "type": { "name": "elementType" } + }, + "ColumnMenuSortDescendingIcon": { + "default": "GridArrowDownwardIcon", + "type": { "name": "elementType" } + }, + "ColumnResizeIcon": { "default": "GridSeparatorIcon", "type": { "name": "elementType" } }, + "ColumnSelectorIcon": { "default": "GridColumnIcon", "type": { "name": "elementType" } }, + "ColumnSortedAscendingIcon": { + "default": "GridArrowUpwardIcon", + "type": { "name": "elementType | null" } + }, + "ColumnSortedDescendingIcon": { + "default": "GridArrowDownwardIcon", + "type": { "name": "elementType | null" } + }, + "ColumnsPanel": { "default": "GridColumnsPanel", "type": { "name": "elementType" } }, + "ColumnUnsortedIcon": { + "default": "GridColumnUnsortedIcon", + "type": { "name": "elementType | null" } + }, + "DensityComfortableIcon": { + "default": "GridViewStreamIcon", + "type": { "name": "elementType" } + }, + "DensityCompactIcon": { "default": "GridViewHeadlineIcon", "type": { "name": "elementType" } }, + "DensityStandardIcon": { "default": "GridTableRowsIcon", "type": { "name": "elementType" } }, + "DetailPanelCollapseIcon": { "default": "GridRemoveIcon", "type": { "name": "elementType" } }, + "DetailPanelExpandIcon": { "default": "GridAddIcon", "type": { "name": "elementType" } }, + "ErrorOverlay": { "default": "GridErrorOverlay", "type": { "name": "elementType" } }, + "ExportIcon": { "default": "GridSaveAltIcon", "type": { "name": "elementType" } }, + "FilterPanel": { "default": "GridFilterPanel", "type": { "name": "elementType" } }, + "FilterPanelDeleteIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } }, + "Footer": { "default": "GridFooter", "type": { "name": "elementType" } }, + "GroupingCriteriaCollapseIcon": { + "default": "GridExpandMoreIcon", + "type": { "name": "elementType" } + }, + "GroupingCriteriaExpandIcon": { + "default": "GridKeyboardArrowRight", + "type": { "name": "elementType" } + }, + "Header": { "default": "GridHeader", "type": { "name": "elementType" } }, + "LoadingOverlay": { "default": "GridLoadingOverlay", "type": { "name": "elementType" } }, + "MoreActionsIcon": { "default": "GridMoreVertIcon", "type": { "name": "elementType" } }, + "NoResultsOverlay": { "default": "GridNoResultsOverlay", "type": { "name": "elementType" } }, + "NoRowsOverlay": { "default": "GridNoRowsOverlay", "type": { "name": "elementType" } }, + "OpenFilterButtonIcon": { "default": "GridFilterListIcon", "type": { "name": "elementType" } }, + "Pagination": { "default": "Pagination", "type": { "name": "elementType | null" } }, + "Panel": { "default": "GridPanel", "type": { "name": "elementType" } }, + "PreferencesPanel": { "default": "GridPreferencesPanel", "type": { "name": "elementType" } }, + "QuickFilterClearIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } }, + "QuickFilterIcon": { "default": "GridSearchIcon", "type": { "name": "elementType" } }, + "Row": { "default": "GridRow", "type": { "name": "elementType" } }, + "RowReorderIcon": { "default": "GridDragIcon", "type": { "name": "elementType" } }, + "SkeletonCell": { "default": "GridSkeletonCell", "type": { "name": "elementType" } }, + "Toolbar": { "default": "null", "type": { "name": "elementType | null" } }, + "TreeDataCollapseIcon": { "default": "GridExpandMoreIcon", "type": { "name": "elementType" } }, + "TreeDataExpandIcon": { "default": "GridKeyboardArrowRight", "type": { "name": "elementType" } } + }, "name": "DataGridPro", "styles": { "classes": [ diff --git a/docs/translations/api-docs/data-grid/data-grid-premium-pt.json b/docs/translations/api-docs/data-grid/data-grid-premium-pt.json index 1291f6108443..59f1568c8bb7 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium-pt.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium-pt.json @@ -18,7 +18,7 @@ "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", "columnTypes": "Extend native column types with your new column types.", "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", - "components": "Overrideable Pro components.", + "components": "Overrideable components.", "componentsProps": "Overrideable components props dynamically passed to the component at rendering.", "defaultGroupingExpansionDepth": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", "density": "Set the density of the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium-zh.json b/docs/translations/api-docs/data-grid/data-grid-premium-zh.json index 1291f6108443..59f1568c8bb7 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium-zh.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium-zh.json @@ -18,7 +18,7 @@ "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", "columnTypes": "Extend native column types with your new column types.", "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", - "components": "Overrideable Pro components.", + "components": "Overrideable components.", "componentsProps": "Overrideable components props dynamically passed to the component at rendering.", "defaultGroupingExpansionDepth": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", "density": "Set the density of the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json index 1291f6108443..59f1568c8bb7 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -18,7 +18,7 @@ "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", "columnTypes": "Extend native column types with your new column types.", "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", - "components": "Overrideable Pro components.", + "components": "Overrideable components.", "componentsProps": "Overrideable components props dynamically passed to the component at rendering.", "defaultGroupingExpansionDepth": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", "density": "Set the density of the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json index e36f2dbb5367..a35f51eb9f33 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json @@ -15,6 +15,7 @@ "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", "columnTypes": "Extend native column types with your new column types.", "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", + "components": "Overrideable components.", "componentsProps": "Overrideable components props dynamically passed to the component at rendering.", "defaultGroupingExpansionDepth": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", "density": "Set the density of the grid.", @@ -647,5 +648,64 @@ "nodeName": "pinned rows render zones" } }, - "slotDescriptions": {} + "slotDescriptions": { + "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "BaseTextField": "The custom TextField component used in the grid.", + "BaseFormControl": "The custom FormControl component used in the grid.", + "BaseSelect": "The custom Select component used in the grid.", + "BaseSwitch": "The custom Switch component used in the grid.", + "BaseButton": "The custom Button component used in the grid.", + "BaseTooltip": "The custom Tooltip component used in the grid.", + "BasePopper": "The custom Popper component used in the grid.", + "Cell": "Component rendered for each cell.", + "SkeletonCell": "Component rendered for each skeleton cell.", + "ColumnHeaderFilterIconButton": "Filter icon component rendered in each column header.", + "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", + "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.", + "Footer": "Footer component rendered at the bottom of the grid viewport.", + "Header": "Header component rendered above the grid column header bar.\nPrefer using the Toolbar slot. You should never need to use this slot.", + "Toolbar": "Toolbar component rendered inside the Header component.", + "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.", + "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", + "NoResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", + "NoRowsOverlay": "No rows overlay component rendered when the grid has no rows.", + "Pagination": "Pagination component rendered in the grid footer by default.", + "FilterPanel": "Filter panel component rendered when clicking the filter button.", + "ColumnsPanel": "GridColumns panel component rendered when clicking the columns button.", + "Panel": "Panel component wrapping the filters and columns panels.", + "Row": "Component rendered for each row.", + "BooleanCellTrueIcon": "Icon displayed on the boolean cell to represent the true value.", + "BooleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.", + "ColumnMenuIcon": "Icon displayed on the side of the column header title to display the filter input component.", + "OpenFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", + "ColumnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "ColumnSelectorIcon": "Icon displayed on the column menu selector tab.", + "ColumnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.", + "ColumnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", + "ColumnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.", + "ColumnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", + "DensityCompactIcon": "Icon displayed on the compact density option in the toolbar.", + "DensityStandardIcon": "Icon displayed on the standard density option in the toolbar.", + "DensityComfortableIcon": "Icon displayed on the "comfortable" density option in the toolbar.", + "ExportIcon": "Icon displayed on the open export button present in the toolbar by default.", + "MoreActionsIcon": "Icon displayed on the actions column type to open the menu.", + "TreeDataExpandIcon": "Icon displayed on the tree data toggling column when the children are collapsed", + "TreeDataCollapseIcon": "Icon displayed on the tree data toggling column when the children are expanded", + "GroupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", + "GroupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", + "DetailPanelExpandIcon": "Icon displayed on the detail panel toggle column when collapsed.", + "DetailPanelCollapseIcon": "Icon displayed on the detail panel toggle column when expanded.", + "FilterPanelDeleteIcon": "Icon displayed for deleting the filter from filter Panel.", + "RowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", + "QuickFilterIcon": "Icon displayed on the quick filter input.", + "QuickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "ColumnMenuHideIcon": "Icon displayed in column menu for hiding column", + "ColumnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "ColumnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "ColumnMenuFilterIcon": "Icon displayed in column menu for filter", + "ColumnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "ColumnMenuClearIcon": "Icon displayed in column menu for clearing values", + "ColumnMenuPinLeftIcon": "Icon displayed in column menu for left pinning", + "ColumnMenuPinRightIcon": "Icon displayed in column menu for right pinning" + } } diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json index e36f2dbb5367..a35f51eb9f33 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json @@ -15,6 +15,7 @@ "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", "columnTypes": "Extend native column types with your new column types.", "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", + "components": "Overrideable components.", "componentsProps": "Overrideable components props dynamically passed to the component at rendering.", "defaultGroupingExpansionDepth": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", "density": "Set the density of the grid.", @@ -647,5 +648,64 @@ "nodeName": "pinned rows render zones" } }, - "slotDescriptions": {} + "slotDescriptions": { + "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "BaseTextField": "The custom TextField component used in the grid.", + "BaseFormControl": "The custom FormControl component used in the grid.", + "BaseSelect": "The custom Select component used in the grid.", + "BaseSwitch": "The custom Switch component used in the grid.", + "BaseButton": "The custom Button component used in the grid.", + "BaseTooltip": "The custom Tooltip component used in the grid.", + "BasePopper": "The custom Popper component used in the grid.", + "Cell": "Component rendered for each cell.", + "SkeletonCell": "Component rendered for each skeleton cell.", + "ColumnHeaderFilterIconButton": "Filter icon component rendered in each column header.", + "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", + "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.", + "Footer": "Footer component rendered at the bottom of the grid viewport.", + "Header": "Header component rendered above the grid column header bar.\nPrefer using the Toolbar slot. You should never need to use this slot.", + "Toolbar": "Toolbar component rendered inside the Header component.", + "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.", + "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", + "NoResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", + "NoRowsOverlay": "No rows overlay component rendered when the grid has no rows.", + "Pagination": "Pagination component rendered in the grid footer by default.", + "FilterPanel": "Filter panel component rendered when clicking the filter button.", + "ColumnsPanel": "GridColumns panel component rendered when clicking the columns button.", + "Panel": "Panel component wrapping the filters and columns panels.", + "Row": "Component rendered for each row.", + "BooleanCellTrueIcon": "Icon displayed on the boolean cell to represent the true value.", + "BooleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.", + "ColumnMenuIcon": "Icon displayed on the side of the column header title to display the filter input component.", + "OpenFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", + "ColumnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "ColumnSelectorIcon": "Icon displayed on the column menu selector tab.", + "ColumnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.", + "ColumnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", + "ColumnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.", + "ColumnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", + "DensityCompactIcon": "Icon displayed on the compact density option in the toolbar.", + "DensityStandardIcon": "Icon displayed on the standard density option in the toolbar.", + "DensityComfortableIcon": "Icon displayed on the "comfortable" density option in the toolbar.", + "ExportIcon": "Icon displayed on the open export button present in the toolbar by default.", + "MoreActionsIcon": "Icon displayed on the actions column type to open the menu.", + "TreeDataExpandIcon": "Icon displayed on the tree data toggling column when the children are collapsed", + "TreeDataCollapseIcon": "Icon displayed on the tree data toggling column when the children are expanded", + "GroupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", + "GroupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", + "DetailPanelExpandIcon": "Icon displayed on the detail panel toggle column when collapsed.", + "DetailPanelCollapseIcon": "Icon displayed on the detail panel toggle column when expanded.", + "FilterPanelDeleteIcon": "Icon displayed for deleting the filter from filter Panel.", + "RowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", + "QuickFilterIcon": "Icon displayed on the quick filter input.", + "QuickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "ColumnMenuHideIcon": "Icon displayed in column menu for hiding column", + "ColumnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "ColumnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "ColumnMenuFilterIcon": "Icon displayed in column menu for filter", + "ColumnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "ColumnMenuClearIcon": "Icon displayed in column menu for clearing values", + "ColumnMenuPinLeftIcon": "Icon displayed in column menu for left pinning", + "ColumnMenuPinRightIcon": "Icon displayed in column menu for right pinning" + } } diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json index e36f2dbb5367..a35f51eb9f33 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -15,6 +15,7 @@ "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", "columnTypes": "Extend native column types with your new column types.", "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", + "components": "Overrideable components.", "componentsProps": "Overrideable components props dynamically passed to the component at rendering.", "defaultGroupingExpansionDepth": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", "density": "Set the density of the grid.", @@ -647,5 +648,64 @@ "nodeName": "pinned rows render zones" } }, - "slotDescriptions": {} + "slotDescriptions": { + "BaseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "BaseTextField": "The custom TextField component used in the grid.", + "BaseFormControl": "The custom FormControl component used in the grid.", + "BaseSelect": "The custom Select component used in the grid.", + "BaseSwitch": "The custom Switch component used in the grid.", + "BaseButton": "The custom Button component used in the grid.", + "BaseTooltip": "The custom Tooltip component used in the grid.", + "BasePopper": "The custom Popper component used in the grid.", + "Cell": "Component rendered for each cell.", + "SkeletonCell": "Component rendered for each skeleton cell.", + "ColumnHeaderFilterIconButton": "Filter icon component rendered in each column header.", + "ColumnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", + "ErrorOverlay": "Error overlay component rendered above the grid when an error is caught.", + "Footer": "Footer component rendered at the bottom of the grid viewport.", + "Header": "Header component rendered above the grid column header bar.\nPrefer using the Toolbar slot. You should never need to use this slot.", + "Toolbar": "Toolbar component rendered inside the Header component.", + "PreferencesPanel": "PreferencesPanel component rendered inside the Header component.", + "LoadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", + "NoResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", + "NoRowsOverlay": "No rows overlay component rendered when the grid has no rows.", + "Pagination": "Pagination component rendered in the grid footer by default.", + "FilterPanel": "Filter panel component rendered when clicking the filter button.", + "ColumnsPanel": "GridColumns panel component rendered when clicking the columns button.", + "Panel": "Panel component wrapping the filters and columns panels.", + "Row": "Component rendered for each row.", + "BooleanCellTrueIcon": "Icon displayed on the boolean cell to represent the true value.", + "BooleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.", + "ColumnMenuIcon": "Icon displayed on the side of the column header title to display the filter input component.", + "OpenFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", + "ColumnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "ColumnSelectorIcon": "Icon displayed on the column menu selector tab.", + "ColumnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.", + "ColumnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", + "ColumnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.", + "ColumnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", + "DensityCompactIcon": "Icon displayed on the compact density option in the toolbar.", + "DensityStandardIcon": "Icon displayed on the standard density option in the toolbar.", + "DensityComfortableIcon": "Icon displayed on the "comfortable" density option in the toolbar.", + "ExportIcon": "Icon displayed on the open export button present in the toolbar by default.", + "MoreActionsIcon": "Icon displayed on the actions column type to open the menu.", + "TreeDataExpandIcon": "Icon displayed on the tree data toggling column when the children are collapsed", + "TreeDataCollapseIcon": "Icon displayed on the tree data toggling column when the children are expanded", + "GroupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", + "GroupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", + "DetailPanelExpandIcon": "Icon displayed on the detail panel toggle column when collapsed.", + "DetailPanelCollapseIcon": "Icon displayed on the detail panel toggle column when expanded.", + "FilterPanelDeleteIcon": "Icon displayed for deleting the filter from filter Panel.", + "RowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", + "QuickFilterIcon": "Icon displayed on the quick filter input.", + "QuickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "ColumnMenuHideIcon": "Icon displayed in column menu for hiding column", + "ColumnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "ColumnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "ColumnMenuFilterIcon": "Icon displayed in column menu for filter", + "ColumnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "ColumnMenuClearIcon": "Icon displayed in column menu for clearing values", + "ColumnMenuPinLeftIcon": "Icon displayed in column menu for left pinning", + "ColumnMenuPinRightIcon": "Icon displayed in column menu for right pinning" + } } diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index fffc814b7138..ce06bdf55a6a 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -154,7 +154,7 @@ DataGridPremiumRaw.propTypes = { */ columnVisibilityModel: PropTypes.object, /** - * Overrideable Pro components. + * Overrideable components. */ components: PropTypes.object, /** diff --git a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx index abcce007b5b3..4ebcb1a8cb55 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; import { GridColumnMenuDefault, GridColumnMenuProps, - COLUMN_MENU_DEFAULT_COMPONENTS, - COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, GridColumnMenuItemProps, } from '@mui/x-data-grid-pro'; import { GridColumnMenuAggregationItem } from './GridColumnMenuAggregationItem'; @@ -23,14 +23,14 @@ function GroupingItem(props: GridColumnMenuItemProps) { return null; } -export const COLUMN_MENU_DEFAULT_COMPONENTS_PREMIUM = { - ...COLUMN_MENU_DEFAULT_COMPONENTS, +export const GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PREMIUM = { + ...GRID_COLUMN_MENU_DEFAULT_COMPONENTS, ColumnMenuAggregationItem: GridColumnMenuAggregationItem, ColumnMenuGroupingItem: GroupingItem, }; -export const COLUMN_MENU_DEFAULT_COMPONENTS_PROPS_PREMIUM = { - ...COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, +export const GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS_PREMIUM = { + ...GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, ColumnMenuAggregationItem: { displayOrder: 17 }, ColumnMenuGroupingItem: { displayOrder: 13 }, }; @@ -41,8 +41,8 @@ const GridPremiumColumnMenuDefault = React.forwardRef ); }, diff --git a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx index 58c6cde21664..902ea3e3b682 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx @@ -4,8 +4,8 @@ import Divider from '@mui/material/Divider'; import { GridColumnMenuSimple, GridColumnMenuProps, - COLUMN_MENU_SIMPLE_COMPONENTS, - COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, GridColumnMenuItemProps, } from '@mui/x-data-grid-pro'; import { GridColumnMenuAggregationItemSimple } from './GridColumnMenuAggregationItem'; @@ -43,14 +43,14 @@ function AggregationItem(props: GridColumnMenuItemProps) { ); } -export const COLUMN_MENU_SIMPLE_COMPONENTS_PREMIUM = { - ...COLUMN_MENU_SIMPLE_COMPONENTS, +export const GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PREMIUM = { + ...GRID_COLUMN_MENU_SIMPLE_COMPONENTS, ColumnMenuAggregationItem: AggregationItem, ColumnMenuGroupingItem: GroupingItem, }; -export const COLUMN_MENU_SIMPLE_COMPONENTS_PROPS_PREMIUM = { - ...COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, +export const GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS_PREMIUM = { + ...GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, ColumnMenuAggregationItem: { displayOrder: 37 }, ColumnMenuGroupingItem: { displayOrder: 33 }, }; @@ -61,8 +61,8 @@ const GridPremiumColumnMenuSimple = React.forwardRef ); }, diff --git a/packages/grid/x-data-grid-premium/src/components/reexports.ts b/packages/grid/x-data-grid-premium/src/components/reexports.ts index 18680b5d7675..744c184dacc8 100644 --- a/packages/grid/x-data-grid-premium/src/components/reexports.ts +++ b/packages/grid/x-data-grid-premium/src/components/reexports.ts @@ -1,10 +1,10 @@ export { GridPremiumColumnMenuDefault as GridColumnMenuDefault, - COLUMN_MENU_DEFAULT_COMPONENTS_PREMIUM as COLUMN_MENU_DEFAULT_COMPONENTS, - COLUMN_MENU_DEFAULT_COMPONENTS_PROPS_PREMIUM as COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PREMIUM as GRID_COLUMN_MENU_DEFAULT_COMPONENTS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS_PREMIUM as GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, } from './GridPremiumColumnMenuDefault'; export { GridPremiumColumnMenuSimple as GridColumnMenuSimple, - COLUMN_MENU_SIMPLE_COMPONENTS_PREMIUM as COLUMN_MENU_SIMPLE_COMPONENTS, - COLUMN_MENU_SIMPLE_COMPONENTS_PROPS_PREMIUM as COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PREMIUM as GRID_COLUMN_MENU_SIMPLE_COMPONENTS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS_PREMIUM as GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, } from './GridPremiumColumnMenuSimple'; diff --git a/packages/grid/x-data-grid-premium/src/index.ts b/packages/grid/x-data-grid-premium/src/index.ts index d60e286c42ec..f14783604bcc 100644 --- a/packages/grid/x-data-grid-premium/src/index.ts +++ b/packages/grid/x-data-grid-premium/src/index.ts @@ -30,9 +30,9 @@ export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexp export { GridColumnMenuDefault, - COLUMN_MENU_DEFAULT_COMPONENTS, - COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, GridColumnMenuSimple, - COLUMN_MENU_SIMPLE_COMPONENTS, - COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, } from './components/reexports'; diff --git a/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts b/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts index ecd60acc5d84..d701258dd16c 100644 --- a/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts +++ b/packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts @@ -22,7 +22,7 @@ export interface GridExperimentalPremiumFeatures extends GridExperimentalProFeat export interface DataGridPremiumPropsWithComplexDefaultValueBeforeProcessing extends Pick { /** - * Overrideable Pro components. + * Overrideable components. */ components?: Partial; } diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 282fe6b715a0..4ca4774a8cd9 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -134,6 +134,9 @@ DataGridProRaw.propTypes = { * If defined, the grid will ignore the `hide` property in [[GridColDef]]. */ columnVisibilityModel: PropTypes.object, + /** + * Overrideable components. + */ components: PropTypes.object, /** * Overrideable components props dynamically passed to the component at rendering. diff --git a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx index d65eb10165cd..908349052e29 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx @@ -3,18 +3,18 @@ import PropTypes from 'prop-types'; import { GridColumnMenuDefault, GridColumnMenuProps, - COLUMN_MENU_DEFAULT_COMPONENTS, - COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, } from '@mui/x-data-grid'; import { GridColumnMenuPinningItem } from './GridColumnMenuPinningItem'; -export const COLUMN_MENU_DEFAULT_COMPONENTS_PRO = { - ...COLUMN_MENU_DEFAULT_COMPONENTS, +export const GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PRO = { + ...GRID_COLUMN_MENU_DEFAULT_COMPONENTS, ColumnMenuPinningItem: GridColumnMenuPinningItem, }; -export const COLUMN_MENU_DEFAULT_COMPONENTS_PROPS_PRO = { - ...COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, +export const GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS_PRO = { + ...GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, ColumnMenuPinningItem: { displayOrder: 5 }, }; @@ -23,8 +23,8 @@ const GridProColumnMenuDefault = React.forwardRef ); diff --git a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx index f4ea154fbd92..83f2b921c02e 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx @@ -4,8 +4,8 @@ import Divider from '@mui/material/Divider'; import { GridColumnMenuSimple, GridColumnMenuProps, - COLUMN_MENU_SIMPLE_COMPONENTS, - COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, GridColumnMenuItemProps, } from '@mui/x-data-grid'; import { GridColumnMenuPinningItemSimple } from './GridColumnMenuPinningItemSimple'; @@ -19,13 +19,13 @@ function PinningWithDivider(props: GridColumnMenuItemProps) { ); } -export const COLUMN_MENU_SIMPLE_COMPONENTS_PRO = { - ...COLUMN_MENU_SIMPLE_COMPONENTS, +export const GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PRO = { + ...GRID_COLUMN_MENU_SIMPLE_COMPONENTS, ColumnMenuPinningItem: PinningWithDivider, }; -export const COLUMN_MENU_SIMPLE_COMPONENTS_PROPS_PRO = { - ...COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, +export const GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS_PRO = { + ...GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, ColumnMenuPinningItem: { displayOrder: 35, }, @@ -37,8 +37,8 @@ const GridProColumnMenuSimple = React.forwardRef ); }, diff --git a/packages/grid/x-data-grid-pro/src/components/reexports.ts b/packages/grid/x-data-grid-pro/src/components/reexports.ts index fec2ba9ff3fb..2aacdae63c27 100644 --- a/packages/grid/x-data-grid-pro/src/components/reexports.ts +++ b/packages/grid/x-data-grid-pro/src/components/reexports.ts @@ -1,10 +1,10 @@ export { GridProColumnMenuDefault as GridColumnMenuDefault, - COLUMN_MENU_DEFAULT_COMPONENTS_PRO as COLUMN_MENU_DEFAULT_COMPONENTS, - COLUMN_MENU_DEFAULT_COMPONENTS_PROPS_PRO as COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PRO as GRID_COLUMN_MENU_DEFAULT_COMPONENTS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS_PRO as GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, } from './GridProColumnMenuDefault'; export { GridProColumnMenuSimple as GridColumnMenuSimple, - COLUMN_MENU_SIMPLE_COMPONENTS_PRO as COLUMN_MENU_SIMPLE_COMPONENTS, - COLUMN_MENU_SIMPLE_COMPONENTS_PROPS_PRO as COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PRO as GRID_COLUMN_MENU_SIMPLE_COMPONENTS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS_PRO as GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, } from './GridProColumnMenuSimple'; diff --git a/packages/grid/x-data-grid-pro/src/index.ts b/packages/grid/x-data-grid-pro/src/index.ts index 8611a6f8390c..d5a0da4be96f 100644 --- a/packages/grid/x-data-grid-pro/src/index.ts +++ b/packages/grid/x-data-grid-pro/src/index.ts @@ -29,9 +29,9 @@ export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexp export { GridColumnMenuDefault, - COLUMN_MENU_DEFAULT_COMPONENTS, - COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, GridColumnMenuSimple, - COLUMN_MENU_SIMPLE_COMPONENTS, - COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, } from './components/reexports'; diff --git a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts index 440264610140..ff6386d884b7 100644 --- a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts +++ b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts @@ -38,6 +38,9 @@ export interface GridExperimentalProFeatures extends GridExperimentalFeatures { interface DataGridProPropsWithComplexDefaultValueBeforeProcessing extends Omit { + /** + * Overrideable components. + */ components?: Partial; } diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx index 440f726e8246..e7e1fed65d45 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Divider from '@mui/material/Divider'; -import { useGridColumnMenuPreProcessing } from '../../../../hooks/features/columnMenu/useGridColumnMenuPreProcessing'; +import { useGridColumnMenuComponents } from '../../../../hooks/features/columnMenu/useGridColumnMenuComponents'; import { GridColumnMenuDefaultContainer } from './GridColumnMenuDefaultContainer'; import { GridColumnMenuProps } from '../GridColumnMenuProps'; import { GridColumnMenuColumnsItem } from './GridColumnMenuColumnsItem'; @@ -10,14 +10,14 @@ import { GridColumnMenuHideItem } from './GridColumnMenuHideItem'; import { GridColumnMenuSortItem } from './GridColumnMenuSortItem'; import { useGridPrivateApiContext } from '../../../../hooks/utils/useGridPrivateApiContext'; -export const COLUMN_MENU_DEFAULT_COMPONENTS = { +export const GRID_COLUMN_MENU_DEFAULT_COMPONENTS = { ColumnMenuSortItem: GridColumnMenuSortItem, ColumnMenuFilterItem: GridColumnMenuFilterItem, ColumnMenuHideItem: GridColumnMenuHideItem, ColumnMenuColumnsItem: GridColumnMenuColumnsItem, }; -export const COLUMN_MENU_DEFAULT_COMPONENTS_PROPS = { +export const GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS = { ColumnMenuSortItem: { displayOrder: 0 }, ColumnMenuFilterItem: { displayOrder: 10 }, ColumnMenuHideItem: { displayOrder: 20 }, @@ -27,16 +27,20 @@ export const COLUMN_MENU_DEFAULT_COMPONENTS_PROPS = { const GridColumnMenuDefault = React.forwardRef( function GridColumnMenuDefault(props, ref) { const { - defaultComponents = COLUMN_MENU_DEFAULT_COMPONENTS, - defaultComponentsProps = COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, + defaultComponents = GRID_COLUMN_MENU_DEFAULT_COMPONENTS, + defaultComponentsProps = GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, + components, + componentsProps, ...other } = props; const apiRef = useGridPrivateApiContext(); - const orderedComponents = useGridColumnMenuPreProcessing(apiRef, { + const orderedComponents = useGridColumnMenuComponents(apiRef, { ...other, defaultComponents, defaultComponentsProps, + components, + componentsProps, }); return ( diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index f0320335f87a..58cd5a04414c 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useGridPrivateApiContext } from '../../../../hooks/utils/useGridPrivateApiContext'; -import { useGridColumnMenuPreProcessing } from '../../../../hooks/features/columnMenu/useGridColumnMenuPreProcessing'; +import { useGridColumnMenuComponents } from '../../../../hooks/features/columnMenu/useGridColumnMenuComponents'; import { GridColumnMenuSimpleContainer } from './GridColumnMenuSimpleContainer'; import { GridColumnMenuColumnsItemSimple } from './GridColumnMenuColumnsItemSimple'; import { GridColumnMenuFilterItemSimple } from './GridColumnMenuFilterItemSimple'; @@ -9,14 +9,14 @@ import { GridColumnMenuHideItemSimple } from './GridColumnMenuHideItemSimple'; import { GridColumnMenuSortItemSimple } from './GridColumnMenuSortItemSimple'; import { GridColumnMenuProps } from '../GridColumnMenuProps'; -export const COLUMN_MENU_SIMPLE_COMPONENTS = { +export const GRID_COLUMN_MENU_SIMPLE_COMPONENTS = { ColumnMenuSortItem: GridColumnMenuSortItemSimple, ColumnMenuFilterItem: GridColumnMenuFilterItemSimple, ColumnMenuHideItem: GridColumnMenuHideItemSimple, ColumnMenuColumnsItem: GridColumnMenuColumnsItemSimple, }; -export const COLUMN_MENU_SIMPLE_COMPONENTS_PROPS = { +export const GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS = { ColumnMenuSortItem: { displayOrder: 0 }, ColumnMenuFilterItem: { displayOrder: 10 }, ColumnMenuHideItem: { displayOrder: 20 }, @@ -26,17 +26,21 @@ export const COLUMN_MENU_SIMPLE_COMPONENTS_PROPS = { const GridColumnMenuSimple = React.forwardRef( function GridColumnMenuSimpleRoot(props, ref) { const { - defaultComponents = COLUMN_MENU_SIMPLE_COMPONENTS, - defaultComponentsProps = COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, + defaultComponents = GRID_COLUMN_MENU_SIMPLE_COMPONENTS, + defaultComponentsProps = GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, + components, + componentsProps, ...other } = props; const apiRef = useGridPrivateApiContext(); - const orderedComponents = useGridColumnMenuPreProcessing(apiRef, { + const orderedComponents = useGridColumnMenuComponents(apiRef, { ...other, defaultComponents, defaultComponentsProps, + components, + componentsProps, }); return ( diff --git a/packages/grid/x-data-grid/src/components/reexportable.ts b/packages/grid/x-data-grid/src/components/reexportable.ts index a8a0a0d6d93b..bf43e88ee729 100644 --- a/packages/grid/x-data-grid/src/components/reexportable.ts +++ b/packages/grid/x-data-grid/src/components/reexportable.ts @@ -1,10 +1,10 @@ export { GridColumnMenuDefault, - COLUMN_MENU_DEFAULT_COMPONENTS, - COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, } from './menu/columnMenu/default/GridColumnMenuDefault'; export { GridColumnMenuSimple, - COLUMN_MENU_SIMPLE_COMPONENTS, - COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, } from './menu/columnMenu/simple/GridColumnMenuSimple'; diff --git a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts index 6de11236825f..96a25a4a760b 100644 --- a/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts +++ b/packages/grid/x-data-grid/src/constants/defaultGridSlotsComponents.ts @@ -45,7 +45,7 @@ import { GridViewColumnIcon, GridClearIcon, } from '../components'; -import { GridColumnMenuDefault } from '../components/reexportable'; +import { GridColumnMenuDefault } from '../components/menu/columnMenu/default/GridColumnMenuDefault'; import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon'; import { GridErrorOverlay } from '../components/GridErrorOverlay'; import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay'; diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuPreProcessing.ts b/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts similarity index 67% rename from packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuPreProcessing.ts rename to packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts index c5ed3fa33924..34308d99c49d 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuPreProcessing.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts @@ -3,13 +3,13 @@ import { GridColumnMenuRootProps } from './columnMenuInterfaces'; import { GridColDef } from '../../../models/colDef/gridColDef'; import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; -interface GridColumnMenuPreProcessingProps extends GridColumnMenuRootProps { +interface GridColumnMenuComponentsProps extends GridColumnMenuRootProps { currentColumn: GridColDef; } -const useGridColumnMenuPreProcessing = ( +const useGridColumnMenuComponents = ( apiRef: React.MutableRefObject, - props: GridColumnMenuPreProcessingProps, + props: GridColumnMenuComponentsProps, ) => { const { defaultComponents, @@ -18,12 +18,12 @@ const useGridColumnMenuPreProcessing = ( componentsProps = {}, } = props; - const processedSlots = React.useMemo( + const processedComponents = React.useMemo( () => ({ ...defaultComponents, ...components }), [defaultComponents, components], ); - const processedSlotsProps = React.useMemo(() => { + const processedComponentsProps = React.useMemo(() => { if (!componentsProps || Object.keys(componentsProps).length === 0) { return defaultComponentsProps; } @@ -42,16 +42,16 @@ const useGridColumnMenuPreProcessing = ( return React.useMemo(() => { const sorted = preProcessedItems.sort( - (a, b) => processedSlotsProps[a].displayOrder - processedSlotsProps[b].displayOrder, + (a, b) => processedComponentsProps[a].displayOrder - processedComponentsProps[b].displayOrder, ); - // Future Enhancement, pass other `slotProps` to respective components if needed + // Future Enhancement, pass other `componentsProps` to respective components if needed return sorted.reduce[]>((acc, key) => { - if (!processedSlots[key]) { + if (!processedComponents[key]) { return acc; } - return [...acc, processedSlots[key]!]; + return [...acc, processedComponents[key]!]; }, []); - }, [preProcessedItems, processedSlots, processedSlotsProps]); + }, [preProcessedItems, processedComponents, processedComponentsProps]); }; -export { useGridColumnMenuPreProcessing }; +export { useGridColumnMenuComponents }; diff --git a/packages/grid/x-data-grid/src/index.ts b/packages/grid/x-data-grid/src/index.ts index d45dc29336cd..900d4c9962c1 100644 --- a/packages/grid/x-data-grid/src/index.ts +++ b/packages/grid/x-data-grid/src/index.ts @@ -25,11 +25,11 @@ export type { GridExportFormat, GridExportExtension } from './models/gridExport' */ export { GridColumnMenuDefault, - COLUMN_MENU_DEFAULT_COMPONENTS, - COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS, + GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, GridColumnMenuSimple, - COLUMN_MENU_SIMPLE_COMPONENTS, - COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS, + GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, } from './components/reexportable'; /** diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 81a2b9e86c9f..965cad25a06e 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -4,10 +4,6 @@ { "name": "AutoSizerSize", "kind": "Interface" }, { "name": "bgBG", "kind": "Variable" }, { "name": "checkGridRowIdIsValid", "kind": "Function" }, - { "name": "COLUMN_MENU_DEFAULT_COMPONENTS", "kind": "Variable" }, - { "name": "COLUMN_MENU_DEFAULT_COMPONENTS_PROPS", "kind": "Variable" }, - { "name": "COLUMN_MENU_SIMPLE_COMPONENTS", "kind": "Variable" }, - { "name": "COLUMN_MENU_SIMPLE_COMPONENTS_PROPS", "kind": "Variable" }, { "name": "ColumnHeaderFilterIconButtonProps", "kind": "Interface" }, { "name": "ColumnsStylesInterface", "kind": "Interface" }, { "name": "createUseGridApiEventHandler", "kind": "Function" }, @@ -55,6 +51,10 @@ { "name": "GRID_BOOLEAN_COL_DEF", "kind": "Variable" }, { "name": "GRID_CHECKBOX_SELECTION_COL_DEF", "kind": "Variable" }, { "name": "GRID_CHECKBOX_SELECTION_FIELD", "kind": "Variable" }, + { "name": "GRID_COLUMN_MENU_DEFAULT_COMPONENTS", "kind": "Variable" }, + { "name": "GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS", "kind": "Variable" }, + { "name": "GRID_COLUMN_MENU_SIMPLE_COMPONENTS", "kind": "Variable" }, + { "name": "GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS", "kind": "Variable" }, { "name": "GRID_DATE_COL_DEF", "kind": "Variable" }, { "name": "GRID_DATETIME_COL_DEF", "kind": "Variable" }, { "name": "GRID_DEFAULT_LOCALE_TEXT", "kind": "Variable" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index fbe71078cc47..ca483eeff8b6 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -4,10 +4,6 @@ { "name": "AutoSizerSize", "kind": "Interface" }, { "name": "bgBG", "kind": "Variable" }, { "name": "checkGridRowIdIsValid", "kind": "Function" }, - { "name": "COLUMN_MENU_DEFAULT_COMPONENTS", "kind": "Variable" }, - { "name": "COLUMN_MENU_DEFAULT_COMPONENTS_PROPS", "kind": "Variable" }, - { "name": "COLUMN_MENU_SIMPLE_COMPONENTS", "kind": "Variable" }, - { "name": "COLUMN_MENU_SIMPLE_COMPONENTS_PROPS", "kind": "Variable" }, { "name": "ColumnHeaderFilterIconButtonProps", "kind": "Interface" }, { "name": "createUseGridApiEventHandler", "kind": "Function" }, { "name": "csCZ", "kind": "Variable" }, @@ -49,6 +45,10 @@ { "name": "GRID_BOOLEAN_COL_DEF", "kind": "Variable" }, { "name": "GRID_CHECKBOX_SELECTION_COL_DEF", "kind": "Variable" }, { "name": "GRID_CHECKBOX_SELECTION_FIELD", "kind": "Variable" }, + { "name": "GRID_COLUMN_MENU_DEFAULT_COMPONENTS", "kind": "Variable" }, + { "name": "GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS", "kind": "Variable" }, + { "name": "GRID_COLUMN_MENU_SIMPLE_COMPONENTS", "kind": "Variable" }, + { "name": "GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS", "kind": "Variable" }, { "name": "GRID_DATE_COL_DEF", "kind": "Variable" }, { "name": "GRID_DATETIME_COL_DEF", "kind": "Variable" }, { "name": "GRID_DEFAULT_LOCALE_TEXT", "kind": "Variable" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 6e46a1d1f991..0446c688c79e 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -4,10 +4,6 @@ { "name": "AutoSizerSize", "kind": "Interface" }, { "name": "bgBG", "kind": "Variable" }, { "name": "checkGridRowIdIsValid", "kind": "Function" }, - { "name": "COLUMN_MENU_DEFAULT_COMPONENTS", "kind": "Variable" }, - { "name": "COLUMN_MENU_DEFAULT_COMPONENTS_PROPS", "kind": "Variable" }, - { "name": "COLUMN_MENU_SIMPLE_COMPONENTS", "kind": "Variable" }, - { "name": "COLUMN_MENU_SIMPLE_COMPONENTS_PROPS", "kind": "Variable" }, { "name": "ColumnHeaderFilterIconButtonProps", "kind": "Interface" }, { "name": "createUseGridApiEventHandler", "kind": "Function" }, { "name": "csCZ", "kind": "Variable" }, @@ -45,6 +41,10 @@ { "name": "GRID_BOOLEAN_COL_DEF", "kind": "Variable" }, { "name": "GRID_CHECKBOX_SELECTION_COL_DEF", "kind": "Variable" }, { "name": "GRID_CHECKBOX_SELECTION_FIELD", "kind": "Variable" }, + { "name": "GRID_COLUMN_MENU_DEFAULT_COMPONENTS", "kind": "Variable" }, + { "name": "GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS", "kind": "Variable" }, + { "name": "GRID_COLUMN_MENU_SIMPLE_COMPONENTS", "kind": "Variable" }, + { "name": "GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS", "kind": "Variable" }, { "name": "GRID_DATE_COL_DEF", "kind": "Variable" }, { "name": "GRID_DATETIME_COL_DEF", "kind": "Variable" }, { "name": "GRID_DEFAULT_LOCALE_TEXT", "kind": "Variable" }, From ab2cdad5fecec7ba363b2c34045dbc88abff5c74 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sat, 26 Nov 2022 19:04:11 +0500 Subject: [PATCH 049/104] Allows adding new items, passing props, updates docs and other changes --- .../column-menu/ReuseColumnMenuGrid.js | 28 ++++++- .../column-menu/ReuseColumnMenuGrid.tsx | 28 ++++++- .../data/data-grid/column-menu/column-menu.md | 74 ++++++++++++------- .../GridPremiumColumnMenuDefault.tsx | 4 +- .../GridPremiumColumnMenuSimple.tsx | 4 +- .../components/GridProColumnMenuDefault.tsx | 2 +- .../components/GridProColumnMenuSimple.tsx | 2 +- .../columnMenu/GridColumnMenuItemProps.ts | 3 + .../default/GridColumnMenuDefault.tsx | 23 ++++-- .../menu/columnMenu/default/index.ts | 2 +- .../simple/GridColumnMenuSimple.tsx | 28 +++++-- .../columnMenu/columnMenuInterfaces.ts | 21 ++++-- .../columnMenu/useGridColumnMenuComponents.ts | 45 ++++++++--- scripts/x-data-grid-premium.exports.json | 2 +- scripts/x-data-grid-pro.exports.json | 2 +- scripts/x-data-grid.exports.json | 2 +- 16 files changed, 196 insertions(+), 74 deletions(-) diff --git a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js index 3a7d407eab57..4b546b3e6520 100644 --- a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js @@ -2,6 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Button from '@mui/material/Button'; import IconFilter from '@mui/icons-material/FilterAlt'; +import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications'; import { DataGrid, GridColumnMenuDefault } from '@mui/x-data-grid'; import { useDemoData } from '@mui/x-data-grid-generator'; @@ -18,6 +19,19 @@ CustomFilterItem.propTypes = { onClick: PropTypes.func.isRequired, }; +function CustomUserItem(props) { + const { myCustomHandler, myCustomValue } = props; + return ( + + ); +} + function CustomColumnMenu(props) { return ( alert('Custom handler fired'), + }, }} + initialItems={['ColumnMenuUserItem']} /> ); } diff --git a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx index 4a09e165ece3..8493c4f83638 100644 --- a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx +++ b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import Button from '@mui/material/Button'; import IconFilter from '@mui/icons-material/FilterAlt'; +import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications'; import { DataGrid, GridColumnMenuDefault, @@ -18,6 +19,19 @@ function CustomFilterItem(props: GridColumnMenuItemProps) { ); } +function CustomUserItem(props: GridColumnMenuItemProps) { + const { myCustomHandler, myCustomValue } = props; + return ( + + ); +} + function CustomColumnMenu(props: GridColumnMenuProps) { return ( alert('Custom handler fired'), + }, }} + initialItems={['ColumnMenuUserItem']} /> ); } diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index 57e53d6fea1f..83d0e24f24ed 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -22,43 +22,67 @@ By default, each column header has the column menu enabled. To disable the colum ## Customize column menu -You can customize the column menu either by passing `components` and `componentsProps` to the column menu component or by using custom component using the `ColumnMenu` slot of the data grid component. +You can customize the column menu either by using `components`, `componentsProps` and `initialItems` supported by column menu component or by using custom component using the `ColumnMenu` slot of the data grid component. -### Override, hide and reorder items +### Add, override, hide and reorder items -Column menu component accept `components` and `componentsProps` using which you can: +Column menu component accept `components`, `componentsProps` and `initialItems` using which you can: +- Add new items - Override default items - Hide default items - Reorder items -**components**: Prop accepted by column menu components `` or ``, could be used to override default column menu components. - -```tsx - -``` +**components**: Prop accepted by column menu components `` or ``, could be used to override default column menu components or add new components. Default components supported by community package are `ColumnMenuSortItem`, `ColumnMenuFilterItem`, `ColumnMenuHideItem` and `ColumnMenuColumnsItem`. Pro package adds `ColumnMenuPinningItem` and Premium package adds `ColumnMenuAggregationItem` and `ColumnMenuGroupingItem`. -**componentsProps**: Every item has a `displayOrder` based which it will be placed before or after other items in the menu. It can be overriden using `componentsProps`. +**componentsProps**: Every item has a `displayOrder` based which it will be placed before or after other items in the menu. It can be overriden using `componentsProps`. You can also use this to pass extra props to column menu components. + +`componentsProps` for a component uses the same key but in _camelCase_. E.g for `ColumnMenuFilterItem`, the componentsProps key will be `columnMenuFilterItem`. + +**initialItems**: Visibility of default items is controlled using respective feature hooks, for cutom items though, use `initialItems` to show the items added by passing to `components`. All the new items will be placed in the end (default `displayOrder: 100`), unless customized by `displayOrder`. ```tsx - +function CustomColumnMenu(props: GridColumnMenuProps) { + return ( + alert('Custom handler fired'), + }, + }} + initialItems={['ColumnMenuUserItem']} + /> + ); +} ``` -Here is the default order for each of the items, there are some gaps to be able to place items in between: +{{"demo": "ReuseColumnMenuGrid.js", "bg": "inline"}} + +#### Display orders for default items: + +As a reference, here is the order for each of the default items, there are some gaps to be able to place items in between: | **Component** | **Package** | **Display order (default design)** | **Display order (simple design)** | | ------------------------- | ----------- | ---------------------------------: | --------------------------------: | @@ -70,10 +94,6 @@ Here is the default order for each of the items, there are some gaps to be able | ColumnMenuAggregationItem | Premium | 17 | 37 | | ColumnMenuGroupingItem | Premium | 13 | 33 | -In the following demo you can see some items being overriden or reordered. - -{{"demo": "ReuseColumnMenuGrid.js", "bg": "inline"}} - :::info **Tip:** To hide/remove a default item, you can simply pass the component in `components` as `null` ::: diff --git a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx index 4ebcb1a8cb55..2dee404785b9 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuDefault.tsx @@ -31,8 +31,8 @@ export const GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PREMIUM = { export const GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS_PREMIUM = { ...GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, - ColumnMenuAggregationItem: { displayOrder: 17 }, - ColumnMenuGroupingItem: { displayOrder: 13 }, + columnMenuAggregationItem: { displayOrder: 17 }, + columnMenuGroupingItem: { displayOrder: 13 }, }; const GridPremiumColumnMenuDefault = React.forwardRef( diff --git a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx index 902ea3e3b682..7730453568d3 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenuSimple.tsx @@ -51,8 +51,8 @@ export const GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PREMIUM = { export const GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS_PREMIUM = { ...GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, - ColumnMenuAggregationItem: { displayOrder: 37 }, - ColumnMenuGroupingItem: { displayOrder: 33 }, + columnMenuAggregationItem: { displayOrder: 37 }, + columnMenuGroupingItem: { displayOrder: 33 }, }; const GridPremiumColumnMenuSimple = React.forwardRef( diff --git a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx index 908349052e29..7a150f740251 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuDefault.tsx @@ -15,7 +15,7 @@ export const GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PRO = { export const GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS_PRO = { ...GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS, - ColumnMenuPinningItem: { displayOrder: 5 }, + columnMenuPinningItem: { displayOrder: 5 }, }; const GridProColumnMenuDefault = React.forwardRef( diff --git a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx index 83f2b921c02e..197c7dee0c61 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridProColumnMenuSimple.tsx @@ -26,7 +26,7 @@ export const GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PRO = { export const GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS_PRO = { ...GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS, - ColumnMenuPinningItem: { + columnMenuPinningItem: { displayOrder: 35, }, }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuItemProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuItemProps.ts index f6cc31dd24ff..0630346eeaf5 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuItemProps.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuItemProps.ts @@ -2,6 +2,9 @@ import * as React from 'react'; import { GridColDef } from '../../../models/colDef/gridColDef'; export interface GridColumnMenuItemProps { + // Native Props column: GridColDef; onClick: (event: React.MouseEvent) => void; + // User Props + [key: string]: any; } diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx index e7e1fed65d45..5fcda2bfd244 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx @@ -18,10 +18,10 @@ export const GRID_COLUMN_MENU_DEFAULT_COMPONENTS = { }; export const GRID_COLUMN_MENU_DEFAULT_COMPONENTS_PROPS = { - ColumnMenuSortItem: { displayOrder: 0 }, - ColumnMenuFilterItem: { displayOrder: 10 }, - ColumnMenuHideItem: { displayOrder: 20 }, - ColumnMenuColumnsItem: { displayOrder: 30 }, + columnMenuSortItem: { displayOrder: 0 }, + columnMenuFilterItem: { displayOrder: 10 }, + columnMenuHideItem: { displayOrder: 20 }, + columnMenuColumnsItem: { displayOrder: 30 }, }; const GridColumnMenuDefault = React.forwardRef( @@ -45,9 +45,9 @@ const GridColumnMenuDefault = React.forwardRef - {orderedComponents.map((Component, index: number) => ( + {orderedComponents.map(([Component, extraProps], index: number) => (
- + {index !== orderedComponents.length - 1 ? : null}
))} @@ -62,11 +62,13 @@ GridColumnMenuDefault.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- /** - * `components` could be used to override default column menu items + * `components` could be used to add new and (or) override default column menu items + * If you register a nee component you must pass it's `displayOrder` in `componentsProps` + * or it will be placed in the end of the list */ components: PropTypes.object, /** - * Could be used to override props specific to a column menu component + * Could be used to pass new props or override props specific to a column menu component * e.g. `displayOrder` */ componentsProps: PropTypes.object, @@ -83,6 +85,11 @@ GridColumnMenuDefault.propTypes = { defaultComponentsProps: PropTypes.object, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, + /** + * To initialize column menu with some custom components use `initialItems` + * Use custom components added with `components` prop here + */ + initialItems: PropTypes.arrayOf(PropTypes.string), labelledby: PropTypes.string, open: PropTypes.bool.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts index 4a70e6848c77..ed0df33fc990 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts @@ -6,4 +6,4 @@ export * from './GridColumnMenuSortItem'; // components export * from './GridColumnMenuDefaultContainer'; -// gridColumnMenuSlots & GridColumnMenuDefault exported from `./index.ts` to be able to reexported +// GridColumnMenuDefault exported from `./index.ts` to be able to reexported diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index 58cd5a04414c..fd8763e17238 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -17,10 +17,10 @@ export const GRID_COLUMN_MENU_SIMPLE_COMPONENTS = { }; export const GRID_COLUMN_MENU_SIMPLE_COMPONENTS_PROPS = { - ColumnMenuSortItem: { displayOrder: 0 }, - ColumnMenuFilterItem: { displayOrder: 10 }, - ColumnMenuHideItem: { displayOrder: 20 }, - ColumnMenuColumnsItem: { displayOrder: 30 }, + columnMenuSortItem: { displayOrder: 0 }, + columnMenuFilterItem: { displayOrder: 10 }, + columnMenuHideItem: { displayOrder: 20 }, + columnMenuColumnsItem: { displayOrder: 30 }, }; const GridColumnMenuSimple = React.forwardRef( @@ -45,8 +45,13 @@ const GridColumnMenuSimple = React.forwardRef - {orderedComponents.map((Component, index) => ( - + {orderedComponents.map(([Component, extraProps], index) => ( + ))} ); @@ -59,11 +64,13 @@ GridColumnMenuSimple.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- /** - * `components` could be used to override default column menu items + * `components` could be used to add new and (or) override default column menu items + * If you register a nee component you must pass it's `displayOrder` in `componentsProps` + * or it will be placed in the end of the list */ components: PropTypes.object, /** - * Could be used to override props specific to a column menu component + * Could be used to pass new props or override props specific to a column menu component * e.g. `displayOrder` */ componentsProps: PropTypes.object, @@ -80,6 +87,11 @@ GridColumnMenuSimple.propTypes = { defaultComponentsProps: PropTypes.object, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, + /** + * To initialize column menu with some custom components use `initialItems` + * Use custom components added with `components` prop here + */ + initialItems: PropTypes.arrayOf(PropTypes.string), labelledby: PropTypes.string, open: PropTypes.bool.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts index 09f877cc50b7..8e3428290b1e 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts @@ -5,14 +5,16 @@ export interface GridColumnMenuState { field?: string; } -export interface GridColumnMenuSlotProps { +export interface GridColumnMenuComponentProps { /** * Every item has a `displayOrder` based which it will be placed before or after other * items in the column menu, `array.prototype.sort` is applied to sort the items. * Note: If same `displayOrder` is applied to two or more items they will be sorted * based on the definition order + * @default 100 */ - displayOrder: number; + displayOrder?: number; + [key: string]: any; } export type GridColumnMenuValue = Array>; @@ -27,14 +29,21 @@ export interface GridColumnMenuRootProps { * Initial `componentsProps` - it is internal, to be overrriden by Pro or Premium packages * @ignore - do not document. */ - defaultComponentsProps: { [key: string]: GridColumnMenuSlotProps }; + defaultComponentsProps: { [key: string]: GridColumnMenuComponentProps }; /** - * `components` could be used to override default column menu items + * `components` could be used to add new and (or) override default column menu items + * If you register a nee component you must pass it's `displayOrder` in `componentsProps` + * or it will be placed in the end of the list */ components?: { [key: string]: React.JSXElementConstructor | null }; /** - * Could be used to override props specific to a column menu component + * Could be used to pass new props or override props specific to a column menu component * e.g. `displayOrder` */ - componentsProps?: { [key: string]: GridColumnMenuSlotProps }; + componentsProps?: { [key: string]: GridColumnMenuComponentProps }; + /** + * To initialize column menu with some custom components use `initialItems` + * Use custom components added with `components` prop here + */ + initialItems?: Array; } diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts b/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts index 34308d99c49d..dbc067d5e579 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts @@ -3,19 +3,30 @@ import { GridColumnMenuRootProps } from './columnMenuInterfaces'; import { GridColDef } from '../../../models/colDef/gridColDef'; import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; -interface GridColumnMenuComponentsProps extends GridColumnMenuRootProps { +interface UseGridColumnMenuComponentsProps extends GridColumnMenuRootProps { currentColumn: GridColDef; } +type UseGridColumnMenuComponentsResponse = Array< + [React.JSXElementConstructor, { [key: string]: any }] +>; + +const camelize = (pascalCase: string) => { + const camelCase = pascalCase.split(''); + camelCase[0] = camelCase[0].toLowerCase(); + return camelCase.join(''); +}; + const useGridColumnMenuComponents = ( apiRef: React.MutableRefObject, - props: GridColumnMenuComponentsProps, + props: UseGridColumnMenuComponentsProps, ) => { const { defaultComponents, defaultComponentsProps, components = {}, componentsProps = {}, + initialItems = [], } = props; const processedComponents = React.useMemo( @@ -27,7 +38,7 @@ const useGridColumnMenuComponents = ( if (!componentsProps || Object.keys(componentsProps).length === 0) { return defaultComponentsProps; } - const mergedProps = {} as typeof defaultComponentsProps; + const mergedProps = { ...componentsProps } as typeof defaultComponentsProps; Object.entries(defaultComponentsProps).forEach(([key, currentComponentProps]) => { mergedProps[key] = { ...currentComponentProps, ...(componentsProps[key] || {}) }; }); @@ -36,20 +47,32 @@ const useGridColumnMenuComponents = ( const preProcessedItems = apiRef.current.unstable_applyPipeProcessors( 'columnMenu', - [], + initialItems, props.currentColumn, ); return React.useMemo(() => { - const sorted = preProcessedItems.sort( - (a, b) => processedComponentsProps[a].displayOrder - processedComponentsProps[b].displayOrder, - ); - // Future Enhancement, pass other `componentsProps` to respective components if needed - return sorted.reduce[]>((acc, key) => { - if (!processedComponents[key]) { + const sorted = preProcessedItems.sort((a, b) => { + const leftItemProps = processedComponentsProps[camelize(a)]; + const rightItemProps = processedComponentsProps[camelize(b)]; + const leftDisplayOrder = Number.isFinite(leftItemProps?.displayOrder) + ? leftItemProps.displayOrder + : 100; + const rightDisplayOrder = Number.isFinite(rightItemProps?.displayOrder) + ? rightItemProps.displayOrder + : 100; + return leftDisplayOrder! - rightDisplayOrder!; + }); + return sorted.reduce((acc, key) => { + if (processedComponents[key] == null) { return acc; } - return [...acc, processedComponents[key]!]; + const processedComponentProps = processedComponentsProps[camelize(key)] || {}; + if (processedComponentProps) { + const { displayOrder, ...customProps } = processedComponentProps; + return [...acc, [processedComponents[key]!, customProps]]; + } + return [...acc, [processedComponents[key]!, {}]]; }, []); }, [preProcessedItems, processedComponents, processedComponentsProps]); }; diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 965cad25a06e..d22511c052b8 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -171,6 +171,7 @@ { "name": "GridColumnMenuApi", "kind": "Interface" }, { "name": "GridColumnMenuColumnsItem", "kind": "Function" }, { "name": "GridColumnMenuColumnsItemSimple", "kind": "Function" }, + { "name": "GridColumnMenuComponentProps", "kind": "Interface" }, { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, { "name": "GridColumnMenuDefault", "kind": "Variable" }, { "name": "GridColumnMenuDefaultContainer", "kind": "Variable" }, @@ -190,7 +191,6 @@ { "name": "gridColumnMenuSelector", "kind": "Variable" }, { "name": "GridColumnMenuSimple", "kind": "Variable" }, { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, - { "name": "GridColumnMenuSlotProps", "kind": "Interface" }, { "name": "GridColumnMenuSortItem", "kind": "Function" }, { "name": "GridColumnMenuSortItemSimple", "kind": "Function" }, { "name": "GridColumnMenuState", "kind": "Interface" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index ca483eeff8b6..d8c16f079f02 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -146,6 +146,7 @@ { "name": "GridColumnMenuApi", "kind": "Interface" }, { "name": "GridColumnMenuColumnsItem", "kind": "Function" }, { "name": "GridColumnMenuColumnsItemSimple", "kind": "Function" }, + { "name": "GridColumnMenuComponentProps", "kind": "Interface" }, { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, { "name": "GridColumnMenuDefault", "kind": "Variable" }, { "name": "GridColumnMenuDefaultContainer", "kind": "Variable" }, @@ -161,7 +162,6 @@ { "name": "gridColumnMenuSelector", "kind": "Variable" }, { "name": "GridColumnMenuSimple", "kind": "Variable" }, { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, - { "name": "GridColumnMenuSlotProps", "kind": "Interface" }, { "name": "GridColumnMenuSortItem", "kind": "Function" }, { "name": "GridColumnMenuSortItemSimple", "kind": "Function" }, { "name": "GridColumnMenuState", "kind": "Interface" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 0446c688c79e..86423c7707fc 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -138,6 +138,7 @@ { "name": "GridColumnMenuApi", "kind": "Interface" }, { "name": "GridColumnMenuColumnsItem", "kind": "Function" }, { "name": "GridColumnMenuColumnsItemSimple", "kind": "Function" }, + { "name": "GridColumnMenuComponentProps", "kind": "Interface" }, { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, { "name": "GridColumnMenuDefault", "kind": "Variable" }, { "name": "GridColumnMenuDefaultContainer", "kind": "Variable" }, @@ -151,7 +152,6 @@ { "name": "gridColumnMenuSelector", "kind": "Variable" }, { "name": "GridColumnMenuSimple", "kind": "Variable" }, { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, - { "name": "GridColumnMenuSlotProps", "kind": "Interface" }, { "name": "GridColumnMenuSortItem", "kind": "Function" }, { "name": "GridColumnMenuSortItemSimple", "kind": "Function" }, { "name": "GridColumnMenuState", "kind": "Interface" }, From 8b0021f5e2f6b44ae5e2376ac3296d9e3fd19adf Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sat, 26 Nov 2022 21:41:44 +0500 Subject: [PATCH 050/104] Removes trailing semi-colon --- docs/data/data-grid/column-menu/column-menu.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index 83d0e24f24ed..cab46341c2ea 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -80,7 +80,7 @@ function CustomColumnMenu(props: GridColumnMenuProps) { {{"demo": "ReuseColumnMenuGrid.js", "bg": "inline"}} -#### Display orders for default items: +#### Display orders for default items As a reference, here is the order for each of the default items, there are some gaps to be able to place items in between: From 741f09e29e09dc5beb2d0d9f42af7845cfef1b7f Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Sat, 26 Nov 2022 22:56:51 +0500 Subject: [PATCH 051/104] Applies vale' suggestion --- docs/data/data-grid/column-menu/column-menu.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index cab46341c2ea..f30e46bd0aa6 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -100,7 +100,7 @@ As a reference, here is the order for each of the default items, there are some ### Custom component -To customize even more like adding custom items you can opt not to use the column menu component exposed by us and pass a totally new column menu component using `ColumnMenu` grid slot. +To customize even more like adding custom items you can opt not to use the default column menu component and pass a totally new column menu component using `ColumnMenu` grid slot. {{"demo": "CustomColumnMenuGrid.js", "bg": "inline"}} From 99f57f5f426e191c0d4d45a5d9ba9b3aab5990e7 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 29 Nov 2022 11:15:13 +0500 Subject: [PATCH 052/104] Apply suggestions from code review Co-authored-by: Andrew Cherniavskii Co-authored-by: Matheus Wichman Signed-off-by: Bilal Shafi --- docs/data/data-grid/column-menu/column-menu.md | 14 ++++++++------ .../menu/columnMenu/GridColumnMenuProps.ts | 1 + .../default/GridColumnMenuDefaultContainer.tsx | 2 +- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index f30e46bd0aa6..4329faec8351 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -10,7 +10,7 @@ title: Data Grid - Column menu Each column header comes with a column menu with quickly accessible grid features like column visibility, sorting, filtering, and others. -It can be accessed by clicking on 3-dots icon that appear on hover on a header cell. +It can be accessed by clicking on the 3-dots icon that appears on hover on a header cell. {{"demo": "ColumnMenuGrid.js", "bg": "inline"}} @@ -22,7 +22,7 @@ By default, each column header has the column menu enabled. To disable the colum ## Customize column menu -You can customize the column menu either by using `components`, `componentsProps` and `initialItems` supported by column menu component or by using custom component using the `ColumnMenu` slot of the data grid component. +You can customize the column menu either by passing `components`, `componentsProps`, and `initialItems` props to the column menu component or by [passing a custom component to the `ColumnMenu` slot](/x/react-data-grid/components/#overriding-components) of the data grid component. ### Add, override, hide and reorder items @@ -39,7 +39,9 @@ Default components supported by community package are `ColumnMenuSortItem`, `Col **componentsProps**: Every item has a `displayOrder` based which it will be placed before or after other items in the menu. It can be overriden using `componentsProps`. You can also use this to pass extra props to column menu components. -`componentsProps` for a component uses the same key but in _camelCase_. E.g for `ColumnMenuFilterItem`, the componentsProps key will be `columnMenuFilterItem`. +:::warning +The `components` prop uses Pascal case (`ColumnMenuFilterItem`), while `componentsProps` uses camel case (`columnMenuFilterItem`). +::: **initialItems**: Visibility of default items is controlled using respective feature hooks, for cutom items though, use `initialItems` to show the items added by passing to `components`. All the new items will be placed in the end (default `displayOrder: 100`), unless customized by `displayOrder`. @@ -100,7 +102,7 @@ As a reference, here is the order for each of the default items, there are some ### Custom component -To customize even more like adding custom items you can opt not to use the default column menu component and pass a totally new column menu component using `ColumnMenu` grid slot. +You can override the default column menu component and pass a custom column menu component using the `ColumnMenu` grid slot. {{"demo": "CustomColumnMenuGrid.js", "bg": "inline"}} @@ -121,13 +123,13 @@ Here's the list of default available items for each package and column menu desi ## Column menu with Pro/Premium options [](/x/introduction/licensing/#pro-plan)[](/x/introduction/licensing/#premium-plan) -You can access commercial features like column pinning etc from the column menu when using `DataGridPro` or `DataGridPremium`. +When using `DataGridPro` or `DataGridPremium` components, the column menu contains additional menu items related to Pro and Premium features: {{"demo": "ColumnMenuGridPremium.js", "bg": "inline"}} ## Simple column menu -You can replace the default column menu with a simplified one using `GridColumnMenuSimple` component. +You can replace the default column menu with a simplified one using the `GridColumnMenuSimple` component. {{"demo": "SimpleColumnMenuGrid.js", "bg": "inline"}} diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts index a57e2f4da10d..0761ebcb0a1a 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts @@ -9,6 +9,7 @@ export interface GridColumnMenuContainerProps extends React.HTMLAttributes, GridColumnMenuContainerProps {} diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefaultContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefaultContainer.tsx index 7aa2b2616dc4..dee04d8dd2d0 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefaultContainer.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefaultContainer.tsx @@ -10,7 +10,7 @@ import { gridClasses } from '../../../../constants/gridClasses'; const StyledMenuList = styled(MenuList)(({ theme }) => ({ display: 'flex', flexDirection: 'column', - minWidth: theme.typography.pxToRem(248), + minWidth: 248, })); const GridColumnMenuDefaultContainer = React.forwardRef< From a7adc86082dd90f0659d8e527213b0c1fd326314 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 29 Nov 2022 12:44:38 +0500 Subject: [PATCH 053/104] Resolves some comments --- .../column-menu/ReuseColumnMenuGrid.js | 2 +- .../column-menu/ReuseColumnMenuGrid.tsx | 15 +++- .../data/data-grid/column-menu/column-menu.md | 8 +-- .../DisableColumnPinningButtons.js | 6 +- .../DisableColumnPinningButtons.tsx | 6 +- .../data-grid/components/CustomColumnMenu.js | 4 +- .../data-grid/components/CustomColumnMenu.tsx | 4 +- docs/data/data-grid/components/components.md | 4 +- .../migration-data-grid-v5.md | 1 - .../components/GridColumnMenuPinningItem.tsx | 4 +- .../columnMenu/GridColumnMenuContainer.tsx | 71 +++++++++++++++++++ .../menu/columnMenu/GridColumnMenuProps.ts | 3 +- .../default/GridColumnMenuDefault.tsx | 20 +++--- .../GridColumnMenuDefaultContainer.tsx | 61 ---------------- .../default/GridColumnMenuHideItem.tsx | 2 +- .../default/GridColumnMenuSortItem.tsx | 4 +- .../menu/columnMenu/default/index.ts | 4 -- .../src/components/menu/columnMenu/index.ts | 1 + .../simple/GridColumnMenuSimple.tsx | 22 +++--- .../simple/GridColumnMenuSimpleContainer.tsx | 54 -------------- .../menu/columnMenu/simple/index.ts | 6 +- .../src/constants/localeTextConstants.ts | 11 ++- .../columnMenu/columnMenuInterfaces.ts | 4 +- .../columnMenu/useGridColumnMenuComponents.ts | 15 ++-- packages/grid/x-data-grid/src/locales/arSD.ts | 11 ++- packages/grid/x-data-grid/src/locales/bgBG.ts | 11 ++- packages/grid/x-data-grid/src/locales/csCZ.ts | 11 ++- packages/grid/x-data-grid/src/locales/daDK.ts | 11 ++- packages/grid/x-data-grid/src/locales/deDE.ts | 11 ++- packages/grid/x-data-grid/src/locales/elGR.ts | 11 ++- packages/grid/x-data-grid/src/locales/esES.ts | 11 ++- packages/grid/x-data-grid/src/locales/faIR.ts | 11 ++- packages/grid/x-data-grid/src/locales/fiFI.ts | 11 ++- packages/grid/x-data-grid/src/locales/frFR.ts | 11 ++- packages/grid/x-data-grid/src/locales/heIL.ts | 11 ++- packages/grid/x-data-grid/src/locales/huHU.ts | 11 ++- packages/grid/x-data-grid/src/locales/itIT.ts | 11 ++- packages/grid/x-data-grid/src/locales/jaJP.ts | 11 ++- packages/grid/x-data-grid/src/locales/koKR.ts | 11 ++- packages/grid/x-data-grid/src/locales/nbNO.ts | 11 ++- packages/grid/x-data-grid/src/locales/nlNL.ts | 11 ++- packages/grid/x-data-grid/src/locales/plPL.ts | 11 ++- packages/grid/x-data-grid/src/locales/ptBR.ts | 11 ++- packages/grid/x-data-grid/src/locales/roRO.ts | 11 ++- packages/grid/x-data-grid/src/locales/ruRU.ts | 11 ++- packages/grid/x-data-grid/src/locales/skSK.ts | 11 ++- packages/grid/x-data-grid/src/locales/svSE.ts | 11 ++- packages/grid/x-data-grid/src/locales/trTR.ts | 11 ++- packages/grid/x-data-grid/src/locales/ukUA.ts | 11 ++- packages/grid/x-data-grid/src/locales/viVN.ts | 11 ++- packages/grid/x-data-grid/src/locales/zhCN.ts | 11 ++- packages/grid/x-data-grid/src/locales/zhTW.ts | 11 ++- .../src/models/api/gridLocaleTextApi.ts | 9 ++- scripts/x-data-grid-premium.exports.json | 3 +- scripts/x-data-grid-pro.exports.json | 3 +- scripts/x-data-grid.exports.json | 3 +- 56 files changed, 289 insertions(+), 369 deletions(-) create mode 100644 packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx delete mode 100644 packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefaultContainer.tsx delete mode 100644 packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx diff --git a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js index 4b546b3e6520..79048878db13 100644 --- a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js @@ -60,7 +60,7 @@ function CustomColumnMenu(props) { myCustomHandler: () => alert('Custom handler fired'), }, }} - initialItems={['ColumnMenuUserItem']} + customItems={['ColumnMenuUserItem']} /> ); } diff --git a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx index 8493c4f83638..6146257de628 100644 --- a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx +++ b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx @@ -7,13 +7,22 @@ import { GridColumnMenuDefault, GridColumnMenuProps, GridColumnMenuItemProps, + useGridApiContext, } from '@mui/x-data-grid'; import { useDemoData } from '@mui/x-data-grid-generator'; function CustomFilterItem(props: GridColumnMenuItemProps) { - const { onClick } = props; + const { onClick, column } = props; + const apiRef = useGridApiContext(); + const handleClick = React.useCallback( + (event: React.MouseEvent) => { + apiRef.current.showFilterPanel(column.field); + onClick(event); + }, + [apiRef, column.field, onClick], + ); return ( - ); @@ -60,7 +69,7 @@ function CustomColumnMenu(props: GridColumnMenuProps) { myCustomHandler: () => alert('Custom handler fired'), }, }} - initialItems={['ColumnMenuUserItem']} + customItems={['ColumnMenuUserItem']} /> ); } diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index 4329faec8351..047ef16c7683 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -22,11 +22,11 @@ By default, each column header has the column menu enabled. To disable the colum ## Customize column menu -You can customize the column menu either by passing `components`, `componentsProps`, and `initialItems` props to the column menu component or by [passing a custom component to the `ColumnMenu` slot](/x/react-data-grid/components/#overriding-components) of the data grid component. +You can customize the column menu either by passing `components`, `componentsProps`, and `customItems` props to the column menu component or by [passing a custom component to the `ColumnMenu` slot](/x/react-data-grid/components/#overriding-components) of the data grid component. ### Add, override, hide and reorder items -Column menu component accept `components`, `componentsProps` and `initialItems` using which you can: +Column menu component accept `components`, `componentsProps` and `customItems` using which you can: - Add new items - Override default items @@ -43,7 +43,7 @@ Default components supported by community package are `ColumnMenuSortItem`, `Col The `components` prop uses Pascal case (`ColumnMenuFilterItem`), while `componentsProps` uses camel case (`columnMenuFilterItem`). ::: -**initialItems**: Visibility of default items is controlled using respective feature hooks, for cutom items though, use `initialItems` to show the items added by passing to `components`. All the new items will be placed in the end (default `displayOrder: 100`), unless customized by `displayOrder`. +**customItems**: Visibility of default items is controlled using respective feature hooks, for custom items though, use `customItems` to show the items added by passing to `components`. All the new items will be placed in the end (default `displayOrder: 100`), unless customized by `displayOrder`. ```tsx function CustomColumnMenu(props: GridColumnMenuProps) { @@ -74,7 +74,7 @@ function CustomColumnMenu(props: GridColumnMenuProps) { myCustomHandler: () => alert('Custom handler fired'), }, }} - initialItems={['ColumnMenuUserItem']} + customItems={['ColumnMenuUserItem']} /> ); } diff --git a/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.js b/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.js index dbc0613832e5..c6c6ce82d1fa 100644 --- a/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.js +++ b/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { DataGridPro, - GridColumnMenuDefaultContainer, + GridColumnMenuContainer, GridColumnMenuSortItem, GridColumnMenuHideItem, GridColumnMenuColumnsItem, @@ -19,7 +19,7 @@ function CustomColumnMenu(props) { const { hideMenu, currentColumn, color, ...other } = props; return ( - - + ); } diff --git a/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.tsx b/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.tsx index 4bd8971ba51e..10839c3757e5 100644 --- a/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.tsx +++ b/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.tsx @@ -3,7 +3,7 @@ import { DataGridPro, GridColumns, GridRowsProp, - GridColumnMenuDefaultContainer, + GridColumnMenuContainer, GridColumnMenuSortItem, GridColumnMenuHideItem, GridColumnMenuColumnsItem, @@ -21,7 +21,7 @@ export function CustomColumnMenu(props: GridColumnMenuProps) { const { hideMenu, currentColumn, color, ...other } = props; return ( - - + ); } diff --git a/docs/data/data-grid/components/CustomColumnMenu.js b/docs/data/data-grid/components/CustomColumnMenu.js index a85937f892ce..29e6003a892c 100644 --- a/docs/data/data-grid/components/CustomColumnMenu.js +++ b/docs/data/data-grid/components/CustomColumnMenu.js @@ -5,7 +5,7 @@ import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import { GridColumnMenuDefault, - GridColumnMenuDefaultContainer, + GridColumnMenuContainer, GridColumnMenuFilterItem, GridColumnMenuSortItem, useGridApiRef, @@ -13,7 +13,7 @@ import { } from '@mui/x-data-grid-pro'; import StarOutlineIcon from '@mui/icons-material/StarOutline'; -const StyledGridColumnMenuContainer = styled(GridColumnMenuDefaultContainer)( +const StyledGridColumnMenuContainer = styled(GridColumnMenuContainer)( ({ theme, ownerState }) => ({ background: theme.palette[ownerState.color].main, }), diff --git a/docs/data/data-grid/components/CustomColumnMenu.tsx b/docs/data/data-grid/components/CustomColumnMenu.tsx index 6394e6e22bde..b8dc0bb47f30 100644 --- a/docs/data/data-grid/components/CustomColumnMenu.tsx +++ b/docs/data/data-grid/components/CustomColumnMenu.tsx @@ -4,7 +4,7 @@ import { styled, Theme } from '@mui/material/styles'; import Button from '@mui/material/Button'; import { GridColumnMenuDefault, - GridColumnMenuDefaultContainer, + GridColumnMenuContainer, GridColumnMenuProps, GridColumnMenuFilterItem, GridColumnMenuSortItem, @@ -18,7 +18,7 @@ type OwnerState = { color: PaletteColorKey; }; -const StyledGridColumnMenuContainer = styled(GridColumnMenuDefaultContainer)<{ +const StyledGridColumnMenuContainer = styled(GridColumnMenuContainer)<{ ownerState: OwnerState; }>(({ theme, ownerState }: { theme: Theme; ownerState: OwnerState }) => ({ background: theme.palette[ownerState.color].main, diff --git a/docs/data/data-grid/components/components.md b/docs/data/data-grid/components/components.md index 33189c0fe8a7..12a0d56e26f1 100644 --- a/docs/data/data-grid/components/components.md +++ b/docs/data/data-grid/components/components.md @@ -74,12 +74,12 @@ export const GridColumnMenu = React.forwardRef< const { hideMenu, currentColumn } = props; return ( - + - + ); }); ``` diff --git a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md index 8d6c9ae1c5f7..88a7791916b9 100644 --- a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md +++ b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md @@ -63,7 +63,6 @@ Below are described the steps you need to make to migrate from v5 to v6. ### Column menu - The `GridColumnMenu` component was renamed to `GridColumnMenuDefault` with the new column menu design. For previous design, use `GridColumnMenuSimple`. -- The `GridColumnMenuContainer` component was renamed to `GridColumnMenuDefaultContainer` with the new column menu design. For previous design, use `GridColumnMenuSimpleContainer`. - The column menu items `GridFilterMenuItem`, `HideGridColMenuItem`, `GridColumnsMenuItem`, `SortGridMenuItems` have been renamed to `GridColumnMenuFilterItem`, `GridColumnMenuHideItem`, `GridColumnMenuColumnsItem`, `SortGridMenuItems`. - `GridFilterItemProps` has been renamed to `GridColumnMenuItemProps`. - The column menu items for Pro and Premium packages `GridColumnPinningMenuItems`, `GridAggregationColumnMenuItem`, `GridRowGroupingColumnMenuItems` and `GridRowGroupableColumnMenuItems` have been renamed to `GridColumnMenuPinningItem`, `GridColumnMenuAggregationItem`, `GridColumnMenuRowGroupItem` and `GridColumnMenuRowUngroupItem` respectively. diff --git a/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx b/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx index 130a91e3c57d..f3275c8f2850 100644 --- a/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx +++ b/packages/grid/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx @@ -53,7 +53,7 @@ function GridColumnMenuPinningItem(props: GridColumnMenuItemProps) { startIcon={} color={side === GridPinnedPosition.left ? 'primary' : 'inherit'} > - {apiRef.current.getLocaleText('pinToLeftDefault')} + {apiRef.current.getLocaleText('directionLeft')} } color={side === GridPinnedPosition.right ? 'primary' : 'inherit'} > - {apiRef.current.getLocaleText('pinToRightDefault')} + {apiRef.current.getLocaleText('directionRight')} diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx new file mode 100644 index 000000000000..3824af952c72 --- /dev/null +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx @@ -0,0 +1,71 @@ +import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import * as React from 'react'; +import MenuList from '@mui/material/MenuList'; +import { styled } from '@mui/material/styles'; +import { isHideMenuKey, isTabKey } from '../../../utils/keyboardUtils'; +import { GridColumnMenuContainerProps } from './GridColumnMenuProps'; +import { gridClasses } from '../../../constants/gridClasses'; + +const StyledMenuList = styled(MenuList)(() => ({ + display: 'flex', + flexDirection: 'column', + minWidth: 248, +})); + +const GridColumnMenuContainer = React.forwardRef( + function GridColumnMenuContainer(props, ref) { + const { + MenuListComponent = StyledMenuList, + hideMenu, + currentColumn, + id, + labelledby, + className, + children, + open, + ...other + } = props; + + const handleListKeyDown = React.useCallback( + (event: React.KeyboardEvent) => { + if (isTabKey(event.key)) { + event.preventDefault(); + } + if (isHideMenuKey(event.key)) { + hideMenu(event); + } + }, + [hideMenu], + ); + + return ( + + {children} + + ); + }, +); + +GridColumnMenuContainer.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + currentColumn: PropTypes.object.isRequired, + hideMenu: PropTypes.func.isRequired, + id: PropTypes.string, + labelledby: PropTypes.string, + MenuListComponent: PropTypes.elementType, + open: PropTypes.bool.isRequired, +} as any; + +export { GridColumnMenuContainer }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts index 0761ebcb0a1a..70382b72a95a 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuProps.ts @@ -8,8 +8,9 @@ export interface GridColumnMenuContainerProps extends React.HTMLAttributes; } export interface GridColumnMenuProps extends Partial, - GridColumnMenuContainerProps {} + Omit {} diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx index 5fcda2bfd244..6f303fc4bba7 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx @@ -2,13 +2,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Divider from '@mui/material/Divider'; import { useGridColumnMenuComponents } from '../../../../hooks/features/columnMenu/useGridColumnMenuComponents'; -import { GridColumnMenuDefaultContainer } from './GridColumnMenuDefaultContainer'; +import { GridColumnMenuContainer } from '../GridColumnMenuContainer'; import { GridColumnMenuProps } from '../GridColumnMenuProps'; import { GridColumnMenuColumnsItem } from './GridColumnMenuColumnsItem'; import { GridColumnMenuFilterItem } from './GridColumnMenuFilterItem'; import { GridColumnMenuHideItem } from './GridColumnMenuHideItem'; import { GridColumnMenuSortItem } from './GridColumnMenuSortItem'; -import { useGridPrivateApiContext } from '../../../../hooks/utils/useGridPrivateApiContext'; export const GRID_COLUMN_MENU_DEFAULT_COMPONENTS = { ColumnMenuSortItem: GridColumnMenuSortItem, @@ -33,9 +32,8 @@ const GridColumnMenuDefault = React.forwardRef + {orderedComponents.map(([Component, extraProps], index: number) => (
{index !== orderedComponents.length - 1 ? : null}
))} - + ); }, ); @@ -73,6 +71,11 @@ GridColumnMenuDefault.propTypes = { */ componentsProps: PropTypes.object, currentColumn: PropTypes.object.isRequired, + /** + * To initialize column menu with some custom components use `customItems` + * Use custom components added with `components` prop here + */ + customItems: PropTypes.arrayOf(PropTypes.string), /** * Initial `components` - it is internal, to be overrriden by Pro or Premium packages * @ignore - do not document. @@ -85,11 +88,6 @@ GridColumnMenuDefault.propTypes = { defaultComponentsProps: PropTypes.object, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, - /** - * To initialize column menu with some custom components use `initialItems` - * Use custom components added with `components` prop here - */ - initialItems: PropTypes.arrayOf(PropTypes.string), labelledby: PropTypes.string, open: PropTypes.bool.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefaultContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefaultContainer.tsx deleted file mode 100644 index dee04d8dd2d0..000000000000 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefaultContainer.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import clsx from 'clsx'; -import PropTypes from 'prop-types'; -import * as React from 'react'; -import MenuList from '@mui/material/MenuList'; -import { styled } from '@mui/material/styles'; -import { isHideMenuKey, isTabKey } from '../../../../utils/keyboardUtils'; -import { GridColumnMenuContainerProps } from '../GridColumnMenuProps'; -import { gridClasses } from '../../../../constants/gridClasses'; - -const StyledMenuList = styled(MenuList)(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - minWidth: 248, -})); - -const GridColumnMenuDefaultContainer = React.forwardRef< - HTMLUListElement, - GridColumnMenuContainerProps ->(function GridColumnMenuDefaultContainer(props, ref) { - const { hideMenu, currentColumn, id, labelledby, className, children, open, ...other } = props; - - const handleListKeyDown = React.useCallback( - (event: React.KeyboardEvent) => { - if (isTabKey(event.key)) { - event.preventDefault(); - } - if (isHideMenuKey(event.key)) { - hideMenu(event); - } - }, - [hideMenu], - ); - - return ( - - {children} - - ); -}); - -GridColumnMenuDefaultContainer.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - currentColumn: PropTypes.object.isRequired, - hideMenu: PropTypes.func.isRequired, - id: PropTypes.string, - labelledby: PropTypes.string, - open: PropTypes.bool.isRequired, -} as any; - -export { GridColumnMenuDefaultContainer }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuHideItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuHideItem.tsx index db79b47237ec..c555fedbeeb3 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuHideItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuHideItem.tsx @@ -70,7 +70,7 @@ function GridColumnMenuHideItem(props: GridColumnMenuItemProps) { startIcon={} color="inherit" > - {apiRef.current.getLocaleText('columnMenuHideColumnDefault')} + {apiRef.current.getLocaleText('columnMenuHideColumn')} ); diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuSortItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuSortItem.tsx index 6fa0b3e1c247..aefac6f91557 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuSortItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuSortItem.tsx @@ -61,7 +61,7 @@ function GridColumnMenuSortItem(props: GridColumnMenuItemProps) { startIcon={} color={sortDirection === 'asc' ? 'primary' : 'inherit'} > - {apiRef.current.getLocaleText('columnMenuSortDefaultAsc')} + {apiRef.current.getLocaleText('columnMenuSortAscAbbrev')} } color={sortDirection === 'desc' ? 'primary' : 'inherit'} > - {apiRef.current.getLocaleText('columnMenuSortDefaultDesc')} + {apiRef.current.getLocaleText('columnMenuSortDescAbbrev')} diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts index ed0df33fc990..6895102123b8 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/index.ts @@ -1,9 +1,5 @@ -// items export * from './GridColumnMenuColumnsItem'; export * from './GridColumnMenuFilterItem'; export * from './GridColumnMenuHideItem'; export * from './GridColumnMenuSortItem'; - -// components -export * from './GridColumnMenuDefaultContainer'; // GridColumnMenuDefault exported from `./index.ts` to be able to reexported diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts index 0a40a9f85c2a..68826fba346d 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/index.ts @@ -2,6 +2,7 @@ export * from './GridColumnHeaderMenu'; export * from './GridColumnMenuProps'; export * from './GridColumnMenuItemProps'; +export * from './GridColumnMenuContainer'; // default one export * from './default'; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index fd8763e17238..328f821ecb60 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { useGridPrivateApiContext } from '../../../../hooks/utils/useGridPrivateApiContext'; +import MenuList from '@mui/material/MenuList'; import { useGridColumnMenuComponents } from '../../../../hooks/features/columnMenu/useGridColumnMenuComponents'; -import { GridColumnMenuSimpleContainer } from './GridColumnMenuSimpleContainer'; +import { GridColumnMenuContainer } from '../GridColumnMenuContainer'; import { GridColumnMenuColumnsItemSimple } from './GridColumnMenuColumnsItemSimple'; import { GridColumnMenuFilterItemSimple } from './GridColumnMenuFilterItemSimple'; import { GridColumnMenuHideItemSimple } from './GridColumnMenuHideItemSimple'; @@ -33,9 +33,7 @@ const GridColumnMenuSimple = React.forwardRef + {orderedComponents.map(([Component, extraProps], index) => ( ))} - + ); }, ); @@ -75,6 +73,11 @@ GridColumnMenuSimple.propTypes = { */ componentsProps: PropTypes.object, currentColumn: PropTypes.object.isRequired, + /** + * To initialize column menu with some custom components use `customItems` + * Use custom components added with `components` prop here + */ + customItems: PropTypes.arrayOf(PropTypes.string), /** * Initial `components` - it is internal, to be overrriden by Pro or Premium packages * @ignore - do not document. @@ -87,11 +90,6 @@ GridColumnMenuSimple.propTypes = { defaultComponentsProps: PropTypes.object, hideMenu: PropTypes.func.isRequired, id: PropTypes.string, - /** - * To initialize column menu with some custom components use `initialItems` - * Use custom components added with `components` prop here - */ - initialItems: PropTypes.arrayOf(PropTypes.string), labelledby: PropTypes.string, open: PropTypes.bool.isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx deleted file mode 100644 index efe01298734c..000000000000 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimpleContainer.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import clsx from 'clsx'; -import PropTypes from 'prop-types'; -import * as React from 'react'; -import MenuList from '@mui/material/MenuList'; -import { isHideMenuKey, isTabKey } from '../../../../utils/keyboardUtils'; -import { GridColumnMenuContainerProps } from '../GridColumnMenuProps'; -import { gridClasses } from '../../../../constants/gridClasses'; - -const GridColumnMenuSimpleContainer = React.forwardRef< - HTMLUListElement, - GridColumnMenuContainerProps ->(function GridColumnMenuSimpleContainer(props, ref) { - const { hideMenu, currentColumn, open, id, labelledby, className, children, ...other } = props; - - const handleListKeyDown = React.useCallback( - (event: React.KeyboardEvent) => { - if (isTabKey(event.key)) { - event.preventDefault(); - } - if (isHideMenuKey(event.key)) { - hideMenu(event); - } - }, - [hideMenu], - ); - - return ( - - {children} - - ); -}); - -GridColumnMenuSimpleContainer.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - currentColumn: PropTypes.object.isRequired, - hideMenu: PropTypes.func.isRequired, - id: PropTypes.string, - labelledby: PropTypes.string, - open: PropTypes.bool.isRequired, -} as any; - -export { GridColumnMenuSimpleContainer }; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts index 72066a8fd968..6648f225d253 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/index.ts @@ -1,9 +1,5 @@ -// items export * from './GridColumnMenuColumnsItemSimple'; export * from './GridColumnMenuFilterItemSimple'; export * from './GridColumnMenuHideItemSimple'; export * from './GridColumnMenuSortItemSimple'; - -// components -export * from './GridColumnMenuSimpleContainer'; -// gridColumnMenuSimpleSlots & GridColumnMenuSimple exported from `./index.ts` to be able to reexported +// GridColumnMenuSimple exported from `./index.ts` to be able to reexported diff --git a/packages/grid/x-data-grid/src/constants/localeTextConstants.ts b/packages/grid/x-data-grid/src/constants/localeTextConstants.ts index e8b8c849f1a2..251cedcf1422 100644 --- a/packages/grid/x-data-grid/src/constants/localeTextConstants.ts +++ b/packages/grid/x-data-grid/src/constants/localeTextConstants.ts @@ -80,13 +80,12 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = { columnMenuShowColumns: 'Show columns', columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filter', - columnMenuHideColumn: 'Hide', - columnMenuHideColumnDefault: 'Hide column', + columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Unsort', columnMenuSortAsc: 'Sort by ASC', columnMenuSortDesc: 'Sort by DESC', - columnMenuSortDefaultAsc: 'ASC', - columnMenuSortDefaultDesc: 'DESC', + columnMenuSortAscAbbrev: 'ASC', + columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -124,8 +123,8 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = { // Column pinning text pinToLeft: 'Pin to left', pinToRight: 'Pin to right', - pinToLeftDefault: 'Left', - pinToRightDefault: 'Right', + directionLeft: 'Left', + directionRight: 'Right', unpin: 'Unpin', // Tree Data diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts index 8e3428290b1e..f995b5e5dd30 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts @@ -42,8 +42,8 @@ export interface GridColumnMenuRootProps { */ componentsProps?: { [key: string]: GridColumnMenuComponentProps }; /** - * To initialize column menu with some custom components use `initialItems` + * To initialize column menu with some custom components use `customItems` * Use custom components added with `components` prop here */ - initialItems?: Array; + customItems?: Array; } diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts b/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts index dbc067d5e579..acc50ce81ef6 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { GridColumnMenuRootProps } from './columnMenuInterfaces'; import { GridColDef } from '../../../models/colDef/gridColDef'; -import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; +import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext'; interface UseGridColumnMenuComponentsProps extends GridColumnMenuRootProps { currentColumn: GridColDef; @@ -17,16 +17,14 @@ const camelize = (pascalCase: string) => { return camelCase.join(''); }; -const useGridColumnMenuComponents = ( - apiRef: React.MutableRefObject, - props: UseGridColumnMenuComponentsProps, -) => { +const useGridColumnMenuComponents = (props: UseGridColumnMenuComponentsProps) => { + const apiRef = useGridPrivateApiContext(); const { defaultComponents, defaultComponentsProps, components = {}, componentsProps = {}, - initialItems = [], + customItems = [], } = props; const processedComponents = React.useMemo( @@ -47,12 +45,13 @@ const useGridColumnMenuComponents = ( const preProcessedItems = apiRef.current.unstable_applyPipeProcessors( 'columnMenu', - initialItems, + customItems, props.currentColumn, ); return React.useMemo(() => { - const sorted = preProcessedItems.sort((a, b) => { + const uniqueItems = Array.from(new Set(preProcessedItems)); + const sorted = uniqueItems.sort((a, b) => { const leftItemProps = processedComponentsProps[camelize(a)]; const rightItemProps = processedComponentsProps[camelize(b)]; const leftDisplayOrder = Number.isFinite(leftItemProps?.displayOrder) diff --git a/packages/grid/x-data-grid/src/locales/arSD.ts b/packages/grid/x-data-grid/src/locales/arSD.ts index 341a86ad783a..3ea2bb34fc28 100644 --- a/packages/grid/x-data-grid/src/locales/arSD.ts +++ b/packages/grid/x-data-grid/src/locales/arSD.ts @@ -84,13 +84,12 @@ const arSDGrid: Partial = { columnMenuShowColumns: 'إظهار الأعمدة', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'المرشِح', - columnMenuHideColumn: 'إخفاء', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'الغاء الفرز', columnMenuSortAsc: 'الفرز تصاعدياً', columnMenuSortDesc: 'الفرز تنازلياً', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -126,8 +125,8 @@ const arSDGrid: Partial = { // Column pinning text pinToLeft: 'التدبيس يميناً', pinToRight: 'التدبيس يساراً', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'الغاء التدبيس', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/bgBG.ts b/packages/grid/x-data-grid/src/locales/bgBG.ts index 7cd77103f636..2a587f961aec 100644 --- a/packages/grid/x-data-grid/src/locales/bgBG.ts +++ b/packages/grid/x-data-grid/src/locales/bgBG.ts @@ -83,13 +83,12 @@ const bgBGGrid: Partial = { columnMenuShowColumns: 'Покажи колоните', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Филтри', - columnMenuHideColumn: 'Скрий', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Отмени сортирането', columnMenuSortAsc: 'Сортирай по възходящ ред', columnMenuSortDesc: 'Сортирай по низходящ ред', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => `${count} активни филтри`, @@ -126,8 +125,8 @@ const bgBGGrid: Partial = { // Column pinning text pinToLeft: 'Закачи в ляво', pinToRight: 'Закачи в дясно', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Откачи', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/csCZ.ts b/packages/grid/x-data-grid/src/locales/csCZ.ts index e7f2fe539886..177fa013909a 100644 --- a/packages/grid/x-data-grid/src/locales/csCZ.ts +++ b/packages/grid/x-data-grid/src/locales/csCZ.ts @@ -91,13 +91,12 @@ const csCZGrid: Partial = { columnMenuShowColumns: 'Zobrazit sloupce', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtr', - columnMenuHideColumn: 'Skrýt', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Zrušit filtry', columnMenuSortAsc: 'Seřadit vzestupně', columnMenuSortDesc: 'Seřadit sestupně', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => { @@ -154,8 +153,8 @@ const csCZGrid: Partial = { // Column pinning text pinToLeft: 'Připnout na levo', pinToRight: 'Připnout na pravo', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Odepnout', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/daDK.ts b/packages/grid/x-data-grid/src/locales/daDK.ts index 76837274356c..50d2ccaa83e1 100644 --- a/packages/grid/x-data-grid/src/locales/daDK.ts +++ b/packages/grid/x-data-grid/src/locales/daDK.ts @@ -84,13 +84,12 @@ const daDKGrid: Partial = { columnMenuShowColumns: 'Vis Kolonner', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtre', - columnMenuHideColumn: 'Skjul', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Fjern sortering', columnMenuSortAsc: 'Sorter stigende', columnMenuSortDesc: 'Sorter faldende', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -126,8 +125,8 @@ const daDKGrid: Partial = { // Column pinning text pinToLeft: 'Fastgør til venstre', pinToRight: 'Fastgør til højre', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Frigiv', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/deDE.ts b/packages/grid/x-data-grid/src/locales/deDE.ts index 87792ef88eee..36ebcb833132 100644 --- a/packages/grid/x-data-grid/src/locales/deDE.ts +++ b/packages/grid/x-data-grid/src/locales/deDE.ts @@ -84,13 +84,12 @@ const deDEGrid: Partial = { columnMenuShowColumns: 'Zeige alle Spalten', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filter', - columnMenuHideColumn: 'Verbergen', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Sortierung deaktivieren', columnMenuSortAsc: 'Sortiere aufsteigend', columnMenuSortDesc: 'Sortiere absteigend', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -128,8 +127,8 @@ const deDEGrid: Partial = { // Column pinning text pinToLeft: 'Links anheften', pinToRight: 'Rechts anheften', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Loslösen', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/elGR.ts b/packages/grid/x-data-grid/src/locales/elGR.ts index 86975f39ca5f..39c7d1b07e4f 100644 --- a/packages/grid/x-data-grid/src/locales/elGR.ts +++ b/packages/grid/x-data-grid/src/locales/elGR.ts @@ -83,13 +83,12 @@ const elGRGrid: Partial = { columnMenuShowColumns: 'Εμφάνιση στηλών', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Φίλτρο', - columnMenuHideColumn: 'Απόκρυψη', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Απενεργοποίηση ταξινόμησης', columnMenuSortAsc: 'Ταξινόμηση σε αύξουσα σειρά', columnMenuSortDesc: 'Ταξινόμηση σε φθίνουσα σειρά', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -127,8 +126,8 @@ const elGRGrid: Partial = { // Column pinning text // pinToLeft: 'Pin to left', // pinToRight: 'Pin to right', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', // unpin: 'Unpin', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/esES.ts b/packages/grid/x-data-grid/src/locales/esES.ts index d7ae50c501fb..80537b12bdb3 100644 --- a/packages/grid/x-data-grid/src/locales/esES.ts +++ b/packages/grid/x-data-grid/src/locales/esES.ts @@ -84,13 +84,12 @@ const esESGrid: Partial = { columnMenuShowColumns: 'Mostrar columnas', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtro', - columnMenuHideColumn: 'Ocultar', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Desordenar', columnMenuSortAsc: 'Ordenar ASC', columnMenuSortDesc: 'Ordenar DESC', - columnMenuSortDefaultAsc: 'ASC', - columnMenuSortDefaultDesc: 'DESC', + columnMenuSortAscAbbrev: 'ASC', + columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -128,8 +127,8 @@ const esESGrid: Partial = { // Column pinning text // pinToLeft: 'Pin to left', // pinToRight: 'Pin to right', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', // unpin: 'Unpin', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/faIR.ts b/packages/grid/x-data-grid/src/locales/faIR.ts index a45a0ccead90..51e2ba59b9c4 100644 --- a/packages/grid/x-data-grid/src/locales/faIR.ts +++ b/packages/grid/x-data-grid/src/locales/faIR.ts @@ -84,13 +84,12 @@ const faIRGrid: Partial = { columnMenuShowColumns: 'نمایش ستون‌ها', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'فیلتر', - columnMenuHideColumn: 'مخفی', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'نامرتب‌کردن', columnMenuSortAsc: 'مرتب‌کردن صعودی', columnMenuSortDesc: 'مرتب‌کردن نزولی', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -128,8 +127,8 @@ const faIRGrid: Partial = { // Column pinning text pinToLeft: 'سنجاق کردن به چپ', pinToRight: 'سنجاق کردن به راست', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'برداشتن سنجاق', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/fiFI.ts b/packages/grid/x-data-grid/src/locales/fiFI.ts index 83eae58f872f..d84c2125d2f2 100644 --- a/packages/grid/x-data-grid/src/locales/fiFI.ts +++ b/packages/grid/x-data-grid/src/locales/fiFI.ts @@ -84,13 +84,12 @@ const fiFIGrid: Partial = { columnMenuShowColumns: 'Näytä sarakkeet', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Suodata', - columnMenuHideColumn: 'Piilota', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Poista järjestys', columnMenuSortAsc: 'Järjestä nousevasti', columnMenuSortDesc: 'Järjestä laskevasti', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -128,8 +127,8 @@ const fiFIGrid: Partial = { // Column pinning text pinToLeft: 'Kiinnitä vasemmalle', pinToRight: 'Kiinnitä oikealle', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Irrota kiinnitys', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/frFR.ts b/packages/grid/x-data-grid/src/locales/frFR.ts index 4da5328d4f75..a0a088b2c261 100644 --- a/packages/grid/x-data-grid/src/locales/frFR.ts +++ b/packages/grid/x-data-grid/src/locales/frFR.ts @@ -84,13 +84,12 @@ const frFRGrid: Partial = { columnMenuShowColumns: 'Afficher les colonnes', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtrer', - columnMenuHideColumn: 'Cacher', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Annuler le tri', columnMenuSortAsc: 'Tri ascendant', columnMenuSortDesc: 'Tri descendant', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -128,8 +127,8 @@ const frFRGrid: Partial = { // Column pinning text pinToLeft: 'Épingler à gauche', pinToRight: 'Épingler à droite', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Désépingler', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/heIL.ts b/packages/grid/x-data-grid/src/locales/heIL.ts index 2fa2c23a9e6b..11d7596793f5 100644 --- a/packages/grid/x-data-grid/src/locales/heIL.ts +++ b/packages/grid/x-data-grid/src/locales/heIL.ts @@ -84,13 +84,12 @@ const heILGrid: Partial = { columnMenuShowColumns: 'הצג עמודות', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'סנן', - columnMenuHideColumn: 'הסתר', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'בטל מיון', columnMenuSortAsc: 'מיין בסדר עולה', columnMenuSortDesc: 'מיין בסדר יורד', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -126,8 +125,8 @@ const heILGrid: Partial = { // Column pinning text pinToLeft: 'נעץ משמאל', pinToRight: 'נעץ מימין', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'בטל נעיצה', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/huHU.ts b/packages/grid/x-data-grid/src/locales/huHU.ts index 94c5d7ffc0aa..fb64229fc31e 100644 --- a/packages/grid/x-data-grid/src/locales/huHU.ts +++ b/packages/grid/x-data-grid/src/locales/huHU.ts @@ -83,13 +83,12 @@ const huHUGrid: Partial = { columnMenuShowColumns: 'Oszlopok megjelenítése', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Szűrők', - columnMenuHideColumn: 'Elrejtés', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Sorrend visszaállítása', columnMenuSortAsc: 'Növekvő sorrendbe', columnMenuSortDesc: 'Csökkenő sorrendbe', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => `${count} aktív szűrő`, @@ -123,8 +122,8 @@ const huHUGrid: Partial = { // Column pinning text pinToLeft: 'Rögzítés balra', pinToRight: 'Rögzítés jobbra', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Rögzítés törlése', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/itIT.ts b/packages/grid/x-data-grid/src/locales/itIT.ts index d9d28249e698..4217a21b57f8 100644 --- a/packages/grid/x-data-grid/src/locales/itIT.ts +++ b/packages/grid/x-data-grid/src/locales/itIT.ts @@ -84,13 +84,12 @@ const itITGrid: Partial = { columnMenuShowColumns: 'Mostra le colonne', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtra', - columnMenuHideColumn: 'Nascondi', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: "Annulla l'ordinamento", columnMenuSortAsc: 'Ordinamento crescente', columnMenuSortDesc: 'Ordinamento decrescente', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -128,8 +127,8 @@ const itITGrid: Partial = { // Column pinning text pinToLeft: 'Blocca a sinistra', pinToRight: 'Blocca a destra', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Sblocca', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/jaJP.ts b/packages/grid/x-data-grid/src/locales/jaJP.ts index 65049a6f6079..5b55dc79e415 100644 --- a/packages/grid/x-data-grid/src/locales/jaJP.ts +++ b/packages/grid/x-data-grid/src/locales/jaJP.ts @@ -83,13 +83,12 @@ const jaJPGrid: Partial = { columnMenuShowColumns: '列表示', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'フィルター', - columnMenuHideColumn: '列非表示', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'ソート解除', columnMenuSortAsc: '昇順ソート', columnMenuSortDesc: '降順ソート', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => `${count}件のフィルターを適用中`, @@ -123,8 +122,8 @@ const jaJPGrid: Partial = { // Column pinning text pinToLeft: '左側に固定', pinToRight: '右側に固定', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: '固定解除', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/koKR.ts b/packages/grid/x-data-grid/src/locales/koKR.ts index 68faf90ad96e..c2e8521ef4dc 100644 --- a/packages/grid/x-data-grid/src/locales/koKR.ts +++ b/packages/grid/x-data-grid/src/locales/koKR.ts @@ -83,13 +83,12 @@ const koKRGrid: Partial = { columnMenuShowColumns: '열 표시', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: '필터', - columnMenuHideColumn: '열 숨기기', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: '정렬 해제', columnMenuSortAsc: '오름차순 정렬', columnMenuSortDesc: '내림차순 정렬', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => `${count}건의 필터를 적용중`, @@ -123,8 +122,8 @@ const koKRGrid: Partial = { // Column pinning text pinToLeft: '왼쪽에 고정', pinToRight: '오른쪽에 고정', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: '고정 해제', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/nbNO.ts b/packages/grid/x-data-grid/src/locales/nbNO.ts index 7baf134df70b..f02e560d8bbb 100644 --- a/packages/grid/x-data-grid/src/locales/nbNO.ts +++ b/packages/grid/x-data-grid/src/locales/nbNO.ts @@ -84,13 +84,12 @@ const nbNOGrid: Partial = { columnMenuShowColumns: 'Vis kolonner', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filter', - columnMenuHideColumn: 'Skjul', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Usorter', columnMenuSortAsc: 'Sorter ØKENDE', columnMenuSortDesc: 'Sorter SYNKENDE', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -126,8 +125,8 @@ const nbNOGrid: Partial = { // Column pinning text pinToLeft: 'Fest til venstre', pinToRight: 'Fest til høyre', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Løsne', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/nlNL.ts b/packages/grid/x-data-grid/src/locales/nlNL.ts index 1476a39a9b49..8b0e7a5994e3 100644 --- a/packages/grid/x-data-grid/src/locales/nlNL.ts +++ b/packages/grid/x-data-grid/src/locales/nlNL.ts @@ -84,13 +84,12 @@ const nlNLGrid: Partial = { columnMenuShowColumns: 'Toon kolommen', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filteren', - columnMenuHideColumn: 'Verbergen', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Annuleer sortering', columnMenuSortAsc: 'Oplopend sorteren', columnMenuSortDesc: 'Aflopend sorteren', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -128,8 +127,8 @@ const nlNLGrid: Partial = { // Column pinning text pinToLeft: 'Links vastzetten', pinToRight: 'Rechts vastzetten', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Losmaken', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/plPL.ts b/packages/grid/x-data-grid/src/locales/plPL.ts index 9478df3a3ee5..630e936935e1 100644 --- a/packages/grid/x-data-grid/src/locales/plPL.ts +++ b/packages/grid/x-data-grid/src/locales/plPL.ts @@ -83,13 +83,12 @@ const plPLGrid: Partial = { columnMenuShowColumns: 'Pokaż wszystkie kolumny', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtr', - columnMenuHideColumn: 'Ukryj', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Anuluj sortowanie', columnMenuSortAsc: 'Sortuj rosnąco', columnMenuSortDesc: 'Sortuj malejąco', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => `Liczba aktywnych filtrów: ${count}`, @@ -123,8 +122,8 @@ const plPLGrid: Partial = { // Column pinning text pinToLeft: 'Przypnij do lewej', pinToRight: 'Przypnij do prawej', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Odepnij', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/ptBR.ts b/packages/grid/x-data-grid/src/locales/ptBR.ts index 4bb10658e4c6..6285bead99f9 100644 --- a/packages/grid/x-data-grid/src/locales/ptBR.ts +++ b/packages/grid/x-data-grid/src/locales/ptBR.ts @@ -84,13 +84,12 @@ const ptBRGrid: Partial = { columnMenuShowColumns: 'Exibir colunas', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtrar', - columnMenuHideColumn: 'Ocultar', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Desfazer ordenação', columnMenuSortAsc: 'Ordenar do menor para o maior', columnMenuSortDesc: 'Ordenar do maior para o menor', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -128,8 +127,8 @@ const ptBRGrid: Partial = { // Column pinning text pinToLeft: 'Fixar à esquerda', pinToRight: 'Fixar à direita', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Desafixar', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/roRO.ts b/packages/grid/x-data-grid/src/locales/roRO.ts index 7b45f458d640..5a7705053bd1 100644 --- a/packages/grid/x-data-grid/src/locales/roRO.ts +++ b/packages/grid/x-data-grid/src/locales/roRO.ts @@ -84,13 +84,12 @@ const roROGrid: Partial = { columnMenuShowColumns: 'Afișează toate coloanele', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtru', - columnMenuHideColumn: 'Ascunde', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Dezactivare sortare', columnMenuSortAsc: 'Sortează crescător', columnMenuSortDesc: 'Sortează descrescător', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -128,8 +127,8 @@ const roROGrid: Partial = { // Column pinning text pinToLeft: 'Fixare în stânga', pinToRight: 'Fixare în dreapta', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Anulare fixare', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/ruRU.ts b/packages/grid/x-data-grid/src/locales/ruRU.ts index dd7855ee332a..f22c77124ea8 100644 --- a/packages/grid/x-data-grid/src/locales/ruRU.ts +++ b/packages/grid/x-data-grid/src/locales/ruRU.ts @@ -92,13 +92,12 @@ const ruRUGrid: Partial = { columnMenuShowColumns: 'Показать столбцы', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Фильтр', - columnMenuHideColumn: 'Скрыть', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Отменить сортировку', columnMenuSortAsc: 'Сортировать по возрастанию', columnMenuSortDesc: 'Сортировать по убыванию', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => { @@ -150,8 +149,8 @@ const ruRUGrid: Partial = { // Column pinning text pinToLeft: 'Закрепить слева', pinToRight: 'Закрепить справа', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Открепить', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/skSK.ts b/packages/grid/x-data-grid/src/locales/skSK.ts index 5b9755064330..791faafaeaee 100644 --- a/packages/grid/x-data-grid/src/locales/skSK.ts +++ b/packages/grid/x-data-grid/src/locales/skSK.ts @@ -91,13 +91,12 @@ const skSKGrid: Partial = { columnMenuShowColumns: 'Zobraziť stĺpce', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filter', - columnMenuHideColumn: 'Skryť', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Zrušiť filtre', columnMenuSortAsc: 'Zoradiť vzostupne', columnMenuSortDesc: 'Zoradiť zostupne', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => { @@ -154,8 +153,8 @@ const skSKGrid: Partial = { // Column pinning text pinToLeft: 'Pripnúť na ľavo', pinToRight: 'Pripnúť na pravo', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Odopnúť', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/svSE.ts b/packages/grid/x-data-grid/src/locales/svSE.ts index 89e83fa8c9c4..a1693f5a3d29 100644 --- a/packages/grid/x-data-grid/src/locales/svSE.ts +++ b/packages/grid/x-data-grid/src/locales/svSE.ts @@ -84,13 +84,12 @@ const svSEGrid: Partial = { columnMenuShowColumns: 'Visa kolumner', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtrera', - columnMenuHideColumn: 'Dölj', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Osortera', columnMenuSortAsc: 'Sortera stigande', columnMenuSortDesc: 'Sortera fallande', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -128,8 +127,8 @@ const svSEGrid: Partial = { // Column pinning text pinToLeft: 'Fäst till vänster', pinToRight: 'Fäst till höger', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Ta bort fäste', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/trTR.ts b/packages/grid/x-data-grid/src/locales/trTR.ts index 06b1e488ce7e..ba183d5e2963 100644 --- a/packages/grid/x-data-grid/src/locales/trTR.ts +++ b/packages/grid/x-data-grid/src/locales/trTR.ts @@ -83,13 +83,12 @@ const trTRGrid: Partial = { columnMenuShowColumns: 'Sütunları göster', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Filtre uygula', - columnMenuHideColumn: 'Gizle', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Sıralama', columnMenuSortAsc: 'Sırala - Artan', columnMenuSortDesc: 'Sırala - Azalan', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => `${count} filtre aktif`, @@ -123,8 +122,8 @@ const trTRGrid: Partial = { // Column pinning text pinToLeft: 'Sola sabitle', pinToRight: 'Sağa sabitle', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Sabitlemeyi kaldır', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/ukUA.ts b/packages/grid/x-data-grid/src/locales/ukUA.ts index 46a371606b18..edabefc4c362 100644 --- a/packages/grid/x-data-grid/src/locales/ukUA.ts +++ b/packages/grid/x-data-grid/src/locales/ukUA.ts @@ -107,13 +107,12 @@ const ukUAGrid: Partial = { columnMenuShowColumns: 'Показати стовпці', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Фільтр', - columnMenuHideColumn: 'Приховати', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Скасувати сортування', columnMenuSortAsc: 'Сортувати за зростанням', columnMenuSortDesc: 'Сортувати за спаданням', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -157,8 +156,8 @@ const ukUAGrid: Partial = { // Column pinning text pinToLeft: 'Закріпити ліворуч', pinToRight: 'Закріпити праворуч', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Відкріпити', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/viVN.ts b/packages/grid/x-data-grid/src/locales/viVN.ts index ec29b48f2eac..cd9421fdc44a 100644 --- a/packages/grid/x-data-grid/src/locales/viVN.ts +++ b/packages/grid/x-data-grid/src/locales/viVN.ts @@ -84,13 +84,12 @@ const viVNGrid: Partial = { columnMenuShowColumns: 'Danh sách cột', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: 'Bộ lọc', - columnMenuHideColumn: 'Ẩn cột', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: 'Bỏ sắp xếp', columnMenuSortAsc: 'Sắp xếp tăng dần', columnMenuSortDesc: 'Sắp xếp giảm dần', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -126,8 +125,8 @@ const viVNGrid: Partial = { // Column pinning text pinToLeft: 'Ghim cột bên trái', pinToRight: 'Ghim cột bên phải', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: 'Bỏ ghim', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/zhCN.ts b/packages/grid/x-data-grid/src/locales/zhCN.ts index 0ead3d0d19be..7f120a0034b3 100644 --- a/packages/grid/x-data-grid/src/locales/zhCN.ts +++ b/packages/grid/x-data-grid/src/locales/zhCN.ts @@ -83,13 +83,12 @@ const zhCNGrid: Partial = { columnMenuShowColumns: '显示', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: '筛选器', - columnMenuHideColumn: '隐藏', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: '恢复默认', columnMenuSortAsc: '升序', columnMenuSortDesc: '降序', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => @@ -124,8 +123,8 @@ const zhCNGrid: Partial = { // Column pinning text pinToLeft: '固定到左侧', pinToRight: '固定到右侧', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: '取消固定', // Tree Data diff --git a/packages/grid/x-data-grid/src/locales/zhTW.ts b/packages/grid/x-data-grid/src/locales/zhTW.ts index 7d7803f0b8a3..8494b4539872 100644 --- a/packages/grid/x-data-grid/src/locales/zhTW.ts +++ b/packages/grid/x-data-grid/src/locales/zhTW.ts @@ -83,13 +83,12 @@ const zhTWGrid: Partial = { columnMenuShowColumns: '顯示欄位', // columnMenuManageColumns: 'Manage columns', columnMenuFilter: '篩選器', - columnMenuHideColumn: '隱藏', - // columnMenuHideColumnDefault: 'Hide column', + // columnMenuHideColumn: 'Hide column', columnMenuUnsort: '預設排序', columnMenuSortAsc: '升序', columnMenuSortDesc: '降序', - // columnMenuSortDefaultAsc: 'ASC', - // columnMenuSortDefaultDesc: 'DESC', + // columnMenuSortAscAbbrev: 'ASC', + // columnMenuSortDescAbbrev: 'DESC', // Column header text columnHeaderFiltersTooltipActive: (count) => `${count} 個篩選器`, @@ -123,8 +122,8 @@ const zhTWGrid: Partial = { // Column pinning text pinToLeft: '釘選在左側', pinToRight: '釘選在右側', - // pinToLeftDefault: 'Left', - // pinToRightDefault: 'Right', + // directionLeft: 'Left', + // directionRight: 'Right', unpin: '取消釘選', // Tree Data diff --git a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts index 21229bb10ad2..dd5ebdc10f84 100644 --- a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts +++ b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts @@ -84,12 +84,11 @@ export interface GridLocaleText { columnMenuManageColumns: React.ReactNode; columnMenuFilter: React.ReactNode; columnMenuHideColumn: React.ReactNode; - columnMenuHideColumnDefault: React.ReactNode; columnMenuUnsort: React.ReactNode; columnMenuSortAsc: React.ReactNode; columnMenuSortDesc: React.ReactNode; - columnMenuSortDefaultAsc: React.ReactNode; - columnMenuSortDefaultDesc: React.ReactNode; + columnMenuSortAscAbbrev: React.ReactNode; + columnMenuSortDescAbbrev: React.ReactNode; // Column header text columnHeaderFiltersTooltipActive: (count: number) => React.ReactNode; @@ -121,9 +120,9 @@ export interface GridLocaleText { // Column pinning text pinToLeft: string; - pinToLeftDefault: string; + directionLeft: string; pinToRight: string; - pinToRightDefault: string; + directionRight: string; unpin: string; // Tree Data diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index d22511c052b8..79a273485f93 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -172,9 +172,9 @@ { "name": "GridColumnMenuColumnsItem", "kind": "Function" }, { "name": "GridColumnMenuColumnsItemSimple", "kind": "Function" }, { "name": "GridColumnMenuComponentProps", "kind": "Interface" }, + { "name": "GridColumnMenuContainer", "kind": "Variable" }, { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, { "name": "GridColumnMenuDefault", "kind": "Variable" }, - { "name": "GridColumnMenuDefaultContainer", "kind": "Variable" }, { "name": "GridColumnMenuFilterItem", "kind": "Function" }, { "name": "GridColumnMenuFilterItemSimple", "kind": "Function" }, { "name": "GridColumnMenuHideItem", "kind": "Function" }, @@ -190,7 +190,6 @@ { "name": "GridColumnMenuRowUngroupItemSimple", "kind": "Function" }, { "name": "gridColumnMenuSelector", "kind": "Variable" }, { "name": "GridColumnMenuSimple", "kind": "Variable" }, - { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, { "name": "GridColumnMenuSortItem", "kind": "Function" }, { "name": "GridColumnMenuSortItemSimple", "kind": "Function" }, { "name": "GridColumnMenuState", "kind": "Interface" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index d8c16f079f02..7b13daad9472 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -147,9 +147,9 @@ { "name": "GridColumnMenuColumnsItem", "kind": "Function" }, { "name": "GridColumnMenuColumnsItemSimple", "kind": "Function" }, { "name": "GridColumnMenuComponentProps", "kind": "Interface" }, + { "name": "GridColumnMenuContainer", "kind": "Variable" }, { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, { "name": "GridColumnMenuDefault", "kind": "Variable" }, - { "name": "GridColumnMenuDefaultContainer", "kind": "Variable" }, { "name": "GridColumnMenuFilterItem", "kind": "Function" }, { "name": "GridColumnMenuFilterItemSimple", "kind": "Function" }, { "name": "GridColumnMenuHideItem", "kind": "Function" }, @@ -161,7 +161,6 @@ { "name": "GridColumnMenuRootProps", "kind": "Interface" }, { "name": "gridColumnMenuSelector", "kind": "Variable" }, { "name": "GridColumnMenuSimple", "kind": "Variable" }, - { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, { "name": "GridColumnMenuSortItem", "kind": "Function" }, { "name": "GridColumnMenuSortItemSimple", "kind": "Function" }, { "name": "GridColumnMenuState", "kind": "Interface" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 86423c7707fc..bad9fabe4940 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -139,9 +139,9 @@ { "name": "GridColumnMenuColumnsItem", "kind": "Function" }, { "name": "GridColumnMenuColumnsItemSimple", "kind": "Function" }, { "name": "GridColumnMenuComponentProps", "kind": "Interface" }, + { "name": "GridColumnMenuContainer", "kind": "Variable" }, { "name": "GridColumnMenuContainerProps", "kind": "Interface" }, { "name": "GridColumnMenuDefault", "kind": "Variable" }, - { "name": "GridColumnMenuDefaultContainer", "kind": "Variable" }, { "name": "GridColumnMenuFilterItem", "kind": "Function" }, { "name": "GridColumnMenuFilterItemSimple", "kind": "Function" }, { "name": "GridColumnMenuHideItem", "kind": "Function" }, @@ -151,7 +151,6 @@ { "name": "GridColumnMenuRootProps", "kind": "Interface" }, { "name": "gridColumnMenuSelector", "kind": "Variable" }, { "name": "GridColumnMenuSimple", "kind": "Variable" }, - { "name": "GridColumnMenuSimpleContainer", "kind": "Variable" }, { "name": "GridColumnMenuSortItem", "kind": "Function" }, { "name": "GridColumnMenuSortItemSimple", "kind": "Function" }, { "name": "GridColumnMenuState", "kind": "Interface" }, From 191ae2b36aeaafc478c8f7fdb1d1c878794c7270 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 30 Nov 2022 16:30:51 +0500 Subject: [PATCH 054/104] Adds reference grid in docs --- .../column-menu/ColumnMenuGridReferences.js | 254 ++++++++++++++++++ .../column-menu/ColumnMenuGridReferences.tsx | 251 +++++++++++++++++ .../ColumnMenuGridReferences.tsx.preview | 14 + .../column-menu/ReuseColumnMenuGrid.js | 22 +- .../data/data-grid/column-menu/column-menu.md | 124 +++++---- .../utils/useKeepGroupedColumnsHidden.ts | 2 +- 6 files changed, 607 insertions(+), 60 deletions(-) create mode 100644 docs/data/data-grid/column-menu/ColumnMenuGridReferences.js create mode 100644 docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx create mode 100644 docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx.preview diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridReferences.js b/docs/data/data-grid/column-menu/ColumnMenuGridReferences.js new file mode 100644 index 000000000000..289188df0667 --- /dev/null +++ b/docs/data/data-grid/column-menu/ColumnMenuGridReferences.js @@ -0,0 +1,254 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { + DataGridPremium, + useGridApiRef, + useKeepGroupedColumnsHidden, +} from '@mui/x-data-grid-premium'; +import Chip from '@mui/material/Chip'; +import Avatar from '@mui/material/Avatar'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; + +const getChipProperties = (plan) => { + switch (plan.toLowerCase()) { + case 'premium': + return { avatarLink: '/static/x/premium.svg', color: '#ffecc8' }; + case 'pro': + return { avatarLink: '/static/x/pro.svg', color: '#c8e9ff' }; + default: + return { avatarLink: undefined, color: '#c8ffdb' }; + } +}; + +function PlanTag(props) { + if (!props.plan) { + return null; + } + const chipPropperties = getChipProperties(props.plan); + const avatar = !chipPropperties.avatarLink ? undefined : ( + + ); + + return ( + + + + ); +} + +PlanTag.propTypes = { + plan: PropTypes.string, +}; + +function ComponentTag(props) { + if (!props.value) { + return null; + } + const components = props.value.split(','); + return ( + + {components.map((c, key) => ( + + {c} + + ))} + + ); +} + +ComponentTag.propTypes = { + value: PropTypes.string, +}; + +const columns = [ + { + field: 'slot', + headerName: 'Component', + width: 220, + renderCell: (params) => , + }, + { + field: 'plan', + headerName: 'Plan', + width: 170, + type: 'singleSelect', + valueOptions: ['Premium', 'Pro', 'Community'], + renderCell: (params) => , + }, + { field: 'design', headerName: 'Menu Design' }, + { + field: 'defaultComponent', + headerName: 'Default Components', + width: 280, + renderCell: (params) => , + }, + { field: 'displayOrder', headerName: 'Display Order', width: 140, type: 'number' }, +]; + +const rows = [ + { + id: 1, + slot: 'ColumnMenuSortItem', + defaultComponent: '', + design: 'Default', + displayOrder: 0, + plan: 'Community', + }, + { + id: 2, + slot: 'ColumnMenuSortItem', + defaultComponent: '', + design: 'Simple', + displayOrder: 0, + plan: 'Community', + }, + { + id: 3, + slot: 'ColumnMenuFilterItem', + defaultComponent: '', + design: 'Default', + displayOrder: 10, + plan: 'Community', + }, + { + id: 4, + slot: 'ColumnMenuFilterItem', + defaultComponent: '', + design: 'Simple', + displayOrder: 10, + plan: 'Community', + }, + { + id: 5, + slot: 'ColumnMenuHideItem', + defaultComponent: '', + design: 'Default', + displayOrder: 20, + plan: 'Community', + }, + { + id: 6, + slot: 'ColumnMenuHideItem', + defaultComponent: '', + design: 'Simple', + displayOrder: 20, + plan: 'Community', + }, + { + id: 7, + slot: 'ColumnMenuColumnsItem', + defaultComponent: '', + design: 'Default', + displayOrder: 30, + plan: 'Community', + }, + { + id: 8, + slot: 'ColumnMenuColumnsItem', + defaultComponent: '', + design: 'Simple', + displayOrder: 30, + plan: 'Community', + }, + { + id: 9, + slot: 'ColumnMenuPinningItem', + defaultComponent: '', + design: 'Default', + displayOrder: 5, + plan: 'Pro', + }, + { + id: 10, + slot: 'ColumnMenuPinningItem', + defaultComponent: '', + design: 'Simple', + displayOrder: 35, + plan: 'Pro', + }, + { + id: 11, + slot: 'ColumnMenuAggregationItem', + defaultComponent: '', + design: 'Default', + displayOrder: 17, + plan: 'Premium', + }, + { + id: 12, + slot: 'ColumnMenuAggregationItem', + defaultComponent: '', + design: 'Simple', + displayOrder: 37, + plan: 'Premium', + }, + { + id: 13, + slot: 'ColumnMenuGroupingItem', + defaultComponent: + ',', + design: 'Default', + displayOrder: 13, + plan: 'Premium', + }, + { + id: 14, + slot: 'ColumnMenuGroupingItem', + defaultComponent: + ',', + design: 'Simple', + displayOrder: 33, + plan: 'Premium', + }, +]; + +export default function ColumnMenuGridReferences() { + const apiRef = useGridApiRef(); + + const initialState = useKeepGroupedColumnsHidden({ + apiRef, + initialState: { + columns: { + columnVisibilityModel: { + plan: false, + }, + }, + rowGrouping: { + model: ['design'], + }, + sorting: { + sortModel: [{ field: 'displayOrder', sort: 'asc' }], + }, + }, + }); + return ( +
+ node.groupingKey === 'Default'} + groupingColDef={{ + headerName: 'Design & Plan', + hideDescendantCount: true, + leafField: 'plan', + width: 140, + }} + /> +
+ ); +} diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx b/docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx new file mode 100644 index 000000000000..3454d7cab1be --- /dev/null +++ b/docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx @@ -0,0 +1,251 @@ +import * as React from 'react'; +import { + DataGridPremium, + useGridApiRef, + useKeepGroupedColumnsHidden, + GridRenderCellParams, +} from '@mui/x-data-grid-premium'; +import Chip from '@mui/material/Chip'; +import Avatar from '@mui/material/Avatar'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; + +const getChipProperties = (plan: string) => { + switch (plan.toLowerCase()) { + case 'premium': + return { avatarLink: '/static/x/premium.svg', color: '#ffecc8' }; + case 'pro': + return { avatarLink: '/static/x/pro.svg', color: '#c8e9ff' }; + default: + return { avatarLink: undefined, color: '#c8ffdb' }; + } +}; + +function PlanTag(props: { plan?: string }) { + if (!props.plan) { + return null; + } + const chipPropperties = getChipProperties(props.plan); + const avatar = !chipPropperties.avatarLink ? undefined : ( + + ); + return ( + + + + ); +} + +function ComponentTag(props: { value?: string }) { + if (!props.value) { + return null; + } + const components = props.value.split(','); + return ( + + {components.map((c, key) => ( + + {c} + + ))} + + ); +} + +const columns = [ + { + field: 'slot', + headerName: 'Component', + width: 220, + renderCell: (params: GridRenderCellParams) => ( + + ), + }, + { + field: 'plan', + headerName: 'Plan', + width: 170, + type: 'singleSelect', + valueOptions: ['Premium', 'Pro', 'Community'], + renderCell: (params: GridRenderCellParams) => ( + + ), + }, + { field: 'design', headerName: 'Menu Design' }, + { + field: 'defaultComponent', + headerName: 'Default Components', + width: 280, + renderCell: (params: GridRenderCellParams) => ( + + ), + }, + { field: 'displayOrder', headerName: 'Display Order', width: 140, type: 'number' }, +]; + +const rows = [ + { + id: 1, + slot: 'ColumnMenuSortItem', + defaultComponent: '', + design: 'Default', + displayOrder: 0, + plan: 'Community', + }, + { + id: 2, + slot: 'ColumnMenuSortItem', + defaultComponent: '', + design: 'Simple', + displayOrder: 0, + plan: 'Community', + }, + { + id: 3, + slot: 'ColumnMenuFilterItem', + defaultComponent: '', + design: 'Default', + displayOrder: 10, + plan: 'Community', + }, + { + id: 4, + slot: 'ColumnMenuFilterItem', + defaultComponent: '', + design: 'Simple', + displayOrder: 10, + plan: 'Community', + }, + { + id: 5, + slot: 'ColumnMenuHideItem', + defaultComponent: '', + design: 'Default', + displayOrder: 20, + plan: 'Community', + }, + { + id: 6, + slot: 'ColumnMenuHideItem', + defaultComponent: '', + design: 'Simple', + displayOrder: 20, + plan: 'Community', + }, + { + id: 7, + slot: 'ColumnMenuColumnsItem', + defaultComponent: '', + design: 'Default', + displayOrder: 30, + plan: 'Community', + }, + { + id: 8, + slot: 'ColumnMenuColumnsItem', + defaultComponent: '', + design: 'Simple', + displayOrder: 30, + plan: 'Community', + }, + { + id: 9, + slot: 'ColumnMenuPinningItem', + defaultComponent: '', + design: 'Default', + displayOrder: 5, + plan: 'Pro', + }, + { + id: 10, + slot: 'ColumnMenuPinningItem', + defaultComponent: '', + design: 'Simple', + displayOrder: 35, + plan: 'Pro', + }, + { + id: 11, + slot: 'ColumnMenuAggregationItem', + defaultComponent: '', + design: 'Default', + displayOrder: 17, + plan: 'Premium', + }, + { + id: 12, + slot: 'ColumnMenuAggregationItem', + defaultComponent: '', + design: 'Simple', + displayOrder: 37, + plan: 'Premium', + }, + { + id: 13, + slot: 'ColumnMenuGroupingItem', + defaultComponent: + ',', + design: 'Default', + displayOrder: 13, + plan: 'Premium', + }, + { + id: 14, + slot: 'ColumnMenuGroupingItem', + defaultComponent: + ',', + design: 'Simple', + displayOrder: 33, + plan: 'Premium', + }, +]; + +export default function ColumnMenuGridReferences() { + const apiRef = useGridApiRef(); + + const initialState = useKeepGroupedColumnsHidden({ + apiRef, + initialState: { + columns: { + columnVisibilityModel: { + plan: false, + }, + }, + rowGrouping: { + model: ['design'], + }, + sorting: { + sortModel: [{ field: 'displayOrder', sort: 'asc' }], + }, + }, + }); + return ( +
+ node.groupingKey === 'Default'} + groupingColDef={{ + headerName: 'Design & Plan', + hideDescendantCount: true, + leafField: 'plan', + width: 140, + }} + /> +
+ ); +} diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx.preview b/docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx.preview new file mode 100644 index 000000000000..bbaca96c271a --- /dev/null +++ b/docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx.preview @@ -0,0 +1,14 @@ + node.groupingKey === 'Default'} + groupingColDef={{ + headerName: 'Design & Plan', + hideDescendantCount: true, + leafField: 'plan', + width: 140, + }} +/> \ No newline at end of file diff --git a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js index 79048878db13..b309c0026540 100644 --- a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js @@ -3,22 +3,30 @@ import PropTypes from 'prop-types'; import Button from '@mui/material/Button'; import IconFilter from '@mui/icons-material/FilterAlt'; import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications'; -import { DataGrid, GridColumnMenuDefault } from '@mui/x-data-grid'; +import { + DataGrid, + GridColumnMenuDefault, + useGridApiContext, +} from '@mui/x-data-grid'; import { useDemoData } from '@mui/x-data-grid-generator'; function CustomFilterItem(props) { - const { onClick } = props; + const { onClick, column } = props; + const apiRef = useGridApiContext(); + const handleClick = React.useCallback( + (event) => { + apiRef.current.showFilterPanel(column.field); + onClick(event); + }, + [apiRef, column.field, onClick], + ); return ( - ); } -CustomFilterItem.propTypes = { - onClick: PropTypes.func.isRequired, -}; - function CustomUserItem(props) { const { myCustomHandler, myCustomValue } = props; return ( diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index 047ef16c7683..b8ee9a86e8e0 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -22,29 +22,50 @@ By default, each column header has the column menu enabled. To disable the colum ## Customize column menu -You can customize the column menu either by passing `components`, `componentsProps`, and `customItems` props to the column menu component or by [passing a custom component to the `ColumnMenu` slot](/x/react-data-grid/components/#overriding-components) of the data grid component. - -### Add, override, hide and reorder items - -Column menu component accept `components`, `componentsProps` and `customItems` using which you can: - -- Add new items -- Override default items -- Hide default items -- Reorder items +You can customize the column menu either by passing `components`, `componentsProps`, and `customItems` props to the column menu component or by [passing a custom component](/x/react-data-grid/components/#overriding-components) to the `ColumnMenu` slot of the data grid component. **components**: Prop accepted by column menu components `` or ``, could be used to override default column menu components or add new components. -Default components supported by community package are `ColumnMenuSortItem`, `ColumnMenuFilterItem`, `ColumnMenuHideItem` and `ColumnMenuColumnsItem`. Pro package adds `ColumnMenuPinningItem` and Premium package adds `ColumnMenuAggregationItem` and `ColumnMenuGroupingItem`. - -**componentsProps**: Every item has a `displayOrder` based which it will be placed before or after other items in the menu. It can be overriden using `componentsProps`. You can also use this to pass extra props to column menu components. +**componentsProps**: Every item has a `displayOrder` based which it will be placed before or after other items in the menu. It can be overriden using `componentsProps`. You can also use this to pass extra props to custom column menu components. :::warning -The `components` prop uses Pascal case (`ColumnMenuFilterItem`), while `componentsProps` uses camel case (`columnMenuFilterItem`). +The `components` prop uses pascal case (`ColumnMenuFilterItem`), while `componentsProps` uses camel case (`columnMenuFilterItem`). ::: **customItems**: Visibility of default items is controlled using respective feature hooks, for custom items though, use `customItems` to show the items added by passing to `components`. All the new items will be placed in the end (default `displayOrder: 100`), unless customized by `displayOrder`. +### Adding a menu item + +To add a new menu item, pass it to `components` prop and add it to the column menu using `customItems` prop. You can also set the `displayOrder` or pass new props to the components using `componentsProps` prop. + +```tsx +function CustomColumnMenu(props: GridColumnMenuProps) { + return ( + alert('Custom handler fired'), + }, + }} + customItems={['ColumnMenuUserItem']} + /> + ); +} +``` + +### Overriding default menu items + +Use the `components` prop to override default menu items. + ```tsx function CustomColumnMenu(props: GridColumnMenuProps) { return ( @@ -53,11 +74,39 @@ function CustomColumnMenu(props: GridColumnMenuProps) { components={{ // Override slot for `ColumnMenuFilterItem` ColumnMenuFilterItem: CustomFilterItem, + }} + /> + ); +} +``` + +### Hiding a menu item + +To hide a menu item, you can set the component in `components` as `null`. + +```tsx +function CustomColumnMenu(props: GridColumnMenuProps) { + return ( + + ); +} +``` + +### Reordering menu items + +You can pass `displayOrder` for the specific item in `componentsProps` to re-order. + +```tsx +function CustomColumnMenu(props: GridColumnMenuProps) { + return ( + alert('Custom handler fired'), - }, }} - customItems={['ColumnMenuUserItem']} /> ); } ``` +The following demo implements adding, overriding, hiding and re-ordering of some column menu items. + {{"demo": "ReuseColumnMenuGrid.js", "bg": "inline"}} -#### Display orders for default items +### Column menu components and their configurations -As a reference, here is the order for each of the default items, there are some gaps to be able to place items in between: +As a reference, here are the default `components` supported by each column menu design along with the item components being used and default `displayOrder`. -| **Component** | **Package** | **Display order (default design)** | **Display order (simple design)** | -| ------------------------- | ----------- | ---------------------------------: | --------------------------------: | -| ColumnMenuSortItem | Community | 0 | 0 | -| ColumnMenuFilterItem | Community | 10 | 10 | -| ColumnMenuHideItem | Community | 20 | 20 | -| ColumnMenuColumnsItem | Community | 30 | 30 | -| ColumnMenuPinningItem | Pro | 5 | 35 | -| ColumnMenuAggregationItem | Premium | 17 | 37 | -| ColumnMenuGroupingItem | Premium | 13 | 33 | - -:::info -**Tip:** To hide/remove a default item, you can simply pass the component in `components` as `null` -::: +{{"demo": "ColumnMenuGridReferences.js", "bg": "inline", "hideToolbar": true}} ### Custom component -You can override the default column menu component and pass a custom column menu component using the `ColumnMenu` grid slot. +You can also customize column menu by [passing a custom component](/x/react-data-grid/components/#overriding-components) to the `ColumnMenu` slot of the data grid component. {{"demo": "CustomColumnMenuGrid.js", "bg": "inline"}} :::info -To conditionally render some items, you can use ColDef properties on the `currentColumn` recieved in the props. +Tip: In column menu components and items, you recieve a prop `colDef` corresponding to the current column, you can use this to conditionally render some items or change some logic. ::: -Here's the list of default available items for each package and column menu design: - -| **Package** | **Design** | **Available Items** | -| :---------: | :--------: | :-------------------------------------------------------------------------------------------------------------------------: | -| Community | default | GridColumnMenuFilterItem, GridColumnMenuSortItem, GridColumnMenuHideItem, GridColumnMenuColumnsItem | -| Community | simple | GridColumnMenuFilterItemSimple, GridColumnMenuSortItemSimple, GridColumnMenuHideItemSimple, GridColumnMenuColumnsItemSimple | -| Pro | default | GridColumnMenuPinningItem | -| Pro | simple | GridColumnMenuPinningItemSimple | -| Premium | default | GridColumnMenuAggregationItem, GridColumnMenuRowGroupItem, GridColumnMenuRowUngroupItem | -| Premium | simple | GridColumnMenuAggregationItemSimple, GridColumnMenuRowGroupItemSimple, GridColumnMenuRowUngroupItemSimple | - ## Column menu with Pro/Premium options [](/x/introduction/licensing/#pro-plan)[](/x/introduction/licensing/#premium-plan) When using `DataGridPro` or `DataGridPremium` components, the column menu contains additional menu items related to Pro and Premium features: diff --git a/packages/grid/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts b/packages/grid/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts index f0781bba037f..2bd65df9d654 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts +++ b/packages/grid/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts @@ -45,7 +45,7 @@ export const useKeepGroupedColumnsHidden = ( ); React.useEffect(() => { - props.apiRef.current.subscribeEvent('rowGroupingModelChange', (newModel) => { + props.apiRef.current.subscribeEvent?.('rowGroupingModelChange', (newModel) => { const columnVisibilityModel = updateColumnVisibilityModel( gridColumnVisibilityModelSelector(props.apiRef), newModel, From 07bd2e4212322ba1a1a9fa2c468a00bf41544589 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 30 Nov 2022 18:56:16 +0500 Subject: [PATCH 055/104] Remove 'customItems' prop and some docs improvements --- .../column-menu/ColumnMenuGridReferences.js | 5 +---- .../column-menu/ColumnMenuGridReferences.tsx | 5 +---- .../column-menu/DisabledColumnMenuGrid.js | 2 +- .../column-menu/DisabledColumnMenuGrid.tsx | 2 +- .../data-grid/column-menu/ReuseColumnMenuGrid.js | 2 -- .../data-grid/column-menu/ReuseColumnMenuGrid.tsx | 1 - docs/data/data-grid/column-menu/column-menu.md | 13 +++++-------- .../columnMenu/default/GridColumnMenuDefault.tsx | 5 ----- .../columnMenu/simple/GridColumnMenuSimple.tsx | 5 ----- .../features/columnMenu/columnMenuInterfaces.ts | 5 ----- .../columnMenu/useGridColumnMenuComponents.ts | 14 +++++++++----- 11 files changed, 18 insertions(+), 41 deletions(-) diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridReferences.js b/docs/data/data-grid/column-menu/ColumnMenuGridReferences.js index 289188df0667..e12c396c82bc 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridReferences.js +++ b/docs/data/data-grid/column-menu/ColumnMenuGridReferences.js @@ -75,7 +75,7 @@ ComponentTag.propTypes = { const columns = [ { field: 'slot', - headerName: 'Component', + headerName: 'Slot', width: 220, renderCell: (params) => , }, @@ -228,9 +228,6 @@ export default function ColumnMenuGridReferences() { rowGrouping: { model: ['design'], }, - sorting: { - sortModel: [{ field: 'displayOrder', sort: 'asc' }], - }, }, }); return ( diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx b/docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx index 3454d7cab1be..650e1d2ad6cf 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx +++ b/docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx @@ -66,7 +66,7 @@ function ComponentTag(props: { value?: string }) { const columns = [ { field: 'slot', - headerName: 'Component', + headerName: 'Slot', width: 220, renderCell: (params: GridRenderCellParams) => ( @@ -225,9 +225,6 @@ export default function ColumnMenuGridReferences() { rowGrouping: { model: ['design'], }, - sorting: { - sortModel: [{ field: 'displayOrder', sort: 'asc' }], - }, }, }); return ( diff --git a/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.js b/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.js index cda06a5599bd..78e9bef9de9c 100644 --- a/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.js @@ -10,7 +10,7 @@ export default function DisabledColumnMenuGrid() { }); return ( -
+
); diff --git a/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.tsx index cda06a5599bd..78e9bef9de9c 100644 --- a/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.tsx +++ b/docs/data/data-grid/column-menu/DisabledColumnMenuGrid.tsx @@ -10,7 +10,7 @@ export default function DisabledColumnMenuGrid() { }); return ( -
+
); diff --git a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js index b309c0026540..030c03a156ee 100644 --- a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js @@ -1,5 +1,4 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; import Button from '@mui/material/Button'; import IconFilter from '@mui/icons-material/FilterAlt'; import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications'; @@ -68,7 +67,6 @@ function CustomColumnMenu(props) { myCustomHandler: () => alert('Custom handler fired'), }, }} - customItems={['ColumnMenuUserItem']} /> ); } diff --git a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx index 6146257de628..8c8ee9353a1b 100644 --- a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx +++ b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx @@ -69,7 +69,6 @@ function CustomColumnMenu(props: GridColumnMenuProps) { myCustomHandler: () => alert('Custom handler fired'), }, }} - customItems={['ColumnMenuUserItem']} /> ); } diff --git a/docs/data/data-grid/column-menu/column-menu.md b/docs/data/data-grid/column-menu/column-menu.md index b8ee9a86e8e0..5d48bebfcc35 100644 --- a/docs/data/data-grid/column-menu/column-menu.md +++ b/docs/data/data-grid/column-menu/column-menu.md @@ -22,7 +22,7 @@ By default, each column header has the column menu enabled. To disable the colum ## Customize column menu -You can customize the column menu either by passing `components`, `componentsProps`, and `customItems` props to the column menu component or by [passing a custom component](/x/react-data-grid/components/#overriding-components) to the `ColumnMenu` slot of the data grid component. +You can customize the column menu either by passing `components` and `componentsProps` props to the column menu component or by [passing a custom component](/x/react-data-grid/components/#overriding-components) to the `ColumnMenu` slot of the data grid component. **components**: Prop accepted by column menu components `` or ``, could be used to override default column menu components or add new components. @@ -32,11 +32,9 @@ You can customize the column menu either by passing `components`, `componentsPro The `components` prop uses pascal case (`ColumnMenuFilterItem`), while `componentsProps` uses camel case (`columnMenuFilterItem`). ::: -**customItems**: Visibility of default items is controlled using respective feature hooks, for custom items though, use `customItems` to show the items added by passing to `components`. All the new items will be placed in the end (default `displayOrder: 100`), unless customized by `displayOrder`. - ### Adding a menu item -To add a new menu item, pass it to `components` prop and add it to the column menu using `customItems` prop. You can also set the `displayOrder` or pass new props to the components using `componentsProps` prop. +To add a new menu item, pass it in `components` prop. You can also set the `displayOrder` (default `100`) or pass new props to the components using `componentsProps` prop. ```tsx function CustomColumnMenu(props: GridColumnMenuProps) { @@ -56,7 +54,6 @@ function CustomColumnMenu(props: GridColumnMenuProps) { myCustomHandler: () => alert('Custom handler fired'), }, }} - customItems={['ColumnMenuUserItem']} /> ); } @@ -72,7 +69,7 @@ function CustomColumnMenu(props: GridColumnMenuProps) { @@ -133,12 +130,12 @@ As a reference, here are the default `components` supported by each column menu ### Custom component -You can also customize column menu by [passing a custom component](/x/react-data-grid/components/#overriding-components) to the `ColumnMenu` slot of the data grid component. +You can also customize column menu by [passing a custom component](/x/react-data-grid/components/#overriding-components) to the `ColumnMenu` slot of the data grid component. If you want some default items rendered, you can import them and use in your custom component. {{"demo": "CustomColumnMenuGrid.js", "bg": "inline"}} :::info -Tip: In column menu components and items, you recieve a prop `colDef` corresponding to the current column, you can use this to conditionally render some items or change some logic. +Tip: In column menu component and items, you recieve a prop `colDef` corresponding to the current column, you can use this to conditionally render some items or change some logic. ::: ## Column menu with Pro/Premium options [](/x/introduction/licensing/#pro-plan)[](/x/introduction/licensing/#premium-plan) diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx index 6f303fc4bba7..cc0661cac2e9 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/default/GridColumnMenuDefault.tsx @@ -71,11 +71,6 @@ GridColumnMenuDefault.propTypes = { */ componentsProps: PropTypes.object, currentColumn: PropTypes.object.isRequired, - /** - * To initialize column menu with some custom components use `customItems` - * Use custom components added with `components` prop here - */ - customItems: PropTypes.arrayOf(PropTypes.string), /** * Initial `components` - it is internal, to be overrriden by Pro or Premium packages * @ignore - do not document. diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx index 328f821ecb60..d4dd5d204a71 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/simple/GridColumnMenuSimple.tsx @@ -73,11 +73,6 @@ GridColumnMenuSimple.propTypes = { */ componentsProps: PropTypes.object, currentColumn: PropTypes.object.isRequired, - /** - * To initialize column menu with some custom components use `customItems` - * Use custom components added with `components` prop here - */ - customItems: PropTypes.arrayOf(PropTypes.string), /** * Initial `components` - it is internal, to be overrriden by Pro or Premium packages * @ignore - do not document. diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts index f995b5e5dd30..a7fed424eae6 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnMenu/columnMenuInterfaces.ts @@ -41,9 +41,4 @@ export interface GridColumnMenuRootProps { * e.g. `displayOrder` */ componentsProps?: { [key: string]: GridColumnMenuComponentProps }; - /** - * To initialize column menu with some custom components use `customItems` - * Use custom components added with `components` prop here - */ - customItems?: Array; } diff --git a/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts b/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts index acc50ce81ef6..c43c79c1b501 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuComponents.ts @@ -24,7 +24,6 @@ const useGridColumnMenuComponents = (props: UseGridColumnMenuComponentsProps) => defaultComponentsProps, components = {}, componentsProps = {}, - customItems = [], } = props; const processedComponents = React.useMemo( @@ -43,14 +42,19 @@ const useGridColumnMenuComponents = (props: UseGridColumnMenuComponentsProps) => return mergedProps; }, [defaultComponentsProps, componentsProps]); - const preProcessedItems = apiRef.current.unstable_applyPipeProcessors( + const defaultItems = apiRef.current.unstable_applyPipeProcessors( 'columnMenu', - customItems, + [], props.currentColumn, ); + const userItems = React.useMemo(() => { + const defaultComponentKeys = Object.keys(defaultComponents); + return Object.keys(components).filter((key) => !defaultComponentKeys.includes(key)); + }, [components, defaultComponents]); + return React.useMemo(() => { - const uniqueItems = Array.from(new Set(preProcessedItems)); + const uniqueItems = Array.from(new Set([...defaultItems, ...userItems])); const sorted = uniqueItems.sort((a, b) => { const leftItemProps = processedComponentsProps[camelize(a)]; const rightItemProps = processedComponentsProps[camelize(b)]; @@ -73,7 +77,7 @@ const useGridColumnMenuComponents = (props: UseGridColumnMenuComponentsProps) => } return [...acc, [processedComponents[key]!, {}]]; }, []); - }, [preProcessedItems, processedComponents, processedComponentsProps]); + }, [defaultItems, processedComponents, processedComponentsProps, userItems]); }; export { useGridColumnMenuComponents }; From 202464a025fd0dcd87cbe2bd3c8f4659f6da7820 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 30 Nov 2022 23:10:21 +0500 Subject: [PATCH 056/104] Resolves comment --- .../column-menu/ColumnMenuGridReferences.js | 29 +++++++++---------- .../column-menu/ColumnMenuGridReferences.tsx | 29 +++++++++---------- 2 files changed, 28 insertions(+), 30 deletions(-) diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridReferences.js b/docs/data/data-grid/column-menu/ColumnMenuGridReferences.js index e12c396c82bc..0655eedcf47d 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridReferences.js +++ b/docs/data/data-grid/column-menu/ColumnMenuGridReferences.js @@ -101,7 +101,7 @@ const rows = [ { id: 1, slot: 'ColumnMenuSortItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuSortItem', design: 'Default', displayOrder: 0, plan: 'Community', @@ -109,7 +109,7 @@ const rows = [ { id: 2, slot: 'ColumnMenuSortItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuSortItemSimple', design: 'Simple', displayOrder: 0, plan: 'Community', @@ -117,7 +117,7 @@ const rows = [ { id: 3, slot: 'ColumnMenuFilterItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuFilterItem', design: 'Default', displayOrder: 10, plan: 'Community', @@ -125,7 +125,7 @@ const rows = [ { id: 4, slot: 'ColumnMenuFilterItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuFilterItemSimple', design: 'Simple', displayOrder: 10, plan: 'Community', @@ -133,7 +133,7 @@ const rows = [ { id: 5, slot: 'ColumnMenuHideItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuHideItem', design: 'Default', displayOrder: 20, plan: 'Community', @@ -141,7 +141,7 @@ const rows = [ { id: 6, slot: 'ColumnMenuHideItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuHideItemSimple', design: 'Simple', displayOrder: 20, plan: 'Community', @@ -149,7 +149,7 @@ const rows = [ { id: 7, slot: 'ColumnMenuColumnsItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuColumnsItem', design: 'Default', displayOrder: 30, plan: 'Community', @@ -157,7 +157,7 @@ const rows = [ { id: 8, slot: 'ColumnMenuColumnsItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuColumnsItemSimple', design: 'Simple', displayOrder: 30, plan: 'Community', @@ -165,7 +165,7 @@ const rows = [ { id: 9, slot: 'ColumnMenuPinningItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuPinningItem', design: 'Default', displayOrder: 5, plan: 'Pro', @@ -173,7 +173,7 @@ const rows = [ { id: 10, slot: 'ColumnMenuPinningItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuPinningItemSimple', design: 'Simple', displayOrder: 35, plan: 'Pro', @@ -181,7 +181,7 @@ const rows = [ { id: 11, slot: 'ColumnMenuAggregationItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuAggregationItem', design: 'Default', displayOrder: 17, plan: 'Premium', @@ -189,7 +189,7 @@ const rows = [ { id: 12, slot: 'ColumnMenuAggregationItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuAggregationItemSimple', design: 'Simple', displayOrder: 37, plan: 'Premium', @@ -197,8 +197,7 @@ const rows = [ { id: 13, slot: 'ColumnMenuGroupingItem', - defaultComponent: - ',', + defaultComponent: 'GridColumnMenuRowGroupItem,GridColumnMenuRowUngroupItem', design: 'Default', displayOrder: 13, plan: 'Premium', @@ -207,7 +206,7 @@ const rows = [ id: 14, slot: 'ColumnMenuGroupingItem', defaultComponent: - ',', + 'GridColumnMenuRowGroupItemSimple,GridColumnMenuRowUngroupItemSimple', design: 'Simple', displayOrder: 33, plan: 'Premium', diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx b/docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx index 650e1d2ad6cf..baae05da1b68 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx +++ b/docs/data/data-grid/column-menu/ColumnMenuGridReferences.tsx @@ -98,7 +98,7 @@ const rows = [ { id: 1, slot: 'ColumnMenuSortItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuSortItem', design: 'Default', displayOrder: 0, plan: 'Community', @@ -106,7 +106,7 @@ const rows = [ { id: 2, slot: 'ColumnMenuSortItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuSortItemSimple', design: 'Simple', displayOrder: 0, plan: 'Community', @@ -114,7 +114,7 @@ const rows = [ { id: 3, slot: 'ColumnMenuFilterItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuFilterItem', design: 'Default', displayOrder: 10, plan: 'Community', @@ -122,7 +122,7 @@ const rows = [ { id: 4, slot: 'ColumnMenuFilterItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuFilterItemSimple', design: 'Simple', displayOrder: 10, plan: 'Community', @@ -130,7 +130,7 @@ const rows = [ { id: 5, slot: 'ColumnMenuHideItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuHideItem', design: 'Default', displayOrder: 20, plan: 'Community', @@ -138,7 +138,7 @@ const rows = [ { id: 6, slot: 'ColumnMenuHideItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuHideItemSimple', design: 'Simple', displayOrder: 20, plan: 'Community', @@ -146,7 +146,7 @@ const rows = [ { id: 7, slot: 'ColumnMenuColumnsItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuColumnsItem', design: 'Default', displayOrder: 30, plan: 'Community', @@ -154,7 +154,7 @@ const rows = [ { id: 8, slot: 'ColumnMenuColumnsItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuColumnsItemSimple', design: 'Simple', displayOrder: 30, plan: 'Community', @@ -162,7 +162,7 @@ const rows = [ { id: 9, slot: 'ColumnMenuPinningItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuPinningItem', design: 'Default', displayOrder: 5, plan: 'Pro', @@ -170,7 +170,7 @@ const rows = [ { id: 10, slot: 'ColumnMenuPinningItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuPinningItemSimple', design: 'Simple', displayOrder: 35, plan: 'Pro', @@ -178,7 +178,7 @@ const rows = [ { id: 11, slot: 'ColumnMenuAggregationItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuAggregationItem', design: 'Default', displayOrder: 17, plan: 'Premium', @@ -186,7 +186,7 @@ const rows = [ { id: 12, slot: 'ColumnMenuAggregationItem', - defaultComponent: '', + defaultComponent: 'GridColumnMenuAggregationItemSimple', design: 'Simple', displayOrder: 37, plan: 'Premium', @@ -194,8 +194,7 @@ const rows = [ { id: 13, slot: 'ColumnMenuGroupingItem', - defaultComponent: - ',', + defaultComponent: 'GridColumnMenuRowGroupItem,GridColumnMenuRowUngroupItem', design: 'Default', displayOrder: 13, plan: 'Premium', @@ -204,7 +203,7 @@ const rows = [ id: 14, slot: 'ColumnMenuGroupingItem', defaultComponent: - ',', + 'GridColumnMenuRowGroupItemSimple,GridColumnMenuRowUngroupItemSimple', design: 'Simple', displayOrder: 33, plan: 'Premium', From c90a705b947a06e1ebbd593eeb79d47822116d75 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 30 Nov 2022 23:10:53 +0500 Subject: [PATCH 057/104] Changes 'currentColumn' to 'colDef' --- .../column-menu/CustomColumnMenuGrid.js | 6 +- .../column-menu/CustomColumnMenuGrid.tsx | 4 +- .../column-menu/ReuseColumnMenuGrid.js | 6 ++ .../DisableColumnPinningButtons.js | 18 +++--- .../DisableColumnPinningButtons.tsx | 16 ++--- .../data-grid/components/CustomColumnMenu.js | 18 +++--- .../data-grid/components/CustomColumnMenu.tsx | 16 ++--- docs/data/data-grid/components/components.md | 10 ++-- .../GridColumnMenuAggregationItem.tsx | 2 +- .../components/GridColumnMenuRowGroupItem.tsx | 2 +- .../GridColumnMenuRowGroupItemSimple.tsx | 2 +- .../GridColumnMenuRowUngroupItem.tsx | 2 +- .../GridColumnMenuRowUngroupItemSimple.tsx | 2 +- .../components/GridColumnMenuPinningItem.tsx | 2 +- .../GridColumnMenuPinningItemSimple.tsx | 2 +- .../columnHeaders/ColumnHeaderMenuIcon.tsx | 8 +-- .../columnHeaders/GridColumnHeaderItem.tsx | 60 +++++++++---------- .../menu/columnMenu/GridColumnHeaderMenu.tsx | 6 +- .../columnMenu/GridColumnMenuContainer.tsx | 4 +- .../columnMenu/GridColumnMenuItemProps.ts | 2 +- .../menu/columnMenu/GridColumnMenuProps.ts | 2 +- .../default/GridColumnMenuColumnsItem.tsx | 2 +- .../default/GridColumnMenuDefault.tsx | 4 +- .../default/GridColumnMenuFilterItem.tsx | 2 +- .../default/GridColumnMenuHideItem.tsx | 2 +- .../default/GridColumnMenuSortItem.tsx | 2 +- .../GridColumnMenuColumnsItemSimple.tsx | 2 +- .../simple/GridColumnMenuFilterItemSimple.tsx | 2 +- .../simple/GridColumnMenuHideItemSimple.tsx | 2 +- .../simple/GridColumnMenuSimple.tsx | 9 +-- .../simple/GridColumnMenuSortItemSimple.tsx | 2 +- .../columnHeaders/useGridColumnHeaders.tsx | 20 +++---- .../columnMenu/useGridColumnMenuComponents.ts | 8 +-- 33 files changed, 118 insertions(+), 129 deletions(-) diff --git a/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js b/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js index 99d260cc9bc4..a1079d80ceb0 100644 --- a/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/CustomColumnMenuGrid.js @@ -25,14 +25,14 @@ MenuCloseComponent.propTypes = { function CustomColumnMenu(props) { const itemProps = { - column: props.currentColumn, + colDef: props.colDef, onClick: props.hideMenu, }; return ( {/* Only provide filtering on desk */} - {itemProps.column.field === 'desk' ? ( + {itemProps.colDef.field === 'desk' ? ( ) : null} @@ -43,7 +43,7 @@ function CustomColumnMenu(props) { } CustomColumnMenu.propTypes = { - currentColumn: PropTypes.object.isRequired, + colDef: PropTypes.object.isRequired, hideMenu: PropTypes.func.isRequired, }; diff --git a/docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx index 3e2d5a831fc4..59b9fbcc5906 100644 --- a/docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx +++ b/docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx @@ -22,14 +22,14 @@ function MenuCloseComponent(props: GridColumnMenuItemProps) { function CustomColumnMenu(props: GridColumnMenuProps) { const itemProps = { - column: props.currentColumn, + colDef: props.colDef, onClick: props.hideMenu, }; return ( {/* Only provide filtering on desk */} - {itemProps.column.field === 'desk' ? ( + {itemProps.colDef.field === 'desk' ? ( ) : null} diff --git a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js index 030c03a156ee..f396fd5c1a2c 100644 --- a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import Button from '@mui/material/Button'; import IconFilter from '@mui/icons-material/FilterAlt'; import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications'; @@ -19,6 +20,7 @@ function CustomFilterItem(props) { }, [apiRef, column.field, onClick], ); + return ( ); @@ -36,11 +36,7 @@ CustomFilterItem.propTypes = { function CustomUserItem(props) { const { myCustomHandler, myCustomValue } = props; return ( - ); diff --git a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx index d1e1a934fab9..14ae5430d1bf 100644 --- a/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx +++ b/docs/data/data-grid/column-menu/ReuseColumnMenuGrid.tsx @@ -22,7 +22,7 @@ function CustomFilterItem(props: GridColumnMenuItemProps) { [apiRef, colDef.field, onClick], ); return ( - ); @@ -31,11 +31,7 @@ function CustomFilterItem(props: GridColumnMenuItemProps) { function CustomUserItem(props: GridColumnMenuItemProps) { const { myCustomHandler, myCustomValue } = props; return ( - ); diff --git a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx index dfe4ab2e772b..8e76e2af3410 100644 --- a/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx +++ b/packages/grid/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx @@ -2,12 +2,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { GridColumnMenuItemProps, useGridSelector } from '@mui/x-data-grid-pro'; import MenuItem from '@mui/material/MenuItem'; -import Stack from '@mui/material/Stack'; import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/material/InputLabel'; import { unstable_useId as useId } from '@mui/utils'; import Select, { SelectChangeEvent } from '@mui/material/Select'; -import { styled } from '@mui/material/styles'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { @@ -18,11 +16,7 @@ import { import { gridAggregationModelSelector } from '../hooks/features/aggregation/gridAggregationSelectors'; import { GridAggregationModel } from '../hooks/features/aggregation/gridAggregationInterfaces'; -const StyledStack = styled(Stack)(({ theme }) => ({ - padding: theme.spacing(1, 1.5, 1, 1.5), -})); - -function GridColumnMenuAggregationItemRoot(props: GridColumnMenuItemProps) { +function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps) { const { colDef } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); @@ -72,7 +66,7 @@ function GridColumnMenuAggregationItemRoot(props: GridColumnMenuItemProps) { const label = apiRef.current.getLocaleText('aggregationMenuItemHeader'); return ( - + {label}