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

package/packages/focus/src/IFocusable.ts

@@ -1,4 +1,5 @@
 export interface IFocusable {
     focus(options?: FocusOptions): void,
     hasDom?(element: HTMLElement): boolean,
+    hasFocus?(): boolean,
 }

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

@@ -1,14 +1,22 @@
 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,
+    circular?: boolean,
+    preventBlurOnLongPress?: {
+        forward?: boolean,
+        backward?: boolean,
+    }
 };
 
 export interface ILayout {
@@ -25,12 +33,16 @@ 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',
-        };
+            circular: false,
+            preventBlurOnLongPress: {},
+        } as const;
 
         declare props: DeclareProps<Props, typeof Layout.defaultProps>;
 
@@ -40,6 +52,7 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
                 throw new Error(Errors.DOM_REF_ERROR);
             }
             domRef.current!.addEventListener('keydown', this.onKeyDown, false);
+            window.document.addEventListener('keyup', this.onGlobalKeyUp, true);
         }
 
         componentWillUnmount() {
@@ -48,12 +61,17 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
                 throw new Error(Errors.DOM_REF_ERROR);
             }
             domRef.current!.removeEventListener('keydown', this.onKeyDown, false);
+            window.document.removeEventListener('keyup', this.onGlobalKeyUp, true);
         }
 
         onKeyDown = (e: KeyboardEvent) => {
             onKeyDown(e, this);
         };
 
+        onGlobalKeyUp = () => {
+            this.preventBlurCounter = 0;
+        };
+
         getFromIndex(target: HTMLElement) {
             const { focusableChildren } = this.props;
             if (
@@ -78,25 +96,42 @@ export const getLayoutBase = (onKeyDown: (event: KeyboardEvent, layout: ILayout)
         }
 
         backward(e: KeyboardEvent) {
+            const { focusableChildren, preventBlurOnLongPress, circular } = 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 (circular) {
+                this.setIndex(focusableChildren.length - 1);
+                this.focusCurrentIndex();
+                stopEvent(e);
+            } else if (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS) {
+                stopEvent(e);
             }
         }
 
         forward(e: KeyboardEvent) {
-            const { focusableChildren } = this.props;
+            const { focusableChildren, preventBlurOnLongPress, circular } = 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 (circular) {
+                this.setIndex(0);
+                this.focusCurrentIndex();
+                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);
+        window.document.addEventListener('keyup', this.onGlobalKeyUp, true);
     }
 
     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);
+        window.document.removeEventListener('keyup', this.onGlobalKeyUp, true);
     }
 
     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);
         }
     };
 
+    onGlobalKeyUp = () => {
+        this.preventBlurCounter = 0;
+    };
+
     getRefAt({ x, y }: Index2D): Reference {
         const { matrix } = this.props;
         if (matrix[y] && matrix[y][x]) return matrix[y][x];
@@ -112,24 +144,6 @@ export class Matrix extends Component<Props> implements IFocusable {
         return false;
     }
 
-    isDirectionLeft(event: KeyboardEvent) {
-        const { dir } = this.props;
-        const rtl = isRtl(dir);
-        return (
-            (!rtl && LEFT.is(event))
-            || (rtl && RIGHT.is(event))
-        );
-    }
-
-    isDirectionRight(event: KeyboardEvent) {
-        const { dir } = this.props;
-        const rtl = isRtl(dir);
-        return (
-            (!rtl && RIGHT.is(event))
-            || (rtl && LEFT.is(event))
-        );
-    }
-
     moveForwards = (isCircular: boolean) => (x: number, length: number) => {
         if (x === length - 1) {
             return isCircular ? 0 : length - 1;
@@ -172,6 +186,24 @@ export class Matrix extends Component<Props> implements IFocusable {
         return this.searchVertical(column, fromY, this.moveForwards(!!isCircular));
     };
 
+    isDirectionLeft(event: KeyboardEvent) {
+        const { dir } = this.props;
+        const rtl = isRtl(dir);
+        return (
+            (!rtl && LEFT.is(event))
+            || (rtl && RIGHT.is(event))
+        );
+    }
+
+    isDirectionRight(event: KeyboardEvent) {
+        const { dir } = this.props;
+        const rtl = isRtl(dir);
+        return (
+            (!rtl && RIGHT.is(event))
+            || (rtl && LEFT.is(event))
+        );
+    }
+
     isDifferentReferenceFromCurrent(index: Index2D): boolean {
         const { current } = this.getRefAt(this.index);
         const { current: searched } = this.getRefAt(index);

package/packages/focus/src/focusFirstExisting.ts

@@ -1,6 +1,12 @@
-import { Reference } from '@24i/bigscreen-sdk/jsx';
+import { createRef, 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/hasFocus.ts

@@ -0,0 +1,36 @@
+import { Reference, unwrapReference } from '@24i/bigscreen-sdk/jsx';
+import { isElementWrappedBy } from '@24i/bigscreen-sdk/utils/elementUtils';
+
+/**
+ * Test if the element (or element in the reference) has the `activeElement` inside or optionally,
+ * if the element itself is the `activeElement`.
+ * @param elementOrReference DOM element or reference to element on which we test focus
+ * @param includeElementItself if true, active element is also tested with the provided element.
+ * Default is true
+ * @returns true if the element has focused element inside or is itself focused
+ */
+export const hasFocus = (
+    elementOrReference: HTMLElement | Reference<HTMLElement>,
+    includeElementItself = true,
+) => {
+    const element = unwrapReference(elementOrReference);
+    if (!element) return false;
+    return isElementWrappedBy(
+        document.activeElement as HTMLElement,
+        element,
+        includeElementItself,
+    );
+};
+
+/**
+ * Test if the element (or element in the reference) is the `activeElement`.
+ * @param elementOrReference DOM element or reference to element on which we test focus
+ * @returns true if the element is focused
+ */
+export const isFocused = (
+    elementOrReference: HTMLElement | Reference<HTMLElement>,
+) => {
+    const element = unwrapReference(elementOrReference);
+    if (!element) return false;
+    return document.activeElement === element;
+};

package/packages/focus/src/index.ts

@@ -11,5 +11,6 @@ export {
     setNextFocusCandidate,
     focusCandidate,
 } from './candidate';
-export { focusFirstExisting } from './focusFirstExisting';
+export { focusFirstExisting, preventScrollOnFocus } 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/player-base';
+import { PlayerBase } from '@24i/bigscreen-players-engine-base';
 import './__external__/SpringStreams';
 
 const SECOND_IN_MS = 1000;
@@ -16,7 +16,7 @@ export class Gallup {
      */
     constructor(
         siteCode: string,
-        private readonly player: PlayerBase<any>,
+        private readonly player: PlayerBase,
         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.getMediaInfo();
+                const { playerVersion } = player.mediaInfo;
                 return {
                     pl: playerName,
                     plv: playerVersion || '',

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

@@ -111,11 +111,13 @@ 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
@@ -155,6 +157,9 @@ export class GridBase<T extends Item<U>, U>
     onKeyUp = () => {
         this.stopFastScrolling();
         this.fastFocusingOptimizer.stop();
+    };
+
+    onGlobalKeyUp = () => {
         this.preventBlurCounter = 0;
     };
 
@@ -178,16 +183,6 @@ 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) {
@@ -253,6 +248,16 @@ 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,6 +61,8 @@ 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));
         }
     };
 
@@ -77,8 +79,8 @@ export class FirstOnlyGrid<T extends Item<U>, U>
         this.controller.scroll(targetScrollIndex);
     }
 
-    scrollBackward() {
-        const targetScrollIndex = this.controller.scrollIndex - 1;
+    scrollBackward(diff = 1) {
+        const targetScrollIndex = this.controller.scrollIndex - diff;
         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) {
-            this.scroll(targetScrollIndex, animate);
+            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);
+            }
         }
         base.index = dataIndex;
         this.focusCurrentItem();

package/packages/icon/src/Icon.tsx

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

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,13 +19,11 @@ 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,
-    // eslint-disable-next-line react/require-default-props
+    onFocus?: (event: FocusEvent) => void,
+    onBlur?: (event: FocusEvent) => void,
     onFinish?: (wasCancelled?: boolean) => void,
+    onChange?: (newValue: string) => void,
 };
 
 const ACTIVE = 'active';
@@ -126,12 +124,14 @@ export class Input extends Component<Props> implements IFocusable {
         const range = new Range();
         range.selectNode(textNode);
         const wholeText = range.getBoundingClientRect();
-        range.setStart(textNode, position);
+        range.setStart(textNode, 0);
         range.setEnd(textNode, position);
         const caretText = range.getBoundingClientRect();
-        const offset = isRtl()
-            ? wholeText.left - caretText.left
-            : wholeText.left + wholeText.width - caretText.left;
+        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;
         offsetPosition(this.caret, { x: -offset }, false);
     }
 
@@ -220,7 +220,7 @@ export class Input extends Component<Props> implements IFocusable {
                     >
                         {placeholder}
                     </div>
-                    <div ref={this.text} className="text" dir="auto">
+                    <div ref={this.text} className="text">
                         {this.filterText(value)}
                     </div>
                     <div ref={this.caret} className="caret" />

package/packages/interactable/README.md

@@ -12,6 +12,7 @@ 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
@@ -34,4 +35,4 @@ renders
 <div class="btn btn-primary" tabindex="0">
     Play video
 </div>
-```
+```

package/packages/interactable/src/Interactable.tsx

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

package/packages/interactable/src/interface.ts

@@ -3,4 +3,5 @@ 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
+// eslint-disable-next-line import/no-default-export, no-restricted-exports
 export { createElement as default } from './virtualDOM';

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

@@ -1,5 +1,6 @@
 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/jsx/src/test-utils/keyup.ts

@@ -0,0 +1,27 @@
+import { Reference, Component } from '../index';
+import { unwrapReference } from '../utils';
+
+type ToPress = Reference<HTMLElement> | HTMLElement | Window | Document | Component<any>;
+
+interface Key {
+    keyCode: number,
+    code: string,
+    key?: string,
+}
+
+export const keyup = (toPress: ToPress, keyOrKeyCode: number | Key) => {
+    const element = unwrapReference<ToPress>(toPress);
+    let kbEventOptions: KeyboardEventInit;
+    if (typeof keyOrKeyCode === 'number') {
+        kbEventOptions = { keyCode: keyOrKeyCode };
+    } else {
+        const { keyCode, code, key } = keyOrKeyCode;
+        kbEventOptions = { keyCode, code, key };
+    }
+    const event = new KeyboardEvent('keyup', kbEventOptions);
+    if ((element as any).onKeyUp) {
+        (element as any).onKeyUp(event);
+    } else if ((element as any).dispatchEvent) {
+        (element as Element).dispatchEvent(event);
+    }
+};