@gravity-ui/charts 1.38.6 → 1.38.7

package/dist/cjs/hooks/useAxis/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { ChartXAxis, ChartYAxis, LegendConfig } from '../../types';
 import type { PreparedChart } from '../useChartOptions/types';
 import type { PreparedLegend, PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
@@ -15,9 +14,45 @@ interface UseAxesProps {
     xAxis?: ChartXAxis;
     yAxis?: ChartYAxis[];
 }
-export declare function useAxis(props: UseAxesProps): {
-    setAxes: React.Dispatch<React.SetStateAction<AxesState>>;
+export declare function getAxes(props: UseAxesProps): Promise<{
     xAxis: import("./types").PreparedXAxis | null;
-    yAxis: import("./types").PreparedYAxis[];
-};
+    yAxis: (Omit<import("../../types").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
+        type: import("../../types").ChartAxisType;
+        labels: Omit<import("../../types").ChartAxisLabels, "enabled" | "style" | "padding" | "autoRotation"> & Required<Pick<import("../../types").ChartAxisLabels, "margin" | "html" | "enabled" | "rotation" | "padding">> & {
+            style: import("../../types").BaseTextStyle;
+            rotation: number;
+            height: number;
+            width: number;
+            lineHeight: number;
+            maxWidth: number;
+        };
+        title: {
+            height: number;
+            width: number;
+            text: string;
+            margin: number;
+            style: import("../../types").BaseTextStyle;
+            align: import("../../types").ChartAxisTitleAlignment;
+            maxRowCount: number;
+            rotation: number;
+            maxWidth: number;
+            html: boolean;
+        };
+        min?: number;
+        grid: {
+            enabled: boolean;
+        };
+        maxPadding: number;
+        ticks: {
+            pixelInterval?: number;
+        };
+        tickMarks: import("./types").PreparedAxisTickMarks;
+        position: "left" | "right" | "top" | "bottom";
+        plotIndex: number;
+        plotLines: import("./types").PreparedAxisPlotLine[];
+        plotBands: import("./types").PreparedAxisPlotBand[];
+        crosshair: Required<import("../../types").AxisCrosshair>;
+    })[];
+}>;
+export declare function useAxis(props: UseAxesProps): AxesState;
 export {};

package/dist/cjs/hooks/useAxis/index.js

@@ -3,6 +3,50 @@ import isEqual from 'lodash/isEqual';
 import { getWidthOccupiedByYAxis } from '../useChartDimensions/utils';
 import { getPreparedXAxis } from './x-axis';
 import { getPreparedYAxis } from './y-axis';
+export async function getAxes(props) {
+    var _a, _b;
+    const { boundsHeight, height, preparedChart, legendConfig, preparedLegend, preparedSeries, width, xAxis, yAxis, } = props;
+    const seriesData = preparedSeries.filter((s) => s.visible);
+    const estimatedPreparedYAxis = await getPreparedYAxis({
+        height,
+        boundsHeight: height,
+        width,
+        seriesData,
+        yAxis,
+    });
+    const axesWidth = getWidthOccupiedByYAxis({ preparedAxis: estimatedPreparedYAxis });
+    const estimatedBoundsWidth = width - (axesWidth + preparedChart.margin.left + preparedChart.margin.right);
+    const preparedXAxis = await getPreparedXAxis({
+        xAxis,
+        width,
+        boundsWidth: estimatedBoundsWidth,
+        seriesData,
+    });
+    let estimatedBoundsHeight = boundsHeight !== null && boundsHeight !== void 0 ? boundsHeight : height;
+    if (preparedXAxis && typeof boundsHeight !== 'number') {
+        estimatedBoundsHeight =
+            height -
+                (preparedXAxis.title.height +
+                    preparedXAxis.title.margin +
+                    preparedXAxis.labels.margin +
+                    preparedXAxis.labels.height +
+                    (preparedXAxis.rangeSlider.enabled
+                        ? preparedXAxis.rangeSlider.height + preparedXAxis.rangeSlider.margin
+                        : 0) +
+                    ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.height) !== null && _a !== void 0 ? _a : 0) +
+                    ((_b = preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.margin) !== null && _b !== void 0 ? _b : 0) +
+                    preparedChart.margin.top +
+                    preparedChart.margin.bottom);
+    }
+    const preparedYAxis = await getPreparedYAxis({
+        height,
+        boundsHeight: estimatedBoundsHeight,
+        width,
+        seriesData,
+        yAxis,
+    });
+    return { xAxis: preparedXAxis, yAxis: preparedYAxis };
+}
 export function useAxis(props) {
     const { boundsHeight, height, preparedChart, legendConfig, preparedLegend, preparedSeries, preparedSeriesOptions, width, xAxis, yAxis, } = props;
     const [axesState, setAxes] = React.useState({ xAxis: null, yAxis: [] });
@@ -16,48 +60,19 @@ export function useAxis(props) {
             return;
         }
         (async function () {
-            var _a, _b;
             const currentRun = axesStateRunRef.current;
-            const seriesData = preparedSeries.filter((s) => s.visible);
-            const estimatedPreparedYAxis = await getPreparedYAxis({
+            const newStateValue = await getAxes({
+                boundsHeight,
                 height,
-                boundsHeight: height,
+                preparedChart,
+                legendConfig,
+                preparedLegend,
+                preparedSeries,
+                preparedSeriesOptions,
                 width,
-                seriesData,
-                yAxis,
-            });
-            const axesWidth = getWidthOccupiedByYAxis({ preparedAxis: estimatedPreparedYAxis });
-            const estimatedBoundsWidth = width - (axesWidth + preparedChart.margin.left + preparedChart.margin.right);
-            const preparedXAxis = await getPreparedXAxis({
                 xAxis,
-                width,
-                boundsWidth: estimatedBoundsWidth,
-                seriesData,
-            });
-            let estimatedBoundsHeight = boundsHeight !== null && boundsHeight !== void 0 ? boundsHeight : height;
-            if (preparedXAxis && typeof boundsHeight !== 'number') {
-                estimatedBoundsHeight =
-                    height -
-                        (preparedXAxis.title.height +
-                            preparedXAxis.title.margin +
-                            preparedXAxis.labels.margin +
-                            preparedXAxis.labels.height +
-                            (preparedXAxis.rangeSlider.enabled
-                                ? preparedXAxis.rangeSlider.height + preparedXAxis.rangeSlider.margin
-                                : 0) +
-                            ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.height) !== null && _a !== void 0 ? _a : 0) +
-                            ((_b = preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.margin) !== null && _b !== void 0 ? _b : 0) +
-                            preparedChart.margin.top +
-                            preparedChart.margin.bottom);
-            }
-            const preparedYAxis = await getPreparedYAxis({
-                height,
-                boundsHeight: estimatedBoundsHeight,
-                width,
-                seriesData,
                 yAxis,
             });
-            const newStateValue = { xAxis: preparedXAxis, yAxis: preparedYAxis };
             if (axesStateRunRef.current === currentRun) {
                 if (!isEqual(prevAxesStateValue.current, newStateValue)) {
                     setAxes(newStateValue);
@@ -69,7 +84,7 @@ export function useAxis(props) {
     }, [
         boundsHeight,
         height,
-        preparedChart.margin,
+        preparedChart,
         legendConfig,
         preparedLegend,
         preparedSeries,
@@ -81,10 +96,10 @@ export function useAxis(props) {
     const isAxesReady = axesStateReady.current;
     const result = React.useMemo(() => {
         if (isAxesReady) {
-            return Object.assign(Object.assign({}, axesState), { setAxes });
+            return axesState;
         }
         prevAxesStateValue.current = { xAxis: null, yAxis: [] };
-        return Object.assign(Object.assign({}, prevAxesStateValue.current), { setAxes });
+        return prevAxesStateValue.current;
     }, [isAxesReady, axesState]);
     return result;
 }

package/dist/cjs/hooks/useAxis/types.d.ts

@@ -1,4 +1,3 @@
-import type React from 'react';
 import type { DashStyle } from '../../constants';
 import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisType, DeepRequired, MeaningfulAny, PlotLayerPlacement } from '../../types';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation' | 'html'>> & {
@@ -80,5 +79,4 @@ export type AxesState = {
     xAxis: PreparedXAxis | null;
     yAxis: PreparedYAxis[];
 };
-export type SetAxes = React.Dispatch<React.SetStateAction<AxesState>>;
 export {};

package/dist/cjs/hooks/useAxisScales/index.d.ts

@@ -17,6 +17,10 @@ type ReturnValue = {
     xScale?: ChartScale;
     yScale?: (ChartScale | undefined)[];
 };
+export declare const createScales: (args: Args) => {
+    xScale: import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleBand<string> | import("d3-scale").ScaleTime<number, number, never> | undefined;
+    yScale: (ChartScale | undefined)[];
+};
 /**
  * Uses to create scales for axis related series
  */

package/dist/cjs/hooks/useAxisScales/index.js

@@ -7,7 +7,7 @@ import { createXScale } from './x-scale';
 import { createYScale } from './y-scale';
 export { createXScale } from './x-scale';
 export { createYScale } from './y-scale';
-const createScales = (args) => {
+export const createScales = (args) => {
     const { boundsWidth, boundsHeight, isRangeSlider, rangeSliderState, series, split, xAxis, yAxis, zoomState, } = args;
     // For range slider: always use all series regardless of visibility so the slider domain
     // stays stable when the user hides/shows series via the legend.

package/dist/cjs/hooks/useChartDimensions/index.d.ts

@@ -11,7 +11,7 @@ type Args = {
     width: number;
     legendConfig: LegendConfig | undefined;
 };
-export declare const useChartDimensions: (args: Args) => {
+export declare function getChartDimensions(args: Args): {
     boundsWidth: number;
     boundsHeight: number;
 };

package/dist/cjs/hooks/useChartDimensions/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { isAxisRelatedSeries } from '../../utils';
 import { getBoundsWidth } from './utils';
 export { getBoundsWidth } from './utils';
@@ -46,34 +45,20 @@ const getLeftOffset = ({ preparedLegend, legendConfig, }) => {
     }
     return 0;
 };
-export const useChartDimensions = (args) => {
+export function getChartDimensions(args) {
     const { height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width, legendConfig, } = args;
-    return React.useMemo(() => {
-        if (!preparedLegend || !legendConfig) {
-            return { boundsWidth: 0, boundsHeight: 0 };
-        }
-        const hasAxisRelatedSeries = preparedSeries.some(isAxisRelatedSeries);
-        const boundsWidth = getBoundsWidth({ chartWidth: width, chartMargin: margin, preparedYAxis });
-        const bottomOffset = getBottomOffset({
-            hasAxisRelatedSeries,
-            preparedLegend,
-            preparedXAxis,
-            legendConfig,
-        });
-        const topOffset = getTopOffset({ preparedLegend, legendConfig });
-        const rightOffset = getRightOffset({ preparedLegend, legendConfig });
-        const leftOffset = getLeftOffset({ preparedLegend, legendConfig });
-        const boundsHeight = height - margin.top - margin.bottom - bottomOffset - topOffset;
-        const adjustedBoundsWidth = boundsWidth - rightOffset - leftOffset;
-        return { boundsWidth: adjustedBoundsWidth, boundsHeight };
-    }, [
-        height,
-        margin,
+    const hasAxisRelatedSeries = preparedSeries.some(isAxisRelatedSeries);
+    const boundsWidth = getBoundsWidth({ chartWidth: width, chartMargin: margin, preparedYAxis });
+    const bottomOffset = getBottomOffset({
+        hasAxisRelatedSeries,
         preparedLegend,
-        legendConfig,
-        preparedSeries,
         preparedXAxis,
-        preparedYAxis,
-        width,
-    ]);
-};
+        legendConfig,
+    });
+    const topOffset = getTopOffset({ preparedLegend, legendConfig });
+    const rightOffset = getRightOffset({ preparedLegend, legendConfig });
+    const leftOffset = getLeftOffset({ preparedLegend, legendConfig });
+    const boundsHeight = height - margin.top - margin.bottom - bottomOffset - topOffset;
+    const adjustedBoundsWidth = boundsWidth - rightOffset - leftOffset;
+    return { boundsWidth: adjustedBoundsWidth, boundsHeight };
+}

package/dist/cjs/hooks/useCrosshair/index.d.ts

@@ -7,7 +7,7 @@ type Props = {
     height: number;
     xScale?: ChartScale;
     yScale?: (ChartScale | undefined)[];
-    split: PreparedSplit;
+    split: PreparedSplit | undefined;
     plotElement: SVGGElement | null;
     dispatcher: Dispatch<object>;
     boundsOffsetLeft: number;

package/dist/cjs/hooks/useNormalizedOriginalData/index.d.ts

@@ -1,38 +1,33 @@
 import type { ChartData } from '../../types';
-interface UseOriginalDataProps {
-    seriesData: ChartData['series']['data'];
+export declare function getNormalizedXAxis(props: {
     xAxis: ChartData['xAxis'];
-    yAxis: ChartData['yAxis'];
-}
-export declare function useNormalizedOriginalData(props: UseOriginalDataProps): {
-    normalizedSeriesData: import("../../types").ChartSeries[];
-    normalizedXAxis: {
-        categories: string[] | undefined;
-        rangeSlider?: import("../../types").ChartAxisRangeSlider;
-        crosshair?: import("../../types").AxisCrosshair;
-        timestamps?: number[];
-        type?: import("../../types").ChartAxisType;
-        labels?: import("../../types").ChartAxisLabels;
-        lineColor?: string;
-        title?: import("../../types").ChartAxisTitle;
-        min?: number;
-        max?: number;
-        grid?: {
-            enabled?: boolean;
-        };
-        ticks?: {
-            pixelInterval?: number;
-            interval?: number | string;
-        };
-        maxPadding?: number;
-        plotLines?: import("../../types").AxisPlotLine[];
-        plotBands?: import("../../types").AxisPlotBand[];
-        tickMarks?: import("../../types").ChartAxisTickMarks;
-        visible?: boolean;
-        order?: "sortAsc" | "sortDesc" | "reverse";
-        startOnTick?: boolean;
-        endOnTick?: boolean;
+}): {
+    categories: string[] | undefined;
+    rangeSlider?: import("../../types").ChartAxisRangeSlider;
+    crosshair?: import("../../types").AxisCrosshair;
+    timestamps?: number[];
+    type?: import("../../types").ChartAxisType;
+    labels?: import("../../types").ChartAxisLabels;
+    lineColor?: string;
+    title?: import("../../types").ChartAxisTitle;
+    min?: number;
+    max?: number;
+    grid?: {
+        enabled?: boolean;
+    };
+    ticks?: {
+        pixelInterval?: number;
+        interval?: number | string;
     };
-    normalizedYAxis: import("../../types").ChartYAxis[] | undefined;
+    maxPadding?: number;
+    plotLines?: import("../../types").AxisPlotLine[];
+    plotBands?: import("../../types").AxisPlotBand[];
+    tickMarks?: import("../../types").ChartAxisTickMarks;
+    visible?: boolean;
+    order?: "sortAsc" | "sortDesc" | "reverse";
+    startOnTick?: boolean;
+    endOnTick?: boolean;
 };
-export {};
+export declare function getNormalizedYAxis(props: {
+    yAxis: ChartData['yAxis'];
+}): import("../../types").ChartYAxis[] | undefined;

package/dist/cjs/hooks/useNormalizedOriginalData/index.js

@@ -1,32 +1,21 @@
-import React from 'react';
-import { getAxisCategories, getSortedSeriesData } from '../../utils';
-export function useNormalizedOriginalData(props) {
-    const normalizedSeriesData = React.useMemo(() => {
-        return getSortedSeriesData({
-            seriesData: props.seriesData,
-            xAxis: props.xAxis,
-            yAxis: props.yAxis,
+import { getAxisCategories } from '../../utils';
+export function getNormalizedXAxis(props) {
+    var _a;
+    let categories = (_a = props.xAxis) === null || _a === void 0 ? void 0 : _a.categories;
+    if (props.xAxis && props.xAxis.categories) {
+        categories = getAxisCategories(props.xAxis);
+    }
+    return Object.assign(Object.assign({}, props.xAxis), { categories });
+}
+export function getNormalizedYAxis(props) {
+    if (Array.isArray(props.yAxis) && props.yAxis.some((axis) => axis.categories)) {
+        return props.yAxis.map((axis) => {
+            let categories = axis.categories;
+            if (axis.categories) {
+                categories = getAxisCategories(axis);
+            }
+            return Object.assign(Object.assign({}, axis), { categories });
         });
-    }, [props.seriesData, props.xAxis, props.yAxis]);
-    const normalizedXAxis = React.useMemo(() => {
-        var _a;
-        let categories = (_a = props.xAxis) === null || _a === void 0 ? void 0 : _a.categories;
-        if (props.xAxis && props.xAxis.categories) {
-            categories = getAxisCategories(props.xAxis);
-        }
-        return Object.assign(Object.assign({}, props.xAxis), { categories });
-    }, [props.xAxis]);
-    const normalizedYAxis = React.useMemo(() => {
-        if (Array.isArray(props.yAxis) && props.yAxis.some((axis) => axis.categories)) {
-            return props.yAxis.map((axis) => {
-                let categories = axis.categories;
-                if (axis.categories) {
-                    categories = getAxisCategories(axis);
-                }
-                return Object.assign(Object.assign({}, axis), { categories });
-            });
-        }
-        return props.yAxis;
-    }, [props.yAxis]);
-    return { normalizedSeriesData, normalizedXAxis, normalizedYAxis };
+    }
+    return props.yAxis;
 }

package/dist/cjs/hooks/useSeries/index.d.ts

@@ -1,16 +1,12 @@
 import type { ChartData } from '../../types';
-import type { OnLegendItemClick, PreparedLegend, PreparedSeries } from './types';
-type Args = {
-    colors: string[];
-    legend: ChartData['legend'];
-    originalSeriesData: ChartData['series']['data'];
-    seriesData: ChartData['series']['data'];
-    seriesOptions: ChartData['series']['options'];
-    preparedLegend?: PreparedLegend;
-};
-export declare const useSeries: (args: Args) => {
-    preparedLegend: PreparedLegend | null;
+import type { PreparedLegend, PreparedSeries } from './types';
+export declare const getVisibleSeries: ({ preparedSeries, activeLegendItems, }: {
     preparedSeries: PreparedSeries[];
-    handleLegendItemClick: OnLegendItemClick;
-};
-export {};
+    activeLegendItems: string[];
+}) => PreparedSeries[];
+export declare const getPreparedSeries: ({ seriesData, seriesOptions, colors, preparedLegend, }: {
+    seriesData: ChartData["series"]["data"];
+    seriesOptions: ChartData["series"]["options"];
+    colors: string[];
+    preparedLegend?: PreparedLegend | null;
+}) => Promise<PreparedSeries[]>;

package/dist/cjs/hooks/useSeries/index.js

@@ -1,21 +1,15 @@
-import React from 'react';
 import { group, scaleOrdinal } from 'd3';
 import { getSeriesNames } from '../../utils';
-import { usePrevious } from '../usePrevious';
-import { getPreparedLegend } from './prepare-legend';
 import { prepareSeries } from './prepareSeries';
-import { getActiveLegendItems, getAllLegendItems } from './utils';
-const useVisibleSeries = ({ preparedSeries, activeLegendItems, }) => {
-    return React.useMemo(() => {
-        return preparedSeries.map((singleSeries) => {
-            if (singleSeries.legend.enabled) {
-                return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.legend.groupId) });
-            }
-            return singleSeries;
-        });
-    }, [preparedSeries, activeLegendItems]);
+export const getVisibleSeries = ({ preparedSeries, activeLegendItems, }) => {
+    return preparedSeries.map((singleSeries) => {
+        if (singleSeries.legend.enabled) {
+            return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.legend.groupId) });
+        }
+        return singleSeries;
+    });
 };
-const getPreparedSeries = async ({ seriesData, seriesOptions, colors, preparedLegend, }) => {
+export const getPreparedSeries = async ({ seriesData, seriesOptions, colors, preparedLegend, }) => {
     const seriesNames = getSeriesNames(seriesData);
     const colorScale = scaleOrdinal(seriesNames, colors);
     const groupedSeries = group(seriesData, (item) => item.type);
@@ -37,69 +31,3 @@ const getPreparedSeries = async ({ seriesData, seriesOptions, colors, preparedLe
     }
     return acc;
 };
-export const useSeries = (args) => {
-    const { legend, originalSeriesData, seriesData, seriesOptions, colors, preparedLegend: preparedLegendProps = null, } = args;
-    const [preparedLegend, setPreparedLegend] = React.useState(preparedLegendProps);
-    const legendRunRef = React.useRef(0);
-    React.useEffect(() => {
-        if (!preparedLegendProps) {
-            const currentRun = ++legendRunRef.current;
-            getPreparedLegend({ legend, series: seriesData }).then((value) => {
-                if (legendRunRef.current === currentRun) {
-                    setPreparedLegend(value);
-                }
-            });
-        }
-    }, [legend, preparedLegendProps, seriesData]);
-    const [preparedSeries, setPreparedSeries] = React.useState([]);
-    const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(preparedSeries));
-    const seriesRunRef = React.useRef(0);
-    React.useEffect(() => {
-        const currentRun = ++seriesRunRef.current;
-        (async () => {
-            const items = await getPreparedSeries({
-                seriesData,
-                seriesOptions,
-                preparedLegend,
-                colors,
-            });
-            if (seriesRunRef.current === currentRun) {
-                setPreparedSeries(items);
-                setActiveLegendItems(getActiveLegendItems(items));
-            }
-        })();
-    }, [seriesData, seriesOptions, preparedLegend, colors]);
-    const prevOriginalSeriesData = usePrevious(originalSeriesData);
-    const chartSeries = useVisibleSeries({ preparedSeries, activeLegendItems });
-    const handleLegendItemClick = React.useCallback(({ id, metaKey }) => {
-        const allItems = getAllLegendItems(preparedSeries);
-        const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(id);
-        let nextActiveLegendItems;
-        if (metaKey && activeLegendItems.includes(id)) {
-            nextActiveLegendItems = activeLegendItems.filter((item) => item !== id);
-        }
-        else if (metaKey && !activeLegendItems.includes(id)) {
-            nextActiveLegendItems = activeLegendItems.concat(id);
-        }
-        else if (onlyItemSelected && allItems.length === 1) {
-            nextActiveLegendItems = [];
-        }
-        else if (onlyItemSelected) {
-            nextActiveLegendItems = allItems;
-        }
-        else {
-            nextActiveLegendItems = [id];
-        }
-        setActiveLegendItems(nextActiveLegendItems);
-    }, [preparedSeries, activeLegendItems]);
-    React.useEffect(() => {
-        if (prevOriginalSeriesData !== originalSeriesData) {
-            setActiveLegendItems(getActiveLegendItems(preparedSeries));
-        }
-    }, [originalSeriesData, prevOriginalSeriesData, preparedSeries]);
-    return {
-        preparedLegend,
-        preparedSeries: chartSeries,
-        handleLegendItemClick,
-    };
-};

package/dist/cjs/hooks/useShapes/index.d.ts

@@ -40,6 +40,10 @@ type Args = {
     yScale?: (ChartScale | undefined)[];
     zoomState?: Partial<ZoomState>;
 };
+export declare function getShapes(args: Args): Promise<{
+    shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    shapesData: ShapeData[];
+}>;
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: ShapeData[];