@mx-cartographer/experiences 9.2.4-alpha.al2 → 9.3.0-alpha.bb1

package/dist/common/components/charts/StackedLineChart/index.es.js

@@ -0,0 +1,208 @@
+import { DATE_FORMATS_INTL as T, formatDate as L } from "../../../../core/constants/DateFormats/index.es.js";
+import { useScreenSize as ie } from "../../../hooks/useScreenSize/index.es.js";
+import { formatCurrency as k } from "../../../../core/utils/NumberFormatting/index.es.js";
+import { useDimensions as se } from "../../../hooks/useDimensions/index.es.js";
+import ne from "../stackedlinechart/CustomAreaTooltip/index.es.js";
+import { CustomLegend as ce } from "../stackedlinechart/CustomLegend/index.es.js";
+import { CustomPointTooltip as le } from "../stackedlinechart/CustomPointTooltip/index.es.js";
+import n from "react";
+import de from "@mui/material/Stack";
+import { jsx as i, jsxs as me } from "react/jsx-runtime";
+import { useTheme as ue } from "@mui/material/styles";
+import pe from "@mui/material/Box";
+import he from "numeral";
+import { ChartsTooltipContainer as ge } from "@mui/x-charts/ChartsTooltip";
+import { LineChart as fe } from "@mui/x-charts/LineChart";
+var Ge = ({ onHoverArea: E, onHoverPoint: R, onHoverLegend: P, onClickLegend: y, stackedDatasets: r, unstackedDatasets: c = [], availableHeight: x = 0, minimumHeight: G = 350 }) => {
+  const I = ue(), { isMobile: b } = ie(), [w, { height: A }] = se(), M = n.useRef(null), [F, O] = n.useState(0);
+  n.useEffect(() => {
+    const e = Math.max(x - A, G);
+    O(e);
+  }, [x, A]);
+  const [p, N] = n.useState(null), [B, l] = n.useState({
+    hoveredSeriesId: null,
+    hoveredAreaData: null,
+    isAreaHovered: !1,
+    cursorPos: {
+      x: 0,
+      y: 0
+    }
+  }), { hoveredSeriesId: s, hoveredAreaData: _, isAreaHovered: D, cursorPos: d } = B, S = D && s && _, H = !S, h = [...r, ...c], W = h[0]?.dataset.length ?? 0, g = h.flatMap((e) => e.dataset.map((t) => t.x)), Y = h.flatMap((e) => e.dataset.map((t) => t.y)), $ = r[0]?.dataset?.map((e, t) => r.reduce((o, a) => o + a.dataset[t]?.y || 0, 0)) ?? [0], j = Math.max(...$), z = Math.max(...c.flatMap((e) => e.dataset.map((t) => t.y))), X = Math.floor(Math.min(...Y) / 100) * 100, q = Math.ceil(Math.max(j, z) / 100) * 100, m = r.map((e, t) => ({
+    id: `stacked-${t}`,
+    guid: e.category_guid,
+    top_level_guid: e.top_level_category_guid,
+    area: !0,
+    color: r[t].category_color ?? I.palette.primary.main,
+    data: e.dataset.map((o) => o.y),
+    label: r[t].category_name,
+    stack: "total",
+    type: "line",
+    highlightScope: { highlight: "item" },
+    valueFormatter: (o) => k(o, "0,0")
+  })), C = c.map((e, t) => ({
+    id: `unstacked-${t}`,
+    guid: e.category_guid,
+    top_level_guid: e.top_level_category_guid,
+    area: !1,
+    color: e.category_color,
+    data: e.dataset.map((o) => o.y),
+    label: e.category_name,
+    type: "line",
+    valueFormatter: (o) => k(o, "0,0")
+  })), f = [...m, ...C], J = [...m.map(({ guid: e, top_level_guid: t }) => ({
+    guid: e,
+    top_level_guid: t
+  })), ...C.map(({ guid: e, top_level_guid: t }) => ({
+    guid: e,
+    top_level_guid: t
+  }))], u = (e) => {
+    const t = e.startsWith("stacked-") ? r[parseInt(e.split("-")[1])] : c[parseInt(e.split("-")[1])];
+    return {
+      guid: t?.category_guid,
+      topLevelGuid: t?.top_level_category_guid
+    };
+  }, K = (e) => {
+    N(e), P?.(e ?? "");
+  }, Q = (e) => {
+    y?.(e ?? "");
+  }, U = () => {
+    const e = u(String(s)).guid;
+    e && y?.(e);
+  }, V = (e) => {
+    const t = String(e?.seriesId), o = u(t).guid, a = f.find((v) => v.id === t), te = a && e?.dataIndex !== void 0, oe = a && e?.dataIndex === void 0;
+    if (te)
+      l({
+        hoveredSeriesId: t,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: d
+      }), R?.(o);
+    else if (oe) {
+      const v = a?.data.map((re, ae) => ({
+        x: g[ae],
+        y: re
+      })) ?? [];
+      l({
+        hoveredSeriesId: t,
+        hoveredAreaData: v,
+        isAreaHovered: !0,
+        cursorPos: d
+      }), E?.(o);
+    } else l({
+      hoveredSeriesId: null,
+      hoveredAreaData: null,
+      isAreaHovered: !1,
+      cursorPos: d
+    });
+  }, Z = (e) => {
+    if (e.target instanceof Element && e.target.classList[0]?.includes("MuiMarkElement-root")) return;
+    const t = e.currentTarget.getBoundingClientRect();
+    l((o) => ({
+      ...o,
+      cursorPos: {
+        x: e.clientX - t.left,
+        y: e.clientY - t.top
+      }
+    }));
+  }, ee = {
+    p: 4,
+    "& .MuiBarLabel-root": {
+      fontSize: 10,
+      fontWeight: 600
+    },
+    "& .MuiAreaElement-root": {
+      opacity: 0.4,
+      transition: "opacity 0.3s ease"
+    },
+    "& .MuiAreaElement-root:hover": { opacity: 1 },
+    '& [class*="MuiLineElement-series-unstacked-"]': { strokeWidth: 3 },
+    ...p && m.reduce((e, t, o) => {
+      const a = `.MuiAreaElement-series-stacked-${o}`;
+      return e[a] = { opacity: m[o].guid === p ? 0.9 : 0.2 }, e;
+    }, {})
+  };
+  return /* @__PURE__ */ i(pe, {
+    onMouseMove: Z,
+    ref: M,
+    sx: {
+      position: "relative",
+      touchAction: "pan-y",
+      "& svg": {
+        touchAction: "pan-y",
+        userSelect: "none"
+      },
+      "& .recharts-wrapper": { touchAction: "pan-y" }
+    },
+    children: /* @__PURE__ */ me(de, {
+      direction: {
+        xs: "column",
+        md: "column"
+      },
+      spacing: {
+        xs: 0,
+        md: 4
+      },
+      sx: {
+        width: "100%",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ i(fe, {
+          height: F,
+          hideLegend: !0,
+          margin: {
+            bottom: 24,
+            left: 12,
+            right: 54,
+            top: 48
+          },
+          onAreaClick: U,
+          onHighlightChange: V,
+          series: f,
+          skipAnimation: !0,
+          slotProps: { tooltip: { trigger: H ? "item" : "none" } },
+          slots: { tooltip: H && s ? (e) => /* @__PURE__ */ i(ge, { children: /* @__PURE__ */ i(le, {
+            ...e,
+            categoryGuids: u(s),
+            series: f,
+            xData: g
+          }) }) : void 0 },
+          sx: ee,
+          xAxis: [{
+            data: g,
+            scaleType: "time",
+            valueFormatter: (e) => L(e, T.MONTH_SHORT_YEAR),
+            tickNumber: W
+          }],
+          yAxis: [{
+            min: X,
+            max: q || 100,
+            valueFormatter: (e) => he(e).format("0a")
+          }]
+        }),
+        /* @__PURE__ */ i(ce, {
+          categoryGuids: J,
+          hoveredLegend: p,
+          legendRef: w,
+          onClickLegend: Q,
+          onHoverLegend: K,
+          sx: { px: b ? 0 : 24 }
+        }),
+        S && /* @__PURE__ */ i(ne, {
+          categoryGuids: u(s),
+          chartContainerRef: M,
+          cursorPosition: d,
+          hoveredAreaData: _.map((e) => ({
+            ...e,
+            x: L(e.x, T.MONTH_SHORT_YEAR)
+          }))
+        })
+      ]
+    })
+  });
+};
+export {
+  Ge as StackedLineChart
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/StackedLineChart/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/common/components/charts/StackedLineChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport numeral from 'numeral'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { LineSeriesType, HighlightItemData } from '@mui/x-charts'\nimport { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip'\nimport { LineChart } from '@mui/x-charts/LineChart'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { useScreenSize } from '../../hooks/useScreenSize'\nimport { useDimensions } from '../../hooks/useDimensions'\nimport CustomAreaTooltip from './stackedlinechart/CustomAreaTooltip'\nimport { CustomLegend } from './stackedlinechart/CustomLegend'\nimport { CustomPointTooltip } from './stackedlinechart/CustomPointTooltip'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ntype DataPoint = { x: Date; y: number }\ntype Dataset = DataPoint[]\n\ninterface StackedLineChartData {\n  top_level_category_guid: string\n  category_guid: string\n  category_name: string\n  category_color: string\n  dataset: Dataset\n}\n\ninterface StackedLineChartProps {\n  stackedDatasets: StackedLineChartData[]\n  unstackedDatasets?: StackedLineChartData[]\n  onHoverArea?: (category: string) => void\n  onHoverPoint?: (category: string) => void\n  onHoverLegend?: (category: string) => void\n  onClickLegend?: (category: string) => void\n  availableHeight?: number\n  minimumHeight?: number\n}\n\n// TODO: Use v8 X-Charts built-in features to avoid custom implementation\n\nexport const StackedLineChart: React.FC<StackedLineChartProps> = ({\n  onHoverArea,\n  onHoverPoint,\n  onHoverLegend,\n  onClickLegend,\n  stackedDatasets,\n  unstackedDatasets = [],\n  availableHeight = 0,\n  minimumHeight = 350,\n}) => {\n  const theme = useTheme()\n  const { isMobile } = useScreenSize()\n  const [legendRef, { height: legendHeight }] = useDimensions()\n  const chartContainerRef = React.useRef<HTMLDivElement>(null)\n  const [chartHeight, setChartHeight] = React.useState<number>(0)\n\n  // Control responsive chart height based on available height\n  React.useEffect(() => {\n    const newChartHeight = Math.max(availableHeight - legendHeight, minimumHeight)\n    setChartHeight(newChartHeight)\n  }, [availableHeight, legendHeight])\n\n  const [hoveredLegend, setHoveredLegend] = React.useState<string | null>(null)\n  const [hoverState, setHoverState] = React.useState({\n    hoveredSeriesId: null as string | null,\n    hoveredAreaData: null as DataPoint[] | null,\n    isAreaHovered: false,\n    cursorPos: { x: 0, y: 0 },\n  })\n\n  const { hoveredSeriesId, hoveredAreaData, isAreaHovered, cursorPos } = hoverState\n  const showAreaTooltip = isAreaHovered && hoveredSeriesId && hoveredAreaData\n  const showPointTooltip = !showAreaTooltip\n\n  const datasets = [...stackedDatasets, ...unstackedDatasets]\n  const xTicks = datasets[0]?.dataset.length ?? 0\n  const xData = datasets.flatMap((data) => data.dataset.map((d) => d.x))\n  const yData = datasets.flatMap((data) => data.dataset.map((d) => d.y))\n\n  // Calculate max cumulative heights for stacked datasets\n  const cumulativeHeights = stackedDatasets[0]?.dataset?.map((_, i) =>\n    stackedDatasets.reduce((sum, dataset) => sum + dataset.dataset[i]?.y || 0, 0),\n  ) ?? [0]\n  const stackedMax = Math.max(...cumulativeHeights)\n  const unstackedMax = Math.max(\n    ...unstackedDatasets.flatMap((data) => data.dataset.map((d) => d.y)),\n  )\n\n  const yMin = Math.floor(Math.min(...yData) / 100) * 100\n  const yMax = Math.ceil(Math.max(stackedMax, unstackedMax) / 100) * 100\n\n  const stackedSeries = stackedDatasets.map((data, index) => ({\n    id: `stacked-${index}`,\n    guid: data.category_guid,\n    top_level_guid: data.top_level_category_guid,\n    area: true,\n    color: stackedDatasets[index].category_color ?? theme.palette.primary.main,\n    data: data.dataset.map((d) => d.y),\n    label: stackedDatasets[index].category_name,\n    stack: 'total',\n    type: 'line',\n    highlightScope: { highlight: 'item' },\n    valueFormatter: (value: number) => formatCurrency(value, '0,0'),\n  }))\n\n  const unstackedSeries = unstackedDatasets.map((data, index) => ({\n    id: `unstacked-${index}`,\n    guid: data.category_guid,\n    top_level_guid: data.top_level_category_guid,\n    area: false,\n    color: data.category_color,\n    data: data.dataset.map((d) => d.y),\n    label: data.category_name,\n    type: 'line',\n    valueFormatter: (value: number) => formatCurrency(value, '0,0'),\n  }))\n\n  const series = [...stackedSeries, ...unstackedSeries]\n  const guids = [\n    ...stackedSeries.map(({ guid, top_level_guid }) => ({\n      guid,\n      top_level_guid,\n    })),\n    ...unstackedSeries.map(({ guid, top_level_guid }) => ({\n      guid,\n      top_level_guid,\n    })),\n  ]\n\n  const getSeriesCategoryGuids = (seriesId: string) => {\n    const isStacked = seriesId.startsWith('stacked-')\n    const dataset = isStacked\n      ? stackedDatasets[parseInt(seriesId.split('-')[1])]\n      : unstackedDatasets[parseInt(seriesId.split('-')[1])]\n    return {\n      guid: dataset?.category_guid,\n      topLevelGuid: dataset?.top_level_category_guid,\n    }\n  }\n\n  const handleHoverLegend = (guid: string | null) => {\n    setHoveredLegend(guid)\n    onHoverLegend?.(guid ?? '')\n  }\n\n  const handleClickLegend = (guid: string | null) => {\n    onClickLegend?.(guid ?? '')\n  }\n\n  const handleClickArea = () => {\n    const clickedSeriesGuid = getSeriesCategoryGuids(String(hoveredSeriesId)).guid\n    if (clickedSeriesGuid) onClickLegend?.(clickedSeriesGuid)\n  }\n\n  const handleHighlightChange = (highlightedItem: HighlightItemData | null) => {\n    const hoveredSeriesId = String(highlightedItem?.seriesId)\n    const hoveredSeriesGuid = getSeriesCategoryGuids(hoveredSeriesId).guid\n    const hoveredSeries = series.find((s) => s.id === hoveredSeriesId)\n    const isPointHovered = hoveredSeries && highlightedItem?.dataIndex !== undefined\n    const isAreaHovered = hoveredSeries && highlightedItem?.dataIndex === undefined\n\n    if (isPointHovered) {\n      setHoverState({\n        hoveredSeriesId: hoveredSeriesId,\n        hoveredAreaData: null,\n        isAreaHovered: false,\n        cursorPos,\n      })\n      onHoverPoint?.(hoveredSeriesGuid)\n    } else if (isAreaHovered) {\n      const hoveredDataPoints =\n        hoveredSeries?.data.map((yValue, index) => ({\n          x: xData[index],\n          y: yValue,\n        })) ?? []\n\n      setHoverState({\n        hoveredSeriesId: hoveredSeriesId,\n        hoveredAreaData: hoveredDataPoints,\n        isAreaHovered: true,\n        cursorPos,\n      })\n      onHoverArea?.(hoveredSeriesGuid)\n    } else {\n      setHoverState({\n        hoveredSeriesId: null,\n        hoveredAreaData: null,\n        isAreaHovered: false,\n        cursorPos,\n      })\n    }\n  }\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (\n      event.target instanceof Element &&\n      event.target.classList[0]?.includes('MuiMarkElement-root')\n    )\n      return\n\n    const rect = event.currentTarget.getBoundingClientRect()\n    setHoverState((prev) => ({\n      ...prev,\n      cursorPos: {\n        x: event.clientX - rect.left,\n        y: event.clientY - rect.top,\n      },\n    }))\n  }\n\n  const customStyles = {\n    p: 4,\n    '& .MuiBarLabel-root': {\n      fontSize: 10,\n      fontWeight: 600,\n    },\n    '& .MuiAreaElement-root': {\n      opacity: 0.4,\n      transition: 'opacity 0.3s ease',\n    },\n    '& .MuiAreaElement-root:hover': {\n      opacity: 1,\n    },\n    '& [class*=\"MuiLineElement-series-unstacked-\"]': {\n      strokeWidth: 3,\n    },\n    ...(hoveredLegend &&\n      stackedSeries.reduce<Record<string, any>>((acc, _, index) => {\n        const selector = `.MuiAreaElement-series-stacked-${index}`\n        acc[selector] = {\n          opacity: stackedSeries[index].guid === hoveredLegend ? 0.9 : 0.2,\n        }\n        return acc\n      }, {})),\n  }\n\n  return (\n    <Box\n      onMouseMove={handleMouseMove}\n      ref={chartContainerRef}\n      sx={{\n        position: 'relative',\n        touchAction: 'pan-y',\n        '& svg': {\n          touchAction: 'pan-y',\n          userSelect: 'none',\n        },\n        '& .recharts-wrapper': {\n          touchAction: 'pan-y',\n        },\n      }}\n    >\n      <Stack\n        direction={{ xs: 'column', md: 'column' }}\n        spacing={{ xs: 0, md: 4 }}\n        sx={{ width: '100%', position: 'relative' }}\n      >\n        <LineChart\n          height={chartHeight}\n          hideLegend={true}\n          margin={{ bottom: 24, left: 12, right: 54, top: 48 }}\n          onAreaClick={handleClickArea}\n          onHighlightChange={handleHighlightChange}\n          series={series as LineSeriesType[]}\n          skipAnimation={true}\n          slotProps={{\n            tooltip: { trigger: showPointTooltip ? 'item' : 'none' },\n          }}\n          slots={{\n            tooltip:\n              showPointTooltip && hoveredSeriesId\n                ? (props) => (\n                    <ChartsTooltipContainer>\n                      <CustomPointTooltip\n                        {...props}\n                        categoryGuids={getSeriesCategoryGuids(hoveredSeriesId)}\n                        series={series}\n                        xData={xData}\n                      />\n                    </ChartsTooltipContainer>\n                  )\n                : undefined,\n          }}\n          sx={customStyles}\n          xAxis={[\n            {\n              data: xData,\n              scaleType: 'time',\n              valueFormatter: (value: Date) =>\n                formatDate(value, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n              tickNumber: xTicks, // How many ticks to show on the x-axis\n            },\n          ]}\n          yAxis={[\n            {\n              min: yMin,\n              max: yMax || 100,\n              valueFormatter: (value: number) => numeral(value).format('0a'),\n            },\n          ]}\n        />\n        <CustomLegend\n          categoryGuids={guids}\n          hoveredLegend={hoveredLegend}\n          legendRef={legendRef}\n          onClickLegend={handleClickLegend}\n          onHoverLegend={handleHoverLegend}\n          sx={{ px: isMobile ? 0 : 24 }}\n        />\n\n        {showAreaTooltip && (\n          <CustomAreaTooltip\n            categoryGuids={getSeriesCategoryGuids(hoveredSeriesId)}\n            chartContainerRef={chartContainerRef}\n            cursorPosition={cursorPos}\n            hoveredAreaData={hoveredAreaData.map((point) => ({\n              ...point,\n              x: formatDate(point.x, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n            }))}\n          />\n        )}\n      </Stack>\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/common/components/charts/StatusBar/index.es.js

@@ -0,0 +1,25 @@
+import i from "@mui/material/Stack";
+import { jsx as a } from "react/jsx-runtime";
+import p from "@mui/material/Box";
+var n = ({ data: d, height: r = 8 }) => {
+  const o = `${r / 4}px`;
+  return /* @__PURE__ */ a(i, {
+    bgcolor: "divider",
+    borderRadius: o,
+    direction: "row",
+    gap: 2,
+    height: r,
+    width: "100%",
+    children: d.map((t, c) => /* @__PURE__ */ a(p, {
+      bgcolor: t.color,
+      borderRadius: o,
+      height: r,
+      width: t.percentage
+    }, c))
+  });
+};
+export {
+  n as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/StatusBar/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/common/components/charts/StatusBar.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nexport type StatusBarData = {\n  color: string\n  percentage: string\n}\n\ninterface StatusBarProps {\n  data: StatusBarData[]\n  height?: number\n}\n\nconst StatusBar = ({ data, height = 8 }: StatusBarProps) => {\n  const borderRadius = `${height / 4}px`\n\n  return (\n    <Stack\n      bgcolor=\"divider\"\n      borderRadius={borderRadius}\n      direction=\"row\"\n      gap={2}\n      height={height}\n      width=\"100%\"\n    >\n      {data.map((item, index) => (\n        <Box\n          bgcolor={item.color}\n          borderRadius={borderRadius}\n          height={height}\n          key={index}\n          width={item.percentage}\n        />\n      ))}\n    </Stack>\n  )\n}\n\nexport default StatusBar\n"],"mappings":";;;AAaA,IAAM,IAAA,CAAa,EAAE,MAAA,GAAM,QAAA,IAAS,EAAA,MAAwB;AAC1D,QAAM,IAAe,GAAG,IAAS,CAAA;AAEjC,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,SAAQ;AAAA,IACM,cAAA;AAAA,IACd,WAAU;AAAA,IACV,KAAK;AAAA,IACG,QAAA;AAAA,IACR,OAAM;AAAA,cAEL,EAAK,IAAA,CAAK,GAAM,MACf,gBAAA,EAAC,GAAD;AAAA,MACE,SAAS,EAAK;AAAA,MACA,cAAA;AAAA,MACN,QAAA;AAAA,MAER,OAAO,EAAK;AAAA,IACb,GAFM,CAEN,CACF;AAAA,EACI,CAAA;AAEX"}

package/dist/common/components/daterangeselector/DateRangeSelector/index.es.js

@@ -0,0 +1,258 @@
+import { DATE_FORMATS_INTL as u, formatDate as h } from "../../../../core/constants/DateFormats/index.es.js";
+import { useScreenSize as V } from "../../../hooks/useScreenSize/index.es.js";
+import { useAriaLive as X } from "../../../hooks/useAriaLive/index.es.js";
+import Z from "../../dialog/Dialog/index.es.js";
+import ee from "../../drawer/Drawer/index.es.js";
+import l from "react";
+import te from "@mui/material/Stack";
+import { DateRangePicker as I, Icon as R, Text as Y } from "@mxenabled/mxui";
+import { addDays as ae } from "date-fns/addDays";
+import { addMonths as z } from "date-fns/addMonths";
+import { endOfMonth as k } from "date-fns/endOfMonth";
+import { startOfMonth as oe } from "date-fns/startOfMonth";
+import { startOfToday as re } from "date-fns/startOfToday";
+import { subMonths as y } from "date-fns/subMonths";
+import O from "@mui/material/Button";
+import { jsx as a, jsxs as f } from "react/jsx-runtime";
+import { useTheme as ne } from "@mui/material/styles";
+import F from "@mui/material/Box";
+import { addYears as w } from "date-fns/addYears";
+import { differenceInCalendarDays as ie } from "date-fns/differenceInCalendarDays";
+import { endOfDay as se } from "date-fns/endOfDay";
+import { endOfToday as j } from "date-fns/endOfToday";
+import { endOfYear as le } from "date-fns/endOfYear";
+import { startOfYear as de } from "date-fns/startOfYear";
+import { subDays as me } from "date-fns/subDays";
+import { subYears as G } from "date-fns/subYears";
+import ue from "@mui/material/ButtonGroup";
+import he from "@mui/material/Tab";
+import fe from "@mui/material/Tabs";
+import pe from "@mui/material/ToggleButton";
+import ce from "@mui/material/ToggleButtonGroup";
+var Je = ({ calendarActions: o, color: x = "primary", copy: t, range: C = [oe(re()), k(j())], shouldShrinkToIcon: $ = !0, variant: n = "outlined" }) => {
+  const _ = ne(), { isMobile: D } = V(), { announce: W, ariaLive: E } = X(), [c, P] = l.useState(C), [i, q] = l.useState(t.dateRangePickerCopy.dateRangeThisMonth), [p, N] = l.useState(c), [v, M] = l.useState(!1), [J, K] = l.useState(!0), [T, Q] = l.useState(6), S = {
+    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
+      }
+    ]
+  };
+  l.useEffect(() => {
+    P(C), N(C);
+  }, [C]), l.useEffect(() => {
+    (n === "timeframebuttons" || n === "timeframetabs") && o.onRangeChanged(U());
+  }, [T]);
+  const U = () => {
+    const e = k(j());
+    return [k(y(e, T)), e];
+  }, L = (e) => {
+    const [r, s] = c, d = e === "previous";
+    let m;
+    if (i === t.dateRangePickerCopy.dateRangeThisMonth || i === t.dateRangePickerCopy.dateRangeLastMonth) m = [d ? y(r, 1) : z(r, 1), k(d ? y(s, 1) : z(s, 1))];
+    else if (i === t.dateRangePickerCopy.dateRangeYTD || i === t.dateRangePickerCopy.dateRangeLastYear) {
+      const g = de(r), b = le(r);
+      m = [d ? G(g, 1) : w(g, 1), d ? G(b, 1) : w(b, 1)];
+    } else {
+      const g = ie(s, r), b = d ? me : ae;
+      m = [b(r, g), b(s, g)];
+    }
+    P(m), o.onRangeChanged(m);
+  }, A = () => {
+    P(p), K(i === t.dateRangePickerCopy.dateRangeThisMonth || i === t.dateRangePickerCopy.dateRangeLastMonth), o.onRangeChanged(p);
+  }, B = (e, r) => {
+    e[1] = e[1] ?? e[0];
+    const s = [e[0], e[1] ? se(e[1]) : e[1]], d = h(s[0], u.MONTH_DAY_YEAR), m = h(s[1], u.MONTH_DAY_YEAR);
+    N(s), q(r), W(`${t.dateRangeEditTitle}: ${d} - ${m}`);
+  }, H = (e) => {
+    Q(e), o.onTimeframeClick?.(e);
+  };
+  return /* @__PURE__ */ f(F, {
+    className: "mx-cmn-date-range-selector",
+    m: 4,
+    children: [
+      /* @__PURE__ */ f(F, {
+        sx: {
+          [_.breakpoints.down("sm")]: {
+            display: $ ? "none" : "flex",
+            justifyContent: "center"
+          },
+          [_.breakpoints.up("sm")]: { display: "inline-flex" }
+        },
+        children: [
+          n === "readonly" && /* @__PURE__ */ f(te, {
+            alignItems: "center",
+            direction: "row",
+            gap: 8,
+            children: [
+              /* @__PURE__ */ a(R, {
+                name: "calendar_month",
+                size: 24
+              }),
+              /* @__PURE__ */ a(Y, {
+                bold: !0,
+                children: h(p[0], u.MONTH_DAY)
+              }),
+              /* @__PURE__ */ a(R, { name: "remove" }),
+              /* @__PURE__ */ a(Y, {
+                bold: !0,
+                children: h(p[1], u.MONTH_DAY_YEAR)
+              })
+            ]
+          }),
+          n !== "readonly" && n !== "timeframebuttons" && n !== "timeframetabs" && /* @__PURE__ */ f(ue, {
+            color: x,
+            sx: {
+              "& .MuiButtonGroup-grouped": { padding: D ? 0 : 12 },
+              "& .MuiButtonGroup-middleButton": { px: 24 },
+              height: 44
+            },
+            variant: n,
+            children: [
+              /* @__PURE__ */ a(O, {
+                "aria-disabled": o.shouldDisablePrevious,
+                "aria-label": t.dateRangePreviousAria,
+                color: o.shouldDisablePrevious ? "secondary" : "primary",
+                onClick: () => o.shouldDisablePrevious ? null : L("previous"),
+                children: /* @__PURE__ */ a(R, {
+                  name: "chevron_left",
+                  size: 20
+                })
+              }),
+              /* @__PURE__ */ a(O, {
+                "aria-disabled": o.shouldDisablePicker,
+                color: x,
+                onClick: () => o.shouldDisablePicker ? null : M(!0),
+                startIcon: /* @__PURE__ */ a(R, {
+                  name: "calendar_month",
+                  size: 20
+                }),
+                sx: { p: D ? 0 : 8 },
+                children: J ? h(c[0], u.MONTH_YEAR) : /* @__PURE__ */ f("span", { children: [
+                  h(c[0], u.MONTH_DAY_YEAR),
+                  " -",
+                  " ",
+                  h(c[1], u.MONTH_DAY_YEAR)
+                ] })
+              }),
+              /* @__PURE__ */ a(O, {
+                "aria-disabled": o.shouldDisableNext,
+                "aria-label": t.dateRangeNextAria,
+                color: o.shouldDisableNext ? "secondary" : "primary",
+                onClick: () => o.shouldDisableNext ? null : L("next"),
+                children: /* @__PURE__ */ a(R, {
+                  name: "chevron_right",
+                  size: 20
+                })
+              })
+            ]
+          }),
+          n === "timeframebuttons" && /* @__PURE__ */ a(ce, {
+            "aria-label": t.dateRangeEditTitle,
+            color: x,
+            exclusive: !0,
+            orientation: "horizontal",
+            value: T,
+            children: S.buttons.map((e) => /* @__PURE__ */ a(pe, {
+              "aria-label": e.ariaLabel,
+              onClick: () => H(e.value),
+              sx: { width: 56 },
+              value: e.value,
+              children: e.label
+            }, e.label))
+          }),
+          n === "timeframetabs" && /* @__PURE__ */ a(fe, {
+            indicatorColor: "primary",
+            onChange: (e, r) => H(r),
+            textColor: "primary",
+            value: T,
+            variant: "fullWidth",
+            children: S.tabs.map((e) => /* @__PURE__ */ a(he, {
+              label: /* @__PURE__ */ a(Y, {
+                bold: !0,
+                variant: "body1",
+                children: e.label
+              }),
+              sx: { minWidth: 80 },
+              value: e.value
+            }, e.label))
+          })
+        ]
+      }),
+      v && D && /* @__PURE__ */ f(ee, {
+        ariaLabelClose: t.dateRangeCloseAria,
+        isOpen: v,
+        onClose: () => M(!1),
+        onPrimaryAction: () => {
+          A(), M(!1);
+        },
+        primaryText: t.dateRangeEditApply,
+        title: t.dateRangeEditTitle,
+        children: [E, /* @__PURE__ */ a(I, {
+          copy: t.dateRangePickerCopy,
+          dateRange: p,
+          onRangeChanged: B,
+          selectedShortcut: i,
+          sx: { p: 0 }
+        })]
+      }),
+      v && !D && /* @__PURE__ */ f(Z, {
+        copy: { title: t.dateRangeEditTitle },
+        isOpen: !0,
+        onClose: () => M(!1),
+        onPrimaryAction: () => A(),
+        primaryText: t.dateRangeEditApply,
+        sx: { "& .MuiDialogContent-root": { padding: 0 } },
+        children: [E, /* @__PURE__ */ a(I, {
+          copy: t.dateRangePickerCopy,
+          dateRange: p,
+          onRangeChanged: B,
+          selectedShortcut: i,
+          sx: {
+            pt: 0,
+            "& .MuiPickersLayout-toolbar": { gridColumn: "1/4" }
+          }
+        })]
+      })
+    ]
+  });
+};
+export {
+  Je as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/daterangeselector/DateRangeSelector/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/common/components/daterangeselector/DateRangeSelector.tsx"],"sourcesContent":["import React from 'react'\nimport { addMonths } from 'date-fns/addMonths'\nimport { addDays } from 'date-fns/addDays'\nimport { addYears } from 'date-fns/addYears'\nimport { differenceInCalendarDays } from 'date-fns/differenceInCalendarDays'\nimport { endOfDay } from 'date-fns/endOfDay'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { endOfToday } from 'date-fns/endOfToday'\nimport { endOfYear } from 'date-fns/endOfYear'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { startOfToday } from 'date-fns/startOfToday'\nimport { startOfYear } from 'date-fns/startOfYear'\nimport { subMonths } from 'date-fns/subMonths'\nimport { subDays } from 'date-fns/subDays'\nimport { subYears } from 'date-fns/subYears'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport ButtonGroup from '@mui/material/ButtonGroup'\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\nimport ToggleButton from '@mui/material/ToggleButton'\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup'\nimport { useTheme } from '@mui/material/styles'\n\nimport { DateRange } from '@mui/x-date-pickers-pro'\n\nimport { DateRangePicker, DateRangePickerCopy, Icon, Text } from '@mxenabled/mxui'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { useScreenSize } from '../../hooks'\nimport { useAriaLive } from '../../hooks/useAriaLive'\nimport Dialog from '../dialog/Dialog'\nimport Drawer from '../drawer/Drawer'\n\nexport type DateRangeSelectorCopy = {\n  dateRangePickerCopy: DateRangePickerCopy\n  dateRangeEditApply: string\n  dateRangeEditTitle: string\n  dateRangeNextAria: string\n  dateRangePreviousAria: string\n  dateRangeCloseAria: string\n}\n\nexport type CalendarActions = {\n  shouldDisableNext?: boolean\n  shouldDisablePrevious?: boolean\n  shouldDisablePicker?: boolean\n  onRangeChanged: (dateRange: DateRange<Date>) => void\n  /**\n   * Fires only when the user actively selects a timeframe button/tab (3M/6M/9M/1Y).\n   * Unlike onRangeChanged, this does NOT fire on mount, so it's safe for click analytics.\n   */\n  onTimeframeClick?: (timeframe: number) => void\n}\n\nexport interface DateRangeSelectorProps {\n  calendarActions: CalendarActions\n  color?: 'primary' | 'secondary'\n  copy: DateRangeSelectorCopy\n  range?: DateRange<Date>\n  shouldShrinkToIcon?: boolean\n  variant?: 'outlined' | 'text' | 'readonly' | 'timeframebuttons' | 'timeframetabs'\n}\n\nexport type Timeframe = {\n  ariaLabel?: string\n  label: string\n  value: number\n}\n\nconst DateRangeSelector: React.FC<DateRangeSelectorProps> = ({\n  calendarActions,\n  color = 'primary',\n  copy,\n  range = [startOfMonth(startOfToday()), endOfMonth(endOfToday())],\n  shouldShrinkToIcon = true,\n  variant = 'outlined',\n}) => {\n  const theme = useTheme()\n  const { isMobile } = useScreenSize()\n  const { announce, ariaLive } = useAriaLive()\n\n  const [dateRange, setDateRange] = React.useState<DateRange<Date>>(range)\n  const [shortcut, setShortcut] = React.useState(copy.dateRangePickerCopy.dateRangeThisMonth)\n  const [pickerDateRange, setPickerDateRange] = React.useState(dateRange)\n  const [isPickerOpen, setIsPickerOpen] = React.useState(false)\n  const [isMonthFormat, setIsMonthFormat] = React.useState(true)\n  const [timeframe, setTimeframe] = React.useState(6)\n\n  // TODO: put labels in mrs content and use as copy\n  const timeframes = {\n    buttons: [\n      { ariaLabel: '3 Months', label: '3M', value: 3 },\n      { ariaLabel: '6 Months', label: '6M', value: 6 },\n      { ariaLabel: '9 Months', label: '9M', value: 9 },\n      { ariaLabel: '1 Year', label: '1Y', value: 12 },\n    ],\n    tabs: [\n      { label: '3 Months', value: 3 },\n      { label: '6 Months', value: 6 },\n      { label: '9 Months', value: 9 },\n      { label: '1 Year', value: 12 },\n    ],\n  }\n\n  React.useEffect(() => {\n    setDateRange(range)\n    setPickerDateRange(range)\n  }, [range])\n\n  // dates for timeframe buttons\n  // using today's date as the end date, looks back 3, 6, 9, or 12 months\n  React.useEffect(() => {\n    if (variant === 'timeframebuttons' || variant === 'timeframetabs') {\n      calendarActions.onRangeChanged(getTimeFrameDates())\n    }\n  }, [timeframe])\n\n  const getTimeFrameDates = () => {\n    const timeframeEndDate = endOfMonth(endOfToday()) as Date\n    const timeframeBeginDate = endOfMonth(subMonths(timeframeEndDate, timeframe))\n    return [timeframeBeginDate, timeframeEndDate] as DateRange<Date>\n  }\n\n  const handlePrevNextClick = (direction: 'previous' | 'next') => {\n    const [beginDate, endDate] = dateRange as [Date, Date]\n    const isPrev = direction === 'previous'\n\n    let newRange: DateRange<Date>\n\n    // Month-based shortcuts\n    if (\n      shortcut === copy.dateRangePickerCopy.dateRangeThisMonth ||\n      shortcut === copy.dateRangePickerCopy.dateRangeLastMonth\n    ) {\n      newRange = [\n        isPrev ? subMonths(beginDate, 1) : addMonths(beginDate, 1),\n        endOfMonth(isPrev ? subMonths(endDate, 1) : addMonths(endDate, 1)),\n      ]\n    }\n    // Year-based shortcuts\n    else if (\n      shortcut === copy.dateRangePickerCopy.dateRangeYTD ||\n      shortcut === copy.dateRangePickerCopy.dateRangeLastYear\n    ) {\n      const startYear = startOfYear(beginDate)\n      const endYear = endOfYear(beginDate)\n      newRange = [\n        isPrev ? subYears(startYear, 1) : addYears(startYear, 1),\n        isPrev ? subYears(endYear, 1) : addYears(endYear, 1),\n      ]\n    }\n    // Custom date range - shift by the current range duration\n    else {\n      const dayOffset = differenceInCalendarDays(endDate, beginDate)\n      const dateModifier = isPrev ? subDays : addDays\n      newRange = [dateModifier(beginDate, dayOffset), dateModifier(endDate, dayOffset)]\n    }\n\n    setDateRange(newRange)\n    calendarActions.onRangeChanged(newRange)\n  }\n\n  const handleRangeChanged = () => {\n    setDateRange(pickerDateRange)\n    setIsMonthFormat(\n      shortcut === copy.dateRangePickerCopy.dateRangeThisMonth ||\n        shortcut === copy.dateRangePickerCopy.dateRangeLastMonth,\n    )\n    calendarActions.onRangeChanged(pickerDateRange)\n  }\n\n  const handleDataRangePickerChange = (range: DateRange<Date>, shortcut: string) => {\n    range[1] = range[1] ?? range[0]\n\n    const adjustedRange: DateRange<Date> = [range[0], range[1] ? endOfDay(range[1]) : range[1]]\n    const startFormatted = formatDate(adjustedRange[0] as Date, DATE_FORMATS_INTL.MONTH_DAY_YEAR)\n    const endFormatted = formatDate(adjustedRange[1] as Date, DATE_FORMATS_INTL.MONTH_DAY_YEAR)\n\n    setPickerDateRange(adjustedRange)\n    setShortcut(shortcut)\n    announce(`${copy.dateRangeEditTitle}: ${startFormatted} - ${endFormatted}`)\n  }\n\n  const handleTimeframeChanged = (timeframe: number) => {\n    setTimeframe(timeframe)\n    calendarActions.onTimeframeClick?.(timeframe)\n  }\n\n  return (\n    <Box className=\"mx-cmn-date-range-selector\" m={4}>\n      <Box\n        sx={{\n          [theme.breakpoints.down('sm')]: {\n            display: shouldShrinkToIcon ? 'none' : 'flex',\n            justifyContent: 'center',\n          },\n          [theme.breakpoints.up('sm')]: { display: 'inline-flex' },\n        }}\n      >\n        {variant === 'readonly' && (\n          <Stack alignItems=\"center\" direction=\"row\" gap={8}>\n            <Icon name=\"calendar_month\" size={24} />\n            <Text bold={true}>\n              {formatDate(pickerDateRange[0] as Date, DATE_FORMATS_INTL.MONTH_DAY)}\n            </Text>\n            <Icon name=\"remove\" />\n            <Text bold={true}>\n              {formatDate(pickerDateRange[1] as Date, DATE_FORMATS_INTL.MONTH_DAY_YEAR)}\n            </Text>\n          </Stack>\n        )}\n\n        {variant !== 'readonly' &&\n          variant !== 'timeframebuttons' &&\n          variant !== 'timeframetabs' && (\n            <ButtonGroup\n              color={color}\n              sx={{\n                '& .MuiButtonGroup-grouped': {\n                  padding: isMobile ? 0 : 12,\n                },\n                '& .MuiButtonGroup-middleButton': {\n                  px: 24,\n                },\n                height: 44,\n              }}\n              variant={variant}\n            >\n              <Button\n                aria-disabled={calendarActions.shouldDisablePrevious}\n                aria-label={copy.dateRangePreviousAria}\n                color={calendarActions.shouldDisablePrevious ? 'secondary' : 'primary'}\n                onClick={() =>\n                  calendarActions.shouldDisablePrevious ? null : handlePrevNextClick('previous')\n                }\n              >\n                <Icon name=\"chevron_left\" size={20} />\n              </Button>\n              <Button\n                aria-disabled={calendarActions.shouldDisablePicker}\n                color={color}\n                onClick={() => (calendarActions.shouldDisablePicker ? null : setIsPickerOpen(true))}\n                startIcon={<Icon name=\"calendar_month\" size={20} />}\n                sx={{\n                  p: isMobile ? 0 : 8,\n                }}\n              >\n                {isMonthFormat ? (\n                  formatDate(dateRange[0] as Date, DATE_FORMATS_INTL.MONTH_YEAR)\n                ) : (\n                  <span>\n                    {formatDate(dateRange[0] as Date, DATE_FORMATS_INTL.MONTH_DAY_YEAR)} -{' '}\n                    {formatDate(dateRange[1] as Date, DATE_FORMATS_INTL.MONTH_DAY_YEAR)}\n                  </span>\n                )}\n              </Button>\n              <Button\n                aria-disabled={calendarActions.shouldDisableNext}\n                aria-label={copy.dateRangeNextAria}\n                color={calendarActions.shouldDisableNext ? 'secondary' : 'primary'}\n                onClick={() =>\n                  calendarActions.shouldDisableNext ? null : handlePrevNextClick('next')\n                }\n              >\n                <Icon name=\"chevron_right\" size={20} />\n              </Button>\n            </ButtonGroup>\n          )}\n\n        {variant === 'timeframebuttons' && (\n          <ToggleButtonGroup\n            aria-label={copy.dateRangeEditTitle}\n            color={color}\n            exclusive={true}\n            orientation=\"horizontal\"\n            value={timeframe}\n          >\n            {timeframes.buttons.map((timeframe: Timeframe) => (\n              <ToggleButton\n                aria-label={timeframe.ariaLabel}\n                key={timeframe.label}\n                onClick={() => handleTimeframeChanged(timeframe.value)}\n                sx={{ width: 56 }}\n                value={timeframe.value}\n              >\n                {timeframe.label}\n              </ToggleButton>\n            ))}\n          </ToggleButtonGroup>\n        )}\n\n        {variant === 'timeframetabs' && (\n          <Tabs\n            indicatorColor=\"primary\"\n            onChange={(_, newValue) => handleTimeframeChanged(newValue)}\n            textColor=\"primary\"\n            value={timeframe}\n            variant=\"fullWidth\"\n          >\n            {timeframes.tabs.map((timeframe: Timeframe) => (\n              <Tab\n                key={timeframe.label}\n                label={\n                  <Text bold={true} variant=\"body1\">\n                    {timeframe.label}\n                  </Text>\n                }\n                sx={{ minWidth: 80 }}\n                value={timeframe.value}\n              />\n            ))}\n          </Tabs>\n        )}\n      </Box>\n\n      {isPickerOpen && isMobile && (\n        <Drawer\n          ariaLabelClose={copy.dateRangeCloseAria}\n          isOpen={isPickerOpen}\n          onClose={() => setIsPickerOpen(false)}\n          onPrimaryAction={() => {\n            handleRangeChanged()\n            setIsPickerOpen(false)\n          }}\n          primaryText={copy.dateRangeEditApply}\n          title={copy.dateRangeEditTitle}\n        >\n          {ariaLive}\n          <DateRangePicker\n            copy={copy.dateRangePickerCopy}\n            dateRange={pickerDateRange}\n            onRangeChanged={handleDataRangePickerChange}\n            selectedShortcut={shortcut}\n            sx={{ p: 0 }}\n          />\n        </Drawer>\n      )}\n\n      {isPickerOpen && !isMobile && (\n        <Dialog\n          copy={{ title: copy.dateRangeEditTitle }}\n          isOpen={true}\n          onClose={() => setIsPickerOpen(false)}\n          onPrimaryAction={() => handleRangeChanged()}\n          primaryText={copy.dateRangeEditApply}\n          sx={{\n            '& .MuiDialogContent-root': {\n              padding: 0,\n            },\n          }}\n        >\n          {ariaLive}\n          <DateRangePicker\n            copy={copy.dateRangePickerCopy}\n            dateRange={pickerDateRange}\n            onRangeChanged={handleDataRangePickerChange}\n            selectedShortcut={shortcut}\n            sx={{\n              pt: 0,\n              '& .MuiPickersLayout-toolbar': {\n                gridColumn: '1/4',\n              },\n            }}\n          />\n        </Dialog>\n      )}\n    </Box>\n  )\n}\n\nexport default DateRangeSelector\n"],"mappings":"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"}

package/dist/common/components/dialog/Dialog/index.es.js

@@ -0,0 +1,58 @@
+import { useScreenSize as D } from "../../../hooks/useScreenSize/index.es.js";
+import "react";
+import { DialogFooter as y, DialogHeader as P } from "@mxenabled/mxui";
+import { jsx as i, jsxs as S } from "react/jsx-runtime";
+import A from "@mui/material/Dialog";
+import M from "@mui/material/DialogContent";
+var z = ({ className: l, copy: o, disablePrimaryButton: t = !1, isOpen: m = !1, onClose: a, onPrimaryAction: n, primaryColor: c = "primary", primaryText: s = "Confirm", onSecondaryAction: e, secondaryColor: p = "primary", secondaryText: d = "Cancel", children: f, ...g }) => {
+  const r = o?.title ?? "", u = o?.close_aria ?? "Close", { isSmallMobile: h } = D(), b = () => {
+    n?.(), a();
+  }, x = () => {
+    e && e(), a();
+  };
+  return /* @__PURE__ */ i("div", {
+    className: `mx-cmn-dialog ${l}`,
+    children: /* @__PURE__ */ S(A, {
+      "aria-label": r,
+      "aria-labelledby": void 0,
+      maxWidth: "xs",
+      onClose: a,
+      open: m,
+      slotProps: { paper: { "aria-label": r } },
+      sx: {
+        "& .MuiDialog-paperScrollPaper": { backgroundColor: "background.default" },
+        ...h && { "& .MuiDialog-paper": { minWidth: "100%" } },
+        height: "100%"
+      },
+      ...g,
+      children: [
+        /* @__PURE__ */ i(P, {
+          copy: {
+            title: r,
+            close_aria: u
+          },
+          onClose: a,
+          truncate: !0
+        }),
+        /* @__PURE__ */ i(M, {
+          sx: { lineHeight: 1.5 },
+          children: f
+        }),
+        /* @__PURE__ */ i(y, {
+          isPrimaryDisabled: t,
+          onPrimaryAction: b,
+          onSecondaryAction: x,
+          primaryColor: c,
+          primaryText: s,
+          secondaryColor: p,
+          secondaryText: d
+        })
+      ]
+    })
+  });
+};
+export {
+  z as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/dialog/Dialog/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/common/components/dialog/Dialog.tsx"],"sourcesContent":["import React from 'react'\n\nimport MuiDialog from '@mui/material/Dialog'\nimport { DialogProps as MuiDialogProps } from '@mui/material/Dialog'\nimport DialogContent from '@mui/material/DialogContent'\n\nimport { DialogFooter, DialogHeader } from '@mxenabled/mxui'\nimport { useScreenSize } from '../../hooks'\n\nexport type CopyObject = {\n  close_aria?: string\n  title: string\n}\n\nexport interface DialogProps extends Omit<MuiDialogProps, 'open'> {\n  className?: string\n  copy: CopyObject\n  disablePrimaryButton?: boolean\n  isOpen: boolean\n  onClose: () => void\n  onPrimaryAction?: () => void\n  onSecondaryAction?: () => void\n  primaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'\n  primaryText?: string\n  secondaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'\n  secondaryText?: string\n}\n\nconst Dialog: React.FC<React.PropsWithChildren<DialogProps>> = ({\n  className,\n  copy,\n  disablePrimaryButton = false,\n  isOpen = false,\n  onClose,\n  onPrimaryAction,\n  primaryColor = 'primary',\n  primaryText = 'Confirm',\n  onSecondaryAction,\n  secondaryColor = 'primary',\n  secondaryText = 'Cancel',\n  children,\n  ...rest\n}) => {\n  const title = copy?.title ?? ''\n  const closeAria = copy?.close_aria ?? 'Close'\n\n  const { isSmallMobile } = useScreenSize()\n\n  const handlePrimaryAction = () => {\n    onPrimaryAction?.()\n    onClose()\n  }\n\n  const handleSecondaryAction = () => {\n    if (onSecondaryAction) {\n      onSecondaryAction()\n    }\n    onClose()\n  }\n\n  return (\n    <div className={`mx-cmn-dialog ${className}`}>\n      <MuiDialog\n        aria-label={title}\n        aria-labelledby={undefined}\n        maxWidth=\"xs\"\n        onClose={onClose}\n        open={isOpen}\n        slotProps={{\n          paper: { 'aria-label': title },\n        }}\n        sx={{\n          '& .MuiDialog-paperScrollPaper': {\n            backgroundColor: 'background.default',\n          },\n          ...(isSmallMobile && { '& .MuiDialog-paper': { minWidth: '100%' } }),\n          height: '100%',\n        }}\n        {...rest}\n      >\n        <DialogHeader copy={{ title, close_aria: closeAria }} onClose={onClose} truncate={true} />\n\n        <DialogContent sx={{ lineHeight: 1.5 }}>{children}</DialogContent>\n\n        <DialogFooter\n          isPrimaryDisabled={disablePrimaryButton}\n          onPrimaryAction={handlePrimaryAction}\n          onSecondaryAction={handleSecondaryAction}\n          primaryColor={primaryColor}\n          primaryText={primaryText}\n          secondaryColor={secondaryColor}\n          secondaryText={secondaryText}\n        />\n      </MuiDialog>\n    </div>\n  )\n}\n\nexport default Dialog\n"],"mappings":";;;;;;AA4BA,IAAM,IAAA,CAA0D,EAC9D,WAAA,GACA,MAAA,GACA,sBAAA,IAAuB,IACvB,QAAA,IAAS,IACT,SAAA,GACA,iBAAA,GACA,cAAA,IAAe,WACf,aAAA,IAAc,WACd,mBAAA,GACA,gBAAA,IAAiB,WACjB,eAAA,IAAgB,UAChB,UAAA,GACA,GAAG,EAAA,MACC;AACJ,QAAM,IAAQ,GAAM,SAAS,IACvB,IAAY,GAAM,cAAc,SAEhC,EAAE,eAAA,EAAA,IAAkB,EAAc,GAElC,IAAA,MAA4B;AAChC,IAAA,IAAkB,GAClB,EAAQ;AAAA,EACV,GAEM,IAAA,MAA8B;AAClC,IAAI,KACF,EAAkB,GAEpB,EAAQ;AAAA,EACV;AAEA,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,iBAAiB,CAAA;AAAA,cAC/B,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,UAAS;AAAA,MACA,SAAA;AAAA,MACT,MAAM;AAAA,MACN,WAAW,EACT,OAAO,EAAE,cAAc,EAAM,EAC/B;AAAA,MACA,IAAI;AAAA,QACF,iCAAiC,EAC/B,iBAAiB,qBACnB;AAAA,QACA,GAAI,KAAiB,EAAE,sBAAsB,EAAE,UAAU,OAAO,EAAE;AAAA,QAClE,QAAQ;AAAA,MACV;AAAA,MACA,GAAI;AAAA,gBAhBN;AAAA,QAkBE,gBAAA,EAAC,GAAD;AAAA,UAAc,MAAM;AAAA,YAAE,OAAA;AAAA,YAAO,YAAY;AAAA,UAAU;AAAA,UAAY,SAAA;AAAA,UAAS,UAAU;AAAA,QAAO,CAAA;AAAA,QAEzF,gBAAA,EAAC,GAAD;AAAA,UAAe,IAAI,EAAE,YAAY,IAAI;AAAA,UAAI,UAAA;AAAA,QAAwB,CAAA;AAAA,QAEjE,gBAAA,EAAC,GAAD;AAAA,UACE,mBAAmB;AAAA,UACnB,iBAAiB;AAAA,UACjB,mBAAmB;AAAA,UACL,cAAA;AAAA,UACD,aAAA;AAAA,UACG,gBAAA;AAAA,UACD,eAAA;AAAA,QAChB,CAAA;AAAA,MACQ;AAAA;EACR,CAAA;AAET"}