@telia-ace/widget-components-tab-stop 1.0.3 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
File without changes
package/dist/index.js ADDED
@@ -0,0 +1,6 @@
1
+ import { createReactComponent } from "@telia-ace/widget-ui";
2
+ const TabStopComponent = (container) => {
3
+ return createReactComponent(container, "tab-stop", import("./tab-stop.js"));
4
+ };
5
+ export { TabStopComponent as default };
6
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../src/tab-stop-component.ts"],"sourcesContent":["import { createReactComponent } from '@telia-ace/widget-ui';\r\nimport { Container } from '@webprovisions/platform';\r\n\r\nexport type TabStopComponentProps = {\r\n position: 'start' | 'end';\r\n};\r\n\r\nconst TabStopComponent = (container: Container) => {\r\n return createReactComponent(container, 'tab-stop', import('./tab-stop'));\r\n};\r\n\r\nexport default TabStopComponent;\r\n"],"names":[],"mappings":";AAOM,MAAA,mBAAmB,CAAC,cAAyB;AAC/C,SAAO,qBAAqB,WAAW,YAAY,OAAO,gBAAa;AAC3E;;"}
File without changes
File without changes
@@ -0,0 +1,85 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
32
+ import { useContainer, useProperties } from "@telia-ace/widget-ui";
33
+ import { appendClassNames } from "@telia-ace/widget-utilities";
34
+ import React, { useRef, useEffect } from "react";
35
+ import styled from "styled-components";
36
+ const TabStop = (_a) => {
37
+ var _b = _a, { className } = _b, other = __objRest(_b, ["className"]);
38
+ const node = useRef();
39
+ const container = useContainer();
40
+ const { position = "end" } = useProperties();
41
+ const positionRef = useRef(position);
42
+ useEffect(() => {
43
+ positionRef.current = position;
44
+ }, [position]);
45
+ const focusHandler = () => {
46
+ const [widgetDOMElement] = container.get("widgetDOMElements");
47
+ const focusable = widgetDOMElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]):not(.humany-tab-stop)');
48
+ const filtered = [].filter.call(focusable, (el) => {
49
+ if (typeof window === "undefined") {
50
+ return true;
51
+ }
52
+ const style = window.getComputedStyle(el);
53
+ if (style.display === "none" || el.offsetWidth <= 0 && el.offsetHeight <= 0) {
54
+ return false;
55
+ }
56
+ return true;
57
+ });
58
+ const target = positionRef.current === "end" ? filtered[0] : filtered[filtered.length - 1];
59
+ if (target) {
60
+ target.focus();
61
+ }
62
+ };
63
+ useEffect(() => {
64
+ const [widgetDOMElement] = container.get("widgetDOMElements");
65
+ if (node.current && widgetDOMElement) {
66
+ node.current.addEventListener("focus", focusHandler);
67
+ }
68
+ return () => {
69
+ if (node.current) {
70
+ node.current.removeEventListener("focus", focusHandler);
71
+ }
72
+ };
73
+ }, []);
74
+ return /* @__PURE__ */ React.createElement(Wrapper, __spreadProps(__spreadValues({}, other), {
75
+ tabIndex: 0,
76
+ ref: node,
77
+ className: appendClassNames(className, "humany-tab-stop")
78
+ }));
79
+ };
80
+ const Wrapper = styled.div`
81
+ opacity: 0;
82
+ position: absolute;
83
+ `;
84
+ export { TabStop as default };
85
+ //# sourceMappingURL=tab-stop.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tab-stop.js","sources":["../src/tab-stop.tsx"],"sourcesContent":["import { useContainer, useProperties } from '@telia-ace/widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React, { useEffect, useRef } from 'react';\r\nimport styled from 'styled-components';\r\nimport { TabStopComponentProps } from './tab-stop-component';\r\n\r\ntype Props = {\r\n className: string;\r\n};\r\n\r\nconst TabStop: React.SFC<Props> = ({ className, ...other }) => {\r\n const node = useRef() as React.MutableRefObject<HTMLDivElement>;\r\n const container = useContainer();\r\n const { position = 'end' } = useProperties<TabStopComponentProps>();\r\n const positionRef = useRef(position) as React.MutableRefObject<'start' | 'end'>;\r\n\r\n useEffect(() => {\r\n positionRef.current = position;\r\n }, [position]);\r\n\r\n const focusHandler = () => {\r\n const [widgetDOMElement] = container.get('widgetDOMElements') as HTMLElement[];\r\n\r\n const focusable = widgetDOMElement.querySelectorAll(\r\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"]):not(.humany-tab-stop)'\r\n );\r\n\r\n // ensure that elements is visible\r\n const filtered = [].filter.call(focusable, (el: HTMLElement) => {\r\n if (typeof window === 'undefined') {\r\n return true;\r\n }\r\n\r\n const style = window.getComputedStyle(el);\r\n if (style.display === 'none' || (el.offsetWidth <= 0 && el.offsetHeight <= 0)) {\r\n return false;\r\n }\r\n return true;\r\n }) as HTMLElement[];\r\n\r\n const target = positionRef.current === 'end' ? filtered[0] : filtered[filtered.length - 1];\r\n\r\n if (target) {\r\n target.focus();\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n const [widgetDOMElement] = container.get('widgetDOMElements');\r\n\r\n if (node.current && widgetDOMElement) {\r\n node.current.addEventListener('focus', focusHandler);\r\n }\r\n\r\n return () => {\r\n if (node.current) {\r\n node.current.removeEventListener('focus', focusHandler);\r\n }\r\n };\r\n }, []);\r\n\r\n return (\r\n <Wrapper\r\n {...other}\r\n tabIndex={0}\r\n ref={node}\r\n className={appendClassNames(className, 'humany-tab-stop')}\r\n />\r\n );\r\n};\r\n\r\nexport default TabStop;\r\n\r\nconst Wrapper = styled.div`\r\n opacity: 0;\r\n position: absolute;\r\n`;\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,UAA4B,CAAC,OAA4B;AAA5B,eAAE,gBAAF,IAAgB,kBAAhB,IAAgB,CAAd;AACjC,QAAM,OAAO;AACb,QAAM,YAAY;AACZ,QAAA,EAAE,WAAW,UAAU,cAAqC;AAC5D,QAAA,cAAc,OAAO,QAAQ;AAEnC,YAAU,MAAM;AACZ,gBAAY,UAAU;AAAA,EAAA,GACvB,CAAC,QAAQ,CAAC;AAEb,QAAM,eAAe,MAAM;AACvB,UAAM,CAAC,oBAAoB,UAAU,IAAI,mBAAmB;AAEtD,UAAA,YAAY,iBAAiB,iBAC/B,gGACJ;AAGA,UAAM,WAAW,CAAA,EAAG,OAAO,KAAK,WAAW,CAAC,OAAoB;AACxD,UAAA,OAAO,WAAW,aAAa;AACxB,eAAA;AAAA,MACX;AAEM,YAAA,QAAQ,OAAO,iBAAiB,EAAE;AACpC,UAAA,MAAM,YAAY,UAAW,GAAG,eAAe,KAAK,GAAG,gBAAgB,GAAI;AACpE,eAAA;AAAA,MACX;AACO,aAAA;AAAA,IAAA,CACV;AAEK,UAAA,SAAS,YAAY,YAAY,QAAQ,SAAS,KAAK,SAAS,SAAS,SAAS;AAExF,QAAI,QAAQ;AACR,aAAO,MAAM;AAAA,IACjB;AAAA,EAAA;AAGJ,YAAU,MAAM;AACZ,UAAM,CAAC,oBAAoB,UAAU,IAAI,mBAAmB;AAExD,QAAA,KAAK,WAAW,kBAAkB;AAC7B,WAAA,QAAQ,iBAAiB,SAAS,YAAY;AAAA,IACvD;AAEA,WAAO,MAAM;AACT,UAAI,KAAK,SAAS;AACT,aAAA,QAAQ,oBAAoB,SAAS,YAAY;AAAA,MAC1D;AAAA,IAAA;AAAA,EAER,GAAG,CAAE,CAAA;AAEL,SACK,sBAAA,cAAA,SAAA,iCACO,QADP;AAAA,IAEG,UAAU;AAAA,IACV,KAAK;AAAA,IACL,WAAW,iBAAiB,WAAW,iBAAiB;AAAA,EAAA,EAC5D;AAER;AAIA,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;;"}
package/package.json CHANGED
@@ -1,33 +1,34 @@
1
1
  {
2
2
  "name": "@telia-ace/widget-components-tab-stop",
3
- "version": "1.0.3",
3
+ "version": "1.0.6",
4
4
  "description": "Tab stop component for ACE Widgets.",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "author": "Telia Company AB",
7
7
  "keywords": [
8
8
  "telia"
9
9
  ],
10
- "main": "lib/index.js",
11
- "module": "lib-esm/index.js",
10
+ "module": "dist/index.js",
11
+ "types": "dist/index.d.ts",
12
12
  "files": [
13
13
  "LICENSE.txt",
14
14
  "README.md",
15
- "lib/",
16
- "lib-esm/"
15
+ "dist/"
17
16
  ],
18
17
  "publishConfig": {
19
18
  "access": "public"
20
19
  },
21
20
  "scripts": {
22
- "clean": "cleandir lib && cleandir lib-esm",
23
- "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
21
+ "clean": "rimraf ./dist",
22
+ "precompile": "tsc -emitDeclarationOnly",
23
+ "compile": "vite build"
24
24
  },
25
25
  "sideEffects": false,
26
- "typings": "lib/index.d.ts",
27
26
  "dependencies": {
28
- "@telia-ace/widget-ui": "^1.0.3",
27
+ "@telia-ace/widget-ui": "^1.0.9",
29
28
  "@telia-ace/widget-utilities": "^1.0.1",
30
- "@webprovisions/platform": "^1.1.2",
29
+ "@webprovisions/platform": "^1.1.2"
30
+ },
31
+ "peerDependencies": {
31
32
  "react": "^16.8.0",
32
33
  "react-dom": "^16.8.0",
33
34
  "styled-components": "^4.3.2"
@@ -37,5 +38,5 @@
37
38
  "@types/react-dom": "^16.8.0",
38
39
  "@types/styled-components": "^5.1.7"
39
40
  },
40
- "gitHead": "5440857927191297b8094bdfef392876e9cf0cef"
41
+ "gitHead": "2cb095d784f90b8a0783f02898c67ca3c46169cf"
41
42
  }
package/lib/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import TabStopComponent from './tab-stop-component';
2
- export default TabStopComponent;
package/lib/index.js DELETED
@@ -1,7 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- var tab_stop_component_1 = __importDefault(require("./tab-stop-component"));
7
- exports.default = tab_stop_component_1.default;
@@ -1,6 +0,0 @@
1
- import { Container } from '@webprovisions/platform';
2
- export declare type TabStopComponentProps = {
3
- position: 'start' | 'end';
4
- };
5
- declare const TabStopComponent: (container: Container) => Promise<void>;
6
- export default TabStopComponent;
@@ -1,30 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- var widget_ui_1 = require("@telia-ace/widget-ui");
27
- var TabStopComponent = function (container) {
28
- return (0, widget_ui_1.createReactComponent)(container, 'tab-stop', Promise.resolve().then(function () { return __importStar(require('./tab-stop')); }));
29
- };
30
- exports.default = TabStopComponent;
package/lib/tab-stop.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- declare type Props = {
3
- className: string;
4
- };
5
- declare const TabStop: React.SFC<Props>;
6
- export default TabStop;
package/lib/tab-stop.js DELETED
@@ -1,118 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- var __assign = (this && this.__assign) || function () {
7
- __assign = Object.assign || function(t) {
8
- for (var s, i = 1, n = arguments.length; i < n; i++) {
9
- s = arguments[i];
10
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
- t[p] = s[p];
12
- }
13
- return t;
14
- };
15
- return __assign.apply(this, arguments);
16
- };
17
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
- if (k2 === undefined) k2 = k;
19
- var desc = Object.getOwnPropertyDescriptor(m, k);
20
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
21
- desc = { enumerable: true, get: function() { return m[k]; } };
22
- }
23
- Object.defineProperty(o, k2, desc);
24
- }) : (function(o, m, k, k2) {
25
- if (k2 === undefined) k2 = k;
26
- o[k2] = m[k];
27
- }));
28
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
29
- Object.defineProperty(o, "default", { enumerable: true, value: v });
30
- }) : function(o, v) {
31
- o["default"] = v;
32
- });
33
- var __importStar = (this && this.__importStar) || function (mod) {
34
- if (mod && mod.__esModule) return mod;
35
- var result = {};
36
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
37
- __setModuleDefault(result, mod);
38
- return result;
39
- };
40
- var __rest = (this && this.__rest) || function (s, e) {
41
- var t = {};
42
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
43
- t[p] = s[p];
44
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
45
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
46
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
47
- t[p[i]] = s[p[i]];
48
- }
49
- return t;
50
- };
51
- var __read = (this && this.__read) || function (o, n) {
52
- var m = typeof Symbol === "function" && o[Symbol.iterator];
53
- if (!m) return o;
54
- var i = m.call(o), r, ar = [], e;
55
- try {
56
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
57
- }
58
- catch (error) { e = { error: error }; }
59
- finally {
60
- try {
61
- if (r && !r.done && (m = i["return"])) m.call(i);
62
- }
63
- finally { if (e) throw e.error; }
64
- }
65
- return ar;
66
- };
67
- var __importDefault = (this && this.__importDefault) || function (mod) {
68
- return (mod && mod.__esModule) ? mod : { "default": mod };
69
- };
70
- Object.defineProperty(exports, "__esModule", { value: true });
71
- var widget_ui_1 = require("@telia-ace/widget-ui");
72
- var widget_utilities_1 = require("@telia-ace/widget-utilities");
73
- var react_1 = __importStar(require("react"));
74
- var styled_components_1 = __importDefault(require("styled-components"));
75
- var TabStop = function (_a) {
76
- var className = _a.className, other = __rest(_a, ["className"]);
77
- var node = (0, react_1.useRef)();
78
- var container = (0, widget_ui_1.useContainer)();
79
- var _b = (0, widget_ui_1.useProperties)().position, position = _b === void 0 ? 'end' : _b;
80
- var positionRef = (0, react_1.useRef)(position);
81
- (0, react_1.useEffect)(function () {
82
- positionRef.current = position;
83
- }, [position]);
84
- var focusHandler = function () {
85
- var _a = __read(container.get('widgetDOMElements'), 1), widgetDOMElement = _a[0];
86
- var focusable = widgetDOMElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]):not(.humany-tab-stop)');
87
- // ensure that elements is visible
88
- var filtered = [].filter.call(focusable, function (el) {
89
- if (typeof window === 'undefined') {
90
- return true;
91
- }
92
- var style = window.getComputedStyle(el);
93
- if (style.display === 'none' || (el.offsetWidth <= 0 && el.offsetHeight <= 0)) {
94
- return false;
95
- }
96
- return true;
97
- });
98
- var target = positionRef.current === 'end' ? filtered[0] : filtered[filtered.length - 1];
99
- if (target) {
100
- target.focus();
101
- }
102
- };
103
- (0, react_1.useEffect)(function () {
104
- var _a = __read(container.get('widgetDOMElements'), 1), widgetDOMElement = _a[0];
105
- if (node.current && widgetDOMElement) {
106
- node.current.addEventListener('focus', focusHandler);
107
- }
108
- return function () {
109
- if (node.current) {
110
- node.current.removeEventListener('focus', focusHandler);
111
- }
112
- };
113
- }, []);
114
- return (react_1.default.createElement(Wrapper, __assign({}, other, { tabIndex: 0, ref: node, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-tab-stop') })));
115
- };
116
- exports.default = TabStop;
117
- var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n"], ["\n opacity: 0;\n position: absolute;\n"])));
118
- var templateObject_1;
package/lib-esm/index.js DELETED
@@ -1,2 +0,0 @@
1
- import TabStopComponent from './tab-stop-component';
2
- export default TabStopComponent;
@@ -1,5 +0,0 @@
1
- import { createReactComponent } from '@telia-ace/widget-ui';
2
- var TabStopComponent = function (container) {
3
- return createReactComponent(container, 'tab-stop', import('./tab-stop'));
4
- };
5
- export default TabStopComponent;
@@ -1,90 +0,0 @@
1
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
- return cooked;
4
- };
5
- var __assign = (this && this.__assign) || function () {
6
- __assign = Object.assign || function(t) {
7
- for (var s, i = 1, n = arguments.length; i < n; i++) {
8
- s = arguments[i];
9
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
10
- t[p] = s[p];
11
- }
12
- return t;
13
- };
14
- return __assign.apply(this, arguments);
15
- };
16
- var __rest = (this && this.__rest) || function (s, e) {
17
- var t = {};
18
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
19
- t[p] = s[p];
20
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
21
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
22
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
23
- t[p[i]] = s[p[i]];
24
- }
25
- return t;
26
- };
27
- var __read = (this && this.__read) || function (o, n) {
28
- var m = typeof Symbol === "function" && o[Symbol.iterator];
29
- if (!m) return o;
30
- var i = m.call(o), r, ar = [], e;
31
- try {
32
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
33
- }
34
- catch (error) { e = { error: error }; }
35
- finally {
36
- try {
37
- if (r && !r.done && (m = i["return"])) m.call(i);
38
- }
39
- finally { if (e) throw e.error; }
40
- }
41
- return ar;
42
- };
43
- import { useContainer, useProperties } from '@telia-ace/widget-ui';
44
- import { appendClassNames } from '@telia-ace/widget-utilities';
45
- import React, { useEffect, useRef } from 'react';
46
- import styled from 'styled-components';
47
- var TabStop = function (_a) {
48
- var className = _a.className, other = __rest(_a, ["className"]);
49
- var node = useRef();
50
- var container = useContainer();
51
- var _b = useProperties().position, position = _b === void 0 ? 'end' : _b;
52
- var positionRef = useRef(position);
53
- useEffect(function () {
54
- positionRef.current = position;
55
- }, [position]);
56
- var focusHandler = function () {
57
- var _a = __read(container.get('widgetDOMElements'), 1), widgetDOMElement = _a[0];
58
- var focusable = widgetDOMElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]):not(.humany-tab-stop)');
59
- // ensure that elements is visible
60
- var filtered = [].filter.call(focusable, function (el) {
61
- if (typeof window === 'undefined') {
62
- return true;
63
- }
64
- var style = window.getComputedStyle(el);
65
- if (style.display === 'none' || (el.offsetWidth <= 0 && el.offsetHeight <= 0)) {
66
- return false;
67
- }
68
- return true;
69
- });
70
- var target = positionRef.current === 'end' ? filtered[0] : filtered[filtered.length - 1];
71
- if (target) {
72
- target.focus();
73
- }
74
- };
75
- useEffect(function () {
76
- var _a = __read(container.get('widgetDOMElements'), 1), widgetDOMElement = _a[0];
77
- if (node.current && widgetDOMElement) {
78
- node.current.addEventListener('focus', focusHandler);
79
- }
80
- return function () {
81
- if (node.current) {
82
- node.current.removeEventListener('focus', focusHandler);
83
- }
84
- };
85
- }, []);
86
- return (React.createElement(Wrapper, __assign({}, other, { tabIndex: 0, ref: node, className: appendClassNames(className, 'humany-tab-stop') })));
87
- };
88
- export default TabStop;
89
- var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n"], ["\n opacity: 0;\n position: absolute;\n"])));
90
- var templateObject_1;