diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index e112f7be51a7..07306021258e 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -19,7 +19,7 @@ jobs: uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@4dd16135b69a43b6c8efb853346f8437d92d3c93 # v3.26.6 + uses: github/codeql-action/init@294a9d92911152fe08befb9ec03e240add280cb3 # v3.26.8 with: languages: typescript # If you wish to specify custom queries, you can do so here or in a config file. @@ -29,4 +29,4 @@ jobs: # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs # queries: security-extended,security-and-quality - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@4dd16135b69a43b6c8efb853346f8437d92d3c93 # v3.26.6 + uses: github/codeql-action/analyze@294a9d92911152fe08befb9ec03e240add280cb3 # v3.26.8 diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index 4dd91ef555e5..5b11e2853ccc 100644 --- a/.github/workflows/scorecards.yml +++ b/.github/workflows/scorecards.yml @@ -44,6 +44,6 @@ jobs: # Upload the results to GitHub's code scanning dashboard. - name: Upload to code-scanning - uses: github/codeql-action/upload-sarif@4dd16135b69a43b6c8efb853346f8437d92d3c93 # v3.26.6 + uses: github/codeql-action/upload-sarif@294a9d92911152fe08befb9ec03e240add280cb3 # v3.26.8 with: sarif_file: results.sarif diff --git a/.github/workflows/vale-action.yml b/.github/workflows/vale-action.yml index 53ce0e90216f..b2bb951d043c 100644 --- a/.github/workflows/vale-action.yml +++ b/.github/workflows/vale-action.yml @@ -14,10 +14,12 @@ jobs: steps: - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 - uses: errata-ai/vale-action@38bf078c328061f59879b347ca344a718a736018 # v2.1.0 + continue-on-error: true # GitHub Action flag needed until https://github.com/errata-ai/vale-action/issues/89 is fixed with: - reporter: github-pr-review - files: docs/data - env: + # Errors should be more visible + fail_on_error: true + # The other reports don't work, not really https://github.com/reviewdog/reviewdog#reporters + reporter: github-pr-check # Required, set by GitHub actions automatically: # https://docs.github.com/en/actions/security-guides/automatic-token-authentication#about-the-github_token-secret - GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} + token: ${{secrets.GITHUB_TOKEN}} diff --git a/.vale.ini b/.vale.ini index 217e3d4d501a..0d8bbaf0eec3 100644 --- a/.vale.ini +++ b/.vale.ini @@ -1,6 +1,6 @@ # Vale config. More information at https://vale.sh/docs/topics/config/ StylesPath = .github/styles -MinAlertLevel = error +MinAlertLevel = warning # To update mui-vale package: # 1. Go to the docs folder in the material-ui repo diff --git a/CHANGELOG.md b/CHANGELOG.md index f2a6607527ba..c92c0d3fcf2a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -75,7 +75,7 @@ Same changes as in `@mui/x-charts@7.17.0`. ### Docs - [docs] Add missing callout on "Imperative API" tree view sections (#14503) @flaviendelangle -- [docs] Fix broken redirection to MUI X v5 @oliviertassinari +- [docs] Fix broken redirection to MUIĀ X v5 @oliviertassinari - [docs] Fix multiple `console.error` messages on `charts` docs (#14554) @JCQuintas - [docs] Fixed typo in Row Grouping recipes (#14549) @Miodini - [docs] Match title with blog posts @oliviertassinari @@ -195,7 +195,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss - šŸ’« Support MaterialĀ UI v6 (`@mui/material@6`) peer dependency (#14142) @cherniavskii -You can now use MUI X components with either v5 or v6 of `@mui/material` package šŸŽ‰ +You can now use MUIĀ X components with either v5 or v6 of `@mui/material` package šŸŽ‰ - šŸž Bugfixes @@ -240,7 +240,7 @@ Same changes as in `@mui/x-charts@7.15.0`, plus: - [docs] Fix sentence case `h2` @oliviertassinari - [docs] Clarify contribution guide references @oliviertassinari -- [docs] Fix Stack Overflow issue canned response @oliviertassinari +- [docs] Fix StackĀ Overflow issue canned response @oliviertassinari - [docs] Fix outdated link to support page @oliviertassinari - [docs] Fix use of MaterialĀ UI @oliviertassinari - [docs] Update deprecated props in docs (#14295) @JCQuintas @@ -498,7 +498,7 @@ The [Pro plan](https://mui.com/x/introduction/licensing/#pro-plan) is receiving As always, every feature released as part of the MIT plan will remain free and MIT licensed forever. -This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the [Upcoming changes to MUI X pricing in 2024](https://mui.com/blog/mui-x-sep-2024-price-update/) blog post. +This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the [Upcoming changes to MUIĀ X pricing in 2024](https://mui.com/blog/mui-x-sep-2024-price-update/) blog post. ### Highlights @@ -563,7 +563,7 @@ Same changes as in `@mui/x-date-pickers@7.12.0`. #### `@mui/x-charts@7.12.0` - [charts] Fix incorrect `axisId` prop being allowed in xAxis/yAxis config. Use `id` instead. (#13986) @JCQuintas -- [charts] Use vendor to have Common JS bundle working out of the box (#13608) @alexfauquette +- [charts] Use vendor to have CommonJS bundle working out of the box (#13608) @alexfauquette - [charts] Divide the `SeriesProvider` to use in filtering (#14026) @JCQuintas ### Tree View diff --git a/README.md b/README.md index 62125ab0aff6..d22304111b44 100644 --- a/README.md +++ b/README.md @@ -26,14 +26,14 @@ Each component provides best-in-class UX and DX, with sophisticated UX workflows for data-rich applications. Components include the Data Grid, Date and Time Pickers, Charts, and TreeĀ View. -MUI X extends the core functionality of [MaterialĀ UI](https://github.com/mui/material-ui/), but the advanced components also stand on their own and can be fully customized to meet the needs of any design system. +MUIĀ X extends the core functionality of [MaterialĀ UI](https://github.com/mui/material-ui/), but the advanced components also stand on their own and can be fully customized to meet the needs of any design system. -MUI X is **open-core**: [Community](#community-plan) components are MIT-licensed and free forever, while more advanced features and components require a [Pro](#pro-plan) or [Premium](#premium-plan) commercial license. +MUIĀ X is **open-core**: [Community](#community-plan) components are MIT-licensed and free forever, while more advanced features and components require a [Pro](#pro-plan) or [Premium](#premium-plan) commercial license. See [Licensing](#licensing) for more information. ## Documentation -Get started in the [MUI X documentation](https://mui.com/x/introduction/). +Get started in the [MUIĀ X documentation](https://mui.com/x/introduction/). - [Data Grid](https://mui.com/x/react-data-grid/) - [Date and Time Pickers](https://mui.com/x/react-date-pickers/) diff --git a/babel.config.js b/babel.config.js index 40d90dfbaae1..c5948a3c53c0 100644 --- a/babel.config.js +++ b/babel.config.js @@ -104,14 +104,14 @@ module.exports = function getBabelConfig(api) { if (process.env.NODE_ENV === 'test') { plugins.push(['@babel/plugin-transform-export-namespace-from']); - // We replace `date-fns` imports with an aliased `date-fns@v3` version installed as `date-fns-v3` for tests. + // We replace `date-fns` imports with an aliased `date-fns@v4` version installed as `date-fns-v4` for tests. // The plugin is patched to only run on `AdapterDateFnsV3.ts`. - // TODO: remove when we upgrade to date-fns v3 by default. + // TODO: remove when we upgrade to date-fns v4 by default. plugins.push([ 'babel-plugin-replace-imports', { test: /date-fns/i, - replacer: 'date-fns-v3', + replacer: 'date-fns-v4', // This option is provided by the `patches/babel-plugin-replace-imports@1.0.2.patch` patch filenameIncludes: 'src/AdapterDateFnsV3/', }, diff --git a/docs/data/charts/axis/AxisTextCustomizationNoSnap.js b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js index 8a6b510e845a..e23509ea4125 100644 --- a/docs/data/charts/axis/AxisTextCustomizationNoSnap.js +++ b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js @@ -2,14 +2,12 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo'; import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset } from '../dataset/weather'; +import { dataset, valueFormatter } from '../dataset/weather'; const chartSetting = { height: 300, }; -const valueFormatter = (value) => `${value}mm`; - export default function AxisTextCustomizationNoSnap() { return ( `${value}mm`; - export default function GridDemo() { return ( `${value}mm`; - export default function GridDemo() { return ( `${value}mm`; - export default function BarsDataset() { return ( `${value}mm`; - export default function BarsDataset() { return ( `${value}mm`; - export default function GridDemo() { return ( `${value}mm`; - export default function GridDemo() { return ( `${value}mm`; - export default function HorizontalBars() { return ( `${value}mm`; - export default function HorizontalBars() { return ( `${value}mm`; - const chartSetting = { yAxis: [ { diff --git a/docs/data/charts/bars/TickPlacementBars.tsx b/docs/data/charts/bars/TickPlacementBars.tsx index 66274abbf635..d897f8d08bff 100644 --- a/docs/data/charts/bars/TickPlacementBars.tsx +++ b/docs/data/charts/bars/TickPlacementBars.tsx @@ -7,7 +7,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import Radio from '@mui/material/Radio'; import { BarChart } from '@mui/x-charts/BarChart'; import { axisClasses } from '@mui/x-charts/ChartsAxis'; -import { dataset } from '../dataset/weather'; +import { dataset, valueFormatter } from '../dataset/weather'; type TickParamsSelectorProps = { tickPlacement: 'end' | 'start' | 'middle' | 'extremities'; @@ -72,8 +72,6 @@ function TickParamsSelector({ ); } -const valueFormatter = (value: number | null) => `${value}mm`; - const chartSetting = { yAxis: [ { diff --git a/docs/data/charts/bars/bars.md b/docs/data/charts/bars/bars.md index d76e2df0bc9a..11c42dd85e93 100644 --- a/docs/data/charts/bars/bars.md +++ b/docs/data/charts/bars/bars.md @@ -104,7 +104,7 @@ Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts To give your bar chart rounded corners, you can change the value of the `borderRadius` property on the [BarChart](/x/api/charts/bar-chart/#bar-chart-prop-slots). -It will work with any positive value and will be properly applied to horizontal layouts, stacks and negative values. +It works with any positive value and is properly applied to horizontal layouts, stacks, and negative values. {{"demo": "BorderRadius.js"}} @@ -119,7 +119,7 @@ Or you can pass `'value'` to display the raw value of the bar. ### Custom Labels -You can display, change or hide labels based on conditional logic. +You can display, change, or hide labels based on conditional logic. To do so, provide a function to the `barLabel`. Labels are not displayed if the function returns `null`. diff --git a/docs/data/charts/composition/composition.md b/docs/data/charts/composition/composition.md index 71c738df0b14..f7d0c3a37a9c 100644 --- a/docs/data/charts/composition/composition.md +++ b/docs/data/charts/composition/composition.md @@ -58,9 +58,11 @@ For example, the Bar Chart component assumes that `series` will be of type `'bar With composition, the chart container isn't able to guess the series type, so you must explicitly define it. ```jsx - + }]} +/> + theme.zIndex.modal, + }} + open + placement={isMousePointer ? 'top-end' : 'top'} + anchorEl={generateVirtualElement(mousePosition)} + modifiers={[ + { + name: 'offset', + options: { + offset: [0, yOffset], + }, + }, + ]} + > + + + + + + + + + {tooltipData.seriesItems.map((seriesItem) => ( + + + + + + ))} + +
+ {tooltipData.axisFormattedValue} +
+
+
+ + {seriesItem.formattedLabel} + + + {seriesItem.formattedValue} +
+ + + + ); +} diff --git a/docs/data/charts/tooltip/CustomAxisTooltip.tsx b/docs/data/charts/tooltip/CustomAxisTooltip.tsx new file mode 100644 index 000000000000..bb893b9e83b1 --- /dev/null +++ b/docs/data/charts/tooltip/CustomAxisTooltip.tsx @@ -0,0 +1,110 @@ +import * as React from 'react'; +import NoSsr from '@mui/material/NoSsr'; +import Popper from '@mui/material/Popper'; +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; +import { useAxisTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip'; +import { generateVirtualElement } from './generateVirtualElement'; + +export function CustomAxisTooltip() { + const tooltipData = useAxisTooltip(); + const mousePosition = useMouseTracker(); // Track the mouse position on chart. + + if (!tooltipData || !mousePosition) { + // No data to display + return null; + } + + // The pointer type can be used to have different behavior based on pointer type. + const isMousePointer = mousePosition?.pointerType === 'mouse'; + // Adapt the tooltip offset to the size of the pointer. + const yOffset = isMousePointer ? 0 : 40 - mousePosition.height; + + return ( + + theme.zIndex.modal, + }} + open + placement={isMousePointer ? 'top-end' : 'top'} + anchorEl={generateVirtualElement(mousePosition)} + modifiers={[ + { + name: 'offset', + options: { + offset: [0, yOffset], + }, + }, + ]} + > + + + + + + + + + {tooltipData.seriesItems.map((seriesItem) => ( + + + + + + ))} + +
+ {tooltipData.axisFormattedValue} +
+
+
+ + {seriesItem.formattedLabel} + + + {seriesItem.formattedValue} +
+ + + + ); +} diff --git a/docs/data/charts/tooltip/CustomAxisTooltipContent.js b/docs/data/charts/tooltip/CustomAxisTooltipContent.js new file mode 100644 index 000000000000..fa3e9cf1a0af --- /dev/null +++ b/docs/data/charts/tooltip/CustomAxisTooltipContent.js @@ -0,0 +1,34 @@ +import * as React from 'react'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { BarPlot } from '@mui/x-charts/BarChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; +import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; +import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; +import { CustomAxisTooltip } from './CustomAxisTooltip'; +import { dataset, valueFormatter } from '../dataset/weather'; + +export default function CustomAxisTooltipContent() { + const id = React.useId(); + const clipPathId = `${id}-clip-path`; + return ( +
+ + + + + + + + + +
+ ); +} diff --git a/docs/data/charts/tooltip/CustomAxisTooltipContent.tsx b/docs/data/charts/tooltip/CustomAxisTooltipContent.tsx new file mode 100644 index 000000000000..796d596eaf97 --- /dev/null +++ b/docs/data/charts/tooltip/CustomAxisTooltipContent.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { BarPlot } from '@mui/x-charts/BarChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; +import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; +import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; +import { CustomAxisTooltip } from './CustomAxisTooltip'; +import { dataset, valueFormatter } from '../dataset/weather'; + +export default function CustomAxisTooltipContent() { + const id = React.useId(); + const clipPathId = `${id}-clip-path`; + return ( +
+ + + + + + + + + + +
+ ); +} diff --git a/docs/data/charts/tooltip/CustomItemTooltip.js b/docs/data/charts/tooltip/CustomItemTooltip.js new file mode 100644 index 000000000000..fcaf28469db1 --- /dev/null +++ b/docs/data/charts/tooltip/CustomItemTooltip.js @@ -0,0 +1,71 @@ +import * as React from 'react'; +import NoSsr from '@mui/material/NoSsr'; +import Popper from '@mui/material/Popper'; +import Paper from '@mui/material/Paper'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip'; +import { generateVirtualElement } from './generateVirtualElement'; + +export function CustomItemTooltip() { + const tooltipData = useItemTooltip(); + const mousePosition = useMouseTracker(); // Track the mouse position on chart. + + if (!tooltipData || !mousePosition) { + // No data to display + return null; + } + + // The pointer type can be used to have different behavior based on pointer type. + const isMousePointer = mousePosition?.pointerType === 'mouse'; + // Adapt the tooltip offset to the size of the pointer. + const yOffset = isMousePointer ? 0 : 40 - mousePosition.height; + + return ( + + theme.zIndex.modal, + }} + open + placement={isMousePointer ? 'top-end' : 'top'} + anchorEl={generateVirtualElement(mousePosition)} + modifiers={[ + { + name: 'offset', + options: { + offset: [0, yOffset], + }, + }, + ]} + > + + +
+ + {tooltipData.label} + + {tooltipData.formattedValue} + + + + + ); +} diff --git a/docs/data/charts/tooltip/CustomItemTooltip.tsx b/docs/data/charts/tooltip/CustomItemTooltip.tsx new file mode 100644 index 000000000000..fcaf28469db1 --- /dev/null +++ b/docs/data/charts/tooltip/CustomItemTooltip.tsx @@ -0,0 +1,71 @@ +import * as React from 'react'; +import NoSsr from '@mui/material/NoSsr'; +import Popper from '@mui/material/Popper'; +import Paper from '@mui/material/Paper'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip'; +import { generateVirtualElement } from './generateVirtualElement'; + +export function CustomItemTooltip() { + const tooltipData = useItemTooltip(); + const mousePosition = useMouseTracker(); // Track the mouse position on chart. + + if (!tooltipData || !mousePosition) { + // No data to display + return null; + } + + // The pointer type can be used to have different behavior based on pointer type. + const isMousePointer = mousePosition?.pointerType === 'mouse'; + // Adapt the tooltip offset to the size of the pointer. + const yOffset = isMousePointer ? 0 : 40 - mousePosition.height; + + return ( + + theme.zIndex.modal, + }} + open + placement={isMousePointer ? 'top-end' : 'top'} + anchorEl={generateVirtualElement(mousePosition)} + modifiers={[ + { + name: 'offset', + options: { + offset: [0, yOffset], + }, + }, + ]} + > + + +
+ + {tooltipData.label} + + {tooltipData.formattedValue} + + + + + ); +} diff --git a/docs/data/charts/tooltip/CustomItemTooltipContent.js b/docs/data/charts/tooltip/CustomItemTooltipContent.js new file mode 100644 index 000000000000..6cda5693841c --- /dev/null +++ b/docs/data/charts/tooltip/CustomItemTooltipContent.js @@ -0,0 +1,37 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import Paper from '@mui/material/Paper'; + +/** + * Render a basic tooltip content for an item. + */ +export function CustomItemTooltipContent(props) { + return ( + + +
+ + {props.label} + + {props.formattedValue} + + + ); +} diff --git a/docs/data/charts/tooltip/CustomItemTooltipContent.tsx b/docs/data/charts/tooltip/CustomItemTooltipContent.tsx new file mode 100644 index 000000000000..a85a7ec3fe28 --- /dev/null +++ b/docs/data/charts/tooltip/CustomItemTooltipContent.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import Paper from '@mui/material/Paper'; +import { UseItemTooltipReturnValue } from '@mui/x-charts/ChartsTooltip'; +import { ChartSeriesType } from '@mui/x-charts/internals'; + +/** + * Render a basic tooltip content for an item. + */ +export function CustomItemTooltipContent( + props: Pick< + UseItemTooltipReturnValue, + 'color' | 'label' | 'formattedValue' + >, +) { + return ( + + +
+ + {props.label} + + {props.formattedValue} + + + ); +} diff --git a/docs/data/charts/tooltip/CustomTooltipContent.js b/docs/data/charts/tooltip/CustomTooltipContent.js new file mode 100644 index 000000000000..0ed26075d2f3 --- /dev/null +++ b/docs/data/charts/tooltip/CustomTooltipContent.js @@ -0,0 +1,34 @@ +import * as React from 'react'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { BarPlot } from '@mui/x-charts/BarChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; +import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; +import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; +import { CustomItemTooltip } from './CustomItemTooltip'; +import { dataset, valueFormatter } from '../dataset/weather'; + +export default function CustomTooltipContent() { + const id = React.useId(); + const clipPathId = `${id}-clip-path`; + return ( +
+ + + + + + + + + +
+ ); +} diff --git a/docs/data/charts/tooltip/CustomTooltipContent.tsx b/docs/data/charts/tooltip/CustomTooltipContent.tsx new file mode 100644 index 000000000000..a31de30e5186 --- /dev/null +++ b/docs/data/charts/tooltip/CustomTooltipContent.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { BarPlot } from '@mui/x-charts/BarChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; +import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; +import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; +import { CustomItemTooltip } from './CustomItemTooltip'; +import { dataset, valueFormatter } from '../dataset/weather'; + +export default function CustomTooltipContent() { + const id = React.useId(); + const clipPathId = `${id}-clip-path`; + return ( +
+ + + + + + + + + + +
+ ); +} diff --git a/docs/data/charts/tooltip/CustomTooltipPosition.js b/docs/data/charts/tooltip/CustomTooltipPosition.js new file mode 100644 index 000000000000..fd43f2e89498 --- /dev/null +++ b/docs/data/charts/tooltip/CustomTooltipPosition.js @@ -0,0 +1,65 @@ +import * as React from 'react'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormControl from '@mui/material/FormControl'; +import FormLabel from '@mui/material/FormLabel'; +import RadioGroup from '@mui/material/RadioGroup'; +import Radio from '@mui/material/Radio'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { BarPlot } from '@mui/x-charts/BarChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; +import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; +import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; +import { ItemTooltip } from './ItemTooltip'; +import { ItemTooltipFixedY } from './ItemTooltipFixedY'; +import { ItemTooltipTopElement } from './ItemTooltipTopElement'; +import { dataset, valueFormatter } from '../dataset/weather'; + +export default function CustomTooltipPosition() { + const [tooltipType, setTootltipType] = React.useState('itemTop'); + + const id = React.useId(); + const clipPathId = `${id}-clip-path`; + return ( +
+ + + tooltip placement + + setTootltipType(event.target.value)} + > + } label="mouse" /> + } + label="top of chart" + /> + } label="top of bar" /> + + + + + + + + + {tooltipType === 'mouse' && } + {tooltipType === 'fixedY' && } + {tooltipType === 'itemTop' && } + + +
+ ); +} diff --git a/docs/data/charts/tooltip/CustomTooltipPosition.tsx b/docs/data/charts/tooltip/CustomTooltipPosition.tsx new file mode 100644 index 000000000000..f16aab88c8dd --- /dev/null +++ b/docs/data/charts/tooltip/CustomTooltipPosition.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormControl from '@mui/material/FormControl'; +import FormLabel from '@mui/material/FormLabel'; +import RadioGroup from '@mui/material/RadioGroup'; +import Radio from '@mui/material/Radio'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { BarPlot } from '@mui/x-charts/BarChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; +import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; +import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; +import { ItemTooltip } from './ItemTooltip'; +import { ItemTooltipFixedY } from './ItemTooltipFixedY'; +import { ItemTooltipTopElement } from './ItemTooltipTopElement'; +import { dataset, valueFormatter } from '../dataset/weather'; + +export default function CustomTooltipPosition() { + const [tooltipType, setTootltipType] = React.useState< + 'mouse' | 'fixedY' | 'itemTop' + >('itemTop'); + + const id = React.useId(); + const clipPathId = `${id}-clip-path`; + return ( +
+ + + tooltip placement + + + setTootltipType(event.target.value as 'mouse' | 'fixedY' | 'itemTop') + } + > + } label="mouse" /> + } + label="top of chart" + /> + } label="top of bar" /> + + + + + + + + + + {tooltipType === 'mouse' && } + {tooltipType === 'fixedY' && } + {tooltipType === 'itemTop' && } + + +
+ ); +} diff --git a/docs/data/charts/tooltip/ItemTooltip.js b/docs/data/charts/tooltip/ItemTooltip.js new file mode 100644 index 000000000000..68fbab1d77ae --- /dev/null +++ b/docs/data/charts/tooltip/ItemTooltip.js @@ -0,0 +1,45 @@ +import * as React from 'react'; +import NoSsr from '@mui/material/NoSsr'; +import Popper from '@mui/material/Popper'; +import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip'; +import { CustomItemTooltipContent } from './CustomItemTooltipContent'; +import { generateVirtualElement } from './generateVirtualElement'; + +export function ItemTooltip() { + const tooltipData = useItemTooltip(); + const mousePosition = useMouseTracker(); // Track the mouse position on chart. + + if (!tooltipData || !mousePosition) { + // No data to display + return null; + } + + // The pointer type can be used to have different behavior based on pointer type. + const isMousePointer = mousePosition?.pointerType === 'mouse'; + // Adapt the tooltip offset to the size of the pointer. + const yOffset = isMousePointer ? 0 : 40 - mousePosition.height; + + return ( + + theme.zIndex.modal, + }} + open + placement={isMousePointer ? 'top-end' : 'top'} + anchorEl={generateVirtualElement(mousePosition)} + modifiers={[ + { + name: 'offset', + options: { + offset: [0, yOffset], + }, + }, + ]} + > + + + + ); +} diff --git a/docs/data/charts/tooltip/ItemTooltip.tsx b/docs/data/charts/tooltip/ItemTooltip.tsx new file mode 100644 index 000000000000..68fbab1d77ae --- /dev/null +++ b/docs/data/charts/tooltip/ItemTooltip.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +import NoSsr from '@mui/material/NoSsr'; +import Popper from '@mui/material/Popper'; +import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip'; +import { CustomItemTooltipContent } from './CustomItemTooltipContent'; +import { generateVirtualElement } from './generateVirtualElement'; + +export function ItemTooltip() { + const tooltipData = useItemTooltip(); + const mousePosition = useMouseTracker(); // Track the mouse position on chart. + + if (!tooltipData || !mousePosition) { + // No data to display + return null; + } + + // The pointer type can be used to have different behavior based on pointer type. + const isMousePointer = mousePosition?.pointerType === 'mouse'; + // Adapt the tooltip offset to the size of the pointer. + const yOffset = isMousePointer ? 0 : 40 - mousePosition.height; + + return ( + + theme.zIndex.modal, + }} + open + placement={isMousePointer ? 'top-end' : 'top'} + anchorEl={generateVirtualElement(mousePosition)} + modifiers={[ + { + name: 'offset', + options: { + offset: [0, yOffset], + }, + }, + ]} + > + + + + ); +} diff --git a/docs/data/charts/tooltip/ItemTooltipFixedY.js b/docs/data/charts/tooltip/ItemTooltipFixedY.js new file mode 100644 index 000000000000..4e19cd1bc9f6 --- /dev/null +++ b/docs/data/charts/tooltip/ItemTooltipFixedY.js @@ -0,0 +1,41 @@ +import * as React from 'react'; +import NoSsr from '@mui/material/NoSsr'; +import Popper from '@mui/material/Popper'; +import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip'; +import { useDrawingArea, useSvgRef } from '@mui/x-charts/hooks'; +import { CustomItemTooltipContent } from './CustomItemTooltipContent'; +import { generateVirtualElement } from './generateVirtualElement'; + +export function ItemTooltipFixedY() { + const tooltipData = useItemTooltip(); + const mousePosition = useMouseTracker(); + const svgRef = useSvgRef(); // Get the ref of the component. + const drawingArea = useDrawingArea(); // Get the dimensions of the chart inside the . + + if (!tooltipData || !mousePosition) { + // No data to display + return null; + } + + const tooltipPosition = { + ...mousePosition, + // Add the y-coordinate of the to the to margin between the and the drawing area + y: svgRef.current.getBoundingClientRect().top + drawingArea.top, + }; + + return ( + + theme.zIndex.modal, + }} + open + placement="top" + anchorEl={generateVirtualElement(tooltipPosition)} + > + + + + ); +} diff --git a/docs/data/charts/tooltip/ItemTooltipFixedY.tsx b/docs/data/charts/tooltip/ItemTooltipFixedY.tsx new file mode 100644 index 000000000000..3059c260afca --- /dev/null +++ b/docs/data/charts/tooltip/ItemTooltipFixedY.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import NoSsr from '@mui/material/NoSsr'; +import Popper from '@mui/material/Popper'; +import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip'; +import { useDrawingArea, useSvgRef } from '@mui/x-charts/hooks'; +import { CustomItemTooltipContent } from './CustomItemTooltipContent'; +import { generateVirtualElement, MousePosition } from './generateVirtualElement'; + +export function ItemTooltipFixedY() { + const tooltipData = useItemTooltip(); + const mousePosition = useMouseTracker(); + const svgRef = useSvgRef(); // Get the ref of the component. + const drawingArea = useDrawingArea(); // Get the dimensions of the chart inside the . + + if (!tooltipData || !mousePosition) { + // No data to display + return null; + } + + const tooltipPosition: MousePosition = { + ...mousePosition, + // Add the y-coordinate of the to the to margin between the and the drawing area + y: svgRef.current.getBoundingClientRect().top + drawingArea.top, + }; + + return ( + + theme.zIndex.modal, + }} + open + placement="top" + anchorEl={generateVirtualElement(tooltipPosition)} + > + + + + ); +} diff --git a/docs/data/charts/tooltip/ItemTooltipTopElement.js b/docs/data/charts/tooltip/ItemTooltipTopElement.js new file mode 100644 index 000000000000..7d86e69b81e4 --- /dev/null +++ b/docs/data/charts/tooltip/ItemTooltipTopElement.js @@ -0,0 +1,67 @@ +import * as React from 'react'; + +import NoSsr from '@mui/material/NoSsr'; +import Popper from '@mui/material/Popper'; +import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip'; +import { useSvgRef, useXAxis, useXScale, useYScale } from '@mui/x-charts/hooks'; +import { CustomItemTooltipContent } from './CustomItemTooltipContent'; +import { generateVirtualElement } from './generateVirtualElement'; + +export function ItemTooltipTopElement() { + const tooltipData = useItemTooltip(); + const mousePosition = useMouseTracker(); + // Get xAxis config to access its data array. + const xAxis = useXAxis(); + // Get the scale which map values to SVG coordinates. + // Pass the axis id to this hook if you use multiple one. + const xScale = useXScale(); + // Get the scale which map values to SVG coordinates. + // Pass the axis id to this hook if you use multiple one. + const yScale = useYScale(); + // Get the ref of the component. + const svgRef = useSvgRef(); + + if (!tooltipData || !mousePosition || !xAxis.data) { + // No data to display + return null; + } + + if ( + tooltipData.identifier.type !== 'bar' || + tooltipData.identifier.dataIndex === undefined || + tooltipData.value === null + ) { + // This demo is only about bar charts + return null; + } + + const xValue = xAxis.data[tooltipData.identifier.dataIndex]; + + const svgYPosition = yScale(tooltipData.value) ?? 0; + const svgXPosition = xScale(xValue) ?? 0; + + const tooltipPosition = { + ...mousePosition, + // Add half of `yScale.step()` to be in the middle of the band. + x: + svgRef.current.getBoundingClientRect().left + svgXPosition + xScale.step() / 2, + // Add the coordinate of the to the to position inside the . + y: svgRef.current.getBoundingClientRect().top + svgYPosition, + }; + + return ( + + theme.zIndex.modal, + }} + open + placement="top" + anchorEl={generateVirtualElement(tooltipPosition)} + > + + + + ); +} diff --git a/docs/data/charts/tooltip/ItemTooltipTopElement.tsx b/docs/data/charts/tooltip/ItemTooltipTopElement.tsx new file mode 100644 index 000000000000..d69ab33e96da --- /dev/null +++ b/docs/data/charts/tooltip/ItemTooltipTopElement.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import { ScaleBand } from '@mui/x-charts-vendor/d3-scale'; +import NoSsr from '@mui/material/NoSsr'; +import Popper from '@mui/material/Popper'; +import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip'; +import { useSvgRef, useXAxis, useXScale, useYScale } from '@mui/x-charts/hooks'; +import { CustomItemTooltipContent } from './CustomItemTooltipContent'; +import { generateVirtualElement, MousePosition } from './generateVirtualElement'; + +export function ItemTooltipTopElement() { + const tooltipData = useItemTooltip<'bar'>(); + const mousePosition = useMouseTracker(); + // Get xAxis config to access its data array. + const xAxis = useXAxis(); + // Get the scale which map values to SVG coordinates. + // Pass the axis id to this hook if you use multiple one. + const xScale = useXScale(); + // Get the scale which map values to SVG coordinates. + // Pass the axis id to this hook if you use multiple one. + const yScale = useYScale(); + // Get the ref of the component. + const svgRef = useSvgRef(); + + if (!tooltipData || !mousePosition || !xAxis.data) { + // No data to display + return null; + } + + if ( + tooltipData.identifier.type !== 'bar' || + tooltipData.identifier.dataIndex === undefined || + tooltipData.value === null + ) { + // This demo is only about bar charts + return null; + } + + const xValue = xAxis.data[tooltipData.identifier.dataIndex]; + + const svgYPosition = yScale(tooltipData.value) ?? 0; + const svgXPosition = xScale(xValue) ?? 0; + + const tooltipPosition: MousePosition = { + ...mousePosition, + // Add half of `yScale.step()` to be in the middle of the band. + x: + svgRef.current.getBoundingClientRect().left + + svgXPosition + + (xScale as ScaleBand).step() / 2, + // Add the coordinate of the to the to position inside the . + y: svgRef.current.getBoundingClientRect().top + svgYPosition, + }; + + return ( + + theme.zIndex.modal, + }} + open + placement="top" + anchorEl={generateVirtualElement(tooltipPosition)} + > + + + + ); +} diff --git a/docs/data/charts/tooltip/generateVirtualElement.ts b/docs/data/charts/tooltip/generateVirtualElement.ts new file mode 100644 index 000000000000..8052c84a24e1 --- /dev/null +++ b/docs/data/charts/tooltip/generateVirtualElement.ts @@ -0,0 +1,44 @@ +export type MousePosition = { + x: number; + y: number; + pointerType: 'mouse' | 'touch' | 'pen'; + height: number; +}; + +/** + * Helper faking an element bounding box for the Popper. + */ +export function generateVirtualElement(mousePosition: { x: number; y: number } | null) { + if (mousePosition === null) { + return { + getBoundingClientRect: () => ({ + width: 0, + height: 0, + x: 0, + y: 0, + top: 0, + right: 0, + bottom: 0, + left: 0, + toJSON: () => '', + }), + }; + } + const { x, y } = mousePosition; + const boundingBox = { + width: 0, + height: 0, + x, + y, + top: y, + right: x, + bottom: y, + left: x, + }; + return { + getBoundingClientRect: () => ({ + ...boundingBox, + toJSON: () => JSON.stringify(boundingBox), + }), + }; +} diff --git a/docs/data/charts/tooltip/tooltip.md b/docs/data/charts/tooltip/tooltip.md index 4c1ddb98678f..7709ca1ee039 100644 --- a/docs/data/charts/tooltip/tooltip.md +++ b/docs/data/charts/tooltip/tooltip.md @@ -176,3 +176,39 @@ You need those listeners if you are using [axes highlight](/x/react-charts/toolt {/* ... */} ``` + +### Overriding content + +#### Item Tooltip + +You can create your own tooltip by using `useItemTooltip`. +This hook returns the information about the current item user is interacting with. +It contains: + +- `identifier`: An object that identify the item. Which often contains its series type, series id, and data index. +- `color`: The color used to display the item. This includes the impact of [color map](/x/react-charts/styling/#values-color). +- `label`, `value`, `formattedValue`: Values computed to simplify the tooltip creation. + +To follow the mouse position, you can use the `useMouseTracker`, or track events on the SVG thanks to `useSvgRef`. + +{{"demo": "CustomTooltipContent.js"}} + +#### Axis Tooltip + +Like in previous section, you can create your own tooltip by using `useAxisTooltip`. +This hook returns the information about the current axis user is interacting with and the relevant series. +It contains: + +- `identifier`: An object that identify the axis. Which often contains its series type, series id, and data index. +- `color`: The color used to display the item. This includes the impact of [color map](/x/react-charts/styling/#values-color). +- `label`, `value`, `formattedValue`: Values computed to simplify the tooltip creation. + +To follow the mouse position, you can use the `useMouseTracker`, or track events on the SVG thanks to `useSvgRef`. + +{{"demo": "CustomAxisTooltipContent.js"}} + +### Tooltip position + +This demo show example about how to use additional hooks such as `useXAxis` or `useDrawingArea` to customize the tooltip position. + +{{"demo": "CustomTooltipPosition.js"}} diff --git a/docs/data/common-concepts/custom-components/custom-components.md b/docs/data/common-concepts/custom-components/custom-components.md index 28e37c605637..c398bbd01294 100644 --- a/docs/data/common-concepts/custom-components/custom-components.md +++ b/docs/data/common-concepts/custom-components/custom-components.md @@ -243,7 +243,7 @@ The module augmentation feature isn't implemented yet for the other sets of comp ## Slots of the X components -You can find the list of slots in the API documentation of each component (e.g. [DataGrid](/x/api/data-grid/data-grid/#slots), [DatePicker](/x/api/date-pickers/date-picker/#slots), [BarChart](/x/api/charts/bar-chart/#slots) or [RichTreeView](/x/api/tree-view/rich-tree-view/#slots)). +You can find the list of slots in the API documentation of each component (for example [DataGrid](/x/api/data-grid/data-grid/#slots), [DatePicker](/x/api/date-pickers/date-picker/#slots), [BarChart](/x/api/charts/bar-chart/#slots) or [RichTreeView](/x/api/tree-view/rich-tree-view/#slots)). Most of the slots have a standalone doc example to show how to use them: diff --git a/docs/data/data-grid/column-groups/GroupHeaderHeight.js b/docs/data/data-grid/column-groups/GroupHeaderHeight.js new file mode 100644 index 000000000000..fa1a96d07cb8 --- /dev/null +++ b/docs/data/data-grid/column-groups/GroupHeaderHeight.js @@ -0,0 +1,65 @@ +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; + +const columns = [ + { field: 'id', headerName: 'ID', width: 90 }, + { + field: 'firstName', + headerName: 'First name', + width: 150, + }, + { + field: 'lastName', + headerName: 'Last name', + width: 150, + }, + { + field: 'age', + headerName: 'Age', + type: 'number', + width: 110, + }, +]; + +const rows = [ + { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 }, + { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 }, + { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 }, + { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 }, + { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null }, + { id: 6, lastName: 'Melisandre', firstName: null, age: 150 }, + { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, + { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, + { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, +]; + +const columnGroupingModel = [ + { + groupId: 'Internal', + description: '', + children: [{ field: 'id' }], + }, + { + groupId: 'Basic info', + children: [ + { + groupId: 'Full name', + children: [{ field: 'lastName' }, { field: 'firstName' }], + }, + { field: 'age' }, + ], + }, +]; + +export default function GroupHeaderHeight() { + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx b/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx new file mode 100644 index 000000000000..d7099b807d89 --- /dev/null +++ b/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx @@ -0,0 +1,65 @@ +import * as React from 'react'; +import { DataGrid, GridColDef, GridColumnGroupingModel } from '@mui/x-data-grid'; + +const columns: GridColDef[] = [ + { field: 'id', headerName: 'ID', width: 90 }, + { + field: 'firstName', + headerName: 'First name', + width: 150, + }, + { + field: 'lastName', + headerName: 'Last name', + width: 150, + }, + { + field: 'age', + headerName: 'Age', + type: 'number', + width: 110, + }, +]; + +const rows = [ + { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 }, + { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 }, + { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 }, + { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 }, + { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null }, + { id: 6, lastName: 'Melisandre', firstName: null, age: 150 }, + { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, + { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, + { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, +]; + +const columnGroupingModel: GridColumnGroupingModel = [ + { + groupId: 'Internal', + description: '', + children: [{ field: 'id' }], + }, + { + groupId: 'Basic info', + children: [ + { + groupId: 'Full name', + children: [{ field: 'lastName' }, { field: 'firstName' }], + }, + { field: 'age' }, + ], + }, +]; + +export default function GroupHeaderHeight() { + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx.preview b/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx.preview new file mode 100644 index 000000000000..fc265d72c8e5 --- /dev/null +++ b/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx.preview @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/column-groups/column-groups.md b/docs/data/data-grid/column-groups/column-groups.md index 52e09aab871b..92df9c0b5e10 100644 --- a/docs/data/data-grid/column-groups/column-groups.md +++ b/docs/data/data-grid/column-groups/column-groups.md @@ -57,6 +57,14 @@ In addition to the required `groupId` and `children`, you can use the following {{"demo": "CustomizationDemo.js", "bg": "inline"}} +## Group header height + +By default, column group headers are the same height asĀ [column headers](/x/react-data-grid/column-header/#header-height). This will be the default 56 pixels or a custom value set with the `columnHeaderHeight` prop. + +The `columnGroupHeaderHeight` prop can be used to size column group headers independently of column headers. + +{{"demo": "GroupHeaderHeight.js", "bg": "inline"}} + ## Column reordering [](/x/introduction/licensing/#pro-plan 'Pro plan') By default, the columns that are part of a group cannot be dragged to outside their group. diff --git a/docs/data/data-grid/column-header/HeaderHeight.js b/docs/data/data-grid/column-header/HeaderHeight.js new file mode 100644 index 000000000000..7506e7b7a448 --- /dev/null +++ b/docs/data/data-grid/column-header/HeaderHeight.js @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; + +const rows = [ + { + id: 1, + username: '@MUI', + age: 20, + }, +]; + +const columns = [ + { + field: 'username', + headerName: 'Username', + description: + 'The identification used by the person with access to the online service.', + }, + { field: 'age', headerName: 'Age' }, +]; + +export default function HeaderHeight() { + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-header/HeaderHeight.tsx b/docs/data/data-grid/column-header/HeaderHeight.tsx new file mode 100644 index 000000000000..02c2a742828b --- /dev/null +++ b/docs/data/data-grid/column-header/HeaderHeight.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { DataGrid, GridColDef } from '@mui/x-data-grid'; + +const rows = [ + { + id: 1, + username: '@MUI', + age: 20, + }, +]; + +const columns: GridColDef[] = [ + { + field: 'username', + headerName: 'Username', + description: + 'The identification used by the person with access to the online service.', + }, + { field: 'age', headerName: 'Age' }, +]; + +export default function HeaderHeight() { + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/column-header/HeaderHeight.tsx.preview b/docs/data/data-grid/column-header/HeaderHeight.tsx.preview new file mode 100644 index 000000000000..0c42a351d4cf --- /dev/null +++ b/docs/data/data-grid/column-header/HeaderHeight.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/column-header/column-header.md b/docs/data/data-grid/column-header/column-header.md index 332ece76cfd9..063b7a02089a 100644 --- a/docs/data/data-grid/column-header/column-header.md +++ b/docs/data/data-grid/column-header/column-header.md @@ -34,6 +34,14 @@ const columns: GridColDef[] = [ {{"demo": "RenderHeaderGrid.js", "bg": "inline"}} +## Header height + +By default, column headers have a height of 56 pixels. This matches the height from the [Material Design guidelines](https://m2.material.io/components/data-tables). + +The `columnHeaderHeight` prop can be used to override the default value. + +{{"demo": "HeaderHeight.js", "bg": "inline"}} + ## Styling header You can check the [styling header](/x/react-data-grid/style/#styling-column-headers) section for more information. diff --git a/docs/data/date-pickers/adapters-locale/adapters-locale.md b/docs/data/date-pickers/adapters-locale/adapters-locale.md index 99f5e44e7ace..0168a00d7547 100644 --- a/docs/data/date-pickers/adapters-locale/adapters-locale.md +++ b/docs/data/date-pickers/adapters-locale/adapters-locale.md @@ -41,21 +41,21 @@ import 'dayjs/locale/de'; For `date-fns`, import the locale and pass it to `LocalizationProvider`: :::info -Both `date-fns` major versions (v2.x and v3.x) are supported. +We support `date-fns` package v2.x, v3.x, and v4.x major versions. -A single adapter cannot work for both `date-fns` v2.x and v3.x, because the way functions are exported has been changed in v3.x. +A single adapter cannot work for all `date-fns` versions, because the way functions are exported has been changed in v3.x. -To use `date-fns` v3.x, you will have to import the adapter from `@mui/x-date-pickers/AdapterDateFnsV3` instead of `@mui/x-date-pickers/AdapterDateFns`. +To use `date-fns` v3.x or v4.x, you need to import the adapter from `@mui/x-date-pickers/AdapterDateFnsV3` instead of `@mui/x-date-pickers/AdapterDateFns`. ::: ```tsx // with date-fns v2.x import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; -// with date-fns v3.x +// with date-fns v3.x or v4.x import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; // with date-fns v2.x import de from 'date-fns/locale/de'; -// with date-fns v3.x +// with date-fns v3.x or v4.x import { de } from 'date-fns/locale/de'; diff --git a/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.js b/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.js new file mode 100644 index 000000000000..e59fe3df9547 --- /dev/null +++ b/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.js @@ -0,0 +1,20 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { YearCalendar } from '@mui/x-date-pickers/YearCalendar'; + +const currentYear = dayjs(); + +export default function YearsOrderDescendingCalendar() { + return ( + + + + + + + + ); +} diff --git a/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.tsx b/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.tsx new file mode 100644 index 000000000000..e59fe3df9547 --- /dev/null +++ b/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { YearCalendar } from '@mui/x-date-pickers/YearCalendar'; + +const currentYear = dayjs(); + +export default function YearsOrderDescendingCalendar() { + return ( + + + + + + + + ); +} diff --git a/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.tsx.preview b/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.tsx.preview new file mode 100644 index 000000000000..8843c8d475b5 --- /dev/null +++ b/docs/data/date-pickers/date-calendar/YearsOrderDescendingCalendar.tsx.preview @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/docs/data/date-pickers/date-calendar/date-calendar.md b/docs/data/date-pickers/date-calendar/date-calendar.md index e17b9b09779e..982a51388f71 100644 --- a/docs/data/date-pickers/date-calendar/date-calendar.md +++ b/docs/data/date-pickers/date-calendar/date-calendar.md @@ -63,6 +63,13 @@ If you only need the `year` view or the `month` view, you can use the `YearCalen {{"demo": "YearMonthCalendar.js", "defaultCodeOpen": false}} +### Order of years + +By default, years are displayed in ascending order, chronologically from the minimum year to the maximum. +Set the `yearsOrder` prop to `desc` to show the years in descending order. + +{{"demo": "YearsOrderDescendingCalendar.js", "defaultCodeOpen": false}} + ## Day view customization ### Show additional days diff --git a/docs/data/date-pickers/date-picker/DatePickerYearsOrder.js b/docs/data/date-pickers/date-picker/DatePickerYearsOrder.js new file mode 100644 index 000000000000..eeaf31c53780 --- /dev/null +++ b/docs/data/date-pickers/date-picker/DatePickerYearsOrder.js @@ -0,0 +1,22 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; + +const currentYear = dayjs(); + +export default function DatePickerYearsOrder() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx b/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx new file mode 100644 index 000000000000..eeaf31c53780 --- /dev/null +++ b/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; + +const currentYear = dayjs(); + +export default function DatePickerYearsOrder() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx.preview b/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx.preview new file mode 100644 index 000000000000..914e69e56715 --- /dev/null +++ b/docs/data/date-pickers/date-picker/DatePickerYearsOrder.tsx.preview @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md index c76e2b69fa8b..846716836361 100644 --- a/docs/data/date-pickers/date-picker/date-picker.md +++ b/docs/data/date-pickers/date-picker/date-picker.md @@ -91,6 +91,13 @@ If the view defined in `openTo` is not the first view, then the views before wil (for example view the default behaviors, the `year` is only accessible when clicking on the toolbar). ::: +## Order of years + +By default, years are displayed in ascending order, chronologically from the minimum year to the maximum. +Set the `yearsOrder` prop to `desc` to show the years in descending order. + +{{"demo": "DatePickerYearsOrder.js"}} + ## Landscape orientation By default, the Date Picker component automatically sets the orientation based on the `window.orientation` value. diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md index 4c04e87bd78c..e57e07a9de80 100644 --- a/docs/data/date-pickers/getting-started/getting-started.md +++ b/docs/data/date-pickers/getting-started/getting-started.md @@ -1,34 +1,38 @@ --- productId: x-date-pickers -title: Date and Time Picker - Getting started +title: Date and Time Pickers - Getting started packageName: '@mui/x-date-pickers' githubLabel: 'component: pickers' materialDesign: https://m2.material.io/components/date-pickers waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/ --- -# Date and Time Pickers - Getting Started +# Date and Time Pickers - Getting started -

Get started with the Date and Time Pickers. Install the package, configure your application and start using the components.

+

Install the Date and Time Pickers package and set up your date library to start building.

## Installation -Using your favorite package manager, install: +Install the base package (which can either be the free Community version or the paid Pro version) along with a required third-party date library. +The Pickers currently support [Day.js](https://day.js.org/), [date-fns](https://date-fns.org/), [Luxon](https://moment.github.io/luxon/#/), and [Moment.js](https://momentjs.com/). -- `@mui/x-date-pickers` for the free community version or `@mui/x-date-pickers-pro` for the commercial version. -- The date library to manipulate the date. +Choose your packages and manager through the toggles below, then run the commands as provided to install: {{"component": "modules/components/PickersInstallationInstructions.js"}} -:::info -If you need more information about the date library supported by the Date and Time Pickers, -take a look at the [dedicated section](/x/react-date-pickers/base-concepts/#date-library) +:::success +Not sure which date library to choose? +If you're starting from scratch with no other date libraries in your app, we recommend Day.js because of its small bundle size. ::: -The Date and Time Pickers package has a peer dependency on `@mui/material`. -If you are not already using it in your project, you can install it with: +### Peer dependencies + +#### MaterialĀ UI + +The Date and Time Pickers have a peer dependency on `@mui/material`. +If you're not already using it, install it with the following command: @@ -46,9 +50,11 @@ yarn add @mui/material @emotion/react @emotion/styled +#### React + -Please note that [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom) are peer dependencies too: +[`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) are also peer dependencies: ```json "peerDependencies": { @@ -57,70 +63,40 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht }, ``` -### Style engine - -MaterialĀ UI is using [Emotion](https://emotion.sh/docs/introduction) as a styling engine by default. If you want to use [`styled-components`](https://styled-components.com/) instead, run: - - +## Date library adapter setup -```bash npm -npm install @mui/styled-engine-sc styled-components -``` +To integrate your chosen date library with the Date and Time Pickers, you'll need to plug the corresponding adapter into a `LocalizationProvider` that wraps your Picker components. -```bash pnpm -pnpm add @mui/styled-engine-sc styled-components -``` +Adapters are provided for each of the supported libraries, and all are exported by both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`ā€”for example,`AdapterDayjs`, which is used throughout this documentation for [Day.js](https://day.js.org/) integration: -```bash yarn -yarn add @mui/styled-engine-sc styled-components +```tsx +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs'; ``` - - -Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine. - -## Setup your date library adapter +### LocalizationProvider -Before trying to render any component, you have to make sure that there is a `LocalizationProvider` upper in the React tree. -This component receives your chosen [date library's adapter](https://mui.com/x/react-date-pickers/#date-library) (the doc uses `AdapterDayjs` which is based on [dayjs](https://day.js.org/)) and makes it accessible to all the Date and Time Pickers component using React context. +The `LocalizationProvider` component is exported by both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`: -Each demonstration in the documentation has its own `LocalizationProvider` wrapper. -This is **not** a pattern to reproduce. -The reason is to keep examples atomic and functional, especially when running in a CodeSandbox. +```tsx +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider'; +``` -The general recommendation is to declare the `LocalizationProvider` once, wrapping your entire application. -Then, you don't need to repeat the boilerplate code for every Date and Time Picker in your application. +:::warning +For practical purposes, each demo in the documentation has its own `LocalizationProvider` wrapper. +**We _do not_ recommend reproducing this pattern as-is.** +For almost all use cases, you should wrap your entire app with a single `LocalizationProvider` to avoid repeating boilerplate code in multiple places. +::: {{"component": "modules/components/PickersRenderingInstructions.js"}} -:::success - -- All the adapters are exported by both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`: - - ```tsx - import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; - import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs'; - ``` - -- `LocalizationProvider` is exported by both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`: - - ```tsx - import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; - import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider'; - ``` - -::: - :::info -If you need to use the Date and Time Pickers with a custom locale, have a look at the [Localized dates](/x/react-date-pickers/adapters-locale/) page. +To use the Date and Time Pickers with a custom locale, see [Date and format localization](/x/react-date-pickers/adapters-locale/). ::: ## Render your first component -To make sure that everything is set up correctly, try rendering a simple `DatePicker` component: +To confirm that everything is set up correctly, try rendering a basic Date Picker component: {{"demo": "FirstComponent.js"}} - -## What's next? - -Continue to the [next page](/x/react-date-pickers/base-concepts/) and discover the components available and how to use them. diff --git a/docs/data/migration/migration-charts-v6/migration-charts-v6.md b/docs/data/migration/migration-charts-v6/migration-charts-v6.md index 885e85bfe97f..34aff59d4870 100644 --- a/docs/data/migration/migration-charts-v6/migration-charts-v6.md +++ b/docs/data/migration/migration-charts-v6/migration-charts-v6.md @@ -17,7 +17,7 @@ No big breaking changes are expected. In `package.json`, change the version of the charts package to `^7.0.0`. ```diff --"@mui/x-charts": "6.x.x", +-"@mui/x-charts": "^6.0.0", +"@mui/x-charts": "^7.0.0", ``` 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 3e2ae882e562..90829e928476 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 @@ -15,7 +15,7 @@ To get started, check out [the blog post about the release of MUIĀ X v6](https:/ In `package.json`, change the version of the data grid package to `^6.0.0`. ```diff --"@mui/x-data-grid": "5.X.X", +-"@mui/x-data-grid": "^5.0.0", +"@mui/x-data-grid": "^6.0.0", ``` diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index e21506374d6a..514684a40081 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -16,13 +16,13 @@ To read more about the changes from the new major, check out [the blog post abou In `package.json`, change the version of the data grid package to `^7.0.0`. ```diff --"@mui/x-data-grid": "6.x.x", +-"@mui/x-data-grid": "^6.0.0", +"@mui/x-data-grid": "^7.0.0", --"@mui/x-data-grid-pro": "6.x.x", +-"@mui/x-data-grid-pro": "^6.0.0", +"@mui/x-data-grid-pro": "^7.0.0", --"@mui/x-data-grid-premium": "6.x.x", +-"@mui/x-data-grid-premium": "^6.0.0", +"@mui/x-data-grid-premium": "^7.0.0", ``` @@ -48,14 +48,14 @@ If you're using the commercial version of the Data Grid ([Pro](/x/introduction/l If you have `@mui/x-license-pro` in the `dependencies` section of your `package.json`, rename and update the license package to the latest version: ```diff --"@mui/x-license-pro": "6.x.x", +-"@mui/x-license-pro": "^6.0.0", +"@mui/x-license": "^7.0.0", ``` ## Run codemods The `preset-safe` codemod will automatically adjust the bulk of your code to account for breaking changes in v7. -You can run `v7.0.0/data-grid/preset-safe` targeting only Data Grid or `v7.0.0/preset-safe` to target other MUIĀ X components like Date and Time pickers as well. +You can run `v7.0.0/data-grid/preset-safe` targeting only Data Grid or `v7.0.0/preset-safe` to target other MUIĀ X components like the Date and Time pickers as well. You can either run it on a specific file, folder, or your entire codebase when choosing the `` argument. diff --git a/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md b/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md index 67cdb7dab1d1..08e32ca9a96b 100644 --- a/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md +++ b/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md @@ -15,7 +15,7 @@ To get started, check out [the blog post about the release of MUIĀ X v6](https:/ In `package.json`, change the version of the date pickers package to `^6.0.0`. ```diff --"@mui/x-date-pickers": "5.X.X", +-"@mui/x-date-pickers": "^5.0.0", +"@mui/x-date-pickers": "^6.0.0", ``` diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index 20f3c0875f22..787bbefb3182 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -16,7 +16,7 @@ To read more about the changes from the new major, check out [the blog post abou In `package.json`, change the version of the date pickers package to `^7.0.0`. ```diff --"@mui/x-date-pickers": "6.x.x", +-"@mui/x-date-pickers": "^6.0.0", +"@mui/x-date-pickers": "^7.0.0", ``` @@ -42,13 +42,14 @@ If you're using the commercial version of the Pickers ([Pro](/x/introduction/lic If you have `@mui/x-license-pro` in the `dependencies` section of your `package.json`, rename and update the license package to the latest version: ```diff --"@mui/x-license-pro": "6.x.x", +-"@mui/x-license-pro": ^6.0.0", +"@mui/x-license": "^7.0.0", ``` ## Run codemods -The `preset-safe` codemod will automatically adjust the bulk of your code to account for breaking changes in v7. You can run `v7.0.0/pickers/preset-safe` targeting only Date and Time Pickers or `v7.0.0/preset-safe` to target Data Grid as well. +The `preset-safe` codemod will automatically adjust the bulk of your code to account for breaking changes in v7. +You can run `v7.0.0/pickers/preset-safe` targeting only Date and Time Pickers or `v7.0.0/preset-safe` to target other MUIĀ X components like the Data Grid as well. You can either run it on a specific file, folder, or your entire codebase when choosing the `` argument. @@ -58,7 +59,7 @@ You can either run it on a specific file, folder, or your entire codebase when c // Date and Time Pickers specific npx @mui/x-codemod@latest v7.0.0/pickers/preset-safe -// Target Data Grid as well +// Target other MUIĀ X components as well npx @mui/x-codemod@latest v7.0.0/preset-safe ``` @@ -78,7 +79,7 @@ Not all use cases are covered by codemods. In some scenarios, like props spreadi For example, if a codemod tries to rename a prop, but this prop is hidden with the spread operator, it won't be transformed as expected. ```tsx - + ``` After running the codemods, make sure to test your application and that you don't have any console errors. diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md index 8e143e500670..d1896e63a1e1 100644 --- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md +++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md @@ -16,7 +16,7 @@ To read more about the changes from the new major, check out [the blog post abou In `package.json`, change the version of the tree view package to `^7.0.0`. ```diff --"@mui/x-tree-view": "6.x.x", +-"@mui/x-tree-view": "^6.0.0", +"@mui/x-tree-view": "^7.0.0", ``` @@ -26,6 +26,47 @@ To have the option of using the latest API from `@mui/material`, the package pee It is a change in minor version only, so it should not cause any breaking changes. Please update your `@mui/material` package to this or a newer version. +## Run codemods + +The `preset-safe` codemod will automatically adjust the bulk of your code to account for breaking changes in v7. +You can run `v7.0.0/tree-view/preset-safe` targeting only Tree View or `v7.0.0/preset-safe` to target other MUIĀ X components like the Data Grid as well. + +You can either run it on a specific file, folder, or your entire codebase when choosing the `` argument. + + + +```bash +// Data Grid specific +npx @mui/x-codemod@latest v7.0.0/tree-view/preset-safe + +// Target other MUIĀ X components as well +npx @mui/x-codemod@latest v7.0.0/preset-safe +``` + +:::info +If you want to run the codemods one by one, check out the codemods included in the [preset-safe codemod for the Tree View](https://github.com/mui/mui-x/blob/HEAD/packages/x-codemod/README.md#preset-safe-for-tree-view-v700) for more details. +::: + +Breaking changes that are handled by `preset-safe` codemod are denoted by a āœ… emoji in the table of contents on the right side of the screen or next to the specific point that is handled by it. + +If you have already applied the `v7.0.0/tree-view/preset-safe` (or `v7.0.0/preset-safe`) codemod, then you should not need to take any further action on these items. If there's a specific part of the breaking change that is not part of the codemod or needs some manual work, it will be listed in the end of each section. + +All other changes must be handled manually. + +:::warning +Not all use cases are covered by codemods. In some scenarios, like props spreading, cross-file dependencies, etc., the changes are not properly identified and therefore must be handled manually. + +For example, if a codemod tries to rename a prop, but this prop is hidden with the spread operator, it won't be transformed as expected. + +```tsx + +``` + +After running the codemods, make sure to test your application and that you don't have any console errors. + +Feel free to [open an issue](https://github.com/mui/mui-x/issues/new/choose) for support if you need help to proceed with your migration. +::: + ## Breaking changes Since `v7` is a major release, it contains changes that affect the public API. @@ -76,8 +117,8 @@ The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` f ```diff -- -+ +- ++ ``` diff --git a/docs/package.json b/docs/package.json index 200af41b7396..337fb8a99061 100644 --- a/docs/package.json +++ b/docs/package.json @@ -27,7 +27,7 @@ "@emotion/react": "^11.13.3", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.13.0", - "@mui/docs": "6.0.2", + "@mui/docs": "6.1.1", "@mui/icons-material": "^5.16.7", "@mui/joy": "^5.0.0-beta.48", "@mui/lab": "^5.0.0-alpha.173", @@ -46,7 +46,7 @@ "@mui/x-date-pickers-pro": "workspace:*", "@mui/x-tree-view": "workspace:*", "@react-spring/web": "^9.7.4", - "@tanstack/query-core": "^5.55.4", + "@tanstack/query-core": "^5.56.2", "ast-types": "^0.14.2", "autoprefixer": "^10.4.20", "babel-plugin-module-resolver": "^5.0.2", @@ -76,9 +76,9 @@ "moment-hijri": "^2.30.0", "moment-jalaali": "^0.10.1", "moment-timezone": "^0.5.45", - "next": "^14.2.9", + "next": "^14.2.12", "nprogress": "^0.2.0", - "postcss": "^8.4.45", + "postcss": "^8.4.47", "prismjs": "^1.29.0", "prop-types": "^15.8.1", "react": "^18.3.1", @@ -86,12 +86,12 @@ "react-dom": "^18.3.1", "react-hook-form": "^7.53.0", "react-is": "^18.3.1", - "react-router": "^6.26.1", - "react-router-dom": "^6.26.1", + "react-router": "^6.26.2", + "react-router-dom": "^6.26.2", "react-runner": "^1.0.5", "react-simple-code-editor": "^0.14.1", "recast": "^0.23.9", - "rimraf": "^5.0.10", + "rimraf": "^6.0.1", "rxjs": "^7.8.1", "styled-components": "^6.1.13", "stylis": "^4.3.4", @@ -101,8 +101,8 @@ "devDependencies": { "@babel/plugin-transform-react-constant-elements": "^7.25.1", "@babel/preset-typescript": "^7.24.7", - "@mui/internal-docs-utils": "^1.0.12", - "@mui/internal-scripts": "^1.0.19", + "@mui/internal-docs-utils": "^1.0.13", + "@mui/internal-scripts": "^1.0.21", "@types/chance": "^1.1.6", "@types/d3-scale": "^4.0.8", "@types/d3-scale-chromatic": "^3.0.3", diff --git a/docs/pages/x/api/charts/bar-chart-pro.json b/docs/pages/x/api/charts/bar-chart-pro.json index 8cc679f15c36..3b730fea231b 100644 --- a/docs/pages/x/api/charts/bar-chart-pro.json +++ b/docs/pages/x/api/charts/bar-chart-pro.json @@ -80,6 +80,7 @@ "describedArgs": ["zoomData"] } }, + "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index 4fbc846f9948..8d3a4dfad015 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -73,6 +73,7 @@ "describedArgs": ["event", "barItemIdentifier"] } }, + "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/heatmap.json b/docs/pages/x/api/charts/heatmap.json index 22b2bb7bbaa1..9b6928effba9 100644 --- a/docs/pages/x/api/charts/heatmap.json +++ b/docs/pages/x/api/charts/heatmap.json @@ -61,6 +61,7 @@ "describedArgs": ["highlightedItem"] } }, + "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/line-chart-pro.json b/docs/pages/x/api/charts/line-chart-pro.json index 51abfb3bb0db..b2072c09fcaf 100644 --- a/docs/pages/x/api/charts/line-chart-pro.json +++ b/docs/pages/x/api/charts/line-chart-pro.json @@ -73,6 +73,7 @@ "describedArgs": ["zoomData"] } }, + "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index 9fa4d4ef823b..7307cfde6c46 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -66,6 +66,7 @@ }, "onLineClick": { "type": { "name": "func" } }, "onMarkClick": { "type": { "name": "func" } }, + "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index dfb20738cb2a..184cd16695e5 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/docs/pages/x/api/charts/pie-chart.json @@ -61,6 +61,7 @@ } }, "onItemClick": { "type": { "name": "func" } }, + "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/responsive-chart-container-pro.json b/docs/pages/x/api/charts/responsive-chart-container-pro.json index 469801ba978d..27561b8a05e0 100644 --- a/docs/pages/x/api/charts/responsive-chart-container-pro.json +++ b/docs/pages/x/api/charts/responsive-chart-container-pro.json @@ -39,6 +39,7 @@ } }, "plugins": { "type": { "name": "arrayOf", "description": "Array<object>" } }, + "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "width": { "type": { "name": "number" } }, "xAxis": { "type": { diff --git a/docs/pages/x/api/charts/responsive-chart-container.json b/docs/pages/x/api/charts/responsive-chart-container.json index 830314a5fcee..4c989c7b0e95 100644 --- a/docs/pages/x/api/charts/responsive-chart-container.json +++ b/docs/pages/x/api/charts/responsive-chart-container.json @@ -32,6 +32,7 @@ } }, "plugins": { "type": { "name": "arrayOf", "description": "Array<object>" } }, + "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "width": { "type": { "name": "number" } }, "xAxis": { "type": { diff --git a/docs/pages/x/api/charts/scatter-chart-pro.json b/docs/pages/x/api/charts/scatter-chart-pro.json index 8dbc6b9ebc78..5aca23918a83 100644 --- a/docs/pages/x/api/charts/scatter-chart-pro.json +++ b/docs/pages/x/api/charts/scatter-chart-pro.json @@ -69,6 +69,7 @@ "describedArgs": ["zoomData"] } }, + "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index f9daa7ae5b4b..0299bfabd4c7 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -62,6 +62,7 @@ "describedArgs": ["event", "scatterItemIdentifier"] } }, + "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json index 3efe0080de11..f226435f1df6 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -36,6 +36,7 @@ "type": { "name": "enum", "description": "'bar'
| 'line'" }, "default": "'line'" }, + "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "showHighlight": { "type": { "name": "bool" }, "default": "false" }, "showTooltip": { "type": { "name": "bool" }, "default": "false" }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, 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 d53e034ddd86..45e11992cbcd 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -33,6 +33,7 @@ "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" }, "columnBufferPx": { "type": { "name": "number" }, "default": "150" }, + "columnGroupHeaderHeight": { "type": { "name": "number" } }, "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" }, "columnVisibilityModel": { "type": { "name": "object" } }, "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" }, 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 3455d484aa24..7c256c8d9de6 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -22,6 +22,7 @@ "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" }, "columnBufferPx": { "type": { "name": "number" }, "default": "150" }, + "columnGroupHeaderHeight": { "type": { "name": "number" } }, "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" }, "columnVisibilityModel": { "type": { "name": "object" } }, "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" }, diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 9087bee93db5..0c69e19f5e83 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -21,6 +21,7 @@ "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" }, "columnBufferPx": { "type": { "name": "number" }, "default": "150" }, + "columnGroupHeaderHeight": { "type": { "name": "number" } }, "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" }, "columnVisibilityModel": { "type": { "name": "object" } }, "density": { diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index 6b4dd0199c54..88e9ce699532 100644 --- a/docs/pages/x/api/date-pickers/date-calendar.json +++ b/docs/pages/x/api/date-pickers/date-calendar.json @@ -140,6 +140,10 @@ "description": "Array<'day'
| 'month'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "3" @@ -172,7 +176,7 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view.", + "description": "Button displayed to render a single month in the `month` view.", "default": "MonthCalendarButton", "class": null }, @@ -202,13 +206,13 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view.", + "description": "Button displayed to render a single year in the `year` view.", "default": "YearCalendarButton", "class": null } diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index 11f66d860b1c..8f8010bcf4e5 100644 --- a/docs/pages/x/api/date-pickers/date-picker.json +++ b/docs/pages/x/api/date-pickers/date-picker.json @@ -179,6 +179,10 @@ "description": "Array<'day'
| 'month'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "4 on desktop, 3 on mobile" @@ -281,7 +285,7 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view.", + "description": "Button displayed to render a single month in the `month` view.", "default": "MonthCalendarButton", "class": null }, @@ -334,7 +338,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, @@ -352,7 +356,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view.", + "description": "Button displayed to render a single year in the `year` view.", "default": "YearCalendarButton", "class": null } diff --git a/docs/pages/x/api/date-pickers/date-range-calendar.json b/docs/pages/x/api/date-pickers/date-range-calendar.json index de5a31671d26..cdf5928d090c 100644 --- a/docs/pages/x/api/date-pickers/date-range-calendar.json +++ b/docs/pages/x/api/date-pickers/date-range-calendar.json @@ -173,7 +173,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null } diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/docs/pages/x/api/date-pickers/date-range-picker.json index ac4355088980..a64156ea0d03 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-range-picker.json @@ -283,7 +283,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json index 4186360ab270..875f5158e118 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -207,6 +207,10 @@ "description": "Array<'day'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "4 on desktop, 3 on mobile" @@ -321,7 +325,7 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view.", + "description": "Button displayed to render a single month in the `month` view.", "default": "MonthCalendarButton", "class": null }, @@ -374,7 +378,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, @@ -398,7 +402,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view.", + "description": "Button displayed to render a single year in the `year` view.", "default": "YearCalendarButton", "class": null } diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker.json b/docs/pages/x/api/date-pickers/date-time-range-picker.json index ebbb2d916315..d1820b9ce74e 100644 --- a/docs/pages/x/api/date-pickers/date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-range-picker.json @@ -346,7 +346,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json index c9f5528a3a66..d389019d6942 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -175,6 +175,10 @@ "description": "Array<'day'
| 'month'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "4" @@ -259,7 +263,7 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view.", + "description": "Button displayed to render a single month in the `month` view.", "default": "MonthCalendarButton", "class": null }, @@ -312,7 +316,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, @@ -330,7 +334,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view.", + "description": "Button displayed to render a single year in the `year` view.", "default": "YearCalendarButton", "class": null } diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json index f4aec3a80bb5..911ec96679f0 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json @@ -261,7 +261,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json index ba0848986a20..57e411944cb7 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json @@ -203,6 +203,10 @@ "description": "Array<'day'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "4" @@ -299,7 +303,7 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view.", + "description": "Button displayed to render a single month in the `month` view.", "default": "MonthCalendarButton", "class": null }, @@ -352,7 +356,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, @@ -376,7 +380,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view.", + "description": "Button displayed to render a single year in the `year` view.", "default": "YearCalendarButton", "class": null } diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json index 39ea91b009e3..2ffe9722be4a 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json @@ -324,7 +324,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json index f61852ff2104..f9d914c1abfa 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -175,6 +175,10 @@ "description": "Array<'day'
| 'month'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "3" @@ -241,7 +245,7 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view.", + "description": "Button displayed to render a single month in the `month` view.", "default": "MonthCalendarButton", "class": null }, @@ -277,7 +281,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, @@ -295,7 +299,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view.", + "description": "Button displayed to render a single year in the `year` view.", "default": "YearCalendarButton", "class": null } diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json index 72322d7e8bcb..b5b1d54a04cd 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json @@ -251,7 +251,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json index c81d0e8a2d47..36d5520828a8 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json @@ -194,6 +194,10 @@ "description": "Array<'day'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "3" @@ -260,7 +264,7 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view.", + "description": "Button displayed to render a single month in the `month` view.", "default": "MonthCalendarButton", "class": null }, @@ -296,7 +300,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, @@ -320,7 +324,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view.", + "description": "Button displayed to render a single year in the `year` view.", "default": "YearCalendarButton", "class": null } diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json index ceb7fd706de5..1f6d76bd4612 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json @@ -314,7 +314,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/month-calendar.json b/docs/pages/x/api/date-pickers/month-calendar.json index 81afa3e045d4..d1b1fb06b8bb 100644 --- a/docs/pages/x/api/date-pickers/month-calendar.json +++ b/docs/pages/x/api/date-pickers/month-calendar.json @@ -61,7 +61,7 @@ "slots": [ { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view.", + "description": "Button displayed to render a single month in the `month` view.", "default": "MonthCalendarButton", "class": null } diff --git a/docs/pages/x/api/date-pickers/pickers-calendar-header.json b/docs/pages/x/api/date-pickers/pickers-calendar-header.json index a2cb884b2db1..e34ae7cdcd00 100644 --- a/docs/pages/x/api/date-pickers/pickers-calendar-header.json +++ b/docs/pages/x/api/date-pickers/pickers-calendar-header.json @@ -59,7 +59,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": "MuiPickersCalendarHeader-switchViewIcon" } diff --git a/docs/pages/x/api/date-pickers/static-date-picker.json b/docs/pages/x/api/date-pickers/static-date-picker.json index 93d2fbdb0c88..d3feb349e7d5 100644 --- a/docs/pages/x/api/date-pickers/static-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-picker.json @@ -155,9 +155,13 @@ "description": "Array<'day'
| 'month'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, - "default": "3" + "default": "`4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise." } }, "name": "StaticDatePicker", @@ -198,7 +202,7 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view.", + "description": "Button displayed to render a single month in the `month` view.", "default": "MonthCalendarButton", "class": null }, @@ -234,7 +238,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, @@ -246,7 +250,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view.", + "description": "Button displayed to render a single year in the `year` view.", "default": "YearCalendarButton", "class": null } diff --git a/docs/pages/x/api/date-pickers/static-date-range-picker.json b/docs/pages/x/api/date-pickers/static-date-range-picker.json index 91ceaa5d0405..eb9b535b7bd5 100644 --- a/docs/pages/x/api/date-pickers/static-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-range-picker.json @@ -194,7 +194,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/static-date-time-picker.json b/docs/pages/x/api/date-pickers/static-date-time-picker.json index 440519f2a10d..395d96190deb 100644 --- a/docs/pages/x/api/date-pickers/static-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-time-picker.json @@ -174,9 +174,13 @@ "description": "Array<'day'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'>" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, - "default": "3" + "default": "`4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise." } }, "name": "StaticDateTimePicker", @@ -217,7 +221,7 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view.", + "description": "Button displayed to render a single month in the `month` view.", "default": "MonthCalendarButton", "class": null }, @@ -253,7 +257,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is \"year\".", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`.", "default": "ArrowDropDown", "class": null }, @@ -271,7 +275,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view.", + "description": "Button displayed to render a single year in the `year` view.", "default": "YearCalendarButton", "class": null } diff --git a/docs/pages/x/api/date-pickers/year-calendar.json b/docs/pages/x/api/date-pickers/year-calendar.json index ca1c7a0685f6..3efe3212590e 100644 --- a/docs/pages/x/api/date-pickers/year-calendar.json +++ b/docs/pages/x/api/date-pickers/year-calendar.json @@ -47,6 +47,10 @@ } }, "value": { "type": { "name": "object" } }, + "yearsOrder": { + "type": { "name": "enum", "description": "'asc'
| 'desc'" }, + "default": "'asc'" + }, "yearsPerRow": { "type": { "name": "enum", "description": "3
| 4" }, "default": "3" @@ -61,7 +65,7 @@ "slots": [ { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view.", + "description": "Button displayed to render a single year in the `year` view.", "default": "YearCalendarButton", "class": null } diff --git a/docs/public/_headers b/docs/public/_headers index a69d43e433d8..d51559d422eb 100644 --- a/docs/public/_headers +++ b/docs/public/_headers @@ -17,5 +17,5 @@ X-XSS-Protection: 1; mode=block Referrer-Policy: strict-origin-when-cross-origin # TODO: progressively reduce the CSP scopes - # Start with a wildcard, using https://github.com/mui/mui-toolpad/blob/f4c4eb046b352e4fc00729c3bed605e671b040c4/packages/toolpad-studio/src/server/index.ts#L241 + # Start with a wildcard, using https://github.com/mui/toolpad/blob/f4c4eb046b352e4fc00729c3bed605e671b040c4/packages/toolpad-studio/src/server/index.ts#L241 Content-Security-Policy: default-src * data: mediastream: blob: filesystem: about: ws: wss: 'unsafe-eval' 'wasm-unsafe-eval' 'unsafe-inline'; script-src * data: blob: 'unsafe-inline' 'unsafe-eval'; script-src-elem * data: blob: 'unsafe-inline'; connect-src * data: blob: 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; media-src * data: blob: 'unsafe-inline'; frame-src * data: blob: ; style-src * data: blob: 'unsafe-inline'; font-src * data: blob: 'unsafe-inline'; frame-ancestors *; diff --git a/docs/src/modules/components/PickersInstallationInstructions.js b/docs/src/modules/components/PickersInstallationInstructions.js index 2651d0ca1158..1282d02797a6 100644 --- a/docs/src/modules/components/PickersInstallationInstructions.js +++ b/docs/src/modules/components/PickersInstallationInstructions.js @@ -10,7 +10,6 @@ const packages = { const peerDependency = { label: 'Date library', - installationComment: '// Install date library (if not already installed)', packages: ['dayjs', 'date-fns', 'luxon', 'moment'], }; diff --git a/docs/src/modules/components/PickersRenderingInstructions.js b/docs/src/modules/components/PickersRenderingInstructions.js index f2825cc13262..e9e2d709e18c 100644 --- a/docs/src/modules/components/PickersRenderingInstructions.js +++ b/docs/src/modules/components/PickersRenderingInstructions.js @@ -27,7 +27,7 @@ export default function PickersRenderingInstructions() { `import { ${adapterName} } from '${componentPackage}/${adapterName}'`, ...(libraryUsed === 'date-fns' ? [ - '// If you are using date-fns v3.x, please import the v3 adapter', + '// If you are using date-fns v3.x or v4.x, please import the v3 adapter', `import { ${adapterName} } from '${componentPackage}/AdapterDateFnsV3'`, ] : []), diff --git a/docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json b/docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json index 58fc1a173e71..e4f68a9e3070 100644 --- a/docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json +++ b/docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json @@ -56,6 +56,9 @@ "description": "Callback fired when the zoom has changed.", "typeDescriptions": { "zoomData": "Updated zoom data." } }, + "resolveSizeBeforeRender": { + "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." + }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/bar-chart/bar-chart.json b/docs/translations/api-docs/charts/bar-chart/bar-chart.json index b20ef3bdfad0..e01b93a00534 100644 --- a/docs/translations/api-docs/charts/bar-chart/bar-chart.json +++ b/docs/translations/api-docs/charts/bar-chart/bar-chart.json @@ -52,6 +52,9 @@ "barItemIdentifier": "The bar item identifier." } }, + "resolveSizeBeforeRender": { + "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." + }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/heatmap/heatmap.json b/docs/translations/api-docs/charts/heatmap/heatmap.json index 8db3fec541fc..c693b034952f 100644 --- a/docs/translations/api-docs/charts/heatmap/heatmap.json +++ b/docs/translations/api-docs/charts/heatmap/heatmap.json @@ -35,6 +35,9 @@ "description": "The callback fired when the highlighted item changes.", "typeDescriptions": { "highlightedItem": "The newly highlighted item." } }, + "resolveSizeBeforeRender": { + "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." + }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json b/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json index dd0182cc0818..542459c99c73 100644 --- a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json +++ b/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json @@ -53,6 +53,9 @@ "description": "Callback fired when the zoom has changed.", "typeDescriptions": { "zoomData": "Updated zoom data." } }, + "resolveSizeBeforeRender": { + "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." + }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/line-chart/line-chart.json b/docs/translations/api-docs/charts/line-chart/line-chart.json index efe9d5f8cf90..958581f064a5 100644 --- a/docs/translations/api-docs/charts/line-chart/line-chart.json +++ b/docs/translations/api-docs/charts/line-chart/line-chart.json @@ -49,6 +49,9 @@ }, "onLineClick": { "description": "Callback fired when a line element is clicked." }, "onMarkClick": { "description": "Callback fired when a mark element is clicked." }, + "resolveSizeBeforeRender": { + "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." + }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/pie-chart/pie-chart.json b/docs/translations/api-docs/charts/pie-chart/pie-chart.json index 7f1be4fa44cc..68cc51cc76a8 100644 --- a/docs/translations/api-docs/charts/pie-chart/pie-chart.json +++ b/docs/translations/api-docs/charts/pie-chart/pie-chart.json @@ -34,6 +34,9 @@ "typeDescriptions": { "highlightedItem": "The newly highlighted item." } }, "onItemClick": { "description": "Callback fired when a pie arc is clicked." }, + "resolveSizeBeforeRender": { + "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." + }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/responsive-chart-container-pro/responsive-chart-container-pro.json b/docs/translations/api-docs/charts/responsive-chart-container-pro/responsive-chart-container-pro.json index 469366dd9aad..06357f4b5fd4 100644 --- a/docs/translations/api-docs/charts/responsive-chart-container-pro/responsive-chart-container-pro.json +++ b/docs/translations/api-docs/charts/responsive-chart-container-pro/responsive-chart-container-pro.json @@ -28,6 +28,9 @@ "plugins": { "description": "An array of plugins defining how to preprocess data. If not provided, the container supports line, bar, scatter and pie charts." }, + "resolveSizeBeforeRender": { + "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." + }, "series": { "description": "The array of series to display. Each type of series has its own specificity. Please refer to the appropriate docs page to learn more about it." }, diff --git a/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json b/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json index 1623c12c44cd..6b371581a9ca 100644 --- a/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json +++ b/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json @@ -24,6 +24,9 @@ "plugins": { "description": "An array of plugins defining how to preprocess data. If not provided, the container supports line, bar, scatter and pie charts." }, + "resolveSizeBeforeRender": { + "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." + }, "series": { "description": "The array of series to display. Each type of series has its own specificity. Please refer to the appropriate docs page to learn more about it." }, diff --git a/docs/translations/api-docs/charts/scatter-chart-pro/scatter-chart-pro.json b/docs/translations/api-docs/charts/scatter-chart-pro/scatter-chart-pro.json index 6a6c1e0b1bf6..141cc067550f 100644 --- a/docs/translations/api-docs/charts/scatter-chart-pro/scatter-chart-pro.json +++ b/docs/translations/api-docs/charts/scatter-chart-pro/scatter-chart-pro.json @@ -47,6 +47,9 @@ "description": "Callback fired when the zoom has changed.", "typeDescriptions": { "zoomData": "Updated zoom data." } }, + "resolveSizeBeforeRender": { + "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." + }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json b/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json index 5e9b1baac91e..23a06f78b85c 100644 --- a/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json +++ b/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json @@ -43,6 +43,9 @@ "scatterItemIdentifier": "The scatter item identifier." } }, + "resolveSizeBeforeRender": { + "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." + }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json b/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json index c4595d0c6f19..faa29963435e 100644 --- a/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json +++ b/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json @@ -26,6 +26,9 @@ "typeDescriptions": { "highlightedItem": "The newly highlighted item." } }, "plotType": { "description": "Type of plot used." }, + "resolveSizeBeforeRender": { + "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." + }, "showHighlight": { "description": "Set to true to highlight the value. With line, it shows a point. With bar, it shows a highlight band." }, diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json index 4f2d69f157f4..6ad9d6baa7aa 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json @@ -39,6 +39,9 @@ "columnBufferPx": { "description": "Column region in pixels to render before/after the viewport" }, + "columnGroupHeaderHeight": { + "description": "Sets the height in pixels of the column group headers in the Data Grid. Inherits the columnHeaderHeight value if not set." + }, "columnHeaderHeight": { "description": "Sets the height in pixel of the column headers in the Data Grid." }, diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json index c05b92ca9f16..dd8849adea65 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json @@ -32,6 +32,9 @@ "columnBufferPx": { "description": "Column region in pixels to render before/after the viewport" }, + "columnGroupHeaderHeight": { + "description": "Sets the height in pixels of the column group headers in the Data Grid. Inherits the columnHeaderHeight value if not set." + }, "columnHeaderHeight": { "description": "Sets the height in pixel of the column headers in the Data Grid." }, diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json index fee553a383d3..6acf12ef9509 100644 --- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json @@ -29,6 +29,9 @@ "columnBufferPx": { "description": "Column region in pixels to render before/after the viewport" }, + "columnGroupHeaderHeight": { + "description": "Sets the height in pixels of the column group headers in the Data Grid. Inherits the columnHeaderHeight value if not set." + }, "columnHeaderHeight": { "description": "Sets the height in pixel of the column headers in the Data Grid." }, diff --git a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json index 19c6404b210b..f94820268f52 100644 --- a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json @@ -115,6 +115,9 @@ "description": "The visible view. Used when the component view is controlled. Must be a valid option from views list." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": { @@ -128,12 +131,12 @@ "calendarHeader": "Custom component for calendar header. Check the PickersCalendarHeader component.", "day": "Custom component for day. Check the PickersDay component.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", - "yearButton": "Button displayed to render a single year in the "year" view." + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json index 8536e255a604..bae8b06bdd7c 100644 --- a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json +++ b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json @@ -159,6 +159,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -178,7 +181,7 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", @@ -187,9 +190,9 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json b/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json index 1e1cf9c7c2bf..d2c9fc7c25b0 100644 --- a/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json @@ -135,6 +135,6 @@ "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year"." + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year." } } diff --git a/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json b/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json index 3d2165e374fe..d0f54f65ca96 100644 --- a/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json @@ -176,7 +176,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } diff --git a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json index d8994c789b60..78942a2c4925 100644 --- a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json @@ -196,6 +196,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -217,7 +220,7 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", @@ -226,10 +229,10 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json b/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json index d9cbe6026fe5..d5809a659071 100644 --- a/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json +++ b/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json @@ -223,7 +223,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." diff --git a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json index 0235dcbeb4f1..fb0e9086485d 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json @@ -156,6 +156,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -172,7 +175,7 @@ "inputAdornment": "Component displayed on the start or end input adornment used to open the picker on desktop.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", @@ -181,9 +184,9 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json index a8e7907b7f9f..26fc319817ab 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json @@ -170,7 +170,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json index 41c3552ab773..936c07b4b312 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json @@ -193,6 +193,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -211,7 +214,7 @@ "inputAdornment": "Component displayed on the start or end input adornment used to open the picker on desktop.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", @@ -220,10 +223,10 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json index 9e40b5b86f95..48e711bb34d2 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json @@ -217,7 +217,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." diff --git a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json index 196f25f2be15..05da31f45867 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json @@ -156,6 +156,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -169,15 +172,15 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json index 33656bf53c5f..e393f3876d5f 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json @@ -166,7 +166,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json index 1b95ab814138..c8696c40a67a 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json @@ -184,6 +184,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -197,16 +200,16 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json index 88e8272c5347..2fc8ea3de2c8 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json @@ -213,7 +213,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." diff --git a/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json b/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json index b0ea9f642158..2ee6ae23ed75 100644 --- a/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json +++ b/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json @@ -46,6 +46,6 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "monthButton": "Button displayed to render a single month in the "month" view." + "monthButton": "Button displayed to render a single month in the month view." } } diff --git a/docs/translations/api-docs/date-pickers/pickers-calendar-header/pickers-calendar-header.json b/docs/translations/api-docs/date-pickers/pickers-calendar-header/pickers-calendar-header.json index 14b1549d337d..4f5aeee8654a 100644 --- a/docs/translations/api-docs/date-pickers/pickers-calendar-header/pickers-calendar-header.json +++ b/docs/translations/api-docs/date-pickers/pickers-calendar-header/pickers-calendar-header.json @@ -26,6 +26,6 @@ "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year"." + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year." } } diff --git a/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json b/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json index d8487afd8015..2d4f98684195 100644 --- a/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json @@ -131,6 +131,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -140,14 +143,14 @@ "day": "Custom component for day. Check the PickersDay component.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json b/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json index 993e0008d075..0de49522ec62 100644 --- a/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json @@ -132,7 +132,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json b/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json index ffe8c876b512..7c34378a5f77 100644 --- a/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json @@ -159,6 +159,9 @@ "description": "Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be used." }, "views": { "description": "Available views." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": {}, @@ -168,15 +171,15 @@ "day": "Custom component for day. Check the PickersDay component.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view.", + "monthButton": "Button displayed to render a single month in the month view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year".", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is year.", "tabs": "Tabs enabling toggling between date and time pickers.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json b/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json index 3953639dab18..561c1d30df19 100644 --- a/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json +++ b/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json @@ -42,10 +42,13 @@ "seeMoreText": "See the {{link}} for more details." }, "value": { "description": "The selected value. Used when the component is controlled." }, + "yearsOrder": { + "description": "Years are displayed in ascending (chronological) order by default. If desc, years are displayed in descending order." + }, "yearsPerRow": { "description": "Years rendered per row." } }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "yearButton": "Button displayed to render a single year in the "year" view." + "yearButton": "Button displayed to render a single year in the year view." } } diff --git a/package.json b/package.json index 17ff8eda21d6..5e314a59a60c 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "devDependencies": { "@actions/core": "^1.10.1", "@actions/github": "^6.0.0", - "@argos-ci/core": "^2.8.0", + "@argos-ci/core": "^2.8.1", "@babel/cli": "^7.25.6", "@babel/core": "^7.25.2", "@babel/node": "^7.25.0", @@ -91,13 +91,13 @@ "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@mui/icons-material": "^5.16.7", - "@mui/internal-babel-plugin-resolve-imports": "1.0.17", - "@mui/internal-markdown": "^1.0.12", - "@mui/internal-test-utils": "^1.0.12", + "@mui/internal-babel-plugin-resolve-imports": "1.0.18", + "@mui/internal-markdown": "^1.0.14", + "@mui/internal-test-utils": "^1.0.14", "@mui/material": "^5.16.7", - "@mui/monorepo": "github:mui/material-ui#dd2faca9c6192b79510948cecd3bce2380f27d64", + "@mui/monorepo": "github:mui/material-ui#263c7259451d5b928bbdfd299c9c0afc89dfec02", "@mui/utils": "^5.16.6", - "@next/eslint-plugin-next": "14.2.9", + "@next/eslint-plugin-next": "14.2.12", "@octokit/plugin-retry": "^7.1.1", "@octokit/rest": "^21.0.2", "@playwright/test": "^1.44.1", @@ -108,7 +108,7 @@ "@types/fs-extra": "^11.0.4", "@types/karma": "^6.3.8", "@types/lodash": "^4.17.7", - "@types/mocha": "^10.0.7", + "@types/mocha": "^10.0.8", "@types/node": "^20.16.5", "@types/react": "^18.3.4", "@types/react-dom": "^18.3.0", @@ -131,12 +131,12 @@ "chai": "^4.5.0", "chai-dom": "^1.12.0", "compression-webpack-plugin": "^11.1.0", - "concurrently": "^9.0.0", + "concurrently": "^9.0.1", "cpy-cli": "^5.0.0", "cross-env": "^7.0.3", "danger": "^12.3.3", "date-fns-jalali-v3": "npm:date-fns-jalali@3.6.0-1", - "date-fns-v3": "npm:date-fns@3.6.0", + "date-fns-v4": "npm:date-fns@4.1.0", "eslint": "^8.57.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^18.0.0", @@ -144,12 +144,12 @@ "eslint-import-resolver-webpack": "^0.13.9", "eslint-plugin-filenames": "^1.3.2", "eslint-plugin-import": "^2.30.0", - "eslint-plugin-jsdoc": "^50.2.2", + "eslint-plugin-jsdoc": "^50.2.4", "eslint-plugin-jsx-a11y": "^6.10.0", "eslint-plugin-material-ui": "workspace:^", "eslint-plugin-mocha": "^10.5.0", "eslint-plugin-prettier": "^5.2.1", - "eslint-plugin-react": "^7.35.2", + "eslint-plugin-react": "^7.36.1", "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-testing-library": "^6.3.0", @@ -182,13 +182,13 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "remark": "^15.0.1", - "rimraf": "^5.0.10", + "rimraf": "^6.0.1", "serve": "^14.2.3", - "sinon": "^18.0.0", + "sinon": "^18.0.1", "stream-browserify": "^3.0.0", "string-replace-loader": "^3.1.0", "terser-webpack-plugin": "^5.3.10", - "tsx": "^4.19.0", + "tsx": "^4.19.1", "typescript": "^5.5.4", "unist-util-visit": "^5.0.0", "util": "^0.12.5", diff --git a/packages/rsc-builder/buildRsc.ts b/packages/rsc-builder/buildRsc.ts index 2fb4e0b54549..f5bd1f4cc29d 100644 --- a/packages/rsc-builder/buildRsc.ts +++ b/packages/rsc-builder/buildRsc.ts @@ -14,6 +14,8 @@ type Project = { ignorePaths?: string[]; }; +// The data grid packages are not using this script. +// Instead, they are manually adding the "use client" directive in the entry point of each package. const PROJECTS: Project[] = [ { name: 'x-date-pickers', @@ -31,6 +33,14 @@ const PROJECTS: Project[] = [ name: 'x-charts-pro', rootPath: path.join(process.cwd(), 'packages/x-charts-pro'), }, + { + name: 'x-tree-view', + rootPath: path.join(process.cwd(), 'packages/x-tree-view'), + }, + { + name: 'x-tree-view-pro', + rootPath: path.join(process.cwd(), 'packages/x-tree-view-pro'), + }, ]; async function processFile( diff --git a/packages/rsc-builder/package.json b/packages/rsc-builder/package.json index 62d32f1d7207..cc9b3b13ca76 100644 --- a/packages/rsc-builder/package.json +++ b/packages/rsc-builder/package.json @@ -8,7 +8,7 @@ "yargs": "^17.7.2" }, "devDependencies": { - "@types/mocha": "^10.0.7", - "@types/node": "^20.14.8" + "@types/mocha": "^10.0.8", + "@types/node": "^20.16.5" } } diff --git a/packages/x-charts-pro/package.json b/packages/x-charts-pro/package.json index 49af8fa5d19b..d30e30df06ec 100644 --- a/packages/x-charts-pro/package.json +++ b/packages/x-charts-pro/package.json @@ -73,7 +73,7 @@ "@react-spring/shared": "^9.7.4", "@types/prop-types": "^15.7.12", "csstype": "^3.1.3", - "rimraf": "^5.0.10" + "rimraf": "^6.0.1" }, "engines": { "node": ">=14.0.0" diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx index 628a47acce0e..8d716850bf7d 100644 --- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx @@ -230,6 +230,16 @@ BarChartPro.propTypes = { * @param {ZoomData[]} zoomData Updated zoom data. */ onZoomChange: PropTypes.func, + /** + * The chart will try to wait for the parent container to resolve its size + * before it renders for the first time. + * + * This can be useful in some scenarios where the chart appear to grow after + * the first render, like when used inside a grid. + * + * @default false + */ + resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx index 0d146c49c8b6..de7683f394ae 100644 --- a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx +++ b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx @@ -286,6 +286,16 @@ Heatmap.propTypes = { * @param {HighlightItemData | null} highlightedItem The newly highlighted item. */ onHighlightChange: PropTypes.func, + /** + * The chart will try to wait for the parent container to resolve its size + * before it renders for the first time. + * + * This can be useful in some scenarios where the chart appear to grow after + * the first render, like when used inside a grid. + * + * @default false + */ + resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index a698d20f44f0..ec09c9711bb9 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -251,6 +251,16 @@ LineChartPro.propTypes = { * @param {ZoomData[]} zoomData Updated zoom data. */ onZoomChange: PropTypes.func, + /** + * The chart will try to wait for the parent container to resolve its size + * before it renders for the first time. + * + * This can be useful in some scenarios where the chart appear to grow after + * the first render, like when used inside a grid. + * + * @default false + */ + resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx index 2669f806ca5c..c8375edd27f5 100644 --- a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx +++ b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx @@ -93,6 +93,16 @@ ResponsiveChartContainerPro.propTypes = { * If not provided, the container supports line, bar, scatter and pie charts. */ plugins: PropTypes.arrayOf(PropTypes.object), + /** + * The chart will try to wait for the parent container to resolve its size + * before it renders for the first time. + * + * This can be useful in some scenarios where the chart appear to grow after + * the first render, like when used inside a grid. + * + * @default false + */ + resolveSizeBeforeRender: PropTypes.bool, /** * The array of series to display. * Each type of series has its own specificity. diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx index 7b49dc343bc2..b6d659fcd8c7 100644 --- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx +++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx @@ -205,6 +205,16 @@ ScatterChartPro.propTypes = { * @param {ZoomData[]} zoomData Updated zoom data. */ onZoomChange: PropTypes.func, + /** + * The chart will try to wait for the parent container to resolve its size + * before it renders for the first time. + * + * This can be useful in some scenarios where the chart appear to grow after + * the first render, like when used inside a grid. + * + * @default false + */ + resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx b/packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx index 2834b7b2f6d0..555acf19086e 100644 --- a/packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx +++ b/packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx @@ -5,7 +5,7 @@ import { useSeries, CartesianContext, CartesianProviderProps, - cartesianProviderUtils, + computeAxisValue, useXExtremumGetter, useYExtremumGetter, ZoomAxisFilters, @@ -13,8 +13,6 @@ import { import { useZoom } from '../ZoomProvider/useZoom'; import { createAxisFilterMapper, createGetAxisFilters } from './createAxisFilterMapper'; -const { computeValue } = cartesianProviderUtils; - export interface CartesianProviderProProps extends CartesianProviderProps {} function CartesianProviderPro(props: CartesianProviderProProps) { @@ -66,7 +64,7 @@ function CartesianProviderPro(props: CartesianProviderProProps) { const xValues = React.useMemo( () => - computeValue({ + computeAxisValue({ drawingArea, formattedSeries, axis: xAxis, @@ -81,7 +79,7 @@ function CartesianProviderPro(props: CartesianProviderProProps) { const yValues = React.useMemo( () => - computeValue({ + computeAxisValue({ drawingArea, formattedSeries, axis: yAxis, diff --git a/packages/x-charts-pro/src/context/CartesianProviderPro/createAxisFilterMapper.ts b/packages/x-charts-pro/src/context/CartesianProviderPro/createAxisFilterMapper.ts index 3a94d3512bb8..cbb0638bed59 100644 --- a/packages/x-charts-pro/src/context/CartesianProviderPro/createAxisFilterMapper.ts +++ b/packages/x-charts-pro/src/context/CartesianProviderPro/createAxisFilterMapper.ts @@ -38,7 +38,7 @@ export const createAxisFilterMapper = if (scaleType === 'point' || scaleType === 'band') { extremums = [0, (axis.data?.length ?? 1) - 1]; } else { - extremums = getAxisExtremum(axis, extremumGetter, axisIndex === 0, formattedSeries); + extremums = getAxisExtremum(axis, extremumGetter, axisIndex, formattedSeries); } let min: number | Date; diff --git a/packages/x-charts-pro/src/typeOverloads/modules.ts b/packages/x-charts-pro/src/typeOverloads/modules.ts index 78c705633fce..8cdc24c0f409 100644 --- a/packages/x-charts-pro/src/typeOverloads/modules.ts +++ b/packages/x-charts-pro/src/typeOverloads/modules.ts @@ -3,6 +3,7 @@ import { HeatmapItemIdentifier, HeatmapSeriesType, DefaultizedHeatmapSeriesType, + HeatmapValueType, } from '../models/seriesType/heatmap'; import { ZoomOptions } from '../context/ZoomProvider'; @@ -13,6 +14,7 @@ declare module '@mui/x-charts/internals' { series: DefaultizedHeatmapSeriesType; seriesProp: HeatmapSeriesType; itemIdentifier: HeatmapItemIdentifier; + valueType: HeatmapValueType; cartesian: true; }; } diff --git a/packages/x-charts-vendor/README.md b/packages/x-charts-vendor/README.md index 4084fe508626..f5bff50b4aed 100644 --- a/packages/x-charts-vendor/README.md +++ b/packages/x-charts-vendor/README.md @@ -73,4 +73,4 @@ Note that for some tooling (like Jest) that doesn't play well with `package.json ## Licenses -This project is released under the MIT license, but the vendored in libraries include other licenses (e.g. ISC) that we enumerate in our `package.json:license` field. +This project is released under the MIT license, but the vendored in libraries include other licenses (for example ISC) that we enumerate in our `package.json:license` field. diff --git a/packages/x-charts-vendor/package.json b/packages/x-charts-vendor/package.json index 0266a534fcd7..fe767da6a19e 100644 --- a/packages/x-charts-vendor/package.json +++ b/packages/x-charts-vendor/package.json @@ -52,7 +52,7 @@ "d3-time-format": "^4.1.0", "execa": "^9.3.1", "internmap": "^2.0.3", - "rimraf": "^5.0.10" + "rimraf": "^6.0.1" }, "publishConfig": { "access": "public" diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index 61ae0733fcef..fd6e28a6022c 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -65,14 +65,14 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.12", + "@mui/internal-test-utils": "^1.0.14", "@mui/material": "^5.16.7", "@mui/system": "^5.16.7", "@react-spring/core": "^9.7.4", "@react-spring/shared": "^9.7.4", "@types/prop-types": "^15.7.12", "csstype": "^3.1.3", - "rimraf": "^5.0.10" + "rimraf": "^6.0.1" }, "engines": { "node": ">=14.0.0" diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index 31ac61783bac..e3c53e9d0271 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -291,6 +291,16 @@ BarChart.propTypes = { * @param {BarItemIdentifier} barItemIdentifier The bar item identifier. */ onItemClick: PropTypes.func, + /** + * The chart will try to wait for the parent container to resolve its size + * before it renders for the first time. + * + * This can be useful in some scenarios where the chart appear to grow after + * the first render, like when used inside a grid. + * + * @default false + */ + resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts/src/BarChart/extremums.test.ts b/packages/x-charts/src/BarChart/extremums.test.ts index 798954aac8dc..f0ba41d65048 100644 --- a/packages/x-charts/src/BarChart/extremums.test.ts +++ b/packages/x-charts/src/BarChart/extremums.test.ts @@ -26,6 +26,7 @@ const buildData = ( id: 'id', data, }, + axisIndex: 0, isDefaultAxis: true, }; }; diff --git a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx index e371d170bae4..de75c3dfc288 100644 --- a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx +++ b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx @@ -23,11 +23,11 @@ export interface ChartsLegendSlots { * Custom rendering of the legend. * @default DefaultChartsLegend */ - legend?: React.JSXElementConstructor; + legend?: React.JSXElementConstructor; } export interface ChartsLegendSlotProps { - legend?: Partial; + legend?: Partial; } export interface ChartsLegendProps extends ChartsLegendPropsBase { diff --git a/packages/x-charts/src/ChartsTooltip/index.ts b/packages/x-charts/src/ChartsTooltip/index.ts index dc13976d1d75..103ca309163f 100644 --- a/packages/x-charts/src/ChartsTooltip/index.ts +++ b/packages/x-charts/src/ChartsTooltip/index.ts @@ -8,3 +8,7 @@ export * from './DefaultChartsAxisTooltipContent'; export * from './DefaultChartsItemTooltipContent'; export * from './ChartsTooltipTable'; + +export * from './useItemTooltip'; +export * from './useAxisTooltip'; +export { useMouseTracker } from './utils'; diff --git a/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx b/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx new file mode 100644 index 000000000000..7b86b0bb0648 --- /dev/null +++ b/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx @@ -0,0 +1,116 @@ +'use client'; +import * as React from 'react'; +import { AxisInteractionData, InteractionContext } from '../context/InteractionProvider'; +import { useSeries } from '../hooks/useSeries'; +import { useCartesianContext } from '../context/CartesianProvider'; +import { ZAxisContext } from '../context/ZAxisContextProvider'; +import { useColorProcessor } from '../context/PluginProvider/useColorProcessor'; +import { SeriesId } from '../models/seriesType/common'; +import { CartesianChartSeriesType, ChartsSeriesConfig } from '../models/seriesType/config'; +import { getLabel } from '../internals/getLabel'; +import { isCartesianSeriesType } from '../internals/isCartesian'; +import { utcFormatter } from './utils'; + +export interface UseAxisTooltipReturnValue< + SeriesT extends CartesianChartSeriesType = CartesianChartSeriesType, + AxisValueT extends string | number | Date = string | number | Date, +> { + identifier: AxisInteractionData; + seriesItems: SeriesItem[]; + axisValue: AxisValueT; + axisFormattedValue: string; +} + +interface SeriesItem { + seriesId: SeriesId; + color: string; + value: ChartsSeriesConfig[T]['valueType']; + formattedValue: string; + formattedLabel: string | null; +} + +export function useAxisTooltip(): null | UseAxisTooltipReturnValue { + const { axis } = React.useContext(InteractionContext); + const series = useSeries(); + + const { xAxis, yAxis, xAxisIds, yAxisIds } = useCartesianContext(); + const { zAxis, zAxisIds } = React.useContext(ZAxisContext); + const colorProcessors = useColorProcessor(); + + // By default use the x-axis + const isXaxis = axis.x !== null && axis.x.index !== -1; + + const axisData = isXaxis ? axis.x && axis.x : axis.y && axis.y; + + if (axisData === null) { + return null; + } + + const { index: dataIndex, value: axisValue } = axisData; + + const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0]; + const usedAxis = isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID]; + + const relevantSeries = Object.keys(series) + .filter(isCartesianSeriesType) + .flatMap((seriesType: SeriesT) => { + const seriesOfType = series[seriesType]; + if (!seriesOfType) { + return []; + } + return seriesOfType.seriesOrder.map((seriesId) => { + const seriesToAdd = seriesOfType.series[seriesId]!; + + const providedXAxisId = seriesToAdd.xAxisId ?? seriesToAdd.xAxisKey; + const providedYAxisId = seriesToAdd.yAxisId ?? seriesToAdd.yAxisKey; + + const axisKey = isXaxis ? providedXAxisId : providedYAxisId; + + // Test if the series uses the default axis + if (axisKey === undefined || axisKey === USED_AXIS_ID) { + const xAxisId = providedXAxisId ?? xAxisIds[0]; + const yAxisId = providedYAxisId ?? yAxisIds[0]; + const zAxisId = + (seriesToAdd as any).zAxisId ?? (seriesToAdd as any).zAxisKey ?? zAxisIds[0]; + + const color = + colorProcessors[seriesType]?.( + seriesToAdd, + xAxis[xAxisId], + yAxis[yAxisId], + zAxisId && zAxis[zAxisId], + )(dataIndex) ?? ''; + + const value = seriesToAdd.data[dataIndex] ?? null; + const formattedValue = (seriesToAdd.valueFormatter as any)(value, { + dataIndex, + }); + const formattedLabel = getLabel(seriesToAdd.label, 'tooltip') ?? null; + + return { + seriesId, + color, + value, + formattedValue, + formattedLabel, + } as SeriesItem; + } + return undefined; + }); + }) + .filter((item) => item != null); + + const axisFormatter = + usedAxis.valueFormatter ?? + ((v: string | number | Date) => + usedAxis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString()); + + const axisFormattedValue = axisFormatter(axisValue, { location: 'tooltip' }); + + return { + identifier: axis as AxisInteractionData, + seriesItems: relevantSeries, + axisValue, + axisFormattedValue, + }; +} diff --git a/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx b/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx new file mode 100644 index 000000000000..5743592e31dc --- /dev/null +++ b/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx @@ -0,0 +1,79 @@ +'use client'; +import * as React from 'react'; +import { InteractionContext, ItemInteractionData } from '../context/InteractionProvider'; +import { useSeries } from '../hooks/useSeries'; +import { useCartesianContext } from '../context/CartesianProvider'; +import { ZAxisContext } from '../context/ZAxisContextProvider'; +import { useColorProcessor } from '../context/PluginProvider/useColorProcessor'; +import { + ChartSeriesDefaultized, + ChartSeriesType, + ChartsSeriesConfig, +} from '../models/seriesType/config'; +import { getLabel } from '../internals/getLabel'; +import { CommonSeriesType } from '../models/seriesType/common'; + +export interface UseItemTooltipReturnValue { + identifier: ItemInteractionData; + color: string; + label: string | undefined; + value: ChartsSeriesConfig[T]['valueType']; + formattedValue: string | undefined; +} + +export function useItemTooltip(): null | UseItemTooltipReturnValue { + const { item } = React.useContext(InteractionContext); + const series = useSeries(); + + const { xAxis, yAxis, xAxisIds, yAxisIds } = useCartesianContext(); + const { zAxis, zAxisIds } = React.useContext(ZAxisContext); + const colorProcessors = useColorProcessor(); + + const xAxisId = (series as any).xAxisId ?? (series as any).xAxisKey ?? xAxisIds[0]; + const yAxisId = (series as any).yAxisId ?? (series as any).yAxisKey ?? yAxisIds[0]; + const zAxisId = (series as any).zAxisId ?? (series as any).zAxisKey ?? zAxisIds[0]; + + if (!item || item.dataIndex === undefined) { + return null; + } + + const itemSeries = series[item.type]!.series[item.seriesId] as ChartSeriesDefaultized; + const getColor = + colorProcessors[itemSeries.type]?.( + itemSeries as any, + xAxisId && xAxis[xAxisId], + yAxisId && yAxis[yAxisId], + zAxisId && zAxis[zAxisId], + ) ?? (() => ''); + + if (itemSeries.type === 'pie') { + const point = itemSeries.data[item.dataIndex]; + const label = getLabel(point.label, 'tooltip'); + const value = { ...point, label }; + const formattedValue = ( + itemSeries.valueFormatter as CommonSeriesType['valueFormatter'] + )?.(value, { dataIndex: item.dataIndex }); + + return { + identifier: item as ItemInteractionData, + color: getColor(item.dataIndex), + label, + value, + formattedValue, + } as UseItemTooltipReturnValue; + } + + const label = getLabel(itemSeries.label, 'tooltip'); + const value = itemSeries.data[item.dataIndex]; + const formattedValue = ( + itemSeries.valueFormatter as CommonSeriesType['valueFormatter'] + )?.(value, { dataIndex: item.dataIndex }); + + return { + identifier: item as ItemInteractionData, + color: getColor(item.dataIndex), + label, + value, + formattedValue, + } as UseItemTooltipReturnValue; +} diff --git a/packages/x-charts/src/ChartsTooltip/utils.tsx b/packages/x-charts/src/ChartsTooltip/utils.tsx index f637bbe80b1a..89faff2a7b17 100644 --- a/packages/x-charts/src/ChartsTooltip/utils.tsx +++ b/packages/x-charts/src/ChartsTooltip/utils.tsx @@ -45,7 +45,9 @@ export function generateVirtualElement(mousePosition: MousePosition | null) { }; } -export function useMouseTracker() { +export type UseMouseTrackerReturnValue = null | MousePosition; + +export function useMouseTracker(): UseMouseTrackerReturnValue { const svgRef = useSvgRef(); // Use a ref to avoid rerendering on every mousemove event. diff --git a/packages/x-charts/src/LineChart/AnimatedLine.tsx b/packages/x-charts/src/LineChart/AnimatedLine.tsx index 6283db6dbaf6..c0e66f8e370b 100644 --- a/packages/x-charts/src/LineChart/AnimatedLine.tsx +++ b/packages/x-charts/src/LineChart/AnimatedLine.tsx @@ -48,19 +48,21 @@ export interface AnimatedLineProps extends React.ComponentPropsWithoutRef<'path' */ function AnimatedLine(props: AnimatedLineProps) { const { d, skipAnimation, ownerState, ...other } = props; - const { left, top, bottom, width, height, right } = useDrawingArea(); + const drawingArea = useDrawingArea(); const chartId = useChartId(); const stringInterpolator = useStringInterpolator(d); - const transitionAppear = useTransition([1], { - from: { animatedWidth: left }, - to: { animatedWidth: width + left + right }, - enter: { animatedWidth: width + left + right }, - leave: { animatedWidth: left }, - reset: false, - immediate: skipAnimation, - }); + const transitionAppear = useTransition( + [drawingArea], + { + from: (v) => ({ animatedWidth: v.left }), + enter: (v) => ({ animatedWidth: v.width + v.left + v.right }), + leave: (v) => ({ animatedWidth: v.width + v.left + v.right }), + reset: false, + immediate: skipAnimation, + }, + ); const transitionChange = useTransition([stringInterpolator], { from: { value: 0 }, @@ -75,7 +77,12 @@ function AnimatedLine(props: AnimatedLineProps) { {transitionAppear((style) => ( - + ))} diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index b4e3bc03d708..c688859d63be 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -326,6 +326,16 @@ LineChart.propTypes = { * Callback fired when a mark element is clicked. */ onMarkClick: PropTypes.func, + /** + * The chart will try to wait for the parent container to resolve its size + * before it renders for the first time. + * + * This can be useful in some scenarios where the chart appear to grow after + * the first render, like when used inside a grid. + * + * @default false + */ + resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index e976de30675d..4f146326fcd5 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -328,6 +328,16 @@ PieChart.propTypes = { * Callback fired when a pie arc is clicked. */ onItemClick: PropTypes.func, + /** + * The chart will try to wait for the parent container to resolve its size + * before it renders for the first time. + * + * This can be useful in some scenarios where the chart appear to grow after + * the first render, like when used inside a grid. + * + * @default false + */ + resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx index 7932c917cc6d..e1978ceedde9 100644 --- a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx +++ b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx @@ -15,6 +15,16 @@ export interface ResponsiveChartContainerProps * The height of the chart in px. If not defined, it takes the height of the parent element. */ height?: number; + /** + * The chart will try to wait for the parent container to resolve its size + * before it renders for the first time. + * + * This can be useful in some scenarios where the chart appear to grow after + * the first render, like when used inside a grid. + * + * @default false + */ + resolveSizeBeforeRender?: boolean; } const ResponsiveChartContainer = React.forwardRef(function ResponsiveChartContainer( @@ -88,6 +98,16 @@ ResponsiveChartContainer.propTypes = { * If not provided, the container supports line, bar, scatter and pie charts. */ plugins: PropTypes.arrayOf(PropTypes.object), + /** + * The chart will try to wait for the parent container to resolve its size + * before it renders for the first time. + * + * This can be useful in some scenarios where the chart appear to grow after + * the first render, like when used inside a grid. + * + * @default false + */ + resolveSizeBeforeRender: PropTypes.bool, /** * The array of series to display. * Each type of series has its own specificity. diff --git a/packages/x-charts/src/ResponsiveChartContainer/useChartContainerDimensions.ts b/packages/x-charts/src/ResponsiveChartContainer/useChartContainerDimensions.ts index c256d2167b8e..73eed0dd181b 100644 --- a/packages/x-charts/src/ResponsiveChartContainer/useChartContainerDimensions.ts +++ b/packages/x-charts/src/ResponsiveChartContainer/useChartContainerDimensions.ts @@ -3,8 +3,12 @@ import * as React from 'react'; import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; import ownerWindow from '@mui/utils/ownerWindow'; -export const useChartContainerDimensions = (inWidth?: number, inHeight?: number) => { - const displayError = React.useRef(false); +export const useChartContainerDimensions = ( + inWidth?: number, + inHeight?: number, + resolveSizeBeforeRender?: boolean, +) => { + const stateRef = React.useRef({ displayError: false, initialCompute: true, computeRun: 0 }); const rootRef = React.useRef(null); const [width, setWidth] = React.useState(0); @@ -15,7 +19,7 @@ export const useChartContainerDimensions = (inWidth?: number, inHeight?: number) const mainEl = rootRef?.current; if (!mainEl) { - return; + return {}; } const win = ownerWindow(mainEl); @@ -26,13 +30,36 @@ export const useChartContainerDimensions = (inWidth?: number, inHeight?: number) setWidth(newWidth); setHeight(newHeight); + + return { width: newWidth, height: newHeight }; }, []); React.useEffect(() => { // Ensure the error detection occurs after the first rendering. - displayError.current = true; + stateRef.current.displayError = true; }, []); + // This effect is used to compute the size of the container on the initial render. + // It is not bound to the raf loop to avoid an unwanted "resize" event. + // https://github.com/mui/mui-x/issues/13477#issuecomment-2336634785 + useEnhancedEffect(() => { + // computeRun is used to avoid infinite loops. + if ( + !resolveSizeBeforeRender || + !stateRef.current.initialCompute || + stateRef.current.computeRun > 20 + ) { + return; + } + + const computedSize = computeSize(); + if (computedSize.width !== width || computedSize.height !== height) { + stateRef.current.computeRun += 1; + } else if (stateRef.current.initialCompute) { + stateRef.current.initialCompute = false; + } + }, [width, height, computeSize, resolveSizeBeforeRender]); + useEnhancedEffect(() => { if (inWidth !== undefined && inHeight !== undefined) { return () => {}; @@ -68,17 +95,17 @@ export const useChartContainerDimensions = (inWidth?: number, inHeight?: number) }, [computeSize, inHeight, inWidth]); if (process.env.NODE_ENV !== 'production') { - if (displayError.current && inWidth === undefined && width === 0) { + if (stateRef.current.displayError && inWidth === undefined && width === 0) { console.error( `MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`, ); - displayError.current = false; + stateRef.current.displayError = false; } - if (displayError.current && inHeight === undefined && height === 0) { + if (stateRef.current.displayError && inHeight === undefined && height === 0) { console.error( `MUI X: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`, ); - displayError.current = false; + stateRef.current.displayError = false; } } diff --git a/packages/x-charts/src/ResponsiveChartContainer/useResponsiveChartContainerProps.ts b/packages/x-charts/src/ResponsiveChartContainer/useResponsiveChartContainerProps.ts index 94b91affe7b8..bb2234b6c80e 100644 --- a/packages/x-charts/src/ResponsiveChartContainer/useResponsiveChartContainerProps.ts +++ b/packages/x-charts/src/ResponsiveChartContainer/useResponsiveChartContainerProps.ts @@ -10,6 +10,7 @@ export const useResponsiveChartContainerProps = ( const { width, height, + resolveSizeBeforeRender, margin, children, series, @@ -33,7 +34,7 @@ export const useResponsiveChartContainerProps = ( containerRef, width: dWidth, height: dHeight, - } = useChartContainerDimensions(width, height); + } = useChartContainerDimensions(width, height, resolveSizeBeforeRender); const resizableChartContainerProps = { ...other, diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index cbbe56dfa9e8..1c9d3e8ad780 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -280,6 +280,16 @@ ScatterChart.propTypes = { * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier. */ onItemClick: PropTypes.func, + /** + * The chart will try to wait for the parent container to resolve its size + * before it renders for the first time. + * + * This can be useful in some scenarios where the chart appear to grow after + * the first render, like when used inside a grid. + * + * @default false + */ + resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index da1d649bdb0b..455b8eda8526 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -320,6 +320,16 @@ SparkLineChart.propTypes = { * @default 'line' */ plotType: PropTypes.oneOf(['bar', 'line']), + /** + * The chart will try to wait for the parent container to resolve its size + * before it renders for the first time. + * + * This can be useful in some scenarios where the chart appear to grow after + * the first render, like when used inside a grid. + * + * @default false + */ + resolveSizeBeforeRender: PropTypes.bool, /** * Set to `true` to highlight the value. * With line, it shows a point. diff --git a/packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx b/packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx index ce91adc949fa..6ef033c96f8f 100644 --- a/packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx +++ b/packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx @@ -1,9 +1,9 @@ 'use client'; import * as React from 'react'; +import { computeAxisValue } from '../../internals/computeAxisValue'; import { useDrawingArea } from '../../hooks/useDrawingArea'; import { useSeries } from '../../hooks/useSeries'; import { CartesianContext } from './CartesianContext'; -import { computeValue } from './computeValue'; import { useXExtremumGetter } from '../PluginProvider/useXExtremumGetter'; import { useYExtremumGetter } from '../PluginProvider'; import { CartesianProviderProps } from './Cartesian.types'; @@ -18,7 +18,7 @@ function CartesianProvider(props: CartesianProviderProps) { const xValues = React.useMemo( () => - computeValue({ + computeAxisValue({ drawingArea, formattedSeries, axis: xAxis, @@ -30,7 +30,7 @@ function CartesianProvider(props: CartesianProviderProps) { const yValues = React.useMemo( () => - computeValue({ + computeAxisValue({ drawingArea, formattedSeries, axis: yAxis, diff --git a/packages/x-charts/src/context/CartesianProvider/getAxisExtremum.ts b/packages/x-charts/src/context/CartesianProvider/getAxisExtremum.ts index eab86f0ee0db..29f9597f571a 100644 --- a/packages/x-charts/src/context/CartesianProvider/getAxisExtremum.ts +++ b/packages/x-charts/src/context/CartesianProvider/getAxisExtremum.ts @@ -9,7 +9,7 @@ const axisExtremumCallback = ( chartType: T, axis: AxisConfig, getters: ExtremumGettersConfig, - isDefaultAxis: boolean, + axisIndex: number, formattedSeries: FormattedSeries, getFilters?: GetZoomAxisFilters, ): ExtremumGetterResult => { @@ -19,7 +19,8 @@ const axisExtremumCallback = ( const [minChartTypeData, maxChartTypeData] = getter?.({ series, axis, - isDefaultAxis, + axisIndex, + isDefaultAxis: axisIndex === 0, getFilters, }) ?? [Infinity, -Infinity]; @@ -31,7 +32,7 @@ const axisExtremumCallback = ( export const getAxisExtremum = ( axis: AxisConfig, getters: ExtremumGettersConfig, - isDefaultAxis: boolean, + axisIndex: number, formattedSeries: FormattedSeries, getFilters?: GetZoomAxisFilters, ) => { @@ -39,15 +40,7 @@ export const getAxisExtremum = ( const extremums = charTypes.reduce( (acc, charType) => - axisExtremumCallback( - acc, - charType, - axis, - getters, - isDefaultAxis, - formattedSeries, - getFilters, - ), + axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries, getFilters), [Infinity, -Infinity], ); diff --git a/packages/x-charts/src/context/CartesianProvider/index.ts b/packages/x-charts/src/context/CartesianProvider/index.ts index e17cfb004cd8..68ff254ef711 100644 --- a/packages/x-charts/src/context/CartesianProvider/index.ts +++ b/packages/x-charts/src/context/CartesianProvider/index.ts @@ -1,12 +1,4 @@ -import { computeValue } from './computeValue'; - export * from './CartesianProvider'; export * from './CartesianContext'; export * from './useCartesianContext'; export * from './Cartesian.types'; - -const cartesianProviderUtils = { - computeValue, -}; - -export { cartesianProviderUtils }; diff --git a/packages/x-charts/src/context/PluginProvider/ExtremumGetter.types.ts b/packages/x-charts/src/context/PluginProvider/ExtremumGetter.types.ts index cdbf8e486c42..86257071fbbb 100644 --- a/packages/x-charts/src/context/PluginProvider/ExtremumGetter.types.ts +++ b/packages/x-charts/src/context/PluginProvider/ExtremumGetter.types.ts @@ -13,6 +13,7 @@ export type ExtremumGettersConfig = { series: Record>; axis: AxisConfig; + axisIndex: number; isDefaultAxis: boolean; getFilters?: (params: { currentAxisId: AxisId | undefined; diff --git a/packages/x-charts/src/context/PluginProvider/Plugin.types.ts b/packages/x-charts/src/context/PluginProvider/Plugin.types.ts index d175ba511cde..3cc7f7f8826a 100644 --- a/packages/x-charts/src/context/PluginProvider/Plugin.types.ts +++ b/packages/x-charts/src/context/PluginProvider/Plugin.types.ts @@ -17,6 +17,8 @@ export type PluginContextState = { colorProcessors: ColorProcessorsConfig; xExtremumGetters: ExtremumGettersConfig; yExtremumGetters: ExtremumGettersConfig; + rotationExtremumGetters: ExtremumGettersConfig; + radiusExtremumGetters: ExtremumGettersConfig; }; export type ChartsPlugin = T extends ChartSeriesType @@ -26,5 +28,7 @@ export type ChartsPlugin = T extends ChartSeriesType colorProcessor: ColorProcessor; xExtremumGetter?: ExtremumGetter; yExtremumGetter?: ExtremumGetter; + rotationExtremumGetter?: ExtremumGetter; + radiusExtremumGetter?: ExtremumGetter; } : never; diff --git a/packages/x-charts/src/context/PluginProvider/PluginContext.ts b/packages/x-charts/src/context/PluginProvider/PluginContext.ts index 5cce0406b858..3924afa05b79 100644 --- a/packages/x-charts/src/context/PluginProvider/PluginContext.ts +++ b/packages/x-charts/src/context/PluginProvider/PluginContext.ts @@ -9,6 +9,8 @@ export const PluginContext = React.createContext[]) { const colorProcessors: ColorProcessorsConfig = {}; const xExtremumGetters: ExtremumGettersConfig = {}; const yExtremumGetters: ExtremumGettersConfig = {}; + const rotationExtremumGetters: ExtremumGettersConfig = {}; + const radiusExtremumGetters: ExtremumGettersConfig = {}; for (let i = 0; i < defaultizedPlugins.length; i += 1) { const plugin = defaultizedPlugins[i]; @@ -33,6 +35,17 @@ export function mergePlugins(plugins?: ChartsPlugin[]) { if (plugin.yExtremumGetter) { yExtremumGetters[seriesType] = plugin.yExtremumGetter as ExtremumGetter; } + + if (plugin.rotationExtremumGetter) { + rotationExtremumGetters[seriesType] = plugin.rotationExtremumGetter as ExtremumGetter< + typeof seriesType + >; + } + if (plugin.radiusExtremumGetter) { + radiusExtremumGetters[seriesType] = plugin.radiusExtremumGetter as ExtremumGetter< + typeof seriesType + >; + } } return { @@ -40,5 +53,7 @@ export function mergePlugins(plugins?: ChartsPlugin[]) { colorProcessors, xExtremumGetters, yExtremumGetters, + rotationExtremumGetters, + radiusExtremumGetters, }; } diff --git a/packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts b/packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts new file mode 100644 index 000000000000..bc7e1ce5b56e --- /dev/null +++ b/packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts @@ -0,0 +1,28 @@ +'use client'; +import * as React from 'react'; +import { ChartSeriesType } from '../../models/seriesType/config'; +import { PluginContext } from './PluginContext'; +import { ExtremumGettersConfig } from './ExtremumGetter.types'; + +export function useRadiusExtremumGetter( + seriesType: T, +): ExtremumGettersConfig[T]; +export function useRadiusExtremumGetter(): ExtremumGettersConfig; +export function useRadiusExtremumGetter(seriesType?: ChartSeriesType) { + const { isInitialized, data } = React.useContext(PluginContext); + + if (!isInitialized) { + throw new Error( + [ + 'MUI X: Could not find the plugin context.', + 'It looks like you rendered your component outside of a ChartsContainer parent component.', + ].join('\n'), + ); + } + + if (!seriesType) { + return data.radiusExtremumGetters; + } + + return data.radiusExtremumGetters[seriesType]; +} diff --git a/packages/x-charts/src/context/PluginProvider/useRotationExtremumGetter.ts b/packages/x-charts/src/context/PluginProvider/useRotationExtremumGetter.ts new file mode 100644 index 000000000000..5b8bc6b92be1 --- /dev/null +++ b/packages/x-charts/src/context/PluginProvider/useRotationExtremumGetter.ts @@ -0,0 +1,28 @@ +'use client'; +import * as React from 'react'; +import { ChartSeriesType } from '../../models/seriesType/config'; +import { PluginContext } from './PluginContext'; +import { ExtremumGettersConfig } from './ExtremumGetter.types'; + +export function useRotationExtremumGetter( + seriesType: T, +): ExtremumGettersConfig[T]; +export function useRotationExtremumGetter(): ExtremumGettersConfig; +export function useRotationExtremumGetter(seriesType?: ChartSeriesType) { + const { isInitialized, data } = React.useContext(PluginContext); + + if (!isInitialized) { + throw new Error( + [ + 'MUI X: Could not find the plugin context.', + 'It looks like you rendered your component outside of a ChartsContainer parent component.', + ].join('\n'), + ); + } + + if (!seriesType) { + return data.rotationExtremumGetters; + } + + return data.rotationExtremumGetters[seriesType]; +} diff --git a/packages/x-charts/src/context/PolarProvider/Polar.types.ts b/packages/x-charts/src/context/PolarProvider/Polar.types.ts new file mode 100644 index 000000000000..a41fe3704d81 --- /dev/null +++ b/packages/x-charts/src/context/PolarProvider/Polar.types.ts @@ -0,0 +1,52 @@ +import { DatasetType } from '../../models/seriesType/config'; +import { + AxisDefaultized, + ScaleName, + AxisId, + AxisConfig, + ChartsRotationAxisProps, + ChartsRadiusAxisProps, +} from '../../models/axis'; + +export type PolarProviderProps = { + /** + * The configuration of the rotation-axes. + * If not provided, a default axis config is used. + * An array of [[AxisConfig]] objects. + */ + rotationAxis: AxisConfig[]; + /** + * The configuration of the radial-axes. + * If not provided, a default axis config is used. + * An array of [[AxisConfig]] objects. + */ + radiusAxis: AxisConfig<'linear', any, ChartsRadiusAxisProps>[]; + /** + * An array of objects that can be used to populate series and axes data using their `dataKey` property. + */ + dataset?: DatasetType; + children: React.ReactNode; +}; + +export type DefaultizedAxisConfig = { + [axisId: AxisId]: AxisDefaultized; +}; + +export type PolarContextState = { + /** + * Mapping from rotation-axis key to scaling configuration. + */ + rotationAxis: DefaultizedAxisConfig; + /** + * Mapping from radius-axis key to scaling configuration. + */ + radiusAxis: DefaultizedAxisConfig; + /** + * The rotation-axes IDs sorted by order they got provided. + */ + rotationAxisIds: AxisId[]; + /** + * The radius-axes IDs sorted by order they got provided. + */ + radiusAxisIds: AxisId[]; +}; diff --git a/packages/x-charts/src/context/PolarProvider/PolarContext.ts b/packages/x-charts/src/context/PolarProvider/PolarContext.ts new file mode 100644 index 000000000000..ed4c0b0169ea --- /dev/null +++ b/packages/x-charts/src/context/PolarProvider/PolarContext.ts @@ -0,0 +1,18 @@ +import * as React from 'react'; + +import { Initializable } from '../context.types'; +import { PolarContextState } from './Polar.types'; + +export const PolarContext = React.createContext>({ + isInitialized: false, + data: { + rotationAxis: {}, + radiusAxis: {}, + rotationAxisIds: [], + radiusAxisIds: [], + }, +}); + +if (process.env.NODE_ENV !== 'production') { + PolarContext.displayName = 'PolarContext'; +} diff --git a/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx b/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx new file mode 100644 index 000000000000..515e3fa5fbf0 --- /dev/null +++ b/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx @@ -0,0 +1,59 @@ +'use client'; +import * as React from 'react'; +import { computeAxisValue } from '../../internals/computeAxisValue'; +import { useDrawingArea } from '../../hooks/useDrawingArea'; +import { useSeries } from '../../hooks/useSeries'; +import { PolarContext } from './PolarContext'; +import { useRadiusExtremumGetter } from '../PluginProvider/useRadiusExtremumGetter'; +import { useRotationExtremumGetter } from '../PluginProvider/useRotationExtremumGetter'; +import { PolarProviderProps } from './Polar.types'; + +function PolarProvider(props: PolarProviderProps) { + const { rotationAxis, radiusAxis, children } = props; + + const formattedSeries = useSeries(); + const drawingArea = useDrawingArea(); + const rotationExtremumGetters = useRotationExtremumGetter(); + const radiusExtremumGetters = useRadiusExtremumGetter(); + + const rotationValues = React.useMemo( + () => + computeAxisValue({ + drawingArea, + formattedSeries, + axis: rotationAxis, + extremumGetters: rotationExtremumGetters, + axisDirection: 'rotation', + }), + [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters], + ); + + const radiusValues = React.useMemo( + () => + computeAxisValue({ + drawingArea, + formattedSeries, + axis: radiusAxis, + extremumGetters: radiusExtremumGetters, + axisDirection: 'radius', + }), + [drawingArea, formattedSeries, radiusAxis, radiusExtremumGetters], + ); + + const value = React.useMemo( + () => ({ + isInitialized: true, + data: { + rotationAxis: rotationValues.axis, + radiusAxis: radiusValues.axis, + rotationAxisIds: rotationValues.axisIds, + radiusAxisIds: radiusValues.axisIds, + }, + }), + [rotationValues, radiusValues], + ); + + return {children}; +} + +export { PolarProvider }; diff --git a/packages/x-charts/src/context/PolarProvider/getAxisExtremum.ts b/packages/x-charts/src/context/PolarProvider/getAxisExtremum.ts new file mode 100644 index 000000000000..e08b66fab04e --- /dev/null +++ b/packages/x-charts/src/context/PolarProvider/getAxisExtremum.ts @@ -0,0 +1,48 @@ +import { AxisConfig } from '../../models'; +import { CartesianChartSeriesType } from '../../models/seriesType/config'; +import { FormattedSeries } from '../SeriesProvider'; +import { ExtremumGettersConfig, ExtremumGetterResult } from '../PluginProvider'; + +const axisExtremumCallback = ( + acc: ExtremumGetterResult, + chartType: T, + axis: AxisConfig, + getters: ExtremumGettersConfig, + axisIndex: number, + formattedSeries: FormattedSeries, +): ExtremumGetterResult => { + const getter = getters[chartType]; + const series = formattedSeries[chartType]?.series ?? {}; + + const [minChartTypeData, maxChartTypeData] = getter?.({ + series, + axis, + axisIndex, + isDefaultAxis: axisIndex === 0, + }) ?? [Infinity, -Infinity]; + + const [minData, maxData] = acc; + + return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)]; +}; + +export const getAxisExtremum = ( + axis: AxisConfig, + getters: ExtremumGettersConfig, + axisIndex: number, + formattedSeries: FormattedSeries, +) => { + const charTypes = Object.keys(getters) as CartesianChartSeriesType[]; + + const extremums = charTypes.reduce( + (acc, charType) => + axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries), + [Infinity, -Infinity], + ); + + if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) { + return [Infinity, -Infinity]; + } + + return extremums; +}; diff --git a/packages/x-charts/src/context/PolarProvider/index.ts b/packages/x-charts/src/context/PolarProvider/index.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/packages/x-charts/src/context/PolarProvider/usePolarContext.ts b/packages/x-charts/src/context/PolarProvider/usePolarContext.ts new file mode 100644 index 000000000000..7973cc6a535a --- /dev/null +++ b/packages/x-charts/src/context/PolarProvider/usePolarContext.ts @@ -0,0 +1,9 @@ +'use client'; +import * as React from 'react'; +import { PolarContext } from './PolarContext'; +import { PolarContextState } from './Polar.types'; + +export const usePolarContext = (): PolarContextState => { + const { data } = React.useContext(PolarContext); + return data; +}; diff --git a/packages/x-charts/src/context/CartesianProvider/computeValue.ts b/packages/x-charts/src/internals/computeAxisValue.ts similarity index 68% rename from packages/x-charts/src/context/CartesianProvider/computeValue.ts rename to packages/x-charts/src/internals/computeAxisValue.ts index 19eb03e996b9..bd286f0848f6 100644 --- a/packages/x-charts/src/context/CartesianProvider/computeValue.ts +++ b/packages/x-charts/src/internals/computeAxisValue.ts @@ -1,36 +1,62 @@ import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale'; -import { AxisConfig, ScaleName } from '../../models'; +import { AxisConfig, ScaleName } from '../models'; import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, isBandScaleConfig, isPointScaleConfig, -} from '../../models/axis'; -import { CartesianChartSeriesType } from '../../models/seriesType/config'; -import { getColorScale, getOrdinalColorScale } from '../../internals/colorScale'; -import { getTickNumber } from '../../hooks/useTicks'; -import { getScale } from '../../internals/getScale'; -import { DrawingArea } from '../DrawingProvider'; -import { FormattedSeries } from '../SeriesProvider'; -import { zoomScaleRange } from './zoom'; -import { ExtremumGetter } from '../PluginProvider'; + ChartsRadiusAxisProps, + ChartsRotationAxisProps, +} from '../models/axis'; +import { CartesianChartSeriesType } from '../models/seriesType/config'; +import { getColorScale, getOrdinalColorScale } from './colorScale'; +import { getTickNumber } from '../hooks/useTicks'; +import { getScale } from './getScale'; +import { DrawingArea } from '../context/DrawingProvider'; +import { FormattedSeries } from '../context/SeriesProvider'; +import { zoomScaleRange } from '../context/CartesianProvider/zoom'; +import { ExtremumGetter } from '../context/PluginProvider'; import { DefaultizedAxisConfig, ZoomData, ZoomOptions, GetZoomAxisFilters, -} from './Cartesian.types'; -import { getAxisExtremum } from './getAxisExtremum'; - -const getRange = (drawingArea: DrawingArea, axisDirection: 'x' | 'y', isReverse?: boolean) => { - const range = +} from '../context/CartesianProvider/Cartesian.types'; +import { getAxisExtremum } from '../context/CartesianProvider/getAxisExtremum'; + +function getRange( + drawingArea: DrawingArea, + axisDirection: 'x' | 'y' | 'radius' | 'rotation', + axis: AxisConfig< + ScaleName, + any, + ChartsRotationAxisProps | ChartsRotationAxisProps | ChartsAxisProps + >, +): [number, number] { + if (axisDirection === 'rotation') { + const { startAngle = 0, endAngle = startAngle + 360 } = axis as AxisConfig< + ScaleName, + any, + ChartsRotationAxisProps + >; + return axis.reverse + ? [(Math.PI * startAngle) / 180, (Math.PI * endAngle) / 180] + : [(Math.PI * endAngle) / 180, (Math.PI * startAngle) / 180]; + } + if (axisDirection === 'radius') { + const { minRadius = 0, maxRadius = Math.min(drawingArea.width, drawingArea.height) / 2 } = + axis as AxisConfig; + return [minRadius, maxRadius]; + } + + const range: [number, number] = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top]; - return isReverse ? range.reverse() : range; -}; + return axis.reverse ? [range[1], range[0]] : range; +} const isDateData = (data?: any[]): data is Date[] => data?.[0] instanceof Date; @@ -61,19 +87,31 @@ type ComputeCommonParams = { getFilters?: GetZoomAxisFilters; }; -export function computeValue( +export function computeAxisValue( options: ComputeCommonParams & { axis: AxisConfig[]; axisDirection: 'y'; }, ): ComputeResult; -export function computeValue( +export function computeAxisValue( options: ComputeCommonParams & { axis: AxisConfig[]; axisDirection: 'x'; }, ): ComputeResult; -export function computeValue({ +export function computeAxisValue( + options: ComputeCommonParams & { + axis: AxisConfig[]; + axisDirection: 'radius'; + }, +): ComputeResult; +export function computeAxisValue( + options: ComputeCommonParams & { + axis: AxisConfig[]; + axisDirection: 'rotation'; + }, +): ComputeResult; +export function computeAxisValue({ drawingArea, formattedSeries, axis: allAxis, @@ -84,21 +122,20 @@ export function computeValue({ getFilters, }: ComputeCommonParams & { axis: AxisConfig[]; - axisDirection: 'x' | 'y'; + axisDirection: 'x' | 'y' | 'radius' | 'rotation'; }) { const completeAxis: DefaultizedAxisConfig = {}; allAxis.forEach((eachAxis, axisIndex) => { const axis = eachAxis as Readonly>>; - const isDefaultAxis = axisIndex === 0; const zoomOption = zoomOptions?.[axis.id]; const zoom = zoomData?.find(({ axisId }) => axisId === axis.id); const zoomRange: [number, number] = zoom ? [zoom.start, zoom.end] : [0, 100]; - const range = getRange(drawingArea, axisDirection, axis.reverse); + const range = getRange(drawingArea, axisDirection, axis); const [minData, maxData] = getAxisExtremum( axis, extremumGetters, - isDefaultAxis, + axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined, // Do not apply filtering if zoom is already defined. ); @@ -108,7 +145,7 @@ export function computeValue({ const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO; const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO; // Reverse range because ordinal scales are presented from top to bottom on y-axis - const scaleRange = axisDirection === 'x' ? range : [range[1], range[0]]; + const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range; const zoomedRange = zoomScaleRange(scaleRange, zoomRange); completeAxis[axis.id] = { @@ -133,7 +170,7 @@ export function computeValue({ } } if (isPointScaleConfig(axis)) { - const scaleRange = axisDirection === 'x' ? range : [...range].reverse(); + const scaleRange = axisDirection === 'y' ? [...range].reverse() : range; const zoomedRange = zoomScaleRange(scaleRange, zoomRange); completeAxis[axis.id] = { diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts index e3eca45c3d56..aaeb3b434ee6 100644 --- a/packages/x-charts/src/internals/index.ts +++ b/packages/x-charts/src/internals/index.ts @@ -23,6 +23,7 @@ export * from './getSVGPoint'; export * from './isDefined'; export { unstable_cleanupDOM } from './domUtils'; export * from './getScale'; +export * from './computeAxisValue'; // contexts diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index 2d2f49ed71e1..fddf9a852a7b 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -158,6 +158,28 @@ export interface ChartsXAxisProps extends ChartsAxisProps { position?: 'top' | 'bottom'; } +export interface ChartsRotationAxisProps extends ChartsAxisProps { + /** + * The start angle (in deg). + */ + startAngle?: number; + /** + * The end angle (in deg). + */ + endAngle?: number; +} + +export interface ChartsRadiusAxisProps extends ChartsAxisProps { + /** + * The minimal radius. + */ + minRadius?: number; + /** + * The maximal radius. + */ + maxRadius?: number; +} + export type ScaleName = keyof AxisScaleConfig; export type ContinuousScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc'; diff --git a/packages/x-charts/src/models/seriesType/config.ts b/packages/x-charts/src/models/seriesType/config.ts index 298350f00581..563ca7b6ec62 100644 --- a/packages/x-charts/src/models/seriesType/config.ts +++ b/packages/x-charts/src/models/seriesType/config.ts @@ -1,7 +1,18 @@ -import { ScatterSeriesType, DefaultizedScatterSeriesType, ScatterItemIdentifier } from './scatter'; +import { + ScatterSeriesType, + DefaultizedScatterSeriesType, + ScatterItemIdentifier, + ScatterValueType, +} from './scatter'; import { LineSeriesType, DefaultizedLineSeriesType, LineItemIdentifier } from './line'; import { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from './bar'; -import { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType } from './pie'; +import { + PieSeriesType, + DefaultizedPieSeriesType, + PieItemIdentifier, + PieValueType, + DefaultizedPieValueType, +} from './pie'; import { DefaultizedProps, MakeOptional } from '../helpers'; export interface ChartsSeriesConfig { @@ -19,6 +30,7 @@ export interface ChartsSeriesConfig { */ seriesProp: BarSeriesType; itemIdentifier: BarItemIdentifier; + valueType: number | null; canBeStacked: true; cartesian: true; }; @@ -27,6 +39,7 @@ export interface ChartsSeriesConfig { series: DefaultizedLineSeriesType; seriesProp: LineSeriesType; itemIdentifier: LineItemIdentifier; + valueType: number | null; canBeStacked: true; cartesian: true; }; @@ -34,6 +47,7 @@ export interface ChartsSeriesConfig { seriesInput: DefaultizedProps & { color: string }; series: DefaultizedScatterSeriesType; seriesProp: ScatterSeriesType; + valueType: ScatterValueType; itemIdentifier: ScatterItemIdentifier; cartesian: true; }; @@ -44,6 +58,7 @@ export interface ChartsSeriesConfig { series: DefaultizedPieSeriesType; seriesProp: PieSeriesType>; itemIdentifier: PieItemIdentifier; + valueType: DefaultizedPieValueType; }; } diff --git a/packages/x-codemod/package.json b/packages/x-codemod/package.json index 385c02d2bcfb..0a811c49910e 100644 --- a/packages/x-codemod/package.json +++ b/packages/x-codemod/package.json @@ -42,7 +42,7 @@ "@types/jscodeshift": "^0.11.11", "dayjs": "^1.11.11", "moment-timezone": "^0.5.45", - "rimraf": "^5.0.10" + "rimraf": "^6.0.1" }, "sideEffects": false, "publishConfig": { diff --git a/packages/x-data-grid-generator/package.json b/packages/x-data-grid-generator/package.json index faea4d9752fe..df6c513b3a82 100644 --- a/packages/x-data-grid-generator/package.json +++ b/packages/x-data-grid-generator/package.json @@ -43,7 +43,7 @@ "@mui/icons-material": "^5.16.7", "@mui/material": "^5.16.7", "@types/chance": "^1.1.6", - "rimraf": "^5.0.10" + "rimraf": "^6.0.1" }, "peerDependencies": { "@emotion/react": "^11.9.0", diff --git a/packages/x-data-grid-premium/package.json b/packages/x-data-grid-premium/package.json index cb083a823d2d..37524ba2162a 100644 --- a/packages/x-data-grid-premium/package.json +++ b/packages/x-data-grid-premium/package.json @@ -72,12 +72,12 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.12", + "@mui/internal-test-utils": "^1.0.14", "@mui/material": "^5.16.7", "@mui/system": "^5.16.7", "@types/prop-types": "^15.7.12", "date-fns": "^2.30.0", - "rimraf": "^5.0.10" + "rimraf": "^6.0.1" }, "engines": { "node": ">=14.0.0" diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index 296cf56a407f..96b2d6a12655 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -170,6 +170,11 @@ DataGridPremiumRaw.propTypes = { * @default 150 */ columnBufferPx: PropTypes.number, + /** + * Sets the height in pixels of the column group headers in the Data Grid. + * Inherits the `columnHeaderHeight` value if not set. + */ + columnGroupHeaderHeight: PropTypes.number, columnGroupingModel: PropTypes.arrayOf(PropTypes.object), /** * Sets the height in pixel of the column headers in the Data Grid. diff --git a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts index d36c314e6292..755b116f5df7 100644 --- a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts +++ b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts @@ -62,6 +62,7 @@ export const useGridCellSelection = ( | 'columnHeaderHeight' >, ) => { + const hasRootReference = apiRef.current.rootElementRef.current !== null; const visibleRows = useGridVisibleRows(apiRef, props); const cellWithVirtualFocus = React.useRef(); const lastMouseDownCell = React.useRef(); @@ -476,7 +477,7 @@ export const useGridCellSelection = ( const document = ownerDocument(rootRef); document.removeEventListener('mouseup', handleMouseUp); }; - }, [apiRef, handleMouseUp, stopAutoScroll]); + }, [apiRef, hasRootReference, handleMouseUp, stopAutoScroll]); const checkIfCellIsSelected = React.useCallback>( (isSelected, { id, field }) => { diff --git a/packages/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx index 1b6d15e194f2..d3e861a8e353 100644 --- a/packages/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx @@ -14,7 +14,7 @@ describe(' - License', () => { expiryDate: addYears(new Date(), 1), orderNumber: 'Test', licenseModel: 'subscription', - scope: 'pro', + planScope: 'pro', planVersion: 'initial', }), ); diff --git a/packages/x-data-grid-pro/package.json b/packages/x-data-grid-pro/package.json index 59f60a36935e..2800a96e1597 100644 --- a/packages/x-data-grid-pro/package.json +++ b/packages/x-data-grid-pro/package.json @@ -70,11 +70,11 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.12", + "@mui/internal-test-utils": "^1.0.14", "@mui/material": "^5.16.7", "@mui/system": "^5.16.7", "@types/prop-types": "^15.7.12", - "rimraf": "^5.0.10" + "rimraf": "^6.0.1" }, "engines": { "node": ">=14.0.0" diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index e264a00e82d8..908659a54284 100644 --- a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -148,6 +148,11 @@ DataGridProRaw.propTypes = { * @default 150 */ columnBufferPx: PropTypes.number, + /** + * Sets the height in pixels of the column group headers in the Data Grid. + * Inherits the `columnHeaderHeight` value if not set. + */ + columnGroupHeaderHeight: PropTypes.number, columnGroupingModel: PropTypes.arrayOf(PropTypes.object), /** * Sets the height in pixel of the column headers in the Data Grid. diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx index 1d22e8793958..58ba0623f1bd 100644 --- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx +++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx @@ -15,6 +15,11 @@ import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass, useGridSelector, + GridFilterInputValue, + GridFilterInputDate, + GridFilterInputBoolean, + GridColType, + GridFilterInputSingleSelect, gridFilterModelSelector, gridFilterableColumnLookupSelector, GridPinnedColumnPosition, @@ -86,7 +91,16 @@ const useUtilityClasses = (ownerState: OwnerState) => { const dateSx = { [`& input[value=""]:not(:focus)`]: { color: 'transparent' }, }; - +const defaultInputComponents: { [key in GridColType]: React.JSXElementConstructor | null } = { + string: GridFilterInputValue, + number: GridFilterInputValue, + date: GridFilterInputDate, + dateTime: GridFilterInputDate, + boolean: GridFilterInputBoolean, + singleSelect: GridFilterInputSingleSelect, + actions: null, + custom: null, +}; const GridHeaderFilterCell = React.forwardRef( (props, ref) => { const { @@ -147,7 +161,9 @@ const GridHeaderFilterCell = React.forwardRef { diff --git a/packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx index ced989772a6b..dd09528419a0 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -166,19 +166,16 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { getColumnFilters({ position: GridPinnedColumnPosition.LEFT, renderContext: leftRenderContext, - minFirstColumn: leftRenderContext.firstColumnIndex, maxLastColumn: leftRenderContext.lastColumnIndex, })} {getColumnFilters({ renderContext, - minFirstColumn: pinnedColumns.left.length, maxLastColumn: visibleColumns.length - pinnedColumns.right.length, })} {rightRenderContext && getColumnFilters({ position: GridPinnedColumnPosition.RIGHT, renderContext: rightRenderContext, - minFirstColumn: rightRenderContext.firstColumnIndex, maxLastColumn: rightRenderContext.lastColumnIndex, })} diff --git a/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx index 81e7234e7548..19c8a82a619b 100644 --- a/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/infiniteLoader.DataGridPro.test.tsx @@ -2,12 +2,16 @@ import * as React from 'react'; import { createRenderer, waitFor } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { DataGridPro } from '@mui/x-data-grid-pro'; -import { spy } from 'sinon'; +import { spy, restore } from 'sinon'; import { getColumnValues, sleep } from 'test/utils/helperFn'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); describe(' - Infnite loader', () => { + afterEach(() => { + restore(); + }); + const { render } = createRenderer(); it('should call `onRowsScrollEnd` when viewport scroll reaches the bottom', async function test() { @@ -161,7 +165,7 @@ describe(' - Infnite loader', () => { expect(getRow.callCount).to.equal(5); }); - it('should not call `onRowsScrollEnd` if there are rows pinned to the bottom and the viewport scroll is at the top', async function test() { + it('should not observe intersections with the rows pinned to the bottom', async function test() { if (isJSDOM) { this.skip(); // Needs layout } @@ -178,6 +182,8 @@ describe(' - Infnite loader', () => { }; const handleRowsScrollEnd = spy(); + const observe = spy(window.IntersectionObserver.prototype, 'observe'); + function TestCase({ rows, pinnedRows, @@ -186,7 +192,7 @@ describe(' - Infnite loader', () => { pinnedRows: typeof basePinnedRows; }) { return ( -
+
- Infnite loader', () => { } const { container } = render(); const virtualScroller = container.querySelector('.MuiDataGrid-virtualScroller')!; - // after initial render and a scroll event that did not reach the bottom of the grid - // the `onRowsScrollEnd` should not be called - expect(handleRowsScrollEnd.callCount).to.equal(0); + // on the initial render, last row is not visible and the `observe` method is not called + expect(observe.callCount).to.equal(0); // arbitrary number to make sure that the bottom of the grid window is reached. virtualScroller.scrollTop = 12345; virtualScroller.dispatchEvent(new Event('scroll')); - await waitFor(() => { - expect(handleRowsScrollEnd.callCount).to.equal(1); - }); + // observer was attached + expect(observe.callCount).to.equal(1); }); }); diff --git a/packages/x-data-grid/package.json b/packages/x-data-grid/package.json index ef8e2c3e1554..f1816901cd50 100644 --- a/packages/x-data-grid/package.json +++ b/packages/x-data-grid/package.json @@ -71,13 +71,13 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.12", + "@mui/internal-test-utils": "^1.0.14", "@mui/joy": "^5.0.0-beta.48", "@mui/material": "^5.16.7", "@mui/system": "^5.16.7", "@mui/types": "^7.2.15", "@types/prop-types": "^15.7.12", - "rimraf": "^5.0.10" + "rimraf": "^6.0.1" }, "engines": { "node": ">=14.0.0" diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx index 6ee801c54b63..ee7649620c99 100644 --- a/packages/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/x-data-grid/src/DataGrid/DataGrid.tsx @@ -152,6 +152,11 @@ DataGridRaw.propTypes = { * @default 150 */ columnBufferPx: PropTypes.number, + /** + * Sets the height in pixels of the column group headers in the Data Grid. + * Inherits the `columnHeaderHeight` value if not set. + */ + columnGroupHeaderHeight: PropTypes.number, columnGroupingModel: PropTypes.arrayOf(PropTypes.object), /** * Sets the height in pixel of the column headers in the Data Grid. diff --git a/packages/x-data-grid/src/components/GridRow.tsx b/packages/x-data-grid/src/components/GridRow.tsx index 54317be88344..03c8b20797fc 100644 --- a/packages/x-data-grid/src/components/GridRow.tsx +++ b/packages/x-data-grid/src/components/GridRow.tsx @@ -511,6 +511,7 @@ GridRow.propTypes = { height: PropTypes.number.isRequired, width: PropTypes.number.isRequired, }).isRequired, + groupHeaderHeight: PropTypes.number.isRequired, hasScrollX: PropTypes.bool.isRequired, hasScrollY: PropTypes.bool.isRequired, headerFilterHeight: PropTypes.number.isRequired, diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx index d84c751c4175..e52267e0916d 100644 --- a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -65,7 +65,6 @@ export interface UseGridColumnHeadersProps { export interface GetHeadersParams { position?: GridPinnedColumnPosition; renderContext?: GridColumnsRenderContext; - minFirstColumn?: number; maxLastColumn?: number; } @@ -158,11 +157,8 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { // Helper for computation common between getColumnHeaders and getColumnGroupHeaders const getColumnsToRender = (params?: GetHeadersParams) => { - const { - renderContext: currentContext = renderContext, - // TODO: `minFirstColumn` is not used anymore, could be refactored out. - maxLastColumn = visibleColumns.length, - } = params || {}; + const { renderContext: currentContext = renderContext, maxLastColumn = visibleColumns.length } = + params || {}; const firstColumnToRender = currentContext.firstColumnIndex; const lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex; @@ -334,14 +330,12 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { { position: GridPinnedColumnPosition.LEFT, renderContext: leftRenderContext, - minFirstColumn: leftRenderContext.firstColumnIndex, maxLastColumn: leftRenderContext.lastColumnIndex, }, { disableReorder: true }, )} {getColumnHeaders({ renderContext, - minFirstColumn: pinnedColumns.left.length, maxLastColumn: visibleColumns.length - pinnedColumns.right.length, })} {rightRenderContext && @@ -349,7 +343,6 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { { position: GridPinnedColumnPosition.RIGHT, renderContext: rightRenderContext, - minFirstColumn: rightRenderContext.firstColumnIndex, maxLastColumn: rightRenderContext.lastColumnIndex, }, { @@ -463,7 +456,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { depth={depth} isLastColumn={headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length} maxDepth={headerGroupingMaxDepth} - height={dimensions.headerHeight} + height={dimensions.groupHeaderHeight} hasFocus={hasFocus} tabIndex={tabIndex} pinnedPosition={pinnedPosition} @@ -499,7 +492,6 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { params: { position: GridPinnedColumnPosition.LEFT, renderContext: leftRenderContext, - minFirstColumn: leftRenderContext.firstColumnIndex, maxLastColumn: leftRenderContext.lastColumnIndex, }, })} @@ -510,7 +502,6 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { params: { position: GridPinnedColumnPosition.RIGHT, renderContext: rightRenderContext, - minFirstColumn: rightRenderContext.firstColumnIndex, maxLastColumn: rightRenderContext.lastColumnIndex, }, })} diff --git a/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts b/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts index c7b5bdd3815c..9c7e20470eeb 100644 --- a/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts +++ b/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts @@ -62,6 +62,10 @@ export interface GridDimensions { * Height of one column header. */ headerHeight: number; + /** + * Height of one column group header. + */ + groupHeaderHeight: number; /** * Height of header filters. */ diff --git a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts index bf8cf2ac6ff8..64668b34fda4 100644 --- a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts +++ b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts @@ -42,6 +42,7 @@ type RootProps = Pick< | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight' + | 'columnGroupHeaderHeight' | 'headerFilterHeight' >; @@ -59,6 +60,7 @@ const EMPTY_DIMENSIONS: GridDimensions = { hasScrollY: false, scrollbarSize: 0, headerHeight: 0, + groupHeaderHeight: 0, headerFilterHeight: 0, rowWidth: 0, rowHeight: 0, @@ -92,6 +94,9 @@ export function useGridDimensions( const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector); const rowHeight = Math.floor(props.rowHeight * densityFactor); const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor); + const groupHeaderHeight = Math.floor( + (props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor, + ); const headerFilterHeight = Math.floor( (props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor, ); @@ -248,6 +253,7 @@ export function useGridDimensions( hasScrollY, scrollbarSize, headerHeight, + groupHeaderHeight, headerFilterHeight, rowWidth, rowHeight, @@ -275,6 +281,7 @@ export function useGridDimensions( rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, + groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts index 9a25971f2323..bb2224185e8e 100644 --- a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts +++ b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts @@ -39,6 +39,7 @@ import { GridCellEditStartReasons, GridCellEditStopReasons, } from '../../../models/params/gridEditCellParams'; +import { getDefaultCellValue } from './utils'; export const useGridCellEditing = ( apiRef: React.MutableRefObject, @@ -337,24 +338,7 @@ export const useGridCellEditing = ( let newValue = apiRef.current.getCellValue(id, field); if (deleteValue) { - const fieldType = apiRef.current.getColumn(field).type; - switch (fieldType) { - case 'boolean': - newValue = false; - break; - case 'date': - case 'dateTime': - case 'number': - newValue = undefined; - break; - case 'singleSelect': - newValue = null; - break; - case 'string': - default: - newValue = ''; - break; - } + newValue = getDefaultCellValue(apiRef.current.getColumn(field)); } else if (initialValue) { newValue = initialValue; } diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts index ff755e43b9b6..3953006c4b33 100644 --- a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts +++ b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts @@ -46,6 +46,7 @@ import { GridRowEditStartReasons, } from '../../../models/params/gridRowParams'; import { GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef'; +import { getDefaultCellValue } from './utils'; export const useGridRowEditing = ( apiRef: React.MutableRefObject, @@ -433,7 +434,11 @@ export const useGridRowEditing = ( let newValue = apiRef.current.getCellValue(id, field); if (fieldToFocus === field && (deleteValue || initialValue)) { - newValue = deleteValue ? '' : initialValue; + if (deleteValue) { + newValue = getDefaultCellValue(apiRef.current.getColumn(field)); + } else if (initialValue) { + newValue = initialValue; + } } acc[field] = { diff --git a/packages/x-data-grid/src/hooks/features/editing/utils.ts b/packages/x-data-grid/src/hooks/features/editing/utils.ts new file mode 100644 index 000000000000..8b3df8808b13 --- /dev/null +++ b/packages/x-data-grid/src/hooks/features/editing/utils.ts @@ -0,0 +1,17 @@ +import { GridColDef } from '../../../models/colDef/gridColDef'; + +export const getDefaultCellValue = (colDef: GridColDef) => { + switch (colDef.type) { + case 'boolean': + return false; + case 'date': + case 'dateTime': + case 'number': + return undefined; + case 'singleSelect': + return null; + case 'string': + default: + return ''; + } +}; diff --git a/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx index 3421133554eb..2769999d46bc 100644 --- a/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx +++ b/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx @@ -67,6 +67,7 @@ export const useGridPrintExport = ( apiRef: React.MutableRefObject, props: Pick, ): void => { + const hasRootReference = apiRef.current.rootElementRef.current !== null; const logger = useGridLogger(apiRef, 'useGridPrintExport'); const doc = React.useRef(null); const previousGridState = React.useRef(null); @@ -76,7 +77,7 @@ export const useGridPrintExport = ( React.useEffect(() => { doc.current = ownerDocument(apiRef.current.rootElementRef!.current!); - }, [apiRef]); + }, [apiRef, hasRootReference]); // Returns a promise because updateColumns triggers state update and // the new state needs to be in place before the grid can be sized correctly diff --git a/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts b/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts index fb01b27c54e8..2c8e83b00875 100644 --- a/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts +++ b/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts @@ -43,6 +43,7 @@ export const useGridFocus = ( const logger = useGridLogger(apiRef, 'useGridFocus'); const lastClickedCell = React.useRef(null); + const hasRootReference = apiRef.current.rootElementRef.current !== null; const publishCellFocusOut = React.useCallback( (cell: GridCellCoordinates | null, event: GridEventLookup['cellFocusOut']['event']) => { @@ -489,7 +490,7 @@ export const useGridFocus = ( return () => { doc.removeEventListener('mouseup', handleDocumentClick); }; - }, [apiRef, handleDocumentClick]); + }, [apiRef, hasRootReference, handleDocumentClick]); useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur); useGridApiEventHandler(apiRef, 'cellDoubleClick', handleCellDoubleClick); diff --git a/packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts b/packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts index b35036c795bf..1cb4bbd48f2a 100644 --- a/packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts +++ b/packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts @@ -122,7 +122,6 @@ export function useGridApiOptionHandler, ) { - // Validate that only one per event name? useGridApiEventHandler(apiRef, eventName, handler, optionsSubscriberOptions); } diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts index 2156844e4a87..cc713cbed84a 100644 --- a/packages/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/x-data-grid/src/models/props/DataGridProps.ts @@ -790,6 +790,11 @@ export interface DataGridPropsWithoutDefaultValue void; columnGroupingModel?: GridColumnGroupingModel; + /** + * Sets the height in pixels of the column group headers in the Data Grid. + * Inherits the `columnHeaderHeight` value if not set. + */ + columnGroupHeaderHeight?: number; /** * Callback called when the data is copied to the clipboard. * @param {string} data The data copied to the clipboard. diff --git a/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx index c27dbaf58942..a83f17033416 100644 --- a/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx @@ -849,6 +849,7 @@ describe(' - Keyboard', () => { function setupTest( rows: Record[], columns: GridColDef[], + editMode: DataGridProps['editMode'], ) { const valueSetterMock = spy>( (value, row, column) => { @@ -862,23 +863,26 @@ describe(' - Keyboard', () => { column.valueSetter = valueSetterMock; }); - render(); + render(); return { valueSetterMock }; } - function testResetValue( - keyType: 'Delete' | 'Backspace', - field: string, - type: GridColType, - value: string | number | Date | boolean, - ) { + type TestResetValueParams = { + editMode: DataGridProps['editMode']; + keyType: 'Delete' | 'Backspace'; + field: string; + type: GridColType; + value: string | number | Date | boolean; + }; + + function testResetValue({ editMode, keyType, field, type, value }: TestResetValueParams) { const columns: GridColDef[] = [ { field: 'id', editable: true }, { field, editable: true, type }, ]; const rows = [{ id: 1, [field]: value }]; - const { valueSetterMock } = setupTest(rows, columns); + const { valueSetterMock } = setupTest(rows, columns, editMode); const cell = getCell(0, 1); cell.focus(); @@ -890,85 +894,91 @@ describe(' - Keyboard', () => { }; } - it(`should reset value on Backspace key press for number type`, () => { - const { cell, deletedValue } = testResetValue('Backspace', 'age', 'number', 24); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(undefined); - }); - - it(`should reset value on Backspace key press for date type`, () => { - const { cell, deletedValue } = testResetValue('Backspace', 'birthdate', 'date', new Date()); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(undefined); - }); - - it(`should reset value on Backspace key press for dateTime type`, () => { - const { cell, deletedValue } = testResetValue( - 'Backspace', - 'appointment', - 'dateTime', - new Date(), - ); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(undefined); - }); - - it(`should reset value on Backspace key press for boolean type`, () => { - const { cell, deletedValue } = testResetValue('Backspace', 'isVerified', 'boolean', true); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(false); - }); - - it(`should reset value on Backspace key press for singleSelect type`, () => { - const { cell, deletedValue } = testResetValue( - 'Backspace', - 'status', - 'singleSelect', - 'active', - ); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(null); - }); - - it(`should reset value on Delete key press for string type`, () => { - const { cell, deletedValue } = testResetValue('Delete', 'name', 'string', 'John Doe'); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(''); - }); - - it(`should reset value on Delete key press for number type`, () => { - const { cell, deletedValue } = testResetValue('Delete', 'age', 'number', 24); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(undefined); - }); - - it(`should reset value on Delete key press for date type`, () => { - const { cell, deletedValue } = testResetValue('Delete', 'birthdate', 'date', new Date()); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(undefined); - }); - - it(`should reset value on Delete key press for dateTime type`, () => { - const { cell, deletedValue } = testResetValue( - 'Delete', - 'appointment', - 'dateTime', - new Date(), - ); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(undefined); - }); - - it(`should reset value on Delete key press for boolean type`, () => { - const { cell, deletedValue } = testResetValue('Delete', 'isVerified', 'boolean', true); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(false); - }); + const testWithEditmodeAndKeytype = ({ + editMode, + keyType, + }: Pick) => { + describe(`editMode="${editMode}" and ${keyType} key`, () => { + const defaultParams: TestResetValueParams = { + editMode, + keyType, + field: 'name', + type: 'string', + value: 'John Doe', + }; + + it(`should reset value for string type`, () => { + const { cell, deletedValue } = testResetValue({ + ...defaultParams, + keyType: 'Delete', + field: 'name', + type: 'string', + value: 'John Doe', + }); + expect(cell).to.equal(''); + expect(deletedValue).to.equal(''); + }); + + it(`should reset value for number type`, () => { + const { cell, deletedValue } = testResetValue({ + ...defaultParams, + field: 'age', + type: 'number', + value: 24, + }); + expect(cell).to.equal(''); + expect(deletedValue).to.equal(undefined); + }); + + it(`should reset value for date type`, () => { + const { cell, deletedValue } = testResetValue({ + ...defaultParams, + field: 'birthdate', + type: 'date', + value: new Date(), + }); + expect(cell).to.equal(''); + expect(deletedValue).to.equal(undefined); + }); + + it(`should reset value dateTime type`, () => { + const { cell, deletedValue } = testResetValue({ + ...defaultParams, + field: 'appointment', + type: 'dateTime', + value: new Date(), + }); + expect(cell).to.equal(''); + expect(deletedValue).to.equal(undefined); + }); + + it(`should reset value boolean type`, () => { + const { cell, deletedValue } = testResetValue({ + ...defaultParams, + field: 'isVerified', + type: 'boolean', + value: true, + }); + expect(cell).to.equal(''); + expect(deletedValue).to.equal(false); + }); + + it(`should reset value singleSelect type`, () => { + const { cell, deletedValue } = testResetValue({ + ...defaultParams, + field: 'status', + type: 'singleSelect', + value: 'active', + }); + expect(cell).to.equal(''); + expect(deletedValue).to.equal(null); + }); + }); + }; - it(`should reset value on Delete key press for singleSelect type`, () => { - const { cell, deletedValue } = testResetValue('Delete', 'status', 'singleSelect', 'active'); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(null); - }); + testWithEditmodeAndKeytype({ editMode: 'cell', keyType: 'Delete' }); + testWithEditmodeAndKeytype({ editMode: 'cell', keyType: 'Backspace' }); + testWithEditmodeAndKeytype({ editMode: 'row', keyType: 'Delete' }); + testWithEditmodeAndKeytype({ editMode: 'row', keyType: 'Backspace' }); }); }); diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index cddcbb2de174..dde9da5c0418 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -56,7 +56,7 @@ "@emotion/styled": "^11.8.1", "@mui/material": "^5.15.14 || ^6.0.0", "@mui/system": "^5.15.14 || ^6.0.0", - "date-fns": "^2.25.0 || ^3.2.0", + "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0", "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0", "dayjs": "^1.10.7", "luxon": "^3.0.2", @@ -96,7 +96,7 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.12", + "@mui/internal-test-utils": "^1.0.14", "@mui/material": "^5.16.7", "@mui/system": "^5.16.7", "@types/luxon": "^3.4.2", @@ -106,7 +106,7 @@ "dayjs": "^1.11.11", "luxon": "^3.5.0", "moment": "^2.30.1", - "rimraf": "^5.0.10" + "rimraf": "^6.0.1" }, "engines": { "node": ">=14.0.0" diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 4a9a3e621999..77cb9ab3eddf 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -58,7 +58,7 @@ "@emotion/styled": "^11.8.1", "@mui/material": "^5.15.14 || ^6.0.0", "@mui/system": "^5.15.14 || ^6.0.0", - "date-fns": "^2.25.0 || ^3.2.0", + "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0", "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0", "dayjs": "^1.10.7", "luxon": "^3.0.2", @@ -98,7 +98,7 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.12", + "@mui/internal-test-utils": "^1.0.14", "@mui/material": "^5.16.7", "@mui/system": "^5.16.7", "@types/luxon": "^3.4.2", @@ -113,7 +113,7 @@ "moment-hijri": "^2.30.0", "moment-jalaali": "^0.10.1", "moment-timezone": "^0.5.45", - "rimraf": "^5.0.10" + "rimraf": "^6.0.1" }, "engines": { "node": ">=14.0.0" diff --git a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts index 414637955b35..10cbe15fe7cf 100644 --- a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts +++ b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts @@ -90,7 +90,7 @@ export class AdapterDateFns if (typeof addDays !== 'function') { throw new Error( [ - 'MUI: The `date-fns` package v3.x is not compatible with this adapter.', + 'MUI: This adapter is only compatible with `date-fns` v2.x package versions.', 'Please, install v2.x of the package or use the `AdapterDateFnsV3` instead.', ].join('\n'), ); diff --git a/packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts b/packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts index 9c5332b9e1fe..910823d8a55e 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts +++ b/packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts @@ -93,7 +93,7 @@ export class AdapterDateFns throw new Error( [ `MUI: The \`date-fns\` package v2.x is not compatible with this adapter.`, - 'Please, install v3.x of the package or use the `AdapterDateFns` instead.', + 'Please, install v3.x or v4.x of the package or use the `AdapterDateFns` instead.', ].join('\n'), ); } diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx index c876f0f55669..e84c7ff71c6f 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx @@ -142,6 +142,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar setFocusedView('year', isViewFocused)} + yearsOrder={yearsOrder} yearsPerRow={yearsPerRow} referenceDate={referenceDate} /> @@ -623,6 +625,12 @@ DateCalendar.propTypes = { * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 3 diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx index 1b59fdbaa343..8c7b965df916 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx @@ -373,6 +373,12 @@ DatePicker.propTypes = { * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 4 on desktop, 3 on mobile diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts index 1336df730d27..be4f6c1fbfca 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts @@ -31,11 +31,6 @@ export interface DatePickerProps< * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm") */ desktopModeMediaQuery?: string; - /** - * Years rendered per row. - * @default 4 on desktop, 3 on mobile - */ - yearsPerRow?: 3 | 4; /** * Overridable component slots. * @default {} @@ -46,4 +41,9 @@ export interface DatePickerProps< * @default {} */ slotProps?: DatePickerSlotProps; + /** + * Years rendered per row. + * @default 4 on desktop, 3 on mobile + */ + yearsPerRow?: 3 | 4; } diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx index beed0975c5ca..4a15379e9e78 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx @@ -446,6 +446,12 @@ DateTimePicker.propTypes = { views: PropTypes.arrayOf( PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired, ), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 4 on desktop, 3 on mobile diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts index 1c7b8b751903..8053bc8c5c63 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts @@ -10,6 +10,7 @@ import { MobileDateTimePickerSlotProps, } from '../MobileDateTimePicker'; import { PickerValidDate } from '../models'; +import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; export interface DateTimePickerSlots extends DesktopDateTimePickerSlots, @@ -29,6 +30,7 @@ export interface DateTimePickerProps< TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false, > extends DesktopDateTimePickerProps, + ExportedYearCalendarProps, Omit< MobileDateTimePickerProps< TDate, @@ -43,11 +45,6 @@ export interface DateTimePickerProps< * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm") */ desktopModeMediaQuery?: string; - /** - * Years rendered per row. - * @default 4 on desktop, 3 on mobile - */ - yearsPerRow?: 3 | 4; /** * Overridable component slots. * @default {} @@ -58,4 +55,9 @@ export interface DateTimePickerProps< * @default {} */ slotProps?: DateTimePickerSlotProps; + /** + * Years rendered per row. + * @default 4 on desktop, 3 on mobile + */ + yearsPerRow?: 3 | 4; } diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index 5410f886c89b..6fede2f69466 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -422,6 +422,12 @@ DesktopDatePicker.propTypes = { * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 4 diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts index 613158d9145b..340faa3f81cd 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts @@ -10,6 +10,7 @@ import { } from '../DatePicker/shared'; import { MakeOptional } from '../internals/models/helpers'; import { DateView, PickerValidDate } from '../models'; +import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; export interface DesktopDatePickerSlots extends BaseDatePickerSlots, @@ -25,12 +26,8 @@ export interface DesktopDatePickerProps< TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false, > extends BaseDatePickerProps, - DesktopOnlyPickerProps { - /** - * Years rendered per row. - * @default 4 - */ - yearsPerRow?: 3 | 4; + DesktopOnlyPickerProps, + ExportedYearCalendarProps { /** * Overridable component slots. * @default {} @@ -41,4 +38,9 @@ export interface DesktopDatePickerProps< * @default {} */ slotProps?: DesktopDatePickerSlotProps; + /** + * Years rendered per row. + * @default 4 + */ + yearsPerRow?: 3 | 4; } diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx index 5d90362ce078..fe9e436f6926 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx @@ -264,7 +264,7 @@ describe('', () => { }); describe('Month navigation', () => { - it('should not allow to navigate to previous month if props.minDate is after the last date of the previous month', () => { + it('should not allow to navigate to previous month if props.minDate is after the last day of the previous month', () => { render( ', () => { expect(screen.getByLabelText('Previous month')).to.have.attribute('disabled'); }); - it('should allow to navigate to previous month if props.minDate is the last date of the previous month', () => { + it('should allow to navigate to previous month if props.minDate is the last day of the previous month', () => { render( ', () => { expect(screen.getByLabelText('Previous month')).not.to.have.attribute('disabled'); }); - it('should not allow to navigate to next month if props.maxDate is before the last date of the next month', () => { + it('should not allow to navigate to next month if props.maxDate is before the first day of the next month', () => { render( ', () => { expect(screen.getByLabelText('Next month')).to.have.attribute('disabled'); }); - it('should allow to navigate to next month if props.maxDate is the first date of the next month', () => { + it('should allow to navigate to next month if props.maxDate is the first day of the next month', () => { render( , ); diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index d5907a41b083..421f595a40b8 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -631,6 +631,12 @@ DesktopDateTimePicker.propTypes = { views: PropTypes.arrayOf( PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired, ), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 4 diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts index 1351c1439e33..2f64b71e5a0a 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts @@ -17,6 +17,7 @@ import { MultiSectionDigitalClockSlotProps, } from '../MultiSectionDigitalClock'; import { DigitalClockSlots, DigitalClockSlotProps } from '../DigitalClock'; +import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; export interface DesktopDateTimePickerSlots extends BaseDateTimePickerSlots, @@ -44,16 +45,8 @@ export interface DesktopDateTimePickerProps< TEnableAccessibleFieldDOMStructure extends boolean = false, > extends BaseDateTimePickerProps, DesktopOnlyPickerProps, - DesktopOnlyTimePickerProps { - /** - * Available views. - */ - views?: readonly DateOrTimeView[]; - /** - * Years rendered per row. - * @default 4 - */ - yearsPerRow?: 3 | 4; + DesktopOnlyTimePickerProps, + ExportedYearCalendarProps { /** * Overridable component slots. * @default {} @@ -64,4 +57,13 @@ export interface DesktopDateTimePickerProps< * @default {} */ slotProps?: DesktopDateTimePickerSlotProps; + /** + * Available views. + */ + views?: readonly DateOrTimeView[]; + /** + * Years rendered per row. + * @default 4 + */ + yearsPerRow?: 3 | 4; } diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index 8a8aeefb380e..31d270574cb2 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx @@ -419,6 +419,12 @@ MobileDatePicker.propTypes = { * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 3 diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts index b7b12ed698a6..b406fea447c3 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts @@ -36,4 +36,9 @@ export interface MobileDatePickerProps< * @default {} */ slotProps?: MobileDatePickerSlotProps; + /** + * Years rendered per row. + * @default 3 + */ + yearsPerRow?: 3 | 4; } diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index 1bf3bbb56e20..ec10a6296202 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -485,6 +485,12 @@ MobileDateTimePicker.propTypes = { views: PropTypes.arrayOf( PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired, ), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 3 diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts index 3ad5d2f0cb95..f6e79866d913 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts @@ -9,7 +9,7 @@ import { SlotComponentPropsFromProps } from '../internals/models/helpers'; export interface MonthCalendarSlots { /** - * Button displayed to render a single month in the "month" view. + * Button displayed to render a single month in the `month` view. * @default MonthCalendarButton */ monthButton?: React.ElementType; diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts index 87c37e46afa0..8b1147682bbd 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts @@ -20,7 +20,7 @@ export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots { */ switchViewButton?: React.ElementType; /** - * Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is "year". + * Icon displayed in the SwitchViewButton. Rotated by 180Ā° when the open view is `year`. * @default ArrowDropDown */ switchViewIcon?: React.ElementType; diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx index 74970bf88409..b86bc2fa3f91 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx @@ -315,9 +315,15 @@ StaticDatePicker.propTypes = { * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. - * @default 3 + * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise. */ yearsPerRow: PropTypes.oneOf([3, 4]), } as any; diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts index 64a84459d9b4..c27d894c5480 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts @@ -32,4 +32,9 @@ export interface StaticDatePickerProps * @default {} */ slotProps?: StaticDatePickerSlotProps; + /** + * Years rendered per row. + * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise. + */ + yearsPerRow?: 3 | 4; } diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx index 9b0b5f383f00..f132c14609a7 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx @@ -380,9 +380,15 @@ StaticDateTimePicker.propTypes = { views: PropTypes.arrayOf( PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired, ), + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. - * @default 3 + * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise. */ yearsPerRow: PropTypes.oneOf([3, 4]), } as any; diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts index e154e31b8098..2810584571d6 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts @@ -32,4 +32,9 @@ export interface StaticDateTimePickerProps * @default {} */ slotProps?: StaticDateTimePickerSlotProps; + /** + * Years rendered per row. + * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise. + */ + yearsPerRow?: 3 | 4; } diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx index 3e83737057c2..0091036bcef3 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx @@ -112,6 +112,7 @@ export const YearCalendar = React.forwardRef(function YearCalendar { switch (event.key) { case 'ArrowUp': - focusYear(year - yearsPerRow); + focusYear(year - verticalDirection); event.preventDefault(); break; case 'ArrowDown': - focusYear(year + yearsPerRow); + focusYear(year + verticalDirection); event.preventDefault(); break; case 'ArrowLeft': - focusYear(year + (isRtl ? 1 : -1)); + focusYear(year - horizontalDirection); event.preventDefault(); break; case 'ArrowRight': - focusYear(year + (isRtl ? -1 : 1)); + focusYear(year + horizontalDirection); event.preventDefault(); break; default: @@ -285,6 +289,11 @@ export const YearCalendar = React.forwardRef(function YearCalendar - {utils.getYearRange([minDate, maxDate]).map((year) => { + {yearRange.map((year) => { const yearNumber = utils.getYear(year); const isSelected = yearNumber === selectedYear; const isDisabled = disabled || isYearDisabled(year); @@ -426,6 +435,12 @@ YearCalendar.propTypes = { * Used when the component is controlled. */ value: PropTypes.object, + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder: PropTypes.oneOf(['asc', 'desc']), /** * Years rendered per row. * @default 3 diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts index f78d88255b6d..8a3d3a94d946 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts @@ -9,7 +9,7 @@ import { SlotComponentPropsFromProps } from '../internals/models/helpers'; export interface YearCalendarSlots { /** - * Button displayed to render a single year in the "year" view. + * Button displayed to render a single year in the `year` view. * @default YearCalendarButton */ yearButton?: React.ElementType; @@ -24,6 +24,12 @@ export interface YearCalendarSlotProps { } export interface ExportedYearCalendarProps { + /** + * Years are displayed in ascending (chronological) order by default. + * If `desc`, years are displayed in descending order. + * @default 'asc' + */ + yearsOrder?: 'asc' | 'desc'; /** * Years rendered per row. * @default 3 diff --git a/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx b/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx index d009aca7e962..fc22b7a902db 100644 --- a/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx +++ b/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx @@ -49,6 +49,31 @@ describe('', () => { expect(onChangeMock.callCount).to.equal(0); }); + it('should display years in ascending (chronological order) by default', () => { + render( + , + ); + + const yearButttons = screen.queryAllByMuiTest('year'); + expect(yearButttons[0].children.item(0)?.textContent).to.equal('2020'); + }); + + it('should display years in descending (reverse chronological) order when props.yearsOrder = "desc"', () => { + render( + , + ); + + const yearButtons = screen.queryAllByMuiTest('year'); + expect(yearButtons[0].children.item(0)?.textContent).to.equal('2024'); + }); + describe('Disabled', () => { it('should disable all years if props.disabled = true', () => { const onChange = spy(); diff --git a/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx b/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx index fa043429c599..30d7376df088 100644 --- a/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx +++ b/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx @@ -40,6 +40,7 @@ export const renderDateViewCalendar = ({ onMonthChange, monthsPerRow, onYearChange, + yearsOrder, yearsPerRow, slots, slotProps, @@ -79,6 +80,7 @@ export const renderDateViewCalendar = ({ onMonthChange={onMonthChange} monthsPerRow={monthsPerRow} onYearChange={onYearChange} + yearsOrder={yearsOrder} yearsPerRow={yearsPerRow} slots={slots} slotProps={slotProps} diff --git a/packages/x-internals/package.json b/packages/x-internals/package.json index 3a4d212c7b44..57a4d1d0fb46 100644 --- a/packages/x-internals/package.json +++ b/packages/x-internals/package.json @@ -48,8 +48,8 @@ "react": "^17.0.0 || ^18.0.0" }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.12", - "rimraf": "^5.0.10" + "@mui/internal-test-utils": "^1.0.14", + "rimraf": "^6.0.1" }, "engines": { "node": ">=14.0.0" diff --git a/packages/x-license/package.json b/packages/x-license/package.json index 797ed24e7527..ce1571a0be19 100644 --- a/packages/x-license/package.json +++ b/packages/x-license/package.json @@ -41,8 +41,8 @@ "react": "^17.0.0 || ^18.0.0" }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.12", - "rimraf": "^5.0.10" + "@mui/internal-test-utils": "^1.0.14", + "rimraf": "^6.0.1" }, "engines": { "node": ">=14.0.0" diff --git a/packages/x-license/src/generateLicense/generateLicense.ts b/packages/x-license/src/generateLicense/generateLicense.ts index dc2b64d5bd83..dc3e0896c56c 100644 --- a/packages/x-license/src/generateLicense/generateLicense.ts +++ b/packages/x-license/src/generateLicense/generateLicense.ts @@ -6,31 +6,14 @@ import { LICENSE_MODELS, LicenseModel } from '../utils/licenseModel'; const licenseVersion = '2'; export interface LicenseDetails { - orderNumber: string; expiryDate: Date; - /** - * @deprecated Use planScope instead. - */ - scope?: PlanScope; - planScope?: PlanScope; - /** - * @deprecated Use licenseModel instead. - */ - licensingModel?: LicenseModel; // TODO deprecate licenseModel?: LicenseModel; + orderNumber: string; + planScope?: PlanScope; planVersion: PlanVersion; } function getClearLicenseString(details: LicenseDetails) { - // TODO remove - if (details.licensingModel) { - details.licenseModel = details.licensingModel; - } - // TODO remove - if (details.scope) { - details.planScope = details.scope; - } - if (details.planScope && !PLAN_SCOPES.includes(details.planScope)) { throw new Error('MUI X: Invalid scope'); } diff --git a/packages/x-license/src/utils/licenseModel.ts b/packages/x-license/src/utils/licenseModel.ts index c9d7ebe170f8..1eff21831f57 100644 --- a/packages/x-license/src/utils/licenseModel.ts +++ b/packages/x-license/src/utils/licenseModel.ts @@ -10,7 +10,9 @@ export const LICENSE_MODELS = [ */ 'annual', /** - * TODO 2026 remove, legacy name of annual. + * Legacy. The previous name for 'annual'. + * Can be removed once old license keys generated with 'subscription' are no longer supported. + * To support for a while. We need more years of backward support and we sell multi year licenses. */ 'subscription', ] as const; diff --git a/packages/x-tree-view-pro/package.json b/packages/x-tree-view-pro/package.json index 038c43acf697..cfd83e8cc36c 100644 --- a/packages/x-tree-view-pro/package.json +++ b/packages/x-tree-view-pro/package.json @@ -70,11 +70,11 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.12", + "@mui/internal-test-utils": "^1.0.14", "@mui/material": "^5.16.7", "@mui/system": "^5.16.7", "@types/prop-types": "^15.7.12", - "rimraf": "^5.0.10" + "rimraf": "^6.0.1" }, "engines": { "node": ">=14.0.0" diff --git a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx index 6259d7d4c427..0cb18fa82006 100644 --- a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx +++ b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json index 346ca81fd0aa..d820a96c1e8e 100644 --- a/packages/x-tree-view/package.json +++ b/packages/x-tree-view/package.json @@ -68,11 +68,11 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.12", + "@mui/internal-test-utils": "^1.0.14", "@mui/material": "^5.16.7", "@mui/system": "^5.16.7", "@types/prop-types": "^15.7.12", - "rimraf": "^5.0.10" + "rimraf": "^6.0.1" }, "engines": { "node": ">=14.0.0" diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx index ecc2ba95a2ff..755b5f821361 100644 --- a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx +++ b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx index 1556d2df9941..adfe2d35415b 100644 --- a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx +++ b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx index 6831bcee8055..3f27e6ccfae2 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.tsx @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; diff --git a/packages/x-tree-view/src/TreeItem/useTreeItemState.ts b/packages/x-tree-view/src/TreeItem/useTreeItemState.ts index a236983664ee..f28549c2603c 100644 --- a/packages/x-tree-view/src/TreeItem/useTreeItemState.ts +++ b/packages/x-tree-view/src/TreeItem/useTreeItemState.ts @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import { MuiCancellableEvent } from '../internals/models/MuiCancellableEvent'; import { useTreeViewContext } from '../internals/TreeViewProvider'; diff --git a/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx b/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx index 1b3676f173b3..86a398dee5d4 100644 --- a/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx +++ b/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; diff --git a/packages/x-tree-view/src/TreeView/TreeView.tsx b/packages/x-tree-view/src/TreeView/TreeView.tsx index ad40046fb705..73c38055ee9a 100644 --- a/packages/x-tree-view/src/TreeView/TreeView.tsx +++ b/packages/x-tree-view/src/TreeView/TreeView.tsx @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; diff --git a/packages/x-tree-view/src/hooks/useTreeViewApiRef.tsx b/packages/x-tree-view/src/hooks/useTreeViewApiRef.tsx index 6a62287d93a4..f36ed0c4eacd 100644 --- a/packages/x-tree-view/src/hooks/useTreeViewApiRef.tsx +++ b/packages/x-tree-view/src/hooks/useTreeViewApiRef.tsx @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from '../internals/models'; import { RichTreeViewPluginSignatures } from '../RichTreeView/RichTreeView.plugins'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cebe5c234a04..aa891732623f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -27,8 +27,8 @@ importers: specifier: ^6.0.0 version: 6.0.0 '@argos-ci/core': - specifier: ^2.8.0 - version: 2.8.0 + specifier: ^2.8.1 + version: 2.8.1 '@babel/cli': specifier: ^7.25.6 version: 7.25.6(@babel/core@7.25.2) @@ -87,26 +87,26 @@ importers: specifier: ^5.16.7 version: 5.16.7(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.4)(react@18.3.1) '@mui/internal-babel-plugin-resolve-imports': - specifier: 1.0.17 - version: 1.0.17(@babel/core@7.25.2) + specifier: 1.0.18 + version: 1.0.18(@babel/core@7.25.2) '@mui/internal-markdown': - specifier: ^1.0.12 - version: 1.0.12 + specifier: ^1.0.14 + version: 1.0.14 '@mui/internal-test-utils': - specifier: ^1.0.12 - version: 1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.14 + version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.7 version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/monorepo': - specifier: github:mui/material-ui#dd2faca9c6192b79510948cecd3bce2380f27d64 - version: https://codeload.github.com/mui/material-ui/tar.gz/dd2faca9c6192b79510948cecd3bce2380f27d64(encoding@0.1.13) + specifier: github:mui/material-ui#263c7259451d5b928bbdfd299c9c0afc89dfec02 + version: https://codeload.github.com/mui/material-ui/tar.gz/263c7259451d5b928bbdfd299c9c0afc89dfec02(encoding@0.1.13) '@mui/utils': specifier: ^5.16.6 version: 5.16.6(@types/react@18.3.4)(react@18.3.1) '@next/eslint-plugin-next': - specifier: 14.2.9 - version: 14.2.9 + specifier: 14.2.12 + version: 14.2.12 '@octokit/plugin-retry': specifier: ^7.1.1 version: 7.1.1(@octokit/core@4.2.4(encoding@0.1.13)) @@ -138,8 +138,8 @@ importers: specifier: ^4.17.7 version: 4.17.7 '@types/mocha': - specifier: ^10.0.7 - version: 10.0.7 + specifier: ^10.0.8 + version: 10.0.8 '@types/node': specifier: ^20.16.5 version: 20.16.5 @@ -169,7 +169,7 @@ importers: version: 7.18.0(eslint@8.57.0)(typescript@5.5.4) autoprefixer: specifier: ^10.4.20 - version: 10.4.20(postcss@8.4.45) + version: 10.4.20(postcss@8.4.47) axe-core: specifier: 4.10.0 version: 4.10.0 @@ -207,8 +207,8 @@ importers: specifier: ^11.1.0 version: 11.1.0(webpack@5.94.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))) concurrently: - specifier: ^9.0.0 - version: 9.0.0 + specifier: ^9.0.1 + version: 9.0.1 cpy-cli: specifier: ^5.0.0 version: 5.0.0 @@ -221,15 +221,15 @@ importers: date-fns-jalali-v3: specifier: npm:date-fns-jalali@3.6.0-1 version: date-fns-jalali@3.6.0-1 - date-fns-v3: - specifier: npm:date-fns@3.6.0 - version: date-fns@3.6.0 + date-fns-v4: + specifier: npm:date-fns@4.1.0 + version: date-fns@4.1.0 eslint: specifier: ^8.57.0 version: 8.57.0 eslint-config-airbnb: specifier: ^19.0.4 - version: 19.0.4(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.0(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.35.2(eslint@8.57.0))(eslint@8.57.0) + version: 19.0.4(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.0(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.36.1(eslint@8.57.0))(eslint@8.57.0) eslint-config-airbnb-typescript: specifier: ^18.0.0 version: 18.0.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.0))(eslint@8.57.0) @@ -246,8 +246,8 @@ importers: specifier: ^2.30.0 version: 2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.0) eslint-plugin-jsdoc: - specifier: ^50.2.2 - version: 50.2.2(eslint@8.57.0) + specifier: ^50.2.4 + version: 50.2.4(eslint@8.57.0) eslint-plugin-jsx-a11y: specifier: ^6.10.0 version: 6.10.0(eslint@8.57.0) @@ -261,8 +261,8 @@ importers: specifier: ^5.2.1 version: 5.2.1(@types/eslint@8.56.12)(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.3.3) eslint-plugin-react: - specifier: ^7.35.2 - version: 7.35.2(eslint@8.57.0) + specifier: ^7.36.1 + version: 7.36.1(eslint@8.57.0) eslint-plugin-react-compiler: specifier: 0.0.0-experimental-9ed098e-20240725 version: 0.0.0-experimental-9ed098e-20240725(eslint@8.57.0) @@ -360,14 +360,14 @@ importers: specifier: ^15.0.1 version: 15.0.1 rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 serve: specifier: ^14.2.3 version: 14.2.3 sinon: - specifier: ^18.0.0 - version: 18.0.0 + specifier: ^18.0.1 + version: 18.0.1 stream-browserify: specifier: ^3.0.0 version: 3.0.0 @@ -378,8 +378,8 @@ importers: specifier: ^5.3.10 version: 5.3.10(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack@5.94.0(@swc/core@1.6.13(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))) tsx: - specifier: ^4.19.0 - version: 4.19.0 + specifier: ^4.19.1 + version: 4.19.1 typescript: specifier: ^5.5.4 version: 5.5.4 @@ -429,8 +429,8 @@ importers: specifier: ^11.13.0 version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1) '@mui/docs': - specifier: 6.0.2 - version: 6.0.2(zo3bb3ve5osnt35xnwoljbbxum) + specifier: 6.1.1 + version: 6.1.1(nkdvdhvjmzb2hjjn6o66idlzh4) '@mui/icons-material': specifier: ^5.16.7 version: 5.16.7(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.4)(react@18.3.1) @@ -445,7 +445,7 @@ importers: version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material-nextjs': specifier: ^5.16.6 - version: 5.16.6(@emotion/cache@11.13.1)(@emotion/server@11.11.0)(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.4)(next@14.2.9(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 5.16.6(@emotion/cache@11.13.1)(@emotion/server@11.11.0)(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.4)(next@14.2.12(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@mui/styles': specifier: ^5.16.7 version: 5.16.7(@types/react@18.3.4)(react@18.3.1) @@ -486,14 +486,14 @@ importers: specifier: ^9.7.4 version: 9.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@tanstack/query-core': - specifier: ^5.55.4 - version: 5.55.4 + specifier: ^5.56.2 + version: 5.56.2 ast-types: specifier: ^0.14.2 version: 0.14.2 autoprefixer: specifier: ^10.4.20 - version: 10.4.20(postcss@8.4.45) + version: 10.4.20(postcss@8.4.47) babel-plugin-module-resolver: specifier: ^5.0.2 version: 5.0.2 @@ -576,14 +576,14 @@ importers: specifier: ^0.5.45 version: 0.5.45 next: - specifier: ^14.2.9 - version: 14.2.9(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^14.2.12 + version: 14.2.12(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) nprogress: specifier: ^0.2.0 version: 0.2.0 postcss: - specifier: ^8.4.45 - version: 8.4.45 + specifier: ^8.4.47 + version: 8.4.47 prismjs: specifier: ^1.29.0 version: 1.29.0 @@ -606,11 +606,11 @@ importers: specifier: ^18.3.1 version: 18.3.1 react-router: - specifier: ^6.26.1 - version: 6.26.1(react@18.3.1) + specifier: ^6.26.2 + version: 6.26.2(react@18.3.1) react-router-dom: - specifier: ^6.26.1 - version: 6.26.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^6.26.2 + version: 6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-runner: specifier: ^1.0.5 version: 1.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -621,8 +621,8 @@ importers: specifier: ^0.23.9 version: 0.23.9 rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 rxjs: specifier: ^7.8.1 version: 7.8.1 @@ -646,11 +646,11 @@ importers: specifier: ^7.24.7 version: 7.24.7(@babel/core@7.25.2) '@mui/internal-docs-utils': - specifier: ^1.0.12 - version: 1.0.12 + specifier: ^1.0.13 + version: 1.0.13 '@mui/internal-scripts': - specifier: ^1.0.19 - version: 1.0.19 + specifier: ^1.0.21 + version: 1.0.21 '@types/chance': specifier: ^1.1.6 version: 1.1.6 @@ -722,8 +722,8 @@ importers: version: 17.7.2 devDependencies: '@types/mocha': - specifier: ^10.0.7 - version: 10.0.7 + specifier: ^10.0.8 + version: 10.0.8 '@types/node': specifier: ^20.16.5 version: 20.16.5 @@ -768,8 +768,8 @@ importers: version: 18.3.1(react@18.3.1) devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.12 - version: 1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.14 + version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.7 version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -789,8 +789,8 @@ importers: specifier: ^3.1.3 version: 3.1.3 rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 publishDirectory: build packages/x-charts-pro: @@ -857,8 +857,8 @@ importers: specifier: ^3.1.3 version: 3.1.3 rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 publishDirectory: build packages/x-charts-vendor: @@ -943,8 +943,8 @@ importers: specifier: ^2.0.3 version: 2.0.3 rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 packages/x-codemod: dependencies: @@ -974,8 +974,8 @@ importers: specifier: ^0.5.45 version: 0.5.45 rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 publishDirectory: build packages/x-data-grid: @@ -1012,8 +1012,8 @@ importers: version: 5.1.1 devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.12 - version: 1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.14 + version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/joy': specifier: ^5.0.0-beta.48 version: 5.0.0-beta.48(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1030,8 +1030,8 @@ importers: specifier: ^15.7.12 version: 15.7.12 rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 publishDirectory: build packages/x-data-grid-generator: @@ -1071,8 +1071,8 @@ importers: specifier: ^1.1.6 version: 1.1.6 rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 publishDirectory: build packages/x-data-grid-premium: @@ -1124,8 +1124,8 @@ importers: version: 5.1.1 devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.12 - version: 1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.14 + version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.7 version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1139,8 +1139,8 @@ importers: specifier: ^2.30.0 version: 2.30.0 rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 publishDirectory: build packages/x-data-grid-pro: @@ -1186,8 +1186,8 @@ importers: version: 5.1.1 devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.12 - version: 1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.14 + version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.7 version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1198,8 +1198,8 @@ importers: specifier: ^15.7.12 version: 15.7.12 rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 publishDirectory: build packages/x-date-pickers: @@ -1239,8 +1239,8 @@ importers: version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.12 - version: 1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.14 + version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.7 version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1284,8 +1284,8 @@ importers: specifier: ^0.5.45 version: 0.5.45 rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 publishDirectory: build packages/x-date-pickers-pro: @@ -1334,8 +1334,8 @@ importers: version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.12 - version: 1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.14 + version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.7 version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1364,8 +1364,8 @@ importers: specifier: ^2.30.1 version: 2.30.1 rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 publishDirectory: build packages/x-internals: @@ -1381,11 +1381,11 @@ importers: version: 18.3.1 devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.12 - version: 1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.14 + version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 publishDirectory: build packages/x-license: @@ -1401,11 +1401,11 @@ importers: version: 18.3.1 devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.12 - version: 1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.14 + version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 publishDirectory: build packages/x-tree-view: @@ -1445,8 +1445,8 @@ importers: version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.12 - version: 1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.14 + version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.7 version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1457,8 +1457,8 @@ importers: specifier: ^15.7.12 version: 15.7.12 rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 publishDirectory: build packages/x-tree-view-pro: @@ -1504,8 +1504,8 @@ importers: version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.12 - version: 1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.14 + version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.7 version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1516,8 +1516,8 @@ importers: specifier: ^15.7.12 version: 15.7.12 rimraf: - specifier: ^5.0.10 - version: 5.0.10 + specifier: ^6.0.1 + version: 6.0.1 publishDirectory: build test: @@ -1604,8 +1604,8 @@ importers: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) react-router-dom: - specifier: ^6.26.1 - version: 6.26.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^6.26.2 + version: 6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) semver: specifier: ^7.6.3 version: 7.6.3 @@ -1749,8 +1749,8 @@ packages: resolution: {integrity: sha512-syJJmvLtJKQYXDmGYRb+ZKpzpSk/dReqhZZm2tnWn7ThxHaJRJ7Wu3J5nqDpCP3LxoYCVfvV/dmfoJO0v8+PbQ==} engines: {node: '>=18.0.0'} - '@argos-ci/core@2.8.0': - resolution: {integrity: sha512-n7WUnlK+QI9L/bbPrg88xrxojGdEe//+RIJKx1iIUEqgIMp5K8f9ANcpYGSS/d9BWASg7eFoXm5d6iRCz0Mrgw==} + '@argos-ci/core@2.8.1': + resolution: {integrity: sha512-5ygruMnfQ3OY6LvywnwTycZFg6oTG5UYvPCVdwQiOh+8FgUZUyJge7QBVfeWW+qC0UXFMo+f3eTQ5YFvTwc0ZA==} engines: {node: '>=18.0.0'} '@argos-ci/util@2.1.1': @@ -2032,8 +2032,8 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-syntax-typescript@7.24.7': - resolution: {integrity: sha512-c/+fVeJBB0FeKsFvwytYiUD+LBvhHjGSI0g446PRGdSVGZLRNArBUno2PETbAly3tpiNAQR5XaZ+JslxkotsbA==} + '@babel/plugin-syntax-typescript@7.25.4': + resolution: {integrity: sha512-uMOCoHVU52BsSWxPOMVv5qKRdeSlPuImUCB2dlPuBSU+W2/ROE7/Zg8F2Kepbk+8yBa68LlRKxO+xgEVWorsDg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 @@ -3095,8 +3095,8 @@ packages: '@mui/core-downloads-tracker@5.16.7': resolution: {integrity: sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==} - '@mui/docs@6.0.2': - resolution: {integrity: sha512-2iEOJbelGf+44CeRT1u7GuCui925Ot6nFIEDJEzcrvJFqw9+AMvzexjWe/emGQAGFAcjU1/4wZVUNKnW8SY8PQ==} + '@mui/docs@6.1.1': + resolution: {integrity: sha512-mAH2fOorLcVPgulw/oK2zf/G0JvgYX11qOL7GxliK3bSt4R62c+ZLRsirx7SGz2OLV9sIbpNswh0bP4XrdhHew==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/base': '*' @@ -3123,22 +3123,22 @@ packages: '@types/react': optional: true - '@mui/internal-babel-plugin-resolve-imports@1.0.17': - resolution: {integrity: sha512-HwPNM9sVKwos4njiVIG40kOUtA47xAuVGyn2wdjCW2Tkj/YJPo5Nck3kh69uqwvN4nu1ntSW15iMVIpQG5vp3A==} + '@mui/internal-babel-plugin-resolve-imports@1.0.18': + resolution: {integrity: sha512-S3jKD/tsHU0q2tHy/rrWfr/0QGFZ22mb34/NrEQviHCOZW1syGxSHpnuj6S3o9uCT20r69S98MPworq6kGCiFw==} peerDependencies: '@babel/core': '7' - '@mui/internal-docs-utils@1.0.12': - resolution: {integrity: sha512-U5nkY88gi+a2MR6S2wXULPr7wscXFlLAatX2kn4S2bGGi/tLndSgmmzsvUKWMG/2bSnJ50F1frHnhgPkFM4znA==} + '@mui/internal-docs-utils@1.0.13': + resolution: {integrity: sha512-q+EVFiJGqAbNtYQrRqRiE6EEtVyIgEPfM0QpMJ5ws/QY8wZterExWHLbtBP5eX60fIXqaVccfMBro8RPaeuvDQ==} - '@mui/internal-markdown@1.0.12': - resolution: {integrity: sha512-nr7j8PR+Gi0IL/ygf6/Qczb+/96drEVTOKPSRE7xTQaAWVefsCUDagN5UXaiW89iVAMLCGqup8Pzvxe5mE9Erw==} + '@mui/internal-markdown@1.0.14': + resolution: {integrity: sha512-Df8Uo54TyE7Lm3otWWxw2OQzv3ztbdhRJMJ2sCYrTDqluAvGe/65KpVr95/AcY/An3qWpvBrbn5k5Oj/NG/lXw==} - '@mui/internal-scripts@1.0.19': - resolution: {integrity: sha512-NFyNxOIfrUtn3744rqk4UmkgGfbG7rntHxSFEXGAEy4yQRoEIIbOfHQURKJSupDKyCc48vSFMk+eGbiMBEYpKg==} + '@mui/internal-scripts@1.0.21': + resolution: {integrity: sha512-nVjt+Yjjff83C+urxDD63LmUhIR1bMbGVexHdFq1v9odyVKXw3tgL1yiCoEETLUfOkBbXECmjuRcbw+meWu5+g==} - '@mui/internal-test-utils@1.0.12': - resolution: {integrity: sha512-D6qc9h2sK2owOMQ68j9yaChr0iNW5mqSrfVGbRJ7NHMeyovkqIMQLHCwvs05d+5cccAeqalvKVsNvK3BkMilEw==} + '@mui/internal-test-utils@1.0.14': + resolution: {integrity: sha512-yjaSlij39hzWZ643b9gTLLPur8JUF3lQDIs9fwDAgBERhyuhhfV7+6L7xpqAZ7hrkZ7Rr7YqbtiCtSgfgDRG5g==} peerDependencies: react: ^18.2.0 react-dom: ^18.2.0 @@ -3213,9 +3213,9 @@ packages: '@types/react': optional: true - '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/dd2faca9c6192b79510948cecd3bce2380f27d64': - resolution: {tarball: https://codeload.github.com/mui/material-ui/tar.gz/dd2faca9c6192b79510948cecd3bce2380f27d64} - version: 6.1.0 + '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/263c7259451d5b928bbdfd299c9c0afc89dfec02': + resolution: {tarball: https://codeload.github.com/mui/material-ui/tar.gz/263c7259451d5b928bbdfd299c9c0afc89dfec02} + version: 6.1.1 engines: {pnpm: 9.10.0} '@mui/private-theming@5.16.6': @@ -3297,62 +3297,62 @@ packages: resolution: {integrity: sha512-2KYkyluThg1AKfd0JWI7FzpS4A/fzVVGYIf6AM4ydWyNj8eI/86GQVLeRgDoH7CNOxt243R5tutWlmHpVq0/Ew==} engines: {node: '>=18.0.0'} - '@next/env@14.2.9': - resolution: {integrity: sha512-hnDAoDPMii31V0ivibI8p6b023jOF1XblWTVjsDUoZKwnZlaBtJFZKDwFqi22R8r9i6W08dThUWU7Bsh2Rg8Ww==} + '@next/env@14.2.12': + resolution: {integrity: sha512-3fP29GIetdwVIfIRyLKM7KrvJaqepv+6pVodEbx0P5CaMLYBtx+7eEg8JYO5L9sveJO87z9eCReceZLi0hxO1Q==} - '@next/eslint-plugin-next@14.2.9': - resolution: {integrity: sha512-tmLXuDNfPTqoFuSfsd9Q4R96SS/UCKTPtBnnR+cKDcbh8xZU+126vZnRWH1WEpOmS4Vl2Hy/X6SPmgOGZzn+hA==} + '@next/eslint-plugin-next@14.2.12': + resolution: {integrity: sha512-cPrKbXtK8NTThOOFNxRGGTw+5s02Ek8z8ri/hZqeKs6uP8LOTGqFyBy6hpCXt7TvLzzriWiiwRyD4h0XYmPEEg==} - '@next/swc-darwin-arm64@14.2.9': - resolution: {integrity: sha512-/kfQifl3uLYi3DlwFlzCkgxe6fprJNLzzTUFknq3M5wGYicDIbdGlxUl6oHpVLJpBB/CBY3Y//gO6alz/K4NWA==} + '@next/swc-darwin-arm64@14.2.12': + resolution: {integrity: sha512-crHJ9UoinXeFbHYNok6VZqjKnd8rTd7K3Z2zpyzF1ch7vVNKmhjv/V7EHxep3ILoN8JB9AdRn/EtVVyG9AkCXw==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] - '@next/swc-darwin-x64@14.2.9': - resolution: {integrity: sha512-tK/RyhCmOCiXQ9IVdFrBbZOf4/1+0RSuJkebXU2uMEsusS51TjIJO4l8ZmEijH9gZa0pJClvmApRHi7JuBqsRw==} + '@next/swc-darwin-x64@14.2.12': + resolution: {integrity: sha512-JbEaGbWq18BuNBO+lCtKfxl563Uw9oy2TodnN2ioX00u7V1uzrsSUcg3Ep9ce+P0Z9es+JmsvL2/rLphz+Frcw==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] - '@next/swc-linux-arm64-gnu@14.2.9': - resolution: {integrity: sha512-tS5eqwsp2nO7mzywRUuFYmefNZsUKM/mTG3exK2jIHv9TEVklE1SByB1KMhFkqlit1PxS9YK1tV8BOV90Wpbrw==} + '@next/swc-linux-arm64-gnu@14.2.12': + resolution: {integrity: sha512-qBy7OiXOqZrdp88QEl2H4fWalMGnSCrr1agT/AVDndlyw2YJQA89f3ttR/AkEIP9EkBXXeGl6cC72/EZT5r6rw==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-musl@14.2.9': - resolution: {integrity: sha512-8svpeTFNAMTUMKQbEzE8qRAwl9o7mNBv7LR1bmSkQvo1oy4WrNyZbhWsldOiKrc4mZ5dfQkGYsI9T75mIFMfeA==} + '@next/swc-linux-arm64-musl@14.2.12': + resolution: {integrity: sha512-EfD9L7o9biaQxjwP1uWXnk3vYZi64NVcKUN83hpVkKocB7ogJfyH2r7o1pPnMtir6gHZiGCeHKagJ0yrNSLNHw==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - '@next/swc-linux-x64-gnu@14.2.9': - resolution: {integrity: sha512-0HNulLWpKTB7H5BhHCkEhcRAnWUHeAYCftrrGw3QC18+ZywTdAoPv/zEqKy/0adqt+ks4JDdlgSQ1lNKOKjo0A==} + '@next/swc-linux-x64-gnu@14.2.12': + resolution: {integrity: sha512-iQ+n2pxklJew9IpE47hE/VgjmljlHqtcD5UhZVeHICTPbLyrgPehaKf2wLRNjYH75udroBNCgrSSVSVpAbNoYw==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - '@next/swc-linux-x64-musl@14.2.9': - resolution: {integrity: sha512-hhVFViPHLAVUJRNtwwm609p9ozWajOmRvzOZzzKXgiVGwx/CALxlMUeh+M+e0Zj6orENhWLZeilOPHpptuENsA==} + '@next/swc-linux-x64-musl@14.2.12': + resolution: {integrity: sha512-rFkUkNwcQ0ODn7cxvcVdpHlcOpYxMeyMfkJuzaT74xjAa5v4fxP4xDk5OoYmPi8QNLDs3UgZPMSBmpBuv9zKWA==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - '@next/swc-win32-arm64-msvc@14.2.9': - resolution: {integrity: sha512-p/v6XlOdrk06xfN9z4evLNBqftVQUWiyduQczCwSj7hNh8fWTbzdVxsEiNOcajMXJbQiaX/ZzZdFgKVmmJnnGQ==} + '@next/swc-win32-arm64-msvc@14.2.12': + resolution: {integrity: sha512-PQFYUvwtHs/u0K85SG4sAdDXYIPXpETf9mcEjWc0R4JmjgMKSDwIU/qfZdavtP6MPNiMjuKGXHCtyhR/M5zo8g==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] - '@next/swc-win32-ia32-msvc@14.2.9': - resolution: {integrity: sha512-IcW9dynWDjMK/0M05E3zopbRen7v0/yEaMZbHFOSS1J/w+8YG3jKywOGZWNp/eCUVtUUXs0PW+7Lpz8uLu+KQA==} + '@next/swc-win32-ia32-msvc@14.2.12': + resolution: {integrity: sha512-FAj2hMlcbeCV546eU2tEv41dcJb4NeqFlSXU/xL/0ehXywHnNpaYajOUvn3P8wru5WyQe6cTZ8fvckj/2XN4Vw==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] - '@next/swc-win32-x64-msvc@14.2.9': - resolution: {integrity: sha512-gcbpoXyWZdVOBgNa5BRzynrL5UR1nb2ZT38yKgnphYU9UHjeecnylMHntrQiMg/QtONDcJPFC/PmsS47xIRYoA==} + '@next/swc-win32-x64-msvc@14.2.12': + resolution: {integrity: sha512-yu8QvV53sBzoIVRHsxCHqeuS8jYq6Lrmdh0briivuh+Brsp6xjg80MAozUsBTAV9KNmY08KlX0KYTWz1lbPzEg==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -3749,8 +3749,8 @@ packages: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - '@remix-run/router@1.19.1': - resolution: {integrity: sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==} + '@remix-run/router@1.19.2': + resolution: {integrity: sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==} engines: {node: '>=14.0.0'} '@rollup/rollup-android-arm-eabi@4.18.1': @@ -3889,9 +3889,9 @@ packages: '@sinonjs/text-encoding@0.7.2': resolution: {integrity: sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==} - '@slack/bolt@3.21.2': - resolution: {integrity: sha512-Cft+5dbl+YApK2GVFX9O86k0qIqQXshnBGq9oK4a4rLfklyfw9TcydmOxEd32aR/2HbBwr7o/pwu5UAI2c/bUg==} - engines: {node: '>=12.13.0', npm: '>=6.12.0'} + '@slack/bolt@3.21.4': + resolution: {integrity: sha512-4PqOuHXcVt8KxjKiLdLIqZp8285zdiYLj7HrrKvVHnUNbkD0l16HZxtMfIEe07REQ+vmM1mrqCiZqe9dPAMucA==} + engines: {node: '>=14.21.3', npm: '>=6.14.18'} '@slack/logger@3.0.0': resolution: {integrity: sha512-DTuBFbqu4gGfajREEMrkq5jBhcnskinhr4+AnfJEk48zhVeEv3XnUKGIX98B74kxhYsIMfApGGySTn7V3b5yBA==} @@ -3998,8 +3998,8 @@ packages: '@swc/types@0.1.9': resolution: {integrity: sha512-qKnCno++jzcJ4lM4NTfYifm1EFSCeIfKiAHAfkENZAV5Kl9PjJIyd2yeeVv6c/2CckuLyv2NmRC5pv6pm2WQBg==} - '@tanstack/query-core@5.55.4': - resolution: {integrity: sha512-uoRqNnRfzOH4OMIoxj8E2+Us89UIGXfau981qYJWsNMkFS1GXR4UIyzUTVGq4N7SDLHgFPpo6IOazqUV5gkMZA==} + '@tanstack/query-core@5.56.2': + resolution: {integrity: sha512-gor0RI3/R5rVV3gXfddh1MM+hgl0Z4G7tj6Xxpq6p2I03NGPaJ8dITY9Gz05zYYb/EJq9vPas/T4wn9EaDPd4Q==} '@testing-library/dom@10.4.0': resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==} @@ -4192,8 +4192,8 @@ packages: '@types/minimist@1.2.5': resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==} - '@types/mocha@10.0.7': - resolution: {integrity: sha512-GN8yJ1mNTcFcah/wKEFIJckJx9iJLoMSzWcfRRuxz/Jk+U6KQNnml+etbtxFK8lPjzOw3zp4Ha/kjSst9fsHYw==} + '@types/mocha@10.0.8': + resolution: {integrity: sha512-HfMcUmy9hTMJh66VNcmeC9iVErIZJli2bszuXc6julh5YGuRb/W5OnkHjwLNYdFlMis0sY3If5SEAp+PktdJjw==} '@types/moment-hijri@2.1.4': resolution: {integrity: sha512-pGX1DaSducJDkJAC3q8fCuemow0pzI4oa0iKcspwQNPXuwlI55WRgBVrA6NVi+rf8bZN1qjWVsGdUatrLhZk6Q==} @@ -5272,8 +5272,8 @@ packages: resolution: {integrity: sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==} engines: {'0': node >= 6.0} - concurrently@9.0.0: - resolution: {integrity: sha512-iAxbsDeUkn8E/4+QalT7T3WvlyTfmsoez+19lbbcsxZdOEMfBukd8LA30KYez2UR5xkKFzbcqXIZy5RisCbaxw==} + concurrently@9.0.1: + resolution: {integrity: sha512-wYKvCd/f54sTXJMSfV6Ln/B8UrfLBKOYa+lzc6CHay3Qek+LorVSBdMVfyewFhRbH0Rbabsk4D+3PL/VjQ5gzg==} engines: {node: '>=18'} hasBin: true @@ -5537,8 +5537,8 @@ packages: resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==} engines: {node: '>=0.11'} - date-fns@3.6.0: - resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==} + date-fns@4.1.0: + resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==} date-format@4.0.14: resolution: {integrity: sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg==} @@ -5985,8 +5985,8 @@ packages: '@typescript-eslint/parser': optional: true - eslint-plugin-jsdoc@50.2.2: - resolution: {integrity: sha512-i0ZMWA199DG7sjxlzXn5AeYZxpRfMJjDPUl7lL9eJJX8TPRoIaxJU4ys/joP5faM5AXE1eqW/dslCj3uj4Nqpg==} + eslint-plugin-jsdoc@50.2.4: + resolution: {integrity: sha512-020jA+dXaXdb+TML3ZJBvpPmzwbNROjnYuTYi/g6A5QEmEjhptz4oPJDKkOGMIByNxsPpdTLzSU1HYVqebOX1w==} engines: {node: '>=18'} peerDependencies: eslint: ^7.0.0 || ^8.0.0 || ^9.0.0 @@ -6029,8 +6029,8 @@ packages: peerDependencies: eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 - eslint-plugin-react@7.35.2: - resolution: {integrity: sha512-Rbj2R9zwP2GYNcIak4xoAMV57hrBh3hTaR0k7hVjwCQgryE/pw5px4b13EYjduOI0hfXyZhwBxaGpOTbWSGzKQ==} + eslint-plugin-react@7.36.1: + resolution: {integrity: sha512-/qwbqNXZoq+VP30s1d4Nc1C5GTxjJQjk4Jzs4Wq2qzxFM7dSmuG2UkIjg2USMLh3A/aVcUNrK7v0J5U1XEGGwA==} engines: {node: '>=4'} peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7 @@ -6512,6 +6512,11 @@ packages: engines: {node: '>=16 || 14 >=14.17'} hasBin: true + glob@11.0.0: + resolution: {integrity: sha512-9UiX/Bl6J2yaBbxKoEBRm4Cipxgok8kQYcOPEhScPwebu2I0HoQOuYdIO6S3hLuWoZgpDpwQZMzTFxgpkyT76g==} + engines: {node: 20 || >=22} + hasBin: true + glob@5.0.15: resolution: {integrity: sha512-c9IPMazfRITpmAAKi22dK1VKxGDX9ehhqfABDriL/lzO92xcUKEJPQHrVA/2YHSNFB4iFlykVmWvwo48nr3OxA==} deprecated: Glob versions prior to v9 are no longer supported @@ -7116,6 +7121,10 @@ packages: resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==} engines: {node: '>=14'} + jackspeak@4.0.1: + resolution: {integrity: sha512-cub8rahkh0Q/bw1+GxP7aeSe29hHHn2V4m29nnDlvCdlgU+3UGxkZp7Z53jLUdpX3jdTO0nJZUDl3xvbWc2Xog==} + engines: {node: 20 || >=22} + jake@10.8.7: resolution: {integrity: sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==} engines: {node: '>=10'} @@ -7559,6 +7568,10 @@ packages: lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} + lru-cache@11.0.1: + resolution: {integrity: sha512-CgeuL5uom6j/ZVrg7G/+1IXqRY8JXX4Hghfy5YE0EhoYQWvndP1kufu58cmZLNIDKnRhZrXfdS9urVWx98AipQ==} + engines: {node: 20 || >=22} + lru-cache@4.1.5: resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==} @@ -7793,6 +7806,10 @@ packages: resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==} engines: {node: '>=4'} + minimatch@10.0.1: + resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==} + engines: {node: 20 || >=22} + minimatch@3.0.5: resolution: {integrity: sha512-tUpxzX0VAzJHjLu0xUfFv1gwVp9ba3IOuRAVH2EGuRW8a5emA2FlACLqiT/lDVtS1W+TGNwqz3sWaNyLgDJWuw==} @@ -7854,8 +7871,8 @@ packages: resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==} engines: {node: '>=8'} - minipass@7.0.4: - resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==} + minipass@7.1.2: + resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==} engines: {node: '>=16 || 14 >=14.17'} minizlib@2.1.2: @@ -7944,8 +7961,8 @@ packages: nested-error-stacks@2.1.1: resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==} - next@14.2.9: - resolution: {integrity: sha512-3CzBNo6BuJnRjcQvRw+irnU1WiuJNZEp+dkzkt91y4jeIDN/Emg95F+takSYiLpJ/HkxClVQRyqiTwYce5IVqw==} + next@14.2.12: + resolution: {integrity: sha512-cDOtUSIeoOvt1skKNihdExWMTybx3exnvbFbb9ecZDIxlvIbREQzt9A5Km3Zn3PfU+IFjyYGsHS+lN9VInAGKA==} engines: {node: '>=18.17.0'} hasBin: true peerDependencies: @@ -8319,6 +8336,9 @@ packages: resolution: {integrity: sha512-whdkPIooSu/bASggZ96BWVvZTRMOFxnyUG5PnTSGKoJE2gd5mbVNmR2Nj20QFzxYYgAXpoqC+AiXzl+UMRh7zQ==} engines: {node: '>=8'} + package-json-from-dist@1.0.0: + resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==} + pacote@18.0.6: resolution: {integrity: sha512-+eK3G27SMwsB8kLIuj4h1FUhHtwiEUo21Tw8wNjmvdlpOEr613edv+8FUsTj/4F/VN5ywGE19X18N7CC2EJk6A==} engines: {node: ^16.14.0 || >=18.0.0} @@ -8423,6 +8443,10 @@ packages: resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==} engines: {node: '>=16 || 14 >=14.17'} + path-scurry@2.0.0: + resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==} + engines: {node: 20 || >=22} + path-to-regexp@0.1.7: resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==} @@ -8432,6 +8456,10 @@ packages: path-to-regexp@6.2.1: resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==} + path-to-regexp@8.1.0: + resolution: {integrity: sha512-Bqn3vc8CMHty6zuD+tG23s6v2kwxslHEhTj4eYaVKGIEB+YX/2wd0/rgXLFD9G9id9KCtbVy/3ZgmvZjpa0UdQ==} + engines: {node: '>=16'} + path-type@3.0.0: resolution: {integrity: sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==} engines: {node: '>=4'} @@ -8454,8 +8482,8 @@ packages: resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==} engines: {node: '>= 14.16'} - picocolors@1.0.1: - resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==} + picocolors@1.1.0: + resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==} picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} @@ -8509,8 +8537,8 @@ packages: engines: {node: '>=16'} hasBin: true - playwright-core@1.46.1: - resolution: {integrity: sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==} + playwright-core@1.47.1: + resolution: {integrity: sha512-i1iyJdLftqtt51mEk6AhYFaAJCDx0xQ/O5NU8EKaWFgMjItPVma542Nh/Aq8aLCjIJSzjaiEQGW/nyqLkGF1OQ==} engines: {node: '>=18'} hasBin: true @@ -8519,8 +8547,8 @@ packages: engines: {node: '>=16'} hasBin: true - playwright@1.46.1: - resolution: {integrity: sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==} + playwright@1.47.1: + resolution: {integrity: sha512-SUEKi6947IqYbKxRiqnbUobVZY4bF1uu+ZnZNJX9DfU1tlf2UhWfvVjLf01pQx9URsOr18bFVUKXmanYWhbfkw==} engines: {node: '>=18'} hasBin: true @@ -8543,8 +8571,8 @@ packages: resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==} engines: {node: ^10 || ^12 || >=14} - postcss@8.4.45: - resolution: {integrity: sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==} + postcss@8.4.47: + resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==} engines: {node: ^10 || ^12 || >=14} prelude-ls@1.1.2: @@ -8744,15 +8772,15 @@ packages: resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==} engines: {node: '>=0.10.0'} - react-router-dom@6.26.1: - resolution: {integrity: sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==} + react-router-dom@6.26.2: + resolution: {integrity: sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' react-dom: '>=16.8' - react-router@6.26.1: - resolution: {integrity: sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==} + react-router@6.26.2: + resolution: {integrity: sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' @@ -8992,8 +9020,9 @@ packages: engines: {node: '>=14'} hasBin: true - rimraf@5.0.10: - resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==} + rimraf@6.0.1: + resolution: {integrity: sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==} + engines: {node: 20 || >=22} hasBin: true robust-predicates@3.0.2: @@ -9159,8 +9188,8 @@ packages: simple-swizzle@0.2.2: resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==} - sinon@18.0.0: - resolution: {integrity: sha512-+dXDXzD1sBO6HlmZDd7mXZCR/y5ECiEiGCBSGuFD/kZ0bDTofPYc6JaeGmPSF+1j1MejGUWkORbYOLDyvqCWpA==} + sinon@18.0.1: + resolution: {integrity: sha512-a2N2TDY1uGviajJ6r4D1CyRAkzE9NNVlYOV1wX5xQDuAk0ONgzgRl0EjCQuRCPxOwp13ghsMwt9Gdldujs39qw==} sirv@2.0.4: resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==} @@ -9212,8 +9241,8 @@ packages: resolution: {integrity: sha512-/dPCrG1s3ePpWm6yBbxZq5Be1dXGLyLn9Z791chDC3NFrpkVbWGzkBwPN1knaciexFXgRJ7hzdnwZ4stHSDmjg==} engines: {node: '>=4'} - source-map-js@1.2.0: - resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} + source-map-js@1.2.1: + resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} source-map-support@0.5.21: @@ -9628,8 +9657,8 @@ packages: peerDependencies: typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta' - tsx@4.19.0: - resolution: {integrity: sha512-bV30kM7bsLZKZIOCHeMNVMJ32/LuJzLVajkQI/qf92J2Qr08ueLQvW00PUZGiuLPP760UINwupgUj8qrSCPUKg==} + tsx@4.19.1: + resolution: {integrity: sha512-0flMz1lh74BR4wOvBjuh9olbnwqCPc35OOlfyzHba0Dc+QNUeWX/Gq2YTbnwcWPO3BMd8fkzRVrHcsR+a7z7rA==} engines: {node: '>=18.0.0'} hasBin: true @@ -10366,7 +10395,7 @@ snapshots: dependencies: openapi-fetch: 0.11.2 - '@argos-ci/core@2.8.0': + '@argos-ci/core@2.8.1': dependencies: '@argos-ci/api-client': 0.5.0 '@argos-ci/util': 2.1.1 @@ -10398,7 +10427,7 @@ snapshots: '@babel/code-frame@7.24.7': dependencies: '@babel/highlight': 7.24.7 - picocolors: 1.0.1 + picocolors: 1.1.0 '@babel/compat-data@7.25.4': {} @@ -10565,7 +10594,7 @@ snapshots: '@babel/helper-validator-identifier': 7.24.7 chalk: 2.4.2 js-tokens: 4.0.0 - picocolors: 1.0.1 + picocolors: 1.1.0 '@babel/node@7.25.0(@babel/core@7.25.2)': dependencies: @@ -10723,7 +10752,7 @@ snapshots: '@babel/core': 7.25.2 '@babel/helper-plugin-utils': 7.24.8 - '@babel/plugin-syntax-typescript@7.24.7(@babel/core@7.25.2)': + '@babel/plugin-syntax-typescript@7.25.4(@babel/core@7.25.2)': dependencies: '@babel/core': 7.25.2 '@babel/helper-plugin-utils': 7.24.8 @@ -11108,7 +11137,7 @@ snapshots: '@babel/helper-annotate-as-pure': 7.24.7 '@babel/helper-create-class-features-plugin': 7.25.4(@babel/core@7.25.2) '@babel/helper-plugin-utils': 7.24.8 - '@babel/plugin-syntax-typescript': 7.24.7(@babel/core@7.25.2) + '@babel/plugin-syntax-typescript': 7.25.4(@babel/core@7.25.2) transitivePeerDependencies: - supports-color @@ -11913,19 +11942,19 @@ snapshots: '@mui/core-downloads-tracker@5.16.7': {} - '@mui/docs@6.0.2(zo3bb3ve5osnt35xnwoljbbxum)': + '@mui/docs@6.1.1(nkdvdhvjmzb2hjjn6o66idlzh4)': dependencies: '@babel/runtime': 7.25.6 '@mui/base': 5.0.0-beta.40(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/icons-material': 5.16.7(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.4)(react@18.3.1) - '@mui/internal-markdown': 1.0.12 + '@mui/internal-markdown': 1.0.14 '@mui/material': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1) chai: 5.1.1 clipboard-copy: 4.0.1 clsx: 2.1.1 csstype: 3.1.3 - next: 14.2.9(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 14.2.12(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) nprogress: 0.2.0 prop-types: 15.8.1 react: 18.3.1 @@ -11940,31 +11969,31 @@ snapshots: optionalDependencies: '@types/react': 18.3.4 - '@mui/internal-babel-plugin-resolve-imports@1.0.17(@babel/core@7.25.2)': + '@mui/internal-babel-plugin-resolve-imports@1.0.18(@babel/core@7.25.2)': dependencies: '@babel/core': 7.25.2 resolve: 1.22.8 - '@mui/internal-docs-utils@1.0.12': + '@mui/internal-docs-utils@1.0.13': dependencies: - rimraf: 5.0.10 + rimraf: 6.0.1 typescript: 5.5.4 - '@mui/internal-markdown@1.0.12': + '@mui/internal-markdown@1.0.14': dependencies: '@babel/runtime': 7.25.6 lodash: 4.17.21 marked: 13.0.3 prismjs: 1.29.0 - '@mui/internal-scripts@1.0.19': + '@mui/internal-scripts@1.0.21': dependencies: '@babel/core': 7.25.2 '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.25.2) '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2) - '@babel/plugin-syntax-typescript': 7.24.7(@babel/core@7.25.2) + '@babel/plugin-syntax-typescript': 7.25.4(@babel/core@7.25.2) '@babel/types': 7.25.6 - '@mui/internal-docs-utils': 1.0.12 + '@mui/internal-docs-utils': 1.0.13 doctrine: 3.0.0 lodash: 4.17.21 typescript: 5.5.4 @@ -11972,7 +12001,7 @@ snapshots: transitivePeerDependencies: - supports-color - '@mui/internal-test-utils@1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/internal-test-utils@1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/plugin-transform-modules-commonjs': 7.24.8(@babel/core@7.25.2) '@babel/preset-typescript': 7.24.7(@babel/core@7.25.2) @@ -11991,11 +12020,11 @@ snapshots: jsdom: 24.1.3 lodash: 4.17.21 mocha: 10.7.3 - playwright: 1.46.1 + playwright: 1.47.1 prop-types: 15.8.1 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - sinon: 18.0.0 + sinon: 18.0.1 transitivePeerDependencies: - '@babel/core' - '@types/react' @@ -12039,11 +12068,11 @@ snapshots: '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1) '@types/react': 18.3.4 - '@mui/material-nextjs@5.16.6(@emotion/cache@11.13.1)(@emotion/server@11.11.0)(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.4)(next@14.2.9(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@mui/material-nextjs@5.16.6(@emotion/cache@11.13.1)(@emotion/server@11.11.0)(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.4)(next@14.2.12(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.25.6 '@mui/material': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - next: 14.2.9(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 14.2.12(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 optionalDependencies: '@emotion/cache': 11.13.1 @@ -12071,11 +12100,11 @@ snapshots: '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1) '@types/react': 18.3.4 - '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/dd2faca9c6192b79510948cecd3bce2380f27d64(encoding@0.1.13)': + '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/263c7259451d5b928bbdfd299c9c0afc89dfec02(encoding@0.1.13)': dependencies: '@googleapis/sheets': 9.3.1(encoding@0.1.13) '@netlify/functions': 2.8.1 - '@slack/bolt': 3.21.2 + '@slack/bolt': 3.21.4 execa: 9.3.1 google-auth-library: 9.14.1(encoding@0.1.13) transitivePeerDependencies: @@ -12171,37 +12200,37 @@ snapshots: '@netlify/node-cookies': 0.1.0 urlpattern-polyfill: 8.0.2 - '@next/env@14.2.9': {} + '@next/env@14.2.12': {} - '@next/eslint-plugin-next@14.2.9': + '@next/eslint-plugin-next@14.2.12': dependencies: glob: 10.3.10 - '@next/swc-darwin-arm64@14.2.9': + '@next/swc-darwin-arm64@14.2.12': optional: true - '@next/swc-darwin-x64@14.2.9': + '@next/swc-darwin-x64@14.2.12': optional: true - '@next/swc-linux-arm64-gnu@14.2.9': + '@next/swc-linux-arm64-gnu@14.2.12': optional: true - '@next/swc-linux-arm64-musl@14.2.9': + '@next/swc-linux-arm64-musl@14.2.12': optional: true - '@next/swc-linux-x64-gnu@14.2.9': + '@next/swc-linux-x64-gnu@14.2.12': optional: true - '@next/swc-linux-x64-musl@14.2.9': + '@next/swc-linux-x64-musl@14.2.12': optional: true - '@next/swc-win32-arm64-msvc@14.2.9': + '@next/swc-win32-arm64-msvc@14.2.12': optional: true - '@next/swc-win32-ia32-msvc@14.2.9': + '@next/swc-win32-ia32-msvc@14.2.12': optional: true - '@next/swc-win32-x64-msvc@14.2.9': + '@next/swc-win32-x64-msvc@14.2.12': optional: true '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3': @@ -12733,7 +12762,7 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@remix-run/router@1.19.1': {} + '@remix-run/router@1.19.2': {} '@rollup/rollup-android-arm-eabi@4.18.1': optional: true @@ -12843,7 +12872,7 @@ snapshots: '@sinonjs/text-encoding@0.7.2': {} - '@slack/bolt@3.21.2': + '@slack/bolt@3.21.4': dependencies: '@slack/logger': 4.0.0 '@slack/oauth': 2.6.3 @@ -12855,7 +12884,7 @@ snapshots: '@types/tsscmp': 1.0.2 axios: 1.7.5(debug@4.3.6) express: 4.18.2 - path-to-regexp: 6.2.1 + path-to-regexp: 8.1.0 promise.allsettled: 1.0.7 raw-body: 2.5.2 tsscmp: 1.0.6 @@ -12976,7 +13005,7 @@ snapshots: dependencies: '@swc/counter': 0.1.3 - '@tanstack/query-core@5.55.4': {} + '@tanstack/query-core@5.56.2': {} '@testing-library/dom@10.4.0': dependencies: @@ -13184,7 +13213,7 @@ snapshots: '@types/minimist@1.2.5': {} - '@types/mocha@10.0.7': {} + '@types/mocha@10.0.8': {} '@types/moment-hijri@2.1.4': dependencies: @@ -13905,14 +13934,14 @@ snapshots: asynckit@0.4.0: {} - autoprefixer@10.4.20(postcss@8.4.45): + autoprefixer@10.4.20(postcss@8.4.47): dependencies: browserslist: 4.23.3 caniuse-lite: 1.0.30001647 fraction.js: 4.3.7 normalize-range: 0.1.2 - picocolors: 1.0.1 - postcss: 8.4.45 + picocolors: 1.1.0 + postcss: 8.4.47 postcss-value-parser: 4.2.0 available-typed-arrays@1.0.7: @@ -14177,7 +14206,7 @@ snapshots: fs-minipass: 3.0.3 glob: 10.3.10 lru-cache: 10.4.3 - minipass: 7.0.4 + minipass: 7.1.2 minipass-collect: 2.0.1 minipass-flush: 1.0.5 minipass-pipeline: 1.2.4 @@ -14473,7 +14502,7 @@ snapshots: readable-stream: 3.6.2 typedarray: 0.0.6 - concurrently@9.0.0: + concurrently@9.0.1: dependencies: chalk: 4.1.2 lodash: 4.17.21 @@ -14807,7 +14836,7 @@ snapshots: dependencies: '@babel/runtime': 7.25.6 - date-fns@3.6.0: {} + date-fns@4.1.0: {} date-format@4.0.14: {} @@ -15283,13 +15312,13 @@ snapshots: transitivePeerDependencies: - eslint-plugin-import - eslint-config-airbnb@19.0.4(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.0(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.35.2(eslint@8.57.0))(eslint@8.57.0): + eslint-config-airbnb@19.0.4(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.0(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.36.1(eslint@8.57.0))(eslint@8.57.0): dependencies: eslint: 8.57.0 eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.0) - eslint-plugin-react: 7.35.2(eslint@8.57.0) + eslint-plugin-react: 7.36.1(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) object.assign: 4.1.5 object.entries: 1.1.8 @@ -15370,7 +15399,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-plugin-jsdoc@50.2.2(eslint@8.57.0): + eslint-plugin-jsdoc@50.2.4(eslint@8.57.0): dependencies: '@es-joy/jsdoccomment': 0.48.0 are-docs-informative: 0.0.2 @@ -15440,7 +15469,7 @@ snapshots: dependencies: eslint: 8.57.0 - eslint-plugin-react@7.35.2(eslint@8.57.0): + eslint-plugin-react@7.36.1(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlast: 1.2.5 @@ -15909,7 +15938,7 @@ snapshots: fs-minipass@3.0.3: dependencies: - minipass: 7.0.4 + minipass: 7.1.2 fs-readdir-recursive@1.1.0: {} @@ -16064,9 +16093,18 @@ snapshots: foreground-child: 3.1.1 jackspeak: 2.3.6 minimatch: 9.0.4 - minipass: 7.0.4 + minipass: 7.1.2 path-scurry: 1.10.1 + glob@11.0.0: + dependencies: + foreground-child: 3.1.1 + jackspeak: 4.0.1 + minimatch: 10.0.1 + minipass: 7.1.2 + package-json-from-dist: 1.0.0 + path-scurry: 2.0.0 + glob@5.0.15: dependencies: inflight: 1.0.6 @@ -16712,6 +16750,12 @@ snapshots: optionalDependencies: '@pkgjs/parseargs': 0.11.0 + jackspeak@4.0.1: + dependencies: + '@isaacs/cliui': 8.0.2 + optionalDependencies: + '@pkgjs/parseargs': 0.11.0 + jake@10.8.7: dependencies: async: 3.2.5 @@ -16763,7 +16807,7 @@ snapshots: graceful-fs: 4.2.11 micromatch: 4.0.8 neo-async: 2.6.2 - picocolors: 1.0.1 + picocolors: 1.1.0 recast: 0.23.9 temp: 0.9.4 write-file-atomic: 5.0.1 @@ -17326,6 +17370,8 @@ snapshots: lru-cache@10.4.3: {} + lru-cache@11.0.1: {} + lru-cache@4.1.5: dependencies: pseudomap: 1.0.2 @@ -17368,7 +17414,7 @@ snapshots: cacache: 18.0.3 http-cache-semantics: 4.1.1 is-lambda: 1.0.1 - minipass: 7.0.4 + minipass: 7.1.2 minipass-fetch: 3.0.4 minipass-flush: 1.0.5 minipass-pipeline: 1.2.4 @@ -17650,6 +17696,10 @@ snapshots: min-indent@1.0.1: {} + minimatch@10.0.1: + dependencies: + brace-expansion: 2.0.1 + minimatch@3.0.5: dependencies: brace-expansion: 1.1.11 @@ -17684,11 +17734,11 @@ snapshots: minipass-collect@2.0.1: dependencies: - minipass: 7.0.4 + minipass: 7.1.2 minipass-fetch@3.0.4: dependencies: - minipass: 7.0.4 + minipass: 7.1.2 minipass-sized: 1.0.3 minizlib: 2.1.2 optionalDependencies: @@ -17714,7 +17764,7 @@ snapshots: minipass@5.0.0: {} - minipass@7.0.4: {} + minipass@7.1.2: {} minizlib@2.1.2: dependencies: @@ -17812,9 +17862,9 @@ snapshots: nested-error-stacks@2.1.1: {} - next@14.2.9(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + next@14.2.12(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@next/env': 14.2.9 + '@next/env': 14.2.12 '@swc/helpers': 0.5.5 busboy: 1.6.0 caniuse-lite: 1.0.30001647 @@ -17824,15 +17874,15 @@ snapshots: react-dom: 18.3.1(react@18.3.1) styled-jsx: 5.1.1(@babel/core@7.25.2)(babel-plugin-macros@3.1.0)(react@18.3.1) optionalDependencies: - '@next/swc-darwin-arm64': 14.2.9 - '@next/swc-darwin-x64': 14.2.9 - '@next/swc-linux-arm64-gnu': 14.2.9 - '@next/swc-linux-arm64-musl': 14.2.9 - '@next/swc-linux-x64-gnu': 14.2.9 - '@next/swc-linux-x64-musl': 14.2.9 - '@next/swc-win32-arm64-msvc': 14.2.9 - '@next/swc-win32-ia32-msvc': 14.2.9 - '@next/swc-win32-x64-msvc': 14.2.9 + '@next/swc-darwin-arm64': 14.2.12 + '@next/swc-darwin-x64': 14.2.12 + '@next/swc-linux-arm64-gnu': 14.2.12 + '@next/swc-linux-arm64-musl': 14.2.12 + '@next/swc-linux-x64-gnu': 14.2.12 + '@next/swc-linux-x64-musl': 14.2.12 + '@next/swc-win32-arm64-msvc': 14.2.12 + '@next/swc-win32-ia32-msvc': 14.2.12 + '@next/swc-win32-x64-msvc': 14.2.12 '@opentelemetry/api': 1.8.0 '@playwright/test': 1.44.1 transitivePeerDependencies: @@ -17965,7 +18015,7 @@ snapshots: '@npmcli/redact': 2.0.1 jsonparse: 1.3.1 make-fetch-happen: 13.0.0 - minipass: 7.0.4 + minipass: 7.1.2 minipass-fetch: 3.0.4 minizlib: 2.1.2 npm-package-arg: 11.0.2 @@ -18305,6 +18355,8 @@ snapshots: lodash.flattendeep: 4.4.0 release-zalgo: 1.0.0 + package-json-from-dist@1.0.0: {} + pacote@18.0.6: dependencies: '@npmcli/git': 5.0.4 @@ -18314,7 +18366,7 @@ snapshots: '@npmcli/run-script': 8.1.0 cacache: 18.0.3 fs-minipass: 3.0.3 - minipass: 7.0.4 + minipass: 7.1.2 npm-package-arg: 11.0.2 npm-packlist: 8.0.2 npm-pick-manifest: 9.0.1 @@ -18418,7 +18470,12 @@ snapshots: path-scurry@1.10.1: dependencies: lru-cache: 10.4.3 - minipass: 7.0.4 + minipass: 7.1.2 + + path-scurry@2.0.0: + dependencies: + lru-cache: 11.0.1 + minipass: 7.1.2 path-to-regexp@0.1.7: {} @@ -18426,6 +18483,8 @@ snapshots: path-to-regexp@6.2.1: {} + path-to-regexp@8.1.0: {} + path-type@3.0.0: dependencies: pify: 3.0.0 @@ -18440,7 +18499,7 @@ snapshots: pathval@2.0.0: {} - picocolors@1.0.1: {} + picocolors@1.1.0: {} picomatch@2.3.1: {} @@ -18476,7 +18535,7 @@ snapshots: playwright-core@1.44.1: {} - playwright-core@1.46.1: {} + playwright-core@1.47.1: {} playwright@1.44.1: dependencies: @@ -18484,9 +18543,9 @@ snapshots: optionalDependencies: fsevents: 2.3.2 - playwright@1.46.1: + playwright@1.47.1: dependencies: - playwright-core: 1.46.1 + playwright-core: 1.47.1 optionalDependencies: fsevents: 2.3.2 @@ -18502,20 +18561,20 @@ snapshots: postcss@8.4.31: dependencies: nanoid: 3.3.7 - picocolors: 1.0.1 - source-map-js: 1.2.0 + picocolors: 1.1.0 + source-map-js: 1.2.1 postcss@8.4.38: dependencies: nanoid: 3.3.7 - picocolors: 1.0.1 - source-map-js: 1.2.0 + picocolors: 1.1.0 + source-map-js: 1.2.1 - postcss@8.4.45: + postcss@8.4.47: dependencies: nanoid: 3.3.7 - picocolors: 1.0.1 - source-map-js: 1.2.0 + picocolors: 1.1.0 + source-map-js: 1.2.1 prelude-ls@1.1.2: {} @@ -18554,7 +18613,7 @@ snapshots: find-up: 5.0.0 ignore: 5.3.1 mri: 1.2.0 - picocolors: 1.0.1 + picocolors: 1.1.0 picomatch: 3.0.1 prettier: 3.3.3 tslib: 2.6.2 @@ -18705,16 +18764,16 @@ snapshots: react-refresh@0.14.2: {} - react-router-dom@6.26.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + react-router-dom@6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@remix-run/router': 1.19.1 + '@remix-run/router': 1.19.2 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - react-router: 6.26.1(react@18.3.1) + react-router: 6.26.2(react@18.3.1) - react-router@6.26.1(react@18.3.1): + react-router@6.26.2(react@18.3.1): dependencies: - '@remix-run/router': 1.19.1 + '@remix-run/router': 1.19.2 react: 18.3.1 react-runner@1.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1): @@ -18992,9 +19051,10 @@ snapshots: dependencies: glob: 9.3.5 - rimraf@5.0.10: + rimraf@6.0.1: dependencies: - glob: 10.3.10 + glob: 11.0.0 + package-json-from-dist: 1.0.0 robust-predicates@3.0.2: {} @@ -19242,7 +19302,7 @@ snapshots: dependencies: is-arrayish: 0.3.2 - sinon@18.0.0: + sinon@18.0.1: dependencies: '@sinonjs/commons': 3.0.1 '@sinonjs/fake-timers': 11.2.2 @@ -19314,7 +19374,7 @@ snapshots: dependencies: is-plain-obj: 1.1.0 - source-map-js@1.2.0: {} + source-map-js@1.2.1: {} source-map-support@0.5.21: dependencies: @@ -19370,7 +19430,7 @@ snapshots: ssri@10.0.6: dependencies: - minipass: 7.0.4 + minipass: 7.1.2 stackback@0.0.2: {} @@ -19733,7 +19793,7 @@ snapshots: tslib: 1.14.1 typescript: 5.5.4 - tsx@4.19.0: + tsx@4.19.1: dependencies: esbuild: 0.23.1 get-tsconfig: 4.7.5 @@ -19922,7 +19982,7 @@ snapshots: dependencies: browserslist: 4.23.3 escalade: 3.1.2 - picocolors: 1.0.1 + picocolors: 1.1.0 update-check@1.5.4: dependencies: @@ -20013,7 +20073,7 @@ snapshots: vite@5.3.4(@types/node@20.16.5)(terser@5.27.0): dependencies: esbuild: 0.21.5 - postcss: 8.4.45 + postcss: 8.4.47 rollup: 4.18.1 optionalDependencies: '@types/node': 20.16.5 @@ -20086,7 +20146,7 @@ snapshots: gzip-size: 6.0.0 html-escaper: 2.0.2 opener: 1.5.2 - picocolors: 1.0.1 + picocolors: 1.1.0 sirv: 2.0.4 ws: 7.5.9 transitivePeerDependencies: diff --git a/scripts/x-charts-pro.exports.json b/scripts/x-charts-pro.exports.json index ba8a95232123..22db3a452177 100644 --- a/scripts/x-charts-pro.exports.json +++ b/scripts/x-charts-pro.exports.json @@ -298,11 +298,16 @@ { "name": "unstable_usePieSeries", "kind": "Function" }, { "name": "unstable_useScatterSeries", "kind": "Function" }, { "name": "unstable_useSeries", "kind": "Function" }, + { "name": "useAxisTooltip", "kind": "Function" }, + { "name": "UseAxisTooltipReturnValue", "kind": "Interface" }, { "name": "useChartId", "kind": "Function" }, { "name": "useDrawingArea", "kind": "Function" }, { "name": "useGaugeState", "kind": "Function" }, { "name": "useHighlighted", "kind": "Function" }, { "name": "useItemHighlighted", "kind": "Function" }, + { "name": "useItemTooltip", "kind": "Function" }, + { "name": "UseItemTooltipReturnValue", "kind": "Interface" }, + { "name": "useMouseTracker", "kind": "Function" }, { "name": "useSvgRef", "kind": "Function" }, { "name": "useXAxis", "kind": "Function" }, { "name": "useXColorScale", "kind": "Function" }, diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index 060d4920f609..e95e714b9698 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -285,11 +285,16 @@ { "name": "unstable_usePieSeries", "kind": "Function" }, { "name": "unstable_useScatterSeries", "kind": "Function" }, { "name": "unstable_useSeries", "kind": "Function" }, + { "name": "useAxisTooltip", "kind": "Function" }, + { "name": "UseAxisTooltipReturnValue", "kind": "Interface" }, { "name": "useChartId", "kind": "Function" }, { "name": "useDrawingArea", "kind": "Function" }, { "name": "useGaugeState", "kind": "Function" }, { "name": "useHighlighted", "kind": "Function" }, { "name": "useItemHighlighted", "kind": "Function" }, + { "name": "useItemTooltip", "kind": "Function" }, + { "name": "UseItemTooltipReturnValue", "kind": "Interface" }, + { "name": "useMouseTracker", "kind": "Function" }, { "name": "useSvgRef", "kind": "Function" }, { "name": "useXAxis", "kind": "Function" }, { "name": "useXColorScale", "kind": "Function" }, diff --git a/test/README.md b/test/README.md index 1b571acc841d..5bb982bb61ca 100644 --- a/test/README.md +++ b/test/README.md @@ -43,10 +43,10 @@ curl --request POST \ --data-raw '{"branch":"pull/24289/head","parameters":{"react-version":"next"}}' ``` -## Testing multiple versions of Material UI +## Testing multiple versions of MaterialĀ UI -Currently, we use `@mui/material` v5 in the MUI X repo and all tests are run against it. -But MUI X packages are compatible with v5 and v6. +Currently, we use `@mui/material` v5 in the MUIĀ X repo and all tests are run against it. +But MUIĀ X packages are compatible with v5 and v6. You can run the tests against `@mui/material` v6 by running the following command: `pnpm use-material-ui-v6` diff --git a/test/package.json b/test/package.json index b46acbb59d2d..8e4651c93624 100644 --- a/test/package.json +++ b/test/package.json @@ -33,7 +33,7 @@ "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-router-dom": "^6.26.1", + "react-router-dom": "^6.26.2", "semver": "^7.6.3", "stylis": "^4.3.4", "stylis-plugin-rtl": "^2.1.1" diff --git a/test/regressions/data-grid/DataGridCssVars.js b/test/regressions/data-grid/DataGridCssVars.js new file mode 100644 index 000000000000..5674e10277bb --- /dev/null +++ b/test/regressions/data-grid/DataGridCssVars.js @@ -0,0 +1,69 @@ +/* eslint-disable @typescript-eslint/no-use-before-define */ +import * as React from 'react'; +import { DataGridPro } from '@mui/x-data-grid-pro'; +import { + randomCreatedDate, + randomTraderName, + randomEmail, + randomUpdatedDate, +} from '@mui/x-data-grid-generator'; +import { Box, Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material'; + +export default function ControlPinnedColumns() { + const [pinnedColumns, setPinnedColumns] = React.useState({ + left: ['name'], + right: ['dateCreated'], + }); + + const handlePinnedColumnsChange = React.useCallback( + (updatedPinnedColumns) => { + setPinnedColumns(updatedPinnedColumns); + }, + [setPinnedColumns], + ); + + return ( + + + + + + ); +} + +const columns = [ + { field: 'name', headerName: 'Name', width: 80, editable: true }, + { field: 'email', headerName: 'Email', width: 150, editable: true }, + { field: 'age', headerName: 'Age', type: 'number', editable: true }, + { + field: 'dateCreated', + headerName: 'Date Created', + type: 'date', + width: 80, + editable: true, + }, + { + field: 'lastLogin', + headerName: 'Last Login', + type: 'dateTime', + width: 180, + editable: true, + }, +]; + +const rows = [ + { + id: 1, + name: randomTraderName(), + email: randomEmail(), + age: 25, + dateCreated: randomCreatedDate(), + lastLogin: randomUpdatedDate(), + }, +]; diff --git a/test/regressions/index.js b/test/regressions/index.js index 06cdb75f6d0b..b90a0786551f 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -18,6 +18,7 @@ const blacklist = [ 'docs-data-grid-filtering/RemoveBuiltInOperators.png', // Needs interaction 'docs-data-grid-filtering/CustomRatingOperator.png', // Needs interaction 'docs-data-grid-filtering/CustomInputComponent.png', // Needs interaction + /^docs-charts-tooltip\/(.*).png/, // Needs interaction 'docs-date-pickers-date-calendar/DateCalendarServerRequest.png', // Has random behavior (TODO: Use seeded random) // 'docs-system-typography', ]; @@ -72,6 +73,10 @@ requireDocs.keys().forEach((path) => { return; } + if (requireDocs(path).default === undefined) { + return; + } + tests.push({ path, suite,