@shlinkio/shlink-frontend-kit 0.5.1 → 0.5.2

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-
 import { CardProps } from 'reactstrap';
 import { ChangeEvent } from 'react';
 import { DropdownToggleProps } from 'reactstrap/types/lib/DropdownToggle';
@@ -120,8 +118,15 @@ 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.
+ */
+export declare const parseQueryString: <T>(search: string) => T;
+
 export declare const PRIMARY_DARK_COLOR = "#161b22";
 
 export declare const PRIMARY_LIGHT_COLOR = "white";
@@ -158,7 +163,16 @@ export declare type SimpleCardProps = Omit<CardProps, 'title'> & {
 
 export declare const sortList: <List>(list: List[], { field, dir }: Order<keyof List>) => List[];
 
-export declare const stringifyQuery: (query: any) => string;
+/** @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.
+ * Arrays will be appended multiple times with the "[]" suffix in the param name.
+ * All values are cast to string.
+ */
+export declare const stringifyQueryParams: (params: Record<string, unknown | unknown[] | undefined>) => string;
 
 export declare const stringToOrder: <T>(order: string) => Order<T>;
 
@@ -178,7 +192,7 @@ export declare const useOrder: <T>(initialOrder: Order<T>) => [Order<T>, (orderF
 
 export declare const useParsedQuery: <T>() => T;
 
-export declare const useTimeoutToggle: (initialValue?: boolean, delay?: number, setTimeout?: ((handler: TimerHandler, timeout?: number | undefined, ...arguments: any[]) => number) & typeof globalThis.setTimeout, clearTimeout?: ((id: number | undefined) => void) & typeof globalThis.clearTimeout) => [boolean, () => void];
+export declare const useTimeoutToggle: (initialValue?: boolean, delay?: number, setTimeout?: ((handler: TimerHandler, timeout?: number, ...arguments: any[]) => number) & typeof globalThis.setTimeout, clearTimeout?: ((id: number | undefined) => void) & typeof globalThis.clearTimeout) => [boolean, () => void];
 
 export declare const useToggle: (initialValue?: boolean) => ToggleResult;
 

package/dist/index.js

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

package/dist/index.umd.cjs

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

package/package.json

@@ -23,7 +23,7 @@
     "test:ci": "npm run test -- --coverage",
     "lint": "npm run lint:css && npm run lint:js",
     "lint:css": "stylelint src/*.scss src/**/*.scss dev/*.scss dev/**/*.scss",
-    "lint:js": "eslint --ext .ts,.tsx dev src test",
+    "lint:js": "eslint dev src test",
     "lint:fix": "npm run lint:css:fix && npm run lint:js:fix",
     "lint:css:fix": "npm run lint:css -- --fix",
     "lint:js:fix": "npm run lint:js -- --fix",
@@ -31,9 +31,8 @@
     "dev": "vite serve --host=0.0.0.0 --port 3001"
   },
   "dependencies": {
-    "clsx": "^2.1.0",
-    "qs": "^6.12.1",
-    "uuid": "^9.0.1"
+    "clsx": "^2.1.1",
+    "uuid": "^10.0.0"
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-free": "^6.4.2",
@@ -45,32 +44,36 @@
     "reactstrap": "^9.2.0"
   },
   "devDependencies": {
-    "@shlinkio/eslint-config-js-coding-standard": "~2.4.1",
+    "@shlinkio/eslint-config-js-coding-standard": "~3.0.0",
     "@shlinkio/stylelint-config-css-coding-standard": "~1.1.1",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^15.0.1",
+    "@stylistic/eslint-plugin": "^2.3.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@total-typescript/shoehorn": "^0.1.2",
-    "@types/qs": "^6.9.14",
-    "@types/react": "^18.2.77",
-    "@types/react-dom": "^18.2.25",
-    "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.5.0",
-    "axe-core": "^4.9.0",
+    "@types/qs": "^6.9.15",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.0.2",
+    "axe-core": "^4.9.1",
     "bootstrap": "5.2.3",
     "eslint": "^8.57.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "history": "^5.3.0",
-    "jsdom": "^24.0.0",
+    "jsdom": "^24.1.0",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.75.0",
+    "sass": "^1.77.8",
     "stylelint": "^15.11.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.8",
-    "vite-plugin-dts": "^3.8.2",
-    "vitest": "^1.2.2"
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^7.16.0",
+    "vite": "^5.3.3",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^2.0.2"
   },
   "browserslist": [
     ">0.2%",
@@ -78,5 +81,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "0.5.1"
+  "version": "0.5.2"
 }