From 7cc3eada9db3da9bcf13a62b07af6c83919cce2b Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Thu, 28 Nov 2024 15:21:33 +0100 Subject: [PATCH 01/35] [pickers] Use the new `ownerState` in ``, `` and `` (#15499) --- .../PickersFadeTransitionGroup.tsx | 8 +++--- .../DateCalendar/PickersSlideTransition.tsx | 23 +++++++++++---- .../DayCalendarSkeleton.tsx | 22 ++++++--------- .../PickersCalendarHeader.tsx | 27 +++++++++--------- .../PickersCalendarHeader.types.ts | 8 ++---- .../describes.PickersCalendarHeader.test.tsx | 7 ++++- .../PickersArrowSwitcher.tsx | 28 ++++++++++--------- .../PickersArrowSwitcher.types.tsx | 20 +++++++------ .../describes.PickersArrowSwitcher.test.tsx | 7 ++++- .../src/themeAugmentation/overrides.d.ts | 2 +- 10 files changed, 86 insertions(+), 66 deletions(-) diff --git a/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx b/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx index 584a245ad0157..0ed043db403f2 100644 --- a/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx +++ b/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx @@ -20,8 +20,7 @@ export interface PickersFadeTransitionGroupProps { classes?: Partial; } -const useUtilityClasses = (ownerState: PickersFadeTransitionGroupProps) => { - const { classes } = ownerState; +const useUtilityClasses = (classes: Partial | undefined) => { const slots = { root: ['root'], }; @@ -43,9 +42,10 @@ const PickersFadeTransitionGroupRoot = styled(TransitionGroup, { */ export function PickersFadeTransitionGroup(inProps: PickersFadeTransitionGroupProps) { const props = useThemeProps({ props: inProps, name: 'MuiPickersFadeTransitionGroup' }); - const { children, className, reduceAnimations, transKey } = props; - const classes = useUtilityClasses(props); + const { children, className, reduceAnimations, transKey, classes: classesProp } = props; + const classes = useUtilityClasses(classesProp); const theme = useTheme(); + if (reduceAnimations) { return children; } diff --git a/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx b/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx index e560306b50331..537edecb63f58 100644 --- a/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx +++ b/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx @@ -10,8 +10,15 @@ import { pickersSlideTransitionClasses, PickersSlideTransitionClasses, } from './pickersSlideTransitionClasses'; +import { PickerOwnerState } from '../models/pickers'; +import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext'; export type SlideDirection = 'right' | 'left'; + +interface PickerSlideTransitionOwnerState extends PickerOwnerState { + slideDirection: SlideDirection; +} + export interface ExportedSlideTransitionProps { /** * Override or extend the styles applied to the component. @@ -28,8 +35,12 @@ export interface SlideTransitionProps transKey: React.Key; } -const useUtilityClasses = (ownerState: SlideTransitionProps) => { - const { classes, slideDirection } = ownerState; +const useUtilityClasses = ( + classes: Partial | undefined, + ownerState: PickerSlideTransitionOwnerState, +) => { + const { slideDirection } = ownerState; + const slots = { root: ['root'], exit: ['slideExit'], @@ -117,11 +128,13 @@ export function PickersSlideTransition(inProps: SlideTransitionProps) { reduceAnimations, slideDirection, transKey, - // extracting `classes` from `other` - classes: providedClasses, + classes: classesProp, ...other } = props; - const classes = useUtilityClasses(props); + + const { ownerState: pickerOwnerState } = usePickerPrivateContext(); + const ownerState = { ...pickerOwnerState, slideDirection }; + const classes = useUtilityClasses(classesProp, ownerState); const theme = useTheme(); if (reduceAnimations) { return
{children}
; diff --git a/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx b/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx index 60ff3c131f085..43e847ab4348d 100644 --- a/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx +++ b/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx @@ -26,8 +26,7 @@ export interface DayCalendarSkeletonProps extends HTMLDivProps { ref?: React.Ref; } -const useUtilityClasses = (ownerState: DayCalendarSkeletonProps) => { - const { classes } = ownerState; +const useUtilityClasses = (classes: Partial | undefined) => { const slots = { root: ['root'], week: ['week'], @@ -59,14 +58,11 @@ const DayCalendarSkeletonDay = styled(Skeleton, { name: 'MuiDayCalendarSkeleton', slot: 'DaySkeleton', overridesResolver: (props, styles) => styles.daySkeleton, -})<{ ownerState: { day: number } }>({ +})({ margin: `0 ${DAY_MARGIN}px`, - variants: [ - { - props: { day: 0 }, - style: { visibility: 'hidden' }, - }, - ], + '&[data-day-in-month="0"]': { + visibility: 'hidden', + }, }); const monthMap = [ @@ -92,22 +88,22 @@ function DayCalendarSkeleton(inProps: DayCalendarSkeletonProps) { name: 'MuiDayCalendarSkeleton', }); - const { className, ...other } = props; + const { className, classes: classesProp, ...other } = props; - const classes = useUtilityClasses(other); + const classes = useUtilityClasses(classesProp); return ( {monthMap.map((week, index) => ( - {week.map((day, index2) => ( + {week.map((dayInMonth, index2) => ( ))} diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx index a3e90e38d7b9f..f588e56a189ce 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx @@ -18,15 +18,14 @@ import { } from '../internals/hooks/date-helpers-hooks'; import { getPickersCalendarHeaderUtilityClass, + PickersCalendarHeaderClasses, pickersCalendarHeaderClasses, } from './pickersCalendarHeaderClasses'; -import { - PickersCalendarHeaderOwnerState, - PickersCalendarHeaderProps, -} from './PickersCalendarHeader.types'; +import { PickersCalendarHeaderProps } from './PickersCalendarHeader.types'; +import { PickerOwnerState } from '../models/pickers'; +import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext'; -const useUtilityClasses = (ownerState: PickersCalendarHeaderOwnerState) => { - const { classes } = ownerState; +const useUtilityClasses = (classes: Partial | undefined) => { const slots = { root: ['root'], labelContainer: ['labelContainer'], @@ -43,7 +42,7 @@ const PickersCalendarHeaderRoot = styled('div', { slot: 'Root', overridesResolver: (_, styles) => styles.root, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickerOwnerState; }>({ display: 'flex', alignItems: 'center', @@ -61,7 +60,7 @@ const PickersCalendarHeaderLabelContainer = styled('div', { slot: 'LabelContainer', overridesResolver: (_, styles) => styles.labelContainer, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickerOwnerState; }>(({ theme }) => ({ display: 'flex', overflow: 'hidden', @@ -77,7 +76,7 @@ const PickersCalendarHeaderLabel = styled('div', { slot: 'Label', overridesResolver: (_, styles) => styles.label, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickerOwnerState; }>({ marginRight: 6, }); @@ -87,7 +86,7 @@ const PickersCalendarHeaderSwitchViewButton = styled(IconButton, { slot: 'SwitchViewButton', overridesResolver: (_, styles) => styles.switchViewButton, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickerOwnerState; }>({ marginRight: 'auto', variants: [ @@ -107,7 +106,7 @@ const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, { slot: 'SwitchViewIcon', overridesResolver: (_, styles) => styles.switchViewIcon, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickerOwnerState; }>(({ theme }) => ({ willChange: 'transform', transition: theme.transitions.create('transform'), @@ -154,14 +153,14 @@ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader( views, labelId, className, + classes: classesProp, timezone, format = `${utils.formats.month} ${utils.formats.year}`, ...other } = props; - const ownerState = props; - - const classes = useUtilityClasses(props); + const { ownerState } = usePickerPrivateContext(); + const classes = useUtilityClasses(classesProp); const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton; const switchViewButtonProps = useSlotProps({ diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts index 0e058fe60e8db..ca35a59c5ce7f 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts @@ -9,7 +9,7 @@ import { PickersArrowSwitcherSlotProps, } from '../internals/components/PickersArrowSwitcher'; import { MonthValidationOptions } from '../internals/hooks/date-helpers-hooks'; -import { PickerValidDate, DateView } from '../models'; +import { PickerValidDate, DateView, PickerOwnerState } from '../models'; import { SlideDirection } from '../DateCalendar/PickersSlideTransition'; import { PickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses'; @@ -29,19 +29,17 @@ export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots { // We keep the interface to allow module augmentation export interface PickersCalendarHeaderSlotPropsOverrides {} -export type PickersCalendarHeaderOwnerState = PickersCalendarHeaderProps; - export interface PickersCalendarHeaderSlotProps extends PickersArrowSwitcherSlotProps { switchViewButton?: SlotComponentProps< typeof IconButton, PickersCalendarHeaderSlotPropsOverrides, - PickersCalendarHeaderOwnerState + PickerOwnerState >; switchViewIcon?: SlotComponentProps< typeof SvgIcon, PickersCalendarHeaderSlotPropsOverrides, - PickersCalendarHeaderOwnerState + PickerOwnerState >; } diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/describes.PickersCalendarHeader.test.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/describes.PickersCalendarHeader.test.tsx index 62aa5310d0e7e..fa4e02f6f325d 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/describes.PickersCalendarHeader.test.tsx +++ b/packages/x-date-pickers/src/PickersCalendarHeader/describes.PickersCalendarHeader.test.tsx @@ -24,7 +24,12 @@ describe(' - Describes', () => { render, muiName: 'MuiPickersCalendarHeader', refInstanceof: window.HTMLDivElement, - skip: ['componentProp', 'componentsProp', 'themeVariants'], + skip: [ + 'componentProp', + 'componentsProp', + 'themeVariants', + 'slotPropsCallbackWithPropsAsOwnerState', + ], slots: { switchViewButton: { expectedClassName: pickersCalendarHeaderClasses.switchViewButton, diff --git a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx index a5dd5873308f4..65bea5a6bb716 100644 --- a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx +++ b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx @@ -7,18 +7,20 @@ import composeClasses from '@mui/utils/composeClasses'; import useSlotProps from '@mui/utils/useSlotProps'; import IconButton from '@mui/material/IconButton'; import { ArrowLeftIcon, ArrowRightIcon } from '../../../icons'; +import { PickersArrowSwitcherProps } from './PickersArrowSwitcher.types'; import { - PickersArrowSwitcherOwnerState, - PickersArrowSwitcherProps, -} from './PickersArrowSwitcher.types'; -import { getPickersArrowSwitcherUtilityClass } from './pickersArrowSwitcherClasses'; + getPickersArrowSwitcherUtilityClass, + PickersArrowSwitcherClasses, +} from './pickersArrowSwitcherClasses'; +import { usePickerPrivateContext } from '../../hooks/usePickerPrivateContext'; +import { PickerOwnerState } from '../../../models'; const PickersArrowSwitcherRoot = styled('div', { name: 'MuiPickersArrowSwitcher', slot: 'Root', overridesResolver: (props, styles) => styles.root, })<{ - ownerState: PickersArrowSwitcherProps; + ownerState: PickerOwnerState; }>({ display: 'flex', }); @@ -28,7 +30,7 @@ const PickersArrowSwitcherSpacer = styled('div', { slot: 'Spacer', overridesResolver: (props, styles) => styles.spacer, })<{ - ownerState: PickersArrowSwitcherProps; + ownerState: PickerOwnerState; }>(({ theme }) => ({ width: theme.spacing(3), })); @@ -38,7 +40,7 @@ const PickersArrowSwitcherButton = styled(IconButton, { slot: 'Button', overridesResolver: (props, styles) => styles.button, })<{ - ownerState: PickersArrowSwitcherProps; + ownerState: PickerOwnerState; }>({ variants: [ { @@ -48,8 +50,7 @@ const PickersArrowSwitcherButton = styled(IconButton, { ], }); -const useUtilityClasses = (ownerState: PickersArrowSwitcherOwnerState) => { - const { classes } = ownerState; +const useUtilityClasses = (classes: Partial | undefined) => { const slots = { root: ['root'], spacer: ['spacer'], @@ -84,12 +85,13 @@ export const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitch onGoToPrevious, previousLabel, labelId, + classes: classesProp, ...other } = props; - const ownerState = props; + const { ownerState } = usePickerPrivateContext(); - const classes = useUtilityClasses(ownerState); + const classes = useUtilityClasses(classesProp); const nextProps = { isDisabled: isNextDisabled, @@ -117,7 +119,7 @@ export const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitch edge: 'end', onClick: previousProps.goTo, }, - ownerState: { ...ownerState, hidden: previousProps.isHidden }, + ownerState: { ...ownerState, hidden: previousProps.isHidden ?? false }, className: clsx(classes.button, classes.previousIconButton), }); @@ -133,7 +135,7 @@ export const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitch edge: 'start', onClick: nextProps.goTo, }, - ownerState: { ...ownerState, hidden: nextProps.isHidden }, + ownerState: { ...ownerState, hidden: nextProps.isHidden ?? false }, className: clsx(classes.button, classes.nextIconButton), }); diff --git a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx index f32e1745edf74..725f070b17504 100644 --- a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx +++ b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx @@ -3,6 +3,7 @@ import { SlotComponentProps } from '@mui/utils'; import IconButton from '@mui/material/IconButton'; import SvgIcon from '@mui/material/SvgIcon'; import { PickersArrowSwitcherClasses } from './pickersArrowSwitcherClasses'; +import { PickerOwnerState } from '../../../models'; export interface ExportedPickersArrowSwitcherProps { /** @@ -41,7 +42,12 @@ export interface PickersArrowSwitcherProps labelId?: string; } -export type PickersArrowSwitcherOwnerState = PickersArrowSwitcherProps; +export interface PickersArrowSwitcherOwnerState extends PickerOwnerState { + /** + * If `true`, this button should be hidden. + */ + hidden: boolean; +} export interface PickersArrowSwitcherSlotPropsOverrides {} @@ -68,29 +74,25 @@ export interface PickersArrowSwitcherSlots { rightArrowIcon?: React.ElementType; } -export interface PickersArrowSwitcherButtonSlotOwnerState extends PickersArrowSwitcherOwnerState { - hidden?: boolean; -} - export interface PickersArrowSwitcherSlotProps { previousIconButton?: SlotComponentProps< typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, - PickersArrowSwitcherButtonSlotOwnerState + PickersArrowSwitcherOwnerState >; nextIconButton?: SlotComponentProps< typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, - PickersArrowSwitcherButtonSlotOwnerState + PickersArrowSwitcherOwnerState >; leftArrowIcon?: SlotComponentProps< typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, - PickersArrowSwitcherButtonSlotOwnerState + PickerOwnerState >; rightArrowIcon?: SlotComponentProps< typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, - PickersArrowSwitcherButtonSlotOwnerState + PickerOwnerState >; } diff --git a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/describes.PickersArrowSwitcher.test.tsx b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/describes.PickersArrowSwitcher.test.tsx index 6a0adc31c722a..8db3f5a49a469 100644 --- a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/describes.PickersArrowSwitcher.test.tsx +++ b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/describes.PickersArrowSwitcher.test.tsx @@ -22,7 +22,12 @@ describe(' - Describes', () => { render, muiName: 'MuiPickersArrowSwitcher', refInstanceof: window.HTMLDivElement, - skip: ['componentProp', 'componentsProp', 'themeVariants'], + skip: [ + 'componentProp', + 'componentsProp', + 'themeVariants', + 'slotPropsCallbackWithPropsAsOwnerState', + ], slots: { previousIconButton: { expectedClassName: pickersArrowSwitcherClasses.previousIconButton, diff --git a/packages/x-date-pickers/src/themeAugmentation/overrides.d.ts b/packages/x-date-pickers/src/themeAugmentation/overrides.d.ts index 0a845aa4d33d5..085620287683f 100644 --- a/packages/x-date-pickers/src/themeAugmentation/overrides.d.ts +++ b/packages/x-date-pickers/src/themeAugmentation/overrides.d.ts @@ -57,13 +57,13 @@ export interface PickersComponentNameToClassKey { MuiPickersCalendarHeader: PickersCalendarHeaderClassKey; MuiPickersDay: PickersDayClassKey; MuiPickersFadeTransitionGroup: PickersFadeTransitionGroupClassKey; + MuiPickersLayout: PickersLayoutClassKey; MuiPickersMonth: PickersMonthClassKey; MuiPickersPopper: PickersPopperClassKey; MuiPickersSlideTransition: PickersSlideTransitionClassKey; MuiPickersToolbar: PickersToolbarClassKey; MuiPickersToolbarButton: PickersToolbarButtonClassKey; MuiPickersToolbarText: PickersToolbarTextClassKey; - MuiPickersLayout: PickersLayoutClassKey; MuiPickersYear: PickersYearClassKey; MuiTimeClock: TimeClockClassKey; MuiTimePickerToolbar: TimePickerToolbarClassKey; From 064539428169d526a81a7e54893ef9dc8305b7fe Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 28 Nov 2024 19:37:55 +0500 Subject: [PATCH 02/35] [DataGrid] Update the default value for `rowSelectionPropagation` (#15523) --- .../row-grouping/RowGroupingPropagateSelection.js | 4 ++-- .../row-grouping/RowGroupingPropagateSelection.tsx | 4 ++-- docs/data/data-grid/row-grouping/row-grouping.md | 8 ++++---- .../migration-data-grid-v7/migration-data-grid-v7.md | 2 ++ docs/pages/x/api/data-grid/data-grid-premium.json | 2 +- docs/pages/x/api/data-grid/data-grid-pro.json | 2 +- .../src/DataGridPremium/DataGridPremium.tsx | 2 +- packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx | 2 +- .../src/tests/rowSelection.DataGridPro.test.tsx | 8 +++++++- .../x-data-grid/src/hooks/features/rowSelection/utils.ts | 4 ++-- packages/x-data-grid/src/models/props/DataGridProps.ts | 2 +- 11 files changed, 24 insertions(+), 16 deletions(-) diff --git a/docs/data/data-grid/row-grouping/RowGroupingPropagateSelection.js b/docs/data/data-grid/row-grouping/RowGroupingPropagateSelection.js index 5baa5839b6f86..89ab855dc45b6 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingPropagateSelection.js +++ b/docs/data/data-grid/row-grouping/RowGroupingPropagateSelection.js @@ -13,8 +13,8 @@ export default function RowGroupingPropagateSelection() { const data = useMovieData(); const apiRef = useGridApiRef(); const [rowSelectionPropagation, setRowSelectionPropagation] = React.useState({ - parents: true, - descendants: true, + parents: false, + descendants: false, }); const initialState = useKeepGroupedColumnsHidden({ diff --git a/docs/data/data-grid/row-grouping/RowGroupingPropagateSelection.tsx b/docs/data/data-grid/row-grouping/RowGroupingPropagateSelection.tsx index 9229e086666ac..03570d1b5a7fe 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingPropagateSelection.tsx +++ b/docs/data/data-grid/row-grouping/RowGroupingPropagateSelection.tsx @@ -15,8 +15,8 @@ export default function RowGroupingPropagateSelection() { const apiRef = useGridApiRef(); const [rowSelectionPropagation, setRowSelectionPropagation] = React.useState({ - parents: true, - descendants: true, + parents: false, + descendants: false, }); const initialState = useKeepGroupedColumnsHidden({ diff --git a/docs/data/data-grid/row-grouping/row-grouping.md b/docs/data/data-grid/row-grouping/row-grouping.md index 13f56a2ebac88..cb24c6d9b785f 100644 --- a/docs/data/data-grid/row-grouping/row-grouping.md +++ b/docs/data/data-grid/row-grouping/row-grouping.md @@ -311,15 +311,15 @@ If you are dynamically switching the `leafField` or `mainGroupingCriteria`, the ## Automatic parents and children selection -By default, selecting a parent row does not select its children. -You can override this behavior by using the `rowSelectionPropagation` prop. +By default, selecting a parent row selects all its descendants automatically. +You can customize this behavior by using the `rowSelectionPropagation` prop. Here's how it's structured: ```ts type GridRowSelectionPropagation = { - descendants?: boolean; // default: false - parents?: boolean; // default: false + descendants?: boolean; // default: true + parents?: boolean; // default: true }; ``` diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md index 3248c330891c8..2ad2151ee8d66 100644 --- a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md +++ b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md @@ -35,6 +35,8 @@ Below are described the steps you need to make to migrate from v7 to v8. ### Selection +- The default value of the `rowSelectionPropagation` prop has been changed to `{ parents: true, descendants: true }` which means that the selection will be propagated to the parents and descendants by default. + To revert to the previous behavior, pass `rowSelectionPropagation={{ parents: false, descendants: false }}`. - The prop `indeterminateCheckboxAction` has been removed. Clicking on an indeterminate checkbox "selects" the unselected descendants. ### Localization 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 76ea58a625462..76fa5fa203ca3 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -603,7 +603,7 @@ }, "rowSelectionPropagation": { "type": { "name": "shape", "description": "{ descendants?: bool, parents?: bool }" }, - "default": "{ parents: false, descendants: false }" + "default": "{ parents: true, descendants: true }" }, "rowsLoadingMode": { "type": { "name": "enum", "description": "'client'
| 'server'" } 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 c56fdb7fd1b78..bc21892c67b09 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -538,7 +538,7 @@ }, "rowSelectionPropagation": { "type": { "name": "shape", "description": "{ descendants?: bool, parents?: bool }" }, - "default": "{ parents: false, descendants: false }" + "default": "{ parents: true, descendants: true }" }, "rowsLoadingMode": { "type": { "name": "enum", "description": "'client'
| 'server'" } diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index d6b2763a77e25..884470fb17960 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -995,7 +995,7 @@ DataGridPremiumRaw.propTypes = { * - Deselecting a descendant of a selected parent deselects the parent automatically. * * Works with tree data and row grouping on the client-side only. - * @default { parents: false, descendants: false } + * @default { parents: true, descendants: true } */ rowSelectionPropagation: PropTypes.shape({ descendants: PropTypes.bool, diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 7c8113a5e2262..2f7225467c205 100644 --- a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -901,7 +901,7 @@ DataGridProRaw.propTypes = { * - Deselecting a descendant of a selected parent deselects the parent automatically. * * Works with tree data and row grouping on the client-side only. - * @default { parents: false, descendants: false } + * @default { parents: true, descendants: true } */ rowSelectionPropagation: PropTypes.shape({ descendants: PropTypes.bool, diff --git a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx index 2a5883e2b8a09..18df7ed58dfa6 100644 --- a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx @@ -219,6 +219,7 @@ describe(' - Row selection', () => { rows={gridRows} onFilterModelChange={onFilterChange} keepNonExistentRowsSelected + rowSelectionPropagation={{ parents: false, descendants: false }} /> ); } @@ -938,7 +939,12 @@ describe(' - Row selection', () => { describe('apiRef: selectRows', () => { it('should call onRowSelectionModelChange with the ids selected', () => { const handleRowSelectionModelChange = spy(); - render(); + render( + , + ); act(() => apiRef.current.selectRows([1, 2])); expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([1, 2]); diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/utils.ts b/packages/x-data-grid/src/hooks/features/rowSelection/utils.ts index 6084acb11686b..99aa33d01b89e 100644 --- a/packages/x-data-grid/src/hooks/features/rowSelection/utils.ts +++ b/packages/x-data-grid/src/hooks/features/rowSelection/utils.ts @@ -14,8 +14,8 @@ import type { import type { GridRowSelectionPropagation } from '../../../models/gridRowSelectionModel'; export const ROW_SELECTION_PROPAGATION_DEFAULT: GridRowSelectionPropagation = { - parents: false, - descendants: false, + parents: true, + descendants: true, }; function getGridRowGroupSelectableDescendants( diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts index 2e2183ec8f2a0..3fe43be9d9324 100644 --- a/packages/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/x-data-grid/src/models/props/DataGridProps.ts @@ -855,7 +855,7 @@ export interface DataGridProSharedPropsWithDefaultValue { * - Deselecting a descendant of a selected parent deselects the parent automatically. * * Works with tree data and row grouping on the client-side only. - * @default { parents: false, descendants: false } + * @default { parents: true, descendants: true } */ rowSelectionPropagation: GridRowSelectionPropagation; /** From 511ad9f333d89ed2a336acf2d8ca4053eecfb6d9 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Thu, 28 Nov 2024 15:41:54 +0100 Subject: [PATCH 03/35] [pickers] Use the new `ownerState` object in all the field components (#15510) --- .../MultiInputDateRangeField.tsx | 17 +++++---- .../MultiInputDateRangeField.types.ts | 36 ++++++++----------- .../MultiInputDateTimeRangeField.tsx | 17 +++++---- .../MultiInputDateTimeRangeField.types.ts | 34 +++++++----------- .../MultiInputTimeRangeField.tsx | 17 +++++---- .../MultiInputTimeRangeField.types.ts | 34 +++++++----------- .../SingleInputDateRangeField.tsx | 7 ++-- .../SingleInputDateRangeField.types.ts | 21 ++++++----- .../SingleInputDateTimeRangeField.tsx | 7 ++-- .../SingleInputDateTimeRangeField.types.ts | 21 ++++++----- .../SingleInputTimeRangeField.tsx | 7 ++-- .../SingleInputTimeRangeField.types.ts | 21 ++++++----- .../hooks/useEnrichedRangePickerFieldProps.ts | 14 +++++--- .../src/internals/models/fields.ts | 9 ++--- .../src/DateField/DateField.tsx | 3 +- .../src/DateField/DateField.types.ts | 21 ++++++----- .../src/DateTimeField/DateTimeField.tsx | 3 +- .../src/DateTimeField/DateTimeField.types.ts | 24 ++++++------- .../src/TimeField/TimeField.tsx | 3 +- .../src/TimeField/TimeField.types.ts | 24 ++++++------- .../useDesktopPicker.types.ts | 23 ++++++++---- .../src/internals/hooks/useFieldOwnerState.ts | 19 ++++++++++ .../useMobilePicker/useMobilePicker.types.ts | 17 ++++++--- .../x-date-pickers/src/internals/index.ts | 1 + packages/x-date-pickers/src/models/fields.ts | 12 +++++++ scripts/x-date-pickers-pro.exports.json | 1 + scripts/x-date-pickers.exports.json | 1 + 27 files changed, 226 insertions(+), 188 deletions(-) create mode 100644 packages/x-date-pickers/src/internals/hooks/useFieldOwnerState.ts diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index e8064670ce601..50cd4f22cbb75 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -12,7 +12,10 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses, } from '@mui/utils'; -import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals'; +import { + convertFieldResponseIntoMuiTextFieldProps, + useFieldOwnerState, +} from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { @@ -30,8 +33,7 @@ export const multiInputDateRangeFieldClasses: MultiInputRangeFieldClasses = gene export const getMultiInputDateRangeFieldUtilityClass = (slot: string) => generateUtilityClass('MuiMultiInputDateRangeField', slot); -const useUtilityClasses = (ownerState: MultiInputDateRangeFieldProps) => { - const { classes } = ownerState; +const useUtilityClasses = (classes: Partial | undefined) => { const slots = { root: ['root'], separator: ['separator'], @@ -95,11 +97,12 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi unstableStartFieldRef, unstableEndFieldRef, className, + classes: classesProp, ...otherForwardedProps } = forwardedProps; - const ownerState = themeProps; - const classes = useUtilityClasses(ownerState); + const ownerState = useFieldOwnerState(internalProps); + const classes = useUtilityClasses(classesProp); const Root = slots?.root ?? MultiInputDateRangeFieldRoot; const rootProps = useSlotProps({ @@ -118,7 +121,7 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const startTextFieldProps = useSlotProps< typeof TextField, - MultiInputDateRangeFieldSlotProps['textField'], + MultiInputDateRangeFieldSlotProps['textField'], {}, MultiInputDateRangeFieldProps & { position: RangePosition; @@ -130,7 +133,7 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi }); const endTextFieldProps = useSlotProps< typeof TextField, - MultiInputDateRangeFieldSlotProps['textField'], + MultiInputDateRangeFieldSlotProps['textField'], {}, MultiInputDateRangeFieldProps & { position: RangePosition; diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts index 8b31315cee9fb..6565d64012de7 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts @@ -1,8 +1,10 @@ import * as React from 'react'; -import { SlotComponentProps } from '@mui/utils'; -import Typography from '@mui/material/Typography'; -import Stack, { StackProps } from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; +import type { TypographyProps } from '@mui/material/Typography'; +import type { StackProps } from '@mui/material/Stack'; +import type { TextFieldProps } from '@mui/material/TextField'; +import { FieldOwnerState } from '@mui/x-date-pickers/models'; +import { SlotComponentPropsFromProps } from '@mui/x-internals/types'; +import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField'; import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types'; import { MultiInputFieldRefs, @@ -53,7 +55,7 @@ export interface MultiInputDateRangeFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: MultiInputDateRangeFieldSlotProps; + slotProps?: MultiInputDateRangeFieldSlotProps; } export interface MultiInputDateRangeFieldSlots { @@ -65,7 +67,7 @@ export interface MultiInputDateRangeFieldSlots { /** * Form control with an input to render a date. * It is rendered twice: once for the start date and once for the end date. - * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`. + * @default , or from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`. */ textField?: React.ElementType; /** @@ -75,24 +77,14 @@ export interface MultiInputDateRangeFieldSlots { separator?: React.ElementType; } -export interface MultiInputDateRangeFieldSlotProps< - TEnableAccessibleFieldDOMStructure extends boolean, -> { - root?: SlotComponentProps< - typeof Stack, - {}, - MultiInputDateRangeFieldProps - >; - textField?: SlotComponentProps< - typeof TextField, +export interface MultiInputDateRangeFieldSlotProps { + root?: SlotComponentPropsFromProps; + textField?: SlotComponentPropsFromProps< + PickersTextFieldProps | TextFieldProps, {}, - MultiInputDateRangeFieldProps & { + FieldOwnerState & { position: RangePosition; } >; - separator?: SlotComponentProps< - typeof Typography, - {}, - MultiInputDateRangeFieldProps - >; + separator?: SlotComponentPropsFromProps; } diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index 19da8015c1c13..06b5798770357 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -12,7 +12,10 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses, } from '@mui/utils'; -import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals'; +import { + convertFieldResponseIntoMuiTextFieldProps, + useFieldOwnerState, +} from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { @@ -28,8 +31,7 @@ export const multiInputDateTimeRangeFieldClasses: MultiInputRangeFieldClasses = export const getMultiInputDateTimeRangeFieldUtilityClass = (slot: string) => generateUtilityClass('MuiMultiInputDateTimeRangeField', slot); -const useUtilityClasses = (ownerState: MultiInputDateTimeRangeFieldProps) => { - const { classes } = ownerState; +const useUtilityClasses = (classes: Partial | undefined) => { const slots = { root: ['root'], separator: ['separator'], @@ -93,11 +95,12 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim unstableStartFieldRef, unstableEndFieldRef, className, + classes: classesProp, ...otherForwardedProps } = forwardedProps; - const ownerState = themeProps; - const classes = useUtilityClasses(ownerState); + const ownerState = useFieldOwnerState(themeProps); + const classes = useUtilityClasses(classesProp); const Root = slots?.root ?? MultiInputDateTimeRangeFieldRoot; const rootProps = useSlotProps({ @@ -116,7 +119,7 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const startTextFieldProps = useSlotProps< typeof TextField, - MultiInputDateTimeRangeFieldSlotProps['textField'], + MultiInputDateTimeRangeFieldSlotProps['textField'], {}, MultiInputDateTimeRangeFieldProps & { position: RangePosition; @@ -128,7 +131,7 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim }); const endTextFieldProps = useSlotProps< typeof TextField, - MultiInputDateTimeRangeFieldSlotProps['textField'], + MultiInputDateTimeRangeFieldSlotProps['textField'], {}, MultiInputDateTimeRangeFieldProps & { position: RangePosition; diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts index e66073ee71f5e..51675345af78b 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts @@ -1,8 +1,10 @@ import * as React from 'react'; -import { SlotComponentProps } from '@mui/utils'; -import Typography from '@mui/material/Typography'; -import Stack, { StackProps } from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; +import type { TypographyProps } from '@mui/material/Typography'; +import type { StackProps } from '@mui/material/Stack'; +import type { TextFieldProps } from '@mui/material/TextField'; +import { FieldOwnerState } from '@mui/x-date-pickers/models'; +import { SlotComponentPropsFromProps } from '@mui/x-internals/types'; +import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField'; import { UseDateTimeRangeFieldProps } from '../internals/models/dateTimeRange'; import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types'; import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models'; @@ -52,7 +54,7 @@ export interface MultiInputDateTimeRangeFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: MultiInputDateTimeRangeFieldSlotProps; + slotProps?: MultiInputDateTimeRangeFieldSlotProps; } export interface MultiInputDateTimeRangeFieldSlots { @@ -74,24 +76,14 @@ export interface MultiInputDateTimeRangeFieldSlots { separator?: React.ElementType; } -export interface MultiInputDateTimeRangeFieldSlotProps< - TEnableAccessibleFieldDOMStructure extends boolean, -> { - root?: SlotComponentProps< - typeof Stack, - {}, - MultiInputDateTimeRangeFieldProps - >; - textField?: SlotComponentProps< - typeof TextField, +export interface MultiInputDateTimeRangeFieldSlotProps { + root?: SlotComponentPropsFromProps; + textField?: SlotComponentPropsFromProps< + PickersTextFieldProps | TextFieldProps, {}, - MultiInputDateTimeRangeFieldProps & { + FieldOwnerState & { position: RangePosition; } >; - separator?: SlotComponentProps< - typeof Typography, - {}, - MultiInputDateTimeRangeFieldProps - >; + separator?: SlotComponentPropsFromProps; } diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index 9a1784f993ef5..e9e5c24a2ea26 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -12,7 +12,10 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses, } from '@mui/utils'; -import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals'; +import { + convertFieldResponseIntoMuiTextFieldProps, + useFieldOwnerState, +} from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { @@ -30,8 +33,7 @@ export const multiInputTimeRangeFieldClasses: MultiInputRangeFieldClasses = gene export const getMultiInputTimeRangeFieldUtilityClass = (slot: string) => generateUtilityClass('MuiMultiInputTimeRangeField', slot); -const useUtilityClasses = (ownerState: MultiInputTimeRangeFieldProps) => { - const { classes } = ownerState; +const useUtilityClasses = (classes: Partial | undefined) => { const slots = { root: ['root'], separator: ['separator'], @@ -95,11 +97,12 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi unstableStartFieldRef, unstableEndFieldRef, className, + classes: classesProp, ...otherForwardedProps } = forwardedProps; - const ownerState = themeProps; - const classes = useUtilityClasses(ownerState); + const ownerState = useFieldOwnerState(themeProps); + const classes = useUtilityClasses(classesProp); const Root = slots?.root ?? MultiInputTimeRangeFieldRoot; const rootProps = useSlotProps({ @@ -118,7 +121,7 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const startTextFieldProps = useSlotProps< typeof TextField, - MultiInputTimeRangeFieldSlotProps['textField'], + MultiInputTimeRangeFieldSlotProps['textField'], {}, MultiInputTimeRangeFieldProps & { position: RangePosition; @@ -131,7 +134,7 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi const endTextFieldProps = useSlotProps< typeof TextField, - MultiInputTimeRangeFieldSlotProps['textField'], + MultiInputTimeRangeFieldSlotProps['textField'], {}, MultiInputTimeRangeFieldProps & { position: RangePosition; diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts index a9fcc08313112..08708712d12de 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts @@ -1,8 +1,10 @@ import * as React from 'react'; -import { SlotComponentProps } from '@mui/utils'; -import Typography from '@mui/material/Typography'; -import Stack, { StackProps } from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; +import type { TypographyProps } from '@mui/material/Typography'; +import type { StackProps } from '@mui/material/Stack'; +import type { TextFieldProps } from '@mui/material/TextField'; +import { FieldOwnerState } from '@mui/x-date-pickers/models'; +import { SlotComponentPropsFromProps } from '@mui/x-internals/types'; +import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField'; import { UseTimeRangeFieldProps } from '../internals/models/timeRange'; import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types'; import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models'; @@ -49,7 +51,7 @@ export interface MultiInputTimeRangeFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: MultiInputTimeRangeFieldSlotProps; + slotProps?: MultiInputTimeRangeFieldSlotProps; } export interface MultiInputTimeRangeFieldSlots { @@ -71,24 +73,14 @@ export interface MultiInputTimeRangeFieldSlots { separator?: React.ElementType; } -export interface MultiInputTimeRangeFieldSlotProps< - TEnableAccessibleFieldDOMStructure extends boolean, -> { - root?: SlotComponentProps< - typeof Stack, - {}, - MultiInputTimeRangeFieldProps - >; - textField?: SlotComponentProps< - typeof TextField, +export interface MultiInputTimeRangeFieldSlotProps { + root?: SlotComponentPropsFromProps; + textField?: SlotComponentPropsFromProps< + PickersTextFieldProps | TextFieldProps, {}, - MultiInputTimeRangeFieldProps & { + FieldOwnerState & { position: RangePosition; } >; - separator?: SlotComponentProps< - typeof Typography, - {}, - MultiInputTimeRangeFieldProps - >; + separator?: SlotComponentPropsFromProps; } diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index 79040d13964dd..86707618138fb 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -6,7 +6,10 @@ import { useThemeProps } from '@mui/material/styles'; import useSlotProps from '@mui/utils/useSlotProps'; import { refType } from '@mui/utils'; import { useClearableField } from '@mui/x-date-pickers/hooks'; -import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals'; +import { + convertFieldResponseIntoMuiTextFieldProps, + useFieldOwnerState, +} from '@mui/x-date-pickers/internals'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { SingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types'; import { useSingleInputDateRangeField } from './useSingleInputDateRangeField'; @@ -40,7 +43,7 @@ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRange const { slots, slotProps, InputProps, inputProps, ...other } = themeProps; - const ownerState = themeProps; + const ownerState = useFieldOwnerState(themeProps); const TextField = slots?.textField ?? diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts index 90d138c59c32e..027ffbfbdb1de 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts @@ -1,13 +1,14 @@ import * as React from 'react'; -import { SlotComponentProps } from '@mui/utils'; -import TextField from '@mui/material/TextField'; +import { TextFieldProps } from '@mui/material/TextField'; +import { SlotComponentPropsFromProps } from '@mui/x-internals/types'; import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; -import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models'; +import { BuiltInFieldTextFieldProps, FieldOwnerState } from '@mui/x-date-pickers/models'; import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, } from '@mui/x-date-pickers/hooks'; +import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField'; import type { DateRangeValidationError, UseDateRangeFieldProps } from '../models'; export interface UseSingleInputDateRangeFieldProps< @@ -39,23 +40,21 @@ export type SingleInputDateRangeFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: SingleInputDateRangeFieldSlotProps; + slotProps?: SingleInputDateRangeFieldSlotProps; }; export interface SingleInputDateRangeFieldSlots extends UseClearableFieldSlots { /** * Form control with an input to render the value. - * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`. + * @default , or from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`. */ textField?: React.ElementType; } -export interface SingleInputDateRangeFieldSlotProps< - TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseClearableFieldSlotProps { - textField?: SlotComponentProps< - typeof TextField, +export interface SingleInputDateRangeFieldSlotProps extends UseClearableFieldSlotProps { + textField?: SlotComponentPropsFromProps< + PickersTextFieldProps | TextFieldProps, {}, - SingleInputDateRangeFieldProps + FieldOwnerState >; } diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index a6f1348fdce45..f81834fd4ff77 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -2,7 +2,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MuiTextField from '@mui/material/TextField'; -import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals'; +import { + convertFieldResponseIntoMuiTextFieldProps, + useFieldOwnerState, +} from '@mui/x-date-pickers/internals'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { useThemeProps } from '@mui/material/styles'; import { refType } from '@mui/utils'; @@ -40,7 +43,7 @@ const SingleInputDateTimeRangeField = React.forwardRef(function SingleInputDateT const { slots, slotProps, InputProps, inputProps, ...other } = themeProps; - const ownerState = themeProps; + const ownerState = useFieldOwnerState(themeProps); const TextField = slots?.textField ?? diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts index 53079837d53c5..9624ffa1c73e0 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts @@ -1,8 +1,9 @@ import * as React from 'react'; -import { SlotComponentProps } from '@mui/utils'; -import TextField from '@mui/material/TextField'; +import { TextFieldProps } from '@mui/material/TextField'; +import { SlotComponentPropsFromProps } from '@mui/x-internals/types'; +import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField'; import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; -import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models'; +import { BuiltInFieldTextFieldProps, FieldOwnerState } from '@mui/x-date-pickers/models'; import { ExportedUseClearableFieldProps, UseClearableFieldSlots, @@ -40,23 +41,21 @@ export type SingleInputDateTimeRangeFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: SingleInputDateTimeRangeFieldSlotProps; + slotProps?: SingleInputDateTimeRangeFieldSlotProps; }; export interface SingleInputDateTimeRangeFieldSlots extends UseClearableFieldSlots { /** * Form control with an input to render the value. - * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`. + * @default , or from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`. */ textField?: React.ElementType; } -export interface SingleInputDateTimeRangeFieldSlotProps< - TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseClearableFieldSlotProps { - textField?: SlotComponentProps< - typeof TextField, +export interface SingleInputDateTimeRangeFieldSlotProps extends UseClearableFieldSlotProps { + textField?: SlotComponentPropsFromProps< + PickersTextFieldProps | TextFieldProps, {}, - SingleInputDateTimeRangeFieldProps + FieldOwnerState >; } diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index fa4ca315479f5..b820b6a27f605 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -3,7 +3,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MuiTextField from '@mui/material/TextField'; import { useClearableField } from '@mui/x-date-pickers/hooks'; -import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals'; +import { + convertFieldResponseIntoMuiTextFieldProps, + useFieldOwnerState, +} from '@mui/x-date-pickers/internals'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { useThemeProps } from '@mui/material/styles'; import useSlotProps from '@mui/utils/useSlotProps'; @@ -40,7 +43,7 @@ const SingleInputTimeRangeField = React.forwardRef(function SingleInputTimeRange const { slots, slotProps, InputProps, inputProps, ...other } = themeProps; - const ownerState = themeProps; + const ownerState = useFieldOwnerState(themeProps); const TextField = slots?.textField ?? diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts index a1b94ce63cd70..46b019e84e955 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts @@ -1,8 +1,9 @@ import * as React from 'react'; -import { SlotComponentProps } from '@mui/utils'; -import TextField from '@mui/material/TextField'; +import type { TextFieldProps } from '@mui/material/TextField'; import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; -import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models'; +import { BuiltInFieldTextFieldProps, FieldOwnerState } from '@mui/x-date-pickers/models'; +import { SlotComponentPropsFromProps } from '@mui/x-internals/types'; +import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField'; import { ExportedUseClearableFieldProps, UseClearableFieldSlots, @@ -40,23 +41,21 @@ export type SingleInputTimeRangeFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: SingleInputTimeRangeFieldSlotProps; + slotProps?: SingleInputTimeRangeFieldSlotProps; }; export interface SingleInputTimeRangeFieldSlots extends UseClearableFieldSlots { /** * Form control with an input to render the value. - * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`. + * @default , or from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`. */ textField?: React.ElementType; } -export interface SingleInputTimeRangeFieldSlotProps< - TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseClearableFieldSlotProps { - textField?: SlotComponentProps< - typeof TextField, +export interface SingleInputTimeRangeFieldSlotProps extends UseClearableFieldSlotProps { + textField?: SlotComponentPropsFromProps< + PickersTextFieldProps | TextFieldProps, {}, - SingleInputTimeRangeFieldProps + FieldOwnerState >; } 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 5e35864340a99..a858ae3df40b3 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -6,7 +6,12 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps'; import useEventCallback from '@mui/utils/useEventCallback'; import useForkRef from '@mui/utils/useForkRef'; import { SlotComponentPropsFromProps } from '@mui/x-internals/types'; -import { FieldSelectedSections, FieldRef, PickerOwnerState } from '@mui/x-date-pickers/models'; +import { + FieldSelectedSections, + FieldRef, + PickerOwnerState, + FieldOwnerState, +} from '@mui/x-date-pickers/models'; import { UseClearableFieldSlots, UseClearableFieldSlotProps, @@ -28,7 +33,6 @@ import { MultiInputFieldSlotTextFieldProps, RangePosition, FieldType, - UseDateRangeFieldProps, PickerRangeFieldSlotProps, } from '../../models'; import { UseRangePositionResponse } from './useRangePosition'; @@ -61,12 +65,12 @@ export interface RangePickerFieldSlotProps; - fieldRoot?: SlotComponentProps>; - fieldSeparator?: SlotComponentProps>; + fieldRoot?: SlotComponentProps; + fieldSeparator?: SlotComponentProps; textField?: SlotComponentProps< typeof PickersTextField, {}, - UseDateRangeFieldProps & { position?: RangePosition } + FieldOwnerState & { position?: RangePosition } >; } diff --git a/packages/x-date-pickers-pro/src/internals/models/fields.ts b/packages/x-date-pickers-pro/src/internals/models/fields.ts index c0a227ac3f982..016c83a7d8dc4 100644 --- a/packages/x-date-pickers-pro/src/internals/models/fields.ts +++ b/packages/x-date-pickers-pro/src/internals/models/fields.ts @@ -2,6 +2,7 @@ import { SxProps } from '@mui/material/styles'; import { SlotComponentProps } from '@mui/utils'; import { MakeRequired } from '@mui/x-internals/types'; import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; +import { FieldOwnerState } from '@mui/x-date-pickers/models'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import type { MultiInputFieldRefs, @@ -44,15 +45,11 @@ export interface BaseMultiInputFieldProps< textField?: React.ElementType; }; slotProps?: { - root?: SlotComponentProps< - React.ElementType, - {}, - Record - >; + root?: SlotComponentProps, {}, FieldOwnerState>; textField?: SlotComponentProps< typeof PickersTextField, {}, - { position?: RangePosition } & Record + FieldOwnerState & { position?: RangePosition } >; }; } diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index 3bbfb58696940..2d8704ab33107 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -10,6 +10,7 @@ import { useDateField } from './useDateField'; import { useClearableField } from '../hooks'; import { PickersTextField } from '../PickersTextField'; import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps'; +import { useFieldOwnerState } from '../internals/hooks/useFieldOwnerState'; type DateFieldComponent = (( props: DateFieldProps & React.RefAttributes, @@ -35,7 +36,7 @@ const DateField = React.forwardRef(function DateField< const { slots, slotProps, InputProps, inputProps, ...other } = themeProps; - const ownerState = themeProps; + const ownerState = useFieldOwnerState(themeProps); const TextField = slots?.textField ?? diff --git a/packages/x-date-pickers/src/DateField/DateField.types.ts b/packages/x-date-pickers/src/DateField/DateField.types.ts index 57e48ff53e200..7226c4ac65791 100644 --- a/packages/x-date-pickers/src/DateField/DateField.types.ts +++ b/packages/x-date-pickers/src/DateField/DateField.types.ts @@ -1,15 +1,15 @@ import * as React from 'react'; -import { SlotComponentProps } from '@mui/utils'; -import { MakeOptional } from '@mui/x-internals/types'; -import TextField from '@mui/material/TextField'; +import type { TextFieldProps } from '@mui/material/TextField'; +import { MakeOptional, SlotComponentPropsFromProps } from '@mui/x-internals/types'; import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, } from '../hooks/useClearableField'; -import { DateValidationError, BuiltInFieldTextFieldProps } from '../models'; +import { DateValidationError, BuiltInFieldTextFieldProps, FieldOwnerState } from '../models'; import { UseFieldInternalProps } from '../internals/hooks/useField'; import { ExportedValidateDateProps } from '../validation/validateDate'; +import { PickersTextFieldProps } from '../PickersTextField'; import { PickerValue } from '../internals/models'; export interface UseDateFieldProps @@ -37,7 +37,7 @@ export type DateFieldProps; + slotProps?: DateFieldSlotProps; }; export type DateFieldOwnerState = @@ -46,16 +46,15 @@ export type DateFieldOwnerState, or from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`. */ textField?: React.ElementType; } -export interface DateFieldSlotProps - extends UseClearableFieldSlotProps { - textField?: SlotComponentProps< - typeof TextField, +export interface DateFieldSlotProps extends UseClearableFieldSlotProps { + textField?: SlotComponentPropsFromProps< + PickersTextFieldProps | TextFieldProps, {}, - DateFieldOwnerState + FieldOwnerState >; } diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index 231fd9608d3cd..876e25f77ed4c 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -10,6 +10,7 @@ import { useDateTimeField } from './useDateTimeField'; import { useClearableField } from '../hooks'; import { PickersTextField } from '../PickersTextField'; import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps'; +import { useFieldOwnerState } from '../internals/hooks/useFieldOwnerState'; type DateTimeFieldComponent = (( props: DateTimeFieldProps & @@ -39,7 +40,7 @@ const DateTimeField = React.forwardRef(function DateTimeField< const { slots, slotProps, InputProps, inputProps, ...other } = themeProps; - const ownerState = themeProps; + const ownerState = useFieldOwnerState(themeProps); const TextField = slots?.textField ?? diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts index 876545ded3c44..2c3964472c396 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts @@ -1,8 +1,7 @@ import * as React from 'react'; -import { SlotComponentProps } from '@mui/utils'; -import { MakeOptional } from '@mui/x-internals/types'; -import TextField from '@mui/material/TextField'; -import { DateTimeValidationError, BuiltInFieldTextFieldProps } from '../models'; +import { MakeOptional, SlotComponentPropsFromProps } from '@mui/x-internals/types'; +import { TextFieldProps } from '@mui/material/TextField'; +import { DateTimeValidationError, BuiltInFieldTextFieldProps, FieldOwnerState } from '../models'; import { UseFieldInternalProps } from '../internals/hooks/useField'; import { ExportedUseClearableFieldProps, @@ -12,6 +11,7 @@ import { import { ExportedValidateDateTimeProps } from '../validation/validateDateTime'; import { AmPmProps } from '../internals/models/props/time'; import { PickerValue } from '../internals/models'; +import { PickersTextFieldProps } from '../PickersTextField'; export interface UseDateTimeFieldProps extends MakeOptional< @@ -43,25 +43,21 @@ export type DateTimeFieldProps; + slotProps?: DateTimeFieldSlotProps; }; -export type DateTimeFieldOwnerState = - DateTimeFieldProps; - export interface DateTimeFieldSlots extends UseClearableFieldSlots { /** * Form control with an input to render the value. - * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`. + * @default , or from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`. */ textField?: React.ElementType; } -export interface DateTimeFieldSlotProps - extends UseClearableFieldSlotProps { - textField?: SlotComponentProps< - typeof TextField, +export interface DateTimeFieldSlotProps extends UseClearableFieldSlotProps { + textField?: SlotComponentPropsFromProps< + PickersTextFieldProps | TextFieldProps, {}, - DateTimeFieldOwnerState + FieldOwnerState >; } diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index 749c515757d56..571fd5c6b7239 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -10,6 +10,7 @@ import { useTimeField } from './useTimeField'; import { useClearableField } from '../hooks'; import { PickersTextField } from '../PickersTextField'; import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps'; +import { useFieldOwnerState } from '../internals/hooks/useFieldOwnerState'; type TimeFieldComponent = (( props: TimeFieldProps & React.RefAttributes, @@ -35,7 +36,7 @@ const TimeField = React.forwardRef(function TimeField< const { slots, slotProps, InputProps, inputProps, ...other } = themeProps; - const ownerState = themeProps; + const ownerState = useFieldOwnerState(themeProps); const TextField = slots?.textField ?? diff --git a/packages/x-date-pickers/src/TimeField/TimeField.types.ts b/packages/x-date-pickers/src/TimeField/TimeField.types.ts index 9767d48f47d14..819535baa8fb5 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.types.ts +++ b/packages/x-date-pickers/src/TimeField/TimeField.types.ts @@ -1,9 +1,8 @@ import * as React from 'react'; -import { SlotComponentProps } from '@mui/utils'; -import { MakeOptional } from '@mui/x-internals/types'; -import TextField from '@mui/material/TextField'; +import type { TextFieldProps } from '@mui/material/TextField'; +import { MakeOptional, SlotComponentPropsFromProps } from '@mui/x-internals/types'; import { UseFieldInternalProps } from '../internals/hooks/useField'; -import { TimeValidationError, BuiltInFieldTextFieldProps } from '../models'; +import { TimeValidationError, BuiltInFieldTextFieldProps, FieldOwnerState } from '../models'; import { ExportedUseClearableFieldProps, UseClearableFieldSlots, @@ -12,6 +11,7 @@ import { import { ExportedValidateTimeProps } from '../validation/validateTime'; import { AmPmProps } from '../internals/models/props/time'; import { PickerValue } from '../internals/models'; +import { PickersTextFieldProps } from '../PickersTextField'; export interface UseTimeFieldProps extends MakeOptional< @@ -39,25 +39,21 @@ export type TimeFieldProps; + slotProps?: TimeFieldSlotProps; }; -export type TimeFieldOwnerState = - TimeFieldProps; - export interface TimeFieldSlots extends UseClearableFieldSlots { /** * Form control with an input to render the value. - * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`. + * @default , or from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`. */ textField?: React.ElementType; } -export interface TimeFieldSlotProps - extends UseClearableFieldSlotProps { - textField?: SlotComponentProps< - typeof TextField, +export interface TimeFieldSlotProps extends UseClearableFieldSlotProps { + textField?: SlotComponentPropsFromProps< + PickersTextFieldProps | TextFieldProps, {}, - TimeFieldOwnerState + FieldOwnerState >; } diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts index 555db1d6308fb..4bb80f89f2078 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts @@ -1,8 +1,7 @@ import * as React from 'react'; -import IconButton, { IconButtonProps } from '@mui/material/IconButton'; -import { InputAdornmentProps } from '@mui/material/InputAdornment'; -import TextField from '@mui/material/TextField'; -import { SlotComponentProps } from '@mui/utils'; +import type { IconButtonProps } from '@mui/material/IconButton'; +import type { InputAdornmentProps } from '@mui/material/InputAdornment'; +import type { TextFieldProps } from '@mui/material/TextField'; import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types'; import { BaseNonStaticPickerProps, @@ -11,7 +10,12 @@ import { } from '../../models/props/basePickerProps'; import { PickersPopperSlots, PickersPopperSlotProps } from '../../components/PickersPopper'; import { UsePickerParams } from '../usePicker'; -import { PickerFieldSlotProps, PickerOwnerState, PickerValidDate } from '../../../models'; +import { + FieldOwnerState, + PickerFieldSlotProps, + PickerOwnerState, + PickerValidDate, +} from '../../../models'; import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, @@ -24,6 +28,7 @@ import { UseClearableFieldSlots, UseClearableFieldSlotProps, } from '../../../hooks/useClearableField'; +import { PickersTextFieldProps } from '../../../PickersTextField'; export interface UseDesktopPickerSlots extends Pick< @@ -74,9 +79,13 @@ export interface ExportedUseDesktopPickerSlotProps< {}, PickerOwnerState >; - textField?: SlotComponentProps>; + textField?: SlotComponentPropsFromProps< + PickersTextFieldProps | TextFieldProps, + {}, + FieldOwnerState + >; inputAdornment?: SlotComponentPropsFromProps; - openPickerButton?: SlotComponentProps; + openPickerButton?: SlotComponentPropsFromProps; openPickerIcon?: SlotComponentPropsFromProps, {}, PickerOwnerState>; } diff --git a/packages/x-date-pickers/src/internals/hooks/useFieldOwnerState.ts b/packages/x-date-pickers/src/internals/hooks/useFieldOwnerState.ts new file mode 100644 index 0000000000000..bc1c326465dd5 --- /dev/null +++ b/packages/x-date-pickers/src/internals/hooks/useFieldOwnerState.ts @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { FieldOwnerState } from '../../models'; +import { FormProps } from '../models'; +import { usePickerPrivateContext } from './usePickerPrivateContext'; + +export function useFieldOwnerState(parameters: UseFieldOwnerStateParameters) { + const { ownerState: pickerOwnerState } = usePickerPrivateContext(); + + return React.useMemo( + () => ({ + ...pickerOwnerState, + isFieldDisabled: parameters.disabled ?? false, + isFieldReadOnly: parameters.readOnly ?? false, + }), + [pickerOwnerState, parameters.disabled, parameters.readOnly], + ); +} + +interface UseFieldOwnerStateParameters extends FormProps {} diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts index b4d04f06e66ee..375a4d0fc5518 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts @@ -1,6 +1,5 @@ import * as React from 'react'; -import TextField from '@mui/material/TextField'; -import { SlotComponentProps } from '@mui/utils'; +import type { TextFieldProps } from '@mui/material/TextField'; import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types'; import { BaseNonStaticPickerProps, @@ -12,7 +11,12 @@ import { PickersModalDialogSlotProps, } from '../../components/PickersModalDialog'; import { UsePickerParams } from '../usePicker'; -import { PickerFieldSlotProps, PickerOwnerState, PickerValidDate } from '../../../models'; +import { + FieldOwnerState, + PickerFieldSlotProps, + PickerOwnerState, + PickerValidDate, +} from '../../../models'; import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, @@ -21,6 +25,7 @@ import { import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types'; import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews'; import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models'; +import { PickersTextFieldProps } from '../../../PickersTextField'; export interface UseMobilePickerSlots extends PickersModalDialogSlots, @@ -46,7 +51,11 @@ export interface ExportedUseMobilePickerSlotProps< {}, PickerOwnerState >; - textField?: SlotComponentProps>; + textField?: SlotComponentPropsFromProps< + PickersTextFieldProps | TextFieldProps, + {}, + FieldOwnerState + >; } export interface UseMobilePickerSlotProps< diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 73086c769fcb3..e7fd05dff8e3e 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -64,6 +64,7 @@ export type { FieldChangeHandler, FieldChangeHandlerContext, } from './hooks/useField'; +export { useFieldOwnerState } from './hooks/useFieldOwnerState'; export type { MobileOnlyPickerProps } from './hooks/useMobilePicker'; export { usePicker } from './hooks/usePicker'; export type { diff --git a/packages/x-date-pickers/src/models/fields.ts b/packages/x-date-pickers/src/models/fields.ts index 55f14ebdce1ac..05c0c4e0460ff 100644 --- a/packages/x-date-pickers/src/models/fields.ts +++ b/packages/x-date-pickers/src/models/fields.ts @@ -13,6 +13,7 @@ import { PickerRangeValue, PickerValidValue, } from '../internals/models'; +import { PickerOwnerState } from './pickers'; // Update PickersComponentAgnosticLocaleText -> viewNames when adding new entries export type FieldSectionType = @@ -132,6 +133,17 @@ export interface FieldRef { export type FieldSelectedSections = number | FieldSectionType | null | 'all'; +export interface FieldOwnerState extends PickerOwnerState { + /** + * `true` if the field is disabled, `false` otherwise. + */ + isFieldDisabled: boolean; + /** + * `true` if the field is read-only, `false` otherwise. + */ + isFieldReadOnly: boolean; +} + /** * Props the prop `slotProps.field` of a picker can receive. */ diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 8e98bb9492498..36b6475908895 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -157,6 +157,7 @@ { "name": "ExportedUseClearableFieldProps", "kind": "Interface" }, { "name": "extractValidationProps", "kind": "Variable" }, { "name": "FieldFormatTokenMap", "kind": "TypeAlias" }, + { "name": "FieldOwnerState", "kind": "Interface" }, { "name": "FieldRangeSection", "kind": "Interface" }, { "name": "FieldRef", "kind": "Interface" }, { "name": "FieldSection", "kind": "Interface" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 91f2417b53dba..60cb4180bd3c7 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -105,6 +105,7 @@ { "name": "ExportedUseClearableFieldProps", "kind": "Interface" }, { "name": "extractValidationProps", "kind": "Variable" }, { "name": "FieldFormatTokenMap", "kind": "TypeAlias" }, + { "name": "FieldOwnerState", "kind": "Interface" }, { "name": "FieldRef", "kind": "Interface" }, { "name": "FieldSection", "kind": "Interface" }, { "name": "FieldSectionContentType", "kind": "TypeAlias" }, From ca7dd3dd5cc83f2c624d36df32d25d0ceb306383 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Thu, 28 Nov 2024 15:51:16 +0100 Subject: [PATCH 04/35] [DataGrid] Fix scroll error (#15521) --- .../features/virtualization/useGridVirtualScroller.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 499c21a66c40b..1502dfbf4ec61 100644 --- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -267,9 +267,14 @@ export const useGridVirtualScroller = () => { ); const triggerUpdateRenderContext = useEventCallback(() => { + const scroller = scrollerRef.current; + if (!scroller) { + return undefined; + } + const newScroll = { - top: scrollerRef.current!.scrollTop, - left: scrollerRef.current!.scrollLeft, + top: scroller.scrollTop, + left: scroller.scrollLeft, }; const dx = newScroll.left - scrollPosition.current.left; From 00af025c1723e1ca901b281f405ca49f7a77a96d Mon Sep 17 00:00:00 2001 From: Jose C Quintas Jr Date: Thu, 28 Nov 2024 16:13:22 +0100 Subject: [PATCH 05/35] [charts] Remove `labelFontSize` and `tickFontSize` props (#15633) Signed-off-by: Jose C Quintas Jr Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> --- docs/data/charts/axis/AxisWithComposition.js | 6 +- docs/data/charts/axis/AxisWithComposition.tsx | 6 +- .../migration-charts-v7.md | 17 ++++ docs/pages/x/api/charts/bar-chart-pro.json | 4 +- docs/pages/x/api/charts/bar-chart.json | 4 +- .../x/api/charts/chart-container-pro.json | 4 +- docs/pages/x/api/charts/chart-container.json | 4 +- .../x/api/charts/chart-data-provider.json | 4 +- docs/pages/x/api/charts/charts-x-axis.json | 12 --- docs/pages/x/api/charts/charts-y-axis.json | 12 --- docs/pages/x/api/charts/heatmap.json | 4 +- docs/pages/x/api/charts/line-chart-pro.json | 4 +- docs/pages/x/api/charts/line-chart.json | 4 +- docs/pages/x/api/charts/pie-chart.json | 4 +- .../pages/x/api/charts/scatter-chart-pro.json | 4 +- docs/pages/x/api/charts/scatter-chart.json | 4 +- docs/pages/x/api/charts/spark-line-chart.json | 4 +- .../charts/charts-x-axis/charts-x-axis.json | 2 - .../charts/charts-y-axis/charts-y-axis.json | 2 - .../src/BarChartPro/BarChartPro.tsx | 4 - .../ChartContainerPro/ChartContainerPro.tsx | 4 - packages/x-charts-pro/src/Heatmap/Heatmap.tsx | 4 - .../src/LineChartPro/LineChartPro.tsx | 4 - .../src/ScatterChartPro/ScatterChartPro.tsx | 4 - packages/x-charts/src/BarChart/BarChart.tsx | 4 - .../src/ChartContainer/ChartContainer.tsx | 4 - .../x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 18 +--- .../x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 20 +--- packages/x-charts/src/LineChart/LineChart.tsx | 4 - packages/x-charts/src/PieChart/PieChart.tsx | 4 - .../src/ScatterChart/ScatterChart.tsx | 4 - .../src/SparkLineChart/SparkLineChart.tsx | 4 - .../ChartDataProvider/ChartDataProvider.tsx | 4 - packages/x-charts/src/models/axis.ts | 12 --- packages/x-codemod/README.md | 18 ++++ .../v8.0.0/charts/preset-safe/actual.spec.tsx | 14 +++ .../charts/preset-safe/expected.spec.tsx | 26 ++++++ .../src/v8.0.0/charts/preset-safe/index.ts | 2 + .../actual.spec.tsx | 20 ++++ .../expected.spec.tsx | 32 +++++++ .../rename-label-and-tick-font-size/index.ts | 92 +++++++++++++++++++ .../rename-label-and-tick-font-size.test.ts | 38 ++++++++ 42 files changed, 298 insertions(+), 147 deletions(-) create mode 100644 packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/actual.spec.tsx create mode 100644 packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/expected.spec.tsx create mode 100644 packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/index.ts create mode 100644 packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/rename-label-and-tick-font-size.test.ts diff --git a/docs/data/charts/axis/AxisWithComposition.js b/docs/data/charts/axis/AxisWithComposition.js index 725eb3d112a0c..339d380b08ea8 100644 --- a/docs/data/charts/axis/AxisWithComposition.js +++ b/docs/data/charts/axis/AxisWithComposition.js @@ -53,7 +53,11 @@ export default function AxisWithComposition() { > - + diff --git a/docs/data/charts/axis/AxisWithComposition.tsx b/docs/data/charts/axis/AxisWithComposition.tsx index 725eb3d112a0c..339d380b08ea8 100644 --- a/docs/data/charts/axis/AxisWithComposition.tsx +++ b/docs/data/charts/axis/AxisWithComposition.tsx @@ -53,7 +53,11 @@ export default function AxisWithComposition() { > - + diff --git a/docs/data/migration/migration-charts-v7/migration-charts-v7.md b/docs/data/migration/migration-charts-v7/migration-charts-v7.md index edf12e491db7e..72a8ce9490119 100644 --- a/docs/data/migration/migration-charts-v7/migration-charts-v7.md +++ b/docs/data/migration/migration-charts-v7/migration-charts-v7.md @@ -128,3 +128,20 @@ If you used axes in a pie chart please open an issue, we would be curious to get The `resolveSizeBeforeRender` prop has been removed from all components. If you were using this prop, you can safely remove it. + +## Rename `labelFontSize` and `tickFontSize` props ✅ + +The `labelFontSize` and `tickFontSize` props have been removed in favor of the style objects `labelStyle` and `tickStyle` respectively. + +```diff + +``` diff --git a/docs/pages/x/api/charts/bar-chart-pro.json b/docs/pages/x/api/charts/bar-chart-pro.json index e6999eac514e3..3e659753eeeff 100644 --- a/docs/pages/x/api/charts/bar-chart-pro.json +++ b/docs/pages/x/api/charts/bar-chart-pro.json @@ -100,13 +100,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "zoom": { diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index aa9385f93970d..7cb920914914d 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -93,13 +93,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } } }, diff --git a/docs/pages/x/api/charts/chart-container-pro.json b/docs/pages/x/api/charts/chart-container-pro.json index 32ee3b1e532ea..b1a75bf88ef77 100644 --- a/docs/pages/x/api/charts/chart-container-pro.json +++ b/docs/pages/x/api/charts/chart-container-pro.json @@ -44,13 +44,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "zAxis": { diff --git a/docs/pages/x/api/charts/chart-container.json b/docs/pages/x/api/charts/chart-container.json index 3f592ff3b5879..190b36e011f41 100644 --- a/docs/pages/x/api/charts/chart-container.json +++ b/docs/pages/x/api/charts/chart-container.json @@ -37,13 +37,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "zAxis": { diff --git a/docs/pages/x/api/charts/chart-data-provider.json b/docs/pages/x/api/charts/chart-data-provider.json index 001c5b9e16d98..a1464572974db 100644 --- a/docs/pages/x/api/charts/chart-data-provider.json +++ b/docs/pages/x/api/charts/chart-data-provider.json @@ -36,13 +36,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "zAxis": { diff --git a/docs/pages/x/api/charts/charts-x-axis.json b/docs/pages/x/api/charts/charts-x-axis.json index ddfb6a1329f98..eb1c3e2ddf247 100644 --- a/docs/pages/x/api/charts/charts-x-axis.json +++ b/docs/pages/x/api/charts/charts-x-axis.json @@ -6,12 +6,6 @@ "disableTicks": { "type": { "name": "bool" }, "default": "false" }, "fill": { "type": { "name": "string" }, "default": "'currentColor'" }, "label": { "type": { "name": "string" } }, - "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": "{}" }, @@ -21,12 +15,6 @@ "additionalInfo": { "slotsApi": true } }, "stroke": { "type": { "name": "string" }, "default": "'currentColor'" }, - "tickFontSize": { - "type": { "name": "number" }, - "default": "12", - "deprecated": true, - "deprecationInfo": "Consider using tickLabelStyle.fontSize instead." - }, "tickInterval": { "type": { "name": "union", "description": "'auto'
| array
| func" }, "default": "'auto'" diff --git a/docs/pages/x/api/charts/charts-y-axis.json b/docs/pages/x/api/charts/charts-y-axis.json index f7c09f9fe809f..7461e94adc33e 100644 --- a/docs/pages/x/api/charts/charts-y-axis.json +++ b/docs/pages/x/api/charts/charts-y-axis.json @@ -6,12 +6,6 @@ "disableTicks": { "type": { "name": "bool" }, "default": "false" }, "fill": { "type": { "name": "string" }, "default": "'currentColor'" }, "label": { "type": { "name": "string" } }, - "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": "{}" }, @@ -21,12 +15,6 @@ "additionalInfo": { "slotsApi": true } }, "stroke": { "type": { "name": "string" }, "default": "'currentColor'" }, - "tickFontSize": { - "type": { "name": "number" }, - "default": "12", - "deprecated": true, - "deprecationInfo": "Consider using tickLabelStyle.fontSize instead." - }, "tickInterval": { "type": { "name": "union", "description": "'auto'
| array
| func" }, "default": "'auto'" diff --git a/docs/pages/x/api/charts/heatmap.json b/docs/pages/x/api/charts/heatmap.json index 0e42547e39664..f5f3665c76b52 100644 --- a/docs/pages/x/api/charts/heatmap.json +++ b/docs/pages/x/api/charts/heatmap.json @@ -7,14 +7,14 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" }, "required": true }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" }, "required": true }, diff --git a/docs/pages/x/api/charts/line-chart-pro.json b/docs/pages/x/api/charts/line-chart-pro.json index da018ce784243..83f6174cd1b0c 100644 --- a/docs/pages/x/api/charts/line-chart-pro.json +++ b/docs/pages/x/api/charts/line-chart-pro.json @@ -93,13 +93,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "zoom": { diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index 6ecb8a0d46335..a03a00045fa09 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -86,13 +86,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } } }, diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index d4b6bfe884d33..090da6099a855 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/docs/pages/x/api/charts/pie-chart.json @@ -45,13 +45,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } } }, diff --git a/docs/pages/x/api/charts/scatter-chart-pro.json b/docs/pages/x/api/charts/scatter-chart-pro.json index bca0f97741f71..b83ffebebd564 100644 --- a/docs/pages/x/api/charts/scatter-chart-pro.json +++ b/docs/pages/x/api/charts/scatter-chart-pro.json @@ -90,13 +90,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "zAxis": { diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index f573b3e0ab7f3..9826eff4a7fea 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -83,13 +83,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "zAxis": { diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json index 683d2ce39d353..479e3b2ef2300 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -58,13 +58,13 @@ "xAxis": { "type": { "name": "shape", - "description": "{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }" + "description": "{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }" } }, "yAxis": { "type": { "name": "shape", - "description": "{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }" + "description": "{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }" } } }, diff --git a/docs/translations/api-docs/charts/charts-x-axis/charts-x-axis.json b/docs/translations/api-docs/charts/charts-x-axis/charts-x-axis.json index cebaff3cbde62..ee0ed5632e558 100644 --- a/docs/translations/api-docs/charts/charts-x-axis/charts-x-axis.json +++ b/docs/translations/api-docs/charts/charts-x-axis/charts-x-axis.json @@ -9,13 +9,11 @@ "disableTicks": { "description": "If true, the ticks are disabled." }, "fill": { "description": "The fill color of the axis text." }, "label": { "description": "The label of the axis." }, - "labelFontSize": { "description": "The font size of the axis label." }, "labelStyle": { "description": "The style applied to the axis label." }, "position": { "description": "Position of the axis." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." }, "stroke": { "description": "The stroke color of the axis line." }, - "tickFontSize": { "description": "The font size of the axis ticks text." }, "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 "point" scale. - an array containing the values where ticks should be displayed." }, diff --git a/docs/translations/api-docs/charts/charts-y-axis/charts-y-axis.json b/docs/translations/api-docs/charts/charts-y-axis/charts-y-axis.json index cebaff3cbde62..ee0ed5632e558 100644 --- a/docs/translations/api-docs/charts/charts-y-axis/charts-y-axis.json +++ b/docs/translations/api-docs/charts/charts-y-axis/charts-y-axis.json @@ -9,13 +9,11 @@ "disableTicks": { "description": "If true, the ticks are disabled." }, "fill": { "description": "The fill color of the axis text." }, "label": { "description": "The label of the axis." }, - "labelFontSize": { "description": "The font size of the axis label." }, "labelStyle": { "description": "The style applied to the axis label." }, "position": { "description": "Position of the axis." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." }, "stroke": { "description": "The stroke color of the axis line." }, - "tickFontSize": { "description": "The font size of the axis ticks text." }, "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 "point" scale. - an array containing the values where ticks should be displayed." }, diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx index 2c08c454d5757..e05075227db07 100644 --- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx @@ -329,7 +329,6 @@ BarChartPro.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -344,7 +343,6 @@ BarChartPro.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, @@ -417,7 +415,6 @@ BarChartPro.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -432,7 +429,6 @@ BarChartPro.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, diff --git a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx index f6f9ff734c349..08ba8aa740863 100644 --- a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx +++ b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx @@ -159,7 +159,6 @@ ChartContainerPro.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -174,7 +173,6 @@ ChartContainerPro.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, @@ -247,7 +245,6 @@ ChartContainerPro.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -262,7 +259,6 @@ ChartContainerPro.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, diff --git a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx index 7f72b1acbe20f..26faafd97aad4 100644 --- a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx +++ b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx @@ -366,7 +366,6 @@ Heatmap.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -381,7 +380,6 @@ Heatmap.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, @@ -456,7 +454,6 @@ Heatmap.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -471,7 +468,6 @@ Heatmap.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index 82b9a6d5c5bcf..ff78f27a7b710 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -401,7 +401,6 @@ LineChartPro.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -416,7 +415,6 @@ LineChartPro.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, @@ -489,7 +487,6 @@ LineChartPro.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -504,7 +501,6 @@ LineChartPro.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx index b8fd1543b725b..598f9f88b786d 100644 --- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx +++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx @@ -267,7 +267,6 @@ ScatterChartPro.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -282,7 +281,6 @@ ScatterChartPro.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, @@ -355,7 +353,6 @@ ScatterChartPro.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -370,7 +367,6 @@ ScatterChartPro.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index e437a1a68821e..5722559367505 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -339,7 +339,6 @@ BarChart.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -354,7 +353,6 @@ BarChart.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, @@ -415,7 +413,6 @@ BarChart.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -430,7 +427,6 @@ BarChart.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx index a938fb051e305..f9a7471628a47 100644 --- a/packages/x-charts/src/ChartContainer/ChartContainer.tsx +++ b/packages/x-charts/src/ChartContainer/ChartContainer.tsx @@ -169,7 +169,6 @@ ChartContainer.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -184,7 +183,6 @@ ChartContainer.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, @@ -245,7 +243,6 @@ ChartContainer.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -260,7 +257,6 @@ ChartContainer.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 579af7bb63bbd..4940c349ad64c 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -126,8 +126,6 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { tickLabelStyle, label, labelStyle, - tickFontSize, - labelFontSize, tickSize: tickSizeProp, valueFormatter, slots, @@ -157,9 +155,9 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { externalSlotProps: slotProps?.axisTickLabel, additionalProps: { style: { + fontSize: 12, textAnchor: 'middle', dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', - fontSize: tickFontSize ?? 12, ...tickLabelStyle, }, } as Partial, @@ -193,7 +191,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { externalSlotProps: slotProps?.axisLabel, additionalProps: { style: { - fontSize: labelFontSize ?? 14, + fontSize: 14, textAnchor: 'middle', dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', ...labelStyle, @@ -290,12 +288,6 @@ ChartsXAxis.propTypes = { * The label of the axis. */ label: PropTypes.string, - /** - * 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. */ @@ -324,12 +316,6 @@ ChartsXAxis.propTypes = { PropTypes.func, PropTypes.object, ]), - /** - * 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: diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index f3f6260181409..0c79475fd09e5 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -39,8 +39,6 @@ const defaultProps = { position: 'left', disableLine: false, disableTicks: false, - tickFontSize: 12, - labelFontSize: 14, tickSize: 6, } as const; @@ -68,9 +66,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { position, disableLine, disableTicks, - tickFontSize, label, - labelFontSize, labelStyle, tickLabelStyle, tickSize: tickSizeProp, @@ -104,6 +100,8 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { const positionSign = position === 'right' ? 1 : -1; + const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : 12; + const labelRefPoint = { x: positionSign * (tickFontSize + tickSize + 10), y: top + height / 2, @@ -135,7 +133,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { externalSlotProps: slotProps?.axisLabel, additionalProps: { style: { - fontSize: labelFontSize, + fontSize: 14, angle: positionSign * 90, textAnchor: 'middle', dominantBaseline: 'auto', @@ -248,12 +246,6 @@ ChartsYAxis.propTypes = { * The label of the axis. */ label: PropTypes.string, - /** - * 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. */ @@ -282,12 +274,6 @@ ChartsYAxis.propTypes = { PropTypes.func, PropTypes.object, ]), - /** - * 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: diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 6b36690dca8cc..80fa8dc686671 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -373,7 +373,6 @@ LineChart.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -388,7 +387,6 @@ LineChart.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, @@ -449,7 +447,6 @@ LineChart.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -464,7 +461,6 @@ LineChart.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index 77bd0de044aee..4af810a6ed04d 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -274,7 +274,6 @@ PieChart.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -289,7 +288,6 @@ PieChart.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, @@ -350,7 +348,6 @@ PieChart.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -365,7 +362,6 @@ PieChart.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 3ccd27d56903f..65d5e8bc460ee 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -333,7 +333,6 @@ ScatterChart.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -348,7 +347,6 @@ ScatterChart.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, @@ -409,7 +407,6 @@ ScatterChart.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -424,7 +421,6 @@ ScatterChart.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index 0499352f51323..2b7024ace2881 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -397,7 +397,6 @@ SparkLineChart.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -412,7 +411,6 @@ SparkLineChart.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), @@ -464,7 +462,6 @@ SparkLineChart.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -479,7 +476,6 @@ SparkLineChart.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), diff --git a/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx b/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx index a75f2d7060b51..829f9e9ae3e73 100644 --- a/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx +++ b/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx @@ -209,7 +209,6 @@ ChartDataProvider.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -224,7 +223,6 @@ ChartDataProvider.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, @@ -285,7 +283,6 @@ ChartDataProvider.propTypes = { hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, 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]), @@ -300,7 +297,6 @@ ChartDataProvider.propTypes = { PropTypes.func, PropTypes.object, ]), - tickFontSize: PropTypes.number, tickInterval: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), PropTypes.array, diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index b8394900048e5..3888d645d94d5 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -86,12 +86,6 @@ export interface ChartsAxisProps extends TickParams { * @default 'currentColor' */ fill?: string; - /** - * The font size of the axis ticks text. - * @default 12 - * @deprecated Consider using `tickLabelStyle.fontSize` instead. - */ - tickFontSize?: number; /** * The style applied to ticks text. */ @@ -111,12 +105,6 @@ export interface ChartsAxisProps extends TickParams { * The label of the axis. */ label?: string; - /** - * The font size of the axis label. - * @default 14 - * @deprecated Consider using `labelStyle.fontSize` instead. - */ - labelFontSize?: number; /** * The stroke color of the axis line. * @default 'currentColor' diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md index 1537575f518eb..2044b38e332eb 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -136,6 +136,7 @@ The list includes these transformers - [`rename-legend-to-slots-legend`](#rename-legend-to-slots-legend) - [`rename-responsive-chart-container`](#rename-responsive-chart-container) +- [`rename-label-and-tick-font-size`](#rename-label-and-tick-font-size) #### `rename-legend-to-slots-legend` @@ -175,6 +176,23 @@ Verify the git diff to remove the duplicate. ::: +#### `rename-label-and-tick-font-size` + +Renames `labelFontSize` and `tickFontSize` props to the corresponding `xxxStyle` prop. + +```diff + +``` + ## v7.0.0 ### 🚀 `preset-safe` for v7.0.0 diff --git a/packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx index 40aecf34651aa..849585a97e2fb 100644 --- a/packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx +++ b/packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import { PieChart } from '@mui/x-charts/PieChart'; import { BarPlot } from '@mui/x-charts/BarChart'; import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; // prettier-ignore
@@ -11,4 +12,17 @@ import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer + + +
; diff --git a/packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx index 6f80f49b4e3a2..139cad04ca12c 100644 --- a/packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx +++ b/packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import { PieChart } from '@mui/x-charts/PieChart'; import { BarPlot } from '@mui/x-charts/BarChart'; import { ChartContainer } from '@mui/x-charts/ChartContainer'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; // prettier-ignore
@@ -18,4 +19,29 @@ import { ChartContainer } from '@mui/x-charts/ChartContainer'; + + +
; diff --git a/packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts b/packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts index e862d1d084a2e..3fdc6150db550 100644 --- a/packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts +++ b/packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts @@ -1,11 +1,13 @@ import transformLegendToSlots from '../rename-legend-to-slots-legend'; import transformRemoveResponsiveContainer from '../rename-responsive-chart-container'; +import transformRenameLabelAndTickFontSize from '../rename-label-and-tick-font-size'; import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { file.source = transformLegendToSlots(file, api, options); file.source = transformRemoveResponsiveContainer(file, api, options); + file.source = transformRenameLabelAndTickFontSize(file, api, options); return file.source; } diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/actual.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/actual.spec.tsx new file mode 100644 index 0000000000000..0bf12b0e855d8 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/actual.spec.tsx @@ -0,0 +1,20 @@ +// @ts-nocheck +import * as React from 'react'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; + +// prettier-ignore +
+ + + +
; diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/expected.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/expected.spec.tsx new file mode 100644 index 0000000000000..6ff9ea963b5da --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/expected.spec.tsx @@ -0,0 +1,32 @@ +// @ts-nocheck +import * as React from 'react'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; + +// prettier-ignore +
+ + + +
; diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/index.ts b/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/index.ts new file mode 100644 index 0000000000000..cc8380692d079 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/index.ts @@ -0,0 +1,92 @@ +import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; +import { transformNestedProp } from '../../../util/addComponentsSlots'; +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { + const j = api.jscodeshift; + + const printOptions = options.printOptions; + + const root = j(file.source); + + root + .find(j.ImportDeclaration) + .filter(({ node }) => { + return typeof node.source.value === 'string' && node.source.value.startsWith('@mui/x-charts'); + }) + .forEach((path) => { + path.node.specifiers?.forEach((node) => { + root.findJSXElements(node.local?.name).forEach((elementPath) => { + if (elementPath.node.type !== 'JSXElement') { + return; + } + + ['label', 'tick'].forEach((attributeName) => { + const attributeValue = elementPath.node.openingElement.attributes?.find( + (elementNode) => + elementNode.type === 'JSXAttribute' && + elementNode.name.name === `${attributeName}FontSize`, + ); + + if (!attributeValue) { + return; + } + + const attributeStyle = elementPath.node.openingElement.attributes?.find( + (elementNode) => + elementNode.type === 'JSXAttribute' && + elementNode.name.name === `${attributeName}Style`, + ); + + // @ts-ignore receives an object. + const styleValue = attributeStyle?.value.expression.properties.find( + (prop) => prop.key.name === 'fontSize', + ); + + if (attributeStyle === null) { + // We create a new "style" object + elementPath.node.openingElement.attributes?.push( + j.jsxAttribute( + j.jsxIdentifier(`${attributeName}Style`), + j.jsxExpressionContainer( + j.objectExpression([ + j.objectProperty( + j.identifier('fontSize'), + // @ts-ignore receives an object. + attributeValue.value.expression, + ), + ]), + ), + ), + ); + } else { + transformNestedProp( + elementPath, + `${attributeName}Style`, + 'fontSize', + // @ts-ignore receives an object. + styleValue?.value ?? attributeValue.value.expression, + j, + ); + } + }); + + // Remove the legend prop + j(elementPath) + .find(j.JSXAttribute) + .filter( + (a) => a.value.name.name === 'labelFontSize' || a.value.name.name === 'tickFontSize', + ) + .forEach((pathToRemove) => { + j(pathToRemove).remove(); + }); + }); + }); + }); + + const transformed = root.findJSXElements(); + + return transformed.toSource(printOptions); +} diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/rename-label-and-tick-font-size.test.ts b/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/rename-label-and-tick-font-size.test.ts new file mode 100644 index 0000000000000..0d3f4daddffaa --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/rename-label-and-tick-font-size.test.ts @@ -0,0 +1,38 @@ +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('v8.0.0/charts', () => { + describe('rename-label-and-tick-font-size.test', () => { + const actualPath = `./actual.spec.tsx`; + const expectedPath = `./expected.spec.tsx`; + + it('transforms imports as needed', () => { + const actual = transform( + { source: read(actualPath) }, + { jscodeshift: jscodeshift.withParser('tsx') }, + {}, + ); + + const expected = read(expectedPath); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read(expectedPath) }, + { jscodeshift: jscodeshift.withParser('tsx') }, + {}, + ); + + const expected = read(expectedPath); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); +}); From d97eabc4abf12c6d72aaf2d0cd9e0241d73ea0f9 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Thu, 28 Nov 2024 16:16:40 +0100 Subject: [PATCH 06/35] [pickers] Use new `ownerState` object in `` and `` (#15498) --- .../DateTimeRangePicker/DateTimeRangePickerTabs.tsx | 13 ++++++++----- .../src/DateTimePicker/DateTimePickerTabs.tsx | 13 ++++++++----- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx index a4139a783f6c6..e2c0511949eba 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx @@ -11,7 +11,9 @@ import { BaseTabsProps, ExportedBaseTabsProps, isDatePickerView, + usePickerPrivateContext, } from '@mui/x-date-pickers/internals'; +import { PickerOwnerState } from '@mui/x-date-pickers/models'; import { usePickerTranslations } from '@mui/x-date-pickers/hooks'; import IconButton from '@mui/material/IconButton'; import Button from '@mui/material/Button'; @@ -67,8 +69,7 @@ export interface DateTimeRangePickerTabsProps BaseTabsProps, Pick {} -const useUtilityClasses = (ownerState: DateTimeRangePickerTabsProps) => { - const { classes } = ownerState; +const useUtilityClasses = (classes: Partial | undefined) => { const slots = { root: ['root'], tabButton: ['tabButton'], @@ -83,7 +84,7 @@ const DateTimeRangePickerTabsRoot = styled('div', { name: 'MuiDateTimeRangePickerTabs', slot: 'Root', overridesResolver: (_, styles) => styles.root, -})<{ ownerState: DateTimeRangePickerTabsProps }>(({ theme }) => ({ +})<{ ownerState: PickerOwnerState }>(({ theme }) => ({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', @@ -120,11 +121,13 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs( rangePosition, onRangePositionChange, className, + classes: classesProp, sx, } = props; const translations = usePickerTranslations(); - const classes = useUtilityClasses(props); + const { ownerState } = usePickerPrivateContext(); + const classes = useUtilityClasses(classesProp); const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]); const isPreviousHidden = value === 'start-date'; const isNextHidden = value === 'end-time'; @@ -175,7 +178,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs( return ( diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx index ea833fccc8777..480365be10cfb 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx @@ -15,6 +15,8 @@ import { } from './dateTimePickerTabsClasses'; import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs'; import { isDatePickerView } from '../internals/utils/date-utils'; +import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext'; +import { PickerOwnerState } from '../models/pickers'; type TabValue = 'date' | 'time'; @@ -60,8 +62,7 @@ export interface DateTimePickerTabsProps extends ExportedDateTimePickerTabsProps, BaseTabsProps {} -const useUtilityClasses = (ownerState: DateTimePickerTabsProps) => { - const { classes } = ownerState; +const useUtilityClasses = (classes: Partial | undefined) => { const slots = { root: ['root'], }; @@ -73,7 +74,7 @@ const DateTimePickerTabsRoot = styled(Tabs, { name: 'MuiDateTimePickerTabs', slot: 'Root', overridesResolver: (_, styles) => styles.root, -})<{ ownerState: DateTimePickerTabsProps }>(({ theme }) => ({ +})<{ ownerState: PickerOwnerState }>(({ theme }) => ({ boxShadow: `0 -1px 0 0 inset ${(theme.vars || theme).palette.divider}`, '&:last-child': { boxShadow: `0 1px 0 0 inset ${(theme.vars || theme).palette.divider}`, @@ -103,11 +104,13 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa view, hidden = typeof window === 'undefined' || window.innerHeight < 667, className, + classes: classesProp, sx, } = props; const translations = usePickerTranslations(); - const classes = useUtilityClasses(props); + const { ownerState } = usePickerPrivateContext(); + const classes = useUtilityClasses(classesProp); const handleChange = (event: React.SyntheticEvent, value: TabValue) => { onViewChange(tabToView(value)); @@ -119,7 +122,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa return ( Date: Fri, 29 Nov 2024 00:44:55 +0100 Subject: [PATCH 07/35] [core] Match action with man repo In case we start to use the next branch again. --- .github/workflows/create-cherry-pick-pr.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/create-cherry-pick-pr.yml b/.github/workflows/create-cherry-pick-pr.yml index 524b9dc6c78ee..fdfe07ff19c31 100644 --- a/.github/workflows/create-cherry-pick-pr.yml +++ b/.github/workflows/create-cherry-pick-pr.yml @@ -2,6 +2,7 @@ name: Create cherry-pick PR on: pull_request_target: branches: + - 'next' - 'v*.x' - 'master' types: ['closed'] From 1cbacd74a776166e93e0d68d2eec9cc05bf9abf2 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert <77863078+lhilgert9@users.noreply.github.com> Date: Fri, 29 Nov 2024 08:23:38 +0100 Subject: [PATCH 08/35] [l10n] Improve German (de-DE) locale (#15610) --- docs/data/data-grid/localization/data.json | 2 +- packages/x-data-grid/src/locales/deDE.ts | 21 +++++++++++---------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json index f36d84f29e31a..7f417b90cd6de 100644 --- a/docs/data/data-grid/localization/data.json +++ b/docs/data/data-grid/localization/data.json @@ -99,7 +99,7 @@ "languageTag": "de-DE", "importName": "deDE", "localeName": "German", - "missingKeysCount": 10, + "missingKeysCount": 0, "totalKeysCount": 132, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/deDE.ts" }, diff --git a/packages/x-data-grid/src/locales/deDE.ts b/packages/x-data-grid/src/locales/deDE.ts index 64e680eb5428b..26162e1b4146a 100644 --- a/packages/x-data-grid/src/locales/deDE.ts +++ b/packages/x-data-grid/src/locales/deDE.ts @@ -32,15 +32,16 @@ const deDEGrid: Partial = { toolbarQuickFilterDeleteIconLabel: 'Löschen', // Prompt toolbar field - // toolbarPromptControlPlaceholder: 'Type a prompt…', - // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…', - // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…', - // toolbarPromptControlLabel: 'Prompt input', - // toolbarPromptControlRecordButtonDefaultLabel: 'Record', - // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording', - // toolbarPromptControlSendActionLabel: 'Send', - // toolbarPromptControlSendActionAriaLabel: 'Send prompt', - // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.', + toolbarPromptControlPlaceholder: 'Prompt eingeben…', + toolbarPromptControlWithRecordingPlaceholder: 'Prompt eingeben oder aufnehmen…', + toolbarPromptControlRecordingPlaceholder: 'Hört Prompteingabe zu…', + toolbarPromptControlLabel: 'Prompteingabe', + toolbarPromptControlRecordButtonDefaultLabel: 'Aufnahme starten', + toolbarPromptControlRecordButtonActiveLabel: 'Aufnahme stoppen', + toolbarPromptControlSendActionLabel: 'Senden', + toolbarPromptControlSendActionAriaLabel: 'Prompt senden', + toolbarPromptControlErrorMessage: + 'Ein Fehler ist während der Bearbeitung der Anfrage aufgetreten. Bitte versuche es nochmal mit einem anderen Prompt.', // Export selector toolbar button text toolbarExport: 'Exportieren', @@ -54,7 +55,7 @@ const deDEGrid: Partial = { columnsManagementNoColumns: 'Keine Spalten', columnsManagementShowHideAllText: 'Alle anzeigen/verbergen', columnsManagementReset: 'Zurücksetzen', - // columnsManagementDeleteIconLabel: 'Clear', + columnsManagementDeleteIconLabel: 'Löschen', // Filter panel text filterPanelAddFilter: 'Filter hinzufügen', From fa4a01b6f2f5aa8463543c808eed46dee2284672 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 29 Nov 2024 14:00:42 +0200 Subject: [PATCH 09/35] Bump MUI Core to ^5.16.8 (#15644) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Jose Quintas Co-authored-by: Lukas --- docs/package.json | 12 +- .../components/CustomizationPlayground.tsx | 6 + docs/src/modules/components/DemoPropsForm.tsx | 3 + .../modules/components/PickersPlayground.tsx | 6 + .../components/overview/CommunityOrPro.tsx | 4 + .../components/overview/DateLibraries.tsx | 3 + .../components/overview/FeatureHighlight.tsx | 3 + .../overview/Internationalization.tsx | 4 + .../modules/components/overview/Keyboard.tsx | 2 + .../src/modules/components/overview/XLogo.tsx | 1 + .../components/overview/mainDemo/Birthday.tsx | 1 + .../overview/mainDemo/DigitalClock.tsx | 1 + .../overview/mainDemo/FlightPicker.tsx | 1 + package.json | 8 +- packages/x-charts-pro/package.json | 4 +- packages/x-charts/package.json | 4 +- packages/x-data-grid-generator/package.json | 4 +- packages/x-data-grid-premium/package.json | 4 +- packages/x-data-grid-pro/package.json | 4 +- packages/x-data-grid/package.json | 4 +- packages/x-date-pickers-pro/package.json | 4 +- packages/x-date-pickers/package.json | 4 +- packages/x-tree-view-pro/package.json | 4 +- packages/x-tree-view/package.json | 4 +- pnpm-lock.yaml | 292 +++++++++--------- test/package.json | 2 +- 26 files changed, 212 insertions(+), 177 deletions(-) diff --git a/docs/package.json b/docs/package.json index d1c9be115c6e8..53fe6eb201c7e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -28,14 +28,14 @@ "@emotion/server": "^11.11.0", "@emotion/styled": "^11.13.5", "@mui/docs": "6.1.9", - "@mui/icons-material": "^5.16.7", + "@mui/icons-material": "^5.16.8", "@mui/joy": "^5.0.0-beta.48", "@mui/lab": "^5.0.0-alpha.173", - "@mui/material": "^5.16.7", - "@mui/material-nextjs": "^5.16.6", - "@mui/styles": "^5.16.7", - "@mui/system": "^5.16.7", - "@mui/utils": "^5.16.6", + "@mui/material": "^5.16.8", + "@mui/material-nextjs": "^5.16.8", + "@mui/styles": "^5.16.8", + "@mui/system": "^5.16.8", + "@mui/utils": "^5.16.8", "@mui/x-charts": "workspace:*", "@mui/x-charts-vendor": "workspace:*", "@mui/x-data-grid": "workspace:*", diff --git a/docs/src/modules/components/CustomizationPlayground.tsx b/docs/src/modules/components/CustomizationPlayground.tsx index 8f82c2c0dc306..2c2b6b72f0844 100644 --- a/docs/src/modules/components/CustomizationPlayground.tsx +++ b/docs/src/modules/components/CustomizationPlayground.tsx @@ -144,6 +144,7 @@ function StylingApproachTabs({ value, onChange, options }: TabsProps) { }} > @@ -240,6 +241,7 @@ function ColorSwitcher({ }) { return ( + {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} Color {(Object.keys(DEFAULT_COLORS) as Array).map((color) => ( @@ -354,6 +357,7 @@ const CustomizationPlayground = function CustomizationPlayground({ + {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} Components {availableSlots && ( + {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} Slots {(availableSlots as string[]).map((slot: string) => ( @@ -388,6 +393,7 @@ const CustomizationPlayground = function CustomizationPlayground({ )} + {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} Playground diff --git a/docs/src/modules/components/DemoPropsForm.tsx b/docs/src/modules/components/DemoPropsForm.tsx index 6af4554500ddb..c095e77e5b0b0 100644 --- a/docs/src/modules/components/DemoPropsForm.tsx +++ b/docs/src/modules/components/DemoPropsForm.tsx @@ -193,10 +193,12 @@ export default function ChartDemoPropsForm({ component="h3" fontWeight="bold" sx={{ scrollMarginTop: 160, fontFamily: 'General Sans' }} + // eslint-disable-next-line material-ui/no-hardcoded-labels > Playground onPropsChange(initialProps)} @@ -427,6 +429,7 @@ export default function ChartDemoPropsForm({ if (knob === 'placement') { return ( + {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} Placement + {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} Undefined + {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} True + {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} False } @@ -270,6 +273,7 @@ function ViewSwitcher({ return ( + {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} Available views @@ -544,6 +548,7 @@ export default function PickersPlayground() { > + {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} Selected components