@telia-ace/widget-components-tab-stop 0.0.1

package/index.d.ts

@@ -0,0 +1,3 @@
+import { default as TabStopComponent } from './tab-stop-component';
+
+export default TabStopComponent;

package/index.js

@@ -0,0 +1 @@
+"use strict";const t=require("@telia-ace/widget-ui"),o=e=>t.createReactComponent(e,"tab-stop",Promise.resolve().then(()=>require("./tab-stop-7db5c970.js")));module.exports=o;

package/index.mjs

@@ -0,0 +1,5 @@
+import { createReactComponent as o } from "@telia-ace/widget-ui";
+const p = (t) => o(t, "tab-stop", import("./tab-stop-d7ffaa68.mjs"));
+export {
+  p as default
+};

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@telia-ace/widget-components-tab-stop",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@telia-ace/widget-core": "*",
+    "@telia-ace/widget-ui": "*",
+    "@telia-ace/widget-utilities": "*",
+    "@webprovisions/platform": "^1.1.4"
+  },
+  "peerDependencies": {
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "react": "18.2.0"
+  }
+}

package/tab-stop-7db5c970.js

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),y=require("@emotion/styled"),f=require("@telia-ace/widget-ui"),w=require("@telia-ace/widget-utilities"),n=require("react"),x=({className:l,...p})=>{const e=n.useRef(),u=f.useContainer(),{position:r="end"}=f.useProperties(),c=n.useRef(r);n.useEffect(()=>{c.current=r},[r]);const a=t=>{const[g]=u.get("widgetDOMElements"),s=Array.from(g.querySelectorAll('.humany-tab-stop, button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]):not(.humany-tab-stop):not([tabindex=""])')),m=s.indexOf(t.relatedTarget)<s.indexOf(t.target),o=s.filter(i=>typeof window>"u"?!0:!(window.getComputedStyle(i).display==="none"||i.offsetWidth<=0&&i.offsetHeight<=0)),d=c.current==="end"||m?o[0]:o[o.length-1];d&&d.focus()};return n.useEffect(()=>{const[t]=u.get("widgetDOMElements");return e.current&&t&&e.current.addEventListener("focus",a),()=>{e.current&&e.current.removeEventListener("focus",a)}},[]),b.jsx(E,{...p,tabIndex:0,ref:e,className:w.appendClassNames(l,"humany-tab-stop")})},E=y.div`
+  opacity: 0;
+  position: absolute;
+`;exports.default=x;

package/tab-stop-component.d.ts

@@ -0,0 +1,7 @@
+import { Container } from '@webprovisions/platform';
+
+export type TabStopComponentProps = {
+    position: 'start' | 'end';
+};
+declare const TabStopComponent: (container: Container) => Promise<void>;
+export default TabStopComponent;

package/tab-stop-d7ffaa68.mjs

@@ -0,0 +1,41 @@
+import { jsx as g } from "react/jsx-runtime";
+import y from "@emotion/styled";
+import { useContainer as x, useProperties as w } from "@telia-ace/widget-ui";
+import { appendClassNames as h } from "@telia-ace/widget-utilities";
+import { useRef as c, useEffect as d } from "react";
+const A = ({ className: m, ...p }) => {
+  const t = c(), i = x(), { position: n = "end" } = w(), a = c(n);
+  d(() => {
+    a.current = n;
+  }, [n]);
+  const f = (e) => {
+    const [l] = i.get(
+      "widgetDOMElements"
+    ), o = Array.from(
+      l.querySelectorAll(
+        '.humany-tab-stop, button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]):not(.humany-tab-stop):not([tabindex=""])'
+      )
+    ), b = o.indexOf(e.relatedTarget) < o.indexOf(e.target), r = o.filter((s) => typeof window > "u" ? !0 : !(window.getComputedStyle(s).display === "none" || s.offsetWidth <= 0 && s.offsetHeight <= 0)), u = a.current === "end" || b ? r[0] : r[r.length - 1];
+    u && u.focus();
+  };
+  return d(() => {
+    const [e] = i.get("widgetDOMElements");
+    return t.current && e && t.current.addEventListener("focus", f), () => {
+      t.current && t.current.removeEventListener("focus", f);
+    };
+  }, []), /* @__PURE__ */ g(
+    E,
+    {
+      ...p,
+      tabIndex: 0,
+      ref: t,
+      className: h(m, "humany-tab-stop")
+    }
+  );
+}, E = y.div`
+  opacity: 0;
+  position: absolute;
+`;
+export {
+  A as default
+};

package/tab-stop.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+type Props = {
+    className: string;
+};
+declare const TabStop: React.FC<Props>;
+export default TabStop;