@inkeep/cxkit-primitives 0.5.37 → 0.5.39

package/dist/index.d.ts

@@ -55,6 +55,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Portal as Portal_2 } from '@radix-ui/react-portal';
 import { Primitive } from '@radix-ui/react-primitive';
 import { PropsWithChildren } from 'react';
+import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
@@ -318,8 +319,6 @@ export declare const aiSearchComponentIds: {
 
 declare type AnyString = string & {};
 
-declare const ASK_AI_TRIGGER_VALUE = "__ask_ai__";
-
 export declare type AttachmentItemContextValue = {
     attachment: MessageAttachment;
 };
@@ -431,6 +430,10 @@ export declare interface ChatProviderProps extends Pick<EmbeddedChatProviderProp
     children: React.ReactNode;
 }
 
+declare type Children = {
+    children?: React_2.ReactNode;
+};
+
 declare const Close: React_2.ForwardRefExoticComponent<DialogCloseProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 declare interface CodeProps {
@@ -443,6 +446,438 @@ declare interface CodeProps {
     onCopy?: (language: string, code: string) => void;
 }
 
+export declare const Command: React_2.ForwardRefExoticComponent<Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & {
+    /**
+     * Accessible label for this command menu. Not shown visibly.
+     */
+    label?: string;
+    /**
+     * Optionally set to `false` to turn off the automatic filtering and sorting.
+     * If `false`, you must conditionally render valid items based on the search query yourself.
+     */
+    shouldFilter?: boolean;
+    /**
+     * Custom filter function for whether each command menu item should matches the given search query.
+     * It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
+     * By default, uses the `command-score` library.
+     */
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    /**
+     * Optional default item value when it is initially rendered.
+     */
+    defaultValue?: string;
+    /**
+     * Optional default query when it is initially rendered.
+     */
+    defaultSearch?: string;
+    /**
+     * Optional controlled state of the selected command menu item.
+     */
+    value?: string;
+    /**
+     * Event handler called when the selected item of the menu changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Optionally set to `true` to turn on looping around when using the arrow keys.
+     */
+    loop?: boolean;
+    /**
+     * Optionally set to `true` to disable selection via pointer events.
+     */
+    disablePointerSelection?: boolean;
+    /**
+     * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
+     */
+    vimBindings?: boolean;
+} & React_2.RefAttributes<HTMLDivElement>> & {
+    List: React_2.ForwardRefExoticComponent<Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+        asChild?: boolean;
+    }, "ref"> & {
+        /**
+         * Accessible label for this List of suggestions. Not shown visibly.
+         */
+        label?: string;
+    } & React_2.RefAttributes<HTMLDivElement>>;
+    Item: React_2.ForwardRefExoticComponent<Children & Omit<Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+        asChild?: boolean;
+    }, "ref">, "value" | "disabled" | "onSelect"> & {
+        /** Whether this item is currently disabled. */
+        disabled?: boolean;
+        /** Event handler for when this item is selected, either via click or keyboard selection. */
+        onSelect?: (details: {
+            value: string;
+            trigger: "click" | "keyboard";
+        }) => void;
+        /**
+         * A unique value for this item.
+         * If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you _must_ provide a stable, unique `value`.
+         */
+        value?: string;
+        /** Optional keywords to match against when filtering. */
+        keywords?: string[];
+        /** Whether this item is forcibly rendered regardless of filtering. */
+        forceMount?: boolean;
+    } & React_2.RefAttributes<HTMLDivElement>>;
+    Input: React_2.ForwardRefExoticComponent<Omit<Omit<React_2.ClassAttributes<HTMLInputElement> & React_2.InputHTMLAttributes<HTMLInputElement> & {
+        asChild?: boolean;
+    }, "ref">, "value" | "type" | "onChange"> & {
+        /**
+         * Optional controlled state for the value of the search input.
+         */
+        value?: string;
+        /**
+         * Event handler called when the search value changes.
+         */
+        onValueChange?: (search: string) => void;
+    } & React_2.RefAttributes<HTMLInputElement>>;
+    Group: React_2.ForwardRefExoticComponent<Children & Omit<Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+        asChild?: boolean;
+    }, "ref">, "value" | "heading"> & {
+        /** Optional heading to render for this group. */
+        heading?: React_2.ReactNode;
+        /** If no heading is provided, you must provide a value that is unique for this group. */
+        value?: string;
+        /** Whether this group is forcibly rendered regardless of filtering. */
+        forceMount?: boolean;
+    } & React_2.RefAttributes<HTMLDivElement>>;
+    Separator: React_2.ForwardRefExoticComponent<Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+        asChild?: boolean;
+    }, "ref"> & {
+        /** Whether this separator should always be rendered. Useful if you disable automatic filtering. */
+        alwaysRender?: boolean;
+    } & React_2.RefAttributes<HTMLDivElement>>;
+    Dialog: React_2.ForwardRefExoticComponent<RadixDialog.DialogProps & Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+        asChild?: boolean;
+    }, "ref"> & {
+        /**
+         * Accessible label for this command menu. Not shown visibly.
+         */
+        label?: string;
+        /**
+         * Optionally set to `false` to turn off the automatic filtering and sorting.
+         * If `false`, you must conditionally render valid items based on the search query yourself.
+         */
+        shouldFilter?: boolean;
+        /**
+         * Custom filter function for whether each command menu item should matches the given search query.
+         * It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
+         * By default, uses the `command-score` library.
+         */
+        filter?: (value: string, search: string, keywords?: string[]) => number;
+        /**
+         * Optional default item value when it is initially rendered.
+         */
+        defaultValue?: string;
+        /**
+         * Optional default query when it is initially rendered.
+         */
+        defaultSearch?: string;
+        /**
+         * Optional controlled state of the selected command menu item.
+         */
+        value?: string;
+        /**
+         * Event handler called when the selected item of the menu changes.
+         */
+        onValueChange?: (value: string) => void;
+        /**
+         * Optionally set to `true` to turn on looping around when using the arrow keys.
+         */
+        loop?: boolean;
+        /**
+         * Optionally set to `true` to disable selection via pointer events.
+         */
+        disablePointerSelection?: boolean;
+        /**
+         * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
+         */
+        vimBindings?: boolean;
+    } & {
+        /** Provide a className to the Dialog overlay. */
+        overlayClassName?: string;
+        /** Provide a className to the Dialog content. */
+        contentClassName?: string;
+        /** Provide a custom element the Dialog should portal into. */
+        container?: HTMLElement;
+    } & React_2.RefAttributes<HTMLDivElement>>;
+    Empty: React_2.ForwardRefExoticComponent<Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+        asChild?: boolean;
+    }, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+    Loading: React_2.ForwardRefExoticComponent<Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+        asChild?: boolean;
+    }, "ref"> & {
+        /** Estimated progress of loading asynchronous options. */
+        progress?: number;
+        /**
+         * Accessible label for this loading progressbar. Not shown visibly.
+         */
+        label?: string;
+    } & React_2.RefAttributes<HTMLDivElement>>;
+};
+
+/**
+ * Renders the command menu in a Radix Dialog.
+ */
+export declare const CommandDialog: React_2.ForwardRefExoticComponent<RadixDialog.DialogProps & Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & {
+    /**
+     * Accessible label for this command menu. Not shown visibly.
+     */
+    label?: string;
+    /**
+     * Optionally set to `false` to turn off the automatic filtering and sorting.
+     * If `false`, you must conditionally render valid items based on the search query yourself.
+     */
+    shouldFilter?: boolean;
+    /**
+     * Custom filter function for whether each command menu item should matches the given search query.
+     * It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
+     * By default, uses the `command-score` library.
+     */
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    /**
+     * Optional default item value when it is initially rendered.
+     */
+    defaultValue?: string;
+    /**
+     * Optional default query when it is initially rendered.
+     */
+    defaultSearch?: string;
+    /**
+     * Optional controlled state of the selected command menu item.
+     */
+    value?: string;
+    /**
+     * Event handler called when the selected item of the menu changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Optionally set to `true` to turn on looping around when using the arrow keys.
+     */
+    loop?: boolean;
+    /**
+     * Optionally set to `true` to disable selection via pointer events.
+     */
+    disablePointerSelection?: boolean;
+    /**
+     * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
+     */
+    vimBindings?: boolean;
+} & {
+    /** Provide a className to the Dialog overlay. */
+    overlayClassName?: string;
+    /** Provide a className to the Dialog content. */
+    contentClassName?: string;
+    /** Provide a custom element the Dialog should portal into. */
+    container?: HTMLElement;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Automatically renders when there are no results for the search query.
+ */
+export declare const CommandEmpty: React_2.ForwardRefExoticComponent<Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare type CommandGroup = {
+    id: string;
+    forceMount?: boolean;
+};
+
+/**
+ * Group command menu items together with a heading.
+ * Grouped items are always shown together.
+ */
+export declare const CommandGroup: React_2.ForwardRefExoticComponent<Children & Omit<Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref">, "value" | "heading"> & {
+    /** Optional heading to render for this group. */
+    heading?: React_2.ReactNode;
+    /** If no heading is provided, you must provide a value that is unique for this group. */
+    value?: string;
+    /** Whether this group is forcibly rendered regardless of filtering. */
+    forceMount?: boolean;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Command menu input.
+ * All props are forwarded to the underyling `input` element.
+ */
+export declare const CommandInput: React_2.ForwardRefExoticComponent<Omit<Omit<React_2.ClassAttributes<HTMLInputElement> & React_2.InputHTMLAttributes<HTMLInputElement> & {
+    asChild?: boolean;
+}, "ref">, "value" | "type" | "onChange"> & {
+    /**
+     * Optional controlled state for the value of the search input.
+     */
+    value?: string;
+    /**
+     * Event handler called when the search value changes.
+     */
+    onValueChange?: (search: string) => void;
+} & React_2.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Command menu item. Becomes active on pointer enter or through keyboard navigation.
+ * Preferably pass a `value`, otherwise the value will be inferred from `children` or
+ * the rendered item's `textContent`.
+ */
+export declare const CommandItem: React_2.ForwardRefExoticComponent<Children & Omit<Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref">, "value" | "disabled" | "onSelect"> & {
+    /** Whether this item is currently disabled. */
+    disabled?: boolean;
+    /** Event handler for when this item is selected, either via click or keyboard selection. */
+    onSelect?: (details: {
+        value: string;
+        trigger: "click" | "keyboard";
+    }) => void;
+    /**
+     * A unique value for this item.
+     * If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you _must_ provide a stable, unique `value`.
+     */
+    value?: string;
+    /** Optional keywords to match against when filtering. */
+    keywords?: string[];
+    /** Whether this item is forcibly rendered regardless of filtering. */
+    forceMount?: boolean;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Contains `Item`, `Group`, and `Separator`.
+ * Use the `--cmdk-list-height` CSS variable to animate height based on the number of results.
+ */
+export declare const CommandList: React_2.ForwardRefExoticComponent<Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & {
+    /**
+     * Accessible label for this List of suggestions. Not shown visibly.
+     */
+    label?: string;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * You should conditionally render this with `progress` while loading asynchronous items.
+ */
+export declare const CommandLoading: React_2.ForwardRefExoticComponent<Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & {
+    /** Estimated progress of loading asynchronous options. */
+    progress?: number;
+    /**
+     * Accessible label for this loading progressbar. Not shown visibly.
+     */
+    label?: string;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+declare type CommandProps = Children & DivProps & {
+    /**
+     * Accessible label for this command menu. Not shown visibly.
+     */
+    label?: string;
+    /**
+     * Optionally set to `false` to turn off the automatic filtering and sorting.
+     * If `false`, you must conditionally render valid items based on the search query yourself.
+     */
+    shouldFilter?: boolean;
+    /**
+     * Custom filter function for whether each command menu item should matches the given search query.
+     * It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
+     * By default, uses the `command-score` library.
+     */
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    /**
+     * Optional default item value when it is initially rendered.
+     */
+    defaultValue?: string;
+    /**
+     * Optional default query when it is initially rendered.
+     */
+    defaultSearch?: string;
+    /**
+     * Optional controlled state of the selected command menu item.
+     */
+    value?: string;
+    /**
+     * Event handler called when the selected item of the menu changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Optionally set to `true` to turn on looping around when using the arrow keys.
+     */
+    loop?: boolean;
+    /**
+     * Optionally set to `true` to disable selection via pointer events.
+     */
+    disablePointerSelection?: boolean;
+    /**
+     * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
+     */
+    vimBindings?: boolean;
+};
+
+export declare const CommandRoot: React_2.ForwardRefExoticComponent<Children & Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & {
+    /**
+     * Accessible label for this command menu. Not shown visibly.
+     */
+    label?: string;
+    /**
+     * Optionally set to `false` to turn off the automatic filtering and sorting.
+     * If `false`, you must conditionally render valid items based on the search query yourself.
+     */
+    shouldFilter?: boolean;
+    /**
+     * Custom filter function for whether each command menu item should matches the given search query.
+     * It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
+     * By default, uses the `command-score` library.
+     */
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    /**
+     * Optional default item value when it is initially rendered.
+     */
+    defaultValue?: string;
+    /**
+     * Optional default query when it is initially rendered.
+     */
+    defaultSearch?: string;
+    /**
+     * Optional controlled state of the selected command menu item.
+     */
+    value?: string;
+    /**
+     * Event handler called when the selected item of the menu changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Optionally set to `true` to turn on looping around when using the arrow keys.
+     */
+    loop?: boolean;
+    /**
+     * Optionally set to `true` to disable selection via pointer events.
+     */
+    disablePointerSelection?: boolean;
+    /**
+     * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
+     */
+    vimBindings?: boolean;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * A visual and semantic separator between items or groups.
+ * Visible when the search query is empty or `alwaysRender` is true, hidden otherwise.
+ */
+export declare const CommandSeparator: React_2.ForwardRefExoticComponent<Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & {
+    /** Whether this separator should always be rendered. Useful if you disable automatic filtering. */
+    alwaysRender?: boolean;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
 export declare type ComponentID = keyof typeof componentIDs;
 
 export declare const componentIDs: {
@@ -798,6 +1233,8 @@ export declare interface CustomIconProps {
 
 export declare const dataAttr: (guard: boolean | undefined) => Booleanish;
 
+export declare const defaultFilter: CommandProps['filter'];
+
 declare type DefaultInkeepAIChatSettings = typeof defaultInkeepAIChatSettings;
 
 declare const defaultInkeepAIChatSettings: {
@@ -1114,6 +1551,8 @@ declare interface DialogTriggerProps extends PrimitiveButtonProps {
 
 declare type DismissableLayerProps = React_2.ComponentPropsWithoutRef<typeof DismissableLayer>;
 
+declare type DivProps = React_2.ComponentPropsWithoutRef<typeof Primitive.div>;
+
 export declare namespace EmbeddedChatPrimitive {
     export {
         EmbeddedChatPrimitiveWrapper,
@@ -1976,7 +2415,6 @@ declare const EmbeddedSearchInputIcon: ForwardRefExoticComponent< PolymorphicPro
 
 export declare namespace EmbeddedSearchPrimitive {
     export {
-        ASK_AI_TRIGGER_VALUE,
         EmbeddedSearchPrimitiveWrapper,
         EmbeddedSearchPrimitiveRoot,
         PrimitiveContent,
@@ -3266,35 +3704,7 @@ declare const PrimitiveResultsScrollArea: ForwardRefExoticComponent< Polymorphic
 
 declare const PrimitiveRoot: ForwardRefExoticComponent< PolymorphicProps & Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "_id"> & Partial<Pick< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "_id">>>;
 
-declare const PrimitiveRoot_2: ForwardRefExoticComponent< PolymorphicProps & Omit<{
-    children?: React.ReactNode;
-} & Omit< ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
-    asChild?: boolean;
-}, "ref"> & {
-    label?: string;
-    shouldFilter?: boolean;
-    filter?: (value: string, search: string, keywords?: string[]) => number;
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    loop?: boolean;
-    disablePointerSelection?: boolean;
-    vimBindings?: boolean;
-} & RefAttributes<HTMLDivElement>, "_id"> & Partial<Pick<{
-    children?: React.ReactNode;
-} & Omit< ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
-    asChild?: boolean;
-}, "ref"> & {
-    label?: string;
-    shouldFilter?: boolean;
-    filter?: (value: string, search: string, keywords?: string[]) => number;
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    loop?: boolean;
-    disablePointerSelection?: boolean;
-    vimBindings?: boolean;
-} & RefAttributes<HTMLDivElement>, "_id">>>;
+declare const PrimitiveRoot_2: ForwardRefExoticComponent< PolymorphicProps & Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "_id"> & Partial<Pick< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "_id">>>;
 
 declare const PrimitiveRoot_3: ForwardRefExoticComponent< PolymorphicProps & Omit< DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "_id"> & Partial<Pick< DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "_id">>>;
 
@@ -3457,6 +3867,24 @@ export declare const SourceItemProvider: React.FC<{
     source: TransformedSourceItem;
 }>;
 
+declare type State = {
+    search: string;
+    value: string;
+    selectedItemId?: string;
+    filtered: {
+        count: number;
+        items: Map<string, number>;
+        groups: Set<string>;
+    };
+};
+
+declare type Store = {
+    subscribe: (callback: () => void) => () => void;
+    snapshot: () => State;
+    setState: <K extends keyof State>(key: K, value: State[K], opts?: any) => void;
+    emit: () => void;
+};
+
 export declare const ThemeProvider: React.FC<{
     children: React.ReactNode;
 }>;
@@ -3544,6 +3972,11 @@ export declare function useChatFormState(): {
 
 export declare const useChatMarkdown: () => ChatMarkdownContextValue | undefined;
 
+/** Run a selector against the store state. */
+export declare function useCommandState<T = any>(selector: (state: State) => T): T;
+
+export declare const useCommandStore: () => Store;
+
 /**
  * Hook to compute class names for a component based on its ID, user-provided classes,
  * global configuration, and prefixing rules.
@@ -3631,20 +4064,18 @@ declare const useInkeepModal: (props: InkeepModalSettings | undefined) => {
 declare const useInkeepSearch: () => {
     results: Record<string, TransformedSourceItem[]>;
     resultsList: SearchHit[];
+    setResultsList: Dispatch<SetStateAction<SearchHit[]>>;
     hasContent: boolean;
     loading: boolean;
-    error: string | null;
-    query: string;
-    onInput: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    placeholder: string;
+    setLoading: Dispatch<SetStateAction<boolean>>;
+    defaultTab: string;
     tab: string;
-    onTabChange: (newTab: string) => void;
-    selectedItem: string | undefined;
-    setSelectedItem: Dispatch<SetStateAction<string | undefined>>;
-    onSelectedItemChange: (value: string) => void;
+    setTab: Dispatch<SetStateAction<string>>;
+    disableTransition: () => void;
     transitionsDisabled: boolean;
     inputRef: RefObject<HTMLInputElement | null>;
-    isMobile: boolean;
+    showSearchResults: boolean;
+    setShowSearchResults: Dispatch<SetStateAction<boolean>>;
 };
 
 /**