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, 3 insertions, 28 deletions

diff --git a/src/components/organisms/navbar/navbar.tsx b/src/components/organisms/navbar/navbar.tsx
index ee379e9..39f3c45 100644
--- a/src/components/organisms/navbar/navbar.tsx
+++ b/src/components/organisms/navbar/navbar.tsx
@@ -4,26 +4,8 @@ import {
   type ReactNode,
 } from 'react';
 import { List, type ListProps } from '../../atoms';
-import { NavbarItem, type NavbarItemProps } from './navbar-item';
 import styles from './navbar.module.scss';
 
-export type NavbarItemData = Pick<
-  NavbarItemProps,
-  | 'icon'
-  | 'id'
-  | 'isActive'
-  | 'label'
-  | 'modalHeading'
-  | 'modalVisibleFrom'
-  | 'onDeactivate'
-  | 'onToggle'
-  | 'showIconOnModal'
-> & {
-  contents: ReactNode;
-};
-
-export type NavbarItems = [NavbarItemData, NavbarItemData?, NavbarItemData?];
-
 export type NavbarProps = Omit<
   ListProps<false, false>,
   'children' | 'hideMarker' | 'isHierarchical' | 'isInline' | 'isOrdered'
@@ -34,25 +16,18 @@ export type NavbarProps = Omit<
    * The number of items should not exceed 3 because of the modal position on
    * small screens.
    */
-  items: NavbarItems;
+  children: ReactNode;
 };
 
 const NavbarWithRef: ForwardRefRenderFunction<HTMLUListElement, NavbarProps> = (
-  { className = '', items, ...props },
+  { children, className = '', ...props },
   ref
 ) => {
   const wrapperClass = `${styles.wrapper} ${className}`;
-  const navItems = items.filter(
-    (item): item is NavbarItemData => item !== undefined
-  );
 
   return (
     <List {...props} className={wrapperClass} hideMarker isInline ref={ref}>
-      {navItems.map(({ contents, ...item }) => (
-        <NavbarItem {...item} className={styles.item} key={item.id}>
-          {contents}
-        </NavbarItem>
-      ))}
+      {children}
     </List>
   );
 };