@mui/x-charts 8.0.0-alpha.11 → 8.0.0-alpha.13

package/ChartsLegend/ContinuousColorLegend.d.ts

@@ -1,56 +1,56 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import { AppendKeys } from '@mui/x-internals/types';
-import { ColorLegendSelector } from './colorLegend.types';
-import { ChartsLabelGradientProps } from '../ChartsLabel/ChartsLabelGradient';
-import { Direction } from './direction';
-import { ContinuousColorLegendClasses } from './continuousColorLegendClasses';
+import { ColorLegendSelector } from "./colorLegend.types.js";
+import { ChartsLabelGradientProps } from "../ChartsLabel/ChartsLabelGradient.js";
+import { Direction } from "./direction.js";
+import { ContinuousColorLegendClasses } from "./continuousColorLegendClasses.js";
 type LabelFormatter = (params: {
-    value: number | Date;
-    formattedValue: string;
+  value: number | Date;
+  formattedValue: string;
 }) => string;
 export interface ContinuousColorLegendProps extends ColorLegendSelector, AppendKeys<Pick<ChartsLabelGradientProps, 'rotate'>, 'gradient'>, Pick<ChartsLabelGradientProps, 'thickness'> {
-    /**
-     * The direction of the legend layout.
-     * @default 'horizontal'
-     */
-    direction?: Direction;
-    /**
-     * The label to display at the minimum side of the gradient.
-     * Can either be a string, or a function.
-     * @default formattedValue
-     */
-    minLabel?: string | LabelFormatter;
-    /**
-     * The label to display at the maximum side of the gradient.
-     * Can either be a string, or a function.
-     * If not defined, the formatted maximal value is display.
-     * @default formattedValue
-     */
-    maxLabel?: string | LabelFormatter;
-    /**
-     * The id for the gradient to use.
-     * If not provided, it will use the generated gradient from the axis configuration.
-     * The `gradientId` will be used as `fill="url(#gradientId)"`.
-     * @default auto-generated id
-     */
-    gradientId?: string;
-    /**
-     * Where to position the labels relative to the gradient.
-     * @default 'end'
-     */
-    labelPosition?: 'start' | 'end' | 'extremes';
-    /**
-     * If `true`, the gradient and labels will be reversed.
-     * @default false
-     */
-    reverse?: boolean;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ContinuousColorLegendClasses>;
-    className?: string;
-    sx?: SxProps<Theme>;
+  /**
+   * The direction of the legend layout.
+   * @default 'horizontal'
+   */
+  direction?: Direction;
+  /**
+   * The label to display at the minimum side of the gradient.
+   * Can either be a string, or a function.
+   * @default formattedValue
+   */
+  minLabel?: string | LabelFormatter;
+  /**
+   * The label to display at the maximum side of the gradient.
+   * Can either be a string, or a function.
+   * If not defined, the formatted maximal value is display.
+   * @default formattedValue
+   */
+  maxLabel?: string | LabelFormatter;
+  /**
+   * The id for the gradient to use.
+   * If not provided, it will use the generated gradient from the axis configuration.
+   * The `gradientId` will be used as `fill="url(#gradientId)"`.
+   * @default auto-generated id
+   */
+  gradientId?: string;
+  /**
+   * Where to position the labels relative to the gradient.
+   * @default 'end'
+   */
+  labelPosition?: 'start' | 'end' | 'extremes';
+  /**
+   * If `true`, the gradient and labels will be reversed.
+   * @default false
+   */
+  reverse?: boolean;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ContinuousColorLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
 }
 declare const ContinuousColorLegend: React.ForwardRefExoticComponent<ContinuousColorLegendProps & import("./chartsLegend.types").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
-export { ContinuousColorLegend };
+export { ContinuousColorLegend };

package/ChartsLegend/ContinuousColorLegend.js

@@ -1,19 +1,26 @@
+"use strict";
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContinuousColorLegend = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _useAxis = require("./useAxis");
+var _ChartsLabel = require("../ChartsLabel/ChartsLabel");
+var _ChartsLabelGradient = require("../ChartsLabel/ChartsLabelGradient");
+var _consumeThemeProps = require("../internals/consumeThemeProps");
+var _continuousColorLegendClasses = require("./continuousColorLegendClasses");
+var _useChartGradientId = require("../hooks/useChartGradientId");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["minLabel", "maxLabel", "direction", "axisDirection", "axisId", "rotateGradient", "reverse", "classes", "className", "gradientId", "labelPosition", "thickness"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import clsx from 'clsx';
-import { useAxis } from "./useAxis.js";
-import { ChartsLabel } from "../ChartsLabel/ChartsLabel.js";
-import { ChartsLabelGradient } from "../ChartsLabel/ChartsLabelGradient.js";
-import { consumeThemeProps } from "../internals/consumeThemeProps.js";
-import { continuousColorLegendClasses, useUtilityClasses } from "./continuousColorLegendClasses.js";
-import { useChartGradientIdObjectBoundBuilder } from "../hooks/useChartGradientId.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const templateAreas = reverse => {
   const startLabel = reverse ? 'max-label' : 'min-label';
   const endLabel = reverse ? 'min-label' : 'max-label';
@@ -50,14 +57,14 @@ const templateAreas = reverse => {
     }
   };
 };
-const RootElement = styled('ul', {
+const RootElement = (0, _styles.styled)('ul', {
   name: 'MuiContinuousColorLegend',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })(({
   theme,
   ownerState
-}) => _extends({}, theme.typography.caption, {
+}) => (0, _extends2.default)({}, theme.typography.caption, {
   color: (theme.vars || theme).palette.text.primary,
   lineHeight: '100%',
   display: 'grid',
@@ -67,51 +74,51 @@ const RootElement = styled('ul', {
   paddingInlineStart: 0,
   marginBlock: theme.spacing(1),
   marginInline: theme.spacing(1),
-  [`&.${continuousColorLegendClasses.horizontal}`]: {
+  [`&.${_continuousColorLegendClasses.continuousColorLegendClasses.horizontal}`]: {
     gridTemplateRows: 'min-content min-content',
     gridTemplateColumns: 'min-content auto min-content',
-    [`&.${continuousColorLegendClasses.start}`]: {
+    [`&.${_continuousColorLegendClasses.continuousColorLegendClasses.start}`]: {
       gridTemplateAreas: templateAreas(ownerState.reverse).row.start
     },
-    [`&.${continuousColorLegendClasses.end}`]: {
+    [`&.${_continuousColorLegendClasses.continuousColorLegendClasses.end}`]: {
       gridTemplateAreas: templateAreas(ownerState.reverse).row.end
     },
-    [`&.${continuousColorLegendClasses.extremes}`]: {
+    [`&.${_continuousColorLegendClasses.continuousColorLegendClasses.extremes}`]: {
       gridTemplateAreas: templateAreas(ownerState.reverse).row.extremes,
       gridTemplateRows: 'min-content',
       alignItems: 'center'
     }
   },
-  [`&.${continuousColorLegendClasses.vertical}`]: {
+  [`&.${_continuousColorLegendClasses.continuousColorLegendClasses.vertical}`]: {
     gridTemplateRows: 'min-content auto min-content',
     gridTemplateColumns: 'min-content min-content',
-    [`&.${continuousColorLegendClasses.start}`]: {
+    [`&.${_continuousColorLegendClasses.continuousColorLegendClasses.start}`]: {
       gridTemplateAreas: templateAreas(ownerState.reverse).column.start,
-      [`.${continuousColorLegendClasses.maxLabel}, .${continuousColorLegendClasses.minLabel}`]: {
+      [`.${_continuousColorLegendClasses.continuousColorLegendClasses.maxLabel}, .${_continuousColorLegendClasses.continuousColorLegendClasses.minLabel}`]: {
         justifySelf: 'end'
       }
     },
-    [`&.${continuousColorLegendClasses.end}`]: {
+    [`&.${_continuousColorLegendClasses.continuousColorLegendClasses.end}`]: {
       gridTemplateAreas: templateAreas(ownerState.reverse).column.end,
-      [`.${continuousColorLegendClasses.maxLabel}, .${continuousColorLegendClasses.minLabel}`]: {
+      [`.${_continuousColorLegendClasses.continuousColorLegendClasses.maxLabel}, .${_continuousColorLegendClasses.continuousColorLegendClasses.minLabel}`]: {
         justifySelf: 'start'
       }
     },
-    [`&.${continuousColorLegendClasses.extremes}`]: {
+    [`&.${_continuousColorLegendClasses.continuousColorLegendClasses.extremes}`]: {
       gridTemplateAreas: templateAreas(ownerState.reverse).column.extremes,
       gridTemplateColumns: 'min-content',
-      [`.${continuousColorLegendClasses.maxLabel}, .${continuousColorLegendClasses.minLabel}`]: {
+      [`.${_continuousColorLegendClasses.continuousColorLegendClasses.maxLabel}, .${_continuousColorLegendClasses.continuousColorLegendClasses.minLabel}`]: {
         justifySelf: 'center'
       }
     }
   },
-  [`.${continuousColorLegendClasses.gradient}`]: {
+  [`.${_continuousColorLegendClasses.continuousColorLegendClasses.gradient}`]: {
     gridArea: 'gradient'
   },
-  [`.${continuousColorLegendClasses.maxLabel}`]: {
+  [`.${_continuousColorLegendClasses.continuousColorLegendClasses.maxLabel}`]: {
     gridArea: 'max-label'
   },
-  [`.${continuousColorLegendClasses.minLabel}`]: {
+  [`.${_continuousColorLegendClasses.continuousColorLegendClasses.minLabel}`]: {
     gridArea: 'min-label'
   }
 }));
@@ -124,13 +131,14 @@ const getText = (label, value, formattedValue) => {
     formattedValue
   }) ?? formattedValue;
 };
-const ContinuousColorLegend = consumeThemeProps('MuiContinuousColorLegend', {
+const isZAxis = axis => axis.scale === undefined;
+const ContinuousColorLegend = exports.ContinuousColorLegend = (0, _consumeThemeProps.consumeThemeProps)('MuiContinuousColorLegend', {
   defaultProps: {
     direction: 'horizontal',
     labelPosition: 'end',
     axisDirection: 'z'
   },
-  classesResolver: useUtilityClasses
+  classesResolver: _continuousColorLegendClasses.useUtilityClasses
 }, function ContinuousColorLegend(props, ref) {
   const {
       minLabel,
@@ -145,9 +153,9 @@ const ContinuousColorLegend = consumeThemeProps('MuiContinuousColorLegend', {
       gradientId,
       thickness
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const generateGradientId = useChartGradientIdObjectBoundBuilder();
-  const axisItem = useAxis({
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const generateGradientId = (0, _useChartGradientId.useChartGradientIdObjectBoundBuilder)();
+  const axisItem = (0, _useAxis.useAxis)({
     axisDirection,
     axisId
   });
@@ -160,7 +168,7 @@ const ContinuousColorLegend = consumeThemeProps('MuiContinuousColorLegend', {
 
   // Get texts to display
 
-  const valueFormatter = axisItem?.valueFormatter;
+  const valueFormatter = isZAxis(axisItem) ? undefined : axisItem.valueFormatter;
   const formattedMin = valueFormatter ? valueFormatter(minValue, {
     location: 'legend'
   }) : minValue.toLocaleString();
@@ -169,28 +177,28 @@ const ContinuousColorLegend = consumeThemeProps('MuiContinuousColorLegend', {
   }) : maxValue.toLocaleString();
   const minText = getText(minLabel, minValue, formattedMin);
   const maxText = getText(maxLabel, maxValue, formattedMax);
-  const minComponent = /*#__PURE__*/_jsx("li", {
+  const minComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
     className: classes?.minLabel,
-    children: /*#__PURE__*/_jsx(ChartsLabel, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
       className: classes?.label,
       children: minText
     })
   });
-  const maxComponent = /*#__PURE__*/_jsx("li", {
+  const maxComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
     className: classes?.maxLabel,
-    children: /*#__PURE__*/_jsx(ChartsLabel, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
       className: classes?.label,
       children: maxText
     })
   });
-  return /*#__PURE__*/_jsxs(RootElement, _extends({
-    className: clsx(classes?.root, className),
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootElement, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes?.root, className),
     ref: ref
   }, other, {
     ownerState: props,
-    children: [reverse ? maxComponent : minComponent, /*#__PURE__*/_jsx("li", {
+    children: [reverse ? maxComponent : minComponent, /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
       className: classes?.gradient,
-      children: /*#__PURE__*/_jsx(ChartsLabelGradient, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelGradient.ChartsLabelGradient, {
         direction: direction,
         rotate: rotateGradient,
         reverse: reverse,
@@ -209,62 +217,61 @@ process.env.NODE_ENV !== "production" ? ContinuousColorLegend.propTypes = {
    * The axis direction containing the color configuration to represent.
    * @default 'z'
    */
-  axisDirection: PropTypes.oneOf(['x', 'y', 'z']),
+  axisDirection: _propTypes.default.oneOf(['x', 'y', 'z']),
   /**
    * The id of the axis item with the color configuration to represent.
    * @default The first axis item.
    */
-  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: PropTypes.object,
-  className: PropTypes.string,
+  classes: _propTypes.default.object,
+  className: _propTypes.default.string,
   /**
    * The direction of the legend layout.
    * @default 'horizontal'
    */
-  direction: PropTypes.oneOf(['horizontal', 'vertical']),
+  direction: _propTypes.default.oneOf(['horizontal', 'vertical']),
   /**
    * The id for the gradient to use.
    * If not provided, it will use the generated gradient from the axis configuration.
    * The `gradientId` will be used as `fill="url(#gradientId)"`.
    * @default auto-generated id
    */
-  gradientId: PropTypes.string,
+  gradientId: _propTypes.default.string,
   /**
    * Where to position the labels relative to the gradient.
    * @default 'end'
    */
-  labelPosition: PropTypes.oneOf(['start', 'end', 'extremes']),
+  labelPosition: _propTypes.default.oneOf(['start', 'end', 'extremes']),
   /**
    * The label to display at the maximum side of the gradient.
    * Can either be a string, or a function.
    * If not defined, the formatted maximal value is display.
    * @default formattedValue
    */
-  maxLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  maxLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
   /**
    * The label to display at the minimum side of the gradient.
    * Can either be a string, or a function.
    * @default formattedValue
    */
-  minLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  minLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
   /**
    * If `true`, the gradient and labels will be reversed.
    * @default false
    */
-  reverse: PropTypes.bool,
+  reverse: _propTypes.default.bool,
   /**
    * If provided, the gradient will be rotated by 90deg.
    * Useful for linear gradients that are not in the correct orientation.
    */
-  rotateGradient: PropTypes.bool,
+  rotateGradient: _propTypes.default.bool,
   /**
    * The thickness of the gradient
    * @default 12
    */
-  thickness: PropTypes.number,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { ContinuousColorLegend };
+  thickness: _propTypes.default.number,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

package/ChartsLegend/PiecewiseColorLegend.d.ts

@@ -1,42 +1,42 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import { PrependKeys } from '@mui/x-internals/types';
-import { ChartsLabelMarkProps } from '../ChartsLabel/ChartsLabelMark';
-import { Direction } from './direction';
-import { PiecewiseColorLegendClasses } from './piecewiseColorLegendClasses';
-import { ColorLegendSelector } from './colorLegend.types';
-import { PiecewiseLabelFormatterParams } from './piecewiseColorLegend.types';
-import { PiecewiseColorLegendItemContext } from './legendContext.types';
+import { ChartsLabelMarkProps } from "../ChartsLabel/ChartsLabelMark.js";
+import { Direction } from "./direction.js";
+import { PiecewiseColorLegendClasses } from "./piecewiseColorLegendClasses.js";
+import { ColorLegendSelector } from "./colorLegend.types.js";
+import { PiecewiseLabelFormatterParams } from "./piecewiseColorLegend.types.js";
+import { PiecewiseColorLegendItemContext } from "./legendContext.types.js";
 export interface PiecewiseColorLegendProps extends ColorLegendSelector, PrependKeys<Pick<ChartsLabelMarkProps, 'type'>, 'mark'> {
-    /**
-     * The direction of the legend layout.
-     * @default 'horizontal'
-     */
-    direction?: Direction;
-    /**
-     * Format the legend labels.
-     * @param {PiecewiseLabelFormatterParams} params The bound of the piece to format.
-     * @returns {string|null} The displayed label, `''` to skip the label but show the color mark, or `null` to skip it entirely.
-     */
-    labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
-    /**
-     * Where to position the labels relative to the gradient.
-     * @default 'extremes'
-     */
-    labelPosition?: 'start' | 'end' | 'extremes';
-    /**
-     * Callback fired when a legend item is clicked.
-     * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.
-     * @param {PiecewiseColorLegendItemContext} legendItem The legend item data.
-     * @param {number} index The index of the clicked legend item.
-     */
-    onItemClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: PiecewiseColorLegendItemContext, index: number) => void;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<PiecewiseColorLegendClasses>;
-    className?: string;
-    sx?: SxProps<Theme>;
+  /**
+   * The direction of the legend layout.
+   * @default 'horizontal'
+   */
+  direction?: Direction;
+  /**
+   * Format the legend labels.
+   * @param {PiecewiseLabelFormatterParams} params The bound of the piece to format.
+   * @returns {string|null} The displayed label, `''` to skip the label but show the color mark, or `null` to skip it entirely.
+   */
+  labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+  /**
+   * Where to position the labels relative to the gradient.
+   * @default 'extremes'
+   */
+  labelPosition?: 'start' | 'end' | 'extremes';
+  /**
+   * Callback fired when a legend item is clicked.
+   * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.
+   * @param {PiecewiseColorLegendItemContext} legendItem The legend item data.
+   * @param {number} index The index of the clicked legend item.
+   */
+  onItemClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: PiecewiseColorLegendItemContext, index: number) => void;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PiecewiseColorLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
 }
 declare const PiecewiseColorLegend: React.ForwardRefExoticComponent<PiecewiseColorLegendProps & import("./chartsLegend.types").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
-export { PiecewiseColorLegend };
+export { PiecewiseColorLegend };