@dmsi/wedgekit-react 3.1.0 → 3.2.0

package/dist/components/DateRangeInput.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dmsi/wedgekit-react",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",