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, 15 insertions, 2 deletions

diff --git a/src/components/organisms/forms/search-form/search-form.test.tsx b/src/components/organisms/forms/search-form/search-form.test.tsx
index d1fdfa9..8b4379b 100644
--- a/src/components/organisms/forms/search-form/search-form.test.tsx
+++ b/src/components/organisms/forms/search-form/search-form.test.tsx
@@ -1,7 +1,8 @@
 import { describe, expect, it, jest } from '@jest/globals';
 import { userEvent } from '@testing-library/user-event';
-import { render, screen as rtlScreen } from '../../../../../tests/utils';
-import { SearchForm } from './search-form';
+import type { Ref } from 'react';
+import { act, render, screen as rtlScreen } from '../../../../../tests/utils';
+import { SearchForm, type SearchFormRef } from './search-form';
 
 describe('SearchForm', () => {
   it('renders a search input with a submit button', () => {
@@ -36,4 +37,16 @@ describe('SearchForm', () => {
     expect(onSubmit).toHaveBeenCalledTimes(1);
     expect(onSubmit).toHaveBeenCalledWith({ query });
   });
+
+  it('can give focus to the search input', () => {
+    const ref: Ref<SearchFormRef> = { current: null };
+
+    render(<SearchForm ref={ref} />);
+
+    act(() => {
+      ref.current?.focus();
+    });
+
+    expect(rtlScreen.getByRole('searchbox')).toHaveFocus();
+  });
 });