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

package/lib/esm/Plot.mjs

@@ -2,42 +2,48 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 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, assignProps, Component, createComponent } from "@semcore/core";
-import { Box } from "@semcore/base-components";
-import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
-import EventEmitter from "@semcore/core/lib/utils/eventEmitter";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
 import React from "react";
-import { makeDataHintsContainer, makeDataHintsHandlers } from "./a11y/hints.mjs";
+import { Box } from "@semcore/flex-box";
+import EventEmitter from "@semcore/utils/lib/eventEmitter";
+import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
+import { uniqueId, eventToPoint } from "./utils.mjs";
 import { PlotA11yModule } from "./a11y/PlotA11yModule.mjs";
+import { makeDataHintsContainer, makeDataHintsHandlers } from "./a11y/hints.mjs";
+import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
 import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
-import { uniqueId, eventToPoint } from "./utils.mjs";
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
 /*!__reshadow-styles__:"./style/plot.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPlot_1ncq8_gg_{overflow:hidden}.___SPlot_1ncq8_gg_:focus{outline:0}.___SPlot_1ncq8_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}foreignObject[data-aria-only]{pointer-events:none}.___SPlot_1ncq8_gg_:has(foreignObject[data-aria-only]:focus-within){outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469));outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset;border-radius:var(--intergalactic-surface-rounded, calc(6px + 2px))}@supports (color:color(display-p3 0 0 0%)){.___SPlot_1ncq8_gg_:has(foreignObject[data-aria-only]:focus-within){outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469))}@media (color-gamut:p3){.___SPlot_1ncq8_gg_:has(foreignObject[data-aria-only]:focus-within){outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}",
+    ".___SPlot_5qhci_gg_{overflow:hidden}.___SPlot_5qhci_gg_:active,.___SPlot_5qhci_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}foreignObject[data-aria-only]{pointer-events:none}.___SPlot_5qhci_gg_.__keyboardFocused_5qhci_gg_{border:1px solid var(--intergalactic-chart-palette-order-9, rgb(92, 92, 196));box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@supports (color:color(display-p3 0 0 0)){.___SPlot_5qhci_gg_.__keyboardFocused_5qhci_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SPlot_5qhci_gg_.__keyboardFocused_5qhci_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}",
     /*__inner_css_end__*/
-    "1ncq8_gg_"
+    "5qhci_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SPlot": "___SPlot_1ncq8_gg_"
+    "__SPlot": "___SPlot_5qhci_gg_",
+    "_keyboardFocused": "__keyboardFocused_5qhci_gg_"
   })
 );
-var PlotRoot = /* @__PURE__ */ (function(_Component) {
+var PlotRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(PlotRoot2, _Component);
+  var _super = _createSuper(PlotRoot2);
   function PlotRoot2(props) {
     var _this;
     _classCallCheck(this, PlotRoot2);
-    _this = _callSuper(this, PlotRoot2, [props]);
-    _defineProperty(_this, "plotId", uniqueId());
-    _defineProperty(_this, "rootRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "dataStructureHints", _this.props.dataHints || makeDataHintsContainer());
-    _defineProperty(_this, "dataHintsHandler", makeDataHintsHandlers(_this.dataStructureHints));
-    _defineProperty(_this, "handlerMouseMove", function(e) {
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "plotId", uniqueId());
+    _defineProperty(_assertThisInitialized(_this), "rootRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "dataStructureHints", _this.props.dataHints || makeDataHintsContainer());
+    _defineProperty(_assertThisInitialized(_this), "dataHintsHandler", makeDataHintsHandlers(_this.dataStructureHints));
+    _defineProperty(_assertThisInitialized(_this), "handlerMouseMove", function(e) {
       var scale = _this.asProps.scale;
       _this.eventEmitter.emit("onMouseMoveRoot", e);
       if (scale && scale.length >= 2) {
@@ -46,26 +52,25 @@ var PlotRoot = /* @__PURE__ */ (function(_Component) {
         var _xScale$range = xScale.range(), _xScale$range2 = _slicedToArray(_xScale$range, 2), minX = _xScale$range2[0], maxX = _xScale$range2[1];
         var _yScale$range = yScale.range(), _yScale$range2 = _slicedToArray(_yScale$range, 2), maxY = _yScale$range2[0], minY = _yScale$range2[1];
         if (pX >= minX && pX <= maxX && pY >= minY && pY <= maxY) {
-          _this.eventEmitter.emit("onMouseMoveChart", e, _this.rootRef.current);
+          _this.eventEmitter.emit("onMouseMoveChart", e);
         } else {
           _this.eventEmitter.emit("onMouseLeaveChart", e);
         }
       }
     });
-    _defineProperty(_this, "handlerMouseLeave", function(e) {
+    _defineProperty(_assertThisInitialized(_this), "handlerMouseLeave", function(e) {
       _this.eventEmitter.emit("onMouseLeaveRoot", e);
       _this.eventEmitter.emit("onMouseLeaveChart", e);
     });
     _this.eventEmitter = props.eventEmitter || new EventEmitter();
     return _this;
   }
-  _inherits(PlotRoot2, _Component);
-  return _createClass(PlotRoot2, [{
+  _createClass(PlotRoot2, [{
     key: "setContext",
     value: function setContext() {
       var _scale$, _scale$$domain;
       var _this$asProps = this.asProps, scale = _this$asProps.scale, data = _this$asProps.data, width = _this$asProps.width, height = _this$asProps.height, locale = _this$asProps.locale, resolveColor = _this$asProps.resolveColor, patterns = _this$asProps.patterns, duration = _this$asProps.duration;
-      var yScaleDomain = scale === null || scale === void 0 || (_scale$ = scale[1]) === null || _scale$ === void 0 || (_scale$$domain = _scale$.domain) === null || _scale$$domain === void 0 ? void 0 : _scale$$domain.call(_scale$);
+      var yScaleDomain = scale === null || scale === void 0 ? void 0 : (_scale$ = scale[1]) === null || _scale$ === void 0 ? void 0 : (_scale$$domain = _scale$.domain) === null || _scale$$domain === void 0 ? void 0 : _scale$$domain.call(_scale$);
       if (yScaleDomain !== null && yScaleDomain !== void 0 && yScaleDomain.length && data !== null && data !== void 0 && data.length) {
         this.dataHintsHandler.setPointsDensity(data.length / width, Math.abs(yScaleDomain[1] - yScaleDomain[0]) / height);
       }
@@ -80,8 +85,7 @@ var PlotRoot = /* @__PURE__ */ (function(_Component) {
           dataHintsHandler: this.dataHintsHandler,
           resolveColor,
           patterns,
-          duration,
-          plotId: this.plotId
+          duration
         }
       };
     }
@@ -93,21 +97,21 @@ var PlotRoot = /* @__PURE__ */ (function(_Component) {
       var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, width = _this$asProps2.width, height = _this$asProps2.height, Children = _this$asProps2.Children, data = _this$asProps2.data, a11yAltTextConfig = _this$asProps2.a11yAltTextConfig, label = _this$asProps2.label, locale = _this$asProps2.locale, getI18nText = _this$asProps2.getI18nText;
       if (!width || !height) return null;
       var ariaLabel = label !== null && label !== void 0 ? label : getI18nText("d3Chart.Plot:aria-label");
-      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SPlot, _ref2.cn("SPlot", _objectSpread({}, assignProps({
+      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPlot, _ref2.cn("SPlot", _objectSpread({}, assignProps({
         "tag": "svg",
         "__excludeProps": ["data", "scale"],
         "ref": this.rootRef,
         "onMouseMove": this.handlerMouseMove,
         "onMouseLeave": this.handlerMouseLeave,
         "aria-label": ariaLabel,
-        "data-plot-id": this.plotId
+        "tabIndex": 0
       }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})), /* @__PURE__ */ React.createElement("foreignObject", _ref2.cn("foreignObject", {
         "width": "100%",
         "height": "100%",
         "data-aria-only": true
       }), /* @__PURE__ */ React.createElement(PlotA11yModule, _ref2.cn("PlotA11yModule", {
         "id": this.plotId,
-        "payload": data,
+        "data": data,
         "plotLabel": label,
         "locale": locale,
         "plotRef": this.rootRef,
@@ -116,7 +120,8 @@ var PlotRoot = /* @__PURE__ */ (function(_Component) {
       }))));
     }
   }]);
-})(Component);
+  return PlotRoot2;
+}(Component);
 _defineProperty(PlotRoot, "displayName", "Plot");
 _defineProperty(PlotRoot, "style", style);
 _defineProperty(PlotRoot, "defaultProps", function() {
@@ -125,7 +130,7 @@ _defineProperty(PlotRoot, "defaultProps", function() {
     height: 0
   };
 });
-_defineProperty(PlotRoot, "enhance", [resolveColorEnhance(), i18nEnhance(localizedMessages)]);
+_defineProperty(PlotRoot, "enhance", [keyboardFocusEnhance(), resolveColorEnhance(), i18nEnhance(localizedMessages)]);
 const Plot = createComponent(PlotRoot);
 export {
   Plot as default