@shlinkio/shlink-frontend-kit 0.5.3 → 0.7.0

package/dist/index.d.ts

@@ -2,7 +2,6 @@ import { CardProps } from 'reactstrap';
 import { ChangeEvent } from 'react';
 import { DropdownToggleProps } from 'reactstrap/types/lib/DropdownToggle';
 import { FC } from 'react';
-import { InputType } from 'reactstrap/types/lib/Input';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { MutableRefObject } from 'react';
 import { PropsWithChildren } from 'react';
@@ -50,7 +49,7 @@ export declare const InputFormGroup: FC<InputFormGroupProps>;
 export declare type InputFormGroupProps = PropsWithChildren<{
     value: string;
     onChange: (newValue: string) => void;
-    type?: InputType;
+    type?: HTMLInputElement['type'];
     required?: boolean;
     placeholder?: string;
     className?: string;
@@ -118,9 +117,6 @@ export declare type OrderingDropdownProps<T extends string = string> = {
 
 export declare const orderToString: <T>(order: Order<T>) => string | undefined;
 
-/** @deprecated Use parseQueryString instead */
-export declare const parseQuery: <T>(search: string) => T;
-
 /**
  * Parses provided query string into an object.
  * Parameters ending with "[]" will be considered arrays and returned as a single prop with all values.
@@ -163,9 +159,6 @@ export declare type SimpleCardProps = Omit<CardProps, 'title'> & {
 
 export declare const sortList: <List>(list: List[], { field, dir }: Order<keyof List>) => List[];
 
-/** @deprecated Use stringifyQueryParams instead */
-export declare const stringifyQuery: (params: Record<string, unknown | unknown[] | undefined>) => string;
-
 /**
  * Stringify an object of query parameters.
  * Keys explicitly defined with undefined value will be skipped.
@@ -184,9 +177,6 @@ declare type ToggleResult = [boolean, () => void, () => void, () => void];
 
 export declare const ToggleSwitch: FC<BooleanControlProps>;
 
-/** @deprecated Use standard useId() instead */
-export declare const useDomId: () => string;
-
 export declare const useElementRef: <T>() => MutableRefObject<T | null>;
 
 export declare const useOrder: <T>(initialOrder: Order<T>) => [Order<T>, (orderField?: T, orderDir?: OrderDir) => void];

package/dist/index.js

@@ -1,58 +1,68 @@
 import { jsx as s, jsxs as d, Fragment as N } from "react/jsx-runtime";
-import { faCircleNotch as D, faSearch as E, faEllipsisV as P, faSortAmountUp as F, faSortAmountDown as H } from "@fortawesome/free-solid-svg-icons";
+import { faCircleNotch as I, faSearch as y, faEllipsisV as D, faSortAmountUp as E, faSortAmountDown as P } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as g } from "@fortawesome/react-fontawesome";
-import { clsx as m } from "clsx";
-import { Row as T, Card as _, CardHeader as M, CardBody as $, Dropdown as G, DropdownToggle as O, DropdownMenu as S, NavItem as Q, NavLink as U, Nav as j, UncontrolledDropdown as q, DropdownItem as w } from "reactstrap";
-import { useId as k, useState as b, useCallback as f, useRef as C, useMemo as V, Children as Y, isValidElement as z } from "react";
-import { useLocation as J, NavLink as W } from "react-router-dom";
-const X = (e) => ({
-  error: "border-danger",
-  default: ""
-})[e], Z = (e) => ({
-  error: "text-danger",
-  default: "text-muted"
-})[e], he = ({ className: e, children: r, loading: t = !1, type: n = "default", fullWidth: o = !1 }) => {
-  const c = m({
-    "col-md-12": o,
-    "col-md-10 offset-md-1": !o
-  });
-  return /* @__PURE__ */ s(T, { className: m("g-0", e), children: /* @__PURE__ */ s("div", { className: c, children: /* @__PURE__ */ s(_, { className: X(n), body: !0, children: /* @__PURE__ */ d("h3", { className: m("text-center mb-0", Z(n)), children: [
-    t && /* @__PURE__ */ s(g, { icon: D, spin: !0 }),
-    t && /* @__PURE__ */ s("span", { className: "ms-2", children: r ?? "Loading..." }),
-    !t && r
-  ] }) }) }) });
-}, B = ({ title: e, children: r, bodyClassName: t, ...n }) => /* @__PURE__ */ d(_, { ...n, children: [
-  e && /* @__PURE__ */ s(M, { role: "heading", "aria-level": 4, children: e }),
-  /* @__PURE__ */ s($, { className: t, children: r })
-] }), fe = ({ children: e, type: r, className: t, small: n = !1 }) => /* @__PURE__ */ s(T, { className: t, children: /* @__PURE__ */ s("div", { className: m({ "col-md-10 offset-md-1": !n, "col-12": n }), children: /* @__PURE__ */ s(
-  B,
+import { clsx as h } from "clsx";
+import { Card as C, CardHeader as F, CardBody as H, Dropdown as M, DropdownToggle as v, DropdownMenu as O, NavItem as $, NavLink as G, Nav as U, UncontrolledDropdown as j, DropdownItem as w } from "reactstrap";
+import { useId as S, useState as b, useCallback as f, useRef as _, useMemo as q, Children as Q, isValidElement as V } from "react";
+import { useLocation as Y, NavLink as z } from "react-router";
+const ie = ({ className: r, children: e, loading: t = !1, type: n = "default", fullWidth: o = !1 }) => /* @__PURE__ */ s(
+  C,
   {
-    role: "document",
-    className: m("text-center", {
-      "bg-main": r === "success",
-      "bg-danger": r === "error",
-      "bg-warning": r === "warning",
-      "text-white": r !== "warning"
+    body: !0,
+    className: h(r, {
+      "w-100": o,
+      "w-75 mx-auto": !o,
+      "border-danger": n === "error"
     }),
-    bodyClassName: m({ "p-2": n }),
-    children: e
+    children: /* @__PURE__ */ d(
+      "h3",
+      {
+        className: h("text-center mb-0", {
+          "text-muted": n === "default",
+          "text-danger": n === "error"
+        }),
+        children: [
+          t && /* @__PURE__ */ s(g, { icon: I, spin: !0 }),
+          t && /* @__PURE__ */ s("span", { className: "ms-2", children: e ?? "Loading..." }),
+          !t && e
+        ]
+      }
+    )
   }
-) }) }), A = ({ checked: e = !1, onChange: r, className: t, children: n, type: o, inline: c = !1 }) => {
-  const l = k(), a = (h) => r == null ? void 0 : r(h.target.checked, h), i = {
+), J = ({ title: r, children: e, bodyClassName: t, ...n }) => /* @__PURE__ */ d(C, { ...n, children: [
+  r && /* @__PURE__ */ s(F, { role: "heading", "aria-level": 4, children: r }),
+  /* @__PURE__ */ s(H, { className: t, children: e })
+] }), de = ({ children: r, type: e, className: t, small: n = !1 }) => /* @__PURE__ */ s(
+  J,
+  {
+    role: "document",
+    className: h("text-center", {
+      "w-75 mx-auto": !n,
+      "w-100": n,
+      "bg-main": e === "success",
+      "bg-danger": e === "error",
+      "bg-warning": e === "warning",
+      "text-white": e !== "warning"
+    }, t),
+    bodyClassName: h({ "p-2": n }),
+    children: r
+  }
+), A = ({ checked: r = !1, onChange: e, className: t, children: n, type: o, inline: c = !1 }) => {
+  const l = S(), a = (u) => e == null ? void 0 : e(u.target.checked, u), i = {
     "form-switch": o === "switch",
     "form-checkbox": o === "checkbox"
-  }, u = c ? { display: "inline-block" } : {};
-  return /* @__PURE__ */ d("span", { className: m("form-check", i, t), style: u, children: [
-    /* @__PURE__ */ s("input", { type: "checkbox", className: "form-check-input", id: l, checked: e, onChange: a }),
+  }, m = c ? { display: "inline-block" } : {};
+  return /* @__PURE__ */ d("span", { className: h("form-check", i, t), style: m, children: [
+    /* @__PURE__ */ s("input", { type: "checkbox", className: "form-check-input", id: l, checked: r, onChange: a }),
     /* @__PURE__ */ s("label", { className: "form-check-label", htmlFor: l, children: n })
   ] });
-}, pe = (e) => /* @__PURE__ */ s(A, { type: "checkbox", ...e }), ge = (e) => /* @__PURE__ */ s(A, { type: "switch", ...e }), K = ({ children: e, label: r, className: t = "", labelClassName: n = "", noMargin: o = !1, id: c }) => /* @__PURE__ */ d("div", { className: `${t} ${o ? "" : "mb-3"}`, children: [
-  /* @__PURE__ */ s("label", { className: `form-label ${n}`, htmlFor: c, children: r }),
-  e
-] }), be = ({ children: e, value: r, onChange: t, type: n, required: o, placeholder: c, className: l, labelClassName: a }) => {
-  const i = k();
-  return /* @__PURE__ */ s(K, { label: /* @__PURE__ */ d(N, { children: [
-    e,
+}, me = (r) => /* @__PURE__ */ s(A, { type: "checkbox", ...r }), he = (r) => /* @__PURE__ */ s(A, { type: "switch", ...r }), W = ({ children: r, label: e, className: t = "", labelClassName: n = "", noMargin: o = !1, id: c }) => /* @__PURE__ */ d("div", { className: `${t} ${o ? "" : "mb-3"}`, children: [
+  /* @__PURE__ */ s("label", { className: `form-label ${n}`, htmlFor: c, children: e }),
+  r
+] }), ue = ({ children: r, value: e, onChange: t, type: n, required: o, placeholder: c, className: l, labelClassName: a }) => {
+  const i = S();
+  return /* @__PURE__ */ s(W, { label: /* @__PURE__ */ d(N, { children: [
+    r,
     ":"
   ] }), className: l, labelClassName: a, id: i, children: /* @__PURE__ */ s(
     "input",
@@ -60,37 +70,37 @@ const X = (e) => ({
       id: i,
       className: "form-control",
       type: n ?? "text",
-      value: r,
+      value: e,
       required: o ?? !0,
       placeholder: c,
-      onChange: (u) => t(u.target.value)
+      onChange: (m) => t(m.target.value)
     }
   ) });
-}, ee = 500;
+}, X = 500;
 let p;
-const v = () => {
+const k = () => {
   p !== null && clearTimeout(p), p = null;
-}, we = ({ onChange: e, className: r, large: t = !0, noBorder: n = !1, initialValue: o = "", setTimeout_: c = setTimeout }) => {
-  const [l, a] = b(o), i = (u, h = ee) => {
-    a(u), v(), p = c(() => {
-      e(u), v();
-    }, h);
+}, fe = ({ onChange: r, className: e, large: t = !0, noBorder: n = !1, initialValue: o = "", setTimeout_: c = setTimeout }) => {
+  const [l, a] = b(o), i = (m, u = X) => {
+    a(m), k(), p = c(() => {
+      r(m), k();
+    }, u);
   };
-  return /* @__PURE__ */ d("div", { className: m("search-field", r), children: [
+  return /* @__PURE__ */ d("div", { className: h("search-field", e), children: [
     /* @__PURE__ */ s(
       "input",
       {
         type: "text",
-        className: m("form-control search-field__input", {
+        className: h("form-control search-field__input", {
           "form-control-lg": t,
           "search-field__input--no-border": n
         }),
         placeholder: "Search...",
         value: l,
-        onChange: (u) => i(u.target.value)
+        onChange: (m) => i(m.target.value)
       }
     ),
-    /* @__PURE__ */ s(g, { icon: E, className: "search-field__icon" }),
+    /* @__PURE__ */ s(g, { icon: y, className: "search-field__icon" }),
     /* @__PURE__ */ s(
       "button",
       {
@@ -103,34 +113,34 @@ const v = () => {
       }
     )
   ] });
-}, y = (e) => {
-  const r = new URLSearchParams(e), t = {};
-  return r.forEach((n, o) => {
+}, Z = (r) => {
+  const e = new URLSearchParams(r), t = {};
+  return e.forEach((n, o) => {
     if (o.endsWith("[]")) {
       const c = o.slice(0, -2);
       t[c] ?? (t[c] = []), t[c].push(n);
     } else
       t[o] = n;
   }), t;
-}, re = (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();
-}, Ne = y, Ce = re, te = (e = !1) => {
-  const [r, t] = b(e), n = f(() => t((l) => !l), []), o = f(() => t(!0), []), c = f(() => t(!1), []);
-  return [r, n, o, c];
-}, _e = (e = !1, r = 2e3, t = window.setTimeout, n = window.clearTimeout) => {
-  const [o, c] = b(e), l = C(e), a = C(), i = f(() => {
-    c(!l.current), a.current && n(a.current), a.current = t(() => c(l.current), r);
-  }, [n, r, t]);
+}, pe = (r) => {
+  const e = new URLSearchParams();
+  for (const [t, n] of Object.entries(r))
+    n !== void 0 && (Array.isArray(n) ? n.forEach((o) => e.append(`${t}[]`, `${o}`)) : e.append(t, `${n}`));
+  return e.toString();
+}, B = (r = !1) => {
+  const [e, t] = b(r), n = f(() => t((l) => !l), []), o = f(() => t(!0), []), c = f(() => t(!1), []);
+  return [e, n, o, c];
+}, ge = (r = !1, e = 2e3, t = window.setTimeout, n = window.clearTimeout) => {
+  const [o, c] = b(r), l = _(r), a = _(), i = f(() => {
+    c(!l.current), a.current && n(a.current), a.current = t(() => c(l.current), e);
+  }, [n, e, t]);
   return [o, i];
-}, ke = () => k(), ve = () => C(null), Te = () => {
-  const { search: e } = J();
-  return V(() => y(e), [e]);
-}, ne = ({
-  text: e,
-  disabled: r = !1,
+}, be = () => _(null), we = () => {
+  const { search: r } = Y();
+  return q(() => Z(r), [r]);
+}, K = ({
+  text: r,
+  disabled: e = !1,
   className: t,
   children: n,
   dropdownClassName: o,
@@ -138,138 +148,135 @@ const v = () => {
   end: l = !1,
   minWidth: a,
   inline: i,
-  size: u,
-  ...h
+  size: m,
+  ...u
 }) => {
-  const [L, R] = te(), x = m("dropdown-btn__toggle", t, {
+  const [T, L] = B(), x = h("dropdown-btn__toggle", t, {
     "btn-block": !i,
     "dropdown-btn__toggle--with-caret": !c
-  }), I = { minWidth: a && `${a}px` };
-  return /* @__PURE__ */ d(G, { isOpen: L, toggle: R, disabled: r, className: o, children: [
-    /* @__PURE__ */ s(O, { size: u, caret: !c, className: x, color: "primary", ...h, children: e }),
-    /* @__PURE__ */ s(S, { className: "w-100", end: l, style: I, children: n })
+  }), R = { minWidth: a && `${a}px` };
+  return /* @__PURE__ */ d(M, { isOpen: T, toggle: L, disabled: e, className: o, children: [
+    /* @__PURE__ */ s(v, { size: m, caret: !c, className: x, color: "primary", ...u, children: r }),
+    /* @__PURE__ */ s(O, { className: "w-100", end: l, style: R, children: n })
   ] });
-}, Oe = ({ children: e, minWidth: r, label: t = "Options" }) => /* @__PURE__ */ s(
-  ne,
+}, Ne = ({ children: r, minWidth: e, label: t = "Options" }) => /* @__PURE__ */ s(
+  K,
   {
-    text: /* @__PURE__ */ s(g, { className: "px-1", icon: P }),
+    text: /* @__PURE__ */ s(g, { className: "px-1", icon: D }),
     "aria-label": t,
     size: "sm",
-    minWidth: r,
+    minWidth: e,
     end: !0,
     noCaret: !0,
     inline: !0,
-    children: e
+    children: r
   }
-), se = ({ children: e, ...r }) => /* @__PURE__ */ s(Q, { children: /* @__PURE__ */ s(U, { className: "nav-pills__nav-link", tag: W, ...r, children: e }) }), Se = ({ children: e, fill: r = !1, className: t = "" }) => /* @__PURE__ */ s(_, { className: `nav-pills__nav p-0 overflow-hidden ${t}`, body: !0, children: /* @__PURE__ */ s(j, { pills: !0, fill: r, children: Y.map(e, (n) => {
-  if (!z(n) || n.type !== se)
+), ee = ({ children: r, ...e }) => /* @__PURE__ */ s($, { children: /* @__PURE__ */ s(G, { className: "nav-pills__nav-link", tag: z, ...e, children: r }) }), _e = ({ children: r, fill: e = !1, className: t = "" }) => /* @__PURE__ */ s(C, { className: `nav-pills__nav p-0 overflow-hidden ${t}`, body: !0, children: /* @__PURE__ */ s(U, { pills: !0, fill: e, children: Q.map(r, (n) => {
+  if (!V(n) || n.type !== ee)
     throw new Error("Only NavPillItem children are allowed inside NavPills.");
   return n;
-}) }) }), oe = (e, r, t) => e !== r ? "ASC" : t ? {
+}) }) }), re = (r, e, t) => r !== e ? "ASC" : t ? {
   ASC: "DESC",
   DESC: void 0
-}[t] : "ASC", Ae = (e, { field: r, dir: t }) => !r || !t ? e : e.sort((n, o) => {
+}[t] : "ASC", Ce = (r, { field: e, dir: t }) => !e || !t ? r : r.sort((n, o) => {
   const c = t === "ASC" ? 1 : -1, l = t === "ASC" ? -1 : 1;
-  return n[r] > o[r] ? c : l;
-}), ye = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, Le = (e) => {
-  const [r, t] = e.split("-");
-  return { field: r, dir: t };
-}, Re = (e) => {
-  const [r, t] = b(e), n = f((o, c) => t({ field: o, dir: c }), []);
-  return [r, n];
+  return n[e] > o[e] ? c : l;
+}), ke = (r) => r.dir ? `${r.field}-${r.dir}` : void 0, ve = (r) => {
+  const [e, t] = r.split("-");
+  return { field: e, dir: t };
+}, Oe = (r) => {
+  const [e, t] = b(r), n = f((o, c) => t({ field: o, dir: c }), []);
+  return [e, n];
 };
-function xe({ items: e, order: r, onChange: t, isButton: n = !0, right: o = !1, prefixed: c = !0 }) {
+function Se({ items: r, order: e, onChange: t, isButton: n = !0, right: o = !1, prefixed: c = !0 }) {
   const l = (a) => () => {
-    const i = oe(a, r.field, r.dir);
+    const i = re(a, e.field, e.dir);
     t(i ? a : void 0, i);
   };
-  return /* @__PURE__ */ d(q, { children: [
+  return /* @__PURE__ */ d(j, { children: [
     /* @__PURE__ */ d(
-      O,
+      v,
       {
         caret: !0,
         color: n ? "primary" : "link",
-        className: m({
+        className: h({
           "dropdown-btn__toggle btn-block pe-4 overflow-hidden": n,
           "btn-sm p-0": !n
         }),
         children: [
           !n && /* @__PURE__ */ s(N, { children: "Order by" }),
-          n && !r.field && /* @__PURE__ */ s("i", { children: "Order by..." }),
-          n && r.field && /* @__PURE__ */ d(N, { children: [
+          n && !e.field && /* @__PURE__ */ s("i", { children: "Order by..." }),
+          n && e.field && /* @__PURE__ */ d(N, { children: [
             c && "Order by: ",
-            e[r.field],
+            r[e.field],
             " - ",
-            /* @__PURE__ */ s("small", { children: r.dir ?? "DESC" })
+            /* @__PURE__ */ s("small", { children: e.dir ?? "DESC" })
           ] })
         ]
       }
     ),
     /* @__PURE__ */ d(
-      S,
+      O,
       {
         end: o,
-        className: m("w-100", { "ordering-dropdown__menu--link": !n }),
+        className: h("w-100", { "ordering-dropdown__menu--link": !n }),
         children: [
-          Object.entries(e).map(([a, i]) => /* @__PURE__ */ d(w, { active: r.field === a, onClick: l(a), children: [
+          Object.entries(r).map(([a, i]) => /* @__PURE__ */ d(w, { active: e.field === a, onClick: l(a), children: [
             i,
-            r.field === a && /* @__PURE__ */ s(
+            e.field === a && /* @__PURE__ */ s(
               g,
               {
-                icon: r.dir === "ASC" ? F : H,
+                icon: e.dir === "ASC" ? E : P,
                 className: "ordering-dropdown__sort-icon"
               }
             )
           ] }, a)),
           /* @__PURE__ */ s(w, { divider: !0 }),
-          /* @__PURE__ */ s(w, { disabled: !r.field, onClick: () => t(), children: /* @__PURE__ */ s("i", { children: "Clear selection" }) })
+          /* @__PURE__ */ s(w, { disabled: !e.field, onClick: () => t(), children: /* @__PURE__ */ s("i", { children: "Clear selection" }) })
         ]
       }
     )
   ] });
 }
-const Ie = "#4696e5", De = "rgba(70, 150, 229, 0.4)", Ee = "#f77f28", Pe = "rgba(247, 127, 40, 0.4)", Fe = "white", He = "#161b22", Me = (e) => {
-  var r;
-  return (r = document.querySelector("html")) == null ? void 0 : r.setAttribute("data-theme", e);
-}, $e = () => {
+const Ae = "#4696e5", Te = "rgba(70, 150, 229, 0.4)", Le = "#f77f28", xe = "rgba(247, 127, 40, 0.4)", Re = "white", Ie = "#161b22", ye = (r) => {
   var e;
-  return ((e = document.querySelector("html")) == null ? void 0 : e.getAttribute("data-theme")) === "dark";
-}, Ge = (e = window.matchMedia.bind(window)) => e("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return (e = document.querySelector("html")) == null ? void 0 : e.setAttribute("data-theme", r);
+}, De = () => {
+  var r;
+  return ((r = document.querySelector("html")) == null ? void 0 : r.getAttribute("data-theme")) === "dark";
+}, Ee = (r = window.matchMedia.bind(window)) => r("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 export {
-  pe as Checkbox,
-  ne as DropdownBtn,
-  Ee as HIGHLIGHTED_COLOR,
-  Pe as HIGHLIGHTED_COLOR_ALPHA,
-  be as InputFormGroup,
-  K as LabeledFormGroup,
-  Ie as MAIN_COLOR,
-  De as MAIN_COLOR_ALPHA,
-  he as Message,
-  se as NavPillItem,
-  Se as NavPills,
-  xe as OrderingDropdown,
-  He as PRIMARY_DARK_COLOR,
-  Fe as PRIMARY_LIGHT_COLOR,
-  fe as Result,
-  Oe as RowDropdownBtn,
-  we as SearchField,
-  B as SimpleCard,
-  ge as ToggleSwitch,
-  Me as changeThemeInMarkup,
-  oe as determineOrderDir,
-  Ge as getSystemPreferredTheme,
-  $e as isDarkThemeEnabled,
-  ye as orderToString,
-  Ne as parseQuery,
-  y as parseQueryString,
-  Ae as sortList,
-  Le as stringToOrder,
-  Ce as stringifyQuery,
-  re as stringifyQueryParams,
-  ke as useDomId,
-  ve as useElementRef,
-  Re as useOrder,
-  Te as useParsedQuery,
-  _e as useTimeoutToggle,
-  te as useToggle
+  me as Checkbox,
+  K as DropdownBtn,
+  Le as HIGHLIGHTED_COLOR,
+  xe as HIGHLIGHTED_COLOR_ALPHA,
+  ue as InputFormGroup,
+  W as LabeledFormGroup,
+  Ae as MAIN_COLOR,
+  Te as MAIN_COLOR_ALPHA,
+  ie as Message,
+  ee as NavPillItem,
+  _e as NavPills,
+  Se as OrderingDropdown,
+  Ie as PRIMARY_DARK_COLOR,
+  Re as PRIMARY_LIGHT_COLOR,
+  de as Result,
+  Ne as RowDropdownBtn,
+  fe as SearchField,
+  J as SimpleCard,
+  he as ToggleSwitch,
+  ye as changeThemeInMarkup,
+  re as determineOrderDir,
+  Ee as getSystemPreferredTheme,
+  De as isDarkThemeEnabled,
+  ke as orderToString,
+  Z as parseQueryString,
+  Ce as sortList,
+  ve as stringToOrder,
+  pe as stringifyQueryParams,
+  be as useElementRef,
+  Oe as useOrder,
+  we as useParsedQuery,
+  ge as useTimeoutToggle,
+  B as useToggle
 };

package/package.json

@@ -5,15 +5,8 @@
   "repository": "https://github.com/shlinkio/shlink-frontend-kit",
   "license": "MIT",
   "type": "module",
-  "main": "./dist/index.umd.cjs",
-  "module": "./dist/index.js",
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
-    }
-  },
   "files": [
     "dist"
   ],
@@ -39,39 +32,37 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.2",
+    "react-router": "^7.0.2",
     "reactstrap": "^9.2.0"
   },
   "devDependencies": {
-    "@shlinkio/eslint-config-js-coding-standard": "~3.1.0",
+    "@shlinkio/eslint-config-js-coding-standard": "~3.2.1",
     "@shlinkio/stylelint-config-css-coding-standard": "~1.1.1",
-    "@stylistic/eslint-plugin": "^2.8.0",
-    "@testing-library/jest-dom": "^6.5.0",
+    "@stylistic/eslint-plugin": "^2.11.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@total-typescript/shoehorn": "^0.1.2",
-    "@types/qs": "^6.9.16",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
-    "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^2.1.1",
-    "axe-core": "^4.10.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.6",
+    "axe-core": "^4.10.2",
     "bootstrap": "5.2.3",
-    "eslint": "^8.57.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-react": "^7.37.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint": "^9.16.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "history": "^5.3.0",
     "jsdom": "^25.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.79.4",
+    "sass": "^1.81.0",
     "stylelint": "^15.11.0",
-    "typescript": "^5.6.2",
-    "typescript-eslint": "^8.7.0",
-    "vite": "^5.4.8",
-    "vite-plugin-dts": "^4.2.2",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.16.0",
+    "vite": "^6.0.1",
+    "vite-plugin-dts": "^4.3.0",
     "vitest": "^2.0.2"
   },
   "browserslist": [
@@ -80,5 +71,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "0.5.3"
+  "version": "0.7.0"
 }

package/dist/index.umd.cjs

@@ -1 +0,0 @@
-(function(o,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("@fortawesome/free-solid-svg-icons"),require("@fortawesome/react-fontawesome"),require("clsx"),require("reactstrap"),require("react"),require("react-router-dom")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","@fortawesome/free-solid-svg-icons","@fortawesome/react-fontawesome","clsx","reactstrap","react","react-router-dom"],s):(o=typeof globalThis<"u"?globalThis:o||self,s(o["shlink-frontend-kit"]={},o.jsxRuntime,o.freeSolidSvgIcons,o.reactFontawesome,o.clsx,o.reactstrap,o.react,o.reactRouterDom))})(this,function(o,s,w,b,f,d,i,T){"use strict";const S=e=>({error:"border-danger",default:""})[e],v=e=>({error:"text-danger",default:"text-muted"})[e],P=({className:e,children:r,loading:n=!1,type:c="default",fullWidth:l=!1})=>{const a=f.clsx({"col-md-12":l,"col-md-10 offset-md-1":!l});return s.jsx(d.Row,{className:f.clsx("g-0",e),children:s.jsx("div",{className:a,children:s.jsx(d.Card,{className:S(c),body:!0,children:s.jsxs("h3",{className:f.clsx("text-center mb-0",v(c)),children:[n&&s.jsx(b.FontAwesomeIcon,{icon:w.faCircleNotch,spin:!0}),n&&s.jsx("span",{className:"ms-2",children:r??"Loading..."}),!n&&r]})})})})},N=({title:e,children:r,bodyClassName:n,...c})=>s.jsxs(d.Card,{...c,children:[e&&s.jsx(d.CardHeader,{role:"heading","aria-level":4,children:e}),s.jsx(d.CardBody,{className:n,children:r})]}),E=({children:e,type:r,className:n,small:c=!1})=>s.jsx(d.Row,{className:n,children:s.jsx("div",{className:f.clsx({"col-md-10 offset-md-1":!c,"col-12":c}),children:s.jsx(N,{role:"document",className:f.clsx("text-center",{"bg-main":r==="success","bg-danger":r==="error","bg-warning":r==="warning","text-white":r!=="warning"}),bodyClassName:f.clsx({"p-2":c}),children:e})})}),O=({checked:e=!1,onChange:r,className:n,children:c,type:l,inline:a=!1})=>{const h=i.useId(),t=g=>r==null?void 0:r(g.target.checked,g),u={"form-switch":l==="switch","form-checkbox":l==="checkbox"},m=a?{display:"inline-block"}:{};return s.jsxs("span",{className:f.clsx("form-check",u,n),style:m,children:[s.jsx("input",{type:"checkbox",className:"form-check-input",id:h,checked:e,onChange:t}),s.jsx("label",{className:"form-check-label",htmlFor:h,children:c})]})},F=e=>s.jsx(O,{type:"checkbox",...e}),H=e=>s.jsx(O,{type:"switch",...e}),A=({children:e,label:r,className:n="",labelClassName:c="",noMargin:l=!1,id:a})=>s.jsxs("div",{className:`${n} ${l?"":"mb-3"}`,children:[s.jsx("label",{className:`form-label ${c}`,htmlFor:a,children:r}),e]}),M=({children:e,value:r,onChange:n,type:c,required:l,placeholder:a,className:h,labelClassName:t})=>{const u=i.useId();return s.jsx(A,{label:s.jsxs(s.Fragment,{children:[e,":"]}),className:h,labelClassName:t,id:u,children:s.jsx("input",{id:u,className:"form-control",type:c??"text",value:r,required:l??!0,placeholder:a,onChange:m=>n(m.target.value)})})};let C;const I=()=>{C!==null&&clearTimeout(C),C=null},G=({onChange:e,className:r,large:n=!0,noBorder:c=!1,initialValue:l="",setTimeout_:a=setTimeout})=>{const[h,t]=i.useState(l),u=(m,g=500)=>{t(m),I(),C=a(()=>{e(m),I()},g)};return s.jsxs("div",{className:f.clsx("search-field",r),children:[s.jsx("input",{type:"text",className:f.clsx("form-control search-field__input",{"form-control-lg":n,"search-field__input--no-border":c}),placeholder:"Search...",value:h,onChange:m=>u(m.target.value)}),s.jsx(b.FontAwesomeIcon,{icon:w.faSearch,className:"search-field__icon"}),s.jsx("button",{"aria-label":"Clear search",type:"button",className:"close search-field__close btn-close",hidden:h==="",id:"search-field__close",onClick:()=>u("",0)})]})},_=e=>{const r=new URLSearchParams(e),n={};return r.forEach((c,l)=>{if(l.endsWith("[]")){const a=l.slice(0,-2);n[a]??(n[a]=[]),n[a].push(c)}else n[l]=c}),n},k=e=>{const r=new URLSearchParams;for(const[n,c]of Object.entries(e))c!==void 0&&(Array.isArray(c)?c.forEach(l=>r.append(`${n}[]`,`${l}`)):r.append(n,`${c}`));return r.toString()},q=_,Q=k,p=(e=!1)=>{const[r,n]=i.useState(e),c=i.useCallback(()=>n(h=>!h),[]),l=i.useCallback(()=>n(!0),[]),a=i.useCallback(()=>n(!1),[]);return[r,c,l,a]},$=(e=!1,r=2e3,n=window.setTimeout,c=window.clearTimeout)=>{const[l,a]=i.useState(e),h=i.useRef(e),t=i.useRef(),u=i.useCallback(()=>{a(!h.current),t.current&&c(t.current),t.current=n(()=>a(h.current),r)},[c,r,n]);return[l,u]},U=()=>i.useId(),j=()=>i.useRef(null),V=()=>{const{search:e}=T.useLocation();return i.useMemo(()=>_(e),[e])},y=({text:e,disabled:r=!1,className:n,children:c,dropdownClassName:l,noCaret:a,end:h=!1,minWidth:t,inline:u,size:m,...g})=>{const[le,ae]=p(),te=f.clsx("dropdown-btn__toggle",n,{"btn-block":!u,"dropdown-btn__toggle--with-caret":!a}),de={minWidth:t&&`${t}px`};return s.jsxs(d.Dropdown,{isOpen:le,toggle:ae,disabled:r,className:l,children:[s.jsx(d.DropdownToggle,{size:m,caret:!a,className:te,color:"primary",...g,children:e}),s.jsx(d.DropdownMenu,{className:"w-100",end:h,style:de,children:c})]})},Y=({children:e,minWidth:r,label:n="Options"})=>s.jsx(y,{text:s.jsx(b.FontAwesomeIcon,{className:"px-1",icon:w.faEllipsisV}),"aria-label":n,size:"sm",minWidth:r,end:!0,noCaret:!0,inline:!0,children:e}),L=({children:e,...r})=>s.jsx(d.NavItem,{children:s.jsx(d.NavLink,{className:"nav-pills__nav-link",tag:T.NavLink,...r,children:e})}),z=({children:e,fill:r=!1,className:n=""})=>s.jsx(d.Card,{className:`nav-pills__nav p-0 overflow-hidden ${n}`,body:!0,children:s.jsx(d.Nav,{pills:!0,fill:r,children:i.Children.map(e,c=>{if(!i.isValidElement(c)||c.type!==L)throw new Error("Only NavPillItem children are allowed inside NavPills.");return c})})}),D=(e,r,n)=>e!==r?"ASC":n?{ASC:"DESC",DESC:void 0}[n]:"ASC",B=(e,{field:r,dir:n})=>!r||!n?e:e.sort((c,l)=>{const a=n==="ASC"?1:-1,h=n==="ASC"?-1:1;return c[r]>l[r]?a:h}),J=e=>e.dir?`${e.field}-${e.dir}`:void 0,W=e=>{const[r,n]=e.split("-");return{field:r,dir:n}},X=e=>{const[r,n]=i.useState(e),c=i.useCallback((l,a)=>n({field:l,dir:a}),[]);return[r,c]};function Z({items:e,order:r,onChange:n,isButton:c=!0,right:l=!1,prefixed:a=!0}){const h=t=>()=>{const u=D(t,r.field,r.dir);n(u?t:void 0,u)};return s.jsxs(d.UncontrolledDropdown,{children:[s.jsxs(d.DropdownToggle,{caret:!0,color:c?"primary":"link",className:f.clsx({"dropdown-btn__toggle btn-block pe-4 overflow-hidden":c,"btn-sm p-0":!c}),children:[!c&&s.jsx(s.Fragment,{children:"Order by"}),c&&!r.field&&s.jsx("i",{children:"Order by..."}),c&&r.field&&s.jsxs(s.Fragment,{children:[a&&"Order by: ",e[r.field]," - ",s.jsx("small",{children:r.dir??"DESC"})]})]}),s.jsxs(d.DropdownMenu,{end:l,className:f.clsx("w-100",{"ordering-dropdown__menu--link":!c}),children:[Object.entries(e).map(([t,u])=>s.jsxs(d.DropdownItem,{active:r.field===t,onClick:h(t),children:[u,r.field===t&&s.jsx(b.FontAwesomeIcon,{icon:r.dir==="ASC"?w.faSortAmountUp:w.faSortAmountDown,className:"ordering-dropdown__sort-icon"})]},t)),s.jsx(d.DropdownItem,{divider:!0}),s.jsx(d.DropdownItem,{disabled:!r.field,onClick:()=>n(),children:s.jsx("i",{children:"Clear selection"})})]})]})}const K="#4696e5",R="rgba(70, 150, 229, 0.4)",x="#f77f28",ee="rgba(247, 127, 40, 0.4)",re="white",se="#161b22",ne=e=>{var r;return(r=document.querySelector("html"))==null?void 0:r.setAttribute("data-theme",e)},oe=()=>{var e;return((e=document.querySelector("html"))==null?void 0:e.getAttribute("data-theme"))==="dark"},ce=(e=window.matchMedia.bind(window))=>e("(prefers-color-scheme: dark)").matches?"dark":"light";o.Checkbox=F,o.DropdownBtn=y,o.HIGHLIGHTED_COLOR=x,o.HIGHLIGHTED_COLOR_ALPHA=ee,o.InputFormGroup=M,o.LabeledFormGroup=A,o.MAIN_COLOR=K,o.MAIN_COLOR_ALPHA=R,o.Message=P,o.NavPillItem=L,o.NavPills=z,o.OrderingDropdown=Z,o.PRIMARY_DARK_COLOR=se,o.PRIMARY_LIGHT_COLOR=re,o.Result=E,o.RowDropdownBtn=Y,o.SearchField=G,o.SimpleCard=N,o.ToggleSwitch=H,o.changeThemeInMarkup=ne,o.determineOrderDir=D,o.getSystemPreferredTheme=ce,o.isDarkThemeEnabled=oe,o.orderToString=J,o.parseQuery=q,o.parseQueryString=_,o.sortList=B,o.stringToOrder=W,o.stringifyQuery=Q,o.stringifyQueryParams=k,o.useDomId=U,o.useElementRef=j,o.useOrder=X,o.useParsedQuery=V,o.useTimeoutToggle=$,o.useToggle=p,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});