@mx-cartographer/experiences 8.0.4 → 9.0.0-alpha.al1

package/dist/{GlobalAccountFilter-B73Pw1hJ.mjs → GlobalAccountFilter-C0oMFGr7.mjs}

@@ -171,7 +171,7 @@ const N = I(
     }, i = async () => {
       await m(n), f(null);
     }, o = c.account_filter, r = !!h, l = p.length === 0;
-    return /* @__PURE__ */ d(j, { m: 4, sx: { ...u }, children: [
+    return /* @__PURE__ */ d(j, { sx: { ...u }, children: [
       x ? /* @__PURE__ */ e(
         C,
         {

package/dist/WidgetContainer-BOehD4AH.mjs

@@ -0,0 +1,453 @@
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import R from "react";
+import { observer as re } from "mobx-react-lite";
+import z from "@mui/material/Button";
+import se from "@mui/material/Card";
+import le from "@mui/material/CardContent";
+import de from "@mui/material/Divider";
+import K from "@mui/material/IconButton";
+import me from "@mui/material/Paper";
+import E from "@mui/material/Stack";
+import { ChevronLeft as ce } from "@mxenabled/mx-icons";
+import { Icon as D, Text as F, DateRangePicker as J } from "@mxenabled/mxui";
+import { u as ue } from "./useDimensions-CeDR9V8N.mjs";
+import { G as ge } from "./GlobalAccountFilter-C0oMFGr7.mjs";
+import { b as oe, u as ne, g as pe, a as he, W as fe } from "./hooks-BxkfR-Ff.mjs";
+import { addMonths as Q } from "date-fns/addMonths";
+import { addDays as be } from "date-fns/addDays";
+import { addYears as Z } from "date-fns/addYears";
+import { differenceInCalendarDays as Re } from "date-fns/differenceInCalendarDays";
+import { endOfDay as _e } from "date-fns/endOfDay";
+import { endOfMonth as w } from "date-fns/endOfMonth";
+import { endOfToday as ee } from "date-fns/endOfToday";
+import { endOfYear as Ce } from "date-fns/endOfYear";
+import { startOfMonth as De } from "date-fns/startOfMonth";
+import { startOfToday as ke } from "date-fns/startOfToday";
+import { startOfYear as xe } from "date-fns/startOfYear";
+import { subMonths as V } from "date-fns/subMonths";
+import { subDays as ye } from "date-fns/subDays";
+import { subYears as te } from "date-fns/subYears";
+import ae from "@mui/material/Box";
+import Te from "@mui/material/ButtonGroup";
+import ve from "@mui/material/Tab";
+import Pe from "@mui/material/Tabs";
+import Me from "@mui/material/ToggleButton";
+import Se from "@mui/material/ToggleButtonGroup";
+import Le from "@mui/material/styles/useTheme";
+import { u as Ye } from "./useAriaLive-MkYebyUR.mjs";
+import { D as Ee } from "./Dialog-Ck34yr-d.mjs";
+import { D as Ae } from "./Drawer-Bbe4AMB1.mjs";
+import { u as ie } from "./useScreenSize-B6JyS_Lj.mjs";
+import { f as T, D as v } from "./DateFormats-BMpMrZpW.mjs";
+import { L as Oe } from "./Loader-D3rjKx72.mjs";
+import { A as Ne } from "./Analytics-BYItVAe-.mjs";
+const Be = () => {
+  const { isDesktop: o, isMobile: l, isSmallTablet: a, isTablet: d } = ie(), r = 24;
+  let n = 48, g = 32, m = 0, k = "h1";
+  const c = l || a;
+  let u = !1;
+  return d && !a ? (n = 24, g = 24, k = "h2") : c && (n = 8, g = 10, m = 10, k = "h3", u = !0), {
+    actionsFlex: c ? 0 : 1,
+    containerSquareCorners: u,
+    headerHeadingLevel: k,
+    headerPaddingBottom: m,
+    headerPaddingTop: g,
+    headerPaddingX: n,
+    iconSize: r,
+    isCompact: c,
+    isDesktop: o,
+    slotPaddingBottom: c ? 12 : 0
+  };
+}, Ie = ({
+  calendarActions: o,
+  color: l = "primary",
+  copy: a,
+  range: d = [De(ke()), w(ee())],
+  shouldShrinkToIcon: r = !0,
+  variant: n = "outlined"
+}) => {
+  const g = Le(), { isMobile: m } = ie(), { announce: k, ariaLive: c } = Ye(), [u, L] = R.useState(d), [i, H] = R.useState(a.dateRangePickerCopy.dateRangeThisMonth), [_, A] = R.useState(u), [Y, P] = R.useState(!1), [W, G] = R.useState(!0), [M, j] = R.useState(6), O = {
+    buttons: [
+      { ariaLabel: "3 Months", label: "3M", value: 3 },
+      { ariaLabel: "6 Months", label: "6M", value: 6 },
+      { ariaLabel: "9 Months", label: "9M", value: 9 },
+      { ariaLabel: "1 Year", label: "1Y", value: 12 }
+    ],
+    tabs: [
+      { label: "3 Months", value: 3 },
+      { label: "6 Months", value: 6 },
+      { label: "9 Months", value: 9 },
+      { label: "1 Year", value: 12 }
+    ]
+  };
+  R.useEffect(() => {
+    L(d), A(d);
+  }, [d]), R.useEffect(() => {
+    (n === "timeframebuttons" || n === "timeframetabs") && o.onRangeChanged($());
+  }, [M]);
+  const $ = () => {
+    const t = w(ee());
+    return [w(V(t, M)), t];
+  }, N = (t) => {
+    const [s, p] = u, f = t === "previous";
+    let b;
+    if (i === a.dateRangePickerCopy.dateRangeThisMonth || i === a.dateRangePickerCopy.dateRangeLastMonth)
+      b = [
+        f ? V(s, 1) : Q(s, 1),
+        w(f ? V(p, 1) : Q(p, 1))
+      ];
+    else if (i === a.dateRangePickerCopy.dateRangeYTD || i === a.dateRangePickerCopy.dateRangeLastYear) {
+      const y = xe(s), C = Ce(s);
+      b = [
+        f ? te(y, 1) : Z(y, 1),
+        f ? te(C, 1) : Z(C, 1)
+      ];
+    } else {
+      const y = Re(p, s), C = f ? ye : be;
+      b = [C(s, y), C(p, y)];
+    }
+    L(b), o.onRangeChanged(b);
+  }, S = () => {
+    L(_), G(
+      i === a.dateRangePickerCopy.dateRangeThisMonth || i === a.dateRangePickerCopy.dateRangeLastMonth
+    ), o.onRangeChanged(_);
+  }, x = (t, s) => {
+    t[1] = t[1] ?? t[0];
+    const p = [t[0], t[1] ? _e(t[1]) : t[1]], f = T(p[0], v.MONTH_DAY_YEAR), b = T(p[1], v.MONTH_DAY_YEAR);
+    A(p), H(s), k(`${a.dateRangePickerCopy}: ${f} - ${b}`);
+  }, B = (t) => {
+    j(t);
+  };
+  return /* @__PURE__ */ h(ae, { className: "mx-cmn-date-range-selector", m: 4, children: [
+    /* @__PURE__ */ h(
+      ae,
+      {
+        sx: {
+          [g.breakpoints.down("sm")]: {
+            display: r ? "none" : "flex",
+            justifyContent: "center"
+          },
+          [g.breakpoints.up("sm")]: { display: "inline-flex" }
+        },
+        children: [
+          n === "readonly" && /* @__PURE__ */ h(E, { alignItems: "center", direction: "row", gap: 8, children: [
+            /* @__PURE__ */ e(D, { name: "calendar_month", size: 24 }),
+            /* @__PURE__ */ e(F, { bold: !0, children: T(_[0], v.MONTH_DAY) }),
+            /* @__PURE__ */ e(D, { name: "remove" }),
+            /* @__PURE__ */ e(F, { bold: !0, children: T(_[1], v.MONTH_DAY_YEAR) })
+          ] }),
+          n !== "readonly" && n !== "timeframebuttons" && n !== "timeframetabs" && /* @__PURE__ */ h(
+            Te,
+            {
+              color: l,
+              sx: {
+                "& .MuiButtonGroup-grouped": {
+                  padding: m ? 0 : 12
+                },
+                "& .MuiButtonGroup-middleButton": {
+                  px: 24
+                },
+                height: 44
+              },
+              variant: n,
+              children: [
+                /* @__PURE__ */ e(
+                  z,
+                  {
+                    "aria-disabled": o.shouldDisablePrevious,
+                    "aria-label": a.dateRangePreviousAria,
+                    color: o.shouldDisablePrevious ? "secondary" : "primary",
+                    onClick: () => o.shouldDisablePrevious ? null : N("previous"),
+                    children: /* @__PURE__ */ e(D, { name: "chevron_left", size: 20 })
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  z,
+                  {
+                    "aria-disabled": o.shouldDisablePicker,
+                    color: l,
+                    onClick: () => o.shouldDisablePicker ? null : P(!0),
+                    startIcon: /* @__PURE__ */ e(D, { name: "calendar_month", size: 20 }),
+                    sx: {
+                      p: m ? 0 : 8
+                    },
+                    children: W ? T(u[0], v.MONTH_YEAR) : /* @__PURE__ */ h("span", { children: [
+                      T(u[0], v.MONTH_DAY_YEAR),
+                      " -",
+                      " ",
+                      T(u[1], v.MONTH_DAY_YEAR)
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  z,
+                  {
+                    "aria-disabled": o.shouldDisableNext,
+                    "aria-label": a.dateRangeNextAria,
+                    color: o.shouldDisableNext ? "secondary" : "primary",
+                    onClick: () => o.shouldDisableNext ? null : N("next"),
+                    children: /* @__PURE__ */ e(D, { name: "chevron_right", size: 20 })
+                  }
+                )
+              ]
+            }
+          ),
+          n === "timeframebuttons" && /* @__PURE__ */ e(
+            Se,
+            {
+              "aria-label": a.dateRangeEditTitle,
+              color: l,
+              exclusive: !0,
+              orientation: "horizontal",
+              value: M,
+              children: O.buttons.map((t) => /* @__PURE__ */ e(
+                Me,
+                {
+                  "aria-label": t.ariaLabel,
+                  onClick: () => B(t.value),
+                  sx: { width: 56 },
+                  value: t.value,
+                  children: t.label
+                },
+                t.label
+              ))
+            }
+          ),
+          n === "timeframetabs" && /* @__PURE__ */ e(
+            Pe,
+            {
+              indicatorColor: "primary",
+              onChange: (t, s) => B(s),
+              textColor: "primary",
+              value: M,
+              variant: "fullWidth",
+              children: O.tabs.map((t) => /* @__PURE__ */ e(
+                ve,
+                {
+                  label: /* @__PURE__ */ e(F, { bold: !0, variant: "body1", children: t.label }),
+                  sx: { minWidth: 80 },
+                  value: t.value
+                },
+                t.label
+              ))
+            }
+          )
+        ]
+      }
+    ),
+    Y && m && /* @__PURE__ */ h(
+      Ae,
+      {
+        ariaLabelClose: a.dateRangeCloseAria,
+        isOpen: Y,
+        onClose: () => P(!1),
+        onPrimaryAction: () => {
+          S(), P(!1);
+        },
+        primaryText: a.dateRangeEditApply,
+        title: a.dateRangeEditTitle,
+        children: [
+          c,
+          /* @__PURE__ */ e(
+            J,
+            {
+              copy: a.dateRangePickerCopy,
+              dateRange: _,
+              onRangeChanged: x,
+              selectedShortcut: i,
+              sx: { p: 0 }
+            }
+          )
+        ]
+      }
+    ),
+    Y && !m && /* @__PURE__ */ h(
+      Ee,
+      {
+        copy: { title: a.dateRangeEditTitle },
+        isOpen: !0,
+        onClose: () => P(!1),
+        onPrimaryAction: () => S(),
+        primaryText: a.dateRangeEditApply,
+        sx: {
+          "& .MuiDialogContent-root": {
+            padding: 0
+          }
+        },
+        children: [
+          c,
+          /* @__PURE__ */ e(
+            J,
+            {
+              copy: a.dateRangePickerCopy,
+              dateRange: _,
+              onRangeChanged: x,
+              selectedShortcut: i,
+              sx: {
+                pt: 0,
+                "& .MuiPickersLayout-toolbar": {
+                  gridColumn: "1/4"
+                }
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}, we = Ie, ze = re(
+  ({ calendarActions: o, dateRange: l, dateRangeVariant: a }) => {
+    const { displayedDateRange: d } = oe(), { common: r } = ne(), n = {
+      dateRangePickerCopy: {
+        dateRangeFrom: r.date_range_picker.from,
+        dateRangeTo: r.date_range_picker.to,
+        dateRangeCustom: r.date_range_picker.custom,
+        dateRangeSelectARange: r.date_range_picker.select_range,
+        dateRangeThisMonth: r.date_range_picker.this_month,
+        dateRangeLastMonth: r.date_range_picker.last_month,
+        dateRangeLast30Days: r.date_range_picker.last_30_days,
+        dateRangeLast90Days: r.date_range_picker.last_90_days,
+        dateRangeYTD: r.date_range_picker.ytd,
+        dateRangeLastYear: r.date_range_picker.last_year,
+        dateRangeSelect: r.date_range_picker.select
+      },
+      dateRangeEditApply: r.date_range_picker.edit_apply,
+      dateRangeEditTitle: r.date_range_picker.edit_title,
+      dateRangeNextAria: r.date_range_picker.next_aria,
+      dateRangePreviousAria: r.date_range_picker.previous_aria
+    }, g = l ? l.start : d.start, m = l ? l.end : d.end;
+    return /* @__PURE__ */ e(
+      we,
+      {
+        calendarActions: o,
+        copy: n,
+        range: [g, m],
+        shouldShrinkToIcon: !1,
+        variant: a
+      }
+    );
+  }
+), St = re(
+  ({
+    actions: o,
+    allowedAccountTypes: l,
+    calendarActions: a,
+    children: d,
+    className: r = "mx-cmn-widget",
+    dateRange: n,
+    dateRangeVariant: g,
+    hasDivider: m = !1,
+    onAccountsFilterClick: k,
+    onBackClick: c,
+    onMenuClick: u,
+    showAccountFilter: L = !0,
+    slotComponent: i,
+    sx: H = {},
+    title: _ = ""
+  }) => {
+    const [A, { height: Y, width: P }] = ue(), { onEvent: W } = pe(), {
+      actionsFlex: G,
+      containerSquareCorners: M,
+      headerHeadingLevel: j,
+      headerPaddingBottom: O,
+      headerPaddingTop: $,
+      headerPaddingX: N,
+      iconSize: S,
+      isCompact: x,
+      isDesktop: B,
+      slotPaddingBottom: t
+    } = Be(), { isCopyLoaded: s } = oe(), { common: p } = ne(), {
+      config: { display_widget_headings: f }
+    } = he(), b = () => {
+      c && (c(), W(Ne.WIDGET_BACK_CLICK));
+    };
+    if (!s)
+      return /* @__PURE__ */ e(Oe, {});
+    const y = () => x && u ? /* @__PURE__ */ e(K, { color: "primary", onClick: u, sx: { p: 10 }, children: /* @__PURE__ */ e(D, { name: "menu_open", size: S, sx: { transform: "rotate(180deg)" } }) }) : c ? /* @__PURE__ */ e(
+      K,
+      {
+        "aria-label": p.back_to_dashboard,
+        color: "primary",
+        onClick: b,
+        sx: { p: 10 },
+        children: /* @__PURE__ */ e(ce, { size: 24 })
+      }
+    ) : null, C = a && /* @__PURE__ */ e(E, { alignItems: "center", sx: { pb: t, flex: 1, flexShrink: 0 }, children: /* @__PURE__ */ e(
+      ze,
+      {
+        calendarActions: a,
+        dateRange: n,
+        dateRangeVariant: g
+      }
+    ) });
+    return /* @__PURE__ */ e(
+      me,
+      {
+        className: r,
+        elevation: 1,
+        square: M,
+        sx: { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, ...H },
+        children: /* @__PURE__ */ h(se, { children: [
+          /* @__PURE__ */ h(
+            E,
+            {
+              alignItems: "center",
+              alignSelf: "stretch",
+              direction: "row",
+              justifyContent: "space-between",
+              sx: {
+                pb: O,
+                pt: $,
+                px: N
+              },
+              children: [
+                y(),
+                /* @__PURE__ */ e(E, { alignItems: "flex-start", minWidth: 0, sx: { flex: 1 }, children: f && /* @__PURE__ */ e(F, { sx: { width: "100%" }, truncate: !0, variant: j, children: _ }) }),
+                !x && (i || C),
+                /* @__PURE__ */ h(
+                  E,
+                  {
+                    alignItems: "center",
+                    direction: "row",
+                    justifyContent: "flex-end",
+                    sx: { flex: G, flexShrink: 0 },
+                    children: [
+                      L && /* @__PURE__ */ e(
+                        ge,
+                        {
+                          allowedAccountTypes: l,
+                          onAccountFilterClick: k
+                        }
+                      ),
+                      o?.map((q) => {
+                        if (R.isValidElement(q)) return q;
+                        const { iconName: I, onClick: X, label: U } = q;
+                        return B ? /* @__PURE__ */ e(
+                          z,
+                          {
+                            onClick: X,
+                            startIcon: /* @__PURE__ */ e(D, { name: I, size: S }),
+                            children: U
+                          },
+                          I
+                        ) : /* @__PURE__ */ e(K, { "aria-label": U, color: "primary", onClick: X, children: /* @__PURE__ */ e(D, { name: I, size: S }) }, I);
+                      })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          x && (i || C),
+          x && m && /* @__PURE__ */ e(de, {}),
+          /* @__PURE__ */ e(le, { ref: A, children: /* @__PURE__ */ e(fe, { availableHeight: Y, availableWidth: P, children: d }) })
+        ] })
+      }
+    );
+  }
+);
+export {
+  we as D,
+  St as W,
+  Be as u
+};