@mui/x-charts 6.0.0-alpha.11 → 6.0.0-alpha.12

package/CHANGELOG.md

@@ -3,6 +3,89 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.15.0
+
+_Sep 22, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Implement columns auto-sizing (#10180) @romgrk
+- 🎁 Add support for `getRowsToExport` option to print export on the data grid (#10084) @zreecespieces
+- 🌍 Improve Finnish (fi-FI) locale
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.15.0`
+
+- [DataGrid] Add support for `getRowsToExport` option to print export (#10084) @zreecespieces
+- [DataGrid] Fix dev warning about `InputLabelProps` (#10413) @romgrk
+- [DataGrid] Refactor `GridMenu` prop `onClickAway` to `onClose` (#10411) @romgrk
+- [DataGrid] Restore focus after `GridMenu` closes (#10412) @romgrk
+- [DataGrid] Fix typing of `GridActionsCellItem` (#10344) @romgrk
+- [DataGrid] Hide `eval` from bundlers (#10329) @romgrk
+- [DataGrid] Add `border: 0` to unmounted focused cell to avoid layout shifts in that row (#10318) @lauri865
+
+#### `@mui/x-data-grid-pro@6.15.0` [![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.15.0`, plus:
+
+- [DataGridPro] Implement columns auto-sizing (#10180) @romgrk
+- [DataGridPro] Fix keyboard navigation issue in header filters (#10358) @MBilalShafi
+- [DataGridPro] Add missing row hover styles (#10252) @cherniavskii
+- [DataGridPro] Make default filter items have stable references in header filters (#10338) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@6.15.0` [![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.15.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.15.0`
+
+- [pickers] Support tokens without spaces (#10185) @alexfauquette
+- [l10n] Improve Finnish (fi-FI) locale (#10346) @samijouppila
+
+#### `@mui/x-date-pickers-pro@6.15.0` [![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.15.0`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.12`
+
+- [charts] Fix sparkline scale and rendering (#10402) @alexfauquette
+- [charts] Remove components from `@mui/material` (#10115) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@6.0.0-alpha.4`
+
+- [TreeView] Split features into plugins to prepare for Pro version (#10123) @flaviendelangle
+
+### Docs
+
+- [docs] Add charts documentation pages to complete pricing table (#10394) @alexfauquette
+- [docs] Add missing MIT packages on the Licensing page (#10348) @flaviendelangle
+- [docs] Clearer component pattern @oliviertassinari
+- [docs] Easier to understand demo (#10370) @oliviertassinari
+- [docs] Fix `301` to Material UI @oliviertassinari
+- [docs] Improve the column visibility section (#10327) @MBilalShafi
+- [docs] Improve the documentation section `rowIdentifier` (#10326) @MBilalShafi
+- [docs] Improve pickers localization documentation (#10202) @flaviendelangle
+- [docs] Polish typescript ref usage (#10359) @oliviertassinari
+- [docs] Improve charts tooltip wording (#10406) @alexfauquette
+
+### Core
+
+- [core] Cleanup GitHub issues template (#10372) @romgrk
+- [core] Fix Circle CI OOM (#10385) @romgrk
+- [core] Improve sleep test helper @oliviertassinari
+- [core] Remove unwanted prefixes @oliviertassinari
+- [core] Remove duplicate label @oliviertassinari
+- [core] Simplify source @oliviertassinari
+- [core] Upgrade monorepo (#10425) @cherniavskii
+- [core] Upgrade monorepo to have the new typescript-to-proptype (#10224) @flaviendelangle
+- [test] Do not use deprecated adapter methods (#10416) @flaviendelangle
+- [test] Name test suites according to sentence case (#10429) @alexfauquette
+
 ## 6.14.0
 
 _Sep 14, 2023_

package/ChartsLegend/ChartsLegend.js

@@ -138,7 +138,7 @@ const ChartsLegendLabel = (0, _styles.styled)('text', {
       calc(var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-labelSpacing)),
       calc(0.5 * var(--ChartsLegend-itemMarkSize))
       )`,
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   dominantBaseline: 'central'
 }));
 exports.ChartsLegendLabel = ChartsLegendLabel;

package/ChartsSurface.d.ts

@@ -1,4 +1,4 @@
-import { SxProps, Theme } from '@mui/system';
+import { SxProps, Theme } from '@mui/material/styles';
 import * as React from 'react';
 type ViewBox = {
     x?: number;

package/ChartsSurface.js

@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsSurface = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var React = _interopRequireWildcard(require("react"));
 var _useAxisEvents = require("./hooks/useAxisEvents");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "sx"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const ChartChartsSurfaceStyles = (0, _system.styled)('svg', {
+const ChartChartsSurfaceStyles = (0, _styles.styled)('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
 })(() => ({}));

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -29,7 +29,6 @@ function DefaultChartsAxisContent(props) {
   const axisFormatter = axis.valueFormatter ?? (v => v.toLocaleString());
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -37,7 +37,6 @@ function DefaultChartsItemContent(props) {
   const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipTable, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {

package/ChartsTooltip/ChartsTooltip.js

@@ -8,8 +8,8 @@ exports.ChartsTooltip = ChartsTooltip;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
-var _NoSsr = _interopRequireDefault(require("@mui/material/NoSsr"));
+var _Popper = require("@mui/base/Popper");
+var _NoSsr = require("@mui/base/NoSsr");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _utils2 = require("./utils");
 var _ChartsItemTooltipContent = require("./ChartsItemTooltipContent");
@@ -50,8 +50,8 @@ function ChartsTooltip(props) {
   if (trigger === 'none') {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
-    children: popperOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.NoSsr, {
+    children: popperOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.Popper, {
       open: popperOpen,
       placement: "right-start",
       anchorEl: (0, _utils2.generateVirtualElement)(mousePosition),

package/ChartsTooltip/ChartsTooltipTable.d.ts

@@ -1,13 +1,11 @@
 /// <reference types="react" />
-export declare const ChartsTooltipPaper: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Paper").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "square" | "className" | "elevation" | "children" | "sx" | "classes" | "variant">, "hidden" | "color" | "content" | "style" | "translate" | "square" | "slot" | "title" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "elevation" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "classes" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ChartsTooltipPaper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const ChartsTooltipTable: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, keyof import("react").ClassAttributes<HTMLTableElement> | keyof import("react").TableHTMLAttributes<HTMLTableElement>>, {}>;
 export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, keyof import("react").ClassAttributes<HTMLTableRowElement> | keyof import("react").HTMLAttributes<HTMLTableRowElement>>, {}>;
 export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof import("react").ClassAttributes<HTMLTableDataCellElement> | keyof import("react").TdHTMLAttributes<HTMLTableDataCellElement>>, {}>;
-export declare const ChartsTooltipMark: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const ChartsTooltipMark: import("@emotion/styled").StyledComponent<Pick<import("@mui/system/Box").BoxOwnProps<import("@mui/system").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>>, "hidden" | "content" | "style" | "translate" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+}, keyof import("@mui/system/Box").BoxOwnProps<import("@mui/system").Theme>>, "hidden" | "content" | "style" | "translate" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof import("@mui/system/Box").BoxOwnProps<import("@mui/system").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     ownerState: {
         color: string;
     };

package/ChartsTooltip/ChartsTooltipTable.js

@@ -5,14 +5,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsTooltipTable = exports.ChartsTooltipRow = exports.ChartsTooltipPaper = exports.ChartsTooltipMark = exports.ChartsTooltipCell = void 0;
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
+var _Box = _interopRequireDefault(require("@mui/system/Box"));
 var _styles = require("@mui/material/styles");
 var _tooltipClasses = require("./tooltipClasses");
-const ChartsTooltipPaper = (0, _styles.styled)(_Paper.default, {
+const ChartsTooltipPaper = (0, _styles.styled)('div', {
   name: 'MuiChartsTooltip',
-  slot: 'Table'
-})({});
+  slot: 'Container'
+})(({
+  theme
+}) => ({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
+  transition: theme.transitions.create('box-shadow'),
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  borderRadius: theme.shape.borderRadius
+}));
 exports.ChartsTooltipPaper = ChartsTooltipPaper;
 const ChartsTooltipTable = (0, _styles.styled)('table', {
   name: 'MuiChartsTooltip',
@@ -22,7 +29,7 @@ const ChartsTooltipTable = (0, _styles.styled)('table', {
 }) => ({
   borderSpacing: 0,
   '& thead td': {
-    borderBottom: `solid ${theme.palette.divider} 1px`
+    borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`
   }
 }));
 exports.ChartsTooltipTable = ChartsTooltipTable;
@@ -47,13 +54,13 @@ const ChartsTooltipCell = (0, _styles.styled)('td', {
   theme
 }) => ({
   verticalAlign: 'middle',
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${_tooltipClasses.tooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1)
   },
   [`&.${_tooltipClasses.tooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   },
   'td:first-of-type&': {
     paddingLeft: theme.spacing(2)
@@ -74,8 +81,8 @@ const ChartsTooltipMark = (0, _styles.styled)(_Box.default, {
   height: theme.spacing(1),
   borderRadius: '50%',
   backgroundColor: ownerState.color,
-  borderColor: theme.palette.background.paper,
-  border: `solid ${theme.palette.background.paper} ${theme.spacing(0.25)}`,
+  borderColor: (theme.vars || theme).palette.background.paper,
+  border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
   boxSizing: 'content-box'
 }));
 exports.ChartsTooltipMark = ChartsTooltipMark;

package/LineChart/MarkElement.js

@@ -50,7 +50,7 @@ const MarkElementPath = (0, _styles.styled)('path', {
 }) => ({
   transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
   transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
-  fill: theme.palette.background.paper,
+  fill: (theme.vars || theme).palette.background.paper,
   stroke: ownerState.color,
   strokeWidth: 2
 }));

package/PieChart/PieArc.js

@@ -47,7 +47,7 @@ const PieArcRoot = (0, _styles.styled)('path', {
   ownerState,
   theme
 }) => ({
-  stroke: theme.palette.background.paper,
+  stroke: (theme.vars || theme).palette.background.paper,
   strokeWidth: 1,
   strokeLinejoin: 'round',
   fill: ownerState.color,

package/PieChart/PieArcLabel.js

@@ -46,7 +46,7 @@ const PieArcLabelRoot = (0, _styles.styled)('text', {
 })(({
   theme
 }) => ({
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   textAnchor: 'middle'
 }));
 function PieArcLabel(props) {

package/ResponsiveChartContainer/index.js

@@ -51,7 +51,7 @@ const useChartDimensions = (inWidth, inHeight) => {
     let animationFrame;
     const observer = new ResizeObserver(() => {
       // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = window.requestAnimationFrame(() => {
+      animationFrame = requestAnimationFrame(() => {
         computeSize();
       });
     });

package/SparkLineChart/SparkLineChart.js

@@ -66,7 +66,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     margin: margin,
     xAxis: [(0, _extends2.default)({
       id: _constants.DEFAULT_X_AXIS_KEY,
-      scaleType: plotType === 'bar' ? 'band' : 'linear',
+      scaleType: plotType === 'bar' ? 'band' : 'point',
       data: Array.from({
         length: data.length
       }, (_, index) => index),
@@ -77,7 +77,10 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      sx: {
+        shapeRendering: 'auto'
+      }
     }), plotType === 'line' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, {
         slots: slots,

package/esm/ChartsLegend/ChartsLegend.js

@@ -126,7 +126,7 @@ export const ChartsLegendLabel = styled('text', {
       calc(var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-labelSpacing)),
       calc(0.5 * var(--ChartsLegend-itemMarkSize))
       )`,
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   dominantBaseline: 'central'
 }));
 const defaultProps = {

package/esm/ChartsSurface.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "sx"];
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useAxisEvents } from './hooks/useAxisEvents';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -21,7 +21,6 @@ export function DefaultChartsAxisContent(props) {
   const axisFormatter = (_axis$valueFormatter = axis.valueFormatter) != null ? _axis$valueFormatter : v => v.toLocaleString();
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {

package/esm/ChartsTooltip/ChartsItemTooltipContent.js

@@ -29,7 +29,6 @@ export function DefaultChartsItemContent(props) {
   const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
       children: /*#__PURE__*/_jsx("tbody", {

package/esm/ChartsTooltip/ChartsTooltip.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import Popper from '@mui/material/Popper';
-import NoSsr from '@mui/material/NoSsr';
+import { Popper } from '@mui/base/Popper';
+import { NoSsr } from '@mui/base/NoSsr';
 import { InteractionContext } from '../context/InteractionProvider';
 import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
 import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';

package/esm/ChartsTooltip/ChartsTooltipTable.js

@@ -1,11 +1,18 @@
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
+import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
 import { tooltipClasses } from './tooltipClasses';
-export const ChartsTooltipPaper = styled(Paper, {
+export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
-  slot: 'Table'
-})({});
+  slot: 'Container'
+})(({
+  theme
+}) => ({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
+  transition: theme.transitions.create('box-shadow'),
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  borderRadius: theme.shape.borderRadius
+}));
 export const ChartsTooltipTable = styled('table', {
   name: 'MuiChartsTooltip',
   slot: 'Table'
@@ -14,7 +21,7 @@ export const ChartsTooltipTable = styled('table', {
 }) => ({
   borderSpacing: 0,
   '& thead td': {
-    borderBottom: `solid ${theme.palette.divider} 1px`
+    borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`
   }
 }));
 export const ChartsTooltipRow = styled('tr', {
@@ -37,13 +44,13 @@ export const ChartsTooltipCell = styled('td', {
   theme
 }) => ({
   verticalAlign: 'middle',
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${tooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1)
   },
   [`&.${tooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   },
   'td:first-of-type&': {
     paddingLeft: theme.spacing(2)
@@ -63,7 +70,7 @@ export const ChartsTooltipMark = styled(Box, {
   height: theme.spacing(1),
   borderRadius: '50%',
   backgroundColor: ownerState.color,
-  borderColor: theme.palette.background.paper,
-  border: `solid ${theme.palette.background.paper} ${theme.spacing(0.25)}`,
+  borderColor: (theme.vars || theme).palette.background.paper,
+  border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
   boxSizing: 'content-box'
 }));

package/esm/LineChart/MarkElement.js

@@ -38,7 +38,7 @@ const MarkElementPath = styled('path', {
 }) => ({
   transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
   transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
-  fill: theme.palette.background.paper,
+  fill: (theme.vars || theme).palette.background.paper,
   stroke: ownerState.color,
   strokeWidth: 2
 }));

package/esm/PieChart/PieArc.js

@@ -35,7 +35,7 @@ const PieArcRoot = styled('path', {
   ownerState,
   theme
 }) => ({
-  stroke: theme.palette.background.paper,
+  stroke: (theme.vars || theme).palette.background.paper,
   strokeWidth: 1,
   strokeLinejoin: 'round',
   fill: ownerState.color,

package/esm/PieChart/PieArcLabel.js

@@ -34,7 +34,7 @@ const PieArcLabelRoot = styled('text', {
 })(({
   theme
 }) => ({
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   textAnchor: 'middle'
 }));
 export default function PieArcLabel(props) {

package/esm/ResponsiveChartContainer/index.js

@@ -42,7 +42,7 @@ const useChartDimensions = (inWidth, inHeight) => {
     let animationFrame;
     const observer = new ResizeObserver(() => {
       // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = window.requestAnimationFrame(() => {
+      animationFrame = requestAnimationFrame(() => {
         computeSize();
       });
     });

package/esm/SparkLineChart/SparkLineChart.js

@@ -58,7 +58,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     margin: margin,
     xAxis: [_extends({
       id: DEFAULT_X_AXIS_KEY,
-      scaleType: plotType === 'bar' ? 'band' : 'linear',
+      scaleType: plotType === 'bar' ? 'band' : 'point',
       data: Array.from({
         length: data.length
       }, (_, index) => index),
@@ -69,7 +69,10 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     disableAxisListener: (!showTooltip || (tooltip == null ? void 0 : tooltip.trigger) !== 'axis') && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      sx: {
+        shapeRendering: 'auto'
+      }
     }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(AreaPlot, {
         slots: slots,

package/esm/internals/components/AxisSharedComponents.js

@@ -47,7 +47,7 @@ export const ChartsLine = styled('line', {
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
+  stroke: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges',
   strokeWidth: 1
 }));
@@ -58,7 +58,7 @@ export const ChartsTick = styled('line', {
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
+  stroke: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges'
 }));
 export const ChartsTickLabel = styled('text', {
@@ -68,7 +68,7 @@ export const ChartsTickLabel = styled('text', {
 })(({
   theme
 }) => _extends({}, theme.typography.caption, {
-  fill: theme.palette.text.primary
+  fill: (theme.vars || theme).palette.text.primary
 }));
 export const ChartsLabel = styled('text', {
   name: 'MuiChartsAxis',
@@ -77,5 +77,5 @@ export const ChartsLabel = styled('text', {
 })(({
   theme
 }) => _extends({}, theme.typography.body1, {
-  fill: theme.palette.text.primary
+  fill: (theme.vars || theme).palette.text.primary
 }));

package/index.js

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

package/internals/components/AxisSharedComponents.js

@@ -55,7 +55,7 @@ const ChartsLine = (0, _styles.styled)('line', {
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
+  stroke: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges',
   strokeWidth: 1
 }));
@@ -67,7 +67,7 @@ const ChartsTick = (0, _styles.styled)('line', {
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
+  stroke: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges'
 }));
 exports.ChartsTick = ChartsTick;
@@ -78,7 +78,7 @@ const ChartsTickLabel = (0, _styles.styled)('text', {
 })(({
   theme
 }) => (0, _extends2.default)({}, theme.typography.caption, {
-  fill: theme.palette.text.primary
+  fill: (theme.vars || theme).palette.text.primary
 }));
 exports.ChartsTickLabel = ChartsTickLabel;
 const ChartsLabel = (0, _styles.styled)('text', {
@@ -88,6 +88,6 @@ const ChartsLabel = (0, _styles.styled)('text', {
 })(({
   theme
 }) => (0, _extends2.default)({}, theme.typography.body1, {
-  fill: theme.palette.text.primary
+  fill: (theme.vars || theme).palette.text.primary
 }));
 exports.ChartsLabel = ChartsLabel;

package/legacy/ChartsLegend/ChartsLegend.js

@@ -123,7 +123,7 @@ export var ChartsLegendLabel = styled('text', {
   return _extends({}, theme.typography.body1, {
     color: 'inherit',
     transform: "translate(\n      calc(var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-labelSpacing)),\n      calc(0.5 * var(--ChartsLegend-itemMarkSize))\n      )",
-    fill: theme.palette.text.primary,
+    fill: (theme.vars || theme).palette.text.primary,
     dominantBaseline: 'central'
   });
 });

package/legacy/ChartsSurface.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "sx"];
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useAxisEvents } from './hooks/useAxisEvents';
 import { jsx as _jsx } from "react/jsx-runtime";

package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -21,7 +21,6 @@ export function DefaultChartsAxisContent(props) {
   };
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {

package/legacy/ChartsTooltip/ChartsItemTooltipContent.js

@@ -26,7 +26,6 @@ export function DefaultChartsItemContent(props) {
   var formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
       children: /*#__PURE__*/_jsx("tbody", {

package/legacy/ChartsTooltip/ChartsTooltip.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import Popper from '@mui/material/Popper';
-import NoSsr from '@mui/material/NoSsr';
+import { Popper } from '@mui/base/Popper';
+import { NoSsr } from '@mui/base/NoSsr';
 import { InteractionContext } from '../context/InteractionProvider';
 import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
 import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';

package/legacy/ChartsTooltip/ChartsTooltipTable.js

@@ -1,29 +1,37 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
+import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
 import { tooltipClasses } from './tooltipClasses';
-export var ChartsTooltipPaper = styled(Paper, {
+export var ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
-  slot: 'Table'
-})({});
+  slot: 'Container'
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+    color: (theme.vars || theme).palette.text.primary,
+    transition: theme.transitions.create('box-shadow'),
+    border: "1px solid ".concat((theme.vars || theme).palette.divider),
+    borderRadius: theme.shape.borderRadius
+  };
+});
 export var ChartsTooltipTable = styled('table', {
   name: 'MuiChartsTooltip',
   slot: 'Table'
-})(function (_ref) {
-  var theme = _ref.theme;
+})(function (_ref2) {
+  var theme = _ref2.theme;
   return {
     borderSpacing: 0,
     '& thead td': {
-      borderBottom: "solid ".concat(theme.palette.divider, " 1px")
+      borderBottom: "solid ".concat((theme.vars || theme).palette.divider, " 1px")
     }
   };
 });
 export var ChartsTooltipRow = styled('tr', {
   name: 'MuiChartsTooltip',
   slot: 'Row'
-})(function (_ref2) {
-  var theme = _ref2.theme;
+})(function (_ref3) {
+  var theme = _ref3.theme;
   return {
     'tr:first-of-type& td': {
       paddingTop: theme.spacing(1)
@@ -36,36 +44,36 @@ export var ChartsTooltipRow = styled('tr', {
 export var ChartsTooltipCell = styled('td', {
   name: 'MuiChartsTooltip',
   slot: 'Cell'
-})(function (_ref3) {
-  var _ref4;
-  var theme = _ref3.theme;
-  return _ref4 = {
+})(function (_ref4) {
+  var _ref5;
+  var theme = _ref4.theme;
+  return _ref5 = {
     verticalAlign: 'middle',
-    color: theme.palette.text.secondary
-  }, _defineProperty(_ref4, "&.".concat(tooltipClasses.labelCell), {
+    color: (theme.vars || theme).palette.text.secondary
+  }, _defineProperty(_ref5, "&.".concat(tooltipClasses.labelCell), {
     paddingLeft: theme.spacing(1)
-  }), _defineProperty(_ref4, "&.".concat(tooltipClasses.valueCell), {
+  }), _defineProperty(_ref5, "&.".concat(tooltipClasses.valueCell), {
     paddingLeft: theme.spacing(4),
-    color: theme.palette.text.primary
-  }), _defineProperty(_ref4, 'td:first-of-type&', {
+    color: (theme.vars || theme).palette.text.primary
+  }), _defineProperty(_ref5, 'td:first-of-type&', {
     paddingLeft: theme.spacing(2)
-  }), _defineProperty(_ref4, 'td:last-of-type&', {
+  }), _defineProperty(_ref5, 'td:last-of-type&', {
     paddingRight: theme.spacing(2)
-  }), _ref4;
+  }), _ref5;
 });
 export var ChartsTooltipMark = styled(Box, {
   name: 'MuiChartsTooltip',
   slot: 'Mark'
-})(function (_ref5) {
-  var theme = _ref5.theme,
-    ownerState = _ref5.ownerState;
+})(function (_ref6) {
+  var theme = _ref6.theme,
+    ownerState = _ref6.ownerState;
   return {
     width: theme.spacing(1),
     height: theme.spacing(1),
     borderRadius: '50%',
     backgroundColor: ownerState.color,
-    borderColor: theme.palette.background.paper,
-    border: "solid ".concat(theme.palette.background.paper, " ").concat(theme.spacing(0.25)),
+    borderColor: (theme.vars || theme).palette.background.paper,
+    border: "solid ".concat((theme.vars || theme).palette.background.paper, " ").concat(theme.spacing(0.25)),
     boxSizing: 'content-box'
   };
 });

package/legacy/LineChart/MarkElement.js

@@ -38,7 +38,7 @@ var MarkElementPath = styled('path', {
   return {
     transform: "translate(".concat(ownerState.x, "px, ").concat(ownerState.y, "px)"),
     transformOrigin: "".concat(ownerState.x, "px ").concat(ownerState.y, "px"),
-    fill: theme.palette.background.paper,
+    fill: (theme.vars || theme).palette.background.paper,
     stroke: ownerState.color,
     strokeWidth: 2
   };

package/legacy/PieChart/PieArc.js

@@ -35,7 +35,7 @@ var PieArcRoot = styled('path', {
   var ownerState = _ref.ownerState,
     theme = _ref.theme;
   return {
-    stroke: theme.palette.background.paper,
+    stroke: (theme.vars || theme).palette.background.paper,
     strokeWidth: 1,
     strokeLinejoin: 'round',
     fill: ownerState.color,

package/legacy/PieChart/PieArcLabel.js

@@ -34,7 +34,7 @@ var PieArcLabelRoot = styled('text', {
 })(function (_ref) {
   var theme = _ref.theme;
   return {
-    fill: theme.palette.text.primary,
+    fill: (theme.vars || theme).palette.text.primary,
     textAnchor: 'middle'
   };
 });

package/legacy/ResponsiveChartContainer/index.js

@@ -49,7 +49,7 @@ var useChartDimensions = function useChartDimensions(inWidth, inHeight) {
     var animationFrame;
     var observer = new ResizeObserver(function () {
       // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = window.requestAnimationFrame(function () {
+      animationFrame = requestAnimationFrame(function () {
         computeSize();
       });
     });

package/legacy/SparkLineChart/SparkLineChart.js

@@ -62,7 +62,7 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
     margin: margin,
     xAxis: [_extends({
       id: DEFAULT_X_AXIS_KEY,
-      scaleType: plotType === 'bar' ? 'band' : 'linear',
+      scaleType: plotType === 'bar' ? 'band' : 'point',
       data: Array.from({
         length: data.length
       }, function (_, index) {
@@ -75,7 +75,10 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
     disableAxisListener: (!showTooltip || (tooltip == null ? void 0 : tooltip.trigger) !== 'axis') && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      sx: {
+        shapeRendering: 'auto'
+      }
     }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(AreaPlot, {
         slots: slots,

package/legacy/index.js

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

package/legacy/internals/components/AxisSharedComponents.js

@@ -36,7 +36,7 @@ export var ChartsLine = styled('line', {
 })(function (_ref) {
   var theme = _ref.theme;
   return {
-    stroke: theme.palette.text.primary,
+    stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges',
     strokeWidth: 1
   };
@@ -50,7 +50,7 @@ export var ChartsTick = styled('line', {
 })(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    stroke: theme.palette.text.primary,
+    stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges'
   };
 });
@@ -63,7 +63,7 @@ export var ChartsTickLabel = styled('text', {
 })(function (_ref3) {
   var theme = _ref3.theme;
   return _extends({}, theme.typography.caption, {
-    fill: theme.palette.text.primary
+    fill: (theme.vars || theme).palette.text.primary
   });
 });
 export var ChartsLabel = styled('text', {
@@ -75,6 +75,6 @@ export var ChartsLabel = styled('text', {
 })(function (_ref4) {
   var theme = _ref4.theme;
   return _extends({}, theme.typography.body1, {
-    fill: theme.palette.text.primary
+    fill: (theme.vars || theme).palette.text.primary
   });
 });

package/modern/ChartsLegend/ChartsLegend.js

@@ -126,7 +126,7 @@ export const ChartsLegendLabel = styled('text', {
       calc(var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-labelSpacing)),
       calc(0.5 * var(--ChartsLegend-itemMarkSize))
       )`,
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   dominantBaseline: 'central'
 }));
 const defaultProps = {

package/modern/ChartsSurface.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "sx"];
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useAxisEvents } from './hooks/useAxisEvents';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -20,7 +20,6 @@ export function DefaultChartsAxisContent(props) {
   const axisFormatter = axis.valueFormatter ?? (v => v.toLocaleString());
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -29,7 +29,6 @@ export function DefaultChartsItemContent(props) {
   const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
       children: /*#__PURE__*/_jsx("tbody", {

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import Popper from '@mui/material/Popper';
-import NoSsr from '@mui/material/NoSsr';
+import { Popper } from '@mui/base/Popper';
+import { NoSsr } from '@mui/base/NoSsr';
 import { InteractionContext } from '../context/InteractionProvider';
 import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
 import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';

package/modern/ChartsTooltip/ChartsTooltipTable.js

@@ -1,11 +1,18 @@
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
+import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
 import { tooltipClasses } from './tooltipClasses';
-export const ChartsTooltipPaper = styled(Paper, {
+export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
-  slot: 'Table'
-})({});
+  slot: 'Container'
+})(({
+  theme
+}) => ({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
+  transition: theme.transitions.create('box-shadow'),
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  borderRadius: theme.shape.borderRadius
+}));
 export const ChartsTooltipTable = styled('table', {
   name: 'MuiChartsTooltip',
   slot: 'Table'
@@ -14,7 +21,7 @@ export const ChartsTooltipTable = styled('table', {
 }) => ({
   borderSpacing: 0,
   '& thead td': {
-    borderBottom: `solid ${theme.palette.divider} 1px`
+    borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`
   }
 }));
 export const ChartsTooltipRow = styled('tr', {
@@ -37,13 +44,13 @@ export const ChartsTooltipCell = styled('td', {
   theme
 }) => ({
   verticalAlign: 'middle',
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${tooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1)
   },
   [`&.${tooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   },
   'td:first-of-type&': {
     paddingLeft: theme.spacing(2)
@@ -63,7 +70,7 @@ export const ChartsTooltipMark = styled(Box, {
   height: theme.spacing(1),
   borderRadius: '50%',
   backgroundColor: ownerState.color,
-  borderColor: theme.palette.background.paper,
-  border: `solid ${theme.palette.background.paper} ${theme.spacing(0.25)}`,
+  borderColor: (theme.vars || theme).palette.background.paper,
+  border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
   boxSizing: 'content-box'
 }));

package/modern/LineChart/MarkElement.js

@@ -38,7 +38,7 @@ const MarkElementPath = styled('path', {
 }) => ({
   transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
   transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
-  fill: theme.palette.background.paper,
+  fill: (theme.vars || theme).palette.background.paper,
   stroke: ownerState.color,
   strokeWidth: 2
 }));

package/modern/PieChart/PieArc.js

@@ -35,7 +35,7 @@ const PieArcRoot = styled('path', {
   ownerState,
   theme
 }) => ({
-  stroke: theme.palette.background.paper,
+  stroke: (theme.vars || theme).palette.background.paper,
   strokeWidth: 1,
   strokeLinejoin: 'round',
   fill: ownerState.color,

package/modern/PieChart/PieArcLabel.js

@@ -34,7 +34,7 @@ const PieArcLabelRoot = styled('text', {
 })(({
   theme
 }) => ({
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   textAnchor: 'middle'
 }));
 export default function PieArcLabel(props) {

package/modern/ResponsiveChartContainer/index.js

@@ -42,7 +42,7 @@ const useChartDimensions = (inWidth, inHeight) => {
     let animationFrame;
     const observer = new ResizeObserver(() => {
       // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = window.requestAnimationFrame(() => {
+      animationFrame = requestAnimationFrame(() => {
         computeSize();
       });
     });

package/modern/SparkLineChart/SparkLineChart.js

@@ -58,7 +58,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     margin: margin,
     xAxis: [_extends({
       id: DEFAULT_X_AXIS_KEY,
-      scaleType: plotType === 'bar' ? 'band' : 'linear',
+      scaleType: plotType === 'bar' ? 'band' : 'point',
       data: Array.from({
         length: data.length
       }, (_, index) => index),
@@ -69,7 +69,10 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      sx: {
+        shapeRendering: 'auto'
+      }
     }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(AreaPlot, {
         slots: slots,

package/modern/index.js

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

package/modern/internals/components/AxisSharedComponents.js

@@ -47,7 +47,7 @@ export const ChartsLine = styled('line', {
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
+  stroke: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges',
   strokeWidth: 1
 }));
@@ -58,7 +58,7 @@ export const ChartsTick = styled('line', {
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
+  stroke: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges'
 }));
 export const ChartsTickLabel = styled('text', {
@@ -68,7 +68,7 @@ export const ChartsTickLabel = styled('text', {
 })(({
   theme
 }) => _extends({}, theme.typography.caption, {
-  fill: theme.palette.text.primary
+  fill: (theme.vars || theme).palette.text.primary
 }));
 export const ChartsLabel = styled('text', {
   name: 'MuiChartsAxis',
@@ -77,5 +77,5 @@ export const ChartsLabel = styled('text', {
 })(({
   theme
 }) => _extends({}, theme.typography.body1, {
-  fill: theme.palette.text.primary
+  fill: (theme.vars || theme).palette.text.primary
 }));

package/package.json

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