@hybridcore/ui 1.6.0 → 1.6.2

package/dist/components/template-property-filters/styled.js

@@ -1,7 +1,16 @@
-import { jsx as n, jsxs as i, Fragment as c } from "react/jsx-runtime";
-import { Add as r, Remove as d } from "@mui/icons-material";
-import { styled as a, Accordion as e, AccordionSummary as p, alpha as s, AccordionDetails as t } from "@mui/material";
-const g = a((o) => /* @__PURE__ */ n(e, { disableGutters: !0, elevation: 0, square: !0, ...o }))(({ theme: o }) => ({
+import { styled as t, Box as e, Accordion as a, AccordionSummary as p, alpha as i, Typography as r, AccordionDetails as l, FormLabel as c, FormControlLabel as s, Checkbox as m, Button as d } from "@mui/material";
+import { Add as y, Remove as g } from "@mui/icons-material";
+const u = (o) => o !== "ownerState", T = t(e, {
+  name: "HCTemplatePropertyFilters",
+  slot: "root",
+  shouldForwardProp: u
+})({
+  display: "flex",
+  flexDirection: "column"
+}), f = t(a, {
+  name: "HCTemplatePropertyFilters",
+  slot: "accordion"
+})(({ theme: o }) => ({
   borderTop: `1px solid ${o.palette.divider}`,
   "&:last-of-type": {
     borderBottom: `1px solid ${o.palette.divider}`
@@ -9,21 +18,15 @@ const g = a((o) => /* @__PURE__ */ n(e, { disableGutters: !0, elevation: 0, squa
   "&::before": {
     display: "none"
   }
-})), x = a((o) => /* @__PURE__ */ n(
-  p,
-  {
-    expandIcon: /* @__PURE__ */ i(c, { children: [
-      /* @__PURE__ */ n(r, { className: "expandIcon", sx: { fontSize: 16 } }),
-      /* @__PURE__ */ n(d, { className: "collapseIcon", sx: { fontSize: 16 } })
-    ] }),
-    ...o
-  }
-))(({ theme: o }) => ({
+})), x = t(p, {
+  name: "HCTemplatePropertyFilters",
+  slot: "accordionSummary"
+})(({ theme: o }) => ({
   minHeight: 30,
   paddingLeft: o.spacing(1),
   paddingRight: o.spacing(1),
   "&.Mui-expanded": {
-    backgroundColor: s(o.palette.primary.main, 0.1),
+    backgroundColor: i(o.palette.primary.main, 0.1),
     "& .MuiAccordionSummary-content": {
       color: o.palette.primary.main
     }
@@ -49,16 +52,114 @@ const g = a((o) => /* @__PURE__ */ n(e, { disableGutters: !0, elevation: 0, squa
       display: "block"
     }
   }
-})), y = a(t)(({ theme: o }) => ({
+})), C = t(r, {
+  name: "HCTemplatePropertyFilters",
+  slot: "accordionTitle"
+})({
+  fontSize: 12
+}), F = t(l, {
+  name: "HCTemplatePropertyFilters",
+  slot: "accordionDetails"
+})(({ theme: o }) => ({
   display: "flex",
   flexDirection: "column",
   paddingLeft: o.spacing(1),
   paddingRight: o.spacing(1),
   paddingTop: o.spacing(1.5),
   paddingBottom: o.spacing(1.5)
-}));
+})), I = t(e, {
+  name: "HCTemplatePropertyFilters",
+  slot: "propertyContainer"
+})(({ theme: o }) => ({
+  marginBottom: o.spacing(1)
+})), b = t(r, {
+  name: "HCTemplatePropertyFilters",
+  slot: "propertyLabel"
+})(({ theme: o }) => ({
+  marginBottom: o.spacing(0.5),
+  display: "block"
+})), A = t(e, {
+  name: "HCTemplatePropertyFilters",
+  slot: "propertyRangeRow"
+})(({ theme: o }) => ({
+  display: "flex",
+  alignItems: "center",
+  marginBottom: o.spacing(2)
+})), H = t(r, {
+  name: "HCTemplatePropertyFilters",
+  slot: "propertyRangeSeparator"
+})(({ theme: o }) => ({
+  paddingLeft: o.spacing(1),
+  paddingRight: o.spacing(1)
+})), R = t(c, {
+  name: "HCTemplatePropertyFilters",
+  slot: "propertyEnumLabel"
+})(({ theme: o }) => ({
+  marginBottom: o.spacing(1),
+  fontSize: 12
+})), B = t(s, {
+  name: "HCTemplatePropertyFilters",
+  slot: "propertyEnumItem"
+})(({ theme: o }) => ({
+  margin: 0,
+  marginBottom: o.spacing(1)
+})), L = t(m, {
+  name: "HCTemplatePropertyFilters",
+  slot: "propertyEnumCheckbox"
+})(({ theme: o }) => ({
+  padding: 0,
+  marginRight: o.spacing(1),
+  "& .MuiSvgIcon-root": {
+    fontSize: 16
+  }
+})), M = t(d, {
+  name: "HCTemplatePropertyFilters",
+  slot: "propertyShowMoreButton"
+})({
+  padding: 0,
+  textTransform: "none",
+  fontSize: 12
+}), E = t(y, {
+  name: "HCTemplatePropertyFilters",
+  slot: "expandIcon"
+})({
+  fontSize: 16
+}), z = t(g, {
+  name: "HCTemplatePropertyFilters",
+  slot: "collapseIcon"
+})({
+  fontSize: 16
+}), n = { fontSize: 12 }, _ = { fontSize: 14 }, k = {
+  textField: {
+    fullWidth: !0,
+    inputProps: { sx: n },
+    InputLabelProps: { sx: n }
+  },
+  inputAdornment: {
+    sx: {
+      "& .MuiSvgIcon-root": {
+        fontSize: 16
+      }
+    }
+  }
+};
 export {
-  g as Accordion,
-  y as AccordionDetails,
-  x as AccordionSummary
+  f as Accordion,
+  F as AccordionDetails,
+  x as AccordionSummary,
+  C as AccordionTitle,
+  z as CollapseIcon,
+  k as DATE_PICKER_SLOT_PROPS,
+  E as ExpandIcon,
+  n as INPUT_FONT_SX,
+  I as PropertyContainer,
+  L as PropertyEnumCheckbox,
+  B as PropertyEnumItem,
+  R as PropertyEnumLabel,
+  b as PropertyLabel,
+  A as PropertyRangeRow,
+  H as PropertyRangeSeparator,
+  M as PropertyShowMoreButton,
+  _ as SHOW_MORE_ICON_SX,
+  T as TemplatePropertyFiltersRoot
 };

package/dist/components/text-overflow/index.js

@@ -0,0 +1,6 @@
+import { jsx as e } from "react/jsx-runtime";
+import { TextOverflowRoot as o } from "./styled.js";
+const l = (t) => /* @__PURE__ */ e(o, { title: t.title, sx: t.sx, children: t.children });
+export {
+  l as TextOverflow
+};

package/dist/components/text-overflow/styled.js

@@ -0,0 +1,13 @@
+import { styled as e, Box as o } from "@mui/material";
+const l = e(o, {
+  name: "HCTextOverflow",
+  slot: "root"
+})({
+  display: "table-cell",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  overflow: "hidden"
+});
+export {
+  l as TextOverflowRoot
+};

package/dist/components/timeline/index.js

@@ -1,9 +1,9 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { Timeline as C, TimelineItem as v, TimelineOppositeContent as M, TimelineSeparator as S, TimelineConnector as d, TimelineContent as W } from "@mui/lab";
 import { Skeleton as b, Typography as o, Divider as c, Box as k, Button as w } from "@mui/material";
 import { useTimelineLogic as D } from "./logic.js";
 import { TimelineRoot as h, TimelineContentWrap as m, TimelineHeader as L, TimelineDotStyled as j, LoadMoreWrap as B } from "./styled.js";
-function q(p) {
+const q = (p) => {
   const {
     items: s,
     hasMore: T,
@@ -16,11 +16,11 @@ function q(p) {
     sx: l,
     other: a
   } = D(p);
-  return u ? /* @__PURE__ */ e(h, { ownerState: i, sx: l, ...a, children: /* @__PURE__ */ e(m, { ownerState: i, children: /* @__PURE__ */ e(b, { variant: "rectangular", width: "100%", height: "100%" }) }) }) : /* @__PURE__ */ n(h, { ownerState: i, sx: l, ...a, children: [
+  return u ? /* @__PURE__ */ e(h, { ownerState: i, sx: l, ...a, children: /* @__PURE__ */ e(m, { ownerState: i, children: /* @__PURE__ */ e(b, { variant: "rectangular", width: "100%", height: "100%" }) }) }) : /* @__PURE__ */ r(h, { ownerState: i, sx: l, ...a, children: [
     t && /* @__PURE__ */ e(L, { ownerState: i, children: /* @__PURE__ */ e(o, { variant: "h2", children: t }) }),
-    /* @__PURE__ */ n(m, { ownerState: i, children: [
+    /* @__PURE__ */ r(m, { ownerState: i, children: [
       /* @__PURE__ */ e(c, {}),
-      /* @__PURE__ */ e(C, { children: s.map((r) => /* @__PURE__ */ n(v, { children: [
+      /* @__PURE__ */ e(C, { children: s.map((n) => /* @__PURE__ */ r(v, { children: [
         /* @__PURE__ */ e(
           M,
           {
@@ -28,10 +28,10 @@ function q(p) {
             align: "right",
             variant: "caption",
             color: "text.secondary",
-            children: g(r)
+            children: g(n)
           }
         ),
-        /* @__PURE__ */ n(S, { children: [
+        /* @__PURE__ */ r(S, { children: [
           /* @__PURE__ */ e(d, {}),
           /* @__PURE__ */ e(j, { children: f || /* @__PURE__ */ e(
             k,
@@ -46,16 +46,16 @@ function q(p) {
           ) }),
           /* @__PURE__ */ e(d, {})
         ] }),
-        /* @__PURE__ */ n(W, { sx: { py: "12px", px: 2 }, children: [
-          /* @__PURE__ */ e(o, { variant: "body2", component: "span", children: r.title }),
-          /* @__PURE__ */ e(o, { component: "span", children: r.description })
+        /* @__PURE__ */ r(W, { sx: { py: "12px", px: 2 }, children: [
+          /* @__PURE__ */ e(o, { variant: "body2", component: "span", children: n.title }),
+          /* @__PURE__ */ e(o, { component: "span", children: n.description })
         ] })
-      ] }, r.id)) }),
+      ] }, n.id)) }),
       /* @__PURE__ */ e(c, {}),
       T && /* @__PURE__ */ e(B, { ownerState: i, children: /* @__PURE__ */ e(w, { onClick: x, fullWidth: !0, size: "large", children: "Load More" }) })
     ] })
   ] });
-}
+};
 export {
   q as TimelineWidget
 };

package/dist/components/toggle-view-button/index.js

@@ -0,0 +1,35 @@
+import { jsx as e } from "react/jsx-runtime";
+import { FormControlLabel as r, Radio as d, Button as u, Tooltip as m, IconButton as h } from "@mui/material";
+import { useToggleViewButtonLogic as s } from "./logic.js";
+import { ToggleViewButtonRoot as l } from "./styled.js";
+const b = (t) => {
+  const { state: a, actions: i } = s(t), { ownerState: o, isActive: n, type: c } = a;
+  return c === "radio" ? /* @__PURE__ */ e(l, { ownerState: o, sx: t.sx, children: /* @__PURE__ */ e(
+    r,
+    {
+      value: t.view,
+      control: /* @__PURE__ */ e(d, { size: t.size }),
+      label: t.label,
+      sx: t.size === "small" ? { "& .MuiTypography-root": { fontSize: 14 } } : void 0,
+      onClick: i.handleClick
+    }
+  ) }) : c === "button" ? /* @__PURE__ */ e(l, { ownerState: o, sx: t.sx, children: /* @__PURE__ */ e(
+    u,
+    {
+      variant: n ? "contained" : "outlined",
+      onClick: i.handleClick,
+      startIcon: t.icon,
+      children: t.label
+    }
+  ) }) : /* @__PURE__ */ e(l, { ownerState: o, sx: t.sx, children: /* @__PURE__ */ e(m, { title: t.label, placement: "top", children: /* @__PURE__ */ e(
+    h,
+    {
+      color: n ? "primary" : "default",
+      onClick: i.handleClick,
+      children: t.icon
+    }
+  ) }) });
+};
+export {
+  b as ToggleViewButton
+};

package/dist/components/toggle-view-button/logic.js

@@ -0,0 +1,22 @@
+import { useThemeProps as s } from "@mui/material";
+const a = (c) => {
+  const e = s({
+    props: c,
+    name: "HCToggleViewButton"
+  }), t = e.type ?? "icononly", o = e.currentView === e.view, i = {
+    ...e,
+    type: t,
+    isActive: o
+  };
+  return {
+    refs: {},
+    state: { ownerState: i, isActive: o, type: t },
+    actions: { handleClick: () => {
+      var n;
+      (n = e.onClick) == null || n.call(e, e.view);
+    } }
+  };
+};
+export {
+  a as useToggleViewButtonLogic
+};

package/dist/components/toggle-view-button/styled.js

@@ -0,0 +1,11 @@
+import { styled as t, Box as e } from "@mui/material";
+const l = (o) => o !== "ownerState", r = t(e, {
+  name: "HCToggleViewButton",
+  slot: "root",
+  shouldForwardProp: l
+})({
+  display: "inline-flex"
+});
+export {
+  r as ToggleViewButtonRoot
+};

package/dist/components/tree-select/index.js

@@ -1,78 +1,63 @@
-import { jsxs as h, Fragment as _, jsx as n } from "react/jsx-runtime";
-import m from "react";
-import { TreeViewFilter as b } from "../treeview-filter/index.js";
-import i from "lodash";
-import { flattenNestedTemplates as A } from "../../utils/ontology.js";
-import { a as M, F as j, I as k } from "../../FormControl-BLbrq4C7.js";
-import { S as B } from "../../Select-BgYwkZgI.js";
-import { M as L } from "../../MenuItem-xZx_w7zA.js";
-import { D as w, a as y, b as N } from "../../DialogContent-B3nbEbuv.js";
-import { B as R } from "../../Button-CvE2gnly.js";
-const Z = ({
-  data: g,
-  label: a,
-  selected: r,
-  disabled: S,
-  idKey: d = "id",
-  variant: x = "outlined",
-  labelPosition: c = "top",
-  onChange: D
-}) => {
-  const [E, v] = m.useState(!1), [F, f] = m.useState([]), u = A(g), p = m.useMemo(() => i.isArray(r) ? r.map(
-    (t) => u.find((e) => String(i.get(e, d)) === t)
-  ) : [], [r, u]), T = (t, e) => {
-    D(t, e);
-  }, I = () => {
-    v(!0), W();
-  }, C = () => {
-    v(!1);
-  }, O = (t, e, l) => {
-    f(l ? (s) => [
-      ...s.filter((o) => o !== e),
-      e
-    ] : (s) => s.filter((o) => o !== e));
-  }, W = () => {
-    const t = [];
-    p.length > 0 && p.forEach((e) => {
-      const l = e == null ? void 0 : e.parentKeys, s = u.filter((o) => l == null ? void 0 : l.includes(o.templateKey)).map((o) => String(i.get(o, d)));
-      t.push(...s);
-    }), f(t);
-  };
-  return /* @__PURE__ */ h(_, { children: [
-    c === "top" && a !== void 0 && /* @__PURE__ */ n(M, { sx: { display: "block", mb: 0.5 }, children: a }),
-    /* @__PURE__ */ h(j, { variant: x, fullWidth: !0, children: [
-      c === "default" && a !== void 0 && /* @__PURE__ */ n(k, { id: "select-label", children: a }),
-      /* @__PURE__ */ n(
-        B,
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import c from "lodash";
+import { TreeViewFilter as T } from "../treeview-filter/index.js";
+import { useTreeSelectLogic as f } from "./logic.js";
+import { TreeSelectRoot as g, TreeSelectLabel as S, TreeSelectFormControl as x, TreeSelectInput as C, TreeSelectMenuItem as v, TreeSelectDialog as I, TreeSelectDialogContent as W, TreeSelectDialogActions as D, TreeSelectConfirmButton as L } from "./styled.js";
+import { I as O } from "../../InputLabel-Dd8RrneV.js";
+const K = (e) => {
+  const { state: h, actions: t } = f(e), { ownerState: s, open: u, expanded: m, selectedItems: i, idKey: o, variant: r, labelPosition: a } = h;
+  return /* @__PURE__ */ d(g, { ownerState: s, sx: e.sx, children: [
+    a === "top" && e.label !== void 0 && /* @__PURE__ */ l(S, { children: e.label }),
+    /* @__PURE__ */ d(x, { variant: r, fullWidth: !0, children: [
+      a === "default" && e.label !== void 0 && /* @__PURE__ */ l(O, { id: "select-label", children: e.label }),
+      /* @__PURE__ */ l(
+        C,
         {
-          label: c === "default" ? a : void 0,
-          variant: x,
+          label: a === "default" ? e.label : void 0,
+          variant: r,
           id: "select",
           labelId: "select-label",
-          value: r,
+          value: e.selected,
           open: !1,
-          onOpen: I,
-          children: p.length > 0 && p.map((t, e) => /* @__PURE__ */ n(L, { value: i.get(t, d) ?? "", children: t == null ? void 0 : t.name }, e))
+          onOpen: t.handleOpen,
+          children: i.length > 0 && i.map((n, b) => /* @__PURE__ */ l(v, { value: c.get(n, o) ?? "", children: n == null ? void 0 : n.name }, b))
         }
       )
     ] }),
-    /* @__PURE__ */ h(w, { open: E, onClose: C, fullWidth: !0, maxWidth: "sm", children: [
-      /* @__PURE__ */ n(y, { sx: { p: 1, pt: 2 }, children: /* @__PURE__ */ n(
-        b,
-        {
-          data: g,
-          selected: i.isArray(r) ? r : void 0,
-          disabled: S,
-          expanded: F,
-          idKey: d,
-          onExpansionToggle: O,
-          onChange: T
-        }
-      ) }),
-      /* @__PURE__ */ n(N, { children: /* @__PURE__ */ n(R, { onClick: C, variant: "contained", fullWidth: !0, children: "OK" }) })
-    ] })
+    /* @__PURE__ */ d(
+      I,
+      {
+        open: u,
+        onClose: t.handleClose,
+        fullWidth: !0,
+        maxWidth: "sm",
+        children: [
+          /* @__PURE__ */ l(W, { children: /* @__PURE__ */ l(
+            T,
+            {
+              data: e.data,
+              selected: c.isArray(e.selected) ? e.selected : void 0,
+              disabled: e.disabled,
+              expanded: m,
+              idKey: o,
+              onExpansionToggle: t.handleExpansionToggle,
+              onChange: t.handleChange
+            }
+          ) }),
+          /* @__PURE__ */ l(D, { children: /* @__PURE__ */ l(
+            L,
+            {
+              onClick: t.handleClose,
+              variant: "contained",
+              fullWidth: !0,
+              children: "OK"
+            }
+          ) })
+        ]
+      }
+    )
   ] });
 };
 export {
-  Z as TreeSelect
+  K as TreeSelect
 };

package/dist/components/tree-select/logic.js

@@ -0,0 +1,59 @@
+import { useThemeProps as O } from "@mui/material";
+import f from "lodash";
+import r from "react";
+import { flattenNestedTemplates as v } from "../../utils/ontology.js";
+const H = (x) => {
+  const i = O({ props: x, name: "HCTreeSelect" }), {
+    data: u,
+    selected: l,
+    idKey: s = "id",
+    variant: h = "outlined",
+    labelPosition: g = "top",
+    onChange: S
+  } = i, [T, m] = r.useState(!1), [C, p] = r.useState([]), c = r.useMemo(() => v(u), [u]), d = r.useMemo(() => f.isArray(l) ? l.map(
+    (t) => c.find((e) => String(f.get(e, s)) === t)
+  ) : [], [l, c, s]), E = {
+    ...i,
+    idKey: s,
+    variant: h,
+    labelPosition: g
+  }, _ = (t, e) => {
+    S(t, e);
+  }, y = () => {
+    const t = [];
+    d.length > 0 && d.forEach((e) => {
+      const o = e == null ? void 0 : e.parentKeys, a = c.filter((n) => o == null ? void 0 : o.includes(n.templateKey)).map((n) => String(f.get(n, s)));
+      t.push(...a);
+    }), p(t);
+  };
+  return {
+    refs: {},
+    state: {
+      ownerState: E,
+      open: T,
+      expanded: C,
+      selectedItems: d,
+      idKey: s,
+      variant: h,
+      labelPosition: g
+    },
+    actions: {
+      handleChange: _,
+      handleOpen: () => {
+        m(!0), y();
+      },
+      handleClose: () => {
+        m(!1);
+      },
+      handleExpansionToggle: (t, e, o) => {
+        p(o ? (a) => [
+          ...a.filter((n) => n !== e),
+          e
+        ] : (a) => a.filter((n) => n !== e));
+      }
+    }
+  };
+};
+export {
+  H as useTreeSelectLogic
+};

package/dist/components/tree-select/styled.js

@@ -1,64 +1,47 @@
-import { styled as t, Box as e } from "@mui/material";
-import r from "react-dropdown-tree-select";
-const a = t(r)(({ theme: o }) => ({
-  ".dropdown": {
-    display: "block",
-    ".dropdown-trigger": {
-      display: "block",
-      minHeight: 30,
-      border: "none",
-      padding: "4px 0px",
-      borderBottom: `1px solid ${o.palette.text.disabled}`,
-      transition: "all 0.3s",
-      ".placeholder": {
-        color: o.palette.text.disabled
-      },
-      "&::after": {
-        position: "absolute",
-        right: 0,
-        top: 5,
-        color: o.palette.text.primary
-      },
-      ".tag-list .tag-item:last-child": {
-        display: "none"
-      },
-      ".tag-item": {
-        margin: 0,
-        fontSize: "1rem",
-        ".tag": {
-          padding: 0,
-          backgroundColor: "transparent",
-          border: "none",
-          ".tag-remove": {
-            display: "none"
-          }
-        }
-      }
-    },
-    ".dropdown-content": {
-      position: "fixed",
-      width: "50%",
-      backgroundColor: o.palette.background.paper,
-      zIndex: 99999,
-      ".toggle": {
-        padding: "0px 5px",
-        fontStyle: "normal",
-        fontSize: "1rem"
-      },
-      ".search": {
-        padding: 10,
-        boxSizing: "border-box",
-        backgroundColor: o.palette.background.paper,
-        color: o.palette.text.primary
-      }
-    }
-  }
-})), d = t(e)({
-  display: "flex"
-}), i = {
-  Container: a,
-  Placeholder: d
-};
+import { styled as e, Box as o, FormLabel as l, FormControl as n, Select as c, MenuItem as r, Dialog as a, DialogContent as s, DialogActions as i, Button as m } from "@mui/material";
+const S = (t) => t !== "ownerState", C = e(o, {
+  name: "HCTreeSelect",
+  slot: "root",
+  shouldForwardProp: S
+})({}), g = e(l, {
+  name: "HCTreeSelect",
+  slot: "label"
+})(({ theme: t }) => ({
+  display: "block",
+  marginBottom: t.spacing(0.5)
+})), d = e(n, {
+  name: "HCTreeSelect",
+  slot: "formControl"
+})({}), p = e(c, {
+  name: "HCTreeSelect",
+  slot: "select"
+})({}), H = e(r, {
+  name: "HCTreeSelect",
+  slot: "menuItem"
+})({}), u = e(a, {
+  name: "HCTreeSelect",
+  slot: "dialog"
+})({}), D = e(s, {
+  name: "HCTreeSelect",
+  slot: "dialogContent"
+})(({ theme: t }) => ({
+  padding: t.spacing(1),
+  paddingTop: t.spacing(2)
+})), B = e(i, {
+  name: "HCTreeSelect",
+  slot: "dialogActions"
+})({}), b = e(m, {
+  name: "HCTreeSelect",
+  slot: "confirmButton"
+})({});
 export {
-  i as default
+  b as TreeSelectConfirmButton,
+  u as TreeSelectDialog,
+  B as TreeSelectDialogActions,
+  D as TreeSelectDialogContent,
+  d as TreeSelectFormControl,
+  p as TreeSelectInput,
+  g as TreeSelectLabel,
+  H as TreeSelectMenuItem,
+  C as TreeSelectRoot
 };