@knocklabs/react 0.2.8 → 0.2.10

package/dist/cjs/modules/feed/components/NotificationFeed/MarkAsRead.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkAsRead.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { CheckmarkCircle } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type MarkAsReadProps = {\n  onClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nexport const MarkAsRead: React.FC<MarkAsReadProps> = ({ onClick }) => {\n  const { useFeedStore, feedClient, colorMode } = useKnockFeed();\n  const { t } = useTranslations();\n\n  const unreadItems = useFeedStore((state) =>\n    state.items.filter((item) => !item.read_at),\n  );\n\n  const unreadCount = useFeedStore((state) => state.metadata.unread_count);\n\n  const onClickHandler = React.useCallback(\n    (e: React.MouseEvent) => {\n      feedClient.markAllAsRead();\n      if (onClick) onClick(e, unreadItems);\n    },\n    [feedClient, unreadItems, onClick],\n  );\n\n  return (\n    <button\n      className={`rnf-mark-all-as-read rnf-mark-all-as-read--${colorMode}`}\n      disabled={unreadCount === 0}\n      onClick={onClickHandler}\n      type=\"button\"\n    >\n      {t(\"markAllAsRead\")}\n      <CheckmarkCircle />\n    </button>\n  );\n};\n"],"names":["MarkAsRead","onClick","useFeedStore","feedClient","colorMode","useKnockFeed","t","useTranslations","unreadItems","state","item","unreadCount","onClickHandler","React","e","jsxs","CheckmarkCircle"],"mappings":"glBAWaA,EAAwC,CAAC,CAAE,QAAAC,KAAc,CACpE,KAAM,CAAE,aAAAC,EAAc,WAAAC,EAAY,UAAAC,GAAcC,EAAa,aAAA,EACvD,CAAE,EAAAC,GAAMC,EAAAA,kBAERC,EAAcN,EAAcO,GAChCA,EAAM,MAAM,OAAQC,GAAS,CAACA,EAAK,OAAO,CAAA,EAGtCC,EAAcT,EAAcO,GAAUA,EAAM,SAAS,YAAY,EAEjEG,EAAiBC,EAAM,YAC1BC,GAAwB,CACvBX,EAAW,cAAc,EACrBF,GAASA,EAAQa,EAAGN,CAAW,CACrC,EACA,CAACL,EAAYK,EAAaP,CAAO,CAAA,EAIjC,OAAAc,EAAA,KAAC,SAAA,CACC,UAAW,8CAA8CX,CAAS,GAClE,SAAUO,IAAgB,EAC1B,QAASC,EACT,KAAK,SAEJ,SAAA,CAAAN,EAAE,eAAe,QACjBU,EAAgB,gBAAA,EAAA,CAAA,CAAA,CAAA,CAGvB"}
+{"version":3,"file":"MarkAsRead.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { CheckmarkCircle } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type MarkAsReadProps = {\n  onClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nexport const MarkAsRead: React.FC<MarkAsReadProps> = ({ onClick }) => {\n  const { useFeedStore, feedClient, colorMode } = useKnockFeed();\n  const { t } = useTranslations();\n\n  const unreadItems = useFeedStore((state) =>\n    state.items.filter((item) => !item.read_at),\n  );\n\n  const unreadCount = useFeedStore((state) => state.metadata.unread_count);\n\n  const onClickHandler = React.useCallback(\n    (e: React.MouseEvent) => {\n      feedClient.markAllAsRead();\n      if (onClick) onClick(e, unreadItems);\n    },\n    [feedClient, unreadItems, onClick],\n  );\n\n  return (\n    <button\n      className={`rnf-mark-all-as-read rnf-mark-all-as-read--${colorMode}`}\n      disabled={unreadCount === 0}\n      onClick={onClickHandler}\n      type=\"button\"\n    >\n      {t(\"markAllAsRead\")}\n      <CheckmarkCircle />\n    </button>\n  );\n};\n"],"names":["MarkAsRead","onClick","useFeedStore","feedClient","colorMode","useKnockFeed","t","useTranslations","unreadItems","state","items","filter","item","read_at","unreadCount","metadata","unread_count","onClickHandler","React","useCallback","e","markAllAsRead","CheckmarkCircle"],"mappings":"ijBAWaA,EAAwCA,CAAC,CAAEC,QAAAA,CAAQ,IAAM,CAC9D,KAAA,CAAEC,aAAAA,EAAcC,WAAAA,EAAYC,UAAAA,GAAcC,EAAa,aAAA,EACvD,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EAExBC,EAAcN,EAAcO,GAChCA,EAAMC,MAAMC,OAAiBC,GAAA,CAACA,EAAKC,OAAO,CAC5C,EAEMC,EAAcZ,EAAwBO,GAAAA,EAAMM,SAASC,YAAY,EAEjEC,EAAiBC,EAAMC,YAC1BC,GAAwB,CACvBjB,EAAWkB,cAAc,EACrBpB,GAASA,EAAQmB,EAAGZ,CAAW,CAErC,EAAA,CAACL,EAAYK,EAAaP,CAAO,CACnC,EAEA,uBACG,SACC,CAAA,UAAY,8CAA6CG,CAAU,GACnE,SAAUU,IAAgB,EAC1B,QAASG,EACT,KAAK,QAEJX,EAAAA,EAAE,eAAe,EAClBY,EAAA,cAACI,sBAAe,CAClB,CAEJ"}

package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeed.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@knocklabs/client"),s=require("@knocklabs/react-core"),o=require("react"),w=require("../../../core/components/Spinner/Spinner.js"),y=require("../../../core/hooks/useOnBottomScroll.js"),R=require("../EmptyFeed/EmptyFeed.js"),I=require("../NotificationCell/NotificationCell.js");const B=require("./NotificationFeedHeader.js");const E=t=>e.jsx(I.NotificationCell,{...t},t.item.id),H=t=>e.jsx(B.NotificationFeedHeader,{...t}),h=({colorMode:t})=>e.jsx("div",{className:"rnf-notification-feed__spinner-container",children:e.jsx(w.Spinner,{thickness:3,size:"16px",color:t==="dark"?"rgba(255, 255, 255, 0.65)":void 0})}),M="https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed",K=({EmptyComponent:t=e.jsx(R.EmptyFeed,{}),renderItem:p=E,onNotificationClick:x,onNotificationButtonClick:N,onMarkAllAsReadClick:S,initialFilterStatus:c=s.FilterStatus.All,header:j,renderHeader:q=H})=>{const[a,u]=o.useState(c),{feedClient:n,useFeedStore:_,colorMode:d}=s.useKnockFeed(),{settings:f}=s.useFeedSettings(n),{t:b}=s.useTranslations(),{pageInfo:m,items:k,networkStatus:i}=_(),g=o.useRef(null);o.useEffect(()=>{u(c)},[c]),o.useEffect(()=>{n.fetch({status:a})},[n,a]);const F=k.length===0,l=r.isRequestInFlight(i),C=o.useCallback(()=>{!l&&m.after&&n.fetchNextPage()},[l,m,n]);return y({ref:g,callback:C,offset:70}),e.jsxs("div",{className:`rnf-notification-feed rnf-notification-feed--${d}`,children:[j||q({setFilterStatus:u,filterStatus:a,onMarkAllAsReadClick:S}),e.jsxs("div",{className:"rnf-notification-feed__container",ref:g,children:[i===r.NetworkStatus.loading&&e.jsx(h,{colorMode:d}),e.jsx("div",{className:"rnf-notification-feed__feed-items-container",children:i!==r.NetworkStatus.loading&&k.map(v=>p({item:v,onItemClick:x,onButtonClick:N}))}),i===r.NetworkStatus.fetchMore&&e.jsx(h,{colorMode:d}),!l&&F&&t]}),(f==null?void 0:f.features.branding_required)&&e.jsx("div",{className:"rnf-notification-feed__knock-branding",children:e.jsx("a",{href:M,target:"_blank",children:b("poweredBy")})})]})};exports.NotificationFeed=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@knocklabs/client"),c=require("@knocklabs/react-core"),n=require("react"),w=require("../../../core/components/Spinner/Spinner.js"),R=require("../../../core/hooks/useOnBottomScroll.js"),I=require("../EmptyFeed/EmptyFeed.js"),B=require("../NotificationCell/NotificationCell.js");const H=require("./NotificationFeedHeader.js");const M=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=M(n),j=e=>t.default.createElement(B.NotificationCell,{key:e.item.id,...e}),x=e=>t.default.createElement(H.NotificationFeedHeader,{...e}),g=({colorMode:e})=>t.default.createElement("div",{className:"rnf-notification-feed__spinner-container"},t.default.createElement(w.Spinner,{thickness:3,size:"16px",color:e==="dark"?"rgba(255, 255, 255, 0.65)":void 0})),K="https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed",O=({EmptyComponent:e=t.default.createElement(I.EmptyFeed,null),renderItem:E=j,onNotificationClick:_,onNotificationButtonClick:N,onMarkAllAsReadClick:S,initialFilterStatus:i=c.FilterStatus.All,header:q,renderHeader:b=x})=>{const[l,u]=n.useState(i),{feedClient:a,useFeedStore:F,colorMode:s}=c.useKnockFeed(),{settings:f}=c.useFeedSettings(a),{t:h}=c.useTranslations(),{pageInfo:m,items:k,networkStatus:o}=F(),p=n.useRef(null);n.useEffect(()=>{u(i)},[i]),n.useEffect(()=>{a.fetch({status:l})},[a,l]);const y=k.length===0,d=r.isRequestInFlight(o),C=n.useCallback(()=>{!d&&m.after&&a.fetchNextPage()},[d,m,a]);return R({ref:p,callback:C,offset:70}),t.default.createElement("div",{className:`rnf-notification-feed rnf-notification-feed--${s}`},q||b({setFilterStatus:u,filterStatus:l,onMarkAllAsReadClick:S}),t.default.createElement("div",{className:"rnf-notification-feed__container",ref:p},o===r.NetworkStatus.loading&&t.default.createElement(g,{colorMode:s}),t.default.createElement("div",{className:"rnf-notification-feed__feed-items-container"},o!==r.NetworkStatus.loading&&k.map(v=>E({item:v,onItemClick:_,onButtonClick:N}))),o===r.NetworkStatus.fetchMore&&t.default.createElement(g,{colorMode:s}),!d&&y&&e),(f==null?void 0:f.features.branding_required)&&t.default.createElement("div",{className:"rnf-notification-feed__knock-branding"},t.default.createElement("a",{href:K,target:"_blank"},h("poweredBy"))))};exports.NotificationFeed=O;
 //# sourceMappingURL=NotificationFeed.js.map

package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeed.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeed.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n  ColorMode,\n  FilterStatus,\n  useFeedSettings,\n  useKnockFeed,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n  NotificationFeedHeader,\n  NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps = {\n  item: FeedItem;\n  onItemClick?: NotificationCellProps[\"onItemClick\"];\n  onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n  EmptyComponent?: ReactNode;\n  /**\n   * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n   */\n  header?: ReactElement<any>;\n  renderItem?: RenderItem;\n  renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n  onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n  onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n  initialFilterStatus?: FilterStatus;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n  <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n  <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n  <div className=\"rnf-notification-feed__spinner-container\">\n    <Spinner\n      thickness={3}\n      size=\"16px\"\n      color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n    />\n  </div>\n);\n\nconst poweredByKnockUrl =\n  \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n  EmptyComponent = <EmptyFeed />,\n  renderItem = defaultRenderItem,\n  onNotificationClick,\n  onNotificationButtonClick,\n  onMarkAllAsReadClick,\n  initialFilterStatus = FilterStatus.All,\n  header,\n  renderHeader = defaultRenderHeader,\n}) => {\n  const [status, setStatus] = useState(initialFilterStatus);\n  const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n  const { settings } = useFeedSettings(feedClient);\n  const { t } = useTranslations();\n\n  const { pageInfo, items, networkStatus } = useFeedStore();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setStatus(initialFilterStatus);\n  }, [initialFilterStatus]);\n\n  useEffect(() => {\n    // When the feed client changes, or the status changes issue a re-fetch\n    feedClient.fetch({ status });\n  }, [feedClient, status]);\n\n  const noItems = items.length === 0;\n  const requestInFlight = isRequestInFlight(networkStatus);\n\n  // Handle fetching more once we reach the bottom of the list\n  const onBottomCallback = useCallback(() => {\n    if (!requestInFlight && pageInfo.after) {\n      feedClient.fetchNextPage();\n    }\n  }, [requestInFlight, pageInfo, feedClient]);\n\n  // Once we scroll to the bottom of the view we want to automatically fetch\n  // more items for the feed and bring them into the list\n  useOnBottomScroll({\n    ref: containerRef,\n    callback: onBottomCallback,\n    offset: 70,\n  });\n\n  return (\n    <div\n      className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n    >\n      {header ||\n        renderHeader({\n          setFilterStatus: setStatus,\n          filterStatus: status,\n          onMarkAllAsReadClick,\n        })}\n\n      <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n        {networkStatus === NetworkStatus.loading && (\n          <LoadingSpinner colorMode={colorMode} />\n        )}\n\n        <div className=\"rnf-notification-feed__feed-items-container\">\n          {networkStatus !== NetworkStatus.loading &&\n            items.map((item: FeedItem) =>\n              renderItem({\n                item,\n                onItemClick: onNotificationClick,\n                onButtonClick: onNotificationButtonClick,\n              }),\n            )}\n        </div>\n\n        {networkStatus === NetworkStatus.fetchMore && (\n          <LoadingSpinner colorMode={colorMode} />\n        )}\n\n        {!requestInFlight && noItems && EmptyComponent}\n      </div>\n\n      {settings?.features.branding_required && (\n        <div className=\"rnf-notification-feed__knock-branding\">\n          <a href={poweredByKnockUrl} target=\"_blank\">\n            {t(\"poweredBy\")}\n          </a>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["defaultRenderItem","props","jsx","NotificationCell","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","noItems","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","useOnBottomScroll","jsxs","NetworkStatus","item"],"mappings":"4gBAkDA,MAAMA,EAAqBC,GACzBC,EAAA,IAACC,oBAAsC,GAAGF,CAAA,EAAnBA,EAAM,KAAK,EAAe,EAG7CG,EAAuBH,GAC1BC,EAAA,IAAAG,EAAA,uBAAA,CAAwB,GAAGJ,CAAO,CAAA,EAG/BK,EAAiB,CAAC,CAAE,UAAAC,CAAA,IACvBL,EAAA,IAAA,MAAA,CAAI,UAAU,2CACb,SAAAA,EAAA,IAACM,EAAA,QAAA,CACC,UAAW,EACX,KAAK,OACL,MAAOD,IAAc,OAAS,4BAA8B,MAAA,CAC9D,CACF,CAAA,EAGIE,EACJ,qGAEWC,EAAoD,CAAC,CAChE,eAAAC,QAAkBC,EAAU,UAAA,EAAA,EAC5B,WAAAC,EAAab,EACb,oBAAAc,EACA,0BAAAC,EACA,qBAAAC,EACA,oBAAAC,EAAsBC,EAAa,aAAA,IACnC,OAAAC,EACA,aAAAC,EAAehB,CACjB,IAAM,CACJ,KAAM,CAACiB,EAAQC,CAAS,EAAIC,WAASN,CAAmB,EAClD,CAAE,WAAAO,EAAY,aAAAC,EAAc,UAAAlB,GAAcmB,EAAa,aAAA,EACvD,CAAE,SAAAC,CAAA,EAAaC,EAAA,gBAAgBJ,CAAU,EACzC,CAAE,EAAAK,GAAMC,EAAAA,kBAER,CAAE,SAAAC,EAAU,MAAAC,EAAO,cAAAC,GAAkBR,EAAa,EAClDS,EAAeC,SAAuB,IAAI,EAEhDC,EAAAA,UAAU,IAAM,CACdd,EAAUL,CAAmB,CAAA,EAC5B,CAACA,CAAmB,CAAC,EAExBmB,EAAAA,UAAU,IAAM,CAEHZ,EAAA,MAAM,CAAE,OAAAH,CAAA,CAAQ,CAAA,EAC1B,CAACG,EAAYH,CAAM,CAAC,EAEjB,MAAAgB,EAAUL,EAAM,SAAW,EAC3BM,EAAkBC,oBAAkBN,CAAa,EAGjDO,EAAmBC,EAAAA,YAAY,IAAM,CACrC,CAACH,GAAmBP,EAAS,OAC/BP,EAAW,cAAc,CAE1B,EAAA,CAACc,EAAiBP,EAAUP,CAAU,CAAC,EAIxB,OAAAkB,EAAA,CAChB,IAAKR,EACL,SAAUM,EACV,OAAQ,EAAA,CACT,EAGCG,EAAA,KAAC,MAAA,CACC,UAAW,gDAAgDpC,CAAS,GAEnE,SAAA,CAAAY,GACCC,EAAa,CACX,gBAAiBE,EACjB,aAAcD,EACd,qBAAAL,CAAA,CACD,EAEF2B,EAAA,KAAA,MAAA,CAAI,UAAU,mCAAmC,IAAKT,EACpD,SAAA,CAAAD,IAAkBW,EAAc,cAAA,SAC9B1C,EAAA,IAAAI,EAAA,CAAe,UAAAC,EAAsB,QAGvC,MAAI,CAAA,UAAU,8CACZ,SAAkB0B,IAAAW,EAAA,cAAc,SAC/BZ,EAAM,IAAKa,GACThC,EAAW,CACT,KAAAgC,EACA,YAAa/B,EACb,cAAeC,CAAA,CAChB,CAAA,EAEP,EAECkB,IAAkBW,EAAA,cAAc,WAC/B1C,EAAA,IAACI,GAAe,UAAAC,EAAsB,EAGvC,CAAC+B,GAAmBD,GAAW1B,CAAA,EAClC,GAECgB,GAAA,YAAAA,EAAU,SAAS,oBACjBzB,EAAA,IAAA,MAAA,CAAI,UAAU,wCACb,SAAAA,EAAA,IAAC,IAAE,CAAA,KAAMO,EAAmB,OAAO,SAChC,SAAEoB,EAAA,WAAW,CAChB,CAAA,EACF,CAAA,CAAA,CAAA,CAIR"}
+{"version":3,"file":"NotificationFeed.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n  ColorMode,\n  FilterStatus,\n  useFeedSettings,\n  useKnockFeed,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n  NotificationFeedHeader,\n  NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = any> = {\n  item: FeedItem<T>;\n  onItemClick?: NotificationCellProps[\"onItemClick\"];\n  onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n  EmptyComponent?: ReactNode;\n  /**\n   * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n   */\n  header?: ReactElement<any>;\n  renderItem?: RenderItem;\n  renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n  onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n  onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n  initialFilterStatus?: FilterStatus;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n  <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n  <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n  <div className=\"rnf-notification-feed__spinner-container\">\n    <Spinner\n      thickness={3}\n      size=\"16px\"\n      color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n    />\n  </div>\n);\n\nconst poweredByKnockUrl =\n  \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n  EmptyComponent = <EmptyFeed />,\n  renderItem = defaultRenderItem,\n  onNotificationClick,\n  onNotificationButtonClick,\n  onMarkAllAsReadClick,\n  initialFilterStatus = FilterStatus.All,\n  header,\n  renderHeader = defaultRenderHeader,\n}) => {\n  const [status, setStatus] = useState(initialFilterStatus);\n  const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n  const { settings } = useFeedSettings(feedClient);\n  const { t } = useTranslations();\n\n  const { pageInfo, items, networkStatus } = useFeedStore();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setStatus(initialFilterStatus);\n  }, [initialFilterStatus]);\n\n  useEffect(() => {\n    // When the feed client changes, or the status changes issue a re-fetch\n    feedClient.fetch({ status });\n  }, [feedClient, status]);\n\n  const noItems = items.length === 0;\n  const requestInFlight = isRequestInFlight(networkStatus);\n\n  // Handle fetching more once we reach the bottom of the list\n  const onBottomCallback = useCallback(() => {\n    if (!requestInFlight && pageInfo.after) {\n      feedClient.fetchNextPage();\n    }\n  }, [requestInFlight, pageInfo, feedClient]);\n\n  // Once we scroll to the bottom of the view we want to automatically fetch\n  // more items for the feed and bring them into the list\n  useOnBottomScroll({\n    ref: containerRef,\n    callback: onBottomCallback,\n    offset: 70,\n  });\n\n  return (\n    <div\n      className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n    >\n      {header ||\n        renderHeader({\n          setFilterStatus: setStatus,\n          filterStatus: status,\n          onMarkAllAsReadClick,\n        })}\n\n      <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n        {networkStatus === NetworkStatus.loading && (\n          <LoadingSpinner colorMode={colorMode} />\n        )}\n\n        <div className=\"rnf-notification-feed__feed-items-container\">\n          {networkStatus !== NetworkStatus.loading &&\n            items.map((item: FeedItem) =>\n              renderItem({\n                item,\n                onItemClick: onNotificationClick,\n                onButtonClick: onNotificationButtonClick,\n              }),\n            )}\n        </div>\n\n        {networkStatus === NetworkStatus.fetchMore && (\n          <LoadingSpinner colorMode={colorMode} />\n        )}\n\n        {!requestInFlight && noItems && EmptyComponent}\n      </div>\n\n      {settings?.features.branding_required && (\n        <div className=\"rnf-notification-feed__knock-branding\">\n          <a href={poweredByKnockUrl} target=\"_blank\">\n            {t(\"poweredBy\")}\n          </a>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":"kjBAkDMA,EAAqBC,GACxBC,UAAA,cAAAC,EAAAA,iBAAA,CAAiB,IAAKF,EAAMG,KAAKC,GAAI,GAAIJ,CAC3C,CAAA,EAEKK,EAAuBL,GAC1BC,UAAA,cAAAK,EAAAA,uBAAA,CAA2BN,GAAAA,CAC7B,CAAA,EAEKO,EAAiBA,CAAC,CAAEC,UAAAA,CAAoC,IAC3DP,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,oEACZQ,UACC,CAAA,UAAW,EACX,KAAK,OACL,MAAOD,IAAc,OAAS,4BAA8BE,MAAU,CAAA,CAE1E,EAGIC,EACJ,qGAEWC,EAAoDA,CAAC,CAChEC,eAAAA,0BAAkBC,EAAAA,UAAY,IAAA,EAC9BC,WAAAA,EAAahB,EACbiB,oBAAAA,EACAC,0BAAAA,EACAC,qBAAAA,EACAC,oBAAAA,EAAsBC,EAAaC,aAAAA,IACnCC,OAAAA,EACAC,aAAAA,EAAelB,CACjB,IAAM,CACJ,KAAM,CAACmB,EAAQC,CAAS,EAAIC,WAASP,CAAmB,EAClD,CAAEQ,WAAAA,EAAYC,aAAAA,EAAcpB,UAAAA,GAAcqB,EAAa,aAAA,EACvD,CAAEC,SAAAA,CAAAA,EAAaC,EAAAA,gBAAgBJ,CAAU,EACzC,CAAEK,EAAAA,GAAMC,EAAgB,gBAAA,EAExB,CAAEC,SAAAA,EAAUC,MAAAA,EAAOC,cAAAA,GAAkBR,EAAa,EAClDS,EAAeC,SAAuB,IAAI,EAEhDC,EAAAA,UAAU,IAAM,CACdd,EAAUN,CAAmB,CAAA,EAC5B,CAACA,CAAmB,CAAC,EAExBoB,EAAAA,UAAU,IAAM,CAEdZ,EAAWa,MAAM,CAAEhB,OAAAA,CAAAA,CAAQ,CAAA,EAC1B,CAACG,EAAYH,CAAM,CAAC,EAEjBiB,MAAAA,EAAUN,EAAMO,SAAW,EAC3BC,EAAkBC,oBAAkBR,CAAa,EAGjDS,EAAmBC,EAAAA,YAAY,IAAM,CACrC,CAACH,GAAmBT,EAASa,OAC/BpB,EAAWqB,cAAc,CAE1B,EAAA,CAACL,EAAiBT,EAAUP,CAAU,CAAC,EAIxB,OAAAsB,EAAA,CAChBC,IAAKb,EACLc,SAAUN,EACVO,OAAQ,EAAA,CACT,0BAGE,MACC,CAAA,UAAY,gDAA+C5C,CAAU,IAEpEc,GACCC,EAAa,CACX8B,gBAAiB5B,EACjB6B,aAAc9B,EACdN,qBAAAA,CAAAA,CACD,EAEHjB,EAAA,QAAA,cAAC,MAAI,CAAA,UAAU,mCAAmC,IAAKoC,CACpDD,EAAAA,IAAkBmB,EAAcC,cAAAA,SAC9BvD,EAAA,QAAA,cAAAM,EAAA,CAAe,UAAAC,CACjB,CAAA,EAEDP,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAU,6CACZmC,EAAAA,IAAkBmB,EAAAA,cAAcC,SAC/BrB,EAAMsB,IAAKtD,GACTY,EAAW,CACTZ,KAAAA,EACAuD,YAAa1C,EACb2C,cAAe1C,CAAAA,CAChB,CACH,CACJ,EAECmB,IAAkBmB,EAAAA,cAAcK,WAC9B3D,EAAAA,QAAA,cAAAM,EAAA,CAAe,UAAAC,CACjB,CAAA,EAEA,CAACmC,GAAmBF,GAAW5B,CAClC,GAECiB,GAAAA,YAAAA,EAAU+B,SAASC,oBAClB7D,EAAA,QAAA,cAAC,MAAI,CAAA,UAAU,yCACZA,EAAAA,QAAA,cAAA,IAAA,CAAE,KAAMU,EAAmB,OAAO,QAChCqB,EAAAA,EAAE,WAAW,CAChB,CACF,CAEJ,CAEJ"}

package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeedHeader.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@knocklabs/react-core"),o=require("./Dropdown.js"),c=require("./MarkAsRead.js"),d=[r.FilterStatus.All,r.FilterStatus.Unread,r.FilterStatus.Read],l=({onMarkAllAsReadClick:i,filterStatus:a,setFilterStatus:s})=>{const{t:n}=r.useTranslations();return e.jsxs("header",{className:"rnf-notification-feed__header",children:[e.jsxs("div",{className:"rnf-notification-feed__selector",children:[e.jsx("span",{className:"rnf-notification-feed__type",children:n("notifications")}),e.jsx(o.Dropdown,{value:a,onChange:t=>s(t.target.value),children:d.map(t=>e.jsx("option",{value:t,children:n(t)},t))})]}),e.jsx(c.MarkAsRead,{onClick:i})]})};exports.NotificationFeedHeader=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),n=require("@knocklabs/react-core"),l=require("./Dropdown.js"),d=require("./MarkAsRead.js"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=s(c),u=[n.FilterStatus.All,n.FilterStatus.Unread,n.FilterStatus.Read],f=({onMarkAllAsReadClick:e,filterStatus:o,setFilterStatus:i})=>{const{t:r}=n.useTranslations();return t.default.createElement("header",{className:"rnf-notification-feed__header"},t.default.createElement("div",{className:"rnf-notification-feed__selector"},t.default.createElement("span",{className:"rnf-notification-feed__type"},r("notifications")),t.default.createElement(l.Dropdown,{value:o,onChange:a=>i(a.target.value)},u.map(a=>t.default.createElement("option",{key:a,value:a},r(a))))),t.default.createElement(d.MarkAsRead,{onClick:e}))};exports.NotificationFeedHeader=f;
 //# sourceMappingURL=NotificationFeedHeader.js.map

package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeedHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeedHeader.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import React, { SetStateAction } from \"react\";\nimport { FeedItem } from \"@knocklabs/client\";\n\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport { Dropdown } from \"./Dropdown\";\nimport { MarkAsRead } from \"./MarkAsRead\";\n\nexport type NotificationFeedHeaderProps = {\n  filterStatus: FilterStatus;\n  setFilterStatus: React.Dispatch<SetStateAction<FilterStatus>>;\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nconst OrderedFilterStatuses = [\n  FilterStatus.All,\n  FilterStatus.Unread,\n  FilterStatus.Read,\n];\n\nexport const NotificationFeedHeader: React.FC<NotificationFeedHeaderProps> = ({\n  onMarkAllAsReadClick,\n  filterStatus,\n  setFilterStatus,\n}) => {\n  const { t } = useTranslations();\n\n  return (\n    <header className=\"rnf-notification-feed__header\">\n      <div className=\"rnf-notification-feed__selector\">\n        <span className=\"rnf-notification-feed__type\">\n          {t(\"notifications\")}\n        </span>\n        <Dropdown\n          value={filterStatus}\n          onChange={(e) => setFilterStatus(e.target.value)}\n        >\n          {OrderedFilterStatuses.map((filterStatus) => (\n            <option key={filterStatus} value={filterStatus}>\n              {t(filterStatus)}\n            </option>\n          ))}\n        </Dropdown>\n      </div>\n      <MarkAsRead onClick={onMarkAllAsReadClick} />\n    </header>\n  );\n};\n"],"names":["OrderedFilterStatuses","FilterStatus","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","jsxs","jsx","Dropdown","e","MarkAsRead"],"mappings":"gNAaMA,EAAwB,CAC5BC,EAAAA,aAAa,IACbA,EAAAA,aAAa,OACbA,EAAAA,aAAa,IACf,EAEaC,EAAgE,CAAC,CAC5E,qBAAAC,EACA,aAAAC,EACA,gBAAAC,CACF,IAAM,CACE,KAAA,CAAE,EAAAC,GAAMC,EAAAA,kBAGZ,OAAAC,EAAA,KAAC,SAAO,CAAA,UAAU,gCAChB,SAAA,CAACA,EAAAA,KAAA,MAAA,CAAI,UAAU,kCACb,SAAA,CAAAC,MAAC,OAAK,CAAA,UAAU,8BACb,SAAAH,EAAE,eAAe,EACpB,EACAG,EAAA,IAACC,EAAA,SAAA,CACC,MAAON,EACP,SAAWO,GAAMN,EAAgBM,EAAE,OAAO,KAAK,EAE9C,SAAsBX,EAAA,IAAKI,GACzBK,EAAAA,IAAA,SAAA,CAA0B,MAAOL,EAC/B,SAAEA,EAAAA,CAAY,CADJA,EAAAA,CAEb,CACD,CAAA,CACH,CAAA,EACF,EACAK,EAAAA,IAACG,EAAW,WAAA,CAAA,QAAST,CAAsB,CAAA,CAC7C,CAAA,CAAA,CAEJ"}
+{"version":3,"file":"NotificationFeedHeader.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import React, { SetStateAction } from \"react\";\nimport { FeedItem } from \"@knocklabs/client\";\n\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport { Dropdown } from \"./Dropdown\";\nimport { MarkAsRead } from \"./MarkAsRead\";\n\nexport type NotificationFeedHeaderProps = {\n  filterStatus: FilterStatus;\n  setFilterStatus: React.Dispatch<SetStateAction<FilterStatus>>;\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nconst OrderedFilterStatuses = [\n  FilterStatus.All,\n  FilterStatus.Unread,\n  FilterStatus.Read,\n];\n\nexport const NotificationFeedHeader: React.FC<NotificationFeedHeaderProps> = ({\n  onMarkAllAsReadClick,\n  filterStatus,\n  setFilterStatus,\n}) => {\n  const { t } = useTranslations();\n\n  return (\n    <header className=\"rnf-notification-feed__header\">\n      <div className=\"rnf-notification-feed__selector\">\n        <span className=\"rnf-notification-feed__type\">\n          {t(\"notifications\")}\n        </span>\n        <Dropdown\n          value={filterStatus}\n          onChange={(e) => setFilterStatus(e.target.value)}\n        >\n          {OrderedFilterStatuses.map((filterStatus) => (\n            <option key={filterStatus} value={filterStatus}>\n              {t(filterStatus)}\n            </option>\n          ))}\n        </Dropdown>\n      </div>\n      <MarkAsRead onClick={onMarkAllAsReadClick} />\n    </header>\n  );\n};\n"],"names":["OrderedFilterStatuses","FilterStatus","All","Unread","Read","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","React","Dropdown","e","target","value","map","MarkAsRead"],"mappings":"mQAaMA,EAAwB,CAC5BC,EAAAA,aAAaC,IACbD,EAAaE,aAAAA,OACbF,EAAAA,aAAaG,IAAI,EAGNC,EAAgEA,CAAC,CAC5EC,qBAAAA,EACAC,aAAAA,EACAC,gBAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EAG5B,OAAAC,EAAA,QAAA,cAAC,UAAO,UAAU,+BAAA,0BACf,MAAI,CAAA,UAAU,iCACb,EAAAA,EAAA,QAAA,cAAC,OAAK,CAAA,UAAU,+BACbF,EAAE,eAAe,CACpB,EACAE,EAAA,QAAA,cAACC,YACC,MAAOL,EACP,SAAWM,GAAML,EAAgBK,EAAEC,OAAOC,KAAK,CAAA,EAE9Cf,EAAsBgB,IAAKT,GACzBI,EAAA,QAAA,cAAA,SAAA,CAAO,IAAKJ,EAAc,MAAOA,CAAAA,EAC/BE,EAAEF,CAAY,CACjB,CACD,CACH,CACF,EACCI,UAAA,cAAAM,EAAAA,WAAA,CAAW,QAASX,CAAAA,CAAqB,CAC5C,CAEJ"}

package/dist/cjs/modules/feed/components/NotificationFeed/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/cjs/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");const t=({children:e})=>i.jsx("div",{className:"rnf-feed-provider",children:e});exports.NotificationFeedContainer=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react");const o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=o(t),i=({children:e})=>a.default.createElement("div",{className:"rnf-feed-provider"},e);exports.NotificationFeedContainer=i;
 //# sourceMappingURL=NotificationFeedContainer.js.map

package/dist/cjs/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeedContainer.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\nimport \"./styles.css\";\n\nexport const NotificationFeedContainer: React.FC<PropsWithChildren> = ({\n  children,\n}) => {\n  return <div className=\"rnf-feed-provider\">{children}</div>;\n};\n"],"names":["NotificationFeedContainer","children","jsx"],"mappings":"gJAGO,MAAMA,EAAyD,CAAC,CACrE,SAAAC,CACF,IACUC,EAAAA,IAAA,MAAA,CAAI,UAAU,oBAAqB,SAAAD,CAAS,CAAA"}
+{"version":3,"file":"NotificationFeedContainer.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\nimport \"./styles.css\";\n\nexport const NotificationFeedContainer: React.FC<PropsWithChildren> = ({\n  children,\n}) => {\n  return <div className=\"rnf-feed-provider\">{children}</div>;\n};\n"],"names":["NotificationFeedContainer","children","React"],"mappings":"yMAGaA,EAAyDA,CAAC,CACrEC,SAAAA,CACF,IACUC,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,mBAAA,EAAqBD,CAAS"}

package/dist/cjs/modules/feed/components/NotificationFeedContainer/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),v=require("@knocklabs/react-core"),q=require("react"),y=require("react-popper"),x=require("../../../core/hooks/useComponentVisible.js"),F=require("../NotificationFeed/NotificationFeed.js");require("../NotificationFeed/NotificationFeedHeader.js");const N=({store:e,feedClient:t})=>{e.metadata.unseen_count>0&&t.markAllAsSeen()},j=({isVisible:e,onOpen:t=N,onClose:c,buttonRef:s,closeOnClickOutside:f=!0,placement:a="bottom-end",...d})=>{const{colorMode:u,feedClient:r,useFeedStore:p}=v.useKnockFeed(),i=p(),{ref:n}=x(e,c,{closeOnClickOutside:f}),{styles:l,attributes:m}=y.usePopper(s.current,n.current,{strategy:"fixed",placement:a,modifiers:[{name:"offset",options:{offset:[0,8]}}]});return q.useEffect(()=>{e&&t&&t({store:i,feedClient:r})},[e,t,i,r]),o.jsx("div",{className:`rnf-notification-feed-popover rnf-notification-feed-popover--${u}`,style:{...l.popper,visibility:e?"visible":"hidden",opacity:e?1:0},ref:n,...m.popper,role:"dialog",tabIndex:-1,children:o.jsx("div",{className:"rnf-notification-feed-popover__inner",children:o.jsx(F.NotificationFeed,{...d})})})};exports.NotificationFeedPopover=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("@knocklabs/react-core"),a=require("react"),y=require("react-popper"),F=require("../../../core/hooks/useComponentVisible.js"),N=require("../NotificationFeed/NotificationFeed.js");require("../NotificationFeed/NotificationFeedHeader.js");const _=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=_(a),b=({store:e,feedClient:t})=>{e.metadata.unseen_count>0&&t.markAllAsSeen()},P=({isVisible:e,onOpen:t=b,onClose:c,buttonRef:f,closeOnClickOutside:s=!0,placement:u="bottom-end",...d})=>{const{colorMode:p,feedClient:r,useFeedStore:l}=q.useKnockFeed(),n=l(),{ref:i}=F(e,c,{closeOnClickOutside:s}),{styles:m,attributes:v}=y.usePopper(f.current,i.current,{strategy:"fixed",placement:u,modifiers:[{name:"offset",options:{offset:[0,8]}}]});return a.useEffect(()=>{e&&t&&t({store:n,feedClient:r})},[e,t,n,r]),o.default.createElement("div",{className:`rnf-notification-feed-popover rnf-notification-feed-popover--${p}`,style:{...m.popper,visibility:e?"visible":"hidden",opacity:e?1:0},ref:i,...v.popper,role:"dialog",tabIndex:-1},o.default.createElement("div",{className:"rnf-notification-feed-popover__inner"},o.default.createElement(N.NotificationFeed,{...d})))};exports.NotificationFeedPopover=P;
 //# sourceMappingURL=NotificationFeedPopover.js.map

package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeedPopover.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { Placement } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\nimport { usePopper } from \"react-popper\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n  store: FeedStoreState;\n  feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n  if (store.metadata.unseen_count > 0) {\n    feedClient.markAllAsSeen();\n  }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n  isVisible: boolean;\n  onOpen?: (arg: OnOpenOptions) => void;\n  onClose: (e: Event) => void;\n  buttonRef: RefObject<HTMLElement>;\n  closeOnClickOutside?: boolean;\n  placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n  NotificationFeedPopoverProps\n> = ({\n  isVisible,\n  onOpen = defaultOnOpen,\n  onClose,\n  buttonRef,\n  closeOnClickOutside = true,\n  placement = \"bottom-end\",\n  ...feedProps\n}) => {\n  const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n  const store = useFeedStore();\n\n  const { ref: popperRef } = useComponentVisible(isVisible, onClose, {\n    closeOnClickOutside,\n  });\n\n  const { styles, attributes } = usePopper(\n    buttonRef.current,\n    popperRef.current,\n    {\n      strategy: \"fixed\",\n      placement,\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 8],\n          },\n        },\n      ],\n    },\n  );\n\n  useEffect(() => {\n    // Whenever the feed is opened, we want to invoke the `onOpen` callback\n    // function to handle any side effects.\n    if (isVisible && onOpen) {\n      onOpen({ store, feedClient });\n    }\n  }, [isVisible, onOpen, store, feedClient]);\n\n  return (\n    <div\n      className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n      style={{\n        ...styles.popper,\n        visibility: isVisible ? \"visible\" : \"hidden\",\n        opacity: isVisible ? 1 : 0,\n      }}\n      ref={popperRef}\n      {...attributes.popper}\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <div className=\"rnf-notification-feed-popover__inner\">\n        <NotificationFeed {...feedProps} />\n      </div>\n    </div>\n  );\n};\n"],"names":["defaultOnOpen","store","feedClient","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","colorMode","useFeedStore","useKnockFeed","popperRef","useComponentVisible","styles","attributes","usePopper","useEffect","jsx","NotificationFeed"],"mappings":"mbAgBA,MAAMA,EAAgB,CAAC,CAAE,MAAAC,EAAO,WAAAC,KAAgC,CAC1DD,EAAM,SAAS,aAAe,GAChCC,EAAW,cAAc,CAE7B,EAWaC,EAET,CAAC,CACH,UAAAC,EACA,OAAAC,EAASL,EACT,QAAAM,EACA,UAAAC,EACA,oBAAAC,EAAsB,GACtB,UAAAC,EAAY,aACZ,GAAGC,CACL,IAAM,CACJ,KAAM,CAAE,UAAAC,EAAW,WAAAT,EAAY,aAAAU,GAAiBC,EAAa,aAAA,EACvDZ,EAAQW,IAER,CAAE,IAAKE,CAAA,EAAcC,EAAoBX,EAAWE,EAAS,CACjE,oBAAAE,CAAA,CACD,EAEK,CAAE,OAAAQ,EAAQ,WAAAC,CAAA,EAAeC,EAAA,UAC7BX,EAAU,QACVO,EAAU,QACV,CACE,SAAU,QACV,UAAAL,EACA,UAAW,CACT,CACE,KAAM,SACN,QAAS,CACP,OAAQ,CAAC,EAAG,CAAC,CACf,CACF,CACF,CACF,CAAA,EAGFU,OAAAA,EAAAA,UAAU,IAAM,CAGVf,GAAaC,GACRA,EAAA,CAAE,MAAAJ,EAAO,WAAAC,CAAA,CAAY,GAE7B,CAACE,EAAWC,EAAQJ,EAAOC,CAAU,CAAC,EAGvCkB,EAAA,IAAC,MAAA,CACC,UAAW,gEAAgET,CAAS,GACpF,MAAO,CACL,GAAGK,EAAO,OACV,WAAYZ,EAAY,UAAY,SACpC,QAASA,EAAY,EAAI,CAC3B,EACA,IAAKU,EACJ,GAAGG,EAAW,OACf,KAAK,SACL,SAAU,GAEV,SAAAG,EAAA,IAAC,OAAI,UAAU,uCACb,eAACC,EAAAA,iBAAkB,CAAA,GAAGX,EAAW,CACnC,CAAA,CAAA,CAAA,CAGN"}
+{"version":3,"file":"NotificationFeedPopover.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { Placement } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\nimport { usePopper } from \"react-popper\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n  store: FeedStoreState;\n  feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n  if (store.metadata.unseen_count > 0) {\n    feedClient.markAllAsSeen();\n  }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n  isVisible: boolean;\n  onOpen?: (arg: OnOpenOptions) => void;\n  onClose: (e: Event) => void;\n  buttonRef: RefObject<HTMLElement>;\n  closeOnClickOutside?: boolean;\n  placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n  NotificationFeedPopoverProps\n> = ({\n  isVisible,\n  onOpen = defaultOnOpen,\n  onClose,\n  buttonRef,\n  closeOnClickOutside = true,\n  placement = \"bottom-end\",\n  ...feedProps\n}) => {\n  const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n  const store = useFeedStore();\n\n  const { ref: popperRef } = useComponentVisible(isVisible, onClose, {\n    closeOnClickOutside,\n  });\n\n  const { styles, attributes } = usePopper(\n    buttonRef.current,\n    popperRef.current,\n    {\n      strategy: \"fixed\",\n      placement,\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 8],\n          },\n        },\n      ],\n    },\n  );\n\n  useEffect(() => {\n    // Whenever the feed is opened, we want to invoke the `onOpen` callback\n    // function to handle any side effects.\n    if (isVisible && onOpen) {\n      onOpen({ store, feedClient });\n    }\n  }, [isVisible, onOpen, store, feedClient]);\n\n  return (\n    <div\n      className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n      style={{\n        ...styles.popper,\n        visibility: isVisible ? \"visible\" : \"hidden\",\n        opacity: isVisible ? 1 : 0,\n      }}\n      ref={popperRef}\n      {...attributes.popper}\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <div className=\"rnf-notification-feed-popover__inner\">\n        <NotificationFeed {...feedProps} />\n      </div>\n    </div>\n  );\n};\n"],"names":["defaultOnOpen","store","feedClient","metadata","unseen_count","markAllAsSeen","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","colorMode","useFeedStore","useKnockFeed","ref","popperRef","useComponentVisible","styles","attributes","usePopper","current","strategy","modifiers","name","options","offset","useEffect","popper","visibility","opacity","React","NotificationFeed"],"mappings":"ydAgBMA,EAAgBA,CAAC,CAAEC,MAAAA,EAAOC,WAAAA,CAA0B,IAAM,CAC1DD,EAAME,SAASC,aAAe,GAChCF,EAAWG,cAAc,CAE7B,EAWaC,EAETA,CAAC,CACHC,UAAAA,EACAC,OAAAA,EAASR,EACTS,QAAAA,EACAC,UAAAA,EACAC,oBAAAA,EAAsB,GACtBC,UAAAA,EAAY,aACZ,GAAGC,CACL,IAAM,CACE,KAAA,CAAEC,UAAAA,EAAWZ,WAAAA,EAAYa,aAAAA,GAAiBC,EAAa,aAAA,EACvDf,EAAQc,IAER,CAAEE,IAAKC,CAAAA,EAAcC,EAAoBZ,EAAWE,EAAS,CACjEE,oBAAAA,CAAAA,CACD,EAEK,CAAES,OAAAA,EAAQC,WAAAA,CAAeC,EAAAA,EAAAA,UAC7BZ,EAAUa,QACVL,EAAUK,QACV,CACEC,SAAU,QACVZ,UAAAA,EACAa,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,CAAC,CACf,CAAA,CACD,CAAA,CAGP,EAEAC,OAAAA,EAAAA,UAAU,IAAM,CAGVtB,GAAaC,GACRA,EAAA,CAAEP,MAAAA,EAAOC,WAAAA,CAAAA,CAAY,GAE7B,CAACK,EAAWC,EAAQP,EAAOC,CAAU,CAAC,0BAGtC,MACC,CAAA,UAAY,gEAA+DY,CAAU,GACrF,MAAO,CACL,GAAGM,EAAOU,OACVC,WAAYxB,EAAY,UAAY,SACpCyB,QAASzB,EAAY,EAAI,GAE3B,IAAKW,EACL,GAAIG,EAAWS,OACf,KAAK,SACL,SAAU,IAETG,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,sCACb,EAAAA,EAAA,QAAA,cAACC,EAAAA,kBAAiB,GAAIrB,CAAU,CAAA,CAClC,CACF,CAEJ"}

package/dist/cjs/modules/feed/components/NotificationFeedPopover/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/cjs/modules/feed/components/NotificationIconButton/NotificationIconButton.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),r=require("../../../core/components/Icons/Bell.js"),a=require("@knocklabs/react-core"),u=require("../UnseenBadge/UnseenBadge.js");const s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},l=s(c),f=l.default.forwardRef(({onClick:t,badgeCountType:o},n)=>{const{colorMode:i}=a.useKnockFeed();return e.jsxs("button",{className:`rnf-notification-icon-button rnf-notification-icon-button--${i}`,role:"button","aria-label":"Open notification feed",ref:n,onClick:t,children:[e.jsx(r.BellIcon,{}),e.jsx(u.UnseenBadge,{badgeCountType:o})]})});exports.NotificationIconButton=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),r=require("../../../core/components/Icons/Bell.js"),i=require("@knocklabs/react-core"),l=require("../UnseenBadge/UnseenBadge.js");const u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=u(c),f=t.default.forwardRef(({onClick:e,badgeCountType:n},o)=>{const{colorMode:a}=i.useKnockFeed();return t.default.createElement("button",{className:`rnf-notification-icon-button rnf-notification-icon-button--${a}`,role:"button","aria-label":"Open notification feed",ref:o,onClick:e},t.default.createElement(r.BellIcon,null),t.default.createElement(l.UnseenBadge,{badgeCountType:n}))});exports.NotificationIconButton=f;
 //# sourceMappingURL=NotificationIconButton.js.map

package/dist/cjs/modules/feed/components/NotificationIconButton/NotificationIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationIconButton.js","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import React, { SyntheticEvent } from \"react\";\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { BadgeCountType, UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n  // What value should we use to drive the badge count?\n  badgeCountType?: BadgeCountType;\n  onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n  HTMLButtonElement,\n  NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <button\n      className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n      role=\"button\"\n      aria-label=\"Open notification feed\"\n      ref={ref}\n      onClick={onClick}\n    >\n      <BellIcon />\n      <UnseenBadge badgeCountType={badgeCountType} />\n    </button>\n  );\n});\n"],"names":["NotificationIconButton","React","onClick","badgeCountType","ref","colorMode","useKnockFeed","jsxs","jsx","BellIcon","UnseenBadge"],"mappings":"0WAaaA,EAAyBC,UAAM,WAG1C,CAAC,CAAE,QAAAC,EAAS,eAAAC,GAAkBC,IAAQ,CAChC,KAAA,CAAE,UAAAC,GAAcC,EAAAA,eAGpB,OAAAC,EAAA,KAAC,SAAA,CACC,UAAW,8DAA8DF,CAAS,GAClF,KAAK,SACL,aAAW,yBACX,IAAAD,EACA,QAAAF,EAEA,SAAA,CAAAM,EAAA,IAACC,EAAS,SAAA,EAAA,EACVD,MAACE,EAAAA,aAAY,eAAAP,EAAgC,CAAA,CAAA,CAAA,CAGnD,CAAC"}
+{"version":3,"file":"NotificationIconButton.js","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import React, { SyntheticEvent } from \"react\";\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { BadgeCountType, UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n  // What value should we use to drive the badge count?\n  badgeCountType?: BadgeCountType;\n  onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n  HTMLButtonElement,\n  NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <button\n      className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n      role=\"button\"\n      aria-label=\"Open notification feed\"\n      ref={ref}\n      onClick={onClick}\n    >\n      <BellIcon />\n      <UnseenBadge badgeCountType={badgeCountType} />\n    </button>\n  );\n});\n"],"names":["NotificationIconButton","React","forwardRef","onClick","badgeCountType","ref","colorMode","useKnockFeed","BellIcon","UnseenBadge"],"mappings":"2UAaaA,EAAyBC,EAAAA,QAAMC,WAG1C,CAAC,CAAEC,QAAAA,EAASC,eAAAA,CAAe,EAAGC,IAAQ,CAChC,KAAA,CAAEC,UAAAA,GAAcC,EAAa,aAAA,EAEnC,+BACG,SACC,CAAA,UAAY,8DAA6DD,CAAU,GACnF,KAAK,SACL,aAAW,yBACX,IAAAD,EACA,QAAAF,GAECF,EAAAA,QAAA,cAAAO,EAAA,SAAA,IAAQ,EACRP,EAAA,QAAA,cAAAQ,EAAA,YAAA,CAAY,eAAAL,EAA+B,CAC9C,CAEJ,CAAC"}

package/dist/cjs/modules/feed/components/NotificationIconButton/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/cjs/modules/feed/components/UnseenBadge/UnseenBadge.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("@knocklabs/react-core");function c(n,e){switch(n){case"all":return e.total_count;case"unread":return e.unread_count;case"unseen":return e.unseen_count}}const o=({badgeCountType:n="unseen"})=>{const{useFeedStore:e}=t.useKnockFeed(),u=e(r=>c(n,r.metadata));return u!==0?s.jsx("div",{className:"rnf-unseen-badge",children:s.jsx("span",{className:"rnf-unseen-badge__count",children:t.formatBadgeCount(u)})}):null};exports.UnseenBadge=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),u=require("@knocklabs/react-core");const o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=o(c);function s(e,n){switch(e){case"all":return n.total_count;case"unread":return n.unread_count;case"unseen":return n.unseen_count}}const l=({badgeCountType:e="unseen"})=>{const{useFeedStore:n}=u.useKnockFeed(),t=n(r=>s(e,r.metadata));return t!==0?a.default.createElement("div",{className:"rnf-unseen-badge"},a.default.createElement("span",{className:"rnf-unseen-badge__count"},u.formatBadgeCount(t))):null};exports.UnseenBadge=l;
 //# sourceMappingURL=UnseenBadge.js.map

package/dist/cjs/modules/feed/components/UnseenBadge/UnseenBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnseenBadge.js","sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { useKnockFeed, formatBadgeCount } from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\nimport { FeedMetadata } from \"@knocklabs/client\";\n\nexport type BadgeCountType = \"unseen\" | \"unread\" | \"all\";\n\nexport type UnseenBadgeProps = {\n  badgeCountType?: BadgeCountType;\n};\n\nfunction selectBadgeCount(\n  badgeCountType: BadgeCountType,\n  metadata: FeedMetadata,\n) {\n  switch (badgeCountType) {\n    case \"all\":\n      return metadata.total_count;\n    case \"unread\":\n      return metadata.unread_count;\n    case \"unseen\":\n      return metadata.unseen_count;\n  }\n}\n\nexport const UnseenBadge: React.FC<UnseenBadgeProps> = ({\n  badgeCountType = \"unseen\",\n}) => {\n  const { useFeedStore } = useKnockFeed();\n  const badgeCountValue = useFeedStore((state) =>\n    selectBadgeCount(badgeCountType, state.metadata),\n  );\n\n  return badgeCountValue !== 0 ? (\n    <div className=\"rnf-unseen-badge\">\n      <span className=\"rnf-unseen-badge__count\">\n        {formatBadgeCount(badgeCountValue)}\n      </span>\n    </div>\n  ) : null;\n};\n"],"names":["selectBadgeCount","badgeCountType","metadata","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","jsx","formatBadgeCount"],"mappings":"mLAYA,SAASA,EACPC,EACAC,EACA,CACA,OAAQD,EAAgB,CACtB,IAAK,MACH,OAAOC,EAAS,YAClB,IAAK,SACH,OAAOA,EAAS,aAClB,IAAK,SACH,OAAOA,EAAS,YACpB,CACF,CAEO,MAAMC,EAA0C,CAAC,CACtD,eAAAF,EAAiB,QACnB,IAAM,CACE,KAAA,CAAE,aAAAG,GAAiBC,EAAAA,eACnBC,EAAkBF,EAAcG,GACpCP,EAAiBC,EAAgBM,EAAM,QAAQ,CAAA,EAGjD,OAAOD,IAAoB,EACxBE,MAAA,MAAA,CAAI,UAAU,mBACb,SAAAA,EAAA,IAAC,OAAK,CAAA,UAAU,0BACb,SAAAC,EAAAA,iBAAiBH,CAAe,CACnC,CAAA,EACF,EACE,IACN"}
+{"version":3,"file":"UnseenBadge.js","sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { useKnockFeed, formatBadgeCount } from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\nimport { FeedMetadata } from \"@knocklabs/client\";\n\nexport type BadgeCountType = \"unseen\" | \"unread\" | \"all\";\n\nexport type UnseenBadgeProps = {\n  badgeCountType?: BadgeCountType;\n};\n\nfunction selectBadgeCount(\n  badgeCountType: BadgeCountType,\n  metadata: FeedMetadata,\n) {\n  switch (badgeCountType) {\n    case \"all\":\n      return metadata.total_count;\n    case \"unread\":\n      return metadata.unread_count;\n    case \"unseen\":\n      return metadata.unseen_count;\n  }\n}\n\nexport const UnseenBadge: React.FC<UnseenBadgeProps> = ({\n  badgeCountType = \"unseen\",\n}) => {\n  const { useFeedStore } = useKnockFeed();\n  const badgeCountValue = useFeedStore((state) =>\n    selectBadgeCount(badgeCountType, state.metadata),\n  );\n\n  return badgeCountValue !== 0 ? (\n    <div className=\"rnf-unseen-badge\">\n      <span className=\"rnf-unseen-badge__count\">\n        {formatBadgeCount(badgeCountValue)}\n      </span>\n    </div>\n  ) : null;\n};\n"],"names":["selectBadgeCount","badgeCountType","metadata","total_count","unread_count","unseen_count","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","React","formatBadgeCount"],"mappings":"4OAYA,SAASA,EACPC,EACAC,EACA,CACA,OAAQD,EAAc,CACpB,IAAK,MACH,OAAOC,EAASC,YAClB,IAAK,SACH,OAAOD,EAASE,aAClB,IAAK,SACH,OAAOF,EAASG,YACpB,CACF,CAEO,MAAMC,EAA0CA,CAAC,CACtDL,eAAAA,EAAiB,QACnB,IAAM,CACE,KAAA,CAAEM,aAAAA,GAAiBC,EAAa,aAAA,EAChCC,EAAkBF,EAAcG,GACpCV,EAAiBC,EAAgBS,EAAMR,QAAQ,CACjD,EAEA,OAAOO,IAAoB,EACxBE,UAAA,cAAA,MAAA,CAAI,UAAU,oBACbA,EAAAA,QAAA,cAAC,OAAK,CAAA,UAAU,yBACbC,EAAAA,EAAAA,iBAAiBH,CAAe,CACnC,CACF,EACE,IACN"}

package/dist/cjs/modules/feed/components/UnseenBadge/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/cjs/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.js

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

package/dist/cjs/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlackAddChannelInput.js","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","t","useTranslations","value","setValue","useState","localError","setLocalError","submitChannel","channel","channelsToSendToKnock","jsxs","jsx","e","Spinner","SlackIcon","ConnectionErrorInfoBoxes"],"mappings":"wZAWA,MAAMA,EAAuB,CAAC,CAC5B,aAAAC,EACA,kBAAAC,EAAoB,CAAC,EACrB,wBAAAC,EACA,uBAAAC,EACA,0BAAAC,CACF,IAMM,CACE,KAAA,CAAE,EAAAC,GAAMC,EAAAA,kBACR,CAACC,EAAOC,CAAQ,EAAIC,WAAwB,IAAI,EAChD,CAACC,EAAYC,CAAa,EAAIF,WAAwB,IAAI,EAE1DG,EAAgB,IAAM,CAC1B,GAAI,CAACL,EACH,OAWF,GARIG,GACFC,EAAc,IAAI,EAGKV,EAAkB,KACxCY,GAAYA,EAAQ,aAAeN,CAAA,EAIpC,OAAAC,EAAS,EAAE,EACJG,EAAcN,EAAE,8BAA8B,GAAK,EAAE,EAG9D,MAAMS,EAAwB,CAAC,GAAGb,EAAmB,CAAE,WAAYM,EAAO,EAC1EL,EAAwBY,CAAqB,EAC7CN,EAAS,EAAE,CAAA,EAIX,OAAAO,EAAA,KAAC,MAAI,CAAA,UAAU,sBACb,SAAA,CAAAC,EAAA,IAAC,QAAA,CACC,UAAW,+BAA+BhB,GAAgB,CAAC,CAACU,IAAe,CAACH,GAAS,mCAAmC,GACxH,SAAU,GACV,GAAG,uBACH,KAAK,OACL,YACEG,GAAcP,GAA0BE,EAAE,gBAAgB,EAE5D,SAAWY,GAAMT,EAASS,EAAE,OAAO,KAAK,EACxC,MAAOV,GAAS,EAAA,CAClB,EACCQ,EAAA,KAAA,SAAA,CAAO,UAAU,8BAA8B,QAASH,EACtD,SAAA,CAAAR,EACEY,EAAA,IAAAE,EAAA,QAAA,CAAQ,KAAK,OAAO,UAAW,CAAA,CAAG,EAEnCF,EAAA,IAACG,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAO,EAEvCd,EAAE,qBAAqB,CAAA,EAC1B,QACCe,EAAyB,EAAA,CAC5B,CAAA,CAAA,CAEJ"}
+{"version":3,"file":"SlackAddChannelInput.js","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","t","useTranslations","value","setValue","useState","localError","setLocalError","submitChannel","find","channel","channel_id","channelsToSendToKnock","React","e","target","Spinner","SlackIcon","ConnectionErrorInfoBoxes"],"mappings":"8bAWMA,EAAuBA,CAAC,CAC5BC,aAAAA,EACAC,kBAAAA,EAAoB,CAAE,EACtBC,wBAAAA,EACAC,uBAAAA,EACAC,0BAAAA,CAOF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EACxB,CAACC,EAAOC,CAAQ,EAAIC,WAAwB,IAAI,EAChD,CAACC,EAAYC,CAAa,EAAIF,WAAwB,IAAI,EAE1DG,EAAgBA,IAAM,CAC1B,GAAI,CAACL,EACH,OAWF,GARIG,GACFC,EAAc,IAAI,EAGKV,EAAkBY,KAC5BC,GAAAA,EAAQC,aAAeR,CACtC,EAGEC,OAAAA,EAAS,EAAE,EACJG,EAAcN,EAAE,8BAA8B,GAAK,EAAE,EAGxDW,MAAAA,EAAwB,CAAC,GAAGf,EAAmB,CAAEc,WAAYR,CAAAA,CAAO,EAC1EL,EAAwBc,CAAqB,EAC7CR,EAAS,EAAE,CAAA,EAGb,OACGS,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,qBAAA,EACZA,EAAAA,QAAA,cAAA,QAAA,CACC,UAAY,+BAA8BjB,GAAgB,CAAC,CAACU,IAAe,CAACH,GAAS,mCAAoC,GACzH,SAAU,GACV,GAAG,uBACH,KAAK,OACL,YACEG,GAAcP,GAA0BE,EAAE,gBAAgB,EAE5D,SAAWa,GAAMV,EAASU,EAAEC,OAAOZ,KAAK,EACxC,MAAOA,GAAS,GAAG,EAEpBU,EAAA,QAAA,cAAA,SAAA,CAAO,UAAU,8BAA8B,QAASL,CAAAA,EACtDR,EACCa,EAAA,QAAA,cAACG,WAAQ,KAAK,OAAO,UAAW,CAAK,CAAA,EAErCH,EAAAA,QAAA,cAACI,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,MAChC,CAAA,EACAhB,EAAE,qBAAqB,CAC1B,EACAY,EAAAA,QAAA,cAACK,MAAwB,CAC3B,CAEJ"}

package/dist/cjs/modules/slack/components/SlackAddChannelInput/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/cjs/modules/slack/components/SlackAuthButton/SlackAuthButton.js

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

package/dist/cjs/modules/slack/components/SlackAuthButton/SlackAuthButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlackAuthButton.js","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  onAuthenticationComplete?: (authenticationResp: string) => void;\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  onAuthenticationComplete,\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\n        if (onAuthenticationComplete) {\n          onAuthenticationComplete(event.data);\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, onAuthenticationComplete, setConnectionStatus]);\n\n  const disconnectLabel = t(\"slackDisconnect\") || null;\n  const 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","onAuthenticationComplete","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","disconnectLabel","reconnectLabel","jsxs","jsx","SlackIcon"],"mappings":"iRAmBA,MAAMA,EAAuBC,GAAgB,CAIrC,MAAAC,EAAa,OAAO,YAAc,OAAO,QACzCC,EAAY,OAAO,WAAa,OAAO,QAEvCC,EACJ,OAAO,YAAc,SAAS,gBAAgB,aAAe,OAAO,MAChEC,EACJ,OAAO,aACP,SAAS,gBAAgB,cACzB,OAAO,OAEHC,EAAOF,EAAa,EAAI,IAAQ,EAAIF,EAIpCK,EAAW,4BAHLF,EAAc,EAAI,IAAS,EAAIF,CAGgB,SAASG,CAAI,GAEjE,OAAA,KAAKL,EAAK,cAAeM,CAAQ,CAC1C,EAEaC,EAAmC,CAAC,CAC/C,cAAAC,EACA,YAAAC,EACA,yBAAAC,CACF,IAAM,CACE,KAAA,CAAE,EAAAC,GAAMC,EAAAA,kBACRC,EAAQC,EAAAA,iBAER,CACJ,oBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,YAAAC,EACA,WAAAC,GACEC,EAAoB,oBAAA,EAElB,CAAE,kBAAAC,EAAmB,oBAAAC,CAAA,EAAwBC,EAAA,aACjDf,EACAC,CAAA,EAGFe,EAAAA,UAAU,IAAM,CACR,MAAAC,EAAkBC,GAAwB,CAC1C,GAAAA,EAAM,SAAWb,EAAM,KAIvB,GAAA,CACEa,EAAM,OAAS,gBACjBX,EAAoB,WAAW,EAG7BW,EAAM,OAAS,cACjBX,EAAoB,OAAO,EAGzBL,GACFA,EAAyBgB,EAAM,IAAI,OAEvB,CACdX,EAAoB,OAAO,CAC7B,CAAA,EAGK,cAAA,iBAAiB,UAAWU,EAAgB,EAAK,EAGjD,IAAM,CACJ,OAAA,oBAAoB,UAAWA,CAAc,CAAA,GAErD,CAACZ,EAAM,KAAMH,EAA0BK,CAAmB,CAAC,EAExD,MAAAY,EAAkBhB,EAAE,iBAAiB,GAAK,KAC1CiB,EAAiBjB,EAAE,gBAAgB,GAAK,KAI5C,OAAAK,IAAqB,cACrBA,IAAqB,gBAGnBa,EAAA,KAAC,MAAI,CAAA,UAAU,mDACb,SAAA,CAAAC,EAAA,IAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAO,EACtCD,EAAAA,IAAC,QACE,SACGnB,EADkBK,IAAA,aAChB,kBACA,oBADiB,CAEzB,CAAA,CACF,CAAA,CAAA,EAKAA,IAAqB,QAErBa,EAAA,KAAC,SAAA,CACC,QAAS,IAAM9B,EAAoBsB,GAAmB,EACtD,UAAU,iDACV,aAAc,IAAMJ,EAAeW,CAAc,EACjD,aAAc,IAAMX,EAAe,IAAI,EAEvC,SAAA,CAAAa,EAAA,IAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAO,EACtCD,EAAAA,IAAC,QAAK,UAAU,mCACb,YAAeX,GAAcR,EAAE,YAAY,EAC9C,CAAA,CAAA,CAAA,EAMFK,IAAqB,eAErBa,EAAA,KAAC,SAAA,CACC,QAAS,IAAM9B,EAAoBsB,GAAmB,EACtD,UAAU,wDAEV,SAAA,CAAAS,EAAA,IAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAO,EACrCD,EAAA,IAAA,OAAA,CAAM,SAAEnB,EAAA,cAAc,CAAE,CAAA,CAAA,CAAA,CAAA,EAO7BkB,EAAA,KAAC,SAAA,CACC,QAASP,EACT,UAAU,qDACV,aAAc,IAAML,EAAeU,CAAe,EAClD,aAAc,IAAMV,EAAe,IAAI,EAEvC,SAAA,CAAAa,EAAA,IAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAO,QACrC,OAAK,CAAA,UAAU,uCACb,SAAeb,GAAAP,EAAE,gBAAgB,EACpC,CAAA,CAAA,CAAA,CAGN"}
+{"version":3,"file":"SlackAuthButton.js","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  onAuthenticationComplete?: (authenticationResp: string) => void;\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  onAuthenticationComplete,\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\n        if (onAuthenticationComplete) {\n          onAuthenticationComplete(event.data);\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, onAuthenticationComplete, setConnectionStatus]);\n\n  const disconnectLabel = t(\"slackDisconnect\") || null;\n  const 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","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open","SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","origin","host","data","addEventListener","removeEventListener","disconnectLabel","reconnectLabel","React","SlackIcon"],"mappings":"uTAmBMA,EAAuBC,GAAgB,CAIrCC,MAAAA,EAAaC,OAAOD,YAAcC,OAAOC,QACzCC,EAAYF,OAAOE,WAAaF,OAAOG,QAEvCC,EACJJ,OAAOI,YAAcC,SAASC,gBAAgBC,aAAeC,OAAOC,MAChEC,EACJV,OAAOU,aACPL,SAASC,gBAAgBK,cACzBH,OAAOI,OAEHC,EAAOT,EAAa,EAAIK,IAAQ,EAAIV,EAIpCe,EAAY,4BAHNJ,EAAc,EAAIE,IAAS,EAAIV,CAGiB,SAAQW,CAAK,GAElEE,OAAAA,KAAKjB,EAAK,cAAegB,CAAQ,CAC1C,EAEaE,EAAmCA,CAAC,CAC/CC,cAAAA,EACAC,YAAAA,EACAC,yBAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EACxBC,EAAQC,EAAAA,iBAER,CACJC,oBAAAA,EACAC,iBAAAA,EACAC,eAAAA,EACAC,YAAAA,EACAC,WAAAA,GACEC,EAAoB,oBAAA,EAElB,CAAEC,kBAAAA,EAAmBC,oBAAAA,CAAAA,EAAwBC,EACjDf,aAAAA,EACAC,CACF,EAEAe,EAAAA,UAAU,IAAM,CACRC,MAAAA,EAAkBC,GAAwB,CAC1CA,GAAAA,EAAMC,SAAWd,EAAMe,KAIvB,GAAA,CACEF,EAAMG,OAAS,gBACjBd,EAAoB,WAAW,EAG7BW,EAAMG,OAAS,cACjBd,EAAoB,OAAO,EAGzBL,GACFA,EAAyBgB,EAAMG,IAAI,OAEvB,CACdd,EAAoB,OAAO,CAC7B,CAAA,EAGKe,cAAAA,iBAAiB,UAAWL,EAAgB,EAAK,EAGjD,IAAM,CACJM,OAAAA,oBAAoB,UAAWN,CAAc,CAAA,GAErD,CAACZ,EAAMe,KAAMlB,EAA0BK,CAAmB,CAAC,EAExDiB,MAAAA,EAAkBrB,EAAE,iBAAiB,GAAK,KAC1CsB,EAAiBtB,EAAE,gBAAgB,GAAK,KAI5CK,OAAAA,IAAqB,cACrBA,IAAqB,gBAGnBkB,EAAA,QAAA,cAAC,OAAI,UAAU,kDAAA,0BACZC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,MAAM,CAAA,EACpCD,EAAAA,QAAA,cAAA,OAAA,KAEKvB,EADHK,IAAqB,aAChB,kBACA,oBADiB,CAEzB,CACF,EAKAA,IAAqB,gCAEpB,SACC,CAAA,QAAS,IAAM5B,EAAoBiC,GAAmB,EACtD,UAAU,iDACV,aAAc,IAAMJ,EAAegB,CAAc,EACjD,aAAc,IAAMhB,EAAe,IAAI,CAAA,0BAEtCkB,EAAAA,UAAU,CAAA,OAAO,OAAO,MAAM,OAAM,EACrCD,UAAA,cAAC,OAAK,CAAA,UAAU,oCACbhB,GAAeC,GAAcR,EAAE,YAAY,CAC9C,CACF,EAKAK,IAAqB,eAErBkB,EAAA,QAAA,cAAC,UACC,QAAS,IAAM9C,EAAoBiC,EAAkB,CAAC,EACtD,UAAU,uDAEV,EAAAa,EAAA,QAAA,cAACC,aAAU,OAAO,OAAO,MAAM,MAAM,CAAA,0BACpC,OAAMxB,KAAAA,EAAE,cAAc,CAAE,CAC3B,EAMDuB,EAAAA,QAAA,cAAA,SAAA,CACC,QAASZ,EACT,UAAU,qDACV,aAAc,IAAML,EAAee,CAAe,EAClD,aAAc,IAAMf,EAAe,IAAI,CAEvC,EAAAiB,EAAA,QAAA,cAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAM,EACrCD,UAAA,cAAC,OAAK,CAAA,UAAU,sCACbhB,EAAAA,GAAeP,EAAE,gBAAgB,CACpC,CACF,CAEJ"}

package/dist/cjs/modules/slack/components/SlackAuthButton/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/cjs/modules/slack/components/SlackAuthContainer/SlackAuthContainer.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@knocklabs/react-core");const i=require("../SlackIcon/SlackIcon.js");const c=({actionButton:r})=>{const{t:s}=t.useTranslations();return e.jsxs("div",{className:"rsk-auth",children:[e.jsxs("div",{className:"rsk-auth__header",children:[e.jsx(i.SlackIcon,{height:"32px",width:"32px"}),e.jsx("div",{children:r})]}),e.jsx("div",{className:"rsk-auth__title",children:"Slack"}),e.jsx("div",{className:"rsk-auth__description",children:s("slackConnectContainerDescription")})]})};exports.SlackAuthContainer=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),c=require("@knocklabs/react-core");const l=require("../SlackIcon/SlackIcon.js");const n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(r),s=({actionButton:e})=>{const{t:a}=c.useTranslations();return t.default.createElement("div",{className:"rsk-auth"},t.default.createElement("div",{className:"rsk-auth__header"},t.default.createElement(l.SlackIcon,{height:"32px",width:"32px"}),t.default.createElement("div",null,e)),t.default.createElement("div",{className:"rsk-auth__title"},"Slack"),t.default.createElement("div",{className:"rsk-auth__description"},a("slackConnectContainerDescription")))};exports.SlackAuthContainer=s;
 //# sourceMappingURL=SlackAuthContainer.js.map

package/dist/cjs/modules/slack/components/SlackAuthContainer/SlackAuthContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlackAuthContainer.js","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":"8PAOO,MAAMA,EAAqB,CAAC,CACjC,aAAAC,CACF,IAEM,CACE,KAAA,CAAE,EAAAC,GAAMC,EAAAA,kBAGZ,OAAAC,EAAA,KAAC,MAAI,CAAA,UAAU,WACb,SAAA,CAACA,EAAAA,KAAA,MAAA,CAAI,UAAU,mBACb,SAAA,CAAAC,EAAA,IAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAO,EACtCD,EAAAA,IAAC,OAAK,SAAaJ,CAAA,CAAA,CAAA,EACrB,EACCI,EAAA,IAAA,MAAA,CAAI,UAAU,kBAAkB,SAAK,QAAA,QACrC,MAAI,CAAA,UAAU,wBACZ,SAAAH,EAAE,kCAAkC,EACvC,CACF,CAAA,CAAA,CAEJ"}
+{"version":3,"file":"SlackAuthContainer.js","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","React","SlackIcon"],"mappings":"uTAOaA,EAAqBA,CAAC,CACjCC,aAAAA,CAGF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EAE9B,OACGC,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,oCACZ,MAAI,CAAA,UAAU,kBACb,EAAAA,UAAA,cAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAM,EACrCD,EAAAA,QAAA,cAAC,MAAKH,KAAAA,CAAa,CACrB,EACCG,UAAA,cAAA,MAAA,CAAI,UAAU,iBAAkB,EAAA,OAAK,EACtCA,EAAA,QAAA,cAAC,OAAI,UAAU,uBAAA,EACZF,EAAE,kCAAkC,CACvC,CACF,CAEJ"}

package/dist/cjs/modules/slack/components/SlackAuthContainer/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js

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

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlackChannelCombobox.js","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\";\n\nimport { Spinner, useOutsideClick } from \"../../../core\";\nimport \"../../theme.css\";\nimport SlackAddChannelInput from \"../SlackAddChannelInput/SlackAddChannelInput\";\n\nimport SlackChannelListBox from \"./SlackChannelListBox\";\nimport SlackConnectedChannelTagList from \"./SlackConnectedChannelTagList\";\nimport SlackConnectionError from \"./SlackConnectionError\";\nimport { strContains } from \"./helpers\";\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  showConnectedChannelTags?: boolean;\n};\n\nexport const SlackChannelCombobox = ({\n  slackChannelsRecipientObject,\n  queryOptions,\n  inputProps,\n  inputContainerProps,\n  listBoxProps,\n  channelOptionProps,\n  inputMessages,\n  showConnectedChannelTags = false,\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 matchedChannels = slackChannels.filter((slackChannel) =>\n    strContains(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      {showConnectedChannelTags && (\n        <SlackConnectedChannelTagList\n          connectedChannels={currentConnectedChannels}\n          slackChannels={slackChannels}\n          updateConnectedChannels={handleOptionClick}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["MAX_ALLOWED_CHANNELS","SlackChannelCombobox","slackChannelsRecipientObject","queryOptions","inputProps","inputContainerProps","listBoxProps","channelOptionProps","inputMessages","showConnectedChannelTags","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","matchedChannels","strContains","jsx","SlackAddChannelInput","jsxs","Popover","VisuallyHidden","Spinner","SearchIcon","SlackConnectionError","SlackChannelListBox","SlackConnectedChannelTagList"],"mappings":"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"}
+{"version":3,"file":"SlackChannelCombobox.js","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\";\n\nimport { Spinner, useOutsideClick } from \"../../../core\";\nimport \"../../theme.css\";\nimport SlackAddChannelInput from \"../SlackAddChannelInput/SlackAddChannelInput\";\n\nimport SlackChannelListBox from \"./SlackChannelListBox\";\nimport SlackConnectedChannelTagList from \"./SlackConnectedChannelTagList\";\nimport SlackConnectionError from \"./SlackConnectionError\";\nimport { strContains } from \"./helpers\";\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  showConnectedChannelTags?: boolean;\n};\n\nexport const SlackChannelCombobox = ({\n  slackChannelsRecipientObject,\n  queryOptions,\n  inputProps,\n  inputContainerProps,\n  listBoxProps,\n  channelOptionProps,\n  inputMessages,\n  showConnectedChannelTags = false,\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 matchedChannels = slackChannels.filter((slackChannel) =>\n    strContains(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      {showConnectedChannelTags && (\n        <SlackConnectedChannelTagList\n          connectedChannels={currentConnectedChannels}\n          slackChannels={slackChannels}\n          updateConnectedChannels={handleOptionClick}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["MAX_ALLOWED_CHANNELS","SlackChannelCombobox","slackChannelsRecipientObject","queryOptions","inputProps","inputContainerProps","listBoxProps","channelOptionProps","inputMessages","showConnectedChannelTags","t","useTranslations","comboboxListOpen","setComboboxListOpen","useState","inputValue","setInputValue","comboboxRef","useRef","useOutsideClick","ref","fn","connectionStatus","errorLabel","connectionErrorLabel","useKnockSlackClient","data","slackChannels","isLoading","slackChannelsLoading","useSlackChannels","connectedChannels","updateConnectedChannels","loading","connectedChannelsLoading","error","connectedChannelsError","updating","connectedChannelsUpdating","useConnectedSlackChannels","currentConnectedChannels","setCurrentConnectedChannels","useEffect","setTimeout","getElementById","focus","slackChannelsMap","Map","map","channel","id","channels","filter","connectedChannel","has","channel_id","inErrorState","useMemo","inLoadingState","searchPlaceholder","DEFAULT_INPUT_MESSAGES","disconnected","multipleChannelsConnected","noChannelsConnected","noSlackChannelsFound","channelsError","length","numberConnectedChannels","find","slackChannel","singleChannelConnected","name","handleOptionClick","channelId","channelsToSendToKnock","matchedChannels","strContains","React","SlackAddChannelInput","Popover","VisuallyHidden","Spinner","SearchIcon","e","target","value","SlackConnectionError","SlackChannelListBox","SlackConnectedChannelTagList"],"mappings":"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"}

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("react/jsx-runtime");const m=require("./SlackChannelOption.js");const q=({slackChannels:t,isLoading:u,connectedChannels:i,onClick:x,listBoxProps:e,channelOptionProps:o,isUpdating:b})=>s.jsx("div",{className:"rsk-combobox__list-box",...e,children:t.map(r=>s.jsx(m,{tabIndex:0,channel:r,isLoading:u,isConnected:!!(i!=null&&i.find(d=>d.channel_id===r.id)),onClick:x,channelOptionProps:o,isUpdating:b},r.id))});module.exports=q;
+"use strict";const f=require("react");const c=require("./SlackChannelOption.js");const m=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=m(f),p=({slackChannels:t,isLoading:a,connectedChannels:e,onClick:o,listBoxProps:u,channelOptionProps:s,isUpdating:l})=>i.default.createElement("div",{className:"rsk-combobox__list-box",...u},t.map(r=>i.default.createElement(c,{key:r.id,tabIndex:0,channel:r,isLoading:a,isConnected:!!(e!=null&&e.find(d=>d.channel_id===r.id)),onClick:o,channelOptionProps:s,isUpdating:l})));module.exports=p;
 //# sourceMappingURL=SlackChannelListBox.js.map

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlackChannelListBox.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.tsx"],"sourcesContent":["import { SlackChannel, SlackChannelConnection } from \"@knocklabs/client\";\n\nimport \"../../theme.css\";\n\nimport SlackChannelOption from \"./SlackChannelOption\";\nimport \"./styles.css\";\n\ntype Props = {\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":"sJAiBA,MAAMA,EAAsB,CAAC,CAC3B,cAAAC,EACA,UAAAC,EACA,kBAAAC,EACA,QAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,WAAAC,CACF,IAEIC,MAAC,OAAI,UAAU,yBAA0B,GAAGH,EACzC,SAAAJ,EAAc,IAAKQ,GAEhBD,EAAA,IAACE,EAAA,CAEC,SAAU,EACV,QAAAD,EACA,UAAAP,EACA,YACE,CAAC,EAACC,GAAA,MAAAA,EAAmB,KAClBQ,GACCA,EAAiB,aAAeF,EAAQ,KAG9C,QAAAL,EACA,mBAAAE,EACA,WAAAC,CAAA,EAZKE,EAAQ,EAAA,CAelB,CACH,CAAA"}
+{"version":3,"file":"SlackChannelListBox.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelListBox.tsx"],"sourcesContent":["import { SlackChannel, SlackChannelConnection } from \"@knocklabs/client\";\n\nimport \"../../theme.css\";\n\nimport SlackChannelOption from \"./SlackChannelOption\";\nimport \"./styles.css\";\n\ntype Props = {\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","React","map","channel","SlackChannelOption","id","find","connectedChannel","channel_id"],"mappings":"+MAiBMA,EAAsBA,CAAC,CAC3BC,cAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,mBAAAA,EACAC,WAAAA,CACK,IAEHC,UAAA,cAAC,OAAI,UAAU,yBAA6BH,GAAAA,GACzCJ,EAAcQ,IAAiBC,GAE5BF,UAAA,cAACG,GACC,IAAKD,EAAQE,GACb,SAAU,EACV,QAAAF,EACA,UAAAR,EACA,YACE,CAAC,EAACC,GAAAA,MAAAA,EAAmBU,QAEjBC,EAAiBC,aAAeL,EAAQE,KAG9C,QAAAR,EACA,mBAAAE,EACA,WAAAC,CACA,CAAA,CAEL,CACH"}

package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelOption.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),n=require("react");require("@knocklabs/react-core");const k=require("../../../core/components/Spinner/Spinner.js");require("lodash.debounce");const j=require("./icons/CheckmarkIcon.js"),q=require("./icons/HashtagIcon.js"),p=require("./icons/LockIcon.js");const v=({channel:o,isLoading:t,isConnected:c,onClick:x,tabIndex:a,channelOptionProps:l,isUpdating:r})=>{const[m,i]=n.useState(!1),[s,_]=n.useState(null),b=()=>s===o.id&&(r||t)?e.jsx(k.Spinner,{thickness:3}):m||c?e.jsx(j,{isConnected:c}):e.jsx("div",{className:"rsk-combobox__option__text-container__empty-icon"}),d=u=>{_(u),x(u)};return n.useEffect(()=>{if(s&&!r)return _(null)},[t,r,s]),e.jsx("button",{className:"rsk-combobox__option__button",onClick:()=>!t&&d(o.id),disabled:t||r,onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),tabIndex:a,...l,children:e.jsxs("div",{className:"rsk-combobox__option__text-container",children:[e.jsx("div",{className:"rsk-combobox__option__text-container__connection-icon",children:b()}),e.jsx("div",{className:"rsk-combobox__option__text-container__channel-icon",children:o.is_private?e.jsx(p,{}):e.jsx(q,{})}),e.jsx("div",{className:"rsk-combobox__option__text-container__text",children:o.name})]})},o.id)};module.exports=v;
+"use strict";const n=require("react");require("@knocklabs/react-core");const k=require("../../../core/components/Spinner/Spinner.js");require("lodash.debounce");const p=require("./icons/CheckmarkIcon.js"),x=require("./icons/HashtagIcon.js"),E=require("./icons/LockIcon.js");const q=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=q(n),v=({channel:e,isLoading:o,isConnected:a,onClick:i,tabIndex:_,channelOptionProps:m,isUpdating:r})=>{const[d,u]=n.useState(!1),[c,s]=n.useState(null),f=()=>c===e.id&&(r||o)?t.default.createElement(k.Spinner,{thickness:3}):d||a?t.default.createElement(p,{isConnected:a}):t.default.createElement("div",{className:"rsk-combobox__option__text-container__empty-icon"}),b=l=>{s(l),i(l)};return n.useEffect(()=>{if(c&&!r)return s(null)},[o,r,c]),t.default.createElement("button",{key:e.id,className:"rsk-combobox__option__button",onClick:()=>!o&&b(e.id),disabled:o||r,onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),tabIndex:_,...m},t.default.createElement("div",{className:"rsk-combobox__option__text-container"},t.default.createElement("div",{className:"rsk-combobox__option__text-container__connection-icon"},f()),t.default.createElement("div",{className:"rsk-combobox__option__text-container__channel-icon"},e.is_private?t.default.createElement(E,null):t.default.createElement(x,null)),t.default.createElement("div",{className:"rsk-combobox__option__text-container__text"},e.name)))};module.exports=v;
 //# sourceMappingURL=SlackChannelOption.js.map