se-design 1.0.83-dev.4 → 1.0.83-r-dev.1

package/dist/index55.js

@@ -1,96 +1,464 @@
-import t from "react";
+import r, { useState as S } 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 Fe, formatDateId as Pe, getCellAriaLabel as Ce } from "./index244.js";
 /* empty css         */
-const n = ({
-  element: e,
-  animationDuration: d,
-  baseColor: s,
-  highlightColor: m
+function T() {
+  return T = Object.assign ? Object.assign.bind() : function(p) {
+    for (var m = 1; m < arguments.length; m++) {
+      var v = arguments[m];
+      for (var w in v) ({}).hasOwnProperty.call(v, w) && (p[w] = v[w]);
+    }
+    return p;
+  }, T.apply(null, arguments);
+}
+const Oe = ["S", "M", "T", "W", "T", "F", "S"], Se = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], Te = ["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"
+}], Re = (p, m) => new Date(p, m + 1, 0).getDate(), je = (p, m) => new Date(p, m, 1).getDay(), ze = ({
+  title: p = "Select modified date",
+  // isOpen = true,
+  showHeader: m = !0,
+  initialStartDate: v,
+  initialEndDate: w,
+  onApply: R = () => {
+  },
+  onClose: j,
+  shouldAllowFutureDateSelection: F = !1,
+  maxDays: g,
+  disablePastDates: A = !1,
+  singleDateSelection: P = !1,
+  minYearOption: ae,
+  showQuickActions: ne = !1,
+  showSingleMonth: h = !1,
+  className: re = "",
+  automationId: y = "datepicker",
+  labels: J = {
+    clear: "Clear",
+    apply: "Apply"
+  }
 }) => {
-  const i = {
-    width: typeof e.width == "number" ? `${e.width}px` : e.width,
-    height: typeof e.height == "number" ? `${e.height}px` : e.height,
-    borderRadius: e.borderRadius ? typeof e.borderRadius == "number" ? `${e.borderRadius}px` : e.borderRadius : void 0,
-    margin: e.margin,
-    "--shimmer-duration": `${d}s`,
-    "--shimmer-base-color": s,
-    "--shimmer-highlight-color": m
-  }, r = `se-design-shimmer-element se-design-shimmer-${e.type}`;
-  return /* @__PURE__ */ t.createElement("div", {
-    className: r,
-    style: i
-  }, e.children && e.children.map((a, p) => /* @__PURE__ */ t.createElement(n, {
-    key: p,
-    element: a,
-    animationDuration: d,
-    baseColor: s,
-    highlightColor: m
-  })));
-}, y = ({
-  container: e,
-  animationDuration: d,
-  baseColor: s,
-  highlightColor: m
-}) => {
-  const i = {
-    display: "flex",
-    flexDirection: e.direction || "column",
-    gap: typeof e.gap == "number" ? `${e.gap}px` : e.gap,
-    padding: e.padding,
-    margin: e.margin,
-    alignItems: e.alignItems,
-    flex: e.flex
-  };
-  return /* @__PURE__ */ t.createElement("div", {
-    className: `se-design-shimmer-container ${e.className || ""}`,
-    style: i
-  }, e.children.map((r, a) => r.type === "container" ? /* @__PURE__ */ t.createElement(y, {
-    key: a,
-    container: r,
-    animationDuration: d,
-    baseColor: s,
-    highlightColor: m
-  }) : /* @__PURE__ */ t.createElement(n, {
-    key: a,
-    element: r,
-    animationDuration: d,
-    baseColor: s,
-    highlightColor: m
-  })));
-}, l = ({
-  structure: e,
-  className: d = "",
-  animationDuration: s = 3,
-  baseColor: m = "var(--color-gray-700)",
-  highlightColor: i = "var(--color-gray-600)",
-  width: r,
-  height: a
-}) => {
-  const p = {
-    width: r ? typeof r == "number" ? `${r}px` : r : "100%",
-    height: a ? typeof a == "number" ? `${a}px` : a : "auto",
-    "--shimmer-duration": `${s}s`,
-    "--shimmer-base-color": m,
-    "--shimmer-highlight-color": i
+  const oe = () => {
+    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
+    };
+  }, se = () => {
+    const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
+    return t.setDate(1), e.setDate(1), h || e.setMonth(e.getMonth() - 1), t.setHours(0, 0, 0, 0), e.setHours(0, 0, 0, 0), [e, t];
+  }, [l, M] = S(oe), [Q] = S(se), [x, W] = S(() => Q[0]), [C, G] = S(() => Q[1]), V = (t, e) => t.getTime() > e.getTime() ? [e, t] : [t, e], N = (t, e) => {
+    if (h) {
+      W(t);
+      return;
+    }
+    if (e) {
+      const [a, n] = V(t, C);
+      W(a), n !== C && G(n);
+    } else {
+      const [a, n] = V(x, t);
+      a !== x && W(a), G(n);
+    }
+  }, {
+    getGridCellProps: le,
+    getLeftContainerProps: ce,
+    getRightContainerProps: ie
+  } = Fe({
+    leftMonth: x,
+    rightMonth: C,
+    showSingleMonth: h,
+    selectedRange: l,
+    onMonthChange: N
+  }), ue = (t, e) => {
+    const a = Re(t, e), n = je(t, e), d = [];
+    for (let c = 0; c < n; c++)
+      d.push(null);
+    for (let c = 1; c <= a; c++) {
+      const u = new Date(t, e, c);
+      u.setHours(0, 0, 0, 0), d.push(u);
+    }
+    return d;
+  }, O = (t, e) => t.getDate() === e.getDate() && t.getMonth() === e.getMonth() && t.getFullYear() === e.getFullYear(), de = (t) => {
+    if (!l.startDate || !l.endDate) return !1;
+    const e = new Date(t);
+    e.setHours(12, 0, 0, 0);
+    const a = new Date(l.startDate);
+    a.setHours(0, 0, 0, 0);
+    const n = new Date(l.endDate);
+    return n.setHours(23, 59, 59, 999), e >= a && e <= n;
+  }, ge = (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), A && a < e)
+      return !0;
+    if (g != null) {
+      const n = new Date(e);
+      return n.setDate(n.getDate() + g), n.setHours(0, 0, 0, 0), a > n;
+    }
+    return F ? !1 : a > e;
+  }, De = (t) => {
+    if (I(t)) return;
+    const e = new Date(t);
+    if (e.setHours(12, 0, 0, 0), P) {
+      M({
+        startDate: e,
+        endDate: e
+      }), R({
+        startDate: e,
+        endDate: e
+      }), j?.();
+      return;
+    }
+    if (!l.startDate || l.endDate)
+      M({
+        startDate: e,
+        endDate: null
+      });
+    else {
+      const a = new Date(l.startDate);
+      a.setHours(12, 0, 0, 0);
+      const n = e > a ? e : a, d = e > a ? a : e;
+      M({
+        startDate: d,
+        endDate: n
+      });
+    }
+  }, K = (t, e) => {
+    const a = new Date(t);
+    return a.setMonth(a.getMonth() + (e ? 1 : -1)), a;
+  }, me = (t) => l?.startDate ? O(t, l.startDate) : !1, fe = (t) => l?.endDate ? O(t, l?.endDate) : !1, pe = (t) => !l.startDate || !l.endDate ? !1 : O(l.startDate, l.endDate) && O(t, l.startDate), he = (t, e) => {
+    const a = ae || t - 10;
+    let n = F ? t + 10 : t;
+    if (g) {
+      const c = /* @__PURE__ */ new Date(), u = new Date(c);
+      u.setDate(u.getDate() + g);
+      const b = u.getFullYear();
+      n = Math.min(n, b);
+    }
+    n = Math.max(n, e);
+    const d = n - a + 1;
+    return Array.from({
+      length: d
+    }, (c, u) => ({
+      value: a + u,
+      label: (a + u).toString()
+    })).filter((c) => {
+      if (c.value === e)
+        return !0;
+      if (!F && c.value > t)
+        return !1;
+      if (g) {
+        const u = /* @__PURE__ */ new Date(), b = new Date(u);
+        return b.setDate(b.getDate() + g), c.value <= b.getFullYear();
+      }
+      return !0;
+    });
+  }, be = () => {
+    const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
+    e.setHours(0, 0, 0, 0), t.setHours(23, 59, 59, 999), M({
+      startDate: e,
+      endDate: t
+    });
+  }, k = (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;
+  }, ve = (t) => {
+    const e = /* @__PURE__ */ new Date();
+    let a = /* @__PURE__ */ new Date(), n = /* @__PURE__ */ new Date();
+    switch (t) {
+      case "Today":
+        a = k(e), n = E(e);
+        break;
+      case "Yesterday":
+        a = k(new Date(e.setDate(e.getDate() - 1))), n = E(new Date(e));
+        break;
+      case "This Week":
+        const d = new Date(e.setDate(e.getDate() - e.getDay()));
+        a = k(d), n = E(/* @__PURE__ */ new Date());
+        break;
+      case "Last Week":
+        const c = new Date(e.setDate(e.getDate() - e.getDay() - 7)), u = new Date(e.setDate(c.getDate() + 6));
+        a = k(c), n = E(u);
+        break;
+      case "This Month":
+        a = k(new Date(e.getFullYear(), e.getMonth(), 1)), n = E(/* @__PURE__ */ new Date());
+        break;
+      case "Last Month":
+        a = k(new Date(e.getFullYear(), e.getMonth() - 1, 1)), n = E(new Date(e.getFullYear(), e.getMonth(), 0));
+        break;
+    }
+    M({
+      startDate: a,
+      endDate: n
+    });
+  }, we = () => /* @__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"
+  }, Te.map((t) => /* @__PURE__ */ r.createElement(z, {
+    key: t,
+    label: t,
+    type: "link",
+    onClick: () => ve(t)
+  })))), ye = () => {
+    const {
+      startDate: t = null,
+      endDate: e = null
+    } = l;
+    if (t && e) {
+      R({
+        startDate: t,
+        endDate: e
+      });
+      return;
+    }
+    if (t || e) {
+      const a = t || e;
+      R({
+        startDate: a,
+        endDate: a
+      });
+    }
+  }, U = (t, e) => {
+    const a = t.getFullYear(), n = t.getMonth(), d = ue(a, n), c = (/* @__PURE__ */ new Date()).getFullYear(), u = he(c, a), b = new Date(a, n, 1).toLocaleString("en-US", {
+      month: "long",
+      year: "numeric"
+    }), ke = e ? ce : ie, X = `calendar-instructions-${e ? "left" : "right"}`, Ee = P ? "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.", Me = le({
+      isLeftCalendar: e,
+      isDateDisabled: I,
+      handleDateClick: De
+    }), Z = [];
+    for (let o = 0; o < d.length; o += 7) {
+      const s = d.slice(o, o + 7);
+      for (; s.length < 7; ) s.push(null);
+      Z.push(s);
+    }
+    const $ = /* @__PURE__ */ new Date(), xe = A && t.getMonth() === $.getMonth() && t.getFullYear() === $.getFullYear(), Ne = !F && n === $.getMonth() && a === $.getFullYear() || g !== void 0 && (() => {
+      const o = new Date($);
+      return o.setDate(o.getDate() + g), 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 (A) {
+          const s = /* @__PURE__ */ new Date();
+          if (s.setHours(0, 0, 0, 0), o < s && o.getMonth() !== s.getMonth())
+            return;
+        }
+        N(o, e);
+      },
+      automationId: `${y}-previous-month`,
+      ariaLabel: h ? "Previous month" : e ? "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[n],
+      selectBy: "label",
+      optionsUniqueBy: "value",
+      displaySelected: !0,
+      label: h ? "Month" : e ? "Start month" : "End month",
+      firstOptionAsHeading: !0,
+      onOptionClick: (o) => {
+        const s = new Date(t);
+        s.setMonth(q.findIndex((i) => i.value === o.value)), N(s, e);
+      },
+      className: "w-[124px] dropdown-option-container"
+    }), /* @__PURE__ */ r.createElement(te, {
+      type: "select",
+      dropDownOptions: u,
+      defaultSelectedValue: u.find((o) => o.value === a),
+      selectBy: "label",
+      optionsUniqueBy: "value",
+      displaySelected: !0,
+      label: h ? "Year" : e ? "Start year" : "End year",
+      firstOptionAsHeading: !0,
+      onOptionClick: (o) => {
+        const s = new Date(t);
+        s.setFullYear(o.value), N(s, e);
+      },
+      className: "w-[104px] dropdown-option-container"
+    })), /* @__PURE__ */ r.createElement(_, {
+      name: "chevron",
+      rotation: "270",
+      size: 16,
+      disabled: Ne,
+      onClick: () => {
+        const o = K(t, !0);
+        if (g !== void 0) {
+          const s = /* @__PURE__ */ new Date(), i = new Date(s);
+          if (i.setDate(i.getDate() + g), o > i)
+            return;
+        }
+        N(o, e);
+      },
+      automationId: `${y}-next-month`,
+      ariaLabel: h ? "Next month" : e ? "Next month of starting date" : "Next month of end date"
+    })), /* @__PURE__ */ r.createElement("span", {
+      id: X,
+      className: "sr-only"
+    }, Ee), /* @__PURE__ */ r.createElement("div", T({}, ke({
+      ariaLabel: b,
+      ariaDescribedBy: X
+    }), {
+      className: "mt-3"
+    }), /* @__PURE__ */ r.createElement("div", {
+      role: "row",
+      className: "grid grid-cols-7 gap-2"
+    }, Oe.map((o, s) => /* @__PURE__ */ r.createElement("abbr", {
+      key: `${o}-${s}`,
+      role: "columnheader",
+      title: Se[s],
+      className: "datepicker-weekdays"
+    }, o))), Z.map((o, s) => /* @__PURE__ */ r.createElement("div", {
+      key: s,
+      role: "row",
+      className: "grid grid-cols-7 gap-2"
+    }, o.map((i, $e) => {
+      if (!i)
+        return /* @__PURE__ */ r.createElement("div", {
+          key: `empty-${s}-${$e}`,
+          role: "gridcell",
+          "aria-hidden": "true",
+          className: "h-10 w-10"
+        });
+      const ee = Pe(i), D = me(i), f = fe(i), H = pe(i), B = !D && !f && de(i), L = ge(i), Y = I(i), {
+        ref: He,
+        ...Ye
+      } = Me({
+        cellId: ee,
+        cellDate: i,
+        disabled: Y,
+        ariaLabel: Ce(i, D, f, H, P, B),
+        ariaCurrent: L ? "date" : void 0,
+        ariaDisabled: Y || void 0
+      });
+      return /* @__PURE__ */ r.createElement("div", {
+        key: ee,
+        role: "gridcell",
+        "aria-selected": D || f || void 0,
+        className: "relative h-10 w-10"
+      }, /* @__PURE__ */ r.createElement("button", T({
+        type: "button"
+      }, Ye, {
+        ref: He,
+        className: `
+                        datepicker-cell-button
+                        h-full w-full flex items-center justify-center
+                        rounded-md focus-outline transition-colors
+                        ${Y ? "cursor-not-allowed text-[var(--color-gray-600)] hover:bg-transparent" : "cursor-pointer"}
+                        ${H ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
+                        ${!H && D ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
+                        ${!H && f ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
+                        ${!D && !f && B ? "bg-[var(--color-blue-100)] text-[var(--color-blue-600)] outline outline-1 outline-[var(--color-blue-500)]" : ""}
+                        ${!D && !f && !B && !Y ? "hover:bg-[var(--color-blue-100)] hover:outline hover:outline-1 hover:outline-[var(--color-blue-500)]" : ""}
+                        ${L && !D && !f ? "text-[var(--color-blue-500)] bg-[var(--color-blue-100)] outline outline-1 outline-[var(--color-blue-500)]" : ""}
+                        ${!Y && !D && !f && !L ? "text-[var(--color-blue-500)]" : ""}
+                      `,
+        "data-automation-id": `${y}-date-${i.getDate()}`
+      }), i.getDate()), !H && (D || f) && /* @__PURE__ */ r.createElement("div", {
+        "aria-hidden": "true",
+        className: `absolute top-0 bottom-0 ${D ? "right-[-8px]" : "left-[-8px]"} w-[8px]
+                        bg-[var(--color-blue-100)] -z-10`
+      }));
+    })))));
   };
-  return /* @__PURE__ */ t.createElement("div", {
-    className: `se-design-shimmer-loader ${d}`,
-    style: p
-  }, e.map((c, o) => c.type === "container" ? /* @__PURE__ */ t.createElement(y, {
-    key: o,
-    container: c,
-    animationDuration: s,
-    baseColor: m,
-    highlightColor: i
-  }) : /* @__PURE__ */ t.createElement(n, {
-    key: o,
-    element: c,
-    animationDuration: s,
-    baseColor: m,
-    highlightColor: i
+  return /* @__PURE__ */ r.createElement("div", {
+    className: `se-design-datepicker-container flex flex-col bg-[var(--color-white)] rounded-md shadow-md w-max max-w-full ${re}`
+  }, 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"
+  }, p), j && /* @__PURE__ */ r.createElement(_, {
+    name: "close",
+    size: 16,
+    onClick: j,
+    className: "cursor-pointer",
+    automationId: `${y}-close`,
+    ariaLabel: "Close date picker"
+  })), /* @__PURE__ */ r.createElement("div", {
+    className: "se-design-datepicker-content flex"
+  }, ne && we(), /* @__PURE__ */ r.createElement("div", {
+    className: "flex"
+  }, h ? U(x, !0) : /* @__PURE__ */ r.createElement(r.Fragment, null, U(x, !0), /* @__PURE__ */ r.createElement("div", {
+    className: "h-full w-[1px] border-r border-[var(--color-gray-200)]",
+    "aria-hidden": "true"
+  }), U(C, !1)))), !P && /* @__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: be,
+    "data-automation-id": `${y}-clear-button`
+  }), /* @__PURE__ */ r.createElement(z, {
+    label: J?.apply || "Apply",
+    type: "primary",
+    onClick: ye,
+    "data-automation-id": `${y}-apply-button`
   })));
 };
 export {
-  l as ShimmerLoader,
-  l as default
+  ze as DatePicker
 };
 //# sourceMappingURL=index55.js.map