@findlane/browser 0.4.1 → 0.4.2

package/dist/react/dialog.d.ts

@@ -5,7 +5,9 @@ export type SearchDialogProps<T> = Omit<SearchBoxProps<T>, "autoFocus"> & {
     trigger?: ReactNode;
     /** Open with ⌘K (Ctrl+K elsewhere) and "/" (default true). */
     shortcuts?: boolean;
+    /** Shown at the bottom of the open dialog, such as keyboard hints or a credit. */
+    footer?: ReactNode;
 };
 /** A search button that opens a dialog with a search box, as on docs sites; ⌘K and "/" open it too.
  * The dialog is the browser's own, so focus stays in it and the page behind can't be used. */
-export declare function SearchDialog<T = Record<string, unknown>>({ trigger, shortcuts, placeholder, label, action, renderHit, empty, seeAll, className, ...options }: SearchDialogProps<T>): import("react").JSX.Element;
+export declare function SearchDialog<T = Record<string, unknown>>({ trigger, shortcuts, footer, placeholder, label, action, renderHit, empty, seeAll, className, ...options }: SearchDialogProps<T>): import("react").JSX.Element;

package/dist/react/dialog.js

@@ -6,7 +6,7 @@ import { useAutocomplete } from "./use-autocomplete.js";
 const onMac = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
 /** A search button that opens a dialog with a search box, as on docs sites; ⌘K and "/" open it too.
  * The dialog is the browser's own, so focus stays in it and the page behind can't be used. */
-export function SearchDialog({ trigger, shortcuts = true, placeholder, label = "Search", action, renderHit, empty, seeAll, className, ...options }) {
+export function SearchDialog({ trigger, shortcuts = true, footer, placeholder, label = "Search", action, renderHit, empty, seeAll, className, ...options }) {
     const dialog = useRef(null);
     const [open, setOpen] = useState(false);
     const close = () => dialog.current?.close();
@@ -48,16 +48,16 @@ export function SearchDialog({ trigger, shortcuts = true, placeholder, label = "
         window.addEventListener("keydown", onKey);
         return () => window.removeEventListener("keydown", onKey);
     }, [shortcuts]);
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: className, "data-findlane-dialog-trigger": "", "aria-haspopup": "dialog", onClick: show, children: trigger ?? (_jsxs(_Fragment, { children: [_jsx("span", { children: label }), shortcuts && _jsx("kbd", { "aria-hidden": "true", children: mac ? "⌘K" : "Ctrl K" })] })) }), _jsx("dialog", { ref: dialog, "data-findlane-dialog": "", "aria-label": label, onClose: () => setOpen(false), 
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: className, "data-findlane-dialog-trigger": "", "aria-haspopup": "dialog", onClick: show, children: trigger ?? (_jsxs(_Fragment, { children: [_jsx("span", { children: label }), shortcuts && _jsx("kbd", { "aria-hidden": "true", children: mac ? "⌘K" : "Ctrl K" })] })) }), _jsxs("dialog", { ref: dialog, "data-findlane-dialog": "", "aria-label": label, onClose: () => setOpen(false), 
                 // A click on the backdrop lands on the dialog itself.
                 onClick: (event) => { if (event.target === event.currentTarget)
-                    close(); }, children: open && (_jsxs("div", { "data-findlane-searchbox": "", "data-open": box.isOpen || undefined, children: [_jsx("form", { role: "search", onSubmit: (event) => event.preventDefault(), children: _jsx("input", { type: "search", placeholder: placeholder, "aria-label": label, autoFocus: true, ...box.getInputProps({
-                                    // Escape closes the dialog rather than only the suggestions.
-                                    onKeyDown: (event) => {
-                                        if (event.key === "Escape") {
-                                            event.preventDefault();
-                                            close();
-                                        }
-                                    },
-                                }) }) }), box.isOpen && (_jsx(Suggestions, { box: box, label: label, action: action, renderHit: renderHit, empty: empty, seeAll: seeAll }))] })) })] }));
+                    close(); }, children: [open && (_jsxs("div", { "data-findlane-searchbox": "", "data-open": box.isOpen || undefined, children: [_jsx("form", { role: "search", onSubmit: (event) => event.preventDefault(), children: _jsx("input", { type: "search", placeholder: placeholder, "aria-label": label, autoFocus: true, ...box.getInputProps({
+                                        // Escape closes the dialog rather than only the suggestions.
+                                        onKeyDown: (event) => {
+                                            if (event.key === "Escape") {
+                                                event.preventDefault();
+                                                close();
+                                            }
+                                        },
+                                    }) }) }), box.isOpen && (_jsx(Suggestions, { box: box, label: label, action: action, renderHit: renderHit, empty: empty, seeAll: seeAll }))] })), open && footer && _jsx("div", { "data-findlane-dialog-footer": "", children: footer })] })] }));
 }

package/dist/react/styles.css

@@ -125,6 +125,12 @@
 :where([data-findlane-dialog] > [data-findlane-searchbox]) {
   padding: 12px;
 }
+:where([data-findlane-dialog-footer]) {
+  padding: 8px 12px;
+  color: var(--findlane-muted, color-mix(in srgb, currentColor 60%, transparent));
+  font-size: 0.85em;
+  border-top: 1px solid var(--findlane-border, color-mix(in srgb, currentColor 10%, transparent));
+}
 /* In the dialog, suggestions sit under the input instead of floating over the page. */
 :where([data-findlane-dialog] [data-findlane-panel]) {
   position: static;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@findlane/browser",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Findlane browser SDK: fast, typo-tolerant public search from the browser with an index's public ID, plus React hooks and components.",
   "keywords": ["findlane", "search", "full-text search", "typo tolerance", "instant search", "ecommerce search", "browser", "react", "autocomplete"],
   "license": "MIT",