GlobalSearch

Component

Storybook

Figma Demo

Guidelines

Variations

Only a single variation of the global search input exists (lg, 48px size).

Usage

The global search is only to be used as a top-level search element. For all other search needs, please use our standard input.

Component Specs

API

• class: string | Default: undefined
  Custom class to be applied to the input.

• id: string | Default: 'retailer_header_product_search_input'
  The id of the input, that matches a hidden label.

• formId: string | Default: 'product_search_form'
  The id of the form.

• placeholder: string | Default: ''
  The placeholder text for the input.

• suggestions: Array<any> | Default: []
  The suggestions array that determines if the dropdown container should open.

• testId: string | Default: 'test-global-search'
  The test id of the input.

• value: string | Default: ''
  The value of the input.

• isDropdownOpen: boolean | Default: false
  Whether the dropdown is open.

• handleButtonClick: (event: MouseEvent) => void | Default: () => {}
  The function to be called on button click.

• handleFormSubmit: (event: SubmitEvent) => void | Default: () => {}
  The function to be called on form submit.

• handleEnterPress: (event: KeyboardEvent) => void | Default: undefined
  The function to be called on enter press.

• handleSuggestion: (event: KeyboardEvent) => void | Default: undefined
  The function to be called on suggestion.

• clickOutsideCallback: () => void | Default: () => {}
  The function to be called on click outside.

Example

<script>
	import { GlobalSearch } from '@getprovi/craft-svelte';

	let groupedSuggestions = []; // Replace with actual suggestions
	let isSuggestionBoxOpen = false;
	let placeholder = 'Search...';
	let searchText = '';

	function closeSuggestions() {
	  isSuggestionBoxOpen = false;
	}

	function openSuggestions() {
	  isSuggestionBoxOpen = true;
	}

	function handleEnterPress(e: KeyboardEvent) {
	  // Handle enter press
	}

	function handleFormSubmit(e: SubmitEvent) {
	  // Handle form submit
	}

	function handleSuggestionKeyPress(e: KeyboardEvent) {
	  // Handle suggestion key press
	}

	function handleButtonClick(e: MouseEvent) {
	  // Handle button click
	}
</script>

<GlobalSearch
	id="retailer_header_product_search_input"
	formId="product_search_form"
	testId="retailer_header_product_search_input"
	suggestions="{groupedSuggestions}"
	isDropdownOpen="{isSuggestionBoxOpen}"
	clickOutsideCallback="{closeSuggestions}"
	handleEnterPress="{(e:"
	KeyboardEvent)=""
>
	handleEnterPress(e)} handleFormSubmit={(e: SubmitEvent) => handleFormSubmit(e)}
	handleSuggestion={handleSuggestionKeyPress} handleButtonClick={(e: MouseEvent) =>
	handleButtonClick(e)} {placeholder} on:click={openSuggestions} on:focus={openSuggestions}
	bind:value={searchText} > slot content
</GlobalSearch>

Types

interface Props extends HTMLInputAttributes {
	class?: string;
	formId?: string;
	id?: string;
	isDropdownOpen?: boolean;
	placeholder?: string;
	suggestions: Suggestion[];
	testId?: string;
	value: string;
	handleButtonClick: () => void;
	handleFormSubmit: (e: SubmitEvent) => void;
	handleEnterPress: ((e?: KeyboardEvent) => void) | undefined;
	handleSuggestion?: ((e?: KeyboardEvent) => void) | undefined;
	clickOutsideCallback?: () => void;
	[key: `data-${string}`]: any;
}