@hybridcore/ui 1.6.0 → 1.6.2

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-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
+};