@24i/bigscreen-sdk 1.0.38 → 1.0.40-alpha.2687

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

@@ -1,392 +1,392 @@
-import { createRef, Component, Reference, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-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 { 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,
-    backward: () => boolean,
-    mrcuForward?: () => void,
-    mrcuBackward?: () => void,
-    shouldShowMrcuForward?: () => boolean,
-    shouldShowMrcuBackward?: () => boolean,
-    adjustFocusFromTarget?: (itemRefIndex: number) => void,
-    shouldApplySlowdown?: () => boolean,
-    limit?: number,
-};
-
-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;
-
-const PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS = 2;
-
-export class ListBase<T extends Item<U>, U>
-    extends Component<Props<T, U>> {
-    scroller = createRef<Scroller>();
-
-    scrollerDom = createRef<HTMLDivElement>();
-
-    mrcuRef = createRef<IMouseNavigation>();
-
-    itemRefs: Reference<T>[] = [];
-
-    index = 0;
-
-    data: U[];
-
-    fastScrollingCounter: ICounter | null = null;
-
-    fastFocusingOptimizer: FastFocusingOptimizer;
-
-    wheelStopTimeout = createTimeout();
-
-    isAnimatedScrollRunning = false;
-
-    isFastScrolling = false;
-
-    preventBlurCounter = 0;
-
-    static defaultProps = {
-        className: '',
-        adjustFocusFromTarget: noop,
-        fastFocusingOptimization: false,
-        shouldApplySlowdown: () => false,
-        preventBlurOnLongPress: {},
-    };
-
-    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);
-        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);
-    }
-
-    onKeyDown = (event: KeyboardEvent) => {
-        const {
-            horizontal, forward, backward, shouldApplySlowdown,
-        } = this.props;
-        this.preventBlurCounter += 1;
-        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();
-            if (this.shouldPreventBlur(event)) stopEvent(event);
-        }
-    };
-
-    onKeyUp = () => {
-        this.stopFastScrolling();
-        this.fastFocusingOptimizer.stop();
-    };
-
-    onGlobalKeyUp = () => {
-        this.preventBlurCounter = 0;
-    };
-
-    onWheel = (event: WheelEvent) => {
-        const {
-            horizontal, forward, backward, 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();
-            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();
-    }
-
-    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))
-        ));
-    }
-
-    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,
-            mrcuMountingPoint, mrcuForward, mrcuBackward, forward, backward,
-        } = this.props;
-        return (
-            <Scroller
-                className={className}
-                ref={this.scroller}
-                domRef={this.scrollerDom}
-                onKeyDown={this.onKeyDown}
-                horizontal={horizontal}
-            >
-                <>{this.renderData()}</>
-                <MouseNavigation
-                    // @ts-ignore - needed to convert fallback (false) to interface
-                    ref={this.mrcuRef}
-                    getMountingPoint={() => mrcuMountingPoint || this.scroller.current!.wrapRef}
-                    {...this.props}
-                    forward={mrcuForward || forward}
-                    backward={mrcuBackward || backward}
-                />
-            </Scroller>
-        );
-    }
-}
+import { createRef, Component, Reference, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+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 { 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,
+    backward: () => boolean,
+    mrcuForward?: () => void,
+    mrcuBackward?: () => void,
+    shouldShowMrcuForward?: () => boolean,
+    shouldShowMrcuBackward?: () => boolean,
+    adjustFocusFromTarget?: (itemRefIndex: number) => void,
+    shouldApplySlowdown?: () => boolean,
+    limit?: number,
+};
+
+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;
+
+const PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS = 2;
+
+export class ListBase<T extends Item<U>, U>
+    extends Component<Props<T, U>> {
+    scroller = createRef<Scroller>();
+
+    scrollerDom = createRef<HTMLDivElement>();
+
+    mrcuRef = createRef<IMouseNavigation>();
+
+    itemRefs: Reference<T>[] = [];
+
+    index = 0;
+
+    data: U[];
+
+    fastScrollingCounter: ICounter | null = null;
+
+    fastFocusingOptimizer: FastFocusingOptimizer;
+
+    wheelStopTimeout = createTimeout();
+
+    isAnimatedScrollRunning = false;
+
+    isFastScrolling = false;
+
+    preventBlurCounter = 0;
+
+    static defaultProps = {
+        className: '',
+        adjustFocusFromTarget: noop,
+        fastFocusingOptimization: false,
+        shouldApplySlowdown: () => false,
+        preventBlurOnLongPress: {},
+    };
+
+    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);
+        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);
+    }
+
+    onKeyDown = (event: KeyboardEvent) => {
+        const {
+            horizontal, forward, backward, shouldApplySlowdown,
+        } = this.props;
+        this.preventBlurCounter += 1;
+        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();
+            if (this.shouldPreventBlur(event)) stopEvent(event);
+        }
+    };
+
+    onKeyUp = () => {
+        this.stopFastScrolling();
+        this.fastFocusingOptimizer.stop();
+    };
+
+    onGlobalKeyUp = () => {
+        this.preventBlurCounter = 0;
+    };
+
+    onWheel = (event: WheelEvent) => {
+        const {
+            horizontal, forward, backward, 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();
+            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();
+    }
+
+    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))
+        ));
+    }
+
+    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,
+            mrcuMountingPoint, mrcuForward, mrcuBackward, forward, backward,
+        } = this.props;
+        return (
+            <Scroller
+                className={className}
+                ref={this.scroller}
+                domRef={this.scrollerDom}
+                onKeyDown={this.onKeyDown}
+                horizontal={horizontal}
+            >
+                <>{this.renderData()}</>
+                <MouseNavigation
+                    // @ts-ignore - needed to convert fallback (false) to interface
+                    ref={this.mrcuRef}
+                    getMountingPoint={() => mrcuMountingPoint || this.scroller.current!.wrapRef}
+                    {...this.props}
+                    forward={mrcuForward || forward}
+                    backward={mrcuBackward || backward}
+                />
+            </Scroller>
+        );
+    }
+}