@semcore/d3-chart 2.2.6 → 2.3.0

package/lib/cjs/Venn.js

@@ -48,16 +48,16 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SCircle_bavzt_gg_{fill:#59ddaa;stroke:#fff;stroke-width:2px;fill-opacity:.5;transition-property:cx,cy;transition-duration:var(--duration_bavzt);transition-timing-function:ease-in-out}.___SCircle_bavzt_gg_:hover{fill-opacity:.7}.___SCircle_bavzt_gg_.__color_bavzt_gg_{fill:var(--color_bavzt)}.___SIntersection_bavzt_gg_{stroke:#fff;stroke-width:2px;fill-opacity:0}.___SIntersection_bavzt_gg_:hover{fill-opacity:.1}"
+".___SCircle_4ydmq_gg_{fill:#59ddaa;stroke:#fff;stroke-width:2px;fill-opacity:.5;transition-property:cx,cy;transition-duration:var(--duration_4ydmq);transition-timing-function:ease-in-out}.___SCircle_4ydmq_gg_:hover{fill-opacity:.7}.___SCircle_4ydmq_gg_.__color_4ydmq_gg_{fill:var(--color_4ydmq)}.___SIntersection_4ydmq_gg_{stroke:#fff;stroke-width:2px;fill-opacity:0}.___SIntersection_4ydmq_gg_:hover{fill-opacity:.1}"
 /*__inner_css_end__*/
-, "bavzt_gg_")
+, "4ydmq_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SCircle": "___SCircle_bavzt_gg_",
-  "--duration": "--duration_bavzt",
-  "_color": "__color_bavzt_gg_",
-  "--color": "--color_bavzt",
-  "__SIntersection": "___SIntersection_bavzt_gg_"
+  "__SCircle": "___SCircle_4ydmq_gg_",
+  "--duration": "--duration_4ydmq",
+  "_color": "__color_4ydmq_gg_",
+  "--color": "--color_4ydmq",
+  "__SIntersection": "___SIntersection_4ydmq_gg_"
 });
 
 var VennRoot = /*#__PURE__*/function (_Component) {
@@ -88,6 +88,7 @@ var VennRoot = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderElement", /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       return /*#__PURE__*/_react["default"].createElement(_animation.FadeInOut, (0, _extends2["default"])({
+        "aria-hidden": true,
         ref: ref,
         tag: "g",
         visible: true
@@ -143,6 +144,7 @@ var VennRoot = /*#__PURE__*/function (_Component) {
       return {
         duration: this.asProps.duration,
         data: this.vennData[props.dataKey],
+        originalData: this.asProps.data[props.dataKey],
         onMouseMove: this.bindHandlerTooltip(true, props),
         onMouseLeave: this.bindHandlerTooltip(false, props)
       };
@@ -158,6 +160,7 @@ var VennRoot = /*#__PURE__*/function (_Component) {
         data: Object.values(this.vennData).filter(function (d) {
           return dataKeys.includes(d.setid);
         }),
+        originalData: this.asProps.data[props.dataKey],
         onMouseMove: this.bindHandlerTooltip(true, props),
         onMouseLeave: this.bindHandlerTooltip(false, props)
       };
@@ -166,8 +169,10 @@ var VennRoot = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var Element = this.Element;
+      this.asProps.dataHintsHandler.establishDataType('values-set');
       this.vennData = this.getVennData();
       return /*#__PURE__*/_react["default"].createElement(Element, {
+        "aria-hidden": true,
         render: this.renderElement,
         childrenPosition: "inside",
         vennData: this.vennData
@@ -194,8 +199,13 @@ function Circle(_ref6) {
       styles = _ref6.styles,
       color = _ref6.color,
       data = _ref6.data,
-      duration = _ref6.duration;
+      duration = _ref6.duration,
+      name = _ref6.name,
+      dataKey = _ref6.dataKey,
+      dataHintsHandler = _ref6.dataHintsHandler;
+  dataHintsHandler.describeValueEntity(dataKey, name);
   return _ref = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCircle, _ref.cn("SCircle", {
+    "aria-hidden": true,
     "render": "circle",
     "color": color,
     "cx": data.x,
@@ -210,10 +220,15 @@ function Intersection(props) {
 
   var SIntersection = props.Element,
       styles = props.styles,
-      data = props.data;
+      data = props.data,
+      name = props.name,
+      dataKey = props.dataKey,
+      dataHintsHandler = props.dataHintsHandler;
+  dataHintsHandler.describeValueEntity(dataKey, name);
 
   var renderIntersection = _react["default"].useCallback( /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     return /*#__PURE__*/_react["default"].createElement(_animation.FadeInOut, (0, _extends2["default"])({
+      "aria-hidden": true,
       ref: ref,
       tag: "path",
       visible: true
@@ -221,6 +236,7 @@ function Intersection(props) {
   }), [props]);
 
   return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIntersection, _ref2.cn("SIntersection", {
+    "aria-hidden": true,
     "render": renderIntersection,
     "d": (0, _venn.intersectionAreaPath)(data)
   }));

package/lib/cjs/Venn.js.map

@@ -1 +1 @@
-{"version":3,"file":"Venn.js","names":["VennRoot","canUseDOM","document","createElement","visible","props","x","clientX","y","clientY","eventEmitter","asProps","virtualElement","getBoundingClientRect","generateGetBoundingClientRect","CONSTANT","VIRTUAL_ELEMENT","emit","React","forwardRef","ref","width","height","top","right","bottom","left","data","orientation","orientationOrder","size","vennData","Object","entries","map","dataKey","sets","split","scaleSolution","normalizeSolution","venn","duration","onMouseMove","bindHandlerTooltip","onMouseLeave","dataKeys","delay","values","filter","d","includes","setid","Element","getVennData","renderElement","Component","style","Math","PI","c1","c2","radius","Circle","SCircle","styles","color","sstyled","Intersection","SIntersection","renderIntersection","useCallback","intersectionAreaPath","Venn"],"sources":["../../src/Venn.jsx"],"sourcesContent":["import React from 'react';\nimport { venn, normalizeSolution, scaleSolution, intersectionAreaPath } from '@upsetjs/venn.js';\nimport { Component, sstyled } from '@semcore/core';\nimport canUseDOM from '@semcore/utils/lib/canUseDOM';\nimport { FadeInOut } from '@semcore/animation';\n\nimport createElement from './createElement';\nimport { CONSTANT } from './utils';\n\nimport style from './style/venn.shadow.css';\n\nclass VennRoot extends Component {\n  static displayName = 'Venn';\n  static style = style;\n\n  static defaultProps = {\n    orientation: Math.PI / 2,\n    orientationOrder: (c1, c2) => c2.radius - c1.radius,\n    duration: 500,\n  };\n\n  virtualElement = canUseDOM() ? document.createElement('div') : {};\n\n  generateGetBoundingClientRect(x = 0, y = 0) {\n    return () => ({ width: 0, height: 0, top: y, right: x, bottom: y, left: x });\n  }\n\n  bindHandlerTooltip =\n    (visible, props) =>\n    ({ clientX: x, clientY: y }) => {\n      const { eventEmitter } = this.asProps;\n      this.virtualElement.getBoundingClientRect = this.generateGetBoundingClientRect(x, y);\n      this.virtualElement[CONSTANT.VIRTUAL_ELEMENT] = true;\n      eventEmitter.emit('onTooltipVisible', visible, props, this.virtualElement);\n    };\n\n  getVennData() {\n    const { data, orientation, orientationOrder, size } = this.asProps;\n    const [width, height] = size;\n    const vennData = Object.entries(data).map(([dataKey, size]) => ({\n      sets: dataKey.split('/'),\n      size,\n    }));\n    return scaleSolution(\n      normalizeSolution(venn(vennData), orientation, orientationOrder),\n      width,\n      height,\n      10,\n    );\n  }\n\n  getCircleProps(props) {\n    return {\n      duration: this.asProps.duration,\n      data: this.vennData[props.dataKey],\n      onMouseMove: this.bindHandlerTooltip(true, props),\n      onMouseLeave: this.bindHandlerTooltip(false, props),\n    };\n  }\n\n  getIntersectionProps(props) {\n    const { duration } = this.asProps;\n    const dataKeys = props.dataKey.split('/');\n    return {\n      duration,\n      delay: duration,\n      data: Object.values(this.vennData).filter((d) => dataKeys.includes(d.setid)),\n      onMouseMove: this.bindHandlerTooltip(true, props),\n      onMouseLeave: this.bindHandlerTooltip(false, props),\n    };\n  }\n\n  renderElement = React.forwardRef((props, ref) => {\n    return <FadeInOut ref={ref} tag=\"g\" visible {...props} />;\n  });\n\n  render() {\n    const Element = this.Element;\n    this.vennData = this.getVennData();\n    return (\n      <Element render={this.renderElement} childrenPosition=\"inside\" vennData={this.vennData} />\n    );\n  }\n}\n\nfunction Circle({ Element: SCircle, styles, color, data, duration }) {\n  return sstyled(styles)(\n    <SCircle\n      render=\"circle\"\n      color={color}\n      cx={data.x}\n      cy={data.y}\n      r={data.radius}\n      use:duration={`${duration}ms`}\n    />,\n  );\n}\n\nfunction Intersection(props) {\n  const { Element: SIntersection, styles, data } = props;\n  const renderIntersection = React.useCallback(\n    React.forwardRef((props, ref) => {\n      return <FadeInOut ref={ref} tag=\"path\" visible {...props} />;\n    }),\n    [props],\n  );\n  return sstyled(styles)(\n    <SIntersection render={renderIntersection} d={intersectionAreaPath(data)} />,\n  );\n}\n\nconst Venn = createElement(VennRoot, { Circle, Intersection });\n\nexport default Venn;\n"],"mappings":"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"}
+{"version":3,"file":"Venn.js","names":["VennRoot","canUseDOM","document","createElement","visible","props","x","clientX","y","clientY","eventEmitter","asProps","virtualElement","getBoundingClientRect","generateGetBoundingClientRect","CONSTANT","VIRTUAL_ELEMENT","emit","React","forwardRef","ref","width","height","top","right","bottom","left","data","orientation","orientationOrder","size","vennData","Object","entries","map","dataKey","sets","split","scaleSolution","normalizeSolution","venn","duration","originalData","onMouseMove","bindHandlerTooltip","onMouseLeave","dataKeys","delay","values","filter","d","includes","setid","Element","dataHintsHandler","establishDataType","getVennData","renderElement","Component","style","Math","PI","c1","c2","radius","Circle","SCircle","styles","color","name","describeValueEntity","sstyled","Intersection","SIntersection","renderIntersection","useCallback","intersectionAreaPath","Venn"],"sources":["../../src/Venn.jsx"],"sourcesContent":["import React from 'react';\nimport { venn, normalizeSolution, scaleSolution, intersectionAreaPath } from '@upsetjs/venn.js';\nimport { Component, sstyled } from '@semcore/core';\nimport canUseDOM from '@semcore/utils/lib/canUseDOM';\nimport { FadeInOut } from '@semcore/animation';\n\nimport createElement from './createElement';\nimport { CONSTANT } from './utils';\n\nimport style from './style/venn.shadow.css';\n\nclass VennRoot extends Component {\n  static displayName = 'Venn';\n  static style = style;\n\n  static defaultProps = {\n    orientation: Math.PI / 2,\n    orientationOrder: (c1, c2) => c2.radius - c1.radius,\n    duration: 500,\n  };\n\n  virtualElement = canUseDOM() ? document.createElement('div') : {};\n\n  generateGetBoundingClientRect(x = 0, y = 0) {\n    return () => ({ width: 0, height: 0, top: y, right: x, bottom: y, left: x });\n  }\n\n  bindHandlerTooltip =\n    (visible, props) =>\n    ({ clientX: x, clientY: y }) => {\n      const { eventEmitter } = this.asProps;\n      this.virtualElement.getBoundingClientRect = this.generateGetBoundingClientRect(x, y);\n      this.virtualElement[CONSTANT.VIRTUAL_ELEMENT] = true;\n      eventEmitter.emit('onTooltipVisible', visible, props, this.virtualElement);\n    };\n\n  getVennData() {\n    const { data, orientation, orientationOrder, size } = this.asProps;\n    const [width, height] = size;\n    const vennData = Object.entries(data).map(([dataKey, size]) => ({\n      sets: dataKey.split('/'),\n      size,\n    }));\n    return scaleSolution(\n      normalizeSolution(venn(vennData), orientation, orientationOrder),\n      width,\n      height,\n      10,\n    );\n  }\n\n  getCircleProps(props) {\n    return {\n      duration: this.asProps.duration,\n      data: this.vennData[props.dataKey],\n      originalData: this.asProps.data[props.dataKey],\n      onMouseMove: this.bindHandlerTooltip(true, props),\n      onMouseLeave: this.bindHandlerTooltip(false, props),\n    };\n  }\n\n  getIntersectionProps(props) {\n    const { duration } = this.asProps;\n    const dataKeys = props.dataKey.split('/');\n    return {\n      duration,\n      delay: duration,\n      data: Object.values(this.vennData).filter((d) => dataKeys.includes(d.setid)),\n      originalData: this.asProps.data[props.dataKey],\n      onMouseMove: this.bindHandlerTooltip(true, props),\n      onMouseLeave: this.bindHandlerTooltip(false, props),\n    };\n  }\n\n  renderElement = React.forwardRef((props, ref) => {\n    return <FadeInOut aria-hidden ref={ref} tag=\"g\" visible {...props} />;\n  });\n\n  render() {\n    const Element = this.Element;\n    this.asProps.dataHintsHandler.establishDataType('values-set');\n    this.vennData = this.getVennData();\n    return (\n      <Element\n        aria-hidden\n        render={this.renderElement}\n        childrenPosition=\"inside\"\n        vennData={this.vennData}\n      />\n    );\n  }\n}\n\nfunction Circle({\n  Element: SCircle,\n  styles,\n  color,\n  data,\n  duration,\n  name,\n  dataKey,\n  dataHintsHandler,\n}) {\n  dataHintsHandler.describeValueEntity(dataKey, name);\n\n  return sstyled(styles)(\n    <SCircle\n      aria-hidden\n      render=\"circle\"\n      color={color}\n      cx={data.x}\n      cy={data.y}\n      r={data.radius}\n      use:duration={`${duration}ms`}\n    />,\n  );\n}\n\nfunction Intersection(props) {\n  const { Element: SIntersection, styles, data, name, dataKey, dataHintsHandler } = props;\n  dataHintsHandler.describeValueEntity(dataKey, name);\n\n  const renderIntersection = React.useCallback(\n    React.forwardRef((props, ref) => {\n      return <FadeInOut aria-hidden ref={ref} tag=\"path\" visible {...props} />;\n    }),\n    [props],\n  );\n  return sstyled(styles)(\n    <SIntersection aria-hidden render={renderIntersection} d={intersectionAreaPath(data)} />,\n  );\n}\n\nconst Venn = createElement(VennRoot, { Circle, Intersection });\n\nexport default Venn;\n"],"mappings":"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"}

package/lib/cjs/a11y/PlotA11yModule.js

@@ -0,0 +1,197 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlotA11yModule = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _core = require("@semcore/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _locale = require("./locale");
+
+var _translations = require("./translations/module/translations");
+
+var _WithI18n = require("@semcore/utils/lib/enhances/WithI18n");
+
+var _flexBox = require("@semcore/flex-box");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/*__reshadow-styles__:"../style/plotA11yModule.shadow.css"*/
+var styles = (
+/*__reshadow_css_start__*/
+_core.sstyled.insert(
+/*__inner_css_start__*/
+".___SPlotA11yModule_kb32z_gg_{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;opacity:0}.___SPlotA11yModule_kb32z_gg_:focus{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;pointer-events:all;opacity:1}"
+/*__inner_css_end__*/
+, "kb32z_gg_")
+/*__reshadow_css_end__*/
+, {
+  "__SPlotA11yModule": "___SPlotA11yModule_kb32z_gg_"
+});
+var globalWasFocused = false;
+var globalNavWithKeyboard = false;
+
+var PlotA11yModule = function PlotA11yModule(props) {
+  var _ref = arguments[0],
+      _ref5;
+
+  var SPlotA11yModule = _flexBox.Box;
+
+  var _React$useState = _react["default"].useState(globalWasFocused),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      wasFocused = _React$useState2[0],
+      setWasFocused = _React$useState2[1];
+
+  var _React$useState3 = _react["default"].useState(globalNavWithKeyboard),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      navWithKeyboard = _React$useState4[0],
+      setNavWithKeyboard = _React$useState4[1];
+
+  var _React$useState5 = _react["default"].useState(null),
+      _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+      plotA11yView = _React$useState6[0],
+      setPlotA11yView = _React$useState6[1];
+
+  var hadnleHiddenElementsFocus = _react["default"].useCallback(function () {
+    setWasFocused(true);
+    setNavWithKeyboard(true);
+  }, []);
+
+  var _React$useState7 = _react["default"].useState(false),
+      _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
+      loading = _React$useState8[0],
+      setLoading = _React$useState8[1];
+
+  var _React$useState9 = _react["default"].useState(null),
+      _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
+      error = _React$useState10[0],
+      setError = _React$useState10[1];
+
+  var contextLocale = _react["default"].useContext(_WithI18n.Context);
+
+  var locale = _react["default"].useMemo(function () {
+    var _props$locale;
+
+    return (0, _locale.normalizeLocale)((_props$locale = props.locale) !== null && _props$locale !== void 0 ? _props$locale : contextLocale, _translations.translations);
+  }, [props.locale]);
+
+  var texts = _react["default"].useMemo(function () {
+    return locale ? _translations.translations[locale] : {};
+  }, [locale]);
+
+  _react["default"].useEffect(function () {
+    var _props$plotRef$curren;
+
+    if (wasFocused) return;
+
+    var focusListener = function focusListener() {
+      globalWasFocused = true;
+      setWasFocused(true);
+    };
+
+    (_props$plotRef$curren = props.plotRef.current) === null || _props$plotRef$curren === void 0 ? void 0 : _props$plotRef$curren.addEventListener('focus', focusListener);
+    return function () {
+      var _props$plotRef$curren2;
+
+      return (_props$plotRef$curren2 = props.plotRef.current) === null || _props$plotRef$curren2 === void 0 ? void 0 : _props$plotRef$curren2.removeEventListener('focus', focusListener);
+    };
+  }, [wasFocused, props.plotRef]);
+
+  _react["default"].useEffect(function () {
+    var _document$body;
+
+    if (navWithKeyboard) return;
+
+    var keyboardListener = function keyboardListener(event) {
+      var navigationKeys = ['Tab', 'ArrowUp', 'ArrowLeft', 'ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'];
+
+      if ('key' in event && navigationKeys.includes(event.key)) {
+        setNavWithKeyboard(true);
+        globalNavWithKeyboard = true;
+      }
+    };
+
+    (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.addEventListener('keydown', keyboardListener);
+    return function () {
+      var _document$body2;
+
+      return (_document$body2 = document.body) === null || _document$body2 === void 0 ? void 0 : _document$body2.removeEventListener('keydown', keyboardListener);
+    };
+  }, [navWithKeyboard]);
+
+  var shouldDisplayView = wasFocused && navWithKeyboard;
+
+  _react["default"].useEffect(function () {
+    if (!shouldDisplayView) return;
+    if (plotA11yView) return;
+    if (loading) return;
+    setLoading(true);
+    Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./PlotA11yView'));
+    }).then(function (_ref6) {
+      var PlotA11yView = _ref6.PlotA11yView;
+      setPlotA11yView({
+        Component: PlotA11yView
+      });
+      setLoading(false);
+      setError(null);
+    })["catch"](function (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+      setError(error);
+    });
+  }, [plotA11yView, shouldDisplayView, loading, setLoading]);
+
+  if (plotA11yView) {
+    var _ref2;
+
+    return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(plotA11yView.Component, (0, _extends2["default"])({}, props, {
+      locale: locale
+    }));
+  }
+
+  if (error) {
+    var _ref3;
+
+    return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPlotA11yModule, _ref3.cn("SPlotA11yModule", _objectSpread({}, (0, _core.assignProps)({
+      "tabIndex": 0,
+      "aria-live": "assertive"
+    }, _ref))), texts.failed);
+  }
+
+  if (loading) {
+    var _ref4;
+
+    return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPlotA11yModule, _ref4.cn("SPlotA11yModule", _objectSpread({}, (0, _core.assignProps)({
+      "tabIndex": 0,
+      "aria-live": "polite"
+    }, _ref))), texts.loading);
+  }
+
+  return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPlotA11yModule, _ref5.cn("SPlotA11yModule", _objectSpread({}, (0, _core.assignProps)({
+    "tabIndex": 0,
+    "onFocus": hadnleHiddenElementsFocus
+  }, _ref))), texts.disabled);
+};
+
+exports.PlotA11yModule = PlotA11yModule;
+//# sourceMappingURL=PlotA11yModule.js.map

package/lib/cjs/a11y/PlotA11yModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlotA11yModule.js","names":["globalWasFocused","globalNavWithKeyboard","PlotA11yModule","props","SPlotA11yModule","Box","React","useState","wasFocused","setWasFocused","navWithKeyboard","setNavWithKeyboard","plotA11yView","setPlotA11yView","hadnleHiddenElementsFocus","useCallback","loading","setLoading","error","setError","contextLocale","useContext","I18nContext","locale","useMemo","normalizeLocale","translations","texts","useEffect","focusListener","plotRef","current","addEventListener","removeEventListener","keyboardListener","event","navigationKeys","includes","key","document","body","shouldDisplayView","then","PlotA11yView","Component","console","sstyled","styles","failed","disabled"],"sources":["../../../src/a11y/PlotA11yModule.tsx"],"sourcesContent":["import React from 'react';\nimport { DataStructureHints, PartialDataSummarizationConfig } from './hints';\nimport { normalizeLocale } from './locale';\nimport { translations } from './translations/module/translations';\nimport { Root, sstyled } from '@semcore/core';\nimport styles from '../style/plotA11yModule.shadow.css';\nimport { Context as I18nContext } from '@semcore/utils/lib/enhances/WithI18n';\nimport { Box } from '@semcore/flex-box';\n\nlet globalWasFocused = false;\nlet globalNavWithKeyboard = false;\n\nexport type A11yViewProps = {\n  id: string;\n  data: Record<string, unknown>[];\n  hints: DataStructureHints;\n  plotLabel: string;\n  locale: NavigatorLanguage['language'];\n  config: PartialDataSummarizationConfig;\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n  plotRef: React.RefObject<Element>;\n};\n\nexport const PlotA11yModule: React.FC<A11yViewProps> = (props) => {\n  const SPlotA11yModule = Root;\n  const [wasFocused, setWasFocused] = React.useState(globalWasFocused);\n  const [navWithKeyboard, setNavWithKeyboard] = React.useState(globalNavWithKeyboard);\n  const [plotA11yView, setPlotA11yView] = React.useState<{\n    Component: React.FC<A11yViewProps>;\n  } | null>(null);\n\n  const hadnleHiddenElementsFocus = React.useCallback(() => {\n    setWasFocused(true);\n    setNavWithKeyboard(true);\n  }, []);\n\n  const [loading, setLoading] = React.useState(false);\n  const [error, setError] = React.useState<Error | null>(null);\n\n  const contextLocale = React.useContext(I18nContext);\n  const locale = React.useMemo(\n    () => normalizeLocale(props.locale ?? contextLocale, translations),\n    [props.locale],\n  );\n  const texts = React.useMemo(() => (locale ? translations[locale] : {}), [locale]);\n\n  React.useEffect(() => {\n    if (wasFocused) return;\n    const focusListener = () => {\n      globalWasFocused = true;\n      setWasFocused(true);\n    };\n\n    props.plotRef.current?.addEventListener('focus', focusListener);\n    return () => props.plotRef.current?.removeEventListener('focus', focusListener);\n  }, [wasFocused, props.plotRef]);\n  React.useEffect(() => {\n    if (navWithKeyboard) return;\n    const keyboardListener = (event: Event) => {\n      const navigationKeys = [\n        'Tab',\n        'ArrowUp',\n        'ArrowLeft',\n        'ArrowDown',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowLeft',\n      ];\n      if ('key' in event && navigationKeys.includes((event as KeyboardEvent).key)) {\n        setNavWithKeyboard(true);\n        globalNavWithKeyboard = true;\n      }\n    };\n    document.body?.addEventListener('keydown', keyboardListener);\n    return () => document.body?.removeEventListener('keydown', keyboardListener);\n  }, [navWithKeyboard]);\n\n  const shouldDisplayView = wasFocused && navWithKeyboard;\n\n  React.useEffect(() => {\n    if (!shouldDisplayView) return;\n    if (plotA11yView) return;\n    if (loading) return;\n\n    setLoading(true);\n\n    import('./PlotA11yView')\n      .then(({ PlotA11yView }) => {\n        setPlotA11yView({ Component: PlotA11yView });\n        setLoading(false);\n        setError(null);\n      })\n      .catch((error) => {\n        // eslint-disable-next-line no-console\n        console.error(error);\n        setError(error);\n      });\n  }, [plotA11yView, shouldDisplayView, loading, setLoading]);\n\n  if (plotA11yView) {\n    return sstyled(styles)(\n      <plotA11yView.Component {...props} locale={locale!} />,\n    ) as React.ReactElement;\n  }\n\n  if (error) {\n    return sstyled(styles)(\n      <SPlotA11yModule render={Box} tabIndex={0} aria-live=\"assertive\">\n        {texts.failed}\n      </SPlotA11yModule>,\n    ) as React.ReactElement;\n  }\n  if (loading) {\n    return sstyled(styles)(\n      <SPlotA11yModule render={Box} tabIndex={0} aria-live=\"polite\">\n        {texts.loading}\n      </SPlotA11yModule>,\n    ) as React.ReactElement;\n  }\n\n  return sstyled(styles)(\n    <SPlotA11yModule render={Box} tabIndex={0} onFocus={hadnleHiddenElementsFocus}>\n      {texts.disabled}\n    </SPlotA11yModule>,\n  ) as React.ReactElement;\n};\n"],"mappings":"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"}

package/lib/cjs/a11y/PlotA11yView.js

@@ -0,0 +1,287 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlotA11yView = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _core = require("@semcore/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _focus = require("./focus");
+
+var _hints = require("./hints");
+
+var _serialize = require("./serialize");
+
+var _intl = require("./intl");
+
+var _summarize = require("./summarize");
+
+var _flexBox = require("@semcore/flex-box");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+/*__reshadow-styles__:"../style/plotA11yView.shadow.css"*/
+var styles = (
+/*__reshadow_css_start__*/
+_core.sstyled.insert(
+/*__inner_css_start__*/
+".___SPlotA11yView_68w71_gg_{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;opacity:0;background-color:#fff;color:#000;border:3px solid #000;font-size:10px;padding:2px;width:200px;height:200px;max-width:80%;max-height:80%;overflow:auto}.___SPlotA11yView_68w71_gg_:focus,.___SPlotA11yView_68w71_gg_.__focus-within_68w71_gg_{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;pointer-events:all;opacity:1;z-index:100;position:relative;display:block}.___SPlotA11yView_68w71_gg_:focus,.___SPlotA11yView_68w71_gg_:focus-within{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;pointer-events:all;opacity:1;z-index:100;position:relative;display:block}.___SPlotA11yView_68w71_gg_ a{cursor:pointer;text-decoration:underline;margin-bottom:8px;display:block}.___SPlotA11yView_68w71_gg_ table,.___SPlotA11yView_68w71_gg_ td,.___SPlotA11yView_68w71_gg_ th{border:1px solid #000}"
+/*__inner_css_end__*/
+, "68w71_gg_")
+/*__reshadow_css_end__*/
+, {
+  "__SPlotA11yView": "___SPlotA11yView_68w71_gg_",
+  "_focus-within": "__focus-within_68w71_gg_"
+});
+
+var PlotA11yView = function PlotA11yView(_ref3) {
+  var _ref = arguments[0],
+      _ref2;
+
+  var id = _ref3.id,
+      providedData = _ref3.data,
+      hints = _ref3.hints,
+      plotLabel = _ref3.plotLabel,
+      plotRef = _ref3.plotRef,
+      providedConfig = _ref3.config,
+      locale = _ref3.locale;
+  var SPlotA11yView = _flexBox.Box;
+
+  var intl = _react["default"].useMemo(function () {
+    return (0, _intl.getIntl)(locale);
+  }, [locale]);
+
+  var config = _react["default"].useMemo(function () {
+    return (0, _hints.makeDataSummarizationConfig)(providedConfig);
+  }, [providedConfig]);
+
+  var data = _react["default"].useMemo(function () {
+    return Array.isArray(providedData) ? providedData : [providedData];
+  }, [providedData]);
+
+  var keys = _react["default"].useMemo(function () {
+    var _fromHints, _fromHints2, _fromHints3, _fromHints4;
+
+    var fromHints = [];
+
+    (_fromHints = fromHints).push.apply(_fromHints, (0, _toConsumableArray2["default"])(hints.fields.verticalAxes));
+
+    (_fromHints2 = fromHints).push.apply(_fromHints2, (0, _toConsumableArray2["default"])(hints.fields.horizontalAxes));
+
+    (_fromHints3 = fromHints).push.apply(_fromHints3, (0, _toConsumableArray2["default"])(hints.fields.valueAxes));
+
+    (_fromHints4 = fromHints).push.apply(_fromHints4, (0, _toConsumableArray2["default"])(Object.keys(hints.fields.values)));
+
+    fromHints = (0, _toConsumableArray2["default"])(new Set(fromHints)).filter(function (key) {
+      return key in data[0];
+    });
+
+    if (fromHints.length === 0) {
+      data.forEach(function (row) {
+        var _fromHints5;
+
+        return (_fromHints5 = fromHints).push.apply(_fromHints5, (0, _toConsumableArray2["default"])(Object.keys(row)));
+      });
+    }
+
+    return (0, _toConsumableArray2["default"])(new Set(fromHints));
+  }, [data, hints]);
+
+  var duplicatedBaseKeys = _react["default"].useMemo(function () {
+    var baseKeys = keys.filter(function (key) {
+      return !hints.titles.valuesAxes[key];
+    }).map(function (key) {
+      if (hints.fields.verticalAxes.has(key) && hints.axesTitle.vertical) return [key, hints.axesTitle.vertical];
+      if (hints.fields.horizontalAxes.has(key) && hints.axesTitle.horizontal) return [key, hints.axesTitle.horizontal];
+    }).filter(function (entry) {
+      return entry !== undefined;
+    }).map(function (entry) {
+      return entry;
+    });
+    var doublicated = {};
+    var handled = {};
+
+    var _iterator = _createForOfIteratorHelper(baseKeys),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _step$value = (0, _slicedToArray2["default"])(_step.value, 2),
+            key = _step$value[0],
+            label = _step$value[1];
+
+        if (handled[label]) {
+          doublicated[key] = true;
+          doublicated[handled[label]] = true;
+        }
+
+        handled[label] = key;
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return doublicated;
+  }, [keys, hints]);
+
+  var renderTitle = _react["default"].useCallback(function (dataKey) {
+    if (hints.titles.valuesAxes[dataKey]) return hints.titles.valuesAxes[dataKey];
+
+    if (!duplicatedBaseKeys[dataKey]) {
+      if (hints.fields.verticalAxes.has(dataKey) && hints.axesTitle.vertical) return hints.axesTitle.vertical;
+      if (hints.fields.horizontalAxes.has(dataKey) && hints.axesTitle.horizontal) return hints.axesTitle.horizontal;
+    }
+
+    return dataKey;
+  }, [data, hints, duplicatedBaseKeys]);
+
+  var _React$useState = _react["default"].useState(null),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      summary = _React$useState2[0],
+      setSummary = _React$useState2[1];
+
+  var _React$useState3 = _react["default"].useState(true),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      generatingSummary = _React$useState4[0],
+      setGeneratingSummary = _React$useState4[1];
+
+  _react["default"].useEffect(function () {
+    if (config.disable) {
+      setSummary('');
+      setGeneratingSummary(false);
+      return;
+    }
+
+    if (config.override) {
+      setSummary(config.override);
+      setGeneratingSummary(false);
+      return;
+    }
+
+    setTimeout(function () {
+      setSummary((0, _summarize.summarize)(providedData, hints, config, locale));
+      setGeneratingSummary(false);
+    }, 0);
+  }, [providedData, hints, config, locale]);
+
+  var handleSkip = _react["default"].useCallback(function () {
+    var _heavyFindNextFocusab;
+
+    if (!plotRef.current) return;
+    (_heavyFindNextFocusab = (0, _focus.heavyFindNextFocusableElement)(plotRef.current)) === null || _heavyFindNextFocusab === void 0 ? void 0 : _heavyFindNextFocusab.focus();
+  }, []);
+
+  var handleSkipKeyboard = _react["default"].useCallback(function (event) {
+    if (event.code !== 'Enter') return;
+    handleSkip();
+  }, [handleSkip]);
+
+  var handleGoToTable = _react["default"].useCallback(function () {
+    var _dataTableRef$current;
+
+    (_dataTableRef$current = dataTableRef.current) === null || _dataTableRef$current === void 0 ? void 0 : _dataTableRef$current.focus();
+  }, []);
+
+  var handleGoToTableKeyboard = _react["default"].useCallback(function (event) {
+    if (event.code !== 'Enter') return;
+    handleGoToTable();
+  }, [handleGoToTable]);
+
+  var texts = _react["default"].useMemo(function () {
+    return {
+      label: intl.formatMessage({
+        id: 'view-label'
+      }, {
+        plotLabel: plotLabel !== null && plotLabel !== void 0 ? plotLabel : intl.formatMessage({
+          id: 'view-default-plot-label'
+        })
+      }),
+      close: intl.formatMessage({
+        id: 'view-close'
+      }),
+      skipPlot: intl.formatMessage({
+        id: 'view-skip-plot'
+      }),
+      goToTable: intl.formatMessage({
+        id: 'view-go-to-table'
+      }),
+      summary: intl.formatMessage({
+        id: 'view-data-summary'
+      }),
+      summaryPlaceholder: intl.formatMessage({
+        id: 'view-summary-placeholder'
+      }),
+      table: intl.formatMessage({
+        id: 'view-table'
+      })
+    };
+  }, [intl, plotLabel]);
+
+  var dataTableRef = _react["default"].useRef(null);
+
+  return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPlotA11yView, _ref2.cn("SPlotA11yView", _objectSpread({}, (0, _core.assignProps)({
+    "tabIndex": 0,
+    "aria-label": texts.label
+  }, _ref))), /*#__PURE__*/_react["default"].createElement("a", _ref2.cn("a", {
+    "aria-hidden": true,
+    "onClick": handleSkip
+  }), texts.close), /*#__PURE__*/_react["default"].createElement("a", _ref2.cn("a", {
+    "role": "link",
+    "tabIndex": 0,
+    "onKeyDown": handleSkipKeyboard,
+    "onClick": handleSkip
+  }), texts.skipPlot), /*#__PURE__*/_react["default"].createElement("a", _ref2.cn("a", {
+    "role": "link",
+    "tabIndex": 0,
+    "onKeyDown": handleGoToTableKeyboard,
+    "onClick": handleGoToTable
+  }), texts.goToTable), /*#__PURE__*/_react["default"].createElement("strong", _ref2.cn("strong", {}), /*#__PURE__*/_react["default"].createElement("label", _ref2.cn("label", {
+    "htmlFor": "".concat(id, "-data-summary")
+  }), texts.summary)), /*#__PURE__*/_react["default"].createElement("div", _ref2.cn("div", {
+    "id": "".concat(id, "-data-summary"),
+    "aria-busy": generatingSummary,
+    "tabIndex": 0
+  }), generatingSummary ? texts.summaryPlaceholder : summary), /*#__PURE__*/_react["default"].createElement("strong", _ref2.cn("strong", {}), /*#__PURE__*/_react["default"].createElement("label", _ref2.cn("label", {
+    "htmlFor": "".concat(id, "-data-table")
+  }), texts.table)), /*#__PURE__*/_react["default"].createElement("table", _ref2.cn("table", {
+    "id": "".concat(id, "-data-table"),
+    "tabIndex": 0,
+    "ref": dataTableRef
+  }), /*#__PURE__*/_react["default"].createElement("thead", _ref2.cn("thead", {}), /*#__PURE__*/_react["default"].createElement("tr", _ref2.cn("tr", {}), keys.map(function (key, index) {
+    return /*#__PURE__*/_react["default"].createElement("th", {
+      key: "".concat(key, "-").concat(index)
+    }, renderTitle(key));
+  }))), /*#__PURE__*/_react["default"].createElement("tbody", _ref2.cn("tbody", {}), data.map(function (row, index) {
+    return /*#__PURE__*/_react["default"].createElement("tr", {
+      key: Object.values(row).join('-') + '-' + index
+    }, keys.map(function (key, index) {
+      return /*#__PURE__*/_react["default"].createElement("td", {
+        key: "".concat(key, "-").concat(index)
+      }, (0, _serialize.formatValue)(intl, row[key]));
+    }));
+  }))));
+};
+
+exports.PlotA11yView = PlotA11yView;
+//# sourceMappingURL=PlotA11yView.js.map