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

package/LICENSE.txt

@@ -0,0 +1,6 @@
+Copyright © 2021, Telia Company AB. All rights reserved.
+
+THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
+THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
+AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
+http://www.humany.com/legal

package/README.md

@@ -0,0 +1,3 @@
+# `@telia-ace/widget-components-tab-stop`
+
+Tab stop component for ACE Widgets.

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import TabStopComponent from './tab-stop-component';
+export default TabStopComponent;

package/lib/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var tab_stop_component_1 = __importDefault(require("./tab-stop-component"));
+exports.default = tab_stop_component_1.default;

package/lib/tab-stop-component.d.ts

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

package/lib/tab-stop-component.js

@@ -0,0 +1,30 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var TabStopComponent = function (container) {
+    return (0, widget_ui_1.createReactComponent)(container, 'tab-stop', Promise.resolve().then(function () { return __importStar(require('./tab-stop')); }));
+};
+exports.default = TabStopComponent;

package/lib/tab-stop.d.ts

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

package/lib/tab-stop.js

@@ -0,0 +1,118 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var TabStop = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var node = (0, react_1.useRef)();
+    var container = (0, widget_ui_1.useContainer)();
+    var _b = (0, widget_ui_1.useProperties)().position, position = _b === void 0 ? 'end' : _b;
+    var positionRef = (0, react_1.useRef)(position);
+    (0, react_1.useEffect)(function () {
+        positionRef.current = position;
+    }, [position]);
+    var focusHandler = function () {
+        var _a = __read(container.get('widgetDOMElements'), 1), widgetDOMElement = _a[0];
+        var focusable = widgetDOMElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]):not(.humany-tab-stop)');
+        // ensure that elements is visible
+        var filtered = [].filter.call(focusable, function (el) {
+            if (typeof window === 'undefined') {
+                return true;
+            }
+            var style = window.getComputedStyle(el);
+            if (style.display === 'none' || (el.offsetWidth <= 0 && el.offsetHeight <= 0)) {
+                return false;
+            }
+            return true;
+        });
+        var target = positionRef.current === 'end' ? filtered[0] : filtered[filtered.length - 1];
+        if (target) {
+            target.focus();
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        var _a = __read(container.get('widgetDOMElements'), 1), widgetDOMElement = _a[0];
+        if (node.current && widgetDOMElement) {
+            node.current.addEventListener('focus', focusHandler);
+        }
+        return function () {
+            if (node.current) {
+                node.current.removeEventListener('focus', focusHandler);
+            }
+        };
+    }, []);
+    return (react_1.default.createElement(Wrapper, __assign({}, other, { tabIndex: 0, ref: node, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-tab-stop') })));
+};
+exports.default = TabStop;
+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"])));
+var templateObject_1;

package/lib-esm/index.d.ts

@@ -0,0 +1,2 @@
+import TabStopComponent from './tab-stop-component';
+export default TabStopComponent;

package/lib-esm/index.js

@@ -0,0 +1,2 @@
+import TabStopComponent from './tab-stop-component';
+export default TabStopComponent;

package/lib-esm/tab-stop-component.d.ts

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

package/lib-esm/tab-stop-component.js

@@ -0,0 +1,5 @@
+import { createReactComponent } from '@telia-ace/widget-ui';
+var TabStopComponent = function (container) {
+    return createReactComponent(container, 'tab-stop', import('./tab-stop'));
+};
+export default TabStopComponent;

package/lib-esm/tab-stop.d.ts

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

package/lib-esm/tab-stop.js

@@ -0,0 +1,90 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { useContainer, useProperties } from '@telia-ace/widget-ui';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+var TabStop = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var node = useRef();
+    var container = useContainer();
+    var _b = useProperties().position, position = _b === void 0 ? 'end' : _b;
+    var positionRef = useRef(position);
+    useEffect(function () {
+        positionRef.current = position;
+    }, [position]);
+    var focusHandler = function () {
+        var _a = __read(container.get('widgetDOMElements'), 1), widgetDOMElement = _a[0];
+        var focusable = widgetDOMElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]):not(.humany-tab-stop)');
+        // ensure that elements is visible
+        var filtered = [].filter.call(focusable, function (el) {
+            if (typeof window === 'undefined') {
+                return true;
+            }
+            var style = window.getComputedStyle(el);
+            if (style.display === 'none' || (el.offsetWidth <= 0 && el.offsetHeight <= 0)) {
+                return false;
+            }
+            return true;
+        });
+        var target = positionRef.current === 'end' ? filtered[0] : filtered[filtered.length - 1];
+        if (target) {
+            target.focus();
+        }
+    };
+    useEffect(function () {
+        var _a = __read(container.get('widgetDOMElements'), 1), widgetDOMElement = _a[0];
+        if (node.current && widgetDOMElement) {
+            node.current.addEventListener('focus', focusHandler);
+        }
+        return function () {
+            if (node.current) {
+                node.current.removeEventListener('focus', focusHandler);
+            }
+        };
+    }, []);
+    return (React.createElement(Wrapper, __assign({}, other, { tabIndex: 0, ref: node, className: appendClassNames(className, 'humany-tab-stop') })));
+};
+export default TabStop;
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    opacity: 0;\n    position: absolute;\n"], ["\n    opacity: 0;\n    position: absolute;\n"])));
+var templateObject_1;

package/package.json

@@ -0,0 +1,41 @@
+{
+    "name": "@telia-ace/widget-components-tab-stop",
+    "version": "1.0.0",
+    "description": "Tab stop component for ACE Widgets.",
+    "license": "SEE LICENSE IN LICENSE.txt",
+    "author": "Telia Company AB",
+    "keywords": [
+        "telia"
+    ],
+    "main": "lib/index.js",
+    "module": "lib-esm/index.js",
+    "files": [
+        "LICENSE.txt",
+        "README.md",
+        "lib/",
+        "lib-esm/"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "clean": "cleandir lib && cleandir lib-esm",
+        "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
+    },
+    "sideEffects": false,
+    "typings": "lib/index.d.ts",
+    "dependencies": {
+        "@telia-ace/widget-ui": "^1.0.0",
+        "@telia-ace/widget-utilities": "^1.0.1",
+        "@webprovisions/platform": "^1.1.2",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "styled-components": "^4.3.2"
+    },
+    "devDependencies": {
+        "@types/react": "^17.0.39",
+        "@types/react-dom": "^17.0.13",
+        "@types/styled-components": "^5.1.7"
+    },
+    "gitHead": "26a4f73e6b1811cf60ca62a274b54b15127a83f6"
+}