@mx-cartographer/experiences 6.25.3-alpha.al2 → 6.25.3-alpha.mega2

package/dist/common/components/Select.js

@@ -0,0 +1,26 @@
+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
+};
+//# sourceMappingURL=Select.js.map

package/dist/common/components/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/common/components/Select.tsx"],"sourcesContent":["import React from 'react'\n\nimport MenuItem from '@mui/material/MenuItem'\nimport TextField from '@mui/material/TextField'\n\nimport { ExpandMore } from '@mxenabled/mx-icons'\n\nexport type SelectOption = {\n  id: number\n  label: string\n}\n\ninterface SelectProps {\n  label: string\n  onChange: (value: number) => void\n  options: SelectOption[]\n  value: number\n}\n\nexport const Select = ({ label, onChange, options, value }: SelectProps) => {\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    onChange(Number(event.target.value))\n  }\n\n  return (\n    <TextField\n      InputLabelProps={{ shrink: true }}\n      SelectProps={{\n        IconComponent: (props) => <ExpandMore size={20} sx={{ mr: 4 }} {...props} />,\n      }}\n      defaultValue={0}\n      label={label}\n      onChange={handleChange}\n      select={true}\n      value={value}\n      variant=\"outlined\"\n    >\n      {options.map((option) => (\n        <MenuItem key={option.id} value={option.id}>\n          {option.label}\n        </MenuItem>\n      ))}\n    </TextField>\n  )\n}\n"],"names":["Select","label","onChange","options","value","jsx","TextField","props","ExpandMore","event","option","MenuItem"],"mappings":";;;;AAmBO,MAAMA,IAAS,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,SAAAC,GAAS,OAAAC,QAM/C,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,iBAAiB,EAAE,QAAQ,GAAK;AAAA,IAChC,aAAa;AAAA,MACX,eAAe,CAACC,MAAU,gBAAAF,EAACG,GAAW,EAAA,MAAM,IAAI,IAAI,EAAE,IAAI,EAAE,GAAI,GAAGD,EAAO,CAAA;AAAA,IAC5E;AAAA,IACA,cAAc;AAAA,IACd,OAAAN;AAAA,IACA,UAZiB,CAACQ,MAAkD;AACtE,MAAAP,EAAS,OAAOO,EAAM,OAAO,KAAK,CAAC;AAAA,IAAA;AAAA,IAYjC,QAAQ;AAAA,IACR,OAAAL;AAAA,IACA,SAAQ;AAAA,IAEP,UAAQD,EAAA,IAAI,CAACO,MACX,gBAAAL,EAAAM,GAAA,EAAyB,OAAOD,EAAO,IACrC,UAAAA,EAAO,MADK,GAAAA,EAAO,EAEtB,CACD;AAAA,EAAA;AAAA;"}

package/dist/common/components/SelectionBox.js

@@ -0,0 +1,49 @@
+import { jsx as e } from "react/jsx-runtime";
+import c 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 C = ({
+  checked: r = !1,
+  label: t,
+  sx: l = {},
+  tooltip: i = "",
+  value: a
+}) => {
+  const o = d(), p = o.palette.mode === "light" ? o.palette.grey[400] : o.palette.grey[700], m = r ? o.palette.action.active : p;
+  return /* @__PURE__ */ e(
+    c,
+    {
+      bgcolor: "background.paper",
+      border: `${r ? 3 : 1}px solid`,
+      borderColor: m,
+      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: t,
+          labelPlacement: "start",
+          sx: { ml: 0, pl: 8 },
+          value: a
+        }
+      ) })
+    }
+  );
+};
+export {
+  C as default
+};
+//# sourceMappingURL=SelectionBox.js.map

package/dist/common/components/SelectionBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionBox.js","sources":["../../../src/common/components/SelectionBox.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport FormControlLabel from '@mui/material/FormControlLabel'\nimport Radio from '@mui/material/Radio'\nimport type { SxProps } from '@mui/material/styles'\nimport useTheme from '@mui/material/styles/useTheme'\nimport Tooltip from '@mui/material/Tooltip'\n\ninterface SelectionBoxProps {\n  checked?: boolean\n  label: string\n  sx?: SxProps\n  tooltip?: string\n  value: string | number\n}\n\n/** TODO: Move this component to KyperMUI **/\nconst SelectionBox: React.FC<SelectionBoxProps> = ({\n  checked = false,\n  label,\n  sx = {},\n  tooltip = '',\n  value,\n}) => {\n  const theme = useTheme()\n\n  /** TODO: Add new theme color to handle this color and remove the mode check **/\n  const greyColor =\n    theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]\n  const borderColor = checked ? theme.palette.action.active : greyColor\n  const borderSize = checked ? 3 : 1\n\n  return (\n    <Box\n      bgcolor=\"background.paper\"\n      border={`${borderSize}px solid`}\n      borderColor={borderColor}\n      borderRadius={2}\n      mt={-2}\n      mx={8}\n      pr={8}\n      py={4}\n      sx={{ '&:hover': { borderColor: theme.palette.action.active }, ...sx }}\n    >\n      <Tooltip title={tooltip}>\n        <FormControlLabel\n          control={\n            <Radio\n              disableRipple={true}\n              sx={{ '&.Mui-checked': { color: theme.palette.action.active } }}\n            />\n          }\n          label={label}\n          labelPlacement=\"start\"\n          sx={{ ml: 0, pl: 8 }}\n          value={value}\n        />\n      </Tooltip>\n    </Box>\n  )\n}\n\nexport default SelectionBox\n"],"names":["SelectionBox","checked","label","sx","tooltip","value","theme","useTheme","greyColor","borderColor","jsx","Box","Tooltip","FormControlLabel","Radio"],"mappings":";;;;;;AAkBA,MAAMA,IAA4C,CAAC;AAAA,EACjD,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,IAAAC,IAAK,CAAC;AAAA,EACN,SAAAC,IAAU;AAAA,EACV,OAAAC;AACF,MAAM;AACJ,QAAMC,IAAQC,KAGRC,IACJF,EAAM,QAAQ,SAAS,UAAUA,EAAM,QAAQ,KAAK,GAAG,IAAIA,EAAM,QAAQ,KAAK,GAAG,GAC7EG,IAAcR,IAAUK,EAAM,QAAQ,OAAO,SAASE;AAI1D,SAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,QAAQ,GALOV,IAAU,IAAI,CAKR;AAAA,MACrB,aAAAQ;AAAA,MACA,cAAc;AAAA,MACd,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI,EAAE,WAAW,EAAE,aAAaH,EAAM,QAAQ,OAAO,UAAU,GAAGH,EAAG;AAAA,MAErE,UAAA,gBAAAO,EAACE,GAAQ,EAAA,OAAOR,GACd,UAAA,gBAAAM;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,SACE,gBAAAH;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,eAAe;AAAA,cACf,IAAI,EAAE,iBAAiB,EAAE,OAAOR,EAAM,QAAQ,OAAO,SAAS;AAAA,YAAA;AAAA,UAChE;AAAA,UAEF,OAAAJ;AAAA,UACA,gBAAe;AAAA,UACf,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE;AAAA,UACnB,OAAAG;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/common/components/SubheaderRow.js

@@ -0,0 +1,11 @@
+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
+};
+//# sourceMappingURL=SubheaderRow.js.map

package/dist/common/components/SubheaderRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubheaderRow.js","sources":["../../../src/common/components/SubheaderRow.tsx"],"sourcesContent":["import React, { PropsWithChildren } from 'react'\n\nimport Box from '@mui/material/Box'\n\nimport { Text } from '@mxenabled/mxui'\n\ninterface SubheaderRowProps {\n  bgcolor?: string\n}\n\nconst SubheaderRow: React.FC<PropsWithChildren<SubheaderRowProps>> = ({\n  bgcolor = 'background.default',\n  children,\n}) => (\n  <Box display=\"inline-block\" pb={4} pl={24} pt={4} sx={{ bgcolor, width: '100%' }}>\n    <Text bold={true} variant=\"XSmall\">\n      {children}\n    </Text>\n  </Box>\n)\n\nexport default SubheaderRow\n"],"names":["SubheaderRow","bgcolor","children","jsx","Box","Text"],"mappings":";;;AAUA,MAAMA,IAA+D,CAAC;AAAA,EACpE,SAAAC,IAAU;AAAA,EACV,UAAAC;AACF,MACE,gBAAAC,EAACC,KAAI,SAAQ,gBAAe,IAAI,GAAG,IAAI,IAAI,IAAI,GAAG,IAAI,EAAE,SAAAH,GAAS,OAAO,OAAO,GAC7E,UAAC,gBAAAE,EAAAE,GAAA,EAAK,MAAM,IAAM,SAAQ,UACvB,UAAAH,EACH,CAAA,EACF,CAAA;"}

package/dist/common/components/TabContentContainer.js

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

package/dist/common/components/TabContentContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabContentContainer.js","sources":["../../../src/common/components/TabContentContainer.tsx"],"sourcesContent":["interface TabContentProps {\n  children?: React.ReactNode\n  index: number\n  name: string\n  value: number\n}\n\nconst TabContentContainer: React.FC<TabContentProps> = ({\n  children,\n  index,\n  name,\n  value,\n  ...rest\n}) => {\n  return (\n    <div\n      aria-labelledby={`${name}-tab-${index}`}\n      hidden={value !== index}\n      id={`${name}-tabpanel-${index}`}\n      role=\"tabpanel\"\n      {...rest}\n    >\n      {value === index && children}\n    </div>\n  )\n}\n\nexport default TabContentContainer\n"],"names":["TabContentContainer","children","index","name","value","rest","jsx"],"mappings":";AAOA,MAAMA,IAAiD,CAAC;AAAA,EACtD,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,mBAAiB,GAAGH,CAAI,QAAQD,CAAK;AAAA,IACrC,QAAQE,MAAUF;AAAA,IAClB,IAAI,GAAGC,CAAI,aAAaD,CAAK;AAAA,IAC7B,MAAK;AAAA,IACJ,GAAGG;AAAA,IAEH,gBAAUH,KAASD;AAAA,EAAA;AAAA;"}

package/dist/common/components/WidgetContainer.js

@@ -0,0 +1,327 @@
+import { jsx as r, jsxs as d } 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 n, H1 as X, H3 as Z } from "@mxenabled/mxui";
+import tt from "./accountfilter/AccountFilter.js";
+import z from "./daterangeselector/DateRangeSelector.js";
+import "bowser";
+import "date-fns/getUnixTime";
+import { ANALYTICS_EVENTS as rt } from "../constants/Analytics.js";
+import "date-fns/intlFormat";
+import "../constants/Account.js";
+import "../constants/Category.js";
+import "date-fns/addMonths";
+import "date-fns/addQuarters";
+import "date-fns/addWeeks";
+import "date-fns/addYears";
+import "date-fns/getDay";
+import "date-fns/isBefore";
+import "date-fns/nextDay";
+import "date-fns/setDate";
+import "date-fns/startOfToday";
+import "date-fns/fromUnixTime";
+import "numeral";
+import "@mui/material";
+import "@mxenabled/cssinjs";
+import "date-fns/addDays";
+import "date-fns/eachDayOfInterval";
+import "date-fns/eachWeekOfInterval";
+import "date-fns/endOfMonth";
+import "date-fns/format";
+import "date-fns/isSameMonth";
+import "date-fns/startOfMonth";
+import "date-fns/subMonths";
+import "@mui/material/Paper";
+import "@mxenabled/mx-icons";
+import "date-fns/isSameDay";
+import "date-fns/isWithinInterval";
+import "@mui/material/styles/useTheme";
+import "d3";
+import "@mui/material/styles";
+import "@mui/x-charts";
+import "@mui/material/useMediaQuery";
+import "./charts/linechart/CustomLegend.js";
+import "@mui/x-charts/ChartsTooltip";
+import { useEvent as ot, useGlobalUiStore as et, useGlobalCopyStore as it } from "../context/hooks.js";
+import "../context/GlobalDataProvider.js";
+import { WidgetContainerProvider as mt } from "../context/WidgetContainerProvider.js";
+import { useScreenSize as pt } from "../hooks/useScreenSize.js";
+import "./charts/stackedlinechart/CustomAreaTooltip.js";
+import "@mui/material/Dialog";
+import "@mui/material/DialogContent";
+import "./ErrorBoundary.js";
+import { useDimensions as at } from "../hooks/useDimensions.js";
+import nt from "./ConnectDrawer.js";
+import "uuid";
+import ct from "./Loader.js";
+import "@mui/material/Tooltip";
+import "./SearchBox.js";
+import "@mui/material/FormControlLabel";
+import "@mui/material/Radio";
+import "@mui/material/Avatar";
+import "@mui/material/ListItem";
+import "@mui/material/ListItemAvatar";
+import "@mui/material/ListItemButton";
+import "@mui/material/ListItemText";
+import "@mui/material/ListItemIcon";
+import "./ListItemAction.js";
+import "@mui/material/MenuItem";
+import "@mui/material/TextField";
+import "@mui/material/Switch";
+import "mobx";
+import "../../accounts/AccountsWidget.js";
+import "../../accounts/AccountsMiniWidget.js";
+import "../../accounts/ConnectMiniWidget.js";
+import "../../accounts/components/detailsdrawer/Accounts/AccountDetailsHeader.js";
+import "../../accounts/components/detailsdrawer/Accounts/AccountDetailsContent.js";
+import "../types/Account.js";
+import "posthog-js";
+import "../../cashflow/CashflowMiniWidget.js";
+import "../../cashflow/CashflowWidget.js";
+import "../../cashflow/CashflowOnboarding.js";
+import "date-fns/differenceInDays";
+import "../../categories/components/CategorySelector.js";
+import "../../categories/components/CategorySelectorDrawer.js";
+import "../../categories/components/CategoryRow.js";
+import "../../debts/DebtsWidget.js";
+import "@mui/x-data-grid-pro";
+import "date-fns";
+import "@mui/material/List";
+import "../../finstrong/components/FinancialStrengthGraph.js";
+import "../../finstrong/components/CreditScoreGraph.js";
+import "../../finstrong/FinstrongWidget.js";
+import "../../goals/GoalsWidget.js";
+import "../../goals/GoalsMicroWidget.js";
+import "../../investments/util/InvestmentUtil.js";
+import "../../merchants/components/MerchantLookup.js";
+import "../../networth/components/NetWorthChart.js";
+import "../../networth/components/NetWorthList.js";
+import "../../networth/components/NetWorthSummary.js";
+import "../../networth/NetWorthMicroWidget.js";
+import "../../networth/NetWorthWidget.js";
+import "../../notifications/components/NotificationList.js";
+import "../../notifications/components/NotificationDrawer.js";
+import "date-fns/endOfToday";
+import "date-fns/formatISO";
+import "date-fns/subDays";
+import "../../transactions/constants/Analytics.js";
+import "../../transactions/constants/Transaction.js";
+import "../../transactions/components/shared/transactionlist/TransactionRow.js";
+import "../../transactions/components/shared/TransactionList.js";
+import "../../transactions/components/shared/TransactionTable.js";
+import "../../transactions/components/shared/TransactionDetails.js";
+import "../../transactions/components/transactionwidget/AddAccountModal.js";
+import "../../transactions/TransactionWidget.js";
+import "../../settings/SettingsWidget.js";
+import "../../settings/components/SettingsWidgetContents.js";
+import "../../settings/components/profile/ProfileTab.js";
+import "../../settings/components/devices/DeviceTab.js";
+import "../../settings/NotificationSettingsWidget.js";
+import "../../settings/components/notifications/NotificationSettings.js";
+import "../../settings/components/notifications/AccountNotificationProfiles.js";
+import "../../settings/components/notifications/BudgetNotificationProfiles.js";
+import "../../settings/components/notifications/InsightsNotificationProfiles.js";
+import "../../settings/components/transactionrules/TransactionRulesTab.js";
+import "../../recurringtransactions/RecurringTransactionsWidget.js";
+import "../../recurringtransactions/RecurringTransactionsMiniWidget.js";
+import "../../recurringtransactions/RecurringTransactionsMicroWidget.js";
+import "date-fns/isAfter";
+import "date-fns/parseISO";
+import "date-fns/subQuarters";
+import "date-fns/subYears";
+import "date-fns/lastDayOfMonth";
+import "date-fns/setDayOfYear";
+import "../../recurringtransactions/components/shared/RecurringSettings.js";
+import "../../recurringtransactions/components/shared/recurringsettings/ManageIncome.js";
+import "../../recurringtransactions/components/shared/recurringsettings/ManageExpenses.js";
+import "../../recurringtransactions/components/shared/recurringsettings/SelectTransaction.js";
+import "../../recurringtransactions/components/shared/recurringsettings/AddRecurringTransactionDetails.js";
+import "../../trends/TrendsFullWidget.js";
+import "../../trends/TrendsMiniWidget.js";
+import "../../trends/TrendsMicroWidget.js";
+import "../../trends/TrendsWidget.js";
+import "date-fns/addSeconds";
+import "date-fns/getMonth";
+const lt = ({
+  accountOptions: h,
+  actions: C = [],
+  calendarActions: p,
+  children: I,
+  dateRange: c,
+  dateRangeVariant: y,
+  className: E = "mx-cmn-widget",
+  hasDivider: L = !1,
+  onBackClick: _,
+  onAccountsFilterClick: B,
+  showDividerAboveDateSelector: G = !0,
+  sx: W = {},
+  title: u = ""
+}) => {
+  const [x, k] = v.useState(!1), [H, { height: M, width: b }] = at(), { onEvent: F } = ot(), { isDesktop: e, isMobile: i, isTablet: m } = pt(b), { displayedDateRange: S, isCopyLoaded: N, selectedAccountGuids: j, setSelectedAccountGuids: P } = et(), { common: t, connect: Y } = it(), K = () => {
+    _ && (_(), F(rt.WIDGET_BACK_CLICK));
+  };
+  if (!N)
+    return /* @__PURE__ */ r(ct, {});
+  const U = {
+    accountFilterOptionsCopy: {
+      accountTypeAccounts: t.account_filter.account_type_accounts,
+      cancelButton: t.cancel_button,
+      filterButton: t.filter_button,
+      filterButtonAria: t.account_filter.filter_button_generic_aria,
+      selectAllAccounts: t.account_filter.select_all_accounts,
+      toggleAccountTypeAccounts: t.account_filter.toggle_account_type_accounts,
+      unselectAllAccounts: t.account_filter.unselect_all_accounts,
+      zeroStateButton: t.account_filter.zero_state_button,
+      zeroStateDescription: t.account_filter.zero_state_description,
+      zeroStateTitle: t.account_filter.zero_state_title
+    },
+    title: t.account_filter.title
+  }, A = {
+    dateRangePickerCopy: {
+      dateRangeFrom: t.date_range_picker.from,
+      dateRangeTo: t.date_range_picker.to,
+      dateRangeCustom: t.date_range_picker.custom,
+      dateRangeSelectARange: t.date_range_picker.select_range,
+      dateRangeThisMonth: t.date_range_picker.this_month,
+      dateRangeLastMonth: t.date_range_picker.last_month,
+      dateRangeLast30Days: t.date_range_picker.last_30_days,
+      dateRangeLast90Days: t.date_range_picker.last_90_days,
+      dateRangeYTD: t.date_range_picker.ytd,
+      dateRangeLastYear: t.date_range_picker.last_year,
+      dateRangeSelect: t.date_range_picker.select
+    },
+    dateRangeEditApply: t.date_range_picker.edit_apply,
+    dateRangeEditTitle: t.date_range_picker.edit_title,
+    dateRangeNextAria: t.date_range_picker.next_aria,
+    dateRangePreviousAria: t.date_range_picker.previous_aria
+  }, R = c ? c.start : S.start, D = c ? c.end : S.end, V = C?.length > 1;
+  return /* @__PURE__ */ d(
+    J,
+    {
+      className: E,
+      sx: {
+        ...i && { px: 4 },
+        "& .mx-cmn-date-range-selector": {
+          ...(i || m) && { textAlign: "center" }
+        },
+        ...W
+      },
+      children: [
+        u && /* @__PURE__ */ r(
+          O,
+          {
+            action: /* @__PURE__ */ d(g, { alignItems: "center", flexDirection: "row", children: [
+              e && p && /* @__PURE__ */ r(q, { sx: { flexGrow: 1 }, children: /* @__PURE__ */ r(
+                z,
+                {
+                  calendarActions: p,
+                  copy: A,
+                  range: [R, D],
+                  shouldShrinkToIcon: !1,
+                  variant: y
+                }
+              ) }),
+              h && /* @__PURE__ */ r(
+                tt,
+                {
+                  accounts: h,
+                  copy: U,
+                  onConnectAccountClick: () => k(!0),
+                  onFilterClick: (a) => {
+                    P(a), B?.();
+                  },
+                  selectedAccountGuids: j,
+                  showAccountNumbers: !1,
+                  variant: "text"
+                }
+              ),
+              C?.map((a) => {
+                if (v.isValidElement(a)) return a;
+                const { iconName: o, onClick: l, label: s } = a;
+                return V ? e || m ? /* @__PURE__ */ r(
+                  w,
+                  {
+                    onClick: l,
+                    startIcon: /* @__PURE__ */ r(n, { name: o, size: 24 }),
+                    sx: { my: 4 },
+                    children: s
+                  },
+                  o
+                ) : /* @__PURE__ */ r(f, { "aria-label": s, color: "primary", onClick: l, children: /* @__PURE__ */ r(n, { name: o, size: 24 }) }, o) : e || m ? /* @__PURE__ */ r(
+                  w,
+                  {
+                    onClick: l,
+                    startIcon: /* @__PURE__ */ r(n, { name: o, size: 24 }),
+                    sx: { my: 4 },
+                    children: s
+                  },
+                  o
+                ) : /* @__PURE__ */ r(f, { "aria-label": s, color: "primary", onClick: l, children: /* @__PURE__ */ r(n, { name: o, size: 24 }) }, o);
+              })
+            ] }),
+            sx: {
+              p: e ? 48 : 24,
+              pb: 0,
+              "& .MuiCardHeader-action": {
+                mr: 0,
+                ...p && e && { flexGrow: 1 },
+                ...(i || m) && { alignSelf: "center" }
+              },
+              "& .MuiCardHeader-content": {
+                overflow: "hidden"
+              }
+            },
+            title: e || m ? /* @__PURE__ */ r(X, { children: u }) : /* @__PURE__ */ d(g, { alignItems: "center", flexDirection: "row", sx: { overflow: "hidden" }, children: [
+              i && _ && /* @__PURE__ */ r(
+                f,
+                {
+                  "aria-label": t.back_to_dashboard,
+                  color: "primary",
+                  onClick: K,
+                  sx: { p: 12, mr: 4 },
+                  children: /* @__PURE__ */ r(n, { name: "arrow_back", size: 24 })
+                }
+              ),
+              /* @__PURE__ */ r(Z, { children: u })
+            ] })
+          }
+        ),
+        L && /* @__PURE__ */ r(T, { sx: { mt: e ? 48 : 24 } }),
+        p && (i || m) && /* @__PURE__ */ d(g, { gap: 24, justifyContent: "center", sx: { mt: i ? 0 : 16 }, children: [
+          G && /* @__PURE__ */ r(T, {}),
+          /* @__PURE__ */ r(
+            z,
+            {
+              calendarActions: p,
+              copy: A,
+              range: [R, D],
+              shouldShrinkToIcon: !1,
+              variant: y
+            }
+          )
+        ] }),
+        x && /* @__PURE__ */ r(
+          nt,
+          {
+            onClose: () => k(!1),
+            showConnectWidget: x,
+            title: Y.mini_title
+          }
+        ),
+        /* @__PURE__ */ r(Q, { ref: H, sx: { p: 0 }, children: /* @__PURE__ */ r(mt, { availableHeight: M, availableWidth: b, children: I }) })
+      ]
+    }
+  );
+}, oe = $(lt);
+export {
+  oe as default
+};
+//# sourceMappingURL=WidgetContainer.js.map

package/dist/common/components/WidgetContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetContainer.js","sources":["../../../src/common/components/WidgetContainer.tsx"],"sourcesContent":["import React, { PropsWithChildren } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Button from '@mui/material/Button'\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport CardHeader from '@mui/material/CardHeader'\nimport CardContent from '@mui/material/CardContent'\nimport Divider from '@mui/material/Divider'\nimport IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { H1, H3, Icon } from '@mxenabled/mxui'\n\nimport { AccountFilter } from './accountfilter'\nimport { DateRangeSelector } from './daterangeselector'\nimport { ANALYTICS_EVENTS, ConnectDrawer, useEvent } from '../../common'\nimport { useGlobalCopyStore, useGlobalUiStore } from '../context'\nimport { useScreenSize } from '../hooks'\nimport { Account } from '../types'\nimport { CalendarActions, DateRangeSelectorCopy } from './daterangeselector/DateRangeSelector'\n\nimport { WidgetContainerProvider } from '../context'\nimport { useDimensions } from '../hooks/useDimensions'\nimport Loader from './Loader'\n\ntype Action = {\n  label: string\n  iconName: string\n  onClick: () => void\n}\n\ninterface WidgetContainerProps {\n  accountOptions?: Account[]\n  actions?: (Action | JSX.Element)[]\n  calendarActions?: CalendarActions\n  className?: string\n  dateRange?: { start: Date; end: Date }\n  dateRangeVariant?: 'outlined' | 'text' | 'readonly' | 'timeframebuttons' | 'timeframetabs'\n  hasDivider?: boolean\n  onBackClick?: () => void\n  onAccountsFilterClick?: () => void\n  showDividerAboveDateSelector?: boolean\n  sx?: SxProps\n  title?: string\n}\n\nconst WidgetContainer: React.FC<PropsWithChildren<WidgetContainerProps>> = ({\n  accountOptions,\n  actions = [],\n  calendarActions,\n  children,\n  dateRange,\n  dateRangeVariant,\n  className = 'mx-cmn-widget',\n  hasDivider = false,\n  onBackClick,\n  onAccountsFilterClick,\n  showDividerAboveDateSelector = true,\n  sx = {},\n  title = '',\n}) => {\n  const [showConnectWidget, setShowConnectWidget] = React.useState(false)\n\n  const [containerRef, { height, width }] = useDimensions()\n  const { onEvent } = useEvent()\n\n  const { isDesktop, isMobile, isTablet } = useScreenSize(width)\n  const { displayedDateRange, isCopyLoaded, selectedAccountGuids, setSelectedAccountGuids } =\n    useGlobalUiStore()\n  const { common: commonCopy, connect: connectCopy } = useGlobalCopyStore()\n\n  const handleBackClick = () => {\n    if (onBackClick) {\n      onBackClick()\n      onEvent(ANALYTICS_EVENTS.WIDGET_BACK_CLICK)\n    }\n  }\n\n  if (!isCopyLoaded) {\n    return <Loader />\n  }\n\n  const accountFilterCopy = {\n    accountFilterOptionsCopy: {\n      accountTypeAccounts: commonCopy.account_filter.account_type_accounts,\n      cancelButton: commonCopy.cancel_button,\n      filterButton: commonCopy.filter_button,\n      filterButtonAria: commonCopy.account_filter.filter_button_generic_aria,\n      selectAllAccounts: commonCopy.account_filter.select_all_accounts,\n      toggleAccountTypeAccounts: commonCopy.account_filter.toggle_account_type_accounts,\n      unselectAllAccounts: commonCopy.account_filter.unselect_all_accounts,\n      zeroStateButton: commonCopy.account_filter.zero_state_button,\n      zeroStateDescription: commonCopy.account_filter.zero_state_description,\n      zeroStateTitle: commonCopy.account_filter.zero_state_title,\n    },\n    title: commonCopy.account_filter.title,\n  }\n\n  const dateRangeSelectorCopy = {\n    dateRangePickerCopy: {\n      dateRangeFrom: commonCopy.date_range_picker.from,\n      dateRangeTo: commonCopy.date_range_picker.to,\n      dateRangeCustom: commonCopy.date_range_picker.custom,\n      dateRangeSelectARange: commonCopy.date_range_picker.select_range,\n      dateRangeThisMonth: commonCopy.date_range_picker.this_month,\n      dateRangeLastMonth: commonCopy.date_range_picker.last_month,\n      dateRangeLast30Days: commonCopy.date_range_picker.last_30_days,\n      dateRangeLast90Days: commonCopy.date_range_picker.last_90_days,\n      dateRangeYTD: commonCopy.date_range_picker.ytd,\n      dateRangeLastYear: commonCopy.date_range_picker.last_year,\n      dateRangeSelect: commonCopy.date_range_picker.select,\n    },\n    dateRangeEditApply: commonCopy.date_range_picker.edit_apply,\n    dateRangeEditTitle: commonCopy.date_range_picker.edit_title,\n    dateRangeNextAria: commonCopy.date_range_picker.next_aria,\n    dateRangePreviousAria: commonCopy.date_range_picker.previous_aria,\n  } as DateRangeSelectorCopy\n\n  const startDate = dateRange ? dateRange.start : displayedDateRange.start\n  const endDate = dateRange ? dateRange.end : displayedDateRange.end\n\n  const hasMultipleActions = actions?.length > 1\n\n  return (\n    <Card\n      className={className}\n      sx={{\n        ...(isMobile && { px: 4 }),\n        '& .mx-cmn-date-range-selector': {\n          ...((isMobile || isTablet) && { textAlign: 'center' }),\n        },\n        ...sx,\n      }}\n    >\n      {title && (\n        <CardHeader\n          action={\n            <Stack alignItems=\"center\" flexDirection=\"row\">\n              {isDesktop && calendarActions && (\n                <Box sx={{ flexGrow: 1 }}>\n                  <DateRangeSelector\n                    calendarActions={calendarActions}\n                    copy={dateRangeSelectorCopy}\n                    range={[startDate, endDate]}\n                    shouldShrinkToIcon={false}\n                    variant={dateRangeVariant}\n                  />\n                </Box>\n              )}\n              {accountOptions && (\n                <AccountFilter\n                  accounts={accountOptions}\n                  copy={accountFilterCopy}\n                  onConnectAccountClick={() => setShowConnectWidget(true)}\n                  onFilterClick={(selected) => {\n                    setSelectedAccountGuids(selected)\n                    onAccountsFilterClick?.()\n                  }}\n                  selectedAccountGuids={selectedAccountGuids}\n                  showAccountNumbers={false}\n                  variant=\"text\"\n                />\n              )}\n              {actions?.map((action) => {\n                if (React.isValidElement(action)) return action\n                const { iconName, onClick, label } = action as Action\n                if (hasMultipleActions) {\n                  return isDesktop || isTablet ? (\n                    <Button\n                      key={iconName}\n                      onClick={onClick}\n                      startIcon={<Icon name={iconName} size={24} />}\n                      sx={{ my: 4 }}\n                    >\n                      {label}\n                    </Button>\n                  ) : (\n                    <IconButton aria-label={label} color=\"primary\" key={iconName} onClick={onClick}>\n                      <Icon name={iconName} size={24} />\n                    </IconButton>\n                  )\n                }\n\n                return isDesktop || isTablet ? (\n                  <Button\n                    key={iconName}\n                    onClick={onClick}\n                    startIcon={<Icon name={iconName} size={24} />}\n                    sx={{ my: 4 }}\n                  >\n                    {label}\n                  </Button>\n                ) : (\n                  <IconButton aria-label={label} color=\"primary\" key={iconName} onClick={onClick}>\n                    <Icon name={iconName} size={24} />\n                  </IconButton>\n                )\n              })}\n            </Stack>\n          }\n          sx={{\n            p: isDesktop ? 48 : 24,\n            pb: 0,\n            '& .MuiCardHeader-action': {\n              mr: 0,\n              ...(calendarActions && isDesktop && { flexGrow: 1 }),\n              ...((isMobile || isTablet) && { alignSelf: 'center' }),\n            },\n            '& .MuiCardHeader-content': {\n              overflow: 'hidden',\n            },\n          }}\n          title={\n            isDesktop || isTablet ? (\n              <H1>{title}</H1>\n            ) : (\n              <Stack alignItems=\"center\" flexDirection=\"row\" sx={{ overflow: 'hidden' }}>\n                {isMobile && onBackClick && (\n                  <IconButton\n                    aria-label={commonCopy.back_to_dashboard}\n                    color=\"primary\"\n                    onClick={handleBackClick}\n                    sx={{ p: 12, mr: 4 }}\n                  >\n                    <Icon name=\"arrow_back\" size={24} />\n                  </IconButton>\n                )}\n                <H3>{title}</H3>\n              </Stack>\n            )\n          }\n        />\n      )}\n\n      {hasDivider && <Divider sx={{ mt: isDesktop ? 48 : 24 }} />}\n\n      {calendarActions && (isMobile || isTablet) && (\n        <Stack gap={24} justifyContent=\"center\" sx={{ mt: isMobile ? 0 : 16 }}>\n          {showDividerAboveDateSelector && <Divider />}\n          <DateRangeSelector\n            calendarActions={calendarActions}\n            copy={dateRangeSelectorCopy}\n            range={[startDate, endDate]}\n            shouldShrinkToIcon={false}\n            variant={dateRangeVariant}\n          />\n        </Stack>\n      )}\n\n      {showConnectWidget && (\n        <ConnectDrawer\n          onClose={() => setShowConnectWidget(false)}\n          showConnectWidget={showConnectWidget}\n          title={connectCopy.mini_title}\n        />\n      )}\n      <CardContent ref={containerRef} sx={{ p: 0 }}>\n        <WidgetContainerProvider availableHeight={height} availableWidth={width}>\n          {children}\n        </WidgetContainerProvider>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport default observer(WidgetContainer)\n"],"names":["WidgetContainer","accountOptions","actions","calendarActions","children","dateRange","dateRangeVariant","className","hasDivider","onBackClick","onAccountsFilterClick","showDividerAboveDateSelector","sx","title","showConnectWidget","setShowConnectWidget","React","containerRef","height","width","useDimensions","onEvent","useEvent","isDesktop","isMobile","isTablet","useScreenSize","displayedDateRange","isCopyLoaded","selectedAccountGuids","setSelectedAccountGuids","useGlobalUiStore","commonCopy","connectCopy","useGlobalCopyStore","handleBackClick","ANALYTICS_EVENTS","Loader","accountFilterCopy","dateRangeSelectorCopy","startDate","endDate","hasMultipleActions","jsxs","Card","jsx","CardHeader","Stack","Box","DateRangeSelector","AccountFilter","selected","action","iconName","onClick","label","Button","Icon","IconButton","H1","H3","Divider","ConnectDrawer","CardContent","WidgetContainerProvider","WidgetContainer$1","observer"],"mappings":"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"}

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

@@ -0,0 +1,96 @@
+import { jsxs as g, jsx as e } from "react/jsx-runtime";
+import a from "react";
+import E from "@mui/material/Button";
+import { Icon as f } from "@mxenabled/mxui";
+import _ from "@mui/material/Tooltip";
+import j from "@mui/material/Box";
+import z from "@mui/material/IconButton";
+import { AccountFilterOptions as A } from "./AccountFilterOptions.js";
+import { setupMappedSelectedOptions as s } from "../../utils/AccountFilter.js";
+import "../../context/GlobalDataProvider.js";
+import "../../context/WidgetContainerProvider.js";
+import { useScreenSize as I } from "../../hooks/useScreenSize.js";
+const K = ({
+  accounts: i,
+  copy: r,
+  onFilterClick: d,
+  onConnectAccountClick: C = () => {
+  },
+  selectedAccountGuids: l,
+  showAccountNumbers: h,
+  sx: x = {},
+  variant: k = "outlined"
+}) => {
+  const { isDesktop: O } = I(), [F, 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(j, { className: "mx-cmn-account-filter", m: 4, sx: { ...x }, children: [
+    O ? /* @__PURE__ */ e(
+      E,
+      {
+        "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(_, { id: "filter-accounts", placement: "bottom", title: r.title, children: /* @__PURE__ */ e(
+      z,
+      {
+        "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(
+      A,
+      {
+        accountFilterButtonEl: F,
+        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
+      }
+    )
+  ] });
+};
+export {
+  K as default
+};
+//# sourceMappingURL=AccountFilter.js.map

package/dist/common/components/accountfilter/AccountFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountFilter.js","sources":["../../../../src/common/components/accountfilter/AccountFilter.tsx"],"sourcesContent":["import React, { FC } from 'react'\n\nimport Button from '@mui/material/Button'\nimport { Icon } from '@mxenabled/mxui'\nimport Tooltip from '@mui/material/Tooltip'\nimport Box from '@mui/material/Box'\nimport IconButton from '@mui/material/IconButton'\nimport { type SxProps } from '@mui/material/styles'\n\nimport { AccountFilterOptions } from './AccountFilterOptions'\nimport { setupMappedSelectedOptions } from '../../utils/AccountFilter'\n\nimport type { Account } from '../../types'\nimport type { AccountFilterOptionsCopy } from './AccountFilterOptions'\nimport type { MappedAccount, MappedOptions } from '../../utils/AccountFilter'\nimport { useScreenSize } from '../../hooks'\n\nexport type AccountFilterCopy = {\n  accountFilterOptionsCopy: AccountFilterOptionsCopy\n  title: string\n}\n\n// TODO: pass in copy to account filter like this when refactored\n// const accountFilterCopy = {\n//   ...copy.account_filter,\n//   accounts_type: copy.full_view.accounts_type,\n//   title: copy.full_view.account_filter_title,\n// }\n\nexport interface AccountFilterProps {\n  accounts: Account[]\n  copy: AccountFilterCopy\n  onFilterClick: (selected: string[]) => void\n  onConnectAccountClick?: () => void\n  selectedAccountGuids: string[]\n  showAccountNumbers: boolean\n  sx?: SxProps\n  variant?: 'outlined' | 'text'\n}\n\nconst AccountFilter: FC<AccountFilterProps> = ({\n  accounts,\n  copy,\n  onFilterClick,\n  onConnectAccountClick = () => {},\n  selectedAccountGuids,\n  showAccountNumbers,\n  sx = {},\n  variant = 'outlined',\n}) => {\n  const { isDesktop } = useScreenSize()\n\n  const [accountFilterButtonEl, setAccountFilterButtonEl] =\n    React.useState<HTMLButtonElement | null>(null)\n\n  const [selectedOptions, setSelectedOptions] = React.useState<MappedOptions>(\n    setupMappedSelectedOptions(accounts, selectedAccountGuids),\n  )\n\n  React.useEffect(() => {\n    setSelectedOptions(setupMappedSelectedOptions(accounts, selectedAccountGuids))\n  }, [accounts, selectedAccountGuids])\n\n  const onClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAccountFilterButtonEl(event.currentTarget)\n  }\n\n  const handleClose = () => {\n    setAccountFilterButtonEl(null)\n  }\n\n  return (\n    <Box className=\"mx-cmn-account-filter\" m={4} sx={{ ...sx }}>\n      {!isDesktop ? (\n        <Tooltip id=\"filter-accounts\" placement=\"bottom\" title={copy.title}>\n          <IconButton\n            aria-controls=\"filter_accounts\"\n            aria-describedby=\"filter-accounts\"\n            aria-haspopup={true}\n            aria-label={copy.title}\n            color=\"primary\"\n            onClick={onClick}\n            sx={{ p: 8 }}\n          >\n            <Icon name=\"filter_alt\" size={24} />\n          </IconButton>\n        </Tooltip>\n      ) : (\n        <Button\n          aria-controls=\"filter_accounts\"\n          aria-haspopup={true}\n          aria-label={copy.title}\n          onClick={onClick}\n          startIcon={<Icon name=\"filter_alt\" size={24} />}\n          sx={{ p: 8, whiteSpace: 'nowrap', minWidth: 'max-content' }}\n          variant={variant}\n        >\n          {copy.accountFilterOptionsCopy.filterButton}\n        </Button>\n      )}\n\n      <AccountFilterOptions\n        accountFilterButtonEl={accountFilterButtonEl}\n        accounts={accounts}\n        copy={copy.accountFilterOptionsCopy}\n        handleClose={handleClose}\n        onAccountClick={(account) => {\n          setSelectedOptions({ ...selectedOptions, [account.guid]: !selectedOptions[account.guid] })\n        }}\n        onAccountGroupClick={(accountType, mappedAccounts, allSelected) => {\n          const selectedOptionsClone = { ...selectedOptions }\n\n          mappedAccounts[accountType].forEach((account: MappedAccount) => {\n            selectedOptionsClone[account.guid] = !allSelected\n          })\n\n          setSelectedOptions(selectedOptionsClone)\n        }}\n        onCancelClick={() => {\n          setSelectedOptions(setupMappedSelectedOptions(accounts, selectedAccountGuids))\n          handleClose()\n        }}\n        onConnectAccountClick={() => {\n          handleClose()\n          onConnectAccountClick()\n        }}\n        onFilterClick={() => {\n          onFilterClick(Object.keys(selectedOptions).filter((guid) => selectedOptions[guid]))\n          handleClose()\n        }}\n        selectedOptions={selectedOptions}\n        setSelectedOptions={setSelectedOptions}\n        showAccountNumbers={showAccountNumbers}\n      />\n    </Box>\n  )\n}\n\nexport default AccountFilter\n"],"names":["AccountFilter","accounts","copy","onFilterClick","onConnectAccountClick","selectedAccountGuids","showAccountNumbers","sx","variant","isDesktop","useScreenSize","accountFilterButtonEl","setAccountFilterButtonEl","React","selectedOptions","setSelectedOptions","setupMappedSelectedOptions","onClick","event","handleClose","jsxs","Box","jsx","Button","Icon","Tooltip","IconButton","AccountFilterOptions","account","accountType","mappedAccounts","allSelected","selectedOptionsClone","guid"],"mappings":"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"}