@mui/x-charts 7.15.0 → 7.16.0

package/BarChart/BarChart.js

@@ -2,17 +2,17 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
-import { BarPlot } from './BarPlot';
-import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
-import { ChartsAxis } from '../ChartsAxis';
-import { ChartsTooltip } from '../ChartsTooltip';
-import { ChartsLegend } from '../ChartsLegend';
-import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
-import { ChartsClipPath } from '../ChartsClipPath';
-import { ChartsGrid } from '../ChartsGrid';
-import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
-import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
-import { useBarChartProps } from './useBarChartProps';
+import { BarPlot } from "./BarPlot.js";
+import { ResponsiveChartContainer } from "../ResponsiveChartContainer/index.js";
+import { ChartsAxis } from "../ChartsAxis/index.js";
+import { ChartsTooltip } from "../ChartsTooltip/index.js";
+import { ChartsLegend } from "../ChartsLegend/index.js";
+import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
+import { ChartsClipPath } from "../ChartsClipPath/index.js";
+import { ChartsGrid } from "../ChartsGrid/index.js";
+import { ChartsOnAxisClickHandler } from "../ChartsOnAxisClickHandler/index.js";
+import { ChartsOverlay } from "../ChartsOverlay/ChartsOverlay.js";
+import { useBarChartProps } from "./useBarChartProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -47,7 +47,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({
     ref: ref
   }, chartContainerProps, {
-    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
       children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
     })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
   }));
@@ -139,6 +139,17 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
+    itemGap: PropTypes.number,
+    itemMarkHeight: PropTypes.number,
+    itemMarkWidth: PropTypes.number,
+    labelStyle: PropTypes.object,
+    markGap: PropTypes.number,
+    padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      bottom: PropTypes.number,
+      left: PropTypes.number,
+      right: PropTypes.number,
+      top: PropTypes.number
+    })]),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired

package/BarChart/BarClipPath.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["style", "maskId"];
 import * as React from 'react';
 import { animated } from '@react-spring/web';
-import { getRadius } from './getRadius';
+import { getRadius } from "./getRadius.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const buildInset = corners => `inset(0px round ${corners.topLeft}px ${corners.topRight}px ${corners.bottomRight}px ${corners.bottomLeft}px)`;
 function BarClipRect(props) {

package/BarChart/BarElement.js

@@ -10,8 +10,8 @@ import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
 import { animated } from '@react-spring/web';
-import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { useItemHighlighted } from '../context';
+import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { useItemHighlighted } from "../context/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getBarElementUtilityClass(slot) {
   return generateUtilityClass('MuiBarElement', slot);

package/BarChart/BarLabel/BarLabel.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
 import PropTypes from 'prop-types';
-import { barLabelClasses } from './barLabelClasses';
+import { barLabelClasses } from "./barLabelClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const BarLabelComponent = styled(animated.text, {
   name: 'MuiBarLabel',

package/BarChart/BarLabel/BarLabelItem.js

@@ -5,10 +5,10 @@ const _excluded = ["seriesId", "classes", "color", "style", "dataIndex", "barLab
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import PropTypes from 'prop-types';
-import { useUtilityClasses } from './barLabelClasses';
-import { getBarLabel } from './getBarLabel';
-import { BarLabel } from './BarLabel';
-import { useItemHighlighted } from '../../context';
+import { useUtilityClasses } from "./barLabelClasses.js";
+import { getBarLabel } from "./getBarLabel.js";
+import { BarLabel } from "./BarLabel.js";
+import { useItemHighlighted } from "../../context/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.

package/BarChart/BarLabel/BarLabelPlot.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["bars", "skipAnimation"];
 import * as React from 'react';
 import { useTransition } from '@react-spring/web';
-import { BarLabelItem } from './BarLabelItem';
+import { BarLabelItem } from "./BarLabelItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const leaveStyle = ({
   layout,

package/BarChart/BarLabel/index.js

@@ -1,2 +1,2 @@
-export { BarLabel } from './BarLabel';
-export { barLabelClasses, getBarLabelUtilityClass } from './barLabelClasses';
+export { BarLabel } from "./BarLabel.js";
+export { barLabelClasses, getBarLabelUtilityClass } from "./barLabelClasses.js";

package/BarChart/BarPlot.js

@@ -4,14 +4,14 @@ const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { BarElement } from './BarElement';
-import getColor from './getColor';
-import { useChartId } from '../hooks';
-import { BarClipPath } from './BarClipPath';
-import { BarLabelPlot } from './BarLabel/BarLabelPlot';
-import { checkScaleErrors } from './checkScaleErrors';
-import { useBarSeries } from '../hooks/useSeries';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { BarElement } from "./BarElement.js";
+import getColor from "./getColor.js";
+import { useChartId } from "../hooks/index.js";
+import { BarClipPath } from "./BarClipPath.js";
+import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
+import { checkScaleErrors } from "./checkScaleErrors.js";
+import { useBarSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Solution of the equations

package/BarChart/checkScaleErrors.js

@@ -1,5 +1,5 @@
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
-import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
+import { isBandScaleConfig, isPointScaleConfig } from "../models/axis.js";
 const getAxisMessage = (axisDirection, axisId) => {
   const axisName = `${axisDirection}-axis`;
   const axisIdName = `${axisDirection}Axis`;

package/BarChart/formatter.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
-import { getStackingGroups } from '../internals/stackSeries';
-import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
+import { getStackingGroups } from "../internals/stackSeries.js";
+import { defaultizeValueFormatter } from "../internals/defaultizeValueFormatter.js";
 let warnOnce = false;
 const formatter = (params, dataset) => {
   const {

package/BarChart/index.js

@@ -1,4 +1,4 @@
-export * from './BarChart';
-export * from './BarPlot';
-export * from './BarElement';
-export * from './BarLabel';
+export * from "./BarChart.js";
+export * from "./BarPlot.js";
+export * from "./BarElement.js";
+export * from "./BarLabel/index.js";

package/BarChart/legend.js

@@ -1,4 +1,4 @@
-import { getLabel } from '../internals/getLabel';
+import { getLabel } from "../internals/getLabel.js";
 const legendGetter = params => {
   const {
     seriesOrder,

package/BarChart/plugin.js

@@ -1,6 +1,6 @@
-import { getExtremumX, getExtremumY } from './extremums';
-import formatter from './formatter';
-import getColor from './getColor';
+import { getExtremumX, getExtremumY } from "./extremums.js";
+import formatter from "./formatter.js";
+import getColor from "./getColor.js";
 export const plugin = {
   seriesType: 'bar',
   seriesFormatter: formatter,

package/BarChart/useBarChartProps.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className"];
 import useId from '@mui/utils/useId';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.

package/CHANGELOG.md

@@ -1,8 +1,105 @@
-# Change Log
+# Changelog
 
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.16.0
+
+_Sep 5, 2024_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Update the design of Data Grid column headers (#14293)
+- 🧠 Add the `slots` concept introduction documentation page (#13881)
+- 🌍 Improve Chinese (zh-CN) and Dutch (nl-NL) locales on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.16.0`
+
+- [DataGrid] Add key prop to `GridFilterInputMultipleValue` (#14302) @sai6855
+- [DataGrid] Allow to control the indeterminate checkbox behavior (#14247) @MBilalShafi
+- [DataGrid] Column header design updates (#14293) @KenanYusuf
+- [DataGrid] Fix error on simultaneous `columns` and `columnGroupingModel` update (#14368) @cherniavskii
+- [DataGrid] Fix first row flickering with `autoHeight` prop enabled (#14235) @KenanYusuf
+- [DataGrid] Remove cell min-width / max-width styles (#14448) @oliviertassinari
+- [DataGrid] Restore reselect behavior (#14410) @romgrk
+- [l10n] Improve Chinese (zh-CN) locale (#14394) @lawvs
+- [l10n] Improve Dutch (nl-NL) locale (#14398) @Janpot
+
+#### `@mui/x-data-grid-pro@7.16.0` [![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.16.0`, plus:
+
+- [DataGridPro] Fix duplicate top border in header filters (#14375) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@7.16.0` [![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.16.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.16.0`
+
+- [pickers] Improve `onError` JSDoc (#14492) @flaviendelangle
+- [pickers] Keep the calendar header and content in sync when switching locale (#14125) @flaviendelangle
+- [pickers] Move multi input range field validation tests to the describe test file (#14501) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.16.0` [![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.16.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.16.0`
+
+- [charts] Fix JSDoc typos (#14497) @alexfauquette
+- [charts] Fix `LineChart` not properly animating when hydrating (#14355) @JCQuintas
+- [charts] Fix theme augmentation (#14372) @alexfauquette
+- [charts] Pass all props to legend (#14392) @JCQuintas
+- [charts] Use `.mjs` extension for ESM build (#14387) @alexfauquette
+- [charts] Update `package.json` for vendor package (#14465) @alexfauquette
+
+#### `@mui/x-charts-pro@7.0.0-beta.0` [![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@7.16.0`, plus:
+
+- [charts-pro] Fix props and automated documentation on `BarChartPro` and `LineChartPro` (#14391) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.16.0`
+
+- [TreeView] Clean label editing code (#14264) @flaviendelangle
+
+### `@mui/x-codemod@7.16.0`
+
+- [codemod] Fix `experimentalFeatures` codemod for typescript parser (#14150) @MBilalShafi
+
+### Docs
+
+- [docs] Add RTL documentation for the pickers (#13855) @flaviendelangle
+- [docs] Add the `slots` concept introduction page (#13881) @flaviendelangle
+- [docs] Remove TypeScript v3 outdated version mentions (#14443) @k-rajat19
+- [docs] Remove notion of seats (#14351) @oliviertassinari
+- [docs] Use real world data for `PieChart` examples (#14297) @JCQuintas
+
+### Core
+
+- [core] Fix changelog spelling @oliviertassinari
+- [core] Fix failing tests on the pickers (#14457) @flaviendelangle
+- [core] Reset permissions for codspeed GitHub Action (#14420) @oliviertassinari
+- [code-infra] Add babel runtime version check (#14483) @Janpot
+- [code-infra] Fully resolve imports in ESM target (#14234) @Janpot
+- [code-infra] Update runners from node 18 to 20 (#14466) @JCQuintas
+- [infra] Added `secrets: inherit` to workflow call (#14454) @michelengelen
+- [infra] Switch "add closing message" to reusable workflow (#14499) @michelengelen
+- [infra] Switch "issue triage workflow" to reusable workflows (#14390) @michelengelen
+
 ## 7.15.0
 
 _Aug 29, 2024_

package/ChartContainer/ChartContainer.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingProvider } from '../context/DrawingProvider';
-import { SeriesProvider } from '../context/SeriesProvider';
-import { InteractionProvider } from '../context/InteractionProvider';
-import { ChartsSurface } from '../ChartsSurface';
-import { CartesianProvider } from '../context/CartesianProvider';
-import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
-import { HighlightedProvider, ZAxisContextProvider } from '../context';
-import { PluginProvider } from '../context/PluginProvider';
-import { useChartContainerProps } from './useChartContainerProps';
+import { DrawingProvider } from "../context/DrawingProvider.js";
+import { SeriesProvider } from "../context/SeriesProvider/index.js";
+import { InteractionProvider } from "../context/InteractionProvider.js";
+import { ChartsSurface } from "../ChartsSurface/index.js";
+import { CartesianProvider } from "../context/CartesianProvider/index.js";
+import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
+import { HighlightedProvider, ZAxisContextProvider } from "../context/index.js";
+import { PluginProvider } from "../context/PluginProvider/index.js";
+import { useChartContainerProps } from "./useChartContainerProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {

package/ChartContainer/index.js

@@ -1 +1 @@
-export * from './ChartContainer';
+export * from "./ChartContainer.js";

package/ChartContainer/useChartContainerProps.js

@@ -3,8 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children"];
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
-import { useDefaultizeAxis } from './useDefaultizeAxis';
-import { useReducedMotion } from '../hooks/useReducedMotion';
+import { useDefaultizeAxis } from "./useDefaultizeAxis.js";
+import { useReducedMotion } from "../hooks/useReducedMotion.js";
 export const useChartContainerProps = (props, ref) => {
   const {
       width,

package/ChartContainer/useDefaultizeAxis.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 const defaultizeAxis = (inAxis, dataset, axisName) => {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
   return [...(inAxis?.map((axis, index) => _extends({

package/ChartsAxis/ChartsAxis.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { ChartsXAxis } from '../ChartsXAxis';
-import { ChartsYAxis } from '../ChartsYAxis';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { ChartsXAxis } from "../ChartsXAxis/index.js";
+import { ChartsYAxis } from "../ChartsYAxis/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getAxisId = (propsValue, defaultAxisId) => {
   if (propsValue == null) {

package/ChartsAxis/index.js

@@ -1,2 +1,2 @@
-export * from './ChartsAxis';
-export * from './axisClasses';
+export * from "./ChartsAxis.js";
+export * from "./axisClasses.js";

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -5,10 +5,10 @@ import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { styled } from '@mui/material/styles';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import { isBandScale } from '../internals/isBandScale';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { isBandScale } from "../internals/isBandScale.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function getAxisHighlightUtilityClass(slot) {
   return generateUtilityClass('MuiChartsAxisHighlight', slot);

package/ChartsAxisHighlight/index.js

@@ -1 +1 @@
-export * from './ChartsAxisHighlight';
+export * from "./ChartsAxisHighlight.js";

package/ChartsClipPath/ChartsClipPath.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * API:

package/ChartsClipPath/index.js

@@ -1 +1 @@
-export * from './ChartsClipPath';
+export * from "./ChartsClipPath.js";

package/ChartsGrid/ChartsGrid.js

@@ -4,32 +4,14 @@ const _excluded = ["vertical", "horizontal"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, useThemeProps } from '@mui/material/styles';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { useTicks } from '../hooks/useTicks';
-import { getChartsGridUtilityClass, chartsGridClasses } from './chartsGridClasses';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useThemeProps } from '@mui/material/styles';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { getChartsGridUtilityClass } from "./chartsGridClasses.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { GridRoot } from "./styledCommonents.js";
+import { ChartsGridVertical } from "./ChartsVerticalGrid.js";
+import { ChartsGridHorizontal } from "./ChartsHorizontalGrid.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridRoot = styled('g', {
-  name: 'MuiChartsGrid',
-  slot: 'Root',
-  overridesResolver: (props, styles) => [{
-    [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine
-  }, {
-    [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine
-  }, styles.root]
-})({});
-const GridLine = styled('line', {
-  name: 'MuiChartsGrid',
-  slot: 'Line',
-  overridesResolver: (props, styles) => styles.line
-})(({
-  theme
-}) => ({
-  stroke: (theme.vars || theme).palette.divider,
-  shapeRendering: 'crispEdges',
-  strokeWidth: 1
-}));
 const useUtilityClasses = ({
   classes
 }) => {
@@ -67,49 +49,19 @@ function ChartsGrid(inProps) {
     yAxisIds
   } = useCartesianContext();
   const classes = useUtilityClasses(props);
-  const horizontalAxisId = yAxisIds[0];
-  const verticalAxisId = xAxisIds[0];
-  const {
-    scale: xScale,
-    tickNumber: xTickNumber,
-    tickInterval: xTickInterval
-  } = xAxis[verticalAxisId];
-  const {
-    scale: yScale,
-    tickNumber: yTickNumber,
-    tickInterval: yTickInterval
-  } = yAxis[horizontalAxisId];
-  const xTicks = useTicks({
-    scale: xScale,
-    tickNumber: xTickNumber,
-    tickInterval: xTickInterval
-  });
-  const yTicks = useTicks({
-    scale: yScale,
-    tickNumber: yTickNumber,
-    tickInterval: yTickInterval
-  });
+  const horizontalAxis = yAxis[yAxisIds[0]];
+  const verticalAxis = xAxis[xAxisIds[0]];
   return /*#__PURE__*/_jsxs(GridRoot, _extends({}, other, {
     className: classes.root,
-    children: [vertical && xTicks.map(({
-      formattedValue,
-      offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
-      y1: drawingArea.top,
-      y2: drawingArea.top + drawingArea.height,
-      x1: offset,
-      x2: offset,
-      className: classes.verticalLine
-    }, `vertical-${formattedValue}`)), horizontal && yTicks.map(({
-      formattedValue,
-      offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
-      y1: offset,
-      y2: offset,
-      x1: drawingArea.left,
-      x2: drawingArea.left + drawingArea.width,
-      className: classes.horizontalLine
-    }, `horizontal-${formattedValue}`))]
+    children: [vertical && /*#__PURE__*/_jsx(ChartsGridVertical, {
+      axis: verticalAxis,
+      drawingArea: drawingArea,
+      classes: classes
+    }), horizontal && /*#__PURE__*/_jsx(ChartsGridHorizontal, {
+      axis: horizontalAxis,
+      drawingArea: drawingArea,
+      classes: classes
+    })]
   }));
 }
 process.env.NODE_ENV !== "production" ? ChartsGrid.propTypes = {

package/ChartsGrid/ChartsHorizontalGrid.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { DrawingArea } from '../context/DrawingProvider';
+import { AxisDefaultized, ChartsYAxisProps, ScaleName } from '../models/axis';
+import { ChartsGridClasses } from './chartsGridClasses';
+interface ChartsGridHorizontalProps {
+    axis: AxisDefaultized<ScaleName, any, ChartsYAxisProps>;
+    drawingArea: DrawingArea;
+    classes: Partial<ChartsGridClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function ChartsGridHorizontal(props: ChartsGridHorizontalProps): React.JSX.Element;
+export {};

package/ChartsGrid/ChartsHorizontalGrid.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useTicks } from "../hooks/useTicks.js";
+import { GridLine } from "./styledCommonents.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export function ChartsGridHorizontal(props) {
+  const {
+    axis,
+    drawingArea,
+    classes
+  } = props;
+  const {
+    scale,
+    tickNumber,
+    tickInterval
+  } = axis;
+  const yTicks = useTicks({
+    scale,
+    tickNumber,
+    tickInterval
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: yTicks.map(({
+      formattedValue,
+      offset
+    }) => /*#__PURE__*/_jsx(GridLine, {
+      y1: offset,
+      y2: offset,
+      x1: drawingArea.left,
+      x2: drawingArea.left + drawingArea.width,
+      className: classes.horizontalLine
+    }, `horizontal-${formattedValue}`))
+  });
+}

package/ChartsGrid/ChartsVerticalGrid.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { DrawingArea } from '../context/DrawingProvider';
+import { AxisDefaultized, ChartsXAxisProps, ScaleName } from '../models/axis';
+import { ChartsGridClasses } from './chartsGridClasses';
+interface ChartsGridVerticalProps {
+    axis: AxisDefaultized<ScaleName, any, ChartsXAxisProps>;
+    drawingArea: DrawingArea;
+    classes: Partial<ChartsGridClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function ChartsGridVertical(props: ChartsGridVerticalProps): React.JSX.Element;
+export {};

package/ChartsGrid/ChartsVerticalGrid.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useTicks } from "../hooks/useTicks.js";
+import { GridLine } from "./styledCommonents.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export function ChartsGridVertical(props) {
+  const {
+    axis,
+    drawingArea,
+    classes
+  } = props;
+  const {
+    scale,
+    tickNumber,
+    tickInterval
+  } = axis;
+  const xTicks = useTicks({
+    scale,
+    tickNumber,
+    tickInterval
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: xTicks.map(({
+      formattedValue,
+      offset
+    }) => /*#__PURE__*/_jsx(GridLine, {
+      y1: drawingArea.top,
+      y2: drawingArea.top + drawingArea.height,
+      x1: offset,
+      x2: offset,
+      className: classes.verticalLine
+    }, `vertical-${formattedValue}`))
+  });
+}

package/ChartsGrid/index.js

@@ -1,2 +1,2 @@
-export * from './ChartsGrid';
-export * from './chartsGridClasses';
+export * from "./ChartsGrid.js";
+export * from "./chartsGridClasses.js";