@semcore/d3-chart 16.5.0 → 17.0.0-prerelease.9

package/lib/esm/a11y/PlotA11yModule.mjs

@@ -1,115 +1,72 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { sstyled, assignProps } from "@semcore/core";
+import { Box } from "@semcore/base-components";
 import { Context, useI18n } from "@semcore/core/lib/utils/enhances/WithI18n";
-import { Box } from "@semcore/flex-box";
 import React from "react";
 import { normalizeLocale } from "./locale.mjs";
 import { localizedMessages } from "./translations/module/__intergalactic-dynamic-locales.mjs";
 /*!__reshadow-styles__:"../style/plotA11yModule.shadow.css"*/
-var styles = (
+const styles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPlotA11yModule_1jy6a_gg_{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}.___SPlotA11yModule_1jy6a_gg_:focus{-webkit-user-select:all;-moz-user-select:all;user-select:all;pointer-events:all;opacity:1}",
+    ".___SPlotA11yModule_18nes_gg_{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0,}",
     /*__inner_css_end__*/
-    "1jy6a_gg_"
+    "18nes_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SPlotA11yModule": "___SPlotA11yModule_1jy6a_gg_"
+    "__SPlotA11yModule": "___SPlotA11yModule_18nes_gg_"
   })
 );
-var globalWasFocused = false;
-var globalNavWithKeyboard = false;
 function PlotA11yModule(props) {
-  var _ref = arguments[0], _ref5;
-  var SPlotA11yModule = Box;
-  var _React$useState = React.useState(globalWasFocused), _React$useState2 = _slicedToArray(_React$useState, 2), wasFocused = _React$useState2[0], setWasFocused = _React$useState2[1];
-  var _React$useState3 = React.useState(globalNavWithKeyboard), _React$useState4 = _slicedToArray(_React$useState3, 2), navWithKeyboard = _React$useState4[0], setNavWithKeyboard = _React$useState4[1];
-  var _React$useState5 = React.useState(null), _React$useState6 = _slicedToArray(_React$useState5, 2), plotA11yView = _React$useState6[0], setPlotA11yView = _React$useState6[1];
-  var hadnleHiddenElementsFocus = React.useCallback(function() {
-    setWasFocused(true);
-    setNavWithKeyboard(true);
-  }, []);
-  var _React$useState7 = React.useState(false), _React$useState8 = _slicedToArray(_React$useState7, 2), loading = _React$useState8[0], setLoading = _React$useState8[1];
-  var _React$useState9 = React.useState(null), _React$useState0 = _slicedToArray(_React$useState9, 2), error = _React$useState0[0], setError = _React$useState0[1];
-  var contextLocale = React.useContext(Context);
-  var locale = React.useMemo(function() {
-    var _props$locale;
-    return normalizeLocale((_props$locale = props.locale) !== null && _props$locale !== void 0 ? _props$locale : contextLocale, localizedMessages);
-  }, [props.locale]);
-  var t = useI18n(localizedMessages, locale);
-  React.useEffect(function() {
-    var _props$plotRef$curren;
-    if (wasFocused) return;
-    var focusListener = function focusListener2() {
-      globalWasFocused = true;
-      setWasFocused(true);
-    };
-    (_props$plotRef$curren = props.plotRef.current) === null || _props$plotRef$curren === 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.useEffect(function() {
-    var _document$body;
-    if (navWithKeyboard) return;
-    var keyboardListener = function keyboardListener2(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 || _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.useEffect(function() {
-    if (!shouldDisplayView) return;
+  var _ref = arguments[0], _ref3;
+  const SPlotA11yModule = Box;
+  const [isOpened, setIsOpened] = React.useState(false);
+  const [plotA11yView, setPlotA11yView] = React.useState(null);
+  const srButtonRef = React.useRef(null);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const contextLocale = React.useContext(Context);
+  const locale = React.useMemo(() => normalizeLocale(props.locale ?? contextLocale, localizedMessages), [props.locale]);
+  const t = useI18n(localizedMessages, locale);
+  React.useEffect(() => {
+    if (!isOpened) return;
     if (plotA11yView) return;
     if (loading) return;
     setLoading(true);
-    import("./PlotA11yView.mjs").then(function(_ref6) {
-      var PlotA11yView = _ref6.PlotA11yView;
+    import("./PlotA11yView.mjs").then(({
+      PlotA11yView
+    }) => {
       setPlotA11yView({
         Component: PlotA11yView
       });
       setLoading(false);
       setError(null);
-    })["catch"](function(error2) {
+    }).catch((error2) => {
       console.error(error2);
       setError(error2);
+      setLoading(false);
     });
-  }, [plotA11yView, shouldDisplayView, loading, setLoading]);
+  }, [plotA11yView, isOpened, loading, setLoading]);
   if (plotA11yView) {
     return sstyled(styles), /* @__PURE__ */ React.createElement(plotA11yView.Component, _extends({}, props, {
+      onCloseHandler: () => {
+        setIsOpened(false);
+        setPlotA11yView(null);
+      },
+      triggerRef: srButtonRef,
       locale
     }));
   }
-  if (error) {
-    var _ref3;
-    return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SPlotA11yModule, _ref3.cn("SPlotA11yModule", _objectSpread({}, assignProps({
-      "tabIndex": 0,
-      "aria-live": "assertive"
-    }, _ref))), t("failed"));
-  }
-  if (loading) {
-    var _ref4;
-    return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SPlotA11yModule, _ref4.cn("SPlotA11yModule", _objectSpread({}, assignProps({
-      "tabIndex": 0,
-      "aria-live": "polite"
-    }, _ref))), t("loading"));
-  }
-  return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SPlotA11yModule, _ref5.cn("SPlotA11yModule", _objectSpread({}, assignProps({
-    "tabIndex": 0,
-    "onFocus": hadnleHiddenElementsFocus
-  }, _ref))), t("disabled"));
+  return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SPlotA11yModule, _ref3.cn("SPlotA11yModule", {
+    ...assignProps({}, _ref)
+  }), /* @__PURE__ */ React.createElement("button", _ref3.cn("button", {
+    "ref": srButtonRef,
+    "onClick": () => setIsOpened(true),
+    "aria-label": t("PlotA11yModule.ScreenReaderOnlyButton.Label")
+  })), /* @__PURE__ */ React.createElement(Box, _ref3.cn("Box", {
+    "role": "status"
+  }), loading && t("loading"), error && t("failed")));
 }
 export {
   PlotA11yModule

package/lib/esm/a11y/PlotA11yView.mjs

@@ -1,8 +1,6 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { sstyled, assignProps } from "@semcore/core";
+import { Box } from "@semcore/base-components";
 import { useAsyncI18nMessages } from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import { Box } from "@semcore/flex-box";
 import React from "react";
 import { DataAccessibilityTable } from "./DataAccessibilityTable.mjs";
 import { heavyFindNextFocusableElement } from "./focus.mjs";
@@ -11,35 +9,57 @@ import { getIntl } from "./intl.mjs";
 import { summarize } from "./summarize.mjs";
 import { localizedMessages } from "./translations/view/__intergalactic-dynamic-locales.mjs";
 /*!__reshadow-styles__:"../style/plotA11yView.shadow.css"*/
-var styles = (
+const styles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPlotA11yView_5y734_gg_{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);color:var(--intergalactic-text-primary, #191b23);border:3px solid var(--intergalactic-border-primary, #c4c7cf);font-size:var(--intergalactic-fs-50, 10px);padding:2px;width:200px;height:200px;max-width:80%;max-height:80%;overflow:auto}.___SPlotA11yView_5y734_gg_:focus,.___SPlotA11yView_5y734_gg_:focus-within{-webkit-user-select:all;-moz-user-select:all;user-select:all;pointer-events:all;opacity:1;z-index:var(--intergalactic-z-index-overlay, 500);position:relative;display:block}.___SPlotA11yView_5y734_gg_ a{cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline;margin-bottom:var(--intergalactic-spacing-2x, 8px);display:block}.___SPlotA11yView_5y734_gg_ table,.___SPlotA11yView_5y734_gg_ td,.___SPlotA11yView_5y734_gg_ th{border:1px solid var(--intergalactic-border-primary, #c4c7cf)}",
+    ".___SPlotA11yView_9ugu2_gg_{position:relative;display:block;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);color:var(--intergalactic-text-primary, #191b23);border:3px solid var(--intergalactic-border-primary, #c4c7cf);font-size:var(--intergalactic-fs-50, 10px);z-index:var(--intergalactic-z-index-overlay, 500);padding:2px;width:200px;height:200px;max-width:80%;max-height:80%;overflow:auto}.___SPlotA11yView_9ugu2_gg_ a{cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline;margin-bottom:var(--intergalactic-spacing-2x, 8px);display:block}.___SPlotA11yView_9ugu2_gg_ table,.___SPlotA11yView_9ugu2_gg_ td,.___SPlotA11yView_9ugu2_gg_ th{border:1px solid var(--intergalactic-border-primary, #c4c7cf)}",
     /*__inner_css_end__*/
-    "5y734_gg_"
+    "9ugu2_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SPlotA11yView": "___SPlotA11yView_5y734_gg_"
+    "__SPlotA11yView": "___SPlotA11yView_9ugu2_gg_"
   })
 );
-var PlotA11yView = function PlotA11yView2(_ref3) {
+const PlotA11yView = ({
+  id,
+  payload: providedData,
+  hints,
+  plotLabel,
+  triggerRef,
+  plotRef,
+  config: providedConfig,
+  locale,
+  onCloseHandler
+}) => {
   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 = Box;
-  var translations = useAsyncI18nMessages(localizedMessages, locale);
-  var intl = React.useMemo(function() {
-    return getIntl(locale, translations, localizedMessages);
-  }, [locale, translations, localizedMessages]);
-  var config = React.useMemo(function() {
-    return makeDataSummarizationConfig(providedConfig);
-  }, [providedConfig]);
-  var data = React.useMemo(function() {
-    return Array.isArray(providedData) ? providedData : [providedData];
-  }, [providedData]);
-  var _React$useState = React.useState(null), _React$useState2 = _slicedToArray(_React$useState, 2), summary = _React$useState2[0], setSummary = _React$useState2[1];
-  var _React$useState3 = React.useState(true), _React$useState4 = _slicedToArray(_React$useState3, 2), generatingSummary = _React$useState4[0], setGeneratingSummary = _React$useState4[1];
-  React.useEffect(function() {
+  const SPlotA11yView = Box;
+  const translations = useAsyncI18nMessages(localizedMessages, locale);
+  const intl = React.useMemo(() => getIntl(locale, translations, localizedMessages), [locale, translations, localizedMessages]);
+  const config = React.useMemo(() => makeDataSummarizationConfig(providedConfig), [providedConfig]);
+  const data = React.useMemo(() => Array.isArray(providedData) ? providedData : [providedData], [providedData]);
+  const rootRef = React.useRef(null);
+  const [summary, setSummary] = React.useState(null);
+  const [generatingSummary, setGeneratingSummary] = React.useState(true);
+  React.useEffect(() => {
+    var _a, _b;
+    (_a = rootRef.current) == null ? void 0 : _a.focus();
+    function focusOutHandler(event) {
+      var _a2;
+      if (event.relatedTarget === null) {
+        return requestIdleCallback(onCloseHandler);
+      }
+      if (!(event.relatedTarget instanceof HTMLElement)) return;
+      if ((_a2 = rootRef.current) == null ? void 0 : _a2.contains(event.relatedTarget)) return;
+      requestIdleCallback(onCloseHandler);
+    }
+    (_b = rootRef.current) == null ? void 0 : _b.addEventListener("focusout", focusOutHandler);
+    return () => {
+      var _a2;
+      return (_a2 = rootRef.current) == null ? void 0 : _a2.removeEventListener("focusout", focusOutHandler);
+    };
+  }, []);
+  React.useEffect(() => {
     if (config.disable) {
       setSummary("");
       setGeneratingSummary(false);
@@ -50,70 +70,75 @@ var PlotA11yView = function PlotA11yView2(_ref3) {
       setGeneratingSummary(false);
       return;
     }
-    setTimeout(function() {
+    setTimeout(() => {
       setSummary(summarize(providedData, hints, config, locale, translations, localizedMessages));
       setGeneratingSummary(false);
     }, 0);
   }, [providedData, hints, config, locale, translations, localizedMessages]);
-  var handleClose = React.useCallback(function() {
-    var _plotRef$current;
-    (_plotRef$current = plotRef.current) === null || _plotRef$current === void 0 || _plotRef$current.focus();
+  const handleClose = React.useCallback(() => {
+    onCloseHandler();
+    requestIdleCallback(() => {
+      var _a;
+      (_a = triggerRef.current) == null ? void 0 : _a.focus();
+    });
   }, []);
-  var handleSkip = React.useCallback(function(event) {
-    var _heavyFindNextFocusab;
+  const handleSkip = React.useCallback((event) => {
+    var _a;
     event.preventDefault();
     if (!plotRef.current) return;
-    (_heavyFindNextFocusab = heavyFindNextFocusableElement(plotRef.current)) === null || _heavyFindNextFocusab === void 0 || _heavyFindNextFocusab.focus();
+    (_a = heavyFindNextFocusableElement(plotRef.current)) == null ? void 0 : _a.focus();
+    onCloseHandler();
   }, []);
-  var handleSkipKeyboard = React.useCallback(function(event) {
+  const handleSkipKeyboard = React.useCallback((event) => {
     if (!(event.key === "Enter" || event.key === " ")) return;
     handleSkip(event);
   }, [handleSkip]);
-  var handleGoToTable = React.useCallback(function(event) {
-    var _dataTableRef$current;
+  const handleGoToTable = React.useCallback((event) => {
+    var _a;
     event.preventDefault();
-    (_dataTableRef$current = dataTableRef.current) === null || _dataTableRef$current === void 0 || _dataTableRef$current.focus();
+    (_a = dataTableRef.current) == null ? void 0 : _a.focus();
   }, []);
-  var handleGoToTableKeyboard = React.useCallback(function(event) {
+  const handleGoToTableKeyboard = React.useCallback((event) => {
     if (!(event.key === "Enter" || event.key === " ")) return;
     handleGoToTable(event);
   }, [handleGoToTable]);
-  var texts = React.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"
+  const texts = React.useMemo(() => ({
+    label: intl.formatMessage({
+      id: "view-label"
+    }, {
+      plotLabel: plotLabel ?? intl.formatMessage({
+        id: "view-default-plot-label"
       })
-    };
-  }, [intl, plotLabel]);
-  var dataTableRef = React.useRef(null);
-  return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SPlotA11yView, _ref2.cn("SPlotA11yView", _objectSpread({}, assignProps({
-    "tabIndex": 0,
-    "aria-label": texts.label,
-    "role": "dialog",
-    "__excludeProps": ["data"]
-  }, _ref))), /* @__PURE__ */ React.createElement("button", _ref2.cn("button", {
+    }),
+    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]);
+  const dataTableRef = React.useRef(null);
+  return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SPlotA11yView, _ref2.cn("SPlotA11yView", {
+    ...assignProps({
+      "tabIndex": 0,
+      "aria-label": texts.label,
+      "role": "dialog",
+      "__excludeProps": ["data"],
+      "ref": rootRef
+    }, _ref)
+  }), /* @__PURE__ */ React.createElement("button", _ref2.cn("button", {
     "type": "button",
     "onClick": handleClose
   }), texts.close), /* @__PURE__ */ React.createElement("a", _ref2.cn("a", {
@@ -121,16 +146,16 @@ var PlotA11yView = function PlotA11yView2(_ref3) {
     "onKeyDown": handleSkipKeyboard,
     "onClick": handleSkip
   }), texts.skipPlot), /* @__PURE__ */ React.createElement("a", _ref2.cn("a", {
-    "href": "#".concat(id, "-data-table"),
+    "href": `#${id}-data-table`,
     "onKeyDown": handleGoToTableKeyboard,
     "onClick": handleGoToTable
   }), texts.goToTable), /* @__PURE__ */ React.createElement("strong", _ref2.cn("strong", {}), /* @__PURE__ */ React.createElement("label", _ref2.cn("label", {
-    "htmlFor": "".concat(id, "-data-summary")
+    "htmlFor": `${id}-data-summary`
   }), texts.summary)), /* @__PURE__ */ React.createElement("div", _ref2.cn("div", {
-    "id": "".concat(id, "-data-summary"),
+    "id": `${id}-data-summary`,
     "aria-busy": generatingSummary
   }), generatingSummary ? texts.summaryPlaceholder : summary), /* @__PURE__ */ React.createElement("strong", _ref2.cn("strong", {}), /* @__PURE__ */ React.createElement("label", _ref2.cn("label", {
-    "htmlFor": "".concat(id, "-data-table")
+    "htmlFor": `${id}-data-table`
   }), texts.table)), /* @__PURE__ */ React.createElement(DataAccessibilityTable, _ref2.cn("DataAccessibilityTable", {
     "id": id,
     "dataTableRef": dataTableRef,

package/lib/esm/a11y/bezier.mjs

@@ -1,29 +1,22 @@
-var makeBezier = function makeBezier2(points, bounds) {
-  var yPoints = points.map(function(point) {
-    return point.y;
-  });
-  var noPoints = points.map(function() {
-    return 1;
-  });
-  var weightPoints = points.map(function(point) {
-    var _point$weight;
-    return (_point$weight = point.weight) !== null && _point$weight !== void 0 ? _point$weight : 1;
-  });
-  var process = function process2(t, points2) {
-    var result = 0;
-    for (var i = 0; i < points2.length; i++) {
-      var tPower = i;
-      var reversedTPower = points2.length - 1 - i;
-      var edge = i === 0 || i === points2.length - 1;
-      var factor = edge ? 1 : points2.length - 1;
-      var point = points2[i];
-      var weight = weightPoints[i];
-      result += factor * Math.pow(t, tPower) * Math.pow(1 - t, reversedTPower) * point * weight;
+const makeBezier = (points, bounds) => {
+  const yPoints = points.map((point) => point.y);
+  const noPoints = points.map(() => 1);
+  const weightPoints = points.map((point) => point.weight ?? 1);
+  const process = (t, points2) => {
+    let result = 0;
+    for (let i = 0; i < points2.length; i++) {
+      const tPower = i;
+      const reversedTPower = points2.length - 1 - i;
+      const edge = i === 0 || i === points2.length - 1;
+      const factor = edge ? 1 : points2.length - 1;
+      const point = points2[i];
+      const weight = weightPoints[i];
+      result += factor * t ** tPower * (1 - t) ** reversedTPower * point * weight;
     }
     return result;
   };
-  return function(x) {
-    var t = x / bounds.width;
+  return (x) => {
+    const t = x / bounds.width;
     return process(t, yPoints) / process(t, noPoints);
   };
 };

package/lib/esm/a11y/focus.mjs

@@ -1,39 +1,38 @@
 import { isFocusable } from "@semcore/core/lib/utils/focus-lock/isFocusable";
-var _findNextFocusableElementInChildren = function findNextFocusableElementInChildren(element) {
+const findNextFocusableElementInChildren = (element) => {
   if (element && isFocusable(element)) {
     return element;
   }
-  var children = element === null || element === void 0 ? void 0 : element.children;
+  const children = element == null ? void 0 : element.children;
   if (children) {
-    for (var i = 0; i < children.length; i++) {
-      var childChild = children.item(i);
+    for (let i = 0; i < children.length; i++) {
+      const childChild = children.item(i);
       if (!childChild) continue;
-      var result = _findNextFocusableElementInChildren(childChild);
+      const result = findNextFocusableElementInChildren(childChild);
       if (result) return result;
     }
   }
   return null;
 };
-var makeParentsChain = function makeParentsChain2(element) {
-  var parents = [];
-  var parent = element.parentElement;
+const makeParentsChain = (element) => {
+  const parents = [];
+  let parent = element.parentElement;
   while (parent) {
     parents.push(parent);
     parent = parent.parentElement;
   }
   return parents;
 };
-var heavyFindNextFocusableElement = function heavyFindNextFocusableElement2(base) {
-  var parents = makeParentsChain(base);
-  for (var i = 0; i < parents.length; i++) {
-    var _parent$children;
-    var parent = parents[i];
-    var siblings = Array.from((_parent$children = parent === null || parent === void 0 ? void 0 : parent.children) !== null && _parent$children !== void 0 ? _parent$children : []);
+const heavyFindNextFocusableElement = (base) => {
+  const parents = makeParentsChain(base);
+  for (let i = 0; i < parents.length; i++) {
+    const parent = parents[i];
+    let siblings = Array.from((parent == null ? void 0 : parent.children) ?? []);
     if (siblings.indexOf(parents[i - 1] || base) !== -1) {
       siblings = siblings.slice(siblings.indexOf(parents[i - 1] || base) + 1);
     }
-    for (var _i = 0; _i < siblings.length; _i++) {
-      var focusable = _findNextFocusableElementInChildren(siblings[_i]);
+    for (let i2 = 0; i2 < siblings.length; i2++) {
+      const focusable = findNextFocusableElementInChildren(siblings[i2]);
       if (focusable) return focusable;
     }
   }