@mui/x-charts 8.5.0 → 8.5.1

package/esm/Toolbar/ToolbarButton.js

@@ -1,9 +1,14 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render"];
+const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"],
+  _excluded2 = ["tabIndex"];
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import useForkRef from '@mui/utils/useForkRef';
+import { useRegisterToolbarButton } from '@mui/x-internals/ToolbarContext';
 import { useChartsSlots } from "../context/ChartsSlotsContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButton(props, ref) {
@@ -15,8 +20,17 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButton(props
     slots,
     slotProps
   } = useChartsSlots();
-  const element = useComponentRenderer(slots.baseIconButton, render, _extends({}, slotProps?.baseIconButton, other, {
-    ref
+  const buttonRef = React.useRef(null);
+  const handleRef = useForkRef(buttonRef, ref);
+  const _useRegisterToolbarBu = useRegisterToolbarButton(props, buttonRef),
+    {
+      tabIndex
+    } = _useRegisterToolbarBu,
+    toolbarButtonProps = _objectWithoutPropertiesLoose(_useRegisterToolbarBu, _excluded2);
+  const element = useComponentRenderer(slots.baseIconButton, render, _extends({}, slotProps?.baseIconButton, {
+    tabIndex
+  }, other, toolbarButtonProps, {
+    ref: handleRef
   }));
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: element
@@ -34,6 +48,7 @@ process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
    * A function to customize the rendering of the component.
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-  style: PropTypes.object
+  style: PropTypes.object,
+  tabIndex: PropTypes.number
 } : void 0;
 export { ToolbarButton };

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.5.0
+ * @mui/x-charts v8.5.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/components/AxisSharedComponents.d.ts

@@ -1 +1 @@
-export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;
+export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;

package/esm/internals/components/ChartsWrapper/ChartsWrapper.d.ts

@@ -5,6 +5,11 @@ import { Position } from "../../../models/index.js";
 export interface ChartsWrapperProps {
   legendPosition?: Position;
   legendDirection?: Direction;
+  /**
+   * If `true`, the chart wrapper set `height: 100%`.
+   * @default `false` if the `height` prop is set. And `true` otherwise.
+   */
+  extendVertically?: boolean;
   children: React.ReactNode;
   sx?: SxProps<Theme>;
 }

package/esm/internals/components/ChartsWrapper/ChartsWrapper.js

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { useChartRootRef } from "../../../hooks/useChartRootRef.js";
+import { useStore } from "../../store/useStore.js";
+import { useSelector } from "../../store/useSelector.js";
+import { selectorChartPropsSize } from "../../plugins/corePlugins/useChartDimensions/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getDirection = (direction, position) => {
   if (direction === 'vertical') {
@@ -35,7 +39,8 @@ const getAlign = (direction, position) => {
 };
 const Root = styled('div', {
   name: 'MuiChartsWrapper',
-  slot: 'Root'
+  slot: 'Root',
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'extendVertically'
 })(({
   ownerState
 }) => ({
@@ -43,7 +48,15 @@ const Root = styled('div', {
   flexDirection: getDirection(ownerState.legendDirection, ownerState.legendPosition),
   flex: 1,
   justifyContent: 'center',
-  alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition)
+  alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition),
+  variants: [{
+    props: {
+      extendVertically: true
+    },
+    style: {
+      height: '100%'
+    }
+  }]
 }));
 
 /**
@@ -55,13 +68,19 @@ const Root = styled('div', {
 function ChartsWrapper(props) {
   const {
     children,
-    sx
+    sx,
+    extendVertically
   } = props;
   const chartRootRef = useChartRootRef();
+  const store = useStore();
+  const {
+    height: propsHeight
+  } = useSelector(store, selectorChartPropsSize);
   return /*#__PURE__*/_jsx(Root, {
     ref: chartRootRef,
     ownerState: props,
     sx: sx,
+    extendVertically: extendVertically ?? propsHeight === undefined,
     children: children
   });
 }

package/esm/internals/constants.d.ts

@@ -3,4 +3,11 @@ import type { ZoomSliderShowTooltip } from "./plugins/featurePlugins/useChartCar
 export declare const ZOOM_SLIDER_MARGIN = 4;
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
 export declare const DEFAULT_ZOOM_SLIDER_SIZE: number;
-export declare const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP: ZoomSliderShowTooltip;
+export declare const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP: ZoomSliderShowTooltip;
+/** Default margin for pie charts. */
+export declare const DEFAULT_PIE_CHART_MARGIN: {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};

package/esm/internals/constants.js

@@ -3,4 +3,12 @@ export const ZOOM_SLIDER_MARGIN = 4;
 
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
 export const DEFAULT_ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;
-export const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = 'hover';
+export const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = 'hover';
+
+/** Default margin for pie charts. */
+export const DEFAULT_PIE_CHART_MARGIN = {
+  top: 5,
+  bottom: 5,
+  left: 5,
+  right: 5
+};

package/esm/internals/index.d.ts

@@ -28,6 +28,7 @@ export * from "../BarChart/BarChart.plugins.js";
 export * from "../LineChart/LineChart.plugins.js";
 export * from "../ScatterChart/ScatterChart.plugins.js";
 export * from "../RadarChart/RadarChart.plugins.js";
+export * from "../PieChart/PieChart.plugins.js";
 export * from "./defaultizeValueFormatter.js";
 export * from "./configInit.js";
 export * from "./getLabel.js";
@@ -40,6 +41,7 @@ export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.js";
 export * from "./defaultizeMargin.js";
 export * from "./dateHelpers.js";
+export * from "./invertScale.js";
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
 export * from "../context/ChartProvider/index.js";
 export * from "../context/ChartsSlotsContext.js";

package/esm/internals/index.js

@@ -36,6 +36,7 @@ export * from "../BarChart/BarChart.plugins.js";
 export * from "../LineChart/LineChart.plugins.js";
 export * from "../ScatterChart/ScatterChart.plugins.js";
 export * from "../RadarChart/RadarChart.plugins.js";
+export * from "../PieChart/PieChart.plugins.js";
 
 // utils
 export * from "./defaultizeValueFormatter.js";
@@ -50,6 +51,7 @@ export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.js";
 export * from "./defaultizeMargin.js";
 export * from "./dateHelpers.js";
+export * from "./invertScale.js";
 
 // contexts
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";

package/esm/internals/invertScale.d.ts

@@ -0,0 +1,2 @@
+import { D3Scale } from "../models/axis.js";
+export declare function invertScale<T>(scale: D3Scale, data: readonly T[], value: number): number | Date | T;

package/esm/internals/invertScale.js

@@ -0,0 +1,8 @@
+import { isBandScale } from "./isBandScale.js";
+export function invertScale(scale, data, value) {
+  if (isBandScale(scale)) {
+    const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
+    return data[dataIndex];
+  }
+  return scale.invert(value);
+}

package/esm/internals/material/index.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import IconButton from '@mui/material/IconButton';
+import Button from '@mui/material/Button';
 const baseSlots = {
+  baseButton: Button,
   baseIconButton: IconButton
 };
 const iconSlots = {};