@searchcraft/react-sdk 0.10.0 → 0.10.2

package/dist/server/index.d.ts

@@ -42,7 +42,7 @@ export type SearchResultFieldName = {
 	numberFormatLocale?: string;
 	/**
 	 * If it's a number, the number format to apply.
-	 * reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+	 * Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
 	 */
 	numberFormatOptions?: Intl.NumberFormatOptions;
 	/**
@@ -50,9 +50,14 @@ export type SearchResultFieldName = {
 	 */
 	numberScale?: number;
 	/**
-	 * TODO: Implement DateFormatOptions, for date formatting
+	 * The locale to use when formatting dataType: `date`.
 	 */
-	dateFormatOptions?: unknown;
+	dateFormatLocale?: string;
+	/**
+	 * If it's a date, the date format to apply.
+	 * Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+	 */
+	dateFormatOptions?: Intl.DateTimeFormatOptions;
 };
 /**
  * A data type representing the mapping of index fields, for the purpose of rendering them
@@ -138,16 +143,21 @@ export type CustomAdTemplate = (data: {
 }, utils: {
 	html: TemplateHtml;
 }) => string;
+export type PopoverButtonTemplate = (data: {
+	isPopoverVisible: boolean;
+}, utils: {
+	html: TemplateHtml;
+}) => string;
 /**
  * The SearchcraftConfig object is used to initialize Searchcraft in your application.
  */
 export interface SearchcraftConfig {
 	/**
-	 * Host IP Address and port number configured and created using Vektron
+	 * Host IP Address and port number configured and created using Vektron.
 	 */
 	endpointURL: string;
 	/**
-	 * Name or names of search indices configured using Vektron. Given as an array of strings
+	 * Name or names of search indices configured using Vektron. Given as an array of strings.
 	 */
 	index: string[];
 	/**
@@ -166,6 +176,10 @@ export interface SearchcraftConfig {
 	 * The maximum number of results to return per page.
 	 */
 	searchResultsPerPage?: number;
+	/**
+	 * The name of the field to use for `order_by` when sorting.
+	 */
+	indexFieldName?: string;
 	/**
 	 * Name of the ad source to use.
 	 */
@@ -265,7 +279,7 @@ export interface FacetChild {
 /**
  * Types of measure requests that can be sent to the /measure/event endpoint.
  */
-export type MeasureEventName = "sdk_initialized" | "search_requested" | "search_response_received" | "document_clicked";
+export type MeasureEventName = "sdk_initialized" | "search_requested" | "search_response_received" | "search_completed" | "document_clicked";
 /**
  * Properties attached to a measure request.
  */
@@ -298,6 +312,56 @@ export interface MeasureRequestUser {
 	latitude?: number;
 	longitude?: number;
 }
+export interface FacetPathsForIndexField {
+	fieldName: string;
+	value: string;
+}
+export interface RangeValueForIndexField {
+	fieldName: string;
+	value: string;
+}
+export interface SearchClientRequestProperties {
+	/**
+	 * The search mode, which can be either 'fuzzy' or 'exact'.
+	 */
+	mode: "fuzzy" | "exact";
+	/**
+	 * The starting point for the results, used for pagination.
+	 * Optional parameter.
+	 */
+	offset?: number;
+	/**
+	 * The number of results returned.
+	 * Optional parameter.
+	 */
+	limit?: number;
+	/**
+	 * The field to order the results by (e.g., 'date_published', 'title', etc.).
+	 * Optional parameter.
+	 */
+	order_by?: string;
+	/**
+	 * The search term provided by the user.
+	 */
+	searchTerm: string;
+	/**
+	 * The sort order, which can be either 'asc' or 'desc'.
+	 * Optional parameter.
+	 */
+	sort?: "asc" | "desc";
+	/**
+	 * The facet path value(s) specified by the `facets` filter items that the `searchcraft-filter-panel` renders.
+	 * There may be multiple rendered within a single filter panel.
+	 * Optional parameter.
+	 */
+	facetPathsForIndexFields?: Record<string, FacetPathsForIndexField>;
+	/**
+	 * The date range slider value(s) specified by the `dateRange` filter items that the `searchcraft-filter-panel` renders.
+	 * There may be multiple rendered within a single filter panel.
+	 * Optional parameter.
+	 */
+	rangeValueForIndexFields?: Record<string, RangeValueForIndexField>;
+}
 /**
  * The structure of a response returned from a Searchcraft operation.
  */
@@ -324,13 +388,13 @@ export type SearchcraftResponseError = {
 export interface SearchcraftResponseData {
 	count?: number;
 	facets?: FacetPrime;
-	hits?: SearchIndexEntry[];
+	hits?: SearchIndexHit[];
 	time_taken?: number;
 }
 /**
  * Represents an entry in the search index returned as part of a search result.
  */
-export interface SearchIndexEntry {
+export interface SearchIndexHit {
 	doc?: SearchDocument;
 	document_id?: string;
 	score?: number;
@@ -346,54 +410,12 @@ export interface SearchClientResponseItem {
 	id: string;
 	document: SearchDocument;
 }
-export type FacetPathsForIndexField = {
-	fieldName: string;
-	value: string;
-};
-export type RangeValueForIndexField = {
-	fieldName: string;
-	value: string;
-};
-/**
- * Parameters required to make a successful Search request.
- */
-export type SearchParams = {
-	/**
-	 * The search mode, which can be either 'fuzzy' or 'exact'.
-	 */
-	mode: "fuzzy" | "exact";
-	/**
-	 * The starting point for the results, used for pagination.
-	 * Optional parameter.
-	 */
-	offset?: number;
-	/**
-	 * The number of results returned.
-	 * Optional parameter.
-	 */
-	limit?: number;
-	/**
-	 * The field to order the results by (e.g., 'date_published', 'title', etc.).
-	 * Optional parameter.
-	 */
-	order_by?: string;
-	/**
-	 * The search term provided by the user.
-	 */
-	searchTerm: string;
-	/**
-	 * The sort order, which can be either 'asc' or 'desc'.
-	 * Optional parameter.
-	 */
-	sort?: "asc" | "desc";
-	facetPathsForIndexFields?: Record<string, FacetPathsForIndexField>;
-	rangeValueForIndexFields?: Record<string, RangeValueForIndexField>;
-};
 export interface SubscriptionEventMap {
 	ad_container_rendered: AdContainerRenderedSubscriptionEvent;
 	ad_container_viewed: AdContainerViewedSubscriptionEvent;
 	query_fetched: QueryFetchedEvent;
 	query_submitted: QuerySubmittedEvent;
+	initialized: InitializedEvent;
 	input_cleared: InputClearedEvent;
 	no_results_returned: NoResultsReturnedEvent;
 }
@@ -431,6 +453,9 @@ export interface InputClearedEvent extends SubscriptionEvent {
 export interface NoResultsReturnedEvent extends SubscriptionEvent {
 	name: "no_results_returned";
 }
+export interface InitializedEvent extends SubscriptionEvent {
+	name: "initialized";
+}
 export type SubscriptionEventName = keyof SubscriptionEventMap;
 export type SubscriptionEventCallback<T extends SubscriptionEventName> = (event: SubscriptionEventMap[T]) => void;
 export type UnsubscribeFunction = () => void;
@@ -440,9 +465,9 @@ export interface SubscriptionEvent {
 declare class AdClient {
 	config: SearchcraftConfig;
 	constructor(config: SearchcraftConfig);
-	getAdsForSearchParams(_params: SearchParams): Promise<AdClientResponseItem[]>;
-	onQuerySubmitted(_params: SearchParams): Promise<void>;
-	onQueryFetched(_params: SearchParams, _response: SearchcraftResponse): Promise<void>;
+	getAds(_properties: SearchClientRequestProperties): Promise<AdClientResponseItem[]>;
+	onQuerySubmitted(_properties: SearchClientRequestProperties): Promise<void>;
+	onQueryFetched(_properties: SearchClientRequestProperties, _response: SearchcraftResponse): Promise<void>;
 	onInputCleared(): Promise<void>;
 	onAdContainerRendered(_data: {
 		adClientResponseItem?: AdClientResponseItem;
@@ -480,22 +505,32 @@ declare class MeasureClient {
 	 * @param {Partial<MeasureRequestProperties>} properties - Additional properties to send with the event.
 	 * @param {Partial<MeasureRequestUser>} user - Additional user properites to send with the event.
 	 */
-	sendMeasureEvent: (eventName: MeasureEventName, properties?: Partial<MeasureRequestProperties>, user?: Partial<MeasureRequestUser>) => void;
+	sendMeasureEvent: (eventName: MeasureEventName, properties?: Partial<MeasureRequestProperties>, user?: Partial<MeasureRequestUser>) => Promise<void>;
 }
 declare class SearchClient {
 	private config;
 	private userId;
 	private parent;
+	private searchCompletedEventTimeout;
 	constructor(parent: SearchcraftCore, config: SearchcraftConfig, userId: string);
 	/**
 	 * Getter for the base url used by the /search endpoint.
 	 */
 	private get baseSearchUrl();
 	/**
-	 * Performs a search operation.
-	 * @param {SearchParams} searchParams - The parameters for the search.
+	 * Make the request to get the search results.
+	 * @param {properties} properties - The properties for the search.
+	 * @returns
 	 */
-	getSearchResponse: (searchParams: SearchParams) => Promise<SearchcraftResponse>;
+	getSearchResponseItems: (properties: SearchClientRequestProperties | string) => Promise<SearchcraftResponse>;
+	private handleGetSearchResponseItemsWithString;
+	private handleGetSearchResponseItemsWithObject;
+	/**
+	 * Builds a query object for the SearchClient request.
+	 * @param {properties} properties - The properties for the search.
+	 * @returns {SearchClientQuery} - A properly formatted SearchClient query object.
+	 */
+	private formatParamsForRequest;
 }
 /**
  * Javascript Class providing the functionality to interact with the Searchcraft BE
@@ -539,30 +574,34 @@ export declare class SearchcraftCore {
 	 * Perform various actions when the input is cleared
 	 */
 	handleInputCleared(): void;
-	/**
-	 * Gets items from the SearchClient and the AdClient.
-	 */
-	getItems: (searchParams: SearchParams, itemsCallback: (response: SearchcraftResponse, items: SearchClientResponseItem[]) => void, adCallback: (adClientResponseItems: AdClientResponseItem[]) => void) => void;
+	getResponseItems: (properties: SearchClientRequestProperties | string, searchCallback: (response: SearchcraftResponse, items: SearchClientResponseItem[]) => void, adCallback: (items: AdClientResponseItem[]) => void) => void;
 }
 /**
  * Callable functions made available by the SearchcraftStore.
  */
 export interface SearchcraftStateFunctions {
-	addFacetPathsForIndexField: (data: FacetPathsForIndexField) => void;
-	addRangeValueForIndexField: (data: RangeValueForIndexField) => void;
-	getSearchcraftInstance: () => SearchcraftCore | undefined;
-	initialize: (searchcraft: unknown, debug?: boolean) => void;
+	addFacetPathsForIndexField: (field: FacetPathsForIndexField) => void;
+	addRangeValueForIndexField: (field: RangeValueForIndexField) => void;
+	getSearchcraftCore: () => SearchcraftCore | undefined;
+	init: (searchcraft: SearchcraftCore | undefined, debug?: boolean) => void;
 	removeFacetPathsForIndexField: (fieldName: string) => void;
 	removeRangeValueForIndexField: (fieldName: string) => void;
 	resetFacetPaths: () => void;
 	search: () => Promise<void>;
+	set: (state: Partial<SearchcraftState> | ((state: SearchcraftState) => Partial<SearchcraftState>)) => SearchcraftState;
+	setAdClientResponseItems: (items: AdClientResponseItem[]) => void;
+	setSearchClientResponseItemsFromResponse: (response: SearchcraftResponse, items: SearchClientResponseItem[]) => void;
+	setInitialSearchClientResponseItemsFromResponse: (response: SearchcraftResponse, items: SearchClientResponseItem[]) => void;
+	setInitialQuery: (query: string) => void;
 	setPopoverVisibility: (isVisible: boolean) => void;
-	setSearchClientResponseItems: (results: SearchClientResponseItem[]) => void;
+	setSearchResultsCount: (count: number) => void;
+	setSearchClientResponseItems: (items: SearchClientResponseItem[]) => void;
 	setSearchResultsPage: (page: number) => void;
 	setSearchResultsPerPage: (perPage: number) => void;
 	setSearchTerm: (searchTerm: string) => void;
 	setSearchMode: (mode: "fuzzy" | "exact") => void;
 	setSortType: (type: "asc" | "desc") => void;
+	setHotKeyAndHotKeyModifier: (hotkey?: string, hotkeyModifier?: "ctrl" | "meta" | "alt" | "option") => void;
 }
 /**
  * Values stored in SearchcraftStore.
@@ -570,8 +609,12 @@ export interface SearchcraftStateFunctions {
 export interface SearchcraftStateValues {
 	adClientResponseItems: AdClientResponseItem[];
 	core: SearchcraftCore | undefined;
+	hotkey: string;
+	hotkeyModifier: "ctrl" | "meta" | "alt" | "option";
 	logger: Logger | undefined;
 	facetPathsForIndexFields: Record<string, FacetPathsForIndexField>;
+	initialQuery: string;
+	initialSearchClientResponseItems: SearchClientResponseItem[];
 	isPopoverVisible: boolean;
 	isSearchInProgress: boolean;
 	rangeValueForIndexFields: Record<string, RangeValueForIndexField>;
@@ -584,12 +627,11 @@ export interface SearchcraftStateValues {
 	searchResultsPerPage: number;
 	searchTerm: string;
 	sortType: "asc" | "desc";
+	afterInit: (state: SearchcraftState) => void;
 }
 export interface SearchcraftState extends SearchcraftStateFunctions, SearchcraftStateValues {
 }
 export declare const searchcraftStore: import("zustand").StoreApi<SearchcraftState>;
-export declare function parseCustomStyles(styles: string | Record<string, string>): Record<string, string>;
-export declare function serializeStyles(styles: Record<string, Record<string, string>>): string;
 export type SearchcraftSelectOption = {
 	label: string;
 	value: string | number;
@@ -671,10 +713,10 @@ export namespace Components {
 	}
 	/**
 	 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -704,10 +746,10 @@ export namespace Components {
 	/**
 	 * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
 	 * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftInputForm } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -758,10 +800,10 @@ export namespace Components {
 	}
 	/**
 	 * This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPagination } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftPagination } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -778,36 +820,65 @@ export namespace Components {
 	}
 	/**
 	 * Renders a button which, when clicked, turns on popover visibility.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ````
+	 * @vue-import ```jsx
 	 * import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
+	 * <!-- index.html -->
 	 * <searchcraft-popover-button>
 	 *   Open popover
 	 * </searchcraft-popover-button>
 	 * ```
+	 * ```js
+	 * // index.js
+	 * const popoverButton = document.querySelector('searchcraft-popover-button');
+	 * popoverButton.template = ({ isPopoverVisible }, { html }) => html`
+	 *   <span>Click me</span>
+	 * `;
+	 * ```
 	 * @react-example ```jsx
-	 * <SearchcraftPopoverButton>
+	 * <SearchcraftPopoverButton
+	 *   template={({ isPopoverVisible }, { html }) => html`
+	 *     <span>Click me</span>
+	 *   `}
+	 * >
 	 *   Open popover
 	 * </SearchcraftPopoverButton>
 	 * ```
 	 * @vue-example ```jsx
-	 * <SearchcraftPopoverButton>
+	 * <SearchcraftPopoverButton
+	 *   :template={({ isPopoverVisible }, { html }) => html`
+	 *     <span>Click me</span>
+	 *   `}
+	 * >
 	 *   Open popover
 	 * </SearchcraftPopoverButton>
 	 * ```
 	 */
 	interface SearchcraftPopoverButton {
+		/**
+		  * A callback function responsible for rendering the button contents.
+		 */
+		"template"?: PopoverButtonTemplate;
+		/**
+		  * The type of popover button to render.
+		 */
+		"type"?: "skeuomorphic";
+	}
+	/**
+	 * Renders the footer for the searchcraft-popover-form.
+	 */
+	interface SearchcraftPopoverFooter {
 	}
 	/**
 	 * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -877,10 +948,10 @@ export namespace Components {
 	}
 	/**
 	 * This web component is designed to display the number of results returned from a search query.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -900,17 +971,18 @@ export namespace Components {
 	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 	 *   `}
 	 * />
+	 * ```
 	 * @vue-example ```jsx
 	 * <SearchcraftResultsInfo
 	 *   :template={(info, { html }) => html`
 	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 	 *   `}
 	 * />
+	 * ```
 	 */
 	interface SearchcraftResultsInfo {
 		/**
 		  * A callback function responsible for rendering the results info.
-		  * @example ```ts  resultsInfo.template = html`    ${range[0]}-${range[1]} of ${count} results in ${responseTime}ms  `; ```
 		 */
 		"template"?: ResultsInfoTemplate;
 	}
@@ -934,10 +1006,10 @@ export namespace Components {
 	}
 	/**
 	 * This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -974,6 +1046,10 @@ export namespace Components {
 	 * ```
 	 */
 	interface SearchcraftSearchResults {
+		/**
+		  * A query that will appears when the component initializes or the search term is ''..
+		 */
+		"initialQuery"?: string;
 		/**
 		  * A callback function responsible for rendering a result. Passed to `searchcraft-search-result`.
 		 */
@@ -981,10 +1057,10 @@ export namespace Components {
 	}
 	/**
 	 * This web component is designed to choose the number of search results displayed.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1068,10 +1144,10 @@ export namespace Components {
 	}
 	/**
 	 * This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftTheme } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftTheme } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1205,10 +1281,10 @@ declare global {
 	};
 	/**
 	 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1243,10 +1319,10 @@ declare global {
 	/**
 	 * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
 	 * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftInputForm } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1287,10 +1363,10 @@ declare global {
 	};
 	/**
 	 * This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPagination } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftPagination } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1311,24 +1387,40 @@ declare global {
 	};
 	/**
 	 * Renders a button which, when clicked, turns on popover visibility.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ````
+	 * @vue-import ```jsx
 	 * import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
+	 * <!-- index.html -->
 	 * <searchcraft-popover-button>
 	 *   Open popover
 	 * </searchcraft-popover-button>
 	 * ```
+	 * ```js
+	 * // index.js
+	 * const popoverButton = document.querySelector('searchcraft-popover-button');
+	 * popoverButton.template = ({ isPopoverVisible }, { html }) => html`
+	 *   <span>Click me</span>
+	 * `;
+	 * ```
 	 * @react-example ```jsx
-	 * <SearchcraftPopoverButton>
+	 * <SearchcraftPopoverButton
+	 *   template={({ isPopoverVisible }, { html }) => html`
+	 *     <span>Click me</span>
+	 *   `}
+	 * >
 	 *   Open popover
 	 * </SearchcraftPopoverButton>
 	 * ```
 	 * @vue-example ```jsx
-	 * <SearchcraftPopoverButton>
+	 * <SearchcraftPopoverButton
+	 *   :template={({ isPopoverVisible }, { html }) => html`
+	 *     <span>Click me</span>
+	 *   `}
+	 * >
 	 *   Open popover
 	 * </SearchcraftPopoverButton>
 	 * ```
@@ -1339,12 +1431,21 @@ declare global {
 		prototype: HTMLSearchcraftPopoverButtonElement;
 		new (): HTMLSearchcraftPopoverButtonElement;
 	};
+	/**
+	 * Renders the footer for the searchcraft-popover-form.
+	 */
+	interface HTMLSearchcraftPopoverFooterElement extends Components.SearchcraftPopoverFooter, HTMLStencilElement {
+	}
+	var HTMLSearchcraftPopoverFooterElement: {
+		prototype: HTMLSearchcraftPopoverFooterElement;
+		new (): HTMLSearchcraftPopoverFooterElement;
+	};
 	/**
 	 * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1393,10 +1494,10 @@ declare global {
 	};
 	/**
 	 * This web component is designed to display the number of results returned from a search query.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1416,12 +1517,14 @@ declare global {
 	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 	 *   `}
 	 * />
+	 * ```
 	 * @vue-example ```jsx
 	 * <SearchcraftResultsInfo
 	 *   :template={(info, { html }) => html`
 	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 	 *   `}
 	 * />
+	 * ```
 	 */
 	interface HTMLSearchcraftResultsInfoElement extends Components.SearchcraftResultsInfo, HTMLStencilElement {
 	}
@@ -1440,10 +1543,10 @@ declare global {
 	};
 	/**
 	 * This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1487,10 +1590,10 @@ declare global {
 	};
 	/**
 	 * This web component is designed to choose the number of search results displayed.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1560,10 +1663,10 @@ declare global {
 	};
 	/**
 	 * This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftTheme } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftTheme } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1612,6 +1715,7 @@ declare global {
 		"searchcraft-input-label": HTMLSearchcraftInputLabelElement;
 		"searchcraft-pagination": HTMLSearchcraftPaginationElement;
 		"searchcraft-popover-button": HTMLSearchcraftPopoverButtonElement;
+		"searchcraft-popover-footer": HTMLSearchcraftPopoverFooterElement;
 		"searchcraft-popover-form": HTMLSearchcraftPopoverFormElement;
 		"searchcraft-popover-list-item": HTMLSearchcraftPopoverListItemElement;
 		"searchcraft-popover-list-view": HTMLSearchcraftPopoverListViewElement;
@@ -1711,10 +1815,10 @@ declare namespace LocalJSX {
 	}
 	/**
 	 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1744,10 +1848,10 @@ declare namespace LocalJSX {
 	/**
 	 * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
 	 * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftInputForm } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1810,10 +1914,10 @@ declare namespace LocalJSX {
 	}
 	/**
 	 * This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPagination } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftPagination } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1830,36 +1934,65 @@ declare namespace LocalJSX {
 	}
 	/**
 	 * Renders a button which, when clicked, turns on popover visibility.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ````
+	 * @vue-import ```jsx
 	 * import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
+	 * <!-- index.html -->
 	 * <searchcraft-popover-button>
 	 *   Open popover
 	 * </searchcraft-popover-button>
 	 * ```
+	 * ```js
+	 * // index.js
+	 * const popoverButton = document.querySelector('searchcraft-popover-button');
+	 * popoverButton.template = ({ isPopoverVisible }, { html }) => html`
+	 *   <span>Click me</span>
+	 * `;
+	 * ```
 	 * @react-example ```jsx
-	 * <SearchcraftPopoverButton>
+	 * <SearchcraftPopoverButton
+	 *   template={({ isPopoverVisible }, { html }) => html`
+	 *     <span>Click me</span>
+	 *   `}
+	 * >
 	 *   Open popover
 	 * </SearchcraftPopoverButton>
 	 * ```
 	 * @vue-example ```jsx
-	 * <SearchcraftPopoverButton>
+	 * <SearchcraftPopoverButton
+	 *   :template={({ isPopoverVisible }, { html }) => html`
+	 *     <span>Click me</span>
+	 *   `}
+	 * >
 	 *   Open popover
 	 * </SearchcraftPopoverButton>
 	 * ```
 	 */
 	interface SearchcraftPopoverButton {
+		/**
+		  * A callback function responsible for rendering the button contents.
+		 */
+		"template"?: PopoverButtonTemplate;
+		/**
+		  * The type of popover button to render.
+		 */
+		"type"?: "skeuomorphic";
+	}
+	/**
+	 * Renders the footer for the searchcraft-popover-form.
+	 */
+	interface SearchcraftPopoverFooter {
 	}
 	/**
 	 * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1929,10 +2062,10 @@ declare namespace LocalJSX {
 	}
 	/**
 	 * This web component is designed to display the number of results returned from a search query.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1952,17 +2085,18 @@ declare namespace LocalJSX {
 	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 	 *   `}
 	 * />
+	 * ```
 	 * @vue-example ```jsx
 	 * <SearchcraftResultsInfo
 	 *   :template={(info, { html }) => html`
 	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 	 *   `}
 	 * />
+	 * ```
 	 */
 	interface SearchcraftResultsInfo {
 		/**
 		  * A callback function responsible for rendering the results info.
-		  * @example ```ts  resultsInfo.template = html`    ${range[0]}-${range[1]} of ${count} results in ${responseTime}ms  `; ```
 		 */
 		"template"?: ResultsInfoTemplate;
 	}
@@ -1986,10 +2120,10 @@ declare namespace LocalJSX {
 	}
 	/**
 	 * This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -2026,6 +2160,10 @@ declare namespace LocalJSX {
 	 * ```
 	 */
 	interface SearchcraftSearchResults {
+		/**
+		  * A query that will appears when the component initializes or the search term is ''..
+		 */
+		"initialQuery"?: string;
 		/**
 		  * A callback function responsible for rendering a result. Passed to `searchcraft-search-result`.
 		 */
@@ -2033,10 +2171,10 @@ declare namespace LocalJSX {
 	}
 	/**
 	 * This web component is designed to choose the number of search results displayed.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -2128,10 +2266,10 @@ declare namespace LocalJSX {
 	}
 	/**
 	 * This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftTheme } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftTheme } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -2173,6 +2311,7 @@ declare namespace LocalJSX {
 		"searchcraft-input-label": SearchcraftInputLabel;
 		"searchcraft-pagination": SearchcraftPagination;
 		"searchcraft-popover-button": SearchcraftPopoverButton;
+		"searchcraft-popover-footer": SearchcraftPopoverFooter;
 		"searchcraft-popover-form": SearchcraftPopoverForm;
 		"searchcraft-popover-list-item": SearchcraftPopoverListItem;
 		"searchcraft-popover-list-view": SearchcraftPopoverListView;
@@ -2225,10 +2364,10 @@ declare module "@stencil/core" {
 			"searchcraft-facet-list": LocalJSX.SearchcraftFacetList & JSXBase.HTMLAttributes<HTMLSearchcraftFacetListElement>;
 			/**
 			 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
@@ -2253,10 +2392,10 @@ declare module "@stencil/core" {
 			/**
 			 * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
 			 * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftInputForm } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
@@ -2279,10 +2418,10 @@ declare module "@stencil/core" {
 			"searchcraft-input-label": LocalJSX.SearchcraftInputLabel & JSXBase.HTMLAttributes<HTMLSearchcraftInputLabelElement>;
 			/**
 			 * This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftPagination } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftPagination } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
@@ -2298,35 +2437,55 @@ declare module "@stencil/core" {
 			"searchcraft-pagination": LocalJSX.SearchcraftPagination & JSXBase.HTMLAttributes<HTMLSearchcraftPaginationElement>;
 			/**
 			 * Renders a button which, when clicked, turns on popover visibility.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ````
+			 * @vue-import ```jsx
 			 * import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
+			 * <!-- index.html -->
 			 * <searchcraft-popover-button>
 			 *   Open popover
 			 * </searchcraft-popover-button>
 			 * ```
+			 * ```js
+			 * // index.js
+			 * const popoverButton = document.querySelector('searchcraft-popover-button');
+			 * popoverButton.template = ({ isPopoverVisible }, { html }) => html`
+			 *   <span>Click me</span>
+			 * `;
+			 * ```
 			 * @react-example ```jsx
-			 * <SearchcraftPopoverButton>
+			 * <SearchcraftPopoverButton
+			 *   template={({ isPopoverVisible }, { html }) => html`
+			 *     <span>Click me</span>
+			 *   `}
+			 * >
 			 *   Open popover
 			 * </SearchcraftPopoverButton>
 			 * ```
 			 * @vue-example ```jsx
-			 * <SearchcraftPopoverButton>
+			 * <SearchcraftPopoverButton
+			 *   :template={({ isPopoverVisible }, { html }) => html`
+			 *     <span>Click me</span>
+			 *   `}
+			 * >
 			 *   Open popover
 			 * </SearchcraftPopoverButton>
 			 * ```
 			 */
 			"searchcraft-popover-button": LocalJSX.SearchcraftPopoverButton & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverButtonElement>;
+			/**
+			 * Renders the footer for the searchcraft-popover-form.
+			 */
+			"searchcraft-popover-footer": LocalJSX.SearchcraftPopoverFooter & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverFooterElement>;
 			/**
 			 * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
@@ -2360,10 +2519,10 @@ declare module "@stencil/core" {
 			"searchcraft-popover-list-view": LocalJSX.SearchcraftPopoverListView & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverListViewElement>;
 			/**
 			 * This web component is designed to display the number of results returned from a search query.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
@@ -2383,12 +2542,14 @@ declare module "@stencil/core" {
 			 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 			 *   `}
 			 * />
+			 * ```
 			 * @vue-example ```jsx
 			 * <SearchcraftResultsInfo
 			 *   :template={(info, { html }) => html`
 			 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 			 *   `}
 			 * />
+			 * ```
 			 */
 			"searchcraft-results-info": LocalJSX.SearchcraftResultsInfo & JSXBase.HTMLAttributes<HTMLSearchcraftResultsInfoElement>;
 			/**
@@ -2397,10 +2558,10 @@ declare module "@stencil/core" {
 			"searchcraft-search-result": LocalJSX.SearchcraftSearchResult & JSXBase.HTMLAttributes<HTMLSearchcraftSearchResultElement>;
 			/**
 			 * This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
@@ -2439,10 +2600,10 @@ declare module "@stencil/core" {
 			"searchcraft-search-results": LocalJSX.SearchcraftSearchResults & JSXBase.HTMLAttributes<HTMLSearchcraftSearchResultsElement>;
 			/**
 			 * This web component is designed to choose the number of search results displayed.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
@@ -2475,10 +2636,10 @@ declare module "@stencil/core" {
 			"searchcraft-slider": LocalJSX.SearchcraftSlider & JSXBase.HTMLAttributes<HTMLSearchcraftSliderElement>;
 			/**
 			 * This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftTheme } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftTheme } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html