@telia-ace/widget-components-tab-stop 1.2.2 → 1.2.3

package/.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "extends": ["plugin:@nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-empty-function": "off"
+      }
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/vite.config.{js,ts,mjs,mts}"]
+          }
+        ]
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,7 @@
+# @telia-ace/widget-components-tab-stop
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @telia-ace/widget-components-tab-stop` to execute the unit tests via [Vitest](https://vitest.dev/).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-components-tab-stop",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -10,9 +10,9 @@
     }
   },
   "dependencies": {
-    "@telia-ace/widget-core": "^1.2.2",
-    "@telia-ace/widget-ui": "^1.2.2",
-    "@telia-ace/widget-utilities": "^1.2.2",
+    "@telia-ace/widget-core": "*",
+    "@telia-ace/widget-ui": "*",
+    "@telia-ace/widget-utilities": "*",
     "@webprovisions/platform": "^1.1.4"
   },
   "peerDependencies": {

package/project.json

@@ -0,0 +1,57 @@
+{
+  "name": "@telia-ace/widget-components-tab-stop",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/components/tab-stop/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/components/tab-stop/**/*.{ts,tsx,js,jsx}",
+          "libs/components/tab-stop/package.json"
+        ]
+      }
+    },
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/libs/components/tab-stop"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "publish": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npm publish",
+        "cwd": "dist/libs/components/tab-stop"
+      }
+    },
+    "prerelease": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npm publish --tag=rc",
+        "cwd": "dist/libs/components/tab-stop"
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../../../coverage/libs/components/tab-stop"
+      }
+    }
+  }
+}

package/src/declaration.d.ts

@@ -0,0 +1,2 @@
+declare type Optional<T> = T | undefined;
+declare type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

package/src/emotion.d.ts

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import '@emotion/react';
+import { Theme as ITheme } from '@telia-ace/widget-core';
+
+declare module '@emotion/react' {
+  export interface Theme extends Partial<ITheme> {}
+}

package/{index.d.ts → src/index.ts}

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

package/src/tab-stop-component.ts

@@ -0,0 +1,12 @@
+import { createReactComponent } from '@telia-ace/widget-ui';
+import { Container } from '@webprovisions/platform';
+
+export type TabStopComponentProps = {
+  position: 'start' | 'end';
+};
+
+const TabStopComponent = (container: Container) => {
+  return createReactComponent(container, 'tab-stop', import('./tab-stop'));
+};
+
+export default TabStopComponent;

package/src/tab-stop.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import styled from '@emotion/styled';
+import { useContainer, useProperties } from '@telia-ace/widget-ui';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React, { useEffect, useRef } from 'react';
+import { TabStopComponentProps } from './tab-stop-component';
+
+type Props = {
+  className: string;
+};
+
+const TabStop: React.FC<Props> = ({ className, ...other }) => {
+  const node = useRef() as React.MutableRefObject<HTMLDivElement>;
+  const container = useContainer();
+  const { position = 'end' } = useProperties<TabStopComponentProps>();
+  const positionRef = useRef(position) as React.MutableRefObject<
+    'start' | 'end'
+  >;
+
+  useEffect(() => {
+    positionRef.current = position;
+  }, [position]);
+
+  const focusHandler = () => {
+    const [widgetDOMElement] = container.get(
+      'widgetDOMElements'
+    ) as HTMLElement[];
+
+    const focusable = widgetDOMElement.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]):not(.humany-tab-stop):not([tabindex=""])'
+    );
+
+    // ensure that elements is visible
+    const filtered = [].filter.call(focusable, (el: HTMLElement) => {
+      if (typeof window === 'undefined') {
+        return true;
+      }
+
+      const style = window.getComputedStyle(el);
+      if (
+        style.display === 'none' ||
+        (el.offsetWidth <= 0 && el.offsetHeight <= 0)
+      ) {
+        return false;
+      }
+      return true;
+    }) as HTMLElement[];
+
+    const target =
+      positionRef.current === 'end'
+        ? filtered[0]
+        : filtered[filtered.length - 1];
+
+    if (target) {
+      target.focus();
+    }
+  };
+
+  useEffect(() => {
+    const [widgetDOMElement] = container.get('widgetDOMElements');
+
+    if (node.current && widgetDOMElement) {
+      node.current.addEventListener('focus', focusHandler);
+    }
+
+    return () => {
+      if (node.current) {
+        node.current.removeEventListener('focus', focusHandler);
+      }
+    };
+  }, []);
+
+  return (
+    <Wrapper
+      {...other}
+      tabIndex={0}
+      ref={node}
+      className={appendClassNames(className, 'humany-tab-stop')}
+    />
+  );
+};
+
+export default TabStop;
+
+const Wrapper = styled.div`
+  opacity: 0;
+  position: absolute;
+`;

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "jsxImportSource": "@emotion/react",
+    "types": ["vite/client", "vitest"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,65 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import packageJson from './package.json';
+
+export default defineConfig({
+  cacheDir: '../../../node_modules/.vite/@telia-ace/widget-components-tab-stop',
+
+  plugins: [
+    dts({
+      entryRoot: 'src',
+      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
+      skipDiagnostics: true,
+    }),
+    react(),
+    nxViteTsPaths(),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@telia-ace/widget-components-tab-stop',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        '@emotion/styled',
+        '@emotion/cache',
+        '@emotion/react',
+        'react-router',
+        'react-router-dom',
+        'react-transition-group',
+        ...Object.keys(packageJson.dependencies || {}),
+        ...Object.keys(packageJson.peerDependencies || {}),
+      ],
+    },
+  },
+
+  test: {
+    globals: true,
+    cache: {
+      dir: '../../../node_modules/.vitest',
+    },
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+  },
+});

package/index.js

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

package/index.mjs

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

package/tab-stop-a53e4966.mjs

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

package/tab-stop-bd0fb6e0.js

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

package/tab-stop-component.d.ts

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

package/tab-stop.d.ts

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