@mui/x-charts 9.0.0-beta.0 → 9.0.0

package/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.d.mts

@@ -1,4 +1,5 @@
 import { type AxisId } from "../../../../models/axis.mjs";
+import { type SeriesId } from "../../../../models/seriesType/common.mjs";
 import type { ExtremumFilter } from "./useChartCartesianAxis.types.mjs";
 export type ZoomData = {
   /**
@@ -96,8 +97,16 @@ export interface ZoomSliderOptions {
   showTooltip?: ZoomSliderShowTooltip;
   /**
    * If `true`, a preview of the chart will be shown in the slider.
+   * Can also be an object to configure which series are shown in the preview.
    */
-  preview?: boolean;
+  preview?: boolean | ZoomSliderPreviewOptions;
+}
+export interface ZoomSliderPreviewOptions {
+  /**
+   * The series IDs to display in the preview.
+   * If not provided, all series attached to this axis will be shown.
+   */
+  seriesIds?: SeriesId[];
 }
 export type ZoomAxisFilters = Record<AxisId, ExtremumFilter>;
 export type ZoomMap = Map<AxisId, ZoomData>;

package/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.d.ts

@@ -1,4 +1,5 @@
 import { type AxisId } from "../../../../models/axis.js";
+import { type SeriesId } from "../../../../models/seriesType/common.js";
 import type { ExtremumFilter } from "./useChartCartesianAxis.types.js";
 export type ZoomData = {
   /**
@@ -96,8 +97,16 @@ export interface ZoomSliderOptions {
   showTooltip?: ZoomSliderShowTooltip;
   /**
    * If `true`, a preview of the chart will be shown in the slider.
+   * Can also be an object to configure which series are shown in the preview.
    */
-  preview?: boolean;
+  preview?: boolean | ZoomSliderPreviewOptions;
+}
+export interface ZoomSliderPreviewOptions {
+  /**
+   * The series IDs to display in the preview.
+   * If not provided, all series attached to this axis will be shown.
+   */
+  seriesIds?: SeriesId[];
 }
 export type ZoomAxisFilters = Record<AxisId, ExtremumFilter>;
 export type ZoomMap = Map<AxisId, ZoomData>;

package/locales/elGR.d.mts

@@ -184,6 +184,10 @@ export declare const elGR: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/elGR.d.ts

@@ -184,6 +184,10 @@ export declare const elGR: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/elGR.js

@@ -204,11 +204,15 @@ const elGRLocaleText = exports.elGRLocaleText = {
   //   high,
   //   low,
   //   close,
+  //   formattedOpen,
+  //   formattedHigh,
+  //   formattedLow,
+  //   formattedClose,
   //   formattedDate,
   //   seriesLabel
   // }) {
   //   const hasValues = open !== null && high !== null && low !== null && close !== null;
-  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   // },
 };
 const elGR = exports.elGR = (0, _getChartsLocalization.getChartsLocalization)(elGRLocaleText);

package/locales/elGR.mjs

@@ -198,11 +198,15 @@ export const elGRLocaleText = {
   //   high,
   //   low,
   //   close,
+  //   formattedOpen,
+  //   formattedHigh,
+  //   formattedLow,
+  //   formattedClose,
   //   formattedDate,
   //   seriesLabel
   // }) {
   //   const hasValues = open !== null && high !== null && low !== null && close !== null;
-  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   // },
 };
 export const elGR = getChartsLocalization(elGRLocaleText);

package/locales/enUS.d.mts

@@ -185,6 +185,10 @@ export declare const enUS: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/enUS.d.ts

@@ -185,6 +185,10 @@ export declare const enUS: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/enUS.js

@@ -204,11 +204,15 @@ const enUSLocaleText = exports.enUSLocaleText = {
     high,
     low,
     close,
+    formattedOpen,
+    formattedHigh,
+    formattedLow,
+    formattedClose,
     formattedDate,
     seriesLabel
   }) {
     const hasValues = open !== null && high !== null && low !== null && close !== null;
-    return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+    return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   }
 };
 const DEFAULT_LOCALE = exports.DEFAULT_LOCALE = enUSLocaleText;

package/locales/enUS.mjs

@@ -199,11 +199,15 @@ export const enUSLocaleText = {
     high,
     low,
     close,
+    formattedOpen,
+    formattedHigh,
+    formattedLow,
+    formattedClose,
     formattedDate,
     seriesLabel
   }) {
     const hasValues = open !== null && high !== null && low !== null && close !== null;
-    return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+    return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   }
 };
 export const DEFAULT_LOCALE = enUSLocaleText;

package/locales/frFR.d.mts

@@ -184,6 +184,10 @@ export declare const frFR: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/frFR.d.ts

@@ -184,6 +184,10 @@ export declare const frFR: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/frFR.js

@@ -204,11 +204,15 @@ const frFRLocalText = exports.frFRLocalText = {
   //   high,
   //   low,
   //   close,
+  //   formattedOpen,
+  //   formattedHigh,
+  //   formattedLow,
+  //   formattedClose,
   //   formattedDate,
   //   seriesLabel
   // }) {
   //   const hasValues = open !== null && high !== null && low !== null && close !== null;
-  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   // },
 };
 const frFR = exports.frFR = (0, _getChartsLocalization.getChartsLocalization)(frFRLocalText);

package/locales/frFR.mjs

@@ -198,11 +198,15 @@ export const frFRLocalText = {
   //   high,
   //   low,
   //   close,
+  //   formattedOpen,
+  //   formattedHigh,
+  //   formattedLow,
+  //   formattedClose,
   //   formattedDate,
   //   seriesLabel
   // }) {
   //   const hasValues = open !== null && high !== null && low !== null && close !== null;
-  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   // },
 };
 export const frFR = getChartsLocalization(frFRLocalText);

package/locales/nbNO.d.mts

@@ -184,6 +184,10 @@ export declare const nbNO: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/nbNO.d.ts

@@ -184,6 +184,10 @@ export declare const nbNO: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/nbNO.js

@@ -204,11 +204,15 @@ const nbNOLocaleText = exports.nbNOLocaleText = {
   //   high,
   //   low,
   //   close,
+  //   formattedOpen,
+  //   formattedHigh,
+  //   formattedLow,
+  //   formattedClose,
   //   formattedDate,
   //   seriesLabel
   // }) {
   //   const hasValues = open !== null && high !== null && low !== null && close !== null;
-  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   // },
 };
 const nbNO = exports.nbNO = (0, _getChartsLocalization.getChartsLocalization)(nbNOLocaleText);

package/locales/nbNO.mjs

@@ -198,11 +198,15 @@ export const nbNOLocaleText = {
   //   high,
   //   low,
   //   close,
+  //   formattedOpen,
+  //   formattedHigh,
+  //   formattedLow,
+  //   formattedClose,
   //   formattedDate,
   //   seriesLabel
   // }) {
   //   const hasValues = open !== null && high !== null && low !== null && close !== null;
-  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   // },
 };
 export const nbNO = getChartsLocalization(nbNOLocaleText);

package/locales/ptBR.d.mts

@@ -184,6 +184,10 @@ export declare const ptBR: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/ptBR.d.ts

@@ -184,6 +184,10 @@ export declare const ptBR: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/ptBR.js

@@ -204,11 +204,15 @@ const ptBRLocaleText = exports.ptBRLocaleText = {
   //   high,
   //   low,
   //   close,
+  //   formattedOpen,
+  //   formattedHigh,
+  //   formattedLow,
+  //   formattedClose,
   //   formattedDate,
   //   seriesLabel
   // }) {
   //   const hasValues = open !== null && high !== null && low !== null && close !== null;
-  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   // },
 };
 const ptBR = exports.ptBR = (0, _getChartsLocalization.getChartsLocalization)(ptBRLocaleText);

package/locales/ptBR.mjs

@@ -198,11 +198,15 @@ export const ptBRLocaleText = {
   //   high,
   //   low,
   //   close,
+  //   formattedOpen,
+  //   formattedHigh,
+  //   formattedLow,
+  //   formattedClose,
   //   formattedDate,
   //   seriesLabel
   // }) {
   //   const hasValues = open !== null && high !== null && low !== null && close !== null;
-  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   // },
 };
 export const ptBR = getChartsLocalization(ptBRLocaleText);

package/locales/ptPT.d.mts

@@ -184,6 +184,10 @@ export declare const ptPT: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/ptPT.d.ts

@@ -184,6 +184,10 @@ export declare const ptPT: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/ptPT.js

@@ -203,11 +203,15 @@ const ptPTLocaleText = exports.ptPTLocaleText = {
   //   high,
   //   low,
   //   close,
+  //   formattedOpen,
+  //   formattedHigh,
+  //   formattedLow,
+  //   formattedClose,
   //   formattedDate,
   //   seriesLabel
   // }) {
   //   const hasValues = open !== null && high !== null && low !== null && close !== null;
-  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   // },
 };
 const ptPT = exports.ptPT = (0, _getChartsLocalization.getChartsLocalization)(ptPTLocaleText);

package/locales/ptPT.mjs

@@ -197,11 +197,15 @@ export const ptPTLocaleText = {
   //   high,
   //   low,
   //   close,
+  //   formattedOpen,
+  //   formattedHigh,
+  //   formattedLow,
+  //   formattedClose,
   //   formattedDate,
   //   seriesLabel
   // }) {
   //   const hasValues = open !== null && high !== null && low !== null && close !== null;
-  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   // },
 };
 export const ptPT = getChartsLocalization(ptPTLocaleText);

package/locales/svSE.d.mts

@@ -184,6 +184,10 @@ export declare const svSE: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/svSE.d.ts

@@ -184,6 +184,10 @@ export declare const svSE: {
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/svSE.js

@@ -206,11 +206,15 @@ const svSELocaleText = exports.svSELocaleText = {
   //   high,
   //   low,
   //   close,
+  //   formattedOpen,
+  //   formattedHigh,
+  //   formattedLow,
+  //   formattedClose,
   //   formattedDate,
   //   seriesLabel
   // }) {
   //   const hasValues = open !== null && high !== null && low !== null && close !== null;
-  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   // },
 };
 const svSE = exports.svSE = (0, _getChartsLocalization.getChartsLocalization)(svSELocaleText);

package/locales/svSE.mjs

@@ -200,11 +200,15 @@ export const svSELocaleText = {
   //   high,
   //   low,
   //   close,
+  //   formattedOpen,
+  //   formattedHigh,
+  //   formattedLow,
+  //   formattedClose,
   //   formattedDate,
   //   seriesLabel
   // }) {
   //   const hasValues = open !== null && high !== null && low !== null && close !== null;
-  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${open}, High: ${high}, Low: ${low}, Close: ${close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
+  //   return [formattedDate, seriesLabel, hasValues ? `Open: ${formattedOpen ?? open}, High: ${formattedHigh ?? high}, Low: ${formattedLow ?? low}, Close: ${formattedClose ?? close}` : this.a11yNoValue].filter(Boolean).join(this.a11yConnector);
   // },
 };
 export const svSE = getChartsLocalization(svSELocaleText);

package/locales/utils/chartsLocaleTextApi.d.mts

@@ -607,6 +607,10 @@ export interface ChartsLocaleText {
    * @param {number|null} params.high - The high value.
    * @param {number|null} params.low - The low value.
    * @param {number|null} params.close - The close value.
+   * @param {string|null} params.formattedOpen - The formatted open value.
+   * @param {string|null} params.formattedHigh - The formatted high value.
+   * @param {string|null} params.formattedLow - The formatted low value.
+   * @param {string|null} params.formattedClose - The formatted close value.
    * @param {Date|null} params.date - The date associated to the candle value.
    * @param {string} params.formattedDate - The formatted date value.
    * @param {string} [params.seriesLabel] - An optional label for the series.
@@ -617,6 +621,10 @@ export interface ChartsLocaleText {
     high: number | null;
     low: number | null;
     close: number | null;
+    formattedOpen: string | null;
+    formattedHigh: string | null;
+    formattedLow: string | null;
+    formattedClose: string | null;
     date: Date | null;
     formattedDate: string;
     seriesLabel?: string;

package/locales/utils/chartsLocaleTextApi.d.ts

@@ -607,6 +607,10 @@ export interface ChartsLocaleText {
    * @param {number|null} params.high - The high value.
    * @param {number|null} params.low - The low value.
    * @param {number|null} params.close - The close value.
+   * @param {string|null} params.formattedOpen - The formatted open value.
+   * @param {string|null} params.formattedHigh - The formatted high value.
+   * @param {string|null} params.formattedLow - The formatted low value.
+   * @param {string|null} params.formattedClose - The formatted close value.
    * @param {Date|null} params.date - The date associated to the candle value.
    * @param {string} params.formattedDate - The formatted date value.
    * @param {string} [params.seriesLabel] - An optional label for the series.
@@ -617,6 +621,10 @@ export interface ChartsLocaleText {
     high: number | null;
     low: number | null;
     close: number | null;
+    formattedOpen: string | null;
+    formattedHigh: string | null;
+    formattedLow: string | null;
+    formattedClose: string | null;
     date: Date | null;
     formattedDate: string;
     seriesLabel?: string;

package/locales/utils/getChartsLocalization.d.mts

@@ -188,6 +188,10 @@ export declare const getChartsLocalization: (chartsTranslations: Partial<ChartsL
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/locales/utils/getChartsLocalization.d.ts

@@ -188,6 +188,10 @@ export declare const getChartsLocalization: (chartsTranslations: Partial<ChartsL
             high: number | null;
             low: number | null;
             close: number | null;
+            formattedOpen: string | null;
+            formattedHigh: string | null;
+            formattedLow: string | null;
+            formattedClose: string | null;
             date: Date | null;
             formattedDate: string;
             seriesLabel?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "9.0.0-beta.0",
+  "version": "9.0.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "license": "MIT",
@@ -28,21 +28,21 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.6",
-    "@mui/utils": "^7.3.7",
+    "@mui/utils": "9.0.0",
     "bezier-easing": "^2.1.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-charts-vendor": "9.0.0-alpha.2",
-    "@mui/x-internal-gestures": "0.4.1-alpha.0",
-    "@mui/x-internals": "9.0.0-alpha.4"
+    "@mui/x-charts-vendor": "^9.0.0",
+    "@mui/x-internal-gestures": "^9.0.0",
+    "@mui/x-internals": "^9.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^7.3.0 || ^9.0.0",
+    "@mui/system": "^7.3.0 || ^9.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },

package/tests/web-components.mjs

@@ -11,7 +11,7 @@ export function reactToWebComponent(ReactComponent, options, renderer) {
       return [];
     }
     [connectedSymbol] = true;
-    [propsSymbol] = (() => ({}))();
+    [propsSymbol] = {};
     constructor() {
       super();
       if (options.shadow) {