@spesia/ui 1.8.21 → 1.9.7

package/dist/components/date-picker/PeriodPicker/PeriodPicker.js

@@ -0,0 +1,374 @@
+import { jsx as t, jsxs as w } from "react/jsx-runtime";
+import { useRef as W, useState as p, useEffect as _ } from "react";
+import ee from "lodash/isNil";
+import { suitCx as ke } from "../../../helpers/suitCx.js";
+import { Box as f, Chip as le, Tooltip as Ne, Button as re, TextField as Re, InputAdornment as Se, IconButton as _e } from "@mui/material";
+import Ee from "@mui/material/Popover";
+import { DateCalendar as te } from "@mui/x-date-pickers/DateCalendar";
+import { setInitialValue as Me } from "../utils.js";
+import { Clear as Ve } from "@mui/icons-material";
+import { primitives as ae } from "../../../styles/colors.js";
+const De = ({
+  inline: a,
+  format: se = "dd MMM",
+  yearFormat: ne = "dd MMM yyyy",
+  options: o,
+  onSelect: A,
+  initialFromDate: c,
+  initialToDate: u,
+  initialPeriod: i,
+  required: oe,
+  onClose: O,
+  disabled: E,
+  block: L,
+  maxDate: U,
+  size: q,
+  minDate: z,
+  id: ce,
+  dataTestId: d = "periodPicker",
+  placeholder: ue = "Select period",
+  cancelButtonText: de = "Cancel",
+  saveButtonText: fe = "Save",
+  invalidPeriodHelperText: ie = "Invalid period",
+  validation: D,
+  className: me
+}) => {
+  const m = o.map((e) => ({
+    ...e,
+    label: e.label || e.key,
+    tooltip: e.tooltip
+  })) ?? [], M = W(!1), he = W(null), G = W(null), V = m.length > 0, I = (e) => e ? new Date(e) : null, [v, b] = p(
+    I(u)
+  ), [C, x] = p(
+    I(c)
+  ), [l, k] = p(
+    o == null ? void 0 : o.find((e) => e.value === i)
+  ), [P, H] = p(!1), [N, J] = p(!1), [g, R] = p("empty"), [pe, K] = p(null), s = ke(
+    {
+      name: "PeriodPicker",
+      modifiers: ["required", "block", "withPredefined", "rightSided"],
+      states: ["disabled", "error", "filled", "success", "focus", "open"]
+    },
+    {
+      filled: g === "filled",
+      error: g === "error",
+      success: g === "success",
+      focus: g === "focus",
+      rightSided: P,
+      withPredefined: V,
+      open: N,
+      disabled: E,
+      required: oe,
+      block: L
+    },
+    me
+  ), Q = (e, r) => {
+    e === "toDate" ? b(r) : x(r);
+  }, X = (e) => {
+    M.current || (J(!0), document.addEventListener("keydown", $, !1), K(e.target), Y()), M.current = !1;
+  }, Y = () => {
+    setTimeout(() => {
+      if (N) {
+        const e = G && G.current;
+        if (!e) return !1;
+        const n = e.getBoundingClientRect().right <= window.innerWidth;
+        H(!n && !P);
+      }
+    }, 10);
+  }, ve = () => {
+    x(c ? new Date(c) : null), b(u ? new Date(u) : null), k(o == null ? void 0 : o.find((e) => e.value === i));
+  }, be = (e, r, n) => {
+    R(e ? r ? "success" : "error" : n ? "filled" : "empty");
+  }, S = (e, r) => {
+    const n = (e == null ? void 0 : e.value) === "custom" && !(e.from || e.to);
+    let h;
+    if (a || (M.current = !0), !r || n)
+      ve(), R("empty"), k(null), x(null), b(null), h = null;
+    else {
+      e || (e = l);
+      const B = !!D, T = B && D(e);
+      be(B, T, e), B && !T ? h = null : h = e;
+    }
+    A && A(h), j();
+  }, Z = (e, r) => {
+    k(e), e.value !== "custom" ? (x(null), b(null), S(e, !0)) : (a && X(r), Y());
+  }, Ce = () => {
+    const e = {
+      label: "Custom",
+      value: "custom",
+      from: C,
+      to: v
+    };
+    k(e), S(e, !0);
+  }, $ = (e) => {
+    e.key === "Esc" && (e.target.blur(), S(null, !0));
+  }, xe = () => {
+    S(null, !1);
+  }, j = () => {
+    J(!1), K(null), document.removeEventListener("keydown", $, !1), O && O();
+  };
+  _(() => {
+    Promise.resolve().then(() => {
+      ee(c) && x(null), c && c !== C && x(c);
+    });
+  }, [c]), _(() => {
+    Promise.resolve().then(() => {
+      ee(u) && b(null), u && u !== v && b(u);
+    });
+  }, [u]), _(() => {
+    Promise.resolve().then(() => {
+      i && i !== l && k(o == null ? void 0 : o.find((e) => e.value === i));
+    });
+  }, [i]), _(() => {
+    Promise.resolve().then(() => {
+      (c || u || i) && R("filled");
+    });
+  }, []);
+  const F = Me(
+    l,
+    C,
+    v,
+    se,
+    ne
+  ), y = (e) => {
+    if (e)
+      return new Date(e);
+  }, ge = /* @__PURE__ */ t(f, { className: s("predefined"), sx: { p: a ? 0 : 4 }, children: /* @__PURE__ */ t(
+    f,
+    {
+      role: "listbox",
+      className: s("periods"),
+      sx: {
+        display: "flex",
+        flexDirection: a ? "row" : "column",
+        gap: 4,
+        flexWrap: a ? "wrap" : void 0
+      },
+      "data-testid": d + "_Predefined",
+      children: m == null ? void 0 : m.map((e, r) => /* @__PURE__ */ t(
+        "div",
+        {
+          className: s("periods-item"),
+          role: "option",
+          "aria-selected": e.value === (l == null ? void 0 : l.value),
+          children: /* @__PURE__ */ t(
+            le,
+            {
+              sx: {
+                px: 3,
+                borderRadius: 3,
+                width: a ? "auto" : "100%"
+              },
+              label: e.label,
+              icon: e.icon,
+              "data-selected": e.label === (l == null ? void 0 : l.label),
+              "data-value": e.value,
+              color: e.label === (l == null ? void 0 : l.label) ? "primary" : void 0,
+              onClick: (n) => Z(e, n)
+            }
+          )
+        },
+        "period-" + r
+      ))
+    }
+  ) }), ye = /* @__PURE__ */ t(f, { className: s("predefined"), sx: { p: a ? 0 : 4 }, children: /* @__PURE__ */ t(
+    f,
+    {
+      role: "listbox",
+      className: s("periods"),
+      sx: {
+        backgroundColor: (e) => {
+          var r;
+          return (r = e.vars) == null ? void 0 : r.palette.background.alphaBrown;
+        },
+        borderRadius: ae.borderRadius.full,
+        padding: 2,
+        display: "flex",
+        flexDirection: a ? "row" : "column",
+        gap: 4,
+        ".MuiChip-icon": {
+          fill: (e) => {
+            var r;
+            return (r = e.vars) == null ? void 0 : r.palette.text.primary;
+          }
+        }
+      },
+      "data-testid": d + "_Predefined",
+      children: m == null ? void 0 : m.map((e, r) => /* @__PURE__ */ t(
+        "div",
+        {
+          className: s("periods-item"),
+          role: "option",
+          "aria-selected": e.value === (l == null ? void 0 : l.value),
+          children: /* @__PURE__ */ t(
+            Ne,
+            {
+              arrow: !0,
+              placement: a ? "top" : "right",
+              title: e.tooltip,
+              children: /* @__PURE__ */ t(
+                le,
+                {
+                  sx: {
+                    px: 3,
+                    backgroundColor: (n) => {
+                      var h;
+                      return e.label === (l == null ? void 0 : l.label) ? (h = n.vars) == null ? void 0 : h.palette.background.default : "transparent";
+                    },
+                    borderRadius: ae.borderRadius.full,
+                    border: "none",
+                    width: a ? "auto" : "100%"
+                  },
+                  size: q,
+                  disabled: E,
+                  label: e.label,
+                  icon: e.icon,
+                  "data-selected": e.label === (l == null ? void 0 : l.label),
+                  "data-value": e.value,
+                  onClick: (n) => Z(e, n)
+                }
+              )
+            }
+          )
+        },
+        "period-" + r
+      ))
+    }
+  ) }), we = /* @__PURE__ */ w(f, { className: s("custom"), "data-testid": d + "_Calendars", children: [
+    /* @__PURE__ */ w(
+      f,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "top",
+          justifyContent: "space-between"
+        },
+        className: s("calendars"),
+        children: [
+          /* @__PURE__ */ t(
+            te,
+            {
+              value: y(C),
+              "data-testid": d + "_Calendars_From",
+              onChange: (e) => Q("fromDate", e),
+              maxDate: y(v ?? U),
+              minDate: y(z)
+            }
+          ),
+          /* @__PURE__ */ t(
+            te,
+            {
+              value: y(v),
+              "data-testid": d + "_Calendars_To",
+              onChange: (e) => Q("toDate", e),
+              maxDate: y(U),
+              minDate: y(C ?? z)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ w(
+      f,
+      {
+        className: s("save"),
+        sx: { display: "flex", alignItems: "center", gap: 4, p: 4 },
+        children: [
+          /* @__PURE__ */ t(
+            re,
+            {
+              onClick: j,
+              fullWidth: !0,
+              color: "inherit",
+              variant: "contained",
+              "data-testid": d + "_Calendars_Cancel",
+              children: de
+            }
+          ),
+          /* @__PURE__ */ t(
+            re,
+            {
+              onClick: Ce,
+              color: "primary",
+              variant: "contained",
+              fullWidth: !0,
+              disabled: !(v && C),
+              "data-testid": d + "_Calendars_Save",
+              children: fe
+            }
+          )
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ w("div", { "data-testid": d, className: s(), children: [
+    /* @__PURE__ */ w("div", { ref: he, children: [
+      a && (V ? ye : null),
+      !a && /* @__PURE__ */ t(
+        Re,
+        {
+          type: "text",
+          id: ce,
+          fullWidth: L,
+          autoComplete: "off",
+          value: F,
+          size: q,
+          disabled: E,
+          placeholder: ue,
+          error: g === "error",
+          slotProps: {
+            input: {
+              readOnly: !0,
+              endAdornment: F && /* @__PURE__ */ t(Se, { position: "end", children: /* @__PURE__ */ t(
+                _e,
+                {
+                  "aria-label": "Clear",
+                  onClick: xe,
+                  edge: "end",
+                  children: /* @__PURE__ */ t(Ve, {})
+                }
+              ) })
+            }
+          },
+          helperText: g === "error" ? ie : null,
+          onFocus: (e) => X(e),
+          className: s("input")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(
+      Ee,
+      {
+        id: N ? "simple-popover" : void 0,
+        open: N,
+        anchorEl: pe,
+        disableAutoFocus: !0,
+        disableEnforceFocus: !0,
+        onClose: j,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: P ? "right" : "left"
+        },
+        children: /* @__PURE__ */ w(
+          f,
+          {
+            className: s("dropdown-calendar"),
+            sx: {
+              display: "flex",
+              alignItems: "top",
+              justifyContent: "space-between"
+            },
+            children: [
+              !a && (V ? ge : null),
+              (!a && (l == null ? void 0 : l.value) === "custom" || a) && we
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  De as PeriodPicker,
+  De as default
+};

package/dist/components/date-picker/utils.js

@@ -0,0 +1,27 @@
+import { isSameDay as $ } from "../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/isSameDay.js";
+import { isSameMonth as S } from "../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/isSameMonth.js";
+import { isSameYear as f } from "../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/isSameYear.js";
+import { formatDate as a } from "../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/format.js";
+const c = (e, t, n, s) => f(e, t) ? a(new Date(t), s) : a(new Date(t), n), Y = (e, t, n, s, l) => f(e, t) ? `${a(new Date(t), "dd")} - ${a(new Date(n), s)}` : `${a(new Date(t), "dd")} - ${a(new Date(n), l)}`, b = (e, t, n, s, l) => f(e, t) ? `${a(new Date(t), s)} - ${a(new Date(n), s)}` : `${a(new Date(t), s)} - ${a(new Date(n), l)}`, h = (e, t, n) => `${a(new Date(e), n)} - ${a(new Date(t), n)}`, x = (e, t, n, s, l) => {
+  let u = "";
+  if ((e == null ? void 0 : e.value) === "custom" && t && n) {
+    const D = new Date(t), w = new Date(n), i = /* @__PURE__ */ new Date();
+    $(D, w) ? u = c(i, D, s, l) : S(D, w) ? u = Y(
+      i,
+      D,
+      w,
+      s,
+      l
+    ) : f(D, w) ? u = b(
+      i,
+      D,
+      w,
+      s,
+      l
+    ) : u = h(D, w, l);
+  } else e != null && e.label && e.value !== "custom" && (u = e.label);
+  return u;
+};
+export {
+  x as setInitialValue
+};

package/dist/components/filters/Checked.js

@@ -0,0 +1,26 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { colors as i } from "../../styles/colors.js";
+const h = () => /* @__PURE__ */ o(
+  "svg",
+  {
+    className: "Checkbox-icon Checkbox-icon--checked",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M0 4C0 1.79086 1.79086 0 4 0H10C12.2091 0 14 1.79086 14 4V10C14 12.2091 12.2091 14 10 14H4C1.79086 14 0 12.2091 0 10V4Z",
+          fill: i.primary.coral[100]
+        }
+      ),
+      /* @__PURE__ */ e("rect", { x: "4", y: "4", width: "6", height: "6", rx: "3", fill: "white" })
+    ]
+  }
+);
+export {
+  h as default
+};

package/dist/components/filters/FilterList.js

@@ -0,0 +1,121 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useState as x, useEffect as y } from "react";
+import { suitCx as C } from "../../helpers/suitCx.js";
+import { Box as b, Tooltip as w, FormControlLabel as g, Checkbox as A } from "@mui/material";
+import { primitives as F } from "../../styles/colors.js";
+import L from "./Checked.js";
+import S from "./Unchecked.js";
+function z(n, d) {
+  if (n.size !== d.size) return !1;
+  for (const l of n)
+    if (!d.has(l)) return !1;
+  return !0;
+}
+const D = ({
+  options: n,
+  onSelect: d,
+  disabled: l,
+  initialValues: t,
+  dataTestId: i = "FilterList",
+  className: m
+}) => {
+  const f = n.map((e) => ({
+    ...e,
+    label: e.label || e.value,
+    tooltip: e.tooltip
+  })) ?? [], [a, u] = x(
+    new Set(
+      Array.isArray(t) ? t : t ? [t] : []
+    )
+  ), p = C(
+    {
+      name: "FilterList",
+      states: ["disabled"]
+    },
+    {
+      disabled: l
+    },
+    m
+  ), v = (e) => {
+    u((s) => {
+      const r = new Set(s);
+      return r.has(e) ? r.delete(e) : r.add(e), d(Array.from(r)), r;
+    });
+  };
+  y(() => {
+    if (t === void 0)
+      return;
+    const e = new Set(
+      Array.isArray(t) ? t : t ? [t] : []
+    );
+    z(e, a) || Promise.resolve().then(() => {
+      u(e);
+    });
+  }, []);
+  const k = /* @__PURE__ */ o(
+    b,
+    {
+      role: "group",
+      className: p("filters"),
+      sx: {
+        display: "flex",
+        flexDirection: "row",
+        gap: 2,
+        ".MuiChip-icon": {
+          fill: (e) => {
+            var s;
+            return (s = e.vars) == null ? void 0 : s.palette.text.primary;
+          }
+        }
+      },
+      "data-testid": i + "_Options",
+      children: f == null ? void 0 : f.map((e, s) => /* @__PURE__ */ o(
+        "div",
+        {
+          className: p("filters-item"),
+          "aria-checked": a.has(e.value),
+          children: /* @__PURE__ */ o(w, { arrow: !0, placement: "top", title: e.tooltip ?? "", children: /* @__PURE__ */ o(
+            g,
+            {
+              disabled: l,
+              sx: {
+                px: 2,
+                fontWeight: 500,
+                backgroundColor: (r) => {
+                  var c;
+                  return a.has(e.value) ? (c = r.vars) == null ? void 0 : c.palette.background.default : "transparent";
+                },
+                opacity: () => a.has(e.value) ? 1 : 0.5,
+                color: (r) => {
+                  var c, h;
+                  return a.has(e.value) ? (c = r.vars) == null ? void 0 : c.palette.primary.dark : (h = r.vars) == null ? void 0 : h.palette.text.primary;
+                },
+                borderRadius: F.borderRadius.full,
+                width: "auto"
+              },
+              label: e.label,
+              control: /* @__PURE__ */ o(
+                A,
+                {
+                  disabled: l,
+                  size: "small",
+                  checkedIcon: /* @__PURE__ */ o(L, {}),
+                  icon: /* @__PURE__ */ o(S, {}),
+                  value: e.value,
+                  checked: a.has(e.value),
+                  onChange: () => v(e.value)
+                }
+              )
+            }
+          ) })
+        },
+        "filter-" + s
+      ))
+    }
+  );
+  return /* @__PURE__ */ o("div", { "data-testid": i, className: p(), children: k });
+};
+export {
+  D as FilterList,
+  D as default
+};

package/dist/components/filters/Unchecked.js

@@ -0,0 +1,26 @@
+import { styled as d } from "@mui/material/styles";
+import { primitives as i } from "../../styles/colors.js";
+const n = d("span")(({ theme: r }) => {
+  var a, o, e, t;
+  return {
+    borderRadius: i.borderRadius.default,
+    width: 20,
+    height: 20,
+    border: 0,
+    backgroundColor: (a = r.vars) == null ? void 0 : a.palette.primary.main,
+    ".Mui-focusVisible &": {
+      outline: `2px auto ${(o = r.vars) == null ? void 0 : o.palette.secondary.light}`,
+      outlineOffset: 2
+    },
+    "input:hover ~ &": {
+      backgroundColor: (e = r.vars) == null ? void 0 : e.palette.primary.dark
+    },
+    "input:disabled ~ &": {
+      boxShadow: "none",
+      background: (t = r.vars) == null ? void 0 : t.palette.background.alphaBrown
+    }
+  };
+}), p = n;
+export {
+  p as default
+};

package/dist/components/index.d.ts

@@ -1,9 +0,0 @@
-export { default as Logo } from './Logo/Logo';
-export { default as Logo3d } from './Logo3d/Logo3d';
-export { type LogoProps } from './Logo/Logo';
-export { ContainerGrid } from './container-grid/ContainerGrid';
-export { PeriodPicker } from './date-picker/PeriodPicker/PeriodPicker';
-export { DatePicker } from './date-picker/DatePicker/DatePicker';
-export { ChipList } from './chip-list/ChipList';
-export { FilterList } from './filters/FilterList';
-export { TrendingChip } from './TrendingChip/TrendingChip';

package/dist/components/radio/Checked.js

@@ -0,0 +1,34 @@
+import { styled as e } from "@mui/material/styles";
+import d from "./Unchecked.js";
+const l = e(d)(({ theme: o }) => {
+  var r, a;
+  return {
+    backgroundColor: (r = o.vars) == null ? void 0 : r.palette.background.paper,
+    borderWidth: 8,
+    borderColor: (a = o.vars) == null ? void 0 : a.palette.primary.dark,
+    "input:hover ~ &": {
+      opacity: 0.5
+    },
+    ".MuiRadio-colorNeutral &": {
+      borderColor: o.palette.neutral.main
+    },
+    ".MuiRadio-colorSecondary &": {
+      borderColor: o.palette.secondary.main
+    },
+    ".MuiRadio-colorInfo &": {
+      borderColor: o.palette.secondary.main
+    },
+    ".MuiRadio-colorError &": {
+      borderColor: o.palette.error.main
+    },
+    ".MuiRadio-colorSuccess &": {
+      borderColor: o.palette.success.main
+    },
+    ".MuiRadio-colorWarning &": {
+      borderColor: o.palette.warning.main
+    }
+  };
+}), t = l;
+export {
+  t as default
+};

package/dist/components/radio/Unchecked.js

@@ -0,0 +1,48 @@
+import { styled as n } from "@mui/material/styles";
+const t = n("span")(({ theme: o }) => {
+  var r, a, l, e;
+  return {
+    borderRadius: "50%",
+    width: 24,
+    height: 24,
+    border: "2px solid",
+    borderColor: (r = o.vars) == null ? void 0 : r.palette.primary.light,
+    backgroundColor: (a = o.vars) == null ? void 0 : a.palette.background.paper,
+    ".Mui-focusVisible &": {
+      outline: `2px auto ${(l = o.vars) == null ? void 0 : l.palette.secondary.light}`,
+      outlineOffset: 2
+    },
+    ".MuiRadio-sizeSmall &": {
+      width: 20,
+      height: 20
+    },
+    "input:hover ~ &": {
+      opacity: 0.5
+    },
+    "input:disabled ~ &": {
+      boxShadow: "none",
+      background: (e = o.vars) == null ? void 0 : e.palette.background.alphaBrown
+    },
+    "label[color='neutral'] &": {
+      borderColor: o.palette.neutral.main
+    },
+    "label[color='secondary'] &": {
+      borderColor: o.palette.secondary.main
+    },
+    "label[color='info'] &": {
+      borderColor: o.palette.info.main
+    },
+    "label[color='error'] &": {
+      borderColor: o.palette.error.main
+    },
+    "label[color='success'] &": {
+      borderColor: o.palette.success.main
+    },
+    "label[color='warning'] &": {
+      borderColor: o.palette.warning.main
+    }
+  };
+}), d = t;
+export {
+  d as default
+};