@semcore/d3-chart 3.61.0-prerelease.1 → 3.61.0-prerelease.5

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

@@ -1,41 +1,63 @@
 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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
 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";
-var BaseLegend = /* @__PURE__ */ function(_Component) {
-  _inherits(BaseLegend2, _Component);
-  var _super = _createSuper(BaseLegend2);
+var BaseLegend = /* @__PURE__ */ (function(_Component) {
   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) {
-      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);
+    _classCallCheck(this, BaseLegend2);
+    _this = _callSuper(this, BaseLegend2, [].concat(args));
+    _defineProperty(_this, "onChangeLegendItem", function(shape) {
+      return function(id, checked) {
+        var _this$props$onChangeV, _this$props;
+        if (shape !== "Checkbox") return;
+        (_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(_assertThisInitialized(_this), "bindOnMouseEnterItem", function(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(_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 +75,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 +95,10 @@ var BaseLegend = /* @__PURE__ */ function(_Component) {
       return _objectSpread(_objectSpread({}, line), {}, {
         shape,
         size,
-        onChangeLegendItem: this.onChangeLegendItem,
-        onMouseEnter: this.bindOnMouseEnterItem(line.id),
+        onFocusLegendItem: this.onFocusLegendItem(line.checked),
+        onBlurLegendItem: this.onBlurLegendItem,
+        onChangeLegendItem: this.onChangeLegendItem(shape),
+        onMouseEnter: line.checked ? this.bindOnMouseEnterItem(line.id) : void 0,
         onMouseLeave: this.bindOnMouseLeaveItem(line.id),
         style: {
           gridRowStart: "".concat(index + 1),
@@ -84,8 +108,7 @@ var BaseLegend = /* @__PURE__ */ function(_Component) {
       });
     }
   }]);
-  return BaseLegend2;
-}(Component);
+})(Component);
 export {
   BaseLegend
 };

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

@@ -1,42 +1,40 @@
 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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
 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 } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, 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 { sstyled, assignProps, createComponent } from "@semcore/core";
+import { Flex } from "@semcore/base-components";
 import Checkbox from "@semcore/checkbox";
-import { BaseLegend } from "../BaseLegend.mjs";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import Divider from "@semcore/divider";
+import React from "react";
 import { localizedMessages } from "../../../translations/__intergalactic-dynamic-locales.mjs";
-import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+import { BaseLegend } from "../BaseLegend.mjs";
+import { LegendItemComponent } from "../LegendItem/LegendItem.mjs";
 /*!__reshadow-styles__:"./legend-flex.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SLegendFlex_ii5gp_gg_._direction_row_ii5gp_gg_{align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:8px 16px}.___SLegendFlex_ii5gp_gg_._direction_column_ii5gp_gg_{align-items:flex-start;flex-wrap:wrap;gap:8px}",
+    ".___SLegendFlex_5sqwz_gg_._direction_row_5sqwz_gg_{align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:8px 16px}.___SLegendFlex_5sqwz_gg_._direction_column_5sqwz_gg_{align-items:flex-start;flex-wrap:wrap;gap:8px}",
     /*__inner_css_end__*/
-    "ii5gp_gg_"
+    "5sqwz_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendFlex": "___SLegendFlex_ii5gp_gg_",
-    "_direction_row": "_direction_row_ii5gp_gg_",
-    "_direction_column": "_direction_column_ii5gp_gg_"
+    "__SLegendFlex": "___SLegendFlex_5sqwz_gg_",
+    "_direction_row": "_direction_row_5sqwz_gg_",
+    "_direction_column": "_direction_column_5sqwz_gg_"
   })
 );
-var LegendFlexRoot = /* @__PURE__ */ function(_BaseLegend) {
-  _inherits(LegendFlexRoot2, _BaseLegend);
-  var _super = _createSuper(LegendFlexRoot2);
+var LegendFlexRoot = /* @__PURE__ */ (function(_BaseLegend) {
   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;
@@ -55,7 +53,7 @@ var LegendFlexRoot = /* @__PURE__ */ function(_BaseLegend) {
       var SLegendFlex = Flex;
       var _this$asProps = this.asProps, styles = _this$asProps.styles, Children = _this$asProps.Children, direction = _this$asProps.direction, withTrend = _this$asProps.withTrend, suffix = _this$asProps.suffix, items = _this$asProps.items;
       var orientation = direction === "row" ? "vertical" : "horizontal";
-      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLegendFlex, _ref2.cn("SLegendFlex", _objectSpread({}, assignProps({
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SLegendFlex, _ref2.cn("SLegendFlex", _objectSpread({}, assignProps({
         "role": "group"
       }, _ref))), items.map(function(_ref4) {
         var id = _ref4.id;
@@ -67,8 +65,7 @@ var LegendFlexRoot = /* @__PURE__ */ function(_BaseLegend) {
       })), withTrend && this.renderTrend(), suffix ? suffix : null);
     }
   }]);
-  return LegendFlexRoot2;
-}(BaseLegend);
+})(BaseLegend);
 _defineProperty(LegendFlexRoot, "displayName", "LegendFlex");
 _defineProperty(LegendFlexRoot, "style", style);
 _defineProperty(LegendFlexRoot, "enhance", [i18nEnhance(localizedMessages)]);

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

@@ -2,18 +2,17 @@ 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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
 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 } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
-import React from "react";
-import { Box, Flex } from "@semcore/flex-box";
+import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
+import { Flex, Box } from "@semcore/base-components";
 import Checkbox from "@semcore/checkbox";
+import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import { Text } from "@semcore/typography";
+import React from "react";
 import { StaticShapes } from "./LegendItem.type.mjs";
-import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
 import { PatternSymbol } from "../../../Pattern.mjs";
 import { getChartDefaultColorName } from "../../../utils.mjs";
 var _excluded = ["id", "checked", "color", "onChangeLegendItem", "shape"];
@@ -22,38 +21,37 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SLegendItem_1n97b_gg_{min-width:0;align-items:flex-start}@media (hover:hover){.___SLegendItem_1n97b_gg_:hover{cursor:pointer}.___SLegendItem_1n97b_gg_.__disabled_1n97b_gg_:hover{cursor:default}}.___SPointShape_1n97b_gg_.__color_1n97b_gg_{background-color:var(--color_1n97b);margin-right:8px;flex-shrink:0}.___SPointShape_1n97b_gg_._shape_Circle_1n97b_gg_._size_l_1n97b_gg_{width:16px;height:16px;border-radius:8px;margin-top:4px}.___SPointShape_1n97b_gg_._shape_Circle_1n97b_gg_._size_m_1n97b_gg_{width:12px;height:12px;border-radius:6px;margin-top:4px}.___SPointShape_1n97b_gg_._shape_Line_1n97b_gg_._size_l_1n97b_gg_{width:16px;height:4px;border-radius:3px;margin-top:9px}.___SPointShape_1n97b_gg_._shape_Line_1n97b_gg_._size_m_1n97b_gg_{width:12px;height:4px;border-radius:3px;margin-top:8px}.___SPointShape_1n97b_gg_._shape_Square_1n97b_gg_._size_l_1n97b_gg_{width:16px;height:16px;border-radius:2px;margin-top:4px}.___SPointShape_1n97b_gg_._shape_Square_1n97b_gg_._size_m_1n97b_gg_{width:12px;height:12px;border-radius:2px;margin-top:4px}.___SPointShape_1n97b_gg_._shape_Pattern_1n97b_gg_{background-color:transparent;margin-right:4px}.___SIcon_1n97b_gg_{line-height:0;margin-right:4px}.___SIcon_1n97b_gg_._size_l_1n97b_gg_{margin-top:4px}.___SIcon_1n97b_gg_._size_m_1n97b_gg_{margin-top:2px}.___SLabel_1n97b_gg_{min-width:0}.___SAdditionalLabel_1n97b_gg_._size_l_1n97b_gg_,.___SCount_1n97b_gg_._size_l_1n97b_gg_,.___SLabel_1n97b_gg_._size_l_1n97b_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SAdditionalLabel_1n97b_gg_._size_m_1n97b_gg_,.___SCount_1n97b_gg_._size_m_1n97b_gg_,.___SLabel_1n97b_gg_._size_m_1n97b_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SAdditionalLabel_1n97b_gg_,.___SCount_1n97b_gg_{margin-left:4px}.___SAdditionalLabel_1n97b_gg_{white-space:nowrap;display:flex;align-items:flex-start}.___SAdditionalLabel_1n97b_gg_::before{content:"";display:inline-block;background-color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));height:4px;width:4px;border-radius:2px;margin-right:4px}@supports (color:color(display-p3 0 0 0)){.___SAdditionalLabel_1n97b_gg_::before{background-color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SAdditionalLabel_1n97b_gg_::before{background-color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SAdditionalLabel_1n97b_gg_._size_l_1n97b_gg_::before{margin-top:10px}.___SAdditionalLabel_1n97b_gg_._size_m_1n97b_gg_::before{margin-top:8px}.___SPatternSymbol_1n97b_gg_{transform:scale(.8)}',
+    '.___SLegendItem_1v96z_gg_{min-width:0;align-items:flex-start}@media (hover:hover){.___SLegendItem_1v96z_gg_:hover{cursor:pointer}.___SLegendItem_1v96z_gg_.__disabled_1v96z_gg_:hover{cursor:default}}.___SPointShape_1v96z_gg_.__color_1v96z_gg_{background-color:var(--color_1v96z);margin-right:8px;flex-shrink:0}.___SPointShape_1v96z_gg_._shape_Circle_1v96z_gg_._size_l_1v96z_gg_{width:16px;height:16px;border-radius:8px;margin-top:4px}.___SPointShape_1v96z_gg_._shape_Circle_1v96z_gg_._size_m_1v96z_gg_{width:12px;height:12px;border-radius:6px;margin-top:4px}.___SPointShape_1v96z_gg_._shape_Line_1v96z_gg_._size_l_1v96z_gg_{width:16px;height:4px;border-radius:3px;margin-top:9px}.___SPointShape_1v96z_gg_._shape_Line_1v96z_gg_._size_m_1v96z_gg_{width:12px;height:4px;border-radius:3px;margin-top:8px}.___SPointShape_1v96z_gg_._shape_Square_1v96z_gg_._size_l_1v96z_gg_{width:16px;height:16px;border-radius:2px;margin-top:4px}.___SPointShape_1v96z_gg_._shape_Square_1v96z_gg_._size_m_1v96z_gg_{width:12px;height:12px;border-radius:2px;margin-top:4px}.___SPointShape_1v96z_gg_._shape_Pattern_1v96z_gg_{background-color:transparent;margin-right:4px}.___SIcon_1v96z_gg_{line-height:0;margin-right:4px}.___SIcon_1v96z_gg_._size_l_1v96z_gg_{margin-top:4px}.___SIcon_1v96z_gg_._size_m_1v96z_gg_{margin-top:2px}.___SLabel_1v96z_gg_{min-width:0}.___SAdditionalLabel_1v96z_gg_._size_l_1v96z_gg_,.___SCount_1v96z_gg_._size_l_1v96z_gg_,.___SLabel_1v96z_gg_._size_l_1v96z_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SAdditionalLabel_1v96z_gg_._size_m_1v96z_gg_,.___SCount_1v96z_gg_._size_m_1v96z_gg_,.___SLabel_1v96z_gg_._size_m_1v96z_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SAdditionalLabel_1v96z_gg_,.___SCount_1v96z_gg_{margin-left:4px}.___SAdditionalLabel_1v96z_gg_{white-space:nowrap;display:flex;align-items:flex-start}.___SAdditionalLabel_1v96z_gg_::before{content:"";display:inline-block;background-color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));height:4px;width:4px;border-radius:2px;margin-right:4px}@supports (color:color(display-p3 0 0 0%)){.___SAdditionalLabel_1v96z_gg_::before{background-color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SAdditionalLabel_1v96z_gg_::before{background-color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SAdditionalLabel_1v96z_gg_._size_l_1v96z_gg_::before{margin-top:10px}.___SAdditionalLabel_1v96z_gg_._size_m_1v96z_gg_::before{margin-top:8px}.___SPatternSymbol_1v96z_gg_{transform:scale(.8)}',
     /*__inner_css_end__*/
-    "1n97b_gg_"
+    "1v96z_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendItem": "___SLegendItem_1n97b_gg_",
-    "_disabled": "__disabled_1n97b_gg_",
-    "__SPointShape": "___SPointShape_1n97b_gg_",
-    "_color": "__color_1n97b_gg_",
-    "--color": "--color_1n97b",
-    "_shape_Circle": "_shape_Circle_1n97b_gg_",
-    "_size_l": "_size_l_1n97b_gg_",
-    "_size_m": "_size_m_1n97b_gg_",
-    "_shape_Line": "_shape_Line_1n97b_gg_",
-    "_shape_Square": "_shape_Square_1n97b_gg_",
-    "_shape_Pattern": "_shape_Pattern_1n97b_gg_",
-    "__SIcon": "___SIcon_1n97b_gg_",
-    "__SLabel": "___SLabel_1n97b_gg_",
-    "__SAdditionalLabel": "___SAdditionalLabel_1n97b_gg_",
-    "__SCount": "___SCount_1n97b_gg_",
-    "__SPatternSymbol": "___SPatternSymbol_1n97b_gg_"
+    "__SLegendItem": "___SLegendItem_1v96z_gg_",
+    "_disabled": "__disabled_1v96z_gg_",
+    "__SPointShape": "___SPointShape_1v96z_gg_",
+    "_color": "__color_1v96z_gg_",
+    "--color": "--color_1v96z",
+    "_shape_Circle": "_shape_Circle_1v96z_gg_",
+    "_size_l": "_size_l_1v96z_gg_",
+    "_size_m": "_size_m_1v96z_gg_",
+    "_shape_Line": "_shape_Line_1v96z_gg_",
+    "_shape_Square": "_shape_Square_1v96z_gg_",
+    "_shape_Pattern": "_shape_Pattern_1v96z_gg_",
+    "__SIcon": "___SIcon_1v96z_gg_",
+    "__SLabel": "___SLabel_1v96z_gg_",
+    "__SAdditionalLabel": "___SAdditionalLabel_1v96z_gg_",
+    "__SCount": "___SCount_1v96z_gg_",
+    "__SPatternSymbol": "___SPatternSymbol_1v96z_gg_"
   })
 );
 var enhance = [resolveColorEnhance(), uniqueIDEnhancement()];
-var LegendItemRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(LegendItemRoot2, _Component);
-  var _super = _createSuper(LegendItemRoot2);
+var LegendItemRoot = /* @__PURE__ */ (function(_Component) {
   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;
@@ -62,18 +60,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
       };
     }
@@ -82,17 +86,16 @@ var LegendItemRoot = /* @__PURE__ */ function(_Component) {
     value: function getIconProps() {
       var props = this.asProps;
       return _objectSpread(_objectSpread({}, props), {}, {
-        children: props.icon
+        children: props.icon,
+        onClick: function onClick() {
+          return props.onChangeLegendItem(props.id, !props.checked);
+        }
       });
     }
   }, {
     key: "getLabelProps",
     value: function getLabelProps() {
-      var _this$asProps2 = this.asProps, id = _this$asProps2.id, checked = _this$asProps2.checked;
-      _this$asProps2.color;
-      var onChangeLegendItem = _this$asProps2.onChangeLegendItem;
-      _this$asProps2.shape;
-      var props = _objectWithoutProperties(_this$asProps2, _excluded);
+      var _this$asProps2 = this.asProps, id = _this$asProps2.id, checked = _this$asProps2.checked, _color = _this$asProps2.color, onChangeLegendItem = _this$asProps2.onChangeLegendItem, _shape = _this$asProps2.shape, props = _objectWithoutProperties(_this$asProps2, _excluded);
       return _objectSpread(_objectSpread({}, props), {}, {
         id: this.getUniqueID(),
         checked,
@@ -106,18 +109,24 @@ var LegendItemRoot = /* @__PURE__ */ function(_Component) {
     key: "getAdditionalLabelProps",
     value: function getAdditionalLabelProps() {
       var props = this.asProps;
-      var additionalInfo = props.additionalInfo;
+      var additionalInfo = props.additionalInfo, onChangeLegendItem = props.onChangeLegendItem, id = props.id, checked = props.checked;
       return _objectSpread(_objectSpread({}, props), {}, {
-        children: additionalInfo && "label" in additionalInfo ? "".concat(additionalInfo.label) : void 0
+        children: additionalInfo && "label" in additionalInfo ? "".concat(additionalInfo.label) : void 0,
+        onClick: function onClick() {
+          return onChangeLegendItem(id, !checked);
+        }
       });
     }
   }, {
     key: "getCountProps",
     value: function getCountProps() {
       var props = this.asProps;
-      var additionalInfo = props.additionalInfo;
+      var additionalInfo = props.additionalInfo, onChangeLegendItem = props.onChangeLegendItem, id = props.id, checked = props.checked;
       return _objectSpread(_objectSpread({}, props), {}, {
-        children: additionalInfo && "count" in additionalInfo ? "(".concat(additionalInfo.count, ")") : void 0
+        children: additionalInfo && "count" in additionalInfo ? "(".concat(additionalInfo.count, ")") : void 0,
+        onClick: function onClick() {
+          return onChangeLegendItem(id, !checked);
+        }
       });
     }
   }, {
@@ -126,15 +135,14 @@ var LegendItemRoot = /* @__PURE__ */ function(_Component) {
       var _ref = this.asProps, _ref7;
       var SLegendItem = Flex;
       var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, Children = _this$asProps3.Children, shape = _this$asProps3.shape;
-      var disabled = StaticShapes.includes(shape);
-      return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLegendItem, _ref7.cn("SLegendItem", _objectSpread({}, assignProps({
+      var disabled = StaticShapes.includes(shape) || shape === void 0;
+      return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SLegendItem, _ref7.cn("SLegendItem", _objectSpread({}, assignProps({
         "disabled": disabled,
         "__excludeProps": ["id"]
       }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {})));
     }
   }]);
-  return LegendItemRoot2;
-}(Component);
+})(Component);
 _defineProperty(LegendItemRoot, "displayName", "LegendItem");
 _defineProperty(LegendItemRoot, "style", style);
 _defineProperty(LegendItemRoot, "enhance", enhance);
@@ -144,16 +152,16 @@ _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);
   }
   if (shape === "Pattern") {
     var _ref8;
-    return _ref8 = sstyled$1(styles), /* @__PURE__ */ React.createElement(Box, _ref8.cn("Box", {
+    return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(Box, _ref8.cn("Box", {
       "mr": 1
     }), /* @__PURE__ */ React.createElement(SPatternSymbol, _ref8.cn("SPatternSymbol", {
       "color": color,
@@ -163,69 +171,74 @@ function Shape(props) {
   }
   if (shape === "Checkbox") {
     var _ref9;
-    return _ref9 = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, _ref9.cn("Checkbox", {
+    return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, _ref9.cn("Checkbox", {
       "size": size,
       "checked": checked,
-      "theme": checked ? color : void 0,
+      "theme": color,
       "onChange": onChange,
+      "onFocus": onFocus,
+      "onBlur": onBlur,
       "aria-labelledby": props["aria-labelledby"]
     })), patterns && /* @__PURE__ */ React.createElement(Box, _ref9.cn("Box", {
       "mt": "2px",
-      "mr": 1
+      "mr": 1,
+      "onClick": function onClick() {
+        return onChange(!checked);
+      }
     }), /* @__PURE__ */ React.createElement(SPatternSymbol, _ref9.cn("SPatternSymbol", {
       "color": color,
       "patternKey": patternKey,
       "aria-hidden": true
     }))));
   }
-  return _ref10 = sstyled$1(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$1(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$1(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$1(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$1(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,58 +1,56 @@
 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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
 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 } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, assignProps } from "@semcore/core";
+import { sstyled, assignProps, createComponent } from "@semcore/core";
+import { Box } from "@semcore/base-components";
 import React from "react";
-import { Box } from "@semcore/flex-box";
-import { LegendItemComponent } from "../LegendItem/LegendItem.mjs";
 import { BaseLegend } from "../BaseLegend.mjs";
+import { LegendItemComponent } from "../LegendItem/LegendItem.mjs";
 /*!__reshadow-styles__:"./legend-table.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SLegendTable_pnwul_gg_.__columns-count_pnwul_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_pnwul_gg_._size_l_pnwul_gg_{font-size:var(--intergalactic-fs-300, 16px);text-align:right}.___SColumnItem_pnwul_gg_._size_m_pnwul_gg_{font-size:var(--intergalactic-fs-200, 14px);text-align:right}',
+    '.___SLegendTable_9jglg_gg_.__columns-count_9jglg_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_9jglg_gg_._size_l_9jglg_gg_{font-size:var(--intergalactic-fs-300, 16px);text-align:right}.___SColumnItem_9jglg_gg_._size_m_9jglg_gg_{font-size:var(--intergalactic-fs-200, 14px);text-align:right}',
     /*__inner_css_end__*/
-    "pnwul_gg_"
+    "9jglg_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendTable": "___SLegendTable_pnwul_gg_",
-    "_columns-count": "__columns-count_pnwul_gg_",
-    "__SColumnItem": "___SColumnItem_pnwul_gg_",
-    "_size_l": "_size_l_pnwul_gg_",
-    "_size_m": "_size_m_pnwul_gg_"
+    "__SLegendTable": "___SLegendTable_9jglg_gg_",
+    "_columns-count": "__columns-count_9jglg_gg_",
+    "__SColumnItem": "___SColumnItem_9jglg_gg_",
+    "_size_l": "_size_l_9jglg_gg_",
+    "_size_m": "_size_m_9jglg_gg_"
   })
 );
-var LegendTableRoot = /* @__PURE__ */ function(_BaseLegend) {
-  _inherits(LegendTableRoot2, _BaseLegend);
-  var _super = _createSuper(LegendTableRoot2);
+var LegendTableRoot = /* @__PURE__ */ (function(_BaseLegend) {
   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$;
       var SLegendTable = Box;
       var _this$asProps = this.asProps, styles = _this$asProps.styles, Children = _this$asProps.Children, _this$asProps$size = _this$asProps.size, size = _this$asProps$size === void 0 ? "m" : _this$asProps$size, items = _this$asProps.items;
       var columnsCount = (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.columns.length;
-      return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLegendTable, _ref3.cn("SLegendTable", _objectSpread({}, assignProps({
+      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));
@@ -60,8 +58,7 @@ var LegendTableRoot = /* @__PURE__ */ function(_BaseLegend) {
       }));
     }
   }]);
-  return LegendTableRoot2;
-}(BaseLegend);
+})(BaseLegend);
 _defineProperty(LegendTableRoot, "displayName", "LegendTable");
 _defineProperty(LegendTableRoot, "style", style);
 _defineProperty(LegendTableRoot, "defaultProps", function() {
@@ -73,7 +70,7 @@ function ColumnComponent(props) {
   var _ref2 = arguments[0], _ref4;
   var SColumnItem = Box;
   var styles = props.styles, index = props.index, size = props.size, Children = props.Children;
-  return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SColumnItem, _ref4.cn("SColumnItem", _objectSpread({}, assignProps({
+  return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SColumnItem, _ref4.cn("SColumnItem", _objectSpread({}, assignProps({
     "style": {
       gridColumnStart: "".concat(index + 2),
       gridColumnEnd: "".concat(index + 3)

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

@@ -1,5 +1,7 @@
 import { LegendFlex } from "./LegendFlex/LegendFlex.mjs";
+import { LegendTable } from "./LegendTable/LegendTable.mjs";
 export {
   LegendFlex as ChartLegend,
+  LegendTable as ChartLegendTable,
   LegendFlex as default
 };