@hybridcore/ui 1.6.0 → 1.6.1

package/dist/components/context-menu/index.js

@@ -1,462 +1,30 @@
-import { jsx as p, jsxs as S, Fragment as M } from "react/jsx-runtime";
-import { ClickAwayListener as U } from "@mui/material";
-import { L as T, a as G } from "../../List-tqElle9C.js";
-import { l as v, g as D, L as W } from "../../ListItem-CfjsIg4B.js";
-import { a as d, _ as k } from "../../objectWithoutPropertiesLoose-DJteAcBH.js";
-import * as f from "react";
-import { P as t } from "../../index-C__OZmYy.js";
-import { u as R, c as h, a as P } from "../../useThemeProps-BzzHcQyd.js";
-import { alpha as I } from "@mui/system";
-import { s as B, r as A } from "../../styled-eZwjUruw.js";
-import { B as z, u as q, a as H } from "../../ButtonBase-2bPw77UP.js";
-import { g as J, l as w, b as K } from "../../listItemTextClasses-C3lndiXO.js";
-import { T as C } from "../../Typography-CxbneZy_.js";
-const Q = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"], X = (e, o) => {
-  const {
-    ownerState: s
-  } = e;
-  return [o.root, s.dense && o.dense, s.alignItems === "flex-start" && o.alignItemsFlexStart, s.divider && o.divider, !s.disableGutters && o.gutters];
-}, Y = (e) => {
-  const {
-    alignItems: o,
-    classes: s,
-    dense: a,
-    disabled: n,
-    disableGutters: i,
-    divider: c,
-    selected: r
-  } = e, u = P({
-    root: ["root", a && "dense", !i && "gutters", c && "divider", n && "disabled", o === "flex-start" && "alignItemsFlexStart", r && "selected"]
-  }, D, s);
-  return d({}, s, u);
-}, Z = B(z, {
-  shouldForwardProp: (e) => A(e) || e === "classes",
-  name: "MuiListItemButton",
-  slot: "Root",
-  overridesResolver: X
-})(({
-  theme: e,
-  ownerState: o
-}) => d({
-  display: "flex",
-  flexGrow: 1,
-  justifyContent: "flex-start",
-  alignItems: "center",
-  position: "relative",
-  textDecoration: "none",
-  minWidth: 0,
-  boxSizing: "border-box",
-  textAlign: "left",
-  paddingTop: 8,
-  paddingBottom: 8,
-  transition: e.transitions.create("background-color", {
-    duration: e.transitions.duration.shortest
-  }),
-  "&:hover": {
-    textDecoration: "none",
-    backgroundColor: (e.vars || e).palette.action.hover,
-    // Reset on touch devices, it doesn't add specificity
-    "@media (hover: none)": {
-      backgroundColor: "transparent"
-    }
-  },
-  [`&.${v.selected}`]: {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : I(e.palette.primary.main, e.palette.action.selectedOpacity),
-    [`&.${v.focusVisible}`]: {
-      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : I(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
-    }
-  },
-  [`&.${v.selected}:hover`]: {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : I(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    "@media (hover: none)": {
-      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : I(e.palette.primary.main, e.palette.action.selectedOpacity)
-    }
-  },
-  [`&.${v.focusVisible}`]: {
-    backgroundColor: (e.vars || e).palette.action.focus
-  },
-  [`&.${v.disabled}`]: {
-    opacity: (e.vars || e).palette.action.disabledOpacity
-  }
-}, o.divider && {
-  borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
-  backgroundClip: "padding-box"
-}, o.alignItems === "flex-start" && {
-  alignItems: "flex-start"
-}, !o.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, o.dense && {
-  paddingTop: 4,
-  paddingBottom: 4
-})), F = /* @__PURE__ */ f.forwardRef(function(o, s) {
-  const a = R({
-    props: o,
-    name: "MuiListItemButton"
-  }), {
-    alignItems: n = "center",
-    autoFocus: i = !1,
-    component: c = "div",
-    children: r,
-    dense: m = !1,
-    disableGutters: u = !1,
-    divider: L = !1,
-    focusVisibleClassName: O,
-    selected: N = !1,
-    className: x
-  } = a, l = k(a, Q), y = f.useContext(T), g = f.useMemo(() => ({
-    dense: m || y.dense || !1,
-    alignItems: n,
-    disableGutters: u
-  }), [n, y.dense, m, u]), b = f.useRef(null);
-  q(() => {
-    i && (b.current ? b.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a ListItemButton whose component has not been rendered."));
-  }, [i]);
-  const j = d({}, a, {
-    alignItems: n,
-    dense: g.dense,
-    disableGutters: u,
-    divider: L,
-    selected: N
-  }), $ = Y(j), _ = H(b, s);
-  return /* @__PURE__ */ p(T.Provider, {
-    value: g,
-    children: /* @__PURE__ */ p(Z, d({
-      ref: _,
-      href: l.href || l.to,
-      component: (l.href || l.to) && c === "div" ? "a" : c,
-      focusVisibleClassName: h($.focusVisible, O),
-      ownerState: j,
-      className: h($.root, x)
-    }, l, {
-      classes: $,
-      children: r
-    }))
-  });
-});
-process.env.NODE_ENV !== "production" && (F.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * Defines the `align-items` style property.
-   * @default 'center'
-   */
-  alignItems: t.oneOf(["center", "flex-start"]),
-  /**
-   * If `true`, the list item is focused during the first mount.
-   * Focus will also be triggered if the value changes from false to true.
-   * @default false
-   */
-  autoFocus: t.bool,
-  /**
-   * The content of the component if a `ListItemSecondaryAction` is used it must
-   * be the last child.
-   */
-  children: t.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: t.object,
-  /**
-   * @ignore
-   */
-  className: t.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: t.elementType,
-  /**
-   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
-   * The prop defaults to the value inherited from the parent List component.
-   * @default false
-   */
-  dense: t.bool,
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: t.bool,
-  /**
-   * If `true`, the left and right padding is removed.
-   * @default false
-   */
-  disableGutters: t.bool,
-  /**
-   * If `true`, a 1px light border is added to the bottom of the list item.
-   * @default false
-   */
-  divider: t.bool,
-  /**
-   * This prop can help identify which element has keyboard focus.
-   * The class name will be applied when the element gains the focus through keyboard interaction.
-   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
-   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
-   * if needed.
-   */
-  focusVisibleClassName: t.string,
-  /**
-   * @ignore
-   */
-  href: t.string,
-  /**
-   * Use to apply selected styling.
-   * @default false
-   */
-  selected: t.bool,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
-});
-const ee = ["className"], te = (e) => {
-  const {
-    alignItems: o,
-    classes: s
-  } = e;
-  return P({
-    root: ["root", o === "flex-start" && "alignItemsFlexStart"]
-  }, J, s);
-}, oe = B("div", {
-  name: "MuiListItemIcon",
-  slot: "Root",
-  overridesResolver: (e, o) => {
-    const {
-      ownerState: s
-    } = e;
-    return [o.root, s.alignItems === "flex-start" && o.alignItemsFlexStart];
-  }
-})(({
-  theme: e,
-  ownerState: o
-}) => d({
-  minWidth: 56,
-  color: (e.vars || e).palette.action.active,
-  flexShrink: 0,
-  display: "inline-flex"
-}, o.alignItems === "flex-start" && {
-  marginTop: 8
-})), V = /* @__PURE__ */ f.forwardRef(function(o, s) {
-  const a = R({
-    props: o,
-    name: "MuiListItemIcon"
-  }), {
-    className: n
-  } = a, i = k(a, ee), c = f.useContext(T), r = d({}, a, {
-    alignItems: c.alignItems
-  }), m = te(r);
-  return /* @__PURE__ */ p(oe, d({
-    className: h(m.root, n),
-    ownerState: r,
-    ref: s
-  }, i));
-});
-process.env.NODE_ENV !== "production" && (V.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * The content of the component, normally `Icon`, `SvgIcon`,
-   * or a `@mui/icons-material` SVG icon element.
-   */
-  children: t.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: t.object,
-  /**
-   * @ignore
-   */
-  className: t.string,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
-});
-const se = ["children", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"], ae = (e) => {
-  const {
-    classes: o,
-    inset: s,
-    primary: a,
-    secondary: n,
-    dense: i
-  } = e;
-  return P({
-    root: ["root", s && "inset", i && "dense", a && n && "multiline"],
-    primary: ["primary"],
-    secondary: ["secondary"]
-  }, K, o);
-}, re = B("div", {
-  name: "MuiListItemText",
-  slot: "Root",
-  overridesResolver: (e, o) => {
-    const {
-      ownerState: s
-    } = e;
-    return [{
-      [`& .${w.primary}`]: o.primary
-    }, {
-      [`& .${w.secondary}`]: o.secondary
-    }, o.root, s.inset && o.inset, s.primary && s.secondary && o.multiline, s.dense && o.dense];
-  }
-})(({
-  ownerState: e
-}) => d({
-  flex: "1 1 auto",
-  minWidth: 0,
-  marginTop: 4,
-  marginBottom: 4
-}, e.primary && e.secondary && {
-  marginTop: 6,
-  marginBottom: 6
-}, e.inset && {
-  paddingLeft: 56
-})), E = /* @__PURE__ */ f.forwardRef(function(o, s) {
-  const a = R({
-    props: o,
-    name: "MuiListItemText"
-  }), {
-    children: n,
-    className: i,
-    disableTypography: c = !1,
-    inset: r = !1,
-    primary: m,
-    primaryTypographyProps: u,
-    secondary: L,
-    secondaryTypographyProps: O
-  } = a, N = k(a, se), {
-    dense: x
-  } = f.useContext(T);
-  let l = m ?? n, y = L;
-  const g = d({}, a, {
-    disableTypography: c,
-    inset: r,
-    primary: !!l,
-    secondary: !!y,
-    dense: x
-  }), b = ae(g);
-  return l != null && l.type !== C && !c && (l = /* @__PURE__ */ p(C, d({
-    variant: x ? "body2" : "body1",
-    className: b.primary,
-    component: u != null && u.variant ? void 0 : "span",
-    display: "block"
-  }, u, {
-    children: l
-  }))), y != null && y.type !== C && !c && (y = /* @__PURE__ */ p(C, d({
-    variant: "body2",
-    className: b.secondary,
-    color: "text.secondary",
-    display: "block"
-  }, O, {
-    children: y
-  }))), /* @__PURE__ */ S(re, d({
-    className: h(b.root, i),
-    ownerState: g,
-    ref: s
-  }, N, {
-    children: [l, y]
-  }));
-});
-process.env.NODE_ENV !== "production" && (E.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * Alias for the `primary` prop.
-   */
-  children: t.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: t.object,
-  /**
-   * @ignore
-   */
-  className: t.string,
-  /**
-   * If `true`, the children won't be wrapped by a Typography component.
-   * This can be useful to render an alternative Typography variant by wrapping
-   * the `children` (or `primary`) text, and optional `secondary` text
-   * with the Typography component.
-   * @default false
-   */
-  disableTypography: t.bool,
-  /**
-   * If `true`, the children are indented.
-   * This should be used if there is no left avatar or left icon.
-   * @default false
-   */
-  inset: t.bool,
-  /**
-   * The main content element.
-   */
-  primary: t.node,
-  /**
-   * These props will be forwarded to the primary typography component
-   * (as long as disableTypography is not `true`).
-   */
-  primaryTypographyProps: t.object,
-  /**
-   * The secondary content element.
-   */
-  secondary: t.node,
-  /**
-   * These props will be forwarded to the secondary typography component
-   * (as long as disableTypography is not `true`).
-   */
-  secondaryTypographyProps: t.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
-});
-const ve = ({
-  open: e,
-  buttons: o,
-  position: s,
-  width: a = 160,
-  sx: n,
-  onClose: i
-}) => {
-  const c = () => {
-    i && i();
-  };
-  return e ? /* @__PURE__ */ p(U, { onClickAway: c, children: /* @__PURE__ */ p(
-    G,
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { ClickAwayListener as a } from "@mui/material";
+import { useContextMenuLogic as d } from "./logic.js";
+import { ContextMenuList as u, ContextMenuItem as x, ContextMenuItemButton as C, ContextMenuItemIcon as m, ContextMenuItemText as I } from "./styled.js";
+const y = (e) => {
+  const { state: o, actions: r } = d(e), { ownerState: i, open: c } = o;
+  return c ? /* @__PURE__ */ t(a, { onClickAway: r.handleClickAway, children: /* @__PURE__ */ t(u, { ownerState: i, sx: e.sx, disablePadding: !0, children: e.buttons.map((n, l) => /* @__PURE__ */ t(
+    x,
     {
-      sx: {
-        position: "absolute",
-        zIndex: 9999999,
-        width: a,
-        maxWidth: 360,
-        bgcolor: "background.paper",
-        left: s == null ? void 0 : s.left,
-        top: s == null ? void 0 : s.top,
-        borderRadius: 0.5,
-        ...n
-      },
+      secondaryAction: n.endIcon,
       disablePadding: !0,
-      children: o.map((r, m) => /* @__PURE__ */ p(W, { secondaryAction: r.endIcon, disablePadding: !0, children: /* @__PURE__ */ S(F, { role: void 0, onClick: r.onClick, dense: !0, children: [
-        r.startIcon !== void 0 && /* @__PURE__ */ p(V, { sx: { minWidth: "auto", mr: 1 }, children: r.startIcon }),
-        /* @__PURE__ */ p(
-          E,
-          {
-            primary: r.label,
-            primaryTypographyProps: {
-              fontSize: "12px"
-            }
-          }
-        )
-      ] }) }, m))
-    }
-  ) }) : /* @__PURE__ */ p(M, {});
+      children: /* @__PURE__ */ s(
+        C,
+        {
+          role: void 0,
+          onClick: n.onClick,
+          dense: !0,
+          children: [
+            n.startIcon !== void 0 && /* @__PURE__ */ t(m, { children: n.startIcon }),
+            /* @__PURE__ */ t(I, { primary: n.label })
+          ]
+        }
+      )
+    },
+    l
+  )) }) }) : null;
 };
 export {
-  ve as ContextMenu
+  y as ContextMenu
 };

package/dist/components/context-menu/logic.js

@@ -0,0 +1,14 @@
+import { useThemeProps as p } from "@mui/material";
+const a = (t) => {
+  const o = p({ props: t, name: "HCContextMenu" }), { width: n = 160, onClose: e } = o, s = { ...o, width: n }, r = () => {
+    e && e();
+  };
+  return {
+    refs: {},
+    state: { ownerState: s, open: o.open },
+    actions: { handleClickAway: r }
+  };
+};
+export {
+  a as useContextMenuLogic
+};

package/dist/components/context-menu/styled.js

@@ -0,0 +1,40 @@
+import { styled as o, List as n, ListItem as i, ListItemButton as s, ListItemIcon as m, ListItemText as u } from "@mui/material";
+const a = (t) => t !== "ownerState", C = o(n, {
+  name: "HCContextMenu",
+  slot: "list",
+  shouldForwardProp: a
+})(({ theme: t, ownerState: e }) => ({
+  position: "absolute",
+  zIndex: 9999999,
+  width: e.width ?? 160,
+  maxWidth: 360,
+  backgroundColor: t.palette.background.paper,
+  borderRadius: t.shape.borderRadius * 0.5,
+  ...e.position ? { left: e.position.left, top: e.position.top } : {}
+})), p = o(i, {
+  name: "HCContextMenu",
+  slot: "item"
+})({}), r = o(s, {
+  name: "HCContextMenu",
+  slot: "itemButton"
+})({}), d = o(m, {
+  name: "HCContextMenu",
+  slot: "itemIcon"
+})(({ theme: t }) => ({
+  minWidth: "auto",
+  marginRight: t.spacing(1)
+})), l = o(u, {
+  name: "HCContextMenu",
+  slot: "itemText"
+})({
+  "& .MuiListItemText-primary": {
+    fontSize: 12
+  }
+});
+export {
+  p as ContextMenuItem,
+  r as ContextMenuItemButton,
+  d as ContextMenuItemIcon,
+  l as ContextMenuItemText,
+  C as ContextMenuList
+};

package/dist/components/data-security-selectors/security-level/index.js

@@ -1,94 +1,39 @@
-import { jsx as e, jsxs as u, Fragment as A } from "react/jsx-runtime";
-import { useMemo as D } from "react";
-import { Box as p, Typography as F, FormControl as I, InputLabel as $, Select as j, MenuItem as v, FormHelperText as w } from "@mui/material";
-import { b as s } from "../../../helpers-B4UL9NMD.js";
-import { ConditionalWrapper as y } from "../../conditional-wrapper/index.js";
-const B = ({
-  ontologyId: a,
-  appRoles: o,
-  templateKeys: i,
-  templateType: c,
-  securityLevels: t,
-  value: x,
-  minLevel: l = 99,
-  minLevelId: d,
-  minLevelRoles: n,
-  showError: m,
-  variant: g = "outlined",
-  labelPosition: f = "default",
-  onChange: S
-}) => {
-  const b = D(() => {
-    if (n && n.length > 0) {
-      for (const r of n)
-        if (s(r, "SUPER_ADMIN", o))
-          return l;
-    }
-    if (i && i.length > 0 && c) {
-      for (const r of i)
-        if (s(
-          `${a}.${c}.${r}`,
-          "SUPER_ADMIN",
-          o
-        ))
-          return l;
-    }
-    if (d && t.length > 0) {
-      const r = t.find(
-        (h) => h.id === d
-      );
-      if (r) return r.level;
-    }
-    return l;
-  }, [
-    l,
-    d,
-    t,
-    n,
-    i,
-    c,
-    o,
-    a
-  ]), C = (r) => {
-    S(r.target.value);
-  };
-  return /* @__PURE__ */ e(
-    y,
-    {
-      condition: f === "left",
-      wrapper: (r) => /* @__PURE__ */ u(p, { display: "flex", alignItems: "center", children: [
-        /* @__PURE__ */ e(F, { width: "32%", children: "Security Level *" }),
-        /* @__PURE__ */ e(p, { width: "68%", children: r })
-      ] }),
-      children: /* @__PURE__ */ u(A, { children: [
-        /* @__PURE__ */ u(
-          I,
-          {
-            fullWidth: !0,
-            variant: g,
-            error: m,
-            sx: { ...g === "outlined" && { mt: 1 } },
-            children: [
-              f === "default" && /* @__PURE__ */ e($, { id: "security-level-label", children: "Security Level *" }),
-              /* @__PURE__ */ e(
-                j,
-                {
-                  label: f === "default" ? "Security Level *" : void 0,
-                  labelId: "security-level-label",
-                  id: "demo-simple-select",
-                  value: x,
-                  onChange: C,
-                  children: t.filter((r) => r.level <= b).map((r, h) => /* @__PURE__ */ e(v, { value: r.id, children: r.name }, h))
-                }
-              )
-            ]
-          }
-        ),
-        m && /* @__PURE__ */ e(w, { error: !0, children: "This field is required!" })
-      ] })
-    }
-  );
+import { jsxs as t, Fragment as h, jsx as e } from "react/jsx-runtime";
+import { InputLabel as v } from "@mui/material";
+import { useSecurityLevelLogic as y } from "./logic.js";
+import { SecurityFormControl as L, SecuritySelect as f, SecurityMenuItem as m, SecurityHelperText as S, SecurityLevelRoot as b, LeftLayout as x, LeftLabel as g, LeftContent as C } from "./styled.js";
+const F = (r) => {
+  const { state: o, actions: u } = y(r), { ownerState: i, visibleLevels: a, variant: d, labelPosition: l } = o, c = /* @__PURE__ */ t(h, { children: [
+    /* @__PURE__ */ t(
+      L,
+      {
+        ownerState: i,
+        fullWidth: !0,
+        variant: d,
+        error: r.showError,
+        children: [
+          l === "default" && /* @__PURE__ */ e(v, { id: "security-level-label", children: "Security Level *" }),
+          /* @__PURE__ */ e(
+            f,
+            {
+              label: l === "default" ? "Security Level *" : void 0,
+              labelId: "security-level-label",
+              id: "security-level-select",
+              value: r.value,
+              onChange: u.handleChange,
+              children: a.map((n, s) => /* @__PURE__ */ e(m, { value: n.id, children: n.name }, s))
+            }
+          )
+        ]
+      }
+    ),
+    r.showError && /* @__PURE__ */ e(S, { error: !0, children: "This field is required!" })
+  ] });
+  return /* @__PURE__ */ e(b, { ownerState: i, sx: r.sx, children: l === "left" ? /* @__PURE__ */ t(x, { children: [
+    /* @__PURE__ */ e(g, { children: "Security Level *" }),
+    /* @__PURE__ */ e(C, { children: c })
+  ] }) : c });
 };
 export {
-  B as SecurityLevel
+  F as SecurityLevel
 };