@24i/bigscreen-sdk 1.0.4-alpha.2098 → 1.0.4-alpha.2106

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.4-alpha.2098",
+    "version": "1.0.4-alpha.2106",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -57,7 +57,7 @@
         "@types/jest": "^28.1.6",
         "@types/minimist": "^1.2.2",
         "@types/node": "^18.6.3",
-        "@types/react": "^18.0.15",
+        "@types/react": "^18.0.18",
         "babel-jest": "^28.1.2",
         "chalk": "^4.1.2",
         "coveralls": "^3.1.0",
@@ -71,12 +71,12 @@
         "jest-environment-jsdom": "^28.1.2",
         "minimist": "^1.2.6",
         "patch-package": "^6.2.1",
-        "sass": "^1.54.0",
+        "sass": "^1.54.8",
         "sass-true": "^6.1.0",
-        "ts-jest": "^28.0.7",
+        "ts-jest": "^28.0.8",
         "ts-node": "^10.8.2",
         "tsconfig-paths-jest": "0.0.1",
-        "typescript": "^4.7.2"
+        "typescript": "^4.8.2"
     },
     "exports": {
         "./adobe-heartbeat": "./packages/adobe-heartbeat/src/index.ts",

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":";;;;AAEA,6BAA6B;AAC7B,yBAAyB;AACzB,gCAAgC;AAChC,+BAA+B;AAC/B,qCAAqC;AACrC,yDAAiE;AACjE,kDAA+C;AAG/C,KAAK,UAAU,gBAAgB,CAAC,OAAe;IAC3C,MAAM,KAAK,GAAG,MAAM,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACjD,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC;AACzB,CAAC;AAED,KAAK,UAAU,iBAAiB,CAAC,WAAmB,EAAE,SAAiB;IACnE,OAAO,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAC5C,CAAC;AAED,SAAS,qBAAqB,CAAC,QAAgB,EAAE,OAAwB;IACrE,IAAI,IAAI,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAC7C,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxE,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,oBAAoB,EAAE,KAAK,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;IACjE,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,uBAAuB,EAAE,KAAK,OAAO,CAAC,OAAO,IAAI,CAAC,CAAC;IACvE,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,2BAA2B,EAAE,KAAK,OAAO,CAAC,WAAW,IAAI,CAAC,CAAC;IAC/E,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,0BAA0B,EAAE,KAAK,QAAQ,IAAI,CAAC,CAAC;IACnE,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,sBAAsB,EAAE,KAAK,OAAO,CAAC,MAAM,IAAI,CAAC,CAAC;IACrE,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AACrC,CAAC;AAED,SAAS,cAAc,CAAC,OAAsB;IAC1C,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE1B,IAAI,CAAC,OAAO,EAAE;QACV,OAAO,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC;QAC7C,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KACnB;IAED,OAAO;QACH,OAAO;KACV,CAAC;AACN,CAAC;AAEM,KAAK,UAAU,IAAI;IACtB,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;IACnE,IAAI,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACxB,OAAO,CAAC,KAAK,CAAC,4BAA4B,OAAO,kBAAkB,CAAC,CAAC;QACrE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KACnB;IACD,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAE3C,MAAM,UAAU,GAAG,MAAM,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnD,IAAI,CAAC,UAAU,EAAE;QACb,OAAO,CAAC,KAAK,CAAC,4BAA4B,OAAO,iBAAiB,CAAC,CAAC;QACpE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KACnB;IAED,MAAM,QAAQ,qBAAQ,mBAAQ,CAAE,CAAC;IACjC,QAAQ,CAAC,IAAI,GAAG,GAAG,mBAAQ,CAAC,IAAI,GAAG,WAAW,EAAE,CAAC,WAAW,EAAE,CAAC;IAE/D,MAAM,OAAO,GAAG,MAAM,IAAA,gCAAoB,EAAC,QAAQ,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,sBAAsB,CAAC,CAAC;IAEvE,MAAM,iBAAiB,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAC9C,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;IAC3D,qBAAqB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;IAGhD,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;IACrF,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,gBAAgB,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;IAC9F,MAAM,GAAG,CAAC,aAAa,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC;IAE5D,OAAO,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,iCAAiC,CAAC,CAAC;AAC5E,CAAC;AA/BD,oBA+BC"}

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/developer-tools/src/EnvironmentSelection/EnvironmentList.tsx

@@ -1,7 +1,6 @@
 import { Component, createRef, Reference } from '@24i/bigscreen-sdk/jsx';
 import { stopEvent } from '@24i/bigscreen-sdk/utils';
 import { BasicList } from '@24i/bigscreen-sdk/list/Basic';
-import { device } from '@24i/bigscreen-sdk/device';
 import { BACK } from '@24i/bigscreen-sdk/device/keymap';
 import { reloadApp } from '../utils/reload';
 import { EnvironmentListItem } from './EnvironmentListItem';
@@ -25,14 +24,12 @@ export class EnvironmentList extends Component<Props> {
     getPaddingTop() {
         const { data } = this.props;
         const {
-            visibleItems, height, listItemHeight, listItemMargin, defaultPaddingTop,
+            paddingCountThreshold, height, scrollStep, defaultPaddingTop,
         } = sizes;
-        if (data.length < visibleItems) {
-            return Math.round(
-                (height - (listItemHeight + (listItemMargin * 2)) * data.length) / 2,
-            );
-        }
-        return defaultPaddingTop;
+        if (data.length > paddingCountThreshold) return defaultPaddingTop;
+        return Math.round(
+            (height - scrollStep * data.length) / 2,
+        );
     }
 
     onKeyDown = (event: KeyboardEvent) => {
@@ -40,8 +37,6 @@ export class EnvironmentList extends Component<Props> {
             stopEvent(event);
             const { onClose } = this.props;
             onClose();
-        } else if (device.isDirectionalArrow(event)) {
-            stopEvent(event); // No leaking out. Might result in something focusing below the modal
         }
     };
 
@@ -57,7 +52,7 @@ export class EnvironmentList extends Component<Props> {
 
     render() {
         const { data, leadingEllipses } = this.props;
-        const { visibleItems, firstScrollStep, scrollStep } = sizes;
+        const { visibleItems, scrollStep } = sizes;
         return (
             <div
                 ref={this.div}
@@ -86,7 +81,7 @@ export class EnvironmentList extends Component<Props> {
                         );
                     }}
                     visibleItems={visibleItems}
-                    firstScrollStep={firstScrollStep}
+                    firstScrollStep={scrollStep}
                     scrollStep={scrollStep}
                 />
             </div>

package/packages/developer-tools/src/EnvironmentSelection/EnvironmentListItem.tsx

@@ -3,8 +3,12 @@ import { getDisplayToggler } from '@24i/bigscreen-sdk/utils/displayToggler';
 import { Item } from '@24i/bigscreen-sdk/list/interface';
 import { Interactable } from '@24i/bigscreen-sdk/interactable';
 import { trimWithLeadingEllipsis } from '@24i/bigscreen-sdk/utils/textUtils';
+import { addClass } from '@24i/bigscreen-sdk/utils/addClass';
+import { removeClass } from '@24i/bigscreen-sdk/utils/removeClass';
 import { ItemData } from './types';
 
+const ACTIVE_CLASS = 'active';
+
 type Props = {
     onPress: (environment: string) => void,
     leadingEllipses?: boolean;
@@ -13,7 +17,7 @@ type Props = {
 export class EnvironmentListItem extends Component<Props> implements Item<ItemData> {
     itemRef = createRef<HTMLDivElement>();
 
-    labelRef = createRef<HTMLSpanElement>();
+    labelRef = createRef<HTMLDivElement>();
 
     value: string;
 
@@ -53,11 +57,16 @@ export class EnvironmentListItem extends Component<Props> implements Item<ItemDa
         }
     }
 
-    updateData({ label, value }: ItemData) {
+    updateData({ label, value, active }: ItemData) {
         if (value !== this.value) {
             this.value = value;
             setText(this.labelRef, label);
             this.trimRows();
+            if (active) {
+                addClass(this.itemRef, ACTIVE_CLASS);
+            } else {
+                removeClass(this.itemRef, ACTIVE_CLASS);
+            }
         }
     }
 
@@ -66,27 +75,31 @@ export class EnvironmentListItem extends Component<Props> implements Item<ItemDa
     }
 
     render() {
-        const { active, label, leadingEllipses: ellipses } = this.props;
+        const { active, label, leadingEllipses } = this.props;
+        const itemEllipsesClass = `${
+            leadingEllipses ? 'leading-ellipses-list-item' : 'normal-ellipses-list-item'
+        }`;
+        const activeClass = `${active ? ACTIVE_CLASS : ''}`;
         return (
             <Interactable
                 ref={this.itemRef}
-                className={`environment-list-item  ${ellipses ? 'leading-ellipses-list-item' : ''}`}
+                className={`environment-list-item ${itemEllipsesClass} ${activeClass}`}
                 onPress={this.onPress}
             >
-                { active
-                    && (
-                        <span
-                            className={`checkmark ${ellipses ? 'leading-ellipses-checkmark' : ''}`}
-                        />
-                    )}
-
-                <span
-                    className={`label ${active ? 'active' : ''}`}
+                {active && (
+                    <div
+                        className={
+                            `checkmark ${leadingEllipses ? 'leading-ellipses-checkmark' : ''}`
+                        }
+                    />
+                )}
+                <div
+                    className="label"
                     ref={this.labelRef}
                     dir="auto"
                 >
                     {label}
-                </span>
+                </div>
             </Interactable>
         );
     }

package/packages/developer-tools/src/EnvironmentSelection/sizes.1080.ts

@@ -1,9 +1,5 @@
 export const height = 1080;
-export const defaultPaddingTop = 10;
-
-export const listItemHeight = 80;
-export const listItemMargin = 16;
-
-export const visibleItems = 11;
-export const firstScrollStep = 112;
+export const defaultPaddingTop = 92;
+export const paddingCountThreshold = 8;
+export const visibleItems = 10;
 export const scrollStep = 112;

package/packages/developer-tools/src/EnvironmentSelection/sizes.ts

@@ -1,9 +1,5 @@
 export const height = 720;
-export const defaultPaddingTop = 7;
-
-export const listItemHeight = 53;
-export const listItemMargin = 11;
-
-export const visibleItems = 11;
-export const firstScrollStep = 75;
+export const defaultPaddingTop = 61;
+export const paddingCountThreshold = 8;
+export const visibleItems = 10;
 export const scrollStep = 75;

package/packages/developer-tools/src/EnvironmentSelection/styles/EnvironmentSelection.scss

@@ -1,3 +1,5 @@
+@import '@24i/bigscreen-sdk/sass-utils/ellipsis';
+
 @mixin mask-svg-icon($icon-url) {
     -webkit-mask-image: url($icon-url);
     -webkit-mask-size: $checkmark-size;
@@ -41,6 +43,7 @@
             padding-right: $environment-config-name-padding-right;
             line-height: $environment-config-name-height;
             height: $environment-config-name-height;
+            white-space: nowrap;
         }
     }
 
@@ -83,6 +86,7 @@
                 background-color: #fff;
                 height: $checkmark-size;
                 width: $checkmark-size;
+                visibility: hidden;
             }
 
             .leading-ellipses-checkmark {
@@ -95,10 +99,6 @@
                 font-size: $label-font-size;
                 font-weight: 400;
                 color: #8f8f8f;
-
-                &.active {
-                    color: #fff;
-                }
             }
     
             &:focus {
@@ -108,10 +108,30 @@
                     color: #fff;
                 }
             }
+
+            &.active {
+                .checkmark {
+                    visibility: visible;
+                }
+
+                .label {
+                    color: #fff;
+                }
+            }
+
+            &.display-none {
+                visibility: hidden;
+            }
         }
 
         .leading-ellipses-list-item {
             height: auto;
         }
+
+        .normal-ellipses-list-item {
+            .label {
+                @include ellipsis;
+            }
+        }
     }
 }

package/packages/developer-tools/src/EnvironmentSelection/styles/_sizes.1080.scss

@@ -14,7 +14,7 @@ $environment-list-width: 479px;
 
 $environment-list-item-border-radius: 40px;
 $environment-list-item-padding: 16px 34px;
-$environment-list-item-margin: 16px 71px;
+$environment-list-item-margin: 16px 0 16px 71px;
 $environment-list-item-line-height: 48px;
 $environment-list-item-height: 80px;
 

package/packages/developer-tools/src/EnvironmentSelection/styles/_sizes.scss

@@ -14,9 +14,9 @@ $environment-list-width: 319px;
 
 $environment-list-item-border-radius: 27px;
 $environment-list-item-padding: 11px 23px;
-$environment-list-item-margin: 11px 47px;
+$environment-list-item-margin: 11px 0 11px 47px;
 $environment-list-item-line-height: 32px;
-$environment-list-item-height: 53px;
+$environment-list-item-height: 54px;
 
 $checkmark-top: 13px;
 $checkmark-left: -48px;

package/packages/driver-base/src/loadObject.ts

@@ -19,7 +19,7 @@ export const loadObject = <T extends HTMLObjectElement>(
     object.type = type;
     forEach(Object.entries(attributes), ([name, value]) => {
         if (name === 'style') {
-            object.style.cssText = value;
+            object.style.cssText = value as string;
         } else {
             // @ts-ignore - skipping readonly check
             object[name] = value;

package/packages/focus/src/Layout/Base.tsx

@@ -9,7 +9,6 @@ export type Props = SharedProps & {
     focusableChildren: Array<Reference>,
     onFocusChanged?: (focused: Reference, index: number) => any,
     onBeforeFocusChange?: (focused: Reference, index: number) => any,
-    dir?: 'auto' | 'ltr' | 'rtl',
 };
 
 export interface ILayout {

package/packages/focus/src/Layout/Horizontal.ts

@@ -1,19 +1,9 @@
 import { LEFT, RIGHT } from '@24i/bigscreen-sdk/device/keymap';
-import { isRtl } from '@24i/bigscreen-sdk/i18n';
-import { getLayoutBase, ILayout, Props } from './Base';
-
-const isHorizontalRtl = (dir: Props['dir']) => {
-    switch (dir) {
-        case 'rtl': return true;
-        case 'ltr': return false;
-        case 'auto':
-        default:
-            return isRtl();
-    }
-};
+import { getLayoutBase, ILayout } from './Base';
+import { isRtl } from './isRtl';
 
 const onKeyDown = (e: KeyboardEvent, layout: ILayout) => {
-    if (!isHorizontalRtl(layout.props.dir)) {
+    if (!isRtl(layout.props.dir)) {
         if (LEFT.is(e)) layout.backward(e);
         if (RIGHT.is(e)) layout.forward(e);
     } else {

package/packages/focus/src/Layout/Matrix.tsx

@@ -1,8 +1,10 @@
 import { Component, Reference, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
 import { device } from '@24i/bigscreen-sdk/device';
+import { LEFT, RIGHT } from '@24i/bigscreen-sdk/device/keymap';
 import { noop } from '@24i/bigscreen-sdk/utils/noop';
 import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
 import { IFocusable } from '../IFocusable';
+import { isRtl } from './isRtl';
 import { Errors, hasValidDomRef } from './constants';
 import { SharedProps } from './types';
 
@@ -34,7 +36,8 @@ export class Matrix extends Component<Props> implements IFocusable {
         onFocusChanged: noop,
         onBeforeFocusChange: noop,
         circular: CircularDirection.NONE,
-    };
+        dir: 'auto',
+    } as const;
 
     declare props: DeclareProps<Props, typeof Matrix.defaultProps>;
 
@@ -56,9 +59,9 @@ export class Matrix extends Component<Props> implements IFocusable {
 
     onKeyDown = (e: KeyboardEvent) => {
         let newIndex: Index2D | null = null;
-        if (device.isDirectionLeft(e)) {
+        if (this.isDirectionLeft(e)) {
             newIndex = this.moveHorizontaly('left');
-        } else if (device.isDirectionRight(e)) {
+        } else if (this.isDirectionRight(e)) {
             newIndex = this.moveHorizontaly('right');
         } else if (device.isDirectionUp(e)) {
             newIndex = this.moveVerticaly('up');
@@ -109,6 +112,24 @@ export class Matrix extends Component<Props> implements IFocusable {
         return false;
     }
 
+    isDirectionLeft(event: KeyboardEvent) {
+        const { dir } = this.props;
+        const rtl = isRtl(dir);
+        return (
+            (!rtl && LEFT.is(event))
+            || (rtl && RIGHT.is(event))
+        );
+    }
+
+    isDirectionRight(event: KeyboardEvent) {
+        const { dir } = this.props;
+        const rtl = isRtl(dir);
+        return (
+            (!rtl && RIGHT.is(event))
+            || (rtl && LEFT.is(event))
+        );
+    }
+
     moveForwards = (isCircular: boolean) => (x: number, length: number) => {
         if (x === length - 1) {
             return isCircular ? 0 : length - 1;

package/packages/focus/src/Layout/__test__/isRtl.spec.ts

@@ -0,0 +1,23 @@
+import * as i18n from '@24i/bigscreen-sdk/i18n';
+import { isRtl } from '../isRtl';
+import { SharedProps } from '../types';
+
+describe('isRtl', () => {
+    const mockIsRtl = jest.spyOn(i18n, 'isRtl');
+
+    it.each([
+        { focusDir: 'ltr', langDir: 'ltr', expectedIsRtl: false },
+        { focusDir: 'rtl', langDir: 'ltr', expectedIsRtl: true },
+        { focusDir: 'auto', langDir: 'ltr', expectedIsRtl: false },
+        { focusDir: undefined, langDir: 'ltr', expectedIsRtl: false },
+        { focusDir: 'ltr', langDir: 'rtl', expectedIsRtl: false },
+        { focusDir: 'rtl', langDir: 'rtl', expectedIsRtl: true },
+        { focusDir: 'auto', langDir: 'rtl', expectedIsRtl: true },
+        { focusDir: undefined, langDir: 'rtl', expectedIsRtl: true },
+    ])('should for $focusDir focus and $langDir language return $expectedIsRtl', ({
+        focusDir, langDir, expectedIsRtl,
+    }) => {
+        mockIsRtl.mockReturnValue(langDir === 'rtl');
+        expect(isRtl(focusDir as SharedProps['dir'])).toBe(expectedIsRtl);
+    });
+});

package/packages/focus/src/Layout/isRtl.ts

@@ -0,0 +1,12 @@
+import { isRtl as isLangRtl } from '@24i/bigscreen-sdk/i18n';
+import { SharedProps } from './types';
+
+export const isRtl = (dir: SharedProps['dir']) => {
+    switch (dir) {
+        case 'rtl': return true;
+        case 'ltr': return false;
+        case 'auto':
+        default:
+            return isLangRtl();
+    }
+};

package/packages/focus/src/Layout/types.ts

@@ -3,4 +3,5 @@ import { Reference, Children } from '@24i/bigscreen-sdk/jsx';
 export type SharedProps = {
     domRef: Reference<HTMLElement>,
     children?: Children,
+    dir?: 'auto' | 'ltr' | 'rtl',
 };

package/packages/jsx/src/forwardRef.ts

@@ -1,6 +1,6 @@
-import { ForwardedRefComponent, FunctionComponentWithRef } from './types';
+import { ForwardedRefComponent, FunctionComponentWithRef, Props } from './types';
 
-export const forwardRef = <T>(
+export const forwardRef = <T extends Props>(
     reffedComponent: FunctionComponentWithRef<T>,
 ): ForwardedRefComponent<T> => {
     (reffedComponent as ForwardedRefComponent<T>).isForwardedRef = true;

package/packages/keyboard/src/AndroidKeyboard/Keyboard.tsx

@@ -71,6 +71,7 @@ export class Keyboard extends QwertyKeyboardBase {
                     ref={this.matrix}
                     domRef={this.keyboardWrapper}
                     matrix={this.focusMatrices.normal}
+                    dir="ltr"
                 >
                     <div className={`${KEYBOARD_ROW} row-numbers`}>
                         {map(NORMAL[0], this.generateKey)}
@@ -96,6 +97,7 @@ export class Keyboard extends QwertyKeyboardBase {
                             ref={this.keyRefs.special}
                             className="key key-special"
                             onPress={this.onSpecial}
+                            dir="auto"
                         >
                             {texts.toSpecialLayout}
                         </Interactable>
@@ -103,6 +105,7 @@ export class Keyboard extends QwertyKeyboardBase {
                             ref={this.keyRefs.shift}
                             className="key key-shift"
                             onPress={() => this.onShift()}
+                            dir="auto"
                         >
                             {texts.shift}
                         </Interactable>
@@ -131,6 +134,7 @@ export class Keyboard extends QwertyKeyboardBase {
                             ref={this.keyRefs.done}
                             className="key key-done"
                             onPress={() => this.onDone()}
+                            dir="auto"
                         >
                             {texts.done}
                         </Interactable>
@@ -158,6 +162,7 @@ export class Keyboard extends QwertyKeyboardBase {
                     ref={this.matrix}
                     domRef={this.keyboardWrapper}
                     matrix={this.focusMatrices.special}
+                    dir="ltr"
                 >
                     <div className={`${KEYBOARD_ROW} row-numbers`}>
                         {map(SPECIAL[0], this.generateKey)}
@@ -186,6 +191,7 @@ export class Keyboard extends QwertyKeyboardBase {
                             ref={this.keyRefs.special}
                             className="key key-special"
                             onPress={this.onQWERTY}
+                            dir="auto"
                         >
                             {texts.toNormalLayout}
                         </Interactable>
@@ -215,6 +221,7 @@ export class Keyboard extends QwertyKeyboardBase {
                             ref={this.keyRefs.done}
                             className="key key-done"
                             onPress={() => this.onDone()}
+                            dir="auto"
                         >
                             {texts.done}
                         </Interactable>

package/packages/keyboard/src/DefaultKeyboard/Keyboard.tsx

@@ -69,6 +69,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                     ref={this.matrix}
                     domRef={this.keyboardWrapper}
                     matrix={this.focusMatrices.normal}
+                    dir="ltr"
                 >
                     <div className={`${KEYBOARD_ROW} row-numbers`}>
                         {map(NUMBERS, this.generateKey)}