@dmsi/wedgekit-react 3.1.1 → 3.2.0

package/dist/components/CalendarIconButton.d.ts

@@ -0,0 +1,10 @@
+type CalendarIconButtonProps = {
+    id?: string;
+    testid?: string;
+    disabled?: boolean;
+    expanded: boolean;
+    onToggle: () => void;
+};
+export declare const CalendarIconButton: import('react').ForwardRefExoticComponent<CalendarIconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=CalendarIconButton.d.ts.map

package/dist/components/CalendarIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarIconButton.d.ts","sourceRoot":"","sources":["../../src/components/CalendarIconButton.tsx"],"names":[],"mappings":"AAIA,KAAK,uBAAuB,GAAG;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAGF,eAAO,MAAM,kBAAkB,uHA2B7B,CAAC"}

package/dist/components/CalendarIconButton.js

@@ -0,0 +1,29 @@
+import { jsx as r } from "react/jsx-runtime";
+import { clsx as c } from "../node_modules/clsx/dist/clsx.js";
+import { forwardRef as s } from "react";
+import { Icon as l } from "./Icon.js";
+const x = s(function({ id: e, testid: t, disabled: n, expanded: o, onToggle: a }, i) {
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      ref: i,
+      id: e,
+      "data-testid": t,
+      type: "button",
+      "aria-label": "Open calendar",
+      "aria-haspopup": "dialog",
+      "aria-expanded": o,
+      disabled: n,
+      onClick: a,
+      className: c(
+        "inline-flex shrink-0 items-center justify-center rounded bg-transparent p-0 text-text-secondary-normal",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-400",
+        n ? "cursor-default" : "cursor-pointer"
+      ),
+      children: /* @__PURE__ */ r(l, { name: "calendar_month", "aria-hidden": "true" })
+    }
+  );
+});
+export {
+  x as CalendarIconButton
+};

package/dist/components/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/components/DateInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAa,MAAM,SAAS,CAAC;AAcpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,KAAK,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,GAAG;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,SAAS,KAAK,OAAO,CAAC;IACzD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,MAAM,EACN,KAAK,EACL,QAAQ,EACR,WAA0B,EAC1B,QAAQ,EACR,QAAgB,EAChB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,2CAwThB"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/components/DateInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAa,MAAM,SAAS,CAAC;AAcpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,KAAK,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,GAAG;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,SAAS,KAAK,OAAO,CAAC;IACzD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,MAAM,EACN,KAAK,EACL,QAAQ,EACR,WAA0B,EAC1B,QAAQ,EACR,QAAgB,EAChB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,2CAqUhB"}

package/dist/components/DateInput.js

@@ -1,227 +1,238 @@
 "use client";
-import { jsxs as $, jsx as l, Fragment as _ } from "react/jsx-runtime";
-import { useState as D, useRef as k, useEffect as I, useLayoutEffect as J } from "react";
-import { createPortal as Q } from "react-dom";
-import { clsx as Z } from "../node_modules/clsx/dist/clsx.js";
-import { InputBase as O } from "./Input.js";
-import { CalendarRange as T } from "./CalendarRange.js";
-import { Icon as ee } from "./Icon.js";
-import { findDocumentRoot as te } from "../utils.js";
-import { useMatchesMobile as ne } from "../hooks/useMatchesMedia.js";
-import { isValidDate as b, calculateCursorPosition as oe } from "../utils/date.js";
-import { formatDateWithDashes as re, formatInputValueWithDashes as A, parseInputDateWithDashes as E } from "../utils/date-patch-dashes.js";
-import { marginTopUsingComponentGap as ae } from "../classNames.js";
-function xe({
-  id: r,
-  testid: d,
-  value: z,
-  onChange: y,
-  placeholder: K = "MM/DD/YYYY",
-  disabled: j,
-  readOnly: h = !1,
-  label: H,
-  isDateAvailable: V,
+import { jsxs as F, jsx as l, Fragment as te } from "react/jsx-runtime";
+import { useState as D, useRef as k, useEffect as E, useLayoutEffect as oe } from "react";
+import { createPortal as ne } from "react-dom";
+import { clsx as re } from "../node_modules/clsx/dist/clsx.js";
+import { InputBase as ae } from "./Input.js";
+import { CalendarRange as A } from "./CalendarRange.js";
+import { CalendarIconButton as se } from "./CalendarIconButton.js";
+import { findDocumentRoot as ie } from "../utils.js";
+import { useMatchesMobile as le } from "../hooks/useMatchesMedia.js";
+import { isValidDate as y, calculateCursorPosition as ce } from "../utils/date.js";
+import { formatDateWithDashes as ue, formatInputValueWithDashes as N, parseInputDateWithDashes as I } from "../utils/date-patch-dashes.js";
+import { marginTopUsingComponentGap as fe } from "../classNames.js";
+function Pe({
+  id: o,
+  testid: c,
+  value: j,
+  onChange: C,
+  placeholder: H = "MM/DD/YYYY",
+  disabled: V,
+  readOnly: d = !1,
+  label: K,
+  isDateAvailable: M,
   disableManualInput: q,
-  theme: M,
+  theme: $,
   ...X
 }) {
-  const [C, f] = D(!1), [x, g] = D(""), [B, p] = D(!1), w = k(null), s = k(null), P = k(null), c = ne(), [F, G] = D({
+  const [g, p] = D(!1), [x, w] = D(""), [T, m] = D(!1), v = k(null), s = k(null), P = k(null), u = le(), [B, G] = D({
     top: 0,
     left: 0,
     width: 0,
     openAbove: !1
-  }), u = z;
-  I(() => {
-    B || g(N(u));
-  }, [u, B]), J(() => {
-    C && m();
-  }, [C]);
-  const m = () => {
+  }), f = j;
+  E(() => {
+    T || w(z(f));
+  }, [f, T]), oe(() => {
+    g && h();
+  }, [g]);
+  const h = () => {
     if (P.current) {
       const e = P.current.getBoundingClientRect(), t = window.innerWidth, a = window.innerHeight, n = 340, i = 400;
-      let o = e.left;
-      o + n > t && (o = e.right - n, o < 0 && (o = Math.max(0, (t - n) / 2)));
-      const v = o + window.scrollX, W = a - e.bottom, U = e.top, Y = W < i && U > W;
+      let r = e.left;
+      r + n > t && (r = e.right - n, r < 0 && (r = Math.max(0, (t - n) / 2)));
+      const b = r + window.scrollX, W = a - e.bottom, ee = e.top, Y = W < i && ee > W;
       let R;
-      Y ? R = e.top + window.scrollY - i - 4 : R = e.bottom + window.scrollY + 4, G({ top: R, left: v, width: e.width, openAbove: Y });
+      Y ? R = e.top + window.scrollY - i - 4 : R = e.bottom + window.scrollY + 4, G({ top: R, left: b, width: e.width, openAbove: Y });
     }
   };
-  I(() => {
-    m();
-    const e = new ResizeObserver(m);
-    return s.current && e.observe(s.current), window.addEventListener("scroll", m), () => {
-      e.disconnect(), window.removeEventListener("scroll", m);
+  E(() => {
+    h();
+    const e = new ResizeObserver(h);
+    return s.current && e.observe(s.current), window.addEventListener("scroll", h), () => {
+      e.disconnect(), window.removeEventListener("scroll", h);
     };
-  }, []), I(() => {
+  }, []), E(() => {
     const e = (t) => {
-      t.key === "Escape" && w.current && (f(!1), s.current?.blur());
+      t.key === "Escape" && v.current && (p(!1), s.current?.blur());
     };
     return document.addEventListener("keydown", e), () => {
       document.removeEventListener("keydown", e);
     };
   });
   function L(e) {
-    y(e), f(!1), p(!1);
+    C(e), p(!1), m(!1);
   }
   const S = () => {
-    h || f(!0);
+    d || p(!0);
+  }, U = () => {
+    S();
+  }, J = () => {
+    d || p((e) => !e);
+  }, Q = (e) => {
+    e.preventDefault(), e.stopPropagation(), e.currentTarget.blur();
+  }, Z = (e) => {
+    if (d) return;
+    const t = e.target.value, a = e.target.selectionStart || 0;
+    m(!0);
+    const n = N(t);
+    w(n), requestAnimationFrame(() => {
+      if (s.current) {
+        const r = ce(
+          t,
+          n,
+          a
+        );
+        s.current.setSelectionRange(r, r);
+      }
+    });
+    const i = I(n);
+    i && y(i) && C(i);
+  }, _ = () => {
+    m(!1);
+    const e = I(x);
+    (!e || !y(e)) && w(z(f));
+  }, O = (e) => {
+    if (e.key === "Backspace") {
+      const t = e.target, a = t.selectionStart || 0, n = t.value;
+      if (a > 0 && n[a - 1] === "/") {
+        e.preventDefault();
+        const i = n.slice(0, a - 2) + n.slice(a), r = N(i);
+        w(r), requestAnimationFrame(() => {
+          if (s.current) {
+            const b = Math.max(0, a - 2);
+            s.current.setSelectionRange(b, b);
+          }
+        }), m(!0);
+        return;
+      }
+    }
+    if (e.key === "Enter") {
+      const t = I(x);
+      t && y(t) && (C(t), p(!1), m(!1));
+    }
   };
-  return /* @__PURE__ */ $("div", { className: "relative", children: [
+  return /* @__PURE__ */ F("div", { className: "relative", children: [
     /* @__PURE__ */ l(
-      O,
+      ae,
       {
-        id: r,
-        testid: d,
+        id: o,
+        testid: c,
         ref: (e) => {
           s.current = e;
         },
         ...X,
         wrapperRef: P,
         value: x,
-        placeholder: K,
-        disabled: j,
-        readOnly: h,
-        after: /* @__PURE__ */ l(ee, { name: "calendar_month" }),
-        onFocus: q ? (e) => {
-          e.preventDefault(), e.stopPropagation(), e.currentTarget.blur();
-        } : S,
-        onClick: () => {
-          S();
-        },
-        onChange: (e) => {
-          if (h) return;
-          const t = e.target.value, a = e.target.selectionStart || 0;
-          p(!0);
-          const n = A(t);
-          g(n), requestAnimationFrame(() => {
-            if (s.current) {
-              const o = oe(
-                t,
-                n,
-                a
-              );
-              s.current.setSelectionRange(o, o);
-            }
-          });
-          const i = E(n);
-          i && b(i) && y(i);
-        },
-        onBlur: () => {
-          p(!1);
-          const e = E(x);
-          (!e || !b(e)) && g(N(u));
-        },
-        onKeyDown: (e) => {
-          if (e.key === "Backspace") {
-            const t = e.target, a = t.selectionStart || 0, n = t.value;
-            if (a > 0 && n[a - 1] === "/") {
-              e.preventDefault();
-              const i = n.slice(0, a - 2) + n.slice(a), o = A(i);
-              g(o), requestAnimationFrame(() => {
-                if (s.current) {
-                  const v = Math.max(0, a - 2);
-                  s.current.setSelectionRange(v, v);
-                }
-              }), p(!0);
-              return;
-            }
-          }
-          if (e.key === "Enter") {
-            const t = E(x);
-            t && b(t) && (y(t), f(!1), p(!1));
+        placeholder: H,
+        disabled: V,
+        readOnly: d,
+        after: /* @__PURE__ */ l(
+          se,
+          {
+            id: o ? `${o}-calendar-button` : void 0,
+            testid: c ? `${c}-calendar-button` : void 0,
+            disabled: V || d,
+            expanded: g,
+            onToggle: J
           }
-        },
-        label: H,
+        ),
+        onFocus: q ? Q : S,
+        onClick: U,
+        onChange: Z,
+        onBlur: _,
+        onKeyDown: O,
+        label: K,
         secondaryIconColor: !0
       }
     ),
-    C && !h && Q(
-      /* @__PURE__ */ $(_, { children: [
+    g && !d && ne(
+      /* @__PURE__ */ F(te, { children: [
         /* @__PURE__ */ l(
           "div",
           {
-            className: Z(
+            className: re(
               "fixed inset-0 z-30",
-              c && "overflow-y-auto bg-neutral-600/50"
+              u && "overflow-y-auto bg-neutral-600/50"
             ),
-            "data-theme": M,
-            onClick: () => f(!1),
+            "data-theme": $,
+            onClick: () => p(!1),
             onMouseDown: (e) => {
-              c || e.preventDefault();
+              u || e.preventDefault();
             },
             onWheel: (e) => {
-              if (!c) {
+              if (!u) {
                 const t = document.scrollingElement ?? document.documentElement;
                 t.scrollTop += e.deltaY, t.scrollLeft += e.deltaX;
               }
             },
             onTouchMove: (e) => {
-              c || e.stopPropagation();
+              u || e.stopPropagation();
             },
-            style: { touchAction: c ? "auto" : "pan-y pan-x" },
+            style: { touchAction: u ? "auto" : "pan-y pan-x" },
             "aria-hidden": "true",
-            children: c && /* @__PURE__ */ l("div", { className: "min-h-full flex items-start justify-center py-4 px-2", children: /* @__PURE__ */ l(
+            children: u && /* @__PURE__ */ l("div", { className: "min-h-full flex items-start justify-center py-4 px-2", children: /* @__PURE__ */ l(
               "div",
               {
                 ref: (e) => {
-                  w.current = e;
+                  v.current = e;
                 },
                 className: "bg-background-primary-normal rounded-base shadow-4 max-w-full",
                 onClick: (e) => e.stopPropagation(),
                 children: /* @__PURE__ */ l(
-                  T,
+                  A,
                   {
-                    id: r ? `${r}-calendar` : void 0,
-                    testid: d ? `${d}-calendar` : void 0,
-                    from: u,
-                    to: u,
+                    id: o ? `${o}-calendar` : void 0,
+                    testid: c ? `${c}-calendar` : void 0,
+                    from: f,
+                    to: f,
                     onChange: L,
                     cardStyle: !0,
                     mode: "single",
                     disableRange: !0,
-                    isDateAvailable: V
+                    isDateAvailable: M
                   }
                 )
               }
             ) })
           }
         ),
-        !c && /* @__PURE__ */ l(
+        !u && /* @__PURE__ */ l(
           "div",
           {
             ref: (e) => {
-              w.current = e;
+              v.current = e;
             },
-            className: `absolute z-50 ${ae}`,
-            "data-theme": M,
+            className: `absolute z-50 ${fe}`,
+            "data-theme": $,
             style: {
-              top: `${F.top}px`,
-              left: `${F.left}px`
+              top: `${B.top}px`,
+              left: `${B.left}px`
             },
             children: /* @__PURE__ */ l(
-              T,
+              A,
               {
-                id: r ? `${r}-calendar` : void 0,
-                testid: d ? `${d}-calendar` : void 0,
-                from: u,
-                to: u,
+                id: o ? `${o}-calendar` : void 0,
+                testid: c ? `${c}-calendar` : void 0,
+                from: f,
+                to: f,
                 onChange: L,
                 cardStyle: !0,
                 mode: "single",
                 disableRange: !0,
-                isDateAvailable: V
+                isDateAvailable: M
               }
             )
           }
         )
       ] }),
-      te(w.current)
+      ie(v.current)
     )
   ] });
 }
-function N(r) {
-  return !r || !b(r) ? "" : re(r);
+function z(o) {
+  return !o || !y(o) ? "" : ue(o);
 }
 export {
-  xe as DateInput
+  Pe as DateInput
 };

package/dist/components/DateRangeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/components/DateRangeInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAa,MAAM,SAAS,CAAC;AACpD,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAcpE,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,GAAG;IACtD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,kBAAkB,EAAE,iBAAiB,GAAG,qBAAqB,CAAC,CAAC;AAExE,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,MAAM,EACN,KAAK,EACL,QAAQ,EACR,WAAuC,EACvC,QAAQ,EACR,QAAgB,EAChB,MAAc,EACd,YAAoB,EACpB,KAAK,EACL,eAAe,EACf,mBAAmB,EACnB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,2CA4kBrB"}
+{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/components/DateRangeInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAa,MAAM,SAAS,CAAC;AACpD,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAcpE,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,GAAG;IACtD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,kBAAkB,EAAE,iBAAiB,GAAG,qBAAqB,CAAC,CAAC;AAExE,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,MAAM,EACN,KAAK,EACL,QAAQ,EACR,WAAuC,EACvC,QAAQ,EACR,QAAgB,EAChB,MAAc,EACd,YAAoB,EACpB,KAAK,EACL,eAAe,EACf,mBAAmB,EACnB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,2CA4lBrB"}

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.1",
+  "version": "3.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",