@hybridcore/ui 1.5.90 → 1.6.1

package/dist/components/range-selector/components/date-range/index.js

@@ -1,9 +1,150 @@
-import "react/jsx-runtime";
-import "@mui/material";
-import "@mui/icons-material";
-import "dayjs";
-import "../../../../hooks/useToggle.js";
-import { D as e } from "../../../../index-SpeaLUQD.js";
+import { jsxs as n, Fragment as g, jsx as t } from "react/jsx-runtime";
+import { Edit as M } from "@mui/icons-material";
+import { Dialog as S, DialogTitle as U, DialogContent as H, FormControlLabel as b, Checkbox as v, InputLabel as I, Select as x, MenuItem as L, DialogActions as k, Button as D } from "@mui/material";
+import i from "dayjs";
+import E from "../../../../hooks/useToggle.js";
+import { DateTrigger as z, DateTriggerText as h, DateTriggerArrow as A, DateTriggerEditButton as O, DateLimitCaption as F, DatePicker as N, DateUnitRow as w, DateUnitControl as j, DateRangeInput as Y } from "../../styled.js";
+const y = [
+  "MILLISECOND",
+  "SECOND",
+  "MINUTE",
+  "HOUR",
+  "DAY",
+  "MONTH",
+  "YEAR"
+], Z = (C) => {
+  const { value: e, minDate: r, maxDate: m, onChange: l } = C, o = E(!1), u = (a) => {
+    l({
+      ...e,
+      startDate: i(a).format("YYYY-MM-DDTHH:mm:ssZ")
+    });
+  }, p = (a) => {
+    l({ ...e, limitForScenarioTimeRange: a.target.checked });
+  }, R = (a) => {
+    l({
+      ...e,
+      timeUnit: a.target.value
+    });
+  }, s = (a) => {
+    const { name: T, value: f } = a.target;
+    l({ ...e, [T]: f });
+  }, c = e.startDate && e.timeUnit && e.startRange ? i(e.startDate).add(
+    e.startRange,
+    e.timeUnit.toLowerCase()
+  ).format("DD/MM/YYYY HH:mm:ss.SSS") : "", d = e.startDate && e.timeUnit && e.endRange ? i(e.startDate).add(e.endRange, e.timeUnit.toLowerCase()).format("DD/MM/YYYY HH:mm:ss.SSS") : "";
+  return /* @__PURE__ */ n(g, { children: [
+    /* @__PURE__ */ n(
+      z,
+      {
+        title: `${c} -> ${d}`,
+        onClick: o.action.open,
+        children: [
+          /* @__PURE__ */ t(h, { variant: "body2", children: c }),
+          /* @__PURE__ */ t(A, { fontSize: "small" }),
+          /* @__PURE__ */ t(h, { variant: "body2", children: d }),
+          /* @__PURE__ */ t(O, { size: "small", children: /* @__PURE__ */ t(M, { fontSize: "small" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ n(
+      S,
+      {
+        open: o.state.isOpen,
+        onClose: o.action.close,
+        fullWidth: !0,
+        maxWidth: "sm",
+        children: [
+          /* @__PURE__ */ t(U, { children: "Date Range" }),
+          /* @__PURE__ */ n(H, { children: [
+            /* @__PURE__ */ t(
+              b,
+              {
+                control: /* @__PURE__ */ t(
+                  v,
+                  {
+                    checked: e.limitForScenarioTimeRange,
+                    onChange: p
+                  }
+                ),
+                label: /* @__PURE__ */ n(g, { children: [
+                  "Limit range to scenario times",
+                  /* @__PURE__ */ n(F, { variant: "caption", children: [
+                    "(",
+                    i(r).format("DD/MM/YYYY HH:mm"),
+                    " - ",
+                    i(m).format("DD/MM/YYYY HH:mm"),
+                    ")"
+                  ] })
+                ] }),
+                title: "If checked, limits start and end time to scenario start and end time."
+              }
+            ),
+            /* @__PURE__ */ t(
+              N,
+              {
+                label: "Start Date",
+                slotProps: { textField: { size: "small" } },
+                format: "DD/MM/YYYY HH:mm:ss",
+                minDateTime: i(r),
+                maxDateTime: i(m),
+                value: i(e.startDate),
+                onChange: u
+              }
+            ),
+            /* @__PURE__ */ n(w, { children: [
+              /* @__PURE__ */ n(j, { size: "small", children: [
+                /* @__PURE__ */ t(I, { id: "timeUnit-label", children: "Time Unit" }),
+                /* @__PURE__ */ t(
+                  x,
+                  {
+                    labelId: "timeUnit-label",
+                    id: "timeUnit",
+                    value: e.timeUnit,
+                    label: "Time Unit",
+                    onChange: R,
+                    children: y.map((a) => /* @__PURE__ */ t(L, { value: a, children: a }, a))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ t(
+                Y,
+                {
+                  name: "startRange",
+                  label: "Range Start",
+                  size: "small",
+                  value: e.startRange,
+                  onChange: s
+                }
+              ),
+              /* @__PURE__ */ t(
+                Y,
+                {
+                  name: "endRange",
+                  label: "Range End",
+                  size: "small",
+                  value: e.endRange,
+                  onChange: s
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ n(k, { children: [
+            /* @__PURE__ */ t(
+              D,
+              {
+                variant: "contained",
+                color: "inherit",
+                onClick: o.action.close,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ t(D, { variant: "contained", onClick: o.action.close, children: "OK" })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
 export {
-  e as default
+  Z as DateRange
 };

package/dist/components/range-selector/components/geometry-range/index.js

@@ -1,26 +1,20 @@
-import { jsx as n } from "react/jsx-runtime";
-import { GeometryPicker as m } from "../../../geometry-picker/index.js";
-function l({
-  value: e,
-  mapboxAccessToken: r,
-  onChange: o
-}) {
-  const t = (a) => {
-    o({
-      geometryArea: a
-    });
+import { jsx as m } from "react/jsx-runtime";
+import { GeometryPicker as s } from "../../../geometry-picker/index.js";
+const l = (e) => {
+  const { value: o, mapboxAccessToken: r, onChange: a } = e, n = (t) => {
+    a({ geometryArea: t });
   };
-  return /* @__PURE__ */ n(
-    m,
+  return /* @__PURE__ */ m(
+    s,
     {
       mapboxAccessToken: r,
       label: "",
-      value: e.geometryArea,
+      value: o.geometryArea,
       disableAddCoordinate: !0,
-      onChange: t
+      onChange: n
     }
   );
-}
+};
 export {
-  l as default
+  l as GeometryRange
 };

package/dist/components/range-selector/components/number-range/index.js

@@ -1,89 +1,84 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { Box as r, TextField as u, FormControl as V, InputLabel as y, Select as C, MenuItem as h } from "@mui/material";
-import { useState as p } from "react";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { TextField as C, FormControl as L, InputLabel as V, Select as M, MenuItem as d } from "@mui/material";
 import I from "lodash";
-function j({ value: t, onChange: i, variant: s = "outlined" }) {
-  const [o, x] = p(
-    "discreteList" in t && t.discreteList.length > 0 ? "list" : "range"
-  ), [f, b] = p(
-    "discreteList" in t ? t.discreteList.join(",") : ""
-  ), g = (l) => {
-    x(l.target.value), l.target.value === "list" ? i({ discreteList: [] }) : i({ minValue: "", maxValue: "" });
-  }, L = (l) => {
-    const a = l.target.value, d = I.trimEnd(a, ",").split(",").filter((m) => m).map((m) => Number(m.trimStart()));
-    b(a), i({
-      discreteList: d
-    });
-  }, c = (l) => {
-    const { name: a, value: d } = l.target;
-    i({
-      ...t,
-      [a]: Number(d)
+import { useState as c } from "react";
+import { NumberRow as h, NumberRangeRow as N, NumberInputMin as R, NumberInputMax as T, ModeColumn as y } from "../../styled.js";
+const F = (p) => {
+  const { value: e, onChange: a, variant: n = "outlined" } = p, [m, g] = c(
+    "discreteList" in e && e.discreteList.length > 0 ? "list" : "range"
+  ), [b, x] = c(
+    "discreteList" in e ? e.discreteList.join(",") : ""
+  ), v = (l) => {
+    g(l.target.value), l.target.value === "list" ? a({ discreteList: [] }) : a({ minValue: "", maxValue: "" });
+  }, f = (l) => {
+    const i = l.target.value, s = I.trimEnd(i, ",").split(",").filter((u) => u).map((u) => Number(u.trimStart()));
+    x(i), a({ discreteList: s });
+  }, o = (l) => {
+    const { name: i, value: s } = l.target;
+    a({
+      ...e,
+      [i]: Number(s)
     });
   };
-  return /* @__PURE__ */ n(r, { display: "flex", width: "100%", children: [
-    /* @__PURE__ */ e(r, { flex: 2, children: o === "list" ? /* @__PURE__ */ e(
-      u,
+  return /* @__PURE__ */ r(h, { children: [
+    m === "list" ? /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t(
+      C,
       {
         size: "small",
         fullWidth: !0,
-        variant: s,
-        value: f,
-        onChange: L,
-        inputProps: {
-          placeholder: "Comma separated number list"
-        },
+        variant: n,
+        value: b,
+        onChange: f,
+        inputProps: { placeholder: "Comma separated number list" },
         title: "Add list values with the comma (,) separated numbers"
       }
-    ) : /* @__PURE__ */ n(r, { display: "flex", width: "100%", children: [
-      /* @__PURE__ */ e(
-        u,
+    ) }) : /* @__PURE__ */ r(N, { children: [
+      /* @__PURE__ */ t(
+        R,
         {
           name: "minValue",
           label: "Min",
           type: "number",
           size: "small",
-          variant: s,
+          variant: n,
           fullWidth: !0,
-          sx: { mr: 0.25 },
-          value: t.minValue,
-          onChange: c
+          value: "minValue" in e ? e.minValue : "",
+          onChange: o
         }
       ),
-      /* @__PURE__ */ e(
-        u,
+      /* @__PURE__ */ t(
+        T,
         {
           name: "maxValue",
           label: "Max",
           type: "number",
           size: "small",
-          variant: s,
+          variant: n,
           fullWidth: !0,
-          sx: { ml: 0.25 },
-          value: t.maxValue,
-          onChange: c
+          value: "maxValue" in e ? e.maxValue : "",
+          onChange: o
         }
       )
-    ] }) }),
-    /* @__PURE__ */ e(r, { flex: 1, ml: 0.5, children: /* @__PURE__ */ n(V, { fullWidth: !0, size: "small", variant: s, children: [
-      /* @__PURE__ */ e(y, { id: "mode-label", children: "Input Type" }),
-      /* @__PURE__ */ n(
-        C,
+    ] }),
+    /* @__PURE__ */ t(y, { children: /* @__PURE__ */ r(L, { fullWidth: !0, size: "small", variant: n, children: [
+      /* @__PURE__ */ t(V, { id: "mode-label", children: "Input Type" }),
+      /* @__PURE__ */ r(
+        M,
         {
           labelId: "mode-label",
           id: "mode",
-          value: o,
+          value: m,
           label: "Input Type",
-          onChange: g,
+          onChange: v,
           children: [
-            /* @__PURE__ */ e(h, { value: "range", children: "Range" }),
-            /* @__PURE__ */ e(h, { value: "list", children: "Discrete List" })
+            /* @__PURE__ */ t(d, { value: "range", children: "Range" }),
+            /* @__PURE__ */ t(d, { value: "list", children: "Discrete List" })
           ]
         }
       )
     ] }) })
   ] });
-}
+};
 export {
-  j as default
+  F as NumberRange
 };

package/dist/components/range-selector/components/string-range/index.js

@@ -1,24 +1,22 @@
-import { jsx as u } from "react/jsx-runtime";
-import { TextField as d } from "@mui/material";
-import { useState as p } from "react";
+import { jsx as p } from "react/jsx-runtime";
+import { TextField as u } from "@mui/material";
 import h from "lodash";
-function C({ value: i, onChange: l, variant: a = "outlined" }) {
+import { useState as c } from "react";
+const L = (i) => {
   var e;
-  const [r, o] = p(
-    ((e = i.listOfPossibleValues) == null ? void 0 : e.join(",")) || ""
+  const { value: a, onChange: l, variant: r = "outlined" } = i, [n, o] = c(
+    ((e = a.listOfPossibleValues) == null ? void 0 : e.join(",")) || ""
   );
-  return /* @__PURE__ */ u(
-    d,
+  return /* @__PURE__ */ p(
+    u,
     {
       size: "small",
       fullWidth: !0,
-      variant: a,
-      value: r,
-      onChange: (n) => {
-        const s = n.target.value, m = h.trimEnd(s, ",").split(",").filter((t) => t).map((t) => t.trimStart());
-        o(s), l({
-          listOfPossibleValues: m
-        });
+      variant: r,
+      value: n,
+      onChange: (m) => {
+        const s = m.target.value, d = h.trimEnd(s, ",").split(",").filter((t) => t).map((t) => t.trimStart());
+        o(s), l({ listOfPossibleValues: d });
       },
       inputProps: {
         placeholder: "Add list values with the comma (,) separated string"
@@ -26,7 +24,7 @@ function C({ value: i, onChange: l, variant: a = "outlined" }) {
       title: "Add list values with the comma (,) separated string"
     }
   );
-}
+};
 export {
-  C as default
+  L as StringRange
 };

package/dist/components/range-selector/index.js

@@ -1,59 +1,65 @@
-import { jsx as t, Fragment as a } from "react/jsx-runtime";
-import n from "lodash";
-import f from "./components/composite-list-range/index.js";
-import { D as g } from "../../index-SpeaLUQD.js";
-import u from "./components/geometry-range/index.js";
-import l from "./components/number-range/index.js";
-import s from "./components/string-range/index.js";
-const V = ({
-  type: r,
-  value: e,
-  mapboxAccessToken: o,
-  onChange: i,
-  ...m
-}) => r === "byte" || r === "double" || r === "integer" || r === "long" ? /* @__PURE__ */ t(
-  l,
-  {
-    value: e || { minValue: "", maxValue: "" },
-    onChange: i
-  }
-) : r === "string" || r === "text" ? /* @__PURE__ */ t(
-  s,
-  {
-    value: e || { listOfPossibleValues: [] },
-    onChange: i
-  }
-) : r === "geometry" ? /* @__PURE__ */ t(
-  u,
-  {
-    value: e || { geometryArea: "" },
-    mapboxAccessToken: o,
-    onChange: i
-  }
-) : r === "date" ? /* @__PURE__ */ t(
-  g,
-  {
-    value: e || {
-      startDate: n.get(m, "minDate", ""),
-      timeUnit: "MINUTE",
-      endRange: 0,
-      startRange: 0,
-      limitForScenarioTimeRange: !1
-    },
-    onChange: i,
-    ...m
-  }
-) : r === "composite-list" ? /* @__PURE__ */ t(
-  f,
-  {
-    value: e || {
-      count: ""
-    },
-    mapboxAccessToken: o,
-    onChange: i,
-    ...m
-  }
-) : /* @__PURE__ */ t(a, {});
+import { jsx as n } from "react/jsx-runtime";
+import s from "lodash";
+import { CompositeListRange as f } from "./components/composite-list-range/index.js";
+import { DateRange as u } from "./components/date-range/index.js";
+import { GeometryRange as c } from "./components/geometry-range/index.js";
+import { NumberRange as R } from "./components/number-range/index.js";
+import { StringRange as D } from "./components/string-range/index.js";
+import { useRangeSelectorLogic as x } from "./logic.js";
+import { RangeSelectorRoot as y } from "./styled.js";
+const C = (t) => {
+  const { state: r } = x(t), { ownerState: l } = r, { type: e, value: o, mapboxAccessToken: m, onChange: i, sx: g } = t;
+  let a = null;
+  return e === "byte" || e === "double" || e === "integer" || e === "long" ? a = /* @__PURE__ */ n(
+    R,
+    {
+      value: o || {
+        minValue: "",
+        maxValue: ""
+      },
+      onChange: i
+    }
+  ) : e === "string" || e === "text" ? a = /* @__PURE__ */ n(
+    D,
+    {
+      value: o || {
+        listOfPossibleValues: []
+      },
+      onChange: i
+    }
+  ) : e === "geometry" ? a = /* @__PURE__ */ n(
+    c,
+    {
+      value: o || { geometryArea: "" },
+      mapboxAccessToken: m,
+      onChange: i
+    }
+  ) : e === "date" ? a = /* @__PURE__ */ n(
+    u,
+    {
+      value: o || {
+        startDate: s.get(t, "minDate", ""),
+        timeUnit: "MINUTE",
+        endRange: 0,
+        startRange: 0,
+        limitForScenarioTimeRange: !1
+      },
+      onChange: i,
+      minDate: t.minDate || "",
+      maxDate: t.maxDate || ""
+    }
+  ) : e === "composite-list" && (a = /* @__PURE__ */ n(
+    f,
+    {
+      value: o || { count: "" },
+      mapboxAccessToken: m,
+      onChange: i,
+      innerType: t.innerType,
+      minDate: t.minDate,
+      maxDate: t.maxDate
+    }
+  )), /* @__PURE__ */ n(y, { ownerState: l, sx: g, children: a });
+};
 export {
-  V as RangeSelector
+  C as RangeSelector
 };

package/dist/components/range-selector/logic.js

@@ -0,0 +1,12 @@
+import { useThemeProps as t } from "@mui/material";
+const p = (e) => {
+  const o = { type: t({ props: e, name: "HCRangeSelector" }).type };
+  return {
+    refs: {},
+    state: { ownerState: o },
+    actions: {}
+  };
+};
+export {
+  p as useRangeSelectorLogic
+};