@mui/x-charts 6.18.1 → 6.18.2

package/CHANGELOG.md

@@ -3,6 +3,59 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.18.2
+
+_Nov 23, 2023_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Arabic (ar-SD), Czech (cs-CZ), and Hebrew (he-IL) locales on Data Grid
+- 🌍 Add Basque (eu) and Macedonian (mk) locales on Pickers
+- 🌍 Improve German (de-DE) and Spanish (es-ES) locales on Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.2`
+
+- [l10n] Improve Arabic (ar-SD) locale (#11096) @OmarWebDev
+- [l10n] Improve Czech (cs-CZ) locale (#10968) @luborepka
+- [l10n] Improve Hebrew (he-IL) locale (#11056) @LironKiloma
+
+#### `@mui/x-data-grid-pro@6.18.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.18.2`.
+
+#### `@mui/x-data-grid-premium@6.18.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.18.2`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.2`
+
+- [l10n] Add Basque (eu) locale and improve Spanish (es-ES) locale (#10985) @lajtomekadimon
+- [l10n] Add Macedonian (mk) locale (#11155) @brsnik
+- [l10n] Improve German (de-DE) locale (#11104) @jho-vema
+- [pickers] Deprecate `defaultCalendarMonth` prop (#11138) @flaviendelangle
+- [pickers] Fix `DateCalendar` crashing when given an invalid value (#11101) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@6.18.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.18.2`.
+
+### Charts / `@mui/x-charts@6.18.2`
+
+- [charts] Fix `ChartsTooltip` component setup (#11157) @LukasTy
+- [charts] Remove outdated prop-types (#10998) @alexfauquette
+
+### Docs
+
+- [docs] Fix incoherent naming of a component in `Custom slots and subcomponents` page (#11003) @lhilgert9
+- [test] Skip flaky e2e test in webkit (#11115) @cherniavskii
+- [test] Wait for images to load (#11109) @cherniavskii
+
 ## 6.18.1
 
 _Nov 9, 2023_

package/ChartsTooltip/ChartsAxisTooltipContent.d.ts

@@ -3,7 +3,7 @@ import { SxProps, Theme } from '@mui/material/styles';
 import { AxisInteractionData } from '../context/InteractionProvider';
 import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
 import { AxisDefaultized } from '../models/axis';
-import { ChartsTooltipClasses } from './tooltipClasses';
+import { ChartsTooltipClasses } from './chartsTooltipClasses';
 export type ChartsAxisContentProps = {
     /**
      * Data identifying the triggered axis.

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -8,6 +8,7 @@ exports.ChartsAxisTooltipContent = ChartsAxisTooltipContent;
 exports.DefaultChartsAxisContent = DefaultChartsAxisContent;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _utils = require("@mui/base/utils");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
@@ -33,6 +34,7 @@ function DefaultChartsAxisContent(props) {
     sx: sx,
     className: classes.root,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
+      className: classes.table,
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipRow, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
@@ -55,21 +57,23 @@ function DefaultChartsAxisContent(props) {
             return null;
           }
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+            className: classes.row,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-              className: classes.markCell,
+              className: (0, _clsx.default)(classes.markCell, classes.cell),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
                 ownerState: {
                   color
                 },
-                boxShadow: 1
+                boxShadow: 1,
+                className: classes.mark
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-              className: classes.labelCell,
+              className: (0, _clsx.default)(classes.labelCell, classes.cell),
               children: label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
                 children: label
               }) : null
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-              className: classes.valueCell,
+              className: (0, _clsx.default)(classes.valueCell, classes.cell),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
                 children: formattedValue
               })

package/ChartsTooltip/ChartsItemTooltipContent.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import { ItemInteractionData } from '../context/InteractionProvider';
 import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
-import { ChartsTooltipClasses } from './tooltipClasses';
+import { ChartsTooltipClasses } from './chartsTooltipClasses';
 export type ChartsItemContentProps<T extends ChartSeriesType = ChartSeriesType> = {
     /**
      * The data used to identify the triggered item.

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -8,6 +8,7 @@ exports.ChartsItemTooltipContent = ChartsItemTooltipContent;
 exports.DefaultChartsItemContent = DefaultChartsItemContent;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/base/utils");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
@@ -42,20 +43,23 @@ function DefaultChartsItemContent(props) {
     sx: sx,
     className: classes.root,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipTable, {
+      className: classes.table,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+          className: classes.row,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: classes.markCell,
+            className: (0, _clsx.default)(classes.markCell, classes.cell),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
               ownerState: {
                 color
-              }
+              },
+              className: classes.mark
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: classes.labelCell,
+            className: (0, _clsx.default)(classes.labelCell, classes.cell),
             children: displayedLabel
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: classes.valueCell,
+            className: (0, _clsx.default)(classes.valueCell, classes.cell),
             children: formattedValue
           })]
         })

package/ChartsTooltip/ChartsTooltip.d.ts

@@ -3,7 +3,7 @@ import { PopperProps } from '@mui/base/Popper';
 import { TriggerOptions } from './utils';
 import { ChartsItemContentProps } from './ChartsItemTooltipContent';
 import { ChartsAxisContentProps } from './ChartsAxisTooltipContent';
-import { ChartsTooltipClasses } from './tooltipClasses';
+import { ChartsTooltipClasses } from './chartsTooltipClasses';
 export interface ChartsTooltipSlotsComponent {
     popper?: React.ElementType<PopperProps>;
     axisContent?: React.ElementType<ChartsAxisContentProps>;

package/ChartsTooltip/ChartsTooltip.js

@@ -17,7 +17,7 @@ var _InteractionProvider = require("../context/InteractionProvider");
 var _utils2 = require("./utils");
 var _ChartsItemTooltipContent = require("./ChartsItemTooltipContent");
 var _ChartsAxisTooltipContent = require("./ChartsAxisTooltipContent");
-var _tooltipClasses = require("./tooltipClasses");
+var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -27,11 +27,15 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root'],
+    table: ['table'],
+    row: ['row'],
+    cell: ['cell'],
+    mark: ['mark'],
     markCell: ['markCell'],
     labelCell: ['labelCell'],
     valueCell: ['valueCell']
   };
-  return (0, _composeClasses.default)(slots, _tooltipClasses.getTooltipUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _chartsTooltipClasses.getChartsTooltipUtilityClass, classes);
 };
 const ChartsTooltipRoot = (0, _styles.styled)(_Popper.Popper, {
   name: 'MuiChartsTooltip',
@@ -54,23 +58,27 @@ const ChartsTooltipRoot = (0, _styles.styled)(_Popper.Popper, {
  * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
  */
 function ChartsTooltip(props) {
+  const themeProps = (0, _styles.useThemeProps)({
+    props,
+    name: 'MuiChartsTooltip'
+  });
   const {
     trigger = 'axis',
     itemContent,
     axisContent,
     slots,
     slotProps
-  } = props;
+  } = themeProps;
   const mousePosition = (0, _utils2.useMouseTracker)();
   const {
     item,
     axis
   } = React.useContext(_InteractionProvider.InteractionContext);
   const displayedData = trigger === 'item' ? item : axis;
-  const tooltipHasData = (0, _utils2.getTootipHasData)(trigger, displayedData);
+  const tooltipHasData = (0, _utils2.getTooltipHasData)(trigger, displayedData);
   const popperOpen = mousePosition !== null && tooltipHasData;
   const classes = useUtilityClasses({
-    classes: props.classes
+    classes: themeProps.classes
   });
   const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
   const popperProps = (0, _utils.useSlotProps)({

package/ChartsTooltip/ChartsTooltipTable.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsTooltipTable = exports.ChartsTooltipRow = exports.ChartsTooltipPaper = exports.ChartsTooltipMark = exports.ChartsTooltipCell = void 0;
 var _Box = _interopRequireDefault(require("@mui/system/Box"));
 var _styles = require("@mui/material/styles");
-var _tooltipClasses = require("./tooltipClasses");
+var _chartsTooltipClasses = require("./chartsTooltipClasses");
 const ChartsTooltipPaper = exports.ChartsTooltipPaper = (0, _styles.styled)('div', {
   name: 'MuiChartsTooltip',
   slot: 'Container'
@@ -52,10 +52,10 @@ const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)('td',
 }) => ({
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
-  [`&.${_tooltipClasses.tooltipClasses.labelCell}`]: {
+  [`&.${_chartsTooltipClasses.chartsTooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1)
   },
-  [`&.${_tooltipClasses.tooltipClasses.valueCell}`]: {
+  [`&.${_chartsTooltipClasses.chartsTooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
     color: (theme.vars || theme).palette.text.primary
   },

package/ChartsTooltip/chartsTooltipClasses.d.ts

@@ -0,0 +1,21 @@
+export interface ChartsTooltipClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the table element. */
+    table: string;
+    /** Styles applied to the row element. */
+    row: string;
+    /** Styles applied to the cell element. */
+    cell: string;
+    /** Styles applied to the mark element. */
+    mark: 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 Omit<ChartsTooltipClasses, 'markCell' | 'labelCell' | 'valueCell'>;
+export declare function getChartsTooltipUtilityClass(slot: string): string;
+export declare const chartsTooltipClasses: ChartsTooltipClasses;

package/ChartsTooltip/chartsTooltipClasses.js

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

package/ChartsTooltip/index.d.ts

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

package/ChartsTooltip/index.js

@@ -13,4 +13,15 @@ Object.keys(_ChartsTooltip).forEach(function (key) {
       return _ChartsTooltip[key];
     }
   });
+});
+var _chartsTooltipClasses = require("./chartsTooltipClasses");
+Object.keys(_chartsTooltipClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chartsTooltipClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chartsTooltipClasses[key];
+    }
+  });
 });

package/ChartsTooltip/utils.d.ts

@@ -21,4 +21,4 @@ export declare function useMouseTracker(): {
     y: number;
 } | null;
 export type TriggerOptions = 'item' | 'axis' | 'none';
-export declare function getTootipHasData(trigger: TriggerOptions, displayedData: null | AxisInteractionData | ItemInteractionData<ChartSeriesType>): boolean;
+export declare function getTooltipHasData(trigger: TriggerOptions, displayedData: null | AxisInteractionData | ItemInteractionData<ChartSeriesType>): boolean;

package/ChartsTooltip/utils.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateVirtualElement = generateVirtualElement;
-exports.getTootipHasData = getTootipHasData;
+exports.getTooltipHasData = getTooltipHasData;
 exports.useMouseTracker = useMouseTracker;
 var React = _interopRequireWildcard(require("react"));
 var _DrawingProvider = require("../context/DrawingProvider");
@@ -81,7 +81,7 @@ function useMouseTracker() {
   }, [svgRef]);
   return mousePosition;
 }
-function getTootipHasData(trigger, displayedData) {
+function getTooltipHasData(trigger, displayedData) {
   if (trigger === 'item') {
     return displayedData !== null;
   }

package/PieChart/PieArc.d.ts

@@ -30,5 +30,8 @@ export type PieArcProps = PieArcOwnerState & React.ComponentPropsWithoutRef<'pat
     highlightScope?: Partial<HighlightScope>;
     onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
 };
-export default function PieArc(props: PieArcProps): React.JSX.Element;
-export {};
+declare function PieArc(props: PieArcProps): React.JSX.Element;
+declare namespace PieArc {
+    var propTypes: any;
+}
+export { PieArc };

package/PieChart/PieArc.js

@@ -4,12 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = PieArc;
+exports.PieArc = PieArc;
 exports.getPieArcUtilityClass = getPieArcUtilityClass;
 exports.pieArcClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Shape = require("d3-shape");
 var _web = require("@react-spring/web");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -93,4 +94,18 @@ 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.default.object,
+  dataIndex: _propTypes.default.number.isRequired,
+  highlightScope: _propTypes.default.shape({
+    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
+    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
+  }),
+  isFaded: _propTypes.default.bool.isRequired,
+  isHighlighted: _propTypes.default.bool.isRequired
+} : void 0;

package/PieChart/PieArcLabel.d.ts

@@ -32,4 +32,4 @@ declare function PieArcLabel(props: PieArcLabelProps): React.JSX.Element;
 declare namespace PieArcLabel {
     var propTypes: any;
 }
-export default PieArcLabel;
+export { PieArcLabel };

package/PieChart/PieArcLabel.js

@@ -4,15 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = PieArcLabel;
+exports.PieArcLabel = PieArcLabel;
 exports.getPieArcLabelUtilityClass = getPieArcLabelUtilityClass;
 exports.pieArcLabelClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _web = require("@react-spring/web");
 var _d3Shape = require("d3-shape");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
@@ -109,12 +109,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   classes: _propTypes.default.object,
-  cornerRadius: _propTypes.default.number,
-  dataIndex: _propTypes.default.number.isRequired,
-  highlightScope: _propTypes.default.shape({
-    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-  }),
-  innerRadius: _propTypes.default.number,
-  outerRadius: _propTypes.default.number.isRequired
+  formattedArcLabel: _propTypes.default.string,
+  isFaded: _propTypes.default.bool.isRequired,
+  isHighlighted: _propTypes.default.bool.isRequired
 } : void 0;

package/PieChart/PieArcLabelPlot.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _web = require("@react-spring/web");
 var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
-var _PieArcLabel = _interopRequireDefault(require("./PieArcLabel"));
+var _PieArcLabel = require("./PieArcLabel");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
@@ -68,7 +68,7 @@ function PieArcLabelPlot(props) {
   if (data.length === 0) {
     return null;
   }
-  const ArcLabel = slots?.pieArcLabel ?? _PieArcLabel.default;
+  const ArcLabel = slots?.pieArcLabel ?? _PieArcLabel.PieArcLabel;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
     children: transition((_ref, item) => {
       let {

package/PieChart/PieArcPlot.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _web = require("@react-spring/web");
-var _PieArc = _interopRequireDefault(require("./PieArc"));
+var _PieArc = require("./PieArc");
 var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -53,7 +53,7 @@ function PieArcPlot(props) {
   if (data.length === 0) {
     return null;
   }
-  const Arc = slots?.pieArc ?? _PieArc.default;
+  const Arc = slots?.pieArc ?? _PieArc.PieArc;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
     children: transition((_ref, item, _, index) => {
       let {

package/PieChart/index.d.ts

@@ -1,4 +1,6 @@
 export { PiePlot } from './PiePlot';
 export { PieChart } from './PieChart';
-export * from './PieArc';
-export * from './PieArcLabel';
+export { PieArcLabel, getPieArcLabelUtilityClass, pieArcLabelClasses } from './PieArcLabel';
+export type { PieArcLabelClassKey, PieArcLabelClasses, PieArcLabelProps } from './PieArcLabel';
+export { PieArc, getPieArcUtilityClass, pieArcClasses } from './PieArc';
+export type { PieArcClassKey, PieArcClasses, PieArcProps } from './PieArc';

package/PieChart/index.js

@@ -3,10 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  PiePlot: true,
-  PieChart: true
-};
+Object.defineProperty(exports, "PieArc", {
+  enumerable: true,
+  get: function () {
+    return _PieArc.PieArc;
+  }
+});
+Object.defineProperty(exports, "PieArcLabel", {
+  enumerable: true,
+  get: function () {
+    return _PieArcLabel.PieArcLabel;
+  }
+});
 Object.defineProperty(exports, "PieChart", {
   enumerable: true,
   get: function () {
@@ -19,29 +27,31 @@ Object.defineProperty(exports, "PiePlot", {
     return _PiePlot.PiePlot;
   }
 });
+Object.defineProperty(exports, "getPieArcLabelUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _PieArcLabel.getPieArcLabelUtilityClass;
+  }
+});
+Object.defineProperty(exports, "getPieArcUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _PieArc.getPieArcUtilityClass;
+  }
+});
+Object.defineProperty(exports, "pieArcClasses", {
+  enumerable: true,
+  get: function () {
+    return _PieArc.pieArcClasses;
+  }
+});
+Object.defineProperty(exports, "pieArcLabelClasses", {
+  enumerable: true,
+  get: function () {
+    return _PieArcLabel.pieArcLabelClasses;
+  }
+});
 var _PiePlot = require("./PiePlot");
 var _PieChart = require("./PieChart");
-var _PieArc = require("./PieArc");
-Object.keys(_PieArc).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _PieArc[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _PieArc[key];
-    }
-  });
-});
 var _PieArcLabel = require("./PieArcLabel");
-Object.keys(_PieArcLabel).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _PieArcLabel[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _PieArcLabel[key];
-    }
-  });
-});
+var _PieArc = require("./PieArc");

package/esm/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
@@ -25,6 +26,7 @@ export function DefaultChartsAxisContent(props) {
     sx: sx,
     className: classes.root,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
+      className: classes.table,
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
         children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
           children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
@@ -47,21 +49,23 @@ export function DefaultChartsAxisContent(props) {
             return null;
           }
           return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+            className: classes.row,
             children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: classes.markCell,
+              className: clsx(classes.markCell, classes.cell),
               children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
                 ownerState: {
                   color
                 },
-                boxShadow: 1
+                boxShadow: 1,
+                className: classes.mark
               })
             }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: classes.labelCell,
+              className: clsx(classes.labelCell, classes.cell),
               children: label ? /*#__PURE__*/_jsx(Typography, {
                 children: label
               }) : null
             }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: classes.valueCell,
+              className: clsx(classes.valueCell, classes.cell),
               children: /*#__PURE__*/_jsx(Typography, {
                 children: formattedValue
               })

package/esm/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import clsx from 'clsx';
 import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
@@ -33,20 +34,23 @@ export function DefaultChartsItemContent(props) {
     sx: sx,
     className: classes.root,
     children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
+      className: classes.table,
       children: /*#__PURE__*/_jsx("tbody", {
         children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+          className: classes.row,
           children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.markCell,
+            className: clsx(classes.markCell, classes.cell),
             children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
               ownerState: {
                 color
-              }
+              },
+              className: classes.mark
             })
           }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.labelCell,
+            className: clsx(classes.labelCell, classes.cell),
             children: displayedLabel
           }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.valueCell,
+            className: clsx(classes.valueCell, classes.cell),
             children: formattedValue
           })]
         })