@hybridcore/ui 1.4.37 → 1.4.38

package/dist/components/template-filters/components/filter/index.js

@@ -1,40 +1,44 @@
-import { jsx as g } from "react/jsx-runtime";
-import { useMemo as s, useState as f } from "react";
+import { jsx as x } from "react/jsx-runtime";
+import { useMemo as p, useState as g } from "react";
 import { TreeViewFilter as h } from "../../../treeview-filter/index.js";
-import { getNestedChildrenFromMap as x } from "../../../../utils/ontology.js";
+import { getNestedChildrenFromMap as y } from "../../../../utils/ontology.js";
 const O = ({
-  templates: l,
-  filters: n,
-  onChange: r
+  templates: r,
+  filters: a,
+  defaultExpanded: d = [],
+  onChange: s
 }) => {
-  const i = s(() => x(l), [l]), p = s(
-    () => n.map((e) => e.templateKey),
-    [n]
-  ), [d, m] = f([]);
-  return /* @__PURE__ */ g(
+  const m = p(() => y(r), [r]), f = p(
+    () => a.map((n) => n.templateKey),
+    [a]
+  ), [c, i] = g(d);
+  return /* @__PURE__ */ x(
     h,
     {
-      data: i,
-      onChange: (e, o) => {
-        let t = [...n];
+      data: m,
+      onChange: (n, o) => {
+        let e = [...a];
         if (o)
-          t.push({
-            templateKey: e,
+          e.push({
+            templateKey: n,
             filterOperator: "AND",
             filters: [],
             exclusionTemplateKeys: []
           });
         else {
-          const a = t.findIndex((c) => c.templateKey === e);
-          a !== -1 && t.splice(a, 1);
+          const t = e.findIndex((l) => l.templateKey === n);
+          t !== -1 && e.splice(t, 1);
         }
-        r && r(t);
+        s && s(e);
       },
       idKey: "templateKey",
-      selected: p,
-      expanded: d,
-      onToggle: (e, o) => {
-        m(o);
+      selected: f,
+      expanded: c,
+      onExpansionToggle: (n, o, e) => {
+        i(e ? (t) => [
+          ...t.filter((l) => l !== o),
+          o
+        ] : (t) => t.filter((l) => l !== o));
       }
     }
   );

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

@@ -1,70 +1,73 @@
-import { jsxs as p, Fragment as _, jsx as n } from "react/jsx-runtime";
-import f from "react";
-import { TreeViewFilter as b } from "../treeview-filter/index.js";
-import r from "lodash";
-import { flattenNestedTemplates as A } from "../../utils/ontology.js";
-import { F as E, I as M } from "../../InputLabel-ClDXuWBr.js";
+import { jsxs as h, Fragment as W, jsx as o } from "react/jsx-runtime";
+import u from "react";
+import { TreeViewFilter as _ } from "../treeview-filter/index.js";
+import s from "lodash";
+import { flattenNestedTemplates as b } from "../../utils/ontology.js";
+import { F as A, I as M } from "../../InputLabel-ClDXuWBr.js";
 import { S as j } from "../../Select-ush_fSWy.js";
 import { M as B } from "../../MenuItem-Lcjh1XlV.js";
 import { D as k, a as w, b as L } from "../../DialogContent-CtA2aNum.js";
 import { B as N } from "../../Button-jy67CcTH.js";
 const U = ({
   data: m,
-  label: s,
-  selected: o,
-  disabled: C,
-  idKey: l = "id",
-  variant: h = "outlined",
-  onChange: S
+  label: c,
+  selected: r,
+  disabled: S,
+  idKey: i = "id",
+  variant: g = "outlined",
+  onChange: D
 }) => {
-  const [D, u] = f.useState(!1), [I, g] = f.useState([]), i = A(m), a = f.useMemo(() => r.isArray(o) ? o.map(
-    (e) => i.find((t) => String(r.get(t, l)) === e)
-  ) : [], [o, i]), v = (e, t) => {
-    S(e, t);
-  }, T = () => {
-    u(!0), O();
-  }, x = () => {
-    u(!1);
-  }, F = (e, t) => {
-    g(t);
+  const [v, x] = u.useState(!1), [E, d] = u.useState([]), f = b(m), p = u.useMemo(() => s.isArray(r) ? r.map(
+    (n) => f.find((e) => String(s.get(e, i)) === n)
+  ) : [], [r, f]), T = (n, e) => {
+    D(n, e);
+  }, F = () => {
+    x(!0), O();
+  }, C = () => {
+    x(!1);
+  }, I = (n, e, l) => {
+    d(l ? (a) => [
+      ...a.filter((t) => t !== e),
+      e
+    ] : (a) => a.filter((t) => t !== e));
   }, O = () => {
-    const e = [];
-    a.length > 0 && a.forEach((t) => {
-      const d = t == null ? void 0 : t.parentKeys, W = i.filter((c) => d == null ? void 0 : d.includes(c.templateKey)).map((c) => String(r.get(c, l)));
-      e.push(...W);
-    }), g(e);
+    const n = [];
+    p.length > 0 && p.forEach((e) => {
+      const l = e == null ? void 0 : e.parentKeys, a = f.filter((t) => l == null ? void 0 : l.includes(t.templateKey)).map((t) => String(s.get(t, i)));
+      n.push(...a);
+    }), d(n);
   };
-  return /* @__PURE__ */ p(_, { children: [
-    /* @__PURE__ */ p(E, { variant: h, fullWidth: !0, children: [
-      s !== void 0 && /* @__PURE__ */ n(M, { id: "select-label", children: s }),
-      /* @__PURE__ */ n(
+  return /* @__PURE__ */ h(W, { children: [
+    /* @__PURE__ */ h(A, { variant: g, fullWidth: !0, children: [
+      c !== void 0 && /* @__PURE__ */ o(M, { id: "select-label", children: c }),
+      /* @__PURE__ */ o(
         j,
         {
-          label: s,
-          variant: h,
+          label: c,
+          variant: g,
           id: "select",
           labelId: "select-label",
-          value: o,
+          value: r,
           open: !1,
-          onOpen: T,
-          children: a.length > 0 && a.map((e, t) => /* @__PURE__ */ n(B, { value: r.get(e, l) ?? "", children: e == null ? void 0 : e.name }, t))
+          onOpen: F,
+          children: p.length > 0 && p.map((n, e) => /* @__PURE__ */ o(B, { value: s.get(n, i) ?? "", children: n == null ? void 0 : n.name }, e))
         }
       )
     ] }),
-    /* @__PURE__ */ p(k, { open: D, onClose: x, fullWidth: !0, maxWidth: "sm", children: [
-      /* @__PURE__ */ n(w, { sx: { p: 1, pt: 2 }, children: /* @__PURE__ */ n(
-        b,
+    /* @__PURE__ */ h(k, { open: v, onClose: C, fullWidth: !0, maxWidth: "sm", children: [
+      /* @__PURE__ */ o(w, { sx: { p: 1, pt: 2 }, children: /* @__PURE__ */ o(
+        _,
         {
           data: m,
-          selected: r.isArray(o) ? o : void 0,
-          disabled: C,
-          expanded: I,
-          idKey: l,
-          onToggle: F,
-          onChange: v
+          selected: s.isArray(r) ? r : void 0,
+          disabled: S,
+          expanded: E,
+          idKey: i,
+          onExpansionToggle: I,
+          onChange: T
         }
       ) }),
-      /* @__PURE__ */ n(L, { children: /* @__PURE__ */ n(N, { onClick: x, variant: "contained", fullWidth: !0, children: "OK" }) })
+      /* @__PURE__ */ o(L, { children: /* @__PURE__ */ o(N, { onClick: C, variant: "contained", fullWidth: !0, children: "OK" }) })
     ] })
   ] });
 };

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

@@ -1,29 +1,31 @@
-import { jsxs as c, Fragment as m, jsx as t } from "react/jsx-runtime";
-import d from "react";
-import { SimpleTreeView as D } from "@mui/x-tree-view";
-import I from "./item/index.js";
-import p from "lodash";
-import { Box as C, Divider as F } from "@mui/material";
-import { SearchInput as L } from "../search-input/index.js";
-import { flattenNestedTemplates as _ } from "../../utils/ontology.js";
-const R = ({
-  data: l,
-  idKey: n = "id",
-  selected: a,
-  // expanded,
-  disabled: s,
-  disableSearch: u,
-  onChange: f
+import { jsxs as c, Fragment as d, jsx as t } from "react/jsx-runtime";
+import p from "react";
+import { SimpleTreeView as C } from "@mui/x-tree-view";
+import F from "./item/index.js";
+import u from "lodash";
+import { Box as L, Divider as _ } from "@mui/material";
+import { SearchInput as j } from "../search-input/index.js";
+import { flattenNestedTemplates as z } from "../../utils/ontology.js";
+import { ArrowDropDown as A, ArrowRight as B } from "@mui/icons-material";
+const H = ({
+  data: r,
+  idKey: a = "id",
+  selected: s,
+  expanded: f,
+  disabled: m,
+  disableSearch: h,
+  onChange: S,
+  onExpansionToggle: x
 }) => {
-  const [i, h] = d.useState(""), S = _(l), x = d.useMemo(() => i.length > 0 ? S.filter(
-    (e) => e.name.toLowerCase().includes(i)
-  ) : l, [i, l]);
-  let o = null;
-  const b = 500;
-  return /* @__PURE__ */ c(m, { children: [
-    !u && /* @__PURE__ */ c(m, { children: [
-      /* @__PURE__ */ t(C, { px: 1, pt: 0.75, children: /* @__PURE__ */ t(
-        L,
+  const [o, i] = p.useState(""), b = z(r), w = p.useMemo(() => o.length > 0 ? b.filter(
+    (e) => e.name.toLowerCase().includes(o)
+  ) : r, [o, r]);
+  let l = null;
+  const I = 500;
+  return /* @__PURE__ */ c(d, { children: [
+    !h && /* @__PURE__ */ c(d, { children: [
+      /* @__PURE__ */ t(L, { px: 1, pt: 0.75, children: /* @__PURE__ */ t(
+        j,
         {
           fullWidth: !0,
           disableLabel: !0,
@@ -36,33 +38,42 @@ const R = ({
           },
           iconSize: "small",
           onChange: (e) => {
-            o && clearTimeout(o), o = setTimeout(() => h(e.toLowerCase()), b);
+            l && clearTimeout(l), l = setTimeout(() => i(e.toLowerCase()), I);
+          },
+          onSubmit: (e) => {
+            i(e || "");
           }
         }
       ) }),
-      /* @__PURE__ */ t(F, { sx: { mt: 1.75 } })
+      /* @__PURE__ */ t(_, { sx: { mt: 1.75 } })
     ] }),
     /* @__PURE__ */ t(
-      D,
+      C,
       {
         "aria-label": "tree view filter",
         disableSelection: !0,
-        children: x.map((e, T) => {
-          const r = String(e[n]), g = p.includes(a, r), w = p.includes(s, r);
-          return console.log({ id: r }), /* @__PURE__ */ t(
-            I,
+        defaultExpandedItems: f,
+        slots: {
+          collapseIcon: () => /* @__PURE__ */ t(A, {}),
+          expandIcon: () => /* @__PURE__ */ t(B, {})
+        },
+        onItemExpansionToggle: x,
+        children: w.map((e, g) => {
+          const n = String(e[a]), T = u.includes(s, n), D = u.includes(m, n);
+          return /* @__PURE__ */ t(
+            F,
             {
-              id: r,
-              idKey: n,
+              id: n,
+              idKey: a,
               name: e.name,
-              checked: g,
-              disabled: w,
-              disabledIds: s,
+              checked: T,
+              disabled: D,
+              disabledIds: m,
               children: e.children,
-              onChange: f,
-              defaultSelected: a
+              onChange: S,
+              defaultSelected: s
             },
-            T
+            g
           );
         })
       }
@@ -70,5 +81,5 @@ const R = ({
   ] });
 };
 export {
-  R as TreeViewFilter
+  H as TreeViewFilter
 };

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

@@ -1,53 +1,49 @@
-import { jsx as t } from "react/jsx-runtime";
-import g from "../item-label/index.js";
+import { jsx as e } from "react/jsx-runtime";
+import I from "../item-label/index.js";
 import a from "lodash";
-import { ArrowRight as I } from "@mui/icons-material";
 import { TreeItem as h } from "./styled.js";
 function x({
-  id: i,
+  id: m,
   idKey: n,
-  name: f,
-  checked: e,
-  disabled: l,
-  disabledIds: c,
-  onChange: s,
-  children: r,
-  defaultSelected: p
+  name: p,
+  checked: i,
+  disabled: d,
+  disabledIds: o,
+  onChange: c,
+  children: s,
+  defaultSelected: l
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ e(
     h,
     {
-      itemId: String(i),
-      label: /* @__PURE__ */ t(
-        g,
+      itemId: String(m),
+      label: /* @__PURE__ */ e(
+        I,
         {
-          id: i,
-          name: f,
-          checked: e,
-          disabled: l,
-          onChange: s
+          id: m,
+          name: p,
+          checked: i,
+          disabled: d,
+          onChange: c
         }
       ),
-      checked: e,
-      ...r && r.length > 0 && {
-        icon: /* @__PURE__ */ t(I, {})
-      },
-      children: r && r.map((o, u) => {
-        const m = String(o[n]), b = a.includes(p, m), d = a.includes(c, m);
-        return /* @__PURE__ */ t(
+      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,
           {
-            id: m,
+            id: t,
             idKey: n,
-            name: o.name,
-            checked: b,
-            disabled: d,
-            disabledIds: c,
-            children: o.children,
-            onChange: s,
-            defaultSelected: p
+            name: r.name,
+            checked: u,
+            disabled: b,
+            disabledIds: o,
+            children: r.children,
+            onChange: c,
+            defaultSelected: l
           },
-          u
+          f
         );
       })
     }

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

@@ -1,13 +1,14 @@
-import { TreeItem as t } from "@mui/x-tree-view";
-import { styled as r, alpha as i } from "@mui/material";
-const m = r(t)(
-  ({ theme: e, checked: o }) => ({
+import { TreeItem as r } from "@mui/x-tree-view";
+import { styled as t, alpha as i } from "@mui/material";
+const l = t(r)(
+  ({ theme: o, checked: e }) => ({
     position: "relative",
     "& .MuiTreeItem-content": {
       flexDirection: "row-reverse",
       borderBottom: "1px solid",
-      borderBottomColor: e.palette.divider,
-      boxSizing: "border-box"
+      borderBottomColor: o.palette.divider,
+      boxSizing: "border-box",
+      borderRadius: 0
     },
     "& .MuiTreeItem-iconContainer": {
       transition: ".3s all",
@@ -15,10 +16,10 @@ const m = r(t)(
         fontSize: "20px !important"
       }
     },
-    "& .MuiTreeItem-content.Mui-expanded .MuiTreeItem-iconContainer": {
-      // transform: "rotate(90deg)",
-    },
-    ...o && {
+    // "& .MuiTreeItem-content.Mui-expanded .MuiTreeItem-iconContainer": {
+    //   // transform: "rotate(90deg)",
+    // },
+    ...e && {
       "&:before": {
         content: '""',
         position: "absolute",
@@ -27,12 +28,12 @@ const m = r(t)(
         bottom: 0,
         right: 0,
         borderLeft: "1px solid",
-        borderLeftColor: e.palette.primary.main,
-        backgroundColor: i(e.palette.primary.main, 0.1)
+        borderLeftColor: o.palette.primary.main,
+        backgroundColor: i(o.palette.primary.main, 0.1)
       }
     }
   })
 );
 export {
-  m as TreeItem
+  l as TreeItem
 };

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

@@ -9,7 +9,7 @@ function u({
   disabled: r,
   onChange: a
 }) {
-  return /* @__PURE__ */ l(s, { display: "flex", alignItems: "center", py: 1, children: [
+  return /* @__PURE__ */ l(s, { display: "flex", alignItems: "center", children: [
     /* @__PURE__ */ e(
       p,
       {

package/dist/main.d.ts

@@ -585,7 +585,11 @@ declare interface Props_11 {
     disabled?: string[];
     disableSearch?: boolean;
     onChange?(id: string, checked: boolean): void;
-    onToggle?(event: React.SyntheticEvent, nodeIds: string[]): void;
+    onExpansionToggle?(
+    event: React.SyntheticEvent,
+    itemId: string,
+    isExpanded: boolean
+    ): void;
 }
 
 declare interface Props_2 {
@@ -815,6 +819,7 @@ declare interface TabItem {
     label: default_2.ReactNode;
     templates: Map<string | number, ONTOLOGY.TemplateType>;
     filters: FV.TemplateFilter[];
+    defaultExpanded?: string[];
     onChange: (filters: FV.TemplateFilter[]) => void;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hybridcore/ui",
   "description": "Hybrid Core UI Library",
-  "version": "1.4.37",
+  "version": "1.4.38",
   "author": "Hybrid Core",
   "license": "ISC",
   "type": "module",