@dmsi/wedgekit-react 2.0.0 → 2.0.2

package/dist/components/TopBar.js

@@ -0,0 +1,119 @@
+import { jsx as e, jsxs as t, Fragment as x } from "react/jsx-runtime";
+import { clsx as i } from "../node_modules/clsx/dist/clsx.js";
+import { gapUsingContainerPadding as g, layoutGap as s, layoutGroupGap as c, containerPaddingX as k, layoutPaddingY as v } from "../classNames.js";
+import { LogoDMSiTopBar as h } from "./LogoDMSiTopBar.js";
+function y({
+  left: d,
+  right: a,
+  topNavLinks: r,
+  mobileLeft: n,
+  mobileRight: l,
+  brandLogo: o = /* @__PURE__ */ e(h, {}),
+  id: p,
+  testid: m,
+  ...f
+}) {
+  const u = i("bg-background-primary-normal");
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      id: p,
+      "data-testid": m,
+      className: i(
+        "flex items-center justify-between",
+        k,
+        v,
+        s,
+        u
+      ),
+      ...f,
+      children: [
+        d && /* @__PURE__ */ e(
+          "div",
+          {
+            className: i(
+              "hidden desktop:flex items-center",
+              g
+            ),
+            children: d
+          }
+        ),
+        (a || r) && /* @__PURE__ */ t(
+          "div",
+          {
+            className: i(
+              "hidden desktop:flex items-center shrink-0 ml-auto",
+              "[&>a]:leading-6",
+              s
+            ),
+            children: [
+              r,
+              r && a && /* @__PURE__ */ e("div", { className: "h-6 border-r border-border-primary-normal" }),
+              a
+            ]
+          }
+        ),
+        n && /* @__PURE__ */ t(
+          "div",
+          {
+            className: i("flex items-center desktop:hidden", c),
+            children: [
+              n,
+              /* @__PURE__ */ e(
+                "a",
+                {
+                  href: "/",
+                  "data-testid": m ? `${m}-mobile-brand-logo-link` : "main-nav-mobile-logo",
+                  className: "grow max-w-100 h-auto max-h-18 *:max-h-[inherit]",
+                  children: o && o
+                }
+              )
+            ]
+          }
+        ),
+        l && /* @__PURE__ */ e(
+          "div",
+          {
+            className: i("flex items-center desktop:hidden", c),
+            children: l
+          }
+        )
+      ]
+    }
+  );
+}
+function j({
+  left: d,
+  brandLogo: a = /* @__PURE__ */ e(h, {}),
+  id: r,
+  testid: n,
+  brandHref: l = "/",
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    y,
+    {
+      ...o,
+      id: r,
+      testid: n,
+      brandLogo: a,
+      left: /* @__PURE__ */ t(x, { children: [
+        /* @__PURE__ */ e(
+          "a",
+          {
+            id: r ? `${r}-brand-logo-link` : void 0,
+            "data-testid": n ? `${n}-brand-logo-link` : "main-nav-desktop-logo",
+            href: l,
+            className: "grow w-full h-18 *:max-h-[inherit]",
+            children: a && a
+          }
+        ),
+        d
+      ] })
+    }
+  );
+}
+export {
+  j as TopBar,
+  y as TopBarBase
+};

package/dist/components/Upload.js

@@ -0,0 +1,107 @@
+import { jsxs as i, jsx as t, Fragment as l } from "react/jsx-runtime";
+import { clsx as x } from "../node_modules/clsx/dist/clsx.js";
+import { forwardRef as y } from "react";
+import { componentGap as h } from "../classNames.js";
+import { Icon as s } from "./Icon.js";
+import { Paragraph as g } from "./Paragraph.js";
+import { Button as v } from "./Button.js";
+import { Stack as b } from "./Stack.js";
+import { Spinner as j } from "./Spinner.js";
+const B = y(
+  function(d, m) {
+    const {
+      isLoading: a,
+      style: c,
+      errorText: r,
+      text: p = "Upload your file",
+      value: o,
+      onRemove: f,
+      testid: e,
+      ...u
+    } = d;
+    return /* @__PURE__ */ i(
+      "label",
+      {
+        style: {
+          ...c
+        },
+        className: x(
+          "border border-dashed border-border-primary-normal",
+          "flex flex-col items-center justify-center",
+          "p-6",
+          "cursor-pointer",
+          "relative",
+          "w-full h-[166px] desktop:w-[340px] desktop:h-[190px]",
+          h
+        ),
+        "data-testid": e,
+        children: [
+          /* @__PURE__ */ t(
+            "input",
+            {
+              ...u,
+              ref: m,
+              type: "file",
+              className: "sr-only",
+              "data-testid": e ? `${e}-file-input` : void 0
+            }
+          ),
+          a && /* @__PURE__ */ t(
+            b,
+            {
+              centered: !0,
+              items: "center",
+              justify: "center",
+              sizing: "container",
+              padding: !0,
+              children: /* @__PURE__ */ t(j, { size: "large" })
+            }
+          ),
+          !o && !a && /* @__PURE__ */ i(l, { children: [
+            /* @__PURE__ */ t(
+              s,
+              {
+                testid: e ? `${e}-icon` : void 0,
+                name: "cloud_upload",
+                className: "text-icon-primary-normal"
+              }
+            ),
+            /* @__PURE__ */ t(
+              g,
+              {
+                testid: e ? `${e}-text` : void 0,
+                color: r ? "text-primary-error" : "text-secondary-normal",
+                children: r || p
+              }
+            )
+          ] }),
+          o && /* @__PURE__ */ i(l, { children: [
+            /* @__PURE__ */ t(
+              "img",
+              {
+                "data-testid": e ? `${e}-uploaded-image` : void 0,
+                src: o,
+                alt: "",
+                className: "absolute inset-0 object-contain object-center max-h-full max-w-full self-center justify-self-center"
+              }
+            ),
+            /* @__PURE__ */ t("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ t(
+              v,
+              {
+                testid: e ? `${e}-remove-image-button` : void 0,
+                onClick: (n) => {
+                  n.preventDefault(), n.stopPropagation(), f?.();
+                },
+                iconOnly: !0,
+                leftIcon: /* @__PURE__ */ t(s, { name: "delete" })
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+export {
+  B as Upload
+};

package/dist/components/WorldpayIframe.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+function r({
+  url: o,
+  testid: a
+}) {
+  return /* @__PURE__ */ l(
+    "iframe",
+    {
+      "data-testid": a,
+      src: o,
+      sandbox: "allow-same-origin allow-forms allow-scripts allow-popups allow-top-navigation",
+      style: { width: "100%", height: "100%", flex: 1 }
+    }
+  );
+}
+export {
+  r as WorldpayIframe
+};

package/dist/hooks/useEditCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEditCell.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditCell.tsx"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,YAAY,EAAE,MAAM;;;;;;;EA0B/C"}
+{"version":3,"file":"useEditCell.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditCell.tsx"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,YAAY,EAAE,MAAM;;;;;;;EA0B/C"}

package/dist/hooks/useEditCell.js

@@ -0,0 +1,24 @@
+"use client";
+import { useState as n, useRef as a } from "react";
+function l(o) {
+  const [u, s] = n(o), [i, e] = n(!1), t = a(null);
+  function c() {
+    e(!0), requestAnimationFrame(() => {
+      t.current?.focus();
+    });
+  }
+  function r() {
+    e(!1);
+  }
+  return {
+    value: u,
+    setValue: s,
+    isEdit: i,
+    inputRef: t,
+    changeToEditMode: c,
+    changeToViewMode: r
+  };
+}
+export {
+  l as useEditCell
+};

package/dist/hooks/useInfiniteScroll.js

@@ -0,0 +1,25 @@
+"use client";
+import { useEffect as m } from "react";
+function v({
+  containerRef: r,
+  onLoadMore: e,
+  isLoading: l,
+  offset: c = 50,
+  enabled: o = !0
+}) {
+  m(() => {
+    if (!o) return;
+    const n = () => {
+      const s = r.current;
+      if (!s || l) return;
+      const { scrollTop: i, scrollHeight: u, clientHeight: f } = s;
+      i + f >= u - c && e();
+    }, t = r.current;
+    return t && t.addEventListener("scroll", n), () => {
+      t && t.removeEventListener("scroll", n);
+    };
+  }, [r, e, l, c, o]);
+}
+export {
+  v as useInfiniteScroll
+};

package/dist/hooks/useKeydown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useKeydown.d.ts","sourceRoot":"","sources":["../../src/hooks/useKeydown.ts"],"names":[],"mappings":"AAEA,KAAK,UAAU,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;AAEjD,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,EAChC,QAAQ,CAAC,EAAE,OAAO,GACjB,IAAI,CAkCN"}
+{"version":3,"file":"useKeydown.d.ts","sourceRoot":"","sources":["../../src/hooks/useKeydown.ts"],"names":[],"mappings":"AAIA,KAAK,UAAU,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;AAEjD,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,EAChC,QAAQ,CAAC,EAAE,OAAO,GACjB,IAAI,CAkCN"}

package/dist/hooks/useKeydown.js

@@ -0,0 +1,21 @@
+"use client";
+import { useEffect as o } from "react";
+function d(r, u) {
+  function t(e) {
+    !Object.keys(r).includes(e.key) && !Object.keys(r).join("").includes("/") || Object.entries(r).forEach(([n, i]) => {
+      if (!(e.key !== n && !n.includes("/"))) {
+        if (n.includes("/") && n.replace("Space", " ").split("/").includes(e.key)) {
+          e.preventDefault(), i(e);
+          return;
+        }
+        e.key === n && (e.preventDefault(), i(e));
+      }
+    });
+  }
+  o(() => u ? (document.addEventListener("keydown", t), () => {
+    document.removeEventListener("keydown", t);
+  }) : document.removeEventListener("keydown", t), [r, u]);
+}
+export {
+  d as useKeydown
+};

package/dist/hooks/useMatchesMedia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMatchesMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useMatchesMedia.ts"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,uBAY5C;AAED,wBAAgB,gBAAgB,IAAI,OAAO,GAAG,SAAS,CAEtD"}
+{"version":3,"file":"useMatchesMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useMatchesMedia.ts"],"names":[],"mappings":"AAIA,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,uBAY5C;AAED,wBAAgB,gBAAgB,IAAI,OAAO,GAAG,SAAS,CAEtD"}

package/dist/hooks/useMatchesMedia.js

@@ -0,0 +1,16 @@
+"use client";
+import { useState as c, useLayoutEffect as r } from "react";
+function i(n) {
+  const [s, a] = c();
+  return r(() => {
+    const e = window.matchMedia(n), t = () => a(e.matches);
+    return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
+  }, [n]), s;
+}
+function u() {
+  return i("(width < 48rem)");
+}
+export {
+  i as useMatchesMedia,
+  u as useMatchesMobile
+};

package/dist/hooks/useMenuSystem.js

@@ -0,0 +1,186 @@
+"use client";
+import { useState as O, useCallback as y, useEffect as L, useRef as M } from "react";
+import { useMatchesMobile as P } from "./useMatchesMedia.js";
+function Y(l) {
+  const [o, n] = O(
+    {}
+  ), [g, A] = O(""), [w, m] = O(
+    null
+  ), u = M(null), a = M({}), i = M(null), c = M(null), h = M(null), d = M(!1), f = M(null), E = M(null), v = P(), R = (t, e) => {
+    c.current && (clearTimeout(c.current), c.current = null), A(t), m(e), n((r) => {
+      const s = { ...r };
+      return s[e] === t ? delete s[e] : s[e] = t, Object.keys(s).forEach((b) => {
+        Number(b) > e && delete s[Number(b)];
+      }), s;
+    });
+  }, T = (t, e) => {
+    c.current && (clearTimeout(c.current), c.current = null), n((r) => {
+      const s = { ...r };
+      return s[e] = t, Object.keys(s).forEach((b) => {
+        Number(b) > e && delete s[Number(b)];
+      }), s;
+    });
+  }, p = y(() => {
+    E.current && (E.current(), E.current = null), f.current && (f.current(), f.current = null);
+  }, []), C = (t, e, r = 150) => {
+    v || (f.current = () => {
+      i.current && clearTimeout(i.current), i.current = setTimeout(() => {
+        T(t, e);
+      }, r);
+    }, d.current || p());
+  }, j = (t, e = 500) => {
+    v || (E.current = () => {
+      i.current && (clearTimeout(i.current), i.current = null), c.current = setTimeout(() => {
+        S(t);
+      }, e);
+    }, d.current || p());
+  }, W = () => {
+    d.current = !0, h.current && clearTimeout(h.current), h.current = setTimeout(() => {
+      d.current = !1, p();
+    }, 200);
+  }, I = () => {
+    v || h.current && (clearTimeout(h.current), h.current = null, d.current = !1);
+  }, S = (t) => {
+    n((e) => {
+      const r = { ...e };
+      if (delete r[t], Object.keys(r).forEach((s) => {
+        Number(s) >= t && delete r[Number(s)];
+      }), v) {
+        const s = t - 1;
+        m(s);
+        const b = r[s];
+        Object.keys(r).length > 0 && b && A(b);
+      }
+      return r;
+    });
+  }, k = (t, e) => {
+    a.current[t] = e;
+  }, N = (t, e) => o[e] === t;
+  return L(() => {
+    const t = (e) => {
+      if (Object.keys(o).length === 0) return;
+      const r = e.target;
+      if (u.current?.contains(r)) return;
+      Object.values(o).some((b) => a.current[b]?.contains(r)) || n({});
+    };
+    return document.addEventListener("mousedown", t), () => {
+      document.removeEventListener("mousedown", t);
+    };
+  }, [o]), L(() => () => {
+    i.current && clearTimeout(i.current), c.current && clearTimeout(c.current);
+  }, []), {
+    menuRootRef: u,
+    activeMenus: o,
+    openMenu: T,
+    isMenuActive: N,
+    registerSubMenu: k,
+    closeSubMenuLevel: S,
+    getAllFocusableMenuElements: () => {
+      const t = [];
+      return u.current && t.push(
+        ...Array.from(u.current.children)
+      ), Object.values(o).forEach((e) => {
+        const r = a.current[e];
+        r && t.push(...Array.from(r.children));
+      }), t;
+    },
+    findCurrentMenuLevel: (t) => {
+      let e = t.parentElement;
+      for (; e; ) {
+        const r = e.getAttribute("data-menu-level");
+        if (r !== null)
+          return parseInt(r, 10);
+        e = e.parentElement;
+      }
+      return 0;
+    },
+    getMenuElementsAtLevel: (t) => {
+      if (t === 0 && u.current)
+        return Array.from(u.current.children);
+      const e = Object.entries(o).find(([, r]) => {
+        const s = a.current[r];
+        return s && s.getAttribute("data-menu-level") === t.toString();
+      })?.[1];
+      if (e) {
+        const r = a.current[e];
+        if (r)
+          return Array.from(r.children);
+      }
+      return [];
+    },
+    mobileHide: v && Object.keys(o).length > 0,
+    listeners: {
+      onSubMenuHover: C,
+      onSubMenuLeave: j,
+      onSubMenuEnter: I,
+      onMouseMove: W,
+      toggleMenu: R,
+      mobilePositionTo: l,
+      activeMenu: g,
+      currentSubMenuLevel: w,
+      closeSubMenuLevel: S
+    }
+  };
+}
+function q(l, o = "bottom", n) {
+  const [g, A] = O({
+    top: 0,
+    left: 0,
+    minWidth: 0
+  }), w = n?.isMobile, m = y(() => {
+    if (!l?.current) return;
+    const u = l.current.getBoundingClientRect(), a = n?.menuRef?.current?.getBoundingClientRect(), i = window.innerWidth, c = a?.width || u.width, h = n?.topOffset ?? 4;
+    let d = 0, f = 0;
+    if (o === "bottom" || o === "bottom-right" ? d = u.top + u.height + h : d = u.top, o === "bottom" ? f = u.left : o === "bottom-right" ? f = u.right - c : o === "right" && (w ? f = u.left : f = u.right), f + c > i) {
+      const v = u.left - c;
+      v < 0 ? f = (i - c) / 2 : f = v;
+    }
+    w && o === "right" && (d = u.top + u.height + h), w && c > i && (f = 0), A({
+      top: d,
+      left: f,
+      minWidth: u.width
+    });
+  }, [l, o, n?.menuRef, n?.topOffset, w]);
+  return L(() => {
+    if (!n?.isOpen || !n?.setIsOpen) return;
+    const u = (a) => {
+      const i = a.target;
+      l.current?.contains(i) || n.menuRef?.current?.contains(i) || n.additionalRefs?.some((c) => c.current?.contains(i)) || n.setIsOpen?.(!1);
+    };
+    return document.addEventListener("mousedown", u), () => {
+      document.removeEventListener("mousedown", u);
+    };
+  }, [
+    n,
+    l,
+    n?.isOpen,
+    n?.setIsOpen,
+    n?.menuRef,
+    n?.additionalRefs
+  ]), L(() => {
+    m();
+    const u = new ResizeObserver(m);
+    l?.current && u.observe(l.current), window.addEventListener("scroll", m);
+    const a = () => {
+      n?.setIsOpen?.(!1);
+    }, i = z(l.current);
+    return i.forEach((c) => c.addEventListener("scroll", a)), window.addEventListener("resize", m), () => {
+      u.disconnect(), window.removeEventListener("scroll", m), i.forEach((c) => c.removeEventListener("scroll", a)), window.removeEventListener("resize", m);
+    };
+  }, [l, m]), { menuPosition: g, updatePosition: m };
+}
+function z(l) {
+  if (!l)
+    return [];
+  const o = [];
+  let n = l.parentElement;
+  for (; n; ) {
+    const g = window.getComputedStyle(n).overflowY;
+    (g === "auto" || g === "scroll") && o.push(n), n = n.parentElement;
+  }
+  return o;
+}
+export {
+  q as useMenuPosition,
+  Y as useSubMenuSystem
+};

package/dist/hooks/useMounted.js

@@ -0,0 +1,9 @@
+"use client";
+import { useState as u, useEffect as s } from "react";
+function o() {
+  const [t, e] = u(!1);
+  return s(() => (e(!0), () => e(!1)), []), t;
+}
+export {
+  o as useMounted
+};

package/dist/hooks/useTableLayout/computeColumns.js

@@ -0,0 +1,59 @@
+function m(r, t) {
+  const n = r.id;
+  if (!n) return !0;
+  const i = r.meta?.visible ?? !0;
+  if (!(r.meta?.inVisibilityMenu ?? !0))
+    return i;
+  if (t) {
+    if (t.hiddenByUser?.includes(n))
+      return !1;
+    if (t.shownByUser?.includes(n))
+      return !0;
+  }
+  return i;
+}
+function l(r, t) {
+  let n = r.map((i) => ({
+    ...i,
+    meta: {
+      ...i.meta,
+      // Compute visibility based on system + user preferences
+      visible: m(i, t)
+    }
+  }));
+  if (t?.columnOrder?.length) {
+    const i = new Map(
+      t.columnOrder.map((e, s) => [e, s])
+    );
+    n = n.sort((e, s) => {
+      const u = i.get(e.id) ?? Number.MAX_SAFE_INTEGER, o = i.get(s.id) ?? Number.MAX_SAFE_INTEGER;
+      return u === Number.MAX_SAFE_INTEGER && o === Number.MAX_SAFE_INTEGER ? 0 : u - o;
+    });
+  }
+  return t?.columnWidths && (n = n.map((i) => {
+    const e = i.id ? t.columnWidths?.[i.id] : void 0;
+    return e !== void 0 ? {
+      ...i,
+      size: e
+    } : i;
+  })), n;
+}
+function f(r) {
+  return r.filter((t) => t.id).map((t) => t.id);
+}
+function c(r, t) {
+  const n = [], i = [];
+  return r.forEach((e) => {
+    if (!e.id) return;
+    const s = t.find((d) => d.id === e.id);
+    if (!s) return;
+    const u = s.meta?.visible ?? !0, o = e.meta?.visible ?? !0;
+    (s.meta?.inVisibilityMenu ?? !0) && (u && !o ? n.push(e.id) : !u && o && s.meta?.inVisibilityMenu !== !1 && i.push(e.id));
+  }), { hiddenByUser: n, shownByUser: i };
+}
+export {
+  l as applyPreferencesToColumns,
+  m as computeColumnVisibility,
+  f as extractColumnOrder,
+  c as extractVisibilityChanges
+};

package/dist/hooks/useTableLayout/storage.js

@@ -0,0 +1,64 @@
+import { LocalStoragePrefixVersion as g } from "../../utils/index.js";
+const r = `${g}-tablePrefs`, u = `${g}-tableLayout`, s = 2;
+function n(t) {
+  return `${r}__${t}`;
+}
+function i(t) {
+  return `${u}__${t}-tableLayout`;
+}
+function m(t) {
+  const e = n(t), o = i(t), a = localStorage.getItem(e);
+  if (a)
+    try {
+      const l = JSON.parse(a);
+      if (l.version === s)
+        return l;
+      localStorage.removeItem(e);
+    } catch {
+      localStorage.removeItem(e);
+    }
+  return localStorage.getItem(o) && localStorage.removeItem(o), null;
+}
+function y(t, e) {
+  const o = n(t);
+  if (!((e.columnOrder?.length ?? 0) > 0 || (e.hiddenByUser?.length ?? 0) > 0 || (e.shownByUser?.length ?? 0) > 0 || Object.keys(e.columnWidths ?? {}).length > 0)) {
+    localStorage.removeItem(o);
+    return;
+  }
+  const c = {
+    ...e,
+    version: s
+  };
+  localStorage.setItem(o, JSON.stringify(c));
+}
+function S(t) {
+  const e = n(t), o = i(t);
+  localStorage.removeItem(e), localStorage.removeItem(o);
+}
+function d() {
+  if (typeof window > "u") return;
+  const t = [];
+  for (let e = 0; e < localStorage.length; e++) {
+    const o = localStorage.key(e);
+    o?.includes("-tableLayout__") && o.endsWith("-tableLayout") && t.push(o);
+  }
+  t.forEach((e) => {
+    localStorage.removeItem(e);
+  });
+}
+function h() {
+  return typeof window > "u" ? !0 : localStorage.getItem(`${r}__migrated`) === "true";
+}
+function I() {
+  typeof window > "u" || localStorage.setItem(`${r}__migrated`, "true");
+}
+export {
+  d as clearAllLegacyData,
+  S as clearPreferences,
+  i as getLegacyStorageKey,
+  n as getStorageKey,
+  h as hasPerformedLegacyMigration,
+  m as loadPreferences,
+  I as markLegacyMigrationComplete,
+  y as savePreferences
+};