@shlinkio/shlink-frontend-kit 0.8.13 → 0.9.0

package/dist/index.js

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

package/dist/tailwind.d.ts

@@ -74,7 +74,20 @@ export declare type CloseButtonProps = {
 
 declare type CommonCardModalProps = {
     /** Modal header title */
-    title: string;
+    title: RequiredReactNode;
+};
+
+export declare const CopyToClipboardButton: FC<CopyToClipboardButtonProps>;
+
+export declare type CopyToClipboardButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick' | 'size'> & {
+    /** Text to be copied when the button is clicked */
+    text: string;
+    /** Size of the button. Defaults to `lg` */
+    size?: Size;
+    /** Test seam */
+    initialCopied?: boolean;
+    /** Test seam */
+    navigator_?: typeof globalThis.navigator;
 };
 
 declare type CoverCardModalProps = CommonCardModalProps & {