@mui/x-charts 8.1.0 → 8.3.0

package/models/slots/chartsBaseSlotProps.d.ts

@@ -0,0 +1,13 @@
+import type * as React from 'react';
+export type ChartBaseCommonProps<T = HTMLElement> = React.DOMAttributes<T> & {
+  className?: string;
+  style?: React.CSSProperties;
+  [k: `aria-${string}`]: any;
+  [k: `data-${string}`]: any;
+};
+export type ChartBaseIconProps = ChartBaseCommonProps<SVGSVGElement> & {
+  titleAccess?: string;
+};
+export type ChartBaseIconButtonProps = ChartBaseCommonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+};

package/models/slots/chartsBaseSlotProps.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/models/slots/chartsBaseSlots.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ChartBaseIconButtonProps } from "./chartsBaseSlotProps.js";
+export interface ChartsBaseSlots {
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+}

package/models/slots/chartsBaseSlots.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/models/slots/chartsIconSlots.d.ts

@@ -0,0 +1 @@
+export interface ChartsIconSlots {}

package/models/slots/chartsIconSlots.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/models/slots/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./chartsBaseSlots.js";
+export * from "./chartsBaseSlotProps.js";
+export * from "./chartsIconSlots.js";

package/models/slots/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _chartsBaseSlots = require("./chartsBaseSlots");
+Object.keys(_chartsBaseSlots).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chartsBaseSlots[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chartsBaseSlots[key];
+    }
+  });
+});
+var _chartsBaseSlotProps = require("./chartsBaseSlotProps");
+Object.keys(_chartsBaseSlotProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chartsBaseSlotProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chartsBaseSlotProps[key];
+    }
+  });
+});
+var _chartsIconSlots = require("./chartsIconSlots");
+Object.keys(_chartsIconSlots).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chartsIconSlots[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chartsIconSlots[key];
+    }
+  });
+});

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.1.0",
-  "description": "The community edition of the Charts components (MUI X).",
+  "version": "8.3.0",
   "author": "MUI Team",
+  "description": "The community edition of MUI X Charts components.",
   "main": "./index.js",
   "license": "MIT",
   "bugs": {
@@ -29,15 +29,15 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.0",
+    "@babel/runtime": "^7.27.1",
     "@mui/utils": "^7.0.2",
     "bezier-easing": "^2.1.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
-    "@mui/x-charts-vendor": "8.0.0",
-    "@mui/x-internals": "8.0.0"
+    "@mui/x-charts-vendor": "8.3.0",
+    "@mui/x-internals": "8.3.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/themeAugmentation/components.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/themeAugmentation/index.d.ts

@@ -1,3 +1,3 @@
-export type * from './overrides';
-export type * from './props';
-export type * from './components';
+export type * from "./overrides.js";
+export type * from "./props.js";
+export type * from "./components.js";

package/themeAugmentation/overrides.d.ts

@@ -5,30 +5,21 @@ import { ChartsGridClassKey } from "../ChartsGrid/index.js";
 import { ChartsTooltipClassKey } from "../ChartsTooltip/index.js";
 import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from "../LineChart/index.js";
 export interface ChartsComponentNameToClassKey {
-  MuiChartsAxis: 'root'; //  Only the root component of axes is styled. We should probably remove this one in v8
-  MuiChartsXAxis: 'root'; //  Only the root component of axes is styled
-  MuiChartsYAxis: 'root'; //  Only the root component of axes is styled
-
+  MuiChartsAxis: 'root';
+  MuiChartsXAxis: 'root';
+  MuiChartsYAxis: 'root';
   MuiChartsAxisHighlight: ChartsAxisHighlightClassKey;
   MuiChartsLegend: 'root';
   MuiChartsGrid: ChartsGridClassKey;
   MuiChartsTooltip: ChartsTooltipClassKey;
   MuiChartsSurface: 'root';
-
-  // BarChart components
   MuiBarElement: BarElementClassKey;
   MuiBarLabel: BarLabelClassKey;
-
-  // LineChart components
   MuiAreaElement: AreaElementClassKey;
   MuiLineElement: LineElementClassKey;
   MuiMarkElement: MarkElementClassKey;
-
-  // ScatterChart components
 }
 declare module '@mui/material/styles' {
   interface ComponentNameToClassKey extends ChartsComponentNameToClassKey {}
 }
-
-// disable automatic export
 export {};

package/themeAugmentation/overrides.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/themeAugmentation/props.d.ts

@@ -17,20 +17,13 @@ export interface ChartsComponentsPropsList {
   MuiChartsLocalizationProvider: ChartsLocalizationProviderProps;
   MuiChartsTooltip: ChartsTooltipProps;
   MuiChartsSurface: ChartsSurfaceProps;
-
-  // BarChart components
   MuiBarChart: BarChartProps;
   MuiBarLabel: BarLabelProps;
-  // LineChart components
   MuiLineChart: LineChartProps;
-  // ScatterChart components
   MuiScatterChart: ScatterChartProps;
-  // PieChart components
   MuiPieChart: PieChartProps;
 }
 declare module '@mui/material/styles' {
   interface ComponentsPropsList extends ChartsComponentsPropsList {}
 }
-
-// disable automatic export
 export {};

package/themeAugmentation/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/colorPalettes/colorPalettes.d.ts

@@ -1,16 +0,0 @@
-export type ChartsColorPaletteCallback = (mode: 'light' | 'dark') => string[];
-export type ChartsColorPalette = string[] | ChartsColorPaletteCallback;
-export type ChartsColorCallback = (mode: 'light' | 'dark') => string;
-export type ChartsColor = string | ChartsColorCallback;
-export declare const rainbowSurgePaletteLight: string[];
-export declare const rainbowSurgePaletteDark: string[];
-export declare const rainbowSurgePalette: ChartsColorPaletteCallback;
-export declare const blueberryTwilightPaletteLight: string[];
-export declare const blueberryTwilightPaletteDark: string[];
-export declare const blueberryTwilightPalette: ChartsColorPaletteCallback;
-export declare const mangoFusionPaletteLight: string[];
-export declare const mangoFusionPaletteDark: string[];
-export declare const mangoFusionPalette: ChartsColorPaletteCallback;
-export declare const cheerfulFiestaPaletteDark: string[];
-export declare const cheerfulFiestaPaletteLight: string[];
-export declare const cheerfulFiestaPalette: ChartsColorPaletteCallback;

package/colorPalettes/colorPalettes.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.rainbowSurgePaletteLight = exports.rainbowSurgePaletteDark = exports.rainbowSurgePalette = exports.mangoFusionPaletteLight = exports.mangoFusionPaletteDark = exports.mangoFusionPalette = exports.cheerfulFiestaPaletteLight = exports.cheerfulFiestaPaletteDark = exports.cheerfulFiestaPalette = exports.blueberryTwilightPaletteLight = exports.blueberryTwilightPaletteDark = exports.blueberryTwilightPalette = void 0;
-const rainbowSurgePaletteLight = exports.rainbowSurgePaletteLight = ['#4254FB', '#FFB422', '#FA4F58', '#0DBEFF', '#22BF75', '#FA83B4', '#FF7511'];
-const rainbowSurgePaletteDark = exports.rainbowSurgePaletteDark = ['#495AFB', '#FFC758', '#F35865', '#30C8FF', '#44CE8D', '#F286B3', '#FF8C39'];
-const rainbowSurgePalette = mode => mode === 'dark' ? rainbowSurgePaletteDark : rainbowSurgePaletteLight;
-exports.rainbowSurgePalette = rainbowSurgePalette;
-const blueberryTwilightPaletteLight = exports.blueberryTwilightPaletteLight = ['#02B2AF', '#2E96FF', '#B800D8', '#60009B', '#2731C8', '#03008D'];
-const blueberryTwilightPaletteDark = exports.blueberryTwilightPaletteDark = ['#02B2AF', '#72CCFF', '#DA00FF', '#9001CB', '#2E96FF', '#3B48E0'];
-const blueberryTwilightPalette = mode => mode === 'dark' ? blueberryTwilightPaletteDark : blueberryTwilightPaletteLight;
-exports.blueberryTwilightPalette = blueberryTwilightPalette;
-const mangoFusionPaletteLight = exports.mangoFusionPaletteLight = ['#173A5E', '#00A3A0', '#C91B63', '#EF5350', '#FFA726', '#B800D8', '#60009B', '#2E96FF', '#2731C8', '#03008D'];
-const mangoFusionPaletteDark = exports.mangoFusionPaletteDark = ['#41698F', '#19D0CD', '#DE196B', '#FC5F5C', '#FFD771', '#DA00FF', '#9001CB', '#72CCFF', '#2E96FF', '#3B48E0'];
-const mangoFusionPalette = mode => mode === 'dark' ? mangoFusionPaletteDark : mangoFusionPaletteLight;
-exports.mangoFusionPalette = mangoFusionPalette;
-const cheerfulFiestaPaletteDark = exports.cheerfulFiestaPaletteDark = ['#0059B2', '#2E96FF', '#FFC24C', '#FF9F0E', '#F38200', '#2ABFDE', '#1F94AD', '#BD2C38', '#FF3143', '#FF8282'];
-const cheerfulFiestaPaletteLight = exports.cheerfulFiestaPaletteLight = ['#003A75', '#007FFF', '#FFC24C', '#FF9D09', '#CA6C00', '#127D94', '#1F94AD', '#C82634', '#FF3143', '#FF7E7E'];
-const cheerfulFiestaPalette = mode => mode === 'dark' ? cheerfulFiestaPaletteDark : cheerfulFiestaPaletteLight;
-exports.cheerfulFiestaPalette = cheerfulFiestaPalette;

package/esm/colorPalettes/colorPalettes.d.ts

@@ -1,16 +0,0 @@
-export type ChartsColorPaletteCallback = (mode: 'light' | 'dark') => string[];
-export type ChartsColorPalette = string[] | ChartsColorPaletteCallback;
-export type ChartsColorCallback = (mode: 'light' | 'dark') => string;
-export type ChartsColor = string | ChartsColorCallback;
-export declare const rainbowSurgePaletteLight: string[];
-export declare const rainbowSurgePaletteDark: string[];
-export declare const rainbowSurgePalette: ChartsColorPaletteCallback;
-export declare const blueberryTwilightPaletteLight: string[];
-export declare const blueberryTwilightPaletteDark: string[];
-export declare const blueberryTwilightPalette: ChartsColorPaletteCallback;
-export declare const mangoFusionPaletteLight: string[];
-export declare const mangoFusionPaletteDark: string[];
-export declare const mangoFusionPalette: ChartsColorPaletteCallback;
-export declare const cheerfulFiestaPaletteDark: string[];
-export declare const cheerfulFiestaPaletteLight: string[];
-export declare const cheerfulFiestaPalette: ChartsColorPaletteCallback;

package/esm/colorPalettes/colorPalettes.js

@@ -1,12 +0,0 @@
-export const rainbowSurgePaletteLight = ['#4254FB', '#FFB422', '#FA4F58', '#0DBEFF', '#22BF75', '#FA83B4', '#FF7511'];
-export const rainbowSurgePaletteDark = ['#495AFB', '#FFC758', '#F35865', '#30C8FF', '#44CE8D', '#F286B3', '#FF8C39'];
-export const rainbowSurgePalette = mode => mode === 'dark' ? rainbowSurgePaletteDark : rainbowSurgePaletteLight;
-export const blueberryTwilightPaletteLight = ['#02B2AF', '#2E96FF', '#B800D8', '#60009B', '#2731C8', '#03008D'];
-export const blueberryTwilightPaletteDark = ['#02B2AF', '#72CCFF', '#DA00FF', '#9001CB', '#2E96FF', '#3B48E0'];
-export const blueberryTwilightPalette = mode => mode === 'dark' ? blueberryTwilightPaletteDark : blueberryTwilightPaletteLight;
-export const mangoFusionPaletteLight = ['#173A5E', '#00A3A0', '#C91B63', '#EF5350', '#FFA726', '#B800D8', '#60009B', '#2E96FF', '#2731C8', '#03008D'];
-export const mangoFusionPaletteDark = ['#41698F', '#19D0CD', '#DE196B', '#FC5F5C', '#FFD771', '#DA00FF', '#9001CB', '#72CCFF', '#2E96FF', '#3B48E0'];
-export const mangoFusionPalette = mode => mode === 'dark' ? mangoFusionPaletteDark : mangoFusionPaletteLight;
-export const cheerfulFiestaPaletteDark = ['#0059B2', '#2E96FF', '#FFC24C', '#FF9F0E', '#F38200', '#2ABFDE', '#1F94AD', '#BD2C38', '#FF3143', '#FF8282'];
-export const cheerfulFiestaPaletteLight = ['#003A75', '#007FFF', '#FFC24C', '#FF9D09', '#CA6C00', '#127D94', '#1F94AD', '#C82634', '#FF3143', '#FF7E7E'];
-export const cheerfulFiestaPalette = mode => mode === 'dark' ? cheerfulFiestaPaletteDark : cheerfulFiestaPaletteLight;

package/esm/internals/store/useChartModels.d.ts

@@ -1,7 +0,0 @@
-import { ChartAnyPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../plugins/models/index.js";
-import { ChartCorePluginSignatures } from "../plugins/corePlugins/index.js";
-/**
- * Implements the same behavior as `useControlled` but for several models.
- * The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
- */
-export declare const useChartModels: <TSignatures extends readonly ChartAnyPluginSignature[]>(plugins: ConvertSignaturesIntoPlugins<readonly [...ChartCorePluginSignatures, ...TSignatures]>, props: MergeSignaturesProperty<TSignatures, "defaultizedParams">) => MergeSignaturesProperty<TSignatures, "models">;

package/esm/internals/store/useChartModels.js

@@ -1,64 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-/**
- * Implements the same behavior as `useControlled` but for several models.
- * The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
- */
-export const useChartModels = (plugins, props) => {
-  const modelsRef = React.useRef({});
-  const [modelsState, setModelsState] = React.useState(() => {
-    const initialState = {};
-    plugins.forEach(plugin => {
-      if (plugin.models) {
-        Object.entries(plugin.models).forEach(([modelName, modelInitializer]) => {
-          modelsRef.current[modelName] = {
-            isControlled: props[modelName] !== undefined,
-            getDefaultValue: modelInitializer.getDefaultValue
-          };
-          initialState[modelName] = modelInitializer.getDefaultValue(props);
-        });
-      }
-    });
-    return initialState;
-  });
-  const models = Object.fromEntries(Object.entries(modelsRef.current).map(([modelName, model]) => {
-    const value = props[modelName] ?? modelsState[modelName];
-    return [modelName, {
-      value,
-      setControlledValue: newValue => {
-        if (!model.isControlled) {
-          setModelsState(prevState => _extends({}, prevState, {
-            [modelName]: typeof newValue === 'function' ? newValue(value) : newValue
-          }));
-        }
-      },
-      isControlled: modelsRef.current[modelName].isControlled
-    }];
-  }));
-
-  // We know that `modelsRef` do not vary across renders.
-  if (process.env.NODE_ENV !== 'production') {
-    Object.entries(modelsRef.current).forEach(([modelName, model]) => {
-      const controlled = props[modelName];
-      const newDefaultValue = model.getDefaultValue(props);
-
-      /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps, react-compiler/react-compiler */
-      React.useEffect(() => {
-        if (model.isControlled !== (controlled !== undefined)) {
-          console.error([`MUI X: A component is changing the ${model.isControlled ? '' : 'un'}controlled ${modelName} state of Chart to be ${model.isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${modelName} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
-        }
-      }, [controlled]);
-      const {
-        current: defaultValue
-      } = React.useRef(newDefaultValue);
-      React.useEffect(() => {
-        if (!model.isControlled && defaultValue !== newDefaultValue) {
-          console.error([`MUI X: A component is changing the default ${modelName} state of an uncontrolled Chart after being initialized. ` + `To suppress this warning opt to use a controlled Chart.`].join('\n'));
-        }
-      }, [JSON.stringify(newDefaultValue)]);
-    });
-  }
-  /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
-
-  return models;
-};

package/internals/store/useChartModels.d.ts

@@ -1,7 +0,0 @@
-import { ChartAnyPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../plugins/models/index.js";
-import { ChartCorePluginSignatures } from "../plugins/corePlugins/index.js";
-/**
- * Implements the same behavior as `useControlled` but for several models.
- * The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
- */
-export declare const useChartModels: <TSignatures extends readonly ChartAnyPluginSignature[]>(plugins: ConvertSignaturesIntoPlugins<readonly [...ChartCorePluginSignatures, ...TSignatures]>, props: MergeSignaturesProperty<TSignatures, "defaultizedParams">) => MergeSignaturesProperty<TSignatures, "models">;

package/internals/store/useChartModels.js

@@ -1,73 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useChartModels = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-/**
- * Implements the same behavior as `useControlled` but for several models.
- * The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
- */
-const useChartModels = (plugins, props) => {
-  const modelsRef = React.useRef({});
-  const [modelsState, setModelsState] = React.useState(() => {
-    const initialState = {};
-    plugins.forEach(plugin => {
-      if (plugin.models) {
-        Object.entries(plugin.models).forEach(([modelName, modelInitializer]) => {
-          modelsRef.current[modelName] = {
-            isControlled: props[modelName] !== undefined,
-            getDefaultValue: modelInitializer.getDefaultValue
-          };
-          initialState[modelName] = modelInitializer.getDefaultValue(props);
-        });
-      }
-    });
-    return initialState;
-  });
-  const models = Object.fromEntries(Object.entries(modelsRef.current).map(([modelName, model]) => {
-    const value = props[modelName] ?? modelsState[modelName];
-    return [modelName, {
-      value,
-      setControlledValue: newValue => {
-        if (!model.isControlled) {
-          setModelsState(prevState => (0, _extends2.default)({}, prevState, {
-            [modelName]: typeof newValue === 'function' ? newValue(value) : newValue
-          }));
-        }
-      },
-      isControlled: modelsRef.current[modelName].isControlled
-    }];
-  }));
-
-  // We know that `modelsRef` do not vary across renders.
-  if (process.env.NODE_ENV !== 'production') {
-    Object.entries(modelsRef.current).forEach(([modelName, model]) => {
-      const controlled = props[modelName];
-      const newDefaultValue = model.getDefaultValue(props);
-
-      /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps, react-compiler/react-compiler */
-      React.useEffect(() => {
-        if (model.isControlled !== (controlled !== undefined)) {
-          console.error([`MUI X: A component is changing the ${model.isControlled ? '' : 'un'}controlled ${modelName} state of Chart to be ${model.isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${modelName} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
-        }
-      }, [controlled]);
-      const {
-        current: defaultValue
-      } = React.useRef(newDefaultValue);
-      React.useEffect(() => {
-        if (!model.isControlled && defaultValue !== newDefaultValue) {
-          console.error([`MUI X: A component is changing the default ${modelName} state of an uncontrolled Chart after being initialized. ` + `To suppress this warning opt to use a controlled Chart.`].join('\n'));
-        }
-      }, [JSON.stringify(newDefaultValue)]);
-    });
-  }
-  /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
-
-  return models;
-};
-exports.useChartModels = useChartModels;