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

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

@@ -1,5 +1,4 @@
 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';
@@ -10,8 +9,12 @@ 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,
@@ -21,7 +24,6 @@ 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,
 };
@@ -45,6 +47,8 @@ export class ListBase<T extends Item<U>, U>
 
     scrollerDom = createRef<HTMLDivElement>();
 
+    mrcuRef = createRef<IMouseNavigation>();
+
     itemRefs: Reference<T>[] = [];
 
     index = 0;
@@ -123,15 +127,16 @@ export class ListBase<T extends Item<U>, U>
 
     onWheel = (event: WheelEvent) => {
         const {
-            forward, backward, mrcuRef, shouldApplySlowdown,
+            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();
-            mrcuRef?.current?.handleArrowState();
+            this.mrcuRef?.current?.handleArrowState();
             this.fakeWheelStop();
         } else if (processed === false) {
             this.fastFocusingOptimizer.stop();
@@ -348,7 +353,13 @@ export class ListBase<T extends Item<U>, U>
                 onKeyDown={this.onKeyDown}
                 horizontal={horizontal}
             >
-                {this.renderData()}
+                <>{this.renderData()}</>
+                <MouseNavigation
+                    // @ts-ignore - needed to convert fallback (false) to interface
+                    ref={this.mrcuRef}
+                    getMountingPoint={() => this.scroller.current!.wrapRef}
+                    {...this.props}
+                />
             </Scroller>
         );
     }

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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,4 @@
+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

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

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

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+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,
+}

package/packages/list/src/BasicList/BasicList.tsx

@@ -103,7 +103,10 @@ export class BasicList<T extends Item<U>, U>
 
     shouldShowMrcuForward = () => {
         const { visibleItems, data } = this.props;
-        return this.controller.scrollIndex < data.length - 1 - visibleItems + VISIBLE_ITEMS_OFFSET;
+        return (
+            this.controller.scrollIndex < data.length - 1 - visibleItems + VISIBLE_ITEMS_OFFSET
+            && data.length > visibleItems - 2
+        );
     };
 
     shouldShowMrcuBackward = () => this.controller.scrollIndex > 0;

package/packages/list/src/EdgeOffsetList/EdgeOffsetList.tsx

@@ -93,11 +93,12 @@ export class EdgeOffsetList<T extends Item<U>, U>
     };
 
     shouldShowMrcuForward = () => {
-        const { edgeOffset, visibleItems } = this.props;
+        const { data, edgeOffset, visibleItems } = this.props;
         const { scrollIndex } = this.controller;
-        const list = this.base.current!;
+
         return (
-            scrollIndex < list.data.length - visibleItems + VISIBLE_ITEMS_OFFSET - edgeOffset
+            scrollIndex < data.length - visibleItems + VISIBLE_ITEMS_OFFSET - edgeOffset
+            && data.length > visibleItems - 2
         );
     };
 

package/packages/list/src/FirstOnlyList/FirstOnlyList.tsx

@@ -70,9 +70,9 @@ export class FirstOnlyList<T extends Item<U>, U>
     };
 
     shouldShowMrcuForward = () => {
-        const { data } = this.props;
+        const { data, visibleItems } = this.props;
         const list = this.base.current!;
-        return list.index < data.length - 1;
+        return list.index < data.length - 1 && data.length > visibleItems - 2;
     };
 
     shouldShowMrcuBackward = () => {

package/packages/list/src/FirstOnlyVariedList/FirstOnlyVariedList.tsx

@@ -80,9 +80,9 @@ export class FirstOnlyVariedList<T extends Item<U>, U> extends Component<Props<T
     };
 
     shouldShowMrcuForward = () => {
-        const { data } = this.props;
+        const { data, visibleItems } = this.props;
         const list = this.base.current!;
-        return list.index < data.length - 1;
+        return list.index < data.length - 1 && data.length > visibleItems - 2;
     };
 
     shouldShowMrcuBackward = () => {

package/packages/list/src/FixedToEndList/FixedToEndList.tsx

@@ -76,9 +76,9 @@ export class FixedToEndList<T extends Item<U>, U>
     };
 
     shouldShowMrcuForward = () => {
-        const { visibleItems } = this.props;
+        const { data, visibleItems } = this.props;
         const list = this.base.current!;
-        return list.index <= list.data.length - visibleItems + 1;
+        return list.index <= data.length - visibleItems + 1 && data.length > visibleItems - 2;
     };
 
     shouldShowMrcuBackward = () => this.controller.scrollIndex > 0;

package/packages/list/src/interface.ts

@@ -1,10 +1,12 @@
 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/logger/README.md

@@ -55,7 +55,7 @@ the output would be:
 ## Logger Manager
 
 Logger Manager is used for managing loggers. We are able to add individual loggers to the Logger Manager and perform various operations on them.
-All loggers that we want to add to the Logger Manager should inherit from the [LoggerBase](./src/loggers/LoggerBase/README.md) abstract class.
+All loggers that we want to add to the Logger Manager should inherit from the [LoggerBase](./src/loggers/LoggerBase/README) abstract class.
 
 ### Methods
 

package/packages/menu/src/MenuAndContentContainer/MenuAndContentContainer.tsx

@@ -116,7 +116,9 @@ export class MenuAndContentContainer<T extends string = string>
     isMenuAvailable() {
         const { router: { current: router } } = this.props;
         const scene = router?.getActiveRoute()?.component.current as SceneWithMenuAvailability;
-        return !!scene.constructor.isMenuEnabled;
+        const { isMenuEnabled } = scene.constructor;
+        if (typeof isMenuEnabled === 'function') return isMenuEnabled();
+        return !!isMenuEnabled;
     }
 
     /**

package/packages/menu/src/MenuAndContentContainer/interface.ts

@@ -83,7 +83,7 @@ export type SceneWithMenuAvailability = IRoute & {
         /**
          * static flag - true for menu is enabled, undefined (missing) or false for disabled.
          */
-        isMenuEnabled?: boolean,
+        isMenuEnabled?: boolean | (() => boolean),
     }
 };
 

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

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

package/packages/scroll-text/src/Base.tsx

@@ -78,6 +78,10 @@ export class ScrollTextBase extends Component<Props> implements IFocusable {
         if (processed) stopEvent(event);
     };
 
+    onMouseEnter = () => {
+        this.focus({ preventScroll: true });
+    };
+
     updateArrowNavigation(enable: boolean) {
         if (enable) {
             removeClass(this.arrowNavRef.current!.domRef, DISABLED_CLASS);
@@ -118,6 +122,7 @@ export class ScrollTextBase extends Component<Props> implements IFocusable {
                 className={className}
                 ref={this.domRef}
                 onKeyDown={this.onKeyDown}
+                onMouseEnter={this.onMouseEnter}
                 tabIndex={0}
             >
                 <Scroller

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),
+            }, null, 4)}\n`,
         );
     });
 });

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));
+    fs.writeFileSync(resolve('./package.json'), `${JSON.stringify(packageJson, null, 4)}\n`);
 };
 
 export const createExportMaps = () => {

package/packages/focus/src/__test__/candidate.spec.tsx

@@ -1,245 +0,0 @@
-import { Component, createRef, removeNode } from '@24i/bigscreen-sdk/jsx';
-import { shallow, MountedComponent } from '@24i/bigscreen-sdk/jsx/test-utils';
-import {
-    focusCandidate,
-    setFocusCandidate,
-    setActiveElementAsFocusCandidate,
-    setNextFocusCandidate,
-    setCandidateFallback,
-    getLastCandidate,
-    getCandidateStack,
-    clearCandidateStack,
-} from '../candidate';
-
-class MockComponent extends Component<{}> {
-    wrapperRef = createRef<HTMLDivElement>();
-
-    focus(options?: FocusOptions) {
-        this.wrapperRef.current!.focus(options);
-    }
-
-    render() {
-        return <div tabIndex={0} ref={this.wrapperRef} />;
-    }
-}
-
-describe('Focus candidate', () => {
-    let elementStructure: MountedComponent<HTMLDivElement>;
-    const refs = {
-        testElement: createRef<HTMLDivElement>(),
-        testComponent1: createRef<MockComponent>(),
-        testComponent2: createRef<MockComponent>(),
-    };
-
-    beforeEach(() => {
-        elementStructure = shallow<HTMLDivElement>(
-            <div tabIndex={0}>
-                <div
-                    ref={refs.testElement}
-                    tabIndex={0}
-                    className="test-element"
-                />
-                <MockComponent ref={refs.testComponent1} />
-                <MockComponent ref={refs.testComponent2} />
-            </div>,
-        );
-    });
-
-    afterEach(() => {
-        jest.clearAllMocks();
-        clearCandidateStack();
-        elementStructure.unmount();
-    });
-
-    it('should register a candidate', () => {
-        refs.testElement.current!.focus();
-        setActiveElementAsFocusCandidate();
-        expect(getLastCandidate()).toBe(refs.testElement.current!);
-    });
-
-    it('should register a manual candidate', () => {
-        setFocusCandidate(refs.testComponent1.current!);
-        expect(getLastCandidate()).toBe(refs.testComponent1.current!);
-    });
-
-    it('should register the next candidate', () => {
-        setNextFocusCandidate(refs.testComponent1.current!);
-        expect(getLastCandidate()).toBe(refs.testComponent1.current!);
-    });
-
-    it('should not register the same candidates twice', () => {
-        refs.testElement.current!.focus();
-        setActiveElementAsFocusCandidate();
-        setActiveElementAsFocusCandidate();
-        expect(getCandidateStack()).toEqual([
-            refs.testElement.current!,
-        ]);
-    });
-
-    it('should the focus candidate', () => {
-        elementStructure.ref().focus();
-        setActiveElementAsFocusCandidate();
-        refs.testElement.current!.focus();
-        focusCandidate();
-        expect(document.activeElement).toBe(elementStructure.ref());
-    });
-
-    it('should fill and pop the candidate stack properly', () => {
-        elementStructure.ref().focus();
-        setActiveElementAsFocusCandidate();
-        refs.testElement.current!.focus();
-        setActiveElementAsFocusCandidate();
-        refs.testComponent1.current!.focus();
-        setActiveElementAsFocusCandidate();
-        refs.testComponent2.current!.focus();
-        setActiveElementAsFocusCandidate();
-        expect(getCandidateStack()).toEqual([
-            elementStructure.ref(),
-            refs.testElement.current!,
-            refs.testComponent1.current!.wrapperRef.current!,
-            refs.testComponent2.current!.wrapperRef.current!,
-        ]);
-        // the last registered is skipped, because it's the current activeElement
-        // so the method should be called only 3x
-        focusCandidate();
-        focusCandidate();
-        focusCandidate();
-        expect(getCandidateStack()).toEqual([]);
-    });
-
-    it('should focus candidates during stack popping', () => {
-        elementStructure.ref().focus();
-        setActiveElementAsFocusCandidate();
-        refs.testElement.current!.focus();
-        setActiveElementAsFocusCandidate();
-        refs.testComponent1.current!.focus();
-        setActiveElementAsFocusCandidate();
-        refs.testComponent2.current!.focus();
-        focusCandidate();
-        expect(document.activeElement).toBe(refs.testComponent1.current!.wrapperRef.current!);
-        focusCandidate();
-        expect(document.activeElement).toBe(refs.testElement.current!);
-        focusCandidate();
-        expect(document.activeElement).toBe(elementStructure.ref());
-    });
-
-    it('should work with the next candidate', () => {
-        elementStructure.ref().focus();
-        setActiveElementAsFocusCandidate();
-        setNextFocusCandidate(refs.testElement.current!);
-        refs.testElement.current!.focus();
-        focusCandidate();
-        expect(document.activeElement).toBe(elementStructure.ref());
-    });
-
-    it('should work with the candidate as a component', () => {
-        refs.testComponent1.current!.focus();
-        setNextFocusCandidate(refs.testComponent1.current!);
-        refs.testComponent2.current!.focus();
-        setNextFocusCandidate(refs.testComponent2.current!);
-        expect(getCandidateStack()).toEqual([
-            refs.testComponent1.current!,
-            refs.testComponent2.current!,
-        ]);
-        // last candidate shoul'd not be focused
-        // because last focused candidate can't be currently focused element
-        focusCandidate();
-        expect(document.activeElement).toBe(refs.testComponent1.current!.wrapperRef.current!);
-    });
-
-    it('should work with the candidate as a reference', () => {
-        refs.testComponent1.current!.focus();
-        setNextFocusCandidate(refs.testComponent1);
-        refs.testComponent2.current!.focus();
-        setNextFocusCandidate(refs.testComponent2);
-        expect(getCandidateStack()).toEqual([
-            refs.testComponent1,
-            refs.testComponent2,
-        ]);
-        focusCandidate();
-        expect(document.activeElement).toBe(refs.testComponent1.current!.wrapperRef.current!);
-    });
-
-    it('should work with the candidate as multiple types and focus only unique elements', () => {
-        refs.testElement.current!.focus();
-        setActiveElementAsFocusCandidate();
-        refs.testComponent1.current!.focus();
-        setNextFocusCandidate(refs.testComponent1);
-        refs.testComponent2.current!.focus();
-        setNextFocusCandidate(refs.testComponent2.current!);
-        expect(getCandidateStack()).toEqual([
-            refs.testElement.current!,
-            refs.testComponent1,
-            refs.testComponent2.current!,
-        ]);
-        focusCandidate();
-        expect(document.activeElement).toBe(refs.testComponent1.current!.wrapperRef.current!);
-        focusCandidate();
-        expect(document.activeElement).toBe(refs.testElement.current!);
-    });
-
-    it('should work with the next candidate as a component', () => {
-        refs.testComponent1.current!.focus();
-        setFocusCandidate(refs.testComponent1.current!);
-        refs.testComponent2.current!.focus();
-        setNextFocusCandidate(refs.testComponent2.current!);
-        expect(getCandidateStack()).toEqual([
-            refs.testComponent1.current!,
-            refs.testComponent2.current!,
-        ]);
-        focusCandidate();
-        expect(document.activeElement).toBe(refs.testComponent1.current!.wrapperRef.current!);
-    });
-
-    it('should not focus an unavailable candidate', () => {
-        elementStructure.ref().focus();
-        setActiveElementAsFocusCandidate();
-        refs.testElement.current!.focus();
-        setActiveElementAsFocusCandidate();
-        refs.testComponent1.current!.focus();
-        setFocusCandidate(refs.testComponent1.current!);
-
-        refs.testElement.current!.style.display = 'none';
-        removeNode(refs.testComponent1.current!.wrapperRef);
-
-        focusCandidate();
-        expect(document.activeElement).toBe(elementStructure.ref());
-    });
-
-    it('should set and work with a candidate fallback', () => {
-        setCandidateFallback(elementStructure.ref());
-
-        refs.testElement.current!.focus();
-        setActiveElementAsFocusCandidate();
-        refs.testComponent1.current!.focus();
-        setActiveElementAsFocusCandidate();
-        refs.testComponent2.current!.focus();
-        setActiveElementAsFocusCandidate();
-
-        refs.testElement.current!.style.display = 'none';
-        removeNode(refs.testComponent1.current!.wrapperRef);
-        removeNode(refs.testComponent2.current!.wrapperRef);
-
-        focusCandidate();
-        expect(document.activeElement).toBe(elementStructure.ref());
-    });
-
-    it('should clear the candidate stack', () => {
-        elementStructure.ref().focus();
-        setActiveElementAsFocusCandidate();
-        refs.testElement.current!.focus();
-        setActiveElementAsFocusCandidate();
-        refs.testComponent1.current!.focus();
-        setActiveElementAsFocusCandidate();
-
-        expect(getCandidateStack()).toEqual([
-            elementStructure.ref(),
-            refs.testElement.current!,
-            refs.testComponent2.current!.wrapperRef.current!,
-        ]);
-
-        clearCandidateStack();
-
-        expect(getCandidateStack()).toEqual([]);
-    });
-});

package/packages/focus/src/__test__/focusFirstExisting.spec.tsx

@@ -1,21 +0,0 @@
-import { focusFirstExisting } from '../focusFirstExisting';
-
-describe('focusFirstExisting', () => {
-    const mockFocus1 = jest.fn();
-    const mockFocus2 = jest.fn();
-
-    it('should properly focus references', () => {
-        focusFirstExisting(
-            { current: { focus: mockFocus1 } },
-            { current: { focus: mockFocus2 } },
-        )();
-        expect(mockFocus1).toHaveBeenCalledTimes(1);
-        expect(mockFocus2).toHaveBeenCalledTimes(0);
-        focusFirstExisting(
-            { current: null },
-            { current: { focus: mockFocus2 } },
-        )();
-        expect(mockFocus1).toHaveBeenCalledTimes(1);
-        expect(mockFocus2).toHaveBeenCalledTimes(1);
-    });
-});

package/packages/focus/src/__test__/refocusAfterHashChange.spec.tsx

@@ -1,41 +0,0 @@
-import { createRef } from '@24i/bigscreen-sdk/jsx';
-import { shallow } from '@24i/bigscreen-sdk/jsx/test-utils';
-import { refocusAfterHashChange } from '../refocusAfterHashChange';
-
-jest.useFakeTimers();
-
-describe('refocusAfterHashChange', () => {
-    const wrapper = createRef<HTMLDivElement>();
-    const elementInsideWrapper = createRef<HTMLDivElement>();
-    const elementOutsideWrapper = createRef<HTMLDivElement>();
-    shallow(
-        <div>
-            <div ref={wrapper}>
-                <div ref={elementInsideWrapper} tabIndex={0} />
-            </div>
-            <div ref={elementOutsideWrapper} tabIndex={0} />
-        </div>,
-    );
-
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    it('should refocus active element inside wrapper', () => {
-        elementInsideWrapper.current!.focus();
-        const activeElement = document.activeElement as HTMLElement;
-        const spyOnFocus = jest.spyOn(activeElement, 'focus');
-        refocusAfterHashChange(wrapper);
-        jest.runAllTimers();
-        expect(spyOnFocus).toHaveBeenCalledTimes(1);
-    });
-
-    it('should not refocus active element outside wrapper', () => {
-        elementOutsideWrapper.current!.focus();
-        const activeElement = document.activeElement as HTMLElement;
-        const spyOnFocus = jest.spyOn(activeElement, 'focus');
-        refocusAfterHashChange(wrapper);
-        jest.runAllTimers();
-        expect(spyOnFocus).toHaveBeenCalledTimes(0);
-    });
-});