@hybridcore/ui 1.6.0 → 1.6.1

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