@24i/bigscreen-sdk 1.0.25 → 1.0.26-alpha.2448

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.25",
+    "version": "1.0.26-alpha.2448",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -41,7 +41,7 @@
         "@24i/appstage-shared-events-manager": "1.0.11",
         "@24i/appstage-shared-perf-utils": "1.0.11",
         "@24i/bigscreen-players-engine-base": "1.0.6",
-        "@24i/smartapps-datalayer": "3.0.10-alpha.1014",
+        "@24i/smartapps-datalayer": "3.0.10-alpha.1016",
         "@sentry/browser": "7.35.0",
         "@sentry/types": "7.35.0",
         "@types/gtag.js": "^0.0.13",

package/packages/create-package/dist/createPackage.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.main = void 0;
+const path = require("path");
+const fs = require("fs");
+const fse = require("fs-extra");
+const chalk = require("chalk");
+const minimist = require("minimist");
+const questions_1 = require("./questionnaire/questions");
+const Settings_1 = require("./settings/Settings");
+async function isDirectoryEmpty(dirPath) {
+    const files = await fs.promises.readdir(dirPath);
+    return !files.length;
+}
+async function copyTemplateFiles(templateDir, targetDir) {
+    return fse.copy(templateDir, targetDir);
+}
+function updatePackageJsonFile(filePath, options) {
+    let data = fs.readFileSync(filePath, 'utf8');
+    const keywords = options.keywords.map((word) => `"${word}"`).join(', ');
+    data = data.replace(/("name": ")(.*)(")/, `$1${options.name}$3`);
+    data = data.replace(/("version": ")(.*)(")/, `$1${options.version}$3`);
+    data = data.replace(/("description": ")(.*)(")/, `$1${options.description}$3`);
+    data = data.replace(/("keywords": \[)(.*)(\])/, `$1${keywords}$3`);
+    data = data.replace(/("author": ")(.*)(")/, `$1${options.author}$3`);
+    fs.writeFileSync(filePath, data);
+}
+function parseArguments(rawArgv) {
+    const argv = minimist(rawArgv.slice(2));
+    const dirName = argv._[0];
+    if (!dirName) {
+        console.error('Error: Missing package name');
+        process.exit(1);
+    }
+    return {
+        dirName,
+    };
+}
+async function main() {
+    const { dirName: destDirName } = parseArguments(process.argv);
+    const destDir = path.join(process.cwd(), 'packages/', destDirName);
+    if (fs.existsSync(destDir)) {
+        console.error(`Error: Target directory "${destDir}" already exists`);
+        process.exit(1);
+    }
+    fs.mkdirSync(destDir, { recursive: true });
+    const isDirEmpty = await isDirectoryEmpty(destDir);
+    if (!isDirEmpty) {
+        console.error(`Error: Target directory "${destDir}" is not empty.`);
+        process.exit(1);
+    }
+    const settings = Object.assign({}, Settings_1.Settings);
+    settings.name = `${Settings_1.Settings.name}${destDirName}`.toLowerCase();
+    const details = await (0, questions_1.promptPackageDetails)(settings);
+    const templateDir = path.join(__dirname, '..', 'templates/typescript');
+    await copyTemplateFiles(templateDir, destDir);
+    const packageJsonFile = path.join(destDir, 'package.json');
+    updatePackageJsonFile(packageJsonFile, details);
+    const docsSymlinkTarget = path.join('../../../packages/', destDirName, '/README.md');
+    const docsSymlinkPath = path.join(process.cwd(), 'docs/packages/', destDirName, '/README.md');
+    await fse.ensureSymlink(docsSymlinkTarget, docsSymlinkPath);
+    console.log(`${chalk.green('Success')}, package has been initialized!`);
+}
+exports.main = main;
+//# sourceMappingURL=createPackage.js.map

package/packages/create-package/dist/createPackage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPackage.js","sourceRoot":"","sources":["../src/createPackage.ts"],"names":[],"mappings":"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"}

package/packages/create-package/dist/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const createPackage_1 = require("./createPackage");
+(0, createPackage_1.main)();
+//# sourceMappingURL=index.js.map

package/packages/create-package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;AAAA,mDAAuC;AAEvC,IAAA,oBAAI,GAAE,CAAC"}

package/packages/create-package/dist/questionnaire/questions.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.promptPackageDetails = void 0;
+const inquirer = require("inquirer");
+async function promptPackageDetails(defaultValues) {
+    return inquirer.prompt([
+        {
+            type: 'input',
+            name: 'name',
+            message: 'Package name:',
+            default: defaultValues.name,
+        }, {
+            type: 'input',
+            name: 'version',
+            message: 'Version:',
+            default: defaultValues.version,
+        }, {
+            type: 'input',
+            name: 'description',
+            message: 'Description:',
+        }, {
+            type: 'input',
+            name: 'keywords',
+            message: 'Keywords:',
+            filter: (ans) => ans.split(/[\s,]+/),
+        }, {
+            type: 'input',
+            name: 'author',
+            message: 'Author:',
+            default: defaultValues.author,
+        },
+    ]);
+}
+exports.promptPackageDetails = promptPackageDetails;
+//# sourceMappingURL=questions.js.map

package/packages/create-package/dist/questionnaire/questions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"questions.js","sourceRoot":"","sources":["../../src/questionnaire/questions.ts"],"names":[],"mappings":";;;AAAA,qCAAqC;AAWrC,KAAK,UAAU,oBAAoB,CAAC,aAA4C;IAC5E,OAAO,QAAQ,CAAC,MAAM,CAAC;QACnB;YACI,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,eAAe;YACxB,OAAO,EAAE,aAAa,CAAC,IAAI;SAC9B,EAAE;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,UAAU;YACnB,OAAO,EAAE,aAAa,CAAC,OAAO;SACjC,EAAE;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,cAAc;SAC1B,EAAE;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,WAAW;YACpB,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;SACvC,EAAE;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,aAAa,CAAC,MAAM;SAChC;KACJ,CAAC,CAAC;AACP,CAAC;AAEQ,oDAAoB"}

package/packages/create-package/dist/settings/Settings.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Settings = void 0;
+const Settings = {
+    name: '@24i/smartapps-bigscreen-',
+    version: '0.0.1',
+    author: '24i',
+};
+exports.Settings = Settings;
+//# sourceMappingURL=Settings.js.map

package/packages/create-package/dist/settings/Settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.js","sourceRoot":"","sources":["../../src/settings/Settings.ts"],"names":[],"mappings":";;;AAAA,MAAM,QAAQ,GAAG;IACb,IAAI,EAAE,2BAA2B;IACjC,OAAO,EAAE,OAAO;IAChB,MAAM,EAAE,KAAK;CAChB,CAAC;AAEO,4BAAQ"}

package/packages/create-package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/packages/create-package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/packages/focus/README.md

@@ -14,11 +14,13 @@ IFocusable is an interface that should be implemented by anything that can be fo
 interface IFocusable {
     focus(options?: FocusOptions): void,
     hasDom?(element: HTMLElement): boolean,
+    hasFocus?(): boolean,
 }
 ```
 - focus is the main function that is called when focusing component/element.
 - hasDom is optional optimization for components to help Layout components locate the currently
 focused child.
+- hasFocus is optional check if the component has focus inside or is itself focused.
 
 ## Layout components
 - Vertical: Use it to create focus between elements vertically (up/down)
@@ -329,3 +331,18 @@ outside of the component and not focused.
 ```ts
 const refocusAfterHashChange = (focusWrapperOrReference: HTMLElement | Reference<HTMLElement>) => void;
 ```
+
+## hasFocus
+Test if the element (or element in the reference) has the `activeElement` inside or optionally,
+if the element itself is the `activeElement`.
+
+```ts
+const hasFocus = (elementOrReference: HTMLElement | Reference<HTMLElement>, includeElementItself = false) => boolean;
+```
+
+## isFocused
+Test if the element (or element in the reference) is the `activeElement`.
+
+```ts
+const isFocused = (elementOrReference: HTMLElement | Reference<HTMLElement>) => boolean;
+```

package/packages/focus/src/IFocusable.ts

@@ -1,4 +1,5 @@
 export interface IFocusable {
     focus(options?: FocusOptions): void,
     hasDom?(element: HTMLElement): boolean,
+    hasFocus?(): boolean,
 }

package/packages/focus/src/hasFocus.ts

@@ -0,0 +1,36 @@
+import { Reference, unwrapReference } from '@24i/bigscreen-sdk/jsx';
+import { isElementWrappedBy } from '@24i/bigscreen-sdk/utils/elementUtils';
+
+/**
+ * Test if the element (or element in the reference) has the `activeElement` inside or optionally,
+ * if the element itself is the `activeElement`.
+ * @param elementOrReference DOM element or reference to element on which we test focus
+ * @param includeElementItself if true, active element is also tested with the provided element.
+ * Default is false
+ * @returns true if the element has focused element inside or is itself focused
+ */
+export const hasFocus = (
+    elementOrReference: HTMLElement | Reference<HTMLElement>,
+    includeElementItself = false,
+) => {
+    const element = unwrapReference(elementOrReference);
+    if (!element) return false;
+    return isElementWrappedBy(
+        document.activeElement as HTMLElement,
+        element,
+        includeElementItself,
+    );
+};
+
+/**
+ * Test if the element (or element in the reference) is the `activeElement`.
+ * @param elementOrReference DOM element or reference to element on which we test focus
+ * @returns true if the element is focused
+ */
+export const isFocused = (
+    elementOrReference: HTMLElement | Reference<HTMLElement>,
+) => {
+    const element = unwrapReference(elementOrReference);
+    if (!element) return false;
+    return document.activeElement === element;
+};

package/packages/focus/src/index.ts

@@ -13,3 +13,4 @@ export {
 } from './candidate';
 export { focusFirstExisting, preventScrollOnFocus } from './focusFirstExisting';
 export { refocusAfterHashChange } from './refocusAfterHashChange';
+export { hasFocus, isFocused } from './hasFocus';

package/packages/utils/README.md

@@ -21,6 +21,7 @@ import { generateUuid } from '@24i/bigscreen-sdk/utils/generateUuid';
 - **[addClass](#addClass)** - safely adds class to reference.
 - **[debounce](#debounce)** - debounced function is only executed again after a period of not being called, supports leading, trailing (default) and both executions.
 - **[displayToggler](#displayToggler)** - exports `getDisplayToggler` that allows you to easily show/hide an element with guard preventing unnecessary DOM calls.
+- **[elementUtils](#elementUtils)** - various utils above HTMLElement.
 - **[forceReflow](#forceReflow)** - To force a DOM reflow on given DOM element.
 - **[generateUuid](#generateUuid)** - function to get UUIDv4 according to RFC 4122.
 - **[isMouseUsed](#isMouseUsed)** - **DEPRECATED** moved to `device` package.
@@ -95,6 +96,9 @@ And returns `IDisplayToggler` interface with 4 functions:
 - `isVisible: () => boolean;` - returns true if the element is visible, false otherwise
 - `isHidden: () => boolean;` - returns true if the element is hidden, false otherwise
 
+### elementUtils
+Various utils for HTMLElement such as visibility tests or element wrapping tests.
+
 ### forceReflow
 To force a DOM reflow on given DOM element. It can be needed for transitions
 or other purposes.

package/packages/utils/src/elementUtils.ts

@@ -4,6 +4,12 @@ import { SCREEN_WIDTH } from './sizes';
 
 const SAFE_TIMEOUT = 100;
 
+/**
+ * Test if the element (or element in the reference) is wrapped visible. This means that the
+ * element does not have `display: none` or `visibility: hidden`.
+ * @param elementOrReference DOM element or reference to element on which we test wrapping
+ * @returns true if element is visible
+ */
 export const isElementVisible = (
     elementOrReference: HTMLElement | Reference<HTMLElement>,
 ) => {
@@ -13,10 +19,18 @@ export const isElementVisible = (
     return style.display !== 'none' && style.visibility !== 'hidden';
 };
 
+/**
+ * Test if the element (or element in the reference) is wrapped fully visible. This means that the
+ * element does not have `display: none` or `visibility: hidden` and exists
+ * inside visible DOM tree, which exists in the document.body.
+ * @param elementOrReference DOM element or reference to element on which we test wrapping
+ * @returns true if element is visible
+ */
 export const isElementFullyVisible = (
     elementOrReference: HTMLElement | Reference<HTMLElement>,
 ) => {
     const element = unwrapReference(elementOrReference);
+    if (!element) return false;
     if (isElementVisible(element)) {
         let parent = element.parentElement;
         while (parent) {
@@ -33,6 +47,16 @@ export const isElementFullyVisible = (
     return false;
 };
 
+/**
+ * Test if the element (or element in the reference) is wrapped by another element.
+ * @param elementOrReference DOM element or reference to element on which we test wrapping
+ * @param wrapperElementOrReferenceOrCondition wrapper element or certain condition (utils is
+ * running upwards in the DOM tree from first element till some element has some specific condition)
+ * @param includesElementItself if true, test will check also provided element itself.
+ * This is useful in some cases when we need to include also provided element as wrapper
+ * in one run of the util.
+ * @returns true if the element is wrapped by provided wrapper
+ */
 export const isElementWrappedBy = (
     elementOrReference: HTMLElement | Reference<HTMLElement>,
     wrapperElementOrReferenceOrCondition:
@@ -40,6 +64,7 @@ export const isElementWrappedBy = (
     includesElementItself = false,
 ) => {
     const element = unwrapReference(elementOrReference);
+    if (!element) return false;
     let currentParent = includesElementItself ? element : element.parentElement;
     let wrapperElement: HTMLElement | null = null;
     let condition: ((currentWrapper: HTMLElement) => boolean) | null = null;

package/packages/utils/src/index.ts

@@ -16,6 +16,7 @@ export {
     isElementVisible,
     isElementFullyVisible,
     isElementWrappedBy,
+    preventDefaultScroll,
 } from './elementUtils';
 export { createInterval, createTimeout, runAsync } from './timers';
 export type { TimedFunction } from './timers';