@docsearch/js 5.0.0-beta.2 → 5.0.0-beta.4

package/dist/esm/docsearch.d.ts

@@ -1,6 +1,6 @@
-/*! @docsearch/js 5.0.0-beta.2 (UNRELEASED c7e1a88) | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
-import { DocSearchProps as DocSearchProps$1 } from "@docsearch/react";
+/*! @docsearch/js 5.0.0-beta.4 (UNRELEASED 11d6ed4) | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
 import { InitialAskAiMessage } from "@docsearch/core";
+import { DocSearchProps as DocSearchProps$1, HitComponentProps, ResultsFooterComponentProps } from "@docsearch/react";
 //#region ../../node_modules/.bun/preact@11.0.0-beta.0/node_modules/preact/src/index.d.ts
 import JSX = JSXInternal;
 //#endregion
@@ -19,18 +19,49 @@ interface DocSearchCallbacks {
   onClose?: () => void;
   interceptAskAiEvent?: (initialMessage: InitialAskAiMessage) => boolean | void;
 }
-type DocSearchProps$2<TProps> = DocSearchCallbacks & Omit<TProps, 'onSidepanelClose' | 'onSidepanelOpen'> & {
+type TemplateHelpers = {
+  html: typeof html;
+};
+type TemplateFnReturnType = JSX.Element | string | (() => JSX.Element) | null;
+type HitComponentFn = (props: HitComponentProps, helpers: TemplateHelpers) => TemplateFnReturnType;
+type ResultsFooterComponentFn = (props: ResultsFooterComponentProps, helpers: TemplateHelpers) => TemplateFnReturnType;
+type FooterActionFn = (props: never, helpers: TemplateHelpers) => TemplateFnReturnType;
+type DocSearchProps$2<TProps> = DocSearchCallbacks & Omit<TProps, 'onSidepanelClose' | 'onSidepanelOpen' | 'hitComponent' | 'resultsFooterComponent' | 'footerAction'> & {
   container: HTMLElement | string;
   environment?: typeof window;
+  /**
+   * Custom component to render an individual hit. Supports template patterns:
+   *
+   * - HTML strings with html helper: (props, { html }) => html`<div>...</div>`
+   * - JSX templates: (props) => <div>...</div>
+   * - Function-based templates: (props) => string | JSX.Element | Function.
+   */
+  hitComponent?: HitComponentFn;
+  /**
+   * Custom component rendered at the bottom of the results panel. Supports
+   * template patterns:
+   *
+   * - HTML strings with html helper: (props, { html }) => html`<div>...</div>`
+   * - JSX templates: (props) => <div>...</div>
+   * - Function-based templates: (props) => string | JSX.Element | Function.
+   */
+  resultsFooterComponent?: ResultsFooterComponentFn;
+  /**
+   * A custom action that can be rendered in the Modal's footer before the
+   * Algolia logo. The component will be rendered as a child of `<div
+   * className="DocSearch-Footer-Action" />`. Supports template patterns:
+   *
+   * - HTML strings with html helper: (props, { html }) => html`<div>...</div>`
+   * - JSX templates: (props) => <div>...</div>
+   * - Function-based templates: (props) => string | JSX.Element | Function.
+   */
+  footerAction?: FooterActionFn;
 };
 declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => JSX.Element;
-type TemplateHelpers = Record<string, unknown> & {
-  html: typeof html;
-};
 //#endregion
 //#region src/docsearchComponent.d.ts
 type DocSearchProps = DocSearchProps$2<DocSearchProps$1>;
 declare const docsearch: (allProps: DocSearchProps) => DocSearchInstance;
 //#endregion
-export { type DocSearchCallbacks, type DocSearchInstance, type DocSearchProps, type TemplateHelpers, docsearch as default };
+export { type DocSearchCallbacks, type DocSearchInstance, type DocSearchProps, type FooterActionFn, type HitComponentFn, type ResultsFooterComponentFn, type TemplateHelpers, docsearch as default };
 //# sourceMappingURL=docsearch.d.ts.map

package/dist/esm/docsearch.js

@@ -1,4 +1,4 @@
-/*! @docsearch/js 5.0.0-beta.2 (UNRELEASED c7e1a88) | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
+/*! @docsearch/js 5.0.0-beta.4 (UNRELEASED 11d6ed4) | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1182,7 +1182,7 @@ function DocSearchButtonKey({ reactsToKey, children }) {
 
 //#endregion
 //#region ../docsearch-react/dist/esm/version.js
-const version$1 = "5.0.0-beta.2";
+const version$1 = "5.0.0-beta.4";
 
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/OverloadYield.js
@@ -12380,7 +12380,7 @@ function useMenuParent() {
 }
 
 //#endregion
-//#region ../docsearch-react/dist/esm/normalizeDocSearchIndexes-D8P3VEXa.js
+//#region ../docsearch-react/dist/esm/normalizeDocSearchIndexes-ChnVvoVt.js
 init_compat();
 function capitalize(text) {
 	return `${text.charAt(0).toLocaleUpperCase()}${text.substring(1)}`;
@@ -12836,12 +12836,13 @@ function CommandIcon(props) {
 		strokeWidth: "1.4"
 	}, props.children));
 }
-function Footer({ translations = {}, isAskAiActive = false }) {
+function Footer({ translations = {}, isAskAiActive = false, footerAction }) {
 	const { selectText = "Select", selectKeyAriaLabel = "Enter key", submitQuestionText = "Submit question", navigateText = "Navigate", navigateUpKeyAriaLabel = "Arrow up", navigateDownKeyAriaLabel = "Arrow down", closeText = "Close", backToSearchText = "Back to search", closeKeyAriaLabel = "Escape key", poweredByText = "Powered by" } = translations;
-	return /* @__PURE__ */ En.createElement(En.Fragment, null, /* @__PURE__ */ En.createElement("div", { className: "DocSearch-Logo" }, /* @__PURE__ */ En.createElement(AlgoliaLogo, { translations: { poweredByText } })), /* @__PURE__ */ En.createElement("ul", { className: "DocSearch-Commands" }, /* @__PURE__ */ En.createElement("li", null, /* @__PURE__ */ En.createElement("kbd", { className: "DocSearch-Commands-Key" }, /* @__PURE__ */ En.createElement(CommandIcon, { ariaLabel: navigateDownKeyAriaLabel }, /* @__PURE__ */ En.createElement("path", { d: "M12 5v14" }), /* @__PURE__ */ En.createElement("path", { d: "m19 12-7 7-7-7" }))), /* @__PURE__ */ En.createElement("kbd", { className: "DocSearch-Commands-Key" }, /* @__PURE__ */ En.createElement(CommandIcon, { ariaLabel: navigateUpKeyAriaLabel }, /* @__PURE__ */ En.createElement("path", { d: "m5 12 7-7 7 7" }), /* @__PURE__ */ En.createElement("path", { d: "M12 19V5" }))), /* @__PURE__ */ En.createElement("span", { className: "DocSearch-Label" }, navigateText)), /* @__PURE__ */ En.createElement("li", null, /* @__PURE__ */ En.createElement("kbd", { className: "DocSearch-Commands-Key" }, /* @__PURE__ */ En.createElement(CommandIcon, { ariaLabel: selectKeyAriaLabel }, /* @__PURE__ */ En.createElement("polyline", { points: "9 10 4 15 9 20" }), /* @__PURE__ */ En.createElement("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" }))), /* @__PURE__ */ En.createElement("span", { className: "DocSearch-Label" }, isAskAiActive ? submitQuestionText : selectText)), /* @__PURE__ */ En.createElement("li", null, /* @__PURE__ */ En.createElement("kbd", { className: "DocSearch-Commands-Key" }, /* @__PURE__ */ En.createElement("span", { className: "DocSearch-Escape-Key" }, "ESC")), /* @__PURE__ */ En.createElement("span", {
+	const hasFooterAction = footerAction !== null && footerAction !== void 0 && typeof footerAction !== "boolean";
+	return /* @__PURE__ */ En.createElement(En.Fragment, null, /* @__PURE__ */ En.createElement("ul", { className: "DocSearch-Commands" }, /* @__PURE__ */ En.createElement("li", null, /* @__PURE__ */ En.createElement("kbd", { className: "DocSearch-Commands-Key" }, /* @__PURE__ */ En.createElement(CommandIcon, { ariaLabel: navigateDownKeyAriaLabel }, /* @__PURE__ */ En.createElement("path", { d: "M12 5v14" }), /* @__PURE__ */ En.createElement("path", { d: "m19 12-7 7-7-7" }))), /* @__PURE__ */ En.createElement("kbd", { className: "DocSearch-Commands-Key" }, /* @__PURE__ */ En.createElement(CommandIcon, { ariaLabel: navigateUpKeyAriaLabel }, /* @__PURE__ */ En.createElement("path", { d: "m5 12 7-7 7 7" }), /* @__PURE__ */ En.createElement("path", { d: "M12 19V5" }))), /* @__PURE__ */ En.createElement("span", { className: "DocSearch-Label" }, navigateText)), /* @__PURE__ */ En.createElement("li", null, /* @__PURE__ */ En.createElement("kbd", { className: "DocSearch-Commands-Key" }, /* @__PURE__ */ En.createElement(CommandIcon, { ariaLabel: selectKeyAriaLabel }, /* @__PURE__ */ En.createElement("polyline", { points: "9 10 4 15 9 20" }), /* @__PURE__ */ En.createElement("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" }))), /* @__PURE__ */ En.createElement("span", { className: "DocSearch-Label" }, isAskAiActive ? submitQuestionText : selectText)), /* @__PURE__ */ En.createElement("li", null, /* @__PURE__ */ En.createElement("kbd", { className: "DocSearch-Commands-Key" }, /* @__PURE__ */ En.createElement("span", { className: "DocSearch-Escape-Key" }, "ESC")), /* @__PURE__ */ En.createElement("span", {
 		className: "DocSearch-Label",
 		"aria-label": closeKeyAriaLabel
-	}, isAskAiActive ? backToSearchText : closeText))));
+	}, isAskAiActive ? backToSearchText : closeText))), /* @__PURE__ */ En.createElement("div", { className: "DocSearch-Footer-Actions" }, hasFooterAction && /* @__PURE__ */ En.createElement("div", { className: "DocSearch-Footer-Action" }, footerAction), /* @__PURE__ */ En.createElement("div", { className: "DocSearch-Logo" }, /* @__PURE__ */ En.createElement(AlgoliaLogo, { translations: { poweredByText } }))));
 }
 function Hit({ hit, children }) {
 	return /* @__PURE__ */ En.createElement("a", { href: hit.url }, children);
@@ -12999,7 +13000,7 @@ function useTrapFocus({ container }) {
 		};
 	}, [container]);
 }
-function useDocSearchModalEffects({ initialScrollY, modalRef, snippetLength, theme }) {
+function useDocSearchModalEffects({ initialScrollY, modalRef, theme }) {
 	useTheme({ theme });
 	En.useEffect(() => {
 		document.body.classList.add("DocSearch--active");
@@ -13019,9 +13020,6 @@ function useDocSearchModalEffects({ initialScrollY, modalRef, snippetLength, the
 			document.body.style.marginInlineEnd = "0px";
 		};
 	}, []);
-	En.useEffect(() => {
-		if (window.matchMedia("(max-width: 768px)").matches) snippetLength.current = 5;
-	}, [snippetLength]);
 	En.useEffect(() => {
 		function setFullViewportHeight() {
 			if (modalRef.current) {
@@ -13036,7 +13034,7 @@ function useDocSearchModalEffects({ initialScrollY, modalRef, snippetLength, the
 		};
 	}, [modalRef]);
 }
-function useModalEnvironment({ getEnvironmentProps, containerRef, dropdownRef, formElementRef, inputRef, initialScrollY, modalRef, snippetLength, theme }) {
+function useModalEnvironment({ getEnvironmentProps, containerRef, dropdownRef, formElementRef, inputRef, initialScrollY, modalRef, theme }) {
 	useTouchEvents({
 		getEnvironmentProps,
 		panelElement: dropdownRef.current,
@@ -13047,7 +13045,6 @@ function useModalEnvironment({ getEnvironmentProps, containerRef, dropdownRef, f
 	useDocSearchModalEffects({
 		initialScrollY,
 		modalRef,
-		snippetLength,
 		theme
 	});
 }
@@ -13057,8 +13054,7 @@ function useModalRefs() {
 		modalRef: En.useRef(null),
 		formElementRef: En.useRef(null),
 		dropdownRef: En.useRef(null),
-		inputRef: En.useRef(null),
-		snippetLength: En.useRef(15)
+		inputRef: En.useRef(null)
 	};
 }
 function useRefreshOnInitialQuery({ initialQuery, inputRef, refresh }) {
@@ -13412,7 +13408,7 @@ function buildNoQuerySources({ recentSearches, favoriteSearches, saveRecentSearc
 		}
 	}];
 }
-async function buildQuerySources({ query, state: sourcesState, setContext, setStatus, searchClient, indexes, snippetLength, insights, appId, apiKey, maxResultsPerGroup, transformItems = identity, saveRecentSearch, onClose, facetSelections }) {
+async function buildQuerySources({ query, state: sourcesState, setContext, setStatus, searchClient, indexes, insights, appId, apiKey, maxResultsPerGroup, transformItems = identity, saveRecentSearch, onClose, facetSelections }) {
 	const insightsActive = insights;
 	try {
 		const { results } = await searchClient.search({ requests: indexes.map((index) => {
@@ -13436,13 +13432,13 @@ async function buildQuerySources({ query, state: sourcesState, setContext, setSt
 					"url"
 				],
 				attributesToSnippet: (_searchParams$attribu2 = searchParams === null || searchParams === void 0 ? void 0 : searchParams.attributesToSnippet) !== null && _searchParams$attribu2 !== void 0 ? _searchParams$attribu2 : [
-					`hierarchy.lvl1:${snippetLength.current}`,
-					`hierarchy.lvl2:${snippetLength.current}`,
-					`hierarchy.lvl3:${snippetLength.current}`,
-					`hierarchy.lvl4:${snippetLength.current}`,
-					`hierarchy.lvl5:${snippetLength.current}`,
-					`hierarchy.lvl6:${snippetLength.current}`,
-					`content:${snippetLength.current}`
+					`hierarchy.lvl1:15`,
+					`hierarchy.lvl2:15`,
+					`hierarchy.lvl3:15`,
+					`hierarchy.lvl4:15`,
+					`hierarchy.lvl5:15`,
+					`hierarchy.lvl6:15`,
+					`content:15`
 				],
 				snippetEllipsisText: (_searchParams$snippet = searchParams === null || searchParams === void 0 ? void 0 : searchParams.snippetEllipsisText) !== null && _searchParams$snippet !== void 0 ? _searchParams$snippet : "…",
 				highlightPreTag: (_searchParams$highlig = searchParams === null || searchParams === void 0 ? void 0 : searchParams.highlightPreTag) !== null && _searchParams$highlig !== void 0 ? _searchParams$highlig : "<mark>",
@@ -16309,7 +16305,7 @@ function createAutocomplete(options) {
 }
 
 //#endregion
-//#region ../docsearch-react/dist/esm/DocSearchModal-D_tfhoN1.js
+//#region ../docsearch-react/dist/esm/DocSearchModal-CITTG0fe.js
 init_compat();
 const _excluded$3 = ["translations"];
 function KeywordSearchBox(_ref) {
@@ -16374,7 +16370,8 @@ const _excluded$4 = [
 	"recentSearchesLimit",
 	"recentSearchesWithFavoritesLimit",
 	"indices",
-	"facets"
+	"facets",
+	"footerAction"
 ];
 const _excluded2 = [
 	"footer",
@@ -16383,7 +16380,7 @@ const _excluded2 = [
 ];
 function DocSearchModal(_ref) {
 	var _translations$searchB;
-	let { appId, apiKey, maxResultsPerGroup, theme, onClose = noop$1, transformItems = identity, hitComponent = Hit, resultsFooterComponent = () => null, navigator, initialScrollY = 0, transformSearchClient = identity, disableUserPersonalization = false, initialQuery: initialQueryFromProp = "", translations = {}, getMissingResultsUrl, insights = false, recentSearchesLimit = 7, recentSearchesWithFavoritesLimit = 4, indices, facets } = _ref, props = _objectWithoutProperties$6(_ref, _excluded$4);
+	let { appId, apiKey, maxResultsPerGroup, theme, onClose = noop$1, transformItems = identity, hitComponent = Hit, resultsFooterComponent = () => null, navigator, initialScrollY = 0, transformSearchClient = identity, disableUserPersonalization = false, initialQuery: initialQueryFromProp = "", translations = {}, getMissingResultsUrl, insights = false, recentSearchesLimit = 7, recentSearchesWithFavoritesLimit = 4, indices, facets, footerAction } = _ref, props = _objectWithoutProperties$6(_ref, _excluded$4);
 	const { footer: footerTranslations, searchBox: searchBoxTranslations, facets: facetBarTranslations } = translations, screenStateTranslations = _objectWithoutProperties$6(translations, _excluded2);
 	const [state, setState] = En.useState({
 		query: "",
@@ -16395,7 +16392,7 @@ function DocSearchModal(_ref) {
 		status: "idle"
 	});
 	const placeholder = (translations === null || translations === void 0 || (_translations$searchB = translations.searchBox) === null || _translations$searchB === void 0 ? void 0 : _translations$searchB.placeholderText) || props.placeholder || "Search docs";
-	const { containerRef, modalRef, formElementRef, dropdownRef, inputRef, snippetLength } = useModalRefs();
+	const { containerRef, modalRef, formElementRef, dropdownRef, inputRef } = useModalRefs();
 	const { initialQuery, initialQueryFromSelection } = useInitialModalQuery(initialQueryFromProp);
 	const searchClient = useSearchClient(appId, apiKey, transformSearchClient);
 	const indexes = En.useMemo(() => normalizeDocSearchIndexes({ indices }), [indices]);
@@ -16449,7 +16446,6 @@ function DocSearchModal(_ref) {
 				setStatus,
 				searchClient,
 				indexes,
-				snippetLength,
 				insights: Boolean(insights),
 				appId,
 				apiKey,
@@ -16471,7 +16467,6 @@ function DocSearchModal(_ref) {
 		inputRef,
 		initialScrollY,
 		modalRef,
-		snippetLength,
 		theme
 	});
 	En.useEffect(() => {
@@ -16528,7 +16523,10 @@ function DocSearchModal(_ref) {
 				if (!isModifierEvent(event)) onClose();
 			}
 		})),
-		footer: /* @__PURE__ */ En.createElement(Footer, { translations: footerTranslations }),
+		footer: /* @__PURE__ */ En.createElement(Footer, {
+			translations: footerTranslations,
+			footerAction
+		}),
 		onClose
 	});
 }
@@ -16612,7 +16610,7 @@ init_compat();
 function isEditingContent(event) {
 	const element = event.composedPath()[0];
 	const tagName = element.tagName;
-	return element.isContentEditable || tagName === "INPUT" || tagName === "SELECT" || tagName === "TEXTAREA";
+	return element.isContentEditable || tagName === "INPUT" || tagName === "SELECT" || tagName === "TEXTAREA" || tagName === "BUTTON";
 }
 function useDocSearchKeyboardEvents({ isOpen, isAskAiActive, onAskAiToggle, onClose, onOpen, keyboardShortcuts = DEFAULT_KEYBOARD_SHORTCUTS }) {
 	En.useEffect(() => {
@@ -16907,7 +16905,8 @@ const _excluded = [
 	"environment",
 	"transformSearchClient",
 	"hitComponent",
-	"resultsFooterComponent"
+	"resultsFooterComponent",
+	"footerAction"
 ];
 function getHTMLElement(value, env) {
 	if (typeof value !== "string") return value;
@@ -16930,14 +16929,16 @@ function createTemplateFunction(original) {
 function createDocSearch(Component, version) {
 	return (allProps) => {
 		const input = allProps;
-		const { container, environment, transformSearchClient, hitComponent, resultsFooterComponent } = input, rest = _objectWithoutProperties$5(input, _excluded);
+		const { container, environment, transformSearchClient, hitComponent, resultsFooterComponent, footerAction } = input, rest = _objectWithoutProperties$5(input, _excluded);
 		const containerElement = getHTMLElement(container, environment || (typeof window !== "undefined" ? window : void 0));
 		const ref = b$1();
 		let isReady = false;
+		const FooterAction = createTemplateFunction(footerAction);
 		J(_$1(Component, _objectSpread2$1(_objectSpread2$1({}, rest), {}, {
 			ref,
 			hitComponent: createTemplateFunction(hitComponent),
 			resultsFooterComponent: createTemplateFunction(resultsFooterComponent),
+			footerAction: FooterAction ? _$1(FooterAction, null) : void 0,
 			transformSearchClient: (searchClient) => {
 				if (typeof searchClient === "object" && searchClient !== null && "addAlgoliaAgent" in searchClient && typeof searchClient.addAlgoliaAgent === "function") searchClient.addAlgoliaAgent("docsearch.js", version);
 				return typeof transformSearchClient === "function" ? transformSearchClient(searchClient) : searchClient;