@dmsi/wedgekit-react 2.0.0 → 2.0.1

package/dist/components/DateInput.js

@@ -0,0 +1,193 @@
+import { jsxs as F, jsx as f, Fragment as j } from "react/jsx-runtime";
+import { useState as h, useRef as P, useEffect as R, useLayoutEffect as q } from "react";
+import { createPortal as X } from "react-dom";
+import { InputBase as G } from "./Input.js";
+import { CalendarRange as U } from "./CalendarRange.js";
+import { Icon as _ } from "./Icon.js";
+import { findDocumentRoot as H } from "../utils.js";
+import { isValidDate as g, calculateCursorPosition as J } from "../utils/date.js";
+import { formatDateWithDashes as Q, formatInputValueWithDashes as B, parseInputDateWithDashes as b } from "../utils/date-patch-dashes.js";
+import { marginTopUsingComponentGap as Z } from "../classNames.js";
+function me({
+  id: o,
+  testid: w,
+  value: S,
+  onChange: D,
+  placeholder: T = "MM/DD/YYYY",
+  disabled: Y,
+  readOnly: d = !1,
+  label: M,
+  isDateAvailable: $,
+  disableManualInput: z,
+  theme: K,
+  ...W
+}) {
+  const [v, s] = h(!1), [y, p] = h(""), [k, i] = h(!1), C = P(null), n = P(null), I = P(null), [E, A] = h({
+    top: 0,
+    left: 0,
+    width: 0
+  }), l = S;
+  R(() => {
+    k || p(L(l));
+  }, [l, k]), q(() => {
+    v && c();
+  }, [v]);
+  const c = () => {
+    if (I.current) {
+      const e = I.current.getBoundingClientRect();
+      A({
+        top: e.bottom + window.scrollY,
+        left: e.left + window.scrollX,
+        width: e.width
+      });
+    }
+  };
+  R(() => {
+    c();
+    const e = new ResizeObserver(c);
+    return n.current && e.observe(n.current), window.addEventListener("scroll", c), () => {
+      e.disconnect(), window.removeEventListener("scroll", c);
+    };
+  }, []), R(() => {
+    const e = (t) => {
+      t.key === "Escape" && C.current && (s(!1), n.current?.blur());
+    };
+    return document.addEventListener("keydown", e), () => {
+      document.removeEventListener("keydown", e);
+    };
+  });
+  function N(e) {
+    D(e), s(!1), i(!1);
+  }
+  const V = () => {
+    d || s(!0);
+  };
+  return /* @__PURE__ */ F("div", { className: "relative", children: [
+    /* @__PURE__ */ f(
+      G,
+      {
+        id: o,
+        testid: w,
+        ref: (e) => {
+          n.current = e;
+        },
+        ...W,
+        wrapperRef: I,
+        value: y,
+        placeholder: T,
+        disabled: Y,
+        readOnly: d,
+        after: /* @__PURE__ */ f(_, { name: "calendar_month" }),
+        onFocus: z ? (e) => {
+          e.preventDefault(), e.stopPropagation(), e.currentTarget.blur();
+        } : V,
+        onClick: () => {
+          V();
+        },
+        onChange: (e) => {
+          if (d) return;
+          const t = e.target.value, r = e.target.selectionStart || 0;
+          i(!0);
+          const a = B(t);
+          p(a), requestAnimationFrame(() => {
+            if (n.current) {
+              const m = J(
+                t,
+                a,
+                r
+              );
+              n.current.setSelectionRange(m, m);
+            }
+          });
+          const u = b(a);
+          u && g(u) && D(u);
+        },
+        onBlur: () => {
+          i(!1);
+          const e = b(y);
+          (!e || !g(e)) && p(L(l));
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Backspace") {
+            const t = e.target, r = t.selectionStart || 0, a = t.value;
+            if (r > 0 && a[r - 1] === "/") {
+              e.preventDefault();
+              const u = a.slice(0, r - 2) + a.slice(r), m = B(u);
+              p(m), requestAnimationFrame(() => {
+                if (n.current) {
+                  const x = Math.max(0, r - 2);
+                  n.current.setSelectionRange(x, x);
+                }
+              }), i(!0);
+              return;
+            }
+          }
+          if (e.key === "Enter") {
+            const t = b(y);
+            t && g(t) && (D(t), s(!1), i(!1));
+          }
+        },
+        label: M,
+        secondaryIconColor: !0
+      }
+    ),
+    v && !d && X(
+      /* @__PURE__ */ F(j, { children: [
+        /* @__PURE__ */ f(
+          "div",
+          {
+            className: "fixed inset-0 z-30",
+            onClick: () => s(!1),
+            onMouseDown: (e) => {
+              e.preventDefault();
+            },
+            onWheel: (e) => {
+              const t = document.scrollingElement ?? document.documentElement;
+              t.scrollTop += e.deltaY, t.scrollLeft += e.deltaX;
+            },
+            onTouchMove: (e) => {
+              e.stopPropagation();
+            },
+            style: { touchAction: "pan-y pan-x" },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ f(
+          "div",
+          {
+            ref: (e) => {
+              C.current = e;
+            },
+            className: `absolute z-50 ${Z}`,
+            "data-theme": K,
+            style: {
+              top: `${E.top}px`,
+              left: `${E.left}px`
+            },
+            children: /* @__PURE__ */ f(
+              U,
+              {
+                id: o ? `${o}-calendar` : void 0,
+                testid: w ? `${w}-calendar` : void 0,
+                from: l,
+                to: l,
+                onChange: N,
+                cardStyle: !0,
+                mode: "single",
+                disableRange: !0,
+                isDateAvailable: $
+              }
+            )
+          }
+        )
+      ] }),
+      H(C.current)
+    )
+  ] });
+}
+function L(o) {
+  return !o || !g(o) ? "" : Q(o);
+}
+export {
+  me as DateInput
+};

package/dist/components/DateRangeInput.js

@@ -0,0 +1,368 @@
+import { jsxs as ht, Fragment as Dt, jsx as B } from "react/jsx-runtime";
+import { useState as O, useRef as W, useEffect as K, useLayoutEffect as $t } from "react";
+import { createPortal as wt } from "react-dom";
+import { InputBase as gt } from "./Input.js";
+import { CalendarRange as yt } from "./CalendarRange.js";
+import { Icon as Pt } from "./Icon.js";
+import { findDocumentRoot as St } from "../utils.js";
+import { parseInputDate as d, isValidDate as g, formatDate as z, isValidDateRangeOrder as Vt, formatInputValue as H, calculateCursorPosition as Mt } from "../utils/date.js";
+import { marginTopUsingComponentGap as Ft } from "../classNames.js";
+import { useMatchesMobile as Yt } from "../hooks/useMatchesMedia.js";
+function jt({
+  id: o,
+  testid: i,
+  value: V,
+  onChange: r,
+  placeholder: p = "MM/DD/YYYY - MM/DD/YYYY",
+  disabled: Y,
+  readOnly: y = !1,
+  single: k = !1,
+  disableRange: a = !1,
+  label: E,
+  isDateAvailable: $,
+  onPendingFromChange: Q,
+  theme: Z,
+  ...tt
+}) {
+  const et = Yt(), [j, M] = O(!1), [v, u] = O(""), [X, h] = O(!1), A = W(null), N = W(null), l = W(null), [b, nt] = O({
+    top: 0,
+    left: 0,
+    width: 0
+  }), [q, L] = V.split("|");
+  K(() => {
+    if (!X) {
+      const t = J(q, L);
+      t && u(t);
+    }
+  }, [q, L, X, a]), $t(() => {
+    j && R();
+  }, [j]);
+  const R = () => {
+    if (N.current) {
+      const t = N.current.getBoundingClientRect();
+      nt({
+        top: t.bottom + window.scrollY,
+        left: t.left + window.scrollX,
+        width: t.width
+      });
+    }
+  };
+  K(() => {
+    R();
+    const t = new ResizeObserver(R);
+    return l.current && t.observe(l.current), window.addEventListener("scroll", R), () => {
+      t.disconnect(), window.removeEventListener("scroll", R);
+    };
+  }, []), K(() => {
+    const t = (e) => {
+      e.key === "Escape" && A.current && (M(!1), l.current?.blur());
+    };
+    return document.addEventListener("keydown", t), () => {
+      document.removeEventListener("keydown", t);
+    };
+  }, []), K(() => {
+    const t = (e) => {
+      A.current && !A.current.contains(e.target) && l.current && !l.current.contains(e.target) && M(!1);
+    };
+    return document.addEventListener("mousedown", t), () => {
+      document.removeEventListener("mousedown", t);
+    };
+  }, []);
+  function rt(t, e) {
+    r(a ? `${t}|${t}` : `${t}|${e}`), M(!1), h(!1);
+  }
+  const _ = () => {
+    y || M(!0);
+  }, st = () => {
+    _();
+  }, ot = (t) => {
+    if (y) return;
+    const e = t.target.value, s = t.target.selectionStart || 0;
+    if (ct(e)) {
+      it(e, s);
+      return;
+    }
+    h(!0);
+    const n = F(e), c = at(n, e) ? `${n} - ` : n;
+    u(c);
+    const f = lt(
+      e,
+      n,
+      c,
+      s
+    );
+    requestAnimationFrame(() => {
+      C(f);
+    }), ut(c);
+  }, ct = (t) => !a && t.includes("-") && !t.includes(" - "), it = (t, e) => {
+    const s = t.replace(/-/g, ""), n = F(s);
+    u(n), requestAnimationFrame(() => {
+      const c = Math.min(
+        e - 1,
+        n.length
+      );
+      C(c);
+    });
+  }, at = (t, e) => {
+    if (a || t.includes(" - ") || !t.match(/^(\d{2})\/(\d{2})\/(\d{4})$/) || e.length !== t.length)
+      return !1;
+    const n = e.length - 1;
+    return !F(e.slice(0, n)).match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+  }, lt = (t, e, s, n) => s !== e ? s.length : It(
+    t,
+    s,
+    n,
+    a
+  ), C = (t) => {
+    l.current && l.current.setSelectionRange(t, t);
+  }, ut = (t) => {
+    a ? ft(t) : dt(t);
+  }, ft = (t) => {
+    const e = d(t);
+    e && g(e) && r(`${e}|${e}`);
+  }, dt = (t) => {
+    if (t === "") {
+      r("");
+      return;
+    }
+    const e = t.match(/^(.+?)\s*-\s*(.+)$/);
+    e ? mt(e) : pt(t);
+  }, mt = (t) => {
+    const [, e, s] = t, n = d(e.trim()), c = d(s.trim());
+    n && c && T(n, c) && r(`${n}|${c}`);
+  }, pt = (t) => {
+    const e = d(t);
+    e && g(e) && r(`${e}|`);
+  };
+  return /* @__PURE__ */ ht(Dt, { children: [
+    /* @__PURE__ */ B(
+      gt,
+      {
+        id: o,
+        testid: i,
+        ref: (t) => {
+          l.current = t;
+        },
+        ...tt,
+        wrapperRef: N,
+        value: v,
+        placeholder: a ? "MM/DD/YYYY" : p,
+        disabled: Y,
+        readOnly: y,
+        after: /* @__PURE__ */ B(Pt, { name: "calendar_month" }),
+        onFocus: _,
+        onClick: st,
+        onChange: ot,
+        onBlur: () => {
+          if (h(!1), a) {
+            const t = d(v);
+            if (!t || !g(t)) {
+              const e = J(q, L);
+              u(e || "");
+            }
+          } else {
+            const t = v.match(/^(.+?)\s*-\s*(.+)$/);
+            if (t) {
+              const [, e, s] = t, n = d(e.trim()), c = d(s.trim());
+              (!n || !c || !T(n, c)) && (u(""), r(""));
+            } else if (v.includes(" - "))
+              u(""), r("");
+            else {
+              const e = d(v);
+              !e || g(e), u(""), r("");
+            }
+          }
+        },
+        onKeyDown: (t) => {
+          if (!a && t.key === "-") {
+            t.preventDefault();
+            return;
+          }
+          if (t.key === "Backspace") {
+            const e = t.target, s = e.selectionStart || 0, n = e.value;
+            if (s > 0 && n[s - 1] === "/") {
+              t.preventDefault();
+              const c = n.slice(0, s - 2) + n.slice(s), f = F(c);
+              u(f), requestAnimationFrame(() => {
+                if (l.current) {
+                  const I = Math.max(0, s - 2);
+                  l.current.setSelectionRange(I, I);
+                }
+              }), h(!0);
+              return;
+            }
+            if (!a && n.includes(" - ")) {
+              const c = n.indexOf(" - "), f = c, I = c + 3;
+              if (s >= f && s <= I) {
+                t.preventDefault();
+                const w = n.slice(0, f).trim(), P = w.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+                if (P) {
+                  const [, m, D, S] = P, G = S.slice(0, -1), U = `${m}/${D}/${G}`, x = F(U);
+                  u(x), r(""), requestAnimationFrame(() => {
+                    l.current && l.current.setSelectionRange(
+                      x.length,
+                      x.length
+                    );
+                  });
+                } else {
+                  const m = F(w);
+                  u(m);
+                  const D = d(w);
+                  D && g(D) ? r(`${D}|`) : r(""), requestAnimationFrame(() => {
+                    if (l.current) {
+                      const S = m.length;
+                      l.current.setSelectionRange(S, S);
+                    }
+                  });
+                }
+                h(!0);
+                return;
+              }
+              if (s === I) {
+                t.preventDefault();
+                const w = n.slice(0, f).trim(), P = `${w} - `;
+                u(P);
+                const m = d(w);
+                m && g(m) && r(`${m}|`), requestAnimationFrame(() => {
+                  l.current && l.current.setSelectionRange(
+                    P.length,
+                    P.length
+                  );
+                }), h(!0);
+                return;
+              }
+            }
+          }
+          if (t.key === "Delete") {
+            const e = t.target, s = e.selectionStart || 0, n = e.value;
+            if (!a && n.includes(" - ")) {
+              const c = n.indexOf(" - "), f = c, I = c + 3;
+              if (s >= f && s <= I) {
+                t.preventDefault();
+                const w = n.slice(0, f).trim(), P = w.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+                if (P) {
+                  const [, m, D, S] = P, G = S.slice(0, -1), U = `${m}/${D}/${G}`, x = F(U);
+                  u(x), r(""), requestAnimationFrame(() => {
+                    l.current && l.current.setSelectionRange(
+                      x.length,
+                      x.length
+                    );
+                  });
+                } else {
+                  const m = F(w);
+                  u(m);
+                  const D = d(w);
+                  D && g(D) ? r(`${D}|`) : r(""), requestAnimationFrame(() => {
+                    if (l.current) {
+                      const S = m.length;
+                      l.current.setSelectionRange(S, S);
+                    }
+                  });
+                }
+                h(!0);
+                return;
+              }
+            }
+          }
+          if (t.key === "Enter")
+            if (a) {
+              const e = d(v);
+              e && g(e) && (r(`${e}|${e}`), M(!1), h(!1));
+            } else {
+              const e = v.match(/^(.+?)\s*-\s*(.+)$/);
+              if (e) {
+                const [, s, n] = e, c = d(s.trim()), f = d(n.trim());
+                c && f && T(c, f) ? (r(`${c}|${f}`), M(!1), h(!1)) : (u(""), r(""), M(!1), h(!1));
+              } else
+                u(""), r(""), M(!1), h(!1);
+            }
+        },
+        label: E,
+        secondaryIconColor: !0
+      }
+    ),
+    j && !y && wt(
+      /* @__PURE__ */ B(
+        "div",
+        {
+          ref: (t) => {
+            A.current = t;
+          },
+          className: `absolute z-40 ${Ft}`,
+          "data-theme": Z,
+          style: {
+            top: `${b.top}px`,
+            left: `${b.left}px`,
+            minWidth: `${b.width}px`
+          },
+          children: /* @__PURE__ */ B(
+            yt,
+            {
+              id: o ? `${o}-calendar` : void 0,
+              testid: i ? `${i}-calendar` : void 0,
+              from: q,
+              to: L,
+              onChange: rt,
+              cardStyle: !0,
+              mode: k || et ? "single" : "double",
+              disableRange: a,
+              isDateAvailable: $,
+              onPendingFromChange: Q
+            }
+          )
+        }
+      ),
+      St(A.current)
+    )
+  ] });
+  function F(t) {
+    return vt(t, a);
+  }
+  function J(t, e) {
+    return xt(t, e, a);
+  }
+}
+function T(o, i) {
+  return Vt(o, i);
+}
+function vt(o, i) {
+  if (i)
+    return H(o);
+  if (o.includes(" - ")) {
+    const [r, p] = o.split(" - "), Y = H(r), y = H(p || "");
+    return `${Y} - ${y}`;
+  }
+  const V = o.replace(/-/g, "");
+  return H(V);
+}
+function It(o, i, V, r) {
+  if (!r && i.includes(" - ")) {
+    const p = i.indexOf(" - "), Y = o.indexOf("-");
+    if (Y !== -1 && V > Y) {
+      const y = o.slice(Y + 1).replace(/\D/g, "").length, k = i.slice(p + 3);
+      let a = p + 3, E = 0;
+      for (let $ = 0; $ < k.length; $++) {
+        if (/\d/.test(k[$]) && (E++, E >= y)) {
+          $ + 1 < k.length && k[$ + 1] === "/" ? a = p + 3 + $ + 2 : a = p + 3 + $ + 1;
+          break;
+        }
+        E < y && (a = p + 3 + $ + 1);
+      }
+      return Math.min(a, i.length);
+    }
+  }
+  return Mt(
+    o,
+    i,
+    V
+  );
+}
+function xt(o, i, V) {
+  if (!o && !i)
+    return "";
+  const r = o ? g(o) : !1, p = i ? g(i) : !1;
+  return V ? r && o ? z(o) : "" : r && p && o && i && T(o, i) ? `${z(o)} - ${z(i)}` : r && !i && o ? `${z(o)} - ` : "";
+}
+export {
+  jt as DateRangeInput
+};

package/dist/components/DebugJson.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { useState as d } from "react";
+function p({ data: o, id: e }) {
+  const [r, t] = d(!1);
+  return process.env.NODE_ENV !== "development" ? null : /* @__PURE__ */ l(
+    "div",
+    {
+      id: e,
+      className: "p-2 rounded bg-neutral-100  border border-red-500 my-4",
+      children: [
+        /* @__PURE__ */ n(
+          "button",
+          {
+            id: e ? `${e}-toggle-button` : void 0,
+            onClick: () => t((s) => !s),
+            className: "px-4 py-2 border rounded bg-white",
+            children: r ? "Hide JSON" : "Show JSON"
+          }
+        ),
+        r && /* @__PURE__ */ n("pre", { className: "mt-4", children: JSON.stringify(o, null, 4) })
+      ]
+    }
+  );
+}
+export {
+  p as DebugJson
+};

package/dist/components/Display.js

@@ -0,0 +1,46 @@
+import { jsx as r } from "react/jsx-runtime";
+import { clsx as y } from "../node_modules/clsx/dist/clsx.js";
+import { typography as c } from "../classNames.js";
+function a({
+  className: t,
+  children: o,
+  as: s,
+  color: l,
+  align: e,
+  variant: i = "display1",
+  id: m,
+  testid: p,
+  ...n
+}) {
+  return /* @__PURE__ */ r(
+    s ?? (i === "display1" ? "h1" : "h2"),
+    {
+      id: m,
+      "data-testid": p,
+      className: y(
+        c[i],
+        t,
+        e === "left" && "text-left",
+        e === "center" && "text-center",
+        e === "right" && "text-right"
+      ),
+      style: {
+        ...n.style,
+        color: l ? `var(--color-${l})` : void 0
+      },
+      ...n,
+      children: o
+    }
+  );
+}
+function E(t) {
+  return /* @__PURE__ */ r(a, { ...t, variant: "display1" });
+}
+function v(t) {
+  return /* @__PURE__ */ r(a, { ...t, variant: "display2" });
+}
+export {
+  a as Display,
+  E as Display1,
+  v as Display2
+};

package/dist/components/EditingContext.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { createContext as m, useState as g, useContext as b } from "react";
+const s = m(null), p = ({
+  data: e,
+  children: a
+}) => {
+  const [u, r] = g(e), c = {
+    data: u,
+    setData: (t, i, o) => {
+      r((d) => {
+        const n = [...d], x = typeof n[t]?.[i] == "number" && !isNaN(Number(o)) ? Number(o) : o;
+        return n[t] = {
+          ...n[t],
+          [i]: x
+        }, n;
+      });
+    },
+    setBulkData: (t) => {
+      r(t);
+    }
+  };
+  return /* @__PURE__ */ l(s.Provider, { value: c, children: a });
+}, D = () => {
+  const e = b(s);
+  if (!e)
+    throw new Error("useTableEditingContext must be used within EditingProvider");
+  return e;
+};
+export {
+  s as EditingContext,
+  p as EditingProvider,
+  D as useTableEditingContext
+};