@24i/bigscreen-sdk 1.0.1-alpha.2074 → 1.0.2-alpha.2069

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.1-alpha.2074",
+    "version": "1.0.2-alpha.2069",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -271,4 +271,4 @@
         "./zapping/interface": "./packages/zapping/src/interface.ts",
         "./zapping": "./packages/zapping/src/index.ts"
     }
-}
+}

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

@@ -0,0 +1,24 @@
+import { createRef, forwardRef, Reference } from '@24i/bigscreen-sdk/jsx';
+import { MouseNavigation } from '@24i/bigscreen-sdk/mouse-navigation';
+import { GridBase as Base, Props as GridProps } from './Base';
+import { Item } from '../types';
+
+export const GridBase = forwardRef(<T extends Item<U>, U>(props: GridProps<T, U>,
+    gridRef: Reference<Base<T, U>>,
+) => {
+    const direction = props.horizontal ? 'horizontal' : 'vertical';
+    const mrcuRef = createRef<MouseNavigation>();
+    return (
+        <MouseNavigation
+            ref={mrcuRef}
+            getMountingPoint={() => gridRef.current!.scroller.current!.wrapRef}
+            direction={direction}
+            forward={props.mrcuForward || props.forwardGroup}
+            backward={props.mrcuBackward || props.backwardGroup}
+            shouldShowMrcuForward={props.shouldShowMrcuForward}
+            shouldShowMrcuBackward={props.shouldShowMrcuBackward}
+        >
+            <Base {...props} ref={gridRef} mrcuRef={mrcuRef} />
+        </MouseNavigation>
+    );
+});

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

@@ -1,14 +1,13 @@
 import { createRef, Component, Reference, DeclareProps } from '@24i/bigscreen-sdk/jsx';
 import { device } from '@24i/bigscreen-sdk/device';
+import { MouseNavigation } from '@24i/bigscreen-sdk/mouse-navigation';
 import { Scroller } from '@24i/bigscreen-sdk/scroller';
 import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
 import { noop } from '@24i/bigscreen-sdk/utils/noop';
 import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
 import { createTimeout, createCounter, ICounter } from '@24i/bigscreen-sdk/utils';
-import { MouseNavigation } from './MouseNavigation';
 import { FastFocusingOptimizer } from '../FastFocusingOptimizer/FastFocusingOptimizer';
 import { SharedProps, Item } from '../types';
-import { MouseNavigation as IMouseNavigation } from './interface';
 
 export type Props<T extends Item<U>, U> = Omit<SharedProps<T, U>, 'scrollStep'> & {
     forward: () => boolean,
@@ -22,6 +21,7 @@ export type Props<T extends Item<U>, U> = Omit<SharedProps<T, U>, 'scrollStep'>
     adjustFocusFromTarget?: (itemRefIndex: number, groupRefIndex: number) => void,
     horizontal?: boolean,
     limit?: number,
+    mrcuRef?: Reference<MouseNavigation>;
     shouldApplySlowdown?: () => boolean,
 };
 
@@ -55,8 +55,6 @@ export class GridBase<T extends Item<U>, U>
 
     scrollerDom = createRef<HTMLDivElement>();
 
-    mrcuRef = createRef<IMouseNavigation>();
-
     itemRefs: Reference<T>[] = [];
 
     groupRefs: Reference<HTMLDivElement>[] = [];
@@ -153,13 +151,14 @@ export class GridBase<T extends Item<U>, U>
     onWheel = (event: WheelEvent) => {
         const {
             forwardGroup, backwardGroup, shouldApplySlowdown,
+            mrcuRef,
         } = this.props;
         let processed;
         if (event.deltaY > 0) processed = shouldApplySlowdown() || forwardGroup();
         else if (event.deltaY < 0) processed = shouldApplySlowdown() || backwardGroup();
         if (processed) {
             stopEvent(event);
-            this.mrcuRef.current?.handleArrowState();
+            mrcuRef?.current?.handleArrowState();
             if (this.fastScrollingCounter) {
                 this.fastScrollingCounter.add();
                 this.fakeWheelStop();
@@ -435,15 +434,7 @@ export class GridBase<T extends Item<U>, U>
     }
 
     render() {
-        const {
-            horizontal,
-            className,
-            forwardGroup,
-            backwardGroup,
-            shouldShowMrcuForward,
-            shouldShowMrcuBackward,
-        } = this.props;
-
+        const { horizontal, className } = this.props;
         return (
             <Scroller
                 className={className}
@@ -452,17 +443,7 @@ export class GridBase<T extends Item<U>, U>
                 onKeyDown={this.onKeyDown}
                 horizontal={horizontal}
             >
-                <>{this.renderData()}</>
-                <MouseNavigation
-                    // @ts-ignore - needed to convert fallback (false) to interface
-                    ref={this.mrcuRef}
-                    getMountingPoint={() => this.scroller.current!.wrapRef}
-                    horizontal={horizontal}
-                    forward={forwardGroup}
-                    backward={backwardGroup}
-                    shouldShowMrcuForward={shouldShowMrcuForward}
-                    shouldShowMrcuBackward={shouldShowMrcuBackward}
-                />
+                {this.renderData()}
             </Scroller>
         );
     }

package/packages/grid/src/Base/index.tizen.tv.ts

@@ -0,0 +1 @@
+export { GridBase } from './Base.mouse';

package/packages/grid/src/Base/index.webos.tv.ts

@@ -0,0 +1 @@
+export { GridBase } from './Base.mouse';

package/packages/grid/src/Base/index.webtv.ts

@@ -0,0 +1 @@
+export { GridBase } from './Base.mouse';

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

@@ -295,8 +295,6 @@ export class UnifiedGridController<T> implements IUnifiedGridController<T> {
     }
 
     focusToIndex(dataIndex: number, animate = false) {
-        const { grid } = this;
-        const base = grid.base.current!;
         const targetScrollIndex = this.itemIndexToScrollIndex(dataIndex);
         if (targetScrollIndex > this.scrollIndex) {
             this.adjustGroupsOffsetsForward(targetScrollIndex);
@@ -306,9 +304,8 @@ export class UnifiedGridController<T> implements IUnifiedGridController<T> {
         if (targetScrollIndex !== this.scrollIndex) {
             this.scroll(targetScrollIndex, animate);
         }
-        base.index = dataIndex;
+        this.grid.base.current!.index = dataIndex;
         this.focusCurrentItem();
-        base.mrcuRef.current?.handleArrowState();
     }
 
     protected focusScrollWrap() {

package/packages/list/src/Base/Base.mouse.tsx

@@ -0,0 +1,28 @@
+import { createRef, forwardRef, Reference } from '@24i/bigscreen-sdk/jsx';
+import { MouseNavigation } from '@24i/bigscreen-sdk/mouse-navigation';
+import { ListBase as Base, Props as ListProps } from './Base';
+import { Item } from '../types';
+
+export const ListBase = forwardRef(<T extends Item<U>, U>(props: ListProps<T, U>,
+    listRef: Reference<Base<T, U>>,
+) => {
+    const direction = props.horizontal ? 'horizontal' : 'vertical';
+    const mrcuRef = createRef<MouseNavigation>();
+    return (
+        <MouseNavigation
+            getMountingPoint={() => listRef.current!.scroller.current!.wrapRef}
+            direction={direction}
+            forward={props.mrcuForward || props.forward}
+            backward={props.mrcuBackward || props.backward}
+            shouldShowMrcuForward={props.shouldShowMrcuForward}
+            shouldShowMrcuBackward={props.shouldShowMrcuBackward}
+            ref={mrcuRef}
+        >
+            <Base
+                {...props}
+                mrcuRef={mrcuRef}
+                ref={listRef}
+            />
+        </MouseNavigation>
+    );
+});

package/packages/list/src/Base/Base.tsx

@@ -1,4 +1,5 @@
 import { createRef, Component, Reference, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { MouseNavigation } from '@24i/bigscreen-sdk/mouse-navigation';
 import { device } from '@24i/bigscreen-sdk/device';
 import { Scroller } from '@24i/bigscreen-sdk/scroller';
 import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
@@ -9,12 +10,8 @@ import {
     ICounter,
     createTimeout,
 } from '@24i/bigscreen-sdk/utils';
-import { MouseNavigation } from './MouseNavigation';
 import { FastFocusingOptimizer } from '../FastFocusingOptimizer/FastFocusingOptimizer';
 import { BasicProps, Item } from '../types';
-import {
-    MouseNavigation as IMouseNavigation,
-} from './interface';
 
 export type Props<T extends Item<U>, U> = BasicProps<T, U> & {
     forward: () => boolean,
@@ -24,6 +21,7 @@ export type Props<T extends Item<U>, U> = BasicProps<T, U> & {
     shouldShowMrcuForward?: () => boolean,
     shouldShowMrcuBackward?: () => boolean,
     adjustFocusFromTarget?: (itemRefIndex: number) => void,
+    mrcuRef?: Reference<MouseNavigation>;
     limit?: number,
     shouldApplySlowdown?: () => boolean,
 };
@@ -47,8 +45,6 @@ export class ListBase<T extends Item<U>, U>
 
     scrollerDom = createRef<HTMLDivElement>();
 
-    mrcuRef = createRef<IMouseNavigation>();
-
     itemRefs: Reference<T>[] = [];
 
     index = 0;
@@ -127,16 +123,15 @@ export class ListBase<T extends Item<U>, U>
 
     onWheel = (event: WheelEvent) => {
         const {
-            horizontal, forward, backward, shouldApplySlowdown,
+            forward, backward, mrcuRef, shouldApplySlowdown,
         } = this.props;
         let processed;
-        if (horizontal) return;
         if (event.deltaY > 0) processed = shouldApplySlowdown() || forward();
         else if (event.deltaY < 0) processed = shouldApplySlowdown() || backward();
         if (processed) {
             stopEvent(event);
             this.fastScrollingCounter?.add();
-            this.mrcuRef?.current?.handleArrowState();
+            mrcuRef?.current?.handleArrowState();
             this.fakeWheelStop();
         } else if (processed === false) {
             this.fastFocusingOptimizer.stop();
@@ -353,13 +348,7 @@ export class ListBase<T extends Item<U>, U>
                 onKeyDown={this.onKeyDown}
                 horizontal={horizontal}
             >
-                <>{this.renderData()}</>
-                <MouseNavigation
-                    // @ts-ignore - needed to convert fallback (false) to interface
-                    ref={this.mrcuRef}
-                    getMountingPoint={() => this.scroller.current!.wrapRef}
-                    {...this.props}
-                />
+                {this.renderData()}
             </Scroller>
         );
     }

package/packages/list/src/Base/index.tizen.tv.ts

@@ -0,0 +1 @@
+export { ListBase } from './Base.mouse';

package/packages/list/src/Base/index.webos.tv.ts

@@ -0,0 +1 @@
+export { ListBase } from './Base.mouse';

package/packages/list/src/Base/index.webtv.ts

@@ -0,0 +1 @@
+export { ListBase } from './Base.mouse';

package/packages/list/src/interface.ts

@@ -1,12 +1,10 @@
 import { Component, Reference } from '@24i/bigscreen-sdk/jsx';
 import { IFocusable } from '@24i/bigscreen-sdk/focus';
 import { SharedProps, SharedVariedProps, Item } from './types';
-import { ListBase } from './Base';
 
 export interface List<
     T extends Item<U>, U, V extends SharedProps<T, U> = SharedProps<T, U>,
 > extends IFocusable, Component<V> {
-    base: Reference<ListBase<T, U>>,
     appendData(data: U[]): void,
     prependData(data: U[]): void,
     scrollTo(index: number): void,

package/packages/mouse-navigation/src/MouseNavigation.tsx

@@ -8,8 +8,8 @@ type Props = {
     children: JSX.Element;
     getMountingPoint: () => Reference<HTMLElement>;
     direction: Direction;
-    forward: () => any;
-    backward: () => any;
+    forward: () => void;
+    backward: () => void;
     shouldShowMrcuForward?: () => boolean;
     shouldShowMrcuBackward?: () => boolean;
 };

package/utils/create-export-maps/src/__tests__/createExportMaps.spec.ts

@@ -37,14 +37,14 @@ describe('createExportMaps', () => {
         createExportMaps();
         expect(writeFileSync).toHaveBeenCalledWith(
             expect.stringContaining('package.json'),
-            `${JSON.stringify({
+            JSON.stringify({
                 name: 'mock-root-package',
                 exports: {
                     './adobe-heartbeat': './packages/adobe-heartbeat/src/index.ts',
                     './animations/mock': './packages/animations/src/__mocks__/JSAnimations.ts',
                     './animations': './packages/animations/src/index.ts',
                 }
-            }, null, 4)}\n`,
+            }, null, 4),
         );
     });
 });

package/utils/create-export-maps/src/createExportMaps.ts

@@ -52,7 +52,7 @@ const createPackageJsonMapping = () => {
         exports[`./${exportAlias}`] = `./packages/${exportPath}`;
     });
     (packageJson.exports as Record<string, string>) = exports;
-    fs.writeFileSync(resolve('./package.json'), `${JSON.stringify(packageJson, null, 4)}\n`);
+    fs.writeFileSync(resolve('./package.json'), JSON.stringify(packageJson, null, 4));
 };
 
 export const createExportMaps = () => {

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

@@ -1,58 +0,0 @@
-import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
-import { MouseNavigation as MouseNavigationBase } from '@24i/bigscreen-sdk/mouse-navigation';
-import { device } from '@24i/bigscreen-sdk/device';
-import {
-    MouseNavigationProps as Props,
-    MouseNavigation as IMouseNavigation,
-} from '../interface';
-
-export class MouseNavigation extends Component<Props> implements IMouseNavigation {
-    private readonly div = createRef<HTMLDivElement>();
-
-    private readonly base = createRef<MouseNavigationBase>();
-
-    componentDidMount() {
-        if (device.isMouseUsed()) {
-            this.renderArrows();
-        }
-    }
-
-    handleArrowState() {
-        this.base?.current?.handleArrowState();
-    }
-
-    renderArrows() {
-        const {
-            horizontal,
-            forward,
-            backward,
-            shouldShowMrcuForward,
-            shouldShowMrcuBackward,
-            getMountingPoint,
-        } = this.props;
-
-        const direction = horizontal ? 'horizontal' : 'vertical';
-
-        this.appendMount(
-            <div ref={this.div} className="mouse-navigation">
-                <MouseNavigationBase
-                    // @ts-ignore - needed to convert fallback (false) to interface
-                    ref={this.base}
-                    getMountingPoint={() => this.div}
-                    direction={direction}
-                    forward={forward}
-                    backward={backward}
-                    shouldShowMrcuForward={shouldShowMrcuForward}
-                    shouldShowMrcuBackward={shouldShowMrcuBackward}
-                >
-                    {null as unknown as JSX.Element}
-                </MouseNavigationBase>
-            </div>,
-            getMountingPoint(),
-        );
-    }
-
-    render() {
-        return null;
-    }
-}

package/packages/grid/src/Base/MouseNavigation/MouseNavigationFallback.ts

@@ -1,4 +0,0 @@
-import { MouseNavigationProps as Props } from '../interface';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const MouseNavigation = (props: Props) => false as unknown as JSX.Element;

package/packages/grid/src/Base/MouseNavigation/index.tizen.tv.ts

@@ -1 +0,0 @@
-export { MouseNavigation } from './MouseNavigation';

package/packages/grid/src/Base/MouseNavigation/index.ts

@@ -1 +0,0 @@
-export { MouseNavigation } from './MouseNavigationFallback';

package/packages/grid/src/Base/MouseNavigation/index.webos.tv.ts

@@ -1 +0,0 @@
-export { MouseNavigation } from './MouseNavigation';

package/packages/grid/src/Base/MouseNavigation/index.webtv.ts

@@ -1 +0,0 @@
-export { MouseNavigation } from './MouseNavigation';

package/packages/grid/src/Base/interface.ts

@@ -1,47 +0,0 @@
-import { Reference, Component } from '@24i/bigscreen-sdk/jsx';
-
-export type MouseNavigationProps = {
-    /**
-      * Function to call on the press of the right arrow.
-      */
-    forward(): boolean,
-    /**
-     * Function to call on the press of the left arrow.
-     */
-    backward(): boolean,
-    /**
-      * Function to call on the press of the down arrow.
-      */
-    forwardGroup?(): boolean,
-    /**
-      * Function to call on the press of the up arrow.
-      */
-    backwardGroup?(): boolean,
-    /**
-      * Function which determines whether to show the forward arrow.
-      */
-    shouldShowMrcuForward?(): boolean,
-    /**
-      * Function which determines whether to show the backward arrow.
-      */
-    shouldShowMrcuBackward?(): boolean,
-    /**
-     * Returns a reference to the element where your `children` should be rendered.
-     */
-    getMountingPoint(): Reference<HTMLElement>;
-    /**
-     * Property determines whether navigation is horizontal.
-     */
-    horizontal?: boolean,
-};
-
-export interface MouseNavigation extends Component<MouseNavigationProps> {
-    /**
-      * Function to disable showing an arrow in the given direction.
-      */
-    handleArrowState(): void,
-}
-
-export interface MouseNavigationComponent {
-    new (props: MouseNavigationProps): MouseNavigation,
-}

package/packages/list/src/Base/MouseNavigation/MouseNavigation.tsx

@@ -1,58 +0,0 @@
-import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
-import { MouseNavigation as MouseNavigationBase } from '@24i/bigscreen-sdk/mouse-navigation';
-import { device } from '@24i/bigscreen-sdk/device';
-import {
-    MouseNavigationProps as Props,
-    MouseNavigation as IMouseNavigation,
-} from '../interface';
-
-export class MouseNavigation extends Component<Props> implements IMouseNavigation {
-    private readonly div = createRef<HTMLDivElement>();
-
-    private readonly base = createRef<MouseNavigationBase>();
-
-    componentDidMount() {
-        if (device.isMouseUsed()) {
-            this.renderArrows();
-        }
-    }
-
-    handleArrowState() {
-        this.base?.current?.handleArrowState();
-    }
-
-    renderArrows() {
-        const {
-            horizontal,
-            forward,
-            backward,
-            shouldShowMrcuForward,
-            shouldShowMrcuBackward,
-            getMountingPoint,
-        } = this.props;
-
-        const direction = horizontal ? 'horizontal' : 'vertical';
-
-        this.appendMount(
-            <div ref={this.div} className="mouse-navigation">
-                <MouseNavigationBase
-                    // @ts-ignore - needed to convert fallback (false) to interface
-                    ref={this.base}
-                    getMountingPoint={() => this.div}
-                    direction={direction}
-                    forward={forward}
-                    backward={backward}
-                    shouldShowMrcuForward={shouldShowMrcuForward}
-                    shouldShowMrcuBackward={shouldShowMrcuBackward}
-                >
-                    {null as unknown as JSX.Element}
-                </MouseNavigationBase>
-            </div>,
-            getMountingPoint(),
-        );
-    }
-
-    render() {
-        return null;
-    }
-}

package/packages/list/src/Base/MouseNavigation/MouseNavigationFallback.ts

@@ -1,4 +0,0 @@
-import { MouseNavigationProps as Props } from '../interface';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const MouseNavigation = (props: Props) => false as unknown as JSX.Element;

package/packages/list/src/Base/MouseNavigation/index.tizen.tv.ts

@@ -1 +0,0 @@
-export { MouseNavigation } from './MouseNavigation';

package/packages/list/src/Base/MouseNavigation/index.ts

@@ -1 +0,0 @@
-export { MouseNavigation } from './MouseNavigationFallback';

package/packages/list/src/Base/MouseNavigation/index.webos.tv.ts

@@ -1 +0,0 @@
-export { MouseNavigation } from './MouseNavigation';

package/packages/list/src/Base/MouseNavigation/index.webtv.ts

@@ -1 +0,0 @@
-export { MouseNavigation } from './MouseNavigation';

package/packages/list/src/Base/interface.ts

@@ -1,39 +0,0 @@
-import { Reference, Component } from '@24i/bigscreen-sdk/jsx';
-
-export type MouseNavigationProps = {
-    /**
-      * Function to call on the press of the right arrow.
-      */
-    forward(): boolean,
-    /**
-      * Function to call on the press of the left arrow.
-      */
-    backward(): boolean,
-    /**
-      * Function which determines whether to show the forward arrow.
-      */
-    shouldShowMrcuForward?(): boolean,
-    /**
-      * Function which determines whether to show the backward arrow.
-      */
-    shouldShowMrcuBackward?(): boolean,
-    /**
-     * Returns a reference to the element where your `children` should be rendered.
-     */
-    getMountingPoint(): Reference<HTMLElement>;
-    /**
-     * Property determines whether navigation is horizontal.
-     */
-    horizontal?: boolean,
-};
-
-export interface MouseNavigation extends Component<MouseNavigationProps> {
-    /**
-      * Function to disable showing an arrow in the given direction.
-      */
-    handleArrowState(): void,
-}
-
-export interface MouseNavigationComponent {
-    new (props: MouseNavigationProps): MouseNavigation,
-}