import { jsx as d } from "react/jsx-runtime";
import { W as B, X as R, Y as z, Z as x, _ as j, $ as D, a0 as U, a1 as V, a2 as Y, a3 as F, a4 as G, a5 as J, a6 as X, a7 as Z, a8 as q, a9 as Q, aa as I } from "./index-Dmwc5xdZ.mjs";
import p, { forwardRef as S, useState as ee, useEffect as T, useImperativeHandle as te } from "react";
const [re, ne] = B("List component was not found in tree");
var ae = R((e, { spacing: r, center: t }) => ({
  itemWrapper: {
    ref: x("itemWrapper"),
    display: "inline-flex",
    flexDirection: "column",
    whiteSpace: "normal"
  },
  item: {
    whiteSpace: "nowrap",
    lineHeight: t ? 1 : e.lineHeight,
    "&:not(:first-of-type)": {
      marginTop: z({ size: r, sizes: e.spacing })
    },
    "&[data-with-icon]": {
      listStyle: "none",
      [`& .${x("itemWrapper")}`]: {
        display: "inline-flex",
        alignItems: t ? "center" : "flex-start",
        flexDirection: "row"
      }
    }
  },
  itemIcon: {
    display: "inline-block",
    verticalAlign: "middle",
    marginRight: e.spacing.sm
  }
})), oe = Object.defineProperty, h = Object.getOwnPropertySymbols, W = Object.prototype.hasOwnProperty, H = Object.prototype.propertyIsEnumerable, L = (e, r, t) => r in e ? oe(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, ie = (e, r) => {
  for (var t in r || (r = {}))
    W.call(r, t) && L(e, t, r[t]);
  if (h)
    for (var t of h(r))
      H.call(r, t) && L(e, t, r[t]);
  return e;
}, se = (e, r) => {
  var t = {};
  for (var n in e)
    W.call(e, n) && r.indexOf(n) < 0 && (t[n] = e[n]);
  if (e != null && h)
    for (var n of h(e))
      r.indexOf(n) < 0 && H.call(e, n) && (t[n] = e[n]);
  return t;
};
const le = {}, A = S((e, r) => {
  const t = j("ListItem", le, e), { className: n, children: s, icon: c } = t, o = se(t, ["className", "children", "icon"]), {
    icon: f,
    spacing: a,
    center: i,
    listStyleType: l,
    size: O,
    withPadding: y,
    classNames: g,
    styles: _,
    unstyled: v,
    variant: b
  } = ne(), m = c || f, { classes: u, cx: M } = ae({ withPadding: y, listStyleType: l, center: i, spacing: a }, { classNames: g, styles: _, unstyled: v, name: "List", variant: b, size: O });
  return /* @__PURE__ */ p.createElement(D, ie({
    component: "li",
    className: M(u.item, n),
    "data-with-icon": !!m || void 0,
    ref: r
  }, o), /* @__PURE__ */ p.createElement("div", {
    className: u.itemWrapper
  }, m && /* @__PURE__ */ p.createElement("span", {
    className: u.itemIcon
  }, m), /* @__PURE__ */ p.createElement("span", null, s)));
});
A.displayName = "@mantine/core/ListItem";
var ce = Object.defineProperty, de = Object.defineProperties, fe = Object.getOwnPropertyDescriptors, N = Object.getOwnPropertySymbols, pe = Object.prototype.hasOwnProperty, me = Object.prototype.propertyIsEnumerable, $ = (e, r, t) => r in e ? ce(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, ue = (e, r) => {
  for (var t in r || (r = {}))
    pe.call(r, t) && $(e, t, r[t]);
  if (N)
    for (var t of N(r))
      me.call(r, t) && $(e, t, r[t]);
  return e;
}, ye = (e, r) => de(e, fe(r)), ge = R((e, { withPadding: r, listStyleType: t }, { size: n }) => ({
  root: ye(ue({}, e.fn.fontStyles()), {
    listStyleType: t,
    color: e.colorScheme === "dark" ? e.colors.dark[0] : e.black,
    fontSize: z({ size: n, sizes: e.fontSizes }),
    lineHeight: e.lineHeight,
    margin: 0,
    paddingLeft: r ? e.spacing.xl : 0,
    listStylePosition: "inside"
  })
})), _e = Object.defineProperty, w = Object.getOwnPropertySymbols, k = Object.prototype.hasOwnProperty, K = Object.prototype.propertyIsEnumerable, C = (e, r, t) => r in e ? _e(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, ve = (e, r) => {
  for (var t in r || (r = {}))
    k.call(r, t) && C(e, t, r[t]);
  if (w)
    for (var t of w(r))
      K.call(r, t) && C(e, t, r[t]);
  return e;
}, he = (e, r) => {
  var t = {};
  for (var n in e)
    k.call(e, n) && r.indexOf(n) < 0 && (t[n] = e[n]);
  if (e != null && w)
    for (var n of w(e))
      r.indexOf(n) < 0 && K.call(e, n) && (t[n] = e[n]);
  return t;
};
const we = {
  type: "unordered",
  size: "md",
  spacing: 0
}, P = S((e, r) => {
  const t = j("List", we, e), {
    children: n,
    type: s,
    size: c,
    listStyleType: o,
    withPadding: f,
    center: a,
    spacing: i,
    icon: l,
    className: O,
    styles: y,
    classNames: g,
    unstyled: _,
    variant: v
  } = t, b = he(t, [
    "children",
    "type",
    "size",
    "listStyleType",
    "withPadding",
    "center",
    "spacing",
    "icon",
    "className",
    "styles",
    "classNames",
    "unstyled",
    "variant"
  ]), { classes: m, cx: u } = ge({ withPadding: f, listStyleType: o, center: a, spacing: i }, { classNames: g, styles: y, name: "List", unstyled: _, size: c, variant: v });
  return /* @__PURE__ */ p.createElement(re, {
    value: {
      spacing: i,
      center: a,
      icon: l,
      listStyleType: o,
      size: c,
      withPadding: f,
      classNames: g,
      styles: y,
      unstyled: _,
      variant: v
    }
  }, /* @__PURE__ */ p.createElement(D, ve({
    component: s === "unordered" ? "ul" : "ol",
    className: u(m.root, O),
    ref: r
  }, b), n));
});
P.Item = A;
P.displayName = "@mantine/core/List";
const Pe = "_editor_1rt1p_1", Oe = {
  editor: Pe
}, be = S((e, r) => {
  const [t, n] = ee(0), s = (a) => {
    if (a >= e.items.length)
      return;
    const i = e.items[a];
    e.command(i);
  }, c = () => {
    n(
      (t + e.items.length - 1) % e.items.length
    );
  }, o = () => {
    n((t + 1) % e.items.length);
  }, f = () => {
    e.items[t]?.disabled || s(t);
  };
  return T(() => n(0), [e.items]), te(r, () => ({
    onKeyDown: ({ event: a }) => a.key === "ArrowUp" ? (c(), !0) : a.key === "ArrowDown" ? (o(), !0) : a.key === "Enter" ? (f(), !0) : !1
  })), e.items.length > 0 ? /* @__PURE__ */ d(U, { shadow: "xs", p: 0, children: /* @__PURE__ */ d(
    P,
    {
      withPadding: !1,
      listStyleType: "none",
      mah: 120,
      styles: (a) => ({
        root: {
          overflowY: "auto"
        },
        itemWrapper: {
          width: "100%",
          "&:hover": {
            backgroundColor: a.colors.blue[1]
          }
        }
      }),
      children: e.items.map((a, i) => /* @__PURE__ */ d(P.Item, { fz: "xs", children: /* @__PURE__ */ d(
        V,
        {
          fz: "xs",
          label: "User doesn't have access to this Dashboard's space",
          disabled: !a.disabled,
          withinPortal: !0,
          position: "right",
          children: /* @__PURE__ */ d(
            Y,
            {
              compact: !0,
              onClick: () => {
                a.disabled || s(i);
              },
              styles: (l) => ({
                root: {
                  width: "100%",
                  fontSize: l.fontSizes.xs,
                  fontWeight: 400,
                  textAlign: "left",
                  backgroundColor: l.colors.background[0],
                  color: i === t ? l.colors.blue[6] : l.colors.ldGray[7],
                  opacity: a.disabled ? 0.5 : 1,
                  cursor: a.disabled ? "not-allowed" : "pointer",
                  "&:hover": {
                    backgroundColor: l.colors.blue[1]
                  }
                },
                inner: {
                  justifyContent: "flex-start"
                }
              }),
              children: a.label
            }
          )
        }
      ) }, i))
    }
  ) }) : null;
}), E = {
  bottom: 0,
  height: 0,
  left: 0,
  right: 0,
  top: 0,
  width: 0,
  x: 0,
  y: 0,
  toJSON() {
    return {};
  }
}, Se = (e) => ({
  items: ({ query: r }) => e.filter(
    (t) => t.label.toLowerCase().startsWith(r.toLowerCase())
  ),
  render: () => {
    let r, t;
    return {
      onStart: (n) => {
        r = new F(be, {
          props: n,
          editor: n.editor
        }), t = G("body", {
          getReferenceClientRect: () => n.clientRect?.() ?? E,
          appendTo: "parent",
          content: r.element,
          showOnCreate: !0,
          interactive: !0,
          trigger: "manual",
          placement: "bottom-start"
        })[0];
      },
      onUpdate(n) {
        r?.updateProps(n), t?.setProps({
          getReferenceClientRect: () => n.clientRect?.() ?? E
        });
      },
      onKeyDown(n) {
        return n.event.key === "Escape" ? (t?.hide(), !0) : r?.ref ? r.ref.onKeyDown(n) : !1;
      },
      onExit() {
        t?.destroy(), r?.destroy(), t = void 0, r = void 0;
      }
    };
  }
}), Ne = ({
  suggestions: e,
  onUpdate: r,
  content: t,
  shouldClearEditor: n,
  setShouldClearEditor: s
}) => {
  const c = J(), o = X({
    extensions: [
      Z,
      q.configure({
        HTMLAttributes: {
          style: `color: ${c.colors.blue[6]}; font-weight: 500;`
        },
        suggestion: e ? Se(e) : void 0
      }),
      Q.configure({
        placeholder: "Add comment (type @ to tag someone)"
      })
    ],
    content: t,
    onUpdate: () => {
      r && r(o);
    }
  });
  return T(() => {
    n && (o?.commands.clearContent(), s?.(!1));
  }, [o?.commands, s, n]), /* @__PURE__ */ d(I, { editor: o, className: Oe.editor, children: /* @__PURE__ */ d(I.Content, { fz: "xs" }) });
};
export {
  Ne as CommentWithMentions
};
//# sourceMappingURL=index-CEclGqcG.mjs.map
