[charts] Add ownerState function to slotProps typing when availab…

…le (mui#13965)
thomasmoon · Sep 6, 2024 · 3cef882 · 3cef882
1 parent f9c1815
commit 3cef882
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 8 deletions.
diff --git a/packages/x-charts/src/BarChart/BarElement.tsx b/packages/x-charts/src/BarChart/BarElement.tsx
@@ -7,6 +7,7 @@ import { styled } from '@mui/material/styles';
 import { color as d3Color } from 'd3-color';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { AnimatedProps, animated } from '@react-spring/web';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { SeriesId } from '../models/seriesType/common';
 import { useItemHighlighted } from '../context';
@@ -78,9 +79,8 @@ export interface BarElementSlots {
    */
   bar?: React.ElementType<BarProps>;
 }
-
 export interface BarElementSlotProps {
-  bar?: Partial<BarProps>;
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
 }
 
 export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> &

diff --git a/packages/x-charts/src/BarChart/BarLabel/BarLabelItem.tsx b/packages/x-charts/src/BarChart/BarLabel/BarLabelItem.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import PropTypes from 'prop-types';
+import { SlotComponentPropsFromProps } from '../../internals/SlotComponentPropsFromProps';
 import { useUtilityClasses } from './barLabelClasses';
 import { BarLabelOwnerState, BarItem, BarLabelContext } from './BarLabel.types';
 import { getBarLabel } from './getBarLabel';
@@ -16,7 +17,7 @@ export interface BarLabelSlots {
 }
 
 export interface BarLabelSlotProps {
-  barLabel?: Partial<BarLabelProps>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
 }
 
 export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighlighted'> &

diff --git a/packages/x-charts/src/ChartsOverlay/ChartsOverlay.tsx b/packages/x-charts/src/ChartsOverlay/ChartsOverlay.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
 import { useSeries } from '../hooks/useSeries';
 import { SeriesId } from '../models/seriesType/common';
@@ -39,8 +40,8 @@ export interface ChartsOverlaySlots {
   noDataOverlay?: React.ElementType<CommonOverlayProps>;
 }
 export interface ChartsOverlaySlotProps {
-  loadingOverlay?: Partial<CommonOverlayProps>;
-  noDataOverlay?: Partial<CommonOverlayProps>;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
 }
 
 export interface ChartsOverlayProps {

diff --git a/packages/x-charts/src/LineChart/AreaElement.tsx b/packages/x-charts/src/LineChart/AreaElement.tsx
@@ -4,6 +4,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { AnimatedArea, AnimatedAreaProps } from './AnimatedArea';
 import { SeriesId } from '../models/seriesType/common';
@@ -57,7 +58,7 @@ export interface AreaElementSlots {
 }
 
 export interface AreaElementSlotProps {
-  area?: AnimatedAreaProps;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
 }
 
 export interface AreaElementProps

diff --git a/packages/x-charts/src/LineChart/LineElement.tsx b/packages/x-charts/src/LineChart/LineElement.tsx
@@ -4,6 +4,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { AnimatedLine, AnimatedLineProps } from './AnimatedLine';
 import { SeriesId } from '../models/seriesType/common';
@@ -57,7 +58,7 @@ export interface LineElementSlots {
 }
 
 export interface LineElementSlotProps {
-  line?: AnimatedLineProps;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
 }
 
 export interface LineElementProps

diff --git a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { LineHighlightElement, LineHighlightElementProps } from './LineHighlightElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
@@ -14,7 +15,7 @@ export interface LineHighlightPlotSlots {
 }
 
 export interface LineHighlightPlotSlotProps {
-  lineHighlight?: Partial<LineHighlightElementProps>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
 }
 
 export interface LineHighlightPlotProps extends React.SVGAttributes<SVGSVGElement> {

diff --git a/packages/x-charts/src/internals/SlotComponentPropsFromProps.ts b/packages/x-charts/src/internals/SlotComponentPropsFromProps.ts
@@ -0,0 +1,5 @@
+export type SlotComponentPropsFromProps<
+  TProps extends {},
+  TOverrides extends {},
+  TOwnerState extends {},
+> = (Partial<TProps> & TOverrides) | ((ownerState: TOwnerState) => Partial<TProps> & TOverrides);