@knocklabs/react 0.2.8 → 0.2.10

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

@@ -1,32 +1,22 @@
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
-import * as u from "react";
-import { useKnockFeed as f, useTranslations as k } from "@knocklabs/react-core";
-import { CheckmarkCircle as p } from "../../../core/components/Icons/CheckmarkCircle.mjs";
+import * as t from "react";
+import { useKnockFeed as u, useTranslations as i } from "@knocklabs/react-core";
+import { CheckmarkCircle as k } from "../../../core/components/Icons/CheckmarkCircle.mjs";
 
-const x = ({ onClick: a }) => {
-  const { useFeedStore: r, feedClient: t, colorMode: s } = f(), { t: n } = k(), o = r(
-    (e) => e.items.filter((m) => !m.read_at)
-  ), l = r((e) => e.metadata.unread_count), d = u.useCallback(
-    (e) => {
-      t.markAllAsRead(), a && a(e, o);
-    },
-    [t, o, a]
-  );
-  return /* @__PURE__ */ c(
-    "button",
-    {
-      className: `rnf-mark-all-as-read rnf-mark-all-as-read--${s}`,
-      disabled: l === 0,
-      onClick: d,
-      type: "button",
-      children: [
-        n("markAllAsRead"),
-        /* @__PURE__ */ i(p, {})
-      ]
-    }
-  );
+const C = ({
+  onClick: a
+}) => {
+  const {
+    useFeedStore: r,
+    feedClient: n,
+    colorMode: s
+  } = u(), {
+    t: l
+  } = i(), o = r((e) => e.items.filter((c) => !c.read_at)), m = r((e) => e.metadata.unread_count), d = t.useCallback((e) => {
+    n.markAllAsRead(), a && a(e, o);
+  }, [n, o, a]);
+  return /* @__PURE__ */ t.createElement("button", { className: `rnf-mark-all-as-read rnf-mark-all-as-read--${s}`, disabled: m === 0, onClick: d, type: "button" }, l("markAllAsRead"), /* @__PURE__ */ t.createElement(k, null));
 };
 export {
-  x as MarkAsRead
+  C as MarkAsRead
 };
 //# sourceMappingURL=MarkAsRead.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MarkAsRead.mjs","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","jsxs","CheckmarkCircle"],"mappings":";;;;;AAWO,MAAMA,IAAwC,CAAC,EAAE,SAAAC,QAAc;AACpE,QAAM,EAAE,cAAAC,GAAc,YAAAC,GAAY,WAAAC,MAAcC,EAAa,GACvD,EAAE,GAAAC,MAAMC,KAERC,IAAcN;AAAA,IAAa,CAACO,MAChCA,EAAM,MAAM,OAAO,CAACC,MAAS,CAACA,EAAK,OAAO;AAAA,EAAA,GAGtCC,IAAcT,EAAa,CAACO,MAAUA,EAAM,SAAS,YAAY,GAEjEG,IAAiBC,EAAM;AAAA,IAC3B,CAAC,MAAwB;AACvB,MAAAV,EAAW,cAAc,GACrBF,KAASA,EAAQ,GAAGO,CAAW;AAAA,IACrC;AAAA,IACA,CAACL,GAAYK,GAAaP,CAAO;AAAA,EAAA;AAIjC,SAAA,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8CAA8CV,CAAS;AAAA,MAClE,UAAUO,MAAgB;AAAA,MAC1B,SAASC;AAAA,MACT,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAAN,EAAE,eAAe;AAAA,0BACjBS,GAAgB,EAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvB;"}
+{"version":3,"file":"MarkAsRead.mjs","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":";;;;AAWO,MAAMA,IAAwCA,CAAC;AAAA,EAAEC,SAAAA;AAAQ,MAAM;AAC9D,QAAA;AAAA,IAAEC,cAAAA;AAAAA,IAAcC,YAAAA;AAAAA,IAAYC,WAAAA;AAAAA,MAAcC,EAAa,GACvD;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GAExBC,IAAcN,EAAcO,CAAAA,MAChCA,EAAMC,MAAMC,OAAQC,CAASA,MAAA,CAACA,EAAKC,OAAO,CAC5C,GAEMC,IAAcZ,EAAcO,CAAUA,MAAAA,EAAMM,SAASC,YAAY,GAEjEC,IAAiBC,EAAMC,YAC3B,CAACC,MAAwB;AACvBjB,IAAAA,EAAWkB,cAAc,GACrBpB,KAASA,EAAQmB,GAAGZ,CAAW;AAAA,EAErC,GAAA,CAACL,GAAYK,GAAaP,CAAO,CACnC;AAEA,yCACG,UACC,EAAA,WAAY,8CAA6CG,CAAU,IACnE,UAAUU,MAAgB,GAC1B,SAASG,GACT,MAAK,SAEJX,GAAAA,EAAE,eAAe,GAClB,gBAAAY,EAAA,cAACI,OAAe,CAClB;AAEJ;"}

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

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

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

@@ -1,31 +1,16 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import { FilterStatus as o, useTranslations as d } from "@knocklabs/react-core";
-import { Dropdown as c } from "./Dropdown.mjs";
-import { MarkAsRead as l } from "./MarkAsRead.mjs";
-const f = [
-  o.All,
-  o.Unread,
-  o.Read
-], u = ({
-  onMarkAllAsReadClick: a,
-  filterStatus: t,
-  setFilterStatus: s
+import e from "react";
+import { FilterStatus as a, useTranslations as c } from "@knocklabs/react-core";
+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: r } = d();
-  return /* @__PURE__ */ i("header", { className: "rnf-notification-feed__header", children: [
-    /* @__PURE__ */ i("div", { className: "rnf-notification-feed__selector", children: [
-      /* @__PURE__ */ n("span", { className: "rnf-notification-feed__type", children: r("notifications") }),
-      /* @__PURE__ */ n(
-        c,
-        {
-          value: t,
-          onChange: (e) => s(e.target.value),
-          children: f.map((e) => /* @__PURE__ */ n("option", { value: e, children: r(e) }, e))
-        }
-      )
-    ] }),
-    /* @__PURE__ */ n(l, { onClick: a })
-  ] });
+  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 }));
 };
 export {
   u as NotificationFeedHeader

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 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","MarkAsRead"],"mappings":";;;;AAaA,MAAMA,IAAwB;AAAA,EAC5BC,EAAa;AAAA,EACbA,EAAa;AAAA,EACbA,EAAa;AACf,GAEaC,IAAgE,CAAC;AAAA,EAC5E,sBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AACF,MAAM;AACE,QAAA,EAAE,GAAAC,MAAMC;AAGZ,SAAA,gBAAAC,EAAC,UAAO,EAAA,WAAU,iCAChB,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAK,EAAA,WAAU,+BACb,UAAAH,EAAE,eAAe,GACpB;AAAA,MACA,gBAAAG;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAON;AAAA,UACP,UAAU,CAAC,MAAMC,EAAgB,EAAE,OAAO,KAAK;AAAA,UAE9C,UAAsBL,EAAA,IAAI,CAACI,MACzB,gBAAAK,EAAA,UAAA,EAA0B,OAAOL,GAC/B,UAAEA,EAAAA,CAAY,EADJA,GAAAA,CAEb,CACD;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,GACF;AAAA,IACA,gBAAAK,EAACE,GAAW,EAAA,SAASR,EAAsB,CAAA;AAAA,EAC7C,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"NotificationFeedHeader.mjs","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":";;;;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,KAAK,EAAA,GAE9Cf,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,EAAAA,CAAqB,CAC5C;AAEJ;"}

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

@@ -1,9 +1,9 @@
-import { jsx as e } from "react/jsx-runtime";
+import t from "react";
 
-const t = ({
-  children: r
-}) => /* @__PURE__ */ e("div", { className: "rnf-feed-provider", children: r });
+const i = ({
+  children: e
+}) => /* @__PURE__ */ t.createElement("div", { className: "rnf-feed-provider" }, e);
 export {
-  t as NotificationFeedContainer
+  i 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 { 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":";;AAGO,MAAMA,IAAyD,CAAC;AAAA,EACrE,UAAAC;AACF,MACU,gBAAAC,EAAA,OAAA,EAAI,WAAU,qBAAqB,UAAAD,EAAS,CAAA;"}
+{"version":3,"file":"NotificationFeedContainer.mjs","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":";;AAGO,MAAMA,IAAyDA,CAAC;AAAA,EACrEC,UAAAA;AACF,MACUC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,oBAAA,GAAqBD,CAAS;"}

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

@@ -1,61 +1,58 @@
-import { jsx as t } from "react/jsx-runtime";
 import { useKnockFeed as v } from "@knocklabs/react-core";
-import { useEffect as y } from "react";
-import { usePopper as x } from "react-popper";
-import F from "../../../core/hooks/useComponentVisible.mjs";
-import { NotificationFeed as N } from "../NotificationFeed/NotificationFeed.mjs";
+import o, { useEffect as y } from "react";
+import { usePopper as _ } from "react-popper";
+import E from "../../../core/hooks/useComponentVisible.mjs";
+import { NotificationFeed as F } from "../NotificationFeed/NotificationFeed.mjs";
 import "../NotificationFeed/NotificationFeedHeader.mjs";
 
 
-const h = ({ store: e, feedClient: o }) => {
-  e.metadata.unseen_count > 0 && o.markAllAsSeen();
-}, E = ({
+const N = ({
+  store: e,
+  feedClient: t
+}) => {
+  e.metadata.unseen_count > 0 && t.markAllAsSeen();
+}, S = ({
   isVisible: e,
-  onOpen: o = h,
+  onOpen: t = N,
   onClose: f,
   buttonRef: p,
-  closeOnClickOutside: m = !0,
-  placement: s = "bottom-end",
-  ...c
+  closeOnClickOutside: a = !0,
+  placement: c = "bottom-end",
+  ...m
 }) => {
-  const { colorMode: d, feedClient: r, useFeedStore: a } = v(), i = a(), { ref: n } = F(e, f, {
-    closeOnClickOutside: m
-  }), { styles: u, attributes: l } = x(
-    p.current,
-    n.current,
-    {
-      strategy: "fixed",
-      placement: s,
-      modifiers: [
-        {
-          name: "offset",
-          options: {
-            offset: [0, 8]
-          }
-        }
-      ]
-    }
-  );
+  const {
+    colorMode: s,
+    feedClient: r,
+    useFeedStore: d
+  } = v(), n = d(), {
+    ref: i
+  } = E(e, f, {
+    closeOnClickOutside: a
+  }), {
+    styles: l,
+    attributes: u
+  } = _(p.current, i.current, {
+    strategy: "fixed",
+    placement: c,
+    modifiers: [{
+      name: "offset",
+      options: {
+        offset: [0, 8]
+      }
+    }]
+  });
   return y(() => {
-    e && o && o({ store: i, feedClient: r });
-  }, [e, o, i, r]), /* @__PURE__ */ t(
-    "div",
-    {
-      className: `rnf-notification-feed-popover rnf-notification-feed-popover--${d}`,
-      style: {
-        ...u.popper,
-        visibility: e ? "visible" : "hidden",
-        opacity: e ? 1 : 0
-      },
-      ref: n,
-      ...l.popper,
-      role: "dialog",
-      tabIndex: -1,
-      children: /* @__PURE__ */ t("div", { className: "rnf-notification-feed-popover__inner", children: /* @__PURE__ */ t(N, { ...c }) })
-    }
-  );
+    e && t && t({
+      store: n,
+      feedClient: r
+    });
+  }, [e, t, n, r]), /* @__PURE__ */ o.createElement("div", { className: `rnf-notification-feed-popover rnf-notification-feed-popover--${s}`, style: {
+    ...l.popper,
+    visibility: e ? "visible" : "hidden",
+    opacity: e ? 1 : 0
+  }, ref: i, ...u.popper, role: "dialog", tabIndex: -1 }, /* @__PURE__ */ o.createElement("div", { className: "rnf-notification-feed-popover__inner" }, /* @__PURE__ */ o.createElement(F, { ...m })));
 };
 export {
-  E as NotificationFeedPopover
+  S 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 } 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":";;;;;;;;;AAgBA,MAAMA,IAAgB,CAAC,EAAE,OAAAC,GAAO,YAAAC,QAAgC;AAC1D,EAAAD,EAAM,SAAS,eAAe,KAChCC,EAAW,cAAc;AAE7B,GAWaC,IAET,CAAC;AAAA,EACH,WAAAC;AAAA,EACA,QAAAC,IAASL;AAAA,EACT,SAAAM;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,WAAAC,GAAW,YAAAT,GAAY,cAAAU,MAAiBC,EAAa,GACvDZ,IAAQW,KAER,EAAE,KAAKE,EAAA,IAAcC,EAAoBX,GAAWE,GAAS;AAAA,IACjE,qBAAAE;AAAA,EAAA,CACD,GAEK,EAAE,QAAAQ,GAAQ,YAAAC,EAAA,IAAeC;AAAA,IAC7BX,EAAU;AAAA,IACVO,EAAU;AAAA,IACV;AAAA,MACE,UAAU;AAAA,MACV,WAAAL;AAAA,MACA,WAAW;AAAA,QACT;AAAA,UACE,MAAM;AAAA,UACN,SAAS;AAAA,YACP,QAAQ,CAAC,GAAG,CAAC;AAAA,UACf;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EAAA;AAGF,SAAAU,EAAU,MAAM;AAGd,IAAIf,KAAaC,KACRA,EAAA,EAAE,OAAAJ,GAAO,YAAAC,EAAA,CAAY;AAAA,KAE7B,CAACE,GAAWC,GAAQJ,GAAOC,CAAU,CAAC,GAGvC,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gEAAgET,CAAS;AAAA,MACpF,OAAO;AAAA,QACL,GAAGK,EAAO;AAAA,QACV,YAAYZ,IAAY,YAAY;AAAA,QACpC,SAASA,IAAY,IAAI;AAAA,MAC3B;AAAA,MACA,KAAKU;AAAA,MACJ,GAAGG,EAAW;AAAA,MACf,MAAK;AAAA,MACL,UAAU;AAAA,MAEV,UAAA,gBAAAG,EAAC,SAAI,WAAU,wCACb,4BAACC,GAAkB,EAAA,GAAGX,GAAW,EACnC,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"NotificationFeedPopover.mjs","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":";;;;;;;;AAgBA,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,WAAAA;AAAAA,IAAWZ,YAAAA;AAAAA,IAAYa,cAAAA;AAAAA,MAAiBC,EAAa,GACvDf,IAAQc,KAER;AAAA,IAAEE,KAAKC;AAAAA,EAAAA,IAAcC,EAAoBZ,GAAWE,GAAS;AAAA,IACjEE,qBAAAA;AAAAA,EAAAA,CACD,GAEK;AAAA,IAAES,QAAAA;AAAAA,IAAQC,YAAAA;AAAAA,EAAeC,IAAAA,EAC7BZ,EAAUa,SACVL,EAAUK,SACV;AAAA,IACEC,UAAU;AAAA,IACVZ,WAAAA;AAAAA,IACAa,WAAW,CACT;AAAA,MACEC,MAAM;AAAA,MACNC,SAAS;AAAA,QACPC,QAAQ,CAAC,GAAG,CAAC;AAAA,MACf;AAAA,IAAA,CACD;AAAA,EAAA,CAGP;AAEAC,SAAAA,EAAU,MAAM;AAGd,IAAItB,KAAaC,KACRA,EAAA;AAAA,MAAEP,OAAAA;AAAAA,MAAOC,YAAAA;AAAAA,IAAAA,CAAY;AAAA,KAE7B,CAACK,GAAWC,GAAQP,GAAOC,CAAU,CAAC,mCAGtC,OACC,EAAA,WAAY,gEAA+DY,CAAU,IACrF,OAAO;AAAA,IACL,GAAGM,EAAOU;AAAAA,IACVC,YAAYxB,IAAY,YAAY;AAAA,IACpCyB,SAASzB,IAAY,IAAI;AAAA,KAE3B,KAAKW,GACL,GAAIG,EAAWS,QACf,MAAK,UACL,UAAU,MAETG,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,uCACb,GAAAA,gBAAAA,EAAA,cAACC,KAAiB,GAAIrB,EAAU,CAAA,CAClC,CACF;AAEJ;"}

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

@@ -1,27 +1,18 @@
-import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import c from "react";
-import { BellIcon as f } from "../../../core/components/Icons/Bell.mjs";
-import { useKnockFeed as a } from "@knocklabs/react-core";
-import { UnseenBadge as m } from "../UnseenBadge/UnseenBadge.mjs";
+import o from "react";
+import { BellIcon as i } from "../../../core/components/Icons/Bell.mjs";
+import { useKnockFeed as c } from "@knocklabs/react-core";
+import { UnseenBadge as a } from "../UnseenBadge/UnseenBadge.mjs";
 
-const x = c.forwardRef(({ onClick: t, badgeCountType: n }, i) => {
-  const { colorMode: r } = a();
-  return /* @__PURE__ */ e(
-    "button",
-    {
-      className: `rnf-notification-icon-button rnf-notification-icon-button--${r}`,
-      role: "button",
-      "aria-label": "Open notification feed",
-      ref: i,
-      onClick: t,
-      children: [
-        /* @__PURE__ */ o(f, {}),
-        /* @__PURE__ */ o(m, { badgeCountType: n })
-      ]
-    }
-  );
+const d = o.forwardRef(({
+  onClick: t,
+  badgeCountType: e
+}, n) => {
+  const {
+    colorMode: r
+  } = c();
+  return /* @__PURE__ */ o.createElement("button", { className: `rnf-notification-icon-button rnf-notification-icon-button--${r}`, role: "button", "aria-label": "Open notification feed", ref: n, onClick: t }, /* @__PURE__ */ o.createElement(i, null), /* @__PURE__ */ o.createElement(a, { badgeCountType: e }));
 });
 export {
-  x as NotificationIconButton
+  d 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 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":";;;;;;AAaa,MAAAA,IAAyBC,EAAM,WAG1C,CAAC,EAAE,SAAAC,GAAS,gBAAAC,KAAkBC,MAAQ;AAChC,QAAA,EAAE,WAAAC,MAAcC;AAGpB,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8DAA8DF,CAAS;AAAA,MAClF,MAAK;AAAA,MACL,cAAW;AAAA,MACX,KAAAD;AAAA,MACA,SAAAF;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAM,EAACC,GAAS,EAAA;AAAA,QACV,gBAAAD,EAACE,KAAY,gBAAAP,GAAgC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnD,CAAC;"}
+{"version":3,"file":"NotificationIconButton.mjs","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":";;;;;AAaaA,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,WAAY,8DAA6DD,CAAU,IACnF,MAAK,UACL,cAAW,0BACX,KAAAD,GACA,SAAAF,KAECF,gBAAAA,EAAA,cAAAO,GAAA,IAAQ,GACRP,gBAAAA,EAAA,cAAAQ,GAAA,EAAY,gBAAAL,GAA+B,CAC9C;AAEJ,CAAC;"}

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

@@ -1,7 +1,7 @@
-import { jsx as u } from "react/jsx-runtime";
-import { useKnockFeed as s, formatBadgeCount as o } from "@knocklabs/react-core";
+import u from "react";
+import { useKnockFeed as a, formatBadgeCount as o } from "@knocklabs/react-core";
 
-function c(n, e) {
+function s(n, e) {
   switch (n) {
     case "all":
       return e.total_count;
@@ -11,15 +11,15 @@ function c(n, e) {
       return e.unseen_count;
   }
 }
-const i = ({
+const m = ({
   badgeCountType: n = "unseen"
 }) => {
-  const { useFeedStore: e } = s(), t = e(
-    (r) => c(n, r.metadata)
-  );
-  return t !== 0 ? /* @__PURE__ */ u("div", { className: "rnf-unseen-badge", children: /* @__PURE__ */ u("span", { className: "rnf-unseen-badge__count", children: o(t) }) }) : null;
+  const {
+    useFeedStore: e
+  } = a(), t = e((r) => s(n, r.metadata));
+  return t !== 0 ? /* @__PURE__ */ u.createElement("div", { className: "rnf-unseen-badge" }, /* @__PURE__ */ u.createElement("span", { className: "rnf-unseen-badge__count" }, o(t))) : null;
 };
 export {
-  i as UnseenBadge
+  m as UnseenBadge
 };
 //# sourceMappingURL=UnseenBadge.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"UnseenBadge.mjs","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":";;;AAYA,SAASA,EACPC,GACAC,GACA;AACA,UAAQD,GAAgB;AAAA,IACtB,KAAK;AACH,aAAOC,EAAS;AAAA,IAClB,KAAK;AACH,aAAOA,EAAS;AAAA,IAClB,KAAK;AACH,aAAOA,EAAS;AAAA,EACpB;AACF;AAEO,MAAMC,IAA0C,CAAC;AAAA,EACtD,gBAAAF,IAAiB;AACnB,MAAM;AACE,QAAA,EAAE,cAAAG,MAAiBC,KACnBC,IAAkBF;AAAA,IAAa,CAACG,MACpCP,EAAiBC,GAAgBM,EAAM,QAAQ;AAAA,EAAA;AAGjD,SAAOD,MAAoB,IACxB,gBAAAE,EAAA,OAAA,EAAI,WAAU,oBACb,UAAA,gBAAAA,EAAC,QAAK,EAAA,WAAU,2BACb,UAAAC,EAAiBH,CAAe,EACnC,CAAA,GACF,IACE;AACN;"}
+{"version":3,"file":"UnseenBadge.mjs","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":";;;AAYA,SAASA,EACPC,GACAC,GACA;AACA,UAAQD,GAAc;AAAA,IACpB,KAAK;AACH,aAAOC,EAASC;AAAAA,IAClB,KAAK;AACH,aAAOD,EAASE;AAAAA,IAClB,KAAK;AACH,aAAOF,EAASG;AAAAA,EACpB;AACF;AAEO,MAAMC,IAA0CA,CAAC;AAAA,EACtDL,gBAAAA,IAAiB;AACnB,MAAM;AACE,QAAA;AAAA,IAAEM,cAAAA;AAAAA,MAAiBC,EAAa,GAChCC,IAAkBF,EAAcG,CAAAA,MACpCV,EAAiBC,GAAgBS,EAAMR,QAAQ,CACjD;AAEA,SAAOO,MAAoB,IACxBE,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,sBACbA,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,0BACbC,GAAAA,EAAiBH,CAAe,CACnC,CACF,IACE;AACN;"}