@mui/x-charts 6.18.1 → 6.18.2

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -2,15 +2,15 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { Popper } from '@mui/base/Popper';
 import { NoSsr } from '@mui/base/NoSsr';
 import { useSlotProps } from '@mui/base/utils';
 import { InteractionContext } from '../context/InteractionProvider';
-import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
+import { generateVirtualElement, useMouseTracker, getTooltipHasData } from './utils';
 import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';
 import { ChartsAxisTooltipContent } from './ChartsAxisTooltipContent';
-import { getTooltipUtilityClass } from './tooltipClasses';
+import { getChartsTooltipUtilityClass } from './chartsTooltipClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -18,11 +18,15 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root'],
+    table: ['table'],
+    row: ['row'],
+    cell: ['cell'],
+    mark: ['mark'],
     markCell: ['markCell'],
     labelCell: ['labelCell'],
     valueCell: ['valueCell']
   };
-  return composeClasses(slots, getTooltipUtilityClass, classes);
+  return composeClasses(slots, getChartsTooltipUtilityClass, classes);
 };
 const ChartsTooltipRoot = styled(Popper, {
   name: 'MuiChartsTooltip',
@@ -45,23 +49,27 @@ const ChartsTooltipRoot = styled(Popper, {
  * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
  */
 function ChartsTooltip(props) {
+  const themeProps = useThemeProps({
+    props,
+    name: 'MuiChartsTooltip'
+  });
   const {
     trigger = 'axis',
     itemContent,
     axisContent,
     slots,
     slotProps
-  } = props;
+  } = themeProps;
   const mousePosition = useMouseTracker();
   const {
     item,
     axis
   } = React.useContext(InteractionContext);
   const displayedData = trigger === 'item' ? item : axis;
-  const tooltipHasData = getTootipHasData(trigger, displayedData);
+  const tooltipHasData = getTooltipHasData(trigger, displayedData);
   const popperOpen = mousePosition !== null && tooltipHasData;
   const classes = useUtilityClasses({
-    classes: props.classes
+    classes: themeProps.classes
   });
   const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
   const popperProps = useSlotProps({

package/modern/ChartsTooltip/ChartsTooltipTable.js

@@ -1,6 +1,6 @@
 import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
-import { tooltipClasses } from './tooltipClasses';
+import { chartsTooltipClasses } from './chartsTooltipClasses';
 export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Container'
@@ -45,10 +45,10 @@ export const ChartsTooltipCell = styled('td', {
 }) => ({
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
-  [`&.${tooltipClasses.labelCell}`]: {
+  [`&.${chartsTooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1)
   },
-  [`&.${tooltipClasses.valueCell}`]: {
+  [`&.${chartsTooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
     color: (theme.vars || theme).palette.text.primary
   },

package/modern/ChartsTooltip/chartsTooltipClasses.js

@@ -0,0 +1,5 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getChartsTooltipUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsTooltip', slot);
+}
+export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);

package/modern/ChartsTooltip/index.js

@@ -1 +1,2 @@
-export * from './ChartsTooltip';
+export * from './ChartsTooltip';
+export * from './chartsTooltipClasses';

package/modern/ChartsTooltip/utils.js

@@ -71,7 +71,7 @@ export function useMouseTracker() {
   }, [svgRef]);
   return mousePosition;
 }
-export function getTootipHasData(trigger, displayedData) {
+export function getTooltipHasData(trigger, displayedData) {
   if (trigger === 'item') {
     return displayedData !== null;
   }

package/modern/PieChart/PieArc.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "onClick", "isFaded", "isHighlighted", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { arc as d3Arc } from 'd3-shape';
 import { animated, to } from '@react-spring/web';
 import composeClasses from '@mui/utils/composeClasses';
@@ -37,7 +38,7 @@ const PieArcRoot = styled(animated.path, {
   strokeWidth: 1,
   strokeLinejoin: 'round'
 }));
-export default function PieArc(props) {
+function PieArc(props) {
   const {
       id,
       dataIndex,
@@ -82,4 +83,19 @@ export default function PieArc(props) {
     seriesId: id,
     dataIndex
   })));
-}
+}
+process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object,
+  dataIndex: PropTypes.number.isRequired,
+  highlightScope: PropTypes.shape({
+    faded: PropTypes.oneOf(['global', 'none', 'series']),
+    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+  }),
+  isFaded: PropTypes.bool.isRequired,
+  isHighlighted: PropTypes.bool.isRequired
+} : void 0;
+export { PieArc };

package/modern/PieChart/PieArcLabel.js

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { animated, to } from '@react-spring/web';
 import { arc as d3Arc } from 'd3-shape';
-import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
@@ -57,7 +57,7 @@ const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle,
   }
   return y;
 };
-export default function PieArcLabel(props) {
+function PieArcLabel(props) {
   const {
       id,
       classes: innerClasses,
@@ -98,12 +98,8 @@ process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
-  cornerRadius: PropTypes.number,
-  dataIndex: PropTypes.number.isRequired,
-  highlightScope: PropTypes.shape({
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  }),
-  innerRadius: PropTypes.number,
-  outerRadius: PropTypes.number.isRequired
-} : void 0;
+  formattedArcLabel: PropTypes.string,
+  isFaded: PropTypes.bool.isRequired,
+  isHighlighted: PropTypes.bool.isRequired
+} : void 0;
+export { PieArcLabel };

package/modern/PieChart/PieArcLabelPlot.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useTransition } from '@react-spring/web';
 import { defaultLabelTransitionConfig } from './dataTransform/transition';
 import { useTransformData } from './dataTransform/useTransformData';
-import PieArcLabel from './PieArcLabel';
+import { PieArcLabel } from './PieArcLabel';
 import { jsx as _jsx } from "react/jsx-runtime";
 const RATIO = 180 / Math.PI;
 function getItemLabel(arcLabel, arcLabelMinAngle, item) {

package/modern/PieChart/PieArcPlot.js

@@ -4,7 +4,7 @@ const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRa
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
 import * as React from 'react';
 import { useTransition } from '@react-spring/web';
-import PieArc from './PieArc';
+import { PieArc } from './PieArc';
 import { defaultTransitionConfig } from './dataTransform/transition';
 import { useTransformData } from './dataTransform/useTransformData';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/PieChart/index.js

@@ -1,4 +1,4 @@
 export { PiePlot } from './PiePlot';
 export { PieChart } from './PieChart';
-export * from './PieArc';
-export * from './PieArcLabel';
+export { PieArcLabel, getPieArcLabelUtilityClass, pieArcLabelClasses } from './PieArcLabel';
+export { PieArc, getPieArcUtilityClass, pieArcClasses } from './PieArc';

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.18.1
+ * @mui/x-charts v6.18.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "6.18.1",
+  "version": "6.18.2",
   "description": "The community edition of the charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",

package/themeAugmentation/components.d.ts

@@ -24,6 +24,7 @@ export interface ChartsComponents {
   };
   MuiChartsTooltip?: {
     defaultProps?: ComponentsProps['MuiChartsTooltip'];
+    styleOverrides?: ComponentsOverrides['MuiChartsTooltip'];
   };
   MuiChartsSurface?: {
     defaultProps?: ComponentsProps['MuiChartsSurface'];

package/themeAugmentation/overrides.d.ts

@@ -2,6 +2,7 @@ import { BarElementClassKey } from '../BarChart/BarElement';
 import { ChartsAxisClassKey } from '../ChartsAxis';
 import { ChartsAxisHighlightClassKey } from '../ChartsAxisHighlight';
 import { ChartsLegendClassKey } from '../ChartsLegend';
+import { ChartsTooltipClassKey } from '../ChartsTooltip';
 import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '../LineChart';
 
 // prettier-ignore
@@ -9,6 +10,7 @@ export interface PickersComponentNameToClassKey {
   MuiChartsAxis: ChartsAxisClassKey;
   MuiChartsAxisHighlight: ChartsAxisHighlightClassKey;
   MuiChartsLegend: ChartsLegendClassKey;
+  MuiChartsTooltip: ChartsTooltipClassKey;
 
   // BarChart components
   MuiBarElement: BarElementClassKey;

package/ChartsTooltip/tooltipClasses.d.ts

@@ -1,13 +0,0 @@
-export interface ChartsTooltipClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the markCell element. */
-    markCell: string;
-    /** Styles applied to the labelCell element. */
-    labelCell: string;
-    /** Styles applied to the valueCell element. */
-    valueCell: string;
-}
-export type ChartsTooltipClassKey = keyof ChartsTooltipClasses;
-export declare function getTooltipUtilityClass(slot: string): string;
-export declare const tooltipClasses: ChartsTooltipClasses;

package/ChartsTooltip/tooltipClasses.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTooltipUtilityClass = getTooltipUtilityClass;
-exports.tooltipClasses = void 0;
-var _utils = require("@mui/utils");
-function getTooltipUtilityClass(slot) {
-  return (0, _utils.unstable_generateUtilityClass)('MuiChartsTooltip', slot);
-}
-const tooltipClasses = exports.tooltipClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsTooltip', ['root', 'markCell', 'labelCell', 'valueCell']);

package/esm/ChartsTooltip/tooltipClasses.js

@@ -1,5 +0,0 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-export function getTooltipUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsTooltip', slot);
-}
-export const tooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'markCell', 'labelCell', 'valueCell']);

package/legacy/ChartsTooltip/tooltipClasses.js

@@ -1,5 +0,0 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-export function getTooltipUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsTooltip', slot);
-}
-export var tooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'markCell', 'labelCell', 'valueCell']);

package/modern/ChartsTooltip/tooltipClasses.js

@@ -1,5 +0,0 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-export function getTooltipUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsTooltip', slot);
-}
-export const tooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'markCell', 'labelCell', 'valueCell']);