@mui/x-charts/ChartsSvgLayer/ChartsSvgLayer.mjs

The community edition of MUI X Charts components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["children", "className"];
import { styled, useThemeProps } from '@mui/material/styles';
import PropTypes from 'prop-types';
import * as React from 'react';
import clsx from 'clsx';
import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.mjs";
import { useChartsContext } from "../context/ChartsProvider/index.mjs";
import { selectorChartSvgWidth, selectorChartSvgHeight } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.mjs";
import { useUtilityClasses } from "./chartsSvgLayerClasses.mjs";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const ChartsSvgLayerStyles = styled('svg', {
  name: 'MuiChartsSvgLayer',
  slot: 'Root'
})({
  width: '100%',
  height: '100%',
  position: 'absolute',
  inset: 0
});

/**
 * A layer that provides the drawing area SVG the chart elements.
 * Must be wrapped in a `<ChartsLayerContainer>`.
 *
 * Demos:
 *
 * - [Composition](https://mui.com/x/api/charts/composition/)
 *
 * API:
 *
 * - [ChartsSvgLayer API](https://mui.com/x/api/charts/charts-svg-layer/)
 */
const ChartsSvgLayer = /*#__PURE__*/React.forwardRef(function ChartsSvgLayer(inProps, ref) {
  const {
    store
  } = useChartsContext();
  const svgWidth = store.use(selectorChartSvgWidth);
  const svgHeight = store.use(selectorChartSvgHeight);
  const themeProps = useThemeProps({
    props: inProps,
    name: 'MuiChartsSvgLayer'
  });
  const {
      children,
      className
    } = themeProps,
    other = _objectWithoutPropertiesLoose(themeProps, _excluded);
  const classes = useUtilityClasses();
  const hasIntrinsicSize = svgHeight > 0 && svgWidth > 0;
  return /*#__PURE__*/_jsxs(ChartsSvgLayerStyles, _extends({
    viewBox: `0 0 ${svgWidth} ${svgHeight}`,
    className: clsx(classes.root, className)
  }, other, {
    ref: ref,
    "aria-hidden": true,
    children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), hasIntrinsicSize && children]
  }));
});
if (process.env.NODE_ENV !== "production") ChartsSvgLayer.displayName = "ChartsSvgLayer";
process.env.NODE_ENV !== "production" ? ChartsSvgLayer.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
  // ----------------------------------------------------------------------
  children: PropTypes.node,
  className: PropTypes.string,
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
export { ChartsSvgLayer };