@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.10

package/node/internals/plugins/models/seriesConfig/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _colorProcessor = require("./colorProcessor.types");
+Object.keys(_colorProcessor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _colorProcessor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _colorProcessor[key];
+    }
+  });
+});
+var _extremumGetter = require("./extremumGetter.types");
+Object.keys(_extremumGetter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _extremumGetter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _extremumGetter[key];
+    }
+  });
+});
+var _seriesConfig = require("./seriesConfig.types");
+Object.keys(_seriesConfig).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _seriesConfig[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _seriesConfig[key];
+    }
+  });
+});
+var _seriesProcessor = require("./seriesProcessor.types");
+Object.keys(_seriesProcessor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _seriesProcessor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _seriesProcessor[key];
+    }
+  });
+});
+var _tooltipGetter = require("./tooltipGetter.types");
+Object.keys(_tooltipGetter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tooltipGetter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tooltipGetter[key];
+    }
+  });
+});
+var _legendGetter = require("./legendGetter.types");
+Object.keys(_legendGetter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _legendGetter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _legendGetter[key];
+    }
+  });
+});

package/node/internals/plugins/models/seriesConfig/legendGetter.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/plugins/models/seriesConfig/seriesConfig.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/plugins/models/seriesConfig/seriesProcessor.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/plugins/models/seriesConfig/tooltipGetter.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/plugins/utils/ChartStore.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartStore = void 0;
+class ChartStore {
+  constructor(value) {
+    this.value = void 0;
+    this.listeners = void 0;
+    this.subscribe = fn => {
+      this.listeners.add(fn);
+      return () => {
+        this.listeners.delete(fn);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.value;
+    };
+    this.update = updater => {
+      const newState = updater(this.value);
+      if (newState !== this.value) {
+        this.value = newState;
+        this.listeners.forEach(l => l(newState));
+      }
+    };
+    this.value = value;
+    this.listeners = new Set();
+  }
+}
+exports.ChartStore = ChartStore;

package/node/internals/plugins/utils/selectors.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSelector = void 0;
+var _reselect = require("reselect");
+const reselectCreateSelector = (0, _reselect.createSelectorCreator)({
+  memoize: _reselect.lruMemoize,
+  memoizeOptions: {
+    maxSize: 1,
+    equalityCheck: Object.is
+  }
+});
+const cache = new WeakMap();
+/**
+ * Method wrapping reselect's createSelector to provide caching for chart instances.
+ *
+ */
+const createSelector = (...createSelectorArgs) => {
+  const selector = (state, selectorArgs) => {
+    const cacheKey = state.cacheKey;
+
+    // If there is no cache for the current chart instance, create one.
+    let cacheForCurrentChartInstance = cache.get(cacheKey);
+    if (!cacheForCurrentChartInstance) {
+      cacheForCurrentChartInstance = new Map();
+      cache.set(cacheKey, cacheForCurrentChartInstance);
+    }
+
+    // If there is a cached selector, execute it.
+    const cachedSelector = cacheForCurrentChartInstance.get(createSelectorArgs);
+    if (cachedSelector) {
+      return cachedSelector(state, selectorArgs);
+    }
+
+    // Otherwise, create a new selector and cache it and execute it.
+    const fn = reselectCreateSelector(...createSelectorArgs);
+    cacheForCurrentChartInstance.set(createSelectorArgs, fn);
+    return fn(state, selectorArgs);
+  };
+  return selector;
+};
+exports.createSelector = createSelector;

package/node/internals/store/extractPluginParamsFromProps.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractPluginParamsFromProps = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+const _excluded = ["apiRef"];
+const extractPluginParamsFromProps = _ref => {
+  let {
+      plugins
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref.props, _excluded);
+  const paramsLookup = {};
+  plugins.forEach(plugin => {
+    Object.assign(paramsLookup, plugin.params);
+  });
+  const pluginParams = {};
+  Object.keys(props).forEach(propName => {
+    const prop = props[propName];
+    if (paramsLookup[propName]) {
+      pluginParams[propName] = prop;
+    }
+  });
+  const defaultizedPluginParams = plugins.reduce((acc, plugin) => {
+    if (plugin.getDefaultizedParams) {
+      return plugin.getDefaultizedParams({
+        params: acc
+      });
+    }
+    return acc;
+  }, pluginParams);
+  return defaultizedPluginParams;
+};
+exports.extractPluginParamsFromProps = extractPluginParamsFromProps;

package/node/internals/store/useChartModels.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartModels = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+/**
+ * Implements the same behavior as `useControlled` but for several models.
+ * The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
+ */
+const useChartModels = (plugins, props) => {
+  const modelsRef = React.useRef({});
+  const [modelsState, setModelsState] = React.useState(() => {
+    const initialState = {};
+    plugins.forEach(plugin => {
+      if (plugin.models) {
+        Object.entries(plugin.models).forEach(([modelName, modelInitializer]) => {
+          modelsRef.current[modelName] = {
+            isControlled: props[modelName] !== undefined,
+            getDefaultValue: modelInitializer.getDefaultValue
+          };
+          initialState[modelName] = modelInitializer.getDefaultValue(props);
+        });
+      }
+    });
+    return initialState;
+  });
+  const models = Object.fromEntries(Object.entries(modelsRef.current).map(([modelName, model]) => {
+    const value = props[modelName] ?? modelsState[modelName];
+    return [modelName, {
+      value,
+      setControlledValue: newValue => {
+        if (!model.isControlled) {
+          setModelsState(prevState => (0, _extends2.default)({}, prevState, {
+            [modelName]: typeof newValue === 'function' ? newValue(value) : newValue
+          }));
+        }
+      },
+      isControlled: modelsRef.current[modelName].isControlled
+    }];
+  }));
+
+  // We know that `modelsRef` do not vary across renders.
+  if (process.env.NODE_ENV !== 'production') {
+    Object.entries(modelsRef.current).forEach(([modelName, model]) => {
+      const controlled = props[modelName];
+      const newDefaultValue = model.getDefaultValue(props);
+
+      /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps, react-compiler/react-compiler */
+      React.useEffect(() => {
+        if (model.isControlled !== (controlled !== undefined)) {
+          console.error([`MUI X: A component is changing the ${model.isControlled ? '' : 'un'}controlled ${modelName} state of Chart to be ${model.isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${modelName} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+        }
+      }, [controlled]);
+      const {
+        current: defaultValue
+      } = React.useRef(newDefaultValue);
+      React.useEffect(() => {
+        if (!model.isControlled && defaultValue !== newDefaultValue) {
+          console.error([`MUI X: A component is changing the default ${modelName} state of an uncontrolled Chart after being initialized. ` + `To suppress this warning opt to use a controlled Chart.`].join('\n'));
+        }
+      }, [JSON.stringify(newDefaultValue)]);
+    });
+  }
+  /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+
+  return models;
+};
+exports.useChartModels = useChartModels;

package/node/internals/store/useCharts.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartApiInitialization = useChartApiInitialization;
+exports.useCharts = useCharts;
+var React = _interopRequireWildcard(require("react"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _ChartStore = require("../plugins/utils/ChartStore");
+var _corePlugins = require("../plugins/corePlugins");
+var _extractPluginParamsFromProps = require("./extractPluginParamsFromProps");
+var _useChartModels = require("./useChartModels");
+function useChartApiInitialization(inputApiRef) {
+  const fallbackPublicApiRef = React.useRef({});
+  if (inputApiRef) {
+    if (inputApiRef.current == null) {
+      // eslint-disable-next-line react-compiler/react-compiler
+      inputApiRef.current = {};
+    }
+    return inputApiRef.current;
+  }
+  return fallbackPublicApiRef.current;
+}
+let globalId = 0;
+function useCharts(inPlugins, props, seriesConfig) {
+  const chartId = (0, _useId.default)();
+  const plugins = React.useMemo(() => [..._corePlugins.CHART_CORE_PLUGINS, ...inPlugins], [inPlugins]);
+  const pluginParams = (0, _extractPluginParamsFromProps.extractPluginParamsFromProps)({
+    plugins,
+    props
+  });
+  pluginParams.id = pluginParams.id ?? chartId;
+  const models = (0, _useChartModels.useChartModels)(plugins, pluginParams);
+  const instanceRef = React.useRef({});
+  const instance = instanceRef.current;
+  const publicAPI = useChartApiInitialization(props.apiRef);
+  const innerSvgRef = React.useRef(null);
+  const storeRef = React.useRef(null);
+  if (storeRef.current == null) {
+    // eslint-disable-next-line react-compiler/react-compiler
+    globalId += 1;
+    const initialState = {
+      // TODO remove when the interaction moves to plugin
+      interaction: {
+        item: null,
+        axis: {
+          x: null,
+          y: null
+        }
+      },
+      cacheKey: {
+        id: globalId
+      }
+    };
+    plugins.forEach(plugin => {
+      if (plugin.getInitialState) {
+        Object.assign(initialState, plugin.getInitialState(pluginParams, initialState, seriesConfig));
+      }
+    });
+    storeRef.current = new _ChartStore.ChartStore(initialState);
+  }
+  const runPlugin = plugin => {
+    const pluginResponse = plugin({
+      instance,
+      params: pluginParams,
+      plugins: plugins,
+      store: storeRef.current,
+      svgRef: innerSvgRef,
+      seriesConfig,
+      models
+    });
+    if (pluginResponse.publicAPI) {
+      Object.assign(publicAPI, pluginResponse.publicAPI);
+    }
+    if (pluginResponse.instance) {
+      Object.assign(instance, pluginResponse.instance);
+    }
+  };
+  plugins.forEach(runPlugin);
+  const contextValue = React.useMemo(() => ({
+    store: storeRef.current,
+    publicAPI,
+    instance,
+    svgRef: innerSvgRef
+  }), [instance, publicAPI]);
+  return {
+    contextValue
+  };
+}

package/node/internals/store/useCharts.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/store/useSelector.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelector = void 0;
+var _withSelector = require("use-sync-external-store/with-selector");
+const defaultCompare = Object.is;
+const useSelector = (store, selector, args = undefined, equals = defaultCompare) => {
+  const selectorWithArgs = state => selector(state, args);
+  return (0, _withSelector.useSyncExternalStoreWithSelector)(store.subscribe, store.getSnapshot, store.getSnapshot, selectorWithArgs, equals);
+};
+exports.useSelector = useSelector;

package/node/internals/store/useStore.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStore = useStore;
+var _ChartProvider = require("../../context/ChartProvider");
+// This hook should be removed because user and us should not interact with the store directly, but with public/private APIs
+function useStore() {
+  const context = (0, _ChartProvider.useChartContext)();
+  if (!context) {
+    throw new Error(['MUI X: Could not find the charts context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  return context.store;
+}

package/node/models/curve.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/models/position.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.10",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -29,22 +29,25 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.0",
+    "@babel/runtime": "^7.26.7",
     "@mui/utils": "^5.16.6 || ^6.0.0",
     "@react-spring/rafz": "^9.7.5",
     "@react-spring/web": "^9.7.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts-vendor": "8.0.0-alpha.0",
-    "@mui/x-internals": "8.0.0-alpha.0"
+    "react-is": "^18.3.1 || ^19.0.0",
+    "reselect": "^5.1.1",
+    "use-sync-external-store": "^1.4.0",
+    "@mui/x-charts-vendor": "8.0.0-alpha.10",
+    "@mui/x-internals": "8.0.0-alpha.10"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.15.14 || ^6.0.0",
     "@mui/system": "^5.15.14 || ^6.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@emotion/react": {

package/themeAugmentation/props.d.ts

@@ -8,14 +8,13 @@ import { LineChartProps } from '../LineChart/LineChart';
 import { ScatterChartProps } from '../ScatterChart/ScatterChart';
 import { PieChartProps } from '../PieChart/PieChart';
 import { ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
-import { ChartSeriesType } from '../models/seriesType/config';
 
 export interface ChartsComponentsPropsList {
   MuiChartsXAxis: ChartsXAxisProps;
   MuiChartsYAxis: ChartsYAxisProps;
   MuiChartsGrid: ChartsGridProps;
   MuiChartsLegend: ChartsLegendProps;
-  MuiChartsTooltip: ChartsTooltipProps<ChartSeriesType>;
+  MuiChartsTooltip: ChartsTooltipProps;
   MuiChartsSurface: ChartsSurfaceProps;
 
   // BarChart components

package/ChartContainer/ResizableContainer.d.ts

@@ -1,9 +0,0 @@
-import type { ChartContainerProps } from './ChartContainer';
-/**
- * Wrapping div that take the shape of its parent.
- *
- * @ignore - do not document.
- */
-export declare const ResizableContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    ownerState: Pick<ChartContainerProps, "width" | "height">;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;

package/ChartContainer/ResizableContainer.js

@@ -1,26 +0,0 @@
-import { styled } from '@mui/material/styles';
-/**
- * Wrapping div that take the shape of its parent.
- *
- * @ignore - do not document.
- */
-export const ResizableContainer = styled('div', {
-  name: 'MuiResponsiveChart',
-  slot: 'Container'
-})(({
-  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%'
-  }
-}));

package/ChartContainer/useChartContainerDimensions.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export declare const useChartContainerDimensions: (inWidth?: number, inHeight?: number, resolveSizeBeforeRender?: boolean) => {
-    containerRef: React.RefObject<HTMLDivElement>;
-    width: number;
-    height: number;
-};

package/ChartContainer/useChartContainerDimensions.js

@@ -1,98 +0,0 @@
-'use client';
-
-/* eslint-disable react-compiler/react-compiler */
-import * as React from 'react';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import ownerWindow from '@mui/utils/ownerWindow';
-export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender) => {
-  const hasInSize = inWidth !== undefined && inHeight !== undefined;
-  const stateRef = React.useRef({
-    displayError: false,
-    initialCompute: true,
-    computeRun: 0
-  });
-  const rootRef = React.useRef(null);
-  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);
-    return {
-      width: newWidth,
-      height: newHeight
-    };
-  }, []);
-  React.useEffect(() => {
-    // Ensure the error detection occurs after the first rendering.
-    stateRef.current.displayError = true;
-  }, []);
-
-  // This effect is used to compute the size of the container on the initial render.
-  // It is not bound to the raf loop to avoid an unwanted "resize" event.
-  // https://github.com/mui/mui-x/issues/13477#issuecomment-2336634785
-  useEnhancedEffect(() => {
-    // computeRun is used to avoid infinite loops.
-    if (hasInSize || !resolveSizeBeforeRender || !stateRef.current.initialCompute || stateRef.current.computeRun > 20) {
-      return;
-    }
-    const computedSize = computeSize();
-    if (computedSize.width !== width || computedSize.height !== height) {
-      stateRef.current.computeRun += 1;
-    } else if (stateRef.current.initialCompute) {
-      stateRef.current.initialCompute = false;
-    }
-  }, [width, height, computeSize, resolveSizeBeforeRender, hasInSize]);
-  useEnhancedEffect(() => {
-    if (hasInSize) {
-      return () => {};
-    }
-    computeSize();
-    const elementToObserve = rootRef.current;
-    if (typeof ResizeObserver === 'undefined') {
-      return () => {};
-    }
-    let animationFrame;
-    const observer = new ResizeObserver(() => {
-      // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = requestAnimationFrame(() => {
-        computeSize();
-      });
-    });
-    if (elementToObserve) {
-      observer.observe(elementToObserve);
-    }
-    return () => {
-      if (animationFrame) {
-        cancelAnimationFrame(animationFrame);
-      }
-      if (elementToObserve) {
-        observer.unobserve(elementToObserve);
-      }
-    };
-  }, [computeSize, hasInSize]);
-  if (process.env.NODE_ENV !== 'production') {
-    if (stateRef.current.displayError && inWidth === undefined && width === 0) {
-      console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
-      stateRef.current.displayError = false;
-    }
-    if (stateRef.current.displayError && inHeight === undefined && height === 0) {
-      console.error(`MUI X: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
-      stateRef.current.displayError = false;
-    }
-  }
-  return {
-    containerRef: rootRef,
-    width: inWidth ?? width,
-    height: inHeight ?? height
-  };
-};

package/ChartsLegend/ChartsLegendItem.d.ts

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { ChartsTextStyle } from '../ChartsText';
-import { LegendItemParams } from './chartsLegend.types';
-import { ChartsLegendClasses } from './chartsLegendClasses';
-export interface ChartsLegendItemProps extends LegendItemParams {
-    positionY: number;
-    label: string;
-    positionX: number;
-    innerHeight: number;
-    innerWidth: number;
-    color: string;
-    gapX: number;
-    gapY: number;
-    legendWidth: number;
-    itemMarkHeight: number;
-    itemMarkWidth: number;
-    markGap: number;
-    labelStyle: ChartsTextStyle;
-    classes?: Omit<Partial<ChartsLegendClasses>, 'column' | 'row' | 'label'>;
-    onClick?: (event: React.MouseEvent<SVGRectElement, MouseEvent>) => void;
-}
-/**
- * @ignore - internal component.
- */
-declare function ChartsLegendItem(props: ChartsLegendItemProps): React.JSX.Element;
-export { ChartsLegendItem };