@24i/bigscreen-sdk 1.0.6-alpha.2139 → 1.0.6-alpha.2147

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.6-alpha.2139",
+    "version": "1.0.6-alpha.2147",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {

package/packages/developer-tools/src/TechnicalInfo/TechnicalInfoProvider.ts

@@ -35,6 +35,8 @@ type Props = {
     profileName: string,
     /** Version of application. */
     appVersion: string,
+    /** Version of the currently used core packages. */
+    appCoreVersions: string,
     /** App resolution, in format like "1280x720". */
     appResolution: string,
     /** OVP/CMS back-end base URL. */
@@ -263,6 +265,11 @@ class TechnicalInfoProvider implements ITechnicalInfoProvider {
         return this.props.backendBaseUrl || unknown;
     }
 
+    async getAppCoreVersions() {
+        const { unknown } = this.translations;
+        return this.props.appCoreVersions || unknown;
+    }
+
     getSourceDataLayout() {
         const {
             username, profile, appVersion, firmwareVersion, deviceModel,
@@ -270,11 +277,13 @@ class TechnicalInfoProvider implements ITechnicalInfoProvider {
             publicIpAddress, connectionType, macAddress, memoryHeapSize,
             usedLocalStorage, timeZone, dateAndTime, flavour, userAgent,
             emeSupport, emeDrmSystems, mseSupport, fourKSupport, resolution, baseUrl,
+            appCoreVersions,
         } = this.translations;
         const dataLayout: SourceDataLayout = [
             { label: username, getter: this.getUserName },
             { label: profile, getter: this.getProfileName },
             { label: appVersion, getter: this.getAppVersion },
+            { label: appCoreVersions, getter: this.getAppCoreVersions },
             { label: firmwareVersion, getter: this.getFirmwareVersion },
             { label: deviceModel, getter: this.getDeviceModelName },
             { label: deviceManufacturer, getter: this.getDeviceManufacturer },

package/packages/developer-tools/src/TechnicalInfo/translations.ts

@@ -10,6 +10,7 @@ export type TranslationKeys = {
     username: string,
     profile: string,
     appVersion: string,
+    appCoreVersions: string,
     firmwareVersion: string,
     deviceModel: string,
     deviceManufacturer: string,
@@ -47,6 +48,7 @@ export const defaultTranslations = {
     username: 'Username',
     profile: 'Profile',
     appVersion: 'App version',
+    appCoreVersions: 'Core versions',
     firmwareVersion: 'Firmware version',
     deviceModel: 'Device model',
     deviceManufacturer: 'Device manufacturer',

package/packages/focus/README.md

@@ -128,6 +128,16 @@ const matrix = [
 ];
 ```
 
+## Prevent blur on long press
+When the user holds a navigation key, he usually scrolls to the boundary of the layout
+and then releases the key. This operation is very quick and most of the time he releases
+the key too late, so the keydown event from the layout will propagate to another component
+or another layout. In some cases, we don't want this behavior and for those situations and
+to have better control above the layout navigation, there is a prop `preventBlurOnLongPress`.
+When the user scrolls to the boundary of the layout while holding a navigation key,
+he needs to release the key and press it again to propagate the event higher and focus
+another component or layout.
+
 ## Limitations
 For the div to properly receive keydown events it needs to have set `tabIndex`. If you do not set `tabIndex` then it won't receive keydown events and those will not propagate to the Vertical/Horizontal component.
 

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

@@ -1,14 +1,21 @@
 import { Component, DeclareProps, Reference } from '@24i/bigscreen-sdk/jsx';
 import { noop } from '@24i/bigscreen-sdk/utils/noop';
+import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
 import { IFocusable } from '../IFocusable';
 import { Errors, hasValidDomRef } from './constants';
 import { SharedProps } from './types';
 
+const PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS = 2;
+
 export type Props = SharedProps & {
     focusOptions?: FocusOptions;
     focusableChildren: Array<Reference>,
     onFocusChanged?: (focused: Reference, index: number) => any,
     onBeforeFocusChange?: (focused: Reference, index: number) => any,
+    preventBlurOnLongPress?: {
+        forward?: boolean,
+        backward?: boolean,
+    }
 };
 
 export interface ILayout {
@@ -25,12 +32,15 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
     class Layout extends Component<Props> implements ILayout, IFocusable {
         index = 0;
 
+        preventBlurCounter = 0;
+
         static defaultProps = {
             onFocusChanged: noop,
             onBeforeFocusChange: noop,
             focusOptions: { preventScroll: true },
             dir: 'auto',
-        };
+            preventBlurOnLongPress: {},
+        } as const;
 
         declare props: DeclareProps<Props, typeof Layout.defaultProps>;
 
@@ -40,6 +50,7 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
                 throw new Error(Errors.DOM_REF_ERROR);
             }
             domRef.current!.addEventListener('keydown', this.onKeyDown, false);
+            domRef.current!.addEventListener('keyup', this.onKeyUp, false);
         }
 
         componentWillUnmount() {
@@ -48,12 +59,17 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
                 throw new Error(Errors.DOM_REF_ERROR);
             }
             domRef.current!.removeEventListener('keydown', this.onKeyDown, false);
+            domRef.current!.removeEventListener('keyup', this.onKeyUp, false);
         }
 
         onKeyDown = (e: KeyboardEvent) => {
             onKeyDown(e, this);
         };
 
+        onKeyUp = () => {
+            this.preventBlurCounter = 0;
+        };
+
         getFromIndex(target: HTMLElement) {
             const { focusableChildren } = this.props;
             if (
@@ -78,25 +94,34 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
         }
 
         backward(e: KeyboardEvent) {
+            const { preventBlurOnLongPress } = this.props;
             const { target } = e;
             const fromIndex = this.getFromIndex(target as HTMLElement);
+            if (preventBlurOnLongPress.backward) {
+                this.preventBlurCounter += 1;
+            }
             if (fromIndex > 0) {
                 this.setIndex(fromIndex - 1);
                 this.focusCurrentIndex();
-                e.preventDefault();
-                e.stopPropagation();
+                stopEvent(e);
+            } else if (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS) {
+                stopEvent(e);
             }
         }
 
         forward(e: KeyboardEvent) {
-            const { focusableChildren } = this.props;
+            const { focusableChildren, preventBlurOnLongPress } = this.props;
             const { target } = e;
             const fromIndex = this.getFromIndex(target as HTMLElement);
+            if (preventBlurOnLongPress.forward) {
+                this.preventBlurCounter += 1;
+            }
             if (fromIndex < focusableChildren.length - 1) {
                 this.setIndex(fromIndex + 1);
                 this.focusCurrentIndex();
-                e.preventDefault();
-                e.stopPropagation();
+                stopEvent(e);
+            } else if (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS) {
+                stopEvent(e);
             }
         }
 

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

@@ -8,6 +8,8 @@ import { isRtl } from './isRtl';
 import { Errors, hasValidDomRef } from './constants';
 import { SharedProps } from './types';
 
+const PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS = 2;
+
 // Used in binary operations for shorter checks
 export enum CircularDirection {
     NONE = 0,
@@ -21,7 +23,13 @@ export type Props = SharedProps & {
     matrix: Array<Array<Reference>>,
     onFocusChanged?: (focused: Reference, index: Index2D) => any,
     onBeforeFocusChange?: (focused: Reference, index: Index2D) => any,
-    circular?: CircularDirection;
+    circular?: CircularDirection,
+    preventBlurOnLongPress?: {
+        left?: boolean,
+        right?: boolean,
+        up?: boolean,
+        down?: boolean,
+    },
 };
 
 export type Index2D = {
@@ -32,11 +40,14 @@ export type Index2D = {
 export class Matrix extends Component<Props> implements IFocusable {
     index: Index2D = { x: 0, y: 0 };
 
+    preventBlurCounter = 0;
+
     static defaultProps = {
         onFocusChanged: noop,
         onBeforeFocusChange: noop,
         circular: CircularDirection.NONE,
         dir: 'auto',
+        preventBlurOnLongPress: {},
     } as const;
 
     declare props: DeclareProps<Props, typeof Matrix.defaultProps>;
@@ -47,6 +58,7 @@ export class Matrix extends Component<Props> implements IFocusable {
             throw new Error(Errors.DOM_REF_ERROR);
         }
         domRef.current!.addEventListener('keydown', this.onKeyDown, false);
+        domRef.current!.addEventListener('keyup', this.onKeyUp, false);
     }
 
     componentWillUnmount() {
@@ -55,26 +67,46 @@ export class Matrix extends Component<Props> implements IFocusable {
             throw new Error(Errors.DOM_REF_ERROR);
         }
         domRef.current!.removeEventListener('keydown', this.onKeyDown, false);
+        domRef.current!.removeEventListener('keyup', this.onKeyUp, false);
     }
 
     onKeyDown = (e: KeyboardEvent) => {
+        const { preventBlurOnLongPress } = this.props;
         let newIndex: Index2D | null = null;
         if (this.isDirectionLeft(e)) {
             newIndex = this.moveHorizontaly('left');
+            if (preventBlurOnLongPress.left) {
+                this.preventBlurCounter += 1;
+            }
         } else if (this.isDirectionRight(e)) {
             newIndex = this.moveHorizontaly('right');
+            if (preventBlurOnLongPress.right) {
+                this.preventBlurCounter += 1;
+            }
         } else if (device.isDirectionUp(e)) {
             newIndex = this.moveVerticaly('up');
+            if (preventBlurOnLongPress.up) {
+                this.preventBlurCounter += 1;
+            }
         } else if (device.isDirectionDown(e)) {
             newIndex = this.moveVerticaly('down');
+            if (preventBlurOnLongPress.down) {
+                this.preventBlurCounter += 1;
+            }
         }
         if (newIndex) {
             stopEvent(e);
             this.index = newIndex;
             this.focusCurrentIndex();
+        } else if (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS) {
+            stopEvent(e);
         }
     };
 
+    onKeyUp = () => {
+        this.preventBlurCounter = 0;
+    };
+
     getRefAt({ x, y }: Index2D): Reference {
         const { matrix } = this.props;
         if (matrix[y] && matrix[y][x]) return matrix[y][x];

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

@@ -1,12 +1,13 @@
+import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
 import { IFocusable } from '../../IFocusable';
 import { getLayoutBase } from '../Base';
 import { rootRef, refChildA, refChildB, refChildC, refChildD } from './shared';
 
+jest.mock('@24i/bigscreen-sdk/utils/stopEvent');
+
 const mockKeydown = jest.fn();
 const mockEvent: any = {
     target: null,
-    preventDefault: jest.fn(),
-    stopPropagation: jest.fn(),
 };
 
 const Base = getLayoutBase(mockKeydown);
@@ -15,18 +16,14 @@ describe('Focus Layout Base', () => {
     let base: any;
     beforeEach(() => {
         base = new Base({
+            ...Base.defaultProps,
             domRef: rootRef,
             children: 'children',
             focusableChildren: [refChildA, refChildB, refChildC],
             onFocusChanged: jest.fn(),
             onBeforeFocusChange: jest.fn(),
         });
-        mockKeydown.mockClear();
-        refChildA.current!.focus.mockClear();
-        refChildB.current!.focus.mockClear();
-        refChildC.current!.focus.mockClear();
-        mockEvent.preventDefault.mockClear();
-        mockEvent.stopPropagation.mockClear();
+        jest.clearAllMocks();
     });
 
     it('should throw without domRef on componentDidMount', () => {
@@ -108,30 +105,43 @@ describe('Focus Layout Base', () => {
         expect(refChildA.current!.focus).not.toHaveBeenCalled();
     });
 
-    it('should call preventDefault and stopPropagation when going forward', () => {
+    it('should call stopEvent when going forward', () => {
         base.forward(mockEvent);
-        expect(mockEvent.preventDefault).toHaveBeenCalled();
-        expect(mockEvent.stopPropagation).toHaveBeenCalled();
+        expect(stopEvent).toHaveBeenCalledTimes(1);
     });
 
-    it('should call preventDefault and stopPropagation when going backward', () => {
+    it('should call stopEvent when going backward', () => {
         base.index = 1;
         base.backward(mockEvent);
-        expect(mockEvent.preventDefault).toHaveBeenCalled();
-        expect(mockEvent.stopPropagation).toHaveBeenCalled();
+        expect(stopEvent).toHaveBeenCalledTimes(1);
     });
 
-    it('should not call preventDefault and stopPropagation when can\'t go forward', () => {
+    it('should not call stopEvent when can\'t go forward', () => {
         base.index = 2;
         base.forward(mockEvent);
-        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
-        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
+        expect(stopEvent).not.toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call stopEvent when can\'t go backward', () => {
+        base.backward(mockEvent);
+        expect(stopEvent).not.toHaveBeenCalledTimes(1);
+    });
+
+    it('should call stopEvent when going forward and preventBlurOnLongPress is on', () => {
+        base.props.preventBlurOnLongPress.forward = true;
+        base.forward(mockEvent);
+        base.forward(mockEvent);
+        base.forward(mockEvent);
+        expect(stopEvent).toHaveBeenCalledTimes(3);
     });
 
-    it('should not call preventDefault and stopPropagation when can\'t go backward', () => {
+    it('should call stopEvent when going backward and preventBlurOnLongPress is on', () => {
+        base.index = 2;
+        base.props.preventBlurOnLongPress.backward = true;
+        base.backward(mockEvent);
+        base.backward(mockEvent);
         base.backward(mockEvent);
-        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
-        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
+        expect(stopEvent).toHaveBeenCalledTimes(3);
     });
 
     it('should call onFocusChanged when focusing current index', () => {
@@ -163,6 +173,7 @@ describe('Focus Layout Base', () => {
 
     it('should take result of hasDom into account of determining current focus position', () => {
         base = new Base({
+            ...Base.defaultProps,
             domRef: rootRef,
             children: 'children',
             focusableChildren: [refChildA, refChildB, refChildC, refChildD],

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

@@ -10,8 +10,6 @@ const isRtlMock = isRtl as jest.MockedFn<typeof isRtl>;
 
 const mockEvent = {
     target: false,
-    preventDefault: jest.fn(),
-    stopPropagation: jest.fn(),
 };
 const mockLEFTEvent = {
     code: 'ArrowLeft',

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

@@ -1,11 +1,12 @@
 import { createRef } from '@24i/bigscreen-sdk/jsx';
+import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
 import { LEFT, RIGHT, UP, DOWN, Key } from '@24i/bigscreen-sdk/device/keymap';
 import { Matrix, CircularDirection } from '../Matrix';
 
+jest.mock('@24i/bigscreen-sdk/utils/stopEvent');
+
 const simulateKey = (key: Key): KeyboardEvent => ({
     code: key.code,
-    preventDefault: jest.fn(),
-    stopPropagation: jest.fn(),
 } as unknown as KeyboardEvent);
 
 const getFocusable = () => ({
@@ -35,6 +36,7 @@ describe('Matrix focus', () => {
 
     beforeEach(() => {
         matrix = new Matrix({ ...Matrix.defaultProps, matrix: MATRIX, domRef, children: [] });
+        jest.clearAllMocks();
     });
 
     it('should have default index at 0, 0', () => {
@@ -46,8 +48,7 @@ describe('Matrix focus', () => {
         const event = simulateKey(RIGHT);
         matrix.onKeyDown(event);
         expect(B1.current!.focus).toHaveBeenCalled();
-        expect(event.preventDefault).toHaveBeenCalled();
-        expect(event.stopPropagation).toHaveBeenCalled();
+        expect(stopEvent).toHaveBeenCalledTimes(1);
         B1.current!.focus.mockClear();
     });
 
@@ -56,8 +57,7 @@ describe('Matrix focus', () => {
         const event = simulateKey(DOWN);
         matrix.onKeyDown(event);
         expect(A2.current!.focus).toHaveBeenCalled();
-        expect(event.preventDefault).toHaveBeenCalled();
-        expect(event.stopPropagation).toHaveBeenCalled();
+        expect(stopEvent).toHaveBeenCalledTimes(1);
         A2.current!.focus.mockClear();
     });
 
@@ -66,8 +66,7 @@ describe('Matrix focus', () => {
         const event = simulateKey(LEFT);
         matrix.onKeyDown(event);
         expect(C3.current!.focus).toHaveBeenCalled();
-        expect(event.preventDefault).toHaveBeenCalled();
-        expect(event.stopPropagation).toHaveBeenCalled();
+        expect(stopEvent).toHaveBeenCalledTimes(1);
         C3.current!.focus.mockClear();
     });
 
@@ -76,8 +75,7 @@ describe('Matrix focus', () => {
         const event = simulateKey(UP);
         matrix.onKeyDown(event);
         expect(C2.current!.focus).toHaveBeenCalled();
-        expect(event.preventDefault).toHaveBeenCalled();
-        expect(event.stopPropagation).toHaveBeenCalled();
+        expect(stopEvent).toHaveBeenCalledTimes(1);
         C2.current!.focus.mockClear();
     });
 
@@ -86,8 +84,7 @@ describe('Matrix focus', () => {
         const event = simulateKey(LEFT);
         matrix.onKeyDown(event);
         expect(matrix.index).toStrictEqual({ x: 0, y: 0 });
-        expect(event.preventDefault).not.toHaveBeenCalled();
-        expect(event.stopPropagation).not.toHaveBeenCalled();
+        expect(stopEvent).not.toHaveBeenCalledTimes(1);
     });
 
     it('should not leave top boundary', () => {
@@ -95,8 +92,7 @@ describe('Matrix focus', () => {
         const event = simulateKey(UP);
         matrix.onKeyDown(event);
         expect(matrix.index).toStrictEqual({ x: 1, y: 2 });
-        expect(event.preventDefault).not.toHaveBeenCalled();
-        expect(event.stopPropagation).not.toHaveBeenCalled();
+        expect(stopEvent).not.toHaveBeenCalledTimes(1);
     });
 
     it('should not leave right boundary', () => {
@@ -104,8 +100,7 @@ describe('Matrix focus', () => {
         const event = simulateKey(RIGHT);
         matrix.onKeyDown(event);
         expect(matrix.index).toStrictEqual({ x: 2, y: 1 });
-        expect(event.preventDefault).not.toHaveBeenCalled();
-        expect(event.stopPropagation).not.toHaveBeenCalled();
+        expect(stopEvent).not.toHaveBeenCalledTimes(1);
     });
 
     it('should not leave bottom boundary', () => {
@@ -113,8 +108,51 @@ describe('Matrix focus', () => {
         const event = simulateKey(DOWN);
         matrix.onKeyDown(event);
         expect(matrix.index).toStrictEqual({ x: 3, y: 2 });
-        expect(event.preventDefault).not.toHaveBeenCalled();
-        expect(event.stopPropagation).not.toHaveBeenCalled();
+        expect(stopEvent).not.toHaveBeenCalledTimes(1);
+    });
+
+    it('should call stopEvent when on left and preventBlurOnLongPress is on', () => {
+        matrix.props.preventBlurOnLongPress.left = true;
+        matrix.index = { x: 1, y: 0 };
+        const event = simulateKey(LEFT);
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        expect(matrix.index).toStrictEqual({ x: 0, y: 0 });
+        expect(stopEvent).toHaveBeenCalledTimes(3);
+    });
+
+    it('should call stopEvent when on up and preventBlurOnLongPress is on', () => {
+        matrix.props.preventBlurOnLongPress.up = true;
+        matrix.index = { x: 0, y: 1 };
+        const event = simulateKey(UP);
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        expect(matrix.index).toStrictEqual({ x: 0, y: 0 });
+        expect(stopEvent).toHaveBeenCalledTimes(3);
+    });
+
+    it('should call stopEvent when on right and preventBlurOnLongPress is on', () => {
+        matrix.props.preventBlurOnLongPress.right = true;
+        matrix.index = { x: 2, y: 0 };
+        const event = simulateKey(RIGHT);
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        expect(matrix.index).toStrictEqual({ x: 3, y: 0 });
+        expect(stopEvent).toHaveBeenCalledTimes(3);
+    });
+
+    it('should call stopEvent when on down and preventBlurOnLongPress is on', () => {
+        matrix.props.preventBlurOnLongPress.down = true;
+        matrix.index = { x: 0, y: 1 };
+        const event = simulateKey(DOWN);
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        expect(matrix.index).toStrictEqual({ x: 0, y: 2 });
+        expect(stopEvent).toHaveBeenCalledTimes(3);
     });
 
     it('should keep row (Ax -> RIGHT -> B1 -> RIGHT -> Cx)', () => {

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

@@ -3,8 +3,6 @@ import { rootRef, refChildA, refChildB, refChildC } from './shared';
 
 const mockEvent = {
     target: false,
-    preventDefault: jest.fn(),
-    stopPropagation: jest.fn(),
 };
 const mockUPEvent = {
     code: 'ArrowUp',

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

@@ -0,0 +1,101 @@
+import { processYear, dateFormatter, toNumericLocaleTimeString } from './common';
+import { DateTimeFormatOptions, Day, Month, Weekday } from './types';
+
+const HE_MONTHS = {
+    narrow: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    short: [
+        'ינו׳',
+        'פבר׳',
+        'מרץ',
+        'אפר׳',
+        'מאי',
+        'יוני',
+        'יולי',
+        'אוג׳',
+        'ספט׳',
+        'אוק׳',
+        'נוב׳',
+        'דצמ׳',
+    ],
+    long: [
+        'ינואר',
+        'פברואר',
+        'מרץ',
+        'אפריל',
+        'מאי',
+        'יוני',
+        'יולי',
+        'אוגוסט',
+        'ספטמבר',
+        'אוקטובר',
+        'נובמבר',
+        'דצמבר',
+    ],
+};
+
+const HE_WEEKDAYS = {
+    narrow: ['א׳', 'ב׳', 'ג׳', 'ד׳', 'ה׳', 'ו׳', 'ש׳'],
+    short: ['יום א׳', 'יום ב׳', 'יום ג׳', 'יום ד׳', 'יום ה׳', 'יום ו׳', 'שבת'],
+    long: ['יום ראשון', 'יום שני', 'יום שלישי', 'יום רביעי', 'יום חמישי', 'יום שישי', 'יום שבת'],
+};
+
+const processWeekday = (
+    dateStringParts: string[],
+    weekday: Weekday | undefined,
+    date: Date,
+) => {
+    if (typeof weekday === 'undefined') return;
+    const weekdayString = HE_WEEKDAYS[weekday][date.getDay()];
+    dateStringParts.push(`${weekdayString},`);
+};
+
+const processDay = (dateParts: string[], day: Day | undefined, date: Date) => {
+    if (typeof day === 'undefined') return;
+    const strDate = date.getDate().toString();
+    dateParts.push(strDate);
+};
+
+const processMonth = (
+    dateParts: string[],
+    day:Day | undefined,
+    month: Month | undefined,
+    date: Date,
+) => {
+    if (typeof month === 'undefined') return;
+    if (month === '2-digit' || month === 'numeric') {
+        const strMonth = (date.getMonth() + 1).toString();
+        dateParts.push(strMonth);
+        return;
+    }
+    const finalMonth = HE_MONTHS[month][date.getMonth()];
+    if (day != null) {
+        dateParts.push(`ב${finalMonth}`);
+        return;
+    }
+    dateParts.push(finalMonth);
+};
+
+const toLocaleDateString = (date: Date) => (
+    { weekday, year, month, day }: DateTimeFormatOptions = {
+        year: 'numeric', month: '2-digit', day: '2-digit',
+    },
+) => {
+    const dateStringParts: string[] = [];
+    processWeekday(dateStringParts,  weekday, date);
+    const dateConnection = month === 'numeric' || month === '2-digit' ?  '.' : '';
+    const dateParts: string[] = [];
+    processDay(dateParts, day, date);
+    if ((month === 'narrow' ||
+        month === 'short' ||
+        month === 'long') &&
+        day != null
+    ) {
+        dateParts.push(' ');
+    }
+    processMonth(dateParts, day, month, date);
+    if (month === 'long') dateParts.push(' ');
+    processYear(dateParts, year, date);
+    dateStringParts.push(dateParts.join(dateConnection));
+    return dateStringParts.join(' ');
+};
+export const heDateFormatter = dateFormatter(toNumericLocaleTimeString, toLocaleDateString);

package/packages/l10n/src/l10n.ts

@@ -3,6 +3,7 @@ import { csDateFormatter } from './date/cs';
 import { deDateFormatter } from './date/de';
 import { esDateFormatter } from './date/es';
 import { frDateFormatter } from './date/fr';
+import { heDateFormatter } from './date/he';
 import { isoDateFormatter } from './date/iso';
 import { Formatters } from './types';
 
@@ -27,6 +28,7 @@ class L10n implements IEvents<Events> {
             fr: frDateFormatter,
             es: esDateFormatter,
             de: deDateFormatter,
+            he: heDateFormatter,
         },
     };