@mx-cartographer/experiences 6.26.18-alpha.mega2 → 6.26.18-alpha.mega3

package/dist/common/components/ResponsiveButton/index.es.js

@@ -0,0 +1,45 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import p from "react";
+import d from "@mui/material/Button";
+import a from "@mui/material/IconButton";
+import c from "@mui/material/Tooltip";
+import f from "@mui/material/styles/useTheme";
+const u = ({
+  icon: e,
+  label: i,
+  onClick: o,
+  placement: s = "bottom",
+  tooltipText: n,
+  variant: l = "text"
+}) => {
+  const r = f();
+  return /* @__PURE__ */ m(p.Fragment, { children: [
+    /* @__PURE__ */ t(
+      d,
+      {
+        onClick: o,
+        startIcon: e,
+        sx: {
+          [r.breakpoints.down("lg")]: { display: "none" },
+          [r.breakpoints.up("lg")]: { display: "inline-flex" }
+        },
+        title: n,
+        variant: l,
+        children: i
+      }
+    ),
+    /* @__PURE__ */ t(
+      c,
+      {
+        describeChild: !0,
+        placement: s,
+        sx: { display: { xs: "inline-flex", lg: "none" } },
+        title: n,
+        children: /* @__PURE__ */ t(a, { onClick: o, children: e })
+      }
+    )
+  ] });
+}, R = u;
+export {
+  R as default
+};

package/dist/common/components/SearchBox/index.es.js

@@ -0,0 +1,42 @@
+import { jsx as e } from "react/jsx-runtime";
+import { observer as p } from "mobx-react-lite";
+import d from "@mui/material/Box";
+import h from "@mui/material/IconButton";
+import a from "@mui/material/InputAdornment";
+import { useTokens as u, TextField as x, Icon as c } from "@mxenabled/mxui";
+const b = ({
+  ariaLabel: t = "Search",
+  cancelAriaLabel: s = "Cancel Search",
+  onChange: r,
+  placeholder: i = "Search",
+  searchValue: o
+}) => {
+  const n = u(), m = /* @__PURE__ */ e(
+    h,
+    {
+      "aria-label": s,
+      className: "mx-cat-cancel-search-button",
+      color: "primary",
+      onClick: () => r(""),
+      children: /* @__PURE__ */ e(c, { name: "cancel", size: 24 })
+    }
+  );
+  return /* @__PURE__ */ e(d, { className: "mx-cmn-search-box", px: n.Spacing.Large, py: n.Spacing.Medium, children: /* @__PURE__ */ e(
+    x,
+    {
+      InputProps: {
+        startAdornment: /* @__PURE__ */ e(a, { position: "start", children: /* @__PURE__ */ e(c, { color: "disabled", name: "search", size: 26 }) }),
+        endAdornment: /* @__PURE__ */ e(a, { position: "end", sx: { p: 0 }, children: o ? m : null })
+      },
+      "aria-label": t,
+      name: "search",
+      onChange: (l) => r(l.target.value),
+      placeholder: i,
+      sx: { bgcolor: "background.paper", width: "100%" },
+      value: o
+    }
+  ) });
+}, v = p(b);
+export {
+  v as default
+};

package/dist/common/components/Select/index.es.js

@@ -0,0 +1,25 @@
+import { jsx as r } from "react/jsx-runtime";
+import o from "@mui/material/MenuItem";
+import m from "@mui/material/TextField";
+import { ExpandMore as i } from "@mxenabled/mx-icons";
+const h = ({ label: t, onChange: n, options: a, value: l }) => /* @__PURE__ */ r(
+  m,
+  {
+    InputLabelProps: { shrink: !0 },
+    SelectProps: {
+      IconComponent: (e) => /* @__PURE__ */ r(i, { size: 20, sx: { mr: 4 }, ...e })
+    },
+    defaultValue: 0,
+    label: t,
+    onChange: (e) => {
+      n(Number(e.target.value));
+    },
+    select: !0,
+    value: l,
+    variant: "outlined",
+    children: a.map((e) => /* @__PURE__ */ r(o, { value: e.id, children: e.label }, e.id))
+  }
+);
+export {
+  h as Select
+};

package/dist/common/components/SelectionBox/index.es.js

@@ -0,0 +1,48 @@
+import { jsx as e } from "react/jsx-runtime";
+import m from "@mui/material/Box";
+import n from "@mui/material/FormControlLabel";
+import s from "@mui/material/Radio";
+import d from "@mui/material/styles/useTheme";
+import b from "@mui/material/Tooltip";
+const x = ({
+  checked: t = !1,
+  label: r,
+  sx: l = {},
+  tooltip: i = "",
+  value: a
+}) => {
+  const o = d(), p = o.palette.mode === "light" ? o.palette.grey[400] : o.palette.grey[700], c = t ? o.palette.action.active : p;
+  return /* @__PURE__ */ e(
+    m,
+    {
+      bgcolor: "background.paper",
+      border: `${t ? 3 : 1}px solid`,
+      borderColor: c,
+      borderRadius: 2,
+      mt: -2,
+      mx: 8,
+      pr: 8,
+      py: 4,
+      sx: { "&:hover": { borderColor: o.palette.action.active }, ...l },
+      children: /* @__PURE__ */ e(b, { title: i, children: /* @__PURE__ */ e(
+        n,
+        {
+          control: /* @__PURE__ */ e(
+            s,
+            {
+              disableRipple: !0,
+              sx: { "&.Mui-checked": { color: o.palette.action.active } }
+            }
+          ),
+          label: r,
+          labelPlacement: "start",
+          sx: { ml: 0, pl: 8 },
+          value: a
+        }
+      ) })
+    }
+  );
+}, S = x;
+export {
+  S as default
+};

package/dist/common/components/SubheaderRow/index.es.js

@@ -0,0 +1,10 @@
+import { jsx as o } from "react/jsx-runtime";
+import l from "@mui/material/Box";
+import { Text as a } from "@mxenabled/mxui";
+const p = ({
+  bgcolor: r = "background.default",
+  children: t
+}) => /* @__PURE__ */ o(l, { display: "inline-block", pb: 4, pl: 24, pt: 4, sx: { bgcolor: r, width: "100%" }, children: /* @__PURE__ */ o(a, { bold: !0, variant: "XSmall", children: t }) });
+export {
+  p as default
+};

package/dist/common/components/TabContentContainer/index.es.js

@@ -0,0 +1,21 @@
+import { jsx as e } from "react/jsx-runtime";
+const b = ({
+  children: o,
+  index: t,
+  name: a,
+  value: n,
+  ...r
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    "aria-labelledby": `${a}-tab-${t}`,
+    hidden: n !== t,
+    id: `${a}-tabpanel-${t}`,
+    role: "tabpanel",
+    ...r,
+    children: n === t && o
+  }
+), i = b;
+export {
+  i as default
+};

package/dist/common/components/WidgetContainer/index.es.js

@@ -0,0 +1,195 @@
+import { jsx as t, jsxs as _ } from "react/jsx-runtime";
+import v from "react";
+import { observer as $ } from "mobx-react-lite";
+import w from "@mui/material/Button";
+import q from "@mui/material/Box";
+import J from "@mui/material/Card";
+import O from "@mui/material/CardHeader";
+import Q from "@mui/material/CardContent";
+import T from "@mui/material/Divider";
+import f from "@mui/material/IconButton";
+import g from "@mui/material/Stack";
+import { Icon as l, H1 as X, H3 as Z } from "@mxenabled/mxui";
+import { useDimensions as ee } from "../../hooks/useDimensions/index.es.js";
+import te from "../Loader/index.es.js";
+import { useEvent as re, useGlobalUiStore as oe, useGlobalCopyStore as ae } from "../../context/hooks/index.es.js";
+import { useScreenSize as ne } from "../../hooks/useScreenSize/index.es.js";
+import z from "../daterangeselector/DateRangeSelector/index.es.js";
+import ie from "../accountfilter/AccountFilter/index.es.js";
+import ce from "../ConnectDrawer/index.es.js";
+import { WidgetContainerProvider as le } from "../../context/WidgetContainerProvider/index.es.js";
+import { ANALYTICS_EVENTS as se } from "../../constants/Analytics/index.es.js";
+const de = ({
+  accountOptions: h,
+  actions: C = [],
+  calendarActions: i,
+  children: I,
+  dateRange: s,
+  dateRangeVariant: y,
+  className: E = "mx-cmn-widget",
+  hasDivider: L = !1,
+  onBackClick: p,
+  onAccountsFilterClick: B,
+  showDividerAboveDateSelector: G = !0,
+  sx: W = {},
+  title: u = ""
+}) => {
+  const [x, k] = v.useState(!1), [H, { height: M, width: b }] = ee(), { onEvent: F } = re(), { isDesktop: o, isMobile: a, isTablet: n } = ne(b), { displayedDateRange: S, isCopyLoaded: N, selectedAccountGuids: j, setSelectedAccountGuids: P } = oe(), { common: e, connect: Y } = ae(), K = () => {
+    p && (p(), F(se.WIDGET_BACK_CLICK));
+  };
+  if (!N)
+    return /* @__PURE__ */ t(te, {});
+  const U = {
+    accountFilterOptionsCopy: {
+      accountTypeAccounts: e.account_filter.account_type_accounts,
+      cancelButton: e.cancel_button,
+      filterButton: e.filter_button,
+      filterButtonAria: e.account_filter.filter_button_generic_aria,
+      selectAllAccounts: e.account_filter.select_all_accounts,
+      toggleAccountTypeAccounts: e.account_filter.toggle_account_type_accounts,
+      unselectAllAccounts: e.account_filter.unselect_all_accounts,
+      zeroStateButton: e.account_filter.zero_state_button,
+      zeroStateDescription: e.account_filter.zero_state_description,
+      zeroStateTitle: e.account_filter.zero_state_title
+    },
+    title: e.account_filter.title
+  }, A = {
+    dateRangePickerCopy: {
+      dateRangeFrom: e.date_range_picker.from,
+      dateRangeTo: e.date_range_picker.to,
+      dateRangeCustom: e.date_range_picker.custom,
+      dateRangeSelectARange: e.date_range_picker.select_range,
+      dateRangeThisMonth: e.date_range_picker.this_month,
+      dateRangeLastMonth: e.date_range_picker.last_month,
+      dateRangeLast30Days: e.date_range_picker.last_30_days,
+      dateRangeLast90Days: e.date_range_picker.last_90_days,
+      dateRangeYTD: e.date_range_picker.ytd,
+      dateRangeLastYear: e.date_range_picker.last_year,
+      dateRangeSelect: e.date_range_picker.select
+    },
+    dateRangeEditApply: e.date_range_picker.edit_apply,
+    dateRangeEditTitle: e.date_range_picker.edit_title,
+    dateRangeNextAria: e.date_range_picker.next_aria,
+    dateRangePreviousAria: e.date_range_picker.previous_aria
+  }, R = s ? s.start : S.start, D = s ? s.end : S.end, V = C?.length > 1;
+  return /* @__PURE__ */ _(
+    J,
+    {
+      className: E,
+      sx: {
+        ...a && { px: 4 },
+        "& .mx-cmn-date-range-selector": {
+          ...(a || n) && { textAlign: "center" }
+        },
+        ...W
+      },
+      children: [
+        u && /* @__PURE__ */ t(
+          O,
+          {
+            action: /* @__PURE__ */ _(g, { alignItems: "center", flexDirection: "row", children: [
+              o && i && /* @__PURE__ */ t(q, { sx: { flexGrow: 1 }, children: /* @__PURE__ */ t(
+                z,
+                {
+                  calendarActions: i,
+                  copy: A,
+                  range: [R, D],
+                  shouldShrinkToIcon: !1,
+                  variant: y
+                }
+              ) }),
+              h && /* @__PURE__ */ t(
+                ie,
+                {
+                  accounts: h,
+                  copy: U,
+                  onConnectAccountClick: () => k(!0),
+                  onFilterClick: (c) => {
+                    P(c), B?.();
+                  },
+                  selectedAccountGuids: j,
+                  showAccountNumbers: !1,
+                  variant: "text"
+                }
+              ),
+              C?.map((c) => {
+                if (v.isValidElement(c)) return c;
+                const { iconName: r, onClick: d, label: m } = c;
+                return V ? o || n ? /* @__PURE__ */ t(
+                  w,
+                  {
+                    onClick: d,
+                    startIcon: /* @__PURE__ */ t(l, { name: r, size: 24 }),
+                    sx: { my: 4 },
+                    children: m
+                  },
+                  r
+                ) : /* @__PURE__ */ t(f, { "aria-label": m, color: "primary", onClick: d, children: /* @__PURE__ */ t(l, { name: r, size: 24 }) }, r) : o || n ? /* @__PURE__ */ t(
+                  w,
+                  {
+                    onClick: d,
+                    startIcon: /* @__PURE__ */ t(l, { name: r, size: 24 }),
+                    sx: { my: 4 },
+                    children: m
+                  },
+                  r
+                ) : /* @__PURE__ */ t(f, { "aria-label": m, color: "primary", onClick: d, children: /* @__PURE__ */ t(l, { name: r, size: 24 }) }, r);
+              })
+            ] }),
+            sx: {
+              p: o ? 48 : 24,
+              pb: 0,
+              "& .MuiCardHeader-action": {
+                mr: 0,
+                ...i && o && { flexGrow: 1 },
+                ...(a || n) && { alignSelf: "center" }
+              },
+              "& .MuiCardHeader-content": {
+                overflow: "hidden"
+              }
+            },
+            title: o || n ? /* @__PURE__ */ t(X, { children: u }) : /* @__PURE__ */ _(g, { alignItems: "center", flexDirection: "row", sx: { overflow: "hidden" }, children: [
+              a && p && /* @__PURE__ */ t(
+                f,
+                {
+                  "aria-label": e.back_to_dashboard,
+                  color: "primary",
+                  onClick: K,
+                  sx: { p: 12, mr: 4 },
+                  children: /* @__PURE__ */ t(l, { name: "arrow_back", size: 24 })
+                }
+              ),
+              /* @__PURE__ */ t(Z, { children: u })
+            ] })
+          }
+        ),
+        L && /* @__PURE__ */ t(T, { sx: { mt: o ? 48 : 24 } }),
+        i && (a || n) && /* @__PURE__ */ _(g, { gap: 24, justifyContent: "center", sx: { mt: a ? 0 : 16 }, children: [
+          G && /* @__PURE__ */ t(T, {}),
+          /* @__PURE__ */ t(
+            z,
+            {
+              calendarActions: i,
+              copy: A,
+              range: [R, D],
+              shouldShrinkToIcon: !1,
+              variant: y
+            }
+          )
+        ] }),
+        x && /* @__PURE__ */ t(
+          ce,
+          {
+            onClose: () => k(!1),
+            showConnectWidget: x,
+            title: Y.mini_title
+          }
+        ),
+        /* @__PURE__ */ t(Q, { ref: H, sx: { p: 0 }, children: /* @__PURE__ */ t(le, { availableHeight: M, availableWidth: b, children: I }) })
+      ]
+    }
+  );
+}, Ee = $(de);
+export {
+  Ee as default
+};

package/dist/common/components/accountfilter/AccountFilter/index.es.js

@@ -0,0 +1,93 @@
+import { jsxs as g, jsx as e } from "react/jsx-runtime";
+import a from "react";
+import A from "@mui/material/Button";
+import { Icon as f } from "@mxenabled/mxui";
+import E from "@mui/material/Tooltip";
+import _ from "@mui/material/Box";
+import j from "@mui/material/IconButton";
+import { AccountFilterOptions as z } from "../AccountFilterOptions/index.es.js";
+import { setupMappedSelectedOptions as s } from "../../../utils/AccountFilter/index.es.js";
+import { useScreenSize as I } from "../../../hooks/useScreenSize/index.es.js";
+const w = ({
+  accounts: i,
+  copy: r,
+  onFilterClick: d,
+  onConnectAccountClick: C = () => {
+  },
+  selectedAccountGuids: l,
+  showAccountNumbers: h,
+  sx: x = {},
+  variant: k = "outlined"
+}) => {
+  const { isDesktop: F } = I(), [O, p] = a.useState(null), [o, n] = a.useState(
+    s(i, l)
+  );
+  a.useEffect(() => {
+    n(s(i, l));
+  }, [i, l]);
+  const m = (t) => {
+    p(t.currentTarget);
+  }, c = () => {
+    p(null);
+  };
+  return /* @__PURE__ */ g(_, { className: "mx-cmn-account-filter", m: 4, sx: { ...x }, children: [
+    F ? /* @__PURE__ */ e(
+      A,
+      {
+        "aria-controls": "filter_accounts",
+        "aria-haspopup": !0,
+        "aria-label": r.title,
+        onClick: m,
+        startIcon: /* @__PURE__ */ e(f, { name: "filter_alt", size: 24 }),
+        sx: { p: 8, whiteSpace: "nowrap", minWidth: "max-content" },
+        variant: k,
+        children: r.accountFilterOptionsCopy.filterButton
+      }
+    ) : /* @__PURE__ */ e(E, { id: "filter-accounts", placement: "bottom", title: r.title, children: /* @__PURE__ */ e(
+      j,
+      {
+        "aria-controls": "filter_accounts",
+        "aria-describedby": "filter-accounts",
+        "aria-haspopup": !0,
+        "aria-label": r.title,
+        color: "primary",
+        onClick: m,
+        sx: { p: 8 },
+        children: /* @__PURE__ */ e(f, { name: "filter_alt", size: 24 })
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      z,
+      {
+        accountFilterButtonEl: O,
+        accounts: i,
+        copy: r.accountFilterOptionsCopy,
+        handleClose: c,
+        onAccountClick: (t) => {
+          n({ ...o, [t.guid]: !o[t.guid] });
+        },
+        onAccountGroupClick: (t, S, b) => {
+          const u = { ...o };
+          S[t].forEach((B) => {
+            u[B.guid] = !b;
+          }), n(u);
+        },
+        onCancelClick: () => {
+          n(s(i, l)), c();
+        },
+        onConnectAccountClick: () => {
+          c(), C();
+        },
+        onFilterClick: () => {
+          d(Object.keys(o).filter((t) => o[t])), c();
+        },
+        selectedOptions: o,
+        setSelectedOptions: n,
+        showAccountNumbers: h
+      }
+    )
+  ] });
+}, H = w;
+export {
+  H as default
+};