@24i/bigscreen-sdk 1.0.54-alpha.2836 → 2.1.1-alpha.2133

package/packages/interactable/src/interface.ts

@@ -3,5 +3,4 @@ import { Children } from '@24i/bigscreen-sdk/jsx';
 export type Props = {
     children?: Children,
     onPress?: (event: KeyboardEvent | MouseEvent) => void,
-    blockRepeatedKeyDown?: boolean,
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;

package/packages/jsx/src/index.ts

@@ -27,5 +27,5 @@ export type {
     ClassComponentInterface,
     DeclareProps,
 } from './types';
-// eslint-disable-next-line import/no-default-export, no-restricted-exports
+// eslint-disable-next-line import/no-default-export
 export { createElement as default } from './virtualDOM';

package/packages/jsx/src/test-utils/index.ts

@@ -1,6 +1,5 @@
 export { click } from './click';
 export { enter } from './enter';
 export { keydown } from './keydown';
-export { keyup } from './keyup';
 export { shallow } from './shallow';
 export { MountedComponent } from './MountedComponent';

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

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

package/packages/keyboard/src/KeyboardBase.tsx

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

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

@@ -23,10 +23,6 @@
         padding-bottom: $keyboard-padding-bottom;
         height: 100%;
         width: 100%;
-
-        &.wide .key.key-space {
-            width: $key-space-wide-width;
-        }
     }
 
     .keys-container {

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

@@ -56,19 +56,14 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
     createLanguageFocusMatrix() {
         const { languageLayout } = this.props;
         this.languageFocusMatrix = generateFocusMatrixFromStringMatrix(
-            this.keyRefs, languageLayout!.makeFocusStrings(languageLayout!.layout, true),
+            this.keyRefs, languageLayout!.makeFocusStrings(languageLayout!.layout, true)
         );
     }
 
     show() {
         super.show();
         this.renderedLayout = 'normal';
-        const { layouts, languageLayout } = this.props;
-        if (this.isLanguageLayoutActive) {
-            this.renderLayout(this.languageFocusMatrix, languageLayout!.layout);
-        } else {
-            this.renderLayout(this.focusMatrices.normal, layouts.normal);
-        }
+        this.renderLayout(this.focusMatrices.normal, this.props.layouts.normal);
     }
 
     hide() {
@@ -208,7 +203,6 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
 
     renderKeyboard(layout: JSX.Element[]) {
         const { texts, shouldHideOnBackdropClick, languageLayout } = this.props;
-        const layoutClassName = languageLayout?.className || '';
         const isSpecialLayout = this.renderedLayout === 'special';
         const isNormalLayout = this.renderedLayout === 'normal';
         return (
@@ -217,7 +211,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                     onClick={() => this.onCancel()}
                     enableOnClick={shouldHideOnBackdropClick}
                 />
-                <div className={`keyboard-wrapper ${layoutClassName}`}>
+                <div className="keyboard-wrapper">
                     <div className="keys-container side-bar layout-selector">
                         <div className="key-row first-row">
                             <div className="key key-wide key-empty">&nbsp;</div>
@@ -258,25 +252,23 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                         <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>
-                            )}
+                        {!!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}

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

@@ -26,7 +26,6 @@ $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,7 +26,6 @@ $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/layouts/index.ts

@@ -1,15 +1,3 @@
-export { arabic } from './arabic';
-export { burmese } from './burmese';
-export { dari } from './dari';
 export { hebrew } from './hebrew';
-export { korean } from './korean';
 export { latin } from './latin';
-export { pashto } from './pashto';
-export { persian } from './persian';
-export { russian } from './russian';
-export { spanish } from './spanish';
 export { special } from './special';
-export { tibetan } from './tibetan';
-export { turkish } from './turkish';
-export { ukrainian } from './ukrainian';
-export { urdu } from './urdu';

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

@@ -13,7 +13,6 @@ export type KeyTexts = {
 };
 
 export type LanguageLayout = {
-    className? : string,
     keyText: KeyTexts['toNormalLayout'],
     layout: KeyMatrixCell[][],
     makeFocusStrings: (layout: KeyMatrixCell[][], hasLanguageLayout: boolean) => KeyMatrixCell[][],

package/packages/keyboard/src/utils/caret.ts

@@ -1,11 +1,14 @@
-import { setInputSelectionRange } from './setInputSelectionRange';
+const updateCaretPosition = (input: HTMLInputElement, position: number) => {
+    input.selectionStart = position;
+    input.selectionEnd = position;
+};
 
 export const caretLeft = (input: HTMLInputElement | null): false | number => {
     if (!input) return false;
     const selectionStart = input.selectionStart!;
     if (selectionStart > 0) {
         const newPosition = selectionStart - 1;
-        setInputSelectionRange(input, newPosition);
+        updateCaretPosition(input, newPosition);
         return newPosition;
     }
     return false;
@@ -17,7 +20,7 @@ export const caretRight = (input: HTMLInputElement | null): false | number => {
     const selectionStart = input.selectionStart!;
     if (selectionStart < value.length) {
         const newPosition = selectionStart + 1;
-        setInputSelectionRange(input, newPosition);
+        updateCaretPosition(input, newPosition);
         return newPosition;
     }
     return false;
@@ -27,7 +30,7 @@ export const caretHome = (input: HTMLInputElement | null): false | number => {
     if (!input) return false;
     const selectionStart = input.selectionStart!;
     if (selectionStart > 0) {
-        setInputSelectionRange(input, 0);
+        updateCaretPosition(input, 0);
         return 0;
     }
     return false;
@@ -38,7 +41,7 @@ export const caretEnd = (input: HTMLInputElement | null): false | number => {
     const { value: { length } } = input;
     const selectionStart = input.selectionStart!;
     if (selectionStart < length) {
-        setInputSelectionRange(input, length);
+        updateCaretPosition(input, length);
         return length;
     }
     return false;

package/packages/keyboard/src/utils/input.ts

@@ -1,5 +1,3 @@
-import { setInputSelectionRange } from './setInputSelectionRange';
-
 export const insertCharAtCaret = (input: HTMLInputElement | null, char: string): false | string => {
     if (!input) return false;
     const { value } = input;
@@ -8,7 +6,8 @@ export const insertCharAtCaret = (input: HTMLInputElement | null, char: string):
     const postCaret = value.substring(selectionStart);
     input.value = `${preCaret}${char}${postCaret}`;
     const newCaretPosition = selectionStart + char.length;
-    setInputSelectionRange(input, newCaretPosition);
+    input.selectionStart = newCaretPosition;
+    input.selectionEnd = newCaretPosition;
     return input.value;
 };
 
@@ -21,7 +20,8 @@ export const backspace = (input: HTMLInputElement): false | string => {
     const postCaret = value.substring(selectionStart);
     input.value = `${preCaret}${postCaret}`;
     const newCaretPosition = selectionStart - 1;
-    setInputSelectionRange(input, newCaretPosition);
+    input.selectionStart = newCaretPosition;
+    input.selectionEnd = newCaretPosition;
     return input.value;
 };
 
@@ -34,6 +34,7 @@ export const del = (input: HTMLInputElement): false | string => {
     const postCaret = value.substring(selectionStart + 1);
     input.value = `${preCaret}${postCaret}`;
     const newCaretPosition = selectionStart;
-    setInputSelectionRange(input, newCaretPosition);
+    input.selectionStart = newCaretPosition;
+    input.selectionEnd = newCaretPosition;
     return input.value;
 };

package/packages/l10n/README.md

@@ -76,24 +76,6 @@ type DateTimeFormatOptions = {
 }
 ```
 
-#### date-fns DateTime format
-It is also possible to use formatting provided by [date-fns](https://date-fns.org/v2.30.0/docs/format) library. First you need to globally configure the formats used (usually from backstage):
-```ts
-l10n.init({
-    dateFormatLong?: string | null, // e.g. 'eee, dd MMM' for "Wed, 09 Jul"
-    dateFormatNumeric?: string | null, // e.g. 'EEEE, MMMM d' for "Wednesday, July 9"
-    dateFormatShort?: string | null, // e.g. 'MM/dd/yyyy' for "07/09/2023"
-    timeFormat?: string | null, // e.g. 'h:mm a' for "9:05 PM"
-});
-```
-After that, `timeFormat` and `dateFormatShort` are used automatically where appropriate, in case the format string is _falsy_ the [default formatting implementation](#datetime-format) will be used. You can also specify which format you want to use in `DateTimeFormatOptions`:
-```ts
-type DateTimeFormatOptions = {
-    ...
-    formatType: 'dateFormatLong' | 'dateFormatNumeric' | 'dateFormatShort' | 'timeFormat',
-}
-```
-
 You can use both `timestamp` in `ms` or `Date` object directly for formatting.
 
 #### Examples

package/packages/l10n/src/date/common.ts

@@ -7,7 +7,7 @@ const NOON = 12;
 
 export const SECOND_FROM_END = 2;
 
-export const h24 = (date: Date) => date.getUTCHours().toString();
+export const h24 = (date: Date) => date.getHours().toString();
 
 export const hh24 = (date: Date) => {
     const h = h24(date);
@@ -15,7 +15,7 @@ export const hh24 = (date: Date) => {
 };
 
 export const h12 = (date: Date) => {
-    const h = date.getUTCHours() % NOON;
+    const h = date.getHours() % NOON;
     return h === 0 ? '12' : h.toString();
 };
 
@@ -24,14 +24,14 @@ export const hh12 = (date: Date) => {
     return h.length === 1 ? `0${h}` : h;
 };
 
-export const m = (date: Date) => date.getUTCMinutes().toString();
+export const m = (date: Date) => date.getMinutes().toString();
 
 export const mm = (date: Date) => {
     const min = m(date);
     return min.length === 1 ? `0${min}` : min;
 };
 
-export const s = (date: Date) => date.getUTCSeconds().toString();
+export const s = (date: Date) => date.getSeconds().toString();
 
 export const ss = (date: Date) => {
     const sec = s(date);
@@ -39,7 +39,7 @@ export const ss = (date: Date) => {
 };
 
 export const amOrPm = (date: Date) => (
-    date.getUTCHours() < NOON ? 'AM' : 'PM'
+    date.getHours() < NOON ? 'AM' : 'PM'
 );
 
 export const h24Mm = (date: Date) => `${h24(date)}:${mm(date)}`;
@@ -107,7 +107,7 @@ export const collonSeparatedHour12MinuteSecond = (date: Date, options: DateTimeF
 
 export const processYear = (dateStringParts: string[], year: Year | undefined, date: Date) => {
     if (typeof year === 'undefined') return;
-    const fullYear = date.getUTCFullYear().toString();
+    const fullYear = date.getFullYear().toString();
     dateStringParts.push(
         year === '2-digit'
             ? fullYear.substring(fullYear.length - SECOND_FROM_END)
@@ -151,15 +151,3 @@ export const dateFormatter = (
         )(date),
     };
 };
-
-export const toTwoDigitLocaleTimeString = (date: Date) => (
-    options: DateTimeFormatOptions = {
-        hour: '2-digit', minute: '2-digit', second: '2-digit',
-    },
-) => collonSeparatedHour24MinuteSecond(date, options);
-
-export const toNumericLocaleTimeString = (date: Date) => (
-    options: DateTimeFormatOptions = {
-        hour: 'numeric', minute: '2-digit', second: '2-digit',
-    },
-) => collonSeparatedHour24MinuteSecond(date, options);

package/packages/l10n/src/date/cs.ts

@@ -1,4 +1,4 @@
-import { dateFormatter, processYear, toNumericLocaleTimeString } from './common';
+import { collonSeparatedHour24MinuteSecond, dateFormatter, processYear } from './common';
 import type { DateTimeFormatOptions, Weekday, Day, Month, Year } from './types';
 
 const WEEKDAYS = {
@@ -86,4 +86,10 @@ const toLocaleDateString = (date: Date) => (
     return dateStringParts.join(' ');
 };
 
-export const csDateFormatter = dateFormatter(toNumericLocaleTimeString, toLocaleDateString, ' ');
+const toLocaleTimeString = (date: Date) => (
+    options: DateTimeFormatOptions = {
+        hour: 'numeric', minute: '2-digit', second: '2-digit',
+    },
+) => collonSeparatedHour24MinuteSecond(date, options);
+
+export const csDateFormatter = dateFormatter(toLocaleTimeString, toLocaleDateString, ' ');

package/packages/l10n/src/date/en-001.ts

@@ -1,7 +1,7 @@
 import {
     collonSeparatedHour12MinuteSecond, dateFormatter, processYear, SECOND_FROM_END,
 } from './common';
-import { EN_MONTHS, processWeekday, isDdMmYyyy } from './en-common';
+import { MONTHS, processWeekday, isDdMmYyyy } from './en-common';
 import type { DateTimeFormatOptions, Day, Month, Year } from './types';
 
 const processMonth = (
@@ -19,7 +19,7 @@ const processMonth = (
                 : numericMonth
         }${typeof year !== 'undefined' ? ',' : ''}`);
     } else {
-        dateStringParts.push(EN_MONTHS[month][date.getMonth()]);
+        dateStringParts.push(MONTHS[month][date.getMonth()]);
     }
 };
 
@@ -49,7 +49,7 @@ const getDdMmYyyy = (dateStringParts: string[], year: Year | undefined, date: Da
     dateStringParts.push(`${d}/${m}/${y}`);
 };
 
-const toLocaleDateString = (date: Date) => (
+export const toLocaleDateString = (date: Date) => (
     { weekday, year, month, day }: DateTimeFormatOptions = {
         year: 'numeric', month: '2-digit', day: '2-digit',
     },

package/packages/l10n/src/date/en-common.ts

@@ -1,6 +1,6 @@
-import type { Day, Month, Weekday, LocaleData, Year } from './types';
+import type { Day, Month, Weekday, Year } from './types';
 
-export const EN_MONTHS = {
+export const MONTHS = {
     narrow: [
         'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
     ],
@@ -13,7 +13,7 @@ export const EN_MONTHS = {
     ],
 };
 
-export const EN_WEEKDAYS = {
+export const WEEKDAYS = {
     narrow: [
         'S', 'M', 'T', 'W', 'T', 'F', 'S',
     ],
@@ -32,10 +32,9 @@ export const processWeekday = (
     day: Day | undefined,
     weekday: Weekday | undefined,
     date: Date,
-    weekdaysLocaleData: LocaleData = EN_WEEKDAYS,
 ) => {
     if (typeof weekday === 'undefined') return;
-    let weekdayString = weekdaysLocaleData[weekday][date.getDay()];
+    let weekdayString = WEEKDAYS[weekday][date.getDay()];
     if (
         typeof year !== 'undefined'
         || typeof month !== 'undefined'

package/packages/l10n/src/date/en-us.ts

@@ -4,7 +4,7 @@ import {
     processYear,
     SECOND_FROM_END,
 } from './common';
-import { EN_MONTHS, processWeekday, isDdMmYyyy } from './en-common';
+import { MONTHS, processWeekday, isDdMmYyyy } from './en-common';
 import type { DateTimeFormatOptions, Day, Month, Year } from './types';
 
 const processMonth = (dateStringParts: string[], month: Month | undefined, date: Date) => {
@@ -16,7 +16,7 @@ const processMonth = (dateStringParts: string[], month: Month | undefined, date:
                 ? `0${numericMonth}` : numericMonth,
         );
     } else {
-        dateStringParts.push(EN_MONTHS[month][date.getMonth()]);
+        dateStringParts.push(MONTHS[month][date.getMonth()]);
     }
 };
 
@@ -56,7 +56,7 @@ const getDdMmYyyy = (
     dateStringParts.push(`${m}/${d}/${y}`);
 };
 
-const toLocaleDateString = (date: Date) => (
+export const toLocaleDateString = (date: Date) => (
     { weekday, year, month, day }: DateTimeFormatOptions = {
         year: 'numeric', month: 'numeric', day: 'numeric',
     },

package/packages/l10n/src/date/iso.ts

@@ -1,13 +1,8 @@
-import { dateFormatter, processYear, toTwoDigitLocaleTimeString } from './common';
-import { EN_MONTHS, EN_WEEKDAYS } from './en-common';
+import { collonSeparatedHour24MinuteSecond, dateFormatter, processYear } from './common';
+import { MONTHS, WEEKDAYS } from './en-common';
 import type { DateTimeFormatOptions, Day, Month, Weekday, Year } from './types';
 
-const processMonth = (
-    dateParts: string[],
-    month: Month | undefined,
-    date: Date,
-
-) => {
+const processMonth = (dateParts: string[], month: Month | undefined, date: Date) => {
     if (typeof month === 'undefined') return;
     if (month === '2-digit' || month === 'numeric') {
         const strMonth = (date.getMonth() + 1).toString();
@@ -16,7 +11,7 @@ const processMonth = (
             strMonth.length === 1 ? `0${strMonth}` : strMonth,
         );
     } else {
-        dateParts.push(EN_MONTHS[month][date.getMonth()]);
+        dateParts.push(MONTHS[month][date.getMonth()]);
     }
 };
 
@@ -34,7 +29,7 @@ const processWeekday = (
         && typeof month === 'undefined'
         && typeof day === 'undefined'
     );
-    dateStringParts.push(`${EN_WEEKDAYS[weekday][date.getDay()]}${isOnlyWeekday ? '' : ','}`);
+    dateStringParts.push(`${WEEKDAYS[weekday][date.getDay()]}${isOnlyWeekday ? '' : ','}`);
 };
 
 const processDay = (dateParts: string[], day: Day | undefined, date: Date) => {
@@ -44,7 +39,7 @@ const processDay = (dateParts: string[], day: Day | undefined, date: Date) => {
     dateParts.push(strDate.length === 1 ? `0${strDate}` : strDate);
 };
 
-const toLocaleDateString = (date: Date) => (
+export const toLocaleDateString = (date: Date) => (
     { weekday, year, month, day }: DateTimeFormatOptions = {
         year: 'numeric', month: '2-digit', day: '2-digit',
     },
@@ -60,4 +55,10 @@ const toLocaleDateString = (date: Date) => (
     return dateStringParts.join(' ');
 };
 
-export const isoDateFormatter = dateFormatter(toTwoDigitLocaleTimeString, toLocaleDateString);
+const toLocaleTimeString = (date: Date) => (
+    options: DateTimeFormatOptions = {
+        hour: '2-digit', minute: '2-digit', second: '2-digit',
+    },
+) => collonSeparatedHour24MinuteSecond(date, options);
+
+export const isoDateFormatter = dateFormatter(toLocaleTimeString, toLocaleDateString);

package/packages/l10n/src/date/types.ts

@@ -20,8 +20,6 @@ type TimeKeys = 'hour' | 'minute' | 'second';
 
 type DateKeys = 'weekday' | 'year' | 'month' | 'day';
 
-type FormatType = 'dateFormatLong' | 'dateFormatNumeric' | 'dateFormatShort' | 'timeFormat';
-
 export type DateTimeFormatOptions = {
     weekday?: Weekday,
     year?: Year,
@@ -30,7 +28,6 @@ export type DateTimeFormatOptions = {
     hour?: Hour,
     minute?: Minute,
     second?: Second,
-    formatType?: FormatType,
 };
 
 export type DateFormatOptions = Pick<DateTimeFormatOptions, DateKeys>;
@@ -48,9 +45,3 @@ export type Props = {
     locale?: string,
     options?: DateTimeFormatOptions,
 };
-
-export type LocaleData = {
-    narrow: string[];
-    short: string[];
-    long: string[];
-};