@shlinkio/shlink-frontend-kit 0.9.8 → 0.9.9

package/dist/index.d.ts

@@ -9,6 +9,17 @@ import { ReactNode } from 'react';
 import { RefObject } from 'react';
 import { SetStateAction } from 'react';
 
+export declare type ArrowKeyNavigationOptions = {
+    /** Query selector for focusable elements that need to be included in the loop */
+    elementsSelector: string;
+    /** Whether first focusable item should be focused or not. Defaults to false */
+    focusFirstItem?: boolean;
+    /** Enables up and down arrows navigation. Defaults to true */
+    vertical?: boolean;
+    /** Enables left and right arrows navigation. Defaults to true */
+    horizontal?: boolean;
+};
+
 declare type BooleanControlProps = PropsWithChildren<{
     checked?: boolean;
     onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
@@ -20,16 +31,18 @@ export declare type Callback = () => unknown;
 
 export declare const changeThemeInMarkup: (theme: Theme) => void | undefined;
 
+/** @deprecated */
 export declare const Checkbox: FC<BooleanControlProps>;
 
 export declare function determineOrder<Fields extends string = string>(orderDirChange: OrderDirChange<Fields>): Order<Fields>;
 
-export declare function determineOrder<Fields extends string = string>(currentField: Fields, newField?: Fields, currentOrderDir?: OrderDir): Order<Fields>;
+export declare function determineOrder<Fields extends string = string>(currentField?: Fields, newField?: Fields, currentOrderDir?: OrderDir): Order<Fields>;
 
 export declare function determineOrderDir<Fields extends string = string>(orderDirChange: OrderDirChange<Fields>): OrderDir;
 
-export declare function determineOrderDir<Fields extends string = string>(currentField: Fields, newField?: Fields, currentOrderDir?: OrderDir): OrderDir;
+export declare function determineOrderDir<Fields extends string = string>(currentField?: Fields, newField?: Fields, currentOrderDir?: OrderDir): OrderDir;
 
+/** @deprecated */
 export declare const DropdownBtn: FC<DropdownBtnProps>;
 
 export declare type DropdownBtnMenuProps = PropsWithChildren<{
@@ -54,6 +67,7 @@ export declare const HIGHLIGHTED_COLOR = "#f77f28";
 
 export declare const HIGHLIGHTED_COLOR_ALPHA = "rgba(247, 127, 40, 0.4)";
 
+/** @deprecated */
 export declare const InputFormGroup: FC<InputFormGroupProps>;
 
 export declare type InputFormGroupProps = PropsWithChildren<{
@@ -83,6 +97,7 @@ export declare const MAIN_COLOR = "#4696e5";
 
 export declare const MAIN_COLOR_ALPHA = "rgba(70, 150, 229, 0.4)";
 
+/** @deprecated */
 export declare const Message: FC<MessageProps>;
 
 export declare type MessageProps = PropsWithChildren<{
@@ -94,6 +109,7 @@ export declare type MessageProps = PropsWithChildren<{
 
 declare type MessageType = 'default' | 'error';
 
+/** @deprecated */
 export declare const NavPillItem: FC<NavPillItemProps>;
 
 declare type NavPillItemProps = PropsWithChildren<{
@@ -101,6 +117,7 @@ declare type NavPillItemProps = PropsWithChildren<{
     replace?: boolean;
 }>;
 
+/** @deprecated */
 export declare const NavPills: FC<NavPillsProps>;
 
 declare type NavPillsProps = PropsWithChildren<{
@@ -116,11 +133,12 @@ export declare type Order<Fields> = {
 export declare type OrderDir = 'ASC' | 'DESC' | undefined;
 
 export declare type OrderDirChange<Fields extends string = string> = {
-    currentField: Fields;
+    currentField?: Fields;
     newField?: Fields;
     currentOrderDir?: OrderDir;
 };
 
+/** @deprecated */
 export declare function OrderingDropdown<T extends string = string>({ items, order, onChange, isButton, right, prefixed }: OrderingDropdownProps<T>): JSX.Element;
 
 export declare type OrderingDropdownProps<T extends string = string> = {
@@ -132,6 +150,11 @@ export declare type OrderingDropdownProps<T extends string = string> = {
     prefixed?: boolean;
 };
 
+export declare type OrderSetter<T> = {
+    (order: Order<T>): void;
+    (orderField?: T, orderDir?: OrderDir): void;
+};
+
 /**
  * Convert provided order object to string, with the pattern `${order.field}-${order.di}`.
  * @return - A `string` if the `dir` prop is set, `undefined` otherwise.
@@ -148,6 +171,7 @@ export declare const PRIMARY_DARK_COLOR = "#161b22";
 
 export declare const PRIMARY_LIGHT_COLOR = "white";
 
+/** @deprecated */
 export declare const Result: FC<ResultProps>;
 
 export declare type ResultProps = PropsWithChildren<{
@@ -158,8 +182,10 @@ export declare type ResultProps = PropsWithChildren<{
 
 export declare type ResultType = 'success' | 'error' | 'warning';
 
+/** @deprecated */
 export declare const RowDropdownBtn: FC<DropdownBtnMenuProps>;
 
+/** @deprecated */
 export declare const SearchField: ({ onChange, className, large, noBorder, initialValue, setTimeout_ }: SearchFieldProps) => JSX.Element;
 
 declare type SearchFieldProps = {
@@ -171,6 +197,7 @@ declare type SearchFieldProps = {
     setTimeout_?: typeof setTimeout;
 };
 
+/** @deprecated */
 export declare const SimpleCard: ({ title, children, bodyClassName, ...rest }: SimpleCardProps) => JSX.Element;
 
 export declare type SimpleCardProps = Omit<CardProps, 'title'> & {
@@ -219,14 +246,23 @@ export declare type ToggleResultObject = {
 /** @deprecated */
 export declare type ToggleResultTuple = [boolean, () => void, () => void, () => void];
 
+/** @deprecated */
 export declare const ToggleSwitch: FC<BooleanControlProps>;
 
+/**
+ * Allows focus navigation via arrow keys on the elements of a container.
+ *
+ * Initially, the first element with [data-selected=true] or the first globally, matching `elementsSelector`, will be
+ * focusable via Tab, then arrow keys need to be used to move through the sequence.
+ */
+export declare function useArrowKeyNavigation(containerRef: RefObject<HTMLElement | null>, { elementsSelector, focusFirstItem, vertical, horizontal }: ArrowKeyNavigationOptions): void;
+
 /** @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 useOrder: <T>(initialOrder: Order<T>) => [Order<T>, OrderSetter<T>];
 
 export declare const useParsedQuery: <T>() => T;
 

package/dist/index.js

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