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

package/packages/keyboard/src/WhitelabelKeyboard/layouts/hebrew.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'] : ['', '']),
+        ...layout[4], 'space', 'space', 'space', 'space', 'space', 'space', 'domain', 'domain', 'continue', 'continue',
+    ],
+];
+
+export const hebrew = {
+    keyText: 'אבג',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};

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

@@ -0,0 +1,15 @@
+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/layouts/korean.ts

@@ -0,0 +1,26 @@
+/* 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', 'domain', 'domain', 'continue', 'continue'],
+];
+
+export const korean = {
+    keyText: 'ᄀᄂᄃ',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};

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

@@ -0,0 +1,26 @@
+/* eslint-disable no-magic-numbers */
+import { KeyMatrixCell } from '../../types';
+
+const keyboardLayout = [
+    ['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', '.', '@', '-', '_'],
+];
+
+/* 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', 'domain', 'domain', 'continue', 'continue'],
+];
+
+export const latin = {
+    keyText: 'Abc',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};

package/packages/keyboard/src/WhitelabelKeyboard/layouts/pashto.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 pashto = {
+    className: 'wide',
+    keyText: 'ابپ',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};

package/packages/keyboard/src/WhitelabelKeyboard/layouts/persian.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 persian = {
+    className: 'wide',
+    keyText: 'ابپ',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};

package/packages/keyboard/src/WhitelabelKeyboard/layouts/russian.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 russian = {
+    className: 'wide',
+    keyText: 'абв',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};

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

@@ -0,0 +1,26 @@
+/* eslint-disable no-magic-numbers */
+import { KeyMatrixCell } from '../../types';
+
+const keyboardLayout = [
+    ['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', '.', '@', '-'],
+];
+
+/* 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', 'domain', 'domain', 'continue', 'continue'],
+];
+
+export const spanish = {
+    keyText: 'Abc',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};

package/packages/keyboard/src/WhitelabelKeyboard/layouts/special.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'] : ['', '']),
+        ...layout[4], 'space', 'space', 'space', 'space', 'space', 'space', ...layout[5], 'continue', 'continue',
+    ],
+];
+
+export const special = {
+    keyText: '+/#',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};

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

@@ -0,0 +1,26 @@
+/* eslint-disable no-magic-numbers */
+import { KeyMatrixCell } from '../../types';
+
+const keyboardLayout = [
+    ['༡', '༢', '༣', '༤', '༥', '༦', '༧', '༨', '༩', '༠'],
+    ['ཀ', 'ཁ', 'ག ', 'ང ', 'ཅ ', 'ཆ', 'ཇ', 'ཉ', 'ཏ', 'ཐ'],
+    ['ད', 'ན', 'པ', 'ཕ', 'བ', 'མ', 'ཙ', 'ཚ', 'ཛ', 'ཝ'],
+    ['ཝ', 'ཟ', 'འ', 'ཡ', 'ར', 'ལ', 'ཤ', 'ས', 'ཧ', 'ཨ'],
+];
+
+/* 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', 'domain', 'domain', 'continue', 'continue'],
+];
+
+export const tibetan = {
+    keyText: 'ཀཁག',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};

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

@@ -0,0 +1,26 @@
+/* eslint-disable no-magic-numbers */
+import { KeyMatrixCell } from '../../types';
+
+const keyboardLayout = [
+    ['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'],
+    ['r', 's', 'ş', 't', 'u', 'ü', 'v', 'y', 'z', '.'],
+];
+
+/* 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', 'domain', 'domain', 'continue', 'continue'],
+];
+
+export const turkish = {
+    keyText: 'Abc',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};

package/packages/keyboard/src/WhitelabelKeyboard/layouts/ukrainian.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 ukrainian = {
+    className: 'wide',
+    keyText: 'абв',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};

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

@@ -0,0 +1,26 @@
+/* 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', 'domain', 'domain', 'continue', 'continue'],
+];
+
+export const urdu = {
+    keyText: 'دوبارہ سے',
+    layout: keyboardLayout,
+    makeFocusStrings,
+};

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

@@ -1,8 +1,28 @@
+import { KeyMatrixCell } from '../types';
+import { BaseProps } from '../KeyboardBase';
+
+export type Layouts = 'normal' | 'special';
+
 export type KeyTexts = {
-    toNormalLayout: string | JSX.Element,
-    toSpecialLayout: string | JSX.Element,
+    toNormalLayout: string,
+    toSpecialLayout: string,
     space: string | JSX.Element,
     domain: string | JSX.Element,
     clear: string | JSX.Element,
     continue: string | JSX.Element,
 };
+
+export type LanguageLayout = {
+    className? : string,
+    keyText: KeyTexts['toNormalLayout'],
+    layout: KeyMatrixCell[][],
+    makeFocusStrings: (layout: KeyMatrixCell[][], hasLanguageLayout: boolean) => KeyMatrixCell[][],
+};
+
+export type Props = BaseProps<Layouts> & {
+    texts?: Partial<KeyTexts>;
+    makeFocusStrings?: Record<Layouts, (
+        layout: KeyMatrixCell[][], hasLanguageLayout: boolean,
+    ) => KeyMatrixCell[][]>,
+    languageLayout?: LanguageLayout,
+};

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

@@ -8,4 +8,4 @@ export type KeyTexts = {
     toNormalLayout: string;
 };
 
-export type KeyMatrixCell = string | null;
+export type KeyMatrixCell = string;

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

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

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

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

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

@@ -0,0 +1,10 @@
+// On some platforms, selectionStart/selectionEnd may change focus.
+// This function ensures that the focus state remains the same.
+export const setInputSelectionRange = (input: HTMLInputElement, position: number) => {
+    const { activeElement } = document;
+    const wasFocused = activeElement === input;
+    if (!wasFocused) input.focus();
+    input.selectionStart = position;
+    input.selectionEnd = position;
+    if (!wasFocused) (activeElement as HTMLElement).focus();
+};

package/packages/l10n/README.md

@@ -76,6 +76,24 @@ 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.getHours().toString();
+export const h24 = (date: Date) => date.getUTCHours().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.getHours() % NOON;
+    const h = date.getUTCHours() % 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.getMinutes().toString();
+export const m = (date: Date) => date.getUTCMinutes().toString();
 
 export const mm = (date: Date) => {
     const min = m(date);
     return min.length === 1 ? `0${min}` : min;
 };
 
-export const s = (date: Date) => date.getSeconds().toString();
+export const s = (date: Date) => date.getUTCSeconds().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.getHours() < NOON ? 'AM' : 'PM'
+    date.getUTCHours() < 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.getFullYear().toString();
+    const fullYear = date.getUTCFullYear().toString();
     dateStringParts.push(
         year === '2-digit'
             ? fullYear.substring(fullYear.length - SECOND_FROM_END)
@@ -151,3 +151,15 @@ 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 { collonSeparatedHour24MinuteSecond, dateFormatter, processYear } from './common';
+import { dateFormatter, processYear, toNumericLocaleTimeString } from './common';
 import type { DateTimeFormatOptions, Weekday, Day, Month, Year } from './types';
 
 const WEEKDAYS = {
@@ -86,10 +86,4 @@ const toLocaleDateString = (date: Date) => (
     return dateStringParts.join(' ');
 };
 
-const toLocaleTimeString = (date: Date) => (
-    options: DateTimeFormatOptions = {
-        hour: 'numeric', minute: '2-digit', second: '2-digit',
-    },
-) => collonSeparatedHour24MinuteSecond(date, options);
-
-export const csDateFormatter = dateFormatter(toLocaleTimeString, toLocaleDateString, ' ');
+export const csDateFormatter = dateFormatter(toNumericLocaleTimeString, toLocaleDateString, ' ');