@mui/x-charts 8.0.0-alpha.6 → 8.0.0-alpha.7

package/BarChart/useBarChartProps.js

@@ -5,6 +5,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "axisHighlight", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
+import { calculateMargins } from "../internals/calculateMargins.js";
+
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -41,7 +43,8 @@ export const useBarChartProps = props => {
       onHighlightChange,
       borderRadius,
       barLabel,
-      className
+      className,
+      hideLegend
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -61,7 +64,12 @@ export const useBarChartProps = props => {
     })),
     width,
     height,
-    margin,
+    margin: calculateMargins({
+      margin,
+      hideLegend,
+      slotProps,
+      series
+    }),
     colors,
     dataset,
     xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [_extends({
@@ -70,7 +78,6 @@ export const useBarChartProps = props => {
     yAxis: yAxis ?? (hasHorizontalSeries ? [_extends({
       id: DEFAULT_Y_AXIS_KEY
     }, defaultAxisConfig)] : undefined),
-    sx,
     highlightedItem,
     onHighlightChange,
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
@@ -119,7 +126,13 @@ export const useBarChartProps = props => {
     slots,
     slotProps
   };
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
   return {
+    chartsWrapperProps,
     chartContainerProps,
     barPlotProps,
     axisClickHandlerProps,

package/CHANGELOG.md

@@ -5,6 +5,132 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.7
+
+_Jan 9, 2025_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Charts legend is now an HTML element which can be styled more easily
+- 💫 Support [aggregation with server-side data](/x/react-data-grid/server-side-data/aggregation/)
+- 🏎️ Improve Data Grid aggregation performance
+- 🌍 Add Chinese (Taiwan) (zh-TW) locale on the Date and Time Pickers
+- 🌍 Improve Norwegian (nb-NO) locale on the Date and Time Pickers
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@derek-0000, @josteinjhauge, @k-rajat19, @nusr, @tomashauser.
+Following are all team members who have contributed to this release:
+@cherniavskii, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @arminmeh, @romgrk, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-alpha.7`
+
+- [DataGrid] Improve React 19 support (#15769) @LukasTy
+- [DataGrid] Add `name` attribute to the checkbox selection column (#15178) @derek-0000
+- [DataGrid] Fix number filter field formatting values while typing (#16062) @arminmeh
+- [DataGrid] Fix select all checkbox state reset with server side data (#16034) @MBilalShafi
+- [DataGrid] Refactor: create base button props (#15930) @romgrk
+- [DataGrid] Refactor: create tooltip props (#16086) @romgrk
+- [DataGrid] Fix TS error (#16046) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.7` [![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.0.0-alpha.7`.
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.7` [![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.0.0-alpha.7`, plus:
+
+- [DataGridPremium] Improve aggregation performance for multiple columns (#16097) @cherniavskii
+- [DataGridPremium] Make Aggregation keyboard accessible in the column menu (#15934) @k-rajat19
+- [DataGridPremium] Server-side aggregation with data source (#15741) @MBilalShafi
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `date-fns` and `date-fns-jalali` date library adapters have been renamed to better align with the current stable major versions — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#✅-rename-date-fns-adapter-imports)
+- Update default `closeOnSelect` and Action Bar `actions` values - [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#update-default-closeonselect-and-action-bar-actions-values)
+- The component passed to the `layout` slot no longer receives the `value`, `onChange` and `onSelectShortcut` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-layout).
+- The component passed to the `toolbar` slot no longer receives the `value`, `onChange` and `isLandscape` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-toolbar).
+- The component passed to the `shortcuts` slot no longer receives the `onChange`, `isValid` and `isLandscape` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-shortcuts).
+- The `PickerShortcutChangeImportance` type has been renamed `PickerChangeImportance` — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#renamed-variables-and-types).
+- The component passed to the `layout` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-layout).
+- The component passed to the `toolbar` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-toolbar).
+- The component passed to the `tabs` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-tabs).
+
+#### `@mui/x-date-pickers@8.0.0-alpha.7`
+
+- [fields] Handle focusing container with `inputRef.current.focus` on `accessibleFieldDOMStructure` (#15985) @LukasTy
+- [pickers] Always use `setValue` internally to update the picker value (#16056) @flaviendelangle
+- [pickers] Create a new context to pass the range position props to the layout components and to the views (#15846) @flaviendelangle
+- [pickers] Introduce a new concept of `manager` (#15339) @flaviendelangle
+- [pickers] Improve React 19 support (#15769) @LukasTy
+- [pickers] Memoize `<PickersActionBar />` (#16071) @LukasTy
+- [pickers] Remove `NonEmptyDateRange` type (#16035) @flaviendelangle
+- [pickers] Rename `AdapterDateFns` into `AdapterDateFnsV2` and `AdapterDateFnsV3` into `AdapterDateFns` (#16082) @LukasTy
+- [pickers] Rename `ctx.onViewChange` to `ctx.setView` and add it to the actions context (#16044) @flaviendelangle
+- [pickers] Support `date-fns-jalali` v4 (#16011) @LukasTy
+- [pickers] Update `closeOnSelect` and `actionBar.actions` default values (#15944) @LukasTy
+- [pickers] Use `usePickerContext()` and `usePickerActionsContext()` instead of passing props to the `shortcuts` and `toolbar` slots (#15948) @flaviendelangle
+- [l10n] Add Chinese (Taiwan) (zh-TW) locale (#16033) @nusr
+- [l10n] Improve Norwegian (nb-NO) locale (#16089) @josteinjhauge
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.7` [![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.0.0-alpha.7`.
+
+### Charts
+
+#### Breaking changes
+
+- Removed `DefaultChartsLegend` component, since it is now easier to create custom legends — [Learn more](https://next.mui.com/x/react-charts/components/#html-components).
+- The default legend is now an HTML element and can be styled more easily.
+- The `width` and `height` properties of the charts now only apply to the `svg` element, and not their wrappers, this might cause some layout shifts.
+- `slotProps.legend.direction` now accepts `'horizontal' | 'vertical'` instead of `'row' | 'column'` — [Learn more](https://next.mui.com/x/migration/migration-charts-v7/#legend-direction-value-change-✅).
+- The `getSeriesToDisplay` function was removed in favor of the `useLegend` hook. — [Learn more](https://next.mui.com/x/migration/migration-charts-v7/#the-getseriestodisplay-function-was-removed).
+
+#### `@mui/x-charts@8.0.0-alpha.7`
+
+- [charts] New HTML legend & styles (#15733) @JCQuintas
+- [charts] Improve React 19 support (#15769) @LukasTy
+- [charts] Fix 301 redirection in the API documentation @oliviertassinari
+
+#### `@mui/x-charts-pro@8.0.0-alpha.7` [![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.0.0-alpha.7`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.7`
+
+- [TreeView] Improve React 19 support (#15769) @LukasTy
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.7` [![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.0.0-alpha.7`.
+
+### Docs
+
+- [docs] Fix `EditingWithDatePickers` demo (#15967) @k-rajat19
+- [docs] Fix inconsistent multi input range field separators (#16043) @flaviendelangle
+- [docs] Fix non-existing "adapter" property of `LocalizationProvider` (#16084) @tomashauser
+- [docs] Refactor Data Grid with Date Pickers example (#15992) @LukasTy
+- [docs] Unify the wording of the pickers slots breaking changes (#16036) @flaviendelangle
+
+### Core
+
+- [core] Clarify the release strategy (#16014) @MBilalShafi
+- [core] Small fixes on docs @oliviertassinari
+- [core] Sync with other repos @oliviertassinari
+- [core] Update the `release:version` docs (#16038) @cherniavskii
+- [code-infra] Add `testSkipIf` and `describeSkipIf` (#16049) @JCQuintas
+- [test] Stabilize flaky Data Grid tests (#16053) @LukasTy
+
 ## 8.0.0-alpha.6
 
 _Dec 26, 2024_
@@ -104,7 +230,7 @@ Following are all team members who have contributed to this release:
 
 #### Breaking changes
 
-- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`.
+- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`:
 
   - For `.root` element, use `slotProps.root`.
   - For `.main` element (the one with `role="grid"`), use `slotProps.main`.

package/ChartsLabel/ChartsLabel.d.ts

@@ -11,9 +11,8 @@ export interface ChartsLabelProps {
     sx?: SxProps<Theme>;
 }
 /**
- * @ignore - internal component.
- *
  * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
  */
-declare const ChartsLabel: React.ForwardRefExoticComponent<ChartsLabelProps & React.RefAttributes<any>>;
+declare const ChartsLabel: React.ForwardRefExoticComponent<ChartsLabelProps & React.RefAttributes<{}>>;
 export { ChartsLabel };

package/ChartsLabel/ChartsLabel.js

@@ -1,31 +1,17 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { useUtilityClasses } from "./labelClasses.js";
 import { consumeThemeProps } from "../internals/consumeThemeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Root = styled('span', {
-  name: 'MuiChartsLabel',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})(({
-  theme
-}) => _extends({}, theme.typography.caption, {
-  color: (theme.vars || theme).palette.text.primary,
-  lineHeight: undefined,
-  display: 'flex'
-}));
-
 /**
- * @ignore - internal component.
- *
  * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
  */
 const ChartsLabel = consumeThemeProps('MuiChartsLabel', {
   classesResolver: useUtilityClasses
@@ -36,9 +22,8 @@ const ChartsLabel = consumeThemeProps('MuiChartsLabel', {
       classes
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx(Root, _extends({
+  return /*#__PURE__*/_jsx("span", _extends({
     className: clsx(classes?.root, className),
-    ownerState: props,
     ref: ref
   }, other, {
     children: children

package/ChartsLabel/ChartsLabelGradient.d.ts

@@ -4,26 +4,28 @@ import { ChartsLabelGradientClasses } from './labelGradientClasses';
 export interface ChartsLabelGradientProps {
     /**
      * A unique identifier for the gradient.
-     *
      * The `gradientId` will be used as `fill="url(#gradientId)"`.
      */
     gradientId: string;
     /**
      * The direction of the gradient.
-     *
-     * @default 'row'
+     * @default 'horizontal'
      */
-    direction?: 'column' | 'row';
+    direction?: 'vertical' | 'horizontal';
     /**
      * If `true`, the gradient will be reversed.
      */
     reverse?: boolean;
     /**
      * If provided, the gradient will be rotated by 90deg.
-     *
      * Useful for linear gradients that are not in the correct orientation.
      */
     rotate?: boolean;
+    /**
+     * The thickness of the gradient
+     * @default 12
+     */
+    thickness?: number;
     /**
      * Override or extend the styles applied to the component.
      */
@@ -32,9 +34,8 @@ export interface ChartsLabelGradientProps {
     sx?: SxProps<Theme>;
 }
 /**
- * @ignore - internal component.
- *
  * Generates the label Gradient for the tooltip and legend.
+ * @ignore - internal component.
  */
-declare const ChartsLabelGradient: React.ForwardRefExoticComponent<ChartsLabelGradientProps & React.RefAttributes<any>>;
+declare const ChartsLabelGradient: React.ForwardRefExoticComponent<ChartsLabelGradientProps & React.RefAttributes<{}>>;
 export { ChartsLabelGradient };

package/ChartsLabel/ChartsLabelGradient.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["gradientId", "direction", "classes", "className"];
+const _excluded = ["gradientId", "direction", "classes", "className", "rotate", "reverse", "thickness"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
@@ -12,15 +12,15 @@ import { consumeThemeProps } from "../internals/consumeThemeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getRotation = (direction, reverse, rotate) => {
   if (!rotate && reverse) {
-    return direction === 'column' ? 90 : 180;
+    return direction === 'vertical' ? 90 : 180;
   }
   if (rotate && !reverse) {
-    return direction === 'column' ? 0 : 90;
+    return direction === 'vertical' ? 0 : 90;
   }
   if (rotate && reverse) {
-    return direction === 'column' ? 180 : -90;
+    return direction === 'vertical' ? 180 : -90;
   }
-  return direction === 'column' ? -90 : 0;
+  return direction === 'vertical' ? -90 : 0;
 };
 const Root = styled('div', {
   name: 'MuiChartsLabelGradient',
@@ -38,17 +38,17 @@ const Root = styled('div', {
       borderRadius: 2,
       overflow: 'hidden'
     },
-    [`&.${labelGradientClasses.row}`]: {
+    [`&.${labelGradientClasses.horizontal}`]: {
       width: '100%',
       [`.${labelGradientClasses.mask}`]: {
-        height: 12,
+        height: ownerState.thickness,
         width: '100%'
       }
     },
-    [`&.${labelGradientClasses.column}`]: {
+    [`&.${labelGradientClasses.vertical}`]: {
       height: '100%',
       [`.${labelGradientClasses.mask}`]: {
-        width: 12,
+        width: ownerState.thickness,
         height: '100%',
         '> svg': {
           height: '100%'
@@ -63,13 +63,13 @@ const Root = styled('div', {
 });
 
 /**
- * @ignore - internal component.
- *
  * Generates the label Gradient for the tooltip and legend.
+ * @ignore - internal component.
  */
 const ChartsLabelGradient = consumeThemeProps('MuiChartsLabelGradient', {
   defaultProps: {
-    direction: 'row'
+    direction: 'horizontal',
+    thickness: 12
   },
   classesResolver: useUtilityClasses
 }, function ChartsLabelGradient(props, ref) {
@@ -90,6 +90,7 @@ const ChartsLabelGradient = consumeThemeProps('MuiChartsLabelGradient', {
       children: /*#__PURE__*/_jsx("svg", {
         viewBox: "0 0 24 24",
         children: /*#__PURE__*/_jsx("rect", {
+          className: classes?.fill,
           width: "24",
           height: "24",
           fill: `url(#${gradientId})`
@@ -109,13 +110,11 @@ process.env.NODE_ENV !== "production" ? ChartsLabelGradient.propTypes = {
   classes: PropTypes.object,
   /**
    * The direction of the gradient.
-   *
-   * @default 'row'
+   * @default 'horizontal'
    */
-  direction: PropTypes.oneOf(['column', 'row']),
+  direction: PropTypes.oneOf(['vertical', 'horizontal']),
   /**
    * A unique identifier for the gradient.
-   *
    * The `gradientId` will be used as `fill="url(#gradientId)"`.
    */
   gradientId: PropTypes.string.isRequired,
@@ -125,9 +124,13 @@ process.env.NODE_ENV !== "production" ? ChartsLabelGradient.propTypes = {
   reverse: PropTypes.bool,
   /**
    * If provided, the gradient will be rotated by 90deg.
-   *
    * Useful for linear gradients that are not in the correct orientation.
    */
-  rotate: PropTypes.bool
+  rotate: PropTypes.bool,
+  /**
+   * The thickness of the gradient
+   * @default 12
+   */
+  thickness: PropTypes.number
 } : void 0;
 export { ChartsLabelGradient };

package/ChartsLabel/ChartsLabelMark.d.ts

@@ -19,9 +19,8 @@ export interface ChartsLabelMarkProps {
     sx?: SxProps<Theme>;
 }
 /**
- * @ignore - internal component.
- *
  * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
  */
-declare const ChartsLabelMark: React.ForwardRefExoticComponent<ChartsLabelMarkProps & React.RefAttributes<any>>;
+declare const ChartsLabelMark: React.ForwardRefExoticComponent<ChartsLabelMarkProps & React.RefAttributes<{}>>;
 export { ChartsLabelMark };

package/ChartsLabel/ChartsLabelMark.js

@@ -52,11 +52,13 @@ const Root = styled('div', {
 });
 
 /**
- * @ignore - internal component.
- *
  * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
  */
 const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
+  defaultProps: {
+    type: 'square'
+  },
   classesResolver: useUtilityClasses
 }, function ChartsLabelMark(props, ref) {
   const {
@@ -78,6 +80,7 @@ const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
         viewBox: "0 0 24 24",
         preserveAspectRatio: type === 'line' ? 'none' : undefined,
         children: /*#__PURE__*/_jsx("rect", {
+          className: classes?.fill,
           width: "24",
           height: "24",
           fill: color

package/ChartsLabel/index.d.ts

@@ -0,0 +1,7 @@
+export type { ChartsLabelMarkProps } from './ChartsLabelMark';
+export { labelClasses } from './labelClasses';
+export type { ChartsLabelClasses } from './labelClasses';
+export { labelMarkClasses } from './labelMarkClasses';
+export type { ChartsLabelMarkClasses } from './labelMarkClasses';
+export { labelGradientClasses } from './labelGradientClasses';
+export type { ChartsLabelGradientClasses } from './labelGradientClasses';

package/ChartsLabel/index.js

@@ -0,0 +1,6 @@
+// export * from './ChartsLabel';
+
+// export * from './ChartsLabelGradient';
+export { labelClasses } from "./labelClasses.js";
+export { labelMarkClasses } from "./labelMarkClasses.js";
+export { labelGradientClasses } from "./labelGradientClasses.js";

package/ChartsLabel/labelClasses.d.ts

@@ -3,7 +3,6 @@ export interface ChartsLabelClasses {
     /** Styles applied to the root element. */
     root: string;
 }
-export type ChartsLabelClassKey = keyof ChartsLabelClasses;
 export declare function getLabelUtilityClass(slot: string): string;
 export declare const labelClasses: ChartsLabelClasses;
 export declare const useUtilityClasses: (props: ChartsLabelProps) => Record<"root", string>;

package/ChartsLabel/labelGradientClasses.d.ts

@@ -5,11 +5,12 @@ export interface ChartsLabelGradientClasses {
     /** Styles applied to the "mask" that gives shape to the gradient. */
     mask: string;
     /** Styles applied when direction is "column". */
-    column: string;
+    vertical: string;
     /** Styles applied when direction is "row". */
-    row: string;
+    horizontal: string;
+    /** Styles applied to the element filled by the gradient */
+    fill: string;
 }
-export type ChartsLabelGradientClassKey = keyof ChartsLabelGradientClasses;
 export declare function getLabelGradientUtilityClass(slot: string): string;
 export declare const labelGradientClasses: ChartsLabelGradientClasses;
-export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"mask" | "root", string>;
+export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"root" | "mask" | "fill", string>;

package/ChartsLabel/labelGradientClasses.js

@@ -4,14 +4,15 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getLabelGradientUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLabelGradient', slot);
 }
-export const labelGradientClasses = generateUtilityClasses('MuiChartsLabelGradient', ['root', 'column', 'row', 'mask']);
+export const labelGradientClasses = generateUtilityClasses('MuiChartsLabelGradient', ['root', 'vertical', 'horizontal', 'mask', 'fill']);
 export const useUtilityClasses = props => {
   const {
     direction
   } = props;
   const slots = {
     root: ['root', direction],
-    mask: ['mask']
+    mask: ['mask'],
+    fill: ['fill']
   };
   return composeClasses(slots, getLabelGradientUtilityClass, props.classes);
 };

package/ChartsLabel/labelMarkClasses.d.ts

@@ -10,8 +10,9 @@ export interface ChartsLabelMarkClasses {
     square: string;
     /** Styles applied to the mark type "circle". */
     circle: string;
+    /** Styles applied to the element with fill={color} attribute. */
+    fill: string;
 }
-export type ChartsLabelMarkClassKey = keyof ChartsLabelMarkClasses;
 export declare function getLabelMarkUtilityClass(slot: string): string;
 export declare const labelMarkClasses: ChartsLabelMarkClasses;
-export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"mask" | "root", string>;
+export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "mask" | "fill", string>;

package/ChartsLabel/labelMarkClasses.js

@@ -4,14 +4,15 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getLabelMarkUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLabelMark', slot);
 }
-export const labelMarkClasses = generateUtilityClasses('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'mask']);
+export const labelMarkClasses = generateUtilityClasses('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'mask', 'fill']);
 export const useUtilityClasses = props => {
   const {
     type
   } = props;
   const slots = {
     root: ['root', type],
-    mask: ['mask']
+    mask: ['mask'],
+    fill: ['fill']
   };
   return composeClasses(slots, getLabelMarkUtilityClass, props.classes);
 };

package/ChartsLabel/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/ChartsLabel/index.js",
+  "types": "./index.d.ts"
+}

package/ChartsLegend/ChartsLegend.d.ts

@@ -1,31 +1,27 @@
 import * as React from 'react';
-import { LegendRendererProps } from './DefaultChartsLegend';
-import { LegendPlacement } from './legend.types';
-export type ChartsLegendPropsBase = Omit<LegendRendererProps, keyof LegendPlacement | 'series' | 'seriesToDisplay' | 'drawingArea'> & LegendPlacement;
-export interface ChartsLegendSlots {
+import { SxProps, Theme } from '@mui/material/styles';
+import type { Direction } from './direction';
+import { SeriesLegendItemContext } from './legendContext.types';
+import { type ChartsLegendClasses } from './chartsLegendClasses';
+export interface ChartsLegendProps {
     /**
-     * Custom rendering of the legend.
-     * @default DefaultChartsLegend
+     * Callback fired when a legend item is clicked.
+     * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.
+     * @param {SeriesLegendItemContext} legendItem The legend item data.
+     * @param {number} index The index of the clicked legend item.
      */
-    legend?: React.JSXElementConstructor<LegendRendererProps>;
-}
-export interface ChartsLegendSlotProps {
-    legend?: Partial<LegendRendererProps>;
-}
-export interface ChartsLegendProps extends ChartsLegendPropsBase {
+    onItemClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: SeriesLegendItemContext, index: number) => void;
     /**
-     * Overridable component slots.
-     * @default {}
+     * The direction of the legend layout.
+     * The default depends on the chart.
      */
-    slots?: ChartsLegendSlots;
+    direction?: Direction;
     /**
-     * The props used for each component slot.
-     * @default {}
+     * Override or extend the styles applied to the component.
      */
-    slotProps?: ChartsLegendSlotProps;
-}
-declare function ChartsLegend(inProps: ChartsLegendProps): React.JSX.Element;
-declare namespace ChartsLegend {
-    var propTypes: any;
+    classes?: Partial<ChartsLegendClasses>;
+    className?: string;
+    sx?: SxProps<Theme>;
 }
+declare const ChartsLegend: React.ForwardRefExoticComponent<ChartsLegendProps & import("./chartsLegend.types").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
 export { ChartsLegend };