@shlinkio/shlink-frontend-kit 0.9.10 → 0.9.12

package/dist/index.d.ts

@@ -84,6 +84,16 @@ export declare type InputFormGroupProps = PropsWithChildren<{
 
 export declare const isDarkThemeEnabled: () => boolean;
 
+/**
+ * Determines if a color is light or not, based on its perceived lightness.
+ *
+ * For an RGB color, lightness is represented as a number from 0 to 256.
+ * The lower the number, the darker is the color perceived.
+ *
+ * HSP by Darel Rex Finley https://alienryderflex.com/hsp.html
+ */
+export declare function isLightColor(colorHex: string): boolean;
+
 /** @deprecated */
 export declare const LabeledFormGroup: FC<LabeledFormGroupProps>;
 

package/dist/index.js

@@ -1,11 +1,11 @@
 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 { FontAwesomeIcon as g } from "@fortawesome/react-fontawesome";
 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 { 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 b } 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-VI1mTe3x.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-VI1mTe3x.js";
+import { u as L, d as W } from "./ordering-pAYMfJPl.js";
+import { e as He, i as Me, o as $e, s as Fe, f as Ge, a as je, g as Ue, b as qe, c as Qe } from "./ordering-pAYMfJPl.js";
 import { useNavigate as z, useLocation as J, NavLink as X } from "react-router";
 const ue = ({ className: r, children: e, loading: s = !1, type: t = "default", fullWidth: a = !1 }) => /* @__PURE__ */ n(
   w,
@@ -24,7 +24,7 @@ const ue = ({ className: r, children: e, loading: s = !1, type: t = "default", f
           "text-danger": t === "error"
         }),
         children: [
-          s && /* @__PURE__ */ n(b, { icon: S, spin: !0 }),
+          s && /* @__PURE__ */ n(g, { icon: S, spin: !0 }),
           s && /* @__PURE__ */ n("span", { className: "ms-2", children: e ?? "Loading..." }),
           !s && e
         ]
@@ -49,7 +49,7 @@ const ue = ({ className: r, children: e, loading: s = !1, type: t = "default", f
     bodyClassName: u({ "p-2": t }),
     children: r
   }
-), y = ({ checked: r = !1, onChange: e, className: s, children: t, type: a, inline: c = !1 }) => {
+), T = ({ 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"
@@ -58,10 +58,10 @@ const ue = ({ className: r, children: e, loading: s = !1, type: t = "default", f
     /* @__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 })
   ] });
-}, 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: [
+}, pe = (r) => /* @__PURE__ */ n(T, { type: "checkbox", ...r }), ge = (r) => /* @__PURE__ */ n(T, { 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 }) => {
+] }), be = ({ 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,
@@ -102,7 +102,7 @@ const _ = () => {
         onChange: (o) => d(o.target.value)
       }
     ),
-    /* @__PURE__ */ n(b, { icon: R, className: "search-field__icon" }),
+    /* @__PURE__ */ n(g, { icon: R, className: "search-field__icon" }),
     /* @__PURE__ */ n(
       "button",
       {
@@ -148,18 +148,18 @@ const _ = () => {
   size: o,
   ...m
 }) => {
-  const [N, L] = T(), A = u("dropdown-btn__toggle", s, {
+  const [N, y] = L(), A = u("dropdown-btn__toggle", s, {
     "btn-block": !d,
     "dropdown-btn__toggle--with-caret": !c
   }), I = { minWidth: h && `${h}px` };
-  return /* @__PURE__ */ i(v, { isOpen: N, toggle: L, disabled: e, className: a, children: [
+  return /* @__PURE__ */ i(v, { isOpen: N, toggle: y, 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 })
   ] });
 }, Ce = ({ children: r, minWidth: e, label: s = "Options" }) => /* @__PURE__ */ n(
   re,
   {
-    text: /* @__PURE__ */ n(b, { className: "px-1", icon: D }),
+    text: /* @__PURE__ */ n(g, { className: "px-1", icon: D }),
     "aria-label": s,
     size: "sm",
     minWidth: e,
@@ -174,7 +174,7 @@ const _ = () => {
   return t;
 }) }) });
 function xe({ items: r, order: e, onChange: s, isButton: t = !0, right: a = !1, prefixed: c = !0 }) {
-  const [l, h] = T(), d = (o) => () => {
+  const [l, h] = L(), d = (o) => () => {
     const m = W(o, e.field, e.dir);
     s(m ? o : void 0, m);
   };
@@ -202,7 +202,7 @@ function xe({ items: r, order: e, onChange: s, isButton: t = !0, right: a = !1,
     ),
     /* @__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,
+        b,
         {
           active: e.field === o,
           onClick: d(o),
@@ -210,17 +210,17 @@ function xe({ items: r, order: e, onChange: s, isButton: t = !0, right: a = !1,
           tabIndex: -1,
           children: [
             m,
-            e.field === o && /* @__PURE__ */ n(b, { icon: e.dir === "ASC" ? P : E })
+            e.field === o && /* @__PURE__ */ n(g, { icon: e.dir === "ASC" ? P : E })
           ]
         },
         o
       )),
-      /* @__PURE__ */ n(g, { divider: !0, tag: "hr" }),
-      /* @__PURE__ */ n(g, { disabled: !e.field, onClick: () => s(), tabIndex: -1, children: /* @__PURE__ */ n("i", { children: "Clear selection" }) })
+      /* @__PURE__ */ n(b, { divider: !0, tag: "hr" }),
+      /* @__PURE__ */ n(b, { disabled: !e.field, onClick: () => s(), tabIndex: -1, children: /* @__PURE__ */ n("i", { children: "Clear selection" }) })
     ] }) })
   ] });
 }
-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) => {
+const Le = "#4696e5", Te = "rgba(70, 150, 229, 0.4)", ye = "#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.setAttribute("data-theme", r);
 }, Re = () => {
@@ -235,12 +235,12 @@ const Te = "#4696e5", ye = "rgba(70, 150, 229, 0.4)", Le = "#f77f28", Ae = "rgba
 export {
   pe as Checkbox,
   re as DropdownBtn,
-  Le as HIGHLIGHTED_COLOR,
+  ye as HIGHLIGHTED_COLOR,
   Ae as HIGHLIGHTED_COLOR_ALPHA,
-  ge as InputFormGroup,
+  be as InputFormGroup,
   B as LabeledFormGroup,
-  Te as MAIN_COLOR,
-  ye as MAIN_COLOR_ALPHA,
+  Le as MAIN_COLOR,
+  Te as MAIN_COLOR_ALPHA,
   ue as Message,
   te as NavPillItem,
   Oe as NavPills,
@@ -251,24 +251,25 @@ export {
   Ce as RowDropdownBtn,
   we as SearchField,
   Z as SimpleCard,
-  be as ToggleSwitch,
+  ge as ToggleSwitch,
   se as changeThemeInMarkup,
   He as determineOrder,
   W as determineOrderDir,
   ne as getSystemPreferredTheme,
   Re as isDarkThemeEnabled,
-  Me as orderToString,
+  Me as isLightColor,
+  $e as orderToString,
   ee as parseQueryString,
-  $e as sortList,
-  Fe as stringToOrder,
+  Fe as sortList,
+  Ge as stringToOrder,
   ve as stringifyQueryParams,
-  Ge as useArrowKeyNavigation,
+  je as useArrowKeyNavigation,
   Ne as useElementRef,
   _e as useGoBack,
-  je as useOrder,
+  Ue as useOrder,
   ke as useParsedQuery,
   De as useTheme,
-  Ue as useTimeout,
-  qe as useTimeoutToggle,
-  T as useToggle
+  qe as useTimeout,
+  Qe as useTimeoutToggle,
+  L as useToggle
 };

package/dist/ordering-pAYMfJPl.js

@@ -0,0 +1,108 @@
+import { useMemo as T, useEffect as y, useRef as E, useCallback as d, useState as m } from "react";
+function I(e, { elementsSelector: s, focusFirstItem: r = !1, vertical: n = !0, horizontal: t = !0 }) {
+  const o = T(() => {
+    const c = [];
+    return n && c.push("ArrowDown"), t && c.push("ArrowRight"), c;
+  }, [t, n]), u = T(() => {
+    const c = [];
+    return n && c.push("ArrowUp"), t && c.push("ArrowLeft"), c;
+  }, [t, n]), i = T(() => [...o, ...u], [o, u]);
+  y(() => {
+    const c = e.current;
+    if (!c)
+      return () => {
+      };
+    const f = new AbortController(), g = () => [...c.querySelectorAll(s)], b = g(), p = Math.max(b.findIndex((l) => l.dataset.selected === "true"), 0);
+    return b.forEach((l, a) => {
+      l.tabIndex = a === p ? 0 : -1, r && a === p && l.focus();
+    }), c.addEventListener("keydown", (l) => {
+      if (!i.includes(l.key))
+        return;
+      l.preventDefault();
+      const a = g(), w = a.findIndex((h) => h.tabIndex === 0), C = o.includes(l.key) ? a[w + 1] ?? a[0] : a[w - 1] ?? a[a.length - 1];
+      a.forEach((h) => {
+        h.tabIndex = -1;
+      }), C.tabIndex = 0, C.focus();
+    }, { signal: f.signal }), () => f.abort();
+  }, [i, e, s, r, o]);
+}
+const D = 128;
+function k(e) {
+  const [s, r, n] = (e.match(/../g) ?? []).map((o) => parseInt(o, 16) || 0);
+  return Math.round(Math.sqrt(0.299 * s ** 2 + 0.587 * r ** 2 + 0.114 * n ** 2)) >= D;
+}
+function F(e, s = globalThis.setTimeout, r = globalThis.clearTimeout) {
+  const n = E(null), t = d(() => {
+    n.current && r(n.current);
+  }, [r]), o = d((u, i) => {
+    t(), n.current = s(() => {
+      u(), n.current = null;
+    }, i ?? e);
+  }, [t, e, s]);
+  return y(() => t, [t]), T(
+    () => ({ setTimeout: o, clearCurrentTimeout: t }),
+    [t, o]
+  );
+}
+const S = 2e3, v = (e = {}, s, r = globalThis.setTimeout, n = globalThis.clearTimeout) => {
+  const { initialValue: t = !1, delay: o = S } = typeof e == "boolean" ? {
+    initialValue: e,
+    delay: s
+  } : e, { setTimeout: u } = F(o, r, n), [i, c] = m(t), f = E(t), g = d(() => {
+    c(!f.current), u(() => c(f.current));
+  }, [u]);
+  return [i, g];
+};
+function M(e = !1, s = !1) {
+  const [r, n] = m(e), t = d(() => n((i) => !i), []), o = d(() => n(!0), []), u = d(() => n(!1), []);
+  return s ? { flag: r, toggle: t, setToTrue: o, setToFalse: u } : [r, t, o, u];
+}
+function A(e, s, r) {
+  if (!e || typeof e == "string")
+    return A({ currentField: e, newField: s, currentOrderDir: r });
+  const n = e;
+  if (n.currentField !== n.newField)
+    return "ASC";
+  const t = {
+    ASC: "DESC",
+    DESC: void 0
+  };
+  return n.currentOrderDir ? t[n.currentOrderDir] : "ASC";
+}
+function L(e, s, r) {
+  if (!e || typeof e == "string")
+    return L({ currentField: e, newField: s, currentOrderDir: r });
+  const n = e, t = A(n);
+  return {
+    field: t ? n.newField : void 0,
+    dir: t
+  };
+}
+const R = (e, { field: s, dir: r }) => !s || !r ? e : e.sort((n, t) => {
+  const o = r === "ASC" ? 1 : -1, u = r === "ASC" ? -1 : 1;
+  return n[s] > t[s] ? o : u;
+}), N = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, q = (e) => {
+  const [s, r] = e.split("-");
+  return { field: s, dir: r };
+}, K = (e) => {
+  const [s, r] = m(e), n = d(
+    (t, o) => r(
+      t && typeof t == "object" ? t : { field: t, dir: o }
+    ),
+    []
+  );
+  return [s, n];
+};
+export {
+  I as a,
+  F as b,
+  v as c,
+  A as d,
+  L as e,
+  q as f,
+  K as g,
+  k as i,
+  N as o,
+  R as s,
+  M as u
+};

package/dist/tailwind.d.ts

@@ -1,6 +1,7 @@
 import { ChangeEvent } from 'react';
 import { Coords } from '@floating-ui/utils';
 import { FC } from 'react';
+import { ForwardedRef } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLProps } from 'react';
 import { InputHTMLAttributes } from 'react';
@@ -20,10 +21,17 @@ declare type AnchorProps = Omit<LinkProps, 'role' | 'aria-disabled' | 'tabIndex'
 export declare type BaseInputProps = {
     size?: Size;
     feedback?: 'error';
+    /**
+     * Whether the input should have an opinionated style or not. Defaults to 'default'.
+     * An unstyled input can be useful to wrap or customize.
+     */
+    variant?: 'default' | 'unstyled';
 };
 
 declare type BaseInputProps_2 = Omit<SearchInputProps, 'role' | 'aria-autocomplete' | 'aria-expanded' | 'aria-controls' | 'aria-activedescendant' | 'onChange' | 'autoComplete' | 'autoCorrect'>;
 
+export declare const BaseNavBar: FC<NavBarProps>;
+
 declare type BooleanControlProps = Omit<HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'value' | 'defaultValue'> & {
     onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
 };
@@ -100,6 +108,8 @@ export declare type CloseButtonProps = {
     label?: string;
     onClick?: HTMLProps<HTMLButtonElement>['onClick'];
     className?: string;
+    size?: Size;
+    solid?: boolean;
 };
 
 declare type CommonCardModalProps = {
@@ -148,7 +158,7 @@ export declare type DropdownProps = PropsWithChildren<{
     buttonContent: RequiredReactNode;
     buttonSize?: Size;
     buttonClassName?: string;
-    buttonVariant?: 'button' | 'link';
+    buttonVariant?: 'button' | 'link' | 'text';
     buttonDisabled?: boolean;
     /** Set as the button's `aria-label` attribute */
     buttonLabel?: string;
@@ -161,6 +171,8 @@ export declare type DropdownProps = PropsWithChildren<{
      * Defaults to 'left'.
      */
     menuAlignment?: 'left' | 'right';
+    /** Distance between toggle button and menu when open, in pixels. Defaults to 3 */
+    menuOffset?: number;
     /** Whether to hide the caret or not. Defaults to false */
     caretless?: boolean;
 }>;
@@ -189,6 +201,10 @@ export declare type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'si
     borderless?: boolean;
 };
 
+declare type ItemProps = {
+    active?: boolean;
+};
+
 export declare const keyForPage: (pageNumber: NumberOrEllipsis, index: number) => string;
 
 export declare const Label: FC<LabelProps>;
@@ -327,6 +343,15 @@ export declare type ModalDialogProps = HTMLProps<HTMLDialogElement> & {
     onClose: () => void;
 };
 
+export declare const NavBar: FC<NavBarProps> & {
+    MenuItem: FC<LinkProps & ItemProps>;
+    Dropdown: FC<Omit<DropdownProps, "menuAlignment" | "buttonVariant" | "menuOffset"> & ItemProps>;
+};
+
+export declare type NavBarProps = HTMLProps<HTMLElement> & {
+    brand: RequiredReactNode;
+};
+
 export declare const NavPills: FC<NavPillsProps> & {
     Pill: FC<LinkProps>;
 };
@@ -434,14 +459,18 @@ export declare const RowDropdown: FC<RowDropdownProps> & {
 
 export declare type RowDropdownProps = Omit<DropdownProps, 'caretless' | 'buttonContent' | 'buttonVariant'>;
 
+export declare const SearchCombobox: <T>(props: SearchComboboxProps<T> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+}) => ReturnType<typeof SearchComboboxInner>;
+
 /**
  * This component combines a SearchInput with a Listbox, to behave close to an editable combobox with autocomplete, as
  * described in https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/.
  * The main difference is that the input is used only to search in the listbox, and once an item is selected, the input
  * is cleared and the listbox is closed.
  */
-export declare function SearchCombobox<Item>({ searchResults, onSearch, onSelectSearchResult, renderSearchResult, size, // SearchInput defaults its size to 'lg'. Change it to 'md'
-    listboxSpan, onFocus, ...rest }: SearchComboboxProps<Item>): JSX.Element;
+declare function SearchComboboxInner<Item>({ searchResults, onSearch, onSelectSearchResult, renderSearchResult, size, // SearchInput defaults its size to 'lg'. Change it to 'md'
+    listboxSpan, onFocus, containerClassName, listboxClassName, ...rest }: SearchComboboxProps<Item>, ref: ForwardedRef<HTMLInputElement>): JSX.Element;
 
 export declare type SearchComboboxProps<Item> = BaseInputProps_2 & {
     /** If defined, it will display a listbox with the search results */
@@ -460,6 +489,10 @@ export declare type SearchComboboxProps<Item> = BaseInputProps_2 & {
      * Defaults to `full`.
      */
     listboxSpan?: 'full' | 'auto';
+    /** Classes to add to the wrapping container */
+    containerClassName?: string;
+    /** Classes to add to the listbox */
+    listboxClassName?: string;
 };
 
 export declare const SearchInput: ForwardRefExoticComponent<Omit<InputProps, "className" | "onChange" | "value"> & {
@@ -468,6 +501,11 @@ containerClassName?: string;
 inputClassName?: string;
 /** When set to true, it displays a loading indicator in place of the magnifyinf glass icon */
 loading?: boolean;
+/**
+* Whether onChange should be triggered immediately or debounced.
+* Defaults to false.
+*/
+immediate?: boolean;
 } & RefAttributes<HTMLInputElement>>;
 
 export declare type SearchInputProps = Omit<InputProps, 'className' | 'onChange' | 'value'> & {
@@ -476,6 +514,11 @@ export declare type SearchInputProps = Omit<InputProps, 'className' | 'onChange'
     inputClassName?: string;
     /** When set to true, it displays a loading indicator in place of the magnifyinf glass icon */
     loading?: boolean;
+    /**
+     * Whether onChange should be triggered immediately or debounced.
+     * Defaults to false.
+     */
+    immediate?: boolean;
 };
 
 export declare type SectionType = 'head' | 'body' | 'footer';
@@ -515,6 +558,40 @@ export declare type TableProps = Omit<HTMLProps<HTMLTableElement>, 'size'> & {
     size?: Size;
 };
 
+export declare type TagItemProps = {
+    name: string;
+    color: string;
+};
+
+export declare const TagsAutocomplete: FC<TagsAutocompleteProps>;
+
+export declare type TagsAutocompleteProps = {
+    /** Full list of tags from which to build the suggestions */
+    tags: string[];
+    /** Tags currently selected */
+    selectedTags?: string[];
+    /** Invoked when tags are added or removed */
+    onTagsChange?: (tags: string[]) => void;
+    /** Invoked to determine what is the color of a tag */
+    getColorForTag?: (tag: string) => string;
+    /** Search input placeholder */
+    placeholder?: string;
+    /** Classes to be added to the wrapping container */
+    containerClassName?: string;
+    /**
+     * Whether to allow adding new arbitrary tags, or only select from the list of tags.
+     * Defaults to false.
+     */
+    immutable?: boolean;
+    /**
+     * How to filter the list of tags when searching:
+     *   - `startsWith`: those that start with the search term
+     *   -  `includes`: those that include the search term
+     * Defaults to `startsWith`.
+     */
+    searchMode?: 'startsWith' | 'includes';
+} & Pick<SearchComboboxProps<string>, 'placeholder' | 'size' | 'disabled' | 'aria-label'>;
+
 declare type TitleProps = {
     title: ReactNode;
     titleSize?: Size;