@hybridcore/ui 1.5.90 → 1.6.1

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 "../../InputLabel-CBuAYyuT.js";
-import { S as B } from "../../Select-t3ewnSdf.js";
-import { M as L } from "../../MenuItem-C6qlUyV3.js";
-import { D as w, a as y, b as N } from "../../DialogContent-CqTojymQ.js";
-import { B as R } from "../../Button-eqWvpDuh.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-rEwwnD4_.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
 };

package/dist/components/treeview-filter/index.js

@@ -1,82 +1,60 @@
-import { jsxs as d, Fragment as p, jsx as t } from "react/jsx-runtime";
-import u from "react";
-import { SimpleTreeView as B } from "@mui/x-tree-view";
-import C from "./item/index.js";
-import a from "lodash";
-import { Box as F, Divider as L } from "@mui/material";
-import { SearchInput as _ } from "../search-input/index.js";
-import { flattenNestedTemplates as j } from "../../utils/ontology.js";
-import { ArrowDropDown as y, ArrowRight as z } from "@mui/icons-material";
-const H = ({
-  data: i,
-  idKey: s = "id",
-  selected: m,
-  expanded: f,
-  disabled: c,
-  disableSearch: h,
-  onChange: S,
-  onExpansionToggle: x
-}) => {
-  const [r, o] = u.useState(""), b = j(i), w = u.useMemo(() => r.length > 0 ? a.uniqBy(
-    b.filter(
-      (e) => e.name.toLowerCase().includes(r)
-    ),
-    (e) => e.id
-  ) : i, [r, i]);
-  let n = null;
-  const I = 500;
-  return /* @__PURE__ */ d(p, { children: [
-    !h && /* @__PURE__ */ d(p, { children: [
-      /* @__PURE__ */ t(F, { px: 1, pt: 0.75, children: /* @__PURE__ */ t(
-        _,
+import { jsxs as o, Fragment as S, jsx as t } from "react/jsx-runtime";
+import { ArrowDropDown as f, ArrowRight as g } from "@mui/icons-material";
+import r from "lodash";
+import { SearchInput as b } from "../search-input/index.js";
+import { Item as w } from "./item/index.js";
+import { useTreeViewFilterLogic as I } from "./logic.js";
+import { TreeViewFilterRoot as T, SearchContainer as p, TreeViewDivider as C, TreeContainer as D } from "./styled.js";
+const F = {
+  "& .MuiInputBase-input": {
+    padding: "8px 0px 8px 12px",
+    fontSize: "small"
+  }
+}, E = {
+  collapseIcon: () => /* @__PURE__ */ t(f, {}),
+  expandIcon: () => /* @__PURE__ */ t(g, {})
+}, L = (e) => {
+  const { state: d, actions: l } = I(e), { ownerState: c, search: s, filteredData: m, idKey: a } = d;
+  return /* @__PURE__ */ o(T, { ownerState: c, sx: e.sx, children: [
+    !e.disableSearch && /* @__PURE__ */ o(S, { children: [
+      /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(
+        b,
         {
           fullWidth: !0,
           disableLabel: !0,
           placeholder: "Filter",
-          sx: {
-            "& .MuiInputBase-input": {
-              p: "8px 0px 8px 12px",
-              fontSize: "small"
-            }
-          },
+          sx: F,
           iconSize: "small",
-          onChange: (e) => {
-            n && clearTimeout(n), n = setTimeout(() => o(e.toLowerCase()), I);
-          },
-          onSubmit: (e) => {
-            o(e || "");
-          }
+          onChange: l.handleSearch,
+          onSubmit: l.handleSubmit
         }
       ) }),
-      /* @__PURE__ */ t(L, { sx: { mt: 1.75 } })
+      /* @__PURE__ */ t(C, {})
     ] }),
     /* @__PURE__ */ t(
-      B,
+      D,
       {
         "aria-label": "tree view filter",
         disableSelection: !0,
-        defaultExpandedItems: f,
-        slots: {
-          collapseIcon: () => /* @__PURE__ */ t(y, {}),
-          expandIcon: () => /* @__PURE__ */ t(z, {})
-        },
-        onItemExpansionToggle: x,
-        children: w.map((e, g) => {
-          const l = String(e[s]), T = a.includes(m, l), D = a.includes(c, l);
+        defaultExpandedItems: e.expanded,
+        slots: E,
+        onItemExpansionToggle: e.onExpansionToggle,
+        children: m.map((i, h) => {
+          const n = String(r.get(i, a)), u = r.includes(e.selected, n), x = r.includes(e.disabled, n);
           return /* @__PURE__ */ t(
-            C,
+            w,
             {
-              id: l,
-              idKey: s,
-              name: e.name,
-              checked: T,
-              disabled: D,
-              disabledIds: c,
-              children: r ? [] : e.children,
-              onChange: S,
-              defaultSelected: m
+              id: n,
+              idKey: a,
+              name: i.name,
+              checked: u,
+              disabled: x,
+              disabledIds: e.disabled,
+              children: s ? [] : i.children,
+              onChange: e.onChange,
+              defaultSelected: e.selected
             },
-            g
+            h
           );
         })
       }
@@ -84,5 +62,5 @@ const H = ({
   ] });
 };
 export {
-  H as TreeViewFilter
+  L as TreeViewFilter
 };

package/dist/components/treeview-filter/item/index.js

@@ -1,54 +1,55 @@
-import { jsx as e } from "react/jsx-runtime";
-import I from "../item-label/index.js";
-import a from "lodash";
-import { TreeItem as h } from "./styled.js";
-function x({
-  id: m,
-  idKey: n,
-  name: p,
-  checked: i,
-  disabled: d,
-  disabledIds: o,
-  onChange: c,
-  children: s,
-  defaultSelected: l
-}) {
-  return /* @__PURE__ */ e(
-    h,
+import { jsx as i } from "react/jsx-runtime";
+import c from "lodash";
+import { ItemLabel as u } from "../item-label/index.js";
+import { TreeItem as g } from "../styled.js";
+const k = (a) => {
+  const {
+    id: n,
+    idKey: r,
+    name: h,
+    checked: t,
+    disabled: b,
+    disabledIds: l,
+    onChange: o,
+    children: m,
+    defaultSelected: s
+  } = a;
+  return /* @__PURE__ */ i(
+    g,
     {
-      itemId: String(m),
-      label: /* @__PURE__ */ e(
-        I,
+      itemId: String(n),
+      label: /* @__PURE__ */ i(
+        u,
         {
-          id: m,
-          name: p,
-          checked: i,
-          disabled: d,
-          onChange: c
+          id: n,
+          name: h,
+          checked: t,
+          disabled: b,
+          onChange: o
         }
       ),
-      checked: i,
-      children: s && s.map((r, f) => {
-        const t = String(r[n]), u = a.includes(l, t), b = a.includes(o, t);
-        return /* @__PURE__ */ e(
-          x,
+      checked: t,
+      children: m && m.map((e, p) => {
+        const d = String(c.get(e, r ?? "id")), I = c.includes(s, d), f = c.includes(l, d);
+        return /* @__PURE__ */ i(
+          k,
           {
-            id: t,
-            idKey: n,
-            name: r.name,
-            checked: u,
-            disabled: b,
-            disabledIds: o,
-            children: r.children,
-            onChange: c,
-            defaultSelected: l
+            id: d,
+            idKey: r,
+            name: e.name,
+            checked: I,
+            disabled: f,
+            disabledIds: l,
+            children: e.children,
+            onChange: o,
+            defaultSelected: s
           },
-          f
+          p
         );
       })
     }
   );
-}
+};
 export {
-  x as default
+  k as Item
 };

package/dist/components/treeview-filter/item-label/index.js

@@ -1,46 +1,26 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { B as s } from "../../../Box-B1AVyJ_s.js";
-import { C as p } from "../../../Checkbox-CrU2hpWB.js";
-import { T as h } from "../../../Typography-D1t7XuLN.js";
-function u({
-  id: o,
-  name: n,
-  checked: i,
-  disabled: r,
-  onChange: a
-}) {
-  return /* @__PURE__ */ l(s, { display: "flex", alignItems: "center", children: [
-    /* @__PURE__ */ e(
-      p,
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import { ItemLabelRoot as c, ItemCheckbox as s, ItemText as d } from "../styled.js";
+const b = (o) => {
+  const { id: n, name: l, checked: r, disabled: i, onChange: t } = o;
+  return /* @__PURE__ */ h(c, { children: [
+    /* @__PURE__ */ a(
+      s,
       {
         size: "small",
-        checked: i,
-        value: o,
-        sx: {
-          padding: 0,
-          marginRight: 0.85,
-          "& .MuiSvgIcon-root": { width: 14, height: 14 }
+        checked: r,
+        value: n,
+        disabled: i,
+        onChange: (e) => {
+          t && t(e.target.value, e.target.checked);
         },
-        disabled: r,
-        onChange: (t) => {
-          a && a(t.target.value, t.target.checked);
-        },
-        onClick: (t) => {
-          t.stopPropagation();
+        onClick: (e) => {
+          e.stopPropagation();
         }
       }
     ),
-    /* @__PURE__ */ e(
-      h,
-      {
-        variant: "subtitle1",
-        fontSize: "12px",
-        sx: { userSelect: "none" },
-        children: n
-      }
-    )
+    /* @__PURE__ */ a(d, { variant: "subtitle1", children: l })
   ] });
-}
+};
 export {
-  u as default
+  b as ItemLabel
 };

package/dist/components/treeview-filter/logic.js

@@ -0,0 +1,28 @@
+import { useThemeProps as d } from "@mui/material";
+import f from "lodash";
+import s from "react";
+import { flattenNestedTemplates as h } from "../../utils/ontology.js";
+const p = 500, R = (u) => {
+  const a = d({ props: u, name: "HCTreeViewFilter" }), { data: r, idKey: n = "id" } = a, [t, c] = s.useState(""), o = s.useRef(
+    null
+  ), i = h(
+    r
+  ), l = s.useMemo(() => t.length > 0 ? f.uniqBy(
+    i.filter((e) => e.name.toLowerCase().includes(t)),
+    (e) => e.id
+  ) : r, [t, r, i]), m = { ...a, idKey: n };
+  return {
+    refs: {},
+    state: { ownerState: m, search: t, filteredData: l, idKey: n },
+    actions: { handleSearch: (e) => {
+      o.current && clearTimeout(o.current), o.current = setTimeout(() => {
+        c(e.toLowerCase());
+      }, p);
+    }, handleSubmit: (e) => {
+      c(e ? e.toLowerCase() : "");
+    } }
+  };
+};
+export {
+  R as useTreeViewFilterLogic
+};