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

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

@@ -0,0 +1,261 @@
+import { createRef } from '@24i/bigscreen-sdk/jsx';
+import { LEFT, RIGHT, UP, DOWN, Key } from '@24i/bigscreen-sdk/device/keymap';
+import { Matrix, CircularDirection } from '../Matrix';
+
+const simulateKey = (key: Key): KeyboardEvent => ({
+    code: key.code,
+    preventDefault: jest.fn(),
+    stopPropagation: jest.fn(),
+} as unknown as KeyboardEvent);
+
+const getFocusable = () => ({
+    focus: jest.fn(),
+});
+
+const domRef = createRef(document.createElement('div'));
+
+const A1 = createRef(getFocusable());
+const A2 = createRef(getFocusable());
+const A3 = createRef(getFocusable());
+const B1 = createRef(getFocusable());
+const C1 = createRef(getFocusable());
+const C2 = createRef(getFocusable());
+const C3 = createRef(getFocusable());
+const D1 = createRef(getFocusable());
+const D2 = createRef(getFocusable());
+
+const MATRIX = [
+    [A1, B1, C1, D1],
+    [A2, B1, C2, C2],
+    [A3, B1, C3, D2],
+];
+
+describe('Matrix focus', () => {
+    let matrix: Matrix;
+
+    beforeEach(() => {
+        matrix = new Matrix({ ...Matrix.defaultProps, matrix: MATRIX, domRef, children: [] });
+    });
+
+    it('should have default index at 0, 0', () => {
+        expect(matrix.index).toStrictEqual({ x: 0, y: 0 });
+    });
+
+    it('should go A1 -> RIGHT -> B1', () => {
+        matrix.index = { x: 0, y: 0 };
+        const event = simulateKey(RIGHT);
+        matrix.onKeyDown(event);
+        expect(B1.current!.focus).toHaveBeenCalled();
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(event.stopPropagation).toHaveBeenCalled();
+        B1.current!.focus.mockClear();
+    });
+
+    it('should go A1 -> DOWN -> A2', () => {
+        matrix.index = { x: 0, y: 0 };
+        const event = simulateKey(DOWN);
+        matrix.onKeyDown(event);
+        expect(A2.current!.focus).toHaveBeenCalled();
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(event.stopPropagation).toHaveBeenCalled();
+        A2.current!.focus.mockClear();
+    });
+
+    it('should go D2 -> LEFT -> C3', () => {
+        matrix.index = { x: 3, y: 2 };
+        const event = simulateKey(LEFT);
+        matrix.onKeyDown(event);
+        expect(C3.current!.focus).toHaveBeenCalled();
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(event.stopPropagation).toHaveBeenCalled();
+        C3.current!.focus.mockClear();
+    });
+
+    it('should go D2 -> UP -> C2', () => {
+        matrix.index = { x: 3, y: 2 };
+        const event = simulateKey(UP);
+        matrix.onKeyDown(event);
+        expect(C2.current!.focus).toHaveBeenCalled();
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(event.stopPropagation).toHaveBeenCalled();
+        C2.current!.focus.mockClear();
+    });
+
+    it('should not leave left boundary', () => {
+        matrix.index = { x: 0, y: 0 };
+        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();
+    });
+
+    it('should not leave top boundary', () => {
+        matrix.index = { x: 1, y: 2 };
+        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();
+    });
+
+    it('should not leave right boundary', () => {
+        matrix.index = { x: 2, y: 1 };
+        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();
+    });
+
+    it('should not leave bottom boundary', () => {
+        matrix.index = { x: 3, y: 2 };
+        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();
+    });
+
+    it('should keep row (Ax -> RIGHT -> B1 -> RIGHT -> Cx)', () => {
+        const event = simulateKey(RIGHT);
+        matrix.index = { x: 0, y: 0 };
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        expect(C1.current!.focus).toHaveBeenCalled();
+        matrix.index = { x: 0, y: 1 };
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        expect(C2.current!.focus).toHaveBeenCalled();
+        matrix.index = { x: 0, y: 2 };
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        expect(C3.current!.focus).toHaveBeenCalled();
+        C1.current!.focus.mockClear();
+        C2.current!.focus.mockClear();
+        C3.current!.focus.mockClear();
+    });
+
+    it('should keep column (C3/D2 -> UP -> C2 -> UP -> C1/D1)', () => {
+        const event = simulateKey(UP);
+        matrix.index = { x: 2, y: 2 };
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        expect(C1.current!.focus).toHaveBeenCalled();
+        matrix.index = { x: 3, y: 2 };
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        expect(D1.current!.focus).toHaveBeenCalled();
+        C1.current!.focus.mockClear();
+        D1.current!.focus.mockClear();
+    });
+
+    it('should skip same and focus next (C2 -> LEFT -> C2 -> B1)', () => {
+        matrix.index = { x: 3, y: 1 };
+        matrix.onKeyDown(simulateKey(LEFT));
+        expect(B1.current!.focus).toHaveBeenCalled();
+        B1.current!.focus.mockClear();
+    });
+
+    describe('circular focus', () => {
+        const commonProps = {
+            ...Matrix.defaultProps,
+            matrix: MATRIX,
+            domRef,
+            children: null as any,
+        };
+        it('should circle to the left (A1 -> left -> D1)', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.HORIZONTAL });
+            matrix.index = { x: 0, y: 0 };
+            const event = simulateKey(LEFT);
+            matrix.onKeyDown(event);
+            expect(D1.current!.focus).toHaveBeenCalled();
+            expect(matrix.index).toEqual({ x: 3, y: 0 });
+            D1.current!.focus.mockClear();
+        });
+
+        it('should circle to the right (A1 -> right -> D1)', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.HORIZONTAL });
+            matrix.index = { x: 3, y: 0 };
+            const event = simulateKey(RIGHT);
+            matrix.onKeyDown(event);
+            expect(A1.current!.focus).toHaveBeenCalled();
+            expect(matrix.index).toEqual({ x: 0, y: 0 });
+            A1.current!.focus.mockClear();
+        });
+
+        it('should circle to upwards (A1 -> up -> A3)', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.VERTICAL });
+            matrix.index = { x: 0, y: 0 };
+            const event = simulateKey(UP);
+            matrix.onKeyDown(event);
+            expect(A3.current!.focus).toHaveBeenCalled();
+            expect(matrix.index).toEqual({ x: 0, y: 2 });
+            A3.current!.focus.mockClear();
+        });
+
+        it('should circle to downwards (A3 -> down -> A1)', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.VERTICAL });
+            matrix.index = { x: 0, y: 2 };
+            const event = simulateKey(DOWN);
+            matrix.onKeyDown(event);
+            expect(A1.current!.focus).toHaveBeenCalled();
+            expect(matrix.index).toEqual({ x: 0, y: 0 });
+            A1.current!.focus.mockClear();
+        });
+
+        it('should circle horizontally and vertically (A3 -> down -> A1 -> left -> D1)', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.ALL });
+            matrix.index = { x: 0, y: 2 };
+            let event = simulateKey(DOWN);
+            matrix.onKeyDown(event);
+            expect(matrix.index).toEqual({ x: 0, y: 0 });
+
+            event = simulateKey(LEFT);
+            matrix.onKeyDown(event);
+            expect(matrix.index).toEqual({ x: 3, y: 0 });
+            A1.current!.focus.mockClear();
+            D1.current!.focus.mockClear();
+        });
+
+        it('given vertical should not circle to horizontally (A1 -> left -> A1)', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.VERTICAL });
+            matrix.index = { x: 0, y: 0 };
+            const event = simulateKey(LEFT);
+            matrix.onKeyDown(event);
+            expect(matrix.index).toEqual({ x: 0, y: 0 });
+        });
+
+        it('given horizontal should not circle to vertically (A1 -> up -> A1)', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.HORIZONTAL });
+            matrix.index = { x: 0, y: 0 };
+            const event = simulateKey(UP);
+            matrix.onKeyDown(event);
+            expect(matrix.index).toEqual({ x: 0, y: 0 });
+        });
+
+        it('given 1 vertical key should not loop infinitely', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.VERTICAL });
+            matrix.index = { x: 1, y: 0 };
+            const event = simulateKey(UP);
+            matrix.onKeyDown(event);
+            expect(matrix.index).toEqual({ x: 1, y: 0 });
+        });
+
+        it('given 1 horizontal key should not loop infinitely', () => {
+            const keyMatrix = [
+                [A1, B1, C1, D1],
+                [C2, C2, C2, C2],
+            ];
+            matrix = new Matrix({
+                ...commonProps,
+                matrix: keyMatrix,
+                circular: CircularDirection.VERTICAL,
+            });
+            matrix.index = { x: 0, y: 1 };
+            const event = simulateKey(LEFT);
+            matrix.onKeyDown(event);
+            expect(matrix.index).toEqual({ x: 0, y: 1 });
+        });
+    });
+});

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

@@ -0,0 +1,46 @@
+import { Vertical } from '../Vertical';
+import { rootRef, refChildA, refChildB, refChildC } from './shared';
+
+const mockEvent = {
+    target: false,
+    preventDefault: jest.fn(),
+    stopPropagation: jest.fn(),
+};
+const mockUPEvent = {
+    code: 'ArrowUp',
+    ...mockEvent,
+};
+const mockDOWNEvent = {
+    code: 'ArrowDown',
+    ...mockEvent,
+};
+
+describe('Vertical Focus Layout', () => {
+    let vertical: any;
+    beforeEach(() => {
+        vertical = new Vertical({
+            domRef: rootRef,
+            children: 'children',
+            focusableChildren: [refChildA, refChildB, refChildC],
+            onFocusChanged: jest.fn(),
+            onBeforeFocusChange: jest.fn(),
+        });
+        vertical.forward = jest.fn();
+        vertical.backward = jest.fn();
+    });
+
+    it('should be a class component', () => {
+        expect(Vertical.isClass).toBe(true);
+    });
+
+    it('should call forward on DOWN', () => {
+        vertical.onKeyDown(mockDOWNEvent);
+        expect(vertical.forward).toHaveBeenCalled();
+    });
+
+    it('should call forward on UP', () => {
+        vertical.setIndex(1);
+        vertical.onKeyDown(mockUPEvent);
+        expect(vertical.backward).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,23 @@
+import * as i18n from '@24i/bigscreen-sdk/i18n';
+import { isRtl } from '../isRtl';
+import { SharedProps } from '../types';
+
+describe('isRtl', () => {
+    const mockIsRtl = jest.spyOn(i18n, 'isRtl');
+
+    it.each([
+        { focusDir: 'ltr', langDir: 'ltr', expectedIsRtl: false },
+        { focusDir: 'rtl', langDir: 'ltr', expectedIsRtl: true },
+        { focusDir: 'auto', langDir: 'ltr', expectedIsRtl: false },
+        { focusDir: undefined, langDir: 'ltr', expectedIsRtl: false },
+        { focusDir: 'ltr', langDir: 'rtl', expectedIsRtl: false },
+        { focusDir: 'rtl', langDir: 'rtl', expectedIsRtl: true },
+        { focusDir: 'auto', langDir: 'rtl', expectedIsRtl: true },
+        { focusDir: undefined, langDir: 'rtl', expectedIsRtl: true },
+    ])('should for $focusDir focus and $langDir language return $expectedIsRtl', ({
+        focusDir, langDir, expectedIsRtl,
+    }) => {
+        mockIsRtl.mockReturnValue(langDir === 'rtl');
+        expect(isRtl(focusDir as SharedProps['dir'])).toBe(expectedIsRtl);
+    });
+});

package/packages/focus/src/Layout/__test__/shared.ts

@@ -0,0 +1,19 @@
+import { createRef } from '@24i/bigscreen-sdk/jsx';
+import { IFocusable } from '../../IFocusable';
+
+class ChildMock {
+    focus = jest.fn();
+}
+
+const root = document.createElement('div');
+export const rootRef = createRef(root);
+
+const childA = new ChildMock();
+const childB = new ChildMock();
+const childC = new ChildMock();
+const childD = new ChildMock();
+(childD as IFocusable).hasDom = jest.fn().mockReturnValue(false);
+export const refChildA = createRef(childA);
+export const refChildB = createRef(childB);
+export const refChildC = createRef(childC);
+export const refChildD = createRef(childD);

package/packages/focus/src/focusFirstExisting.ts

@@ -1,12 +1,6 @@
-import { createRef, Reference } from '@24i/bigscreen-sdk/jsx';
+import { Reference } from '@24i/bigscreen-sdk/jsx';
 import { IFocusable } from './IFocusable';
 
-export const preventScrollOnFocus = (ref: Reference<IFocusable>) => (
-    createRef<IFocusable>({
-        focus: () => ref.current?.focus({ preventScroll: true }),
-    })
-);
-
 export const focusFirstExisting = (...toFocus: Reference<IFocusable>[]) => (
     () => {
         for (let i = 0; i < toFocus.length; i++) {

package/packages/focus/src/index.ts

@@ -11,6 +11,5 @@ export {
     setNextFocusCandidate,
     focusCandidate,
 } from './candidate';
-export { focusFirstExisting, preventScrollOnFocus } from './focusFirstExisting';
+export { focusFirstExisting } from './focusFirstExisting';
 export { refocusAfterHashChange } from './refocusAfterHashChange';
-export { hasFocus, isFocused } from './hasFocus';

package/packages/gallup/src/Gallup.ts

@@ -1,4 +1,4 @@
-import { PlayerBase } from '@24i/bigscreen-players-engine-base';
+import { PlayerBase } from '@24i/player-base';
 import './__external__/SpringStreams';
 
 const SECOND_IN_MS = 1000;
@@ -16,7 +16,7 @@ export class Gallup {
      */
     constructor(
         siteCode: string,
-        private readonly player: PlayerBase,
+        private readonly player: PlayerBase<any>,
         private readonly playerName: string,
     ) {
         this.sensors = new SpringStreams(siteCode);
@@ -67,7 +67,7 @@ export class Gallup {
             getPosition: () => Math.floor(player.currentTime / SECOND_IN_MS),
             getMeta: () => {
                 const { width, height } = window.screen;
-                const { playerVersion } = player.mediaInfo;
+                const { playerVersion } = player.getMediaInfo();
                 return {
                     pl: playerName,
                     plv: playerVersion || '',

package/packages/grid/src/Base/Base.tsx

@@ -111,13 +111,11 @@ export class GridBase<T extends Item<U>, U>
     componentDidMount() {
         this.scrollerDom.current!.addEventListener('wheel', this.onWheel);
         this.scroller.current!.wrapRef.current!.addEventListener('keyup', this.onKeyUp);
-        window.document.addEventListener('keyup', this.onGlobalKeyUp, true);
     }
 
     componentWillUnmount() {
         this.scrollerDom.current!.removeEventListener('wheel', this.onWheel);
         this.scroller.current!.wrapRef.current!.removeEventListener('keyup', this.onKeyUp);
-        window.document.removeEventListener('keyup', this.onGlobalKeyUp, true);
     }
 
     // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -157,9 +155,6 @@ export class GridBase<T extends Item<U>, U>
     onKeyUp = () => {
         this.stopFastScrolling();
         this.fastFocusingOptimizer.stop();
-    };
-
-    onGlobalKeyUp = () => {
         this.preventBlurCounter = 0;
     };
 
@@ -183,6 +178,16 @@ export class GridBase<T extends Item<U>, U>
         }
     };
 
+    shouldPreventBlur(event: KeyboardEvent) {
+        const { horizontal, preventBlurOnLongPress } = this.props;
+        return (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS && (
+            (preventBlurOnLongPress.forward && isForward(event, horizontal))
+            || (preventBlurOnLongPress.backward && isBackward(event, horizontal))
+            || (preventBlurOnLongPress.forwardGroup && isFwGroup(event, horizontal))
+            || (preventBlurOnLongPress.backwardGroup && isBwGroup(event, horizontal))
+        ));
+    }
+
     getRefAtIndex(i: number): Reference<T> {
         const ref = this.itemRefs[i];
         if (!ref) {
@@ -248,16 +253,6 @@ export class GridBase<T extends Item<U>, U>
         this.fastScrollingCounter.reset();
     };
 
-    shouldPreventBlur(event: KeyboardEvent) {
-        const { horizontal, preventBlurOnLongPress } = this.props;
-        return (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS && (
-            (preventBlurOnLongPress.forward && isForward(event, horizontal))
-            || (preventBlurOnLongPress.backward && isBackward(event, horizontal))
-            || (preventBlurOnLongPress.forwardGroup && isFwGroup(event, horizontal))
-            || (preventBlurOnLongPress.backwardGroup && isBwGroup(event, horizontal))
-        ));
-    }
-
     animatedScrollStarted() {
         this.isAnimatedScrollRunning = true;
     }

package/packages/grid/src/FirstOnlyGrid/FirstOnlyGrid.tsx

@@ -61,8 +61,6 @@ export class FirstOnlyGrid<T extends Item<U>, U>
         const linesDiff = Math.floor(grid.index / itemsInGroup) - oldLine;
         if (linesDiff > 0) {
             this.scrollForward(linesDiff);
-        } else if (linesDiff < 0) {
-            this.scrollBackward(Math.abs(linesDiff));
         }
     };
 
@@ -79,8 +77,8 @@ export class FirstOnlyGrid<T extends Item<U>, U>
         this.controller.scroll(targetScrollIndex);
     }
 
-    scrollBackward(diff = 1) {
-        const targetScrollIndex = this.controller.scrollIndex - diff;
+    scrollBackward() {
+        const targetScrollIndex = this.controller.scrollIndex - 1;
         this.controller.scroll(targetScrollIndex);
     }
 

package/packages/grid/src/UnifiedGridController/UnifiedGridController.ts

@@ -298,13 +298,13 @@ export class UnifiedGridController<T> implements IUnifiedGridController<T> {
         const { grid } = this;
         const base = grid.base.current!;
         const targetScrollIndex = this.itemIndexToScrollIndex(dataIndex);
+        if (targetScrollIndex > this.scrollIndex) {
+            this.adjustGroupsOffsetsForward(targetScrollIndex);
+        } else if (targetScrollIndex < this.scrollIndex) {
+            this.adjustGroupsOffsetsBackward(targetScrollIndex);
+        }
         if (targetScrollIndex !== this.scrollIndex) {
-            const backwards = targetScrollIndex < this.scrollIndex;
-            const lastScrollIndex = this.scrollIndex;
-            const scrollToIndex = Math.abs(targetScrollIndex - this.scrollIndex);
-            for (let i = 1; i <= scrollToIndex; i++) {
-                this.scroll(backwards ? lastScrollIndex - i : lastScrollIndex + i, animate);
-            }
+            this.scroll(targetScrollIndex, animate);
         }
         base.index = dataIndex;
         this.focusCurrentItem();

package/packages/icon/src/Icon.tsx

@@ -1,19 +1,12 @@
 import { createRef, Reference, Component } from '@24i/bigscreen-sdk/jsx';
-import {
-    getDisplayToggler,
-    IDisplayToggler,
-    removeClass,
-    addClass,
-    DISPLAY_NONE,
-} from '@24i/bigscreen-sdk/utils';
+import { addClass } from '@24i/bigscreen-sdk/utils/addClass';
+import { removeClass } from '@24i/bigscreen-sdk/utils/removeClass';
 
 const ICON_PREFIX = 'icon-';
 
 type Props<SpritesJSON> = {
     icon?: keyof SpritesJSON,
-    domRef?: Reference<HTMLDivElement>,
-    className?: string,
-    initialIsHidden?: boolean,
+    domRef?: Reference<HTMLDivElement>;
 };
 
 export class Icon<T> extends Component<Props<T>> {
@@ -21,13 +14,10 @@ export class Icon<T> extends Component<Props<T>> {
 
     currentIcon: keyof T | undefined;
 
-    iconDisplay: IDisplayToggler;
-
     constructor(props: Props<T>) {
         super(props);
         this.ref = props.domRef || createRef();
         this.currentIcon = props.icon;
-        this.iconDisplay = getDisplayToggler(this.ref, props.initialIsHidden);
     }
 
     getClass(icon: keyof T): string {
@@ -41,16 +31,6 @@ export class Icon<T> extends Component<Props<T>> {
         this.currentIcon = icon;
     }
 
-    show() {
-        if (!this.currentIcon) return;
-        this.iconDisplay.show();
-    }
-
-    hide() {
-        if (!this.currentIcon) return;
-        this.iconDisplay.hide();
-    }
-
     clearIcon() {
         if (!this.currentIcon) return;
         removeClass(this.ref, this.getClass(this.currentIcon));
@@ -58,13 +38,11 @@ export class Icon<T> extends Component<Props<T>> {
     }
 
     render() {
-        const { icon, className, initialIsHidden } = this.props;
+        const { icon } = this.props;
         return (
             <div
                 ref={this.ref}
-                className={`${className || ''} icon ${icon
-                    ? this.getClass(icon) : ''} ${initialIsHidden
-                    ? DISPLAY_NONE : ''}`}
+                className={`icon ${icon ? this.getClass(icon) : ''}`}
             />
         );
     }

package/packages/input/README.md

@@ -16,9 +16,9 @@ It is connected through ime package to either system or virtual keyboard.
 - `passwordChar` - optional string which replaces password characters (default: `'●'`)
 - `shouldHandleOverflow` - optional flag which enables overflow handling by moving text to the left when caret should get out of its container (default: `false`)
 - `maxLength` - optional number to limit value length (default: `Infinity`)
+- `onChange` - optional callback with new value `(newValue: string) => void`
 - `onFocus` - optional callback which is called when input gets focus
 - `onBlur` - optional callback which is called when input loses focus
-- `onChange` - optional callback with new value `(newValue: string) => void`
 - `onFinish` - optional callback which is called when input is finished, its only argument is a boolean to determine if input was cancelled or not `(wasCancelled: boolean) => void`
 
 ## Usage

package/packages/input/src/Input.tsx

@@ -19,11 +19,13 @@ type Props = {
     passwordChar?: string,
     /** Moves text to the left (with negative margin-left) when caret overflows */
     shouldHandleOverflow?: boolean,
+    onChange?: (newValue: string) => void,
+    onFocus?: () => void,
+    onBlur?: () => void,
+    // eslint-disable-next-line react/no-unused-prop-types
     maxLength?: number,
-    onFocus?: (event: FocusEvent) => void,
-    onBlur?: (event: FocusEvent) => void,
+    // eslint-disable-next-line react/require-default-props
     onFinish?: (wasCancelled?: boolean) => void,
-    onChange?: (newValue: string) => void,
 };
 
 const ACTIVE = 'active';
@@ -106,12 +108,6 @@ export class Input extends Component<Props> implements IFocusable {
 
     setValue(value: string) {
         this.nativeInput.current!.value = value;
-        setText(this.text, this.filterText(value));
-        if (value.length === 0) {
-            this.showPlaceholder();
-        } else {
-            this.hidePlaceholder();
-        }
     }
 
     setType(type: Props['type']) {
@@ -130,14 +126,12 @@ export class Input extends Component<Props> implements IFocusable {
         const range = new Range();
         range.selectNode(textNode);
         const wholeText = range.getBoundingClientRect();
-        range.setStart(textNode, 0);
+        range.setStart(textNode, position);
         range.setEnd(textNode, position);
         const caretText = range.getBoundingClientRect();
-        const [initialCaretPosition, currentCarretPosition, offsetBase] = isRtl()
-            ? [wholeText.right, caretText.left, wholeText.left]
-            : [wholeText.left, caretText.right, wholeText.right];
-        const caretPos = position === 0 ? initialCaretPosition : currentCarretPosition;
-        const offset = offsetBase - caretPos;
+        const offset = isRtl()
+            ? wholeText.left - caretText.left
+            : wholeText.left + wholeText.width - caretText.left;
         offsetPosition(this.caret, { x: -offset }, false);
     }
 
@@ -226,7 +220,7 @@ export class Input extends Component<Props> implements IFocusable {
                     >
                         {placeholder}
                     </div>
-                    <div ref={this.text} className="text">
+                    <div ref={this.text} className="text" dir="auto">
                         {this.filterText(value)}
                     </div>
                     <div ref={this.caret} className="caret" />

package/packages/interactable/README.md

@@ -12,7 +12,6 @@ It provides common functionality for you.
 ## Props
 - `onPress` - called for onClick and onKeyDown
 - `ref` is forwarded to underlying `div`
-- `blockRepeatedKeyDown` - interactable must suppress repeated onPress calls, until the key is released. This is because because keyDown event is repeatedly fired when user holds key on webTv and Adrodid Tv. This may lead to unpredictable behavior.
 - other `div` props
 
 ## Provided functionality
@@ -35,4 +34,4 @@ renders
 <div class="btn btn-primary" tabindex="0">
     Play video
 </div>
-```
+```

package/packages/interactable/src/Interactable.tsx

@@ -3,20 +3,14 @@ import { isClickOrEnter } from '@24i/bigscreen-sdk/device';
 import { Props } from './interface';
 
 export const Interactable = forwardRef<Props>(
-    ({ children, onPress, blockRepeatedKeyDown, ...otherProps },
-        ref: Reference<HTMLDivElement> | null) => {
+    ({ children, onPress, ...otherProps }, ref: Reference<HTMLDivElement> | null) => {
         const domRef = ref || createRef<HTMLDivElement>();
-
-        const onPressProxy = (e: MouseEvent | KeyboardEvent) => {
-            if (typeof onPress === 'function' && isClickOrEnter(e)) {
-                onPress(e);
-            }
+        const onPressProxy = (e: KeyboardEvent | MouseEvent) => {
+            if (typeof onPress === 'function' && isClickOrEnter(e)) onPress(e);
         };
-
         const onMouseEnter = () => {
             domRef.current!.focus({ preventScroll: true });
         };
-
         return (
             <div
                 {...otherProps}