@mui/x-charts-premium 8.22.0 → 8.22.1

package/BarChartPremium/BarChartPremium.plugins.d.ts

@@ -0,0 +1,4 @@
+import { type ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { type BarChartProPluginSignatures } from '@mui/x-charts-pro/BarChartPro';
+export type BarChartPremiumPluginSignatures = BarChartProPluginSignatures;
+export declare const BAR_CHART_PREMIUM_PLUGINS: ConvertSignaturesIntoPlugins<BarChartPremiumPluginSignatures>;

package/BarChartPremium/BarChartPremium.plugins.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BAR_CHART_PREMIUM_PLUGINS = void 0;
+var _BarChartPro = require("@mui/x-charts-pro/BarChartPro");
+const BAR_CHART_PREMIUM_PLUGINS = exports.BAR_CHART_PREMIUM_PLUGINS = _BarChartPro.BAR_CHART_PRO_PLUGINS;

package/BarChartPremium/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./BarChartPremium.js";
+export * from "./BarChartPremium.plugins.js";

package/BarChartPremium/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _BarChartPremium = require("./BarChartPremium");
+Object.keys(_BarChartPremium).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BarChartPremium[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BarChartPremium[key];
+    }
+  });
+});
+var _BarChartPremium2 = require("./BarChartPremium.plugins");
+Object.keys(_BarChartPremium2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BarChartPremium2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BarChartPremium2[key];
+    }
+  });
+});

package/BarChartPremium/useBarChartPremiumProps.d.ts

@@ -0,0 +1,23 @@
+import { type BarChartPremiumProps } from "./BarChartPremium.js";
+/**
+ * A helper function that extracts BarChartPremiumProps from the input props
+ * and returns an object with props for the children components of BarChartPremium.
+ *
+ * @param props The input props for BarChartPremium
+ * @returns An object with props for the children components of BarChartPremium
+ */
+export declare function useBarChartPremiumProps(props: BarChartPremiumProps): {
+  chartsWrapperProps: Omit<import("@mui/x-charts").ChartsWrapperProps, "children">;
+  chartContainerProps: import("@mui/x-charts").ChartContainerProps<"bar", import("@mui/x-charts").BarChartPluginSignatures>;
+  barPlotProps: import("@mui/x-charts").BarPlotProps;
+  gridProps: import("@mui/x-charts").ChartsGridProps;
+  clipPathProps: import("@mui/x-charts").ChartsClipPathProps;
+  clipPathGroupProps: {
+    clipPath: string;
+  };
+  overlayProps: import("@mui/x-charts/ChartsOverlay").ChartsOverlayProps;
+  chartsAxisProps: import("@mui/x-charts").ChartsAxisProps;
+  axisHighlightProps: import("@mui/x-charts").ChartsAxisHighlightProps;
+  legendProps: import("@mui/x-charts").ChartsLegendSlotExtension;
+  children: React.ReactNode;
+};

package/BarChartPremium/useBarChartPremiumProps.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBarChartPremiumProps = useBarChartPremiumProps;
+var _internals = require("@mui/x-charts/internals");
+/**
+ * A helper function that extracts BarChartPremiumProps from the input props
+ * and returns an object with props for the children components of BarChartPremium.
+ *
+ * @param props The input props for BarChartPremium
+ * @returns An object with props for the children components of BarChartPremium
+ */
+function useBarChartPremiumProps(props) {
+  return (0, _internals.useBarChartProps)(props);
+}

package/CHANGELOG.md

@@ -5,6 +5,107 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.22.1
+
+_Dec 17, 2025_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌎 Improve Swedish (sv-SE) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@KyeongJooni, @VismaAndreasIvarsson
+
+The following team members contributed to this release:
+@alelthomas, @alexfauquette, @arminmeh, @bernardobelchior, @Janpot, @JCQuintas, @mapache-salvaje, @michelengelen, @mj12albert, @prakhargupta1, @romgrk, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.22.1`
+
+- [data grid] Fix column menu keyboard shortcut (#20621) @mj12albert
+- [data grid] Fix row checkbox disabled state on first render and keep cell focusable (ARIA) (#20641) @michelengelen
+- [data grid] Fix tree data selection bug (#20528) @michelengelen
+- [data grid] Prevent clear cell selection on edit mode (#20544) @siriwatknp
+- [data grid] Refactor column merge logic to prioritize defined properties only (#20640) @michelengelen
+- [data grid] Reset row spanning on row expansion change (#20661) @siriwatknp
+- [data grid] Resize newly added rows while resize action is happening (#20676)
+- [l10n] Improve Swedish (sv-SE) locale (#20682) @VismaAndreasIvarsson
+
+#### `@mui/x-data-grid-pro@8.22.1` [![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@8.22.1`.
+
+#### `@mui/x-data-grid-premium@8.22.1` [![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@8.22.1`, plus:
+
+- [DataGridPremium] Import `useId()` from `@mui/utils` to maintain React 17 compatibility (#20635) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.22.1`
+
+- [pickers] Add minutesStep validation test (#20672) @KyeongJooni
+- [pickers] Fix `onAccept()` returning wrong year after selecting year then month (#20639) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.22.1` [![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@8.22.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.22.1`
+
+- [charts] Extract `FocusedPieArc` from `PieArcPlot` (#20613) @alexfauquette
+- [charts] Fix regression on the highlight control (#20627) @alexfauquette
+- [charts] Refactor: `useSelector()` => `store.use()` (#20681) @romgrk
+- [charts] Remove duplicated types (#20694) @alexfauquette
+- [charts] Remove unused generics from bar charts (#20642) @bernardobelchior
+- [charts] Simplify tooltip position getter for pie chart (#20625) @alexfauquette
+
+#### `@mui/x-charts-pro@8.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.22.1`, plus:
+
+- [charts-pro] Add heatmap performance benchmark (#20695) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.22.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.22.1`, plus:
+
+- [charts-premium] Create `BarChartPremium` (#20643) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.22.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.22.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.22.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add button to GitHub source code for the Data Grid advanced demos (DX-50) (#20633) @alelthomas
+- [docs] Remove `seriesConfig` to prevent future confusion (#20678) @alexfauquette
+- [docs] Revise the Data Grid's API object doc for clarity and style (#20649) @mapache-salvaje
+- [docs] Update list of charts (#20479) @prakhargupta1
+
+### Core
+
+- [code-infra] Regression tests improvements (#20441) @Janpot
+- [code-infra] Test utils upgrade (#20592) @Janpot
+- [code-infra] Try to fix the Tree View flacky tests (#20573) @JCQuintas
+
 ## 8.22.0
 
 _Dec 11, 2025_

package/ChartDataProviderPremium/ChartDataProviderPremium.d.ts

@@ -0,0 +1,46 @@
+import { type ChartSeriesType, type ChartAnyPluginSignature, type ChartProviderProps } from '@mui/x-charts/internals';
+import { type ChartDataProviderProProps } from '@mui/x-charts-pro/ChartDataProviderPro';
+import { type ChartsSlotPropsPro, type ChartsSlotsPro } from '@mui/x-charts-pro/internals';
+import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+export type ChartDataProviderPremiumProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartDataProviderProProps<TSeries, TSignatures> & ChartProviderProps<TSeries, TSignatures>['pluginParams'] & {
+  /**
+   * Slots to customize charts' components.
+   */
+  slots?: Partial<ChartsSlotsPro>;
+  /**
+   * The props for the slots.
+   */
+  slotProps?: Partial<ChartsSlotPropsPro>;
+};
+/**
+ * Orchestrates the data providers for the chart components and hooks.
+ *
+ * Use this component if you have custom HTML components that need to access the chart data.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/api/charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartDataProviderPro API](https://mui.com/x/api/charts/chart-data-provider/)
+ *
+ * @example
+ * ```jsx
+ * <ChartDataProviderPro
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *   <ChartsSurface>
+ *      <BarPlot />
+ *      <ChartsXAxis axisId="x-axis" />
+ *   </ChartsSurface>
+ *   {'Custom Legend Component'}
+ * </ChartDataProviderPro>
+ * ```
+ */
+declare function ChartDataProviderPremium<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderPremiumProps<TSeries, TSignatures>): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartDataProviderPremium {
+  var propTypes: any;
+}
+export { ChartDataProviderPremium };

package/ChartDataProviderPremium/ChartDataProviderPremium.js

@@ -0,0 +1,145 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartDataProviderPremium = ChartDataProviderPremium;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Watermark = require("@mui/x-license/Watermark");
+var _internals = require("@mui/x-charts/internals");
+var _ChartsLocalizationProvider = require("@mui/x-charts/ChartsLocalizationProvider");
+var _useLicenseVerifier = require("@mui/x-license/useLicenseVerifier");
+var _allPlugins = require("../internals/plugins/allPlugins");
+var _useChartDataProviderPremiumProps = require("./useChartDataProviderPremiumProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const releaseInfo = "MTc2NjAxNjAwMDAwMA==";
+const packageIdentifier = 'x-charts-premium';
+/**
+ * Orchestrates the data providers for the chart components and hooks.
+ *
+ * Use this component if you have custom HTML components that need to access the chart data.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/api/charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartDataProviderPro API](https://mui.com/x/api/charts/chart-data-provider/)
+ *
+ * @example
+ * ```jsx
+ * <ChartDataProviderPro
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *   <ChartsSurface>
+ *      <BarPlot />
+ *      <ChartsXAxis axisId="x-axis" />
+ *   </ChartsSurface>
+ *   {'Custom Legend Component'}
+ * </ChartDataProviderPro>
+ * ```
+ */
+function ChartDataProviderPremium(props) {
+  const {
+    children,
+    localeText,
+    chartProviderProps,
+    slots,
+    slotProps
+  } = (0, _useChartDataProviderPremiumProps.useChartDataProviderPremiumProps)((0, _extends2.default)({}, props, {
+    plugins: props.plugins ?? _allPlugins.DEFAULT_PLUGINS
+  }));
+  (0, _useLicenseVerifier.useLicenseVerifier)(packageIdentifier, releaseInfo);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartProvider, (0, _extends2.default)({}, chartProviderProps, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLocalizationProvider.ChartsLocalizationProvider, {
+      localeText: localeText,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.ChartsSlotsProvider, {
+        slots: slots,
+        slotProps: slotProps,
+        defaultSlots: _internals.defaultSlotsMaterial,
+        children: children
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Watermark.Watermark, {
+      packageName: packageIdentifier,
+      releaseInfo: releaseInfo
+    })]
+  }));
+}
+process.env.NODE_ENV !== "production" ? ChartDataProviderPremium.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.any
+  }),
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.shape({
+    preferStrictDomainInLineCharts: _propTypes.default.bool
+  }),
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: _propTypes.default.number,
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: _propTypes.default.object,
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
+  })]),
+  /**
+   * The array of series to display.
+   * Each type of series has its own specificity.
+   * Please refer to the appropriate docs page to learn more about it.
+   */
+  series: _propTypes.default.arrayOf(_propTypes.default.object),
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: _propTypes.default.bool,
+  /**
+   * The props for the slots.
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Slots to customize charts' components.
+   */
+  slots: _propTypes.default.object,
+  theme: _propTypes.default.oneOf(['dark', 'light']),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: _propTypes.default.number
+} : void 0;

package/ChartDataProviderPremium/index.d.ts

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

package/ChartDataProviderPremium/index.js

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

package/ChartDataProviderPremium/useChartDataProviderPremiumProps.d.ts

@@ -0,0 +1,10 @@
+import { type ChartAnyPluginSignature, type ChartSeriesType } from '@mui/x-charts/internals';
+import type { ChartDataProviderPremiumProps } from "./ChartDataProviderPremium.js";
+import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+export declare const useChartDataProviderPremiumProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderPremiumProps<TSeries, TSignatures>) => {
+  children: import("react").ReactNode;
+  localeText: Partial<import("@mui/x-charts/locales").ChartsLocaleText> | undefined;
+  chartProviderProps: import("@mui/x-charts/internals").ChartProviderProps<TSeries, TSignatures>;
+  slots: Partial<import("@mui/x-charts/internals").ChartsSlots> | undefined;
+  slotProps: Partial<import("@mui/x-charts/internals").ChartsSlotProps> | undefined;
+};

package/ChartDataProviderPremium/useChartDataProviderPremiumProps.js

@@ -0,0 +1,25 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartDataProviderPremiumProps = void 0;
+var _internals = require("@mui/x-charts/internals");
+const useChartDataProviderPremiumProps = props => {
+  const {
+    chartProviderProps,
+    localeText,
+    slots,
+    slotProps,
+    children
+  } = (0, _internals.useChartDataProviderProps)(props);
+  return {
+    children,
+    localeText,
+    chartProviderProps,
+    slots,
+    slotProps
+  };
+};
+exports.useChartDataProviderPremiumProps = useChartDataProviderPremiumProps;

package/esm/BarChartPremium/BarChartPremium.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { type BarChartProProps } from '@mui/x-charts-pro/BarChartPro';
+export interface BarChartPremiumProps extends BarChartProProps {}
+/**
+ * Demos:
+ *
+ * - [Bars](https://mui.com/x/react-charts/bars/)
+ * - [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+ * - [Stacking](https://mui.com/x/react-charts/stacking/)
+ *
+ * API:
+ *
+ * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+ */
+declare const BarChartPremium: React.ForwardRefExoticComponent<BarChartPremiumProps & React.RefAttributes<SVGSVGElement>>;
+export { BarChartPremium };