se-design 1.0.75 → 1.0.76-dev1

package/dist/index51.js

@@ -1,96 +1,456 @@
-import t from "react";
-import { Icon as S } from "./index5.js";
-import { useStableId as T } from "./index192.js";
-import { getA11yNameAttributes as W } from "./index71.js";
+import r, { useState as T } from "react";
+import { Button as z } from "./index4.js";
+import { Icon as _ } from "./index6.js";
+import { Dropdown as te } from "./index25.js";
+import { useDatePickerA11y as He, formatDateId as Le, getCellAriaLabel as Pe } from "./index235.js";
 /* empty css         */
-function J({
-  disabled: c,
-  error: a,
-  errorMessage: E,
-  id: N,
-  inputStyle: r,
-  label: s,
-  leftIcon: l,
-  maxLength: n,
-  onChange: m,
-  onClick: o,
-  onKeyDown: $,
-  placeholder: b,
-  readOnly: d,
-  rightIcon: u,
-  style: y,
-  tag: I,
-  type: k = "text",
-  value: p,
-  className: D = "",
-  automationId: g = "",
-  ariaLabel: A,
-  ariaLabelledBy: C,
-  ariaDescribedBy: K,
-  ariaHasPopup: R
-}) {
-  const v = T(N, "se-input-icon"), _ = I || "input", x = W({
-    ariaLabel: A,
-    ariaLabelledBy: C,
-    ariaDescribedBy: K
-  }), i = !!d && !!o, h = (e) => {
-    if (!e) return null;
-    const w = c || e.disabled, f = i || w ? void 0 : e.onClick;
-    return /* @__PURE__ */ t.createElement("div", {
-      className: `input-with-icon-icon input-with-icon-icon-${e.position} ${e.className || ""} ${w ? "disabled" : ""} ${e.disableHover ? "no-hover" : ""}`,
-      style: e.style
-    }, /* @__PURE__ */ t.createElement(S, {
-      name: e.name,
-      onClick: f,
-      ariaLabel: f ? e.ariaLabel : void 0
-    }));
-  }, F = (e) => {
-    i && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), o(e)), $?.(e);
-  }, H = !!l, M = !!u;
-  return /* @__PURE__ */ t.createElement("div", {
-    className: `input-with-icon-main-container ${D}`,
-    style: y,
-    "data-automation-id": g
-  }, s && /* @__PURE__ */ t.createElement("label", {
-    className: "label-container",
-    htmlFor: v
-  }, s), /* @__PURE__ */ t.createElement("div", {
-    className: `input-with-icon-wrapper ${H ? "has-left-icon" : ""} ${M ? "has-right-icon" : ""}`,
-    onClick: i ? (e) => o(e) : void 0,
-    style: i ? {
-      cursor: "pointer"
-    } : void 0
-  }, h(l), /* @__PURE__ */ t.createElement(_, {
-    id: v,
-    value: p,
-    onChange: m ? (e) => m(e.target.value) : void 0,
-    // In trigger mode don't attach onClick to the input — the wrapper handles it.
-    onClick: i ? void 0 : o,
-    onKeyDown: F,
-    disabled: c,
-    readOnly: d,
-    type: k,
-    className: `input-with-icon-element ${a ? "input-with-icon-container-error" : "input-with-icon-container-default"} ${c ? "input-with-icon-container-disabled" : ""}`,
-    maxLength: n || void 0,
-    placeholder: b,
-    // In trigger mode: pointer cursor so it matches the wrapper, and no text selection
-    // since the value is display-only — selecting "90 days" with a caret is misleading.
-    style: i ? {
-      cursor: "pointer",
-      userSelect: "none",
-      ...r
-    } : r,
-    "aria-haspopup": R,
-    ...x
-  }), h(u)), (a || n) && /* @__PURE__ */ t.createElement("div", {
-    className: `${a ? "error-and-max-word" : "max-word-container"}`
-  }, a && /* @__PURE__ */ t.createElement("div", {
-    className: "error-message"
-  }, E), n && /* @__PURE__ */ t.createElement("div", {
-    className: "max-word"
-  }, n && p?.length + "/" + n)));
+function O() {
+  return O = Object.assign ? Object.assign.bind() : function(h) {
+    for (var m = 1; m < arguments.length; m++) {
+      var v = arguments[m];
+      for (var w in v) ({}).hasOwnProperty.call(v, w) && (h[w] = v[w]);
+    }
+    return h;
+  }, O.apply(null, arguments);
 }
+const Te = ["S", "M", "T", "W", "T", "F", "S"], ae = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], Oe = ["Today", "Yesterday", "This Week", "Last Week", "This Month", "Last Month"], q = [{
+  value: "january",
+  label: "January"
+}, {
+  value: "february",
+  label: "February"
+}, {
+  value: "march",
+  label: "March"
+}, {
+  value: "april",
+  label: "April"
+}, {
+  value: "may",
+  label: "May"
+}, {
+  value: "june",
+  label: "June"
+}, {
+  value: "july",
+  label: "July"
+}, {
+  value: "august",
+  label: "August"
+}, {
+  value: "september",
+  label: "September"
+}, {
+  value: "october",
+  label: "October"
+}, {
+  value: "november",
+  label: "November"
+}, {
+  value: "december",
+  label: "December"
+}], Se = (h, m) => new Date(h, m + 1, 0).getDate(), Re = (h, m) => new Date(h, m, 1).getDay(), ze = ({
+  title: h = "Select modified date",
+  // isOpen = true,
+  showHeader: m = !0,
+  initialStartDate: v,
+  initialEndDate: w,
+  onApply: S = () => {
+  },
+  onClose: R,
+  shouldAllowFutureDateSelection: F = !1,
+  maxDays: d,
+  disablePastDates: j = !1,
+  singleDateSelection: H = !1,
+  minYearOption: ne,
+  showQuickActions: re = !1,
+  showSingleMonth: p = !1,
+  className: oe = "",
+  automationId: y = "datepicker",
+  labels: J = {
+    clear: "Clear",
+    apply: "Apply"
+  }
+}) => {
+  const se = () => {
+    if (v && w)
+      return {
+        startDate: v,
+        endDate: w
+      };
+    const t = /* @__PURE__ */ new Date();
+    t.setHours(23, 59, 59, 999);
+    const e = /* @__PURE__ */ new Date();
+    return e.setHours(0, 0, 0, 0), {
+      startDate: e,
+      endDate: t
+    };
+  }, le = () => {
+    const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
+    return t.setDate(1), e.setDate(1), p || e.setMonth(e.getMonth() - 1), t.setHours(0, 0, 0, 0), e.setHours(0, 0, 0, 0), [e, t];
+  }, [c, N] = T(se), [Q] = T(le), [k, W] = T(() => Q[0]), [L, G] = T(() => Q[1]), V = (t, e) => t.getTime() > e.getTime() ? [e, t] : [t, e], x = (t, e) => {
+    if (p) {
+      W(t);
+      return;
+    }
+    if (e) {
+      const [a, n] = V(t, L);
+      W(a), n !== L && G(n);
+    } else {
+      const [a, n] = V(k, t);
+      a !== k && W(a), G(n);
+    }
+  }, {
+    getGridCellProps: ce,
+    getLeftContainerProps: ie,
+    getRightContainerProps: ue
+  } = He({
+    leftMonth: k,
+    rightMonth: L,
+    showSingleMonth: p,
+    selectedRange: c,
+    onMonthChange: x
+  }), de = (t, e) => {
+    const a = Se(t, e), n = Re(t, e), g = [];
+    for (let s = 0; s < n; s++)
+      g.push(null);
+    for (let s = 1; s <= a; s++) {
+      const u = new Date(t, e, s);
+      u.setHours(0, 0, 0, 0), g.push(u);
+    }
+    return g;
+  }, P = (t, e) => t.getDate() === e.getDate() && t.getMonth() === e.getMonth() && t.getFullYear() === e.getFullYear(), ge = (t) => {
+    if (!c.startDate || !c.endDate) return !1;
+    const e = new Date(t);
+    e.setHours(12, 0, 0, 0);
+    const a = new Date(c.startDate);
+    a.setHours(0, 0, 0, 0);
+    const n = new Date(c.endDate);
+    return n.setHours(23, 59, 59, 999), e >= a && e <= n;
+  }, De = (t) => {
+    const e = /* @__PURE__ */ new Date();
+    return t.getDate() === e.getDate() && t.getMonth() === e.getMonth() && t.getFullYear() === e.getFullYear();
+  }, I = (t) => {
+    if (!t) return !0;
+    const e = /* @__PURE__ */ new Date();
+    e.setHours(0, 0, 0, 0);
+    const a = new Date(t);
+    if (a.setHours(0, 0, 0, 0), j && a < e)
+      return !0;
+    if (d != null) {
+      const n = new Date(e);
+      return n.setDate(n.getDate() + d), n.setHours(0, 0, 0, 0), a > n;
+    }
+    return F ? !1 : a > e;
+  }, me = (t) => {
+    if (I(t)) return;
+    const e = new Date(t);
+    if (e.setHours(12, 0, 0, 0), H) {
+      N({
+        startDate: e,
+        endDate: e
+      }), S({
+        startDate: e,
+        endDate: e
+      }), R?.();
+      return;
+    }
+    if (!c.startDate || c.endDate)
+      N({
+        startDate: e,
+        endDate: null
+      });
+    else {
+      const a = new Date(c.startDate);
+      a.setHours(12, 0, 0, 0);
+      const n = e > a ? e : a, g = e > a ? a : e;
+      N({
+        startDate: g,
+        endDate: n
+      });
+    }
+  }, K = (t, e) => {
+    const a = new Date(t);
+    return a.setMonth(a.getMonth() + (e ? 1 : -1)), a;
+  }, fe = (t) => c?.startDate ? P(t, c.startDate) : !1, he = (t) => c?.endDate ? P(t, c?.endDate) : !1, pe = (t) => !c.startDate || !c.endDate ? !1 : P(c.startDate, c.endDate) && P(t, c.startDate), be = (t, e) => {
+    const a = ne || t - 10;
+    let n = F ? t + 10 : t;
+    if (d) {
+      const s = /* @__PURE__ */ new Date(), u = new Date(s);
+      u.setDate(u.getDate() + d);
+      const b = u.getFullYear();
+      n = Math.min(n, b);
+    }
+    n = Math.max(n, e);
+    const g = n - a + 1;
+    return Array.from({
+      length: g
+    }, (s, u) => ({
+      value: a + u,
+      label: (a + u).toString()
+    })).filter((s) => {
+      if (s.value === e)
+        return !0;
+      if (!F && s.value > t)
+        return !1;
+      if (d) {
+        const u = /* @__PURE__ */ new Date(), b = new Date(u);
+        return b.setDate(b.getDate() + d), s.value <= b.getFullYear();
+      }
+      return !0;
+    });
+  }, ve = () => {
+    const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
+    e.setHours(0, 0, 0, 0), t.setHours(23, 59, 59, 999), N({
+      startDate: e,
+      endDate: t
+    });
+  }, M = (t) => {
+    const e = new Date(t);
+    return e.setHours(0, 0, 0, 0), e;
+  }, E = (t) => {
+    const e = new Date(t);
+    return e.setHours(23, 59, 59, 999), e;
+  }, we = (t) => {
+    const e = /* @__PURE__ */ new Date();
+    let a = /* @__PURE__ */ new Date(), n = /* @__PURE__ */ new Date();
+    switch (t) {
+      case "Today":
+        a = M(e), n = E(e);
+        break;
+      case "Yesterday":
+        a = M(new Date(e.setDate(e.getDate() - 1))), n = E(new Date(e));
+        break;
+      case "This Week":
+        const g = new Date(e.setDate(e.getDate() - e.getDay()));
+        a = M(g), n = E(/* @__PURE__ */ new Date());
+        break;
+      case "Last Week":
+        const s = new Date(e.setDate(e.getDate() - e.getDay() - 7)), u = new Date(e.setDate(s.getDate() + 6));
+        a = M(s), n = E(u);
+        break;
+      case "This Month":
+        a = M(new Date(e.getFullYear(), e.getMonth(), 1)), n = E(/* @__PURE__ */ new Date());
+        break;
+      case "Last Month":
+        a = M(new Date(e.getFullYear(), e.getMonth() - 1, 1)), n = E(new Date(e.getFullYear(), e.getMonth(), 0));
+        break;
+    }
+    N({
+      startDate: a,
+      endDate: n
+    });
+  }, ye = () => /* @__PURE__ */ r.createElement("div", {
+    className: "w-[147px] p-4 border-r border-[var(--color-gray-200)]"
+  }, /* @__PURE__ */ r.createElement("div", {
+    role: "group",
+    "aria-label": "Quick date selections",
+    className: "flex flex-col gap-3"
+  }, Oe.map((t) => /* @__PURE__ */ r.createElement(z, {
+    key: t,
+    label: t,
+    type: "link",
+    onClick: () => we(t)
+  })))), ke = () => {
+    const {
+      startDate: t = null,
+      endDate: e = null
+    } = c;
+    if (t && e) {
+      S({
+        startDate: t,
+        endDate: e
+      });
+      return;
+    }
+    if (t || e) {
+      const a = t || e;
+      S({
+        startDate: a,
+        endDate: a
+      });
+    }
+  }, A = (t) => {
+    const e = t.getFullYear(), a = t.getMonth(), n = de(e, a), g = (/* @__PURE__ */ new Date()).getFullYear(), s = t.getTime() === k.getTime(), u = be(g, e), b = new Date(e, a, 1).toLocaleString("en-US", {
+      month: "long",
+      year: "numeric"
+    }), Me = s ? ie : ue, X = `calendar-instructions-${s ? "left" : "right"}`, Ee = H ? "Press Enter or Space to select a date. Use arrow keys to navigate days, Page Up and Page Down to change months." : "Press Enter or Space to select a start date, then again to select an end date. Use arrow keys to navigate days, Page Up and Page Down to change months.", Ne = ce({
+      isLeftCalendar: s,
+      isDateDisabled: I,
+      handleDateClick: me
+    }), Z = [];
+    for (let o = 0; o < n.length; o += 7) {
+      const l = n.slice(o, o + 7);
+      for (; l.length < 7; ) l.push(null);
+      Z.push(l);
+    }
+    const C = /* @__PURE__ */ new Date(), xe = j && t.getMonth() === C.getMonth() && t.getFullYear() === C.getFullYear(), Ce = !F && a === C.getMonth() && e === C.getFullYear() || d !== void 0 && (() => {
+      const o = new Date(C);
+      return o.setDate(o.getDate() + d), t.getMonth() === o.getMonth() && t.getFullYear() === o.getFullYear();
+    })();
+    return /* @__PURE__ */ r.createElement("div", {
+      className: "se-design-calendar-container w-fit p-4"
+    }, /* @__PURE__ */ r.createElement("div", {
+      className: "flex justify-between items-center"
+    }, /* @__PURE__ */ r.createElement(_, {
+      name: "chevron",
+      rotation: "90",
+      size: 16,
+      disabled: xe,
+      onClick: () => {
+        const o = K(t, !1);
+        if (j) {
+          const l = /* @__PURE__ */ new Date();
+          if (l.setHours(0, 0, 0, 0), o < l && o.getMonth() !== l.getMonth())
+            return;
+        }
+        x(o, s);
+      },
+      automationId: `${y}-previous-month`,
+      ariaLabel: p ? "Previous month" : s ? "Previous month of starting date" : "Previous month of end date"
+    }), /* @__PURE__ */ r.createElement("div", {
+      className: "flex gap-2",
+      onClick: (o) => o.stopPropagation()
+    }, /* @__PURE__ */ r.createElement(te, {
+      type: "select",
+      dropDownOptions: q,
+      defaultSelectedValue: q[a],
+      selectBy: "label",
+      optionsUniqueBy: "value",
+      displaySelected: !0,
+      ariaLabel: p ? "Month" : s ? "Month of starting date" : "Month of end date",
+      onOptionClick: (o) => {
+        const l = new Date(t);
+        l.setMonth(q.findIndex((i) => i.value === o.value)), x(l, s);
+      },
+      className: "w-[124px] dropdown-option-container"
+    }), /* @__PURE__ */ r.createElement(te, {
+      type: "select",
+      dropDownOptions: u,
+      defaultSelectedValue: u.find((o) => o.value === e),
+      selectBy: "label",
+      optionsUniqueBy: "value",
+      displaySelected: !0,
+      ariaLabel: p ? "Year" : s ? "Year of starting date" : "Year of end date",
+      onOptionClick: (o) => {
+        const l = new Date(t);
+        l.setFullYear(o.value), x(l, s);
+      },
+      className: "w-[104px] dropdown-option-container"
+    })), /* @__PURE__ */ r.createElement(_, {
+      name: "chevron",
+      rotation: "270",
+      size: 16,
+      disabled: Ce,
+      onClick: () => {
+        const o = K(t, !0);
+        if (d !== void 0) {
+          const l = /* @__PURE__ */ new Date(), i = new Date(l);
+          if (i.setDate(i.getDate() + d), o > i)
+            return;
+        }
+        x(o, s);
+      },
+      automationId: `${y}-next-month`,
+      ariaLabel: p ? "Next month" : s ? "Next month of starting date" : "Next month of end date"
+    })), /* @__PURE__ */ r.createElement("span", {
+      id: X,
+      className: "sr-only"
+    }, Ee), /* @__PURE__ */ r.createElement("div", O({}, Me({
+      ariaLabel: b,
+      ariaDescribedBy: X
+    }), {
+      className: "mt-3"
+    }), /* @__PURE__ */ r.createElement("div", {
+      role: "row",
+      className: "grid grid-cols-7 gap-2"
+    }, Te.map((o, l) => /* @__PURE__ */ r.createElement("abbr", {
+      key: `${o}-${l}`,
+      role: "columnheader",
+      "aria-label": ae[l],
+      title: ae[l],
+      className: "datepicker-weekdays"
+    }, o))), Z.map((o, l) => /* @__PURE__ */ r.createElement("div", {
+      key: l,
+      role: "row",
+      className: "grid grid-cols-7 gap-2"
+    }, o.map((i, Ye) => {
+      if (!i)
+        return /* @__PURE__ */ r.createElement("div", {
+          key: `empty-${l}-${Ye}`,
+          role: "gridcell",
+          "aria-hidden": "true",
+          className: "h-10 w-10"
+        });
+      const ee = Le(i), D = fe(i), f = he(i), Y = pe(i), U = !D && !f && ge(i), B = De(i), $ = I(i), {
+        ref: $e,
+        ...Fe
+      } = Ne({
+        cellId: ee,
+        cellDate: i,
+        disabled: $,
+        ariaLabel: Pe(i, D, f, Y, H),
+        ariaSelected: D || f || U,
+        ariaCurrent: B ? "date" : void 0,
+        ariaDisabled: $ || void 0
+      });
+      return /* @__PURE__ */ r.createElement("div", O({
+        key: ee
+      }, Fe, {
+        ref: $e,
+        className: `
+                      relative h-10 w-10 flex items-center justify-center transition-colors rounded-md focus-outline
+                      ${$ ? "cursor-not-allowed text-[var(--color-gray-600)] hover:bg-transparent" : "cursor-pointer"}
+                      ${Y ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
+                      ${!Y && D ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
+                      ${!Y && f ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
+                      ${!D && !f && U ? "bg-[var(--color-blue-100)] text-[var(--color-blue-600)] outline outline-1 outline-[var(--color-blue-500)]" : ""}
+                      ${!D && !f && !U && !$ ? "hover:bg-[var(--color-blue-100)] hover:outline hover:outline-1 hover:outline-[var(--color-blue-500)]" : ""}
+                      ${B && !D && !f ? "text-[var(--color-blue-500)] bg-[var(--color-blue-100)] outline outline-1 outline-[var(--color-blue-500)]" : ""}
+                      ${!$ && !D && !f && !B ? "text-[var(--color-blue-500)]" : ""}
+                    `,
+        "data-automation-id": `${y}-date-${i.getDate()}`
+      }), i.getDate(), !Y && (D || f) && /* @__PURE__ */ r.createElement("div", {
+        className: `absolute top-0 bottom-0 ${D ? "right-[-8px]" : "left-[-8px]"} w-[8px]
+                        bg-[var(--color-blue-100)] -z-10`
+      }));
+    })))));
+  };
+  return /* @__PURE__ */ r.createElement("div", {
+    className: `se-design-datepicker-container flex flex-col bg-[var(--color-white)] rounded-md shadow-md w-max ${oe}`
+  }, m && /* @__PURE__ */ r.createElement("div", {
+    className: "se-design-datepicker-header flex justify-between items-center border-b border-[var(--color-gray-200)] p-4"
+  }, /* @__PURE__ */ r.createElement("h2", {
+    className: "datepicker-title"
+  }, h), R && /* @__PURE__ */ r.createElement(_, {
+    name: "close",
+    size: 16,
+    onClick: R,
+    className: "cursor-pointer",
+    automationId: `${y}-close`,
+    ariaLabel: "Close date picker"
+  })), /* @__PURE__ */ r.createElement("div", {
+    className: "se-design-datepicker-content flex"
+  }, re && ye(), /* @__PURE__ */ r.createElement("div", {
+    className: "flex"
+  }, p ? A(k) : /* @__PURE__ */ r.createElement(r.Fragment, null, A(k), /* @__PURE__ */ r.createElement("div", {
+    className: "h-full w-[1px] border-r border-[var(--color-gray-200)]",
+    "aria-hidden": "true"
+  }), A(L)))), !H && /* @__PURE__ */ r.createElement("div", {
+    className: "se-design-datepicker-footer flex justify-end items-center gap-5 p-4 border-t border-[var(--color-gray-200)]"
+  }, /* @__PURE__ */ r.createElement(z, {
+    label: J?.clear || "Clear",
+    type: "ghost",
+    onClick: ve,
+    "data-automation-id": `${y}-clear-button`
+  }), /* @__PURE__ */ r.createElement(z, {
+    label: J?.apply || "Apply",
+    type: "primary",
+    onClick: ke,
+    "data-automation-id": `${y}-apply-button`
+  })));
+};
 export {
-  J as InputWithIcon
+  ze as DatePicker
 };
 //# sourceMappingURL=index51.js.map