@ogcio/design-system-react 1.11.0 → 1.11.2

package/dist/test-utilities.d.ts

@@ -0,0 +1,8 @@
+import { RenderOptions, RenderResult } from '@testing-library/react';
+import { default as React } from 'react';
+export * from '@testing-library/react';
+interface CustomRenderResult extends RenderResult {
+    axe: () => Promise<void>;
+}
+export declare function renderComponent(component: React.ReactNode, options?: RenderOptions): CustomRenderResult;
+export declare const testVariantsAxe: (variants: any, renderFunction: (variant: any) => CustomRenderResult) => void;

package/dist/test-utilities.js

@@ -0,0 +1,87 @@
+import { a as l, j as s, c as t, b as y, k as r, l as i, m as B, n as u, o as n, p as d, q as o, u as T, v as g, x as A, y as x, z as f, A as q, B as p, C as c, D as m, E as b, f as h, F as D, G as R, H as E, I as Q, J as I, K as V, L as F, M as L, N as P, O as k, P as w, Q as S, R as v, S as M, T as C, U as H, d as N, V as O, W, X as j, Y as z, Z as G, _ as Z, $ as J, a0 as K, a1 as U, a2 as X, a3 as Y, a4 as _, a5 as $, a6 as ee, i as ae, a7 as le, a8 as se, a9 as te, aa as ye, ab as re, ac as ie, ad as Be, ae as ue, af as ne, ag as de, ah as oe, ai as Te, aj as ge, ak as Ae, al as xe, am as fe, an as qe, ao as pe, ap as ce, aq as me, e as be, r as he, h as De, s as Re, t as Ee, w as Qe, ar as Ie, Z as Ve, as as Fe, at as Le } from "./test-utilities-BS7B3BF-.js";
+export {
+  l as act,
+  s as buildQueries,
+  t as cleanup,
+  y as configure,
+  r as createEvent,
+  i as findAllByAltText,
+  B as findAllByDisplayValue,
+  u as findAllByLabelText,
+  n as findAllByPlaceholderText,
+  d as findAllByRole,
+  o as findAllByTestId,
+  T as findAllByText,
+  g as findAllByTitle,
+  A as findByAltText,
+  x as findByDisplayValue,
+  f as findByLabelText,
+  q as findByPlaceholderText,
+  p as findByRole,
+  c as findByTestId,
+  m as findByText,
+  b as findByTitle,
+  h as fireEvent,
+  D as getAllByAltText,
+  R as getAllByDisplayValue,
+  E as getAllByLabelText,
+  Q as getAllByPlaceholderText,
+  I as getAllByRole,
+  V as getAllByTestId,
+  F as getAllByText,
+  L as getAllByTitle,
+  P as getByAltText,
+  k as getByDisplayValue,
+  w as getByLabelText,
+  S as getByPlaceholderText,
+  v as getByRole,
+  M as getByTestId,
+  C as getByText,
+  H as getByTitle,
+  N as getConfig,
+  O as getDefaultNormalizer,
+  W as getElementError,
+  j as getMultipleElementsFoundError,
+  z as getNodeText,
+  G as getQueriesForElement,
+  Z as getRoles,
+  J as getSuggestedQuery,
+  K as isInaccessible,
+  U as logDOM,
+  X as logRoles,
+  Y as makeFindQuery,
+  _ as makeGetAllQuery,
+  $ as makeSingleQuery,
+  ee as prettyDOM,
+  ae as prettyFormat,
+  le as queries,
+  se as queryAllByAltText,
+  te as queryAllByAttribute,
+  ye as queryAllByDisplayValue,
+  re as queryAllByLabelText,
+  ie as queryAllByPlaceholderText,
+  Be as queryAllByRole,
+  ue as queryAllByTestId,
+  ne as queryAllByText,
+  de as queryAllByTitle,
+  oe as queryByAltText,
+  Te as queryByAttribute,
+  ge as queryByDisplayValue,
+  Ae as queryByLabelText,
+  xe as queryByPlaceholderText,
+  fe as queryByRole,
+  qe as queryByTestId,
+  pe as queryByText,
+  ce as queryByTitle,
+  me as queryHelpers,
+  be as render,
+  he as renderComponent,
+  De as renderHook,
+  Re as screen,
+  Ee as testVariantsAxe,
+  Qe as waitFor,
+  Ie as waitForElementToBeRemoved,
+  Ve as within,
+  Fe as wrapAllByQueryWithSuggestion,
+  Le as wrapSingleQueryWithSuggestion
+};

package/dist/text-input/text-input.d.ts

@@ -0,0 +1,23 @@
+import { InputTextProps } from '../input-text/type.js';
+/**
+ * @deprecated Use `<InputText />` instead of `<TextInput />`.
+ */
+export declare const TextInput: import('react').ForwardRefExoticComponent<import('react').InputHTMLAttributes<HTMLInputElement> & {
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    inputClassName?: string;
+    iconStart?: import('../icon/icon.js').IconId;
+    onIconStartClick?: () => void;
+    iconStartClassName?: string;
+    iconEnd?: import('../icon/icon.js').IconId;
+    iconEndClassName?: string;
+    onIconEndClick?: () => void;
+    inputActionButton?: import('../input-text/type.js').InputActionButtonProps;
+    iconEndRef?: any;
+    inputActionPosition?: "beforeSuffix" | "afterSuffix";
+    type?: "text" | "date" | "datetime-local" | "email" | "month" | "number" | "password" | "tel" | "time" | "url" | "week" | "search";
+    halfFluid?: boolean;
+    clearButtonEnabled?: boolean;
+} & import('react').RefAttributes<HTMLInputElement>>;
+/** @deprecated Use InputTextProps instead */
+export type TextInputProps = InputTextProps;

package/dist/text-input/text-input.js

@@ -0,0 +1,7 @@
+"use client";
+import { InputText as t } from "../input-text/input-text.js";
+const e = t;
+e.displayName = "TextInput";
+export {
+  e as TextInput
+};

package/dist/textarea/textarea.d.ts

@@ -0,0 +1,13 @@
+import { default as React, TextareaHTMLAttributes } from 'react';
+import { IconId } from '../icon/icon.js';
+export type TextAreaProps = React.DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
+    ref?: React.Ref<HTMLTextAreaElement>;
+    rows?: number;
+    cols?: number;
+    autoComplete?: string;
+    maxChars?: number;
+    halfFluid?: boolean;
+    iconStart?: IconId;
+    clearButtonEnabled?: boolean;
+};
+export declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<unknown>>;

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/toast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/toast/toast.test.js

@@ -0,0 +1,44 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as l, r as n, w as T } from "../test-utilities-BS7B3BF-.js";
+import { toaster as i, ToastProvider as c } from "./toast.js";
+const d = [
+  "info",
+  "success",
+  "warning",
+  "danger"
+];
+describe("Toast", () => {
+  afterEach(l);
+  const s = (t) => {
+    const e = n(/* @__PURE__ */ o(c, {}));
+    return i.create(t), e;
+  };
+  it("should render toast with title and message", async () => {
+    const t = s({
+      title: "Toast Title",
+      description: "This is the toast content"
+    });
+    expect(await t.findByText("Toast Title")).toBeInTheDocument(), expect(
+      await t.findByText("This is the toast content")
+    ).toBeInTheDocument();
+  }), it("should render all different variants", async () => {
+    const t = n(/* @__PURE__ */ o(c, {}));
+    for (const e of d) {
+      const a = "Toast";
+      i.create({
+        variant: e,
+        title: a,
+        description: "This is a Toast"
+      }), await T(() => {
+        const r = t.getByTestId(`${a}-${e}`);
+        expect(r).not.toBeNull();
+      });
+    }
+  }), it("should pass axe accessibility tests", async () => {
+    await s({
+      variant: "success",
+      title: "Accessible Toast",
+      description: "This toast should be accessible"
+    }).axe();
+  });
+});

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;