@mx-cartographer/experiences 9.0.0-alpha.mega1 → 9.0.0

package/dist/WidgetContainer-DNuz_s7W.mjs

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

package/dist/accounts/AccountsMiniWidget.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
-import { MiniWidgetProps } from '../common';
+import { MiniWidgetProps } from '../core';
 declare const _default: React.FunctionComponent<MiniWidgetProps>;
 export default _default;

package/dist/accounts/AccountsWidget.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
-import { WidgetProps } from '../common';
+import { WidgetProps } from '../core';
 declare const _default: React.FunctionComponent<WidgetProps>;
 export default _default;

package/dist/accounts/components/AccountListItem.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { ListItemOwnProps } from '@mui/material/ListItem';
-import { Account } from '../../common';
+import { Account } from '../../core';
 interface AccountListItemProps {
     account: Account;
     onRowClick?: () => void;

package/dist/accounts/components/AccountsListCompact.d.ts

@@ -1,4 +1,4 @@
-import { Account, AccountType } from '../../common';
+import { Account, AccountType } from '../../core';
 interface AccountsListCompactProps {
     onClick?: (account: Account) => void;
     shouldShowBalance?: boolean;

package/dist/accounts/components/detailsdrawer/Accounts/AccountActionsRow.d.ts

@@ -1,4 +1,5 @@
 interface AccountActionsRowProps {
+    ariaPressed?: boolean;
     onClick: () => void;
     isLast?: boolean;
     primaryText: string;

package/dist/accounts/components/detailsdrawer/Accounts/AccountDetailsChart.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { MiniWidgetProps } from '../../../../common';
+import { MiniWidgetProps } from '../../../../core';
 interface AccountDetailsChartProps extends MiniWidgetProps {
     ChartComponent?: React.ComponentType;
     header?: string;

package/dist/accounts/hooks/useGetMergeableAccounts.d.ts

@@ -1 +1 @@
-export declare const useGetMergeableAccounts: () => import('../../common').Account[];
+export declare const useGetMergeableAccounts: () => import('../../core').Account[];

package/dist/accounts/hooks/useUiStore.d.ts

@@ -1 +1,6 @@
-export declare const useAccountUiStore: () => import('../stores/UiStore').UiStore;
+export declare const useAccountUiStore: () => {
+    selectedAccount: import('../../core').Account;
+    selectedMember: import('../../core').Member;
+    setSelectedAccount: (account: import('../../core').Account) => import('../../core').Account;
+    setSelectedMember: (member: import('../../core').Member) => import('../../core').Member;
+};

package/dist/accounts/index.d.ts

@@ -6,6 +6,4 @@ export { default as AccountDetailsContent } from './components/detailsdrawer/Acc
 export { getAccountBalanceDetails, getAccountDetailFields } from './utils/AccountFields';
 export { FieldType, MemberConnectionStatus } from './constants/Accounts';
 export { useGetMergeableAccounts } from './hooks/useGetMergeableAccounts';
-export { AccountApi } from './api/AccountApi';
-export { AccountStore } from './stores/AccountStore';
 export { useAccountUiStore } from './hooks/useUiStore';