refactor(components): replace items prop in Navbar component

* replace `items` prop with `children` prop: it is more readable this
way,
* handle navbar item state inside NavbarItem component: it avoid using
three differents states and their methods to do exactly the same thing
* remove useAutofocus hook since we can't use it anymore
* add `onActivation` and `activationHandlerDelay` prop to NavbarItem
component to be able to focus the search input only when the item is
activated (it replicates the functioning of useAutofocus hook)
* replace `ref` type in SearchForm component: it does not make sense to
use an input ref for a form. Instead I use useImperativeHandle to
provide different a focus method to the given ref.

1 files changed, 0 insertions, 79 deletions

diff --git a/src/utils/hooks/use-autofocus/use-autofocus.test.ts b/src/utils/hooks/use-autofocus/use-autofocus.test.ts
deleted file mode 100644
index 1a9a3be..0000000
--- a/src/utils/hooks/use-autofocus/use-autofocus.test.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import {
-  afterEach,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  jest,
-} from '@jest/globals';
-import { renderHook, screen as rtlScreen } from '@testing-library/react';
-import { useAutofocus } from './use-autofocus';
-
-describe('useAutofocus', () => {
-  // When less than 1ms, setTimeout use 1. Default delay is 0ms.
-  const defaultTimeoutDelay = 1;
-  const input = document.createElement('input');
-  input.type = 'text';
-
-  beforeEach(() => {
-    document.body.append(input);
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    document.body.removeChild(input);
-    jest.runOnlyPendingTimers();
-    jest.useRealTimers();
-  });
-
-  it('gives focus to the element without condition', () => {
-    const { result } = renderHook(() => useAutofocus<HTMLInputElement>());
-    result.current.current = input;
-
-    jest.advanceTimersByTime(defaultTimeoutDelay);
-
-    expect(rtlScreen.getByRole('textbox')).toHaveFocus();
-  });
-
-  it('can give focus to the element with custom delay', () => {
-    const delay = 2000;
-    const { result } = renderHook(() =>
-      useAutofocus<HTMLInputElement>({ delay })
-    );
-    result.current.current = input;
-
-    jest.advanceTimersByTime(defaultTimeoutDelay);
-
-    expect(rtlScreen.getByRole('textbox')).not.toHaveFocus();
-
-    jest.advanceTimersByTime(delay);
-
-    expect(rtlScreen.getByRole('textbox')).toHaveFocus();
-  });
-
-  it('can give focus to the element when the condition is met', () => {
-    const condition = jest.fn(() => true);
-    const { result } = renderHook(() =>
-      useAutofocus<HTMLInputElement>({ condition })
-    );
-    result.current.current = input;
-
-    jest.advanceTimersByTime(defaultTimeoutDelay);
-
-    expect(rtlScreen.getByRole('textbox')).toHaveFocus();
-    expect(condition).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not give focus to the element when the condition is not met', () => {
-    const condition = jest.fn(() => false);
-    const { result } = renderHook(() =>
-      useAutofocus<HTMLInputElement>({ condition })
-    );
-    result.current.current = input;
-
-    jest.advanceTimersByTime(defaultTimeoutDelay);
-
-    expect(rtlScreen.getByRole('textbox')).not.toHaveFocus();
-    expect(condition).toHaveBeenCalledTimes(1);
-  });
-});