@dmsi/wedgekit-react 2.0.0 → 2.0.1

package/dist/components/Modal.js

@@ -0,0 +1,201 @@
+"use client";
+import { jsx as m, jsxs as I } from "react/jsx-runtime";
+import { clsx as L } from "../node_modules/clsx/dist/clsx.js";
+import { useRef as x, useEffect as w, useCallback as y } from "react";
+import { ModalHeader as O } from "./ModalHeader.js";
+import { ModalContent as Y } from "./ModalContent.js";
+import { ModalButtons as K } from "./ModalButtons.js";
+import { ModalScrim as q } from "./ModalScrim.js";
+import { createPortal as B } from "react-dom";
+import { findDocumentRoot as G } from "../utils.js";
+import { useMounted as J } from "../hooks/useMounted.js";
+import N from "../node_modules/react-use/esm/usePrevious.js";
+const Q = (e, t = 300) => e.animate(
+  [
+    { opacity: 0, transform: "scale(0.95)" },
+    { opacity: 1, transform: "scale(1)" }
+  ],
+  {
+    duration: t,
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    fill: "both"
+  }
+), U = (e, t = 200) => e.animate(
+  [
+    { opacity: 1, transform: "scale(1)" },
+    { opacity: 0, transform: "scale(0.95)" }
+  ],
+  {
+    duration: t,
+    easing: "ease-in-out",
+    fill: "both"
+  }
+), V = (e, t = 300) => e.animate([{ opacity: 0 }, { opacity: 1 }], {
+  duration: t,
+  easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  fill: "both"
+}), W = (e, t = 200) => e.animate([{ opacity: 1 }, { opacity: 0 }], {
+  duration: t,
+  easing: "ease-in-out",
+  fill: "both"
+}), X = (e, t) => {
+  let a = 0;
+  e.forEach((r) => {
+    r.onfinish = () => {
+      a += 1, a === e.length && t();
+    };
+  });
+}, $ = {
+  small: {
+    sizeClass: "h-fit max-h-dvh desktop:max-w-120 rounded-sm"
+  },
+  medium: {
+    sizeClass: "desktop:max-w-180 w-screen desktop:h-fit h-dvh desktop:w-full max-w-240 desktop:rounded-sm"
+  },
+  large: {
+    sizeClass: "desktop:max-w-240 w-screen desktop:h-fit h-dvh desktop:w-full max-w-240 desktop:rounded-sm"
+  },
+  "x-large": {
+    sizeClass: "desktop:max-w-300 w-screen desktop:h-fit h-dvh desktop:w-full max-w-240 desktop:rounded-sm"
+  },
+  screen: {
+    sizeClass: "w-screen h-dvh max-w-screen !rounded-none"
+  }
+};
+function ce({
+  id: e,
+  testid: t,
+  title: a,
+  open: r = !1,
+  size: l = "small",
+  className: g,
+  children: u,
+  onClose: n,
+  onContinue: M,
+  closeOnBackdropClick: v = !0,
+  showButtons: z = !1,
+  hideCloseIcon: C = !1,
+  headerIcon: A,
+  headerIconAlign: E,
+  headerIconClassname: P,
+  customActions: k,
+  headerClassname: R,
+  customFooter: D,
+  noWrapper: F,
+  titleAs: S,
+  mobileButtonStack: T = !1
+}) {
+  const p = J(), c = x(null), i = x(null), d = N(r);
+  w(() => {
+    if (p) {
+      if (!c.current || !i.current) {
+        console.error("Modal or background reference is not set.");
+        return;
+      }
+      if (d !== void 0)
+        if (d && !r) {
+          const s = U(c.current), o = W(i.current);
+          X([s, o], () => {
+            n && n();
+          });
+        } else !d && r && (Q(c.current), V(i.current));
+    }
+  }, [p, n, r, d]);
+  const h = y(
+    (s) => {
+      s.key === "Escape" && n && (s.preventDefault(), n());
+    },
+    [n]
+  ), f = y(() => {
+    n && n();
+  }, [n]);
+  w(() => (r && document.addEventListener("keyup", h), () => {
+    document.removeEventListener("keyup", h);
+  }), [r, h]), w(() => {
+    if (!r) return;
+    const s = window.scrollY, o = document.body;
+    return o.style.position = "fixed", o.style.top = `-${s}px`, o.style.left = "0", o.style.right = "0", o.style.overflow = "hidden", o.style.width = "100%", () => {
+      o.style.position = "", o.style.top = "", o.style.left = "", o.style.right = "", o.style.overflow = "", o.style.width = "", window.scrollTo(0, s);
+    };
+  }, [r]);
+  const { sizeClass: j } = $[l] ?? $.small, H = y(
+    (s) => {
+      const o = s.target, b = s.currentTarget;
+      if (b.contains(o) && b !== o) {
+        s.stopPropagation();
+        return;
+      }
+      r && v && f();
+    },
+    [r, v, f]
+  );
+  return p ? B(
+    /* @__PURE__ */ m(
+      q,
+      {
+        id: e ? `${e}-scrim` : void 0,
+        testid: t ? `${t}-scrim` : void 0,
+        size: l,
+        ref: i,
+        show: r,
+        onClick: H,
+        children: /* @__PURE__ */ I(
+          "div",
+          {
+            id: e,
+            "data-testid": t,
+            ref: c,
+            className: L(
+              "shadow-md flex flex-col overflow-hidden w-full opacity-0",
+              l !== "screen" && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
+              g,
+              !g?.includes("bg-") && "bg-background-grouped-primary-normal",
+              j
+            ),
+            onClick: (s) => s.stopPropagation(),
+            children: [
+              /* @__PURE__ */ m(
+                O,
+                {
+                  id: e ? `${e}-header` : void 0,
+                  testid: t ? `${t}-header` : void 0,
+                  title: a,
+                  onClose: f,
+                  hideCloseIcon: C,
+                  headerIcon: A,
+                  headerIconAlign: E,
+                  headerClassname: R,
+                  headerIconClassname: P,
+                  titleAs: S
+                }
+              ),
+              u && (l !== "screen" || F) ? /* @__PURE__ */ m(
+                Y,
+                {
+                  id: e ? `${e}-content` : void 0,
+                  testid: t ? `${t}-content` : void 0,
+                  children: u
+                }
+              ) : u,
+              z ? D ? k : /* @__PURE__ */ m(
+                K,
+                {
+                  id: e ? `${e}-buttons` : void 0,
+                  testid: t ? `${t}-buttons` : void 0,
+                  onClose: f,
+                  onContinue: M,
+                  customActions: k,
+                  mobileButtonStack: T
+                }
+              ) : null
+            ]
+          }
+        )
+      }
+    ),
+    G(i.current)
+  ) : null;
+}
+export {
+  ce as Modal
+};

package/dist/components/ModalButtons.js

@@ -0,0 +1,57 @@
+import { jsx as e, jsxs as m, Fragment as s } from "react/jsx-runtime";
+import { clsx as u } from "../node_modules/clsx/dist/clsx.js";
+import { Button as r } from "./Button.js";
+import { Icon as l } from "./Icon.js";
+import { layoutPaddding as d, layoutGroupGap as f } from "../classNames.js";
+function y({
+  onClose: a,
+  onContinue: i,
+  customActions: t,
+  id: o,
+  testid: n,
+  mobileButtonStack: c = !1
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      id: o,
+      "data-testid": n,
+      className: u(
+        "border-t border-neutral-300 flex",
+        !t && "justify-end",
+        c && "flex-col",
+        d,
+        f
+      ),
+      children: t ?? /* @__PURE__ */ m(s, { children: [
+        /* @__PURE__ */ e(
+          r,
+          {
+            id: o ? `${o}-close-button` : void 0,
+            testid: n ? `${n}-close-button` : void 0,
+            variant: "secondary",
+            leftIcon: /* @__PURE__ */ e(l, { name: "close", size: 24 }),
+            onClick: a,
+            className: "max-sm:w-full",
+            children: "Close"
+          }
+        ),
+        /* @__PURE__ */ e(
+          r,
+          {
+            id: o ? `${o}-continue-button` : void 0,
+            testid: n ? `${n}-continue-button` : void 0,
+            variant: "primary",
+            leftIcon: /* @__PURE__ */ e(l, { name: "check", size: 24 }),
+            className: "max-sm:w-full",
+            onClick: i,
+            children: "Continue"
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  y as ModalButtons
+};

package/dist/components/ModalContent.js

@@ -0,0 +1,24 @@
+import { jsx as a } from "react/jsx-runtime";
+import { clsx as i } from "../node_modules/clsx/dist/clsx.js";
+import { layoutPaddding as m } from "../classNames.js";
+function f({
+  children: o,
+  id: t,
+  testid: r
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      id: t,
+      "data-testid": r,
+      className: i(
+        "flex-grow min-h-0 overflow-y-auto",
+        m
+      ),
+      children: o
+    }
+  );
+}
+export {
+  f as ModalContent
+};

package/dist/components/ModalHeader.js

@@ -0,0 +1,74 @@
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import { Heading2 as y } from "./Heading.js";
+import { Button as v } from "./Button.js";
+import { Icon as x } from "./Icon.js";
+import { layoutGroupGap as l, layoutPaddding as j } from "../classNames.js";
+import { clsx as r } from "../node_modules/clsx/dist/clsx.js";
+function k({
+  title: n,
+  hideCloseIcon: a,
+  headerIcon: c,
+  headerIconAlign: o,
+  onClose: m,
+  id: t,
+  testid: e,
+  headerClassname: f,
+  titleAs: d,
+  headerIconClassname: u
+}) {
+  const p = d || y;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      id: t,
+      "data-testid": e,
+      className: r(
+        "flex items-center",
+        o === void 0 && "justify-between",
+        o === "center" && "justify-center",
+        o === "right" && "justify-end",
+        o === "left" && "justify-start",
+        j,
+        l,
+        f
+      ),
+      children: [
+        /* @__PURE__ */ s("div", { className: r("flex items-center flex-1", l), children: [
+          c,
+          n && /* @__PURE__ */ i(
+            p,
+            {
+              id: t ? `${t}-title` : void 0,
+              testid: e ? `${e}-title` : void 0,
+              as: "p",
+              children: n
+            }
+          )
+        ] }),
+        !a && /* @__PURE__ */ i(
+          v,
+          {
+            id: t ? `${t}-close-button` : void 0,
+            testid: e ? `${e}-close-button` : void 0,
+            iconOnly: !0,
+            variant: "tertiary",
+            onClick: m,
+            leftIcon: /* @__PURE__ */ i(
+              "span",
+              {
+                className: r(
+                  "contents",
+                  u ?? "text-icon-primary-normal"
+                ),
+                children: /* @__PURE__ */ i(x, { name: "close", size: 24 })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  k as ModalHeader
+};

package/dist/components/ModalScrim.js

@@ -0,0 +1,32 @@
+import { jsx as s } from "react/jsx-runtime";
+import { clsx as p } from "../node_modules/clsx/dist/clsx.js";
+function d({
+  show: t = !1,
+  size: o = "small",
+  children: e,
+  onClick: n,
+  ref: i,
+  id: r,
+  testid: a
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      id: r,
+      "data-testid": a,
+      className: p(
+        "overflow-y-auto h-dvh transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center group bg-neutral-600/50 fixed opacity-0",
+        !t && " pointer-events-none",
+        o === "small" && "p-4",
+        o === "screen" ? "desktop:p-0" : "desktop:p-4",
+        "inset-0 z-50"
+      ),
+      onMouseDown: n,
+      ref: i,
+      children: e
+    }
+  );
+}
+export {
+  d as ModalScrim
+};

package/dist/components/NavigationTab.js

@@ -0,0 +1,72 @@
+import { jsx as n } from "react/jsx-runtime";
+import { clsx as a } from "../node_modules/clsx/dist/clsx.js";
+import { Button as y } from "./Button.js";
+import { Icon as u } from "./Icon.js";
+function C({
+  id: r,
+  testid: e,
+  label: i,
+  onClick: c,
+  selected: o = !1,
+  className: d,
+  disabled: s = !1,
+  href: t,
+  ...m
+}) {
+  const l = a(
+    // "!text-text-on-action-primary-hover", // use this once semantic tokens are available
+    "!text-brand-text-on-action-primary-hover",
+    // "hover:!text-text-on-action-primary-hover", // use this once semantic tokens are available
+    "hover:!text-brand-text-on-action-primary-hover",
+    // "active:!text-text-on-action-primary-active", // use this once semantic tokens are available
+    "active:!text-brand-text-on-action-primary-active",
+    "disabled:!text-brand-text-on-action-primary-disabled"
+  ), p = a(
+    "disabled:!bg-background-on-action-primary-disabled disabled:pointer-events-none"
+  ), b = a(
+    "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+  ), v = a(
+    "!bg-brand-200",
+    "hover:!bg-background-on-action-primary-normal",
+    // "hover:!bg-background-action-primary-normal", // use this once semantic tokens are available
+    "active:!bg-background-on-action-primary-active",
+    // "active:!bg-background-action-primary-active", // use this once semantic tokens are available
+    "shadow-nav-tab"
+  ), g = a(
+    "!bg-neutral-000",
+    "hover:!bg-background-on-action-primary-normal",
+    "active:!bg-background-on-action-primary-active"
+  ), x = {
+    "--color-text-on-action-primary-hover": "var(--color-brand-500)",
+    "--color-text-on-action-primary-active": "var(--color-brand-300)"
+  };
+  return /* @__PURE__ */ n(
+    y,
+    {
+      id: r,
+      testid: e,
+      variant: "tertiary-critical",
+      colorClassName: l,
+      className: a(
+        "!border-0 !rounded-b-none h-10 min-w-20 relative",
+        b,
+        p,
+        !o && v,
+        o && g,
+        d
+      ),
+      style: x,
+      classNameLabel: "px-1",
+      rightIcon: /* @__PURE__ */ n(u, { name: "close", size: 16 }),
+      onClick: c,
+      disabled: s,
+      ...m,
+      as: t ? "a" : void 0,
+      href: t,
+      children: i
+    }
+  );
+}
+export {
+  C as NavigationTab
+};

package/dist/components/NavigationTabs.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { clsx as v } from "../node_modules/clsx/dist/clsx.js";
+import { useState as h } from "react";
+import { NavigationTab as p } from "./NavigationTab.js";
+import { componentGap as x } from "../classNames.js";
+function g({
+  id: d,
+  testid: t,
+  tabs: i,
+  onTabChange: l,
+  colorPrimitives: c = "dmsi"
+}) {
+  const [n, s] = h(i[0]?.id ?? ""), a = (e) => {
+    s(e), l?.(e);
+  }, r = i.find((e) => e.id === n)?.content, m = i.find((e) => e.id === n)?.href;
+  return /* @__PURE__ */ f("div", { id: d, "data-testid": t, children: [
+    /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+      "div",
+      {
+        className: v(
+          "flex items-center relative overflow-x-auto overflow-y-hidden",
+          x
+        ),
+        children: i.map((e) => /* @__PURE__ */ o(
+          p,
+          {
+            id: d ? `${d}-tab-${e.id}` : void 0,
+            testid: t ? `${t}-tab-${e.id}` : void 0,
+            label: e.label,
+            selected: n === e.id,
+            onClick: () => a(e.id),
+            colorPrimitives: c,
+            href: e.href
+          },
+          e.id
+        ))
+      }
+    ) }),
+    r && !m && /* @__PURE__ */ o("div", { className: "mt-2", children: r })
+  ] });
+}
+export {
+  g as NavigationTabs
+};

package/dist/components/NestedMenu.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import C, { useMemo as g, useState as _, useEffect as y } from "react";
+import { Icon as E } from "./Icon.js";
+import { MenuOption as d } from "./MenuOption.js";
+import { useKeydown as w } from "../hooks/useKeydown.js";
+function O(m) {
+  const { onMenuClick: h, currentMenu: n, testid: t, pinnedEntry: i, disabled: r = !1 } = m, s = g(() => {
+    const e = [];
+    return n.removeBackOption || e.push("back"), i && e.push("pinned"), (n.subEntries || []).forEach((l, v) => {
+      l.children == null && e.push(v);
+    }), e;
+  }, [n, i]), b = s.findIndex((e) => typeof e == "number"), c = b >= 0 ? b : 0, [f, a] = _(c);
+  y(() => {
+    a(c);
+  }, [n.id, c]);
+  const p = (e) => f >= 0 && s[f] === e;
+  function k() {
+    i && (i.onClick ? i.onClick() : i.url && h(
+      { id: "__pinned__", label: i.label, url: i.url },
+      "url"
+    ));
+  }
+  w(
+    {
+      Escape: () => {
+        r || (a(c), u(null, !0));
+      },
+      ArrowUp: () => {
+        r || s.length === 0 || a(
+          (e) => e <= 0 ? s.length - 1 : e - 1
+        );
+      },
+      ArrowDown: () => {
+        r || s.length === 0 || a(
+          (e) => e >= s.length - 1 ? 0 : e + 1
+        );
+      },
+      // "Space" is replaced with " " to handle spacebar.
+      "Enter/Space": () => {
+        if (r) return;
+        const e = s[f];
+        if (e === "back") {
+          u(n.previousMenu ?? null, !0), n.previousMenu?.previousMenu || a(c);
+          return;
+        }
+        if (e === "pinned") {
+          k();
+          return;
+        }
+        const l = (n.subEntries || [])[e];
+        l && M(l);
+      },
+      Backspace: () => {
+        r || (u(n.previousMenu ?? null, !0), n.previousMenu?.previousMenu || a(c));
+      }
+    },
+    !0
+  );
+  function u(e, l = !1, v) {
+    h(
+      e && { ...e, ...!l && { previousMenu: n } },
+      v
+    );
+  }
+  function M(e) {
+    e.subEntries?.length ? u(e, !1, "subEntry") : e.onClick ? u(e, !1, "onClick") : u(e);
+  }
+  return /* @__PURE__ */ x("div", { className: "flex flex-col w-full", children: [
+    !n.removeBackOption && /* @__PURE__ */ o(
+      d,
+      {
+        testid: t ? `${t}-back` : void 0,
+        variant: "action",
+        disabled: r,
+        before: /* @__PURE__ */ o(E, { name: "chevron_left", className: "icon", size: 24 }),
+        onClick: () => u(n.previousMenu ?? null, !0),
+        selected: p("back"),
+        children: n.previousMenu ? n.previousMenu.label : "Main Menu"
+      }
+    ),
+    n.title && /* @__PURE__ */ o(
+      d,
+      {
+        variant: "action",
+        disabled: r,
+        testid: t ? `${t}-title` : void 0,
+        children: n.title
+      }
+    ),
+    i && /* @__PURE__ */ o(
+      d,
+      {
+        testid: t ? `${t}-pinned-entry` : void 0,
+        variant: "action",
+        disabled: r,
+        selected: p("pinned"),
+        onClick: k,
+        children: i.label
+      }
+    ),
+    (n.subEntries || []).map((e, l) => e.children == null ? /* @__PURE__ */ o(
+      d,
+      {
+        testid: t ? `${t}-${e.label}` : void 0,
+        variant: "normal",
+        disabled: r || e.disabled,
+        onClick: () => M(e),
+        after: e.subEntries?.length ? /* @__PURE__ */ o(E, { name: "chevron_right", className: "icon", size: 24 }) : void 0,
+        selected: p(l),
+        children: e.label
+      },
+      e.id
+    ) : /* @__PURE__ */ o(C.Fragment, { children: e.children }, e.id))
+  ] });
+}
+export {
+  O as NestedMenu
+};