@knocklabs/react 0.12.1 → 0.13.0

package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs

@@ -1,69 +1,79 @@
-import { isRequestInFlight as C, NetworkStatus as f } from "@knocklabs/client";
-import { FilterStatus as I, useKnockFeed as B, useFeedSettings as q, useTranslations as x } from "@knocklabs/react-core";
-import e, { useState as K, useRef as H, useEffect as _, useCallback as M } from "react";
-import { Spinner as P } from "../../../core/components/Spinner/Spinner.mjs";
-import z from "../../../core/hooks/useOnBottomScroll.mjs";
-import { EmptyFeed as A } from "../EmptyFeed/EmptyFeed.mjs";
-import { NotificationCell as O } from "../NotificationCell/NotificationCell.mjs";
-/* empty css                              */
-import { NotificationFeedHeader as T } from "./NotificationFeedHeader.mjs";
-/* empty css            */
-const U = (t) => /* @__PURE__ */ e.createElement(O, { key: t.item.id, ...t }), $ = (t) => /* @__PURE__ */ e.createElement(T, { ...t }), j = ({
-  colorMode: t
-}) => /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__spinner-container" }, /* @__PURE__ */ e.createElement(P, { thickness: 3, size: "16px", color: t === "dark" ? "rgba(255, 255, 255, 0.65)" : void 0 })), D = "https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed", te = ({
-  EmptyComponent: t = /* @__PURE__ */ e.createElement(A, null),
-  renderItem: g = U,
-  onNotificationClick: E,
-  onNotificationButtonClick: b,
-  onMarkAllAsReadClick: N,
-  initialFilterStatus: r = I.All,
-  header: h,
-  renderHeader: S = $,
-  renderLoading: m = j
-}) => {
-  var p;
-  const [a, l] = K(r), {
-    feedClient: n,
-    useFeedStore: F,
-    colorMode: c
-  } = B(), {
-    settings: i
-  } = q(n), {
-    t: R
-  } = x(), {
-    pageInfo: d,
-    items: u,
-    networkStatus: o
-  } = F(), k = H(null);
-  _(() => {
-    l(r);
-  }, [r]), _(() => {
-    n.fetch({
-      status: a
-    });
-  }, [n, a]);
-  const v = u.length === 0, s = C(o), w = M(() => {
-    !s && d.after && n.fetchNextPage();
-  }, [s, d, n]);
-  return z({
-    ref: k,
-    callback: w,
-    offset: 70
-  }), /* @__PURE__ */ e.createElement("div", { className: `rnf-notification-feed rnf-notification-feed--${c}` }, h || S({
-    setFilterStatus: l,
-    filterStatus: a,
-    onMarkAllAsReadClick: N
-  }), /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__container", ref: k }, o === f.loading && m({
-    colorMode: c
-  }), /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__feed-items-container" }, o !== f.loading && u.map((y) => g({
-    item: y,
-    onItemClick: E,
-    onButtonClick: b
-  }))), o === f.fetchMore && m({
-    colorMode: c
-  }), !s && v && t), ((p = i == null ? void 0 : i.features) == null ? void 0 : p.branding_required) && /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__knock-branding" }, /* @__PURE__ */ e.createElement("a", { href: D, target: "_blank" }, R("poweredBy") || "Powered by Knock")));
+import { Spinner as e } from "../../../core/components/Spinner/Spinner.mjs";
+import "../../../core/components/Spinner/index.mjs";
+import t from "../../../core/hooks/useOnBottomScroll.mjs";
+import { EmptyFeed as n } from "../EmptyFeed/EmptyFeed.mjs";
+import "../EmptyFeed/index.mjs";
+import { NotificationCell as r } from "../NotificationCell/NotificationCell.mjs";
+import "../NotificationCell/index.mjs";
+/* empty css        */
+import { NotificationFeedHeader as i } from "./NotificationFeedHeader.mjs";
+import { FilterStatus as a, useFeedSettings as o, useKnockFeed as s, useTranslations as c } from "@knocklabs/react-core";
+import { useCallback as l, useEffect as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { NetworkStatus as h, isRequestInFlight as g } from "@knocklabs/client";
+//#region src/modules/feed/components/NotificationFeed/NotificationFeed.tsx
+var _ = (e) => /* @__PURE__ */ p(r, { ...e }, e.item.id), v = (e) => /* @__PURE__ */ p(i, { ...e }), y = ({ colorMode: t }) => /* @__PURE__ */ p("div", {
+	className: "rnf-notification-feed__spinner-container",
+	children: /* @__PURE__ */ p(e, {
+		thickness: 3,
+		size: "16px",
+		color: t === "dark" ? "rgba(255, 255, 255, 0.65)" : void 0
+	})
+}), b = "https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed", x = ({ EmptyComponent: e = /* @__PURE__ */ p(n, {}), renderItem: r = _, onNotificationClick: i, onNotificationButtonClick: x, onMarkAllAsReadClick: S, initialFilterStatus: C = a.All, header: w, renderHeader: T = v, renderLoading: E = y }) => {
+	let [D, O] = f(C), { feedClient: k, useFeedStore: A, colorMode: j } = s(), { settings: M } = o(k), { t: N } = c(), { pageInfo: P, items: F, networkStatus: I } = A(), L = d(null);
+	u(() => {
+		O(C);
+	}, [C]), u(() => {
+		k.fetch({ status: D });
+	}, [k, D]);
+	let R = F.length === 0, z = g(I);
+	return t({
+		ref: L,
+		callback: l(() => {
+			!z && P.after && k.fetchNextPage();
+		}, [
+			z,
+			P,
+			k
+		]),
+		offset: 70
+	}), /* @__PURE__ */ m("div", {
+		className: `rnf-notification-feed rnf-notification-feed--${j}`,
+		children: [
+			w || T({
+				setFilterStatus: O,
+				filterStatus: D,
+				onMarkAllAsReadClick: S
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "rnf-notification-feed__container",
+				ref: L,
+				children: [
+					I === h.loading && E({ colorMode: j }),
+					/* @__PURE__ */ p("div", {
+						className: "rnf-notification-feed__feed-items-container",
+						children: I !== h.loading && F.map((e) => r({
+							item: e,
+							onItemClick: i,
+							onButtonClick: x
+						}))
+					}),
+					I === h.fetchMore && E({ colorMode: j }),
+					!z && R && e
+				]
+			}),
+			M?.features?.branding_required && /* @__PURE__ */ p("div", {
+				className: "rnf-notification-feed__knock-branding",
+				children: /* @__PURE__ */ p("a", {
+					href: b,
+					target: "_blank",
+					children: N("poweredBy") || "Powered by Knock"
+				})
+			})
+		]
+	});
 };
-export {
-  te as NotificationFeed
-};
-//# sourceMappingURL=NotificationFeed.mjs.map
+//#endregion
+export { x as NotificationFeed };
+
+//# sourceMappingURL=NotificationFeed.mjs.map

package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeed.mjs","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 { GenericData } from \"@knocklabs/types\";\nimport React, {\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 = GenericData> = {\n  item: FeedItem<T>;\n  onItemClick?: NotificationCellProps[\"onItemClick\"];\n  onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport type RenderLoadingProps = {\n  colorMode: ColorMode;\n};\n\nexport type RenderLoading = (props: RenderLoadingProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n  EmptyComponent?: ReactNode;\n  /**\n   * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n   */\n  header?: ReactNode;\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  renderLoading?: RenderLoading;\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 defaultRenderLoading = ({ colorMode }: RenderLoadingProps) => (\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  renderLoading = defaultRenderLoading,\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          renderLoading({ colorMode })}\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          renderLoading({ colorMode })}\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\") || \"Powered by Knock\"}\n          </a>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","defaultRenderLoading","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","renderLoading","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":";;;;;;;;;;AAyDA,MAAMA,IAAoBA,CAACC,MACxBC,gBAAAA,EAAA,cAAAC,GAAA,EAAiB,KAAKF,EAAMG,KAAKC,IAAI,GAAIJ,EAC3C,CAAA,GAEKK,IAAsBA,CAACL,MAC1BC,gBAAAA,EAAA,cAAAK,GAAA,EAA2BN,GAAAA,GAC7B,GAEKO,IAAuBA,CAAC;AAAA,EAAEC,WAAAA;AAA8B,MAC3DP,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,2CAAA,mCACZQ,GACC,EAAA,WAAW,GACX,MAAK,QACL,OAAOD,MAAc,SAAS,8BAA8BE,QAAU,CAE1E,GAGIC,IACJ,sGAEWC,KAAoDA,CAAC;AAAA,EAChEC,gBAAAA,oCAAkBC,GAAY,IAAA;AAAA,EAC9BC,YAAAA,IAAahB;AAAAA,EACbiB,qBAAAA;AAAAA,EACAC,2BAAAA;AAAAA,EACAC,sBAAAA;AAAAA,EACAC,qBAAAA,IAAsBC,EAAaC;AAAAA,EACnCC,QAAAA;AAAAA,EACAC,cAAAA,IAAelB;AAAAA,EACfmB,eAAAA,IAAgBjB;AAClB,MAAM;;AACJ,QAAM,CAACkB,GAAQC,CAAS,IAAIC,EAASR,CAAmB,GAClD;AAAA,IAAES,YAAAA;AAAAA,IAAYC,cAAAA;AAAAA,IAAcrB,WAAAA;AAAAA,MAAcsB,EAAa,GACvD;AAAA,IAAEC,UAAAA;AAAAA,EAAAA,IAAaC,EAAgBJ,CAAU,GACzC;AAAA,IAAEK,GAAAA;AAAAA,MAAMC,EAAgB,GAExB;AAAA,IAAEC,UAAAA;AAAAA,IAAUC,OAAAA;AAAAA,IAAOC,eAAAA;AAAAA,MAAkBR,EAAa,GAClDS,IAAeC,EAAuB,IAAI;AAEhDC,EAAAA,EAAU,MAAM;AACdd,IAAAA,EAAUP,CAAmB;AAAA,EAAA,GAC5B,CAACA,CAAmB,CAAC,GAExBqB,EAAU,MAAM;AAEdZ,IAAAA,EAAWa,MAAM;AAAA,MAAEhB,QAAAA;AAAAA,IAAAA,CAAQ;AAAA,EAAA,GAC1B,CAACG,GAAYH,CAAM,CAAC;AAEjBiB,QAAAA,IAAUN,EAAMO,WAAW,GAC3BC,IAAkBC,EAAkBR,CAAa,GAGjDS,IAAmBC,EAAY,MAAM;AACrC,IAAA,CAACH,KAAmBT,EAASa,SAC/BpB,EAAWqB,cAAc;AAAA,EAE1B,GAAA,CAACL,GAAiBT,GAAUP,CAAU,CAAC;AAIxB,SAAAsB,EAAA;AAAA,IAChBC,KAAKb;AAAAA,IACLc,UAAUN;AAAAA,IACVO,QAAQ;AAAA,EAAA,CACT,mCAGE,OACC,EAAA,WAAW,gDAAgD7C,CAAS,MAEnEc,KACCC,EAAa;AAAA,IACX+B,iBAAiB5B;AAAAA,IACjB6B,cAAc9B;AAAAA,IACdP,sBAAAA;AAAAA,EACD,CAAA,GAEHjB,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,oCAAmC,KAAKqC,EACpDD,GAAAA,MAAkBmB,EAAcC,WAC/BjC,EAAc;AAAA,IAAEhB,WAAAA;AAAAA,EAAAA,CAAW,GAE5BP,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,8CAAA,GACZoC,MAAkBmB,EAAcC,WAC/BrB,EAAMsB,IAAI,CAACvD,MACTY,EAAW;AAAA,IACTZ,MAAAA;AAAAA,IACAwD,aAAa3C;AAAAA,IACb4C,eAAe3C;AAAAA,EAChB,CAAA,CACH,CACJ,GAECoB,MAAkBmB,EAAcK,aAC/BrC,EAAc;AAAA,IAAEhB,WAAAA;AAAAA,EAAW,CAAA,GAE5B,CAACoC,KAAmBF,KAAW7B,CAClC,KAECkB,IAAAA,KAAAA,gBAAAA,EAAU+B,aAAV/B,gBAAAA,EAAoBgC,sBAClB9D,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,2CACbA,gBAAAA,EAAA,cAAC,KAAE,EAAA,MAAMU,GAAmB,QAAO,SAChCsB,GAAAA,EAAE,WAAW,KAAK,kBACrB,CACF,CAEJ;AAEJ;"}
+{"version":3,"file":"NotificationFeed.mjs","names":[],"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 { GenericData } from \"@knocklabs/types\";\nimport React, {\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 = GenericData> = {\n  item: FeedItem<T>;\n  onItemClick?: NotificationCellProps[\"onItemClick\"];\n  onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport type RenderLoadingProps = {\n  colorMode: ColorMode;\n};\n\nexport type RenderLoading = (props: RenderLoadingProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n  EmptyComponent?: ReactNode;\n  /**\n   * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n   */\n  header?: ReactNode;\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  renderLoading?: RenderLoading;\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 defaultRenderLoading = ({ colorMode }: RenderLoadingProps) => (\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  renderLoading = defaultRenderLoading,\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          renderLoading({ colorMode })}\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          renderLoading({ colorMode })}\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\") || \"Powered by Knock\"}\n          </a>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAyDA,IAAM,KAAqB,MACzB,kBAAC,GAAD,EAAsC,GAAI,EAAQ,GAA3B,EAAM,KAAK,EAAgB,GAG9C,KAAuB,MAC3B,kBAAC,GAAD,EAAwB,GAAI,EAAQ,CAAA,GAGhC,KAAwB,EAAE,mBAC9B,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,GAAD;EACE,WAAW;EACX,MAAK;EACL,OAAO,MAAc,SAAS,8BAA8B,KAAA;CAC7D,CAAA;AACE,CAAA,GAGD,IACJ,sGAEW,KAAqD,EAChE,oBAAiB,kBAAC,GAAD,CAAY,CAAA,GAC7B,gBAAa,GACb,wBACA,8BACA,yBACA,yBAAsB,EAAa,KACnC,WACA,kBAAe,GACf,mBAAgB,QACZ;CACJ,IAAM,CAAC,GAAQ,KAAa,EAAS,CAAmB,GAClD,EAAE,eAAY,iBAAc,iBAAc,EAAa,GACvD,EAAE,gBAAa,EAAgB,CAAU,GACzC,EAAE,SAAM,EAAgB,GAExB,EAAE,aAAU,UAAO,qBAAkB,EAAa,GAClD,IAAe,EAAuB,IAAI;CAMhD,AAJA,QAAgB;EACd,EAAU,CAAmB;CAC/B,GAAG,CAAC,CAAmB,CAAC,GAExB,QAAgB;EAEd,EAAW,MAAM,EAAE,UAAO,CAAC;CAC7B,GAAG,CAAC,GAAY,CAAM,CAAC;CAEvB,IAAM,IAAU,EAAM,WAAW,GAC3B,IAAkB,EAAkB,CAAa;CAiBvD,OANA,EAAkB;EAChB,KAAK;EACL,UAVuB,QAAkB;GACzC,AAAI,CAAC,KAAmB,EAAS,SAC/B,EAAW,cAAc;EAE7B,GAAG;GAAC;GAAiB;GAAU;EAAU,CAM7B;EACV,QAAQ;CACV,CAAC,GAGC,kBAAC,OAAD;EACE,WAAW,gDAAgD;YAD7D;GAGG,KACC,EAAa;IACX,iBAAiB;IACjB,cAAc;IACd;GACF,CAAC;GAEH,kBAAC,OAAD;IAAK,WAAU;IAAmC,KAAK;cAAvD;KACG,MAAkB,EAAc,WAC/B,EAAc,EAAE,aAAU,CAAC;KAE7B,kBAAC,OAAD;MAAK,WAAU;gBACZ,MAAkB,EAAc,WAC/B,EAAM,KAAK,MACT,EAAW;OACT;OACA,aAAa;OACb,eAAe;MACjB,CAAC,CACH;KACC,CAAA;KAEJ,MAAkB,EAAc,aAC/B,EAAc,EAAE,aAAU,CAAC;KAE5B,CAAC,KAAmB,KAAW;IAC7B;;GAEJ,GAAU,UAAU,qBACnB,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,KAAD;KAAG,MAAM;KAAmB,QAAO;eAChC,EAAE,WAAW,KAAK;IAClB,CAAA;GACA,CAAA;EAEJ;;AAET"}

package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs

@@ -1,18 +1,34 @@
-import { FilterStatus as a, useTranslations as c } from "@knocklabs/react-core";
-import e from "react";
-import { Dropdown as l } from "./Dropdown.mjs";
-import { MarkAsRead as m } from "./MarkAsRead.mjs";
-const s = [a.All, a.Unread, a.Read], u = ({
-  onMarkAllAsReadClick: r,
-  filterStatus: o,
-  setFilterStatus: i
-}) => {
-  const {
-    t: n
-  } = c();
-  return /* @__PURE__ */ e.createElement("header", { className: "rnf-notification-feed__header" }, /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__selector" }, /* @__PURE__ */ e.createElement("span", { className: "rnf-notification-feed__type" }, n("notifications")), /* @__PURE__ */ e.createElement(l, { value: o, onChange: (t) => i(t.target.value) }, s.map((t) => /* @__PURE__ */ e.createElement("option", { key: t, value: t }, n(t))))), /* @__PURE__ */ e.createElement(m, { onClick: r }));
+import { Dropdown as e } from "./Dropdown.mjs";
+import { MarkAsRead as t } from "./MarkAsRead.mjs";
+import { FilterStatus as n, useTranslations as r } from "@knocklabs/react-core";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx
+var o = [
+	n.All,
+	n.Unread,
+	n.Read
+], s = ({ onMarkAllAsReadClick: n, filterStatus: s, setFilterStatus: c }) => {
+	let { t: l } = r();
+	return /* @__PURE__ */ a("header", {
+		className: "rnf-notification-feed__header",
+		children: [/* @__PURE__ */ a("div", {
+			className: "rnf-notification-feed__selector",
+			children: [/* @__PURE__ */ i("span", {
+				className: "rnf-notification-feed__type",
+				children: l("notifications")
+			}), /* @__PURE__ */ i(e, {
+				value: s,
+				onChange: (e) => c(e.target.value),
+				children: o.map((e) => /* @__PURE__ */ i("option", {
+					value: e,
+					children: l(e)
+				}, e))
+			})]
+		}), /* @__PURE__ */ i(t, { onClick: n })]
+	});
 };
-export {
-  u as NotificationFeedHeader
-};
-//# sourceMappingURL=NotificationFeedHeader.mjs.map
+//#endregion
+export { s as NotificationFeedHeader };
+
+//# sourceMappingURL=NotificationFeedHeader.mjs.map

package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeedHeader.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport React, { SetStateAction } from \"react\";\n\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 as FilterStatus)}\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":";;;;AAaA,MAAMA,IAAwB,CAC5BC,EAAaC,KACbD,EAAaE,QACbF,EAAaG,IAAI,GAGNC,IAAgEA,CAAC;AAAA,EAC5EC,sBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,iBAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB;AAG5B,SAAAC,gBAAAA,EAAA,cAAC,YAAO,WAAU,gCAAA,mCACf,OAAI,EAAA,WAAU,kCACb,GAAAA,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,iCACbF,EAAE,eAAe,CACpB,GACAE,gBAAAA,EAAA,cAACC,KACC,OAAOL,GACP,UAAWM,CAAAA,MAAML,EAAgBK,EAAEC,OAAOC,KAAqB,EAAA,GAE9Df,EAAsBgB,IAAKT,CAAAA,MACzBI,gBAAAA,EAAA,cAAA,UAAA,EAAO,KAAKJ,GAAc,OAAOA,EAAAA,GAC/BE,EAAEF,CAAY,CACjB,CACD,CACH,CACF,GACCI,gBAAAA,EAAA,cAAAM,GAAA,EAAW,SAASX,EAAqB,CAAA,CAC5C;AAEJ;"}
+{"version":3,"file":"NotificationFeedHeader.mjs","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport React, { SetStateAction } from \"react\";\n\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 as FilterStatus)}\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"],"mappings":";;;;;;AAaA,IAAM,IAAwB;CAC5B,EAAa;CACb,EAAa;CACb,EAAa;AACf,GAEa,KAAiE,EAC5E,yBACA,iBACA,yBACI;CACJ,IAAM,EAAE,SAAM,EAAgB;CAE9B,OACE,kBAAC,UAAD;EAAQ,WAAU;YAAlB,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAE,eAAe;GACd,CAAA,GACN,kBAAC,GAAD;IACE,OAAO;IACP,WAAW,MAAM,EAAgB,EAAE,OAAO,KAAqB;cAE9D,EAAsB,KAAK,MAC1B,kBAAC,UAAD;KAA2B,OAAO;eAC/B,EAAE,CAAY;IACT,GAFK,CAEL,CACT;GACO,CAAA,CACP;MACL,kBAAC,GAAD,EAAY,SAAS,EAAuB,CAAA,CACtC;;AAEZ"}

package/dist/esm/modules/feed/components/NotificationFeed/index.mjs

@@ -0,0 +1,4 @@
+import { MarkAsRead as e } from "./MarkAsRead.mjs";
+import { NotificationFeedHeader as t } from "./NotificationFeedHeader.mjs";
+import { NotificationFeed as n } from "./NotificationFeed.mjs";
+export { e as MarkAsRead, n as NotificationFeed, t as NotificationFeedHeader };

package/dist/esm/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs

@@ -1,9 +1,11 @@
-import t from "react";
-/* empty css            */
-const i = ({
-  children: e
-}) => /* @__PURE__ */ t.createElement("div", { className: "rnf-feed-provider" }, e);
-export {
-  i as NotificationFeedContainer
-};
-//# sourceMappingURL=NotificationFeedContainer.mjs.map
+/* empty css        */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx
+var t = ({ children: t }) => /* @__PURE__ */ e("div", {
+	className: "rnf-feed-provider",
+	children: t
+});
+//#endregion
+export { t as NotificationFeedContainer };
+
+//# sourceMappingURL=NotificationFeedContainer.mjs.map

package/dist/esm/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeedContainer.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx"],"sourcesContent":["import { FunctionComponent, ReactNode } from \"react\";\n\nimport \"./styles.css\";\n\nexport const NotificationFeedContainer: FunctionComponent<{\n  children?: ReactNode | undefined;\n}> = ({ children }) => <div className=\"rnf-feed-provider\">{children}</div>;\n"],"names":["NotificationFeedContainer","children","React"],"mappings":";;AAIO,MAAMA,IAERA,CAAC;AAAA,EAAEC,UAAAA;AAAS,MAAOC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,oBAAA,GAAqBD,CAAS;"}
+{"version":3,"file":"NotificationFeedContainer.mjs","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx"],"sourcesContent":["import { FunctionComponent, ReactNode } from \"react\";\n\nimport \"./styles.css\";\n\nexport const NotificationFeedContainer: FunctionComponent<{\n  children?: ReactNode | undefined;\n}> = ({ children }) => <div className=\"rnf-feed-provider\">{children}</div>;\n"],"mappings":";;;AAIA,IAAa,KAEP,EAAE,kBAAe,kBAAC,OAAD;CAAK,WAAU;CAAqB;AAAc,CAAA"}

package/dist/esm/modules/feed/components/NotificationFeedContainer/index.mjs

@@ -0,0 +1,2 @@
+import { NotificationFeedContainer as e } from "./NotificationFeedContainer.mjs";
+export { e as NotificationFeedContainer };

package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs

@@ -1,66 +1,63 @@
-import { useTranslations as E, useKnockFeed as _ } from "@knocklabs/react-core";
-import { createPopper as g } from "@popperjs/core";
-import i, { useEffect as p } from "react";
-import F from "../../../core/hooks/useComponentVisible.mjs";
-import { NotificationFeed as N } from "../NotificationFeed/NotificationFeed.mjs";
-import "../NotificationFeed/NotificationFeedHeader.mjs";
-/* empty css                              */
-/* empty css            */
-const x = ({
-  store: e,
-  feedClient: t
-}) => {
-  e.metadata.unseen_count > 0 && t.markAllAsSeen();
-}, M = ({
-  isVisible: e,
-  onOpen: t = x,
-  onClose: m,
-  buttonRef: r,
-  closeOnClickOutside: d = !0,
-  placement: a = "bottom-end",
-  ...l
-}) => {
-  const {
-    t: u
-  } = E(), {
-    colorMode: v,
-    feedClient: f,
-    useFeedStore: y
-  } = _(), c = y(), {
-    ref: n
-  } = F(e, (o) => {
-    var s;
-    o.target instanceof Element && ((s = r.current) != null && s.contains(o.target)) || m(o);
-  }, {
-    closeOnClickOutside: d
-  });
-  return p(() => {
-    e && t && t({
-      store: c,
-      feedClient: f
-    });
-  }, [e, t, c, f]), p(() => {
-    if (r.current && n.current) {
-      const o = g(r.current, n.current, {
-        strategy: "fixed",
-        placement: a,
-        modifiers: [{
-          name: "offset",
-          options: {
-            offset: [0, 8]
-          }
-        }]
-      });
-      return () => {
-        o.destroy();
-      };
-    }
-  }, [r, n, a]), /* @__PURE__ */ i.createElement("div", { className: `rnf-notification-feed-popover rnf-notification-feed-popover--${v}`, style: {
-    visibility: e ? "visible" : "hidden",
-    opacity: e ? 1 : 0
-  }, ref: n, role: "dialog", "aria-label": u("notifications"), tabIndex: -1 }, /* @__PURE__ */ i.createElement("div", { className: "rnf-notification-feed-popover__inner" }, /* @__PURE__ */ i.createElement(N, { ...l })));
+import { NotificationFeed as e } from "../NotificationFeed/NotificationFeed.mjs";
+import "../NotificationFeed/index.mjs";
+import t from "../../../core/hooks/useComponentVisible.mjs";
+/* empty css        */
+import { useKnockFeed as n, useTranslations as r } from "@knocklabs/react-core";
+import { useEffect as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { createPopper as o } from "@popperjs/core";
+//#region src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx
+var s = ({ store: e, feedClient: t }) => {
+	e.metadata.unseen_count > 0 && t.markAllAsSeen();
+}, c = ({ isVisible: c, onOpen: l = s, onClose: u, buttonRef: d, closeOnClickOutside: f = !0, placement: p = "bottom-end", ...m }) => {
+	let { t: h } = r(), { colorMode: g, feedClient: _, useFeedStore: v } = n(), y = v(), { ref: b } = t(c, (e) => {
+		e.target instanceof Element && d.current?.contains(e.target) || u(e);
+	}, { closeOnClickOutside: f });
+	return i(() => {
+		c && l && l({
+			store: y,
+			feedClient: _
+		});
+	}, [
+		c,
+		l,
+		y,
+		_
+	]), i(() => {
+		if (d.current && b.current) {
+			let e = o(d.current, b.current, {
+				strategy: "fixed",
+				placement: p,
+				modifiers: [{
+					name: "offset",
+					options: { offset: [0, 8] }
+				}]
+			});
+			return () => {
+				e.destroy();
+			};
+		}
+	}, [
+		d,
+		b,
+		p
+	]), /* @__PURE__ */ a("div", {
+		className: `rnf-notification-feed-popover rnf-notification-feed-popover--${g}`,
+		style: {
+			visibility: c ? "visible" : "hidden",
+			opacity: +!!c
+		},
+		ref: b,
+		role: "dialog",
+		"aria-label": h("notifications"),
+		tabIndex: -1,
+		children: /* @__PURE__ */ a("div", {
+			className: "rnf-notification-feed-popover__inner",
+			children: /* @__PURE__ */ a(e, { ...m })
+		})
+	});
 };
-export {
-  M as NotificationFeedPopover
-};
-//# sourceMappingURL=NotificationFeedPopover.mjs.map
+//#endregion
+export { c as NotificationFeedPopover };
+
+//# sourceMappingURL=NotificationFeedPopover.mjs.map

package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeedPopover.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { Placement, createPopper } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\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 | null>;\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 { t } = useTranslations();\n  const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n  const store = useFeedStore();\n\n  const { ref: popperRef } = useComponentVisible(\n    isVisible,\n    (event) => {\n      // If the button is clicked, let that onClick handler handle the close\n      if (\n        event.target instanceof Element &&\n        buttonRef.current?.contains(event.target)\n      ) {\n        return;\n      }\n      onClose(event);\n    },\n    {\n      closeOnClickOutside,\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  useEffect(() => {\n    if (buttonRef.current && popperRef.current) {\n      const popperInstance = createPopper(\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      // Cleanup\n      return () => {\n        popperInstance.destroy();\n      };\n    }\n  }, [buttonRef, popperRef, placement]);\n\n  return (\n    <div\n      className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n      style={{\n        visibility: isVisible ? \"visible\" : \"hidden\",\n        opacity: isVisible ? 1 : 0,\n      }}\n      ref={popperRef}\n      role=\"dialog\"\n      aria-label={t(\"notifications\")}\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","t","useTranslations","colorMode","useFeedStore","useKnockFeed","ref","popperRef","useComponentVisible","event","target","Element","current","contains","useEffect","popperInstance","createPopper","strategy","modifiers","name","options","offset","destroy","visibility","opacity","React","NotificationFeed"],"mappings":";;;;;;;;AAeA,MAAMA,IAAgBA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,YAAAA;AAA0B,MAAM;AAC1DD,EAAAA,EAAME,SAASC,eAAe,KAChCF,EAAWG,cAAc;AAE7B,GAWaC,IAETA,CAAC;AAAA,EACHC,WAAAA;AAAAA,EACAC,QAAAA,IAASR;AAAAA,EACTS,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,qBAAAA,IAAsB;AAAA,EACtBC,WAAAA,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACE,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GACxB;AAAA,IAAEC,WAAAA;AAAAA,IAAWd,YAAAA;AAAAA,IAAYe,cAAAA;AAAAA,MAAiBC,EAAa,GACvDjB,IAAQgB,EAAa,GAErB;AAAA,IAAEE,KAAKC;AAAAA,EAAAA,IAAcC,EACzBd,GACCe,CAAUA,MAAA;;AAGPA,IAAAA,EAAMC,kBAAkBC,aACxBd,IAAAA,EAAUe,YAAVf,QAAAA,EAAmBgB,SAASJ,EAAMC,YAIpCd,EAAQa,CAAK;AAAA,EAAA,GAEf;AAAA,IACEX,qBAAAA;AAAAA,EAAAA,CAEJ;AAEAgB,SAAAA,EAAU,MAAM;AAGd,IAAIpB,KAAaC,KACRA,EAAA;AAAA,MAAEP,OAAAA;AAAAA,MAAOC,YAAAA;AAAAA,IAAAA,CAAY;AAAA,KAE7B,CAACK,GAAWC,GAAQP,GAAOC,CAAU,CAAC,GAEzCyB,EAAU,MAAM;AACVjB,QAAAA,EAAUe,WAAWL,EAAUK,SAAS;AAC1C,YAAMG,IAAiBC,EACrBnB,EAAUe,SACVL,EAAUK,SACV;AAAA,QACEK,UAAU;AAAA,QACVlB,WAAAA;AAAAA,QACAmB,WAAW,CACT;AAAA,UACEC,MAAM;AAAA,UACNC,SAAS;AAAA,YACPC,QAAQ,CAAC,GAAG,CAAC;AAAA,UAAA;AAAA,QAEhB,CAAA;AAAA,MAAA,CAGP;AAGA,aAAO,MAAM;AACXN,QAAAA,EAAeO,QAAQ;AAAA,MACzB;AAAA,IAAA;AAAA,EAED,GAAA,CAACzB,GAAWU,GAAWR,CAAS,CAAC,mCAGjC,OACC,EAAA,WAAW,gEAAgEI,CAAS,IACpF,OAAO;AAAA,IACLoB,YAAY7B,IAAY,YAAY;AAAA,IACpC8B,SAAS9B,IAAY,IAAI;AAAA,EAC3B,GACA,KAAKa,GACL,MAAK,UACL,cAAYN,EAAE,eAAe,GAC7B,UAAU,MAETwB,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,0CACbA,gBAAAA,EAAA,cAACC,KAAiB,GAAI1B,EAAAA,CAAU,CAClC,CACF;AAEJ;"}
+{"version":3,"file":"NotificationFeedPopover.mjs","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { Placement, createPopper } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\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 | null>;\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 { t } = useTranslations();\n  const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n  const store = useFeedStore();\n\n  const { ref: popperRef } = useComponentVisible(\n    isVisible,\n    (event) => {\n      // If the button is clicked, let that onClick handler handle the close\n      if (\n        event.target instanceof Element &&\n        buttonRef.current?.contains(event.target)\n      ) {\n        return;\n      }\n      onClose(event);\n    },\n    {\n      closeOnClickOutside,\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  useEffect(() => {\n    if (buttonRef.current && popperRef.current) {\n      const popperInstance = createPopper(\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      // Cleanup\n      return () => {\n        popperInstance.destroy();\n      };\n    }\n  }, [buttonRef, popperRef, placement]);\n\n  return (\n    <div\n      className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n      style={{\n        visibility: isVisible ? \"visible\" : \"hidden\",\n        opacity: isVisible ? 1 : 0,\n      }}\n      ref={popperRef}\n      role=\"dialog\"\n      aria-label={t(\"notifications\")}\n      tabIndex={-1}\n    >\n      <div className=\"rnf-notification-feed-popover__inner\">\n        <NotificationFeed {...feedProps} />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAeA,IAAM,KAAiB,EAAE,UAAO,oBAAgC;CAC9D,AAAI,EAAM,SAAS,eAAe,KAChC,EAAW,cAAc;AAE7B,GAWa,KAER,EACH,cACA,YAAS,GACT,YACA,cACA,yBAAsB,IACtB,eAAY,cACZ,GAAG,QACC;CACJ,IAAM,EAAE,SAAM,EAAgB,GACxB,EAAE,cAAW,eAAY,oBAAiB,EAAa,GACvD,IAAQ,EAAa,GAErB,EAAE,KAAK,MAAc,EACzB,IACC,MAAU;EAGP,EAAM,kBAAkB,WACxB,EAAU,SAAS,SAAS,EAAM,MAAM,KAI1C,EAAQ,CAAK;CACf,GACA,EACE,uBACF,CACF;CAoCA,OAlCA,QAAgB;EAGd,AAAI,KAAa,KACf,EAAO;GAAE;GAAO;EAAW,CAAC;CAEhC,GAAG;EAAC;EAAW;EAAQ;EAAO;CAAU,CAAC,GAEzC,QAAgB;EACd,IAAI,EAAU,WAAW,EAAU,SAAS;GAC1C,IAAM,IAAiB,EACrB,EAAU,SACV,EAAU,SACV;IACE,UAAU;IACV;IACA,WAAW,CACT;KACE,MAAM;KACN,SAAS,EACP,QAAQ,CAAC,GAAG,CAAC,EACf;IACF,CACF;GACF,CACF;GAGA,aAAa;IACX,EAAe,QAAQ;GACzB;EACF;CACF,GAAG;EAAC;EAAW;EAAW;CAAS,CAAC,GAGlC,kBAAC,OAAD;EACE,WAAW,gEAAgE;EAC3E,OAAO;GACL,YAAY,IAAY,YAAY;GACpC,SAAS;EACX;EACA,KAAK;EACL,MAAK;EACL,cAAY,EAAE,eAAe;EAC7B,UAAU;YAEV,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD,EAAkB,GAAI,EAAY,CAAA;EAC/B,CAAA;CACF,CAAA;AAET"}

package/dist/esm/modules/feed/components/NotificationFeedPopover/index.mjs

@@ -0,0 +1,2 @@
+import { NotificationFeedPopover as e } from "./NotificationFeedPopover.mjs";
+export { e as NotificationFeedPopover };

package/dist/esm/modules/feed/components/NotificationIconButton/NotificationIconButton.mjs

@@ -1,18 +1,23 @@
-import { useKnockFeed as i } from "@knocklabs/react-core";
-import t from "react";
-import { BellIcon as a } from "../../../core/components/Icons/Bell.mjs";
-import { UnseenBadge as c } from "../UnseenBadge/UnseenBadge.mjs";
-/* empty css            */
-const p = t.forwardRef(({
-  onClick: o,
-  badgeCountType: e
-}, n) => {
-  const {
-    colorMode: r
-  } = i();
-  return /* @__PURE__ */ t.createElement("button", { className: `rnf-notification-icon-button rnf-notification-icon-button--${r}`, "aria-label": "Open notification feed", ref: n, onClick: o }, /* @__PURE__ */ t.createElement(a, { "aria-hidden": !0 }), /* @__PURE__ */ t.createElement(c, { badgeCountType: e }));
+import { BellIcon as e } from "../../../core/components/Icons/Bell.mjs";
+import "../../../core/components/Icons/index.mjs";
+import { UnseenBadge as t } from "../UnseenBadge/UnseenBadge.mjs";
+import "../UnseenBadge/index.mjs";
+/* empty css        */
+import { useKnockFeed as n } from "@knocklabs/react-core";
+import r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx
+var o = r.forwardRef(({ onClick: r, badgeCountType: o }, s) => {
+	let { colorMode: c } = n();
+	return /* @__PURE__ */ a("button", {
+		className: `rnf-notification-icon-button rnf-notification-icon-button--${c}`,
+		"aria-label": "Open notification feed",
+		ref: s,
+		onClick: r,
+		children: [/* @__PURE__ */ i(e, { "aria-hidden": !0 }), /* @__PURE__ */ i(t, { badgeCountType: o })]
+	});
 });
-export {
-  p as NotificationIconButton
-};
-//# sourceMappingURL=NotificationIconButton.mjs.map
+//#endregion
+export { o as NotificationIconButton };
+
+//# sourceMappingURL=NotificationIconButton.mjs.map

package/dist/esm/modules/feed/components/NotificationIconButton/NotificationIconButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationIconButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import { type BadgeCountType, useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { SyntheticEvent } from \"react\";\n\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { 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      aria-label=\"Open notification feed\"\n      ref={ref}\n      onClick={onClick}\n    >\n      <BellIcon aria-hidden />\n      <UnseenBadge badgeCountType={badgeCountType} />\n    </button>\n  );\n});\n"],"names":["NotificationIconButton","React","forwardRef","onClick","badgeCountType","ref","colorMode","useKnockFeed","BellIcon","UnseenBadge"],"mappings":";;;;;AAcaA,MAAAA,IAAyBC,EAAMC,WAG1C,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,gBAAAA;AAAe,GAAGC,MAAQ;AAChC,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa;AAEnC,yCACG,UACC,EAAA,WAAW,8DAA8DD,CAAS,IAClF,cAAW,0BACX,KAAAD,GACA,SAAAF,KAEAF,gBAAAA,EAAA,cAACO,KAAS,eAAW,GAAA,CAAA,GACpBP,gBAAAA,EAAA,cAAAQ,GAAA,EAAY,gBAAAL,EAA+B,CAAA,CAC9C;AAEJ,CAAC;"}
+{"version":3,"file":"NotificationIconButton.mjs","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import { type BadgeCountType, useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { SyntheticEvent } from \"react\";\n\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { 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      aria-label=\"Open notification feed\"\n      ref={ref}\n      onClick={onClick}\n    >\n      <BellIcon aria-hidden />\n      <UnseenBadge badgeCountType={badgeCountType} />\n    </button>\n  );\n});\n"],"mappings":";;;;;;;;;AAcA,IAAa,IAAyB,EAAM,YAGzC,EAAE,YAAS,qBAAkB,MAAQ;CACtC,IAAM,EAAE,iBAAc,EAAa;CAEnC,OACE,kBAAC,UAAD;EACE,WAAW,8DAA8D;EACzE,cAAW;EACN;EACI;YAJX,CAME,kBAAC,GAAD,EAAU,eAAA,GAAa,CAAA,GACvB,kBAAC,GAAD,EAA6B,kBAAiB,CAAA,CACxC;;AAEZ,CAAC"}

package/dist/esm/modules/feed/components/NotificationIconButton/index.mjs

@@ -0,0 +1,2 @@
+import { NotificationIconButton as e } from "./NotificationIconButton.mjs";
+export { e as NotificationIconButton };

package/dist/esm/modules/feed/components/UnseenBadge/UnseenBadge.mjs

@@ -1,25 +1,29 @@
-import { useKnockFeed as u, getBadgeAriaLabel as s, formatBadgeCount as o } from "@knocklabs/react-core";
-import a from "react";
-/* empty css            */
-function c(n, e) {
-  switch (n) {
-    case "all":
-      return e.total_count;
-    case "unread":
-      return e.unread_count;
-    case "unseen":
-      return e.unseen_count;
-  }
+/* empty css        */
+import { formatBadgeCount as e, getBadgeAriaLabel as t, useKnockFeed as n } from "@knocklabs/react-core";
+import "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/modules/feed/components/UnseenBadge/UnseenBadge.tsx
+function i(e, t) {
+	switch (e) {
+		case "all": return t.total_count;
+		case "unread": return t.unread_count;
+		case "unseen": return t.unseen_count;
+	}
 }
-const m = ({
-  badgeCountType: n = "unseen"
-}) => {
-  const {
-    useFeedStore: e
-  } = u(), t = e((r) => c(n, r.metadata));
-  return t !== 0 ? /* @__PURE__ */ a.createElement("div", { className: "rnf-unseen-badge", role: "status", "aria-label": s(t, n) }, /* @__PURE__ */ a.createElement("span", { className: "rnf-unseen-badge__count", "aria-hidden": "true" }, o(t))) : null;
+var a = ({ badgeCountType: a = "unseen" }) => {
+	let { useFeedStore: o } = n(), s = o((e) => i(a, e.metadata));
+	return s === 0 ? null : /* @__PURE__ */ r("div", {
+		className: "rnf-unseen-badge",
+		role: "status",
+		"aria-label": t(s, a),
+		children: /* @__PURE__ */ r("span", {
+			className: "rnf-unseen-badge__count",
+			"aria-hidden": "true",
+			children: e(s)
+		})
+	});
 };
-export {
-  m as UnseenBadge
-};
-//# sourceMappingURL=UnseenBadge.mjs.map
+//#endregion
+export { a as UnseenBadge };
+
+//# sourceMappingURL=UnseenBadge.mjs.map