@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/list/README.md

@@ -0,0 +1,176 @@
+---
+id: README
+title: List
+hide_title: true
+sidebar_label: List
+---
+
+# List
+This package contains a variety of prepared lists with different focus/scroll
+behaviours and configuration. If you cannot find the list with your desired
+behaviour, feel free to add it. The interface for adding new behaviours is
+rather simple. Check one of the existing implementations for inspiration on
+how to do it.
+
+To programatically scroll to certain index, use:
+- `scrollTo(index)` - This method scrolls the list to given index as if the user moved there manually.
+So e.g. BasicList if you scroll to index 7 from index 0, it will be at the bottom. If you scroll to
+index 7 from index 20, it will be at the top. IMPORTANT: This function does not focus.
+
+Lists also support updating data with these two methods:
+- `appendData` - inserts new data at the end
+- `prependData` - inserts new data at the beginning
+
+## Importing List
+List package does not allow to import just the index file. Instead, please use
+the path import of the implementation that you require or the interface.
+```ts
+import { BasicList } from '@24i/bigscreen-sdk/list/Basic';
+import { FixedToEndList } from '@24i/bigscreen-sdk/list/FixedToEnd';
+import { CenteredList } from '@24i/bigscreen-sdk/list/Centered';
+import { FirstOnlyList } from '@24i/bigscreen-sdk/list/FirstOnly';
+import { FirstOnlyVariedList } from '@24i/bigscreen-sdk/list/FirstOnlyVaried';
+import { EdgeOffsetList } from '@24i/bigscreen-sdk/list/EdgeOffset';
+import { Props, List, ListComponent, Item, ItemComponent } from '@24i/bigscreen-sdk/list/interface';
+```
+
+## Mouse support (MRCU)
+This component takes advantage of a MouseNavigation component and is
+automatically taking care of Mouse Support. This is enabled for 
+`web, tizen, and webOS`. For other platform it is disabled.
+
+## ListBase
+This is an underlying component used by all lists. It is also exported so you
+could use it in your project as well.
+
+**Props**
+- `data` - array of data to pass into items during render
+- `renderItem` - function that will render one item - (item, index, ref) - ref must be passed onto item
+- `visibleItems` - number of maximal visible items (including partially)
+- `horizontal` - sets List to horizontal mode (default is vertical)
+- `onFocusChanged` - optional callback that receives focused item and its index
+- `onScrollChanged` - optional callback that receives item and index of current scroll performed every time list is scrolled.
+- `animation` - optional AnimationConfiguration that is deep merged with default configuration of the list
+- `className` - optional, class name for wrap element
+- `animate` - optional, enables scrolling animation
+- `fastScrolling` - optional, enables fast scrolling on list
+- `fastFocusingOptimization` - optional, enables fast focusing optimization
+
+**Props provided by behaviour controlling component (actual list implementations)**
+- `limit` - optional limit to the number of rendered items
+- `forward` - function that is called when list should move in forward direction. Returns boolean whether it processed the move.
+- `backward` - function that is called when list should move in backward direction. Returns boolean whether it processed the move.
+
+The result in renderItem needs to implement one of these interfaces depending
+on your list type:
+
+## Item<Model> interface
+```ts
+focus: (options?: FocusOptions) => void,
+show: () => void,
+hide: () => void, // expects the item to still occupy layout, just not be visible (do not use `display: none`)
+updateData: (item: Model, index: number) => void, // change item content according to new model
+hasDom?: (target: HTMLElement) => boolean, // returns whether passed target is the dom representation of the item
+onFastScrolling?: (isFastScrolling: boolean) => void,
+```
+
+## List scrolling
+All lists consist of a finite number of item elements. In the basic and animated
+variant, those elements are moved from the left side of the list to the right
+side and vice versa. This creates a scrolling effect. There is an `updateData`
+method called on the items, so the content is properly changed during scrolling.
+There are situations, however, in which you can't use `updateData` method on the item,
+because the content is too complex for being updated, or it is not possible
+(for example the item is whole another List component). For these situations,
+there is a special wrapper item called `AttachDetachItem`. The item inside is not updated,
+but instead, it is rendered only once inside the wrapper item during scrolling.
+For more information check [AttachDetachItem](./AttachDetachItem/README.md) docs.
+
+## List fast scrolling
+List scrolling could be also optimized by reducing elements on items during
+scrolling. For this, fast scrolling could be enabled and list will call
+`onFastScrolling(true)` on each item when started and `onFastScrolling(false)`
+when finished. When enabled, fast scrolling on the animated list is turned on
+until the animation is finished.
+
+## List fast focusing
+List scrolling could be also optimized by preventing focusing items during
+scrolling. For this, fast focusing optimization could be enabled by setting
+`fastFocusingOptimization: true` in props. When enabled, it will not focus items
+during scrolling until the animation is finished or key up is emitted.
+
+## onFocusChanged and onScrollChanged
+`onFocusChanged` is called every time next item in list is focused, but after
+various optimization improvements, items are not focused step by step during scrolling.
+Because of this behavior, actions frequently used in onFocusChanged representing
+scroll change can't be used. For this purpose there is `onScrollChanged` callback,
+which is called every time list is performing scroll operation.
+
+## Prepared lists
+- Fixed item size lists
+    - [BasicList - (slow/animated)](./BasicList/README.md)
+    - [CenteredList - (slow/animated)](./CenteredList/README.md)
+    - [EdgeOffsetList - (slow/animated)](./EdgeOffsetList/README.md)
+    - [FirstOnlyList - (slow/animated)](./FirstOnlyList/README.md)
+    - [FixedToEndList - (slow/animated)](./FixedToEndList/README.md)
+- Variable item size lists
+    - [FirstOnlyVariedList - (slow/animated)](./FirstOnlyVariedList/README.md)
+
+## Usage (with BasicList example)
+```jsx
+<BasicList<Packshot, MovieModel>
+    ref={this.lists[categoryIndex]}
+    data={movies}
+    renderItem={(movie, index, ref) => (
+        <Packshot
+            ref={ref}
+            movie={movie}
+        />
+    )}
+    visibleItems={6}
+    firstScrollStep={150}
+    scrollStep={240}
+    horizontal
+/>
+```
+
+## AnimationConfiguration
+```ts
+type AnimationConfiguration = {
+    normal: {
+        time: number,
+        easing: EasingType,
+    },
+    fastLinear?: {
+        time: number,
+        startRatio: number,
+        endRatio?: number,
+    }
+    slowdownRatio?: number,
+}
+```
+
+### Properties
+- normal - main animation type used for scrolling
+- fastLinear - optional - linear animation type used during fast scrolling (when user holds a key
+and scroll with the list for longer period)
+- slowdownRatio - optional - number between 0 > and <= 1, determines how much scroll would be slowed down.
+Less the number, slower the scrolling. Undefined or 0 is unlimited scroll speed. Slowing down the scroll
+speed could improve overall animation performance in some cases.
+
+### fastLinear property
+List animation provides possibility of optimizing the animation during slow speeds and smoother
+the scrolling effect without easing in `normal` property interfering the movement.
+This is achieved by changing the ease of the animation to linear when the scroll is longer
+and user is moving the list further.
+`fastLinear` property have these settings:
+- time - duration of the animation, same as in `normal` property
+- startRatio - this number represents the threshold, when should linear animation start.
+Under the hood, threshold is one `scrollStep` (or an average item size in case of varied list variant).
+This number is basically multiplied by scrollStep number, so the linear animation will start,
+when the current scroll size is larger than `threshold * startRatio`. When the number is 1,
+threshold is exactly one scrollStep.
+- endRatio - optional - this number represents when the scroll animation should switch from fast linear back
+to normal. Threshold is the same as in `startRatio`, but animation will switch when scroll length is less
+than `threshold * startRatio`. Parameter is optional, so if it is not set, animation will finish in fast linear
+mode.

package/packages/list/src/AttachDetachItem/AttachDetachItem.tsx

@@ -0,0 +1,96 @@
+import {
+    Component,
+    createRef,
+    DeclareProps,
+    detachNode,
+    replaceNode,
+} from '@24i/bigscreen-sdk/jsx';
+import { getDisplayToggler } from '@24i/bigscreen-sdk/utils/displayToggler';
+import { isElementWrappedBy } from '@24i/bigscreen-sdk/utils/elementUtils';
+import { Item, AttachDetachItemData } from '../interface';
+
+type Props<T extends AttachDetachItemData<any, any>> = {
+    data: T,
+    index: number,
+    children: (data: T['data'], index: number, ref: T['ref']) => JSX.Element,
+    className?: string,
+};
+
+export class AttachDetachItem<
+    T extends AttachDetachItemData<any, any>,
+> extends Component<Props<T>> implements Item<T> {
+    div = createRef<HTMLDivElement>();
+
+    displayToggler = getDisplayToggler(this.div, false);
+
+    /* eslint-disable react/destructuring-assignment */
+    data: T = this.props.data;
+    /* eslint-enable react/destructuring-assignment */
+
+    isFastScrolling = false;
+
+    static defaultProps = {
+        className: 'attach-detach-item',
+    };
+
+    declare props: DeclareProps<Props<T>, typeof AttachDetachItem.defaultProps>;
+
+    handleFastScrolling() {
+        const { ref: { current } } = this.data;
+        if (current && typeof current.onFastScrolling === 'function') {
+            current.onFastScrolling(this.isFastScrolling);
+        }
+        this.data.isFastScrolling = this.isFastScrolling;
+    }
+
+    onFastScrolling(isFastScrolling: boolean) {
+        this.isFastScrolling = isFastScrolling;
+        this.handleFastScrolling();
+    }
+
+    focus(options?: FocusOptions) {
+        this.data.ref.current!.focus(options);
+    }
+
+    show() {
+        this.displayToggler.show();
+    }
+
+    hide() {
+        this.displayToggler.hide();
+    }
+
+    updateData(data: T, index: number) {
+        if (!this.data.node) {
+            this.data.node = this.div.current!.firstChild as HTMLDivElement;
+        }
+        const currentNode = this.data.node;
+        this.data = data;
+        if (!this.data.node) {
+            const { props: { children }, data: { data: itemData, ref } } = this;
+            detachNode(currentNode);
+            this.appendMount(children(itemData, index, ref), this.div);
+        } else if (this.data.node !== currentNode) {
+            replaceNode(this.data.node, currentNode);
+        }
+        if (this.data.isFastScrolling !== this.isFastScrolling) {
+            this.handleFastScrolling();
+        }
+    }
+
+    hasDom(element: HTMLElement) {
+        return isElementWrappedBy(element, this.div, true);
+    }
+
+    render() {
+        const {
+            props: { children, index, className },
+            data: { data: itemData, ref },
+        } = this;
+        return (
+            <div ref={this.div} className={className}>
+                {children(itemData, index, ref)}
+            </div>
+        );
+    }
+}

package/packages/list/src/AttachDetachItem/prepareAttachDetachItemData.ts

@@ -0,0 +1,13 @@
+import { createRef } from '@24i/bigscreen-sdk/jsx';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { AttachDetachItemData } from '../interface';
+
+export const prepareAttachDetachItemData = <T, U>(
+    data: U[],
+): AttachDetachItemData<T, U>[] => (
+    map(data, (itemData) => ({
+        data: itemData,
+        ref: createRef<T>(),
+        isFastScrolling: false,
+    }))
+);

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

@@ -0,0 +1,355 @@
+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';
+import {
+    noop,
+    stopEvent,
+    createCounter,
+    ICounter,
+    createTimeout,
+} from '@24i/bigscreen-sdk/utils';
+import { FastFocusingOptimizer } from '../FastFocusingOptimizer/FastFocusingOptimizer';
+import { BasicProps, Item } from '../types';
+
+export type Props<T extends Item<U>, U> = BasicProps<T, U> & {
+    forward: () => boolean,
+    backward: () => boolean,
+    mrcuForward?: () => void,
+    mrcuBackward?: () => void,
+    shouldShowMrcuForward?: () => boolean,
+    shouldShowMrcuBackward?: () => boolean,
+    adjustFocusFromTarget?: (itemRefIndex: number) => void,
+    mrcuRef?: Reference<MouseNavigation>;
+    limit?: number,
+    shouldApplySlowdown?: () => boolean,
+};
+
+const isForward = (event: KeyboardEvent, horizontal: boolean | undefined) => {
+    if (horizontal) return device.isDirectionRight(event);
+    return device.isDirectionDown(event);
+};
+
+const isBackward = (event: KeyboardEvent, horizontal: boolean | undefined) => {
+    if (horizontal) return device.isDirectionLeft(event);
+    return device.isDirectionUp(event);
+};
+
+const WHEEL_STOP_TIMEOUT = 500;
+const FAST_SCROLLING_TRIGGERED_AT = 2;
+
+export class ListBase<T extends Item<U>, U>
+    extends Component<Props<T, U>> {
+    scroller = createRef<Scroller>();
+
+    scrollerDom = createRef<HTMLDivElement>();
+
+    itemRefs: Reference<T>[] = [];
+
+    index = 0;
+
+    data: U[];
+
+    fastScrollingCounter: ICounter | null = null;
+
+    fastFocusingOptimizer: FastFocusingOptimizer;
+
+    wheelStopTimeout = createTimeout();
+
+    isAnimatedScrollRunning = false;
+
+    isFastScrolling = false;
+
+    static defaultProps = {
+        className: '',
+        adjustFocusFromTarget: noop,
+        fastFocusingOptimization: false,
+        shouldApplySlowdown: () => false,
+    };
+
+    declare props: DeclareProps<Props<T, U>, typeof ListBase.defaultProps>;
+
+    constructor(props: Props<T, U>) {
+        super(props);
+        const {
+            data, fastScrolling, fastFocusingOptimization,
+        } = this.props;
+        this.data = data;
+        this.fastFocusingOptimizer = new FastFocusingOptimizer(this, {
+            enabled: fastFocusingOptimization,
+        });
+        if (fastScrolling) {
+            this.fastScrollingCounter = createCounter({
+                triggerAt: FAST_SCROLLING_TRIGGERED_AT,
+                callback: this.startFastScrollingOnItems,
+            });
+        }
+    }
+
+    componentDidMount() {
+        this.scrollerDom.current!.addEventListener('wheel', this.onWheel);
+        this.scroller.current!.wrapRef.current!.addEventListener('keyup', this.onKeyUp);
+    }
+
+    componentWillUnmount() {
+        this.scrollerDom.current!.removeEventListener('wheel', this.onWheel);
+        this.scroller.current!.wrapRef.current!.removeEventListener('keyup', this.onKeyUp);
+    }
+
+    onKeyDown = (event: KeyboardEvent) => {
+        const {
+            horizontal, forward, backward, shouldApplySlowdown,
+        } = this.props;
+        this.fastFocusingOptimizer.onKeyDown();
+        if (device.isMouseUsed()) this.adjustIndexFromTarget(event.target!);
+
+        let processed;
+        if (isForward(event, horizontal)) processed = shouldApplySlowdown() || forward();
+        else if (isBackward(event, horizontal)) processed = shouldApplySlowdown() || backward();
+        if (processed) {
+            stopEvent(event);
+            this.fastScrollingCounter?.add();
+        } else if (processed === false) {
+            this.fastFocusingOptimizer.stop();
+            this.stopFastScrolling();
+        }
+    };
+
+    onKeyUp = () => {
+        this.stopFastScrolling();
+        this.fastFocusingOptimizer.stop();
+    };
+
+    onWheel = (event: WheelEvent) => {
+        const {
+            forward, backward, mrcuRef, shouldApplySlowdown,
+        } = this.props;
+        let processed;
+        if (event.deltaY > 0) processed = shouldApplySlowdown() || forward();
+        else if (event.deltaY < 0) processed = shouldApplySlowdown() || backward();
+        if (processed) {
+            stopEvent(event);
+            this.fastScrollingCounter?.add();
+            mrcuRef?.current?.handleArrowState();
+            this.fakeWheelStop();
+        } else if (processed === false) {
+            this.fastFocusingOptimizer.stop();
+            this.stopFastScrolling();
+        }
+    };
+
+    getRefAtIndex(i: number): Reference<T> {
+        const ref = this.itemRefs[i];
+        if (!ref) {
+            this.itemRefs[i] = createRef<T>();
+            return this.itemRefs[i];
+        }
+        return ref;
+    }
+
+    getRefAtDataIndex(dataIndex: number): Reference<T> {
+        const refs = this.itemRefs.length;
+        return this.itemRefs[dataIndex % refs];
+    }
+
+    startFastScrollingOnItems = () => {
+        if (this.isFastScrolling) return;
+        this.isFastScrolling = true;
+        forEach(this.itemRefs, (item: Reference<T>) => {
+            item.current!.onFastScrolling?.(true);
+        });
+    };
+
+    stopFastScrollingOnItems = () => {
+        if (!this.isFastScrolling) return;
+        this.isFastScrolling = false;
+        forEach(this.itemRefs, (item: Reference<T>) => {
+            item.current!.onFastScrolling?.(false);
+        });
+    };
+
+    stopFastScrolling() {
+        if (!this.fastScrollingCounter) return;
+        if (
+            this.isFastScrolling
+            && !this.isAnimatedScrollRunning
+        ) {
+            this.stopFastScrollingOnItems();
+        }
+        this.fastScrollingCounter.reset();
+    }
+
+    animatedScrollStarted() {
+        this.isAnimatedScrollRunning = true;
+    }
+
+    animatedScrollFinished() {
+        this.isAnimatedScrollRunning = false;
+        if (
+            this.isFastScrolling
+            && !this.fastScrollingCounter?.isTriggered()
+        ) {
+            this.stopFastScrollingOnItems();
+        }
+    }
+
+    isLimited() {
+        const { limit } = this.props;
+        return typeof limit === 'number';
+    }
+
+    hasFocus() {
+        const activeElement = document.activeElement as HTMLElement;
+        const itemsRefLength = this.itemRefs.length;
+        for (let i = 0; i < itemsRefLength; i++) {
+            const item = this.itemRefs[i].current;
+            if (item && item.hasDom && item.hasDom(activeElement)) return true;
+        }
+        return false;
+    }
+
+    private adjustIndexFromTarget(target: EventTarget) {
+        const foundIndex = this.itemRefs.findIndex((item) => (
+            typeof item.current!.hasDom === 'function'
+                ? item.current!.hasDom(target as HTMLElement)
+                : false
+        ));
+        if (foundIndex !== -1) {
+            const { adjustFocusFromTarget } = this.props;
+            if (this.isLimited() && typeof adjustFocusFromTarget === 'function') {
+                adjustFocusFromTarget(foundIndex);
+            } else {
+                this.index = foundIndex;
+            }
+        }
+    }
+
+    updateDataForward(dataOffset = 0) {
+        for (let i = 0; i < this.itemRefs.length; i++) {
+            this.updateItem(i, dataOffset);
+        }
+    }
+
+    updateDataBackward(dataOffset = 0) {
+        for (let i = this.itemRefs.length - 1; i >= 0; i--) {
+            this.updateItem(i, dataOffset);
+        }
+    }
+
+    updateItem(index: number, dataOffset: number) {
+        const item = this.itemRefs[index].current!;
+        const data = this.data[index + dataOffset];
+        if (data) {
+            item.updateData(data, dataOffset + index);
+            item.show();
+        } else {
+            item.hide();
+        }
+    }
+
+    appendData(data: U[]) {
+        const { limit } = this.props;
+        const startingIndex = this.data.length;
+        const mountingPoint = this.scroller.current!.scrollRef;
+        this.data = this.data.concat(...data);
+        if (!this.isLimited()) {
+            const renderedItems = this.renderItemsFromTo(startingIndex, this.data.length - 1);
+            this.appendMount(renderedItems, mountingPoint);
+        } else if (this.itemRefs.length < limit!) {
+            const max = Math.min(limit!, this.data.length);
+            const renderedItems = this.renderItemsFromTo(
+                startingIndex, max - 1,
+            );
+            this.appendMount(renderedItems, mountingPoint);
+        }
+    }
+
+    prependData(data: U[]) {
+        const { limit } = this.props;
+        const startingIndex = data.length;
+        const mountingPoint = this.scroller.current!.scrollRef;
+        this.data = data.concat(...this.data);
+        if (!this.isLimited()) {
+            this.index += startingIndex;
+            this.shiftItemRefsIndexes(startingIndex);
+            const renderedItems = this.renderItemsFromTo(0, startingIndex - 1);
+            this.mountBefore(renderedItems, {
+                current: mountingPoint.current!.firstChild,
+            });
+        } else if (this.itemRefs.length < limit!) {
+            const itemsToRender = Math.min(limit!, this.data.length) - this.itemRefs.length;
+            this.shiftItemRefsIndexes(itemsToRender);
+            const renderedItems = this.renderItemsFromTo(
+                data.length - itemsToRender, data.length - 1,
+            );
+            this.mountBefore(renderedItems, {
+                current: mountingPoint.current!.firstChild,
+            });
+        }
+    }
+
+    private fakeWheelStop() {
+        this.wheelStopTimeout.set(() => {
+            this.stopFastScrolling();
+        }, WHEEL_STOP_TIMEOUT);
+    }
+
+    private shiftItemRefsIndexes(diff: number) {
+        if (diff === 0) return;
+        const originalLastIndex = this.itemRefs.length - 1;
+        if (diff > 0) {
+            for (let i = originalLastIndex; i >= 0; i--) {
+                this.itemRefs[i + diff] = this.itemRefs[i];
+                // @ts-ignore - just a temporary before it gets populated
+                this.itemRefs[i] = undefined;
+            }
+        } else { // diff < 0
+            for (let i = 0; i <= originalLastIndex + diff; i++) {
+                this.itemRefs[i] = this.itemRefs[i + diff];
+                // @ts-ignore - just a temporary before it gets populated
+                this.itemRefs[i + diff] = undefined;
+            }
+            this.itemRefs.length = originalLastIndex + diff + 1;
+        }
+    }
+
+    private renderItemsFromTo(from: number, to: number) {
+        const { renderItem } = this.props;
+        const renderedData: JSX.Element[] = [];
+        for (let i = from; i <= to; i++) {
+            const item = this.data[i];
+            renderedData.push(renderItem(item, i, this.getRefAtIndex(i)));
+        }
+        return renderedData;
+    }
+
+    private renderData(): JSX.Element[] {
+        if (!this.isLimited()) return this.renderFullData();
+        return this.renderLimitedData();
+    }
+
+    private renderLimitedData(): JSX.Element[] {
+        const { limit } = this.props;
+        return this.renderItemsFromTo(0, Math.min(limit!, this.data.length) - 1);
+    }
+
+    private renderFullData(): JSX.Element[] {
+        return this.renderItemsFromTo(0, this.data.length - 1);
+    }
+
+    render() {
+        const { horizontal, className } = this.props;
+        return (
+            <Scroller
+                className={className}
+                ref={this.scroller}
+                domRef={this.scrollerDom}
+                onKeyDown={this.onKeyDown}
+                horizontal={horizontal}
+            >
+                {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.ts

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

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';