@semcore/d3-chart 16.0.2-prerelease.4 → 16.0.3-prerelease.0

package/lib/esm/component/Chart/ScatterPlotChart.mjs

@@ -2,26 +2,30 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React from "react";
 import { createComponent } from "@semcore/core";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import { Text } from "@semcore/typography";
 import { scaleTime, scaleLinear } from "d3-scale";
+import React from "react";
 import ScatterPlot from "../../ScatterPlot.mjs";
 import { getScatterPlotRadius, minMax } from "../../utils.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
-import { Text } from "@semcore/typography";
-import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 var ScatterPlotChartComponent = /* @__PURE__ */ function(_AbstractChart) {
-  _inherits(ScatterPlotChartComponent2, _AbstractChart);
-  var _super = _createSuper(ScatterPlotChartComponent2);
   function ScatterPlotChartComponent2() {
     _classCallCheck(this, ScatterPlotChartComponent2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, ScatterPlotChartComponent2, arguments);
   }
-  _createClass(ScatterPlotChartComponent2, [{
+  _inherits(ScatterPlotChartComponent2, _AbstractChart);
+  return _createClass(ScatterPlotChartComponent2, [{
     key: "dataKeys",
     get: function get() {
       var _this$props = this.props, data = _this$props.data, groupKey = _this$props.groupKey, valueKey = _this$props.valueKey;
@@ -112,9 +116,9 @@ var ScatterPlotChartComponent = /* @__PURE__ */ function(_AbstractChart) {
               color: item.color
             }, "Data"), /* @__PURE__ */ React.createElement(Text, {
               tag: "div"
-            }, "X axis ", _this.tooltipValueFormatter(data[index][x])), /* @__PURE__ */ React.createElement(Text, {
+            }, "X axis", _this.tooltipValueFormatter(data[index][x])), /* @__PURE__ */ React.createElement(Text, {
               tag: "div"
-            }, "Y axis ", _this.tooltipValueFormatter(data[index][y])))
+            }, "Y axis", _this.tooltipValueFormatter(data[index][y])))
           };
         });
       });
@@ -127,7 +131,6 @@ var ScatterPlotChartComponent = /* @__PURE__ */ function(_AbstractChart) {
       });
     }
   }]);
-  return ScatterPlotChartComponent2;
 }(AbstractChart);
 _defineProperty(ScatterPlotChartComponent, "displayName", "Chart.ScatterPlot");
 _defineProperty(ScatterPlotChartComponent, "defaultProps", {

package/lib/esm/component/Chart/VennChart.mjs

@@ -1,24 +1,28 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React from "react";
 import { createComponent } from "@semcore/core";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import { Text } from "@semcore/typography";
 import { scaleLinear } from "d3-scale";
+import React from "react";
 import Venn from "../../Venn.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
-import { Text } from "@semcore/typography";
-import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 var VennChartComponent = /* @__PURE__ */ function(_AbstractChart) {
-  _inherits(VennChartComponent2, _AbstractChart);
-  var _super = _createSuper(VennChartComponent2);
   function VennChartComponent2() {
     _classCallCheck(this, VennChartComponent2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, VennChartComponent2, arguments);
   }
-  _createClass(VennChartComponent2, [{
+  _inherits(VennChartComponent2, _AbstractChart);
+  return _createClass(VennChartComponent2, [{
     key: "xScale",
     get: function get() {
       var xScale = this.asProps.xScale;
@@ -125,7 +129,6 @@ var VennChartComponent = /* @__PURE__ */ function(_AbstractChart) {
       });
     }
   }]);
-  return VennChartComponent2;
 }(AbstractChart);
 _defineProperty(VennChartComponent, "displayName", "Chart.Venn");
 _defineProperty(VennChartComponent, "defaultProps", {

package/lib/esm/component/Chart/index.mjs

@@ -1,14 +1,14 @@
-import { LineChart } from "./LineChart.mjs";
+import { AreaChart } from "./AreaChart.mjs";
 import { BarChart } from "./BarChart.mjs";
+import { BubbleChart } from "./BubbleChart.mjs";
+import { CigaretteChart } from "./CigaretteChart.mjs";
 import { CompactHorizontalBarChart } from "./CompactHorizontalBarChart.mjs";
+import { DonutChart } from "./DonutChart.mjs";
 import { HistogramChart } from "./HistogramChart.mjs";
+import { LineChart } from "./LineChart.mjs";
+import { RadarChart } from "./RadarChart.mjs";
 import { ScatterPlotChart } from "./ScatterPlotChart.mjs";
-import { AreaChart } from "./AreaChart.mjs";
-import { BubbleChart } from "./BubbleChart.mjs";
-import { DonutChart } from "./DonutChart.mjs";
 import { VennChart } from "./VennChart.mjs";
-import { RadarChart } from "./RadarChart.mjs";
-import { CigaretteChart } from "./CigaretteChart.mjs";
 const index = {
   Line: LineChart,
   Bar: BarChart,

package/lib/esm/component/ChartLegend/BaseLegend.mjs

@@ -1,41 +1,65 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { Component } from "@semcore/core";
 import { makeDataHintsHandlers } from "../../a11y/hints.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 var BaseLegend = /* @__PURE__ */ function(_Component) {
-  _inherits(BaseLegend2, _Component);
-  var _super = _createSuper(BaseLegend2);
   function BaseLegend2() {
     var _this;
     _classCallCheck(this, BaseLegend2);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "onChangeLegendItem", function(id, checked) {
+    _this = _callSuper(this, BaseLegend2, [].concat(args));
+    _defineProperty(_this, "onChangeLegendItem", function(id, checked) {
       var _this$props$onChangeV, _this$props;
-      (_this$props$onChangeV = (_this$props = _this.props).onChangeVisibleItem) === null || _this$props$onChangeV === void 0 ? void 0 : _this$props$onChangeV.call(_this$props, id, checked);
+      (_this$props$onChangeV = (_this$props = _this.props).onChangeVisibleItem) === null || _this$props$onChangeV === void 0 || _this$props$onChangeV.call(_this$props, id, checked);
+      if (checked) {
+        var _this$props$onMouseEn, _this$props2;
+        (_this$props$onMouseEn = (_this$props2 = _this.props).onMouseEnterItem) === null || _this$props$onMouseEn === void 0 || _this$props$onMouseEn.call(_this$props2, id);
+      } else {
+        var _this$props$onMouseLe, _this$props3;
+        (_this$props$onMouseLe = (_this$props3 = _this.props).onMouseLeaveItem) === null || _this$props$onMouseLe === void 0 || _this$props$onMouseLe.call(_this$props3, id);
+      }
+    });
+    _defineProperty(_this, "onFocusLegendItem", function(checked) {
+      return function(id) {
+        var _this$props$onMouseEn2, _this$props5;
+        if (!checked) {
+          var _this$props$onMouseLe2, _this$props4;
+          return (_this$props$onMouseLe2 = (_this$props4 = _this.props).onMouseLeaveItem) === null || _this$props$onMouseLe2 === void 0 ? void 0 : _this$props$onMouseLe2.call(_this$props4, id);
+        }
+        (_this$props$onMouseEn2 = (_this$props5 = _this.props).onMouseEnterItem) === null || _this$props$onMouseEn2 === void 0 || _this$props$onMouseEn2.call(_this$props5, id);
+      };
+    });
+    _defineProperty(_this, "onBlurLegendItem", function(id) {
+      var _this$props$onMouseLe3, _this$props6;
+      (_this$props$onMouseLe3 = (_this$props6 = _this.props).onMouseLeaveItem) === null || _this$props$onMouseLe3 === void 0 || _this$props$onMouseLe3.call(_this$props6, id);
     });
-    _defineProperty(_assertThisInitialized(_this), "bindOnMouseEnterItem", function(id) {
+    _defineProperty(_this, "bindOnMouseEnterItem", function(id) {
       return function(e) {
-        var _this$props$onMouseEn, _this$props2;
-        (_this$props$onMouseEn = (_this$props2 = _this.props).onMouseEnterItem) === null || _this$props$onMouseEn === void 0 ? void 0 : _this$props$onMouseEn.call(_this$props2, id, e);
+        var _this$props$onMouseEn3, _this$props7;
+        (_this$props$onMouseEn3 = (_this$props7 = _this.props).onMouseEnterItem) === null || _this$props$onMouseEn3 === void 0 || _this$props$onMouseEn3.call(_this$props7, id, e);
       };
     });
-    _defineProperty(_assertThisInitialized(_this), "bindOnMouseLeaveItem", function(id) {
+    _defineProperty(_this, "bindOnMouseLeaveItem", function(id) {
       return function(e) {
-        var _this$props$onMouseLe, _this$props3;
-        (_this$props$onMouseLe = (_this$props3 = _this.props).onMouseLeaveItem) === null || _this$props$onMouseLe === void 0 ? void 0 : _this$props$onMouseLe.call(_this$props3, id, e);
+        var _this$props$onMouseLe4, _this$props8;
+        (_this$props$onMouseLe4 = (_this$props8 = _this.props).onMouseLeaveItem) === null || _this$props$onMouseLe4 === void 0 || _this$props$onMouseLe4.call(_this$props8, id, e);
       };
     });
     return _this;
   }
-  _createClass(BaseLegend2, [{
+  _inherits(BaseLegend2, _Component);
+  return _createClass(BaseLegend2, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.setHints();
@@ -53,7 +77,7 @@ var BaseLegend = /* @__PURE__ */ function(_Component) {
       var _this$asProps = this.asProps, items = _this$asProps.items, dataHints = _this$asProps.dataHints;
       var dataHintsHandler = dataHints ? makeDataHintsHandlers(dataHints) : void 0;
       items.forEach(function(legendItem) {
-        dataHintsHandler === null || dataHintsHandler === void 0 ? void 0 : dataHintsHandler.labelKey("value", legendItem.id, legendItem.label);
+        dataHintsHandler === null || dataHintsHandler === void 0 || dataHintsHandler.labelKey("value", legendItem.id, legendItem.label);
       });
     }
   }, {
@@ -73,8 +97,10 @@ var BaseLegend = /* @__PURE__ */ function(_Component) {
       return _objectSpread(_objectSpread({}, line), {}, {
         shape,
         size,
+        onFocusLegendItem: this.onFocusLegendItem(line.checked),
+        onBlurLegendItem: this.onBlurLegendItem,
         onChangeLegendItem: this.onChangeLegendItem,
-        onMouseEnter: this.bindOnMouseEnterItem(line.id),
+        onMouseEnter: line.checked ? this.bindOnMouseEnterItem(line.id) : void 0,
         onMouseLeave: this.bindOnMouseLeaveItem(line.id),
         style: {
           gridRowStart: "".concat(index + 1),
@@ -84,7 +110,6 @@ var BaseLegend = /* @__PURE__ */ function(_Component) {
       });
     }
   }]);
-  return BaseLegend2;
 }(Component);
 export {
   BaseLegend

package/lib/esm/component/ChartLegend/LegendFlex/LegendFlex.mjs

@@ -1,41 +1,45 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled, createComponent, assignProps } from "@semcore/core";
-import React from "react";
-import { Flex } from "@semcore/flex-box";
-import { LegendItemComponent } from "../LegendItem/LegendItem.mjs";
-import Divider from "@semcore/divider";
+import { createComponent, sstyled, assignProps } from "@semcore/core";
 import Checkbox from "@semcore/checkbox";
-import { BaseLegend } from "../BaseLegend.mjs";
-import { localizedMessages } from "../../../translations/__intergalactic-dynamic-locales.mjs";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import Divider from "@semcore/divider";
+import { Flex } from "@semcore/flex-box";
+import React from "react";
+import { localizedMessages } from "../../../translations/__intergalactic-dynamic-locales.mjs";
+import { BaseLegend } from "../BaseLegend.mjs";
+import { LegendItemComponent } from "../LegendItem/LegendItem.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 /*!__reshadow-styles__:"./legend-flex.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SLegendFlex_ww5w4_gg_._direction_row_ww5w4_gg_{align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:8px 16px}.___SLegendFlex_ww5w4_gg_._direction_column_ww5w4_gg_{align-items:flex-start;flex-wrap:wrap;gap:8px}",
+    ".___SLegendFlex_pc68p_gg_._direction_row_pc68p_gg_{align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:8px 16px}.___SLegendFlex_pc68p_gg_._direction_column_pc68p_gg_{align-items:flex-start;flex-wrap:wrap;gap:8px}",
     /*__inner_css_end__*/
-    "ww5w4_gg_"
+    "pc68p_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendFlex": "___SLegendFlex_ww5w4_gg_",
-    "_direction_row": "_direction_row_ww5w4_gg_",
-    "_direction_column": "_direction_column_ww5w4_gg_"
+    "__SLegendFlex": "___SLegendFlex_pc68p_gg_",
+    "_direction_row": "_direction_row_pc68p_gg_",
+    "_direction_column": "_direction_column_pc68p_gg_"
   })
 );
 var LegendFlexRoot = /* @__PURE__ */ function(_BaseLegend) {
-  _inherits(LegendFlexRoot2, _BaseLegend);
-  var _super = _createSuper(LegendFlexRoot2);
   function LegendFlexRoot2() {
     _classCallCheck(this, LegendFlexRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, LegendFlexRoot2, arguments);
   }
-  _createClass(LegendFlexRoot2, [{
+  _inherits(LegendFlexRoot2, _BaseLegend);
+  return _createClass(LegendFlexRoot2, [{
     key: "renderTrend",
     value: function renderTrend() {
       var _ref3 = this.asProps, onTrendIsVisibleChange = _ref3.onTrendIsVisibleChange, trendIsVisible = _ref3.trendIsVisible, trendLabel = _ref3.trendLabel, size = _ref3.size, getI18nText = _ref3.getI18nText;
@@ -66,7 +70,6 @@ var LegendFlexRoot = /* @__PURE__ */ function(_BaseLegend) {
       })), withTrend && this.renderTrend(), suffix ? suffix : null);
     }
   }]);
-  return LegendFlexRoot2;
 }(BaseLegend);
 _defineProperty(LegendFlexRoot, "displayName", "LegendFlex");
 _defineProperty(LegendFlexRoot, "style", style);

package/lib/esm/component/ChartLegend/LegendItem/LegendItem.mjs

@@ -2,57 +2,61 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
-import React from "react";
-import { Box, Flex } from "@semcore/flex-box";
+import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
 import Checkbox from "@semcore/checkbox";
-import { Text } from "@semcore/typography";
-import { StaticShapes } from "./LegendItem.type.mjs";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import { Flex, Box } from "@semcore/flex-box";
+import { Text } from "@semcore/typography";
+import React from "react";
+import { StaticShapes } from "./LegendItem.type.mjs";
 import { PatternSymbol } from "../../../Pattern.mjs";
 import { getChartDefaultColorName } from "../../../utils.mjs";
 var _excluded = ["id", "checked", "color", "onChangeLegendItem", "shape"];
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 /*!__reshadow-styles__:"./legend-item.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SLegendItem_11zva_gg_{min-width:0;align-items:flex-start}@media (hover:hover){.___SLegendItem_11zva_gg_:hover{cursor:pointer}.___SLegendItem_11zva_gg_.__disabled_11zva_gg_:hover{cursor:default}}.___SPointShape_11zva_gg_.__color_11zva_gg_{background-color:var(--color_11zva);margin-right:8px;flex-shrink:0}.___SPointShape_11zva_gg_._shape_Circle_11zva_gg_._size_l_11zva_gg_{width:16px;height:16px;border-radius:8px;margin-top:4px}.___SPointShape_11zva_gg_._shape_Circle_11zva_gg_._size_m_11zva_gg_{width:12px;height:12px;border-radius:6px;margin-top:4px}.___SPointShape_11zva_gg_._shape_Line_11zva_gg_._size_l_11zva_gg_{width:16px;height:4px;border-radius:3px;margin-top:9px}.___SPointShape_11zva_gg_._shape_Line_11zva_gg_._size_m_11zva_gg_{width:12px;height:4px;border-radius:3px;margin-top:8px}.___SPointShape_11zva_gg_._shape_Square_11zva_gg_._size_l_11zva_gg_{width:16px;height:16px;border-radius:2px;margin-top:4px}.___SPointShape_11zva_gg_._shape_Square_11zva_gg_._size_m_11zva_gg_{width:12px;height:12px;border-radius:2px;margin-top:4px}.___SPointShape_11zva_gg_._shape_Pattern_11zva_gg_{background-color:transparent;margin-right:4px}.___SIcon_11zva_gg_{line-height:0;margin-right:4px}.___SIcon_11zva_gg_._size_l_11zva_gg_{margin-top:4px}.___SIcon_11zva_gg_._size_m_11zva_gg_{margin-top:2px}.___SLabel_11zva_gg_{min-width:0}.___SAdditionalLabel_11zva_gg_._size_l_11zva_gg_,.___SCount_11zva_gg_._size_l_11zva_gg_,.___SLabel_11zva_gg_._size_l_11zva_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SAdditionalLabel_11zva_gg_._size_m_11zva_gg_,.___SCount_11zva_gg_._size_m_11zva_gg_,.___SLabel_11zva_gg_._size_m_11zva_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SAdditionalLabel_11zva_gg_,.___SCount_11zva_gg_{margin-left:4px}.___SAdditionalLabel_11zva_gg_{white-space:nowrap;display:flex;align-items:flex-start}.___SAdditionalLabel_11zva_gg_::before{content:"";display:inline-block;background-color:var(--intergalactic-text-secondary, #6c6e79);height:4px;width:4px;border-radius:2px;margin-right:4px}.___SAdditionalLabel_11zva_gg_._size_l_11zva_gg_::before{margin-top:10px}.___SAdditionalLabel_11zva_gg_._size_m_11zva_gg_::before{margin-top:8px}.___SPatternSymbol_11zva_gg_{transform:scale(.8)}',
+    '.___SLegendItem_1feua_gg_{min-width:0;align-items:flex-start}@media (hover:hover){.___SLegendItem_1feua_gg_:hover{cursor:pointer}.___SLegendItem_1feua_gg_.__disabled_1feua_gg_:hover{cursor:default}}.___SPointShape_1feua_gg_.__color_1feua_gg_{background-color:var(--color_1feua);margin-right:8px;flex-shrink:0}.___SPointShape_1feua_gg_._shape_Circle_1feua_gg_._size_l_1feua_gg_{width:16px;height:16px;border-radius:8px;margin-top:4px}.___SPointShape_1feua_gg_._shape_Circle_1feua_gg_._size_m_1feua_gg_{width:12px;height:12px;border-radius:6px;margin-top:4px}.___SPointShape_1feua_gg_._shape_Line_1feua_gg_._size_l_1feua_gg_{width:16px;height:4px;border-radius:3px;margin-top:9px}.___SPointShape_1feua_gg_._shape_Line_1feua_gg_._size_m_1feua_gg_{width:12px;height:4px;border-radius:3px;margin-top:8px}.___SPointShape_1feua_gg_._shape_Square_1feua_gg_._size_l_1feua_gg_{width:16px;height:16px;border-radius:2px;margin-top:4px}.___SPointShape_1feua_gg_._shape_Square_1feua_gg_._size_m_1feua_gg_{width:12px;height:12px;border-radius:2px;margin-top:4px}.___SPointShape_1feua_gg_._shape_Pattern_1feua_gg_{background-color:transparent;margin-right:4px}.___SIcon_1feua_gg_{line-height:0;margin-right:4px}.___SIcon_1feua_gg_._size_l_1feua_gg_{margin-top:4px}.___SIcon_1feua_gg_._size_m_1feua_gg_{margin-top:2px}.___SLabel_1feua_gg_{min-width:0}.___SAdditionalLabel_1feua_gg_._size_l_1feua_gg_,.___SCount_1feua_gg_._size_l_1feua_gg_,.___SLabel_1feua_gg_._size_l_1feua_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SAdditionalLabel_1feua_gg_._size_m_1feua_gg_,.___SCount_1feua_gg_._size_m_1feua_gg_,.___SLabel_1feua_gg_._size_m_1feua_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SAdditionalLabel_1feua_gg_,.___SCount_1feua_gg_{margin-left:4px}.___SAdditionalLabel_1feua_gg_{white-space:nowrap;display:flex;align-items:flex-start}.___SAdditionalLabel_1feua_gg_::before{content:"";display:inline-block;background-color:var(--intergalactic-text-secondary, #6c6e79);height:4px;width:4px;border-radius:2px;margin-right:4px}.___SAdditionalLabel_1feua_gg_._size_l_1feua_gg_::before{margin-top:10px}.___SAdditionalLabel_1feua_gg_._size_m_1feua_gg_::before{margin-top:8px}.___SPatternSymbol_1feua_gg_{transform:scale(.8)}',
     /*__inner_css_end__*/
-    "11zva_gg_"
+    "1feua_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendItem": "___SLegendItem_11zva_gg_",
-    "_disabled": "__disabled_11zva_gg_",
-    "__SPointShape": "___SPointShape_11zva_gg_",
-    "_color": "__color_11zva_gg_",
-    "--color": "--color_11zva",
-    "_shape_Circle": "_shape_Circle_11zva_gg_",
-    "_size_l": "_size_l_11zva_gg_",
-    "_size_m": "_size_m_11zva_gg_",
-    "_shape_Line": "_shape_Line_11zva_gg_",
-    "_shape_Square": "_shape_Square_11zva_gg_",
-    "_shape_Pattern": "_shape_Pattern_11zva_gg_",
-    "__SIcon": "___SIcon_11zva_gg_",
-    "__SLabel": "___SLabel_11zva_gg_",
-    "__SAdditionalLabel": "___SAdditionalLabel_11zva_gg_",
-    "__SCount": "___SCount_11zva_gg_",
-    "__SPatternSymbol": "___SPatternSymbol_11zva_gg_"
+    "__SLegendItem": "___SLegendItem_1feua_gg_",
+    "_disabled": "__disabled_1feua_gg_",
+    "__SPointShape": "___SPointShape_1feua_gg_",
+    "_color": "__color_1feua_gg_",
+    "--color": "--color_1feua",
+    "_shape_Circle": "_shape_Circle_1feua_gg_",
+    "_size_l": "_size_l_1feua_gg_",
+    "_size_m": "_size_m_1feua_gg_",
+    "_shape_Line": "_shape_Line_1feua_gg_",
+    "_shape_Square": "_shape_Square_1feua_gg_",
+    "_shape_Pattern": "_shape_Pattern_1feua_gg_",
+    "__SIcon": "___SIcon_1feua_gg_",
+    "__SLabel": "___SLabel_1feua_gg_",
+    "__SAdditionalLabel": "___SAdditionalLabel_1feua_gg_",
+    "__SCount": "___SCount_1feua_gg_",
+    "__SPatternSymbol": "___SPatternSymbol_1feua_gg_"
   })
 );
 var enhance = [resolveColorEnhance(), uniqueIDEnhancement()];
 var LegendItemRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(LegendItemRoot2, _Component);
-  var _super = _createSuper(LegendItemRoot2);
   function LegendItemRoot2() {
     _classCallCheck(this, LegendItemRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, LegendItemRoot2, arguments);
   }
-  _createClass(LegendItemRoot2, [{
+  _inherits(LegendItemRoot2, _Component);
+  return _createClass(LegendItemRoot2, [{
     key: "getUniqueID",
     value: function getUniqueID() {
       var uid = this.asProps.uid;
@@ -61,18 +65,24 @@ var LegendItemRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getShapeProps",
     value: function getShapeProps() {
-      var _this$asProps = this.asProps, checked = _this$asProps.checked, color = _this$asProps.color, shape = _this$asProps.shape, label = _this$asProps.label, id = _this$asProps.id, size = _this$asProps.size, resolveColor = _this$asProps.resolveColor, patterns = _this$asProps.patterns, onChangeLegendItem = _this$asProps.onChangeLegendItem;
+      var _this$asProps = this.asProps, checked = _this$asProps.checked, color = _this$asProps.color, shape = _this$asProps.shape, label = _this$asProps.label, id = _this$asProps.id, size = _this$asProps.size, resolveColor = _this$asProps.resolveColor, patterns = _this$asProps.patterns, onChangeLegendItem = _this$asProps.onChangeLegendItem, onFocusLegendItem = _this$asProps.onFocusLegendItem, onBlurLegendItem = _this$asProps.onBlurLegendItem;
       return {
         label,
         shape,
         checked,
-        color: resolveColor(color),
-        patternKey: color,
+        "color": resolveColor(color),
+        "patternKey": color,
         patterns,
         size,
-        onChange: function onChange(value) {
+        "onChange": function onChange(value) {
           onChangeLegendItem(id, value);
         },
+        "onFocus": function onFocus() {
+          return onFocusLegendItem(id);
+        },
+        "onBlur": function onBlur() {
+          return onBlurLegendItem(id);
+        },
         "aria-labelledby": shape === "Checkbox" ? this.getUniqueID() : null
       };
     }
@@ -132,7 +142,6 @@ var LegendItemRoot = /* @__PURE__ */ function(_Component) {
       }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {})));
     }
   }]);
-  return LegendItemRoot2;
 }(Component);
 _defineProperty(LegendItemRoot, "displayName", "LegendItem");
 _defineProperty(LegendItemRoot, "style", style);
@@ -143,10 +152,10 @@ _defineProperty(LegendItemRoot, "defaultProps", function() {
   };
 });
 function Shape(props) {
-  var _ref2 = arguments[0], _ref10;
+  var _ref2 = arguments[0], _ref0;
   var SPointShape = Box;
   var SPatternSymbol = PatternSymbol;
-  var styles = props.styles, size = props.size, shape = props.shape, checked = props.checked, color = props.color, _props$patternKey = props.patternKey, patternKey = _props$patternKey === void 0 ? getChartDefaultColorName(0) : _props$patternKey, Children = props.Children, hasChildren = props.children, patterns = props.patterns, onChange = props.onChange;
+  var styles = props.styles, size = props.size, shape = props.shape, checked = props.checked, color = props.color, _props$patternKey = props.patternKey, patternKey = _props$patternKey === void 0 ? getChartDefaultColorName(0) : _props$patternKey, Children = props.Children, hasChildren = props.children, patterns = props.patterns, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur;
   if (hasChildren) {
     return /* @__PURE__ */ React.createElement(Children, null);
   }
@@ -167,6 +176,8 @@ function Shape(props) {
       "checked": checked,
       "theme": checked ? color : void 0,
       "onChange": onChange,
+      "onFocus": onFocus,
+      "onBlur": onBlur,
       "aria-labelledby": props["aria-labelledby"]
     })), patterns && /* @__PURE__ */ React.createElement(Box, _ref9.cn("Box", {
       "mt": "2px",
@@ -177,54 +188,54 @@ function Shape(props) {
       "aria-hidden": true
     }))));
   }
-  return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(SPointShape, _ref10.cn("SPointShape", _objectSpread({}, assignProps({}, _ref2))), /* @__PURE__ */ React.createElement(Children, _ref10.cn("Children", {})));
+  return _ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(SPointShape, _ref0.cn("SPointShape", _objectSpread({}, assignProps({}, _ref2))), /* @__PURE__ */ React.createElement(Children, _ref0.cn("Children", {})));
 }
-function Icon(_ref15) {
-  var _ref3 = arguments[0], _ref11;
-  var styles = _ref15.styles, hasChildren = _ref15.children, Children = _ref15.Children;
+function Icon(_ref13) {
+  var _ref3 = arguments[0], _ref1;
+  var styles = _ref13.styles, hasChildren = _ref13.children, Children = _ref13.Children;
   var SIcon = Box;
   if (!hasChildren) {
     return null;
   }
-  return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(SIcon, _ref11.cn("SIcon", _objectSpread({}, assignProps({
+  return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(SIcon, _ref1.cn("SIcon", _objectSpread({}, assignProps({
     "tag": "span"
-  }, _ref3))), /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})));
+  }, _ref3))), /* @__PURE__ */ React.createElement(Children, _ref1.cn("Children", {})));
 }
 Icon.displayName = "Icon";
-function Label(_ref16) {
-  var _ref4 = arguments[0], _ref12;
-  var styles = _ref16.styles, hasChildren = _ref16.children, Children = _ref16.Children;
+function Label(_ref14) {
+  var _ref4 = arguments[0], _ref10;
+  var styles = _ref14.styles, hasChildren = _ref14.children, Children = _ref14.Children;
   var SLabel = Text;
   if (!hasChildren) {
     return null;
   }
-  return _ref12 = sstyled(styles), /* @__PURE__ */ React.createElement(SLabel, _ref12.cn("SLabel", _objectSpread({}, assignProps({
+  return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(SLabel, _ref10.cn("SLabel", _objectSpread({}, assignProps({
     "use": "primary"
-  }, _ref4))), /* @__PURE__ */ React.createElement(Children, _ref12.cn("Children", {})));
+  }, _ref4))), /* @__PURE__ */ React.createElement(Children, _ref10.cn("Children", {})));
 }
 Label.displayName = "Label";
-function AdditionalLabel(_ref17) {
-  var _ref5 = arguments[0], _ref13;
-  var styles = _ref17.styles, hasChildren = _ref17.children, Children = _ref17.Children;
+function AdditionalLabel(_ref15) {
+  var _ref5 = arguments[0], _ref11;
+  var styles = _ref15.styles, hasChildren = _ref15.children, Children = _ref15.Children;
   var SAdditionalLabel = Text;
   if (!hasChildren) {
     return null;
   }
-  return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(SAdditionalLabel, _ref13.cn("SAdditionalLabel", _objectSpread({}, assignProps({
+  return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(SAdditionalLabel, _ref11.cn("SAdditionalLabel", _objectSpread({}, assignProps({
     "use": "secondary"
-  }, _ref5))), /* @__PURE__ */ React.createElement(Children, _ref13.cn("Children", {})));
+  }, _ref5))), /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})));
 }
 AdditionalLabel.displayName = "AdditionalLabel";
-function Count(_ref18) {
-  var _ref6 = arguments[0], _ref14;
-  var styles = _ref18.styles, hasChildren = _ref18.children, Children = _ref18.Children;
+function Count(_ref16) {
+  var _ref6 = arguments[0], _ref12;
+  var styles = _ref16.styles, hasChildren = _ref16.children, Children = _ref16.Children;
   var SCount = Text;
   if (!hasChildren) {
     return null;
   }
-  return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(SCount, _ref14.cn("SCount", _objectSpread({}, assignProps({
+  return _ref12 = sstyled(styles), /* @__PURE__ */ React.createElement(SCount, _ref12.cn("SCount", _objectSpread({}, assignProps({
     "use": "secondary"
-  }, _ref6))), /* @__PURE__ */ React.createElement(Children, _ref14.cn("Children", {})));
+  }, _ref6))), /* @__PURE__ */ React.createElement(Children, _ref12.cn("Children", {})));
 }
 Count.displayName = "Count";
 var LegendItemComponent = createComponent(LegendItemRoot, {

package/lib/esm/component/ChartLegend/LegendTable/LegendTable.mjs

@@ -1,39 +1,43 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled, createComponent, assignProps } from "@semcore/core";
-import React from "react";
+import { createComponent, sstyled, assignProps } from "@semcore/core";
 import { Box } from "@semcore/flex-box";
-import { LegendItemComponent } from "../LegendItem/LegendItem.mjs";
+import React from "react";
 import { BaseLegend } from "../BaseLegend.mjs";
+import { LegendItemComponent } from "../LegendItem/LegendItem.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 /*!__reshadow-styles__:"./legend-table.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SLegendTable_grj2v_gg_.__columns-count_grj2v_gg_{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;display:grid;grid-template-columns:auto .2fr;align-items:center;height:-moz-fit-content;height:fit-content;grid-column-gap:16px;grid-row-gap:8px}.___SColumnItem_grj2v_gg_._size_l_grj2v_gg_{font-size:var(--intergalactic-fs-300, 16px);text-align:right}.___SColumnItem_grj2v_gg_._size_m_grj2v_gg_{font-size:var(--intergalactic-fs-200, 14px);text-align:right}',
+    '.___SLegendTable_e4nzj_gg_.__columns-count_e4nzj_gg_{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;display:grid;grid-template-columns:auto .2fr;align-items:center;height:-moz-fit-content;height:fit-content;grid-column-gap:16px;grid-row-gap:8px}.___SColumnItem_e4nzj_gg_._size_l_e4nzj_gg_{font-size:var(--intergalactic-fs-300, 16px);text-align:right}.___SColumnItem_e4nzj_gg_._size_m_e4nzj_gg_{font-size:var(--intergalactic-fs-200, 14px);text-align:right}',
     /*__inner_css_end__*/
-    "grj2v_gg_"
+    "e4nzj_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendTable": "___SLegendTable_grj2v_gg_",
-    "_columns-count": "__columns-count_grj2v_gg_",
-    "__SColumnItem": "___SColumnItem_grj2v_gg_",
-    "_size_l": "_size_l_grj2v_gg_",
-    "_size_m": "_size_m_grj2v_gg_"
+    "__SLegendTable": "___SLegendTable_e4nzj_gg_",
+    "_columns-count": "__columns-count_e4nzj_gg_",
+    "__SColumnItem": "___SColumnItem_e4nzj_gg_",
+    "_size_l": "_size_l_e4nzj_gg_",
+    "_size_m": "_size_m_e4nzj_gg_"
   })
 );
 var LegendTableRoot = /* @__PURE__ */ function(_BaseLegend) {
-  _inherits(LegendTableRoot2, _BaseLegend);
-  var _super = _createSuper(LegendTableRoot2);
   function LegendTableRoot2() {
     _classCallCheck(this, LegendTableRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, LegendTableRoot2, arguments);
   }
-  _createClass(LegendTableRoot2, [{
+  _inherits(LegendTableRoot2, _BaseLegend);
+  return _createClass(LegendTableRoot2, [{
     key: "render",
     value: function render() {
       var _ref = this.asProps, _ref3, _items$;
@@ -43,15 +47,15 @@ var LegendTableRoot = /* @__PURE__ */ function(_BaseLegend) {
       return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SLegendTable, _ref3.cn("SLegendTable", _objectSpread({}, assignProps({
         "columns-count": columnsCount + 1,
         "role": "group"
-      }, _ref))), items.map(function(_ref5, index) {
+      }, _ref))), items.map(function(_ref5, _index) {
         var id = _ref5.id, _ref5$columns = _ref5.columns, columns = _ref5$columns === void 0 ? [] : _ref5$columns;
         return /* @__PURE__ */ React.createElement(React.Fragment, {
           key: id
-        }, /* @__PURE__ */ React.createElement(Children, null), columns.map(function(item, index2) {
+        }, /* @__PURE__ */ React.createElement(Children, null), columns.map(function(item, index) {
           return /* @__PURE__ */ React.createElement(React.Fragment, {
-            key: "".concat(id, "__").concat(index2)
+            key: "".concat(id, "__").concat(index)
           }, /* @__PURE__ */ React.createElement(LegendTable.Column, {
-            index: index2,
+            index,
             size,
             styles
           }, item));
@@ -59,7 +63,6 @@ var LegendTableRoot = /* @__PURE__ */ function(_BaseLegend) {
       }));
     }
   }]);
-  return LegendTableRoot2;
 }(BaseLegend);
 _defineProperty(LegendTableRoot, "displayName", "LegendTable");
 _defineProperty(LegendTableRoot, "style", style);