diff --git a/packages/x-charts-pro/src/ResponsiveChartContainer/index.ts b/packages/x-charts-pro/src/ResponsiveChartContainer/index.ts deleted file mode 100644 index 0d6ff4b41a20f..0000000000000 --- a/packages/x-charts-pro/src/ResponsiveChartContainer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ResponsiveChartContainer'; diff --git a/packages/x-charts-pro/src/ResponsiveChartContainer/useChartContainerDimensions.ts b/packages/x-charts-pro/src/ResponsiveChartContainer/useChartContainerDimensions.ts deleted file mode 100644 index 4e82a43889af0..0000000000000 --- a/packages/x-charts-pro/src/ResponsiveChartContainer/useChartContainerDimensions.ts +++ /dev/null @@ -1,88 +0,0 @@ -import * as React from 'react'; -import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; -import ownerWindow from '@mui/utils/ownerWindow'; - -export const useChartContainerDimensions = ( - inWidth?: number, - inHeight?: number, -): [React.RefObject, number, number] => { - const rootRef = React.useRef(null); - const displayError = React.useRef(false); - - const [width, setWidth] = React.useState(0); - const [height, setHeight] = React.useState(0); - - // Adaptation of the `computeSizeAndPublishResizeEvent` from the grid. - const computeSize = React.useCallback(() => { - const mainEl = rootRef?.current; - - if (!mainEl) { - return; - } - - const win = ownerWindow(mainEl); - const computedStyle = win.getComputedStyle(mainEl); - - const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0; - const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0; - - setWidth(newWidth); - setHeight(newHeight); - }, []); - - React.useEffect(() => { - // Ensure the error detection occurs after the first rendering. - displayError.current = true; - }, []); - - useEnhancedEffect(() => { - if (inWidth !== undefined && inHeight !== undefined) { - return () => {}; - } - computeSize(); - - const elementToObserve = rootRef.current; - if (typeof ResizeObserver === 'undefined') { - return () => {}; - } - - let animationFrame: number; - const observer = new ResizeObserver(() => { - // See https://github.com/mui/mui-x/issues/8733 - animationFrame = requestAnimationFrame(() => { - computeSize(); - }); - }); - - if (elementToObserve) { - observer.observe(elementToObserve); - } - - return () => { - if (animationFrame) { - window.cancelAnimationFrame(animationFrame); - } - - if (elementToObserve) { - observer.unobserve(elementToObserve); - } - }; - }, [computeSize, inHeight, inWidth]); - - if (process.env.NODE_ENV !== 'production') { - if (displayError.current && inWidth === undefined && width === 0) { - console.error( - `MUI X Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`, - ); - displayError.current = false; - } - if (displayError.current && inHeight === undefined && height === 0) { - console.error( - `MUI X Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`, - ); - displayError.current = false; - } - } - - return [rootRef, inWidth ?? width, inHeight ?? height]; -}; diff --git a/packages/x-charts-pro/src/ResponsiveChartContainer/ResposiveChartContainer.test.tsx b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.test.tsx similarity index 70% rename from packages/x-charts-pro/src/ResponsiveChartContainer/ResposiveChartContainer.test.tsx rename to packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.test.tsx index c728486122233..e8fcf52be087e 100644 --- a/packages/x-charts-pro/src/ResponsiveChartContainer/ResposiveChartContainer.test.tsx +++ b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.test.tsx @@ -2,16 +2,16 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer, screen, waitFor } from '@mui/internal-test-utils'; import { LicenseInfo } from '@mui/x-license'; -import { ResponsiveChartContainer } from './ResponsiveChartContainer'; +import { ResponsiveChartContainerPro } from './ResponsiveChartContainerPro'; -describe(' - License', () => { +describe(' - License', () => { const { render } = createRenderer(); it('should render watermark when the license is missing', async () => { LicenseInfo.setLicenseKey(''); expect(() => - render(), + render(), ).toErrorDev(['MUI X: Missing license key.']); await waitFor(() => { diff --git a/packages/x-charts-pro/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx similarity index 88% rename from packages/x-charts-pro/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx rename to packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx index 5789814225c03..c508e72095141 100644 --- a/packages/x-charts-pro/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx +++ b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx @@ -1,46 +1,17 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { styled } from '@mui/material/styles'; import { useLicenseVerifier, Watermark } from '@mui/x-license'; -import { ChartContainer, ChartContainerProps } from '@mui/x-charts/ChartContainer'; -import { useChartContainerDimensions } from './useChartContainerDimensions'; +import { ChartContainer } from '@mui/x-charts/ChartContainer'; +import { ResponsiveChartContainerProps } from '@mui/x-charts/ResponsiveChartContainer'; +import { ResizableContainer, useChartContainerDimensions } from '@mui/x-charts/internals'; import { getReleaseInfo } from '../internals/utils/releaseInfo'; -export interface ResponsiveChartContainerProps - extends Omit { - /** - * The width of the chart in px. If not defined, it takes the width of the parent element. - */ - width?: number; - /** - * The height of the chart in px. If not defined, it takes the height of the parent element. - */ - height?: number; -} - -const ResizableContainer = styled('div', { - name: 'MuiResponsiveChart', - slot: 'Container', -})<{ ownerState: Pick }>(({ ownerState }) => ({ - width: ownerState.width ?? '100%', - height: ownerState.height ?? '100%', - display: 'flex', - position: 'relative', - flexGrow: 1, - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - overflow: 'hidden', - '&>svg': { - width: '100%', - height: '100%', - }, -})); +export interface ResponsiveChartContainerProProps extends ResponsiveChartContainerProps {} const releaseInfo = getReleaseInfo(); -const ResponsiveChartContainer = React.forwardRef(function ResponsiveChartContainer( - props: ResponsiveChartContainerProps, +const ResponsiveChartContainerPro = React.forwardRef(function ResponsiveChartContainerPro( + props: ResponsiveChartContainerProProps, ref, ) { const { width: inWidth, height: inHeight, ...other } = props; @@ -58,7 +29,7 @@ const ResponsiveChartContainer = React.forwardRef(function ResponsiveChartContai ); }); -ResponsiveChartContainer.propTypes = { +ResponsiveChartContainerPro.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "pnpm proptypes" | @@ -281,4 +252,4 @@ ResponsiveChartContainer.propTypes = { ), } as any; -export { ResponsiveChartContainer }; +export { ResponsiveChartContainerPro }; diff --git a/packages/x-charts-pro/src/ResponsiveChartContainerPro/index.ts b/packages/x-charts-pro/src/ResponsiveChartContainerPro/index.ts new file mode 100644 index 0000000000000..4f60ae3dd54b0 --- /dev/null +++ b/packages/x-charts-pro/src/ResponsiveChartContainerPro/index.ts @@ -0,0 +1 @@ +export * from './ResponsiveChartContainerPro'; diff --git a/packages/x-charts-pro/src/index.ts b/packages/x-charts-pro/src/index.ts index a5579c0307c6f..6aa3762c874ed 100644 --- a/packages/x-charts-pro/src/index.ts +++ b/packages/x-charts-pro/src/index.ts @@ -22,6 +22,5 @@ export * from '@mui/x-charts/ScatterChart'; export * from '@mui/x-charts/SparkLineChart'; export * from '@mui/x-charts/Gauge'; export * from '@mui/x-charts/ChartsSurface'; -export * from '@mui/x-charts/ChartContainer'; -export * from './ResponsiveChartContainer'; +export * from './ResponsiveChartContainerPro'; diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx new file mode 100644 index 0000000000000..2ea1f0f81c9a5 --- /dev/null +++ b/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx @@ -0,0 +1,26 @@ +import { styled } from '@mui/material/styles'; +import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer'; + +/** + * Wrapping div that take the shape of its parent. + * + * @ignore - do not document. + */ +export const ResizableContainer = styled('div', { + name: 'MuiResponsiveChart', + slot: 'Container', +})<{ ownerState: Pick }>(({ ownerState }) => ({ + width: ownerState.width ?? '100%', + height: ownerState.height ?? '100%', + display: 'flex', + position: 'relative', + flexGrow: 1, + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + overflow: 'hidden', + '&>svg': { + width: '100%', + height: '100%', + }, +})); diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx index d58ef1b33fadc..52616f191ce22 100644 --- a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx +++ b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { styled } from '@mui/material/styles'; import { ChartContainer, ChartContainerProps } from '../ChartContainer'; import { useChartContainerDimensions } from './useChartContainerDimensions'; +import { ResizableContainer } from './ResizableContainer'; export interface ResponsiveChartContainerProps extends Omit { @@ -16,25 +16,6 @@ export interface ResponsiveChartContainerProps height?: number; } -const ResizableContainer = styled('div', { - name: 'MuiResponsiveChart', - slot: 'Container', -})<{ ownerState: Pick }>(({ ownerState }) => ({ - width: ownerState.width ?? '100%', - height: ownerState.height ?? '100%', - display: 'flex', - position: 'relative', - flexGrow: 1, - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - overflow: 'hidden', - '&>svg': { - width: '100%', - height: '100%', - }, -})); - const ResponsiveChartContainer = React.forwardRef(function ResponsiveChartContainer( props: ResponsiveChartContainerProps, ref, diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts index b146ce17ee537..c7f28ec8588c2 100644 --- a/packages/x-charts/src/internals/index.ts +++ b/packages/x-charts/src/internals/index.ts @@ -1 +1,4 @@ export * from './configInit'; + +export * from '../ResponsiveChartContainer/useChartContainerDimensions'; +export * from '../ResponsiveChartContainer/ResizableContainer';