@mui/x-charts 7.0.0-beta.6 → 7.0.0-beta.7

package/CHANGELOG.md

@@ -3,6 +3,102 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-beta.7
+
+_Mar 14, 2024_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🦥 The Lazy loading feature is now stable and the `lazyLoading` feature flag was removed from the `experimentalFeatures` prop.
+- 🌍 Improve Japanese (ja-JP) locale for the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### Breaking changes
+
+- The `columnHeader--showColumnBorder` class was replaced by `columnHeader--withLeftBorder` and `columnHeader--withRightBorder`.
+- The `columnHeadersInner`, `columnHeadersInner--scrollable`, and `columnHeaderDropZone` classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility.
+- The `pinnedColumnHeaders`, `pinnedColumnHeaders--left`, and `pinnedColumnHeaders--right` classes were removed along with the element they were applied to.
+  The pinned column headers now use `position: 'sticky'` and are rendered in the same row element as the regular column headers.
+
+#### `@mui/x-data-grid@7.0.0-beta.7`
+
+- [DataGrid] Fix focus visible style on scrollbar (#12402) @oliviertassinari
+- [DataGrid] Fix the issue where pressing the Delete key resets various cell values to an empty string. (#12216) @sooster910
+- [DataGrid] Make `rowCount` part of the state (#12381) @MBilalShafi
+- [DataGrid] Make column resizing and autosizing available in Community plan (#12420) @cherniavskii
+- [DataGrid] Remove `baseSwitch` slot (#12439) @romgrk
+- [l10n] Improve Japanese (ja-JP) locale (#12398) @makoto14
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.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@7.0.0-beta.7`, plus:
+
+- [DataGridPro] Add `inputRef` to the props passed to `colDef.renderHeaderFilter` (#12328) @vovarudomanenko
+- [DataGridPro] Fix filler rendered for no reason when there are pinned columns (#12440) @cherniavskii
+- [DataGridPro] Make lazy loading feature stable (#12421) @cherniavskii
+- [DataGridPro] Render pinned and non-pinned column headers in one row (#12376) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.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@7.0.0-beta.7`, plus:
+
+- [DataGridPremium] Fix auto-scroll not working when selecting cell range (#12267) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.0.0-beta.7`
+
+- [fields] Fix `tabIndex` on accessible field DOM structure (#12311) @flaviendelangle
+- [fields] Fix items alignment on multi input range fields (#12312) @flaviendelangle
+- [pickers] Improve the customization of the range picker calendar header (#11988) @flaviendelangle
+- [pickers] Keep the existing time when looking for closest enabled date (#12377) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0-beta.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@7.0.0-beta.7`.
+
+### Charts
+
+#### `@mui/x-charts@7.0.0-beta.7`
+
+- [charts] Fix axis highlight when axis is reversed (#12407) @alexfauquette
+
+### Tree View
+
+#### Breaking changes
+
+The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency:
+
+```diff
+ <SimpleTreeView
+-  onNodeFocus={onNodeFocus}
++  onItemFocus={onItemFocus}
+ />
+```
+
+#### `@mui/x-tree-view@7.0.0-beta.7`
+
+- [TreeView] Clean the usage of the term "item" and "node" in API introduced during v7 (#12368) @noraleonte
+- [TreeView] Introduce a new `TreeItem2` component and a new `useTreeItem2` hook (#11721) @flaviendelangle
+- [TreeView] Rename `onNodeFocus` to `onItemFocus` (#12419) @noraleonte
+
+### Docs
+
+- [docs] Add `legacy` bundle drop mention in migration pages (#12424) @LukasTy
+- [docs] Add missing luxon `Info` import (#12427) @LukasTy
+- [docs] Improve slots definitions for charts (#12408) @alexfauquette
+- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
+- [docs] Replace `rel="noreferrer"` by `rel="noopener"` @oliviertassinari
+- [docs] Update `date-fns` `weekStarsOn` overriding example (#12416) @LukasTy
+
+### Core
+
+- [core] Fix CI (#12414) @flaviendelangle
+- [core] Fix PR deploy link for Tree View doc pages (#12411) @flaviendelangle
+
 ## 7.0.0-beta.6
 
 _Mar 8, 2024_
@@ -1731,7 +1827,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.3`, plus:
   The Firefox browser currently does not support this behavior because the [getWeekInfo](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo) API is not yet implemented.
 
   ```ts
-  import { Settings } from 'luxon';
+  import { Settings, Info } from 'luxon';
 
   Settings.defaultWeekSettings = {
     firstDay: 1,
@@ -2521,6 +2617,26 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.7
+
+_Mar 14, 2024_
+
+We'd like to offer a big thanks to @LukasTy who made this release possible.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.7`
+
+- [pickers] Keep the existing time when looking for closest enabled date (#12410) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.19.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@6.19.7`.
+
+### Docs
+
+- [docs] Add Pickers custom start of week section (#12425) @LukasTy
+
 ## 6.19.6
 
 _Mar 1, 2024_

package/ChartsLegend/ChartsLegend.d.ts

@@ -13,6 +13,9 @@ export interface ChartsLegendSlotProps {
     legend?: Partial<LegendRendererProps>;
 }
 export type ChartsLegendProps = {
+    /**
+     * The position of the legend.
+     */
     position?: AnchorPosition;
     /**
      * Override or extend the styles applied to the component.

package/ChartsLegend/ChartsLegend.js

@@ -94,6 +94,9 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * @default false
    */
   hidden: _propTypes.default.bool,
+  /**
+   * The position of the legend.
+   */
   position: _propTypes.default.shape({
     horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
     vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired

package/ChartsLegend/DefaultChartsLegend.js

@@ -274,6 +274,9 @@ process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   })]),
+  /**
+   * The position of the legend.
+   */
   position: _propTypes.default.shape({
     horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
     vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired

package/ChartsTooltip/ChartsTooltip.d.ts

@@ -5,8 +5,20 @@ import { ChartsItemContentProps } from './ChartsItemTooltipContent';
 import { ChartsAxisContentProps } from './ChartsAxisTooltipContent';
 import { ChartsTooltipClasses } from './chartsTooltipClasses';
 export interface ChartsTooltipSlots {
+    /**
+     * Custom component for the tooltip popper.
+     * @default ChartsTooltipRoot
+     */
     popper?: React.ElementType<PopperProps>;
+    /**
+     * Custom component for displaying tooltip content when triggered by axis event.
+     * @default DefaultChartsAxisTooltipContent
+     */
     axisContent?: React.ElementType<ChartsAxisContentProps>;
+    /**
+     * Custom component for displaying tooltip content when triggered by item event.
+     * @default DefaultChartsItemTooltipContent
+     */
     itemContent?: React.ElementType<ChartsItemContentProps>;
 }
 export interface ChartsTooltipSlotProps {

package/esm/ChartsLegend/ChartsLegend.js

@@ -86,6 +86,9 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * @default false
    */
   hidden: PropTypes.bool,
+  /**
+   * The position of the legend.
+   */
   position: PropTypes.shape({
     horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
     vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired

package/esm/ChartsLegend/DefaultChartsLegend.js

@@ -265,6 +265,9 @@ process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   })]),
+  /**
+   * The position of the legend.
+   */
   position: PropTypes.shape({
     horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
     vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired

package/esm/hooks/useAxisEvents.js

@@ -43,7 +43,8 @@ export const useAxisEvents = disableAxisListener => {
       }
       const {
         scale,
-        data: axisData
+        data: axisData,
+        reverse
       } = axisConfig;
       if (!isBandScale(scale)) {
         const value = scale.invert(mouseValue);
@@ -76,6 +77,13 @@ export const useAxisEvents = disableAxisListener => {
       if (dataIndex < 0 || dataIndex >= axisData.length) {
         return null;
       }
+      if (reverse) {
+        const reverseIndex = axisData.length - 1 - dataIndex;
+        return {
+          index: reverseIndex,
+          value: axisData[reverseIndex]
+        };
+      }
       return {
         index: dataIndex,
         value: axisData[dataIndex]

package/hooks/useAxisEvents.js

@@ -51,7 +51,8 @@ const useAxisEvents = disableAxisListener => {
       }
       const {
         scale,
-        data: axisData
+        data: axisData,
+        reverse
       } = axisConfig;
       if (!(0, _isBandScale.isBandScale)(scale)) {
         const value = scale.invert(mouseValue);
@@ -84,6 +85,13 @@ const useAxisEvents = disableAxisListener => {
       if (dataIndex < 0 || dataIndex >= axisData.length) {
         return null;
       }
+      if (reverse) {
+        const reverseIndex = axisData.length - 1 - dataIndex;
+        return {
+          index: reverseIndex,
+          value: axisData[reverseIndex]
+        };
+      }
       return {
         index: dataIndex,
         value: axisData[dataIndex]

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-beta.6
+ * @mui/x-charts v7.0.0-beta.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/models/axis.d.ts

@@ -9,9 +9,25 @@ export type D3Scale<Domain extends {
 } = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
 export type D3ContinuouseScale<Range = number, Output = number> = ScaleLogarithmic<Range, Output> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
 export interface ChartsAxisSlots {
+    /**
+     * Custom component for the axis main line.
+     * @default 'line'
+     */
     axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+    /**
+     * Custom component for the axis tick.
+     * @default 'line'
+     */
     axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+    /**
+     * Custom component for tick label.
+     * @default ChartsText
+     */
     axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+    /**
+     * Custom component for axis label.
+     * @default ChartsText
+     */
     axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
 }
 export interface ChartsAxisSlotProps {

package/modern/ChartsLegend/ChartsLegend.js

@@ -85,6 +85,9 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * @default false
    */
   hidden: PropTypes.bool,
+  /**
+   * The position of the legend.
+   */
   position: PropTypes.shape({
     horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
     vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired

package/modern/ChartsLegend/DefaultChartsLegend.js

@@ -265,6 +265,9 @@ process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   })]),
+  /**
+   * The position of the legend.
+   */
   position: PropTypes.shape({
     horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
     vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired

package/modern/hooks/useAxisEvents.js

@@ -43,7 +43,8 @@ export const useAxisEvents = disableAxisListener => {
       }
       const {
         scale,
-        data: axisData
+        data: axisData,
+        reverse
       } = axisConfig;
       if (!isBandScale(scale)) {
         const value = scale.invert(mouseValue);
@@ -76,6 +77,13 @@ export const useAxisEvents = disableAxisListener => {
       if (dataIndex < 0 || dataIndex >= axisData.length) {
         return null;
       }
+      if (reverse) {
+        const reverseIndex = axisData.length - 1 - dataIndex;
+        return {
+          index: reverseIndex,
+          value: axisData[reverseIndex]
+        };
+      }
       return {
         index: dataIndex,
         value: axisData[dataIndex]

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-beta.6
+ * @mui/x-charts v7.0.0-beta.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

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