@dmsi/wedgekit-react 3.1.0 → 3.2.0

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"}