@knocklabs/react 0.1.9 → 0.2.0

package/dist/esm/index.mjs

@@ -1,41 +1,49 @@
 
 import { Button as t } from "./modules/core/components/Button/Button.mjs";
-import { ButtonGroup as p } from "./modules/core/components/Button/ButtonGroup.mjs";
-import { BellIcon as m } from "./modules/core/components/Icons/Bell.mjs";
+import { ButtonGroup as m } from "./modules/core/components/Button/ButtonGroup.mjs";
+import { BellIcon as i } from "./modules/core/components/Icons/Bell.mjs";
 import { CheckmarkCircle as x } from "./modules/core/components/Icons/CheckmarkCircle.mjs";
 import { ChevronDown as c } from "./modules/core/components/Icons/ChevronDown.mjs";
-import { CloseCircle as d } from "./modules/core/components/Icons/CloseCircle.mjs";
-import { Spinner as u } from "./modules/core/components/Spinner/Spinner.mjs";
-import { default as N } from "./modules/core/hooks/useOnBottomScroll.mjs";
+import { CloseCircle as u } from "./modules/core/components/Icons/CloseCircle.mjs";
+import { Spinner as C } from "./modules/core/components/Spinner/Spinner.mjs";
+import { default as k } from "./modules/core/hooks/useOnBottomScroll.mjs";
+import { default as N } from "./modules/core/hooks/useOutsideClick.mjs";
 import { EmptyFeed as F } from "./modules/feed/components/EmptyFeed/EmptyFeed.mjs";
-import { NotificationCell as v } from "./modules/feed/components/NotificationCell/NotificationCell.mjs";
-import { Avatar as A } from "./modules/feed/components/NotificationCell/Avatar.mjs";
-import { NotificationFeed as S } from "./modules/feed/components/NotificationFeed/NotificationFeed.mjs";
+import { NotificationCell as A } from "./modules/feed/components/NotificationCell/NotificationCell.mjs";
+import { Avatar as b } from "./modules/feed/components/NotificationCell/Avatar.mjs";
+import { NotificationFeed as O } from "./modules/feed/components/NotificationFeed/NotificationFeed.mjs";
 import { NotificationFeedHeader as w } from "./modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs";
 import { MarkAsRead as D } from "./modules/feed/components/NotificationFeed/MarkAsRead.mjs";
 import { NotificationFeedContainer as G } from "./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs";
 import { NotificationFeedPopover as M } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs";
-import { NotificationIconButton as P } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.mjs";
-import { UnseenBadge as U } from "./modules/feed/components/UnseenBadge/UnseenBadge.mjs";
+import { NotificationIconButton as R } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.mjs";
+import { UnseenBadge as j } from "./modules/feed/components/UnseenBadge/UnseenBadge.mjs";
+import { SlackAuthButton as z } from "./modules/slack/components/SlackAuthButton/SlackAuthButton.mjs";
+import { SlackAuthContainer as K } from "./modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs";
+import { SlackChannelCombobox as Q } from "./modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs";
 export * from "@knocklabs/react-core";
 export {
-  A as Avatar,
-  m as BellIcon,
+  b as Avatar,
+  i as BellIcon,
   t as Button,
-  p as ButtonGroup,
+  m as ButtonGroup,
   x as CheckmarkCircle,
   c as ChevronDown,
-  d as CloseCircle,
+  u as CloseCircle,
   F as EmptyFeed,
   D as MarkAsRead,
-  v as NotificationCell,
-  S as NotificationFeed,
+  A as NotificationCell,
+  O as NotificationFeed,
   G as NotificationFeedContainer,
   w as NotificationFeedHeader,
   M as NotificationFeedPopover,
-  P as NotificationIconButton,
-  u as Spinner,
-  U as UnseenBadge,
-  N as useOnBottomScroll
+  R as NotificationIconButton,
+  z as SlackAuthButton,
+  K as SlackAuthContainer,
+  Q as SlackChannelCombobox,
+  C as Spinner,
+  j as UnseenBadge,
+  k as useOnBottomScroll,
+  N as useOutsideClick
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/modules/core/hooks/useOutsideClick.mjs

@@ -0,0 +1,18 @@
+import { useEffect as o } from "react";
+const d = ({
+  ref: t,
+  fn: e,
+  isEnabled: u = !0
+}) => {
+  const n = (i) => {
+    var c;
+    !u || !(t != null && t.current) || (c = t == null ? void 0 : t.current) != null && c.contains(i.target) || e();
+  };
+  o(() => (document.addEventListener("click", n), () => {
+    document.removeEventListener("click", n);
+  }));
+};
+export {
+  d as default
+};
+//# sourceMappingURL=useOutsideClick.mjs.map

package/dist/esm/modules/core/hooks/useOutsideClick.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOutsideClick.mjs","sources":["../../../../../src/modules/core/hooks/useOutsideClick.ts"],"sourcesContent":["import { MutableRefObject, useEffect } from \"react\";\n\nconst useOutsideClick = ({\n  ref,\n  fn,\n  isEnabled = true,\n}: {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ref: MutableRefObject<any>;\n  fn: () => void;\n  isEnabled?: boolean;\n}) => {\n  const handleClick = (event: MouseEvent) => {\n    if (!isEnabled || !ref?.current || ref?.current?.contains(event.target)) {\n      return;\n    }\n    fn();\n  };\n\n  useEffect(() => {\n    document.addEventListener(\"click\", handleClick);\n\n    return () => {\n      document.removeEventListener(\"click\", handleClick);\n    };\n  });\n};\n\nexport default useOutsideClick;\n"],"names":["useOutsideClick","ref","fn","isEnabled","handleClick","event","_a","useEffect"],"mappings":";AAEA,MAAMA,IAAkB,CAAC;AAAA,EACvB,KAAAC;AAAA,EACA,IAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAKM;AACE,QAAAC,IAAc,CAACC,MAAsB;;AACrC,IAAA,CAACF,KAAa,EAACF,KAAA,QAAAA,EAAK,aAAWK,IAAAL,KAAA,gBAAAA,EAAK,YAAL,QAAAK,EAAc,SAASD,EAAM,WAG7DH;EAAA;AAGL,EAAAK,EAAU,OACC,SAAA,iBAAiB,SAASH,CAAW,GAEvC,MAAM;AACF,aAAA,oBAAoB,SAASA,CAAW;AAAA,EAAA,EAEpD;AACH;"}

package/dist/esm/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.mjs

@@ -0,0 +1,51 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useTranslations as C } from "@knocklabs/react-core";
+import { useState as i } from "react";
+import { Spinner as x } from "../../../core/components/Spinner/Spinner.mjs";
+
+import "lodash.debounce";
+
+import _ from "../SlackChannelCombobox/SlackConnectionError.mjs";
+import { SlackIcon as S } from "../SlackIcon/SlackIcon.mjs";
+
+const w = ({
+  inErrorState: h,
+  connectedChannels: a = [],
+  updateConnectedChannels: p,
+  connectedChannelsError: d,
+  connectedChannelsUpdating: m
+}) => {
+  const { t } = C(), [n, o] = i(null), [r, c] = i(null), u = () => {
+    if (!n)
+      return;
+    if (r && c(null), a.find(
+      (f) => f.channel_id === n
+    ))
+      return o(""), c(t("slackChannelAlreadyConnected") || "");
+    const k = [...a, { channel_id: n }];
+    p(k), o("");
+  };
+  return /* @__PURE__ */ s("div", { className: "rsk-connect-channel", children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        className: `rsk-connect-channel__input ${(h || !!r) && !n && "rsk-connect-channel__input--error"}`,
+        tabIndex: -1,
+        id: "slack-channel-search",
+        type: "text",
+        placeholder: r || d || t("slackChannelId"),
+        onChange: (l) => o(l.target.value),
+        value: n || ""
+      }
+    ),
+    /* @__PURE__ */ s("button", { className: "rsk-connect-channel__button", onClick: u, children: [
+      m ? /* @__PURE__ */ e(x, { size: "15px", thickness: 3 }) : /* @__PURE__ */ e(S, { height: "16px", width: "16px" }),
+      t("slackConnectChannel")
+    ] }),
+    /* @__PURE__ */ e(_, {})
+  ] });
+};
+export {
+  w as default
+};
+//# sourceMappingURL=SlackAddChannelInput.mjs.map

package/dist/esm/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlackAddChannelInput.mjs","sources":["../../../../../../src/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport { useTranslations } from \"@knocklabs/react-core\";\nimport { useState } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\nimport ConnectionErrorInfoBoxes from \"../SlackChannelCombobox/SlackConnectionError\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nconst SlackAddChannelInput = ({\n  inErrorState,\n  connectedChannels = [],\n  updateConnectedChannels,\n  connectedChannelsError,\n  connectedChannelsUpdating,\n}: {\n  inErrorState: boolean;\n  connectedChannels: SlackChannelConnection[];\n  updateConnectedChannels: (channels: SlackChannelConnection[]) => void;\n  connectedChannelsError: string | null;\n  connectedChannelsUpdating: boolean;\n}) => {\n  const { t } = useTranslations();\n  const [value, setValue] = useState<string | null>(null);\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  const submitChannel = () => {\n    if (!value) {\n      return;\n    }\n\n    if (localError) {\n      setLocalError(null);\n    }\n\n    const alreadyConnected = connectedChannels.find(\n      (channel) => channel.channel_id === value,\n    );\n\n    if (alreadyConnected) {\n      setValue(\"\");\n      return setLocalError(t(\"slackChannelAlreadyConnected\") || \"\");\n    }\n\n    const channelsToSendToKnock = [...connectedChannels, { channel_id: value }];\n    updateConnectedChannels(channelsToSendToKnock);\n    setValue(\"\");\n  };\n\n  return (\n    <div className=\"rsk-connect-channel\">\n      <input\n        className={`rsk-connect-channel__input ${(inErrorState || !!localError) && !value && \"rsk-connect-channel__input--error\"}`}\n        tabIndex={-1}\n        id=\"slack-channel-search\"\n        type=\"text\"\n        placeholder={\n          localError || connectedChannelsError || t(\"slackChannelId\")\n        }\n        onChange={(e) => setValue(e.target.value)}\n        value={value || \"\"}\n      />\n      <button className=\"rsk-connect-channel__button\" onClick={submitChannel}>\n        {connectedChannelsUpdating ? (\n          <Spinner size=\"15px\" thickness={3} />\n        ) : (\n          <SlackIcon height=\"16px\" width=\"16px\" />\n        )}\n        {t(\"slackConnectChannel\")}\n      </button>\n      <ConnectionErrorInfoBoxes />\n    </div>\n  );\n};\n\nexport default SlackAddChannelInput;\n"],"names":["SlackAddChannelInput","inErrorState","connectedChannels","updateConnectedChannels","connectedChannelsError","connectedChannelsUpdating","useTranslations","value","setValue","useState","localError","setLocalError","submitChannel","channel","channelsToSendToKnock","jsxs","jsx","e","Spinner","SlackIcon","ConnectionErrorInfoBoxes"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAAuB,CAAC;AAAA,EAC5B,cAAAC;AAAA,EACA,mBAAAC,IAAoB,CAAC;AAAA,EACrB,yBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,2BAAAC;AACF,MAMM;AACE,QAAA,EAAE,MAAMC,KACR,CAACC,GAAOC,CAAQ,IAAIC,EAAwB,IAAI,GAChD,CAACC,GAAYC,CAAa,IAAIF,EAAwB,IAAI,GAE1DG,IAAgB,MAAM;AAC1B,QAAI,CAACL;AACH;AAWF,QARIG,KACFC,EAAc,IAAI,GAGKT,EAAkB;AAAA,MACzC,CAACW,MAAYA,EAAQ,eAAeN;AAAA,IAAA;AAIpC,aAAAC,EAAS,EAAE,GACJG,EAAc,EAAE,8BAA8B,KAAK,EAAE;AAG9D,UAAMG,IAAwB,CAAC,GAAGZ,GAAmB,EAAE,YAAYK,GAAO;AAC1E,IAAAJ,EAAwBW,CAAqB,GAC7CN,EAAS,EAAE;AAAA,EAAA;AAIX,SAAA,gBAAAO,EAAC,OAAI,EAAA,WAAU,uBACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,+BAA+Bf,KAAgB,CAAC,CAACS,MAAe,CAACH,KAAS,mCAAmC;AAAA,QACxH,UAAU;AAAA,QACV,IAAG;AAAA,QACH,MAAK;AAAA,QACL,aACEG,KAAcN,KAA0B,EAAE,gBAAgB;AAAA,QAE5D,UAAU,CAACa,MAAMT,EAASS,EAAE,OAAO,KAAK;AAAA,QACxC,OAAOV,KAAS;AAAA,MAAA;AAAA,IAClB;AAAA,IACC,gBAAAQ,EAAA,UAAA,EAAO,WAAU,+BAA8B,SAASH,GACtD,UAAA;AAAA,MAAAP,IACE,gBAAAW,EAAAE,GAAA,EAAQ,MAAK,QAAO,WAAW,EAAA,CAAG,IAEnC,gBAAAF,EAACG,GAAU,EAAA,QAAO,QAAO,OAAM,QAAO;AAAA,MAEvC,EAAE,qBAAqB;AAAA,IAAA,GAC1B;AAAA,sBACCC,GAAyB,EAAA;AAAA,EAC5B,EAAA,CAAA;AAEJ;"}

package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs

@@ -0,0 +1,80 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { useTranslations as b, useKnockClient as f, useKnockSlackClient as x, useSlackAuth as L } from "@knocklabs/react-core";
+import { useEffect as C } from "react";
+
+import { SlackIcon as a } from "../SlackIcon/SlackIcon.mjs";
+
+const m = (d) => {
+  const s = window.screenLeft ?? window.screenX, c = window.screenTop ?? window.screenY, e = window.innerWidth ?? document.documentElement.clientWidth ?? screen.width, o = window.innerHeight ?? document.documentElement.clientHeight ?? screen.height, i = e / 2 - 600 / 2 + s, r = `width=600,height=800,top=${o / 2 - 800 / 2 + c},left=${i}`;
+  window.open(d, "Slack OAuth", r);
+}, H = ({
+  slackClientId: d,
+  redirectUrl: u
+}) => {
+  const { t: n } = b(), s = f(), {
+    setConnectionStatus: c,
+    connectionStatus: e,
+    setActionLabel: o,
+    actionLabel: i,
+    errorLabel: k
+  } = x(), { buildSlackAuthUrl: r, disconnectFromSlack: w } = L(
+    d,
+    u
+  );
+  C(() => {
+    const p = (h) => {
+      if (h.origin === s.host)
+        try {
+          h.data === "authComplete" && c("connected"), h.data === "authFailed" && c("error");
+        } catch {
+          c("error");
+        }
+    };
+    return window.addEventListener("message", p, !1), () => {
+      window.removeEventListener("message", p);
+    };
+  }, [s.host, c]);
+  const _ = n("slackDisconnect") || null, g = n("slackReconnect") || null;
+  return e === "connecting" || e === "disconnecting" ? /* @__PURE__ */ l("div", { className: "rsk-connect__button rsk-connect__button--loading", children: [
+    /* @__PURE__ */ t(a, { height: "16px", width: "16px" }),
+    /* @__PURE__ */ t("span", { children: n(e === "connecting" ? "slackConnecting" : "slackDisconnecting") })
+  ] }) : e === "error" ? /* @__PURE__ */ l(
+    "button",
+    {
+      onClick: () => m(r()),
+      className: "rsk-connect__button rsk-connect__button--error",
+      onMouseEnter: () => o(g),
+      onMouseLeave: () => o(null),
+      children: [
+        /* @__PURE__ */ t(a, { height: "16px", width: "16px" }),
+        /* @__PURE__ */ t("span", { className: "rsk-connect__button__text--error", children: i || k || n("slackError") })
+      ]
+    }
+  ) : e === "disconnected" ? /* @__PURE__ */ l(
+    "button",
+    {
+      onClick: () => m(r()),
+      className: "rsk-connect__button rsk-connect__button--disconnected",
+      children: [
+        /* @__PURE__ */ t(a, { height: "16px", width: "16px" }),
+        /* @__PURE__ */ t("span", { children: n("slackConnect") })
+      ]
+    }
+  ) : /* @__PURE__ */ l(
+    "button",
+    {
+      onClick: w,
+      className: "rsk-connect__button rsk-connect__button--connected",
+      onMouseEnter: () => o(_),
+      onMouseLeave: () => o(null),
+      children: [
+        /* @__PURE__ */ t(a, { height: "16px", width: "16px" }),
+        /* @__PURE__ */ t("span", { className: "rsk-connect__button__text--connected", children: i || n("slackConnected") })
+      ]
+    }
+  );
+};
+export {
+  H as SlackAuthButton
+};
+//# sourceMappingURL=SlackAuthButton.mjs.map

package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlackAuthButton.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n  useKnockClient,\n  useKnockSlackClient,\n  useSlackAuth,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\ntype Props = {\n  slackClientId: string;\n  redirectUrl?: string;\n};\n\nconst openSlackOauthPopup = (url: string) => {\n  const width = 600;\n  const height = 800;\n  // Calculate the position to center the window\n  const screenLeft = window.screenLeft ?? window.screenX;\n  const screenTop = window.screenTop ?? window.screenY;\n\n  const innerWidth =\n    window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n  const innerHeight =\n    window.innerHeight ??\n    document.documentElement.clientHeight ??\n    screen.height;\n\n  const left = innerWidth / 2 - width / 2 + screenLeft;\n  const top = innerHeight / 2 - height / 2 + screenTop;\n\n  // Window features\n  const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n  window.open(url, \"Slack OAuth\", features);\n};\n\nexport const SlackAuthButton: React.FC<Props> = ({\n  slackClientId,\n  redirectUrl,\n}) => {\n  const { t } = useTranslations();\n  const knock = useKnockClient();\n\n  const {\n    setConnectionStatus,\n    connectionStatus,\n    setActionLabel,\n    actionLabel,\n    errorLabel,\n  } = useKnockSlackClient();\n\n  const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n    slackClientId,\n    redirectUrl,\n  );\n\n  useEffect(() => {\n    const receiveMessage = (event: MessageEvent) => {\n      if (event.origin !== knock.host) {\n        return;\n      }\n\n      try {\n        if (event.data === \"authComplete\") {\n          setConnectionStatus(\"connected\");\n        }\n\n        if (event.data === \"authFailed\") {\n          setConnectionStatus(\"error\")\n        }\n      } catch (error) {\n        setConnectionStatus(\"error\");\n      }\n    };\n\n    window.addEventListener(\"message\", receiveMessage, false);\n\n    // Cleanup the event listener when the component unmounts\n    return () => {\n      window.removeEventListener(\"message\", receiveMessage);\n    };\n  }, [knock.host, setConnectionStatus]);\n\nconst disconnectLabel = t(\"slackDisconnect\") || null\nconst reconnectLabel = t(\"slackReconnect\") || null\n\n  // Loading states\n  if (\n    connectionStatus === \"connecting\" ||\n    connectionStatus === \"disconnecting\"\n  ) {\n    return (\n      <div className=\"rsk-connect__button rsk-connect__button--loading\">\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span>\n          {connectionStatus === \"connecting\"\n            ? t(\"slackConnecting\")\n            : t(\"slackDisconnecting\")}\n        </span>\n      </div>\n    );\n  }\n\n  // Error state\n  if (connectionStatus === \"error\") {\n    return (\n      <button\n        onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n        className=\"rsk-connect__button rsk-connect__button--error\"\n        onMouseEnter={() => setActionLabel(reconnectLabel)}\n        onMouseLeave={() => setActionLabel(null)}\n      >\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span className=\"rsk-connect__button__text--error\">\n          {actionLabel || errorLabel || t(\"slackError\")}\n        </span>\n      </button>\n    );\n  }\n\n  // Disconnected state\n  if (connectionStatus === \"disconnected\") {\n    return (\n      <button\n        onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n        className=\"rsk-connect__button rsk-connect__button--disconnected\"\n      >\n        <SlackIcon height=\"16px\" width=\"16px\" />\n        <span>{t(\"slackConnect\")}</span>\n      </button>\n    );\n  }\n\n  // Connected state\n  return (\n    <button\n      onClick={disconnectFromSlack}\n      className=\"rsk-connect__button rsk-connect__button--connected\"\n      onMouseEnter={() => setActionLabel(disconnectLabel)}\n      onMouseLeave={() => setActionLabel(null)}\n    >\n      <SlackIcon height=\"16px\" width=\"16px\" />\n      <span className=\"rsk-connect__button__text--connected\">\n        {actionLabel || t(\"slackConnected\")}\n      </span>\n    </button>\n  );\n};\n"],"names":["openSlackOauthPopup","url","screenLeft","screenTop","innerWidth","innerHeight","left","features","SlackAuthButton","slackClientId","redirectUrl","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","disconnectLabel","reconnectLabel","jsxs","jsx","SlackIcon"],"mappings":"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"}

package/dist/esm/modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs

@@ -0,0 +1,22 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { useTranslations as a } from "@knocklabs/react-core";
+
+import { SlackIcon as e } from "../SlackIcon/SlackIcon.mjs";
+
+const d = ({
+  actionButton: t
+}) => {
+  const { t: s } = a();
+  return /* @__PURE__ */ i("div", { className: "rsk-auth", children: [
+    /* @__PURE__ */ i("div", { className: "rsk-auth__header", children: [
+      /* @__PURE__ */ r(e, { height: "32px", width: "32px" }),
+      /* @__PURE__ */ r("div", { children: t })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "rsk-auth__title", children: "Slack" }),
+    /* @__PURE__ */ r("div", { className: "rsk-auth__description", children: s("slackConnectContainerDescription") })
+  ] });
+};
+export {
+  d as SlackAuthContainer
+};
+//# sourceMappingURL=SlackAuthContainer.mjs.map

package/dist/esm/modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlackAuthContainer.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthContainer/SlackAuthContainer.tsx"],"sourcesContent":["import { useTranslations } from \"@knocklabs/react-core\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport const SlackAuthContainer = ({\n  actionButton,\n}: {\n  actionButton: React.ReactElement;\n}) => {\n  const { t } = useTranslations();\n\n  return (\n    <div className=\"rsk-auth\">\n      <div className=\"rsk-auth__header\">\n        <SlackIcon height=\"32px\" width=\"32px\" />\n        <div>{actionButton}</div>\n      </div>\n      <div className=\"rsk-auth__title\">Slack</div>\n      <div className=\"rsk-auth__description\">\n        {t(\"slackConnectContainerDescription\")}\n      </div>\n    </div>\n  );\n};\n"],"names":["SlackAuthContainer","actionButton","t","useTranslations","jsxs","jsx","SlackIcon"],"mappings":";;;;;AAOO,MAAMA,IAAqB,CAAC;AAAA,EACjC,cAAAC;AACF,MAEM;AACE,QAAA,EAAE,GAAAC,MAAMC;AAGZ,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,YACb,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAU,EAAA,QAAO,QAAO,OAAM,QAAO;AAAA,MACtC,gBAAAD,EAAC,SAAK,UAAaJ,EAAA,CAAA;AAAA,IAAA,GACrB;AAAA,IACC,gBAAAI,EAAA,OAAA,EAAI,WAAU,mBAAkB,UAAK,SAAA;AAAA,sBACrC,OAAI,EAAA,WAAU,yBACZ,UAAAH,EAAE,kCAAkC,GACvC;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs

@@ -0,0 +1,183 @@
+import { jsx as c, jsxs as S } from "react/jsx-runtime";
+import { useTranslations as H, useKnockSlackClient as w, useSlackChannels as z, useConnectedSlackChannels as G } from "@knocklabs/react-core";
+import * as u from "@radix-ui/react-popover";
+import * as W from "@radix-ui/react-visually-hidden";
+import { useState as x, useRef as X, useEffect as y, useMemo as p } from "react";
+import { useFilter as q } from "react-aria";
+import { Spinner as J } from "../../../core/components/Spinner/Spinner.mjs";
+
+import "lodash.debounce";
+import Q from "../../../core/hooks/useOutsideClick.mjs";
+
+import Y from "../SlackAddChannelInput/SlackAddChannelInput.mjs";
+import Z from "./SlackChannelListBox.mjs";
+import g from "./SlackConnectionError.mjs";
+import M from "./icons/SearchIcon.mjs";
+
+const nn = 1e3, _n = ({
+  slackChannelsRecipientObject: O,
+  queryOptions: I,
+  inputProps: R,
+  inputContainerProps: U,
+  listBoxProps: $,
+  channelOptionProps: D,
+  inputMessages: n
+}) => {
+  const { t: l } = H(), [m, E] = x(!1), [L, N] = x(""), T = X(null);
+  Q({
+    ref: T,
+    fn: () => {
+      N(""), E(!1);
+    }
+  });
+  const { connectionStatus: t, errorLabel: v } = w(), { data: a, isLoading: C } = z({ queryOptions: I }), {
+    data: h,
+    updateConnectedChannels: b,
+    loading: K,
+    error: d,
+    updating: F
+  } = G({ slackChannelsRecipientObject: O }), [r, f] = x(null);
+  y(() => {
+    m && setTimeout(() => {
+      var o;
+      (o = document.getElementById("slack-channel-search")) == null || o.focus();
+    }, 0);
+  }, [m]), y(() => {
+    const o = new Map(
+      a.map((e) => [e.id, e])
+    ), i = (h == null ? void 0 : h.filter((e) => o.has(e.channel_id || ""))) || [];
+    f(i);
+  }, [h, a]);
+  const s = p(
+    () => t === "disconnected" || t === "error" || d,
+    [d, t]
+  ), _ = p(
+    () => t === "connecting" || t === "disconnecting" || C,
+    [t, C]
+  ), P = p(() => {
+    const o = {
+      disconnected: l("slackSearchbarDisconnected"),
+      multipleChannelsConnected: l("slackSearchbarMultipleChannels"),
+      noChannelsConnected: l("slackSearchbarNoChannelsConnected"),
+      noSlackChannelsFound: l("slackSearchbarNoChannelsFound"),
+      channelsError: l("slackSearchbarChannelsError")
+    };
+    if (t === "disconnected")
+      return (n == null ? void 0 : n.disconnected) || o.disconnected;
+    if (t === "error")
+      return (n == null ? void 0 : n.error) || v;
+    if (!_ && a.length === 0)
+      return (n == null ? void 0 : n.noSlackChannelsFound) || o.noSlackChannelsFound;
+    if (d)
+      return d;
+    const i = (r == null ? void 0 : r.length) || 0;
+    if (r && i === 0)
+      return (n == null ? void 0 : n.noChannelsConnected) || o.noChannelsConnected;
+    if (r && i === 1) {
+      const e = a == null ? void 0 : a.find(
+        (k) => {
+          var A;
+          return k.id === ((A = r[0]) == null ? void 0 : A.channel_id);
+        }
+      );
+      return (n == null ? void 0 : n.singleChannelConnected) || `# ${e == null ? void 0 : e.name}`;
+    }
+    return r && i > 1 ? (n == null ? void 0 : n.multipleChannelsConnected) || `${i} channels connected` : "";
+  }, [
+    t,
+    _,
+    a,
+    d,
+    r,
+    n,
+    v,
+    l
+  ]), V = async (o) => {
+    if (!r)
+      return;
+    if (r.find(
+      (e) => e.channel_id === o
+    )) {
+      const e = r.filter(
+        (k) => k.channel_id !== o
+      );
+      f(e), b(e);
+    } else {
+      const e = [
+        ...r,
+        { channel_id: o }
+      ];
+      f(e), b(e);
+    }
+  }, { contains: j } = q({ sensitivity: "base" }), B = a.filter(
+    (o) => j(o.name, L)
+  );
+  return a.length > nn ? /* @__PURE__ */ c(
+    Y,
+    {
+      inErrorState: !!s,
+      connectedChannels: r || [],
+      updateConnectedChannels: b,
+      connectedChannelsError: d,
+      connectedChannelsUpdating: F
+    }
+  ) : /* @__PURE__ */ c("div", { ref: T, className: "rsk-combobox", children: /* @__PURE__ */ S(
+    u.Root,
+    {
+      open: t !== "disconnected" ? m : !1,
+      children: [
+        /* @__PURE__ */ c(W.Root, { children: /* @__PURE__ */ c("label", { htmlFor: "slack-channel-search", children: l("slackSearchChannels") }) }),
+        /* @__PURE__ */ c(u.Trigger, { asChild: !0, children: /* @__PURE__ */ S("div", { className: "rsk-combobox__searchbar", children: [
+          /* @__PURE__ */ S(
+            "div",
+            {
+              className: "rsk-combobox__searchbar__input-container",
+              ...U,
+              children: [
+                /* @__PURE__ */ c(
+                  "div",
+                  {
+                    className: `rsk-combobox__searchbar__input-container__icon ${s && "rsk-combobox__searchbar__input-container__icon--error"}`,
+                    children: _ ? /* @__PURE__ */ c(J, { size: "15px", thickness: 3 }) : /* @__PURE__ */ c(M, {})
+                  }
+                ),
+                /* @__PURE__ */ c(
+                  "input",
+                  {
+                    className: `rsk-combobox__searchbar__input-container__input ${s ? "rsk-combobox__searchbar__input-container__input--error" : ""}`,
+                    tabIndex: -1,
+                    id: "slack-channel-search",
+                    type: "text",
+                    onFocus: () => a.length > 0 && E(!0),
+                    onChange: (o) => N(o.target.value),
+                    value: L,
+                    placeholder: P || "",
+                    disabled: !!s,
+                    ...R
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ c(g, {})
+        ] }) }),
+        /* @__PURE__ */ c(u.Content, { children: /* @__PURE__ */ c(
+          Z,
+          {
+            isLoading: C || K,
+            isUpdating: F,
+            connectedChannels: r,
+            onClick: V,
+            slackChannels: B,
+            listBoxProps: $,
+            channelOptionProps: D
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+export {
+  _n as SlackChannelCombobox
+};
+//# sourceMappingURL=SlackChannelCombobox.mjs.map

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlackChannelCombobox.mjs","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport {\n  ContainerObject,\n  SlackChannelQueryOptions,\n  useConnectedSlackChannels,\n  useKnockSlackClient,\n  useSlackChannels,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useFilter } from \"react-aria\";\n\nimport { Spinner, useOutsideClick } from \"../../../core\";\nimport \"../../theme.css\";\nimport SlackAddChannelInput from \"../SlackAddChannelInput/SlackAddChannelInput\";\n\nimport SlackChannelListBox from \"./SlackChannelListBox\";\nimport SlackConnectionError from \"./SlackConnectionError\";\nimport SearchIcon from \"./icons/SearchIcon\";\nimport \"./styles.css\";\n\nconst MAX_ALLOWED_CHANNELS = 1000;\n\ntype SlackChannelComboboxInputMessages = {\n  disconnected: string;\n  error: string;\n  singleChannelConnected: string;\n  multipleChannelsConnected: string;\n  noChannelsConnected: string;\n  noSlackChannelsFound: string;\n};\n\ntype Props = {\n  slackChannelsRecipientObject: ContainerObject;\n  queryOptions?: SlackChannelQueryOptions;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  inputContainerProps?: React.HTMLAttributes<HTMLDivElement>;\n  listBoxProps?: React.HTMLAttributes<HTMLDivElement>;\n  channelOptionProps?: React.HtmlHTMLAttributes<HTMLButtonElement>;\n  inputMessages?: SlackChannelComboboxInputMessages;\n};\n\nexport const SlackChannelCombobox = ({\n  slackChannelsRecipientObject,\n  queryOptions,\n  inputProps,\n  inputContainerProps,\n  listBoxProps,\n  channelOptionProps,\n  inputMessages,\n}: Props) => {\n  const { t } = useTranslations();\n\n  const [comboboxListOpen, setComboboxListOpen] = useState<boolean>(false);\n  const [inputValue, setInputValue] = useState(\"\");\n\n  // Used to close the combobox when clicking outside of it\n  const comboboxRef = useRef(null);\n  useOutsideClick({\n    ref: comboboxRef,\n    fn: () => {\n      setInputValue(\"\");\n      setComboboxListOpen(false);\n    },\n  });\n\n  // Gather API data\n  const { connectionStatus, errorLabel: connectionErrorLabel } =\n    useKnockSlackClient();\n\n  const { data: slackChannels, isLoading: slackChannelsLoading } =\n    useSlackChannels({ queryOptions });\n\n  const {\n    data: connectedChannels,\n    updateConnectedChannels,\n    loading: connectedChannelsLoading,\n    error: connectedChannelsError,\n    updating: connectedChannelsUpdating,\n  } = useConnectedSlackChannels({ slackChannelsRecipientObject });\n\n  const [currentConnectedChannels, setCurrentConnectedChannels] = useState<\n    SlackChannelConnection[] | null\n  >(null);\n\n  useEffect(() => {\n    if (comboboxListOpen) {\n      // Timeout to allow for the state to update and the component to re-render\n      // when we change the `comboboxListOpen` state upon focus\n      setTimeout(() => {\n        document.getElementById(\"slack-channel-search\")?.focus();\n      }, 0);\n    }\n  }, [comboboxListOpen]);\n\n  useEffect(() => {\n    // Used to make sure we're only showing currently available channels to select from.\n    // There are cases where a channel is \"connected\" in Knock, but it wouldn't be\n    // posting to it if the channel is private and the Slackbot doesn't belong to it,\n    // so the channel won't show up here and it won't be posted to.\n    const slackChannelsMap = new Map(\n      slackChannels.map((channel) => [channel.id, channel]),\n    );\n\n    const channels =\n      connectedChannels?.filter((connectedChannel) => {\n        return slackChannelsMap.has(connectedChannel.channel_id || \"\");\n      }) || [];\n\n    setCurrentConnectedChannels(channels);\n  }, [connectedChannels, slackChannels]);\n\n  const inErrorState = useMemo(\n    () =>\n      connectionStatus === \"disconnected\" ||\n      connectionStatus === \"error\" ||\n      connectedChannelsError,\n    [connectedChannelsError, connectionStatus],\n  );\n\n  const inLoadingState = useMemo(\n    () =>\n      connectionStatus === \"connecting\" ||\n      connectionStatus === \"disconnecting\" ||\n      slackChannelsLoading,\n\n    [connectionStatus, slackChannelsLoading],\n  );\n\n  // Construct placeholder text\n  const searchPlaceholder = useMemo(() => {\n    const DEFAULT_INPUT_MESSAGES = {\n      disconnected: t(\"slackSearchbarDisconnected\"),\n      multipleChannelsConnected: t(\"slackSearchbarMultipleChannels\"),\n      noChannelsConnected: t(\"slackSearchbarNoChannelsConnected\"),\n      noSlackChannelsFound: t(\"slackSearchbarNoChannelsFound\"),\n      channelsError: t(\"slackSearchbarChannelsError\"),\n    };\n\n    // Connection status message\n    if (connectionStatus === \"disconnected\") {\n      return inputMessages?.disconnected || DEFAULT_INPUT_MESSAGES.disconnected;\n    }\n\n    if (connectionStatus === \"error\") {\n      return inputMessages?.error || connectionErrorLabel;\n    }\n\n    // Channels status messages\n    if (!inLoadingState && slackChannels.length === 0) {\n      return (\n        inputMessages?.noSlackChannelsFound ||\n        DEFAULT_INPUT_MESSAGES.noSlackChannelsFound\n      );\n    }\n\n    if (connectedChannelsError) {\n      return connectedChannelsError;\n    }\n\n    const numberConnectedChannels = currentConnectedChannels?.length || 0;\n\n    if (currentConnectedChannels && numberConnectedChannels === 0) {\n      return (\n        inputMessages?.noChannelsConnected ||\n        DEFAULT_INPUT_MESSAGES.noChannelsConnected\n      );\n    }\n\n    if (currentConnectedChannels && numberConnectedChannels === 1) {\n      const connectedChannel = slackChannels?.find(\n        (slackChannel) =>\n          slackChannel.id === currentConnectedChannels[0]?.channel_id,\n      );\n\n      return (\n        inputMessages?.singleChannelConnected || `# ${connectedChannel?.name}`\n      );\n    }\n\n    if (currentConnectedChannels && numberConnectedChannels > 1) {\n      return (\n        inputMessages?.multipleChannelsConnected ||\n        `${numberConnectedChannels} channels connected`\n      );\n    }\n\n    return \"\";\n  }, [\n    connectionStatus,\n    inLoadingState,\n    slackChannels,\n    connectedChannelsError,\n    currentConnectedChannels,\n    inputMessages,\n    connectionErrorLabel,\n    t,\n  ]);\n\n  // Handle channel click\n  const handleOptionClick = async (channelId: string) => {\n    if (!currentConnectedChannels) {\n      return;\n    }\n\n    const isChannelConnected = currentConnectedChannels.find(\n      (channel) => channel.channel_id === channelId,\n    );\n\n    if (isChannelConnected) {\n      const channelsToSendToKnock = currentConnectedChannels.filter(\n        (connectedChannel) => connectedChannel.channel_id !== channelId,\n      );\n\n      setCurrentConnectedChannels(channelsToSendToKnock);\n      updateConnectedChannels(channelsToSendToKnock);\n    } else {\n      const channelsToSendToKnock = [\n        ...currentConnectedChannels,\n        { channel_id: channelId } as SlackChannelConnection,\n      ];\n\n      setCurrentConnectedChannels(channelsToSendToKnock);\n      updateConnectedChannels(channelsToSendToKnock);\n    }\n  };\n\n  // Handle channel search\n  const { contains } = useFilter({ sensitivity: \"base\" });\n  const matchedChannels = slackChannels.filter((slackChannel) =>\n    contains(slackChannel.name, inputValue),\n  );\n\n  if (slackChannels.length > MAX_ALLOWED_CHANNELS) {\n    return (\n      <SlackAddChannelInput\n        inErrorState={!!inErrorState}\n        connectedChannels={currentConnectedChannels || []}\n        updateConnectedChannels={updateConnectedChannels}\n        connectedChannelsError={connectedChannelsError}\n        connectedChannelsUpdating={connectedChannelsUpdating}\n      />\n    );\n  }\n\n  return (\n    <div ref={comboboxRef} className=\"rsk-combobox\">\n      <Popover.Root\n        open={connectionStatus !== \"disconnected\" ? comboboxListOpen : false}\n      >\n        <VisuallyHidden.Root>\n          <label htmlFor=\"slack-channel-search\">\n            {t(\"slackSearchChannels\")}\n          </label>\n        </VisuallyHidden.Root>\n        <Popover.Trigger asChild>\n          <div className=\"rsk-combobox__searchbar\">\n            <div\n              className={\"rsk-combobox__searchbar__input-container\"}\n              {...inputContainerProps}\n            >\n              <div\n                className={`rsk-combobox__searchbar__input-container__icon ${inErrorState && \"rsk-combobox__searchbar__input-container__icon--error\"}`}\n              >\n                {inLoadingState ? (\n                  <Spinner size=\"15px\" thickness={3} />\n                ) : (\n                  <SearchIcon />\n                )}\n              </div>\n\n              <input\n                className={`rsk-combobox__searchbar__input-container__input ${inErrorState ? \"rsk-combobox__searchbar__input-container__input--error\" : \"\"}`}\n                tabIndex={-1}\n                id=\"slack-channel-search\"\n                type=\"text\"\n                onFocus={() =>\n                  slackChannels.length > 0 && setComboboxListOpen(true)\n                }\n                onChange={(e) => setInputValue(e.target.value)}\n                value={inputValue}\n                placeholder={searchPlaceholder || \"\"}\n                disabled={!!inErrorState}\n                {...inputProps}\n              />\n            </div>\n\n            <SlackConnectionError />\n          </div>\n        </Popover.Trigger>\n\n        <Popover.Content>\n          <SlackChannelListBox\n            isLoading={slackChannelsLoading || connectedChannelsLoading}\n            isUpdating={connectedChannelsUpdating}\n            connectedChannels={currentConnectedChannels}\n            onClick={handleOptionClick}\n            slackChannels={matchedChannels}\n            listBoxProps={listBoxProps}\n            channelOptionProps={channelOptionProps}\n          />\n        </Popover.Content>\n      </Popover.Root>\n    </div>\n  );\n};\n"],"names":["MAX_ALLOWED_CHANNELS","SlackChannelCombobox","slackChannelsRecipientObject","queryOptions","inputProps","inputContainerProps","listBoxProps","channelOptionProps","inputMessages","t","useTranslations","comboboxListOpen","setComboboxListOpen","useState","inputValue","setInputValue","comboboxRef","useRef","useOutsideClick","connectionStatus","connectionErrorLabel","useKnockSlackClient","slackChannels","slackChannelsLoading","useSlackChannels","connectedChannels","updateConnectedChannels","connectedChannelsLoading","connectedChannelsError","connectedChannelsUpdating","useConnectedSlackChannels","currentConnectedChannels","setCurrentConnectedChannels","useEffect","_a","slackChannelsMap","channel","channels","connectedChannel","inErrorState","useMemo","inLoadingState","searchPlaceholder","DEFAULT_INPUT_MESSAGES","numberConnectedChannels","slackChannel","handleOptionClick","channelId","channelsToSendToKnock","contains","useFilter","matchedChannels","jsx","SlackAddChannelInput","jsxs","Popover","VisuallyHidden","Spinner","SearchIcon","e","SlackConnectionError","SlackChannelListBox"],"mappings":";;;;;;;;;;;;;;;;AAuBA,MAAMA,KAAuB,KAqBhBC,KAAuB,CAAC;AAAA,EACnC,8BAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,eAAAC;AACF,MAAa;AACL,QAAA,EAAE,GAAAC,MAAMC,KAER,CAACC,GAAkBC,CAAmB,IAAIC,EAAkB,EAAK,GACjE,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAE,GAGzCG,IAAcC,EAAO,IAAI;AACf,EAAAC,EAAA;AAAA,IACd,KAAKF;AAAA,IACL,IAAI,MAAM;AACR,MAAAD,EAAc,EAAE,GAChBH,EAAoB,EAAK;AAAA,IAC3B;AAAA,EAAA,CACD;AAGD,QAAM,EAAE,kBAAAO,GAAkB,YAAYC,MACpCC,EAAoB,GAEhB,EAAE,MAAMC,GAAe,WAAWC,MACtCC,EAAiB,EAAE,cAAArB,EAAA,CAAc,GAE7B;AAAA,IACJ,MAAMsB;AAAA,IACN,yBAAAC;AAAA,IACA,SAASC;AAAA,IACT,OAAOC;AAAA,IACP,UAAUC;AAAA,EAAA,IACRC,EAA0B,EAAE,8BAAA5B,EAAA,CAA8B,GAExD,CAAC6B,GAA0BC,CAA2B,IAAInB,EAE9D,IAAI;AAEN,EAAAoB,EAAU,MAAM;AACd,IAAItB,KAGF,WAAW,MAAM;;AACN,OAAAuB,IAAA,SAAA,eAAe,sBAAsB,MAArC,QAAAA,EAAwC;AAAA,OAChD,CAAC;AAAA,EACN,GACC,CAACvB,CAAgB,CAAC,GAErBsB,EAAU,MAAM;AAKd,UAAME,IAAmB,IAAI;AAAA,MAC3Bb,EAAc,IAAI,CAACc,MAAY,CAACA,EAAQ,IAAIA,CAAO,CAAC;AAAA,IAAA,GAGhDC,KACJZ,KAAA,gBAAAA,EAAmB,OAAO,CAACa,MAClBH,EAAiB,IAAIG,EAAiB,cAAc,EAAE,OACzD,CAAA;AAER,IAAAN,EAA4BK,CAAQ;AAAA,EAAA,GACnC,CAACZ,GAAmBH,CAAa,CAAC;AAErC,QAAMiB,IAAeC;AAAA,IACnB,MACErB,MAAqB,kBACrBA,MAAqB,WACrBS;AAAA,IACF,CAACA,GAAwBT,CAAgB;AAAA,EAAA,GAGrCsB,IAAiBD;AAAA,IACrB,MACErB,MAAqB,gBACrBA,MAAqB,mBACrBI;AAAA,IAEF,CAACJ,GAAkBI,CAAoB;AAAA,EAAA,GAInCmB,IAAoBF,EAAQ,MAAM;AACtC,UAAMG,IAAyB;AAAA,MAC7B,cAAclC,EAAE,4BAA4B;AAAA,MAC5C,2BAA2BA,EAAE,gCAAgC;AAAA,MAC7D,qBAAqBA,EAAE,mCAAmC;AAAA,MAC1D,sBAAsBA,EAAE,+BAA+B;AAAA,MACvD,eAAeA,EAAE,6BAA6B;AAAA,IAAA;AAIhD,QAAIU,MAAqB;AAChB,cAAAX,KAAA,gBAAAA,EAAe,iBAAgBmC,EAAuB;AAG/D,QAAIxB,MAAqB;AACvB,cAAOX,KAAA,gBAAAA,EAAe,UAASY;AAIjC,QAAI,CAACqB,KAAkBnB,EAAc,WAAW;AAE5C,cAAAd,KAAA,gBAAAA,EAAe,yBACfmC,EAAuB;AAI3B,QAAIf;AACK,aAAAA;AAGH,UAAAgB,KAA0Bb,KAAA,gBAAAA,EAA0B,WAAU;AAEhE,QAAAA,KAA4Ba,MAA4B;AAExD,cAAApC,KAAA,gBAAAA,EAAe,wBACfmC,EAAuB;AAIvB,QAAAZ,KAA4Ba,MAA4B,GAAG;AAC7D,YAAMN,IAAmBhB,KAAA,gBAAAA,EAAe;AAAA,QACtC,CAACuB,MACC;;AAAA,iBAAAA,EAAa,SAAOX,IAAAH,EAAyB,CAAC,MAA1B,gBAAAG,EAA6B;AAAA;AAAA;AAGrD,cACE1B,KAAA,gBAAAA,EAAe,2BAA0B,KAAK8B,KAAA,gBAAAA,EAAkB,IAAI;AAAA,IAExE;AAEI,WAAAP,KAA4Ba,IAA0B,KAEtDpC,KAAA,gBAAAA,EAAe,8BACf,GAAGoC,CAAuB,wBAIvB;AAAA,EAAA,GACN;AAAA,IACDzB;AAAA,IACAsB;AAAA,IACAnB;AAAA,IACAM;AAAA,IACAG;AAAA,IACAvB;AAAA,IACAY;AAAA,IACAX;AAAA,EAAA,CACD,GAGKqC,IAAoB,OAAOC,MAAsB;AACrD,QAAI,CAAChB;AACH;AAOF,QAJ2BA,EAAyB;AAAA,MAClD,CAACK,MAAYA,EAAQ,eAAeW;AAAA,IAAA,GAGd;AACtB,YAAMC,IAAwBjB,EAAyB;AAAA,QACrD,CAACO,MAAqBA,EAAiB,eAAeS;AAAA,MAAA;AAGxD,MAAAf,EAA4BgB,CAAqB,GACjDtB,EAAwBsB,CAAqB;AAAA,IAAA,OACxC;AACL,YAAMA,IAAwB;AAAA,QAC5B,GAAGjB;AAAA,QACH,EAAE,YAAYgB,EAAU;AAAA,MAAA;AAG1B,MAAAf,EAA4BgB,CAAqB,GACjDtB,EAAwBsB,CAAqB;AAAA,IAC/C;AAAA,EAAA,GAII,EAAE,UAAAC,EAAS,IAAIC,EAAU,EAAE,aAAa,QAAQ,GAChDC,IAAkB7B,EAAc;AAAA,IAAO,CAACuB,MAC5CI,EAASJ,EAAa,MAAM/B,CAAU;AAAA,EAAA;AAGpC,SAAAQ,EAAc,SAAStB,KAEvB,gBAAAoD;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAc,CAAC,CAACd;AAAA,MAChB,mBAAmBR,KAA4B,CAAC;AAAA,MAChD,yBAAAL;AAAA,MACA,wBAAAE;AAAA,MACA,2BAAAC;AAAA,IAAA;AAAA,EAAA,IAMH,gBAAAuB,EAAA,OAAA,EAAI,KAAKpC,GAAa,WAAU,gBAC/B,UAAA,gBAAAsC;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,MAAMpC,MAAqB,iBAAiBR,IAAmB;AAAA,MAE/D,UAAA;AAAA,QAAC,gBAAAyC,EAAAI,EAAe,MAAf,EACC,UAAC,gBAAAJ,EAAA,SAAA,EAAM,SAAQ,wBACZ,UAAA3C,EAAE,qBAAqB,EAAA,CAC1B,EACF,CAAA;AAAA,QACA,gBAAA2C,EAACG,EAAQ,SAAR,EAAgB,SAAO,IACtB,UAAA,gBAAAD,EAAC,OAAI,EAAA,WAAU,2BACb,UAAA;AAAA,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,cACV,GAAGjD;AAAA,cAEJ,UAAA;AAAA,gBAAA,gBAAA+C;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW,kDAAkDb,KAAgB,uDAAuD;AAAA,oBAEnI,UAAAE,sBACEgB,GAAQ,EAAA,MAAK,QAAO,WAAW,EAAA,CAAG,IAEnC,gBAAAL,EAACM,GAAW,CAAA,CAAA;AAAA,kBAAA;AAAA,gBAEhB;AAAA,gBAEA,gBAAAN;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW,mDAAmDb,IAAe,2DAA2D,EAAE;AAAA,oBAC1I,UAAU;AAAA,oBACV,IAAG;AAAA,oBACH,MAAK;AAAA,oBACL,SAAS,MACPjB,EAAc,SAAS,KAAKV,EAAoB,EAAI;AAAA,oBAEtD,UAAU,CAAC+C,MAAM5C,EAAc4C,EAAE,OAAO,KAAK;AAAA,oBAC7C,OAAO7C;AAAA,oBACP,aAAa4B,KAAqB;AAAA,oBAClC,UAAU,CAAC,CAACH;AAAA,oBACX,GAAGnC;AAAA,kBAAA;AAAA,gBACN;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,4BAECwD,GAAqB,EAAA;AAAA,QAAA,EAAA,CACxB,EACF,CAAA;AAAA,QAEA,gBAAAR,EAACG,EAAQ,SAAR,EACC,UAAA,gBAAAH;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,WAAWtC,KAAwBI;AAAA,YACnC,YAAYE;AAAA,YACZ,mBAAmBE;AAAA,YACnB,SAASe;AAAA,YACT,eAAeK;AAAA,YACf,cAAA7C;AAAA,YACA,oBAAAC;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.mjs

@@ -0,0 +1,31 @@
+import { jsx as o } from "react/jsx-runtime";
+import b from "./SlackChannelOption.mjs";
+
+
+const _ = ({
+  slackChannels: t,
+  isLoading: m,
+  connectedChannels: i,
+  onClick: p,
+  listBoxProps: x,
+  channelOptionProps: a,
+  isUpdating: d
+}) => /* @__PURE__ */ o("div", { className: "rsk-combobox__list-box", ...x, children: t.map((r) => /* @__PURE__ */ o(
+  b,
+  {
+    tabIndex: 0,
+    channel: r,
+    isLoading: m,
+    isConnected: !!(i != null && i.find(
+      (s) => s.channel_id === r.id
+    )),
+    onClick: p,
+    channelOptionProps: a,
+    isUpdating: d
+  },
+  r.id
+)) });
+export {
+  _ as default
+};
+//# sourceMappingURL=SlackChannelListBox.mjs.map

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlackChannelListBox.mjs","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.tsx"],"sourcesContent":["import { SlackChannel, SlackChannelConnection } from \"@knocklabs/client\";\nimport { AriaListBoxOptions } from \"@react-aria/listbox\";\n\nimport SlackChannelOption from \"./SlackChannelOption\";\n\nimport \"./styles.css\";\nimport \"../../theme.css\"\n\ntype Props = AriaListBoxOptions<unknown> & {\n  slackChannels: SlackChannel[];\n  isLoading: boolean;\n  connectedChannels: SlackChannelConnection[] | null;\n  onClick: (channelId: string) => void;\n  listBoxProps?: React.HTMLAttributes<HTMLDivElement>;\n  channelOptionProps?: React.HtmlHTMLAttributes<HTMLButtonElement>;\n  isUpdating: boolean;\n};\n\nconst SlackChannelListBox = ({\n  slackChannels,\n  isLoading,\n  connectedChannels,\n  onClick,\n  listBoxProps,\n  channelOptionProps,\n  isUpdating,\n}: Props) => {\n  return (\n    <div className=\"rsk-combobox__list-box\" {...listBoxProps}>\n      {slackChannels.map((channel) => {\n        return (\n          <SlackChannelOption\n            key={channel.id}\n            tabIndex={0}\n            channel={channel}\n            isLoading={isLoading}\n            isConnected={\n              !!connectedChannels?.find(\n                (connectedChannel) =>\n                  connectedChannel.channel_id === channel.id,\n              )\n            }\n            onClick={onClick}\n            channelOptionProps={channelOptionProps}\n            isUpdating={isUpdating}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default SlackChannelListBox;\n"],"names":["SlackChannelListBox","slackChannels","isLoading","connectedChannels","onClick","listBoxProps","channelOptionProps","isUpdating","jsx","channel","SlackChannelOption","connectedChannel"],"mappings":";;;;AAkBA,MAAMA,IAAsB,CAAC;AAAA,EAC3B,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,YAAAC;AACF,MAEI,gBAAAC,EAAC,SAAI,WAAU,0BAA0B,GAAGH,GACzC,UAAAJ,EAAc,IAAI,CAACQ,MAEhB,gBAAAD;AAAA,EAACE;AAAA,EAAA;AAAA,IAEC,UAAU;AAAA,IACV,SAAAD;AAAA,IACA,WAAAP;AAAA,IACA,aACE,CAAC,EAACC,KAAA,QAAAA,EAAmB;AAAA,MACnB,CAACQ,MACCA,EAAiB,eAAeF,EAAQ;AAAA;AAAA,IAG9C,SAAAL;AAAA,IACA,oBAAAE;AAAA,IACA,YAAAC;AAAA,EAAA;AAAA,EAZKE,EAAQ;AAAA,CAelB,EACH,CAAA;"}

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelOption.mjs

@@ -0,0 +1,49 @@
+import { jsx as o, jsxs as x } from "react/jsx-runtime";
+import { useState as _, useEffect as f } from "react";
+import "@knocklabs/react-core";
+import { Spinner as k } from "../../../core/components/Spinner/Spinner.mjs";
+
+import "lodash.debounce";
+
+import v from "./icons/CheckmarkIcon.mjs";
+import h from "./icons/HashtagIcon.mjs";
+import N from "./icons/LockIcon.mjs";
+
+const z = ({
+  channel: t,
+  isLoading: e,
+  isConnected: n,
+  onClick: a,
+  tabIndex: l,
+  channelOptionProps: p,
+  isUpdating: r
+}) => {
+  const [b, c] = _(!1), [i, s] = _(null), u = () => i === t.id && (r || e) ? /* @__PURE__ */ o(k, { thickness: 3 }) : b || n ? /* @__PURE__ */ o(v, { isConnected: n }) : /* @__PURE__ */ o("div", { className: "rsk-combobox__option__text-container__empty-icon" }), d = (m) => {
+    s(m), a(m);
+  };
+  return f(() => {
+    if (i && !r)
+      return s(null);
+  }, [e, r, i]), /* @__PURE__ */ o(
+    "button",
+    {
+      className: "rsk-combobox__option__button",
+      onClick: () => !e && d(t.id),
+      disabled: e || r,
+      onMouseEnter: () => c(!0),
+      onMouseLeave: () => c(!1),
+      tabIndex: l,
+      ...p,
+      children: /* @__PURE__ */ x("div", { className: "rsk-combobox__option__text-container", children: [
+        /* @__PURE__ */ o("div", { className: "rsk-combobox__option__text-container__connection-icon", children: u() }),
+        /* @__PURE__ */ o("div", { className: "rsk-combobox__option__text-container__channel-icon", children: t.is_private ? /* @__PURE__ */ o(N, {}) : /* @__PURE__ */ o(h, {}) }),
+        /* @__PURE__ */ o("div", { className: "rsk-combobox__option__text-container__text", children: t.name })
+      ] })
+    },
+    t.id
+  );
+};
+export {
+  z as default
+};
+//# sourceMappingURL=SlackChannelOption.mjs.map

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelOption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlackChannelOption.mjs","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelOption.tsx"],"sourcesContent":["import { SlackChannel } from \"@knocklabs/client\";\nimport { useEffect, useState } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\n\nimport CheckmarkIcon from \"./icons/CheckmarkIcon\";\nimport HashtagIcon from \"./icons/HashtagIcon\";\nimport LockIcon from \"./icons/LockIcon\";\nimport \"./styles.css\";\n\ntype Props = {\n  channel: SlackChannel;\n  isLoading: boolean;\n  isConnected: boolean;\n  onClick: (id: string) => void;\n  tabIndex: number;\n  channelOptionProps?: React.HtmlHTMLAttributes<HTMLButtonElement>;\n  isUpdating: boolean;\n};\n\nconst SlackChannelOption = ({\n  channel,\n  isLoading,\n  isConnected,\n  onClick,\n  tabIndex,\n  channelOptionProps,\n  isUpdating,\n}: Props) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const [submittedId, setSubmittedId] = useState<string | null>(null);\n\n  const icon = () => {\n    if (submittedId === channel.id && (isUpdating || isLoading)) {\n      return <Spinner thickness={3} />;\n    }\n\n    if (isHovered || isConnected) {\n      return <CheckmarkIcon isConnected={isConnected} />;\n    }\n\n    return <div className=\"rsk-combobox__option__text-container__empty-icon\" />;\n  };\n\n  const handleOptionClick = (channelId: string) => {\n    setSubmittedId(channelId);\n    onClick(channelId);\n  };\n\n  useEffect(() => {\n    if (submittedId && !isUpdating) {\n      return setSubmittedId(null);\n    }\n  }, [isLoading, isUpdating, submittedId]);\n\n  return (\n    <button\n      key={channel.id}\n      className=\"rsk-combobox__option__button\"\n      onClick={() => !isLoading && handleOptionClick(channel.id)}\n      disabled={isLoading || isUpdating}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      tabIndex={tabIndex}\n      {...channelOptionProps}\n    >\n      <div className=\"rsk-combobox__option__text-container\">\n        <div className=\"rsk-combobox__option__text-container__connection-icon\">\n          {icon()}\n        </div>\n        <div className=\"rsk-combobox__option__text-container__channel-icon\">\n          {channel.is_private ? <LockIcon /> : <HashtagIcon />}\n        </div>\n        <div className=\"rsk-combobox__option__text-container__text\">{channel.name}</div>\n      </div>\n    </button>\n  );\n};\n\nexport default SlackChannelOption;\n"],"names":["SlackChannelOption","channel","isLoading","isConnected","onClick","tabIndex","channelOptionProps","isUpdating","isHovered","setIsHovered","useState","submittedId","setSubmittedId","icon","jsx","Spinner","CheckmarkIcon","handleOptionClick","channelId","useEffect","jsxs","LockIcon","HashtagIcon"],"mappings":";;;;;;;;;;;AAqBA,MAAMA,IAAqB,CAAC;AAAA,EAC1B,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,YAAAC;AACF,MAAa;AACX,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAaC,CAAc,IAAIF,EAAwB,IAAI,GAE5DG,IAAO,MACPF,MAAgBV,EAAQ,OAAOM,KAAcL,KACxC,gBAAAY,EAACC,GAAQ,EAAA,WAAW,EAAG,CAAA,IAG5BP,KAAaL,IACR,gBAAAW,EAACE,KAAc,aAAAb,EAA0B,CAAA,IAG3C,gBAAAW,EAAC,OAAI,EAAA,WAAU,mDAAmD,CAAA,GAGrEG,IAAoB,CAACC,MAAsB;AAC/C,IAAAN,EAAeM,CAAS,GACxBd,EAAQc,CAAS;AAAA,EAAA;AAGnB,SAAAC,EAAU,MAAM;AACV,QAAAR,KAAe,CAACJ;AAClB,aAAOK,EAAe,IAAI;AAAA,EAE3B,GAAA,CAACV,GAAWK,GAAYI,CAAW,CAAC,GAGrC,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MACV,SAAS,MAAM,CAACZ,KAAae,EAAkBhB,EAAQ,EAAE;AAAA,MACzD,UAAUC,KAAaK;AAAA,MACvB,cAAc,MAAME,EAAa,EAAI;AAAA,MACrC,cAAc,MAAMA,EAAa,EAAK;AAAA,MACtC,UAAAJ;AAAA,MACC,GAAGC;AAAA,MAEJ,UAAA,gBAAAc,EAAC,OAAI,EAAA,WAAU,wCACb,UAAA;AAAA,QAAA,gBAAAN,EAAC,OAAI,EAAA,WAAU,yDACZ,UAAAD,EAAA,GACH;AAAA,QACA,gBAAAC,EAAC,OAAI,EAAA,WAAU,sDACZ,UAAAb,EAAQ,aAAa,gBAAAa,EAACO,GAAS,CAAA,CAAA,IAAM,gBAAAP,EAAAQ,GAAA,CAAY,CAAA,GACpD;AAAA,QACC,gBAAAR,EAAA,OAAA,EAAI,WAAU,8CAA8C,YAAQ,MAAK;AAAA,MAAA,GAC5E;AAAA,IAAA;AAAA,IAjBKb,EAAQ;AAAA,EAAA;AAoBnB;"}

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackConnectionError.mjs

@@ -0,0 +1,14 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { useTranslations as e, useKnockSlackClient as s } from "@knocklabs/react-core";
+import t from "./icons/InfoIcon.mjs";
+const l = () => {
+  const { t: n } = e(), { connectionStatus: o } = s();
+  return o === "disconnected" || o === "error" ? /* @__PURE__ */ c("div", { className: "rsk-combobox__error", children: [
+    /* @__PURE__ */ r("span", { children: /* @__PURE__ */ r(t, {}) }),
+    /* @__PURE__ */ r("div", { className: "rsk-combobox__error__text", children: n(o === "disconnected" ? "slackConnectionErrorOccurred" : "slackConnectionErrorExists") })
+  ] }) : /* @__PURE__ */ r("div", {});
+};
+export {
+  l as default
+};
+//# sourceMappingURL=SlackConnectionError.mjs.map

package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackConnectionError.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlackConnectionError.mjs","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackConnectionError.tsx"],"sourcesContent":["import { useKnockSlackClient, useTranslations } from \"@knocklabs/react-core\";\n\nimport InfoIcon from \"./icons/InfoIcon\";\n\nconst SlackConnectionError = () => {\n  const { t } = useTranslations();\n  const { connectionStatus } = useKnockSlackClient();\n\n  if (connectionStatus === \"disconnected\" || connectionStatus === \"error\") {\n    return (\n      <div className=\"rsk-combobox__error\">\n        <span>\n          <InfoIcon />\n        </span>\n\n        <div className=\"rsk-combobox__error__text\">\n          {connectionStatus === \"disconnected\"\n            ? t(\"slackConnectionErrorOccurred\")\n            : t(\"slackConnectionErrorExists\")}\n        </div>\n      </div>\n    );\n  }\n\n  return <div />;\n};\n\nexport default SlackConnectionError;\n"],"names":["SlackConnectionError","t","useTranslations","connectionStatus","useKnockSlackClient","jsxs","jsx","InfoIcon"],"mappings":";;;AAIA,MAAMA,IAAuB,MAAM;AAC3B,QAAA,EAAE,GAAAC,MAAMC,KACR,EAAE,kBAAAC,MAAqBC;AAEzB,SAAAD,MAAqB,kBAAkBA,MAAqB,UAE5D,gBAAAE,EAAC,OAAI,EAAA,WAAU,uBACb,UAAA;AAAA,IAAC,gBAAAC,EAAA,QAAA,EACC,UAAC,gBAAAA,EAAAC,GAAA,CAAS,CAAA,GACZ;AAAA,IAEA,gBAAAD,EAAC,OAAI,EAAA,WAAU,6BACZ,UACGL,EADHE,MAAqB,iBAChB,iCACA,4BAD8B,EAEtC,CAAA;AAAA,EACF,EAAA,CAAA,sBAII,OAAI,CAAA,CAAA;AACd;"}