@mui/x-charts 6.0.0-alpha.13 → 6.0.0-alpha.15

package/BarChart/BarChart.d.ts

@@ -4,18 +4,21 @@ import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { BarSeriesType } from '../models/seriesType/bar';
 import { MakeOptional } from '../models/helpers';
-import { ChartsTooltipProps } from '../ChartsTooltip';
+import { ChartsTooltipProps, ChartsTooltipSlotComponentProps, ChartsTooltipSlotsComponent } from '../ChartsTooltip';
 import { ChartsLegendProps, ChartsLegendSlotsComponent, ChartsLegendSlotComponentProps } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
-export interface BarChartSlotsComponent extends ChartsAxisSlotsComponent, BarPlotSlotsComponent, ChartsLegendSlotsComponent {
+export interface BarChartSlotsComponent extends ChartsAxisSlotsComponent, BarPlotSlotsComponent, ChartsLegendSlotsComponent, ChartsTooltipSlotsComponent {
 }
-export interface BarChartSlotComponentProps extends ChartsAxisSlotComponentProps, BarPlotSlotComponentProps, ChartsLegendSlotComponentProps {
+export interface BarChartSlotComponentProps extends ChartsAxisSlotComponentProps, BarPlotSlotComponentProps, ChartsLegendSlotComponentProps, ChartsTooltipSlotComponentProps {
 }
 export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<BarSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
+    /**
+     * @deprecated Consider using `slotProps.legend` instead.
+     */
     legend?: ChartsLegendProps;
     /**
      * Overridable component slots.

package/BarChart/BarChart.js

@@ -20,7 +20,7 @@ var _ChartsClipPath = require("../ChartsClipPath");
 var _jsxRuntime = require("react/jsx-runtime");
 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 BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
+const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -101,7 +101,6 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     }), children]
   });
 });
-exports.BarChart = BarChart;
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -168,23 +167,19 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: _propTypes.default.shape({
     classes: _propTypes.default.object,
     direction: _propTypes.default.oneOf(['column', 'row']),
     hidden: _propTypes.default.bool,
-    itemWidth: _propTypes.default.number,
-    markSize: _propTypes.default.number,
-    offset: _propTypes.default.shape({
-      x: _propTypes.default.number,
-      y: _propTypes.default.number
-    }),
     position: _propTypes.default.shape({
       horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    spacing: _propTypes.default.number
+    slots: _propTypes.default.object
   }),
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -250,6 +245,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     axisContent: _propTypes.default.elementType,
     classes: _propTypes.default.object,
     itemContent: _propTypes.default.elementType,
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/BarChart/BarElement.js

@@ -26,8 +26,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function getBarElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiBarElement', slot);
 }
-const lineElementClasses = (0, _generateUtilityClasses.default)('MuiBarElement', ['root']);
-exports.lineElementClasses = lineElementClasses;
+const lineElementClasses = exports.lineElementClasses = (0, _generateUtilityClasses.default)('MuiBarElement', ['root']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -38,7 +37,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, getBarElementUtilityClass, classes);
 };
-const BarElementPath = (0, _styles.styled)('rect', {
+const BarElementPath = exports.BarElementPath = (0, _styles.styled)('rect', {
   name: 'MuiBarElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -51,7 +50,6 @@ const BarElementPath = (0, _styles.styled)('rect', {
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
   opacity: ownerState.isFaded && 0.3 || 1
 }));
-exports.BarElementPath = BarElementPath;
 function BarElement(props) {
   const {
       id,

package/BarChart/formatter.js

@@ -63,5 +63,4 @@ const formatter = (params, dataset) => {
     series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v.toLocaleString())
   };
 };
-var _default = formatter;
-exports.default = _default;
+var _default = exports.default = formatter;

package/BarChart/legend.js

@@ -16,5 +16,4 @@ const legendGetter = params => {
   }));
   return data.filter(item => item.label !== undefined);
 };
-var _default = legendGetter;
-exports.default = _default;
+var _default = exports.default = legendGetter;

package/CHANGELOG.md

@@ -3,6 +3,170 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.16.2
+
+_Oct 12, 2023_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Chart's legend text management has been reworked and contains breaking changes (#10138) @alexfauquette
+- 📝 Add [Bulk editing](https://mui.com/x/react-data-grid/recipes-editing/#bulk-editing) demo (#10333) @cherniavskii
+- 🚀 Column grouping now works smoothly with column pinning (#10518) @MBilalShafi
+- 🌍 Improve Arabic (ar-SD) and Spanish (es-ES) locales
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.16.2`
+
+- [DataGrid] Fix `LazyLoading` demo crash (#10621) @MBilalShafi
+- [DataGrid] Fix cells overlapping the scrollbar in iOS Safari (#10633) @cherniavskii
+- [DataGrid] Fix `getRowId is not defined` error (#10613) @romgrk
+- [DataGrid] Get quick filter to work OOTB with `date` and `dateTime` fields (#10636) @MBilalShafi
+- [DataGrid] Make cursor for selectable cells to be `default` unless editable (#9997) @gitstart
+- [DataGrid] Remove unnecessary syntax in JSDoc (#10567) @Lev-Shapiro
+- [DataGrid] Update row hover behavior to match native hover (#10623) @cherniavskii
+- [l10n] Improve Arabic (ar-SD) locale (#10625) @alabenyahia
+
+#### `@mui/x-data-grid-pro@6.16.2` [![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.16.2`, plus:
+
+- [DataGridPro] Improve column grouping and column pinning friendship (#10518) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@6.16.2` [![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.16.2`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.16.2`
+
+- [DateTimePicker] Add support for `DigitalClock` view renderer (#10624) @LukasTy
+- [fields] Bootstrap the multi-HTML input component (#10638) @flaviendelangle
+- [pickers] Fix timezone `UTC` false positive (#10586) @alexfauquette
+- [l10n] Improve Spanish (es-ES) locale (#10588) @eduardodallmann
+
+#### `@mui/x-date-pickers-pro@6.16.2` [![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.16.2`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.15`
+
+#### Breaking changes
+
+The charts have a new text display mechanism.
+It adds line break support and avoids overlapping text in the legend.
+This comes with some breaking changes.
+
+- The DOM structure is modified. An intermediary `<tspan />` element has been added. This can impact how your style is applied.
+  ```diff
+  - <text>The label</text>
+  + <text><tspan>The label</tspan></text>
+  ```
+
+- The top margin has been reduced from 100 to 50 to benefit from the denser legend.
+
+- To accurately compute the text size and then place it, styling should be provided as a JS object. For example, to set the legend font size, you should do:
+  ```jsx
+  <PieChart
+    {/** ... */}
+    slotProps={{
+      legend: {
+        labelStyle: {
+          fontSize: 16,
+        },
+      },
+    }}
+  />
+  ```
+  Support for other text elements (axis labels and tick labels) will be implemented in follow-up PR.
+
+#### Changes
+
+- [charts] Fix typo between internal/external variable (#10640) @alexfauquette
+- [charts] Improve the management of the text (#10138) @alexfauquette
+
+### Docs
+
+- [docs] Add bulk editing demo (#10333) @cherniavskii
+- [docs] Add reference links to DateRangePicker components (#10629) @michelengelen
+- [docs] Add reference links to DateTimePicker components (#10628) @michelengelen
+- [docs] Add reference links to picker field components (#10631) @michelengelen
+- [docs] Added reference links to TimePicker components (#10627) @michelengelen
+- [docs] Avoid Pickers playground error due to empty views (#10654) @LukasTy
+- [docs] Fix DataGrid[Pro/Premium] reference links (#10620) @michelengelen
+
+### Core
+
+- [core] Bump monorepo (#10619) @alexfauquette
+- [core] Update `no-response` workflow (#10491) @MBilalShafi
+- [core] Update the issue templates to reflect the new support workflow (#10651) @MBilalShafi
+- [test] Fix `testEval` not invoking test assertions (#10587) @cherniavskii
+- [test] Fix dev mode warning (#10610) @oliviertassinari
+- [test] Set UUID chance seed in visual tests (#10609) @oliviertassinari
+
+## 6.16.1
+
+_Oct 6, 2023_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🥧 Support interaction with pie chart
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.16.1`
+
+- [DataGrid] Add a new demo with sparklines (#9228) @flaviendelangle
+- [DataGrid] Fix autosize missing a few pixels (#10471) @romgrk
+- [DataGrid] Make `disableColumnSelector` demo idempotent (#10548) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@6.16.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.16.1`.
+
+#### `@mui/x-data-grid-premium@6.16.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.16.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.16.1`
+
+- [pickers] Avoid calendar layout shifting when changing views (#10541) @LukasTy
+- [pickers] Fix clearable behavior when disabled (#10542) @noraleonte
+- [pickers] Improve customization playground examples (#10544) @noraleonte
+
+#### `@mui/x-date-pickers-pro@6.16.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.16.1`, plus:
+
+- [DateRangePicker] Fix `InputProps` propagation in multi input (#10564) @alexfauquette
+
+### Charts / `@mui/x-charts@6.0.0-alpha.14`
+
+- [charts] Display cursor pointer for pie chart only if `onClick` is provided (#10551) @giladappsforce
+- [charts] Add `onClick` prop to PieChart (#10506) @giladappsforce
+- [charts] Support `slots`/`slotProps` for the tooltip (#10515) @alexfauquette
+
+### Docs
+
+- [docs] Add `DateRangePicker` example with a `Button` trigger (#10485) @LukasTy
+- [docs] Add section about disabling columns panel (#10328) @MBilalShafi
+- [docs] Add section about overriding slots to base concepts (#10421) @noraleonte
+- [docs] Add "What's new" page listing all release announcements (#9727) @joserodolfofreitas
+- [docs] Update RTL Support section of the grid localization docs (#10561) @MBilalShafi
+
+### Core
+
+- [core] Fix casing consistency with legal and marketing content @oliviertassinari
+- [core] Revert the link in the priority support ticket description (#10517) @michelengelen
+- [CHANGELOG] Polish image @oliviertassinari
+
 ## 6.16.0
 
 _Sep 29, 2023_
@@ -13,7 +177,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 
   The pickers and fields now have an out-of-the box implementation for clearing the field value. You can see the documentation for this behavior on the [Date Picker documentation](https://mui.com/x/react-date-pickers/date-picker/#clearing-the-value).
 
-  <img width="380" alt="Clearable behavior" src="https://github.com/mui/mui-x/assets/72460825/e4a66169-83b5-4579-b9f6-6e15bb528411">
+  <img width="337" height="139" alt="Clearable behavior" src="https://github.com/mui/mui-x/assets/3165635/a5407cb6-0b8a-443c-b4b9-1f81ceb4d087">
 
 - 💫 Add Date Picker customization playground (#9581) @noraleonte
 

package/ChartContainer/index.js

@@ -16,7 +16,7 @@ var _HighlightProvider = require("../context/HighlightProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 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 ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
+const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
     width,
     height,
@@ -64,5 +64,4 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
       })
     })
   });
-});
-exports.ChartContainer = ChartContainer;
+});

package/ChartsAxis/axisClasses.js

@@ -9,5 +9,4 @@ var _utils = require("@mui/utils");
 function getAxisUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiChartsAxis', slot);
 }
-const axisClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);
-exports.axisClasses = axisClasses;
+const axisClasses = exports.axisClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);

package/ChartsLegend/ChartsLegend.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { Theme } from '@mui/material/styles';
 import { DrawingArea } from '../context/DrawingProvider';
-import { AnchorPosition, SizingParams } from './utils';
+import { AnchorPosition, Direction } from './utils';
 import { FormattedSeries } from '../context/SeriesContextProvider';
 import { ChartsLegendClasses } from './chartsLegendClasses';
 import { DefaultizedProps } from '../models/helpers';
-import { ChartSeriesDefaultized, LegendParams } from '../models/seriesType/config';
+import { LegendParams } from '../models/seriesType/config';
+import { CardinalDirections } from '../models/layout';
 export interface ChartsLegendSlotsComponent {
     legend?: React.JSXElementConstructor<LegendRendererProps>;
 }
@@ -14,10 +15,6 @@ export interface ChartsLegendSlotComponentProps {
 }
 export type ChartsLegendProps = {
     position?: AnchorPosition;
-    offset?: Partial<{
-        x: number;
-        y: number;
-    }>;
     /**
      * Override or extend the styles applied to the component.
      */
@@ -26,6 +23,11 @@ export type ChartsLegendProps = {
      * Set to true to hide the legend.
      */
     hidden?: boolean;
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
     /**
      * Overridable component slots.
      * @default {}
@@ -36,36 +38,53 @@ export type ChartsLegendProps = {
      * @default {}
      */
     slotProps?: ChartsLegendSlotComponentProps;
-} & SizingParams;
-type DefaultizedChartsLegendProps = DefaultizedProps<ChartsLegendProps, 'direction' | 'position'>;
-type SeriesLegendOwnerState = ChartSeriesDefaultized<any> & Pick<DefaultizedChartsLegendProps, 'direction'> & {
-    seriesIndex: number;
 };
+type DefaultizedChartsLegendProps = DefaultizedProps<ChartsLegendProps, 'direction' | 'position'>;
 export type ChartsLegendRootOwnerState = {
     position: AnchorPosition;
-    direction: 'row' | 'column';
+    direction: Direction;
     drawingArea: DrawingArea;
     offsetX?: number;
     offsetY?: number;
     seriesNumber: number;
 };
-export declare const ChartsLegendRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
-    ownerState: ChartsLegendRootOwnerState;
-}, Pick<React.SVGProps<SVGGElement>, keyof React.SVGProps<SVGGElement>>, {}>;
-export declare const ChartsSeriesLegendGroup: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
-    ownerState: SeriesLegendOwnerState;
-}, Pick<React.SVGProps<SVGGElement>, keyof React.SVGProps<SVGGElement>>, {}>;
-export declare const ChartsLegendMark: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
-    ownerState: {
-        color: string;
-    };
-}, Pick<React.SVGProps<SVGRectElement>, keyof React.SVGProps<SVGRectElement>>, {}>;
-export declare const ChartsLegendLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, Pick<React.SVGTextElementAttributes<SVGTextElement>, keyof React.SVGTextElementAttributes<SVGTextElement>>, {}>;
+export declare const ChartsLegendRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, Pick<React.SVGProps<SVGGElement>, keyof React.SVGProps<SVGGElement>>, {}>;
 export interface LegendRendererProps extends Omit<DefaultizedChartsLegendProps, 'slots' | 'slotProps'> {
     series: FormattedSeries;
     seriesToDisplay: LegendParams[];
     drawingArea: DrawingArea;
-    classes: Record<'label' | 'mark' | 'series' | 'root', string>;
+    classes: Record<'mark' | 'series' | 'root', string>;
+    /**
+     * Style applied to legend labels.
+     * @default theme.typography.subtitle1
+     */
+    labelStyle?: React.CSSProperties;
+    /**
+     * Width of the item mark (in px).
+     * @default 20
+     */
+    itemMarkWidth?: number;
+    /**
+     * Height of the item mark (in px).
+     * @default 20
+     */
+    itemMarkHeight?: number;
+    /**
+     * Space between the mark and the label (in px).
+     * @default 5
+     */
+    markGap?: number;
+    /**
+     * Space between two legend items (in px).
+     * @default 10
+     */
+    itemGap?: number;
+    /**
+     * Legend padding (in px).
+     * Can either be a single number, or an object with top, left, bottom, right properties.
+     * @default 0
+     */
+    padding?: number | Partial<CardinalDirections<number>>;
 }
 export declare function ChartsLegend(inProps: ChartsLegendProps): React.JSX.Element;
 export {};