se-design 1.0.90-dev.0 → 1.0.90

package/dist/index51.js

@@ -1,464 +1,89 @@
-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 "./index245.js";
+import t from "react";
+import { Icon as u } from "./index6.js";
+import { Popover as v } from "./index19.js";
+import { MenuList as E } from "./index18.js";
 /* empty css         */
-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]);
+function c() {
+  return c = Object.assign ? Object.assign.bind() : function(a) {
+    for (var n = 1; n < arguments.length; n++) {
+      var i = arguments[n];
+      for (var o in i) ({}).hasOwnProperty.call(i, o) && (a[o] = i[o]);
     }
-    return p;
-  }, T.apply(null, arguments);
+    return a;
+  }, c.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 s = {
+  container: "se-design-breadcrumbs flex items-center",
+  itemLabel: "se-design-breadcrumbs-item-label inline-flex items-center w-fit"
+}, P = ({
+  crumbs: a,
+  onCrumbClick: n,
+  className: i = "",
+  ariaLabel: o = "Breadcrumb",
+  headingLevel: g = 1
 }) => {
-  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;
+  if (a?.length === 1) {
+    const e = `h${g}`;
+    return /* @__PURE__ */ t.createElement("div", {
+      className: `${s.container} ${i}`,
+      "data-automation-id": "breadcrumbs-container"
+    }, /* @__PURE__ */ t.createElement(e, {
+      className: `${s.itemLabel} single-crumb`
+    }, a[0].label));
+  }
+  const m = a?.length > 3, d = m ? a?.slice(-2) : a, b = m ? a?.slice(0, -2) : [], l = (e) => e === d?.length - 1, f = (e) => l(e) ? `${s.itemLabel} highlighted-crumb` : `${s.itemLabel} unhighlighted-crumb`;
+  return /* @__PURE__ */ t.createElement("nav", {
+    className: `${s.container} ${i}`,
+    "aria-label": o,
+    "data-automation-id": "breadcrumbs-container"
+  }, b?.length > 0 && /* @__PURE__ */ t.createElement(v, {
+    className: "se-design-overflow-breadcrumbs",
+    position: "bottom-left",
+    noBorder: !0,
+    ariaLabel: "Show more breadcrumbs",
+    renderPopoverSrcElement: ({
+      displayPopover: e
+    }) => /* @__PURE__ */ t.createElement("div", {
+      className: `overflow-breadcrumbs-src-element px-1.5 py-1.5 rounded-md hover:cursor-pointer ${e ? "bg-[var(--color-blue-200)]" : ""}`,
+      "data-automation-id": "breadcrumbs-kebab-menu"
+    }, /* @__PURE__ */ t.createElement(u, {
+      name: "kebab-menu"
+    })),
+    renderPopoverContents: ({
+      closePopoverCb: e
+    }) => /* @__PURE__ */ t.createElement(E, {
+      items: b.map((r) => ({
+        id: String(r?.id),
+        label: r?.label,
+        onClick: () => {
+          n?.(r), e();
         }
-        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(_, {
+      }))
+    })
+  }), /* @__PURE__ */ t.createElement("ol", {
+    className: "se-design-breadcrumbs-list inline-flex items-center"
+  }, d?.map((e, r) => {
+    const p = l(r) ? "span" : "a";
+    return /* @__PURE__ */ t.createElement("li", {
+      key: e?.id,
+      className: "se-design-breadcrumbs-item inline-flex items-center w-fit text-xl"
+    }, (r > 0 || m) && /* @__PURE__ */ t.createElement(u, {
       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__ */ 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`
+      rotation: "270"
+    }), /* @__PURE__ */ t.createElement(p, c({}, l(r) ? {
+      "aria-current": "page"
+    } : {
+      href: e.href ?? "#",
+      onClick: (h) => {
+        e.href || h.preventDefault(), n?.(e);
+      }
+    }, {
+      className: `${f(r)}${l(r) ? "" : " cursor-pointer focus-outline"}`,
+      "data-automation-id": e?.automationId || `breadcrumbs-item-${r}`
+    }), e?.label));
   })));
 };
 export {
-  ze as DatePicker
+  P as BreadCrumbs
 };
 //# sourceMappingURL=index51.js.map