@shlinkio/shlink-frontend-kit 0.9.8 → 0.9.10

package/dist/ordering-VI1mTe3x.js

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

package/dist/tailwind.d.ts

@@ -15,6 +15,8 @@ import { ReferenceType } from '@floating-ui/react-dom';
 import { ReferenceType as ReferenceType_2 } from '@floating-ui/react';
 import { RefObject } from 'react';
 
+declare type AnchorProps = Omit<LinkProps, 'role' | 'aria-disabled' | 'tabIndex'>;
+
 export declare type BaseInputProps = {
     size?: Size;
     feedback?: 'error';
@@ -58,6 +60,8 @@ export declare type ButtonProps = PropsWithChildren<{
     solid?: boolean;
 } & (RegularButtonProps | LinkButtonProps_2)>;
 
+declare type ButtonProps_2 = Omit<HTMLProps<HTMLButtonElement>, 'role' | 'disabled' | 'aria-disabled' | 'tabIndex'>;
+
 export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> & {
     Body: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
     Header: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
@@ -131,6 +135,36 @@ export declare type DetailsProps = Omit<HTMLProps<HTMLDetailsElement>, 'ref'> &
     summaryClasses?: string;
 };
 
+export declare const Dropdown: FC<DropdownProps> & {
+    Item: FC<MenuItemProps>;
+    Separator: FC;
+    Title: FC<{
+        children?: ReactNode | undefined;
+    }>;
+    Misc: FC<HTMLProps<HTMLDivElement>>;
+};
+
+export declare type DropdownProps = PropsWithChildren<{
+    buttonContent: RequiredReactNode;
+    buttonSize?: Size;
+    buttonClassName?: string;
+    buttonVariant?: 'button' | 'link';
+    buttonDisabled?: boolean;
+    /** Set as the button's `aria-label` attribute */
+    buttonLabel?: string;
+    /** Classes to be set on the containing wrapper element */
+    containerClassName?: string;
+    /** Classes to be set on the menu element */
+    menuClassName?: string;
+    /**
+     * Whether the menu should align with the right or the left side of the toggle button in case it is bigger.
+     * Defaults to 'left'.
+     */
+    menuAlignment?: 'left' | 'right';
+    /** Whether to hide the caret or not. Defaults to false */
+    caretless?: boolean;
+}>;
+
 export declare const ELLIPSIS = "...";
 
 declare type Ellipsis = typeof ELLIPSIS;
@@ -246,6 +280,33 @@ export declare type ListboxProps<Item> = Omit<CardProps, 'id' | 'role' | 'aria-o
     noItemsMessage?: string;
 };
 
+export declare const Menu: FC<MenuProps> & {
+    Item: FC<MenuItemProps>;
+    Separator: FC;
+    Title: FC<{
+        children?: ReactNode | undefined;
+    }>;
+    Misc: FC<HTMLProps<HTMLDivElement>>;
+};
+
+export declare type MenuItemProps = (ButtonProps_2 | AnchorProps) & {
+    selected?: boolean;
+    disabled?: boolean;
+};
+
+export declare type MenuProps = Omit<CardProps, 'role'> & {
+    /**
+     * Selector to determine elements that should be part of the focus sequence.
+     * Defaults to '[role="menuitem"]:not([disabled]):not([aria-disabled])'
+     */
+    focusableElementsSelector?: string;
+    /**
+     * Whether first focusable item should be focused or not.
+     * Defaults to false.
+     */
+    focusFirstItem?: boolean;
+};
+
 /**
  * Component used to display a card with general information, about current page status, loading, etc.
  */
@@ -282,6 +343,22 @@ declare type NoTitleProps = {
 
 export declare type NumberOrEllipsis = number | Ellipsis;
 
+declare type Order<Fields> = {
+    field?: Fields;
+    dir?: OrderDir;
+};
+
+declare type OrderDir = 'ASC' | 'DESC' | undefined;
+
+export declare function OrderingDropdown<T extends string = string>({ items, order, onChange, prefixed, buttonVariant, ...rest }: OrderingDropdownProps<T>): JSX.Element;
+
+export declare type OrderingDropdownProps<T extends string = string> = Omit<DropdownProps, 'buttonContent'> & {
+    items: Record<T, string>;
+    order: Order<T>;
+    onChange: (newOrder: Order<T>) => void;
+    prefixed?: boolean;
+};
+
 export declare const pageIsEllipsis: (pageNumber: NumberOrEllipsis) => pageNumber is Ellipsis;
 
 export declare const Paginator: FC<PaginatorProps>;
@@ -346,6 +423,17 @@ export declare type RevealablePasswordInputProps = Omit<InputProps, 'type'> & {
 
 export declare const roundTen: (number: number) => number;
 
+export declare const RowDropdown: FC<RowDropdownProps> & {
+    Item: FC<MenuItemProps>;
+    Separator: FC;
+    Title: FC<{
+        children?: ReactNode | undefined;
+    }>;
+    Misc: FC<HTMLProps<HTMLDivElement>>;
+};
+
+export declare type RowDropdownProps = Omit<DropdownProps, 'caretless' | 'buttonContent' | 'buttonVariant'>;
+
 /**
  * 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/.