diff --git a/docs/pages/_app.js b/docs/pages/_app.js index effe2a6a423c..021e315e9df3 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -50,7 +50,6 @@ ponyfillGlobal.muiDocConfig = { newDeps['@mui/material'] = versions['@mui/material']; newDeps['@mui/icons-material'] = versions['@mui/icons-material']; newDeps['@mui/x-data-grid'] = versions['@mui/x-data-grid']; // TS types are imported from @mui/x-data-grid - newDeps['@mui/styles'] = versions['@mui/styles']; } return newDeps; diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx index a0a28c4971be..1cd5b270b7c8 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx @@ -1,34 +1,7 @@ import * as React from 'react'; -import { makeStyles } from '@mui/styles'; +import Box from '@mui/material/Box'; import { GridRenderCellParams } from '@mui/x-data-grid-pro'; -// ISO 3166-1 alpha-2 -// ⚠️ No support for IE 11 -function countryToFlag(isoCode: string) { - return typeof String.fromCodePoint !== 'undefined' && isoCode - ? isoCode - .toUpperCase() - .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397)) - : isoCode; -} - -const useStyles = makeStyles({ - root: { - display: 'flex', - }, - flag: { - marginRight: 4, - marginTop: 2, - height: 32, - width: 32, - fontSize: '28px', - }, - label: { - overflow: 'hidden', - textOverflow: 'ellipsis', - }, -}); - interface CountryProps { value: { code: string; @@ -38,13 +11,29 @@ interface CountryProps { const Country = React.memo(function Country(props: CountryProps) { const { value } = props; - const classes = useStyles(); return ( -
- {value.code && countryToFlag(value.code)} - {value.label} -
+ img': { + mr: '4px', + width: '20px', + }, + }} + > + + + {value.label} + + ); }); diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditContractType.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderEditContractType.tsx deleted file mode 100644 index e12a3b70b411..000000000000 --- a/packages/grid/x-data-grid-generator/src/renderer/renderEditContractType.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from 'react'; -import { GridRenderCellParams, GridEvents } from '@mui/x-data-grid'; -import Select, { SelectProps } from '@mui/material/Select'; -import { MenuProps } from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import { createStyles, makeStyles } from '@mui/styles'; -import { createTheme } from '@mui/material/styles'; -import { CONTRACT_TYPE_OPTIONS } from '../services/static-data'; - -const defaultTheme = createTheme(); -const useStyles = makeStyles( - (theme) => - createStyles({ - select: { - display: 'flex', - alignItems: 'center', - paddingLeft: theme.spacing(1), - }, - optionIcon: { - minWidth: 36, - }, - optionText: { - overflow: 'hidden', - }, - }), - { defaultTheme }, -); - -function EditContractType(props: GridRenderCellParams) { - const classes = useStyles(); - const { id, value, api, field } = props; - - const handleChange: SelectProps['onChange'] = (event) => { - api.setEditCellValue({ id, field, value: event.target.value as any }, event); - api.commitCellChange({ id, field }); - api.setCellMode(id, field, 'view'); - - if ((event as any).key) { - // TODO v6: remove once we stop ignoring events fired from portals - const params = api.getCellParams(id, field); - api.publishEvent( - GridEvents.cellNavigationKeyDown, - params, - event as any as React.KeyboardEvent, - ); - } - }; - - const handleClose: MenuProps['onClose'] = (event, reason) => { - if (reason === 'backdropClick') { - api.setCellMode(id, field, 'view'); - } - }; - - return ( - - ); -} - -export function renderEditContractType(params: GridRenderCellParams) { - return ; -} diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx index 80eb7338b839..4035592c82dd 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx @@ -1,46 +1,25 @@ import * as React from 'react'; import { GridRenderEditCellParams } from '@mui/x-data-grid'; -import Autocomplete from '@mui/material/Autocomplete'; +import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete'; import InputBase from '@mui/material/InputBase'; -import { createStyles, makeStyles } from '@mui/styles'; -import { createTheme } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import { styled } from '@mui/material/styles'; import { COUNTRY_ISO_OPTIONS } from '../services/static-data'; -// ISO 3166-1 alpha-2 -// ⚠️ No support for IE 11 -function countryToFlag(isoCode: string) { - return typeof String.fromCodePoint !== 'undefined' - ? isoCode - .toUpperCase() - .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397)) - : isoCode; -} - -const defaultTheme = createTheme(); -const useStyles = makeStyles( - (theme) => - createStyles({ - option: { - '& > span': { - marginRight: 10, - fontSize: 18, - }, - }, - inputRoot: { - ...theme.typography.body2, - padding: '1px 0', - height: '100%', - '& input': { - padding: '0 16px', - height: '100%', - }, - }, - }), - { defaultTheme }, -); +const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({ + height: '100%', + [`& .${autocompleteClasses.inputRoot}`]: { + ...theme.typography.body2, + padding: '1px 0', + height: '100%', + '& input': { + padding: '0 16px', + height: '100%', + }, + }, +})); function EditCountry(props: GridRenderEditCellParams) { - const classes = useStyles(); const { id, value, api, field } = props; const handleChange = React.useCallback( @@ -55,21 +34,35 @@ function EditCountry(props: GridRenderEditCellParams) { ); return ( - option.label} + getOptionLabel={(option: any) => option.label} autoHighlight fullWidth open - classes={classes} disableClearable - renderOption={(optionProps, option) => ( -
  • - {countryToFlag(option.code)} + renderOption={(optionProps, option: any) => ( + img': { + mr: 2, + flexShrink: 0, + }, + }} + {...optionProps} + > + {option.label} -
    • + )} renderInput={(params) => ( String.fromCodePoint(char.charCodeAt(0) + 127397)) - : isoCode; -} - -const defaultTheme = createTheme(); -const useStyles = makeStyles( - (theme) => - createStyles({ - option: { - '& > span': { - marginRight: 10, - fontSize: 18, - }, - }, - inputRoot: { - ...theme.typography.body2, - padding: '1px 0', - height: '100%', - '& input': { - padding: '0 16px', - height: '100%', - }, - }, - }), - { defaultTheme }, -); +const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({ + height: '100%', + [`& .${autocompleteClasses.inputRoot}`]: { + ...theme.typography.body2, + padding: '1px 0', + height: '100%', + '& input': { + padding: '0 16px', + height: '100%', + }, + }, +})); function EditCurrency(props: GridRenderEditCellParams) { - const classes = useStyles(); const { id, value, api, field } = props; const handleChange = React.useCallback( @@ -55,20 +34,34 @@ function EditCurrency(props: GridRenderEditCellParams) { ); return ( - ( -
  • - {countryToFlag(String(option).slice(0, -1))} + renderOption={(optionProps, option: any) => ( + img': { + mr: 2, + flexShrink: 0, + }, + }} + {...optionProps} + > + {option} -
    • + )} renderInput={(params) => ( - createStyles({ - select: { - display: 'flex', - alignItems: 'center', - paddingLeft: theme.spacing(1), - }, - optionIcon: { - minWidth: 40, - }, - optionText: { - overflow: 'hidden', - }, - }), - { defaultTheme }, -); - function EditIncoterm(props: GridRenderEditCellParams) { - const classes = useStyles(); const { id, value, api, field } = props; const handleChange: SelectProps['onChange'] = (event) => { @@ -57,11 +35,18 @@ function EditIncoterm(props: GridRenderEditCellParams) { return ( - createStyles({ - root: { - display: 'flex', - alignItems: 'center', - lineHeight: '24px', - color: theme.palette.text.secondary, - marginRight: theme.spacing(1), - '& .MuiRating-root': { - marginRight: theme.spacing(1), - }, - }, - }), - { defaultTheme }, -); function EditRating(props: GridRenderEditCellParams) { const { id, value, api, field } = props; - const classes = useStyles(); const handleChange = (event: any) => { api.setEditCellValue({ id, field, value: Number(event.target.value) }, event); @@ -43,16 +23,25 @@ function EditRating(props: GridRenderEditCellParams) { }; return ( -
    + {Number(value)} -
    + ); } diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditStatus.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderEditStatus.tsx index ea292bf88f79..55d34d181d8d 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderEditStatus.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderEditStatus.tsx @@ -9,31 +9,9 @@ import ReportProblemIcon from '@mui/icons-material/ReportProblem'; import InfoIcon from '@mui/icons-material/Info'; import AutorenewIcon from '@mui/icons-material/Autorenew'; import DoneIcon from '@mui/icons-material/Done'; -import { createStyles, makeStyles } from '@mui/styles'; -import { createTheme } from '@mui/material/styles'; import { STATUS_OPTIONS } from '../services/static-data'; -const defaultTheme = createTheme(); -const useStyles = makeStyles( - (theme) => - createStyles({ - select: { - display: 'flex', - alignItems: 'center', - paddingLeft: theme.spacing(1), - }, - optionIcon: { - minWidth: 36, - }, - optionText: { - overflow: 'hidden', - }, - }), - { defaultTheme }, -); - function EditStatus(props: GridRenderEditCellParams) { - const classes = useStyles(); const { id, value, api, field } = props; const handleChange: SelectProps['onChange'] = (event) => { @@ -61,11 +39,18 @@ function EditStatus(props: GridRenderEditCellParams) { return ( + {code} - + - + ); }); diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderLink.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderLink.tsx index 26e23ce81207..e72ac4d95469 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderLink.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderLink.tsx @@ -1,33 +1,29 @@ import * as React from 'react'; +import { styled } from '@mui/material/styles'; import { GridCellParams } from '@mui/x-data-grid-pro'; -import { makeStyles } from '@mui/styles'; - -const useStyles = makeStyles({ - root: { - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - overflow: 'hidden', - color: 'inherit', - }, -}); interface DemoLinkProps { href: string; children: string; } -export const DemoLink = React.memo(function DemoLink(props: DemoLinkProps) { - const classes = useStyles(); +const Link = styled('a')({ + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + overflow: 'hidden', + color: 'inherit', +}); +export const DemoLink = React.memo(function DemoLink(props: DemoLinkProps) { const handleClick = (event: React.MouseEvent) => { event.preventDefault(); event.stopPropagation(); }; return ( - + {props.children} - + ); }); diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderPnl.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderPnl.tsx index 55fa5c49df37..adbfded5f60f 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderPnl.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderPnl.tsx @@ -1,28 +1,19 @@ import * as React from 'react'; import clsx from 'clsx'; -import { createTheme } from '@mui/material/styles'; -import { createStyles, makeStyles } from '@mui/styles'; +import { styled } from '@mui/material/styles'; import { GridCellParams } from '@mui/x-data-grid'; -const defaultTheme = createTheme(); -const useStyles = makeStyles( - (theme) => - createStyles({ - root: { - width: '100%', - fontVariantNumeric: 'tabular-nums', - }, - positive: { - color: - theme.palette.mode === 'light' ? theme.palette.success.dark : theme.palette.success.light, - }, - negative: { - color: - theme.palette.mode === 'light' ? theme.palette.error.dark : theme.palette.error.light, - }, - }), - { defaultTheme }, -); +const Value = styled('div')(({ theme }) => ({ + width: '100%', + fontVariantNumeric: 'tabular-nums', + '&.positive': { + color: + theme.palette.mode === 'light' ? theme.palette.success.dark : theme.palette.success.light, + }, + '&.negative': { + color: theme.palette.mode === 'light' ? theme.palette.error.dark : theme.palette.error.light, + }, +})); function pnlFormatter(value: number) { return value < 0 ? `(${Math.abs(value).toLocaleString()})` : value.toLocaleString(); @@ -34,17 +25,16 @@ interface PnlProps { const Pnl = React.memo(function Pnl(props: PnlProps) { const { value } = props; - const classes = useStyles(); return ( -
    0, - [classes.negative]: value < 0, + 0, + negative: value < 0, })} > {pnlFormatter(value)} -
    + ); }); diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderProgress.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderProgress.tsx index c18647de9c15..f0e108c5dcba 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderProgress.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderProgress.tsx @@ -1,65 +1,58 @@ import * as React from 'react'; import clsx from 'clsx'; import { GridCellParams } from '@mui/x-data-grid-pro'; -import { createTheme } from '@mui/material/styles'; -import { createStyles, makeStyles } from '@mui/styles'; - -const defaultTheme = createTheme(); -const useStyles = makeStyles( - (theme) => - createStyles({ - root: { - border: `1px solid ${theme.palette.divider}`, - position: 'relative', - overflow: 'hidden', - width: '100%', - height: 26, - borderRadius: 2, - }, - value: { - position: 'absolute', - lineHeight: '24px', - width: '100%', - display: 'flex', - justifyContent: 'center', - }, - bar: { - height: '100%', - '&.low': { - backgroundColor: '#f44336', - }, - '&.medium': { - backgroundColor: '#efbb5aa3', - }, - '&.high': { - backgroundColor: '#088208a3', - }, - }, - }), - { defaultTheme }, -); +import { styled } from '@mui/material/styles'; interface ProgressBarProps { value: number; } +const Root = styled('div')(({ theme }) => ({ + border: `1px solid ${theme.palette.divider}`, + position: 'relative', + overflow: 'hidden', + width: '100%', + height: 26, + borderRadius: 2, +})); + +const Value = styled('div')({ + position: 'absolute', + lineHeight: '24px', + width: '100%', + display: 'flex', + justifyContent: 'center', +}); + +const Bar = styled('div')({ + height: '100%', + '&.low': { + backgroundColor: '#f44336', + }, + '&.medium': { + backgroundColor: '#efbb5aa3', + }, + '&.high': { + backgroundColor: '#088208a3', + }, +}); + const ProgressBar = React.memo(function ProgressBar(props: ProgressBarProps) { const { value } = props; const valueInPercent = value * 100; - const classes = useStyles(); return ( -
    -
    {`${valueInPercent.toLocaleString()} %`}
    -
    + {`${valueInPercent.toLocaleString()} %`} + = 30 && valueInPercent <= 70, high: valueInPercent > 70, })} style={{ maxWidth: `${valueInPercent}%` }} /> -
    + ); }); diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderRating.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderRating.tsx index b48494aa2aa5..e28718af0b19 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderRating.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderRating.tsx @@ -1,26 +1,8 @@ import * as React from 'react'; -import { createTheme } from '@mui/material/styles'; -import { createStyles, makeStyles } from '@mui/styles'; +import Box from '@mui/material/Box'; import { GridCellParams } from '@mui/x-data-grid-pro'; import Rating from '@mui/material/Rating'; -const defaultTheme = createTheme(); -const useStyles = makeStyles( - (theme) => - createStyles({ - root: { - display: 'flex', - alignItems: 'center', - lineHeight: '24px', - color: theme.palette.text.secondary, - '& .MuiRating-root': { - marginRight: theme.spacing(1), - }, - }, - }), - { defaultTheme }, -); - interface RatingValueProps { name: string; value: number; @@ -28,11 +10,18 @@ interface RatingValueProps { const RatingValue = React.memo(function RatingValue(props: RatingValueProps) { const { name, value } = props; - const classes = useStyles(); return ( -
    - {Math.round(Number(value) * 10) / 10} -
    + + {' '} + {Math.round(Number(value) * 10) / 10} + ); }); diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderStatus.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderStatus.tsx index 11986b3c5346..15a75723d6af 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderStatus.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderStatus.tsx @@ -1,54 +1,43 @@ import * as React from 'react'; -import clsx from 'clsx'; import ReportProblemIcon from '@mui/icons-material/ReportProblem'; import InfoIcon from '@mui/icons-material/Info'; import AutorenewIcon from '@mui/icons-material/Autorenew'; import DoneIcon from '@mui/icons-material/Done'; import Chip from '@mui/material/Chip'; import { GridCellParams } from '@mui/x-data-grid-pro'; -import { createTheme } from '@mui/material/styles'; -import { createStyles, makeStyles } from '@mui/styles'; +import { styled } from '@mui/material/styles'; -const defaultTheme = createTheme(); -const useStyles = makeStyles( - (theme) => - createStyles({ - root: { - justifyContent: 'left', - '& .icon': { - color: 'inherit', - }, - }, - Open: { - color: theme.palette.info.dark, - border: `1px solid ${theme.palette.info.main}`, - }, - Filled: { - color: theme.palette.success.dark, - border: `1px solid ${theme.palette.success.main}`, - }, - PartiallyFilled: { - color: theme.palette.warning.dark, - border: `1px solid ${theme.palette.warning.main}`, - }, - Rejected: { - color: theme.palette.error.dark, - border: `1px solid ${theme.palette.error.main}`, - }, - }), - { defaultTheme }, -); - -type Statuses = keyof ReturnType; +const StyledChip = styled(Chip)(({ theme }) => ({ + justifyContent: 'left', + '& .icon': { + color: 'inherit', + }, + '&.Open': { + color: theme.palette.info.dark, + border: `1px solid ${theme.palette.info.main}`, + }, + '&.Filled': { + color: theme.palette.success.dark, + border: `1px solid ${theme.palette.success.main}`, + }, + '&.PartiallyFilled': { + color: theme.palette.warning.dark, + border: `1px solid ${theme.palette.warning.main}`, + }, + '&.Rejected': { + color: theme.palette.error.dark, + border: `1px solid ${theme.palette.error.main}`, + }, +})); interface StatusProps { - status: Statuses; + status: string; } const Status = React.memo((props: StatusProps) => { const { status } = props; + let icon: any = null; - const classes = useStyles(); if (status === 'Rejected') { icon = ; } else if (status === 'Open') { @@ -58,18 +47,14 @@ const Status = React.memo((props: StatusProps) => { } else if (status === 'Filled') { icon = ; } + let label: string = status; if (status === 'PartiallyFilled') { label = 'Partially Filled'; } + return ( - + ); }); @@ -78,5 +63,5 @@ export function renderStatus(params: GridCellParams) { return ''; } - return ; + return ; } diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderTotalPrice.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderTotalPrice.tsx index 2861f2b03b22..a28a7fe3b4f8 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderTotalPrice.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderTotalPrice.tsx @@ -1,27 +1,24 @@ import * as React from 'react'; import clsx from 'clsx'; -import { alpha, createTheme } from '@mui/material/styles'; -import { createStyles, makeStyles } from '@mui/styles'; +import { alpha, styled } from '@mui/material/styles'; import { GridCellParams } from '@mui/x-data-grid'; -const defaultTheme = createTheme(); -const useStyles = makeStyles( - (theme) => - createStyles({ - root: { - width: '100%', - paddingRight: 8, - fontVariantNumeric: 'tabular-nums', - }, - good: { - backgroundColor: alpha(theme.palette.success.main, 0.3), - }, - bad: { - backgroundColor: alpha(theme.palette.error.main, 0.3), - }, - }), - { defaultTheme }, -); +const Value = styled('div')(({ theme }) => ({ + width: '100%', + height: '100%', + lineHeight: '100%', + paddingRight: 8, + fontVariantNumeric: 'tabular-nums', + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + '&.good': { + backgroundColor: alpha(theme.palette.success.main, 0.3), + }, + '&.bad': { + backgroundColor: alpha(theme.palette.error.main, 0.3), + }, +})); interface TotalPriceProps { value: number; @@ -34,16 +31,15 @@ const currencyFormatter = new Intl.NumberFormat('en-US', { const TotalPrice = React.memo(function TotalPrice(props: TotalPriceProps) { const { value } = props; - const classes = useStyles(); return ( -
    1000000, - [classes.bad]: value < 1000000, + 1000000, + bad: value < 1000000, })} > {currencyFormatter.format(value)} -
    + ); }); diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 78d065faaded..6eb289c0fc0f 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -18,7 +18,6 @@ "dependencies": { "@mui/icons-material": "^5.2.5", "@mui/material": "^5.2.8", - "@mui/styles": "^5.2.3", "@mui/x-data-grid": "5.2.2", "@mui/x-data-grid-generator": "5.2.2", "@mui/x-data-grid-pro": "5.2.2", diff --git a/packages/storybook/src/stories/grid-filter.stories.tsx b/packages/storybook/src/stories/grid-filter.stories.tsx index ecffda8571a8..ca8706049c2e 100644 --- a/packages/storybook/src/stories/grid-filter.stories.tsx +++ b/packages/storybook/src/stories/grid-filter.stories.tsx @@ -1,6 +1,7 @@ +import * as React from 'react'; import Button from '@mui/material/Button'; +import Box from '@mui/material/Box'; import InputAdornment from '@mui/material/InputAdornment'; -import { makeStyles } from '@mui/styles'; import { DataGrid } from '@mui/x-data-grid'; import Rating from '@mui/material/Rating'; import { @@ -19,7 +20,6 @@ import { } from '@mui/x-data-grid-pro'; import { useDemoData, randomArrayItem } from '@mui/x-data-grid-generator'; import { action } from '@storybook/addon-actions'; -import * as React from 'react'; import { randomInt } from '../data/random-generator'; import { useData } from '../hooks/useData'; @@ -431,18 +431,7 @@ export function CommodityWithNewRowsViaApi() { ); } -const useStyles = makeStyles({ - ratingContainer: { - display: 'inline-flex', - flexDirection: 'row', - alignItems: 'center', - height: 48, - paddingLeft: 20, - }, -}); - function RatingInputValue(props: GridFilterInputValueProps) { - const classes = useStyles(); const { item, applyValue } = props; const onFilterChange = React.useCallback( @@ -454,14 +443,22 @@ function RatingInputValue(props: GridFilterInputValueProps) { ); return ( -
    + -
    + ); } diff --git a/packages/storybook/src/stories/grid-rows.stories.tsx b/packages/storybook/src/stories/grid-rows.stories.tsx index 77178af7b406..69f20e77ea42 100644 --- a/packages/storybook/src/stories/grid-rows.stories.tsx +++ b/packages/storybook/src/stories/grid-rows.stories.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; +import { styled } from '@mui/material/styles'; import Alert from '@mui/material/Alert'; import Typography from '@mui/material/Typography'; import Button from '@mui/material/Button'; import Popper from '@mui/material/Popper'; import Paper from '@mui/material/Paper'; -import { createTheme } from '@mui/material/styles'; -import { createStyles, makeStyles } from '@mui/styles'; +import Box from '@mui/material/Box'; import { GridCellValue, GridCellParams, @@ -194,36 +194,12 @@ interface GridCellExpandProps { width: number; } -const defaultTheme = createTheme(); -const useStyles = makeStyles( - (theme) => - createStyles({ - root: { - alignItems: 'center', - lineHeight: '24px', - width: '100%', - height: '100%', - position: 'relative', - display: 'flex', - '& .MuiRating-root': { - marginRight: theme.spacing(1), - }, - '& .cellValue': { - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - }, - }, - }), - { defaultTheme }, -); const GridCellExpand = React.memo(function CellExpand(props: GridCellExpandProps) { const { width, value } = props; const wrapper = React.useRef(null); const cellDiv = React.useRef(null); const cellValue = React.useRef(null); const [anchorEl, setAnchorEl] = React.useState(null); - const classes = useStyles(); const [showFullCell, setShowFullCell] = React.useState(false); const [showPopper, setShowPopper] = React.useState(false); @@ -258,11 +234,18 @@ const GridCellExpand = React.memo(function CellExpand(props: GridCellExpandProps }, [setShowFullCell, showFullCell]); return ( -
    -
    + {value} -
    + {showPopper && ( )} -
    + ); }); @@ -442,29 +432,26 @@ function validateEmail(email) { return re.test(String(email).toLowerCase()); } -const useEditCellStyles = makeStyles({ - root: { - '& .MuiDataGrid-cell--editable': { - backgroundColor: 'rgba(184,250,158,0.19)', - color: '#1a3e72', - }, - '& .MuiDataGrid-cell--editing': { - backgroundColor: 'rgb(255,215,115, 0.19)', - color: '#1a3e72', - '& .MuiInputBase-root': { - height: '100%', - }, - }, - '& .Mui-error': { - backgroundColor: 'rgb(126,10,15, 0.1)', - color: '#750f0f', +const StyledDataGridPro = styled(DataGridPro)({ + '& .MuiDataGrid-cell--editable': { + backgroundColor: 'rgba(184,250,158,0.19)', + color: '#1a3e72', + }, + '& .MuiDataGrid-cell--editing': { + backgroundColor: 'rgb(255,215,115, 0.19)', + color: '#1a3e72', + '& .MuiInputBase-root': { + height: '100%', }, }, + '& .Mui-error': { + backgroundColor: 'rgb(126,10,15, 0.1)', + color: '#750f0f', + }, }); export function EditRowsControl() { const apiRef = useGridApiRef(); - const classes = useEditCellStyles(); const [selectedCell, setSelectedCell] = React.useState<[string, string, GridCellValue] | null>( null, @@ -540,8 +527,7 @@ export function EditRowsControl() {
    - @@ -712,8 +697,7 @@ export function ValidateEditValueWithApiRefGrid() { return (
    - ({}); const onEditRowsModelChange = React.useCallback((newModel: GridEditRowsModel) => { @@ -740,8 +723,7 @@ export function ValidateEditValueWithEditCellModelPropGrid() { return (
    - { // TODO Commit value serverside export function ValidateEditValueServerSide() { const apiRef = useGridApiRef(); - const classes = useEditCellStyles(); const keyStrokeTimeoutRef = React.useRef(); const handleCellEditPropChange = React.useCallback< @@ -811,8 +792,7 @@ export function ValidateEditValueServerSide() { return (
    - (null); @@ -886,8 +865,7 @@ export function EditCellUsingExternalButtonGrid() { {buttonLabel}
    - { const type = await request.resourceType(); - if (type === 'image') { + // Block all images except the flags + if (type === 'image' && !request.url().startsWith('https://flagcdn.com')) { route.abort(); } else { route.continue();