feat(searchbox): Enhance search context and search box functionalities

- Add error and loading state to SearchContext to manage search status and error handling
- Update SearchBox to include InputHTMLAttributes for better flexibility in input handling
- Adjust useSearchBox hook to set error and loading states in SearchContext
- Restructure imports for better readability in search.context.tsx
- Reorder and adjust SearchBoxProps to move debounceDelay configuration
- Export necessary hooks and context from the search index file for unified module access

src/search/context/search.context.tsx

@@ -1,19 +1,36 @@
 import { SearchResponse } from '@bloomreach/discovery-web-sdk';
-import { Dispatch, PropsWithChildren, ReactElement, SetStateAction, createContext, useState } from 'react';
+import {
+  Dispatch,
+  PropsWithChildren,
+  ReactElement,
+  SetStateAction,
+  createContext,
+  useState,
+} from 'react';
 
 export type SearchContextType = {
+  error: unknown;
+  loading: boolean;
   searchResponse: SearchResponse | null;
+  setError: Dispatch<SetStateAction<unknown>>;
+  setLoading: Dispatch<SetStateAction<boolean>>;
   setSearchResponse: Dispatch<SetStateAction<SearchResponse | null>>;
 };
 
 export const SearchContext = createContext<SearchContextType>({
+  error: null,
+  loading: false,
   searchResponse: null,
+  setError: () => {},
+  setLoading: () => {},
   setSearchResponse: () => {},
 });
 
 export const SearchContextProvider = ({ children }: PropsWithChildren): ReactElement => {
   const [searchResponse, setSearchResponse] = useState<SearchResponse | null>(null);
-  const contextValue = { searchResponse, setSearchResponse };
+  const [error, setError] = useState<unknown>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const contextValue = { searchResponse, setSearchResponse, error, setError, loading, setLoading };
 
   return <SearchContext.Provider value={contextValue}>{children}</SearchContext.Provider>;
 };

src/search/index.ts

@@ -1,2 +1,5 @@
-export { SearchBox } from './search-box/search-box';
 export type { SearchBoxProps } from './search-box/search-box.types';
+export { SearchBox } from './search-box/search-box';
+export { useSearchBox } from './search-box/search-box.hook';
+export { useSearch } from './hooks/search.hook';
+export { SearchContext, SearchContextProvider, type SearchContextType } from './context/search.context';

src/search/search-box/search-box.hook.ts

@@ -44,7 +44,13 @@ export function useSearchBox(props: SearchBoxProps): UseSearchBox {
     if (response) {
       searchContext.setSearchResponse(response);
     }
-  }, [searchContext, response]);
+
+    if (error) {
+      searchContext.setError(error);
+    }
+
+    searchContext.setLoading(loading);
+  }, [searchContext, response, error, loading]);
 
   const changeHandler = useCallback(debouncedSetQuery, [debouncedSetQuery]);
 

src/search/search-box/search-box.tsx

@@ -1,5 +1,6 @@
 import cn from 'classnames';
-import { ForwardedRef, ReactElement, forwardRef } from 'react';
+import { forwardRef } from 'react';
+import type { ForwardedRef, InputHTMLAttributes, ReactElement } from 'react';
 
 import './search-box.scss';
 
@@ -56,7 +57,10 @@ import type { SearchBoxProps } from './search-box.types';
  * ```
  */
 export const SearchBox = forwardRef(
-  (props: SearchBoxProps, forwardedRef: ForwardedRef<HTMLInputElement> | null): ReactElement => {
+  (
+    props: SearchBoxProps & InputHTMLAttributes<HTMLInputElement>,
+    forwardedRef: ForwardedRef<HTMLInputElement> | null,
+  ): ReactElement => {
     const {
       children,
       className,

src/search/search-box/search-box.types.ts

@@ -7,12 +7,6 @@ export interface SearchBoxProps extends PropsWithChildren {
    */
   className?: string;
 
-  /**
-   * The number of miliseconds the search trigger should be debounced
-   * @default 500
-   */
-  debounceDelay?: number;
-
   /**
    * The Configuration for creating a Bloomreach search integration
    */
@@ -27,6 +21,11 @@ export interface SearchBoxProps extends PropsWithChildren {
    * The type of search.
    */
   searchType: SearchType;
+
+  /**
+   * The number of miliseconds the auto-search should be debounced
+   */
+  debounceDelay?: number;
 }
 
 /**