@ogcio/design-system-react 1.11.1 → 1.11.3

package/dist/textarea/textarea.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsxs as d, Fragment as k, jsx as n } from "react/jsx-runtime";
+import { forwardRef as R, useRef as j, useState as m, useImperativeHandle as p, useEffect as y } from "react";
+import { cn as u } from "../cn.js";
+import { HintText as z } from "../hint-text/hint-text.js";
+import { translate as A } from "../i18n/utility.js";
+import { Icon as H } from "../icon/icon.js";
+import { IconButton as O } from "../icon-button/icon-button.js";
+const E = R(
+  ({
+    value: i,
+    rows: f = 4,
+    cols: g = 100,
+    autoComplete: h = "on",
+    maxChars: t,
+    halfFluid: x = !1,
+    iconStart: c,
+    className: v,
+    clearButtonEnabled: l,
+    ...a
+  }, N) => {
+    const e = j(null), [s, C] = m(
+      t
+    );
+    p(N, () => e.current);
+    const [I, V] = m(""), o = typeof i == "string" ? i : I;
+    y(() => {
+      t !== void 0 && C(t - o.length);
+    }, [o, t]);
+    const b = (r) => {
+      const T = r.target.value;
+      i === void 0 && V(T), a.onChange && a.onChange(r);
+    }, w = () => {
+      if (e != null && e.current) {
+        e.current.value = "", e.current.focus();
+        const r = {
+          target: e.current,
+          currentTarget: e.current
+        };
+        a.onChange && a.onChange(r);
+      }
+    };
+    return /* @__PURE__ */ d(k, { children: [
+      /* @__PURE__ */ n("div", { className: "gi-textarea-container", children: /* @__PURE__ */ d(
+        "div",
+        {
+          className: u("gi-textarea-inner", {
+            "gi-input-half-width": x
+          }),
+          children: [
+            c && /* @__PURE__ */ n("div", { className: "gi-text-area-icon-start", children: /* @__PURE__ */ n(H, { icon: c, size: "md", disabled: a.disabled }) }),
+            /* @__PURE__ */ n(
+              "textarea",
+              {
+                rows: f,
+                cols: g,
+                autoComplete: h,
+                className: u(v, "gi-textarea"),
+                ref: e,
+                "data-icon-start": !!c,
+                "data-clear-enabled": l,
+                maxLength: t,
+                onChange: b,
+                ...a
+              }
+            ),
+            l ? /* @__PURE__ */ n("div", { className: "gi-text-area-end-element", children: /* @__PURE__ */ n(
+              O,
+              {
+                disabled: a.disabled,
+                icon: {
+                  icon: "close"
+                },
+                onClick: w,
+                variant: "flat",
+                size: "small",
+                appearance: "dark"
+              }
+            ) }) : null
+          ]
+        }
+      ) }),
+      t && /* @__PURE__ */ n("div", { className: "gi-textarea-remaining-chars", children: /* @__PURE__ */ n(
+        z,
+        {
+          text: A("textarea.remainingChars", {
+            remainingChars: s,
+            defaultValue: `You have ${s} characters remaining`
+          })
+        }
+      ) })
+    ] });
+  }
+);
+E.displayName = "TextArea";
+export {
+  E as TextArea
+};

package/dist/toast/ds-toast.d.ts

@@ -0,0 +1,82 @@
+import { ToastProps } from './types.js';
+declare const toastVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        info: {
+            base: string;
+            baseDismissible: string;
+        };
+        danger: {
+            base: string;
+            baseDismissible: string;
+        };
+        success: {
+            base: string;
+            baseDismissible: string;
+        };
+        warning: {
+            base: string;
+            baseDismissible: string;
+        };
+    };
+}, {
+    base: string;
+    baseDismissible: string;
+    container: string;
+    heading: string;
+    dismiss: string;
+    innerContainer: string;
+}, undefined, TVConfig<V, EV>, {
+    variant: {
+        info: {
+            base: string;
+            baseDismissible: string;
+        };
+        danger: {
+            base: string;
+            baseDismissible: string;
+        };
+        success: {
+            base: string;
+            baseDismissible: string;
+        };
+        warning: {
+            base: string;
+            baseDismissible: string;
+        };
+    };
+}, {
+    base: string;
+    baseDismissible: string;
+    container: string;
+    heading: string;
+    dismiss: string;
+    innerContainer: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        info: {
+            base: string;
+            baseDismissible: string;
+        };
+        danger: {
+            base: string;
+            baseDismissible: string;
+        };
+        success: {
+            base: string;
+            baseDismissible: string;
+        };
+        warning: {
+            base: string;
+            baseDismissible: string;
+        };
+    };
+}, {
+    base: string;
+    baseDismissible: string;
+    container: string;
+    heading: string;
+    dismiss: string;
+    innerContainer: string;
+}, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;
+declare function Toast({ title, description, action, variant, dismissible, onClose, dataTestid, slotAction, }: ToastProps): import("react/jsx-runtime").JSX.Element;
+export { Toast, toastVariants };

package/dist/toast/ds-toast.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { c as u } from "../index-DNkhmzZp.js";
+import { Icon as p } from "../icon/icon.js";
+import { IconButton as v } from "../icon-button/icon-button.js";
+import { Link as w } from "../link/link.js";
+import { Paragraph as k } from "../paragraph/paragraph.js";
+const N = u({
+  slots: {
+    base: "gi-toast-base",
+    baseDismissible: "gi-toast-base-dismissible",
+    container: "gi-toast-container",
+    heading: "gi-toast-title",
+    dismiss: "gi-toast-dismiss",
+    innerContainer: "gi-flex gi-justify-between gi-w-full"
+  },
+  variants: {
+    variant: {
+      info: {
+        base: "gi-toast-info",
+        baseDismissible: "gi-toast-info"
+      },
+      danger: {
+        base: "gi-toast-danger",
+        baseDismissible: "gi-toast-danger"
+      },
+      success: {
+        base: "gi-toast-success",
+        baseDismissible: "gi-toast-success"
+      },
+      warning: {
+        base: "gi-toast-warning",
+        baseDismissible: "gi-toast-warning"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "info"
+  }
+}), C = ({ variant: e }) => {
+  let s;
+  switch (e) {
+    case "warning": {
+      s = "warning";
+      break;
+    }
+    case "success": {
+      s = "check_circle";
+      break;
+    }
+    case "danger": {
+      s = "error";
+      break;
+    }
+    default:
+      s = "info";
+  }
+  return s;
+};
+function y({
+  title: e,
+  description: s,
+  action: a,
+  variant: r = "info",
+  dismissible: o,
+  onClose: l,
+  dataTestid: c,
+  slotAction: t
+}) {
+  const { base: m, heading: b, container: g, innerContainer: d, dismiss: f, baseDismissible: h } = N({
+    variant: r
+  });
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: (o ? h : m)(),
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      "aria-label": e,
+      "data-testid": c,
+      children: [
+        /* @__PURE__ */ i(
+          p,
+          {
+            icon: C({ variant: r }),
+            className: "gi-toast-icon",
+            "data-variant": r
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: g(), children: [
+          /* @__PURE__ */ n("div", { className: d(), children: [
+            /* @__PURE__ */ i("p", { className: b(), children: e }),
+            o && /* @__PURE__ */ i("div", { className: f(), children: /* @__PURE__ */ i(
+              v,
+              {
+                onClick: l,
+                size: "small",
+                appearance: "dark",
+                variant: "flat",
+                icon: { icon: "close" },
+                "aria-label": "Close toast"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ i(k, { ariaLabel: s, children: s }),
+          (a || t) && /* @__PURE__ */ i("div", { className: "gi-toast-action", children: /* @__PURE__ */ i(w, { href: a == null ? void 0 : a.href, noColor: !0, size: "md", asChild: !!t, children: t || (a == null ? void 0 : a.label) }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  y as Toast,
+  N as toastVariants
+};

package/dist/toast/toast.d.ts

@@ -0,0 +1,6 @@
+import { ToastProps } from './types.js';
+export declare const ToastProvider: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const toaster: {
+    create: ({ position, ...props }: ToastProps) => void;
+};
+export declare const Toast: ({ variant, title, description, action, dismissible, duration, animation, slotAction, }: ToastProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/toast/toast.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx as o, Fragment as v } from "react/jsx-runtime";
+import { useState as i, useEffect as m } from "react";
+import { createPortal as h } from "react-dom";
+import { cn as T } from "../cn.js";
+import { translate as $ } from "../i18n/utility.js";
+import { Toast as w } from "./ds-toast.js";
+const b = [
+  { x: "left", y: "top" },
+  { x: "left", y: "center" },
+  { x: "left", y: "bottom" },
+  { x: "center", y: "top" },
+  { x: "center", y: "center" },
+  { x: "center", y: "bottom" },
+  { x: "right", y: "top" },
+  { x: "right", y: "center" },
+  { x: "right", y: "bottom" }
+], u = {
+  isMounted: !1
+}, O = () => {
+  const [e, r] = i([]), [l, c] = i(!1);
+  return m(() => {
+    c(!0);
+    const t = (d) => {
+      const a = d;
+      r((s) => [...s, a.detail]);
+    };
+    return globalThis.window.addEventListener("govie:add-toast", t), u.isMounted = !0, () => {
+      globalThis.window.removeEventListener(
+        "govie:add-toast",
+        t
+      ), u.isMounted = !1;
+    };
+  }, []), l ? /* @__PURE__ */ o(v, { children: b.map((t) => {
+    const d = e.filter(
+      (a) => {
+        var s, n;
+        return ((s = a.position) == null ? void 0 : s.x) === t.x && ((n = a.position) == null ? void 0 : n.y) === t.y;
+      }
+    );
+    return h(
+      /* @__PURE__ */ o(
+        "div",
+        {
+          id: `toast-portal-${t.x}-${t.y}`,
+          role: "region",
+          "aria-label": $("toast.position", {
+            x: t.x,
+            y: t.y,
+            defaultValue: `Toasts-${t.y}-${t.x}`
+          }),
+          "data-position": `${t.y}-${t.x}`,
+          className: "gi-toast-portal",
+          children: d.map((a, s) => /* @__PURE__ */ o(p, { ...a }, `toast-${s}`))
+        },
+        `toast-${t.x}-${t.y}`
+      ),
+      document.body
+    );
+  }) }) : null;
+}, k = {
+  create: ({ position: e, ...r }) => {
+    if (u.isMounted) {
+      const l = new CustomEvent("govie:add-toast", {
+        detail: {
+          ...r,
+          position: {
+            x: (e == null ? void 0 : e.x) || "right",
+            y: (e == null ? void 0 : e.y) || "bottom"
+          }
+        }
+      });
+      globalThis.window.dispatchEvent(l);
+    } else
+      console.warn("ToastProvider not found. Cannot dispatch toast event.");
+  }
+}, p = ({
+  variant: e,
+  title: r,
+  description: l,
+  action: c,
+  dismissible: t,
+  duration: d = 5e3,
+  animation: a = "fadeinup",
+  slotAction: s
+}) => {
+  const [n, x] = i(!0), [y, g] = i(!1);
+  m(() => {
+    setTimeout(() => {
+      f();
+    }, d);
+  }, []), m(() => {
+    n || setTimeout(() => {
+      g(!0);
+    }, 300);
+  }, [n]);
+  const f = () => x(!1);
+  return y ? null : /* @__PURE__ */ o(
+    "div",
+    {
+      "data-testid": `${r}-${e || "info"}`,
+      "data-animation": a || "no-animation",
+      className: T("gi-toast gi-toast-lower", {
+        "gi-toast-disappear": !n
+      }),
+      children: /* @__PURE__ */ o("div", { className: "gi-wrapper", children: /* @__PURE__ */ o("div", { className: "gi-message", children: /* @__PURE__ */ o(
+        w,
+        {
+          onClose: f,
+          title: r,
+          action: c,
+          variant: e,
+          description: l,
+          dismissible: t,
+          slotAction: s
+        }
+      ) }) })
+    }
+  );
+};
+export {
+  p as Toast,
+  O as ToastProvider,
+  k as toaster
+};

package/dist/toast/types.d.ts

@@ -0,0 +1,24 @@
+export type ToastHorizontalPosition = 'left' | 'center' | 'right';
+export type ToastVerticalPosition = 'top' | 'center' | 'bottom';
+export type ToastVariant = 'success' | 'info' | 'warning' | 'danger';
+export type ToastAnimation = 'fadeinup' | 'fadeinleft' | 'fadeinright';
+export type ToastPosition = {
+    x: ToastHorizontalPosition;
+    y: ToastVerticalPosition;
+};
+export type ToastProps = {
+    title: string;
+    variant?: ToastVariant;
+    animation?: ToastAnimation;
+    description?: string;
+    action?: {
+        href: string;
+        label: string;
+    };
+    dismissible?: boolean;
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    duration?: number;
+    position?: ToastPosition;
+    dataTestid?: string;
+    slotAction?: React.ReactNode;
+};

package/dist/toast/types.js

@@ -0,0 +1 @@
+

package/dist/tooltip/tooltip.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export declare const positionVariants: string[];
+export type Position = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipProps = {
+    text: string;
+    position?: Position;
+    children: ReactNode;
+    dataTestid?: string;
+};
+export declare const Tooltip: ({ text, position, dataTestid, children, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/tooltip/tooltip.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsxs as b, jsx as g } from "react/jsx-runtime";
+import { useState as c, useId as h, useCallback as d, useEffect as v } from "react";
+import { c as y } from "../index-DNkhmzZp.js";
+const T = ["top", "bottom", "left", "right"], E = y({
+  base: "gi-tooltip",
+  variants: {
+    position: {
+      left: "gi-tooltip-left",
+      right: "gi-tooltip-right",
+      top: "gi-tooltip-top",
+      bottom: "gi-tooltip-bottom"
+    }
+  }
+}), F = ({
+  text: o,
+  position: i = "top",
+  dataTestid: p,
+  children: u
+}) => {
+  const [e, n] = c(!1), [f, a] = c(!1), l = h(), r = () => n(!0), t = d(() => {
+    n(!1), a(!1);
+  }, []), s = d(
+    (m) => {
+      m.key === "Escape" && t();
+    },
+    [t]
+  );
+  return v(() => (document.addEventListener("keydown", s), () => {
+    document.removeEventListener("keydown", s);
+  }), [s]), /* @__PURE__ */ b(
+    "span",
+    {
+      className: "gi-tooltip-wrapper",
+      onMouseEnter: r,
+      onMouseLeave: () => {
+        f || t();
+      },
+      onFocus: () => {
+        a(!0), r();
+      },
+      onBlur: () => {
+        t();
+      },
+      "aria-describedby": e ? l : void 0,
+      "data-testid": p,
+      children: [
+        u,
+        e && /* @__PURE__ */ g(
+          "span",
+          {
+            id: l,
+            role: "tooltip",
+            className: E({ position: i }),
+            "aria-hidden": !e,
+            "data-testid": `dti-tooltip-content-${i}`,
+            children: o.length > 100 ? o.slice(0, 100) + "..." : o
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  F as Tooltip,
+  T as positionVariants
+};

package/dist/utilities.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns a safe for url string representation.
+ *
+ * @param value - The string to be transformed
+ * @returns A string that can be used as slug
+ *
+ */
+export declare function slugify(value?: string): string | undefined;
+export declare function generateRandomId(): string;

package/dist/utilities.js

@@ -0,0 +1,13 @@
+function l(r) {
+  if (!r)
+    return r;
+  let e = r.replaceAll(/^\s+|\s+$/g, "");
+  return e = e.toLowerCase(), e = e.replaceAll(/[^\d a-z-]/g, "").replaceAll(/\s+/g, "-").replaceAll(/-+/g, "-"), e;
+}
+function t() {
+  return Math.random().toString(36).slice(2, 11);
+}
+export {
+  t as generateRandomId,
+  l as slugify
+};

package/dist/utils/utilities.d.ts

@@ -0,0 +1,24 @@
+import { BreakpointType } from '../hooks/use-breakpoint.js';
+type DisplayPage = number | -1 | -2;
+/**
+ * Helper function to generate an array of page numbers and ellipses for pagination.
+ *
+ * This function is used to generate a compact pagination display that includes page numbers and ellipsis placeholders
+ * based on the active page (`currentPage`), total number of pages (`totalPages`), and the screen size breakpoint.
+ * When the `breakpoint` is small (`SM` or `MD`), the function limits the displayed pages to a simplified view.
+ * When the breakpoint is larger, it displays a wider range of pages around the `currentPage`.
+ *
+ * @param {number} currentPage - The currently active page number in the pagination.
+ * @param {number} totalPages - The total number of pages in the pagination.
+ * @param {Breakpoint} breakpoint - The screen size breakpoint, which determines the range of displayed pages.
+ *
+ * @returns {DisplayPage[]} - An array representing pages to be displayed, where:
+ *   - Positive numbers represent actual page numbers.
+ *   - `-1` and `-2` are placeholders for ellipses ('...') indicating a range of hidden pages.
+ *
+ * Examples:
+ * - For `currentPage = 3`, `totalPages = 100`, and `breakpoint = SM`, the output would be `[1, -1, 3, -2, 100]`.
+ * - For `currentPage = 3`, `totalPages = 3`, and `breakpoint = SM`, the output would be `[1, 2, 3]`.
+ */
+export declare const getDisplayPages: (currentPage: number, totalPages: number, breakpoint: BreakpointType) => DisplayPage[];
+export {};

package/dist/utils/utilities.js

@@ -0,0 +1,20 @@
+import { Breakpoint as u } from "../hooks/use-breakpoint.js";
+const x = (p, f, d) => {
+  if (d === u.Small || d === u.Medium) {
+    const i = [];
+    if (f <= 3) {
+      for (let s = 1; s <= f; s++)
+        i.push(s);
+      return i;
+    }
+    return i.push(1), p > 2 && i.push(-1), p > 1 && p < f && i.push(p), p < f - 1 && i.push(-2), f > 1 && i.push(f), i;
+  }
+  const h = [];
+  p > 3 && h.push(1), p > 4 && h.push(-1);
+  for (let i = p - 2; i <= p + 2; i++)
+    i >= 1 && i <= f && h.push(i);
+  return p < f - 3 && h.push(-2), p < f - 2 && h.push(f), h;
+};
+export {
+  x as getDisplayPages
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogcio/design-system-react",
-  "version": "1.11.1",
+  "version": "1.11.3",
   "description": "The GOV IE design system React components.",
   "type": "module",
   "main": "dist/index.js",
@@ -50,11 +50,11 @@
     "postcss-import": "^16.1.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "@ogcio/design-system-eslint-config": "1.2.5",
     "@ogcio/design-system-prettier-config": "1.0.5",
-    "@ogcio/design-system-tailwind": "1.10.1",
+    "@ogcio/design-system-eslint-config": "1.2.5",
+    "@ogcio/design-system-tailwind": "1.10.3",
     "@ogcio/theme-doete": "1.0.0",
-    "@ogcio/theme-govie": "1.5.1"
+    "@ogcio/theme-govie": "1.5.3"
   },
   "scripts": {
     "format": "prettier 'src/**/*.{ts,tsx}' --write",