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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.4-alpha.2097",
+    "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/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/input/src/handleOverflow.ts

@@ -1,3 +1,5 @@
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
+
 export const handleOverflow = (
     wrap: HTMLDivElement | null,
     caretElement: HTMLDivElement | null,
@@ -7,10 +9,11 @@ export const handleOverflow = (
     const wrapWidth = wrap.getBoundingClientRect().width;
     const caretWidth = caretElement.getBoundingClientRect().width;
     const preCaretWidth = textPreCaret.getBoundingClientRect().width + caretWidth;
+    const margin = isRtl() ? 'marginRight' : 'marginLeft';
     if (preCaretWidth >= wrapWidth) {
         const offset = wrapWidth - preCaretWidth;
-        textPreCaret.style.marginLeft = `${offset}px`;
-    } else if (textPreCaret.style.marginLeft !== '0px') {
-        textPreCaret.style.marginLeft = '0px';
+        textPreCaret.style[margin] = `${offset}px`;
+    } else if (textPreCaret.style[margin] !== '0px') {
+        textPreCaret.style[margin] = '0px';
     }
 };

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)}

package/packages/keyboard/src/KeyboardBase.tsx

@@ -319,6 +319,7 @@ export abstract class KeyboardBase<
                 }
                 tabIndex={0}
                 onKeyDown={(event) => this.onKeyDown(event)}
+                dir="ltr"
             />
         );
     }

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

@@ -80,12 +80,14 @@ export class Keyboard extends QwertyKeyboardBase {
                     ref={this.matrix}
                     domRef={this.keyboardWrapper}
                     matrix={this.focusMatrices.normal}
+                    dir="ltr"
                 >
                     <div className={`${KEYBOARD_ROW} row-numbers`}>
                         <Interactable
                             ref={this.keyRefs.special}
                             className="key key-special"
                             onPress={this.onSpecial}
+                            dir="auto"
                         >
                             {texts.toSpecialLayout}
                         </Interactable>
@@ -101,6 +103,7 @@ export class Keyboard extends QwertyKeyboardBase {
                             ref={this.keyRefs.clear}
                             className="key key-clear"
                             onPress={() => this.onClear()}
+                            dir="auto"
                         >
                             {texts.clear}
                         </Interactable>
@@ -115,6 +118,7 @@ export class Keyboard extends QwertyKeyboardBase {
                                 ref={this.keyRefs.done}
                                 className="key key-done"
                                 onPress={() => this.onDone()}
+                                dir="auto"
                             >
                                 {texts.done}
                             </Interactable>
@@ -142,6 +146,7 @@ export class Keyboard extends QwertyKeyboardBase {
                             ref={this.keyRefs.shift}
                             className="key key-shift"
                             onPress={() => this.onShift()}
+                            dir="auto"
                         >
                             {texts.shift}
                         </Interactable>
@@ -156,6 +161,7 @@ export class Keyboard extends QwertyKeyboardBase {
                             ref={this.keyRefs.cancel}
                             className="key key-cancel"
                             onPress={() => this.onCancel()}
+                            dir="auto"
                         >
                             {texts.cancel}
                         </Interactable>
@@ -183,12 +189,14 @@ export class Keyboard extends QwertyKeyboardBase {
                     ref={this.matrix}
                     domRef={this.keyboardWrapper}
                     matrix={this.focusMatrices.special}
+                    dir="ltr"
                 >
                     <div className={`${KEYBOARD_ROW} row-numbers`}>
                         <Interactable
                             ref={this.keyRefs.special}
                             className="key key-special"
                             onPress={this.onQWERTY}
+                            dir="auto"
                         >
                             {texts.toNormalLayout}
                         </Interactable>
@@ -204,6 +212,7 @@ export class Keyboard extends QwertyKeyboardBase {
                             ref={this.keyRefs.clear}
                             className="key key-clear"
                             onPress={() => this.onClear()}
+                            dir="auto"
                         >
                             {texts.clear}
                         </Interactable>
@@ -218,6 +227,7 @@ export class Keyboard extends QwertyKeyboardBase {
                                 ref={this.keyRefs.done}
                                 className="key key-done"
                                 onPress={() => this.onDone()}
+                                dir="auto"
                             >
                                 {texts.done}
                             </Interactable>
@@ -254,6 +264,7 @@ export class Keyboard extends QwertyKeyboardBase {
                             ref={this.keyRefs.cancel}
                             className="key key-cancel"
                             onPress={() => this.onCancel()}
+                            dir="auto"
                         >
                             {texts.cancel}
                         </Interactable>

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

@@ -113,6 +113,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                 domRef={this.keyboardWrapper}
                 matrix={this.focusMatrices.normal}
                 circular={circular}
+                dir="ltr"
             >
                 {this.renderKeyboard([
                     <>
@@ -148,6 +149,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                     onPress={() => {
                                         this.onKey(' ');
                                     }}
+                                    dir="auto"
                                 >
                                     <div className="key-background">
                                         {texts.space}
@@ -161,6 +163,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                             this.keyRefs.domain.current!.firstChild!.textContent!,
                                         );
                                     }}
+                                    dir="auto"
                                 >
                                     <div className="key-background">
                                         {texts.domain}
@@ -183,6 +186,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                 domRef={this.keyboardWrapper}
                 matrix={this.focusMatrices.special}
                 circular={circular}
+                dir="ltr"
             >
                 {this.renderKeyboard([
                     <>
@@ -213,6 +217,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                     onPress={() => {
                                         this.onKey(' ');
                                     }}
+                                    dir="auto"
                                 >
                                     <div className="key-background">
                                         {texts.space}
@@ -254,6 +259,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                         `key key-wide key-abc ${isNormalLayout ? 'active' : ''}`
                                     }
                                     onPress={this.onAbc}
+                                    dir="auto"
                                 >
                                     <div className="key-background">
                                         {texts.toNormalLayout}
@@ -269,6 +275,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                         }`
                                     }
                                     onPress={this.onSpecial}
+                                    dir="auto"
                                 >
                                     <div className="key-background">
                                         {texts.toSpecialLayout}
@@ -305,6 +312,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                     ref={this.keyRefs.clear}
                                     className="key key-wide key-clear"
                                     onPress={() => this.onClear()}
+                                    dir="auto"
                                 >
                                     <div className="key-background">
                                         {texts.clear}
@@ -343,6 +351,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                     ref={this.keyRefs.continue}
                                     className="key key-wide key-continue"
                                     onPress={() => this.onDone()}
+                                    dir="auto"
                                 >
                                     <div className="key-background">
                                         {texts.continue}

package/packages/keyboard/src/WhitelabelNumericKeyboard/NumericKeyboard.tsx

@@ -76,6 +76,7 @@ export class NumericKeyboard extends KeyboardBase<Layouts, Props> {
                     domRef={this.keyboardWrapper}
                     matrix={this.focusMatrices.normal}
                     circular={circular}
+                    dir="ltr"
                 >
                     <div className="numeric-keyboard-wrapper">
                         <div className="keys-container key-layout">
@@ -117,6 +118,7 @@ export class NumericKeyboard extends KeyboardBase<Layouts, Props> {
                                         ref={this.keyRefs.clear}
                                         className="key key-wide key-clear"
                                         onPress={() => this.onClear()}
+                                        dir="auto"
                                     >
                                         {texts.clear}
                                     </Interactable>
@@ -134,6 +136,7 @@ export class NumericKeyboard extends KeyboardBase<Layouts, Props> {
                                                     ref={this.keyRefs.continue}
                                                     className="key key-wide key-continue"
                                                     onPress={() => this.onDone()}
+                                                    dir="auto"
                                                 >
                                                     <div className="key-background">
                                                         {texts.continue}

package/packages/mouse-navigation/src/ArrowNavigation/index.tsx

@@ -1 +1 @@
-export { ArrowNavigation } from './ArrowNavigation';
+export { ArrowNavigation, ArrowType } from './ArrowNavigation';

package/packages/types-bigscreen-jsx/index.d.ts

@@ -98,7 +98,7 @@ declare namespace React {
      * - React stateless functional components that forward a `ref` will give you the `ElementRef` of the forwarded
      *   to component.
      *
-     * `C` must be the type _of_ a React component so you need to use typeof as in React.ElementRef<typeof MyComponent>.
+     * `C` must be the type _of_ a React component so you need to use typeof as in `React.ElementRef<typeof MyComponent>`.
      *
      * @todo In Flow, this works a little different with forwarded refs and the `AbstractComponent` that
      *       `React.forwardRef()` returns.

package/packages/utils/src/textUtils.ts

@@ -6,7 +6,7 @@ export const trimWithLeadingEllipsis = (row: HTMLSpanElement) => {
         const lineHeightString = window.getComputedStyle(row, null).getPropertyValue('line-height');
         const lineHeight = parseInt(lineHeightString, 10);
         let numberOfLines = row.offsetHeight / lineHeight;
-        if (numberOfLines > 2) {
+        if (numberOfLines >= 2) {
             const originalTextContent = row.textContent;
             row.textContent = ELLIPSIS;
             let stringBuffer = '';
@@ -17,9 +17,9 @@ export const trimWithLeadingEllipsis = (row: HTMLSpanElement) => {
                 row.textContent = `${ELLIPSIS}${stringBuffer}`;
                 currentPosition -= 1;
                 numberOfLines = Math.floor(row.offsetHeight / lineHeight);
-            } while (numberOfLines <= 2 && currentPosition >= 0);
+            } while (numberOfLines < 2 && currentPosition >= 0);
             row.textContent = `${ELLIPSIS}${stringBuffer.substring(1)}`;
         }
-        row.style.visibility = 'visible';
+        row.style.visibility = '';
     }
 };