@alfalab/core-components 45.9.0-beta.0 → 45.9.0-beta.1

package/card-image/cssm/Component.js

@@ -1,39 +1,52 @@
-import React, { useState, useRef, useEffect } from 'react';
-import cn from 'classnames';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const ASPECT_RATIO = 0.63;
-const DEFAULT_WIDTH = 280;
-const DEFAULT_BASE_URL = 'https://online.alfabank.ru/cards-images/cards/';
-const CardImage = ({ cardId, layers = 'BACKGROUND,CARD_NUMBER,CARD_HOLDER,PAY_PASS,CHIP,LOGO,PAYMENT_SYSTEM,RESERVED_1,RESERVED_2,VALID_DATE', width = DEFAULT_WIDTH, baseUrl = DEFAULT_BASE_URL, rounded = true, alt, id, dataTestId, onLoad, className, }) => {
-    const [loaded, setLoaded] = useState(false);
-    const image = useRef(null);
-    const height = width * ASPECT_RATIO;
-    useEffect(() => {
-        setLoaded((prevLoaded) => {
-            if (!prevLoaded && image.current?.complete) {
-                onLoad?.();
+var React = require('react');
+var cn = require('classnames');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var ASPECT_RATIO = 0.63;
+var DEFAULT_WIDTH = 280;
+var DEFAULT_BASE_URL = 'https://online.alfabank.ru/cards-images/cards/';
+var CardImage = function (_a) {
+    var cardId = _a.cardId, _b = _a.layers, layers = _b === void 0 ? 'BACKGROUND,CARD_NUMBER,CARD_HOLDER,PAY_PASS,CHIP,LOGO,PAYMENT_SYSTEM,RESERVED_1,RESERVED_2,VALID_DATE' : _b, _c = _a.width, width = _c === void 0 ? DEFAULT_WIDTH : _c, _d = _a.baseUrl, baseUrl = _d === void 0 ? DEFAULT_BASE_URL : _d, _e = _a.rounded, rounded = _e === void 0 ? true : _e, alt = _a.alt, id = _a.id, dataTestId = _a.dataTestId, onLoad = _a.onLoad, className = _a.className;
+    var _f = React.useState(false), loaded = _f[0], setLoaded = _f[1];
+    var image = React.useRef(null);
+    var height = width * ASPECT_RATIO;
+    React.useEffect(function () {
+        setLoaded(function (prevLoaded) {
+            var _a;
+            if (!prevLoaded && ((_a = image.current) === null || _a === void 0 ? void 0 : _a.complete)) {
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad();
                 return true;
             }
             return prevLoaded;
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const handleLoadedImage = () => {
-        setLoaded((prevLoaded) => {
+    var handleLoadedImage = function () {
+        setLoaded(function (prevLoaded) {
             if (!prevLoaded) {
-                onLoad?.();
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad();
                 return true;
             }
             return prevLoaded;
         });
     };
-    const cardImageUrl = `${baseUrl}${cardId}/images?layers=${layers}&width=${width}`;
-    const cardImageUrl2x = `${baseUrl}${cardId}/images?layers=${layers}&width=${width * 2}`;
-    return (React.createElement("div", { className: cn(styles.cardImage, rounded && styles.rounded, loaded && styles.loaded, className), style: {
-            width,
-            height,
-        }, id: id, "data-test-id": dataTestId }, cardId && (React.createElement("img", { ref: image, className: styles.image, width: width, height: height, src: cardImageUrl, srcSet: `${cardImageUrl2x} 2x`, alt: alt, role: 'presentation', onLoad: handleLoadedImage }))));
+    var cardImageUrl = "".concat(baseUrl).concat(cardId, "/images?layers=").concat(layers, "&width=").concat(width);
+    var cardImageUrl2x = "".concat(baseUrl).concat(cardId, "/images?layers=").concat(layers, "&width=").concat(width * 2);
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.cardImage, rounded && styles__default.default.rounded, loaded && styles__default.default.loaded, className), style: {
+            width: width,
+            height: height,
+        }, id: id, "data-test-id": dataTestId }, cardId && (React__default.default.createElement("img", { ref: image, className: styles__default.default.image, width: width, height: height, src: cardImageUrl, srcSet: "".concat(cardImageUrl2x, " 2x"), alt: alt, role: 'presentation', onLoad: handleLoadedImage }))));
 };
 
-export { ASPECT_RATIO, CardImage, DEFAULT_BASE_URL, DEFAULT_WIDTH };
+exports.ASPECT_RATIO = ASPECT_RATIO;
+exports.CardImage = CardImage;
+exports.DEFAULT_BASE_URL = DEFAULT_BASE_URL;
+exports.DEFAULT_WIDTH = DEFAULT_WIDTH;

package/card-image/cssm/index.js

@@ -1,4 +1,10 @@
-export { ASPECT_RATIO, CardImage, DEFAULT_BASE_URL, DEFAULT_WIDTH } from './Component.js';
-import 'react';
-import 'classnames';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.ASPECT_RATIO = Component.ASPECT_RATIO;
+exports.CardImage = Component.CardImage;
+exports.DEFAULT_BASE_URL = Component.DEFAULT_BASE_URL;
+exports.DEFAULT_WIDTH = Component.DEFAULT_WIDTH;

package/cdn-icon/cssm/Component.js

@@ -1,6 +1,15 @@
-import React, { useState, useEffect } from 'react';
-import cn from 'classnames';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var LoadingStatus;
 (function (LoadingStatus) {
@@ -8,17 +17,19 @@ var LoadingStatus;
     LoadingStatus[LoadingStatus["SUCCESS"] = 1] = "SUCCESS";
     LoadingStatus[LoadingStatus["FAILURE"] = 2] = "FAILURE";
 })(LoadingStatus || (LoadingStatus = {}));
-const CDNIcon = ({ name, color, dataTestId, className, baseUrl = 'https://alfabank.servicecdn.ru/icons', fallback, }) => {
-    const [loadingStatus, setLoadingStatus] = useState(LoadingStatus.INITIAL);
-    const [icon, setIcon] = useState('');
-    const monoIcon = !name.includes('_color');
-    useEffect(() => {
-        const xhr = new XMLHttpRequest();
-        xhr.open('GET', `${baseUrl}/${name}.svg`);
+var CDNIcon = function (_a) {
+    var _b;
+    var name = _a.name, color = _a.color, dataTestId = _a.dataTestId, className = _a.className, _c = _a.baseUrl, baseUrl = _c === void 0 ? 'https://alfabank.servicecdn.ru/icons' : _c, fallback = _a.fallback;
+    var _d = React.useState(LoadingStatus.INITIAL), loadingStatus = _d[0], setLoadingStatus = _d[1];
+    var _e = React.useState(''), icon = _e[0], setIcon = _e[1];
+    var monoIcon = !name.includes('_color');
+    React.useEffect(function () {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', "".concat(baseUrl, "/").concat(name, ".svg"));
         xhr.send();
         xhr.onload = function onload() {
             setLoadingStatus(LoadingStatus.SUCCESS);
-            const svg = xhr.response;
+            var svg = xhr.response;
             if (svg.startsWith('<svg')) {
                 setIcon(svg);
             }
@@ -26,13 +37,13 @@ const CDNIcon = ({ name, color, dataTestId, className, baseUrl = 'https://alfaba
         xhr.onerror = function onError() {
             setLoadingStatus(LoadingStatus.FAILURE);
         };
-        return () => xhr.abort();
+        return function () { return xhr.abort(); };
     }, [name, baseUrl]);
-    return (React.createElement("span", { style: { color }, className: cn('cc-cdn-icon', styles.component, className, {
-            [styles.parentColor]: monoIcon,
-        }), "data-test-id": dataTestId, ...(loadingStatus === LoadingStatus.FAILURE
-            ? { children: fallback }
-            : { dangerouslySetInnerHTML: { __html: icon } }) }));
+    return (React__default.default.createElement("span", tslib.__assign({ style: { color: color }, className: cn__default.default('cc-cdn-icon', styles__default.default.component, className, (_b = {},
+            _b[styles__default.default.parentColor] = monoIcon,
+            _b)), "data-test-id": dataTestId }, (loadingStatus === LoadingStatus.FAILURE
+        ? { children: fallback }
+        : { dangerouslySetInnerHTML: { __html: icon } }))));
 };
 
-export { CDNIcon };
+exports.CDNIcon = CDNIcon;

package/cdn-icon/cssm/index.js

@@ -1,4 +1,7 @@
-export { CDNIcon } from './Component.js';
-import 'react';
-import 'classnames';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.CDNIcon = Component.CDNIcon;

package/chart/cssm/Component.js

@@ -1,112 +1,106 @@
-import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
-import cn from 'classnames';
-import { Legend, CartesianGrid, XAxis, YAxis, Brush, Tooltip, Area, Line, Bar, LabelList, Cell, ResponsiveContainer, ComposedChart } from 'recharts';
-import { CustomizedLabel } from './components/CustomizedLabel.js';
-import { Dot } from './components/Dot/index.js';
-import { Legends } from './components/Legends/index.js';
-import { LinearGradient } from './components/LinearGradient.js';
-import { RectBar } from './components/RectBar.js';
-import { Tick } from './components/Tick/index.js';
-import { TooltipContent } from './components/TooltipContent/index.js';
-import { useSettings } from './hooks/useSettings/index.js';
-import styles from './index.module.css';
-import './hooks/usePathBar/index.js';
-import './hooks/usePathBar/utils/getRadius.js';
-import './icons/Point.js';
-import './components/Dot/index.module.css';
-import '../../typography/cssm';
-import './icons/Circle.js';
-import './icons/CircleLine.js';
-import './icons/FilledCircle.js';
-import './icons/StrokeCircle.js';
-import './components/Legends/index.module.css';
-import './components/Tick/index.module.css';
-import './components/TooltipContent/index.module.css';
-import './hooks/useSettings/utils/setComposedChartsMargin.js';
-import './hooks/useSettings/utils/setDatas.js';
-import './hooks/useSettings/utils/setGradientCharts.js';
-import './hooks/useSettings/utils/setLegendMargin.js';
-import './hooks/useSettings/utils/sortByIndex.js';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const CustomizedHOC = (Component, options) => {
-    const NewComponent = (props) => React.createElement(Component, { ...props, ...options });
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var recharts = require('recharts');
+var components_CustomizedLabel = require('./components/CustomizedLabel.js');
+var components_Dot_index = require('./components/Dot/index.js');
+var components_Legends_index = require('./components/Legends/index.js');
+var components_LinearGradient = require('./components/LinearGradient.js');
+var components_RectBar = require('./components/RectBar.js');
+var components_Tick_index = require('./components/Tick/index.js');
+var components_TooltipContent_index = require('./components/TooltipContent/index.js');
+var hooks_useSettings_index = require('./hooks/useSettings/index.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var CustomizedHOC = function (Component, options) {
+    var NewComponent = function (props) { return React__default.default.createElement(Component, tslib.__assign({}, props, options)); };
     return NewComponent;
 };
 
-/* eslint-disable @typescript-eslint/no-explicit-any,prefer-template */
-const Chart = (props) => {
-    const [{ state, data, charts, filterCount }, { setCharts, setFilterCount }] = useSettings(props);
-    const [activeDotsState, setActiveDotsState] = useState({
+var Chart = function (props) {
+    var _a;
+    var _b = hooks_useSettings_index.useSettings(props), _c = _b[0], state = _c.state, data = _c.data, charts = _c.charts, filterCount = _c.filterCount, _d = _b[1], setCharts = _d.setCharts, setFilterCount = _d.setFilterCount;
+    var _e = React.useState({
         prev: null,
         active: null,
-    });
-    const [yBrush, setYBrush] = useState(null);
-    const [tooltipArrowSide, setTooltipArrowSide] = useState(null);
-    const [heightLegend, setHeightLegend] = useState(0);
-    const svgRef = useRef(null);
-    const tooltipRef = useRef(null);
-    const renderGradient = useMemo(() => {
+    }), activeDotsState = _e[0], setActiveDotsState = _e[1];
+    var _f = React.useState(null), yBrush = _f[0], setYBrush = _f[1];
+    var _g = React.useState(null), tooltipArrowSide = _g[0], setTooltipArrowSide = _g[1];
+    var _h = React.useState(0), heightLegend = _h[0], setHeightLegend = _h[1];
+    var svgRef = React.useRef(null);
+    var tooltipRef = React.useRef(null);
+    var renderGradient = React.useMemo(function () {
         if (!state)
             return null;
-        return state.series.map((item) => {
-            const { chart, gradient } = item;
+        return state.series.map(function (item) {
+            var chart = item.chart, gradient = item.gradient;
             if (chart !== 'gradient' || !gradient)
                 return null;
-            const { gid, points } = gradient;
-            return (React.createElement(LinearGradient, { key: `${state.id}-${gid}`, id: state.id, gid: gid, points: points }));
+            var gid = gradient.gid, points = gradient.points;
+            return (React__default.default.createElement(components_LinearGradient.LinearGradient, { key: "".concat(state.id, "-").concat(gid), id: state.id, gid: gid, points: points }));
         });
     }, [state]);
-    const toggleChart = useCallback((item) => {
-        const { chart, properties: { dataKey }, } = item;
-        const withGrad = chart === 'area';
-        let changed = false;
+    var toggleChart = React.useCallback(function (item) {
+        var chart = item.chart, dataKey = item.properties.dataKey;
+        var withGrad = chart === 'area';
+        var changed = false;
         if (charts[dataKey + ''] && filterCount > 1) {
             changed = true;
-            setFilterCount((prev) => prev - 1);
+            setFilterCount(function (prev) { return prev - 1; });
         }
         if (!charts[dataKey + '']) {
             changed = true;
-            setFilterCount((prev) => prev + 1);
+            setFilterCount(function (prev) { return prev + 1; });
         }
         if (!changed)
             return;
-        setCharts((prev) => {
-            const newState = { ...prev };
+        setCharts(function (prev) {
+            var newState = tslib.__assign({}, prev);
             newState[dataKey + ''] = !newState[dataKey + ''];
             if (withGrad)
                 newState[dataKey + '-gradient'] = !newState[dataKey + '-gradient'];
             return newState;
         });
     }, [charts, filterCount, setCharts, setFilterCount]);
-    const legendRef = useCallback((node) => {
+    var legendRef = React.useCallback(function (node) {
         if (node !== null) {
-            setTimeout(() => {
-                const { height } = node.getBoundingClientRect();
+            setTimeout(function () {
+                var height = node.getBoundingClientRect().height;
                 setHeightLegend(height);
             }, 0);
         }
     }, []);
-    const renderLegend = useMemo(() => {
-        if (!state?.legend)
+    var renderLegend = React.useMemo(function () {
+        var _a, _b, _c;
+        if (!(state === null || state === void 0 ? void 0 : state.legend))
             return null;
-        const translate = state?.xAxis?.tickMargin && state?.legend?.verticalAlign !== 'top'
-            ? state.xAxis.tickMargin + (state?.brush?.brushMargin || 0)
+        var translate = ((_a = state === null || state === void 0 ? void 0 : state.xAxis) === null || _a === void 0 ? void 0 : _a.tickMargin) && ((_b = state === null || state === void 0 ? void 0 : state.legend) === null || _b === void 0 ? void 0 : _b.verticalAlign) !== 'top'
+            ? state.xAxis.tickMargin + (((_c = state === null || state === void 0 ? void 0 : state.brush) === null || _c === void 0 ? void 0 : _c.brushMargin) || 0)
             : 0;
-        return (React.createElement(Legend, { ...(state.legend || null), content: React.createElement(Legends, { legend: state.legend, series: state.series, id: state.id, toggleChart: toggleChart, ref: legendRef, charts: charts }), wrapperStyle: {
-                transform: `translateY(${translate}px)`,
-            } }));
+        return (React__default.default.createElement(recharts.Legend, tslib.__assign({}, (state.legend || null), { content: React__default.default.createElement(components_Legends_index.Legends, { legend: state.legend, series: state.series, id: state.id, toggleChart: toggleChart, ref: legendRef, charts: charts }), wrapperStyle: {
+                transform: "translateY(".concat(translate, "px)"),
+            } })));
     }, [state, charts, toggleChart, legendRef]);
-    const renderCartesianGrid = useMemo(() => {
-        if (!state?.cartesianGrid)
+    var renderCartesianGrid = React.useMemo(function () {
+        if (!(state === null || state === void 0 ? void 0 : state.cartesianGrid))
             return null;
-        return React.createElement(CartesianGrid, { ...state.cartesianGrid });
+        return React__default.default.createElement(recharts.CartesianGrid, tslib.__assign({}, state.cartesianGrid));
     }, [state]);
-    const renderXAxis = useMemo(() => {
-        if (!state?.xAxis)
+    var renderXAxis = React.useMemo(function () {
+        var _a;
+        if (!(state === null || state === void 0 ? void 0 : state.xAxis))
             return null;
-        let tick;
-        if (state?.xAxis?.tickType === 'point') {
-            tick = CustomizedHOC(Tick, { xAxis: state.xAxis });
+        var tick;
+        if (((_a = state === null || state === void 0 ? void 0 : state.xAxis) === null || _a === void 0 ? void 0 : _a.tickType) === 'point') {
+            tick = CustomizedHOC(components_Tick_index.Tick, { xAxis: state.xAxis });
         }
         else if (typeof state.xAxis.tick === 'boolean') {
             tick = state.xAxis.tick;
@@ -114,14 +108,15 @@ const Chart = (props) => {
         else {
             tick = true;
         }
-        return React.createElement(XAxis, { ...state.xAxis, tick: tick });
+        return React__default.default.createElement(recharts.XAxis, tslib.__assign({}, state.xAxis, { tick: tick }));
     }, [state]);
-    const renderYAxis = useMemo(() => {
-        if (!state?.yAxis)
+    var renderYAxis = React.useMemo(function () {
+        var _a;
+        if (!(state === null || state === void 0 ? void 0 : state.yAxis))
             return null;
-        let tick;
-        if (state?.yAxis?.tick) {
-            tick = CustomizedHOC(state.yAxis.tick, { state });
+        var tick;
+        if ((_a = state === null || state === void 0 ? void 0 : state.yAxis) === null || _a === void 0 ? void 0 : _a.tick) {
+            tick = CustomizedHOC(state.yAxis.tick, { state: state });
         }
         else if (typeof state.yAxis.tick === 'boolean') {
             tick = state.yAxis.tick;
@@ -129,73 +124,74 @@ const Chart = (props) => {
         else {
             tick = true;
         }
-        return React.createElement(YAxis, { ...state.yAxis, tick: tick });
+        return React__default.default.createElement(recharts.YAxis, tslib.__assign({}, state.yAxis, { tick: tick }));
     }, [state]);
-    const renderBrush = useMemo(() => {
-        if (!state?.brush)
+    var renderBrush = React.useMemo(function () {
+        if (!(state === null || state === void 0 ? void 0 : state.brush))
             return null;
-        return React.createElement(Brush, { y: typeof yBrush === 'number' ? yBrush : 0, ...state.brush });
+        return React__default.default.createElement(recharts.Brush, tslib.__assign({ y: typeof yBrush === 'number' ? yBrush : 0 }, state.brush));
     }, [state, yBrush]);
-    const renderTooltip = useMemo(() => {
-        if (!state?.tooltip)
+    var renderTooltip = React.useMemo(function () {
+        if (!(state === null || state === void 0 ? void 0 : state.tooltip))
             return null;
-        return (React.createElement(Tooltip, { ref: tooltipRef, ...state.tooltip, content: CustomizedHOC(TooltipContent, { series: state.series, tooltipArrowSide }) }));
+        return (React__default.default.createElement(recharts.Tooltip, tslib.__assign({ ref: tooltipRef }, state.tooltip, { content: CustomizedHOC(components_TooltipContent_index.TooltipContent, { series: state.series, tooltipArrowSide: tooltipArrowSide }) })));
     }, [state, tooltipArrowSide]);
-    const renderChartsItems = useMemo(() => {
+    var renderChartsItems = React.useMemo(function () {
         if (!state || !charts)
             return null;
-        return state.series.map((item) => {
-            const { chart, properties, radius, labelList } = item;
-            const show = charts[`${properties.dataKey}`];
+        return state.series.map(function (item) {
+            var chart = item.chart, properties = item.properties, radius = item.radius, labelList = item.labelList;
+            var show = charts["".concat(properties.dataKey)];
             switch (chart) {
                 case 'bar':
-                    return show && !item?.hide ? (React.createElement(Bar, { key: `${state.id}-${properties.dataKey}`, ...properties, shape: React.createElement(RectBar, { radius: radius }) },
-                        labelList && (React.createElement(LabelList, { dataKey: properties.dataKey.toString(), ...labelList, content: React.createElement(CustomizedLabel, { radius: radius }) })),
-                        data.map((_, index) => {
-                            const key = `${state.id}-${properties.dataKey}-${index}`;
-                            return (React.createElement(Cell, { key: key, className: cn(styles.bar, typeof activeDotsState.active === 'number' &&
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Bar, tslib.__assign({ key: "".concat(state.id, "-").concat(properties.dataKey) }, properties, { shape: React__default.default.createElement(components_RectBar.RectBar, { radius: radius }) }),
+                        labelList && (React__default.default.createElement(recharts.LabelList, tslib.__assign({ dataKey: properties.dataKey.toString() }, labelList, { content: React__default.default.createElement(components_CustomizedLabel.CustomizedLabel, { radius: radius }) }))),
+                        data.map(function (_, index) {
+                            var key = "".concat(state.id, "-").concat(properties.dataKey, "-").concat(index);
+                            return (React__default.default.createElement(recharts.Cell, { key: key, className: cn__default.default(styles__default.default.bar, typeof activeDotsState.active === 'number' &&
                                     activeDotsState.active !== index
-                                    ? styles.unfocused
+                                    ? styles__default.default.unfocused
                                     : '') }));
                         }))) : null;
                 case 'area':
                 case 'line':
-                    return show && !item?.hide ? (React.createElement(Line, { key: `${state.id}-${properties.dataKey}`, ...properties, dot: properties.dot && properties.dotSettings
-                            ? CustomizedHOC(Dot, {
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Line, tslib.__assign({ key: "".concat(state.id, "-").concat(properties.dataKey) }, properties, { dot: properties.dot && properties.dotSettings
+                            ? CustomizedHOC(components_Dot_index.Dot, {
                                 activeDot: activeDotsState.active,
                                 dotSettings: properties.dotSettings,
-                                inherit: properties?.inheritStroke
+                                inherit: (properties === null || properties === void 0 ? void 0 : properties.inheritStroke)
                                     ? properties.inheritStroke
                                     : false,
                             })
-                            : false, activeDot: false })) : null;
+                            : false, activeDot: false }))) : null;
                 case 'gradient':
-                    return show && !item?.hide ? (React.createElement(Area, { ...item.properties, key: `${state.id}-${item.properties.dataKey}`, dataKey: `${item.properties.dataKey}`, stroke: 'transparent', fill: item.gradient.gid
-                            ? `url(#${state.id}-${item.gradient.gid})`
-                            : item.properties.fill, dot: false, activeDot: false })) : null;
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Area, tslib.__assign({}, item.properties, { key: "".concat(state.id, "-").concat(item.properties.dataKey), dataKey: "".concat(item.properties.dataKey), stroke: 'transparent', fill: item.gradient.gid
+                            ? "url(#".concat(state.id, "-").concat(item.gradient.gid, ")")
+                            : item.properties.fill, dot: false, activeDot: false }))) : null;
                 default:
                     return null;
             }
         });
     }, [charts, state, activeDotsState, data]);
     // Позиционирование brush
-    useEffect(() => {
+    React.useEffect(function () {
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!state || !state.brush)
             return;
         if (!heightLegend || heightLegend === 0)
             return;
-        const align = state?.legend?.verticalAlign;
-        const legendHeight = align === 'top' ? 0 : heightLegend;
-        const marginTick = state?.xAxis?.tickMargin ? state?.xAxis?.tickMargin : 0;
-        const brushY = (svgRef.current?.clientHeight ? svgRef.current.clientHeight : 0) -
+        var align = (_a = state === null || state === void 0 ? void 0 : state.legend) === null || _a === void 0 ? void 0 : _a.verticalAlign;
+        var legendHeight = align === 'top' ? 0 : heightLegend;
+        var marginTick = ((_b = state === null || state === void 0 ? void 0 : state.xAxis) === null || _b === void 0 ? void 0 : _b.tickMargin) ? (_c = state === null || state === void 0 ? void 0 : state.xAxis) === null || _c === void 0 ? void 0 : _c.tickMargin : 0;
+        var brushY = (((_d = svgRef.current) === null || _d === void 0 ? void 0 : _d.clientHeight) ? svgRef.current.clientHeight : 0) -
             legendHeight -
             state.brush.height -
-            (state?.composeChart?.margin?.bottom ? state.composeChart.margin.bottom : 0) +
+            (((_f = (_e = state === null || state === void 0 ? void 0 : state.composeChart) === null || _e === void 0 ? void 0 : _e.margin) === null || _f === void 0 ? void 0 : _f.bottom) ? state.composeChart.margin.bottom : 0) +
             marginTick +
-            (state.brush?.brushMargin ? state.brush.brushMargin : 0);
+            (((_g = state.brush) === null || _g === void 0 ? void 0 : _g.brushMargin) ? state.brush.brushMargin : 0);
         setYBrush(brushY);
     }, [heightLegend, state]);
-    const leaveEvent = (isTooltipActive) => {
+    var leaveEvent = function (isTooltipActive) {
         if (isTooltipActive)
             return;
         if (typeof activeDotsState.prev !== 'number' || typeof activeDotsState.active !== 'number')
@@ -205,19 +201,20 @@ const Chart = (props) => {
             active: null,
         });
     };
-    const arrowTooltipEvent = (activeCoordinate) => {
-        if (!state?.tooltip?.arrow)
+    var arrowTooltipEvent = function (activeCoordinate) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!((_a = state === null || state === void 0 ? void 0 : state.tooltip) === null || _a === void 0 ? void 0 : _a.arrow))
             return;
-        if (state?.tooltip?.arrow && activeCoordinate?.x) {
-            const side = (svgRef?.current?.clientWidth || 0) -
-                (state?.composeChart?.margin?.right || 0) -
+        if (((_b = state === null || state === void 0 ? void 0 : state.tooltip) === null || _b === void 0 ? void 0 : _b.arrow) && (activeCoordinate === null || activeCoordinate === void 0 ? void 0 : activeCoordinate.x)) {
+            var side = (((_c = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) || 0) -
+                (((_e = (_d = state === null || state === void 0 ? void 0 : state.composeChart) === null || _d === void 0 ? void 0 : _d.margin) === null || _e === void 0 ? void 0 : _e.right) || 0) -
                 activeCoordinate.x -
-                (tooltipRef.current?.state?.boxWidth || 0) >
+                (((_g = (_f = tooltipRef.current) === null || _f === void 0 ? void 0 : _f.state) === null || _g === void 0 ? void 0 : _g.boxWidth) || 0) >
                 20;
             setTooltipArrowSide(side);
         }
     };
-    const hoverEvent = (isTooltipActive, activeTooltipIndex) => {
+    var hoverEvent = function (isTooltipActive, activeTooltipIndex) {
         if (!isTooltipActive)
             return;
         if (typeof activeDotsState.active === 'number' &&
@@ -230,30 +227,30 @@ const Chart = (props) => {
             });
         }
         if (typeof activeTooltipIndex === 'number' && typeof activeDotsState.prev === 'number') {
-            setActiveDotsState((prev) => ({
+            setActiveDotsState(function (prev) { return ({
                 prev: prev.active,
                 active: activeTooltipIndex,
-            }));
+            }); });
         }
     };
-    const mouseMove = (e) => {
-        if (!state?.tooltip)
+    var mouseMove = function (e) {
+        if (!(state === null || state === void 0 ? void 0 : state.tooltip))
             return;
         arrowTooltipEvent(e.activeCoordinate);
         hoverEvent(e.isTooltipActive, e.activeTooltipIndex);
         leaveEvent(e.isTooltipActive);
     };
-    const mouseLeave = (e) => {
-        if (!state?.tooltip)
+    var mouseLeave = function (e) {
+        if (!(state === null || state === void 0 ? void 0 : state.tooltip))
             return;
         leaveEvent(e.isTooltipActive);
     };
     if (!data || !charts || !state)
         return null;
-    return (React.createElement("div", { className: styles.coreChart, ref: svgRef, id: state?.id || '', style: { width: '100%', height: '100%' } },
-        React.createElement(ResponsiveContainer, { debounce: state?.responsiveContainer?.debounce ? state.responsiveContainer.debounce : 0, width: '100%' },
-            React.createElement(ComposedChart, { ...state?.composeChart, onMouseMove: mouseMove, onMouseLeave: mouseLeave, data: data },
-                React.createElement("defs", null, renderGradient),
+    return (React__default.default.createElement("div", { className: styles__default.default.coreChart, ref: svgRef, id: (state === null || state === void 0 ? void 0 : state.id) || '', style: { width: '100%', height: '100%' } },
+        React__default.default.createElement(recharts.ResponsiveContainer, { debounce: ((_a = state === null || state === void 0 ? void 0 : state.responsiveContainer) === null || _a === void 0 ? void 0 : _a.debounce) ? state.responsiveContainer.debounce : 0, width: '100%' },
+            React__default.default.createElement(recharts.ComposedChart, tslib.__assign({}, state === null || state === void 0 ? void 0 : state.composeChart, { onMouseMove: mouseMove, onMouseLeave: mouseLeave, data: data }),
+                React__default.default.createElement("defs", null, renderGradient),
                 state.cartesianGrid && renderCartesianGrid,
                 state.xAxis && renderXAxis,
                 state.yAxis && renderYAxis,
@@ -263,4 +260,4 @@ const Chart = (props) => {
                 state.legend && renderLegend))));
 };
 
-export { Chart };
+exports.Chart = Chart;

package/chart/cssm/components/CustomizedLabel.js

@@ -1,12 +1,18 @@
-import React from 'react';
-import { usePathBar } from '../hooks/usePathBar/index.js';
-import '../hooks/usePathBar/utils/getRadius.js';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var hooks_usePathBar_index = require('../hooks/usePathBar/index.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-const CustomizedLabel = ({ x, y, value, offset, radius, height, width, formatter, }) => {
-    const [initHeight] = usePathBar({ radius, height });
-    return (React.createElement("text", { x: x + width / 2, y: y + height - (initHeight + offset), width: width, height: initHeight, textAnchor: 'middle' },
-        React.createElement("tspan", { x: x + width / 2 }, formatter ? formatter(value) : value)));
+var CustomizedLabel = function (_a) {
+    var x = _a.x, y = _a.y, value = _a.value, offset = _a.offset, radius = _a.radius, height = _a.height, width = _a.width, formatter = _a.formatter;
+    var initHeight = hooks_usePathBar_index.usePathBar({ radius: radius, height: height })[0];
+    return (React__default.default.createElement("text", { x: x + width / 2, y: y + height - (initHeight + offset), width: width, height: initHeight, textAnchor: 'middle' },
+        React__default.default.createElement("tspan", { x: x + width / 2 }, formatter ? formatter(value) : value)));
 };
 
-export { CustomizedLabel };
+exports.CustomizedLabel = CustomizedLabel;