@hybridcore/ui 1.6.0 → 1.6.1

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-p6OtTUEo.js";
-import { C as p } from "../../../Checkbox-CWRMFTBp.js";
-import { T as h } from "../../../Typography-CxbneZy_.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
+};

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

@@ -0,0 +1,86 @@
+import { styled as t, Box as o, Divider as n, alpha as a, Checkbox as l, Typography as s } from "@mui/material";
+import { SimpleTreeView as m, TreeItem as p } from "@mui/x-tree-view";
+const r = (e) => e !== "ownerState" && e !== "checked", T = t(o, {
+  name: "HCTreeViewFilter",
+  slot: "root",
+  shouldForwardProp: r
+})({}), g = t(o, {
+  name: "HCTreeViewFilter",
+  slot: "searchContainer"
+})(({ theme: e }) => ({
+  paddingLeft: e.spacing(1),
+  paddingRight: e.spacing(1),
+  paddingTop: e.spacing(0.75)
+})), C = t(n, {
+  name: "HCTreeViewFilter",
+  slot: "divider"
+})(({ theme: e }) => ({
+  marginTop: e.spacing(1.75)
+})), b = t(m, {
+  name: "HCTreeViewFilter",
+  slot: "tree"
+})({}), w = t(p, {
+  name: "HCTreeViewFilter",
+  slot: "treeItem",
+  shouldForwardProp: r
+})(({ theme: e, checked: i }) => ({
+  position: "relative",
+  "& .MuiTreeItem-content": {
+    flexDirection: "row-reverse",
+    borderBottom: "1px solid",
+    borderBottomColor: e.palette.divider,
+    boxSizing: "border-box",
+    borderRadius: 0
+  },
+  "& .MuiTreeItem-iconContainer": {
+    transition: ".3s all",
+    "& svg": {
+      fontSize: "20px !important"
+    }
+  },
+  ...i && {
+    "&:before": {
+      content: '""',
+      position: "absolute",
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      borderLeft: "1px solid",
+      borderLeftColor: e.palette.primary.main,
+      backgroundColor: a(e.palette.primary.main, 0.1)
+    }
+  }
+})), x = t(o, {
+  name: "HCTreeViewFilter",
+  slot: "itemLabel"
+})({
+  display: "flex",
+  alignItems: "center"
+}), f = t(l, {
+  name: "HCTreeViewFilter",
+  slot: "itemCheckbox"
+})(({ theme: e }) => ({
+  padding: 0,
+  marginRight: e.spacing(0.85),
+  "& .MuiSvgIcon-root": {
+    width: 14,
+    height: 14
+  }
+})), h = t(s, {
+  name: "HCTreeViewFilter",
+  slot: "itemText"
+})({
+  fontSize: "12px",
+  userSelect: "none"
+});
+export {
+  f as ItemCheckbox,
+  x as ItemLabelRoot,
+  h as ItemText,
+  g as SearchContainer,
+  b as TreeContainer,
+  w as TreeItem,
+  C as TreeViewDivider,
+  T as TreeViewFilterRoot
+};