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

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

@@ -1,492 +1,492 @@
-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 { 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,
-    backward: () => boolean,
-    forwardGroup: () => boolean,
-    backwardGroup: () => boolean,
-    mrcuForward?: () => void,
-    mrcuBackward?: () => void,
-    shouldShowMrcuForward?: () => boolean,
-    shouldShowMrcuBackward?: () => boolean,
-    adjustFocusFromTarget?: (itemRefIndex: number, groupRefIndex: number) => void,
-    shouldApplySlowdown?: () => boolean,
-    horizontal?: boolean,
-    limit?: number,
-};
-
-const isForward = (event: KeyboardEvent, horizontal: boolean | undefined) => {
-    if (horizontal) return device.isDirectionDown(event);
-    return device.isDirectionRight(event);
-};
-
-const isBackward = (event: KeyboardEvent, horizontal: boolean | undefined) => {
-    if (horizontal) return device.isDirectionUp(event);
-    return device.isDirectionLeft(event);
-};
-
-const isFwGroup = (event: KeyboardEvent, horizontal: boolean | undefined) => {
-    if (!horizontal) return device.isDirectionDown(event);
-    return device.isDirectionRight(event);
-};
-
-const isBwGroup = (event: KeyboardEvent, horizontal: boolean | undefined) => {
-    if (!horizontal) return device.isDirectionUp(event);
-    return device.isDirectionLeft(event);
-};
-
-const WHEEL_STOP_TIMEOUT = 500;
-
-const FAST_SCROLLING_TRIGGERED_AT = 2;
-
-const PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS = 2;
-
-export class GridBase<T extends Item<U>, U>
-    extends Component<Props<T, U>> {
-    scroller = createRef<Scroller>();
-
-    scrollerDom = createRef<HTMLDivElement>();
-
-    mrcuRef = createRef<IMouseNavigation>();
-
-    itemRefs: Reference<T>[] = [];
-
-    groupRefs: Reference<HTMLDivElement>[] = [];
-
-    index = 0;
-
-    data: U[];
-
-    fastScrollingCounter: ICounter | null = null;
-
-    fastFocusingOptimizer: FastFocusingOptimizer;
-
-    wheelStopTimeout = createTimeout();
-
-    isAnimatedScrollRunning = false;
-
-    isFastScrolling = false;
-
-    preventBlurCounter = 0;
-
-    static defaultProps = {
-        className: '',
-        horizontal: false,
-        adjustFocusFromTarget: noop,
-        onFocusChanged: noop,
-        fastFocusingOptimization: false,
-        shouldApplySlowdown: () => false,
-        preventBlurOnLongPress: {},
-    };
-
-    declare props: DeclareProps<Props<T, U>, typeof GridBase.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);
-    }
-
-    // eslint-disable-next-line sonarjs/cognitive-complexity
-    onKeyDown = (event: KeyboardEvent) => {
-        const {
-            horizontal, forward, backward, forwardGroup, backwardGroup, shouldApplySlowdown,
-        } = this.props;
-        this.preventBlurCounter += 1;
-        if (device.isMouseUsed()) this.adjustIndexFromTarget(event.target!);
-        let processed;
-        let processedGroup;
-        if (isForward(event, horizontal)) processed = shouldApplySlowdown() || forward();
-        else if (isBackward(event, horizontal)) processed = shouldApplySlowdown() || backward();
-        else if (isFwGroup(event, horizontal)) {
-            processed = shouldApplySlowdown() || forwardGroup();
-            processedGroup = processed;
-        } else if (isBwGroup(event, horizontal)) {
-            processed = shouldApplySlowdown() || backwardGroup();
-            processedGroup = processed;
-        }
-        if (processed) {
-            stopEvent(event);
-            if (processedGroup) {
-                this.fastFocusingOptimizer.onKeyDown();
-                if (this.fastScrollingCounter) {
-                    this.fastScrollingCounter.add();
-                    this.wheelStopTimeout.clear();
-                }
-            }
-        } 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 {
-            forwardGroup, backwardGroup, shouldApplySlowdown,
-        } = 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();
-            if (this.fastScrollingCounter) {
-                this.fastScrollingCounter.add();
-                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;
-    }
-
-    getGroupRefAtIndex(i: number): Reference<HTMLDivElement> {
-        const ref = this.groupRefs[i];
-        if (!ref) {
-            this.groupRefs[i] = createRef<HTMLDivElement>();
-            return this.groupRefs[i];
-        }
-        return ref;
-    }
-
-    getRefAtDataIndex(dataIndex: number): Reference<T> {
-        const refs = this.itemRefs.length;
-        return this.itemRefs[dataIndex % refs];
-    }
-
-    getItemsInGroup() {
-        const { rows, columns } = this.props;
-        return rows || columns || 0;
-    }
-
-    getVisibleGroups(): number {
-        const { visibleColumns, visibleRows } = this.props;
-        return visibleColumns || visibleRows || 0;
-    }
-
-    getMaxGroups(): number {
-        return Math.ceil(this.data.length / this.getItemsInGroup());
-    }
-
-    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;
-        this.wheelStopTimeout.clear();
-        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))
-            || (preventBlurOnLongPress.forwardGroup && isFwGroup(event, horizontal))
-            || (preventBlurOnLongPress.backwardGroup && isBwGroup(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';
-    }
-
-    wouldStayInTheSameGroup(offset: number) {
-        const { data } = this;
-        const itemsInGroup = this.getItemsInGroup();
-        if (this.index + offset >= data.length - itemsInGroup) {
-            const currentLinePosition = this.index % itemsInGroup;
-            const newLinePosition = (data.length - 1) % itemsInGroup;
-            return currentLinePosition < newLinePosition;
-        }
-        return false;
-    }
-
-    updateDataForward(offset: number) {
-        for (let i = 0; i < this.itemRefs.length; i++) {
-            this.updateItem(i, offset);
-        }
-    }
-
-    updateDataBackward(offset: number) {
-        for (let i = this.itemRefs.length - 1; i >= 0; i--) {
-            this.updateItem(i, offset);
-        }
-    }
-
-    updateItem(index: number, offset: number) {
-        const { data } = this;
-        const itemRef: Reference<Item<U>> = this.itemRefs[index];
-        if (!itemRef) return;
-        const dataItem = data[index + offset];
-        if (dataItem) {
-            itemRef.current!.show();
-            itemRef.current!.updateData(dataItem, offset + index);
-        } else {
-            itemRef.current!.hide();
-        }
-    }
-
-    focusCurrentItem(offset = 0) {
-        const { onFocusChanged } = this.props;
-        const item = this.itemRefs[this.index];
-        item.current!.focus({ preventScroll: true });
-        onFocusChanged(item, this.index + offset);
-    }
-
-    appendData(data: U[]) {
-        const { limit } = this.props;
-        const startingIndex = this.data.length;
-        const mountingPoint = this.scroller.current!.scrollRef;
-        const itemsInGroup = this.getItemsInGroup();
-        this.data = this.data.concat(...data);
-        if (this.itemRefs.length === limit! * itemsInGroup) return;
-        const newDataLength = this.data.length;
-        const itemsInLastGroup = startingIndex % itemsInGroup;
-        if (itemsInLastGroup !== 0) { // if === 0 the last group is full
-            const itemsToFillUpLastGroup = itemsInGroup - itemsInLastGroup;
-            const items = this.renderItemsFromTo(
-                startingIndex, Math.min(startingIndex + itemsToFillUpLastGroup, newDataLength) - 1,
-            );
-            this.appendMount(items, this.groupRefs[this.groupRefs.length - 1]);
-        }
-        let index = itemsInGroup * this.groupRefs.length;
-        const maxIndex = this.isLimited()
-            ? Math.min(newDataLength, limit! * itemsInGroup) - 1
-            : newDataLength - 1;
-        const groups: JSX.Element[] = [];
-        while (index < maxIndex) {
-            groups.push(this.renderGroupFromTo(
-                index,
-                Math.min(index + itemsInGroup, newDataLength - 1),
-                this.groupRefs.length,
-            ));
-            index += itemsInGroup;
-        }
-        this.appendMount(groups, mountingPoint);
-    }
-
-    prependData(data: U[]) {
-        const { limit } = this.props;
-        const oldDataLength = this.data.length;
-        const mountingPoint = this.scroller.current!.scrollRef;
-        const itemsInGroup = this.getItemsInGroup();
-        this.data = data.concat(...this.data);
-        const newDataLength = this.data.length;
-        if (this.itemRefs.length === limit! * itemsInGroup) return;
-        const itemsInLastGroup = oldDataLength % itemsInGroup;
-        if (itemsInLastGroup !== 0) { // if === 0 the last group is full
-            const itemsToFillUpLastGroup = itemsInGroup - itemsInLastGroup;
-            const items = this.renderItemsFromTo(
-                newDataLength - itemsToFillUpLastGroup,
-                newDataLength - 1,
-            );
-            this.appendMount(items, this.groupRefs[this.groupRefs.length - 1]);
-        }
-        let index = itemsInGroup * this.groupRefs.length;
-        const maxIndex = this.isLimited()
-            ? Math.min(newDataLength, limit! * itemsInGroup) - 1
-            : newDataLength - 1;
-        const groups: JSX.Element[] = [];
-        while (index < maxIndex) {
-            groups.push(this.renderGroupFromTo(
-                index,
-                Math.min(index + itemsInGroup, newDataLength - 1),
-                this.groupRefs.length,
-            ));
-            index += itemsInGroup;
-        }
-        this.appendMount(groups, mountingPoint);
-    }
-
-    private fakeWheelStop() {
-        this.wheelStopTimeout.set(this.stopFastScrolling, WHEEL_STOP_TIMEOUT);
-    }
-
-    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) {
-            if (this.isLimited()) {
-                const { adjustFocusFromTarget } = this.props;
-                adjustFocusFromTarget(foundIndex, Math.floor(foundIndex / this.getItemsInGroup()));
-            } else {
-                this.index = foundIndex;
-            }
-        }
-    }
-
-    private renderItemsFromTo(from: number, to: number) {
-        const { renderItem, horizontal } = this.props;
-        const reversed = from > to;
-        const diff = reversed ? -1 : 1;
-        const stopCondition = (current: number) => (reversed ? (current >= to) : (current <= to));
-        const renderedItems: JSX.Element[] = [];
-        const itemStyle: any = {
-            display: horizontal ? 'block' : 'inline-block',
-        };
-        for (let i = from; stopCondition(i); i += diff) {
-            const item = this.data[i];
-            renderedItems.push(
-                <div className="grid-group-item" style={itemStyle}>
-                    {renderItem(item, i, this.getRefAtIndex(i))}
-                </div>,
-            );
-        }
-        return renderedItems;
-    }
-
-    private renderGroupFromTo(from: number, to: number, groupIndex: number) {
-        const { horizontal } = this.props;
-        const groupStyle: any = {
-            display: !horizontal ? 'block' : 'inline-block',
-        };
-        if (horizontal) groupStyle.verticalAlign = 'top';
-        return (
-            <div
-                className="grid-group"
-                style={groupStyle}
-                ref={this.getGroupRefAtIndex(groupIndex)}
-            >
-                {this.renderItemsFromTo(from, to)}
-            </div>
-        );
-    }
-
-    private renderData(): JSX.Element[] {
-        const { limit } = this.props;
-        const { length } = this.data;
-        const itemsInGroup = this.getItemsInGroup();
-        const maxGroupCount = this.getMaxGroups();
-        const groupIndexStop = this.isLimited() ? Math.min(limit!, maxGroupCount) : maxGroupCount;
-        const renderedData: JSX.Element[] = [];
-        for (let i = 0; i < groupIndexStop; i++) {
-            const from = i * itemsInGroup;
-            const to = Math.min(from + itemsInGroup - 1, length - 1);
-            renderedData.push(this.renderGroupFromTo(from, to, i));
-        }
-        return renderedData;
-    }
-
-    render() {
-        const {
-            horizontal,
-            className,
-            forwardGroup,
-            backwardGroup,
-            shouldShowMrcuForward,
-            shouldShowMrcuBackward,
-        } = 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={() => this.scroller.current!.wrapRef}
-                    horizontal={horizontal}
-                    forward={forwardGroup}
-                    backward={backwardGroup}
-                    shouldShowMrcuForward={shouldShowMrcuForward}
-                    shouldShowMrcuBackward={shouldShowMrcuBackward}
-                />
-            </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 { 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,
+    backward: () => boolean,
+    forwardGroup: () => boolean,
+    backwardGroup: () => boolean,
+    mrcuForward?: () => void,
+    mrcuBackward?: () => void,
+    shouldShowMrcuForward?: () => boolean,
+    shouldShowMrcuBackward?: () => boolean,
+    adjustFocusFromTarget?: (itemRefIndex: number, groupRefIndex: number) => void,
+    shouldApplySlowdown?: () => boolean,
+    horizontal?: boolean,
+    limit?: number,
+};
+
+const isForward = (event: KeyboardEvent, horizontal: boolean | undefined) => {
+    if (horizontal) return device.isDirectionDown(event);
+    return device.isDirectionRight(event);
+};
+
+const isBackward = (event: KeyboardEvent, horizontal: boolean | undefined) => {
+    if (horizontal) return device.isDirectionUp(event);
+    return device.isDirectionLeft(event);
+};
+
+const isFwGroup = (event: KeyboardEvent, horizontal: boolean | undefined) => {
+    if (!horizontal) return device.isDirectionDown(event);
+    return device.isDirectionRight(event);
+};
+
+const isBwGroup = (event: KeyboardEvent, horizontal: boolean | undefined) => {
+    if (!horizontal) return device.isDirectionUp(event);
+    return device.isDirectionLeft(event);
+};
+
+const WHEEL_STOP_TIMEOUT = 500;
+
+const FAST_SCROLLING_TRIGGERED_AT = 2;
+
+const PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS = 2;
+
+export class GridBase<T extends Item<U>, U>
+    extends Component<Props<T, U>> {
+    scroller = createRef<Scroller>();
+
+    scrollerDom = createRef<HTMLDivElement>();
+
+    mrcuRef = createRef<IMouseNavigation>();
+
+    itemRefs: Reference<T>[] = [];
+
+    groupRefs: Reference<HTMLDivElement>[] = [];
+
+    index = 0;
+
+    data: U[];
+
+    fastScrollingCounter: ICounter | null = null;
+
+    fastFocusingOptimizer: FastFocusingOptimizer;
+
+    wheelStopTimeout = createTimeout();
+
+    isAnimatedScrollRunning = false;
+
+    isFastScrolling = false;
+
+    preventBlurCounter = 0;
+
+    static defaultProps = {
+        className: '',
+        horizontal: false,
+        adjustFocusFromTarget: noop,
+        onFocusChanged: noop,
+        fastFocusingOptimization: false,
+        shouldApplySlowdown: () => false,
+        preventBlurOnLongPress: {},
+    };
+
+    declare props: DeclareProps<Props<T, U>, typeof GridBase.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);
+    }
+
+    // eslint-disable-next-line sonarjs/cognitive-complexity
+    onKeyDown = (event: KeyboardEvent) => {
+        const {
+            horizontal, forward, backward, forwardGroup, backwardGroup, shouldApplySlowdown,
+        } = this.props;
+        this.preventBlurCounter += 1;
+        if (device.isMouseUsed()) this.adjustIndexFromTarget(event.target!);
+        let processed;
+        let processedGroup;
+        if (isForward(event, horizontal)) processed = shouldApplySlowdown() || forward();
+        else if (isBackward(event, horizontal)) processed = shouldApplySlowdown() || backward();
+        else if (isFwGroup(event, horizontal)) {
+            processed = shouldApplySlowdown() || forwardGroup();
+            processedGroup = processed;
+        } else if (isBwGroup(event, horizontal)) {
+            processed = shouldApplySlowdown() || backwardGroup();
+            processedGroup = processed;
+        }
+        if (processed) {
+            stopEvent(event);
+            if (processedGroup) {
+                this.fastFocusingOptimizer.onKeyDown();
+                if (this.fastScrollingCounter) {
+                    this.fastScrollingCounter.add();
+                    this.wheelStopTimeout.clear();
+                }
+            }
+        } 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 {
+            forwardGroup, backwardGroup, shouldApplySlowdown,
+        } = 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();
+            if (this.fastScrollingCounter) {
+                this.fastScrollingCounter.add();
+                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;
+    }
+
+    getGroupRefAtIndex(i: number): Reference<HTMLDivElement> {
+        const ref = this.groupRefs[i];
+        if (!ref) {
+            this.groupRefs[i] = createRef<HTMLDivElement>();
+            return this.groupRefs[i];
+        }
+        return ref;
+    }
+
+    getRefAtDataIndex(dataIndex: number): Reference<T> {
+        const refs = this.itemRefs.length;
+        return this.itemRefs[dataIndex % refs];
+    }
+
+    getItemsInGroup() {
+        const { rows, columns } = this.props;
+        return rows || columns || 0;
+    }
+
+    getVisibleGroups(): number {
+        const { visibleColumns, visibleRows } = this.props;
+        return visibleColumns || visibleRows || 0;
+    }
+
+    getMaxGroups(): number {
+        return Math.ceil(this.data.length / this.getItemsInGroup());
+    }
+
+    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;
+        this.wheelStopTimeout.clear();
+        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))
+            || (preventBlurOnLongPress.forwardGroup && isFwGroup(event, horizontal))
+            || (preventBlurOnLongPress.backwardGroup && isBwGroup(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';
+    }
+
+    wouldStayInTheSameGroup(offset: number) {
+        const { data } = this;
+        const itemsInGroup = this.getItemsInGroup();
+        if (this.index + offset >= data.length - itemsInGroup) {
+            const currentLinePosition = this.index % itemsInGroup;
+            const newLinePosition = (data.length - 1) % itemsInGroup;
+            return currentLinePosition < newLinePosition;
+        }
+        return false;
+    }
+
+    updateDataForward(offset: number) {
+        for (let i = 0; i < this.itemRefs.length; i++) {
+            this.updateItem(i, offset);
+        }
+    }
+
+    updateDataBackward(offset: number) {
+        for (let i = this.itemRefs.length - 1; i >= 0; i--) {
+            this.updateItem(i, offset);
+        }
+    }
+
+    updateItem(index: number, offset: number) {
+        const { data } = this;
+        const itemRef: Reference<Item<U>> = this.itemRefs[index];
+        if (!itemRef) return;
+        const dataItem = data[index + offset];
+        if (dataItem) {
+            itemRef.current!.show();
+            itemRef.current!.updateData(dataItem, offset + index);
+        } else {
+            itemRef.current!.hide();
+        }
+    }
+
+    focusCurrentItem(offset = 0) {
+        const { onFocusChanged } = this.props;
+        const item = this.itemRefs[this.index];
+        item.current!.focus({ preventScroll: true });
+        onFocusChanged(item, this.index + offset);
+    }
+
+    appendData(data: U[]) {
+        const { limit } = this.props;
+        const startingIndex = this.data.length;
+        const mountingPoint = this.scroller.current!.scrollRef;
+        const itemsInGroup = this.getItemsInGroup();
+        this.data = this.data.concat(...data);
+        if (this.itemRefs.length === limit! * itemsInGroup) return;
+        const newDataLength = this.data.length;
+        const itemsInLastGroup = startingIndex % itemsInGroup;
+        if (itemsInLastGroup !== 0) { // if === 0 the last group is full
+            const itemsToFillUpLastGroup = itemsInGroup - itemsInLastGroup;
+            const items = this.renderItemsFromTo(
+                startingIndex, Math.min(startingIndex + itemsToFillUpLastGroup, newDataLength) - 1,
+            );
+            this.appendMount(items, this.groupRefs[this.groupRefs.length - 1]);
+        }
+        let index = itemsInGroup * this.groupRefs.length;
+        const maxIndex = this.isLimited()
+            ? Math.min(newDataLength, limit! * itemsInGroup) - 1
+            : newDataLength - 1;
+        const groups: JSX.Element[] = [];
+        while (index < maxIndex) {
+            groups.push(this.renderGroupFromTo(
+                index,
+                Math.min(index + itemsInGroup, newDataLength - 1),
+                this.groupRefs.length,
+            ));
+            index += itemsInGroup;
+        }
+        this.appendMount(groups, mountingPoint);
+    }
+
+    prependData(data: U[]) {
+        const { limit } = this.props;
+        const oldDataLength = this.data.length;
+        const mountingPoint = this.scroller.current!.scrollRef;
+        const itemsInGroup = this.getItemsInGroup();
+        this.data = data.concat(...this.data);
+        const newDataLength = this.data.length;
+        if (this.itemRefs.length === limit! * itemsInGroup) return;
+        const itemsInLastGroup = oldDataLength % itemsInGroup;
+        if (itemsInLastGroup !== 0) { // if === 0 the last group is full
+            const itemsToFillUpLastGroup = itemsInGroup - itemsInLastGroup;
+            const items = this.renderItemsFromTo(
+                newDataLength - itemsToFillUpLastGroup,
+                newDataLength - 1,
+            );
+            this.appendMount(items, this.groupRefs[this.groupRefs.length - 1]);
+        }
+        let index = itemsInGroup * this.groupRefs.length;
+        const maxIndex = this.isLimited()
+            ? Math.min(newDataLength, limit! * itemsInGroup) - 1
+            : newDataLength - 1;
+        const groups: JSX.Element[] = [];
+        while (index < maxIndex) {
+            groups.push(this.renderGroupFromTo(
+                index,
+                Math.min(index + itemsInGroup, newDataLength - 1),
+                this.groupRefs.length,
+            ));
+            index += itemsInGroup;
+        }
+        this.appendMount(groups, mountingPoint);
+    }
+
+    private fakeWheelStop() {
+        this.wheelStopTimeout.set(this.stopFastScrolling, WHEEL_STOP_TIMEOUT);
+    }
+
+    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) {
+            if (this.isLimited()) {
+                const { adjustFocusFromTarget } = this.props;
+                adjustFocusFromTarget(foundIndex, Math.floor(foundIndex / this.getItemsInGroup()));
+            } else {
+                this.index = foundIndex;
+            }
+        }
+    }
+
+    private renderItemsFromTo(from: number, to: number) {
+        const { renderItem, horizontal } = this.props;
+        const reversed = from > to;
+        const diff = reversed ? -1 : 1;
+        const stopCondition = (current: number) => (reversed ? (current >= to) : (current <= to));
+        const renderedItems: JSX.Element[] = [];
+        const itemStyle: any = {
+            display: horizontal ? 'block' : 'inline-block',
+        };
+        for (let i = from; stopCondition(i); i += diff) {
+            const item = this.data[i];
+            renderedItems.push(
+                <div className="grid-group-item" style={itemStyle}>
+                    {renderItem(item, i, this.getRefAtIndex(i))}
+                </div>,
+            );
+        }
+        return renderedItems;
+    }
+
+    private renderGroupFromTo(from: number, to: number, groupIndex: number) {
+        const { horizontal } = this.props;
+        const groupStyle: any = {
+            display: !horizontal ? 'block' : 'inline-block',
+        };
+        if (horizontal) groupStyle.verticalAlign = 'top';
+        return (
+            <div
+                className="grid-group"
+                style={groupStyle}
+                ref={this.getGroupRefAtIndex(groupIndex)}
+            >
+                {this.renderItemsFromTo(from, to)}
+            </div>
+        );
+    }
+
+    private renderData(): JSX.Element[] {
+        const { limit } = this.props;
+        const { length } = this.data;
+        const itemsInGroup = this.getItemsInGroup();
+        const maxGroupCount = this.getMaxGroups();
+        const groupIndexStop = this.isLimited() ? Math.min(limit!, maxGroupCount) : maxGroupCount;
+        const renderedData: JSX.Element[] = [];
+        for (let i = 0; i < groupIndexStop; i++) {
+            const from = i * itemsInGroup;
+            const to = Math.min(from + itemsInGroup - 1, length - 1);
+            renderedData.push(this.renderGroupFromTo(from, to, i));
+        }
+        return renderedData;
+    }
+
+    render() {
+        const {
+            horizontal,
+            className,
+            forwardGroup,
+            backwardGroup,
+            shouldShowMrcuForward,
+            shouldShowMrcuBackward,
+        } = 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={() => this.scroller.current!.wrapRef}
+                    horizontal={horizontal}
+                    forward={forwardGroup}
+                    backward={backwardGroup}
+                    shouldShowMrcuForward={shouldShowMrcuForward}
+                    shouldShowMrcuBackward={shouldShowMrcuBackward}
+                />
+            </Scroller>
+        );
+    }
+}