@shlinkio/shlink-frontend-kit 0.8.6 → 0.8.8

package/dist/index.d.ts

@@ -210,8 +210,11 @@ export declare type ToggleResult = [boolean, () => void, () => void, () => void]
 
 export declare const ToggleSwitch: FC<BooleanControlProps>;
 
+/** @deprecated Use `useRef<T>(null) instead */
 export declare const useElementRef: <T extends HTMLElement>() => RefObject<T | null>;
 
+export declare const useGoBack: () => () => void | Promise<void>;
+
 export declare const useOrder: <T>(initialOrder: Order<T>) => [Order<T>, (orderField?: T, orderDir?: OrderDir) => void];
 
 export declare const useParsedQuery: <T>() => T;

package/dist/index.js

@@ -1,13 +1,12 @@
-import { jsx as o, jsxs as m, Fragment as g } from "react/jsx-runtime";
-import { faCircleNotch as R, faSearch as A, faEllipsisV as I, faSortAmountUp as E, faSortAmountDown as P } from "@fortawesome/free-solid-svg-icons";
+import { jsx as o, jsxs as m, Fragment as w } from "react/jsx-runtime";
+import { faCircleNotch as A, faSearch as I, faEllipsisV as E, faSortAmountUp as P, faSortAmountDown as F } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
 import { clsx as u } from "clsx";
-import { Card as N, CardHeader as F, CardBody as H, Dropdown as M, DropdownToggle as T, DropdownMenu as k, NavItem as $, NavLink as j, Nav as G, UncontrolledDropdown as U, DropdownItem as w } from "reactstrap";
-import { useId as v, useState as b, useMemo as V, useRef as q, useCallback as S, Children as Q, isValidElement as Y, useEffect as W } from "react";
-import { u as z, a as J } from "./use-toggle-DlYE68B3.js";
-import { b as Ue } from "./use-toggle-DlYE68B3.js";
-import { useLocation as X, NavLink as Z } from "react-router";
-const be = ({ className: e, children: r, loading: t = !1, type: n = "default", fullWidth: s = !1 }) => /* @__PURE__ */ o(
+import { Card as N, CardHeader as H, CardBody as M, Dropdown as $, DropdownToggle as v, DropdownMenu as k, NavItem as G, NavLink as j, Nav as U, UncontrolledDropdown as V, DropdownItem as g } from "reactstrap";
+import { useId as S, useState as b, useRef as y, useCallback as C, useMemo as q, Children as Q, isValidElement as Y, useEffect as W } from "react";
+import { useNavigate as z, useLocation as J, NavLink as X } from "react-router";
+import { u as Z, a as B } from "./use-toggle-CNvdDGvy.js";
+const ge = ({ className: e, children: r, loading: t = !1, type: n = "default", fullWidth: s = !1 }) => /* @__PURE__ */ o(
   N,
   {
     body: !0,
@@ -24,18 +23,18 @@ const be = ({ className: e, children: r, loading: t = !1, type: n = "default", f
           "text-danger": n === "error"
         }),
         children: [
-          t && /* @__PURE__ */ o(p, { icon: R, spin: !0 }),
+          t && /* @__PURE__ */ o(p, { icon: A, spin: !0 }),
           t && /* @__PURE__ */ o("span", { className: "ms-2", children: r ?? "Loading..." }),
           !t && r
         ]
       }
     )
   }
-), B = ({ title: e, children: r, bodyClassName: t, ...n }) => /* @__PURE__ */ m(N, { ...n, children: [
-  e && /* @__PURE__ */ o(F, { role: "heading", "aria-level": 4, children: e }),
-  /* @__PURE__ */ o(H, { className: t, children: r })
+), K = ({ title: e, children: r, bodyClassName: t, ...n }) => /* @__PURE__ */ m(N, { ...n, children: [
+  e && /* @__PURE__ */ o(H, { role: "heading", "aria-level": 4, children: e }),
+  /* @__PURE__ */ o(M, { className: t, children: r })
 ] }), we = ({ children: e, type: r, className: t, small: n = !1 }) => /* @__PURE__ */ o(
-  B,
+  K,
   {
     role: "document",
     className: u("text-center", {
@@ -49,8 +48,8 @@ const be = ({ className: e, children: r, loading: t = !1, type: n = "default", f
     bodyClassName: u({ "p-2": n }),
     children: e
   }
-), y = ({ checked: e = !1, onChange: r, className: t, children: n, type: s, inline: c = !1 }) => {
-  const i = v(), a = (h) => r == null ? void 0 : r(h.target.checked, h), l = {
+), O = ({ checked: e = !1, onChange: r, className: t, children: n, type: s, inline: c = !1 }) => {
+  const i = S(), a = (h) => r == null ? void 0 : r(h.target.checked, h), l = {
     "form-switch": s === "switch",
     "form-checkbox": s === "checkbox"
   }, d = c ? { display: "inline-block" } : {};
@@ -58,12 +57,12 @@ const be = ({ className: e, children: r, loading: t = !1, type: n = "default", f
     /* @__PURE__ */ o("input", { type: "checkbox", className: "form-check-input", id: i, checked: e, onChange: a }),
     /* @__PURE__ */ o("label", { className: "form-check-label", htmlFor: i, children: n })
   ] });
-}, ge = (e) => /* @__PURE__ */ o(y, { type: "checkbox", ...e }), Ne = (e) => /* @__PURE__ */ o(y, { type: "switch", ...e }), K = ({ children: e, label: r, className: t = "", labelClassName: n = "", noMargin: s = !1, id: c }) => /* @__PURE__ */ m("div", { className: `${t} ${s ? "" : "mb-3"}`, children: [
+}, Ne = (e) => /* @__PURE__ */ o(O, { type: "checkbox", ...e }), Ce = (e) => /* @__PURE__ */ o(O, { type: "switch", ...e }), ee = ({ children: e, label: r, className: t = "", labelClassName: n = "", noMargin: s = !1, id: c }) => /* @__PURE__ */ m("div", { className: `${t} ${s ? "" : "mb-3"}`, children: [
   /* @__PURE__ */ o("label", { className: `form-label ${n}`, htmlFor: c, children: r }),
   e
-] }), Ce = ({ children: e, value: r, onChange: t, type: n, required: s, placeholder: c, className: i, labelClassName: a }) => {
-  const l = v();
-  return /* @__PURE__ */ o(K, { label: /* @__PURE__ */ m(g, { children: [
+] }), _e = ({ children: e, value: r, onChange: t, type: n, required: s, placeholder: c, className: i, labelClassName: a }) => {
+  const l = S();
+  return /* @__PURE__ */ o(ee, { label: /* @__PURE__ */ m(w, { children: [
     e,
     ":"
   ] }), className: i, labelClassName: a, id: l, children: /* @__PURE__ */ o(
@@ -78,14 +77,14 @@ const be = ({ className: e, children: r, loading: t = !1, type: n = "default", f
       onChange: (d) => t(d.target.value)
     }
   ) });
-}, ee = 500;
+}, re = 500;
 let f;
-const _ = () => {
+const T = () => {
   f !== null && clearTimeout(f), f = null;
-}, _e = ({ onChange: e, className: r, large: t = !0, noBorder: n = !1, initialValue: s = "", setTimeout_: c = setTimeout }) => {
-  const [i, a] = b(s), l = (d, h = ee) => {
-    a(d), _(), f = c(() => {
-      e(d), _();
+}, Te = ({ onChange: e, className: r, large: t = !0, noBorder: n = !1, initialValue: s = "", setTimeout_: c = setTimeout }) => {
+  const [i, a] = b(s), l = (d, h = re) => {
+    a(d), T(), f = c(() => {
+      e(d), T();
     }, h);
   };
   return /* @__PURE__ */ m("div", { className: u("search-field", r), children: [
@@ -102,7 +101,7 @@ const _ = () => {
         onChange: (d) => l(d.target.value)
       }
     ),
-    /* @__PURE__ */ o(p, { icon: A, className: "search-field__icon" }),
+    /* @__PURE__ */ o(p, { icon: I, className: "search-field__icon" }),
     /* @__PURE__ */ o(
       "button",
       {
@@ -115,7 +114,10 @@ const _ = () => {
       }
     )
   ] });
-}, re = (e) => {
+}, ve = () => y(null), ke = () => {
+  const e = z();
+  return C(() => e(-1), [e]);
+}, te = (e) => {
   const r = new URLSearchParams(e), t = {};
   return r.forEach((n, s) => {
     if (s.endsWith("[]")) {
@@ -124,23 +126,23 @@ const _ = () => {
     } else
       t[s] = n;
   }), t;
-}, Te = (e) => {
+}, Se = (e) => {
   const r = new URLSearchParams();
   for (const [t, n] of Object.entries(e))
     n !== void 0 && (Array.isArray(n) ? n.forEach((s) => r.append(`${t}[]`, `${s}`)) : r.append(t, `${n}`));
   return r.toString();
-}, ke = () => {
-  const { search: e } = X();
-  return V(() => re(e), [e]);
-}, te = 2e3, ve = (e = {}, r, t = globalThis.setTimeout, n = globalThis.clearTimeout) => {
-  const { initialValue: s = !1, delay: c = te } = typeof e == "boolean" ? {
+}, ye = () => {
+  const { search: e } = J();
+  return q(() => te(e), [e]);
+}, ne = 2e3, Oe = (e = {}, r, t = globalThis.setTimeout, n = globalThis.clearTimeout) => {
+  const { initialValue: s = !1, delay: c = ne } = typeof e == "boolean" ? {
     initialValue: e,
     delay: r
-  } : e, { setTimeout: i } = z(c, t, n), [a, l] = b(s), d = q(s), h = S(() => {
+  } : e, { setTimeout: i } = Z(c, t, n), [a, l] = b(s), d = y(s), h = C(() => {
     l(!d.current), i(() => l(d.current));
   }, [i]);
   return [a, h];
-}, ne = ({
+}, oe = ({
   text: e,
   disabled: r = !1,
   className: t,
@@ -153,18 +155,18 @@ const _ = () => {
   size: d,
   ...h
 }) => {
-  const [O, L] = J(), x = u("dropdown-btn__toggle", t, {
+  const [L, x] = B(), D = u("dropdown-btn__toggle", t, {
     "btn-block": !l,
     "dropdown-btn__toggle--with-caret": !c
-  }), D = { minWidth: a && `${a}px` };
-  return /* @__PURE__ */ m(M, { isOpen: O, toggle: L, disabled: r, className: s, children: [
-    /* @__PURE__ */ o(T, { size: d, caret: !c, className: x, color: "primary", ...h, children: e }),
-    /* @__PURE__ */ o(k, { className: "w-100", end: i, style: D, children: n })
+  }), R = { minWidth: a && `${a}px` };
+  return /* @__PURE__ */ m($, { isOpen: L, toggle: x, disabled: r, className: s, children: [
+    /* @__PURE__ */ o(v, { size: d, caret: !c, className: D, color: "primary", ...h, children: e }),
+    /* @__PURE__ */ o(k, { className: "w-100", end: i, style: R, children: n })
   ] });
-}, Se = ({ children: e, minWidth: r, label: t = "Options" }) => /* @__PURE__ */ o(
-  ne,
+}, Le = ({ children: e, minWidth: r, label: t = "Options" }) => /* @__PURE__ */ o(
+  oe,
   {
-    text: /* @__PURE__ */ o(p, { className: "px-1", icon: I }),
+    text: /* @__PURE__ */ o(p, { className: "px-1", icon: E }),
     "aria-label": t,
     size: "sm",
     minWidth: r,
@@ -173,41 +175,41 @@ const _ = () => {
     inline: !0,
     children: e
   }
-), oe = ({ children: e, ...r }) => /* @__PURE__ */ o($, { children: /* @__PURE__ */ o(j, { className: "nav-pills__nav-link", tag: Z, ...r, children: e }) }), ye = ({ children: e, fill: r = !1, className: t = "" }) => /* @__PURE__ */ o(N, { className: `nav-pills__nav p-0 overflow-hidden ${t}`, body: !0, children: /* @__PURE__ */ o(G, { pills: !0, fill: r, children: Q.map(e, (n) => {
-  if (!Y(n) || n.type !== oe)
+), se = ({ children: e, ...r }) => /* @__PURE__ */ o(G, { children: /* @__PURE__ */ o(j, { className: "nav-pills__nav-link", tag: X, ...r, children: e }) }), xe = ({ children: e, fill: r = !1, className: t = "" }) => /* @__PURE__ */ o(N, { className: `nav-pills__nav p-0 overflow-hidden ${t}`, body: !0, children: /* @__PURE__ */ o(U, { pills: !0, fill: r, children: Q.map(e, (n) => {
+  if (!Y(n) || n.type !== se)
     throw new Error("Only NavPillItem children are allowed inside NavPills.");
   return n;
 }) }) });
-function C(e, r, t) {
-  return typeof e == "object" ? C(e.currentField, e.newField, e.currentOrderDir) : e !== r ? "ASC" : t ? {
+function _(e, r, t) {
+  return typeof e == "object" ? _(e.currentField, e.newField, e.currentOrderDir) : e !== r ? "ASC" : t ? {
     ASC: "DESC",
     DESC: void 0
   }[t] : "ASC";
 }
-function se(e, r, t) {
-  return typeof e == "object" ? se(e.currentField, e.newField, e.currentOrderDir) : {
+function ce(e, r, t) {
+  return typeof e == "object" ? ce(e.currentField, e.newField, e.currentOrderDir) : {
     field: r,
-    dir: C(e, r, t)
+    dir: _(e, r, t)
   };
 }
-const Oe = (e, { field: r, dir: t }) => !r || !t ? e : e.sort((n, s) => {
+const De = (e, { field: r, dir: t }) => !r || !t ? e : e.sort((n, s) => {
   const c = t === "ASC" ? 1 : -1, i = t === "ASC" ? -1 : 1;
   return n[r] > s[r] ? c : i;
-}), Le = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, xe = (e) => {
+}), Re = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, Ae = (e) => {
   const [r, t] = e.split("-");
   return { field: r, dir: t };
-}, De = (e) => {
-  const [r, t] = b(e), n = S((s, c) => t({ field: s, dir: c }), []);
+}, Ie = (e) => {
+  const [r, t] = b(e), n = C((s, c) => t({ field: s, dir: c }), []);
   return [r, n];
 };
-function Re({ items: e, order: r, onChange: t, isButton: n = !0, right: s = !1, prefixed: c = !0 }) {
+function Ee({ items: e, order: r, onChange: t, isButton: n = !0, right: s = !1, prefixed: c = !0 }) {
   const i = (a) => () => {
-    const l = C(a, r.field, r.dir);
+    const l = _(a, r.field, r.dir);
     t(l ? a : void 0, l);
   };
-  return /* @__PURE__ */ m(U, { children: [
+  return /* @__PURE__ */ m(V, { children: [
     /* @__PURE__ */ m(
-      T,
+      v,
       {
         caret: !0,
         color: n ? "primary" : "link",
@@ -216,9 +218,9 @@ function Re({ items: e, order: r, onChange: t, isButton: n = !0, right: s = !1,
           "btn-sm p-0": !n
         }),
         children: [
-          !n && /* @__PURE__ */ o(g, { children: "Order by" }),
+          !n && /* @__PURE__ */ o(w, { children: "Order by" }),
           n && !r.field && /* @__PURE__ */ o("i", { children: "Order by..." }),
-          n && r.field && /* @__PURE__ */ m(g, { children: [
+          n && r.field && /* @__PURE__ */ m(w, { children: [
             c && "Order by: ",
             e[r.field],
             " - ",
@@ -229,70 +231,71 @@ function Re({ items: e, order: r, onChange: t, isButton: n = !0, right: s = !1,
     ),
     /* @__PURE__ */ m(k, { end: s, className: "w-100", style: n ? void 0 : { minWidth: "11rem" }, children: [
       Object.entries(e).map(([a, l]) => /* @__PURE__ */ m(
-        w,
+        g,
         {
           active: r.field === a,
           onClick: i(a),
           className: "d-flex justify-content-between align-items-center",
           children: [
             l,
-            r.field === a && /* @__PURE__ */ o(p, { icon: r.dir === "ASC" ? E : P })
+            r.field === a && /* @__PURE__ */ o(p, { icon: r.dir === "ASC" ? P : F })
           ]
         },
         a
       )),
-      /* @__PURE__ */ o(w, { divider: !0 }),
-      /* @__PURE__ */ o(w, { disabled: !r.field, onClick: () => t(), children: /* @__PURE__ */ o("i", { children: "Clear selection" }) })
+      /* @__PURE__ */ o(g, { divider: !0 }),
+      /* @__PURE__ */ o(g, { disabled: !r.field, onClick: () => t(), children: /* @__PURE__ */ o("i", { children: "Clear selection" }) })
     ] })
   ] });
 }
-const Ae = "#4696e5", Ie = "rgba(70, 150, 229, 0.4)", Ee = "#f77f28", Pe = "rgba(247, 127, 40, 0.4)", Fe = "white", He = "#161b22", ce = (e) => {
+const Pe = "#4696e5", Fe = "rgba(70, 150, 229, 0.4)", He = "#f77f28", Me = "rgba(247, 127, 40, 0.4)", $e = "white", Ge = "#161b22", ae = (e) => {
   var r;
   return (r = document.querySelector("html")) == null ? void 0 : r.setAttribute("data-theme", e);
-}, Me = () => {
+}, je = () => {
   var e;
   return ((e = document.querySelector("html")) == null ? void 0 : e.getAttribute("data-theme")) === "dark";
-}, ae = (e = window.matchMedia.bind(window)) => e("(prefers-color-scheme: dark)").matches ? "dark" : "light", $e = (e) => {
-  const [r, t] = b(() => e ?? ae());
+}, le = (e = window.matchMedia.bind(window)) => e("(prefers-color-scheme: dark)").matches ? "dark" : "light", Ue = (e) => {
+  const [r, t] = b(() => e ?? le());
   return W(() => {
-    ce(r);
+    ae(r);
   }, [r]), [r, t];
 };
 export {
-  ge as Checkbox,
-  ne as DropdownBtn,
-  Ee as HIGHLIGHTED_COLOR,
-  Pe as HIGHLIGHTED_COLOR_ALPHA,
-  Ce as InputFormGroup,
-  K as LabeledFormGroup,
-  Ae as MAIN_COLOR,
-  Ie as MAIN_COLOR_ALPHA,
-  be as Message,
-  oe as NavPillItem,
-  ye as NavPills,
-  Re as OrderingDropdown,
-  He as PRIMARY_DARK_COLOR,
-  Fe as PRIMARY_LIGHT_COLOR,
+  Ne as Checkbox,
+  oe as DropdownBtn,
+  He as HIGHLIGHTED_COLOR,
+  Me as HIGHLIGHTED_COLOR_ALPHA,
+  _e as InputFormGroup,
+  ee as LabeledFormGroup,
+  Pe as MAIN_COLOR,
+  Fe as MAIN_COLOR_ALPHA,
+  ge as Message,
+  se as NavPillItem,
+  xe as NavPills,
+  Ee as OrderingDropdown,
+  Ge as PRIMARY_DARK_COLOR,
+  $e as PRIMARY_LIGHT_COLOR,
   we as Result,
-  Se as RowDropdownBtn,
-  _e as SearchField,
-  B as SimpleCard,
-  Ne as ToggleSwitch,
-  ce as changeThemeInMarkup,
-  se as determineOrder,
-  C as determineOrderDir,
-  ae as getSystemPreferredTheme,
-  Me as isDarkThemeEnabled,
-  Le as orderToString,
-  re as parseQueryString,
-  Oe as sortList,
-  xe as stringToOrder,
-  Te as stringifyQueryParams,
-  Ue as useElementRef,
-  De as useOrder,
-  ke as useParsedQuery,
-  $e as useTheme,
-  z as useTimeout,
-  ve as useTimeoutToggle,
-  J as useToggle
+  Le as RowDropdownBtn,
+  Te as SearchField,
+  K as SimpleCard,
+  Ce as ToggleSwitch,
+  ae as changeThemeInMarkup,
+  ce as determineOrder,
+  _ as determineOrderDir,
+  le as getSystemPreferredTheme,
+  je as isDarkThemeEnabled,
+  Re as orderToString,
+  te as parseQueryString,
+  De as sortList,
+  Ae as stringToOrder,
+  Se as stringifyQueryParams,
+  ve as useElementRef,
+  ke as useGoBack,
+  Ie as useOrder,
+  ye as useParsedQuery,
+  Ue as useTheme,
+  Z as useTimeout,
+  Oe as useTimeoutToggle,
+  B as useToggle
 };

package/dist/tailwind.d.ts

@@ -3,16 +3,20 @@ import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLProps } from 'react';
 import { InputHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
 import { LinkProps } from 'react-router';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
+import { RefObject } from 'react';
 
 export declare type BaseInputProps = {
     size?: Size;
     feedback?: 'error';
 };
 
+declare type BaseInputProps_2 = Omit<SearchInputProps, 'role' | 'aria-autocomplete' | 'aria-expanded' | 'aria-controls' | 'onChange'>;
+
 declare type BooleanControlProps = Omit<HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'value' | 'defaultValue'> & {
     onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
 };
@@ -23,6 +27,7 @@ export declare type ButtonProps = PropsWithChildren<{
     disabled?: boolean;
     className?: string;
     variant?: 'primary' | 'secondary' | 'danger';
+    type?: HTMLButtonElement['type'];
     size?: Size;
     inline?: boolean;
     solid?: boolean;
@@ -154,6 +159,29 @@ export declare type LinkButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size'
 
 declare type LinkButtonProps_2 = LinkProps;
 
+export declare function Listbox<Item>({ id, items, onSelectItem, renderItem, className, noItemsMessage, anchor, 'aria-label': label, ...rest }: ListboxProps<Item>): JSX.Element;
+
+export declare type ListboxProps<Item> = Omit<CardProps, 'id' | 'role' | 'aria-orientation'> & {
+    /** Map of items in the listbox, with a key representing them uniquely */
+    items: Map<string, Item>;
+    /** Invoked when the active item is selected via click or `Enter` */
+    onSelectItem: (item: Item) => void;
+    /** To customize the shape of an item */
+    renderItem: (item: Item) => ReactNode;
+    /** Used to link with the element controlling this listbox */
+    id: string;
+    /**
+     * Allows to optionally anchor this listbox to another element.
+     * If provided, it will attach arrow key and Enter press listeners to interact with the listbox.
+     */
+    anchor?: RefObject<HTMLElement | null>;
+    /**
+     * Message to display when the list of items is empty.
+     * Defaults to 'No items'.
+     */
+    noItemsMessage?: string;
+};
+
 /**
  * Component used to display a card with general information, about current page status, loading, etc.
  */
@@ -209,7 +237,7 @@ export declare const prettifyPageNumber: (pageNumber: NumberOrEllipsis) => strin
 
 export declare const progressivePagination: (currentPage: number, pageCount: number) => NumberOrEllipsis[];
 
-declare type RegularButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size'>;
+declare type RegularButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
 
 declare type RegularCardModalProps = CommonCardModalProps & {
     /** Danger dialogs use danger variants in title and confirm button */
@@ -254,16 +282,47 @@ export declare type RevealablePasswordInputProps = Omit<InputProps, 'type'> & {
 
 export declare const roundTen: (number: number) => number;
 
+/**
+ * This component combines a SearchInput with a Listbox, to behave close to an editable combobox with autocomplete, as
+ * described in https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/.
+ * The main difference is that the input is used only to search in the listbox, and once an item is selected, the input
+ * is cleared and the listbox is closed.
+ */
+export declare function SearchCombobox<Item>({ searchResults, onSearch, onSelectSearchResult, renderSearchResult, size, listboxSpan, onFocus, ...rest }: SearchComboboxProps<Item>): JSX.Element;
+
+export declare type SearchComboboxProps<Item> = BaseInputProps_2 & {
+    /** If defined, it will display a listbox with the search results */
+    searchResults?: Map<string, Item>;
+    /** Invoked when the search input value changes */
+    onSearch: (searchTerm: string) => void;
+    /** Invoked when the active search result is selected */
+    onSelectSearchResult: (item: Item) => void;
+    /** To customize the look and feel of a search result */
+    renderSearchResult: (item: Item) => ReactNode;
+    /**
+     * Determines how the listbox should span when visible.
+     * - `full`: Be always as big as the input, regardless its content.
+     * - `auto`: Take only the needed space to display its content, up to the width of the input.
+     *
+     * Defaults to `full`.
+     */
+    listboxSpan?: 'full' | 'auto';
+};
+
 export declare const SearchInput: ForwardRefExoticComponent<Omit<InputProps, "className" | "onChange" | "value"> & {
 onChange: (searchTerm: string) => void;
 containerClassName?: string;
 inputClassName?: string;
+/** When set to true, it displays a loading indicator in place of the magnifyinf glass icon */
+loading?: boolean;
 } & RefAttributes<HTMLInputElement>>;
 
 export declare type SearchInputProps = Omit<InputProps, 'className' | 'onChange' | 'value'> & {
     onChange: (searchTerm: string) => void;
     containerClassName?: string;
     inputClassName?: string;
+    /** When set to true, it displays a loading indicator in place of the magnifyinf glass icon */
+    loading?: boolean;
 };
 
 export declare type SectionType = 'head' | 'body' | 'footer';