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.

4 files changed, 0 insertions, 121 deletions

diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts
index 240a092..f3bfd75 100644
--- a/src/utils/hooks/index.ts
+++ b/src/utils/hooks/index.ts
@@ -1,6 +1,5 @@
 export * from './use-ackee';
 export * from './use-article';
-export * from './use-autofocus';
 export * from './use-boolean';
 export * from './use-breadcrumb';
 export * from './use-comments';
diff --git a/src/utils/hooks/use-autofocus/index.ts b/src/utils/hooks/use-autofocus/index.ts
deleted file mode 100644
index bb23089..0000000
--- a/src/utils/hooks/use-autofocus/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-autofocus';
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);
-  });
-});
diff --git a/src/utils/hooks/use-autofocus/use-autofocus.ts b/src/utils/hooks/use-autofocus/use-autofocus.ts
deleted file mode 100644
index 0d21a59..0000000
--- a/src/utils/hooks/use-autofocus/use-autofocus.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useCallback, useRef, type MutableRefObject } from 'react';
-import { useTimeout } from '../use-timeout';
-
-export type UseAutofocusCondition = () => boolean;
-
-export type UseAutofocusConfig = {
-  /**
-   * A condition to met before giving focus to the element.
-   */
-  condition?: UseAutofocusCondition;
-  /**
-   * A delay in ms before giving focus to the element.
-   */
-  delay?: number;
-};
-
-/**
- * React hook to give focus to an element automatically.
- *
- * @param {UseAutofocusConfig} [config] - A configuration object.
- * @returns {RefObject<T>} The element reference.
- */
-export const useAutofocus = <T extends HTMLElement>(
-  config?: UseAutofocusConfig
-): MutableRefObject<T | null> => {
-  const { condition, delay } = config ?? {};
-  const ref = useRef<T | null>(null);
-
-  const setFocus = useCallback(() => {
-    const shouldFocus = condition ? condition() : true;
-
-    if (ref.current && shouldFocus) {
-      ref.current.focus();
-    }
-  }, [condition]);
-
-  useTimeout(setFocus, delay);
-
-  return ref;
-};