@24i/bigscreen-sdk 1.0.4 → 1.0.5-4.alpha-2832

package/packages/keyboard/README.md

@@ -155,6 +155,7 @@ If you do not use backstage, you must import default Whitelabel styles.
 import { ime } from '@24i/bigscreen-sdk/ime';
 import { CircularDirection } from '@24i/bigscreen-sdk/focus';
 import { Keyboard } from '@24i/bigscreen-sdk/keyboard/WhitelabelKeyboard';
+import { hebrew } from '@24i/bigscreen-sdk/keyboard/Whitelabel/layouts';
 import { NumericKeyboard } from '@24i/bigscreen-sdk/keyboard/WhitelabelNumericKeyboard';
 
 // default styles import
@@ -196,6 +197,7 @@ class App extends Component {
                     continue: 'Continue',
                 }}
                 initialFocus={{ x: 5, y: 2 }}
+                languageLayout={hebrew} // Switchable language layout
             />
             <NumericKeyboard
                 ref={this.numericKeyboard}

package/packages/keyboard/src/Backdrop/Backdrop.scss

@@ -1,6 +1,7 @@
 .keyboard-backdrop {
     position: fixed;
     left: 0;
+    right: 0;
     top: 0;
     width: $backdrop-width;
     height: $backdrop-height;
@@ -9,6 +10,7 @@
 .keyboard-backdrop-disabled {
     position: absolute;
     left: 0;
+    right: 0;
     top: 0;
     width: 100%;
     height: 100%;

package/packages/keyboard/src/KeyboardBase.tsx

@@ -1,5 +1,6 @@
 import { Component, createRef, Reference } from '@24i/bigscreen-sdk/jsx';
-import { getKeyDigit } from '@24i/bigscreen-sdk/device';
+import { getKeyDigit, device } from '@24i/bigscreen-sdk/device';
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
 import { EventsManager } from '@24i/bigscreen-sdk/events-manager';
 import {
     Matrix,
@@ -120,8 +121,15 @@ export abstract class KeyboardBase<
      */
     onKeyDown(event: KeyboardEvent) {
         const { handleRemoteDigits, handleHWKeyboard } = this.props;
+        const preventBack = 'backAsBackspaceInSearch' in device && !!device.backAsBackspaceInSearch;
+        const inputLength = this.inputElement?.value?.length;
+
         if (BACK.is(event)) {
-            this.onCancel();
+            if (preventBack && inputLength) {
+                this.onBackspace();
+            } else {
+                this.onCancel();
+            }
         } else {
             let char: string | null = null;
             if (handleHWKeyboard) {
@@ -208,7 +216,9 @@ export abstract class KeyboardBase<
      * Moves caret 1 position to the left.
      */
     onLeft() {
-        const newPosition = caretLeft(this.inputElement);
+        const newPosition = !isRtl()
+            ? caretLeft(this.inputElement)
+            : caretRight(this.inputElement);
         if (typeof newPosition === 'number') {
             this.updateCaretPosition(newPosition);
         }
@@ -218,7 +228,9 @@ export abstract class KeyboardBase<
      * Moves caret 1 position to the right.
      */
     onRight() {
-        const newPosition = caretRight(this.inputElement);
+        const newPosition = !isRtl()
+            ? caretRight(this.inputElement)
+            : caretLeft(this.inputElement);
         if (typeof newPosition === 'number') {
             this.updateCaretPosition(newPosition);
         }

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

@@ -23,6 +23,10 @@
         padding-bottom: $keyboard-padding-bottom;
         height: 100%;
         width: 100%;
+
+        &.wide .key.key-space {
+            width: $key-space-wide-width;
+        }
     }
 
     .keys-container {
@@ -109,6 +113,12 @@
             width: $key-space-width;
         }
 
+        &.key-language {
+            .key-mask-icon {
+                @include mask-svg-icon('./icons/key_language.svg');
+            }
+        }
+
         &.key-shift {
             .key-mask-icon {
                 @include mask-svg-icon('./icons/key_shift.svg');

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

@@ -1,46 +1,25 @@
-import { clearNode, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { clearNode, DeclareProps, Reference } from '@24i/bigscreen-sdk/jsx';
 import { Matrix } from '@24i/bigscreen-sdk/focus';
 import { Interactable } from '@24i/bigscreen-sdk/interactable';
 import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { generateFocusMatrixFromStringMatrix } from '../utils/generateFocusMatrixFromStringMatrix';
 import { Backdrop } from '../Backdrop/Backdrop';
-import { BaseProps, KeyboardBase } from '../KeyboardBase';
+import { KeyboardBase } from '../KeyboardBase';
 import { KeyMatrixCell } from '../types';
-import { makeNormalFocusStrings, makeSpecialFocusStrings } from './focusMatrix';
-import { KeyTexts } from './types';
+import { latin, special } from './layouts';
+import { Layouts, Props } from './types';
 import './Keyboard.styles';
 
-type Layouts = 'normal' | 'special';
-
-export type Props = BaseProps<Layouts> & {
-    texts?: KeyTexts;
-    makeFocusStrings?: Record<Layouts, (base: KeyMatrixCell[][]) => KeyMatrixCell[][]>,
-};
-
-const NORMAL_LAYOUT = [
-    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
-    ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
-    ['k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't'],
-    ['u', 'v', 'w', 'x', 'y', 'z', '.', '@', '-', '_'],
-];
-
-const SPECIAL_LAYOUT = [
-    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
-    ['{', '}', '[', ']', '^', '%', '*', '#', '+', '='],
-    ['<', '>', '~', '/', '|', '\\', '(', ')', '&', '“'],
-    [';', ':', '‘', '!', '?', ',', '.', '@', '-', '_'],
-    ['$', '€'], ['£', '¥'],
-];
-
 export class Keyboard extends KeyboardBase<Layouts, Props> {
     static defaultProps = {
         ...KeyboardBase.defaultProps,
         layouts: {
-            normal: NORMAL_LAYOUT,
-            special: SPECIAL_LAYOUT,
+            normal: latin.layout,
+            special: special.layout,
         },
         makeFocusStrings: {
-            normal: makeNormalFocusStrings,
-            special: makeSpecialFocusStrings,
+            normal: latin.makeFocusStrings,
+            special: special.makeFocusStrings,
         },
         texts: {
             toNormalLayout: 'Abc',
@@ -53,22 +32,43 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
         initialFocus: { x: 5, y: 2 },
     };
 
+    languageFocusMatrix: Reference<HTMLDivElement>[][] = [[]];
+
     renderedLayout: Layouts | undefined = undefined;
 
+    isLanguageLayoutActive = false;
+
     declare props: DeclareProps<Props, typeof Keyboard.defaultProps>;
 
+    constructor(props: Props) {
+        super(props);
+        if (this.props.languageLayout) this.createLanguageFocusMatrix();
+    }
+
     createFocusMatrices() {
-        const { layouts, makeFocusStrings } = this.props;
+        const { layouts, makeFocusStrings, languageLayout } = this.props;
         super.createFocusMatrices({
-            normal: makeFocusStrings.normal(layouts.normal),
-            special: makeFocusStrings.special(layouts.special),
+            normal: makeFocusStrings.normal(layouts.normal, !!languageLayout),
+            special: makeFocusStrings.special(layouts.special, !!languageLayout),
         });
     }
 
+    createLanguageFocusMatrix() {
+        const { languageLayout } = this.props;
+        this.languageFocusMatrix = generateFocusMatrixFromStringMatrix(
+            this.keyRefs, languageLayout!.makeFocusStrings(languageLayout!.layout, true),
+        );
+    }
+
     show() {
         super.show();
         this.renderedLayout = 'normal';
-        this.renderNormal();
+        const { layouts, languageLayout } = this.props;
+        if (this.isLanguageLayoutActive) {
+            this.renderLayout(this.languageFocusMatrix, languageLayout!.layout);
+        } else {
+            this.renderLayout(this.focusMatrices.normal, layouts.normal);
+        }
     }
 
     hide() {
@@ -77,21 +77,40 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
         clearNode(this.keyboardWrapper);
     }
 
-    onAbc = () => {
+    onAbc() {
         if (this.renderedLayout === 'normal') return;
         this.renderedLayout = 'normal';
-        this.renderNormal();
+        const { layouts, languageLayout } = this.props;
+        if (this.isLanguageLayoutActive) {
+            this.renderLayout(this.languageFocusMatrix, languageLayout!.layout);
+        } else {
+            this.renderLayout(this.focusMatrices.normal, layouts.normal);
+        }
         this.matrix.current!.setIndex({ x: 0, y: 1 });
         this.matrix.current!.focus();
-    };
+    }
 
-    onSpecial = () => {
+    onSpecial() {
         if (this.renderedLayout === 'special') return;
         this.renderedLayout = 'special';
-        this.renderSpecial();
+        const { layouts } = this.props;
+        this.renderLayout(this.focusMatrices.special, layouts.special);
         this.matrix.current!.setIndex({ x: 0, y: 2 });
         this.matrix.current!.focus();
-    };
+    }
+
+    onLanguage() {
+        this.renderedLayout = 'normal';
+        const { layouts, languageLayout } = this.props;
+        this.isLanguageLayoutActive = !this.isLanguageLayoutActive;
+        if (this.isLanguageLayoutActive) {
+            this.renderLayout(this.languageFocusMatrix, languageLayout!.layout);
+        } else {
+            this.renderLayout(this.focusMatrices.normal, layouts.normal);
+        }
+        this.matrix.current!.setIndex({ x: 0, y: 4 });
+        this.matrix.current!.focus();
+    }
 
     generateKey = (char: string) => (
         <Interactable
@@ -105,111 +124,48 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
         </Interactable>
     );
 
-    renderNormal() {
+    renderLayout(matrix: Reference<HTMLDivElement>[][], layout: KeyMatrixCell[][]) {
         const { texts, circular } = this.props;
         this.clearMount(
             <Matrix
                 ref={this.matrix}
                 domRef={this.keyboardWrapper}
-                matrix={this.focusMatrices.normal}
+                matrix={matrix}
                 circular={circular}
                 dir="ltr"
             >
                 {this.renderKeyboard([
                     <>
                         <div className="key-row first-row rounded-border-container">
-                            {map(NORMAL_LAYOUT[0], this.generateKey)}
+                            {map(layout[0], this.generateKey)}
                         </div>
                         <div className="rounded-border-container">
                             <div className="key-row key-chars">
-                                {map(NORMAL_LAYOUT[1], this.generateKey)}
+                                {map(layout[1], this.generateKey)}
                             </div>
                             <div className="key-row key-chars">
-                                {map(NORMAL_LAYOUT[2], this.generateKey)}
+                                {map(layout[2], this.generateKey)}
                             </div>
                             <div className="key-row key-chars">
                                 {
                                     // eslint-disable-next-line no-magic-numbers
-                                    map(NORMAL_LAYOUT[3], this.generateKey)
-                                }
-                            </div>
-                            <div className="key-row">
-                                <Interactable
-                                    ref={this.keyRefs.shift}
-                                    className="key key-wide key-with-icon key-shift"
-                                    onPress={() => this.onShift()}
-                                >
-                                    <div className="key-background">
-                                        <div className="key-mask-icon" />
-                                    </div>
-                                </Interactable>
-                                <Interactable
-                                    ref={this.keyRefs.space}
-                                    className="key key-wide key-space"
-                                    onPress={() => {
-                                        this.onKey(' ');
-                                    }}
-                                    dir="auto"
-                                >
-                                    <div className="key-background">
-                                        {texts.space}
-                                    </div>
-                                </Interactable>
-                                <Interactable
-                                    ref={this.keyRefs.domain}
-                                    className="key key-wide key-domain"
-                                    onPress={() => {
-                                        this.onKey(
-                                            this.keyRefs.domain.current!.firstChild!.textContent!,
-                                        );
-                                    }}
-                                    dir="auto"
-                                >
-                                    <div className="key-background">
-                                        {texts.domain}
-                                    </div>
-                                </Interactable>
-                            </div>
-                        </div>
-                    </>,
-                ])}
-            </Matrix>,
-            this.keyboardWrapper,
-        );
-    }
-
-    renderSpecial() {
-        const { texts, circular } = this.props;
-        this.clearMount(
-            <Matrix
-                ref={this.matrix}
-                domRef={this.keyboardWrapper}
-                matrix={this.focusMatrices.special}
-                circular={circular}
-                dir="ltr"
-            >
-                {this.renderKeyboard([
-                    <>
-                        <div className="key-row first-row rounded-border-container">
-                            {map(SPECIAL_LAYOUT[0], this.generateKey)}
-                        </div>
-                        <div className="rounded-border-container">
-                            <div className="key-row">
-                                {map(SPECIAL_LAYOUT[1], this.generateKey)}
-                            </div>
-                            <div className="key-row">
-                                {map(SPECIAL_LAYOUT[2], this.generateKey)}
-                            </div>
-                            <div className="key-row">
-                                {
-                                    // eslint-disable-next-line no-magic-numbers
-                                    map(SPECIAL_LAYOUT[3], this.generateKey)
+                                    map(layout[3], this.generateKey)
                                 }
                             </div>
                             <div className="key-row">
                                 {
                                     // eslint-disable-next-line no-magic-numbers
-                                    map(SPECIAL_LAYOUT[4], this.generateKey)
+                                    layout[4] ? map(layout[4], this.generateKey) : (
+                                        <Interactable
+                                            ref={this.keyRefs.shift}
+                                            className="key key-wide key-with-icon key-shift"
+                                            onPress={() => this.onShift()}
+                                        >
+                                            <div className="key-background">
+                                                <div className="key-mask-icon" />
+                                            </div>
+                                        </Interactable>
+                                    )
                                 }
                                 <Interactable
                                     ref={this.keyRefs.space}
@@ -225,7 +181,21 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                 </Interactable>
                                 {
                                     // eslint-disable-next-line no-magic-numbers
-                                    map(SPECIAL_LAYOUT[5], this.generateKey)
+                                    layout[5] ? map(layout[5], this.generateKey) : (
+                                        <Interactable
+                                            ref={this.keyRefs.domain}
+                                            className="key key-wide key-domain"
+                                            onPress={() => {
+                                                this.onKey(this.keyRefs.domain.current!
+                                                    .firstChild!.textContent!);
+                                            }}
+                                            dir="auto"
+                                        >
+                                            <div className="key-background">
+                                                {texts.domain}
+                                            </div>
+                                        </Interactable>
+                                    )
                                 }
                             </div>
                         </div>
@@ -237,7 +207,8 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
     }
 
     renderKeyboard(layout: JSX.Element[]) {
-        const { texts, shouldHideOnBackdropClick } = this.props;
+        const { texts, shouldHideOnBackdropClick, languageLayout } = this.props;
+        const layoutClassName = languageLayout?.className || '';
         const isSpecialLayout = this.renderedLayout === 'special';
         const isNormalLayout = this.renderedLayout === 'normal';
         return (
@@ -246,7 +217,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                     onClick={() => this.onCancel()}
                     enableOnClick={shouldHideOnBackdropClick}
                 />
-                <div className="keyboard-wrapper">
+                <div className={`keyboard-wrapper ${layoutClassName}`}>
                     <div className="keys-container side-bar layout-selector">
                         <div className="key-row first-row">
                             <div className="key key-wide key-empty">&nbsp;</div>
@@ -258,11 +229,12 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                     className={
                                         `key key-wide key-abc ${isNormalLayout ? 'active' : ''}`
                                     }
-                                    onPress={this.onAbc}
+                                    onPress={() => this.onAbc()}
                                     dir="auto"
                                 >
                                     <div className="key-background">
-                                        {texts.toNormalLayout}
+                                        {this.isLanguageLayoutActive
+                                            ? languageLayout?.keyText : texts.toNormalLayout}
                                     </div>
                                 </Interactable>
                             </div>
@@ -274,7 +246,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                             isSpecialLayout ? 'active' : ''
                                         }`
                                     }
-                                    onPress={this.onSpecial}
+                                    onPress={() => this.onSpecial()}
                                     dir="auto"
                                 >
                                     <div className="key-background">
@@ -286,9 +258,25 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                         <div className="key-row">
                             <div className="key key-wide key-empty">&nbsp;</div>
                         </div>
-                        <div className="key-row">
-                            <div className="key key-wide key-empty">&nbsp;</div>
-                        </div>
+                        {languageLayout
+                            ? (
+                                <div className="key-row rounded-border-container">
+                                    <Interactable
+                                        ref={this.keyRefs.language}
+                                        className="key key-wide key-with-icon key-language"
+                                        onPress={() => this.onLanguage()}
+                                    >
+                                        <div className="key-background">
+                                            <div className="key-mask-icon" />
+                                        </div>
+                                    </Interactable>
+                                </div>
+                            )
+                            : (
+                                <div className="key-row">
+                                    <div className="key key-wide key-empty">&nbsp;</div>
+                                </div>
+                            )}
                     </div>
                     <div className="keys-container key-layout">
                         {layout}
@@ -345,19 +333,17 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                         <div className="key-row">
                             <div className="key key-wide key-empty">&nbsp;</div>
                         </div>
-                        <div className="rounded-border-container">
-                            <div className="key-row">
-                                <Interactable
-                                    ref={this.keyRefs.continue}
-                                    className="key key-wide key-continue"
-                                    onPress={() => this.onDone()}
-                                    dir="auto"
-                                >
-                                    <div className="key-background">
-                                        {texts.continue}
-                                    </div>
-                                </Interactable>
-                            </div>
+                        <div className="key-row rounded-border-container">
+                            <Interactable
+                                ref={this.keyRefs.continue}
+                                className="key key-wide key-continue"
+                                onPress={() => this.onDone()}
+                                dir="auto"
+                            >
+                                <div className="key-background">
+                                    {texts.continue}
+                                </div>
+                            </Interactable>
                         </div>
                     </div>
                 </div>

package/packages/keyboard/src/WhitelabelKeyboard/WhitelabelStyles/whitelabel.scss

@@ -31,6 +31,10 @@ $light-background: rgba(97, 98, 100, 0.3);
             }
         }
 
+        &.key-language {
+            background-color: $light-background;
+        }
+
         &.key-space {
             background-color: $dark-background;
         }

package/packages/keyboard/src/WhitelabelKeyboard/_sizes.1080.scss

@@ -26,6 +26,7 @@ $icon-mask-size: 40px;
 $key-with-icon-padding: 17px 22px;
 
 $key-space-width: 528px;
+$key-space-wide-width: 609px;
 
 $focus-shadow-1: 0 1px 3px 0;
 $focus-shadow-2: 0 20px 32px 0;

package/packages/keyboard/src/WhitelabelKeyboard/_sizes.scss

@@ -26,6 +26,7 @@ $icon-mask-size: 27px;
 $key-with-icon-padding: 11px 15px;
 
 $key-space-width: 348px;
+$key-space-wide-width: 406px;
 
 $focus-shadow-1: 0 1px 2px 0;
 $focus-shadow-2: 0 13px 21px 0;

package/packages/keyboard/src/WhitelabelKeyboard/icons/key_language.svg

@@ -0,0 +1,20 @@
+<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <clipPath id="kio1mowqva">
+            <path d="M1920 0v1080H0V0h1920z"/>
+        </clipPath>
+        <clipPath id="b7gbx9lplb">
+            <path d="M168 0a8 8 0 0 1 8 8v58a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8a8 8 0 0 1 8-8h160z"/>
+        </clipPath>
+        <clipPath id="jjict19bjc">
+            <path d="M16.65 0c9.217 0 16.683 7.467 16.683 16.667 0 9.2-7.466 16.666-16.683 16.666C7.45 33.333 0 25.867 0 16.667S7.45 0 16.65 0zm3.2 23.333h-6.367c.717 2.384 1.8 4.6 3.184 6.6 1.383-2 2.466-4.216 3.183-6.6zm-9.8 0H5.133a13.311 13.311 0 0 0 7.217 5.934c-1-1.85-1.767-3.85-2.3-5.934zm18.15 0h-4.917a26.082 26.082 0 0 1-2.3 5.934 13.383 13.383 0 0 0 7.217-5.934zm-18.8-10H3.767a13.736 13.736 0 0 0-.434 3.334c0 1.15.167 2.266.434 3.333H9.4c-.133-1.1-.233-2.2-.233-3.333 0-1.134.1-2.234.233-3.334zm11.167 0h-7.8c-.15 1.084-.267 2.2-.267 3.334 0 1.133.117 2.233.267 3.333h7.8c.15-1.1.266-2.2.266-3.333 0-1.134-.116-2.25-.266-3.334zm9 0h-5.634c.134 1.1.234 2.2.234 3.334 0 1.133-.1 2.233-.234 3.333h5.634c.266-1.067.433-2.183.433-3.333 0-1.15-.167-2.267-.433-3.334zm-8.584-9.266c1 1.85 1.767 3.85 2.3 5.933H28.2a13.383 13.383 0 0 0-7.217-5.933zm-8.633 0A13.311 13.311 0 0 0 5.133 10h4.917a26.082 26.082 0 0 1 2.3-5.933zm4.317-.667a23.478 23.478 0 0 0-3.184 6.6h6.367c-.717-2.383-1.8-4.6-3.183-6.6z"/>
+        </clipPath>
+    </defs>
+    <g clip-path="url(#kio1mowqva)" transform="translate(-388 -969)">
+        <g clip-path="url(#b7gbx9lplb)" transform="translate(320 952)">
+            <g clip-path="url(#jjict19bjc)" transform="translate(71.333 20.333)">
+                <path fill="#FFF" d="M0 0h33.333v33.333H0V0z"/>
+            </g>
+        </g>
+    </g>
+</svg>

package/packages/keyboard/src/WhitelabelKeyboard/index.ts

@@ -1,2 +1,2 @@
 export { Keyboard } from './Keyboard';
-export type { Props } from './Keyboard';
+export type { Props } from './types';

package/packages/keyboard/src/WhitelabelKeyboard/layouts/arabic.ts

@@ -0,0 +1,27 @@
+/* eslint-disable no-magic-numbers */
+import { KeyMatrixCell } from '../../types';
+
+const keyboardLayout = [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', ',', '.'],
+    ['ا', 'ب', 'ت', 'ث', 'ج', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'س'],
+    ['ش', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ك', 'ل', 'م'],
+    ['ن', 'ه', 'و', 'ي', 'ء', 'آ', 'إ', 'ة', 'ؤ', 'ئ', 'ى', 'أ'],
+];
+
+/* eslint-disable max-len */
+const makeFocusStrings = (layout: KeyMatrixCell[][], hasLanguageLayout: boolean) => [
+    ['', '', ...layout[0], 'backspace', 'backspace'],
+    ['abc', 'abc', ...layout[1], 'clear', 'clear'],
+    ['special', 'special', ...layout[2], 'left', 'right'],
+    ['', '', ...layout[3], '', ''],
+    [
+        ...(hasLanguageLayout ? ['language', 'language'] : ['', '']),
+        'shift', 'shift', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'domain', 'domain', 'continue', 'continue'],
+];
+
+export const arabic = {
+    className: 'wide',
+    keyText: 'ابت',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};

package/packages/keyboard/src/WhitelabelKeyboard/layouts/burmese.ts

@@ -0,0 +1,27 @@
+/* eslint-disable no-magic-numbers */
+import { KeyMatrixCell } from '../../types';
+
+const keyboardLayout = [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.'],
+    ['က', 'ခ', 'ဂ', 'ဃ', 'င', 'စ', 'ဆ', 'ဇ', 'စ်', 'ည', 'ဋ'],
+    ['႒', 'ဍ', 'ဏ', 'တ', 'ထ', 'ဒ', 'ဓ', 'န', 'ပ', 'ဖ', 'ဗ'],
+    ['ဘ', 'မ', 'ယ', 'ရ', 'လ', 'ဝ', 'သ', 'ဟ', 'ဠ', 'အ', '-'],
+];
+
+/* eslint-disable max-len */
+const makeFocusStrings = (layout: KeyMatrixCell[][], hasLanguageLayout: boolean) => [
+    ['', '', ...layout[0], 'backspace', 'backspace'],
+    ['abc', 'abc', ...layout[1], 'clear', 'clear'],
+    ['special', 'special', ...layout[2], 'left', 'right'],
+    ['', '', ...layout[3], '', ''],
+    [
+        ...(hasLanguageLayout ? ['language', 'language'] : ['', '']),
+        'shift', 'shift', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'domain', 'domain', 'continue', 'continue'],
+];
+
+export const burmese = {
+    className: 'wide',
+    keyText: 'ကခဂ',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};

package/packages/keyboard/src/WhitelabelKeyboard/layouts/dari.ts

@@ -0,0 +1,28 @@
+/* eslint-disable no-magic-numbers */
+import { KeyMatrixCell } from '../../types';
+
+const keyboardLayout = [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.'],
+    ['ا', 'ب', 'پ', 'ت', 'ث', 'ج', 'چ', 'ح', 'خ', 'د', 'ذ'],
+    ['ر', 'ز', 'ژ', 'س', 'ش', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ'],
+    ['ف', 'ق', 'ک', 'گ', 'ل', 'م', 'ن', 'و', 'ه', 'ی', '-'],
+
+];
+
+/* eslint-disable max-len */
+const makeFocusStrings = (layout: KeyMatrixCell[][], hasLanguageLayout: boolean) => [
+    ['', '', ...layout[0], 'backspace', 'backspace'],
+    ['abc', 'abc', ...layout[1], 'clear', 'clear'],
+    ['special', 'special', ...layout[2], 'left', 'right'],
+    ['', '', ...layout[3], '', ''],
+    [
+        ...(hasLanguageLayout ? ['language', 'language'] : ['', '']),
+        'shift', 'shift', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'domain', 'domain', 'continue', 'continue'],
+];
+
+export const dari = {
+    className: 'wide',
+    keyText: 'ابپ',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};