@jirawatpyk/aura-react 4.5.0 → 4.6.0

package/dist/esm/DatePicker.js

@@ -6,9 +6,8 @@ import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, trapTab, u
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { Field } from "./forms.js";
-const h = React.createElement;
-var ERA = /^พ\.ศ\.\s?|\s?(BE|พ\.ศ\.)$/g;
-var pad = function(n) {
+const ERA = /^พ\.ศ\.\s?|\s?(BE|พ\.ศ\.)$/g;
+const pad = function(n) {
   return (n < 10 ? "0" : "") + n;
 };
 function toISO(d) {
@@ -16,15 +15,15 @@ function toISO(d) {
 }
 function fromISO(s) {
   if (!s) return null;
-  var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
   return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null;
 }
 function addDays(d, n) {
   return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
 }
 function addMonths(d, n) {
-  var t = new Date(d.getFullYear(), d.getMonth() + n, 1);
-  var last = new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate();
+  const t = new Date(d.getFullYear(), d.getMonth() + n, 1);
+  const last = new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate();
   return new Date(t.getFullYear(), t.getMonth(), Math.min(d.getDate(), last));
 }
 function same(a, b) {
@@ -33,39 +32,43 @@ function same(a, b) {
 function localeTag(locale, calendar) {
   return (locale === "en" ? "en-GB" : "th-TH") + "-u-ca-" + (calendar === "gregory" ? "gregory" : "buddhist");
 }
-var fmtCache = {};
-var PRESETS = { short: { day: "numeric", month: "short", year: "numeric" }, long: { day: "numeric", month: "long", year: "numeric" }, numeric: { day: "2-digit", month: "2-digit", year: "numeric" } };
+const fmtCache = {};
+const PRESETS = {
+  short: { day: "numeric", month: "short", year: "numeric" },
+  long: { day: "numeric", month: "long", year: "numeric" },
+  numeric: { day: "2-digit", month: "2-digit", year: "numeric" }
+};
 function fmt(tag, opts, d) {
-  var k = tag + JSON.stringify(opts);
+  const k = tag + JSON.stringify(opts);
   if (!fmtCache[k]) fmtCache[k] = new Intl.DateTimeFormat(tag, opts);
   return fmtCache[k].format(d);
 }
 function formatDate(iso, opts) {
-  var o = opts || {}, d = fromISO(iso);
+  const o = opts || {}, d = fromISO(iso);
   if (!d) return "";
-  var f = typeof o.format === "object" ? o.format : PRESETS[o.format || "short"];
+  const f = typeof o.format === "object" ? o.format : PRESETS[o.format || "short"];
   return fmt(localeTag(o.locale, o.calendar), f, d).replace(ERA, "");
 }
-var MONTHS = null;
+let MONTHS = null;
 function monthIndex(word) {
   if (!MONTHS) {
     MONTHS = {};
     ["th-TH", "en-GB"].forEach(function(tag) {
       ["short", "long"].forEach(function(w) {
-        for (var i = 0; i < 12; i++) {
-          var n = new Intl.DateTimeFormat(tag, { month: w }).format(new Date(2020, i, 1)).toLowerCase().replace(/\.$/, "");
+        for (let i = 0; i < 12; i++) {
+          const n = new Intl.DateTimeFormat(tag, { month: w }).format(new Date(2020, i, 1)).toLowerCase().replace(/\.$/, "");
           MONTHS[n] = i;
           if (/^[a-z]/.test(n)) MONTHS[n.slice(0, 3)] = i;
         }
       });
     });
   }
-  var k = word.toLowerCase().replace(/\.$/, "");
+  const k = word.toLowerCase().replace(/\.$/, "");
   return MONTHS[k] != null ? MONTHS[k] : -1;
 }
 function parseDate(text) {
-  var s = String(text || "").trim();
-  var m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(s), y, mo, d;
+  const s = String(text || "").trim();
+  let m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(s), y, mo, d;
   if (m) {
     y = +m[1];
     mo = +m[2];
@@ -80,50 +83,50 @@ function parseDate(text) {
     y = +m[3];
   } else return null;
   if (y >= 2400) y -= 543;
-  var dt = new Date(y, mo - 1, d);
+  const dt = new Date(y, mo - 1, d);
   return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
 }
 const Calendar = React.forwardRef(function Calendar2(props, ref) {
-  var ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || "buddhist", tag = localeTag(locale, calendar);
-  var weekStart = props.weekStartsOn == null ? 0 : props.weekStartsOn;
-  var today = /* @__PURE__ */ new Date();
+  const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || "buddhist", tag = localeTag(locale, calendar);
+  const weekStart = props.weekStartsOn == null ? 0 : props.weekStartsOn;
+  let today = /* @__PURE__ */ new Date();
   today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-  var min = fromISO(props.min), max = fromISO(props.max);
-  var start = fromISO(props.start), end = fromISO(props.end);
-  var focusState = React.useState(fromISO(props.focus) || start || today);
-  var focusDate = focusState[0], setFocus = focusState[1];
-  var viewState = React.useState("days"), view = viewState[0], setView = viewState[1];
-  var hoverState = React.useState(null);
-  var gridRef = React.useRef(null), gridMerged = useMergedRef(ref, gridRef), moved = React.useRef(false);
-  var th = locale !== "en";
+  const min = fromISO(props.min), max = fromISO(props.max);
+  const start = fromISO(props.start), end = fromISO(props.end);
+  const focusState = React.useState(fromISO(props.focus) || start || today);
+  const focusDate = focusState[0], setFocus = focusState[1];
+  const viewState = React.useState("days"), view = viewState[0], setView = viewState[1];
+  const hoverState = React.useState(null);
+  const gridRef = React.useRef(null), gridMerged = useMergedRef(ref, gridRef), moved = React.useRef(false);
+  const th = locale !== "en";
   function disabled(d) {
     return !!(min && d < min || max && d > max || props.isDateDisabled && props.isDateDisabled(toISO(d)));
   }
   React.useEffect(function() {
     if (!moved.current) return;
     moved.current = false;
-    var el = gridRef.current && gridRef.current.querySelector('[data-date="' + toISO(focusDate) + '"]');
+    const el = gridRef.current && gridRef.current.querySelector('[data-date="' + toISO(focusDate) + '"]');
     if (el) el.focus();
   });
   React.useEffect(function() {
     if (props.autoFocus === false) return;
-    var el = gridRef.current && gridRef.current.querySelector('[tabindex="0"]');
+    const el = gridRef.current && gridRef.current.querySelector('[tabindex="0"]');
     if (el) el.focus();
   }, []);
   function move(d) {
     moved.current = true;
     setFocus(d);
   }
-  var first = new Date(focusDate.getFullYear(), focusDate.getMonth(), 1);
-  var lead = (first.getDay() - weekStart + 7) % 7;
-  var gridStart = addDays(first, -lead);
-  var days = [];
-  for (var i = 0; i < 42; i++) days.push(addDays(gridStart, i));
-  var weeks = [];
-  for (var w = 0; w < 6; w++) weeks.push(days.slice(w * 7, w * 7 + 7));
+  const first = new Date(focusDate.getFullYear(), focusDate.getMonth(), 1);
+  const lead = (first.getDay() - weekStart + 7) % 7;
+  const gridStart = addDays(first, -lead);
+  const days = [];
+  for (let i = 0; i < 42; i++) days.push(addDays(gridStart, i));
+  const weeks = [];
+  for (let w = 0; w < 6; w++) weeks.push(days.slice(w * 7, w * 7 + 7));
   if (weeks[5][0].getMonth() !== focusDate.getMonth()) weeks.pop();
   function onKey(e, d) {
-    var k = e.key, n = null;
+    let k = e.key, n = null;
     if (k === "ArrowLeft") n = addDays(d, -1);
     else if (k === "ArrowRight") n = addDays(d, 1);
     else if (k === "ArrowUp") n = addDays(d, -7);
@@ -142,104 +145,127 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
       move(n);
     }
   }
-  var hover = hoverState[0];
-  var rangeEnd = end || (props.range && start && hover ? hover : null);
+  const hover = hoverState[0];
+  const rangeEnd = end || (props.range && start && hover ? hover : null);
   function inRange(d) {
     if (!props.range || !start || !rangeEnd) return false;
-    var a = start < rangeEnd ? start : rangeEnd, b = start < rangeEnd ? rangeEnd : start;
+    const a = start < rangeEnd ? start : rangeEnd, b = start < rangeEnd ? rangeEnd : start;
     return d > a && d < b;
   }
-  var monthTitle = fmt(tag, { month: "long", year: "numeric" }, focusDate).replace(ERA, "");
-  var weekdayNames = weeks[0].map(function(d) {
+  const monthTitle = fmt(tag, { month: "long", year: "numeric" }, focusDate).replace(ERA, "");
+  const weekdayNames = weeks[0].map(function(d) {
     return { short: fmt(tag, { weekday: th ? "narrow" : "short" }, d), long: fmt(tag, { weekday: "long" }, d) };
   });
   if (view === "years") {
-    var yr = focusDate.getFullYear(), base = yr - yr % 12;
-    var years = [];
-    for (var y = base; y < base + 12; y++) years.push(y);
-    return h(
-      "div",
-      { className: "aura-cal", ref: gridMerged },
-      h(
-        "div",
-        { className: "aura-cal__head" },
-        h(IconButton, { icon: "chevron-left", label: th ? "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32" : "Previous years", onClick: function() {
+    const yr = focusDate.getFullYear(), base = yr - yr % 12;
+    const years = [];
+    for (let y = base; y < base + 12; y++) years.push(y);
+    return /* @__PURE__ */ React.createElement("div", { className: "aura-cal", ref: gridMerged }, /* @__PURE__ */ React.createElement("div", { className: "aura-cal__head" }, /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        icon: "chevron-left",
+        label: th ? "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32" : "Previous years",
+        onClick: function() {
           setFocus(new Date(yr - 12, focusDate.getMonth(), 1));
-        } }),
-        h(
-          "button",
-          { type: "button", className: "aura-cal__title", onClick: function() {
-            setView("days");
-          } },
-          fmt(tag, { year: "numeric" }, new Date(base, 0, 1)).replace(ERA, "") + " \u2013 " + fmt(tag, { year: "numeric" }, new Date(base + 11, 0, 1)).replace(ERA, "")
-        ),
-        h(IconButton, { icon: "chevron-right", label: th ? "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E16\u0E31\u0E14\u0E44\u0E1B" : "Next years", onClick: function() {
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "aura-cal__title",
+        onClick: function() {
+          setView("days");
+        }
+      },
+      fmt(tag, { year: "numeric" }, new Date(base, 0, 1)).replace(ERA, "") + " \u2013 " + fmt(tag, { year: "numeric" }, new Date(base + 11, 0, 1)).replace(ERA, "")
+    ), /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        icon: "chevron-right",
+        label: th ? "\u0E0A\u0E48\u0E27\u0E07\u0E1B\u0E35\u0E16\u0E31\u0E14\u0E44\u0E1B" : "Next years",
+        onClick: function() {
           setFocus(new Date(yr + 12, focusDate.getMonth(), 1));
-        } })
-      ),
-      h("div", { className: "aura-cal__years" }, years.map(function(y2) {
-        var d = new Date(y2, focusDate.getMonth(), 1);
-        return h(
-          "button",
-          {
-            key: y2,
-            type: "button",
-            tabIndex: y2 === yr ? 0 : -1,
-            className: cx("aura-cal__year", y2 === yr && "is-selected"),
-            onClick: function() {
-              setFocus(new Date(y2, focusDate.getMonth(), Math.min(focusDate.getDate(), 28)));
-              setView("days");
-              moved.current = true;
-            }
-          },
-          fmt(tag, { year: "numeric" }, d).replace(ERA, "")
-        );
-      }))
-    );
+        }
+      }
+    )), /* @__PURE__ */ React.createElement("div", { className: "aura-cal__years" }, years.map(function(y) {
+      const d = new Date(y, focusDate.getMonth(), 1);
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: y,
+          type: "button",
+          tabIndex: y === yr ? 0 : -1,
+          className: cx("aura-cal__year", y === yr && "is-selected"),
+          onClick: function() {
+            setFocus(new Date(y, focusDate.getMonth(), Math.min(focusDate.getDate(), 28)));
+            setView("days");
+            moved.current = true;
+          }
+        },
+        fmt(tag, { year: "numeric" }, d).replace(ERA, "")
+      );
+    })));
   }
-  return h(
-    "div",
-    { className: "aura-cal", ref: gridMerged },
-    h(
-      "div",
-      { className: "aura-cal__head" },
-      h(IconButton, { icon: "chevron-left", label: th ? "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32" : "Previous month", onClick: function() {
+  return /* @__PURE__ */ React.createElement("div", { className: "aura-cal", ref: gridMerged }, /* @__PURE__ */ React.createElement("div", { className: "aura-cal__head" }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      icon: "chevron-left",
+      label: th ? "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32" : "Previous month",
+      onClick: function() {
         setFocus(addMonths(focusDate, -1));
-      } }),
-      h(
-        "button",
-        { type: "button", className: "aura-cal__title", "aria-live": "polite", onClick: function() {
-          setView("years");
-        } },
-        monthTitle,
-        h(Icon, { name: "chevron-down", size: 14 })
-      ),
-      h(IconButton, { icon: "chevron-right", label: th ? "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E16\u0E31\u0E14\u0E44\u0E1B" : "Next month", onClick: function() {
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "aura-cal__title",
+      "aria-live": "polite",
+      onClick: function() {
+        setView("years");
+      }
+    },
+    monthTitle,
+    /* @__PURE__ */ React.createElement(Icon, { name: "chevron-down", size: 14 })
+  ), /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      icon: "chevron-right",
+      label: th ? "\u0E40\u0E14\u0E37\u0E2D\u0E19\u0E16\u0E31\u0E14\u0E44\u0E1B" : "Next month",
+      onClick: function() {
         setFocus(addMonths(focusDate, 1));
-      } })
-    ),
-    h(
-      "table",
-      { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle },
-      h("thead", null, h("tr", null, weekdayNames.map(function(n, i2) {
-        return h("th", { key: i2, scope: "col", abbr: n.long }, h("span", { "aria-hidden": true }, n.short));
-      }))),
-      h("tbody", { onMouseLeave: function() {
+      }
+    }
+  )), /* @__PURE__ */ React.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, weekdayNames.map(function(n, i) {
+    return /* @__PURE__ */ React.createElement("th", { key: i, scope: "col", abbr: n.long }, /* @__PURE__ */ React.createElement("span", { "aria-hidden": true }, n.short));
+  }))), /* @__PURE__ */ React.createElement(
+    "tbody",
+    {
+      onMouseLeave: function() {
         hoverState[1](null);
-      } }, weeks.map(function(wk, wi) {
-        return h("tr", { key: wi }, wk.map(function(d) {
-          var iso = toISO(d), out = d.getMonth() !== focusDate.getMonth(), dis = disabled(d);
-          var isStart = same(d, start), isEnd = same(d, end) || !end && props.range && same(d, hover) && start;
-          var sel = isStart || same(d, end);
-          return h(
-            "td",
+      }
+    },
+    weeks.map(function(wk, wi) {
+      return /* @__PURE__ */ React.createElement("tr", { key: wi }, wk.map(function(d) {
+        const iso = toISO(d), out = d.getMonth() !== focusDate.getMonth(), dis = disabled(d);
+        const isStart = same(d, start), isEnd = same(d, end) || !end && props.range && same(d, hover) && start;
+        const sel = isStart || same(d, end);
+        return /* @__PURE__ */ React.createElement(
+          "td",
+          {
+            key: iso,
+            role: "gridcell",
+            "aria-selected": sel || void 0,
+            className: cx(
+              inRange(d) && "is-in-range",
+              props.range && isStart && rangeEnd && "is-range-start",
+              props.range && isEnd && start && "is-range-end"
+            )
+          },
+          /* @__PURE__ */ React.createElement(
+            "button",
             {
-              key: iso,
-              role: "gridcell",
-              "aria-selected": sel || void 0,
-              className: cx(inRange(d) && "is-in-range", props.range && isStart && rangeEnd && "is-range-start", props.range && isEnd && start && "is-range-end")
-            },
-            h("button", {
               type: "button",
               "data-date": iso,
               tabIndex: same(d, focusDate) ? 0 : -1,
@@ -247,7 +273,12 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
               "aria-label": fmt(tag, { weekday: "long", day: "numeric", month: "long", year: "numeric" }, d),
               "aria-current": same(d, today) ? "date" : void 0,
               "aria-pressed": sel || void 0,
-              className: cx("aura-cal__day", out && "is-outside", sel && "is-selected", same(d, today) && "is-today"),
+              className: cx(
+                "aura-cal__day",
+                out && "is-outside",
+                sel && "is-selected",
+                same(d, today) && "is-today"
+              ),
               onClick: function() {
                 setFocus(d);
                 props.onSelect(iso);
@@ -258,62 +289,80 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
               onMouseEnter: function() {
                 if (props.range) hoverState[1](d);
               }
-            }, d.getDate())
-          );
-        }));
-      }))
-    ),
-    props.footer === false ? null : h(
-      "div",
-      { className: "aura-cal__foot" },
-      h("button", { type: "button", className: "aura-cal__link", disabled: disabled(today), onClick: function() {
+            },
+            d.getDate()
+          )
+        );
+      }));
+    })
+  )), props.footer === false ? null : /* @__PURE__ */ React.createElement("div", { className: "aura-cal__foot" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "aura-cal__link",
+      disabled: disabled(today),
+      onClick: function() {
         move(today);
         props.onSelect(toISO(today));
-      } }, th ? "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49" : "Today"),
-      props.onClear ? h("button", { type: "button", className: "aura-cal__link", onClick: props.onClear }, th ? "\u0E25\u0E49\u0E32\u0E07" : "Clear") : null
-    )
-  );
+      }
+    },
+    th ? "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49" : "Today"
+  ), props.onClear ? /* @__PURE__ */ React.createElement("button", { type: "button", className: "aura-cal__link", onClick: props.onClear }, th ? "\u0E25\u0E49\u0E32\u0E07" : "Clear") : null));
 });
 function useCalendarPopover(boxRef) {
-  var openState = React.useState(false), open = openState[0], setOpen = openState[1];
-  var pos = React.useState(null), popRef = React.useRef(null), mounted = useMounted();
+  const openState = React.useState(false), open = openState[0], setOpen = openState[1];
+  const pos = React.useState(null), popRef = React.useRef(null), mounted = useMounted();
   function place() {
     if (!boxRef.current) return;
-    var r = boxRef.current.getBoundingClientRect(), H = 380;
-    var up = window.innerHeight - r.bottom < H && r.top > H;
-    var left = Math.max(8, Math.min(r.left, window.innerWidth - 320 - 8));
+    const r = boxRef.current.getBoundingClientRect(), H = 380;
+    const up = window.innerHeight - r.bottom < H && r.top > H;
+    const left = Math.max(8, Math.min(r.left, window.innerWidth - 320 - 8));
     pos[1](up ? { left, bottom: window.innerHeight - r.top + 4 } : { left, top: r.bottom + 4 });
   }
-  useIsoLayoutEffect(function() {
-    if (open) place();
-  }, [open]);
-  React.useEffect(function() {
-    if (!open) return;
-    function outside(e) {
-      if (boxRef.current && boxRef.current.contains(e.target)) return;
-      if (popRef.current && popRef.current.contains(e.target)) return;
-      setOpen(false);
-    }
-    document.addEventListener("pointerdown", outside, true);
-    window.addEventListener("resize", place);
-    window.addEventListener("scroll", place, true);
-    return function() {
-      document.removeEventListener("pointerdown", outside, true);
-      window.removeEventListener("resize", place);
-      window.removeEventListener("scroll", place, true);
-    };
-  }, [open]);
+  useIsoLayoutEffect(
+    function() {
+      if (open) place();
+    },
+    [open]
+  );
+  React.useEffect(
+    function() {
+      if (!open) return;
+      function outside(e) {
+        if (boxRef.current && boxRef.current.contains(e.target)) return;
+        if (popRef.current && popRef.current.contains(e.target)) return;
+        setOpen(false);
+      }
+      document.addEventListener("pointerdown", outside, true);
+      window.addEventListener("resize", place);
+      window.addEventListener("scroll", place, true);
+      return function() {
+        document.removeEventListener("pointerdown", outside, true);
+        window.removeEventListener("resize", place);
+        window.removeEventListener("scroll", place, true);
+      };
+    },
+    [open]
+  );
   return { open, setOpen, pos: pos[0], popRef, mounted };
 }
 function DateField(props) {
-  var editState = React.useState(null), editing = editState[0], setEditing = editState[1];
-  return h(
+  const editState = React.useState(null), editing = editState[0], setEditing = editState[1];
+  return /* @__PURE__ */ React.createElement(
     Field,
-    { id: props.id, label: props.label, hint: props.hint, error: props.error, required: props.required, optional: props.optional, disabled: props.disabled, className: props.className },
-    h(
-      "div",
-      { ref: props.boxRef, className: cx("aura-input aura-date", props.open && "is-open") },
-      h("input", {
+    {
+      id: props.id,
+      label: props.label,
+      hint: props.hint,
+      error: props.error,
+      required: props.required,
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React.createElement("div", { ref: props.boxRef, className: cx("aura-input aura-date", props.open && "is-open") }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
         ref: props.inputRef,
         id: props.id,
         type: "text",
@@ -349,9 +398,20 @@ function DateField(props) {
             props.onToggle(false);
           }
         }
-      }),
-      props.clearable !== false && props.hasValue && !props.disabled ? h("button", { type: "button", tabIndex: -1, className: "aura-combo__clear", "aria-label": props.clearLabel, onClick: props.onClear }, h(Icon, { name: "x" })) : null,
-      h("button", {
+      }
+    ), props.clearable !== false && props.hasValue && !props.disabled ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        className: "aura-combo__clear",
+        "aria-label": props.clearLabel,
+        onClick: props.onClear
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "x" })
+    ) : null, /* @__PURE__ */ React.createElement(
+      "button",
+      {
         type: "button",
         className: "aura-date__toggle",
         disabled: props.disabled,
@@ -362,30 +422,35 @@ function DateField(props) {
         onClick: function() {
           props.onToggle(!props.open);
         }
-      }, h(Icon, { name: "calendar" }))
-    )
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "calendar" })
+    ))
   );
 }
 const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
-  var auto = uid(), id = props.id || auto, dialogId = id + "-cal";
-  var ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || "buddhist", th = locale !== "en";
-  var st = useMaybeControlled(props.value, props.defaultValue == null ? null : props.defaultValue, props.onChange);
-  var boxRef = React.useRef(null), inputRef = React.useRef(null), inputMerged = useMergedRef(ref, inputRef);
-  var pop = useCalendarPopover(boxRef);
+  const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
+  const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || "buddhist", th = locale !== "en";
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue == null ? null : props.defaultValue,
+    props.onChange
+  );
+  const boxRef = React.useRef(null), inputRef = React.useRef(null), inputMerged = useMergedRef(ref, inputRef);
+  const pop = useCalendarPopover(boxRef);
   function commit(text) {
     if (!text.trim()) {
       st[1](null);
       return;
     }
-    var iso = parseDate(text);
+    const iso = parseDate(text);
     if (iso) st[1](iso);
   }
   function close() {
     pop.setOpen(false);
     if (inputRef.current) inputRef.current.focus();
   }
-  var cal = pop.open && pop.mounted && pop.pos ? createPortal(
-    h(
+  const cal = pop.open && pop.mounted && pop.pos ? createPortal(
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: pop.popRef,
@@ -402,27 +467,29 @@ const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
           } else trapTab(e, pop.popRef.current);
         }
       },
-      h(Calendar, {
-        locale,
-        calendar,
-        weekStartsOn: props.weekStartsOn,
-        min: props.min,
-        max: props.max,
-        isDateDisabled: props.isDateDisabled,
-        start: st[0],
-        focus: st[0],
-        onSelect: function(iso) {
-          st[1](iso);
-          close();
+      /* @__PURE__ */ React.createElement(
+        Calendar,
+        {
+          locale,
+          calendar,
+          weekStartsOn: props.weekStartsOn,
+          min: props.min,
+          max: props.max,
+          isDateDisabled: props.isDateDisabled,
+          start: st[0],
+          focus: st[0],
+          onSelect: function(iso) {
+            st[1](iso);
+            close();
+          }
         }
-      })
+      )
     ),
     document.body
   ) : null;
-  return h(
-    React.Fragment,
-    null,
-    h(DateField, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    DateField,
+    {
       id,
       dialogId,
       label: props.label,
@@ -451,119 +518,125 @@ const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
         pop.setOpen(o);
         if (!o && inputRef.current) inputRef.current.focus();
       }
-    }),
-    cal
-  );
+    }
+  ), cal);
 });
-const DateRangePicker = React.forwardRef(function DateRangePicker2(props, ref) {
-  var auto = uid(), id = props.id || auto, dialogId = id + "-cal";
-  var ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || "buddhist", th = locale !== "en";
-  var st = useMaybeControlled(props.value, props.defaultValue || { start: null, end: null }, props.onChange);
-  var v = st[0] || { start: null, end: null };
-  var draft = React.useState(null);
-  var boxRef = React.useRef(null), inputRef = React.useRef(null), inputMerged = useMergedRef(ref, inputRef);
-  var pop = useCalendarPopover(boxRef);
-  var o = { locale, calendar };
-  function show(r) {
-    if (!r.start) return "";
-    if (!r.end) return formatDate(r.start, o) + " \u2013";
-    return formatDate(r.start, o) + " \u2013 " + formatDate(r.end, o);
-  }
-  function commit(text) {
-    var parts = String(text).split(/\s[–-]\s|\s*–\s*/);
-    if (!text.trim()) {
-      st[1]({ start: null, end: null });
-      return;
+const DateRangePicker = React.forwardRef(
+  function DateRangePicker2(props, ref) {
+    const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
+    const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || "buddhist", th = locale !== "en";
+    const st = useMaybeControlled(
+      props.value,
+      props.defaultValue || { start: null, end: null },
+      props.onChange
+    );
+    const v = st[0] || { start: null, end: null };
+    const draft = React.useState(null);
+    const boxRef = React.useRef(null), inputRef = React.useRef(null), inputMerged = useMergedRef(ref, inputRef);
+    const pop = useCalendarPopover(boxRef);
+    const o = { locale, calendar };
+    function show(r) {
+      if (!r.start) return "";
+      if (!r.end) return formatDate(r.start, o) + " \u2013";
+      return formatDate(r.start, o) + " \u2013 " + formatDate(r.end, o);
     }
-    var a = parseDate(parts[0]), b = parseDate(parts[1] || "");
-    if (a && b) st[1](a <= b ? { start: a, end: b } : { start: b, end: a });
-  }
-  function close() {
-    pop.setOpen(false);
-    draft[1](null);
-    if (inputRef.current) inputRef.current.focus();
-  }
-  function pick(iso) {
-    if (!draft[0]) {
-      draft[1](iso);
-      return;
+    function commit(text) {
+      const parts = String(text).split(/\s[–-]\s|\s*–\s*/);
+      if (!text.trim()) {
+        st[1]({ start: null, end: null });
+        return;
+      }
+      const a = parseDate(parts[0]), b = parseDate(parts[1] || "");
+      if (a && b) st[1](a <= b ? { start: a, end: b } : { start: b, end: a });
     }
-    var a = draft[0], b = iso;
-    st[1](a <= b ? { start: a, end: b } : { start: b, end: a });
-    close();
-  }
-  var cal = pop.open && pop.mounted && pop.pos ? createPortal(
-    h(
-      "div",
+    function close() {
+      pop.setOpen(false);
+      draft[1](null);
+      if (inputRef.current) inputRef.current.focus();
+    }
+    function pick(iso) {
+      if (!draft[0]) {
+        draft[1](iso);
+        return;
+      }
+      const a = draft[0], b = iso;
+      st[1](a <= b ? { start: a, end: b } : { start: b, end: a });
+      close();
+    }
+    const cal = pop.open && pop.mounted && pop.pos ? createPortal(
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: pop.popRef,
+          id: dialogId,
+          role: "dialog",
+          "aria-modal": false,
+          "aria-label": props.label || (th ? "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48" : "Choose dates"),
+          className: "aura-cal__popover",
+          style: pop.pos,
+          onKeyDown: function(e) {
+            if (e.key === "Escape") {
+              e.stopPropagation();
+              close();
+            } else trapTab(e, pop.popRef.current);
+          }
+        },
+        /* @__PURE__ */ React.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ? th ? "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14" : "Choose the end date" : th ? "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" : "Choose the start date"),
+        /* @__PURE__ */ React.createElement(
+          Calendar,
+          {
+            range: true,
+            locale,
+            calendar,
+            weekStartsOn: props.weekStartsOn,
+            min: props.min,
+            max: props.max,
+            isDateDisabled: props.isDateDisabled,
+            start: draft[0] || v.start,
+            end: draft[0] ? null : v.end,
+            focus: draft[0] || v.start,
+            onSelect: pick
+          }
+        )
+      ),
+      document.body
+    ) : null;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      DateField,
       {
-        ref: pop.popRef,
-        id: dialogId,
-        role: "dialog",
-        "aria-modal": false,
-        "aria-label": props.label || (th ? "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48" : "Choose dates"),
-        className: "aura-cal__popover",
-        style: pop.pos,
-        onKeyDown: function(e) {
-          if (e.key === "Escape") {
-            e.stopPropagation();
-            close();
-          } else trapTab(e, pop.popRef.current);
+        id,
+        dialogId,
+        label: props.label,
+        hint: props.hint,
+        error: props.error,
+        required: props.required,
+        optional: props.optional,
+        disabled: props.disabled,
+        className: props.className,
+        name: props.name,
+        boxRef,
+        inputRef: inputMerged,
+        open: pop.open,
+        display: show(v),
+        placeholder: props.placeholder || (th ? "\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B \u2013 \u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B" : "dd/mm/yyyy \u2013 dd/mm/yyyy"),
+        hasValue: v.start != null,
+        clearable: props.clearable,
+        onClear: function() {
+          st[1]({ start: null, end: null });
+          inputRef.current && inputRef.current.focus();
+        },
+        clearLabel: th ? "\u0E25\u0E49\u0E32\u0E07\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48" : "Clear dates",
+        toggleLabel: th ? "\u0E40\u0E1B\u0E34\u0E14\u0E1B\u0E0F\u0E34\u0E17\u0E34\u0E19" : "Open calendar",
+        onCommit: commit,
+        onToggle: function(op) {
+          pop.setOpen(op);
+          draft[1](null);
+          if (!op && inputRef.current) inputRef.current.focus();
         }
-      },
-      h("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ? th ? "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14" : "Choose the end date" : th ? "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" : "Choose the start date"),
-      h(Calendar, {
-        range: true,
-        locale,
-        calendar,
-        weekStartsOn: props.weekStartsOn,
-        min: props.min,
-        max: props.max,
-        isDateDisabled: props.isDateDisabled,
-        start: draft[0] || v.start,
-        end: draft[0] ? null : v.end,
-        focus: draft[0] || v.start,
-        onSelect: pick
-      })
-    ),
-    document.body
-  ) : null;
-  return h(
-    React.Fragment,
-    null,
-    h(DateField, {
-      id,
-      dialogId,
-      label: props.label,
-      hint: props.hint,
-      error: props.error,
-      required: props.required,
-      optional: props.optional,
-      disabled: props.disabled,
-      className: props.className,
-      name: props.name,
-      boxRef,
-      inputRef: inputMerged,
-      open: pop.open,
-      display: show(v),
-      placeholder: props.placeholder || (th ? "\u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B \u2013 \u0E27\u0E27/\u0E14\u0E14/\u0E1B\u0E1B\u0E1B\u0E1B" : "dd/mm/yyyy \u2013 dd/mm/yyyy"),
-      hasValue: v.start != null,
-      clearable: props.clearable,
-      onClear: function() {
-        st[1]({ start: null, end: null });
-        inputRef.current && inputRef.current.focus();
-      },
-      clearLabel: th ? "\u0E25\u0E49\u0E32\u0E07\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48" : "Clear dates",
-      toggleLabel: th ? "\u0E40\u0E1B\u0E34\u0E14\u0E1B\u0E0F\u0E34\u0E17\u0E34\u0E19" : "Open calendar",
-      onCommit: commit,
-      onToggle: function(op) {
-        pop.setOpen(op);
-        draft[1](null);
-        if (!op && inputRef.current) inputRef.current.focus();
       }
-    }),
-    cal
-  );
-});
+    ), cal);
+  }
+);
 export {
   Calendar,
   DatePicker,