@mui/x-charts 8.0.0-alpha.6 → 8.0.0-alpha.7

package/context/SizeProvider/useChartContainerDimensions.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export declare const useChartContainerDimensions: (inWidth?: number, inHeight?: number) => {
-    svgRef: React.RefObject<SVGSVGElement>;
+    svgRef: React.RefObject<SVGSVGElement | null>;
     width: number;
     height: number;
     hasIntrinsicSize: boolean;

package/hooks/index.d.ts

@@ -5,3 +5,4 @@ export * from './useAxis';
 export * from './useColorScale';
 export * from './useSvgRef';
 export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries, } from './useSeries';
+export * from './useLegend';

package/hooks/index.js

@@ -4,4 +4,5 @@ export * from "./useScale.js";
 export * from "./useAxis.js";
 export * from "./useColorScale.js";
 export * from "./useSvgRef.js";
-export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from "./useSeries.js";
+export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from "./useSeries.js";
+export * from "./useLegend.js";

package/hooks/useLegend.d.ts

@@ -0,0 +1,13 @@
+import type { LegendItemParams } from '../ChartsLegend';
+/**
+ * Get the legend items to display.
+ *
+ * This hook is used by the `ChartsLegend` component. And will return the legend items formatted for display.
+ *
+ * An alternative is to use the `useSeries` hook and format the legend items yourself.
+ *
+ * @returns legend data
+ */
+export declare function useLegend(): {
+    items: LegendItemParams[];
+};

package/{modern/ChartsLegend/utils.js → hooks/useLegend.js}

@@ -1,16 +1,35 @@
+'use client';
+
 import getBarLegend from "../BarChart/legend.js";
 import getScatterLegend from "../ScatterChart/legend.js";
 import getLineLegend from "../LineChart/legend.js";
 import getPieLegend from "../PieChart/legend.js";
+import { useSeries } from "./useSeries.js";
 const legendGetter = {
   bar: getBarLegend,
   scatter: getScatterLegend,
   line: getLineLegend,
   pie: getPieLegend
 };
-export function getSeriesToDisplay(series) {
+function getSeriesToDisplay(series) {
   return Object.keys(series).flatMap(seriesType => {
     const getter = legendGetter[seriesType];
     return getter === undefined ? [] : getter(series[seriesType]);
   });
+}
+
+/**
+ * Get the legend items to display.
+ *
+ * This hook is used by the `ChartsLegend` component. And will return the legend items formatted for display.
+ *
+ * An alternative is to use the `useSeries` hook and format the legend items yourself.
+ *
+ * @returns legend data
+ */
+export function useLegend() {
+  const series = useSeries();
+  return {
+    items: getSeriesToDisplay(series)
+  };
 }

package/hooks/useSvgRef.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare function useSvgRef(): React.RefObject<SVGSVGElement>;
+export declare function useSvgRef(): React.RefObject<SVGSVGElement | null>;

package/index.d.ts

@@ -11,6 +11,7 @@ export * from './ChartsYAxis';
 export * from './ChartsGrid';
 export * from './ChartsText';
 export * from './ChartsTooltip';
+export * from './ChartsLabel';
 export * from './ChartsLegend';
 export * from './ChartsAxisHighlight';
 export * from './ChartsVoronoiHandler';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.6
+ * @mui/x-charts v8.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -18,6 +18,7 @@ export * from "./ChartsYAxis/index.js";
 export * from "./ChartsGrid/index.js";
 export * from "./ChartsText/index.js";
 export * from "./ChartsTooltip/index.js";
+export * from "./ChartsLabel/index.js";
 export * from "./ChartsLegend/index.js";
 export * from "./ChartsAxisHighlight/index.js";
 export * from "./ChartsVoronoiHandler/index.js";

package/internals/calculateMargins.d.ts

@@ -0,0 +1,7 @@
+import type { ChartsLegendSlotExtension } from '../ChartsLegend';
+import type { LayoutConfig } from '../models';
+import type { CartesianChartSeriesType, ChartsSeriesConfig } from '../models/seriesType/config';
+export declare const calculateMargins: <T extends ChartsLegendSlotExtension & Pick<LayoutConfig, "margin"> & {
+    hideLegend?: boolean;
+    series?: Partial<ChartsSeriesConfig[CartesianChartSeriesType]["seriesProp"]>[];
+}>(props: T) => Required<LayoutConfig["margin"]>;

package/internals/calculateMargins.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { DEFAULT_MARGINS, DEFAULT_LEGEND_FACING_MARGIN } from "../constants/index.js";
+export const calculateMargins = props => {
+  if (props.hideLegend || !props.series?.some(s => s.label)) {
+    return _extends({}, DEFAULT_MARGINS, props.margin);
+  }
+  if (props.slotProps?.legend?.direction === 'vertical') {
+    if (props.slotProps?.legend?.position?.horizontal === 'left') {
+      return _extends({}, DEFAULT_MARGINS, {
+        left: DEFAULT_LEGEND_FACING_MARGIN
+      }, props.margin);
+    }
+    return _extends({}, DEFAULT_MARGINS, {
+      right: DEFAULT_LEGEND_FACING_MARGIN
+    }, props.margin);
+  }
+  if (props.slotProps?.legend?.position?.vertical === 'bottom') {
+    return _extends({}, DEFAULT_MARGINS, {
+      bottom: DEFAULT_LEGEND_FACING_MARGIN
+    }, props.margin);
+  }
+  return _extends({}, DEFAULT_MARGINS, {
+    top: DEFAULT_LEGEND_FACING_MARGIN
+  }, props.margin);
+};

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
 import { AxisId } from '../../../models/axis';
-export declare function useChartGradient(): (axisId: AxisId, direction: "x" | "y") => string;
+export declare function useChartGradient(): (axisId: AxisId, direction: "x" | "y" | "z") => string;
+export declare function useChartGradientObjectBound(): (axisId: AxisId, direction: "x" | "y" | "z") => string;
 export declare function ChartsAxesGradients(): React.JSX.Element | null;

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -3,11 +3,19 @@ import { useCartesianContext } from "../../../context/CartesianProvider/index.js
 import { useChartId, useDrawingArea } from "../../../hooks/index.js";
 import ChartsPiecewiseGradient from "./ChartsPiecewiseGradient.js";
 import ChartsContinuousGradient from "./ChartsContinuousGradient.js";
+import ChartsContinuousGradientObjectBound from "./ChartsContinuousGradientObjectBound.js";
+import { useZAxis } from "../../../hooks/useZAxis.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function useChartGradient() {
   const chartId = useChartId();
   return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
+
+// TODO: make public?
+export function useChartGradientObjectBound() {
+  const chartId = useChartId();
+  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}-object-bound`, [chartId]);
+}
 export function ChartsAxesGradients() {
   const {
     top,
@@ -20,20 +28,27 @@ export function ChartsAxesGradients() {
   const svgHeight = top + height + bottom;
   const svgWidth = left + width + right;
   const getGradientId = useChartGradient();
+  const getObjectBoundGradientId = useChartGradientObjectBound();
   const {
     xAxisIds,
     xAxis,
     yAxisIds,
     yAxis
   } = useCartesianContext();
+  const {
+    zAxisIds,
+    zAxis
+  } = useZAxis();
   const filteredYAxisIds = yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined);
   const filteredXAxisIds = xAxisIds.filter(axisId => xAxis[axisId].colorMap !== undefined);
-  if (filteredYAxisIds.length === 0 && filteredXAxisIds.length === 0) {
+  const filteredZAxisIds = zAxisIds.filter(axisId => zAxis[axisId].colorMap !== undefined);
+  if (filteredYAxisIds.length === 0 && filteredXAxisIds.length === 0 && filteredZAxisIds.length === 0) {
     return null;
   }
   return /*#__PURE__*/_jsxs("defs", {
     children: [filteredYAxisIds.map(axisId => {
       const gradientId = getGradientId(axisId, 'y');
+      const objectBoundGradientId = getObjectBoundGradientId(axisId, 'y');
       const {
         colorMap,
         scale,
@@ -51,19 +66,27 @@ export function ChartsAxesGradients() {
         }, gradientId);
       }
       if (colorMap?.type === 'continuous') {
-        return /*#__PURE__*/_jsx(ChartsContinuousGradient, {
-          isReversed: !reverse,
-          scale: scale,
-          colorScale: colorScale,
-          colorMap: colorMap,
-          size: svgHeight,
-          gradientId: gradientId,
-          direction: "y"
+        return /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [/*#__PURE__*/_jsx(ChartsContinuousGradient, {
+            isReversed: !reverse,
+            scale: scale,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            size: svgHeight,
+            gradientId: gradientId,
+            direction: "y"
+          }), /*#__PURE__*/_jsx(ChartsContinuousGradientObjectBound, {
+            isReversed: reverse,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            gradientId: objectBoundGradientId
+          })]
         }, gradientId);
       }
       return null;
     }), filteredXAxisIds.map(axisId => {
       const gradientId = getGradientId(axisId, 'x');
+      const objectBoundGradientId = getObjectBoundGradientId(axisId, 'x');
       const {
         colorMap,
         scale,
@@ -81,15 +104,36 @@ export function ChartsAxesGradients() {
         }, gradientId);
       }
       if (colorMap?.type === 'continuous') {
-        return /*#__PURE__*/_jsx(ChartsContinuousGradient, {
-          isReversed: reverse,
-          scale: scale,
+        return /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [/*#__PURE__*/_jsx(ChartsContinuousGradient, {
+            isReversed: reverse,
+            scale: scale,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            size: svgWidth,
+            gradientId: gradientId,
+            direction: "x"
+          }), /*#__PURE__*/_jsx(ChartsContinuousGradientObjectBound, {
+            isReversed: reverse,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            gradientId: objectBoundGradientId
+          })]
+        }, gradientId);
+      }
+      return null;
+    }), filteredZAxisIds.map(axisId => {
+      const objectBoundGradientId = getObjectBoundGradientId(axisId, 'z');
+      const {
+        colorMap,
+        colorScale
+      } = zAxis[axisId];
+      if (colorMap?.type === 'continuous') {
+        return /*#__PURE__*/_jsx(ChartsContinuousGradientObjectBound, {
           colorScale: colorScale,
           colorMap: colorMap,
-          size: svgWidth,
-          gradientId: gradientId,
-          direction: "x"
-        }, gradientId);
+          gradientId: objectBoundGradientId
+        }, objectBoundGradientId);
       }
       return null;
     })]

package/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js

@@ -13,14 +13,14 @@ export default function ChartsContinuousGradient(props) {
     colorScale,
     colorMap
   } = props;
-  const extremValues = [colorMap.min ?? 0, colorMap.max ?? 100];
-  const extremPositions = extremValues.map(scale).filter(p => p !== undefined);
-  if (extremPositions.length !== 2) {
+  const extremumValues = [colorMap.min ?? 0, colorMap.max ?? 100];
+  const extremumPositions = extremumValues.map(scale).filter(p => p !== undefined);
+  if (extremumPositions.length !== 2) {
     return null;
   }
-  const interpolator = typeof extremValues[0] === 'number' ? interpolateNumber(extremValues[0], extremValues[1]) : interpolateDate(extremValues[0], extremValues[1]);
-  const numberOfPoints = Math.round((Math.max(...extremPositions) - Math.min(...extremPositions)) / PX_PRECISION);
-  const keyPrefix = `${extremValues[0]}-${extremValues[1]}-`;
+  const interpolator = typeof extremumValues[0] === 'number' ? interpolateNumber(extremumValues[0], extremumValues[1]) : interpolateDate(extremumValues[0], extremumValues[1]);
+  const numberOfPoints = Math.round((Math.max(...extremumPositions) - Math.min(...extremumPositions)) / PX_PRECISION);
+  const keyPrefix = `${extremumValues[0]}-${extremumValues[1]}-`;
   return /*#__PURE__*/_jsx("linearGradient", {
     id: gradientId,
     x1: "0",

package/internals/components/ChartsAxesGradients/ChartsContinuousGradientObjectBound.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ContinuousColorConfig } from '../../../models/colorMapping';
+type ChartsContinuousGradientObjectBoundProps = {
+    isReversed?: boolean;
+    gradientId: string;
+    colorMap: ContinuousColorConfig;
+    colorScale: (value: any) => string | null;
+};
+/**
+ * Generates gradients to be used in tooltips and legends.
+ */
+export default function ChartsContinuousGradientObjectBound(props: ChartsContinuousGradientObjectBoundProps): React.JSX.Element;
+export {};

package/internals/components/ChartsAxesGradients/ChartsContinuousGradientObjectBound.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { interpolateDate, interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { jsx as _jsx } from "react/jsx-runtime";
+const PX_PRECISION = 10;
+const getDirection = isReversed => {
+  if (isReversed) {
+    return {
+      x1: '1',
+      x2: '0',
+      y1: '0',
+      y2: '0'
+    };
+  }
+  return {
+    x1: '0',
+    x2: '1',
+    y1: '0',
+    y2: '0'
+  };
+};
+
+/**
+ * Generates gradients to be used in tooltips and legends.
+ */
+export default function ChartsContinuousGradientObjectBound(props) {
+  const {
+    isReversed,
+    gradientId,
+    colorScale,
+    colorMap
+  } = props;
+  const extremumValues = [colorMap.min ?? 0, colorMap.max ?? 100];
+  const interpolator = typeof extremumValues[0] === 'number' ? interpolateNumber(extremumValues[0], extremumValues[1]) : interpolateDate(extremumValues[0], extremumValues[1]);
+  const numberOfPoints = PX_PRECISION;
+  const keyPrefix = `${extremumValues[0]}-${extremumValues[1]}-`;
+  return /*#__PURE__*/_jsx("linearGradient", _extends({
+    id: gradientId
+  }, getDirection(isReversed), {
+    gradientUnits: 'objectBoundingBox' // Use the SVG coordinate instead of the component ones.
+    ,
+    children: Array.from({
+      length: numberOfPoints + 1
+    }, (_, index) => {
+      const offset = index / numberOfPoints;
+      const value = interpolator(offset);
+      if (value === undefined) {
+        return null;
+      }
+      const color = colorScale(value);
+      if (color === null) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx("stop", {
+        offset: offset,
+        stopColor: color,
+        stopOpacity: 1
+      }, keyPrefix + index);
+    })
+  }));
+}

package/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.js

@@ -24,6 +24,9 @@ export default function ChartsPiecewiseGradient(props) {
         return null;
       }
       const offset = isReversed ? 1 - x / size : x / size;
+      if (Number.isNaN(offset)) {
+        return null;
+      }
       return /*#__PURE__*/_jsxs(React.Fragment, {
         children: [/*#__PURE__*/_jsx("stop", {
           offset: offset,

package/internals/components/ChartsWrapper/ChartsWrapper.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { Direction, LegendPosition } from '../../../ChartsLegend';
+export interface ChartsWrapperProps {
+    legendPosition?: LegendPosition;
+    legendDirection?: Direction;
+    children: React.ReactNode;
+    sx?: SxProps<Theme>;
+}
+/**
+ * @ignore - internal component.
+ *
+ * Wrapper for the charts components.
+ * Its main purpose is to position the HTML legend in the correct place.
+ */
+declare function ChartsWrapper(props: ChartsWrapperProps): React.JSX.Element;
+export { ChartsWrapper };

package/internals/components/ChartsWrapper/ChartsWrapper.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const getDirection = (direction, position) => {
+  if (direction === 'vertical') {
+    if (position?.horizontal === 'left') {
+      return 'row';
+    }
+    return 'row-reverse';
+  }
+  if (position?.vertical === 'bottom') {
+    return 'column-reverse';
+  }
+  return 'column';
+};
+const getAlign = (direction, position) => {
+  if (direction === 'vertical') {
+    if (position?.vertical === 'top') {
+      return 'flex-start';
+    }
+    if (position?.vertical === 'bottom') {
+      return 'flex-end';
+    }
+  }
+  if (direction === 'horizontal') {
+    if (position?.horizontal === 'left') {
+      return 'flex-start';
+    }
+    if (position?.horizontal === 'right') {
+      return 'flex-end';
+    }
+  }
+  return 'center';
+};
+const Root = styled('div', {
+  name: 'MuiChartsWrapper',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  display: 'flex',
+  flexDirection: getDirection(ownerState.legendDirection, ownerState.legendPosition),
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition)
+}));
+
+/**
+ * @ignore - internal component.
+ *
+ * Wrapper for the charts components.
+ * Its main purpose is to position the HTML legend in the correct place.
+ */
+function ChartsWrapper(props) {
+  const {
+    children,
+    sx
+  } = props;
+  return /*#__PURE__*/_jsx(Root, {
+    ownerState: props,
+    sx: sx,
+    children: children
+  });
+}
+export { ChartsWrapper };

package/internals/components/ChartsWrapper/index.d.ts

@@ -0,0 +1 @@
+export * from './ChartsWrapper';

package/internals/components/ChartsWrapper/index.js

@@ -0,0 +1 @@
+export * from "./ChartsWrapper.js";

package/internals/consumeSlots.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+/**
+ * A higher order component that consumes a slot from the props and renders the component provided in the slot.
+ *
+ * This HOC will wrap a single component, and will render the component provided in the slot, if it exists.
+ *
+ * If you need to render multiple components, you can manually consume the slots from the props and render them in your component instead of using this HOC.
+ *
+ * In the example below, `MyComponent` will render the component provided in `mySlot` slot, if it exists. Otherwise, it will render the `DefaultComponent`.
+ *
+ * @example
+ *
+ * ```tsx
+ * type MyComponentProps = {
+ *   direction: 'row' | 'column';
+ *   slots?: {
+ *     mySlot?: React.JSXElementConstructor<{ direction: 'row' | 'column' }>;
+ *   }
+ * };
+ *
+ * const MyComponent = consumeSlots(
+ *   'MuiMyComponent',
+ *   'mySlot',
+ *   function DefaultComponent(props: MyComponentProps) {
+ *     return (
+ *       <div className={props.classes.root}>
+ *         {props.direction}
+ *       </div>
+ *     );
+ *   }
+ * );
+ * ```
+ *
+ * @param {string} name The mui component name.
+ * @param {string} slotPropName The name of the prop to retrieve the slot from.
+ * @param {object} options Options for the HOC.
+ * @param {boolean} options.propagateSlots Whether to propagate the slots to the component, this is always false if the slot is provided.
+ * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
+ * @param {Array<keyof Props>} options.omitProps An array of props to omit from the component.
+ * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
+ * @param InComponent The component to render if the slot is not provided.
+ */
+export declare const consumeSlots: <Props extends {}, Ref extends {}, RenderFunction = (props: Props, ref: React.Ref<Ref>) => React.ElementType>(name: string, slotPropName: string, options: {
+    propagateSlots?: boolean;
+    defaultProps?: Omit<Partial<Props>, "slots" | "slotProps"> | ((props: Props) => Omit<Partial<Props>, "slots" | "slotProps">);
+    omitProps?: Array<keyof Props>;
+    classesResolver?: (props: Props, theme: any) => Record<string, string>;
+}, InComponent: RenderFunction) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<Ref>>;

package/internals/consumeSlots.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["slots", "slotProps"],
+  _excluded2 = ["ownerState"];
+import { useTheme, useThemeProps } from '@mui/material/styles';
+import resolveProps from '@mui/utils/resolveProps';
+import useSlotProps from '@mui/utils/useSlotProps';
+import * as React from 'react';
+
+/**
+ * A higher order component that consumes a slot from the props and renders the component provided in the slot.
+ *
+ * This HOC will wrap a single component, and will render the component provided in the slot, if it exists.
+ *
+ * If you need to render multiple components, you can manually consume the slots from the props and render them in your component instead of using this HOC.
+ *
+ * In the example below, `MyComponent` will render the component provided in `mySlot` slot, if it exists. Otherwise, it will render the `DefaultComponent`.
+ *
+ * @example
+ *
+ * ```tsx
+ * type MyComponentProps = {
+ *   direction: 'row' | 'column';
+ *   slots?: {
+ *     mySlot?: React.JSXElementConstructor<{ direction: 'row' | 'column' }>;
+ *   }
+ * };
+ *
+ * const MyComponent = consumeSlots(
+ *   'MuiMyComponent',
+ *   'mySlot',
+ *   function DefaultComponent(props: MyComponentProps) {
+ *     return (
+ *       <div className={props.classes.root}>
+ *         {props.direction}
+ *       </div>
+ *     );
+ *   }
+ * );
+ * ```
+ *
+ * @param {string} name The mui component name.
+ * @param {string} slotPropName The name of the prop to retrieve the slot from.
+ * @param {object} options Options for the HOC.
+ * @param {boolean} options.propagateSlots Whether to propagate the slots to the component, this is always false if the slot is provided.
+ * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
+ * @param {Array<keyof Props>} options.omitProps An array of props to omit from the component.
+ * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
+ * @param InComponent The component to render if the slot is not provided.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const consumeSlots = (name, slotPropName, options, InComponent) => {
+  function ConsumeSlotsInternal(props, ref) {
+    const themedProps = useThemeProps({
+      props,
+      // eslint-disable-next-line material-ui/mui-name-matches-component-name
+      name
+    });
+    const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
+    const defaultizedProps = resolveProps(defaultProps, themedProps);
+    const _ref = defaultizedProps,
+      {
+        slots,
+        slotProps
+      } = _ref,
+      other = _objectWithoutPropertiesLoose(_ref, _excluded);
+    const theme = useTheme();
+    const classes = options.classesResolver?.(defaultizedProps, theme);
+
+    // Can be a function component or a forward ref component.
+    const Component = slots?.[slotPropName] ?? InComponent;
+    const propagateSlots = options.propagateSlots && !slots?.[slotPropName];
+    const _useSlotProps = useSlotProps({
+        elementType: Component,
+        externalSlotProps: slotProps?.[slotPropName],
+        additionalProps: _extends({}, other, {
+          classes
+        }, propagateSlots && {
+          slots,
+          slotProps
+        }),
+        ownerState: {}
+      }),
+      originalOutProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+    const outProps = _extends({}, originalOutProps);
+    for (const prop of options.omitProps ?? []) {
+      delete outProps[prop];
+    }
+
+    // Component can be wrapped in React.forwardRef or just a function that accepts (props, ref).
+    // If it is a plain function which accepts two arguments, we need to wrap it in React.forwardRef.
+    const OutComponent = Component.length >= 2 ? /*#__PURE__*/React.forwardRef(Component) : Component;
+    if (process.env.NODE_ENV !== 'production') {
+      OutComponent.displayName = `${name}.slots.${slotPropName}`;
+    }
+    return /*#__PURE__*/_jsx(OutComponent, _extends({}, outProps, {
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/React.forwardRef(ConsumeSlotsInternal);
+};

package/internals/consumeThemeProps.d.ts

@@ -44,11 +44,7 @@ import * as React from 'react';
  * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
  * @param InComponent The component to render if the slot is not provided.
  */
-export declare const consumeThemeProps: <Props extends {
-    slots?: Record<string, any>;
-    slotProps?: Record<string, any>;
-    classes?: Record<string, any>;
-}>(name: string, options: {
-    defaultProps?: Omit<Partial<Props>, "slots" | "slotProps"> | ((props: Props) => Omit<Partial<Props>, "slots" | "slotProps">);
+export declare const consumeThemeProps: <Props extends {}, Ref extends {}, RenderFunction = (props: Props, ref: React.Ref<Ref>) => React.ElementType>(name: string, options: {
+    defaultProps?: Omit<Partial<Props>, "slots" | "slotProps"> | (<T extends Props>(props: T) => Omit<Partial<T>, "slots" | "slotProps">);
     classesResolver?: (props: Props, theme: any) => Record<string, string>;
-}, InComponent: React.JSXElementConstructor<Props>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<any>>;
+}, InComponent: RenderFunction) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<Ref>>;