From 6561be7ac4c5bc83f71d62cc12b2cc4e0e81b70e Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Thu, 21 Sep 2023 13:05:53 +0200 Subject: [PATCH 001/262] [docs] Slack feedback on wording (#10406) --- docs/data/charts/tooltip/tooltip.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/data/charts/tooltip/tooltip.md b/docs/data/charts/tooltip/tooltip.md index db56575ea1242..155711681a1b0 100644 --- a/docs/data/charts/tooltip/tooltip.md +++ b/docs/data/charts/tooltip/tooltip.md @@ -82,7 +82,9 @@ It will remove the header showing the x-axis value from the tooltip. ## Composition If you're using composition, by default the axis will be listening for mouse events to get its current x/y values. -If you don't need it, because you don't use highlights, and the tooltip is triggered by an item, you can disable those listeners with the `disableAxisListener` prop. +If you don't need it, you can disable those listeners with the `disableAxisListener` prop. + +You need those listerne if you are using [axes highlight](/x/react-charts/tooltip/#highlighting-axis) or you have a tooltip [triggered by axis](/x/react-charts/tooltip/#interactions). ```jsx From 9addfb00260a05835753224a12e3463f9759b1f8 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Thu, 21 Sep 2023 13:15:40 -0400 Subject: [PATCH 002/262] [DataGrid] Refactor `GridMenu` prop `onClickAway` to `onClose` (#10411) --- .../headerFiltering/GridHeaderFilterMenu.tsx | 2 +- .../src/components/cell/GridActionsCell.tsx | 4 ++-- .../src/components/menu/GridMenu.tsx | 15 +++++++++++---- .../menu/columnMenu/GridColumnHeaderMenu.tsx | 18 +++++++++--------- .../toolbar/GridToolbarDensitySelector.tsx | 13 +++---------- .../toolbar/GridToolbarExportContainer.tsx | 15 ++------------- 6 files changed, 28 insertions(+), 39 deletions(-) diff --git a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx b/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx index ccec6d54e1b24..991fb45c36406 100644 --- a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx +++ b/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx @@ -59,7 +59,7 @@ function GridHeaderFilterMenu({ placement="bottom-end" open={open} target={target} - onClickAway={hideMenu} + onClose={hideMenu} onExited={hideMenu} > diff --git a/packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx index 103f594dc95c1..424901dafab19 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx @@ -215,11 +215,11 @@ function GridActionsCell(props: GridActionsCellProps) { {menuButtons.length > 0 && ( { open: boolean; target: HTMLElement | null; - onClickAway: ClickAwayListenerProps['onClickAway']; + onClose: (event?: Event) => void; position?: MenuPosition; onExited?: GrowProps['onExited']; children: React.ReactNode; @@ -65,7 +65,7 @@ const transformOrigin = { }; function GridMenu(props: GridMenuProps) { - const { open, target, onClickAway, children, position, className, onExited, ...other } = props; + const { open, target, onClose, children, position, className, onExited, ...other } = props; const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); const classes = useUtilityClasses(rootProps); @@ -86,6 +86,13 @@ function GridMenu(props: GridMenuProps) { } }; + const handleClickAway: ClickAwayListenerProps['onClickAway'] = (event) => { + if (event.target && (target === event.target || target?.contains(event.target as Node))) { + return; + } + onClose(event); + }; + return ( {({ TransitionProps, placement }) => ( - + { + const hideMenu = useEventCallback((event?: Event) => { + if (event) { // Prevent triggering the sorting event.stopPropagation(); - if (!target?.contains(event.target as HTMLElement)) { - apiRef.current.hideColumnMenu(); + if (target?.contains(event.target as HTMLElement)) { + return; } - }, - [apiRef, target], - ); + } + apiRef.current.hideColumnMenu(); + }); if (!target || !colDef) { return null; @@ -49,7 +49,7 @@ function GridColumnHeaderMenu({ placement={`bottom-${colDef!.align === 'right' ? 'start' : 'end'}` as any} open={open} target={target} - onClickAway={hideMenu} + onClose={hideMenu} onExited={onExited} > !prevOpen); onClick?.(event); }; - const handleDensitySelectorClickAway: GridMenuProps['onClickAway'] = (event) => { - if ( - buttonRef.current === event.target || - // if user clicked on the icon - buttonRef.current?.contains(event.target as Element) - ) { - return; - } + const handleDensitySelectorClose = () => { setOpen(false); }; const handleDensityUpdate = (newDensity: GridDensity) => { @@ -120,7 +113,7 @@ export const GridToolbarDensitySelector = React.forwardRef { - if ( - buttonRef.current === event.target || - // if user clicked on the icon - buttonRef.current?.contains(event.target as Element) - ) { - return; - } - setOpen(false); - }; - if (children == null) { return null; } @@ -72,7 +61,7 @@ export const GridToolbarExportContainer = React.forwardRef Date: Thu, 21 Sep 2023 17:54:47 -0400 Subject: [PATCH 003/262] [DataGrid] Restore focus after `GridMenu` closes (#10412) --- .../src/components/menu/GridMenu.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx index 0eb17832239b8..cc00c12dae5d4 100644 --- a/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx +++ b/packages/grid/x-data-grid/src/components/menu/GridMenu.tsx @@ -2,7 +2,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import ClickAwayListener, { ClickAwayListenerProps } from '@mui/material/ClickAwayListener'; -import { unstable_composeClasses as composeClasses, HTMLElementType } from '@mui/utils'; +import { + unstable_composeClasses as composeClasses, + unstable_useEnhancedEffect as useEnhancedEffect, + HTMLElementType, +} from '@mui/utils'; import Grow, { GrowProps } from '@mui/material/Grow'; import Paper from '@mui/material/Paper'; import Popper, { PopperProps } from '@mui/material/Popper'; @@ -70,6 +74,17 @@ function GridMenu(props: GridMenuProps) { const rootProps = useGridRootProps(); const classes = useUtilityClasses(rootProps); + const savedFocusRef = React.useRef(null); + useEnhancedEffect(() => { + if (open) { + savedFocusRef.current = + document.activeElement instanceof HTMLElement ? document.activeElement : null; + } else { + savedFocusRef.current?.focus?.(); + savedFocusRef.current = null; + } + }, [open]); + React.useEffect(() => { // Emit menuOpen or menuClose events const eventName = open ? 'menuOpen' : 'menuClose'; From 2577f6ba48e746e761f5a0f390cddfcf94284fdc Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Fri, 22 Sep 2023 10:30:09 +0200 Subject: [PATCH 004/262] [DataGridPro] Fix missing row hover styles (#10252) --- .../columnPinning/useGridColumnPinning.tsx | 64 ------------------- .../tests/columnPinning.DataGridPro.test.tsx | 32 ++++++++++ .../x-data-grid/src/components/GridRow.tsx | 4 +- .../virtualization/useGridVirtualScroller.tsx | 14 ++++ 4 files changed, 49 insertions(+), 65 deletions(-) diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx index 47fd3d037b3cd..d580b99ec7d0c 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx @@ -6,7 +6,6 @@ import { gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, - gridClasses, useGridApiMethod, useGridApiEventHandler, GridEventListener, @@ -71,69 +70,6 @@ export const useGridColumnPinning = ( ): void => { const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector); const theme = useTheme(); - // Each visible row (not to be confused with a filter result) is composed of a central .MuiDataGrid-row element - // and up to two additional .MuiDataGrid-row's, one for the columns pinned to the left and another - // for those on the right side. When hovering any of these elements, the :hover styles are applied only to - // the row element that was actually hovered, not its additional siblings. To make it look like a contiguous row, - // this method adds/removes the .Mui-hovered class to all of the row elements inside one visible row. - const updateHoveredClassOnSiblingRows = React.useCallback( - (event: React.MouseEvent) => { - if (props.disableColumnPinning) { - return; - } - - if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) { - return; - } - - const nbLeftPinnedColumns = pinnedColumns.left?.length ?? 0; - const nbRightPinnedColumns = pinnedColumns.right?.length ?? 0; - if (nbLeftPinnedColumns + nbRightPinnedColumns === 0) { - return; - } - - const rowContainer = apiRef.current.virtualScrollerRef!.current!; - if (!rowContainer) { - return; - } - - const index = event.currentTarget.dataset.rowindex; - const rowElements = rowContainer.querySelectorAll( - `.${gridClasses.row}[data-rowindex="${index}"]`, - ); - rowElements.forEach((row) => { - // Ignore rows from other grid inside the hovered row - if ( - row.closest(`.${gridClasses.virtualScroller}`) === - apiRef.current.virtualScrollerRef!.current! - ) { - if (event.type === 'mouseenter') { - row.classList.add('Mui-hovered'); - } else { - row.classList.remove('Mui-hovered'); - } - } - }); - }, - [apiRef, pinnedColumns.left, pinnedColumns.right, props.disableColumnPinning], - ); - - const handleMouseEnter = React.useCallback>( - (params, event) => { - updateHoveredClassOnSiblingRows(event); - }, - [updateHoveredClassOnSiblingRows], - ); - - const handleMouseLeave = React.useCallback>( - (params, event) => { - updateHoveredClassOnSiblingRows(event); - }, - [updateHoveredClassOnSiblingRows], - ); - - useGridApiEventHandler(apiRef, 'rowMouseEnter', handleMouseEnter); - useGridApiEventHandler(apiRef, 'rowMouseLeave', handleMouseLeave); /** * PRE-PROCESSING diff --git a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx index 57a1a02ef3e94..0957c1a1b478d 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx @@ -8,6 +8,7 @@ import { DataGridProProps, gridClasses, GridPinnedPosition, + GRID_CHECKBOX_SELECTION_FIELD, } from '@mui/x-data-grid-pro'; import { useBasicDemoData, getBasicGridData } from '@mui/x-data-grid-generator'; import { @@ -64,6 +65,9 @@ describe(' - Column pinning', () => { disconnect: () => { clearTimeout(timeout); }, + unobserve: () => { + clearTimeout(timeout); + }, }; } @@ -142,6 +146,34 @@ describe(' - Column pinning', () => { expect(renderZone!.querySelector('[data-rowindex="0"]')).not.to.have.class('Mui-hovered'); }); + // https://github.com/mui/mui-x/issues/10176 + it('should keep .Mui-hovered on the entire row when row is selected and deselected', () => { + render( + , + ); + const leftColumns = document.querySelector(`.${gridClasses['pinnedColumns--left']}`); + const rightColumns = document.querySelector(`.${gridClasses['pinnedColumns--right']}`); + const renderZone = document.querySelector(`.${gridClasses.virtualScrollerRenderZone}`); + const cell = getCell(0, 0); + + fireEvent.mouseEnter(cell); + expect(leftColumns!.querySelector('[data-rowindex="0"]')).to.have.class('Mui-hovered'); + expect(rightColumns!.querySelector('[data-rowindex="0"]')).to.have.class('Mui-hovered'); + expect(renderZone!.querySelector('[data-rowindex="0"]')).to.have.class('Mui-hovered'); + + const checkbox = cell.querySelector('input[type="checkbox"]')!; + fireEvent.click(checkbox); + fireEvent.click(checkbox); + expect(leftColumns!.querySelector('[data-rowindex="0"]')).to.have.class('Mui-hovered'); + expect(rightColumns!.querySelector('[data-rowindex="0"]')).to.have.class('Mui-hovered'); + expect(renderZone!.querySelector('[data-rowindex="0"]')).to.have.class('Mui-hovered'); + }); + it('should update the render zone offset after resize', function test() { if (isJSDOM) { // Need layouting diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index a27bef8934be8..4b1b6fa9cf99b 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -103,6 +103,7 @@ function EmptyCell({ width }: { width: number }) { const GridRow = React.forwardRef(function GridRow(props, refProp) { const { selected, + hovered, rowId, row, index, @@ -141,6 +142,7 @@ const GridRow = React.forwardRef(function GridRow( const ownerState = { selected, + hovered, isLastVisible, classes: rootProps.classes, editing: apiRef.current.getRowMode(rowId) === GridRowModes.Edit, @@ -456,7 +458,7 @@ const GridRow = React.forwardRef(function GridRow( data-id={rowId} data-rowindex={index} role="row" - className={clsx(...rowClassNames, classes.root, className)} + className={clsx(...rowClassNames, classes.root, hovered ? 'Mui-hovered' : null, className)} aria-rowindex={ariaRowIndex} aria-selected={selected} style={style} diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index dee0de795da83..802fc31cc39ff 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -147,6 +147,12 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { height: null, }); const prevTotalWidth = React.useRef(columnsTotalWidth); + // Each visible row (not to be confused with a filter result) is composed of a central row element + // and up to two additional row elements for pinned columns (left and right). + // When hovering any of these elements, the :hover styles are applied only to the row element that + // was actually hovered, not its additional siblings. To make it look like a contiguous row, + // we add/remove the .Mui-hovered class to all of the row elements inside one visible row. + const [hoveredRowId, setHoveredRowId] = React.useState(null); const rowStyleCache = React.useRef>(Object.create(null)); const prevGetRowProps = React.useRef(); @@ -498,6 +504,13 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { return -1; }, [cellFocus, currentPage.rows]); + useGridApiEventHandler(apiRef, 'rowMouseEnter', (params) => { + setHoveredRowId(params.id ?? null); + }); + useGridApiEventHandler(apiRef, 'rowMouseLeave', () => { + setHoveredRowId(null); + }); + const getRows = ( params: { renderContext: GridRenderContext | null; @@ -704,6 +717,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { position={position} {...rowProps} {...rootRowProps} + hovered={hoveredRowId === id} style={rowStyleCache.current[id]} />, ); From b9fe5c1e53f6f2b485cc372736a437dc00144fa4 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Fri, 22 Sep 2023 10:33:11 +0200 Subject: [PATCH 005/262] [core] Upgrade monorepo (#10425) --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index 643db0b9e8dd4..d866c1c44c456 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1852,8 +1852,8 @@ react-transition-group "^4.4.5" "@mui/monorepo@https://github.com/mui/material-ui.git#master": - version "5.14.5" - resolved "https://github.com/mui/material-ui.git#93b3f9ccf16df63450dcdba127ef73e4c734abd4" + version "5.14.10" + resolved "https://github.com/mui/material-ui.git#f1401844507519e09814bf8ea3ac338ec8011044" "@mui/private-theming@^5.14.7", "@mui/private-theming@^5.14.8": version "5.14.8" From 0666b407f5748a30bde491660e2060f41fa076f2 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Fri, 22 Sep 2023 12:24:39 +0200 Subject: [PATCH 006/262] [test] Name test suites according to sentence case (#10429) Co-authored-by: Lukas --- .../x-data-grid-premium/src/tests/DataGridPremium.test.tsx | 2 +- .../src/tests/aggregation.DataGridPremium.test.tsx | 4 ++-- .../src/tests/rowGrouping.DataGridPremium.test.tsx | 2 +- .../src/tests/statePersistence.DataGridPremium.test.tsx | 2 +- .../src/tests/cellEditing.DataGridPro.test.tsx | 2 +- .../src/tests/columnHeaders.DataGridPro.test.tsx | 2 +- .../src/tests/columnSpanning.DataGridPro.test.tsx | 2 +- .../src/tests/columnsVisibility.DataGridPro.test.tsx | 2 +- .../src/tests/editComponents.DataGridPro.test.tsx | 2 +- .../x-data-grid-pro/src/tests/events.DataGridPro.test.tsx | 2 +- .../x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx | 2 +- .../src/tests/rowSelection.DataGridPro.test.tsx | 2 +- .../src/tests/statePersistence.DataGridPro.test.tsx | 2 +- .../x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx | 2 +- .../x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx | 4 ++-- .../x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx | 2 +- .../x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx | 2 +- packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx | 2 +- .../x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx | 2 +- .../grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx | 2 +- 20 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/grid/x-data-grid-premium/src/tests/DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/DataGridPremium.test.tsx index 756e035038869..09521a4d2b075 100644 --- a/packages/grid/x-data-grid-premium/src/tests/DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/DataGridPremium.test.tsx @@ -12,7 +12,7 @@ import { getColumnValues } from 'test/utils/helperFn'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); -describe(' - Quick Filter', () => { +describe(' - Quick filter', () => { const { render } = createRenderer(); const baselineProps = { diff --git a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx index 3c64e8514fb3a..8b4d4509078ae 100644 --- a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx @@ -275,7 +275,7 @@ describe(' - Aggregation', () => { }); }); - describe('Tree Data', () => { + describe('Tree data', () => { function TreeDataTest(props: Omit) { return ( - Aggregation', () => { }); }); - describe('Column Menu', () => { + describe('Column menu', () => { it('should render select on aggregable column', () => { render(); diff --git a/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx index 2a03b49efffe2..74e7fce53bd93 100644 --- a/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx @@ -69,7 +69,7 @@ const baselineProps: DataGridPremiumProps = { ], }; -describe(' - Row Grouping', () => { +describe(' - Row grouping', () => { const { render, clock } = createRenderer(); let apiRef: React.MutableRefObject; diff --git a/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx index 7567a7a2c35ae..497722909eb62 100644 --- a/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx @@ -47,7 +47,7 @@ const FULL_INITIAL_STATE: GridInitialState = { }, }; -describe(' - State Persistence', () => { +describe(' - State persistence', () => { const { render } = createRenderer(); let apiRef: React.MutableRefObject; diff --git a/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx index 5336b9e2f83e1..3edf22299bf87 100644 --- a/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx @@ -16,7 +16,7 @@ import { getBasicGridData } from '@mui/x-data-grid-generator'; import { createRenderer, fireEvent, act, userEvent } from '@mui/monorepo/test/utils'; import { getCell, spyApi } from 'test/utils/helperFn'; -describe(' - Cell Editing', () => { +describe(' - Cell editing', () => { const { render, clock } = createRenderer({ clock: 'fake' }); let apiRef: React.MutableRefObject; diff --git a/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx index d40189b6e4924..30b10d39465e1 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx @@ -6,7 +6,7 @@ import { getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); -describe(' - Column Headers', () => { +describe(' - Column headers', () => { const { render, clock } = createRenderer({ clock: 'fake' }); const baselineProps = { diff --git a/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx index e9454dca917f3..ad4632ec1b072 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx @@ -6,7 +6,7 @@ import { getActiveCell, getCell, getColumnHeaderCell } from 'test/utils/helperFn const isJSDOM = /jsdom/.test(window.navigator.userAgent); -describe(' - Column Spanning', () => { +describe(' - Column spanning', () => { const { render } = createRenderer({ clock: 'fake' }); const baselineProps = { diff --git a/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx index 824cdbe06c807..48c90c678a341 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx @@ -21,7 +21,7 @@ const rows: GridRowsProp = [{ id: 1 }]; const columns: GridColDef[] = [{ field: 'id' }, { field: 'idBis' }]; -describe(' - Columns Visibility', () => { +describe(' - Columns visibility', () => { const { render } = createRenderer({ clock: 'fake' }); let apiRef: React.MutableRefObject; diff --git a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx index 62b77df7e944c..f2cac621b16e1 100644 --- a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx @@ -37,7 +37,7 @@ const generateDate = ( return rawDate.getTime(); }; -describe(' - Edit Components', () => { +describe(' - Edit components', () => { const { render, clock } = createRenderer({ clock: 'fake' }); let apiRef: React.MutableRefObject; diff --git a/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx index 9190215e67b51..83e4b6ae985dd 100644 --- a/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx @@ -20,7 +20,7 @@ import { spy } from 'sinon'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); -describe(' - Events Params', () => { +describe(' - Events params', () => { const { render, clock } = createRenderer(); const baselineProps: { rows: GridRowsProp; columns: GridColDef[] } = { diff --git a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx index dbd563bbc9f63..7e8a2b7f28d02 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx @@ -16,7 +16,7 @@ import { getBasicGridData } from '@mui/x-data-grid-generator'; import { createRenderer, fireEvent, act, userEvent, screen } from '@mui/monorepo/test/utils'; import { getCell, getRow, spyApi } from 'test/utils/helperFn'; -describe(' - Row Editing', () => { +describe(' - Row editing', () => { const { render, clock } = createRenderer(); let apiRef: React.MutableRefObject; diff --git a/packages/grid/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx index 0defbac668e35..ed04365c0cf86 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx @@ -23,7 +23,7 @@ function getSelectedRowIds() { ); } -describe(' - Row Selection', () => { +describe(' - Row selection', () => { const { render } = createRenderer(); let apiRef: React.MutableRefObject; diff --git a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx index a039498fff72b..737a83f810b59 100644 --- a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx @@ -79,7 +79,7 @@ const FULL_INITIAL_STATE: GridInitialState = { }, }; -describe(' - State Persistence', () => { +describe(' - State persistence', () => { const { render, clock } = createRenderer({ clock: 'fake' }); let apiRef: React.MutableRefObject; diff --git a/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx index f83c86ef62d7e..8b206fc602293 100644 --- a/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx @@ -56,7 +56,7 @@ const baselineProps: DataGridProProps = { getRowId: (row) => row.name, }; -describe(' - Tree Data', () => { +describe(' - Tree data', () => { const { render, clock } = createRenderer({ clock: 'fake' }); let apiRef: React.MutableRefObject; diff --git a/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx index ac6f38480252d..c8e01b7bd0418 100644 --- a/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx @@ -6,7 +6,7 @@ import { getColumnHeaderCell, getColumnHeadersTextContent } from 'test/utils/hel const isJSDOM = /jsdom/.test(window.navigator.userAgent); -describe(' - Column Headers', () => { +describe(' - Column headers', () => { const { render, clock } = createRenderer({ clock: 'fake' }); const baselineProps = { @@ -50,7 +50,7 @@ describe(' - Column Headers', () => { }); }); - describe('Column Menu', () => { + describe('Column menu', () => { it('should allow to hide column', () => { render(
diff --git a/packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx index 449c975019c0a..cb28bda8cdf20 100644 --- a/packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx @@ -6,7 +6,7 @@ import { getCell, getActiveCell, getColumnHeaderCell } from 'test/utils/helperFn const isJSDOM = /jsdom/.test(window.navigator.userAgent); -describe(' - Column Spanning', () => { +describe(' - Column spanning', () => { const { render, clock } = createRenderer({ clock: 'fake' }); const baselineProps = { diff --git a/packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx index a95ee66420f0e..e932220f46482 100644 --- a/packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx @@ -11,7 +11,7 @@ const rows: GridRowsProp = [{ id: 1, idBis: 1 }]; const columns: GridColDef[] = [{ field: 'id' }, { field: 'idBis' }]; -describe(' - Columns Visibility', () => { +describe(' - Columns visibility', () => { const { render } = createRenderer(); function TestDataGrid( diff --git a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx index af9a37c187e1f..a4ea76ef2107e 100644 --- a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx @@ -14,7 +14,7 @@ import { useBasicDemoData } from '@mui/x-data-grid-generator'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import { getColumnHeaderCell, getColumnValues, getCell, getRow, sleep } from 'test/utils/helperFn'; -describe(' - Layout & Warnings', () => { +describe(' - Layout & warnings', () => { const { clock, render } = createRenderer(); const baselineProps = { diff --git a/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx index 0cb32dc3c6b85..95c1d4002571d 100644 --- a/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx @@ -14,7 +14,7 @@ import { getColumnValues, sleep } from 'test/utils/helperFn'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); -describe(' - Quick Filter', () => { +describe(' - Quick filter', () => { const { render, clock } = createRenderer(); const baselineProps = { diff --git a/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx index f24c7f694e12e..405fb351a60ae 100644 --- a/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx @@ -34,7 +34,7 @@ function getSelectedRowIds() { ); } -describe(' - Row Selection', () => { +describe(' - Row selection', () => { const { render, clock } = createRenderer(); const defaultData = getBasicGridData(4, 2); From c0796c5d5aa747bb76da479bcf79c87813d1f76b Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Fri, 22 Sep 2023 10:43:19 -0400 Subject: [PATCH 007/262] [DataGridPro] Autosize columns (#10180) Signed-off-by: Rom Grk Co-authored-by: Olivier Tassinari --- .../column-dimensions/ColumnAutosizing.js | 129 ++++++ .../column-dimensions/ColumnAutosizing.tsx | 132 ++++++ .../column-dimensions/column-dimensions.md | 39 ++ .../getting-started/getting-started.md | 1 + .../x/api/data-grid/data-grid-premium.json | 8 + docs/pages/x/api/data-grid/data-grid-pro.json | 8 + docs/pages/x/api/data-grid/grid-api.md | 3 + .../api/data-grid/grid-column-resize-api.json | 11 + .../data-grid/grid-virtualization-api.json | 16 + docs/pages/x/api/data-grid/selectors.json | 21 + .../api/buildInterfacesDocumentation.ts | 23 +- .../api-docs/data-grid/data-grid-premium.json | 15 + .../api-docs/data-grid/data-grid-pro.json | 15 + .../src/DataGridPremium/DataGridPremium.tsx | 20 + .../useDataGridPremiumComponent.tsx | 151 +++---- .../src/models/gridApiPremium.ts | 5 +- .../src/DataGridPro/DataGridPro.tsx | 20 + .../DataGridPro/useDataGridProComponent.tsx | 4 + .../src/DataGridPro/useDataGridProProps.ts | 2 + .../columnResize/gridColumnResizeApi.ts | 47 +++ .../src/hooks/features/columnResize/index.ts | 1 + .../columnResize/useGridColumnResize.tsx | 399 ++++++++++++++---- .../src/models/dataGridProProps.ts | 15 + .../x-data-grid-pro/src/models/gridApiPro.ts | 5 +- .../grid/x-data-grid-pro/src/models/index.ts | 1 + .../src/tests/columns.DataGridPro.test.tsx | 88 +++- .../x-data-grid-pro/src/utils/domUtils.ts | 15 + .../src/DataGrid/useDataGridComponent.tsx | 86 ++-- .../components/DataGridVirtualScroller.tsx | 42 +- .../src/components/base/GridBody.tsx | 27 -- .../columnHeaders/GridColumnHeaderItem.tsx | 5 +- .../columnHeaders/useGridColumnHeaders.tsx | 33 +- .../features/export/useGridPrintExport.tsx | 4 +- .../x-data-grid/src/hooks/features/index.ts | 1 + .../gridVirtualizationSelectors.ts | 26 ++ .../hooks/features/virtualization/index.ts | 2 + .../virtualization/useGridVirtualScroller.tsx | 89 ++-- .../virtualization/useGridVirtualization.tsx | 70 +++ .../grid/x-data-grid/src/internals/index.ts | 4 + .../src/models/api/gridApiCommon.ts | 9 +- .../api/gridDisableVirtualizationApi.ts | 15 - .../src/models/api/gridVirtualScrollerApi.ts | 9 - .../src/models/api/gridVirtualizationApi.ts | 22 + .../grid/x-data-grid/src/models/api/index.ts | 3 +- .../src/models/events/gridEventLookup.ts | 8 + .../src/models/gridStateCommunity.ts | 2 + .../src/utils/createControllablePromise.ts | 16 + scripts/x-data-grid-premium.exports.json | 15 +- scripts/x-data-grid-pro.exports.json | 15 +- scripts/x-data-grid.exports.json | 10 +- test/utils/helperFn.ts | 2 +- 51 files changed, 1358 insertions(+), 351 deletions(-) create mode 100644 docs/data/data-grid/column-dimensions/ColumnAutosizing.js create mode 100644 docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx create mode 100644 docs/pages/x/api/data-grid/grid-column-resize-api.json create mode 100644 docs/pages/x/api/data-grid/grid-virtualization-api.json create mode 100644 packages/grid/x-data-grid-pro/src/hooks/features/columnResize/gridColumnResizeApi.ts create mode 100644 packages/grid/x-data-grid/src/hooks/features/virtualization/gridVirtualizationSelectors.ts create mode 100644 packages/grid/x-data-grid/src/hooks/features/virtualization/index.ts create mode 100644 packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx delete mode 100644 packages/grid/x-data-grid/src/models/api/gridDisableVirtualizationApi.ts delete mode 100644 packages/grid/x-data-grid/src/models/api/gridVirtualScrollerApi.ts create mode 100644 packages/grid/x-data-grid/src/models/api/gridVirtualizationApi.ts create mode 100644 packages/grid/x-data-grid/src/utils/createControllablePromise.ts diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizing.js b/docs/data/data-grid/column-dimensions/ColumnAutosizing.js new file mode 100644 index 0000000000000..1743b754eccc1 --- /dev/null +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizing.js @@ -0,0 +1,129 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import Checkbox from '@mui/material/Checkbox'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Rating from '@mui/material/Rating'; +import Stack from '@mui/material/Stack'; +import TextField from '@mui/material/TextField'; +import { useGridApiRef } from '@mui/x-data-grid'; +import { DataGridPro, DEFAULT_GRID_AUTOSIZE_OPTIONS } from '@mui/x-data-grid-pro'; +import { randomRating, randomTraderName } from '@mui/x-data-grid-generator'; + +function renderRating(params) { + return ; +} + +function useData(length) { + return React.useMemo(() => { + const names = [ + 'Nike', + 'Adidas', + 'Puma', + 'Reebok', + 'Fila', + 'Lululemon Athletica Clothing', + 'Varley', + ]; + + const rows = Array.from({ length }).map((_, id) => ({ + id, + brand: names[id % names.length], + rep: randomTraderName(), + rating: randomRating(), + })); + + const columns = [ + { field: 'id', headerName: 'Brand ID' }, + { field: 'brand', headerName: 'Brand name' }, + { field: 'rep', headerName: 'Representative' }, + { field: 'rating', headerName: 'Rating', renderCell: renderRating }, + ]; + + return { rows, columns }; + }, [length]); +} + +export default function ColumnAutosizing() { + const apiRef = useGridApiRef(); + const data = useData(100); + + const [includeHeaders, setIncludeHeaders] = React.useState( + DEFAULT_GRID_AUTOSIZE_OPTIONS.includeHeaders, + ); + const [includeOutliers, setExcludeOutliers] = React.useState( + DEFAULT_GRID_AUTOSIZE_OPTIONS.includeOutliers, + ); + const [outliersFactor, setOutliersFactor] = React.useState( + String(DEFAULT_GRID_AUTOSIZE_OPTIONS.outliersFactor), + ); + const [expand, setExpand] = React.useState(DEFAULT_GRID_AUTOSIZE_OPTIONS.expand); + + const autosizeOptions = { + includeHeaders, + includeOutliers, + outliersFactor: Number.isNaN(parseFloat(outliersFactor)) + ? 1 + : parseFloat(outliersFactor), + expand, + }; + + return ( +
+ + + setIncludeHeaders(ev.target.checked)} + /> + } + label="Include headers" + /> + setExcludeOutliers(event.target.checked)} + /> + } + label="Include outliers" + /> + setOutliersFactor(ev.target.value)} + sx={{ width: '12ch' }} + /> + setExpand(ev.target.checked)} + /> + } + label="Expand" + /> + +
+ +
+
+ ); +} diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx new file mode 100644 index 0000000000000..066846d3406c2 --- /dev/null +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx @@ -0,0 +1,132 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import Checkbox from '@mui/material/Checkbox'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Rating from '@mui/material/Rating'; +import Stack from '@mui/material/Stack'; +import TextField from '@mui/material/TextField'; +import { useGridApiRef } from '@mui/x-data-grid'; +import { + DataGridPro, + GridApiPro, + DEFAULT_GRID_AUTOSIZE_OPTIONS, +} from '@mui/x-data-grid-pro'; +import { randomRating, randomTraderName } from '@mui/x-data-grid-generator'; + +function renderRating(params: any) { + return ; +} + +function useData(length: number) { + return React.useMemo(() => { + const names = [ + 'Nike', + 'Adidas', + 'Puma', + 'Reebok', + 'Fila', + 'Lululemon Athletica Clothing', + 'Varley', + ]; + const rows = Array.from({ length }).map((_, id) => ({ + id, + brand: names[id % names.length], + rep: randomTraderName(), + rating: randomRating(), + })); + + const columns = [ + { field: 'id', headerName: 'Brand ID' }, + { field: 'brand', headerName: 'Brand name' }, + { field: 'rep', headerName: 'Representative' }, + { field: 'rating', headerName: 'Rating', renderCell: renderRating }, + ]; + + return { rows, columns }; + }, [length]); +} + +export default function ColumnAutosizing() { + const apiRef = useGridApiRef(); + const data = useData(100); + + const [includeHeaders, setIncludeHeaders] = React.useState( + DEFAULT_GRID_AUTOSIZE_OPTIONS.includeHeaders, + ); + const [includeOutliers, setExcludeOutliers] = React.useState( + DEFAULT_GRID_AUTOSIZE_OPTIONS.includeOutliers, + ); + const [outliersFactor, setOutliersFactor] = React.useState( + String(DEFAULT_GRID_AUTOSIZE_OPTIONS.outliersFactor), + ); + const [expand, setExpand] = React.useState(DEFAULT_GRID_AUTOSIZE_OPTIONS.expand); + + const autosizeOptions = { + includeHeaders, + includeOutliers, + outliersFactor: Number.isNaN(parseFloat(outliersFactor)) + ? 1 + : parseFloat(outliersFactor), + expand, + }; + + return ( +
+ + + setIncludeHeaders(ev.target.checked)} + /> + } + label="Include headers" + /> + setExcludeOutliers(event.target.checked)} + /> + } + label="Include outliers" + /> + setOutliersFactor(ev.target.value)} + sx={{ width: '12ch' }} + /> + setExpand(ev.target.checked)} + /> + } + label="Expand" + /> + +
+ +
+
+ ); +} diff --git a/docs/data/data-grid/column-dimensions/column-dimensions.md b/docs/data/data-grid/column-dimensions/column-dimensions.md index bded63f3da53f..3a60bf30cbe9d 100644 --- a/docs/data/data-grid/column-dimensions/column-dimensions.md +++ b/docs/data/data-grid/column-dimensions/column-dimensions.md @@ -58,6 +58,45 @@ To capture changes in the width of a column there are two callbacks that are cal - `onColumnResize`: Called while a column is being resized. - `onColumnWidthChange`: Called after the width of a column is changed, but not during resizing. +## Autosizing [](/x/introduction/licensing/#pro-plan 'Pro plan') + +`DataGridPro` allows to autosize the columns' dimensions based on their content. Autosizing is enabled by default. To turn it off, pass the `disableAutosize` prop to the datagrid. + +Autosizing can be used by one of the following methods: + +- Adding the `autosizeOnMount` prop, +- Double-clicking a column header separator on the grid, +- Calling the `apiRef.current.autosizeColumns(options)` API method. + +You can pass options directly to the API method when you call it. To configure autosize for the other two methods, provide the options in the `autosizeOptions` prop. + +Note that for the separator double-click method, the `autosizeOptions.columns` will be replaced by the respective column user double-clicked on. + +In all the cases, the `colDef.minWidth` and `colDef.maxWidth` options will be respected. + +```tsx + +``` + +{{"demo": "ColumnAutosizing.js", "disableAd": true, "bg": "inline"}} + +:::warning +Autosizing has no effect if dynamic row height is enabled. +::: + +:::warning +The data grid can only autosize based on the currently rendered cells. + +DOM access is required to accurately calculate dimensions, so unmounted cells (when [virtualization](/x/react-data-grid/virtualization/) is on) cannot be sized. If you need a bigger row sample, [open an issue](https://github.com/mui/mui-x/issues) to discuss it further. +::: + ## API - [DataGrid](/x/api/data-grid/data-grid/) diff --git a/docs/data/data-grid/getting-started/getting-started.md b/docs/data/data-grid/getting-started/getting-started.md index 09b092da8d60f..1503de859a2df 100644 --- a/docs/data/data-grid/getting-started/getting-started.md +++ b/docs/data/data-grid/getting-started/getting-started.md @@ -178,6 +178,7 @@ The enterprise components come in two plans: Pro and Premium. | [Column groups](/x/react-data-grid/column-groups/) | ✅ | ✅ | ✅ | | [Column spanning](/x/react-data-grid/column-spanning/) | ✅ | ✅ | ✅ | | [Column resizing](/x/react-data-grid/column-dimensions/#resizing) | ❌ | ✅ | ✅ | +| [Column autosizing](/x/react-data-grid/column-dimensions/#autosizing) | ❌ | ✅ | ✅ | | [Column reorder](/x/react-data-grid/column-ordering/) | ❌ | ✅ | ✅ | | [Column pinning](/x/react-data-grid/column-pinning/) | ❌ | ✅ | ✅ | | **Row** | | | | 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 bdc26c3d9d287..214405c70d17f 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -22,6 +22,13 @@ "aria-labelledby": { "type": { "name": "string" } }, "autoHeight": { "type": { "name": "bool" } }, "autoPageSize": { "type": { "name": "bool" } }, + "autosizeOnMount": { "type": { "name": "bool" } }, + "autosizeOptions": { + "type": { + "name": "shape", + "description": "{ columns?: Array<string>, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }" + } + }, "cellModesModel": { "type": { "name": "object" } }, "checkboxSelection": { "type": { "name": "bool" } }, "checkboxSelectionVisibleOnly": { @@ -56,6 +63,7 @@ "type": { "name": "arrayOf", "description": "Array<number
| string>" } }, "disableAggregation": { "type": { "name": "bool" } }, + "disableAutosize": { "type": { "name": "bool" } }, "disableChildrenFiltering": { "type": { "name": "bool" } }, "disableChildrenSorting": { "type": { "name": "bool" } }, "disableClipboardPaste": { "type": { "name": "bool" } }, 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 726b11be83007..ae3753d91c47f 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -13,6 +13,13 @@ "aria-labelledby": { "type": { "name": "string" } }, "autoHeight": { "type": { "name": "bool" } }, "autoPageSize": { "type": { "name": "bool" } }, + "autosizeOnMount": { "type": { "name": "bool" } }, + "autosizeOptions": { + "type": { + "name": "shape", + "description": "{ columns?: Array<string>, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }" + } + }, "cellModesModel": { "type": { "name": "object" } }, "checkboxSelection": { "type": { "name": "bool" } }, "checkboxSelectionVisibleOnly": { @@ -46,6 +53,7 @@ "detailPanelExpandedRowIds": { "type": { "name": "arrayOf", "description": "Array<number
| string>" } }, + "disableAutosize": { "type": { "name": "bool" } }, "disableChildrenFiltering": { "type": { "name": "bool" } }, "disableChildrenSorting": { "type": { "name": "bool" } }, "disableColumnFilter": { "type": { "name": "bool" } }, diff --git a/docs/pages/x/api/data-grid/grid-api.md b/docs/pages/x/api/data-grid/grid-api.md index fd398b891abd1..d7c967eb00f73 100644 --- a/docs/pages/x/api/data-grid/grid-api.md +++ b/docs/pages/x/api/data-grid/grid-api.md @@ -27,6 +27,7 @@ import { GridApi } from '@mui/x-data-grid'; | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | addRowGroupingCriteria [](/x/introduction/licensing/#premium-plan) | (groupingCriteriaField: string, groupingIndex?: number) => void | Adds the field to the row grouping model. | | applySorting | () => void | Applies the current sort model to the rows. | +| autosizeColumns [](/x/introduction/licensing/#pro-plan) | (options?: GridAutosizeOptions) => Promise<void> | Auto-size the columns of the grid based on the cells' content and the space available. | | deleteFilterItem | (item: GridFilterItem) => void | Deletes a [GridFilterItem](/x/api/data-grid/grid-filter-item/). | | exportDataAsCsv | (options?: GridCsvExportOptions) => void | Downloads and exports a CSV of the grid's data. | | exportDataAsExcel [](/x/introduction/licensing/#premium-plan) | (options?: GridExcelExportOptions) => Promise<void> | Downloads and exports an Excel file of the grid's data. | @@ -137,7 +138,9 @@ import { GridApi } from '@mui/x-data-grid'; | unstable_replaceRows | (firstRowToReplace: number, newRows: GridRowModel[]) => void | Replace a set of rows with new rows. | | unstable_selectCellRange [](/x/introduction/licensing/#premium-plan) | (start: GridCellCoordinates, end: GridCellCoordinates, keepOtherSelected?: boolean) => void | Selects all cells that are inside the range given by `start` and `end` coordinates. | | unstable_setCellSelectionModel [](/x/introduction/licensing/#premium-plan) | (newModel: GridCellSelectionModel) => void | Updates the selected cells to be those passed to the `newModel` argument.
Any cell already selected will be unselected. | +| unstable_setColumnVirtualization | (enabled: boolean) => void | Enable/disable column virtualization. | | unstable_setPinnedRows [](/x/introduction/licensing/#pro-plan) | (pinnedRows?: GridPinnedRowsProp) => void | Changes the pinned rows. | +| unstable_setVirtualization | (enabled: boolean) => void | Enable/disable virtualization. | | updateColumns | (cols: GridColDef[]) => void | Updates the definition of multiple columns at the same time. | | updateRows | (updates: GridRowModelUpdate[]) => void | Allows to update, insert and delete rows. | | upsertFilterItem | (item: GridFilterItem) => void | Updates or inserts a [GridFilterItem](/x/api/data-grid/grid-filter-item/). | diff --git a/docs/pages/x/api/data-grid/grid-column-resize-api.json b/docs/pages/x/api/data-grid/grid-column-resize-api.json new file mode 100644 index 0000000000000..50378d4b2d1a4 --- /dev/null +++ b/docs/pages/x/api/data-grid/grid-column-resize-api.json @@ -0,0 +1,11 @@ +{ + "name": "GridColumnResizeApi", + "description": "The Resize API interface that is available in the grid `apiRef`.", + "properties": [ + { + "name": "autosizeColumns", + "description": "Auto-size the columns of the grid based on the cells' content and the space available.", + "type": "(options?: GridAutosizeOptions) => Promise" + } + ] +} diff --git a/docs/pages/x/api/data-grid/grid-virtualization-api.json b/docs/pages/x/api/data-grid/grid-virtualization-api.json new file mode 100644 index 0000000000000..d295357e4397a --- /dev/null +++ b/docs/pages/x/api/data-grid/grid-virtualization-api.json @@ -0,0 +1,16 @@ +{ + "name": "GridVirtualizationApi", + "description": "", + "properties": [ + { + "name": "unstable_setColumnVirtualization", + "description": "Enable/disable column virtualization.", + "type": "(enabled: boolean) => void" + }, + { + "name": "unstable_setVirtualization", + "description": "Enable/disable virtualization.", + "type": "(enabled: boolean) => void" + } + ] +} diff --git a/docs/pages/x/api/data-grid/selectors.json b/docs/pages/x/api/data-grid/selectors.json index 418ad2366f6bc..ed03b0af5172a 100644 --- a/docs/pages/x/api/data-grid/selectors.json +++ b/docs/pages/x/api/data-grid/selectors.json @@ -424,6 +424,27 @@ "description": "", "supportsApiRef": true }, + { + "name": "gridVirtualizationColumnEnabledSelector", + "returnType": "boolean", + "category": "Virtualization", + "description": "Get the enabled state for virtualization", + "supportsApiRef": true + }, + { + "name": "gridVirtualizationEnabledSelector", + "returnType": "boolean", + "category": "Virtualization", + "description": "Get the enabled state for virtualization", + "supportsApiRef": true + }, + { + "name": "gridVirtualizationSelector", + "returnType": "GridVirtualizationState", + "category": "Virtualization", + "description": "Get the columns state", + "supportsApiRef": false + }, { "name": "gridVisibleColumnDefinitionsSelector", "returnType": "GridStateColDef[]", diff --git a/docs/scripts/api/buildInterfacesDocumentation.ts b/docs/scripts/api/buildInterfacesDocumentation.ts index e9345308365e8..48b578dfda536 100644 --- a/docs/scripts/api/buildInterfacesDocumentation.ts +++ b/docs/scripts/api/buildInterfacesDocumentation.ts @@ -40,21 +40,22 @@ interface ParsedProperty { } const GRID_API_INTERFACES_WITH_DEDICATED_PAGES = [ - 'GridRowSelectionApi', - 'GridRowMultiSelectionApi', 'GridCellSelectionApi', - 'GridFilterApi', - 'GridSortApi', - 'GridPaginationApi', - 'GridCsvExportApi', - 'GridScrollApi', - 'GridEditingApi', - 'GridRowGroupingApi', 'GridColumnPinningApi', + 'GridColumnResizeApi', + 'GridCsvExportApi', 'GridDetailPanelApi', - 'GridPrintExportApi', - 'GridDisableVirtualizationApi', + 'GridEditingApi', 'GridExcelExportApi', + 'GridFilterApi', + 'GridPaginationApi', + 'GridPrintExportApi', + 'GridRowGroupingApi', + 'GridRowMultiSelectionApi', + 'GridRowSelectionApi', + 'GridScrollApi', + 'GridSortApi', + 'GridVirtualizationApi', ]; const OTHER_GRID_INTERFACES_WITH_DEDICATED_PAGES = [ diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json index 6777cb6c53e5a..56c0232c3a532 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -41,6 +41,16 @@ "deprecated": "", "typeDescriptions": {} }, + "autosizeOnMount": { + "description": "If true, columns are autosized after the datagrid is mounted.", + "deprecated": "", + "typeDescriptions": {} + }, + "autosizeOptions": { + "description": "The options for autosize when user-initiated.", + "deprecated": "", + "typeDescriptions": {} + }, "cellModesModel": { "description": "Controls the modes of the cells.", "deprecated": "", @@ -121,6 +131,11 @@ "deprecated": "", "typeDescriptions": {} }, + "disableAutosize": { + "description": "If true, column autosizing on header separator double-click is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, "disableChildrenFiltering": { "description": "If true, the filtering will only be applied to the top level rows when grouping rows with the treeData prop.", "deprecated": "", diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json index 141f12c38f150..00bf251a86214 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -26,6 +26,16 @@ "deprecated": "", "typeDescriptions": {} }, + "autosizeOnMount": { + "description": "If true, columns are autosized after the datagrid is mounted.", + "deprecated": "", + "typeDescriptions": {} + }, + "autosizeOptions": { + "description": "The options for autosize when user-initiated.", + "deprecated": "", + "typeDescriptions": {} + }, "cellModesModel": { "description": "Controls the modes of the cells.", "deprecated": "", @@ -101,6 +111,11 @@ "deprecated": "", "typeDescriptions": {} }, + "disableAutosize": { + "description": "If true, column autosizing on header separator double-click is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, "disableChildrenFiltering": { "description": "If true, the filtering will only be applied to the top level rows when grouping rows with the treeData prop.", "deprecated": "", diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index 0357715bb15ce..95bb964b8d390 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -107,6 +107,21 @@ DataGridPremiumRaw.propTypes = { * @default false */ autoPageSize: PropTypes.bool, + /** + * If `true`, columns are autosized after the datagrid is mounted. + * @default false + */ + autosizeOnMount: PropTypes.bool, + /** + * The options for autosize when user-initiated. + */ + autosizeOptions: PropTypes.shape({ + columns: PropTypes.arrayOf(PropTypes.string), + expand: PropTypes.bool, + includeHeaders: PropTypes.bool, + includeOutliers: PropTypes.bool, + outliersFactor: PropTypes.number, + }), /** * Controls the modes of the cells. */ @@ -195,6 +210,11 @@ DataGridPremiumRaw.propTypes = { * @default false */ disableAggregation: PropTypes.bool, + /** + * If `true`, column autosizing on header separator double-click is disabled. + * @default false + */ + disableAutosize: PropTypes.bool, /** * If `true`, the filtering will only be applied to the top level rows when grouping rows with the `treeData` prop. * @default false diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx index 4da70394a3142..aaca7bff91acb 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx @@ -62,6 +62,8 @@ import { useGridLazyLoaderPreProcessors, headerFilteringStateInitializer, useGridHeaderFiltering, + virtualizationStateInitializer, + useGridVirtualization, } from '@mui/x-data-grid-pro/internals'; import { GridApiPremium, GridPrivateApiPremium } from '../models/gridApiPremium'; import { DataGridPremiumProcessedProps } from '../models/dataGridPremiumProps'; @@ -87,91 +89,90 @@ export const useDataGridPremiumComponent = ( inputApiRef: React.MutableRefObject | undefined, props: DataGridPremiumProcessedProps, ) => { - const privateApiRef = useGridInitialization( - inputApiRef, - props, - ); + const apiRef = useGridInitialization(inputApiRef, props); /** * Register all pre-processors called during state initialization here. */ - useGridRowSelectionPreProcessors(privateApiRef, props); - useGridRowReorderPreProcessors(privateApiRef, props); - useGridRowGroupingPreProcessors(privateApiRef, props); - useGridTreeDataPreProcessors(privateApiRef, props); - useGridLazyLoaderPreProcessors(privateApiRef, props); - useGridRowPinningPreProcessors(privateApiRef); - useGridAggregationPreProcessors(privateApiRef, props); - useGridDetailPanelPreProcessors(privateApiRef, props); + useGridRowSelectionPreProcessors(apiRef, props); + useGridRowReorderPreProcessors(apiRef, props); + useGridRowGroupingPreProcessors(apiRef, props); + useGridTreeDataPreProcessors(apiRef, props); + useGridLazyLoaderPreProcessors(apiRef, props); + useGridRowPinningPreProcessors(apiRef); + useGridAggregationPreProcessors(apiRef, props); + useGridDetailPanelPreProcessors(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors // Because it changes the order of the columns. - useGridColumnPinningPreProcessors(privateApiRef, props); - useGridRowsPreProcessors(privateApiRef); + useGridColumnPinningPreProcessors(apiRef, props); + useGridRowsPreProcessors(apiRef); /** * Register all state initializers here. */ - useGridInitializeState(headerFilteringStateInitializer, privateApiRef, props); - useGridInitializeState(rowGroupingStateInitializer, privateApiRef, props); - useGridInitializeState(aggregationStateInitializer, privateApiRef, props); - useGridInitializeState(rowSelectionStateInitializer, privateApiRef, props); - useGridInitializeState(cellSelectionStateInitializer, privateApiRef, props); - useGridInitializeState(detailPanelStateInitializer, privateApiRef, props); - useGridInitializeState(columnPinningStateInitializer, privateApiRef, props); - useGridInitializeState(columnsStateInitializer, privateApiRef, props); - useGridInitializeState(rowPinningStateInitializer, privateApiRef, props); - useGridInitializeState(rowsStateInitializer, privateApiRef, props); - useGridInitializeState(editingStateInitializer, privateApiRef, props); - useGridInitializeState(focusStateInitializer, privateApiRef, props); - useGridInitializeState(sortingStateInitializer, privateApiRef, props); - useGridInitializeState(preferencePanelStateInitializer, privateApiRef, props); - useGridInitializeState(filterStateInitializer, privateApiRef, props); - useGridInitializeState(densityStateInitializer, privateApiRef, props); - useGridInitializeState(columnReorderStateInitializer, privateApiRef, props); - useGridInitializeState(columnResizeStateInitializer, privateApiRef, props); - useGridInitializeState(paginationStateInitializer, privateApiRef, props); - useGridInitializeState(rowsMetaStateInitializer, privateApiRef, props); - useGridInitializeState(columnMenuStateInitializer, privateApiRef, props); - useGridInitializeState(columnGroupsStateInitializer, privateApiRef, props); + useGridInitializeState(headerFilteringStateInitializer, apiRef, props); + useGridInitializeState(rowGroupingStateInitializer, apiRef, props); + useGridInitializeState(aggregationStateInitializer, apiRef, props); + useGridInitializeState(rowSelectionStateInitializer, apiRef, props); + useGridInitializeState(cellSelectionStateInitializer, apiRef, props); + useGridInitializeState(detailPanelStateInitializer, apiRef, props); + useGridInitializeState(columnPinningStateInitializer, apiRef, props); + useGridInitializeState(columnsStateInitializer, apiRef, props); + useGridInitializeState(rowPinningStateInitializer, apiRef, props); + useGridInitializeState(rowsStateInitializer, apiRef, props); + useGridInitializeState(editingStateInitializer, apiRef, props); + useGridInitializeState(focusStateInitializer, apiRef, props); + useGridInitializeState(sortingStateInitializer, apiRef, props); + useGridInitializeState(preferencePanelStateInitializer, apiRef, props); + useGridInitializeState(filterStateInitializer, apiRef, props); + useGridInitializeState(densityStateInitializer, apiRef, props); + useGridInitializeState(columnReorderStateInitializer, apiRef, props); + useGridInitializeState(columnResizeStateInitializer, apiRef, props); + useGridInitializeState(paginationStateInitializer, apiRef, props); + useGridInitializeState(rowsMetaStateInitializer, apiRef, props); + useGridInitializeState(columnMenuStateInitializer, apiRef, props); + useGridInitializeState(columnGroupsStateInitializer, apiRef, props); + useGridInitializeState(virtualizationStateInitializer, apiRef, props); - useGridRowGrouping(privateApiRef, props); - useGridHeaderFiltering(privateApiRef, props); - useGridTreeData(privateApiRef); - useGridAggregation(privateApiRef, props); - useGridKeyboardNavigation(privateApiRef, props); - useGridRowSelection(privateApiRef, props); - useGridCellSelection(privateApiRef, props); - useGridColumnPinning(privateApiRef, props); - useGridRowPinning(privateApiRef, props); - useGridColumns(privateApiRef, props); - useGridRows(privateApiRef, props); - useGridParamsApi(privateApiRef, props); - useGridDetailPanel(privateApiRef, props); - useGridColumnSpanning(privateApiRef); - useGridColumnGrouping(privateApiRef, props); - useGridClipboardImport(privateApiRef, props); - useGridEditing(privateApiRef, props); - useGridFocus(privateApiRef, props); - useGridPreferencesPanel(privateApiRef, props); - useGridFilter(privateApiRef, props); - useGridSorting(privateApiRef, props); - useGridDensity(privateApiRef, props); - useGridColumnReorder(privateApiRef, props); - useGridColumnResize(privateApiRef, props); - useGridPagination(privateApiRef, props); - useGridRowsMeta(privateApiRef, props); - useGridRowReorder(privateApiRef, props); - useGridScroll(privateApiRef, props); - useGridInfiniteLoader(privateApiRef, props); - useGridLazyLoader(privateApiRef, props); - useGridColumnMenu(privateApiRef); - useGridCsvExport(privateApiRef, props); - useGridPrintExport(privateApiRef, props); - useGridExcelExport(privateApiRef, props); - useGridClipboard(privateApiRef, props); - useGridDimensions(privateApiRef, props); - useGridEvents(privateApiRef, props); - useGridStatePersistence(privateApiRef); + useGridRowGrouping(apiRef, props); + useGridHeaderFiltering(apiRef, props); + useGridTreeData(apiRef); + useGridAggregation(apiRef, props); + useGridKeyboardNavigation(apiRef, props); + useGridRowSelection(apiRef, props); + useGridCellSelection(apiRef, props); + useGridColumnPinning(apiRef, props); + useGridRowPinning(apiRef, props); + useGridColumns(apiRef, props); + useGridRows(apiRef, props); + useGridParamsApi(apiRef, props); + useGridDetailPanel(apiRef, props); + useGridColumnSpanning(apiRef); + useGridColumnGrouping(apiRef, props); + useGridClipboardImport(apiRef, props); + useGridEditing(apiRef, props); + useGridFocus(apiRef, props); + useGridPreferencesPanel(apiRef, props); + useGridFilter(apiRef, props); + useGridSorting(apiRef, props); + useGridDensity(apiRef, props); + useGridColumnReorder(apiRef, props); + useGridColumnResize(apiRef, props); + useGridPagination(apiRef, props); + useGridRowsMeta(apiRef, props); + useGridRowReorder(apiRef, props); + useGridScroll(apiRef, props); + useGridInfiniteLoader(apiRef, props); + useGridLazyLoader(apiRef, props); + useGridColumnMenu(apiRef); + useGridCsvExport(apiRef, props); + useGridPrintExport(apiRef, props); + useGridExcelExport(apiRef, props); + useGridClipboard(apiRef, props); + useGridDimensions(apiRef, props); + useGridEvents(apiRef, props); + useGridStatePersistence(apiRef); + useGridVirtualization(apiRef, props); - return privateApiRef; + return apiRef; }; diff --git a/packages/grid/x-data-grid-premium/src/models/gridApiPremium.ts b/packages/grid/x-data-grid-premium/src/models/gridApiPremium.ts index 3577b6ca9c3bd..c28b36e4dd19c 100644 --- a/packages/grid/x-data-grid-premium/src/models/gridApiPremium.ts +++ b/packages/grid/x-data-grid-premium/src/models/gridApiPremium.ts @@ -2,6 +2,7 @@ import { GridPrivateOnlyApiCommon } from '@mui/x-data-grid/internals'; import { GridApiCommon, GridColumnPinningApi, + GridColumnResizeApi, GridDetailPanelApi, GridDetailPanelPrivateApi, GridRowPinningApi, @@ -21,6 +22,7 @@ export interface GridApiPremium extends GridApiCommon, GridRowProApi, GridColumnPinningApi, + GridColumnResizeApi, GridDetailPanelApi, GridRowGroupingApi, GridExcelExportApi, @@ -29,8 +31,7 @@ export interface GridApiPremium GridCellSelectionApi, // APIs that are private in Community plan, but public in Pro and Premium plans GridRowMultiSelectionApi, - GridColumnReorderApi, - GridRowProApi {} + GridColumnReorderApi {} export interface GridPrivateApiPremium extends GridApiPremium, diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 0231d8bb4d41c..a4e53c48bdeca 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -90,6 +90,21 @@ DataGridProRaw.propTypes = { * @default false */ autoPageSize: PropTypes.bool, + /** + * If `true`, columns are autosized after the datagrid is mounted. + * @default false + */ + autosizeOnMount: PropTypes.bool, + /** + * The options for autosize when user-initiated. + */ + autosizeOptions: PropTypes.shape({ + columns: PropTypes.arrayOf(PropTypes.string), + expand: PropTypes.bool, + includeHeaders: PropTypes.bool, + includeOutliers: PropTypes.bool, + outliersFactor: PropTypes.number, + }), /** * Controls the modes of the cells. */ @@ -173,6 +188,11 @@ DataGridProRaw.propTypes = { detailPanelExpandedRowIds: PropTypes.arrayOf( PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, ), + /** + * If `true`, column autosizing on header separator double-click is disabled. + * @default false + */ + disableAutosize: PropTypes.bool, /** * If `true`, the filtering will only be applied to the top level rows when grouping rows with the `treeData` prop. * @default false diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx index e9077e1996b1d..23220818d45aa 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx @@ -42,6 +42,8 @@ import { columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, + virtualizationStateInitializer, + useGridVirtualization, } from '@mui/x-data-grid/internals'; import { GridApiPro, GridPrivateApiPro } from '../models/gridApiPro'; import { DataGridProProcessedProps } from '../models/dataGridProProps'; @@ -119,6 +121,7 @@ export const useDataGridProComponent = ( useGridInitializeState(rowsMetaStateInitializer, apiRef, props); useGridInitializeState(columnMenuStateInitializer, apiRef, props); useGridInitializeState(columnGroupsStateInitializer, apiRef, props); + useGridInitializeState(virtualizationStateInitializer, apiRef, props); useGridHeaderFiltering(apiRef, props); useGridTreeData(apiRef); @@ -153,6 +156,7 @@ export const useDataGridProComponent = ( useGridDimensions(apiRef, props); useGridEvents(apiRef, props); useGridStatePersistence(apiRef); + useGridVirtualization(apiRef, props); return apiRef; }; diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts b/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts index 9c991e4f24d8d..eb8c0ab505db0 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts @@ -22,6 +22,8 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES: DataGridProPropsWithDefaultValu scrollEndThreshold: 80, treeData: false, defaultGroupingExpansionDepth: 0, + autosizeOnMount: false, + disableAutosize: false, disableColumnPinning: false, keepColumnPositionIfDraggedOutside: false, disableChildrenFiltering: false, diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/gridColumnResizeApi.ts b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/gridColumnResizeApi.ts new file mode 100644 index 0000000000000..c19883f4368aa --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/gridColumnResizeApi.ts @@ -0,0 +1,47 @@ +import { GridColDef } from '@mui/x-data-grid'; + +export const DEFAULT_GRID_AUTOSIZE_OPTIONS = { + includeHeaders: true, + includeOutliers: false, + outliersFactor: 1.5, + expand: false, +}; + +export type GridAutosizeOptions = { + /** + * The columns to autosize. By default, applies to all columns. + */ + columns?: GridColDef['field'][]; + /** + * If true, include the header widths in the calculation. + * @default false + */ + includeHeaders?: boolean; + /** + * If true, width outliers will be ignored. + * @default false + */ + includeOutliers?: boolean; + /** + * The IQR factor range to detect outliers. + * @default 1.5 + */ + outliersFactor?: number; + /** + * If the total width is less than the available width, expand columns to fill it. + * @default false + */ + expand?: boolean; +}; + +/** + * The Resize API interface that is available in the grid `apiRef`. + */ +export interface GridColumnResizeApi { + /** + * Auto-size the columns of the grid based on the cells' content and the space available. + * @param {GridAutosizeOptions} options The autosizing options + * @returns {Promise} A promise that resolves when autosizing is completed + */ + autosizeColumns: (options?: GridAutosizeOptions) => Promise; +} diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/index.ts b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/index.ts index f4105375e68ff..beb30a48691a6 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/index.ts +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/index.ts @@ -1,2 +1,3 @@ export * from './columnResizeSelector'; export * from './columnResizeState'; +export * from './gridColumnResizeApi'; diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index 93161721c049d..fdf34490bd9ae 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -11,14 +11,22 @@ import { GridColumnResizeParams, useGridApiEventHandler, useGridApiOptionHandler, + useGridApiMethod, useGridNativeEventListener, useGridLogger, + useGridSelector, + gridVirtualizationColumnEnabledSelector, } from '@mui/x-data-grid'; import { clamp, findParentElementFromClassName, - GridStateInitializer, + gridColumnsStateSelector, + useOnMount, + useTimeout, + createControllablePromise, + ControllablePromise, GridStateColDef, + GridStateInitializer, } from '@mui/x-data-grid/internals'; import { useTheme, Direction } from '@mui/material/styles'; import { @@ -26,9 +34,18 @@ import { getFieldFromHeaderElem, findHeaderElementFromField, findGroupHeaderElementsFromField, + findGridHeader, + findGridCells, } from '../../../utils/domUtils'; import { GridPrivateApiPro } from '../../../models/gridApiPro'; import { DataGridProProcessedProps } from '../../../models/dataGridProProps'; +import { + GridAutosizeOptions, + GridColumnResizeApi, + DEFAULT_GRID_AUTOSIZE_OPTIONS, +} from './gridColumnResizeApi'; + +type AutosizeOptionsRequired = Required; type ResizeDirection = keyof typeof GridColumnHeaderSeparatorSides; @@ -119,18 +136,139 @@ function getResizeDirection(element: HTMLElement, direction: Direction) { return side; } +function preventClick(event: MouseEvent) { + event.preventDefault(); + event.stopImmediatePropagation(); +} + +/** + * Checker that returns a promise that resolves when the column virtualization + * is disabled. + */ +function useColumnVirtualizationDisabled(apiRef: React.MutableRefObject) { + const promise = React.useRef(); + const selector = () => gridVirtualizationColumnEnabledSelector(apiRef); + const value = useGridSelector(apiRef, selector); + + React.useEffect(() => { + if (promise.current && value === false) { + promise.current.resolve(); + promise.current = undefined; + } + }); + + const asyncCheck = () => { + if (!promise.current) { + if (selector() === false) { + return Promise.resolve(); + } + promise.current = createControllablePromise(); + } + return promise.current; + }; + + return asyncCheck; +} + +/** + * Basic statistical outlier detection, checks if the value is `F * IQR` away from + * the Q1 and Q3 boundaries. IQR: interquartile range. + */ +function excludeOutliers(inputValues: number[], factor: number) { + if (inputValues.length < 4) { + return inputValues; + } + + const values = inputValues.slice(); + values.sort((a, b) => a - b); + + const q1 = values[Math.floor(values.length * 0.25)]; + const q3 = values[Math.floor(values.length * 0.75) - 1]; + const iqr = q3 - q1; + + // We make a small adjustment if `iqr < 5` for the cases where the IQR is + // very small (e.g. zero) due to very close by values in the input data. + // Otherwise, with an IQR of `0`, anything outside that would be considered + // an outlier, but it makes more sense visually to allow for this 5px variance + // rather than showing a cropped cell. + const deviation = iqr < 5 ? 5 : iqr * factor; + + return values.filter((v) => v > q1 - deviation && v < q3 + deviation); +} + +function extractColumnWidths( + apiRef: React.MutableRefObject, + options: AutosizeOptionsRequired, + columns: GridStateColDef[], +) { + const widthByField = {} as Record; + + columns.forEach((column) => { + const cells = findGridCells(apiRef.current, column.field); + + const widths = cells.map((cell) => { + const id = cell.parentElement!.getAttribute('data-id') ?? ''; + const hasAutoHeight = apiRef.current.rowHasAutoHeight(id); + if (hasAutoHeight) { + return (column as any).computedWidth ?? column.width; + } + const style = window.getComputedStyle(cell, null); + const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10); + const contentWidth = (cell.firstElementChild?.scrollWidth ?? -1) + 1; + return paddingWidth + contentWidth; + }); + + const filteredWidths = options.includeOutliers + ? widths + : excludeOutliers(widths, options.outliersFactor); + + if (options.includeHeaders) { + const header = findGridHeader(apiRef.current, column.field); + if (header) { + const title = header.querySelector(`.${gridClasses.columnHeaderTitle}`); + const content = header.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`)!; + const element = title ?? content; + + const style = window.getComputedStyle(header, null); + const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10); + const contentWidth = element.scrollWidth + 1; + const width = paddingWidth + contentWidth; + + filteredWidths.push(width); + } + } + + const hasColumnMin = column.minWidth !== -Infinity && column.minWidth !== undefined; + const hasColumnMax = column.maxWidth !== Infinity && column.maxWidth !== undefined; + + const min = hasColumnMin ? column.minWidth! : 0; + const max = hasColumnMax ? column.maxWidth! : Infinity; + const maxContent = filteredWidths.length === 0 ? 0 : Math.max(...filteredWidths); + + widthByField[column.field] = clamp(maxContent, min, max); + }); + + return widthByField; +} + export const columnResizeStateInitializer: GridStateInitializer = (state) => ({ ...state, columnResize: { resizingColumnField: '' }, }); - /** * @requires useGridColumns (method, event) * TODO: improve experience for last column */ export const useGridColumnResize = ( apiRef: React.MutableRefObject, - props: Pick, + props: Pick< + DataGridProProcessedProps, + | 'autosizeOptions' + | 'autosizeOnMount' + | 'disableAutosize' + | 'onColumnResize' + | 'onColumnWidthChange' + >, ) => { const logger = useGridLogger(apiRef, 'useGridColumnResize'); @@ -147,7 +285,7 @@ export const useGridColumnResize = ( const initialOffsetToSeparator = React.useRef(); const resizeDirection = React.useRef(); - const stopResizeEventTimeout = React.useRef(); + const stopResizeEventTimeout = useTimeout(); const touchId = React.useRef(); const updateWidth = (newWidth: number) => { @@ -201,8 +339,7 @@ export const useGridColumnResize = ( ); } - clearTimeout(stopResizeEventTimeout.current); - stopResizeEventTimeout.current = setTimeout(() => { + stopResizeEventTimeout.start(0, () => { apiRef.current.publishEvent('columnResizeStop', null, nativeEvent); }); }; @@ -234,66 +371,6 @@ export const useGridColumnResize = ( apiRef.current.publishEvent('columnResize', params, nativeEvent); }); - const handleColumnResizeMouseDown: GridEventListener<'columnSeparatorMouseDown'> = - useEventCallback(({ colDef }, event) => { - // Only handle left clicks - if (event.button !== 0) { - return; - } - - // Skip if the column isn't resizable - if (!event.currentTarget.classList.contains(gridClasses['columnSeparator--resizable'])) { - return; - } - - // Avoid text selection - event.preventDefault(); - - logger.debug(`Start Resize on col ${colDef.field}`); - apiRef.current.publishEvent('columnResizeStart', { field: colDef.field }, event); - - colDefRef.current = colDef as GridStateColDef; - colElementRef.current = - apiRef.current.columnHeadersContainerElementRef?.current!.querySelector( - `[data-field="${colDef.field}"]`, - )!; - - const headerFilterRowElement = apiRef.current.headerFiltersElementRef?.current; - - if (headerFilterRowElement) { - headerFilterElementRef.current = headerFilterRowElement.querySelector( - `[data-field="${colDef.field}"]`, - ) as HTMLDivElement; - } - - colGroupingElementRef.current = findGroupHeaderElementsFromField( - apiRef.current.columnHeadersContainerElementRef?.current!, - colDef.field, - ); - - colCellElementsRef.current = findGridCellElementsFromCol( - colElementRef.current, - apiRef.current, - ); - - const doc = ownerDocument(apiRef.current.rootElementRef!.current); - doc.body.style.cursor = 'col-resize'; - - resizeDirection.current = getResizeDirection(event.currentTarget, theme.direction); - - initialOffsetToSeparator.current = computeOffsetToSeparator( - event.clientX, - colElementRef.current!.getBoundingClientRect(), - resizeDirection.current, - ); - - doc.addEventListener('mousemove', handleResizeMouseMove); - doc.addEventListener('mouseup', handleResizeMouseUp); - - // Fixes https://github.com/mui/mui-x/issues/4777 - colElementRef.current.style.pointerEvents = 'none'; - }); - const handleTouchEnd = useEventCallback((nativeEvent: any) => { const finger = trackFinger(nativeEvent, touchId.current); @@ -395,6 +472,11 @@ export const useGridColumnResize = ( doc.removeEventListener('mouseup', handleResizeMouseUp); doc.removeEventListener('touchmove', handleTouchMove); doc.removeEventListener('touchend', handleTouchEnd); + // The click event runs right after the mouseup event, we want to wait until it + // has been canceled before removing our handler. + setTimeout(() => { + doc.removeEventListener('click', preventClick, true); + }, 100); if (colElementRef.current) { colElementRef.current!.style.pointerEvents = 'unset'; } @@ -426,12 +508,172 @@ export const useGridColumnResize = ( apiRef.current.forceUpdate(); }, [apiRef]); - React.useEffect(() => { - return () => { - clearTimeout(stopResizeEventTimeout.current); - stopListening(); - }; - }, [apiRef, handleTouchStart, stopListening]); + const handleColumnResizeMouseDown: GridEventListener<'columnSeparatorMouseDown'> = + useEventCallback(({ colDef }, event) => { + // Only handle left clicks + if (event.button !== 0) { + return; + } + + // Skip if the column isn't resizable + if (!event.currentTarget.classList.contains(gridClasses['columnSeparator--resizable'])) { + return; + } + + // Avoid text selection + event.preventDefault(); + + logger.debug(`Start Resize on col ${colDef.field}`); + apiRef.current.publishEvent('columnResizeStart', { field: colDef.field }, event); + + colDefRef.current = colDef as GridStateColDef; + colElementRef.current = + apiRef.current.columnHeadersContainerElementRef?.current!.querySelector( + `[data-field="${colDef.field}"]`, + )!; + + const headerFilterRowElement = apiRef.current.headerFiltersElementRef?.current; + + if (headerFilterRowElement) { + headerFilterElementRef.current = headerFilterRowElement.querySelector( + `[data-field="${colDef.field}"]`, + ) as HTMLDivElement; + } + + colGroupingElementRef.current = findGroupHeaderElementsFromField( + apiRef.current.columnHeadersContainerElementRef?.current!, + colDef.field, + ); + + colCellElementsRef.current = findGridCellElementsFromCol( + colElementRef.current, + apiRef.current, + ); + + const doc = ownerDocument(apiRef.current.rootElementRef!.current); + doc.body.style.cursor = 'col-resize'; + + resizeDirection.current = getResizeDirection(event.currentTarget, theme.direction); + + initialOffsetToSeparator.current = computeOffsetToSeparator( + event.clientX, + colElementRef.current!.getBoundingClientRect(), + resizeDirection.current, + ); + + doc.addEventListener('mousemove', handleResizeMouseMove); + doc.addEventListener('mouseup', handleResizeMouseUp); + + // Prevent the click event if we have resized the column. + // Fixes https://github.com/mui/mui-x/issues/4777 + doc.addEventListener('click', preventClick, true); + }); + + const handleColumnSeparatorDoubleClick: GridEventListener<'columnSeparatorDoubleClick'> = + useEventCallback((params, event) => { + if (props.disableAutosize) { + return; + } + + // Only handle left clicks + if (event.button !== 0) { + return; + } + + const column = apiRef.current.state.columns.lookup[params.field]; + if (column.resizable === false) { + return; + } + + apiRef.current.autosizeColumns({ + ...props.autosizeOptions, + columns: [column.field], + }); + }); + + /** + * API METHODS + */ + + const columnVirtualizationDisabled = useColumnVirtualizationDisabled(apiRef); + const isAutosizingRef = React.useRef(false); + const autosizeColumns = React.useCallback( + async (userOptions) => { + const root = apiRef.current.rootElementRef?.current; + if (!root) { + return; + } + if (isAutosizingRef.current) { + return; + } + isAutosizingRef.current = true; + + const state = gridColumnsStateSelector(apiRef.current.state); + const options = { + ...DEFAULT_GRID_AUTOSIZE_OPTIONS, + ...userOptions, + columns: userOptions?.columns ?? state.orderedFields, + }; + options.columns = options.columns.filter((c) => state.columnVisibilityModel[c] !== false); + + const columns = options.columns.map((c) => apiRef.current.state.columns.lookup[c]); + + try { + apiRef.current.unstable_setColumnVirtualization(false); + await columnVirtualizationDisabled(); + + const widthByField = extractColumnWidths(apiRef, options, columns); + + const newColumns = columns.map((column) => ({ + ...column, + width: widthByField[column.field], + computedWidth: widthByField[column.field], + })); + + if (options.expand) { + const visibleColumns = state.orderedFields + .map((field) => state.lookup[field]) + .filter((c) => state.columnVisibilityModel[c.field] !== false); + + const totalWidth = visibleColumns.reduce( + (total, column) => + total + (widthByField[column.field] ?? column.computedWidth ?? column.width), + 0, + ); + const availableWidth = apiRef.current.getRootDimensions()?.viewportInnerSize.width ?? 0; + const remainingWidth = availableWidth - totalWidth; + + if (remainingWidth > 0) { + const widthPerColumn = remainingWidth / (newColumns.length || 1); + newColumns.forEach((column) => { + column.width += widthPerColumn; + column.computedWidth += widthPerColumn; + }); + } + } + + apiRef.current.updateColumns(newColumns); + } finally { + apiRef.current.unstable_setColumnVirtualization(true); + isAutosizingRef.current = false; + } + }, + [apiRef, columnVirtualizationDisabled], + ); + + /** + * EFFECTS + */ + + React.useEffect(() => stopListening, [stopListening]); + + useOnMount(() => { + if (props.autosizeOnMount) { + Promise.resolve().then(() => { + apiRef.current.autosizeColumns(props.autosizeOptions); + }); + } + }); useGridNativeEventListener( apiRef, @@ -441,9 +683,18 @@ export const useGridColumnResize = ( { passive: doesSupportTouchActionNone() }, ); - useGridApiEventHandler(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown); - useGridApiEventHandler(apiRef, 'columnResizeStart', handleResizeStart); + useGridApiMethod( + apiRef, + { + autosizeColumns, + }, + 'public', + ); + useGridApiEventHandler(apiRef, 'columnResizeStop', handleResizeStop); + useGridApiEventHandler(apiRef, 'columnResizeStart', handleResizeStart); + useGridApiEventHandler(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown); + useGridApiEventHandler(apiRef, 'columnSeparatorDoubleClick', handleColumnSeparatorDoubleClick); useGridApiOptionHandler(apiRef, 'columnResize', props.onColumnResize); useGridApiOptionHandler(apiRef, 'columnWidthChange', props.onColumnWidthChange); diff --git a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts index 95301282803bb..d602feb7b44b5 100644 --- a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts +++ b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts @@ -25,6 +25,7 @@ import { import { GridInitialStatePro } from './gridStatePro'; import { GridProSlotsComponent, UncapitalizedGridProSlotsComponent } from './gridProSlotsComponent'; import type { GridProSlotProps } from './gridProSlotProps'; +import { GridAutosizeOptions } from '../hooks'; export interface GridExperimentalProFeatures extends GridExperimentalFeatures { /** @@ -101,6 +102,16 @@ export interface DataGridProPropsWithDefaultValue extends DataGridPropsWithDefau * @returns {boolean} A boolean indicating if the group is expanded. */ isGroupExpandedByDefault?: (node: GridGroupNode) => boolean; + /** + * If `true`, columns are autosized after the datagrid is mounted. + * @default false + */ + autosizeOnMount: boolean; + /** + * If `true`, column autosizing on header separator double-click is disabled. + * @default false + */ + disableAutosize: boolean; /** * If `true`, the column pinning is disabled. * @default false @@ -157,6 +168,10 @@ export interface DataGridProPropsWithoutDefaultValue; + /** + * The options for autosize when user-initiated. + */ + autosizeOptions?: GridAutosizeOptions; /** * The initial state of the DataGridPro. * The data in it will be set in the state on initialization but will not be controlled. diff --git a/packages/grid/x-data-grid-pro/src/models/gridApiPro.ts b/packages/grid/x-data-grid-pro/src/models/gridApiPro.ts index bd5c6dddeccfc..5b541d730f6b1 100644 --- a/packages/grid/x-data-grid-pro/src/models/gridApiPro.ts +++ b/packages/grid/x-data-grid-pro/src/models/gridApiPro.ts @@ -8,6 +8,7 @@ import { GridPrivateOnlyApiCommon } from '@mui/x-data-grid/internals'; import { GridInitialStatePro, GridStatePro } from './gridStatePro'; import type { GridColumnPinningApi, + GridColumnResizeApi, GridDetailPanelApi, GridRowPinningApi, GridDetailPanelPrivateApi, @@ -20,12 +21,12 @@ export interface GridApiPro extends GridApiCommon, GridRowProApi, GridColumnPinningApi, + GridColumnResizeApi, GridDetailPanelApi, GridRowPinningApi, // APIs that are private in Community plan, but public in Pro and Premium plans GridRowMultiSelectionApi, - GridColumnReorderApi, - GridRowProApi {} + GridColumnReorderApi {} export interface GridPrivateApiPro extends GridApiPro, diff --git a/packages/grid/x-data-grid-pro/src/models/index.ts b/packages/grid/x-data-grid-pro/src/models/index.ts index 58cfd0bf2f8eb..36deff5c944b6 100644 --- a/packages/grid/x-data-grid-pro/src/models/index.ts +++ b/packages/grid/x-data-grid-pro/src/models/index.ts @@ -1,3 +1,4 @@ +export * from './gridApiPro'; export * from './gridGroupingColDefOverride'; export * from './gridRowScrollEndParams'; export * from './gridRowOrderChangeParams'; diff --git a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx index e56f110f2ff6a..2775ddf2af9ac 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx @@ -10,9 +10,10 @@ import { gridColumnLookupSelector, gridColumnFieldsSelector, GridApi, + GridAutosizeOptions, } from '@mui/x-data-grid-pro'; import { useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals'; -import { getColumnHeaderCell, getCell } from 'test/utils/helperFn'; +import { getColumnHeaderCell, getCell, microtasks } from 'test/utils/helperFn'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -410,6 +411,91 @@ describe(' - Columns', () => { }); }); + describe('autosizing', () => { + before(function beforeHook() { + if (isJSDOM) { + // Need layouting + this.skip(); + } + }); + + const rows = [ + { + id: 0, + brand: 'Nike', + }, + { + id: 1, + brand: 'Adidas', + }, + { + id: 2, + brand: 'Puma', + }, + { + id: 3, + brand: 'Lululemon Athletica', + }, + ]; + const columns = [ + { field: 'id', headerName: 'This is the ID column' }, + { field: 'brand', headerName: 'This is the brand column' }, + ]; + + const getWidths = () => { + return columns.map((_, i) => parseInt(getColumnHeaderCell(i).style.width, 10)); + }; + + it('should work through the API', async () => { + render(); + await apiRef.current.autosizeColumns(); + await microtasks(); + expect(getWidths()).to.deep.equal([155, 177]); + }); + + it('should work through double-clicking the separator', async () => { + render(); + const separator = document.querySelectorAll( + `.${gridClasses['columnSeparator--resizable']}`, + )[1]; + fireEvent.doubleClick(separator); + await microtasks(); + expect(getWidths()).to.deep.equal([100, 177]); + }); + + it('should work on mount', async () => { + render(); + await microtasks(); /* first effect after render */ + await microtasks(); /* async autosize operation */ + expect(getWidths()).to.deep.equal([155, 177]); + }); + + describe('options', () => { + const autosize = async (options: GridAutosizeOptions | undefined, widths: number[]) => { + render(); + await apiRef.current.autosizeColumns({ includeHeaders: false, ...options }); + await microtasks(); + expect(getWidths()).to.deep.equal(widths); + }; + + it('.columns works', async () => { + await autosize({ columns: [columns[0].field] }, [50, 100]); + }); + it('.includeHeaders works', async () => { + await autosize({ includeHeaders: true }, [155, 177]); + }); + it('.includeOutliers works', async () => { + await autosize({ includeOutliers: true }, [50, 145]); + }); + it('.outliersFactor works', async () => { + await autosize({ outliersFactor: 40 }, [50, 145]); + }); + it('.expand works', async () => { + await autosize({ expand: true }, [134, 149]); + }); + }); + }); + describe('column pipe processing', () => { type GridPrivateApiContextRef = ReturnType; it('should not loose column width when re-applying pipe processing', () => { diff --git a/packages/grid/x-data-grid-pro/src/utils/domUtils.ts b/packages/grid/x-data-grid-pro/src/utils/domUtils.ts index 697c10999dee0..02e1b5ca563f3 100644 --- a/packages/grid/x-data-grid-pro/src/utils/domUtils.ts +++ b/packages/grid/x-data-grid-pro/src/utils/domUtils.ts @@ -56,3 +56,18 @@ export function findGridCellElementsFromCol(col: HTMLElement, api: GridPrivateAp return cells; } + +export function findGridHeader(api: GridPrivateApiPro, field: string) { + const headers = api.columnHeadersContainerElementRef!.current!; + return headers.querySelector(`:scope > div > div > [data-field="${field}"][role="columnheader"]`); +} + +export function findGridCells(api: GridPrivateApiPro, field: string) { + const container = api.virtualScrollerRef!.current!; + const selectorFor = (role: string) => + `:scope > div > div > div > [data-field="${field}"][role="${role}"]`; + // TODO(v7): Keep only the selector for the correct role + return Array.from( + container.querySelectorAll(`${selectorFor('cell')}, ${selectorFor('gridcell')}`), + ); +} diff --git a/packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx b/packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx index 2e0db8b05d205..17d5b9e59327a 100644 --- a/packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx +++ b/packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx @@ -42,12 +42,16 @@ import { useGridColumnGrouping, columnGroupsStateInitializer, } from '../hooks/features/columnGrouping/useGridColumnGrouping'; +import { + useGridVirtualization, + virtualizationStateInitializer, +} from '../hooks/features/virtualization'; export const useDataGridComponent = ( inputApiRef: React.MutableRefObject | undefined, props: DataGridProcessedProps, ) => { - const privateApiRef = useGridInitialization( + const apiRef = useGridInitialization( inputApiRef, props, ); @@ -55,49 +59,51 @@ export const useDataGridComponent = ( /** * Register all pre-processors called during state initialization here. */ - useGridRowSelectionPreProcessors(privateApiRef, props); - useGridRowsPreProcessors(privateApiRef); + useGridRowSelectionPreProcessors(apiRef, props); + useGridRowsPreProcessors(apiRef); /** * Register all state initializers here. */ - useGridInitializeState(rowSelectionStateInitializer, privateApiRef, props); - useGridInitializeState(columnsStateInitializer, privateApiRef, props); - useGridInitializeState(rowsStateInitializer, privateApiRef, props); - useGridInitializeState(editingStateInitializer, privateApiRef, props); - useGridInitializeState(focusStateInitializer, privateApiRef, props); - useGridInitializeState(sortingStateInitializer, privateApiRef, props); - useGridInitializeState(preferencePanelStateInitializer, privateApiRef, props); - useGridInitializeState(filterStateInitializer, privateApiRef, props); - useGridInitializeState(densityStateInitializer, privateApiRef, props); - useGridInitializeState(paginationStateInitializer, privateApiRef, props); - useGridInitializeState(rowsMetaStateInitializer, privateApiRef, props); - useGridInitializeState(columnMenuStateInitializer, privateApiRef, props); - useGridInitializeState(columnGroupsStateInitializer, privateApiRef, props); + useGridInitializeState(rowSelectionStateInitializer, apiRef, props); + useGridInitializeState(columnsStateInitializer, apiRef, props); + useGridInitializeState(rowsStateInitializer, apiRef, props); + useGridInitializeState(editingStateInitializer, apiRef, props); + useGridInitializeState(focusStateInitializer, apiRef, props); + useGridInitializeState(sortingStateInitializer, apiRef, props); + useGridInitializeState(preferencePanelStateInitializer, apiRef, props); + useGridInitializeState(filterStateInitializer, apiRef, props); + useGridInitializeState(densityStateInitializer, apiRef, props); + useGridInitializeState(paginationStateInitializer, apiRef, props); + useGridInitializeState(rowsMetaStateInitializer, apiRef, props); + useGridInitializeState(columnMenuStateInitializer, apiRef, props); + useGridInitializeState(columnGroupsStateInitializer, apiRef, props); + useGridInitializeState(virtualizationStateInitializer, apiRef, props); - useGridKeyboardNavigation(privateApiRef, props); - useGridRowSelection(privateApiRef, props); - useGridColumns(privateApiRef, props); - useGridRows(privateApiRef, props); - useGridParamsApi(privateApiRef, props); - useGridColumnSpanning(privateApiRef); - useGridColumnGrouping(privateApiRef, props); - useGridEditing(privateApiRef, props); - useGridFocus(privateApiRef, props); - useGridPreferencesPanel(privateApiRef, props); - useGridFilter(privateApiRef, props); - useGridSorting(privateApiRef, props); - useGridDensity(privateApiRef, props); - useGridPagination(privateApiRef, props); - useGridRowsMeta(privateApiRef, props); - useGridScroll(privateApiRef, props); - useGridColumnMenu(privateApiRef); - useGridCsvExport(privateApiRef, props); - useGridPrintExport(privateApiRef, props); - useGridClipboard(privateApiRef, props); - useGridDimensions(privateApiRef, props); - useGridEvents(privateApiRef, props); - useGridStatePersistence(privateApiRef); + useGridKeyboardNavigation(apiRef, props); + useGridRowSelection(apiRef, props); + useGridColumns(apiRef, props); + useGridRows(apiRef, props); + useGridParamsApi(apiRef, props); + useGridColumnSpanning(apiRef); + useGridColumnGrouping(apiRef, props); + useGridEditing(apiRef, props); + useGridFocus(apiRef, props); + useGridPreferencesPanel(apiRef, props); + useGridFilter(apiRef, props); + useGridSorting(apiRef, props); + useGridDensity(apiRef, props); + useGridPagination(apiRef, props); + useGridRowsMeta(apiRef, props); + useGridScroll(apiRef, props); + useGridColumnMenu(apiRef); + useGridCsvExport(apiRef, props); + useGridPrintExport(apiRef, props); + useGridClipboard(apiRef, props); + useGridDimensions(apiRef, props); + useGridEvents(apiRef, props); + useGridStatePersistence(apiRef); + useGridVirtualization(apiRef, props); - return privateApiRef; + return apiRef; }; diff --git a/packages/grid/x-data-grid/src/components/DataGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/components/DataGridVirtualScroller.tsx index 2589c5423c7e1..e10e75dd2724f 100644 --- a/packages/grid/x-data-grid/src/components/DataGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/components/DataGridVirtualScroller.tsx @@ -5,30 +5,26 @@ import { GridVirtualScrollerRenderZone } from './virtualization/GridVirtualScrol import { useGridVirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller'; import { GridOverlays } from './base/GridOverlays'; -interface DataGridVirtualScrollerProps extends React.HTMLAttributes { - disableVirtualization?: boolean; -} +const DataGridVirtualScroller = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(function DataGridVirtualScroller(props, ref) { + const { className, ...other } = props; -const DataGridVirtualScroller = React.forwardRef( - function DataGridVirtualScroller(props, ref) { - const { className, disableVirtualization, ...other } = props; + const { getRootProps, getContentProps, getRenderZoneProps, getRows } = useGridVirtualScroller({ + ref, + }); - const { getRootProps, getContentProps, getRenderZoneProps, getRows } = useGridVirtualScroller({ - ref, - disableVirtualization, - }); - - return ( - - - - - {getRows()} - - - - ); - }, -); + return ( + + + + + {getRows()} + + + + ); +}); export { DataGridVirtualScroller }; diff --git a/packages/grid/x-data-grid/src/components/base/GridBody.tsx b/packages/grid/x-data-grid/src/components/base/GridBody.tsx index 320501ca349ed..8c0ea5762311a 100644 --- a/packages/grid/x-data-grid/src/components/base/GridBody.tsx +++ b/packages/grid/x-data-grid/src/components/base/GridBody.tsx @@ -32,7 +32,6 @@ interface GridBodyProps { VirtualScrollerComponent: React.JSXElementConstructor< React.HTMLAttributes & { ref: React.Ref; - disableVirtualization: boolean; } >; } @@ -76,10 +75,6 @@ function GridBody(props: GridBodyProps) { cellTabIndexState === null ); - const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState( - rootProps.disableVirtualization, - ); - useEnhancedEffect(() => { apiRef.current.computeSizeAndPublishResizeEvent(); @@ -111,27 +106,6 @@ function GridBody(props: GridBodyProps) { }; }, [apiRef]); - const disableVirtualization = React.useCallback(() => { - setIsVirtualizationDisabled(true); - }, []); - - const enableVirtualization = React.useCallback(() => { - setIsVirtualizationDisabled(false); - }, []); - - React.useEffect(() => { - setIsVirtualizationDisabled(rootProps.disableVirtualization); - }, [rootProps.disableVirtualization]); - - // The `useGridApiMethod` hook can't be used here, because it only installs the - // method if it doesn't exist yet. Once installed, it's never updated again. - // This break the methods above, since their closure comes from the first time - // they were installed. Which means that calling `setIsVirtualizationDisabled` - // will trigger a re-render, but it won't update the state. That can be solved - // by migrating the virtualization status to the global state. - apiRef.current.unstable_disableVirtualization = disableVirtualization; - apiRef.current.unstable_enableVirtualization = enableVirtualization; - const columnHeadersRef = React.useRef(null); const columnsContainerRef = React.useRef(null); const virtualScrollerRef = React.useRef(null); @@ -174,7 +148,6 @@ function GridBody(props: GridBodyProps) { // If this event is published while dimensions haven't been computed, // the `onFetchRows` prop won't be called during mount. ref={virtualScrollerRef} - disableVirtualization={isVirtualizationDisabled} /> )} diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx index ba7777efbed80..78592957c681d 100644 --- a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx +++ b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx @@ -152,7 +152,10 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) { ); const columnHeaderSeparatorProps = React.useMemo( - () => ({ onMouseDown: publish('columnSeparatorMouseDown') }), + () => ({ + onMouseDown: publish('columnSeparatorMouseDown'), + onDoubleClick: publish('columnSeparatorDoubleClick'), + }), [publish], ); diff --git a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx index e1f9470b15fe1..f10009980f68b 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -3,6 +3,7 @@ import * as ReactDOM from 'react-dom'; import { unstable_useForkRef as useForkRef } from '@mui/utils'; import { styled, useTheme } from '@mui/system'; import { defaultMemoize } from 'reselect'; +import { useGridSelector } from '../../utils'; import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext'; import { useGridRootProps } from '../../utils/useGridRootProps'; import { GridRenderContext } from '../../../models/params/gridScrollParams'; @@ -15,6 +16,7 @@ import { areRenderContextsEqual, getRenderableIndexes, } from '../virtualization/useGridVirtualScroller'; +import { gridVirtualizationColumnEnabledSelector } from '../virtualization'; import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader'; import { GridColumnGroup } from '../../../models/gridColumnGrouping'; import { GridStateColDef } from '../../../models/colDef/gridColDef'; @@ -100,6 +102,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { const [resizeCol, setResizeCol] = React.useState(''); const apiRef = useGridPrivateApiContext(); + const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector); const rootProps = useGridRootProps(); const innerRef = React.useRef(null); @@ -243,7 +246,6 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { (params) => setDragCol(params.field), [], ); - const handleColumnReorderStop = React.useCallback>( () => setDragCol(''), [], @@ -276,20 +278,21 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { buffer: rootProps.rowBuffer, }); - const firstColumnToRender = getFirstColumnIndexToRenderRef.current({ - firstColumnIndex: nextRenderContext!.firstColumnIndex, - minColumnIndex: minFirstColumn, - columnBuffer: rootProps.columnBuffer, - apiRef, - firstRowToRender, - lastRowToRender, - visibleRows: currentPage.rows, - }); - - const lastColumnToRender = Math.min( - nextRenderContext.lastColumnIndex! + rootProps.columnBuffer, - maxLastColumn, - ); + const firstColumnToRender = !hasVirtualization + ? 0 + : getFirstColumnIndexToRenderRef.current({ + firstColumnIndex: nextRenderContext!.firstColumnIndex, + minColumnIndex: minFirstColumn, + columnBuffer: rootProps.columnBuffer, + apiRef, + firstRowToRender, + lastRowToRender, + visibleRows: currentPage.rows, + }); + + const lastColumnToRender = !hasVirtualization + ? maxLastColumn + : Math.min(nextRenderContext.lastColumnIndex! + rootProps.columnBuffer, maxLastColumn); const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender); diff --git a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx index 87d108f92a674..b143d906338b3 100644 --- a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx @@ -281,7 +281,7 @@ export const useGridPrintExport = ( apiRef.current.setColumnVisibilityModel(previousColumnVisibility.current); } - apiRef.current.unstable_enableVirtualization(); + apiRef.current.unstable_setVirtualization(true); apiRef.current.setRows(previousRows.current); // Clear local state @@ -329,7 +329,7 @@ export const useGridPrintExport = ( updateGridRowsForPrint(options.getRowsToExport); } - apiRef.current.unstable_disableVirtualization(); + apiRef.current.unstable_setVirtualization(false); await raf(); // wait for the state changes to take action const printWindow = buildPrintWindow(options?.fileName); if (process.env.NODE_ENV === 'test') { diff --git a/packages/grid/x-data-grid/src/hooks/features/index.ts b/packages/grid/x-data-grid/src/hooks/features/index.ts index dc565a3269ebb..b5d62c7b80d5b 100644 --- a/packages/grid/x-data-grid/src/hooks/features/index.ts +++ b/packages/grid/x-data-grid/src/hooks/features/index.ts @@ -13,3 +13,4 @@ export * from './sorting'; export * from './dimensions'; export * from './statePersistence'; export * from './headerFiltering'; +export * from './virtualization'; diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/gridVirtualizationSelectors.ts b/packages/grid/x-data-grid/src/hooks/features/virtualization/gridVirtualizationSelectors.ts new file mode 100644 index 0000000000000..4fed29c696b7f --- /dev/null +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/gridVirtualizationSelectors.ts @@ -0,0 +1,26 @@ +import { createSelector } from '../../../utils/createSelector'; +import { GridStateCommunity } from '../../../models/gridStateCommunity'; + +/** + * Get the columns state + * @category Virtualization + */ +export const gridVirtualizationSelector = (state: GridStateCommunity) => state.virtualization; + +/** + * Get the enabled state for virtualization + * @category Virtualization + */ +export const gridVirtualizationEnabledSelector = createSelector( + gridVirtualizationSelector, + (state) => state.enabled, +); + +/** + * Get the enabled state for virtualization + * @category Virtualization + */ +export const gridVirtualizationColumnEnabledSelector = createSelector( + gridVirtualizationSelector, + (state) => state.enabledForColumns, +); diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/index.ts b/packages/grid/x-data-grid/src/hooks/features/virtualization/index.ts new file mode 100644 index 0000000000000..19098c42dfda5 --- /dev/null +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/index.ts @@ -0,0 +1,2 @@ +export * from './useGridVirtualization'; +export * from './gridVirtualizationSelectors'; diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 802fc31cc39ff..4d9859f4b08b0 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -28,6 +28,10 @@ import { GridStateColDef } from '../../../models/colDef/gridColDef'; import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils'; import { getMinimalContentHeight } from '../rows/gridRowsUtils'; import { GridRowProps } from '../../../components/GridRow'; +import { + gridVirtualizationEnabledSelector, + gridVirtualizationColumnEnabledSelector, +} from './gridVirtualizationSelectors'; // Uses binary search to avoid looping through all possible positions export function binarySearch( @@ -98,7 +102,6 @@ export const areRenderContextsEqual = ( interface UseGridVirtualScrollerProps { ref: React.Ref; - disableVirtualization?: boolean; renderZoneMinColumnIndex?: number; renderZoneMaxColumnIndex?: number; onRenderZonePositioning?: (params: { top: number; left: number }) => void; @@ -118,10 +121,11 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const apiRef = useGridPrivateApiContext(); const rootProps = useGridRootProps(); const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector); + const enabled = useGridSelector(apiRef, gridVirtualizationEnabledSelector); + const enabledForColumns = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector); const { ref, - disableVirtualization, onRenderZonePositioning, renderZoneMinColumnIndex = 0, renderZoneMaxColumnIndex = visibleColumns.length, @@ -139,7 +143,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const renderZoneRef = React.useRef(null); const rootRef = React.useRef(null); const handleRef = useForkRef(ref, rootRef); - const [renderContext, setRenderContext] = React.useState(null); + const [renderContext, setRenderContextState] = React.useState(null); const prevRenderContext = React.useRef(renderContext); const scrollPosition = React.useRef({ top: 0, left: 0 }); const [containerDimensions, setContainerDimensions] = React.useState({ @@ -238,7 +242,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { ); const computeRenderContext = React.useCallback(() => { - if (disableVirtualization) { + if (!enabled) { return { firstRowIndex: 0, lastRowIndex: currentPage.rows.length, @@ -257,26 +261,32 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + containerDimensions.height!); - let hasRowWithAutoHeight = false; let firstColumnIndex = 0; let lastColumnIndex = columnPositions.length; - const [firstRowToRender, lastRowToRender] = getRenderableIndexes({ - firstIndex: firstRowIndex, - lastIndex: lastRowIndex, - minFirstIndex: 0, - maxLastIndex: currentPage.rows.length, - buffer: rootProps.rowBuffer, - }); + if (enabledForColumns) { + let hasRowWithAutoHeight = false; - for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) { - const row = currentPage.rows[i]; - hasRowWithAutoHeight = apiRef.current.rowHasAutoHeight(row.id); - } + const [firstRowToRender, lastRowToRender] = getRenderableIndexes({ + firstIndex: firstRowIndex, + lastIndex: lastRowIndex, + minFirstIndex: 0, + maxLastIndex: currentPage.rows.length, + buffer: rootProps.rowBuffer, + }); - if (!hasRowWithAutoHeight) { - firstColumnIndex = binarySearch(Math.abs(left), columnPositions); - lastColumnIndex = binarySearch(Math.abs(left) + containerDimensions.width!, columnPositions); + for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) { + const row = currentPage.rows[i]; + hasRowWithAutoHeight = apiRef.current.rowHasAutoHeight(row.id); + } + + if (!hasRowWithAutoHeight) { + firstColumnIndex = binarySearch(Math.abs(left), columnPositions); + lastColumnIndex = binarySearch( + Math.abs(left) + containerDimensions.width!, + columnPositions, + ); + } } return { @@ -286,7 +296,8 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { lastColumnIndex, }; }, [ - disableVirtualization, + enabled, + enabledForColumns, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, @@ -299,14 +310,14 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { ]); useEnhancedEffect(() => { - if (disableVirtualization) { - renderZoneRef.current!.style.transform = `translate3d(0px, 0px, 0px)`; - } else { + if (enabled) { // TODO a scroll reset should not be necessary rootRef.current!.scrollLeft = 0; rootRef.current!.scrollTop = 0; + } else { + renderZoneRef.current!.style.transform = `translate3d(0px, 0px, 0px)`; } - }, [disableVirtualization]); + }, [enabled]); useEnhancedEffect(() => { setContainerDimensions({ @@ -373,7 +384,9 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { ], ); - const updateRenderContext = React.useCallback( + const getRenderContext = React.useCallback(() => prevRenderContext.current!, []); + + const setRenderContext = React.useCallback( (nextRenderContext: GridRenderContext) => { if ( prevRenderContext.current && @@ -382,7 +395,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { updateRenderZonePosition(nextRenderContext); return; } - setRenderContext(nextRenderContext); + setRenderContextState(nextRenderContext); updateRenderZonePosition(nextRenderContext); @@ -403,7 +416,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { }, [ apiRef, - setRenderContext, + setRenderContextState, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer, @@ -417,12 +430,12 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { } const initialRenderContext = computeRenderContext(); - updateRenderContext(initialRenderContext); + setRenderContext(initialRenderContext); const { top, left } = scrollPosition.current!; const params = { top, left, renderContext: initialRenderContext }; apiRef.current.publishEvent('scrollPositionChange', params); - }, [apiRef, computeRenderContext, containerDimensions.width, updateRenderContext]); + }, [apiRef, computeRenderContext, containerDimensions.width, setRenderContext]); const handleScroll = useEventCallback((event: React.UIEvent) => { const { scrollTop, scrollLeft } = event.currentTarget; @@ -445,9 +458,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { } // When virtualization is disabled, the context never changes during scroll - const nextRenderContext = disableVirtualization - ? prevRenderContext.current - : computeRenderContext(); + const nextRenderContext = enabled ? computeRenderContext() : prevRenderContext.current; const topRowsScrolledSincePreviousRender = Math.abs( nextRenderContext.firstRowIndex - prevRenderContext.current.firstRowIndex, @@ -483,7 +494,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { if (shouldSetState) { // Prevents batching render context changes ReactDOM.flushSync(() => { - updateRenderContext(nextRenderContext); + setRenderContext(nextRenderContext); }); prevTotalWidth.current = columnsTotalWidth; } @@ -537,8 +548,8 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { return null; } - const rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0; - const columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0; + const rowBuffer = enabled ? rootProps.rowBuffer : 0; + const columnBuffer = enabled ? rootProps.columnBuffer : 0; const [firstRowToRender, lastRowToRender] = getRenderableIndexes({ firstIndex: nextRenderContext.firstRowIndex, @@ -783,11 +794,9 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { return style; }, [needsHorizontalScrollbar, rootProps.autoHeight]); - const getRenderContext = React.useCallback((): GridRenderContext => { - return prevRenderContext.current!; - }, []); - - apiRef.current.register('private', { getRenderContext }); + apiRef.current.register('private', { + getRenderContext, + }); return { renderContext, diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx new file mode 100644 index 0000000000000..7634600ac1da8 --- /dev/null +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; +import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; +import { useGridApiMethod } from '../../utils/useGridApiMethod'; +import { GridStateInitializer } from '../../utils/useGridInitializeState'; + +type RootProps = Pick; + +export type GridVirtualizationState = { + enabled: boolean; + enabledForColumns: boolean; +}; + +export const virtualizationStateInitializer: GridStateInitializer = (state, props) => { + const virtualization = { + enabled: !props.disableVirtualization, + enabledForColumns: true, + }; + + return { + ...state, + virtualization, + }; +}; + +export function useGridVirtualization( + apiRef: React.MutableRefObject, + props: RootProps, +): void { + /* + * API METHODS + */ + + const setVirtualization = (enabled: boolean) => { + apiRef.current.setState((state) => ({ + ...state, + virtualization: { + ...state.virtualization, + enabled, + }, + })); + }; + + const setColumnVirtualization = (enabled: boolean) => { + apiRef.current.setState((state) => ({ + ...state, + virtualization: { + ...state.virtualization, + enabledForColumns: enabled, + }, + })); + }; + + const api = { + unstable_setVirtualization: setVirtualization, + unstable_setColumnVirtualization: setColumnVirtualization, + }; + + useGridApiMethod(apiRef, api, 'public'); + + /* + * EFFECTS + */ + + /* eslint-disable react-hooks/exhaustive-deps */ + React.useEffect(() => { + setVirtualization(!props.disableVirtualization); + }, [props.disableVirtualization]); + /* eslint-enable react-hooks/exhaustive-deps */ +} diff --git a/packages/grid/x-data-grid/src/internals/index.ts b/packages/grid/x-data-grid/src/internals/index.ts index 40a9d112efdad..282be9d713862 100644 --- a/packages/grid/x-data-grid/src/internals/index.ts +++ b/packages/grid/x-data-grid/src/internals/index.ts @@ -39,6 +39,7 @@ export { export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns'; export { getTotalHeaderHeight } from '../hooks/features/columns/gridColumnsUtils'; export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning'; +export { gridColumnsStateSelector } from '../hooks/features/columns/gridColumnsSelector'; export { useGridColumnGrouping, columnGroupsStateInitializer, @@ -113,6 +114,7 @@ export { useGridVirtualScroller, getRenderableIndexes, } from '../hooks/features/virtualization/useGridVirtualScroller'; +export * from '../hooks/features/virtualization'; export { useTimeout } from '../hooks/utils/useTimeout'; export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows'; @@ -128,6 +130,7 @@ export type { } from '../models/props/DataGridProps'; export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils'; +export * from '../utils/createControllablePromise'; export { createSelector, createSelectorMemoized, @@ -140,6 +143,7 @@ export { buildWarning } from '../utils/warning'; export { exportAs } from '../utils/exportAs'; export type { GridPrivateOnlyApiCommon } from '../models/api/gridApiCommon'; export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext'; +export * from '../hooks/utils/useOnMount'; export type { GridApiCommunity } from '../models/api/gridApiCommunity'; export type { GridApiCaches } from '../models/gridApiCaches'; diff --git a/packages/grid/x-data-grid/src/models/api/gridApiCommon.ts b/packages/grid/x-data-grid/src/models/api/gridApiCommon.ts index 17c98ff59b273..79745cb26e03f 100644 --- a/packages/grid/x-data-grid/src/models/api/gridApiCommon.ts +++ b/packages/grid/x-data-grid/src/models/api/gridApiCommon.ts @@ -10,7 +10,6 @@ import { GridLocaleTextApi } from './gridLocaleTextApi'; import type { GridParamsApi } from './gridParamsApi'; import { GridPreferencesPanelApi } from './gridPreferencesPanelApi'; import { GridPrintExportApi } from './gridPrintExportApi'; -import { GridDisableVirtualizationApi } from './gridDisableVirtualizationApi'; import { GridRowApi } from './gridRowApi'; import { GridRowsMetaApi, GridRowsMetaPrivateApi } from './gridRowsMetaApi'; import { GridRowSelectionApi } from './gridRowSelectionApi'; @@ -18,7 +17,7 @@ import { GridSortApi } from './gridSortApi'; import { GridStateApi, GridStatePrivateApi } from './gridStateApi'; import { GridLoggerApi } from './gridLoggerApi'; import { GridScrollApi } from './gridScrollApi'; -import { GridVirtualScrollerApi } from './gridVirtualScrollerApi'; +import { GridVirtualizationApi, GridVirtualizationPrivateApi } from './gridVirtualizationApi'; import type { GridPipeProcessingApi, GridPipeProcessingPrivateApi, @@ -56,7 +55,7 @@ export interface GridApiCommon< GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, - GridDisableVirtualizationApi, + GridVirtualizationApi, GridLocaleTextApi, GridScrollApi, GridColumnSpanningApi, @@ -75,11 +74,11 @@ export interface GridPrivateOnlyApiCommon< GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, - GridVirtualScrollerApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, - GridHeaderFilteringPrivateApi {} + GridHeaderFilteringPrivateApi, + GridVirtualizationPrivateApi {} export interface GridPrivateApiCommon extends GridApiCommon, diff --git a/packages/grid/x-data-grid/src/models/api/gridDisableVirtualizationApi.ts b/packages/grid/x-data-grid/src/models/api/gridDisableVirtualizationApi.ts deleted file mode 100644 index 1c31999395d87..0000000000000 --- a/packages/grid/x-data-grid/src/models/api/gridDisableVirtualizationApi.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * The API to disable the virtualization that is available in the grid [[apiRef]]. - */ -export interface GridDisableVirtualizationApi { - /** - * Disables grid's virtualization. - * @ignore - do not document. Remove before releasing v5 stable version. - */ - unstable_disableVirtualization: () => void; - /** - * Enables grid's virtualization. - * @ignore - do not document. Remove before releasing v5 stable version. - */ - unstable_enableVirtualization: () => void; -} diff --git a/packages/grid/x-data-grid/src/models/api/gridVirtualScrollerApi.ts b/packages/grid/x-data-grid/src/models/api/gridVirtualScrollerApi.ts deleted file mode 100644 index a91668ed1b3cb..0000000000000 --- a/packages/grid/x-data-grid/src/models/api/gridVirtualScrollerApi.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { GridRenderContext } from '../params/gridScrollParams'; - -export interface GridVirtualScrollerApi { - /** - * Get the current grid rendering context. - * @returns {GridRenderContext} The `GridRenderContext`. - */ - getRenderContext: () => GridRenderContext; -} diff --git a/packages/grid/x-data-grid/src/models/api/gridVirtualizationApi.ts b/packages/grid/x-data-grid/src/models/api/gridVirtualizationApi.ts new file mode 100644 index 0000000000000..6a5d787e72d39 --- /dev/null +++ b/packages/grid/x-data-grid/src/models/api/gridVirtualizationApi.ts @@ -0,0 +1,22 @@ +import { GridRenderContext } from '../params'; + +export interface GridVirtualizationApi { + /** + * Enable/disable virtualization. + * @param {boolean} enabled The enabled value for virtualization + */ + unstable_setVirtualization: (enabled: boolean) => void; + /** + * Enable/disable column virtualization. + * @param {boolean} enabled The enabled value for column virtualization + */ + unstable_setColumnVirtualization: (enabled: boolean) => void; +} + +export interface GridVirtualizationPrivateApi { + /** + * Get the current grid rendering context. + * @returns {GridRenderContext} The `GridRenderContext`. + */ + getRenderContext: () => GridRenderContext; +} diff --git a/packages/grid/x-data-grid/src/models/api/index.ts b/packages/grid/x-data-grid/src/models/api/index.ts index f84f56ee69a17..709885eea44ad 100644 --- a/packages/grid/x-data-grid/src/models/api/index.ts +++ b/packages/grid/x-data-grid/src/models/api/index.ts @@ -16,10 +16,9 @@ export * from './gridFilterApi'; export * from './gridColumnMenuApi'; export * from './gridPreferencesPanelApi'; export * from './gridPrintExportApi'; -export * from './gridDisableVirtualizationApi'; export * from './gridCallbackDetails'; export * from './gridScrollApi'; -export * from './gridVirtualScrollerApi'; +export * from './gridVirtualizationApi'; export type { GridApiCommon } from './gridApiCommon'; export type { GridEditingApi, GridCellModesModel, GridRowModesModel } from './gridEditingApi'; diff --git a/packages/grid/x-data-grid/src/models/events/gridEventLookup.ts b/packages/grid/x-data-grid/src/models/events/gridEventLookup.ts index 294cba7f29c59..919ca4847bcfc 100644 --- a/packages/grid/x-data-grid/src/models/events/gridEventLookup.ts +++ b/packages/grid/x-data-grid/src/models/events/gridEventLookup.ts @@ -175,6 +175,14 @@ export interface GridColumnHeaderEventLookup { params: GridColumnHeaderParams; event: React.DragEvent; }; + /** + * Fired when a `dblclick` DOM event happens in the column header separator. + * @ignore - do not document. + */ + columnSeparatorDoubleClick: { + params: GridColumnHeaderParams; + event: React.MouseEvent; + }; /** * Fired when a `mousedown` DOM event happens in the column header separator. * @ignore - do not document. diff --git a/packages/grid/x-data-grid/src/models/gridStateCommunity.ts b/packages/grid/x-data-grid/src/models/gridStateCommunity.ts index ac5bf733807a1..a0ee71bdf0c2b 100644 --- a/packages/grid/x-data-grid/src/models/gridStateCommunity.ts +++ b/packages/grid/x-data-grid/src/models/gridStateCommunity.ts @@ -15,6 +15,7 @@ import type { GridSortingInitialState, GridSortingState, GridTabIndexState, + GridVirtualizationState, } from '../hooks'; import type { GridRowsMetaState } from '../hooks/features/rows/gridRowsMetaState'; import type { GridEditingState } from './gridEditRowModel'; @@ -42,6 +43,7 @@ export interface GridStateCommunity { filter: GridFilterState; preferencePanel: GridPreferencePanelState; density: GridDensityState; + virtualization: GridVirtualizationState; } /** diff --git a/packages/grid/x-data-grid/src/utils/createControllablePromise.ts b/packages/grid/x-data-grid/src/utils/createControllablePromise.ts new file mode 100644 index 0000000000000..4582b40872fec --- /dev/null +++ b/packages/grid/x-data-grid/src/utils/createControllablePromise.ts @@ -0,0 +1,16 @@ +export type ControllablePromise = Promise & { + resolve: T extends unknown ? (value?: T) => void : (value: T) => void; + reject: (reason?: any) => void; +}; + +export function createControllablePromise() { + let resolve: ControllablePromise['resolve']; + let reject: ControllablePromise['reject']; + const promise = new Promise((_resolve, _reject) => { + resolve = _resolve; + reject = _reject; + }) as ControllablePromise; + promise.resolve = resolve!; + promise.reject = reject!; + return promise; +} diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 577959c886326..0846622cb10f0 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -31,6 +31,7 @@ { "name": "DataGridPremiumProps", "kind": "Interface" }, { "name": "DataGridPro", "kind": "Function" }, { "name": "deDE", "kind": "Variable" }, + { "name": "DEFAULT_GRID_AUTOSIZE_OPTIONS", "kind": "Variable" }, { "name": "DEFAULT_GRID_COL_TYPE_KEY", "kind": "Variable" }, { "name": "ElementSize", "kind": "Interface" }, { "name": "elGR", "kind": "Variable" }, @@ -107,10 +108,12 @@ { "name": "GridApi", "kind": "TypeAlias" }, { "name": "GridApiCommon", "kind": "Interface" }, { "name": "GridApiContext", "kind": "Variable" }, + { "name": "GridApiPro", "kind": "Interface" }, { "name": "GridArrowDownwardIcon", "kind": "Variable" }, { "name": "GridArrowUpwardIcon", "kind": "Variable" }, { "name": "GridAutoGeneratedGroupNode", "kind": "Interface" }, { "name": "GridAutoGeneratedPinnedRowNode", "kind": "Interface" }, + { "name": "GridAutosizeOptions", "kind": "TypeAlias" }, { "name": "GridBasicGroupNode", "kind": "Interface" }, { "name": "GridBody", "kind": "Function" }, { "name": "GridBooleanCell", "kind": "Variable" }, @@ -209,6 +212,7 @@ { "name": "gridColumnReorderDragColSelector", "kind": "Variable" }, { "name": "gridColumnReorderSelector", "kind": "Variable" }, { "name": "GridColumnReorderState", "kind": "Interface" }, + { "name": "GridColumnResizeApi", "kind": "Interface" }, { "name": "GridColumnResizeParams", "kind": "Interface" }, { "name": "gridColumnResizeSelector", "kind": "Variable" }, { "name": "GridColumnResizeState", "kind": "Interface" }, @@ -257,7 +261,6 @@ { "name": "GridDetailPanelToggleCell", "kind": "Function" }, { "name": "GridDimensions", "kind": "Interface" }, { "name": "GridDimensionsApi", "kind": "Interface" }, - { "name": "GridDisableVirtualizationApi", "kind": "Interface" }, { "name": "GridDragIcon", "kind": "Variable" }, { "name": "GridEditBooleanCell", "kind": "Function" }, { "name": "GridEditBooleanCellProps", "kind": "Interface" }, @@ -430,6 +433,7 @@ { "name": "GridPrintExportMenuItemProps", "kind": "TypeAlias" }, { "name": "GridPrintExportOptions", "kind": "Interface" }, { "name": "GridPrintGetRowsToExportParams", "kind": "Interface" }, + { "name": "GridPrivateApiPro", "kind": "Interface" }, { "name": "GridProIconSlotsComponent", "kind": "Interface" }, { "name": "GridProSlotsComponent", "kind": "Interface" }, { "name": "GridPushPinLeftIcon", "kind": "Variable" }, @@ -571,7 +575,12 @@ { "name": "GridViewColumnIcon", "kind": "Variable" }, { "name": "GridViewHeadlineIcon", "kind": "Variable" }, { "name": "GridViewStreamIcon", "kind": "Variable" }, - { "name": "GridVirtualScrollerApi", "kind": "Interface" }, + { "name": "GridVirtualizationApi", "kind": "Interface" }, + { "name": "gridVirtualizationColumnEnabledSelector", "kind": "Variable" }, + { "name": "gridVirtualizationEnabledSelector", "kind": "Variable" }, + { "name": "GridVirtualizationPrivateApi", "kind": "Interface" }, + { "name": "gridVirtualizationSelector", "kind": "Variable" }, + { "name": "GridVirtualizationState", "kind": "TypeAlias" }, { "name": "GridVisibilityOffIcon", "kind": "Variable" }, { "name": "gridVisibleColumnDefinitionsSelector", "kind": "Variable" }, { "name": "gridVisibleColumnFieldsSelector", "kind": "Variable" }, @@ -641,8 +650,10 @@ { "name": "useGridNativeEventListener", "kind": "Variable" }, { "name": "useGridRootProps", "kind": "Variable" }, { "name": "useGridSelector", "kind": "Variable" }, + { "name": "useGridVirtualization", "kind": "Function" }, { "name": "useKeepGroupedColumnsHidden", "kind": "Variable" }, { "name": "ValueOptions", "kind": "TypeAlias" }, + { "name": "virtualizationStateInitializer", "kind": "Variable" }, { "name": "viVN", "kind": "Variable" }, { "name": "zhCN", "kind": "Variable" }, { "name": "zhTW", "kind": "Variable" } diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index 819d55f8450c1..6457182e64df7 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -30,6 +30,7 @@ { "name": "DataGridPro", "kind": "Variable" }, { "name": "DataGridProProps", "kind": "Interface" }, { "name": "deDE", "kind": "Variable" }, + { "name": "DEFAULT_GRID_AUTOSIZE_OPTIONS", "kind": "Variable" }, { "name": "DEFAULT_GRID_COL_TYPE_KEY", "kind": "Variable" }, { "name": "ElementSize", "kind": "Interface" }, { "name": "elGR", "kind": "Variable" }, @@ -85,10 +86,12 @@ { "name": "GridApi", "kind": "TypeAlias" }, { "name": "GridApiCommon", "kind": "Interface" }, { "name": "GridApiContext", "kind": "Variable" }, + { "name": "GridApiPro", "kind": "Interface" }, { "name": "GridArrowDownwardIcon", "kind": "Variable" }, { "name": "GridArrowUpwardIcon", "kind": "Variable" }, { "name": "GridAutoGeneratedGroupNode", "kind": "Interface" }, { "name": "GridAutoGeneratedPinnedRowNode", "kind": "Interface" }, + { "name": "GridAutosizeOptions", "kind": "TypeAlias" }, { "name": "GridBasicGroupNode", "kind": "Interface" }, { "name": "GridBody", "kind": "Function" }, { "name": "GridBooleanCell", "kind": "Variable" }, @@ -183,6 +186,7 @@ { "name": "gridColumnReorderDragColSelector", "kind": "Variable" }, { "name": "gridColumnReorderSelector", "kind": "Variable" }, { "name": "GridColumnReorderState", "kind": "Interface" }, + { "name": "GridColumnResizeApi", "kind": "Interface" }, { "name": "GridColumnResizeParams", "kind": "Interface" }, { "name": "gridColumnResizeSelector", "kind": "Variable" }, { "name": "GridColumnResizeState", "kind": "Interface" }, @@ -231,7 +235,6 @@ { "name": "GridDetailPanelToggleCell", "kind": "Function" }, { "name": "GridDimensions", "kind": "Interface" }, { "name": "GridDimensionsApi", "kind": "Interface" }, - { "name": "GridDisableVirtualizationApi", "kind": "Interface" }, { "name": "GridDragIcon", "kind": "Variable" }, { "name": "GridEditBooleanCell", "kind": "Function" }, { "name": "GridEditBooleanCellProps", "kind": "Interface" }, @@ -392,6 +395,7 @@ { "name": "GridPrintExportMenuItemProps", "kind": "TypeAlias" }, { "name": "GridPrintExportOptions", "kind": "Interface" }, { "name": "GridPrintGetRowsToExportParams", "kind": "Interface" }, + { "name": "GridPrivateApiPro", "kind": "Interface" }, { "name": "GridProIconSlotsComponent", "kind": "Interface" }, { "name": "GridProSlotsComponent", "kind": "Interface" }, { "name": "GridPushPinLeftIcon", "kind": "Variable" }, @@ -526,7 +530,12 @@ { "name": "GridViewColumnIcon", "kind": "Variable" }, { "name": "GridViewHeadlineIcon", "kind": "Variable" }, { "name": "GridViewStreamIcon", "kind": "Variable" }, - { "name": "GridVirtualScrollerApi", "kind": "Interface" }, + { "name": "GridVirtualizationApi", "kind": "Interface" }, + { "name": "gridVirtualizationColumnEnabledSelector", "kind": "Variable" }, + { "name": "gridVirtualizationEnabledSelector", "kind": "Variable" }, + { "name": "GridVirtualizationPrivateApi", "kind": "Interface" }, + { "name": "gridVirtualizationSelector", "kind": "Variable" }, + { "name": "GridVirtualizationState", "kind": "TypeAlias" }, { "name": "GridVisibilityOffIcon", "kind": "Variable" }, { "name": "gridVisibleColumnDefinitionsSelector", "kind": "Variable" }, { "name": "gridVisibleColumnFieldsSelector", "kind": "Variable" }, @@ -592,7 +601,9 @@ { "name": "useGridNativeEventListener", "kind": "Variable" }, { "name": "useGridRootProps", "kind": "Variable" }, { "name": "useGridSelector", "kind": "Variable" }, + { "name": "useGridVirtualization", "kind": "Function" }, { "name": "ValueOptions", "kind": "TypeAlias" }, + { "name": "virtualizationStateInitializer", "kind": "Variable" }, { "name": "viVN", "kind": "Variable" }, { "name": "zhCN", "kind": "Variable" }, { "name": "zhTW", "kind": "Variable" } diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 32e6c5ec47f07..926ef92abb13a 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -207,7 +207,6 @@ { "name": "gridDensityValueSelector", "kind": "Variable" }, { "name": "GridDimensions", "kind": "Interface" }, { "name": "GridDimensionsApi", "kind": "Interface" }, - { "name": "GridDisableVirtualizationApi", "kind": "Interface" }, { "name": "GridDragIcon", "kind": "Variable" }, { "name": "GridEditBooleanCell", "kind": "Function" }, { "name": "GridEditBooleanCellProps", "kind": "Interface" }, @@ -481,7 +480,12 @@ { "name": "GridViewColumnIcon", "kind": "Variable" }, { "name": "GridViewHeadlineIcon", "kind": "Variable" }, { "name": "GridViewStreamIcon", "kind": "Variable" }, - { "name": "GridVirtualScrollerApi", "kind": "Interface" }, + { "name": "GridVirtualizationApi", "kind": "Interface" }, + { "name": "gridVirtualizationColumnEnabledSelector", "kind": "Variable" }, + { "name": "gridVirtualizationEnabledSelector", "kind": "Variable" }, + { "name": "GridVirtualizationPrivateApi", "kind": "Interface" }, + { "name": "gridVirtualizationSelector", "kind": "Variable" }, + { "name": "GridVirtualizationState", "kind": "TypeAlias" }, { "name": "GridVisibilityOffIcon", "kind": "Variable" }, { "name": "gridVisibleColumnDefinitionsSelector", "kind": "Variable" }, { "name": "gridVisibleColumnFieldsSelector", "kind": "Variable" }, @@ -545,7 +549,9 @@ { "name": "useGridNativeEventListener", "kind": "Variable" }, { "name": "useGridRootProps", "kind": "Variable" }, { "name": "useGridSelector", "kind": "Variable" }, + { "name": "useGridVirtualization", "kind": "Function" }, { "name": "ValueOptions", "kind": "TypeAlias" }, + { "name": "virtualizationStateInitializer", "kind": "Variable" }, { "name": "viVN", "kind": "Variable" }, { "name": "zhCN", "kind": "Variable" }, { "name": "zhTW", "kind": "Variable" } diff --git a/test/utils/helperFn.ts b/test/utils/helperFn.ts index 7216af55c17b0..c0b808493e253 100644 --- a/test/utils/helperFn.ts +++ b/test/utils/helperFn.ts @@ -12,7 +12,7 @@ export function sleep(duration: number): Promise { } export function microtasks() { - return act(() => Promise.resolve()); + return act(() => Promise.resolve()) as unknown as Promise; } export function spyApi(api: GridApiCommon, methodName: string) { From e36310470c8b7d6292db36209b8ae24f7d7a24c1 Mon Sep 17 00:00:00 2001 From: Danail Hadjiatanasov Date: Fri, 22 Sep 2023 18:54:10 +0300 Subject: [PATCH 008/262] [release] v6.15.0 (#10432) --- CHANGELOG.md | 83 +++++++++++++++++++ package.json | 2 +- .../grid/x-data-grid-generator/package.json | 4 +- .../grid/x-data-grid-premium/package.json | 6 +- packages/grid/x-data-grid-pro/package.json | 4 +- packages/grid/x-data-grid/package.json | 2 +- packages/x-charts/package.json | 2 +- packages/x-date-pickers-pro/package.json | 4 +- packages/x-date-pickers/package.json | 2 +- packages/x-tree-view/package.json | 2 +- 10 files changed, 97 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 61a24c7212add..24f83999db595 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,89 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 6.15.0 + +_Sep 22, 2023_ + +We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨: + +- 🚀 Implement columns auto-sizing (#10180) @romgrk +- 🎁 Add support for `getRowsToExport` option to print export on the data grid (#10084) @zreecespieces +- 🌍 Improve Finnish (fi-FI) locale +- 🐞 Bugfixes +- 📚 Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@6.15.0` + +- [DataGrid] Add support for `getRowsToExport` option to print export (#10084) @zreecespieces +- [DataGrid] Fix dev warning about `InputLabelProps` (#10413) @romgrk +- [DataGrid] Refactor `GridMenu` prop `onClickAway` to `onClose` (#10411) @romgrk +- [DataGrid] Restore focus after `GridMenu` closes (#10412) @romgrk +- [DataGrid] Fix typing of `GridActionsCellItem` (#10344) @romgrk +- [DataGrid] Hide `eval` from bundlers (#10329) @romgrk +- [DataGrid] Add `border: 0` to unmounted focused cell to avoid layout shifts in that row (#10318) @lauri865 + +#### `@mui/x-data-grid-pro@6.15.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-data-grid@6.15.0`, plus: + +- [DataGridPro] Implement columns auto-sizing (#10180) @romgrk +- [DataGridPro] Fix keyboard navigation issue in header filters (#10358) @MBilalShafi +- [DataGridPro] Add missing row hover styles (#10252) @cherniavskii +- [DataGridPro] Make default filter items have stable references in header filters (#10338) @MBilalShafi + +#### `@mui/x-data-grid-premium@6.15.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan') + +Same changes as in `@mui/x-data-grid-pro@6.15.0`. + +### Date Pickers + +#### `@mui/x-date-pickers@6.15.0` + +- [pickers] Support tokens without spaces (#10185) @alexfauquette +- [l10n] Improve Finnish (fi-FI) locale (#10346) @samijouppila + +#### `@mui/x-date-pickers-pro@6.15.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-date-pickers@6.15.0`. + +### Charts / `@mui/x-charts@6.0.0-alpha.12` + +- [charts] Fix sparkline scale and rendering (#10402) @alexfauquette +- [charts] Remove components from `@mui/material` (#10115) @alexfauquette + +### Tree View / `@mui/x-tree-view@6.0.0-alpha.4` + +- [TreeView] Split features into plugins to prepare for Pro version (#10123) @flaviendelangle + +### Docs + +- [docs] Add charts documentation pages to complete pricing table (#10394) @alexfauquette +- [docs] Add missing MIT packages on the Licensing page (#10348) @flaviendelangle +- [docs] Clearer component pattern @oliviertassinari +- [docs] Easier to understand demo (#10370) @oliviertassinari +- [docs] Fix `301` to Material UI @oliviertassinari +- [docs] Improve the column visibility section (#10327) @MBilalShafi +- [docs] Improve the documentation section `rowIdentifier` (#10326) @MBilalShafi +- [docs] Improve pickers localization documentation (#10202) @flaviendelangle +- [docs] Polish typescript ref usage (#10359) @oliviertassinari +- [docs] Improve charts tooltip wording (#10406) @alexfauquette + +### Core + +- [core] Cleanup GitHub issues template (#10372) @romgrk +- [core] Fix Circle CI OOM (#10385) @romgrk +- [core] Improve sleep test helper @oliviertassinari +- [core] Remove unwanted prefixes @oliviertassinari +- [core] Remove duplicate label @oliviertassinari +- [core] Simplify source @oliviertassinari +- [core] Upgrade monorepo (#10425) @cherniavskii +- [core] Upgrade monorepo to have the new typescript-to-proptype (#10224) @flaviendelangle +- [test] Do not use deprecated adapter methods (#10416) @flaviendelangle +- [test] Name test suites according to sentence case (#10429) @alexfauquette + ## 6.14.0 _Sep 14, 2023_ diff --git a/package.json b/package.json index 5c5683b37cdf3..cb90e198fc71e 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "6.14.0", + "version": "6.15.0", "private": true, "scripts": { "start": "yarn && yarn docs:dev", diff --git a/packages/grid/x-data-grid-generator/package.json b/packages/grid/x-data-grid-generator/package.json index 0f04f326f1e85..ecf85eec399b0 100644 --- a/packages/grid/x-data-grid-generator/package.json +++ b/packages/grid/x-data-grid-generator/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-generator", - "version": "6.14.0", + "version": "6.15.0", "description": "Generate fake data for demo purposes only.", "author": "MUI Team", "main": "src/index.ts", @@ -32,7 +32,7 @@ "dependencies": { "@babel/runtime": "^7.22.15", "@mui/base": "^5.0.0-beta.14", - "@mui/x-data-grid-premium": "6.14.0", + "@mui/x-data-grid-premium": "6.15.0", "chance": "^1.1.11", "clsx": "^2.0.0", "lru-cache": "^7.18.3" diff --git a/packages/grid/x-data-grid-premium/package.json b/packages/grid/x-data-grid-premium/package.json index 603ac67a094d7..6d985a70afb06 100644 --- a/packages/grid/x-data-grid-premium/package.json +++ b/packages/grid/x-data-grid-premium/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-premium", - "version": "6.14.0", + "version": "6.15.0", "description": "The Premium plan edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,8 +44,8 @@ "dependencies": { "@babel/runtime": "^7.22.15", "@mui/utils": "^5.14.8", - "@mui/x-data-grid": "6.14.0", - "@mui/x-data-grid-pro": "6.14.0", + "@mui/x-data-grid": "6.15.0", + "@mui/x-data-grid-pro": "6.15.0", "@mui/x-license-pro": "6.10.2", "@types/format-util": "^1.0.2", "clsx": "^2.0.0", diff --git a/packages/grid/x-data-grid-pro/package.json b/packages/grid/x-data-grid-pro/package.json index 14e5dd5a1e34a..cd2d4685c4f84 100644 --- a/packages/grid/x-data-grid-pro/package.json +++ b/packages/grid/x-data-grid-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-pro", - "version": "6.14.0", + "version": "6.15.0", "description": "The Pro plan edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,7 +44,7 @@ "dependencies": { "@babel/runtime": "^7.22.15", "@mui/utils": "^5.14.8", - "@mui/x-data-grid": "6.14.0", + "@mui/x-data-grid": "6.15.0", "@mui/x-license-pro": "6.10.2", "@types/format-util": "^1.0.2", "clsx": "^2.0.0", diff --git a/packages/grid/x-data-grid/package.json b/packages/grid/x-data-grid/package.json index 63f4b6237db47..55c7179e72253 100644 --- a/packages/grid/x-data-grid/package.json +++ b/packages/grid/x-data-grid/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid", - "version": "6.14.0", + "version": "6.15.0", "description": "The community edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index affa868def69a..3972c8efc25a2 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-charts", - "version": "6.0.0-alpha.11", + "version": "6.0.0-alpha.12", "description": "The community edition of the charts components (MUI X).", "author": "MUI Team", "main": "./src/index.js", diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index 022b217d3f588..b42a261ff835a 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers-pro", - "version": "6.14.0", + "version": "6.15.0", "description": "The commercial edition of the date picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,7 +44,7 @@ "@babel/runtime": "^7.22.15", "@mui/base": "^5.0.0-beta.14", "@mui/utils": "^5.14.8", - "@mui/x-date-pickers": "6.14.0", + "@mui/x-date-pickers": "6.15.0", "@mui/x-license-pro": "6.10.2", "clsx": "^2.0.0", "prop-types": "^15.8.1", diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index bd0ba5187f08f..4ff4d20d127ea 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers", - "version": "6.14.0", + "version": "6.15.0", "description": "The community edition of the date picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json index 139678cc680a3..e4ed965c038b1 100644 --- a/packages/x-tree-view/package.json +++ b/packages/x-tree-view/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-tree-view", - "version": "6.0.0-alpha.3", + "version": "6.0.0-alpha.4", "description": "The community edition of the tree view components (MUI X).", "author": "MUI Team", "main": "src/index.ts", From 262402070e04aadf6843426e7c6d80dca8b43e90 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Sat, 23 Sep 2023 15:23:19 +0200 Subject: [PATCH 009/262] [docs] Fix usage of `GridRenderCellParams` interface (#10435) --- docs/data/data-grid/column-definition/column-definition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/data-grid/column-definition/column-definition.md b/docs/data/data-grid/column-definition/column-definition.md index 24e0ccb3237b8..fad00adc977bd 100644 --- a/docs/data/data-grid/column-definition/column-definition.md +++ b/docs/data/data-grid/column-definition/column-definition.md @@ -121,7 +121,7 @@ const columns: GridColDef[] = [ { field: 'date', headerName: 'Year', - renderCell: (params: GridRenderCellParams) => ( + renderCell: (params: GridRenderCellParams) => ( {params.value.getFullYear()} + ); +}); + +DateRangeButtonField.fieldType = 'single-input'; + +const ButtonDateRangePicker = React.forwardRef((props, ref) => { + const [open, setOpen] = React.useState(false); + + return ( + setOpen(false)} + onOpen={() => setOpen(true)} + /> + ); +}); + +export default function DateRangePickerWithButtonField() { + const [value, setValue] = React.useState([null, null]); + + return ( + + (date ? date.format('MM/DD/YYYY') : 'null')) + .join(' - ') + } + value={value} + onChange={(newValue) => setValue(newValue)} + /> + + ); +} diff --git a/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx b/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx new file mode 100644 index 0000000000000..8b597fac8c61a --- /dev/null +++ b/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx @@ -0,0 +1,91 @@ +import * as React from 'react'; +import { Dayjs } from 'dayjs'; +import Button from '@mui/material/Button'; +import useForkRef from '@mui/utils/useForkRef'; +import { DateRange } from '@mui/x-date-pickers-pro'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { + DateRangePicker, + DateRangePickerProps, +} from '@mui/x-date-pickers-pro/DateRangePicker'; +import { SingleInputDateRangeFieldProps } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; + +interface DateRangeButtonFieldProps extends SingleInputDateRangeFieldProps { + setOpen?: React.Dispatch>; +} + +type DateRangeButtonFieldComponent = (( + props: DateRangeButtonFieldProps & React.RefAttributes, +) => React.JSX.Element) & { fieldType?: string }; + +const DateRangeButtonField = React.forwardRef( + (props: DateRangeButtonFieldProps, ref: React.Ref) => { + const { + setOpen, + label, + id, + disabled, + InputProps: { ref: containerRef } = {}, + inputProps: { 'aria-label': ariaLabel } = {}, + } = props; + + const handleRef = useForkRef(ref, containerRef); + + return ( + + ); + }, +) as DateRangeButtonFieldComponent; + +DateRangeButtonField.fieldType = 'single-input'; + +const ButtonDateRangePicker = React.forwardRef( + ( + props: Omit, 'open' | 'onOpen' | 'onClose'>, + ref: React.Ref, + ) => { + const [open, setOpen] = React.useState(false); + + return ( + setOpen(false)} + onOpen={() => setOpen(true)} + /> + ); + }, +); + +export default function DateRangePickerWithButtonField() { + const [value, setValue] = React.useState>([null, null]); + + return ( + + (date ? date.format('MM/DD/YYYY') : 'null')) + .join(' - ') + } + value={value} + onChange={(newValue) => setValue(newValue)} + /> + + ); +} diff --git a/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx.preview b/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx.preview new file mode 100644 index 0000000000000..3a8d6daacd70e --- /dev/null +++ b/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx.preview @@ -0,0 +1,11 @@ + (date ? date.format('MM/DD/YYYY') : 'null')) + .join(' - ') + } + value={value} + onChange={(newValue) => setValue(newValue)} +/> \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/PickerWithButtonField.js b/docs/data/date-pickers/custom-field/PickerWithButtonField.js index fe6502169e812..255784386528b 100644 --- a/docs/data/date-pickers/custom-field/PickerWithButtonField.js +++ b/docs/data/date-pickers/custom-field/PickerWithButtonField.js @@ -1,7 +1,6 @@ import * as React from 'react'; import Button from '@mui/material/Button'; -import Stack from '@mui/material/Stack'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; @@ -25,7 +24,7 @@ function ButtonField(props) { aria-label={ariaLabel} onClick={() => setOpen?.((prev) => !prev)} > - {label ?? 'Pick a date'} + {label ? `Current date: ${label}` : 'Pick a date'} ); } @@ -50,15 +49,11 @@ export default function PickerWithButtonField() { return ( - - setValue(newValue)} - /> - + setValue(newValue)} + /> ); } diff --git a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx b/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx index e7137238b01cb..c8cfc01a1964e 100644 --- a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { Dayjs } from 'dayjs'; import Button from '@mui/material/Button'; -import Stack from '@mui/material/Stack'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker'; @@ -42,7 +41,7 @@ function ButtonField(props: ButtonFieldProps) { aria-label={ariaLabel} onClick={() => setOpen?.((prev) => !prev)} > - {label ?? 'Pick a date'} + {label ? `Current date: ${label}` : 'Pick a date'} ); } @@ -69,15 +68,11 @@ export default function PickerWithButtonField() { return ( - - setValue(newValue)} - /> - + setValue(newValue)} + /> ); } diff --git a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx.preview b/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx.preview index 77227d9491559..173a0ba169624 100644 --- a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx.preview +++ b/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx.preview @@ -1,7 +1,5 @@ setValue(newValue)} /> \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md index 5c1f7ffe99690..75582f09ea41c 100644 --- a/docs/data/date-pickers/custom-field/custom-field.md +++ b/docs/data/date-pickers/custom-field/custom-field.md @@ -93,6 +93,10 @@ you can replace the field with a `Button`: {{"demo": "PickerWithButtonField.js", "defaultCodeOpen": false}} +The same can be applied to the `DateRangePicker`: + +{{"demo": "DateRangePickerWithButtonField.js", "defaultCodeOpen": false}} + ## How to build a custom field The main challenge when building a custom field, is to make sure that all the relevant props passed by the pickers are correctly handled. From b655a4ea379ec271d765ad33b357f63b1212900f Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Wed, 4 Oct 2023 09:24:50 +0200 Subject: [PATCH 068/262] [DateRangePicker] Fix `InputProps` propagation in multi input (#10564) --- .../src/internals/hooks/useEnrichedRangePickerFieldProps.ts | 1 + packages/x-date-pickers-pro/src/internals/models/fields.ts | 6 ++---- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts index 9629c2757a041..86fe92ae1a6fc 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -216,6 +216,7 @@ const useMultiInputFieldSlotProps = ; - }; + InputProps?: Partial; } /** From e05c8e2ebc21ef75b556922a82fc4bade2d59c9f Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Wed, 4 Oct 2023 13:24:46 +0200 Subject: [PATCH 069/262] [DataGrid] Add a new demo with sparklines (#9228) Co-authored-by: Andrew Cherniavskyi --- .../column-definition/column-definition.md | 21 +- .../CustomColumnTypesGrid.js | 0 .../CustomColumnTypesGrid.tsx | 0 .../CustomColumnTypesGrid.tsx.preview | 0 .../EditingWithDatePickers.js | 0 .../EditingWithDatePickers.tsx | 0 .../EditingWithDatePickers.tsx.preview | 0 .../custom-columns/SparklineColumn.js | 193 ++++++++++++++++ .../custom-columns/SparklineColumn.tsx | 206 ++++++++++++++++++ .../SparklineColumn.tsx.preview | 1 + .../custom-columns/custom-columns.md | 51 +++++ .../data-grid/demo/PopularFeaturesDemo.js | 2 +- .../data-grid/demo/PopularFeaturesDemo.tsx | 2 +- .../recipes-editing/recipes-editing.md | 15 -- docs/data/pages.ts | 1 + .../pages/x/react-data-grid/custom-columns.js | 7 + 16 files changed, 463 insertions(+), 36 deletions(-) rename docs/data/data-grid/{column-definition => custom-columns}/CustomColumnTypesGrid.js (100%) rename docs/data/data-grid/{column-definition => custom-columns}/CustomColumnTypesGrid.tsx (100%) rename docs/data/data-grid/{column-definition => custom-columns}/CustomColumnTypesGrid.tsx.preview (100%) rename docs/data/data-grid/{recipes-editing => custom-columns}/EditingWithDatePickers.js (100%) rename docs/data/data-grid/{recipes-editing => custom-columns}/EditingWithDatePickers.tsx (100%) rename docs/data/data-grid/{recipes-editing => custom-columns}/EditingWithDatePickers.tsx.preview (100%) create mode 100644 docs/data/data-grid/custom-columns/SparklineColumn.js create mode 100644 docs/data/data-grid/custom-columns/SparklineColumn.tsx create mode 100644 docs/data/data-grid/custom-columns/SparklineColumn.tsx.preview create mode 100644 docs/data/data-grid/custom-columns/custom-columns.md create mode 100644 docs/pages/x/react-data-grid/custom-columns.js diff --git a/docs/data/data-grid/column-definition/column-definition.md b/docs/data/data-grid/column-definition/column-definition.md index fad00adc977bd..1c66b0e72c4ff 100644 --- a/docs/data/data-grid/column-definition/column-definition.md +++ b/docs/data/data-grid/column-definition/column-definition.md @@ -302,26 +302,9 @@ However, some types require additional properties to be set to make them work co {{"demo": "ColumnTypesGrid.js", "bg": "inline"}} -## Custom column types +### Custom column types -You can extend the native column types with your own by simply spreading the necessary properties. - -The demo below defines a new column type: `usdPrice` that extends the native `number` column type. - -```ts -const usdPrice: GridColTypeDef = { - type: 'number', - width: 130, - valueFormatter: ({ value }) => valueFormatter.format(Number(value)), - cellClassName: 'font-tabular-nums', -}; -``` - -{{"demo": "CustomColumnTypesGrid.js", "bg": "inline"}} - -:::info -If an unsupported column type is used, the `string` column type will be used instead. -::: +Please refer to the [custom columns](/x/react-data-grid/custom-columns/) page for documentation and integration examples. ## Selectors diff --git a/docs/data/data-grid/column-definition/CustomColumnTypesGrid.js b/docs/data/data-grid/custom-columns/CustomColumnTypesGrid.js similarity index 100% rename from docs/data/data-grid/column-definition/CustomColumnTypesGrid.js rename to docs/data/data-grid/custom-columns/CustomColumnTypesGrid.js diff --git a/docs/data/data-grid/column-definition/CustomColumnTypesGrid.tsx b/docs/data/data-grid/custom-columns/CustomColumnTypesGrid.tsx similarity index 100% rename from docs/data/data-grid/column-definition/CustomColumnTypesGrid.tsx rename to docs/data/data-grid/custom-columns/CustomColumnTypesGrid.tsx diff --git a/docs/data/data-grid/column-definition/CustomColumnTypesGrid.tsx.preview b/docs/data/data-grid/custom-columns/CustomColumnTypesGrid.tsx.preview similarity index 100% rename from docs/data/data-grid/column-definition/CustomColumnTypesGrid.tsx.preview rename to docs/data/data-grid/custom-columns/CustomColumnTypesGrid.tsx.preview diff --git a/docs/data/data-grid/recipes-editing/EditingWithDatePickers.js b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js similarity index 100% rename from docs/data/data-grid/recipes-editing/EditingWithDatePickers.js rename to docs/data/data-grid/custom-columns/EditingWithDatePickers.js diff --git a/docs/data/data-grid/recipes-editing/EditingWithDatePickers.tsx b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx similarity index 100% rename from docs/data/data-grid/recipes-editing/EditingWithDatePickers.tsx rename to docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx diff --git a/docs/data/data-grid/recipes-editing/EditingWithDatePickers.tsx.preview b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx.preview similarity index 100% rename from docs/data/data-grid/recipes-editing/EditingWithDatePickers.tsx.preview rename to docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx.preview diff --git a/docs/data/data-grid/custom-columns/SparklineColumn.js b/docs/data/data-grid/custom-columns/SparklineColumn.js new file mode 100644 index 0000000000000..9a98fe66bec15 --- /dev/null +++ b/docs/data/data-grid/custom-columns/SparklineColumn.js @@ -0,0 +1,193 @@ +import * as React from 'react'; +import { DataGrid, GRID_STRING_COL_DEF } from '@mui/x-data-grid'; +import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; + +function GridSparklineCell(props) { + if (props.value == null) { + return null; + } + + return ( + + ); +} + +const sparklineColumnType = { + ...GRID_STRING_COL_DEF, + resizable: false, + filterable: false, + sortable: false, + editable: false, + groupable: false, + renderCell: (params) => , +}; + +const columns = [ + { field: 'name', headerName: 'Package name', width: 180 }, + { + field: 'monthlyDownloads', + ...sparklineColumnType, + headerName: 'Monthly DLs (line)', + width: 150, + }, + { + field: 'monthlyDownloadsBar', + ...sparklineColumnType, + headerName: 'Monthly DLs (bar)', + renderCell: (params) => , + width: 150, + valueGetter: (params) => params.row.monthlyDownloads, + }, + { + field: 'lastMonthDownloads', + headerName: 'Last month DLs', + type: 'number', + valueGetter: (params) => + params.row.monthlyDownloads[params.row.monthlyDownloads.length - 1], + width: 150, + }, +]; + +export default function SparklineColumn() { + return ( +
+ +
+ ); +} + +const rows = [ + { + name: 'react-datepicker', + monthlyDownloads: [ + 469172, 488506, 592287, 617401, 640374, 632751, 668638, 807246, 749198, 944863, + 911787, 844815, 992022, 1143838, 1446926, 1267886, 1362511, 1348746, 1560533, + 1670690, 1695142, 1916613, 1823306, 1683646, 2025965, 2529989, 3263473, + 3296541, 3041524, 2599497, 2719473, 2610351, 2912067, 3079330, 2871077, + 2684197, 2852679, 3227844, 3867488, 3582735, 3454135, 3799207, 3813848, + 3839009, 4054869, 4319042, 4388671, 4149743, 4519686, 4810266, 5621007, + 5260194, 5563038, 5837767, 5342797, 6427653, 6611624, 6532709, 6886198, + 6071253, 6730371, 7097963, 8001343, 6867713, 7688481, + ], + id: 0, + }, + { + name: '@mui/x-date-pickers', + monthlyDownloads: [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 557488, 1341471, 2044561, 2206438, 2682543, 2772941, 2987705, 3264829, 2972821, + 3489759, 3698191, 4410492, 4201780, 4892509, + ], + id: 1, + }, + { + name: 'flatpickr', + monthlyDownloads: [ + 166896, 190041, 248686, 226746, 261744, 271890, 332176, 381123, 396435, 495620, + 520278, 460839, 704158, 559134, 681089, 712384, 765381, 771374, 851314, 907947, + 903675, 1049642, 1003160, 881573, 1072283, 1139115, 1382701, 1395655, 1355040, + 1381571, 1495175, 1513409, 1673240, 1772826, 1712051, 1641944, 1718714, + 1849475, 2226745, 2104910, 1967886, 2096636, 1991424, 2155674, 2263360, + 2261195, 2324734, 2075858, 2297512, 2368925, 2886678, 2543833, 2835623, + 2916036, 2638289, 3050516, 2950882, 3042688, 3290024, 2790747, 3196521, + 3146755, 3562973, 3082832, 3477021, + ], + id: 2, + }, + { + name: 'react-day-picker', + monthlyDownloads: [ + 264651, 311845, 436558, 439385, 520413, 533380, 562363, 533793, 558029, 791126, + 649082, 566792, 723451, 737827, 890859, 935554, 1044397, 1022973, 1129827, + 1145309, 1195630, 1358925, 1373160, 1172679, 1340106, 1396974, 1623641, + 1687545, 1581634, 1550291, 1718864, 1578447, 1618394, 1697784, 1564166, + 1400088, 1471853, 1730190, 1994936, 1786010, 1713263, 1839730, 1714299, + 1753411, 1885780, 1902870, 1970994, 1762571, 1989425, 2043994, 2476663, + 2151717, 2243360, 2371687, 2046381, 2468153, 2514297, 2660758, 2887687, + 2337575, 2700261, 2873230, 3323961, 3026604, 3244131, + ], + id: 3, + }, + { + name: 'react-dates', + monthlyDownloads: [ + 251871, 262216, 402383, 396459, 378793, 406720, 447538, 451451, 457111, 589821, + 640744, 504879, 626099, 662007, 754576, 768231, 833019, 851537, 972306, + 1014831, 1027570, 1189068, 1119099, 987244, 1197954, 1310721, 1480816, 1577547, + 1854053, 1791831, 1817336, 1757624, 1859245, 1814024, 1925249, 1867506, + 1892138, 2001963, 2538000, 2327809, 2277795, 2335804, 2278370, 2258587, + 2314794, 2376233, 2315449, 1948923, 2114500, 2208357, 2471023, 2172957, + 2349786, 2481612, 2283701, 2534949, 2351510, 2074785, 2170915, 1882137, + 2087930, 2423606, 3085474, 2656079, 2861712, + ], + id: 4, + }, + { + name: '@material-ui/pickers', + monthlyDownloads: [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 21003, 112544, 223356, 357258, + 427403, 592436, 643442, 652000, 851649, 997585, 1237884, 1323019, 1329075, + 1446751, 1603441, 1605489, 1770242, 1926553, 1957029, 1917431, 2047824, + 2342019, 2952485, 2850314, 2905856, 3145594, 3162610, 3356708, 3574777, + 3581429, 3588626, 3215994, 3209791, 3229263, 3577594, 2982893, 3072732, + 3083998, 2802316, 3345024, 3224987, 2853866, 2931270, 2419496, 2624119, + 2614166, 3072423, 2550430, 2605515, + ], + id: 5, + }, + { + name: 'react-calendar', + monthlyDownloads: [ + 13671, 16918, 27272, 34315, 42212, 56369, 64241, 77857, 70680, 91093, 108306, + 94734, 132289, 133860, 147706, 158504, 192578, 207173, 220052, 233496, 250091, + 285557, 280329, 262382, 330528, 337111, 398561, 452800, 432857, 452775, 541950, + 481764, 537173, 585916, 573412, 552463, 582320, 665610, 757420, 733958, 731212, + 786886, 793785, 836271, 899076, 950749, 981813, 913076, 1037772, 1111379, + 1372103, 1316354, 1353646, 1436614, 1349791, 1542007, 1549215, 1576125, + 1701436, 1477188, 1756447, 1804657, 2024066, 1802328, 1975321, + ], + id: 6, + }, + { + name: 'react-datetime', + monthlyDownloads: [ + 474506, 514529, 624998, 634955, 693156, 762051, 822194, 999794, 1028527, + 1264039, 1074500, 874769, 945614, 841453, 859657, 822025, 886668, 810302, + 849949, 872377, 783857, 887114, 789091, 698810, 800283, 789543, 919445, + 1026095, 1130903, 1021922, 971668, 922021, 875551, 849529, 891653, 806460, + 740611, 804504, 1008750, 1080174, 917512, 886872, 874670, 853764, 862825, + 894367, 919854, 807459, 858222, 858151, 967551, 897111, 902405, 944057, 879880, + 1090124, 1081206, 1026493, 1002294, 832895, 955662, 972831, 1166432, 1042367, + 1025499, + ], + id: 7, + }, + { + name: 'react-date-picker', + monthlyDownloads: [ + 49274, 48553, 64322, 58823, 59113, 66912, 70695, 74530, 66425, 84803, 86193, + 69178, 94987, 89205, 105340, 98078, 112268, 111998, 122224, 127661, 133198, + 138867, 128836, 120011, 158852, 154510, 175291, 197496, 224817, 194683, 220130, + 210720, 233037, 252119, 240970, 233944, 256490, 298853, 340486, 318831, 317291, + 335995, 336665, 343706, 356435, 376861, 379366, 355358, 408157, 425652, 499923, + 471759, 512219, 511044, 470863, 531581, 534128, 531059, 613792, 527997, 594540, + 637346, 788377, 721212, 644692, + ], + id: 8, + }, + { + name: '@react-spectrum/datepicker', + monthlyDownloads: [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 164, 691, 402, + 1239, 1536, 1853, 2163, 4151, 9644, 15667, 16426, 17786, 21804, 21358, 24062, + 30870, 34053, 35400, 37834, + ], + id: 9, + }, +]; diff --git a/docs/data/data-grid/custom-columns/SparklineColumn.tsx b/docs/data/data-grid/custom-columns/SparklineColumn.tsx new file mode 100644 index 0000000000000..3d74d9ff01b74 --- /dev/null +++ b/docs/data/data-grid/custom-columns/SparklineColumn.tsx @@ -0,0 +1,206 @@ +import * as React from 'react'; +import { + DataGrid, + GridColDef, + GridRowsProp, + GridColTypeDef, + GridRenderCellParams, + GRID_STRING_COL_DEF, +} from '@mui/x-data-grid'; +import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; + +type SparkLineChartProps = React.ComponentProps; + +function GridSparklineCell( + props: GridRenderCellParams & { + plotType?: SparkLineChartProps['plotType']; + }, +) { + if (props.value == null) { + return null; + } + + return ( + + ); +} + +const sparklineColumnType: GridColTypeDef = { + ...GRID_STRING_COL_DEF, + resizable: false, + filterable: false, + sortable: false, + editable: false, + groupable: false, + renderCell: (params) => , +}; + +const columns: GridColDef[] = [ + { field: 'name', headerName: 'Package name', width: 180 }, + { + field: 'monthlyDownloads', + ...sparklineColumnType, + headerName: 'Monthly DLs (line)', + width: 150, + }, + { + field: 'monthlyDownloadsBar', + ...sparklineColumnType, + headerName: 'Monthly DLs (bar)', + renderCell: (params) => , + width: 150, + valueGetter: (params) => params.row.monthlyDownloads, + }, + { + field: 'lastMonthDownloads', + headerName: 'Last month DLs', + type: 'number', + valueGetter: (params) => + params.row.monthlyDownloads[params.row.monthlyDownloads.length - 1], + width: 150, + }, +]; + +export default function SparklineColumn() { + return ( +
+ +
+ ); +} + +const rows: GridRowsProp = [ + { + name: 'react-datepicker', + monthlyDownloads: [ + 469172, 488506, 592287, 617401, 640374, 632751, 668638, 807246, 749198, 944863, + 911787, 844815, 992022, 1143838, 1446926, 1267886, 1362511, 1348746, 1560533, + 1670690, 1695142, 1916613, 1823306, 1683646, 2025965, 2529989, 3263473, + 3296541, 3041524, 2599497, 2719473, 2610351, 2912067, 3079330, 2871077, + 2684197, 2852679, 3227844, 3867488, 3582735, 3454135, 3799207, 3813848, + 3839009, 4054869, 4319042, 4388671, 4149743, 4519686, 4810266, 5621007, + 5260194, 5563038, 5837767, 5342797, 6427653, 6611624, 6532709, 6886198, + 6071253, 6730371, 7097963, 8001343, 6867713, 7688481, + ], + id: 0, + }, + { + name: '@mui/x-date-pickers', + monthlyDownloads: [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 557488, 1341471, 2044561, 2206438, 2682543, 2772941, 2987705, 3264829, 2972821, + 3489759, 3698191, 4410492, 4201780, 4892509, + ], + id: 1, + }, + { + name: 'flatpickr', + monthlyDownloads: [ + 166896, 190041, 248686, 226746, 261744, 271890, 332176, 381123, 396435, 495620, + 520278, 460839, 704158, 559134, 681089, 712384, 765381, 771374, 851314, 907947, + 903675, 1049642, 1003160, 881573, 1072283, 1139115, 1382701, 1395655, 1355040, + 1381571, 1495175, 1513409, 1673240, 1772826, 1712051, 1641944, 1718714, + 1849475, 2226745, 2104910, 1967886, 2096636, 1991424, 2155674, 2263360, + 2261195, 2324734, 2075858, 2297512, 2368925, 2886678, 2543833, 2835623, + 2916036, 2638289, 3050516, 2950882, 3042688, 3290024, 2790747, 3196521, + 3146755, 3562973, 3082832, 3477021, + ], + id: 2, + }, + { + name: 'react-day-picker', + monthlyDownloads: [ + 264651, 311845, 436558, 439385, 520413, 533380, 562363, 533793, 558029, 791126, + 649082, 566792, 723451, 737827, 890859, 935554, 1044397, 1022973, 1129827, + 1145309, 1195630, 1358925, 1373160, 1172679, 1340106, 1396974, 1623641, + 1687545, 1581634, 1550291, 1718864, 1578447, 1618394, 1697784, 1564166, + 1400088, 1471853, 1730190, 1994936, 1786010, 1713263, 1839730, 1714299, + 1753411, 1885780, 1902870, 1970994, 1762571, 1989425, 2043994, 2476663, + 2151717, 2243360, 2371687, 2046381, 2468153, 2514297, 2660758, 2887687, + 2337575, 2700261, 2873230, 3323961, 3026604, 3244131, + ], + id: 3, + }, + { + name: 'react-dates', + monthlyDownloads: [ + 251871, 262216, 402383, 396459, 378793, 406720, 447538, 451451, 457111, 589821, + 640744, 504879, 626099, 662007, 754576, 768231, 833019, 851537, 972306, + 1014831, 1027570, 1189068, 1119099, 987244, 1197954, 1310721, 1480816, 1577547, + 1854053, 1791831, 1817336, 1757624, 1859245, 1814024, 1925249, 1867506, + 1892138, 2001963, 2538000, 2327809, 2277795, 2335804, 2278370, 2258587, + 2314794, 2376233, 2315449, 1948923, 2114500, 2208357, 2471023, 2172957, + 2349786, 2481612, 2283701, 2534949, 2351510, 2074785, 2170915, 1882137, + 2087930, 2423606, 3085474, 2656079, 2861712, + ], + id: 4, + }, + { + name: '@material-ui/pickers', + monthlyDownloads: [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 21003, 112544, 223356, 357258, + 427403, 592436, 643442, 652000, 851649, 997585, 1237884, 1323019, 1329075, + 1446751, 1603441, 1605489, 1770242, 1926553, 1957029, 1917431, 2047824, + 2342019, 2952485, 2850314, 2905856, 3145594, 3162610, 3356708, 3574777, + 3581429, 3588626, 3215994, 3209791, 3229263, 3577594, 2982893, 3072732, + 3083998, 2802316, 3345024, 3224987, 2853866, 2931270, 2419496, 2624119, + 2614166, 3072423, 2550430, 2605515, + ], + id: 5, + }, + { + name: 'react-calendar', + monthlyDownloads: [ + 13671, 16918, 27272, 34315, 42212, 56369, 64241, 77857, 70680, 91093, 108306, + 94734, 132289, 133860, 147706, 158504, 192578, 207173, 220052, 233496, 250091, + 285557, 280329, 262382, 330528, 337111, 398561, 452800, 432857, 452775, 541950, + 481764, 537173, 585916, 573412, 552463, 582320, 665610, 757420, 733958, 731212, + 786886, 793785, 836271, 899076, 950749, 981813, 913076, 1037772, 1111379, + 1372103, 1316354, 1353646, 1436614, 1349791, 1542007, 1549215, 1576125, + 1701436, 1477188, 1756447, 1804657, 2024066, 1802328, 1975321, + ], + id: 6, + }, + { + name: 'react-datetime', + monthlyDownloads: [ + 474506, 514529, 624998, 634955, 693156, 762051, 822194, 999794, 1028527, + 1264039, 1074500, 874769, 945614, 841453, 859657, 822025, 886668, 810302, + 849949, 872377, 783857, 887114, 789091, 698810, 800283, 789543, 919445, + 1026095, 1130903, 1021922, 971668, 922021, 875551, 849529, 891653, 806460, + 740611, 804504, 1008750, 1080174, 917512, 886872, 874670, 853764, 862825, + 894367, 919854, 807459, 858222, 858151, 967551, 897111, 902405, 944057, 879880, + 1090124, 1081206, 1026493, 1002294, 832895, 955662, 972831, 1166432, 1042367, + 1025499, + ], + id: 7, + }, + { + name: 'react-date-picker', + monthlyDownloads: [ + 49274, 48553, 64322, 58823, 59113, 66912, 70695, 74530, 66425, 84803, 86193, + 69178, 94987, 89205, 105340, 98078, 112268, 111998, 122224, 127661, 133198, + 138867, 128836, 120011, 158852, 154510, 175291, 197496, 224817, 194683, 220130, + 210720, 233037, 252119, 240970, 233944, 256490, 298853, 340486, 318831, 317291, + 335995, 336665, 343706, 356435, 376861, 379366, 355358, 408157, 425652, 499923, + 471759, 512219, 511044, 470863, 531581, 534128, 531059, 613792, 527997, 594540, + 637346, 788377, 721212, 644692, + ], + id: 8, + }, + { + name: '@react-spectrum/datepicker', + monthlyDownloads: [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 164, 691, 402, + 1239, 1536, 1853, 2163, 4151, 9644, 15667, 16426, 17786, 21804, 21358, 24062, + 30870, 34053, 35400, 37834, + ], + id: 9, + }, +]; diff --git a/docs/data/data-grid/custom-columns/SparklineColumn.tsx.preview b/docs/data/data-grid/custom-columns/SparklineColumn.tsx.preview new file mode 100644 index 0000000000000..074afd47c4411 --- /dev/null +++ b/docs/data/data-grid/custom-columns/SparklineColumn.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/custom-columns/custom-columns.md b/docs/data/data-grid/custom-columns/custom-columns.md new file mode 100644 index 0000000000000..b876943dcea21 --- /dev/null +++ b/docs/data/data-grid/custom-columns/custom-columns.md @@ -0,0 +1,51 @@ +# Data Grid - Custom columns + +

Create custom column types.

+ +You can extend the [built-in column types](/x/react-data-grid/column-definition/#column-types) with your own by simply spreading the necessary properties. + +The demo below defines a new column type: `usdPrice` that extends the native `number` column type. + +```ts +const usdPrice: GridColTypeDef = { + type: 'number', + width: 130, + valueFormatter: ({ value }) => valueFormatter.format(Number(value)), + cellClassName: 'font-tabular-nums', +}; +``` + +{{"demo": "CustomColumnTypesGrid.js", "bg": "inline"}} + +:::info +If an unsupported column type is used, the `string` column type will be used instead. +::: + +## Sparkline + +Sparkline charts can be useful as an overview of data trends. + +In the demo below, we create a custom column type using the `GridColTypeDef` interface and use the [Sparkline](/x/react-charts/sparkline/) component from [`@mui/x-charts`](/x/react-charts/) package in the [`renderCell`](/x/react-data-grid/column-definition/#rendering-cells) property. + +{{"demo": "SparklineColumn.js", "bg": "inline"}} + +## Date pickers + +By default, the data grid uses native browser inputs for editing `date` and `dateTime` columns. + +While [MUI X Date / Time Pickers](/x/react-date-pickers/getting-started/) are not supported by the data grid out of the box yet, it is easy to integrate them by creating [custom edit components](/x/react-data-grid/editing/#create-your-own-edit-component) and [custom filter operators](/x/react-data-grid/filtering/customization/#create-a-custom-operator). + +The example below uses `@mui/x-date-pickers` for both `date` and `dateTime` column types: + +{{"demo": "EditingWithDatePickers.js", "bg": "inline", "defaultCodeOpen": false }} + +:::warning +You can change date format by importing different locale (`en-US` locale is used in the example above). +See [Localization](/x/react-date-pickers/localization/) for more information. +::: + +## API + +- [DataGrid](/x/api/data-grid/data-grid/) +- [DataGridPro](/x/api/data-grid/data-grid-pro/) +- [DataGridPremium](/x/api/data-grid/data-grid-premium/) diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.js b/docs/data/data-grid/demo/PopularFeaturesDemo.js index 2ebb71910fb3e..650a75f6b272e 100644 --- a/docs/data/data-grid/demo/PopularFeaturesDemo.js +++ b/docs/data/data-grid/demo/PopularFeaturesDemo.js @@ -28,7 +28,7 @@ import ColumnVirtualizationGrid from '../virtualization/ColumnVirtualizationGrid import FullFeaturedDemo from './FullFeaturedDemo'; import LazyLoadingGrid from '../row-updates/LazyLoadingGrid'; import BasicGroupingDemo from '../column-groups/BasicGroupingDemo'; -import EditingWithDatePickers from '../recipes-editing/EditingWithDatePickers'; +import EditingWithDatePickers from '../custom-columns/EditingWithDatePickers'; import CellSelectionGrid from '../cell-selection/CellSelectionRangeStyling'; import AddNewColumnMenuGrid from '../column-menu/AddNewColumnMenuGrid'; import HeaderFilteringDataGridPro from '../filtering/HeaderFilteringDataGridPro'; diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx index 52e9484d115e7..a1785921e1a0c 100644 --- a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx +++ b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx @@ -33,7 +33,7 @@ import ColumnVirtualizationGrid from '../virtualization/ColumnVirtualizationGrid import FullFeaturedDemo from './FullFeaturedDemo'; import LazyLoadingGrid from '../row-updates/LazyLoadingGrid'; import BasicGroupingDemo from '../column-groups/BasicGroupingDemo'; -import EditingWithDatePickers from '../recipes-editing/EditingWithDatePickers'; +import EditingWithDatePickers from '../custom-columns/EditingWithDatePickers'; import CellSelectionGrid from '../cell-selection/CellSelectionRangeStyling'; import AddNewColumnMenuGrid from '../column-menu/AddNewColumnMenuGrid'; import HeaderFilteringDataGridPro from '../filtering/HeaderFilteringDataGridPro'; diff --git a/docs/data/data-grid/recipes-editing/recipes-editing.md b/docs/data/data-grid/recipes-editing/recipes-editing.md index 30e93b5b796cd..921364a26ff6a 100644 --- a/docs/data/data-grid/recipes-editing/recipes-editing.md +++ b/docs/data/data-grid/recipes-editing/recipes-editing.md @@ -105,18 +105,3 @@ Using the [controlled mode](/x/react-data-grid/editing/#controlled-model) and li The following demo implements this behavior. {{"demo": "SingleClickEditing.js", "bg": "inline", "defaultCodeOpen": false}} - -## Usage with `@mui/x-date-pickers` - -By default, the data grid uses native browser inputs for editing `date` and `dateTime` columns. - -While [MUI X Date / Time Pickers](/x/react-date-pickers/getting-started/) are not supported by the data grid out of the box yet, it is easy to integrate them by creating [custom edit components](/x/react-data-grid/editing/#create-your-own-edit-component) and [custom filter operators](/x/react-data-grid/filtering/customization/#create-a-custom-operator). - -The example below uses `@mui/x-date-pickers` for both `date` and `dateTime` column types: - -{{"demo": "EditingWithDatePickers.js", "bg": "inline", "defaultCodeOpen": false }} - -:::warning -You can change date format by importing different locale (`en-US` locale is used in the example above). -See [Localization](/x/react-date-pickers/localization/) for more information. -::: diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 2d904f17cf5f4..169b45182e22c 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -36,6 +36,7 @@ const pages: MuiPage[] = [ { pathname: '/x/react-data-grid/column-definition' }, { pathname: '/x/react-data-grid/column-dimensions' }, { pathname: '/x/react-data-grid/column-visibility' }, + { pathname: '/x/react-data-grid/custom-columns' }, { pathname: '/x/react-data-grid/column-header' }, { pathname: '/x/react-data-grid/column-menu' }, { pathname: '/x/react-data-grid/column-spanning' }, diff --git a/docs/pages/x/react-data-grid/custom-columns.js b/docs/pages/x/react-data-grid/custom-columns.js new file mode 100644 index 0000000000000..4af41a45ef3d2 --- /dev/null +++ b/docs/pages/x/react-data-grid/custom-columns.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/data-grid/custom-columns/custom-columns.md?@mui/markdown'; + +export default function Page() { + return ; +} From a9724b68f4d623a9ab01ac766e6afcd34ce3eb6a Mon Sep 17 00:00:00 2001 From: Lukas Date: Wed, 4 Oct 2023 14:42:40 +0300 Subject: [PATCH 070/262] [pickers] Avoid calendar layout shifting when changing views (#10541) --- .../custom-components/PopperComponent.js | 46 ------------------- .../custom-components/PopperComponent.tsx | 46 ------------------- .../custom-components/custom-components.md | 12 ----- .../src/DateCalendar/DateCalendar.tsx | 2 + .../PickersFadeTransitionGroup.tsx | 15 +++--- .../DateCalendar/PickersSlideTransition.tsx | 11 ++--- .../src/MonthCalendar/MonthCalendar.tsx | 5 +- .../src/YearCalendar/PickersYear.tsx | 2 +- .../src/YearCalendar/YearCalendar.tsx | 10 ++-- .../src/internals/constants/dimensions.ts | 3 +- 10 files changed, 29 insertions(+), 123 deletions(-) delete mode 100644 docs/data/date-pickers/custom-components/PopperComponent.js delete mode 100644 docs/data/date-pickers/custom-components/PopperComponent.tsx diff --git a/docs/data/date-pickers/custom-components/PopperComponent.js b/docs/data/date-pickers/custom-components/PopperComponent.js deleted file mode 100644 index 70f7953d408c9..0000000000000 --- a/docs/data/date-pickers/custom-components/PopperComponent.js +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; -import dayjs from 'dayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; - -export default function PopperComponent() { - return ( - - { - state.styles.popper.height = '320px'; - if (state.placement.includes('top-start')) { - state.styles.popper = { - ...state.styles.popper, - display: 'flex', - alignItems: 'flex-end', - }; - } - if (state.placement.includes('bottom')) { - state.styles.popper = { - ...state.styles.popper, - display: 'block', - }; - } - }, - }, - ], - }, - }} - /> - - ); -} diff --git a/docs/data/date-pickers/custom-components/PopperComponent.tsx b/docs/data/date-pickers/custom-components/PopperComponent.tsx deleted file mode 100644 index a43dcdae9a9a5..0000000000000 --- a/docs/data/date-pickers/custom-components/PopperComponent.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; -import dayjs from 'dayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; - -export default function PopperComponent() { - return ( - - }) => { - state.styles.popper.height = '320px'; - if (state.placement.includes('top-start')) { - state.styles.popper = { - ...state.styles.popper, - display: 'flex', - alignItems: 'flex-end', - }; - } - if (state.placement.includes('bottom')) { - state.styles.popper = { - ...state.styles.popper, - display: 'block', - }; - } - }, - }, - ], - }, - }} - /> - - ); -} diff --git a/docs/data/date-pickers/custom-components/custom-components.md b/docs/data/date-pickers/custom-components/custom-components.md index c1f8d245df02c..4be9f3716073f 100644 --- a/docs/data/date-pickers/custom-components/custom-components.md +++ b/docs/data/date-pickers/custom-components/custom-components.md @@ -236,18 +236,6 @@ You can pass custom components—to replace the icons, for example—as shown be {{"demo": "ArrowSwitcherComponent.js", "defaultCodeOpen": false}} -## Popper - -You can customize the popper that wraps the desktop picker views the same way you would customize the [Material UI Popper](/material-ui/react-popper/). - -:::info -When the picker views have different heights, there might be a layout shift if there is not enough space in the viewport for one of the views **below** the input field. This is particularly noticeable if the selection of allowed years is very limited and there is a significant height difference between the views. You can refer to issues [#5490](https://github.com/mui/mui-x/issues/5490) and [#9288](https://github.com/mui/mui-x/issues/9288) for more examples. - -You can avoid this by customizing the popper height. This will not produce any visual changes, as the popper that wraps the pickers is transparent. -::: - -{{"demo": "PopperComponent.js", "defaultCodeOpen": true}} - ## Shortcuts You can add shortcuts to every pickers. diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx index 90519d8c84fe1..ab402c9977ab0 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx @@ -28,6 +28,7 @@ import { getDateCalendarUtilityClass } from './dateCalendarClasses'; import { BaseDateValidationProps } from '../internals/models/validation'; import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone'; import { singleItemValueManager } from '../internals/utils/valueManagers'; +import { VIEW_HEIGHT } from '../internals/constants/dimensions'; const useUtilityClasses = (ownerState: DateCalendarProps) => { const { classes } = ownerState; @@ -73,6 +74,7 @@ const DateCalendarRoot = styled(PickerViewRoot, { })<{ ownerState: DateCalendarProps }>({ display: 'flex', flexDirection: 'column', + height: VIEW_HEIGHT, }); const DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, { diff --git a/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx b/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx index 4eb328dd27a35..f82497ffc0199 100644 --- a/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx +++ b/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import clsx from 'clsx'; -import Fade from '@mui/material/Fade'; -import { styled, useThemeProps } from '@mui/material/styles'; -import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { TransitionGroup } from 'react-transition-group'; +import Fade from '@mui/material/Fade'; +import { styled, useTheme, useThemeProps } from '@mui/material/styles'; +import composeClasses from '@mui/utils/composeClasses'; import { getPickersFadeTransitionGroupUtilityClass, PickersFadeTransitionGroupClasses, @@ -26,8 +26,6 @@ const useUtilityClasses = (ownerState: PickersFadeTransitionGroupProps) => { return composeClasses(slots, getPickersFadeTransitionGroupUtilityClass, classes); }; -const animationDuration = 500; - const PickersFadeTransitionGroupRoot = styled(TransitionGroup, { name: 'MuiPickersFadeTransitionGroup', slot: 'Root', @@ -44,6 +42,7 @@ export function PickersFadeTransitionGroup(inProps: PickersFadeTransitionGroupPr const props = useThemeProps({ props: inProps, name: 'MuiPickersFadeTransitionGroup' }); const { children, className, reduceAnimations, transKey } = props; const classes = useUtilityClasses(props); + const theme = useTheme(); if (reduceAnimations) { return children; } @@ -55,7 +54,11 @@ export function PickersFadeTransitionGroup(inProps: PickersFadeTransitionGroupPr mountOnEnter unmountOnExit key={transKey} - timeout={{ appear: animationDuration, enter: animationDuration / 2, exit: 0 }} + timeout={{ + appear: theme.transitions.duration.enteringScreen, + enter: theme.transitions.duration.enteringScreen, + exit: 0, + }} > {children} diff --git a/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx b/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx index c1e65b71d3ea3..0e724659752c4 100644 --- a/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx +++ b/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; -import { styled, useThemeProps } from '@mui/material/styles'; -import { unstable_composeClasses as composeClasses } from '@mui/utils'; +import { styled, useTheme, useThemeProps } from '@mui/material/styles'; +import composeClasses from '@mui/utils/composeClasses'; import { CSSTransition, TransitionGroup } from 'react-transition-group'; import { CSSTransitionProps } from 'react-transition-group/CSSTransition'; import { TransitionGroupProps } from 'react-transition-group/TransitionGroup'; @@ -38,8 +38,6 @@ const useUtilityClasses = (ownerState: SlideTransitionProps) => { return composeClasses(slots, getPickersSlideTransitionUtilityClass, classes); }; -export const slideAnimationDuration = 350; - const PickersSlideTransitionRoot = styled(TransitionGroup, { name: 'MuiPickersSlideTransition', slot: 'Root', @@ -60,7 +58,7 @@ const PickersSlideTransitionRoot = styled(TransitionGroup, { ], })(({ theme }) => { const slideTransition = theme.transitions.create('transform', { - duration: slideAnimationDuration, + duration: theme.transitions.duration.complex, easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)', }); return { @@ -121,6 +119,7 @@ export function PickersSlideTransition(inProps: SlideTransitionProps) { ...other } = props; const classes = useUtilityClasses(props); + const theme = useTheme(); if (reduceAnimations) { return
{children}
; } @@ -146,7 +145,7 @@ export function PickersSlideTransition(inProps: SlideTransitionProps) { mountOnEnter unmountOnExit key={transKey} - timeout={slideAnimationDuration} + timeout={theme.transitions.duration.complex} classNames={transitionClasses} {...other} > diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx index 9ae4ca908b297..126dc0380d952 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx @@ -17,6 +17,7 @@ import { MonthCalendarProps } from './MonthCalendar.types'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate'; import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone'; +import { DIALOG_WIDTH } from '../internals/constants/dimensions'; const useUtilityClasses = (ownerState: MonthCalendarProps) => { const { classes } = ownerState; @@ -60,7 +61,9 @@ const MonthCalendarRoot = styled('div', { flexWrap: 'wrap', alignContent: 'stretch', padding: '0 4px', - width: 320, + width: DIALOG_WIDTH, + // avoid padding increasing width over defined + boxSizing: 'border-box', }); type MonthCalendarComponent = (( diff --git a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx b/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx index ef0dee84d8ea5..8dce10be09ffb 100644 --- a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx +++ b/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx @@ -64,7 +64,7 @@ const PickersYearButton = styled('button', { border: 0, outline: 0, ...theme.typography.subtitle1, - margin: '8px 0', + margin: '6px 0', height: 36, width: 72, borderRadius: 18, diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx index b489b47f2ab85..b3a6c069f4b1c 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx @@ -18,6 +18,7 @@ import { YearCalendarProps } from './YearCalendar.types'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate'; import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone'; +import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from '../internals/constants/dimensions'; const useUtilityClasses = (ownerState: YearCalendarProps) => { const { classes } = ownerState; @@ -34,7 +35,7 @@ function useYearCalendarDefaultizedProps( name: string, ): DefaultizedProps< YearCalendarProps, - 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast' + 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast' | 'yearsPerRow' > { const utils = useUtils(); const defaultDates = useDefaultDates(); @@ -47,6 +48,7 @@ function useYearCalendarDefaultizedProps( disablePast: false, disableFuture: false, ...themeProps, + yearsPerRow: themeProps.yearsPerRow ?? 3, minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate), maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate), }; @@ -63,8 +65,8 @@ const YearCalendarRoot = styled('div', { overflowY: 'auto', height: '100%', padding: '0 4px', - width: 320, - maxHeight: 304, + width: DIALOG_WIDTH, + maxHeight: MAX_CALENDAR_HEIGHT, // avoid padding increasing width over defined boxSizing: 'border-box', position: 'relative', @@ -97,7 +99,7 @@ export const YearCalendar = React.forwardRef(function YearCalendar( onYearFocus, hasFocus, onFocusedViewChange, - yearsPerRow = 3, + yearsPerRow, timezone: timezoneProp, gridLabelId, ...other diff --git a/packages/x-date-pickers/src/internals/constants/dimensions.ts b/packages/x-date-pickers/src/internals/constants/dimensions.ts index 6a97a3b59695a..79278d058b135 100644 --- a/packages/x-date-pickers/src/internals/constants/dimensions.ts +++ b/packages/x-date-pickers/src/internals/constants/dimensions.ts @@ -1,6 +1,7 @@ export const DAY_SIZE = 36; export const DAY_MARGIN = 2; export const DIALOG_WIDTH = 320; -export const VIEW_HEIGHT = 358; +export const MAX_CALENDAR_HEIGHT = 280; +export const VIEW_HEIGHT = 334; export const DIGITAL_CLOCK_VIEW_HEIGHT = 232; export const MULTI_SECTION_CLOCK_SECTION_WIDTH = 48; From 9b81a6e1aafa7850b2f8d1718ce3b57aab926d08 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 17:02:57 +0300 Subject: [PATCH 071/262] Bump @octokit/rest to ^20.0.2 (#10521) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 36 ++++++++++++++++++------------------ 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index d59a47d25f57d..5622ab15dd44a 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ "@mui/monorepo": "https://github.com/mui/material-ui.git#master", "@mui/utils": "^5.14.11", "@octokit/plugin-retry": "^6.0.1", - "@octokit/rest": "^20.0.1", + "@octokit/rest": "^20.0.2", "@playwright/test": "1.38.1", "@testing-library/react": "^14.0.0", "@types/babel__core": "^7.20.2", diff --git a/yarn.lock b/yarn.lock index 9830c2e406048..b0f81cfd2264b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2294,12 +2294,12 @@ "@octokit/tsconfig" "^1.0.2" "@octokit/types" "^9.2.3" -"@octokit/plugin-paginate-rest@^8.0.0": - version "8.0.0" - resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-8.0.0.tgz#417b5367da2ba3c2d255a59b87c1cc608228ec38" - integrity sha512-2xZ+baZWUg+qudVXnnvXz7qfrTmDeYPCzangBVq/1gXxii/OiS//4shJp9dnCCvj1x+JAm9ji1Egwm1BA47lPQ== +"@octokit/plugin-paginate-rest@^9.0.0": + version "9.0.0" + resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-9.0.0.tgz#21fd12816c2dc158a775ed20be5abcbc61052a46" + integrity sha512-oIJzCpttmBTlEhBmRvb+b9rlnGpmFgDtZ0bB6nq39qIod6A5DP+7RkVLMOixIgRCYSHDTeayWqmiJ2SZ6xgfdw== dependencies: - "@octokit/types" "^11.0.0" + "@octokit/types" "^12.0.0" "@octokit/plugin-request-log@^1.0.4": version "1.0.4" @@ -2311,6 +2311,13 @@ resolved "https://registry.yarnpkg.com/@octokit/plugin-request-log/-/plugin-request-log-4.0.0.tgz#260fa6970aa97bbcbd91f99f3cd812e2b285c9f1" integrity sha512-2uJI1COtYCq8Z4yNSnM231TgH50bRkheQ9+aH8TnZanB6QilOnx8RMD2qsnamSOXtDj0ilxvevf5fGsBhBBzKA== +"@octokit/plugin-rest-endpoint-methods@^10.0.0": + version "10.0.0" + resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-10.0.0.tgz#040b36d6a15d4c7c534b0f44050051225f884cae" + integrity sha512-16VkwE2v6rXU+/gBsYC62M8lKWOphY5Lg4wpjYnVE9Zbu0J6IwiT5kILoj1YOB53XLmcJR+Nqp8DmifOPY4H3g== + dependencies: + "@octokit/types" "^12.0.0" + "@octokit/plugin-rest-endpoint-methods@^5.12.0": version "5.13.0" resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.13.0.tgz#8c46109021a3412233f6f50d28786f8e552427ba" @@ -2327,13 +2334,6 @@ "@octokit/types" "^9.2.3" deprecation "^2.3.1" -"@octokit/plugin-rest-endpoint-methods@^9.0.0": - version "9.0.0" - resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-9.0.0.tgz#e15d54540893202da107305ded2bfd21ce6f769d" - integrity sha512-KquMF/VB1IkKNiVnzJKspY5mFgGyLd7HzdJfVEGTJFzqu9BRFNWt+nwTCMuUiWc72gLQhRWYubTwOkQj+w/1PA== - dependencies: - "@octokit/types" "^11.0.0" - "@octokit/plugin-retry@^6.0.1": version "6.0.1" resolved "https://registry.yarnpkg.com/@octokit/plugin-retry/-/plugin-retry-6.0.1.tgz#3257404f7cc418e1c1f13a7f2012c1db848b7693" @@ -2425,15 +2425,15 @@ "@octokit/plugin-request-log" "^1.0.4" "@octokit/plugin-rest-endpoint-methods" "^5.12.0" -"@octokit/rest@^20.0.1": - version "20.0.1" - resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-20.0.1.tgz#b8ee194b7cf89772d1e3fea3209f741c76a5efd3" - integrity sha512-wROV21RwHQIMNb2Dgd4+pY+dVy1Dwmp85pBrgr6YRRDYRBu9Gb+D73f4Bl2EukZSj5hInq2Tui9o7gAQpc2k2Q== +"@octokit/rest@^20.0.2": + version "20.0.2" + resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-20.0.2.tgz#5cc8871ba01b14604439049e5f06c74b45c99594" + integrity sha512-Ux8NDgEraQ/DMAU1PlAohyfBBXDwhnX2j33Z1nJNziqAfHi70PuxkFYIcIt8aIAxtRE7KVuKp8lSR8pA0J5iOQ== dependencies: "@octokit/core" "^5.0.0" - "@octokit/plugin-paginate-rest" "^8.0.0" + "@octokit/plugin-paginate-rest" "^9.0.0" "@octokit/plugin-request-log" "^4.0.0" - "@octokit/plugin-rest-endpoint-methods" "^9.0.0" + "@octokit/plugin-rest-endpoint-methods" "^10.0.0" "@octokit/tsconfig@^1.0.2": version "1.0.2" From 6a2ccf9a528dcbfbe4104aee7b36e9062bd2600c Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 17:05:17 +0300 Subject: [PATCH 072/262] Bump @types/mocha to ^10.0.2 (#10522) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 5622ab15dd44a..c0d164cdb045a 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ "@types/chai": "^4.3.6", "@types/chai-dom": "^1.11.1", "@types/enzyme": "^3.10.12", - "@types/mocha": "^10.0.1", + "@types/mocha": "^10.0.2", "@types/node": "^18.18.0", "@types/prettier": "^2.7.3", "@types/react": "^18.2.22", diff --git a/yarn.lock b/yarn.lock index b0f81cfd2264b..a7da71496bee3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2915,10 +2915,10 @@ resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c" integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ== -"@types/mocha@^10.0.1": - version "10.0.1" - resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.1.tgz#2f4f65bb08bc368ac39c96da7b2f09140b26851b" - integrity sha512-/fvYntiO1GeICvqbQ3doGDIP97vWmvFt83GKguJ6prmQM2iXZfFcq6YE8KteFyRtX2/h5Hf91BYvPodJKFYv5Q== +"@types/mocha@^10.0.2": + version "10.0.2" + resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.2.tgz#96d63314255540a36bf24da094cce7a13668d73b" + integrity sha512-NaHL0+0lLNhX6d9rs+NSt97WH/gIlRHmszXbQ/8/MV/eVcFNdeJ/GYhrFuUc8K7WuPhRhTSdMkCp8VMzhUq85w== "@types/moment-hijri@^2.1.0": version "2.1.0" From b17c63163534ef1b0eb998fb34b1f366819e0ef0 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 17:06:31 +0300 Subject: [PATCH 073/262] Bump @types/moment-hijri to ^2.1.1 (#10523) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/package.json b/docs/package.json index 790bbba6a2632..6abfbd33a067c 100644 --- a/docs/package.json +++ b/docs/package.json @@ -36,7 +36,7 @@ "@react-spring/web": "^9.7.3", "@trendmicro/react-interpolate": "^0.5.5", "@types/lodash": "^4.14.199", - "@types/moment-hijri": "^2.1.0", + "@types/moment-hijri": "^2.1.1", "@types/react-dom": "^18.2.7", "@types/react-router-dom": "^5.3.3", "ast-types": "^0.14.2", diff --git a/yarn.lock b/yarn.lock index a7da71496bee3..460b5d45112b3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2920,10 +2920,10 @@ resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.2.tgz#96d63314255540a36bf24da094cce7a13668d73b" integrity sha512-NaHL0+0lLNhX6d9rs+NSt97WH/gIlRHmszXbQ/8/MV/eVcFNdeJ/GYhrFuUc8K7WuPhRhTSdMkCp8VMzhUq85w== -"@types/moment-hijri@^2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@types/moment-hijri/-/moment-hijri-2.1.0.tgz#ac79f3d97d74bf10afe6631cd33c19ad3f329d56" - integrity sha512-2+jaCpPqiwcrejg8oCex7jITtRDjcQIu8s7GAY7uVlDoAaq3LiyLDoe1l9EiWZRCECahtdUDmdZHHS5THRC/hA== +"@types/moment-hijri@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@types/moment-hijri/-/moment-hijri-2.1.1.tgz#c7398ab4b734498b745a26d524f96bced00f6082" + integrity sha512-Pj30rsxZvPCaNj9BjCZrGMaldJRVmKSLaLByNZNwt50A5PyjXSwTvG6Wjn9iLNLpfWaH2IGtNiKGCGA9/Zr5hA== dependencies: moment ">=2.14.0" From 00c864c35d4f90af209c0c9951c2aff6ff39bca0 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 17:07:20 +0300 Subject: [PATCH 074/262] Bump @types/moment-jalaali to ^0.7.7 (#10524) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/x-date-pickers/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 915e07775b372..0ff691eaf6d97 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -98,7 +98,7 @@ }, "devDependencies": { "@types/luxon": "^3.3.2", - "@types/moment-jalaali": "^0.7.6", + "@types/moment-jalaali": "^0.7.7", "date-fns": "^2.30.0", "date-fns-jalali": "^2.13.0-0", "dayjs": "^1.11.10", diff --git a/yarn.lock b/yarn.lock index 460b5d45112b3..42371c11959fa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2927,10 +2927,10 @@ dependencies: moment ">=2.14.0" -"@types/moment-jalaali@^0.7.6": - version "0.7.6" - resolved "https://registry.yarnpkg.com/@types/moment-jalaali/-/moment-jalaali-0.7.6.tgz#8debf51f7bc265a00ac98c4bbd77b260c71b46d8" - integrity sha512-TyqrJVGpuqadpQt49sPdBlWqLDYU2W3PzAoJ934CjE/u8iNf/wi/oIYv9x9vKB1XU6PhzFOXerDZn43LW1K8xA== +"@types/moment-jalaali@^0.7.7": + version "0.7.7" + resolved "https://registry.yarnpkg.com/@types/moment-jalaali/-/moment-jalaali-0.7.7.tgz#a4702b58c9a91eefc626a892b90a5fe54c223178" + integrity sha512-uHIAS11LL/heP3JZci3InxRkqvQU8v+sm5BUWcauqL/HUrcFWqDMzmdf8bVho8ZG5Uryekx17/0CW3Vh9unB8g== dependencies: moment ">=2.14.0" From 902adae2f15390fbb3f6dc3994f0deeb0c00690e Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 17:11:36 +0300 Subject: [PATCH 075/262] Bump @types/react to ^18.2.24 (#10526) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index c0d164cdb045a..bb0c334f4e0a2 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@types/mocha": "^10.0.2", "@types/node": "^18.18.0", "@types/prettier": "^2.7.3", - "@types/react": "^18.2.22", + "@types/react": "^18.2.24", "@types/react-dom": "^18.2.7", "@types/react-test-renderer": "^18.0.2", "@types/requestidlecallback": "^0.3.5", diff --git a/yarn.lock b/yarn.lock index 42371c11959fa..abff6fc0c571c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2997,10 +2997,10 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^18.2.22": - version "18.2.22" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.22.tgz#abe778a1c95a07fa70df40a52d7300a40b949ccb" - integrity sha512-60fLTOLqzarLED2O3UQImc/lsNRgG0jE/a1mPW9KjMemY0LMITWEsbS4VvZ4p6rorEHd5YKxxmMKSDK505GHpA== +"@types/react@*", "@types/react@^18.2.24": + version "18.2.24" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.24.tgz#3c7d68c02e0205a472f04abe4a0c1df35d995c05" + integrity sha512-Ee0Jt4sbJxMu1iDcetZEIKQr99J1Zfb6D4F3qfUWoR1JpInkY1Wdg4WwCyBjL257D0+jGqSl1twBjV8iCaC0Aw== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" From abbab9680a15b393535ca5e8656b368bf65aba16 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 17:13:00 +0300 Subject: [PATCH 076/262] Bump @types/react-test-renderer to ^18.0.3 (#10528) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index bb0c334f4e0a2..7601491d79c1c 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "@types/prettier": "^2.7.3", "@types/react": "^18.2.24", "@types/react-dom": "^18.2.7", - "@types/react-test-renderer": "^18.0.2", + "@types/react-test-renderer": "^18.0.3", "@types/requestidlecallback": "^0.3.5", "@types/sinon": "^10.0.16", "@types/yargs": "^17.0.24", diff --git a/yarn.lock b/yarn.lock index abff6fc0c571c..6a19558ac2029 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2983,10 +2983,10 @@ "@types/history" "*" "@types/react" "*" -"@types/react-test-renderer@^18.0.2": - version "18.0.2" - resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.2.tgz#44243977eec18ab8cda88d8977437f47a0d3fdbe" - integrity sha512-tJzMn+9GHDrdrLe0O4rwJELDfTrmdJbCn/UdYyzjlnPiXYXDl5FBNzdw4PVk2R3hJvSHKFjZcRgvZc12lV0p5Q== +"@types/react-test-renderer@^18.0.3": + version "18.0.3" + resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.3.tgz#67922bf5e5f0096581b1efd67dcdeabdd400cfea" + integrity sha512-4wcNLnY6nIT+L6g94CpzL4CXX2P18JvKPU9CDlaHr3DnbP3GiaQLhDotJqjWlVqOcE4UhLRjp0MtxqwuNKONnA== dependencies: "@types/react" "*" From 1b6ecd31c09c01deefb1b028efc4154d7389fbf0 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 16:19:23 +0200 Subject: [PATCH 077/262] Bump postcss from 8.4.30 to 8.4.31 (#10576) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 6a19558ac2029..f5fc10e63e896 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11433,9 +11433,9 @@ postcss@8.4.14: source-map-js "^1.0.2" postcss@^8.4.30: - version "8.4.30" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.30.tgz#0e0648d551a606ef2192a26da4cabafcc09c1aa7" - integrity sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g== + version "8.4.31" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d" + integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ== dependencies: nanoid "^3.3.6" picocolors "^1.0.0" From dbd1f14686634192444e2928994c9c9028d49e09 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 17:46:40 +0300 Subject: [PATCH 078/262] Bump @types/yargs to ^17.0.26 (#10531) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 7601491d79c1c..ce5debb23dea3 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "@types/react-test-renderer": "^18.0.3", "@types/requestidlecallback": "^0.3.5", "@types/sinon": "^10.0.16", - "@types/yargs": "^17.0.24", + "@types/yargs": "^17.0.26", "@typescript-eslint/eslint-plugin": "^6.7.3", "@typescript-eslint/parser": "^6.7.3", "axe-core": "4.8.2", diff --git a/yarn.lock b/yarn.lock index f5fc10e63e896..554c4d4da1858 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3045,10 +3045,10 @@ resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz#3b9ce2489919d9e4fea439b76916abc34b2df129" integrity sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw== -"@types/yargs@^17.0.24": - version "17.0.24" - resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.24.tgz#b3ef8d50ad4aa6aecf6ddc97c580a00f5aa11902" - integrity sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw== +"@types/yargs@^17.0.26": + version "17.0.26" + resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.26.tgz#388e5002a8b284ad7b4599ba89920a6d74d8d79a" + integrity sha512-Y3vDy2X6zw/ZCumcwLpdhM5L7jmyGpmBCTYMHDLqT2IKVMYRRLdv6ZakA+wxhra6Z/3bwhNbNl9bDGXaFU+6rw== dependencies: "@types/yargs-parser" "*" From 55153291481096da9e521b97ce187c80ddba7c82 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 17:48:08 +0300 Subject: [PATCH 079/262] Bump @types/react-dom to ^18.2.9 (#10527) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/package.json b/docs/package.json index 6abfbd33a067c..c2089670b883b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -37,7 +37,7 @@ "@trendmicro/react-interpolate": "^0.5.5", "@types/lodash": "^4.14.199", "@types/moment-hijri": "^2.1.1", - "@types/react-dom": "^18.2.7", + "@types/react-dom": "^18.2.9", "@types/react-router-dom": "^5.3.3", "ast-types": "^0.14.2", "autoprefixer": "^10.4.16", diff --git a/package.json b/package.json index ce5debb23dea3..0bc53ab3cc794 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "@types/node": "^18.18.0", "@types/prettier": "^2.7.3", "@types/react": "^18.2.24", - "@types/react-dom": "^18.2.7", + "@types/react-dom": "^18.2.9", "@types/react-test-renderer": "^18.0.3", "@types/requestidlecallback": "^0.3.5", "@types/sinon": "^10.0.16", diff --git a/yarn.lock b/yarn.lock index 554c4d4da1858..6b2ee15e8ea74 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2959,10 +2959,10 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== -"@types/react-dom@^18.0.0", "@types/react-dom@^18.2.7": - version "18.2.7" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.7.tgz#67222a08c0a6ae0a0da33c3532348277c70abb63" - integrity sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA== +"@types/react-dom@^18.0.0", "@types/react-dom@^18.2.9": + version "18.2.9" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.9.tgz#c4ce3c7c91a134e1bff58692aa2d2f2f4029c38b" + integrity sha512-6nNhVzZ9joQ6F7lozrASuQKC0Kf6ArYMU+DqA2ZrUbB+d+9lC6ZLn1GxiEBI1edmAwvTULtuJ6uPZpv3XudwUg== dependencies: "@types/react" "*" From ed53b680bc6ed2f30a7ec454719751e7399f3bcd Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 17:49:07 +0300 Subject: [PATCH 080/262] Bump @types/node to ^18.18.3 (#10525) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 4 ++-- yarn.lock | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 0bc53ab3cc794..ceaf2d494a43f 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,7 @@ "@types/chai-dom": "^1.11.1", "@types/enzyme": "^3.10.12", "@types/mocha": "^10.0.2", - "@types/node": "^18.18.0", + "@types/node": "^18.18.3", "@types/prettier": "^2.7.3", "@types/react": "^18.2.24", "@types/react-dom": "^18.2.9", @@ -187,6 +187,6 @@ "dependencies": {}, "resolutions": { "**/react-is": "^18.2.0", - "**/@types/node": "^18.18.0" + "**/@types/node": "^18.18.3" } } diff --git a/yarn.lock b/yarn.lock index 6b2ee15e8ea74..d06b1bce6c1a7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2934,10 +2934,10 @@ dependencies: moment ">=2.14.0" -"@types/node@*", "@types/node@>= 8", "@types/node@>=10.0.0", "@types/node@^14.0.1", "@types/node@^18.18.0": - version "18.18.0" - resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.0.tgz#bd19d5133a6e5e2d0152ec079ac27c120e7f1763" - integrity sha512-3xA4X31gHT1F1l38ATDIL9GpRLdwVhnEFC8Uikv5ZLlXATwrCYyPq7ZWHxzxc3J/30SUiwiYT+bQe0/XvKlWbw== +"@types/node@*", "@types/node@>= 8", "@types/node@>=10.0.0", "@types/node@^14.0.1", "@types/node@^18.18.3": + version "18.18.3" + resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.3.tgz#e5188135fc2909b46530c798ef49be65083be3fd" + integrity sha512-0OVfGupTl3NBFr8+iXpfZ8NR7jfFO+P1Q+IO/q0wbo02wYkP5gy36phojeYWpLQ6WAMjl+VfmqUk2YbUfp0irA== "@types/normalize-package-data@^2.4.0", "@types/normalize-package-data@^2.4.1": version "2.4.1" From fc7afacff3e8dad390072eb9e73e4aed48fb7bc7 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 17:50:07 +0300 Subject: [PATCH 081/262] Bump postcss to ^8.4.31 (#10533) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- yarn.lock | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/package.json b/docs/package.json index c2089670b883b..bfbbd7cfbee09 100644 --- a/docs/package.json +++ b/docs/package.json @@ -69,7 +69,7 @@ "moment-timezone": "^0.5.43", "next": "^13.4.19", "nprogress": "^0.2.0", - "postcss": "^8.4.30", + "postcss": "^8.4.31", "prismjs": "^1.29.0", "prop-types": "^15.8.1", "raw-loader": "^1.0.0", diff --git a/yarn.lock b/yarn.lock index d06b1bce6c1a7..c16b74cb422e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11432,7 +11432,7 @@ postcss@8.4.14: picocolors "^1.0.0" source-map-js "^1.0.2" -postcss@^8.4.30: +postcss@^8.4.31: version "8.4.31" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d" integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ== From 45f9b52c4675138f11f08e012490da0f0dcab8a1 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 18:35:43 +0300 Subject: [PATCH 082/262] Bump @types/react-transition-group to ^4.4.7 (#10529) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/x-date-pickers/package.json | 2 +- packages/x-tree-view/package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 0ff691eaf6d97..614e9794ff0fb 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -47,7 +47,7 @@ "@babel/runtime": "^7.23.1", "@mui/base": "^5.0.0-beta.17", "@mui/utils": "^5.14.11", - "@types/react-transition-group": "^4.4.6", + "@types/react-transition-group": "^4.4.7", "clsx": "^2.0.0", "prop-types": "^15.8.1", "react-transition-group": "^4.4.5" diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json index 087535c52041a..521072495aa36 100644 --- a/packages/x-tree-view/package.json +++ b/packages/x-tree-view/package.json @@ -45,7 +45,7 @@ "@babel/runtime": "^7.23.1", "@mui/base": "^5.0.0-beta.17", "@mui/utils": "^5.14.11", - "@types/react-transition-group": "^4.4.6", + "@types/react-transition-group": "^4.4.7", "clsx": "^2.0.0", "prop-types": "^15.8.1", "react-transition-group": "^4.4.5" diff --git a/yarn.lock b/yarn.lock index c16b74cb422e1..95264726bcd55 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2990,10 +2990,10 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@^4.4.6": - version "4.4.6" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e" - integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew== +"@types/react-transition-group@^4.4.6", "@types/react-transition-group@^4.4.7": + version "4.4.7" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.7.tgz#bf69f269d74aa78b99097673ca6dd6824a68ef1c" + integrity sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg== dependencies: "@types/react" "*" From d50a8501a94480cb8d764bd90a1fa48b791d400f Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 18:36:19 +0300 Subject: [PATCH 083/262] Bump @types/sinon to ^10.0.18 (#10530) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index ceaf2d494a43f..9e44c595729f4 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "@types/react-dom": "^18.2.9", "@types/react-test-renderer": "^18.0.3", "@types/requestidlecallback": "^0.3.5", - "@types/sinon": "^10.0.16", + "@types/sinon": "^10.0.18", "@types/yargs": "^17.0.26", "@typescript-eslint/eslint-plugin": "^6.7.3", "@typescript-eslint/parser": "^6.7.3", diff --git a/yarn.lock b/yarn.lock index 95264726bcd55..b75fd96abac1e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3028,10 +3028,10 @@ resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a" integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw== -"@types/sinon@^10.0.16": - version "10.0.16" - resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-10.0.16.tgz#4bf10313bd9aa8eef1e50ec9f4decd3dd455b4d3" - integrity sha512-j2Du5SYpXZjJVJtXBokASpPRj+e2z+VUhCPHmM6WMfe3dpHu6iVKJMU6AiBcMp/XTAYnEj6Wc1trJUWwZ0QaAQ== +"@types/sinon@^10.0.18": + version "10.0.18" + resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-10.0.18.tgz#659d2059c2206162e111dfaa2d8e9e9837c68212" + integrity sha512-OpQC9ug8BcnNxue2WF5aTruMaDRFn6NyfaE4DmAKOlQMn54b7CnCvDFV3wj5fk/HbSSTYmOYs2bTb5ShANjyQg== dependencies: "@types/sinonjs__fake-timers" "*" From 7c6d99629bbfb9fca6f47379016429580b3268a3 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 18:39:23 +0300 Subject: [PATCH 084/262] Bump chai to ^4.3.10 (#10532) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 48 +++++++++++++++++++++++++----------------------- 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 9e44c595729f4..69b64f94b7114 100644 --- a/package.json +++ b/package.json @@ -115,7 +115,7 @@ "babel-plugin-search-and-replace": "^1.1.1", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "babel-plugin-transform-rename-import": "^2.3.0", - "chai": "^4.3.8", + "chai": "^4.3.10", "chai-dom": "^1.11.0", "compression-webpack-plugin": "^10.0.0", "concurrently": "^8.2.1", diff --git a/yarn.lock b/yarn.lock index b75fd96abac1e..9a917b8cf0193 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4508,18 +4508,18 @@ chai-dom@^1.11.0: resolved "https://registry.yarnpkg.com/chai-dom/-/chai-dom-1.11.0.tgz#aa3af405b3d9b0470d185b17081ed23ca5fdaeb4" integrity sha512-ZzGlEfk1UhHH5+N0t9bDqstOxPEXmn3EyXvtsok5rfXVDOFDJbHVy12rED6ZwkJAUDs2w7/Da4Hlq2LB63kltg== -chai@^4.3.8: - version "4.3.8" - resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.8.tgz#40c59718ad6928da6629c70496fe990b2bb5b17c" - integrity sha512-vX4YvVVtxlfSZ2VecZgFUTU5qPCYsobVI2O9FmwEXBhDigYGQA6jRXCycIs1yJnnWbZ6/+a2zNIF5DfVCcJBFQ== +chai@^4.3.10: + version "4.3.10" + resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.10.tgz#d784cec635e3b7e2ffb66446a63b4e33bd390384" + integrity sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g== dependencies: assertion-error "^1.1.0" - check-error "^1.0.2" - deep-eql "^4.1.2" - get-func-name "^2.0.0" - loupe "^2.3.1" + check-error "^1.0.3" + deep-eql "^4.1.3" + get-func-name "^2.0.2" + loupe "^2.3.6" pathval "^1.1.1" - type-detect "^4.0.5" + type-detect "^4.0.8" chainsaw@~0.1.0: version "0.1.0" @@ -4583,10 +4583,12 @@ chardet@^0.7.0: resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA== -check-error@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82" - integrity sha1-V00xLt2Iu13YkS6Sht1sCu1KrII= +check-error@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.3.tgz#a6502e4312a7ee969f646e83bb3ddd56281bd694" + integrity sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg== + dependencies: + get-func-name "^2.0.2" cheerio@^1.0.0-rc.3: version "1.0.0-rc.3" @@ -5558,10 +5560,10 @@ dedent@0.7.0: resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c" integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw= -deep-eql@^4.1.2: - version "4.1.2" - resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-4.1.2.tgz#270ceb902f87724077e6f6449aed81463f42fc1c" - integrity sha512-gT18+YW4CcW/DBNTwAmqTtkJh7f9qqScu2qFVlx7kCoeY9tlBu9cUcr7+I+Z/noG8INehS3xQgLpTtd/QUTn4w== +deep-eql@^4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-4.1.3.tgz#7c7775513092f7df98d8df9996dd085eb668cc6d" + integrity sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw== dependencies: type-detect "^4.0.0" @@ -7245,7 +7247,7 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5: resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e" integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== -get-func-name@^2.0.0: +get-func-name@^2.0.0, get-func-name@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.2.tgz#0d7cf20cd13fda808669ffa88f4ffc7a3943fc41" integrity sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ== @@ -9518,10 +9520,10 @@ loose-envify@^1.1.0, loose-envify@^1.4.0: dependencies: js-tokens "^3.0.0 || ^4.0.0" -loupe@^2.3.1: - version "2.3.1" - resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.1.tgz#a2e1192c9f452e4e85089766da10ac8288383947" - integrity sha512-EN1D3jyVmaX4tnajVlfbREU4axL647hLec1h/PXAb8CPDMJiYitcWF2UeLVNttRqaIqQs4x+mRvXf+d+TlDrCA== +loupe@^2.3.6: + version "2.3.6" + resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.6.tgz#76e4af498103c532d1ecc9be102036a21f787b53" + integrity sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA== dependencies: get-func-name "^2.0.0" @@ -13586,7 +13588,7 @@ type-check@^0.4.0, type-check@~0.4.0: dependencies: prelude-ls "^1.2.1" -type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.5, type-detect@^4.0.8: +type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c" integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g== From ad93783780bc6662562a5dac202b419bf47223c2 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 18:41:36 +0300 Subject: [PATCH 085/262] Bump @argos-ci/core to ^0.12.0 (#10535) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 69b64f94b7114..fa0dd09832e82 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "validate": "concurrently \"yarn prettier && yarn eslint\" \"yarn proptypes\" \"yarn docs:typescript:formatted\" \"yarn docs:api\"" }, "devDependencies": { - "@argos-ci/core": "^0.11.1", + "@argos-ci/core": "^0.12.0", "@babel/cli": "^7.23.0", "@babel/core": "^7.23.0", "@babel/node": "^7.22.19", diff --git a/yarn.lock b/yarn.lock index 9a917b8cf0193..ac582e685e597 100644 --- a/yarn.lock +++ b/yarn.lock @@ -146,10 +146,10 @@ "@jridgewell/gen-mapping" "^0.1.0" "@jridgewell/trace-mapping" "^0.3.9" -"@argos-ci/core@^0.11.1": - version "0.11.1" - resolved "https://registry.yarnpkg.com/@argos-ci/core/-/core-0.11.1.tgz#6503382098897b86ecd425bc17a68413b8653f4d" - integrity sha512-Z6Sc3peuc7MMyIAk9aRsXwalJSfDXolrTC8kpg4SzJrABrVfD+e4URycgM/8RhDfEmZMMENV7gt9mBzogxD+uA== +"@argos-ci/core@^0.12.0": + version "0.12.0" + resolved "https://registry.yarnpkg.com/@argos-ci/core/-/core-0.12.0.tgz#2aef8050a079ddd6c917710e2975a0bb6e890ff9" + integrity sha512-P3FO6xr2nWxliUFC6tpHgvYhiAC3VRAH6IHmfWa1V9Vcb70cEcm4OPS1diRsDNKOsmt0aO5oaTc+eO/cqgydhA== dependencies: axios "^1.5.0" convict "^6.2.4" From 1b8ad3924cacd2663bdb0d0ccee6fb2995d82063 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 18:43:39 +0300 Subject: [PATCH 086/262] Bump danger to ^11.3.0 (#10536) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 99 +++++++++++++++++++++++++++++----------------------- 2 files changed, 56 insertions(+), 45 deletions(-) diff --git a/package.json b/package.json index fa0dd09832e82..8ca982108b026 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,7 @@ "compression-webpack-plugin": "^10.0.0", "concurrently": "^8.2.1", "cross-env": "^7.0.3", - "danger": "^11.2.8", + "danger": "^11.3.0", "enzyme": "^3.11.0", "eslint": "^8.49.0", "eslint-config-airbnb": "^19.0.4", diff --git a/yarn.lock b/yarn.lock index ac582e685e597..031340fe27b47 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1569,34 +1569,36 @@ resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw== -"@gitbeaker/core@^21.7.0": - version "21.7.0" - resolved "https://registry.yarnpkg.com/@gitbeaker/core/-/core-21.7.0.tgz#fcf7a12915d39f416e3f316d0a447a814179b8e5" - integrity sha512-cw72rE7tA27wc6JJe1WqeAj9v/6w0S7XJcEji+bRNjTlUfE1zgfW0Gf1mbGUi7F37SOABGCosQLfg9Qe63aIqA== +"@gitbeaker/core@^35.8.1": + version "35.8.1" + resolved "https://registry.yarnpkg.com/@gitbeaker/core/-/core-35.8.1.tgz#b4ce2d08d344ff50e76c38ff81b800bec6dfe851" + integrity sha512-KBrDykVKSmU9Q9Gly8KeHOgdc0lZSa435srECxuO0FGqqBcUQ82hPqUc13YFkkdOI9T1JRA3qSFajg8ds0mZKA== dependencies: - "@gitbeaker/requester-utils" "^21.7.0" - form-data "^3.0.0" + "@gitbeaker/requester-utils" "^35.8.1" + form-data "^4.0.0" li "^1.3.0" + mime "^3.0.0" + query-string "^7.0.0" xcase "^2.0.1" -"@gitbeaker/node@^21.3.0": - version "21.7.0" - resolved "https://registry.yarnpkg.com/@gitbeaker/node/-/node-21.7.0.tgz#2c19613f44ee497a8808c555abec614ebd2dfcad" - integrity sha512-OdM3VcTKYYqboOsnbiPcO0XimXXpYK4gTjARBZ6BWc+1LQXKmqo+OH6oUbyxOoaFu9hHECafIt3WZU3NM4sZTg== +"@gitbeaker/node@^35.8.1": + version "35.8.1" + resolved "https://registry.yarnpkg.com/@gitbeaker/node/-/node-35.8.1.tgz#d67885c827f2d7405afd7e39538a230721756e5c" + integrity sha512-g6rX853y61qNhzq9cWtxIEoe2KDeFBtXAeWMGWJnc3nz3WRump2pIICvJqw/yobLZqmTNt+ea6w3/n92Mnbn3g== dependencies: - "@gitbeaker/core" "^21.7.0" - "@gitbeaker/requester-utils" "^21.7.0" - form-data "^3.0.0" - got "^11.1.4" + "@gitbeaker/core" "^35.8.1" + "@gitbeaker/requester-utils" "^35.8.1" + delay "^5.0.0" + got "^11.8.3" xcase "^2.0.1" -"@gitbeaker/requester-utils@^21.7.0": - version "21.7.0" - resolved "https://registry.yarnpkg.com/@gitbeaker/requester-utils/-/requester-utils-21.7.0.tgz#e9a9cfaf268d2a99eb7bbdc930943240a5f88878" - integrity sha512-eLTaVXlBnh8Qimj6QuMMA06mu/mLcJm3dy8nqhhn/Vm/D25sPrvpGwmbfFyvzj6QujPqtHvFfsCHtyZddL01qA== +"@gitbeaker/requester-utils@^35.8.1": + version "35.8.1" + resolved "https://registry.yarnpkg.com/@gitbeaker/requester-utils/-/requester-utils-35.8.1.tgz#f345cdd05abd4169cfcd239d202db6283eb17dc8" + integrity sha512-MFzdH+Z6eJaCZA5ruWsyvm6SXRyrQHjYVR6aY8POFraIy7ceIHOprWCs1R+0ydDZ8KtBnd8OTHjlJ0sLtSFJCg== dependencies: - form-data "^3.0.0" - query-string "^6.12.1" + form-data "^4.0.0" + qs "^6.10.1" xcase "^2.0.1" "@humanwhocodes/config-array@^0.11.11": @@ -5395,12 +5397,13 @@ damerau-levenshtein@^1.0.8: resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7" integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA== -danger@^11.2.8: - version "11.2.8" - resolved "https://registry.yarnpkg.com/danger/-/danger-11.2.8.tgz#0e0375a5c311f93be8f53e9be1b44d8c5434b72f" - integrity sha512-d3iYhIJmo3V5WatWjsHbFpx/V5nz7fKsM7rQi91f/9CemLCH8wt3Jg1JKsEpiTHUtzNplOpudk0yFsWeHygd/w== +danger@^11.3.0: + version "11.3.0" + resolved "https://registry.yarnpkg.com/danger/-/danger-11.3.0.tgz#5a2cbe3e45f367ed0899156c480c7d7e40d90b3d" + integrity sha512-h4zkvmEfRVZp2EIKlQSky0IotxrDbJZtXgMTvyN1nwPCfg0JgvQVmVbvOZXrOgNVlgL+42ZDjNL2qAwVmJypNw== dependencies: - "@gitbeaker/node" "^21.3.0" + "@gitbeaker/core" "^35.8.1" + "@gitbeaker/node" "^35.8.1" "@octokit/rest" "^18.12.0" async-retry "1.2.3" chalk "^2.3.0" @@ -5543,7 +5546,7 @@ decimal.js@^10.4.3: resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23" integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA== -decode-uri-component@^0.2.0: +decode-uri-component@^0.2.0, decode-uri-component@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9" integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ== @@ -5677,6 +5680,11 @@ define-property@^2.0.2: is-descriptor "^1.0.2" isobject "^3.0.1" +delay@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/delay/-/delay-5.0.0.tgz#137045ef1b96e5071060dd5be60bf9334436bd1d" + integrity sha512-ReEBKkIfe4ya47wlPYf/gu5ib6yUG0/Aez0JQZQz94kiWtRQvZIQbTiehsnwHvLSWJnQdhVeqYue7Id1dKr0qw== + delayed-stream@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" @@ -7076,15 +7084,6 @@ foreground-child@^3.1.0: cross-spawn "^7.0.0" signal-exit "^4.0.1" -form-data@^3.0.0: - version "3.0.1" - resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f" - integrity sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg== - dependencies: - asynckit "^0.4.0" - combined-stream "^1.0.8" - mime-types "^2.1.12" - form-data@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" @@ -7555,10 +7554,10 @@ gopd@^1.0.1: dependencies: get-intrinsic "^1.1.3" -got@^11.1.4: - version "11.8.5" - resolved "https://registry.yarnpkg.com/got/-/got-11.8.5.tgz#ce77d045136de56e8f024bebb82ea349bc730046" - integrity sha512-o0Je4NvQObAuZPHLFoRSkdG2lTgtcynqymzg2Vupdx6PorhaT5MCbIyXG6d4D94kk8ZG57QeosgdiqfJWhEhlQ== +got@^11.8.3: + version "11.8.6" + resolved "https://registry.yarnpkg.com/got/-/got-11.8.6.tgz#276e827ead8772eddbcfc97170590b841823233a" + integrity sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g== dependencies: "@sindresorhus/is" "^4.0.0" "@szmarczak/http-timer" "^4.0.5" @@ -9867,6 +9866,11 @@ mime@^2.5.2: resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe" integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg== +mime@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/mime/-/mime-3.0.0.tgz#b374550dca3a0c18443b0c950a6a58f1931cf7a7" + integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A== + mimic-fn@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" @@ -11657,12 +11661,19 @@ qs@6.11.0: dependencies: side-channel "^1.0.4" -query-string@^6.12.1: - version "6.14.1" - resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a" - integrity sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw== +qs@^6.10.1: + version "6.11.2" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.2.tgz#64bea51f12c1f5da1bc01496f48ffcff7c69d7d9" + integrity sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA== + dependencies: + side-channel "^1.0.4" + +query-string@^7.0.0: + version "7.1.3" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328" + integrity sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg== dependencies: - decode-uri-component "^0.2.0" + decode-uri-component "^0.2.2" filter-obj "^1.1.0" split-on-first "^1.0.0" strict-uri-encode "^2.0.0" From dad96050cc4d20f950ed726e65b21e41428b52bc Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 4 Oct 2023 18:52:07 +0300 Subject: [PATCH 087/262] Bump eslint-plugin-mocha to ^10.2.0 (#10538) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 8ca982108b026..3473b2af43b7c 100644 --- a/package.json +++ b/package.json @@ -131,7 +131,7 @@ "eslint-plugin-import": "^2.28.1", "eslint-plugin-jsdoc": "^46.8.2", "eslint-plugin-jsx-a11y": "^6.7.1", - "eslint-plugin-mocha": "^10.1.0", + "eslint-plugin-mocha": "^10.2.0", "eslint-plugin-prettier": "^5.0.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", diff --git a/yarn.lock b/yarn.lock index 031340fe27b47..a39bf13b99fce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6407,13 +6407,13 @@ eslint-plugin-jsx-a11y@^6.7.1: object.fromentries "^2.0.6" semver "^6.3.0" -eslint-plugin-mocha@^10.1.0: - version "10.1.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-mocha/-/eslint-plugin-mocha-10.1.0.tgz#69325414f875be87fb2cb00b2ef33168d4eb7c8d" - integrity sha512-xLqqWUF17llsogVOC+8C6/jvQ+4IoOREbN7ZCHuOHuD6cT5cDD4h7f2LgsZuzMAiwswWE21tO7ExaknHVDrSkw== +eslint-plugin-mocha@^10.2.0: + version "10.2.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-mocha/-/eslint-plugin-mocha-10.2.0.tgz#15b05ce5be4b332bb0d76826ec1c5ebf67102ad6" + integrity sha512-ZhdxzSZnd1P9LqDPF0DBcFLpRIGdh1zkF2JHnQklKQOvrQtT73kdP5K9V2mzvbLR+cCAO9OI48NXK/Ax9/ciCQ== dependencies: eslint-utils "^3.0.0" - rambda "^7.1.0" + rambda "^7.4.0" eslint-plugin-prettier@^5.0.0: version "5.0.0" @@ -11720,10 +11720,10 @@ railroad-diagrams@^1.0.0: resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e" integrity sha1-635iZ1SN3t+4mcG5Dlc3RVnN234= -rambda@^7.1.0: - version "7.2.1" - resolved "https://registry.yarnpkg.com/rambda/-/rambda-7.2.1.tgz#c533f6e2def4edcd59f967df938ace5dd6da56af" - integrity sha512-Wswj8ZvzdI3VhaGPkZAxaCTwuMmGtgWt7Zxsgyo4P+iTmVnkojvyWaOep5q3ZjMIecW0wtQa66GWxaKkZ24RAA== +rambda@^7.4.0: + version "7.5.0" + resolved "https://registry.yarnpkg.com/rambda/-/rambda-7.5.0.tgz#1865044c59bc0b16f63026c6e5a97e4b1bbe98fe" + integrity sha512-y/M9weqWAH4iopRd7EHDEQQvpFPHj1AA3oHozE9tfITHUtTR7Z9PSlIRRG2l1GuW7sefC1cXFfIcF+cgnShdBA== randexp@0.4.6: version "0.4.6" From 9457da638a2ecf02d9e7b03939bf59066a2f6a75 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 4 Oct 2023 23:37:12 +0500 Subject: [PATCH 088/262] [docs] Update RTL Support section of the grid localization docs (#10561) --- .../data-grid/localization/DataGridRTL.js | 58 +++++++++++++++++++ .../data-grid/localization/DataGridRTL.tsx | 58 +++++++++++++++++++ .../localization/DataGridRTL.tsx.preview | 5 ++ .../data-grid/localization/localization.md | 11 ++-- 4 files changed, 127 insertions(+), 5 deletions(-) create mode 100644 docs/data/data-grid/localization/DataGridRTL.js create mode 100644 docs/data/data-grid/localization/DataGridRTL.tsx create mode 100644 docs/data/data-grid/localization/DataGridRTL.tsx.preview diff --git a/docs/data/data-grid/localization/DataGridRTL.js b/docs/data/data-grid/localization/DataGridRTL.js new file mode 100644 index 0000000000000..797e242b47098 --- /dev/null +++ b/docs/data/data-grid/localization/DataGridRTL.js @@ -0,0 +1,58 @@ +import * as React from 'react'; +import { DataGrid, arSD } from '@mui/x-data-grid'; +import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles'; + +const columns = [ + { + field: 'id', + headerName: 'تعريف', + width: 150, + }, + { + field: 'name', + headerName: 'اسم', + width: 150, + }, + { + field: 'age', + headerName: 'عمر', + valueGetter: (params) => `${params.value} سنوات`, + width: 150, + }, + { + field: 'occupation', + headerName: 'المهنة', + width: 150, + }, + { + field: 'gender', + headerName: 'جنس', + width: 150, + }, +]; + +const rows = [ + { id: 1, name: 'سارہ', age: 35, occupation: 'معلم', gender: 'أنثى' }, + { id: 2, name: 'زید', age: 42, occupation: 'مهندس', gender: 'ذكر' }, + { id: 3, name: 'علی', age: 33, occupation: 'محاسب', gender: 'ذكر' }, + { id: 4, name: 'فاطمہ', age: 25, occupation: 'معلم', gender: 'أنثى' }, + { id: 5, name: 'ایندریو', age: 65, occupation: 'مهندس', gender: 'ذكر' }, +]; + +export default function DataGridRTL() { + const existingTheme = useTheme(); + const theme = React.useMemo( + () => + createTheme({}, arSD, existingTheme, { + direction: 'rtl', + }), + [existingTheme], + ); + return ( + +
+ +
+ + ); +} diff --git a/docs/data/data-grid/localization/DataGridRTL.tsx b/docs/data/data-grid/localization/DataGridRTL.tsx new file mode 100644 index 0000000000000..bdf655cc45315 --- /dev/null +++ b/docs/data/data-grid/localization/DataGridRTL.tsx @@ -0,0 +1,58 @@ +import * as React from 'react'; +import { DataGrid, GridColDef, arSD } from '@mui/x-data-grid'; +import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles'; + +const columns: GridColDef[] = [ + { + field: 'id', + headerName: 'تعريف', + width: 150, + }, + { + field: 'name', + headerName: 'اسم', + width: 150, + }, + { + field: 'age', + headerName: 'عمر', + valueGetter: (params) => `${params.value} سنوات`, + width: 150, + }, + { + field: 'occupation', + headerName: 'المهنة', + width: 150, + }, + { + field: 'gender', + headerName: 'جنس', + width: 150, + }, +]; + +const rows = [ + { id: 1, name: 'سارہ', age: 35, occupation: 'معلم', gender: 'أنثى' }, + { id: 2, name: 'زید', age: 42, occupation: 'مهندس', gender: 'ذكر' }, + { id: 3, name: 'علی', age: 33, occupation: 'محاسب', gender: 'ذكر' }, + { id: 4, name: 'فاطمہ', age: 25, occupation: 'معلم', gender: 'أنثى' }, + { id: 5, name: 'ایندریو', age: 65, occupation: 'مهندس', gender: 'ذكر' }, +]; + +export default function DataGridRTL() { + const existingTheme = useTheme(); + const theme = React.useMemo( + () => + createTheme({}, arSD, existingTheme, { + direction: 'rtl', + }), + [existingTheme], + ); + return ( + +
+ +
+ + ); +} diff --git a/docs/data/data-grid/localization/DataGridRTL.tsx.preview b/docs/data/data-grid/localization/DataGridRTL.tsx.preview new file mode 100644 index 0000000000000..5f3631a167476 --- /dev/null +++ b/docs/data/data-grid/localization/DataGridRTL.tsx.preview @@ -0,0 +1,5 @@ + +
+ +
+ \ No newline at end of file diff --git a/docs/data/data-grid/localization/localization.md b/docs/data/data-grid/localization/localization.md index 8aafb5463db3d..905c39065e32a 100644 --- a/docs/data/data-grid/localization/localization.md +++ b/docs/data/data-grid/localization/localization.md @@ -101,13 +101,14 @@ You can [find the source](https://github.com/mui/mui-x/tree/HEAD/packages/grid/x To create your own translation or to customize the English text, copy this file to your project, make any changes needed and import the locale from there. Note that these translations of the Data Grid component depend on the [Localization strategy](/material-ui/guides/localization/) of the whole library. -## RTL Support 🚧 +## RTL Support -:::warning -RTL is not fully supported in the Data Grid. +Right-to-left languages such as Arabic, Persian, or Hebrew are supported. +Follow [this guide](/material-ui/guides/right-to-left/) to use them. -👍 Upvote [issue #230](https://github.com/mui/mui-x/issues/230) if that's a requirement in your project. -::: +The example below demonstrates how to use an RTL language (Arabic) with the data grid. + +{{"demo": "DataGridRTL.js", "bg": "inline"}} ## API From d3bca9cfed52f7c64244eab256da5f4a0eaa5f4b Mon Sep 17 00:00:00 2001 From: Nora <72460825+noraleonte@users.noreply.github.com> Date: Wed, 4 Oct 2023 22:47:11 +0300 Subject: [PATCH 089/262] [pickers] Improve customization playground examples (#10544) --- .../components/CustomizationPlayground.tsx | 68 ++++++++++--------- .../utils/useCustomizationPlayground.tsx | 28 ++++---- .../src/DateCalendar/DayCalendar.tsx | 4 +- 3 files changed, 51 insertions(+), 49 deletions(-) diff --git a/docs/src/modules/components/CustomizationPlayground.tsx b/docs/src/modules/components/CustomizationPlayground.tsx index 990778db5f500..1b504beacd449 100644 --- a/docs/src/modules/components/CustomizationPlayground.tsx +++ b/docs/src/modules/components/CustomizationPlayground.tsx @@ -50,9 +50,9 @@ const PlaygroundDemoArea = styled(Box)(() => ({ const PlaygroundConfigArea = styled(Box)(({ theme }) => ({ padding: theme.spacing(2), - backgroundColor: alpha(theme.palette.primary.main, 0.1), - borderRadius: theme.shape.borderRadius, - boxShadow: theme.shadows[3], + backgroundColor: alpha(theme.palette.primary.light, 0.05), + border: `1px solid ${grey[200]}`, + borderRadius: '4px', [theme.breakpoints.down('lg')]: { display: 'flex', flexWrap: 'wrap', @@ -299,8 +299,8 @@ const CustomizationPlayground = function CustomizationPlayground({ return ( - - {selectedDemo && customizationOptions && selectedCustomizationOption && ( + {selectedDemo && customizationOptions && selectedCustomizationOption && ( + { @@ -310,28 +310,30 @@ const CustomizationPlayground = function CustomizationPlayground({ options={customizationOptions} /> {selectedExample && } - - )} - - - - {React.Children.map( - children, - (child) => - React.isValidElement(child) && - React.cloneElement( - child, - selectedDemo && selectedCustomizationOption - ? { - ...examples[selectedDemo]?.examples[selectedCustomizationOption] - ?.componentProps, - } - : {}, - ), - )} - - - {shouldBeInteractive && ( + {' '} + + )} + + + + {React.Children.map( + children, + (child) => + React.isValidElement(child) && + React.cloneElement( + child, + selectedDemo && selectedCustomizationOption + ? { + ...examples[selectedDemo]?.examples[selectedCustomizationOption] + ?.componentProps, + } + : {}, + ), + )} + + + {shouldBeInteractive && ( + Components @@ -380,13 +382,13 @@ const CustomizationPlayground = function CustomizationPlayground({ - )} - - - {shouldBeInteractive && ( - + )} - + + + {shouldBeInteractive && ( + + )} ); }; diff --git a/docs/src/modules/utils/useCustomizationPlayground.tsx b/docs/src/modules/utils/useCustomizationPlayground.tsx index 26b3004f33d22..de93f241083dd 100644 --- a/docs/src/modules/utils/useCustomizationPlayground.tsx +++ b/docs/src/modules/utils/useCustomizationPlayground.tsx @@ -78,7 +78,7 @@ export function withStyles( const defaultTheme = useTheme(); const tokens = { - borderRadius: selectedTokens.borderRadius, + borderRadius: `${selectedTokens.borderRadius}px`, borderColor: DEFAULT_COLORS[selectedTokens.color][500], border: `${selectedTokens.borderWidth}px solid`, backgroundColor: @@ -246,31 +246,31 @@ const getCodeExample = ({ if (selectedCustomizationOption === 'sxProp') { code = `${code}\n<${componentName}${formatComponentProps(examples.componentProps, 1)} sx={{ - '& .Mui${selectedDemo}-${selectedSlot}': {${getTokensString(2)} + '& .Mui${selectedDemo}-${selectedSlot}': {${getTokensString(3)} }, }} />`; } else if (selectedCustomizationOption === 'customTheme') { code = `import { createTheme } from '@mui/material/styles'\n${code} - createTheme({ + ...theme, + components: { + Mui${selectedDemo}: { + styleOverrides: { + ${selectedSlot}: {${getTokensString(5)} } - }) + } + } } -> +}) + <${componentName}${formatComponentProps(examples.componentProps, 2)} /> `; } else if (selectedCustomizationOption === 'styledComponents') { return `import { styled } from '@mui/material/styles'\n${code} const Styled${componentName} = styled(${componentName})({ - '& .Mui${selectedDemo}-${selectedSlot}': {${getTokensString(3)} + '& .Mui${selectedDemo}-${selectedSlot}': {${getTokensString(2)} + } })) export default function StyledPickerContainer() { diff --git a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx index 5f333f73dafd9..01730f7f2290a 100644 --- a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx @@ -159,7 +159,7 @@ const PickersCalendarWeekDayLabel = styled(Typography, { })); const PickersCalendarWeekNumberLabel = styled(Typography, { - name: 'MuiDayPicker', + name: 'MuiDayCalendar', slot: 'WeekNumberLabel', overridesResolver: (_, styles) => styles.weekNumberLabel, })(({ theme }) => ({ @@ -174,7 +174,7 @@ const PickersCalendarWeekNumberLabel = styled(Typography, { })); const PickersCalendarWeekNumber = styled(Typography, { - name: 'MuiDayPicker', + name: 'MuiDayCalendar', slot: 'WeekNumber', overridesResolver: (_, styles) => styles.weekNumber, })(({ theme }) => ({ From 8cafb551e0f4bb4945b5032a047191e5cc910a68 Mon Sep 17 00:00:00 2001 From: Nora <72460825+noraleonte@users.noreply.github.com> Date: Wed, 4 Oct 2023 23:01:09 +0300 Subject: [PATCH 090/262] [docs] Add section about overriding slots to base concepts (#10421) Signed-off-by: Nora <72460825+noraleonte@users.noreply.github.com> Co-authored-by: Lukas Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> --- .../date-pickers/base-concepts/CustomSlots.js | 46 +++++++++++++++++++ .../base-concepts/CustomSlots.tsx | 46 +++++++++++++++++++ .../base-concepts/base-concepts.md | 17 +++++++ .../custom-components/custom-components.md | 10 ++-- docs/data/pages.ts | 2 +- .../api/date-pickers/date-picker-toolbar.json | 2 +- .../date-pickers/date-time-picker-tabs.json | 2 +- .../date-time-picker-toolbar.json | 2 +- .../api/date-pickers/pickers-action-bar.json | 2 +- .../date-pickers/pickers-calendar-header.json | 2 +- .../x/api/date-pickers/pickers-shortcuts.json | 2 +- .../api/date-pickers/time-picker-toolbar.json | 2 +- 12 files changed, 122 insertions(+), 13 deletions(-) create mode 100644 docs/data/date-pickers/base-concepts/CustomSlots.js create mode 100644 docs/data/date-pickers/base-concepts/CustomSlots.tsx diff --git a/docs/data/date-pickers/base-concepts/CustomSlots.js b/docs/data/date-pickers/base-concepts/CustomSlots.js new file mode 100644 index 0000000000000..5a6d1197147ad --- /dev/null +++ b/docs/data/date-pickers/base-concepts/CustomSlots.js @@ -0,0 +1,46 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +import { PickersDay } from '@mui/x-date-pickers/PickersDay'; +import EditCalendarRoundedIcon from '@mui/icons-material/EditCalendarRounded'; +import { styled } from '@mui/material/styles'; +import IconButton from '@mui/material/IconButton'; + +const StyledButton = styled(IconButton)(({ theme }) => ({ + borderRadius: theme.shape.borderRadius, +})); +const StyledDay = styled(PickersDay)(({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + color: + theme.palette.mode === 'light' + ? theme.palette.secondary.dark + : theme.palette.secondary.light, +})); + +export default function CustomSlots() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/base-concepts/CustomSlots.tsx b/docs/data/date-pickers/base-concepts/CustomSlots.tsx new file mode 100644 index 0000000000000..5a6d1197147ad --- /dev/null +++ b/docs/data/date-pickers/base-concepts/CustomSlots.tsx @@ -0,0 +1,46 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +import { PickersDay } from '@mui/x-date-pickers/PickersDay'; +import EditCalendarRoundedIcon from '@mui/icons-material/EditCalendarRounded'; +import { styled } from '@mui/material/styles'; +import IconButton from '@mui/material/IconButton'; + +const StyledButton = styled(IconButton)(({ theme }) => ({ + borderRadius: theme.shape.borderRadius, +})); +const StyledDay = styled(PickersDay)(({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + color: + theme.palette.mode === 'light' + ? theme.palette.secondary.dark + : theme.palette.secondary.light, +})); + +export default function CustomSlots() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/base-concepts/base-concepts.md b/docs/data/date-pickers/base-concepts/base-concepts.md index 65716d7e1c040..6bbb6df20f2d8 100644 --- a/docs/data/date-pickers/base-concepts/base-concepts.md +++ b/docs/data/date-pickers/base-concepts/base-concepts.md @@ -174,3 +174,20 @@ const cleanText = (string) => // Example of a test using the helper expect(cleanText(input.value)).to.equal('04-17-2022'); ``` + +## Overriding slots and slot props + +Date and Time Pickers are complex components built using many subcomponents known as **slots**. +Slots are commonly filled by React components that you can override using the `slots` prop. +You can also pass additional props to the available slots using the `slotProps` prop. +Learn more about the mental model of slots in the Base UI documentation: [Overriding component structure](/base-ui/guides/overriding-component-structure/). + +You can find the list of available slots for each component in its respective [API reference](/x/api/date-pickers/date-picker/#slots) doc. + +Some parts of the Pickers' UI are built on several nested slots. For instance, the adornment of the `TextField` on `DatePicker` contains three slots (`inputAdornment`, `openPickerButton`, and `openPickerIcon`) that you can use depending on what you are trying to customize. + +{{"demo": "CustomSlots.js"}} + +:::info +Learn more about overriding slots in the doc page about [Custom slots and subcomponents](/x/react-date-pickers/custom-components/). +::: diff --git a/docs/data/date-pickers/custom-components/custom-components.md b/docs/data/date-pickers/custom-components/custom-components.md index 4be9f3716073f..edf7e96405d6f 100644 --- a/docs/data/date-pickers/custom-components/custom-components.md +++ b/docs/data/date-pickers/custom-components/custom-components.md @@ -1,19 +1,19 @@ --- productId: x-date-pickers -title: Date and Time Pickers - Custom subcomponents -components: DateTimePickerTabs +title: Date and Time Pickers - Custom slots and subcomponents +components: DateTimePickerTabs, PickersActionBar, DatePickerToolbar, TimePickerToolbar, DateTimePickerToolbar, PickersCalendarHeader, PickersShortcuts --- -# Custom subcomponents +# Custom slots and subcomponents -

The date picker lets you customize subcomponents.

+

Learn how to override the default DOM structure of the Date and Time Pickers.

:::info The components that can be customized are listed under `slots` section in Date and Time Pickers [API Reference](/x/api/date-pickers/). For example, available Date Picker slots can be found [here](/x/api/date-pickers/date-picker/#slots). ::: -## Overriding components +## Overriding slot components You can override the internal elements of the component (known as "slots") using the `slots` prop. diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 169b45182e22c..d750c73409064 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -328,7 +328,7 @@ const pages: MuiPage[] = [ children: [ { pathname: '/x/react-date-pickers/custom-components', - title: 'Custom subcomponents', + title: 'Custom slots and subcomponents', }, { pathname: '/x/react-date-pickers/custom-layout' }, { pathname: '/x/react-date-pickers/custom-field' }, diff --git a/docs/pages/x/api/date-pickers/date-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-picker-toolbar.json index f66e825caeae9..15463e76d9e75 100644 --- a/docs/pages/x/api/date-pickers/date-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/date-picker-toolbar.json @@ -26,5 +26,5 @@ ], "styles": { "classes": ["root", "title"], "globalClasses": {}, "name": "MuiDatePickerToolbar" }, "filename": "/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx", - "demos": "
    " + "demos": "" } diff --git a/docs/pages/x/api/date-pickers/date-time-picker-tabs.json b/docs/pages/x/api/date-pickers/date-time-picker-tabs.json index 6f2207afbc7b6..9d8583d058438 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker-tabs.json +++ b/docs/pages/x/api/date-pickers/date-time-picker-tabs.json @@ -29,5 +29,5 @@ ], "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiDateTimePickerTabs" }, "filename": "/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx", - "demos": "" + "demos": "" } diff --git a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json index 3641c56d2b63e..8b917a3e60035 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json @@ -41,5 +41,5 @@ "name": "MuiDateTimePickerToolbar" }, "filename": "/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx", - "demos": "
      " + "demos": "" } diff --git a/docs/pages/x/api/date-pickers/pickers-action-bar.json b/docs/pages/x/api/date-pickers/pickers-action-bar.json index c02d0ed573f2a..4dc6d8b14b2e2 100644 --- a/docs/pages/x/api/date-pickers/pickers-action-bar.json +++ b/docs/pages/x/api/date-pickers/pickers-action-bar.json @@ -26,5 +26,5 @@ "styles": { "classes": ["root", "spacing"], "globalClasses": {}, "name": "MuiPickersActionBar" }, "filename": "/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx", "inheritance": null, - "demos": "" + "demos": "" } 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 f206564a80788..f12af2c0a973f 100644 --- a/docs/pages/x/api/date-pickers/pickers-calendar-header.json +++ b/docs/pages/x/api/date-pickers/pickers-calendar-header.json @@ -25,5 +25,5 @@ "name": "MuiPickersCalendarHeader" }, "filename": "/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx", - "demos": "
        " + "demos": "" } diff --git a/docs/pages/x/api/date-pickers/pickers-shortcuts.json b/docs/pages/x/api/date-pickers/pickers-shortcuts.json index 9444bc132107a..169630c019633 100644 --- a/docs/pages/x/api/date-pickers/pickers-shortcuts.json +++ b/docs/pages/x/api/date-pickers/pickers-shortcuts.json @@ -35,5 +35,5 @@ "name": "MuiPickersShortcuts" }, "filename": "/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx", - "demos": "" + "demos": "" } diff --git a/docs/pages/x/api/date-pickers/time-picker-toolbar.json b/docs/pages/x/api/date-pickers/time-picker-toolbar.json index ec3663d62dfca..8c1a39182317c 100644 --- a/docs/pages/x/api/date-pickers/time-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/time-picker-toolbar.json @@ -39,5 +39,5 @@ "name": "MuiTimePickerToolbar" }, "filename": "/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx", - "demos": "
          " + "demos": "" } From 16df383469802da1088a6c4cee13826787373af3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Rodolfo=20Freitas?= Date: Thu, 5 Oct 2023 11:56:36 +0200 Subject: [PATCH 091/262] [docs] Add whats new page listing all release announcements (#9727) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: José Rodolfo Freitas Co-authored-by: Olivier Tassinari Co-authored-by: Lukas Co-authored-by: Nora <72460825+noraleonte@users.noreply.github.com> Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> --- docs/data/pages.ts | 4 +- docs/data/whats-new/WhatsNewLayout.js | 256 +++++++++++++++++ docs/data/whats-new/WhatsNewLayout.tsx | 264 ++++++++++++++++++ .../data/whats-new/WhatsNewLayout.tsx.preview | 7 + docs/data/whats-new/whats-new.md | 5 + docs/pages/x/whats-new.js | 7 + docs/public/_redirects | 1 - 7 files changed, 541 insertions(+), 3 deletions(-) create mode 100644 docs/data/whats-new/WhatsNewLayout.js create mode 100644 docs/data/whats-new/WhatsNewLayout.tsx create mode 100644 docs/data/whats-new/WhatsNewLayout.tsx.preview create mode 100644 docs/data/whats-new/whats-new.md create mode 100644 docs/pages/x/whats-new.js diff --git a/docs/data/pages.ts b/docs/data/pages.ts index d750c73409064..6f2186ad1e628 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -6,8 +6,8 @@ import treeViewComponentApi from './tree-view-component-api-pages'; const pages: MuiPage[] = [ { - pathname: '/blog/mui-x-v6/', - title: "✨ What's new in v6? ✨", + pathname: '/x/whats-new', + title: "What's new in MUI X", }, { pathname: '/x/introduction-group', diff --git a/docs/data/whats-new/WhatsNewLayout.js b/docs/data/whats-new/WhatsNewLayout.js new file mode 100644 index 0000000000000..907a33d27f8dd --- /dev/null +++ b/docs/data/whats-new/WhatsNewLayout.js @@ -0,0 +1,256 @@ +import * as React from 'react'; +import Link from '@mui/material/Link'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; +import Card from '@mui/material/Card'; +import CardActions from '@mui/material/CardActions'; +import CardContent from '@mui/material/CardContent'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import { alpha } from '@mui/material/styles'; + +const blogs = [ + { + title: 'MUI X v6.11.0', + description: 'A roundup of all new features since v6.0.0.', + announcementDate: 'Monday, Aug 14, 2023', + url: 'https://mui.com/blog/mui-x-mid-v6-features/', + highlightList: [ + { + title: 'Support for timezone on Date and Time Pickers', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#support-for-time-zones', + }, + { + title: 'Digital Clock', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#digital-clock', + }, + { + title: 'Filters on Data Grid column headers', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#filter-on-column-headers', + }, + { + title: 'Copy and Paste on Data Grid', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#copy-and-paste', + }, + { + title: 'Charts Alpha 🧪', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#charts-alpha-version', + }, + { + title: 'TreeView migration from lab', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#tree-view-is-moving-to-mui-x', + }, + ], + }, + { + title: 'MUI X v6.0.0', + description: + 'A new major is available, with many new features and improvements.', + announcementDate: 'Monday, Mar 06, 2023', + url: 'https://mui.com/blog/mui-x-v6/', + highlightList: [ + { + title: 'Date and time fields', + url: 'https://mui.com/blog/mui-x-v6/#fields-the-new-default-input-gt-for-pickers', + }, + { + title: 'Date Range shortcuts', + url: 'https://mui.com/blog/mui-x-v6/#shortcuts-for-picking-specific-dates-in-a-calendar', + }, + { + title: 'Improved layout customization', + url: 'https://mui.com/blog/mui-x-v6/#improved-layout-customization', + }, + { + title: 'Edit ranges with drag and drop', + url: 'https://mui.com/blog/mui-x-v6/#edit-date-ranges-with-drag-and-drop', + }, + { + title: 'New Column menu', + url: 'https://mui.com/blog/mui-x-v6/#improved-column-menu', + }, + { + title: 'ApiRef in community', + url: 'https://mui.com/blog/mui-x-v6/#apiref-moved-to-the-mit-community-version', + }, + { + title: 'Cell selection', + url: 'https://mui.com/blog/mui-x-v6/#cell-selection', + }, + ], + }, + { + title: 'Date Pickers v5.0.0', + description: + 'After some months of polishing in pre-releases, the Date Pickers finally get a stable.', + announcementDate: 'Monday, Sep 22, 2022', + url: 'https://mui.com/blog/date-pickers-stable-v5/', + highlightList: [ + { + title: 'Better APIs', + url: 'https://mui.com/blog/date-pickers-stable-v5/#better-apis-and-improved-customization', + }, + { + title: 'Easier customization', + url: 'https://mui.com/blog/date-pickers-stable-v5/#better-apis-and-improved-customization', + }, + { + title: 'Integrated localization', + url: 'https://mui.com/blog/date-pickers-stable-v5/#integrated-localization', + }, + ], + }, + { + title: 'Data Grid v5.15', + description: + 'This version brings an amazing set of new supported use cases with the Data Grid Premium.', + announcementDate: 'Monday, Aug 12, 2022', + url: 'https://mui.com/blog/aggregation-functions/', + highlightList: [ + { + title: 'Aggregation in summary rows and row groups', + url: 'https://mui.com/blog/aggregation-functions/#wait-what-is-an-aggregation-function', + }, + { + title: 'Row pinning', + url: 'https://mui.com/blog/aggregation-functions/#row-pinning', + }, + ], + }, + { + title: 'New Premium plan', + description: + 'Premium plan announcement, including the most advanced features for data analysis and management.', + announcementDate: 'Thursday, May 12, 2022', + url: 'https://mui.com/blog/premium-plan-release/', + highlightList: [ + { title: 'Row Grouping', url: '/x/react-data-grid/row-grouping/' }, + { title: 'Excel export', url: '/x/react-data-grid/export/#exported-rows' }, + ], + }, + { + title: 'MUI X v5.0.0', + description: 'A new virtualization engine, and improvements in several APIs.', + announcementDate: 'Monday, Nov 22, 2021', + url: 'https://mui.com/blog/mui-x-v5/', + highlightList: [ + { + title: 'New virtualization engine', + url: 'https://mui.com/blog/mui-x-v5/#a-new-virtualization-engine', + }, + { + title: 'Improved state management', + url: 'https://mui.com/blog/mui-x-v5/#improved-state-management', + }, + { + title: 'Simplified style customization', + url: 'https://mui.com/blog/mui-x-v5/#simplified-style-customization', + }, + ], + }, +]; + +function BlogCard(props) { + return ( + + theme.palette.mode === 'dark' + ? 'rgba(0, 27, 55, 0.2)' + : `${alpha(theme.palette.grey[50], 0.4)}`, + borderColor: 'divider', + [`& .MuiTypography-root`]: { + fontFamily: 'IBM Plex Sans', + }, + }} + component="article" + variant="outlined" + > + + + + {props.blog.announcementDate} + + + {props.blog.title} + + + + + + {props.blog.description} + + + + {props.blog.highlightList.map((item) => ( + + + {item.title} + + + ))} + + + + + + + + ); +} + +export default function WhatsNewLayout() { + return ( + + {blogs.map((blog) => ( + + + + ))} + + ); +} diff --git a/docs/data/whats-new/WhatsNewLayout.tsx b/docs/data/whats-new/WhatsNewLayout.tsx new file mode 100644 index 0000000000000..ddf6a0b801198 --- /dev/null +++ b/docs/data/whats-new/WhatsNewLayout.tsx @@ -0,0 +1,264 @@ +import * as React from 'react'; +import Link from '@mui/material/Link'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; +import Card from '@mui/material/Card'; +import CardActions from '@mui/material/CardActions'; +import CardContent from '@mui/material/CardContent'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import { alpha } from '@mui/material/styles'; + +type Blog = { + title: string; + announcementDate: string; + description: string; + url: string; + highlightList: { title: string; url: string }[]; +}; + +const blogs: Blog[] = [ + { + title: 'MUI X v6.11.0', + description: 'A roundup of all new features since v6.0.0.', + announcementDate: 'Monday, Aug 14, 2023', + url: 'https://mui.com/blog/mui-x-mid-v6-features/', + highlightList: [ + { + title: 'Support for timezone on Date and Time Pickers', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#support-for-time-zones', + }, + { + title: 'Digital Clock', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#digital-clock', + }, + { + title: 'Filters on Data Grid column headers', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#filter-on-column-headers', + }, + { + title: 'Copy and Paste on Data Grid', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#copy-and-paste', + }, + { + title: 'Charts Alpha 🧪', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#charts-alpha-version', + }, + { + title: 'TreeView migration from lab', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#tree-view-is-moving-to-mui-x', + }, + ], + }, + { + title: 'MUI X v6.0.0', + description: + 'A new major is available, with many new features and improvements.', + announcementDate: 'Monday, Mar 06, 2023', + url: 'https://mui.com/blog/mui-x-v6/', + highlightList: [ + { + title: 'Date and time fields', + url: 'https://mui.com/blog/mui-x-v6/#fields-the-new-default-input-gt-for-pickers', + }, + { + title: 'Date Range shortcuts', + url: 'https://mui.com/blog/mui-x-v6/#shortcuts-for-picking-specific-dates-in-a-calendar', + }, + { + title: 'Improved layout customization', + url: 'https://mui.com/blog/mui-x-v6/#improved-layout-customization', + }, + { + title: 'Edit ranges with drag and drop', + url: 'https://mui.com/blog/mui-x-v6/#edit-date-ranges-with-drag-and-drop', + }, + { + title: 'New Column menu', + url: 'https://mui.com/blog/mui-x-v6/#improved-column-menu', + }, + { + title: 'ApiRef in community', + url: 'https://mui.com/blog/mui-x-v6/#apiref-moved-to-the-mit-community-version', + }, + { + title: 'Cell selection', + url: 'https://mui.com/blog/mui-x-v6/#cell-selection', + }, + ], + }, + { + title: 'Date Pickers v5.0.0', + description: + 'After some months of polishing in pre-releases, the Date Pickers finally get a stable.', + announcementDate: 'Monday, Sep 22, 2022', + url: 'https://mui.com/blog/date-pickers-stable-v5/', + highlightList: [ + { + title: 'Better APIs', + url: 'https://mui.com/blog/date-pickers-stable-v5/#better-apis-and-improved-customization', + }, + { + title: 'Easier customization', + url: 'https://mui.com/blog/date-pickers-stable-v5/#better-apis-and-improved-customization', + }, + { + title: 'Integrated localization', + url: 'https://mui.com/blog/date-pickers-stable-v5/#integrated-localization', + }, + ], + }, + { + title: 'Data Grid v5.15', + description: + 'This version brings an amazing set of new supported use cases with the Data Grid Premium.', + announcementDate: 'Monday, Aug 12, 2022', + url: 'https://mui.com/blog/aggregation-functions/', + highlightList: [ + { + title: 'Aggregation in summary rows and row groups', + url: 'https://mui.com/blog/aggregation-functions/#wait-what-is-an-aggregation-function', + }, + { + title: 'Row pinning', + url: 'https://mui.com/blog/aggregation-functions/#row-pinning', + }, + ], + }, + { + title: 'New Premium plan', + description: + 'Premium plan announcement, including the most advanced features for data analysis and management.', + announcementDate: 'Thursday, May 12, 2022', + url: 'https://mui.com/blog/premium-plan-release/', + highlightList: [ + { title: 'Row Grouping', url: '/x/react-data-grid/row-grouping/' }, + { title: 'Excel export', url: '/x/react-data-grid/export/#exported-rows' }, + ], + }, + { + title: 'MUI X v5.0.0', + description: 'A new virtualization engine, and improvements in several APIs.', + announcementDate: 'Monday, Nov 22, 2021', + url: 'https://mui.com/blog/mui-x-v5/', + highlightList: [ + { + title: 'New virtualization engine', + url: 'https://mui.com/blog/mui-x-v5/#a-new-virtualization-engine', + }, + { + title: 'Improved state management', + url: 'https://mui.com/blog/mui-x-v5/#improved-state-management', + }, + { + title: 'Simplified style customization', + url: 'https://mui.com/blog/mui-x-v5/#simplified-style-customization', + }, + ], + }, +]; + +function BlogCard(props: { blog: Blog }) { + return ( + + theme.palette.mode === 'dark' + ? 'rgba(0, 27, 55, 0.2)' + : `${alpha(theme.palette.grey[50], 0.4)}`, + borderColor: 'divider', + [`& .MuiTypography-root`]: { + fontFamily: 'IBM Plex Sans', + }, + }} + component="article" + variant="outlined" + > + + + + {props.blog.announcementDate} + + + {props.blog.title} + + + + + + {props.blog.description} + + + + {props.blog.highlightList.map((item) => ( + + + {item.title} + + + ))} + + + + + + + + ); +} + +export default function WhatsNewLayout() { + return ( + + {blogs.map((blog) => ( + + + + ))} + + ); +} diff --git a/docs/data/whats-new/WhatsNewLayout.tsx.preview b/docs/data/whats-new/WhatsNewLayout.tsx.preview new file mode 100644 index 0000000000000..b701ffab9b3b5 --- /dev/null +++ b/docs/data/whats-new/WhatsNewLayout.tsx.preview @@ -0,0 +1,7 @@ + + {blogs.map((blog) => ( + + + + ))} + \ No newline at end of file diff --git a/docs/data/whats-new/whats-new.md b/docs/data/whats-new/whats-new.md new file mode 100644 index 0000000000000..3bde5a552f383 --- /dev/null +++ b/docs/data/whats-new/whats-new.md @@ -0,0 +1,5 @@ +# What's new in MUI X + +

          Discover what's new in the latest versions.

          + +{{"demo": "WhatsNewLayout.js", "hideToolbar": true, "bg": "inline"}} diff --git a/docs/pages/x/whats-new.js b/docs/pages/x/whats-new.js new file mode 100644 index 0000000000000..d30bf447441f7 --- /dev/null +++ b/docs/pages/x/whats-new.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/whats-new/whats-new.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/public/_redirects b/docs/public/_redirects index 50aa676917f48..5852a23a91e3b 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -48,7 +48,6 @@ /:lang/x/api/date-pickers/clock-picker/ /:lang/x/api/date-pickers/time-clock/ 301 /:lang/x/* /x/:splat 301 # 2023 -/x/whats-new/ https://mui.com/blog/mui-x-v6/ 301 /x/api/date-pickers/calendar-picker/ /x/api/date-pickers/date-calendar/ 301 /x/api/date-pickers/calendar-picker-skeleton/ /x/api/date-pickers/day-calendar-skeleton/ 301 /x/api/date-pickers/month-picker/ /x/api/date-pickers/month-calendar/ 301 From 6bb263e54eeceded1ff24893eedab56bc8092d62 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Thu, 5 Oct 2023 16:35:15 +0200 Subject: [PATCH 092/262] [charts] Support `slots`/`slotProps` for the tooltip (#10515) --- docs/pages/x/api/charts/charts-tooltip.json | 14 +++- .../api-docs/charts/charts-tooltip.json | 10 +++ packages/x-charts/src/BarChart/BarChart.tsx | 15 +++- .../ChartsAxisTooltipContent.tsx | 30 ++++--- .../ChartsItemTooltipContent.tsx | 22 +++-- .../src/ChartsTooltip/ChartsTooltip.tsx | 81 ++++++++++++++++--- packages/x-charts/src/LineChart/LineChart.tsx | 17 +++- packages/x-charts/src/PieChart/PieChart.tsx | 15 +++- .../src/ScatterChart/ScatterChart.tsx | 15 +++- .../src/SparkLineChart/SparkLineChart.tsx | 17 +++- scripts/x-charts.exports.json | 2 + 11 files changed, 190 insertions(+), 48 deletions(-) diff --git a/docs/pages/x/api/charts/charts-tooltip.json b/docs/pages/x/api/charts/charts-tooltip.json index 776aeb3834e56..232e1b84b8ad8 100644 --- a/docs/pages/x/api/charts/charts-tooltip.json +++ b/docs/pages/x/api/charts/charts-tooltip.json @@ -1,8 +1,18 @@ { "props": { - "axisContent": { "type": { "name": "elementType" } }, + "axisContent": { + "type": { "name": "elementType" }, + "deprecated": true, + "deprecationInfo": "Use slots.axisContent instead" + }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "itemContent": { "type": { "name": "elementType" } }, + "itemContent": { + "type": { "name": "elementType" }, + "deprecated": true, + "deprecationInfo": "Use slots.itemContent instead" + }, + "slotProps": { "type": { "name": "object" }, "default": "{}" }, + "slots": { "type": { "name": "object" }, "default": "{}" }, "trigger": { "type": { "name": "enum", diff --git a/docs/translations/api-docs/charts/charts-tooltip.json b/docs/translations/api-docs/charts/charts-tooltip.json index e3d84230879f8..e35af3b98a3df 100644 --- a/docs/translations/api-docs/charts/charts-tooltip.json +++ b/docs/translations/api-docs/charts/charts-tooltip.json @@ -16,6 +16,16 @@ "deprecated": "", "typeDescriptions": {} }, + "slotProps": { + "description": "The props used for each component slot.", + "deprecated": "", + "typeDescriptions": {} + }, + "slots": { + "description": "Overridable component slots.", + "deprecated": "", + "typeDescriptions": {} + }, "trigger": { "description": "Select the kind of tooltip to display - 'item': Shows data about the item below the mouse. - 'axis': Shows values associated with the hovered x value - 'none': Does not display tooltip", "deprecated": "", diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index 50e4801625316..50f74b79723a7 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -10,7 +10,12 @@ import { ChartsAxis, ChartsAxisProps } from '../ChartsAxis'; import { BarSeriesType } from '../models/seriesType/bar'; import { MakeOptional } from '../models/helpers'; import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants'; -import { ChartsTooltip, ChartsTooltipProps } from '../ChartsTooltip'; +import { + ChartsTooltip, + ChartsTooltipProps, + ChartsTooltipSlotComponentProps, + ChartsTooltipSlotsComponent, +} from '../ChartsTooltip'; import { ChartsLegend, ChartsLegendProps, @@ -24,11 +29,13 @@ import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../model export interface BarChartSlotsComponent extends ChartsAxisSlotsComponent, BarPlotSlotsComponent, - ChartsLegendSlotsComponent {} + ChartsLegendSlotsComponent, + ChartsTooltipSlotsComponent {} export interface BarChartSlotComponentProps extends ChartsAxisSlotComponentProps, BarPlotSlotComponentProps, - ChartsLegendSlotComponentProps {} + ChartsLegendSlotComponentProps, + ChartsTooltipSlotComponentProps {} export interface BarChartProps extends Omit, @@ -309,6 +316,8 @@ BarChart.propTypes = { axisContent: PropTypes.elementType, classes: PropTypes.object, itemContent: PropTypes.elementType, + slotProps: PropTypes.object, + slots: PropTypes.object, trigger: PropTypes.oneOf(['axis', 'item', 'none']), }), /** diff --git a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx index 80cc72387291e..4acec2ad1f1be 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { SxProps, Theme } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; +import { useSlotProps } from '@mui/base/utils'; import { AxisInteractionData } from '../context/InteractionProvider'; import { SeriesContext } from '../context/SeriesContextProvider'; import { CartesianContext } from '../context/CartesianContextProvider'; @@ -91,10 +92,11 @@ export function DefaultChartsAxisContent(props: ChartsAxisContentProps) { export function ChartsAxisTooltipContent(props: { axisData: AxisInteractionData; content?: React.ElementType; + contentProps?: Partial; sx?: SxProps; classes: ChartsAxisContentProps['classes']; }) { - const { content, axisData, sx, classes } = props; + const { content, contentProps, axisData, sx, classes } = props; const isXaxis = (axisData.x && axisData.x.index) !== undefined; @@ -129,15 +131,19 @@ export function ChartsAxisTooltipContent(props: { }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]); const Content = content ?? DefaultChartsAxisContent; - return ( - - ); + const chartTooltipContentProps = useSlotProps({ + elementType: Content, + externalSlotProps: contentProps, + additionalProps: { + axisData, + series: relevantSeries, + axis: relevantAxis, + dataIndex, + axisValue, + sx, + classes, + }, + ownerState: {}, + }); + return ; } diff --git a/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx index 405565b72120b..18c0543b326e9 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { SxProps, Theme } from '@mui/material/styles'; +import { useSlotProps } from '@mui/base/utils'; import { ItemInteractionData } from '../context/InteractionProvider'; import { SeriesContext } from '../context/SeriesContextProvider'; import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config'; @@ -12,7 +13,7 @@ import { } from './ChartsTooltipTable'; import { ChartsTooltipClasses } from './tooltipClasses'; -export type ChartsItemContentProps = { +export type ChartsItemContentProps = { /** * The data used to identify the triggered item. */ @@ -28,7 +29,7 @@ export type ChartsItemContentProps = { sx?: SxProps; }; -export function DefaultChartsItemContent( +export function DefaultChartsItemContent( props: ChartsItemContentProps, ) { const { series, itemData, sx, classes } = props; @@ -72,16 +73,27 @@ export function DefaultChartsItemContent( export function ChartsItemTooltipContent(props: { itemData: ItemInteractionData; content?: React.ElementType>; + contentProps?: Partial>; sx?: SxProps; classes: ChartsItemContentProps['classes']; }) { - const { content, itemData, sx, classes } = props; + const { content, itemData, sx, classes, contentProps } = props; const series = React.useContext(SeriesContext)[itemData.type]!.series[ itemData.seriesId ] as ChartSeriesDefaultized; const Content = content ?? DefaultChartsItemContent; - - return ; + const chartTooltipContentProps = useSlotProps({ + elementType: Content, + externalSlotProps: contentProps, + additionalProps: { + itemData, + series, + sx, + classes, + }, + ownerState: {}, + }); + return ; } diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx index cf4f0d5e48257..f0ad8c245471e 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { unstable_composeClasses as composeClasses } from '@mui/utils'; -import { Popper } from '@mui/base/Popper'; +import composeClasses from '@mui/utils/composeClasses'; +import { styled } from '@mui/material/styles'; +import { Popper, PopperProps } from '@mui/base/Popper'; import { NoSsr } from '@mui/base/NoSsr'; +import { useSlotProps } from '@mui/base/utils'; import { AxisInteractionData, InteractionContext, @@ -14,6 +16,18 @@ import { ChartsItemContentProps, ChartsItemTooltipContent } from './ChartsItemTo import { ChartsAxisContentProps, ChartsAxisTooltipContent } from './ChartsAxisTooltipContent'; import { ChartsTooltipClasses, getTooltipUtilityClass } from './tooltipClasses'; +export interface ChartsTooltipSlotsComponent { + popper?: React.ElementType; + axisContent?: React.ElementType; + itemContent?: React.ElementType; +} + +export interface ChartsTooltipSlotComponentProps { + popper?: Partial; + axisContent?: Partial; + itemContent?: Partial; +} + export type ChartsTooltipProps = { /** * Select the kind of tooltip to display @@ -25,16 +39,28 @@ export type ChartsTooltipProps = { trigger?: TriggerOptions; /** * Component to override the tooltip content when triger is set to 'item'. + * @deprecated Use slots.itemContent instead */ itemContent?: React.ElementType>; /** * Component to override the tooltip content when triger is set to 'axis'. + * @deprecated Use slots.axisContent instead */ axisContent?: React.ElementType; /** * Override or extend the styles applied to the component. */ classes?: Partial; + /** + * Overridable component slots. + * @default {} + */ + slots?: ChartsTooltipSlotsComponent; + /** + * The props used for each component slot. + * @default {} + */ + slotProps?: ChartsTooltipSlotComponentProps; }; const useUtilityClasses = (ownerState: { classes: ChartsTooltipProps['classes'] }) => { @@ -50,8 +76,17 @@ const useUtilityClasses = (ownerState: { classes: ChartsTooltipProps['classes'] return composeClasses(slots, getTooltipUtilityClass, classes); }; +const ChartsTooltipRoot = styled(Popper, { + name: 'MuiChartsTooltip', + slot: 'Root', + overridesResolver: (_, styles) => styles.root, +})(({ theme }) => ({ + pointerEvents: 'none', + zIndex: theme.zIndex.modal, +})); + function ChartsTooltip(props: ChartsTooltipProps) { - const { trigger = 'axis', itemContent, axisContent } = props; + const { trigger = 'axis', itemContent, axisContent, slots, slotProps } = props; const mousePosition = useMouseTracker(); @@ -64,34 +99,44 @@ function ChartsTooltip(props: ChartsTooltipProps) { const classes = useUtilityClasses({ classes: props.classes }); + const PopperComponent = slots?.popper ?? ChartsTooltipRoot; + const popperProps = useSlotProps({ + elementType: PopperComponent, + externalSlotProps: slotProps?.popper, + additionalProps: { + open: popperOpen, + placement: 'right-start' as const, + anchorEl: generateVirtualElement(mousePosition), + }, + ownerState: {}, + }); + if (trigger === 'none') { return null; } + return ( {popperOpen && ( - + {trigger === 'item' ? ( } - content={itemContent} + content={slots?.itemContent ?? itemContent} + contentProps={slotProps?.itemContent} sx={{ mx: 2 }} classes={classes} /> ) : ( )} - + )} ); @@ -104,6 +149,7 @@ ChartsTooltip.propTypes = { // ---------------------------------------------------------------------- /** * Component to override the tooltip content when triger is set to 'axis'. + * @deprecated Use slots.axisContent instead */ axisContent: PropTypes.elementType, /** @@ -112,8 +158,19 @@ ChartsTooltip.propTypes = { classes: PropTypes.object, /** * Component to override the tooltip content when triger is set to 'item'. + * @deprecated Use slots.itemContent instead */ itemContent: PropTypes.elementType, + /** + * The props used for each component slot. + * @default {} + */ + slotProps: PropTypes.object, + /** + * Overridable component slots. + * @default {} + */ + slots: PropTypes.object, /** * Select the kind of tooltip to display * - 'item': Shows data about the item below the mouse. diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index e0ebdcc3ce804..f1a415b019392 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -12,7 +12,12 @@ import { ChartsAxis, ChartsAxisProps } from '../ChartsAxis/ChartsAxis'; import { LineSeriesType } from '../models/seriesType/line'; import { MakeOptional } from '../models/helpers'; import { DEFAULT_X_AXIS_KEY } from '../constants'; -import { ChartsTooltip, ChartsTooltipProps } from '../ChartsTooltip'; +import { + ChartsTooltip, + ChartsTooltipProps, + ChartsTooltipSlotComponentProps, + ChartsTooltipSlotsComponent, +} from '../ChartsTooltip'; import { ChartsLegend, ChartsLegendProps, @@ -34,14 +39,16 @@ export interface LineChartSlotsComponent LinePlotSlotsComponent, MarkPlotSlotsComponent, LineHighlightPlotSlotsComponent, - ChartsLegendSlotsComponent {} + ChartsLegendSlotsComponent, + ChartsTooltipSlotsComponent {} export interface LineChartSlotComponentProps extends ChartsAxisSlotComponentProps, AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, LineHighlightPlotSlotComponentProps, - ChartsLegendSlotComponentProps {} + ChartsLegendSlotComponentProps, + ChartsTooltipSlotComponentProps {} export interface LineChartProps extends Omit, @@ -139,7 +146,7 @@ const LineChart = React.forwardRef(function LineChart(props: LineChartProps, ref - + {children} @@ -331,6 +338,8 @@ LineChart.propTypes = { axisContent: PropTypes.elementType, classes: PropTypes.object, itemContent: PropTypes.elementType, + slotProps: PropTypes.object, + slots: PropTypes.object, trigger: PropTypes.oneOf(['axis', 'item', 'none']), }), /** diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index 798be2e4b4652..7cc58f547a44a 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -8,7 +8,12 @@ import { ChartsAxis, ChartsAxisProps } from '../ChartsAxis/ChartsAxis'; import { PieSeriesType } from '../models/seriesType'; import { MakeOptional } from '../models/helpers'; import { DEFAULT_X_AXIS_KEY } from '../constants'; -import { ChartsTooltip, ChartsTooltipProps } from '../ChartsTooltip'; +import { + ChartsTooltip, + ChartsTooltipProps, + ChartsTooltipSlotComponentProps, + ChartsTooltipSlotsComponent, +} from '../ChartsTooltip'; import { ChartsLegend, ChartsLegendProps, @@ -23,11 +28,13 @@ import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../model export interface PieChartSlotsComponent extends ChartsAxisSlotsComponent, PiePlotSlotsComponent, - ChartsLegendSlotsComponent {} + ChartsLegendSlotsComponent, + ChartsTooltipSlotsComponent {} export interface PieChartSlotComponentProps extends ChartsAxisSlotComponentProps, PiePlotSlotComponentProps, - ChartsLegendSlotComponentProps {} + ChartsLegendSlotComponentProps, + ChartsTooltipSlotComponentProps {} export interface PieChartProps extends Omit, @@ -299,6 +306,8 @@ PieChart.propTypes = { axisContent: PropTypes.elementType, classes: PropTypes.object, itemContent: PropTypes.elementType, + slotProps: PropTypes.object, + slots: PropTypes.object, trigger: PropTypes.oneOf(['axis', 'item', 'none']), }), /** diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index ad627a5f4a3b3..f3738694aab6e 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -12,7 +12,12 @@ import { import { ChartsAxis, ChartsAxisProps } from '../ChartsAxis'; import { ScatterSeriesType } from '../models/seriesType/scatter'; import { MakeOptional } from '../models/helpers'; -import { ChartsTooltip, ChartsTooltipProps } from '../ChartsTooltip'; +import { + ChartsTooltip, + ChartsTooltipProps, + ChartsTooltipSlotComponentProps, + ChartsTooltipSlotsComponent, +} from '../ChartsTooltip'; import { ChartsLegend, ChartsLegendProps, @@ -25,11 +30,13 @@ import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../model export interface ScatterChartSlotsComponent extends ChartsAxisSlotsComponent, ScatterPlotSlotsComponent, - ChartsLegendSlotsComponent {} + ChartsLegendSlotsComponent, + ChartsTooltipSlotsComponent {} export interface ScatterChartSlotComponentProps extends ChartsAxisSlotComponentProps, ScatterPlotSlotComponentProps, - ChartsLegendSlotComponentProps {} + ChartsLegendSlotComponentProps, + ChartsTooltipSlotComponentProps {} export interface ScatterChartProps extends Omit, @@ -264,6 +271,8 @@ ScatterChart.propTypes = { axisContent: PropTypes.elementType, classes: PropTypes.object, itemContent: PropTypes.elementType, + slotProps: PropTypes.object, + slots: PropTypes.object, trigger: PropTypes.oneOf(['axis', 'item', 'none']), }), /** diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index 3bf664374ab02..ba5924156fec0 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -7,7 +7,12 @@ import { ResponsiveChartContainerProps, } from '../ResponsiveChartContainer'; import { DEFAULT_X_AXIS_KEY } from '../constants'; -import { ChartsTooltip, ChartsTooltipProps } from '../ChartsTooltip'; +import { + ChartsTooltip, + ChartsTooltipProps, + ChartsTooltipSlotComponentProps, + ChartsTooltipSlotsComponent, +} from '../ChartsTooltip'; import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHighlight'; import { AxisConfig } from '../models/axis'; import { MakeOptional } from '../models/helpers'; @@ -26,13 +31,15 @@ export interface SparkLineChartSlotsComponent LinePlotSlotsComponent, MarkPlotSlotsComponent, LineHighlightPlotSlotsComponent, - BarPlotSlotsComponent {} + BarPlotSlotsComponent, + ChartsTooltipSlotsComponent {} export interface SparkLineChartSlotComponentProps extends AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, LineHighlightPlotSlotComponentProps, - BarPlotSlotComponentProps {} + BarPlotSlotComponentProps, + ChartsTooltipSlotComponentProps {} export interface SparkLineChartProps extends Omit { @@ -172,7 +179,7 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(props: SparkLine )} - {showTooltip && } + {showTooltip && } {children} @@ -264,6 +271,8 @@ SparkLineChart.propTypes = { axisContent: PropTypes.elementType, classes: PropTypes.object, itemContent: PropTypes.elementType, + slotProps: PropTypes.object, + slots: PropTypes.object, trigger: PropTypes.oneOf(['axis', 'item', 'none']), }), /** diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index 4415776d8920d..8d8b94c698e2b 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -33,6 +33,8 @@ { "name": "ChartsPieSorting", "kind": "TypeAlias" }, { "name": "ChartsTooltip", "kind": "Function" }, { "name": "ChartsTooltipProps", "kind": "TypeAlias" }, + { "name": "ChartsTooltipSlotComponentProps", "kind": "Interface" }, + { "name": "ChartsTooltipSlotsComponent", "kind": "Interface" }, { "name": "ChartsXAxis", "kind": "Function" }, { "name": "ChartsXAxisProps", "kind": "Interface" }, { "name": "ChartsYAxis", "kind": "Function" }, From b2caf840966fbb5ffa0b9bedd066f9a8bb8a772d Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Fri, 6 Oct 2023 09:44:58 +0200 Subject: [PATCH 093/262] v6.16.1 (#10583) --- CHANGELOG.md | 60 +++++++++++++++++++ package.json | 2 +- .../grid/x-data-grid-generator/package.json | 4 +- .../grid/x-data-grid-premium/package.json | 6 +- packages/grid/x-data-grid-pro/package.json | 4 +- packages/grid/x-data-grid/package.json | 2 +- packages/x-charts/package.json | 2 +- packages/x-date-pickers-pro/package.json | 4 +- packages/x-date-pickers/package.json | 2 +- 9 files changed, 73 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 78c8861f6bdfb..54793c527bf2d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,66 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 6.16.1 + +_Oct 6, 2023_ + +We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨: + +- 🥧 Support interaction with pie chart +- 🐞 Bugfixes +- 📚 Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@6.16.1` + +- [DataGrid] Add a new demo with sparklines (#9228) @flaviendelangle +- [DataGrid] Fix autosize missing a few pixels (#10471) @romgrk +- [DataGrid] Make `disableColumnSelector` demo idempotent (#10548) @MBilalShafi + +#### `@mui/x-data-grid-pro@6.16.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-data-grid@6.16.1`. + +#### `@mui/x-data-grid-premium@6.16.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan') + +Same changes as in `@mui/x-data-grid-pro@6.16.1`. + +### Date Pickers + +#### `@mui/x-date-pickers@6.16.1` + +- [pickers] Avoid calendar layout shifting when changing views (#10541) @LukasTy +- [pickers] Fix clearable behavior when disabled (#10542) @noraleonte +- [pickers] Improve customization playground examples (#10544) @noraleonte + +#### `@mui/x-date-pickers-pro@6.16.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-date-pickers@6.16.1`, plus: + +- [DateRangePicker] Fix `InputProps` propagation in multi input (#10564) @alexfauquette + +### Charts / `@mui/x-charts@6.0.0-alpha.14` + +- [charts] Display cursor pointer for pie chart only if `onClick` is provided (#10551) @giladappsforce +- [charts] Add `onClick` prop to PieChart (#10506) @giladappsforce +- [charts] Support `slots`/`slotProps` for the tooltip (#10515) @alexfauquette + +### Docs + +- [docs] Add `DateRangePicker` example with a `Button` trigger (#10485) @LukasTy +- [docs] Add section about disabling columns panel (#10328) @MBilalShafi +- [docs] Add section about overriding slots to base concepts (#10421) @noraleonte +- [docs] Add "What's new" page listing all release announcements (#9727) @joserodolfofreitas +- [docs] Update RTL Support section of the grid localization docs (#10561) @MBilalShafi + +### Core + +- [core] Fix casing consistency with legal and marketing content @oliviertassinari +- [core] Revert the link in the priority support ticket description (#10517) @michelengelen +- [CHANGELOG] Polish image @oliviertassinari + ## 6.16.0 _Sep 29, 2023_ diff --git a/package.json b/package.json index 3473b2af43b7c..c28fcdc0adf15 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "6.16.0", + "version": "6.16.1", "private": true, "scripts": { "start": "yarn && yarn docs:dev", diff --git a/packages/grid/x-data-grid-generator/package.json b/packages/grid/x-data-grid-generator/package.json index 209af9b2b0d35..366c998e2263f 100644 --- a/packages/grid/x-data-grid-generator/package.json +++ b/packages/grid/x-data-grid-generator/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-generator", - "version": "6.16.0", + "version": "6.16.1", "description": "Generate fake data for demo purposes only.", "author": "MUI Team", "main": "src/index.ts", @@ -32,7 +32,7 @@ "dependencies": { "@babel/runtime": "^7.23.1", "@mui/base": "^5.0.0-beta.17", - "@mui/x-data-grid-premium": "6.16.0", + "@mui/x-data-grid-premium": "6.16.1", "chance": "^1.1.11", "clsx": "^2.0.0", "lru-cache": "^7.18.3" diff --git a/packages/grid/x-data-grid-premium/package.json b/packages/grid/x-data-grid-premium/package.json index 58bd81888eec7..3fd81760d4a72 100644 --- a/packages/grid/x-data-grid-premium/package.json +++ b/packages/grid/x-data-grid-premium/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-premium", - "version": "6.16.0", + "version": "6.16.1", "description": "The Premium plan edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,8 +44,8 @@ "dependencies": { "@babel/runtime": "^7.23.1", "@mui/utils": "^5.14.11", - "@mui/x-data-grid": "6.16.0", - "@mui/x-data-grid-pro": "6.16.0", + "@mui/x-data-grid": "6.16.1", + "@mui/x-data-grid-pro": "6.16.1", "@mui/x-license-pro": "6.10.2", "@types/format-util": "^1.0.2", "clsx": "^2.0.0", diff --git a/packages/grid/x-data-grid-pro/package.json b/packages/grid/x-data-grid-pro/package.json index 346c3c3935ab5..3a11078754fed 100644 --- a/packages/grid/x-data-grid-pro/package.json +++ b/packages/grid/x-data-grid-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-pro", - "version": "6.16.0", + "version": "6.16.1", "description": "The Pro plan edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,7 +44,7 @@ "dependencies": { "@babel/runtime": "^7.23.1", "@mui/utils": "^5.14.11", - "@mui/x-data-grid": "6.16.0", + "@mui/x-data-grid": "6.16.1", "@mui/x-license-pro": "6.10.2", "@types/format-util": "^1.0.2", "clsx": "^2.0.0", diff --git a/packages/grid/x-data-grid/package.json b/packages/grid/x-data-grid/package.json index a98896a65667e..ab5c800fb8c5c 100644 --- a/packages/grid/x-data-grid/package.json +++ b/packages/grid/x-data-grid/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid", - "version": "6.16.0", + "version": "6.16.1", "description": "The community edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index 4feb92eb8cec7..946fad17205c3 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-charts", - "version": "6.0.0-alpha.13", + "version": "6.0.0-alpha.14", "description": "The community edition of the charts components (MUI X).", "author": "MUI Team", "main": "./src/index.js", diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index 039c3479d971e..335fdb2fab146 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers-pro", - "version": "6.16.0", + "version": "6.16.1", "description": "The commercial edition of the date picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,7 +44,7 @@ "@babel/runtime": "^7.23.1", "@mui/base": "^5.0.0-beta.17", "@mui/utils": "^5.14.11", - "@mui/x-date-pickers": "6.16.0", + "@mui/x-date-pickers": "6.16.1", "@mui/x-license-pro": "6.10.2", "clsx": "^2.0.0", "prop-types": "^15.8.1", diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 614e9794ff0fb..f804ba0615c47 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers", - "version": "6.16.0", + "version": "6.16.1", "description": "The community edition of the date picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", From 5fd5e731f2e73448ac912add4af84b345b3d9955 Mon Sep 17 00:00:00 2001 From: Eduardo Dallmann Date: Fri, 6 Oct 2023 06:39:55 -0300 Subject: [PATCH 094/262] [l10n] Improve Spanish (es-ES) locale (#10588) Signed-off-by: Eduardo Dallmann --- packages/x-date-pickers/src/locales/esES.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-date-pickers/src/locales/esES.ts b/packages/x-date-pickers/src/locales/esES.ts index 273cf066ef20f..e4cbf8c416438 100644 --- a/packages/x-date-pickers/src/locales/esES.ts +++ b/packages/x-date-pickers/src/locales/esES.ts @@ -74,7 +74,7 @@ const esESPickers: Partial> = { dateTableLabel: 'elige la hora', // Field section placeholders - fieldYearPlaceholder: (params) => 'Y'.repeat(params.digitAmount), + fieldYearPlaceholder: (params) => 'A'.repeat(params.digitAmount), fieldMonthPlaceholder: (params) => (params.contentType === 'letter' ? 'MMMM' : 'MM'), fieldDayPlaceholder: () => 'DD', fieldWeekDayPlaceholder: (params) => (params.contentType === 'letter' ? 'EEEE' : 'EE'), From e3116f2a4b48a30c3c3250c808df566c9e809237 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Fri, 6 Oct 2023 12:31:02 +0200 Subject: [PATCH 095/262] [pickers] Fix timezone `UTC` false positive (#10586) --- .../x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts | 12 +++++++----- .../src/AdapterMoment/AdapterMoment.ts | 7 ++----- .../describeGregorianAdapter/testCalculations.ts | 8 ++++++++ 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts index 34ba8fbc44b65..80d3921829f2b 100644 --- a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts +++ b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts @@ -326,15 +326,17 @@ export class AdapterDayjs implements MuiPickersAdapter { }; public getTimezone = (value: Dayjs): string => { - if (this.hasUTCPlugin() && value.isUTC()) { - return 'UTC'; - } - if (this.hasTimezonePlugin()) { // @ts-ignore const zone = value.$x?.$timezone; - return zone ?? 'system'; + if (zone) { + return zone; + } + } + + if (this.hasUTCPlugin() && value.isUTC()) { + return 'UTC'; } return 'system'; diff --git a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts index e6c314c9932e5..084b65ea6caef 100644 --- a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts +++ b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts @@ -239,16 +239,13 @@ export class AdapterMoment implements MuiPickersAdapter { }; public getTimezone = (value: Moment): string => { - if (value.isUTC()) { - return 'UTC'; - } - // @ts-ignore // eslint-disable-next-line no-underscore-dangle const zone = value._z?.name; + const defaultZone = value.isUTC() ? 'UTC' : 'system'; // @ts-ignore - return zone ?? this.moment.defaultZone?.name ?? 'system'; + return zone ?? this.moment.defaultZone?.name ?? defaultZone; }; public setTimezone = (value: Moment, timezone: PickersTimezone): Moment => { diff --git a/test/utils/pickers/describeGregorianAdapter/testCalculations.ts b/test/utils/pickers/describeGregorianAdapter/testCalculations.ts index d8d56cbd4a58b..00969e3f0d85b 100644 --- a/test/utils/pickers/describeGregorianAdapter/testCalculations.ts +++ b/test/utils/pickers/describeGregorianAdapter/testCalculations.ts @@ -169,6 +169,14 @@ export const testCalculations: DescribeGregorianAdapterTestSuite = ({ setDefaultTimezone(undefined); }); + it('should not mix Europe/London and UTC in winter', () => { + if (!adapter.isTimezoneCompatible) { + return; + } + const dateWithZone = adapter.dateWithTimezone('2023-10-30T11:44:00.000Z', 'Europe/London'); + expect(adapter.getTimezone(dateWithZone)).to.equal('Europe/London'); + }); + it('Method: setTimezone', () => { if (adapter.isTimezoneCompatible) { const test = (timezone: PickersTimezone) => { From 0c8e06c6ed571b4de4b12427a86610a20b55f18a Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Fri, 6 Oct 2023 13:27:13 +0200 Subject: [PATCH 096/262] [test] Fix `testEval` not invoking test assertions (#10587) --- .../src/tests/filtering.DataGrid.test.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx index e5ab37fa5443d..5747b8bfb2831 100644 --- a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx @@ -44,13 +44,11 @@ describe(' - Filter', () => { let disableEval = false; function testEval(fn: Function) { - return () => { - disableEval = false; - fn(); - disableEval = true; - fn(); - disableEval = false; - }; + disableEval = false; + fn(); + disableEval = true; + fn(); + disableEval = false; } function TestCase(props: Partial) { From 60cf5234b890aa81ebf1f1b7dfdf1d93b6defb43 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 9 Oct 2023 13:58:00 +0200 Subject: [PATCH 097/262] [test] Set UUID chance seed in visual tests (#10609) --- .../src/services/random-generator.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/grid/x-data-grid-generator/src/services/random-generator.ts b/packages/grid/x-data-grid-generator/src/services/random-generator.ts index a379ef2811d79..877e01634b81e 100644 --- a/packages/grid/x-data-grid-generator/src/services/random-generator.ts +++ b/packages/grid/x-data-grid-generator/src/services/random-generator.ts @@ -1,4 +1,4 @@ -import globalChance, { Chance } from 'chance'; +import { Chance } from 'chance'; import { COLORS, COMMODITY_OPTIONS, @@ -12,15 +12,17 @@ import { } from './static-data'; import { GridDataGeneratorContext } from './gridColDefGenerator'; -const chanceId = globalChance(); let chance: Chance.Chance; +let chanceGuid: Chance.Chance; declare const DISABLE_CHANCE_RANDOM: any; if (typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM) { - chance = globalChance(() => 0.5); + chance = new Chance(() => 0.5); + chanceGuid = new Chance(42); } else { - chance = chanceId; + chance = new Chance(); + chanceGuid = chance; } type ColumnDataGenerator = (data: any, context: GridDataGeneratorContext) => Value; @@ -113,7 +115,7 @@ export const randomArrayItem = (arr: T[]) => arr[randomInt(0, arr.length - 1) export const randomBoolean = (): boolean => randomArrayItem([true, false]); export const randomColor = () => randomArrayItem(COLORS); -export const randomId = () => chanceId.guid(); +export const randomId = () => chanceGuid.guid(); export const randomDesk = () => `D-${chance.integer({ min: 0, max: 10000 })}`; export const randomCommodity = () => randomArrayItem(COMMODITY_OPTIONS); export const randomTraderName = () => chance.name(); From 396b63641e2e31d0e7099cfbd8a0fb08e98b098b Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 9 Oct 2023 13:59:05 +0200 Subject: [PATCH 098/262] [test] Fix dev mode warning (#10610) --- test/regressions/index.js | 2 +- test/regressions/webpack.config.js | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/test/regressions/index.js b/test/regressions/index.js index 52be197c53419..7bf6963c3cebd 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -53,7 +53,7 @@ function excludeTest(suite, name) { } // Also use some of the demos to avoid code duplication. -const requireDocs = require.context('docsx/data', true, /js$/); +const requireDocs = require.context('docsx/data', true, /\.js$/); const tests = requireDocs.keys().reduce((res, path) => { const [name, ...suiteArray] = path.replace('./', '').replace('.js', '').split('/').reverse(); const suite = `docs-${suiteArray.reverse().join('-')}`; diff --git a/test/regressions/webpack.config.js b/test/regressions/webpack.config.js index d5d7746e3dac9..5ed03d88068ee 100644 --- a/test/regressions/webpack.config.js +++ b/test/regressions/webpack.config.js @@ -44,6 +44,14 @@ module.exports = { }, resolve: { ...webpackBaseConfig.resolve, + fallback: { + // Exclude polyfill and treat 'fs' as an empty module since it is not required. next -> gzip-size relies on it. + fs: false, + // needed by enzyme > cheerio + stream: false, + // Exclude polyfill and treat 'zlib' as an empty module since it is not required. next -> gzip-size relies on it. + zlib: false, + }, alias: { ...webpackBaseConfig.resolve.alias, docs: false, // Disable this alias as it creates a circular resolution loop with the docsx alias From ef27af253dc25fe8d26f3c7d6717a74a8a28e32a Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Mon, 9 Oct 2023 19:09:41 +0500 Subject: [PATCH 099/262] [DataGridPro] Improve column grouping and column pinning friendship (#10518) --- .../tests/columnPinning.DataGridPro.test.tsx | 75 +++++++++++++++++++ .../columnGrouping/gridColumnGroupsUtils.ts | 26 ++++++- .../columnGrouping/useGridColumnGrouping.ts | 9 +++ 3 files changed, 109 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx index 0957c1a1b478d..4664ef6d89ace 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx @@ -8,6 +8,8 @@ import { DataGridProProps, gridClasses, GridPinnedPosition, + GridColumnGroupingModel, + GridColDef, GRID_CHECKBOX_SELECTION_FIELD, } from '@mui/x-data-grid-pro'; import { useBasicDemoData, getBasicGridData } from '@mui/x-data-grid-generator'; @@ -853,4 +855,77 @@ describe(' - Column pinning', () => { expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'price1M']); }); }); + + describe('Column grouping', () => { + 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: 35 }, + { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, + { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, + { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 }, + { 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' }, + ], + }, + ]; + + it('should create separate column groups for pinned and non-pinned columns having same column group', () => { + render( + , + ); + + const firstNameLastNameColumnGroupHeader = document.querySelector( + '[role="columnheader"][data-fields="|-firstName-|-lastName-|"]', + )!; + expect(firstNameLastNameColumnGroupHeader.textContent).to.equal('Basic info'); + const ageCellColumnGroupHeader = document.querySelector( + '[role="columnheader"][data-fields="|-age-|"]', + )!; + expect(ageCellColumnGroupHeader.textContent).to.equal('Basic info'); + }); + }); }); diff --git a/packages/grid/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsUtils.ts b/packages/grid/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsUtils.ts index 7cf0d16ac0047..5b66c4fde4b3c 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsUtils.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsUtils.ts @@ -65,6 +65,7 @@ export const unwrapGroupingColumnModel = ( export const getColumnGroupsHeaderStructure = ( orderedColumns: string[], unwrappedGroupingModel: UnwrappedGroupingModel, + pinnedFields: { right?: string[]; left?: string[] }, ) => { const getParents = (field: string) => unwrappedGroupingModel[field] ?? []; @@ -74,6 +75,24 @@ export const getColumnGroupsHeaderStructure = ( const haveSameParents = (field1: string, field2: string, depth: number) => isDeepEqual(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1)); + const haveDifferentContainers = (field1: string, field2: string) => { + if ( + pinnedFields?.left && + pinnedFields.left.includes(field1) && + !pinnedFields.left.includes(field2) + ) { + return true; + } + if ( + pinnedFields?.right && + !pinnedFields.right.includes(field1) && + pinnedFields.right.includes(field2) + ) { + return true; + } + return false; + }; + for (let depth = 0; depth < maxDepth; depth += 1) { const depthStructure = orderedColumns.reduce((structure, newField) => { const groupId = getParents(newField)[depth] ?? null; @@ -90,7 +109,12 @@ export const getColumnGroupsHeaderStructure = ( const prevField = lastGroup.columnFields[lastGroup.columnFields.length - 1]; const prevGroupId = lastGroup.groupId; - if (prevGroupId !== groupId || !haveSameParents(prevField, newField, depth)) { + if ( + prevGroupId !== groupId || + !haveSameParents(prevField, newField, depth) || + // Fix for https://github.com/mui/mui-x/issues/7041 + haveDifferentContainers(prevField, newField) + ) { // It's a new group return [ ...structure, diff --git a/packages/grid/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts b/packages/grid/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts index f7255263dd7d2..f0d4f0699a259 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts @@ -63,6 +63,8 @@ export const columnGroupsStateInitializer: GridStateInitializer< const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure( columnFields, unwrappedGroupingModel, + // @ts-expect-error Move this part to `Pro` package + apiRef.current.state.pinnedColumns ?? {}, ); const maxDepth = visibleColumnFields.length === 0 @@ -122,9 +124,13 @@ export const useGridColumnGrouping = ( apiRef.current.setState((state) => { const orderedFields = state.columns?.orderedFields ?? []; + // @ts-expect-error Move this logic to `Pro` package + const pinnedColumns = state.pinnedColumns ?? {}; + const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure( orderedFields as string[], unwrappedGroupingModel, + pinnedColumns, ); return { ...state, @@ -141,6 +147,8 @@ export const useGridColumnGrouping = ( if (!props.experimentalFeatures?.columnGrouping) { return; } + // @ts-expect-error Move this logic to `Pro` package + const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {}; const columnFields = gridColumnFieldsSelector(apiRef); const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef); const groupLookup = createGroupLookup(columnGroupingModel ?? []); @@ -148,6 +156,7 @@ export const useGridColumnGrouping = ( const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure( columnFields, unwrappedGroupingModel, + pinnedColumns, ); const maxDepth = visibleColumnFields.length === 0 From 3bffdd794a56c5b18ed4a96ed38c16144019d2ef Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Mon, 9 Oct 2023 22:18:28 +0500 Subject: [PATCH 100/262] [DataGrid] Fix `LazyLoading` demo crash (#10621) --- .../src/hooks/features/lazyLoader/useGridLazyLoader.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts b/packages/grid/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts index d90e2f8ab1606..6f19a0a3721f4 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts +++ b/packages/grid/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts @@ -36,9 +36,9 @@ function findSkeletonRowsSection({ while (!isSkeletonSectionFound && firstRowIndex < lastRowIndex) { const isStartingWithASkeletonRow = - apiRef.current.getRowNode(visibleRowsSection[startIndex].id)!.type === 'skeletonRow'; + apiRef.current.getRowNode(visibleRowsSection[startIndex].id)?.type === 'skeletonRow'; const isEndingWithASkeletonRow = - apiRef.current.getRowNode(visibleRowsSection[endIndex].id)!.type === 'skeletonRow'; + apiRef.current.getRowNode(visibleRowsSection[endIndex].id)?.type === 'skeletonRow'; if (isStartingWithASkeletonRow && isEndingWithASkeletonRow) { isSkeletonSectionFound = true; From f95569ea83f728b39005122070d1766ed8a4fcd3 Mon Sep 17 00:00:00 2001 From: Ala Ben Yahia <61480269+alabenyahia@users.noreply.github.com> Date: Tue, 10 Oct 2023 09:51:29 +0100 Subject: [PATCH 101/262] [l10n] Improve Arabic (ar-SD) locale (#10625) Co-authored-by: alexandre --- docs/data/data-grid/localization/data.json | 2 +- packages/grid/x-data-grid/src/locales/arSD.ts | 52 +++++++++---------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json index 035bf150660ec..3b3923e47a9ba 100644 --- a/docs/data/data-grid/localization/data.json +++ b/docs/data/data-grid/localization/data.json @@ -3,7 +3,7 @@ "languageTag": "ar-SD", "importName": "arSD", "localeName": "Arabic (Sudan)", - "missingKeysCount": 27, + "missingKeysCount": 1, "totalKeysCount": 119, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/grid/x-data-grid/src/locales/arSD.ts" }, diff --git a/packages/grid/x-data-grid/src/locales/arSD.ts b/packages/grid/x-data-grid/src/locales/arSD.ts index 0be78dd5d5e9b..73b6a3140c813 100644 --- a/packages/grid/x-data-grid/src/locales/arSD.ts +++ b/packages/grid/x-data-grid/src/locales/arSD.ts @@ -47,7 +47,7 @@ const arSDGrid: Partial = { // Filter panel text filterPanelAddFilter: 'إضافة مرشِح', - // filterPanelRemoveAll: 'Remove all', + filterPanelRemoveAll: 'حذف الكل', filterPanelDeleteIconLabel: 'حذف', filterPanelLogicOperator: 'عامل منطقي', filterPanelOperator: 'عامل', @@ -71,33 +71,33 @@ const arSDGrid: Partial = { filterOperatorIsEmpty: 'خالي', filterOperatorIsNotEmpty: 'غير خالي', filterOperatorIsAnyOf: 'أي من', - // 'filterOperator=': '=', - // 'filterOperator!=': '!=', - // 'filterOperator>': '>', - // 'filterOperator>=': '>=', - // 'filterOperator<': '<', - // 'filterOperator<=': '<=', + 'filterOperator=': '=', + 'filterOperator!=': '!=', + 'filterOperator>': '>', + 'filterOperator>=': '>=', + 'filterOperator<': '<', + 'filterOperator<=': '<=', // Header filter operators text - // headerFilterOperatorContains: 'Contains', - // headerFilterOperatorEquals: 'Equals', - // headerFilterOperatorStartsWith: 'Starts with', - // headerFilterOperatorEndsWith: 'Ends with', - // headerFilterOperatorIs: 'Is', - // headerFilterOperatorNot: 'Is not', - // headerFilterOperatorAfter: 'Is after', - // headerFilterOperatorOnOrAfter: 'Is on or after', - // headerFilterOperatorBefore: 'Is before', - // headerFilterOperatorOnOrBefore: 'Is on or before', - // headerFilterOperatorIsEmpty: 'Is empty', - // headerFilterOperatorIsNotEmpty: 'Is not empty', - // headerFilterOperatorIsAnyOf: 'Is any of', - // 'headerFilterOperator=': 'Equals', - // 'headerFilterOperator!=': 'Not equals', - // 'headerFilterOperator>': 'Greater than', - // 'headerFilterOperator>=': 'Greater than or equal to', - // 'headerFilterOperator<': 'Less than', - // 'headerFilterOperator<=': 'Less than or equal to', + headerFilterOperatorContains: 'يحتوي على', + headerFilterOperatorEquals: 'يساوي', + headerFilterOperatorStartsWith: 'يبدأ ب', + headerFilterOperatorEndsWith: 'ينتهي ب', + headerFilterOperatorIs: 'هو', + headerFilterOperatorNot: 'هو ليس', + headerFilterOperatorAfter: 'يقع بعد', + headerFilterOperatorOnOrAfter: 'هو على او بعد', + headerFilterOperatorBefore: 'يقع قبل', + headerFilterOperatorOnOrBefore: 'هو على او بعد', + headerFilterOperatorIsEmpty: 'هو فارغ', + headerFilterOperatorIsNotEmpty: 'هو ليس فارغ', + headerFilterOperatorIsAnyOf: 'هو أي من', + 'headerFilterOperator=': 'يساوي', + 'headerFilterOperator!=': 'لا يساوي', + 'headerFilterOperator>': 'أكبر من', + 'headerFilterOperator>=': 'أكبر من او يساوي', + 'headerFilterOperator<': 'اصغر من', + 'headerFilterOperator<=': 'اصغر من او يساوي', // Filter values text filterValueAny: 'أي', From fae19e4c54b5f5fcb16016876dbeead812d18604 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 10 Oct 2023 06:46:28 -0400 Subject: [PATCH 102/262] [DataGrid] Fix: getRowId not defined (#10613) --- .../x-data-grid/src/hooks/features/filter/gridFilterUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts b/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts index 42a9d37ec3ce3..3d53c84c74532 100644 --- a/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts +++ b/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts @@ -272,7 +272,7 @@ export const buildAggregatedFilterItemsApplier = ( // We generate a new function with `eval()` to avoid expensive patterns for JS engines // such as a dynamic object assignment, e.g. `{ [dynamicKey]: value }`. - const filterItemTemplate = `(function filterItem$$(appliers, row, shouldApplyFilter) { + const filterItemTemplate = `(function filterItem$$(getRowId, appliers, row, shouldApplyFilter) { ${appliers .map( (applier, i) => @@ -305,7 +305,7 @@ export const buildAggregatedFilterItemsApplier = ( filterItemTemplate.replaceAll('$$', String(filterItemsApplierId)), ); const filterItem: GridFilterItemApplierNotAggregated = (row, shouldApplyItem) => { - return filterItemCore(appliers, row, shouldApplyItem); + return filterItemCore(getRowId, appliers, row, shouldApplyItem); }; filterItemsApplierId += 1; From 9e49ead69e4a42b216f08e0300e2486dfe1d524b Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 10 Oct 2023 17:26:00 +0500 Subject: [PATCH 103/262] [core] Update `no-response` workflow (#10491) --- .github/workflows/no-response.yml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/workflows/no-response.yml b/.github/workflows/no-response.yml index b169265335f30..3f9593da165ae 100644 --- a/.github/workflows/no-response.yml +++ b/.github/workflows/no-response.yml @@ -18,13 +18,15 @@ jobs: contents: read issues: write steps: - - uses: lee-dohm/no-response@9bb0a4b5e6a45046f00353d5de7d90fb8bd773bb # v0.5.0 + - uses: MBilalShafi/no-response-add-label@9657b5bc1e09373e571df54429c3c167edaad556 with: token: ${{ secrets.GITHUB_TOKEN }} # Number of days of inactivity before an Issue is closed for lack of response daysUntilClose: 7 # Label requiring a response - responseRequiredLabel: 'status: waiting for follow-up' + responseRequiredLabel: 'status: waiting for author' + # Label to add back when required label is removed + optionalFollowupLabel: 'status: waiting for maintainer' # Comment to post when closing an Issue for lack of response. Set to `false` to disable closeComment: > The issue has been inactive for 7 days and has been automatically closed. From e328dcb529b348db3a1704fb64cd11b739f8bb6e Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Tue, 10 Oct 2023 15:22:38 +0200 Subject: [PATCH 104/262] [docs] Fix DataGrid[Pro/Premium] reference links (#10620) --- .../src/DataGridPremium/DataGridPremium.tsx | 7 +++++++ .../grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx | 7 +++++++ packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx | 7 +++++++ .../src/components/panel/filterPanel/GridFilterForm.tsx | 7 +++++++ .../src/components/panel/filterPanel/GridFilterPanel.tsx | 7 +++++++ .../src/components/toolbar/GridToolbarQuickFilter.tsx | 8 ++++++++ 6 files changed, 43 insertions(+) diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index 95bb964b8d390..d4ed6e679b05c 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -60,6 +60,13 @@ interface DataGridPremiumComponent { propTypes?: any; } +/** + * Demos: + * - [DataGridPremium](https://mui.com/x/react-data-grid/demo/) + * + * API: + * - [DataGridPremium API](https://mui.com/x/api/data-grid/data-grid-premium/) + */ export const DataGridPremium = React.memo(DataGridPremiumRaw) as DataGridPremiumComponent; DataGridPremiumRaw.propTypes = { diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index a4e53c48bdeca..07479dba9a3e1 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -59,6 +59,13 @@ interface DataGridProComponent { propTypes?: any; } +/** + * Demos: + * - [DataGridPro](https://mui.com/x/react-data-grid/demo/) + * + * API: + * - [DataGridPro API](https://mui.com/x/api/data-grid/data-grid-pro/) + */ export const DataGridPro = React.memo(DataGridProRaw) as DataGridProComponent; DataGridProRaw.propTypes = { diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx index 22e3860741c39..9c447dc7da0a7 100644 --- a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx @@ -40,6 +40,13 @@ interface DataGridComponent { propTypes?: any; } +/** + * Demos: + * - [DataGrid](https://mui.com/x/react-data-grid/demo/) + * + * API: + * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/) + */ export const DataGrid = React.memo(DataGridRaw) as DataGridComponent; /** diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx index 1e13b9b5e0930..a2a1df4576181 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx @@ -651,4 +651,11 @@ GridFilterForm.propTypes = { valueInputProps: PropTypes.any, } as any; +/** + * Demos: + * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/) + * + * API: + * - [GridFilterForm API](https://mui.com/x/api/data-grid/grid-filter-form/) + */ export { GridFilterForm }; diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx index 7d46573d287ee..b01bc07eeab0c 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx @@ -317,4 +317,11 @@ GridFilterPanel.propTypes = { ]), } as any; +/** + * Demos: + * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/) + * + * API: + * - [GridFilterPanel API](https://mui.com/x/api/data-grid/grid-filter-panel/) + */ export { GridFilterPanel, getGridFilter }; diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx index 7198f31cb265d..2ac21c6d7216e 100644 --- a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx +++ b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx @@ -182,4 +182,12 @@ GridToolbarQuickFilter.propTypes = { quickFilterParser: PropTypes.func, } as any; +/** + * Demos: + * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/) + * - [Filtering - quick filter](https://mui.com/x/react-data-grid/filtering/quick-filter/) + * + * API: + * - [GridToolbarQuickFilter API](https://mui.com/x/api/data-grid/grid-toolbar-quick-filter/) + */ export { GridToolbarQuickFilter }; From d24cc4c120ec885e23aa80571fd8d6f2e3794679 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Tue, 10 Oct 2023 22:21:21 +0200 Subject: [PATCH 105/262] [docs] Add bulk editing demo (#10333) --- docs/data/data-grid/editing/editing.md | 8 +- .../recipes-editing/BulkEditingNoSnap.js | 196 +++++++++++++++++ .../recipes-editing/BulkEditingNoSnap.tsx | 206 ++++++++++++++++++ .../recipes-editing/recipes-editing.md | 11 + docs/package.json | 1 + yarn.lock | 94 +++++++- 6 files changed, 514 insertions(+), 2 deletions(-) create mode 100644 docs/data/data-grid/recipes-editing/BulkEditingNoSnap.js create mode 100644 docs/data/data-grid/recipes-editing/BulkEditingNoSnap.tsx diff --git a/docs/data/data-grid/editing/editing.md b/docs/data/data-grid/editing/editing.md index 193fad2a047c4..ae28abf66188d 100644 --- a/docs/data/data-grid/editing/editing.md +++ b/docs/data/data-grid/editing/editing.md @@ -466,7 +466,13 @@ Instead, use the provided interactions to exit edit mode. ## Advanced use cases -See [Editing recipes](/x/react-data-grid/recipes-editing/) for more advanced use cases. +The [Editing recipes](/x/react-data-grid/recipes-editing/) page covers more advanced use cases, such as: + +- [Multiline editing](/x/react-data-grid/recipes-editing/#multiline-editing) +- [Single click editing](/x/react-data-grid/recipes-editing/#single-click-editing) +- [Bulk editing](/x/react-data-grid/recipes-editing/#bulk-editing) +- [Conditional validation](/x/react-data-grid/recipes-editing/#conditional-validation) +- [Linked fields](/x/react-data-grid/recipes-editing/#linked-fields) ## apiRef diff --git a/docs/data/data-grid/recipes-editing/BulkEditingNoSnap.js b/docs/data/data-grid/recipes-editing/BulkEditingNoSnap.js new file mode 100644 index 0000000000000..57d79335d3269 --- /dev/null +++ b/docs/data/data-grid/recipes-editing/BulkEditingNoSnap.js @@ -0,0 +1,196 @@ +/* eslint-disable no-underscore-dangle */ +import * as React from 'react'; +import { + DataGridPremium, + useGridApiRef, + GridActionsCellItem, +} from '@mui/x-data-grid-premium'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Button from '@mui/material/Button'; +import DeleteIcon from '@mui/icons-material/Delete'; +import RestoreIcon from '@mui/icons-material/Restore'; +import LoadingButton from '@mui/lab/LoadingButton'; +import SaveIcon from '@mui/icons-material/Save'; +import { darken } from '@mui/material/styles'; + +export default function BulkEditingNoSnap() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 100, + maxColumns: 7, + editable: true, + visibleFields: [ + 'id', + 'commodity', + 'traderName', + 'traderEmail', + 'quantity', + 'filledQuantity', + ], + }); + + const apiRef = useGridApiRef(); + + const [hasUnsavedRows, setHasUnsavedRows] = React.useState(false); + const unsavedChangesRef = React.useRef({ + unsavedRows: {}, + rowsBeforeChange: {}, + }); + const [isSaving, setIsSaving] = React.useState(false); + + const columns = React.useMemo(() => { + return [ + { + field: 'actions', + type: 'actions', + getActions: ({ id, row }) => { + return [ + } + label="Discard changes" + disabled={unsavedChangesRef.current.unsavedRows[id] === undefined} + onClick={() => { + apiRef.current.updateRows([ + unsavedChangesRef.current.rowsBeforeChange[id], + ]); + delete unsavedChangesRef.current.rowsBeforeChange[id]; + delete unsavedChangesRef.current.unsavedRows[id]; + setHasUnsavedRows( + Object.keys(unsavedChangesRef.current.unsavedRows).length > 0, + ); + }} + />, + } + label="Delete" + onClick={() => { + unsavedChangesRef.current.unsavedRows[id] = { + ...row, + _action: 'delete', + }; + if (!unsavedChangesRef.current.rowsBeforeChange[id]) { + unsavedChangesRef.current.rowsBeforeChange[id] = row; + } + setHasUnsavedRows(true); + apiRef.current.updateRows([row]); // to trigger row render + }} + />, + ]; + }, + }, + ...data.columns, + ]; + }, [data.columns, unsavedChangesRef, apiRef]); + + const processRowUpdate = (newRow, oldRow) => { + const rowId = newRow.id; + + unsavedChangesRef.current.unsavedRows[rowId] = newRow; + if (!unsavedChangesRef.current.rowsBeforeChange[rowId]) { + unsavedChangesRef.current.rowsBeforeChange[rowId] = oldRow; + } + setHasUnsavedRows(true); + return newRow; + }; + + const discardChanges = () => { + setHasUnsavedRows(false); + apiRef.current.updateRows( + Object.values(unsavedChangesRef.current.rowsBeforeChange), + ); + unsavedChangesRef.current = { + unsavedRows: {}, + rowsBeforeChange: {}, + }; + }; + + const saveChanges = async () => { + try { + // Persist updates in the database + setIsSaving(true); + await new Promise((resolve) => { + setTimeout(resolve, 1000); + }); + + setIsSaving(false); + const rowsToDelete = Object.values( + unsavedChangesRef.current.unsavedRows, + ).filter((row) => row._action === 'delete'); + if (rowsToDelete.length > 0) { + apiRef.current.updateRows(rowsToDelete); + } + + setHasUnsavedRows(false); + unsavedChangesRef.current = { + unsavedRows: {}, + rowsBeforeChange: {}, + }; + } catch (error) { + setIsSaving(false); + } + }; + + return ( +
          +
          + } + loadingPosition="start" + > + Save + + +
          +
          + { + if (theme.palette.mode === 'light') { + return 'rgba(255, 170, 170, 0.3)'; + } + return darken('rgba(255, 170, 170, 1)', 0.7); + }, + }, + '& .MuiDataGrid-row.row--edited': { + backgroundColor: (theme) => { + if (theme.palette.mode === 'light') { + return 'rgba(255, 254, 176, 0.3)'; + } + return darken('rgba(255, 254, 176, 1)', 0.6); + }, + }, + }} + loading={isSaving} + getRowClassName={({ id }) => { + const unsavedRow = unsavedChangesRef.current.unsavedRows[id]; + if (unsavedRow) { + if (unsavedRow._action === 'delete') { + return 'row--removed'; + } + return 'row--edited'; + } + return ''; + }} + /> +
          +
          + ); +} diff --git a/docs/data/data-grid/recipes-editing/BulkEditingNoSnap.tsx b/docs/data/data-grid/recipes-editing/BulkEditingNoSnap.tsx new file mode 100644 index 0000000000000..aeb9621bf044d --- /dev/null +++ b/docs/data/data-grid/recipes-editing/BulkEditingNoSnap.tsx @@ -0,0 +1,206 @@ +/* eslint-disable no-underscore-dangle */ +import * as React from 'react'; +import { + DataGridPremium, + GridRowId, + GridValidRowModel, + DataGridPremiumProps, + useGridApiRef, + GridActionsCellItem, + GridColDef, +} from '@mui/x-data-grid-premium'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Button from '@mui/material/Button'; +import DeleteIcon from '@mui/icons-material/Delete'; +import RestoreIcon from '@mui/icons-material/Restore'; +import LoadingButton from '@mui/lab/LoadingButton'; +import SaveIcon from '@mui/icons-material/Save'; +import { darken } from '@mui/material/styles'; + +export default function BulkEditingNoSnap() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 100, + maxColumns: 7, + editable: true, + visibleFields: [ + 'id', + 'commodity', + 'traderName', + 'traderEmail', + 'quantity', + 'filledQuantity', + ], + }); + + const apiRef = useGridApiRef(); + + const [hasUnsavedRows, setHasUnsavedRows] = React.useState(false); + const unsavedChangesRef = React.useRef<{ + unsavedRows: Record; + rowsBeforeChange: Record; + }>({ + unsavedRows: {}, + rowsBeforeChange: {}, + }); + const [isSaving, setIsSaving] = React.useState(false); + + const columns = React.useMemo(() => { + return [ + { + field: 'actions', + type: 'actions', + getActions: ({ id, row }) => { + return [ + } + label="Discard changes" + disabled={unsavedChangesRef.current.unsavedRows[id] === undefined} + onClick={() => { + apiRef.current.updateRows([ + unsavedChangesRef.current.rowsBeforeChange[id], + ]); + delete unsavedChangesRef.current.rowsBeforeChange[id]; + delete unsavedChangesRef.current.unsavedRows[id]; + setHasUnsavedRows( + Object.keys(unsavedChangesRef.current.unsavedRows).length > 0, + ); + }} + />, + } + label="Delete" + onClick={() => { + unsavedChangesRef.current.unsavedRows[id] = { + ...row, + _action: 'delete', + }; + if (!unsavedChangesRef.current.rowsBeforeChange[id]) { + unsavedChangesRef.current.rowsBeforeChange[id] = row; + } + setHasUnsavedRows(true); + apiRef.current.updateRows([row]); // to trigger row render + }} + />, + ]; + }, + }, + ...data.columns, + ]; + }, [data.columns, unsavedChangesRef, apiRef]); + + const processRowUpdate: NonNullable = ( + newRow, + oldRow, + ) => { + const rowId = newRow.id; + + unsavedChangesRef.current.unsavedRows[rowId] = newRow; + if (!unsavedChangesRef.current.rowsBeforeChange[rowId]) { + unsavedChangesRef.current.rowsBeforeChange[rowId] = oldRow; + } + setHasUnsavedRows(true); + return newRow; + }; + + const discardChanges = () => { + setHasUnsavedRows(false); + apiRef.current.updateRows( + Object.values(unsavedChangesRef.current.rowsBeforeChange), + ); + unsavedChangesRef.current = { + unsavedRows: {}, + rowsBeforeChange: {}, + }; + }; + + const saveChanges = async () => { + try { + // Persist updates in the database + setIsSaving(true); + await new Promise((resolve) => { + setTimeout(resolve, 1000); + }); + + setIsSaving(false); + const rowsToDelete = Object.values( + unsavedChangesRef.current.unsavedRows, + ).filter((row) => row._action === 'delete'); + if (rowsToDelete.length > 0) { + apiRef.current.updateRows(rowsToDelete); + } + + setHasUnsavedRows(false); + unsavedChangesRef.current = { + unsavedRows: {}, + rowsBeforeChange: {}, + }; + } catch (error) { + setIsSaving(false); + } + }; + + return ( +
          +
          + } + loadingPosition="start" + > + Save + + +
          +
          + { + if (theme.palette.mode === 'light') { + return 'rgba(255, 170, 170, 0.3)'; + } + return darken('rgba(255, 170, 170, 1)', 0.7); + }, + }, + '& .MuiDataGrid-row.row--edited': { + backgroundColor: (theme) => { + if (theme.palette.mode === 'light') { + return 'rgba(255, 254, 176, 0.3)'; + } + return darken('rgba(255, 254, 176, 1)', 0.6); + }, + }, + }} + loading={isSaving} + getRowClassName={({ id }) => { + const unsavedRow = unsavedChangesRef.current.unsavedRows[id]; + if (unsavedRow) { + if (unsavedRow._action === 'delete') { + return 'row--removed'; + } + return 'row--edited'; + } + return ''; + }} + /> +
          +
          + ); +} diff --git a/docs/data/data-grid/recipes-editing/recipes-editing.md b/docs/data/data-grid/recipes-editing/recipes-editing.md index 921364a26ff6a..8b053fe23e7ce 100644 --- a/docs/data/data-grid/recipes-editing/recipes-editing.md +++ b/docs/data/data-grid/recipes-editing/recipes-editing.md @@ -105,3 +105,14 @@ Using the [controlled mode](/x/react-data-grid/editing/#controlled-model) and li The following demo implements this behavior. {{"demo": "SingleClickEditing.js", "bg": "inline", "defaultCodeOpen": false}} + +## Bulk editing + +The data grid [Editing](/x/react-data-grid/editing/) API exposes [the `processRowUpdate` callback](/x/react-data-grid/editing/#the-processrowupdate-callback) which is commonly used to persist edits on per-row basis. +You can utilize this callback to batch edits locally and then choose to either persist or discard them in bulk. + +The demo below stores edited and deleted rows in the `unsavedChangesRef`. +These changes are saved or discarded when the user clicks the **Save** or **Discard** buttons respectively. +Row updates from [Clipboard paste](/x/react-data-grid/clipboard/#clipboard-paste) are also batched, as [Clipboard paste uses Editing API for persistence](/x/react-data-grid/clipboard/#persisting-pasted-data). + +{{"demo": "BulkEditingNoSnap.js", "bg": "inline", "defaultCodeOpen": false}} diff --git a/docs/package.json b/docs/package.json index bfbbd7cfbee09..ec647acfea96a 100644 --- a/docs/package.json +++ b/docs/package.json @@ -30,6 +30,7 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.11", "@mui/joy": "^5.0.0-beta.8", + "@mui/lab": "^5.0.0-alpha.147", "@mui/material": "^5.14.11", "@mui/styles": "^5.14.11", "@mui/utils": "^5.14.11", diff --git a/yarn.lock b/yarn.lock index a39bf13b99fce..63697aebcb2ae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1273,7 +1273,7 @@ core-js "^2.6.12" regenerator-runtime "^0.14.0" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.15", "@babel/runtime@^7.23.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.15", "@babel/runtime@^7.22.6", "@babel/runtime@^7.23.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": version "7.23.1" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d" integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g== @@ -1805,6 +1805,19 @@ clsx "^2.0.0" prop-types "^15.8.1" +"@mui/base@5.0.0-beta.18": + version "5.0.0-beta.18" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.18.tgz#f95d393cf80974e77c0823170cc15c854d5af84b" + integrity sha512-e9ZCy/ndhyt5MTshAS3qAUy/40UiO0jX+kAo6a+XirrPJE+rrQW+mKPSI0uyp+5z4Vh+z0pvNoJ2S2gSrNz3BQ== + dependencies: + "@babel/runtime" "^7.23.1" + "@floating-ui/react-dom" "^2.0.2" + "@mui/types" "^7.2.5" + "@mui/utils" "^5.14.12" + "@popperjs/core" "^2.11.8" + clsx "^2.0.0" + prop-types "^15.8.1" + "@mui/core-downloads-tracker@^5.14.11": version "5.14.11" resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.11.tgz#e829aceb5c0bbfc3383ed90a6a85445344dd65a7" @@ -1831,6 +1844,20 @@ clsx "^2.0.0" prop-types "^15.8.1" +"@mui/lab@^5.0.0-alpha.147": + version "5.0.0-alpha.147" + resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.147.tgz#5586ef727c355617c499d0e13ab7dbd33ece1e09" + integrity sha512-AZjDEl31/co9baYrOBHMlXI8BCrV9JTCGDE2+IswVm32HNPYL5V2gHL3wKqn+MIFeCEg+z2es+8CU/Bau0JNSQ== + dependencies: + "@babel/runtime" "^7.23.1" + "@mui/base" "5.0.0-beta.18" + "@mui/system" "^5.14.12" + "@mui/types" "^7.2.5" + "@mui/utils" "^5.14.12" + "@mui/x-tree-view" "6.0.0-alpha.1" + clsx "^2.0.0" + prop-types "^15.8.1" + "@mui/material@^5.14.11": version "5.14.11" resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.11.tgz#7537f07c383a6cfa32a00fabc9959593478bc5c4" @@ -1862,6 +1889,15 @@ "@mui/utils" "^5.14.11" prop-types "^15.8.1" +"@mui/private-theming@^5.14.12": + version "5.14.12" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.12.tgz#b07f710b9794c928052ee4c91bf67fc3e0a442ea" + integrity sha512-TWwm+9+BgHFpoR3w04FG+IqID4ALa74A27RuKq2CEaWgxliBZB24EVeI6djfjFt5t4FYmIb8BMw2ZJEir7YjLQ== + dependencies: + "@babel/runtime" "^7.23.1" + "@mui/utils" "^5.14.12" + prop-types "^15.8.1" + "@mui/styled-engine@^5.14.11": version "5.14.11" resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.11.tgz#22cb0047f211be4dbc133a5d1015369293bdff00" @@ -1872,6 +1908,16 @@ csstype "^3.1.2" prop-types "^15.8.1" +"@mui/styled-engine@^5.14.12": + version "5.14.12" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.12.tgz#bfacc045f14f8f8bef735c76ecfd90bc99427c43" + integrity sha512-bocxt1nDmXfB3gpLfCCmFCyJ7sVmscFs+PuheO210QagZwHVp47UIRT1AiswLDYSQo1ZqmVGn7KLEJEYK0d4Xw== + dependencies: + "@babel/runtime" "^7.23.1" + "@emotion/cache" "^11.11.0" + csstype "^3.1.2" + prop-types "^15.8.1" + "@mui/styles@^5.14.11": version "5.14.11" resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.14.11.tgz#3a9c31e927b9115c62c5260c5614c178f849aa43" @@ -1909,11 +1955,30 @@ csstype "^3.1.2" prop-types "^15.8.1" +"@mui/system@^5.14.12": + version "5.14.12" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.12.tgz#da5b32c2a10bbe58f8b4839c5d5de449dc35e425" + integrity sha512-6DXfjjLhW0/ia5qU3Crke7j+MnfDbMBOHlLIrqbrEqNs0AuSBv8pXniEGb+kqO0H804NJreRTEJRjCngwOX5CA== + dependencies: + "@babel/runtime" "^7.23.1" + "@mui/private-theming" "^5.14.12" + "@mui/styled-engine" "^5.14.12" + "@mui/types" "^7.2.5" + "@mui/utils" "^5.14.12" + clsx "^2.0.0" + csstype "^3.1.2" + prop-types "^15.8.1" + "@mui/types@^7.2.4": version "7.2.4" resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328" integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA== +"@mui/types@^7.2.5": + version "7.2.5" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.5.tgz#cd62a1fc5eb1044137ccab2053b431dd7cfc3cb8" + integrity sha512-S2BwfNczr7VwS6ki8GoAXJyARoeSJDLuxOEPs3vEMyTALlf9PrdHv+sluX7kk3iKrCg/ML2mIWwapZvWbkMCQA== + "@mui/utils@^5.14.11": version "5.14.11" resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.11.tgz#d19a1d8725ffd16c6c6817f00b5172931958fb9a" @@ -1924,6 +1989,28 @@ prop-types "^15.8.1" react-is "^18.2.0" +"@mui/utils@^5.14.12", "@mui/utils@^5.14.3": + version "5.14.12" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.12.tgz#58b570839e22e0fba71e17d37d9c083fe233704d" + integrity sha512-RFNXnhKQlzIkIUig6mmv0r5VbtjPdWoaBPYicq25LETdZux59HAqoRdWw15T7lp3c7gXOoE8y67+hTB8C64m2g== + dependencies: + "@babel/runtime" "^7.23.1" + "@types/prop-types" "^15.7.7" + prop-types "^15.8.1" + react-is "^18.2.0" + +"@mui/x-tree-view@6.0.0-alpha.1": + version "6.0.0-alpha.1" + resolved "https://registry.yarnpkg.com/@mui/x-tree-view/-/x-tree-view-6.0.0-alpha.1.tgz#fe499f8c43c01d28aca95cfb17491746ffcc3080" + integrity sha512-JUG3HmBrmGEALbCFg1b+i7h726e1dWYZs4db3syO1j+Q++E3nbvE4Lehp5yGTFm+8esH0Tny50tuJaa4WX6VSA== + dependencies: + "@babel/runtime" "^7.22.6" + "@mui/utils" "^5.14.3" + "@types/react-transition-group" "^4.4.6" + clsx "^2.0.0" + prop-types "^15.8.1" + react-transition-group "^4.4.5" + "@next/env@13.4.19": version "13.4.19" resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.19.tgz#46905b4e6f62da825b040343cbc233144e9578d3" @@ -2961,6 +3048,11 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== +"@types/prop-types@^15.7.7": + version "15.7.8" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.8.tgz#805eae6e8f41bd19e88917d2ea200dc992f405d3" + integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ== + "@types/react-dom@^18.0.0", "@types/react-dom@^18.2.9": version "18.2.9" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.9.tgz#c4ce3c7c91a134e1bff58692aa2d2f2f4029c38b" From e8c8383b1aa1704b6534690eadb0a864d03527fa Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 10 Oct 2023 23:29:24 +0300 Subject: [PATCH 106/262] Bump eslint to ^8.50.0 (#10537) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Lukas --- package.json | 2 +- .../eslint-plugin-material-ui/package.json | 2 +- .../src/rules/no-direct-state-access.js | 2 +- yarn.lock | 26 +++++++++---------- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index c28fcdc0adf15..4043514f090a5 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "cross-env": "^7.0.3", "danger": "^11.3.0", "enzyme": "^3.11.0", - "eslint": "^8.49.0", + "eslint": "^8.50.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.1.0", "eslint-config-prettier": "^9.0.0", diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json index 0eb9afbd24d77..6583cd81793a5 100644 --- a/packages/eslint-plugin-material-ui/package.json +++ b/packages/eslint-plugin-material-ui/package.json @@ -5,7 +5,7 @@ "description": "Custom eslint rules for MUI X.", "main": "src/index.js", "devDependencies": { - "@types/eslint": "^8.44.2", + "@types/eslint": "^8.44.3", "@typescript-eslint/experimental-utils": "^5.62.0", "@typescript-eslint/parser": "^6.7.3" }, diff --git a/packages/eslint-plugin-material-ui/src/rules/no-direct-state-access.js b/packages/eslint-plugin-material-ui/src/rules/no-direct-state-access.js index 61b06c9fd6a5b..6b67202bee092 100644 --- a/packages/eslint-plugin-material-ui/src/rules/no-direct-state-access.js +++ b/packages/eslint-plugin-material-ui/src/rules/no-direct-state-access.js @@ -22,7 +22,7 @@ function reportIfDirectlyAccessingState(node, context, nodeToReport = node) { return; } - const parserServices = ESLintUtils.getParserServices(context); + const { parserServices } = context.sourceCode; const checker = parserServices.program.getTypeChecker(); const originalNode = parserServices.esTreeNodeToTSNodeMap.get(maybeApiRef); diff --git a/yarn.lock b/yarn.lock index 63697aebcb2ae..26c8984226e45 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1507,10 +1507,10 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" -"@eslint/js@8.49.0": - version "8.49.0" - resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.49.0.tgz#86f79756004a97fa4df866835093f1df3d03c333" - integrity sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w== +"@eslint/js@8.50.0": + version "8.50.0" + resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.50.0.tgz#9e93b850f0f3fa35f5fa59adfd03adae8488e484" + integrity sha512-NCC3zz2+nvYd+Ckfh87rA47zfu2QsQpvc6k1yzTk+b9KzRj0wkGa8LSoGOXN6Zv4lRf/EIoZ80biDh9HOI+RNQ== "@fast-csv/format@4.3.5": version "4.3.5" @@ -2914,10 +2914,10 @@ "@types/eslint" "*" "@types/estree" "*" -"@types/eslint@*", "@types/eslint@^8.44.2": - version "8.44.2" - resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.44.2.tgz#0d21c505f98a89b8dd4d37fa162b09da6089199a" - integrity sha512-sdPRb9K6iL5XZOmBubg8yiFp5yS/JdUDQsq5e6h95km91MCYMuvp7mh1fjPEYUhvHepKpZOjnEaMBR4PxjWDzg== +"@types/eslint@*", "@types/eslint@^8.44.3": + version "8.44.3" + resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.44.3.tgz#96614fae4875ea6328f56de38666f582d911d962" + integrity sha512-iM/WfkwAhwmPff3wZuPLYiHX18HI24jU8k1ZSH7P8FHwxTjZ2P6CoX2wnF43oprR+YXJM6UUxATkNvyv/JHd+g== dependencies: "@types/estree" "*" "@types/json-schema" "*" @@ -6575,15 +6575,15 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4 resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800" integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag== -eslint@^8.49.0: - version "8.49.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.49.0.tgz#09d80a89bdb4edee2efcf6964623af1054bf6d42" - integrity sha512-jw03ENfm6VJI0jA9U+8H5zfl5b+FvuU3YYvZRdZHOlU2ggJkxrlkJH4HcDrZpj6YwD8kuYqvQM8LyesoazrSOQ== +eslint@^8.50.0: + version "8.50.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.50.0.tgz#2ae6015fee0240fcd3f83e1e25df0287f487d6b2" + integrity sha512-FOnOGSuFuFLv/Sa+FDVRZl4GGVAAFFi8LecRsI5a1tMO5HIE8nCm4ivAlzt4dT3ol/PaaGC0rJEEXQmHJBGoOg== dependencies: "@eslint-community/eslint-utils" "^4.2.0" "@eslint-community/regexpp" "^4.6.1" "@eslint/eslintrc" "^2.1.2" - "@eslint/js" "8.49.0" + "@eslint/js" "8.50.0" "@humanwhocodes/config-array" "^0.11.11" "@humanwhocodes/module-importer" "^1.0.1" "@nodelib/fs.walk" "^1.2.8" From 803b14e6908c597f61d3a93618ae5bfa4f94b55f Mon Sep 17 00:00:00 2001 From: GitStart <1501599+gitstart@users.noreply.github.com> Date: Wed, 11 Oct 2023 06:22:24 +0100 Subject: [PATCH 107/262] [DataGrid] Make cursor for selectable cells to be `default` unless editable (#9997) Signed-off-by: Bilal Shafi Co-authored-by: jasmyneokudo <38866525+jasmyneokudo@users.noreply.github.com> Co-authored-by: Azerii <32432927+Azerii@users.noreply.github.com> Co-authored-by: Bilal Shafi --- docs/pages/x/api/data-grid/data-grid-premium.json | 1 + docs/pages/x/api/data-grid/data-grid-pro.json | 1 + docs/pages/x/api/data-grid/data-grid.json | 1 + .../api-docs/data-grid/data-grid-premium.json | 5 +++++ .../api-docs/data-grid/data-grid-pro.json | 5 +++++ .../api-docs/data-grid/data-grid.json | 5 +++++ .../x-data-grid/src/components/cell/GridCell.tsx | 15 +++++++++++++-- .../src/components/containers/GridRootStyles.ts | 3 +++ .../grid/x-data-grid/src/constants/gridClasses.ts | 5 +++++ 9 files changed, 39 insertions(+), 2 deletions(-) diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 6d9bd93e566dd..3c104fbeb9865 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -1082,6 +1082,7 @@ "cell--rangeBottom", "cell--rangeLeft", "cell--rangeRight", + "cell--selectionMode", "cell", "cellContent", "cellCheckbox", 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 e55eabb69eb63..cf6c9e9310c3e 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -1003,6 +1003,7 @@ "cell--rangeBottom", "cell--rangeLeft", "cell--rangeRight", + "cell--selectionMode", "cell", "cellContent", "cellCheckbox", diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 7e71c1389f19e..15d987cefe642 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -852,6 +852,7 @@ "cell--rangeBottom", "cell--rangeLeft", "cell--rangeRight", + "cell--selectionMode", "cell", "cellContent", "cellCheckbox", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json index 38957215db85c..8d5518e89a42e 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -1045,6 +1045,11 @@ "nodeName": "the cell element", "conditions": "it is at the right edge of a cell selection range" }, + "cell--selectionMode": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the cell element", + "conditions": "it is in a cell selection range" + }, "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, "cellContent": { "description": "Styles applied to {{nodeName}}.", diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json index 37e7a9e7bac8e..60a485fb1a00f 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -943,6 +943,11 @@ "nodeName": "the cell element", "conditions": "it is at the right edge of a cell selection range" }, + "cell--selectionMode": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the cell element", + "conditions": "it is in a cell selection range" + }, "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, "cellContent": { "description": "Styles applied to {{nodeName}}.", diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index 545f6d3372678..913a0ee961d1b 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -728,6 +728,11 @@ "nodeName": "the cell element", "conditions": "it is at the right edge of a cell selection range" }, + "cell--selectionMode": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the cell element", + "conditions": "it is in a cell selection range" + }, "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, "cellContent": { "description": "Styles applied to {{nodeName}}.", diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index 08499c8de792f..bc74c127ad518 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -101,11 +101,12 @@ const EMPTY_CELL_PARAMS: CellParamsWithAPI = { type OwnerState = Pick & { isEditable?: boolean; isSelected?: boolean; + isSelectionMode?: boolean; classes?: DataGridProcessedProps['classes']; }; const useUtilityClasses = (ownerState: OwnerState) => { - const { align, showRightBorder, isEditable, isSelected, classes } = ownerState; + const { align, showRightBorder, isEditable, isSelected, isSelectionMode, classes } = ownerState; const slots = { root: [ @@ -114,6 +115,7 @@ const useUtilityClasses = (ownerState: OwnerState) => { isEditable && 'cell--editable', isSelected && 'selected', showRightBorder && 'cell--withRightBorder', + isSelectionMode && !isEditable && 'cell--selectionMode', 'withBorderColor', ], content: ['cellContent'], @@ -610,7 +612,16 @@ const GridCellV7 = React.forwardRef((props, ref const cellRef = React.useRef(null); const handleRef = useForkRef(ref, cellRef); const focusElementRef = React.useRef(null); - const ownerState = { align, showRightBorder, isEditable, classes: rootProps.classes, isSelected }; + // @ts-expect-error To access `unstable_cellSelection` flag as it's a `premium` feature + const isSelectionMode = rootProps.unstable_cellSelection ?? false; + const ownerState = { + align, + showRightBorder, + isEditable, + classes: rootProps.classes, + isSelected, + isSelectionMode, + }; const classes = useUtilityClasses(ownerState); const publishMouseUp = React.useCallback( diff --git a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts index fea22c4a4476a..b395670007e7d 100644 --- a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts +++ b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts @@ -392,6 +392,9 @@ export const GridRootStyles = styled('div', { overflow: 'hidden', textOverflow: 'ellipsis', }, + [`& .${gridClasses.cell}.${gridClasses['cell--selectionMode']}`]: { + cursor: 'default', + }, [`& .${gridClasses.cell}.${gridClasses['cell--editing']}`]: { padding: 1, display: 'flex', diff --git a/packages/grid/x-data-grid/src/constants/gridClasses.ts b/packages/grid/x-data-grid/src/constants/gridClasses.ts index 9f32d535a1daf..e4ec5046e5db4 100644 --- a/packages/grid/x-data-grid/src/constants/gridClasses.ts +++ b/packages/grid/x-data-grid/src/constants/gridClasses.ts @@ -80,6 +80,10 @@ export interface GridClasses { * Styles applied to the cell element if it is at the right edge of a cell selection range. */ 'cell--rangeRight': string; + /** + * Styles applied to the cell element if it is in a cell selection range. + */ + 'cell--selectionMode': string; /** * Styles applied to the cell element. */ @@ -562,6 +566,7 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [ 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', + 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', From 5cd78728893877a73c6d8b1088296ad636431fa8 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Wed, 11 Oct 2023 10:24:07 +0200 Subject: [PATCH 108/262] [charts] Improve the management of the text (#10138) Co-authored-by: Lukas Co-authored-by: Nora <72460825+noraleonte@users.noreply.github.com> --- .../charts/axis/AxisCustomizationNoSnap.js | 2 +- docs/data/charts/axis/AxisWithComposition.js | 4 +- docs/data/charts/axis/AxisWithComposition.tsx | 4 +- docs/data/charts/bars/BarsDataset.js | 2 +- docs/data/charts/bars/BarsDataset.tsx | 2 +- docs/data/charts/bars/StackBars.js | 10 +- docs/data/charts/bars/StackBars.tsx | 10 +- docs/data/charts/bars/StackBars.tsx.preview | 10 +- docs/data/charts/legend/BasicLegend.js | 4 +- docs/data/charts/legend/BasicLegend.tsx | 4 +- .../charts/legend/BasicLegend.tsx.preview | 4 +- docs/data/charts/legend/DimensionsNoSnap.js | 102 ----- .../legend/LegendCustomizationNoSnap.js | 108 ----- .../charts/legend/LegendDimensionNoSnap.js | 94 ++++ .../charts/legend/LegendPositionNoSnap.js | 102 +++++ .../charts/legend/LegendTextStylingNoSnap.js | 84 ++++ docs/data/charts/legend/legend.md | 40 +- docs/data/charts/lines/StackedAreas.js | 3 - docs/data/charts/lines/StackedAreas.tsx | 3 - .../data/charts/pie-demo/OnSeriesItemClick.js | 19 +- .../charts/pie-demo/OnSeriesItemClick.tsx | 19 +- .../pie-demo/PieChartWithPaddingAngle.js | 4 +- .../pie-demo/PieChartWithPaddingAngle.tsx | 4 +- docs/data/charts/pie-demo/TwoLevelPieChart.js | 4 +- .../data/charts/pie-demo/TwoLevelPieChart.tsx | 4 +- .../data/charts/pie-demo/TwoSimplePieChart.js | 4 +- .../charts/pie-demo/TwoSimplePieChart.tsx | 4 +- docs/data/charts/scatter/BasicScatter.js | 4 +- docs/data/charts/scatter/BasicScatter.tsx | 4 +- .../charts/scatter/BasicScatter.tsx.preview | 4 +- docs/data/charts/stacking/BasicStacking.js | 6 +- docs/data/charts/stacking/BasicStacking.tsx | 6 +- docs/data/charts/stacking/StackOrderDemo.js | 1 - docs/data/charts/stacking/StackOrderDemo.tsx | 1 - docs/data/charts/styling/BasicColor.js | 2 +- docs/data/charts/styling/BasicColor.tsx | 2 +- docs/data/charts/styling/ColorTemplate.js | 39 +- docs/data/charts/styling/ColorTemplate.tsx | 39 +- docs/data/charts/styling/MuiColorTemplate.js | 39 +- docs/data/charts/styling/MuiColorTemplate.tsx | 39 +- docs/data/charts/tooltip/BandHighlight.js | 6 +- docs/data/charts/tooltip/BandHighlight.tsx | 6 +- docs/data/charts/tooltip/Formatting.js | 3 - docs/data/charts/tooltip/Formatting.tsx | 4 - docs/data/charts/tooltip/Interaction.js | 11 +- docs/data/charts/tooltip/Interaction.tsx | 11 +- packages/x-charts/src/BarChart/BarChart.tsx | 13 +- .../src/ChartsLegend/ChartsLegend.tsx | 405 ++++++++++++------ packages/x-charts/src/ChartsLegend/utils.ts | 7 +- packages/x-charts/src/ChartsSurface.tsx | 11 - .../x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 71 +-- .../x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 72 ++-- packages/x-charts/src/LineChart/LineChart.tsx | 13 +- packages/x-charts/src/PieChart/PieChart.tsx | 13 +- .../src/ScatterChart/ScatterChart.tsx | 13 +- packages/x-charts/src/constants.ts | 2 +- .../x-charts/src/context/DrawingProvider.tsx | 4 + .../x-charts/src/hooks/useChartDimensions.ts | 2 + .../components/AxisSharedComponents.tsx | 71 +-- .../src/internals/components/ChartsText.tsx | 102 +++++ packages/x-charts/src/internals/domUtils.ts | 154 +++++++ packages/x-charts/src/models/axis.ts | 9 +- packages/x-charts/src/models/layout.ts | 14 +- .../themeAugmentation.spec.ts | 2 +- scripts/x-charts.exports.json | 1 + 65 files changed, 1151 insertions(+), 709 deletions(-) delete mode 100644 docs/data/charts/legend/DimensionsNoSnap.js delete mode 100644 docs/data/charts/legend/LegendCustomizationNoSnap.js create mode 100644 docs/data/charts/legend/LegendDimensionNoSnap.js create mode 100644 docs/data/charts/legend/LegendPositionNoSnap.js create mode 100644 docs/data/charts/legend/LegendTextStylingNoSnap.js create mode 100644 packages/x-charts/src/internals/components/ChartsText.tsx create mode 100644 packages/x-charts/src/internals/domUtils.ts diff --git a/docs/data/charts/axis/AxisCustomizationNoSnap.js b/docs/data/charts/axis/AxisCustomizationNoSnap.js index fda8f64eb8019..e3c0a10209a0f 100644 --- a/docs/data/charts/axis/AxisCustomizationNoSnap.js +++ b/docs/data/charts/axis/AxisCustomizationNoSnap.js @@ -16,7 +16,7 @@ const defaultXAxis = { disableLine: false, disableTicks: false, fontSize: 12, - label: 'my axis', + label: 'My axis', labelFontSize: 14, tickSize: 6, }; diff --git a/docs/data/charts/axis/AxisWithComposition.js b/docs/data/charts/axis/AxisWithComposition.js index d8280e0c0e0c8..76ccbc2a9922a 100644 --- a/docs/data/charts/axis/AxisWithComposition.js +++ b/docs/data/charts/axis/AxisWithComposition.js @@ -46,10 +46,10 @@ export default function AxisWithComposition() { margin={{ left: 70, right: 70 }} sx={{ [`.${axisClasses.left} .${axisClasses.label}`]: { - transform: 'rotate(-90deg) translate(0px, -20px)', + transform: 'translate(-25px, 0)', }, [`.${axisClasses.right} .${axisClasses.label}`]: { - transform: 'rotate(90deg) translate(0px, -25px)', + transform: 'translate(30px, 0)', }, }} > diff --git a/docs/data/charts/axis/AxisWithComposition.tsx b/docs/data/charts/axis/AxisWithComposition.tsx index d8280e0c0e0c8..76ccbc2a9922a 100644 --- a/docs/data/charts/axis/AxisWithComposition.tsx +++ b/docs/data/charts/axis/AxisWithComposition.tsx @@ -46,10 +46,10 @@ export default function AxisWithComposition() { margin={{ left: 70, right: 70 }} sx={{ [`.${axisClasses.left} .${axisClasses.label}`]: { - transform: 'rotate(-90deg) translate(0px, -20px)', + transform: 'translate(-25px, 0)', }, [`.${axisClasses.right} .${axisClasses.label}`]: { - transform: 'rotate(90deg) translate(0px, -25px)', + transform: 'translate(30px, 0)', }, }} > diff --git a/docs/data/charts/bars/BarsDataset.js b/docs/data/charts/bars/BarsDataset.js index 9030ae12be240..619a54cf3d8ec 100644 --- a/docs/data/charts/bars/BarsDataset.js +++ b/docs/data/charts/bars/BarsDataset.js @@ -12,7 +12,7 @@ const chartSetting = { height: 300, sx: { [`.${axisClasses.left} .${axisClasses.label}`]: { - transform: 'rotate(-90deg) translate(0px, -20px)', + transform: 'translate(-20px, 0)', }, }, }; diff --git a/docs/data/charts/bars/BarsDataset.tsx b/docs/data/charts/bars/BarsDataset.tsx index f893035ba52e1..5f4fa4f9f90b2 100644 --- a/docs/data/charts/bars/BarsDataset.tsx +++ b/docs/data/charts/bars/BarsDataset.tsx @@ -12,7 +12,7 @@ const chartSetting = { height: 300, sx: { [`.${axisClasses.left} .${axisClasses.label}`]: { - transform: 'rotate(-90deg) translate(0px, -20px)', + transform: 'translate(-20px, 0)', }, }, }; diff --git a/docs/data/charts/bars/StackBars.js b/docs/data/charts/bars/StackBars.js index 14b530048c5be..8ebf29b218502 100644 --- a/docs/data/charts/bars/StackBars.js +++ b/docs/data/charts/bars/StackBars.js @@ -5,11 +5,11 @@ export default function StackBars() { return ( ({ - x: chance.floating({ min: -20, max: 20 }), - y: chance.floating({ min: -20, max: 20 }), -})).map((d, index) => ({ ...d, id: index })); - -const cssVarToKey = { - '--ChartsLegend-itemWidth': 'item width', - '--ChartsLegend-itemMarkSize': 'item mark size', - '--ChartsLegend-labelSpacing': 'label spacing', - '--ChartsLegend-rootSpacing': 'root spacing', -}; -export default function DimensionsNoSnap() { - return ( - ( - - )} - getCode={({ props }) => { - return [ - `import { ScatterChart } from '@mui/x-charts/ScatterChart';`, - '', - ` typeof props[cssVarToKey[cssVar]] === 'number') - .map((cssVar) => ` '${cssVar}': ${props[cssVarToKey[cssVar]]}px,`), - ' }}', - '/>', - ].join('\n'); - }} - /> - ); -} diff --git a/docs/data/charts/legend/LegendCustomizationNoSnap.js b/docs/data/charts/legend/LegendCustomizationNoSnap.js deleted file mode 100644 index ac46041150c3f..0000000000000 --- a/docs/data/charts/legend/LegendCustomizationNoSnap.js +++ /dev/null @@ -1,108 +0,0 @@ -import * as React from 'react'; -import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { Chance } from 'chance'; - -const chance = new Chance(42); - -const data = Array.from({ length: 50 }, () => ({ - x: chance.floating({ min: -20, max: 20 }), - y: chance.floating({ min: -20, max: 20 }), -})).map((d, index) => ({ ...d, id: index })); - -export default function LegendCustomizationNoSnap() { - return ( - ( - - )} - getCode={({ props }) => { - return [ - `import { ScatterChart } from '@mui/x-charts/ScatterChart';`, - '', - `', - ].join('\n'); - }} - /> - ); -} diff --git a/docs/data/charts/legend/LegendDimensionNoSnap.js b/docs/data/charts/legend/LegendDimensionNoSnap.js new file mode 100644 index 0000000000000..2581092596b58 --- /dev/null +++ b/docs/data/charts/legend/LegendDimensionNoSnap.js @@ -0,0 +1,94 @@ +import * as React from 'react'; +import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo'; +import { PieChart } from '@mui/x-charts/PieChart'; + +const data = [ + { id: 0, value: 10, label: 'Series A' }, + { id: 1, value: 15, label: 'Series B' }, + { id: 2, value: 20, label: 'Series C' }, + { id: 3, value: 10, label: 'Series D' }, + { id: 4, value: 15, label: 'Series E' }, + { id: 5, value: 20, label: 'Series F' }, + { id: 6, value: 10, label: 'Series G' }, + { id: 7, value: 15, label: 'Series H' }, +]; + +const itemsNumber = 15; + +export default function LegendDimensionNoSnap() { + return ( + ( + + )} + getCode={({ props }) => { + return [ + `import { PieChart } from '@mui/x-charts/PieChart';`, + '', + `', + ].join('\n'); + }} + /> + ); +} diff --git a/docs/data/charts/legend/LegendPositionNoSnap.js b/docs/data/charts/legend/LegendPositionNoSnap.js new file mode 100644 index 0000000000000..ac23970b9c43e --- /dev/null +++ b/docs/data/charts/legend/LegendPositionNoSnap.js @@ -0,0 +1,102 @@ +import * as React from 'react'; +import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo'; +import { PieChart } from '@mui/x-charts/PieChart'; + +const data = [ + { id: 0, value: 10, label: 'Series A' }, + { id: 1, value: 15, label: 'Series B' }, + { id: 2, value: 20, label: 'Series C' }, + { id: 3, value: 10, label: 'Series D' }, + { id: 4, value: 15, label: 'Series E' }, + { id: 5, value: 20, label: 'Series F' }, + { id: 6, value: 10, label: 'Series G' }, + { id: 7, value: 15, label: 'Series H' }, + { id: 8, value: 20, label: 'Series I' }, + { id: 9, value: 10, label: 'Series J' }, + { id: 10, value: 15, label: 'Series K' }, + { id: 11, value: 20, label: 'Series L' }, + { id: 12, value: 10, label: 'Series M' }, + { id: 13, value: 15, label: 'Series N' }, + { id: 14, value: 20, label: 'Series O' }, +]; + +export default function LegendPositionNoSnap() { + return ( + ( + + )} + getCode={({ props }) => { + return [ + `import { PieChart } from '@mui/x-charts/PieChart';`, + '', + `', + ].join('\n'); + }} + /> + ); +} diff --git a/docs/data/charts/legend/LegendTextStylingNoSnap.js b/docs/data/charts/legend/LegendTextStylingNoSnap.js new file mode 100644 index 0000000000000..9af402d6c16be --- /dev/null +++ b/docs/data/charts/legend/LegendTextStylingNoSnap.js @@ -0,0 +1,84 @@ +import * as React from 'react'; +import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo'; +import { PieChart } from '@mui/x-charts/PieChart'; + +const data = [ + { id: 0, value: 10, label: 'Series A' }, + { id: 1, value: 15, label: 'Series B' }, + { id: 2, value: 20, label: 'Series C' }, + { id: 3, value: 10, label: 'Series D' }, + { id: 4, value: 15, label: 'Series E' }, + { id: 5, value: 20, label: 'Series F' }, + { id: 6, value: 10, label: 'Series G' }, + { id: 7, value: 15, label: 'Series H' }, +]; + +const itemsNumber = 15; + +export default function LegendTextStylingNoSnap() { + return ( + ( + ({ + ...item, + label: item.label.replace(' ', props.breakLine ? '\n' : ' '), + })), + }, + ]} + slotProps={{ + legend: { + labelStyle: { + fontSize: props.fontSize, + fill: props.fill, + }, + }, + }} + margin={{ + top: 10, + bottom: 10, + left: 10, + right: 200, + }} + width={400} + height={400} + /> + )} + getCode={({ props }) => { + return [ + `import { PieChart } from '@mui/x-charts/PieChart';`, + '', + `', + ].join('\n'); + }} + /> + ); +} diff --git a/docs/data/charts/legend/legend.md b/docs/data/charts/legend/legend.md index 3f686306aa4df..d314dddb3e929 100644 --- a/docs/data/charts/legend/legend.md +++ b/docs/data/charts/legend/legend.md @@ -12,28 +12,42 @@ In chart components, the legend links series with `label` properties and their c {{"demo": "BasicLegend.js"}} -## Placement +## Customization + +### Position The legend can either be displayed in a `'column'` or `'row'` layout controlled with the `direction` property. -It can also be moved by a combination of `position: { vertical, horizontal }` properties and the legend offset values. -The `position` places the legend just next to the drawing area, and offset values move it relative to this base position. +It can also be moved with the `position: { vertical, horizontal }` property which defines how the legend aligns within the SVG. - `vertical` can be `'top'`, `'middle'`, or `'bottom'`. - `horizontal` can be `'left'`, `'middle'`, or `'right'`. -- offsets are set with CSS variables `--ChartsLegend-rootOffsetX` and `--ChartsLegend-rootOffsetY`. -Defaults are such that the legend is placed on top of the charts. +You can add spacing to a given `position` with the `padding` property, which can be either a number or an object `{ top, bottom, left, right }`. +This `padding` will add space between the SVG borders and the legend. + +By default, the legend is placed above the charts. + +{{"demo": "LegendPositionNoSnap.js", "hideToolbar": true, "bg": "inline"}} + +### Dimensions + +Inside the legend, you can customize the pixel value of the width and height of the mark with the `itemMarkWidth` and `itemMarkHeight` props. + +You can also access the `markGap` prop to change the gap between the mark and its label, or the `itemGap` to change the gap between two legend items. +Both props impact the values defined in pixels. -{{"demo": "LegendCustomizationNoSnap.js", "hideToolbar": true, "bg": "inline"}} +{{"demo": "LegendDimensionNoSnap.js", "hideToolbar": true, "bg": "inline"}} -## Dimensions +### Label styling -The dimension of the legend is defined by some CSS variables: +To break lines in legend labels, use the special `\n` character. To customize the label style, you should not use CSS. +Instead, pass a styling object to the `labelStyle` property. -- `--ChartsLegend-itemWidth`: The width of one series (including the mark and the label). -- `--ChartsLegend-itemMarkSize`: The size of the mark square. -- `--ChartsLegend-labelSpacing`: The space between the mark and the label. -- `--ChartsLegend-rootSpacing`: The space between two series. +{{"demo": "LegendTextStylingNoSnap.js", "hideToolbar": true, "bg": "inline"}} -{{"demo": "DimensionsNoSnap.js", "hideToolbar": true, "bg": "inline"}} +:::info +The `labelStyle` property is needed to measure text size, and then place legend items at the correct position. +Style applied by other means will not be taken into account. +Which can lead to label overflow. +::: diff --git a/docs/data/charts/lines/StackedAreas.js b/docs/data/charts/lines/StackedAreas.js index fb68774ba13be..76875e7605f59 100644 --- a/docs/data/charts/lines/StackedAreas.js +++ b/docs/data/charts/lines/StackedAreas.js @@ -91,9 +91,6 @@ export default function StackedAreas() { showMark: false, }, ]} - sx={{ - '--ChartsLegend-itemWidth': '200px', - }} width={600} height={400} margin={{ left: 70 }} diff --git a/docs/data/charts/lines/StackedAreas.tsx b/docs/data/charts/lines/StackedAreas.tsx index fb68774ba13be..76875e7605f59 100644 --- a/docs/data/charts/lines/StackedAreas.tsx +++ b/docs/data/charts/lines/StackedAreas.tsx @@ -91,9 +91,6 @@ export default function StackedAreas() { showMark: false, }, ]} - sx={{ - '--ChartsLegend-itemWidth': '200px', - }} width={600} height={400} margin={{ left: 70 }} diff --git a/docs/data/charts/pie-demo/OnSeriesItemClick.js b/docs/data/charts/pie-demo/OnSeriesItemClick.js index 780577da372f9..9d87000810266 100644 --- a/docs/data/charts/pie-demo/OnSeriesItemClick.js +++ b/docs/data/charts/pie-demo/OnSeriesItemClick.js @@ -4,9 +4,9 @@ import { PieChart } from '@mui/x-charts/PieChart'; import { Typography, Stack } from '@mui/material'; const items = [ - { value: 10, label: 'series A ( no Id )' }, - { id: 'id_B', value: 15, label: 'series B' }, - { id: 'id_C', value: 20, label: 'series C' }, + { value: 10, label: 'Series A ( no Id )' }, + { id: 'id_B', value: 15, label: 'Series B' }, + { id: 'id_C', value: 20, label: 'Series C' }, ]; const formatObject = (obj) => { @@ -30,13 +30,13 @@ export default function OnSeriesItemClick() { return ( {`item id: ${id ?? 'undefined'} @@ -48,17 +48,12 @@ ${formatObject(identifier)}`} series={[ { data: items, - cx: 100, }, ]} - slotProps={{ - legend: { - offset: { x: -50 }, - }, - }} onClick={handleClick} width={400} height={200} + margin={{ right: 200 }} /> ); diff --git a/docs/data/charts/pie-demo/OnSeriesItemClick.tsx b/docs/data/charts/pie-demo/OnSeriesItemClick.tsx index 35c1ee563c766..69a1aa4b7246d 100644 --- a/docs/data/charts/pie-demo/OnSeriesItemClick.tsx +++ b/docs/data/charts/pie-demo/OnSeriesItemClick.tsx @@ -4,9 +4,9 @@ import { PieItemIdentifier, DefaultizedPieValueType } from '@mui/x-charts/models import { Typography, Stack } from '@mui/material'; const items = [ - { value: 10, label: 'series A ( no Id )' }, - { id: 'id_B', value: 15, label: 'series B' }, - { id: 'id_C', value: 20, label: 'series C' }, + { value: 10, label: 'Series A ( no Id )' }, + { id: 'id_B', value: 15, label: 'Series B' }, + { id: 'id_C', value: 20, label: 'Series C' }, ]; const formatObject = (obj: null | PieItemIdentifier) => { @@ -34,13 +34,13 @@ export default function OnSeriesItemClick() { return ( {`item id: ${id ?? 'undefined'} @@ -52,17 +52,12 @@ ${formatObject(identifier)}`} series={[ { data: items, - cx: 100, }, ]} - slotProps={{ - legend: { - offset: { x: -50 }, - }, - }} onClick={handleClick} width={400} height={200} + margin={{ right: 200 }} /> ); diff --git a/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js b/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js index 8b7af53fd2377..f0606ec0e296c 100644 --- a/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js +++ b/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js @@ -40,7 +40,9 @@ export default function PieChartWithPaddingAngle() { margin={{ right: 5 }} width={200} height={200} - legend={{ hidden: true }} + slotProps={{ + legend: { hidden: true }, + }} /> ); diff --git a/docs/data/charts/pie-demo/PieChartWithPaddingAngle.tsx b/docs/data/charts/pie-demo/PieChartWithPaddingAngle.tsx index 8b7af53fd2377..f0606ec0e296c 100644 --- a/docs/data/charts/pie-demo/PieChartWithPaddingAngle.tsx +++ b/docs/data/charts/pie-demo/PieChartWithPaddingAngle.tsx @@ -40,7 +40,9 @@ export default function PieChartWithPaddingAngle() { margin={{ right: 5 }} width={200} height={200} - legend={{ hidden: true }} + slotProps={{ + legend: { hidden: true }, + }} /> ); diff --git a/docs/data/charts/pie-demo/TwoLevelPieChart.js b/docs/data/charts/pie-demo/TwoLevelPieChart.js index a62c14bc9f839..7a409b13b88a3 100644 --- a/docs/data/charts/pie-demo/TwoLevelPieChart.js +++ b/docs/data/charts/pie-demo/TwoLevelPieChart.js @@ -39,7 +39,9 @@ export default function TwoLevelPieChart() { ]} width={400} height={300} - legend={{ hidden: true }} + slotProps={{ + legend: { hidden: true }, + }} /> ); } diff --git a/docs/data/charts/pie-demo/TwoLevelPieChart.tsx b/docs/data/charts/pie-demo/TwoLevelPieChart.tsx index 54475f4f2cb45..2a8db580d08b3 100644 --- a/docs/data/charts/pie-demo/TwoLevelPieChart.tsx +++ b/docs/data/charts/pie-demo/TwoLevelPieChart.tsx @@ -38,7 +38,9 @@ export default function TwoLevelPieChart() { ]} width={400} height={300} - legend={{ hidden: true }} + slotProps={{ + legend: { hidden: true }, + }} /> ); } diff --git a/docs/data/charts/pie-demo/TwoSimplePieChart.js b/docs/data/charts/pie-demo/TwoSimplePieChart.js index 40b156bd19ad6..7cbc1c6f3e928 100644 --- a/docs/data/charts/pie-demo/TwoSimplePieChart.js +++ b/docs/data/charts/pie-demo/TwoSimplePieChart.js @@ -36,7 +36,9 @@ export default function TwoSimplePieChart() { }, ]} height={300} - legend={{ hidden: true }} + slotProps={{ + legend: { hidden: true }, + }} /> ); } diff --git a/docs/data/charts/pie-demo/TwoSimplePieChart.tsx b/docs/data/charts/pie-demo/TwoSimplePieChart.tsx index bd2b7e2a30b04..bb88d77dfd8b4 100644 --- a/docs/data/charts/pie-demo/TwoSimplePieChart.tsx +++ b/docs/data/charts/pie-demo/TwoSimplePieChart.tsx @@ -37,7 +37,9 @@ export default function TwoSimplePieChart() { }, ]} height={300} - legend={{ hidden: true }} + slotProps={{ + legend: { hidden: true }, + }} /> ); } diff --git a/docs/data/charts/scatter/BasicScatter.js b/docs/data/charts/scatter/BasicScatter.js index 773b9d9e7022b..07ddcab5eb8b9 100644 --- a/docs/data/charts/scatter/BasicScatter.js +++ b/docs/data/charts/scatter/BasicScatter.js @@ -172,11 +172,11 @@ export default function BasicScatter() { height={300} series={[ { - label: 'series A', + label: 'Series A', data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })), }, { - label: 'series B', + label: 'Series B', data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), }, ]} diff --git a/docs/data/charts/scatter/BasicScatter.tsx b/docs/data/charts/scatter/BasicScatter.tsx index 773b9d9e7022b..07ddcab5eb8b9 100644 --- a/docs/data/charts/scatter/BasicScatter.tsx +++ b/docs/data/charts/scatter/BasicScatter.tsx @@ -172,11 +172,11 @@ export default function BasicScatter() { height={300} series={[ { - label: 'series A', + label: 'Series A', data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })), }, { - label: 'series B', + label: 'Series B', data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), }, ]} diff --git a/docs/data/charts/scatter/BasicScatter.tsx.preview b/docs/data/charts/scatter/BasicScatter.tsx.preview index 8834fd9f4aad6..36dff4f51a156 100644 --- a/docs/data/charts/scatter/BasicScatter.tsx.preview +++ b/docs/data/charts/scatter/BasicScatter.tsx.preview @@ -3,11 +3,11 @@ height={300} series={[ { - label: 'series A', + label: 'Series A', data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })), }, { - label: 'series B', + label: 'Series B', data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), }, ]} diff --git a/docs/data/charts/stacking/BasicStacking.js b/docs/data/charts/stacking/BasicStacking.js index eb9fdd1313691..e7173a92ecfdc 100644 --- a/docs/data/charts/stacking/BasicStacking.js +++ b/docs/data/charts/stacking/BasicStacking.js @@ -3,15 +3,15 @@ import { BarChart } from '@mui/x-charts/BarChart'; const seriesA = { data: [2, 3, 1, 4, 5], - label: 'series A', + label: 'Series A', }; const seriesB = { data: [3, 1, 4, 2, 1], - label: 'series B', + label: 'Series B', }; const seriesC = { data: [3, 2, 4, 5, 1], - label: 'series C', + label: 'Series C', }; export default function BasicStacking() { return ( diff --git a/docs/data/charts/stacking/BasicStacking.tsx b/docs/data/charts/stacking/BasicStacking.tsx index eb9fdd1313691..e7173a92ecfdc 100644 --- a/docs/data/charts/stacking/BasicStacking.tsx +++ b/docs/data/charts/stacking/BasicStacking.tsx @@ -3,15 +3,15 @@ import { BarChart } from '@mui/x-charts/BarChart'; const seriesA = { data: [2, 3, 1, 4, 5], - label: 'series A', + label: 'Series A', }; const seriesB = { data: [3, 1, 4, 2, 1], - label: 'series B', + label: 'Series B', }; const seriesC = { data: [3, 2, 4, 5, 1], - label: 'series C', + label: 'Series C', }; export default function BasicStacking() { return ( diff --git a/docs/data/charts/stacking/StackOrderDemo.js b/docs/data/charts/stacking/StackOrderDemo.js index 55f6c37ace0da..2a838831f4768 100644 --- a/docs/data/charts/stacking/StackOrderDemo.js +++ b/docs/data/charts/stacking/StackOrderDemo.js @@ -125,7 +125,6 @@ export default function StackOrderDemo() { transform: 'translateY(15px)', }, }, - '--ChartsLegend-itemWidth': '110px', }} /> diff --git a/docs/data/charts/stacking/StackOrderDemo.tsx b/docs/data/charts/stacking/StackOrderDemo.tsx index 61cf990d81d31..abcbbb16aa825 100644 --- a/docs/data/charts/stacking/StackOrderDemo.tsx +++ b/docs/data/charts/stacking/StackOrderDemo.tsx @@ -120,7 +120,6 @@ export default function StackOrderDemo() { transform: 'translateY(15px)', }, }, - '--ChartsLegend-itemWidth': '110px', }} /> diff --git a/docs/data/charts/styling/BasicColor.js b/docs/data/charts/styling/BasicColor.js index ab1e89b0dbc6d..49bb1619c9a45 100644 --- a/docs/data/charts/styling/BasicColor.js +++ b/docs/data/charts/styling/BasicColor.js @@ -35,7 +35,7 @@ export default function BasicColor() { series={[ { data: [15, 23, 18, 19, 13], - label: 'example', + label: 'Example', color, }, ]} diff --git a/docs/data/charts/styling/BasicColor.tsx b/docs/data/charts/styling/BasicColor.tsx index 2f47d169c6e65..2edbb887288f3 100644 --- a/docs/data/charts/styling/BasicColor.tsx +++ b/docs/data/charts/styling/BasicColor.tsx @@ -35,7 +35,7 @@ export default function BasicColor() { series={[ { data: [15, 23, 18, 19, 13], - label: 'example', + label: 'Example', color, }, ]} diff --git a/docs/data/charts/styling/ColorTemplate.js b/docs/data/charts/styling/ColorTemplate.js index 707a718a85d2b..44ca949fde962 100644 --- a/docs/data/charts/styling/ColorTemplate.js +++ b/docs/data/charts/styling/ColorTemplate.js @@ -26,12 +26,15 @@ function getGaussianSeriesData(mean, stdev = [0.3, 0.4], N = 50) { } const legendPlacement = { - legend: { - position: { - vertical: 'middle', - horizontal: 'right', + slotProps: { + legend: { + position: { + vertical: 'middle', + horizontal: 'right', + }, + direction: 'column', + itemGap: 2, }, - direction: 'column', }, margin: { top: 20, @@ -40,19 +43,19 @@ const legendPlacement = { }, }; const series = [ - { label: 'series 1', data: getGaussianSeriesData([-5, 0]) }, - { label: 'series 2', data: getGaussianSeriesData([-4, 0]) }, - { label: 'series 3', data: getGaussianSeriesData([-3, 0]) }, - { label: 'series 4', data: getGaussianSeriesData([-2, 0]) }, - { label: 'series 5', data: getGaussianSeriesData([-1, 0]) }, - { label: 'series 6', data: getGaussianSeriesData([0, 0]) }, - { label: 'series 7', data: getGaussianSeriesData([1, 0]) }, - { label: 'series 8', data: getGaussianSeriesData([2, 0]) }, - { label: 'series 9', data: getGaussianSeriesData([3, 0]) }, - { label: 'series 10', data: getGaussianSeriesData([4, 0]) }, - { label: 'series 11', data: getGaussianSeriesData([5, 0]) }, - { label: 'series 12', data: getGaussianSeriesData([6, 0]) }, - { label: 'series 13', data: getGaussianSeriesData([7, 0]) }, + { label: 'Series 1', data: getGaussianSeriesData([-5, 0]) }, + { label: 'Series 2', data: getGaussianSeriesData([-4, 0]) }, + { label: 'Series 3', data: getGaussianSeriesData([-3, 0]) }, + { label: 'Series 4', data: getGaussianSeriesData([-2, 0]) }, + { label: 'Series 5', data: getGaussianSeriesData([-1, 0]) }, + { label: 'Series 6', data: getGaussianSeriesData([0, 0]) }, + { label: 'Series 7', data: getGaussianSeriesData([1, 0]) }, + { label: 'Series 8', data: getGaussianSeriesData([2, 0]) }, + { label: 'Series 9', data: getGaussianSeriesData([3, 0]) }, + { label: 'Series 10', data: getGaussianSeriesData([4, 0]) }, + { label: 'Series 11', data: getGaussianSeriesData([5, 0]) }, + { label: 'Series 12', data: getGaussianSeriesData([6, 0]) }, + { label: 'Series 13', data: getGaussianSeriesData([7, 0]) }, ].map((s) => ({ ...s, valueFormatter: (v) => `(${v.x.toFixed(1)}, ${v.y.toFixed(1)})`, diff --git a/docs/data/charts/styling/ColorTemplate.tsx b/docs/data/charts/styling/ColorTemplate.tsx index b28898d303d6b..28a7404dcfec5 100644 --- a/docs/data/charts/styling/ColorTemplate.tsx +++ b/docs/data/charts/styling/ColorTemplate.tsx @@ -30,12 +30,15 @@ function getGaussianSeriesData( } const legendPlacement = { - legend: { - position: { - vertical: 'middle', - horizontal: 'right', + slotProps: { + legend: { + position: { + vertical: 'middle', + horizontal: 'right', + }, + direction: 'column', + itemGap: 2, }, - direction: 'column', }, margin: { top: 20, @@ -44,19 +47,19 @@ const legendPlacement = { }, } as const; const series = [ - { label: 'series 1', data: getGaussianSeriesData([-5, 0]) }, - { label: 'series 2', data: getGaussianSeriesData([-4, 0]) }, - { label: 'series 3', data: getGaussianSeriesData([-3, 0]) }, - { label: 'series 4', data: getGaussianSeriesData([-2, 0]) }, - { label: 'series 5', data: getGaussianSeriesData([-1, 0]) }, - { label: 'series 6', data: getGaussianSeriesData([0, 0]) }, - { label: 'series 7', data: getGaussianSeriesData([1, 0]) }, - { label: 'series 8', data: getGaussianSeriesData([2, 0]) }, - { label: 'series 9', data: getGaussianSeriesData([3, 0]) }, - { label: 'series 10', data: getGaussianSeriesData([4, 0]) }, - { label: 'series 11', data: getGaussianSeriesData([5, 0]) }, - { label: 'series 12', data: getGaussianSeriesData([6, 0]) }, - { label: 'series 13', data: getGaussianSeriesData([7, 0]) }, + { label: 'Series 1', data: getGaussianSeriesData([-5, 0]) }, + { label: 'Series 2', data: getGaussianSeriesData([-4, 0]) }, + { label: 'Series 3', data: getGaussianSeriesData([-3, 0]) }, + { label: 'Series 4', data: getGaussianSeriesData([-2, 0]) }, + { label: 'Series 5', data: getGaussianSeriesData([-1, 0]) }, + { label: 'Series 6', data: getGaussianSeriesData([0, 0]) }, + { label: 'Series 7', data: getGaussianSeriesData([1, 0]) }, + { label: 'Series 8', data: getGaussianSeriesData([2, 0]) }, + { label: 'Series 9', data: getGaussianSeriesData([3, 0]) }, + { label: 'Series 10', data: getGaussianSeriesData([4, 0]) }, + { label: 'Series 11', data: getGaussianSeriesData([5, 0]) }, + { label: 'Series 12', data: getGaussianSeriesData([6, 0]) }, + { label: 'Series 13', data: getGaussianSeriesData([7, 0]) }, ].map((s) => ({ ...s, valueFormatter: (v: ScatterValueType) => `(${v.x.toFixed(1)}, ${v.y.toFixed(1)})`, diff --git a/docs/data/charts/styling/MuiColorTemplate.js b/docs/data/charts/styling/MuiColorTemplate.js index c24c727549a55..cc0c5455fe33e 100644 --- a/docs/data/charts/styling/MuiColorTemplate.js +++ b/docs/data/charts/styling/MuiColorTemplate.js @@ -36,12 +36,15 @@ function getGaussianSeriesData(mean, stdev = [0.3, 0.4], N = 50) { } const legendPlacement = { - legend: { - position: { - vertical: 'middle', - horizontal: 'right', + slotProps: { + legend: { + position: { + vertical: 'middle', + horizontal: 'right', + }, + direction: 'column', + itemGap: 2, }, - direction: 'column', }, margin: { top: 20, @@ -50,19 +53,19 @@ const legendPlacement = { }; const series = [ - { label: 'series 1', data: getGaussianSeriesData([-5, 0]) }, - { label: 'series 2', data: getGaussianSeriesData([-4, 0]) }, - { label: 'series 3', data: getGaussianSeriesData([-3, 0]) }, - { label: 'series 4', data: getGaussianSeriesData([-2, 0]) }, - { label: 'series 5', data: getGaussianSeriesData([-1, 0]) }, - { label: 'series 6', data: getGaussianSeriesData([0, 0]) }, - { label: 'series 7', data: getGaussianSeriesData([1, 0]) }, - { label: 'series 8', data: getGaussianSeriesData([2, 0]) }, - { label: 'series 9', data: getGaussianSeriesData([3, 0]) }, - { label: 'series 10', data: getGaussianSeriesData([4, 0]) }, - { label: 'series 11', data: getGaussianSeriesData([5, 0]) }, - { label: 'series 12', data: getGaussianSeriesData([6, 0]) }, - { label: 'series 13', data: getGaussianSeriesData([7, 0]) }, + { label: 'Series 1', data: getGaussianSeriesData([-5, 0]) }, + { label: 'Series 2', data: getGaussianSeriesData([-4, 0]) }, + { label: 'Series 3', data: getGaussianSeriesData([-3, 0]) }, + { label: 'Series 4', data: getGaussianSeriesData([-2, 0]) }, + { label: 'Series 5', data: getGaussianSeriesData([-1, 0]) }, + { label: 'Series 6', data: getGaussianSeriesData([0, 0]) }, + { label: 'Series 7', data: getGaussianSeriesData([1, 0]) }, + { label: 'Series 8', data: getGaussianSeriesData([2, 0]) }, + { label: 'Series 9', data: getGaussianSeriesData([3, 0]) }, + { label: 'Series 10', data: getGaussianSeriesData([4, 0]) }, + { label: 'Series 11', data: getGaussianSeriesData([5, 0]) }, + { label: 'Series 12', data: getGaussianSeriesData([6, 0]) }, + { label: 'Series 13', data: getGaussianSeriesData([7, 0]) }, ].map((s) => ({ ...s, valueFormatter: (v) => `(${v.x.toFixed(1)}, ${v.y.toFixed(1)})`, diff --git a/docs/data/charts/styling/MuiColorTemplate.tsx b/docs/data/charts/styling/MuiColorTemplate.tsx index c18eff6cf07a8..78d2415ffdcf2 100644 --- a/docs/data/charts/styling/MuiColorTemplate.tsx +++ b/docs/data/charts/styling/MuiColorTemplate.tsx @@ -40,12 +40,15 @@ function getGaussianSeriesData( } const legendPlacement = { - legend: { - position: { - vertical: 'middle', - horizontal: 'right', + slotProps: { + legend: { + position: { + vertical: 'middle', + horizontal: 'right', + }, + direction: 'column', + itemGap: 2, }, - direction: 'column', }, margin: { top: 20, @@ -54,19 +57,19 @@ const legendPlacement = { } as const; const series = [ - { label: 'series 1', data: getGaussianSeriesData([-5, 0]) }, - { label: 'series 2', data: getGaussianSeriesData([-4, 0]) }, - { label: 'series 3', data: getGaussianSeriesData([-3, 0]) }, - { label: 'series 4', data: getGaussianSeriesData([-2, 0]) }, - { label: 'series 5', data: getGaussianSeriesData([-1, 0]) }, - { label: 'series 6', data: getGaussianSeriesData([0, 0]) }, - { label: 'series 7', data: getGaussianSeriesData([1, 0]) }, - { label: 'series 8', data: getGaussianSeriesData([2, 0]) }, - { label: 'series 9', data: getGaussianSeriesData([3, 0]) }, - { label: 'series 10', data: getGaussianSeriesData([4, 0]) }, - { label: 'series 11', data: getGaussianSeriesData([5, 0]) }, - { label: 'series 12', data: getGaussianSeriesData([6, 0]) }, - { label: 'series 13', data: getGaussianSeriesData([7, 0]) }, + { label: 'Series 1', data: getGaussianSeriesData([-5, 0]) }, + { label: 'Series 2', data: getGaussianSeriesData([-4, 0]) }, + { label: 'Series 3', data: getGaussianSeriesData([-3, 0]) }, + { label: 'Series 4', data: getGaussianSeriesData([-2, 0]) }, + { label: 'Series 5', data: getGaussianSeriesData([-1, 0]) }, + { label: 'Series 6', data: getGaussianSeriesData([0, 0]) }, + { label: 'Series 7', data: getGaussianSeriesData([1, 0]) }, + { label: 'Series 8', data: getGaussianSeriesData([2, 0]) }, + { label: 'Series 9', data: getGaussianSeriesData([3, 0]) }, + { label: 'Series 10', data: getGaussianSeriesData([4, 0]) }, + { label: 'Series 11', data: getGaussianSeriesData([5, 0]) }, + { label: 'Series 12', data: getGaussianSeriesData([6, 0]) }, + { label: 'Series 13', data: getGaussianSeriesData([7, 0]) }, ].map((s) => ({ ...s, valueFormatter: (v: ScatterValueType) => `(${v.x.toFixed(1)}, ${v.y.toFixed(1)})`, diff --git a/docs/data/charts/tooltip/BandHighlight.js b/docs/data/charts/tooltip/BandHighlight.js index fbbfd6b04caca..e7f08e2c2d5ab 100644 --- a/docs/data/charts/tooltip/BandHighlight.js +++ b/docs/data/charts/tooltip/BandHighlight.js @@ -16,9 +16,9 @@ const barChartsParams = { }, ], series: [ - { data: [2, 5, 3, 4, 1], stack: '1', label: 'series x' }, - { data: [10, 3, 1, 2, 10], stack: '1', label: 'series y' }, - { data: [10, 3, 1, 2, 10], stack: '1', label: 'series z' }, + { data: [2, 5, 3, 4, 1], stack: '1', label: 'Series x' }, + { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series y' }, + { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series z' }, ], margin: { top: 10, right: 10 }, sx: { diff --git a/docs/data/charts/tooltip/BandHighlight.tsx b/docs/data/charts/tooltip/BandHighlight.tsx index a74e0bf1e326b..e080a99ba9946 100644 --- a/docs/data/charts/tooltip/BandHighlight.tsx +++ b/docs/data/charts/tooltip/BandHighlight.tsx @@ -16,9 +16,9 @@ const barChartsParams = { }, ], series: [ - { data: [2, 5, 3, 4, 1], stack: '1', label: 'series x' }, - { data: [10, 3, 1, 2, 10], stack: '1', label: 'series y' }, - { data: [10, 3, 1, 2, 10], stack: '1', label: 'series z' }, + { data: [2, 5, 3, 4, 1], stack: '1', label: 'Series x' }, + { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series y' }, + { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series z' }, ], margin: { top: 10, right: 10 }, sx: { diff --git a/docs/data/charts/tooltip/Formatting.js b/docs/data/charts/tooltip/Formatting.js index 089275bdd6eb8..759307e1c79fb 100644 --- a/docs/data/charts/tooltip/Formatting.js +++ b/docs/data/charts/tooltip/Formatting.js @@ -72,9 +72,6 @@ const lineChartsParams = { showMark: false, }, ], - sx: { - '--ChartsLegend-itemWidth': '200px', - }, width: 600, height: 400, }; diff --git a/docs/data/charts/tooltip/Formatting.tsx b/docs/data/charts/tooltip/Formatting.tsx index d990c0714e921..ab975cdd909fb 100644 --- a/docs/data/charts/tooltip/Formatting.tsx +++ b/docs/data/charts/tooltip/Formatting.tsx @@ -72,10 +72,6 @@ const lineChartsParams = { showMark: false, }, ], - - sx: { - '--ChartsLegend-itemWidth': '200px', - }, width: 600, height: 400, }; diff --git a/docs/data/charts/tooltip/Interaction.js b/docs/data/charts/tooltip/Interaction.js index 8f8fbf2e56d22..a7e6142713d69 100644 --- a/docs/data/charts/tooltip/Interaction.js +++ b/docs/data/charts/tooltip/Interaction.js @@ -10,12 +10,17 @@ const barChartsParams = { }, ], series: [ - { data: [2, 5, 3, 4, 1], stack: '1', label: 'series x' }, - { data: [10, 3, 1, 2, 10], stack: '1', label: 'series y' }, - { data: [10, 3, 1, 2, 10], stack: '1', label: 'series z' }, + { data: [2, 5, 3, 4, 1], stack: '1', label: 'Series x' }, + { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series y' }, + { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series z' }, ], margin: { top: 10, right: 10 }, height: 200, + slotProps: { + legend: { + hidden: true, + }, + }, }; export default function Interaction() { return ( diff --git a/docs/data/charts/tooltip/Interaction.tsx b/docs/data/charts/tooltip/Interaction.tsx index 69ffd37b6f169..2920b6d6b2e24 100644 --- a/docs/data/charts/tooltip/Interaction.tsx +++ b/docs/data/charts/tooltip/Interaction.tsx @@ -10,12 +10,17 @@ const barChartsParams = { }, ], series: [ - { data: [2, 5, 3, 4, 1], stack: '1', label: 'series x' }, - { data: [10, 3, 1, 2, 10], stack: '1', label: 'series y' }, - { data: [10, 3, 1, 2, 10], stack: '1', label: 'series z' }, + { data: [2, 5, 3, 4, 1], stack: '1', label: 'Series x' }, + { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series y' }, + { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series z' }, ], margin: { top: 10, right: 10 }, height: 200, + slotProps: { + legend: { + hidden: true, + }, + }, }; export default function Interaction() { return ( diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index 50f74b79723a7..941f724b03039 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -43,6 +43,9 @@ export interface BarChartProps series: MakeOptional[]; tooltip?: ChartsTooltipProps; axisHighlight?: ChartsAxisHighlightProps; + /** + * @deprecated Consider using `slotProps.legend` instead. + */ legend?: ChartsLegendProps; /** * Overridable component slots. @@ -218,23 +221,19 @@ BarChart.propTypes = { }), PropTypes.string, ]), + /** + * @deprecated Consider using `slotProps.legend` instead. + */ legend: PropTypes.shape({ classes: PropTypes.object, direction: PropTypes.oneOf(['column', 'row']), hidden: PropTypes.bool, - itemWidth: PropTypes.number, - markSize: PropTypes.number, - offset: PropTypes.shape({ - x: PropTypes.number, - y: PropTypes.number, - }), position: PropTypes.shape({ horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired, }), slotProps: PropTypes.object, slots: PropTypes.object, - spacing: PropTypes.number, }), margin: PropTypes.shape({ bottom: PropTypes.number, diff --git a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx index 695c7235f7472..3a36e0288efa9 100644 --- a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx +++ b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx @@ -1,13 +1,16 @@ import * as React from 'react'; import { useSlotProps } from '@mui/base/utils'; +import { NoSsr } from '@mui/base/NoSsr'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { useThemeProps, useTheme, Theme, styled } from '@mui/material/styles'; import { DrawingArea, DrawingContext } from '../context/DrawingProvider'; -import { AnchorPosition, SizingParams, getSeriesToDisplay } from './utils'; +import { AnchorPosition, Direction, getSeriesToDisplay } from './utils'; import { FormattedSeries, SeriesContext } from '../context/SeriesContextProvider'; import { ChartsLegendClasses, getChartsLegendUtilityClass } from './chartsLegendClasses'; import { DefaultizedProps } from '../models/helpers'; -import { ChartSeriesDefaultized, LegendParams } from '../models/seriesType/config'; +import { LegendParams } from '../models/seriesType/config'; +import { ChartsText, getWordsByLines } from '../internals/components/ChartsText'; +import { CardinalDirections } from '../models/layout'; export interface ChartsLegendSlotsComponent { legend?: React.JSXElementConstructor; @@ -19,7 +22,6 @@ export interface ChartsLegendSlotComponentProps { export type ChartsLegendProps = { position?: AnchorPosition; - offset?: Partial<{ x: number; y: number }>; /** * Override or extend the styles applied to the component. */ @@ -28,6 +30,11 @@ export type ChartsLegendProps = { * Set to true to hide the legend. */ hidden?: boolean; + /** + * The direction of the legend layout. + * The default depends on the chart. + */ + direction?: Direction; /** * Overridable component slots. * @default {} @@ -38,13 +45,10 @@ export type ChartsLegendProps = { * @default {} */ slotProps?: ChartsLegendSlotComponentProps; -} & SizingParams; +}; type DefaultizedChartsLegendProps = DefaultizedProps; -type SeriesLegendOwnerState = ChartSeriesDefaultized & - Pick & { seriesIndex: number }; - const useUtilityClasses = (ownerState: DefaultizedChartsLegendProps & { theme: Theme }) => { const { classes, direction } = ownerState; const slots = { @@ -59,127 +63,22 @@ const useUtilityClasses = (ownerState: DefaultizedChartsLegendProps & { theme: T export type ChartsLegendRootOwnerState = { position: AnchorPosition; - direction: 'row' | 'column'; + direction: Direction; drawingArea: DrawingArea; offsetX?: number; offsetY?: number; seriesNumber: number; }; -function getTranslePosition({ - position, - drawingArea, -}: Omit) { - let xValue: string; - switch (position.horizontal) { - case 'left': - xValue = `calc(var(--ChartsLegend-rootOffsetX, 0px) + ${drawingArea.left}px - var(--ChartsLegend-rootWidth))`; - break; - case 'middle': - xValue = `calc(var(--ChartsLegend-rootOffsetX, 0px) + ${ - drawingArea.left + drawingArea.width / 2 - }px - 0.5 * var(--ChartsLegend-rootWidth))`; - break; - default: - xValue = `calc(var(--ChartsLegend-rootOffsetX, 0px) + ${ - drawingArea.left + drawingArea.width - }px)`; - break; - } - let yValue: string; - switch (position.vertical) { - case 'top': - yValue = `calc(var(--ChartsLegend-rootOffsetY, 0px) + ${drawingArea.top}px - var(--ChartsLegend-rootHeight))`; - break; - case 'middle': - yValue = `calc(var(--ChartsLegend-rootOffsetY, 0px) + ${ - drawingArea.top + drawingArea.height / 2 - }px - 0.5 * var(--ChartsLegend-rootHeight))`; - break; - default: - yValue = `calc(var(--ChartsLegend-rootOffsetY, 0px) + ${ - drawingArea.top + drawingArea.height - }px)`; - break; - } - return { transform: `translate(${xValue}, ${yValue})` }; -} - export const ChartsLegendRoot = styled('g', { name: 'MuiChartsLegend', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})<{ ownerState: ChartsLegendRootOwnerState }>(({ ownerState }) => { - const { direction, drawingArea, offsetX, offsetY, seriesNumber, position } = ownerState; - - return { - '--ChartsLegend-rootOffsetX': typeof offsetX === 'number' ? `${offsetX}px` : undefined, - '--ChartsLegend-rootOffsetY': typeof offsetY === 'number' ? `${offsetY}px` : undefined, - '--ChartsLegend-rootWidth': - direction === 'row' - ? `calc(var(--ChartsLegend-itemWidth) * ${seriesNumber} + var(--ChartsLegend-rootSpacing) * ${ - seriesNumber - 1 - } )` - : 'var(--ChartsLegend-itemWidth)', - '--ChartsLegend-rootHeight': - direction === 'row' - ? 'var(--ChartsLegend-itemMarkSize)' - : `calc(var(--ChartsLegend-itemMarkSize) * ${seriesNumber} + var(--ChartsLegend-rootSpacing) * ${ - seriesNumber - 1 - } )`, - ...getTranslePosition({ position, drawingArea, offsetX, offsetY }), - }; -}); - -export const ChartsSeriesLegendGroup = styled('g', { - name: 'MuiChartsLegend', - slot: 'ChartsSeriesLegendGroup', - overridesResolver: (props, styles) => styles.series, -})<{ ownerState: SeriesLegendOwnerState }>(({ ownerState }) => { - const { direction, seriesIndex } = ownerState; - - if (direction === 'row') { - return { - transform: `translate(calc(${seriesIndex} * (var(--ChartsLegend-itemWidth) + var(--ChartsLegend-rootSpacing))), 0)`, - }; - } - return { - transform: `translate(0, calc(${seriesIndex} * (var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-rootSpacing))))`, - }; -}); - -export const ChartsLegendMark = styled('rect', { - name: 'MuiChartsLegend', - slot: 'Mark', - overridesResolver: (props, styles) => styles.mark, -})<{ ownerState: { color: string } }>(({ ownerState }) => ({ - x: 0, - y: 0, - width: 'var(--ChartsLegend-itemMarkSize)', - height: 'var(--ChartsLegend-itemMarkSize)', - fill: ownerState.color, -})); -export const ChartsLegendLabel = styled('text', { - name: 'MuiChartsLegend', - slot: 'Label', - overridesResolver: (props, styles) => styles.label, -})(({ theme }) => ({ - ...theme.typography.body1, - color: 'inherit', - transform: `translate( - calc(var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-labelSpacing)), - calc(0.5 * var(--ChartsLegend-itemMarkSize)) - )`, - fill: (theme.vars || theme).palette.text.primary, - dominantBaseline: 'central', -})); +})({}); const defaultProps = { position: { horizontal: 'middle', vertical: 'top' }, direction: 'row', - markSize: 20, - itemWidth: 100, - spacing: 2, } as const; export interface LegendRendererProps @@ -187,39 +86,264 @@ export interface LegendRendererProps series: FormattedSeries; seriesToDisplay: LegendParams[]; drawingArea: DrawingArea; - classes: Record<'label' | 'mark' | 'series' | 'root', string>; + classes: Record<'mark' | 'series' | 'root', string>; + /** + * Style applied to legend labels. + * @default theme.typography.subtitle1 + */ + labelStyle?: React.CSSProperties; + /** + * Width of the item mark (in px). + * @default 20 + */ + itemMarkWidth?: number; + /** + * Height of the item mark (in px). + * @default 20 + */ + itemMarkHeight?: number; + /** + * Space between the mark and the label (in px). + * @default 5 + */ + markGap?: number; + /** + * Space between two legend items (in px). + * @default 10 + */ + itemGap?: number; + /** + * Legend padding (in px). + * Can either be a single number, or an object with top, left, bottom, right properties. + * @default 0 + */ + padding?: number | Partial>; } +/** + * Transforms number or partial padding object to a defaultized padding object. + */ +const getStandardizedPadding = (padding: LegendRendererProps['padding']) => { + if (typeof padding === 'number') { + return { + left: padding, + right: padding, + top: padding, + bottom: padding, + }; + } + return { + left: 0, + right: 0, + top: 0, + bottom: 0, + ...padding, + }; +}; + function DefaultChartsLegend(props: LegendRendererProps) { - const { hidden, position, direction, offset, series, seriesToDisplay, drawingArea, classes } = - props; + const { + hidden, + position, + direction, + seriesToDisplay, + drawingArea, + classes, + itemMarkWidth = 20, + itemMarkHeight = 20, + markGap = 5, + itemGap = 10, + padding: paddingProps = 10, + labelStyle: inLabelStyle, + } = props; + const theme = useTheme(); + + const labelStyle = React.useMemo( + () => ({ + ...theme.typography.subtitle1, + color: 'inherit', + fill: (theme.vars || theme).palette.text.primary, + lineHeight: 1, + ...inLabelStyle, + }), + [inLabelStyle, theme], + ); + + const padding = React.useMemo(() => getStandardizedPadding(paddingProps), [paddingProps]); + + const getItemSpace = React.useCallback( + (label: string, style?: React.CSSProperties) => { + const linesSize = getWordsByLines({ style, needsComputation: true, text: label }); + const innerSize = { + innerWidth: itemMarkWidth + markGap + Math.max(...linesSize.map((size) => size.width)), + innerHeight: Math.max(itemMarkHeight, linesSize.length * linesSize[0].height), + }; + + return { + ...innerSize, + outerWidth: innerSize.innerWidth + itemGap, + outerHeight: innerSize.innerHeight + itemGap, + }; + }, + [itemGap, itemMarkHeight, itemMarkWidth, markGap], + ); + + const totalWidth = drawingArea.left + drawingArea.width + drawingArea.right; + const totalHeight = drawingArea.top + drawingArea.height + drawingArea.bottom; + const availableWidth = totalWidth - padding.left - padding.right; + const availableHeight = totalHeight - padding.top - padding.bottom; + + const seriesWithPosition = React.useMemo(() => { + // Start at 0, 0. Will be modified later by padding and position. + let x = 0; + let y = 0; + + // total values used to align legend later. + let totalWidthUsed = 0; + let totalHeightUsed = 0; + let rowIndex = 0; + const rowMaxHeight = [0]; + + const seriesWithRawPosition = seriesToDisplay.map(({ label, ...other }) => { + const itemSpace = getItemSpace(label, labelStyle); + const rep = { + ...other, + label, + positionX: x, + positionY: y, + innerHeight: itemSpace.innerHeight, + innerWidth: itemSpace.innerWidth, + outerHeight: itemSpace.outerHeight, + outerWidth: itemSpace.outerWidth, + rowIndex, + }; + + if (direction === 'row') { + if (x + itemSpace.innerWidth > availableWidth) { + // This legend item would create overflow along the x-axis, so we start a new row. + x = 0; + y += rowMaxHeight[rowIndex]; + rowIndex += 1; + if (rowMaxHeight.length <= rowIndex) { + rowMaxHeight.push(0); + } + rep.positionX = x; + rep.positionY = y; + rep.rowIndex = rowIndex; + } + totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth); + totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight); + rowMaxHeight[rowIndex] = Math.max(rowMaxHeight[rowIndex], itemSpace.outerHeight); + + x += itemSpace.outerWidth; + } + + if (direction === 'column') { + if (y + itemSpace.innerHeight > availableHeight) { + // This legend item would create overflow along the y-axis, so we start a new column. + x = totalWidthUsed + itemGap; + y = 0; + rowIndex = 0; + rep.positionX = x; + rep.positionY = y; + rep.rowIndex = rowIndex; + } + if (rowMaxHeight.length <= rowIndex) { + rowMaxHeight.push(0); + } + totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth); + totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight); + + rowIndex += 1; + y += itemSpace.outerHeight; + } + + return rep; + }); + + // Move the legend according to padding and position + let gapX = 0; + let gapY = 0; + switch (position.horizontal) { + case 'left': + gapX = padding.left; + break; + case 'right': + gapX = totalWidth - padding.right - totalWidthUsed; + break; + default: + gapX = (totalWidth - totalWidthUsed) / 2; + break; + } + switch (position.vertical) { + case 'top': + gapY = padding.top; + break; + case 'bottom': + gapY = totalHeight - padding.bottom - totalHeightUsed; + break; + default: + gapY = (totalHeight - totalHeightUsed) / 2; + break; + } + return seriesWithRawPosition.map((item) => ({ + ...item, + // Add the gap due to the position + positionX: item.positionX + gapX, + // Add the gap due to the position + positionY: + item.positionY + + gapY + + (direction === 'row' + ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row + : item.outerHeight / 2), // Get the center of the item + })); + }, [ + seriesToDisplay, + position.horizontal, + position.vertical, + getItemSpace, + labelStyle, + direction, + availableWidth, + availableHeight, + itemGap, + padding.left, + padding.right, + padding.top, + padding.bottom, + totalWidth, + totalHeight, + ]); if (hidden) { return null; } + return ( - - {seriesToDisplay.map(({ id, label, color }, seriesIndex) => ( - - - {label} - - ))} - + + + {seriesWithPosition.map(({ id, label, color, positionX, positionY }) => ( + + + + + ))} + + ); } @@ -229,7 +353,7 @@ export function ChartsLegend(inProps: ChartsLegendProps) { name: 'MuiChartsLegend', }); - const { position, direction, offset, hidden, slots, slotProps } = props; + const { position, direction, hidden, slots, slotProps } = props; const theme = useTheme(); const classes = useUtilityClasses({ ...props, theme }); @@ -245,7 +369,6 @@ export function ChartsLegend(inProps: ChartsLegendProps) { additionalProps: { position, direction, - offset, classes, drawingArea, series, diff --git a/packages/x-charts/src/ChartsLegend/utils.ts b/packages/x-charts/src/ChartsLegend/utils.ts index 65a2eee68296b..a5da75c6985b7 100644 --- a/packages/x-charts/src/ChartsLegend/utils.ts +++ b/packages/x-charts/src/ChartsLegend/utils.ts @@ -10,12 +10,7 @@ export type AnchorY = 'top' | 'bottom' | 'middle'; export type AnchorPosition = { horizontal: AnchorX; vertical: AnchorY }; -export type SizingParams = { - direction?: 'row' | 'column'; - markSize?: number; - itemWidth?: number; - spacing?: number; -}; +export type Direction = 'row' | 'column'; const legendGetter: { [T in ChartSeriesType]: LegendGetter } = { bar: getBarLegend, diff --git a/packages/x-charts/src/ChartsSurface.tsx b/packages/x-charts/src/ChartsSurface.tsx index 894f569868ee1..ed148ddd272ab 100644 --- a/packages/x-charts/src/ChartsSurface.tsx +++ b/packages/x-charts/src/ChartsSurface.tsx @@ -34,7 +34,6 @@ export const ChartsSurface = React.forwardRef viewBox, disableAxisListener = false, className, - sx, ...other } = props; const svgView = { width, height, x: 0, y: 0, ...viewBox }; @@ -47,16 +46,6 @@ export const ChartsSurface = React.forwardRef height={height} viewBox={`${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`} ref={ref} - sx={[ - { - '--ChartsLegend-itemWidth': '100px', - '--ChartsLegend-itemMarkSize': '20px', - '--ChartsLegend-rootSpacing': '5px', - '--ChartsLegend-labelSpacing': '5px', - '--ChartsLegend-rootOffsetY': '-20px', - }, - ...(Array.isArray(sx) ? sx : [sx]), - ]} {...other} > {props.title} diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 0817932005666..fccbcbc4f866e 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { useSlotProps } from '@mui/base/utils'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { useThemeProps, useTheme, Theme } from '@mui/material/styles'; import { CartesianContext } from '../context/CartesianContextProvider'; @@ -7,13 +8,8 @@ import { DrawingContext } from '../context/DrawingProvider'; import useTicks from '../hooks/useTicks'; import { ChartsXAxisProps } from '../models/axis'; import { getAxisUtilityClass } from '../ChartsAxis/axisClasses'; -import { - ChartsLine, - ChartsTick, - ChartsTickLabel, - ChartsLabel, - AxisRoot, -} from '../internals/components/AxisSharedComponents'; +import { AxisRoot } from '../internals/components/AxisSharedComponents'; +import { ChartsText, ChartsTextProps } from '../internals/components/ChartsText'; const useUtilityClasses = (ownerState: ChartsXAxisProps & { theme: Theme }) => { const { classes, position } = ownerState; @@ -75,10 +71,38 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { y: positionSigne * (tickFontSize + tickSize + 10), }; - const Line = slots?.axisLine ?? ChartsLine; - const Tick = slots?.axisTick ?? ChartsTick; - const TickLabel = slots?.axisTickLabel ?? ChartsTickLabel; - const Label = slots?.axisLabel ?? ChartsLabel; + const Line = slots?.axisLine ?? 'line'; + const Tick = slots?.axisTick ?? 'line'; + const TickLabel = slots?.axisTickLabel ?? ChartsText; + const Label = slots?.axisLabel ?? ChartsText; + + const axisTickLabelProps = useSlotProps({ + elementType: TickLabel, + externalSlotProps: slotProps?.axisTickLabel, + additionalProps: { + textAnchor: 'middle', + dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', + style: { fontSize: tickFontSize }, + className: classes.tickLabel, + } as Partial, + className: classes.tickLabel, + ownerState: {}, + }); + + const axisLabelProps = useSlotProps({ + elementType: Label, + externalSlotProps: slotProps?.axisLabel, + additionalProps: { + textAnchor: 'middle', + dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', + style: { + fontSize: labelFontSize, + transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`, + }, + className: classes.label, + } as Partial, + ownerState: {}, + }); return ( - {formattedValue} - + {...axisTickLabelProps} + text={formattedValue.toString()} + /> )} ); })} {label && ( - + + )} ); diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index 1e0d5227a2748..053a04bbca77a 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -1,18 +1,14 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { useSlotProps } from '@mui/base/utils'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { useThemeProps, useTheme, Theme } from '@mui/material/styles'; import { CartesianContext } from '../context/CartesianContextProvider'; import { DrawingContext } from '../context/DrawingProvider'; import useTicks from '../hooks/useTicks'; import { ChartsYAxisProps } from '../models/axis'; -import { - ChartsLine, - ChartsTick, - ChartsTickLabel, - ChartsLabel, - AxisRoot, -} from '../internals/components/AxisSharedComponents'; +import { AxisRoot } from '../internals/components/AxisSharedComponents'; +import { ChartsText, ChartsTextProps } from '../internals/components/ChartsText'; import { getAxisUtilityClass } from '../ChartsAxis/axisClasses'; const useUtilityClasses = (ownerState: ChartsYAxisProps & { theme: Theme }) => { @@ -76,10 +72,38 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { y: top + height / 2, }; - const Line = slots?.axisLine ?? ChartsLine; - const Tick = slots?.axisTick ?? ChartsTick; - const TickLabel = slots?.axisTickLabel ?? ChartsTickLabel; - const Label = slots?.axisLabel ?? ChartsLabel; + const Line = slots?.axisLine ?? 'line'; + const Tick = slots?.axisTick ?? 'line'; + const TickLabel = slots?.axisTickLabel ?? ChartsText; + const Label = slots?.axisLabel ?? ChartsText; + + const axisTickLabelProps = useSlotProps({ + elementType: TickLabel, + externalSlotProps: slotProps?.axisTickLabel, + additionalProps: { + textAnchor: position === 'right' ? 'start' : 'end', + dominantBaseline: 'central', + style: { fontSize: tickFontSize }, + className: classes.tickLabel, + } as Partial, + ownerState: {}, + }); + + const axisLabelProps = useSlotProps({ + elementType: Label, + externalSlotProps: slotProps?.axisLabel, + additionalProps: { + textAnchor: 'middle', + dominantBaseline: 'auto', + style: { + fontSize: labelFontSize, + transform: `rotate(${positionSigne * 90}deg)`, + transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`, + }, + className: classes.label, + } as Partial, + ownerState: {}, + }); return ( - {formattedValue.toLocaleString()} - + text={formattedValue.toString()} + {...axisTickLabelProps} + /> )} ); })} {label && ( - + + )} ); diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index f1a415b019392..fb8a7855ec353 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -56,6 +56,9 @@ export interface LineChartProps series: MakeOptional[]; tooltip?: ChartsTooltipProps; axisHighlight?: ChartsAxisHighlightProps; + /** + * @deprecated Consider using `slotProps.legend` instead. + */ legend?: ChartsLegendProps; /** * If `true`, render the line highlight item. @@ -228,23 +231,19 @@ LineChart.propTypes = { }), PropTypes.string, ]), + /** + * @deprecated Consider using `slotProps.legend` instead. + */ legend: PropTypes.shape({ classes: PropTypes.object, direction: PropTypes.oneOf(['column', 'row']), hidden: PropTypes.bool, - itemWidth: PropTypes.number, - markSize: PropTypes.number, - offset: PropTypes.shape({ - x: PropTypes.number, - y: PropTypes.number, - }), position: PropTypes.shape({ horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired, }), slotProps: PropTypes.object, slots: PropTypes.object, - spacing: PropTypes.number, }), margin: PropTypes.shape({ bottom: PropTypes.number, diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index 7cc58f547a44a..a4153bf963941 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -42,6 +42,9 @@ export interface PieChartProps series: MakeOptional>, 'type'>[]; tooltip?: ChartsTooltipProps; axisHighlight?: ChartsAxisHighlightProps; + /** + * @deprecated Consider using `slotProps.legend` instead. + */ legend?: ChartsLegendProps; onClick?: PiePlotProps['onClick']; @@ -190,23 +193,19 @@ PieChart.propTypes = { }), PropTypes.string, ]), + /** + * @deprecated Consider using `slotProps.legend` instead. + */ legend: PropTypes.shape({ classes: PropTypes.object, direction: PropTypes.oneOf(['column', 'row']), hidden: PropTypes.bool, - itemWidth: PropTypes.number, - markSize: PropTypes.number, - offset: PropTypes.shape({ - x: PropTypes.number, - y: PropTypes.number, - }), position: PropTypes.shape({ horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired, }), slotProps: PropTypes.object, slots: PropTypes.object, - spacing: PropTypes.number, }), margin: PropTypes.shape({ bottom: PropTypes.number, diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index f3738694aab6e..7decd47c93be4 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -44,6 +44,9 @@ export interface ScatterChartProps series: MakeOptional[]; tooltip?: ChartsTooltipProps; axisHighlight?: ChartsAxisHighlightProps; + /** + * @deprecated Consider using `slotProps.legend` instead. + */ legend?: ChartsLegendProps; /** * Overridable component slots. @@ -178,23 +181,19 @@ ScatterChart.propTypes = { }), PropTypes.string, ]), + /** + * @deprecated Consider using `slotProps.legend` instead. + */ legend: PropTypes.shape({ classes: PropTypes.object, direction: PropTypes.oneOf(['column', 'row']), hidden: PropTypes.bool, - itemWidth: PropTypes.number, - markSize: PropTypes.number, - offset: PropTypes.shape({ - x: PropTypes.number, - y: PropTypes.number, - }), position: PropTypes.shape({ horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired, }), slotProps: PropTypes.object, slots: PropTypes.object, - spacing: PropTypes.number, }), margin: PropTypes.shape({ bottom: PropTypes.number, diff --git a/packages/x-charts/src/constants.ts b/packages/x-charts/src/constants.ts index bb8cb0c694510..a198b2fa8f8ff 100644 --- a/packages/x-charts/src/constants.ts +++ b/packages/x-charts/src/constants.ts @@ -1,7 +1,7 @@ export const DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY'; export const DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY'; export const DEFAULT_MARGINS = { - top: 100, + top: 50, bottom: 50, left: 50, right: 50, diff --git a/packages/x-charts/src/context/DrawingProvider.tsx b/packages/x-charts/src/context/DrawingProvider.tsx index 161f32e283edc..9df20cd0c6632 100644 --- a/packages/x-charts/src/context/DrawingProvider.tsx +++ b/packages/x-charts/src/context/DrawingProvider.tsx @@ -14,6 +14,8 @@ export interface DrawingProviderProps extends LayoutConfig { export type DrawingArea = { left: number; top: number; + bottom: number; + right: number; width: number; height: number; }; @@ -21,6 +23,8 @@ export type DrawingArea = { export const DrawingContext = React.createContext({ top: 0, left: 0, + bottom: 0, + right: 0, height: 300, width: 400, }); diff --git a/packages/x-charts/src/hooks/useChartDimensions.ts b/packages/x-charts/src/hooks/useChartDimensions.ts index aa0d8a2754189..a8fe673fbf2c6 100644 --- a/packages/x-charts/src/hooks/useChartDimensions.ts +++ b/packages/x-charts/src/hooks/useChartDimensions.ts @@ -12,6 +12,8 @@ const useChartDimensions = (width: number, height: number, margin: LayoutConfig[ () => ({ left: defaultizedMargin.left, top: defaultizedMargin.top, + right: defaultizedMargin.right, + bottom: defaultizedMargin.bottom, width: Math.max(0, width - defaultizedMargin.left - defaultizedMargin.right), height: Math.max(0, height - defaultizedMargin.top - defaultizedMargin.bottom), }), diff --git a/packages/x-charts/src/internals/components/AxisSharedComponents.tsx b/packages/x-charts/src/internals/components/AxisSharedComponents.tsx index be5996eccddaa..ba6078ebe23b6 100644 --- a/packages/x-charts/src/internals/components/AxisSharedComponents.tsx +++ b/packages/x-charts/src/internals/components/AxisSharedComponents.tsx @@ -5,64 +5,23 @@ export const AxisRoot = styled('g', { name: 'MuiChartsAxis', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})({ - [`&.${axisClasses.directionY}`]: { - [`.${axisClasses.tickLabel}`]: { dominantBaseline: 'middle' }, - [`.${axisClasses.label}`]: { dominantBaseline: 'auto', textAnchor: 'middle' }, - }, - [`&.${axisClasses.left}`]: { - [`.${axisClasses.tickLabel}`]: { dominantBaseline: 'central', textAnchor: 'end' }, +})(({ theme }) => ({ + [`& .${axisClasses.tickLabel}`]: { + ...theme.typography.caption, + fill: (theme.vars || theme).palette.text.primary, }, - [`&.${axisClasses.right}`]: { - [`.${axisClasses.tickLabel}`]: { dominantBaseline: 'central', textAnchor: 'start' }, + [`& .${axisClasses.label}`]: { + ...theme.typography.body1, + fill: (theme.vars || theme).palette.text.primary, }, - [`&.${axisClasses.bottom}`]: { - [`.${axisClasses.tickLabel}, .${axisClasses.label}`]: { - dominantBaseline: 'hanging', - textAnchor: 'middle', - }, + + [`& .${axisClasses.line}`]: { + stroke: (theme.vars || theme).palette.text.primary, + shapeRendering: 'crispEdges', + strokeWidth: 1, }, - [`&.${axisClasses.top}`]: { - [`.${axisClasses.tickLabel}, .${axisClasses.label}`]: { - dominantBaseline: 'baseline', - textAnchor: 'middle', - }, + [`& .${axisClasses.tick}`]: { + stroke: (theme.vars || theme).palette.text.primary, + shapeRendering: 'crispEdges', }, -}); - -export const ChartsLine = styled('line', { - name: 'MuiChartsAxis', - slot: 'Line', - overridesResolver: (props, styles) => styles.line, -})(({ theme }) => ({ - stroke: (theme.vars || theme).palette.text.primary, - shapeRendering: 'crispEdges', - strokeWidth: 1, -})); - -export const ChartsTick = styled('line', { - name: 'MuiChartsAxis', - slot: 'Tick', - overridesResolver: (props, styles) => styles.tick, -})(({ theme }) => ({ - stroke: (theme.vars || theme).palette.text.primary, - shapeRendering: 'crispEdges', -})); - -export const ChartsTickLabel = styled('text', { - name: 'MuiChartsAxis', - slot: 'TickLabel', - overridesResolver: (props, styles) => styles.tickLabel, -})(({ theme }) => ({ - ...theme.typography.caption, - fill: (theme.vars || theme).palette.text.primary, -})); - -export const ChartsLabel = styled('text', { - name: 'MuiChartsAxis', - slot: 'Label', - overridesResolver: (props, styles) => styles.label, -})(({ theme }) => ({ - ...theme.typography.body1, - fill: (theme.vars || theme).palette.text.primary, })); diff --git a/packages/x-charts/src/internals/components/ChartsText.tsx b/packages/x-charts/src/internals/components/ChartsText.tsx new file mode 100644 index 0000000000000..619004ddd5602 --- /dev/null +++ b/packages/x-charts/src/internals/components/ChartsText.tsx @@ -0,0 +1,102 @@ +import * as React from 'react'; +import { getStringSize } from '../domUtils'; + +interface GetWordsByLinesParams { + /** + * Text displayed. + */ + text: string; + /** + * Style applied to text elements. + */ + style?: React.SVGAttributes<'text'>['style']; + /** + * If true, the line width is computed. + * @default false + */ + needsComputation?: boolean; +} + +export type ChartsTextBaseline = 'hanging' | 'central' | 'auto'; + +export interface ChartsTextProps + extends Omit, 'width' | 'ref'>, + GetWordsByLinesParams { + /** + * Height of a text line (in `em`). + */ + lineHeight?: number; + /** + * The text baseline + * @default 'central' + */ + dominantBaseline?: ChartsTextBaseline; + ownerState?: any; +} + +export function getWordsByLines({ style, needsComputation, text }: GetWordsByLinesParams) { + return text.split('\n').map((subText) => ({ + text: subText, + ...(needsComputation ? getStringSize(subText, style) : { width: 0, height: 0 }), + })); +} + +export function ChartsText(props: ChartsTextProps) { + const { + x, + y, + textAnchor = 'start', + dominantBaseline = 'central', + style, + text, + ownerState, + ...textProps + } = props; + + const wordsByLines = React.useMemo( + () => getWordsByLines({ style, needsComputation: text.includes('\n'), text }), + [style, text], + ); + + let startDy: number; + switch (dominantBaseline) { + case 'hanging': + startDy = 0; + break; + case 'central': + startDy = ((wordsByLines.length - 1) / 2) * -wordsByLines[0].height; + break; + default: + startDy = (wordsByLines.length - 1) * -wordsByLines[0].height; + break; + } + + // const transforms = []; + // if (scaleToFit) { + // const lineWidth = wordsByLines[0].width; + // transforms.push(`scale(${(isNumber(width as number) ? (width as number) / lineWidth : 1) / lineWidth})`); + // } + // if (angle) { + // transforms.push(`rotate(${angle}, ${x}, ${y})`); + // } + // if (transforms.length) { + // textProps.transform = transforms.join(' '); + // } + + return ( + + {wordsByLines.map((line, index) => ( + + {line.text} + + ))} + + ); +} diff --git a/packages/x-charts/src/internals/domUtils.ts b/packages/x-charts/src/internals/domUtils.ts new file mode 100644 index 0000000000000..ff1b11312bec5 --- /dev/null +++ b/packages/x-charts/src/internals/domUtils.ts @@ -0,0 +1,154 @@ +// DOM utils taken from +// https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts +import * as React from 'react'; + +const isSsr = (): boolean => + !(typeof window !== 'undefined' && window.document && window.setTimeout); + +interface StringCache { + widthCache: Record; + cacheCount: number; +} + +const stringCache: StringCache = { + widthCache: {}, + cacheCount: 0, +}; +const MAX_CACHE_NUM = 2000; +const SPAN_STYLE = { + position: 'absolute', + top: '-20000px', + left: 0, + padding: 0, + margin: 0, + border: 'none', + whiteSpace: 'pre', +}; +const STYLE_LIST = [ + 'minWidth', + 'maxWidth', + 'width', + 'minHeight', + 'maxHeight', + 'height', + 'top', + 'left', + 'fontSize', + 'padding', + 'margin', + 'paddingLeft', + 'paddingRight', + 'paddingTop', + 'paddingBottom', + 'marginLeft', + 'marginRight', + 'marginTop', + 'marginBottom', +]; +const MEASUREMENT_SPAN_ID = 'mui_measurement_span'; + +/** + * + * @param name CSS property name + * @param value + * @returns add 'px' for distance properties + */ +function autoCompleteStyle(name: string, value: number) { + if (STYLE_LIST.indexOf(name) >= 0 && value === +value) { + return `${value}px`; + } + + return value; +} + +/** + * + * @param text camelcase css property + * @returns css property + */ +function camelToMiddleLine(text: string) { + const strs = text.split(''); + + const formatStrs = strs.reduce((result: string[], entry) => { + if (entry === entry.toUpperCase()) { + return [...result, '-', entry.toLowerCase()]; + } + + return [...result, entry]; + }, []); + + return formatStrs.join(''); +} + +/** + * + * @param style React style object + * @returns CSS styling string + */ +export const getStyleString = (style: React.CSSProperties) => + Object.keys(style) + .sort() + .reduce( + (result, s) => + `${result}${camelToMiddleLine(s)}:${autoCompleteStyle( + s, + (style as Record)[s], + )};`, + '', + ); + +/** + * + * @param text The string to estimate + * @param style The style applied + * @returns width and height of the text + */ +export const getStringSize = (text: string | number, style: React.CSSProperties = {}) => { + if (text === undefined || text === null || isSsr()) { + return { width: 0, height: 0 }; + } + + const str = `${text}`; + const styleString = getStyleString(style); + const cacheKey = `${str}-${styleString}`; + + if (stringCache.widthCache[cacheKey]) { + return stringCache.widthCache[cacheKey]; + } + + try { + let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID); + if (measurementSpan === null) { + measurementSpan = document.createElement('span'); + measurementSpan.setAttribute('id', MEASUREMENT_SPAN_ID); + measurementSpan.setAttribute('aria-hidden', 'true'); + document.body.appendChild(measurementSpan); + } + // Need to use CSS Object Model (CSSOM) to be able to comply with Content Security Policy (CSP) + // https://en.wikipedia.org/wiki/Content_Security_Policy + const measurementSpanStyle: Record = { ...SPAN_STYLE, ...style }; + + Object.keys(measurementSpanStyle).map((styleKey) => { + (measurementSpan!.style as Record)[camelToMiddleLine(styleKey)] = + autoCompleteStyle(styleKey, measurementSpanStyle[styleKey]); + return styleKey; + }); + measurementSpan.textContent = str; + + const rect = measurementSpan.getBoundingClientRect(); + const result = { width: rect.width, height: rect.height }; + + stringCache.widthCache[cacheKey] = result; + + if (stringCache.cacheCount + 1 > MAX_CACHE_NUM) { + stringCache.cacheCount = 0; + stringCache.widthCache = {}; + } else { + stringCache.cacheCount += 1; + } + + return result; + } catch (e) { + return { width: 0, height: 0 }; + } +}; diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index fe961f887b791..3b600edda3221 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -8,6 +8,7 @@ import type { } from 'd3-scale'; import { ChartsAxisClasses } from '../ChartsAxis/axisClasses'; import type { TickParams } from '../hooks/useTicks'; +import { ChartsTextProps } from '../internals/components/ChartsText'; export type D3Scale = | ScaleBand @@ -26,15 +27,15 @@ export type D3ContinuouseScale = export interface ChartsAxisSlotsComponent { axisLine?: React.JSXElementConstructor>; axisTick?: React.JSXElementConstructor>; - axisTickLabel?: React.JSXElementConstructor>; - axisLabel?: React.JSXElementConstructor>; + axisTickLabel?: React.JSXElementConstructor; + axisLabel?: React.JSXElementConstructor; } export interface ChartsAxisSlotComponentProps { axisLine?: Partial>; axisTick?: Partial>; - axisTickLabel?: Partial>; - axisLabel?: Partial>; + axisTickLabel?: Partial; + axisLabel?: Partial; } export interface ChartsAxisProps extends TickParams { diff --git a/packages/x-charts/src/models/layout.ts b/packages/x-charts/src/models/layout.ts index ad76fea554f3c..85f09550b9f46 100644 --- a/packages/x-charts/src/models/layout.ts +++ b/packages/x-charts/src/models/layout.ts @@ -1,10 +1,12 @@ +export interface CardinalDirections { + top?: T; + bottom?: T; + left?: T; + right?: T; +} + export type LayoutConfig = { width: number; height: number; - margin?: { - top?: number; - bottom?: number; - left?: number; - right?: number; - }; + margin?: Partial>; }; diff --git a/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts index ab18169d25272..ca25d76aacf0d 100644 --- a/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts +++ b/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts @@ -54,7 +54,7 @@ createTheme({ }, MuiChartsLegend: { defaultProps: { - offset: { x: 0 }, + direction: 'row', // @ts-expect-error invalid MuiChartsLegend prop someRandomProp: true, }, diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index 8d8b94c698e2b..3c5752620719e 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -16,6 +16,7 @@ { "name": "blueberryTwilightPalette", "kind": "Variable" }, { "name": "blueberryTwilightPaletteDark", "kind": "Variable" }, { "name": "blueberryTwilightPaletteLight", "kind": "Variable" }, + { "name": "CardinalDirections", "kind": "Interface" }, { "name": "CartesianContextProvider", "kind": "Function" }, { "name": "CartesianSeriesType", "kind": "TypeAlias" }, { "name": "ChartContainer", "kind": "Variable" }, From 43726547d93b0add69c0e88bc26a15a570601ee5 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Wed, 11 Oct 2023 15:30:56 +0200 Subject: [PATCH 109/262] [fields] Bootstrap the multi-HTML input component (#10638) --- .../FakeTextField/FakeTextField.tsx | 23 +++++++++++++++++++ .../components/FakeTextField/index.ts | 1 + 2 files changed, 24 insertions(+) create mode 100644 packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx create mode 100644 packages/x-date-pickers/src/internals/components/FakeTextField/index.ts diff --git a/packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx b/packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx new file mode 100644 index 0000000000000..29770001c4a51 --- /dev/null +++ b/packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import { FieldSection } from '../../../models'; + +interface FakeTextFieldProps { + sections: FieldSection[]; +} + +export function FakeTextField(props: FakeTextFieldProps) { + const { sections } = props; + + return ( + + {sections.map((section) => ( + + {section.startSeparator} + {}} /> + {section.endSeparator} + + ))} + + ); +} diff --git a/packages/x-date-pickers/src/internals/components/FakeTextField/index.ts b/packages/x-date-pickers/src/internals/components/FakeTextField/index.ts new file mode 100644 index 0000000000000..17b2be0c0a9e6 --- /dev/null +++ b/packages/x-date-pickers/src/internals/components/FakeTextField/index.ts @@ -0,0 +1 @@ +export { FakeTextField } from './FakeTextField'; From 2d567f60d88ae19baa12f294f8c53943a116ca80 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Wed, 11 Oct 2023 15:54:54 +0200 Subject: [PATCH 110/262] [charts] Fix typo between internal/external variable (#10640) --- .../x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 4 ++-- .../x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 4 ++-- .../src/context/CartesianContextProvider.tsx | 22 +++++++++---------- packages/x-charts/src/hooks/useTicks.ts | 21 +++++++++--------- packages/x-charts/src/models/axis.ts | 2 +- 5 files changed, 27 insertions(+), 26 deletions(-) diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index fccbcbc4f866e..7b7b3eeab4999 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -38,7 +38,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { const props = useThemeProps({ props: { ...defaultProps, ...inProps }, name: 'MuiChartsXAxis' }); const { xAxis: { - [props.axisId]: { scale: xScale, ticksNumber, ...settings }, + [props.axisId]: { scale: xScale, tickNumber, ...settings }, }, } = React.useContext(CartesianContext); @@ -63,7 +63,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { const tickSize = disableTicks ? 4 : tickSizeProp; - const xTicks = useTicks({ scale: xScale, ticksNumber, valueFormatter }); + const xTicks = useTicks({ scale: xScale, tickNumber, valueFormatter }); const positionSigne = position === 'bottom' ? 1 : -1; const labelRefPoint = { diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index 053a04bbca77a..d2d532fd197a1 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -38,7 +38,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { const props = useThemeProps({ props: { ...defaultProps, ...inProps }, name: 'MuiChartsYAxis' }); const { yAxis: { - [props.axisId]: { scale: yScale, ticksNumber, ...settings }, + [props.axisId]: { scale: yScale, tickNumber, ...settings }, }, } = React.useContext(CartesianContext); @@ -63,7 +63,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { const tickSize = disableTicks ? 4 : tickSizeProp; - const yTicks = useTicks({ scale: yScale, ticksNumber, valueFormatter }); + const yTicks = useTicks({ scale: yScale, tickNumber, valueFormatter }); const positionSigne = position === 'right' ? 1 : -1; diff --git a/packages/x-charts/src/context/CartesianContextProvider.tsx b/packages/x-charts/src/context/CartesianContextProvider.tsx index acbf9c9dc7c23..f35b88e2223f1 100644 --- a/packages/x-charts/src/context/CartesianContextProvider.tsx +++ b/packages/x-charts/src/context/CartesianContextProvider.tsx @@ -26,7 +26,7 @@ import { ExtremumGetterResult, } from '../models/seriesType/config'; import { MakeOptional } from '../models/helpers'; -import { getTicksNumber } from '../hooks/useTicks'; +import { getTickNumber } from '../hooks/useTicks'; export type CartesianContextProviderProps = { xAxis?: MakeOptional[]; @@ -183,14 +183,14 @@ function CartesianContextProvider({ scale: scaleBand(axis.data!, range) .paddingInner(categoryGapRatio) .paddingOuter(categoryGapRatio / 2), - ticksNumber: axis.data!.length, + tickNumber: axis.data!.length, }; } if (isPointScaleConfig(axis)) { completedXAxis[axis.id] = { ...axis, scale: scalePoint(axis.data!, range), - ticksNumber: axis.data!.length, + tickNumber: axis.data!.length, }; } if (axis.scaleType === 'band' || axis.scaleType === 'point') { @@ -201,9 +201,9 @@ function CartesianContextProvider({ const scaleType = axis.scaleType ?? 'linear'; const extremums = [axis.min ?? minData, axis.max ?? maxData]; - const ticksNumber = getTicksNumber({ ...axis, range, domain: extremums }); + const tickNumber = getTickNumber({ ...axis, range, domain: extremums }); - const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber); + const niceScale = getScale(scaleType, extremums, range).nice(tickNumber); const niceDomain = niceScale.domain(); const domain = [axis.min ?? niceDomain[0], axis.max ?? niceDomain[1]]; @@ -211,7 +211,7 @@ function CartesianContextProvider({ ...axis, scaleType, scale: niceScale.domain(domain), - ticksNumber, + tickNumber, } as AxisDefaultized; }); @@ -237,14 +237,14 @@ function CartesianContextProvider({ scale: scaleBand(axis.data!, [range[1], range[0]]) .paddingInner(categoryGapRatio) .paddingOuter(categoryGapRatio / 2), - ticksNumber: axis.data!.length, + tickNumber: axis.data!.length, }; } if (isPointScaleConfig(axis)) { completedYAxis[axis.id] = { ...axis, scale: scalePoint(axis.data!, [range[1], range[0]]), - ticksNumber: axis.data!.length, + tickNumber: axis.data!.length, }; } if (axis.scaleType === 'band' || axis.scaleType === 'point') { @@ -255,9 +255,9 @@ function CartesianContextProvider({ const scaleType = axis.scaleType ?? 'linear'; const extremums = [axis.min ?? minData, axis.max ?? maxData]; - const ticksNumber = getTicksNumber({ ...axis, range, domain: extremums }); + const tickNumber = getTickNumber({ ...axis, range, domain: extremums }); - const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber); + const niceScale = getScale(scaleType, extremums, range).nice(tickNumber); const niceDomain = niceScale.domain(); const domain = [axis.min ?? niceDomain[0], axis.max ?? niceDomain[1]]; @@ -265,7 +265,7 @@ function CartesianContextProvider({ ...axis, scaleType, scale: niceScale.domain(domain), - ticksNumber, + tickNumber, } as AxisDefaultized; }); diff --git a/packages/x-charts/src/hooks/useTicks.ts b/packages/x-charts/src/hooks/useTicks.ts index c4166ea91e4a0..143901bf24d4a 100644 --- a/packages/x-charts/src/hooks/useTicks.ts +++ b/packages/x-charts/src/hooks/useTicks.ts @@ -22,7 +22,7 @@ export interface TickParams { tickNumber?: number; } -export function getTicksNumber( +export function getTickNumber( params: TickParams & { range: any[]; domain: any[]; @@ -40,12 +40,13 @@ export function getTicksNumber( return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber)); } -function useTicks(options: { - scale: D3Scale; - ticksNumber?: number; - valueFormatter?: (value: any) => string; -}) { - const { scale, ticksNumber, valueFormatter } = options; +function useTicks( + options: { + scale: D3Scale; + valueFormatter?: (value: any) => string; + } & Pick, +) { + const { scale, tickNumber, valueFormatter } = options; return React.useMemo(() => { // band scale @@ -77,12 +78,12 @@ function useTicks(options: { })); } - return scale.ticks(ticksNumber).map((value: any) => ({ - formattedValue: valueFormatter?.(value) ?? scale.tickFormat(ticksNumber)(value), + return scale.ticks(tickNumber).map((value: any) => ({ + formattedValue: valueFormatter?.(value) ?? scale.tickFormat(tickNumber)(value), offset: scale(value), labelOffset: 0, })); - }, [ticksNumber, scale, valueFormatter]); + }, [tickNumber, scale, valueFormatter]); } export default useTicks; diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index 3b600edda3221..8bdc7b91da37b 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -185,7 +185,7 @@ export type AxisDefaultized = Omit< 'scaleType' > & AxisScaleConfig[S] & { - ticksNumber: number; + tickNumber: number; }; export function isBandScaleConfig( From 87815c04e1bfd8cefe30fd25585fd483044bb6b8 Mon Sep 17 00:00:00 2001 From: Lev-Shapiro <96536068+Lev-Shapiro@users.noreply.github.com> Date: Wed, 11 Oct 2023 17:11:22 +0300 Subject: [PATCH 111/262] [DataGrid] Remove unnecessary syntax in JSDoc (#10567) Co-authored-by: Lev Shapiro Co-authored-by: Olivier Tassinari --- docs/pages/x/api/data-grid/data-grid-premium.json | 2 +- docs/pages/x/api/data-grid/data-grid-pro.json | 2 +- docs/pages/x/api/data-grid/data-grid.json | 2 +- .../src/services/tree-data-generator.ts | 5 ++--- .../src/DataGridPremium/DataGridPremium.tsx | 2 +- .../grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx | 2 +- .../x-data-grid-pro/src/models/gridGroupingColDefOverride.ts | 4 ++-- packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx | 2 +- packages/grid/x-data-grid/src/models/props/DataGridProps.ts | 2 +- 9 files changed, 11 insertions(+), 12 deletions(-) diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 3c104fbeb9865..8e84fafb5d408 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -608,7 +608,7 @@ "name": "union", "description": "{ clipboardExport?: bool, csvExport?: bool }
          | bool" }, - "default": ": false" + "default": "false" }, "unstable_onCellSelectionModelChange": { "type": { "name": "func" }, 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 cf6c9e9310c3e..0a7cbf32e460f 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -557,7 +557,7 @@ "name": "union", "description": "{ clipboardExport?: bool, csvExport?: bool }
          | bool" }, - "default": ": false" + "default": "false" } }, "slots": [ diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 15d987cefe642..3cd3f1cbd975e 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -429,7 +429,7 @@ "name": "union", "description": "{ clipboardExport?: bool, csvExport?: bool }
          | bool" }, - "default": ": false" + "default": "false" } }, "slots": [ diff --git a/packages/grid/x-data-grid-generator/src/services/tree-data-generator.ts b/packages/grid/x-data-grid-generator/src/services/tree-data-generator.ts index 80e37aeb901ab..57ae9f0dfc27a 100644 --- a/packages/grid/x-data-grid-generator/src/services/tree-data-generator.ts +++ b/packages/grid/x-data-grid-generator/src/services/tree-data-generator.ts @@ -11,13 +11,12 @@ export interface AddPathToDemoDataOptions { /** * The depth of the tree - * @default: 1 + * @default 1 */ maxDepth?: number; - /** * The average amount of children in a node - * @default: 2 + * @default 2 */ averageChildren?: number; } diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index d4ed6e679b05c..12d57e5b7cb5b 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -1015,7 +1015,7 @@ DataGridPremiumRaw.propTypes = { /** * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard. * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export. - * @default: false + * @default false */ unstable_ignoreValueFormatterDuringExport: PropTypes.oneOfType([ PropTypes.shape({ diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 07479dba9a3e1..3a0e768e2e03e 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -931,7 +931,7 @@ DataGridProRaw.propTypes = { /** * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard. * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export. - * @default: false + * @default false */ unstable_ignoreValueFormatterDuringExport: PropTypes.oneOfType([ PropTypes.shape({ diff --git a/packages/grid/x-data-grid-pro/src/models/gridGroupingColDefOverride.ts b/packages/grid/x-data-grid-pro/src/models/gridGroupingColDefOverride.ts index d85d87d91bb07..ab6f80261c46d 100644 --- a/packages/grid/x-data-grid-pro/src/models/gridGroupingColDefOverride.ts +++ b/packages/grid/x-data-grid-pro/src/models/gridGroupingColDefOverride.ts @@ -15,7 +15,7 @@ export interface GridGroupingColDefOverride * The field from which we want to apply the sorting and the filtering for the grouping column. * It is only useful when `props.rowGroupingColumnMode === "multiple"` to decide which grouping criteria should be used for sorting and filtering. * Do not have any effect when building the tree with the `props.treeData` feature. - * @default: The sorting and filtering is applied based on the leaf field in any, otherwise based on top level grouping criteria. + * @default The sorting and filtering is applied based on the leaf field in any, otherwise based on top level grouping criteria. */ mainGroupingCriteria?: string; @@ -27,7 +27,7 @@ export interface GridGroupingColDefOverride /** * If `true`, the grouping cells will not render the amount of descendants. - * @default: false + * @default false */ hideDescendantCount?: boolean; } diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx index 9c447dc7da0a7..dabc61e808c8e 100644 --- a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx @@ -712,7 +712,7 @@ DataGridRaw.propTypes = { /** * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard. * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export. - * @default: false + * @default false */ unstable_ignoreValueFormatterDuringExport: PropTypes.oneOfType([ PropTypes.shape({ diff --git a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts index 647e04f9dae38..46b868c7c67bf 100644 --- a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts @@ -358,7 +358,7 @@ export interface DataGridPropsWithDefaultValues { /** * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard. * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export. - * @default: false + * @default false */ unstable_ignoreValueFormatterDuringExport: | boolean From 02c9e53ad42e53fd39bc223488a54098a3b6c611 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 12 Oct 2023 13:22:01 +0500 Subject: [PATCH 112/262] [DataGrid] Get quick filter to work OOTB with `date` and `datetime` fields (#10636) --- packages/grid/x-data-grid/src/colDef/gridDateColDef.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/grid/x-data-grid/src/colDef/gridDateColDef.ts b/packages/grid/x-data-grid/src/colDef/gridDateColDef.ts index cb09fa6d40cdd..18e9e29f3ffc6 100644 --- a/packages/grid/x-data-grid/src/colDef/gridDateColDef.ts +++ b/packages/grid/x-data-grid/src/colDef/gridDateColDef.ts @@ -50,8 +50,6 @@ export const GRID_DATE_COL_DEF: GridColTypeDef = { valueFormatter: gridDateFormatter, filterOperators: getGridDateOperators(), renderEditCell: renderEditDateCell, - getApplyQuickFilterFn: undefined, - getApplyQuickFilterFnV7: undefined, // @ts-ignore pastedValueParser: (value) => new Date(value), }; @@ -63,8 +61,6 @@ export const GRID_DATETIME_COL_DEF: GridColTypeDef = { valueFormatter: gridDateTimeFormatter, filterOperators: getGridDateOperators(true), renderEditCell: renderEditDateCell, - getApplyQuickFilterFn: undefined, - getApplyQuickFilterFnV7: undefined, // @ts-ignore pastedValueParser: (value) => new Date(value), }; From 6d3cbc1a5e5b3e393da87ae980bc8f9a59ffc98a Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Thu, 12 Oct 2023 12:30:51 +0200 Subject: [PATCH 113/262] [DataGrid] Update row hover behavior to match native hover (#10623) --- packages/grid/x-data-grid/src/components/GridRow.tsx | 4 ++++ .../features/virtualization/useGridVirtualScroller.tsx | 10 ++++++++-- .../x-data-grid/src/models/events/gridEventLookup.ts | 8 ++++++++ 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 4b1b6fa9cf99b..3e21241918a59 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -125,6 +125,8 @@ const GridRow = React.forwardRef(function GridRow( onDoubleClick, onMouseEnter, onMouseLeave, + onMouseOut, + onMouseOver, ...other } = props; const apiRef = useGridApiContext(); @@ -449,6 +451,8 @@ const GridRow = React.forwardRef(function GridRow( onDoubleClick: publish('rowDoubleClick', onDoubleClick), onMouseEnter: publish('rowMouseEnter', onMouseEnter), onMouseLeave: publish('rowMouseLeave', onMouseLeave), + onMouseOut: publish('rowMouseOut', onMouseOut), + onMouseOver: publish('rowMouseOver', onMouseOver), } : null; diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 4d9859f4b08b0..3e16fc239a763 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -515,10 +515,16 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { return -1; }, [cellFocus, currentPage.rows]); - useGridApiEventHandler(apiRef, 'rowMouseEnter', (params) => { + useGridApiEventHandler(apiRef, 'rowMouseOver', (params, event) => { + if (event.currentTarget.contains(event.relatedTarget as Node)) { + return; + } setHoveredRowId(params.id ?? null); }); - useGridApiEventHandler(apiRef, 'rowMouseLeave', () => { + useGridApiEventHandler(apiRef, 'rowMouseOut', (params, event) => { + if (event.currentTarget.contains(event.relatedTarget as Node)) { + return; + } setHoveredRowId(null); }); diff --git a/packages/grid/x-data-grid/src/models/events/gridEventLookup.ts b/packages/grid/x-data-grid/src/models/events/gridEventLookup.ts index 919ca4847bcfc..c893e7597582e 100644 --- a/packages/grid/x-data-grid/src/models/events/gridEventLookup.ts +++ b/packages/grid/x-data-grid/src/models/events/gridEventLookup.ts @@ -44,6 +44,14 @@ export interface GridRowEventLookup { * Fired when the mouse leaves the row. Called with a [[GridRowParams]] object. */ rowMouseLeave: { params: GridRowParams; event: React.MouseEvent }; + /** + * @ignore - do not document. + */ + rowMouseOut: { params: GridRowParams; event: React.MouseEvent }; + /** + * @ignore - do not document. + */ + rowMouseOver: { params: GridRowParams; event: React.MouseEvent }; /** * Fired when the user starts dragging a row. It's mapped to the `dragstart` DOM event. * @ignore - do not document. From fc031f944a379d17d6f9f4914326a3e94db2e3e9 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 12 Oct 2023 15:41:44 +0500 Subject: [PATCH 114/262] [core] Update the issue templates to reflect the new support workflow (#10651) --- .github/ISSUE_TEMPLATE/1.bug.yml | 2 +- .github/ISSUE_TEMPLATE/2.feature.yml | 2 +- .github/ISSUE_TEMPLATE/3.pro-support.yml | 2 +- .github/ISSUE_TEMPLATE/4.premium-support.yml | 2 +- .github/ISSUE_TEMPLATE/5.priority-support.yml | 2 +- .github/ISSUE_TEMPLATE/6.docs-feedback.yml | 2 +- .github/ISSUE_TEMPLATE/7.rfc.yml | 2 +- .github/workflows/ensure-triage-label.yml | 2 +- .github/workflows/mark-duplicate.yml | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/1.bug.yml b/.github/ISSUE_TEMPLATE/1.bug.yml index 04ddc524eb781..a71ee74c028b1 100644 --- a/.github/ISSUE_TEMPLATE/1.bug.yml +++ b/.github/ISSUE_TEMPLATE/1.bug.yml @@ -1,6 +1,6 @@ name: Bug report 🐛 description: Create a bug report for MUI X. -labels: ['status: needs triage'] +labels: ['status: waiting for maintainer'] body: - type: markdown attributes: diff --git a/.github/ISSUE_TEMPLATE/2.feature.yml b/.github/ISSUE_TEMPLATE/2.feature.yml index f7bde8e60c338..2bdf5faee9c81 100644 --- a/.github/ISSUE_TEMPLATE/2.feature.yml +++ b/.github/ISSUE_TEMPLATE/2.feature.yml @@ -1,6 +1,6 @@ name: Feature request 💄 description: Suggest a new idea for MUI X. -labels: ['status: needs triage'] +labels: ['status: waiting for maintainer'] body: - type: markdown attributes: diff --git a/.github/ISSUE_TEMPLATE/3.pro-support.yml b/.github/ISSUE_TEMPLATE/3.pro-support.yml index 2bb5901fe1e31..7942854803204 100644 --- a/.github/ISSUE_TEMPLATE/3.pro-support.yml +++ b/.github/ISSUE_TEMPLATE/3.pro-support.yml @@ -1,7 +1,7 @@ name: 'Pro plan: question ❔' description: I'm a Pro plan user, I can't find a solution to my problem with MUI X. title: '[question] ' -labels: ['status: needs triage', 'pro plan', 'support: commercial'] +labels: ['status: waiting for maintainer', 'pro plan', 'support: commercial'] body: - type: markdown attributes: diff --git a/.github/ISSUE_TEMPLATE/4.premium-support.yml b/.github/ISSUE_TEMPLATE/4.premium-support.yml index e2e57d4cf00f7..fabb0defcb778 100644 --- a/.github/ISSUE_TEMPLATE/4.premium-support.yml +++ b/.github/ISSUE_TEMPLATE/4.premium-support.yml @@ -1,7 +1,7 @@ name: 'Premium plan: question ❔' description: I'm a Premium plan user, I can't find a solution to my problem with MUI X. title: '[question] ' -labels: ['status: needs triage', 'Premium plan', 'support: commercial'] +labels: ['status: waiting for maintainer', 'Premium plan', 'support: commercial'] body: - type: markdown attributes: diff --git a/.github/ISSUE_TEMPLATE/5.priority-support.yml b/.github/ISSUE_TEMPLATE/5.priority-support.yml index cbcee59d00e76..49b685d8449dc 100644 --- a/.github/ISSUE_TEMPLATE/5.priority-support.yml +++ b/.github/ISSUE_TEMPLATE/5.priority-support.yml @@ -1,7 +1,7 @@ name: 'Priority Support: SLA ⏰' description: I'm an MUI X Premium user and we have purchased the Priority Support add-on. I can't find a solution to my problem with MUI X. title: '[question] ' -labels: ['status: needs triage', 'support: commercial', 'support: unknown'] +labels: ['status: waiting for maintainer', 'support: commercial', 'support: unknown'] body: - type: markdown attributes: diff --git a/.github/ISSUE_TEMPLATE/6.docs-feedback.yml b/.github/ISSUE_TEMPLATE/6.docs-feedback.yml index d0c7f18e1ad06..9c5dcfd8cb1c1 100644 --- a/.github/ISSUE_TEMPLATE/6.docs-feedback.yml +++ b/.github/ISSUE_TEMPLATE/6.docs-feedback.yml @@ -1,6 +1,6 @@ name: Docs feedback description: Improve documentation about MUI Core. -labels: ['status: needs triage', 'support: docs-feedback'] +labels: ['status: waiting for maintainer', 'support: docs-feedback'] title: '[docs] ' body: - type: markdown diff --git a/.github/ISSUE_TEMPLATE/7.rfc.yml b/.github/ISSUE_TEMPLATE/7.rfc.yml index bedf972a27100..a5eef95af73fa 100644 --- a/.github/ISSUE_TEMPLATE/7.rfc.yml +++ b/.github/ISSUE_TEMPLATE/7.rfc.yml @@ -1,7 +1,7 @@ name: RFC 💬 description: Request for comments for your proposal. title: '[RFC] ' -labels: ['status: needs triage', 'RFC'] +labels: ['status: waiting for maintainer', 'RFC'] body: - type: markdown attributes: diff --git a/.github/workflows/ensure-triage-label.yml b/.github/workflows/ensure-triage-label.yml index c4753ccbd3ef4..b88106efdd148 100644 --- a/.github/workflows/ensure-triage-label.yml +++ b/.github/workflows/ensure-triage-label.yml @@ -30,6 +30,6 @@ jobs: issue_number: context.issue.number, owner: context.repo.owner, repo: context.repo.repo, - labels: ['status: needs triage'] + labels: ['status: waiting for maintainer'] }) } diff --git a/.github/workflows/mark-duplicate.yml b/.github/workflows/mark-duplicate.yml index eb9a755966387..15e82efe76c2b 100644 --- a/.github/workflows/mark-duplicate.yml +++ b/.github/workflows/mark-duplicate.yml @@ -19,5 +19,5 @@ jobs: actions: 'mark-duplicate' token: ${{ secrets.GITHUB_TOKEN }} duplicate-labels: 'duplicate' - remove-labels: 'status: incomplete,status: needs triage' + remove-labels: 'status: incomplete,status: waiting for maintainer' close-issue: true From f31ecfa5970e04804a61c2a7b35efe3ef0f8383b Mon Sep 17 00:00:00 2001 From: Lukas Date: Thu, 12 Oct 2023 13:58:49 +0300 Subject: [PATCH 115/262] [docs] Avoid Pickers playground error due to empty views (#10654) --- .../modules/components/PickersPlayground.tsx | 94 ++++++++++++++----- 1 file changed, 71 insertions(+), 23 deletions(-) diff --git a/docs/src/modules/components/PickersPlayground.tsx b/docs/src/modules/components/PickersPlayground.tsx index ae6d73d25c696..5d47348d87b70 100644 --- a/docs/src/modules/components/PickersPlayground.tsx +++ b/docs/src/modules/components/PickersPlayground.tsx @@ -10,10 +10,11 @@ import FormControlLabel, { formControlLabelClasses } from '@mui/material/FormCon import Radio from '@mui/material/Radio'; import FormHelperText from '@mui/material/FormHelperText'; import FormGroup from '@mui/material/FormGroup'; -import Checkbox from '@mui/material/Checkbox'; +import Checkbox, { CheckboxProps } from '@mui/material/Checkbox'; import Select from '@mui/material/Select'; import MenuItem from '@mui/material/MenuItem'; import Divider from '@mui/material/Divider'; +import Tooltip from '@mui/material/Tooltip'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -168,6 +169,31 @@ const shortcutsItems: PickersShortcutsItem>[] = [ { label: 'Reset', getValue: () => [null, null] }, ]; +function DisabledCheckboxTooltip({ children }: { children: React.ReactElement }) { + return ( + {children} + ); +} + +function ViewCheckbox({ + onlyOneView, + name, + ...other +}: Pick & { + onlyOneView: boolean; +}) { + const isDisabled = other.checked && onlyOneView; + const Wrapper = isDisabled ? DisabledCheckboxTooltip : React.Fragment; + return ( + + } + label={name} + /> + + ); +} + function ViewSwitcher({ showDateViews, showTimeViews, @@ -179,6 +205,20 @@ function ViewSwitcher({ views: ViewsMap; handleViewsChange: (event: React.ChangeEvent, checked: boolean) => void; }) { + const relevantViews = React.useMemo( + () => + Object.entries(views).filter( + ([view]) => + (showDateViews && isDatePickerView(view as DateOrTimeView)) || + (showTimeViews && isTimeView(view as DateOrTimeView)), + ), + [showDateViews, showTimeViews, views], + ); + const onlyOneView = React.useMemo( + () => relevantViews.filter(([, enabled]) => Boolean(enabled)).length === 1, + [relevantViews], + ); + return ( @@ -196,37 +236,45 @@ function ViewSwitcher({ > {showDateViews && ( - } - label="year" + - } - label="month" + - } - label="day" + )} {showTimeViews && ( - } - label="hours" + - - } - label="minutes" + - - } - label="seconds" + )} From 863b677170317d37e46e8b29730c570b4ec784c5 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Thu, 12 Oct 2023 15:23:16 +0200 Subject: [PATCH 116/262] [core] Bump monorepo (#10619) Co-authored-by: Bilal Shafi --- babel.config.js | 3 +++ .../base-concepts/ComponentFamilies.js | 5 ++-- .../base-concepts/ComponentFamilies.tsx | 5 ++-- .../overview/CommonlyUsedComponents.js | 5 ++-- .../overview/CommonlyUsedComponents.tsx | 5 ++-- package.json | 1 + .../src/tests/DataGridPremium.test.tsx | 2 +- .../aggregation.DataGridPremium.test.tsx | 2 +- .../cellSelection.DataGridPremium.test.tsx | 2 +- .../tests/clipboard.DataGridPremium.test.tsx | 2 +- .../tests/columns.DataGridPremium.test.tsx | 2 +- .../exportExcel.DataGridPremium.test.tsx | 2 +- .../tests/license.DataGridPremium.test.tsx | 2 +- .../rowGrouping.DataGridPremium.test.tsx | 2 +- .../tests/rowPinning.DataGridPremium.test.tsx | 2 +- .../statePersistence.DataGridPremium.test.tsx | 2 +- .../grid/x-data-grid-premium/tsconfig.json | 2 +- .../tests/accessibility.DataGridPro.test.tsx | 2 +- .../tests/cellEditing.DataGridPro.test.tsx | 2 +- .../src/tests/clipboard.DataGridPro.test.tsx | 2 +- .../tests/columnHeaders.DataGridPro.test.tsx | 2 +- .../tests/columnPinning.DataGridPro.test.tsx | 2 +- .../tests/columnReorder.DataGridPro.test.tsx | 2 +- .../tests/columnSpanning.DataGridPro.test.tsx | 2 +- .../src/tests/columns.DataGridPro.test.tsx | 2 +- .../columnsVisibility.DataGridPro.test.tsx | 2 +- .../src/tests/components.DataGridPro.test.tsx | 2 +- .../tests/detailPanel.DataGridPro.test.tsx | 2 +- .../tests/editComponents.DataGridPro.test.tsx | 2 +- .../src/tests/events.DataGridPro.test.tsx | 2 +- .../src/tests/export.DataGridPro.test.tsx | 2 +- .../tests/filterPanel.DataGridPro.test.tsx | 2 +- .../src/tests/filtering.DataGridPro.test.tsx | 2 +- .../src/tests/layout.DataGridPro.test.tsx | 2 +- .../src/tests/lazyLoader.DataGridPro.test.tsx | 2 +- .../src/tests/license.DataGridPro.test.tsx | 2 +- .../src/tests/pagination.DataGridPro.test.tsx | 2 +- .../src/tests/printExport.DataGrid.test.tsx | 2 +- .../src/tests/rowEditing.DataGridPro.test.tsx | 2 +- .../src/tests/rowPinning.DataGridPro.test.tsx | 2 +- .../src/tests/rowReorder.DataGridPro.test.tsx | 2 +- .../tests/rowSelection.DataGridPro.test.tsx | 2 +- .../src/tests/rows.DataGridPro.test.tsx | 2 +- .../src/tests/sorting.DataGridPro.test.tsx | 2 +- .../src/tests/state.DataGridPro.test.tsx | 2 +- .../statePersistence.DataGridPro.test.tsx | 2 +- .../src/tests/treeData.DataGridPro.test.tsx | 2 +- packages/grid/x-data-grid-pro/tsconfig.json | 2 +- .../src/components/panel/GridPanel.test.tsx | 2 +- .../features/columns/gridColumnsUtils.ts | 1 - .../hooks/features/filter/gridFilterUtils.ts | 4 ++-- .../utils/useGridApiEventHandler.test.tsx | 2 +- packages/grid/x-data-grid/src/locales/roRO.ts | 2 +- .../x-data-grid/src/tests/DataGrid.test.tsx | 2 +- .../src/tests/cells.DataGrid.test.tsx | 2 +- .../src/tests/columnHeaders.DataGrid.test.tsx | 2 +- .../tests/columnSpanning.DataGrid.test.tsx | 2 +- .../src/tests/columns.DataGrid.test.tsx | 2 +- .../tests/columnsGrouping.DataGrid.test.tsx | 2 +- .../tests/columnsVisibility.DataGrid.test.tsx | 2 +- .../src/tests/components.DataGrid.test.tsx | 2 +- .../src/tests/export.DataGrid.test.tsx | 2 +- .../src/tests/filterPanel.DataGrid.test.tsx | 2 +- .../src/tests/filtering.DataGrid.test.tsx | 2 +- .../src/tests/keyboard.DataGrid.test.tsx | 2 +- .../src/tests/layout.DataGrid.test.tsx | 2 +- .../src/tests/pagination.DataGrid.test.tsx | 2 +- .../tests/quickFiltering.DataGrid.test.tsx | 2 +- .../src/tests/rowSelection.DataGrid.test.tsx | 2 +- .../src/tests/rows.DataGrid.test.tsx | 2 +- .../src/tests/sorting.DataGrid.test.tsx | 2 +- .../src/tests/toolbar.DataGrid.test.tsx | 2 +- packages/grid/x-data-grid/tsconfig.json | 2 +- packages/x-charts/tsconfig.json | 2 +- packages/x-codemod/tsconfig.json | 2 +- .../DateRangeCalendar.test.tsx | 2 +- .../DateRangePicker/DateRangePicker.test.tsx | 2 +- .../describes.DateRangePicker.test.tsx | 2 +- .../DateRangePickerDay.test.tsx | 2 +- .../tests/DesktopDateRangePicker.test.tsx | 2 +- .../describes.DesktopDateRangePicker.test.tsx | 2 +- .../tests/MobileDateRangePicker.test.tsx | 2 +- .../describes.MobileDateRangePicker.test.tsx | 2 +- ...tiInputDateRangeField.conformance.test.tsx | 2 +- ...ltiInputDateRangeField.validation.test.tsx | 4 ++-- ...putDateTimeRangeField.conformance.test.tsx | 2 +- ...nputDateTimeRangeField.validation.test.tsx | 4 ++-- ...tiInputTimeRangeField.conformance.test.tsx | 2 +- ...ltiInputTimeRangeField.validation.test.tsx | 4 ++-- ...scribes.SingleInputDateRangeField.test.tsx | 2 +- ...editing.SingleInputDateRangeField.test.tsx | 2 +- ...lection.SingleInputDateRangeField.test.tsx | 2 +- ...bes.SingleInputDateTimeRangeField.test.tsx | 2 +- ...scribes.SingleInputTimeRangeField.test.tsx | 2 +- .../StaticDateRangePicker.test.tsx | 2 +- packages/x-date-pickers-pro/tsconfig.json | 2 +- .../AdapterDateFns/AdapterDateFns.test.tsx | 2 +- .../AdapterDateFnsJalali.test.tsx | 2 +- .../src/AdapterDayjs/AdapterDayjs.test.tsx | 2 +- .../src/AdapterLuxon/AdapterLuxon.test.tsx | 2 +- .../src/AdapterMoment/AdapterMoment.test.tsx | 2 +- .../AdapterMomentHijri.test.tsx | 2 +- .../AdapterMomentJalaali.test.tsx | 2 +- .../DateCalendar/tests/DateCalendar.test.tsx | 2 +- .../tests/describes.DateCalendar.test.tsx | 2 +- .../tests/keyboard.DateCalendar.test.tsx | 2 +- .../tests/timezone.DateCalendar.test.tsx | 2 +- .../tests/validation.DateCalendar.test.tsx | 2 +- .../tests/describes.DateField.test.tsx | 2 +- .../tests/editing.DateField.test.tsx | 2 +- .../tests/selection.DateField.test.tsx | 2 +- .../src/DatePicker/tests/DatePicker.test.tsx | 2 +- .../tests/describes.DateTimeField.test.tsx | 2 +- .../tests/editing.DateTimeField.test.tsx | 2 +- .../tests/timezone.DateTimeField.test.tsx | 2 +- .../tests/DateTimePicker.test.tsx | 2 +- .../DayCalendarSkeleton.test.tsx | 2 +- .../tests/DesktopDatePicker.test.tsx | 2 +- .../describes.DesktopDatePicker.test.tsx | 2 +- .../tests/field.DesktopDatePicker.test.tsx | 2 +- .../tests/DesktopDateTimePicker.test.tsx | 2 +- .../describes.DesktopDateTimePicker.test.tsx | 2 +- .../tests/DesktopTimePicker.test.tsx | 2 +- .../describes.DesktopTimePicker.test.tsx | 2 +- .../tests/describes.DigitalClock.test.tsx | 2 +- .../tests/timezone.DigitalClock.test.tsx | 2 +- .../LocalizationProvider.test.tsx | 2 +- .../tests/MobileDatePicker.test.tsx | 2 +- .../tests/describes.MobileDatePicker.test.tsx | 2 +- .../tests/MobileDateTimePicker.test.tsx | 2 +- .../describes.MobileDateTimePicker.test.tsx | 2 +- .../tests/MobileTimePicker.test.tsx | 2 +- .../tests/describes.MobileTimePicker.test.tsx | 2 +- .../tests/MonthCalendar.test.tsx | 2 +- .../tests/describes.MonthCalendar.test.tsx | 2 +- ...escribes.MultiSectionDigitalClock.test.tsx | 2 +- .../PickersActionBar.test.tsx | 2 +- .../src/PickersDay/PickersDay.test.tsx | 2 +- .../tests/StaticDatePicker.test.tsx | 2 +- .../tests/StaticDatePickerKeyboard.test.tsx | 2 +- .../tests/StaticDateTimePicker.test.tsx | 2 +- .../StaticTimePicker.test.tsx | 2 +- .../src/TimeClock/tests/TimeClock.test.tsx | 2 +- .../tests/describes.TimeClock.test.tsx | 2 +- .../tests/timezone.TimeClock.test.tsx | 2 +- .../tests/describes.TimeField.test.tsx | 2 +- .../tests/editing.TimeField.test.tsx | 2 +- .../src/TimePicker/tests/TimePicker.test.tsx | 2 +- .../YearCalendar/tests/YearCalendar.test.tsx | 2 +- .../tests/describes.YearCalendar.test.tsx | 2 +- .../tests/fieldKeyboardInteraction.test.tsx | 2 +- packages/x-date-pickers/tsconfig.json | 2 +- .../useLicenseVerifier.test.tsx | 2 +- packages/x-license-pro/tsconfig.json | 2 +- .../src/TreeItem/TreeItem.test.tsx | 2 +- .../src/TreeView/TreeView.test.tsx | 2 +- packages/x-tree-view/tsconfig.json | 2 +- test/karma.tests.js | 2 +- test/utils/helperFn.ts | 2 +- test/utils/init.ts | 2 +- test/utils/pickers/calendar.ts | 2 +- test/utils/pickers/clock.ts | 2 +- test/utils/pickers/createPickerRenderer.tsx | 2 +- .../describeAdapters/describeAdapters.ts | 2 +- .../describeGregorianAdapter.ts | 2 +- .../describeHijriAdapter.ts | 2 +- .../describeJalaliAdapter.ts | 2 +- .../pickers/describePicker/describePicker.tsx | 2 +- .../describePicker/describePicker.types.ts | 2 +- .../describeRangeValidation.tsx | 2 +- .../testDayViewRangeValidation.tsx | 2 +- .../testTextFieldKeyboardRangeValidation.tsx | 4 ++-- .../testTextFieldRangeValidation.tsx | 2 +- .../describeValidation/describeValidation.ts | 2 +- .../describeValidation.types.ts | 2 +- .../testDayViewValidation.tsx | 2 +- .../testMinutesViewValidation.tsx | 2 +- .../testMonthViewValidation.tsx | 2 +- .../testTextFieldValidation.tsx | 2 +- .../testYearViewValidation.tsx | 2 +- .../pickers/describeValue/describeValue.tsx | 2 +- .../describeValue/describeValue.types.ts | 2 +- .../testControlledUnControlled.tsx | 2 +- .../describeValue/testPickerActionBar.tsx | 2 +- .../testPickerOpenCloseLifeCycle.tsx | 2 +- .../pickers/describeValue/testShortcuts.tsx | 2 +- test/utils/pickers/fields.tsx | 2 +- test/utils/pickers/openPicker.ts | 2 +- test/utils/pickers/viewHandlers.ts | 2 +- test/utils/setupJSDOM.js | 3 ++- tsconfig.json | 2 ++ webpackBaseConfig.js | 4 ++++ yarn.lock | 23 +++++++++++++++++-- 193 files changed, 232 insertions(+), 199 deletions(-) diff --git a/babel.config.js b/babel.config.js index 4e02caa2e3bde..6601d00c9a52a 100644 --- a/babel.config.js +++ b/babel.config.js @@ -19,6 +19,9 @@ const defaultAlias = { '@mui/markdown': '@mui/monorepo/packages/markdown', '@mui-internal/api-docs-builder': '@mui/monorepo/packages/api-docs-builder', '@mui-internal/docs-utilities': '@mui/monorepo/packages/docs-utilities', + '@mui-internal/test-utils': resolveAliasPath( + './node_modules/@mui/monorepo/packages/test-utils/src', + ), 'typescript-to-proptypes': '@mui/monorepo/packages/typescript-to-proptypes/src', docs: resolveAliasPath('./node_modules/@mui/monorepo/docs'), test: resolveAliasPath('./test'), diff --git a/docs/data/date-pickers/base-concepts/ComponentFamilies.js b/docs/data/date-pickers/base-concepts/ComponentFamilies.js index ac81f4a141f89..1466da83eadb0 100644 --- a/docs/data/date-pickers/base-concepts/ComponentFamilies.js +++ b/docs/data/date-pickers/base-concepts/ComponentFamilies.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import Link from 'next/link'; import dayjs from 'dayjs'; import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; @@ -16,9 +17,9 @@ function ProLabel({ children }) { return ( - + - + {children} diff --git a/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx b/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx index 0d381520068e0..9d0b94fc655e3 100644 --- a/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx +++ b/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import Link from 'next/link'; import dayjs from 'dayjs'; import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; @@ -16,9 +17,9 @@ function ProLabel({ children }: { children: React.ReactNode }) { return ( - + - + {children} diff --git a/docs/data/date-pickers/overview/CommonlyUsedComponents.js b/docs/data/date-pickers/overview/CommonlyUsedComponents.js index 3bf2d5d176ca7..998657c63796d 100644 --- a/docs/data/date-pickers/overview/CommonlyUsedComponents.js +++ b/docs/data/date-pickers/overview/CommonlyUsedComponents.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import Link from 'next/link'; import Tooltip from '@mui/material/Tooltip'; import Stack from '@mui/material/Stack'; import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; @@ -20,9 +21,9 @@ function Label({ componentName, valueType, isProOnly }) { return ( - + - + {content} diff --git a/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx b/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx index 41459182b6f25..8bce409df5047 100644 --- a/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx +++ b/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import Link from 'next/link'; import Tooltip from '@mui/material/Tooltip'; import Stack from '@mui/material/Stack'; import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; @@ -28,9 +29,9 @@ function Label({ return ( - + - + {content} diff --git a/package.json b/package.json index 4043514f090a5..46b56c54be9ba 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "@mui/material": "^5.14.11", "@mui/monorepo": "https://github.com/mui/material-ui.git#master", "@mui/utils": "^5.14.11", + "@next/eslint-plugin-next": "^13.5.4", "@octokit/plugin-retry": "^6.0.1", "@octokit/rest": "^20.0.2", "@playwright/test": "1.38.1", diff --git a/packages/grid/x-data-grid-premium/src/tests/DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/DataGridPremium.test.tsx index 09521a4d2b075..d6c0fa7588751 100644 --- a/packages/grid/x-data-grid-premium/src/tests/DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/DataGridPremium.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, act } from '@mui/monorepo/test/utils'; +import { createRenderer, act } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { DataGridPremium as DataGrid, diff --git a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx index 8b4d4509078ae..e6e44d51931be 100644 --- a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, screen, userEvent, within, act } from '@mui/monorepo/test/utils'; +import { createRenderer, screen, userEvent, within, act } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn'; import { SinonSpy, spy } from 'sinon'; diff --git a/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx index d7d05dbbacd23..30ddfc94dc735 100644 --- a/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { stub, SinonStub } from 'sinon'; import { expect } from 'chai'; import { spyApi, getCell } from 'test/utils/helperFn'; -import { createRenderer, fireEvent, act, userEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, act, userEvent } from '@mui-internal/test-utils'; import { DataGridPremium, DataGridPremiumProps, diff --git a/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx index 70c9dbfaf8369..97eb968aee159 100644 --- a/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx @@ -7,7 +7,7 @@ import { GridColDef, } from '@mui/x-data-grid-premium'; // @ts-ignore Remove once the test utils are typed -import { createRenderer, fireEvent, userEvent, waitFor } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, userEvent, waitFor } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { stub, SinonStub, spy } from 'sinon'; import { getCell, getColumnValues, sleep } from 'test/utils/helperFn'; diff --git a/packages/grid/x-data-grid-premium/src/tests/columns.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/columns.DataGridPremium.test.tsx index eb32d82a5e199..14267f4ac7dca 100644 --- a/packages/grid/x-data-grid-premium/src/tests/columns.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/columns.DataGridPremium.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { act, createRenderer, fireEvent } from '@mui/monorepo/test/utils'; +import { act, createRenderer, fireEvent } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { DataGridPremium, gridClasses } from '@mui/x-data-grid-premium'; import { getCell, getColumnHeaderCell } from 'test/utils/helperFn'; diff --git a/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx index 404c90c237498..a32314397bc2b 100644 --- a/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx @@ -8,7 +8,7 @@ import { DataGridPremiumProps, GridActionsCellItem, } from '@mui/x-data-grid-premium'; -import { createRenderer, screen, fireEvent, act } from '@mui/monorepo/test/utils'; +import { createRenderer, screen, fireEvent, act } from '@mui-internal/test-utils'; import { spy, SinonSpy } from 'sinon'; import { expect } from 'chai'; import Excel from 'exceljs'; diff --git a/packages/grid/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx index d99d0d1ee93ff..96495a5572c9d 100644 --- a/packages/grid/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import addYears from 'date-fns/addYears'; import { expect } from 'chai'; -import { createRenderer, screen, waitFor } from '@mui/monorepo/test/utils'; +import { createRenderer, screen, waitFor } from '@mui-internal/test-utils'; import { DataGridPremium } from '@mui/x-data-grid-premium'; import { generateLicense, LicenseInfo } from '@mui/x-license-pro'; diff --git a/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx index 74e7fce53bd93..60fb45c1802ed 100644 --- a/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx @@ -6,7 +6,7 @@ import { act, userEvent, waitFor, -} from '@mui/monorepo/test/utils'; +} from '@mui-internal/test-utils'; import { microtasks, getColumnHeaderCell, diff --git a/packages/grid/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx index acca8e87e40d3..e0a103cbde2b7 100644 --- a/packages/grid/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/rowPinning.DataGridPremium.test.tsx @@ -1,4 +1,4 @@ -import { createRenderer } from '@mui/monorepo/test/utils'; +import { createRenderer } from '@mui-internal/test-utils'; import * as React from 'react'; import { expect } from 'chai'; import { diff --git a/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx index 497722909eb62..a8a9a8411d1e0 100644 --- a/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx @@ -8,7 +8,7 @@ import { GridRowsProp, useGridApiRef, } from '@mui/x-data-grid-premium'; -import { createRenderer, act } from '@mui/monorepo/test/utils'; +import { createRenderer, act } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { getColumnValues } from 'test/utils/helperFn'; diff --git a/packages/grid/x-data-grid-premium/tsconfig.json b/packages/grid/x-data-grid-premium/tsconfig.json index 3d20b7d6a4bb6..79824ab245468 100644 --- a/packages/grid/x-data-grid-premium/tsconfig.json +++ b/packages/grid/x-data-grid-premium/tsconfig.json @@ -6,7 +6,7 @@ "include": [ "src/**/*", "../../test/utils/addChaiAssertions.ts", - "../../node_modules/@mui/monorepo/test/utils/initMatchers.ts", + "../../node_modules/@mui/monorepo/packages/test-utils/src/initMatchers.ts", "../../../node_modules/@mui/material/themeCssVarsAugmentation" ] } diff --git a/packages/grid/x-data-grid-pro/src/tests/accessibility.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/accessibility.DataGridPro.test.tsx index 18bc9828f4307..2c54024362746 100644 --- a/packages/grid/x-data-grid-pro/src/tests/accessibility.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/accessibility.DataGridPro.test.tsx @@ -3,7 +3,7 @@ import { expect } from 'chai'; import axe from 'axe-core'; import { DataGridPro } from '@mui/x-data-grid-pro'; import { useBasicDemoData } from '@mui/x-data-grid-generator'; -import { createRenderer } from '@mui/monorepo/test/utils'; +import { createRenderer } from '@mui-internal/test-utils'; function logViolations(violations: any) { if (violations.length !== 0) { diff --git a/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx index 3edf22299bf87..7aa921856e0f9 100644 --- a/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx @@ -13,7 +13,7 @@ import { GridCellModes, } from '@mui/x-data-grid-pro'; import { getBasicGridData } from '@mui/x-data-grid-generator'; -import { createRenderer, fireEvent, act, userEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, act, userEvent } from '@mui-internal/test-utils'; import { getCell, spyApi } from 'test/utils/helperFn'; describe(' - Cell editing', () => { diff --git a/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx index 682f3986ce62d..fb2a4721dbf9e 100644 --- a/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { GridApi, useGridApiRef, DataGridPro, DataGridProProps } from '@mui/x-data-grid-pro'; -import { createRenderer, fireEvent, act, userEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, act, userEvent } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { stub, SinonStub } from 'sinon'; import { getCell } from 'test/utils/helperFn'; diff --git a/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx index 30b10d39465e1..6846a4fcfe298 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { gridClasses, DataGridPro, DataGridProProps } from '@mui/x-data-grid-pro'; import { getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn'; diff --git a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx index 4664ef6d89ace..44e0eb07521a9 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx @@ -20,7 +20,7 @@ import { createEvent, act, userEvent, -} from '@mui/monorepo/test/utils'; +} from '@mui-internal/test-utils'; import { getCell, getColumnHeaderCell, getColumnHeadersTextContent } from 'test/utils/helperFn'; // TODO Move to utils diff --git a/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx index d566f208b09d1..10374c4da06d8 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { createRenderer, fireEvent, createEvent, act } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, createEvent, act } from '@mui-internal/test-utils'; import { getColumnHeadersTextContent, getColumnHeaderCell, diff --git a/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx index ad4632ec1b072..06391336b3c80 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, act, userEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, act, userEvent } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { DataGridPro, GridApi, useGridApiRef, GridColDef, gridClasses } from '@mui/x-data-grid-pro'; import { getActiveCell, getCell, getColumnHeaderCell } from 'test/utils/helperFn'; diff --git a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx index 9251992f3efc0..fab2eb10e9eee 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, act } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { spy } from 'sinon'; import { diff --git a/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx index 48c90c678a341..d6c9f05104e8a 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { createRenderer, fireEvent, act } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, act } from '@mui-internal/test-utils'; import { DataGridPro, DataGridProProps, diff --git a/packages/grid/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx index b443a67fb19ea..942019a4ee69b 100644 --- a/packages/grid/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, EventType, fireEvent, userEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, EventType, fireEvent, userEvent } from '@mui-internal/test-utils'; import { spy } from 'sinon'; import { expect } from 'chai'; import { diff --git a/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx index 1e3d478134821..cd329d62029af 100644 --- a/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx @@ -18,7 +18,7 @@ import { waitFor, act, userEvent, -} from '@mui/monorepo/test/utils'; +} from '@mui-internal/test-utils'; import { getRow, getCell, getColumnValues, getRows } from 'test/utils/helperFn'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); diff --git a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx index f2cac621b16e1..4a350ce9678b4 100644 --- a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx @@ -10,7 +10,7 @@ import { renderEditInputCell, renderEditSingleSelectCell, } from '@mui/x-data-grid-pro'; -import { act, createRenderer, fireEvent, screen, userEvent } from '@mui/monorepo/test/utils'; +import { act, createRenderer, fireEvent, screen, userEvent } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { getCell, spyApi } from 'test/utils/helperFn'; import { spy, SinonSpy } from 'sinon'; diff --git a/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx index 83e4b6ae985dd..f596ed6ad2a16 100644 --- a/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, act } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { DataGridPro, diff --git a/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx index 6a5cd4f56feab..fb3f9e9022938 100644 --- a/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx @@ -5,7 +5,7 @@ import { GridApi, DataGridProProps, } from '@mui/x-data-grid-pro'; -import { createRenderer, act } from '@mui/monorepo/test/utils'; +import { createRenderer, act } from '@mui-internal/test-utils'; import { expect } from 'chai'; import * as React from 'react'; diff --git a/packages/grid/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx index 0477796e293e3..d7f5333dfa1cd 100644 --- a/packages/grid/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx @@ -7,7 +7,7 @@ import { GridApi, useGridApiRef, } from '@mui/x-data-grid-pro'; -import { createRenderer, act } from '@mui/monorepo/test/utils'; +import { createRenderer, act } from '@mui-internal/test-utils'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); diff --git a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx index 9e878e0a9e377..1ef195ec5933f 100644 --- a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx @@ -15,7 +15,7 @@ import { gridExpandedSortedRowEntriesSelector, gridClasses, } from '@mui/x-data-grid-pro'; -import { createRenderer, fireEvent, screen, act, within } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, act, within } from '@mui-internal/test-utils'; import { expect } from 'chai'; import * as React from 'react'; import { spy } from 'sinon'; diff --git a/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx index d43165fce0c81..ded3a0d2b2108 100644 --- a/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, screen, act } from '@mui/monorepo/test/utils'; +import { createRenderer, screen, act } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import { GridApi, useGridApiRef, DataGridPro, ptBR, DataGridProProps } from '@mui/x-data-grid-pro'; diff --git a/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx index b782cd3bc34e9..b144e2d8640f5 100644 --- a/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, act } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, act } from '@mui-internal/test-utils'; import { getColumnHeaderCell, getColumnValues, getRow } from 'test/utils/helperFn'; import { expect } from 'chai'; import { diff --git a/packages/grid/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx index 7306eb5992d8c..f2556186f2532 100644 --- a/packages/grid/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { createRenderer, screen, waitFor } from '@mui/monorepo/test/utils'; +import { createRenderer, screen, waitFor } from '@mui-internal/test-utils'; import { DataGridPro } from '@mui/x-data-grid-pro'; import { LicenseInfo } from '@mui/x-license-pro'; diff --git a/packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx index 745fc9d5fc3c1..55d78d03024ff 100644 --- a/packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx @@ -1,4 +1,4 @@ -import { createRenderer, act } from '@mui/monorepo/test/utils'; +import { createRenderer, act } from '@mui-internal/test-utils'; import { getColumnValues } from 'test/utils/helperFn'; import * as React from 'react'; import { expect } from 'chai'; diff --git a/packages/grid/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx b/packages/grid/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx index d532723cba476..5a5433fe409f9 100644 --- a/packages/grid/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx @@ -9,7 +9,7 @@ import { DataGridProProps, } from '@mui/x-data-grid-pro'; import { getBasicGridData } from '@mui/x-data-grid-generator'; -import { createRenderer, screen, fireEvent, act } from '@mui/monorepo/test/utils'; +import { createRenderer, screen, fireEvent, act } from '@mui-internal/test-utils'; describe(' - Print export', () => { const { render, clock } = createRenderer(); diff --git a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx index 7e8a2b7f28d02..a08ebe77322c7 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx @@ -13,7 +13,7 @@ import { } from '@mui/x-data-grid-pro'; import Portal from '@mui/material/Portal'; import { getBasicGridData } from '@mui/x-data-grid-generator'; -import { createRenderer, fireEvent, act, userEvent, screen } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, act, userEvent, screen } from '@mui-internal/test-utils'; import { getCell, getRow, spyApi } from 'test/utils/helperFn'; describe(' - Row editing', () => { diff --git a/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx index bb80ce265f766..878eb683e1f4c 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx @@ -18,7 +18,7 @@ import { act, userEvent, waitFor, -} from '@mui/monorepo/test/utils'; +} from '@mui-internal/test-utils'; import { getActiveCell, getActiveColumnHeader, diff --git a/packages/grid/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx index 7aee64b05493c..3c56a545f6d04 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { createRenderer, fireEvent, createEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, createEvent } from '@mui-internal/test-utils'; import { getCell, getRowsFieldContent } from 'test/utils/helperFn'; import { useGridApiRef, DataGridPro, gridClasses, GridApi } from '@mui/x-data-grid-pro'; import { useBasicDemoData } from '@mui/x-data-grid-generator'; diff --git a/packages/grid/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx index ed04365c0cf86..1666112dd0cdb 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { getCell, getColumnValues, getRows } from 'test/utils/helperFn'; -import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, act } from '@mui-internal/test-utils'; import { GridApi, useGridApiRef, diff --git a/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx index 2791f94b63071..8f3d464f6356a 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, act, userEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, act, userEvent } from '@mui-internal/test-utils'; import { spy } from 'sinon'; import { expect } from 'chai'; import { diff --git a/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx index cd77c3eb27eef..ab44035ffbf6c 100644 --- a/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx @@ -7,7 +7,7 @@ import { useGridApiRef, GridColDef, } from '@mui/x-data-grid-pro'; -import { createRenderer, fireEvent, act } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, act } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { spy } from 'sinon'; import { getColumnValues, getCell, getColumnHeaderCell } from 'test/utils/helperFn'; diff --git a/packages/grid/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx index 266afb032ca1f..4b5090b4e277a 100644 --- a/packages/grid/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen } from '@mui-internal/test-utils'; import { getColumnValues } from 'test/utils/helperFn'; import { expect } from 'chai'; import { DataGridPro, useGridApiRef, GridApi, DataGridProProps } from '@mui/x-data-grid-pro'; diff --git a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx index 737a83f810b59..f21003436f85e 100644 --- a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx @@ -10,7 +10,7 @@ import { GridRowsProp, useGridApiRef, } from '@mui/x-data-grid-pro'; -import { createRenderer, screen, act } from '@mui/monorepo/test/utils'; +import { createRenderer, screen, act } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { getColumnHeaderCell, diff --git a/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx index 8b206fc602293..d8b2cf6c3e471 100644 --- a/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx @@ -1,4 +1,4 @@ -import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, act, userEvent } from '@mui-internal/test-utils'; import { getCell, getColumnHeaderCell, diff --git a/packages/grid/x-data-grid-pro/tsconfig.json b/packages/grid/x-data-grid-pro/tsconfig.json index 3d20b7d6a4bb6..79824ab245468 100644 --- a/packages/grid/x-data-grid-pro/tsconfig.json +++ b/packages/grid/x-data-grid-pro/tsconfig.json @@ -6,7 +6,7 @@ "include": [ "src/**/*", "../../test/utils/addChaiAssertions.ts", - "../../node_modules/@mui/monorepo/test/utils/initMatchers.ts", + "../../node_modules/@mui/monorepo/packages/test-utils/src/initMatchers.ts", "../../../node_modules/@mui/material/themeCssVarsAugmentation" ] } diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanel.test.tsx b/packages/grid/x-data-grid/src/components/panel/GridPanel.test.tsx index e201e19b16dce..093099c0c7949 100644 --- a/packages/grid/x-data-grid/src/components/panel/GridPanel.test.tsx +++ b/packages/grid/x-data-grid/src/components/panel/GridPanel.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, describeConformance } from '@mui/monorepo/test/utils'; +import { createRenderer, describeConformance } from '@mui-internal/test-utils'; import { GridPanel, gridPanelClasses as classes, diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts index 9033f55d15e40..5043488df7428 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts @@ -94,7 +94,6 @@ export function computeFlexColumnsWidth({ flexColumnsLookup.all[column.field] && flexColumnsLookup.all[column.field].frozen === true ) { - // eslint-disable-next-line no-continue continue; } diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts b/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts index 3d53c84c74532..67da4b90908d0 100644 --- a/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts +++ b/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts @@ -374,7 +374,7 @@ export const buildAggregatedQuickFilterApplier = ( const result = {} as GridQuickFilterValueResult; const usedCellParams = {} as { [field: string]: GridCellParams }; - /* eslint-disable no-restricted-syntax, no-labels, no-continue */ + /* eslint-disable no-restricted-syntax, no-labels */ outer: for (let v = 0; v < quickFilterValues.length; v += 1) { const filterValue = quickFilterValues[v]; @@ -415,7 +415,7 @@ export const buildAggregatedQuickFilterApplier = ( result[filterValue] = false; } - /* eslint-enable no-restricted-syntax, no-labels, no-continue */ + /* eslint-enable no-restricted-syntax, no-labels */ return result; }; diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx b/packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx index 644a145a8decf..8619de8bf66f7 100644 --- a/packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx +++ b/packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { createRenderer } from '@mui/monorepo/test/utils'; +import { createRenderer } from '@mui-internal/test-utils'; import { sleep } from 'test/utils/helperFn'; import { createUseGridApiEventHandler } from './useGridApiEventHandler'; import { FinalizationRegistryBasedCleanupTracking } from '../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking'; diff --git a/packages/grid/x-data-grid/src/locales/roRO.ts b/packages/grid/x-data-grid/src/locales/roRO.ts index 4a7421fdd0478..6c3dd716d4a3a 100644 --- a/packages/grid/x-data-grid/src/locales/roRO.ts +++ b/packages/grid/x-data-grid/src/locales/roRO.ts @@ -86,7 +86,7 @@ const roROGrid: Partial = { headerFilterOperatorIs: 'Este', headerFilterOperatorNot: 'Nu este', headerFilterOperatorAfter: 'Este după', - headerFilterOperatorOnOrAfter: 'Este la sau „după”', + headerFilterOperatorOnOrAfter: 'Este la sau după', headerFilterOperatorBefore: 'Este înainte de', headerFilterOperatorOnOrBefore: 'este la sau înainte de', headerFilterOperatorIsEmpty: 'Este gol', diff --git a/packages/grid/x-data-grid/src/tests/DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/DataGrid.test.tsx index 2038fa0bb7a5c..0cdd1258c059b 100644 --- a/packages/grid/x-data-grid/src/tests/DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/DataGrid.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer } from '@mui/monorepo/test/utils'; +import { createRenderer } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { DataGrid } from '@mui/x-data-grid'; diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index 2e30f56443748..14f2116a33e4a 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { spy } from 'sinon'; -import { createRenderer, fireEvent, userEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, userEvent } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { DataGrid } from '@mui/x-data-grid'; import { getCell } from 'test/utils/helperFn'; diff --git a/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx index c8e01b7bd0418..51d1e7bb69f8b 100644 --- a/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen, within, userEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, within, userEvent } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { DataGrid } from '@mui/x-data-grid'; import { getColumnHeaderCell, getColumnHeadersTextContent } from 'test/utils/helperFn'; diff --git a/packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx index cb28bda8cdf20..36165bbcff92a 100644 --- a/packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen, within, userEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, within, userEvent } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { DataGrid, gridClasses, GridColDef } from '@mui/x-data-grid'; import { getCell, getActiveCell, getColumnHeaderCell } from 'test/utils/helperFn'; diff --git a/packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx index 824d1b13e16da..c5f26f0911ddf 100644 --- a/packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { createRenderer } from '@mui/monorepo/test/utils'; +import { createRenderer } from '@mui-internal/test-utils'; import { DataGrid, DataGridProps, GridRowsProp, GridColDef } from '@mui/x-data-grid'; import { getCell, getColumnHeaderCell, getColumnHeadersTextContent } from 'test/utils/helperFn'; diff --git a/packages/grid/x-data-grid/src/tests/columnsGrouping.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnsGrouping.DataGrid.test.tsx index 0e241faaed698..8e49966b85150 100644 --- a/packages/grid/x-data-grid/src/tests/columnsGrouping.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/columnsGrouping.DataGrid.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { createRenderer, ErrorBoundary, screen } from '@mui/monorepo/test/utils'; +import { createRenderer, ErrorBoundary, screen } from '@mui-internal/test-utils'; import { DataGrid, DataGridProps, GridRowModel, GridColDef } from '@mui/x-data-grid'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); diff --git a/packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx index e932220f46482..a6f44f5d85d24 100644 --- a/packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen } from '@mui-internal/test-utils'; import { DataGrid, DataGridProps, GridRowsProp, GridColDef, GridToolbar } from '@mui/x-data-grid'; import { getColumnHeadersTextContent } from 'test/utils/helperFn'; diff --git a/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx index b34915df5b861..ca568342eb2d2 100644 --- a/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, ErrorBoundary, fireEvent, screen } from '@mui/monorepo/test/utils'; +import { createRenderer, ErrorBoundary, fireEvent, screen } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { spy } from 'sinon'; import { DataGrid, GridOverlay } from '@mui/x-data-grid'; diff --git a/packages/grid/x-data-grid/src/tests/export.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/export.DataGrid.test.tsx index 89021247df41b..3cf8c8f76b8a8 100644 --- a/packages/grid/x-data-grid/src/tests/export.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/export.DataGrid.test.tsx @@ -3,7 +3,7 @@ import { expect } from 'chai'; import { spy, SinonSpy } from 'sinon'; import { DataGrid, DataGridProps, GridToolbar, GridToolbarExport } from '@mui/x-data-grid'; import { useBasicDemoData } from '@mui/x-data-grid-generator'; -import { createRenderer, screen, fireEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, screen, fireEvent } from '@mui-internal/test-utils'; describe(' - Export', () => { const { render, clock } = createRenderer({ clock: 'fake' }); diff --git a/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx index 44f9e654c0a56..ff0fed0471402 100644 --- a/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx @@ -9,7 +9,7 @@ import { GridFilterInputValueProps, GridPreferencePanelsValue, } from '@mui/x-data-grid'; -import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen } from '@mui-internal/test-utils'; import { getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn'; function setColumnValue(columnValue: string) { diff --git a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx index 5747b8bfb2831..004ae708b3198 100644 --- a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { DataGrid, diff --git a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx index b9a4b8cbfe453..036082a0ce0e7 100644 --- a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, act, userEvent } from '@mui-internal/test-utils'; import { spy } from 'sinon'; import { expect } from 'chai'; import { diff --git a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx index a4ea76ef2107e..b0689738116d2 100644 --- a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, screen, ErrorBoundary, waitFor } from '@mui/monorepo/test/utils'; +import { createRenderer, screen, ErrorBoundary, waitFor } from '@mui-internal/test-utils'; import { stub, spy } from 'sinon'; import { expect } from 'chai'; import { diff --git a/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx index d714aad74cd08..bc5a7cf594602 100644 --- a/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy, stub, SinonStub, SinonSpy } from 'sinon'; import { expect } from 'chai'; -import { createRenderer, fireEvent, screen, userEvent, waitFor } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, userEvent, waitFor } from '@mui-internal/test-utils'; import { DataGrid, DataGridProps, diff --git a/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx index 95c1d4002571d..e96dd895cce5b 100644 --- a/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, screen, fireEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, screen, fireEvent } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { spy } from 'sinon'; import { diff --git a/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx index 405fb351a60ae..7b30a19524055 100644 --- a/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, act, userEvent } from '@mui-internal/test-utils'; import { DataGrid, DataGridProps, diff --git a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx index c8cb659bca435..dce134e2eaebd 100644 --- a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx @@ -7,7 +7,7 @@ import { userEvent, ErrorBoundary, waitFor, -} from '@mui/monorepo/test/utils'; +} from '@mui-internal/test-utils'; import clsx from 'clsx'; import { expect } from 'chai'; import { spy, stub } from 'sinon'; diff --git a/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx index aca6e0b84d832..da0251d355e69 100644 --- a/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen, act, waitFor } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, act, waitFor } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { DataGrid, DataGridProps, GridSortModel, useGridApiRef, GridApi } from '@mui/x-data-grid'; import { getColumnValues, getColumnHeaderCell } from 'test/utils/helperFn'; diff --git a/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx index 7260822b8bbbf..e0eca83e1f089 100644 --- a/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, act } from '@mui-internal/test-utils'; import { getColumnHeadersTextContent } from 'test/utils/helperFn'; import { expect } from 'chai'; import { diff --git a/packages/grid/x-data-grid/tsconfig.json b/packages/grid/x-data-grid/tsconfig.json index 3d20b7d6a4bb6..79824ab245468 100644 --- a/packages/grid/x-data-grid/tsconfig.json +++ b/packages/grid/x-data-grid/tsconfig.json @@ -6,7 +6,7 @@ "include": [ "src/**/*", "../../test/utils/addChaiAssertions.ts", - "../../node_modules/@mui/monorepo/test/utils/initMatchers.ts", + "../../node_modules/@mui/monorepo/packages/test-utils/src/initMatchers.ts", "../../../node_modules/@mui/material/themeCssVarsAugmentation" ] } diff --git a/packages/x-charts/tsconfig.json b/packages/x-charts/tsconfig.json index 16bd9c3be1b6a..6a8e1ed5b14fc 100644 --- a/packages/x-charts/tsconfig.json +++ b/packages/x-charts/tsconfig.json @@ -6,7 +6,7 @@ "include": [ "src/**/*", "../../test/utils/addChaiAssertions.ts", - "../../node_modules/@mui/monorepo/test/utils/initMatchers.ts", + "../../node_modules/@mui/monorepo/packages/test-utils/src/initMatchers.ts", "../../node_modules/@mui/material/themeCssVarsAugmentation" ] } diff --git a/packages/x-codemod/tsconfig.json b/packages/x-codemod/tsconfig.json index 8f3781e0afa99..9a29c68504989 100644 --- a/packages/x-codemod/tsconfig.json +++ b/packages/x-codemod/tsconfig.json @@ -6,7 +6,7 @@ }, "include": [ "src/**/*", - "../../node_modules/@mui/monorepo/test/utils/initMatchers.ts", + "../../node_modules/@mui/monorepo/packages/test-utils/src/initMatchers.ts", "../../node_modules/@mui/material/themeCssVarsAugmentation", "../../node_modules/date-fns", "../../node_modules/dayjs/plugin/utc.d.ts", diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx index 106790ab40ef4..d5ccf0d64d281 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx @@ -8,7 +8,7 @@ import { describeConformance, fireTouchChangedEvent, userEvent, -} from '@mui/monorepo/test/utils'; +} from '@mui-internal/test-utils'; import { adapterToUse, buildPickerDragInteractions, diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx index de63cb3d2ef43..35d62b9a5d613 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; -import { fireEvent, screen } from '@mui/monorepo/test/utils/createRenderer'; +import { fireEvent, screen } from '@mui-internal/test-utils/createRenderer'; import { expect } from 'chai'; import { createPickerRenderer, stubMatchMedia } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/describes.DateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/describes.DateRangePicker.test.tsx index 75f4c240c23a9..a73fac7a776ae 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/describes.DateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/describes.DateRangePicker.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { describeConformance } from '@mui/monorepo/test/utils'; +import { describeConformance } from '@mui-internal/test-utils'; import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; import { createPickerRenderer, wrapPickerMount } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.test.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.test.tsx index de40a4b2c83fa..9d339f0a5eca9 100644 --- a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.test.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { describeConformance } from '@mui/monorepo/test/utils'; +import { describeConformance } from '@mui-internal/test-utils'; import { DateRangePickerDay, dateRangePickerDayClasses as classes, diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx index 0f56616d9aad9..1ca0d5c508e57 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, fireEvent, userEvent, act, getByRole } from '@mui/monorepo/test/utils'; +import { screen, fireEvent, userEvent, act, getByRole } from '@mui-internal/test-utils'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker'; import { DateRange, LocalizationProvider } from '@mui/x-date-pickers-pro'; diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx index b46a1111e5996..6284ed1070f09 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { describeConformance, screen, userEvent } from '@mui/monorepo/test/utils'; +import { describeConformance, screen, userEvent } from '@mui-internal/test-utils'; import { adapterToUse, createPickerRenderer, diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx index 4228c4d358356..6eaf629f3f2e7 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { screen, userEvent, fireEvent } from '@mui/monorepo/test/utils'; +import { screen, userEvent, fireEvent } from '@mui-internal/test-utils'; import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker'; import { createPickerRenderer, adapterToUse, openPicker } from 'test/utils/pickers'; import { DateRange } from '@mui/x-date-pickers-pro'; diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx index 722c328d02679..622e735e77299 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx @@ -4,7 +4,7 @@ import { screen, userEvent, fireDiscreteEvent, -} from '@mui/monorepo/test/utils'; +} from '@mui-internal/test-utils'; import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker'; import { adapterToUse, diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/tests/MultiInputDateRangeField.conformance.test.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/tests/MultiInputDateRangeField.conformance.test.tsx index 1fd6874768b68..a932e07b69bdf 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/tests/MultiInputDateRangeField.conformance.test.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/tests/MultiInputDateRangeField.conformance.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { describeConformance } from '@mui/monorepo/test/utils'; +import { describeConformance } from '@mui-internal/test-utils'; import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { createPickerRenderer, wrapPickerMount } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/tests/MultiInputDateRangeField.validation.test.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/tests/MultiInputDateRangeField.validation.test.tsx index d974d9889a2c6..56348ce63bb1a 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/tests/MultiInputDateRangeField.validation.test.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/tests/MultiInputDateRangeField.validation.test.tsx @@ -1,5 +1,5 @@ -import { screen } from '@mui/monorepo/test/utils'; -import { fireEvent } from '@mui/monorepo/test/utils/createRenderer'; +import { screen } from '@mui-internal/test-utils'; +import { fireEvent } from '@mui-internal/test-utils/createRenderer'; import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { createPickerRenderer, adapterToUse, describeRangeValidation } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/tests/MultiInputDateTimeRangeField.conformance.test.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/tests/MultiInputDateTimeRangeField.conformance.test.tsx index 42f3a8147ac96..9a94a0f980ce8 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/tests/MultiInputDateTimeRangeField.conformance.test.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/tests/MultiInputDateTimeRangeField.conformance.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { describeConformance } from '@mui/monorepo/test/utils'; +import { describeConformance } from '@mui-internal/test-utils'; import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputDateTimeRangeField'; import { createPickerRenderer, wrapPickerMount } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/tests/MultiInputDateTimeRangeField.validation.test.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/tests/MultiInputDateTimeRangeField.validation.test.tsx index b087c00a7f4b3..d31a5dbcedc31 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/tests/MultiInputDateTimeRangeField.validation.test.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/tests/MultiInputDateTimeRangeField.validation.test.tsx @@ -1,5 +1,5 @@ -import { screen } from '@mui/monorepo/test/utils'; -import { fireEvent } from '@mui/monorepo/test/utils/createRenderer'; +import { screen } from '@mui-internal/test-utils'; +import { fireEvent } from '@mui-internal/test-utils/createRenderer'; import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputDateTimeRangeField'; import { createPickerRenderer, adapterToUse, describeRangeValidation } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/tests/MultiInputTimeRangeField.conformance.test.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/tests/MultiInputTimeRangeField.conformance.test.tsx index 7d2eadc7584eb..dc07dc69f3a07 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/tests/MultiInputTimeRangeField.conformance.test.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/tests/MultiInputTimeRangeField.conformance.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { describeConformance } from '@mui/monorepo/test/utils'; +import { describeConformance } from '@mui-internal/test-utils'; import { MultiInputTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputTimeRangeField'; import { createPickerRenderer, wrapPickerMount } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/tests/MultiInputTimeRangeField.validation.test.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/tests/MultiInputTimeRangeField.validation.test.tsx index e2c332b404387..18980367909e3 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/tests/MultiInputTimeRangeField.validation.test.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/tests/MultiInputTimeRangeField.validation.test.tsx @@ -1,5 +1,5 @@ -import { screen } from '@mui/monorepo/test/utils'; -import { fireEvent } from '@mui/monorepo/test/utils/createRenderer'; +import { screen } from '@mui-internal/test-utils'; +import { fireEvent } from '@mui-internal/test-utils/createRenderer'; import { MultiInputTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputTimeRangeField'; import { createPickerRenderer, adapterToUse, describeRangeValidation } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/describes.SingleInputDateRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/describes.SingleInputDateRangeField.test.tsx index f73f07fc307c1..0a79c9e39c543 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/describes.SingleInputDateRangeField.test.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/describes.SingleInputDateRangeField.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import TextField from '@mui/material/TextField'; -import { describeConformance } from '@mui/monorepo/test/utils'; +import { describeConformance } from '@mui-internal/test-utils'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; import { createPickerRenderer, wrapPickerMount, describeRangeValidation } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx index 3ead609862975..14bd87eff653b 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx @@ -1,7 +1,7 @@ import { expect } from 'chai'; import { spy } from 'sinon'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { userEvent, fireEvent } from '@mui/monorepo/test/utils'; +import { userEvent, fireEvent } from '@mui-internal/test-utils'; import { expectInputValue, describeAdapters } from 'test/utils/pickers'; describe(' - Editing', () => { diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx index c5fd65018455e..063554cf19cc1 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { act, userEvent } from '@mui/monorepo/test/utils'; +import { act, userEvent } from '@mui-internal/test-utils'; import { adapterToUse, buildFieldInteractions, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/tests/describes.SingleInputDateTimeRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/tests/describes.SingleInputDateTimeRangeField.test.tsx index 085e686c5b5fb..6535d00aba2d2 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/tests/describes.SingleInputDateTimeRangeField.test.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/tests/describes.SingleInputDateTimeRangeField.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { describeConformance } from '@mui/monorepo/test/utils'; +import { describeConformance } from '@mui-internal/test-utils'; import { SingleInputDateTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputDateTimeRangeField'; import { createPickerRenderer, wrapPickerMount, describeRangeValidation } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/tests/describes.SingleInputTimeRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/tests/describes.SingleInputTimeRangeField.test.tsx index 109166d8a3072..01d212338c9e6 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/tests/describes.SingleInputTimeRangeField.test.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/tests/describes.SingleInputTimeRangeField.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { describeConformance } from '@mui/monorepo/test/utils'; +import { describeConformance } from '@mui-internal/test-utils'; import { SingleInputTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputTimeRangeField'; import { createPickerRenderer, wrapPickerMount, describeRangeValidation } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx index 080ab8ac58433..b3402d6664b95 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { isWeekend } from 'date-fns'; import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker'; -import { describeConformance, screen } from '@mui/monorepo/test/utils'; +import { describeConformance, screen } from '@mui-internal/test-utils'; import { wrapPickerMount, createPickerRenderer, diff --git a/packages/x-date-pickers-pro/tsconfig.json b/packages/x-date-pickers-pro/tsconfig.json index 75f0e23cefbee..9db9967fdf72a 100644 --- a/packages/x-date-pickers-pro/tsconfig.json +++ b/packages/x-date-pickers-pro/tsconfig.json @@ -7,7 +7,7 @@ "include": [ "src/**/*", "../../test/utils/addChaiAssertions.ts", - "../../node_modules/@mui/monorepo/test/utils/initMatchers.ts", + "../../node_modules/@mui/monorepo/packages/test-utils/src/initMatchers.ts", "../../node_modules/@mui/material/themeCssVarsAugmentation", "../../node_modules/dayjs/plugin/utc.d.ts", "../../node_modules/dayjs/plugin/timezone.d.ts", diff --git a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx index 8d89823291f6c..ae997c105d71a 100644 --- a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx +++ b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; import { AdapterFormats } from '@mui/x-date-pickers/models'; -import { screen } from '@mui/monorepo/test/utils/createRenderer'; +import { screen } from '@mui-internal/test-utils/createRenderer'; import { expect } from 'chai'; import { createPickerRenderer, diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx index c1a49b008e15f..659b57d696726 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx +++ b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali'; -import { screen } from '@mui/monorepo/test/utils/createRenderer'; +import { screen } from '@mui-internal/test-utils/createRenderer'; import { createPickerRenderer, expectInputPlaceholder, diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx index 14bc1b08bac6c..bf10b9c81c512 100644 --- a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx +++ b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx @@ -5,7 +5,7 @@ import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { AdapterFormats } from '@mui/x-date-pickers/models'; -import { screen, userEvent } from '@mui/monorepo/test/utils'; +import { screen, userEvent } from '@mui-internal/test-utils'; import { expect } from 'chai'; import { buildPickerDragInteractions, diff --git a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx index a99bf7695fd0b..c4caf38497374 100644 --- a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx +++ b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx @@ -4,7 +4,7 @@ import { DateTime, Settings } from 'luxon'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon'; import { AdapterFormats } from '@mui/x-date-pickers/models'; -import { screen } from '@mui/monorepo/test/utils/createRenderer'; +import { screen } from '@mui-internal/test-utils/createRenderer'; import { cleanText, createPickerRenderer, diff --git a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx index d49d466042066..c592f25d1cb4b 100644 --- a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx +++ b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx @@ -4,7 +4,7 @@ import momentTZ from 'moment-timezone'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'; import { AdapterFormats } from '@mui/x-date-pickers/models'; -import { screen } from '@mui/monorepo/test/utils/createRenderer'; +import { screen } from '@mui-internal/test-utils/createRenderer'; import { expect } from 'chai'; import { spy } from 'sinon'; import { diff --git a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx index 79156b7b6e1ae..9dd52c850bcf7 100644 --- a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx +++ b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx @@ -4,7 +4,7 @@ import { expect } from 'chai'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { AdapterMomentHijri } from '@mui/x-date-pickers/AdapterMomentHijri'; import { AdapterFormats } from '@mui/x-date-pickers/models'; -import { screen } from '@mui/monorepo/test/utils/createRenderer'; +import { screen } from '@mui-internal/test-utils/createRenderer'; import { createPickerRenderer, expectInputPlaceholder, diff --git a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx index d97fa6ecc51a1..6f66267176c42 100644 --- a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx +++ b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx @@ -4,7 +4,7 @@ import moment from 'moment'; import jMoment from 'moment-jalaali'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { AdapterMomentJalaali } from '@mui/x-date-pickers/AdapterMomentJalaali'; -import { screen } from '@mui/monorepo/test/utils/createRenderer'; +import { screen } from '@mui-internal/test-utils/createRenderer'; import { createPickerRenderer, expectInputPlaceholder, diff --git a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx index ab5acc697f961..b3f59b8078769 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { fireEvent, userEvent, screen } from '@mui/monorepo/test/utils'; +import { fireEvent, userEvent, screen } from '@mui-internal/test-utils'; import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; import { PickersDay } from '@mui/x-date-pickers/PickersDay'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; diff --git a/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx index 0191cc7cd37d5..41135ff7ba10f 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { describeConformance, screen, userEvent } from '@mui/monorepo/test/utils'; +import { describeConformance, screen, userEvent } from '@mui-internal/test-utils'; import { DateCalendar, dateCalendarClasses as classes } from '@mui/x-date-pickers/DateCalendar'; import { pickersDayClasses } from '@mui/x-date-pickers/PickersDay'; import { diff --git a/packages/x-date-pickers/src/DateCalendar/tests/keyboard.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/keyboard.DateCalendar.test.tsx index ff3afd7411208..f562523a5b709 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/keyboard.DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/keyboard.DateCalendar.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { act, fireEvent, screen } from '@mui/monorepo/test/utils'; +import { act, fireEvent, screen } from '@mui-internal/test-utils'; import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; import { adapterToUse, createPickerRenderer } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers/src/DateCalendar/tests/timezone.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/timezone.DateCalendar.test.tsx index 56d73f4afab56..261af345fe218 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/timezone.DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/timezone.DateCalendar.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { userEvent, screen } from '@mui/monorepo/test/utils'; +import { userEvent, screen } from '@mui-internal/test-utils'; import { describeAdapters } from 'test/utils/pickers'; import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; diff --git a/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx index 85cc4d44e7d09..293c07986ba6c 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { screen, fireEvent } from '@mui/monorepo/test/utils'; +import { screen, fireEvent } from '@mui-internal/test-utils'; import { DateCalendar, DateCalendarProps } from '@mui/x-date-pickers/DateCalendar'; import { createPickerRenderer, adapterToUse } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers/src/DateField/tests/describes.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/describes.DateField.test.tsx index 2507bf904081c..4bbb2faf8a1cf 100644 --- a/packages/x-date-pickers/src/DateField/tests/describes.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/describes.DateField.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { describeConformance, userEvent } from '@mui/monorepo/test/utils'; +import { describeConformance, userEvent } from '@mui-internal/test-utils'; import TextField from '@mui/material/TextField'; import { DateField } from '@mui/x-date-pickers/DateField'; import { diff --git a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx index d4a5b87a48ef9..c3238da26d8c4 100644 --- a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { DateField } from '@mui/x-date-pickers/DateField'; -import { act, userEvent, fireEvent } from '@mui/monorepo/test/utils'; +import { act, userEvent, fireEvent } from '@mui-internal/test-utils'; import { expectInputValue, getTextbox, describeAdapters } from 'test/utils/pickers'; describe(' - Editing', () => { diff --git a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx index da57ee886422a..935fb69cce371 100644 --- a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { DateField } from '@mui/x-date-pickers/DateField'; -import { act, userEvent } from '@mui/monorepo/test/utils'; +import { act, userEvent } from '@mui-internal/test-utils'; import { createPickerRenderer, expectInputValue, diff --git a/packages/x-date-pickers/src/DatePicker/tests/DatePicker.test.tsx b/packages/x-date-pickers/src/DatePicker/tests/DatePicker.test.tsx index 378f37c7483dd..01cc75d867352 100644 --- a/packages/x-date-pickers/src/DatePicker/tests/DatePicker.test.tsx +++ b/packages/x-date-pickers/src/DatePicker/tests/DatePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import { screen } from '@mui/monorepo/test/utils/createRenderer'; +import { screen } from '@mui-internal/test-utils/createRenderer'; import { createPickerRenderer, stubMatchMedia } from 'test/utils/pickers'; describe('', () => { diff --git a/packages/x-date-pickers/src/DateTimeField/tests/describes.DateTimeField.test.tsx b/packages/x-date-pickers/src/DateTimeField/tests/describes.DateTimeField.test.tsx index 4d1a36f184793..21dd0dfbdf9ce 100644 --- a/packages/x-date-pickers/src/DateTimeField/tests/describes.DateTimeField.test.tsx +++ b/packages/x-date-pickers/src/DateTimeField/tests/describes.DateTimeField.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import TextField from '@mui/material/TextField'; -import { describeConformance, userEvent } from '@mui/monorepo/test/utils'; +import { describeConformance, userEvent } from '@mui-internal/test-utils'; import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; import { adapterToUse, diff --git a/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx b/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx index 070c0254962d9..99e81989203f4 100644 --- a/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx +++ b/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { userEvent, screen } from '@mui/monorepo/test/utils'; +import { userEvent, screen } from '@mui-internal/test-utils'; import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; import { adapterToUse, buildFieldInteractions, createPickerRenderer } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx b/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx index 8421b0933c8da..330d2b0d73295 100644 --- a/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx +++ b/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { userEvent } from '@mui/monorepo/test/utils'; +import { userEvent } from '@mui-internal/test-utils'; import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; import { createPickerRenderer, diff --git a/packages/x-date-pickers/src/DateTimePicker/tests/DateTimePicker.test.tsx b/packages/x-date-pickers/src/DateTimePicker/tests/DateTimePicker.test.tsx index 63ba1c1099590..cac1fdb4074df 100644 --- a/packages/x-date-pickers/src/DateTimePicker/tests/DateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/tests/DateTimePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; -import { screen } from '@mui/monorepo/test/utils/createRenderer'; +import { screen } from '@mui-internal/test-utils/createRenderer'; import { createPickerRenderer, stubMatchMedia } from 'test/utils/pickers'; describe('', () => { diff --git a/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.test.tsx b/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.test.tsx index 048fe9cad8072..9555f053f31eb 100644 --- a/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.test.tsx +++ b/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { describeConformance } from '@mui/monorepo/test/utils'; +import { describeConformance } from '@mui-internal/test-utils'; import { DayCalendarSkeleton, dayCalendarSkeletonClasses as classes, 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 fc8df6b936811..65c4e340d9b3c 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx @@ -3,7 +3,7 @@ import { expect } from 'chai'; import { spy } from 'sinon'; import { TransitionProps } from '@mui/material/transitions'; import { inputBaseClasses } from '@mui/material/InputBase'; -import { fireEvent, screen, userEvent } from '@mui/monorepo/test/utils'; +import { fireEvent, screen, userEvent } from '@mui-internal/test-utils'; import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'; import { createPickerRenderer, diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx index 114ddde475373..37656e7a8647f 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx @@ -1,4 +1,4 @@ -import { screen, userEvent } from '@mui/monorepo/test/utils'; +import { screen, userEvent } from '@mui-internal/test-utils'; import { createPickerRenderer, adapterToUse, diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx index 19633846c1ba7..fd6944bdaa077 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { fireEvent, userEvent } from '@mui/monorepo/test/utils'; +import { fireEvent, userEvent } from '@mui-internal/test-utils'; import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/x-date-pickers/DesktopDatePicker'; import { createPickerRenderer, diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx index 1e1a87665f10c..bb87dc61066bd 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, userEvent } from '@mui/monorepo/test/utils'; +import { screen, userEvent } from '@mui-internal/test-utils'; import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker'; import { adapterToUse, createPickerRenderer, openPicker } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx index ff5a2bbf48711..25b94f71c33c9 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx @@ -1,4 +1,4 @@ -import { screen, userEvent } from '@mui/monorepo/test/utils'; +import { screen, userEvent } from '@mui-internal/test-utils'; import { createPickerRenderer, adapterToUse, diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx index 3ec04eafc7abc..a98180cffe748 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, userEvent } from '@mui/monorepo/test/utils'; +import { screen, userEvent } from '@mui-internal/test-utils'; import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker'; import { createPickerRenderer, openPicker } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx index fafea603f8610..7ed56f2cf6156 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { screen, userEvent, describeConformance } from '@mui/monorepo/test/utils'; +import { screen, userEvent, describeConformance } from '@mui-internal/test-utils'; import { createPickerRenderer, wrapPickerMount, diff --git a/packages/x-date-pickers/src/DigitalClock/tests/describes.DigitalClock.test.tsx b/packages/x-date-pickers/src/DigitalClock/tests/describes.DigitalClock.test.tsx index 0f2b1fbfcd9a8..32ef3633fe3b4 100644 --- a/packages/x-date-pickers/src/DigitalClock/tests/describes.DigitalClock.test.tsx +++ b/packages/x-date-pickers/src/DigitalClock/tests/describes.DigitalClock.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { screen, describeConformance } from '@mui/monorepo/test/utils'; +import { screen, describeConformance } from '@mui-internal/test-utils'; import { createPickerRenderer, wrapPickerMount, diff --git a/packages/x-date-pickers/src/DigitalClock/tests/timezone.DigitalClock.test.tsx b/packages/x-date-pickers/src/DigitalClock/tests/timezone.DigitalClock.test.tsx index e9543a084d504..50d692bfe6792 100644 --- a/packages/x-date-pickers/src/DigitalClock/tests/timezone.DigitalClock.test.tsx +++ b/packages/x-date-pickers/src/DigitalClock/tests/timezone.DigitalClock.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { screen, userEvent } from '@mui/monorepo/test/utils'; +import { screen, userEvent } from '@mui-internal/test-utils'; import { DigitalClock } from '@mui/x-date-pickers/DigitalClock'; import { getDateOffset, describeAdapters } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.test.tsx b/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.test.tsx index 550589dc372d8..b7120b6f6c0ca 100644 --- a/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.test.tsx +++ b/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { createRenderer } from '@mui/monorepo/test/utils'; +import { createRenderer } from '@mui-internal/test-utils'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import { useLocalizationContext } from '@mui/x-date-pickers/internals'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; diff --git a/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx b/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx index 618299f987e8e..629fff7605d69 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { fireEvent, screen, userEvent } from '@mui/monorepo/test/utils'; +import { fireEvent, screen, userEvent } from '@mui-internal/test-utils'; import { PickersDay } from '@mui/x-date-pickers/PickersDay'; import { DayCalendarSkeleton } from '@mui/x-date-pickers/DayCalendarSkeleton'; import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker'; diff --git a/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx b/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx index 8c27d3fe3dbd1..68411cd23471c 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx @@ -1,4 +1,4 @@ -import { screen, userEvent } from '@mui/monorepo/test/utils'; +import { screen, userEvent } from '@mui-internal/test-utils'; import { createPickerRenderer, adapterToUse, diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx index 98116ef31ad30..bf6301ebee725 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import TextField from '@mui/material/TextField'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { fireTouchChangedEvent, screen, userEvent } from '@mui/monorepo/test/utils'; +import { fireTouchChangedEvent, screen, userEvent } from '@mui-internal/test-utils'; import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker'; import { adapterToUse, diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx index 7995c5b965712..21a60e4d696ac 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx @@ -1,4 +1,4 @@ -import { screen, userEvent, fireTouchChangedEvent } from '@mui/monorepo/test/utils'; +import { screen, userEvent, fireTouchChangedEvent } from '@mui-internal/test-utils'; import { createPickerRenderer, adapterToUse, diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx index f278b9276bcf0..c8b8f27746285 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { fireTouchChangedEvent, screen, userEvent, act } from '@mui/monorepo/test/utils'; +import { fireTouchChangedEvent, screen, userEvent, act } from '@mui-internal/test-utils'; import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker'; import { createPickerRenderer, diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx index 84c88ed82ee84..4ea3654013c26 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx @@ -4,7 +4,7 @@ import { screen, userEvent, fireTouchChangedEvent, -} from '@mui/monorepo/test/utils'; +} from '@mui-internal/test-utils'; import { createPickerRenderer, wrapPickerMount, diff --git a/packages/x-date-pickers/src/MonthCalendar/tests/MonthCalendar.test.tsx b/packages/x-date-pickers/src/MonthCalendar/tests/MonthCalendar.test.tsx index a7ad330898331..398e6c51f78b2 100644 --- a/packages/x-date-pickers/src/MonthCalendar/tests/MonthCalendar.test.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/tests/MonthCalendar.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { fireEvent, screen } from '@mui/monorepo/test/utils'; +import { fireEvent, screen } from '@mui-internal/test-utils'; import { MonthCalendar } from '@mui/x-date-pickers/MonthCalendar'; import { createPickerRenderer, adapterToUse } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx b/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx index 01591f6c82de0..89ddd554b862e 100644 --- a/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { describeConformance, userEvent, screen } from '@mui/monorepo/test/utils'; +import { describeConformance, userEvent, screen } from '@mui-internal/test-utils'; import { wrapPickerMount, createPickerRenderer, diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/describes.MultiSectionDigitalClock.test.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/describes.MultiSectionDigitalClock.test.tsx index 4210a53a3fea0..2cfd9786188ff 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/describes.MultiSectionDigitalClock.test.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/describes.MultiSectionDigitalClock.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { screen, describeConformance } from '@mui/monorepo/test/utils'; +import { screen, describeConformance } from '@mui-internal/test-utils'; import { createPickerRenderer, wrapPickerMount, diff --git a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx index 60b1fb41f9d79..066f60e07b489 100644 --- a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx +++ b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, userEvent } from '@mui/monorepo/test/utils'; +import { screen, userEvent } from '@mui-internal/test-utils'; import { PickersActionBar } from '@mui/x-date-pickers/PickersActionBar'; import { createPickerRenderer } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers/src/PickersDay/PickersDay.test.tsx b/packages/x-date-pickers/src/PickersDay/PickersDay.test.tsx index aa01c26312a65..c7d516e730921 100644 --- a/packages/x-date-pickers/src/PickersDay/PickersDay.test.tsx +++ b/packages/x-date-pickers/src/PickersDay/PickersDay.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { describeConformance, fireEvent, screen } from '@mui/monorepo/test/utils'; +import { describeConformance, fireEvent, screen } from '@mui-internal/test-utils'; import ButtonBase from '@mui/material/ButtonBase'; import { PickersDay, pickersDayClasses as classes } from '@mui/x-date-pickers/PickersDay'; import { adapterToUse, wrapPickerMount, createPickerRenderer } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers/src/StaticDatePicker/tests/StaticDatePicker.test.tsx b/packages/x-date-pickers/src/StaticDatePicker/tests/StaticDatePicker.test.tsx index a4162257d2db9..307da572d4e08 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/tests/StaticDatePicker.test.tsx +++ b/packages/x-date-pickers/src/StaticDatePicker/tests/StaticDatePicker.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { fireEvent, screen } from '@mui/monorepo/test/utils'; +import { fireEvent, screen } from '@mui-internal/test-utils'; import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'; import { createPickerRenderer, adapterToUse } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers/src/StaticDatePicker/tests/StaticDatePickerKeyboard.test.tsx b/packages/x-date-pickers/src/StaticDatePicker/tests/StaticDatePickerKeyboard.test.tsx index 10600e40e0941..779db5f95e102 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/tests/StaticDatePickerKeyboard.test.tsx +++ b/packages/x-date-pickers/src/StaticDatePicker/tests/StaticDatePickerKeyboard.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { act, fireEvent, screen } from '@mui/monorepo/test/utils'; +import { act, fireEvent, screen } from '@mui-internal/test-utils'; import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'; import { DateView } from '@mui/x-date-pickers/models'; import { createPickerRenderer, adapterToUse } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/tests/StaticDateTimePicker.test.tsx b/packages/x-date-pickers/src/StaticDateTimePicker/tests/StaticDateTimePicker.test.tsx index d88b9df429f29..2a78e406fb593 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/tests/StaticDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/StaticDateTimePicker/tests/StaticDateTimePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { fireEvent, screen } from '@mui/monorepo/test/utils'; +import { fireEvent, screen } from '@mui-internal/test-utils'; import { StaticDateTimePicker } from '@mui/x-date-pickers/StaticDateTimePicker'; import { createPickerRenderer, adapterToUse } from 'test/utils/pickers'; import { DateTimePickerTabs, DateTimePickerTabsProps } from '../../DateTimePicker'; diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx index b84dd15abc08c..28d9f536650d4 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx @@ -7,7 +7,7 @@ import { screen, getAllByRole, fireEvent, -} from '@mui/monorepo/test/utils'; +} from '@mui-internal/test-utils'; import { adapterToUse, wrapPickerMount, diff --git a/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx b/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx index e2221b91cbe04..aeb95cd302a91 100644 --- a/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx +++ b/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx @@ -7,7 +7,7 @@ import { screen, within, getAllByRole, -} from '@mui/monorepo/test/utils'; +} from '@mui-internal/test-utils'; import { TimeClock } from '@mui/x-date-pickers/TimeClock'; import { createPickerRenderer, adapterToUse, timeClockHandler } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers/src/TimeClock/tests/describes.TimeClock.test.tsx b/packages/x-date-pickers/src/TimeClock/tests/describes.TimeClock.test.tsx index 2f203dc27d0cd..52a53102831aa 100644 --- a/packages/x-date-pickers/src/TimeClock/tests/describes.TimeClock.test.tsx +++ b/packages/x-date-pickers/src/TimeClock/tests/describes.TimeClock.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { describeConformance, screen } from '@mui/monorepo/test/utils'; +import { describeConformance, screen } from '@mui-internal/test-utils'; import { clockPointerClasses, TimeClock, diff --git a/packages/x-date-pickers/src/TimeClock/tests/timezone.TimeClock.test.tsx b/packages/x-date-pickers/src/TimeClock/tests/timezone.TimeClock.test.tsx index ae969850df266..0ef7ac322471a 100644 --- a/packages/x-date-pickers/src/TimeClock/tests/timezone.TimeClock.test.tsx +++ b/packages/x-date-pickers/src/TimeClock/tests/timezone.TimeClock.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { screen, fireTouchChangedEvent } from '@mui/monorepo/test/utils'; +import { screen, fireTouchChangedEvent } from '@mui-internal/test-utils'; import { TimeClock } from '@mui/x-date-pickers/TimeClock'; import { getClockTouchEvent, diff --git a/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx b/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx index 9836fd9dcdbd7..f114972a5fb5d 100644 --- a/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx +++ b/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx @@ -1,4 +1,4 @@ -import { userEvent } from '@mui/monorepo/test/utils'; +import { userEvent } from '@mui-internal/test-utils'; import { adapterToUse, createPickerRenderer, diff --git a/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx b/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx index bbef59c8c23e7..140a5af79d94b 100644 --- a/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx +++ b/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx @@ -1,7 +1,7 @@ import { expect } from 'chai'; import { spy } from 'sinon'; import { TimeField } from '@mui/x-date-pickers/TimeField'; -import { userEvent, fireEvent } from '@mui/monorepo/test/utils'; +import { userEvent, fireEvent } from '@mui-internal/test-utils'; import { expectInputValue, getCleanedSelectedContent, describeAdapters } from 'test/utils/pickers'; describe(' - Editing', () => { diff --git a/packages/x-date-pickers/src/TimePicker/tests/TimePicker.test.tsx b/packages/x-date-pickers/src/TimePicker/tests/TimePicker.test.tsx index be3374130f24d..902c910ddcf55 100644 --- a/packages/x-date-pickers/src/TimePicker/tests/TimePicker.test.tsx +++ b/packages/x-date-pickers/src/TimePicker/tests/TimePicker.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { TimePicker } from '@mui/x-date-pickers/TimePicker'; -import { screen } from '@mui/monorepo/test/utils/createRenderer'; +import { screen } from '@mui-internal/test-utils/createRenderer'; import { expect } from 'chai'; import { createPickerRenderer, stubMatchMedia } from 'test/utils/pickers'; 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 d9269ddb04842..3d979bd7f2ce8 100644 --- a/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx +++ b/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { act, fireEvent, screen } from '@mui/monorepo/test/utils'; +import { act, fireEvent, screen } from '@mui-internal/test-utils'; import { YearCalendar } from '@mui/x-date-pickers/YearCalendar'; import { createPickerRenderer, adapterToUse } from 'test/utils/pickers'; diff --git a/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx b/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx index 5ccdc819d33c3..7aaf18d0752a0 100644 --- a/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx +++ b/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { userEvent, screen, describeConformance } from '@mui/monorepo/test/utils'; +import { userEvent, screen, describeConformance } from '@mui-internal/test-utils'; import { pickersYearClasses, YearCalendar, diff --git a/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx b/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx index 741399ada2108..c737504a1e8b8 100644 --- a/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx +++ b/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import moment from 'moment/moment'; import jMoment from 'moment-jalaali'; -import { userEvent } from '@mui/monorepo/test/utils'; +import { userEvent } from '@mui-internal/test-utils'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import { buildFieldInteractions, diff --git a/packages/x-date-pickers/tsconfig.json b/packages/x-date-pickers/tsconfig.json index 75f0e23cefbee..9db9967fdf72a 100644 --- a/packages/x-date-pickers/tsconfig.json +++ b/packages/x-date-pickers/tsconfig.json @@ -7,7 +7,7 @@ "include": [ "src/**/*", "../../test/utils/addChaiAssertions.ts", - "../../node_modules/@mui/monorepo/test/utils/initMatchers.ts", + "../../node_modules/@mui/monorepo/packages/test-utils/src/initMatchers.ts", "../../node_modules/@mui/material/themeCssVarsAugmentation", "../../node_modules/dayjs/plugin/utc.d.ts", "../../node_modules/dayjs/plugin/timezone.d.ts", diff --git a/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx b/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx index 9a84aecc97315..3b7c24e4534b0 100644 --- a/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx +++ b/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { createRenderer, screen } from '@mui/monorepo/test/utils'; +import { createRenderer, screen } from '@mui-internal/test-utils'; import { useLicenseVerifier, LicenseInfo, diff --git a/packages/x-license-pro/tsconfig.json b/packages/x-license-pro/tsconfig.json index 16bd9c3be1b6a..6a8e1ed5b14fc 100644 --- a/packages/x-license-pro/tsconfig.json +++ b/packages/x-license-pro/tsconfig.json @@ -6,7 +6,7 @@ "include": [ "src/**/*", "../../test/utils/addChaiAssertions.ts", - "../../node_modules/@mui/monorepo/test/utils/initMatchers.ts", + "../../node_modules/@mui/monorepo/packages/test-utils/src/initMatchers.ts", "../../node_modules/@mui/material/themeCssVarsAugmentation" ] } diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx index 26a5749d71bee..da7a2a2f26462 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx @@ -9,7 +9,7 @@ import { createRenderer, fireEvent, screen, -} from '@mui/monorepo/test/utils'; +} from '@mui-internal/test-utils'; import { TreeView } from '@mui/x-tree-view/TreeView'; import { TreeItem, treeItemClasses as classes } from '@mui/x-tree-view/TreeItem'; diff --git a/packages/x-tree-view/src/TreeView/TreeView.test.tsx b/packages/x-tree-view/src/TreeView/TreeView.test.tsx index bf31525e504b3..2ada3feaa24e4 100644 --- a/packages/x-tree-view/src/TreeView/TreeView.test.tsx +++ b/packages/x-tree-view/src/TreeView/TreeView.test.tsx @@ -8,7 +8,7 @@ import { fireEvent, screen, describeConformance, -} from '@mui/monorepo/test/utils'; +} from '@mui-internal/test-utils'; import Portal from '@mui/material/Portal'; import { TreeView, treeViewClasses as classes } from '@mui/x-tree-view/TreeView'; import { TreeItem } from '@mui/x-tree-view/TreeItem'; diff --git a/packages/x-tree-view/tsconfig.json b/packages/x-tree-view/tsconfig.json index 05b4710dac129..b615deabf7972 100644 --- a/packages/x-tree-view/tsconfig.json +++ b/packages/x-tree-view/tsconfig.json @@ -7,7 +7,7 @@ "include": [ "src/**/*", "../../test/utils/addChaiAssertions.ts", - "../../node_modules/@mui/monorepo/test/utils/initMatchers.ts", + "../../node_modules/@mui/monorepo/packages/test-utils/src/initMatchers.ts", "../../node_modules/@mui/material/themeCssVarsAugmentation" ] } diff --git a/test/karma.tests.js b/test/karma.tests.js index a3e1363088440..c701b7a5916de 100644 --- a/test/karma.tests.js +++ b/test/karma.tests.js @@ -1,5 +1,5 @@ /* eslint-env mocha */ -import '@mui/monorepo/test/utils/setupKarma'; +import '@mui-internal/test-utils/setupKarma'; import './utils/init'; import { createXMochaHooks } from './utils/mochaHooks'; diff --git a/test/utils/helperFn.ts b/test/utils/helperFn.ts index c0b808493e253..0c72d6fcc4212 100644 --- a/test/utils/helperFn.ts +++ b/test/utils/helperFn.ts @@ -1,5 +1,5 @@ import { spy } from 'sinon'; -import { act } from '@mui/monorepo/test/utils'; +import { act } from '@mui-internal/test-utils'; import { unwrapPrivateAPI } from '@mui/x-data-grid/internals'; import type { GridApiCommon } from '@mui/x-data-grid/models/api/gridApiCommon'; diff --git a/test/utils/init.ts b/test/utils/init.ts index 59ebefd4b81c1..9691ca052c837 100644 --- a/test/utils/init.ts +++ b/test/utils/init.ts @@ -1,4 +1,4 @@ -import '@mui/monorepo/test/utils/init'; +import '@mui-internal/test-utils/init'; import './licenseRelease'; import './addChaiAssertions'; import './setupPickers'; diff --git a/test/utils/pickers/calendar.ts b/test/utils/pickers/calendar.ts index 5074cf9f9d910..00d90d8d50595 100644 --- a/test/utils/pickers/calendar.ts +++ b/test/utils/pickers/calendar.ts @@ -1,4 +1,4 @@ -import { fireEvent, createEvent } from '@mui/monorepo/test/utils'; +import { fireEvent, createEvent } from '@mui-internal/test-utils'; export const rangeCalendarDayTouches = { '2018-01-01': { diff --git a/test/utils/pickers/clock.ts b/test/utils/pickers/clock.ts index e14c7cdad5fa4..c2f00bcc1f3a8 100644 --- a/test/utils/pickers/clock.ts +++ b/test/utils/pickers/clock.ts @@ -1,6 +1,6 @@ import { CLOCK_WIDTH } from '@mui/x-date-pickers/TimeClock/shared'; import { clockPointerClasses } from '@mui/x-date-pickers/TimeClock'; -import { screen } from '@mui/monorepo/test/utils'; +import { screen } from '@mui-internal/test-utils'; export const getClockTouchEvent = ( value: number | string, diff --git a/test/utils/pickers/createPickerRenderer.tsx b/test/utils/pickers/createPickerRenderer.tsx index 16c7b5f5d2ae6..7d13e994f8cd6 100644 --- a/test/utils/pickers/createPickerRenderer.tsx +++ b/test/utils/pickers/createPickerRenderer.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { createRenderer, CreateRendererOptions, RenderOptions } from '@mui/monorepo/test/utils'; +import { createRenderer, CreateRendererOptions, RenderOptions } from '@mui-internal/test-utils'; import { AdapterClassToUse, AdapterName, adapterToUse, availableAdapters } from './adapters'; interface CreatePickerRendererOptions extends CreateRendererOptions { diff --git a/test/utils/pickers/describeAdapters/describeAdapters.ts b/test/utils/pickers/describeAdapters/describeAdapters.ts index 432587949b4f3..c60e409274563 100644 --- a/test/utils/pickers/describeAdapters/describeAdapters.ts +++ b/test/utils/pickers/describeAdapters/describeAdapters.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import moment from 'moment'; import momentTZ from 'moment-timezone'; -import createDescribe from '@mui/monorepo/test/utils/createDescribe'; +import createDescribe from '@mui-internal/test-utils/createDescribe'; import { AdapterName, buildFieldInteractions, diff --git a/test/utils/pickers/describeGregorianAdapter/describeGregorianAdapter.ts b/test/utils/pickers/describeGregorianAdapter/describeGregorianAdapter.ts index 2f6d7ed0e3b2c..bf658a29826ed 100644 --- a/test/utils/pickers/describeGregorianAdapter/describeGregorianAdapter.ts +++ b/test/utils/pickers/describeGregorianAdapter/describeGregorianAdapter.ts @@ -1,4 +1,4 @@ -import createDescribe from '@mui/monorepo/test/utils/createDescribe'; +import createDescribe from '@mui-internal/test-utils/createDescribe'; import { MuiPickersAdapter } from '@mui/x-date-pickers'; import { testCalculations } from './testCalculations'; import { testLocalization } from './testLocalization'; diff --git a/test/utils/pickers/describeHijriAdapter/describeHijriAdapter.ts b/test/utils/pickers/describeHijriAdapter/describeHijriAdapter.ts index 199c178b0ad12..4aacc9ced531c 100644 --- a/test/utils/pickers/describeHijriAdapter/describeHijriAdapter.ts +++ b/test/utils/pickers/describeHijriAdapter/describeHijriAdapter.ts @@ -1,4 +1,4 @@ -import createDescribe from '@mui/monorepo/test/utils/createDescribe'; +import createDescribe from '@mui-internal/test-utils/createDescribe'; import { MuiPickersAdapter } from '@mui/x-date-pickers'; import { testCalculations } from './testCalculations'; import { testLocalization } from './testLocalization'; diff --git a/test/utils/pickers/describeJalaliAdapter/describeJalaliAdapter.ts b/test/utils/pickers/describeJalaliAdapter/describeJalaliAdapter.ts index fd7b4edd223f8..a1e7112457970 100644 --- a/test/utils/pickers/describeJalaliAdapter/describeJalaliAdapter.ts +++ b/test/utils/pickers/describeJalaliAdapter/describeJalaliAdapter.ts @@ -1,4 +1,4 @@ -import createDescribe from '@mui/monorepo/test/utils/createDescribe'; +import createDescribe from '@mui-internal/test-utils/createDescribe'; import { MuiPickersAdapter } from '@mui/x-date-pickers'; import { testCalculations } from './testCalculations'; import { testLocalization } from './testLocalization'; diff --git a/test/utils/pickers/describePicker/describePicker.tsx b/test/utils/pickers/describePicker/describePicker.tsx index 418b003a4cea3..d535c1140844d 100644 --- a/test/utils/pickers/describePicker/describePicker.tsx +++ b/test/utils/pickers/describePicker/describePicker.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, fireEvent, createDescribe } from '@mui/monorepo/test/utils'; +import { screen, fireEvent, createDescribe } from '@mui-internal/test-utils'; import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; import { DescribePickerOptions } from './describePicker.types'; diff --git a/test/utils/pickers/describePicker/describePicker.types.ts b/test/utils/pickers/describePicker/describePicker.types.ts index 8b6beec38800f..0d620ec32abc8 100644 --- a/test/utils/pickers/describePicker/describePicker.types.ts +++ b/test/utils/pickers/describePicker/describePicker.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { MuiRenderResult } from '@mui/monorepo/test/utils/createRenderer'; +import { MuiRenderResult } from '@mui-internal/test-utils/createRenderer'; export interface DescribePickerOptions { fieldType: 'single-input' | 'multi-input'; diff --git a/test/utils/pickers/describeRangeValidation/describeRangeValidation.tsx b/test/utils/pickers/describeRangeValidation/describeRangeValidation.tsx index 0220265975d02..c54414e161f6c 100644 --- a/test/utils/pickers/describeRangeValidation/describeRangeValidation.tsx +++ b/test/utils/pickers/describeRangeValidation/describeRangeValidation.tsx @@ -1,6 +1,6 @@ /* eslint-env mocha */ import * as React from 'react'; -import createDescribe from '@mui/monorepo/test/utils/createDescribe'; +import createDescribe from '@mui-internal/test-utils/createDescribe'; import { testDayViewRangeValidation } from './testDayViewRangeValidation'; import { testTextFieldRangeValidation } from './testTextFieldRangeValidation'; import { DescribeRangeValidationInputOptions } from './describeRangeValidation.types'; diff --git a/test/utils/pickers/describeRangeValidation/testDayViewRangeValidation.tsx b/test/utils/pickers/describeRangeValidation/testDayViewRangeValidation.tsx index 32c43da0f63a1..febd79849cb48 100644 --- a/test/utils/pickers/describeRangeValidation/testDayViewRangeValidation.tsx +++ b/test/utils/pickers/describeRangeValidation/testDayViewRangeValidation.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { screen } from '@mui/monorepo/test/utils'; +import { screen } from '@mui-internal/test-utils'; import { adapterToUse } from 'test/utils/pickers'; const isDisable = (el: HTMLElement) => el.getAttribute('disabled') !== null; diff --git a/test/utils/pickers/describeRangeValidation/testTextFieldKeyboardRangeValidation.tsx b/test/utils/pickers/describeRangeValidation/testTextFieldKeyboardRangeValidation.tsx index 8224126c8b495..3399602ea1db2 100644 --- a/test/utils/pickers/describeRangeValidation/testTextFieldKeyboardRangeValidation.tsx +++ b/test/utils/pickers/describeRangeValidation/testTextFieldKeyboardRangeValidation.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen } from '@mui/monorepo/test/utils'; +import { screen } from '@mui-internal/test-utils'; import { adapterToUse } from 'test/utils/pickers'; -import { act } from '@mui/monorepo/test/utils/createRenderer'; +import { act } from '@mui-internal/test-utils/createRenderer'; import { DescribeRangeValidationTestSuite } from './describeRangeValidation.types'; const testInvalidStatus = (expectedAnswer: boolean[], isSingleInput?: boolean) => { diff --git a/test/utils/pickers/describeRangeValidation/testTextFieldRangeValidation.tsx b/test/utils/pickers/describeRangeValidation/testTextFieldRangeValidation.tsx index b550ed40efa1b..83a2844b4cc77 100644 --- a/test/utils/pickers/describeRangeValidation/testTextFieldRangeValidation.tsx +++ b/test/utils/pickers/describeRangeValidation/testTextFieldRangeValidation.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen } from '@mui/monorepo/test/utils'; +import { screen } from '@mui-internal/test-utils'; import { adapterToUse } from 'test/utils/pickers'; import { DescribeRangeValidationTestSuite } from './describeRangeValidation.types'; diff --git a/test/utils/pickers/describeValidation/describeValidation.ts b/test/utils/pickers/describeValidation/describeValidation.ts index 24c37acbda448..2804f418ee9cc 100644 --- a/test/utils/pickers/describeValidation/describeValidation.ts +++ b/test/utils/pickers/describeValidation/describeValidation.ts @@ -1,6 +1,6 @@ /* eslint-env mocha */ import * as React from 'react'; -import createDescribe from '@mui/monorepo/test/utils/createDescribe'; +import createDescribe from '@mui-internal/test-utils/createDescribe'; import { testDayViewValidation } from './testDayViewValidation'; import { testMonthViewValidation } from './testMonthViewValidation'; import { testTextFieldValidation } from './testTextFieldValidation'; diff --git a/test/utils/pickers/describeValidation/describeValidation.types.ts b/test/utils/pickers/describeValidation/describeValidation.types.ts index 49c5a59557baf..8c6c60dea047f 100644 --- a/test/utils/pickers/describeValidation/describeValidation.types.ts +++ b/test/utils/pickers/describeValidation/describeValidation.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { MuiRenderResult, createRenderer } from '@mui/monorepo/test/utils/createRenderer'; +import { MuiRenderResult, createRenderer } from '@mui-internal/test-utils/createRenderer'; import { DateOrTimeView } from '@mui/x-date-pickers/models'; import { PickerComponentFamily } from '../describe.types'; diff --git a/test/utils/pickers/describeValidation/testDayViewValidation.tsx b/test/utils/pickers/describeValidation/testDayViewValidation.tsx index 30bd53274706c..074e32fa6c3c1 100644 --- a/test/utils/pickers/describeValidation/testDayViewValidation.tsx +++ b/test/utils/pickers/describeValidation/testDayViewValidation.tsx @@ -1,6 +1,6 @@ import { expect } from 'chai'; import * as React from 'react'; -import { screen } from '@mui/monorepo/test/utils'; +import { screen } from '@mui-internal/test-utils'; import { adapterToUse } from 'test/utils/pickers'; import { DescribeValidationTestSuite } from './describeValidation.types'; diff --git a/test/utils/pickers/describeValidation/testMinutesViewValidation.tsx b/test/utils/pickers/describeValidation/testMinutesViewValidation.tsx index 647b609530c45..0bd0a4d01cbe5 100644 --- a/test/utils/pickers/describeValidation/testMinutesViewValidation.tsx +++ b/test/utils/pickers/describeValidation/testMinutesViewValidation.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { screen } from '@mui/monorepo/test/utils'; +import { screen } from '@mui-internal/test-utils'; import { adapterToUse } from 'test/utils/pickers'; import { DescribeValidationTestSuite } from './describeValidation.types'; diff --git a/test/utils/pickers/describeValidation/testMonthViewValidation.tsx b/test/utils/pickers/describeValidation/testMonthViewValidation.tsx index 31df27359c558..1e7896e371fb6 100644 --- a/test/utils/pickers/describeValidation/testMonthViewValidation.tsx +++ b/test/utils/pickers/describeValidation/testMonthViewValidation.tsx @@ -1,6 +1,6 @@ import { expect } from 'chai'; import * as React from 'react'; -import { screen } from '@mui/monorepo/test/utils'; +import { screen } from '@mui-internal/test-utils'; import { adapterToUse } from 'test/utils/pickers'; import { DescribeValidationTestSuite } from './describeValidation.types'; diff --git a/test/utils/pickers/describeValidation/testTextFieldValidation.tsx b/test/utils/pickers/describeValidation/testTextFieldValidation.tsx index 432b2ef51b6f8..15557750bd2f8 100644 --- a/test/utils/pickers/describeValidation/testTextFieldValidation.tsx +++ b/test/utils/pickers/describeValidation/testTextFieldValidation.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen } from '@mui/monorepo/test/utils'; +import { screen } from '@mui-internal/test-utils'; import { TimeView } from '@mui/x-date-pickers/models'; import { adapterToUse } from 'test/utils/pickers'; import { DescribeValidationTestSuite } from './describeValidation.types'; diff --git a/test/utils/pickers/describeValidation/testYearViewValidation.tsx b/test/utils/pickers/describeValidation/testYearViewValidation.tsx index d5f9e647e41f9..4e94df8f10192 100644 --- a/test/utils/pickers/describeValidation/testYearViewValidation.tsx +++ b/test/utils/pickers/describeValidation/testYearViewValidation.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { screen } from '@mui/monorepo/test/utils'; +import { screen } from '@mui-internal/test-utils'; import { adapterToUse } from 'test/utils/pickers'; import { DescribeValidationTestSuite } from './describeValidation.types'; diff --git a/test/utils/pickers/describeValue/describeValue.tsx b/test/utils/pickers/describeValue/describeValue.tsx index 9c371cc03922f..bf4e8f4240ccb 100644 --- a/test/utils/pickers/describeValue/describeValue.tsx +++ b/test/utils/pickers/describeValue/describeValue.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import createDescribe from '@mui/monorepo/test/utils/createDescribe'; +import createDescribe from '@mui-internal/test-utils/createDescribe'; import { BasePickerInputProps, UsePickerValueNonStaticProps } from '@mui/x-date-pickers/internals'; import { FieldSection } from '@mui/x-date-pickers/models'; import { buildFieldInteractions, BuildFieldInteractionsResponse } from 'test/utils/pickers'; diff --git a/test/utils/pickers/describeValue/describeValue.types.ts b/test/utils/pickers/describeValue/describeValue.types.ts index f7eef83e131bc..b728d5a61cf99 100644 --- a/test/utils/pickers/describeValue/describeValue.types.ts +++ b/test/utils/pickers/describeValue/describeValue.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, MuiRenderResult } from '@mui/monorepo/test/utils/createRenderer'; +import { createRenderer, MuiRenderResult } from '@mui-internal/test-utils/createRenderer'; import { BuildFieldInteractionsResponse, FieldSectionSelector, diff --git a/test/utils/pickers/describeValue/testControlledUnControlled.tsx b/test/utils/pickers/describeValue/testControlledUnControlled.tsx index b7d7be538fc51..70a04814db846 100644 --- a/test/utils/pickers/describeValue/testControlledUnControlled.tsx +++ b/test/utils/pickers/describeValue/testControlledUnControlled.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, act, userEvent } from '@mui/monorepo/test/utils'; +import { screen, act, userEvent } from '@mui-internal/test-utils'; import { inputBaseClasses } from '@mui/material/InputBase'; import { getExpectedOnChangeCount } from 'test/utils/pickers'; import { DescribeValueOptions, DescribeValueTestSuite } from './describeValue.types'; diff --git a/test/utils/pickers/describeValue/testPickerActionBar.tsx b/test/utils/pickers/describeValue/testPickerActionBar.tsx index 225692e064d12..cf47839de4d2f 100644 --- a/test/utils/pickers/describeValue/testPickerActionBar.tsx +++ b/test/utils/pickers/describeValue/testPickerActionBar.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, userEvent } from '@mui/monorepo/test/utils'; +import { screen, userEvent } from '@mui-internal/test-utils'; import { adapterToUse, getExpectedOnChangeCount, diff --git a/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx b/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx index 4ca193922b13b..ee4810988742f 100644 --- a/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx +++ b/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, userEvent } from '@mui/monorepo/test/utils'; +import { screen, userEvent } from '@mui-internal/test-utils'; import { getExpectedOnChangeCount, getTextbox, openPicker } from 'test/utils/pickers'; import { DescribeValueTestSuite } from './describeValue.types'; diff --git a/test/utils/pickers/describeValue/testShortcuts.tsx b/test/utils/pickers/describeValue/testShortcuts.tsx index e3e5fad5b77f3..bf19d543468e0 100644 --- a/test/utils/pickers/describeValue/testShortcuts.tsx +++ b/test/utils/pickers/describeValue/testShortcuts.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { expectPickerChangeHandlerValue } from 'test/utils/pickers'; -import { userEvent, screen } from '@mui/monorepo/test/utils'; +import { userEvent, screen } from '@mui-internal/test-utils'; import { DescribeValueTestSuite } from './describeValue.types'; export const testShortcuts: DescribeValueTestSuite = (ElementToTest, options) => { diff --git a/test/utils/pickers/fields.tsx b/test/utils/pickers/fields.tsx index af0004e863625..cc09f19724fa5 100644 --- a/test/utils/pickers/fields.tsx +++ b/test/utils/pickers/fields.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, screen, userEvent, act, fireEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, screen, userEvent, act, fireEvent } from '@mui-internal/test-utils'; import { FieldRef, FieldSection, FieldSectionType } from '@mui/x-date-pickers/models'; import { expectInputValue } from './assertions'; diff --git a/test/utils/pickers/openPicker.ts b/test/utils/pickers/openPicker.ts index 831c923055826..acda78eb35bcc 100644 --- a/test/utils/pickers/openPicker.ts +++ b/test/utils/pickers/openPicker.ts @@ -1,4 +1,4 @@ -import { screen, userEvent } from '@mui/monorepo/test/utils'; +import { screen, userEvent } from '@mui-internal/test-utils'; export type OpenPickerParams = | { diff --git a/test/utils/pickers/viewHandlers.ts b/test/utils/pickers/viewHandlers.ts index 0546a06f5b506..0496eab0ef774 100644 --- a/test/utils/pickers/viewHandlers.ts +++ b/test/utils/pickers/viewHandlers.ts @@ -1,4 +1,4 @@ -import { fireTouchChangedEvent, userEvent, screen } from '@mui/monorepo/test/utils'; +import { fireTouchChangedEvent, userEvent, screen } from '@mui-internal/test-utils'; import { getClockTouchEvent } from 'test/utils/pickers'; import { MuiPickersAdapter, TimeView } from '@mui/x-date-pickers/models'; import { formatMeridiem } from '@mui/x-date-pickers/internals/utils/date-utils'; diff --git a/test/utils/setupJSDOM.js b/test/utils/setupJSDOM.js index 9f17daa80826a..c99ab9ee34078 100644 --- a/test/utils/setupJSDOM.js +++ b/test/utils/setupJSDOM.js @@ -1,4 +1,5 @@ -const coreExports = require('@mui/monorepo/test/utils/setupJSDOM'); +const coreExports = require('@mui-internal/test-utils/setupJSDOM'); + require('./licenseRelease'); require('./addChaiAssertions'); require('./setupPickers'); diff --git a/tsconfig.json b/tsconfig.json index 1473b721f37f6..d31ee09a62133 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -26,6 +26,8 @@ "@mui/x-tree-view/*": ["./packages/x-tree-view/src/*"], "@mui/x-license-pro": ["./packages/x-license-pro/src"], "@mui/x-license-pro/*": ["./packages/x-license-pro/src/*"], + "@mui-internal/test-utils": ["./node_modules/@mui/monorepo/packages/test-utils/src"], + "@mui-internal/test-utils/*": ["./node_modules/@mui/monorepo/packages/test-utils/src/*"], "test/*": ["./test/*"], "docs/*": ["./node_modules/@mui/monorepo/docs"], "docsx/*": ["./docs/*"] diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index 6426167f47fd3..6720867f6ae14 100644 --- a/webpackBaseConfig.js +++ b/webpackBaseConfig.js @@ -23,6 +23,10 @@ module.exports = { '@mui/x-tree-view': path.resolve(__dirname, './packages/x-tree-view/src'), '@mui/x-license-pro': path.resolve(__dirname, './packages/x-license-pro/src'), '@mui/markdown': path.resolve(__dirname, './node_modules/@mui/monorepo/packages/markdown'), + '@mui-internal/test-utils': path.resolve( + __dirname, + './node_modules/@mui/monorepo/packages/test-utils/src', + ), docs: path.resolve(__dirname, './node_modules/@mui/monorepo/docs'), docsx: path.resolve(__dirname, './docs'), }, diff --git a/yarn.lock b/yarn.lock index 26c8984226e45..6f98e9e85a731 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1877,8 +1877,8 @@ react-transition-group "^4.4.5" "@mui/monorepo@https://github.com/mui/material-ui.git#master": - version "5.14.10" - resolved "https://github.com/mui/material-ui.git#f1401844507519e09814bf8ea3ac338ec8011044" + version "5.14.11" + resolved "https://github.com/mui/material-ui.git#7f9c09fea69759f0f621cbe3eb0f738d51c8201e" "@mui/private-theming@^5.14.11": version "5.14.11" @@ -2016,6 +2016,13 @@ resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.19.tgz#46905b4e6f62da825b040343cbc233144e9578d3" integrity sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ== +"@next/eslint-plugin-next@^13.5.4": + version "13.5.4" + resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.5.4.tgz#ec70af509f07dc4e545df25834ac94d2c341c36a" + integrity sha512-vI94U+D7RNgX6XypSyjeFrOzxGlZyxOplU0dVE5norIfZGn/LDjJYPHdvdsR5vN1eRtl6PDAsOHmycFEOljK5A== + dependencies: + glob "7.1.7" + "@next/swc-darwin-arm64@13.4.19": version "13.4.19" resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.19.tgz#77ad462b5ced4efdc26cb5a0053968d2c7dac1b6" @@ -7531,6 +7538,18 @@ glob@7.1.6: once "^1.3.0" path-is-absolute "^1.0.0" +glob@7.1.7: + version "7.1.7" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90" + integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ== + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^3.0.4" + once "^1.3.0" + path-is-absolute "^1.0.0" + glob@7.2.0: version "7.2.0" resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023" From 02516afb76311a07d4e7199a7dd116dd7f35bb9b Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Thu, 12 Oct 2023 15:56:07 +0200 Subject: [PATCH 117/262] [DataGrid] Fix cells overlapping the scrollbar in iOS Safari (#10633) --- .../src/components/virtualization/GridVirtualScroller.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx b/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx index 4390ebb329ea4..349fba38b5fe8 100644 --- a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx @@ -30,6 +30,7 @@ const VirtualScrollerRoot = styled('div', { '@media print': { overflow: 'hidden', }, + zIndex: 0, // See https://github.com/mui/mui-x/issues/10547 }); const GridVirtualScroller = React.forwardRef< From 56e27c49c4a5393e8ad9312988386adf6d5cbbc0 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Thu, 12 Oct 2023 16:27:22 +0200 Subject: [PATCH 118/262] [docs] Added reference links to TimePicker components (#10627) --- .../src/DesktopTimePicker/DesktopTimePicker.tsx | 10 ++++++++++ .../src/MobileTimePicker/MobileTimePicker.tsx | 10 ++++++++++ .../src/StaticTimePicker/StaticTimePicker.tsx | 10 ++++++++++ packages/x-date-pickers/src/TimePicker/TimePicker.tsx | 10 ++++++++++ 4 files changed, 40 insertions(+) diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx index 5857c3f2242d8..4fff1968d029e 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx @@ -24,6 +24,16 @@ type DesktopTimePickerComponent = (( props: DesktopTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [DesktopTimePicker API](https://mui.com/x/api/date-pickers/desktop-time-picker/) + */ const DesktopTimePicker = React.forwardRef(function DesktopTimePicker( inProps: DesktopTimePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx index 2310f8dc69698..f4ff9aca273f9 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx @@ -19,6 +19,16 @@ type MobileTimePickerComponent = (( props: MobileTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [MobileTimePicker API](https://mui.com/x/api/date-pickers/mobile-time-picker/) + */ const MobileTimePicker = React.forwardRef(function MobileTimePicker( inProps: MobileTimePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx index eed677b37c9e5..946e82bdfa1ba 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx @@ -13,6 +13,16 @@ type StaticTimePickerComponent = (( props: StaticTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [StaticTimePicker API](https://mui.com/x/api/date-pickers/static-time-picker/) + */ const StaticTimePicker = React.forwardRef(function StaticTimePicker( inProps: StaticTimePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx index fe1203855a44b..642131a804e94 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx @@ -12,6 +12,16 @@ type TimePickerComponent = (( props: TimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [TimePicker API](https://mui.com/x/api/date-pickers/time-picker/) + */ const TimePicker = React.forwardRef(function TimePicker( inProps: TimePickerProps, ref: React.Ref, From de5beb2479a497c6ca4abd93e705784d6ef4ffd4 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Thu, 12 Oct 2023 16:27:50 +0200 Subject: [PATCH 119/262] [docs] Add reference links to DateTimePicker components (#10628) --- .../src/DateTimePicker/DateTimePicker.tsx | 10 ++++++++++ .../DesktopDateTimePicker/DesktopDateTimePicker.tsx | 10 ++++++++++ .../src/MobileDateTimePicker/MobileDateTimePicker.tsx | 10 ++++++++++ .../src/StaticDateTimePicker/StaticDateTimePicker.tsx | 10 ++++++++++ 4 files changed, 40 insertions(+) diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx index 22818aaea5f31..b978349ec500d 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx @@ -12,6 +12,16 @@ type DateTimePickerComponent = (( props: DateTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [DateTimePicker API](https://mui.com/x/api/date-pickers/date-time-picker/) + */ const DateTimePicker = React.forwardRef(function DateTimePicker( inProps: DateTimePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index 1687b80f3e853..55f2ace245020 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -22,6 +22,16 @@ type DesktopDateTimePickerComponent = (( props: DesktopDateTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [DesktopDateTimePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-picker/) + */ const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker( inProps: DesktopDateTimePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index c87fba59305e4..1a01ec66ec16a 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -20,6 +20,16 @@ type MobileDateTimePickerComponent = (( props: MobileDateTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [MobileDateTimePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-picker/) + */ const MobileDateTimePicker = React.forwardRef(function MobileDateTimePicker( inProps: MobileDateTimePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx index 7d6b286fb1317..975bd7430bae8 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx @@ -14,6 +14,16 @@ type StaticDateTimePickerComponent = (( props: StaticDateTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [StaticDateTimePicker API](https://mui.com/x/api/date-pickers/static-date-time-picker/) + */ const StaticDateTimePicker = React.forwardRef(function StaticDateTimePicker( inProps: StaticDateTimePickerProps, ref: React.Ref, From 1ea719d792f9edc54a923746b7e7df625dda0a16 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Thu, 12 Oct 2023 16:28:04 +0200 Subject: [PATCH 120/262] [docs] Add reference links to DateRangePicker components (#10629) --- .../src/DateRangePicker/DateRangePicker.tsx | 10 ++++++++++ .../DesktopDateRangePicker/DesktopDateRangePicker.tsx | 10 ++++++++++ .../MobileDateRangePicker/MobileDateRangePicker.tsx | 10 ++++++++++ .../StaticDateRangePicker/StaticDateRangePicker.tsx | 10 ++++++++++ 4 files changed, 40 insertions(+) diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx index 4d88c1ba81772..98a9516452f2d 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx @@ -11,6 +11,16 @@ type DatePickerComponent = (( props: DateRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [DateRangePicker API](https://mui.com/x/api/date-pickers/date-range-picker/) + */ const DateRangePicker = React.forwardRef(function DateRangePicker( inProps: DateRangePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx index 8e4d491ace1d2..71b7d1bf23d66 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx @@ -16,6 +16,16 @@ type DesktopDateRangePickerComponent = (( props: DesktopDateRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [DesktopDateRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-range-picker/) + */ const DesktopDateRangePicker = React.forwardRef(function DesktopDateRangePicker( inProps: DesktopDateRangePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx index 84fa9ab907dcf..78b00738aeceb 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx @@ -16,6 +16,16 @@ type MobileDateRangePickerComponent = (( props: MobileDateRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [MobileDateRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-range-picker/) + */ const MobileDateRangePicker = React.forwardRef(function MobileDateRangePicker( inProps: MobileDateRangePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx index 997c29d7cfe53..38ef0c3cb8e92 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx @@ -13,6 +13,16 @@ type StaticDateRangePickerComponent = (( props: StaticDateRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [StaticDateRangePicker API](https://mui.com/x/api/date-pickers/static-date-range-picker/) + */ const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( inProps: StaticDateRangePickerProps, ref: React.Ref, From a86f2422c7bf512b0c352d96183a963d10a64cb5 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Thu, 12 Oct 2023 16:28:26 +0200 Subject: [PATCH 121/262] [docs] Add reference links to picker field components (#10631) --- docs/pages/x/api/date-pickers/index.md | 2 ++ .../MultiInputDateRangeField.tsx | 10 ++++++++++ .../MultiInputDateTimeRangeField.tsx | 10 ++++++++++ .../MultiInputTimeRangeField.tsx | 10 ++++++++++ .../SingleInputDateRangeField.tsx | 10 ++++++++++ .../SingleInputDateTimeRangeField.tsx | 10 ++++++++++ .../SingleInputTimeRangeField.tsx | 10 ++++++++++ packages/x-date-pickers/src/DateField/DateField.tsx | 10 ++++++++++ .../x-date-pickers/src/DateTimeField/DateTimeField.tsx | 10 ++++++++++ packages/x-date-pickers/src/TimeField/TimeField.tsx | 10 ++++++++++ 10 files changed, 92 insertions(+) diff --git a/docs/pages/x/api/date-pickers/index.md b/docs/pages/x/api/date-pickers/index.md index 5ac65d65a4038..c6c4bfb031609 100644 --- a/docs/pages/x/api/date-pickers/index.md +++ b/docs/pages/x/api/date-pickers/index.md @@ -42,7 +42,9 @@ - [MultiInputDateRangeField](/x/api/date-pickers/multi-input-date-range-field/) - [SingleInputDateRangeField](/x/api/date-pickers/single-input-date-range-field/) - [MultiInputTimeRangeField](/x/api/date-pickers/multi-input-time-range-field/) +- [SingleInputTimeRangeField](/x/api/date-pickers/single-input-time-range-field/) - [MultiInputDateTimeRangeField](/x/api/date-pickers/multi-input-date-time-range-field/) +- [SingleInputDateTimeRangeField](/x/api/date-pickers/single-input-date-time-range-field/) ### Calendars diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index 54d5aed165391..689f012437932 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -63,6 +63,16 @@ type MultiInputDateRangeFieldComponent = (( props: MultiInputDateRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateRangeField](http://mui.com/x/react-date-pickers/date-range-field/) + * - [Fields](https://mui.com/x/react-date-pickers/fields/) + * + * API: + * + * - [MultiInputDateRangeField API](https://mui.com/x/api/multi-input-date-range-field/) + */ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeField( inProps: MultiInputDateRangeFieldProps, ref: React.Ref, diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index ff494d51fd838..4df9cffc2254b 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -61,6 +61,16 @@ type MultiInputDateTimeRangeFieldComponent = (( props: MultiInputDateTimeRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateTimeRangeField](http://mui.com/x/react-date-pickers/date-time-range-field/) + * - [Fields](https://mui.com/x/react-date-pickers/fields/) + * + * API: + * + * - [MultiInputDateTimeRangeField API](https://mui.com/x/api/multi-input-date-time-range-field/) + */ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTimeRangeField( inProps: MultiInputDateTimeRangeFieldProps, ref: React.Ref, diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index 3b6e252e5ff78..dc70b84cea3de 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -63,6 +63,16 @@ type MultiInputTimeRangeFieldComponent = (( props: MultiInputTimeRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [TimeRangeField](http://mui.com/x/react-date-pickers/time-range-field/) + * - [Fields](https://mui.com/x/react-date-pickers/fields/) + * + * API: + * + * - [MultiInputTimeRangeField API](https://mui.com/x/api/multi-input-time-range-field/) + */ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeField( inProps: MultiInputTimeRangeFieldProps, ref: React.Ref, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index 6374f762afd33..562aac535712e 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -16,6 +16,16 @@ type DateRangeFieldComponent = (( props: SingleInputDateRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any; fieldType?: string }; +/** + * Demos: + * + * - [DateRangeField](http://mui.com/x/react-date-pickers/date-range-field/) + * - [Fields](https://mui.com/x/react-date-pickers/fields/) + * + * API: + * + * - [SingleInputDateRangeField API](https://mui.com/x/api/single-input-date-range-field/) + */ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRangeField( inProps: SingleInputDateRangeFieldProps, ref: React.Ref, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index 83a3f2e3b872f..a656eb4cfdef2 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -16,6 +16,16 @@ type DateRangeFieldComponent = (( props: SingleInputDateTimeRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any; fieldType?: string }; +/** + * Demos: + * + * - [DateTimeRangeField](http://mui.com/x/react-date-pickers/date-time-range-field/) + * - [Fields](https://mui.com/x/react-date-pickers/fields/) + * + * API: + * + * - [SingleInputDateTimeRangeField API](https://mui.com/x/api/single-input-date-time-range-field/) + */ const SingleInputDateTimeRangeField = React.forwardRef(function SingleInputDateTimeRangeField< TDate, >(inProps: SingleInputDateTimeRangeFieldProps, ref: React.Ref) { diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index 117bda6e8b5c2..6633ac7a1b9d4 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -16,6 +16,16 @@ type DateRangeFieldComponent = (( props: SingleInputTimeRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any; fieldType?: string }; +/** + * Demos: + * + * - [TimeRangeField](http://mui.com/x/react-date-pickers/time-range-field/) + * - [Fields](https://mui.com/x/react-date-pickers/fields/) + * + * API: + * + * - [SingleInputTimeRangeField API](https://mui.com/x/api/single-input-time-range-field/) + */ const SingleInputTimeRangeField = React.forwardRef(function SingleInputTimeRangeField( inProps: SingleInputTimeRangeFieldProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index a6ab1ffd4c703..ffd3ad5b76e05 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -16,6 +16,16 @@ type DateFieldComponent = (( props: DateFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateField](http://mui.com/x/react-date-pickers/date-field/) + * - [Fields](https://mui.com/x/react-date-pickers/fields/) + * + * API: + * + * - [DateField API](https://mui.com/x/api/date-pickers/date-field/) + */ const DateField = React.forwardRef(function DateField( inProps: DateFieldProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index 4077f934b4d52..bf7617deab8c2 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -16,6 +16,16 @@ type DateTimeFieldComponent = (( props: DateTimeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateTimeField](http://mui.com/x/react-date-pickers/date-time-field/) + * - [Fields](https://mui.com/x/react-date-pickers/fields/) + * + * API: + * + * - [DateTimeField API](https://mui.com/x/api/date-pickers/date-time-field/) + */ const DateTimeField = React.forwardRef(function DateTimeField( inProps: DateTimeFieldProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index a60706c388f96..26908efef28af 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -16,6 +16,16 @@ type TimeFieldComponent = (( props: TimeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [TimeField](http://mui.com/x/react-date-pickers/time-field/) + * - [Fields](https://mui.com/x/react-date-pickers/fields/) + * + * API: + * + * - [TimeField API](https://mui.com/x/api/date-pickers/time-field/) + */ const TimeField = React.forwardRef(function TimeField( inProps: TimeFieldProps, ref: React.Ref, From 51898b303db1f2b797f12a63d250bec1630398d8 Mon Sep 17 00:00:00 2001 From: Lukas Date: Thu, 12 Oct 2023 17:59:06 +0300 Subject: [PATCH 122/262] [DateTimePicker] Add support for `DigitalClock` view renderer (#10624) --- .../x/api/date-pickers/date-time-picker.json | 7 ++ .../desktop-date-time-picker.json | 7 ++ .../date-pickers/date-time-picker.json | 6 + .../desktop-date-time-picker.json | 6 + .../src/DateTimePicker/DateTimePicker.tsx | 5 + .../DesktopDateTimePicker.tsx | 23 +++- .../DesktopDateTimePicker.types.ts | 5 +- .../tests/DesktopDateTimePicker.test.tsx | 43 +++++++ .../DesktopTimePicker/DesktopTimePicker.tsx | 19 +-- .../src/DigitalClock/DigitalClock.tsx | 2 +- .../dateTimeViewRenderers.tsx | 109 +++++++++++------- .../src/internals/utils/date-time-utils.ts | 66 ++++++++++- 12 files changed, 239 insertions(+), 59 deletions(-) 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 2137daa7c848b..3386c513418e2 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -188,6 +188,7 @@ }, "additionalInfo": { "sx": true } }, + "thresholdToRenderTimeInASingleColumn": { "type": { "name": "number" }, "default": "24" }, "timeSteps": { "type": { "name": "shape", @@ -278,6 +279,12 @@ "description": "Custom component for the dialog inside which the views are rendered on mobile.", "default": "PickersModalDialogRoot" }, + { + "class": null, + "name": "digitalClockItem", + "description": "Component responsible for rendering a single digital clock item.", + "default": "MenuItem from '@mui/material'" + }, { "class": null, "name": "digitalClockSectionItem", 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 b308a3993ed2d..d67e2fbbd7a91 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 @@ -184,6 +184,7 @@ }, "additionalInfo": { "sx": true } }, + "thresholdToRenderTimeInASingleColumn": { "type": { "name": "number" }, "default": "24" }, "timeSteps": { "type": { "name": "shape", @@ -268,6 +269,12 @@ "description": "Custom component for trapping the focus inside the views on desktop.", "default": "FocusTrap from '@mui/base'." }, + { + "class": null, + "name": "digitalClockItem", + "description": "Component responsible for rendering a single digital clock item.", + "default": "MenuItem from '@mui/material'" + }, { "class": null, "name": "digitalClockSectionItem", diff --git a/docs/translations/api-docs/date-pickers/date-time-picker.json b/docs/translations/api-docs/date-pickers/date-time-picker.json index 7ea02970f06ad..9bdac4a1ffba0 100644 --- a/docs/translations/api-docs/date-pickers/date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/date-time-picker.json @@ -319,6 +319,11 @@ "deprecated": "", "typeDescriptions": {} }, + "thresholdToRenderTimeInASingleColumn": { + "description": "Amount of time options below or at which the single column time renderer is used.", + "deprecated": "", + "typeDescriptions": {} + }, "timeSteps": { "description": "The time steps between two time unit options. For example, if timeStep.minutes = 8, then the available minute options will be [0, 8, 16, 24, 32, 40, 48, 56]. When single column time renderer is used, only timeStep.minutes will be used.", "deprecated": "", @@ -362,6 +367,7 @@ "desktopTransition": "Custom component for the desktop popper Transition.", "desktopTrapFocus": "Custom component for trapping the focus inside the views on desktop.", "dialog": "Custom component for the dialog inside which the views are rendered on mobile.", + "digitalClockItem": "Component responsible for rendering a single digital clock item.", "digitalClockSectionItem": "Component responsible for rendering a single multi section digital clock section item.", "field": "Component used to enter the date with the keyboard.", "inputAdornment": "Component displayed on the start or end input adornment used to open the picker on desktop.", diff --git a/docs/translations/api-docs/date-pickers/desktop-date-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-time-picker.json index 9836d94f3182f..9830be1de2cbd 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-time-picker.json @@ -314,6 +314,11 @@ "deprecated": "", "typeDescriptions": {} }, + "thresholdToRenderTimeInASingleColumn": { + "description": "Amount of time options below or at which the single column time renderer is used.", + "deprecated": "", + "typeDescriptions": {} + }, "timeSteps": { "description": "The time steps between two time unit options. For example, if timeStep.minutes = 8, then the available minute options will be [0, 8, 16, 24, 32, 40, 48, 56]. When single column time renderer is used, only timeStep.minutes will be used.", "deprecated": "", @@ -356,6 +361,7 @@ "desktopPaper": "Custom component for the paper rendered inside the desktop picker's Popper.", "desktopTransition": "Custom component for the desktop popper Transition.", "desktopTrapFocus": "Custom component for trapping the focus inside the views on desktop.", + "digitalClockItem": "Component responsible for rendering a single digital clock item.", "digitalClockSectionItem": "Component responsible for rendering a single multi section digital clock section item.", "field": "Component used to enter the date with the keyboard.", "inputAdornment": "Component displayed on the start or end input adornment used to open the picker on desktop.", diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx index b978349ec500d..131468ff2e523 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx @@ -402,6 +402,11 @@ DateTimePicker.propTypes = { PropTypes.func, PropTypes.object, ]), + /** + * Amount of time options below or at which the single column time renderer is used. + * @default 24 + */ + thresholdToRenderTimeInASingleColumn: PropTypes.number, /** * The time steps between two time unit options. * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`. diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index 55f2ace245020..ea8c1f1a9c59d 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -15,7 +15,10 @@ import { CalendarIcon } from '../icons'; import { useDesktopPicker } from '../internals/hooks/useDesktopPicker'; import { extractValidationProps } from '../internals/utils/validation/extractValidationProps'; import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews'; -import { resolveDateTimeFormat } from '../internals/utils/date-time-utils'; +import { + resolveDateTimeFormat, + resolveTimeViewsResponse, +} from '../internals/utils/date-time-utils'; import { PickersActionBarAction } from '../PickersActionBar'; type DesktopDateTimePickerComponent = (( @@ -46,7 +49,12 @@ const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker >(inProps, 'MuiDesktopDateTimePicker'); - const timeSteps = { hours: 1, minutes: 5, seconds: 5, ...defaultizedProps.timeSteps }; + const { + shouldRenderTimeInASingleColumn, + thresholdToRenderTimeInASingleColumn, + views, + timeSteps, + } = resolveTimeViewsResponse(defaultizedProps); const shouldUseNewRenderer = !defaultizedProps.viewRenderers || Object.keys(defaultizedProps.viewRenderers).length === 0; @@ -81,12 +89,12 @@ const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker extends BaseDateTimePickerSlotsComponent, @@ -24,17 +25,19 @@ export interface DesktopDateTimePickerSlotsComponent UseDesktopPickerSlotsComponent, 'Field' | 'OpenPickerIcon' >, + DigitalClockSlotsComponent, MultiSectionDigitalClockSlotsComponent {} export interface DesktopDateTimePickerSlotsComponentsProps extends BaseDateTimePickerSlotsComponentsProps, ExportedUseDesktopPickerSlotsComponentsProps, + DigitalClockSlotsComponentsProps, MultiSectionDigitalClockSlotsComponentsProps {} export interface DesktopDateTimePickerProps extends BaseDateTimePickerProps, DesktopOnlyPickerProps, - Omit, 'thresholdToRenderTimeInASingleColumn'> { + DesktopOnlyTimePickerProps { /** * Available views. */ diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx index bb87dc61066bd..b26c8bda0530f 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx @@ -63,4 +63,47 @@ describe('', () => { expect(onClose.callCount).to.equal(1); }); }); + + describe('prop: timeSteps', () => { + it('should use "DigitalClock" view renderer, when "timeSteps.minutes" = 60', () => { + const onChange = spy(); + const onAccept = spy(); + render( + , + ); + + userEvent.mousePress(screen.getByLabelText(/Choose date/)); + + userEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); + userEvent.mousePress(screen.getByRole('option', { name: '03:00 AM' })); + + expect(onChange.callCount).to.equal(2); + expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 2, 3, 0, 0)); + expect(onAccept.callCount).to.equal(1); + }); + + it('should accept value and close picker when selecting time on "DigitalClock" view renderer', () => { + const onChange = spy(); + const onAccept = spy(); + render( + , + ); + + userEvent.mousePress(screen.getByLabelText(/Choose date/)); + + userEvent.mousePress(screen.getByRole('option', { name: '03:00 AM' })); + + expect(onChange.callCount).to.equal(1); + expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 3, 0, 0)); + expect(onAccept.callCount).to.equal(1); + }); + }); }); diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx index 4fff1968d029e..2787996336ee8 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx @@ -19,6 +19,8 @@ import { import { PickersActionBarAction } from '../PickersActionBar'; import { TimeViewWithMeridiem } from '../internals/models'; import { resolveTimeFormat } from '../internals/utils/time-utils'; +import { resolveTimeViewsResponse } from '../internals/utils/date-time-utils'; +import { TimeView } from '../models/views'; type DesktopTimePickerComponent = (( props: DesktopTimePickerProps & React.RefAttributes, @@ -48,11 +50,11 @@ const DesktopTimePicker = React.forwardRef(function DesktopTimePicker( DesktopTimePickerProps >(inProps, 'MuiDesktopTimePicker'); - const thresholdToRenderTimeInASingleColumn = - defaultizedProps.thresholdToRenderTimeInASingleColumn ?? 24; - const timeSteps = { hours: 1, minutes: 5, seconds: 5, ...defaultizedProps.timeSteps }; - const shouldRenderTimeInASingleColumn = - (24 * 60) / (timeSteps.hours * timeSteps.minutes) <= thresholdToRenderTimeInASingleColumn; + const { + shouldRenderTimeInASingleColumn, + views: resolvedViews, + timeSteps, + } = resolveTimeViewsResponse(defaultizedProps); const renderTimeView = shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView @@ -73,10 +75,9 @@ const DesktopTimePicker = React.forwardRef(function DesktopTimePicker( // Need to avoid adding the `meridiem` view when unexpected renderer is specified const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name; - const views: readonly TimeViewWithMeridiem[] = - defaultizedProps.ampm && shouldHoursRendererContainMeridiemView - ? [...defaultizedProps.views, 'meridiem'] - : defaultizedProps.views; + const views = !shouldHoursRendererContainMeridiemView + ? resolvedViews.filter((view) => view !== 'meridiem') + : resolvedViews; // Props with the default values specific to the desktop variant const props = { diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx index 8a4e79e09d90d..6d71cb73b55ee 100644 --- a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx +++ b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx @@ -173,7 +173,7 @@ export const DigitalClock = React.forwardRef(function DigitalClock - handleRawValueChange(newValue, 'finish'), + handleRawValueChange(newValue, 'finish', 'hours'), ); const { setValueAndGoToNextView } = useViews>({ diff --git a/packages/x-date-pickers/src/dateTimeViewRenderers/dateTimeViewRenderers.tsx b/packages/x-date-pickers/src/dateTimeViewRenderers/dateTimeViewRenderers.tsx index 563d5bc45d263..ca91f4b032d8e 100644 --- a/packages/x-date-pickers/src/dateTimeViewRenderers/dateTimeViewRenderers.tsx +++ b/packages/x-date-pickers/src/dateTimeViewRenderers/dateTimeViewRenderers.tsx @@ -4,7 +4,6 @@ import { resolveComponentProps } from '@mui/base/utils'; import { DateCalendar, DateCalendarProps } from '../DateCalendar'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; import { - MultiSectionDigitalClock, MultiSectionDigitalClockProps, multiSectionDigitalClockSectionClasses, } from '../MultiSectionDigitalClock'; @@ -12,6 +11,12 @@ import { DateTimeViewWrapper } from '../internals/components/DateTimeViewWrapper import { isInternalTimeView } from '../internals/utils/time-utils'; import { isDatePickerView } from '../internals/utils/date-utils'; import type { DateTimePickerProps } from '../DateTimePicker/DateTimePicker.types'; +import { + renderDigitalClockTimeView, + renderMultiSectionDigitalClockTimeView, +} from '../timeViewRenderers'; +import { digitalClockClasses } from '../DigitalClock'; +import { VIEW_HEIGHT } from '../internals/constants/dimensions'; export interface DateTimeViewRendererProps extends Omit< @@ -32,6 +37,7 @@ export interface DateTimeViewRendererProps views: readonly DateOrTimeViewWithMeridiem[]; focusedView: DateOrTimeViewWithMeridiem | null; timeViewsCount: number; + shouldRenderTimeInASingleColumn: boolean; } export const renderDesktopDateTimeView = ({ @@ -85,11 +91,44 @@ export const renderDesktopDateTimeView = ({ timeSteps, skipDisabled, timeViewsCount, + shouldRenderTimeInASingleColumn, }: DateTimeViewRendererProps) => { const isActionBarVisible = !!resolveComponentProps( slotProps?.actionBar ?? componentsProps?.actionBar, {} as any, )?.actions?.length; + const commonTimeProps = { + view: isInternalTimeView(view) ? view : 'hours', + onViewChange, + focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null, + onFocusedViewChange, + views: views.filter(isInternalTimeView), + value, + defaultValue, + referenceDate, + onChange, + className, + classes, + disableFuture, + disablePast, + minTime, + maxTime, + shouldDisableTime, + shouldDisableClock, + minutesStep, + ampm, + components, + componentsProps, + slots, + slotProps, + readOnly, + disabled, + autoFocus, + disableIgnoringDatePartForTimeValidation, + timeSteps, + skipDisabled, + timezone, + }; return ( @@ -138,46 +177,34 @@ export const renderDesktopDateTimeView = ({ {timeViewsCount > 0 && ( - + {shouldRenderTimeInASingleColumn + ? renderDigitalClockTimeView({ + ...commonTimeProps, + view: 'hours', + views: ['hours'], + focusedView: focusedView && isInternalTimeView(focusedView) ? 'hours' : null, + sx: { + width: 'auto', + [`&.${digitalClockClasses.root}`]: { + maxHeight: VIEW_HEIGHT, + }, + ...(Array.isArray(sx) ? sx : [sx]), + }, + }) + : renderMultiSectionDigitalClockTimeView({ + ...commonTimeProps, + view: isInternalTimeView(view) ? view : 'hours', + views: views.filter(isInternalTimeView), + focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null, + sx: { + borderBottom: 0, + width: 'auto', + [`.${multiSectionDigitalClockSectionClasses.root}`]: { + maxHeight: '100%', + }, + ...(Array.isArray(sx) ? sx : [sx]), + }, + })} )} diff --git a/packages/x-date-pickers/src/internals/utils/date-time-utils.ts b/packages/x-date-pickers/src/internals/utils/date-time-utils.ts index 0f7cb2d93cf85..61f4daa693c15 100644 --- a/packages/x-date-pickers/src/internals/utils/date-time-utils.ts +++ b/packages/x-date-pickers/src/internals/utils/date-time-utils.ts @@ -1,6 +1,15 @@ -import { DateOrTimeView, DateView, MuiPickersAdapter, TimeView } from '../../models'; -import { resolveTimeFormat, isTimeView } from './time-utils'; +import { + DateOrTimeView, + DateView, + MuiPickersAdapter, + TimeStepOptions, + TimeView, +} from '../../models'; +import { resolveTimeFormat, isTimeView, isInternalTimeView } from './time-utils'; import { resolveDateFormat } from './date-utils'; +import { DateOrTimeViewWithMeridiem } from '../models'; +import { DesktopOnlyTimePickerProps } from '../models/props/clock'; +import { DefaultizedProps } from '../models/helpers'; export const resolveDateTimeFormat = ( utils: MuiPickersAdapter, @@ -34,3 +43,56 @@ export const resolveDateTimeFormat = ( return `${dateFormat} ${timeFormat}`; }; + +const resolveViews = ( + ampm: boolean, + views: readonly DateOrTimeView[], + shouldUseSingleColumn: boolean, +): TView[] => { + if (shouldUseSingleColumn) { + return views.filter((view) => !isInternalTimeView(view) || view === 'hours') as TView[]; + } + return (ampm ? [...views, 'meridiem'] : views) as TView[]; +}; + +const resolveShouldRenderTimeInASingleColumn = (timeSteps: TimeStepOptions, threshold: number) => + (24 * 60) / ((timeSteps.hours ?? 1) * (timeSteps.minutes ?? 5)) <= threshold; + +interface DefaultizedTimeViewsProps + extends DefaultizedProps, 'ampm'> { + views: readonly TView[]; +} + +interface DefaultizedTimeViewsResponse + extends Required< + Pick< + DefaultizedTimeViewsProps, + 'thresholdToRenderTimeInASingleColumn' | 'timeSteps' | 'views' + > + > { + shouldRenderTimeInASingleColumn: boolean; +} + +export function resolveTimeViewsResponse< + TDate, + InTView extends DateOrTimeView = DateOrTimeView, + OutTView extends DateOrTimeViewWithMeridiem = DateOrTimeViewWithMeridiem, +>({ + thresholdToRenderTimeInASingleColumn: inThreshold, + ampm, + timeSteps: inTimeSteps, + views, +}: DefaultizedTimeViewsProps): DefaultizedTimeViewsResponse { + const thresholdToRenderTimeInASingleColumn = inThreshold ?? 24; + const timeSteps = { hours: 1, minutes: 5, seconds: 5, ...inTimeSteps }; + const shouldRenderTimeInASingleColumn = resolveShouldRenderTimeInASingleColumn( + timeSteps, + thresholdToRenderTimeInASingleColumn, + ); + return { + thresholdToRenderTimeInASingleColumn, + timeSteps, + shouldRenderTimeInASingleColumn, + views: resolveViews(ampm, views, shouldRenderTimeInASingleColumn), + }; +} From 723ed37f522d0413726bed0ae1cb994de2c5306d Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 12 Oct 2023 20:45:53 +0500 Subject: [PATCH 123/262] v6.16.2 (#10659) Signed-off-by: Bilal Shafi Co-authored-by: Flavien DELANGLE Co-authored-by: Andrew Cherniavskii --- CHANGELOG.md | 104 ++++++++++++++++++ package.json | 2 +- .../grid/x-data-grid-generator/package.json | 4 +- .../grid/x-data-grid-premium/package.json | 6 +- packages/grid/x-data-grid-pro/package.json | 4 +- packages/grid/x-data-grid/package.json | 2 +- packages/x-charts/package.json | 2 +- packages/x-date-pickers-pro/package.json | 4 +- packages/x-date-pickers/package.json | 2 +- 9 files changed, 117 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 54793c527bf2d..ac6411dfd71e5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,110 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 6.16.2 + +_Oct 12, 2023_ + +We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨: + +- 📊 Chart's legend text management has been reworked and contains breaking changes (#10138) @alexfauquette +- 📝 Add [Bulk editing](https://mui.com/x/react-data-grid/recipes-editing/#bulk-editing) demo (#10333) @cherniavskii +- 🚀 Column grouping now works smoothly with column pinning (#10518) @MBilalShafi +- 🌍 Improve Arabic (ar-SD) and Spanish (es-ES) locales +- 🐞 Bugfixes +- 📚 Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@6.16.2` + +- [DataGrid] Fix `LazyLoading` demo crash (#10621) @MBilalShafi +- [DataGrid] Fix cells overlapping the scrollbar in iOS Safari (#10633) @cherniavskii +- [DataGrid] Fix `getRowId is not defined` error (#10613) @romgrk +- [DataGrid] Get quick filter to work OOTB with `date` and `dateTime` fields (#10636) @MBilalShafi +- [DataGrid] Make cursor for selectable cells to be `default` unless editable (#9997) @gitstart +- [DataGrid] Remove unnecessary syntax in JSDoc (#10567) @Lev-Shapiro +- [DataGrid] Update row hover behavior to match native hover (#10623) @cherniavskii +- [l10n] Improve Arabic (ar-SD) locale (#10625) @alabenyahia + +#### `@mui/x-data-grid-pro@6.16.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-data-grid@6.16.2`, plus: + +- [DataGridPro] Improve column grouping and column pinning friendship (#10518) @MBilalShafi + +#### `@mui/x-data-grid-premium@6.16.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan') + +Same changes as in `@mui/x-data-grid-pro@6.16.2`. + +### Date Pickers + +#### `@mui/x-date-pickers@6.16.2` + +- [DateTimePicker] Add support for `DigitalClock` view renderer (#10624) @LukasTy +- [fields] Bootstrap the multi-HTML input component (#10638) @flaviendelangle +- [pickers] Fix timezone `UTC` false positive (#10586) @alexfauquette +- [l10n] Improve Spanish (es-ES) locale (#10588) @eduardodallmann + +#### `@mui/x-date-pickers-pro@6.16.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-date-pickers@6.16.2`. + +### Charts / `@mui/x-charts@6.0.0-alpha.15` + +#### Breaking changes + +The charts have a new text display mechanism. +It adds line break support and avoids overlapping text in the legend. +This comes with some breaking changes. + +- The DOM structure is modified. An intermediary `` element has been added. This can impact how your style is applied. + ```diff + - The label + + The label + ``` + +- The top margin has been reduced from 100 to 50 to benefit from the denser legend. + +- To accurately compute the text size and then place it, styling should be provided as a JS object. For example, to set the legend font size, you should do: + ```jsx + + ``` + Support for other text elements (axis labels and tick labels) will be implemented in follow-up PR. + +#### Changes + +- [charts] Fix typo between internal/external variable (#10640) @alexfauquette +- [charts] Improve the management of the text (#10138) @alexfauquette + +### Docs + +- [docs] Add bulk editing demo (#10333) @cherniavskii +- [docs] Add reference links to DateRangePicker components (#10629) @michelengelen +- [docs] Add reference links to DateTimePicker components (#10628) @michelengelen +- [docs] Add reference links to picker field components (#10631) @michelengelen +- [docs] Added reference links to TimePicker components (#10627) @michelengelen +- [docs] Avoid Pickers playground error due to empty views (#10654) @LukasTy +- [docs] Fix DataGrid[Pro/Premium] reference links (#10620) @michelengelen + +### Core + +- [core] Bump monorepo (#10619) @alexfauquette +- [core] Update `no-response` workflow (#10491) @MBilalShafi +- [core] Update the issue templates to reflect the new support workflow (#10651) @MBilalShafi +- [test] Fix `testEval` not invoking test assertions (#10587) @cherniavskii +- [test] Fix dev mode warning (#10610) @oliviertassinari +- [test] Set UUID chance seed in visual tests (#10609) @oliviertassinari + ## 6.16.1 _Oct 6, 2023_ diff --git a/package.json b/package.json index 46b56c54be9ba..9d941c139f024 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "6.16.1", + "version": "6.16.2", "private": true, "scripts": { "start": "yarn && yarn docs:dev", diff --git a/packages/grid/x-data-grid-generator/package.json b/packages/grid/x-data-grid-generator/package.json index 366c998e2263f..1c6bb96b410a1 100644 --- a/packages/grid/x-data-grid-generator/package.json +++ b/packages/grid/x-data-grid-generator/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-generator", - "version": "6.16.1", + "version": "6.16.2", "description": "Generate fake data for demo purposes only.", "author": "MUI Team", "main": "src/index.ts", @@ -32,7 +32,7 @@ "dependencies": { "@babel/runtime": "^7.23.1", "@mui/base": "^5.0.0-beta.17", - "@mui/x-data-grid-premium": "6.16.1", + "@mui/x-data-grid-premium": "6.16.2", "chance": "^1.1.11", "clsx": "^2.0.0", "lru-cache": "^7.18.3" diff --git a/packages/grid/x-data-grid-premium/package.json b/packages/grid/x-data-grid-premium/package.json index 3fd81760d4a72..a1be096a7ac5d 100644 --- a/packages/grid/x-data-grid-premium/package.json +++ b/packages/grid/x-data-grid-premium/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-premium", - "version": "6.16.1", + "version": "6.16.2", "description": "The Premium plan edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,8 +44,8 @@ "dependencies": { "@babel/runtime": "^7.23.1", "@mui/utils": "^5.14.11", - "@mui/x-data-grid": "6.16.1", - "@mui/x-data-grid-pro": "6.16.1", + "@mui/x-data-grid": "6.16.2", + "@mui/x-data-grid-pro": "6.16.2", "@mui/x-license-pro": "6.10.2", "@types/format-util": "^1.0.2", "clsx": "^2.0.0", diff --git a/packages/grid/x-data-grid-pro/package.json b/packages/grid/x-data-grid-pro/package.json index 3a11078754fed..f1c66513f2caa 100644 --- a/packages/grid/x-data-grid-pro/package.json +++ b/packages/grid/x-data-grid-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-pro", - "version": "6.16.1", + "version": "6.16.2", "description": "The Pro plan edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,7 +44,7 @@ "dependencies": { "@babel/runtime": "^7.23.1", "@mui/utils": "^5.14.11", - "@mui/x-data-grid": "6.16.1", + "@mui/x-data-grid": "6.16.2", "@mui/x-license-pro": "6.10.2", "@types/format-util": "^1.0.2", "clsx": "^2.0.0", diff --git a/packages/grid/x-data-grid/package.json b/packages/grid/x-data-grid/package.json index ab5c800fb8c5c..19a7e212b50c8 100644 --- a/packages/grid/x-data-grid/package.json +++ b/packages/grid/x-data-grid/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid", - "version": "6.16.1", + "version": "6.16.2", "description": "The community edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index 946fad17205c3..dadc059151bfd 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-charts", - "version": "6.0.0-alpha.14", + "version": "6.0.0-alpha.15", "description": "The community edition of the charts components (MUI X).", "author": "MUI Team", "main": "./src/index.js", diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index 335fdb2fab146..30ac56f1fef5b 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers-pro", - "version": "6.16.1", + "version": "6.16.2", "description": "The commercial edition of the date picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,7 +44,7 @@ "@babel/runtime": "^7.23.1", "@mui/base": "^5.0.0-beta.17", "@mui/utils": "^5.14.11", - "@mui/x-date-pickers": "6.16.1", + "@mui/x-date-pickers": "6.16.2", "@mui/x-license-pro": "6.10.2", "clsx": "^2.0.0", "prop-types": "^15.8.1", diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index f804ba0615c47..7ac22179d8c42 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers", - "version": "6.16.1", + "version": "6.16.2", "description": "The community edition of the date picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", From 5ae3f49e0597494a95f1ca8240038bf82e7aced7 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 13 Oct 2023 14:20:04 +0200 Subject: [PATCH 124/262] Bump sinon to ^16.1.0 (#10608) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 9d941c139f024..bbacdbccac1e5 100644 --- a/package.json +++ b/package.json @@ -161,7 +161,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "serve": "^14.2.1", - "sinon": "^16.0.0", + "sinon": "^16.1.0", "stream-browserify": "^3.0.0", "string-replace-loader": "^3.1.0", "typescript": "^5.2.2", diff --git a/yarn.lock b/yarn.lock index 6f98e9e85a731..99f09d0b129b2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12806,10 +12806,10 @@ simple-swizzle@^0.2.2: dependencies: is-arrayish "^0.3.1" -sinon@^16.0.0: - version "16.0.0" - resolved "https://registry.yarnpkg.com/sinon/-/sinon-16.0.0.tgz#06da4e63624b946c9d7e67cce21c2f67f40f23a9" - integrity sha512-B8AaZZm9CT5pqe4l4uWJztfD/mOTa7dL8Qo0W4+s+t74xECOgSZDDQCBjNgIK3+n4kyxQrSTv2V5ul8K25qkiQ== +sinon@^16.1.0: + version "16.1.0" + resolved "https://registry.yarnpkg.com/sinon/-/sinon-16.1.0.tgz#645b836563c9bedb21defdbe48831cb2afb687f2" + integrity sha512-ZSgzF0vwmoa8pq0GEynqfdnpEDyP1PkYmEChnkjW0Vyh8IDlyFEJ+fkMhCP0il6d5cJjPl2PUsnUSAuP5sttOQ== dependencies: "@sinonjs/commons" "^3.0.0" "@sinonjs/fake-timers" "^10.3.0" From 8b67c900ae9904a7361e3eff887dccbc53b4d565 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Sat, 14 Oct 2023 11:40:28 +0200 Subject: [PATCH 125/262] [pickers] Add reference links to toolbar components (#10646) --- .../src/DateRangePicker/DateRangePickerToolbar.tsx | 10 ++++++++++ .../src/DatePicker/DatePickerToolbar.tsx | 10 ++++++++++ .../src/DateTimePicker/DateTimePickerToolbar.tsx | 10 ++++++++++ .../src/TimePicker/TimePickerToolbar.tsx | 10 ++++++++++ 4 files changed, 40 insertions(+) diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx index a229133a33435..03eabe0b01660 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx @@ -56,6 +56,16 @@ const DateRangePickerToolbarContainer = styled('div', { display: 'flex', }); +/** + * Demos: + * + * - [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/) + * - [Custom components](https://mui.com/x/react-date-pickers/custom-components/) + * + * API: + * + * - [DateRangePickerToolbar API](https://mui.com/x/api/date-pickers/date-range-picker-toolbar/) + */ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar< TDate extends unknown, >(inProps: DateRangePickerToolbarProps, ref: React.Ref) { diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx index 58f02f4c42b76..b650b1bff51fb 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx @@ -53,6 +53,16 @@ type DatePickerToolbarComponent = (( props: DatePickerToolbarProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/) + * - [Custom components](https://mui.com/x/react-date-pickers/custom-components/) + * + * API: + * + * - [DatePickerToolbar API](https://mui.com/x/api/date-pickers/date-picker-toolbar/) + */ const DatePickerToolbar = React.forwardRef(function DatePickerToolbar( inProps: DatePickerToolbarProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx index ec5faeceb802c..33e9119f53110 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx @@ -185,6 +185,16 @@ const DateTimePickerToolbarAmPmSelection = styled('div', { }, })); +/** + * Demos: + * + * - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/) + * - [Custom components](https://mui.com/x/react-date-pickers/custom-components/) + * + * API: + * + * - [DateTimePickerToolbar API](https://mui.com/x/api/date-pickers/date-time-picker-toolbar/) + */ function DateTimePickerToolbar(inProps: DateTimePickerToolbarProps) { const props = useThemeProps({ props: inProps, name: 'MuiDateTimePickerToolbar' }); const { diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx index 1ff47e3ead4ad..bfb788628d546 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx @@ -143,6 +143,16 @@ TimePickerToolbarAmPmSelection.propTypes = { ]), } as any; +/** + * Demos: + * + * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/) + * - [Custom components](https://mui.com/x/react-date-pickers/custom-components/) + * + * API: + * + * - [TimePickerToolbar API](https://mui.com/x/api/date-pickers/time-picker-toolbar/) + */ function TimePickerToolbar(inProps: TimePickerToolbarProps) { const props = useThemeProps({ props: inProps, name: 'MuiTimePickerToolbar' }); const { From d7a5da1f0679ae7ca7e54bac73b7df6658831f27 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Mon, 16 Oct 2023 11:41:21 +0200 Subject: [PATCH 126/262] [pickers] Change the props received by the `FakeTextField` component (#10687) --- .../FakeTextField/FakeTextField.tsx | 29 ++++++++++++------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx b/packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx index 29770001c4a51..83290786ece1d 100644 --- a/packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx +++ b/packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx @@ -1,23 +1,30 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; -import { FieldSection } from '../../../models'; + +export interface FakeTextFieldElement extends React.HTMLAttributes { + before: string; + after: string; +} interface FakeTextFieldProps { - sections: FieldSection[]; + elements: FakeTextFieldElement[]; } -export function FakeTextField(props: FakeTextFieldProps) { - const { sections } = props; +export const FakeTextField = React.forwardRef(function FakeTextField( + props: FakeTextFieldProps, + ref: React.Ref, +) { + const { elements } = props; return ( - - {sections.map((section) => ( - - {section.startSeparator} - {}} /> - {section.endSeparator} + + {elements.map(({ before, after, ...otherElementProps }, elementIndex) => ( + + {before} + + {after} ))} ); -} +}); From 7fbaa61da58ea031a94ad3a8d7660e64ddff049e Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Mon, 16 Oct 2023 12:28:36 +0200 Subject: [PATCH 127/262] [charts] Add reference links to pie + scatter chart components (#10653) --- packages/x-charts/src/PieChart/PieChart.tsx | 11 +++++++++++ packages/x-charts/src/PieChart/PiePlot.tsx | 10 ++++++++++ packages/x-charts/src/ScatterChart/Scatter.tsx | 10 ++++++++++ packages/x-charts/src/ScatterChart/ScatterChart.tsx | 10 ++++++++++ packages/x-charts/src/ScatterChart/ScatterPlot.tsx | 10 ++++++++++ 5 files changed, 51 insertions(+) diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index a4153bf963941..a730a2828370f 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -57,6 +57,17 @@ export interface PieChartProps } const defaultMargin = { top: 5, bottom: 5, left: 5, right: 100 }; + +/** + * Demos: + * + * - [Pie](https://mui.com/x/react-charts/pie/) + * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/) + * + * API: + * + * - [PieChart API](https://mui.com/x/api/charts/pie-chart/) + */ function PieChart(props: PieChartProps) { const { xAxis, diff --git a/packages/x-charts/src/PieChart/PiePlot.tsx b/packages/x-charts/src/PieChart/PiePlot.tsx index 7429a0c540687..574a300ae7818 100644 --- a/packages/x-charts/src/PieChart/PiePlot.tsx +++ b/packages/x-charts/src/PieChart/PiePlot.tsx @@ -66,6 +66,16 @@ export interface PiePlotProps { ) => void; } +/** + * Demos: + * + * - [Pie](https://mui.com/x/react-charts/pie/) + * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/) + * + * API: + * + * - [PiePlot API](https://mui.com/x/api/charts/pie-plot/) + */ function PiePlot(props: PiePlotProps) { const { slots, slotProps, onClick } = props; const seriesData = React.useContext(SeriesContext).pie; diff --git a/packages/x-charts/src/ScatterChart/Scatter.tsx b/packages/x-charts/src/ScatterChart/Scatter.tsx index 829d67cf26ef7..fd3db8d2e8852 100644 --- a/packages/x-charts/src/ScatterChart/Scatter.tsx +++ b/packages/x-charts/src/ScatterChart/Scatter.tsx @@ -18,6 +18,16 @@ export interface ScatterProps { color: string; } +/** + * Demos: + * + * - [Scatter](https://mui.com/x/react-charts/scatter/) + * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/) + * + * API: + * + * - [Scatter API](https://mui.com/x/api/charts/scatter/) + */ function Scatter(props: ScatterProps) { const { series, xScale, yScale, color, markerSize } = props; diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 7decd47c93be4..2f2568b43355b 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -60,6 +60,16 @@ export interface ScatterChartProps slotProps?: ScatterChartSlotComponentProps; } +/** + * Demos: + * + * - [Scatter](https://mui.com/x/react-charts/scatter/) + * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/) + * + * API: + * + * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/) + */ const ScatterChart = React.forwardRef(function ScatterChart(props: ScatterChartProps, ref) { const { xAxis, diff --git a/packages/x-charts/src/ScatterChart/ScatterPlot.tsx b/packages/x-charts/src/ScatterChart/ScatterPlot.tsx index 4aa446251fa16..6a01605bdbe17 100644 --- a/packages/x-charts/src/ScatterChart/ScatterPlot.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterPlot.tsx @@ -25,6 +25,16 @@ export interface ScatterPlotProps { slotProps?: ScatterPlotSlotComponentProps; } +/** + * Demos: + * + * - [Scatter](https://mui.com/x/react-charts/scatter/) + * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/) + * + * API: + * + * - [ScatterPlot API](https://mui.com/x/api/charts/scatter-plot/) + */ function ScatterPlot(props: ScatterPlotProps) { const { slots, slotProps } = props; const seriesData = React.useContext(SeriesContext).scatter; From d2fc5794c302fc05f051b5632cf1ddc3cbcdfa92 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Mon, 16 Oct 2023 12:29:21 +0200 Subject: [PATCH 128/262] [charts] Add reference links to line chart + sparkline components (#10650) --- packages/x-charts/src/LineChart/LineChart.tsx | 11 +++++++++++ packages/x-charts/src/LineChart/LineElement.tsx | 10 ++++++++++ .../x-charts/src/LineChart/LineHighlightElement.tsx | 10 ++++++++++ packages/x-charts/src/LineChart/LineHighlightPlot.tsx | 10 ++++++++++ packages/x-charts/src/LineChart/LinePlot.tsx | 10 ++++++++++ packages/x-charts/src/LineChart/MarkElement.tsx | 10 ++++++++++ packages/x-charts/src/LineChart/MarkPlot.tsx | 10 ++++++++++ .../x-charts/src/SparkLineChart/SparkLineChart.tsx | 9 +++++++++ 8 files changed, 80 insertions(+) diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index fb8a7855ec353..12f153c7dbd2a 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -75,6 +75,17 @@ export interface LineChartProps */ slotProps?: LineChartSlotComponentProps; } + +/** + * Demos: + * + * - [Lines](https://mui.com/x/react-charts/lines/) + * - [Line demonstration](https://mui.com/x/react-charts/line-demo/) + * + * API: + * + * - [LineChart API](https://mui.com/x/api/charts/line-chart/) + */ const LineChart = React.forwardRef(function LineChart(props: LineChartProps, ref) { const { xAxis, diff --git a/packages/x-charts/src/LineChart/LineElement.tsx b/packages/x-charts/src/LineChart/LineElement.tsx index e9d0dfe16f8a6..14d13e28598fb 100644 --- a/packages/x-charts/src/LineChart/LineElement.tsx +++ b/packages/x-charts/src/LineChart/LineElement.tsx @@ -110,6 +110,16 @@ export type LineElementProps = Omit & {}; +/** + * Demos: + * + * - [Lines](https://mui.com/x/react-charts/lines/) + * - [Line demonstration](https://mui.com/x/react-charts/line-demo/) + * + * API: + * + * - [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/) + */ function LineHighlightElement(props: LineHighlightElementProps) { const { x, y, id, classes: innerClasses, color, ...other } = props; diff --git a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx index 4703913d2fcda..5f2d2f5c50421 100644 --- a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx +++ b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx @@ -27,6 +27,16 @@ export interface LineHighlightPlotProps extends React.SVGAttributes, Pick {} +/** + * Demos: + * + * - [Lines](https://mui.com/x/react-charts/lines/) + * - [Line demonstration](https://mui.com/x/react-charts/line-demo/) + * + * API: + * + * - [LinePlot API](https://mui.com/x/api/charts/line-plot/) + */ function LinePlot(props: LinePlotProps) { const { slots, slotProps, ...other } = props; const seriesData = React.useContext(SeriesContext).line; diff --git a/packages/x-charts/src/LineChart/MarkElement.tsx b/packages/x-charts/src/LineChart/MarkElement.tsx index f5345cc1cc7f6..83af7d050517b 100644 --- a/packages/x-charts/src/LineChart/MarkElement.tsx +++ b/packages/x-charts/src/LineChart/MarkElement.tsx @@ -101,6 +101,16 @@ export type MarkElementProps = Omit; }; +/** + * Demos: + * + * - [Lines](https://mui.com/x/react-charts/lines/) + * - [Line demonstration](https://mui.com/x/react-charts/line-demo/) + * + * API: + * + * - [MarkElement API](https://mui.com/x/api/charts/mark-element/) + */ function MarkElement(props: MarkElementProps) { const { x, diff --git a/packages/x-charts/src/LineChart/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx index 243be93e32d84..ec9299e094516 100644 --- a/packages/x-charts/src/LineChart/MarkPlot.tsx +++ b/packages/x-charts/src/LineChart/MarkPlot.tsx @@ -26,6 +26,16 @@ export interface MarkPlotProps extends React.SVGAttributes { slotProps?: MarkPlotSlotComponentProps; } +/** + * Demos: + * + * - [Lines](https://mui.com/x/react-charts/lines/) + * - [Line demonstration](https://mui.com/x/react-charts/line-demo/) + * + * API: + * + * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/) + */ function MarkPlot(props: MarkPlotProps) { const { slots, slotProps, ...other } = props; diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index ba5924156fec0..746d0ff568c67 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -106,6 +106,15 @@ const SPARKLINE_DEFAULT_MARGIN = { right: 5, }; +/** + * Demos: + * + * - [SparkLine](https://mui.com/x/react-charts/sparkline/) + * + * API: + * + * - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/) + */ const SparkLineChart = React.forwardRef(function SparkLineChart(props: SparkLineChartProps, ref) { const { xAxis, From 0ea4d04c01e40e095f599a108b7ea9ea6ef1d6a6 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Mon, 16 Oct 2023 12:41:58 +0200 Subject: [PATCH 129/262] [charts] Add reference links to area + bar chart components (#10652) Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> --- packages/x-charts/src/BarChart/BarChart.tsx | 11 +++++++++++ packages/x-charts/src/BarChart/BarPlot.tsx | 11 +++++++++++ packages/x-charts/src/LineChart/AreaElement.tsx | 10 ++++++++++ packages/x-charts/src/LineChart/AreaPlot.tsx | 11 +++++++++++ 4 files changed, 43 insertions(+) diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index 941f724b03039..411f03be20823 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -60,6 +60,17 @@ export interface BarChartProps layout?: BarSeriesType['layout']; } +/** + * Demos: + * + * - [Bars](https://mui.com/x/react-charts/bars/) + * - [Bar demonstration](https://mui.com/x/react-charts/bar-demo/) + * - [Stacking](https://mui.com/x/react-charts/stacking/) + * + * API: + * + * - [BarChart API](https://mui.com/x/api/charts/bar-chart/) + */ const BarChart = React.forwardRef(function BarChart(props: BarChartProps, ref) { const { xAxis, diff --git a/packages/x-charts/src/BarChart/BarPlot.tsx b/packages/x-charts/src/BarChart/BarPlot.tsx index ae421c63d9aaf..e0eebe1f831e0 100644 --- a/packages/x-charts/src/BarChart/BarPlot.tsx +++ b/packages/x-charts/src/BarChart/BarPlot.tsx @@ -47,6 +47,17 @@ export interface BarPlotSlotComponentProps { export interface BarPlotProps extends Pick {} +/** + * Demos: + * + * - [Bars](https://mui.com/x/react-charts/bars/) + * - [Bar demonstration](https://mui.com/x/react-charts/bar-demo/) + * - [Stacking](https://mui.com/x/react-charts/stacking/) + * + * API: + * + * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/) + */ function BarPlot(props: BarPlotProps) { const seriesData = React.useContext(SeriesContext).bar; const axisData = React.useContext(CartesianContext); diff --git a/packages/x-charts/src/LineChart/AreaElement.tsx b/packages/x-charts/src/LineChart/AreaElement.tsx index 7f9bd4c07f85c..d9610d9ec7848 100644 --- a/packages/x-charts/src/LineChart/AreaElement.tsx +++ b/packages/x-charts/src/LineChart/AreaElement.tsx @@ -108,6 +108,16 @@ export type AreaElementProps = Omit, Pick {} +/** + * Demos: + * + * - [Lines](https://mui.com/x/react-charts/lines/) + * - [Areas demonstration](https://mui.com/x/react-charts/areas-demo/) + * - [Stacking](https://mui.com/x/react-charts/stacking/) + * + * API: + * + * - [AreaPlot API](https://mui.com/x/api/charts/area-plot/) + */ function AreaPlot(props: AreaPlotProps) { const { slots, slotProps, ...other } = props; From 98c73d363df16f97f6addfc536108910be84c18d Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Mon, 16 Oct 2023 12:42:15 +0200 Subject: [PATCH 130/262] [DateRangePicker] Fix touch based range dragging (#10664) Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Co-authored-by: Lukas Co-authored-by: Flavien DELANGLE --- .../src/DateRangeCalendar/useDragRange.ts | 23 ++- test/e2e/index.test.ts | 155 ++++++++++++------ 2 files changed, 120 insertions(+), 58 deletions(-) diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/useDragRange.ts b/packages/x-date-pickers-pro/src/DateRangeCalendar/useDragRange.ts index b8b3046111414..6283ae2e247f4 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/useDragRange.ts +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/useDragRange.ts @@ -152,12 +152,6 @@ const useDragRangeEvents = ({ } setRangeDragDay(newDate); - setIsDragging(true); - const button = event.target as HTMLButtonElement; - const buttonDataset = button.dataset; - if (buttonDataset.position) { - onDatePositionChange(buttonDataset.position as DateRangePosition); - } }); const handleDragEnter = useEventCallback((event: React.DragEvent) => { @@ -173,7 +167,7 @@ const useDragRangeEvents = ({ const handleTouchMove = useEventCallback((event: React.TouchEvent) => { const target = resolveElementFromTouch(event); - if (!isDragging || !target) { + if (!target) { return; } @@ -181,6 +175,21 @@ const useDragRangeEvents = ({ if (newDate) { setRangeDragDay(newDate); } + + // this prevents initiating drag when user starts touchmove outside and then moves over a draggable element + const targetsAreIdentical = target === event.changedTouches[0].target; + if (!targetsAreIdentical || !isElementDraggable(newDate)) { + return; + } + + // on mobile we should only initialize dragging state after move is detected + setIsDragging(true); + + const button = event.target as HTMLButtonElement; + const buttonDataset = button.dataset; + if (buttonDataset.position) { + onDatePositionChange(buttonDataset.position as DateRangePosition); + } }); const handleDragLeave = useEventCallback((event: React.DragEvent) => { diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts index 0937076ba053c..a7e4064010006 100644 --- a/test/e2e/index.test.ts +++ b/test/e2e/index.test.ts @@ -1,5 +1,15 @@ import { expect } from 'chai'; -import { chromium, webkit, firefox, Page, Browser, BrowserContext } from '@playwright/test'; +import { + chromium, + webkit, + firefox, + Page, + Browser, + BrowserContext, + devices, + BrowserContextOptions, + BrowserType, +} from '@playwright/test'; function sleep(timeoutMS: number): Promise { return new Promise((resolve) => { @@ -65,62 +75,71 @@ async function attemptGoto(page: Page, url: string): Promise { // Pick the new/fake "now" for you test pages. const fakeNow = new Date('2022-04-17T13:37:11').valueOf(); -[chromium, webkit, firefox].forEach((browserType) => { - describe(`e2e: ${browserType.name()}`, () => { - const baseUrl = 'http://localhost:5001'; - let browser: Browser; - let context: BrowserContext; - let page: Page; - - async function renderFixture(fixturePath: string) { - if (page.url().includes(fixturePath)) { - // ensure that the page is reloaded if the it's the same fixture - // ensures that page is reset on firefox - await page.reload(); - } else { - await page.goto(`${baseUrl}/e2e/${fixturePath}#no-dev`); +let browser: Browser; +let context: BrowserContext; +let page: Page; +const baseUrl = 'http://localhost:5001'; + +async function renderFixture(fixturePath: string) { + if (page.url().includes(fixturePath)) { + // ensure that the page is reloaded if the it's the same fixture + // ensures that page is reset on firefox + await page.reload(); + } else { + await page.goto(`${baseUrl}/e2e/${fixturePath}#no-dev`); + } +} + +async function initializeEnvironment( + browserType: BrowserType, + contextOptions?: BrowserContextOptions, +) { + browser = await browserType.launch({ + headless: true, + }); + // eslint-disable-next-line no-console + console.log(`Running on: ${browserType.name()}, version: ${browser.version()}.`); + context = await browser.newContext({ + // ensure consistent date formatting regardless of environment + locale: 'en-US', + ...contextOptions, + }); + // Circle CI has low-performance CPUs. + context.setDefaultTimeout((process.env.CIRCLECI === 'true' ? 4 : 2) * 1000); + page = await context.newPage(); + // taken from: https://github.com/microsoft/playwright/issues/6347#issuecomment-1085850728 + // Update the Date accordingly in your test pages + await page.addInitScript(`{ + // Extend Date constructor to default to fakeNow + Date = class extends Date { + constructor(...args) { + if (args.length === 0) { + super(${fakeNow}); + } else { + super(...args); + } } } + // Override Date.now() to start from fakeNow + const __DateNowOffset = ${fakeNow} - Date.now(); + const __DateNow = Date.now; + Date.now = () => __DateNow() + __DateNowOffset; + }`); + const isServerRunning = await attemptGoto(page, `${baseUrl}#no-dev`); + if (!isServerRunning) { + throw new Error( + `Unable to navigate to ${baseUrl} after multiple attempts. Did you forget to run \`yarn test:e2e:server\` and \`yarn test:e2e:build\`?`, + ); + } + return { browser, context, page }; +} +[chromium, webkit, firefox].forEach((browserType) => { + describe(`e2e: ${browserType.name()}`, () => { before(async function beforeHook() { this.timeout(20000); - browser = await browserType.launch({ - headless: true, - }); - // eslint-disable-next-line no-console - console.log(`Running on: ${browserType.name()}, version: ${browser.version()}.`); - context = await browser.newContext({ - // ensure consistent date formatting regardless or environment - locale: 'en-US', - }); - // Circle CI has low-performance CPUs. - context.setDefaultTimeout((process.env.CIRCLECI === 'true' ? 4 : 2) * 1000); - page = await context.newPage(); - // taken from: https://github.com/microsoft/playwright/issues/6347#issuecomment-1085850728 - // Update the Date accordingly in your test pages - await page.addInitScript(`{ - // Extend Date constructor to default to fakeNow - Date = class extends Date { - constructor(...args) { - if (args.length === 0) { - super(${fakeNow}); - } else { - super(...args); - } - } - } - // Override Date.now() to start from fakeNow - const __DateNowOffset = ${fakeNow} - Date.now(); - const __DateNow = Date.now; - Date.now = () => __DateNow() + __DateNowOffset; - }`); - const isServerRunning = await attemptGoto(page, `${baseUrl}#no-dev`); - if (!isServerRunning) { - throw new Error( - `Unable to navigate to ${baseUrl} after multiple attempts. Did you forget to run \`yarn test:e2e:server\` and \`yarn test:e2e:build\`?`, - ); - } + await initializeEnvironment(browserType); }); after(async () => { @@ -571,3 +590,37 @@ const fakeNow = new Date('2022-04-17T13:37:11').valueOf(); }); }); }); + +describe('e2e: chromium on Android', () => { + before(async function beforeHook() { + this.timeout(20000); + + await initializeEnvironment(chromium, devices['Pixel 5']); + }); + + after(async () => { + await context.close(); + await browser.close(); + }); + + it('should allow re-selecting value to have the same start and end date', async () => { + await renderFixture('DatePicker/BasicDesktopDateRangePicker'); + + await page.getByRole('textbox', { name: 'Start' }).tap(); + + await page.getByRole('gridcell', { name: '11' }).first().tap(); + await page.getByRole('gridcell', { name: '17' }).first().tap(); + + const toolbarButtons = await page.getByRole('button', { name: /Apr/ }).all(); + expect(await toolbarButtons[0].textContent()).to.equal('Apr 11'); + expect(await toolbarButtons[1].textContent()).to.equal('Apr 17'); + + // tap twice on the same date to select a range within one day + const april11 = page.getByRole('gridcell', { name: '11' }).first(); + await april11.tap(); + await april11.tap(); + + expect(await toolbarButtons[0].textContent()).to.equal('Apr 11'); + expect(await toolbarButtons[1].textContent()).to.equal('Apr 11'); + }); +}); From 9dfb3c1290593d2bb07abad5d41c5b447ea2772d Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Mon, 16 Oct 2023 12:42:47 +0200 Subject: [PATCH 131/262] [pickers] Add reference links to DatePicker components (#10626) --- packages/x-date-pickers/src/DatePicker/DatePicker.tsx | 10 ++++++++++ .../src/DesktopDatePicker/DesktopDatePicker.tsx | 10 ++++++++++ .../src/MobileDatePicker/MobileDatePicker.tsx | 10 ++++++++++ .../src/StaticDatePicker/StaticDatePicker.tsx | 10 ++++++++++ 4 files changed, 40 insertions(+) diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx index 91d4e9c23b7b3..e7ecf9b339092 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx @@ -12,6 +12,16 @@ type DatePickerComponent = (( props: DatePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [DatePicker API](https://mui.com/x/api/date-pickers/date-picker/) + */ const DatePicker = React.forwardRef(function DatePicker( inProps: DatePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index 23533b5f5bfd9..ed6c37e21afad 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -19,6 +19,16 @@ type DesktopDatePickerComponent = (( props: DesktopDatePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [DesktopDatePicker API](https://mui.com/x/api/date-pickers/desktop-date-picker/) + */ const DesktopDatePicker = React.forwardRef(function DesktopDatePicker( inProps: DesktopDatePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index 37cd5fdcd7a28..a60c2b0a1f992 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx @@ -17,6 +17,16 @@ type MobileDatePickerComponent = (( props: MobileDatePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [MobileDatePicker API](https://mui.com/x/api/date-pickers/mobile-date-picker/) + */ const MobileDatePicker = React.forwardRef(function MobileDatePicker( inProps: MobileDatePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx index dbc0a39079359..a84e4f54acd0b 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx @@ -13,6 +13,16 @@ type StaticDatePickerComponent = (( props: StaticDatePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) + * + * API: + * + * - [StaticDatePicker API](https://mui.com/x/api/date-pickers/static-date-picker/) + */ const StaticDatePicker = React.forwardRef(function StaticDatePicker( inProps: StaticDatePickerProps, ref: React.Ref, From cc48cbcf91421aec4ec75434781743fd99722639 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Mon, 16 Oct 2023 13:00:09 +0200 Subject: [PATCH 132/262] [pickers] Add reference links to clock components (#10645) --- .../date-pickers/date-time-picker/date-time-picker.md | 2 +- docs/data/date-pickers/time-picker/time-picker.md | 2 +- docs/pages/x/api/date-pickers/digital-clock.json | 2 +- .../api/date-pickers/multi-section-digital-clock.json | 2 +- docs/pages/x/api/date-pickers/time-clock.json | 2 +- .../x-date-pickers/src/DigitalClock/DigitalClock.tsx | 10 ++++++++++ .../MultiSectionDigitalClock.tsx | 10 ++++++++++ packages/x-date-pickers/src/TimeClock/TimeClock.tsx | 4 ++++ 8 files changed, 29 insertions(+), 5 deletions(-) diff --git a/docs/data/date-pickers/date-time-picker/date-time-picker.md b/docs/data/date-pickers/date-time-picker/date-time-picker.md index 41bc514f3a2bc..15f6c45a5a151 100644 --- a/docs/data/date-pickers/date-time-picker/date-time-picker.md +++ b/docs/data/date-pickers/date-time-picker/date-time-picker.md @@ -1,7 +1,7 @@ --- productId: x-date-pickers title: React Date Time Picker component -components: DateTimePicker, DesktopDateTimePicker, MobileDateTimePicker, StaticDateTimePicker +components: DateTimePicker, DesktopDateTimePicker, MobileDateTimePicker, StaticDateTimePicker, DigitalClock, MultiSectionDigitalClock, TimeClock githubLabel: 'component: DateTimePicker' packageName: '@mui/x-date-pickers' materialDesign: https://m2.material.io/components/date-pickers diff --git a/docs/data/date-pickers/time-picker/time-picker.md b/docs/data/date-pickers/time-picker/time-picker.md index 41faeb501ecae..ed5d6492e8e2b 100644 --- a/docs/data/date-pickers/time-picker/time-picker.md +++ b/docs/data/date-pickers/time-picker/time-picker.md @@ -1,7 +1,7 @@ --- productId: x-date-pickers title: React Time Picker component -components: TimePicker, DesktopTimePicker, MobileTimePicker, StaticTimePicker +components: TimePicker, DesktopTimePicker, MobileTimePicker, StaticTimePicker, DigitalClock, MultiSectionDigitalClock, TimeClock githubLabel: 'component: TimePicker' packageName: '@mui/x-date-pickers' materialDesign: https://m2.material.io/components/time-pickers diff --git a/docs/pages/x/api/date-pickers/digital-clock.json b/docs/pages/x/api/date-pickers/digital-clock.json index 4d197b8342318..34bec36780d2c 100644 --- a/docs/pages/x/api/date-pickers/digital-clock.json +++ b/docs/pages/x/api/date-pickers/digital-clock.json @@ -104,5 +104,5 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx", "inheritance": null, - "demos": "" + "demos": "" } diff --git a/docs/pages/x/api/date-pickers/multi-section-digital-clock.json b/docs/pages/x/api/date-pickers/multi-section-digital-clock.json index 256d1589acc80..9e5983e055b9d 100644 --- a/docs/pages/x/api/date-pickers/multi-section-digital-clock.json +++ b/docs/pages/x/api/date-pickers/multi-section-digital-clock.json @@ -130,5 +130,5 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx", "inheritance": null, - "demos": "" + "demos": "" } diff --git a/docs/pages/x/api/date-pickers/time-clock.json b/docs/pages/x/api/date-pickers/time-clock.json index b452da8e52307..c658ec817a6eb 100644 --- a/docs/pages/x/api/date-pickers/time-clock.json +++ b/docs/pages/x/api/date-pickers/time-clock.json @@ -141,5 +141,5 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/x-date-pickers/src/TimeClock/TimeClock.tsx", "inheritance": null, - "demos": "" + "demos": "" } diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx index 6d71cb73b55ee..a46ae7790b8b5 100644 --- a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx +++ b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx @@ -85,6 +85,16 @@ type DigitalClockComponent = (( props: DigitalClockProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/) + * - [DigitalClock](https://mui.com/x/react-date-pickers/digital-clock/) + * + * API: + * + * - [DigitalClock API](https://mui.com/x/api/date-pickers/digital-clock/) + */ export const DigitalClock = React.forwardRef(function DigitalClock( inProps: DigitalClockProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx index 0917ad29c1b08..6db652cc7171e 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx @@ -48,6 +48,16 @@ type MultiSectionDigitalClockComponent = (( props: MultiSectionDigitalClockProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/) + * - [DigitalClock](https://mui.com/x/react-date-pickers/digital-clock/) + * + * API: + * + * - [MultiSectionDigitalClock API](https://mui.com/x/api/date-pickers/multi-section-digital-clock/) + */ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDigitalClock< TDate extends unknown, >(inProps: MultiSectionDigitalClockProps, ref: React.Ref) { diff --git a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx index d333f51404395..19cdccbf37b99 100644 --- a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx +++ b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx @@ -57,6 +57,10 @@ type TimeClockComponent = (( const TIME_CLOCK_DEFAULT_VIEWS: TimeView[] = ['hours', 'minutes']; /** + * Demos: + * + * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/) + * - [TimeClock](https://mui.com/x/react-date-pickers/time-clock/) * * API: * From c0c9aa6adfa82632b6dd136f42c625a802238af2 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Mon, 16 Oct 2023 13:05:09 +0200 Subject: [PATCH 133/262] [pickers] Add reference links to misc picker components (#10647) Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Co-authored-by: Lukas --- .../src/DateRangePickerDay/DateRangePickerDay.tsx | 3 +-- .../src/DateTimePicker/DateTimePickerTabs.tsx | 10 ++++++++++ .../src/DayCalendarSkeleton/DayCalendarSkeleton.tsx | 3 +-- .../LocalizationProvider/LocalizationProvider.tsx | 12 ++++++++++++ .../src/PickersActionBar/PickersActionBar.tsx | 10 ++++++++++ .../PickersCalendarHeader/PickersCalendarHeader.tsx | 11 +++++++++++ .../x-date-pickers/src/PickersDay/PickersDay.tsx | 4 +--- .../src/PickersLayout/PickersLayout.tsx | 9 +++++++++ .../src/PickersShortcuts/PickersShortcuts.tsx | 9 +++++++++ 9 files changed, 64 insertions(+), 7 deletions(-) diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx index 364809934b96f..9647c304b1628 100644 --- a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx @@ -523,10 +523,9 @@ DateRangePickerDayRaw.propTypes = { } as any; /** - * * Demos: * - * - [Date Range Picker](https://mui.com/x/react-date-pickers/date-range-picker/) + * - [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/) * * API: * diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx index 380a6a2ba05f2..6de4781ee8a01 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx @@ -83,6 +83,16 @@ const DateTimePickerTabsRoot = styled(Tabs, { }, })); +/** + * Demos: + * + * - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/) + * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/) + * + * API: + * + * - [DateTimePickerTabs API](https://mui.com/x/api/date-pickers/date-time-picker-tabs/) + */ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTabsProps) { const props = useThemeProps({ props: inProps, name: 'MuiDateTimePickerTabs' }); const { diff --git a/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx b/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx index b9f751f493a32..cca99858f8aea 100644 --- a/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx +++ b/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx @@ -84,10 +84,9 @@ const monthMap = [ ]; /** - * * Demos: * - * - [Date Picker](https://mui.com/x/react-date-pickers/date-picker/) + * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/) * * API: * diff --git a/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx b/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx index 935cfbd52e2cc..f2784c8c3e10c 100644 --- a/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx +++ b/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx @@ -55,6 +55,18 @@ type LocalizationProviderComponent = (( props: LocalizationProviderProps, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [Date format and localization](https://mui.com/x/react-date-pickers/adapters-locale/) + * - [Calendar systems](https://mui.com/x/react-date-pickers/calendar-systems/) + * - [Translated components](https://mui.com/x/react-date-pickers/localization/) + * - [UTC and timezones](https://mui.com/x/react-date-pickers/timezone/) + * + * API: + * + * - [LocalizationProvider API](https://mui.com/x/api/date-pickers/localization-provider/) + */ export const LocalizationProvider = function LocalizationProvider( inProps: LocalizationProviderProps, ) { diff --git a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx index f34e1fb1145d6..78dc13fee9e07 100644 --- a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx +++ b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx @@ -19,6 +19,16 @@ export interface PickersActionBarProps extends DialogActionsProps { onSetToday: () => void; } +/** + * Demos: + * + * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/) + * - [Custom layout](https://mui.com/x/react-date-pickers/custom-layout/) + * + * API: + * + * - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/) + */ function PickersActionBar(props: PickersActionBarProps) { const { onAccept, onClear, onCancel, onSetToday, actions, ...other } = props; diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx index fd36b819bb74f..0ec2ca2407718 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx @@ -189,6 +189,17 @@ type PickersCalendarHeaderComponent = (( props: PickersCalendarHeaderProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/) + * - [DateRangeCalendar](https://mui.com/x/react-date-pickers/date-range-calendar/) + * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/) + * + * API: + * + * - [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/) + */ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader( inProps: PickersCalendarHeaderProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx index 8f009f85b4d57..4f33f91c31b59 100644 --- a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx +++ b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx @@ -495,11 +495,9 @@ PickersDayRaw.propTypes = { } as any; /** - * * Demos: * - * - [Date Picker](https://mui.com/x/react-date-pickers/date-picker/) - * + * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/) * API: * * - [PickersDay API](https://mui.com/x/api/date-pickers/pickers-day/) diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx index d27bf3fde8730..0213273f49d78 100644 --- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx @@ -70,6 +70,15 @@ export const PickersLayoutContentWrapper = styled('div', { flexDirection: 'column', }); +/** + * Demos: + * + * - [Custom layout](https://mui.com/x/react-date-pickers/custom-layout/) + * + * API: + * + * - [PickersLayout API](https://mui.com/x/api/date-pickers/pickers-layout/) + */ const PickersLayout = function PickersLayout< TValue, TDate, diff --git a/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx b/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx index 88bc458a759e4..e58fbf8f93b67 100644 --- a/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx +++ b/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx @@ -45,6 +45,15 @@ export interface PickersShortcutsProps extends ExportedPickersShortcutPr isValid: (value: TValue) => boolean; } +/** + * Demos: + * + * - [Shortcuts](https://mui.com/x/react-date-pickers/shortcuts/) + * + * API: + * + * - [PickersShortcuts API](https://mui.com/x/api/date-pickers/pickers-shortcuts/) + */ function PickersShortcuts(props: PickersShortcutsProps) { const { items, changeImportance, isLandscape, onChange, isValid, ...other } = props; From 574ce72826130b47e2882464a6b4995a47c28b67 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Mon, 16 Oct 2023 13:31:48 +0200 Subject: [PATCH 134/262] [fields] Use `onChange` instead of `onKeyPress` for Backspace editing (#10494) --- ...editing.SingleInputDateRangeField.test.tsx | 274 +++++++++----- .../tests/editing.DateField.test.tsx | 346 ++++++++++++------ .../tests/field.DesktopDatePicker.test.tsx | 6 +- .../tests/editing.TimeField.test.tsx | 2 +- .../src/internals/hooks/useField/useField.ts | 20 +- .../internals/hooks/useField/useFieldState.ts | 18 +- 6 files changed, 428 insertions(+), 238 deletions(-) diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx index 14bd87eff653b..f24be9b99be94 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx @@ -5,114 +5,190 @@ import { userEvent, fireEvent } from '@mui-internal/test-utils'; import { expectInputValue, describeAdapters } from 'test/utils/pickers'; describe(' - Editing', () => { - ['Backspace', 'Delete'].forEach((keyToClearValue) => { - describeAdapters( - `key: ${keyToClearValue}`, - SingleInputDateRangeField, - ({ adapter, renderWithProps }) => { - it('should clear all the sections when all sections are selected and all sections are completed', () => { - const { input, selectSection } = renderWithProps({ - defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], - format: `${adapter.formats.month} ${adapter.formats.year}`, - }); - - selectSection('month'); - - // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); - - userEvent.keyPress(input, { key: keyToClearValue }); - expectInputValue(input, 'MMMM YYYY – MMMM YYYY'); - }); - - it('should clear all the sections when all sections are selected and not all sections are completed', () => { - const { input, selectSection } = renderWithProps({ - format: `${adapter.formats.month} ${adapter.formats.year}`, - }); - - selectSection('month'); - - // Set a value for the "month" section - fireEvent.change(input, { - target: { value: 'j YYYY – MMMM YYYY' }, - }); // Press "j" - expectInputValue(input, 'January YYYY – MMMM YYYY'); - - // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + describeAdapters(`key: Delete`, SingleInputDateRangeField, ({ adapter, renderWithProps }) => { + it('should clear all the sections when all sections are selected and all sections are completed', () => { + const { input, selectSection } = renderWithProps({ + defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], + format: `${adapter.formats.month} ${adapter.formats.year}`, + }); + + selectSection('month'); + + // Select all sections + userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + + userEvent.keyPress(input, { key: 'Delete' }); + expectInputValue(input, 'MMMM YYYY – MMMM YYYY'); + }); + + it('should clear all the sections when all sections are selected and not all sections are completed', () => { + const { input, selectSection } = renderWithProps({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + }); + + selectSection('month'); + + // Set a value for the "month" section + fireEvent.change(input, { + target: { value: 'j YYYY – MMMM YYYY' }, + }); // Press "j" + expectInputValue(input, 'January YYYY – MMMM YYYY'); + + // Select all sections + userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + + userEvent.keyPress(input, { key: 'Delete' }); + expectInputValue(input, 'MMMM YYYY – MMMM YYYY'); + }); + + it('should not call `onChange` when clearing all sections and both dates are already empty', () => { + const onChange = spy(); + + const { input, selectSection } = renderWithProps({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + defaultValue: [null, null], + onChange, + }); + + selectSection('month'); + + // Select all sections + userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + + userEvent.keyPress(input, { key: 'Delete' }); + expect(onChange.callCount).to.equal(0); + }); + + it('should call `onChange` when clearing the each section of each date', () => { + const handleChange = spy(); + + const { selectSection, input } = renderWithProps({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], + onChange: handleChange, + }); + + selectSection('month'); + + // Start date + userEvent.keyPress(input, { key: 'Delete' }); + expect(handleChange.callCount).to.equal(1); + userEvent.keyPress(input, { key: 'ArrowRight' }); + userEvent.keyPress(input, { key: 'Delete' }); + expect(handleChange.callCount).to.equal(2); + expect(handleChange.lastCall.firstArg[0]).to.equal(null); + expect(handleChange.lastCall.firstArg[1]).toEqualDateTime( + adapter.addYears(adapter.date(), 1), + ); + + // End date + userEvent.keyPress(input, { key: 'ArrowRight' }); + userEvent.keyPress(input, { key: 'Delete' }); + expect(handleChange.callCount).to.equal(3); + userEvent.keyPress(input, { key: 'ArrowRight' }); + userEvent.keyPress(input, { key: 'Delete' }); + expect(handleChange.callCount).to.equal(4); + expect(handleChange.lastCall.firstArg[0]).to.equal(null); + expect(handleChange.lastCall.firstArg[1]).to.equal(null); + }); + + it('should not call `onChange` if the section is already empty', () => { + const handleChange = spy(); + + const { selectSection, input } = renderWithProps({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], + onChange: handleChange, + }); + + selectSection('month'); + userEvent.keyPress(input, { key: 'Delete' }); + expect(handleChange.callCount).to.equal(1); + + userEvent.keyPress(input, { key: 'Delete' }); + expect(handleChange.callCount).to.equal(1); + }); + }); - userEvent.keyPress(input, { key: keyToClearValue }); - expectInputValue(input, 'MMMM YYYY – MMMM YYYY'); + describeAdapters( + `Backspace editing`, + SingleInputDateRangeField, + ({ adapter, renderWithProps, testFieldChange }) => { + it('should clear all the sections when all sections are selected and all sections are completed (Backspace)', () => { + testFieldChange({ + defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], + format: `${adapter.formats.month} ${adapter.formats.year}`, + keyStrokes: [{ value: '', expected: 'MMMM YYYY – MMMM YYYY' }], + }); + }); + + it('should clear all the sections when all sections are selected and not all sections are completed (Backspace)', () => { + testFieldChange({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + keyStrokes: [ + { value: 'j YYYY – MMMM YYYY', expected: 'January YYYY – MMMM YYYY' }, + { value: '', expected: 'MMMM YYYY – MMMM YYYY' }, + ], }); + }); - it('should not call `onChange` when clearing all sections and both dates are already empty', () => { - const onChange = spy(); + it('should not call `onChange` when clearing all sections and both dates are already empty (Backspace)', () => { + const onChange = spy(); - const { input, selectSection } = renderWithProps({ - format: `${adapter.formats.month} ${adapter.formats.year}`, - defaultValue: [null, null], - onChange, - }); + testFieldChange({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + keyStrokes: [{ value: '', expected: 'MMMM YYYY – MMMM YYYY' }], + }); - selectSection('month'); + expect(onChange.callCount).to.equal(0); + }); - // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + it('should call `onChange` when clearing the each section of each date (Backspace)', () => { + const onChange = spy(); - userEvent.keyPress(input, { key: keyToClearValue }); - expect(onChange.callCount).to.equal(0); + const { selectSection, input } = renderWithProps({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], + onChange, }); - it('should call `onChange` when clearing the each section of each date', () => { - const handleChange = spy(); - - const { selectSection, input } = renderWithProps({ - format: `${adapter.formats.month} ${adapter.formats.year}`, - defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], - onChange: handleChange, - }); - - selectSection('month'); - - // Start date - userEvent.keyPress(input, { key: keyToClearValue }); - expect(handleChange.callCount).to.equal(1); - userEvent.keyPress(input, { key: 'ArrowRight' }); - userEvent.keyPress(input, { key: keyToClearValue }); - expect(handleChange.callCount).to.equal(2); - expect(handleChange.lastCall.firstArg[0]).to.equal(null); - expect(handleChange.lastCall.firstArg[1]).toEqualDateTime( - adapter.addYears(adapter.date(), 1), - ); - - // End date - userEvent.keyPress(input, { key: 'ArrowRight' }); - userEvent.keyPress(input, { key: keyToClearValue }); - expect(handleChange.callCount).to.equal(3); - userEvent.keyPress(input, { key: 'ArrowRight' }); - userEvent.keyPress(input, { key: keyToClearValue }); - expect(handleChange.callCount).to.equal(4); - expect(handleChange.lastCall.firstArg[0]).to.equal(null); - expect(handleChange.lastCall.firstArg[1]).to.equal(null); + selectSection('month'); + + // Start date + fireEvent.change(input, { target: { value: ' 2022 – June 2023' } }); + expect(onChange.callCount).to.equal(1); + userEvent.keyPress(input, { key: 'ArrowRight' }); + fireEvent.change(input, { target: { value: 'MMMM – June 2023' } }); + expect(onChange.callCount).to.equal(2); + expect(onChange.lastCall.firstArg[0]).to.equal(null); + expect(onChange.lastCall.firstArg[1]).toEqualDateTime(adapter.addYears(adapter.date(), 1)); + + // End date + userEvent.keyPress(input, { key: 'ArrowRight' }); + fireEvent.change(input, { target: { value: 'MMMM YYYY – 2023' } }); + expect(onChange.callCount).to.equal(3); + userEvent.keyPress(input, { key: 'ArrowRight' }); + fireEvent.change(input, { target: { value: 'MMMM YYYY – MMMM ' } }); + expect(onChange.callCount).to.equal(4); + expect(onChange.lastCall.firstArg[0]).to.equal(null); + expect(onChange.lastCall.firstArg[1]).to.equal(null); + }); + + it('should not call `onChange` if the section is already empty (Backspace)', () => { + const onChange = spy(); + + testFieldChange({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], + onChange, + keyStrokes: [ + { value: ' 2022 – June 2023', expected: 'MMMM 2022 – June 2023' }, + { value: ' 2022 – June 2023', expected: 'MMMM 2022 – June 2023' }, + ], }); - it('should not call `onChange` if the section is already empty', () => { - const handleChange = spy(); - - const { selectSection, input } = renderWithProps({ - format: `${adapter.formats.month} ${adapter.formats.year}`, - defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], - onChange: handleChange, - }); - - selectSection('month'); - userEvent.keyPress(input, { key: keyToClearValue }); - expect(handleChange.callCount).to.equal(1); - - userEvent.keyPress(input, { key: keyToClearValue }); - expect(handleChange.callCount).to.equal(1); - }); - }, - ); - }); + expect(onChange.callCount).to.equal(1); + }); + }, + ); }); diff --git a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx index c3238da26d8c4..7ec6224393480 100644 --- a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx @@ -206,155 +206,149 @@ describe(' - Editing', () => { }); }); - ['Backspace', 'Delete'].forEach((keyToClearValue) => { - describeAdapters( - `key: ${keyToClearValue}`, - DateField, - ({ adapter, testFieldKeyPress, renderWithProps }) => { - it('should clear the selected section when only this section is completed', () => { - const { input, selectSection } = renderWithProps({ - format: `${adapter.formats.month} ${adapter.formats.year}`, - }); - selectSection('month'); - - // Set a value for the "month" section - fireEvent.change(input, { - target: { value: 'j YYYY' }, - }); // press "j" - expectInputValue(input, 'January YYYY'); - - userEvent.keyPress(input, { key: keyToClearValue }); - expectInputValue(input, 'MMMM YYYY'); - }); + describeAdapters(`key: Delete`, DateField, ({ adapter, testFieldKeyPress, renderWithProps }) => { + it('should clear the selected section when only this section is completed', () => { + const { input, selectSection } = renderWithProps({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + }); + selectSection('month'); - it('should clear the selected section when all sections are completed', () => { - testFieldKeyPress({ - format: `${adapter.formats.month} ${adapter.formats.year}`, - defaultValue: adapter.date(), - key: keyToClearValue, - expectedValue: 'MMMM 2022', - }); - }); + // Set a value for the "month" section + fireEvent.change(input, { + target: { value: 'j YYYY' }, + }); // press "j" + expectInputValue(input, 'January YYYY'); - it('should clear all the sections when all sections are selected and all sections are completed', () => { - const { input, selectSection } = renderWithProps({ - format: `${adapter.formats.month} ${adapter.formats.year}`, - defaultValue: adapter.date(), - }); + userEvent.keyPress(input, { key: 'Delete' }); + expectInputValue(input, 'MMMM YYYY'); + }); - selectSection('month'); + it('should clear the selected section when all sections are completed', () => { + testFieldKeyPress({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + defaultValue: adapter.date(), + key: 'Delete', + expectedValue: 'MMMM 2022', + }); + }); - // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + it('should clear all the sections when all sections are selected and all sections are completed', () => { + const { input, selectSection } = renderWithProps({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + defaultValue: adapter.date(), + }); - userEvent.keyPress(input, { key: keyToClearValue }); - expectInputValue(input, 'MMMM YYYY'); - }); + selectSection('month'); - it('should clear all the sections when all sections are selected and not all sections are completed', () => { - const { input, selectSection } = renderWithProps({ - format: `${adapter.formats.month} ${adapter.formats.year}`, - }); + // Select all sections + userEvent.keyPress(input, { key: 'a', ctrlKey: true }); - selectSection('month'); + userEvent.keyPress(input, { key: 'Delete' }); + expectInputValue(input, 'MMMM YYYY'); + }); - // Set a value for the "month" section - fireEvent.change(input, { - target: { value: 'j YYYY' }, - }); // Press "j" - expectInputValue(input, 'January YYYY'); + it('should clear all the sections when all sections are selected and not all sections are completed', () => { + const { input, selectSection } = renderWithProps({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + }); - // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + selectSection('month'); - userEvent.keyPress(input, { key: keyToClearValue }); - expectInputValue(input, 'MMMM YYYY'); - }); + // Set a value for the "month" section + fireEvent.change(input, { + target: { value: 'j YYYY' }, + }); // Press "j" + expectInputValue(input, 'January YYYY'); - it('should not keep query after typing again on a cleared section', () => { - const { input, selectSection } = renderWithProps({ - format: adapter.formats.year, - }); + // Select all sections + userEvent.keyPress(input, { key: 'a', ctrlKey: true }); - selectSection('year'); + userEvent.keyPress(input, { key: 'Delete' }); + expectInputValue(input, 'MMMM YYYY'); + }); - fireEvent.change(input, { target: { value: '2' } }); // press "2" - expectInputValue(input, '0002'); + it('should not keep query after typing again on a cleared section', () => { + const { input, selectSection } = renderWithProps({ + format: adapter.formats.year, + }); - userEvent.keyPress(input, { key: keyToClearValue }); - expectInputValue(input, 'YYYY'); + selectSection('year'); - fireEvent.change(input, { target: { value: '2' } }); // press "2" - expectInputValue(input, '0002'); - }); + fireEvent.change(input, { target: { value: '2' } }); // press "2" + expectInputValue(input, '0002'); - it('should not clear the sections when props.readOnly = true', () => { - testFieldKeyPress({ - format: adapter.formats.year, - defaultValue: adapter.date(), - readOnly: true, - key: keyToClearValue, - expectedValue: '2022', - }); - }); + userEvent.keyPress(input, { key: 'Delete' }); + expectInputValue(input, 'YYYY'); - it('should not call `onChange` when clearing all sections and both dates are already empty', () => { - const onChange = spy(); + fireEvent.change(input, { target: { value: '2' } }); // press "2" + expectInputValue(input, '0002'); + }); - const { input, selectSection } = renderWithProps({ - format: `${adapter.formats.month} ${adapter.formats.year}`, - onChange, - }); + it('should not clear the sections when props.readOnly = true', () => { + testFieldKeyPress({ + format: adapter.formats.year, + defaultValue: adapter.date(), + readOnly: true, + key: 'Delete', + expectedValue: '2022', + }); + }); + + it('should not call `onChange` when clearing all sections and both dates are already empty', () => { + const onChange = spy(); + + const { input, selectSection } = renderWithProps({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + onChange, + }); - selectSection('month'); + selectSection('month'); - // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + // Select all sections + userEvent.keyPress(input, { key: 'a', ctrlKey: true }); - userEvent.keyPress(input, { key: keyToClearValue }); - expect(onChange.callCount).to.equal(0); - }); + userEvent.keyPress(input, { key: 'Delete' }); + expect(onChange.callCount).to.equal(0); + }); - it('should call `onChange` when clearing the first and last section', () => { - const handleChange = spy(); + it('should call `onChange` when clearing the first and last section', () => { + const handleChange = spy(); - const { selectSection, input } = renderWithProps({ - format: `${adapter.formats.month} ${adapter.formats.year}`, - defaultValue: adapter.date(), - onChange: handleChange, - }); + const { selectSection, input } = renderWithProps({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + defaultValue: adapter.date(), + onChange: handleChange, + }); - selectSection('month'); - userEvent.keyPress(input, { key: keyToClearValue }); - expect(handleChange.callCount).to.equal(1); - expect(handleChange.lastCall.args[1].validationError).to.equal('invalidDate'); + selectSection('month'); + userEvent.keyPress(input, { key: 'Delete' }); + expect(handleChange.callCount).to.equal(1); + expect(handleChange.lastCall.args[1].validationError).to.equal('invalidDate'); - userEvent.keyPress(input, { key: 'ArrowRight' }); + userEvent.keyPress(input, { key: 'ArrowRight' }); - userEvent.keyPress(input, { key: keyToClearValue }); - expect(handleChange.callCount).to.equal(2); - expect(handleChange.lastCall.firstArg).to.equal(null); - expect(handleChange.lastCall.args[1].validationError).to.equal(null); - }); + userEvent.keyPress(input, { key: 'Delete' }); + expect(handleChange.callCount).to.equal(2); + expect(handleChange.lastCall.firstArg).to.equal(null); + expect(handleChange.lastCall.args[1].validationError).to.equal(null); + }); - it('should not call `onChange` if the section is already empty', () => { - const handleChange = spy(); + it('should not call `onChange` if the section is already empty', () => { + const handleChange = spy(); - const { selectSection, input } = renderWithProps({ - format: `${adapter.formats.month} ${adapter.formats.year}`, - defaultValue: adapter.date(), - onChange: handleChange, - }); + const { selectSection, input } = renderWithProps({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + defaultValue: adapter.date(), + onChange: handleChange, + }); - selectSection('month'); - userEvent.keyPress(input, { key: keyToClearValue }); - expect(handleChange.callCount).to.equal(1); + selectSection('month'); + userEvent.keyPress(input, { key: 'Delete' }); + expect(handleChange.callCount).to.equal(1); - userEvent.keyPress(input, { key: keyToClearValue }); - expect(handleChange.callCount).to.equal(1); - }); - }, - ); + userEvent.keyPress(input, { key: 'Delete' }); + expect(handleChange.callCount).to.equal(1); + }); }); describeAdapters('Digit editing', DateField, ({ adapter, testFieldChange }) => { @@ -638,6 +632,118 @@ describe(' - Editing', () => { }, ); + describeAdapters( + `Backspace editing`, + DateField, + ({ adapter, renderWithProps, testFieldChange }) => { + it('should clear the selected section when only this section is completed (Backspace)', () => { + testFieldChange({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + keyStrokes: [ + { value: 'j YYYY', expected: 'January YYYY' }, + { value: ' YYYY', expected: 'MMMM YYYY' }, + ], + }); + }); + + it('should clear the selected section when all sections are completed (Backspace)', () => { + testFieldChange({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + defaultValue: adapter.date(), + keyStrokes: [{ value: ' 2022', expected: 'MMMM 2022' }], + }); + }); + + it('should clear all the sections when all sections are selected and all sections are completed (Backspace)', () => { + testFieldChange({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + defaultValue: adapter.date(), + keyStrokes: [{ value: '', expected: 'MMMM YYYY' }], + }); + }); + + it('should clear all the sections when all sections are selected and not all sections are completed (Backspace)', () => { + testFieldChange({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + keyStrokes: [ + { value: 'j YYYY', expected: 'January YYYY' }, + { value: '', expected: 'MMMM YYYY' }, + ], + }); + }); + + it('should not keep query after typing again on a cleared section (Backspace)', () => { + testFieldChange({ + format: adapter.formats.year, + keyStrokes: [ + { value: '2', expected: '0002' }, + { value: '', expected: 'YYYY' }, + { value: '2', expected: '0002' }, + ], + }); + }); + + it('should not clear the sections when props.readOnly = true (Backspace)', () => { + testFieldChange({ + format: adapter.formats.year, + defaultValue: adapter.date(), + readOnly: true, + keyStrokes: [{ value: '2', expected: '2022' }], + }); + }); + + it('should not call `onChange` when clearing all sections and both dates are already empty (Backspace)', () => { + const onChange = spy(); + + testFieldChange({ + format: adapter.formats.year, + onChange, + keyStrokes: [{ value: '', expected: 'YYYY' }], + }); + + expect(onChange.callCount).to.equal(0); + }); + + it('should call `onChange` when clearing the first and last section (Backspace)', () => { + const onChange = spy(); + + const { selectSection, input } = renderWithProps({ + format: `${adapter.formats.month} ${adapter.formats.year}`, + defaultValue: adapter.date(), + onChange, + }); + + selectSection('month'); + fireEvent.change(input, { target: { value: ' 2022' } }); + expect(onChange.callCount).to.equal(1); + expect(onChange.lastCall.args[1].validationError).to.equal('invalidDate'); + + userEvent.keyPress(input, { key: 'ArrowRight' }); + + fireEvent.change(input, { target: { value: 'MMMM ' } }); + expect(onChange.callCount).to.equal(2); + expect(onChange.lastCall.firstArg).to.equal(null); + expect(onChange.lastCall.args[1].validationError).to.equal(null); + }); + + it('should not call `onChange` if the section is already empty (Backspace)', () => { + const onChange = spy(); + + testFieldChange({ + format: adapter.formats.year, + defaultValue: adapter.date(), + keyStrokes: [ + { value: '', expected: 'YYYY' }, + { value: '', expected: 'YYYY' }, + ], + onChange, + }); + + expect(onChange.callCount).to.equal(1); + }); + }, + ); + describeAdapters('Pasting', DateField, ({ adapter, render, renderWithProps, clickOnInput }) => { const firePasteEvent = (input: HTMLInputElement, pastedValue: string) => { act(() => { @@ -851,7 +957,7 @@ describe(' - Editing', () => { selectSection('month'); userEvent.keyPress(input, { key: 'a', ctrlKey: true }); - userEvent.keyPress(input, { key: 'Backspace' }); + fireEvent.change(input, { target: { value: '' } }); userEvent.keyPress(input, { key: 'ArrowLeft' }); fireEvent.change(input, { target: { value: '1/DD/YYYY' } }); // Press "1" diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx index fd6944bdaa077..81dd41756569f 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { fireEvent, userEvent } from '@mui-internal/test-utils'; +import { fireEvent } from '@mui-internal/test-utils'; import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/x-date-pickers/DesktopDatePicker'; import { createPickerRenderer, @@ -40,7 +40,7 @@ describe(' - Field', () => { fireEvent.change(input, { target: { value: 'November 4' } }); // Press "1" expectInputValue(input, 'November 04'); - userEvent.keyPress(input, { key: 'Backspace' }); + fireEvent.change(input, { target: { value: 'November ' } }); expectInputValue(input, 'November DD'); }); @@ -81,7 +81,7 @@ describe(' - Field', () => { expectInputValue(input, 'June 2022'); clickOnInput(input, 0); - userEvent.keyPress(input, { key: 'Backspace' }); + fireEvent.change(input, { target: { value: ' 2022' } }); expectInputValue(input, 'MMMM 2022'); }); }); diff --git a/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx b/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx index 140a5af79d94b..3b389d300ae09 100644 --- a/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx +++ b/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx @@ -365,7 +365,7 @@ describe(' - Editing', () => { selectSection('hours'); userEvent.keyPress(input, { key: 'a', ctrlKey: true }); - userEvent.keyPress(input, { key: 'Backspace' }); + fireEvent.change(input, { target: { value: '' } }); userEvent.keyPress(input, { key: 'ArrowLeft' }); fireEvent.change(input, { target: { value: '3:mm' } }); // Press "3" diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 71f9b0c13a2fc..8a103450acf64 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -202,6 +202,12 @@ export const useField = < } const targetValue = event.target.value; + if (targetValue === '') { + resetCharacterQuery(); + clearValue(); + return; + } + const eventData = (event.nativeEvent as InputEvent).data; // Calling `.fill(04/11/2022)` in playwright will trigger a change event with the requested content to insert in `event.nativeEvent.data` // usual changes have only the currently typed character in the `event.nativeEvent.data` @@ -267,8 +273,14 @@ export const useField = < ); } - if (isAndroid() && keyPressed.length === 0) { - setTempAndroidValueStr(valueStr); + if (keyPressed.length === 0) { + if (isAndroid()) { + setTempAndroidValueStr(valueStr); + } else { + resetCharacterQuery(); + clearActiveSection(); + } + return; } @@ -326,7 +338,7 @@ export const useField = < } // Reset the value of the selected section - case ['Backspace', 'Delete'].includes(event.key): { + case event.key === 'Delete': { event.preventDefault(); if (readOnly) { @@ -412,7 +424,7 @@ export const useField = < // Fix scroll jumping on iOS browser: https://github.com/mui/mui-x/issues/8321 const currentScrollTop = inputRef.current.scrollTop; // On multi input range pickers we want to update selection range only for the active input - // This helps avoiding the focus jumping on Safari https://github.com/mui/mui-x/issues/9003 + // This helps to avoid the focus jumping on Safari https://github.com/mui/mui-x/issues/9003 // because WebKit implements the `setSelectionRange` based on the spec: https://bugs.webkit.org/show_bug.cgi?id=224425 if (inputRef.current === getActiveElement(document)) { inputRef.current.setSelectionRange(selectionStart, selectionEnd); diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts index 660ead62ac7dc..62dcccb0696bb 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts @@ -213,6 +213,10 @@ export const useFieldState = < tempValueStrAndroid: null, })); + if (valueManager.areValuesEqual(utils, state.value, value)) { + return; + } + const context: FieldChangeHandlerContext> = { validationError: validator({ adapter, @@ -237,10 +241,6 @@ export const useFieldState = < }; const clearValue = () => { - if (valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue)) { - return; - } - publishValue({ value: valueManager.emptyValue, referenceValue: state.referenceValue, @@ -254,20 +254,16 @@ export const useFieldState = < } const activeSection = state.sections[selectedSectionIndexes.startIndex]; - - if (activeSection.value === '') { - return; - } - const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection); const nonEmptySectionCountBefore = activeDateManager .getSections(state.sections) .filter((section) => section.value !== '').length; - const isTheOnlyNonEmptySection = nonEmptySectionCountBefore === 1; + const hasNoOtherNonEmptySections = + nonEmptySectionCountBefore === (activeSection.value === '' ? 0 : 1); const newSections = setSectionValue(selectedSectionIndexes.startIndex, ''); - const newActiveDate = isTheOnlyNonEmptySection ? null : utils.date(new Date('')); + const newActiveDate = hasNoOtherNonEmptySections ? null : utils.date(new Date('')); const newValues = activeDateManager.getNewValuesFromNewActiveDate(newActiveDate); if ( From 2258ff3f75a0806ded4069a33bff3c55bff5ef42 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Mon, 16 Oct 2023 13:48:20 +0200 Subject: [PATCH 135/262] [docs] Make overview demo work in codesandbox (#10661) --- .../base-concepts/ComponentFamilies.js | 20 +++++++++++++++---- .../base-concepts/ComponentFamilies.tsx | 20 +++++++++++++++---- .../overview/CommonlyUsedComponents.js | 20 +++++++++++++++---- .../overview/CommonlyUsedComponents.tsx | 20 +++++++++++++++---- 4 files changed, 64 insertions(+), 16 deletions(-) diff --git a/docs/data/date-pickers/base-concepts/ComponentFamilies.js b/docs/data/date-pickers/base-concepts/ComponentFamilies.js index 1466da83eadb0..de11cabb3c2e3 100644 --- a/docs/data/date-pickers/base-concepts/ComponentFamilies.js +++ b/docs/data/date-pickers/base-concepts/ComponentFamilies.js @@ -1,6 +1,6 @@ import * as React from 'react'; -import Link from 'next/link'; import dayjs from 'dayjs'; +import { styled } from '@mui/material/styles'; 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'; @@ -13,13 +13,25 @@ import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInput import Stack from '@mui/material/Stack'; import Tooltip from '@mui/material/Tooltip'; +const ProSpan = styled('span')({ + display: 'inline-block', + height: '1em', + width: '1em', + verticalAlign: 'middle', + marginLeft: '0.3em', + marginBottom: '0.08em', + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundImage: 'url(https://mui.com/static/x/pro.svg)', +}); + function ProLabel({ children }) { return ( - - - + + + {children} diff --git a/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx b/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx index 9d0b94fc655e3..a5d4ce28c561c 100644 --- a/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx +++ b/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import Link from 'next/link'; import dayjs from 'dayjs'; +import { styled } from '@mui/material/styles'; 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'; @@ -13,13 +13,25 @@ import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInput import Stack from '@mui/material/Stack'; import Tooltip from '@mui/material/Tooltip'; +const ProSpan = styled('span')({ + display: 'inline-block', + height: '1em', + width: '1em', + verticalAlign: 'middle', + marginLeft: '0.3em', + marginBottom: '0.08em', + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundImage: 'url(https://mui.com/static/x/pro.svg)', +}); + function ProLabel({ children }: { children: React.ReactNode }) { return ( - - - + + + {children} diff --git a/docs/data/date-pickers/overview/CommonlyUsedComponents.js b/docs/data/date-pickers/overview/CommonlyUsedComponents.js index 998657c63796d..71e181a247898 100644 --- a/docs/data/date-pickers/overview/CommonlyUsedComponents.js +++ b/docs/data/date-pickers/overview/CommonlyUsedComponents.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Link from 'next/link'; +import { styled } from '@mui/material/styles'; import Tooltip from '@mui/material/Tooltip'; import Stack from '@mui/material/Stack'; import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; @@ -10,6 +10,18 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +const ProSpan = styled('span')({ + display: 'inline-block', + height: '1em', + width: '1em', + verticalAlign: 'middle', + marginLeft: '0.3em', + marginBottom: '0.08em', + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundImage: 'url(https://mui.com/static/x/pro.svg)', +}); + function Label({ componentName, valueType, isProOnly }) { const content = ( @@ -21,9 +33,9 @@ function Label({ componentName, valueType, isProOnly }) { return ( - - - + + + {content} diff --git a/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx b/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx index 8bce409df5047..1b301e5b83817 100644 --- a/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx +++ b/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Link from 'next/link'; +import { styled } from '@mui/material/styles'; import Tooltip from '@mui/material/Tooltip'; import Stack from '@mui/material/Stack'; import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; @@ -10,6 +10,18 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +const ProSpan = styled('span')({ + display: 'inline-block', + height: '1em', + width: '1em', + verticalAlign: 'middle', + marginLeft: '0.3em', + marginBottom: '0.08em', + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundImage: 'url(https://mui.com/static/x/pro.svg)', +}); + function Label({ componentName, valueType, @@ -29,9 +41,9 @@ function Label({ return ( - - - + + + {content} From 8f0fb2e6cdad4ef31c4abe2685f78fd7951d2559 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 16 Oct 2023 14:47:42 +0200 Subject: [PATCH 136/262] Bump @types/sinon to ^10.0.19 (#10602) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index bbacdbccac1e5..0b3dcdba15c9a 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "@types/react-dom": "^18.2.9", "@types/react-test-renderer": "^18.0.3", "@types/requestidlecallback": "^0.3.5", - "@types/sinon": "^10.0.18", + "@types/sinon": "^10.0.19", "@types/yargs": "^17.0.26", "@typescript-eslint/eslint-plugin": "^6.7.3", "@typescript-eslint/parser": "^6.7.3", diff --git a/yarn.lock b/yarn.lock index 99f09d0b129b2..a070ebe4713e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3129,10 +3129,10 @@ resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a" integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw== -"@types/sinon@^10.0.18": - version "10.0.18" - resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-10.0.18.tgz#659d2059c2206162e111dfaa2d8e9e9837c68212" - integrity sha512-OpQC9ug8BcnNxue2WF5aTruMaDRFn6NyfaE4DmAKOlQMn54b7CnCvDFV3wj5fk/HbSSTYmOYs2bTb5ShANjyQg== +"@types/sinon@^10.0.19": + version "10.0.19" + resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-10.0.19.tgz#752b752bc40bb5af0bb1aec29bde49b139b91d35" + integrity sha512-MWZNGPSchIdDfb5FL+VFi4zHsHbNOTQEgjqFQk7HazXSXwUU9PAX3z9XBqb3AJGYr9YwrtCtaSMsT3brYsN/jQ== dependencies: "@types/sinonjs__fake-timers" "*" From b9448a6fae0a38f75284acc5d0f97f9be398d0e5 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 16 Oct 2023 14:48:47 +0200 Subject: [PATCH 137/262] Bump typescript-eslint to ^6.7.5 (#10605) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 4 +- .../eslint-plugin-material-ui/package.json | 2 +- yarn.lock | 100 +++++++++--------- 3 files changed, 53 insertions(+), 53 deletions(-) diff --git a/package.json b/package.json index 0b3dcdba15c9a..d6c86b80766f4 100644 --- a/package.json +++ b/package.json @@ -105,8 +105,8 @@ "@types/requestidlecallback": "^0.3.5", "@types/sinon": "^10.0.19", "@types/yargs": "^17.0.26", - "@typescript-eslint/eslint-plugin": "^6.7.3", - "@typescript-eslint/parser": "^6.7.3", + "@typescript-eslint/eslint-plugin": "^6.7.5", + "@typescript-eslint/parser": "^6.7.5", "axe-core": "4.8.2", "babel-loader": "^9.1.3", "babel-plugin-istanbul": "^6.1.1", diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json index 6583cd81793a5..3a196fcb6254f 100644 --- a/packages/eslint-plugin-material-ui/package.json +++ b/packages/eslint-plugin-material-ui/package.json @@ -7,7 +7,7 @@ "devDependencies": { "@types/eslint": "^8.44.3", "@typescript-eslint/experimental-utils": "^5.62.0", - "@typescript-eslint/parser": "^6.7.3" + "@typescript-eslint/parser": "^6.7.5" }, "scripts": { "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.js' --timeout 3000" diff --git a/yarn.lock b/yarn.lock index a070ebe4713e4..bebff5cd7743a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3153,16 +3153,16 @@ dependencies: "@types/yargs-parser" "*" -"@typescript-eslint/eslint-plugin@^6.7.3": - version "6.7.3" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.7.3.tgz#d98046e9f7102d49a93d944d413c6055c47fafd7" - integrity sha512-vntq452UHNltxsaaN+L9WyuMch8bMd9CqJ3zhzTPXXidwbf5mqqKCVXEuvRZUqLJSTLeWE65lQwyXsRGnXkCTA== +"@typescript-eslint/eslint-plugin@^6.7.5": + version "6.7.5" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.7.5.tgz#f4024b9f63593d0c2b5bd6e4ca027e6f30934d4f" + integrity sha512-JhtAwTRhOUcP96D0Y6KYnwig/MRQbOoLGXTON2+LlyB/N35SP9j1boai2zzwXb7ypKELXMx3DVk9UTaEq1vHEw== dependencies: "@eslint-community/regexpp" "^4.5.1" - "@typescript-eslint/scope-manager" "6.7.3" - "@typescript-eslint/type-utils" "6.7.3" - "@typescript-eslint/utils" "6.7.3" - "@typescript-eslint/visitor-keys" "6.7.3" + "@typescript-eslint/scope-manager" "6.7.5" + "@typescript-eslint/type-utils" "6.7.5" + "@typescript-eslint/utils" "6.7.5" + "@typescript-eslint/visitor-keys" "6.7.5" debug "^4.3.4" graphemer "^1.4.0" ignore "^5.2.4" @@ -3177,15 +3177,15 @@ dependencies: "@typescript-eslint/utils" "5.62.0" -"@typescript-eslint/parser@^6.7.3": - version "6.7.3" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.7.3.tgz#aaf40092a32877439e5957e18f2d6a91c82cc2fd" - integrity sha512-TlutE+iep2o7R8Lf+yoer3zU6/0EAUc8QIBB3GYBc1KGz4c4TRm83xwXUZVPlZ6YCLss4r77jbu6j3sendJoiQ== +"@typescript-eslint/parser@^6.7.5": + version "6.7.5" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.7.5.tgz#8d7ca3d1fbd9d5a58cc4d30b2aa797a760137886" + integrity sha512-bIZVSGx2UME/lmhLcjdVc7ePBwn7CLqKarUBL4me1C5feOd663liTGjMBGVcGr+BhnSLeP4SgwdvNnnkbIdkCw== dependencies: - "@typescript-eslint/scope-manager" "6.7.3" - "@typescript-eslint/types" "6.7.3" - "@typescript-eslint/typescript-estree" "6.7.3" - "@typescript-eslint/visitor-keys" "6.7.3" + "@typescript-eslint/scope-manager" "6.7.5" + "@typescript-eslint/types" "6.7.5" + "@typescript-eslint/typescript-estree" "6.7.5" + "@typescript-eslint/visitor-keys" "6.7.5" debug "^4.3.4" "@typescript-eslint/scope-manager@5.62.0": @@ -3196,21 +3196,21 @@ "@typescript-eslint/types" "5.62.0" "@typescript-eslint/visitor-keys" "5.62.0" -"@typescript-eslint/scope-manager@6.7.3": - version "6.7.3" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.7.3.tgz#07e5709c9bdae3eaf216947433ef97b3b8b7d755" - integrity sha512-wOlo0QnEou9cHO2TdkJmzF7DFGvAKEnB82PuPNHpT8ZKKaZu6Bm63ugOTn9fXNJtvuDPanBc78lGUGGytJoVzQ== +"@typescript-eslint/scope-manager@6.7.5": + version "6.7.5" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.7.5.tgz#1cf33b991043886cd67f4f3600b8e122fc14e711" + integrity sha512-GAlk3eQIwWOJeb9F7MKQ6Jbah/vx1zETSDw8likab/eFcqkjSD7BI75SDAeC5N2L0MmConMoPvTsmkrg71+B1A== dependencies: - "@typescript-eslint/types" "6.7.3" - "@typescript-eslint/visitor-keys" "6.7.3" + "@typescript-eslint/types" "6.7.5" + "@typescript-eslint/visitor-keys" "6.7.5" -"@typescript-eslint/type-utils@6.7.3": - version "6.7.3" - resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.7.3.tgz#c2c165c135dda68a5e70074ade183f5ad68f3400" - integrity sha512-Fc68K0aTDrKIBvLnKTZ5Pf3MXK495YErrbHb1R6aTpfK5OdSFj0rVN7ib6Tx6ePrZ2gsjLqr0s98NG7l96KSQw== +"@typescript-eslint/type-utils@6.7.5": + version "6.7.5" + resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.7.5.tgz#0a65949ec16588d8956f6d967f7d9c84ddb2d72a" + integrity sha512-Gs0qos5wqxnQrvpYv+pf3XfcRXW6jiAn9zE/K+DlmYf6FcpxeNYN0AIETaPR7rHO4K2UY+D0CIbDP9Ut0U4m1g== dependencies: - "@typescript-eslint/typescript-estree" "6.7.3" - "@typescript-eslint/utils" "6.7.3" + "@typescript-eslint/typescript-estree" "6.7.5" + "@typescript-eslint/utils" "6.7.5" debug "^4.3.4" ts-api-utils "^1.0.1" @@ -3219,10 +3219,10 @@ resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f" integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ== -"@typescript-eslint/types@6.7.3": - version "6.7.3" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.7.3.tgz#0402b5628a63f24f2dc9d4a678e9a92cc50ea3e9" - integrity sha512-4g+de6roB2NFcfkZb439tigpAMnvEIg3rIjWQ+EM7IBaYt/CdJt6em9BJ4h4UpdgaBWdmx2iWsafHTrqmgIPNw== +"@typescript-eslint/types@6.7.5": + version "6.7.5" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.7.5.tgz#4571320fb9cf669de9a95d9849f922c3af809790" + integrity sha512-WboQBlOXtdj1tDFPyIthpKrUb+kZf2VroLZhxKa/VlwLlLyqv/PwUNgL30BlTVZV1Wu4Asu2mMYPqarSO4L5ZQ== "@typescript-eslint/typescript-estree@5.62.0": version "5.62.0" @@ -3237,13 +3237,13 @@ semver "^7.3.7" tsutils "^3.21.0" -"@typescript-eslint/typescript-estree@6.7.3": - version "6.7.3" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.7.3.tgz#ec5bb7ab4d3566818abaf0e4a8fa1958561b7279" - integrity sha512-YLQ3tJoS4VxLFYHTw21oe1/vIZPRqAO91z6Uv0Ss2BKm/Ag7/RVQBcXTGcXhgJMdA4U+HrKuY5gWlJlvoaKZ5g== +"@typescript-eslint/typescript-estree@6.7.5": + version "6.7.5" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.7.5.tgz#4578de1a26e9f24950f029a4f00d1bfe41f15a39" + integrity sha512-NhJiJ4KdtwBIxrKl0BqG1Ur+uw7FiOnOThcYx9DpOGJ/Abc9z2xNzLeirCG02Ig3vkvrc2qFLmYSSsaITbKjlg== dependencies: - "@typescript-eslint/types" "6.7.3" - "@typescript-eslint/visitor-keys" "6.7.3" + "@typescript-eslint/types" "6.7.5" + "@typescript-eslint/visitor-keys" "6.7.5" debug "^4.3.4" globby "^11.1.0" is-glob "^4.0.3" @@ -3264,17 +3264,17 @@ eslint-scope "^5.1.1" semver "^7.3.7" -"@typescript-eslint/utils@6.7.3": - version "6.7.3" - resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.7.3.tgz#96c655816c373135b07282d67407cb577f62e143" - integrity sha512-vzLkVder21GpWRrmSR9JxGZ5+ibIUSudXlW52qeKpzUEQhRSmyZiVDDj3crAth7+5tmN1ulvgKaCU2f/bPRCzg== +"@typescript-eslint/utils@6.7.5": + version "6.7.5" + resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.7.5.tgz#ab847b53d6b65e029314b8247c2336843dba81ab" + integrity sha512-pfRRrH20thJbzPPlPc4j0UNGvH1PjPlhlCMq4Yx7EGjV7lvEeGX0U6MJYe8+SyFutWgSHsdbJ3BXzZccYggezA== dependencies: "@eslint-community/eslint-utils" "^4.4.0" "@types/json-schema" "^7.0.12" "@types/semver" "^7.5.0" - "@typescript-eslint/scope-manager" "6.7.3" - "@typescript-eslint/types" "6.7.3" - "@typescript-eslint/typescript-estree" "6.7.3" + "@typescript-eslint/scope-manager" "6.7.5" + "@typescript-eslint/types" "6.7.5" + "@typescript-eslint/typescript-estree" "6.7.5" semver "^7.5.4" "@typescript-eslint/visitor-keys@5.62.0": @@ -3285,12 +3285,12 @@ "@typescript-eslint/types" "5.62.0" eslint-visitor-keys "^3.3.0" -"@typescript-eslint/visitor-keys@6.7.3": - version "6.7.3" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.7.3.tgz#83809631ca12909bd2083558d2f93f5747deebb2" - integrity sha512-HEVXkU9IB+nk9o63CeICMHxFWbHWr3E1mpilIQBe9+7L/lH97rleFLVtYsfnWB+JVMaiFnEaxvknvmIzX+CqVg== +"@typescript-eslint/visitor-keys@6.7.5": + version "6.7.5" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.7.5.tgz#84c68d6ceb5b12d5246b918b84f2b79affd6c2f1" + integrity sha512-3MaWdDZtLlsexZzDSdQWsFQ9l9nL8B80Z4fImSpyllFC/KLqWQRdEcB+gGGO+N3Q2uL40EsG66wZLsohPxNXvg== dependencies: - "@typescript-eslint/types" "6.7.3" + "@typescript-eslint/types" "6.7.5" eslint-visitor-keys "^3.4.1" "@webassemblyjs/ast@1.11.5", "@webassemblyjs/ast@^1.11.5": From 11699655de983a87c1bc063ed167598e697a367a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 16 Oct 2023 15:59:39 +0100 Subject: [PATCH 138/262] [docs] Improve meta description Solve this recommendation https://app.ahrefs.com/site-audit/3523498/90/data-explorer?columns=pageRating%2Curl%2Ctraffic%2ChttpCode%2Cdepth%2CmetaDescription%2CmetaDescriptionLength%2CnrMetaDescription%2Ccompliant&filterId=b48fb21f3fc97a0f7d1983df614c1dfb&issueId=8d785026-001c-11e8-aa34-001e67ed4656 --- docs/data/introduction/overview/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/introduction/overview/overview.md b/docs/data/introduction/overview/overview.md index 6fe4380551add..97084bfe954bf 100644 --- a/docs/data/introduction/overview/overview.md +++ b/docs/data/introduction/overview/overview.md @@ -4,7 +4,7 @@ title: Overview # MUI X - Overview -

          MUI X is a collection of advanced React UI components for complex use cases.

          +

          MUI X is a collection of advanced React UI components for complex use cases. Use the native integration with Material UI or extend your design system.

          ## Introduction From bf4156429f77f1447909e53f1c6b91ecc78c8bd9 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Wed, 18 Oct 2023 13:58:37 +0200 Subject: [PATCH 139/262] [docs] Add example about how to add an axis (#10709) --- docs/data/charts/axis/HidingAxis.js | 14 ++++++++++++++ docs/data/charts/axis/HidingAxis.tsx | 14 ++++++++++++++ docs/data/charts/axis/HidingAxis.tsx.preview | 7 +++++++ docs/data/charts/axis/axis.md | 7 +++++++ 4 files changed, 42 insertions(+) create mode 100644 docs/data/charts/axis/HidingAxis.js create mode 100644 docs/data/charts/axis/HidingAxis.tsx create mode 100644 docs/data/charts/axis/HidingAxis.tsx.preview diff --git a/docs/data/charts/axis/HidingAxis.js b/docs/data/charts/axis/HidingAxis.js new file mode 100644 index 0000000000000..98fd4dc12ecd2 --- /dev/null +++ b/docs/data/charts/axis/HidingAxis.js @@ -0,0 +1,14 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +export default function HidingAxis() { + return ( + + ); +} diff --git a/docs/data/charts/axis/HidingAxis.tsx b/docs/data/charts/axis/HidingAxis.tsx new file mode 100644 index 0000000000000..98fd4dc12ecd2 --- /dev/null +++ b/docs/data/charts/axis/HidingAxis.tsx @@ -0,0 +1,14 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +export default function HidingAxis() { + return ( + + ); +} diff --git a/docs/data/charts/axis/HidingAxis.tsx.preview b/docs/data/charts/axis/HidingAxis.tsx.preview new file mode 100644 index 0000000000000..6976af3c2bcca --- /dev/null +++ b/docs/data/charts/axis/HidingAxis.tsx.preview @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md index 5530233612569..b535623a45c5b 100644 --- a/docs/data/charts/axis/axis.md +++ b/docs/data/charts/axis/axis.md @@ -101,6 +101,13 @@ Those pros can accept three type of value: {{"demo": "ModifyAxisPosition.js"}} +### Hiding axis + +To hide an axis, set it to `null`. +For example `leftAxis={null}` hides the left axis. + +{{"demo": "HidingAxis.js"}} + ### Rendering Axes rendering can be further customized. Below is an interactive demonstration of the axis props. From 3f5d36d29cfc63ee10fa5594d27402dabca21d1c Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Wed, 18 Oct 2023 18:41:53 +0200 Subject: [PATCH 140/262] [fields] Correctly respect leading zeroes on seconds section (#10713) --- .../src/internals/hooks/useField/useField.utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts index 1f50d8e275fde..10e7196c5978a 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts @@ -473,7 +473,7 @@ export const doesSectionFormatHaveLeadingZeros = ( } case 'seconds': { - return utils.formatByString(utils.setMinutes(now, 1), format).length > 1; + return utils.formatByString(utils.setSeconds(now, 1), format).length > 1; } default: { From be453d20cac2cd4849df41c3dd0733f8b442e196 Mon Sep 17 00:00:00 2001 From: Nora <72460825+noraleonte@users.noreply.github.com> Date: Wed, 18 Oct 2023 23:36:43 +0300 Subject: [PATCH 141/262] [docs] Customization Playground - fix DesktopDatePicker sx props and styled examples (#10665) --- .../date-picker/examplesConfig.ts | 67 ++++++++++++++----- .../components/CustomizationPlayground.tsx | 2 +- .../utils/useCustomizationPlayground.tsx | 64 +++++++++++++++--- 3 files changed, 108 insertions(+), 25 deletions(-) diff --git a/docs/data/date-pickers/date-picker/examplesConfig.ts b/docs/data/date-pickers/date-picker/examplesConfig.ts index 1bf8eb66d8503..059a94ff0f8b3 100644 --- a/docs/data/date-pickers/date-picker/examplesConfig.ts +++ b/docs/data/date-pickers/date-picker/examplesConfig.ts @@ -129,14 +129,17 @@ export const datePickerExamples: PickersSubcomponentType = { type: 'success', }, sxProp: { - type: 'success', + type: 'warning', + parentSlot: 'layout', + comments: + 'Because of the structure of the DesktopDatePicker, the `sx` prop needs to be applied to the `layout` slot', }, - styledComponents: { type: 'warning', + parentSlot: 'layout', + parentComponent: 'PickersLayout', comments: - 'You will need to specify the `disablePortal` prop for the popper in order to be able to use `DesktopDatePicker` as a styled component ', - componentProps: { slotProps: { popper: { disablePortal: true } } }, + 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component', }, }, slots: ['root'], @@ -147,14 +150,17 @@ export const datePickerExamples: PickersSubcomponentType = { type: 'success', }, sxProp: { - type: 'success', + type: 'warning', + parentSlot: 'layout', + comments: + 'Because of the structure of the DesktopDatePicker, the `sx` prop needs to be applied to the `layout` slot', }, - styledComponents: { type: 'warning', + parentSlot: 'layout', + parentComponent: 'PickersLayout', comments: - 'You will need to specify the `disablePortal` prop for the popper in order to be able to use `DesktopDatePicker` as a styled component ', - componentProps: { slotProps: { popper: { disablePortal: true } } }, + 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component', }, }, slots: ['root', 'label', 'labelContainer', 'switchViewButton', 'switchViewIcon'], @@ -165,14 +171,17 @@ export const datePickerExamples: PickersSubcomponentType = { type: 'success', }, sxProp: { - type: 'success', + type: 'warning', + parentSlot: 'layout', + comments: + 'Because of the structure of the DesktopDatePicker, the `sx` prop needs to be applied to the `layout` slot', }, - styledComponents: { type: 'warning', + parentSlot: 'layout', + parentComponent: 'PickersLayout', comments: - 'You will need to specify the `disablePortal` prop for the popper in order to be able to use `DesktopDatePicker` as a styled component ', - componentProps: { slotProps: { popper: { disablePortal: true } } }, + 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component', }, }, slots: ['root', 'weekDayLabel', 'weekContainer', 'weekNumberLabel', 'weekNumber'], @@ -183,17 +192,45 @@ export const datePickerExamples: PickersSubcomponentType = { type: 'success', }, sxProp: { + type: 'warning', + parentSlot: 'layout', + comments: + 'Because of the structure of the DesktopDatePicker, the `sx` prop needs to be applied to the `layout` slot', + }, + styledComponents: { + type: 'warning', + parentSlot: 'layout', + parentComponent: 'PickersLayout', + comments: + 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component', + }, + }, + slots: ['root', 'today'], + }, + PickersMonth: { + examples: { + customTheme: { type: 'success', + componentProps: { views: ['month'] }, + }, + sxProp: { + type: 'warning', + parentSlot: 'layout', + comments: + 'Because of the structure of the DesktopDatePicker, the `sx` prop needs to be applied to the `layout` slot', + componentProps: { views: ['month'] }, }, styledComponents: { type: 'warning', + parentSlot: 'layout', + parentComponent: 'PickersLayout', comments: - 'You will need to specify the `disablePortal` prop for the popper in order to be able to use `DesktopDatePicker` as a styled component ', - componentProps: { slotProps: { popper: { disablePortal: true } } }, + 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component', + componentProps: { views: ['month'] }, }, }, - slots: ['root', 'today'], + slots: ['root', 'monthButton'], }, }; diff --git a/docs/src/modules/components/CustomizationPlayground.tsx b/docs/src/modules/components/CustomizationPlayground.tsx index 1b504beacd449..e211ecc4a9ac6 100644 --- a/docs/src/modules/components/CustomizationPlayground.tsx +++ b/docs/src/modules/components/CustomizationPlayground.tsx @@ -90,7 +90,7 @@ const ConfigItemLabel = styled(Typography)(({ theme }) => ({ const SlotItemsWrapper = styled(Box)(({ theme }) => ({ display: 'flex', - gap: theme.spacing(1), + gap: theme.spacing(0.5), flexWrap: 'wrap', })); diff --git a/docs/src/modules/utils/useCustomizationPlayground.tsx b/docs/src/modules/utils/useCustomizationPlayground.tsx index de93f241083dd..ea8a49945b6db 100644 --- a/docs/src/modules/utils/useCustomizationPlayground.tsx +++ b/docs/src/modules/utils/useCustomizationPlayground.tsx @@ -11,7 +11,9 @@ export type CustomizationLabelType = { type CustomizationItemType = { type: 'warning' | 'success'; comments?: string; - componentProps?: Object; + componentProps?: any; + parentSlot?: string; + parentComponent?: string; }; export type CustomizationItemsType = Partial<{ [k in keyof CustomizationLabelType]: CustomizationItemType; @@ -93,8 +95,9 @@ export function withStyles( if (selectedCustomizationOption === 'sxProp') { const sxProp = { - [`& .Mui${selectedDemo}-${selectedSlot}`]: { ...tokens }, + [`.Mui${selectedDemo}-${selectedSlot}`]: { ...tokens }, }; + return ; } @@ -115,7 +118,7 @@ export function withStyles( if (selectedCustomizationOption === 'styledComponents') { const StyledComponent = styled(Component as React.JSXElementConstructor)(() => ({ - [`& .Mui${selectedDemo}-${selectedSlot}`]: { ...tokens }, + [`.Mui${selectedDemo}-${selectedSlot}`]: { ...tokens }, })); return ; } @@ -131,6 +134,7 @@ interface Props Pick { theme: Theme; examples: CustomizationItemType; + selectedExample: CustomizationItemType | null; } /* I use this method to parse whatever component props are passed in and format them for the code example, @@ -142,7 +146,7 @@ function formatComponentProps(componentProps?: Object, spacing: number = 1) { return (Object.keys(obj) as Array) .map((key) => { const getValue = (val: any) => { - if (typeof val === 'string') { + if (typeof val === 'string' && !val.includes('Styled')) { return `'${val}'`; } if (separator === '=' && typeof val !== 'object') { @@ -166,7 +170,7 @@ function formatComponentProps(componentProps?: Object, spacing: number = 1) { )}]${separator === '=' ? '}' : ''}`; } - return `${indent}${key}${separator}${getValue(value)}`; + return `${indent}${key}${separator}${getValue(value)},`; }) .join('\n'); } @@ -185,6 +189,7 @@ const getCodeExample = ({ selectedTokens, componentName, examples, + selectedExample, theme, }: Props) => { const tokens = { @@ -244,12 +249,26 @@ const getCodeExample = ({ } if (selectedCustomizationOption === 'sxProp') { - code = `${code}\n<${componentName}${formatComponentProps(examples.componentProps, 1)} + if (selectedExample?.parentSlot) { + const componentProps = { + ...examples.componentProps, + slotProps: { + ...examples.componentProps?.slotProps, + [selectedExample?.parentSlot]: { + sx: { [`'.Mui${selectedDemo}-${selectedSlot}'`]: tokens }, + }, + }, + }; + code = `${code}\n<${componentName}${formatComponentProps(componentProps, 1)} +/>`; + } else { + code = `${code}\n<${componentName}${formatComponentProps(examples.componentProps, 1)} sx={{ - '& .Mui${selectedDemo}-${selectedSlot}': {${getTokensString(3)} + '.Mui${selectedDemo}-${selectedSlot}': {${getTokensString(3)} }, }} />`; + } } else if (selectedCustomizationOption === 'customTheme') { code = `import { createTheme } from '@mui/material/styles'\n${code} const newTheme = (theme) => createTheme({ @@ -267,11 +286,32 @@ const newTheme = (theme) => createTheme({ <${componentName}${formatComponentProps(examples.componentProps, 2)} />           `; } else if (selectedCustomizationOption === 'styledComponents') { + if (selectedExample?.parentSlot && selectedExample?.parentComponent) { + const componentProps = { + ...examples.componentProps, + slots: { + ...examples.componentProps?.slots, + [selectedExample?.parentSlot]: `Styled${selectedExample?.parentComponent}`, + }, + }; + return `import { styled } from '@mui/material/styles'\n${code} +const Styled${selectedExample?.parentComponent} = styled(${selectedExample?.parentComponent})({ + '.Mui${selectedDemo}-${selectedSlot}': {${getTokensString(2)} + } +}) + +export default function StyledPickerContainer() { + return ( + <${componentName} ${formatComponentProps(componentProps, 3)} + /> + ); +}`; + } return `import { styled } from '@mui/material/styles'\n${code} const Styled${componentName} = styled(${componentName})({ - '& .Mui${selectedDemo}-${selectedSlot}': {${getTokensString(2)} + '.Mui${selectedDemo}-${selectedSlot}': {${getTokensString(2)} } -})) +}) export default function StyledPickerContainer() { return ( @@ -337,6 +377,12 @@ export function useCustomizationPlayground({ examples: examples[selectedDemo].examples[ selectedCustomizationOption ] as CustomizationItemType, + selectedExample: + selectedDemo && selectedCustomizationOption + ? (examples[selectedDemo]?.examples[ + selectedCustomizationOption + ] as CustomizationItemType) + : null, theme, }); if (code) { From bb7e6a8e3079b21416aeb0eb72c1b2176a40fb61 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Thu, 19 Oct 2023 09:30:20 +0200 Subject: [PATCH 142/262] [charts] Skip rendering if not width or height (#10714) --- packages/x-charts/src/ResponsiveChartContainer/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/x-charts/src/ResponsiveChartContainer/index.tsx b/packages/x-charts/src/ResponsiveChartContainer/index.tsx index f4a4c5472c633..b59865c706af3 100644 --- a/packages/x-charts/src/ResponsiveChartContainer/index.tsx +++ b/packages/x-charts/src/ResponsiveChartContainer/index.tsx @@ -120,7 +120,9 @@ export const ResponsiveChartContainer = React.forwardRef(function ResponsiveChar return ( - + {width && height ? ( + + ) : null} ); }); From 3b48ee45e8406797c128f7781802728fc664786a Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Thu, 19 Oct 2023 09:33:54 +0200 Subject: [PATCH 143/262] [charts] Support animation (#9926) Co-authored-by: Nora <72460825+noraleonte@users.noreply.github.com> Co-authored-by: Lukas --- docs/data/charts/bars/BarAnimation.js | 146 ++++++++++ docs/data/charts/bars/BarAnimation.tsx | 146 ++++++++++ docs/data/charts/bars/bars.md | 19 ++ docs/pages/x/api/charts/bar-chart.json | 1 + docs/pages/x/api/charts/bar-plot.json | 1 + .../api-docs/charts/bar-chart.json | 5 + .../api-docs/charts/bar-plot.json | 5 + packages/x-charts/package.json | 2 + packages/x-charts/src/BarChart/BarChart.tsx | 13 +- packages/x-charts/src/BarChart/BarElement.tsx | 7 +- packages/x-charts/src/BarChart/BarPlot.tsx | 249 ++++++++++++------ .../x-charts/src/ChartContainer/index.tsx | 3 + .../x-charts/src/hooks/useReducedMotion.ts | 31 +++ renovate.json | 4 + test/regressions/index.js | 6 +- test/regressions/index.test.js | 5 + yarn.lock | 5 + 17 files changed, 555 insertions(+), 93 deletions(-) create mode 100644 docs/data/charts/bars/BarAnimation.js create mode 100644 docs/data/charts/bars/BarAnimation.tsx create mode 100644 packages/x-charts/src/hooks/useReducedMotion.ts diff --git a/docs/data/charts/bars/BarAnimation.js b/docs/data/charts/bars/BarAnimation.js new file mode 100644 index 0000000000000..fc02054c2216c --- /dev/null +++ b/docs/data/charts/bars/BarAnimation.js @@ -0,0 +1,146 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import Slider from '@mui/material/Slider'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; +import { BarChart } from '@mui/x-charts/BarChart'; + +export default function BarAnimation() { + const [seriesNb, setSeriesNb] = React.useState(2); + const [itemNb, setItemNb] = React.useState(5); + const [skipAnimation, setSkipAnimation] = React.useState(false); + + const handleItemNbChange = (event, newValue) => { + if (typeof newValue !== 'number') { + return; + } + setItemNb(newValue); + }; + const handleSeriesNbChange = (event, newValue) => { + if (typeof newValue !== 'number') { + return; + } + setSeriesNb(newValue); + }; + + return ( + + ({ ...s, data: s.data.slice(0, itemNb) }))} + skipAnimation={skipAnimation} + /> + setSkipAnimation(event.target.checked)} /> + } + label="skipAnimation" + labelPlacement="end" + /> + + Number of items + + + + Number of series + + + + ); +} + +const highlightScope = { + highlighted: 'series', + faded: 'global', +}; + +const series = [ + { + label: 'series 1', + data: [ + 2423, 2210, 764, 1879, 1478, 1373, 1891, 2171, 620, 1269, 724, 1707, 1188, + 1879, 626, 1635, 2177, 516, 1793, 1598, + ], + }, + { + label: 'series 2', + data: [ + 2362, 2254, 1962, 1336, 586, 1069, 2194, 1629, 2173, 2031, 1757, 862, 2446, + 910, 2430, 2300, 805, 1835, 1684, 2197, + ], + }, + { + label: 'series 3', + data: [ + 1145, 1214, 975, 2266, 1768, 2341, 747, 1282, 1780, 1766, 2115, 1720, 1057, + 2000, 1716, 2253, 619, 1626, 1209, 1786, + ], + }, + { + label: 'series 4', + data: [ + 2361, 979, 2430, 1768, 1913, 2342, 1868, 1319, 1038, 2139, 1691, 935, 2262, + 1580, 692, 1559, 1344, 1442, 1593, 1889, + ], + }, + { + label: 'series 5', + data: [ + 968, 1371, 1381, 1060, 1327, 934, 1779, 1361, 878, 1055, 1737, 2380, 875, 2408, + 1066, 1802, 1442, 1567, 1552, 1742, + ], + }, + { + label: 'series 6', + data: [ + 2316, 1845, 2057, 1479, 1859, 1015, 1569, 1448, 1354, 1007, 799, 1748, 1454, + 1968, 1129, 1196, 2158, 540, 1482, 880, + ], + }, + { + label: 'series 7', + data: [ + 2140, 2082, 708, 2032, 554, 1365, 2121, 1639, 2430, 2440, 814, 1328, 883, 1811, + 2322, 1743, 700, 2131, 1473, 957, + ], + }, + { + label: 'series 8', + data: [ + 1074, 744, 2487, 823, 2252, 2317, 2139, 1818, 2256, 1769, 1123, 1461, 672, + 1335, 960, 1871, 2305, 1231, 2005, 908, + ], + }, + { + label: 'series 9', + data: [ + 1792, 886, 2472, 1546, 2164, 2323, 2435, 1268, 2368, 2158, 2200, 1316, 552, + 1874, 1771, 1038, 1838, 2029, 1793, 1117, + ], + }, + { + label: 'series 10', + data: [ + 1433, 1161, 1107, 1517, 1410, 1058, 676, 1280, 1936, 1774, 698, 1721, 1421, + 785, 1752, 800, 990, 1809, 1985, 665, + ], + }, +].map((s) => ({ ...s, highlightScope })); diff --git a/docs/data/charts/bars/BarAnimation.tsx b/docs/data/charts/bars/BarAnimation.tsx new file mode 100644 index 0000000000000..882a33e02afcf --- /dev/null +++ b/docs/data/charts/bars/BarAnimation.tsx @@ -0,0 +1,146 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import Slider from '@mui/material/Slider'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; +import { BarChart } from '@mui/x-charts/BarChart'; + +export default function BarAnimation() { + const [seriesNb, setSeriesNb] = React.useState(2); + const [itemNb, setItemNb] = React.useState(5); + const [skipAnimation, setSkipAnimation] = React.useState(false); + + const handleItemNbChange = (event: Event, newValue: number | number[]) => { + if (typeof newValue !== 'number') { + return; + } + setItemNb(newValue); + }; + const handleSeriesNbChange = (event: Event, newValue: number | number[]) => { + if (typeof newValue !== 'number') { + return; + } + setSeriesNb(newValue); + }; + + return ( + + ({ ...s, data: s.data.slice(0, itemNb) }))} + skipAnimation={skipAnimation} + /> + setSkipAnimation(event.target.checked)} /> + } + label="skipAnimation" + labelPlacement="end" + /> + + Number of items + + + + Number of series + + + + ); +} + +const highlightScope = { + highlighted: 'series', + faded: 'global', +} as const; + +const series = [ + { + label: 'series 1', + data: [ + 2423, 2210, 764, 1879, 1478, 1373, 1891, 2171, 620, 1269, 724, 1707, 1188, + 1879, 626, 1635, 2177, 516, 1793, 1598, + ], + }, + { + label: 'series 2', + data: [ + 2362, 2254, 1962, 1336, 586, 1069, 2194, 1629, 2173, 2031, 1757, 862, 2446, + 910, 2430, 2300, 805, 1835, 1684, 2197, + ], + }, + { + label: 'series 3', + data: [ + 1145, 1214, 975, 2266, 1768, 2341, 747, 1282, 1780, 1766, 2115, 1720, 1057, + 2000, 1716, 2253, 619, 1626, 1209, 1786, + ], + }, + { + label: 'series 4', + data: [ + 2361, 979, 2430, 1768, 1913, 2342, 1868, 1319, 1038, 2139, 1691, 935, 2262, + 1580, 692, 1559, 1344, 1442, 1593, 1889, + ], + }, + { + label: 'series 5', + data: [ + 968, 1371, 1381, 1060, 1327, 934, 1779, 1361, 878, 1055, 1737, 2380, 875, 2408, + 1066, 1802, 1442, 1567, 1552, 1742, + ], + }, + { + label: 'series 6', + data: [ + 2316, 1845, 2057, 1479, 1859, 1015, 1569, 1448, 1354, 1007, 799, 1748, 1454, + 1968, 1129, 1196, 2158, 540, 1482, 880, + ], + }, + { + label: 'series 7', + data: [ + 2140, 2082, 708, 2032, 554, 1365, 2121, 1639, 2430, 2440, 814, 1328, 883, 1811, + 2322, 1743, 700, 2131, 1473, 957, + ], + }, + { + label: 'series 8', + data: [ + 1074, 744, 2487, 823, 2252, 2317, 2139, 1818, 2256, 1769, 1123, 1461, 672, + 1335, 960, 1871, 2305, 1231, 2005, 908, + ], + }, + { + label: 'series 9', + data: [ + 1792, 886, 2472, 1546, 2164, 2323, 2435, 1268, 2368, 2158, 2200, 1316, 552, + 1874, 1771, 1038, 1838, 2029, 1793, 1117, + ], + }, + { + label: 'series 10', + data: [ + 1433, 1161, 1107, 1517, 1410, 1058, 676, 1280, 1936, 1774, 698, 1721, 1421, + 785, 1752, 800, 990, 1809, 1985, 665, + ], + }, +].map((s) => ({ ...s, highlightScope })); diff --git a/docs/data/charts/bars/bars.md b/docs/data/charts/bars/bars.md index deb677346affa..d815f8a40d181 100644 --- a/docs/data/charts/bars/bars.md +++ b/docs/data/charts/bars/bars.md @@ -61,3 +61,22 @@ Bar charts can be rendered with a horizontal layout by providing the `layout="ho If you're using [composition](/x/react-charts/#multiple-charts), you should set the property `layout: 'horizontal'` to each bar series object. {{"demo": "HorizontalBars.js"}} + +## Animation + +To skip animation at the creation and update of your chart you can use the `skipAnimation` prop. +When set to `true` it skips animation powered by `@react-spring/web`. + +Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important). + +```jsx +// For a single component chart + + +// For a composed chart + + + +``` + +{{"demo": "BarAnimation.js"}} diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index 90f88f7b340a5..1aebdcee51c36 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -24,6 +24,7 @@ }, "default": "null" }, + "skipAnimation": { "type": { "name": "bool" } }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" }, "topAxis": { diff --git a/docs/pages/x/api/charts/bar-plot.json b/docs/pages/x/api/charts/bar-plot.json index 36df19d48773a..9ce5a22fa9fcd 100644 --- a/docs/pages/x/api/charts/bar-plot.json +++ b/docs/pages/x/api/charts/bar-plot.json @@ -1,5 +1,6 @@ { "props": { + "skipAnimation": { "type": { "name": "bool" } }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, diff --git a/docs/translations/api-docs/charts/bar-chart.json b/docs/translations/api-docs/charts/bar-chart.json index e785806eeef7c..d2438d2ddb044 100644 --- a/docs/translations/api-docs/charts/bar-chart.json +++ b/docs/translations/api-docs/charts/bar-chart.json @@ -21,6 +21,11 @@ "deprecated": "", "typeDescriptions": {} }, + "skipAnimation": { + "description": "If true, animations are skiped.", + "deprecated": "", + "typeDescriptions": {} + }, "slotProps": { "description": "The props used for each component slot.", "deprecated": "", diff --git a/docs/translations/api-docs/charts/bar-plot.json b/docs/translations/api-docs/charts/bar-plot.json index 193abb7bf3a9f..27268d44f0ee3 100644 --- a/docs/translations/api-docs/charts/bar-plot.json +++ b/docs/translations/api-docs/charts/bar-plot.json @@ -1,6 +1,11 @@ { "componentDescription": "", "propDescriptions": { + "skipAnimation": { + "description": "If true, animations are skiped.", + "deprecated": "", + "typeDescriptions": {} + }, "slotProps": { "description": "The props used for each component slot.", "deprecated": "", diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index dadc059151bfd..1c7db645f61d2 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -40,6 +40,8 @@ "dependencies": { "@babel/runtime": "^7.23.1", "@mui/base": "^5.0.0-beta.17", + "@react-spring/rafz": "^9.7.3", + "@react-spring/web": "^9.7.3", "clsx": "^2.0.0", "d3-color": "^3.1.0", "d3-scale": "^4.0.2", diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index 411f03be20823..dd4b3631042fa 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import useId from '@mui/utils/useId'; import PropTypes from 'prop-types'; -import { BarPlot, BarPlotSlotComponentProps, BarPlotSlotsComponent } from './BarPlot'; +import { BarPlot, BarPlotProps, BarPlotSlotComponentProps, BarPlotSlotsComponent } from './BarPlot'; import { ResponsiveChartContainer, ResponsiveChartContainerProps, @@ -39,7 +39,8 @@ export interface BarChartSlotComponentProps export interface BarChartProps extends Omit, - Omit { + Omit, + Pick { series: MakeOptional[]; tooltip?: ChartsTooltipProps; axisHighlight?: ChartsAxisHighlightProps; @@ -90,6 +91,7 @@ const BarChart = React.forwardRef(function BarChart(props: BarChartProps, ref) { leftAxis, rightAxis, bottomAxis, + skipAnimation, children, slots, slotProps, @@ -141,7 +143,7 @@ const BarChart = React.forwardRef(function BarChart(props: BarChartProps, ref) { } > - + { return composeClasses(slots, getBarElementUtilityClass, classes); }; -export const BarElementPath = styled('rect', { +export const BarElementPath = styled(animated.rect, { name: 'MuiBarElement', slot: 'Root', overridesResolver: (_, styles) => styles.root, @@ -92,6 +93,7 @@ export function BarElement(props: BarElementProps) { highlightScope, slots, slotProps, + style, ...other } = props; const getInteractionItemProps = useInteractionItemProps(highlightScope); @@ -123,6 +125,7 @@ export function BarElement(props: BarElementProps) { additionalProps: { ...other, ...getInteractionItemProps({ type: 'bar', seriesId: id, dataIndex }), + style, className: classes.root, }, ownerState, diff --git a/packages/x-charts/src/BarChart/BarPlot.tsx b/packages/x-charts/src/BarChart/BarPlot.tsx index e0eebe1f831e0..b1c89ee87c532 100644 --- a/packages/x-charts/src/BarChart/BarPlot.tsx +++ b/packages/x-charts/src/BarChart/BarPlot.tsx @@ -1,9 +1,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { useTransition } from '@react-spring/web'; import { SeriesContext } from '../context/SeriesContextProvider'; import { CartesianContext } from '../context/CartesianContextProvider'; import { BarElement, BarElementProps } from './BarElement'; import { isBandScaleConfig } from '../models/axis'; +import { FormatterResult } from '../models/seriesType/config'; +import { HighlightScope } from '../context/HighlightProvider'; +import { BarSeriesType } from '../models'; /** * Solution of the equations @@ -45,7 +49,138 @@ export interface BarPlotSlotComponentProps { bar?: Partial; } -export interface BarPlotProps extends Pick {} +export interface BarPlotProps extends Pick { + /** + * If `true`, animations are skiped. + * @default false + */ + skipAnimation?: boolean; +} + +interface CompletedBarData { + bottom: number; + top: number; + seriesId: string; + dataIndex: number; + layout: BarSeriesType['layout']; + x: number; + y: number; + xOrigin: number; + yOrigin: number; + height: number; + width: number; + color: string; + highlightScope?: Partial; +} + +const useCompletedData = (): CompletedBarData[] => { + const seriesData = + React.useContext(SeriesContext).bar ?? + ({ series: {}, stackingGroups: [], seriesOrder: [] } as FormatterResult<'bar'>); + const axisData = React.useContext(CartesianContext); + + const { series, stackingGroups } = seriesData; + const { xAxis, yAxis, xAxisIds, yAxisIds } = axisData; + const defaultXAxisId = xAxisIds[0]; + const defaultYAxisId = yAxisIds[0]; + + const data = stackingGroups.flatMap(({ ids: groupIds }, groupIndex) => { + return groupIds.flatMap((seriesId) => { + const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId; + const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId; + + const xAxisConfig = xAxis[xAxisKey]; + const yAxisConfig = yAxis[yAxisKey]; + + const verticalLayout = series[seriesId].layout === 'vertical'; + let baseScaleConfig; + if (verticalLayout) { + if (!isBandScaleConfig(xAxisConfig)) { + throw new Error( + `Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`, + ); + } + if (xAxis[xAxisKey].data === undefined) { + throw new Error(`Axis with id "${xAxisKey}" shoud have data property`); + } + baseScaleConfig = xAxisConfig; + } else { + if (!isBandScaleConfig(yAxisConfig)) { + throw new Error( + `Axis with id "${yAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`, + ); + } + + if (yAxis[yAxisKey].data === undefined) { + throw new Error(`Axis with id "${xAxisKey}" shoud have data property`); + } + baseScaleConfig = yAxisConfig; + } + + const xScale = xAxisConfig.scale; + const yScale = yAxisConfig.scale; + + const bandWidth = baseScaleConfig.scale.bandwidth(); + + const { barWidth, offset } = getBandSize({ + bandWidth, + numberOfGroups: stackingGroups.length, + gapRatio: baseScaleConfig.barGapRatio, + }); + const barOffset = groupIndex * (barWidth + offset); + + const { stackedData, color } = series[seriesId]; + + return stackedData.map((values, dataIndex: number) => { + const bottom = Math.min(...values); + const top = Math.max(...values); + + return { + bottom, + top, + seriesId, + dataIndex, + layout: series[seriesId].layout, + x: verticalLayout + ? xScale(xAxis[xAxisKey].data?.[dataIndex])! + barOffset + : xScale(bottom), + y: verticalLayout ? yScale(top) : yScale(yAxis[yAxisKey].data?.[dataIndex])! + barOffset, + xOrigin: xScale(0), + yOrigin: yScale(0), + height: verticalLayout ? Math.abs(yScale(bottom) - yScale(top)) : barWidth, + width: verticalLayout ? barWidth : Math.abs(xScale(bottom) - xScale(top)), + color, + highlightScope: series[seriesId].highlightScope, + }; + }); + }); + }); + + return data; +}; + +const getOutStyle = ({ layout, yOrigin, x, width, y, xOrigin, height }: CompletedBarData) => ({ + ...(layout === 'vertical' + ? { + y: yOrigin, + x, + height: 0, + width, + } + : { + y, + x: xOrigin, + height, + width: 0, + }), +}); + +const getInStyle = ({ x, width, y, height }: CompletedBarData) => ({ + y, + x, + height, + width, +}); /** * Demos: @@ -59,94 +194,29 @@ export interface BarPlotProps extends Pick `${bar.seriesId}-${bar.dataIndex}`, + from: getOutStyle, + leave: getOutStyle, + enter: getInStyle, + update: getInStyle, + immediate: skipAnimation, + }); return ( - {stackingGroups.flatMap(({ ids: groupIds }, groupIndex) => { - return groupIds.flatMap((seriesId) => { - const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId; - const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId; - - const xAxisConfig = xAxis[xAxisKey]; - const yAxisConfig = yAxis[yAxisKey]; - - const verticalLayout = series[seriesId].layout === 'vertical'; - let baseScaleConfig; - if (verticalLayout) { - if (!isBandScaleConfig(xAxisConfig)) { - throw new Error( - `Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`, - ); - } - if (xAxis[xAxisKey].data === undefined) { - throw new Error(`Axis with id "${xAxisKey}" shoud have data property`); - } - baseScaleConfig = xAxisConfig; - } else { - if (!isBandScaleConfig(yAxisConfig)) { - throw new Error( - `Axis with id "${yAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`, - ); - } - - if (yAxis[yAxisKey].data === undefined) { - throw new Error(`Axis with id "${xAxisKey}" shoud have data property`); - } - baseScaleConfig = yAxisConfig; - } - - const xScale = xAxisConfig.scale; - const yScale = yAxisConfig.scale; - - const bandWidth = baseScaleConfig.scale.bandwidth(); - - const { barWidth, offset } = getBandSize({ - bandWidth, - numberOfGroups: stackingGroups.length, - gapRatio: baseScaleConfig.barGapRatio, - }); - const barOffset = groupIndex * (barWidth + offset); - - const { stackedData, color } = series[seriesId]; - - return stackedData.map((values, dataIndex: number) => { - const baseline = Math.min(...values); - const value = Math.max(...values); - return ( - - ); - }); - }); - })} + {transition((style, { seriesId, dataIndex, color, highlightScope }) => ( + + ))} ); } @@ -156,6 +226,11 @@ BarPlot.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * If `true`, animations are skiped. + * @default false + */ + skipAnimation: PropTypes.bool, /** * The props used for each component slot. * @default {} diff --git a/packages/x-charts/src/ChartContainer/index.tsx b/packages/x-charts/src/ChartContainer/index.tsx index a84819f32798d..534922106176e 100644 --- a/packages/x-charts/src/ChartContainer/index.tsx +++ b/packages/x-charts/src/ChartContainer/index.tsx @@ -6,6 +6,7 @@ import { SeriesContextProviderProps, } from '../context/SeriesContextProvider'; import { InteractionProvider } from '../context/InteractionProvider'; +import { useReducedMotion } from '../hooks/useReducedMotion'; import { ChartsSurface, ChartsSurfaceProps } from '../ChartsSurface'; import { CartesianContextProvider, @@ -45,6 +46,8 @@ export const ChartContainer = React.forwardRef(function ChartContainer( const svgRef = React.useRef(null); const handleRef = useForkRef(ref, svgRef); + useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion) + return ( diff --git a/packages/x-charts/src/hooks/useReducedMotion.ts b/packages/x-charts/src/hooks/useReducedMotion.ts new file mode 100644 index 0000000000000..f73b9b373b985 --- /dev/null +++ b/packages/x-charts/src/hooks/useReducedMotion.ts @@ -0,0 +1,31 @@ +import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web'; + +/** + * Returns `boolean` or `null`, used to automatically + * set skipAnimations to the value of the user's + * `prefers-reduced-motion` query. + * + * The return value, post-effect, is the value of their prefered setting + */ +export const useReducedMotion = () => { + // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13 + + useIsomorphicLayoutEffect(() => { + const mql = window.matchMedia('(prefers-reduced-motion)'); + + const handleMediaChange = (e: MediaQueryListEvent | MediaQueryList) => { + Globals.assign({ + // Modification such the react-spring implementation such that this hook can remove animation but never activate animation. + skipAnimation: e.matches || undefined, + }); + }; + + handleMediaChange(mql); + + mql.addEventListener('change', handleMediaChange); + + return () => { + mql.removeEventListener('change', handleMediaChange); + }; + }, []); +}; diff --git a/renovate.json b/renovate.json index 74df005b313b7..d4ecaa53305f1 100644 --- a/renovate.json +++ b/renovate.json @@ -22,6 +22,10 @@ "groupName": "D3", "matchPackagePatterns": ["d3-*", "@types/d3-*"] }, + { + "groupName": "react-spring", + "matchPackagePatterns": "@react-spring/*" + }, { "groupName": "Emotion", "matchPackagePatterns": "@emotion/*" diff --git a/test/regressions/index.js b/test/regressions/index.js index 7bf6963c3cebd..8c15137e78e93 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -4,13 +4,17 @@ import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import { LicenseInfo } from '@mui/x-license-pro'; import TestViewer from 'test/regressions/TestViewer'; import { useFakeTimers } from 'sinon'; - +import { Globals } from '@react-spring/web'; // This license key is only valid for use with Material UI SAS's projects // See the terms: https://mui.com/r/x-license-eula LicenseInfo.setLicenseKey( 'd483a722e0dc68f4d483487da0ccac45Tz1NVUktRG9jLEU9MTcxNTE2MzgwOTMwNyxTPXByZW1pdW0sTE09c3Vic2NyaXB0aW9uLEtWPTI=', ); +Globals.assign({ + skipAnimation: true, +}); + const blacklist = [ /^docs-(.*)(?<=NoSnap)\.png$/, // Excludes demos that we don't want 'docs-data-grid-filtering/RemoveBuiltInOperators.png', // Needs interaction diff --git a/test/regressions/index.test.js b/test/regressions/index.test.js index 589858f752d39..88f833b908dec 100644 --- a/test/regressions/index.test.js +++ b/test/regressions/index.test.js @@ -124,6 +124,11 @@ async function main() { ); } + if (/^\docs-charts-.*/.test(pathURL)) { + // Run one tick of the clock to get the final animation state + await sleep(10); + } + const screenshotPath = path.resolve(screenshotDir, `${route.replace(baseUrl, '.')}.png`); await fse.ensureDir(path.dirname(screenshotPath)); diff --git a/yarn.lock b/yarn.lock index bebff5cd7743a..750e6864371a0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2630,6 +2630,11 @@ "@react-spring/shared" "~9.7.3" "@react-spring/types" "~9.7.3" +"@react-spring/rafz@^9.7.3": + version "9.7.3" + resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.7.3.tgz#d6a9695c581f58a49e047ff7ed5646e0b681396c" + integrity sha512-9vzW1zJPcC4nS3aCV+GgcsK/WLaB520Iyvm55ARHfM5AuyBqycjvh1wbmWmgCyJuX4VPoWigzemq1CaaeRSHhQ== + "@react-spring/shared@~9.7.3": version "9.7.3" resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.3.tgz#4cf29797847c689912aec4e62e34c99a4d5d9e53" From a13750b3ac9fbcad8a57f43c0fdba50573aa409c Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 11:04:58 +0300 Subject: [PATCH 144/262] Bump react-hook-form to ^7.47.0 (#10607) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/package.json b/docs/package.json index ec647acfea96a..5b6ef2f009081 100644 --- a/docs/package.json +++ b/docs/package.json @@ -77,7 +77,7 @@ "react": "^18.2.0", "react-docgen": "^5.4.3", "react-dom": "^18.2.0", - "react-hook-form": "^7.46.2", + "react-hook-form": "^7.47.0", "react-is": "^18.2.0", "react-router": "^6.11.2", "react-router-dom": "^6.11.2", diff --git a/yarn.lock b/yarn.lock index 750e6864371a0..b45e24ae40868 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11918,10 +11918,10 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-hook-form@^7.46.2: - version "7.46.2" - resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.46.2.tgz#051e3cb2a73f3e86de739f2198c6042902158c43" - integrity sha512-x1DWmHQchV7x2Rq9l99M/cQHC8JGchAnw9Z0uTz5KrPa0bTl/Inm1NR7ceOARfIrkNuQNAhuSuZPYa6k7QYn3Q== +react-hook-form@^7.47.0: + version "7.47.0" + resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.47.0.tgz#a42f07266bd297ddf1f914f08f4b5f9783262f31" + integrity sha512-F/TroLjTICipmHeFlMrLtNLceO2xr1jU3CyiNla5zdwsGUGu2UOxxR4UyJgLlhMwLW/Wzp4cpJ7CPfgJIeKdSg== "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^16.13.1, react-is@^16.7.0, react-is@^17.0.1, react-is@^18.0.0, react-is@^18.2.0: version "18.2.0" From 79bbfa6e80ec286805d33901a764a23e136360d1 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Thu, 19 Oct 2023 10:14:52 +0200 Subject: [PATCH 145/262] [charts] Use new text component to avoid tick label overflow on x-axis (#10648) Co-authored-by: Lukas Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> --- .../charts/axis/AxisCustomizationNoSnap.js | 3 - .../axis/AxisTextCustomizationNoSnap.js | 170 ++++++++++++++++++ docs/data/charts/axis/TickLabelPosition.js | 97 ++++++++++ docs/data/charts/axis/TickLabelPosition.tsx | 96 ++++++++++ docs/data/charts/axis/TickNumber.js | 2 +- docs/data/charts/axis/TickNumber.tsx | 2 +- docs/data/charts/axis/TickPosition.js | 96 ++++++++++ docs/data/charts/axis/TickPosition.tsx | 95 ++++++++++ .../data/charts/axis/TickPosition.tsx.preview | 16 ++ docs/data/charts/axis/axis.md | 49 ++++- docs/data/charts/lines/CSSCustomization.js | 2 +- docs/data/charts/lines/CSSCustomization.tsx | 2 +- docs/data/charts/lines/StackedAreas.js | 2 +- docs/data/charts/lines/StackedAreas.tsx | 2 +- docs/data/charts/stacking/StackOrderDemo.js | 22 ++- docs/data/charts/stacking/StackOrderDemo.tsx | 21 ++- docs/pages/x/api/charts/bar-chart.json | 8 +- docs/pages/x/api/charts/charts-axis.json | 8 +- docs/pages/x/api/charts/charts-x-axis.json | 24 ++- docs/pages/x/api/charts/charts-y-axis.json | 24 ++- docs/pages/x/api/charts/line-chart.json | 8 +- docs/pages/x/api/charts/pie-chart.json | 8 +- docs/pages/x/api/charts/scatter-chart.json | 8 +- docs/pages/x/api/charts/spark-line-chart.json | 2 +- .../api-docs/charts/charts-axis.json | 5 +- .../api-docs/charts/charts-x-axis.json | 25 ++- .../api-docs/charts/charts-y-axis.json | 25 ++- packages/x-charts/src/BarChart/BarChart.tsx | 48 +++++ .../x-charts/src/ChartsAxis/ChartsAxis.tsx | 32 ++++ .../x-charts/src/ChartsAxis/axisClasses.ts | 2 +- .../src/ChartsLegend/ChartsLegend.tsx | 33 ++-- .../x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 140 ++++++++++++--- .../x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 52 ++++-- packages/x-charts/src/LineChart/LineChart.tsx | 48 +++++ packages/x-charts/src/PieChart/PieChart.tsx | 48 +++++ .../src/ScatterChart/ScatterChart.tsx | 48 +++++ .../src/SparkLineChart/SparkLineChart.tsx | 4 + .../src/context/CartesianContextProvider.tsx | 16 ++ packages/x-charts/src/hooks/useMounted.ts | 20 +++ packages/x-charts/src/hooks/useTicks.ts | 43 ++++- .../src/internals/components/ChartsText.tsx | 52 +++--- packages/x-charts/src/internals/domUtils.ts | 1 - packages/x-charts/src/internals/geometry.ts | 47 +++++ packages/x-charts/src/models/axis.ts | 33 +++- .../x-charts/src/models/seriesType/line.ts | 4 +- 45 files changed, 1328 insertions(+), 165 deletions(-) create mode 100644 docs/data/charts/axis/AxisTextCustomizationNoSnap.js create mode 100644 docs/data/charts/axis/TickLabelPosition.js create mode 100644 docs/data/charts/axis/TickLabelPosition.tsx create mode 100644 docs/data/charts/axis/TickPosition.js create mode 100644 docs/data/charts/axis/TickPosition.tsx create mode 100644 docs/data/charts/axis/TickPosition.tsx.preview create mode 100644 packages/x-charts/src/hooks/useMounted.ts create mode 100644 packages/x-charts/src/internals/geometry.ts diff --git a/docs/data/charts/axis/AxisCustomizationNoSnap.js b/docs/data/charts/axis/AxisCustomizationNoSnap.js index e3c0a10209a0f..f33f0352d4813 100644 --- a/docs/data/charts/axis/AxisCustomizationNoSnap.js +++ b/docs/data/charts/axis/AxisCustomizationNoSnap.js @@ -17,7 +17,6 @@ const defaultXAxis = { disableTicks: false, fontSize: 12, label: 'My axis', - labelFontSize: 14, tickSize: 6, }; export default function AxisCustomizationNoSnap() { @@ -27,9 +26,7 @@ export default function AxisCustomizationNoSnap() { data={[ { propName: 'disableLine', knob: 'switch', defaultValue: false }, { propName: 'disableTicks', knob: 'switch', defaultValue: false }, - { propName: 'fontSize', knom: 'number', defaultValue: 12 }, { propName: 'label', knob: 'input', defaultValue: 'my axis' }, - { propName: 'labelFontSize', knom: 'number', defaultValue: 14 }, { propName: 'tickSize', knob: 'number', defaultValue: 6 }, ]} renderDemo={(props) => ( diff --git a/docs/data/charts/axis/AxisTextCustomizationNoSnap.js b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js new file mode 100644 index 0000000000000..9f8cc6aa3d6b3 --- /dev/null +++ b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js @@ -0,0 +1,170 @@ +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'; + +const chartSetting = { + height: 300, +}; +const dataset = [ + { + london: 59, + paris: 57, + newYork: 86, + seoul: 21, + month: 'Jan', + }, + { + london: 50, + paris: 52, + newYork: 78, + seoul: 28, + month: 'Fev', + }, + { + london: 47, + paris: 53, + newYork: 106, + seoul: 41, + month: 'Mar', + }, + { + london: 54, + paris: 56, + newYork: 92, + seoul: 73, + month: 'Apr', + }, + { + london: 57, + paris: 69, + newYork: 92, + seoul: 99, + month: 'May', + }, + { + london: 60, + paris: 63, + newYork: 103, + seoul: 144, + month: 'June', + }, + { + london: 59, + paris: 60, + newYork: 105, + seoul: 319, + month: 'July', + }, + { + london: 65, + paris: 60, + newYork: 106, + seoul: 249, + month: 'Aug', + }, + { + london: 51, + paris: 51, + newYork: 95, + seoul: 131, + month: 'Sept', + }, + { + london: 60, + paris: 65, + newYork: 97, + seoul: 55, + month: 'Oct', + }, + { + london: 67, + paris: 64, + newYork: 76, + seoul: 48, + month: 'Nov', + }, + { + london: 61, + paris: 70, + newYork: 103, + seoul: 25, + month: 'Dec', + }, +]; + +const valueFormatter = (value) => `${value}mm`; + +export default function AxisTextCustomizationNoSnap() { + return ( + ( + + + + )} + getCode={({ props }) => + [ + `import { ScatterChart } from '@mui/x-charts/ScatterChart';`, + '', + `', + ].join('\n') + } + /> + ); +} diff --git a/docs/data/charts/axis/TickLabelPosition.js b/docs/data/charts/axis/TickLabelPosition.js new file mode 100644 index 0000000000000..ea95912dce0a4 --- /dev/null +++ b/docs/data/charts/axis/TickLabelPosition.js @@ -0,0 +1,97 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; + +import { LineChart } from '@mui/x-charts/LineChart'; + +export default function TickLabelPosition() { + return ( + + [0, 12].includes(time.getHours()), + tickLabelInterval: (time) => time.getHours() === 0, + }, + { + ...xAxisCommon, + id: 'topAxis', + scaleType: 'point', + }, + ]} + {...config} + /> + + ); +} + +const valueFormatter = (date) => + date.toLocaleDateString('fr-FR', { + month: '2-digit', + day: '2-digit', + }); + +const timeData = [ + new Date(2023, 7, 31), + new Date(2023, 7, 31, 3), + new Date(2023, 7, 31, 6), + new Date(2023, 7, 31, 9), + new Date(2023, 7, 31, 12), + new Date(2023, 7, 31, 15), + new Date(2023, 7, 31, 18), + new Date(2023, 8, 1), + new Date(2023, 8, 1, 3), + new Date(2023, 8, 1, 6), + new Date(2023, 8, 1, 9), + new Date(2023, 8, 1, 12), + new Date(2023, 8, 1, 15), + new Date(2023, 8, 1, 18), + new Date(2023, 8, 2), + new Date(2023, 8, 2, 3), + new Date(2023, 8, 2, 6), + new Date(2023, 8, 2, 9), + new Date(2023, 8, 2, 12), + new Date(2023, 8, 2, 15), + new Date(2023, 8, 2, 18), + new Date(2023, 8, 3), + new Date(2023, 8, 3, 3), + new Date(2023, 8, 3, 6), + new Date(2023, 8, 3, 9), + new Date(2023, 8, 3, 12), + new Date(2023, 8, 3, 15), + new Date(2023, 8, 3, 18), + new Date(2023, 8, 4), +]; + +const y1 = [ + 5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50, + 20, 30, 35, 28, 25, 27, 30, 28, 25, +]; + +const y2 = [ + 90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42, + 45, 46, 42, 39, 40, 41, 43, 50, +]; + +const showMark = (params) => { + const { position } = params; + return position.getHours() === 0; +}; + +const config = { + series: [ + { data: y1, showMark }, + { data: y2, showMark }, + ], + height: 300, + topAxis: 'topAxis', + bottomAxis: 'bottomAxis', + leftAxis: null, +}; +const xAxisCommon = { + data: timeData, + scaleType: 'time', + valueFormatter, +}; diff --git a/docs/data/charts/axis/TickLabelPosition.tsx b/docs/data/charts/axis/TickLabelPosition.tsx new file mode 100644 index 0000000000000..ce2ad07ff5dac --- /dev/null +++ b/docs/data/charts/axis/TickLabelPosition.tsx @@ -0,0 +1,96 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { ShowMarkParams } from '@mui/x-charts/models'; +import { LineChart } from '@mui/x-charts/LineChart'; + +export default function TickLabelPosition() { + return ( + + [0, 12].includes(time.getHours()), + tickLabelInterval: (time) => time.getHours() === 0, + }, + { + ...xAxisCommon, + id: 'topAxis', + scaleType: 'point', + }, + ]} + {...config} + /> + + ); +} + +const valueFormatter = (date: Date) => + date.toLocaleDateString('fr-FR', { + month: '2-digit', + day: '2-digit', + }); + +const timeData = [ + new Date(2023, 7, 31), + new Date(2023, 7, 31, 3), + new Date(2023, 7, 31, 6), + new Date(2023, 7, 31, 9), + new Date(2023, 7, 31, 12), + new Date(2023, 7, 31, 15), + new Date(2023, 7, 31, 18), + new Date(2023, 8, 1), + new Date(2023, 8, 1, 3), + new Date(2023, 8, 1, 6), + new Date(2023, 8, 1, 9), + new Date(2023, 8, 1, 12), + new Date(2023, 8, 1, 15), + new Date(2023, 8, 1, 18), + new Date(2023, 8, 2), + new Date(2023, 8, 2, 3), + new Date(2023, 8, 2, 6), + new Date(2023, 8, 2, 9), + new Date(2023, 8, 2, 12), + new Date(2023, 8, 2, 15), + new Date(2023, 8, 2, 18), + new Date(2023, 8, 3), + new Date(2023, 8, 3, 3), + new Date(2023, 8, 3, 6), + new Date(2023, 8, 3, 9), + new Date(2023, 8, 3, 12), + new Date(2023, 8, 3, 15), + new Date(2023, 8, 3, 18), + new Date(2023, 8, 4), +]; + +const y1 = [ + 5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50, + 20, 30, 35, 28, 25, 27, 30, 28, 25, +]; +const y2 = [ + 90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42, + 45, 46, 42, 39, 40, 41, 43, 50, +]; + +const showMark = (params: ShowMarkParams) => { + const { position } = params as ShowMarkParams; + return position.getHours() === 0; +}; + +const config = { + series: [ + { data: y1, showMark }, + { data: y2, showMark }, + ], + height: 300, + topAxis: 'topAxis', + bottomAxis: 'bottomAxis', + leftAxis: null, +}; +const xAxisCommon = { + data: timeData, + scaleType: 'time', + valueFormatter, +} as const; diff --git a/docs/data/charts/axis/TickNumber.js b/docs/data/charts/axis/TickNumber.js index 4a475f1ffc8b2..dc3c5a63f698e 100644 --- a/docs/data/charts/axis/TickNumber.js +++ b/docs/data/charts/axis/TickNumber.js @@ -29,7 +29,7 @@ const valueFormatter = (date) => const config = { series: [{ data: y1 }, { data: y2 }], - height: 400, + height: 300, topAxis: 'half days', leftAxis: null, }; diff --git a/docs/data/charts/axis/TickNumber.tsx b/docs/data/charts/axis/TickNumber.tsx index 265a7fa020237..24792c3df9425 100644 --- a/docs/data/charts/axis/TickNumber.tsx +++ b/docs/data/charts/axis/TickNumber.tsx @@ -29,7 +29,7 @@ const valueFormatter = (date: Date) => const config = { series: [{ data: y1 }, { data: y2 }], - height: 400, + height: 300, topAxis: 'half days', leftAxis: null, }; diff --git a/docs/data/charts/axis/TickPosition.js b/docs/data/charts/axis/TickPosition.js new file mode 100644 index 0000000000000..e4ee1e8160d41 --- /dev/null +++ b/docs/data/charts/axis/TickPosition.js @@ -0,0 +1,96 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; + +import { LineChart } from '@mui/x-charts/LineChart'; + +export default function TickPosition() { + return ( + + time.getHours() === 0, + }, + { + ...xAxisCommon, + id: 'topAxis', + scaleType: 'point', + }, + ]} + {...config} + /> + + ); +} + +const valueFormatter = (date) => + date.toLocaleDateString('fr-FR', { + month: '2-digit', + day: '2-digit', + }); + +const timeData = [ + new Date(2023, 7, 31), + new Date(2023, 7, 31, 3), + new Date(2023, 7, 31, 6), + new Date(2023, 7, 31, 9), + new Date(2023, 7, 31, 12), + new Date(2023, 7, 31, 15), + new Date(2023, 7, 31, 18), + new Date(2023, 8, 1), + new Date(2023, 8, 1, 3), + new Date(2023, 8, 1, 6), + new Date(2023, 8, 1, 9), + new Date(2023, 8, 1, 12), + new Date(2023, 8, 1, 15), + new Date(2023, 8, 1, 18), + new Date(2023, 8, 2), + new Date(2023, 8, 2, 3), + new Date(2023, 8, 2, 6), + new Date(2023, 8, 2, 9), + new Date(2023, 8, 2, 12), + new Date(2023, 8, 2, 15), + new Date(2023, 8, 2, 18), + new Date(2023, 8, 3), + new Date(2023, 8, 3, 3), + new Date(2023, 8, 3, 6), + new Date(2023, 8, 3, 9), + new Date(2023, 8, 3, 12), + new Date(2023, 8, 3, 15), + new Date(2023, 8, 3, 18), + new Date(2023, 8, 4), +]; + +const y1 = [ + 5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50, + 20, 30, 35, 28, 25, 27, 30, 28, 25, +]; + +const y2 = [ + 90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42, + 45, 46, 42, 39, 40, 41, 43, 50, +]; + +const showMark = (params) => { + const { position } = params; + return position.getHours() === 0; +}; + +const config = { + series: [ + { data: y1, showMark }, + { data: y2, showMark }, + ], + height: 300, + topAxis: 'topAxis', + bottomAxis: 'bottomAxis', + leftAxis: null, +}; +const xAxisCommon = { + data: timeData, + scaleType: 'time', + valueFormatter, +}; diff --git a/docs/data/charts/axis/TickPosition.tsx b/docs/data/charts/axis/TickPosition.tsx new file mode 100644 index 0000000000000..c18b8674dbfe3 --- /dev/null +++ b/docs/data/charts/axis/TickPosition.tsx @@ -0,0 +1,95 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { ShowMarkParams } from '@mui/x-charts/models'; +import { LineChart } from '@mui/x-charts/LineChart'; + +export default function TickPosition() { + return ( + + time.getHours() === 0, + }, + { + ...xAxisCommon, + id: 'topAxis', + scaleType: 'point', + }, + ]} + {...config} + /> + + ); +} + +const valueFormatter = (date: Date) => + date.toLocaleDateString('fr-FR', { + month: '2-digit', + day: '2-digit', + }); + +const timeData = [ + new Date(2023, 7, 31), + new Date(2023, 7, 31, 3), + new Date(2023, 7, 31, 6), + new Date(2023, 7, 31, 9), + new Date(2023, 7, 31, 12), + new Date(2023, 7, 31, 15), + new Date(2023, 7, 31, 18), + new Date(2023, 8, 1), + new Date(2023, 8, 1, 3), + new Date(2023, 8, 1, 6), + new Date(2023, 8, 1, 9), + new Date(2023, 8, 1, 12), + new Date(2023, 8, 1, 15), + new Date(2023, 8, 1, 18), + new Date(2023, 8, 2), + new Date(2023, 8, 2, 3), + new Date(2023, 8, 2, 6), + new Date(2023, 8, 2, 9), + new Date(2023, 8, 2, 12), + new Date(2023, 8, 2, 15), + new Date(2023, 8, 2, 18), + new Date(2023, 8, 3), + new Date(2023, 8, 3, 3), + new Date(2023, 8, 3, 6), + new Date(2023, 8, 3, 9), + new Date(2023, 8, 3, 12), + new Date(2023, 8, 3, 15), + new Date(2023, 8, 3, 18), + new Date(2023, 8, 4), +]; + +const y1 = [ + 5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50, + 20, 30, 35, 28, 25, 27, 30, 28, 25, +]; +const y2 = [ + 90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42, + 45, 46, 42, 39, 40, 41, 43, 50, +]; + +const showMark = (params: ShowMarkParams) => { + const { position } = params as ShowMarkParams; + return position.getHours() === 0; +}; + +const config = { + series: [ + { data: y1, showMark }, + { data: y2, showMark }, + ], + height: 300, + topAxis: 'topAxis', + bottomAxis: 'bottomAxis', + leftAxis: null, +}; +const xAxisCommon = { + data: timeData, + scaleType: 'time', + valueFormatter, +} as const; diff --git a/docs/data/charts/axis/TickPosition.tsx.preview b/docs/data/charts/axis/TickPosition.tsx.preview new file mode 100644 index 0000000000000..660569fb3b5c1 --- /dev/null +++ b/docs/data/charts/axis/TickPosition.tsx.preview @@ -0,0 +1,16 @@ + time.getHours() === 0, + }, + { + ...xAxisCommon, + id: 'topAxis', + scaleType: 'point', + }, + ]} + {...config} +/> \ No newline at end of file diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md index b535623a45c5b..e0b59a21235aa 100644 --- a/docs/data/charts/axis/axis.md +++ b/docs/data/charts/axis/axis.md @@ -67,7 +67,9 @@ xAxis={[{ min: 10, max: 50, }]} {{"demo": "MinMaxExample.js"}} -### Ticks positions +## Tick position + +### Automatic tick position You can customize the number of ticks with the property `tickNumber`. @@ -86,6 +88,43 @@ Here the top axis has a `tickMinStep` of half a day, and the bottom axis a `tick {{"demo": "TickNumber.js"}} +### Fixed tick positions + +If you want more control over the tick position, you can use the `tickInterval` property. + +This property accepts an array of values. +Ticks will be placed at those values. + +For axis with scale type `'point'`, the `tickInterval` property can be a filtering function of the type `(value, index) => boolean`. + +In the next demo, both axes are with `scaleType='point'`. +The top axis displays the default behavior. +It shows a tick for each point. +The bottom axis uses a filtering function to only display a tick at the beginning of a day. + +{{"demo": "TickPosition.js"}} + +### Filtering ticks label + +You can display labels only on a subset of ticks with the `tickLabelInterval` property. +It's a filtering function in the `(value, index) => boolean` form. + +For example `tickLabelInterval: (value, index) => index % 2 === 0` will show the label every two ticks. + +:::warning +The `value` and `index` arguments are those of the ticks, not the axis data. +::: + +By default, ticks are filtered such that their labels do not overlap. +You can override this behavior with `tickLabelInterval: () => true` which forces showing the tick label for each tick. + +In this example, the top axis is a reference for the default behavior. +Notice that tick labels do not overflow. + +At the bottom, you can see one tick for the beginning and the middle of the day but the tick label is only displayed for the beginning of the day. + +{{"demo": "TickLabelPosition.js"}} + ## Axis customization You can further customize the axis rendering besides the axis definition. @@ -114,7 +153,13 @@ Axes rendering can be further customized. Below is an interactive demonstration {{"demo": "AxisCustomizationNoSnap.js", "hideToolbar": true, "bg": "inline"}} -### Composition +### Text customization + +To customize the text elements (ticks label and the axis label) use the `tickLabelStyle` and `labelStyle` properties of the axis configuration. + +{{"demo": "AxisTextCustomizationNoSnap.js", "hideToolbar": true, "bg": "inline"}} + +## Composition If you are using composition, you have to provide the axis settings in the `` by using `xAxis` and `yAxis` props. diff --git a/docs/data/charts/lines/CSSCustomization.js b/docs/data/charts/lines/CSSCustomization.js index 256220f5f71cb..480e020b89566 100644 --- a/docs/data/charts/lines/CSSCustomization.js +++ b/docs/data/charts/lines/CSSCustomization.js @@ -71,7 +71,7 @@ export default function CSSCustomization() { id: 'Years', data: years, scaleType: 'time', - valueFormatter: (date) => date.getFullYear(), + valueFormatter: (date) => date.getFullYear().toString(), }, ]} series={[ diff --git a/docs/data/charts/lines/CSSCustomization.tsx b/docs/data/charts/lines/CSSCustomization.tsx index 256220f5f71cb..480e020b89566 100644 --- a/docs/data/charts/lines/CSSCustomization.tsx +++ b/docs/data/charts/lines/CSSCustomization.tsx @@ -71,7 +71,7 @@ export default function CSSCustomization() { id: 'Years', data: years, scaleType: 'time', - valueFormatter: (date) => date.getFullYear(), + valueFormatter: (date) => date.getFullYear().toString(), }, ]} series={[ diff --git a/docs/data/charts/lines/StackedAreas.js b/docs/data/charts/lines/StackedAreas.js index 76875e7605f59..5a895f8a4b44d 100644 --- a/docs/data/charts/lines/StackedAreas.js +++ b/docs/data/charts/lines/StackedAreas.js @@ -62,7 +62,7 @@ export default function StackedAreas() { id: 'Years', data: years, scaleType: 'time', - valueFormatter: (date) => date.getFullYear(), + valueFormatter: (date) => date.getFullYear().toString(), }, ]} series={[ diff --git a/docs/data/charts/lines/StackedAreas.tsx b/docs/data/charts/lines/StackedAreas.tsx index 76875e7605f59..5a895f8a4b44d 100644 --- a/docs/data/charts/lines/StackedAreas.tsx +++ b/docs/data/charts/lines/StackedAreas.tsx @@ -62,7 +62,7 @@ export default function StackedAreas() { id: 'Years', data: years, scaleType: 'time', - valueFormatter: (date) => date.getFullYear(), + valueFormatter: (date) => date.getFullYear().toString(), }, ]} series={[ diff --git a/docs/data/charts/stacking/StackOrderDemo.js b/docs/data/charts/stacking/StackOrderDemo.js index 2a838831f4768..849e21d887f4e 100644 --- a/docs/data/charts/stacking/StackOrderDemo.js +++ b/docs/data/charts/stacking/StackOrderDemo.js @@ -4,8 +4,6 @@ import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import { BarChart } from '@mui/x-charts/BarChart'; -import { axisClasses } from '@mui/x-charts/ChartsAxis'; - // Data comming from https://www.insee.fr/fr/statistiques/5013868 const commonTransportation = [ 6.5, 12.5, 17.2, 19.6, 20.1, 20.0, 19.5, 18.8, 18.2, 17.3, 16.4, 15.9, 15.2, 14.7, @@ -110,22 +108,22 @@ export default function StackOrderDemo() { diff --git a/docs/data/charts/stacking/StackOrderDemo.tsx b/docs/data/charts/stacking/StackOrderDemo.tsx index abcbbb16aa825..97449aeadfac0 100644 --- a/docs/data/charts/stacking/StackOrderDemo.tsx +++ b/docs/data/charts/stacking/StackOrderDemo.tsx @@ -4,7 +4,6 @@ import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import { BarChart } from '@mui/x-charts/BarChart'; import { StackOrderType } from '@mui/x-charts/models'; -import { axisClasses } from '@mui/x-charts/ChartsAxis'; // Data comming from https://www.insee.fr/fr/statistiques/5013868 const commonTransportation = [ @@ -105,22 +104,22 @@ export default function StackOrderDemo() { diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index 1aebdcee51c36..e50ae45c3a0f3 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -13,14 +13,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "null" }, @@ -30,7 +30,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/charts-axis.json b/docs/pages/x/api/charts/charts-axis.json index 284533555f66c..bf524fb1148ae 100644 --- a/docs/pages/x/api/charts/charts-axis.json +++ b/docs/pages/x/api/charts/charts-axis.json @@ -3,21 +3,21 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "xAxisIds[0] The id of the first provided axis" }, "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "null" }, @@ -26,7 +26,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/charts-x-axis.json b/docs/pages/x/api/charts/charts-x-axis.json index e1aa65e211405..ce99eb0bae3b3 100644 --- a/docs/pages/x/api/charts/charts-x-axis.json +++ b/docs/pages/x/api/charts/charts-x-axis.json @@ -6,12 +6,32 @@ "disableTicks": { "type": { "name": "bool" } }, "fill": { "type": { "name": "string" }, "default": "'currentColor'" }, "label": { "type": { "name": "string" } }, - "labelFontSize": { "type": { "name": "number" }, "default": "14" }, + "labelFontSize": { + "type": { "name": "number" }, + "default": "14", + "deprecated": true, + "deprecationInfo": "Consider using labelStyle.fontSize instead." + }, + "labelStyle": { "type": { "name": "object" } }, "position": { "type": { "name": "enum", "description": "'bottom'
          | 'top'" } }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" }, "stroke": { "type": { "name": "string" }, "default": "'currentColor'" }, - "tickFontSize": { "type": { "name": "number" }, "default": "12" }, + "tickFontSize": { + "type": { "name": "number" }, + "default": "12", + "deprecated": true, + "deprecationInfo": "Consider using tickLabelStyle.fontSize instead." + }, + "tickInterval": { + "type": { "name": "union", "description": "'auto'
          | array
          | func" }, + "default": "'auto'" + }, + "tickLabelInterval": { + "type": { "name": "union", "description": "'auto'
          | func" }, + "default": "'auto'" + }, + "tickLabelStyle": { "type": { "name": "object" } }, "tickMaxStep": { "type": { "name": "number" } }, "tickMinStep": { "type": { "name": "number" } }, "tickNumber": { "type": { "name": "number" } }, diff --git a/docs/pages/x/api/charts/charts-y-axis.json b/docs/pages/x/api/charts/charts-y-axis.json index e49510b318500..812cac2fcadea 100644 --- a/docs/pages/x/api/charts/charts-y-axis.json +++ b/docs/pages/x/api/charts/charts-y-axis.json @@ -6,12 +6,32 @@ "disableTicks": { "type": { "name": "bool" } }, "fill": { "type": { "name": "string" }, "default": "'currentColor'" }, "label": { "type": { "name": "string" } }, - "labelFontSize": { "type": { "name": "number" }, "default": "14" }, + "labelFontSize": { + "type": { "name": "number" }, + "default": "14", + "deprecated": true, + "deprecationInfo": "Consider using labelStyle.fontSize instead." + }, + "labelStyle": { "type": { "name": "object" } }, "position": { "type": { "name": "enum", "description": "'left'
          | 'right'" } }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" }, "stroke": { "type": { "name": "string" }, "default": "'currentColor'" }, - "tickFontSize": { "type": { "name": "number" }, "default": "12" }, + "tickFontSize": { + "type": { "name": "number" }, + "default": "12", + "deprecated": true, + "deprecationInfo": "Consider using tickLabelStyle.fontSize instead." + }, + "tickInterval": { + "type": { "name": "union", "description": "'auto'
          | array
          | func" }, + "default": "'auto'" + }, + "tickLabelInterval": { + "type": { "name": "union", "description": "'auto'
          | func" }, + "default": "'auto'" + }, + "tickLabelStyle": { "type": { "name": "object" } }, "tickMaxStep": { "type": { "name": "number" } }, "tickMinStep": { "type": { "name": "number" } }, "tickNumber": { "type": { "name": "number" } }, diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index 6f29efdbda6c4..cea5dbd5a0468 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -14,14 +14,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "null" }, @@ -30,7 +30,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index 5089fd20032e3..486f97f025947 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/docs/pages/x/api/charts/pie-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -13,14 +13,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "null" }, @@ -28,7 +28,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index c0c77195ea168..9d956a28bf6d9 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -13,14 +13,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
          | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" }, "default": "null" }, @@ -29,7 +29,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
          | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
          | 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 324c72d58cc76..fabe4546256d1 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -27,7 +27,7 @@ "xAxis": { "type": { "name": "shape", - "description": "{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, max?: Date
          | number, min?: Date
          | number, position?: 'bottom'
          | 'left'
          | 'right'
          | 'top', scaleType?: 'band'
          | 'linear'
          | 'log'
          | 'point'
          | 'pow'
          | 'sqrt'
          | 'time'
          | 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }" + "description": "{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
          | number, min?: Date
          | number, position?: 'bottom'
          | 'left'
          | 'right'
          | 'top', scaleType?: 'band'
          | 'linear'
          | 'log'
          | 'point'
          | 'pow'
          | 'sqrt'
          | 'time'
          | 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
          | array
          | func, tickLabelInterval?: 'auto'
          | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }" } } }, diff --git a/docs/translations/api-docs/charts/charts-axis.json b/docs/translations/api-docs/charts/charts-axis.json index 6dba8cffb4407..036b1002dee36 100644 --- a/docs/translations/api-docs/charts/charts-axis.json +++ b/docs/translations/api-docs/charts/charts-axis.json @@ -44,7 +44,10 @@ }, "tick": { "description": "Styles applied to {{nodeName}}.", "nodeName": "ticks" }, "tickLabel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "ticks label" }, - "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the axis label" }, + "label": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the group containing the axis label" + }, "directionX": { "description": "Styles applied to {{nodeName}}.", "nodeName": "x axes" }, "directionY": { "description": "Styles applied to {{nodeName}}.", "nodeName": "y axes" }, "top": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the top axis" }, diff --git a/docs/translations/api-docs/charts/charts-x-axis.json b/docs/translations/api-docs/charts/charts-x-axis.json index 69d91b0720061..68c29dd7f5f0e 100644 --- a/docs/translations/api-docs/charts/charts-x-axis.json +++ b/docs/translations/api-docs/charts/charts-x-axis.json @@ -32,6 +32,11 @@ "deprecated": "", "typeDescriptions": {} }, + "labelStyle": { + "description": "The style applied to the axis label.", + "deprecated": "", + "typeDescriptions": {} + }, "position": { "description": "Position of the axis.", "deprecated": "", @@ -57,6 +62,21 @@ "deprecated": "", "typeDescriptions": {} }, + "tickInterval": { + "description": "Defines which ticks are displayed. Its value can be: - 'auto' In such case the ticks are computed based on axis scale and other parameters. - a filtering function of the form (value, index) => boolean which is available only if the axis has a data property. - an array containing the values where ticks should be displayed.", + "deprecated": "", + "typeDescriptions": {} + }, + "tickLabelInterval": { + "description": "Defines which ticks get its label displayed. Its value can be: - 'auto' In such case, labels are displayed if they do not overlap with the previous one. - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.", + "deprecated": "", + "typeDescriptions": {} + }, + "tickLabelStyle": { + "description": "The style applied to ticks text.", + "deprecated": "", + "typeDescriptions": {} + }, "tickMaxStep": { "description": "Maximal step between two ticks. When using time data, the value is assumed to be in ms. Not supported by categorical axis (band, points).", "deprecated": "", @@ -90,7 +110,10 @@ }, "tick": { "description": "Styles applied to {{nodeName}}.", "nodeName": "ticks" }, "tickLabel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "ticks label" }, - "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the axis label" }, + "label": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the group containing the axis label" + }, "directionX": { "description": "Styles applied to {{nodeName}}.", "nodeName": "x axes" }, "directionY": { "description": "Styles applied to {{nodeName}}.", "nodeName": "y axes" }, "top": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the top axis" }, diff --git a/docs/translations/api-docs/charts/charts-y-axis.json b/docs/translations/api-docs/charts/charts-y-axis.json index 69d91b0720061..68c29dd7f5f0e 100644 --- a/docs/translations/api-docs/charts/charts-y-axis.json +++ b/docs/translations/api-docs/charts/charts-y-axis.json @@ -32,6 +32,11 @@ "deprecated": "", "typeDescriptions": {} }, + "labelStyle": { + "description": "The style applied to the axis label.", + "deprecated": "", + "typeDescriptions": {} + }, "position": { "description": "Position of the axis.", "deprecated": "", @@ -57,6 +62,21 @@ "deprecated": "", "typeDescriptions": {} }, + "tickInterval": { + "description": "Defines which ticks are displayed. Its value can be: - 'auto' In such case the ticks are computed based on axis scale and other parameters. - a filtering function of the form (value, index) => boolean which is available only if the axis has a data property. - an array containing the values where ticks should be displayed.", + "deprecated": "", + "typeDescriptions": {} + }, + "tickLabelInterval": { + "description": "Defines which ticks get its label displayed. Its value can be: - 'auto' In such case, labels are displayed if they do not overlap with the previous one. - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.", + "deprecated": "", + "typeDescriptions": {} + }, + "tickLabelStyle": { + "description": "The style applied to ticks text.", + "deprecated": "", + "typeDescriptions": {} + }, "tickMaxStep": { "description": "Maximal step between two ticks. When using time data, the value is assumed to be in ms. Not supported by categorical axis (band, points).", "deprecated": "", @@ -90,7 +110,10 @@ }, "tick": { "description": "Styles applied to {{nodeName}}.", "nodeName": "ticks" }, "tickLabel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "ticks label" }, - "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the axis label" }, + "label": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the group containing the axis label" + }, "directionX": { "description": "Styles applied to {{nodeName}}.", "nodeName": "x axes" }, "directionY": { "description": "Styles applied to {{nodeName}}.", "nodeName": "y axes" }, "top": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the top axis" }, diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index dd4b3631042fa..eefa36e2167e1 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -185,11 +185,19 @@ BarChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -222,11 +230,19 @@ BarChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -268,11 +284,19 @@ BarChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -351,11 +375,19 @@ BarChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -383,6 +415,7 @@ BarChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -391,6 +424,13 @@ BarChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -411,6 +451,7 @@ BarChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -419,6 +460,13 @@ BarChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, diff --git a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx index 805c512a5648e..2b24b15598379 100644 --- a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx +++ b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx @@ -132,11 +132,19 @@ ChartsAxis.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -158,11 +166,19 @@ ChartsAxis.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -184,11 +200,19 @@ ChartsAxis.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -220,11 +244,19 @@ ChartsAxis.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, diff --git a/packages/x-charts/src/ChartsAxis/axisClasses.ts b/packages/x-charts/src/ChartsAxis/axisClasses.ts index 81f4e42632a8c..7386615ffa5a2 100644 --- a/packages/x-charts/src/ChartsAxis/axisClasses.ts +++ b/packages/x-charts/src/ChartsAxis/axisClasses.ts @@ -14,7 +14,7 @@ export interface ChartsAxisClasses { tick: string; /** Styles applied to ticks label. */ tickLabel: string; - /** Styles applied to the axis label. */ + /** Styles applied to the group containing the axis label. */ label: string; /** Styles applied to x axes. */ directionX: string; diff --git a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx index 3a36e0288efa9..1f773fbb903f1 100644 --- a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx +++ b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx @@ -9,7 +9,7 @@ import { FormattedSeries, SeriesContext } from '../context/SeriesContextProvider import { ChartsLegendClasses, getChartsLegendUtilityClass } from './chartsLegendClasses'; import { DefaultizedProps } from '../models/helpers'; import { LegendParams } from '../models/seriesType/config'; -import { ChartsText, getWordsByLines } from '../internals/components/ChartsText'; +import { ChartsText, ChartsTextStyle, getWordsByLines } from '../internals/components/ChartsText'; import { CardinalDirections } from '../models/layout'; export interface ChartsLegendSlotsComponent { @@ -91,7 +91,7 @@ export interface LegendRendererProps * Style applied to legend labels. * @default theme.typography.subtitle1 */ - labelStyle?: React.CSSProperties; + labelStyle?: ChartsTextStyle; /** * Width of the item mark (in px). * @default 20 @@ -159,20 +159,24 @@ function DefaultChartsLegend(props: LegendRendererProps) { const theme = useTheme(); const labelStyle = React.useMemo( - () => ({ - ...theme.typography.subtitle1, - color: 'inherit', - fill: (theme.vars || theme).palette.text.primary, - lineHeight: 1, - ...inLabelStyle, - }), + () => + ({ + ...theme.typography.subtitle1, + color: 'inherit', + dominantBaseline: 'central', + textAnchor: 'start', + fill: (theme.vars || theme).palette.text.primary, + lineHeight: 1, + ...inLabelStyle, + } as ChartsTextStyle), // To say to TS that the dominantBaseline and textAnchor are correct [inLabelStyle, theme], ); const padding = React.useMemo(() => getStandardizedPadding(paddingProps), [paddingProps]); const getItemSpace = React.useCallback( - (label: string, style?: React.CSSProperties) => { + (label: string, inStyle: ChartsTextStyle = {}) => { + const { rotate, dominantBaseline, ...style } = inStyle; const linesSize = getWordsByLines({ style, needsComputation: true, text: label }); const innerSize = { innerWidth: itemMarkWidth + markGap + Math.max(...linesSize.map((size) => size.width)), @@ -332,14 +336,7 @@ function DefaultChartsLegend(props: LegendRendererProps) { height={itemMarkHeight} fill={color} /> - + ))} diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 7b7b3eeab4999..548e7f6a80308 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -5,11 +5,13 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { useThemeProps, useTheme, Theme } from '@mui/material/styles'; import { CartesianContext } from '../context/CartesianContextProvider'; import { DrawingContext } from '../context/DrawingProvider'; -import useTicks from '../hooks/useTicks'; +import useTicks, { TickItemType } from '../hooks/useTicks'; import { ChartsXAxisProps } from '../models/axis'; import { getAxisUtilityClass } from '../ChartsAxis/axisClasses'; import { AxisRoot } from '../internals/components/AxisSharedComponents'; -import { ChartsText, ChartsTextProps } from '../internals/components/ChartsText'; +import { ChartsText, ChartsTextProps, getWordsByLines } from '../internals/components/ChartsText'; +import { getMinXTranslation } from '../internals/geometry'; +import { useMounted } from '../hooks/useMounted'; const useUtilityClasses = (ownerState: ChartsXAxisProps & { theme: Theme }) => { const { classes, position } = ownerState; @@ -25,12 +27,61 @@ const useUtilityClasses = (ownerState: ChartsXAxisProps & { theme: Theme }) => { return composeClasses(slots, getAxisUtilityClass, classes); }; +type LabelExtraData = { width: number; height: number; skipLabel?: boolean }; + +function addLabelDimension( + xTicks: TickItemType[], + { + tickLabelStyle: style, + tickLabelInterval, + isMounted, + }: Pick & { isMounted: boolean }, +): (TickItemType & LabelExtraData)[] { + const withDimension = xTicks.map((tick) => { + if (!isMounted || tick.formattedValue === undefined) { + return { ...tick, width: 0, height: 0 }; + } + const tickSizes = getWordsByLines({ style, needsComputation: true, text: tick.formattedValue }); + return { + ...tick, + width: Math.max(...tickSizes.map((size) => size.width)), + height: Math.max(tickSizes.length * tickSizes[0].height), + }; + }); + + if (typeof tickLabelInterval === 'function') { + return withDimension.map((item, index) => ({ + ...item, + skipLabel: !tickLabelInterval(item.value, index), + })); + } + + // Filter label to avoid overlap + let textStart = 0; + let textEnd = 0; + + return withDimension.map((item, labelIndex) => { + const { width, offset, labelOffset, height } = item; + + const distance = getMinXTranslation(width, height, style?.angle); + const textPosition = offset + labelOffset; + const gapRatio = 1.2; // Ratio applied to the minimal distance to add some margin. + + textStart = textPosition - (gapRatio * distance) / 2; + if (labelIndex > 0 && textStart < textEnd) { + // Except for the first label, we skip all label that overlap with the last accepted. + // Notice that the early return prevents `textEnd` from being updated. + return { ...item, skipLabel: true }; + } + textEnd = textPosition + (gapRatio * distance) / 2; + return item; + }); +} + const defaultProps = { position: 'bottom', disableLine: false, disableTicks: false, - tickFontSize: 12, - labelFontSize: 14, tickSize: 6, } as const; @@ -42,18 +93,24 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { }, } = React.useContext(CartesianContext); + const isMounted = useMounted(); + const defaultizedProps = { ...defaultProps, ...settings, ...props }; const { position, disableLine, disableTicks, - tickFontSize, + tickLabelStyle, label, + labelStyle, + tickFontSize, labelFontSize, tickSize: tickSizeProp, valueFormatter, slots, slotProps, + tickInterval, + tickLabelInterval, } = defaultizedProps; const theme = useTheme(); @@ -63,13 +120,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { const tickSize = disableTicks ? 4 : tickSizeProp; - const xTicks = useTicks({ scale: xScale, tickNumber, valueFormatter }); - const positionSigne = position === 'bottom' ? 1 : -1; - - const labelRefPoint = { - x: left + width / 2, - y: positionSigne * (tickFontSize + tickSize + 10), - }; + const positionSign = position === 'bottom' ? 1 : -1; const Line = slots?.axisLine ?? 'line'; const Tick = slots?.axisTick ?? 'line'; @@ -80,26 +131,41 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { elementType: TickLabel, externalSlotProps: slotProps?.axisTickLabel, additionalProps: { - textAnchor: 'middle', - dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', - style: { fontSize: tickFontSize }, + style: { + textAnchor: 'middle', + dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', + fontSize: tickFontSize ?? 12, + ...tickLabelStyle, + }, className: classes.tickLabel, } as Partial, className: classes.tickLabel, ownerState: {}, }); + const xTicks = useTicks({ scale: xScale, tickNumber, valueFormatter, tickInterval }); + + const xTicksWithDimension = addLabelDimension(xTicks, { + tickLabelStyle: axisTickLabelProps.style, + tickLabelInterval, + isMounted, + }); + + const labelRefPoint = { + x: left + width / 2, + y: positionSign * (tickSize + 22), + }; + const axisLabelProps = useSlotProps({ elementType: Label, externalSlotProps: slotProps?.axisLabel, additionalProps: { - textAnchor: 'middle', - dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', style: { - fontSize: labelFontSize, - transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`, + fontSize: labelFontSize ?? 14, + textAnchor: 'middle', + dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', + ...labelStyle, }, - className: classes.label, } as Partial, ownerState: {}, }); @@ -118,24 +184,23 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { /> )} - {xTicks.map(({ formattedValue, offset, labelOffset }, index) => { + {xTicksWithDimension.map(({ formattedValue, offset, labelOffset, skipLabel }, index) => { const xTickLabel = labelOffset ?? 0; - const yTickLabel = positionSigne * (tickSize + 3); + const yTickLabel = positionSign * (tickSize + 3); return ( {!disableTicks && ( )} - {formattedValue !== undefined && ( + {formattedValue !== undefined && !skipLabel && ( @@ -188,8 +253,13 @@ ChartsXAxis.propTypes = { /** * The font size of the axis label. * @default 14 + * @deprecated Consider using `labelStyle.fontSize` instead. */ labelFontSize: PropTypes.number, + /** + * The style applied to the axis label. + */ + labelStyle: PropTypes.object, /** * Position of the axis. */ @@ -212,8 +282,28 @@ ChartsXAxis.propTypes = { /** * The font size of the axis ticks text. * @default 12 + * @deprecated Consider using `tickLabelStyle.fontSize` instead. */ tickFontSize: PropTypes.number, + /** + * Defines which ticks are displayed. Its value can be: + * - 'auto' In such case the ticks are computed based on axis scale and other parameters. + * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property. + * - an array containing the values where ticks should be displayed. + * @default 'auto' + */ + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]), + /** + * Defines which ticks get its label displayed. Its value can be: + * - 'auto' In such case, labels are displayed if they do not overlap with the previous one. + * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones. + * @default 'auto' + */ + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + /** + * The style applied to ticks text. + */ + tickLabelStyle: PropTypes.object, /** * Maximal step between two ticks. * When using time data, the value is assumed to be in ms. diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index d2d532fd197a1..9677195cb4e5b 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -65,10 +65,10 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { const yTicks = useTicks({ scale: yScale, tickNumber, valueFormatter }); - const positionSigne = position === 'right' ? 1 : -1; + const positionSign = position === 'right' ? 1 : -1; const labelRefPoint = { - x: positionSigne * (tickFontSize + tickSize + 10), + x: positionSign * (tickFontSize + tickSize + 10), y: top + height / 2, }; @@ -81,9 +81,11 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { elementType: TickLabel, externalSlotProps: slotProps?.axisTickLabel, additionalProps: { - textAnchor: position === 'right' ? 'start' : 'end', - dominantBaseline: 'central', - style: { fontSize: tickFontSize }, + style: { + fontSize: tickFontSize, + textAnchor: position === 'right' ? 'start' : 'end', + dominantBaseline: 'central', + }, className: classes.tickLabel, } as Partial, ownerState: {}, @@ -93,14 +95,12 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { elementType: Label, externalSlotProps: slotProps?.axisLabel, additionalProps: { - textAnchor: 'middle', - dominantBaseline: 'auto', style: { fontSize: labelFontSize, - transform: `rotate(${positionSigne * 90}deg)`, - transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`, - }, - className: classes.label, + angle: positionSign * 90, + textAnchor: 'middle', + dominantBaseline: 'auto', + } as Partial['style'], } as Partial, ownerState: {}, }); @@ -120,13 +120,13 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { )} {yTicks.map(({ formattedValue, offset, labelOffset }, index) => { - const xTickLabel = positionSigne * (tickSize + 2); + const xTickLabel = positionSign * (tickSize + 2); const yTickLabel = labelOffset; return ( {!disableTicks && ( @@ -136,7 +136,6 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { @@ -189,8 +188,13 @@ ChartsYAxis.propTypes = { /** * The font size of the axis label. * @default 14 + * @deprecated Consider using `labelStyle.fontSize` instead. */ labelFontSize: PropTypes.number, + /** + * The style applied to the axis label. + */ + labelStyle: PropTypes.object, /** * Position of the axis. */ @@ -213,8 +217,28 @@ ChartsYAxis.propTypes = { /** * The font size of the axis ticks text. * @default 12 + * @deprecated Consider using `tickLabelStyle.fontSize` instead. */ tickFontSize: PropTypes.number, + /** + * Defines which ticks are displayed. Its value can be: + * - 'auto' In such case the ticks are computed based on axis scale and other parameters. + * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property. + * - an array containing the values where ticks should be displayed. + * @default 'auto' + */ + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]), + /** + * Defines which ticks get its label displayed. Its value can be: + * - 'auto' In such case, labels are displayed if they do not overlap with the previous one. + * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones. + * @default 'auto' + */ + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + /** + * The style applied to ticks text. + */ + tickLabelStyle: PropTypes.object, /** * Maximal step between two ticks. * When using time data, the value is assumed to be in ms. diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 12f153c7dbd2a..e6cf01e55e9e2 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -190,11 +190,19 @@ LineChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -230,11 +238,19 @@ LineChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -276,11 +292,19 @@ LineChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -366,11 +390,19 @@ LineChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -398,6 +430,7 @@ LineChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -406,6 +439,13 @@ LineChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -426,6 +466,7 @@ LineChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -434,6 +475,13 @@ LineChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index a730a2828370f..268c9788342bd 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -156,11 +156,19 @@ PieChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -192,11 +200,19 @@ PieChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -239,11 +255,19 @@ PieChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -334,11 +358,19 @@ PieChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -366,6 +398,7 @@ PieChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -374,6 +407,13 @@ PieChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -394,6 +434,7 @@ PieChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -402,6 +443,13 @@ PieChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 2f2568b43355b..75fa84546c919 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -143,11 +143,19 @@ ScatterChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -179,11 +187,19 @@ ScatterChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -225,11 +241,19 @@ ScatterChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -298,11 +322,19 @@ ScatterChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -330,6 +362,7 @@ ScatterChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -338,6 +371,13 @@ ScatterChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -358,6 +398,7 @@ ScatterChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -366,6 +407,13 @@ ScatterChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index 746d0ff568c67..18a71a0c0c67b 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -313,6 +313,7 @@ SparkLineChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -321,6 +322,9 @@ SparkLineChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, diff --git a/packages/x-charts/src/context/CartesianContextProvider.tsx b/packages/x-charts/src/context/CartesianContextProvider.tsx index f35b88e2223f1..a8f98e6f3f2e0 100644 --- a/packages/x-charts/src/context/CartesianContextProvider.tsx +++ b/packages/x-charts/src/context/CartesianContextProvider.tsx @@ -309,6 +309,7 @@ CartesianContextProvider.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -317,6 +318,13 @@ CartesianContextProvider.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -337,6 +345,7 @@ CartesianContextProvider.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -345,6 +354,13 @@ CartesianContextProvider.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, diff --git a/packages/x-charts/src/hooks/useMounted.ts b/packages/x-charts/src/hooks/useMounted.ts new file mode 100644 index 0000000000000..298fc91f814ce --- /dev/null +++ b/packages/x-charts/src/hooks/useMounted.ts @@ -0,0 +1,20 @@ +import * as React from 'react'; +import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; + +export function useMounted(defer = false) { + const [mountedState, setMountedState] = React.useState(false); + + useEnhancedEffect(() => { + if (!defer) { + setMountedState(true); + } + }, [defer]); + + React.useEffect(() => { + if (defer) { + setMountedState(true); + } + }, [defer]); + + return mountedState; +} diff --git a/packages/x-charts/src/hooks/useTicks.ts b/packages/x-charts/src/hooks/useTicks.ts index 143901bf24d4a..70f094628199a 100644 --- a/packages/x-charts/src/hooks/useTicks.ts +++ b/packages/x-charts/src/hooks/useTicks.ts @@ -20,6 +20,14 @@ export interface TickParams { * Not supported by categorical axis (band, points). */ tickNumber?: number; + /** + * Defines which ticks are displayed. Its value can be: + * - 'auto' In such case the ticks are computed based on axis scale and other parameters. + * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property. + * - an array containing the values where ticks should be displayed. + * @default 'auto' + */ + tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[]; } export function getTickNumber( @@ -40,13 +48,23 @@ export function getTickNumber( return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber)); } +export type TickItemType = { + /** + * This property is undefined only if it's the tick closing the last band + */ + value?: any; + formattedValue?: string; + offset: number; + labelOffset: number; +}; + function useTicks( options: { scale: D3Scale; valueFormatter?: (value: any) => string; - } & Pick, -) { - const { scale, tickNumber, valueFormatter } = options; + } & Pick, +): TickItemType[] { + const { scale, tickNumber, valueFormatter, tickInterval } = options; return React.useMemo(() => { // band scale @@ -57,7 +75,8 @@ function useTicks( // scale type = 'band' return [ ...domain.map((value) => ({ - formattedValue: valueFormatter?.(value) ?? value, + value, + formattedValue: valueFormatter?.(value) ?? `${value}`, offset: scale(value)! - (scale.step() - scale.bandwidth()) / 2, labelOffset: scale.step() / 2, })), @@ -71,19 +90,27 @@ function useTicks( } // scale type = 'point' - return domain.map((value) => ({ - formattedValue: valueFormatter?.(value) ?? value, + const filteredDomain = + (typeof tickInterval === 'function' && domain.filter(tickInterval)) || + (typeof tickInterval === 'object' && tickInterval) || + domain; + + return filteredDomain.map((value) => ({ + value, + formattedValue: valueFormatter?.(value) ?? `${value}`, offset: scale(value)!, labelOffset: 0, })); } - return scale.ticks(tickNumber).map((value: any) => ({ + const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber); + return ticks.map((value: any) => ({ + value, formattedValue: valueFormatter?.(value) ?? scale.tickFormat(tickNumber)(value), offset: scale(value), labelOffset: 0, })); - }, [tickNumber, scale, valueFormatter]); + }, [tickNumber, scale, valueFormatter, tickInterval]); } export default useTicks; diff --git a/packages/x-charts/src/internals/components/ChartsText.tsx b/packages/x-charts/src/internals/components/ChartsText.tsx index 619004ddd5602..8c26f69ffe6a7 100644 --- a/packages/x-charts/src/internals/components/ChartsText.tsx +++ b/packages/x-charts/src/internals/components/ChartsText.tsx @@ -1,6 +1,17 @@ import * as React from 'react'; import { getStringSize } from '../domUtils'; +export type ChartsTextBaseline = 'hanging' | 'central' | 'auto'; + +export interface ChartsTextStyle extends React.CSSProperties { + angle?: number; + /** + * The text baseline + * @default 'central' + */ + dominantBaseline?: ChartsTextBaseline; +} + interface GetWordsByLinesParams { /** * Text displayed. @@ -9,7 +20,7 @@ interface GetWordsByLinesParams { /** * Style applied to text elements. */ - style?: React.SVGAttributes<'text'>['style']; + style?: ChartsTextStyle; /** * If true, the line width is computed. * @default false @@ -17,20 +28,16 @@ interface GetWordsByLinesParams { needsComputation?: boolean; } -export type ChartsTextBaseline = 'hanging' | 'central' | 'auto'; - export interface ChartsTextProps - extends Omit, 'width' | 'ref'>, + extends Omit< + React.SVGTextElementAttributes, + 'width' | 'ref' | 'style' | 'dominantBaseline' + >, GetWordsByLinesParams { /** * Height of a text line (in `em`). */ lineHeight?: number; - /** - * The text baseline - * @default 'central' - */ - dominantBaseline?: ChartsTextBaseline; ownerState?: any; } @@ -42,16 +49,9 @@ export function getWordsByLines({ style, needsComputation, text }: GetWordsByLin } export function ChartsText(props: ChartsTextProps) { - const { - x, - y, - textAnchor = 'start', - dominantBaseline = 'central', - style, - text, - ownerState, - ...textProps - } = props; + const { x, y, style: styleProps, text, ownerState, ...textProps } = props; + + const { angle, textAnchor, dominantBaseline, ...style } = styleProps ?? {}; const wordsByLines = React.useMemo( () => getWordsByLines({ style, needsComputation: text.includes('\n'), text }), @@ -71,17 +71,17 @@ export function ChartsText(props: ChartsTextProps) { break; } - // const transforms = []; + const transforms = []; // if (scaleToFit) { // const lineWidth = wordsByLines[0].width; // transforms.push(`scale(${(isNumber(width as number) ? (width as number) / lineWidth : 1) / lineWidth})`); // } - // if (angle) { - // transforms.push(`rotate(${angle}, ${x}, ${y})`); - // } - // if (transforms.length) { - // textProps.transform = transforms.join(' '); - // } + if (angle) { + transforms.push(`rotate(${angle}, ${x}, ${y})`); + } + if (transforms.length) { + textProps.transform = transforms.join(' '); + } return ( !(typeof window !== 'undefined' && window.document && window.setTimeout); diff --git a/packages/x-charts/src/internals/geometry.ts b/packages/x-charts/src/internals/geometry.ts new file mode 100644 index 0000000000000..eb2c6b3ff8c39 --- /dev/null +++ b/packages/x-charts/src/internals/geometry.ts @@ -0,0 +1,47 @@ +const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle as perfectly horizontal/vertical + +let warnedOnce = false; + +/** + * Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation. + * This assumes that all rectangles have the same height and angle between -90 and 90. + * Otherwise it would be problematic because you need the height/width of the next rectangle to do the correct computation. + * @param width the side along the x axis. + * @param height the side along the y axis. + * @param angle the rotation in degrees. + */ +export function getMinXTranslation(width: number, height: number, angle: number = 0) { + if (process.env.NODE_ENV !== 'production') { + if (!warnedOnce && angle > 90 && angle < -90) { + warnedOnce = true; + console.warn( + [ + `MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, + `This could cause some text overlapping.`, + `If you encounter a use case where it's needed, please open an issue.`, + ].join('\n'), + ); + } + } + const standardAngle = Math.min( + Math.abs(angle) % 180, + Math.abs((Math.abs(angle) % 180) - 180) % 180, + ); // Map from R to [0, 90] + + if (standardAngle < ANGLE_APPROX) { + // It's nearly horizontal + return width; + } + if (standardAngle > 90 - ANGLE_APPROX) { + // It's nearly vertical + return height; + } + + const radAngle = (standardAngle * Math.PI) / 180; + const angleSwich = Math.atan2(height, width); + + if (radAngle < angleSwich) { + return width / Math.cos(radAngle); + } + return height / Math.sin(radAngle); +} diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index 8bdc7b91da37b..8180704031af8 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -12,17 +12,17 @@ import { ChartsTextProps } from '../internals/components/ChartsText'; export type D3Scale = | ScaleBand - | ScaleLogarithmic + | ScaleLogarithmic | ScalePoint - | ScalePower - | ScaleTime - | ScaleLinear; + | ScalePower + | ScaleTime + | ScaleLinear; export type D3ContinuouseScale = - | ScaleLogarithmic - | ScalePower - | ScaleTime - | ScaleLinear; + | ScaleLogarithmic + | ScalePower + | ScaleTime + | ScaleLinear; export interface ChartsAxisSlotsComponent { axisLine?: React.JSXElementConstructor>; @@ -61,8 +61,24 @@ export interface ChartsAxisProps extends TickParams { /** * The font size of the axis ticks text. * @default 12 + * @deprecated Consider using `tickLabelStyle.fontSize` instead. */ tickFontSize?: number; + /** + * The style applied to ticks text. + */ + tickLabelStyle?: ChartsTextProps['style']; + /** + * The style applied to the axis label. + */ + labelStyle?: ChartsTextProps['style']; + /** + * Defines which ticks get its label displayed. Its value can be: + * - 'auto' In such case, labels are displayed if they do not overlap with the previous one. + * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones. + * @default 'auto' + */ + tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean); /** * The label of the axis. */ @@ -70,6 +86,7 @@ export interface ChartsAxisProps extends TickParams { /** * The font size of the axis label. * @default 14 + * @deprecated Consider using `labelStyle.fontSize` instead. */ labelFontSize?: number; /** diff --git a/packages/x-charts/src/models/seriesType/line.ts b/packages/x-charts/src/models/seriesType/line.ts index 24e99d4622db6..b095120c7b3f3 100644 --- a/packages/x-charts/src/models/seriesType/line.ts +++ b/packages/x-charts/src/models/seriesType/line.ts @@ -16,7 +16,7 @@ export type CurveType = | 'stepBefore' | 'stepAfter'; -export interface ShowMarkParams { +export interface ShowMarkParams { /** * The item index. */ @@ -32,7 +32,7 @@ export interface ShowMarkParams { /** * The item position value. It likely comes from the axis `data` property. */ - position: number | Date; + position: AxisValue; /** * The item value. It comes from the series `data` property. */ From faa67bb06de135451735ce7330fbf6a5d88ef0f2 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 12:20:06 +0300 Subject: [PATCH 146/262] Bump MUI Core (#10604) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Lukas --- docs/package.json | 12 +- .../api-docs/date-pickers/date-field.json | 2 +- .../date-pickers/date-time-field.json | 2 +- .../single-input-date-range-field.json | 2 +- .../single-input-date-time-range-field.json | 2 +- .../single-input-time-range-field.json | 2 +- .../api-docs/date-pickers/time-field.json | 2 +- package.json | 6 +- .../grid/x-data-grid-generator/package.json | 2 +- .../grid/x-data-grid-premium/package.json | 2 +- packages/grid/x-data-grid-pro/package.json | 2 +- .../tests/editComponents.DataGridPro.test.tsx | 2 +- packages/grid/x-data-grid/package.json | 2 +- packages/x-charts/package.json | 2 +- packages/x-date-pickers-pro/package.json | 4 +- .../SingleInputDateRangeField.tsx | 2 +- .../SingleInputDateTimeRangeField.tsx | 2 +- .../SingleInputTimeRangeField.tsx | 2 +- packages/x-date-pickers/package.json | 4 +- .../src/DateField/DateField.tsx | 2 +- .../src/DateTimeField/DateTimeField.tsx | 2 +- .../src/TimeField/TimeField.tsx | 2 +- packages/x-license-pro/package.json | 2 +- packages/x-tree-view/package.json | 4 +- renovate.json | 7 +- test/e2e/index.test.ts | 2 +- yarn.lock | 230 +++++++----------- 27 files changed, 121 insertions(+), 186 deletions(-) diff --git a/docs/package.json b/docs/package.json index 5b6ef2f009081..e7eabee76e697 100644 --- a/docs/package.json +++ b/docs/package.json @@ -28,12 +28,12 @@ "@emotion/react": "^11.11.1", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.14.11", - "@mui/joy": "^5.0.0-beta.8", - "@mui/lab": "^5.0.0-alpha.147", - "@mui/material": "^5.14.11", - "@mui/styles": "^5.14.11", - "@mui/utils": "^5.14.11", + "@mui/icons-material": "^5.14.14", + "@mui/joy": "^5.0.0-beta.11", + "@mui/lab": "^5.0.0-alpha.149", + "@mui/material": "^5.14.14", + "@mui/styles": "^5.14.14", + "@mui/utils": "^5.14.14", "@react-spring/web": "^9.7.3", "@trendmicro/react-interpolate": "^0.5.5", "@types/lodash": "^4.14.199", diff --git a/docs/translations/api-docs/date-pickers/date-field.json b/docs/translations/api-docs/date-pickers/date-field.json index d042a4c8391d6..3875b3b76f413 100644 --- a/docs/translations/api-docs/date-pickers/date-field.json +++ b/docs/translations/api-docs/date-pickers/date-field.json @@ -12,7 +12,7 @@ "typeDescriptions": {} }, "color": { - "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", + "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "deprecated": "", "typeDescriptions": {} }, diff --git a/docs/translations/api-docs/date-pickers/date-time-field.json b/docs/translations/api-docs/date-pickers/date-time-field.json index 0dd17bcd75b14..b4adb76b6787d 100644 --- a/docs/translations/api-docs/date-pickers/date-time-field.json +++ b/docs/translations/api-docs/date-pickers/date-time-field.json @@ -17,7 +17,7 @@ "typeDescriptions": {} }, "color": { - "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", + "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "deprecated": "", "typeDescriptions": {} }, diff --git a/docs/translations/api-docs/date-pickers/single-input-date-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-range-field.json index ec6acaaa3f47c..818a46ecb3ec4 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-range-field.json @@ -12,7 +12,7 @@ "typeDescriptions": {} }, "color": { - "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", + "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "deprecated": "", "typeDescriptions": {} }, diff --git a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json index ce04870d6b049..548c261cac982 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json @@ -17,7 +17,7 @@ "typeDescriptions": {} }, "color": { - "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", + "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "deprecated": "", "typeDescriptions": {} }, diff --git a/docs/translations/api-docs/date-pickers/single-input-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-time-range-field.json index f1099afa24975..f64f74c404dff 100644 --- a/docs/translations/api-docs/date-pickers/single-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-time-range-field.json @@ -17,7 +17,7 @@ "typeDescriptions": {} }, "color": { - "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", + "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "deprecated": "", "typeDescriptions": {} }, diff --git a/docs/translations/api-docs/date-pickers/time-field.json b/docs/translations/api-docs/date-pickers/time-field.json index f1099afa24975..f64f74c404dff 100644 --- a/docs/translations/api-docs/date-pickers/time-field.json +++ b/docs/translations/api-docs/date-pickers/time-field.json @@ -17,7 +17,7 @@ "typeDescriptions": {} }, "color": { - "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", + "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "deprecated": "", "typeDescriptions": {} }, diff --git a/package.json b/package.json index d6c86b80766f4..39176efd06e3e 100644 --- a/package.json +++ b/package.json @@ -83,10 +83,10 @@ "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mnajdova/enzyme-adapter-react-18": "^0.2.0", - "@mui/icons-material": "^5.14.11", - "@mui/material": "^5.14.11", + "@mui/icons-material": "^5.14.14", + "@mui/material": "^5.14.14", "@mui/monorepo": "https://github.com/mui/material-ui.git#master", - "@mui/utils": "^5.14.11", + "@mui/utils": "^5.14.14", "@next/eslint-plugin-next": "^13.5.4", "@octokit/plugin-retry": "^6.0.1", "@octokit/rest": "^20.0.2", diff --git a/packages/grid/x-data-grid-generator/package.json b/packages/grid/x-data-grid-generator/package.json index 1c6bb96b410a1..238cc3b0fdac2 100644 --- a/packages/grid/x-data-grid-generator/package.json +++ b/packages/grid/x-data-grid-generator/package.json @@ -31,7 +31,7 @@ }, "dependencies": { "@babel/runtime": "^7.23.1", - "@mui/base": "^5.0.0-beta.17", + "@mui/base": "^5.0.0-beta.20", "@mui/x-data-grid-premium": "6.16.2", "chance": "^1.1.11", "clsx": "^2.0.0", diff --git a/packages/grid/x-data-grid-premium/package.json b/packages/grid/x-data-grid-premium/package.json index a1be096a7ac5d..6ab412efbf7e6 100644 --- a/packages/grid/x-data-grid-premium/package.json +++ b/packages/grid/x-data-grid-premium/package.json @@ -43,7 +43,7 @@ }, "dependencies": { "@babel/runtime": "^7.23.1", - "@mui/utils": "^5.14.11", + "@mui/utils": "^5.14.14", "@mui/x-data-grid": "6.16.2", "@mui/x-data-grid-pro": "6.16.2", "@mui/x-license-pro": "6.10.2", diff --git a/packages/grid/x-data-grid-pro/package.json b/packages/grid/x-data-grid-pro/package.json index f1c66513f2caa..5fa2ecebda0da 100644 --- a/packages/grid/x-data-grid-pro/package.json +++ b/packages/grid/x-data-grid-pro/package.json @@ -43,7 +43,7 @@ }, "dependencies": { "@babel/runtime": "^7.23.1", - "@mui/utils": "^5.14.11", + "@mui/utils": "^5.14.14", "@mui/x-data-grid": "6.16.2", "@mui/x-license-pro": "6.10.2", "@types/format-util": "^1.0.2", diff --git a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx index 4a350ce9678b4..e1d80b9bfa54c 100644 --- a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx @@ -623,7 +623,7 @@ describe(' - Edit components', () => { userEvent.mousePress(screen.queryAllByRole('option')[1]); clock.runToLast(); expect(screen.queryByRole('listbox')).to.equal(null); - fireEvent.keyDown(screen.getByRole('button', { name: 'Adidas' }), { key: 'Enter' }); + fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Enter' }); expect(screen.queryByRole('listbox')).to.equal(null); resolveCallback!(); diff --git a/packages/grid/x-data-grid/package.json b/packages/grid/x-data-grid/package.json index 19a7e212b50c8..6d36ef2bf2039 100644 --- a/packages/grid/x-data-grid/package.json +++ b/packages/grid/x-data-grid/package.json @@ -47,7 +47,7 @@ }, "dependencies": { "@babel/runtime": "^7.23.1", - "@mui/utils": "^5.14.11", + "@mui/utils": "^5.14.14", "clsx": "^2.0.0", "prop-types": "^15.8.1", "reselect": "^4.1.8" diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index 1c7db645f61d2..03c9fb1329fc1 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -39,7 +39,7 @@ }, "dependencies": { "@babel/runtime": "^7.23.1", - "@mui/base": "^5.0.0-beta.17", + "@mui/base": "^5.0.0-beta.20", "@react-spring/rafz": "^9.7.3", "@react-spring/web": "^9.7.3", "clsx": "^2.0.0", diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index 30ac56f1fef5b..06d7c565819f1 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -42,8 +42,8 @@ }, "dependencies": { "@babel/runtime": "^7.23.1", - "@mui/base": "^5.0.0-beta.17", - "@mui/utils": "^5.14.11", + "@mui/base": "^5.0.0-beta.20", + "@mui/utils": "^5.14.14", "@mui/x-date-pickers": "6.16.2", "@mui/x-license-pro": "6.10.2", "clsx": "^2.0.0", diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index 562aac535712e..1e1d3bb827bd4 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -114,7 +114,7 @@ SingleInputDateRangeField.propTypes = { /** * The color of the component. * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors). * @default 'primary' */ color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index a656eb4cfdef2..99e6243641c11 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -120,7 +120,7 @@ SingleInputDateTimeRangeField.propTypes = { /** * The color of the component. * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors). * @default 'primary' */ color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index 6633ac7a1b9d4..7add5752b18b0 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -119,7 +119,7 @@ SingleInputTimeRangeField.propTypes = { /** * The color of the component. * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors). * @default 'primary' */ color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 7ac22179d8c42..6a41ab8613db7 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -45,8 +45,8 @@ }, "dependencies": { "@babel/runtime": "^7.23.1", - "@mui/base": "^5.0.0-beta.17", - "@mui/utils": "^5.14.11", + "@mui/base": "^5.0.0-beta.20", + "@mui/utils": "^5.14.14", "@types/react-transition-group": "^4.4.7", "clsx": "^2.0.0", "prop-types": "^15.8.1", diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index ffd3ad5b76e05..67d54af4e94b0 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -114,7 +114,7 @@ DateField.propTypes = { /** * The color of the component. * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors). * @default 'primary' */ color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index bf7617deab8c2..df3bc2463cd47 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -117,7 +117,7 @@ DateTimeField.propTypes = { /** * The color of the component. * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors). * @default 'primary' */ color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index 26908efef28af..29ef19238c227 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -116,7 +116,7 @@ TimeField.propTypes = { /** * The color of the component. * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors). * @default 'primary' */ color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), diff --git a/packages/x-license-pro/package.json b/packages/x-license-pro/package.json index e395b82721a70..1448d7aa24a55 100644 --- a/packages/x-license-pro/package.json +++ b/packages/x-license-pro/package.json @@ -36,7 +36,7 @@ }, "dependencies": { "@babel/runtime": "^7.23.1", - "@mui/utils": "^5.14.11" + "@mui/utils": "^5.14.14" }, "peerDependencies": { "react": "^17.0.0 || ^18.0.0" diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json index 521072495aa36..557ee0994255c 100644 --- a/packages/x-tree-view/package.json +++ b/packages/x-tree-view/package.json @@ -43,8 +43,8 @@ }, "dependencies": { "@babel/runtime": "^7.23.1", - "@mui/base": "^5.0.0-beta.17", - "@mui/utils": "^5.14.11", + "@mui/base": "^5.0.0-beta.20", + "@mui/utils": "^5.14.14", "@types/react-transition-group": "^4.4.7", "clsx": "^2.0.0", "prop-types": "^15.8.1", diff --git a/renovate.json b/renovate.json index d4ecaa53305f1..8416684a28cf3 100644 --- a/renovate.json +++ b/renovate.json @@ -80,10 +80,11 @@ { "groupName": "MUI Core", "matchPackageNames": [ - "@mui/material", - "@mui/joy", - "@mui/icons-material", "@mui/base", + "@mui/icons-material", + "@mui/joy", + "@mui/lab", + "@mui/material", "@mui/styles", "@mui/system", "@mui/utils" diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts index a7e4064010006..37a32aa13fff5 100644 --- a/test/e2e/index.test.ts +++ b/test/e2e/index.test.ts @@ -189,7 +189,7 @@ async function initializeEnvironment( await waitFor(async () => { expect(await page.evaluate(() => document.activeElement?.textContent)).to.equal('100'); expect(await page.evaluate(() => document.activeElement?.getAttribute('role'))).to.equal( - 'button', + 'combobox', ); }); await page.keyboard.press('Shift+Tab'); diff --git a/yarn.lock b/yarn.lock index b45e24ae40868..aceb4110f1696 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1273,7 +1273,7 @@ core-js "^2.6.12" regenerator-runtime "^0.14.0" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.15", "@babel/runtime@^7.22.6", "@babel/runtime@^7.23.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.23.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": version "7.23.1" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d" integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g== @@ -1792,84 +1792,71 @@ react-test-renderer "^18.0.0" semver "^5.7.0" -"@mui/base@5.0.0-beta.17", "@mui/base@^5.0.0-beta.17": - version "5.0.0-beta.17" - resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.17.tgz#98b7ef6a3176b7aaf59ac8862d3271acb6876bc0" - integrity sha512-xNbk7iOXrglNdIxFBN0k3ySsPIFLWCnFxqsAYl7CIcDkD9low4kJ7IUuy6ctwx/HAy2fenrT3KXHr1sGjAMgpQ== +"@mui/base@5.0.0-beta.20", "@mui/base@^5.0.0-beta.20": + version "5.0.0-beta.20" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.20.tgz#14fcdfe0350f2aad06ab6c37c4c91dacaab8f600" + integrity sha512-CS2pUuqxST7ch9VNDCklRYDbJ3rru20Tx7na92QvVVKfu3RL4z/QLuVIc8jYGsdCnauMaeUSlFNLAJNb0yXe6w== dependencies: - "@babel/runtime" "^7.22.15" + "@babel/runtime" "^7.23.1" "@floating-ui/react-dom" "^2.0.2" - "@mui/types" "^7.2.4" - "@mui/utils" "^5.14.11" + "@mui/types" "^7.2.6" + "@mui/utils" "^5.14.13" "@popperjs/core" "^2.11.8" clsx "^2.0.0" prop-types "^15.8.1" -"@mui/base@5.0.0-beta.18": - version "5.0.0-beta.18" - resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.18.tgz#f95d393cf80974e77c0823170cc15c854d5af84b" - integrity sha512-e9ZCy/ndhyt5MTshAS3qAUy/40UiO0jX+kAo6a+XirrPJE+rrQW+mKPSI0uyp+5z4Vh+z0pvNoJ2S2gSrNz3BQ== +"@mui/core-downloads-tracker@^5.14.14": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.14.tgz#a54894e9b4dc908ab2d59eac543219d9018448e6" + integrity sha512-Rw/xKiTOUgXD8hdKqj60aC6QcGprMipG7ne2giK6Mz7b4PlhL/xog9xLeclY3BxsRLkZQ05egFnIEY1CSibTbw== + +"@mui/icons-material@^5.14.14": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.14.tgz#02d33f51f0b9de238d5c47b0a31ff330144393c4" + integrity sha512-vwuaMsKvI7AWTeYqR8wYbpXijuU8PzMAJWRAq2DDIuOZPxjKyHlr8WQ25+azZYkIXtJ7AqnVb1ZmHdEyB4/kug== dependencies: "@babel/runtime" "^7.23.1" - "@floating-ui/react-dom" "^2.0.2" - "@mui/types" "^7.2.5" - "@mui/utils" "^5.14.12" - "@popperjs/core" "^2.11.8" - clsx "^2.0.0" - prop-types "^15.8.1" - -"@mui/core-downloads-tracker@^5.14.11": - version "5.14.11" - resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.11.tgz#e829aceb5c0bbfc3383ed90a6a85445344dd65a7" - integrity sha512-uY8FLQURhXe3f3O4dS5OSGML9KDm9+IE226cBu78jarVIzdQGPlXwGIlSI9VJR8MvZDA6C0+6XfWDhWCHruC5Q== -"@mui/icons-material@^5.14.11": - version "5.14.11" - resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.11.tgz#ce563d1b6c7abc76f8a8048c970135601e7b49b5" - integrity sha512-aHReLasBuS/+hhPzbZCgZ0eTcZ2QRnoC2WNK7XvdAf3l+LjC1flzjh6GWw1tZJ5NHnZ+bivdwtLFQ8XTR96JkA== - dependencies: - "@babel/runtime" "^7.22.15" - -"@mui/joy@^5.0.0-beta.8": - version "5.0.0-beta.8" - resolved "https://registry.yarnpkg.com/@mui/joy/-/joy-5.0.0-beta.8.tgz#d20802632fbc0d02e8ca26841dadb16057829d93" - integrity sha512-tpe7miwGpzZ//5n+qeb89TaOcrMZ8Q6difPyr7apxkHx0d2c75LCmaHh8w3HqYNc/m2E71UAS8EoN/a6s/oZlA== - dependencies: - "@babel/runtime" "^7.22.15" - "@mui/base" "5.0.0-beta.17" - "@mui/core-downloads-tracker" "^5.14.11" - "@mui/system" "^5.14.11" - "@mui/types" "^7.2.4" - "@mui/utils" "^5.14.11" +"@mui/joy@^5.0.0-beta.11": + version "5.0.0-beta.11" + resolved "https://registry.yarnpkg.com/@mui/joy/-/joy-5.0.0-beta.11.tgz#859961b05b7921351caa806d2b37d9c8bcb68abc" + integrity sha512-NHtNPaNkpvL8o4VFsMcNBKVlYNaRttl9bLYbK6H0xzVYzk0PV/CHsauY35kpG8o67qsFaXy5nRe5RZPglNwX1Q== + dependencies: + "@babel/runtime" "^7.23.1" + "@mui/base" "5.0.0-beta.20" + "@mui/core-downloads-tracker" "^5.14.14" + "@mui/system" "^5.14.14" + "@mui/types" "^7.2.6" + "@mui/utils" "^5.14.13" clsx "^2.0.0" prop-types "^15.8.1" -"@mui/lab@^5.0.0-alpha.147": - version "5.0.0-alpha.147" - resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.147.tgz#5586ef727c355617c499d0e13ab7dbd33ece1e09" - integrity sha512-AZjDEl31/co9baYrOBHMlXI8BCrV9JTCGDE2+IswVm32HNPYL5V2gHL3wKqn+MIFeCEg+z2es+8CU/Bau0JNSQ== +"@mui/lab@^5.0.0-alpha.149": + version "5.0.0-alpha.149" + resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.149.tgz#4bbdc8ba1c3b57d5a557b171463bc692b308ead2" + integrity sha512-azOkKcyVX4KBZAqSp7eRD4OfKrUrvQXo7x2BjFJil+UeAJiMpB6I5lALo2PDZz3vjtJnHqlURnZtxZOHs1zfEA== dependencies: "@babel/runtime" "^7.23.1" - "@mui/base" "5.0.0-beta.18" - "@mui/system" "^5.14.12" - "@mui/types" "^7.2.5" - "@mui/utils" "^5.14.12" + "@mui/base" "5.0.0-beta.20" + "@mui/system" "^5.14.14" + "@mui/types" "^7.2.6" + "@mui/utils" "^5.14.13" "@mui/x-tree-view" "6.0.0-alpha.1" clsx "^2.0.0" prop-types "^15.8.1" -"@mui/material@^5.14.11": - version "5.14.11" - resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.11.tgz#7537f07c383a6cfa32a00fabc9959593478bc5c4" - integrity sha512-DnSdJzcR7lwG12JA5L2t8JF+RDzMygu5rCNW+logWb/KW2/TRzwLyVWO+CorHTBjBRd38DBxnwOCDiYkDd+N3A== - dependencies: - "@babel/runtime" "^7.22.15" - "@mui/base" "5.0.0-beta.17" - "@mui/core-downloads-tracker" "^5.14.11" - "@mui/system" "^5.14.11" - "@mui/types" "^7.2.4" - "@mui/utils" "^5.14.11" - "@types/react-transition-group" "^4.4.6" +"@mui/material@^5.14.14": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.14.tgz#e47f3992b609002cd57a71f70e829dc2d286028c" + integrity sha512-cAmCwAHFQXxb44kWbVFkhKATN8tACgMsFwrXo8ro6WzYW73U/qsR5AcCiJIhCyYYg+gcftfkmNcpRaV3JjhHCg== + dependencies: + "@babel/runtime" "^7.23.1" + "@mui/base" "5.0.0-beta.20" + "@mui/core-downloads-tracker" "^5.14.14" + "@mui/system" "^5.14.14" + "@mui/types" "^7.2.6" + "@mui/utils" "^5.14.13" + "@types/react-transition-group" "^4.4.7" clsx "^2.0.0" csstype "^3.1.2" prop-types "^15.8.1" @@ -1880,54 +1867,35 @@ version "5.14.11" resolved "https://github.com/mui/material-ui.git#7f9c09fea69759f0f621cbe3eb0f738d51c8201e" -"@mui/private-theming@^5.14.11": - version "5.14.11" - resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.11.tgz#1543b4d13d5cb32018c5bd41b516db1c33f70344" - integrity sha512-MSnNNzTu9pfKLCKs1ZAKwOTgE4bz+fQA0fNr8Jm7NDmuWmw0CaN9Vq2/MHsatE7+S0A25IAKby46Uv1u53rKVQ== - dependencies: - "@babel/runtime" "^7.22.15" - "@mui/utils" "^5.14.11" - prop-types "^15.8.1" - -"@mui/private-theming@^5.14.12": - version "5.14.12" - resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.12.tgz#b07f710b9794c928052ee4c91bf67fc3e0a442ea" - integrity sha512-TWwm+9+BgHFpoR3w04FG+IqID4ALa74A27RuKq2CEaWgxliBZB24EVeI6djfjFt5t4FYmIb8BMw2ZJEir7YjLQ== +"@mui/private-theming@^5.14.14": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.14.tgz#035dde1eb30c896c69a12b7dee1dce3a323c66e9" + integrity sha512-n77au3CQj9uu16hak2Y+rvbGSBaJKxziG/gEbOLVGrAuqZ+ycVSkorCfN6Y/4XgYOpG/xvmuiY3JwhAEOzY3iA== dependencies: "@babel/runtime" "^7.23.1" - "@mui/utils" "^5.14.12" + "@mui/utils" "^5.14.13" prop-types "^15.8.1" -"@mui/styled-engine@^5.14.11": - version "5.14.11" - resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.11.tgz#22cb0047f211be4dbc133a5d1015369293bdff00" - integrity sha512-jdUlqRgTYQ8RMtPX4MbRZqar6W2OiIb6J5KEFbIu4FqvPrk44Each4ppg/LAqp1qNlBYq5i+7Q10MYLMpDxX9A== - dependencies: - "@babel/runtime" "^7.22.15" - "@emotion/cache" "^11.11.0" - csstype "^3.1.2" - prop-types "^15.8.1" - -"@mui/styled-engine@^5.14.12": - version "5.14.12" - resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.12.tgz#bfacc045f14f8f8bef735c76ecfd90bc99427c43" - integrity sha512-bocxt1nDmXfB3gpLfCCmFCyJ7sVmscFs+PuheO210QagZwHVp47UIRT1AiswLDYSQo1ZqmVGn7KLEJEYK0d4Xw== +"@mui/styled-engine@^5.14.13": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.14.tgz#b0ededf531fff1ef110f7b263c2d3d95a0b8ec9a" + integrity sha512-sF3DS2PVG+cFWvkVHQQaGFpL1h6gSwOW3L91pdxPLQDHDZ5mZ/X0SlXU5XA+WjypoysG4urdAQC7CH/BRvUiqg== dependencies: "@babel/runtime" "^7.23.1" "@emotion/cache" "^11.11.0" csstype "^3.1.2" prop-types "^15.8.1" -"@mui/styles@^5.14.11": - version "5.14.11" - resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.14.11.tgz#3a9c31e927b9115c62c5260c5614c178f849aa43" - integrity sha512-43TTaH/QBNAvwFfN0Dz1UREZLs5Yd8X4XrsiYgIJJgdGsr2TtlKz/WRHqDNwWkNg/gs3qcWIbtNweTIoTkov/g== +"@mui/styles@^5.14.14": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.14.14.tgz#5087faf5e11d58dadd39bdf0f45983629abc817c" + integrity sha512-+LzSg7IjfxJRukIPULfAd025qsSCquHrTEC10EYjxbJJvHuE5nWx9D9w7lSRXxfWrxZZx+92rTUKVk9607zXBA== dependencies: - "@babel/runtime" "^7.22.15" + "@babel/runtime" "^7.23.1" "@emotion/hash" "^0.9.1" - "@mui/private-theming" "^5.14.11" - "@mui/types" "^7.2.4" - "@mui/utils" "^5.14.11" + "@mui/private-theming" "^5.14.14" + "@mui/types" "^7.2.6" + "@mui/utils" "^5.14.13" clsx "^2.0.0" csstype "^3.1.2" hoist-non-react-statics "^3.3.2" @@ -1941,58 +1909,29 @@ jss-plugin-vendor-prefixer "^10.10.0" prop-types "^15.8.1" -"@mui/system@^5.14.11": - version "5.14.11" - resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.11.tgz#4f3aaf3e3d6d039e41a60f939056aa5fd371d291" - integrity sha512-yl8xV+y0k7j6dzBsHabKwoShmjqLa8kTxrhUI3JpqLG358VRVMJRW/ES0HhvfcCi4IVXde+Tc2P3K1akGL8zoA== - dependencies: - "@babel/runtime" "^7.22.15" - "@mui/private-theming" "^5.14.11" - "@mui/styled-engine" "^5.14.11" - "@mui/types" "^7.2.4" - "@mui/utils" "^5.14.11" - clsx "^2.0.0" - csstype "^3.1.2" - prop-types "^15.8.1" - -"@mui/system@^5.14.12": - version "5.14.12" - resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.12.tgz#da5b32c2a10bbe58f8b4839c5d5de449dc35e425" - integrity sha512-6DXfjjLhW0/ia5qU3Crke7j+MnfDbMBOHlLIrqbrEqNs0AuSBv8pXniEGb+kqO0H804NJreRTEJRjCngwOX5CA== +"@mui/system@^5.14.14": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.14.tgz#f33327e74230523169107ace960e8bb51cbdbab7" + integrity sha512-y4InFmCgGGWXnz+iK4jRTWVikY0HgYnABjz4wgiUgEa2W1H8M4ow+27BegExUWPkj4TWthQ2qG9FOGSMtI+PKA== dependencies: "@babel/runtime" "^7.23.1" - "@mui/private-theming" "^5.14.12" - "@mui/styled-engine" "^5.14.12" - "@mui/types" "^7.2.5" - "@mui/utils" "^5.14.12" + "@mui/private-theming" "^5.14.14" + "@mui/styled-engine" "^5.14.13" + "@mui/types" "^7.2.6" + "@mui/utils" "^5.14.13" clsx "^2.0.0" csstype "^3.1.2" prop-types "^15.8.1" -"@mui/types@^7.2.4": - version "7.2.4" - resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328" - integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA== - -"@mui/types@^7.2.5": - version "7.2.5" - resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.5.tgz#cd62a1fc5eb1044137ccab2053b431dd7cfc3cb8" - integrity sha512-S2BwfNczr7VwS6ki8GoAXJyARoeSJDLuxOEPs3vEMyTALlf9PrdHv+sluX7kk3iKrCg/ML2mIWwapZvWbkMCQA== +"@mui/types@^7.2.6": + version "7.2.6" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.6.tgz#d72b9e9eb0032e107e76033932d65c3f731d2608" + integrity sha512-7sjLQrUmBwufm/M7jw/quNiPK/oor2+pGUQP2CULRcFCArYTq78oJ3D5esTaL0UMkXKJvDqXn6Ike69yAOBQng== -"@mui/utils@^5.14.11": - version "5.14.11" - resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.11.tgz#d19a1d8725ffd16c6c6817f00b5172931958fb9a" - integrity sha512-fmkIiCPKyDssYrJ5qk+dime1nlO3dmWfCtaPY/uVBqCRMBZ11JhddB9m8sjI2mgqQQwRJG5bq3biaosNdU/s4Q== - dependencies: - "@babel/runtime" "^7.22.15" - "@types/prop-types" "^15.7.5" - prop-types "^15.8.1" - react-is "^18.2.0" - -"@mui/utils@^5.14.12", "@mui/utils@^5.14.3": - version "5.14.12" - resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.12.tgz#58b570839e22e0fba71e17d37d9c083fe233704d" - integrity sha512-RFNXnhKQlzIkIUig6mmv0r5VbtjPdWoaBPYicq25LETdZux59HAqoRdWw15T7lp3c7gXOoE8y67+hTB8C64m2g== +"@mui/utils@^5.14.13", "@mui/utils@^5.14.14", "@mui/utils@^5.14.3": + version "5.14.14" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.14.tgz#7b2a0bcfb44c3376fc81f85500f9bd01706682ac" + integrity sha512-3AKp8uksje5sRfVrtgG9Q/2TBsHWVBUtA0NaXliZqGcXo8J+A+Agp0qUW2rJ+ivgPWTCCubz9FZVT2IQZ3bGsw== dependencies: "@babel/runtime" "^7.23.1" "@types/prop-types" "^15.7.7" @@ -3055,12 +2994,7 @@ resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f" integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA== -"@types/prop-types@*", "@types/prop-types@^15.7.5": - version "15.7.5" - resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" - integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== - -"@types/prop-types@^15.7.7": +"@types/prop-types@*", "@types/prop-types@^15.7.7": version "15.7.8" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.8.tgz#805eae6e8f41bd19e88917d2ea200dc992f405d3" integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ== From fb0b50f1a0aec0f6cd82febd2b8f0cd81ceaa92d Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 12:53:52 +0300 Subject: [PATCH 147/262] Bump babel to ^7.23.2 (#10679) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 6 +- package.json | 8 +- .../grid/x-data-grid-generator/package.json | 2 +- .../grid/x-data-grid-premium/package.json | 2 +- packages/grid/x-data-grid-pro/package.json | 2 +- packages/grid/x-data-grid/package.json | 2 +- packages/x-charts/package.json | 2 +- packages/x-codemod/package.json | 4 +- packages/x-date-pickers-pro/package.json | 2 +- packages/x-date-pickers/package.json | 2 +- packages/x-license-pro/package.json | 2 +- packages/x-tree-view/package.json | 2 +- yarn.lock | 284 +++++++++--------- 13 files changed, 160 insertions(+), 160 deletions(-) diff --git a/docs/package.json b/docs/package.json index e7eabee76e697..44eaf661e4352 100644 --- a/docs/package.json +++ b/docs/package.json @@ -20,9 +20,9 @@ "populate:demos": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" scripts/populatePickersDemos" }, "dependencies": { - "@babel/core": "^7.23.0", + "@babel/core": "^7.23.2", "@babel/plugin-transform-object-assign": "^7.22.5", - "@babel/runtime-corejs2": "^7.23.1", + "@babel/runtime-corejs2": "^7.23.2", "@docsearch/react": "^3.5.2", "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.1", @@ -93,7 +93,7 @@ }, "devDependencies": { "@babel/plugin-transform-react-constant-elements": "^7.22.5", - "@babel/preset-typescript": "^7.23.0", + "@babel/preset-typescript": "^7.23.2", "@types/doctrine": "^0.0.7", "cpy-cli": "^5.0.0", "gm": "^1.25.0", diff --git a/package.json b/package.json index 39176efd06e3e..8dad09079fdec 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "devDependencies": { "@argos-ci/core": "^0.12.0", "@babel/cli": "^7.23.0", - "@babel/core": "^7.23.0", + "@babel/core": "^7.23.2", "@babel/node": "^7.22.19", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.20.7", @@ -72,10 +72,10 @@ "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/plugin-transform-object-assign": "^7.22.5", "@babel/plugin-transform-react-constant-elements": "^7.22.5", - "@babel/plugin-transform-runtime": "^7.22.15", - "@babel/preset-env": "^7.22.20", + "@babel/plugin-transform-runtime": "^7.23.2", + "@babel/preset-env": "^7.23.2", "@babel/preset-react": "^7.22.15", - "@babel/preset-typescript": "^7.23.0", + "@babel/preset-typescript": "^7.23.2", "@babel/register": "^7.22.15", "@babel/traverse": "^7.23.0", "@babel/types": "^7.23.0", diff --git a/packages/grid/x-data-grid-generator/package.json b/packages/grid/x-data-grid-generator/package.json index 238cc3b0fdac2..ce11e6a366d69 100644 --- a/packages/grid/x-data-grid-generator/package.json +++ b/packages/grid/x-data-grid-generator/package.json @@ -30,7 +30,7 @@ "directory": "packages/grid/x-data-grid-generator" }, "dependencies": { - "@babel/runtime": "^7.23.1", + "@babel/runtime": "^7.23.2", "@mui/base": "^5.0.0-beta.20", "@mui/x-data-grid-premium": "6.16.2", "chance": "^1.1.11", diff --git a/packages/grid/x-data-grid-premium/package.json b/packages/grid/x-data-grid-premium/package.json index 6ab412efbf7e6..a3e43de56cb9f 100644 --- a/packages/grid/x-data-grid-premium/package.json +++ b/packages/grid/x-data-grid-premium/package.json @@ -42,7 +42,7 @@ "directory": "packages/grid/x-data-grid-premium" }, "dependencies": { - "@babel/runtime": "^7.23.1", + "@babel/runtime": "^7.23.2", "@mui/utils": "^5.14.14", "@mui/x-data-grid": "6.16.2", "@mui/x-data-grid-pro": "6.16.2", diff --git a/packages/grid/x-data-grid-pro/package.json b/packages/grid/x-data-grid-pro/package.json index 5fa2ecebda0da..c7c0b3bba16b5 100644 --- a/packages/grid/x-data-grid-pro/package.json +++ b/packages/grid/x-data-grid-pro/package.json @@ -42,7 +42,7 @@ "directory": "packages/grid/x-data-grid-pro" }, "dependencies": { - "@babel/runtime": "^7.23.1", + "@babel/runtime": "^7.23.2", "@mui/utils": "^5.14.14", "@mui/x-data-grid": "6.16.2", "@mui/x-license-pro": "6.10.2", diff --git a/packages/grid/x-data-grid/package.json b/packages/grid/x-data-grid/package.json index 6d36ef2bf2039..11d5c2445b2fe 100644 --- a/packages/grid/x-data-grid/package.json +++ b/packages/grid/x-data-grid/package.json @@ -46,7 +46,7 @@ "directory": "packages/grid/x-data-grid" }, "dependencies": { - "@babel/runtime": "^7.23.1", + "@babel/runtime": "^7.23.2", "@mui/utils": "^5.14.14", "clsx": "^2.0.0", "prop-types": "^15.8.1", diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index 03c9fb1329fc1..ade6adbdae78c 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -38,7 +38,7 @@ "directory": "packages/x-charts" }, "dependencies": { - "@babel/runtime": "^7.23.1", + "@babel/runtime": "^7.23.2", "@mui/base": "^5.0.0-beta.20", "@react-spring/rafz": "^9.7.3", "@react-spring/web": "^9.7.3", diff --git a/packages/x-codemod/package.json b/packages/x-codemod/package.json index 9eb0f7aa96103..39c447eb592e9 100644 --- a/packages/x-codemod/package.json +++ b/packages/x-codemod/package.json @@ -31,8 +31,8 @@ "url": "https://opencollective.com/mui" }, "dependencies": { - "@babel/core": "^7.23.0", - "@babel/runtime": "^7.23.1", + "@babel/core": "^7.23.2", + "@babel/runtime": "^7.23.2", "@babel/traverse": "^7.23.0", "jscodeshift": "0.13.1", "jscodeshift-add-imports": "^1.0.10", diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index 06d7c565819f1..2f906047c06b9 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -41,7 +41,7 @@ "directory": "packages/x-date-pickers-pro" }, "dependencies": { - "@babel/runtime": "^7.23.1", + "@babel/runtime": "^7.23.2", "@mui/base": "^5.0.0-beta.20", "@mui/utils": "^5.14.14", "@mui/x-date-pickers": "6.16.2", diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 6a41ab8613db7..20265b634bafc 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -44,7 +44,7 @@ "directory": "packages/x-date-pickers" }, "dependencies": { - "@babel/runtime": "^7.23.1", + "@babel/runtime": "^7.23.2", "@mui/base": "^5.0.0-beta.20", "@mui/utils": "^5.14.14", "@types/react-transition-group": "^4.4.7", diff --git a/packages/x-license-pro/package.json b/packages/x-license-pro/package.json index 1448d7aa24a55..9db2a18594340 100644 --- a/packages/x-license-pro/package.json +++ b/packages/x-license-pro/package.json @@ -35,7 +35,7 @@ "directory": "packages/x-license-pro" }, "dependencies": { - "@babel/runtime": "^7.23.1", + "@babel/runtime": "^7.23.2", "@mui/utils": "^5.14.14" }, "peerDependencies": { diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json index 557ee0994255c..2de176d740f60 100644 --- a/packages/x-tree-view/package.json +++ b/packages/x-tree-view/package.json @@ -42,7 +42,7 @@ "directory": "packages/x-tree-view" }, "dependencies": { - "@babel/runtime": "^7.23.1", + "@babel/runtime": "^7.23.2", "@mui/base": "^5.0.0-beta.20", "@mui/utils": "^5.14.14", "@types/react-transition-group": "^4.4.7", diff --git a/yarn.lock b/yarn.lock index aceb4110f1696..82585453ce361 100644 --- a/yarn.lock +++ b/yarn.lock @@ -183,25 +183,25 @@ "@babel/highlight" "^7.22.13" chalk "^2.4.2" -"@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.20", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9": - version "7.22.20" - resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.20.tgz#8df6e96661209623f1975d66c35ffca66f3306d0" - integrity sha512-BQYjKbpXjoXwFW5jGqiizJQQT/aC7pFm9Ok1OWssonuguICi264lbgMzRp2ZMmRSlfkX6DsWDDcsrctK8Rwfiw== +"@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9", "@babel/compat-data@^7.23.2": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.2.tgz#6a12ced93455827037bfb5ed8492820d60fc32cc" + integrity sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ== -"@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.23.0", "@babel/core@^7.7.5": - version "7.23.0" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.0.tgz#f8259ae0e52a123eb40f552551e647b506a94d83" - integrity sha512-97z/ju/Jy1rZmDxybphrBuI+jtJjFVoz7Mr9yUQVVVi+DNZE333uFQeMOqcCIy1x3WYBIbWftUSLmbNXNT7qFQ== +"@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.23.2", "@babel/core@^7.7.5": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.2.tgz#ed10df0d580fff67c5f3ee70fd22e2e4c90a9f94" + integrity sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ== dependencies: "@ampproject/remapping" "^2.2.0" "@babel/code-frame" "^7.22.13" "@babel/generator" "^7.23.0" "@babel/helper-compilation-targets" "^7.22.15" "@babel/helper-module-transforms" "^7.23.0" - "@babel/helpers" "^7.23.0" + "@babel/helpers" "^7.23.2" "@babel/parser" "^7.23.0" "@babel/template" "^7.22.15" - "@babel/traverse" "^7.23.0" + "@babel/traverse" "^7.23.2" "@babel/types" "^7.23.0" convert-source-map "^2.0.0" debug "^4.1.0" @@ -268,10 +268,10 @@ regexpu-core "^5.3.1" semver "^6.3.0" -"@babel/helper-define-polyfill-provider@^0.4.2": - version "0.4.2" - resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.2.tgz#82c825cadeeeee7aad237618ebbe8fa1710015d7" - integrity sha512-k0qnnOqHn5dK9pZpfD5XXZ9SojAITdCKRn2Lp6rnDGzIbaP0rHyMPk/4wsSxVBVz4RfN0q6VpXWP2pDGIoQ7hw== +"@babel/helper-define-polyfill-provider@^0.4.3": + version "0.4.3" + resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.3.tgz#a71c10f7146d809f4a256c373f462d9bba8cf6ba" + integrity sha512-WBrLmuPP47n7PNwsZ57pqam6G/RGo1vw/87b0Blc53tZNGZ4x7YvZ6HgQe2vo1W/FR20OgjeZuGXzudPiXHFug== dependencies: "@babel/helper-compilation-targets" "^7.22.6" "@babel/helper-plugin-utils" "^7.22.5" @@ -313,7 +313,7 @@ dependencies: "@babel/types" "^7.22.15" -"@babel/helper-module-transforms@^7.22.5", "@babel/helper-module-transforms@^7.22.9", "@babel/helper-module-transforms@^7.23.0": +"@babel/helper-module-transforms@^7.22.5", "@babel/helper-module-transforms@^7.23.0": version "7.23.0" resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz#3ec246457f6c842c0aee62a01f60739906f7047e" integrity sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw== @@ -336,14 +336,14 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295" integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg== -"@babel/helper-remap-async-to-generator@^7.22.5", "@babel/helper-remap-async-to-generator@^7.22.9": - version "7.22.9" - resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.9.tgz#53a25b7484e722d7efb9c350c75c032d4628de82" - integrity sha512-8WWC4oR4Px+tr+Fp0X3RHDVfINGpF3ad1HIbrc8A77epiR6eMMc6jsgozkzT2uDiOOdoS9cLIQ+XD2XvI2WSmQ== +"@babel/helper-remap-async-to-generator@^7.22.20", "@babel/helper-remap-async-to-generator@^7.22.5": + version "7.22.20" + resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz#7b68e1cb4fa964d2996fd063723fb48eca8498e0" + integrity sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw== dependencies: "@babel/helper-annotate-as-pure" "^7.22.5" - "@babel/helper-environment-visitor" "^7.22.5" - "@babel/helper-wrap-function" "^7.22.9" + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-wrap-function" "^7.22.20" "@babel/helper-replace-supers@^7.22.5", "@babel/helper-replace-supers@^7.22.9": version "7.22.9" @@ -390,22 +390,22 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040" integrity sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA== -"@babel/helper-wrap-function@^7.22.9": - version "7.22.10" - resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.10.tgz#d845e043880ed0b8c18bd194a12005cb16d2f614" - integrity sha512-OnMhjWjuGYtdoO3FmsEFWvBStBAe2QOgwOLsLNDjN+aaiMD8InJk1/O3HSD8lkqTjCgg5YI34Tz15KNNA3p+nQ== +"@babel/helper-wrap-function@^7.22.20": + version "7.22.20" + resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz#15352b0b9bfb10fc9c76f79f6342c00e3411a569" + integrity sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw== dependencies: "@babel/helper-function-name" "^7.22.5" - "@babel/template" "^7.22.5" - "@babel/types" "^7.22.10" + "@babel/template" "^7.22.15" + "@babel/types" "^7.22.19" -"@babel/helpers@^7.23.0": - version "7.23.1" - resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.1.tgz#44e981e8ce2b9e99f8f0b703f3326a4636c16d15" - integrity sha512-chNpneuK18yW5Oxsr+t553UZzzAs3aZnFm4bxhebsNTeshrC95yA7l5yl7GBAG+JG1rF0F7zzD2EixK9mWSDoA== +"@babel/helpers@^7.23.2": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.2.tgz#2832549a6e37d484286e15ba36a5330483cac767" + integrity sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ== dependencies: "@babel/template" "^7.22.15" - "@babel/traverse" "^7.23.0" + "@babel/traverse" "^7.23.2" "@babel/types" "^7.23.0" "@babel/highlight@^7.22.13": @@ -664,14 +664,14 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-async-generator-functions@^7.22.15": - version "7.22.15" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.15.tgz#3b153af4a6b779f340d5b80d3f634f55820aefa3" - integrity sha512-jBm1Es25Y+tVoTi5rfd5t1KLmL8ogLKpXszboWOTTtGFGz2RKnQe2yn7HbZ+kb/B8N0FVSGQo874NSlOU1T4+w== +"@babel/plugin-transform-async-generator-functions@^7.23.2": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.2.tgz#054afe290d64c6f576f371ccc321772c8ea87ebb" + integrity sha512-BBYVGxbDVHfoeXbOwcagAkOQAm9NxoTdMGfTqghu1GrvadSaw6iW3Je6IcL5PNOw8VwjxqBECXy50/iCQSY/lQ== dependencies: - "@babel/helper-environment-visitor" "^7.22.5" + "@babel/helper-environment-visitor" "^7.22.20" "@babel/helper-plugin-utils" "^7.22.5" - "@babel/helper-remap-async-to-generator" "^7.22.9" + "@babel/helper-remap-async-to-generator" "^7.22.20" "@babel/plugin-syntax-async-generators" "^7.8.4" "@babel/plugin-transform-async-to-generator@^7.22.5": @@ -690,10 +690,10 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-block-scoping@^7.22.15": - version "7.22.15" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.15.tgz#494eb82b87b5f8b1d8f6f28ea74078ec0a10a841" - integrity sha512-G1czpdJBZCtngoK1sJgloLiOHUnkb/bLZwqVZD8kXmq0ZnVfTTWUcs9OWtp0mBtYJ+4LQY1fllqBkOIPhXmFmw== +"@babel/plugin-transform-block-scoping@^7.23.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.0.tgz#8744d02c6c264d82e1a4bc5d2d501fd8aff6f022" + integrity sha512-cOsrbmIOXmf+5YbL99/S49Y3j46k/T16b9ml8bm9lP6N9US5iQ2yBK7gpui1pg0V/WMcXdkfKbTb7HXq9u+v4g== dependencies: "@babel/helper-plugin-utils" "^7.22.5" @@ -737,10 +737,10 @@ "@babel/helper-plugin-utils" "^7.22.5" "@babel/template" "^7.22.5" -"@babel/plugin-transform-destructuring@^7.22.15": - version "7.22.15" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.15.tgz#e7404ea5bb3387073b9754be654eecb578324694" - integrity sha512-HzG8sFl1ZVGTme74Nw+X01XsUTqERVQ6/RLHo3XjGRzm7XD6QTtfS3NJotVgCGy8BzkDqRjRBD8dAyJn5TuvSQ== +"@babel/plugin-transform-destructuring@^7.23.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.23.0.tgz#6447aa686be48b32eaf65a73e0e2c0bd010a266c" + integrity sha512-vaMdgNXFkYrB+8lbgniSYWHsgqK5gjaMNcc84bMIOMRLH0L9AqYq3hwMdvnyqj1OPqea8UtjPEuS/DCenah1wg== dependencies: "@babel/helper-plugin-utils" "^7.22.5" @@ -837,15 +837,15 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-modules-amd@^7.22.5": - version "7.22.5" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz#4e045f55dcf98afd00f85691a68fc0780704f526" - integrity sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ== +"@babel/plugin-transform-modules-amd@^7.23.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.23.0.tgz#05b2bc43373faa6d30ca89214731f76f966f3b88" + integrity sha512-xWT5gefv2HGSm4QHtgc1sYPbseOyf+FFDo2JbpE25GWl5BqTGO9IMwTYJRoIdjsF85GE+VegHxSCUt5EvoYTAw== dependencies: - "@babel/helper-module-transforms" "^7.22.5" + "@babel/helper-module-transforms" "^7.23.0" "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-modules-commonjs@^7.13.8", "@babel/plugin-transform-modules-commonjs@^7.22.15", "@babel/plugin-transform-modules-commonjs@^7.23.0": +"@babel/plugin-transform-modules-commonjs@^7.13.8", "@babel/plugin-transform-modules-commonjs@^7.23.0": version "7.23.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.0.tgz#b3dba4757133b2762c00f4f94590cf6d52602481" integrity sha512-32Xzss14/UVc7k9g775yMIvkVK8xwKE0DPdP5JTapr3+Z9w4tzeOuLNY6BXDQR6BdnzIlXnCGAzsk/ICHBLVWQ== @@ -854,15 +854,15 @@ "@babel/helper-plugin-utils" "^7.22.5" "@babel/helper-simple-access" "^7.22.5" -"@babel/plugin-transform-modules-systemjs@^7.22.11": - version "7.22.11" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.11.tgz#3386be5875d316493b517207e8f1931d93154bb1" - integrity sha512-rIqHmHoMEOhI3VkVf5jQ15l539KrwhzqcBO6wdCNWPWc/JWt9ILNYNUssbRpeq0qWns8svuw8LnMNCvWBIJ8wA== +"@babel/plugin-transform-modules-systemjs@^7.23.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.0.tgz#77591e126f3ff4132a40595a6cccd00a6b60d160" + integrity sha512-qBej6ctXZD2f+DhlOC9yO47yEYgUh5CZNz/aBoH4j/3NOlRfJXJbY7xDQCqQVf9KbrqGzIWER1f23doHGrIHFg== dependencies: "@babel/helper-hoist-variables" "^7.22.5" - "@babel/helper-module-transforms" "^7.22.9" + "@babel/helper-module-transforms" "^7.23.0" "@babel/helper-plugin-utils" "^7.22.5" - "@babel/helper-validator-identifier" "^7.22.5" + "@babel/helper-validator-identifier" "^7.22.20" "@babel/plugin-transform-modules-umd@^7.22.5": version "7.22.5" @@ -937,10 +937,10 @@ "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-syntax-optional-catch-binding" "^7.8.3" -"@babel/plugin-transform-optional-chaining@^7.22.15": - version "7.22.15" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.15.tgz#d7a5996c2f7ca4ad2ad16dbb74444e5c4385b1ba" - integrity sha512-ngQ2tBhq5vvSJw2Q2Z9i7ealNkpDMU0rGWnHPKqRZO0tzZ5tlaoz4hDvhXioOoaE0X2vfNss1djwg0DXlfu30A== +"@babel/plugin-transform-optional-chaining@^7.22.15", "@babel/plugin-transform-optional-chaining@^7.23.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.0.tgz#73ff5fc1cf98f542f09f29c0631647d8ad0be158" + integrity sha512-sBBGXbLJjxTzLBF5rFWaikMnOGOk/BmK6vVByIdEggZ7Vn6CvWXZyRkkLFK6WE0IF8jSliyOkUN6SScFgzCM0g== dependencies: "@babel/helper-plugin-utils" "^7.22.5" "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5" @@ -1033,16 +1033,16 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-runtime@^7.22.15": - version "7.22.15" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.22.15.tgz#3a625c4c05a39e932d7d34f5d4895cdd0172fdc9" - integrity sha512-tEVLhk8NRZSmwQ0DJtxxhTrCht1HVo8VaMzYT4w6lwyKBuHsgoioAUA7/6eT2fRfc5/23fuGdlwIxXhRVgWr4g== +"@babel/plugin-transform-runtime@^7.23.2": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.23.2.tgz#c956a3f8d1aa50816ff6c30c6288d66635c12990" + integrity sha512-XOntj6icgzMS58jPVtQpiuF6ZFWxQiJavISGx5KGjRj+3gqZr8+N6Kx+N9BApWzgS+DOjIZfXXj0ZesenOWDyA== dependencies: "@babel/helper-module-imports" "^7.22.15" "@babel/helper-plugin-utils" "^7.22.5" - babel-plugin-polyfill-corejs2 "^0.4.5" - babel-plugin-polyfill-corejs3 "^0.8.3" - babel-plugin-polyfill-regenerator "^0.5.2" + babel-plugin-polyfill-corejs2 "^0.4.6" + babel-plugin-polyfill-corejs3 "^0.8.5" + babel-plugin-polyfill-regenerator "^0.5.3" semver "^6.3.1" "@babel/plugin-transform-shorthand-properties@^7.22.5": @@ -1122,12 +1122,12 @@ "@babel/helper-create-regexp-features-plugin" "^7.22.5" "@babel/helper-plugin-utils" "^7.22.5" -"@babel/preset-env@^7.22.20": - version "7.22.20" - resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.22.20.tgz#de9e9b57e1127ce0a2f580831717f7fb677ceedb" - integrity sha512-11MY04gGC4kSzlPHRfvVkNAZhUxOvm7DCJ37hPDnUENwe06npjIRAfInEMTGSb4LZK5ZgDFkv5hw0lGebHeTyg== +"@babel/preset-env@^7.23.2": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.23.2.tgz#1f22be0ff0e121113260337dbc3e58fafce8d059" + integrity sha512-BW3gsuDD+rvHL2VO2SjAUNTBe5YrjsTiDyqamPDWY723na3/yPQ65X5oQkFVJZ0o50/2d+svm1rkPoJeR1KxVQ== dependencies: - "@babel/compat-data" "^7.22.20" + "@babel/compat-data" "^7.23.2" "@babel/helper-compilation-targets" "^7.22.15" "@babel/helper-plugin-utils" "^7.22.5" "@babel/helper-validator-option" "^7.22.15" @@ -1153,15 +1153,15 @@ "@babel/plugin-syntax-top-level-await" "^7.14.5" "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6" "@babel/plugin-transform-arrow-functions" "^7.22.5" - "@babel/plugin-transform-async-generator-functions" "^7.22.15" + "@babel/plugin-transform-async-generator-functions" "^7.23.2" "@babel/plugin-transform-async-to-generator" "^7.22.5" "@babel/plugin-transform-block-scoped-functions" "^7.22.5" - "@babel/plugin-transform-block-scoping" "^7.22.15" + "@babel/plugin-transform-block-scoping" "^7.23.0" "@babel/plugin-transform-class-properties" "^7.22.5" "@babel/plugin-transform-class-static-block" "^7.22.11" "@babel/plugin-transform-classes" "^7.22.15" "@babel/plugin-transform-computed-properties" "^7.22.5" - "@babel/plugin-transform-destructuring" "^7.22.15" + "@babel/plugin-transform-destructuring" "^7.23.0" "@babel/plugin-transform-dotall-regex" "^7.22.5" "@babel/plugin-transform-duplicate-keys" "^7.22.5" "@babel/plugin-transform-dynamic-import" "^7.22.11" @@ -1173,9 +1173,9 @@ "@babel/plugin-transform-literals" "^7.22.5" "@babel/plugin-transform-logical-assignment-operators" "^7.22.11" "@babel/plugin-transform-member-expression-literals" "^7.22.5" - "@babel/plugin-transform-modules-amd" "^7.22.5" - "@babel/plugin-transform-modules-commonjs" "^7.22.15" - "@babel/plugin-transform-modules-systemjs" "^7.22.11" + "@babel/plugin-transform-modules-amd" "^7.23.0" + "@babel/plugin-transform-modules-commonjs" "^7.23.0" + "@babel/plugin-transform-modules-systemjs" "^7.23.0" "@babel/plugin-transform-modules-umd" "^7.22.5" "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.5" "@babel/plugin-transform-new-target" "^7.22.5" @@ -1184,7 +1184,7 @@ "@babel/plugin-transform-object-rest-spread" "^7.22.15" "@babel/plugin-transform-object-super" "^7.22.5" "@babel/plugin-transform-optional-catch-binding" "^7.22.11" - "@babel/plugin-transform-optional-chaining" "^7.22.15" + "@babel/plugin-transform-optional-chaining" "^7.23.0" "@babel/plugin-transform-parameters" "^7.22.15" "@babel/plugin-transform-private-methods" "^7.22.5" "@babel/plugin-transform-private-property-in-object" "^7.22.11" @@ -1201,10 +1201,10 @@ "@babel/plugin-transform-unicode-regex" "^7.22.5" "@babel/plugin-transform-unicode-sets-regex" "^7.22.5" "@babel/preset-modules" "0.1.6-no-external-plugins" - "@babel/types" "^7.22.19" - babel-plugin-polyfill-corejs2 "^0.4.5" - babel-plugin-polyfill-corejs3 "^0.8.3" - babel-plugin-polyfill-regenerator "^0.5.2" + "@babel/types" "^7.23.0" + babel-plugin-polyfill-corejs2 "^0.4.6" + babel-plugin-polyfill-corejs3 "^0.8.5" + babel-plugin-polyfill-regenerator "^0.5.3" core-js-compat "^3.31.0" semver "^6.3.1" @@ -1238,10 +1238,10 @@ "@babel/plugin-transform-react-jsx-development" "^7.22.5" "@babel/plugin-transform-react-pure-annotations" "^7.22.5" -"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.23.0": - version "7.23.0" - resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.23.0.tgz#cc6602d13e7e5b2087c811912b87cf937a9129d9" - integrity sha512-6P6VVa/NM/VlAYj5s2Aq/gdVg8FSENCg3wlZ6Qau9AcPaoF5LbN1nyGlR9DTRIw9PpxI94e+ReydsJHcjwAweg== +"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.23.2": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.23.2.tgz#c8de488130b7081f7e1482936ad3de5b018beef4" + integrity sha512-u4UJc1XsS1GhIGteM8rnGiIvf9rJpiVgMEeCnwlLA7WJPC+jcXWJAGxYmeqs5hOZD8BbAfnV5ezBOxQbb4OUxA== dependencies: "@babel/helper-plugin-utils" "^7.22.5" "@babel/helper-validator-option" "^7.22.15" @@ -1265,18 +1265,18 @@ resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310" integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== -"@babel/runtime-corejs2@^7.23.1": - version "7.23.1" - resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.23.1.tgz#f3a25c24d455be4e0309a56e56f0d2ef1a91c567" - integrity sha512-eY39r8IIgbcDfILJqsflwMImjccvK3QdgBRKo5v6lDPd5SiAsyfl3SJuAYWJ5hgbz7kfQmZ9ueirnhq0e9176Q== +"@babel/runtime-corejs2@^7.23.2": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.23.2.tgz#a482c6e233fb2efa6456ce299da1b440b87260ed" + integrity sha512-lTwRWGcAUBANnxD0A4c5/wKQ0eLhgdAy9kdY2rzTmmliumBQ8u8awykMnaQAnZR3PC47jLRjGoj+hozZqy9Bww== dependencies: core-js "^2.6.12" regenerator-runtime "^0.14.0" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.23.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": - version "7.23.1" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d" - integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g== +"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.23.1", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885" + integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg== dependencies: regenerator-runtime "^0.14.0" @@ -1289,10 +1289,10 @@ "@babel/parser" "^7.22.15" "@babel/types" "^7.22.15" -"@babel/traverse@^7.1.6", "@babel/traverse@^7.23.0", "@babel/traverse@^7.4.5": - version "7.23.0" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.0.tgz#18196ddfbcf4ccea324b7f6d3ada00d8c5a99c53" - integrity sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw== +"@babel/traverse@^7.1.6", "@babel/traverse@^7.23.0", "@babel/traverse@^7.23.2", "@babel/traverse@^7.4.5": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8" + integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw== dependencies: "@babel/code-frame" "^7.22.13" "@babel/generator" "^7.23.0" @@ -1305,7 +1305,7 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.0.0", "@babel/types@^7.11.0", "@babel/types@^7.2.0", "@babel/types@^7.20.7", "@babel/types@^7.22.10", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.6.1": +"@babel/types@^7.0.0", "@babel/types@^7.11.0", "@babel/types@^7.2.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.6.1": version "7.23.0" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb" integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg== @@ -4049,29 +4049,29 @@ babel-plugin-optimize-clsx@^2.6.2: lodash "^4.17.15" object-hash "^2.0.3" -babel-plugin-polyfill-corejs2@^0.4.5: - version "0.4.5" - resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz#8097b4cb4af5b64a1d11332b6fb72ef5e64a054c" - integrity sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg== +babel-plugin-polyfill-corejs2@^0.4.6: + version "0.4.6" + resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.6.tgz#b2df0251d8e99f229a8e60fc4efa9a68b41c8313" + integrity sha512-jhHiWVZIlnPbEUKSSNb9YoWcQGdlTLq7z1GHL4AjFxaoOUMuuEVJ+Y4pAaQUGOGk93YsVCKPbqbfw3m0SM6H8Q== dependencies: "@babel/compat-data" "^7.22.6" - "@babel/helper-define-polyfill-provider" "^0.4.2" + "@babel/helper-define-polyfill-provider" "^0.4.3" semver "^6.3.1" -babel-plugin-polyfill-corejs3@^0.8.3: - version "0.8.3" - resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.3.tgz#b4f719d0ad9bb8e0c23e3e630c0c8ec6dd7a1c52" - integrity sha512-z41XaniZL26WLrvjy7soabMXrfPWARN25PZoriDEiLMxAp50AUW3t35BGQUMg5xK3UrpVTtagIDklxYa+MhiNA== +babel-plugin-polyfill-corejs3@^0.8.5: + version "0.8.5" + resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.5.tgz#a75fa1b0c3fc5bd6837f9ec465c0f48031b8cab1" + integrity sha512-Q6CdATeAvbScWPNLB8lzSO7fgUVBkQt6zLgNlfyeCr/EQaEQR+bWiBYYPYAFyE528BMjRhL+1QBMOI4jc/c5TA== dependencies: - "@babel/helper-define-polyfill-provider" "^0.4.2" - core-js-compat "^3.31.0" + "@babel/helper-define-polyfill-provider" "^0.4.3" + core-js-compat "^3.32.2" -babel-plugin-polyfill-regenerator@^0.5.2: - version "0.5.2" - resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.2.tgz#80d0f3e1098c080c8b5a65f41e9427af692dc326" - integrity sha512-tAlOptU0Xj34V1Y2PNTL4Y0FOJMDB6bZmoW39FeCQIhigGLkqu3Fj6uiXpxIf6Ij274ENdYx64y6Au+ZKlb1IA== +babel-plugin-polyfill-regenerator@^0.5.3: + version "0.5.3" + resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.3.tgz#d4c49e4b44614607c13fb769bcd85c72bb26a4a5" + integrity sha512-8sHeDOmXC8csczMrYEOf0UTNa4yE2SxV5JGeT/LP1n0OYVDUUFPxG9vdk2AlDlIit4t+Kf0xCtpgXPBwnn/9pw== dependencies: - "@babel/helper-define-polyfill-provider" "^0.4.2" + "@babel/helper-define-polyfill-provider" "^0.4.3" babel-plugin-preval@^5.1.0: version "5.1.0" @@ -4280,15 +4280,15 @@ browser-stdout@1.3.1: resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60" integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw== -browserslist@^4.14.5, browserslist@^4.21.10, browserslist@^4.21.9: - version "4.21.10" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0" - integrity sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ== +browserslist@^4.14.5, browserslist@^4.21.10, browserslist@^4.21.9, browserslist@^4.22.1: + version "4.22.1" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619" + integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ== dependencies: - caniuse-lite "^1.0.30001517" - electron-to-chromium "^1.4.477" + caniuse-lite "^1.0.30001541" + electron-to-chromium "^1.4.535" node-releases "^2.0.13" - update-browserslist-db "^1.0.11" + update-browserslist-db "^1.0.13" buffer-crc32@^0.2.1, buffer-crc32@^0.2.13: version "0.2.13" @@ -4538,10 +4538,10 @@ camelize@^1.0.0: resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= -caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001538: - version "1.0.30001538" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001538.tgz#9dbc6b9af1ff06b5eb12350c2012b3af56744f3f" - integrity sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw== +caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541: + version "1.0.30001551" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001551.tgz#1f2cfa8820bd97c971a57349d7fd8f6e08664a3e" + integrity sha512-vtBAez47BoGMMzlbYhfXrMV1kvRF2WP/lqiMuDu1Sb4EE4LKEgjopFDSRtZfdVnslNRpOqV/woE+Xgrwj6VQlg== chai-dom@^1.11.0: version "1.11.0" @@ -5161,12 +5161,12 @@ copy-descriptor@^0.1.0: resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d" integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw== -core-js-compat@^3.31.0: - version "3.31.1" - resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.31.1.tgz#5084ad1a46858df50ff89ace152441a63ba7aae0" - integrity sha512-wIDWd2s5/5aJSdpOJHfSibxNODxoGoWOBHt8JSPB41NOE94M7kuTPZCYLOlTtuoXTsBPKobpJ6T+y0SSy5L9SA== +core-js-compat@^3.31.0, core-js-compat@^3.32.2: + version "3.33.0" + resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.33.0.tgz#24aa230b228406450b2277b7c8bfebae932df966" + integrity sha512-0w4LcLXsVEuNkIqwjjf9rjCoPhK8uqA4tMRh4Ge26vfLtUutshn+aRJU21I9LCJlh2QQHfisNToLjw1XEJLTWw== dependencies: - browserslist "^4.21.9" + browserslist "^4.22.1" core-js@^2.6.12: version "2.6.12" @@ -5976,10 +5976,10 @@ ejs@^3.1.7: dependencies: jake "^10.8.5" -electron-to-chromium@^1.4.477: - version "1.4.496" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.496.tgz#a57534b70d2bdee7e1ad7dbd4c91e560cbd08db1" - integrity sha512-qeXC3Zbykq44RCrBa4kr8v/dWzYJA8rAwpyh9Qd+NKWoJfjG5vvJqy9XOJ9H4P/lqulZBCgUWAYi+FeK5AuJ8g== +electron-to-chromium@^1.4.535: + version "1.4.559" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.559.tgz#050483c22c5eb2345017a8976a67b060559a33f4" + integrity sha512-iS7KhLYCSJbdo3rUSkhDTVuFNCV34RKs2UaB9Ecr7VlqzjjWW//0nfsFF5dtDmyXlZQaDYYtID5fjtC/6lpRug== emoji-regex@^8.0.0: version "8.0.0" @@ -13925,10 +13925,10 @@ upath@2.0.1: resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b" integrity sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w== -update-browserslist-db@^1.0.11: - version "1.0.11" - resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940" - integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA== +update-browserslist-db@^1.0.13: + version "1.0.13" + resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4" + integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg== dependencies: escalade "^3.1.1" picocolors "^1.0.0" From cff9039832157ea035811067c96991eba8e85cd0 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 13:00:05 +0300 Subject: [PATCH 148/262] Bump eslint to ^8.51.0 (#10683) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- .../eslint-plugin-material-ui/package.json | 2 +- yarn.lock | 26 +++++++++---------- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 8dad09079fdec..51c73fe5f518d 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "cross-env": "^7.0.3", "danger": "^11.3.0", "enzyme": "^3.11.0", - "eslint": "^8.50.0", + "eslint": "^8.51.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.1.0", "eslint-config-prettier": "^9.0.0", diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json index 3a196fcb6254f..39b5b1ae8addf 100644 --- a/packages/eslint-plugin-material-ui/package.json +++ b/packages/eslint-plugin-material-ui/package.json @@ -5,7 +5,7 @@ "description": "Custom eslint rules for MUI X.", "main": "src/index.js", "devDependencies": { - "@types/eslint": "^8.44.3", + "@types/eslint": "^8.44.6", "@typescript-eslint/experimental-utils": "^5.62.0", "@typescript-eslint/parser": "^6.7.5" }, diff --git a/yarn.lock b/yarn.lock index 82585453ce361..54c9feacecf66 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1507,10 +1507,10 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" -"@eslint/js@8.50.0": - version "8.50.0" - resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.50.0.tgz#9e93b850f0f3fa35f5fa59adfd03adae8488e484" - integrity sha512-NCC3zz2+nvYd+Ckfh87rA47zfu2QsQpvc6k1yzTk+b9KzRj0wkGa8LSoGOXN6Zv4lRf/EIoZ80biDh9HOI+RNQ== +"@eslint/js@8.51.0": + version "8.51.0" + resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.51.0.tgz#6d419c240cfb2b66da37df230f7e7eef801c32fa" + integrity sha512-HxjQ8Qn+4SI3/AFv6sOrDB+g6PpUTDwSJiQqOrnneEk8L71161srI9gjzzZvYVbzHiVg/BvcH95+cK/zfIt4pg== "@fast-csv/format@4.3.5": version "4.3.5" @@ -2865,10 +2865,10 @@ "@types/eslint" "*" "@types/estree" "*" -"@types/eslint@*", "@types/eslint@^8.44.3": - version "8.44.3" - resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.44.3.tgz#96614fae4875ea6328f56de38666f582d911d962" - integrity sha512-iM/WfkwAhwmPff3wZuPLYiHX18HI24jU8k1ZSH7P8FHwxTjZ2P6CoX2wnF43oprR+YXJM6UUxATkNvyv/JHd+g== +"@types/eslint@*", "@types/eslint@^8.44.6": + version "8.44.6" + resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.44.6.tgz#60e564551966dd255f4c01c459f0b4fb87068603" + integrity sha512-P6bY56TVmX8y9J87jHNgQh43h6VVU+6H7oN7hgvivV81K2XY8qJZ5vqPy/HdUoVIelii2kChYVzQanlswPWVFw== dependencies: "@types/estree" "*" "@types/json-schema" "*" @@ -6521,15 +6521,15 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4 resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800" integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag== -eslint@^8.50.0: - version "8.50.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.50.0.tgz#2ae6015fee0240fcd3f83e1e25df0287f487d6b2" - integrity sha512-FOnOGSuFuFLv/Sa+FDVRZl4GGVAAFFi8LecRsI5a1tMO5HIE8nCm4ivAlzt4dT3ol/PaaGC0rJEEXQmHJBGoOg== +eslint@^8.51.0: + version "8.51.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.51.0.tgz#4a82dae60d209ac89a5cff1604fea978ba4950f3" + integrity sha512-2WuxRZBrlwnXi+/vFSJyjMqrNjtJqiasMzehF0shoLaW7DzS3/9Yvrmq5JiT66+pNjiX4UBnLDiKHcWAr/OInA== dependencies: "@eslint-community/eslint-utils" "^4.2.0" "@eslint-community/regexpp" "^4.6.1" "@eslint/eslintrc" "^2.1.2" - "@eslint/js" "8.50.0" + "@eslint/js" "8.51.0" "@humanwhocodes/config-array" "^0.11.11" "@humanwhocodes/module-importer" "^1.0.1" "@nodelib/fs.walk" "^1.2.8" From 91d4e1d27e6238fc70ffbad6dd78cd5f9694f10e Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 13:00:39 +0300 Subject: [PATCH 149/262] Bump eslint-plugin-prettier to ^5.0.1 (#10680) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 51c73fe5f518d..0bdf5769a647a 100644 --- a/package.json +++ b/package.json @@ -133,7 +133,7 @@ "eslint-plugin-jsdoc": "^46.8.2", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-mocha": "^10.2.0", - "eslint-plugin-prettier": "^5.0.0", + "eslint-plugin-prettier": "^5.0.1", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "format-util": "^1.0.5", diff --git a/yarn.lock b/yarn.lock index 54c9feacecf66..9dd9df478dd7c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6453,10 +6453,10 @@ eslint-plugin-mocha@^10.2.0: eslint-utils "^3.0.0" rambda "^7.4.0" -eslint-plugin-prettier@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz#6887780ed95f7708340ec79acfdf60c35b9be57a" - integrity sha512-AgaZCVuYDXHUGxj/ZGu1u8H8CYgDY3iG6w5kUFw4AzMVXzB7VvbKgYR4nATIN+OvUrghMbiDLeimVjVY5ilq3w== +eslint-plugin-prettier@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.1.tgz#a3b399f04378f79f066379f544e42d6b73f11515" + integrity sha512-m3u5RnR56asrwV/lDC4GHorlW75DsFfmUcjfCYylTUs85dBRnB7VM6xG8eCMJdeDRnppzmxZVf1GEPJvl1JmNg== dependencies: prettier-linter-helpers "^1.0.0" synckit "^0.8.5" From 17df4d0515139fa5365bb5af4c42e243266fa7db Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 13:01:09 +0300 Subject: [PATCH 150/262] Bump @types/chai to ^4.3.9 (#10678) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 0bdf5769a647a..efb5f56d2588c 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,7 @@ "@playwright/test": "1.38.1", "@testing-library/react": "^14.0.0", "@types/babel__core": "^7.20.2", - "@types/chai": "^4.3.6", + "@types/chai": "^4.3.9", "@types/chai-dom": "^1.11.1", "@types/enzyme": "^3.10.12", "@types/mocha": "^10.0.2", diff --git a/yarn.lock b/yarn.lock index 9dd9df478dd7c..e69b151e344f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2783,10 +2783,10 @@ dependencies: "@types/chai" "*" -"@types/chai@*", "@types/chai@^4.3.6": - version "4.3.6" - resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.6.tgz#7b489e8baf393d5dd1266fb203ddd4ea941259e6" - integrity sha512-VOVRLM1mBxIRxydiViqPcKn6MIxZytrbMpd6RJLIWKxUNr3zux8no0Oc7kJx0WAPIitgZ0gkrDS+btlqQpubpw== +"@types/chai@*", "@types/chai@^4.3.9": + version "4.3.9" + resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.9.tgz#144d762491967db8c6dea38e03d2206c2623feec" + integrity sha512-69TtiDzu0bcmKQv3yg1Zx409/Kd7r0b5F1PfpYJfSHzLGtB53547V4u+9iqKYsTu/O2ai6KTb0TInNpvuQ3qmg== "@types/chance@^1.1.4": version "1.1.4" From 7f67299308a9d993b84b30a6e76943c4613e7e65 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 13:01:41 +0300 Subject: [PATCH 151/262] Bump GitHub Actions (#10606) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .github/workflows/codeql.yml | 4 ++-- .github/workflows/no-response.yml | 2 +- .github/workflows/scorecards.yml | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 73611dfa819cf..81de58bb732c9 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -19,7 +19,7 @@ jobs: uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@ddccb873888234080b77e9bc2d4764d5ccaaccf9 # v2.21.9 + uses: github/codeql-action/init@0116bc2df50751f9724a2e35ef1f24d22f90e4e1 # v2.22.3 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@ddccb873888234080b77e9bc2d4764d5ccaaccf9 # v2.21.9 + uses: github/codeql-action/analyze@0116bc2df50751f9724a2e35ef1f24d22f90e4e1 # v2.22.3 diff --git a/.github/workflows/no-response.yml b/.github/workflows/no-response.yml index 3f9593da165ae..3664edfcc0f87 100644 --- a/.github/workflows/no-response.yml +++ b/.github/workflows/no-response.yml @@ -18,7 +18,7 @@ jobs: contents: read issues: write steps: - - uses: MBilalShafi/no-response-add-label@9657b5bc1e09373e571df54429c3c167edaad556 + - uses: MBilalShafi/no-response-add-label@6291e5d1a4eaffe530b2ec434991f258641a8599 with: token: ${{ secrets.GITHUB_TOKEN }} # Number of days of inactivity before an Issue is closed for lack of response diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index 9f113eb44f0e9..386cb3ba7e201 100644 --- a/.github/workflows/scorecards.yml +++ b/.github/workflows/scorecards.yml @@ -28,7 +28,7 @@ jobs: persist-credentials: false - name: Run analysis - uses: ossf/scorecard-action@08b4669551908b1024bb425080c797723083c031 # v2.2.0 + uses: ossf/scorecard-action@483ef80eb98fb506c348f7d62e28055e49fe2398 # v2.3.0 with: results_file: results.sarif results_format: sarif @@ -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@ddccb873888234080b77e9bc2d4764d5ccaaccf9 # v2.21.9 + uses: github/codeql-action/upload-sarif@0116bc2df50751f9724a2e35ef1f24d22f90e4e1 # v2.22.3 with: sarif_file: results.sarif From 36fa2f4baa277adb2c52df48c908927cf02b25c0 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 13:02:05 +0300 Subject: [PATCH 152/262] Bump @types/yargs to ^17.0.29 (#10603) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index efb5f56d2588c..4a2c10704aaf6 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "@types/react-test-renderer": "^18.0.3", "@types/requestidlecallback": "^0.3.5", "@types/sinon": "^10.0.19", - "@types/yargs": "^17.0.26", + "@types/yargs": "^17.0.29", "@typescript-eslint/eslint-plugin": "^6.7.5", "@typescript-eslint/parser": "^6.7.5", "axe-core": "4.8.2", diff --git a/yarn.lock b/yarn.lock index e69b151e344f3..6657944781d60 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3085,10 +3085,10 @@ resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz#3b9ce2489919d9e4fea439b76916abc34b2df129" integrity sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw== -"@types/yargs@^17.0.26": - version "17.0.26" - resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.26.tgz#388e5002a8b284ad7b4599ba89920a6d74d8d79a" - integrity sha512-Y3vDy2X6zw/ZCumcwLpdhM5L7jmyGpmBCTYMHDLqT2IKVMYRRLdv6ZakA+wxhra6Z/3bwhNbNl9bDGXaFU+6rw== +"@types/yargs@^17.0.29": + version "17.0.29" + resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.29.tgz#06aabc72497b798c643c812a8b561537fea760cf" + integrity sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA== dependencies: "@types/yargs-parser" "*" From 01ce57f897318a2b2d2beca09cbb0e0ffd26ee18 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 13:03:09 +0300 Subject: [PATCH 153/262] Bump @types/react-dom to ^18.2.14 (#10601) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/package.json b/docs/package.json index 44eaf661e4352..70695adc8482b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -38,7 +38,7 @@ "@trendmicro/react-interpolate": "^0.5.5", "@types/lodash": "^4.14.199", "@types/moment-hijri": "^2.1.1", - "@types/react-dom": "^18.2.9", + "@types/react-dom": "^18.2.14", "@types/react-router-dom": "^5.3.3", "ast-types": "^0.14.2", "autoprefixer": "^10.4.16", diff --git a/package.json b/package.json index 4a2c10704aaf6..175f645b82aac 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "@types/node": "^18.18.3", "@types/prettier": "^2.7.3", "@types/react": "^18.2.24", - "@types/react-dom": "^18.2.9", + "@types/react-dom": "^18.2.14", "@types/react-test-renderer": "^18.0.3", "@types/requestidlecallback": "^0.3.5", "@types/sinon": "^10.0.19", diff --git a/yarn.lock b/yarn.lock index 6657944781d60..faffd6e94a28f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2999,10 +2999,10 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.8.tgz#805eae6e8f41bd19e88917d2ea200dc992f405d3" integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ== -"@types/react-dom@^18.0.0", "@types/react-dom@^18.2.9": - version "18.2.9" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.9.tgz#c4ce3c7c91a134e1bff58692aa2d2f2f4029c38b" - integrity sha512-6nNhVzZ9joQ6F7lozrASuQKC0Kf6ArYMU+DqA2ZrUbB+d+9lC6ZLn1GxiEBI1edmAwvTULtuJ6uPZpv3XudwUg== +"@types/react-dom@^18.0.0", "@types/react-dom@^18.2.14": + version "18.2.14" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.14.tgz#c01ba40e5bb57fc1dc41569bb3ccdb19eab1c539" + integrity sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ== dependencies: "@types/react" "*" From bc939da90099678adec4b82cdac895f0dd7e99fb Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 13:03:53 +0300 Subject: [PATCH 154/262] Bump @types/node to ^18.18.6 (#10599) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 4 ++-- yarn.lock | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 175f645b82aac..eab9e9e1a465a 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,7 @@ "@types/chai-dom": "^1.11.1", "@types/enzyme": "^3.10.12", "@types/mocha": "^10.0.2", - "@types/node": "^18.18.3", + "@types/node": "^18.18.6", "@types/prettier": "^2.7.3", "@types/react": "^18.2.24", "@types/react-dom": "^18.2.14", @@ -188,6 +188,6 @@ "dependencies": {}, "resolutions": { "**/react-is": "^18.2.0", - "**/@types/node": "^18.18.3" + "**/@types/node": "^18.18.6" } } diff --git a/yarn.lock b/yarn.lock index faffd6e94a28f..92cae14e0f5a8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2974,10 +2974,10 @@ dependencies: moment ">=2.14.0" -"@types/node@*", "@types/node@>= 8", "@types/node@>=10.0.0", "@types/node@^14.0.1", "@types/node@^18.18.3": - version "18.18.3" - resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.3.tgz#e5188135fc2909b46530c798ef49be65083be3fd" - integrity sha512-0OVfGupTl3NBFr8+iXpfZ8NR7jfFO+P1Q+IO/q0wbo02wYkP5gy36phojeYWpLQ6WAMjl+VfmqUk2YbUfp0irA== +"@types/node@*", "@types/node@>= 8", "@types/node@>=10.0.0", "@types/node@^14.0.1", "@types/node@^18.18.6": + version "18.18.6" + resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.6.tgz#26da694f75cdb057750f49d099da5e3f3824cb3e" + integrity sha512-wf3Vz+jCmOQ2HV1YUJuCWdL64adYxumkrxtc+H1VUQlnQI04+5HtH+qZCOE21lBE7gIrt+CwX2Wv8Acrw5Ak6w== "@types/normalize-package-data@^2.4.0", "@types/normalize-package-data@^2.4.1": version "2.4.1" From 5ece782cb3e327fa2da0fcd977204ec1aa6d4b14 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 13:04:25 +0300 Subject: [PATCH 155/262] Bump actions/checkout action to v4.1.1 (#10297) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .github/workflows/codeql.yml | 2 +- .github/workflows/l10n.yml | 2 +- .github/workflows/scorecards.yml | 2 +- .github/workflows/vale-action.yml | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 81de58bb732c9..529079e894c61 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -16,7 +16,7 @@ jobs: security-events: write steps: - name: Checkout repository - uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0 + uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL uses: github/codeql-action/init@0116bc2df50751f9724a2e35ef1f24d22f90e4e1 # v2.22.3 diff --git a/.github/workflows/l10n.yml b/.github/workflows/l10n.yml index f63adf221853e..e074497334012 100644 --- a/.github/workflows/l10n.yml +++ b/.github/workflows/l10n.yml @@ -17,7 +17,7 @@ jobs: issues: write steps: - run: echo "${{ github.actor }}" - - uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0 + - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Use Node.js 18.x uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1 with: diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index 386cb3ba7e201..5872829690efd 100644 --- a/.github/workflows/scorecards.yml +++ b/.github/workflows/scorecards.yml @@ -23,7 +23,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0 + uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 with: persist-credentials: false diff --git a/.github/workflows/vale-action.yml b/.github/workflows/vale-action.yml index d145911760a69..61078d7162eef 100644 --- a/.github/workflows/vale-action.yml +++ b/.github/workflows/vale-action.yml @@ -12,7 +12,7 @@ jobs: contents: read pull-requests: write steps: - - uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0 + - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - uses: errata-ai/vale-action@c4213d4de3d5f718b8497bd86161531c78992084 # v2.0.1 with: reporter: github-pr-review From 4c2a1b34b41a4c0aacbca8046d776ddc3f198780 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 13:12:13 +0300 Subject: [PATCH 156/262] Bump lerna to ^7.4.1 (#10681) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 30 +++++++++++++++--------------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index eab9e9e1a465a..f450ff1c76686 100644 --- a/package.json +++ b/package.json @@ -149,7 +149,7 @@ "karma-mocha": "^2.0.1", "karma-sourcemap-loader": "^0.4.0", "karma-webpack": "^5.0.0", - "lerna": "^7.3.0", + "lerna": "^7.4.1", "markdownlint-cli2": "^0.10.0", "mocha": "^10.2.0", "nyc": "^15.1.0", diff --git a/yarn.lock b/yarn.lock index 92cae14e0f5a8..27a767bcddc6f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1696,21 +1696,21 @@ "@jridgewell/resolve-uri" "3.1.0" "@jridgewell/sourcemap-codec" "1.4.14" -"@lerna/child-process@7.3.0": - version "7.3.0" - resolved "https://registry.yarnpkg.com/@lerna/child-process/-/child-process-7.3.0.tgz#c56488a8a881f22a64793bf9339c5a2450a18559" - integrity sha512-rA+fGUo2j/LEq6w1w8s6oVikLbJTWoIDVpYMc7bUCtwDOUuZKMQiRtjmpavY3fTm7ltu42f4AKflc2A70K4wvA== +"@lerna/child-process@7.4.1": + version "7.4.1" + resolved "https://registry.yarnpkg.com/@lerna/child-process/-/child-process-7.4.1.tgz#efacbbe79794ef977feb86873d853bb8708707be" + integrity sha512-Bx1cRCZcVcWoz+atDQc4CSVzGuEgGJPOpIAXjQbBEA2cX5nqIBWdbye8eHu31En/F03aH9BhpNEJghs6wy4iTg== dependencies: chalk "^4.1.0" execa "^5.0.0" strong-log-transformer "^2.1.0" -"@lerna/create@7.3.0": - version "7.3.0" - resolved "https://registry.yarnpkg.com/@lerna/create/-/create-7.3.0.tgz#5438c231f617b8e825731390d394f8684af471d5" - integrity sha512-fjgiKjg9VXwQ4ZKKsrXICEKRiC3yo6+FprR0mc55uz0s5e9xupoSGLobUTTBdE7ncNB3ibqml8dfaAn/+ESajQ== +"@lerna/create@7.4.1": + version "7.4.1" + resolved "https://registry.yarnpkg.com/@lerna/create/-/create-7.4.1.tgz#3e4bb7235bf5700e7e63c470eba5619171331c1a" + integrity sha512-zPO9GyWceRimtMD+j+aQ8xJgNPYn/Q/SzHf4wYN+4Rj5nrFKMyX+Et7FbWgUNpj0dRgyCCKBDYmTB7xQVVq4gQ== dependencies: - "@lerna/child-process" "7.3.0" + "@lerna/child-process" "7.4.1" "@npmcli/run-script" "6.0.2" "@nx/devkit" ">=16.5.1 < 17" "@octokit/plugin-enterprise-rest" "6.0.1" @@ -9143,13 +9143,13 @@ lazystream@^1.0.0: dependencies: readable-stream "^2.0.5" -lerna@^7.3.0: - version "7.3.0" - resolved "https://registry.yarnpkg.com/lerna/-/lerna-7.3.0.tgz#efecafbdce15694e2f6841256e073a3a2061053e" - integrity sha512-Dt8TH+J+c9+3MhTYcm5OxnNzXb87WG7GPNj3kidjYJjJY7KxIMDNU37qBTYRWA1h3wAeNKBplXVQYUPkGcYgkQ== +lerna@^7.4.1: + version "7.4.1" + resolved "https://registry.yarnpkg.com/lerna/-/lerna-7.4.1.tgz#d124fa5f0a1fe10ae9a6081bc363d98f3f6caca9" + integrity sha512-c6sOO0dlJU689vStIsko+zjRdn2fJOWH8aNjePLNv2AubAdABKqfrDCpE2H/Q7+O80Duo68ZQtWYkUUk7hRWDw== dependencies: - "@lerna/child-process" "7.3.0" - "@lerna/create" "7.3.0" + "@lerna/child-process" "7.4.1" + "@lerna/create" "7.4.1" "@npmcli/run-script" "6.0.2" "@nx/devkit" ">=16.5.1 < 17" "@octokit/plugin-enterprise-rest" "6.0.1" From 9af55b33a590cc4f3c1abbbcb96b2a7f346299e3 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 13:14:17 +0300 Subject: [PATCH 157/262] Bump Playwright (#10682) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .circleci/config.yml | 10 +++++----- package.json | 2 +- yarn.lock | 28 ++++++++++++++-------------- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 38d30edfba40e..4b43745318f49 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -195,7 +195,7 @@ jobs: test_browser: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.38.1-focal + - image: mcr.microsoft.com/playwright:v1.39.0-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -228,7 +228,7 @@ jobs: test_e2e: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.38.1-focal + - image: mcr.microsoft.com/playwright:v1.39.0-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -241,7 +241,7 @@ jobs: test_e2e_website: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.38.1-focal + - image: mcr.microsoft.com/playwright:v1.39.0-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -256,7 +256,7 @@ jobs: test_regressions: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.38.1-focal + - image: mcr.microsoft.com/playwright:v1.39.0-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -272,7 +272,7 @@ jobs: run_danger: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.38.1-focal + - image: mcr.microsoft.com/playwright:v1.39.0-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: diff --git a/package.json b/package.json index f450ff1c76686..f4a5f35154fc3 100644 --- a/package.json +++ b/package.json @@ -90,7 +90,7 @@ "@next/eslint-plugin-next": "^13.5.4", "@octokit/plugin-retry": "^6.0.1", "@octokit/rest": "^20.0.2", - "@playwright/test": "1.38.1", + "@playwright/test": "1.39.0", "@testing-library/react": "^14.0.0", "@types/babel__core": "^7.20.2", "@types/chai": "^4.3.9", diff --git a/yarn.lock b/yarn.lock index 27a767bcddc6f..915654031041f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2535,12 +2535,12 @@ picocolors "^1.0.0" tslib "^2.6.0" -"@playwright/test@1.38.1": - version "1.38.1" - resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.38.1.tgz#8ef4263e355cd1d8ad7905d471d268e8acb82ed6" - integrity sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ== +"@playwright/test@1.39.0": + version "1.39.0" + resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.39.0.tgz#d10ba8e38e44104499e25001945f07faa9fa91cd" + integrity sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ== dependencies: - playwright "1.38.1" + playwright "1.39.0" "@polka/url@^1.0.0-next.20": version "1.0.0-next.21" @@ -11455,17 +11455,17 @@ pkg-up@^3.1.0: dependencies: find-up "^3.0.0" -playwright-core@1.38.1: - version "1.38.1" - resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.38.1.tgz#75a3c470aa9576b7d7c4e274de3d79977448ba08" - integrity sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg== +playwright-core@1.39.0: + version "1.39.0" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.39.0.tgz#efeaea754af4fb170d11845b8da30b2323287c63" + integrity sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw== -playwright@1.38.1: - version "1.38.1" - resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.38.1.tgz#82ecd9bc4f4f64dbeee8a11c31793748e2528130" - integrity sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow== +playwright@1.39.0: + version "1.39.0" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.39.0.tgz#184c81cd6478f8da28bcd9e60e94fcebf566e077" + integrity sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw== dependencies: - playwright-core "1.38.1" + playwright-core "1.39.0" optionalDependencies: fsevents "2.3.2" From b871bb2b1b9e84fae21e5468a22b083e4874ba52 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 12:21:18 +0200 Subject: [PATCH 158/262] Bump @types/react to ^18.2.29 (#10600) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index f4a5f35154fc3..613d19968e2a6 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "@types/mocha": "^10.0.2", "@types/node": "^18.18.6", "@types/prettier": "^2.7.3", - "@types/react": "^18.2.24", + "@types/react": "^18.2.29", "@types/react-dom": "^18.2.14", "@types/react-test-renderer": "^18.0.3", "@types/requestidlecallback": "^0.3.5", diff --git a/yarn.lock b/yarn.lock index 915654031041f..329195f4fc683 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3037,10 +3037,10 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^18.2.24": - version "18.2.24" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.24.tgz#3c7d68c02e0205a472f04abe4a0c1df35d995c05" - integrity sha512-Ee0Jt4sbJxMu1iDcetZEIKQr99J1Zfb6D4F3qfUWoR1JpInkY1Wdg4WwCyBjL257D0+jGqSl1twBjV8iCaC0Aw== +"@types/react@*", "@types/react@^18.2.29": + version "18.2.29" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.29.tgz#88b48a287e00f6fdcd6f95662878fb701ae18b27" + integrity sha512-Z+ZrIRocWtdD70j45izShRwDuiB4JZqDegqMFW/I8aG5DxxLKOzVNoq62UIO82v9bdgi+DO1jvsb9sTEZUSm+Q== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" From 522721c224fdf95879dc3d98416a5863e3f133a1 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 19 Oct 2023 13:28:04 +0300 Subject: [PATCH 159/262] Bump webpack to ^5.89.0 (#10684) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 613d19968e2a6..54521ae368c19 100644 --- a/package.json +++ b/package.json @@ -166,7 +166,7 @@ "string-replace-loader": "^3.1.0", "typescript": "^5.2.2", "util": "^0.12.5", - "webpack": "^5.88.2", + "webpack": "^5.89.0", "webpack-cli": "^5.1.4", "yargs": "^17.7.2", "yarn-deduplicate": "^6.0.2" diff --git a/yarn.lock b/yarn.lock index 329195f4fc683..b9fed24e01693 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14159,10 +14159,10 @@ webpack-sources@^3.2.3: resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde" integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w== -webpack@^5.88.2: - version "5.88.2" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.88.2.tgz#f62b4b842f1c6ff580f3fcb2ed4f0b579f4c210e" - integrity sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ== +webpack@^5.89.0: + version "5.89.0" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.89.0.tgz#56b8bf9a34356e93a6625770006490bf3a7f32dc" + integrity sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw== dependencies: "@types/eslint-scope" "^3.7.3" "@types/estree" "^1.0.0" From 7d2ecd9265a5a5716640fd36af92ccf054b7fa13 Mon Sep 17 00:00:00 2001 From: Lukas Date: Thu, 19 Oct 2023 13:42:32 +0300 Subject: [PATCH 160/262] [core] Update React renovate group with `@types` (#10723) --- renovate.json | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/renovate.json b/renovate.json index 8416684a28cf3..101e09ac40380 100644 --- a/renovate.json +++ b/renovate.json @@ -42,7 +42,14 @@ }, { "groupName": "React", - "matchPackageNames": ["react", "react-dom", "react-is", "react-test-renderer"] + "matchPackageNames": [ + "react", + "react-dom", + "react-is", + "react-test-renderer", + "@types/react", + "@types/react-dom" + ] }, { "groupName": "React router", From 391351c5041e6c8450df9111c87534957401266e Mon Sep 17 00:00:00 2001 From: Pascal Corpet Date: Thu, 19 Oct 2023 13:45:53 +0200 Subject: [PATCH 161/262] [DataGrid] Allow passing readonly arrays to `columns` and `sortingOrder` props (#10686) --- .../src/components/columnHeaders/GridColumnHeaderItem.tsx | 2 +- .../components/columnHeaders/GridColumnHeaderSortIcon.tsx | 4 ++-- .../menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx | 2 +- .../src/hooks/features/columns/gridColumnsUtils.ts | 2 +- .../src/hooks/features/sorting/gridSortingUtils.ts | 2 +- .../grid/x-data-grid/src/models/props/DataGridProps.ts | 4 ++-- packages/grid/x-data-grid/src/tests/columns.spec.tsx | 7 +++++++ 7 files changed, 15 insertions(+), 8 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx index 78592957c681d..9dcd1dde3a739 100644 --- a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx +++ b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx @@ -192,7 +192,7 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) { /> ); - const sortingOrder: GridSortDirection[] = colDef.sortingOrder ?? rootProps.sortingOrder; + const sortingOrder: readonly GridSortDirection[] = colDef.sortingOrder ?? rootProps.sortingOrder; const columnTitleIconButtons = ( diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx index b6f489f73a181..14a06e1e0ade9 100644 --- a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx +++ b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx @@ -13,7 +13,7 @@ import { GridIconButtonContainer } from './GridIconButtonContainer'; export interface GridColumnHeaderSortIconProps { direction: GridSortDirection; index: number | undefined; - sortingOrder: GridSortDirection[]; + sortingOrder: readonly GridSortDirection[]; } type OwnerState = GridColumnHeaderSortIconProps & { @@ -34,7 +34,7 @@ function getIcon( icons: UncapitalizedGridSlotsComponent, direction: GridSortDirection, className: string, - sortingOrder: GridSortDirection[], + sortingOrder: readonly GridSortDirection[], ) { let Icon; const iconProps: any = {}; diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx index 4dc3282a5bcc2..bacf06d15fb61 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx @@ -24,7 +24,7 @@ function GridColumnMenuSortItem(props: GridColumnMenuItemProps) { return sortItem?.sort; }, [colDef, sortModel]); - const sortingOrder: GridSortDirection[] = colDef.sortingOrder ?? rootProps.sortingOrder; + const sortingOrder: readonly GridSortDirection[] = colDef.sortingOrder ?? rootProps.sortingOrder; const onSortMenuItemClick = React.useCallback( (event: React.MouseEvent) => { diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts index 5043488df7428..44e857f375c6b 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts +++ b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts @@ -292,7 +292,7 @@ export const createColumnsState = ({ columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef), keepOnlyColumnsToUpsert = false, }: { - columnsToUpsert: GridColDef[]; + columnsToUpsert: readonly GridColDef[]; initialState: GridColumnsInitialState | undefined; columnTypes: GridColumnTypesRecord; columnVisibilityModel?: GridColumnVisibilityModel; diff --git a/packages/grid/x-data-grid/src/hooks/features/sorting/gridSortingUtils.ts b/packages/grid/x-data-grid/src/hooks/features/sorting/gridSortingUtils.ts index e3ab32cbf8d4f..43d5f1a82f464 100644 --- a/packages/grid/x-data-grid/src/hooks/features/sorting/gridSortingUtils.ts +++ b/packages/grid/x-data-grid/src/hooks/features/sorting/gridSortingUtils.ts @@ -146,7 +146,7 @@ export const buildAggregatedSortingApplier = ( }; export const getNextGridSortDirection = ( - sortingOrder: GridSortDirection[], + sortingOrder: readonly GridSortDirection[], current?: GridSortDirection, ) => { const currentIdx = sortingOrder.indexOf(current); diff --git a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts index 46b868c7c67bf..41047bde30aed 100644 --- a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts @@ -325,7 +325,7 @@ export interface DataGridPropsWithDefaultValues { * The order of the sorting sequence. * @default ['asc', 'desc', null] */ - sortingOrder: GridSortDirection[]; + sortingOrder: readonly GridSortDirection[]; /** * Sorting can be processed on the server or client-side. * Set it to 'client' if you would like to handle sorting on the client-side. @@ -705,7 +705,7 @@ export interface DataGridPropsWithoutDefaultValue[]; + columns: readonly GridColDef[]; /** * Return the id of a given [[GridRowModel]]. */ diff --git a/packages/grid/x-data-grid/src/tests/columns.spec.tsx b/packages/grid/x-data-grid/src/tests/columns.spec.tsx index bf780e6bb80fc..ac5a5ddc14235 100644 --- a/packages/grid/x-data-grid/src/tests/columns.spec.tsx +++ b/packages/grid/x-data-grid/src/tests/columns.spec.tsx @@ -149,3 +149,10 @@ function CellParamsFormattedValue() { /> ); } + +const constBrandColumns = [{ field: 'brand' }] as const; +const constEmptyRows = [] as const; + +function ConstProps() { + return ; +} From 11f286735994579c66c932ede1be69202ec4b829 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Thu, 19 Oct 2023 21:28:49 +0200 Subject: [PATCH 162/262] [docs] Add a recipe for saving and restoring `state` externally (#10722) Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Co-authored-by: Andrew Cherniavskii --- .../state/SaveAndRestoreStateInitialState.js | 47 ++++++++++++++++++ .../state/SaveAndRestoreStateInitialState.tsx | 48 +++++++++++++++++++ ...aveAndRestoreStateInitialState.tsx.preview | 10 ++++ docs/data/data-grid/state/state.md | 7 +++ docs/scripts/pages/playground/index.tsx | 7 +++ 5 files changed, 119 insertions(+) create mode 100644 docs/data/data-grid/state/SaveAndRestoreStateInitialState.js create mode 100644 docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx create mode 100644 docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx.preview create mode 100644 docs/scripts/pages/playground/index.tsx diff --git a/docs/data/data-grid/state/SaveAndRestoreStateInitialState.js b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.js new file mode 100644 index 0000000000000..d0d385fe1e7b6 --- /dev/null +++ b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.js @@ -0,0 +1,47 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import CircularProgress from '@mui/material/CircularProgress'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import { DataGridPremium, useGridApiRef } from '@mui/x-data-grid-premium'; + +export default function SaveAndRestoreStateInitialState() { + const apiRef = useGridApiRef(); + const { data, loading } = useDemoData({ + dataSet: 'Commodity', + rowLength: 100, + maxColumns: 10, + }); + + const [initialState, setInitialState] = React.useState(); + + React.useEffect(() => { + const stateFromLocalStorage = localStorage?.getItem('dataGridState'); + setInitialState(stateFromLocalStorage ? JSON.parse(stateFromLocalStorage) : {}); + }, []); + + const saveSnapshot = React.useCallback(() => { + if (apiRef?.current && localStorage) { + const currentState = apiRef.current.exportState(); + localStorage.setItem('dataGridState', JSON.stringify(currentState)); + } + }, [apiRef]); + + if (!initialState) { + return ; + } + + return ( + + + + ); +} diff --git a/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx new file mode 100644 index 0000000000000..7f94bcbed7f69 --- /dev/null +++ b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import CircularProgress from '@mui/material/CircularProgress'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import { DataGridPremium, useGridApiRef } from '@mui/x-data-grid-premium'; +import { GridInitialStatePremium } from '@mui/x-data-grid-premium/models/gridStatePremium'; + +export default function SaveAndRestoreStateInitialState() { + const apiRef = useGridApiRef(); + const { data, loading } = useDemoData({ + dataSet: 'Commodity', + rowLength: 100, + maxColumns: 10, + }); + + const [initialState, setInitialState] = React.useState(); + + React.useEffect(() => { + const stateFromLocalStorage = localStorage?.getItem('dataGridState'); + setInitialState(stateFromLocalStorage ? JSON.parse(stateFromLocalStorage) : {}); + }, []); + + const saveSnapshot = React.useCallback(() => { + if (apiRef?.current && localStorage) { + const currentState = apiRef.current.exportState(); + localStorage.setItem('dataGridState', JSON.stringify(currentState)); + } + }, [apiRef]); + + if (!initialState) { + return ; + } + + return ( + + + + ); +} diff --git a/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx.preview b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx.preview new file mode 100644 index 0000000000000..aaea3703c6eab --- /dev/null +++ b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx.preview @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/state/state.md b/docs/data/data-grid/state/state.md index fc6d84fb87cd1..b71d383446fb5 100644 --- a/docs/data/data-grid/state/state.md +++ b/docs/data/data-grid/state/state.md @@ -93,6 +93,13 @@ If you restore the page using `initialState` before the data is fetched, the Dat {{"demo": "RestoreStateInitialState.js", "bg": "inline", "defaultCodeOpen": false}} +### Save and restore the state from external storage + +You can use `apiRef.current.exportState()` to save a snapshot of the state to an external storage (e.g. using `localStorage` or `redux`). +This way the state can be persisted when refreshing the page or navigating to another page. + +{{"demo": "SaveAndRestoreStateInitialState.js", "bg": "inline", "defaultCodeOpen": false}} + ### Restore the state with apiRef You can pass the state returned by `apiRef.current.exportState()` to the `apiRef.current.restoreState` method. diff --git a/docs/scripts/pages/playground/index.tsx b/docs/scripts/pages/playground/index.tsx new file mode 100644 index 0000000000000..8892bf1b46a8d --- /dev/null +++ b/docs/scripts/pages/playground/index.tsx @@ -0,0 +1,7 @@ +import * as React from 'react'; + +export default function Playground() { + return ( +
          A playground for a fast iteration development cycle in isolation outside of git.
          + ); +} From 858e3a61584c79035baf02433d78f9a69f219aa0 Mon Sep 17 00:00:00 2001 From: Lukas Date: Fri, 20 Oct 2023 13:32:42 +0300 Subject: [PATCH 163/262] [core] Update `styled-components` (#10733) --- docs/package.json | 4 +-- yarn.lock | 79 +++++++++++++++++------------------------------ 2 files changed, 30 insertions(+), 53 deletions(-) diff --git a/docs/package.json b/docs/package.json index 70695adc8482b..0d5d90325d1d3 100644 --- a/docs/package.json +++ b/docs/package.json @@ -85,10 +85,8 @@ "react-simple-code-editor": "^0.13.1", "recast": "^0.23.4", "rimraf": "^5.0.1", - "styled-components": "^5.3.11", - "stylis": "^4.3.0", + "styled-components": "^6.1.0", "stylis-plugin-rtl": "^2.1.1", - "stylis-plugin-rtl-sc": "npm:stylis-plugin-rtl@^2.1.1", "webpack-bundle-analyzer": "^4.9.1" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index b9fed24e01693..a6ab9fad61b89 100644 --- a/yarn.lock +++ b/yarn.lock @@ -219,7 +219,7 @@ "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" -"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.22.5": +"@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882" integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg== @@ -306,7 +306,7 @@ dependencies: "@babel/types" "^7.22.15" -"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5": +"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0" integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w== @@ -1377,7 +1377,7 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== -"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.1": +"@emotion/is-prop-valid@^1.2.1": version "1.2.1" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc" integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw== @@ -1441,17 +1441,7 @@ "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1" "@emotion/utils" "^1.2.1" -"@emotion/stylis@^0.8.4": - version "0.8.5" - resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" - integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== - -"@emotion/unitless@^0.7.4": - version "0.7.5" - resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" - integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== - -"@emotion/unitless@^0.8.1": +"@emotion/unitless@^0.8.0", "@emotion/unitless@^0.8.1": version "0.8.1" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== @@ -3080,6 +3070,11 @@ resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz#b49c2c70150141a15e0fa7e79cf1f92a72934ce3" integrity sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g== +"@types/stylis@^4.0.2": + version "4.2.2" + resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.2.tgz#baabb6b3aa6787e90a6bd6cd75cd8fb9a4f256a3" + integrity sha512-Rm17MsTpQQP5Jq4BF7CdrxJsDufoiL/q5IbJZYZmOZAJALyijgF7BzLgobXUqraNcQdqFYLYGeglDp6QzaxPpg== + "@types/yargs-parser@*": version "20.2.1" resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz#3b9ce2489919d9e4fea439b76916abc34b2df129" @@ -4093,21 +4088,6 @@ babel-plugin-search-and-replace@^1.1.1: resolved "https://registry.yarnpkg.com/babel-plugin-search-and-replace/-/babel-plugin-search-and-replace-1.1.1.tgz#2e5b4488e41d9eba1c220651b1a9b350fdf10915" integrity sha512-fjP2VTF3mxxOUnc96mdK22llH92A6gu7A5AFapJmgnqsQi3bqLduIRP0FpA2r5vRZOYPpnX4rE5izQlpsMBjSA== -"babel-plugin-styled-components@>= 1.12.0": - version "1.13.2" - resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz#ebe0e6deff51d7f93fceda1819e9b96aeb88278d" - integrity sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA== - dependencies: - "@babel/helper-annotate-as-pure" "^7.0.0" - "@babel/helper-module-imports" "^7.0.0" - babel-plugin-syntax-jsx "^6.18.0" - lodash "^4.17.11" - -babel-plugin-syntax-jsx@^6.18.0: - version "6.18.0" - resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" - integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY= - babel-plugin-transform-react-remove-prop-types@^0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a" @@ -5320,10 +5300,10 @@ css-select@~1.2.0: domutils "1.5.1" nth-check "~1.0.1" -css-to-react-native@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" - integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== +css-to-react-native@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32" + integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ== dependencies: camelize "^1.0.0" css-color-keywords "^1.0.0" @@ -7755,7 +7735,7 @@ he@1.2.0, he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -9538,7 +9518,7 @@ lodash.upperfirst@4.3.1: resolved "https://registry.yarnpkg.com/lodash.upperfirst/-/lodash.upperfirst-4.3.1.tgz#1365edf431480481ef0d1c68957a5ed99d49f7ce" integrity sha1-E2Xt9DFIBIHvDRxolXpe2Z1J984= -lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21: +lodash@^4.15.0, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -13221,21 +13201,20 @@ strong-log-transformer@2.1.0, strong-log-transformer@^2.1.0: minimist "^1.2.0" through "^2.3.4" -styled-components@^5.3.11: - version "5.3.11" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8" - integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw== +styled-components@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.0.tgz#228e3ab9c1ee1daa4b0a06aae30df0ed14fda274" + integrity sha512-VWNfYYBuXzuLS/QYEeoPgMErP26WL+dX9//rEh80B2mmlS1yRxRxuL5eax4m6ybYEUoHWlTy2XOU32767mlMkg== dependencies: - "@babel/helper-module-imports" "^7.0.0" - "@babel/traverse" "^7.4.5" - "@emotion/is-prop-valid" "^1.1.0" - "@emotion/stylis" "^0.8.4" - "@emotion/unitless" "^0.7.4" - babel-plugin-styled-components ">= 1.12.0" - css-to-react-native "^3.0.0" - hoist-non-react-statics "^3.0.0" + "@emotion/is-prop-valid" "^1.2.1" + "@emotion/unitless" "^0.8.0" + "@types/stylis" "^4.0.2" + css-to-react-native "^3.2.0" + csstype "^3.1.2" + postcss "^8.4.31" shallowequal "^1.1.0" - supports-color "^5.5.0" + stylis "^4.3.0" + tslib "^2.5.0" styled-jsx@5.1.1: version "5.1.1" @@ -13244,7 +13223,7 @@ styled-jsx@5.1.1: dependencies: client-only "0.0.1" -"stylis-plugin-rtl-sc@npm:stylis-plugin-rtl@^2.1.1", stylis-plugin-rtl@^2.1.1: +stylis-plugin-rtl@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/stylis-plugin-rtl/-/stylis-plugin-rtl-2.1.1.tgz#16707809c878494835f77e5d4aadaae3db639b5e" integrity sha512-q6xIkri6fBufIO/sV55md2CbgS5c6gg9EhSVATtHHCdOnbN/jcI0u3lYhNVeuI65c4lQPo67g8xmq5jrREvzlg== @@ -13280,7 +13259,7 @@ supports-color@8.1.1, supports-color@^8.0.0, supports-color@^8.1.1: dependencies: has-flag "^4.0.0" -supports-color@^5.0.0, supports-color@^5.3.0, supports-color@^5.5.0: +supports-color@^5.0.0, supports-color@^5.3.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== From b99c0d756dea84afd926e3e1374b691d643916f1 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Fri, 20 Oct 2023 14:48:37 -0400 Subject: [PATCH 164/262] v6.16.3 (#10740) Signed-off-by: Rom Grk Co-authored-by: Lukas --- CHANGELOG.md | 65 +++++++++++++++++++ package.json | 2 +- .../grid/x-data-grid-generator/package.json | 4 +- .../grid/x-data-grid-premium/package.json | 6 +- packages/grid/x-data-grid-pro/package.json | 4 +- packages/grid/x-data-grid/package.json | 2 +- packages/x-charts/package.json | 2 +- packages/x-date-pickers-pro/package.json | 4 +- packages/x-date-pickers/package.json | 2 +- 9 files changed, 78 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ac6411dfd71e5..9a9e8f933a8ce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,71 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 6.16.3 + +_Oct 20, 2023_ + +We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨: + +- 🎁 Add a Data Grid recipe for saving & restoring state +- 💫 Support animations on the bar chart +- 🐞 Bugfixes +- 📚 Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@6.16.3` + +- [DataGrid] Allow passing readonly arrays to `columns` and `sortingOrder` props (#10686) @pcorpet + +#### `@mui/x-data-grid-pro@6.16.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-data-grid@6.16.3`. + +#### `@mui/x-data-grid-premium@6.16.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan') + +Same changes as in `@mui/x-data-grid-pro@6.16.3`. + +### Date Pickers + +#### `@mui/x-date-pickers@6.16.3` + +- [fields] Correctly respect leading zeroes on seconds section (#10713) @flaviendelangle +- [fields] Use `onChange` instead of `onKeyPress` for Backspace editing (#10494) @flaviendelangle +- [pickers] Add reference links to DatePicker components (#10626) @michelengelen +- [pickers] Add reference links to clock components (#10645) @michelengelen +- [pickers] Add reference links to misc picker components (#10647) @michelengelen +- [pickers] Add reference links to toolbar components (#10646) @michelengelen +- [pickers] POC: Change the props received by the `FakeTextField` component (#10687) @flaviendelangle + +#### `@mui/x-date-pickers-pro@6.16.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-date-pickers@6.16.3`, plus: + +- [DateRangePicker] Fix touch based range dragging (#10664) @michelengelen + +### Charts / `@mui/x-charts@6.0.0-alpha.16` + +- [charts] Add reference links to area + bar chart components (#10652) @michelengelen +- [charts] Add reference links to line chart + sparkline components (#10650) @michelengelen +- [charts] Add reference links to pie + scatter chart components (#10653) @michelengelen +- [charts] Render only when `width` and `height` are resolved (#10714) @alexfauquette +- [charts] Support animation on `BarChart` (#9926) @alexfauquette +- [charts] Use new text component to avoid tick label overflow on x-axis (#10648) @alexfauquette + +### Docs + +- [docs] Add a recipe for saving and restoring `state` externally (#10722) @michelengelen +- [docs] Add example about how to add an axis (#10709) @alexfauquette +- [docs] Customization Playground - fix DesktopDatePicker sx props and styled examples (#10665) @noraleonte +- [docs] Improve meta description @oliviertassinari +- [docs] Make overview demo work in codesandbox (#10661) @alexfauquette + +### Core + +- [core] Update React renovate group with `@types` (#10723) @LukasTy +- [core] Update `styled-components` (#10733) @LukasTy + ## 6.16.2 _Oct 12, 2023_ diff --git a/package.json b/package.json index 54521ae368c19..2ae85342a3473 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "6.16.2", + "version": "6.16.3", "private": true, "scripts": { "start": "yarn && yarn docs:dev", diff --git a/packages/grid/x-data-grid-generator/package.json b/packages/grid/x-data-grid-generator/package.json index ce11e6a366d69..bfc21628039c8 100644 --- a/packages/grid/x-data-grid-generator/package.json +++ b/packages/grid/x-data-grid-generator/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-generator", - "version": "6.16.2", + "version": "6.16.3", "description": "Generate fake data for demo purposes only.", "author": "MUI Team", "main": "src/index.ts", @@ -32,7 +32,7 @@ "dependencies": { "@babel/runtime": "^7.23.2", "@mui/base": "^5.0.0-beta.20", - "@mui/x-data-grid-premium": "6.16.2", + "@mui/x-data-grid-premium": "6.16.3", "chance": "^1.1.11", "clsx": "^2.0.0", "lru-cache": "^7.18.3" diff --git a/packages/grid/x-data-grid-premium/package.json b/packages/grid/x-data-grid-premium/package.json index a3e43de56cb9f..22ccb7d923950 100644 --- a/packages/grid/x-data-grid-premium/package.json +++ b/packages/grid/x-data-grid-premium/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-premium", - "version": "6.16.2", + "version": "6.16.3", "description": "The Premium plan edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,8 +44,8 @@ "dependencies": { "@babel/runtime": "^7.23.2", "@mui/utils": "^5.14.14", - "@mui/x-data-grid": "6.16.2", - "@mui/x-data-grid-pro": "6.16.2", + "@mui/x-data-grid": "6.16.3", + "@mui/x-data-grid-pro": "6.16.3", "@mui/x-license-pro": "6.10.2", "@types/format-util": "^1.0.2", "clsx": "^2.0.0", diff --git a/packages/grid/x-data-grid-pro/package.json b/packages/grid/x-data-grid-pro/package.json index c7c0b3bba16b5..22d52a0dc578f 100644 --- a/packages/grid/x-data-grid-pro/package.json +++ b/packages/grid/x-data-grid-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-pro", - "version": "6.16.2", + "version": "6.16.3", "description": "The Pro plan edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,7 +44,7 @@ "dependencies": { "@babel/runtime": "^7.23.2", "@mui/utils": "^5.14.14", - "@mui/x-data-grid": "6.16.2", + "@mui/x-data-grid": "6.16.3", "@mui/x-license-pro": "6.10.2", "@types/format-util": "^1.0.2", "clsx": "^2.0.0", diff --git a/packages/grid/x-data-grid/package.json b/packages/grid/x-data-grid/package.json index 11d5c2445b2fe..c38f774cf6f5b 100644 --- a/packages/grid/x-data-grid/package.json +++ b/packages/grid/x-data-grid/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid", - "version": "6.16.2", + "version": "6.16.3", "description": "The community edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index ade6adbdae78c..d4ecc7a251d6d 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-charts", - "version": "6.0.0-alpha.15", + "version": "6.0.0-alpha.16", "description": "The community edition of the charts components (MUI X).", "author": "MUI Team", "main": "./src/index.js", diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index 2f906047c06b9..13b587b2d46d9 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers-pro", - "version": "6.16.2", + "version": "6.16.3", "description": "The commercial edition of the date picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,7 +44,7 @@ "@babel/runtime": "^7.23.2", "@mui/base": "^5.0.0-beta.20", "@mui/utils": "^5.14.14", - "@mui/x-date-pickers": "6.16.2", + "@mui/x-date-pickers": "6.16.3", "@mui/x-license-pro": "6.10.2", "clsx": "^2.0.0", "prop-types": "^15.8.1", diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 20265b634bafc..f25f1f75ebab9 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers", - "version": "6.16.2", + "version": "6.16.3", "description": "The community edition of the date picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", From 604aa8162076267b316f1b8a7a48af0e46f578e3 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 23 Oct 2023 00:57:21 +0200 Subject: [PATCH 165/262] [docs] Fix RTL data grid demo (#10728) --- .../data-grid/localization/DataGridRTL.js | 24 +++++++++++++++---- .../data-grid/localization/DataGridRTL.tsx | 24 +++++++++++++++---- .../localization/DataGridRTL.tsx.preview | 12 ++++++---- docs/package.json | 1 + yarn.lock | 2 +- 5 files changed, 47 insertions(+), 16 deletions(-) diff --git a/docs/data/data-grid/localization/DataGridRTL.js b/docs/data/data-grid/localization/DataGridRTL.js index 797e242b47098..a6b9d26a122ae 100644 --- a/docs/data/data-grid/localization/DataGridRTL.js +++ b/docs/data/data-grid/localization/DataGridRTL.js @@ -1,7 +1,17 @@ import * as React from 'react'; +import { prefixer } from 'stylis'; +import rtlPlugin from 'stylis-plugin-rtl'; import { DataGrid, arSD } from '@mui/x-data-grid'; +import createCache from '@emotion/cache'; +import { CacheProvider } from '@emotion/react'; import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles'; +// Create rtl cache +const cacheRtl = createCache({ + key: 'data-grid-rtl-demo', + stylisPlugins: [prefixer, rtlPlugin], +}); + const columns = [ { field: 'id', @@ -40,7 +50,9 @@ const rows = [ ]; export default function DataGridRTL() { + // Inherit the theme from the docs site (dark/light mode) const existingTheme = useTheme(); + const theme = React.useMemo( () => createTheme({}, arSD, existingTheme, { @@ -49,10 +61,12 @@ export default function DataGridRTL() { [existingTheme], ); return ( - -
          - -
          -           + + +
          + +
          +           +           ); } diff --git a/docs/data/data-grid/localization/DataGridRTL.tsx b/docs/data/data-grid/localization/DataGridRTL.tsx index bdf655cc45315..a822bdc0792d9 100644 --- a/docs/data/data-grid/localization/DataGridRTL.tsx +++ b/docs/data/data-grid/localization/DataGridRTL.tsx @@ -1,7 +1,17 @@ import * as React from 'react'; +import { prefixer } from 'stylis'; +import rtlPlugin from 'stylis-plugin-rtl'; import { DataGrid, GridColDef, arSD } from '@mui/x-data-grid'; +import createCache from '@emotion/cache'; +import { CacheProvider } from '@emotion/react'; import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles'; +// Create rtl cache +const cacheRtl = createCache({ + key: 'data-grid-rtl-demo', + stylisPlugins: [prefixer, rtlPlugin], +}); + const columns: GridColDef[] = [ { field: 'id', @@ -40,7 +50,9 @@ const rows = [ ]; export default function DataGridRTL() { + // Inherit the theme from the docs site (dark/light mode) const existingTheme = useTheme(); + const theme = React.useMemo( () => createTheme({}, arSD, existingTheme, { @@ -49,10 +61,12 @@ export default function DataGridRTL() { [existingTheme], ); return ( - -
          - -
          -           + + +
          + +
          +           +           ); } diff --git a/docs/data/data-grid/localization/DataGridRTL.tsx.preview b/docs/data/data-grid/localization/DataGridRTL.tsx.preview index 5f3631a167476..9ed1cd7c02ac0 100644 --- a/docs/data/data-grid/localization/DataGridRTL.tsx.preview +++ b/docs/data/data-grid/localization/DataGridRTL.tsx.preview @@ -1,5 +1,7 @@ - -
          - -
          -           \ No newline at end of file + + +
          + +
          +           +           \ No newline at end of file diff --git a/docs/package.json b/docs/package.json index 0d5d90325d1d3..15d6d27d45bc3 100644 --- a/docs/package.json +++ b/docs/package.json @@ -93,6 +93,7 @@ "@babel/plugin-transform-react-constant-elements": "^7.22.5", "@babel/preset-typescript": "^7.23.2", "@types/doctrine": "^0.0.7", + "@types/stylis": "^4.2.0", "cpy-cli": "^5.0.0", "gm": "^1.25.0", "typescript-to-proptypes": "^2.2.1" diff --git a/yarn.lock b/yarn.lock index a6ab9fad61b89..0f1960413ec1e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3070,7 +3070,7 @@ resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz#b49c2c70150141a15e0fa7e79cf1f92a72934ce3" integrity sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g== -"@types/stylis@^4.0.2": +"@types/stylis@^4.0.2", "@types/stylis@^4.2.0": version "4.2.2" resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.2.tgz#baabb6b3aa6787e90a6bd6cd75cd8fb9a4f256a3" integrity sha512-Rm17MsTpQQP5Jq4BF7CdrxJsDufoiL/q5IbJZYZmOZAJALyijgF7BzLgobXUqraNcQdqFYLYGeglDp6QzaxPpg== From 3f205cacbaeb321764dd5e49f19633749614491c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matheus=20L=C3=BAcio?= Date: Mon, 23 Oct 2023 05:03:08 -0300 Subject: [PATCH 166/262] [l10n][DataGrid] Improve Portuguese (pt-PT) locale (#10697) Co-authored-by: alexandre --- docs/data/data-grid/localization/data.json | 2 +- packages/grid/x-data-grid/src/locales/ptBR.ts | 26 +++++++++---------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json index 3b3923e47a9ba..0a377047bfe4a 100644 --- a/docs/data/data-grid/localization/data.json +++ b/docs/data/data-grid/localization/data.json @@ -163,7 +163,7 @@ "languageTag": "pt-BR", "importName": "ptBR", "localeName": "Portuguese (Brazil)", - "missingKeysCount": 13, + "missingKeysCount": 0, "totalKeysCount": 119, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/grid/x-data-grid/src/locales/ptBR.ts" }, diff --git a/packages/grid/x-data-grid/src/locales/ptBR.ts b/packages/grid/x-data-grid/src/locales/ptBR.ts index 504aaa348cac6..7a304071cdddf 100644 --- a/packages/grid/x-data-grid/src/locales/ptBR.ts +++ b/packages/grid/x-data-grid/src/locales/ptBR.ts @@ -71,12 +71,12 @@ const ptBRGrid: Partial = { filterOperatorIsEmpty: 'está vazio', filterOperatorIsNotEmpty: 'não está vazio', filterOperatorIsAnyOf: 'é qualquer um dos', - // 'filterOperator=': '=', - // 'filterOperator!=': '!=', - // 'filterOperator>': '>', - // 'filterOperator>=': '>=', - // 'filterOperator<': '<', - // 'filterOperator<=': '<=', + 'filterOperator=': 'igual à', + 'filterOperator!=': 'diferente de', + 'filterOperator>': 'maior que', + 'filterOperator>=': 'maior ou igual que', + 'filterOperator<': 'menor que', + 'filterOperator<=': 'menor ou igual que', // Header filter operators text headerFilterOperatorContains: 'Contém', @@ -85,13 +85,13 @@ const ptBRGrid: Partial = { headerFilterOperatorEndsWith: 'Termina com', headerFilterOperatorIs: 'É', headerFilterOperatorNot: 'Não é', - // headerFilterOperatorAfter: 'Is after', - // headerFilterOperatorOnOrAfter: 'Is on or after', - // headerFilterOperatorBefore: 'Is before', - // headerFilterOperatorOnOrBefore: 'Is on or before', - // headerFilterOperatorIsEmpty: 'Is empty', - // headerFilterOperatorIsNotEmpty: 'Is not empty', - // headerFilterOperatorIsAnyOf: 'Is any of', + headerFilterOperatorAfter: 'Depois de', + headerFilterOperatorOnOrAfter: 'Está entre ou depois de', + headerFilterOperatorBefore: 'Antes de', + headerFilterOperatorOnOrBefore: 'Está entre ou antes de', + headerFilterOperatorIsEmpty: 'É vazio', + headerFilterOperatorIsNotEmpty: 'Não é vazio', + headerFilterOperatorIsAnyOf: 'É algum', 'headerFilterOperator=': 'Igual', 'headerFilterOperator!=': 'Não igual', 'headerFilterOperator>': 'Maior que', From 34fec175f839de5c3e0c25252b1df860bffaa6ea Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Mon, 23 Oct 2023 11:23:14 +0200 Subject: [PATCH 167/262] [DataGrid] Persist stable row index for focused row (#10674) --- .../virtualization/useGridVirtualScroller.tsx | 11 ++++- .../src/tests/rows.DataGrid.test.tsx | 44 +++++++++++++++++++ 2 files changed, 54 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 3e16fc239a763..30cb17e519947 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -663,6 +663,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { } const rows: React.JSX.Element[] = []; + let isRowWithFocusedCellRendered = false; for (let i = 0; i < renderedRows.length; i += 1) { const { id, model } = renderedRows[i]; @@ -713,6 +714,14 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { rowStyleCache.current[id] = style; } + let index = rowIndexOffset + (currentPage?.range?.firstRowIndex || 0) + firstRowToRender + i; + if (isRowWithFocusedCellNotInRange && cellFocus?.id === id) { + index = indexOfRowWithFocusedCell; + isRowWithFocusedCellRendered = true; + } else if (isRowWithFocusedCellRendered) { + index -= 1; + } + rows.push( { firstColumnToRender={firstColumnToRender} lastColumnToRender={lastColumnToRender} selected={isSelected} - index={rowIndexOffset + (currentPage?.range?.firstRowIndex || 0) + firstRowToRender + i} + index={index} containerWidth={availableSpace} isLastVisible={lastVisibleRowIndex} position={position} diff --git a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx index dce134e2eaebd..1c505ce0ecfdc 100644 --- a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx @@ -1112,4 +1112,48 @@ describe(' - Rows', () => { expect(getColumnValues(0)).to.deep.equal(['Apple', 'Atari']); }); }); + + // https://github.com/mui/mui-x/issues/10373 + it('should set proper `data-rowindex` and `aria-rowindex` when focused row is out of the viewport', async function test() { + if (isJSDOM) { + // needs virtualization + this.skip(); + } + render( +
          + +
          , + ); + + const cell = getCell(0, 0); + userEvent.mousePress(cell); + + const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; + virtualScroller.scrollTop = 1000; + virtualScroller.dispatchEvent(new Event('scroll')); + + const focusedRow = getRow(0); + expect(focusedRow.getAttribute('data-id')).to.equal('0'); + expect(focusedRow.getAttribute('data-rowindex')).to.equal('0'); + expect(focusedRow.getAttribute('aria-rowindex')).to.equal('2'); // 1-based, 1 is the header + + const lastRow = getRow(9); + expect(lastRow.getAttribute('data-id')).to.equal('9'); + expect(lastRow.getAttribute('data-rowindex')).to.equal('9'); + expect(lastRow.getAttribute('aria-rowindex')).to.equal('11'); // 1-based, 1 is the header + }); }); From 3daf0261d5f9781357f659899f68e3d0b13f515b Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Mon, 23 Oct 2023 11:27:57 +0200 Subject: [PATCH 168/262] [DataGridPro] Fix `undefined` values passed to `valueFormatter` for tree leaf nodes (#10748) --- .../treeData/gridTreeDataGroupColDef.ts | 4 +++- .../src/tests/treeData.DataGridPro.test.tsx | 21 +++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts b/packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts index 16d3e080f728d..670d5681a60f9 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts +++ b/packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts @@ -13,7 +13,9 @@ export const GRID_TREE_DATA_GROUPING_COL_DEF: Omit - params.rowNode.type === 'group' ? params.rowNode.groupingKey : undefined, + params.rowNode.type === 'group' || params.rowNode.type === 'leaf' + ? params.rowNode.groupingKey + : undefined, }; export const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__'; diff --git a/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx index d8b2cf6c3e471..3df9861f4a112 100644 --- a/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx @@ -336,6 +336,27 @@ describe(' - Tree data', () => { ); expect(getColumnValues(0)).to.deep.equal(['A', 'A', 'B', 'B', 'A', 'B', 'A', 'A', 'C']); }); + + // https://github.com/mui/mui-x/issues/9344 + it('should support valueFormatter', () => { + render( + `> ${value}` }} + defaultGroupingExpansionDepth={-1} + />, + ); + expect(getColumnValues(0)).to.deep.equal([ + '> A (2)', + '> A', + '> B', + '> B (4)', + '> A', + '> B (2)', + '> A (1)', + '> A', + '> C', + ]); + }); }); describe('row grouping column', () => { From 5dfdcf45cad91cd904a5191fdc8678b7e2fa6fd9 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Mon, 23 Oct 2023 14:41:37 +0200 Subject: [PATCH 169/262] [DataGridPremium] Fix `sum` aggregation to ignore non-numeric values (#10730) --- .../aggregation/gridAggregationFunctions.ts | 4 ++-- .../aggregation.DataGridPremium.test.tsx | 24 +++++++++++++++++++ packages/grid/x-data-grid/src/utils/utils.ts | 4 ++-- 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts index a777f45a16d24..a094bbad755c6 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts +++ b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts @@ -2,12 +2,12 @@ import { GridValueFormatterParams } from '@mui/x-data-grid-pro'; import { isNumber } from '@mui/x-data-grid-pro/internals'; import { GridAggregationFunction } from './gridAggregationInterfaces'; -const sumAgg: GridAggregationFunction = { +const sumAgg: GridAggregationFunction = { apply: ({ values }) => { let sum = 0; for (let i = 0; i < values.length; i += 1) { const value = values[i]; - if (value != null) { + if (isNumber(value)) { sum += value; } } diff --git a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx index e6e44d51931be..46432d5f4d240 100644 --- a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx @@ -765,4 +765,28 @@ describe(' - Aggregation', () => { ]); }); }); + + describe('built-in aggregation functions', () => { + describe('`sum`', () => { + it('should work with numbers', () => { + expect( + GRID_AGGREGATION_FUNCTIONS.sum.apply({ + values: [0, 10, 12, 23], + field: 'value', + groupId: 0, + }), + ).to.equal(45); + }); + + it('should ignore non-numbers', () => { + expect( + GRID_AGGREGATION_FUNCTIONS.sum.apply({ + values: [0, 10, 12, 23, 'a', '', undefined, null, NaN, {}, true], + field: 'value', + groupId: 0, + }), + ).to.equal(45); + }); + }); + }); }); diff --git a/packages/grid/x-data-grid/src/utils/utils.ts b/packages/grid/x-data-grid/src/utils/utils.ts index 48cf9c74e05a4..a0bb4d8bec329 100644 --- a/packages/grid/x-data-grid/src/utils/utils.ts +++ b/packages/grid/x-data-grid/src/utils/utils.ts @@ -1,5 +1,5 @@ -export function isNumber(value: any): value is number { - return typeof value === 'number'; +export function isNumber(value: unknown): value is number { + return typeof value === 'number' && !Number.isNaN(value); } export function isFunction(value: any): value is Function { From ef93605faedb8c77d5c4a622ce89d95ce009e769 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Mon, 23 Oct 2023 17:08:51 +0200 Subject: [PATCH 170/262] [fields] POC: Use `contentEditable` on `FakeTextField` (#10779) --- .../FakeTextField/FakeTextField.tsx | 66 +++++++++++++++---- 1 file changed, 52 insertions(+), 14 deletions(-) diff --git a/packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx b/packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx index 83290786ece1d..8cf10f6f25fdf 100644 --- a/packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx +++ b/packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx @@ -1,30 +1,68 @@ import * as React from 'react'; -import Stack from '@mui/material/Stack'; +import Box from '@mui/material/Box'; -export interface FakeTextFieldElement extends React.HTMLAttributes { - before: string; - after: string; +export interface FakeTextFieldElement { + container: React.HTMLAttributes; + content: React.HTMLAttributes; + before: React.HTMLAttributes; + after: React.HTMLAttributes; } interface FakeTextFieldProps { elements: FakeTextFieldElement[]; + valueStr: string; + onValueStrChange: React.ChangeEventHandler; + error: boolean; + id?: string; + InputProps: any; + inputProps: any; + disabled?: boolean; + autoFocus?: boolean; + ownerState?: any; + valueType: 'value' | 'placeholder'; } export const FakeTextField = React.forwardRef(function FakeTextField( props: FakeTextFieldProps, ref: React.Ref, ) { - const { elements } = props; + const { + elements, + valueStr, + onValueStrChange, + id, + error, + InputProps, + inputProps, + autoFocus, + disabled, + valueType, + ownerState, + ...other + } = props; return ( - - {elements.map(({ before, after, ...otherElementProps }, elementIndex) => ( - - {before} - - {after} - - ))} - + + + {elements.map(({ container, content, before, after }, elementIndex) => ( + + + + + + ))} + + + ); }); From 5ccb1b1874eecb0b42190e4316485df4a5786448 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Mon, 23 Oct 2023 22:58:25 +0200 Subject: [PATCH 171/262] [DataGridPremium] Fix `size` aggregation to ignore `undefined` values (#10745) --- .../aggregation/gridAggregationFunctions.ts | 4 ++-- .../aggregation.DataGridPremium.test.tsx | 22 +++++++++++++++++++ 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts index a094bbad755c6..f54276f341816 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts +++ b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts @@ -67,9 +67,9 @@ const maxAgg: GridAggregationFunction = { columnTypes: ['number', 'date', 'dateTime'], }; -const sizeAgg: GridAggregationFunction = { +const sizeAgg: GridAggregationFunction = { apply: ({ values }) => { - return values.length; + return values.filter((value) => typeof value !== 'undefined').length; }, valueFormatter: (params: GridValueFormatterParams) => { if (params.value == null || !isNumber(params.value)) { diff --git a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx index 46432d5f4d240..2bc27bacf971b 100644 --- a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx @@ -788,5 +788,27 @@ describe(' - Aggregation', () => { ).to.equal(45); }); }); + + describe('`size`', () => { + it('should work with any value types', () => { + expect( + GRID_AGGREGATION_FUNCTIONS.size.apply({ + values: [23, '', 'a', NaN, {}, false, true], + field: 'value', + groupId: 0, + }), + ).to.equal(7); + }); + + it('should ignore undefined values', () => { + expect( + GRID_AGGREGATION_FUNCTIONS.size.apply({ + values: [23, '', 'a', NaN, {}, false, true, undefined], + field: 'value', + groupId: 0, + }), + ).to.equal(7); + }); + }); }); }); From dba8da2d99e9429a5689cbc54e525bca79ea1834 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Tue, 24 Oct 2023 07:55:27 +0200 Subject: [PATCH 172/262] [test] Add missing type on `cleanText` utility function (#10780) --- test/utils/pickers/fields.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/utils/pickers/fields.tsx b/test/utils/pickers/fields.tsx index cc09f19724fa5..04b1e1c276841 100644 --- a/test/utils/pickers/fields.tsx +++ b/test/utils/pickers/fields.tsx @@ -174,7 +174,7 @@ export const buildFieldInteractions =

          ({ return { clickOnInput, testFieldKeyPress, testFieldChange, renderWithProps }; }; -export const cleanText = (text, specialCase?: 'singleDigit' | 'RTL') => { +export const cleanText = (text: string, specialCase?: 'singleDigit' | 'RTL') => { const clean = text.replace(/\u202f/g, ' '); switch (specialCase) { case 'singleDigit': From f671a15d85f11882dd0ff340362e8289b7289443 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 24 Oct 2023 14:37:50 +0500 Subject: [PATCH 173/262] [DataGridPremium] Fix cell selection throwing index error on second page and beyond (#10784) --- .../cellSelection/useGridCellSelection.ts | 2 +- .../cellSelection.DataGridPremium.test.tsx | 24 +++++++++++++++++-- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts index ac622547f18e4..0419d88240657 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts +++ b/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts @@ -486,7 +486,7 @@ export const useGridCellSelection = ( newClasses.push(gridClasses['cell--rangeTop']); } - if (rowIndex < visibleRows.range.lastRowIndex) { + if (rowIndex + visibleRows.range.firstRowIndex < visibleRows.range.lastRowIndex) { const { id: nextRowId } = visibleRows.rows[rowIndex + 1]; if (!apiRef.current.unstable_isCellSelected(nextRowId, field)) { newClasses.push(gridClasses['cell--rangeBottom']); diff --git a/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx index 30ddfc94dc735..2a17b8ed035c9 100644 --- a/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { stub, SinonStub } from 'sinon'; import { expect } from 'chai'; import { spyApi, getCell } from 'test/utils/helperFn'; -import { createRenderer, fireEvent, act, userEvent } from '@mui-internal/test-utils'; +import { createRenderer, fireEvent, act, userEvent, screen } from '@mui-internal/test-utils'; import { DataGridPremium, DataGridPremiumProps, @@ -36,12 +36,12 @@ describe(' - Cell selection', () => {

          ); @@ -66,6 +66,26 @@ describe(' - Cell selection', () => { expect(cell11).to.have.class('Mui-selected'); }); + // https://github.com/mui/mui-x/issues/10777 + it('should work with the paginated grid', () => { + render( + , + ); + const cell01 = getCell(2, 0); + fireEvent.click(cell01); + expect(cell01).to.have.class('Mui-selected'); + fireEvent.click(screen.getByRole('button', { name: /next page/i })); + const cell02 = getCell(5, 0); + fireEvent.click(cell02); + expect(cell02).to.have.class('Mui-selected'); + }); + describe('Ctrl + click', () => { it('should add the clicked cells to the selection', () => { render(); From 5763ecaa8cf66ca0bcdc1f379076972fc46d4fa6 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Wed, 25 Oct 2023 09:18:14 +0200 Subject: [PATCH 174/262] [docs] Fix non-closed warning (#10796) --- docs/data/date-pickers/adapters-locale/adapters-locale.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/data/date-pickers/adapters-locale/adapters-locale.md b/docs/data/date-pickers/adapters-locale/adapters-locale.md index 2f1f7385f6755..2395bcef41a36 100644 --- a/docs/data/date-pickers/adapters-locale/adapters-locale.md +++ b/docs/data/date-pickers/adapters-locale/adapters-locale.md @@ -235,6 +235,7 @@ The default formatter only keeps the first letter of the name and capitalises it :::warning The first parameter `day` will be removed in v7 in favor of the second parameter `date` for more flexibility. +::: :::info This prop is available on all components that render a day calendar, including the Date Calendar as well as all Date Pickers, Date Time Pickers, and Date Range Pickers. From 2f8ea5f03010faf1b4170952a08741296e6fea5c Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 25 Oct 2023 16:01:04 +0500 Subject: [PATCH 175/262] [docs] Correct editing related props' description (#10798) --- docs/pages/x/api/data-grid/grid-api.md | 4 ++-- docs/pages/x/api/data-grid/grid-editing-api.json | 4 ++-- packages/grid/x-data-grid/src/models/api/gridEditingApi.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/pages/x/api/data-grid/grid-api.md b/docs/pages/x/api/data-grid/grid-api.md index d7c967eb00f73..144a36fc7d332 100644 --- a/docs/pages/x/api/data-grid/grid-api.md +++ b/docs/pages/x/api/data-grid/grid-api.md @@ -123,9 +123,9 @@ import { GridApi } from '@mui/x-data-grid'; | startHeaderFilterEditMode | (field: GridColDef['field']) => void | Puts the cell corresponding to the given row id and field into edit mode. | | startRowEditMode | (params: GridStartRowEditModeParams) => void | Puts the row corresponding to the given id into edit mode. | | state | State | Property that contains the whole state of the grid. | -| stopCellEditMode | (params: GridStopCellEditModeParams) => void | Puts the cell corresponding to the given row id and field into view mode and updates the original row with the new value stored.
          If `params.ignoreModifications` is `false` it will discard the modifications made. | +| stopCellEditMode | (params: GridStopCellEditModeParams) => void | Puts the cell corresponding to the given row id and field into view mode and updates the original row with the new value stored.
          If `params.ignoreModifications` is `true` it will discard the modifications made. | | stopHeaderFilterEditMode | () => void | Stops the edit mode for the current field. | -| stopRowEditMode | (params: GridStopRowEditModeParams) => void | Puts the row corresponding to the given id and into view mode and updates the original row with the new values stored.
          If `params.ignoreModifications` is `false` it will discard the modifications made. | +| stopRowEditMode | (params: GridStopRowEditModeParams) => void | Puts the row corresponding to the given id and into view mode and updates the original row with the new values stored.
          If `params.ignoreModifications` is `true` it will discard the modifications made. | | subscribeEvent | <E extends GridEvents>(event: E, handler: GridEventListener<E>, options?: EventListenerOptions) => () => void | Registers a handler for an event. | | toggleColumnMenu | (field: string) => void | Toggles the column menu under the `field` column. | | toggleDetailPanel [](/x/introduction/licensing/#pro-plan) | (id: GridRowId) => void | Expands or collapses the detail panel of a row. | diff --git a/docs/pages/x/api/data-grid/grid-editing-api.json b/docs/pages/x/api/data-grid/grid-editing-api.json index 9c2e5fdea9db5..4545356fbfd5e 100644 --- a/docs/pages/x/api/data-grid/grid-editing-api.json +++ b/docs/pages/x/api/data-grid/grid-editing-api.json @@ -39,12 +39,12 @@ }, { "name": "stopCellEditMode", - "description": "Puts the cell corresponding to the given row id and field into view mode and updates the original row with the new value stored. If params.ignoreModifications is false it will discard the modifications made.", + "description": "Puts the cell corresponding to the given row id and field into view mode and updates the original row with the new value stored. If params.ignoreModifications is true it will discard the modifications made.", "type": "(params: GridStopCellEditModeParams) => void" }, { "name": "stopRowEditMode", - "description": "Puts the row corresponding to the given id and into view mode and updates the original row with the new values stored. If params.ignoreModifications is false it will discard the modifications made.", + "description": "Puts the row corresponding to the given id and into view mode and updates the original row with the new values stored. If params.ignoreModifications is true it will discard the modifications made.", "type": "(params: GridStopRowEditModeParams) => void" } ] diff --git a/packages/grid/x-data-grid/src/models/api/gridEditingApi.ts b/packages/grid/x-data-grid/src/models/api/gridEditingApi.ts index 3140625018972..c2e64a3b953b1 100644 --- a/packages/grid/x-data-grid/src/models/api/gridEditingApi.ts +++ b/packages/grid/x-data-grid/src/models/api/gridEditingApi.ts @@ -183,7 +183,7 @@ export interface GridCellEditingApi extends GridEditingSharedApi { startCellEditMode(params: GridStartCellEditModeParams): void; /** * Puts the cell corresponding to the given row id and field into view mode and updates the original row with the new value stored. - * If `params.ignoreModifications` is `false` it will discard the modifications made. + * If `params.ignoreModifications` is `true` it will discard the modifications made. * @param {GridStopCellEditModeParams} params The row id and field of the cell to stop editing. */ stopCellEditMode(params: GridStopCellEditModeParams): void; @@ -223,7 +223,7 @@ export interface GridRowEditingApi extends GridEditingSharedApi { startRowEditMode(params: GridStartRowEditModeParams): void; /** * Puts the row corresponding to the given id and into view mode and updates the original row with the new values stored. - * If `params.ignoreModifications` is `false` it will discard the modifications made. + * If `params.ignoreModifications` is `true` it will discard the modifications made. * @param {GridStopCellEditModeParams} params The row id and field of the cell to stop editing. */ stopRowEditMode(params: GridStopRowEditModeParams): void; From ed0ab4fbe9a25e14ed07e79b824318521dd10f33 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Wed, 25 Oct 2023 18:42:45 +0200 Subject: [PATCH 176/262] [DataGridPremium] Fix `avg` aggregation to ignore non-numeric values (#10787) --- .../aggregation/gridAggregationFunctions.ts | 19 +++++++++++----- .../aggregation.DataGridPremium.test.tsx | 22 +++++++++++++++++++ 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts index f54276f341816..1dae2269107d4 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts +++ b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationFunctions.ts @@ -17,14 +17,23 @@ const sumAgg: GridAggregationFunction = { columnTypes: ['number'], }; -const avgAgg: GridAggregationFunction = { - apply: (params) => { - if (params.values.length === 0) { +const avgAgg: GridAggregationFunction = { + apply: ({ values }) => { + if (values.length === 0) { return null; } - const sum = sumAgg.apply(params) as number; - return sum / params.values.length; + let sum = 0; + let valuesCount = 0; + for (let i = 0; i < values.length; i += 1) { + const value = values[i]; + if (isNumber(value)) { + valuesCount += 1; + sum += value; + } + } + + return sum / valuesCount; }, columnTypes: ['number'], }; diff --git a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx index 2bc27bacf971b..4023b59f4cb1b 100644 --- a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx @@ -789,6 +789,28 @@ describe(' - Aggregation', () => { }); }); + describe('`avg`', () => { + it('should work with numbers', () => { + expect( + GRID_AGGREGATION_FUNCTIONS.avg.apply({ + values: [0, 10, 12, 23], + field: 'value', + groupId: 0, + }), + ).to.equal(11.25); + }); + + it('should ignore non-numbers', () => { + expect( + GRID_AGGREGATION_FUNCTIONS.avg.apply({ + values: [0, 10, 12, 23, 'a', '', undefined, null, NaN, {}, true], + field: 'value', + groupId: 0, + }), + ).to.equal(11.25); + }); + }); + describe('`size`', () => { it('should work with any value types', () => { expect( From 3b25edd79d6c8dbbcf2058349b30aa798f61c69c Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Wed, 25 Oct 2023 21:21:19 +0200 Subject: [PATCH 177/262] [DataGrid] Allow changing debounce time for row positions calculation (#10708) --- docs/pages/x/api/data-grid/data-grid-premium.json | 1 + docs/pages/x/api/data-grid/data-grid-pro.json | 1 + docs/pages/x/api/data-grid/data-grid.json | 1 + .../translations/api-docs/data-grid/data-grid-premium.json | 5 +++++ docs/translations/api-docs/data-grid/data-grid-pro.json | 5 +++++ docs/translations/api-docs/data-grid/data-grid.json | 5 +++++ .../src/DataGridPremium/DataGridPremium.tsx | 7 +++++++ .../grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx | 7 +++++++ packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx | 7 +++++++ packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts | 1 + .../x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts | 5 +++-- .../grid/x-data-grid/src/models/props/DataGridProps.ts | 7 +++++++ 12 files changed, 50 insertions(+), 2 deletions(-) diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 8e84fafb5d408..9d49c1998c8bd 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -555,6 +555,7 @@ "rowGroupingModel": { "type": { "name": "arrayOf", "description": "Array<string>" } }, "rowHeight": { "type": { "name": "number" }, "default": "52" }, "rowModesModel": { "type": { "name": "object" } }, + "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" }, "rowReordering": { "type": { "name": "bool" } }, "rowSelection": { "type": { "name": "bool" }, "default": "true" }, "rowSelectionModel": { 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 0a7cbf32e460f..0e5b7bf525263 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -506,6 +506,7 @@ "rowCount": { "type": { "name": "number" } }, "rowHeight": { "type": { "name": "number" }, "default": "52" }, "rowModesModel": { "type": { "name": "object" } }, + "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" }, "rowReordering": { "type": { "name": "bool" } }, "rowSelection": { "type": { "name": "bool" }, "default": "true" }, "rowSelectionModel": { diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 3cd3f1cbd975e..d46dff1066c96 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -386,6 +386,7 @@ "rowCount": { "type": { "name": "number" } }, "rowHeight": { "type": { "name": "number" }, "default": "52" }, "rowModesModel": { "type": { "name": "object" } }, + "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" }, "rowSelection": { "type": { "name": "bool" }, "default": "true" }, "rowSelectionModel": { "type": { diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json index 8d5518e89a42e..6b354a3bc786d 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -827,6 +827,11 @@ "deprecated": "", "typeDescriptions": {} }, + "rowPositionsDebounceMs": { + "description": "The milliseconds delay to wait after measuring the row height before recalculating row positions. Setting it to a lower value could be useful when using dynamic row height, but might reduce performance when displaying a large number of rows.", + "deprecated": "", + "typeDescriptions": {} + }, "rowReordering": { "description": "If true, the reordering of rows is enabled.", "deprecated": "", diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json index 60a485fb1a00f..6641bcd496834 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -748,6 +748,11 @@ "deprecated": "", "typeDescriptions": {} }, + "rowPositionsDebounceMs": { + "description": "The milliseconds delay to wait after measuring the row height before recalculating row positions. Setting it to a lower value could be useful when using dynamic row height, but might reduce performance when displaying a large number of rows.", + "deprecated": "", + "typeDescriptions": {} + }, "rowReordering": { "description": "If true, the reordering of rows is enabled.", "deprecated": "", diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index 913a0ee961d1b..d18e7b9cfb46e 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -563,6 +563,11 @@ "deprecated": "", "typeDescriptions": {} }, + "rowPositionsDebounceMs": { + "description": "The milliseconds delay to wait after measuring the row height before recalculating row positions. Setting it to a lower value could be useful when using dynamic row height, but might reduce performance when displaying a large number of rows.", + "deprecated": "", + "typeDescriptions": {} + }, "rows": { "description": "Set of rows of type GridRowsProp.", "deprecated": "", diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index 12d57e5b7cb5b..d43a616dfa376 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -892,6 +892,13 @@ DataGridPremiumRaw.propTypes = { * Controls the modes of the rows. */ rowModesModel: PropTypes.object, + /** + * The milliseconds delay to wait after measuring the row height before recalculating row positions. + * Setting it to a lower value could be useful when using dynamic row height, + * but might reduce performance when displaying a large number of rows. + * @default 166 + */ + rowPositionsDebounceMs: PropTypes.number, /** * If `true`, the reordering of rows is enabled. * @default false diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 3a0e768e2e03e..2e4e10ea1e89e 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -817,6 +817,13 @@ DataGridProRaw.propTypes = { * Controls the modes of the rows. */ rowModesModel: PropTypes.object, + /** + * The milliseconds delay to wait after measuring the row height before recalculating row positions. + * Setting it to a lower value could be useful when using dynamic row height, + * but might reduce performance when displaying a large number of rows. + * @default 166 + */ + rowPositionsDebounceMs: PropTypes.number, /** * If `true`, the reordering of rows is enabled. * @default false diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx index dabc61e808c8e..3a5608ae2235f 100644 --- a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx @@ -631,6 +631,13 @@ DataGridRaw.propTypes = { * Controls the modes of the rows. */ rowModesModel: PropTypes.object, + /** + * The milliseconds delay to wait after measuring the row height before recalculating row positions. + * Setting it to a lower value could be useful when using dynamic row height, + * but might reduce performance when displaying a large number of rows. + * @default 166 + */ + rowPositionsDebounceMs: PropTypes.number, /** * Set of rows of type [[GridRowsProp]]. */ diff --git a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts index bbe85470742a1..7d6b381fe64f3 100644 --- a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts +++ b/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts @@ -80,6 +80,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = { keepColumnPositionIfDraggedOutside: false, unstable_ignoreValueFormatterDuringExport: false, clipboardCopyCellDelimiter: '\t', + rowPositionsDebounceMs: 166, }; const defaultSlots = uncapitalizeObjectKeys(DATA_GRID_DEFAULT_SLOTS_COMPONENTS)!; diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts index 3ae59a3fe64a9..5a62e9ded7f5d 100644 --- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts +++ b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts @@ -69,6 +69,7 @@ export const useGridRowsMeta = ( | 'pagination' | 'paginationMode' | 'rowHeight' + | 'rowPositionsDebounceMs' >, ): void => { const { getRowHeight: getRowHeightProp, getRowSpacing, getEstimatedRowHeight } = props; @@ -256,8 +257,8 @@ export const useGridRowsMeta = ( ); const debouncedHydrateRowsMeta = React.useMemo( - () => debounce(hydrateRowsMeta), - [hydrateRowsMeta], + () => debounce(hydrateRowsMeta, props.rowPositionsDebounceMs), + [hydrateRowsMeta, props.rowPositionsDebounceMs], ); const storeMeasuredRowHeight = React.useCallback< diff --git a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts index 41047bde30aed..aa078230b2041 100644 --- a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts @@ -371,6 +371,13 @@ export interface DataGridPropsWithDefaultValues { * @default '\t' */ clipboardCopyCellDelimiter: string; + /** + * The milliseconds delay to wait after measuring the row height before recalculating row positions. + * Setting it to a lower value could be useful when using dynamic row height, + * but might reduce performance when displaying a large number of rows. + * @default 166 + */ + rowPositionsDebounceMs: number; } /** From a2b6268874521599fc0f60bcda04732348949157 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 10:52:10 +0300 Subject: [PATCH 178/262] Bump @babel/traverse to ^7.23.2 (#10749) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- packages/x-codemod/package.json | 2 +- yarn.lock | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 2ae85342a3473..0380c8c0f5ea2 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "@babel/preset-react": "^7.22.15", "@babel/preset-typescript": "^7.23.2", "@babel/register": "^7.22.15", - "@babel/traverse": "^7.23.0", + "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.1", diff --git a/packages/x-codemod/package.json b/packages/x-codemod/package.json index 39c447eb592e9..1539e77bb60d4 100644 --- a/packages/x-codemod/package.json +++ b/packages/x-codemod/package.json @@ -33,7 +33,7 @@ "dependencies": { "@babel/core": "^7.23.2", "@babel/runtime": "^7.23.2", - "@babel/traverse": "^7.23.0", + "@babel/traverse": "^7.23.2", "jscodeshift": "0.13.1", "jscodeshift-add-imports": "^1.0.10", "yargs": "^17.7.2" diff --git a/yarn.lock b/yarn.lock index 0f1960413ec1e..96d3e4fc8359e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1289,7 +1289,7 @@ "@babel/parser" "^7.22.15" "@babel/types" "^7.22.15" -"@babel/traverse@^7.1.6", "@babel/traverse@^7.23.0", "@babel/traverse@^7.23.2", "@babel/traverse@^7.4.5": +"@babel/traverse@^7.1.6", "@babel/traverse@^7.23.2", "@babel/traverse@^7.4.5": version "7.23.2" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8" integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw== From acfd00cc02111d51d8f50bc5e307e541c346ebbb Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 10:53:17 +0300 Subject: [PATCH 179/262] Bump @next/eslint-plugin-next to ^13.5.6 (#10750) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 0380c8c0f5ea2..3064de9fda231 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,7 @@ "@mui/material": "^5.14.14", "@mui/monorepo": "https://github.com/mui/material-ui.git#master", "@mui/utils": "^5.14.14", - "@next/eslint-plugin-next": "^13.5.4", + "@next/eslint-plugin-next": "^13.5.6", "@octokit/plugin-retry": "^6.0.1", "@octokit/rest": "^20.0.2", "@playwright/test": "1.39.0", diff --git a/yarn.lock b/yarn.lock index 96d3e4fc8359e..c5f685e24db0a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1945,10 +1945,10 @@ resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.19.tgz#46905b4e6f62da825b040343cbc233144e9578d3" integrity sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ== -"@next/eslint-plugin-next@^13.5.4": - version "13.5.4" - resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.5.4.tgz#ec70af509f07dc4e545df25834ac94d2c341c36a" - integrity sha512-vI94U+D7RNgX6XypSyjeFrOzxGlZyxOplU0dVE5norIfZGn/LDjJYPHdvdsR5vN1eRtl6PDAsOHmycFEOljK5A== +"@next/eslint-plugin-next@^13.5.6": + version "13.5.6" + resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.5.6.tgz#cf279b94ddc7de49af8e8957f0c3b7349bc489bf" + integrity sha512-ng7pU/DDsxPgT6ZPvuprxrkeew3XaRf4LAT4FabaEO/hAbvVx4P7wqnqdbTdDn1kgTvsI4tpIgT4Awn/m0bGbg== dependencies: glob "7.1.7" From 0bb449aca7e179e77a6796462ce43acc42fcfb80 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 10:54:01 +0300 Subject: [PATCH 180/262] Bump @types/babel__core to ^7.20.3 (#10751) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 3064de9fda231..8635b43734b2a 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "@octokit/rest": "^20.0.2", "@playwright/test": "1.39.0", "@testing-library/react": "^14.0.0", - "@types/babel__core": "^7.20.2", + "@types/babel__core": "^7.20.3", "@types/chai": "^4.3.9", "@types/chai-dom": "^1.11.1", "@types/enzyme": "^3.10.12", diff --git a/yarn.lock b/yarn.lock index c5f685e24db0a..32318f2644b61 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2723,10 +2723,10 @@ resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc" integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q== -"@types/babel__core@^7.1.12", "@types/babel__core@^7.20.2": - version "7.20.2" - resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.2.tgz#215db4f4a35d710256579784a548907237728756" - integrity sha512-pNpr1T1xLUc2l3xJKuPtsEky3ybxN3m4fJkknfIpTCTfIZCDW57oAg+EfCgIIp2rvCe0Wn++/FfodDS4YXxBwA== +"@types/babel__core@^7.1.12", "@types/babel__core@^7.20.3": + version "7.20.3" + resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.3.tgz#d5625a50b6f18244425a1359a858c73d70340778" + integrity sha512-54fjTSeSHwfan8AyHWrKbfBWiEUrNTZsUwPTDSNaaP1QDQIZbeNUg3a59E9D+375MzUw/x1vx2/0F5LBz+AeYA== dependencies: "@babel/parser" "^7.20.7" "@babel/types" "^7.20.7" From 3ebc3bdaf5904d3279b63695084bb9b9ccccb8f9 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 10:54:34 +0300 Subject: [PATCH 181/262] Bump @types/chai-dom to ^1.11.2 (#10752) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 8635b43734b2a..1e069eee48941 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "@testing-library/react": "^14.0.0", "@types/babel__core": "^7.20.3", "@types/chai": "^4.3.9", - "@types/chai-dom": "^1.11.1", + "@types/chai-dom": "^1.11.2", "@types/enzyme": "^3.10.12", "@types/mocha": "^10.0.2", "@types/node": "^18.18.6", diff --git a/yarn.lock b/yarn.lock index 32318f2644b61..98516f020bf6b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2766,10 +2766,10 @@ "@types/node" "*" "@types/responselike" "*" -"@types/chai-dom@^1.11.1": - version "1.11.1" - resolved "https://registry.yarnpkg.com/@types/chai-dom/-/chai-dom-1.11.1.tgz#5f91fb34a612ccef177c70100c7c1b98a684d696" - integrity sha512-q+fs4jdKZFDhXOWBehY0jDGCp8nxVe11Ia8MxqlIsJC3Y2JU149PSBYF2li2F3uxJFSAl2Rf8XeLWonHglpcGw== +"@types/chai-dom@^1.11.2": + version "1.11.2" + resolved "https://registry.yarnpkg.com/@types/chai-dom/-/chai-dom-1.11.2.tgz#2fcca7218610f25469a335b982d2d3b521b55644" + integrity sha512-6ltNv5QOV7pdW5JEkhT+GMMfvziRC90Rn6zwadC8PFf6tWbXBQRRCV/uXp7nVPdiTKHbqbPTX1jDDhKbu5MW2Q== dependencies: "@types/chai" "*" From 93f6c06afbea0f87f85504428fcf6dc91148489b Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 10:55:16 +0300 Subject: [PATCH 182/262] Bump @types/chance to ^1.1.5 (#10753) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/grid/x-data-grid-generator/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/grid/x-data-grid-generator/package.json b/packages/grid/x-data-grid-generator/package.json index bfc21628039c8..3a22cc61f64e1 100644 --- a/packages/grid/x-data-grid-generator/package.json +++ b/packages/grid/x-data-grid-generator/package.json @@ -38,7 +38,7 @@ "lru-cache": "^7.18.3" }, "devDependencies": { - "@types/chance": "^1.1.4", + "@types/chance": "^1.1.5", "@types/lru-cache": "^7.10.9" }, "peerDependencies": { diff --git a/yarn.lock b/yarn.lock index 98516f020bf6b..1d54d16a726e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2778,10 +2778,10 @@ resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.9.tgz#144d762491967db8c6dea38e03d2206c2623feec" integrity sha512-69TtiDzu0bcmKQv3yg1Zx409/Kd7r0b5F1PfpYJfSHzLGtB53547V4u+9iqKYsTu/O2ai6KTb0TInNpvuQ3qmg== -"@types/chance@^1.1.4": - version "1.1.4" - resolved "https://registry.yarnpkg.com/@types/chance/-/chance-1.1.4.tgz#bdb4f5b36ed7622640b597720e8affbfaa7bbfd7" - integrity sha512-et3alUWI9jEPnGai+QRCyDdRMYS+atq32IaldWURyxPRZBYg+cSwppxK2UHnDv9X/0pdoxR3Ufbz5hRmjD/uNg== +"@types/chance@^1.1.5": + version "1.1.5" + resolved "https://registry.yarnpkg.com/@types/chance/-/chance-1.1.5.tgz#c851fce6e7ed118b71322ad4efd90f5c5147b0af" + integrity sha512-aeEqLplovJlvHzbb9pFJw/pe7iGjPnhDFQmQ4MOoShCm3N09rCpU++A0WPCSavcMXAzc91ofRy3vXbIqLzn1aw== "@types/cheerio@*": version "0.22.30" From de701422ad2dd2ce0611b1eced52686290ce550f Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 10:55:46 +0300 Subject: [PATCH 183/262] Bump @types/doctrine to ^0.0.8 (#10754) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/package.json b/docs/package.json index 15d6d27d45bc3..3fce51bda1a51 100644 --- a/docs/package.json +++ b/docs/package.json @@ -92,7 +92,7 @@ "devDependencies": { "@babel/plugin-transform-react-constant-elements": "^7.22.5", "@babel/preset-typescript": "^7.23.2", - "@types/doctrine": "^0.0.7", + "@types/doctrine": "^0.0.8", "@types/stylis": "^4.2.0", "cpy-cli": "^5.0.0", "gm": "^1.25.0", diff --git a/yarn.lock b/yarn.lock index 1d54d16a726e1..bc59c9fbadbdf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2834,10 +2834,10 @@ resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819" integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg== -"@types/doctrine@^0.0.7": - version "0.0.7" - resolved "https://registry.yarnpkg.com/@types/doctrine/-/doctrine-0.0.7.tgz#39b67ff31c6eb5883024eef385afe95f34159cdb" - integrity sha512-M7BAOsy3VDlJktK4ZTg9eiI7J/9lzECY1H8Kes+U/dCu8fOc6067Fn25XBjVCfPc2Vi1Tv8b6sM7AoDGfLzXaA== +"@types/doctrine@^0.0.8": + version "0.0.8" + resolved "https://registry.yarnpkg.com/@types/doctrine/-/doctrine-0.0.8.tgz#e6d6572ddc6f424aef73245cf411724e225dfa11" + integrity sha512-mGinUwtyZsYnU2ana2wyteVHD0PFPukcZMOZWMtSRJBTFMirYy6RlV286CjttvPoNYYgW9jWf0MXKniV7f2oVw== "@types/enzyme@^3.10.12": version "3.10.12" From 79e201e1ffdfa96080a1cb5a5764da42aff8f608 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 10:56:22 +0300 Subject: [PATCH 184/262] Bump @types/format-util to ^1.0.3 (#10755) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/grid/x-data-grid-premium/package.json | 2 +- packages/grid/x-data-grid-pro/package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/grid/x-data-grid-premium/package.json b/packages/grid/x-data-grid-premium/package.json index 22ccb7d923950..d4b06e1ce57d2 100644 --- a/packages/grid/x-data-grid-premium/package.json +++ b/packages/grid/x-data-grid-premium/package.json @@ -47,7 +47,7 @@ "@mui/x-data-grid": "6.16.3", "@mui/x-data-grid-pro": "6.16.3", "@mui/x-license-pro": "6.10.2", - "@types/format-util": "^1.0.2", + "@types/format-util": "^1.0.3", "clsx": "^2.0.0", "exceljs": "^4.3.0", "prop-types": "^15.8.1", diff --git a/packages/grid/x-data-grid-pro/package.json b/packages/grid/x-data-grid-pro/package.json index 22d52a0dc578f..249ad5a0b7d0f 100644 --- a/packages/grid/x-data-grid-pro/package.json +++ b/packages/grid/x-data-grid-pro/package.json @@ -46,7 +46,7 @@ "@mui/utils": "^5.14.14", "@mui/x-data-grid": "6.16.3", "@mui/x-license-pro": "6.10.2", - "@types/format-util": "^1.0.2", + "@types/format-util": "^1.0.3", "clsx": "^2.0.0", "prop-types": "^15.8.1", "reselect": "^4.1.8" diff --git a/yarn.lock b/yarn.lock index bc59c9fbadbdf..9ea4a0177d86a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2868,10 +2868,10 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2" integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ== -"@types/format-util@^1.0.2": - version "1.0.2" - resolved "https://registry.yarnpkg.com/@types/format-util/-/format-util-1.0.2.tgz#7d19feb1caf59b6ea99c83dfe795ffa3f06b87d7" - integrity sha512-9SrLCpgzWo2yHHhiMOX0WwgDh37nSbDbWUsRc1ss++o8O97E3tB6SJiyUQM21UeUsKvZNuhDCmkRaINZ4uJAfg== +"@types/format-util@^1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@types/format-util/-/format-util-1.0.3.tgz#076bf463d4a08d4f0fef3a90ba293fb0bd687bb6" + integrity sha512-Zs8j1fJtFwgidkq+ssW6sdQovx7kDBf5A1qsUf0khLjoqRVhIDNScYUjQVn8qe6WwTbI2IHVv4R1HmnIWzwYog== "@types/history@*", "@types/history@^4.7.11": version "4.7.11" From d729245e2b59d806100ff9c61defaf8e04eb3acd Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 10:56:52 +0300 Subject: [PATCH 185/262] Bump @types/lodash to ^4.14.200 (#10756) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/package.json b/docs/package.json index 3fce51bda1a51..1e1714c650b5b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -36,7 +36,7 @@ "@mui/utils": "^5.14.14", "@react-spring/web": "^9.7.3", "@trendmicro/react-interpolate": "^0.5.5", - "@types/lodash": "^4.14.199", + "@types/lodash": "^4.14.200", "@types/moment-hijri": "^2.1.1", "@types/react-dom": "^18.2.14", "@types/react-router-dom": "^5.3.3", diff --git a/yarn.lock b/yarn.lock index 9ea4a0177d86a..7598b987144c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2918,10 +2918,10 @@ dependencies: "@types/node" "*" -"@types/lodash@^4.14.199": - version "4.14.199" - resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.199.tgz#c3edb5650149d847a277a8961a7ad360c474e9bf" - integrity sha512-Vrjz5N5Ia4SEzWWgIVwnHNEnb1UE1XMkvY5DGXrAeOGE9imk0hgTHh5GyDjLDJi9OTCn9oo9dXH1uToK1VRfrg== +"@types/lodash@^4.14.200": + version "4.14.200" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.200.tgz#435b6035c7eba9cdf1e039af8212c9e9281e7149" + integrity sha512-YI/M/4HRImtNf3pJgbF+W6FrXovqj+T+/HpENLTooK9PnkacBsDpeP3IpHab40CClUfhNmdM2WTNP2sa2dni5Q== "@types/lru-cache@^7.10.9": version "7.10.10" From 7e9aecc4d3ca33328aa73b9f6c06a043048dbeec Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 10:57:27 +0300 Subject: [PATCH 186/262] Bump @types/luxon to ^3.3.3 (#10757) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/x-date-pickers-pro/package.json | 2 +- packages/x-date-pickers/package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index 13b587b2d46d9..853e2ecca861f 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -95,7 +95,7 @@ } }, "devDependencies": { - "@types/luxon": "^3.3.2", + "@types/luxon": "^3.3.3", "date-fns": "^2.30.0", "dayjs": "^1.11.10", "luxon": "^3.4.3", diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index f25f1f75ebab9..4950ec8e2e4b6 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -97,7 +97,7 @@ } }, "devDependencies": { - "@types/luxon": "^3.3.2", + "@types/luxon": "^3.3.3", "@types/moment-jalaali": "^0.7.7", "date-fns": "^2.30.0", "date-fns-jalali": "^2.13.0-0", diff --git a/yarn.lock b/yarn.lock index 7598b987144c6..7681b951b32df 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2930,10 +2930,10 @@ dependencies: lru-cache "*" -"@types/luxon@^3.3.2": - version "3.3.2" - resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.3.2.tgz#f6e3524c2486b949a4db445e85d93c8e9886dfe2" - integrity sha512-l5cpE57br4BIjK+9BSkFBOsWtwv6J9bJpC7gdXIzZyI0vuKvNTk0wZZrkQxMGsUAuGW9+WMNWF2IJMD7br2yeQ== +"@types/luxon@^3.3.3": + version "3.3.3" + resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.3.3.tgz#b2e20a9536f91ab3e6e7895c91883e1a7ad49a6e" + integrity sha512-/BJF3NT0pRMuxrenr42emRUF67sXwcZCd+S1ksG/Fcf9O7C3kKCY4uJSbKBE4KDUIYr3WMsvfmWD8hRjXExBJQ== "@types/minimatch@^3.0.3": version "3.0.5" From 722c737e9e7fa77887fb5428c2dfac1b3fa99090 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 10:58:06 +0300 Subject: [PATCH 187/262] Bump @types/mocha to ^10.0.3 (#10758) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 1e069eee48941..aca43f8cac210 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,7 @@ "@types/chai": "^4.3.9", "@types/chai-dom": "^1.11.2", "@types/enzyme": "^3.10.12", - "@types/mocha": "^10.0.2", + "@types/mocha": "^10.0.3", "@types/node": "^18.18.6", "@types/prettier": "^2.7.3", "@types/react": "^18.2.29", diff --git a/yarn.lock b/yarn.lock index 7681b951b32df..39c171cdfe9e5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2945,10 +2945,10 @@ resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c" integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ== -"@types/mocha@^10.0.2": - version "10.0.2" - resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.2.tgz#96d63314255540a36bf24da094cce7a13668d73b" - integrity sha512-NaHL0+0lLNhX6d9rs+NSt97WH/gIlRHmszXbQ/8/MV/eVcFNdeJ/GYhrFuUc8K7WuPhRhTSdMkCp8VMzhUq85w== +"@types/mocha@^10.0.3": + version "10.0.3" + resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.3.tgz#4804fe9cd39da26eb62fa65c15ea77615a187812" + integrity sha512-RsOPImTriV/OE4A9qKjMtk2MnXiuLLbcO3nCXK+kvq4nr0iMfFgpjaX3MPLb6f7+EL1FGSelYvuJMV6REH+ZPQ== "@types/moment-hijri@^2.1.1": version "2.1.1" From 3eb156cc91dce02f6113aa594b0e5e0a6d262d2a Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 10:58:54 +0300 Subject: [PATCH 188/262] Bump @types/react to ^18.2.33 (#10761) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index aca43f8cac210..345bc518db501 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "@types/mocha": "^10.0.3", "@types/node": "^18.18.6", "@types/prettier": "^2.7.3", - "@types/react": "^18.2.29", + "@types/react": "^18.2.33", "@types/react-dom": "^18.2.14", "@types/react-test-renderer": "^18.0.3", "@types/requestidlecallback": "^0.3.5", diff --git a/yarn.lock b/yarn.lock index 39c171cdfe9e5..bba78e03a8cf1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3027,10 +3027,10 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^18.2.29": - version "18.2.29" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.29.tgz#88b48a287e00f6fdcd6f95662878fb701ae18b27" - integrity sha512-Z+ZrIRocWtdD70j45izShRwDuiB4JZqDegqMFW/I8aG5DxxLKOzVNoq62UIO82v9bdgi+DO1jvsb9sTEZUSm+Q== +"@types/react@*", "@types/react@^18.2.33": + version "18.2.33" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.33.tgz#055356243dc4350a9ee6c6a2c07c5cae12e38877" + integrity sha512-v+I7S+hu3PIBoVkKGpSYYpiBT1ijqEzWpzQD62/jm4K74hPpSP7FF9BnKG6+fg2+62weJYkkBWDJlZt5JO/9hg== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" From abcde6e770c291ce0c2942b5f213e233a47a9654 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 11:00:41 +0300 Subject: [PATCH 189/262] Bump @types/react-test-renderer to ^18.0.5 (#10762) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 345bc518db501..759b9dffc9836 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,7 @@ "@types/prettier": "^2.7.3", "@types/react": "^18.2.33", "@types/react-dom": "^18.2.14", - "@types/react-test-renderer": "^18.0.3", + "@types/react-test-renderer": "^18.0.5", "@types/requestidlecallback": "^0.3.5", "@types/sinon": "^10.0.19", "@types/yargs": "^17.0.29", diff --git a/yarn.lock b/yarn.lock index bba78e03a8cf1..001f752a06c46 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3013,10 +3013,10 @@ "@types/history" "*" "@types/react" "*" -"@types/react-test-renderer@^18.0.3": - version "18.0.3" - resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.3.tgz#67922bf5e5f0096581b1efd67dcdeabdd400cfea" - integrity sha512-4wcNLnY6nIT+L6g94CpzL4CXX2P18JvKPU9CDlaHr3DnbP3GiaQLhDotJqjWlVqOcE4UhLRjp0MtxqwuNKONnA== +"@types/react-test-renderer@^18.0.5": + version "18.0.5" + resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.5.tgz#b67a6ff37acd93d1b971ec4c838f69d52e772db0" + integrity sha512-PsnmF4Hpi61PTRX+dTxkjgDdtZ09kFFgPXczoF+yBfOVxn7xBLPvKP1BUrSasYHmerj33rhoJuvpIMsJuyRqHw== dependencies: "@types/react" "*" From 0a7d797d0da1087d8bf7109edbcd3b29a10d9d5a Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 11:06:17 +0300 Subject: [PATCH 190/262] Bump @types/sinon to ^10.0.20 (#10765) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 759b9dffc9836..cbfe1edc346b1 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "@types/react-dom": "^18.2.14", "@types/react-test-renderer": "^18.0.5", "@types/requestidlecallback": "^0.3.5", - "@types/sinon": "^10.0.19", + "@types/sinon": "^10.0.20", "@types/yargs": "^17.0.29", "@typescript-eslint/eslint-plugin": "^6.7.5", "@typescript-eslint/parser": "^6.7.5", diff --git a/yarn.lock b/yarn.lock index 001f752a06c46..38196e1e373fa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3058,10 +3058,10 @@ resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a" integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw== -"@types/sinon@^10.0.19": - version "10.0.19" - resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-10.0.19.tgz#752b752bc40bb5af0bb1aec29bde49b139b91d35" - integrity sha512-MWZNGPSchIdDfb5FL+VFi4zHsHbNOTQEgjqFQk7HazXSXwUU9PAX3z9XBqb3AJGYr9YwrtCtaSMsT3brYsN/jQ== +"@types/sinon@^10.0.20": + version "10.0.20" + resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-10.0.20.tgz#f1585debf4c0d99f9938f4111e5479fb74865146" + integrity sha512-2APKKruFNCAZgx3daAyACGzWuJ028VVCUDk6o2rw/Z4PXT0ogwdV4KUegW0MwVs0Zu59auPXbbuBJHF12Sx1Eg== dependencies: "@types/sinonjs__fake-timers" "*" From 5fb4280ef15a55770ebb877c921829499e108af7 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 11:07:20 +0300 Subject: [PATCH 191/262] Bump D3 (#10766) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/x-charts/package.json | 6 +++--- yarn.lock | 24 ++++++++++++------------ 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index d4ecc7a251d6d..c6dfc97ed6c89 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -65,9 +65,9 @@ } }, "devDependencies": { - "@types/d3-color": "^3.1.1", - "@types/d3-scale": "^4.0.5", - "@types/d3-shape": "^3.1.3" + "@types/d3-color": "^3.1.2", + "@types/d3-scale": "^4.0.6", + "@types/d3-shape": "^3.1.4" }, "exports": { ".": { diff --git a/yarn.lock b/yarn.lock index 38196e1e373fa..1a420213987f9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2805,27 +2805,27 @@ resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.12.tgz#6b2c510a7ad7039e98e7b8d3d6598f4359e5c080" integrity sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw== -"@types/d3-color@^3.1.1": - version "3.1.1" - resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.1.tgz#43a2aa7836fdae19ce32fabe97742e787f4b2e08" - integrity sha512-CSAVrHAtM9wfuLJ2tpvvwCU/F22sm7rMHNN+yh9D6O6hyAms3+O0cgMpC1pm6UEUMOntuZC8bMt74PteiDUdCg== +"@types/d3-color@^3.1.2": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.2.tgz#7939eed011a908287cd1bcfd11580c17b2ac7f8a" + integrity sha512-At+Ski7dL8Bs58E8g8vPcFJc8tGcaC12Z4m07+p41+DRqnZQcAlp3NfYjLrhNYv+zEyQitU1CUxXNjqUyf+c0g== "@types/d3-path@*": version "3.0.0" resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.0.0.tgz#939e3a784ae4f80b1fde8098b91af1776ff1312b" integrity sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg== -"@types/d3-scale@^4.0.5": - version "4.0.5" - resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.5.tgz#daa4faa5438315a37a1f5eb1bcdc5aeb3d3e5a2d" - integrity sha512-w/C++3W394MHzcLKO2kdsIn5KKNTOqeQVzyPSGPLzQbkPw/jpeaGtSRlakcKevGgGsjJxGsbqS0fPrVFDbHrDA== +"@types/d3-scale@^4.0.6": + version "4.0.6" + resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.6.tgz#9d221949f37b90b52696ec99f9b1e972d55fe10d" + integrity sha512-lo3oMLSiqsQUovv8j15X4BNEDOsnHuGjeVg7GRbAuB2PUa1prK5BNSOu6xixgNf3nqxPl4I1BqJWrPvFGlQoGQ== dependencies: "@types/d3-time" "*" -"@types/d3-shape@^3.1.3": - version "3.1.3" - resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.3.tgz#20eee7aad70f2562041af18e305fec6b48fd511d" - integrity sha512-cHMdIq+rhF5IVwAV7t61pcEXfEHsEsrbBUPkFGBwTXuxtTAkBBrnrNA8++6OWm3jwVsXoZYQM8NEekg6CPJ3zw== +"@types/d3-shape@^3.1.4": + version "3.1.4" + resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.4.tgz#748a256d5e499cdfb3e48beca9c557f3ea0ff15c" + integrity sha512-M2/xsWPsjaZc5ifMKp1EBp0gqJG0eO/zlldJNOC85Y/5DGsBQ49gDkRJ2h5GY7ZVD6KUumvZWsylSbvTaJTqKg== dependencies: "@types/d3-path" "*" From c8891f5b969652f9c277e402033b17b526fe7d16 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 11:09:40 +0300 Subject: [PATCH 192/262] Bump GitHub Actions (#10767) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .github/workflows/codeql.yml | 4 ++-- .github/workflows/l10n.yml | 2 +- .github/workflows/priority-support-validation-prompt.yml | 4 ++-- .github/workflows/scorecards.yml | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 529079e894c61..ec1aff6dd40c7 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -19,7 +19,7 @@ jobs: uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@0116bc2df50751f9724a2e35ef1f24d22f90e4e1 # v2.22.3 + uses: github/codeql-action/init@49abf0ba24d0b7953cb586944e918a0b92074c80 # v2.22.4 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@0116bc2df50751f9724a2e35ef1f24d22f90e4e1 # v2.22.3 + uses: github/codeql-action/analyze@49abf0ba24d0b7953cb586944e918a0b92074c80 # v2.22.4 diff --git a/.github/workflows/l10n.yml b/.github/workflows/l10n.yml index e074497334012..38e190c28e9bc 100644 --- a/.github/workflows/l10n.yml +++ b/.github/workflows/l10n.yml @@ -19,7 +19,7 @@ jobs: - run: echo "${{ github.actor }}" - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Use Node.js 18.x - uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1 + uses: actions/setup-node@1a4442cacd436585916779262731d5b162bc6ec7 # v3.8.2 with: node-version: 18 cache: 'yarn' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies diff --git a/.github/workflows/priority-support-validation-prompt.yml b/.github/workflows/priority-support-validation-prompt.yml index 82001e424d2aa..cfb435293944a 100644 --- a/.github/workflows/priority-support-validation-prompt.yml +++ b/.github/workflows/priority-support-validation-prompt.yml @@ -25,7 +25,7 @@ jobs: - name: Create comment if: ${{ steps.findComment.outputs.comment-id == '' && contains(github.event.label.name, 'unknown') }} - uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa # v3.0.2 + uses: peter-evans/create-or-update-comment@23ff15729ef2fc348714a3bb66d2f655ca9066f2 # v3.1.0 with: issue-number: ${{ github.event.issue.number }} body: | @@ -39,7 +39,7 @@ jobs: - name: Update comment if: ${{ steps.findComment.outputs.comment-id != '' && contains(github.event.label.name, 'priority') }} - uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa # v3.0.2 + uses: peter-evans/create-or-update-comment@23ff15729ef2fc348714a3bb66d2f655ca9066f2 # v3.1.0 with: comment-id: ${{ steps.findComment.outputs.comment-id }} body: | diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index 5872829690efd..983d20b9b9295 100644 --- a/.github/workflows/scorecards.yml +++ b/.github/workflows/scorecards.yml @@ -28,7 +28,7 @@ jobs: persist-credentials: false - name: Run analysis - uses: ossf/scorecard-action@483ef80eb98fb506c348f7d62e28055e49fe2398 # v2.3.0 + uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736 # v2.3.1 with: results_file: results.sarif results_format: sarif @@ -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@0116bc2df50751f9724a2e35ef1f24d22f90e4e1 # v2.22.3 + uses: github/codeql-action/upload-sarif@49abf0ba24d0b7953cb586944e918a0b92074c80 # v2.22.4 with: sarif_file: results.sarif From 774c4f17f2ed7b9e144f7860a8a4493e9ad61310 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 11:10:23 +0300 Subject: [PATCH 193/262] Bump concurrently to ^8.2.2 (#10768) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index cbfe1edc346b1..7c9c36a187842 100644 --- a/package.json +++ b/package.json @@ -119,7 +119,7 @@ "chai": "^4.3.10", "chai-dom": "^1.11.0", "compression-webpack-plugin": "^10.0.0", - "concurrently": "^8.2.1", + "concurrently": "^8.2.2", "cross-env": "^7.0.3", "danger": "^11.3.0", "enzyme": "^3.11.0", diff --git a/yarn.lock b/yarn.lock index 1a420213987f9..5f95ecd0d8977 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4976,10 +4976,10 @@ concat-stream@^2.0.0: readable-stream "^3.0.2" typedarray "^0.0.6" -concurrently@^8.2.1: - version "8.2.1" - resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-8.2.1.tgz#bcab9cacc38c23c503839583151e0fa96fd5b584" - integrity sha512-nVraf3aXOpIcNud5pB9M82p1tynmZkrSGQ1p6X/VY8cJ+2LMVqAgXsJxYYefACSHbTYlm92O1xuhdGTjwoEvbQ== +concurrently@^8.2.2: + version "8.2.2" + resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-8.2.2.tgz#353141985c198cfa5e4a3ef90082c336b5851784" + integrity sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg== dependencies: chalk "^4.1.2" date-fns "^2.30.0" From 76cb55e4ab84ba12cb055bd543df519aecafbfc7 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 11:11:54 +0300 Subject: [PATCH 194/262] Bump sinon to ^16.1.3 (#10769) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 7c9c36a187842..29247914eb217 100644 --- a/package.json +++ b/package.json @@ -161,7 +161,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "serve": "^14.2.1", - "sinon": "^16.1.0", + "sinon": "^16.1.3", "stream-browserify": "^3.0.0", "string-replace-loader": "^3.1.0", "typescript": "^5.2.2", diff --git a/yarn.lock b/yarn.lock index 5f95ecd0d8977..4adfb167a3106 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12725,10 +12725,10 @@ simple-swizzle@^0.2.2: dependencies: is-arrayish "^0.3.1" -sinon@^16.1.0: - version "16.1.0" - resolved "https://registry.yarnpkg.com/sinon/-/sinon-16.1.0.tgz#645b836563c9bedb21defdbe48831cb2afb687f2" - integrity sha512-ZSgzF0vwmoa8pq0GEynqfdnpEDyP1PkYmEChnkjW0Vyh8IDlyFEJ+fkMhCP0il6d5cJjPl2PUsnUSAuP5sttOQ== +sinon@^16.1.3: + version "16.1.3" + resolved "https://registry.yarnpkg.com/sinon/-/sinon-16.1.3.tgz#b760ddafe785356e2847502657b4a0da5501fba8" + integrity sha512-mjnWWeyxcAf9nC0bXcPmiDut+oE8HYridTNzBbF98AYVLmWwGRp2ISEpyhYflG1ifILT+eNn3BmKUJPxjXUPlA== dependencies: "@sinonjs/commons" "^3.0.0" "@sinonjs/fake-timers" "^10.3.0" From 1ee30045676cee7aca4c398786f4d2b02fc5e1fa Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 10:14:30 +0200 Subject: [PATCH 195/262] Bump @types/moment-hijri to ^2.1.2 (#10759) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/package.json b/docs/package.json index 1e1714c650b5b..ec4663d39fe5a 100644 --- a/docs/package.json +++ b/docs/package.json @@ -37,7 +37,7 @@ "@react-spring/web": "^9.7.3", "@trendmicro/react-interpolate": "^0.5.5", "@types/lodash": "^4.14.200", - "@types/moment-hijri": "^2.1.1", + "@types/moment-hijri": "^2.1.2", "@types/react-dom": "^18.2.14", "@types/react-router-dom": "^5.3.3", "ast-types": "^0.14.2", diff --git a/yarn.lock b/yarn.lock index 4adfb167a3106..da72bd537c6e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2950,10 +2950,10 @@ resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.3.tgz#4804fe9cd39da26eb62fa65c15ea77615a187812" integrity sha512-RsOPImTriV/OE4A9qKjMtk2MnXiuLLbcO3nCXK+kvq4nr0iMfFgpjaX3MPLb6f7+EL1FGSelYvuJMV6REH+ZPQ== -"@types/moment-hijri@^2.1.1": - version "2.1.1" - resolved "https://registry.yarnpkg.com/@types/moment-hijri/-/moment-hijri-2.1.1.tgz#c7398ab4b734498b745a26d524f96bced00f6082" - integrity sha512-Pj30rsxZvPCaNj9BjCZrGMaldJRVmKSLaLByNZNwt50A5PyjXSwTvG6Wjn9iLNLpfWaH2IGtNiKGCGA9/Zr5hA== +"@types/moment-hijri@^2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@types/moment-hijri/-/moment-hijri-2.1.2.tgz#d416eaebf337e920c6328504a15a6beec2d13776" + integrity sha512-6VrmS3qmOHs+h1WlH0EqTlPu9JP/Tb1pokXecj8cfa0C+avsjit7QYx7aZWHEB7suXazC6n/qUMvhIgH3A0D1A== dependencies: moment ">=2.14.0" From abed710a868e1a65acbf9f8ed1a39b1db2cf140a Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 15:16:43 +0700 Subject: [PATCH 196/262] Bump @types/moment-jalaali to ^0.7.8 (#10760) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/x-date-pickers/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 4950ec8e2e4b6..d99252ccae9e3 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -98,7 +98,7 @@ }, "devDependencies": { "@types/luxon": "^3.3.3", - "@types/moment-jalaali": "^0.7.7", + "@types/moment-jalaali": "^0.7.8", "date-fns": "^2.30.0", "date-fns-jalali": "^2.13.0-0", "dayjs": "^1.11.10", diff --git a/yarn.lock b/yarn.lock index da72bd537c6e9..822e6f48f7744 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2957,10 +2957,10 @@ dependencies: moment ">=2.14.0" -"@types/moment-jalaali@^0.7.7": - version "0.7.7" - resolved "https://registry.yarnpkg.com/@types/moment-jalaali/-/moment-jalaali-0.7.7.tgz#a4702b58c9a91eefc626a892b90a5fe54c223178" - integrity sha512-uHIAS11LL/heP3JZci3InxRkqvQU8v+sm5BUWcauqL/HUrcFWqDMzmdf8bVho8ZG5Uryekx17/0CW3Vh9unB8g== +"@types/moment-jalaali@^0.7.8": + version "0.7.8" + resolved "https://registry.yarnpkg.com/@types/moment-jalaali/-/moment-jalaali-0.7.8.tgz#42ab59989928c94207aff35e5d834f55c2b8bdb0" + integrity sha512-Yfbgpos2bZBlSclui5iccntZ06eBUnSDypKbZwt9PENPv4Jpl1DHsvsd3XCgWGd9AC4gcHDeInsR8nCv9Sx+vA== dependencies: moment ">=2.14.0" From 6c4986ef4b6d09002b45bb8b68bd850dc42d0097 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 10:22:49 +0200 Subject: [PATCH 197/262] Bump @types/requestidlecallback to ^0.3.6 (#10764) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 29247914eb217..96bdaf1205ebc 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "@types/react": "^18.2.33", "@types/react-dom": "^18.2.14", "@types/react-test-renderer": "^18.0.5", - "@types/requestidlecallback": "^0.3.5", + "@types/requestidlecallback": "^0.3.6", "@types/sinon": "^10.0.20", "@types/yargs": "^17.0.29", "@typescript-eslint/eslint-plugin": "^6.7.5", diff --git a/yarn.lock b/yarn.lock index 822e6f48f7744..8d7c8147d7e1d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3036,10 +3036,10 @@ "@types/scheduler" "*" csstype "^3.0.2" -"@types/requestidlecallback@^0.3.5": - version "0.3.5" - resolved "https://registry.yarnpkg.com/@types/requestidlecallback/-/requestidlecallback-0.3.5.tgz#132529751a4717fe7dc55fef5e930336f229543c" - integrity sha512-Uh49VrVTPfU0y/qIvXXYuRmd/sKLfVgQWZU1t8FWH22AIJyQbCei1aSmXdMDAijwGUFhBDpJmksiHEDsfiE/cg== +"@types/requestidlecallback@^0.3.6": + version "0.3.6" + resolved "https://registry.yarnpkg.com/@types/requestidlecallback/-/requestidlecallback-0.3.6.tgz#96a4b1eaa7587170fff72a8277d5ddce3c15c4db" + integrity sha512-0KKbiCnbiEMX0C6sDCF/K8qHrbb9N/Eg/gTAwcb+fW37AsherVgrINKr9oCnTphONaQvEb7k7hQLrS2TPw1pIA== "@types/responselike@*", "@types/responselike@^1.0.0": version "1.0.0" From f4ce1381e016239dcd365b50f518233a2b284e53 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Thu, 26 Oct 2023 12:19:26 +0200 Subject: [PATCH 198/262] [charts] Support lines with different domain (#10801) Co-authored-by: Lukas Co-authored-by: Flavien DELANGLE --- docs/data/charts/lines/DifferentLength.js | 24 +++++++++++ docs/data/charts/lines/DifferentLength.tsx | 24 +++++++++++ docs/data/charts/lines/lines.md | 27 ++++++++++++ packages/x-charts/src/BarChart/formatter.ts | 2 +- .../ChartsAxisTooltipContent.tsx | 32 +++++++++------ packages/x-charts/src/LineChart/AreaPlot.tsx | 25 +++++++---- .../src/LineChart/LineHighlightPlot.tsx | 3 +- packages/x-charts/src/LineChart/LinePlot.tsx | 28 +++++++------ packages/x-charts/src/LineChart/MarkPlot.tsx | 41 ++++++++++++------- packages/x-charts/src/LineChart/formatter.ts | 9 ++-- .../x-charts/src/models/seriesType/line.ts | 2 +- 11 files changed, 162 insertions(+), 55 deletions(-) create mode 100644 docs/data/charts/lines/DifferentLength.js create mode 100644 docs/data/charts/lines/DifferentLength.tsx diff --git a/docs/data/charts/lines/DifferentLength.js b/docs/data/charts/lines/DifferentLength.js new file mode 100644 index 0000000000000..5c39fd39d8286 --- /dev/null +++ b/docs/data/charts/lines/DifferentLength.js @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +export default function DifferentLength() { + return ( + (value == null ? 'NaN' : value.toString()), + }, + { + data: [null, null, null, null, 5.5, 2, 8.5, 1.5, 5], + }, + { + data: [7, 8, 5, 4, null, null, 2, 5.5, 1], + valueFormatter: (value) => (value == null ? '?' : value.toString()), + }, + ]} + height={300} + /> + ); +} diff --git a/docs/data/charts/lines/DifferentLength.tsx b/docs/data/charts/lines/DifferentLength.tsx new file mode 100644 index 0000000000000..5c39fd39d8286 --- /dev/null +++ b/docs/data/charts/lines/DifferentLength.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +export default function DifferentLength() { + return ( + (value == null ? 'NaN' : value.toString()), + }, + { + data: [null, null, null, null, 5.5, 2, 8.5, 1.5, 5], + }, + { + data: [7, 8, 5, 4, null, null, 2, 5.5, 1], + valueFormatter: (value) => (value == null ? '?' : value.toString()), + }, + ]} + height={300} + /> + ); +} diff --git a/docs/data/charts/lines/lines.md b/docs/data/charts/lines/lines.md index 9a0cafc30e635..c8c4858e32fac 100644 --- a/docs/data/charts/lines/lines.md +++ b/docs/data/charts/lines/lines.md @@ -52,6 +52,33 @@ By default, they are stacked in the order you defined them, with positive values For more information, see [stacking docs](/x/react-charts/stacking/). +## Partial data + +Line series can have less data than the axis. +You can handle lines with partial data or data starting at different points by providing `null` values. + +By default, the tooltip does not show series if they have no value. +To override this behavior, use the `valueFormatter` to return a string if the value is `null` or `undefined`. + +{{"demo": "DifferentLength.js"}} + +:::info +When series data length is smaller than the axis one, overflowing values are `undefined` and not `null`. + +The following code plots a line for x between 2 and 4. + +- For x<2, values are set to `null` and then not shown. +- For x>4, values are set to `undefined` and then not shown. + +```jsx + +``` + +::: + ## Styling ### Interpolation diff --git a/packages/x-charts/src/BarChart/formatter.ts b/packages/x-charts/src/BarChart/formatter.ts index 36cd67328f1da..8850ffc1f0619 100644 --- a/packages/x-charts/src/BarChart/formatter.ts +++ b/packages/x-charts/src/BarChart/formatter.ts @@ -61,7 +61,7 @@ const formatter: Formatter<'bar'> = (params, dataset) => { return { seriesOrder, stackingGroups, - series: defaultizeValueFormatter(completedSeries, (v) => v.toLocaleString()), + series: defaultizeValueFormatter(completedSeries, (v) => v?.toLocaleString()), }; }; diff --git a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx index 4acec2ad1f1be..16ae820abcc07 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx @@ -68,21 +68,27 @@ export function DefaultChartsAxisContent(props: ChartsAxisContentProps) { )} - {series.map(({ color, id, label, valueFormatter, data }: ChartSeriesDefaultized) => ( - - - - + {series.map(({ color, id, label, valueFormatter, data }: ChartSeriesDefaultized) => { + const formattedValue = valueFormatter(data[dataIndex]); + if (formattedValue == null) { + return null; + } + return ( + + + + - - {label ? {label} : null} - + + {label ? {label} : null} + - - {valueFormatter(data[dataIndex])} - - - ))} + + {formattedValue} + + + ); + })} diff --git a/packages/x-charts/src/LineChart/AreaPlot.tsx b/packages/x-charts/src/LineChart/AreaPlot.tsx index 805ef1c2f6c4c..0c8de71eedc39 100644 --- a/packages/x-charts/src/LineChart/AreaPlot.tsx +++ b/packages/x-charts/src/LineChart/AreaPlot.tsx @@ -52,28 +52,37 @@ function AreaPlot(props: AreaPlotProps) { xAxisKey = defaultXAxisId, yAxisKey = defaultYAxisId, stackedData, + data, } = series[seriesId]; const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale); const yScale = yAxis[yAxisKey].scale; const xData = xAxis[xAxisKey].data; - if (xData === undefined) { - throw new Error( - `Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`, - ); + if (process.env.NODE_ENV !== 'production') { + if (xData === undefined) { + throw new Error( + `Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`, + ); + } + if (xData.length < stackedData.length) { + throw new Error( + `MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`, + ); + } } const areaPath = d3Area<{ x: any; - y: any[]; + y: [number, number]; }>() .x((d) => xScale(d.x)) - .y0((d) => yScale(d.y[0])) - .y1((d) => yScale(d.y[1])); + .defined((_, i) => data[i] != null) + .y0((d) => d.y && yScale(d.y[0])) + .y1((d) => d.y && yScale(d.y[1])); const curve = getCurveFactory(series[seriesId].curve); - const d3Data = xData?.map((x, index) => ({ x, y: stackedData[index] })); + const d3Data = xData?.map((x, index) => ({ x, y: stackedData[index] })) ?? []; return ( !!series[seriesId].area && ( diff --git a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx index 5f2d2f5c50421..1feab1b549797 100644 --- a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx +++ b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx @@ -67,10 +67,11 @@ function LineHighlightPlot(props: LineHighlightPlotProps) { xAxisKey = defaultXAxisId, yAxisKey = defaultYAxisId, stackedData, + data, disableHighlight, } = series[seriesId]; - if (disableHighlight) { + if (disableHighlight || data[highlightedIndex] == null) { return null; } const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale); diff --git a/packages/x-charts/src/LineChart/LinePlot.tsx b/packages/x-charts/src/LineChart/LinePlot.tsx index a950163ed7a75..82109f3b8d7df 100644 --- a/packages/x-charts/src/LineChart/LinePlot.tsx +++ b/packages/x-charts/src/LineChart/LinePlot.tsx @@ -50,34 +50,36 @@ function LinePlot(props: LinePlotProps) { xAxisKey = defaultXAxisId, yAxisKey = defaultYAxisId, stackedData, + data, } = series[seriesId]; const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale); const yScale = yAxis[yAxisKey].scale; const xData = xAxis[xAxisKey].data; - if (xData === undefined) { - throw new Error( - `Axis of id "${xAxisKey}" should have data property to be able to display a line plot`, - ); + if (process.env.NODE_ENV !== 'production') { + if (xData === undefined) { + throw new Error( + `Axis of id "${xAxisKey}" should have data property to be able to display a line plot`, + ); + } + if (xData.length < stackedData.length) { + throw new Error( + `MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`, + ); + } } const linePath = d3Line<{ x: any; - y: any[]; + y: [number, number]; }>() .x((d) => xScale(d.x)) + .defined((_, i) => data[i] != null) .y((d) => yScale(d.y[1])); - if (process.env.NODE_ENV !== 'production') { - if (xData.length !== stackedData.length) { - throw new Error( - `MUI: data length of the x axis (${xData.length} items) does not match length of series (${stackedData.length} items)`, - ); - } - } const curve = getCurveFactory(series[seriesId].curve); - const d3Data = xData?.map((x, index) => ({ x, y: stackedData[index] ?? [0, 0] })); + const d3Data = xData?.map((x, index) => ({ x, y: stackedData[index] })) ?? []; return ( { - const y = stackedData[index][1]; + const value = data[index] == null ? null : stackedData[index][1]; return { x: xScale(x), - y: yScale(y), + y: value === null ? null : yScale(value), position: x, - value: y, + value, index, }; }) - .filter(isInRange) - .map(({ x, y, index, position, value }) => { - return showMark === true || - showMark({ - x, - y, - index, - position, - value, - }) ? ( + .filter(({ x, y, index, position, value }) => { + if (value === null || y === null) { + // Remove missing data point + return false; + } + if (!isInRange({ x, y })) { + // Remove out of range + return false; + } + if (showMark === true) { + return true; + } + return showMark({ + x, + y, + index, + position, + value, + }); + }) + .map(({ x, y, index }) => { + return ( - ) : null; + ); }); }); })} diff --git a/packages/x-charts/src/LineChart/formatter.ts b/packages/x-charts/src/LineChart/formatter.ts index 57d1839bf33f1..e120d166f5613 100644 --- a/packages/x-charts/src/LineChart/formatter.ts +++ b/packages/x-charts/src/LineChart/formatter.ts @@ -10,7 +10,7 @@ const formatter: Formatter<'line'> = (params, dataset) => { const stackingGroups = getStackingGroups(params); // Create a data set with format adapted to d3 - const d3Dataset: { [id: string]: number }[] = dataset ?? []; + const d3Dataset: { [id: string]: number | null }[] = dataset ?? []; seriesOrder.forEach((id) => { const data = series[id].data; if (data !== undefined) { @@ -21,7 +21,7 @@ const formatter: Formatter<'line'> = (params, dataset) => { d3Dataset[index][id] = value; } }); - } else if (dataset === undefined) { + } else if (dataset === undefined && process.env.NODE_ENV !== 'production') { throw new Error( [ `MUI: line series with id='${id}' has no data.`, @@ -36,7 +36,7 @@ const formatter: Formatter<'line'> = (params, dataset) => { stackingGroups.forEach((stackingGroup) => { // Get stacked values, and derive the domain const { ids, stackingOrder, stackingOffset } = stackingGroup; - const stackedSeries = d3Stack() + const stackedSeries = d3Stack() .keys( ids.map((id) => { // Use dataKey if needed and available @@ -44,6 +44,7 @@ const formatter: Formatter<'line'> = (params, dataset) => { return series[id].data === undefined && dataKey !== undefined ? dataKey : id; }), ) + .value((d, key) => d[key] ?? 0) // defaultize null value to 0 .order(stackingOrder) .offset(stackingOffset)(d3Dataset); @@ -60,7 +61,7 @@ const formatter: Formatter<'line'> = (params, dataset) => { return { seriesOrder, stackingGroups, - series: defaultizeValueFormatter(completedSeries, (v) => v.toLocaleString()), + series: defaultizeValueFormatter(completedSeries, (v) => v?.toLocaleString()), }; }; diff --git a/packages/x-charts/src/models/seriesType/line.ts b/packages/x-charts/src/models/seriesType/line.ts index b095120c7b3f3..ec6af6efbf764 100644 --- a/packages/x-charts/src/models/seriesType/line.ts +++ b/packages/x-charts/src/models/seriesType/line.ts @@ -47,7 +47,7 @@ export interface LineSeriesType /** * Data associated to the line. */ - data?: number[]; + data?: (number | null)[]; /** * The key used to retrive data from the dataset. */ From 910b6bc6177e249b96b77f1a9bfc432251175fe5 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Thu, 26 Oct 2023 14:32:35 +0200 Subject: [PATCH 199/262] [docs] Improve recipe with `useLayoutEffect` and `beforeunload` event-listener (#10811) Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Co-authored-by: Andrew Cherniavskii --- .../state/SaveAndRestoreStateInitialState.js | 22 +++++++++++++------ .../state/SaveAndRestoreStateInitialState.tsx | 22 +++++++++++++------ ...aveAndRestoreStateInitialState.tsx.preview | 1 - docs/data/data-grid/state/state.md | 3 ++- 4 files changed, 32 insertions(+), 16 deletions(-) diff --git a/docs/data/data-grid/state/SaveAndRestoreStateInitialState.js b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.js index d0d385fe1e7b6..2418f501a73c5 100644 --- a/docs/data/data-grid/state/SaveAndRestoreStateInitialState.js +++ b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.js @@ -14,18 +14,27 @@ export default function SaveAndRestoreStateInitialState() { const [initialState, setInitialState] = React.useState(); - React.useEffect(() => { - const stateFromLocalStorage = localStorage?.getItem('dataGridState'); - setInitialState(stateFromLocalStorage ? JSON.parse(stateFromLocalStorage) : {}); - }, []); - const saveSnapshot = React.useCallback(() => { - if (apiRef?.current && localStorage) { + if (apiRef?.current?.exportState && localStorage) { const currentState = apiRef.current.exportState(); localStorage.setItem('dataGridState', JSON.stringify(currentState)); } }, [apiRef]); + React.useLayoutEffect(() => { + const stateFromLocalStorage = localStorage?.getItem('dataGridState'); + setInitialState(stateFromLocalStorage ? JSON.parse(stateFromLocalStorage) : {}); + + // handle refresh and navigating away/refreshing + window.addEventListener('beforeunload', saveSnapshot); + + return () => { + // in case of an SPA remove the event-listener + window.removeEventListener('beforeunload', saveSnapshot); + saveSnapshot(); + }; + }, [saveSnapshot]); + if (!initialState) { return ; } @@ -36,7 +45,6 @@ export default function SaveAndRestoreStateInitialState() { {...data} apiRef={apiRef} loading={loading} - onStateChange={saveSnapshot} initialState={{ ...data.initialState, ...initialState, diff --git a/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx index 7f94bcbed7f69..7be0ad68d7393 100644 --- a/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx +++ b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx @@ -15,18 +15,27 @@ export default function SaveAndRestoreStateInitialState() { const [initialState, setInitialState] = React.useState(); - React.useEffect(() => { - const stateFromLocalStorage = localStorage?.getItem('dataGridState'); - setInitialState(stateFromLocalStorage ? JSON.parse(stateFromLocalStorage) : {}); - }, []); - const saveSnapshot = React.useCallback(() => { - if (apiRef?.current && localStorage) { + if (apiRef?.current?.exportState && localStorage) { const currentState = apiRef.current.exportState(); localStorage.setItem('dataGridState', JSON.stringify(currentState)); } }, [apiRef]); + React.useLayoutEffect(() => { + const stateFromLocalStorage = localStorage?.getItem('dataGridState'); + setInitialState(stateFromLocalStorage ? JSON.parse(stateFromLocalStorage) : {}); + + // handle refresh and navigating away/refreshing + window.addEventListener('beforeunload', saveSnapshot); + + return () => { + // in case of an SPA remove the event-listener + window.removeEventListener('beforeunload', saveSnapshot); + saveSnapshot(); + }; + }, [saveSnapshot]); + if (!initialState) { return ; } @@ -37,7 +46,6 @@ export default function SaveAndRestoreStateInitialState() { {...data} apiRef={apiRef} loading={loading} - onStateChange={saveSnapshot} initialState={{ ...data.initialState, ...initialState, diff --git a/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx.preview b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx.preview index aaea3703c6eab..db90d55cdda06 100644 --- a/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx.preview +++ b/docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx.preview @@ -2,7 +2,6 @@ {...data} apiRef={apiRef} loading={loading} - onStateChange={saveSnapshot} initialState={{ ...data.initialState, ...initialState, diff --git a/docs/data/data-grid/state/state.md b/docs/data/data-grid/state/state.md index b71d383446fb5..5102914ad0d8f 100644 --- a/docs/data/data-grid/state/state.md +++ b/docs/data/data-grid/state/state.md @@ -96,7 +96,8 @@ If you restore the page using `initialState` before the data is fetched, the Dat ### Save and restore the state from external storage You can use `apiRef.current.exportState()` to save a snapshot of the state to an external storage (e.g. using `localStorage` or `redux`). -This way the state can be persisted when refreshing the page or navigating to another page. +This way the state can be persisted on refresh or navigating to another page. This is done by listening on the `beforeunload` event. +When the component is unmounted, the `useLayoutEffect` cleanup function is being used instead. {{"demo": "SaveAndRestoreStateInitialState.js", "bg": "inline", "defaultCodeOpen": false}} From 7505237c159b22d35861199d2e4113026a39334d Mon Sep 17 00:00:00 2001 From: Lukas Date: Thu, 26 Oct 2023 16:20:50 +0300 Subject: [PATCH 200/262] [pickers] Fix week day label localization (#10809) --- .../src/AdapterDateFns/AdapterDateFns.ts | 2 +- .../AdapterDateFnsJalali.ts | 2 +- .../src/AdapterDayjs/AdapterDayjs.ts | 2 +- .../src/AdapterLuxon/AdapterLuxon.ts | 2 +- .../src/DateCalendar/DayCalendar.tsx | 4 +-- .../tests/localization.DateCalendar.test.tsx | 27 +++++++++++++++++++ .../describeGregorianAdapter/testFormat.ts | 13 ++++++++- 7 files changed, 44 insertions(+), 8 deletions(-) create mode 100644 packages/x-date-pickers/src/DateCalendar/tests/localization.DateCalendar.test.tsx diff --git a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts index 7b1f5b0533822..53575f892a59e 100644 --- a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts +++ b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts @@ -138,7 +138,7 @@ const defaultFormats: AdapterFormats = { monthShort: 'MMM', dayOfMonth: 'd', weekday: 'EEEE', - weekdayShort: 'EEE', + weekdayShort: 'EEEEEE', hours24h: 'HH', hours12h: 'hh', meridiem: 'aa', diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts index 542a322b5dd6f..f114a55155b4d 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts +++ b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts @@ -138,7 +138,7 @@ const defaultFormats: AdapterFormats = { monthShort: 'MMM', dayOfMonth: 'd', weekday: 'EEEE', - weekdayShort: 'EEE', + weekdayShort: 'EEEEEE', hours24h: 'HH', hours12h: 'hh', meridiem: 'aa', diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts index 80d3921829f2b..85bf90432ae7e 100644 --- a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts +++ b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts @@ -75,7 +75,7 @@ const defaultFormats: AdapterFormats = { monthShort: 'MMM', dayOfMonth: 'D', weekday: 'dddd', - weekdayShort: 'ddd', + weekdayShort: 'dd', hours24h: 'HH', hours12h: 'hh', meridiem: 'A', diff --git a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts index 8e817cd740ecb..60cdfa0341844 100644 --- a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts +++ b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts @@ -62,7 +62,7 @@ const defaultFormats: AdapterFormats = { monthShort: 'MMM', dayOfMonth: 'd', weekday: 'cccc', - weekdayShort: 'ccc', + weekdayShort: 'ccccc', hours24h: 'HH', hours12h: 'hh', meridiem: 'a', diff --git a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx index 01730f7f2290a..8cc7d78cfa27e 100644 --- a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx @@ -565,9 +565,7 @@ export function DayCalendar(inProps: DayCalendarProps) { )} {getWeekdays(utils, now).map((weekday, i) => { - // regression-prevention: - // since 'weekdayShort' now always returns an abbreviated form we slice the first 2 letters from it. - const day = utils.format(weekday, 'weekdayShort').slice(0, 2); + const day = utils.format(weekday, 'weekdayShort'); return ( - localization', () => { + ADAPTERS_TO_USE.forEach((adapterName) => { + describe(`with '${adapterName}'`, () => { + const { render } = createPickerRenderer({ + locale: adapterName === 'date-fns' ? he : { code: 'he' }, + adapterName, + }); + + it('should display correct week day labels in Hebrew locale ', () => { + render(); + + expect(screen.getByText('א')).toBeVisible(); + }); + }); + }); +}); diff --git a/test/utils/pickers/describeGregorianAdapter/testFormat.ts b/test/utils/pickers/describeGregorianAdapter/testFormat.ts index a4704990456ba..5239f944a652a 100644 --- a/test/utils/pickers/describeGregorianAdapter/testFormat.ts +++ b/test/utils/pickers/describeGregorianAdapter/testFormat.ts @@ -2,6 +2,17 @@ import { expect } from 'chai'; import { AdapterFormats } from '@mui/x-date-pickers/models'; import { DescribeGregorianAdapterTestSuite } from './describeGregorianAdapter.types'; +const expectedWeekdayShortFormat = (adapterLib: string) => { + switch (adapterLib) { + case 'luxon': + return 'W'; + case 'moment': + return 'Wed'; + default: + return 'We'; + } +}; + export const testFormat: DescribeGregorianAdapterTestSuite = ({ adapter }) => { const expectDate = (format: keyof AdapterFormats, expected: string) => { const date = adapter.date('2020-01-01T23:44:00.000Z')!; @@ -18,7 +29,7 @@ export const testFormat: DescribeGregorianAdapterTestSuite = ({ adapter }) => { expectDate('month', 'January'); expectDate('monthAndDate', 'January 1'); expectDate('weekday', 'Wednesday'); - expectDate('weekdayShort', 'Wed'); + expectDate('weekdayShort', expectedWeekdayShortFormat(adapter.lib)); expectDate('dayOfMonth', '1'); expectDate('fullTime12h', '11:44 PM'); expectDate('fullTime24h', '23:44'); From 299315456ea4fe4c05f59c54e34a4b612380f76c Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 26 Oct 2023 17:02:12 +0300 Subject: [PATCH 201/262] Bump @types/react-transition-group to ^4.4.8 (#10763) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/x-date-pickers/package.json | 2 +- packages/x-tree-view/package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index d99252ccae9e3..9362e8bd84bad 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -47,7 +47,7 @@ "@babel/runtime": "^7.23.2", "@mui/base": "^5.0.0-beta.20", "@mui/utils": "^5.14.14", - "@types/react-transition-group": "^4.4.7", + "@types/react-transition-group": "^4.4.8", "clsx": "^2.0.0", "prop-types": "^15.8.1", "react-transition-group": "^4.4.5" diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json index 2de176d740f60..b8114140ac032 100644 --- a/packages/x-tree-view/package.json +++ b/packages/x-tree-view/package.json @@ -45,7 +45,7 @@ "@babel/runtime": "^7.23.2", "@mui/base": "^5.0.0-beta.20", "@mui/utils": "^5.14.14", - "@types/react-transition-group": "^4.4.7", + "@types/react-transition-group": "^4.4.8", "clsx": "^2.0.0", "prop-types": "^15.8.1", "react-transition-group": "^4.4.5" diff --git a/yarn.lock b/yarn.lock index 8d7c8147d7e1d..2900eb3d5c23b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3020,10 +3020,10 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@^4.4.6", "@types/react-transition-group@^4.4.7": - version "4.4.7" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.7.tgz#bf69f269d74aa78b99097673ca6dd6824a68ef1c" - integrity sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg== +"@types/react-transition-group@^4.4.6", "@types/react-transition-group@^4.4.7", "@types/react-transition-group@^4.4.8": + version "4.4.8" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.8.tgz#46f87d80512959cac793ecc610a93d80ef241ccf" + integrity sha512-QmQ22q+Pb+HQSn04NL3HtrqHwYMf4h3QKArOy5F8U5nEVMaihBs3SR10WiOM1iwPz5jIo8x/u11al+iEGZZrvg== dependencies: "@types/react" "*" From 2cbc8df3d86286ff0f4644528bc902758236d0c5 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert <77863078+lhilgert9@users.noreply.github.com> Date: Thu, 26 Oct 2023 23:38:42 +0200 Subject: [PATCH 202/262] [charts] Fix text position in Safari (#10815) Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> --- packages/x-charts/src/internals/components/ChartsText.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/x-charts/src/internals/components/ChartsText.tsx b/packages/x-charts/src/internals/components/ChartsText.tsx index 8c26f69ffe6a7..5f06824c987e4 100644 --- a/packages/x-charts/src/internals/components/ChartsText.tsx +++ b/packages/x-charts/src/internals/components/ChartsText.tsx @@ -93,7 +93,12 @@ export function ChartsText(props: ChartsTextProps) { style={style} > {wordsByLines.map((line, index) => ( - + {line.text} ))} From 5505a593f521c6396161667c5a65ac2c9410abd2 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Fri, 27 Oct 2023 13:24:48 +0200 Subject: [PATCH 203/262] v6.17.0 (#10813) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Flavien DELANGLE Co-authored-by: José Rodolfo Freitas Co-authored-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Co-authored-by: Lukas --- CHANGELOG.md | 66 +++++++++++++++++++ package.json | 2 +- .../grid/x-data-grid-generator/package.json | 4 +- .../grid/x-data-grid-premium/package.json | 6 +- packages/grid/x-data-grid-pro/package.json | 4 +- packages/grid/x-data-grid/package.json | 2 +- packages/x-charts/package.json | 2 +- packages/x-date-pickers-pro/package.json | 4 +- packages/x-date-pickers/package.json | 2 +- packages/x-tree-view/package.json | 2 +- 10 files changed, 80 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9a9e8f933a8ce..d9a72c22268cb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,72 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 6.17.0 + +_Oct 27, 2023_ + +We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨: + +- 🎁 The Tree View package is now officially stable! + +![tree-view-example](https://github.com/mui/mui-x/assets/550141/77d1fe66-d912-49ba-b38f-b853fb90446a) + +- ✨ Improve the handling of non-numeric values by Data Grid aggregation +- 🚀 Support lines with different domains on the line charts +- 🐞 Bugfixes +- 📚 Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@6.17.0` + +- [DataGrid] Allow custom debounce time for row positions calculation (#10708) @cherniavskii +- [DataGrid] Persist stable row index for focused row (#10674) @cherniavskii + +#### `@mui/x-data-grid-pro@6.17.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-data-grid@6.17.0`, plus: + +- [DataGridPro] Fix `undefined` values passed to `valueFormatter` for tree leaf nodes (#10748) @cherniavskii + +#### `@mui/x-data-grid-premium@6.17.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan') + +Same changes as in `@mui/x-data-grid-pro@6.17.0`, plus: + +- [DataGridPremium] Fix `avg` aggregation to ignore non-numeric values (#10787) @cherniavskii +- [DataGridPremium] Fix `size` aggregation to ignore `undefined` values (#10745) @cherniavskii +- [DataGridPremium] Fix `sum` aggregation to ignore non-numeric values (#10730) @cherniavskii +- [DataGridPremium] Fix cell selection throwing index error on second page and beyond (#10784) @MBilalShafi + +### Date Pickers + +#### `@mui/x-date-pickers@6.17.0` + +- [fields] POC: Use `contentEditable` on `FakeTextField` (#10779) @flaviendelangle +- [pickers] Fix weekday label localization (#10809) @LukasTy + +#### `@mui/x-date-pickers-pro@6.17.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-date-pickers@6.17.0`. + +### Charts / `@mui/x-charts@6.0.0-alpha.17` + +- [charts] Fix text position in Safari (#10815) @lhilgert9 +- [charts] Support lines with different domains (#10801) @alexfauquette + +### Tree View / `@mui/x-tree-view@6.17.0` + +No change + +### Docs + +- [docs] Correct editing related props' description (#10798) @MBilalShafi +- [docs] Fix RTL data grid demo (#10728) @oliviertassinari +- [docs] Fix unclosed warning (#10796) @flaviendelangle +- [docs] Improve performance of `Save and restore the state from external storage` recipe (#10811) @michelengelen + +- [test] Add missing type on `cleanText` utility function (#10780) @flaviendelangle + ## 6.16.3 _Oct 20, 2023_ diff --git a/package.json b/package.json index 96bdaf1205ebc..fa92dba1d111d 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "6.16.3", + "version": "6.17.0", "private": true, "scripts": { "start": "yarn && yarn docs:dev", diff --git a/packages/grid/x-data-grid-generator/package.json b/packages/grid/x-data-grid-generator/package.json index 3a22cc61f64e1..9552a97dd878f 100644 --- a/packages/grid/x-data-grid-generator/package.json +++ b/packages/grid/x-data-grid-generator/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-generator", - "version": "6.16.3", + "version": "6.17.0", "description": "Generate fake data for demo purposes only.", "author": "MUI Team", "main": "src/index.ts", @@ -32,7 +32,7 @@ "dependencies": { "@babel/runtime": "^7.23.2", "@mui/base": "^5.0.0-beta.20", - "@mui/x-data-grid-premium": "6.16.3", + "@mui/x-data-grid-premium": "6.17.0", "chance": "^1.1.11", "clsx": "^2.0.0", "lru-cache": "^7.18.3" diff --git a/packages/grid/x-data-grid-premium/package.json b/packages/grid/x-data-grid-premium/package.json index d4b06e1ce57d2..b06ec17ba27e9 100644 --- a/packages/grid/x-data-grid-premium/package.json +++ b/packages/grid/x-data-grid-premium/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-premium", - "version": "6.16.3", + "version": "6.17.0", "description": "The Premium plan edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,8 +44,8 @@ "dependencies": { "@babel/runtime": "^7.23.2", "@mui/utils": "^5.14.14", - "@mui/x-data-grid": "6.16.3", - "@mui/x-data-grid-pro": "6.16.3", + "@mui/x-data-grid": "6.17.0", + "@mui/x-data-grid-pro": "6.17.0", "@mui/x-license-pro": "6.10.2", "@types/format-util": "^1.0.3", "clsx": "^2.0.0", diff --git a/packages/grid/x-data-grid-pro/package.json b/packages/grid/x-data-grid-pro/package.json index 249ad5a0b7d0f..e8462c8fcf9cc 100644 --- a/packages/grid/x-data-grid-pro/package.json +++ b/packages/grid/x-data-grid-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-pro", - "version": "6.16.3", + "version": "6.17.0", "description": "The Pro plan edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,7 +44,7 @@ "dependencies": { "@babel/runtime": "^7.23.2", "@mui/utils": "^5.14.14", - "@mui/x-data-grid": "6.16.3", + "@mui/x-data-grid": "6.17.0", "@mui/x-license-pro": "6.10.2", "@types/format-util": "^1.0.3", "clsx": "^2.0.0", diff --git a/packages/grid/x-data-grid/package.json b/packages/grid/x-data-grid/package.json index c38f774cf6f5b..a94bfd18fbfff 100644 --- a/packages/grid/x-data-grid/package.json +++ b/packages/grid/x-data-grid/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid", - "version": "6.16.3", + "version": "6.17.0", "description": "The community edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index c6dfc97ed6c89..2e076e23483e9 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-charts", - "version": "6.0.0-alpha.16", + "version": "6.0.0-alpha.17", "description": "The community edition of the charts components (MUI X).", "author": "MUI Team", "main": "./src/index.js", diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index 853e2ecca861f..a3c4534d319e4 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers-pro", - "version": "6.16.3", + "version": "6.17.0", "description": "The commercial edition of the date picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,7 +44,7 @@ "@babel/runtime": "^7.23.2", "@mui/base": "^5.0.0-beta.20", "@mui/utils": "^5.14.14", - "@mui/x-date-pickers": "6.16.3", + "@mui/x-date-pickers": "6.17.0", "@mui/x-license-pro": "6.10.2", "clsx": "^2.0.0", "prop-types": "^15.8.1", diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 9362e8bd84bad..06ac062f46961 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers", - "version": "6.16.3", + "version": "6.17.0", "description": "The community edition of the date picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json index b8114140ac032..7fd6af1f03c31 100644 --- a/packages/x-tree-view/package.json +++ b/packages/x-tree-view/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-tree-view", - "version": "6.0.0-beta.0", + "version": "6.17.0", "description": "The community edition of the tree view components (MUI X).", "author": "MUI Team", "main": "src/index.ts", From 569a9c48e605e018cb6c075f9669f2b21ac0b08b Mon Sep 17 00:00:00 2001 From: Lukas Date: Fri, 27 Oct 2023 15:01:08 +0300 Subject: [PATCH 204/262] [charts] Fix axis highlight in dark mode (#10820) --- .../x/api/charts/charts-axis-highlight.json | 2 +- .../charts/charts-axis-highlight.json | 2 +- .../ChartsAxisHighlight.tsx | 73 +++++++++++++++---- .../src/themeAugmentation/components.d.ts | 1 + .../src/themeAugmentation/overrides.d.ts | 2 + .../themeAugmentation.spec.ts | 10 +-- scripts/x-charts.exports.json | 5 ++ 7 files changed, 72 insertions(+), 23 deletions(-) diff --git a/docs/pages/x/api/charts/charts-axis-highlight.json b/docs/pages/x/api/charts/charts-axis-highlight.json index b0fa1a543d571..363412b12f924 100644 --- a/docs/pages/x/api/charts/charts-axis-highlight.json +++ b/docs/pages/x/api/charts/charts-axis-highlight.json @@ -6,7 +6,7 @@ "import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';", "import { ChartsAxisHighlight } from '@mui/x-charts';" ], - "styles": { "classes": [], "globalClasses": {}, "name": "MuiChartsAxisHighlight" }, + "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiChartsAxisHighlight" }, "filename": "/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx", "demos": "
            " } diff --git a/docs/translations/api-docs/charts/charts-axis-highlight.json b/docs/translations/api-docs/charts/charts-axis-highlight.json index be9cfbbe310cd..2a71bfb090893 100644 --- a/docs/translations/api-docs/charts/charts-axis-highlight.json +++ b/docs/translations/api-docs/charts/charts-axis-highlight.json @@ -1,6 +1,6 @@ { "componentDescription": "", "propDescriptions": {}, - "classDescriptions": {}, + "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": {} } diff --git a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx index 2fd89189953d0..9ea458b357b2f 100644 --- a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx +++ b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx @@ -1,10 +1,54 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import composeClasses from '@mui/utils/composeClasses'; +import generateUtilityClass from '@mui/utils/generateUtilityClass'; +import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; +import { styled } from '@mui/material/styles'; import { InteractionContext } from '../context/InteractionProvider'; import { CartesianContext } from '../context/CartesianContextProvider'; import { getValueToPositionMapper } from '../hooks/useScale'; import { isBandScale } from '../internals/isBandScale'; +export interface ChartsAxisHighlightClasses { + /** Styles applied to the root element. */ + root: string; +} + +export type ChartsAxisHighlightClassKey = keyof ChartsAxisHighlightClasses; + +export function getAxisHighlightUtilityClass(slot: string) { + return generateUtilityClass('MuiChartsAxisHighlight', slot); +} + +export const chartsAxisHighlightClasses: ChartsAxisHighlightClasses = generateUtilityClasses( + 'MuiChartsAxisHighlight', + ['root'], +); + +const useUtilityClasses = () => { + const slots = { + root: ['root'], + }; + + return composeClasses(slots, getAxisHighlightUtilityClass); +}; + +export const ChartsAxisHighlightPath = styled('path', { + name: 'MuiChartsAxisHighlight', + slot: 'Root', + overridesResolver: (_, styles) => styles.root, +})<{ ownerState: { axisHighlight: AxisHighlight } }>(({ ownerState, theme }) => ({ + pointerEvents: 'none', + ...(ownerState.axisHighlight === 'band' && { + fill: theme.palette.mode === 'light' ? 'gray' : 'white', + fillOpacity: 0.1, + }), + ...(ownerState.axisHighlight === 'line' && { + strokeDasharray: '5 2', + stroke: theme.palette.mode === 'light' ? '#000000' : '#ffffff', + }), +})); + type AxisHighlight = 'none' | 'line' | 'band'; export type ChartsAxisHighlightProps = { @@ -15,6 +59,7 @@ export type ChartsAxisHighlightProps = { function ChartsAxisHighlight(props: ChartsAxisHighlightProps) { const { x: xAxisHighlight, y: yAxisHighlight } = props; const { xAxisIds, xAxis, yAxisIds, yAxis } = React.useContext(CartesianContext); + const classes = useUtilityClasses(); const USED_X_AXIS_ID = xAxisIds[0]; const USED_Y_AXIS_ID = yAxisIds[0]; @@ -29,50 +74,46 @@ function ChartsAxisHighlight(props: ChartsAxisHighlightProps) { return ( {xAxisHighlight === 'band' && axis.x !== null && isBandScale(xScale) && ( - )} {yAxisHighlight === 'band' && axis.y !== null && isBandScale(yScale) && ( - )} {xAxisHighlight === 'line' && axis.x !== null && ( - )} {yAxisHighlight === 'line' && axis.y !== null && ( - )} diff --git a/packages/x-charts/src/themeAugmentation/components.d.ts b/packages/x-charts/src/themeAugmentation/components.d.ts index bac65ce6723d9..5c55fea5d5cd2 100644 --- a/packages/x-charts/src/themeAugmentation/components.d.ts +++ b/packages/x-charts/src/themeAugmentation/components.d.ts @@ -13,6 +13,7 @@ export interface ChartsComponents { }; MuiChartsAxisHighlight?: { defaultProps?: ComponentsProps['MuiChartsAxisHighlight']; + styleOverrides?: ComponentsOverrides['MuiChartsAxisHighlight']; }; MuiChartsClipPath?: { defaultProps?: ComponentsProps['MuiChartsClipPath']; diff --git a/packages/x-charts/src/themeAugmentation/overrides.d.ts b/packages/x-charts/src/themeAugmentation/overrides.d.ts index a8123b5926c5c..ba40fff8d1d55 100644 --- a/packages/x-charts/src/themeAugmentation/overrides.d.ts +++ b/packages/x-charts/src/themeAugmentation/overrides.d.ts @@ -1,11 +1,13 @@ import { BarElementClassKey } from '../BarChart/BarElement'; import { ChartsAxisClassKey } from '../ChartsAxis'; +import { ChartsAxisHighlightClassKey } from '../ChartsAxisHighlight'; import { ChartsLegendClassKey } from '../ChartsLegend'; import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '../LineChart'; // prettier-ignore export interface PickersComponentNameToClassKey { MuiChartsAxis: ChartsAxisClassKey; + MuiChartsAxisHighlight: ChartsAxisHighlightClassKey; MuiChartsLegend: ChartsLegendClassKey; // BarChart components diff --git a/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts index ca25d76aacf0d..dd1aab3560755 100644 --- a/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts +++ b/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts @@ -34,11 +34,11 @@ createTheme({ // @ts-expect-error invalid MuiChartsAxisHighlight prop someRandomProp: true, }, - // styleOverrides: { - // root: { backgroundColor: 'red' }, - // // @ts-expect-error invalid MuiChartsAxisHighlight class key - // constent: { color: 'red' }, - // }, + styleOverrides: { + root: { backgroundColor: 'red' }, + // @ts-expect-error invalid MuiChartsAxisHighlight class key + constent: { color: 'red' }, + }, }, MuiChartsClipPath: { defaultProps: { diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index 3c5752620719e..c07a57d5614c5 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -25,6 +25,10 @@ { "name": "ChartsAxisClasses", "kind": "Interface" }, { "name": "ChartsAxisClassKey", "kind": "TypeAlias" }, { "name": "ChartsAxisHighlight", "kind": "Function" }, + { "name": "chartsAxisHighlightClasses", "kind": "Variable" }, + { "name": "ChartsAxisHighlightClasses", "kind": "Interface" }, + { "name": "ChartsAxisHighlightClassKey", "kind": "TypeAlias" }, + { "name": "ChartsAxisHighlightPath", "kind": "Variable" }, { "name": "ChartsAxisHighlightProps", "kind": "TypeAlias" }, { "name": "ChartsAxisProps", "kind": "Interface" }, { "name": "ChartsClipPath", "kind": "Function" }, @@ -58,6 +62,7 @@ { "name": "DrawingProvider", "kind": "Function" }, { "name": "FadeOptions", "kind": "TypeAlias" }, { "name": "getAreaElementUtilityClass", "kind": "Function" }, + { "name": "getAxisHighlightUtilityClass", "kind": "Function" }, { "name": "getAxisUtilityClass", "kind": "Function" }, { "name": "getHighlightElementUtilityClass", "kind": "Function" }, { "name": "getLineElementUtilityClass", "kind": "Function" }, From 5c00016f055401d1cc62aedec3c66f1da198f24e Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Fri, 27 Oct 2023 16:23:11 +0200 Subject: [PATCH 205/262] [charts] Add reference links to shared/misc chart components (#10660) --- packages/x-charts/src/ChartsAxis/ChartsAxis.tsx | 9 +++++++++ .../src/ChartsAxisHighlight/ChartsAxisHighlight.tsx | 9 +++++++++ packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx | 5 +++++ packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx | 9 +++++++++ packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 9 +++++++++ packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 9 +++++++++ .../x-charts/src/context/CartesianContextProvider.tsx | 5 +++++ packages/x-charts/src/context/DrawingProvider.tsx | 5 +++++ 8 files changed, 60 insertions(+) diff --git a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx index 2b24b15598379..4dff59527bd99 100644 --- a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx +++ b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx @@ -74,6 +74,15 @@ const mergeProps = ( : { slots, slotProps }; }; +/** + * Demos: + * + * - [Axis](https://mui.com/x/react-charts/axis/) + * + * API: + * + * - [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/) + */ function ChartsAxis(props: ChartsAxisProps) { const { topAxis, leftAxis, rightAxis, bottomAxis, slots, slotProps } = props; const { xAxis, xAxisIds, yAxis, yAxisIds } = React.useContext(CartesianContext); diff --git a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx index 9ea458b357b2f..cbdc637297109 100644 --- a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx +++ b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx @@ -56,6 +56,15 @@ export type ChartsAxisHighlightProps = { y?: AxisHighlight; }; +/** + * Demos: + * + * - [Custom components](https://mui.com/x/react-charts/components/) + * + * API: + * + * - [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/) + */ function ChartsAxisHighlight(props: ChartsAxisHighlightProps) { const { x: xAxisHighlight, y: yAxisHighlight } = props; const { xAxisIds, xAxis, yAxisIds, yAxis } = React.useContext(CartesianContext); diff --git a/packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx b/packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx index 4b947e38fc402..fc674f7038c0a 100644 --- a/packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx +++ b/packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx @@ -7,6 +7,11 @@ export type ChartsClipPathProps = { offset?: { top?: number; right?: number; bottom?: number; left?: number }; }; +/** + * API: + * + * - [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/) + */ function ChartsClipPath(props: ChartsClipPathProps) { const { id, offset: offsetProps } = props; const { left, top, width, height } = React.useContext(DrawingContext); diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx index f0ad8c245471e..76e0309f004d3 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx @@ -85,6 +85,15 @@ const ChartsTooltipRoot = styled(Popper, { zIndex: theme.zIndex.modal, })); +/** + * Demos: + * + * - [ChartsTooltip](https://mui.com/x/react-charts/tooltip/) + * + * API: + * + * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/) + */ function ChartsTooltip(props: ChartsTooltipProps) { const { trigger = 'axis', itemContent, axisContent, slots, slotProps } = props; diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 548e7f6a80308..98cfdc6b00d3d 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -85,6 +85,15 @@ const defaultProps = { tickSize: 6, } as const; +/** + * Demos: + * + * - [Axis](https://mui.com/x/react-charts/axis/) + * + * API: + * + * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/) + */ function ChartsXAxis(inProps: ChartsXAxisProps) { const props = useThemeProps({ props: { ...defaultProps, ...inProps }, name: 'MuiChartsXAxis' }); const { diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index 9677195cb4e5b..878b08938848a 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -34,6 +34,15 @@ const defaultProps = { tickSize: 6, } as const; +/** + * Demos: + * + * - [Axis](https://mui.com/x/react-charts/axis/) + * + * API: + * + * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/) + */ function ChartsYAxis(inProps: ChartsYAxisProps) { const props = useThemeProps({ props: { ...defaultProps, ...inProps }, name: 'MuiChartsYAxis' }); const { diff --git a/packages/x-charts/src/context/CartesianContextProvider.tsx b/packages/x-charts/src/context/CartesianContextProvider.tsx index a8f98e6f3f2e0..65bf12143e5e6 100644 --- a/packages/x-charts/src/context/CartesianContextProvider.tsx +++ b/packages/x-charts/src/context/CartesianContextProvider.tsx @@ -70,6 +70,11 @@ export const CartesianContext = React.createContext<{ // @ts-ignore }>({ xAxis: {}, yAxis: {}, xAxisIds: [], yAxisIds: [] }); +/** + * API: + * + * - [CartesianContextProvider API](https://mui.com/x/api/charts/cartesian-context-provider/) + */ function CartesianContextProvider({ xAxis: inXAxis, yAxis: inYAxis, diff --git a/packages/x-charts/src/context/DrawingProvider.tsx b/packages/x-charts/src/context/DrawingProvider.tsx index 9df20cd0c6632..ff425a21b8b63 100644 --- a/packages/x-charts/src/context/DrawingProvider.tsx +++ b/packages/x-charts/src/context/DrawingProvider.tsx @@ -30,6 +30,11 @@ export const DrawingContext = React.createContext({ }); export const SVGContext = React.createContext>({ current: null }); +/** + * API: + * + * - [DrawingProvider API](https://mui.com/x/api/charts/drawing-provider/) + */ function DrawingProvider({ width, height, margin, svgRef, children }: DrawingProviderProps) { const drawingArea = useChartDimensions(width, height, margin); From 9139d0ba39ff1cbd5e32a9397382617decde2657 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Sun, 29 Oct 2023 10:29:20 +0100 Subject: [PATCH 206/262] [docs] Add a recipe for autosizing columns after fetching row-data (#10822) Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Co-authored-by: Andrew Cherniavskii --- .../ColumnAutosizingAsync.js | 101 ++++++++++++++++++ .../ColumnAutosizingAsync.tsx | 101 ++++++++++++++++++ .../column-dimensions/column-dimensions.md | 10 ++ 3 files changed, 212 insertions(+) create mode 100644 docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js create mode 100644 docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js new file mode 100644 index 0000000000000..01490fbfceb23 --- /dev/null +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js @@ -0,0 +1,101 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import Rating from '@mui/material/Rating'; +import Stack from '@mui/material/Stack'; +import { useGridApiRef } from '@mui/x-data-grid'; +import { DataGridPro } from '@mui/x-data-grid-pro'; +import { + randomInt, + randomRating, + randomTraderName, +} from '@mui/x-data-grid-generator'; +import * as ReactDOM from 'react-dom'; + +const columns = [ + { field: 'id', headerName: 'Brand ID' }, + { field: 'brand', headerName: 'Brand name' }, + { field: 'rep', headerName: 'Representative' }, + { field: 'rating', headerName: 'Rating', renderCell: renderRating }, +]; + +function renderRating(params) { + return ; +} + +function getFakeData(length) { + return new Promise((resolve) => { + setTimeout(() => { + const names = [ + 'Nike', + 'Adidas', + 'Puma', + 'Reebok', + 'Fila', + 'Lululemon Athletica Clothing', + 'Varley', + ]; + + const rows = Array.from({ length }).map((_, id) => ({ + id, + brand: names[randomInt(0, names.length - 1)], + rep: randomTraderName(), + rating: randomRating(), + })); + + resolve({ rows }); + }, 1000); + }); +} + +export default function ColumnAutosizingAsync() { + const apiRef = useGridApiRef(); + const [isLoading, setIsLoading] = React.useState(false); + const [rows] = React.useState([]); + + const fetchData = React.useCallback(() => { + setIsLoading(true); + getFakeData(100) + .then((data) => { + return ReactDOM.flushSync(() => { + setIsLoading(false); + apiRef.current.updateRows(data.rows); + }); + }) + .then(() => + apiRef.current.autosizeColumns({ + includeHeaders: true, + includeOutliers: true, + }), + ); + }, [apiRef]); + + React.useEffect(() => { + fetchData(); + }, [fetchData]); + + return ( +
            + + + +
            + +
            +
            + ); +} diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx new file mode 100644 index 0000000000000..2140a5e5ae3b0 --- /dev/null +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx @@ -0,0 +1,101 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import Rating from '@mui/material/Rating'; +import Stack from '@mui/material/Stack'; +import { useGridApiRef } from '@mui/x-data-grid'; +import { DataGridPro, GridApiPro } from '@mui/x-data-grid-pro'; +import { + randomInt, + randomRating, + randomTraderName, +} from '@mui/x-data-grid-generator'; +import * as ReactDOM from 'react-dom'; +import { GridData } from 'docsx/data/data-grid/virtualization/ColumnVirtualizationGrid'; + +const columns = [ + { field: 'id', headerName: 'Brand ID' }, + { field: 'brand', headerName: 'Brand name' }, + { field: 'rep', headerName: 'Representative' }, + { field: 'rating', headerName: 'Rating', renderCell: renderRating }, +]; + +function renderRating(params: any) { + return ; +} + +function getFakeData(length: number): Promise<{ rows: GridData['rows'] }> { + return new Promise((resolve) => { + setTimeout(() => { + const names = [ + 'Nike', + 'Adidas', + 'Puma', + 'Reebok', + 'Fila', + 'Lululemon Athletica Clothing', + 'Varley', + ]; + const rows = Array.from({ length }).map((_, id) => ({ + id, + brand: names[randomInt(0, names.length - 1)], + rep: randomTraderName(), + rating: randomRating(), + })); + + resolve({ rows }); + }, 1000); + }); +} + +export default function ColumnAutosizingAsync() { + const apiRef = useGridApiRef(); + const [isLoading, setIsLoading] = React.useState(false); + const [rows] = React.useState([]); + + const fetchData = React.useCallback(() => { + setIsLoading(true); + getFakeData(100) + .then((data) => { + return ReactDOM.flushSync(() => { + setIsLoading(false); + apiRef.current.updateRows(data.rows); + }); + }) + .then(() => + apiRef.current.autosizeColumns({ + includeHeaders: true, + includeOutliers: true, + }), + ); + }, [apiRef]); + + React.useEffect(() => { + fetchData(); + }, [fetchData]); + + return ( +
            + + + +
            + +
            +
            + ); +} diff --git a/docs/data/data-grid/column-dimensions/column-dimensions.md b/docs/data/data-grid/column-dimensions/column-dimensions.md index 3a60bf30cbe9d..734277ec90b28 100644 --- a/docs/data/data-grid/column-dimensions/column-dimensions.md +++ b/docs/data/data-grid/column-dimensions/column-dimensions.md @@ -97,6 +97,16 @@ The data grid can only autosize based on the currently rendered cells. DOM access is required to accurately calculate dimensions, so unmounted cells (when [virtualization](/x/react-data-grid/virtualization/) is on) cannot be sized. If you need a bigger row sample, [open an issue](https://github.com/mui/mui-x/issues) to discuss it further. ::: +### Autosizing asynchronously [](/x/introduction/licensing/#pro-plan 'Pro plan') + +The `autosizeColumns` method from the `apiRef` can be used as well to adjust the column size on specified events, for example when receiving row data from the server. + +{{"demo": "ColumnAutosizingAsync.js", "disableAd": true, "bg": "inline"}} + +:::warning +This example uses `ReactDOM.flushSync`. If used incorrectly it can hurt the performance of your application. Please refer to the official [React docs](https://react.dev/reference/react-dom/flushSync) for further information. +::: + ## API - [DataGrid](/x/api/data-grid/data-grid/) From 2eae396e0e144f151b3bd5a69fb06ad0fba4b8b4 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Mon, 30 Oct 2023 17:53:53 +0100 Subject: [PATCH 207/262] [DataGrid] Make column autosizing work with dynamic row height (#10693) --- .../ColumnAutosizingDynamicRowHeight.js | 64 +++++++++++++++++ .../ColumnAutosizingDynamicRowHeight.tsx | 70 +++++++++++++++++++ .../column-dimensions/column-dimensions.md | 14 ++-- .../columnResize/useGridColumnResize.tsx | 5 -- .../components/containers/GridRootStyles.ts | 1 + 5 files changed, 145 insertions(+), 9 deletions(-) create mode 100644 docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js create mode 100644 docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.tsx diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js b/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js new file mode 100644 index 0000000000000..4101807c03e92 --- /dev/null +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js @@ -0,0 +1,64 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import { DataGridPro, gridClasses, useGridApiRef } from '@mui/x-data-grid-pro'; +import { randomInt, randomArrayItem } from '@mui/x-data-grid-generator'; + +const lines = [ + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', + 'Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum.', + 'Maecenas non felis venenatis, porta velit quis, consectetur elit.', + 'Vestibulum commodo et odio a laoreet.', + 'Nullam cursus tincidunt auctor.', + 'Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet.', + 'Nulla venenatis justo non felis vulputate, eu mollis metus ornare.', + 'Nam ullamcorper ligula id consectetur auctor.', + 'Phasellus et ultrices dui.', + 'Fusce facilisis egestas massa, et eleifend magna imperdiet et.', + 'Pellentesque ac metus velit.', + 'Vestibulum in massa nibh.', + 'Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a.', +]; + +const columns = [{ field: 'id' }, { field: 'bio', width: 400 }]; + +const rows = []; + +for (let i = 0; i < 200; i += 1) { + const bio = []; + + for (let j = 0; j < randomInt(1, 5); j += 1) { + bio.push(randomArrayItem(lines)); + } + + rows.push({ id: i, bio: bio.join(' ') }); +} + +const autosizeOptions = { + includeOutliers: true, +}; + +export default function ColumnAutosizingDynamicRowHeight() { + const apiRef = useGridApiRef(); + + return ( +
            + +
            + 'auto'} + autosizeOptions={autosizeOptions} + sx={{ + [`& .${gridClasses.cell}`]: { + py: 0.5, + }, + }} + /> +
            +
            + ); +} diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.tsx new file mode 100644 index 0000000000000..d54772abc10b3 --- /dev/null +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import { + DataGridPro, + GridColDef, + gridClasses, + useGridApiRef, + GridAutosizeOptions, +} from '@mui/x-data-grid-pro'; +import { randomInt, randomArrayItem } from '@mui/x-data-grid-generator'; + +const lines = [ + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', + 'Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum.', + 'Maecenas non felis venenatis, porta velit quis, consectetur elit.', + 'Vestibulum commodo et odio a laoreet.', + 'Nullam cursus tincidunt auctor.', + 'Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet.', + 'Nulla venenatis justo non felis vulputate, eu mollis metus ornare.', + 'Nam ullamcorper ligula id consectetur auctor.', + 'Phasellus et ultrices dui.', + 'Fusce facilisis egestas massa, et eleifend magna imperdiet et.', + 'Pellentesque ac metus velit.', + 'Vestibulum in massa nibh.', + 'Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a.', +]; + +const columns: GridColDef[] = [{ field: 'id' }, { field: 'bio', width: 400 }]; + +const rows: object[] = []; + +for (let i = 0; i < 200; i += 1) { + const bio = []; + + for (let j = 0; j < randomInt(1, 5); j += 1) { + bio.push(randomArrayItem(lines)); + } + + rows.push({ id: i, bio: bio.join(' ') }); +} + +const autosizeOptions: GridAutosizeOptions = { + includeOutliers: true, +}; + +export default function ColumnAutosizingDynamicRowHeight() { + const apiRef = useGridApiRef(); + + return ( +
            + +
            + 'auto'} + autosizeOptions={autosizeOptions} + sx={{ + [`& .${gridClasses.cell}`]: { + py: 0.5, + }, + }} + /> +
            +
            + ); +} diff --git a/docs/data/data-grid/column-dimensions/column-dimensions.md b/docs/data/data-grid/column-dimensions/column-dimensions.md index 734277ec90b28..a1aa0720548ab 100644 --- a/docs/data/data-grid/column-dimensions/column-dimensions.md +++ b/docs/data/data-grid/column-dimensions/column-dimensions.md @@ -87,10 +87,6 @@ In all the cases, the `colDef.minWidth` and `colDef.maxWidth` options will be re {{"demo": "ColumnAutosizing.js", "disableAd": true, "bg": "inline"}} -:::warning -Autosizing has no effect if dynamic row height is enabled. -::: - :::warning The data grid can only autosize based on the currently rendered cells. @@ -107,6 +103,16 @@ The `autosizeColumns` method from the `apiRef` can be used as well to adjust the This example uses `ReactDOM.flushSync`. If used incorrectly it can hurt the performance of your application. Please refer to the official [React docs](https://react.dev/reference/react-dom/flushSync) for further information. ::: +### Autosizing with dynamic row height + +Column autosizing is compatible with the [Dynamic row height](/x/react-data-grid/row-height/#dynamic-row-height) feature. + +{{"demo": "ColumnAutosizingDynamicRowHeight.js", "disableAd": true, "bg": "inline"}} + +:::warning +When autosizing columns with long content, consider setting the `maxWidth` for the column to avoid it becoming too wide. +::: + ## API - [DataGrid](/x/api/data-grid/data-grid/) diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index 9c7a182a72371..dd78724ddcf33 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -210,11 +210,6 @@ function extractColumnWidths( const cells = findGridCells(apiRef.current, column.field); const widths = cells.map((cell) => { - const id = cell.parentElement!.getAttribute('data-id') ?? ''; - const hasAutoHeight = apiRef.current.rowHasAutoHeight(id); - if (hasAutoHeight) { - return (column as any).computedWidth ?? column.width; - } const style = window.getComputedStyle(cell, null); const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10); const contentWidth = cell.firstElementChild?.getBoundingClientRect().width ?? 0; diff --git a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts index b395670007e7d..6d2b94793f464 100644 --- a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts +++ b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts @@ -157,6 +157,7 @@ export const GridRootStyles = styled('div', { }, [`& .${gridClasses.cell} > *`]: { overflow: 'visible !important', + whiteSpace: 'nowrap', }, }, [`& .${gridClasses['virtualScrollerContent--overflowed']} .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]: From b22e9120a9d4ca381eaa97b60e991edf9d291819 Mon Sep 17 00:00:00 2001 From: Jerry_wu <409187100@qq.com> Date: Tue, 31 Oct 2023 19:04:51 +0800 Subject: [PATCH 208/262] [DataGrid][l10n] Allow to customize sorting label per column (#10839) Co-authored-by: wuls --- .../menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx | 9 +++++++-- .../grid/x-data-grid/src/models/api/gridLocaleTextApi.ts | 5 +++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx index bacf06d15fb61..08e81b56a8a19 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx @@ -42,6 +42,11 @@ function GridColumnMenuSortItem(props: GridColumnMenuItemProps) { return null; } + const getLabel = (key: 'columnMenuSortAsc' | 'columnMenuSortDesc') => { + const label = apiRef.current.getLocaleText(key); + return typeof label === 'function' ? label(colDef) : label; + }; + return ( {sortingOrder.includes('asc') && sortDirection !== 'asc' ? ( @@ -49,7 +54,7 @@ function GridColumnMenuSortItem(props: GridColumnMenuItemProps) { - {apiRef.current.getLocaleText('columnMenuSortAsc')} + {getLabel('columnMenuSortAsc')} ) : null} {sortingOrder.includes('desc') && sortDirection !== 'desc' ? ( @@ -57,7 +62,7 @@ function GridColumnMenuSortItem(props: GridColumnMenuItemProps) { - {apiRef.current.getLocaleText('columnMenuSortDesc')} + {getLabel('columnMenuSortDesc')} ) : null} {sortingOrder.includes(null) && sortDirection != null ? ( diff --git a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts index c20e868e6dd62..5ca230b313f71 100644 --- a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts +++ b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts @@ -1,5 +1,6 @@ import * as React from 'react'; import { ComponentsPropsList } from '@mui/material/styles'; +import { GridColDef } from '../colDef'; /** * Set the types of the texts in the grid. @@ -112,8 +113,8 @@ export interface GridLocaleText { columnMenuFilter: React.ReactNode; columnMenuHideColumn: React.ReactNode; columnMenuUnsort: React.ReactNode; - columnMenuSortAsc: React.ReactNode; - columnMenuSortDesc: React.ReactNode; + columnMenuSortAsc: React.ReactNode | ((colDef: GridColDef) => React.ReactNode); + columnMenuSortDesc: React.ReactNode | ((colDef: GridColDef) => React.ReactNode); // Column header text columnHeaderFiltersTooltipActive: (count: number) => React.ReactNode; From 35ac35c396642cac75e9364e9d69b901fce4ba5a Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Wed, 1 Nov 2023 02:55:53 -0400 Subject: [PATCH 209/262] [DataGrid] Fix undefined row id (#10670) --- .../hooks/features/filter/gridFilterUtils.ts | 25 ++++++------------- .../hooks/features/filter/useGridFilter.tsx | 4 +-- 2 files changed, 9 insertions(+), 20 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts b/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts index 67da4b90908d0..1f6c3526a88f8 100644 --- a/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts +++ b/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts @@ -6,7 +6,6 @@ import { GridFilterModel, GridLogicOperator, GridRowId, - GridRowIdGetter, GridValidRowModel, } from '../../../models'; import { GridApiCommunity } from '../../../models/api/gridApiCommunity'; @@ -231,13 +230,11 @@ let filterItemsApplierId = 1; /** * Generates a method to easily check if a row is matching the current filter model. - * @param {GridRowIdGetter | undefined} getRowId The getter for row's id. * @param {GridFilterModel} filterModel The model with which we want to filter the rows. * @param {React.MutableRefObject} apiRef The API of the grid. * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters. */ -export const buildAggregatedFilterItemsApplier = ( - getRowId: GridRowIdGetter | undefined, +const buildAggregatedFilterItemsApplier = ( filterModel: GridFilterModel, apiRef: React.MutableRefObject, disableEval: boolean, @@ -262,7 +259,7 @@ export const buildAggregatedFilterItemsApplier = ( if (!shouldApplyFilter || shouldApplyFilter(applier.item.field)) { resultPerItemId[applier.item.id!] = applier.v7 ? applier.fn(row) - : applier.fn(getRowId ? getRowId(row) : row.id); + : applier.fn(apiRef.current.getRowId(row)); } } @@ -289,11 +286,7 @@ export const buildAggregatedFilterItemsApplier = ( `${JSON.stringify(String(applier.item.id))}: !shouldApply${i} ? false : - ${ - applier.v7 - ? `appliers[${i}].fn(row)` - : `appliers[${i}].fn(${getRowId ? 'getRowId(row)' : 'row.id'})` - }, + ${applier.v7 ? `appliers[${i}].fn(row)` : `appliers[${i}].fn(getRowId(row))`}, `, ) .join('\n')}}; @@ -305,7 +298,7 @@ export const buildAggregatedFilterItemsApplier = ( filterItemTemplate.replaceAll('$$', String(filterItemsApplierId)), ); const filterItem: GridFilterItemApplierNotAggregated = (row, shouldApplyItem) => { - return filterItemCore(getRowId, appliers, row, shouldApplyItem); + return filterItemCore(apiRef.current.getRowId, appliers, row, shouldApplyItem); }; filterItemsApplierId += 1; @@ -314,13 +307,11 @@ export const buildAggregatedFilterItemsApplier = ( /** * Generates a method to easily check if a row is matching the current quick filter. - * @param {GridRowIdGetter | undefined} getRowId The getter for row's id. * @param {any[]} filterModel The model with which we want to filter the rows. * @param {React.MutableRefObject} apiRef The API of the grid. * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters. */ -export const buildAggregatedQuickFilterApplier = ( - getRowId: GridRowIdGetter | undefined, +const buildAggregatedQuickFilterApplier = ( filterModel: GridFilterModel, apiRef: React.MutableRefObject, ): GridFilterItemApplierNotAggregated | null => { @@ -402,7 +393,7 @@ export const buildAggregatedQuickFilterApplier = ( } else { const cellParams = usedCellParams[field] ?? - apiRef.current.getCellParams(getRowId ? getRowId(row) : row.id, field); + apiRef.current.getCellParams(apiRef.current.getRowId(row), field); usedCellParams[field] = cellParams; const isMatching = applier.fn(cellParams); @@ -422,18 +413,16 @@ export const buildAggregatedQuickFilterApplier = ( }; export const buildAggregatedFilterApplier = ( - getRowId: GridRowIdGetter | undefined, filterModel: GridFilterModel, apiRef: React.MutableRefObject, disableEval: boolean, ): GridAggregatedFilterItemApplier => { const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier( - getRowId, filterModel, apiRef, disableEval, ); - const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(getRowId, filterModel, apiRef); + const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef); return function isRowMatchingFilters(row, shouldApplyFilter, result) { result.passingFilterItems = isRowMatchingFilterItems?.(row, shouldApplyFilter) ?? null; diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx b/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx index a35e9d1adc437..6e70483397e03 100644 --- a/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx @@ -107,7 +107,7 @@ export const useGridFilter = ( const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId); const isRowMatchingFilters = props.filterMode === 'client' - ? buildAggregatedFilterApplier(props.getRowId, filterModel, apiRef, props.disableEval) + ? buildAggregatedFilterApplier(filterModel, apiRef, props.disableEval) : null; const filteringResult = apiRef.current.applyStrategyProcessor('filtering', { @@ -131,7 +131,7 @@ export const useGridFilter = ( }; }); apiRef.current.publishEvent('filteredRowsSet'); - }, [apiRef, props.filterMode, props.getRowId, props.disableEval]); + }, [apiRef, props.filterMode, props.disableEval]); const addColumnMenuItem = React.useCallback>( (columnMenuItems, colDef) => { From f1ef162350f0936196c31dae4afda8e7c6d5b639 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Wed, 1 Nov 2023 10:38:47 +0100 Subject: [PATCH 210/262] [pickers] Add reference links to calendar components (#10644) Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Co-authored-by: Lukas --- docs/data/date-pickers/date-picker/date-picker.md | 2 +- docs/data/date-pickers/validation/validation.md | 2 +- docs/pages/x/api/date-pickers/date-calendar.json | 2 +- .../src/DateRangeCalendar/DateRangeCalendar.tsx | 10 ++++++++++ .../x-date-pickers/src/DateCalendar/DateCalendar.tsx | 5 +++-- .../x-date-pickers/src/MonthCalendar/MonthCalendar.tsx | 9 +++++++++ .../x-date-pickers/src/YearCalendar/YearCalendar.tsx | 9 +++++++++ 7 files changed, 34 insertions(+), 5 deletions(-) diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md index aaf872be9b28f..85018f5efc0bb 100644 --- a/docs/data/date-pickers/date-picker/date-picker.md +++ b/docs/data/date-pickers/date-picker/date-picker.md @@ -1,7 +1,7 @@ --- productId: x-date-pickers title: React Date Picker component -components: DatePicker, DesktopDatePicker, MobileDatePicker, StaticDatePicker +components: DatePicker, DesktopDatePicker, MobileDatePicker, StaticDatePicker, DateCalendar githubLabel: 'component: DatePicker' packageName: '@mui/x-date-pickers' materialDesign: https://m2.material.io/components/date-pickers diff --git a/docs/data/date-pickers/validation/validation.md b/docs/data/date-pickers/validation/validation.md index 40d03c34de12f..1d16bec6a620f 100644 --- a/docs/data/date-pickers/validation/validation.md +++ b/docs/data/date-pickers/validation/validation.md @@ -1,6 +1,6 @@ --- productId: x-date-pickers -components: DatePicker, DesktopDatePicker, MobileDatePicker, StaticDatePicker, TimePicker, DesktopTimePicker, MobileTimePicker, StaticTimePicker, DateTimePicker, DesktopDateTimePicker, MobileDateTimePicker, StaticDateTimePicker, DateRangePicker, DesktopDateRangePicker, MobileDateRangePicker, StaticDateRangePicker +components: DatePicker, DesktopDatePicker, MobileDatePicker, StaticDatePicker, TimePicker, DesktopTimePicker, MobileTimePicker, StaticTimePicker, DateTimePicker, DesktopDateTimePicker, MobileDateTimePicker, StaticDateTimePicker, DateRangePicker, DesktopDateRangePicker, MobileDateRangePicker, StaticDateRangePicker, DateCalendar githubLabel: 'component: pickers' packageName: '@mui/x-date-pickers' --- diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index 0d8e73ac44bdb..baf4efe60d43a 100644 --- a/docs/pages/x/api/date-pickers/date-calendar.json +++ b/docs/pages/x/api/date-pickers/date-calendar.json @@ -214,5 +214,5 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx", "inheritance": null, - "demos": "" + "demos": "" } diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx index 77881240d36d3..004a70c8c7932 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx @@ -155,6 +155,16 @@ type DateRangeCalendarComponent = (( props: DateRangeCalendarProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/) + * - [DateRangeCalendar](https://mui.com/x/react-date-pickers/date-range-calendar/) + * + * API: + * + * - [DateRangeCalendar API](https://mui.com/x/api/date-pickers/date-range-calendar/) + */ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar( inProps: DateRangeCalendarProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx index ab402c9977ab0..f78b9323b0940 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx @@ -88,10 +88,11 @@ type DateCalendarComponent = (( ) => React.JSX.Element) & { propTypes?: any }; /** - * * Demos: * - * - [Date Picker](https://mui.com/x/react-date-pickers/date-picker/) + * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/) + * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/) + * - [Validation](https://mui.com/x/react-date-pickers/validation/) * * API: * diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx index 126dc0380d952..a884d19452aa7 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx @@ -70,6 +70,15 @@ type MonthCalendarComponent = (( props: MonthCalendarProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; +/** + * Demos: + * + * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/) + * + * API: + * + * - [MonthCalendar API](https://mui.com/x/api/date-pickers/month-calendar/) + */ export const MonthCalendar = React.forwardRef(function MonthCalendar( inProps: MonthCalendarProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx index b3a6c069f4b1c..bf6b925ac9c38 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx @@ -76,6 +76,15 @@ type YearCalendarComponent = ((props: YearCalendarProps) => React. propTypes?: any; }; +/** + * Demos: + * + * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/) + * + * API: + * + * - [YearCalendar API](https://mui.com/x/api/date-pickers/year-calendar/) + */ export const YearCalendar = React.forwardRef(function YearCalendar( inProps: YearCalendarProps, ref: React.Ref, From 612fb24d6686565dd1adac613c2d42aadf3047d6 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Wed, 1 Nov 2023 16:09:50 +0100 Subject: [PATCH 211/262] [docs] Add recipe showing how to remove cell focus outline (#10843) Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Co-authored-by: Andrew Cherniavskii --- .../style-recipes/CellFocusNoOutline.js | 30 +++++++++++++++++++ .../style-recipes/CellFocusNoOutline.tsx | 30 +++++++++++++++++++ .../CellFocusNoOutline.tsx.preview | 12 ++++++++ .../data-grid/style-recipes/style-recipes.md | 14 +++++++++ docs/data/pages.ts | 9 +++++- docs/pages/x/react-data-grid/style-recipes.js | 7 +++++ 6 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 docs/data/data-grid/style-recipes/CellFocusNoOutline.js create mode 100644 docs/data/data-grid/style-recipes/CellFocusNoOutline.tsx create mode 100644 docs/data/data-grid/style-recipes/CellFocusNoOutline.tsx.preview create mode 100644 docs/data/data-grid/style-recipes/style-recipes.md create mode 100644 docs/pages/x/react-data-grid/style-recipes.js diff --git a/docs/data/data-grid/style-recipes/CellFocusNoOutline.js b/docs/data/data-grid/style-recipes/CellFocusNoOutline.js new file mode 100644 index 0000000000000..1936ceec9db3b --- /dev/null +++ b/docs/data/data-grid/style-recipes/CellFocusNoOutline.js @@ -0,0 +1,30 @@ +import * as React from 'react'; +import { DataGridPro, gridClasses } from '@mui/x-data-grid-pro'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin']; + +export default function CellFocusNoOutline() { + const { data } = useDemoData({ + dataSet: 'Employee', + visibleFields: VISIBLE_FIELDS, + rowLength: 100, + }); + + return ( +
            + +
            + ); +} diff --git a/docs/data/data-grid/style-recipes/CellFocusNoOutline.tsx b/docs/data/data-grid/style-recipes/CellFocusNoOutline.tsx new file mode 100644 index 0000000000000..1936ceec9db3b --- /dev/null +++ b/docs/data/data-grid/style-recipes/CellFocusNoOutline.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import { DataGridPro, gridClasses } from '@mui/x-data-grid-pro'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin']; + +export default function CellFocusNoOutline() { + const { data } = useDemoData({ + dataSet: 'Employee', + visibleFields: VISIBLE_FIELDS, + rowLength: 100, + }); + + return ( +
            + +
            + ); +} diff --git a/docs/data/data-grid/style-recipes/CellFocusNoOutline.tsx.preview b/docs/data/data-grid/style-recipes/CellFocusNoOutline.tsx.preview new file mode 100644 index 0000000000000..3b8c85b269785 --- /dev/null +++ b/docs/data/data-grid/style-recipes/CellFocusNoOutline.tsx.preview @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/style-recipes/style-recipes.md b/docs/data/data-grid/style-recipes/style-recipes.md new file mode 100644 index 0000000000000..ec41d1466c0f4 --- /dev/null +++ b/docs/data/data-grid/style-recipes/style-recipes.md @@ -0,0 +1,14 @@ +# Data Grid - Styling recipes + +

            Advanced grid styling recipes.

            + +## Remove cell focus outline + +The data grid cells are actionable elements and visually indicate the `focus` state by default. +You can remove the focus outline by overriding the `:focus` and `:focus-within` styles for the cells and header cells. + +:::warning +Removing the visible `focus` state hurts the accessibility of the grid. +::: + +{{"demo": "CellFocusNoOutline.js", "bg": "inline", "defaultCodeOpen": false}} diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 6f2186ad1e628..e38cdc9b7d4e9 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -88,7 +88,14 @@ const pages: MuiPage[] = [ { pathname: '/x/react-data-grid/export' }, { pathname: '/x/react-data-grid/clipboard', title: 'Copy and paste', newFeature: true }, { pathname: '/x/react-data-grid/components', title: 'Custom subcomponents' }, - { pathname: '/x/react-data-grid/style' }, + { + pathname: '/x/react-data-grid/style-group', + title: 'Style', + children: [ + { pathname: '/x/react-data-grid/style', title: 'Overview' }, + { pathname: '/x/react-data-grid/style-recipes', title: 'Recipes' }, + ], + }, { pathname: '/x/react-data-grid/localization' }, { pathname: '/x/react-data-grid/scrolling' }, { pathname: '/x/react-data-grid/virtualization' }, diff --git a/docs/pages/x/react-data-grid/style-recipes.js b/docs/pages/x/react-data-grid/style-recipes.js new file mode 100644 index 0000000000000..bdfb64e5b91bf --- /dev/null +++ b/docs/pages/x/react-data-grid/style-recipes.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/data-grid/style-recipes/style-recipes.md?@mui/markdown'; + +export default function Page() { + return ; +} From 8fa20ff814423cd796ac29b09ecd3681963657ff Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 2 Nov 2023 14:15:11 +0200 Subject: [PATCH 212/262] Bump @types/stylis to ^4.2.2 (#10826) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- yarn.lock | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/package.json b/docs/package.json index ec4663d39fe5a..a27463c45b427 100644 --- a/docs/package.json +++ b/docs/package.json @@ -93,7 +93,7 @@ "@babel/plugin-transform-react-constant-elements": "^7.22.5", "@babel/preset-typescript": "^7.23.2", "@types/doctrine": "^0.0.8", - "@types/stylis": "^4.2.0", + "@types/stylis": "^4.2.2", "cpy-cli": "^5.0.0", "gm": "^1.25.0", "typescript-to-proptypes": "^2.2.1" diff --git a/yarn.lock b/yarn.lock index 2900eb3d5c23b..46f6d1a2a35cb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3070,7 +3070,7 @@ resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz#b49c2c70150141a15e0fa7e79cf1f92a72934ce3" integrity sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g== -"@types/stylis@^4.0.2", "@types/stylis@^4.2.0": +"@types/stylis@^4.0.2", "@types/stylis@^4.2.2": version "4.2.2" resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.2.tgz#baabb6b3aa6787e90a6bd6cd75cd8fb9a4f256a3" integrity sha512-Rm17MsTpQQP5Jq4BF7CdrxJsDufoiL/q5IbJZYZmOZAJALyijgF7BzLgobXUqraNcQdqFYLYGeglDp6QzaxPpg== From 2ecb3c2968ed647ef62284718f837829c85a81dc Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Thu, 2 Nov 2023 13:20:16 +0100 Subject: [PATCH 213/262] [charts] Allows to connect nulls (#10803) Co-authored-by: Lukas Co-authored-by: Flavien DELANGLE --- .../areas-demo/AreaChartConnectNulls.js | 25 +++++++++++++ .../areas-demo/AreaChartConnectNulls.tsx | 25 +++++++++++++ .../AreaChartConnectNulls.tsx.preview | 12 ++++++ docs/data/charts/areas-demo/areas-demo.md | 4 ++ .../charts/line-demo/LineChartConnectNulls.js | 24 ++++++++++++ .../line-demo/LineChartConnectNulls.tsx | 24 ++++++++++++ .../LineChartConnectNulls.tsx.preview | 12 ++++++ docs/data/charts/line-demo/line-demo.md | 4 ++ docs/data/charts/lines/ConnectNulls.js | 37 +++++++++++++++++++ docs/data/charts/lines/ConnectNulls.tsx | 37 +++++++++++++++++++ docs/data/charts/lines/DifferentLength.js | 3 +- docs/data/charts/lines/DifferentLength.tsx | 3 +- docs/data/charts/lines/lines.md | 10 +++++ packages/x-charts/src/LineChart/AreaPlot.tsx | 8 +++- packages/x-charts/src/LineChart/LineChart.tsx | 1 + packages/x-charts/src/LineChart/LinePlot.tsx | 8 +++- .../x-charts/src/models/seriesType/line.ts | 5 +++ 17 files changed, 236 insertions(+), 6 deletions(-) create mode 100644 docs/data/charts/areas-demo/AreaChartConnectNulls.js create mode 100644 docs/data/charts/areas-demo/AreaChartConnectNulls.tsx create mode 100644 docs/data/charts/areas-demo/AreaChartConnectNulls.tsx.preview create mode 100644 docs/data/charts/line-demo/LineChartConnectNulls.js create mode 100644 docs/data/charts/line-demo/LineChartConnectNulls.tsx create mode 100644 docs/data/charts/line-demo/LineChartConnectNulls.tsx.preview create mode 100644 docs/data/charts/lines/ConnectNulls.js create mode 100644 docs/data/charts/lines/ConnectNulls.tsx diff --git a/docs/data/charts/areas-demo/AreaChartConnectNulls.js b/docs/data/charts/areas-demo/AreaChartConnectNulls.js new file mode 100644 index 0000000000000..157246f54383d --- /dev/null +++ b/docs/data/charts/areas-demo/AreaChartConnectNulls.js @@ -0,0 +1,25 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const data = [4000, 3000, 2000, null, 1890, 2390, 3490]; +const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G']; + +export default function AreaChartConnectNulls() { + return ( + + + + + ); +} diff --git a/docs/data/charts/areas-demo/AreaChartConnectNulls.tsx b/docs/data/charts/areas-demo/AreaChartConnectNulls.tsx new file mode 100644 index 0000000000000..157246f54383d --- /dev/null +++ b/docs/data/charts/areas-demo/AreaChartConnectNulls.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const data = [4000, 3000, 2000, null, 1890, 2390, 3490]; +const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G']; + +export default function AreaChartConnectNulls() { + return ( + + + + + ); +} diff --git a/docs/data/charts/areas-demo/AreaChartConnectNulls.tsx.preview b/docs/data/charts/areas-demo/AreaChartConnectNulls.tsx.preview new file mode 100644 index 0000000000000..436f3df1d5541 --- /dev/null +++ b/docs/data/charts/areas-demo/AreaChartConnectNulls.tsx.preview @@ -0,0 +1,12 @@ + + \ No newline at end of file diff --git a/docs/data/charts/areas-demo/areas-demo.md b/docs/data/charts/areas-demo/areas-demo.md index 4f513a43ddb35..81c8db85b2022 100644 --- a/docs/data/charts/areas-demo/areas-demo.md +++ b/docs/data/charts/areas-demo/areas-demo.md @@ -21,3 +21,7 @@ title: Charts - Areas demonstration ## PercentAreaChart {{"demo": "PercentAreaChart.js"}} + +## AreaChartConnectNulls + +{{"demo": "AreaChartConnectNulls.js"}} diff --git a/docs/data/charts/line-demo/LineChartConnectNulls.js b/docs/data/charts/line-demo/LineChartConnectNulls.js new file mode 100644 index 0000000000000..6c9a5e32de469 --- /dev/null +++ b/docs/data/charts/line-demo/LineChartConnectNulls.js @@ -0,0 +1,24 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const data = [4000, 3000, 2000, null, 1890, 2390, 3490]; +const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G']; +export default function LineChartConnectNulls() { + return ( + + + + + ); +} diff --git a/docs/data/charts/line-demo/LineChartConnectNulls.tsx b/docs/data/charts/line-demo/LineChartConnectNulls.tsx new file mode 100644 index 0000000000000..6c9a5e32de469 --- /dev/null +++ b/docs/data/charts/line-demo/LineChartConnectNulls.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const data = [4000, 3000, 2000, null, 1890, 2390, 3490]; +const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G']; +export default function LineChartConnectNulls() { + return ( + + + + + ); +} diff --git a/docs/data/charts/line-demo/LineChartConnectNulls.tsx.preview b/docs/data/charts/line-demo/LineChartConnectNulls.tsx.preview new file mode 100644 index 0000000000000..ccda3551ec64c --- /dev/null +++ b/docs/data/charts/line-demo/LineChartConnectNulls.tsx.preview @@ -0,0 +1,12 @@ + + \ No newline at end of file diff --git a/docs/data/charts/line-demo/line-demo.md b/docs/data/charts/line-demo/line-demo.md index bbb6525d96912..c8b9ff2af5cc9 100644 --- a/docs/data/charts/line-demo/line-demo.md +++ b/docs/data/charts/line-demo/line-demo.md @@ -21,3 +21,7 @@ title: Charts - Line demonstration ## BiaxialLineChart {{"demo": "BiaxialLineChart.js"}} + +## LineChartConnectNulls + +{{"demo": "LineChartConnectNulls.js"}} diff --git a/docs/data/charts/lines/ConnectNulls.js b/docs/data/charts/lines/ConnectNulls.js new file mode 100644 index 0000000000000..1a543aeecda35 --- /dev/null +++ b/docs/data/charts/lines/ConnectNulls.js @@ -0,0 +1,37 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; +import { LineChart } from '@mui/x-charts/LineChart'; + +export default function ConnectNulls() { + const [connectNulls, setConnectNulls] = React.useState(true); + + return ( + + setConnectNulls(event.target.checked)} /> + } + label="connectNulls" + labelPlacement="end" + /> + + + ); +} diff --git a/docs/data/charts/lines/ConnectNulls.tsx b/docs/data/charts/lines/ConnectNulls.tsx new file mode 100644 index 0000000000000..1a543aeecda35 --- /dev/null +++ b/docs/data/charts/lines/ConnectNulls.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; +import { LineChart } from '@mui/x-charts/LineChart'; + +export default function ConnectNulls() { + const [connectNulls, setConnectNulls] = React.useState(true); + + return ( + + setConnectNulls(event.target.checked)} /> + } + label="connectNulls" + labelPlacement="end" + /> + + + ); +} diff --git a/docs/data/charts/lines/DifferentLength.js b/docs/data/charts/lines/DifferentLength.js index 5c39fd39d8286..39a0a48481df1 100644 --- a/docs/data/charts/lines/DifferentLength.js +++ b/docs/data/charts/lines/DifferentLength.js @@ -18,7 +18,8 @@ export default function DifferentLength() { valueFormatter: (value) => (value == null ? '?' : value.toString()), }, ]} - height={300} + height={200} + margin={{ top: 10, bottom: 20 }} /> ); } diff --git a/docs/data/charts/lines/DifferentLength.tsx b/docs/data/charts/lines/DifferentLength.tsx index 5c39fd39d8286..39a0a48481df1 100644 --- a/docs/data/charts/lines/DifferentLength.tsx +++ b/docs/data/charts/lines/DifferentLength.tsx @@ -18,7 +18,8 @@ export default function DifferentLength() { valueFormatter: (value) => (value == null ? '?' : value.toString()), }, ]} - height={300} + height={200} + margin={{ top: 10, bottom: 20 }} /> ); } diff --git a/docs/data/charts/lines/lines.md b/docs/data/charts/lines/lines.md index c8c4858e32fac..b2edf045f3e0a 100644 --- a/docs/data/charts/lines/lines.md +++ b/docs/data/charts/lines/lines.md @@ -54,6 +54,8 @@ For more information, see [stacking docs](/x/react-charts/stacking/). ## Partial data +### Skip missing points + Line series can have less data than the axis. You can handle lines with partial data or data starting at different points by providing `null` values. @@ -79,6 +81,14 @@ The following code plots a line for x between 2 and 4. ::: +### Connect missing points + +Line series accepts a `connectNulls` property which will continue the interpolation across points with a `null` value. +This property can link two sets of points, with `null` data between them. +However, it can not extrapolate the curve before the first non-null data point or after the last one. + +{{"demo": "ConnectNulls.js"}} + ## Styling ### Interpolation diff --git a/packages/x-charts/src/LineChart/AreaPlot.tsx b/packages/x-charts/src/LineChart/AreaPlot.tsx index 0c8de71eedc39..a27d167230576 100644 --- a/packages/x-charts/src/LineChart/AreaPlot.tsx +++ b/packages/x-charts/src/LineChart/AreaPlot.tsx @@ -53,6 +53,7 @@ function AreaPlot(props: AreaPlotProps) { yAxisKey = defaultYAxisId, stackedData, data, + connectNulls, } = series[seriesId]; const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale); @@ -77,12 +78,15 @@ function AreaPlot(props: AreaPlotProps) { y: [number, number]; }>() .x((d) => xScale(d.x)) - .defined((_, i) => data[i] != null) + .defined((_, i) => connectNulls || data[i] != null) .y0((d) => d.y && yScale(d.y[0])) .y1((d) => d.y && yScale(d.y[1])); const curve = getCurveFactory(series[seriesId].curve); - const d3Data = xData?.map((x, index) => ({ x, y: stackedData[index] })) ?? []; + const formattedData = xData?.map((x, index) => ({ x, y: stackedData[index] })) ?? []; + const d3Data = connectNulls + ? formattedData.filter((_, i) => data[i] != null) + : formattedData; return ( !!series[seriesId].area && ( diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index e6cf01e55e9e2..704a90cd2db5f 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -316,6 +316,7 @@ LineChart.propTypes = { PropTypes.shape({ area: PropTypes.bool, color: PropTypes.string, + connectNulls: PropTypes.bool, curve: PropTypes.oneOf([ 'catmullRom', 'linear', diff --git a/packages/x-charts/src/LineChart/LinePlot.tsx b/packages/x-charts/src/LineChart/LinePlot.tsx index 82109f3b8d7df..048439b8cf5db 100644 --- a/packages/x-charts/src/LineChart/LinePlot.tsx +++ b/packages/x-charts/src/LineChart/LinePlot.tsx @@ -51,6 +51,7 @@ function LinePlot(props: LinePlotProps) { yAxisKey = defaultYAxisId, stackedData, data, + connectNulls, } = series[seriesId]; const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale); @@ -75,11 +76,14 @@ function LinePlot(props: LinePlotProps) { y: [number, number]; }>() .x((d) => xScale(d.x)) - .defined((_, i) => data[i] != null) + .defined((_, i) => connectNulls || data[i] != null) .y((d) => yScale(d.y[1])); const curve = getCurveFactory(series[seriesId].curve); - const d3Data = xData?.map((x, index) => ({ x, y: stackedData[index] })) ?? []; + const formattedData = xData?.map((x, index) => ({ x, y: stackedData[index] })) ?? []; + const d3Data = connectNulls + ? formattedData.filter((_, i) => data[i] != null) + : formattedData; return ( Date: Thu, 2 Nov 2023 14:21:42 +0200 Subject: [PATCH 214/262] Bump eslint-import-resolver-webpack to ^0.13.8 (#10828) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 63 +++++++++++++++++++++++++++++----------------------- 2 files changed, 36 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index fa92dba1d111d..2d9c4c5ae0bc0 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,7 @@ "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.1.0", "eslint-config-prettier": "^9.0.0", - "eslint-import-resolver-webpack": "^0.13.7", + "eslint-import-resolver-webpack": "^0.13.8", "eslint-plugin-filenames": "^1.3.2", "eslint-plugin-import": "^2.28.1", "eslint-plugin-jsdoc": "^46.8.2", diff --git a/yarn.lock b/yarn.lock index 46f6d1a2a35cb..389fe04432b35 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3793,14 +3793,14 @@ array-unique@^0.3.2: resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428" integrity sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ== -array.prototype.find@^2.1.1, array.prototype.find@^2.2.1: - version "2.2.1" - resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.2.1.tgz#769b8182a0b535c3d76ac025abab98ba1e12467b" - integrity sha512-I2ri5Z9uMpMvnsNrHre9l3PaX+z9D0/z6F7Yt2u15q7wt0I62g5kX6xUKR1SJiefgG+u2/gJUmM8B47XRvQR6w== +array.prototype.find@^2.1.1, array.prototype.find@^2.2.2: + version "2.2.2" + resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.2.2.tgz#e862cf891e725d8f2a10e5e42d750629faaabd32" + integrity sha512-DRumkfW97iZGOfn+lIXbkVrXL04sfYKX+EfOodo8XboR5sxPDVvOjZTF/rysusa9lmhmSOeD6Vp6RKQP+eP4Tg== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" + define-properties "^1.2.0" + es-abstract "^1.22.1" es-shim-unscopables "^1.0.0" array.prototype.findlastindex@^1.2.2: @@ -6331,21 +6331,21 @@ eslint-import-resolver-node@^0.3.7: is-core-module "^2.11.0" resolve "^1.22.1" -eslint-import-resolver-webpack@^0.13.7: - version "0.13.7" - resolved "https://registry.yarnpkg.com/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.13.7.tgz#49cd0108767b1f8ff81123c7e1ae362305aad47b" - integrity sha512-2a+meyMeABBRO4K53Oj1ygkmt5lhQS79Lmx2f684Qnv6gjvD4RLOM5jfPGTXwQ0A2K03WSoKt3HRQu/uBgxF7w== +eslint-import-resolver-webpack@^0.13.8: + version "0.13.8" + resolved "https://registry.yarnpkg.com/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.13.8.tgz#5f64d1d653eefa19cdfd0f0165c996b6be7012f9" + integrity sha512-Y7WIaXWV+Q21Rz/PJgUxiW/FTBOWmU8NTLdz+nz9mMoiz5vAev/fOaQxwD7qRzTfE3HSm1qsxZ5uRd7eX+VEtA== dependencies: - array.prototype.find "^2.2.1" + array.prototype.find "^2.2.2" debug "^3.2.7" enhanced-resolve "^0.9.1" find-root "^1.1.0" - has "^1.0.3" + hasown "^2.0.0" interpret "^1.4.0" - is-core-module "^2.13.0" + is-core-module "^2.13.1" is-regex "^1.1.4" lodash "^4.17.21" - resolve "^2.0.0-next.4" + resolve "^2.0.0-next.5" semver "^5.7.2" eslint-module-utils@^2.8.0: @@ -7220,10 +7220,10 @@ fstream@^1.0.12: mkdirp ">=0.5 0" rimraf "2" -function-bind@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" - integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== +function-bind@^1.1.1, function-bind@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c" + integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA== function.prototype.name@^1.1.2, function.prototype.name@^1.1.3, function.prototype.name@^1.1.5: version "1.1.5" @@ -7730,6 +7730,13 @@ hasha@^5.0.0: is-stream "^2.0.0" type-fest "^0.8.0" +hasown@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c" + integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA== + dependencies: + function-bind "^1.1.2" + he@1.2.0, he@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" @@ -8189,12 +8196,12 @@ is-ci@3.0.1: dependencies: ci-info "^3.2.0" -is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.5.0, is-core-module@^2.8.1, is-core-module@^2.9.0: - version "2.13.0" - resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db" - integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ== +is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.13.1, is-core-module@^2.5.0, is-core-module@^2.8.1: + version "2.13.1" + resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384" + integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw== dependencies: - has "^1.0.3" + hasown "^2.0.0" is-data-descriptor@^0.1.4: version "0.1.4" @@ -12282,12 +12289,12 @@ resolve@^1.10.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.2 path-parse "^1.0.7" supports-preserve-symlinks-flag "^1.0.0" -resolve@^2.0.0-next.4: - version "2.0.0-next.4" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660" - integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ== +resolve@^2.0.0-next.4, resolve@^2.0.0-next.5: + version "2.0.0-next.5" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c" + integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA== dependencies: - is-core-module "^2.9.0" + is-core-module "^2.13.0" path-parse "^1.0.7" supports-preserve-symlinks-flag "^1.0.0" From 6729f99e4f86301221379d333b5da89cf87be515 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 2 Nov 2023 14:22:16 +0200 Subject: [PATCH 215/262] Bump github/codeql-action action to v2.22.5 (#10829) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .github/workflows/codeql.yml | 4 ++-- .github/workflows/scorecards.yml | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index ec1aff6dd40c7..0c2d282f6a906 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -19,7 +19,7 @@ jobs: uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@49abf0ba24d0b7953cb586944e918a0b92074c80 # v2.22.4 + uses: github/codeql-action/init@74483a38d39275f33fcff5f35b679b5ca4a26a99 # v2.22.5 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@49abf0ba24d0b7953cb586944e918a0b92074c80 # v2.22.4 + uses: github/codeql-action/analyze@74483a38d39275f33fcff5f35b679b5ca4a26a99 # v2.22.5 diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index 983d20b9b9295..f7dab7dc7b5aa 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@49abf0ba24d0b7953cb586944e918a0b92074c80 # v2.22.4 + uses: github/codeql-action/upload-sarif@74483a38d39275f33fcff5f35b679b5ca4a26a99 # v2.22.5 with: sarif_file: results.sarif From b88d1eaa15efae34432bf4ce897a484a2a811a2b Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 2 Nov 2023 14:23:26 +0200 Subject: [PATCH 216/262] Bump eslint to ^8.52.0 (#10830) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 44 +++++++++++++++++++++++++------------------- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 2d9c4c5ae0bc0..b018f8426a462 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "cross-env": "^7.0.3", "danger": "^11.3.0", "enzyme": "^3.11.0", - "eslint": "^8.51.0", + "eslint": "^8.52.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.1.0", "eslint-config-prettier": "^9.0.0", diff --git a/yarn.lock b/yarn.lock index 389fe04432b35..437c731a3f634 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1497,10 +1497,10 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" -"@eslint/js@8.51.0": - version "8.51.0" - resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.51.0.tgz#6d419c240cfb2b66da37df230f7e7eef801c32fa" - integrity sha512-HxjQ8Qn+4SI3/AFv6sOrDB+g6PpUTDwSJiQqOrnneEk8L71161srI9gjzzZvYVbzHiVg/BvcH95+cK/zfIt4pg== +"@eslint/js@8.52.0": + version "8.52.0" + resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.52.0.tgz#78fe5f117840f69dc4a353adf9b9cd926353378c" + integrity sha512-mjZVbpaeMZludF2fsWLD0Z9gCref1Tk4i9+wddjRvpUNqqcndPkBD09N/Mapey0b3jaXbLm2kICwFv2E64QinA== "@fast-csv/format@4.3.5": version "4.3.5" @@ -1591,12 +1591,12 @@ qs "^6.10.1" xcase "^2.0.1" -"@humanwhocodes/config-array@^0.11.11": - version "0.11.11" - resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844" - integrity sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA== +"@humanwhocodes/config-array@^0.11.13": + version "0.11.13" + resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297" + integrity sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ== dependencies: - "@humanwhocodes/object-schema" "^1.2.1" + "@humanwhocodes/object-schema" "^2.0.1" debug "^4.1.1" minimatch "^3.0.5" @@ -1605,10 +1605,10 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c" integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA== -"@humanwhocodes/object-schema@^1.2.1": - version "1.2.1" - resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" - integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== +"@humanwhocodes/object-schema@^2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044" + integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw== "@hutson/parse-repository-url@^3.0.0": version "3.0.2" @@ -3227,6 +3227,11 @@ "@typescript-eslint/types" "6.7.5" eslint-visitor-keys "^3.4.1" +"@ungap/structured-clone@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406" + integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ== + "@webassemblyjs/ast@1.11.5", "@webassemblyjs/ast@^1.11.5": version "1.11.5" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.5.tgz#6e818036b94548c1fb53b754b5cae3c9b208281c" @@ -6501,18 +6506,19 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4 resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800" integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag== -eslint@^8.51.0: - version "8.51.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.51.0.tgz#4a82dae60d209ac89a5cff1604fea978ba4950f3" - integrity sha512-2WuxRZBrlwnXi+/vFSJyjMqrNjtJqiasMzehF0shoLaW7DzS3/9Yvrmq5JiT66+pNjiX4UBnLDiKHcWAr/OInA== +eslint@^8.52.0: + version "8.52.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.52.0.tgz#d0cd4a1fac06427a61ef9242b9353f36ea7062fc" + integrity sha512-zh/JHnaixqHZsolRB/w9/02akBk9EPrOs9JwcTP2ek7yL5bVvXuRariiaAjjoJ5DvuwQ1WAE/HsMz+w17YgBCg== dependencies: "@eslint-community/eslint-utils" "^4.2.0" "@eslint-community/regexpp" "^4.6.1" "@eslint/eslintrc" "^2.1.2" - "@eslint/js" "8.51.0" - "@humanwhocodes/config-array" "^0.11.11" + "@eslint/js" "8.52.0" + "@humanwhocodes/config-array" "^0.11.13" "@humanwhocodes/module-importer" "^1.0.1" "@nodelib/fs.walk" "^1.2.8" + "@ungap/structured-clone" "^1.2.0" ajv "^6.12.4" chalk "^4.0.0" cross-spawn "^7.0.2" From 9040c5279ebe28baefbaee0d50f35f9eead0d9bf Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 2 Nov 2023 14:25:43 +0200 Subject: [PATCH 217/262] Bump @argos-ci/core to ^1.0.0 (#10834) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 30 +++++++++++------------------- 2 files changed, 12 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index b018f8426a462..021e9315e438e 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "validate": "concurrently \"yarn prettier && yarn eslint\" \"yarn proptypes\" \"yarn docs:typescript:formatted\" \"yarn docs:api\"" }, "devDependencies": { - "@argos-ci/core": "^0.12.0", + "@argos-ci/core": "^1.0.0", "@babel/cli": "^7.23.0", "@babel/core": "^7.23.2", "@babel/node": "^7.22.19", diff --git a/yarn.lock b/yarn.lock index 437c731a3f634..f5a0013fd94a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -146,19 +146,24 @@ "@jridgewell/gen-mapping" "^0.1.0" "@jridgewell/trace-mapping" "^0.3.9" -"@argos-ci/core@^0.12.0": - version "0.12.0" - resolved "https://registry.yarnpkg.com/@argos-ci/core/-/core-0.12.0.tgz#2aef8050a079ddd6c917710e2975a0bb6e890ff9" - integrity sha512-P3FO6xr2nWxliUFC6tpHgvYhiAC3VRAH6IHmfWa1V9Vcb70cEcm4OPS1diRsDNKOsmt0aO5oaTc+eO/cqgydhA== +"@argos-ci/core@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@argos-ci/core/-/core-1.0.0.tgz#7f6ca7f3ce07fd050282e1016e397828757bc37e" + integrity sha512-ZrD7p6sOAk8gnOSJOEp94y0GHns8O9QFAbClsp4Hax5gSlFMcN0UxoVk2K8f7SFKFwudHJeoK3NzypBrotAlIw== dependencies: + "@argos-ci/util" "1.0.0" axios "^1.5.0" convict "^6.2.4" debug "^4.3.4" - env-ci "^9.1.1" fast-glob "^3.3.1" sharp "^0.32.5" tmp "^0.2.1" +"@argos-ci/util@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@argos-ci/util/-/util-1.0.0.tgz#52f5270f5377e25f471951d0620c8a6b82e5aee6" + integrity sha512-aljQTWre/WoLY88WlXyK72cxxI391bQYoSVDFfcZ17dKw/BKnzVSfL7yB/oD9XrsZahzEwGZmooFPs8c27hNaQ== + "@babel/cli@^7.23.0": version "7.23.0" resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.23.0.tgz#1d7f37c44d4117c67df46749e0c86e11a58cc64b" @@ -6072,14 +6077,6 @@ entities@~3.0.1: resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4" integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q== -env-ci@^9.1.1: - version "9.1.1" - resolved "https://registry.yarnpkg.com/env-ci/-/env-ci-9.1.1.tgz#f081684c64a639c6ff5cb801bd70464bd40498a4" - integrity sha512-Im2yEWeF4b2RAMAaWvGioXk6m0UNaIjD8hj28j2ij5ldnIFrDQT0+pzDvpbRkcjurhXhf/AsBKv8P2rtmGi9Aw== - dependencies: - execa "^7.0.0" - java-properties "^1.0.2" - env-paths@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43" @@ -6690,7 +6687,7 @@ execa@^5.0.0, execa@^5.1.1: signal-exit "^3.0.3" strip-final-newline "^2.0.0" -execa@^7.0.0, execa@^7.1.1: +execa@^7.1.1: version "7.2.0" resolved "https://registry.yarnpkg.com/execa/-/execa-7.2.0.tgz#657e75ba984f42a70f38928cedc87d6f2d4fe4e9" integrity sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA== @@ -8666,11 +8663,6 @@ jalaali-js@^1.1.0: resolved "https://registry.yarnpkg.com/jalaali-js/-/jalaali-js-1.2.6.tgz#f4ee4bf686ed32bb9656f101225be4b7a1c3fd21" integrity sha512-io974va+Qyu+UfuVX3UIAgJlxLhAMx9Y8VMfh+IG00Js7hXQo1qNQuwSiSa0xxco0SVgx5HWNkaiCcV+aZ8WPw== -java-properties@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/java-properties/-/java-properties-1.0.2.tgz#ccd1fa73907438a5b5c38982269d0e771fe78211" - integrity sha512-qjdpeo2yKlYTH7nFdK0vbZWuTCesk4o63v5iVOlhMQPfuIZQfW/HI35SjfhA+4qpg36rnFSvUK5b1m+ckIblQQ== - "jest-diff@>=29.4.3 < 30": version "29.5.0" resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.5.0.tgz#e0d83a58eb5451dcc1fa61b1c3ee4e8f5a290d63" From f6a3bd41459cb3810002015f94462876b80adaae Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 2 Nov 2023 14:28:46 +0200 Subject: [PATCH 218/262] Bump typescript-eslint to ^6.9.1 (#10833) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 4 +- .../eslint-plugin-material-ui/package.json | 2 +- yarn.lock | 100 +++++++++--------- 3 files changed, 53 insertions(+), 53 deletions(-) diff --git a/package.json b/package.json index 021e9315e438e..c5fb7bbc0e6ec 100644 --- a/package.json +++ b/package.json @@ -105,8 +105,8 @@ "@types/requestidlecallback": "^0.3.6", "@types/sinon": "^10.0.20", "@types/yargs": "^17.0.29", - "@typescript-eslint/eslint-plugin": "^6.7.5", - "@typescript-eslint/parser": "^6.7.5", + "@typescript-eslint/eslint-plugin": "^6.9.1", + "@typescript-eslint/parser": "^6.9.1", "axe-core": "4.8.2", "babel-loader": "^9.1.3", "babel-plugin-istanbul": "^6.1.1", diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json index 39b5b1ae8addf..3928e91567b31 100644 --- a/packages/eslint-plugin-material-ui/package.json +++ b/packages/eslint-plugin-material-ui/package.json @@ -7,7 +7,7 @@ "devDependencies": { "@types/eslint": "^8.44.6", "@typescript-eslint/experimental-utils": "^5.62.0", - "@typescript-eslint/parser": "^6.7.5" + "@typescript-eslint/parser": "^6.9.1" }, "scripts": { "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.js' --timeout 3000" diff --git a/yarn.lock b/yarn.lock index f5a0013fd94a4..0ddd412f94cbb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3092,16 +3092,16 @@ dependencies: "@types/yargs-parser" "*" -"@typescript-eslint/eslint-plugin@^6.7.5": - version "6.7.5" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.7.5.tgz#f4024b9f63593d0c2b5bd6e4ca027e6f30934d4f" - integrity sha512-JhtAwTRhOUcP96D0Y6KYnwig/MRQbOoLGXTON2+LlyB/N35SP9j1boai2zzwXb7ypKELXMx3DVk9UTaEq1vHEw== +"@typescript-eslint/eslint-plugin@^6.9.1": + version "6.9.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.9.1.tgz#d8ce497dc0ed42066e195c8ecc40d45c7b1254f4" + integrity sha512-w0tiiRc9I4S5XSXXrMHOWgHgxbrBn1Ro+PmiYhSg2ZVdxrAJtQgzU5o2m1BfP6UOn7Vxcc6152vFjQfmZR4xEg== dependencies: "@eslint-community/regexpp" "^4.5.1" - "@typescript-eslint/scope-manager" "6.7.5" - "@typescript-eslint/type-utils" "6.7.5" - "@typescript-eslint/utils" "6.7.5" - "@typescript-eslint/visitor-keys" "6.7.5" + "@typescript-eslint/scope-manager" "6.9.1" + "@typescript-eslint/type-utils" "6.9.1" + "@typescript-eslint/utils" "6.9.1" + "@typescript-eslint/visitor-keys" "6.9.1" debug "^4.3.4" graphemer "^1.4.0" ignore "^5.2.4" @@ -3116,15 +3116,15 @@ dependencies: "@typescript-eslint/utils" "5.62.0" -"@typescript-eslint/parser@^6.7.5": - version "6.7.5" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.7.5.tgz#8d7ca3d1fbd9d5a58cc4d30b2aa797a760137886" - integrity sha512-bIZVSGx2UME/lmhLcjdVc7ePBwn7CLqKarUBL4me1C5feOd663liTGjMBGVcGr+BhnSLeP4SgwdvNnnkbIdkCw== +"@typescript-eslint/parser@^6.9.1": + version "6.9.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.9.1.tgz#4f685f672f8b9580beb38d5fb99d52fc3e34f7a3" + integrity sha512-C7AK2wn43GSaCUZ9do6Ksgi2g3mwFkMO3Cis96kzmgudoVaKyt62yNzJOktP0HDLb/iO2O0n2lBOzJgr6Q/cyg== dependencies: - "@typescript-eslint/scope-manager" "6.7.5" - "@typescript-eslint/types" "6.7.5" - "@typescript-eslint/typescript-estree" "6.7.5" - "@typescript-eslint/visitor-keys" "6.7.5" + "@typescript-eslint/scope-manager" "6.9.1" + "@typescript-eslint/types" "6.9.1" + "@typescript-eslint/typescript-estree" "6.9.1" + "@typescript-eslint/visitor-keys" "6.9.1" debug "^4.3.4" "@typescript-eslint/scope-manager@5.62.0": @@ -3135,21 +3135,21 @@ "@typescript-eslint/types" "5.62.0" "@typescript-eslint/visitor-keys" "5.62.0" -"@typescript-eslint/scope-manager@6.7.5": - version "6.7.5" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.7.5.tgz#1cf33b991043886cd67f4f3600b8e122fc14e711" - integrity sha512-GAlk3eQIwWOJeb9F7MKQ6Jbah/vx1zETSDw8likab/eFcqkjSD7BI75SDAeC5N2L0MmConMoPvTsmkrg71+B1A== +"@typescript-eslint/scope-manager@6.9.1": + version "6.9.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.9.1.tgz#e96afeb9a68ad1cd816dba233351f61e13956b75" + integrity sha512-38IxvKB6NAne3g/+MyXMs2Cda/Sz+CEpmm+KLGEM8hx/CvnSRuw51i8ukfwB/B/sESdeTGet1NH1Wj7I0YXswg== dependencies: - "@typescript-eslint/types" "6.7.5" - "@typescript-eslint/visitor-keys" "6.7.5" + "@typescript-eslint/types" "6.9.1" + "@typescript-eslint/visitor-keys" "6.9.1" -"@typescript-eslint/type-utils@6.7.5": - version "6.7.5" - resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.7.5.tgz#0a65949ec16588d8956f6d967f7d9c84ddb2d72a" - integrity sha512-Gs0qos5wqxnQrvpYv+pf3XfcRXW6jiAn9zE/K+DlmYf6FcpxeNYN0AIETaPR7rHO4K2UY+D0CIbDP9Ut0U4m1g== +"@typescript-eslint/type-utils@6.9.1": + version "6.9.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.9.1.tgz#efd5db20ed35a74d3c7d8fba51b830ecba09ce32" + integrity sha512-eh2oHaUKCK58qIeYp19F5V5TbpM52680sB4zNSz29VBQPTWIlE/hCj5P5B1AChxECe/fmZlspAWFuRniep1Skg== dependencies: - "@typescript-eslint/typescript-estree" "6.7.5" - "@typescript-eslint/utils" "6.7.5" + "@typescript-eslint/typescript-estree" "6.9.1" + "@typescript-eslint/utils" "6.9.1" debug "^4.3.4" ts-api-utils "^1.0.1" @@ -3158,10 +3158,10 @@ resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f" integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ== -"@typescript-eslint/types@6.7.5": - version "6.7.5" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.7.5.tgz#4571320fb9cf669de9a95d9849f922c3af809790" - integrity sha512-WboQBlOXtdj1tDFPyIthpKrUb+kZf2VroLZhxKa/VlwLlLyqv/PwUNgL30BlTVZV1Wu4Asu2mMYPqarSO4L5ZQ== +"@typescript-eslint/types@6.9.1": + version "6.9.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.9.1.tgz#a6cfc20db0fcedcb2f397ea728ef583e0ee72459" + integrity sha512-BUGslGOb14zUHOUmDB2FfT6SI1CcZEJYfF3qFwBeUrU6srJfzANonwRYHDpLBuzbq3HaoF2XL2hcr01c8f8OaQ== "@typescript-eslint/typescript-estree@5.62.0": version "5.62.0" @@ -3176,13 +3176,13 @@ semver "^7.3.7" tsutils "^3.21.0" -"@typescript-eslint/typescript-estree@6.7.5": - version "6.7.5" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.7.5.tgz#4578de1a26e9f24950f029a4f00d1bfe41f15a39" - integrity sha512-NhJiJ4KdtwBIxrKl0BqG1Ur+uw7FiOnOThcYx9DpOGJ/Abc9z2xNzLeirCG02Ig3vkvrc2qFLmYSSsaITbKjlg== +"@typescript-eslint/typescript-estree@6.9.1": + version "6.9.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.9.1.tgz#8c77910a49a04f0607ba94d78772da07dab275ad" + integrity sha512-U+mUylTHfcqeO7mLWVQ5W/tMLXqVpRv61wm9ZtfE5egz7gtnmqVIw9ryh0mgIlkKk9rZLY3UHygsBSdB9/ftyw== dependencies: - "@typescript-eslint/types" "6.7.5" - "@typescript-eslint/visitor-keys" "6.7.5" + "@typescript-eslint/types" "6.9.1" + "@typescript-eslint/visitor-keys" "6.9.1" debug "^4.3.4" globby "^11.1.0" is-glob "^4.0.3" @@ -3203,17 +3203,17 @@ eslint-scope "^5.1.1" semver "^7.3.7" -"@typescript-eslint/utils@6.7.5": - version "6.7.5" - resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.7.5.tgz#ab847b53d6b65e029314b8247c2336843dba81ab" - integrity sha512-pfRRrH20thJbzPPlPc4j0UNGvH1PjPlhlCMq4Yx7EGjV7lvEeGX0U6MJYe8+SyFutWgSHsdbJ3BXzZccYggezA== +"@typescript-eslint/utils@6.9.1": + version "6.9.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.9.1.tgz#763da41281ef0d16974517b5f0d02d85897a1c1e" + integrity sha512-L1T0A5nFdQrMVunpZgzqPL6y2wVreSyHhKGZryS6jrEN7bD9NplVAyMryUhXsQ4TWLnZmxc2ekar/lSGIlprCA== dependencies: "@eslint-community/eslint-utils" "^4.4.0" "@types/json-schema" "^7.0.12" "@types/semver" "^7.5.0" - "@typescript-eslint/scope-manager" "6.7.5" - "@typescript-eslint/types" "6.7.5" - "@typescript-eslint/typescript-estree" "6.7.5" + "@typescript-eslint/scope-manager" "6.9.1" + "@typescript-eslint/types" "6.9.1" + "@typescript-eslint/typescript-estree" "6.9.1" semver "^7.5.4" "@typescript-eslint/visitor-keys@5.62.0": @@ -3224,12 +3224,12 @@ "@typescript-eslint/types" "5.62.0" eslint-visitor-keys "^3.3.0" -"@typescript-eslint/visitor-keys@6.7.5": - version "6.7.5" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.7.5.tgz#84c68d6ceb5b12d5246b918b84f2b79affd6c2f1" - integrity sha512-3MaWdDZtLlsexZzDSdQWsFQ9l9nL8B80Z4fImSpyllFC/KLqWQRdEcB+gGGO+N3Q2uL40EsG66wZLsohPxNXvg== +"@typescript-eslint/visitor-keys@6.9.1": + version "6.9.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.9.1.tgz#6753a9225a0ba00459b15d6456b9c2780b66707d" + integrity sha512-MUaPUe/QRLEffARsmNfmpghuQkW436DvESW+h+M52w0coICHRfD6Np9/K6PdACwnrq1HmuLl+cSPZaJmeVPkSw== dependencies: - "@typescript-eslint/types" "6.7.5" + "@typescript-eslint/types" "6.9.1" eslint-visitor-keys "^3.4.1" "@ungap/structured-clone@^1.2.0": From f84511dff9751d0f58a72bc8a50832cc4299e7bd Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Thu, 2 Nov 2023 14:00:04 +0100 Subject: [PATCH 219/262] [charts] Add animation on pie chart (#10782) --- docs/data/charts/pie/PieActiveArc.js | 9 +- docs/data/charts/pie/PieActiveArc.tsx | 9 +- docs/data/charts/pie/PieActiveArc.tsx.preview | 7 +- docs/data/charts/pie/PieAnimation.js | 94 ++++++++++ docs/data/charts/pie/PieAnimation.tsx | 93 ++++++++++ docs/data/charts/pie/pie.md | 19 ++ docs/pages/x/api/charts/pie-chart.json | 1 + docs/pages/x/api/charts/pie-plot.json | 1 + .../api-docs/charts/pie-chart.json | 5 + .../api-docs/charts/pie-plot.json | 5 + packages/x-charts/src/PieChart/PieArc.tsx | 107 ++++------- .../x-charts/src/PieChart/PieArcLabel.tsx | 101 +++++++---- .../x-charts/src/PieChart/PieArcLabelPlot.tsx | 159 +++++++++++++++++ packages/x-charts/src/PieChart/PieArcPlot.tsx | 154 ++++++++++++++++ packages/x-charts/src/PieChart/PieChart.tsx | 21 ++- packages/x-charts/src/PieChart/PiePlot.tsx | 166 ++++++++---------- .../src/PieChart/dataTransform/transition.ts | 103 +++++++++++ .../dataTransform/useTransformData.ts | 113 ++++++++++++ .../x-charts/src/models/seriesType/pie.ts | 6 +- 19 files changed, 950 insertions(+), 223 deletions(-) create mode 100644 docs/data/charts/pie/PieAnimation.js create mode 100644 docs/data/charts/pie/PieAnimation.tsx create mode 100644 packages/x-charts/src/PieChart/PieArcLabelPlot.tsx create mode 100644 packages/x-charts/src/PieChart/PieArcPlot.tsx create mode 100644 packages/x-charts/src/PieChart/dataTransform/transition.ts create mode 100644 packages/x-charts/src/PieChart/dataTransform/useTransformData.ts diff --git a/docs/data/charts/pie/PieActiveArc.js b/docs/data/charts/pie/PieActiveArc.js index 293730d328b41..4c967f452fc0a 100644 --- a/docs/data/charts/pie/PieActiveArc.js +++ b/docs/data/charts/pie/PieActiveArc.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { PieChart, pieArcClasses } from '@mui/x-charts/PieChart'; +import { PieChart } from '@mui/x-charts/PieChart'; const data = [ { id: 0, value: 10, label: 'series A' }, @@ -14,14 +14,9 @@ export default function PieActiveArc() { { data, highlightScope: { faded: 'global', highlighted: 'item' }, - faded: { innerRadius: 30, additionalRadius: -30 }, + faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' }, }, ]} - sx={{ - [`& .${pieArcClasses.faded}`]: { - fill: 'gray', - }, - }} height={200} /> ); diff --git a/docs/data/charts/pie/PieActiveArc.tsx b/docs/data/charts/pie/PieActiveArc.tsx index 293730d328b41..4c967f452fc0a 100644 --- a/docs/data/charts/pie/PieActiveArc.tsx +++ b/docs/data/charts/pie/PieActiveArc.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { PieChart, pieArcClasses } from '@mui/x-charts/PieChart'; +import { PieChart } from '@mui/x-charts/PieChart'; const data = [ { id: 0, value: 10, label: 'series A' }, @@ -14,14 +14,9 @@ export default function PieActiveArc() { { data, highlightScope: { faded: 'global', highlighted: 'item' }, - faded: { innerRadius: 30, additionalRadius: -30 }, + faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' }, }, ]} - sx={{ - [`& .${pieArcClasses.faded}`]: { - fill: 'gray', - }, - }} height={200} /> ); diff --git a/docs/data/charts/pie/PieActiveArc.tsx.preview b/docs/data/charts/pie/PieActiveArc.tsx.preview index d70e759ba08d2..23a3a41ec8384 100644 --- a/docs/data/charts/pie/PieActiveArc.tsx.preview +++ b/docs/data/charts/pie/PieActiveArc.tsx.preview @@ -3,13 +3,8 @@ { data, highlightScope: { faded: 'global', highlighted: 'item' }, - faded: { innerRadius: 30, additionalRadius: -30 }, + faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' }, }, ]} - sx={{ - [`& .${pieArcClasses.faded}`]: { - fill: 'gray', - }, - }} height={200} /> \ No newline at end of file diff --git a/docs/data/charts/pie/PieAnimation.js b/docs/data/charts/pie/PieAnimation.js new file mode 100644 index 0000000000000..2b6fdaf562c38 --- /dev/null +++ b/docs/data/charts/pie/PieAnimation.js @@ -0,0 +1,94 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import Slider from '@mui/material/Slider'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; +import { PieChart } from '@mui/x-charts/PieChart'; + +const data1 = [ + { label: 'Group A', value: 400 }, + { label: 'Group B', value: 300 }, + { label: 'Group C', value: 300 }, + { label: 'Group D', value: 200 }, +]; + +const data2 = [ + { label: '1', value: 100 }, + { label: '2', value: 300 }, + { label: '3', value: 100 }, + { label: '4', value: 80 }, + { label: '5', value: 40 }, + { label: '6', value: 30 }, + { label: '7', value: 50 }, + { label: '8', value: 100 }, + { label: '9', value: 200 }, + { label: '10', value: 150 }, + { label: '11', value: 50 }, +]; + +export default function PieAnimation() { + const [radius, setRadius] = React.useState(50); + const [itemNb, setItemNb] = React.useState(5); + const [skipAnimation, setSkipAnimation] = React.useState(false); + + const handleItemNbChange = (event, newValue) => { + if (typeof newValue !== 'number') { + return; + } + setItemNb(newValue); + }; + const handleRadius = (event, newValue) => { + if (typeof newValue !== 'number') { + return; + } + setRadius(newValue); + }; + + return ( + + params.label ?? '', + }, + ]} + skipAnimation={skipAnimation} + /> + setSkipAnimation(event.target.checked)} /> + } + label="skipAnimation" + labelPlacement="end" + /> + + Number of items + + + + Radius + + + + ); +} diff --git a/docs/data/charts/pie/PieAnimation.tsx b/docs/data/charts/pie/PieAnimation.tsx new file mode 100644 index 0000000000000..f25df849a2ad3 --- /dev/null +++ b/docs/data/charts/pie/PieAnimation.tsx @@ -0,0 +1,93 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import Slider from '@mui/material/Slider'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; +import { PieChart } from '@mui/x-charts/PieChart'; + +const data1 = [ + { label: 'Group A', value: 400 }, + { label: 'Group B', value: 300 }, + { label: 'Group C', value: 300 }, + { label: 'Group D', value: 200 }, +]; +const data2 = [ + { label: '1', value: 100 }, + { label: '2', value: 300 }, + { label: '3', value: 100 }, + { label: '4', value: 80 }, + { label: '5', value: 40 }, + { label: '6', value: 30 }, + { label: '7', value: 50 }, + { label: '8', value: 100 }, + { label: '9', value: 200 }, + { label: '10', value: 150 }, + { label: '11', value: 50 }, +]; + +export default function PieAnimation() { + const [radius, setRadius] = React.useState(50); + const [itemNb, setItemNb] = React.useState(5); + const [skipAnimation, setSkipAnimation] = React.useState(false); + + const handleItemNbChange = (event: Event, newValue: number | number[]) => { + if (typeof newValue !== 'number') { + return; + } + setItemNb(newValue); + }; + const handleRadius = (event: Event, newValue: number | number[]) => { + if (typeof newValue !== 'number') { + return; + } + setRadius(newValue); + }; + + return ( + + params.label ?? '', + }, + ]} + skipAnimation={skipAnimation} + /> + setSkipAnimation(event.target.checked)} /> + } + label="skipAnimation" + labelPlacement="end" + /> + + Number of items + + + + Radius + + + + ); +} diff --git a/docs/data/charts/pie/pie.md b/docs/data/charts/pie/pie.md index 8401e7ed7ea69..5b765a4b6b578 100644 --- a/docs/data/charts/pie/pie.md +++ b/docs/data/charts/pie/pie.md @@ -82,3 +82,22 @@ If you do not want to provide absolute values, you can use `additionalRadius` wh This value can be negative to reduce arc size. {{"demo": "PieActiveArc.js"}} + +## Animation + +To skip animation at the creation and update of your chart you can use the `skipAnimation` prop. +When set to `true` it skips animation powered by `@react-spring/web`. + +Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important). + +```jsx +// For a single component chart + + +// For a composed chart + + + +``` + +{{"demo": "PieAnimation.js"}} diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index 486f97f025947..89b1b13028991 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/docs/pages/x/api/charts/pie-chart.json @@ -24,6 +24,7 @@ }, "default": "null" }, + "skipAnimation": { "type": { "name": "bool" } }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "topAxis": { "type": { diff --git a/docs/pages/x/api/charts/pie-plot.json b/docs/pages/x/api/charts/pie-plot.json index f5af33a00128d..9ed3ce567fd6b 100644 --- a/docs/pages/x/api/charts/pie-plot.json +++ b/docs/pages/x/api/charts/pie-plot.json @@ -7,6 +7,7 @@ "describedArgs": ["event", "pieItemIdentifier", "item"] } }, + "skipAnimation": { "type": { "name": "bool" } }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, diff --git a/docs/translations/api-docs/charts/pie-chart.json b/docs/translations/api-docs/charts/pie-chart.json index 80ba8d6563ace..cab672234cc41 100644 --- a/docs/translations/api-docs/charts/pie-chart.json +++ b/docs/translations/api-docs/charts/pie-chart.json @@ -21,6 +21,11 @@ "deprecated": "", "typeDescriptions": {} }, + "skipAnimation": { + "description": "If true, animations are skiped.", + "deprecated": "", + "typeDescriptions": {} + }, "slotProps": { "description": "The props used for each component slot.", "deprecated": "", diff --git a/docs/translations/api-docs/charts/pie-plot.json b/docs/translations/api-docs/charts/pie-plot.json index 42114240a62b5..74758708869aa 100644 --- a/docs/translations/api-docs/charts/pie-plot.json +++ b/docs/translations/api-docs/charts/pie-plot.json @@ -10,6 +10,11 @@ "item": "The pie item." } }, + "skipAnimation": { + "description": "If true, animations are skiped.", + "deprecated": "", + "typeDescriptions": {} + }, "slotProps": { "description": "The props used for each component slot.", "deprecated": "", diff --git a/packages/x-charts/src/PieChart/PieArc.tsx b/packages/x-charts/src/PieChart/PieArc.tsx index c5bed141dd3d4..07445f14198e9 100644 --- a/packages/x-charts/src/PieChart/PieArc.tsx +++ b/packages/x-charts/src/PieChart/PieArc.tsx @@ -1,18 +1,12 @@ import * as React from 'react'; -import { arc as d3Arc, PieArcDatum as D3PieArcDatum } from 'd3-shape'; -import PropTypes from 'prop-types'; +import { arc as d3Arc } from 'd3-shape'; +import { animated, SpringValue, to } from '@react-spring/web'; import composeClasses from '@mui/utils/composeClasses'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; import { styled } from '@mui/material/styles'; import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; import { HighlightScope } from '../context/HighlightProvider'; -import { InteractionContext } from '../context/InteractionProvider'; -import { - getIsFaded, - getIsHighlighted, - useInteractionItemProps, -} from '../hooks/useInteractionItemProps'; -import { PieSeriesType } from '../models/seriesType/pie'; +import { useInteractionItemProps } from '../hooks/useInteractionItemProps'; export interface PieArcClasses { /** Styles applied to the root element. */ @@ -53,27 +47,25 @@ const useUtilityClasses = (ownerState: PieArcOwnerState) => { return composeClasses(slots, getPieArcUtilityClass, classes); }; -const PieArcRoot = styled('path', { +const PieArcRoot = styled(animated.path, { name: 'MuiPieArc', slot: 'Root', overridesResolver: (_, styles) => styles.arc, -})<{ ownerState: PieArcOwnerState }>(({ ownerState, theme }) => ({ +})<{ ownerState: PieArcOwnerState }>(({ theme }) => ({ stroke: (theme.vars || theme).palette.background.paper, strokeWidth: 1, strokeLinejoin: 'round', - fill: ownerState.color, - opacity: ownerState.isFaded ? 0.3 : 1, })); -export type PieArcProps = Omit & - React.ComponentPropsWithoutRef<'path'> & - D3PieArcDatum & { +export type PieArcProps = PieArcOwnerState & + React.ComponentPropsWithoutRef<'path'> & { + startAngle: SpringValue; + endAngle: SpringValue; + innerRadius: SpringValue; + outerRadius: SpringValue; + cornerRadius: SpringValue; + paddingAngle: SpringValue; highlightScope?: Partial; - innerRadius: PieSeriesType['innerRadius']; - outerRadius: number; - cornerRadius: PieSeriesType['cornerRadius']; - highlighted: PieSeriesType['highlighted']; - faded: PieSeriesType['faded']; onClick?: (event: React.MouseEvent) => void; }; @@ -84,28 +76,18 @@ export default function PieArc(props: PieArcProps) { classes: innerClasses, color, highlightScope, - innerRadius: baseInnerRadius = 0, - outerRadius: baseOuterRadius, - cornerRadius: baseCornerRadius = 0, - highlighted, - faded = { additionalRadius: -5 }, onClick, + isFaded, + isHighlighted, + startAngle, + endAngle, + paddingAngle, + innerRadius, + outerRadius, + cornerRadius, ...other } = props; - const getInteractionItemProps = useInteractionItemProps(highlightScope); - - const { item } = React.useContext(InteractionContext); - - const isHighlighted = getIsHighlighted( - item, - { type: 'pie', seriesId: id, dataIndex }, - highlightScope, - ); - - const isFaded = - !isHighlighted && getIsFaded(item, { type: 'pie', seriesId: id, dataIndex }, highlightScope); - const ownerState = { id, dataIndex, @@ -116,48 +98,27 @@ export default function PieArc(props: PieArcProps) { }; const classes = useUtilityClasses(ownerState); - const attibuesOverride = { - additionalRadius: 0, - ...((isFaded && faded) || (isHighlighted && highlighted) || {}), - }; - const innerRadius = Math.max(0, attibuesOverride.innerRadius ?? baseInnerRadius); - - const outerRadius = Math.max( - 0, - attibuesOverride.outerRadius ?? baseOuterRadius + attibuesOverride.additionalRadius, - ); - const cornerRadius = attibuesOverride.cornerRadius ?? baseCornerRadius; + const getInteractionItemProps = useInteractionItemProps(highlightScope); return ( + d3Arc().cornerRadius(cR)({ + padAngle: pA, + startAngle: sA, + endAngle: eA, + innerRadius: iR, + outerRadius: oR, + })!, + )} onClick={onClick} cursor={onClick ? 'pointer' : 'unset'} ownerState={ownerState} className={classes.root} + {...other} {...getInteractionItemProps({ type: 'pie', seriesId: id, dataIndex })} /> ); } - -PieArc.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - classes: PropTypes.object, - cornerRadius: PropTypes.number, - dataIndex: PropTypes.number.isRequired, - highlightScope: PropTypes.shape({ - faded: PropTypes.oneOf(['global', 'none', 'series']), - highlighted: PropTypes.oneOf(['item', 'none', 'series']), - }), - innerRadius: PropTypes.number, - outerRadius: PropTypes.number.isRequired, -} as any; diff --git a/packages/x-charts/src/PieChart/PieArcLabel.tsx b/packages/x-charts/src/PieChart/PieArcLabel.tsx index d698393291f6f..ae41ede0319b4 100644 --- a/packages/x-charts/src/PieChart/PieArcLabel.tsx +++ b/packages/x-charts/src/PieChart/PieArcLabel.tsx @@ -1,14 +1,11 @@ import * as React from 'react'; -import { arc as d3Arc, PieArcDatum as D3PieArcDatum } from 'd3-shape'; +import { animated, SpringValue, to } from '@react-spring/web'; +import { arc as d3Arc } from 'd3-shape'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; import { styled } from '@mui/material/styles'; import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; -import { InteractionContext } from '../context/InteractionProvider'; -import { getIsFaded, getIsHighlighted } from '../hooks/useInteractionItemProps'; -import { HighlightScope } from '../context/HighlightProvider'; -import { PieSeriesType } from '../models/seriesType/pie'; export interface PieArcLabelClasses { /** Styles applied to the root element. */ @@ -23,7 +20,6 @@ export type PieArcLabelClassKey = keyof PieArcLabelClasses; interface PieArcLabelOwnerState { id: string; - dataIndex: number; color: string; isFaded: boolean; isHighlighted: boolean; @@ -49,54 +45,78 @@ const useUtilityClasses = (ownerState: PieArcLabelOwnerState) => { return composeClasses(slots, getPieArcLabelUtilityClass, classes); }; -const PieArcLabelRoot = styled('text', { +const PieArcLabelRoot = styled(animated.text, { name: 'MuiPieArcLabel', slot: 'Root', overridesResolver: (_, styles) => styles.root, })(({ theme }) => ({ fill: (theme.vars || theme).palette.text.primary, textAnchor: 'middle', + dominantBaseline: 'middle', })); -export type PieArcLabelProps = Omit & - React.ComponentPropsWithoutRef<'path'> & - D3PieArcDatum & { - highlightScope?: Partial; - innerRadius: PieSeriesType['innerRadius']; - outerRadius: number; - cornerRadius: PieSeriesType['cornerRadius']; +export type PieArcLabelProps = PieArcLabelOwnerState & + React.ComponentPropsWithoutRef<'text'> & { + startAngle: SpringValue; + endAngle: SpringValue; + innerRadius: SpringValue; + outerRadius: SpringValue; + cornerRadius: SpringValue; + paddingAngle: SpringValue; } & { formattedArcLabel?: string | null; }; +/** + * Helper to compute label position. + * It's not an inline function because we need it in inerpolation. + */ +const getLabelPosition = + (formattedArcLabel: string | null | undefined, variable: 'x' | 'y') => + ( + startAngle: number, + endAngle: number, + padAngle: number, + innerRadius: number, + outerRadius: number, + cornerRadius: number, + ) => { + if (!formattedArcLabel) { + return 0; + } + const [x, y] = d3Arc().cornerRadius(cornerRadius).centroid({ + padAngle, + startAngle, + endAngle, + innerRadius, + outerRadius, + })!; + if (variable === 'x') { + return x; + } + return y; + }; + export default function PieArcLabel(props: PieArcLabelProps) { const { id, - dataIndex, classes: innerClasses, color, - highlightScope, - innerRadius = 0, + startAngle, + endAngle, + paddingAngle, + innerRadius, outerRadius, - cornerRadius = 0, + cornerRadius, formattedArcLabel, + isHighlighted, + isFaded, + style, ...other } = props; - const { item } = React.useContext(InteractionContext); - - const isHighlighted = getIsHighlighted( - item, - { type: 'pie', seriesId: id, dataIndex }, - highlightScope, - ); - - const isFaded = - !isHighlighted && getIsFaded(item, { type: 'pie', seriesId: id, dataIndex }, highlightScope); - const ownerState = { id, - dataIndex, classes: innerClasses, color, isFaded, @@ -104,13 +124,22 @@ export default function PieArcLabel(props: PieArcLabelProps) { }; const classes = useUtilityClasses(ownerState); - const arcLabelPosition = formattedArcLabel - ? d3Arc() - .cornerRadius(cornerRadius) - .centroid({ ...other, innerRadius, outerRadius }) - : [0, 0]; return ( - + {formattedArcLabel} ); diff --git a/packages/x-charts/src/PieChart/PieArcLabelPlot.tsx b/packages/x-charts/src/PieChart/PieArcLabelPlot.tsx new file mode 100644 index 0000000000000..af9460b98bd49 --- /dev/null +++ b/packages/x-charts/src/PieChart/PieArcLabelPlot.tsx @@ -0,0 +1,159 @@ +import * as React from 'react'; +import { useTransition } from '@react-spring/web'; +import { + DefaultizedPieSeriesType, + DefaultizedPieValueType, + PieSeriesType, +} from '../models/seriesType/pie'; +import { defaultLabelTransitionConfig } from './dataTransform/transition'; +import { + AnimatedObject, + ValueWithHighlight, + useTransformData, +} from './dataTransform/useTransformData'; +import PieArcLabel, { PieArcLabelProps } from './PieArcLabel'; +import { DefaultizedProps } from '../models/helpers'; + +const RATIO = 180 / Math.PI; + +function getItemLabel( + arcLabel: PieSeriesType['arcLabel'], + arcLabelMinAngle: number, + item: DefaultizedPieValueType, +) { + if (!arcLabel) { + return null; + } + const angle = (item.endAngle - item.startAngle) * RATIO; + if (angle < arcLabelMinAngle) { + return null; + } + + if (typeof arcLabel === 'string') { + return item[arcLabel]?.toString(); + } + + return arcLabel(item); +} + +export interface PieArcLabelPlotSlotsComponent { + pieArcLabel?: React.JSXElementConstructor; +} + +export interface PieArcLabelPlotSlotComponentProps { + pieArcLabel?: Partial; +} + +export interface PieArcLabelPlotProps + extends DefaultizedProps< + Pick< + DefaultizedPieSeriesType, + | 'data' + | 'faded' + | 'highlighted' + | 'innerRadius' + | 'outerRadius' + | 'cornerRadius' + | 'paddingAngle' + | 'arcLabel' + | 'arcLabelMinAngle' + | 'id' + | 'highlightScope' + >, + 'outerRadius' + > { + /** + * Overridable component slots. + * @default {} + */ + slots?: PieArcLabelPlotSlotsComponent; + /** + * The props used for each component slot. + * @default {} + */ + slotProps?: PieArcLabelPlotSlotComponentProps; + /** + * If `true`, animations are skiped. + * @default false + */ + skipAnimation?: boolean; +} + +export function PieArcLabelPlot(props: PieArcLabelPlotProps) { + const { + slots, + slotProps, + innerRadius = 0, + outerRadius, + cornerRadius = 0, + paddingAngle = 0, + id, + highlightScope, + highlighted, + faded = { additionalRadius: -5 }, + data, + arcLabel, + arcLabelMinAngle = 0, + skipAnimation, + ...other + } = props; + + const transformedData = useTransformData({ + innerRadius, + outerRadius, + cornerRadius, + paddingAngle, + id, + highlightScope, + highlighted, + faded, + data, + }); + const transition = useTransition(transformedData, { + ...defaultLabelTransitionConfig, + immediate: skipAnimation, + }); + + if (data.length === 0) { + return null; + } + + const ArcLabel = slots?.pieArcLabel ?? PieArcLabel; + + return ( + + {transition( + ( + { + startAngle, + endAngle, + paddingAngle: pA, + innerRadius: iR, + outerRadius: oR, + cornerRadius: cR, + ...style + }, + item, + ) => { + return ( + + ); + }, + )} + + ); +} diff --git a/packages/x-charts/src/PieChart/PieArcPlot.tsx b/packages/x-charts/src/PieChart/PieArcPlot.tsx new file mode 100644 index 0000000000000..d4565ef4d905e --- /dev/null +++ b/packages/x-charts/src/PieChart/PieArcPlot.tsx @@ -0,0 +1,154 @@ +import * as React from 'react'; +import { useTransition } from '@react-spring/web'; +import PieArc, { PieArcProps } from './PieArc'; +import { + DefaultizedPieSeriesType, + DefaultizedPieValueType, + PieItemIdentifier, +} from '../models/seriesType/pie'; +import { defaultTransitionConfig } from './dataTransform/transition'; +import { + AnimatedObject, + ValueWithHighlight, + useTransformData, +} from './dataTransform/useTransformData'; +import { DefaultizedProps } from '../models/helpers'; + +export interface PieArcPlotSlotsComponent { + pieArc?: React.JSXElementConstructor; +} + +export interface PieArcPlotSlotComponentProps { + pieArc?: Partial; +} + +export interface PieArcPlotProps + extends DefaultizedProps< + Pick< + DefaultizedPieSeriesType, + | 'data' + | 'faded' + | 'highlighted' + | 'innerRadius' + | 'outerRadius' + | 'cornerRadius' + | 'paddingAngle' + | 'id' + | 'highlightScope' + >, + 'outerRadius' + > { + /** + * Overridable component slots. + * @default {} + */ + slots?: PieArcPlotSlotsComponent; + /** + * The props used for each component slot. + * @default {} + */ + slotProps?: PieArcPlotSlotComponentProps; + /** + * Callback fired when a pie item is clicked. + * @param {React.MouseEvent} event The event source of the callback. + * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier. + * @param {DefaultizedPieValueType} item The pie item. + */ + onClick?: ( + event: React.MouseEvent, + pieItemIdentifier: PieItemIdentifier, + item: DefaultizedPieValueType, + ) => void; + /** + * If `true`, animations are skiped. + * @default false + */ + skipAnimation?: boolean; +} + +export function PieArcPlot(props: PieArcPlotProps) { + const { + slots, + slotProps, + innerRadius = 0, + outerRadius, + cornerRadius = 0, + paddingAngle = 0, + id, + highlightScope, + highlighted, + faded = { additionalRadius: -5 }, + data, + onClick, + skipAnimation, + ...other + } = props; + + const transformedData = useTransformData({ + innerRadius, + outerRadius, + cornerRadius, + paddingAngle, + id, + highlightScope, + highlighted, + faded, + data, + }); + const transition = useTransition(transformedData, { + ...defaultTransitionConfig, + immediate: skipAnimation, + }); + + if (data.length === 0) { + return null; + } + + const Arc = slots?.pieArc ?? PieArc; + + return ( + + {transition( + ( + { + startAngle, + endAngle, + paddingAngle: pA, + innerRadius: iR, + outerRadius: oR, + cornerRadius: cR, + ...style + }, + item, + _, + index, + ) => { + return ( + { + onClick(event, { type: 'pie', seriesId: id, dataIndex: index }, item); + }) + } + {...slotProps?.pieArc} + /> + ); + }, + )} + + ); +} diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index 268c9788342bd..56b8880894bfd 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -30,6 +30,7 @@ export interface PieChartSlotsComponent PiePlotSlotsComponent, ChartsLegendSlotsComponent, ChartsTooltipSlotsComponent {} + export interface PieChartSlotComponentProps extends ChartsAxisSlotComponentProps, PiePlotSlotComponentProps, @@ -38,7 +39,8 @@ export interface PieChartSlotComponentProps export interface PieChartProps extends Omit, - Omit { + Omit, + Pick { series: MakeOptional>, 'type'>[]; tooltip?: ChartsTooltipProps; axisHighlight?: ChartsAxisHighlightProps; @@ -80,6 +82,7 @@ function PieChart(props: PieChartProps) { sx, tooltip = { trigger: 'item' }, axisHighlight = { x: 'none', y: 'none' }, + skipAnimation, legend = { direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }, topAxis = null, leftAxis = null, @@ -124,7 +127,12 @@ function PieChart(props: PieChartProps) { slots={slots} slotProps={slotProps} /> - + @@ -297,15 +305,19 @@ PieChart.propTypes = { endAngle: PropTypes.number, faded: PropTypes.shape({ additionalRadius: PropTypes.number, + color: PropTypes.string, cornerRadius: PropTypes.number, innerRadius: PropTypes.number, outerRadius: PropTypes.number, + paddingAngle: PropTypes.number, }), highlighted: PropTypes.shape({ additionalRadius: PropTypes.number, + color: PropTypes.string, cornerRadius: PropTypes.number, innerRadius: PropTypes.number, outerRadius: PropTypes.number, + paddingAngle: PropTypes.number, }), highlightScope: PropTypes.shape({ faded: PropTypes.oneOf(['global', 'none', 'series']), @@ -324,6 +336,11 @@ PieChart.propTypes = { valueFormatter: PropTypes.func, }), ).isRequired, + /** + * If `true`, animations are skiped. + * @default false + */ + skipAnimation: PropTypes.bool, /** * The props used for each component slot. * @default {} diff --git a/packages/x-charts/src/PieChart/PiePlot.tsx b/packages/x-charts/src/PieChart/PiePlot.tsx index 574a300ae7818..130f3d92f84f7 100644 --- a/packages/x-charts/src/PieChart/PiePlot.tsx +++ b/packages/x-charts/src/PieChart/PiePlot.tsx @@ -1,48 +1,28 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { SeriesContext } from '../context/SeriesContextProvider'; -import PieArc, { PieArcProps } from './PieArc'; -import PieArcLabel, { PieArcLabelProps } from './PieArcLabel'; import { DrawingContext } from '../context/DrawingProvider'; import { - DefaultizedPieValueType, - PieItemIdentifier, - PieSeriesType, -} from '../models/seriesType/pie'; - -const RATIO = 180 / Math.PI; - -function getItemLabel( - arcLabel: PieSeriesType['arcLabel'], - arcLabelMinAngle: number, - item: DefaultizedPieValueType, -) { - if (!arcLabel) { - return null; - } - const angle = (item.endAngle - item.startAngle) * RATIO; - if (angle < arcLabelMinAngle) { - return null; - } - - if (typeof arcLabel === 'string') { - return item[arcLabel]?.toString(); - } - - return arcLabel(item); -} + PieArcPlot, + PieArcPlotProps, + PieArcPlotSlotComponentProps, + PieArcPlotSlotsComponent, +} from './PieArcPlot'; +import { + PieArcLabelPlotSlotsComponent, + PieArcLabelPlotSlotComponentProps, + PieArcLabelPlot, +} from './PieArcLabelPlot'; -export interface PiePlotSlotsComponent { - pieArc?: React.JSXElementConstructor; - pieArcLabel?: React.JSXElementConstructor; -} +export interface PiePlotSlotsComponent + extends PieArcPlotSlotsComponent, + PieArcLabelPlotSlotsComponent {} -export interface PiePlotSlotComponentProps { - pieArc?: Partial; - pieArcLabel?: Partial; -} +export interface PiePlotSlotComponentProps + extends PieArcPlotSlotComponentProps, + PieArcLabelPlotSlotComponentProps {} -export interface PiePlotProps { +export interface PiePlotProps extends Pick { /** * Overridable component slots. * @default {} @@ -59,11 +39,6 @@ export interface PiePlotProps { * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier. * @param {DefaultizedPieValueType} item The pie item. */ - onClick?: ( - event: React.MouseEvent, - pieItemIdentifier: PieItemIdentifier, - item: DefaultizedPieValueType, - ) => void; } /** @@ -77,7 +52,7 @@ export interface PiePlotProps { * - [PiePlot API](https://mui.com/x/api/charts/pie-plot/) */ function PiePlot(props: PiePlotProps) { - const { slots, slotProps, onClick } = props; + const { skipAnimation, slots, slotProps, onClick } = props; const seriesData = React.useContext(SeriesContext).pie; const { left, top, width, height } = React.useContext(DrawingContext); @@ -92,9 +67,6 @@ function PiePlot(props: PiePlotProps) { }; const { series, seriesOrder } = seriesData; - const Arc = slots?.pieArc ?? PieArc; - const ArcLabel = slots?.pieArcLabel ?? PieArcLabel; - return ( {seriesOrder.map((seriesId) => { @@ -102,13 +74,13 @@ function PiePlot(props: PiePlotProps) { innerRadius, outerRadius, cornerRadius, - arcLabel, - arcLabelMinAngle = 0, + paddingAngle, data, cx, cy, highlighted, faded, + highlightScope, } = series[seriesId]; return ( - - {data.map((item, index) => { - return ( - { - onClick(event, { type: 'pie', seriesId, dataIndex: index }, item); - }) - } - {...slotProps?.pieArc} - /> - ); - })} - {data.map((item, index) => { - return ( - - ); - })} - + + + ); + })} + {seriesOrder.map((seriesId) => { + const { + innerRadius, + outerRadius, + cornerRadius, + paddingAngle, + arcLabel, + arcLabelMinAngle, + data, + cx, + cy, + highlightScope, + } = series[seriesId]; + return ( + + ); })} @@ -179,6 +158,11 @@ PiePlot.propTypes = { * @param {DefaultizedPieValueType} item The pie item. */ onClick: PropTypes.func, + /** + * If `true`, animations are skiped. + * @default false + */ + skipAnimation: PropTypes.bool, /** * The props used for each component slot. * @default {} diff --git a/packages/x-charts/src/PieChart/dataTransform/transition.ts b/packages/x-charts/src/PieChart/dataTransform/transition.ts new file mode 100644 index 0000000000000..8a0ac1457f25f --- /dev/null +++ b/packages/x-charts/src/PieChart/dataTransform/transition.ts @@ -0,0 +1,103 @@ +import { UseTransitionProps } from '@react-spring/web'; +import { ValueWithHighlight } from './useTransformData'; + +export const defaultTransitionConfig: UseTransitionProps = { + keys: (item) => item.id, + from: ({ + innerRadius, + outerRadius, + cornerRadius, + startAngle, + endAngle, + paddingAngle, + color, + isFaded, + }) => ({ + innerRadius, + outerRadius: (innerRadius + outerRadius) / 2, + cornerRadius, + startAngle: (startAngle + endAngle) / 2, + endAngle: (startAngle + endAngle) / 2, + paddingAngle, + fill: color, + opacity: isFaded ? 0.3 : 1, + }), + leave: ({ innerRadius, startAngle, endAngle }) => ({ + innerRadius, + outerRadius: innerRadius, + startAngle: (startAngle + endAngle) / 2, + endAngle: (startAngle + endAngle) / 2, + }), + enter: ({ innerRadius, outerRadius, startAngle, endAngle }) => ({ + innerRadius, + outerRadius, + + startAngle, + endAngle, + }), + update: ({ + innerRadius, + outerRadius, + cornerRadius, + startAngle, + endAngle, + paddingAngle, + color, + isFaded, + }) => ({ + innerRadius, + outerRadius, + cornerRadius, + startAngle, + endAngle, + paddingAngle, + fill: color, + opacity: isFaded ? 0.3 : 1, + }), + config: { + tension: 120, + friction: 14, + clamp: true, + }, +}; + +export const defaultLabelTransitionConfig: UseTransitionProps = { + keys: (item) => item.id, + from: ({ innerRadius, outerRadius, cornerRadius, startAngle, endAngle, paddingAngle }) => ({ + innerRadius, + outerRadius: (innerRadius + outerRadius) / 2, + cornerRadius, + startAngle: (startAngle + endAngle) / 2, + endAngle: (startAngle + endAngle) / 2, + paddingAngle, + opacity: 0, + }), + leave: ({ innerRadius, startAngle, endAngle }) => ({ + innerRadius, + outerRadius: innerRadius, + startAngle: (startAngle + endAngle) / 2, + endAngle: (startAngle + endAngle) / 2, + opacity: 0, + }), + enter: ({ innerRadius, outerRadius, startAngle, endAngle }) => ({ + innerRadius, + outerRadius, + startAngle, + endAngle, + opacity: 1, + }), + update: ({ innerRadius, outerRadius, cornerRadius, startAngle, endAngle, paddingAngle }) => ({ + innerRadius, + outerRadius, + cornerRadius, + startAngle, + endAngle, + paddingAngle, + opacity: 1, + }), + config: { + tension: 120, + friction: 14, + clamp: true, + }, +}; diff --git a/packages/x-charts/src/PieChart/dataTransform/useTransformData.ts b/packages/x-charts/src/PieChart/dataTransform/useTransformData.ts new file mode 100644 index 0000000000000..ce0802519f322 --- /dev/null +++ b/packages/x-charts/src/PieChart/dataTransform/useTransformData.ts @@ -0,0 +1,113 @@ +import * as React from 'react'; +import { InteractionContext } from '../../context/InteractionProvider'; +import { DefaultizedPieSeriesType, DefaultizedPieValueType } from '../../models/seriesType/pie'; +import { getIsHighlighted, getIsFaded } from '../../hooks/useInteractionItemProps'; +import { DefaultizedProps } from '../../models/helpers'; + +export interface AnimatedObject { + innerRadius: number; + outerRadius: number; + cornerRadius: number; + startAngle: number; + endAngle: number; + paddingAngle: number; +} + +export interface ValueWithHighlight extends DefaultizedPieValueType, AnimatedObject { + isFaded: boolean; + isHighlighted: boolean; +} + +export function useTransformData( + series: DefaultizedProps< + Pick< + DefaultizedPieSeriesType, + | 'innerRadius' + | 'outerRadius' + | 'cornerRadius' + | 'paddingAngle' + | 'id' + | 'highlightScope' + | 'highlighted' + | 'faded' + | 'data' + >, + 'outerRadius' + >, +) { + const { + id: seriesId, + highlightScope, + data, + faded, + highlighted, + paddingAngle: basePaddingAngle = 0, + innerRadius: baseInnerRadius = 0, + outerRadius: baseOuterRadius, + cornerRadius: baseCornerRadius = 0, + } = series; + + const { item: highlightedItem } = React.useContext(InteractionContext); + + const getHighlightStatus = React.useCallback( + (dataIndex: number) => { + const isHighlighted = getIsHighlighted( + highlightedItem, + { type: 'pie', seriesId, dataIndex }, + highlightScope, + ); + const isFaded = + !isHighlighted && + getIsFaded(highlightedItem, { type: 'pie', seriesId, dataIndex }, highlightScope); + + return { isHighlighted, isFaded }; + }, + [highlightScope, highlightedItem, seriesId], + ); + + const dataWithHighlight: ValueWithHighlight[] = React.useMemo( + () => + data.map((item, itemIndex) => { + const { isHighlighted, isFaded } = getHighlightStatus(itemIndex); + + const attibuesOverride = { + additionalRadius: 0, + ...((isFaded && faded) || (isHighlighted && highlighted) || {}), + }; + const paddingAngle = Math.max( + 0, + (Math.PI * (attibuesOverride.paddingAngle ?? basePaddingAngle)) / 180, + ); + const innerRadius = Math.max(0, attibuesOverride.innerRadius ?? baseInnerRadius); + + const outerRadius = Math.max( + 0, + attibuesOverride.outerRadius ?? baseOuterRadius + attibuesOverride.additionalRadius, + ); + const cornerRadius = attibuesOverride.cornerRadius ?? baseCornerRadius; + + return { + ...item, + ...attibuesOverride, + isFaded, + isHighlighted, + paddingAngle, + innerRadius, + outerRadius, + cornerRadius, + }; + }), + [ + baseCornerRadius, + baseInnerRadius, + baseOuterRadius, + basePaddingAngle, + data, + faded, + getHighlightStatus, + highlighted, + ], + ); + + return dataWithHighlight; +} diff --git a/packages/x-charts/src/models/seriesType/pie.ts b/packages/x-charts/src/models/seriesType/pie.ts index ebf9aa6235ca0..346c53c8c59a3 100644 --- a/packages/x-charts/src/models/seriesType/pie.ts +++ b/packages/x-charts/src/models/seriesType/pie.ts @@ -10,7 +10,7 @@ export type PieValueType = { }; export type DefaultizedPieValueType = PieValueType & - D3PieArcDatum & { color: string; formattedValue: string }; + Omit, 'data'> & { color: string; formattedValue: string }; export type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number); @@ -78,6 +78,8 @@ export interface PieSeriesType extends CommonSeriesType extends CommonSeriesType Date: Thu, 2 Nov 2023 15:13:36 +0200 Subject: [PATCH 220/262] Bump MUI Core (#10827) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Lukas --- docs/package.json | 12 +- package.json | 6 +- .../grid/x-data-grid-generator/package.json | 2 +- .../grid/x-data-grid-premium/package.json | 2 +- packages/grid/x-data-grid-pro/package.json | 2 +- packages/grid/x-data-grid/package.json | 2 +- .../grid/x-data-grid/src/joy/joySlots.tsx | 6 +- packages/x-charts/package.json | 2 +- packages/x-date-pickers-pro/package.json | 4 +- packages/x-date-pickers/package.json | 4 +- packages/x-license-pro/package.json | 2 +- packages/x-tree-view/package.json | 4 +- yarn.lock | 190 +++++++++--------- 13 files changed, 119 insertions(+), 119 deletions(-) diff --git a/docs/package.json b/docs/package.json index a27463c45b427..b7f3fecca9fb4 100644 --- a/docs/package.json +++ b/docs/package.json @@ -28,12 +28,12 @@ "@emotion/react": "^11.11.1", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.14.14", - "@mui/joy": "^5.0.0-beta.11", - "@mui/lab": "^5.0.0-alpha.149", - "@mui/material": "^5.14.14", - "@mui/styles": "^5.14.14", - "@mui/utils": "^5.14.14", + "@mui/icons-material": "^5.14.16", + "@mui/joy": "^5.0.0-beta.13", + "@mui/lab": "^5.0.0-alpha.151", + "@mui/material": "^5.14.16", + "@mui/styles": "^5.14.16", + "@mui/utils": "^5.14.16", "@react-spring/web": "^9.7.3", "@trendmicro/react-interpolate": "^0.5.5", "@types/lodash": "^4.14.200", diff --git a/package.json b/package.json index c5fb7bbc0e6ec..e64f3c64f9a97 100644 --- a/package.json +++ b/package.json @@ -83,10 +83,10 @@ "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mnajdova/enzyme-adapter-react-18": "^0.2.0", - "@mui/icons-material": "^5.14.14", - "@mui/material": "^5.14.14", + "@mui/icons-material": "^5.14.16", + "@mui/material": "^5.14.16", "@mui/monorepo": "https://github.com/mui/material-ui.git#master", - "@mui/utils": "^5.14.14", + "@mui/utils": "^5.14.16", "@next/eslint-plugin-next": "^13.5.6", "@octokit/plugin-retry": "^6.0.1", "@octokit/rest": "^20.0.2", diff --git a/packages/grid/x-data-grid-generator/package.json b/packages/grid/x-data-grid-generator/package.json index 9552a97dd878f..256ec51ac941b 100644 --- a/packages/grid/x-data-grid-generator/package.json +++ b/packages/grid/x-data-grid-generator/package.json @@ -31,7 +31,7 @@ }, "dependencies": { "@babel/runtime": "^7.23.2", - "@mui/base": "^5.0.0-beta.20", + "@mui/base": "^5.0.0-beta.22", "@mui/x-data-grid-premium": "6.17.0", "chance": "^1.1.11", "clsx": "^2.0.0", diff --git a/packages/grid/x-data-grid-premium/package.json b/packages/grid/x-data-grid-premium/package.json index b06ec17ba27e9..1588ea544a307 100644 --- a/packages/grid/x-data-grid-premium/package.json +++ b/packages/grid/x-data-grid-premium/package.json @@ -43,7 +43,7 @@ }, "dependencies": { "@babel/runtime": "^7.23.2", - "@mui/utils": "^5.14.14", + "@mui/utils": "^5.14.16", "@mui/x-data-grid": "6.17.0", "@mui/x-data-grid-pro": "6.17.0", "@mui/x-license-pro": "6.10.2", diff --git a/packages/grid/x-data-grid-pro/package.json b/packages/grid/x-data-grid-pro/package.json index e8462c8fcf9cc..098e4c06e05b2 100644 --- a/packages/grid/x-data-grid-pro/package.json +++ b/packages/grid/x-data-grid-pro/package.json @@ -43,7 +43,7 @@ }, "dependencies": { "@babel/runtime": "^7.23.2", - "@mui/utils": "^5.14.14", + "@mui/utils": "^5.14.16", "@mui/x-data-grid": "6.17.0", "@mui/x-license-pro": "6.10.2", "@types/format-util": "^1.0.3", diff --git a/packages/grid/x-data-grid/package.json b/packages/grid/x-data-grid/package.json index a94bfd18fbfff..5a77787cbf8cf 100644 --- a/packages/grid/x-data-grid/package.json +++ b/packages/grid/x-data-grid/package.json @@ -47,7 +47,7 @@ }, "dependencies": { "@babel/runtime": "^7.23.2", - "@mui/utils": "^5.14.14", + "@mui/utils": "^5.14.16", "clsx": "^2.0.0", "prop-types": "^15.8.1", "reselect": "^4.1.8" diff --git a/packages/grid/x-data-grid/src/joy/joySlots.tsx b/packages/grid/x-data-grid/src/joy/joySlots.tsx index d69d62cd26736..5cbb5cbe5e471 100644 --- a/packages/grid/x-data-grid/src/joy/joySlots.tsx +++ b/packages/grid/x-data-grid/src/joy/joySlots.tsx @@ -229,7 +229,7 @@ const Select = React.forwardRef< }, ref, ) => { - const handleChange: JoySelectProps['onChange'] = (event, newValue) => { + const handleChange: JoySelectProps['onChange'] = (event, newValue) => { if (event && onChange) { // Same as in https://github.com/mui/material-ui/blob/e5558282a8f36856aef1299f3a36f3235e92e770/packages/mui-material/src/Select/SelectInput.js#L288-L300 @@ -251,7 +251,7 @@ const Select = React.forwardRef< return ( )} + {...(props as JoySelectProps)} listboxOpen={open} onListboxOpenChange={(isOpen) => { if (isOpen) { @@ -360,7 +360,7 @@ const Pagination = React.forwardRef< const pageSizeOptions = isPageSizeIncludedInPageSizeOptions() ? rootProps.pageSizeOptions : []; - const handleChangeRowsPerPage: JoySelectProps['onChange'] = (event, newValue) => { + const handleChangeRowsPerPage: JoySelectProps['onChange'] = (event, newValue) => { const newPageSize = Number(newValue); apiRef.current.setPageSize(newPageSize); }; diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index 2e076e23483e9..f564d617e9395 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -39,7 +39,7 @@ }, "dependencies": { "@babel/runtime": "^7.23.2", - "@mui/base": "^5.0.0-beta.20", + "@mui/base": "^5.0.0-beta.22", "@react-spring/rafz": "^9.7.3", "@react-spring/web": "^9.7.3", "clsx": "^2.0.0", diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index a3c4534d319e4..170836599d766 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -42,8 +42,8 @@ }, "dependencies": { "@babel/runtime": "^7.23.2", - "@mui/base": "^5.0.0-beta.20", - "@mui/utils": "^5.14.14", + "@mui/base": "^5.0.0-beta.22", + "@mui/utils": "^5.14.16", "@mui/x-date-pickers": "6.17.0", "@mui/x-license-pro": "6.10.2", "clsx": "^2.0.0", diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 06ac062f46961..247ba8b430656 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -45,8 +45,8 @@ }, "dependencies": { "@babel/runtime": "^7.23.2", - "@mui/base": "^5.0.0-beta.20", - "@mui/utils": "^5.14.14", + "@mui/base": "^5.0.0-beta.22", + "@mui/utils": "^5.14.16", "@types/react-transition-group": "^4.4.8", "clsx": "^2.0.0", "prop-types": "^15.8.1", diff --git a/packages/x-license-pro/package.json b/packages/x-license-pro/package.json index 9db2a18594340..c76b6fbb6687c 100644 --- a/packages/x-license-pro/package.json +++ b/packages/x-license-pro/package.json @@ -36,7 +36,7 @@ }, "dependencies": { "@babel/runtime": "^7.23.2", - "@mui/utils": "^5.14.14" + "@mui/utils": "^5.14.16" }, "peerDependencies": { "react": "^17.0.0 || ^18.0.0" diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json index 7fd6af1f03c31..2a995868c3022 100644 --- a/packages/x-tree-view/package.json +++ b/packages/x-tree-view/package.json @@ -43,8 +43,8 @@ }, "dependencies": { "@babel/runtime": "^7.23.2", - "@mui/base": "^5.0.0-beta.20", - "@mui/utils": "^5.14.14", + "@mui/base": "^5.0.0-beta.22", + "@mui/utils": "^5.14.16", "@types/react-transition-group": "^4.4.8", "clsx": "^2.0.0", "prop-types": "^15.8.1", diff --git a/yarn.lock b/yarn.lock index 0ddd412f94cbb..7996baf05141f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1278,7 +1278,7 @@ core-js "^2.6.12" regenerator-runtime "^0.14.0" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.23.1", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": version "7.23.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885" integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg== @@ -1787,71 +1787,71 @@ react-test-renderer "^18.0.0" semver "^5.7.0" -"@mui/base@5.0.0-beta.20", "@mui/base@^5.0.0-beta.20": - version "5.0.0-beta.20" - resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.20.tgz#14fcdfe0350f2aad06ab6c37c4c91dacaab8f600" - integrity sha512-CS2pUuqxST7ch9VNDCklRYDbJ3rru20Tx7na92QvVVKfu3RL4z/QLuVIc8jYGsdCnauMaeUSlFNLAJNb0yXe6w== +"@mui/base@5.0.0-beta.22", "@mui/base@^5.0.0-beta.22": + version "5.0.0-beta.22" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.22.tgz#9ea6be6c8bfc4d8f825660da36d228f5315d4706" + integrity sha512-l4asGID5tmyerx9emJfXOKLyXzaBtdXNIFE3M+IrSZaFtGFvaQKHhc3+nxxSxPf1+G44psjczM0ekRQCdXx9HA== dependencies: - "@babel/runtime" "^7.23.1" + "@babel/runtime" "^7.23.2" "@floating-ui/react-dom" "^2.0.2" - "@mui/types" "^7.2.6" - "@mui/utils" "^5.14.13" + "@mui/types" "^7.2.8" + "@mui/utils" "^5.14.16" "@popperjs/core" "^2.11.8" clsx "^2.0.0" prop-types "^15.8.1" -"@mui/core-downloads-tracker@^5.14.14": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.14.tgz#a54894e9b4dc908ab2d59eac543219d9018448e6" - integrity sha512-Rw/xKiTOUgXD8hdKqj60aC6QcGprMipG7ne2giK6Mz7b4PlhL/xog9xLeclY3BxsRLkZQ05egFnIEY1CSibTbw== - -"@mui/icons-material@^5.14.14": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.14.tgz#02d33f51f0b9de238d5c47b0a31ff330144393c4" - integrity sha512-vwuaMsKvI7AWTeYqR8wYbpXijuU8PzMAJWRAq2DDIuOZPxjKyHlr8WQ25+azZYkIXtJ7AqnVb1ZmHdEyB4/kug== - dependencies: - "@babel/runtime" "^7.23.1" - -"@mui/joy@^5.0.0-beta.11": - version "5.0.0-beta.11" - resolved "https://registry.yarnpkg.com/@mui/joy/-/joy-5.0.0-beta.11.tgz#859961b05b7921351caa806d2b37d9c8bcb68abc" - integrity sha512-NHtNPaNkpvL8o4VFsMcNBKVlYNaRttl9bLYbK6H0xzVYzk0PV/CHsauY35kpG8o67qsFaXy5nRe5RZPglNwX1Q== - dependencies: - "@babel/runtime" "^7.23.1" - "@mui/base" "5.0.0-beta.20" - "@mui/core-downloads-tracker" "^5.14.14" - "@mui/system" "^5.14.14" - "@mui/types" "^7.2.6" - "@mui/utils" "^5.14.13" +"@mui/core-downloads-tracker@^5.14.16": + version "5.14.16" + resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.16.tgz#03ceb422d69a33e6c1cbd7e943cf60816878be2a" + integrity sha512-97isBjzH2v1K7oB4UH2f4NOkBShOynY6dhnoR2XlUk/g6bb7ZBv2I3D1hvvqPtpEigKu93e7f/jAYr5d9LOc5w== + +"@mui/icons-material@^5.14.16": + version "5.14.16" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.16.tgz#bd394183b0cfb068d4fa48292cd8d329be8d6b16" + integrity sha512-wmOgslMEGvbHZjFLru8uH5E+pif/ciXAvKNw16q6joK6EWVWU5rDYWFknDaZhCvz8ZE/K8ZnJQ+lMG6GgHzXbg== + dependencies: + "@babel/runtime" "^7.23.2" + +"@mui/joy@^5.0.0-beta.13": + version "5.0.0-beta.13" + resolved "https://registry.yarnpkg.com/@mui/joy/-/joy-5.0.0-beta.13.tgz#658ea4de15971cf40a9d9a8b244ea8738360b942" + integrity sha512-vXoCqGX/rRxAij56gwcId67cax3nv7oIaeIYPqCPz8OZTaCvE6ZxMANXOVPmY9GIWpTAABfqijL/jiF0qkz/eg== + dependencies: + "@babel/runtime" "^7.23.2" + "@mui/base" "5.0.0-beta.22" + "@mui/core-downloads-tracker" "^5.14.16" + "@mui/system" "^5.14.16" + "@mui/types" "^7.2.8" + "@mui/utils" "^5.14.16" clsx "^2.0.0" prop-types "^15.8.1" -"@mui/lab@^5.0.0-alpha.149": - version "5.0.0-alpha.149" - resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.149.tgz#4bbdc8ba1c3b57d5a557b171463bc692b308ead2" - integrity sha512-azOkKcyVX4KBZAqSp7eRD4OfKrUrvQXo7x2BjFJil+UeAJiMpB6I5lALo2PDZz3vjtJnHqlURnZtxZOHs1zfEA== +"@mui/lab@^5.0.0-alpha.151": + version "5.0.0-alpha.151" + resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.151.tgz#4f0e904f0db8088c5c9a3c3da5bde676cb3ce7ca" + integrity sha512-EAIzoDZ0WATa31m71juG1LnURjsmdkUOjNqy2j5WUp4y80obdGYKTT1Yh1hdI5SKND6621vaBPiGoKITjCZJ8A== dependencies: - "@babel/runtime" "^7.23.1" - "@mui/base" "5.0.0-beta.20" - "@mui/system" "^5.14.14" - "@mui/types" "^7.2.6" - "@mui/utils" "^5.14.13" + "@babel/runtime" "^7.23.2" + "@mui/base" "5.0.0-beta.22" + "@mui/system" "^5.14.16" + "@mui/types" "^7.2.8" + "@mui/utils" "^5.14.16" "@mui/x-tree-view" "6.0.0-alpha.1" clsx "^2.0.0" prop-types "^15.8.1" -"@mui/material@^5.14.14": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.14.tgz#e47f3992b609002cd57a71f70e829dc2d286028c" - integrity sha512-cAmCwAHFQXxb44kWbVFkhKATN8tACgMsFwrXo8ro6WzYW73U/qsR5AcCiJIhCyYYg+gcftfkmNcpRaV3JjhHCg== - dependencies: - "@babel/runtime" "^7.23.1" - "@mui/base" "5.0.0-beta.20" - "@mui/core-downloads-tracker" "^5.14.14" - "@mui/system" "^5.14.14" - "@mui/types" "^7.2.6" - "@mui/utils" "^5.14.13" - "@types/react-transition-group" "^4.4.7" +"@mui/material@^5.14.16": + version "5.14.16" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.16.tgz#45cd62d312d10399d3813ee6dc43bd1f11179bf4" + integrity sha512-W4zZ4vnxgGk6/HqBwgsDHKU7x2l2NhX+r8gAwfg58Rhu3ikfY7NkIS6y8Gl3NkATc4GG1FNaGjjpQKfJx3U6Jw== + dependencies: + "@babel/runtime" "^7.23.2" + "@mui/base" "5.0.0-beta.22" + "@mui/core-downloads-tracker" "^5.14.16" + "@mui/system" "^5.14.16" + "@mui/types" "^7.2.8" + "@mui/utils" "^5.14.16" + "@types/react-transition-group" "^4.4.8" clsx "^2.0.0" csstype "^3.1.2" prop-types "^15.8.1" @@ -1862,35 +1862,35 @@ version "5.14.11" resolved "https://github.com/mui/material-ui.git#7f9c09fea69759f0f621cbe3eb0f738d51c8201e" -"@mui/private-theming@^5.14.14": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.14.tgz#035dde1eb30c896c69a12b7dee1dce3a323c66e9" - integrity sha512-n77au3CQj9uu16hak2Y+rvbGSBaJKxziG/gEbOLVGrAuqZ+ycVSkorCfN6Y/4XgYOpG/xvmuiY3JwhAEOzY3iA== +"@mui/private-theming@^5.14.16": + version "5.14.16" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.16.tgz#ffdc9a9d3deaa46af000f04c0a9cc3a982f73071" + integrity sha512-FNlL0pTSEBh8nXsVWreCHDSHk+jG8cBx1sxRbT8JVtL+PYbYPi802zfV4B00Kkf0LNRVRvAVQwojMWSR/MYGng== dependencies: - "@babel/runtime" "^7.23.1" - "@mui/utils" "^5.14.13" + "@babel/runtime" "^7.23.2" + "@mui/utils" "^5.14.16" prop-types "^15.8.1" -"@mui/styled-engine@^5.14.13": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.14.tgz#b0ededf531fff1ef110f7b263c2d3d95a0b8ec9a" - integrity sha512-sF3DS2PVG+cFWvkVHQQaGFpL1h6gSwOW3L91pdxPLQDHDZ5mZ/X0SlXU5XA+WjypoysG4urdAQC7CH/BRvUiqg== +"@mui/styled-engine@^5.14.16": + version "5.14.16" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.16.tgz#a4a78a9980f138c2e705d04d67d44051f5005f22" + integrity sha512-FfvYvTG/Zd+KXMMImbcMYEeQAbONGuX5Vx3gBmmtB6KyA7Mvm9Pma1ly3R0gc44yeoFd+2wBjn1feS8h42HW5w== dependencies: - "@babel/runtime" "^7.23.1" + "@babel/runtime" "^7.23.2" "@emotion/cache" "^11.11.0" csstype "^3.1.2" prop-types "^15.8.1" -"@mui/styles@^5.14.14": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.14.14.tgz#5087faf5e11d58dadd39bdf0f45983629abc817c" - integrity sha512-+LzSg7IjfxJRukIPULfAd025qsSCquHrTEC10EYjxbJJvHuE5nWx9D9w7lSRXxfWrxZZx+92rTUKVk9607zXBA== +"@mui/styles@^5.14.16": + version "5.14.16" + resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.14.16.tgz#663e5f2317c2b631d9d8bd873f23344ab0729815" + integrity sha512-pBA2eLBEfqLv/jmu9qGcErwml27upH2YBFRuRU2loZm5R57di5y/GjpM9EWc77+49axaTlHfO8LWbic4kPvxoQ== dependencies: - "@babel/runtime" "^7.23.1" + "@babel/runtime" "^7.23.2" "@emotion/hash" "^0.9.1" - "@mui/private-theming" "^5.14.14" - "@mui/types" "^7.2.6" - "@mui/utils" "^5.14.13" + "@mui/private-theming" "^5.14.16" + "@mui/types" "^7.2.8" + "@mui/utils" "^5.14.16" clsx "^2.0.0" csstype "^3.1.2" hoist-non-react-statics "^3.3.2" @@ -1904,32 +1904,32 @@ jss-plugin-vendor-prefixer "^10.10.0" prop-types "^15.8.1" -"@mui/system@^5.14.14": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.14.tgz#f33327e74230523169107ace960e8bb51cbdbab7" - integrity sha512-y4InFmCgGGWXnz+iK4jRTWVikY0HgYnABjz4wgiUgEa2W1H8M4ow+27BegExUWPkj4TWthQ2qG9FOGSMtI+PKA== +"@mui/system@^5.14.16": + version "5.14.16" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.16.tgz#5c30c5123767416358c3b73774eb985e189119a4" + integrity sha512-uKnPfsDqDs8bbN54TviAuoGWOmFiQLwNZ3Wvj+OBkJCzwA6QnLb/sSeCB7Pk3ilH4h4jQ0BHtbR+Xpjy9wlOuA== dependencies: - "@babel/runtime" "^7.23.1" - "@mui/private-theming" "^5.14.14" - "@mui/styled-engine" "^5.14.13" - "@mui/types" "^7.2.6" - "@mui/utils" "^5.14.13" + "@babel/runtime" "^7.23.2" + "@mui/private-theming" "^5.14.16" + "@mui/styled-engine" "^5.14.16" + "@mui/types" "^7.2.8" + "@mui/utils" "^5.14.16" clsx "^2.0.0" csstype "^3.1.2" prop-types "^15.8.1" -"@mui/types@^7.2.6": - version "7.2.6" - resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.6.tgz#d72b9e9eb0032e107e76033932d65c3f731d2608" - integrity sha512-7sjLQrUmBwufm/M7jw/quNiPK/oor2+pGUQP2CULRcFCArYTq78oJ3D5esTaL0UMkXKJvDqXn6Ike69yAOBQng== +"@mui/types@^7.2.8": + version "7.2.8" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.8.tgz#2ed4402f104d65fcd4f460ca358654c8935e2285" + integrity sha512-9u0ji+xspl96WPqvrYJF/iO+1tQ1L5GTaDOeG3vCR893yy7VcWwRNiVMmPdPNpMDqx0WV1wtEW9OMwK9acWJzQ== -"@mui/utils@^5.14.13", "@mui/utils@^5.14.14", "@mui/utils@^5.14.3": - version "5.14.14" - resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.14.tgz#7b2a0bcfb44c3376fc81f85500f9bd01706682ac" - integrity sha512-3AKp8uksje5sRfVrtgG9Q/2TBsHWVBUtA0NaXliZqGcXo8J+A+Agp0qUW2rJ+ivgPWTCCubz9FZVT2IQZ3bGsw== +"@mui/utils@^5.14.16", "@mui/utils@^5.14.3": + version "5.14.16" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.16.tgz#09a15fd45530cadc642c5c08eb6cc660ea230506" + integrity sha512-3xV31GposHkwRbQzwJJuooWpK2ybWdEdeUPtRjv/6vjomyi97F3+68l+QVj9tPTvmfSbr2sx5c/NuvDulrdRmA== dependencies: - "@babel/runtime" "^7.23.1" - "@types/prop-types" "^15.7.7" + "@babel/runtime" "^7.23.2" + "@types/prop-types" "^15.7.9" prop-types "^15.8.1" react-is "^18.2.0" @@ -2989,10 +2989,10 @@ resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f" integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA== -"@types/prop-types@*", "@types/prop-types@^15.7.7": - version "15.7.8" - resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.8.tgz#805eae6e8f41bd19e88917d2ea200dc992f405d3" - integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ== +"@types/prop-types@*", "@types/prop-types@^15.7.9": + version "15.7.9" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.9.tgz#b6f785caa7ea1fe4414d9df42ee0ab67f23d8a6d" + integrity sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g== "@types/react-dom@^18.0.0", "@types/react-dom@^18.2.14": version "18.2.14" @@ -3025,7 +3025,7 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@^4.4.6", "@types/react-transition-group@^4.4.7", "@types/react-transition-group@^4.4.8": +"@types/react-transition-group@^4.4.6", "@types/react-transition-group@^4.4.8": version "4.4.8" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.8.tgz#46f87d80512959cac793ecc610a93d80ef241ccf" integrity sha512-QmQ22q+Pb+HQSn04NL3HtrqHwYMf4h3QKArOy5F8U5nEVMaihBs3SR10WiOM1iwPz5jIo8x/u11al+iEGZZrvg== From 9ba8e44b2e3f3205c7d3cacc06349e27a4628c6d Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 2 Nov 2023 15:29:08 +0200 Subject: [PATCH 221/262] Bump eslint-plugin-import to ^2.29.0 (#10831) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 116 +++++++++++++++++++++++++-------------------------- 2 files changed, 59 insertions(+), 59 deletions(-) diff --git a/package.json b/package.json index e64f3c64f9a97..ca046297a3f2d 100644 --- a/package.json +++ b/package.json @@ -129,7 +129,7 @@ "eslint-config-prettier": "^9.0.0", "eslint-import-resolver-webpack": "^0.13.8", "eslint-plugin-filenames": "^1.3.2", - "eslint-plugin-import": "^2.28.1", + "eslint-plugin-import": "^2.29.0", "eslint-plugin-jsdoc": "^46.8.2", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-mocha": "^10.2.0", diff --git a/yarn.lock b/yarn.lock index 7996baf05141f..4be301879fb5f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3772,15 +3772,15 @@ array-ify@^1.0.0: resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece" integrity sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4= -array-includes@^3.1.5, array-includes@^3.1.6: - version "3.1.6" - resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f" - integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw== +array-includes@^3.1.5, array-includes@^3.1.6, array-includes@^3.1.7: + version "3.1.7" + resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.7.tgz#8cd2e01b26f7a3086cbc87271593fe921c62abda" + integrity sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" - get-intrinsic "^1.1.3" + define-properties "^1.2.0" + es-abstract "^1.22.1" + get-intrinsic "^1.2.1" is-string "^1.0.7" array-parallel@~0.1.3: @@ -3813,7 +3813,7 @@ array.prototype.find@^2.1.1, array.prototype.find@^2.2.2: es-abstract "^1.22.1" es-shim-unscopables "^1.0.0" -array.prototype.findlastindex@^1.2.2: +array.prototype.findlastindex@^1.2.3: version "1.2.3" resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz#b37598438f97b579166940814e2c0493a4f50207" integrity sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA== @@ -3824,24 +3824,24 @@ array.prototype.findlastindex@^1.2.2: es-shim-unscopables "^1.0.0" get-intrinsic "^1.2.1" -array.prototype.flat@^1.2.3, array.prototype.flat@^1.3.1: - version "1.3.1" - resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz#ffc6576a7ca3efc2f46a143b9d1dda9b4b3cf5e2" - integrity sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA== +array.prototype.flat@^1.2.3, array.prototype.flat@^1.3.2: + version "1.3.2" + resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18" + integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" + define-properties "^1.2.0" + es-abstract "^1.22.1" es-shim-unscopables "^1.0.0" -array.prototype.flatmap@^1.3.1: - version "1.3.1" - resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz#1aae7903c2100433cb8261cd4ed310aab5c4a183" - integrity sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ== +array.prototype.flatmap@^1.3.1, array.prototype.flatmap@^1.3.2: + version "1.3.2" + resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527" + integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" + define-properties "^1.2.0" + es-abstract "^1.22.1" es-shim-unscopables "^1.0.0" array.prototype.tosorted@^1.1.1: @@ -6324,14 +6324,14 @@ eslint-config-prettier@^9.0.0: resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz#eb25485946dd0c66cd216a46232dc05451518d1f" integrity sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw== -eslint-import-resolver-node@^0.3.7: - version "0.3.7" - resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz#83b375187d412324a1963d84fa664377a23eb4d7" - integrity sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA== +eslint-import-resolver-node@^0.3.9: + version "0.3.9" + resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac" + integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g== dependencies: debug "^3.2.7" - is-core-module "^2.11.0" - resolve "^1.22.1" + is-core-module "^2.13.0" + resolve "^1.22.4" eslint-import-resolver-webpack@^0.13.8: version "0.13.8" @@ -6367,26 +6367,26 @@ eslint-plugin-filenames@^1.3.2: lodash.snakecase "4.1.1" lodash.upperfirst "4.3.1" -eslint-plugin-import@^2.28.1: - version "2.28.1" - resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz#63b8b5b3c409bfc75ebaf8fb206b07ab435482c4" - integrity sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A== +eslint-plugin-import@^2.29.0: + version "2.29.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz#8133232e4329ee344f2f612885ac3073b0b7e155" + integrity sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg== dependencies: - array-includes "^3.1.6" - array.prototype.findlastindex "^1.2.2" - array.prototype.flat "^1.3.1" - array.prototype.flatmap "^1.3.1" + array-includes "^3.1.7" + array.prototype.findlastindex "^1.2.3" + array.prototype.flat "^1.3.2" + array.prototype.flatmap "^1.3.2" debug "^3.2.7" doctrine "^2.1.0" - eslint-import-resolver-node "^0.3.7" + eslint-import-resolver-node "^0.3.9" eslint-module-utils "^2.8.0" - has "^1.0.3" - is-core-module "^2.13.0" + hasown "^2.0.0" + is-core-module "^2.13.1" is-glob "^4.0.3" minimatch "^3.1.2" - object.fromentries "^2.0.6" - object.groupby "^1.0.0" - object.values "^1.1.6" + object.fromentries "^2.0.7" + object.groupby "^1.0.1" + object.values "^1.1.7" semver "^6.3.1" tsconfig-paths "^3.14.2" @@ -8199,7 +8199,7 @@ is-ci@3.0.1: dependencies: ci-info "^3.2.0" -is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.13.1, is-core-module@^2.5.0, is-core-module@^2.8.1: +is-core-module@^2.13.0, is-core-module@^2.13.1, is-core-module@^2.5.0, is-core-module@^2.8.1: version "2.13.1" resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384" integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw== @@ -10777,14 +10777,14 @@ object.entries@^1.1.1, object.entries@^1.1.2, object.entries@^1.1.5, object.entr define-properties "^1.1.4" es-abstract "^1.20.4" -object.fromentries@^2.0.3, object.fromentries@^2.0.6: - version "2.0.6" - resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.6.tgz#cdb04da08c539cffa912dcd368b886e0904bfa73" - integrity sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg== +object.fromentries@^2.0.3, object.fromentries@^2.0.6, object.fromentries@^2.0.7: + version "2.0.7" + resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616" + integrity sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" + define-properties "^1.2.0" + es-abstract "^1.22.1" object.getownpropertydescriptors@^2.0.3: version "2.1.2" @@ -10795,7 +10795,7 @@ object.getownpropertydescriptors@^2.0.3: define-properties "^1.1.3" es-abstract "^1.18.0-next.2" -object.groupby@^1.0.0: +object.groupby@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.1.tgz#d41d9f3c8d6c778d9cbac86b4ee9f5af103152ee" integrity sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ== @@ -10820,14 +10820,14 @@ object.pick@^1.3.0: dependencies: isobject "^3.0.1" -object.values@^1.1.1, object.values@^1.1.6: - version "1.1.6" - resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d" - integrity sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw== +object.values@^1.1.1, object.values@^1.1.6, object.values@^1.1.7: + version "1.1.7" + resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.7.tgz#617ed13272e7e1071b43973aa1655d9291b8442a" + integrity sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" + define-properties "^1.2.0" + es-abstract "^1.22.1" on-finished@2.4.1: version "2.4.1" @@ -12278,10 +12278,10 @@ resolve-url@^0.2.1: resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" integrity sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg== -resolve@^1.10.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1: - version "1.22.4" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34" - integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg== +resolve@^1.10.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.4: + version "1.22.8" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d" + integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw== dependencies: is-core-module "^2.13.0" path-parse "^1.0.7" From b0cb729e8d77ae4c2ee36a35da2fe6b5e18214d5 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Thu, 2 Nov 2023 14:56:03 +0100 Subject: [PATCH 222/262] [DataGrid] Allow to ignore diacritics when filtering (#10569) --- .../filtering/QuickFilteringDiacritics.js | 63 +++++++++++++++ .../QuickFilteringDiacritics.preview | 1 + .../filtering/QuickFilteringDiacritics.tsx | 69 ++++++++++++++++ .../data-grid/filtering/header-filters.md | 4 + docs/data/data-grid/filtering/index.md | 4 + docs/data/data-grid/filtering/quick-filter.md | 17 ++++ .../x/api/data-grid/data-grid-premium.json | 1 + docs/pages/x/api/data-grid/data-grid-pro.json | 1 + docs/pages/x/api/data-grid/data-grid.json | 1 + .../api-docs/data-grid/data-grid-premium.json | 5 ++ .../api-docs/data-grid/data-grid-pro.json | 5 ++ .../api-docs/data-grid/data-grid.json | 5 ++ .../src/DataGridPremium/DataGridPremium.tsx | 6 ++ .../rowGrouping/gridRowGroupingUtils.ts | 3 +- .../src/models/gridApiPremium.ts | 3 +- .../src/DataGridPro/DataGridPro.tsx | 6 ++ .../features/treeData/gridTreeDataUtils.ts | 4 +- .../x-data-grid-pro/src/models/gridApiPro.ts | 3 +- .../x-data-grid/src/DataGrid/DataGrid.tsx | 6 ++ .../src/DataGrid/useDataGridProps.ts | 1 + .../src/colDef/gridStringOperators.ts | 3 +- .../src/hooks/core/useGridInitialization.ts | 4 +- .../hooks/features/filter/gridFilterUtils.ts | 80 +++++++++++++------ .../src/models/api/gridApiCommon.ts | 6 +- .../src/models/api/gridApiCommunity.ts | 3 +- .../x-data-grid/src/models/api/gridCoreApi.ts | 7 ++ .../src/models/props/DataGridProps.ts | 6 ++ .../src/tests/filtering.DataGrid.test.tsx | 46 +++++++++++ .../tests/quickFiltering.DataGrid.test.tsx | 41 ++++++++++ test/regressions/index.test.js | 1 + 30 files changed, 370 insertions(+), 35 deletions(-) create mode 100644 docs/data/data-grid/filtering/QuickFilteringDiacritics.js create mode 100644 docs/data/data-grid/filtering/QuickFilteringDiacritics.preview create mode 100644 docs/data/data-grid/filtering/QuickFilteringDiacritics.tsx diff --git a/docs/data/data-grid/filtering/QuickFilteringDiacritics.js b/docs/data/data-grid/filtering/QuickFilteringDiacritics.js new file mode 100644 index 0000000000000..72466794f2003 --- /dev/null +++ b/docs/data/data-grid/filtering/QuickFilteringDiacritics.js @@ -0,0 +1,63 @@ +import * as React from 'react'; +import { DataGrid, GridToolbar } from '@mui/x-data-grid'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Switch from '@mui/material/Switch'; + +const dateFormatter = new Intl.DateTimeFormat('fr-FR', { + day: 'numeric', + month: 'long', + year: 'numeric', +}); + +const rows = [ + { id: 0, string: 'Café', date: new Date(2023, 1, 1), singleSelect: 'Jalapeño' }, +]; + +const columns = [ + { field: 'string', width: 100 }, + { + field: 'date', + type: 'date', + width: 150, + valueFormatter: (params) => dateFormatter.format(params.value), + }, + { + field: 'singleSelect', + type: 'singleSelect', + valueOptions: ['Jalapeño'], + }, +]; + +export default function QuickFilteringDiacritics() { + const [filterModel, setFilterModel] = React.useState({ + items: [], + quickFilterValues: ['cafe'], + }); + const [ignoreDiacritics, setIgnoreDiacritics] = React.useState(true); + + return ( +
            + setIgnoreDiacritics(event.target.checked)} + control={} + label="Ignore diacritics" + /> +
            + +
            +
            + ); +} diff --git a/docs/data/data-grid/filtering/QuickFilteringDiacritics.preview b/docs/data/data-grid/filtering/QuickFilteringDiacritics.preview new file mode 100644 index 0000000000000..b79084cb80037 --- /dev/null +++ b/docs/data/data-grid/filtering/QuickFilteringDiacritics.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/filtering/QuickFilteringDiacritics.tsx b/docs/data/data-grid/filtering/QuickFilteringDiacritics.tsx new file mode 100644 index 0000000000000..26197a90dbad9 --- /dev/null +++ b/docs/data/data-grid/filtering/QuickFilteringDiacritics.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import { + DataGrid, + GridToolbar, + GridColDef, + GridFilterModel, +} from '@mui/x-data-grid'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Switch from '@mui/material/Switch'; + +const dateFormatter = new Intl.DateTimeFormat('fr-FR', { + day: 'numeric', + month: 'long', + year: 'numeric', +}); + +const rows = [ + { id: 0, string: 'Café', date: new Date(2023, 1, 1), singleSelect: 'Jalapeño' }, +]; +const columns: GridColDef[] = [ + { field: 'string', width: 100 }, + { + field: 'date', + type: 'date', + width: 150, + valueFormatter: (params) => dateFormatter.format(params.value), + }, + { + field: 'singleSelect', + type: 'singleSelect', + valueOptions: ['Jalapeño'], + }, +]; + +export default function QuickFilteringDiacritics() { + const [filterModel, setFilterModel] = React.useState({ + items: [], + quickFilterValues: ['cafe'], + }); + const [ignoreDiacritics, setIgnoreDiacritics] = React.useState(true); + + return ( +
            + + setIgnoreDiacritics((event.target as HTMLInputElement).checked) + } + control={} + label="Ignore diacritics" + /> +
            + +
            +
            + ); +} diff --git a/docs/data/data-grid/filtering/header-filters.md b/docs/data/data-grid/filtering/header-filters.md index e4a1c174e4231..80f1f85ddb81c 100644 --- a/docs/data/data-grid/filtering/header-filters.md +++ b/docs/data/data-grid/filtering/header-filters.md @@ -72,6 +72,10 @@ Additionally, `slots.headerFilterMenu` could also be used to customize the menu {{"demo": "CustomHeaderFilterDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}} +## Ignore diacritics (accents) + +You can ignore diacritics (accents) when filtering the rows. See [Quick filter - Ignore diacritics (accents)](/x/react-data-grid/filtering/quick-filter/#ignore-diacritics-accents). + ## API - [DataGrid](/x/api/data-grid/data-grid/) diff --git a/docs/data/data-grid/filtering/index.md b/docs/data/data-grid/filtering/index.md index 93c1fe8fe06ba..3d2597c607698 100644 --- a/docs/data/data-grid/filtering/index.md +++ b/docs/data/data-grid/filtering/index.md @@ -127,6 +127,10 @@ In the example below, the _rating_ column can not be filtered. {{"demo": "DisableFilteringGridSomeColumns.js", "bg": "inline", "defaultCodeOpen": false}} +## Ignore diacritics (accents) + +You can ignore diacritics (accents) when filtering the rows. See [Quick filter - Ignore diacritics (accents)](/x/react-data-grid/filtering/quick-filter/#ignore-diacritics-accents). + ## apiRef The grid exposes a set of methods that enables all of these features using the imperative `apiRef`. To know more about how to use it, check the [API Object](/x/react-data-grid/api-object/) section. diff --git a/docs/data/data-grid/filtering/quick-filter.md b/docs/data/data-grid/filtering/quick-filter.md index 8d184f697c0fb..5ad3c64225e15 100644 --- a/docs/data/data-grid/filtering/quick-filter.md +++ b/docs/data/data-grid/filtering/quick-filter.md @@ -122,6 +122,23 @@ In the following demo, the quick filter value `"Saint Martin, Saint Lucia"` will {{"demo": "QuickFilteringCustomizedGrid.js", "bg": "inline", "defaultCodeOpen": false}} +## Ignore diacritics (accents) + +In some languages, the letters can have diacritics (accents) - for instance, the letter `é` in French. +By default, these letters are considered different from their non-accented versions when filtering. + +To ignore diacritics, set the `ignoreDiacritics` prop to `true`: + +```tsx + +``` + +{{"demo": "QuickFilteringDiacritics.js", "bg": "inline", "defaultCodeOpen": false}} + +:::warning +Note that the `ignoreDiacritics` prop affects all columns and all filter types: [normal filters](/x/react-data-grid/filtering/), [quick filter](/x/react-data-grid/filtering/quick-filter/) and [header filters](/x/react-data-grid/filtering/header-filters/). +::: + ## API - [GridToolbarQuickFilter](/x/api/data-grid/grid-toolbar-quick-filter/) 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 9d49c1998c8bd..a40c143179bbd 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -184,6 +184,7 @@ "default": "false" }, "hideFooterSelectedRowCount": { "type": { "name": "bool" } }, + "ignoreDiacritics": { "type": { "name": "bool" } }, "initialState": { "type": { "name": "object" } }, "isCellEditable": { "type": { "name": "func" }, 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 0e5b7bf525263..b504514eb9d3a 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -163,6 +163,7 @@ "default": "false" }, "hideFooterSelectedRowCount": { "type": { "name": "bool" } }, + "ignoreDiacritics": { "type": { "name": "bool" } }, "initialState": { "type": { "name": "object" } }, "isCellEditable": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index d46dff1066c96..8c82a0749e5cf 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -114,6 +114,7 @@ "hideFooter": { "type": { "name": "bool" } }, "hideFooterPagination": { "type": { "name": "bool" } }, "hideFooterSelectedRowCount": { "type": { "name": "bool" } }, + "ignoreDiacritics": { "type": { "name": "bool" } }, "initialState": { "type": { "name": "object" } }, "isCellEditable": { "type": { "name": "func" }, diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json index 6b354a3bc786d..95c7581b8135d 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -343,6 +343,11 @@ "deprecated": "", "typeDescriptions": {} }, + "ignoreDiacritics": { + "description": "If true, the diacritics (accents) are ignored when filtering or quick filtering. E.g. when filter value is cafe, the rows with café will be visible.", + "deprecated": "", + "typeDescriptions": {} + }, "initialState": { "description": "The initial state of the DataGridPremium. The data in it is set in the state on initialization but isn't controlled. If one of the data in initialState is also being controlled, then the control state wins.", "deprecated": "", diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json index 6641bcd496834..6c6d94f2a1d6b 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -305,6 +305,11 @@ "deprecated": "", "typeDescriptions": {} }, + "ignoreDiacritics": { + "description": "If true, the diacritics (accents) are ignored when filtering or quick filtering. E.g. when filter value is cafe, the rows with café will be visible.", + "deprecated": "", + "typeDescriptions": {} + }, "initialState": { "description": "The initial state of the DataGridPro. The data in it will be set in the state on initialization but will not be controlled. If one of the data in initialState is also being controlled, then the control state wins.", "deprecated": "", diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index d18e7b9cfb46e..a268c900b3074 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -209,6 +209,11 @@ "deprecated": "", "typeDescriptions": {} }, + "ignoreDiacritics": { + "description": "If true, the diacritics (accents) are ignored when filtering or quick filtering. E.g. when filter value is cafe, the rows with café will be visible.", + "deprecated": "", + "typeDescriptions": {} + }, "initialState": { "description": "The initial state of the DataGrid. The data in it will be set in the state on initialization but will not be controlled. If one of the data in initialState is also being controlled, then the control state wins.", "deprecated": "", diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index d43a616dfa376..82d1b1e01374d 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -461,6 +461,12 @@ DataGridPremiumRaw.propTypes = { * @default false */ hideFooterSelectedRowCount: PropTypes.bool, + /** + * If `true`, the diacritics (accents) are ignored when filtering or quick filtering. + * E.g. when filter value is `cafe`, the rows with `café` will be visible. + * @default false + */ + ignoreDiacritics: PropTypes.bool, /** * The initial state of the DataGridPremium. * The data in it is set in the state on initialization but isn't controlled. diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts index 1979146222f9c..64ca76ee5e549 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts +++ b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts @@ -15,7 +15,6 @@ import { GridAggregatedFilterItemApplier, GridAggregatedFilterItemApplierResult, GridColumnRawLookup, - GridApiCommunity, } from '@mui/x-data-grid-pro/internals'; import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps'; import { GridGroupingValueGetterParams } from '../../../models/gridGroupingValueGetterParams'; @@ -58,7 +57,7 @@ interface FilterRowTreeFromTreeDataParams { rowTree: GridRowTreeConfig; isRowMatchingFilters: GridAggregatedFilterItemApplier | null; filterModel: GridFilterModel; - apiRef: React.MutableRefObject; + apiRef: React.MutableRefObject; } /** diff --git a/packages/grid/x-data-grid-premium/src/models/gridApiPremium.ts b/packages/grid/x-data-grid-premium/src/models/gridApiPremium.ts index c28b36e4dd19c..e79561d733b99 100644 --- a/packages/grid/x-data-grid-premium/src/models/gridApiPremium.ts +++ b/packages/grid/x-data-grid-premium/src/models/gridApiPremium.ts @@ -13,6 +13,7 @@ import { import { GridInitialStatePremium, GridStatePremium } from './gridStatePremium'; import type { GridRowGroupingApi, GridExcelExportApi, GridAggregationApi } from '../hooks'; import { GridCellSelectionApi } from '../hooks/features/cellSelection/gridCellSelectionInterfaces'; +import type { DataGridPremiumProcessedProps } from './dataGridPremiumProps'; /** * The api of `DataGridPremium`. @@ -35,5 +36,5 @@ export interface GridApiPremium export interface GridPrivateApiPremium extends GridApiPremium, - GridPrivateOnlyApiCommon, + GridPrivateOnlyApiCommon, GridDetailPanelPrivateApi {} diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 2e4e10ea1e89e..d5e80334ef04f 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -421,6 +421,12 @@ DataGridProRaw.propTypes = { * @default false */ hideFooterSelectedRowCount: PropTypes.bool, + /** + * If `true`, the diacritics (accents) are ignored when filtering or quick filtering. + * E.g. when filter value is `cafe`, the rows with `café` will be visible. + * @default false + */ + ignoreDiacritics: PropTypes.bool, /** * The initial state of the DataGridPro. * The data in it will be set in the state on initialization but will not be controlled. diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts b/packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts index 291adc3f39d74..9926ef35c3df5 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts +++ b/packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts @@ -8,16 +8,16 @@ import { import { GridAggregatedFilterItemApplier, GridAggregatedFilterItemApplierResult, - GridApiCommunity, passFilterLogic, } from '@mui/x-data-grid/internals'; +import type { GridPrivateApiPro } from '../../../models/gridApiPro'; interface FilterRowTreeFromTreeDataParams { rowTree: GridRowTreeConfig; disableChildrenFiltering: boolean; isRowMatchingFilters: GridAggregatedFilterItemApplier | null; filterModel: GridFilterModel; - apiRef: React.MutableRefObject; + apiRef: React.MutableRefObject; } export const TREE_DATA_STRATEGY = 'tree-data'; diff --git a/packages/grid/x-data-grid-pro/src/models/gridApiPro.ts b/packages/grid/x-data-grid-pro/src/models/gridApiPro.ts index 5b541d730f6b1..1ad793c49c50e 100644 --- a/packages/grid/x-data-grid-pro/src/models/gridApiPro.ts +++ b/packages/grid/x-data-grid-pro/src/models/gridApiPro.ts @@ -13,6 +13,7 @@ import type { GridRowPinningApi, GridDetailPanelPrivateApi, } from '../hooks'; +import type { DataGridProProcessedProps } from './dataGridProProps'; /** * The api of `DataGridPro`. @@ -30,5 +31,5 @@ export interface GridApiPro export interface GridPrivateApiPro extends GridApiPro, - GridPrivateOnlyApiCommon, + GridPrivateOnlyApiCommon, GridDetailPanelPrivateApi {} diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx index 3a5608ae2235f..a23b51c52a854 100644 --- a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx @@ -301,6 +301,12 @@ DataGridRaw.propTypes = { * @default false */ hideFooterSelectedRowCount: PropTypes.bool, + /** + * If `true`, the diacritics (accents) are ignored when filtering or quick filtering. + * E.g. when filter value is `cafe`, the rows with `café` will be visible. + * @default false + */ + ignoreDiacritics: PropTypes.bool, /** * The initial state of the DataGrid. * The data in it will be set in the state on initialization but will not be controlled. diff --git a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts index 7d6b381fe64f3..72351e7a47ecc 100644 --- a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts +++ b/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts @@ -62,6 +62,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = { hideFooterPagination: false, hideFooterRowCount: false, hideFooterSelectedRowCount: false, + ignoreDiacritics: false, logger: console, logLevel: process.env.NODE_ENV === 'production' ? ('error' as const) : ('warn' as const), pagination: false, diff --git a/packages/grid/x-data-grid/src/colDef/gridStringOperators.ts b/packages/grid/x-data-grid/src/colDef/gridStringOperators.ts index 9a00deb28c33d..aa875f803a13e 100644 --- a/packages/grid/x-data-grid/src/colDef/gridStringOperators.ts +++ b/packages/grid/x-data-grid/src/colDef/gridStringOperators.ts @@ -12,8 +12,7 @@ export const getGridStringQuickFilterFn = tagInternalFilter( return null; } const filterRegex = new RegExp(escapeRegExp(value), 'i'); - return (_, row, column, apiRef): boolean => { - const columnValue = apiRef.current.getRowFormattedValue(row, column); + return (columnValue): boolean => { return columnValue != null ? filterRegex.test(columnValue.toString()) : false; }; }, diff --git a/packages/grid/x-data-grid/src/hooks/core/useGridInitialization.ts b/packages/grid/x-data-grid/src/hooks/core/useGridInitialization.ts index 77752d254535a..f7ea5d3008cc3 100644 --- a/packages/grid/x-data-grid/src/hooks/core/useGridInitialization.ts +++ b/packages/grid/x-data-grid/src/hooks/core/useGridInitialization.ts @@ -16,7 +16,7 @@ export const useGridInitialization = < Api extends GridApiCommon, >( inputApiRef: React.MutableRefObject | undefined, - props: Pick, + props: DataGridProcessedProps, ) => { const privateApiRef = useGridApiInitialization(inputApiRef, props); useGridLoggerFactory(privateApiRef, props); @@ -25,5 +25,7 @@ export const useGridInitialization = < useGridStrategyProcessing(privateApiRef); useGridLocaleText(privateApiRef, props); + privateApiRef.current.register('private', { rootProps: props }); + return privateApiRef; }; diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts b/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts index 1f6c3526a88f8..a4418aa3626d6 100644 --- a/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts +++ b/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts @@ -8,7 +8,7 @@ import { GridRowId, GridValidRowModel, } from '../../../models'; -import { GridApiCommunity } from '../../../models/api/gridApiCommunity'; +import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; import { GridStateCommunity } from '../../../models/gridStateCommunity'; import { GLOBAL_API_REF, isInternalFilter } from '../../../colDef/utils'; import { @@ -55,13 +55,13 @@ type GridFilterItemApplierNotAggregated = ( /** * Adds default values to the optional fields of a filter items. * @param {GridFilterItem} item The raw filter item. - * @param {React.MutableRefObject} apiRef The API of the grid. + * @param {React.MutableRefObject} apiRef The API of the grid. * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operator. * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem. */ export const cleanFilterItem = ( item: GridFilterItem, - apiRef: React.MutableRefObject, + apiRef: React.MutableRefObject, ) => { const cleanItem: GridFilterItem = { ...item }; @@ -100,7 +100,7 @@ const filterModelMissingItemOperatorWarning = buildWarning( export const sanitizeFilterModel = ( model: GridFilterModel, disableMultipleColumnsFiltering: boolean, - apiRef: React.MutableRefObject, + apiRef: React.MutableRefObject, ) => { const hasSeveralItems = model.items.length > 1; @@ -145,16 +145,23 @@ export const mergeStateWithFilterModel = ( filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, - apiRef: React.MutableRefObject, + apiRef: React.MutableRefObject, ) => (filteringState: GridStateCommunity['filter']): GridStateCommunity['filter'] => ({ ...filteringState, filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef), }); +const removeDiacritics = (value: unknown) => { + if (typeof value === 'string') { + return value.normalize('NFD').replace(/[\u0300-\u036f]/g, ''); + } + return value; +}; + const getFilterCallbackFromItem = ( filterItem: GridFilterItem, - apiRef: React.MutableRefObject, + apiRef: React.MutableRefObject, ): GridFilterItemApplier | null => { if (!filterItem.field || !filterItem.operator) { return null; @@ -174,6 +181,13 @@ const getFilterCallbackFromItem = ( } else { parsedValue = filterItem.value; } + + const { ignoreDiacritics } = apiRef.current.rootProps; + + if (ignoreDiacritics) { + parsedValue = removeDiacritics(parsedValue); + } + const newFilterItem: GridFilterItem = { ...filterItem, value: parsedValue }; const filterOperators = column.filterOperators; @@ -202,7 +216,10 @@ const getFilterCallbackFromItem = ( v7: true, item: newFilterItem, fn: (row: GridValidRowModel) => { - const value = apiRef.current.getRowValue(row, column); + let value = apiRef.current.getRowValue(row, column); + if (ignoreDiacritics) { + value = removeDiacritics(value); + } return applyFilterOnRow(value, row, column, apiRef); }, }; @@ -219,6 +236,9 @@ const getFilterCallbackFromItem = ( fn: (rowId: GridRowId) => { const params = apiRef.current.getCellParams(rowId, newFilterItem.field!); GLOBAL_API_REF.current = apiRef; + if (ignoreDiacritics) { + params.value = removeDiacritics(params.value); + } const result = applyFilterOnRow(params); GLOBAL_API_REF.current = null; return result; @@ -231,12 +251,12 @@ let filterItemsApplierId = 1; /** * Generates a method to easily check if a row is matching the current filter model. * @param {GridFilterModel} filterModel The model with which we want to filter the rows. - * @param {React.MutableRefObject} apiRef The API of the grid. + * @param {React.MutableRefObject} apiRef The API of the grid. * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters. */ const buildAggregatedFilterItemsApplier = ( filterModel: GridFilterModel, - apiRef: React.MutableRefObject, + apiRef: React.MutableRefObject, disableEval: boolean, ): GridFilterItemApplierNotAggregated | null => { const { items } = filterModel; @@ -308,12 +328,12 @@ const buildAggregatedFilterItemsApplier = ( /** * Generates a method to easily check if a row is matching the current quick filter. * @param {any[]} filterModel The model with which we want to filter the rows. - * @param {React.MutableRefObject} apiRef The API of the grid. + * @param {React.MutableRefObject} apiRef The API of the grid. * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters. */ const buildAggregatedQuickFilterApplier = ( filterModel: GridFilterModel, - apiRef: React.MutableRefObject, + apiRef: React.MutableRefObject, ): GridFilterItemApplierNotAggregated | null => { const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? []; if (quickFilterValues.length === 0) { @@ -334,6 +354,8 @@ const buildAggregatedQuickFilterApplier = ( }[]; }[]; + const { ignoreDiacritics } = apiRef.current.rootProps; + columnFields.forEach((field) => { const column = apiRef.current.getColumn(field); const getApplyQuickFilterFn = column?.getApplyQuickFilterFn; @@ -345,18 +367,24 @@ const buildAggregatedQuickFilterApplier = ( if (getApplyQuickFilterFnV7 && !(hasUserFunctionLegacy && !hasUserFunctionV7)) { appliersPerField.push({ column, - appliers: quickFilterValues.map((value) => ({ - v7: true, - fn: getApplyQuickFilterFnV7(value, column, apiRef), - })), + appliers: quickFilterValues.map((quickFilterValue) => { + const value = ignoreDiacritics ? removeDiacritics(quickFilterValue) : quickFilterValue; + return { + v7: true, + fn: getApplyQuickFilterFnV7(value, column, apiRef), + }; + }), }); } else if (getApplyQuickFilterFn) { appliersPerField.push({ column, - appliers: quickFilterValues.map((value) => ({ - v7: false, - fn: getApplyQuickFilterFn(value, column, apiRef), - })), + appliers: quickFilterValues.map((quickFilterValue) => { + const value = ignoreDiacritics ? removeDiacritics(quickFilterValue) : quickFilterValue; + return { + v7: false, + fn: getApplyQuickFilterFn(value, column, apiRef), + }; + }), }); } }); @@ -378,13 +406,16 @@ const buildAggregatedQuickFilterApplier = ( } const applier = appliers[v]; - const value = apiRef.current.getRowValue(row, column); + let value = apiRef.current.getRowFormattedValue(row, column); if (applier.fn === null) { continue; } if (applier.v7) { + if (ignoreDiacritics) { + value = removeDiacritics(value); + } const isMatching = applier.fn(value, row, column, apiRef); if (isMatching) { result[filterValue] = true; @@ -394,6 +425,9 @@ const buildAggregatedQuickFilterApplier = ( const cellParams = usedCellParams[field] ?? apiRef.current.getCellParams(apiRef.current.getRowId(row), field); + if (ignoreDiacritics) { + cellParams.value = removeDiacritics(cellParams.value); + } usedCellParams[field] = cellParams; const isMatching = applier.fn(cellParams); @@ -414,7 +448,7 @@ const buildAggregatedQuickFilterApplier = ( export const buildAggregatedFilterApplier = ( filterModel: GridFilterModel, - apiRef: React.MutableRefObject, + apiRef: React.MutableRefObject, disableEval: boolean, ): GridAggregatedFilterItemApplier => { const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier( @@ -438,7 +472,7 @@ type FilterCache = { const filterModelItems = ( cache: FilterCache, - apiRef: React.MutableRefObject, + apiRef: React.MutableRefObject, items: GridFilterItem[], ) => { if (!cache.cleanedFilterItems) { @@ -453,7 +487,7 @@ export const passFilterLogic = ( allFilterItemResults: (null | GridFilterItemResult)[], allQuickFilterResults: (null | GridQuickFilterValueResult)[], filterModel: GridFilterModel, - apiRef: React.MutableRefObject, + apiRef: React.MutableRefObject, cache: FilterCache, ): boolean => { const cleanedFilterItems = filterModelItems(cache, apiRef, filterModel.items); diff --git a/packages/grid/x-data-grid/src/models/api/gridApiCommon.ts b/packages/grid/x-data-grid/src/models/api/gridApiCommon.ts index 79745cb26e03f..091732aeb64fb 100644 --- a/packages/grid/x-data-grid/src/models/api/gridApiCommon.ts +++ b/packages/grid/x-data-grid/src/models/api/gridApiCommon.ts @@ -33,6 +33,7 @@ import type { GridStatePersistenceApi } from '../../hooks/features/statePersiste import { GridColumnGroupingApi } from './gridColumnGroupingApi'; import type { GridInitialStateCommunity, GridStateCommunity } from '../gridStateCommunity'; import { GridHeaderFilteringApi, GridHeaderFilteringPrivateApi } from './gridHeaderFilteringApi'; +import type { DataGridProcessedProps } from '../props/DataGridProps'; export interface GridApiCommon< GridState extends GridStateCommunity = any, @@ -67,7 +68,8 @@ export interface GridApiCommon< export interface GridPrivateOnlyApiCommon< Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, -> extends GridCorePrivateApi, + Props extends DataGridProcessedProps, +> extends GridCorePrivateApi, GridStatePrivateApi, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, @@ -82,4 +84,4 @@ export interface GridPrivateOnlyApiCommon< export interface GridPrivateApiCommon extends GridApiCommon, - GridPrivateOnlyApiCommon {} + GridPrivateOnlyApiCommon {} diff --git a/packages/grid/x-data-grid/src/models/api/gridApiCommunity.ts b/packages/grid/x-data-grid/src/models/api/gridApiCommunity.ts index 7f785d2b29ec4..308949c6d24bc 100644 --- a/packages/grid/x-data-grid/src/models/api/gridApiCommunity.ts +++ b/packages/grid/x-data-grid/src/models/api/gridApiCommunity.ts @@ -1,4 +1,5 @@ import type { GridInitialStateCommunity, GridStateCommunity } from '../gridStateCommunity'; +import type { DataGridProcessedProps } from '../props/DataGridProps'; import type { GridApiCommon, GridPrivateOnlyApiCommon } from './gridApiCommon'; import type { GridColumnReorderApi } from './gridColumnApi'; import { GridRowProApi } from './gridRowApi'; @@ -12,7 +13,7 @@ export interface GridApiCommunity export interface GridPrivateApiCommunity extends GridApiCommunity, - GridPrivateOnlyApiCommon, + GridPrivateOnlyApiCommon, // APIs that are private in Community plan, but public in Pro and Premium plans GridRowMultiSelectionApi, GridColumnReorderApi, diff --git a/packages/grid/x-data-grid/src/models/api/gridCoreApi.ts b/packages/grid/x-data-grid/src/models/api/gridCoreApi.ts index e69a0917f7a66..405eeca6e2244 100644 --- a/packages/grid/x-data-grid/src/models/api/gridCoreApi.ts +++ b/packages/grid/x-data-grid/src/models/api/gridCoreApi.ts @@ -4,6 +4,7 @@ import { Store } from '../../utils/Store'; import { EventManager, EventListenerOptions } from '../../utils/EventManager'; import { GridApiCaches } from '../gridApiCaches'; import type { GridApiCommon, GridPrivateApiCommon } from './gridApiCommon'; +import type { DataGridProcessedProps } from '../props/DataGridProps'; /** * The core API interface that is available in the grid `apiRef`. @@ -48,6 +49,7 @@ export interface GridCoreApi { export interface GridCorePrivateApi< GridPublicApi extends GridApiCommon, GridPrivateApi extends GridPrivateApiCommon, + GridProps extends DataGridProcessedProps, > { /** * The caches used by hooks and state initializers. @@ -87,6 +89,11 @@ export interface GridCorePrivateApi< * @returns {GridPublicApi} The public api. */ getPublicApi: () => GridPublicApi; + /** + * Allows to access the root props outside of the React component. + * Do not use in React components - use the `useGridRootProps` hook instead. + */ + rootProps: GridProps; /** * The React ref of the grid column container virtualized div element. */ diff --git a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts index aa078230b2041..c807d04c323bd 100644 --- a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts @@ -267,6 +267,12 @@ export interface DataGridPropsWithDefaultValues { * @default false */ hideFooterSelectedRowCount: boolean; + /** + * If `true`, the diacritics (accents) are ignored when filtering or quick filtering. + * E.g. when filter value is `cafe`, the rows with `café` will be visible. + * @default false + */ + ignoreDiacritics: boolean; /** * If `true`, the selection model will retain selected rows that do not exist. * Useful when using server side pagination and row selections need to be retained diff --git a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx index 004ae708b3198..22fefc029802c 100644 --- a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx @@ -410,6 +410,52 @@ describe(' - Filter', () => { '1', ]); }); + + describe('ignoreDiacritics', () => { + function DiacriticsTestCase({ + filterValue, + ...props + }: Partial & { filterValue: GridFilterItem['value'] }) { + return ( + + ); + } + + it('should not ignore diacritics by default', () => { + testEval(() => { + const { unmount } = render(); + expect(getColumnValues(0)).to.deep.equal([]); + unmount(); + }); + + testEval(() => { + const { unmount } = render(); + expect(getColumnValues(0)).to.deep.equal(['Apă']); + unmount(); + }); + }); + + it('should ignore diacritics when `ignoreDiacritics` is enabled', () => { + testEval(() => { + const { unmount } = render(); + expect(getColumnValues(0)).to.deep.equal(['Apă']); + unmount(); + }); + + testEval(() => { + const { unmount } = render(); + expect(getColumnValues(0)).to.deep.equal(['Apă']); + unmount(); + }); + }); + }); }); describe('column type: number', () => { diff --git a/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx index e96dd895cce5b..9789e5bfd3c10 100644 --- a/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx @@ -437,6 +437,47 @@ describe(' - Quick filter', () => { expect(getRows({ quickFilterValues: ['+55 44444444'] })).to.deep.equal(['France (fr)']); expect(getRows({ quickFilterValues: ['5544444444'] })).to.deep.equal([]); }); + + describe('ignoreDiacritics', () => { + function DiacriticsTestCase({ + quickFilterValues, + ...props + }: Partial & { + quickFilterValues: GridFilterModel['quickFilterValues']; + }) { + return ( + + ); + } + + it('should not ignore diacritics by default', () => { + let renderer = render(); + expect(getColumnValues(0)).to.deep.equal([]); + renderer.unmount(); + + renderer = render(); + expect(getColumnValues(0)).to.deep.equal(['Apă']); + renderer.unmount(); + }); + + it('should ignore diacritics when `ignoreDiacritics` is enabled', () => { + let renderer = render(); + expect(getColumnValues(0)).to.deep.equal(['Apă']); + renderer.unmount(); + + renderer = render(); + expect(getColumnValues(0)).to.deep.equal(['Apă']); + renderer.unmount(); + }); + }); }); describe('column type: number', () => { diff --git a/test/regressions/index.test.js b/test/regressions/index.test.js index 88f833b908dec..0fda626db48a8 100644 --- a/test/regressions/index.test.js +++ b/test/regressions/index.test.js @@ -112,6 +112,7 @@ async function main() { '/docs-data-grid-sorting/FullyCustomSortComparator', // No flag column '/docs-data-grid-sorting/ServerSortingGrid', // No flag column '/docs-data-grid-filtering/QuickFilteringExcludeHiddenColumns', // No flag column + '/docs-data-grid-filtering/QuickFilteringDiacritics', // No flag column ]; if ( From 4295a7f78ef992293834c95f8ce80286b17e0558 Mon Sep 17 00:00:00 2001 From: Lukas Date: Thu, 2 Nov 2023 18:47:26 +0200 Subject: [PATCH 223/262] [core] Generate `slot` API descriptions based on `slots` or `components` (#10879) --- docs/pages/x/api/charts/area-element.json | 9 +- docs/pages/x/api/charts/area-plot.json | 9 +- docs/pages/x/api/charts/bar-chart.json | 12 +- docs/pages/x/api/charts/bar-plot.json | 9 +- docs/pages/x/api/charts/charts-axis.json | 7 +- docs/pages/x/api/charts/charts-tooltip.json | 6 +- docs/pages/x/api/charts/charts-x-axis.json | 7 +- docs/pages/x/api/charts/charts-y-axis.json | 7 +- docs/pages/x/api/charts/line-chart.json | 15 ++- docs/pages/x/api/charts/line-element.json | 9 +- .../x/api/charts/line-highlight-plot.json | 2 +- docs/pages/x/api/charts/line-plot.json | 9 +- docs/pages/x/api/charts/mark-plot.json | 2 +- docs/pages/x/api/charts/pie-plot.json | 5 +- docs/pages/x/api/charts/scatter-chart.json | 12 +- docs/pages/x/api/charts/scatter-plot.json | 2 +- docs/pages/x/api/charts/spark-line-chart.json | 11 +- .../date-pickers/pickers-calendar-header.json | 51 +++++++- .../api/buildComponentsDocumentation.ts | 14 ++- .../api-docs/charts/area-element.json | 2 +- .../api-docs/charts/area-plot.json | 2 +- .../api-docs/charts/bar-chart.json | 12 +- .../api-docs/charts/bar-plot.json | 2 +- .../api-docs/charts/charts-axis.json | 2 +- .../api-docs/charts/charts-tooltip.json | 2 +- .../api-docs/charts/charts-x-axis.json | 2 +- .../api-docs/charts/charts-y-axis.json | 2 +- .../api-docs/charts/line-chart.json | 15 ++- .../api-docs/charts/line-element.json | 2 +- .../api-docs/charts/line-highlight-plot.json | 2 +- .../api-docs/charts/line-plot.json | 2 +- .../api-docs/charts/mark-plot.json | 2 +- .../api-docs/charts/pie-plot.json | 2 +- .../api-docs/charts/scatter-chart.json | 12 +- .../api-docs/charts/scatter-plot.json | 2 +- .../api-docs/charts/spark-line-chart.json | 11 +- .../date-pickers/pickers-calendar-header.json | 19 ++- .../PickersCalendarHeader.tsx | 116 ++++-------------- .../PickersCalendarHeader.types.ts | 99 +++++++++++++++ .../src/PickersCalendarHeader/index.ts | 2 +- 40 files changed, 380 insertions(+), 130 deletions(-) create mode 100644 packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts diff --git a/docs/pages/x/api/charts/area-element.json b/docs/pages/x/api/charts/area-element.json index 2d28a9e84535e..88a03febfead4 100644 --- a/docs/pages/x/api/charts/area-element.json +++ b/docs/pages/x/api/charts/area-element.json @@ -3,7 +3,14 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [ + { + "class": null, + "name": "area", + "description": "The component that renders the root.", + "default": "AreaElementPath" + } + ], "name": "AreaElement", "imports": [ "import { AreaElement } from '@mui/x-charts/LineChart';", diff --git a/docs/pages/x/api/charts/area-plot.json b/docs/pages/x/api/charts/area-plot.json index 8314d42eea7bf..8f1a7a0793cfe 100644 --- a/docs/pages/x/api/charts/area-plot.json +++ b/docs/pages/x/api/charts/area-plot.json @@ -3,7 +3,14 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [ + { + "class": null, + "name": "area", + "description": "The component that renders the root.", + "default": "AreaElementPath" + } + ], "name": "AreaPlot", "imports": [ "import { AreaPlot } from '@mui/x-charts/LineChart';", diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index e50ae45c3a0f3..8bbff0857a776 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -35,7 +35,17 @@ "default": "null" } }, - "slots": [], + "slots": [ + { "class": null, "name": "axisContent", "description": "" }, + { "class": null, "name": "axisLabel", "description": "" }, + { "class": null, "name": "axisLine", "description": "" }, + { "class": null, "name": "axisTick", "description": "" }, + { "class": null, "name": "axisTickLabel", "description": "" }, + { "class": null, "name": "bar", "description": "" }, + { "class": null, "name": "itemContent", "description": "" }, + { "class": null, "name": "legend", "description": "" }, + { "class": null, "name": "popper", "description": "" } + ], "name": "BarChart", "imports": [ "import { BarChart } from '@mui/x-charts/BarChart';", diff --git a/docs/pages/x/api/charts/bar-plot.json b/docs/pages/x/api/charts/bar-plot.json index 9ce5a22fa9fcd..1c3a017e0f3e1 100644 --- a/docs/pages/x/api/charts/bar-plot.json +++ b/docs/pages/x/api/charts/bar-plot.json @@ -4,7 +4,14 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [ + { + "class": null, + "name": "bar", + "description": "The component that renders the root.", + "default": "BarElementPath" + } + ], "name": "BarPlot", "imports": [ "import { BarPlot } from '@mui/x-charts/BarChart';", diff --git a/docs/pages/x/api/charts/charts-axis.json b/docs/pages/x/api/charts/charts-axis.json index bf524fb1148ae..c198f3032049d 100644 --- a/docs/pages/x/api/charts/charts-axis.json +++ b/docs/pages/x/api/charts/charts-axis.json @@ -31,7 +31,12 @@ "default": "null" } }, - "slots": [], + "slots": [ + { "class": null, "name": "axisLabel", "description": "" }, + { "class": null, "name": "axisLine", "description": "" }, + { "class": null, "name": "axisTick", "description": "" }, + { "class": null, "name": "axisTickLabel", "description": "" } + ], "name": "ChartsAxis", "imports": [ "import { ChartsAxis } from '@mui/x-charts/ChartsAxis';", diff --git a/docs/pages/x/api/charts/charts-tooltip.json b/docs/pages/x/api/charts/charts-tooltip.json index 232e1b84b8ad8..3a35f708fbeaa 100644 --- a/docs/pages/x/api/charts/charts-tooltip.json +++ b/docs/pages/x/api/charts/charts-tooltip.json @@ -21,7 +21,11 @@ "default": "'item'" } }, - "slots": [], + "slots": [ + { "class": null, "name": "axisContent", "description": "" }, + { "class": null, "name": "itemContent", "description": "" }, + { "class": null, "name": "popper", "description": "" } + ], "name": "ChartsTooltip", "imports": [ "import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';", diff --git a/docs/pages/x/api/charts/charts-x-axis.json b/docs/pages/x/api/charts/charts-x-axis.json index ce99eb0bae3b3..9580898464ea8 100644 --- a/docs/pages/x/api/charts/charts-x-axis.json +++ b/docs/pages/x/api/charts/charts-x-axis.json @@ -37,7 +37,12 @@ "tickNumber": { "type": { "name": "number" } }, "tickSize": { "type": { "name": "number" }, "default": "6" } }, - "slots": [], + "slots": [ + { "class": null, "name": "axisLabel", "description": "" }, + { "class": null, "name": "axisLine", "description": "" }, + { "class": null, "name": "axisTick", "description": "" }, + { "class": null, "name": "axisTickLabel", "description": "" } + ], "name": "ChartsXAxis", "imports": [ "import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';", diff --git a/docs/pages/x/api/charts/charts-y-axis.json b/docs/pages/x/api/charts/charts-y-axis.json index 812cac2fcadea..24b012f47388b 100644 --- a/docs/pages/x/api/charts/charts-y-axis.json +++ b/docs/pages/x/api/charts/charts-y-axis.json @@ -37,7 +37,12 @@ "tickNumber": { "type": { "name": "number" } }, "tickSize": { "type": { "name": "number" }, "default": "6" } }, - "slots": [], + "slots": [ + { "class": null, "name": "axisLabel", "description": "" }, + { "class": null, "name": "axisLine", "description": "" }, + { "class": null, "name": "axisTick", "description": "" }, + { "class": null, "name": "axisTickLabel", "description": "" } + ], "name": "ChartsYAxis", "imports": [ "import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';", diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index cea5dbd5a0468..58f9a9f375d6a 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -35,7 +35,20 @@ "default": "null" } }, - "slots": [], + "slots": [ + { "class": null, "name": "area", "description": "" }, + { "class": null, "name": "axisContent", "description": "" }, + { "class": null, "name": "axisLabel", "description": "" }, + { "class": null, "name": "axisLine", "description": "" }, + { "class": null, "name": "axisTick", "description": "" }, + { "class": null, "name": "axisTickLabel", "description": "" }, + { "class": null, "name": "itemContent", "description": "" }, + { "class": null, "name": "legend", "description": "" }, + { "class": null, "name": "line", "description": "" }, + { "class": null, "name": "lineHighlight", "description": "" }, + { "class": null, "name": "mark", "description": "" }, + { "class": null, "name": "popper", "description": "" } + ], "name": "LineChart", "imports": [ "import { LineChart } from '@mui/x-charts/LineChart';", diff --git a/docs/pages/x/api/charts/line-element.json b/docs/pages/x/api/charts/line-element.json index 4b97cc5ba9301..3a088bc7acbee 100644 --- a/docs/pages/x/api/charts/line-element.json +++ b/docs/pages/x/api/charts/line-element.json @@ -3,7 +3,14 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [ + { + "class": null, + "name": "line", + "description": "The component that renders the root.", + "default": "LineElementPath" + } + ], "name": "LineElement", "imports": [ "import { LineElement } from '@mui/x-charts/LineChart';", diff --git a/docs/pages/x/api/charts/line-highlight-plot.json b/docs/pages/x/api/charts/line-highlight-plot.json index 7843dba61f120..c939c5af6d818 100644 --- a/docs/pages/x/api/charts/line-highlight-plot.json +++ b/docs/pages/x/api/charts/line-highlight-plot.json @@ -3,7 +3,7 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [{ "class": null, "name": "lineHighlight", "description": "" }], "name": "LineHighlightPlot", "imports": [ "import { LineHighlightPlot } from '@mui/x-charts/LineChart';", diff --git a/docs/pages/x/api/charts/line-plot.json b/docs/pages/x/api/charts/line-plot.json index f1823692c9227..7a88452cd6142 100644 --- a/docs/pages/x/api/charts/line-plot.json +++ b/docs/pages/x/api/charts/line-plot.json @@ -3,7 +3,14 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [ + { + "class": null, + "name": "line", + "description": "The component that renders the root.", + "default": "LineElementPath" + } + ], "name": "LinePlot", "imports": [ "import { LinePlot } from '@mui/x-charts/LineChart';", diff --git a/docs/pages/x/api/charts/mark-plot.json b/docs/pages/x/api/charts/mark-plot.json index b35f000735a26..25c608bdbdaf0 100644 --- a/docs/pages/x/api/charts/mark-plot.json +++ b/docs/pages/x/api/charts/mark-plot.json @@ -3,7 +3,7 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [{ "class": null, "name": "mark", "description": "" }], "name": "MarkPlot", "imports": [ "import { MarkPlot } from '@mui/x-charts/LineChart';", diff --git a/docs/pages/x/api/charts/pie-plot.json b/docs/pages/x/api/charts/pie-plot.json index 9ed3ce567fd6b..d6c6ff13d881c 100644 --- a/docs/pages/x/api/charts/pie-plot.json +++ b/docs/pages/x/api/charts/pie-plot.json @@ -11,7 +11,10 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [ + { "class": null, "name": "pieArc", "description": "" }, + { "class": null, "name": "pieArcLabel", "description": "" } + ], "name": "PiePlot", "imports": [ "import { PiePlot } from '@mui/x-charts/PieChart';", diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index 9d956a28bf6d9..c6f231f5a69b7 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -34,7 +34,17 @@ "default": "null" } }, - "slots": [], + "slots": [ + { "class": null, "name": "axisContent", "description": "" }, + { "class": null, "name": "axisLabel", "description": "" }, + { "class": null, "name": "axisLine", "description": "" }, + { "class": null, "name": "axisTick", "description": "" }, + { "class": null, "name": "axisTickLabel", "description": "" }, + { "class": null, "name": "itemContent", "description": "" }, + { "class": null, "name": "legend", "description": "" }, + { "class": null, "name": "popper", "description": "" }, + { "class": null, "name": "scatter", "description": "" } + ], "name": "ScatterChart", "imports": [ "import { ScatterChart } from '@mui/x-charts/ScatterChart';", diff --git a/docs/pages/x/api/charts/scatter-plot.json b/docs/pages/x/api/charts/scatter-plot.json index 7e44a83dd7ded..a3a337d14e88c 100644 --- a/docs/pages/x/api/charts/scatter-plot.json +++ b/docs/pages/x/api/charts/scatter-plot.json @@ -3,7 +3,7 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [{ "class": null, "name": "scatter", "description": "" }], "name": "ScatterPlot", "imports": [ "import { ScatterPlot } from '@mui/x-charts/ScatterChart';", diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json index fabe4546256d1..7adb9df48fcfc 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -31,7 +31,16 @@ } } }, - "slots": [], + "slots": [ + { "class": null, "name": "area", "description": "" }, + { "class": null, "name": "axisContent", "description": "" }, + { "class": null, "name": "bar", "description": "" }, + { "class": null, "name": "itemContent", "description": "" }, + { "class": null, "name": "line", "description": "" }, + { "class": null, "name": "lineHighlight", "description": "" }, + { "class": null, "name": "mark", "description": "" }, + { "class": null, "name": "popper", "description": "" } + ], "name": "SparkLineChart", "imports": [ "import { SparkLineChart } from '@mui/x-charts/SparkLineChart';", 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 f12af2c0a973f..836c73a2106c9 100644 --- a/docs/pages/x/api/date-pickers/pickers-calendar-header.json +++ b/docs/pages/x/api/date-pickers/pickers-calendar-header.json @@ -2,6 +2,18 @@ "props": { "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "className": { "type": { "name": "string" } }, + "components": { + "type": { "name": "object" }, + "default": "{}", + "deprecated": true, + "deprecationInfo": "Please use slots." + }, + "componentsProps": { + "type": { "name": "object" }, + "default": "{}", + "deprecated": true, + "deprecationInfo": "Please use slotProps." + }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" }, "sx": { @@ -12,7 +24,44 @@ "additionalInfo": { "sx": true } } }, - "slots": [], + "slots": [ + { + "class": null, + "name": "leftArrowIcon", + "description": "Icon displayed in the left view switch button.", + "default": "ArrowLeft" + }, + { + "class": null, + "name": "nextIconButton", + "description": "Button allowing to switch to the right view.", + "default": "IconButton" + }, + { + "class": null, + "name": "previousIconButton", + "description": "Button allowing to switch to the left view.", + "default": "IconButton" + }, + { + "class": null, + "name": "rightArrowIcon", + "description": "Icon displayed in the right view switch button.", + "default": "ArrowRight" + }, + { + "class": null, + "name": "switchViewButton", + "description": "Button displayed to switch between different calendar views.", + "default": "IconButton" + }, + { + "class": null, + "name": "switchViewIcon", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "default": "ArrowDropDown" + } + ], "name": "PickersCalendarHeader", "imports": [ "import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';", diff --git a/docs/scripts/api/buildComponentsDocumentation.ts b/docs/scripts/api/buildComponentsDocumentation.ts index 82a855aee980a..e6f1ccae5604d 100644 --- a/docs/scripts/api/buildComponentsDocumentation.ts +++ b/docs/scripts/api/buildComponentsDocumentation.ts @@ -83,11 +83,13 @@ function extractSlots(options: { project, checkDeclarations: true, shouldResolveObject: ({ name }) => { - return name === 'components'; + // TODO v7: Remove the `components` fallback once `slots` is used everywhere + return name === 'slots' || name === 'components'; }, shouldInclude: ({ name, depth }) => { // The keys allowed in the `components` prop have depth=2 - return name === 'components' || depth === 2; + // TODO v7: Remove the `components` fallback once `slots` is used everywhere + return name === 'slots' || name === 'components' || depth === 2; }, }); @@ -96,7 +98,10 @@ function extractSlots(options: { throw new Error(`No proptypes found for \`${displayName}\``); } - const componentsProps = props.types.find((type) => type.name === 'components')!; + const componentsProps = props.types.find( + // TODO v7: Remove the `components` fallback once `slots` is used everywhere + (type) => type.name === 'slots' || type.name === 'components', + )!; if (!componentsProps) { return slots; } @@ -481,7 +486,8 @@ const buildComponentDocumentation = async (options: { /** * Slot descriptions. */ - if (componentApi.propDescriptions.components) { + // TODO v7: Remove the `components` fallback once `slots` is used everywhere + if (componentApi.propDescriptions.slots || componentApi.propDescriptions.components) { const slots = extractSlots({ filename, name: reactApi.name, // e.g. DataGrid diff --git a/docs/translations/api-docs/charts/area-element.json b/docs/translations/api-docs/charts/area-element.json index fec8833da4eeb..5d077363ea787 100644 --- a/docs/translations/api-docs/charts/area-element.json +++ b/docs/translations/api-docs/charts/area-element.json @@ -25,5 +25,5 @@ "conditions": "faded" } }, - "slotDescriptions": {} + "slotDescriptions": { "area": "The component that renders the root." } } diff --git a/docs/translations/api-docs/charts/area-plot.json b/docs/translations/api-docs/charts/area-plot.json index 193abb7bf3a9f..c045ac6d34fd8 100644 --- a/docs/translations/api-docs/charts/area-plot.json +++ b/docs/translations/api-docs/charts/area-plot.json @@ -13,5 +13,5 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { "area": "The component that renders the root." } } diff --git a/docs/translations/api-docs/charts/bar-chart.json b/docs/translations/api-docs/charts/bar-chart.json index d2438d2ddb044..bee22b81e0d3c 100644 --- a/docs/translations/api-docs/charts/bar-chart.json +++ b/docs/translations/api-docs/charts/bar-chart.json @@ -43,5 +43,15 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { + "axisContent": "", + "axisLabel": "", + "axisLine": "", + "axisTick": "", + "axisTickLabel": "", + "bar": "", + "itemContent": "", + "legend": "", + "popper": "" + } } diff --git a/docs/translations/api-docs/charts/bar-plot.json b/docs/translations/api-docs/charts/bar-plot.json index 27268d44f0ee3..0df4fa1114fe6 100644 --- a/docs/translations/api-docs/charts/bar-plot.json +++ b/docs/translations/api-docs/charts/bar-plot.json @@ -18,5 +18,5 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { "bar": "The component that renders the root." } } diff --git a/docs/translations/api-docs/charts/charts-axis.json b/docs/translations/api-docs/charts/charts-axis.json index 036b1002dee36..e3e74d1032287 100644 --- a/docs/translations/api-docs/charts/charts-axis.json +++ b/docs/translations/api-docs/charts/charts-axis.json @@ -55,5 +55,5 @@ "left": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the left axis" }, "right": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the right axis" } }, - "slotDescriptions": {} + "slotDescriptions": { "axisLabel": "", "axisLine": "", "axisTick": "", "axisTickLabel": "" } } diff --git a/docs/translations/api-docs/charts/charts-tooltip.json b/docs/translations/api-docs/charts/charts-tooltip.json index e35af3b98a3df..a35867dfa1356 100644 --- a/docs/translations/api-docs/charts/charts-tooltip.json +++ b/docs/translations/api-docs/charts/charts-tooltip.json @@ -47,5 +47,5 @@ "nodeName": "the valueCell element" } }, - "slotDescriptions": {} + "slotDescriptions": { "axisContent": "", "itemContent": "", "popper": "" } } diff --git a/docs/translations/api-docs/charts/charts-x-axis.json b/docs/translations/api-docs/charts/charts-x-axis.json index 68c29dd7f5f0e..d7bff24d1bb96 100644 --- a/docs/translations/api-docs/charts/charts-x-axis.json +++ b/docs/translations/api-docs/charts/charts-x-axis.json @@ -121,5 +121,5 @@ "left": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the left axis" }, "right": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the right axis" } }, - "slotDescriptions": {} + "slotDescriptions": { "axisLabel": "", "axisLine": "", "axisTick": "", "axisTickLabel": "" } } diff --git a/docs/translations/api-docs/charts/charts-y-axis.json b/docs/translations/api-docs/charts/charts-y-axis.json index 68c29dd7f5f0e..d7bff24d1bb96 100644 --- a/docs/translations/api-docs/charts/charts-y-axis.json +++ b/docs/translations/api-docs/charts/charts-y-axis.json @@ -121,5 +121,5 @@ "left": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the left axis" }, "right": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the right axis" } }, - "slotDescriptions": {} + "slotDescriptions": { "axisLabel": "", "axisLine": "", "axisTick": "", "axisTickLabel": "" } } diff --git a/docs/translations/api-docs/charts/line-chart.json b/docs/translations/api-docs/charts/line-chart.json index 76819e02e47ed..67d7f050b9cb2 100644 --- a/docs/translations/api-docs/charts/line-chart.json +++ b/docs/translations/api-docs/charts/line-chart.json @@ -43,5 +43,18 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { + "area": "", + "axisContent": "", + "axisLabel": "", + "axisLine": "", + "axisTick": "", + "axisTickLabel": "", + "itemContent": "", + "legend": "", + "line": "", + "lineHighlight": "", + "mark": "", + "popper": "" + } } diff --git a/docs/translations/api-docs/charts/line-element.json b/docs/translations/api-docs/charts/line-element.json index fec8833da4eeb..9ef25541e1e52 100644 --- a/docs/translations/api-docs/charts/line-element.json +++ b/docs/translations/api-docs/charts/line-element.json @@ -25,5 +25,5 @@ "conditions": "faded" } }, - "slotDescriptions": {} + "slotDescriptions": { "line": "The component that renders the root." } } diff --git a/docs/translations/api-docs/charts/line-highlight-plot.json b/docs/translations/api-docs/charts/line-highlight-plot.json index 193abb7bf3a9f..852747b8f3b12 100644 --- a/docs/translations/api-docs/charts/line-highlight-plot.json +++ b/docs/translations/api-docs/charts/line-highlight-plot.json @@ -13,5 +13,5 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { "lineHighlight": "" } } diff --git a/docs/translations/api-docs/charts/line-plot.json b/docs/translations/api-docs/charts/line-plot.json index 193abb7bf3a9f..1d035d2105337 100644 --- a/docs/translations/api-docs/charts/line-plot.json +++ b/docs/translations/api-docs/charts/line-plot.json @@ -13,5 +13,5 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { "line": "The component that renders the root." } } diff --git a/docs/translations/api-docs/charts/mark-plot.json b/docs/translations/api-docs/charts/mark-plot.json index 193abb7bf3a9f..04790a6a55758 100644 --- a/docs/translations/api-docs/charts/mark-plot.json +++ b/docs/translations/api-docs/charts/mark-plot.json @@ -13,5 +13,5 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { "mark": "" } } diff --git a/docs/translations/api-docs/charts/pie-plot.json b/docs/translations/api-docs/charts/pie-plot.json index 74758708869aa..326efd758310c 100644 --- a/docs/translations/api-docs/charts/pie-plot.json +++ b/docs/translations/api-docs/charts/pie-plot.json @@ -27,5 +27,5 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { "pieArc": "", "pieArcLabel": "" } } diff --git a/docs/translations/api-docs/charts/scatter-chart.json b/docs/translations/api-docs/charts/scatter-chart.json index e785806eeef7c..03154c1e5ef1f 100644 --- a/docs/translations/api-docs/charts/scatter-chart.json +++ b/docs/translations/api-docs/charts/scatter-chart.json @@ -38,5 +38,15 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { + "axisContent": "", + "axisLabel": "", + "axisLine": "", + "axisTick": "", + "axisTickLabel": "", + "itemContent": "", + "legend": "", + "popper": "", + "scatter": "" + } } diff --git a/docs/translations/api-docs/charts/scatter-plot.json b/docs/translations/api-docs/charts/scatter-plot.json index 193abb7bf3a9f..67c937d9f2817 100644 --- a/docs/translations/api-docs/charts/scatter-plot.json +++ b/docs/translations/api-docs/charts/scatter-plot.json @@ -13,5 +13,5 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { "scatter": "" } } diff --git a/docs/translations/api-docs/charts/spark-line-chart.json b/docs/translations/api-docs/charts/spark-line-chart.json index f07c45c29efb1..6c1257c5611ab 100644 --- a/docs/translations/api-docs/charts/spark-line-chart.json +++ b/docs/translations/api-docs/charts/spark-line-chart.json @@ -45,5 +45,14 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { + "area": "", + "axisContent": "", + "bar": "", + "itemContent": "", + "line": "", + "lineHighlight": "", + "mark": "", + "popper": "" + } } diff --git a/docs/translations/api-docs/date-pickers/pickers-calendar-header.json b/docs/translations/api-docs/date-pickers/pickers-calendar-header.json index fa256e342ed43..19ae10c1e8b1c 100644 --- a/docs/translations/api-docs/date-pickers/pickers-calendar-header.json +++ b/docs/translations/api-docs/date-pickers/pickers-calendar-header.json @@ -11,6 +11,16 @@ "deprecated": "", "typeDescriptions": {} }, + "components": { + "description": "Overridable components.", + "deprecated": "", + "typeDescriptions": {} + }, + "componentsProps": { + "description": "The props used for each component slot.", + "deprecated": "", + "typeDescriptions": {} + }, "slotProps": { "description": "The props used for each component slot.", "deprecated": "", @@ -43,5 +53,12 @@ "nodeName": "the switch view icon element" } }, - "slotDescriptions": {} + "slotDescriptions": { + "leftArrowIcon": "Icon displayed in the left view switch button.", + "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'." + } } diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx index 0ec2ca2407718..0594e71c820c5 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx @@ -2,106 +2,26 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import Fade from '@mui/material/Fade'; -import { styled, SxProps, Theme, useThemeProps } from '@mui/material/styles'; -import { SlotComponentProps, useSlotProps } from '@mui/base/utils'; +import { styled, useThemeProps } from '@mui/material/styles'; +import { useSlotProps } from '@mui/base/utils'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; import IconButton from '@mui/material/IconButton'; -import SvgIcon from '@mui/material/SvgIcon'; -import { SlideDirection } from '../DateCalendar/PickersSlideTransition'; import { useLocaleText, useUtils } from '../internals/hooks/useUtils'; import { PickersFadeTransitionGroup } from '../DateCalendar/PickersFadeTransitionGroup'; import { ArrowDropDownIcon } from '../icons'; -import { - PickersArrowSwitcher, - ExportedPickersArrowSwitcherProps, - PickersArrowSwitcherSlotsComponent, - PickersArrowSwitcherSlotsComponentsProps, -} from '../internals/components/PickersArrowSwitcher'; +import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher'; import { usePreviousMonthDisabled, useNextMonthDisabled, - MonthValidationOptions, } from '../internals/hooks/date-helpers-hooks'; -import { DateView } from '../models'; import { getPickersCalendarHeaderUtilityClass, pickersCalendarHeaderClasses, - PickersCalendarHeaderClasses, } from './pickersCalendarHeaderClasses'; -import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration'; - -export type ExportedPickersCalendarHeaderProps = Pick< - PickersCalendarHeaderProps, - 'classes' | 'slots' | 'slotProps' ->; - -export interface PickersCalendarHeaderSlotsComponent extends PickersArrowSwitcherSlotsComponent { - /** - * Button displayed to switch between different calendar views. - * @default IconButton - */ - SwitchViewButton?: React.ElementType; - /** - * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'. - * @default ArrowDropDown - */ - SwitchViewIcon?: React.ElementType; -} - -// We keep the interface to allow module augmentation -export interface PickersCalendarHeaderComponentsPropsOverrides {} - -type PickersCalendarHeaderOwnerState = PickersCalendarHeaderProps; - -export interface PickersCalendarHeaderSlotsComponentsProps - extends PickersArrowSwitcherSlotsComponentsProps { - switchViewButton?: SlotComponentProps< - typeof IconButton, - PickersCalendarHeaderComponentsPropsOverrides, - PickersCalendarHeaderOwnerState - >; - - switchViewIcon?: SlotComponentProps< - typeof SvgIcon, - PickersCalendarHeaderComponentsPropsOverrides, - undefined - >; -} - -export interface PickersCalendarHeaderProps - extends ExportedPickersArrowSwitcherProps, - MonthValidationOptions { - /** - * Overridable component slots. - * @default {} - */ - slots?: UncapitalizeObjectKeys; - /** - * The props used for each component slot. - * @default {} - */ - slotProps?: PickersCalendarHeaderSlotsComponentsProps; - currentMonth: TDate; - disabled?: boolean; - views: readonly DateView[]; - onMonthChange: (date: TDate, slideDirection: SlideDirection) => void; - view: DateView; - reduceAnimations: boolean; - onViewChange?: (view: DateView) => void; - labelId?: string; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * className applied to the root element. - */ - className?: string; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; -} +import { + PickersCalendarHeaderOwnerState, + PickersCalendarHeaderProps, +} from './PickersCalendarHeader.types'; const useUtilityClasses = (ownerState: PickersCalendarHeaderOwnerState) => { const { classes } = ownerState; @@ -212,6 +132,8 @@ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader = PickersCalendarHeaderProps; + +export interface PickersCalendarHeaderSlotsComponentsProps + extends PickersArrowSwitcherSlotsComponentsProps { + switchViewButton?: SlotComponentProps< + typeof IconButton, + PickersCalendarHeaderComponentsPropsOverrides, + PickersCalendarHeaderOwnerState + >; + + switchViewIcon?: SlotComponentProps< + typeof SvgIcon, + PickersCalendarHeaderComponentsPropsOverrides, + undefined + >; +} + +export interface PickersCalendarHeaderProps + extends ExportedPickersArrowSwitcherProps, + MonthValidationOptions { + /** + * Overridable components. + * @default {} + * @deprecated Please use `slots`. + */ + components?: PickersCalendarHeaderSlotsComponent; + /** + * The props used for each component slot. + * @default {} + * @deprecated Please use `slotProps`. + */ + componentsProps?: PickersCalendarHeaderSlotsComponentsProps; + /** + * Overridable component slots. + * @default {} + */ + slots?: UncapitalizeObjectKeys; + /** + * The props used for each component slot. + * @default {} + */ + slotProps?: PickersCalendarHeaderSlotsComponentsProps; + currentMonth: TDate; + disabled?: boolean; + views: readonly DateView[]; + onMonthChange: (date: TDate, slideDirection: SlideDirection) => void; + view: DateView; + reduceAnimations: boolean; + onViewChange?: (view: DateView) => void; + labelId?: string; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * className applied to the root element. + */ + className?: string; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + +export type ExportedPickersCalendarHeaderProps = Pick< + PickersCalendarHeaderProps, + 'classes' | 'slots' | 'slotProps' +>; diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/index.ts b/packages/x-date-pickers/src/PickersCalendarHeader/index.ts index 60ec6cc838a15..54a863b264a57 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/index.ts +++ b/packages/x-date-pickers/src/PickersCalendarHeader/index.ts @@ -9,4 +9,4 @@ export type { PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, ExportedPickersCalendarHeaderProps, -} from './PickersCalendarHeader'; +} from './PickersCalendarHeader.types'; From 83b9475bd25bb283e8163271c1636a09e08dc35f Mon Sep 17 00:00:00 2001 From: Vu Dao Date: Fri, 3 Nov 2023 11:49:17 +0200 Subject: [PATCH 224/262] [DataGrid] Fix a typo in `gridFilterApi.ts` (#10786) Co-authored-by: Bilal Shafi --- docs/pages/x/api/data-grid/grid-api.md | 2 +- docs/pages/x/api/data-grid/grid-filter-api.json | 2 +- packages/grid/x-data-grid/src/models/api/gridFilterApi.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/pages/x/api/data-grid/grid-api.md b/docs/pages/x/api/data-grid/grid-api.md index 144a36fc7d332..82c74b0cea430 100644 --- a/docs/pages/x/api/data-grid/grid-api.md +++ b/docs/pages/x/api/data-grid/grid-api.md @@ -106,7 +106,7 @@ import { GridApi } from '@mui/x-data-grid'; | setPageSize | (pageSize: number) => void | Sets the number of displayed rows to the value given by `pageSize`. | | setPaginationModel | (model: GridPaginationModel) => void | Sets the `paginationModel` to a new value. | | setPinnedColumns [](/x/introduction/licensing/#pro-plan) | (pinnedColumns: GridPinnedColumns) => void | Changes the pinned columns. | -| setQuickFilterValues | (values: any[]) => void | Set the quick filter values ot the one given by `values` | +| setQuickFilterValues | (values: any[]) => void | Set the quick filter values to the one given by `values` | | setRowChildrenExpansion [](/x/introduction/licensing/#pro-plan) | (id: GridRowId, isExpanded: boolean) => void | Expand or collapse a row children. | | setRowGroupingCriteriaIndex [](/x/introduction/licensing/#premium-plan) | (groupingCriteriaField: string, groupingIndex: number) => void | Sets the grouping index of a grouping criteria. | | setRowGroupingModel [](/x/introduction/licensing/#premium-plan) | (model: GridRowGroupingModel) => void | Sets the columns to use as grouping criteria. | diff --git a/docs/pages/x/api/data-grid/grid-filter-api.json b/docs/pages/x/api/data-grid/grid-filter-api.json index 08c8d1f9593d7..c80e144545f89 100644 --- a/docs/pages/x/api/data-grid/grid-filter-api.json +++ b/docs/pages/x/api/data-grid/grid-filter-api.json @@ -20,7 +20,7 @@ }, { "name": "setQuickFilterValues", - "description": "Set the quick filter values ot the one given by values", + "description": "Set the quick filter values to the one given by values", "type": "(values: any[]) => void" }, { diff --git a/packages/grid/x-data-grid/src/models/api/gridFilterApi.ts b/packages/grid/x-data-grid/src/models/api/gridFilterApi.ts index 4b9967b63eb5e..546c0787bd432 100644 --- a/packages/grid/x-data-grid/src/models/api/gridFilterApi.ts +++ b/packages/grid/x-data-grid/src/models/api/gridFilterApi.ts @@ -52,7 +52,7 @@ export interface GridFilterApi { reason?: GridControlledStateReasonLookup['filter'], ) => void; /** - * Set the quick filter values ot the one given by `values` + * Set the quick filter values to the one given by `values` * @param {any[]} values The list of element to quick filter */ setQuickFilterValues: (values: any[]) => void; From a4b4c5e2a739b172c44633d307b2bcfa7c4b786d Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Fri, 3 Nov 2023 14:00:41 +0100 Subject: [PATCH 225/262] [core] Bump @mui/monorepo (#10721) --- docs/.link-check-errors.txt | 1 - yarn.lock | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt index 8435836baf7ce..7d8878c20dfd0 100644 --- a/docs/.link-check-errors.txt +++ b/docs/.link-check-errors.txt @@ -15,4 +15,3 @@ Broken links found by `yarn docs:link-check` that exist: - https://mui.com/x/api/data-grid/data-grid/#props - https://mui.com/x/api/data-grid/data-grid/#slots - https://mui.com/x/api/date-pickers/date-picker/#slots -- https://mui.com/x/react-data-grid/migration-v4/ diff --git a/yarn.lock b/yarn.lock index 4be301879fb5f..14444f19754f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1859,8 +1859,8 @@ react-transition-group "^4.4.5" "@mui/monorepo@https://github.com/mui/material-ui.git#master": - version "5.14.11" - resolved "https://github.com/mui/material-ui.git#7f9c09fea69759f0f621cbe3eb0f738d51c8201e" + version "5.14.16" + resolved "https://github.com/mui/material-ui.git#6ccbc18f429db9e069ac642378aac16e43fdec91" "@mui/private-theming@^5.14.16": version "5.14.16" From 8b08b8f02b5bffbeead360603877007df6d1a35a Mon Sep 17 00:00:00 2001 From: Lukas Date: Fri, 3 Nov 2023 15:14:22 +0200 Subject: [PATCH 226/262] [docs] Improve custom field input demos readability (#10559) --- .../custom-field/PickerWithBrowserField.js | 191 +---------- .../custom-field/PickerWithBrowserField.tsx | 248 +------------- .../PickerWithBrowserField.tsx.preview | 8 +- .../custom-field/PickerWithJoyField.js | 245 +------------- .../custom-field/PickerWithJoyField.tsx | 304 +----------------- .../PickerWithJoyField.tsx.preview | 12 + .../RangePickerWithBrowserField.js | 131 ++++++++ .../RangePickerWithBrowserField.tsx | 180 +++++++++++ .../RangePickerWithBrowserField.tsx.preview | 1 + .../custom-field/RangePickerWithJoyField.js | 218 +++++++++++++ .../custom-field/RangePickerWithJoyField.tsx | 261 +++++++++++++++ .../RangePickerWithJoyField.tsx.preview | 8 + .../RangePickerWithSingleInputBrowserField.js | 138 ++++++++ ...RangePickerWithSingleInputBrowserField.tsx | 193 +++++++++++ ...kerWithSingleInputBrowserField.tsx.preview | 5 + .../RangePickerWithSingleInputJoyField.js | 187 +++++++++++ .../RangePickerWithSingleInputJoyField.tsx | 236 ++++++++++++++ ...ePickerWithSingleInputJoyField.tsx.preview | 12 + .../date-pickers/custom-field/custom-field.md | 8 + 19 files changed, 1618 insertions(+), 968 deletions(-) create mode 100644 docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview create mode 100644 docs/data/date-pickers/custom-field/RangePickerWithBrowserField.js create mode 100644 docs/data/date-pickers/custom-field/RangePickerWithBrowserField.tsx create mode 100644 docs/data/date-pickers/custom-field/RangePickerWithBrowserField.tsx.preview create mode 100644 docs/data/date-pickers/custom-field/RangePickerWithJoyField.js create mode 100644 docs/data/date-pickers/custom-field/RangePickerWithJoyField.tsx create mode 100644 docs/data/date-pickers/custom-field/RangePickerWithJoyField.tsx.preview create mode 100644 docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.js create mode 100644 docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.tsx create mode 100644 docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.tsx.preview create mode 100644 docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.js create mode 100644 docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.tsx create mode 100644 docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.tsx.preview diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js index bc8e2e00cc5a8..a350cec681811 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js @@ -1,18 +1,9 @@ import * as React from 'react'; import { unstable_useForkRef as useForkRef } from '@mui/utils'; -import { useSlotProps } from '@mui/base/utils'; import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import IconButton from '@mui/material/IconButton'; -import InputAdornment from '@mui/material/InputAdornment'; -import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; -import { DateRangeIcon } from '@mui/x-date-pickers/icons'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; -import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField'; @@ -37,7 +28,7 @@ const BrowserField = React.forwardRef((props, ref) => { return ( @@ -48,166 +39,6 @@ const BrowserField = React.forwardRef((props, ref) => { ); }); -const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => { - const { slots, slotProps, onAdornmentClick, ...other } = props; - - const { inputRef: externalInputRef, ...textFieldProps } = useSlotProps({ - elementType: 'input', - externalSlotProps: slotProps?.textField, - externalForwardedProps: other, - ownerState: props, - }); - - const { - ref: inputRef, - onClear, - clearable, - ...fieldProps - } = useSingleInputDateRangeField({ - props: textFieldProps, - inputRef: externalInputRef, - }); - - /* If you don't need a clear button, you can skip the use of this hook */ - const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = - useClearableField({ - onClear, - clearable, - fieldProps, - InputProps: { - ...fieldProps.InputProps, - endAdornment: ( - - - - - - ), - }, - slots, - slotProps, - }); - - return ( - - ); -}); - -BrowserSingleInputDateRangeField.fieldType = 'single-input'; - -const BrowserSingleInputDateRangePicker = React.forwardRef((props, ref) => { - const [isOpen, setIsOpen] = React.useState(false); - - const toggleOpen = () => setIsOpen((currentOpen) => !currentOpen); - - const handleOpen = () => setIsOpen(true); - - const handleClose = () => setIsOpen(false); - - return ( - - ); -}); - -const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => { - const { - slotProps, - value, - defaultValue, - format, - onChange, - readOnly, - disabled, - onError, - shouldDisableDate, - minDate, - maxDate, - disableFuture, - disablePast, - selectedSections, - onSelectedSectionsChange, - className, - } = props; - - const { inputRef: startInputRef, ...startTextFieldProps } = useSlotProps({ - elementType: 'input', - externalSlotProps: slotProps?.textField, - ownerState: { ...props, position: 'start' }, - }); - - const { inputRef: endInputRef, ...endTextFieldProps } = useSlotProps({ - elementType: 'input', - externalSlotProps: slotProps?.textField, - ownerState: { ...props, position: 'end' }, - }); - - const { - startDate: { ref: startRef, ...startDateProps }, - endDate: { ref: endRef, ...endDateProps }, - } = useMultiInputDateRangeField({ - sharedProps: { - value, - defaultValue, - format, - onChange, - readOnly, - disabled, - onError, - shouldDisableDate, - minDate, - maxDate, - disableFuture, - disablePast, - selectedSections, - onSelectedSectionsChange, - }, - startTextFieldProps, - endTextFieldProps, - startInputRef, - endInputRef, - }); - - return ( - - - — - - - ); -}); - -const BrowserDateRangePicker = React.forwardRef((props, ref) => { - return ( - - ); -}); - const BrowserDateField = React.forwardRef((props, ref) => { const { inputRef: externalInputRef, slots, slotProps, ...textFieldProps } = props; @@ -254,21 +85,11 @@ const BrowserDatePicker = React.forwardRef((props, ref) => { export default function PickerWithBrowserField() { return ( - - - - - + ); } diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx index 415a2cf5b5a62..700beb54cedb6 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx @@ -1,24 +1,9 @@ import * as React from 'react'; import { Dayjs } from 'dayjs'; import { unstable_useForkRef as useForkRef } from '@mui/utils'; -import { useSlotProps } from '@mui/base/utils'; import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import IconButton from '@mui/material/IconButton'; -import InputAdornment from '@mui/material/InputAdornment'; -import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; -import { DateRangeIcon } from '@mui/x-date-pickers/icons'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { - DateRangePicker, - DateRangePickerProps, -} from '@mui/x-date-pickers-pro/DateRangePicker'; -import { - unstable_useSingleInputDateRangeField as useSingleInputDateRangeField, - SingleInputDateRangeFieldProps, -} from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker'; import { unstable_useDateField as useDateField, @@ -30,20 +15,10 @@ import { } from '@mui/x-date-pickers/DateField/DateField.types'; import { useClearableField } from '@mui/x-date-pickers/hooks'; import { - BaseMultiInputFieldProps, - DateRange, - DateRangeValidationError, - UseDateRangeFieldProps, - MultiInputFieldSlotTextFieldProps, BaseSingleInputFieldProps, DateValidationError, - RangeFieldSection, FieldSection, } from '@mui/x-date-pickers-pro'; -import type { - SingleInputDateRangeFieldSlotsComponent, - SingleInputDateRangeFieldSlotsComponentsProps, -} from '@mui/x-date-pickers-pro/SingleInputDateRangeField/SingleInputDateRangeField.types'; interface BrowserFieldProps extends Omit, 'size'> { @@ -84,7 +59,7 @@ const BrowserField = React.forwardRef( return ( @@ -96,207 +71,6 @@ const BrowserField = React.forwardRef( }, ) as BrowserFieldComponent; -interface BrowserSingleInputDateRangeFieldProps - extends SingleInputDateRangeFieldProps< - Dayjs, - Omit, 'size'> - > { - onAdornmentClick?: () => void; -} - -type BrowserSingleInputDateRangeFieldComponent = (( - props: BrowserSingleInputDateRangeFieldProps & React.RefAttributes, -) => React.JSX.Element) & { fieldType?: string }; - -const BrowserSingleInputDateRangeField = React.forwardRef( - (props: BrowserSingleInputDateRangeFieldProps, ref: React.Ref) => { - const { slots, slotProps, onAdornmentClick, ...other } = props; - - const { - inputRef: externalInputRef, - ...textFieldProps - }: SingleInputDateRangeFieldProps = useSlotProps({ - elementType: 'input', - externalSlotProps: slotProps?.textField, - externalForwardedProps: other, - ownerState: props as any, - }); - - const { - ref: inputRef, - onClear, - clearable, - ...fieldProps - } = useSingleInputDateRangeField({ - props: textFieldProps, - inputRef: externalInputRef, - }); - - /* If you don't need a clear button, you can skip the use of this hook */ - const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = - useClearableField< - {}, - typeof textFieldProps.InputProps, - SingleInputDateRangeFieldSlotsComponent, - SingleInputDateRangeFieldSlotsComponentsProps - >({ - onClear, - clearable, - fieldProps, - InputProps: { - ...fieldProps.InputProps, - endAdornment: ( - - - - - - ), - }, - slots, - slotProps, - }); - - return ( - - ); - }, -) as BrowserSingleInputDateRangeFieldComponent; - -BrowserSingleInputDateRangeField.fieldType = 'single-input'; - -const BrowserSingleInputDateRangePicker = React.forwardRef( - (props: DateRangePickerProps, ref: React.Ref) => { - const [isOpen, setIsOpen] = React.useState(false); - - const toggleOpen = () => setIsOpen((currentOpen) => !currentOpen); - - const handleOpen = () => setIsOpen(true); - - const handleClose = () => setIsOpen(false); - - return ( - - ); - }, -); - -interface BrowserMultiInputDateRangeFieldProps - extends UseDateRangeFieldProps, - BaseMultiInputFieldProps< - DateRange, - Dayjs, - RangeFieldSection, - DateRangeValidationError - > {} - -type BrowserMultiInputDateRangeFieldComponent = (( - props: BrowserMultiInputDateRangeFieldProps & React.RefAttributes, -) => React.JSX.Element) & { propTypes?: any }; - -const BrowserMultiInputDateRangeField = React.forwardRef( - (props: BrowserMultiInputDateRangeFieldProps, ref: React.Ref) => { - const { - slotProps, - value, - defaultValue, - format, - onChange, - readOnly, - disabled, - onError, - shouldDisableDate, - minDate, - maxDate, - disableFuture, - disablePast, - selectedSections, - onSelectedSectionsChange, - className, - } = props; - - const { inputRef: startInputRef, ...startTextFieldProps } = useSlotProps({ - elementType: 'input', - externalSlotProps: slotProps?.textField, - ownerState: { ...props, position: 'start' }, - }) as MultiInputFieldSlotTextFieldProps; - - const { inputRef: endInputRef, ...endTextFieldProps } = useSlotProps({ - elementType: 'input', - externalSlotProps: slotProps?.textField, - ownerState: { ...props, position: 'end' }, - }) as MultiInputFieldSlotTextFieldProps; - - const { - startDate: { ref: startRef, ...startDateProps }, - endDate: { ref: endRef, ...endDateProps }, - } = useMultiInputDateRangeField({ - sharedProps: { - value, - defaultValue, - format, - onChange, - readOnly, - disabled, - onError, - shouldDisableDate, - minDate, - maxDate, - disableFuture, - disablePast, - selectedSections, - onSelectedSectionsChange, - }, - startTextFieldProps, - endTextFieldProps, - startInputRef, - endInputRef, - }); - - return ( - - - — - - - ); - }, -) as BrowserMultiInputDateRangeFieldComponent; - -const BrowserDateRangePicker = React.forwardRef( - (props: DateRangePickerProps, ref: React.Ref) => { - return ( - - ); - }, -); - interface BrowserDateFieldProps extends UseDateFieldProps, BaseSingleInputFieldProps< @@ -366,21 +140,11 @@ const BrowserDatePicker = React.forwardRef( export default function PickerWithBrowserField() { return ( - - - - - + ); } diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview index 6a6dd7638dae5..0bb9e399d3cb4 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview @@ -2,10 +2,4 @@ slotProps={{ field: { clearable: true }, }} -/> - - \ No newline at end of file +/> \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.js b/docs/data/date-pickers/custom-field/PickerWithJoyField.js index c753b81155d81..b195500b8b7d3 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.js +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.js @@ -8,24 +8,14 @@ import { import { extendTheme as extendJoyTheme, useColorScheme, - styled, CssVarsProvider, THEME_ID, } from '@mui/joy/styles'; -import { useSlotProps } from '@mui/base/utils'; import Input from '@mui/joy/Input'; -import Stack from '@mui/joy/Stack'; import FormControl from '@mui/joy/FormControl'; import FormLabel from '@mui/joy/FormLabel'; -import Typography from '@mui/joy/Typography'; -import IconButton from '@mui/joy/IconButton'; -import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; -import { DateRangeIcon } from '@mui/x-date-pickers/icons'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; -import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField'; @@ -50,12 +40,7 @@ const JoyField = React.forwardRef((props, ref) => { {label} @@ -84,212 +69,6 @@ const JoyField = React.forwardRef((props, ref) => { ); }); -const JoySingleInputDateRangeField = React.forwardRef((props, ref) => { - const { slots, slotProps, onAdornmentClick, ...other } = props; - - const { inputRef: externalInputRef, ...textFieldProps } = useSlotProps({ - elementType: FormControl, - externalSlotProps: slotProps?.textField, - externalForwardedProps: other, - ownerState: props, - }); - - const { - onClear, - clearable, - ref: inputRef, - ...fieldProps - } = useSingleInputDateRangeField({ - props: textFieldProps, - inputRef: externalInputRef, - }); - - /* If you don't need a clear button, you can skip the use of this hook */ - const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = - useClearableField({ - onClear, - clearable, - fieldProps, - InputProps: fieldProps.InputProps, - slots: { ...slots, clearButton: IconButton }, - slotProps: { ...slotProps, clearIcon: { color: 'action' } }, - }); - - return ( - - - - } - InputProps={{ ...ProcessedInputProps }} - /> - ); -}); - -JoySingleInputDateRangeField.fieldType = 'single-input'; - -const JoySingleInputDateRangePicker = React.forwardRef((props, ref) => { - const [isOpen, setIsOpen] = React.useState(false); - - const toggleOpen = (event) => { - // allows toggle behavior - event.stopPropagation(); - setIsOpen((currentOpen) => !currentOpen); - }; - - const handleOpen = () => setIsOpen(true); - - const handleClose = () => setIsOpen(false); - - return ( - - ); -}); - -const MultiInputJoyDateRangeFieldRoot = styled( - React.forwardRef((props, ref) => ( - - )), - { - name: 'MuiMultiInputDateRangeField', - slot: 'Root', - overridesResolver: (props, styles) => styles.root, - }, -)({}); - -const MultiInputJoyDateRangeFieldSeparator = styled( - (props) => ( - - {/* Ensure that the separator is correctly aligned */} - - {props.children ?? ' — '} - - ), - { - name: 'MuiMultiInputDateRangeField', - slot: 'Separator', - overridesResolver: (props, styles) => styles.separator, - }, -)({ marginTop: '25px' }); - -const JoyMultiInputDateRangeField = React.forwardRef((props, ref) => { - const { - slotProps, - value, - defaultValue, - format, - onChange, - readOnly, - disabled, - onError, - shouldDisableDate, - minDate, - maxDate, - disableFuture, - disablePast, - selectedSections, - onSelectedSectionsChange, - className, - } = props; - - const { inputRef: startInputRef, ...startTextFieldProps } = useSlotProps({ - elementType: FormControl, - externalSlotProps: slotProps?.textField, - ownerState: { ...props, position: 'start' }, - }); - - const { inputRef: endInputRef, ...endTextFieldProps } = useSlotProps({ - elementType: FormControl, - externalSlotProps: slotProps?.textField, - ownerState: { ...props, position: 'end' }, - }); - - const { - startDate: { ref: startRef, ...startDateProps }, - endDate: { ref: endRef, ...endDateProps }, - } = useMultiInputDateRangeField({ - sharedProps: { - value, - defaultValue, - format, - onChange, - readOnly, - disabled, - onError, - shouldDisableDate, - minDate, - maxDate, - disableFuture, - disablePast, - selectedSections, - onSelectedSectionsChange, - }, - startTextFieldProps, - endTextFieldProps, - startInputRef, - endInputRef, - }); - - return ( - - - - - - ); -}); - -const JoyDateRangePicker = React.forwardRef((props, ref) => { - return ( - - ); -}); - const JoyDateField = React.forwardRef((props, ref) => { const { inputRef: externalInputRef, slots, slotProps, ...textFieldProps } = props; @@ -348,7 +127,7 @@ const JoyDatePicker = React.forwardRef((props, ref) => { }); /** - * This component is for syncing the MUI docs's mode with this demo. + * This component is for syncing the theme mode of this demo with the MUI docs mode. * You might not need this component in your project. */ function SyncThemeMode({ mode }) { @@ -368,21 +147,11 @@ export default function PickerWithJoyField() { - - - - - + diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx index 2777e5fea381d..b68b28d688940 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx @@ -8,30 +8,14 @@ import { import { extendTheme as extendJoyTheme, useColorScheme, - styled, CssVarsProvider, THEME_ID, } from '@mui/joy/styles'; -import { useSlotProps } from '@mui/base/utils'; import Input, { InputProps } from '@mui/joy/Input'; -import Stack, { StackProps } from '@mui/joy/Stack'; import FormControl from '@mui/joy/FormControl'; import FormLabel from '@mui/joy/FormLabel'; -import Typography, { TypographyProps } from '@mui/joy/Typography'; -import IconButton from '@mui/joy/IconButton'; -import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; -import { DateRangeIcon } from '@mui/x-date-pickers/icons'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { - DateRangePicker, - DateRangePickerProps, -} from '@mui/x-date-pickers-pro/DateRangePicker'; -import { - unstable_useSingleInputDateRangeField as useSingleInputDateRangeField, - SingleInputDateRangeFieldProps, -} from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker'; import { unstable_useDateField as useDateField, @@ -43,20 +27,10 @@ import { } from '@mui/x-date-pickers/DateField/DateField.types'; import { useClearableField } from '@mui/x-date-pickers/hooks'; import { - BaseMultiInputFieldProps, - DateRange, - DateRangeValidationError, - UseDateRangeFieldProps, - MultiInputFieldSlotTextFieldProps, BaseSingleInputFieldProps, DateValidationError, - RangeFieldSection, FieldSection, -} from '@mui/x-date-pickers-pro'; -import type { - SingleInputDateRangeFieldSlotsComponent, - SingleInputDateRangeFieldSlotsComponentsProps, -} from '@mui/x-date-pickers-pro/SingleInputDateRangeField/SingleInputDateRangeField.types'; +} from '@mui/x-date-pickers/models'; const joyTheme = extendJoyTheme(); @@ -92,12 +66,7 @@ const JoyField = React.forwardRef( {label} @@ -127,253 +96,6 @@ const JoyField = React.forwardRef( }, ) as JoyFieldComponent; -interface JoySingleInputDateRangeFieldProps - extends SingleInputDateRangeFieldProps { - onAdornmentClick?: () => void; -} - -type JoySingleInputDateRangeFieldComponent = (( - props: JoySingleInputDateRangeFieldProps & React.RefAttributes, -) => React.JSX.Element) & { fieldType?: string }; - -const JoySingleInputDateRangeField = React.forwardRef( - (props: JoySingleInputDateRangeFieldProps, ref: React.Ref) => { - const { slots, slotProps, onAdornmentClick, ...other } = props; - - const { - inputRef: externalInputRef, - ...textFieldProps - }: SingleInputDateRangeFieldProps< - Dayjs, - JoyFieldProps & { inputRef: React.Ref } - > = useSlotProps({ - elementType: FormControl, - externalSlotProps: slotProps?.textField, - externalForwardedProps: other, - ownerState: props as any, - }); - - const { - onClear, - clearable, - ref: inputRef, - ...fieldProps - } = useSingleInputDateRangeField({ - props: textFieldProps, - inputRef: externalInputRef, - }); - - /* If you don't need a clear button, you can skip the use of this hook */ - const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = - useClearableField< - {}, - typeof textFieldProps.InputProps, - SingleInputDateRangeFieldSlotsComponent, - SingleInputDateRangeFieldSlotsComponentsProps - >({ - onClear, - clearable, - fieldProps, - InputProps: fieldProps.InputProps, - slots: { ...slots, clearButton: IconButton }, - slotProps: { ...slotProps, clearIcon: { color: 'action' } }, - }); - - return ( - - - - } - InputProps={{ ...ProcessedInputProps }} - /> - ); - }, -) as JoySingleInputDateRangeFieldComponent; - -JoySingleInputDateRangeField.fieldType = 'single-input'; - -const JoySingleInputDateRangePicker = React.forwardRef( - (props: DateRangePickerProps, ref: React.Ref) => { - const [isOpen, setIsOpen] = React.useState(false); - - const toggleOpen = (event: React.PointerEvent) => { - // allows toggle behavior - event.stopPropagation(); - setIsOpen((currentOpen) => !currentOpen); - }; - - const handleOpen = () => setIsOpen(true); - - const handleClose = () => setIsOpen(false); - - return ( - - ); - }, -); - -const MultiInputJoyDateRangeFieldRoot = styled( - React.forwardRef((props: StackProps, ref: React.Ref) => ( - - )), - { - name: 'MuiMultiInputDateRangeField', - slot: 'Root', - overridesResolver: (props, styles) => styles.root, - }, -)({}); - -const MultiInputJoyDateRangeFieldSeparator = styled( - (props: TypographyProps) => ( - - {/* Ensure that the separator is correctly aligned */} - - {props.children ?? ' — '} - - ), - { - name: 'MuiMultiInputDateRangeField', - slot: 'Separator', - overridesResolver: (props, styles) => styles.separator, - }, -)({ marginTop: '25px' }); - -interface JoyMultiInputDateRangeFieldProps - extends UseDateRangeFieldProps, - BaseMultiInputFieldProps< - DateRange, - Dayjs, - RangeFieldSection, - DateRangeValidationError - > {} - -type JoyMultiInputDateRangeFieldComponent = (( - props: JoyMultiInputDateRangeFieldProps & React.RefAttributes, -) => React.JSX.Element) & { propTypes?: any }; - -const JoyMultiInputDateRangeField = React.forwardRef( - (props: JoyMultiInputDateRangeFieldProps, ref: React.Ref) => { - const { - slotProps, - value, - defaultValue, - format, - onChange, - readOnly, - disabled, - onError, - shouldDisableDate, - minDate, - maxDate, - disableFuture, - disablePast, - selectedSections, - onSelectedSectionsChange, - className, - } = props; - - const { inputRef: startInputRef, ...startTextFieldProps } = useSlotProps({ - elementType: FormControl, - externalSlotProps: slotProps?.textField, - ownerState: { ...props, position: 'start' }, - }) as MultiInputFieldSlotTextFieldProps; - - const { inputRef: endInputRef, ...endTextFieldProps } = useSlotProps({ - elementType: FormControl, - externalSlotProps: slotProps?.textField, - ownerState: { ...props, position: 'end' }, - }) as MultiInputFieldSlotTextFieldProps; - - const { - startDate: { ref: startRef, ...startDateProps }, - endDate: { ref: endRef, ...endDateProps }, - } = useMultiInputDateRangeField({ - sharedProps: { - value, - defaultValue, - format, - onChange, - readOnly, - disabled, - onError, - shouldDisableDate, - minDate, - maxDate, - disableFuture, - disablePast, - selectedSections, - onSelectedSectionsChange, - }, - startTextFieldProps, - endTextFieldProps, - startInputRef, - endInputRef, - }); - - return ( - - - - - - ); - }, -) as JoyMultiInputDateRangeFieldComponent; - -const JoyDateRangePicker = React.forwardRef( - (props: DateRangePickerProps, ref: React.Ref) => { - return ( - - ); - }, -); - interface JoyDateFieldProps extends UseDateFieldProps, BaseSingleInputFieldProps< @@ -455,7 +177,7 @@ const JoyDatePicker = React.forwardRef( ); /** - * This component is for syncing the MUI docs's mode with this demo. + * This component is for syncing the theme mode of this demo with the MUI docs mode. * You might not need this component in your project. */ function SyncThemeMode({ mode }: { mode: 'light' | 'dark' }) { @@ -475,21 +197,11 @@ export default function PickerWithJoyField() { - - - - - + diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview new file mode 100644 index 0000000000000..cff735f8a7af0 --- /dev/null +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/RangePickerWithBrowserField.js b/docs/data/date-pickers/custom-field/RangePickerWithBrowserField.js new file mode 100644 index 0000000000000..346191d5faa58 --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangePickerWithBrowserField.js @@ -0,0 +1,131 @@ +import * as React from 'react'; + +import { unstable_useForkRef as useForkRef } from '@mui/utils'; +import { useSlotProps } from '@mui/base/utils'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; + +const BrowserField = React.forwardRef((props, ref) => { + const { + disabled, + id, + label, + inputRef, + InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, + // extracting `error`, 'focused', and `ownerState` as `input` does not support those props + error, + focused, + ownerState, + sx, + ...other + } = props; + + const handleRef = useForkRef(containerRef, ref); + + return ( + + {startAdornment} + + {endAdornment} + + ); +}); + +const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => { + const { + slotProps, + value, + defaultValue, + format, + onChange, + readOnly, + disabled, + onError, + shouldDisableDate, + minDate, + maxDate, + disableFuture, + disablePast, + selectedSections, + onSelectedSectionsChange, + className, + } = props; + + const { inputRef: startInputRef, ...startTextFieldProps } = useSlotProps({ + elementType: 'input', + externalSlotProps: slotProps?.textField, + ownerState: { ...props, position: 'start' }, + }); + + const { inputRef: endInputRef, ...endTextFieldProps } = useSlotProps({ + elementType: 'input', + externalSlotProps: slotProps?.textField, + ownerState: { ...props, position: 'end' }, + }); + + const { + startDate: { ref: startRef, ...startDateProps }, + endDate: { ref: endRef, ...endDateProps }, + } = useMultiInputDateRangeField({ + sharedProps: { + value, + defaultValue, + format, + onChange, + readOnly, + disabled, + onError, + shouldDisableDate, + minDate, + maxDate, + disableFuture, + disablePast, + selectedSections, + onSelectedSectionsChange, + }, + startTextFieldProps, + endTextFieldProps, + startInputRef, + endInputRef, + }); + + return ( + + + — + + + ); +}); + +const BrowserDateRangePicker = React.forwardRef((props, ref) => { + return ( + + ); +}); + +export default function RangePickerWithBrowserField() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/RangePickerWithBrowserField.tsx b/docs/data/date-pickers/custom-field/RangePickerWithBrowserField.tsx new file mode 100644 index 0000000000000..b5cf357624ba2 --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangePickerWithBrowserField.tsx @@ -0,0 +1,180 @@ +import * as React from 'react'; +import { Dayjs } from 'dayjs'; +import { unstable_useForkRef as useForkRef } from '@mui/utils'; +import { useSlotProps } from '@mui/base/utils'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { + DateRangePicker, + DateRangePickerProps, +} from '@mui/x-date-pickers-pro/DateRangePicker'; +import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; +import { + BaseMultiInputFieldProps, + DateRange, + DateRangeValidationError, + UseDateRangeFieldProps, + MultiInputFieldSlotTextFieldProps, + RangeFieldSection, +} from '@mui/x-date-pickers-pro'; + +interface BrowserFieldProps + extends Omit, 'size'> { + label?: React.ReactNode; + inputRef?: React.Ref; + InputProps?: { + ref?: React.Ref; + endAdornment?: React.ReactNode; + startAdornment?: React.ReactNode; + }; + error?: boolean; + focused?: boolean; + ownerState?: any; + sx?: any; +} + +type BrowserFieldComponent = (( + props: BrowserFieldProps & React.RefAttributes, +) => React.JSX.Element) & { propTypes?: any }; + +const BrowserField = React.forwardRef( + (props: BrowserFieldProps, ref: React.Ref) => { + const { + disabled, + id, + label, + inputRef, + InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, + // extracting `error`, 'focused', and `ownerState` as `input` does not support those props + error, + focused, + ownerState, + sx, + ...other + } = props; + + const handleRef = useForkRef(containerRef, ref); + + return ( + + {startAdornment} + + {endAdornment} + + ); + }, +) as BrowserFieldComponent; + +interface BrowserMultiInputDateRangeFieldProps + extends UseDateRangeFieldProps, + BaseMultiInputFieldProps< + DateRange, + Dayjs, + RangeFieldSection, + DateRangeValidationError + > {} + +type BrowserMultiInputDateRangeFieldComponent = (( + props: BrowserMultiInputDateRangeFieldProps & React.RefAttributes, +) => React.JSX.Element) & { propTypes?: any }; + +const BrowserMultiInputDateRangeField = React.forwardRef( + (props: BrowserMultiInputDateRangeFieldProps, ref: React.Ref) => { + const { + slotProps, + value, + defaultValue, + format, + onChange, + readOnly, + disabled, + onError, + shouldDisableDate, + minDate, + maxDate, + disableFuture, + disablePast, + selectedSections, + onSelectedSectionsChange, + className, + } = props; + + const { inputRef: startInputRef, ...startTextFieldProps } = useSlotProps({ + elementType: 'input', + externalSlotProps: slotProps?.textField, + ownerState: { ...props, position: 'start' }, + }) as MultiInputFieldSlotTextFieldProps; + + const { inputRef: endInputRef, ...endTextFieldProps } = useSlotProps({ + elementType: 'input', + externalSlotProps: slotProps?.textField, + ownerState: { ...props, position: 'end' }, + }) as MultiInputFieldSlotTextFieldProps; + + const { + startDate: { ref: startRef, ...startDateProps }, + endDate: { ref: endRef, ...endDateProps }, + } = useMultiInputDateRangeField({ + sharedProps: { + value, + defaultValue, + format, + onChange, + readOnly, + disabled, + onError, + shouldDisableDate, + minDate, + maxDate, + disableFuture, + disablePast, + selectedSections, + onSelectedSectionsChange, + }, + startTextFieldProps, + endTextFieldProps, + startInputRef, + endInputRef, + }); + + return ( + + + — + + + ); + }, +) as BrowserMultiInputDateRangeFieldComponent; + +const BrowserDateRangePicker = React.forwardRef( + (props: DateRangePickerProps, ref: React.Ref) => { + return ( + + ); + }, +); + +export default function RangePickerWithBrowserField() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/RangePickerWithBrowserField.tsx.preview b/docs/data/date-pickers/custom-field/RangePickerWithBrowserField.tsx.preview new file mode 100644 index 0000000000000..d797406fa9997 --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangePickerWithBrowserField.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/RangePickerWithJoyField.js b/docs/data/date-pickers/custom-field/RangePickerWithJoyField.js new file mode 100644 index 0000000000000..26cb65d1b0351 --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangePickerWithJoyField.js @@ -0,0 +1,218 @@ +import * as React from 'react'; + +import { + useTheme as useMaterialTheme, + useColorScheme as useMaterialColorScheme, + Experimental_CssVarsProvider as MaterialCssVarsProvider, +} from '@mui/material/styles'; +import { + extendTheme as extendJoyTheme, + useColorScheme, + styled, + CssVarsProvider, + THEME_ID, +} from '@mui/joy/styles'; +import { useSlotProps } from '@mui/base/utils'; +import Input from '@mui/joy/Input'; +import Stack from '@mui/joy/Stack'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Typography from '@mui/joy/Typography'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; + +const joyTheme = extendJoyTheme(); + +const JoyField = React.forwardRef((props, ref) => { + const { + disabled, + id, + label, + InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, + endDecorator, + startDecorator, + slotProps, + ...other + } = props; + + return ( + + {label} + + {startAdornment} + {startDecorator} +             + } + endDecorator={ + + {endAdornment} + {endDecorator} + + } + slotProps={{ + ...slotProps, + root: { ...slotProps?.root, ref: containerRef }, + }} + {...other} + /> + + ); +}); + +const MultiInputJoyDateRangeFieldRoot = styled( + React.forwardRef((props, ref) => ( + + )), + { + name: 'MuiMultiInputDateRangeField', + slot: 'Root', + overridesResolver: (props, styles) => styles.root, + }, +)({}); + +const MultiInputJoyDateRangeFieldSeparator = styled( + (props) => ( + + {/* Ensure that the separator is correctly aligned */} + + {props.children ?? ' — '} + + ), + { + name: 'MuiMultiInputDateRangeField', + slot: 'Separator', + overridesResolver: (props, styles) => styles.separator, + }, +)({ marginTop: '25px' }); + +const JoyMultiInputDateRangeField = React.forwardRef((props, ref) => { + const { + slotProps, + value, + defaultValue, + format, + onChange, + readOnly, + disabled, + onError, + shouldDisableDate, + minDate, + maxDate, + disableFuture, + disablePast, + selectedSections, + onSelectedSectionsChange, + className, + } = props; + + const { inputRef: startInputRef, ...startTextFieldProps } = useSlotProps({ + elementType: FormControl, + externalSlotProps: slotProps?.textField, + ownerState: { ...props, position: 'start' }, + }); + + const { inputRef: endInputRef, ...endTextFieldProps } = useSlotProps({ + elementType: FormControl, + externalSlotProps: slotProps?.textField, + ownerState: { ...props, position: 'end' }, + }); + + const { + startDate: { ref: startRef, ...startDateProps }, + endDate: { ref: endRef, ...endDateProps }, + } = useMultiInputDateRangeField({ + sharedProps: { + value, + defaultValue, + format, + onChange, + readOnly, + disabled, + onError, + shouldDisableDate, + minDate, + maxDate, + disableFuture, + disablePast, + selectedSections, + onSelectedSectionsChange, + }, + startTextFieldProps, + endTextFieldProps, + startInputRef, + endInputRef, + }); + + return ( + + + + + + ); +}); + +const JoyDateRangePicker = React.forwardRef((props, ref) => { + return ( + + ); +}); + +/** + * This component is for syncing the theme mode of this demo with the MUI docs mode. + * You might not need this component in your project. + */ +function SyncThemeMode({ mode }) { + const { setMode } = useColorScheme(); + const { setMode: setMaterialMode } = useMaterialColorScheme(); + React.useEffect(() => { + setMode(mode); + setMaterialMode(mode); + }, [mode, setMode, setMaterialMode]); + return null; +} + +export default function RangePickerWithJoyField() { + const materialTheme = useMaterialTheme(); + return ( + + + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/RangePickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/RangePickerWithJoyField.tsx new file mode 100644 index 0000000000000..a5506efdaff72 --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangePickerWithJoyField.tsx @@ -0,0 +1,261 @@ +import * as React from 'react'; +import { Dayjs } from 'dayjs'; +import { + useTheme as useMaterialTheme, + useColorScheme as useMaterialColorScheme, + Experimental_CssVarsProvider as MaterialCssVarsProvider, +} from '@mui/material/styles'; +import { + extendTheme as extendJoyTheme, + useColorScheme, + styled, + CssVarsProvider, + THEME_ID, +} from '@mui/joy/styles'; +import { useSlotProps } from '@mui/base/utils'; +import Input, { InputProps } from '@mui/joy/Input'; +import Stack, { StackProps } from '@mui/joy/Stack'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Typography, { TypographyProps } from '@mui/joy/Typography'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { + DateRangePicker, + DateRangePickerProps, +} from '@mui/x-date-pickers-pro/DateRangePicker'; +import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; +import { + BaseMultiInputFieldProps, + DateRange, + DateRangeValidationError, + UseDateRangeFieldProps, + MultiInputFieldSlotTextFieldProps, + RangeFieldSection, +} from '@mui/x-date-pickers-pro'; + +const joyTheme = extendJoyTheme(); + +interface JoyFieldProps extends InputProps { + label?: React.ReactNode; + InputProps?: { + ref?: React.Ref; + endAdornment?: React.ReactNode; + startAdornment?: React.ReactNode; + }; +} + +type JoyFieldComponent = (( + props: JoyFieldProps & React.RefAttributes, +) => React.JSX.Element) & { propTypes?: any }; + +const JoyField = React.forwardRef( + (props: JoyFieldProps, ref: React.Ref) => { + const { + disabled, + id, + label, + InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, + endDecorator, + startDecorator, + slotProps, + ...other + } = props; + + return ( + + {label} + + {startAdornment} + {startDecorator} +             + } + endDecorator={ + + {endAdornment} + {endDecorator} + + } + slotProps={{ + ...slotProps, + root: { ...slotProps?.root, ref: containerRef }, + }} + {...other} + /> + + ); + }, +) as JoyFieldComponent; + +const MultiInputJoyDateRangeFieldRoot = styled( + React.forwardRef((props: StackProps, ref: React.Ref) => ( + + )), + { + name: 'MuiMultiInputDateRangeField', + slot: 'Root', + overridesResolver: (props, styles) => styles.root, + }, +)({}); + +const MultiInputJoyDateRangeFieldSeparator = styled( + (props: TypographyProps) => ( + + {/* Ensure that the separator is correctly aligned */} + + {props.children ?? ' — '} + + ), + { + name: 'MuiMultiInputDateRangeField', + slot: 'Separator', + overridesResolver: (props, styles) => styles.separator, + }, +)({ marginTop: '25px' }); + +interface JoyMultiInputDateRangeFieldProps + extends UseDateRangeFieldProps, + BaseMultiInputFieldProps< + DateRange, + Dayjs, + RangeFieldSection, + DateRangeValidationError + > {} + +type JoyMultiInputDateRangeFieldComponent = (( + props: JoyMultiInputDateRangeFieldProps & React.RefAttributes, +) => React.JSX.Element) & { propTypes?: any }; + +const JoyMultiInputDateRangeField = React.forwardRef( + (props: JoyMultiInputDateRangeFieldProps, ref: React.Ref) => { + const { + slotProps, + value, + defaultValue, + format, + onChange, + readOnly, + disabled, + onError, + shouldDisableDate, + minDate, + maxDate, + disableFuture, + disablePast, + selectedSections, + onSelectedSectionsChange, + className, + } = props; + + const { inputRef: startInputRef, ...startTextFieldProps } = useSlotProps({ + elementType: FormControl, + externalSlotProps: slotProps?.textField, + ownerState: { ...props, position: 'start' }, + }) as MultiInputFieldSlotTextFieldProps; + + const { inputRef: endInputRef, ...endTextFieldProps } = useSlotProps({ + elementType: FormControl, + externalSlotProps: slotProps?.textField, + ownerState: { ...props, position: 'end' }, + }) as MultiInputFieldSlotTextFieldProps; + + const { + startDate: { ref: startRef, ...startDateProps }, + endDate: { ref: endRef, ...endDateProps }, + } = useMultiInputDateRangeField({ + sharedProps: { + value, + defaultValue, + format, + onChange, + readOnly, + disabled, + onError, + shouldDisableDate, + minDate, + maxDate, + disableFuture, + disablePast, + selectedSections, + onSelectedSectionsChange, + }, + startTextFieldProps, + endTextFieldProps, + startInputRef, + endInputRef, + }); + + return ( + + + + + + ); + }, +) as JoyMultiInputDateRangeFieldComponent; + +const JoyDateRangePicker = React.forwardRef( + (props: DateRangePickerProps, ref: React.Ref) => { + return ( + + ); + }, +); + +/** + * This component is for syncing the theme mode of this demo with the MUI docs mode. + * You might not need this component in your project. + */ +function SyncThemeMode({ mode }: { mode: 'light' | 'dark' }) { + const { setMode } = useColorScheme(); + const { setMode: setMaterialMode } = useMaterialColorScheme(); + React.useEffect(() => { + setMode(mode); + setMaterialMode(mode); + }, [mode, setMode, setMaterialMode]); + return null; +} + +export default function RangePickerWithJoyField() { + const materialTheme = useMaterialTheme(); + return ( + + + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/RangePickerWithJoyField.tsx.preview b/docs/data/date-pickers/custom-field/RangePickerWithJoyField.tsx.preview new file mode 100644 index 0000000000000..c1fcecdde3b53 --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangePickerWithJoyField.tsx.preview @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.js b/docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.js new file mode 100644 index 0000000000000..b7971dde7bbb5 --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.js @@ -0,0 +1,138 @@ +import * as React from 'react'; + +import { unstable_useForkRef as useForkRef } from '@mui/utils'; +import { useSlotProps } from '@mui/base/utils'; +import Box from '@mui/material/Box'; +import IconButton from '@mui/material/IconButton'; +import InputAdornment from '@mui/material/InputAdornment'; +import { DateRangeIcon } from '@mui/x-date-pickers/icons'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import { useClearableField } from '@mui/x-date-pickers/hooks'; + +const BrowserField = React.forwardRef((props, ref) => { + const { + disabled, + id, + label, + inputRef, + InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, + // extracting `error`, 'focused', and `ownerState` as `input` does not support those props + error, + focused, + ownerState, + sx, + ...other + } = props; + + const handleRef = useForkRef(containerRef, ref); + + return ( + + {startAdornment} + + {endAdornment} + + ); +}); + +const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => { + const { slots, slotProps, onAdornmentClick, ...other } = props; + + const { inputRef: externalInputRef, ...textFieldProps } = useSlotProps({ + elementType: 'input', + externalSlotProps: slotProps?.textField, + externalForwardedProps: other, + ownerState: props, + }); + + const { + ref: inputRef, + onClear, + clearable, + ...fieldProps + } = useSingleInputDateRangeField({ + props: textFieldProps, + inputRef: externalInputRef, + }); + + /* If you don't need a clear button, you can skip the use of this hook */ + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = + useClearableField({ + onClear, + clearable, + fieldProps, + InputProps: { + ...fieldProps.InputProps, + endAdornment: ( + + + + + + ), + }, + slots, + slotProps, + }); + + return ( + + ); +}); + +BrowserSingleInputDateRangeField.fieldType = 'single-input'; + +const BrowserSingleInputDateRangePicker = React.forwardRef((props, ref) => { + const [isOpen, setIsOpen] = React.useState(false); + + const toggleOpen = () => setIsOpen((currentOpen) => !currentOpen); + + const handleOpen = () => setIsOpen(true); + + const handleClose = () => setIsOpen(false); + + return ( + + ); +}); + +export default function RangePickerWithSingleInputBrowserField() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.tsx b/docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.tsx new file mode 100644 index 0000000000000..68c03dfa4d3f1 --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.tsx @@ -0,0 +1,193 @@ +import * as React from 'react'; +import { Dayjs } from 'dayjs'; +import { unstable_useForkRef as useForkRef } from '@mui/utils'; +import { useSlotProps } from '@mui/base/utils'; +import Box from '@mui/material/Box'; +import IconButton from '@mui/material/IconButton'; +import InputAdornment from '@mui/material/InputAdornment'; +import { DateRangeIcon } from '@mui/x-date-pickers/icons'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { + DateRangePicker, + DateRangePickerProps, +} from '@mui/x-date-pickers-pro/DateRangePicker'; +import { + unstable_useSingleInputDateRangeField as useSingleInputDateRangeField, + SingleInputDateRangeFieldProps, +} from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import { useClearableField } from '@mui/x-date-pickers/hooks'; +import type { + SingleInputDateRangeFieldSlotsComponent, + SingleInputDateRangeFieldSlotsComponentsProps, +} from '@mui/x-date-pickers-pro/SingleInputDateRangeField/SingleInputDateRangeField.types'; + +interface BrowserFieldProps + extends Omit, 'size'> { + label?: React.ReactNode; + inputRef?: React.Ref; + InputProps?: { + ref?: React.Ref; + endAdornment?: React.ReactNode; + startAdornment?: React.ReactNode; + }; + error?: boolean; + focused?: boolean; + ownerState?: any; + sx?: any; +} + +type BrowserFieldComponent = (( + props: BrowserFieldProps & React.RefAttributes, +) => React.JSX.Element) & { propTypes?: any }; + +const BrowserField = React.forwardRef( + (props: BrowserFieldProps, ref: React.Ref) => { + const { + disabled, + id, + label, + inputRef, + InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, + // extracting `error`, 'focused', and `ownerState` as `input` does not support those props + error, + focused, + ownerState, + sx, + ...other + } = props; + + const handleRef = useForkRef(containerRef, ref); + + return ( + + {startAdornment} + + {endAdornment} + + ); + }, +) as BrowserFieldComponent; + +interface BrowserSingleInputDateRangeFieldProps + extends SingleInputDateRangeFieldProps< + Dayjs, + Omit, 'size'> + > { + onAdornmentClick?: () => void; +} + +type BrowserSingleInputDateRangeFieldComponent = (( + props: BrowserSingleInputDateRangeFieldProps & React.RefAttributes, +) => React.JSX.Element) & { fieldType?: string }; + +const BrowserSingleInputDateRangeField = React.forwardRef( + (props: BrowserSingleInputDateRangeFieldProps, ref: React.Ref) => { + const { slots, slotProps, onAdornmentClick, ...other } = props; + + const { + inputRef: externalInputRef, + ...textFieldProps + }: SingleInputDateRangeFieldProps = useSlotProps({ + elementType: 'input', + externalSlotProps: slotProps?.textField, + externalForwardedProps: other, + ownerState: props as any, + }); + + const { + ref: inputRef, + onClear, + clearable, + ...fieldProps + } = useSingleInputDateRangeField({ + props: textFieldProps, + inputRef: externalInputRef, + }); + + /* If you don't need a clear button, you can skip the use of this hook */ + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = + useClearableField< + {}, + typeof textFieldProps.InputProps, + SingleInputDateRangeFieldSlotsComponent, + SingleInputDateRangeFieldSlotsComponentsProps + >({ + onClear, + clearable, + fieldProps, + InputProps: { + ...fieldProps.InputProps, + endAdornment: ( + + + + + + ), + }, + slots, + slotProps, + }); + + return ( + + ); + }, +) as BrowserSingleInputDateRangeFieldComponent; + +BrowserSingleInputDateRangeField.fieldType = 'single-input'; + +const BrowserSingleInputDateRangePicker = React.forwardRef( + (props: DateRangePickerProps, ref: React.Ref) => { + const [isOpen, setIsOpen] = React.useState(false); + + const toggleOpen = () => setIsOpen((currentOpen) => !currentOpen); + + const handleOpen = () => setIsOpen(true); + + const handleClose = () => setIsOpen(false); + + return ( + + ); + }, +); + +export default function RangePickerWithSingleInputBrowserField() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.tsx.preview b/docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.tsx.preview new file mode 100644 index 0000000000000..bcaf8043948fb --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.tsx.preview @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.js b/docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.js new file mode 100644 index 0000000000000..02299b65247ec --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.js @@ -0,0 +1,187 @@ +import * as React from 'react'; + +import { + useTheme as useMaterialTheme, + useColorScheme as useMaterialColorScheme, + Experimental_CssVarsProvider as MaterialCssVarsProvider, +} from '@mui/material/styles'; +import { + extendTheme as extendJoyTheme, + useColorScheme, + CssVarsProvider, + THEME_ID, +} from '@mui/joy/styles'; +import { useSlotProps } from '@mui/base/utils'; +import Input from '@mui/joy/Input'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import IconButton from '@mui/joy/IconButton'; +import { DateRangeIcon } from '@mui/x-date-pickers/icons'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import { useClearableField } from '@mui/x-date-pickers/hooks'; + +const joyTheme = extendJoyTheme(); + +const JoyField = React.forwardRef((props, ref) => { + const { + disabled, + id, + label, + InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, + endDecorator, + startDecorator, + slotProps, + ...other + } = props; + + return ( + + {label} + + {startAdornment} + {startDecorator} + + } + endDecorator={ + + {endAdornment} + {endDecorator} + + } + slotProps={{ + ...slotProps, + root: { ...slotProps?.root, ref: containerRef }, + }} + {...other} + /> + + ); +}); + +const JoySingleInputDateRangeField = React.forwardRef((props, ref) => { + const { slots, slotProps, onAdornmentClick, ...other } = props; + + const { inputRef: externalInputRef, ...textFieldProps } = useSlotProps({ + elementType: FormControl, + externalSlotProps: slotProps?.textField, + externalForwardedProps: other, + ownerState: props, + }); + + const { + onClear, + clearable, + ref: inputRef, + ...fieldProps + } = useSingleInputDateRangeField({ + props: textFieldProps, + inputRef: externalInputRef, + }); + + /* If you don't need a clear button, you can skip the use of this hook */ + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = + useClearableField({ + onClear, + clearable, + fieldProps, + InputProps: fieldProps.InputProps, + slots: { ...slots, clearButton: IconButton }, + slotProps: { ...slotProps, clearIcon: { color: 'action' } }, + }); + + return ( + + + + } + InputProps={{ ...ProcessedInputProps }} + /> + ); +}); + +JoySingleInputDateRangeField.fieldType = 'single-input'; + +const JoySingleInputDateRangePicker = React.forwardRef((props, ref) => { + const [isOpen, setIsOpen] = React.useState(false); + + const toggleOpen = (event) => { + // allows toggle behavior + event.stopPropagation(); + setIsOpen((currentOpen) => !currentOpen); + }; + + const handleOpen = () => setIsOpen(true); + + const handleClose = () => setIsOpen(false); + + return ( + + ); +}); + +/** + * This component is for syncing the theme mode of this demo with the MUI docs mode. + * You might not need this component in your project. + */ +function SyncThemeMode({ mode }) { + const { setMode } = useColorScheme(); + const { setMode: setMaterialMode } = useMaterialColorScheme(); + React.useEffect(() => { + setMode(mode); + setMaterialMode(mode); + }, [mode, setMode, setMaterialMode]); + return null; +} + +export default function RangePickerWithSingleInputJoyField() { + const materialTheme = useMaterialTheme(); + return ( + + + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.tsx b/docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.tsx new file mode 100644 index 0000000000000..8f7f9554f589f --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.tsx @@ -0,0 +1,236 @@ +import * as React from 'react'; +import { Dayjs } from 'dayjs'; +import { + useTheme as useMaterialTheme, + useColorScheme as useMaterialColorScheme, + Experimental_CssVarsProvider as MaterialCssVarsProvider, +} from '@mui/material/styles'; +import { + extendTheme as extendJoyTheme, + useColorScheme, + CssVarsProvider, + THEME_ID, +} from '@mui/joy/styles'; +import { useSlotProps } from '@mui/base/utils'; +import Input, { InputProps } from '@mui/joy/Input'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import IconButton from '@mui/joy/IconButton'; +import { DateRangeIcon } from '@mui/x-date-pickers/icons'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { + DateRangePicker, + DateRangePickerProps, +} from '@mui/x-date-pickers-pro/DateRangePicker'; +import { + unstable_useSingleInputDateRangeField as useSingleInputDateRangeField, + SingleInputDateRangeFieldProps, +} from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import { useClearableField } from '@mui/x-date-pickers/hooks'; +import type { + SingleInputDateRangeFieldSlotsComponent, + SingleInputDateRangeFieldSlotsComponentsProps, +} from '@mui/x-date-pickers-pro/SingleInputDateRangeField/SingleInputDateRangeField.types'; + +const joyTheme = extendJoyTheme(); + +interface JoyFieldProps extends InputProps { + label?: React.ReactNode; + InputProps?: { + ref?: React.Ref; + endAdornment?: React.ReactNode; + startAdornment?: React.ReactNode; + }; +} + +type JoyFieldComponent = (( + props: JoyFieldProps & React.RefAttributes, +) => React.JSX.Element) & { propTypes?: any }; + +const JoyField = React.forwardRef( + (props: JoyFieldProps, ref: React.Ref) => { + const { + disabled, + id, + label, + InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, + endDecorator, + startDecorator, + slotProps, + ...other + } = props; + + return ( + + {label} + + {startAdornment} + {startDecorator} + + } + endDecorator={ + + {endAdornment} + {endDecorator} + + } + slotProps={{ + ...slotProps, + root: { ...slotProps?.root, ref: containerRef }, + }} + {...other} + /> + + ); + }, +) as JoyFieldComponent; + +interface JoySingleInputDateRangeFieldProps + extends SingleInputDateRangeFieldProps { + onAdornmentClick?: () => void; +} + +type JoySingleInputDateRangeFieldComponent = (( + props: JoySingleInputDateRangeFieldProps & React.RefAttributes, +) => React.JSX.Element) & { fieldType?: string }; + +const JoySingleInputDateRangeField = React.forwardRef( + (props: JoySingleInputDateRangeFieldProps, ref: React.Ref) => { + const { slots, slotProps, onAdornmentClick, ...other } = props; + + const { + inputRef: externalInputRef, + ...textFieldProps + }: SingleInputDateRangeFieldProps< + Dayjs, + JoyFieldProps & { inputRef: React.Ref } + > = useSlotProps({ + elementType: FormControl, + externalSlotProps: slotProps?.textField, + externalForwardedProps: other, + ownerState: props as any, + }); + + const { + onClear, + clearable, + ref: inputRef, + ...fieldProps + } = useSingleInputDateRangeField({ + props: textFieldProps, + inputRef: externalInputRef, + }); + + /* If you don't need a clear button, you can skip the use of this hook */ + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = + useClearableField< + {}, + typeof textFieldProps.InputProps, + SingleInputDateRangeFieldSlotsComponent, + SingleInputDateRangeFieldSlotsComponentsProps + >({ + onClear, + clearable, + fieldProps, + InputProps: fieldProps.InputProps, + slots: { ...slots, clearButton: IconButton }, + slotProps: { ...slotProps, clearIcon: { color: 'action' } }, + }); + + return ( + + + + } + InputProps={{ ...ProcessedInputProps }} + /> + ); + }, +) as JoySingleInputDateRangeFieldComponent; + +JoySingleInputDateRangeField.fieldType = 'single-input'; + +const JoySingleInputDateRangePicker = React.forwardRef( + (props: DateRangePickerProps, ref: React.Ref) => { + const [isOpen, setIsOpen] = React.useState(false); + + const toggleOpen = (event: React.PointerEvent) => { + // allows toggle behavior + event.stopPropagation(); + setIsOpen((currentOpen) => !currentOpen); + }; + + const handleOpen = () => setIsOpen(true); + + const handleClose = () => setIsOpen(false); + + return ( + + ); + }, +); + +/** + * This component is for syncing the theme mode of this demo with the MUI docs mode. + * You might not need this component in your project. + */ +function SyncThemeMode({ mode }: { mode: 'light' | 'dark' }) { + const { setMode } = useColorScheme(); + const { setMode: setMaterialMode } = useMaterialColorScheme(); + React.useEffect(() => { + setMode(mode); + setMaterialMode(mode); + }, [mode, setMode, setMaterialMode]); + return null; +} + +export default function RangePickerWithSingleInputJoyField() { + const materialTheme = useMaterialTheme(); + return ( + + + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.tsx.preview b/docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.tsx.preview new file mode 100644 index 0000000000000..90b0c5ff3c08f --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.tsx.preview @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md index 75582f09ea41c..8dfa870b53ddb 100644 --- a/docs/data/date-pickers/custom-field/custom-field.md +++ b/docs/data/date-pickers/custom-field/custom-field.md @@ -69,12 +69,20 @@ A higher-level solution for _Joy UI_ will be provided in the near future for eve {{"demo": "PickerWithJoyField.js", "defaultCodeOpen": false}} +{{"demo": "RangePickerWithSingleInputJoyField.js", "defaultCodeOpen": false}} + +{{"demo": "RangePickerWithJoyField.js", "defaultCodeOpen": false}} + #### With the browser input You can also use any other input: {{"demo": "PickerWithBrowserField.js", "defaultCodeOpen": false}} +{{"demo": "RangePickerWithSingleInputBrowserField.js", "defaultCodeOpen": false}} + +{{"demo": "RangePickerWithBrowserField.js", "defaultCodeOpen": false}} + :::warning You will need to use a component that supports the `sx` prop as a wrapper for your input, in order to be able to benefit from the **hover** and **focus** behavior of the clear button. You will have access to the `clearable` and `onClear` props using native HTML elements, but the on **focus** and **hover** behavior depends on styles applied via the `sx` prop. ::: From 6eeebada3577405947d58c7955d68a16de81d663 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Fri, 3 Nov 2023 14:39:26 +0100 Subject: [PATCH 227/262] [docs] Add demo about how to use charts margin (#10886) --- docs/data/charts/styling/MarginNoSnap.js | 58 ++++++++++++++++++++++++ docs/data/charts/styling/styling.md | 10 ++-- 2 files changed, 64 insertions(+), 4 deletions(-) create mode 100644 docs/data/charts/styling/MarginNoSnap.js diff --git a/docs/data/charts/styling/MarginNoSnap.js b/docs/data/charts/styling/MarginNoSnap.js new file mode 100644 index 0000000000000..edd531d9b5d5c --- /dev/null +++ b/docs/data/charts/styling/MarginNoSnap.js @@ -0,0 +1,58 @@ +import * as React from 'react'; +import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo'; +import { BarChart } from '@mui/x-charts/BarChart'; +import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants'; + +const data = ['left', 'right', 'top', 'bottom'].map((propName) => ({ + propName, + knob: 'number', + defaultValue: 80, + step: 1, + min: 0, + max: 200, +})); +export default function MarginNoSnap() { + return ( + ( + + )} + getCode={({ props }) => { + return [ + `import { BarChart } from '@mui/x-charts/BarChart';`, + '', + `', + ].join('\n'); + }} + /> + ); +} diff --git a/docs/data/charts/styling/styling.md b/docs/data/charts/styling/styling.md index 5aad402e5af5e..585be102da600 100644 --- a/docs/data/charts/styling/styling.md +++ b/docs/data/charts/styling/styling.md @@ -52,16 +52,18 @@ Those will fix the chart's size to the given value (in px). ### Placement -At the core of charts layout is the drawing area which corresponds to the space available to represent data. +At the core of chart layout is the drawing area which corresponds to the space available to represent data. -This space can be fined with the `margin` prop and its properties `top`, `bottom`, `left`, and `right`. +This space can be defined with the `margin` prop and its properties `top`, `bottom`, `left`, and `right`. Those values define the space between the SVG border and the drawing area. -You might want to modify those values to let more space for your axis ticks or reduce them to provide more space for the data. +You might want to modify those values to leave more space for your axis ticks or reduce them to provide more space for the data. + +{{"demo": "MarginNoSnap.js"}} ### CSS Since the library relies on SVG for rendering, you can customize them as you do with other MUI components with CSS overriding. Chart components accept the `sx` props. -And you can target any sub elements with its class name. +From here, you can target any subcomponents with its class name. From 7c69a03a85034b39852962be9c6bd46933aee474 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Fri, 3 Nov 2023 14:58:57 +0100 Subject: [PATCH 228/262] v6.18.0 (#10883) Co-authored-by: Lukas Co-authored-by: Bilal Shafi Co-authored-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> --- CHANGELOG.md | 61 +++++++++++++++++++ package.json | 2 +- .../grid/x-data-grid-generator/package.json | 4 +- .../grid/x-data-grid-premium/package.json | 6 +- packages/grid/x-data-grid-pro/package.json | 4 +- packages/grid/x-data-grid/package.json | 2 +- packages/x-charts/package.json | 2 +- packages/x-date-pickers-pro/package.json | 4 +- packages/x-date-pickers/package.json | 2 +- scripts/releaseChangelog.mjs | 4 +- 10 files changed, 76 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d9a72c22268cb..37c30862ecaa2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,67 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 6.18.0 + +_Nov 3, 2023_ + +We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨: + +- 🎁 The Charts package is now officially stable! +- 🥧 Pie charts are now animated. +- 📈 Line charts now support partial data, and can interpolate missing data. + +line charts with partial data + +- ✨ Allow to ignore [diacritics](https://en.wikipedia.org/wiki/Diacritic) when filtering +- 📚 Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@6.18.0` + +- [DataGrid] Allow to ignore [diacritics](https://en.wikipedia.org/wiki/Diacritic) when filtering (#10569) @cherniavskii +- [DataGrid] Fix a typo in `gridFilterApi` (#10786) @vu-dao-93 +- [DataGrid] Fix `undefined` row id (#10670) @romgrk +- [DataGrid] Make column autosizing work with dynamic row height (#10693) @cherniavskii +- [l10n] Allow to customize sorting label per column (#10839) @JerryWu1234 + +#### `@mui/x-data-grid-pro@6.18.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-data-grid@6.18.0`. + +#### `@mui/x-data-grid-premium@6.18.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan') + +Same changes as in `@mui/x-data-grid-pro@6.18.0`. + +### Date Pickers + +#### `@mui/x-date-pickers@6.18.0` + +- [pickers] Add reference links to calendar components (#10644) @michelengelen + +#### `@mui/x-date-pickers-pro@6.18.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-date-pickers@6.18.0`. + +### Charts / `@mui/x-charts@6.18.0` + +- [charts] Add animation on pie chart (#10782) @alexfauquette +- [charts] Add reference links to shared/misc chart components (#10660) @michelengelen +- [charts] Allows to connect nulls (#10803) @alexfauquette +- [charts] Fix axis highlight in dark mode (#10820) @LukasTy + +### Docs + +- [docs] Add a data grid recipe for autosizing columns after fetching row-data (#10822) @michelengelen +- [docs] Add a data grid recipe showing how to remove cell outline on `focus` (#10843) @michelengelen +- [docs] Add demo about how to use charts margin (#10886) @alexfauquette +- [docs] Improve custom field input demos readability (#10559) @LukasTy + +### Core + +- [core] Generate `slot` API descriptions based on `slots` or `components` (#10879) @LukasTy + ## 6.17.0 _Oct 27, 2023_ diff --git a/package.json b/package.json index ca046297a3f2d..9181bdd075dff 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "6.17.0", + "version": "6.18.0", "private": true, "scripts": { "start": "yarn && yarn docs:dev", diff --git a/packages/grid/x-data-grid-generator/package.json b/packages/grid/x-data-grid-generator/package.json index 256ec51ac941b..3d2635b260fa8 100644 --- a/packages/grid/x-data-grid-generator/package.json +++ b/packages/grid/x-data-grid-generator/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-generator", - "version": "6.17.0", + "version": "6.18.0", "description": "Generate fake data for demo purposes only.", "author": "MUI Team", "main": "src/index.ts", @@ -32,7 +32,7 @@ "dependencies": { "@babel/runtime": "^7.23.2", "@mui/base": "^5.0.0-beta.22", - "@mui/x-data-grid-premium": "6.17.0", + "@mui/x-data-grid-premium": "6.18.0", "chance": "^1.1.11", "clsx": "^2.0.0", "lru-cache": "^7.18.3" diff --git a/packages/grid/x-data-grid-premium/package.json b/packages/grid/x-data-grid-premium/package.json index 1588ea544a307..33ed5bb10dd07 100644 --- a/packages/grid/x-data-grid-premium/package.json +++ b/packages/grid/x-data-grid-premium/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-premium", - "version": "6.17.0", + "version": "6.18.0", "description": "The Premium plan edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,8 +44,8 @@ "dependencies": { "@babel/runtime": "^7.23.2", "@mui/utils": "^5.14.16", - "@mui/x-data-grid": "6.17.0", - "@mui/x-data-grid-pro": "6.17.0", + "@mui/x-data-grid": "6.18.0", + "@mui/x-data-grid-pro": "6.18.0", "@mui/x-license-pro": "6.10.2", "@types/format-util": "^1.0.3", "clsx": "^2.0.0", diff --git a/packages/grid/x-data-grid-pro/package.json b/packages/grid/x-data-grid-pro/package.json index 098e4c06e05b2..abedce9de2c20 100644 --- a/packages/grid/x-data-grid-pro/package.json +++ b/packages/grid/x-data-grid-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-pro", - "version": "6.17.0", + "version": "6.18.0", "description": "The Pro plan edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,7 +44,7 @@ "dependencies": { "@babel/runtime": "^7.23.2", "@mui/utils": "^5.14.16", - "@mui/x-data-grid": "6.17.0", + "@mui/x-data-grid": "6.18.0", "@mui/x-license-pro": "6.10.2", "@types/format-util": "^1.0.3", "clsx": "^2.0.0", diff --git a/packages/grid/x-data-grid/package.json b/packages/grid/x-data-grid/package.json index 5a77787cbf8cf..c319be66aca0d 100644 --- a/packages/grid/x-data-grid/package.json +++ b/packages/grid/x-data-grid/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid", - "version": "6.17.0", + "version": "6.18.0", "description": "The community edition of the data grid component (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index f564d617e9395..43bfbf829840f 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-charts", - "version": "6.0.0-alpha.17", + "version": "6.18.0", "description": "The community edition of the charts components (MUI X).", "author": "MUI Team", "main": "./src/index.js", diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index 170836599d766..539731747572b 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers-pro", - "version": "6.17.0", + "version": "6.18.0", "description": "The commercial edition of the date picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", @@ -44,7 +44,7 @@ "@babel/runtime": "^7.23.2", "@mui/base": "^5.0.0-beta.22", "@mui/utils": "^5.14.16", - "@mui/x-date-pickers": "6.17.0", + "@mui/x-date-pickers": "6.18.0", "@mui/x-license-pro": "6.10.2", "clsx": "^2.0.0", "prop-types": "^15.8.1", diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 247ba8b430656..aeb2ce0fe8da3 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers", - "version": "6.17.0", + "version": "6.18.0", "description": "The community edition of the date picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/scripts/releaseChangelog.mjs b/scripts/releaseChangelog.mjs index 5648ebc8b648c..990239b4e19e3 100644 --- a/scripts/releaseChangelog.mjs +++ b/scripts/releaseChangelog.mjs @@ -259,11 +259,11 @@ Same changes as in \`@mui/x-date-pickers@__VERSION__\`${ } ${logChangelogSection(pickersProCommits)} -### Charts / \`@mui/x-charts@__CHARTS_VERSION__\` +### Charts / \`@mui/x-charts@__VERSION__\` ${logChangelogSection(chartsCommits)} -### Tree View / \`@mui/x-tree-view@__TREE_VIEW_VERSION__\` +### Tree View / \`@mui/x-tree-view@__VERSION__\` ${logChangelogSection(treeViewCommits)} ${logChangelogSection(codemodCommits, `### \`@mui/x-codemod@__VERSION__\``)} From 6c749a8b73435b387d2f5d7c92563271e0f07745 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Fri, 3 Nov 2023 15:49:15 +0100 Subject: [PATCH 229/262] [docs] Fix charts docs as stable (#10888) --- docs/data/charts/overview/overview.md | 4 ---- docs/data/pages.ts | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/docs/data/charts/overview/overview.md b/docs/data/charts/overview/overview.md index b4a85c857b241..2436a60783535 100644 --- a/docs/data/charts/overview/overview.md +++ b/docs/data/charts/overview/overview.md @@ -8,10 +8,6 @@ packageName: '@mui/x-charts'

            A fast and extendable library of react chart components for data visualization.

            -:::warning -This library is in the alpha phase. This means it might receive some breaking changes if they are needed to improve the components. -::: - {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} ## Overview diff --git a/docs/data/pages.ts b/docs/data/pages.ts index e38cdc9b7d4e9..e7243b2f94308 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -352,7 +352,7 @@ const pages: MuiPage[] = [ }, { pathname: '/x/react-charts-group', - title: 'Charts 🧪', + title: 'Charts', newFeature: true, children: [ { pathname: '/x/react-charts', title: 'Overview' }, From a9ec0fc8d8dc308a391214616a5f70d07a9e0439 Mon Sep 17 00:00:00 2001 From: Lukas Date: Mon, 6 Nov 2023 14:49:36 +0200 Subject: [PATCH 230/262] [pickers] Always use up-to-date `defaultView` (#10889) --- .../tests/DesktopDatePicker.test.tsx | 25 ++++++++++++++++++- .../src/internals/hooks/useViews.tsx | 3 ++- 2 files changed, 26 insertions(+), 2 deletions(-) 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 65c4e340d9b3c..2d9b14768ef7c 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx @@ -16,7 +16,7 @@ import { const isJSDOM = /jsdom/.test(window.navigator.userAgent); describe('', () => { - const { render } = createPickerRenderer({ clock: 'fake' }); + const { render, clock } = createPickerRenderer({ clock: 'fake' }); it('allows to change selected date from the field according to `format`', () => { const handleChange = spy(); @@ -100,6 +100,29 @@ describe('', () => { expect(handleViewChange.lastCall.firstArg).to.equal('month'); }); + it('should go to the relevant `view` when `views` prop changes', () => { + const { setProps } = render( + , + ); + + openPicker({ type: 'date', variant: 'desktop' }); + + expect(screen.getByRole('radio', { checked: true, name: '2018' })).to.not.equal(null); + + // Dismiss the picker + userEvent.keyPress(document.activeElement!, { key: 'Escape' }); + setProps({ views: ['month', 'year'] }); + openPicker({ type: 'date', variant: 'desktop' }); + // wait for all pending changes to be flushed + clock.runToLast(); + + // should have changed the open view + expect(screen.getByRole('radio', { checked: true, name: 'January' })).to.not.equal(null); + }); + it('should move the focus to the newly opened views', function test() { if (isJSDOM) { this.skip(); diff --git a/packages/x-date-pickers/src/internals/hooks/useViews.tsx b/packages/x-date-pickers/src/internals/hooks/useViews.tsx index 1555a56a7e965..6292375a348de 100644 --- a/packages/x-date-pickers/src/internals/hooks/useViews.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useViews.tsx @@ -214,7 +214,8 @@ export function useViews({ setFocusedView: handleFocusedViewChange, nextView, previousView, - defaultView: defaultView.current, + // Always return up to date default view instead of the initial one (i.e. defaultView.current) + defaultView: views.includes(openTo!) ? openTo! : views[0], goToNextView, setValueAndGoToNextView, setValueAndGoToView, From ba66436932d035e1b06b60fe67ea16311de8082c Mon Sep 17 00:00:00 2001 From: Nora <72460825+noraleonte@users.noreply.github.com> Date: Mon, 6 Nov 2023 15:27:23 +0200 Subject: [PATCH 231/262] [fields] fix multi input date time field section selection (#10915) --- .../useMultiInputDateTimeRangeField.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts index 148ffed7e97d6..54bedc812e8fa 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts @@ -82,6 +82,8 @@ export const useMultiInputDateTimeRangeField = Date: Mon, 6 Nov 2023 14:33:07 +0100 Subject: [PATCH 232/262] [DataGrid] Fix cell value type in quick filtering v7 (#10884) --- docs/pages/x/api/data-grid/grid-api.md | 1 + .../pages/x/api/data-grid/grid-filter-api.json | 5 +++++ .../clipboard/useGridClipboardImport.ts | 3 ++- .../src/colDef/gridStringOperators.ts | 7 ++++++- .../hooks/features/filter/gridFilterUtils.ts | 18 +++++++++++------- .../hooks/features/filter/useGridFilter.tsx | 2 ++ .../grid/x-data-grid/src/internals/index.ts | 1 + .../src/models/api/gridFilterApi.ts | 5 +++++ .../x-data-grid/src/utils/getPublicApiRef.ts | 9 +++++++++ 9 files changed, 42 insertions(+), 9 deletions(-) create mode 100644 packages/grid/x-data-grid/src/utils/getPublicApiRef.ts diff --git a/docs/pages/x/api/data-grid/grid-api.md b/docs/pages/x/api/data-grid/grid-api.md index 82c74b0cea430..255aa9b096bfc 100644 --- a/docs/pages/x/api/data-grid/grid-api.md +++ b/docs/pages/x/api/data-grid/grid-api.md @@ -74,6 +74,7 @@ import { GridApi } from '@mui/x-data-grid'; | hideFilterPanel | () => void | Hides the filter panel. | | hideHeaderFilterMenu | () => void | Hides the header filter menu. | | hidePreferences | () => void | Hides the preferences panel. | +| ignoreDiacritics | DataGridProcessedProps['ignoreDiacritics'] | Returns the value of the `ignoreDiacritics` prop. | | isCellEditable | (params: GridCellParams) => boolean | Controls if a cell is editable. | | isColumnPinned [](/x/introduction/licensing/#pro-plan) | (field: string) => GridPinnedPosition \| false | Returns which side a column is pinned to. | | isRowSelectable | (id: GridRowId) => boolean | Determines if a row can be selected or not. | diff --git a/docs/pages/x/api/data-grid/grid-filter-api.json b/docs/pages/x/api/data-grid/grid-filter-api.json index c80e144545f89..626ae4fcb29ec 100644 --- a/docs/pages/x/api/data-grid/grid-filter-api.json +++ b/docs/pages/x/api/data-grid/grid-filter-api.json @@ -8,6 +8,11 @@ "type": "(item: GridFilterItem) => void" }, { "name": "hideFilterPanel", "description": "Hides the filter panel.", "type": "() => void" }, + { + "name": "ignoreDiacritics", + "description": "Returns the value of the ignoreDiacritics prop.", + "type": "DataGridProcessedProps['ignoreDiacritics']" + }, { "name": "setFilterLogicOperator", "description": "Changes the GridLogicOperator used to connect the filters.", diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts b/packages/grid/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts index c4dc4ac80dfdf..2c36a29fc294b 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts +++ b/packages/grid/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts @@ -19,6 +19,7 @@ import { getActiveElement, GridPipeProcessor, useGridRegisterPipeProcessor, + getPublicApiRef, } from '@mui/x-data-grid/internals'; import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_REORDER_COL_DEF } from '@mui/x-data-grid-pro'; import { unstable_debounce as debounce } from '@mui/utils'; @@ -379,7 +380,7 @@ export const useGridClipboardImport = ( defaultPasteResolver({ pastedData, - apiRef: { current: apiRef.current.getPublicApi() }, + apiRef: getPublicApiRef(apiRef), updateCell: (...args) => { cellUpdater.updateCell(...args); }, diff --git a/packages/grid/x-data-grid/src/colDef/gridStringOperators.ts b/packages/grid/x-data-grid/src/colDef/gridStringOperators.ts index aa875f803a13e..dca999638aa87 100644 --- a/packages/grid/x-data-grid/src/colDef/gridStringOperators.ts +++ b/packages/grid/x-data-grid/src/colDef/gridStringOperators.ts @@ -5,6 +5,7 @@ import { GridFilterItem } from '../models/gridFilterItem'; import { GridFilterOperator } from '../models/gridFilterOperator'; import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue'; import { convertLegacyOperators, tagInternalFilter } from './utils'; +import { removeDiacritics } from '../hooks/features/filter/gridFilterUtils'; export const getGridStringQuickFilterFn = tagInternalFilter( (value: any): GridApplyQuickFilterV7 | null => { @@ -12,7 +13,11 @@ export const getGridStringQuickFilterFn = tagInternalFilter( return null; } const filterRegex = new RegExp(escapeRegExp(value), 'i'); - return (columnValue): boolean => { + return (_, row, column, apiRef): boolean => { + let columnValue = apiRef.current.getRowFormattedValue(row, column); + if (apiRef.current.ignoreDiacritics) { + columnValue = removeDiacritics(columnValue); + } return columnValue != null ? filterRegex.test(columnValue.toString()) : false; }; }, diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts b/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts index a4418aa3626d6..e719d42760de2 100644 --- a/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts +++ b/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts @@ -18,6 +18,7 @@ import { GridQuickFilterValueResult, } from './gridFilterState'; import { buildWarning } from '../../../utils/warning'; +import { getPublicApiRef } from '../../../utils/getPublicApiRef'; import { gridColumnFieldsSelector, gridColumnLookupSelector, @@ -152,7 +153,7 @@ export const mergeStateWithFilterModel = filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef), }); -const removeDiacritics = (value: unknown) => { +export const removeDiacritics = (value: unknown) => { if (typeof value === 'string') { return value.normalize('NFD').replace(/[\u0300-\u036f]/g, ''); } @@ -207,6 +208,8 @@ const getFilterCallbackFromItem = ( const hasUserFunctionLegacy = !isInternalFilter(filterOperator.getApplyFilterFn); const hasUserFunctionV7 = !isInternalFilter(filterOperator.getApplyFilterFnV7); + const publicApiRef = getPublicApiRef(apiRef); + if (filterOperator.getApplyFilterFnV7 && !(hasUserFunctionLegacy && !hasUserFunctionV7)) { const applyFilterOnRow = filterOperator.getApplyFilterFnV7(newFilterItem, column)!; if (typeof applyFilterOnRow !== 'function') { @@ -220,7 +223,7 @@ const getFilterCallbackFromItem = ( if (ignoreDiacritics) { value = removeDiacritics(value); } - return applyFilterOnRow(value, row, column, apiRef); + return applyFilterOnRow(value, row, column, publicApiRef); }, }; } @@ -235,7 +238,7 @@ const getFilterCallbackFromItem = ( item: newFilterItem, fn: (rowId: GridRowId) => { const params = apiRef.current.getCellParams(rowId, newFilterItem.field!); - GLOBAL_API_REF.current = apiRef; + GLOBAL_API_REF.current = publicApiRef; if (ignoreDiacritics) { params.value = removeDiacritics(params.value); } @@ -355,6 +358,7 @@ const buildAggregatedQuickFilterApplier = ( }[]; const { ignoreDiacritics } = apiRef.current.rootProps; + const publicApiRef = getPublicApiRef(apiRef); columnFields.forEach((field) => { const column = apiRef.current.getColumn(field); @@ -371,7 +375,7 @@ const buildAggregatedQuickFilterApplier = ( const value = ignoreDiacritics ? removeDiacritics(quickFilterValue) : quickFilterValue; return { v7: true, - fn: getApplyQuickFilterFnV7(value, column, apiRef), + fn: getApplyQuickFilterFnV7(value, column, publicApiRef), }; }), }); @@ -382,7 +386,7 @@ const buildAggregatedQuickFilterApplier = ( const value = ignoreDiacritics ? removeDiacritics(quickFilterValue) : quickFilterValue; return { v7: false, - fn: getApplyQuickFilterFn(value, column, apiRef), + fn: getApplyQuickFilterFn(value, column, publicApiRef), }; }), }); @@ -406,7 +410,7 @@ const buildAggregatedQuickFilterApplier = ( } const applier = appliers[v]; - let value = apiRef.current.getRowFormattedValue(row, column); + let value = apiRef.current.getRowValue(row, column); if (applier.fn === null) { continue; @@ -416,7 +420,7 @@ const buildAggregatedQuickFilterApplier = ( if (ignoreDiacritics) { value = removeDiacritics(value); } - const isMatching = applier.fn(value, row, column, apiRef); + const isMatching = applier.fn(value, row, column, publicApiRef); if (isMatching) { result[filterValue] = true; continue outer; diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx b/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx index 6e70483397e03..166e52a5ced0d 100644 --- a/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx @@ -90,6 +90,7 @@ export const useGridFilter = ( | 'slotProps' | 'disableColumnFilter' | 'disableEval' + | 'ignoreDiacritics' >, ): void => { const logger = useGridLogger(apiRef, 'useGridFilter'); @@ -329,6 +330,7 @@ export const useGridFilter = ( showFilterPanel, hideFilterPanel, setQuickFilterValues, + ignoreDiacritics: props.ignoreDiacritics, }; useGridApiMethod(apiRef, filterApi, 'public'); diff --git a/packages/grid/x-data-grid/src/internals/index.ts b/packages/grid/x-data-grid/src/internals/index.ts index 282be9d713862..8b5cd1a8c102f 100644 --- a/packages/grid/x-data-grid/src/internals/index.ts +++ b/packages/grid/x-data-grid/src/internals/index.ts @@ -141,6 +141,7 @@ export { isNavigationKey } from '../utils/keyboardUtils'; export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils'; export { buildWarning } from '../utils/warning'; export { exportAs } from '../utils/exportAs'; +export * from '../utils/getPublicApiRef'; export type { GridPrivateOnlyApiCommon } from '../models/api/gridApiCommon'; export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext'; export * from '../hooks/utils/useOnMount'; diff --git a/packages/grid/x-data-grid/src/models/api/gridFilterApi.ts b/packages/grid/x-data-grid/src/models/api/gridFilterApi.ts index 546c0787bd432..16f3b6194f991 100644 --- a/packages/grid/x-data-grid/src/models/api/gridFilterApi.ts +++ b/packages/grid/x-data-grid/src/models/api/gridFilterApi.ts @@ -1,6 +1,7 @@ import { GridFilterModel } from '../gridFilterModel'; import { GridFilterItem, GridLogicOperator } from '../gridFilterItem'; import { GridControlledStateReasonLookup } from '../events'; +import { DataGridProcessedProps } from '../props/DataGridProps'; /** * The filter API interface that is available in the grid [[apiRef]]. @@ -56,4 +57,8 @@ export interface GridFilterApi { * @param {any[]} values The list of element to quick filter */ setQuickFilterValues: (values: any[]) => void; + /** + * Returns the value of the `ignoreDiacritics` prop. + */ + ignoreDiacritics: DataGridProcessedProps['ignoreDiacritics']; } diff --git a/packages/grid/x-data-grid/src/utils/getPublicApiRef.ts b/packages/grid/x-data-grid/src/utils/getPublicApiRef.ts new file mode 100644 index 0000000000000..0f1a980ad93ba --- /dev/null +++ b/packages/grid/x-data-grid/src/utils/getPublicApiRef.ts @@ -0,0 +1,9 @@ +import type { GridPrivateApiCommunity } from '../models/api/gridApiCommunity'; + +export function getPublicApiRef( + apiRef: React.MutableRefObject, +) { + return { current: apiRef.current.getPublicApi() } as React.MutableRefObject< + ReturnType + >; +} From 947619da1c74dcffc15f79ae79c00a92a21f0fd1 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Mon, 6 Nov 2023 15:59:02 +0100 Subject: [PATCH 233/262] [core] Changed prettier branch value to next (#10917) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9181bdd075dff..2ed5b4650529b 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0", "markdownlint": "markdownlint-cli2 \"**/*.md\"", "postinstall": "patch-package", - "prettier": "pretty-quick --branch master --ignore-path .eslintignore", + "prettier": "pretty-quick --branch next --ignore-path .eslintignore", "prettier:all": "prettier --write . --ignore-path .eslintignore", "proptypes": "cross-env BABEL_ENV=development babel-node -i \"/node_modules/(?!@mui)/\" -x .ts,.tsx,.js ./docs/scripts/generateProptypes.ts", "size:snapshot": "node --max-old-space-size=2048 ./scripts/sizeSnapshot/create", From 42dd75da6ecfc1d840d27b910543a620a59fbf3c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 7 Nov 2023 11:53:59 +0100 Subject: [PATCH 234/262] [license] Correctly throw errors (#10924) --- .../useLicenseVerifier.test.tsx | 54 +++++++++++++++++-- .../useLicenseVerifier/useLicenseVerifier.ts | 2 +- 2 files changed, 52 insertions(+), 4 deletions(-) diff --git a/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx b/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx index 3b7c24e4534b0..67d3846d4e39a 100644 --- a/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx +++ b/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.test.tsx @@ -10,17 +10,37 @@ import { import { sharedLicenseStatuses } from './useLicenseVerifier'; import { generateReleaseInfo } from '../verifyLicense'; +const oneDayInMS = 1000 * 60 * 60 * 24; const releaseDate = new Date(3000, 0, 0, 0, 0, 0, 0); -const releaseInfo = generateReleaseInfo(releaseDate); +const RELEASE_INFO = generateReleaseInfo(releaseDate); function TestComponent() { - const licesenStatus = useLicenseVerifier('x-date-pickers-pro', releaseInfo); + const licesenStatus = useLicenseVerifier('x-date-pickers-pro', RELEASE_INFO); return
            Status: {licesenStatus.status}
            ; } -describe('useLicenseVerifier', () => { +describe('useLicenseVerifier', function test() { + // Can't change the process.env.NODE_ENV in Karma + if (!/jsdom/.test(window.navigator.userAgent)) { + return; + } + const { render } = createRenderer(); + let env: any; + beforeEach(() => { + env = process.env.NODE_ENV; + // Avoid Karma "Invalid left-hand side in assignment" SyntaxError + // eslint-disable-next-line no-useless-concat + process.env['NODE_' + 'ENV'] = 'test'; + }); + + afterEach(() => { + // Avoid Karma "Invalid left-hand side in assignment" SyntaxError + // eslint-disable-next-line no-useless-concat + process.env['NODE_' + 'ENV'] = env; + }); + describe('error', () => { beforeEach(() => { Object.keys(sharedLicenseStatuses).forEach((key) => { @@ -56,5 +76,33 @@ describe('useLicenseVerifier', () => { expect(screen.getByTestId('status')).to.have.text('Status: Valid'); }); + + it('should throw if the license is expired by more than a 30 days', () => { + // Avoid Karma "Invalid left-hand side in assignment" SyntaxError + // eslint-disable-next-line no-useless-concat + process.env['NODE_' + 'ENV'] = 'development'; + + const expiredLicenseKey = generateLicense({ + expiryDate: new Date(new Date().getTime() - oneDayInMS * 30), + orderNumber: 'MUI-123', + scope: 'pro', + licensingModel: 'subscription', + }); + LicenseInfo.setLicenseKey(expiredLicenseKey); + + let actualErrorMsg; + expect(() => { + try { + render(); + } catch (error: any) { + actualErrorMsg = error.message; + } + }).to.toErrorDev([ + 'MUI: Expired license key', + 'MUI: Expired license key', + 'The above error occurred in the component', + ]); + expect(actualErrorMsg).to.match(/MUI: Expired license key/); + }); }); }); diff --git a/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.ts b/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.ts index 9cdcf4717e697..45cb84f4d6127 100644 --- a/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.ts +++ b/packages/x-license-pro/src/useLicenseVerifier/useLicenseVerifier.ts @@ -56,7 +56,6 @@ export function useLicenseVerifier( acceptedScopes, }); - sharedLicenseStatuses[packageName] = { key: licenseKey, licenseVerifier: licenseStatus }; const fullPackageName = `@mui/${packageName}`; if (licenseStatus.status === LICENSE_STATUS.Valid) { @@ -77,6 +76,7 @@ export function useLicenseVerifier( throw new Error('missing status handler'); } + sharedLicenseStatuses[packageName] = { key: licenseKey, licenseVerifier: licenseStatus }; return licenseStatus; }, [packageName, releaseInfo, contextKey]); } From 2a55ca6f8a7396f9937fdfcab93cfdc86ba942e5 Mon Sep 17 00:00:00 2001 From: Nora <72460825+noraleonte@users.noreply.github.com> Date: Tue, 7 Nov 2023 13:04:06 +0200 Subject: [PATCH 235/262] [fields] Fix `MultiInputTimeRangeField` section selection (#10922) --- .../useMultiInputRangeField/useMultiInputTimeRangeField.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts index cab1dae97d7e9..37e409f12fed4 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts @@ -72,6 +72,8 @@ export const useMultiInputTimeRangeField = Date: Tue, 7 Nov 2023 12:30:13 +0100 Subject: [PATCH 236/262] [DataGrid] Print selected rows by default (#10846) --- .../export/PrintExportSelectedRows.js | 39 ----- .../export/PrintExportSelectedRows.tsx | 43 ------ .../PrintExportSelectedRows.tsx.preview | 9 -- docs/data/data-grid/export/export.md | 9 -- .../migration-data-grid-v6.md | 135 ++++++++++++++++++ docs/data/pages.ts | 7 + .../x/migration/migration-data-grid-v6.js | 7 + .../features/export/useGridPrintExport.tsx | 30 ++-- 8 files changed, 161 insertions(+), 118 deletions(-) delete mode 100644 docs/data/data-grid/export/PrintExportSelectedRows.js delete mode 100644 docs/data/data-grid/export/PrintExportSelectedRows.tsx delete mode 100644 docs/data/data-grid/export/PrintExportSelectedRows.tsx.preview create mode 100644 docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md create mode 100644 docs/pages/x/migration/migration-data-grid-v6.js diff --git a/docs/data/data-grid/export/PrintExportSelectedRows.js b/docs/data/data-grid/export/PrintExportSelectedRows.js deleted file mode 100644 index 2b50951c8158c..0000000000000 --- a/docs/data/data-grid/export/PrintExportSelectedRows.js +++ /dev/null @@ -1,39 +0,0 @@ -import * as React from 'react'; -import { useDemoData } from '@mui/x-data-grid-generator'; -import { - DataGrid, - GridToolbar, - gridFilteredSortedRowIdsSelector, - selectedGridRowsSelector, -} from '@mui/x-data-grid'; - -const getSelectedRowsToExport = ({ apiRef }) => { - const selectedRowIds = selectedGridRowsSelector(apiRef); - if (selectedRowIds.size > 0) { - return Array.from(selectedRowIds.keys()); - } - - return gridFilteredSortedRowIdsSelector(apiRef); -}; - -export default function PrintExportSelectedRows() { - const { data, loading } = useDemoData({ - dataSet: 'Commodity', - rowLength: 10, - maxColumns: 6, - }); - - return ( -
            - -
            - ); -} diff --git a/docs/data/data-grid/export/PrintExportSelectedRows.tsx b/docs/data/data-grid/export/PrintExportSelectedRows.tsx deleted file mode 100644 index 5a0ca2049f126..0000000000000 --- a/docs/data/data-grid/export/PrintExportSelectedRows.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react'; -import { useDemoData } from '@mui/x-data-grid-generator'; -import { - DataGrid, - GridToolbar, - GridPrintGetRowsToExportParams, - gridFilteredSortedRowIdsSelector, - selectedGridRowsSelector, - GridRowId, -} from '@mui/x-data-grid'; - -const getSelectedRowsToExport = ({ - apiRef, -}: GridPrintGetRowsToExportParams): GridRowId[] => { - const selectedRowIds = selectedGridRowsSelector(apiRef); - if (selectedRowIds.size > 0) { - return Array.from(selectedRowIds.keys()); - } - - return gridFilteredSortedRowIdsSelector(apiRef); -}; - -export default function PrintExportSelectedRows() { - const { data, loading } = useDemoData({ - dataSet: 'Commodity', - rowLength: 10, - maxColumns: 6, - }); - - return ( -
            - -
            - ); -} diff --git a/docs/data/data-grid/export/PrintExportSelectedRows.tsx.preview b/docs/data/data-grid/export/PrintExportSelectedRows.tsx.preview deleted file mode 100644 index 11e312d983798..0000000000000 --- a/docs/data/data-grid/export/PrintExportSelectedRows.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/data-grid/export/export.md b/docs/data/data-grid/export/export.md index 65dee9725b4a8..9c3b94fed0724 100644 --- a/docs/data/data-grid/export/export.md +++ b/docs/data/data-grid/export/export.md @@ -88,15 +88,6 @@ There are a few ways to include or hide other columns. ## Exported rows -### Print export - -The print export always prints all rows regardless of whether or not some rows are selected. -To export only selected rows via print you can use the `getRowsToExport` function. - -{{"demo": "PrintExportSelectedRows.js", "bg": "inline", "defaultCodeOpen": false}} - -### CSV and Excel export - By default, the data grid exports the selected rows if there are any. If not, it exports all rows except the footers (filtered and sorted rows, according to active rules), including the collapsed ones. 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 new file mode 100644 index 0000000000000..89a64998b4111 --- /dev/null +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -0,0 +1,135 @@ +--- +productId: x-data-grid +--- + +# Migration from v6 to v7 + + + +

            This guide describes the changes needed to migrate the Data Grid from v6 to v7.

            + + + +## Start using the new release + +In `package.json`, change the version of the data grid package to `next`. + +```diff +-"@mui/x-data-grid": "^6.0.0", ++"@mui/x-data-grid": "next", +``` + +Since v7 is a major release, it contains changes that affect the public API. +These changes were done for consistency, improved stability and to make room for new features. +Described below are the steps needed to migrate from v6 to v7. + + + +## Breaking changes + +Since v7 is a major release, it contains some changes that affect the public API. +These changes were done for consistency, improve stability and make room for new features. +Below are described the steps you need to make to migrate from v6 to v7. + + + + + + + + + + + + + + + +### Print export + +- The print export will now only print the selected rows if there are any. + If there are no selected rows, it will print all rows. This makes the print export consistent with the other exports. + You can [customize the rows to export by using the `getRowsToExport` function](/x/react-data-grid/export/#customizing-the-rows-to-export). + + + + + + + + + + + + diff --git a/docs/data/pages.ts b/docs/data/pages.ts index e7243b2f94308..317c912791c4c 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -431,6 +431,13 @@ const pages: MuiPage[] = [ pathname: '/x/migration-group', title: 'Migration', children: [ + { + pathname: '/x/migration-v7', + subheader: 'Upgrade to v7', + children: [ + { pathname: '/x/migration/migration-data-grid-v6', title: 'Breaking changes: Data Grid' }, + ], + }, { pathname: '/x/migration-v6', subheader: 'Upgrade to v6', diff --git a/docs/pages/x/migration/migration-data-grid-v6.js b/docs/pages/x/migration/migration-data-grid-v6.js new file mode 100644 index 0000000000000..8ce5141b987e5 --- /dev/null +++ b/docs/pages/x/migration/migration-data-grid-v6.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/migration/migration-data-grid-v6/migration-data-grid-v6.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx index b143d906338b3..04e1bdcf8ac94 100644 --- a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { unstable_ownerDocument as ownerDocument } from '@mui/utils'; -import { GridApiCommunity, GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; +import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; import { GridPrintExportApi } from '../../../models/api/gridPrintExportApi'; import { useGridLogger } from '../../utils/useGridLogger'; import { gridExpandedRowCountSelector } from '../filter/gridFilterSelector'; import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; -import { GridPrintExportOptions, GridPrintGetRowsToExportParams } from '../../../models/gridExport'; -import { GridRowId, GridValidRowModel } from '../../../models/gridRows'; +import { GridPrintExportOptions } from '../../../models/gridExport'; +import { GridValidRowModel } from '../../../models/gridRows'; import { GridInitialStateCommunity } from '../../../models/gridStateCommunity'; import { gridColumnDefinitionsSelector, @@ -15,7 +15,7 @@ import { import { gridClasses } from '../../../constants/gridClasses'; import { useGridApiMethod } from '../../utils/useGridApiMethod'; import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector'; -import { getColumnsToExport } from './utils'; +import { defaultGetRowsToExport, getColumnsToExport } from './utils'; import { mergeStateWithPaginationModel } from '../pagination/useGridPagination'; import { GridPipeProcessor, useGridRegisterPipeProcessor } from '../../core/pipeProcessing'; import { @@ -104,9 +104,7 @@ export const useGridPrintExport = ( ); const updateGridRowsForPrint = React.useCallback( - ( - getRowsToExport: (params: GridPrintGetRowsToExportParams) => GridRowId[], - ) => { + (getRowsToExport: NonNullable) => { const rowsToExportIds = getRowsToExport({ apiRef }); const newRows = rowsToExportIds.map((id) => apiRef.current.getRow(id)); apiRef.current.setRows(newRows); @@ -178,14 +176,12 @@ export const useGridPrintExport = ( // the footer is always being placed at the bottom of the page as if all rows are exported // so if getRowsToExport is being used to only export a subset of rows then we need to // adjust the footer position to be correctly placed at the bottom of the grid - if (options?.getRowsToExport) { - const gridFooterElement: HTMLElement | null = gridClone.querySelector( - `.${gridClasses.footerContainer}`, - ); - gridFooterElement!.style.position = 'absolute'; - gridFooterElement!.style.width = '100%'; - gridFooterElement!.style.top = `${computedTotalHeight - gridFooterElementHeight}px`; - } + const gridFooterElement: HTMLElement | null = gridClone.querySelector( + `.${gridClasses.footerContainer}`, + ); + gridFooterElement!.style.position = 'absolute'; + gridFooterElement!.style.width = '100%'; + gridFooterElement!.style.top = `${computedTotalHeight - gridFooterElementHeight}px`; // printDoc.body.appendChild(gridClone); should be enough but a clone isolation bug in Safari // prevents us to do it @@ -325,9 +321,7 @@ export const useGridPrintExport = ( options?.includeCheckboxes, ); - if (options?.getRowsToExport) { - updateGridRowsForPrint(options.getRowsToExport); - } + updateGridRowsForPrint(options?.getRowsToExport ?? defaultGetRowsToExport); apiRef.current.unstable_setVirtualization(false); await raf(); // wait for the state changes to take action From 289ed7af8a2e448d9d30ab23214fdd58b822553d Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Tue, 7 Nov 2023 13:00:06 +0100 Subject: [PATCH 237/262] [core] Merge `master` into `next` (#10929) Co-authored-by: Bilal Shafi --- .../data-grid/server-side-data/aggregation.md | 15 + docs/data/data-grid/server-side-data/index.md | 291 ++++++++++++++++++ .../server-side-data/infinite-loading.md | 15 + .../server-side-data/lazy-loading.md | 15 + .../server-side-data/row-grouping.md | 15 + .../data-grid/server-side-data/tree-data.md | 15 + docs/data/pages.ts | 33 ++ .../server-side-data/aggregation.js | 7 + .../react-data-grid/server-side-data/index.js | 7 + .../server-side-data/infinite-loading.js | 7 + .../server-side-data/lazy-loading.js | 7 + .../server-side-data/row-grouping.js | 7 + .../server-side-data/tree-data.js | 7 + .../x-data-grid-pro/src/models/dataSource.ts | 72 +++++ 14 files changed, 513 insertions(+) create mode 100644 docs/data/data-grid/server-side-data/aggregation.md create mode 100644 docs/data/data-grid/server-side-data/index.md create mode 100644 docs/data/data-grid/server-side-data/infinite-loading.md create mode 100644 docs/data/data-grid/server-side-data/lazy-loading.md create mode 100644 docs/data/data-grid/server-side-data/row-grouping.md create mode 100644 docs/data/data-grid/server-side-data/tree-data.md create mode 100644 docs/pages/x/react-data-grid/server-side-data/aggregation.js create mode 100644 docs/pages/x/react-data-grid/server-side-data/index.js create mode 100644 docs/pages/x/react-data-grid/server-side-data/infinite-loading.js create mode 100644 docs/pages/x/react-data-grid/server-side-data/lazy-loading.js create mode 100644 docs/pages/x/react-data-grid/server-side-data/row-grouping.js create mode 100644 docs/pages/x/react-data-grid/server-side-data/tree-data.js create mode 100644 packages/grid/x-data-grid-pro/src/models/dataSource.ts diff --git a/docs/data/data-grid/server-side-data/aggregation.md b/docs/data/data-grid/server-side-data/aggregation.md new file mode 100644 index 0000000000000..3836a25e9ed5a --- /dev/null +++ b/docs/data/data-grid/server-side-data/aggregation.md @@ -0,0 +1,15 @@ +--- +title: React Server-side row grouping +--- + +# Data Grid - Server-side aggregation 🚧 + +

            Aggregation with server side data source.

            + +:::warning +This feature isn't implemented yet. It's coming. + +👍 Upvote [issue #10860](https://github.com/mui/mui-x/issues/10860) if you want to see it land faster. + +Don't hesitate to leave a comment on the same issue to influence what gets built. Especially if you already have a use case for this component, or if you are facing a pain point with your current solution. +::: diff --git a/docs/data/data-grid/server-side-data/index.md b/docs/data/data-grid/server-side-data/index.md new file mode 100644 index 0000000000000..f235a05581833 --- /dev/null +++ b/docs/data/data-grid/server-side-data/index.md @@ -0,0 +1,291 @@ +--- +title: React Data Grid - Server-side data +--- + +# Data Grid - Server-side data + +

            The data grid server-side data

            + +## Overview + +Managing server-side data efficiently in a React application can become complex as the dataset grows. + +Without a dedicated module that abstracts its complexities, developers often face challenges related to manual data fetching, pagination, sorting, and filtering, and it often gets trickier to tackle performance issues, which can lead to a poor user experience. + +Have a look at an example: + +### Example scenario + +Imagine having a data grid that displays a list of users. The data grid has pagination enabled and the user can sort the data by clicking on the column headers and also apply filters. + +The data grid is configured to fetch data from the server whenever the user changes the page or updates filtering or sorting. + +```tsx +const [rows, setRows] = React.useState([]); +const [paginationModel, setPaginationModel] = React.useState({ + page: 0, + pageSize: 10, +}); +const [filterModel, setFilterModel] = React.useState({ + items: [], +}); +const [sortModel, setSortModel] = React.useState([]); + +React.useEffect(() => { + const fetcher = async () => { + // fetch data from server + const data = await fetch('https://my-api.com/data', { + method: 'GET', + body: JSON.stringify({ + page: paginationModel.page, + pageSize: paginationModel.pageSize, + sortModel, + filterModel, + }), + }); + setRows(data.rows); + }; + fetcher(); +}, [paginationModel, sortModel, filterModel]); + +; +``` + +This example only scratches the surface with a lot of problems still unsolved like: + +- Performance optimization +- Caching data/deduping requests +- More complex use-cases on the server like grouping, tree data, etc. +- Server side row editing +- Lazy loading of data +- Handling updates to the data like row editing, row deletion, etc. +- Refetching data on-demand + +Trying to solve these problems one after the other can make the code complex and hard to maintain. + +## Data source + +A very common pattern to solve these problems is to use a centralized data source. A data source is an abstraction layer that sits between the data grid and the server. It provides a simple interface to the data grid to fetch data and update it. It handles a lot of the complexities related to server-side data fetching. Let's delve a bit deeper into how it will look like. + +:::warning + +This feature is still under development and the information shared on this page is subject to change. Feel free to subscribe or comment on the official GitHub [issue](https://github.com/mui/mui-x/issues/8179). + +::: + +### Overview + +The Data Grid already supports manual server-side data fetching for features like sorting, filtering, etc. In order to make it more powerful and simple to use, the grid will support a data source interface that you can implement with your existing data fetching logic. + +The datasource will work with all the major data grid features which require server-side data fetching such as sorting, filtering, pagination, grouping, etc. + +### Usage + +The data grid server-side data source has an initial set of required methods that you need to implement. The data grid will call these methods internally when the data is required for a specific page. + +```tsx +interface DataSource { + /** + Fetcher Functions: + - `getRows` is required + - `updateRow` is optional + + `getRows` will be used by the grid to fetch data for the current page or children for the current parent group + It may return a `rowCount` to update the total count of rows in the grid + */ + getRows(params: GetRowsParams): Promise; + updateRow?(updatedRow: GridRowModel): Promise; +} +``` + +Here's how the code will look like for the above example when implemented with data source: + +```tsx +const customDataSource: DataSource = { + getRows: async (params: GetRowsParams): GetRowsResponse => { + // fetch data from server + const response = await fetch('https://my-api.com/data', { + method: 'GET', + body: JSON.stringify(params), + }); + const data = await response.json(); + // return the data and the total number of rows + return { + rows: data.rows, + rowCount: data.totalCount, + }; + }, +} + + +``` + +Not only the code has been reduced significantly, it has removed the hassle of managing controlled states and data fetching logic too. + +On top of that, the data source will also handle a lot of other aspects like caching and deduping of requests. + +#### Loading data + +The method `dataSource.getRows` will be called with the `GetRowsParams` object whenever some data from the server is needed. This object contains all the information that you need to fetch the data from the server. + +Since previously, the data grid did not support internal data fetching, the `rows` prop was the way to pass the data to the grid. However, with server-side data, the `rows` prop is no longer needed. Instead, the data grid will call the `getRows` method whenever it needs to fetch data. + +Here's the `GetRowsParams` object for reference: + +```tsx +interface GetRowsParams { + sortModel: GridSortModel; + filterModel: GridFilterModel; + /** + * Alternate to `start` and `end`, maps to `GridPaginationModel` interface + */ + paginationModel: GridPaginationModel; + /** + * First row index to fetch (number) or cursor information (number | string) + */ + start: number | string; // first row index to fetch or cursor information + /** + * Last row index to fetch + */ + end: number; // last row index to fetch + /** + * Array of keys returned by `getGroupKey` of all the parent rows until the row for which the data is requested + * `getGroupKey` prop must be implemented to use this + * Useful for `treeData` and `rowGrouping` only + */ + groupKeys: string[]; + /** + * List of grouped columns (only applicable with `rowGrouping`) + */ + groupFields: GridColDef['field'][]; // list of grouped columns (`rowGrouping`) +} +``` + +And here's the `GetRowsResponse` object for reference: + +```tsx +interface GetRowsResponse { + /** + * Subset of the rows as per the passed `GetRowsParams` + */ + rows: GridRowModel[]; + /** + * To reflect updates in total `rowCount` (optional) + * Useful when the `rowCount` is inaccurate (e.g. when filtering) or not available upfront + */ + rowCount?: number; + /** + * Additional `pageInfo` to help the grid determine if there are more rows to fetch (corner-cases) + * `hasNextPage`: When row count is unknown/inaccurate, if `truncated` is set or rowCount is not known, data will keep loading until `hasNextPage` is `false` + * `truncated`: To reflect `rowCount` is inaccurate (will trigger `x-y of many` in pagination after the count of rows fetched is greater than provided `rowCount`) + * It could be useful with: + * 1. Cursor based pagination: + * When rowCount is not known, grid will check for `hasNextPage` to determine + * if there are more rows to fetch. + * 2. Inaccurate `rowCount`: + * `truncated: true` will let the grid know that `rowCount` is estimated/truncated. + * Thus `hasNextPage` will come into play to check more rows are available to fetch after the number becomes >= provided `rowCount` + */ + pageInfo?: { + hasNextPage?: boolean; + truncated?: number; + }; +} +``` + +#### Updating data + +If provided, the method `dataSource.updateRow` will be called with the `GridRowModel` object whenever the user edits a row. This method is optional and you can skip it if you don't need to update the data on the server. It will work in a similar way as the `processRowUpdate` prop. + +#### Data Grid props + +These data grid props will work with the server-side data source: + +- `dataSource: DataSource`: the data source object that you need to implement +- `rows`: will be ignored, could be skipped when `dataSource` is provided +- `rowCount`: will be used to identify the total number of rows in the grid, if not provided, the grid will check for the _GetRowsResponse.rowCount_ value, unless the feature being used is infinite loading where no `rowCount` is available at all. + +Props related to grouped data (`treeData` and `rowGrouping`): + +- `getGroupKey(row: GridRowModel): string` + + will be used by the grid to group rows by their parent group + This effectively replaces `getTreeDataPath`. + Consider this structure: + + ```js + - (1) Sarah // groupKey 'Sarah' + - (2) Thomas // groupKey 'Thomas' + ``` + + When (2) is expanded, the `getRows` function will be called with group keys `['Sarah', 'Thomas']`. + +- `hasChildren?(row: GridRowModel): boolean` + + Will be used by the grid to determine if a row has children on server + +- `getChildrenCount?: (row: GridRowModel) => number` + + Will be used by the grid to determine the number of children of a row on server + +#### Existing server-side features + +The server-side data source will change a bit the way existing server-side features like `filtering`, `sorting`, and `pagination` work. + +**Without data source**: +When there's no data source, the features `filtering`, `sorting`, `pagination` will work on `client` by default. In order for them to work with server-side data, you need to set them to `server` explicitly and listen to the [`onFilterModelChange`](https://mui.com/x/react-data-grid/filtering/server-side/), [`onSortModelChange`](https://mui.com/x/react-data-grid/sorting/#server-side-sorting), [`onPaginationModelChange`](https://mui.com/x/react-data-grid/pagination/#server-side-pagination) events to fetch the data from the server based on the updated variables. + +```tsx + { + // fetch data from server + }} + onSortModelChange={(newSortModel) => { + // fetch data from server + }} + onFilterModelChange={(newFilterModel) => { + // fetch data from server + }} +/> +``` + +**With data source**: +However, with a valid data source passed the features `filtering`, `sorting`, `pagination` will automatically be set to `server`. + +You just need to implement the `getRows` method and the data grid will call the `getRows` method with the proper params whenever it needs data. + +```tsx + +``` + +#### Caching + +The data grid will cache the data it receives from the server. This means that if the user navigates to a page that has already been fetched, the grid will not call the `getRows` function again. This is to avoid unnecessary calls to the server. + +## API + +- [DataGrid](/x/api/data-grid/data-grid/) +- [DataGridPro](/x/api/data-grid/data-grid-pro/) +- [DataGridPremium](/x/api/data-grid/data-grid-premium/) diff --git a/docs/data/data-grid/server-side-data/infinite-loading.md b/docs/data/data-grid/server-side-data/infinite-loading.md new file mode 100644 index 0000000000000..6c2533f51fad1 --- /dev/null +++ b/docs/data/data-grid/server-side-data/infinite-loading.md @@ -0,0 +1,15 @@ +--- +title: React Server-side infinite loading +--- + +# Data Grid - Server-side infinite loading 🚧 + +

            Row infinite loading with server side data source.

            + +:::warning +This feature isn't implemented yet. It's coming. + +👍 Upvote [issue #10858](https://github.com/mui/mui-x/issues/10858) if you want to see it land faster. + +Don't hesitate to leave a comment on the same issue to influence what gets built. Especially if you already have a use case for this component, or if you are facing a pain point with the [current solution](https://mui.com/x/react-data-grid/row-updates/#infinite-loading). +::: diff --git a/docs/data/data-grid/server-side-data/lazy-loading.md b/docs/data/data-grid/server-side-data/lazy-loading.md new file mode 100644 index 0000000000000..a8430737d67d9 --- /dev/null +++ b/docs/data/data-grid/server-side-data/lazy-loading.md @@ -0,0 +1,15 @@ +--- +title: React Server-side lazy loading +--- + +# Data Grid - Server-side lazy loading 🚧 + +

            Row lazy-loading with server side data source.

            + +:::warning +This feature isn't implemented yet. It's coming. + +👍 Upvote [issue #10857](https://github.com/mui/mui-x/issues/10857) if you want to see it land faster. + +Don't hesitate to leave a comment on the same issue to influence what gets built. Especially if you already have a use case for this component, or if you are facing a pain point with the [current solution](https://mui.com/x/react-data-grid/row-updates/#lazy-loading). +::: diff --git a/docs/data/data-grid/server-side-data/row-grouping.md b/docs/data/data-grid/server-side-data/row-grouping.md new file mode 100644 index 0000000000000..72fd21756bc29 --- /dev/null +++ b/docs/data/data-grid/server-side-data/row-grouping.md @@ -0,0 +1,15 @@ +--- +title: React Server-side row grouping +--- + +# Data Grid - Server-side row grouping 🚧 + +

            Lazy-loaded row grouping with server side data source.

            + +:::warning +This feature isn't implemented yet. It's coming. + +👍 Upvote [issue #10859](https://github.com/mui/mui-x/issues/10859) if you want to see it land faster. + +Don't hesitate to leave a comment on the same issue to influence what gets built. Especially if you already have a use case for this component, or if you are facing a pain point with your current solution. +::: diff --git a/docs/data/data-grid/server-side-data/tree-data.md b/docs/data/data-grid/server-side-data/tree-data.md new file mode 100644 index 0000000000000..ed69e9ac25d30 --- /dev/null +++ b/docs/data/data-grid/server-side-data/tree-data.md @@ -0,0 +1,15 @@ +--- +title: React Server-side tree data +--- + +# Data Grid - Server-side tree data 🚧 + +

            Tree data lazy-loading with server side data source.

            + +:::warning +This feature isn't implemented yet. It's coming. + +👍 Upvote [issue #3377](https://github.com/mui/mui-x/issues/3377) if you want to see it land faster. + +Don't hesitate to leave a comment on the same issue to influence what gets built. Especially if you already have a use case for this component, or if you are facing a pain point with the [currently proposed workaround](https://mui.com/x/react-data-grid/tree-data/#children-lazy-loading). +::: diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 317c912791c4c..154f4e73c5ef1 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -112,6 +112,39 @@ const pages: MuiPage[] = [ { pathname: '/x/react-data-grid/pivoting', title: 'Pivoting 🚧', plan: 'premium' }, ], }, + { + pathname: '/x/react-data-grid/server-side-data-group', + title: 'Server-side data 🚧', + plan: 'pro', + children: [ + { pathname: '/x/react-data-grid/server-side-data', title: 'Overview' }, + { + pathname: '/x/react-data-grid/server-side-data/lazy-loading', + title: 'Lazy loading 🚧', + plan: 'pro', + }, + { + pathname: '/x/react-data-grid/server-side-data/infinite-loading', + title: 'Infinite loading 🚧', + plan: 'pro', + }, + { + pathname: '/x/react-data-grid/server-side-data/tree-data', + title: 'Tree data 🚧', + plan: 'pro', + }, + { + pathname: '/x/react-data-grid/server-side-data/row-grouping', + title: 'Row grouping 🚧', + plan: 'pro', + }, + { + pathname: '/x/react-data-grid/server-side-data/aggregation', + title: 'Aggregation 🚧', + plan: 'premium', + }, + ], + }, { title: 'Advanced', pathname: '/x/react-data-grid/advanced', diff --git a/docs/pages/x/react-data-grid/server-side-data/aggregation.js b/docs/pages/x/react-data-grid/server-side-data/aggregation.js new file mode 100644 index 0000000000000..35594f6fa6413 --- /dev/null +++ b/docs/pages/x/react-data-grid/server-side-data/aggregation.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/aggregation.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/x/react-data-grid/server-side-data/index.js b/docs/pages/x/react-data-grid/server-side-data/index.js new file mode 100644 index 0000000000000..8d183d6d499c0 --- /dev/null +++ b/docs/pages/x/react-data-grid/server-side-data/index.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/index.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/x/react-data-grid/server-side-data/infinite-loading.js b/docs/pages/x/react-data-grid/server-side-data/infinite-loading.js new file mode 100644 index 0000000000000..9b9c08c05e85f --- /dev/null +++ b/docs/pages/x/react-data-grid/server-side-data/infinite-loading.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/infinite-loading.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/x/react-data-grid/server-side-data/lazy-loading.js b/docs/pages/x/react-data-grid/server-side-data/lazy-loading.js new file mode 100644 index 0000000000000..f0b78beb6cac3 --- /dev/null +++ b/docs/pages/x/react-data-grid/server-side-data/lazy-loading.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/lazy-loading.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/x/react-data-grid/server-side-data/row-grouping.js b/docs/pages/x/react-data-grid/server-side-data/row-grouping.js new file mode 100644 index 0000000000000..06017357e71e6 --- /dev/null +++ b/docs/pages/x/react-data-grid/server-side-data/row-grouping.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/row-grouping.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/x/react-data-grid/server-side-data/tree-data.js b/docs/pages/x/react-data-grid/server-side-data/tree-data.js new file mode 100644 index 0000000000000..6d122e9e139f9 --- /dev/null +++ b/docs/pages/x/react-data-grid/server-side-data/tree-data.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/tree-data.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/packages/grid/x-data-grid-pro/src/models/dataSource.ts b/packages/grid/x-data-grid-pro/src/models/dataSource.ts new file mode 100644 index 0000000000000..e6dc9236529e9 --- /dev/null +++ b/packages/grid/x-data-grid-pro/src/models/dataSource.ts @@ -0,0 +1,72 @@ +import { + GridSortModel, + GridFilterModel, + GridColDef, + GridRowModel, + GridPaginationModel, +} from '@mui/x-data-grid'; + +interface GetRowsParams { + sortModel: GridSortModel; + filterModel: GridFilterModel; + /** + * Alternate to `start` and `end`, maps to `GridPaginationModel` interface + */ + paginationModel: GridPaginationModel; + /** + * First row index to fetch (number) or cursor information (number | string) + */ + start: number | string; // first row index to fetch or cursor information + /** + * Last row index to fetch + */ + end: number; // last row index to fetch + /** + * Array of keys returned by `getGroupKey` of all the parent rows until the row for which the data is requested + * `getGroupKey` prop must be implemented to use this + * Useful for `treeData` and `rowGrouping` only + */ + groupKeys: string[]; + /** + * List of grouped columns (only applicable with `rowGrouping`) + */ + groupFields: GridColDef['field'][]; // list of grouped columns (`rowGrouping`) +} + +interface GetRowsResponse { + rows: GridRowModel[]; + /** + * To reflect updates in total `rowCount` (optional) + * Useful when the `rowCount` is inaccurate (e.g. when filtering) or not available upfront + */ + rowCount?: number; + /** + * Additional `pageInfo` to help the grid determine if there are more rows to fetch (corner-cases) + * `hasNextPage`: When row count is unknown/inaccurate, if `truncated` is set or rowCount is not known, data will keep loading until `hasNextPage` is `false` + * `truncated`: To reflect `rowCount` is inaccurate (will trigger `x-y of many` in pagination after the count of rows fetched is greater than provided `rowCount`) + * It could be useful with: + * 1. Cursor based pagination: + * When rowCount is not known, grid will check for `hasNextPage` to determine + * if there are more rows to fetch. + * 2. Inaccurate `rowCount`: + * `truncated: true` will let the grid know that `rowCount` is estimated/truncated. + * Thus `hasNextPage` will come into play to check more rows are available to fetch after the number becomes >= provided `rowCount` + */ + pageInfo?: { + hasNextPage?: boolean; + truncated?: number; + }; +} + +export interface DataSource { + /** + Fetcher Functions: + - `getRows` is required + - `updateRow` is optional + + `getRows` will be used by the grid to fetch data for the current page or children for the current parent group + It may return a `rowCount` to update the total count of rows in the grid along with the optional `pageInfo` + */ + getRows(params: GetRowsParams): Promise; + updateRow?(rows: GridRowModel): Promise; +} From fe5198cafabb69f7f2ce7c2a4d9ba5c028437f73 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Tue, 7 Nov 2023 17:05:06 +0100 Subject: [PATCH 238/262] [data grid] Adds a recipe for using non-native select in filter panel (#10916) --- .../filtering-recipes/UseNonNativeSelect.js | 26 +++++++++++++++++++ .../filtering-recipes/UseNonNativeSelect.tsx | 26 +++++++++++++++++++ .../UseNonNativeSelect.tsx.preview | 8 ++++++ .../filtering-recipes/filtering-recipes.md | 6 +++++ 4 files changed, 66 insertions(+) create mode 100644 docs/data/data-grid/filtering-recipes/UseNonNativeSelect.js create mode 100644 docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx create mode 100644 docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx.preview diff --git a/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.js b/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.js new file mode 100644 index 0000000000000..53ee4312c7d4c --- /dev/null +++ b/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.js @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin']; + +export default function UseNonNativeSelect() { + const { data } = useDemoData({ + dataSet: 'Employee', + visibleFields: VISIBLE_FIELDS, + rowLength: 100, + }); + + return ( +
            + +
            + ); +} diff --git a/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx b/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx new file mode 100644 index 0000000000000..53ee4312c7d4c --- /dev/null +++ b/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin']; + +export default function UseNonNativeSelect() { + const { data } = useDemoData({ + dataSet: 'Employee', + visibleFields: VISIBLE_FIELDS, + rowLength: 100, + }); + + return ( +
            + +
            + ); +} diff --git a/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx.preview b/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx.preview new file mode 100644 index 0000000000000..f042b7c7db386 --- /dev/null +++ b/docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx.preview @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/filtering-recipes/filtering-recipes.md b/docs/data/data-grid/filtering-recipes/filtering-recipes.md index 2e37485e9a098..b9c7e71005100 100644 --- a/docs/data/data-grid/filtering-recipes/filtering-recipes.md +++ b/docs/data/data-grid/filtering-recipes/filtering-recipes.md @@ -13,3 +13,9 @@ Currently if you want to use the [Quick filter](/x/react-data-grid/filtering/qui A common use case is to have certain components positioned outside of the grid. Because of the way the grid context works this might not be a straining forward thing to do. The example below illustrates how this use case can be achieved. {{"demo": "QuickFilterOutsideOfGrid.js", "bg": "inline", "defaultCodeOpen": false}} + +## Use non-native select in filter panel + +If you do not want to use the native select in the filtering panel you can switch it to the `@mui/material/Select` component by using the `slotProps` property. + +{{"demo": "UseNonNativeSelect.js", "bg": "inline", "defaultCodeOpen": false}} From 129709a0e643a9c08b781b6af8fd2da757eb93ae Mon Sep 17 00:00:00 2001 From: GitStart <1501599+gitstart@users.noreply.github.com> Date: Tue, 7 Nov 2023 17:05:40 +0100 Subject: [PATCH 239/262] [DataGridPro] Autosize Columns - Headers being cut off (#10666) Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com> --- .../hooks/features/columnResize/useGridColumnResize.tsx | 8 +++++++- .../src/tests/columns.DataGridPro.test.tsx | 8 ++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index dd78724ddcf33..eed1b3bb4b8ae 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -225,12 +225,18 @@ function extractColumnWidths( if (header) { const title = header.querySelector(`.${gridClasses.columnHeaderTitle}`); const content = header.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`)!; + const iconContainer = header.querySelector(`.${gridClasses.iconButtonContainer}`); + const menuContainer = header.querySelector(`.${gridClasses.menuIcon}`); const element = title ?? content; const style = window.getComputedStyle(header, null); const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10); const contentWidth = element.scrollWidth + 1; - const width = paddingWidth + contentWidth; + const width = + contentWidth + + paddingWidth + + (iconContainer?.clientWidth ?? 0) + + (menuContainer?.clientWidth ?? 0); filteredWidths.push(width); } diff --git a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx index fab2eb10e9eee..db13d896f4542 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx @@ -450,7 +450,7 @@ describe(' - Columns', () => { render(); await apiRef.current.autosizeColumns(); await microtasks(); - expect(getWidths()).to.deep.equal([155, 177]); + expect(getWidths()).to.deep.equal([213, 235]); }); it('should work through double-clicking the separator', async () => { @@ -460,14 +460,14 @@ describe(' - Columns', () => { )[1]; fireEvent.doubleClick(separator); await microtasks(); - expect(getWidths()).to.deep.equal([100, 177]); + expect(getWidths()).to.deep.equal([100, 235]); }); it('should work on mount', async () => { render(); await microtasks(); /* first effect after render */ await microtasks(); /* async autosize operation */ - expect(getWidths()).to.deep.equal([155, 177]); + expect(getWidths()).to.deep.equal([213, 235]); }); describe('options', () => { @@ -482,7 +482,7 @@ describe(' - Columns', () => { await autosize({ columns: [columns[0].field] }, [50, 100]); }); it('.includeHeaders works', async () => { - await autosize({ includeHeaders: true }, [155, 177]); + await autosize({ includeHeaders: true }, [213, 235]); }); it('.includeOutliers works', async () => { await autosize({ includeOutliers: true }, [50, 144]); From a3611e579e6a3964ddf015dbb4fe94cd86d6ac66 Mon Sep 17 00:00:00 2001 From: Benjamin Bialy Date: Wed, 8 Nov 2023 05:52:16 +1100 Subject: [PATCH 240/262] [DataGrid] Fix for error thrown when removing skeleton rows, after sorting is applied (#10807) --- .../grid/x-data-grid/src/hooks/features/rows/useGridRows.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts index 2562e1c3d932f..849560f833b0a 100644 --- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts +++ b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts @@ -440,7 +440,7 @@ export const useGridRows = ( tree[GRID_ROOT_GROUP_ID] = { ...rootGroup, children: rootGroupChildren }; // Removes potential remaining skeleton rows from the dataRowIds. - const dataRowIds = rootGroupChildren.filter((childId) => tree[childId].type === 'leaf'); + const dataRowIds = rootGroupChildren.filter((childId) => tree[childId]?.type === 'leaf'); apiRef.current.caches.rows.dataRowIdToModelLookup = dataRowIdToModelLookup; apiRef.current.caches.rows.dataRowIdToIdLookup = dataRowIdToIdLookup; From ad2bd142da04f330d6153f444b876faf2e985284 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Wed, 8 Nov 2023 11:22:19 +0100 Subject: [PATCH 241/262] [data grid] Fix keyboard navigation for actions cell with disabled buttons (#10882) --- .../src/components/cell/GridActionsCell.tsx | 33 ++++-- .../src/components/cell/GridCell.tsx | 11 +- .../src/tests/keyboard.DataGrid.test.tsx | 110 +++++++++++++++++- 3 files changed, 138 insertions(+), 16 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx index 424901dafab19..c42d8627b895e 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx @@ -97,11 +97,13 @@ function GridActionsCell(props: GridActionsCellProps) { focus() { // If ignoreCallToFocus is true, then one of the buttons was clicked and the focus is already set if (!ignoreCallToFocus.current) { - setFocusedButtonIndex(0); + // find the first focusable button and pass the index to the state + const focusableButtonIndex = options.findIndex((o) => !o.props.disabled); + setFocusedButtonIndex(focusableButtonIndex); } }, }), - [], + [options], ); React.useEffect(() => { @@ -141,19 +143,26 @@ function GridActionsCell(props: GridActionsCellProps) { return; } + const getNewIndex = (index: number, direction: 'left' | 'right'): number => { + if (index < 0 || index > options.length) { + return index; + } + + // for rtl mode we need to reverse the direction + const rtlMod = theme.direction === 'rtl' ? -1 : 1; + const indexMod = (direction === 'left' ? -1 : 1) * rtlMod; + + // if the button that should receive focus is disabled go one more step + return options[index + indexMod]?.props.disabled + ? getNewIndex(index + indexMod, direction) + : index + indexMod; + }; + let newIndex: number = focusedButtonIndex; if (event.key === 'ArrowRight') { - if (theme.direction === 'rtl') { - newIndex -= 1; - } else { - newIndex += 1; - } + newIndex = getNewIndex(focusedButtonIndex, 'right'); } else if (event.key === 'ArrowLeft') { - if (theme.direction === 'rtl') { - newIndex += 1; - } else { - newIndex -= 1; - } + newIndex = getNewIndex(focusedButtonIndex, 'left'); } if (newIndex < 0 || newIndex >= numberOfButtons) { diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index bc74c127ad518..d55e0c431ca14 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -18,6 +18,7 @@ import { GridRowId, GridCellMode, GridEditCellProps, + GridActionsColDef, } from '../../models'; import { GridRenderEditCellParams, @@ -585,9 +586,13 @@ const GridCellV7 = React.forwardRef((props, ref const { cellMode, hasFocus, isEditable, value, formattedValue } = cellParamsWithAPI; - const managesOwnFocus = column.type === 'actions'; + const canManageOwnFocus = + column.type === 'actions' && + (column as GridActionsColDef) + .getActions?.(apiRef.current.getRowParams(rowId)) + .some((action) => !action.props.disabled); const tabIndex = - (cellMode === 'view' || !isEditable) && !managesOwnFocus ? cellParamsWithAPI.tabIndex : -1; + (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParamsWithAPI.tabIndex : -1; const { classes: rootClasses, getCellClassName } = rootProps; @@ -772,7 +777,7 @@ const GridCellV7 = React.forwardRef((props, ref ); } - if (React.isValidElement(children) && managesOwnFocus) { + if (React.isValidElement(children) && canManageOwnFocus) { children = React.cloneElement(children, { focusElementRef }); } diff --git a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx index 036082a0ce0e7..1cd7a93ec6bff 100644 --- a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx @@ -10,8 +10,9 @@ import { getColumnValues, getRow, } from 'test/utils/helperFn'; -import { DataGrid, DataGridProps, GridColDef } from '@mui/x-data-grid'; +import { DataGrid, DataGridProps, GridActionsCellItem, GridColDef } from '@mui/x-data-grid'; import { useBasicDemoData, getBasicGridData } from '@mui/x-data-grid-generator'; +import RestoreIcon from '@mui/icons-material/Restore'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -716,6 +717,113 @@ describe(' - Keyboard', () => { expect(virtualScroller.scrollLeft).to.equal(0); }); + it('should focus actions cell with one disabled item', () => { + const columns = [ + { + field: 'actions', + type: 'actions', + getActions: () => [ + } id={'action_1'} disabled />, + } id={'action_2'} />, + ], + }, + { field: 'id', width: 400 }, + { field: 'name' }, + ]; + const rows = [ + { id: 1, name: 'John' }, + { id: 2, name: 'Doe' }, + ]; + + render( +
            + +
            , + ); + + const cell = getCell(0, 1); + userEvent.mousePress(cell); + + fireEvent.keyDown(cell, { key: 'ArrowLeft' }); + expect(getActiveCell()).to.equal(`0-0`); + + // expect the only focusable button to be the active element + expect(document.activeElement?.id).to.equal('action_2'); + }); + + it('should focus actions cell with all items disabled', () => { + const columns = [ + { + field: 'actions', + type: 'actions', + getActions: () => [ + } id={'action_1'} disabled />, + } id={'action_2'} disabled />, + ], + }, + { field: 'id', width: 400 }, + { field: 'name' }, + ]; + const rows = [ + { id: 1, name: 'John' }, + { id: 2, name: 'Doe' }, + ]; + + render( +
            + +
            , + ); + + const cell = getCell(0, 1); + userEvent.mousePress(cell); + + fireEvent.keyDown(cell, { key: 'ArrowLeft' }); + expect(getActiveCell()).to.equal(`0-0`); + }); + + it('should be able to navigate the actions', () => { + const columns = [ + { + field: 'actions', + type: 'actions', + getActions: () => [ + } id={'action_1'} disabled />, + } id={'action_2'} />, + } id={'action_3'} disabled />, + } id={'action_4'} disabled />, + } id={'action_5'} />, + ], + }, + { field: 'id', width: 400 }, + { field: 'name' }, + ]; + const rows = [ + { id: 1, name: 'John' }, + { id: 2, name: 'Doe' }, + ]; + + render( +
            + +
            , + ); + + const cell = getCell(0, 1); + userEvent.mousePress(cell); + + fireEvent.keyDown(cell, { key: 'ArrowLeft' }); + expect(getActiveCell()).to.equal(`0-0`); + + // expect the only focusable button to be the active element + expect(document.activeElement?.id).to.equal('action_2'); + + fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' }); + + // expect the only focusable button to be the active element + expect(document.activeElement?.id).to.equal('action_5'); + }); + it('should not throw when moving into an empty grid', async () => { const columns = [{ field: 'id', width: 400 }, { field: 'name' }]; const rows = [] as any[]; From a73add2e6bd9ed9ca320ebddac0f01f9fa931e24 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Wed, 8 Nov 2023 12:17:59 +0100 Subject: [PATCH 242/262] [core] Adds migration docs for charts, pickers and tree view (#10926) Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> --- .../migration-charts-v6.md | 25 ++++++++++++ .../migration-pickers-v6.md | 27 +++++++++++++ .../migration-tree-view-v6.md | 27 +++++++++++++ docs/data/pages.ts | 12 ++++++ docs/pages/_app.js | 40 ++++++++++++++++--- docs/pages/x/migration/migration-charts-v6.js | 7 ++++ .../pages/x/migration/migration-pickers-v6.js | 7 ++++ .../x/migration/migration-tree-view-v6.js | 7 ++++ 8 files changed, 147 insertions(+), 5 deletions(-) create mode 100644 docs/data/migration/migration-charts-v6/migration-charts-v6.md create mode 100644 docs/data/migration/migration-pickers-v6/migration-pickers-v6.md create mode 100644 docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md create mode 100644 docs/pages/x/migration/migration-charts-v6.js create mode 100644 docs/pages/x/migration/migration-pickers-v6.js create mode 100644 docs/pages/x/migration/migration-tree-view-v6.js diff --git a/docs/data/migration/migration-charts-v6/migration-charts-v6.md b/docs/data/migration/migration-charts-v6/migration-charts-v6.md new file mode 100644 index 0000000000000..b840e8ad5f694 --- /dev/null +++ b/docs/data/migration/migration-charts-v6/migration-charts-v6.md @@ -0,0 +1,25 @@ +--- +productId: x-charts +--- + +# Migration from v6 to v7 + +

            This guide describes the changes needed to migrate Charts from v6 to v7.

            + +## Introduction + +TBD + +## Start using the new release + +In `package.json`, change the version of the date pickers package to `next`. + +```diff +-"@mui/x-charts": "6.x.x", ++"@mui/x-charts": "next", +``` + +## Breaking changes + +Since `v7` is a major release, it contains changes that affect the public API. +These changes were done for consistency, improved stability and to make room for new features. diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md new file mode 100644 index 0000000000000..42dd8be109ab2 --- /dev/null +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -0,0 +1,27 @@ +--- +productId: x-date-pickers +--- + +# Migration from v6 to v7 + + + +

            This guide describes the changes needed to migrate the Date and Time Pickers from v6 to v7.

            + +## Introduction + +TBD + +## Start using the new release + +In `package.json`, change the version of the date pickers package to `next`. + +```diff +-"@mui/x-date-pickers": "6.x.x", ++"@mui/x-date-pickers": "next", +``` + +## Breaking changes + +Since `v7` is a major release, it contains changes that affect the public API. +These changes were done for consistency, improved stability and to make room for new features. 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 new file mode 100644 index 0000000000000..9da4c8879223a --- /dev/null +++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md @@ -0,0 +1,27 @@ +--- +productId: x-tree-view +--- + +# Migration from v6 to v7 + + + +

            This guide describes the changes needed to migrate the Tree View from v6 to v7.

            + +## Introduction + +TBD + +## Start using the alpha release + +In `package.json`, change the version of the date pickers package to `next`. + +```diff +-"@mui/x-tree-view": "6.x.x", ++"@mui/x-tree-view": "next", +``` + +## Breaking changes + +Since `v7` is a major release, it contains changes that affect the public API. +These changes were done for consistency, improved stability and to make room for new features. diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 154f4e73c5ef1..a2cb275c9f4d4 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -469,6 +469,18 @@ const pages: MuiPage[] = [ subheader: 'Upgrade to v7', children: [ { pathname: '/x/migration/migration-data-grid-v6', title: 'Breaking changes: Data Grid' }, + { + pathname: '/x/migration/migration-pickers-v6', + title: 'Breaking changes: Date and Time Pickers', + }, + { + pathname: '/x/migration/migration-tree-view-v6', + title: 'Breaking changes: Tree View', + }, + { + pathname: '/x/migration/migration-charts-v6', + title: 'Breaking changes: Charts', + }, ], }, { diff --git a/docs/pages/_app.js b/docs/pages/_app.js index fb7f90d7d62ec..dc094e5d3edc9 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -213,7 +213,11 @@ function AppWrapper(props) { metadata: '', name: 'MUI X', versions: [ - { text: `v${process.env.LIB_VERSION}`, current: true }, + { + text: `v${process.env.LIB_VERSION}`, + current: true, + }, + { text: 'v6', href: `https://mui.com${languagePrefix}/x/introduction/` }, { text: 'v5', href: `https://v5.mui.com${languagePrefix}/x/introduction/` }, { text: 'v4', href: `https://v4.mui.com${languagePrefix}/components/data-grid/` }, ], @@ -224,7 +228,11 @@ function AppWrapper(props) { metadata: 'MUI X', name: 'Data Grid', versions: [ - { text: `v${process.env.DATA_GRID_VERSION}`, current: true }, + { + text: `v${process.env.DATA_GRID_VERSION}`, + current: true, + }, + { text: 'v6', href: `https://mui.com${languagePrefix}/components/data-grid/` }, { text: 'v5', href: `https://v5.mui.com${languagePrefix}/components/data-grid/` }, { text: 'v4', href: `https://v4.mui.com${languagePrefix}/components/data-grid/` }, ], @@ -234,7 +242,14 @@ function AppWrapper(props) { metadata: 'MUI X', name: 'Date Pickers', versions: [ - { text: `v${process.env.DATE_PICKERS_VERSION}`, current: true }, + { + text: `v${process.env.DATE_PICKERS_VERSION}`, + current: true, + }, + { + text: 'v6', + href: `https://mui.com${languagePrefix}/x/react-date-pickers/getting-started/`, + }, { text: 'v5', href: `https://v5.mui.com${languagePrefix}/x/react-date-pickers/getting-started/`, @@ -245,13 +260,28 @@ function AppWrapper(props) { productIdentifier = { metadata: 'MUI X', name: 'Charts', - versions: [{ text: `v${process.env.CHARTS_VERSION}`, current: true }], + versions: [ + { + text: `v${process.env.CHARTS_VERSION}`, + current: true, + }, + { text: 'v6', href: `https://mui.com${languagePrefix}/x/react-charts/getting-started` }, + ], }; } else if (productId === 'x-tree-view') { productIdentifier = { metadata: 'MUI X', name: 'Tree View', - versions: [{ text: `v${process.env.TREE_VIEW_VERSION}`, current: true }], + versions: [ + { + text: `v${process.env.TREE_VIEW_VERSION}`, + current: true, + }, + { + text: 'v6', + href: `https://mui.com${languagePrefix}/x/react-tree-view/getting-started`, + }, + ], }; } diff --git a/docs/pages/x/migration/migration-charts-v6.js b/docs/pages/x/migration/migration-charts-v6.js new file mode 100644 index 0000000000000..4ba678d249864 --- /dev/null +++ b/docs/pages/x/migration/migration-charts-v6.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/migration/migration-charts-v6/migration-charts-v6.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/x/migration/migration-pickers-v6.js b/docs/pages/x/migration/migration-pickers-v6.js new file mode 100644 index 0000000000000..8f64f9f109e48 --- /dev/null +++ b/docs/pages/x/migration/migration-pickers-v6.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/migration/migration-pickers-v6/migration-pickers-v6.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/x/migration/migration-tree-view-v6.js b/docs/pages/x/migration/migration-tree-view-v6.js new file mode 100644 index 0000000000000..1ebe531b3f6b2 --- /dev/null +++ b/docs/pages/x/migration/migration-tree-view-v6.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/migration/migration-tree-view-v6/migration-tree-view-v6.md?@mui/markdown'; + +export default function Page() { + return ; +} From cf45f1f770470cd41b22f65e3ace11456d6c525e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C4=BDubo=C5=A1=20Repka?= <40338867+luborepka@users.noreply.github.com> Date: Wed, 8 Nov 2023 13:36:46 +0100 Subject: [PATCH 243/262] [l10n] Improve Czech (cs-CZ) locale (#10949) --- packages/grid/x-data-grid/src/locales/csCZ.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/locales/csCZ.ts b/packages/grid/x-data-grid/src/locales/csCZ.ts index a553a6a7661b1..b4eafa7dab0d9 100644 --- a/packages/grid/x-data-grid/src/locales/csCZ.ts +++ b/packages/grid/x-data-grid/src/locales/csCZ.ts @@ -174,8 +174,8 @@ const csCZGrid: Partial = { actionsCellMore: 'více', // Column pinning text - pinToLeft: 'Připnout na levo', - pinToRight: 'Připnout na pravo', + pinToLeft: 'Připnout vlevo', + pinToRight: 'Připnout vpravo', unpin: 'Odepnout', // Tree Data From d8b4ee35877c12df8e15d0c128bb2b178d4fef73 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Wed, 8 Nov 2023 13:52:50 +0100 Subject: [PATCH 244/262] [charts] Add component (#10597) (#10946) Co-authored-by: Maxime THOMAS Co-authored-by: Lukas --- docs/data/charts-component-api-pages.ts | 1 + docs/data/charts/axis/AxisWithComposition.js | 14 +- docs/data/charts/axis/AxisWithComposition.tsx | 14 +- docs/data/charts/axis/ReferenceLine.js | 66 +++++++++ docs/data/charts/axis/ReferenceLine.tsx | 66 +++++++++ .../charts/axis/ReferenceLine.tsx.preview | 13 ++ docs/data/charts/axis/axis.md | 11 ++ .../line-demo/LineChartWithReferenceLines.js | 43 ++++++ .../line-demo/LineChartWithReferenceLines.tsx | 43 ++++++ docs/data/charts/line-demo/line-demo.md | 4 + docs/pages/x/api/charts/bar-chart.json | 8 +- docs/pages/x/api/charts/charts-axis.json | 8 +- .../x/api/charts/charts-reference-line.js | 23 +++ .../x/api/charts/charts-reference-line.json | 42 ++++++ docs/pages/x/api/charts/charts-x-axis.json | 2 +- docs/pages/x/api/charts/charts-y-axis.json | 2 +- docs/pages/x/api/charts/line-chart.json | 8 +- docs/pages/x/api/charts/pie-chart.json | 8 +- docs/pages/x/api/charts/scatter-chart.json | 8 +- .../charts/charts-reference-line.json | 66 +++++++++ .../api-docs/charts/charts-x-axis.json | 2 +- .../api-docs/charts/charts-y-axis.json | 2 +- packages/x-charts/src/BarChart/BarChart.tsx | 8 +- packages/x-charts/src/BarChart/BarPlot.tsx | 12 +- .../x-charts/src/ChartsAxis/ChartsAxis.tsx | 10 +- .../src/ChartsLegend/ChartsLegend.tsx | 4 +- .../src/ChartsLegend/chartsLegendClasses.ts | 2 +- .../ChartsReferenceLine.tsx | 82 +++++++++++ .../ChartsXReferenceLine.tsx | 133 ++++++++++++++++++ .../ChartsYReferenceLine.tsx | 133 ++++++++++++++++++ .../chartsReferenceLineClasses.ts | 26 ++++ .../src/ChartsReferenceLine/common.tsx | 55 ++++++++ .../src/ChartsReferenceLine/index.tsx | 2 + .../x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 8 +- .../x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 8 +- packages/x-charts/src/LineChart/AreaPlot.tsx | 4 +- packages/x-charts/src/LineChart/LineChart.tsx | 8 +- .../src/LineChart/LineHighlightPlot.tsx | 2 +- packages/x-charts/src/LineChart/LinePlot.tsx | 2 +- packages/x-charts/src/LineChart/MarkPlot.tsx | 4 +- packages/x-charts/src/PieChart/PieChart.tsx | 8 +- .../src/ScatterChart/ScatterChart.tsx | 8 +- packages/x-charts/src/index.ts | 1 + .../x-charts/src/internals/isBandScale.ts | 6 +- packages/x-charts/src/internals/utils.ts | 3 + packages/x-charts/src/models/axis.ts | 49 ++++--- scripts/x-charts.exports.json | 5 + 47 files changed, 931 insertions(+), 106 deletions(-) create mode 100644 docs/data/charts/axis/ReferenceLine.js create mode 100644 docs/data/charts/axis/ReferenceLine.tsx create mode 100644 docs/data/charts/axis/ReferenceLine.tsx.preview create mode 100644 docs/data/charts/line-demo/LineChartWithReferenceLines.js create mode 100644 docs/data/charts/line-demo/LineChartWithReferenceLines.tsx create mode 100644 docs/pages/x/api/charts/charts-reference-line.js create mode 100644 docs/pages/x/api/charts/charts-reference-line.json create mode 100644 docs/translations/api-docs/charts/charts-reference-line.json create mode 100644 packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx create mode 100644 packages/x-charts/src/ChartsReferenceLine/ChartsXReferenceLine.tsx create mode 100644 packages/x-charts/src/ChartsReferenceLine/ChartsYReferenceLine.tsx create mode 100644 packages/x-charts/src/ChartsReferenceLine/chartsReferenceLineClasses.ts create mode 100644 packages/x-charts/src/ChartsReferenceLine/common.tsx create mode 100644 packages/x-charts/src/ChartsReferenceLine/index.tsx diff --git a/docs/data/charts-component-api-pages.ts b/docs/data/charts-component-api-pages.ts index f10b505b16bb1..8153086f99c08 100644 --- a/docs/data/charts-component-api-pages.ts +++ b/docs/data/charts-component-api-pages.ts @@ -9,6 +9,7 @@ export default [ { pathname: '/x/api/charts/charts-axis', title: 'ChartsAxis' }, { pathname: '/x/api/charts/charts-axis-highlight', title: 'ChartsAxisHighlight' }, { pathname: '/x/api/charts/charts-clip-path', title: 'ChartsClipPath' }, + { pathname: '/x/api/charts/charts-reference-line', title: 'ChartsReferenceLine' }, { pathname: '/x/api/charts/charts-tooltip', title: 'ChartsTooltip' }, { pathname: '/x/api/charts/charts-x-axis', title: 'ChartsXAxis' }, { pathname: '/x/api/charts/charts-y-axis', title: 'ChartsYAxis' }, diff --git a/docs/data/charts/axis/AxisWithComposition.js b/docs/data/charts/axis/AxisWithComposition.js index 76ccbc2a9922a..71a2a507fe90f 100644 --- a/docs/data/charts/axis/AxisWithComposition.js +++ b/docs/data/charts/axis/AxisWithComposition.js @@ -1,13 +1,11 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { - ResponsiveChartContainer, - BarPlot, - LinePlot, - ChartsXAxis, - ChartsYAxis, - axisClasses, -} from '@mui/x-charts'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { LinePlot } from '@mui/x-charts/LineChart'; +import { BarPlot } from '@mui/x-charts/BarChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; +import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; +import { axisClasses } from '@mui/x-charts/ChartsAxis'; export default function AxisWithComposition() { return ( diff --git a/docs/data/charts/axis/AxisWithComposition.tsx b/docs/data/charts/axis/AxisWithComposition.tsx index 76ccbc2a9922a..71a2a507fe90f 100644 --- a/docs/data/charts/axis/AxisWithComposition.tsx +++ b/docs/data/charts/axis/AxisWithComposition.tsx @@ -1,13 +1,11 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { - ResponsiveChartContainer, - BarPlot, - LinePlot, - ChartsXAxis, - ChartsYAxis, - axisClasses, -} from '@mui/x-charts'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { LinePlot } from '@mui/x-charts/LineChart'; +import { BarPlot } from '@mui/x-charts/BarChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; +import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; +import { axisClasses } from '@mui/x-charts/ChartsAxis'; export default function AxisWithComposition() { return ( diff --git a/docs/data/charts/axis/ReferenceLine.js b/docs/data/charts/axis/ReferenceLine.js new file mode 100644 index 0000000000000..844f9781c3f40 --- /dev/null +++ b/docs/data/charts/axis/ReferenceLine.js @@ -0,0 +1,66 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { LinePlot } from '@mui/x-charts/LineChart'; + +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; +import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; +import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; + +const timeData = [ + new Date(2023, 7, 31), + new Date(2023, 7, 31, 12), + new Date(2023, 8, 1), + new Date(2023, 8, 1, 12), + new Date(2023, 8, 2), + new Date(2023, 8, 2, 12), + new Date(2023, 8, 3), + new Date(2023, 8, 3, 12), + new Date(2023, 8, 4), +]; + +const y1 = [5, 5, 10, 90, 85, 70, 30, 25, 25]; +const y2 = [90, 85, 70, 25, 23, 40, 45, 40, 50]; + +const config = { + series: [ + { type: 'line', data: y1 }, + { type: 'line', data: y2 }, + ], + height: 400, + xAxis: [ + { + data: timeData, + scaleType: 'time', + valueFormatter: (date) => + date.getHours() === 0 + ? date.toLocaleDateString('fr-FR', { + month: '2-digit', + day: '2-digit', + }) + : date.toLocaleTimeString('fr-FR', { + hour: '2-digit', + }), + }, + ], +}; + +export default function ReferenceLine() { + return ( + + + + + + + + + + ); +} diff --git a/docs/data/charts/axis/ReferenceLine.tsx b/docs/data/charts/axis/ReferenceLine.tsx new file mode 100644 index 0000000000000..bef07764db741 --- /dev/null +++ b/docs/data/charts/axis/ReferenceLine.tsx @@ -0,0 +1,66 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { LinePlot } from '@mui/x-charts/LineChart'; +import { LineSeriesType } from '@mui/x-charts/models'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; +import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; +import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; + +const timeData = [ + new Date(2023, 7, 31), + new Date(2023, 7, 31, 12), + new Date(2023, 8, 1), + new Date(2023, 8, 1, 12), + new Date(2023, 8, 2), + new Date(2023, 8, 2, 12), + new Date(2023, 8, 3), + new Date(2023, 8, 3, 12), + new Date(2023, 8, 4), +]; + +const y1 = [5, 5, 10, 90, 85, 70, 30, 25, 25]; +const y2 = [90, 85, 70, 25, 23, 40, 45, 40, 50]; + +const config = { + series: [ + { type: 'line', data: y1 }, + { type: 'line', data: y2 }, + ] as LineSeriesType[], + height: 400, + xAxis: [ + { + data: timeData, + scaleType: 'time', + valueFormatter: (date: Date) => + date.getHours() === 0 + ? date.toLocaleDateString('fr-FR', { + month: '2-digit', + day: '2-digit', + }) + : date.toLocaleTimeString('fr-FR', { + hour: '2-digit', + }), + } as const, + ], +}; + +export default function ReferenceLine() { + return ( + + + + + + + + + + ); +} diff --git a/docs/data/charts/axis/ReferenceLine.tsx.preview b/docs/data/charts/axis/ReferenceLine.tsx.preview new file mode 100644 index 0000000000000..17c9fe4ec5d2e --- /dev/null +++ b/docs/data/charts/axis/ReferenceLine.tsx.preview @@ -0,0 +1,13 @@ + + + + + + + \ No newline at end of file diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md index e0b59a21235aa..050f714cd97b1 100644 --- a/docs/data/charts/axis/axis.md +++ b/docs/data/charts/axis/axis.md @@ -170,3 +170,14 @@ You can choose their position with `position` props which accept `'top'`/`'botto Other props are similar to the ones defined in the [previous section](/x/react-charts/axis/#rendering). {{"demo": "AxisWithComposition.js"}} + +### Reference line + +The `` component add a reference line to the charts. +You can provide an `x` or `y` prop to get a vertical or horizontal line respectively at this value. + +You can add a `label` to this reference line. +It can be placed with `labelAlign` prop which accepts `'start'`, `'middle'`, and `'end'` values. +Elements can be styled with `lineStyle` and `labelStyle` props. + +{{"demo": "ReferenceLine.js"}} diff --git a/docs/data/charts/line-demo/LineChartWithReferenceLines.js b/docs/data/charts/line-demo/LineChartWithReferenceLines.js new file mode 100644 index 0000000000000..b991babc95b19 --- /dev/null +++ b/docs/data/charts/line-demo/LineChartWithReferenceLines.js @@ -0,0 +1,43 @@ +import * as React from 'react'; +import { ChartContainer } from '@mui/x-charts/ChartContainer'; +import { ChartsReferenceLine } from '@mui/x-charts'; +import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; +import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function LineChartWithReferenceLines() { + return ( + + + + + + + + + ); +} diff --git a/docs/data/charts/line-demo/LineChartWithReferenceLines.tsx b/docs/data/charts/line-demo/LineChartWithReferenceLines.tsx new file mode 100644 index 0000000000000..b991babc95b19 --- /dev/null +++ b/docs/data/charts/line-demo/LineChartWithReferenceLines.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +import { ChartContainer } from '@mui/x-charts/ChartContainer'; +import { ChartsReferenceLine } from '@mui/x-charts'; +import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; +import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function LineChartWithReferenceLines() { + return ( + + + + + + + + + ); +} diff --git a/docs/data/charts/line-demo/line-demo.md b/docs/data/charts/line-demo/line-demo.md index c8b9ff2af5cc9..e79bd9d6ad06f 100644 --- a/docs/data/charts/line-demo/line-demo.md +++ b/docs/data/charts/line-demo/line-demo.md @@ -22,6 +22,10 @@ title: Charts - Line demonstration {{"demo": "BiaxialLineChart.js"}} +## LineChartWithReferenceLines + +{{"demo": "LineChartWithReferenceLines.js"}} + ## LineChartConnectNulls {{"demo": "LineChartConnectNulls.js"}} diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index 8bbff0857a776..ed628ca83572d 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
            | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
            | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -13,14 +13,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
            | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
            | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
            | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
            | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" }, "default": "null" }, @@ -30,7 +30,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
            | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
            | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/charts-axis.json b/docs/pages/x/api/charts/charts-axis.json index c198f3032049d..9845f37eb5803 100644 --- a/docs/pages/x/api/charts/charts-axis.json +++ b/docs/pages/x/api/charts/charts-axis.json @@ -3,21 +3,21 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
            | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
            | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" }, "default": "xAxisIds[0] The id of the first provided axis" }, "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
            | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
            | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
            | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
            | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" }, "default": "null" }, @@ -26,7 +26,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
            | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
            | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
            | array
            | func, tickLabelInterval?: 'auto'
            | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
            | string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/charts-reference-line.js b/docs/pages/x/api/charts/charts-reference-line.js new file mode 100644 index 0000000000000..d4424ba41e0cb --- /dev/null +++ b/docs/pages/x/api/charts/charts-reference-line.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './charts-reference-line.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docsx/translations/api-docs/charts', + false, + /\.\/charts-reference-line(-[a-z]{2})?\.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/x/api/charts/charts-reference-line.json b/docs/pages/x/api/charts/charts-reference-line.json new file mode 100644 index 0000000000000..36045f6f118ce --- /dev/null +++ b/docs/pages/x/api/charts/charts-reference-line.json @@ -0,0 +1,42 @@ +{ + "props": { + "axisId": { "type": { "name": "string" }, "default": "The `id` of the first defined axis." }, + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, + "label": { "type": { "name": "string" } }, + "labelAlign": { + "type": { + "name": "enum", + "description": "'end'
            | 'middle'
            | 'start'" + }, + "default": "'middle'" + }, + "labelStyle": { "type": { "name": "object" } }, + "lineStyle": { "type": { "name": "object" } }, + "spacing": { + "type": { + "name": "union", + "description": "number
            | { x?: number, y?: number }" + }, + "default": "5" + }, + "x": { + "type": { "name": "union", "description": "Date
            | number
            | string" } + }, + "y": { + "type": { "name": "union", "description": "Date
            | number
            | string" } + } + }, + "slots": [], + "name": "ChartsReferenceLine", + "imports": [ + "import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';", + "import { ChartsReferenceLine } from '@mui/x-charts';" + ], + "styles": { + "classes": ["root", "vertical", "horizontal", "line", "label"], + "globalClasses": {}, + "name": "MuiChartsReferenceLine" + }, + "filename": "/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx", + "demos": "
              " +} diff --git a/docs/pages/x/api/charts/charts-x-axis.json b/docs/pages/x/api/charts/charts-x-axis.json index 9580898464ea8..3464148ac316f 100644 --- a/docs/pages/x/api/charts/charts-x-axis.json +++ b/docs/pages/x/api/charts/charts-x-axis.json @@ -1,6 +1,6 @@ { "props": { - "axisId": { "type": { "name": "string" }, "required": true }, + "axisId": { "type": { "name": "string" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "disableLine": { "type": { "name": "bool" } }, "disableTicks": { "type": { "name": "bool" } }, diff --git a/docs/pages/x/api/charts/charts-y-axis.json b/docs/pages/x/api/charts/charts-y-axis.json index 24b012f47388b..f0e7874c67c86 100644 --- a/docs/pages/x/api/charts/charts-y-axis.json +++ b/docs/pages/x/api/charts/charts-y-axis.json @@ -1,6 +1,6 @@ { "props": { - "axisId": { "type": { "name": "string" }, "required": true }, + "axisId": { "type": { "name": "string" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "disableLine": { "type": { "name": "bool" } }, "disableTicks": { "type": { "name": "bool" } }, diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index 58f9a9f375d6a..ad4f61d5517db 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
              | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
              | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -14,14 +14,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
              | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
              | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
              | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
              | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" }, "default": "null" }, @@ -30,7 +30,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
              | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
              | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index 89b1b13028991..87a086c5b7a05 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/docs/pages/x/api/charts/pie-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
              | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
              | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -13,14 +13,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
              | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
              | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
              | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
              | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" }, "default": "null" }, @@ -29,7 +29,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
              | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
              | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index c6f231f5a69b7..ed264b3492317 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
              | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
              | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -13,14 +13,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
              | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
              | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
              | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
              | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" }, "default": "null" }, @@ -29,7 +29,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
              | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" + "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
              | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
              | array
              | func, tickLabelInterval?: 'auto'
              | func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
              | string" }, "default": "null" } diff --git a/docs/translations/api-docs/charts/charts-reference-line.json b/docs/translations/api-docs/charts/charts-reference-line.json new file mode 100644 index 0000000000000..dc186914dfa34 --- /dev/null +++ b/docs/translations/api-docs/charts/charts-reference-line.json @@ -0,0 +1,66 @@ +{ + "componentDescription": "", + "propDescriptions": { + "axisId": { + "description": "The id of the axis used for the reference value.", + "deprecated": "", + "typeDescriptions": {} + }, + "classes": { + "description": "Override or extend the styles applied to the component.", + "deprecated": "", + "typeDescriptions": {} + }, + "label": { + "description": "The label to display along the reference line.", + "deprecated": "", + "typeDescriptions": {} + }, + "labelAlign": { + "description": "The alignment if the label is in the chart drawing area.", + "deprecated": "", + "typeDescriptions": {} + }, + "labelStyle": { + "description": "The style applied to the label.", + "deprecated": "", + "typeDescriptions": {} + }, + "lineStyle": { + "description": "The style applied to the line.", + "deprecated": "", + "typeDescriptions": {} + }, + "spacing": { + "description": "Additional space arround the label in px. Can be a number or an object { x, y } to distinguish space with the reference line and space with axes.", + "deprecated": "", + "typeDescriptions": {} + }, + "x": { + "description": "The x value associated with the reference line. If defined the reference line will be vertical.", + "deprecated": "", + "typeDescriptions": {} + }, + "y": { + "description": "The y value associated with the reference line. If defined the reference line will be horizontal.", + "deprecated": "", + "typeDescriptions": {} + } + }, + "classDescriptions": { + "root": { "description": "Styles applied to the root element." }, + "vertical": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "the reference line is vertical" + }, + "horizontal": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "the reference line is horizontal" + }, + "line": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the reference line" }, + "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the reference label" } + }, + "slotDescriptions": {} +} diff --git a/docs/translations/api-docs/charts/charts-x-axis.json b/docs/translations/api-docs/charts/charts-x-axis.json index d7bff24d1bb96..1d470313d7f1d 100644 --- a/docs/translations/api-docs/charts/charts-x-axis.json +++ b/docs/translations/api-docs/charts/charts-x-axis.json @@ -2,7 +2,7 @@ "componentDescription": "", "propDescriptions": { "axisId": { - "description": "Id of the axis to render.", + "description": "The id of the axis to render. If undefined, it will be the first defined axis.", "deprecated": "", "typeDescriptions": {} }, diff --git a/docs/translations/api-docs/charts/charts-y-axis.json b/docs/translations/api-docs/charts/charts-y-axis.json index d7bff24d1bb96..1d470313d7f1d 100644 --- a/docs/translations/api-docs/charts/charts-y-axis.json +++ b/docs/translations/api-docs/charts/charts-y-axis.json @@ -2,7 +2,7 @@ "componentDescription": "", "propDescriptions": { "axisId": { - "description": "Id of the axis to render.", + "description": "The id of the axis to render. If undefined, it will be the first defined axis.", "deprecated": "", "typeDescriptions": {} }, diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index eefa36e2167e1..f489fa3d49ff7 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -178,7 +178,7 @@ BarChart.propTypes = { */ bottomAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -223,7 +223,7 @@ BarChart.propTypes = { */ leftAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -277,7 +277,7 @@ BarChart.propTypes = { */ rightAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -368,7 +368,7 @@ BarChart.propTypes = { */ topAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, diff --git a/packages/x-charts/src/BarChart/BarPlot.tsx b/packages/x-charts/src/BarChart/BarPlot.tsx index b1c89ee87c532..e5e94c3d88580 100644 --- a/packages/x-charts/src/BarChart/BarPlot.tsx +++ b/packages/x-charts/src/BarChart/BarPlot.tsx @@ -143,12 +143,12 @@ const useCompletedData = (): CompletedBarData[] => { layout: series[seriesId].layout, x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex])! + barOffset - : xScale(bottom), - y: verticalLayout ? yScale(top) : yScale(yAxis[yAxisKey].data?.[dataIndex])! + barOffset, - xOrigin: xScale(0), - yOrigin: yScale(0), - height: verticalLayout ? Math.abs(yScale(bottom) - yScale(top)) : barWidth, - width: verticalLayout ? barWidth : Math.abs(xScale(bottom) - xScale(top)), + : xScale(bottom)!, + y: verticalLayout ? yScale(top)! : yScale(yAxis[yAxisKey].data?.[dataIndex])! + barOffset, + xOrigin: xScale(0)!, + yOrigin: yScale(0)!, + height: verticalLayout ? Math.abs(yScale(bottom)! - yScale(top)!) : barWidth, + width: verticalLayout ? barWidth : Math.abs(xScale(bottom)! - xScale(top)!), color, highlightScope: series[seriesId].highlightScope, }; diff --git a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx index 4dff59527bd99..40551a6f7ebdd 100644 --- a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx +++ b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx @@ -55,7 +55,7 @@ const getAxisId = ( return null; } if (typeof propsValue === 'object') { - return propsValue.axisId; + return propsValue.axisId ?? null; } return propsValue; }; @@ -134,7 +134,7 @@ ChartsAxis.propTypes = { */ bottomAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -168,7 +168,7 @@ ChartsAxis.propTypes = { */ leftAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -202,7 +202,7 @@ ChartsAxis.propTypes = { */ rightAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -246,7 +246,7 @@ ChartsAxis.propTypes = { */ topAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, diff --git a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx index 1f773fbb903f1..ef0e1b0624996 100644 --- a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx +++ b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx @@ -6,7 +6,7 @@ import { useThemeProps, useTheme, Theme, styled } from '@mui/material/styles'; import { DrawingArea, DrawingContext } from '../context/DrawingProvider'; import { AnchorPosition, Direction, getSeriesToDisplay } from './utils'; import { FormattedSeries, SeriesContext } from '../context/SeriesContextProvider'; -import { ChartsLegendClasses, getChartsLegendUtilityClass } from './chartsLegendClasses'; +import { ChartsLegendClasses, getLegendUtilityClass } from './chartsLegendClasses'; import { DefaultizedProps } from '../models/helpers'; import { LegendParams } from '../models/seriesType/config'; import { ChartsText, ChartsTextStyle, getWordsByLines } from '../internals/components/ChartsText'; @@ -58,7 +58,7 @@ const useUtilityClasses = (ownerState: DefaultizedChartsLegendProps & { theme: T series: ['series'], }; - return composeClasses(slots, getChartsLegendUtilityClass, classes); + return composeClasses(slots, getLegendUtilityClass, classes); }; export type ChartsLegendRootOwnerState = { diff --git a/packages/x-charts/src/ChartsLegend/chartsLegendClasses.ts b/packages/x-charts/src/ChartsLegend/chartsLegendClasses.ts index cebe5a885a229..5d710e5540569 100644 --- a/packages/x-charts/src/ChartsLegend/chartsLegendClasses.ts +++ b/packages/x-charts/src/ChartsLegend/chartsLegendClasses.ts @@ -20,7 +20,7 @@ export interface ChartsLegendClasses { export type ChartsLegendClassKey = keyof ChartsLegendClasses; -export function getChartsLegendUtilityClass(slot: string) { +export function getLegendUtilityClass(slot: string) { return generateUtilityClass('MuiChartsLegend', slot); } diff --git a/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx b/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx new file mode 100644 index 0000000000000..a8c9f1a6c0694 --- /dev/null +++ b/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx @@ -0,0 +1,82 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { ChartsXReferenceLine, ChartsXReferenceLineProps } from './ChartsXReferenceLine'; +import { ChartsYReferenceLine, ChartsYReferenceLineProps } from './ChartsYReferenceLine'; +import { XOR } from '../internals/utils'; + +type ChartsReferenceLineProps = XOR< + ChartsXReferenceLineProps, + ChartsYReferenceLineProps +>; + +function ChartsReferenceLine(props: ChartsReferenceLineProps) { + if (props.x !== undefined && props.y !== undefined) { + throw new Error('MUI-X: The ChartsReferenceLine can not have both `x` and `y` props set.'); + } + + if (props.x === undefined && props.y === undefined) { + throw new Error('MUI-X: The ChartsReferenceLine should have a value in `x` or `y` prop.'); + } + + if (props.x !== undefined) { + return ; + } + return ; +} + +ChartsReferenceLine.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * The id of the axis used for the reference value. + * @default The `id` of the first defined axis. + */ + axisId: PropTypes.string, + /** + * Override or extend the styles applied to the component. + */ + classes: PropTypes.object, + /** + * The label to display along the reference line. + */ + label: PropTypes.string, + /** + * The alignment if the label is in the chart drawing area. + * @default 'middle' + */ + labelAlign: PropTypes.oneOf(['end', 'middle', 'start']), + /** + * The style applied to the label. + */ + labelStyle: PropTypes.object, + /** + * The style applied to the line. + */ + lineStyle: PropTypes.object, + /** + * Additional space arround the label in px. + * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes. + * @default 5 + */ + spacing: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.shape({ + x: PropTypes.number, + y: PropTypes.number, + }), + ]), + /** + * The x value associated with the reference line. + * If defined the reference line will be vertical. + */ + x: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]), + /** + * The y value associated with the reference line. + * If defined the reference line will be horizontal. + */ + y: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]), +} as any; + +export { ChartsReferenceLine }; diff --git a/packages/x-charts/src/ChartsReferenceLine/ChartsXReferenceLine.tsx b/packages/x-charts/src/ChartsReferenceLine/ChartsXReferenceLine.tsx new file mode 100644 index 0000000000000..1cb83fa8fbe81 --- /dev/null +++ b/packages/x-charts/src/ChartsReferenceLine/ChartsXReferenceLine.tsx @@ -0,0 +1,133 @@ +import * as React from 'react'; +import composeClasses from '@mui/utils/composeClasses'; +import { useDrawingArea, useXScale } from '../hooks'; +import { CommonChartsReferenceLineProps, ReferenceLineRoot } from './common'; +import { ChartsText } from '../internals/components/ChartsText'; +import { + ChartsReferenceLineClasses, + getReferenceLineUtilityClass, +} from './chartsReferenceLineClasses'; + +export type ChartsXReferenceLineProps< + TValue extends string | number | Date = string | number | Date, +> = CommonChartsReferenceLineProps & { + /** + * The x value associated with the reference line. + * If defined the reference line will be vertical. + */ + x: TValue; +}; + +type GetTextPlacementParams = { + top: number; + height: number; + spacingY: number; +} & Pick; + +const getTextParams = ({ + top, + height, + spacingY, + labelAlign = 'middle', +}: GetTextPlacementParams) => { + switch (labelAlign) { + case 'start': + return { + y: top + spacingY, + style: { + dominantBaseline: 'hanging', + textAnchor: 'start', + } as const, + }; + + case 'end': + return { + y: top + height - spacingY, + style: { + dominantBaseline: 'auto', + textAnchor: 'start', + } as const, + }; + + default: + return { + y: top + height / 2, + style: { + dominantBaseline: 'central', + textAnchor: 'start', + } as const, + }; + } +}; + +export function getXReferenceLineClasses(classes?: Partial) { + return composeClasses( + { + root: ['root', 'vertical'], + line: ['line'], + label: ['label'], + }, + getReferenceLineUtilityClass, + classes, + ); +} + +let warnedOnce = false; + +function ChartsXReferenceLine(props: ChartsXReferenceLineProps) { + const { + x, + label = '', + spacing = 5, + classes: inClasses, + labelAlign, + lineStyle, + labelStyle, + axisId, + } = props; + + const { top, height } = useDrawingArea(); + const xAxisScale = useXScale(axisId); + + const xPosition = xAxisScale(x as any); + + if (xPosition === undefined) { + if (process.env.NODE_ENV !== 'production') { + if (!warnedOnce) { + warnedOnce = true; + console.error( + `MUI X: the value ${x} does not exist in the data of x axis with id ${axisId}.`, + ); + } + } + return null; + } + const d = `M ${xPosition} ${top} l 0 ${height}`; + + const classes = getXReferenceLineClasses(inClasses); + + const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing; + const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing; + + const textParams = { + x: xPosition + spacingX, + text: label, + fontSize: 12, + ...getTextParams({ + top, + height, + spacingY, + labelAlign, + }), + className: classes.label, + }; + + return ( + + + + + ); +} + +export { ChartsXReferenceLine }; diff --git a/packages/x-charts/src/ChartsReferenceLine/ChartsYReferenceLine.tsx b/packages/x-charts/src/ChartsReferenceLine/ChartsYReferenceLine.tsx new file mode 100644 index 0000000000000..9486bef8f9813 --- /dev/null +++ b/packages/x-charts/src/ChartsReferenceLine/ChartsYReferenceLine.tsx @@ -0,0 +1,133 @@ +import * as React from 'react'; +import composeClasses from '@mui/utils/composeClasses'; +import { useDrawingArea, useYScale } from '../hooks'; +import { CommonChartsReferenceLineProps, ReferenceLineRoot } from './common'; +import { ChartsText } from '../internals/components/ChartsText'; +import { + ChartsReferenceLineClasses, + getReferenceLineUtilityClass, +} from './chartsReferenceLineClasses'; + +export type ChartsYReferenceLineProps< + TValue extends string | number | Date = string | number | Date, +> = CommonChartsReferenceLineProps & { + /** + * The y value associated with the reference line. + * If defined the reference line will be horizontal. + */ + y: TValue; +}; + +type GetTextPlacementParams = { + left: number; + width: number; + spacingX: number; +} & Pick; + +const getTextParams = ({ + left, + width, + spacingX, + labelAlign = 'middle', +}: GetTextPlacementParams) => { + switch (labelAlign) { + case 'start': + return { + x: left + spacingX, + style: { + dominantBaseline: 'auto', + textAnchor: 'start', + } as const, + }; + + case 'end': + return { + x: left + width - spacingX, + style: { + dominantBaseline: 'auto', + textAnchor: 'end', + } as const, + }; + + default: + return { + x: left + width / 2, + style: { + dominantBaseline: 'auto', + textAnchor: 'middle', + } as const, + }; + } +}; + +let warnedOnce = false; + +export function getYReferenceLineClasses(classes?: Partial) { + return composeClasses( + { + root: ['root', 'horizontal'], + line: ['line'], + label: ['label'], + }, + getReferenceLineUtilityClass, + classes, + ); +} + +function ChartsYReferenceLine(props: ChartsYReferenceLineProps) { + const { + y, + label = '', + spacing = 5, + classes: inClasses, + labelAlign, + lineStyle, + labelStyle, + axisId, + } = props; + + const { left, width } = useDrawingArea(); + const yAxisScale = useYScale(axisId); + + const yPosition = yAxisScale(y as any); + + if (yPosition === undefined) { + if (process.env.NODE_ENV !== 'production') { + if (!warnedOnce) { + warnedOnce = true; + console.error( + `MUI X: the value ${y} does not exist in the data of y axis with id ${axisId}.`, + ); + } + } + return null; + } + + const d = `M ${left} ${yPosition} l ${width} 0`; + + const classes = getYReferenceLineClasses(inClasses); + + const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing; + const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing; + + const textParams = { + y: yPosition - spacingY, + text: label, + fontSize: 12, + ...getTextParams({ + left, + width, + spacingX, + labelAlign, + }), + className: classes.label, + }; + return ( + + + + + ); +} + +export { ChartsYReferenceLine }; diff --git a/packages/x-charts/src/ChartsReferenceLine/chartsReferenceLineClasses.ts b/packages/x-charts/src/ChartsReferenceLine/chartsReferenceLineClasses.ts new file mode 100644 index 0000000000000..882500714bc89 --- /dev/null +++ b/packages/x-charts/src/ChartsReferenceLine/chartsReferenceLineClasses.ts @@ -0,0 +1,26 @@ +import generateUtilityClass from '@mui/utils/generateUtilityClass'; +import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; + +export interface ChartsReferenceLineClasses { + /** Styles applied to the root element. */ + root: string; + /** Styles applied to the root element if the reference line is vertical. */ + vertical: string; + /** Styles applied to the root element if the reference line is horizontal. */ + horizontal: string; + /** Styles applied to the reference line. */ + line: string; + /** Styles applied to the reference label. */ + label: string; +} + +export type ChartsReferenceLineClassKey = keyof ChartsReferenceLineClasses; + +export function getReferenceLineUtilityClass(slot: string) { + return generateUtilityClass('MuiChartsReferenceLine', slot); +} + +export const referenceLineClasses: ChartsReferenceLineClasses = generateUtilityClasses( + 'MuiChartsReferenceLine', + ['root', 'vertical', 'horizontal', 'line', 'label'], +); diff --git a/packages/x-charts/src/ChartsReferenceLine/common.tsx b/packages/x-charts/src/ChartsReferenceLine/common.tsx new file mode 100644 index 0000000000000..535bce12785d0 --- /dev/null +++ b/packages/x-charts/src/ChartsReferenceLine/common.tsx @@ -0,0 +1,55 @@ +import { styled } from '@mui/material/styles'; +import { referenceLineClasses, ChartsReferenceLineClasses } from './chartsReferenceLineClasses'; +import { ChartsTextStyle } from '../internals/components/ChartsText'; + +export type CommonChartsReferenceLineProps = { + /** + * The alignment if the label is in the chart drawing area. + * @default 'middle' + */ + labelAlign?: 'start' | 'middle' | 'end'; + /** + * The label to display along the reference line. + */ + label?: string; + /** + * Additional space arround the label in px. + * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes. + * @default 5 + */ + spacing?: number | { x?: number; y?: number }; + /** + * The id of the axis used for the reference value. + * @default The `id` of the first defined axis. + */ + axisId?: string; + /** + * The style applied to the label. + */ + labelStyle?: ChartsTextStyle; + /** + * The style applied to the line. + */ + lineStyle?: React.CSSProperties; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; +}; + +export const ReferenceLineRoot = styled('g')(({ theme }) => ({ + [`& .${referenceLineClasses.line}`]: { + fill: 'none', + stroke: (theme.vars || theme).palette.text.primary, + shapeRendering: 'crispEdges', + strokeWidth: 1, + pointerEvents: 'none', + }, + [`& .${referenceLineClasses.label}`]: { + fill: (theme.vars || theme).palette.text.primary, + stroke: 'none', + pointerEvents: 'none', + fontSize: 12, + ...theme.typography.body1, + }, +})); diff --git a/packages/x-charts/src/ChartsReferenceLine/index.tsx b/packages/x-charts/src/ChartsReferenceLine/index.tsx new file mode 100644 index 0000000000000..630541c15e4ae --- /dev/null +++ b/packages/x-charts/src/ChartsReferenceLine/index.tsx @@ -0,0 +1,2 @@ +export * from './ChartsReferenceLine'; +export * from './chartsReferenceLineClasses'; diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 98cfdc6b00d3d..2cda7958494ec 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -96,9 +96,10 @@ const defaultProps = { */ function ChartsXAxis(inProps: ChartsXAxisProps) { const props = useThemeProps({ props: { ...defaultProps, ...inProps }, name: 'MuiChartsXAxis' }); + const { xAxisIds } = React.useContext(CartesianContext); const { xAxis: { - [props.axisId]: { scale: xScale, tickNumber, ...settings }, + [props.axisId ?? xAxisIds[0]]: { scale: xScale, tickNumber, ...settings }, }, } = React.useContext(CartesianContext); @@ -233,9 +234,10 @@ ChartsXAxis.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- /** - * Id of the axis to render. + * The id of the axis to render. + * If undefined, it will be the first defined axis. */ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, /** * Override or extend the styles applied to the component. */ diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index 878b08938848a..f22632a0a8a13 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -45,9 +45,10 @@ const defaultProps = { */ function ChartsYAxis(inProps: ChartsYAxisProps) { const props = useThemeProps({ props: { ...defaultProps, ...inProps }, name: 'MuiChartsYAxis' }); + const { yAxisIds } = React.useContext(CartesianContext); const { yAxis: { - [props.axisId]: { scale: yScale, tickNumber, ...settings }, + [props.axisId ?? yAxisIds[0]]: { scale: yScale, tickNumber, ...settings }, }, } = React.useContext(CartesianContext); @@ -168,9 +169,10 @@ ChartsYAxis.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- /** - * Id of the axis to render. + * The id of the axis to render. + * If undefined, it will be the first defined axis. */ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, /** * Override or extend the styles applied to the component. */ diff --git a/packages/x-charts/src/LineChart/AreaPlot.tsx b/packages/x-charts/src/LineChart/AreaPlot.tsx index a27d167230576..100be4eac913d 100644 --- a/packages/x-charts/src/LineChart/AreaPlot.tsx +++ b/packages/x-charts/src/LineChart/AreaPlot.tsx @@ -79,8 +79,8 @@ function AreaPlot(props: AreaPlotProps) { }>() .x((d) => xScale(d.x)) .defined((_, i) => connectNulls || data[i] != null) - .y0((d) => d.y && yScale(d.y[0])) - .y1((d) => d.y && yScale(d.y[1])); + .y0((d) => d.y && yScale(d.y[0])!) + .y1((d) => d.y && yScale(d.y[1])!); const curve = getCurveFactory(series[seriesId].curve); const formattedData = xData?.map((x, index) => ({ x, y: stackedData[index] })) ?? []; diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 704a90cd2db5f..8bffab3521602 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -183,7 +183,7 @@ LineChart.propTypes = { */ bottomAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -231,7 +231,7 @@ LineChart.propTypes = { */ leftAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -285,7 +285,7 @@ LineChart.propTypes = { */ rightAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -384,7 +384,7 @@ LineChart.propTypes = { */ topAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, diff --git a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx index 1feab1b549797..5f043b2f81977 100644 --- a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx +++ b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx @@ -84,7 +84,7 @@ function LineHighlightPlot(props: LineHighlightPlotProps) { ); } const x = xScale(xData[highlightedIndex]); - const y = yScale(stackedData[highlightedIndex][1]); + const y = yScale(stackedData[highlightedIndex][1])!; // This should not be undefined since y should not be a band scale return ( () .x((d) => xScale(d.x)) .defined((_, i) => connectNulls || data[i] != null) - .y((d) => yScale(d.y[1])); + .y((d) => yScale(d.y[1])!); const curve = getCurveFactory(series[seriesId].curve); const formattedData = xData?.map((x, index) => ({ x, y: stackedData[index] })) ?? []; diff --git a/packages/x-charts/src/LineChart/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx index 942a6a3cdb154..670f390d13455 100644 --- a/packages/x-charts/src/LineChart/MarkPlot.tsx +++ b/packages/x-charts/src/LineChart/MarkPlot.tsx @@ -96,7 +96,7 @@ function MarkPlot(props: MarkPlotProps) { const value = data[index] == null ? null : stackedData[index][1]; return { x: xScale(x), - y: value === null ? null : yScale(value), + y: value === null ? null : yScale(value)!, position: x, value, index, @@ -131,7 +131,7 @@ function MarkPlot(props: MarkPlotProps) { shape="circle" color={series[seriesId].color} x={x} - y={y} + y={y!} // Don't knwo why TS don't get from the filter that y can't be null highlightScope={series[seriesId].highlightScope} {...slotProps?.mark} /> diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index 56b8880894bfd..6930d48eca81a 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -157,7 +157,7 @@ PieChart.propTypes = { */ bottomAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -201,7 +201,7 @@ PieChart.propTypes = { */ leftAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -256,7 +256,7 @@ PieChart.propTypes = { */ rightAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -368,7 +368,7 @@ PieChart.propTypes = { */ topAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 75fa84546c919..819e9568141d2 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -136,7 +136,7 @@ ScatterChart.propTypes = { */ bottomAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -180,7 +180,7 @@ ScatterChart.propTypes = { */ leftAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -234,7 +234,7 @@ ScatterChart.propTypes = { */ rightAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, @@ -315,7 +315,7 @@ ScatterChart.propTypes = { */ topAxis: PropTypes.oneOfType([ PropTypes.shape({ - axisId: PropTypes.string.isRequired, + axisId: PropTypes.string, classes: PropTypes.object, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, diff --git a/packages/x-charts/src/index.ts b/packages/x-charts/src/index.ts index df1245089c2fc..c16a933ab1d7e 100644 --- a/packages/x-charts/src/index.ts +++ b/packages/x-charts/src/index.ts @@ -4,6 +4,7 @@ export * from './hooks'; export * from './colorPalettes'; export * from './models'; export * from './ChartsClipPath'; +export * from './ChartsReferenceLine'; export * from './ChartsAxis'; export * from './ChartsXAxis'; export * from './ChartsYAxis'; diff --git a/packages/x-charts/src/internals/isBandScale.ts b/packages/x-charts/src/internals/isBandScale.ts index 3a828d8b9eccb..0479662fd6079 100644 --- a/packages/x-charts/src/internals/isBandScale.ts +++ b/packages/x-charts/src/internals/isBandScale.ts @@ -1,6 +1,8 @@ import type { ScaleBand, ScalePoint } from 'd3-scale'; import { D3Scale } from '../models/axis'; -export function isBandScale(scale: D3Scale): scale is ScaleBand | ScalePoint { - return (scale as ScaleBand | ScalePoint).bandwidth !== undefined; +export function isBandScale( + scale: D3Scale, +): scale is ScaleBand | ScalePoint { + return (scale as ScaleBand | ScalePoint).bandwidth !== undefined; } diff --git a/packages/x-charts/src/internals/utils.ts b/packages/x-charts/src/internals/utils.ts index 72d216c2e02ab..6c1b3ced4f09d 100644 --- a/packages/x-charts/src/internals/utils.ts +++ b/packages/x-charts/src/internals/utils.ts @@ -5,3 +5,6 @@ export function getSymbol(shape: SymbolsTypes): number { return symbolNames.indexOf(shape) || 0; } + +type Without = { [P in Exclude]?: never }; +export type XOR = T | U extends object ? (Without & U) | (Without & T) : T | U; diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index 8180704031af8..ee361350f30e9 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -10,19 +10,23 @@ import { ChartsAxisClasses } from '../ChartsAxis/axisClasses'; import type { TickParams } from '../hooks/useTicks'; import { ChartsTextProps } from '../internals/components/ChartsText'; -export type D3Scale = - | ScaleBand - | ScaleLogarithmic - | ScalePoint - | ScalePower - | ScaleTime - | ScaleLinear; +export type D3Scale< + Domain extends { toString(): string } = number | Date | string, + Range = number, + Output = number, +> = + | ScaleBand + | ScaleLogarithmic + | ScalePoint + | ScalePower + | ScaleTime + | ScaleLinear; -export type D3ContinuouseScale = - | ScaleLogarithmic - | ScalePower - | ScaleTime - | ScaleLinear; +export type D3ContinuouseScale = + | ScaleLogarithmic + | ScalePower + | ScaleTime + | ScaleLinear; export interface ChartsAxisSlotsComponent { axisLine?: React.JSXElementConstructor>; @@ -40,9 +44,10 @@ export interface ChartsAxisSlotComponentProps { export interface ChartsAxisProps extends TickParams { /** - * Id of the axis to render. + * The id of the axis to render. + * If undefined, it will be the first defined axis. */ - axisId: string; + axisId?: string; /** * If true, the axis line is disabled. * @default false @@ -135,7 +140,7 @@ export type ContinuouseScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | interface AxisScaleConfig { band: { scaleType: 'band'; - scale: ScaleBand; + scale: ScaleBand; /** * The ratio between the space allocated for padding between two categories and the category width. * 0 means no gap, and 1 no data. @@ -151,31 +156,31 @@ interface AxisScaleConfig { }; point: { scaleType: 'point'; - scale: ScalePoint; + scale: ScalePoint; }; log: { scaleType: 'log'; - scale: ScaleLogarithmic; + scale: ScaleLogarithmic; }; pow: { scaleType: 'pow'; - scale: ScalePower; + scale: ScalePower; }; sqrt: { scaleType: 'sqrt'; - scale: ScalePower; + scale: ScalePower; }; time: { scaleType: 'time'; - scale: ScaleTime; + scale: ScaleTime; }; utc: { scaleType: 'utc'; - scale: ScaleTime; + scale: ScaleTime; }; linear: { scaleType: 'linear'; - scale: ScaleLinear; + scale: ScaleLinear; }; } diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index c07a57d5614c5..84ced50c79121 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -36,6 +36,9 @@ { "name": "ChartsColorPalette", "kind": "TypeAlias" }, { "name": "ChartsColorPaletteCallback", "kind": "TypeAlias" }, { "name": "ChartsPieSorting", "kind": "TypeAlias" }, + { "name": "ChartsReferenceLine", "kind": "Function" }, + { "name": "ChartsReferenceLineClasses", "kind": "Interface" }, + { "name": "ChartsReferenceLineClassKey", "kind": "TypeAlias" }, { "name": "ChartsTooltip", "kind": "Function" }, { "name": "ChartsTooltipProps", "kind": "TypeAlias" }, { "name": "ChartsTooltipSlotComponentProps", "kind": "Interface" }, @@ -69,6 +72,7 @@ { "name": "getMarkElementUtilityClass", "kind": "Function" }, { "name": "getPieArcLabelUtilityClass", "kind": "Function" }, { "name": "getPieArcUtilityClass", "kind": "Function" }, + { "name": "getReferenceLineUtilityClass", "kind": "Function" }, { "name": "getValueToPositionMapper", "kind": "Function" }, { "name": "HighlightElementClassKey", "kind": "TypeAlias" }, { "name": "HighlightOptions", "kind": "TypeAlias" }, @@ -111,6 +115,7 @@ { "name": "PiePlot", "kind": "Function" }, { "name": "PieSeriesType", "kind": "Interface" }, { "name": "PieValueType", "kind": "TypeAlias" }, + { "name": "referenceLineClasses", "kind": "Variable" }, { "name": "ResponsiveChartContainer", "kind": "Variable" }, { "name": "ResponsiveChartContainerProps", "kind": "TypeAlias" }, { "name": "ScaleName", "kind": "TypeAlias" }, From 266312d26c18254c3226464e866d178c3e406301 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 8 Nov 2023 18:04:51 +0500 Subject: [PATCH 245/262] [DataGrid] Remove deprecated `components` and `componentsProps` (#10911) Signed-off-by: Bilal Shafi Co-authored-by: Andrew Cherniavskii --- docs/data/data-grid/components/components.md | 14 +-- .../export/ExcelExportWithWebWorker.js | 2 +- .../export/ExcelExportWithWebWorker.tsx | 2 +- .../ExcelExportWithWebWorker.tsx.preview | 2 +- .../DisableActionButtonsDataGridPro.js | 2 +- .../DisableActionButtonsDataGridPro.tsx | 2 +- ...isableActionButtonsDataGridPro.tsx.preview | 2 +- .../migration-data-grid-v6.md | 4 +- .../x/api/data-grid/data-grid-premium.json | 10 -- docs/pages/x/api/data-grid/data-grid-pro.json | 10 -- docs/pages/x/api/data-grid/data-grid.json | 10 -- .../api/buildComponentsDocumentation.ts | 8 +- .../api-docs/data-grid/data-grid-premium.json | 10 -- .../api-docs/data-grid/data-grid-pro.json | 10 -- .../api-docs/data-grid/data-grid.json | 10 -- .../src/DataGridPremium/DataGridPremium.tsx | 10 -- .../useDataGridPremiumProps.ts | 16 ++-- .../dataGridPremiumDefaultSlotsComponents.ts | 2 +- .../x-data-grid-premium/src/material/index.ts | 6 +- .../src/models/dataGridPremiumProps.ts | 16 +--- .../models/gridPremiumIconSlotsComponent.ts | 6 +- .../src/models/gridPremiumSlotsComponent.ts | 8 +- .../exportExcel.DataGridPremium.test.tsx | 2 +- .../src/DataGridPro/DataGridPro.tsx | 10 -- .../src/DataGridPro/useDataGridProProps.ts | 16 ++-- .../dataGridProDefaultSlotsComponents.ts | 8 +- .../x-data-grid-pro/src/material/index.ts | 4 +- .../src/models/dataGridProProps.ts | 16 +--- .../src/models/gridProIconSlotsComponent.ts | 4 +- .../src/models/gridProSlotsComponent.ts | 9 +- .../src/tests/columns.DataGridPro.test.tsx | 6 +- .../src/tests/components.DataGridPro.test.tsx | 12 +-- .../tests/detailPanel.DataGridPro.test.tsx | 2 +- .../src/tests/filtering.DataGridPro.test.tsx | 18 ++-- .../x-data-grid/src/DataGrid/DataGrid.tsx | 10 -- .../src/DataGrid/useDataGridProps.ts | 19 ++-- .../GridColumnHeaderSortIcon.tsx | 4 +- .../constants/defaultGridSlotsComponents.ts | 34 +++---- .../src/internals/utils/computeSlots.ts | 15 +-- .../x-data-grid/src/internals/utils/index.ts | 1 - .../src/internals/utils/slotsMigration.ts | 22 ----- .../src/internals/utils/useProps.ts | 13 +-- packages/grid/x-data-grid/src/joy/icons.tsx | 3 +- .../grid/x-data-grid/src/joy/joySlots.tsx | 3 +- .../grid/x-data-grid/src/material/index.ts | 96 +++++++++---------- .../src/models/gridIconSlotsComponent.ts | 71 +++++++------- .../src/models/gridSlotsComponent.ts | 68 ++++++------- packages/grid/x-data-grid/src/models/index.ts | 2 +- .../src/models/props/DataGridProps.ts | 17 +--- .../tests/columnsVisibility.DataGrid.test.tsx | 50 +++++----- .../src/tests/export.DataGrid.test.tsx | 18 ++-- .../src/tests/filtering.DataGrid.test.tsx | 8 +- .../src/tests/layout.DataGrid.test.tsx | 12 +-- ...aGrid.test.tsx => slots.DataGrid.test.tsx} | 30 +++--- .../src/tests/toolbar.DataGrid.test.tsx | 30 +++--- scripts/x-data-grid-premium.exports.json | 3 - scripts/x-data-grid-pro.exports.json | 2 - scripts/x-data-grid.exports.json | 1 - .../DataGrid/NoRowsOverlayWithButton.tsx | 2 +- 59 files changed, 301 insertions(+), 502 deletions(-) delete mode 100644 packages/grid/x-data-grid/src/internals/utils/slotsMigration.ts rename packages/grid/x-data-grid/src/tests/{components.DataGrid.test.tsx => slots.DataGrid.test.tsx} (81%) diff --git a/docs/data/data-grid/components/components.md b/docs/data/data-grid/components/components.md index c64f8c20442ee..6665ba18c9216 100644 --- a/docs/data/data-grid/components/components.md +++ b/docs/data/data-grid/components/components.md @@ -5,7 +5,7 @@ ## Overriding components As part of the customization API, the Data Grid allows you to override internal components with the `slots` prop. -The prop accepts an object of type [`UncapitalizedGridSlotsComponent`](/x/api/data-grid/data-grid/#slots). +The prop accepts an object of type [`GridSlotsComponent`](/x/api/data-grid/data-grid/#slots). If you wish to pass additional props in a component slot, you can do it using the `slotProps` prop. This prop is of type `GridSlotsComponentsProps`. @@ -25,18 +25,6 @@ As an example, you could override the column menu and pass additional props as b /> ``` -:::warning -The `components/componentsProps` API is deprecated and `slots/slotProps` API is preferred. - -Note that the `components` prop used _PascalCase_ for the slot names, while the `slots` prop uses _camelCase_. - -```tsx - // Deprecated - -``` - -::: - ### Interacting with the data grid The grid exposes two hooks to help you to access the data grid data while overriding component slots. diff --git a/docs/data/data-grid/export/ExcelExportWithWebWorker.js b/docs/data/data-grid/export/ExcelExportWithWebWorker.js index b40c0900c7fe9..43d5b3f78e176 100644 --- a/docs/data/data-grid/export/ExcelExportWithWebWorker.js +++ b/docs/data/data-grid/export/ExcelExportWithWebWorker.js @@ -49,7 +49,7 @@ export default function ExcelExportWithWebWorker() { loading={data.rows.length === 0} rowHeight={38} checkboxSelection - components={{ Toolbar: CustomToolbar }} + slots={{ toolbar: CustomToolbar }} onExcelExportStateChange={(newState) => setInProgress(newState === 'pending') } diff --git a/docs/data/data-grid/export/ExcelExportWithWebWorker.tsx b/docs/data/data-grid/export/ExcelExportWithWebWorker.tsx index 73e118d07c18f..bb445408ec51f 100644 --- a/docs/data/data-grid/export/ExcelExportWithWebWorker.tsx +++ b/docs/data/data-grid/export/ExcelExportWithWebWorker.tsx @@ -49,7 +49,7 @@ export default function ExcelExportWithWebWorker() { loading={data.rows.length === 0} rowHeight={38} checkboxSelection - components={{ Toolbar: CustomToolbar }} + slots={{ toolbar: CustomToolbar }} onExcelExportStateChange={(newState) => setInProgress(newState === 'pending') } diff --git a/docs/data/data-grid/export/ExcelExportWithWebWorker.tsx.preview b/docs/data/data-grid/export/ExcelExportWithWebWorker.tsx.preview index 6eed24db1fdc6..190fdbb5c6fc9 100644 --- a/docs/data/data-grid/export/ExcelExportWithWebWorker.tsx.preview +++ b/docs/data/data-grid/export/ExcelExportWithWebWorker.tsx.preview @@ -8,7 +8,7 @@ loading={data.rows.length === 0} rowHeight={38} checkboxSelection - components={{ Toolbar: CustomToolbar }} + slots={{ toolbar: CustomToolbar }} onExcelExportStateChange={(newState) => setInProgress(newState === 'pending') } diff --git a/docs/data/data-grid/filtering/DisableActionButtonsDataGridPro.js b/docs/data/data-grid/filtering/DisableActionButtonsDataGridPro.js index a50239e89e01b..b268af383b0b0 100644 --- a/docs/data/data-grid/filtering/DisableActionButtonsDataGridPro.js +++ b/docs/data/data-grid/filtering/DisableActionButtonsDataGridPro.js @@ -15,7 +15,7 @@ export default function DisableActionButtonsDataGridPro() {
              - +- The deprecated props `components` and `componentsProps` have been removed. Use `slots` and `slotProps` instead. See [components section](/x/react-data-grid/components/) for more details. +- The `getApplyFilterFnV7` in `GridFilterOperator` was renamed to `getApplyFilterFn`. + If you use `getApplyFilterFnV7` directly - rename it to `getApplyFilterFn`. + +- The signature of the function returned by `getApplyFilterFn` has changed for performance reasons: + +```diff + const getApplyFilterFn: GetApplyFilterFn = (filterItem) => { + if (!filterItem.value) { + return null; + } + + const filterRegex = new RegExp(escapeRegExp(filterItem.value), 'i'); +- return (cellParams) => { +- const { value } = cellParams; ++ return (value, row, colDef, apiRef) => { + return value != null ? filterRegex.test(String(value)) : false; + }; + } +``` + +- The `getApplyQuickFilterFnV7` in `GridColDef` was renamed to `getApplyQuickFilterFn`. + If you use `getApplyQuickFilterFnV7` directly - rename it to `getApplyQuickFilterFn`. + +- The signature of the function returned by `getApplyQuickFilterFn` has changed for performance reasons: + +```diff + const getGridStringQuickFilterFn: GetApplyQuickFilterFn = (value) => { + if (!value) { + return null; + } + const filterRegex = new RegExp(escapeRegExp(value), 'i'); +- return (cellParams) => { +- const { formattedValue } = cellParams; ++ return (value, row, column, apiRef) => { ++ let formattedValue = apiRef.current.getRowFormattedValue(row, column); + return formattedValue != null ? filterRegex.test(formattedValue.toString()) : false; + }; + }; +``` ```bash -git push upstream master:docs-v6 -f +git push upstream next:docs-next -f ``` -You can follow the deployment process [on the Netlify Dashboard](https://app.netlify.com/sites/material-ui-x/deploys?filter=docs-v6) -Once deployed, it will be accessible at https://material-ui-x.netlify.app/ for the `docs-v6` deployment. +You can follow the deployment process [on the Netlify Dashboard](https://app.netlify.com/sites/material-ui-x/deploys?filter=docs-next) +Once deployed, it will be accessible at https://material-ui-x.netlify.app/ for the `docs-next` deployment. ### Publish GitHub release From b5a027f8a185f83cc7b02d506ef5dc39d741e7ec Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 9 Nov 2023 16:20:17 +0500 Subject: [PATCH 258/262] [docs] Add `@next` tag to the installation instructions (#10963) --- docs/data/charts/overview/overview.md | 10 +++++++--- docs/data/data-grid/getting-started/getting-started.md | 4 ++++ .../date-pickers/getting-started/getting-started.md | 4 ++++ docs/data/tree-view/getting-started/getting-started.md | 10 +++++++--- .../components/DataGridInstallationInstructions.js | 6 +++--- .../components/PickersInstallationInstructions.js | 4 ++-- 6 files changed, 27 insertions(+), 11 deletions(-) diff --git a/docs/data/charts/overview/overview.md b/docs/data/charts/overview/overview.md index 2436a60783535..f4220baa29a7d 100644 --- a/docs/data/charts/overview/overview.md +++ b/docs/data/charts/overview/overview.md @@ -25,19 +25,23 @@ To modify the styling of charts you can rely on all the MUI styling tools, such ## Getting started +:::warning +The `next` tag is used to download the latest v7 **pre-release** version. +::: + To install this library, run ```bash npm -npm install @mui/x-charts +npm install @mui/x-charts@next ``` ```bash yarn -yarn add @mui/x-charts +yarn add @mui/x-charts@next ``` ```bash pnpm -pnpm add @mui/x-charts +pnpm add @mui/x-charts@next ``` diff --git a/docs/data/data-grid/getting-started/getting-started.md b/docs/data/data-grid/getting-started/getting-started.md index 1503de859a2df..9b1bc24a3ddb6 100644 --- a/docs/data/data-grid/getting-started/getting-started.md +++ b/docs/data/data-grid/getting-started/getting-started.md @@ -6,6 +6,10 @@ Using your favorite package manager, install `@mui/x-data-grid-pro` or `@mui/x-data-grid-premium` for the commercial version, or `@mui/x-data-grid` for the free community version. +:::warning +The `next` tag is used to download the latest v7 **pre-release** version. +::: + {{"component": "modules/components/DataGridInstallationInstructions.js"}} The Data Grid package has a peer dependency on `@mui/material`. diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md index a8d568899bb52..da81844bab88a 100644 --- a/docs/data/date-pickers/getting-started/getting-started.md +++ b/docs/data/date-pickers/getting-started/getting-started.md @@ -18,6 +18,10 @@ Using your favorite package manager, install: - `@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. +:::warning +The `next` tag is used to download the latest v7 **pre-release** version. +::: + {{"component": "modules/components/PickersInstallationInstructions.js"}} :::info diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md index 4d921b1ce5ce7..52ba88a1bfc8c 100644 --- a/docs/data/tree-view/getting-started/getting-started.md +++ b/docs/data/tree-view/getting-started/getting-started.md @@ -14,17 +14,21 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ Using your favorite package manager, install `@mui/x-tree-view`: +:::warning +The `next` tag is used to download the latest v7 **pre-release** version. +::: + ```bash npm -npm install @mui/x-tree-view +npm install @mui/x-tree-view@next ``` ```bash yarn -yarn add @mui/x-tree-view +yarn add @mui/x-tree-view@next ``` ```bash pnpm -pnpm add @mui/x-tree-view +pnpm add @mui/x-tree-view@next ``` diff --git a/docs/src/modules/components/DataGridInstallationInstructions.js b/docs/src/modules/components/DataGridInstallationInstructions.js index ac7d0d07d9322..3deba052a6b9c 100644 --- a/docs/src/modules/components/DataGridInstallationInstructions.js +++ b/docs/src/modules/components/DataGridInstallationInstructions.js @@ -2,9 +2,9 @@ import * as React from 'react'; import InstallationInstructions from './InstallationInstructions'; const packages = { - Community: '@mui/x-data-grid', - Pro: '@mui/x-data-grid-pro', - Premium: '@mui/x-data-grid-premium', + Community: '@mui/x-data-grid@next', + Pro: '@mui/x-data-grid-pro@next', + Premium: '@mui/x-data-grid-premium@next', }; export default function DataGridInstallationInstructions() { diff --git a/docs/src/modules/components/PickersInstallationInstructions.js b/docs/src/modules/components/PickersInstallationInstructions.js index 123fa23345f82..02dc44eea2296 100644 --- a/docs/src/modules/components/PickersInstallationInstructions.js +++ b/docs/src/modules/components/PickersInstallationInstructions.js @@ -2,8 +2,8 @@ import * as React from 'react'; import InstallationInstructions from './InstallationInstructions'; const packages = { - Community: '@mui/x-date-pickers', - Pro: '@mui/x-date-pickers-pro', + Community: '@mui/x-date-pickers@next', + Pro: '@mui/x-date-pickers-pro@next', }; const peerDependency = { From c7682ffd6cd8b9e12e7ffaab8a89e2308c70ccbd Mon Sep 17 00:00:00 2001 From: Lukas Date: Thu, 9 Nov 2023 17:10:51 +0200 Subject: [PATCH 259/262] [pickers] Refine `referenceDate` behavior in views (#10863) --- .../DateCalendar/tests/DateCalendar.test.tsx | 7 +++- .../src/DateCalendar/useCalendarState.tsx | 5 +-- .../describes.DesktopTimePicker.test.tsx | 5 +-- .../src/DigitalClock/DigitalClock.tsx | 21 +++++++--- .../DigitalClock/tests/DigitalClock.test.tsx | 41 +++++++++++++++---- .../tests/describes.DigitalClock.test.tsx | 6 +-- .../tests/describes.MobileTimePicker.test.tsx | 3 +- .../src/MonthCalendar/MonthCalendar.tsx | 12 +++--- .../tests/MonthCalendar.test.tsx | 6 +++ .../tests/describes.MonthCalendar.test.tsx | 18 ++++---- .../MultiSectionDigitalClock.tsx | 3 ++ .../MultiSectionDigitalClock.types.ts | 1 + .../MultiSectionDigitalClock.utils.ts | 23 ++++++++--- .../MultiSectionDigitalClockSection.tsx | 25 ++++++----- .../tests/MultiSectionDigitalClock.test.tsx | 21 +++++++++- .../tests/describes.TimeField.test.tsx | 3 +- .../src/YearCalendar/YearCalendar.tsx | 13 +++--- .../YearCalendar/tests/YearCalendar.test.tsx | 6 +++ .../tests/describes.YearCalendar.test.tsx | 18 ++++---- test/utils/pickers/misc.ts | 8 ++++ test/utils/pickers/viewHandlers.ts | 6 +-- 21 files changed, 169 insertions(+), 82 deletions(-) diff --git a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx index b3f59b8078769..41042aaf6049f 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx @@ -183,14 +183,17 @@ describe('', () => { render( , ); + // should make the reference day firstly focusable + expect(screen.getByRole('gridcell', { name: '17' })).to.have.attribute('tabindex', '0'); + userEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); expect(onChange.callCount).to.equal(1); - expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2018, 0, 2, 12, 30)); + expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 3, 2, 12, 30)); }); it('should not use `referenceDate` when a value is defined', () => { diff --git a/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx b/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx index 1754dc47f8ac6..440fa628f4dd6 100644 --- a/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx +++ b/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import useEventCallback from '@mui/utils/useEventCallback'; import { SlideDirection } from './PickersSlideTransition'; import { useIsDateDisabled } from './useIsDateDisabled'; -import { useUtils, useNow } from '../internals/hooks/useUtils'; +import { useUtils } from '../internals/hooks/useUtils'; import { MuiPickersAdapter, PickersTimezone } from '../models'; import { DateCalendarDefaultizedProps } from './DateCalendar.types'; import { singleItemValueManager } from '../internals/utils/valueManagers'; @@ -127,7 +127,6 @@ export const useCalendarState = (params: UseCalendarState timezone, } = params; - const now = useNow(timezone); const utils = useUtils(); const reducerFn = React.useRef( @@ -162,7 +161,7 @@ export const useCalendarState = (params: UseCalendarState const [calendarState, dispatch] = React.useReducer(reducerFn, { isMonthSwitchingAnimating: false, - focusedDay: value || now, + focusedDay: referenceDate, currentMonth: utils.startOfMonth(referenceDate), slideDirection: 'left', }); diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx index 7ed56f2cf6156..7259992a7c8dd 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx @@ -10,6 +10,7 @@ import { describeValidation, describeValue, describePicker, + formatFullTimeValue, } from 'test/utils/pickers'; import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker'; @@ -68,9 +69,7 @@ describe(' - Describes', () => { } expectInputValue( input, - expectedValue - ? adapterToUse.format(expectedValue, hasMeridiem ? 'fullTime12h' : 'fullTime24h') - : '', + expectedValue ? formatFullTimeValue(adapterToUse, expectedValue) : '', ); }, setNewValue: (value, { isOpened, applySameValue, selectSection }) => { diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx index 67dda956330bb..720f52747c141 100644 --- a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx +++ b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx @@ -202,14 +202,17 @@ export const DigitalClock = React.forwardRef(function DigitalClock( - '[role="listbox"] [role="option"][aria-selected="true"]', + const activeItem = containerRef.current.querySelector( + '[role="listbox"] [role="option"][tabindex="0"], [role="listbox"] [role="option"][aria-selected="true"]', ); - if (!selectedItem) { + if (!activeItem) { return; } - const offsetTop = selectedItem.offsetTop; + const offsetTop = activeItem.offsetTop; + if (autoFocus || !!focusedView) { + activeItem.focus(); + } // Subtracting the 4px of extra margin intended for the first visible section item containerRef.current.scrollTop = offsetTop - 4; @@ -281,6 +284,10 @@ export const DigitalClock = React.forwardRef(function DigitalClock + utils.isEqual(option, valueOrReferenceDate), + ); + return ( - {timeOptions.map((option) => { + {timeOptions.map((option, index) => { if (skipDisabled && isTimeDisabled(option)) { return null; } const isSelected = utils.isEqual(option, value); + const tabIndex = + focusedOptionIndex === index || (focusedOptionIndex === -1 && index === 0) ? 0 : -1; return ( {utils.format(option, ampm ? 'fullTime12h' : 'fullTime24h')} diff --git a/packages/x-date-pickers/src/DigitalClock/tests/DigitalClock.test.tsx b/packages/x-date-pickers/src/DigitalClock/tests/DigitalClock.test.tsx index 0df3c3fee7472..6002e825f08ef 100644 --- a/packages/x-date-pickers/src/DigitalClock/tests/DigitalClock.test.tsx +++ b/packages/x-date-pickers/src/DigitalClock/tests/DigitalClock.test.tsx @@ -2,7 +2,13 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { DigitalClock } from '@mui/x-date-pickers/DigitalClock'; -import { adapterToUse, createPickerRenderer, digitalClockHandler } from 'test/utils/pickers'; +import { + adapterToUse, + createPickerRenderer, + digitalClockHandler, + formatFullTimeValue, +} from 'test/utils/pickers'; +import { screen } from '@mui-internal/test-utils'; describe('', () => { const { render } = createPickerRenderer(); @@ -10,13 +16,22 @@ describe('', () => { describe('Reference date', () => { it('should use `referenceDate` when no value defined', () => { const onChange = spy(); + const referenceDate = new Date(2018, 0, 1, 12, 30); - render( - , - ); + render(); + + // the first item should not be initially focusable when `referenceDate` is defined + expect( + screen.getByRole('option', { + name: formatFullTimeValue(adapterToUse, new Date(2018, 0, 1, 0, 0, 0)), + }), + ).to.have.attribute('tabindex', '-1'); + // check that the relevant time based on the `referenceDate` is focusable + expect( + screen.getByRole('option', { + name: formatFullTimeValue(adapterToUse, referenceDate), + }), + ).to.have.attribute('tabindex', '0'); digitalClockHandler.setViewValue( adapterToUse, @@ -26,6 +41,18 @@ describe('', () => { expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2018, 0, 1, 15, 30)); }); + it('should fallback to making the first entry focusable when `referenceDate` does not map to any option', () => { + const referenceDate = new Date(2018, 0, 1, 12, 33); + + render(); + + expect( + screen.getByRole('option', { + name: formatFullTimeValue(adapterToUse, new Date(2018, 0, 1, 0, 0, 0)), + }), + ).to.have.attribute('tabindex', '0'); + }); + it('should not use `referenceDate` when a value is defined', () => { const onChange = spy(); diff --git a/packages/x-date-pickers/src/DigitalClock/tests/describes.DigitalClock.test.tsx b/packages/x-date-pickers/src/DigitalClock/tests/describes.DigitalClock.test.tsx index 32ef3633fe3b4..45050c55ae149 100644 --- a/packages/x-date-pickers/src/DigitalClock/tests/describes.DigitalClock.test.tsx +++ b/packages/x-date-pickers/src/DigitalClock/tests/describes.DigitalClock.test.tsx @@ -8,6 +8,7 @@ import { digitalClockHandler, describeValidation, describeValue, + formatFullTimeValue, } from 'test/utils/pickers'; import { DigitalClock } from '@mui/x-date-pickers/DigitalClock'; @@ -56,14 +57,11 @@ describe(' - Describes', () => { emptyValue: null, clock, assertRenderedValue: (expectedValue: any) => { - const hasMeridiem = adapterToUse.is12HourCycleInCurrentLocale(); const selectedItem = screen.queryByRole('option', { selected: true }); if (!expectedValue) { expect(selectedItem).to.equal(null); } else { - expect(selectedItem).to.have.text( - adapterToUse.format(expectedValue, hasMeridiem ? 'fullTime12h' : 'fullTime24h'), - ); + expect(selectedItem).to.have.text(formatFullTimeValue(adapterToUse, expectedValue)); } }, setNewValue: (value) => { diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx index 4ea3654013c26..7d06143444916 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx @@ -17,6 +17,7 @@ import { describeValidation, describeValue, describePicker, + formatFullTimeValue, } from 'test/utils/pickers'; import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker'; @@ -73,7 +74,7 @@ describe(' - Describes', () => { expectInputPlaceholder(input, hasMeridiem ? 'hh:mm aa' : 'hh:mm'); } const expectedValueStr = expectedValue - ? adapterToUse.format(expectedValue, hasMeridiem ? 'fullTime12h' : 'fullTime24h') + ? formatFullTimeValue(adapterToUse, expectedValue) : ''; expectInputValue(input, expectedValueStr); diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx index a884d19452aa7..2ee5130f4226b 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx @@ -144,13 +144,11 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar( return utils.getMonth(value); } - if (disableHighlightToday) { - return null; - } - - return utils.getMonth(referenceDate); - }, [value, utils, disableHighlightToday, referenceDate]); - const [focusedMonth, setFocusedMonth] = React.useState(() => selectedMonth || todayMonth); + return null; + }, [value, utils]); + const [focusedMonth, setFocusedMonth] = React.useState( + () => selectedMonth || utils.getMonth(referenceDate), + ); const [internalHasFocus, setInternalHasFocus] = useControlled({ name: 'MonthCalendar', diff --git a/packages/x-date-pickers/src/MonthCalendar/tests/MonthCalendar.test.tsx b/packages/x-date-pickers/src/MonthCalendar/tests/MonthCalendar.test.tsx index 398e6c51f78b2..4bcf96e6fbe47 100644 --- a/packages/x-date-pickers/src/MonthCalendar/tests/MonthCalendar.test.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/tests/MonthCalendar.test.tsx @@ -169,5 +169,11 @@ describe('', () => { expect(january).not.to.have.attribute('disabled'); expect(february).to.have.attribute('disabled'); }); + + it('should not mark the `referenceDate` month as selected', () => { + render(); + + expect(screen.getByRole('radio', { name: 'February', checked: false })).to.not.equal(null); + }); }); }); diff --git a/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx b/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx index 89ddd554b862e..8cd311f7422b9 100644 --- a/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx @@ -8,11 +8,7 @@ import { describeValidation, describeValue, } from 'test/utils/pickers'; -import { - MonthCalendar, - monthCalendarClasses as classes, - pickersMonthClasses, -} from '@mui/x-date-pickers/MonthCalendar'; +import { MonthCalendar, monthCalendarClasses as classes } from '@mui/x-date-pickers/MonthCalendar'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ clock: 'fake' }); @@ -42,17 +38,19 @@ describe(' - Describes', () => { emptyValue: null, clock, assertRenderedValue: (expectedValue: any) => { - const selectedCells = document.querySelectorAll(`.${pickersMonthClasses.selected}`); + const activeMonth = screen + .queryAllByRole('radio') + .find((cell) => cell.getAttribute('tabindex') === '0'); + expect(activeMonth).not.to.equal(null); if (expectedValue == null) { - expect(selectedCells).to.have.length(1); - expect(selectedCells[0]).to.have.text( + expect(activeMonth).to.have.text( adapterToUse.format(adapterToUse.date(), 'monthShort').toString(), ); } else { - expect(selectedCells).to.have.length(1); - expect(selectedCells[0]).to.have.text( + expect(activeMonth).to.have.text( adapterToUse.format(expectedValue, 'monthShort').toString(), ); + expect(activeMonth).to.have.attribute('aria-checked', 'true'); } }, setNewValue: (value) => { diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx index 30f2d2a3a190f..9f083eac67783 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx @@ -302,6 +302,7 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi isDisabled: (hours) => disabled || isTimeDisabled(hours, 'hours'), timeStep: timeSteps.hours, resolveAriaLabel: localeText.hoursClockNumberText, + valueOrReferenceDate, }), }; } @@ -348,12 +349,14 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi value: 'am', label: amLabel, isSelected: () => !!value && meridiemMode === 'am', + isFocused: () => !!valueOrReferenceDate && meridiemMode === 'am', ariaLabel: amLabel, }, { value: 'pm', label: pmLabel, isSelected: () => !!value && meridiemMode === 'pm', + isFocused: () => !!valueOrReferenceDate && meridiemMode === 'pm', ariaLabel: pmLabel, }, ], diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts index 6c378405a841a..ac0b3e6aa4f2b 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts @@ -12,6 +12,7 @@ import { TimeViewWithMeridiem } from '../internals/models'; export interface MultiSectionDigitalClockOption { isDisabled?: (value: TValue) => boolean; isSelected: (value: TValue) => boolean; + isFocused: (value: TValue) => boolean; label: string; value: TValue; ariaLabel: string; diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.ts b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.ts index da44fac419543..25ed52dfd2046 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.ts +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.ts @@ -9,6 +9,7 @@ interface IGetHoursSectionOptions { isDisabled: (value: number) => boolean; timeStep: number; resolveAriaLabel: (value: string) => string; + valueOrReferenceDate: TDate; } export const getHourSectionOptions = ({ @@ -19,25 +20,31 @@ export const getHourSectionOptions = ({ isDisabled, resolveAriaLabel, timeStep, + valueOrReferenceDate, }: IGetHoursSectionOptions): MultiSectionDigitalClockOption[] => { const currentHours = value ? utils.getHours(value) : null; const result: MultiSectionDigitalClockOption[] = []; - const isSelected = (hour: number) => { - if (currentHours === null) { + const isSelected = (hour: number, overriddenCurrentHours?: number) => { + const resolvedCurrentHours = overriddenCurrentHours ?? currentHours; + if (resolvedCurrentHours === null) { return false; } if (ampm) { if (hour === 12) { - return currentHours === 12 || currentHours === 0; + return resolvedCurrentHours === 12 || resolvedCurrentHours === 0; } - return currentHours === hour || currentHours - 12 === hour; + return resolvedCurrentHours === hour || resolvedCurrentHours - 12 === hour; } - return currentHours === hour; + return resolvedCurrentHours === hour; + }; + + const isFocused = (hour: number) => { + return isSelected(hour, utils.getHours(valueOrReferenceDate)); }; const endHour = ampm ? 11 : 23; @@ -52,6 +59,7 @@ export const getHourSectionOptions = ({ label, isSelected, isDisabled, + isFocused, ariaLabel, }); } @@ -83,6 +91,10 @@ export const getTimeSectionOptions = ({ return hasValue && value === timeValue; }; + const isFocused = (timeValue: number) => { + return value === timeValue; + }; + return [ ...Array.from({ length: Math.ceil(60 / timeStep) }, (_, index) => { const timeValue = timeStep * index; @@ -91,6 +103,7 @@ export const getTimeSectionOptions = ({ label: resolveLabel(timeValue), isDisabled, isSelected, + isFocused, ariaLabel: resolveAriaLabel(timeValue.toString()), }; }), diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx index a81d4bd167faf..becbdcf81de64 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx @@ -121,7 +121,7 @@ export const MultiSectionDigitalClockSection = React.forwardRef( ) { const containerRef = React.useRef(null); const handleRef = useForkRef(ref, containerRef); - const previousSelected = React.useRef(null); + const previousActive = React.useRef(null); const props = useThemeProps({ props: inProps, @@ -154,26 +154,28 @@ export const MultiSectionDigitalClockSection = React.forwardRef( if (containerRef.current === null) { return; } - const selectedItem = containerRef.current.querySelector( - '[role="option"][aria-selected="true"]', + const activeItem = containerRef.current.querySelector( + '[role="option"][tabindex="0"], [role="option"][aria-selected="true"]', ); - if (!selectedItem || previousSelected.current === selectedItem) { + if (!activeItem || previousActive.current === activeItem) { // Handle setting the ref to null if the selected item is ever reset via UI - if (previousSelected.current !== selectedItem) { - previousSelected.current = selectedItem; + if (previousActive.current !== activeItem) { + previousActive.current = activeItem; } return; } - previousSelected.current = selectedItem; + previousActive.current = activeItem; if (active && autoFocus) { - selectedItem.focus(); + activeItem.focus(); } - const offsetTop = selectedItem.offsetTop; + const offsetTop = activeItem.offsetTop; // Subtracting the 4px of extra margin intended for the first visible section item containerRef.current.scrollTop = offsetTop - 4; }); + const focusedOptionIndex = items.findIndex((item) => item.isFocused(item.value)); + return ( - {items.map((option) => { + {items.map((option, index) => { if (skipDisabled && option.isDisabled?.(option.value)) { return null; } const isSelected = option.isSelected(option.value); + const tabIndex = + focusedOptionIndex === index || (focusedOptionIndex === -1 && index === 0) ? 0 : -1; return ( {option.label} diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/MultiSectionDigitalClock.test.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/MultiSectionDigitalClock.test.tsx index ec9da34386c2a..1b5fea603f38d 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/MultiSectionDigitalClock.test.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/MultiSectionDigitalClock.test.tsx @@ -10,6 +10,7 @@ import { adapterToUse, multiSectionDigitalClockHandler, } from 'test/utils/pickers'; +import { screen } from '@mui-internal/test-utils'; describe('', () => { const { render } = createPickerRenderer(); @@ -17,14 +18,24 @@ describe('', () => { describe('Reference date', () => { it('should use `referenceDate` when no value defined', () => { const onChange = spy(); + const referenceDate = new Date(2018, 0, 1, 13, 30); render( , ); + // the first section items should not be initially focusable when `referenceDate` is defined + expect(screen.getByRole('option', { name: '12 hours' })).to.have.attribute('tabindex', '-1'); + expect(screen.getByRole('option', { name: '0 minutes' })).to.have.attribute('tabindex', '-1'); + expect(screen.getByRole('option', { name: 'AM' })).to.have.attribute('tabindex', '-1'); + // check that the relevant time based on the `referenceDate` is focusable + expect(screen.getByRole('option', { name: '1 hours' })).to.have.attribute('tabindex', '0'); + expect(screen.getByRole('option', { name: '30 minutes' })).to.have.attribute('tabindex', '0'); + expect(screen.getByRole('option', { name: 'PM' })).to.have.attribute('tabindex', '0'); + multiSectionDigitalClockHandler.setViewValue( adapterToUse, adapterToUse.setMinutes(adapterToUse.setHours(adapterToUse.date(), 15), 30), @@ -33,6 +44,14 @@ describe('', () => { expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2018, 0, 1, 15, 30)); }); + it('should fallback to making the first entry focusable when `referenceDate` does not map to an option', () => { + const referenceDate = new Date(2018, 0, 1, 13, 33); + + render(); + + expect(screen.getByRole('option', { name: '0 minutes' })).to.have.attribute('tabindex', '0'); + }); + it('should not use `referenceDate` when a value is defined', () => { const onChange = spy(); diff --git a/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx b/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx index f114972a5fb5d..04b67aaa2975c 100644 --- a/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx +++ b/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx @@ -7,6 +7,7 @@ import { getTextbox, describeValidation, describeValue, + formatFullTimeValue, } from 'test/utils/pickers'; import { TimeField } from '@mui/x-date-pickers/TimeField'; @@ -33,7 +34,7 @@ describe(' - Describes', () => { expectInputPlaceholder(input, hasMeridiem ? 'hh:mm aa' : 'hh:mm'); } const expectedValueStr = expectedValue - ? adapterToUse.format(expectedValue, hasMeridiem ? 'fullTime12h' : 'fullTime24h') + ? formatFullTimeValue(adapterToUse, expectedValue) : ''; expectInputValue(input, expectedValueStr); }, diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx index bf6b925ac9c38..38752aba87560 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx @@ -148,15 +148,12 @@ export const YearCalendar = React.forwardRef(function YearCalendar( if (value != null) { return utils.getYear(value); } + return null; + }, [value, utils]); - if (disableHighlightToday) { - return null; - } - - return utils.getYear(referenceDate); - }, [value, utils, disableHighlightToday, referenceDate]); - - const [focusedYear, setFocusedYear] = React.useState(() => selectedYear || todayYear); + const [focusedYear, setFocusedYear] = React.useState( + () => selectedYear || utils.getYear(referenceDate), + ); const [internalHasFocus, setInternalHasFocus] = useControlled({ name: 'YearCalendar', 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 3d979bd7f2ce8..17528fb8c8bba 100644 --- a/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx +++ b/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx @@ -169,4 +169,10 @@ describe('', () => { expect(year2019).not.to.have.attribute('disabled'); expect(year2020).to.have.attribute('disabled'); }); + + it('should not mark the `referenceDate` year as selected', () => { + render(); + + expect(screen.getByRole('radio', { name: '2018', checked: false })).to.not.equal(null); + }); }); diff --git a/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx b/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx index 7aaf18d0752a0..a46fee1e629b0 100644 --- a/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx +++ b/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx @@ -1,11 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { userEvent, screen, describeConformance } from '@mui-internal/test-utils'; -import { - pickersYearClasses, - YearCalendar, - yearCalendarClasses as classes, -} from '@mui/x-date-pickers/YearCalendar'; +import { YearCalendar, yearCalendarClasses as classes } from '@mui/x-date-pickers/YearCalendar'; import { wrapPickerMount, createPickerRenderer, @@ -44,13 +40,15 @@ describe(' - Describes', () => { emptyValue: null, clock, assertRenderedValue: (expectedValue: any) => { - const selectedCells = document.querySelectorAll(`.${pickersYearClasses.selected}`); + const activeYear = screen + .queryAllByRole('radio') + .find((cell) => cell.getAttribute('tabindex') === '0'); + expect(activeYear).not.to.equal(null); if (expectedValue == null) { - expect(selectedCells).to.have.length(1); - expect(selectedCells[0]).to.have.text(adapterToUse.getYear(adapterToUse.date()).toString()); + expect(activeYear).to.have.text(adapterToUse.getYear(adapterToUse.date()).toString()); } else { - expect(selectedCells).to.have.length(1); - expect(selectedCells[0]).to.have.text(adapterToUse.getYear(expectedValue).toString()); + expect(activeYear).to.have.text(adapterToUse.getYear(expectedValue).toString()); + expect(activeYear).to.have.attribute('aria-checked', 'true'); } }, setNewValue: (value) => { diff --git a/test/utils/pickers/misc.ts b/test/utils/pickers/misc.ts index 49f70d50991fd..97a08af557017 100644 --- a/test/utils/pickers/misc.ts +++ b/test/utils/pickers/misc.ts @@ -56,3 +56,11 @@ export const getDateOffset = ( const cleanUtcHour = utcHour > 12 ? 24 - utcHour : -utcHour; return cleanUtcHour * 60; }; + +export const formatFullTimeValue = ( + adapter: MuiPickersAdapter, + value: TDate, +) => { + const hasMeridiem = adapter.is12HourCycleInCurrentLocale(); + return adapter.format(value, hasMeridiem ? 'fullTime12h' : 'fullTime24h'); +}; diff --git a/test/utils/pickers/viewHandlers.ts b/test/utils/pickers/viewHandlers.ts index 0496eab0ef774..8a723c2bf2c7f 100644 --- a/test/utils/pickers/viewHandlers.ts +++ b/test/utils/pickers/viewHandlers.ts @@ -1,5 +1,5 @@ import { fireTouchChangedEvent, userEvent, screen } from '@mui-internal/test-utils'; -import { getClockTouchEvent } from 'test/utils/pickers'; +import { getClockTouchEvent, formatFullTimeValue } from 'test/utils/pickers'; import { MuiPickersAdapter, TimeView } from '@mui/x-date-pickers/models'; import { formatMeridiem } from '@mui/x-date-pickers/internals/utils/date-utils'; @@ -35,9 +35,7 @@ export const timeClockHandler: ViewHandler = { export const digitalClockHandler: ViewHandler = { setViewValue: (adapter, value) => { - const hasMeridiem = adapter.is12HourCycleInCurrentLocale(); - const formattedLabel = adapter.format(value, hasMeridiem ? 'fullTime12h' : 'fullTime24h'); - userEvent.mousePress(screen.getByRole('option', { name: formattedLabel })); + userEvent.mousePress(screen.getByRole('option', { name: formatFullTimeValue(adapter, value) })); }, }; From 352aa22e9224214fffcbad1871ed1fac8a59e431 Mon Sep 17 00:00:00 2001 From: Lukas Date: Thu, 9 Nov 2023 17:22:04 +0200 Subject: [PATCH 260/262] [codemod] Add `v7.0.0/preset-safe` (#10973) --- .../data-grid/preset-safe/actual.spec.js | 44 +++++++++++++++++++ .../data-grid/preset-safe/expected.spec.js | 44 +++++++++++++++++++ .../src/v7.0.0/data-grid/preset-safe/index.ts | 9 ++++ .../data-grid/preset-safe/preset-safe.test.ts | 27 ++++++++++++ .../v7.0.0/pickers/preset-safe/actual.spec.js | 28 ++++++++++++ .../pickers/preset-safe/expected.spec.js | 28 ++++++++++++ .../pickers/preset-safe/preset-safe.test.ts | 41 +++++++++++++++++ .../src/v7.0.0/preset-safe/actual.spec.js | 29 ++++++++++++ .../src/v7.0.0/preset-safe/expected.spec.js | 29 ++++++++++++ .../x-codemod/src/v7.0.0/preset-safe/index.ts | 10 +++++ .../v7.0.0/preset-safe/preset-safe.test.ts | 27 ++++++++++++ 11 files changed, 316 insertions(+) create mode 100644 packages/x-codemod/src/v7.0.0/data-grid/preset-safe/actual.spec.js create mode 100644 packages/x-codemod/src/v7.0.0/data-grid/preset-safe/expected.spec.js create mode 100644 packages/x-codemod/src/v7.0.0/data-grid/preset-safe/index.ts create mode 100644 packages/x-codemod/src/v7.0.0/data-grid/preset-safe/preset-safe.test.ts create mode 100644 packages/x-codemod/src/v7.0.0/pickers/preset-safe/actual.spec.js create mode 100644 packages/x-codemod/src/v7.0.0/pickers/preset-safe/expected.spec.js create mode 100644 packages/x-codemod/src/v7.0.0/pickers/preset-safe/preset-safe.test.ts create mode 100644 packages/x-codemod/src/v7.0.0/preset-safe/actual.spec.js create mode 100644 packages/x-codemod/src/v7.0.0/preset-safe/expected.spec.js create mode 100644 packages/x-codemod/src/v7.0.0/preset-safe/index.ts create mode 100644 packages/x-codemod/src/v7.0.0/preset-safe/preset-safe.test.ts diff --git a/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/actual.spec.js b/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/actual.spec.js new file mode 100644 index 0000000000000..553e1e65709d5 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/actual.spec.js @@ -0,0 +1,44 @@ +import { DataGrid, CustomToolbar } from '@mui/x-data-grid'; +import { DataGridPro } from '@mui/x-data-grid-pro'; +import { DataGridPremium } from '@mui/x-data-grid-premium'; +import { Button, Checkbox, TextField } from '@mui/material'; + +export default function App() { + return ( +
              + + + { + alert('clicked'); + }, + }, + }} + /> +
              + ); +}; diff --git a/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/expected.spec.js b/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/expected.spec.js new file mode 100644 index 0000000000000..d0b73a667a418 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/expected.spec.js @@ -0,0 +1,44 @@ +import { DataGrid, CustomToolbar } from '@mui/x-data-grid'; +import { DataGridPro } from '@mui/x-data-grid-pro'; +import { DataGridPremium } from '@mui/x-data-grid-premium'; +import { Button, Checkbox, TextField } from '@mui/material'; + +export default function App() { + return ( +
              + + + { + alert('clicked'); + }, + }, + }} + /> +
              + ); +}; diff --git a/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/index.ts b/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/index.ts new file mode 100644 index 0000000000000..377e76d01e490 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/index.ts @@ -0,0 +1,9 @@ +import transformRenameComponentsToSlots from '../../../v6.0.0/data-grid/rename-components-to-slots'; + +import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; + +export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { + file.source = transformRenameComponentsToSlots(file, api, options); + + return file.source; +} diff --git a/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/preset-safe.test.ts b/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/preset-safe.test.ts new file mode 100644 index 0000000000000..4dce7e1a6d4fa --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/data-grid/preset-safe/preset-safe.test.ts @@ -0,0 +1,27 @@ +import path from 'path'; +import { expect } from 'chai'; +import jscodeshift from 'jscodeshift'; +import transform from '.'; +import readFile from '../../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('v7.0.0/data-grid', () => { + describe('preset-safe', () => { + it('transforms code as needed', () => { + const actual = transform({ source: read('./actual.spec.js') }, { jscodeshift }, {}); + + const expected = read('./expected.spec.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform({ source: read('./actual.spec.js') }, { jscodeshift }, {}); + + const expected = read('./expected.spec.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); +}); diff --git a/packages/x-codemod/src/v7.0.0/pickers/preset-safe/actual.spec.js b/packages/x-codemod/src/v7.0.0/pickers/preset-safe/actual.spec.js new file mode 100644 index 0000000000000..096171f37cdaa --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/pickers/preset-safe/actual.spec.js @@ -0,0 +1,28 @@ +import { DatePicker } from '@mui/x-date-pickers'; +import { DateRangePicker } from '@mui/x-date-pickers-pro'; +import TextField from '@mui/material/TextField'; + +
              + + + +
              ; diff --git a/packages/x-codemod/src/v7.0.0/pickers/preset-safe/expected.spec.js b/packages/x-codemod/src/v7.0.0/pickers/preset-safe/expected.spec.js new file mode 100644 index 0000000000000..7f0072e176083 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/pickers/preset-safe/expected.spec.js @@ -0,0 +1,28 @@ +import { DatePicker } from '@mui/x-date-pickers'; +import { DateRangePicker } from '@mui/x-date-pickers-pro'; +import TextField from '@mui/material/TextField'; + +
              + + + +
              ; diff --git a/packages/x-codemod/src/v7.0.0/pickers/preset-safe/preset-safe.test.ts b/packages/x-codemod/src/v7.0.0/pickers/preset-safe/preset-safe.test.ts new file mode 100644 index 0000000000000..09d3f402b08ed --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/pickers/preset-safe/preset-safe.test.ts @@ -0,0 +1,41 @@ +import path from 'path'; +import { expect } from 'chai'; +import jscodeshift from 'jscodeshift'; +import transform from './index'; +import readFile from '../../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('v7.0.0/pickers', () => { + describe('preset-safe', () => { + it('transforms code as needed', () => { + const actual = transform( + { + source: read('./actual.spec.js'), + path: require.resolve('./actual.spec.js'), + }, + { jscodeshift }, + {}, + ); + + const expected = read('./expected.spec.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent for expression', () => { + const actual = transform( + { + source: read('./expected.spec.js'), + path: require.resolve('./expected.spec.js'), + }, + { jscodeshift }, + {}, + ); + + const expected = read('./expected.spec.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); +}); diff --git a/packages/x-codemod/src/v7.0.0/preset-safe/actual.spec.js b/packages/x-codemod/src/v7.0.0/preset-safe/actual.spec.js new file mode 100644 index 0000000000000..41a0a692723b6 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/preset-safe/actual.spec.js @@ -0,0 +1,29 @@ +import * as React from 'react'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +import { DataGrid } from '@mui/x-data-grid/DataGrid'; + +const theme = createTheme({}); + +function App() { + return ( + + + + + + + ); +} + +export default App; diff --git a/packages/x-codemod/src/v7.0.0/preset-safe/expected.spec.js b/packages/x-codemod/src/v7.0.0/preset-safe/expected.spec.js new file mode 100644 index 0000000000000..cb903bbf30635 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/preset-safe/expected.spec.js @@ -0,0 +1,29 @@ +import * as React from 'react'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +import { DataGrid } from '@mui/x-data-grid/DataGrid'; + +const theme = createTheme({}); + +function App() { + return ( + + + + + + + ); +} + +export default App; diff --git a/packages/x-codemod/src/v7.0.0/preset-safe/index.ts b/packages/x-codemod/src/v7.0.0/preset-safe/index.ts new file mode 100644 index 0000000000000..51b584797e671 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/preset-safe/index.ts @@ -0,0 +1,10 @@ +import transformPickers from '../pickers/preset-safe'; +import transformDataGrid from '../data-grid/preset-safe'; +import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../types'; + +export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { + file.source = transformPickers(file, api, options); + file.source = transformDataGrid(file, api, options); + + return file.source; +} diff --git a/packages/x-codemod/src/v7.0.0/preset-safe/preset-safe.test.ts b/packages/x-codemod/src/v7.0.0/preset-safe/preset-safe.test.ts new file mode 100644 index 0000000000000..3db400316a841 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/preset-safe/preset-safe.test.ts @@ -0,0 +1,27 @@ +import path from 'path'; +import { expect } from 'chai'; +import jscodeshift from 'jscodeshift'; +import transform from '.'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('v7.0.0', () => { + describe('preset-safe', () => { + it('transforms code as needed', () => { + const actual = transform({ source: read('./actual.spec.js') }, { jscodeshift }, {}); + + const expected = read('./expected.spec.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform({ source: read('./expected.spec.js') }, { jscodeshift }, {}); + + const expected = read('./expected.spec.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); +}); From f319827d2e802eeb2b3f5783f230ba96aa679368 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Thu, 9 Nov 2023 16:28:16 +0100 Subject: [PATCH 261/262] [docs] Fix typo in the migration guide (#10972) --- .../migration/migration-pickers-v6/migration-pickers-v6.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 759879e147a5c..0645f478a89f3 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -30,8 +30,8 @@ These changes were done for consistency, improved stability and to make room for The `components` and `componentsProps` props are renamed to `slots` and `slotProps` props respectively. This is a slow and ongoing effort between the different MUI libraries. -To smooth the transition, they where deprecated during the [v6](/x/migration/migration-pickers-v5/#rename-components-to-slots-optional). -And are removed fro the v7. +To smooth the transition, they were deprecated during the [v6](/x/migration/migration-pickers-v5/#rename-components-to-slots-optional). +And are removed from the v7. If not already done, this modification can be handled by the codemod From c565302891dab09c7ba98e11b24ec64a95251963 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lajto=20=E7=90=86=E5=BE=B7?= <85128868+lajtomekadimon@users.noreply.github.com> Date: Fri, 10 Nov 2023 08:39:37 +0100 Subject: [PATCH 262/262] [l10n] Add Basque (eu) locale and improve Spanish (es-ES) locale (#10819) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: David Andrés Co-authored-by: Lukas --- docs/data/date-pickers/localization/data.json | 10 ++- packages/x-date-pickers/src/locales/esES.ts | 18 ++-- packages/x-date-pickers/src/locales/eu.ts | 87 +++++++++++++++++++ packages/x-date-pickers/src/locales/index.ts | 1 + scripts/l10n.ts | 16 ++-- scripts/localeNames.js | 1 + scripts/x-date-pickers-pro.exports.json | 1 + scripts/x-date-pickers.exports.json | 1 + 8 files changed, 119 insertions(+), 16 deletions(-) create mode 100644 packages/x-date-pickers/src/locales/eu.ts diff --git a/docs/data/date-pickers/localization/data.json b/docs/data/date-pickers/localization/data.json index e4f077b2a1f49..2adcf451219a4 100644 --- a/docs/data/date-pickers/localization/data.json +++ b/docs/data/date-pickers/localization/data.json @@ -1,4 +1,12 @@ [ + { + "languageTag": "eu", + "importName": "eu", + "localeName": "Basque", + "missingKeysCount": 0, + "totalKeysCount": 37, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/eu.ts" + }, { "languageTag": "be-BY", "importName": "beBY", @@ -203,7 +211,7 @@ "languageTag": "es-ES", "importName": "esES", "localeName": "Spanish", - "missingKeysCount": 1, + "missingKeysCount": 0, "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/esES.ts" }, diff --git a/packages/x-date-pickers/src/locales/esES.ts b/packages/x-date-pickers/src/locales/esES.ts index e4cbf8c416438..c355724c62c79 100644 --- a/packages/x-date-pickers/src/locales/esES.ts +++ b/packages/x-date-pickers/src/locales/esES.ts @@ -42,8 +42,8 @@ const esESPickers: Partial> = { clockLabelText: (view, time, adapter) => `Seleccione ${views[view]}. ${ time === null - ? 'Sin tiempo seleccionado' - : `El tiempo seleccionado es ${adapter.format(time, 'fullTime')}` + ? 'No hay hora seleccionada' + : `La hora seleccionada es ${adapter.format(time, 'fullTime')}` }`, hoursClockNumberText: (hours) => `${hours} horas`, minutesClockNumberText: (minutes) => `${minutes} minutos`, @@ -61,17 +61,17 @@ const esESPickers: Partial> = { // Open picker labels openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) - ? `Elige la fecha, la fecha elegida es ${utils.format(value, 'fullDate')}` - : 'Elige la fecha', + ? `Elige fecha, la fecha elegida es ${utils.format(value, 'fullDate')}` + : 'Elige fecha', openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) - ? `Elige la hora, la hora elegido es ${utils.format(value, 'fullTime')}` - : 'Elige la hora', - // fieldClearLabel: 'Clear value', + ? `Elige hora, la hora elegida es ${utils.format(value, 'fullTime')}` + : 'Elige hora', + fieldClearLabel: 'Limpiar valor', // Table labels - timeTableLabel: 'elige la fecha', - dateTableLabel: 'elige la hora', + timeTableLabel: 'elige hora', + dateTableLabel: 'elige fecha', // Field section placeholders fieldYearPlaceholder: (params) => 'A'.repeat(params.digitAmount), diff --git a/packages/x-date-pickers/src/locales/eu.ts b/packages/x-date-pickers/src/locales/eu.ts new file mode 100644 index 0000000000000..d99e2febb7a18 --- /dev/null +++ b/packages/x-date-pickers/src/locales/eu.ts @@ -0,0 +1,87 @@ +import { PickersLocaleText } from './utils/pickersLocaleTextApi'; +import { getPickersLocalization } from './utils/getPickersLocalization'; +import { TimeViewWithMeridiem } from '../internals/models'; + +const views: Record = { + hours: 'orduak', + minutes: 'minutuak', + seconds: 'segunduak', + meridiem: 'meridianoa', +}; + +const euPickers: Partial> = { + // Calendar navigation + previousMonth: 'Azken hilabetea', + nextMonth: 'Hurrengo hilabetea', + + // View navigation + openPreviousView: 'azken bista ireki', + openNextView: 'hurrengo bista ireki', + calendarViewSwitchingButtonAriaLabel: (view) => + view === 'year' + ? 'urteko bista irekita dago, aldatu egutegi bistara' + : 'egutegi bista irekita dago, aldatu urteko bistara', + + // DateRange placeholders + start: 'Hasi', + end: 'Bukatu', + + // Action bar + cancelButtonLabel: 'Utxi', + clearButtonLabel: 'Garbitu', + okButtonLabel: 'OK', + todayButtonLabel: 'Gaur', + + // Toolbar titles + datePickerToolbarTitle: 'Data aukeratu', + dateTimePickerToolbarTitle: 'Data eta ordua aukeratu', + timePickerToolbarTitle: 'Ordua aukeratu', + dateRangePickerToolbarTitle: 'Data tartea aukeratu', + + // Clock labels + clockLabelText: (view, time, adapter) => + `Aukeratu ${views[view]}. ${ + time === null + ? 'Ez da ordurik aukertau' + : `Aukeratutako ordua ${adapter.format(time, 'fullTime')} da` + }`, + hoursClockNumberText: (hours) => `${hours} ordu`, + minutesClockNumberText: (minutes) => `${minutes} minutu`, + secondsClockNumberText: (seconds) => `${seconds} segundu`, + + // Digital clock labels + selectViewText: (view) => `Aukeratu ${views[view]}`, + + // Calendar labels + calendarWeekNumberHeaderLabel: 'Astea zenbakia', + calendarWeekNumberHeaderText: '#', + calendarWeekNumberAriaLabelText: (weekNumber) => `${weekNumber} astea`, + calendarWeekNumberText: (weekNumber) => `${weekNumber}`, + + // Open picker labels + openDatePickerDialogue: (value, utils) => + value !== null && utils.isValid(value) + ? `Data aukeratu, aukeratutako data ${utils.format(value, 'fullDate')} da` + : 'Data aukeratu', + openTimePickerDialogue: (value, utils) => + value !== null && utils.isValid(value) + ? `Ordua aukeratu, aukeratutako ordua ${utils.format(value, 'fullTime')} da` + : 'Ordua aukeratu', + fieldClearLabel: 'Balioa garbitu', + + // Table labels + timeTableLabel: 'ordua aukeratu', + dateTableLabel: 'data aukeratu', + + // Field section placeholders + fieldYearPlaceholder: (params) => 'Y'.repeat(params.digitAmount), + fieldMonthPlaceholder: (params) => (params.contentType === 'letter' ? 'MMMM' : 'MM'), + fieldDayPlaceholder: () => 'DD', + fieldWeekDayPlaceholder: (params) => (params.contentType === 'letter' ? 'EEEE' : 'EE'), + fieldHoursPlaceholder: () => 'hh', + fieldMinutesPlaceholder: () => 'mm', + fieldSecondsPlaceholder: () => 'ss', + fieldMeridiemPlaceholder: () => 'aa', +}; + +export const eu = getPickersLocalization(euPickers); diff --git a/packages/x-date-pickers/src/locales/index.ts b/packages/x-date-pickers/src/locales/index.ts index 610e3d41a476a..410f06361fae0 100644 --- a/packages/x-date-pickers/src/locales/index.ts +++ b/packages/x-date-pickers/src/locales/index.ts @@ -5,6 +5,7 @@ export * from './deDE'; export * from './elGR'; export * from './enUS'; export * from './esES'; +export * from './eu'; export * from './faIR'; export * from './fiFI'; export * from './frFR'; diff --git a/scripts/l10n.ts b/scripts/l10n.ts index 932119f26b745..25e9d2ceaee18 100644 --- a/scripts/l10n.ts +++ b/scripts/l10n.ts @@ -67,7 +67,7 @@ function plugin(existingTranslations: Translations): babel.PluginObj { } // Test if the variable name follows the pattern xxXXGrid or xxXXPickers - if (!/[a-z]{2}[A-Z]{2}(Grid|Pickers)/.test(node.id.name)) { + if (!/[a-z]{2}[A-Z]{2}|[a-z]{2}(Grid|Pickers)/.test(node.id.name)) { visitorPath.skip(); return; } @@ -164,7 +164,7 @@ function extractTranslations(translationsPath: string): [TranslationsByGroup, Tr function findLocales(localesDirectory: string, constantsPath: string) { const items = fse.readdirSync(localesDirectory); const locales: any[] = []; - const localeRegex = /^[a-z]{2}[A-Z]{2}/; + const localeRegex = /^[a-z]{2}[A-Z]{2}|^[a-z]{2}(?=.ts)/; items.forEach((item) => { const match = item.match(localeRegex); @@ -173,7 +173,10 @@ function findLocales(localesDirectory: string, constantsPath: string) { } const localePath = path.resolve(localesDirectory, item); - const code = match[0]; + if (fse.lstatSync(localePath).isDirectory()) { + return; + } + const code = match[0] || match[1]; if (constantsPath !== localePath) { // Ignore the locale used as a reference locales.push([localePath, code]); @@ -321,9 +324,10 @@ const generateDocReport = async ( return; } - const languageTag = `${importName.slice(0, 2).toLowerCase()}-${importName - .slice(2) - .toUpperCase()}`; + const languageTag = + importName.length > 2 + ? `${importName.slice(0, 2).toLowerCase()}-${importName.slice(2).toUpperCase()}` + : importName; const localeName = localeNames[languageTag]; if (localeName === undefined) { diff --git a/scripts/localeNames.js b/scripts/localeNames.js index f989f27b97c57..24ff47a663615 100644 --- a/scripts/localeNames.js +++ b/scripts/localeNames.js @@ -6,6 +6,7 @@ module.exports = { 'hy-AM': 'Armenian', 'az-AZ': 'Azerbaijani', 'bn-BD': 'Bangla', + eu: 'Basque', 'be-BY': 'Belarusian', 'bg-BG': 'Bulgarian', 'ca-ES': 'Catalan', diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 42f2f6b4027ba..5002ac2590cdb 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -128,6 +128,7 @@ { "name": "elGR", "kind": "Variable" }, { "name": "enUS", "kind": "Variable" }, { "name": "esES", "kind": "Variable" }, + { "name": "eu", "kind": "Variable" }, { "name": "ExportedDateRangeCalendarProps", "kind": "Interface" }, { "name": "ExportedDigitalClockProps", "kind": "Interface" }, { "name": "ExportedMultiSectionDigitalClockSectionProps", "kind": "Interface" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 08052f41bf95f..9b3b709474868 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -98,6 +98,7 @@ { "name": "elGR", "kind": "Variable" }, { "name": "enUS", "kind": "Variable" }, { "name": "esES", "kind": "Variable" }, + { "name": "eu", "kind": "Variable" }, { "name": "ExportedDigitalClockProps", "kind": "Interface" }, { "name": "ExportedMultiSectionDigitalClockSectionProps", "kind": "Interface" }, { "name": "ExportedPickersCalendarHeaderProps", "kind": "TypeAlias" },