@maestro_io/maestro-web-sdk 1.0.0 → 2.0.0

package/dist/external/spatial-navigation/spatialNavigation.d.ts

@@ -0,0 +1,166 @@
+import { Direction, Layout } from './utils';
+import { KEY_ENTER } from './utils';
+export declare const ROOT_FOCUS_KEY = "SN:ROOT";
+export type KeyType = Direction | typeof KEY_ENTER;
+export interface KeyMap {
+    [key: string]: number;
+}
+interface FocusableComponent {
+    focusKey: string;
+    node: HTMLElement;
+    parentFocusKey: string | null;
+    onEnterPressHandler?: (details: {
+        pressedKeys: Record<string, number>;
+    }) => void;
+    onEnterReleaseHandler?: () => void;
+    onArrowPressHandler?: (direction: Direction, details: {
+        pressedKeys: Record<string, number>;
+    }) => boolean | void;
+    onBecameFocusedHandler?: (layout: Layout, details: any) => void;
+    onBecameBlurredHandler?: (layout: Layout, details: any) => void;
+    onUpdateFocus?: (isFocused: boolean) => void;
+    onUpdateHasFocusedChild?: (hasFocusedChild: boolean) => void;
+    forgetLastFocusedChild?: boolean;
+    trackChildren?: boolean;
+    lastFocusedChildKey: string | null;
+    preferredChildFocusKey?: string;
+    focusable: boolean;
+    blockNavigationOut?: boolean;
+    autoRestoreFocus?: boolean;
+    layout: Layout;
+    layoutUpdated: boolean;
+}
+interface Corner {
+    x: number;
+    y: number;
+}
+interface RefCorners {
+    a: Corner;
+    b: Corner;
+}
+export interface InitOptions {
+    debug?: boolean;
+    visualDebug?: boolean;
+    nativeMode?: boolean;
+    throttle?: number;
+    throttleKeypresses?: boolean;
+}
+interface AddFocusableOptions {
+    focusKey: string;
+    node: HTMLElement;
+    parentFocusKey: string | null;
+    onEnterPressHandler?: (details: {
+        pressedKeys: Record<string, number>;
+    }) => void;
+    onEnterReleaseHandler?: () => void;
+    onArrowPressHandler?: (direction: Direction, details: {
+        pressedKeys: Record<string, number>;
+    }) => boolean | void;
+    onBecameFocusedHandler?: (layout: Layout, details: any) => void;
+    onBecameBlurredHandler?: (layout: Layout, details: any) => void;
+    forgetLastFocusedChild?: boolean;
+    trackChildren?: boolean;
+    onUpdateFocus?: (isFocused: boolean) => void;
+    onUpdateHasFocusedChild?: (hasFocusedChild: boolean) => void;
+    preferredChildFocusKey?: string;
+    autoRestoreFocus?: boolean;
+    focusable?: boolean;
+    blockNavigationOut?: boolean;
+}
+interface UpdateFocusableOptions {
+    node?: HTMLElement;
+    preferredChildFocusKey?: string;
+    focusable?: boolean;
+    blockNavigationOut?: boolean;
+}
+export declare const getChildClosestToOrigin: (children: FocusableComponent[]) => FocusableComponent;
+declare class SpatialNavigation {
+    private focusableComponents;
+    private focusKey;
+    private parentsHavingFocusedChild;
+    private enabled;
+    private nativeMode;
+    private throttle;
+    private throttleKeypresses;
+    private pressedKeys;
+    private paused;
+    private keyDownEventListener;
+    private keyUpEventListener;
+    private keyMap;
+    private debug;
+    private visualDebugger;
+    private logIndex;
+    /**
+     * Used to determine the coordinate that will be used to filter items that are over the "edge"
+     */
+    static getCutoffCoordinate(isVertical: boolean, isIncremental: boolean, isSibling: boolean, layout: Layout): number;
+    /**
+     * Returns two corners (a and b) coordinates that are used as a reference points
+     * Where "a" is always leftmost and topmost corner, and "b" is rightmost bottommost corner
+     */
+    static getRefCorners(direction: Direction, isSibling: boolean, layout: Layout): RefCorners;
+    /**
+     * Calculates if the sibling node is intersecting enough with the ref node by the secondary coordinate
+     */
+    static isAdjacentSlice(refCorners: RefCorners, siblingCorners: RefCorners, isVerticalDirection: boolean): boolean;
+    static getPrimaryAxisDistance(refCorners: RefCorners, siblingCorners: RefCorners, isVerticalDirection: boolean): number;
+    static getSecondaryAxisDistance(refCorners: RefCorners, siblingCorners: RefCorners, isVerticalDirection: boolean): number;
+    /**
+     * Inspired by: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS_for_TV/TV_remote_control_navigation#Algorithm_design
+     * Ref Corners are the 2 corners of the current component in the direction of navigation
+     * They used as a base to measure adjacent slices
+     */
+    sortSiblingsByPriority(siblings: FocusableComponent[], currentLayout: Layout, direction: Direction, _focusKey: string): FocusableComponent[];
+    constructor();
+    init({ debug, visualDebug, nativeMode, throttle, throttleKeypresses, }?: InitOptions): void;
+    startDrawLayouts(): void;
+    destroy(): void;
+    getEventType(keyCode: number): KeyType | undefined;
+    bindEventHandlers(): void;
+    unbindEventHandlers(): void;
+    onEnterPress(details: {
+        pressedKeys: Record<string, number>;
+    }): void;
+    onEnterRelease(): void;
+    onArrowPress(direction: Direction, details: {
+        pressedKeys: Record<string, number>;
+    }): boolean | void;
+    navigateByDirection(direction: Direction, details?: Record<string, any>): void;
+    onKeyEvent(event: KeyboardEvent): void;
+    smartNavigate(direction: Direction, fromParentFocusKey: string | null, details: Record<string, any>): void;
+    saveLastFocusedChildKey(component: FocusableComponent | undefined, focusKey: string): void;
+    log(functionName: string, debugString: string, ...rest: any[]): void;
+    getNextFocusKey(targetFocusKey: string): string;
+    addFocusable({ focusKey, node, parentFocusKey, onEnterPressHandler, onEnterReleaseHandler, onArrowPressHandler, onBecameFocusedHandler, onBecameBlurredHandler, forgetLastFocusedChild, trackChildren, onUpdateFocus, onUpdateHasFocusedChild, preferredChildFocusKey, autoRestoreFocus, focusable, blockNavigationOut, }: AddFocusableOptions): void;
+    removeFocusable({ focusKey }: {
+        focusKey: string;
+    }): void;
+    getNodeLayoutByFocusKey(focusKey: string): Layout | null;
+    setCurrentFocusedKey(newFocusKey: string, details: Record<string, any>): void;
+    updateParentsHasFocusedChild(focusKey: string, details: Record<string, any>): void;
+    updateParentsLastFocusedChild(focusKey: string): void;
+    getKeyMap(): KeyMap;
+    setKeyMap(keyMap: KeyMap): void;
+    isFocusableComponent(focusKey: string): boolean;
+    /**
+     * Checks whether the focusableComponent is actually participating in spatial navigation (in other words, is a
+     * 'focusable' focusableComponent). Seems less confusing than calling it isFocusableFocusableComponent()
+     */
+    isParticipatingFocusableComponent(focusKey: string): boolean;
+    onIntermediateNodeBecameFocused(focusKey: string, details: Record<string, any>): void;
+    onIntermediateNodeBecameBlurred(focusKey: string, details: Record<string, any>): void;
+    pause(): void;
+    resume(): void;
+    setFocus(targetFocusKey: string, details?: Record<string, any>): void;
+    updateAllLayouts(): void;
+    updateLayout(focusKey: string): void;
+    updateFocusable(focusKey: string, { node, preferredChildFocusKey, focusable, blockNavigationOut, }: UpdateFocusableOptions): void;
+    isNativeMode(): boolean;
+    getFocusableComponents(): FocusableComponent[];
+    getFocusableComponentsByParentFocusKey(parentFocusKey: string): FocusableComponent[];
+}
+/**
+ * Export singleton
+ */
+declare const _default: SpatialNavigation;
+export default _default;

package/dist/external/spatial-navigation/utils.d.ts

@@ -0,0 +1,15 @@
+export declare const DIRECTION_LEFT = "left";
+export declare const DIRECTION_RIGHT = "right";
+export declare const DIRECTION_UP = "up";
+export declare const DIRECTION_DOWN = "down";
+export declare const KEY_ENTER = "enter";
+export type Direction = typeof DIRECTION_LEFT | typeof DIRECTION_RIGHT | typeof DIRECTION_UP | typeof DIRECTION_DOWN;
+export interface Layout {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    node: HTMLElement;
+}

package/dist/external/spatial-navigation/visualDebugger.d.ts

@@ -0,0 +1,17 @@
+interface Layout {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+declare class VisualDebugger {
+    private debugCtx;
+    private layoutsCtx;
+    constructor();
+    static createCanvas(id: string, zIndex: number): CanvasRenderingContext2D;
+    clear(): void;
+    clearLayouts(): void;
+    drawLayout(layout: Layout, focusKey: string, parentFocusKey: string): void;
+    drawPoint(x: number, y: number, color?: string, size?: number): void;
+}
+export default VisualDebugger;

package/dist/external/spatial-navigation/withFocusable.d.ts

@@ -0,0 +1,81 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { Direction, Layout } from './utils';
+interface WithFocusableConfig {
+    forgetLastFocusedChild?: boolean;
+    trackChildren?: boolean;
+    autoRestoreFocus?: boolean;
+    blockNavigationOut?: boolean;
+}
+export interface WithFocusableProps {
+    focused?: boolean;
+    focusKey?: string;
+    parentFocusKey?: string;
+    preferredChildFocusKey?: string;
+    forgetLastFocusedChild?: boolean;
+    trackChildren?: boolean;
+    autoRestoreFocus?: boolean;
+    blockNavigationOut?: boolean;
+    focusable?: boolean;
+    onEnterPress?: (props: any, details: {
+        pressedKeys: Record<string, number>;
+    }) => void;
+    onEnterRelease?: (props: any) => void;
+    onArrowPress?: (direction: Direction, props: any, details: {
+        pressedKeys: Record<string, number>;
+    }) => boolean | void;
+    onBecameFocused?: (layout: Layout, props: any, details: any) => void;
+    onBecameBlurred?: (layout: Layout, props: any, details: any) => void;
+}
+export interface WithFocusableState {
+    realFocusKey: string;
+    focused: boolean;
+    hasFocusedChild: boolean;
+    parentFocusKey: string;
+}
+declare const withFocusable: <P extends object>({ forgetLastFocusedChild: configForgetLastFocusedChild, trackChildren: configTrackChildren, autoRestoreFocus: configAutoRestoreFocus, blockNavigationOut: configBlockNavigationOut, }?: WithFocusableConfig) => (WrappedComponent: import("react").ComponentType<P & WithFocusableProps>) => {
+    new (props?: (P & WithFocusableProps) | undefined, context?: any): {
+        state: WithFocusableState;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: Direction, details?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: {
+            pressedKeys: Record<string, number>;
+        }) => void;
+        onEnterReleaseHandler: () => void;
+        onArrowPressHandler: (direction: Direction, details: {
+            pressedKeys: Record<string, number>;
+        }) => boolean | void;
+        onBecameFocusedHandler: (layout: Layout, details: any) => void;
+        onBecameBlurredHandler: (layout: Layout, details: any) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): import("react").ReactElement<P & WithFocusableProps>;
+        setState<K extends keyof WithFocusableState>(state: WithFocusableState | ((prevState: Readonly<WithFocusableState>, props: P & WithFocusableProps) => WithFocusableState | Pick<WithFocusableState, K>) | Pick<WithFocusableState, K>, callback?: (() => any) | undefined): void;
+        forceUpdate(callBack?: (() => any) | undefined): void;
+        props: Readonly<{
+            children?: import("react").ReactNode;
+        }> & Readonly<P & WithFocusableProps>;
+        context: any;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P & WithFocusableProps>, nextContext: any): void;
+        shouldComponentUpdate?(nextProps: Readonly<P & WithFocusableProps>, nextState: Readonly<WithFocusableState>, nextContext: any): boolean;
+        componentWillUpdate?(nextProps: Readonly<P & WithFocusableProps>, nextState: Readonly<WithFocusableState>, nextContext: any): void;
+    };
+    contextTypes: {
+        parentFocusKey: PropTypes.Requireable<string>;
+    };
+    childContextTypes: {
+        parentFocusKey: PropTypes.Requireable<string>;
+    };
+};
+export default withFocusable;

package/dist/helpers/Observable.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Basic observable implementation for view models
+ */
+export declare class Observable<T> {
+    private listeners;
+    private _value;
+    constructor(initialValue: T);
+    get value(): T;
+    set value(newValue: T);
+    subscribe(listener: (value: T) => void): () => void;
+    private notify;
+}

package/dist/helpers/deliver-focus.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description Useful when you want to lose the focus of the SDK and delegate it to the Client App.
+ */
+declare const deliverFocus: (e: HTMLElement) => void;
+export default deliverFocus;

package/dist/helpers/withRemoteControl.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+export type RemoteControlProps = {
+    onBackPressed?: (e: KeyboardEvent) => void;
+    onLeftPressed?: (e: KeyboardEvent) => void;
+    remoteControlActive?: boolean;
+};
+export declare const withRemoteControl: <P extends object>(WrappedComponent: React.ComponentType<P>) => {
+    new (props: P & RemoteControlProps): {
+        cleanup?: (() => void) | undefined;
+        componentDidUpdate(prevProps: Readonly<P & RemoteControlProps>): void;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        handleKeyDown: (e: KeyboardEvent) => void;
+        render(): React.JSX.Element;
+        setState<K extends "active">(state: {
+            active: boolean;
+        } | ((prevState: Readonly<{
+            active: boolean;
+        }>, props: P & RemoteControlProps) => {
+            active: boolean;
+        } | Pick<{
+            active: boolean;
+        }, K>) | Pick<{
+            active: boolean;
+        }, K>, callback?: (() => any) | undefined): void;
+        forceUpdate(callBack?: (() => any) | undefined): void;
+        props: Readonly<{
+            children?: React.ReactNode;
+        }> & Readonly<P & RemoteControlProps>;
+        state: Readonly<{
+            active: boolean;
+        }>;
+        context: any;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P & RemoteControlProps>, nextContext: any): void;
+        shouldComponentUpdate?(nextProps: Readonly<P & RemoteControlProps>, nextState: Readonly<{
+            active: boolean;
+        }>, nextContext: any): boolean;
+        componentWillUpdate?(nextProps: Readonly<P & RemoteControlProps>, nextState: Readonly<{
+            active: boolean;
+        }>, nextContext: any): void;
+    };
+};
+export default withRemoteControl;