@knocklabs/react 0.12.1 → 0.13.1

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyFeed.mjs","sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport \"./styles.css\";\n\nexport const EmptyFeed: FunctionComponent = () => {\n  const { colorMode } = useKnockFeed();\n  const { t } = useTranslations();\n\n  return (\n    <div className={`rnf-empty-feed rnf-empty-feed--${colorMode}`}>\n      <div className=\"rnf-empty-feed__inner\">\n        <h2 className=\"rnf-empty-feed__header\">{t(\"emptyFeedTitle\")}</h2>\n        <p className=\"rnf-empty-feed__body\">{t(\"emptyFeedBody\")}</p>\n      </div>\n    </div>\n  );\n};\n"],"names":["EmptyFeed","colorMode","useKnockFeed","t","useTranslations","React"],"mappings":";;;AAKO,MAAMA,IAA+BA,MAAM;AAC1C,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa,GAC7B;AAAA,IAAEC;AAAAA,MAAMC,EAAgB;AAG5B,SAAAC,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAW,kCAAkCJ,CAAS,GACzD,GAAAI,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,wBACb,GAAAA,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAU,4BAA0BF,EAAE,gBAAgB,CAAE,GAC3DE,gBAAAA,EAAA,cAAA,KAAA,EAAE,WAAU,uBAAA,GAAwBF,EAAE,eAAe,CAAE,CAC1D,CACF;AAEJ;"}
+{"version":3,"file":"EmptyFeed.mjs","names":[],"sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport \"./styles.css\";\n\nexport const EmptyFeed: FunctionComponent = () => {\n  const { colorMode } = useKnockFeed();\n  const { t } = useTranslations();\n\n  return (\n    <div className={`rnf-empty-feed rnf-empty-feed--${colorMode}`}>\n      <div className=\"rnf-empty-feed__inner\">\n        <h2 className=\"rnf-empty-feed__header\">{t(\"emptyFeedTitle\")}</h2>\n        <p className=\"rnf-empty-feed__body\">{t(\"emptyFeedBody\")}</p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAKA,IAAa,UAAqC;CAChD,IAAM,EAAE,iBAAc,EAAa,GAC7B,EAAE,SAAM,EAAgB;CAE9B,OACE,kBAAC,OAAD;EAAK,WAAW,kCAAkC;YAChD,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,MAAD;IAAI,WAAU;cAA0B,EAAE,gBAAgB;GAAM,CAAA,GAChE,kBAAC,KAAD;IAAG,WAAU;cAAwB,EAAE,eAAe;GAAK,CAAA,CACxD;;CACF,CAAA;AAET"}

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

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

package/dist/esm/modules/feed/components/NotificationCell/ArchiveButton.mjs

@@ -1,41 +1,43 @@
-import n, { useState as p, useRef as f, useCallback as m, useEffect as d } from "react";
-import { useKnockFeed as v, useTranslations as b } from "@knocklabs/react-core";
-import { createPopper as h } from "@popperjs/core";
-import { CloseCircle as C } from "../../../core/components/Icons/CloseCircle.mjs";
-const g = ({
-  item: i
-}) => {
-  const {
-    colorMode: a,
-    feedClient: l
-  } = v(), {
-    t: c
-  } = b(), [t, s] = p(!1), o = f(null), r = f(null), u = m(
-    (e) => {
-      e.preventDefault(), e.stopPropagation(), l.markAsArchived(i);
-    },
-    // TODO: Check if we can remove this disable
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [i]
-  );
-  return d(() => {
-    if (o.current && r.current && t) {
-      const e = h(o.current, r.current, {
-        placement: "top-end",
-        modifiers: [{
-          name: "offset",
-          options: {
-            offset: [0, 8]
-          }
-        }]
-      });
-      return () => {
-        e.destroy();
-      };
-    }
-  }, [t]), /* @__PURE__ */ n.createElement("button", { ref: o, onClick: u, onMouseEnter: () => s(!0), onMouseLeave: () => s(!1), type: "button", "aria-label": c("archiveNotification"), className: `rnf-archive-notification-btn rnf-archive-notification-btn--${a}` }, /* @__PURE__ */ n.createElement(C, { "aria-hidden": !0 }), t && /* @__PURE__ */ n.createElement("div", { ref: r, className: `rnf-tooltip rnf-tooltip--${a}` }, c("archiveNotification")));
+import { CloseCircle as e } from "../../../core/components/Icons/CloseCircle.mjs";
+import "../../../core/components/Icons/index.mjs";
+import { useKnockFeed as t, useTranslations as n } from "@knocklabs/react-core";
+import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { createPopper as l } from "@popperjs/core";
+//#region src/modules/feed/components/NotificationCell/ArchiveButton.tsx
+var u = ({ item: u }) => {
+	let { colorMode: d, feedClient: f } = t(), { t: p } = n(), [m, h] = o(!1), g = a(null), _ = a(null), v = r((e) => {
+		e.preventDefault(), e.stopPropagation(), f.markAsArchived(u);
+	}, [u]);
+	return i(() => {
+		if (g.current && _.current && m) {
+			let e = l(g.current, _.current, {
+				placement: "top-end",
+				modifiers: [{
+					name: "offset",
+					options: { offset: [0, 8] }
+				}]
+			});
+			return () => {
+				e.destroy();
+			};
+		}
+	}, [m]), /* @__PURE__ */ c("button", {
+		ref: g,
+		onClick: v,
+		onMouseEnter: () => h(!0),
+		onMouseLeave: () => h(!1),
+		type: "button",
+		"aria-label": p("archiveNotification"),
+		className: `rnf-archive-notification-btn rnf-archive-notification-btn--${d}`,
+		children: [/* @__PURE__ */ s(e, { "aria-hidden": !0 }), m && /* @__PURE__ */ s("div", {
+			ref: _,
+			className: `rnf-tooltip rnf-tooltip--${d}`,
+			children: p("archiveNotification")
+		})]
+	});
 };
-export {
-  g as ArchiveButton
-};
-//# sourceMappingURL=ArchiveButton.mjs.map
+//#endregion
+export { u as ArchiveButton };
+
+//# sourceMappingURL=ArchiveButton.mjs.map

package/dist/esm/modules/feed/components/NotificationCell/ArchiveButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ArchiveButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { createPopper } from \"@popperjs/core\";\nimport { MouseEvent, useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CloseCircle } from \"../../../core/components/Icons\";\n\nexport interface ArchiveButtonProps {\n  item: FeedItem;\n}\n\nconst ArchiveButton: React.FC<ArchiveButtonProps> = ({ item }) => {\n  const { colorMode, feedClient } = useKnockFeed();\n  const { t } = useTranslations();\n  const [visible, setVisible] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const tooltipRef = useRef<HTMLDivElement>(null);\n\n  const onClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      feedClient.markAsArchived(item);\n    },\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [item],\n  );\n\n  useEffect(() => {\n    if (triggerRef.current && tooltipRef.current && visible) {\n      const popperInstance = createPopper(\n        triggerRef.current,\n        tooltipRef.current,\n        {\n          placement: \"top-end\",\n          modifiers: [\n            {\n              name: \"offset\",\n              options: {\n                offset: [0, 8],\n              },\n            },\n          ],\n        },\n      );\n\n      return () => {\n        popperInstance.destroy();\n      };\n    }\n  }, [visible]);\n\n  return (\n    <button\n      ref={triggerRef}\n      onClick={onClick}\n      onMouseEnter={() => setVisible(true)}\n      onMouseLeave={() => setVisible(false)}\n      type=\"button\"\n      aria-label={t(\"archiveNotification\")}\n      className={`rnf-archive-notification-btn rnf-archive-notification-btn--${colorMode}`}\n    >\n      <CloseCircle aria-hidden />\n\n      {visible && (\n        <div\n          ref={tooltipRef}\n          className={`rnf-tooltip rnf-tooltip--${colorMode}`}\n        >\n          {t(\"archiveNotification\")}\n        </div>\n      )}\n    </button>\n  );\n};\n\nexport { ArchiveButton };\n"],"names":["ArchiveButton","item","colorMode","feedClient","useKnockFeed","t","useTranslations","visible","setVisible","useState","triggerRef","useRef","tooltipRef","onClick","useCallback","e","preventDefault","stopPropagation","markAsArchived","useEffect","current","popperInstance","createPopper","placement","modifiers","name","options","offset","destroy","React","CloseCircle"],"mappings":";;;;AAWA,MAAMA,IAA8CA,CAAC;AAAA,EAAEC,MAAAA;AAAK,MAAM;AAC1D,QAAA;AAAA,IAAEC,WAAAA;AAAAA,IAAWC,YAAAA;AAAAA,MAAeC,EAAa,GACzC;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GACxB,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAaC,EAA0B,IAAI,GAC3CC,IAAaD,EAAuB,IAAI,GAExCE,IAAUC;AAAAA,IACd,CAACC,MAAqC;AACpCA,QAAEC,eAAe,GACjBD,EAAEE,gBAAgB,GAElBd,EAAWe,eAAejB,CAAI;AAAA,IAChC;AAAA;AAAA;AAAA,IAGA,CAACA,CAAI;AAAA,EACP;AAEAkB,SAAAA,EAAU,MAAM;AACd,QAAIT,EAAWU,WAAWR,EAAWQ,WAAWb,GAAS;AACvD,YAAMc,IAAiBC,EACrBZ,EAAWU,SACXR,EAAWQ,SACX;AAAA,QACEG,WAAW;AAAA,QACXC,WAAW,CACT;AAAA,UACEC,MAAM;AAAA,UACNC,SAAS;AAAA,YACPC,QAAQ,CAAC,GAAG,CAAC;AAAA,UAAA;AAAA,QAEhB,CAAA;AAAA,MAAA,CAGP;AAEA,aAAO,MAAM;AACXN,QAAAA,EAAeO,QAAQ;AAAA,MACzB;AAAA,IAAA;AAAA,EACF,GACC,CAACrB,CAAO,CAAC,mCAGT,UACC,EAAA,KAAKG,GACL,SAAAG,GACA,cAAc,MAAML,EAAW,EAAI,GACnC,cAAc,MAAMA,EAAW,EAAK,GACpC,MAAK,UACL,cAAYH,EAAE,qBAAqB,GACnC,WAAW,8DAA8DH,CAAS,MAElF2B,gBAAAA,EAAA,cAACC,KAAY,eAAW,IAAA,GAEvBvB,KACCsB,gBAAAA,EAAA,cAAC,SACC,KAAKjB,GACL,WAAW,4BAA4BV,CAAS,MAE/CG,EAAE,qBAAqB,CAC1B,CAEJ;AAEJ;"}
+{"version":3,"file":"ArchiveButton.mjs","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { createPopper } from \"@popperjs/core\";\nimport { MouseEvent, useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CloseCircle } from \"../../../core/components/Icons\";\n\nexport interface ArchiveButtonProps {\n  item: FeedItem;\n}\n\nconst ArchiveButton: React.FC<ArchiveButtonProps> = ({ item }) => {\n  const { colorMode, feedClient } = useKnockFeed();\n  const { t } = useTranslations();\n  const [visible, setVisible] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const tooltipRef = useRef<HTMLDivElement>(null);\n\n  const onClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      feedClient.markAsArchived(item);\n    },\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [item],\n  );\n\n  useEffect(() => {\n    if (triggerRef.current && tooltipRef.current && visible) {\n      const popperInstance = createPopper(\n        triggerRef.current,\n        tooltipRef.current,\n        {\n          placement: \"top-end\",\n          modifiers: [\n            {\n              name: \"offset\",\n              options: {\n                offset: [0, 8],\n              },\n            },\n          ],\n        },\n      );\n\n      return () => {\n        popperInstance.destroy();\n      };\n    }\n  }, [visible]);\n\n  return (\n    <button\n      ref={triggerRef}\n      onClick={onClick}\n      onMouseEnter={() => setVisible(true)}\n      onMouseLeave={() => setVisible(false)}\n      type=\"button\"\n      aria-label={t(\"archiveNotification\")}\n      className={`rnf-archive-notification-btn rnf-archive-notification-btn--${colorMode}`}\n    >\n      <CloseCircle aria-hidden />\n\n      {visible && (\n        <div\n          ref={tooltipRef}\n          className={`rnf-tooltip rnf-tooltip--${colorMode}`}\n        >\n          {t(\"archiveNotification\")}\n        </div>\n      )}\n    </button>\n  );\n};\n\nexport { ArchiveButton };\n"],"mappings":";;;;;;;AAWA,IAAM,KAA+C,EAAE,cAAW;CAChE,IAAM,EAAE,cAAW,kBAAe,EAAa,GACzC,EAAE,SAAM,EAAgB,GACxB,CAAC,GAAS,KAAc,EAAS,EAAK,GACtC,IAAa,EAA0B,IAAI,GAC3C,IAAa,EAAuB,IAAI,GAExC,IAAU,GACb,MAAqC;EAIpC,AAHA,EAAE,eAAe,GACjB,EAAE,gBAAgB,GAElB,EAAW,eAAe,CAAI;CAChC,GAGA,CAAC,CAAI,CACP;CA0BA,OAxBA,QAAgB;EACd,IAAI,EAAW,WAAW,EAAW,WAAW,GAAS;GACvD,IAAM,IAAiB,EACrB,EAAW,SACX,EAAW,SACX;IACE,WAAW;IACX,WAAW,CACT;KACE,MAAM;KACN,SAAS,EACP,QAAQ,CAAC,GAAG,CAAC,EACf;IACF,CACF;GACF,CACF;GAEA,aAAa;IACX,EAAe,QAAQ;GACzB;EACF;CACF,GAAG,CAAC,CAAO,CAAC,GAGV,kBAAC,UAAD;EACE,KAAK;EACI;EACT,oBAAoB,EAAW,EAAI;EACnC,oBAAoB,EAAW,EAAK;EACpC,MAAK;EACL,cAAY,EAAE,qBAAqB;EACnC,WAAW,8DAA8D;YAP3E,CASE,kBAAC,GAAD,EAAa,eAAA,GAAa,CAAA,GAEzB,KACC,kBAAC,OAAD;GACE,KAAK;GACL,WAAW,4BAA4B;aAEtC,EAAE,qBAAqB;EACrB,CAAA,CAED;;AAEZ"}

package/dist/esm/modules/feed/components/NotificationCell/Avatar.mjs

@@ -1,16 +1,25 @@
-import t from "react";
-/* empty css            */
-const m = ({
-  name: e,
-  src: r
-}) => {
-  function i(s) {
-    const [a, n] = s.split(" ");
-    return a && n ? `${a.charAt(0)}${n.charAt(0)}` : a ? a.charAt(0) : "";
-  }
-  return /* @__PURE__ */ t.createElement("div", { className: "rnf-avatar" }, r ? /* @__PURE__ */ t.createElement("img", { src: r, alt: e, className: "rnf-avatar__image" }) : /* @__PURE__ */ t.createElement("span", { className: "rnf-avatar__initials" }, i(e)));
+/* empty css        */
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/modules/feed/components/NotificationCell/Avatar.tsx
+var t = ({ name: t, src: n }) => {
+	function r(e) {
+		let [t, n] = e.split(" ");
+		return t && n ? `${t.charAt(0)}${n.charAt(0)}` : t ? t.charAt(0) : "";
+	}
+	return /* @__PURE__ */ e("div", {
+		className: "rnf-avatar",
+		children: n ? /* @__PURE__ */ e("img", {
+			src: n,
+			alt: t,
+			className: "rnf-avatar__image"
+		}) : /* @__PURE__ */ e("span", {
+			className: "rnf-avatar__initials",
+			children: r(t)
+		})
+	});
 };
-export {
-  m as Avatar
-};
-//# sourceMappingURL=Avatar.mjs.map
+//#endregion
+export { t as Avatar };
+
+//# sourceMappingURL=Avatar.mjs.map

package/dist/esm/modules/feed/components/NotificationCell/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport \"./styles.css\";\n\nexport interface AvatarProps {\n  name: string;\n  src?: string | null;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ name, src }) => {\n  function getInitials(name: string) {\n    const [firstName, lastName] = name.split(\" \");\n    return firstName && lastName\n      ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n      : firstName\n        ? firstName.charAt(0)\n        : \"\";\n  }\n\n  return (\n    <div className=\"rnf-avatar\">\n      {src ? (\n        <img src={src} alt={name} className=\"rnf-avatar__image\" />\n      ) : (\n        <span className=\"rnf-avatar__initials\">{getInitials(name)}</span>\n      )}\n    </div>\n  );\n};\n"],"names":["Avatar","name","src","getInitials","firstName","lastName","split","charAt","React"],"mappings":";;AASO,MAAMA,IAAgCA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,KAAAA;AAAI,MAAM;AAC9D,WAASC,EAAYF,GAAc;AACjC,UAAM,CAACG,GAAWC,CAAQ,IAAIJ,EAAKK,MAAM,GAAG;AAC5C,WAAOF,KAAaC,IAChB,GAAGD,EAAUG,OAAO,CAAC,CAAC,GAAGF,EAASE,OAAO,CAAC,CAAC,KAC3CH,IACEA,EAAUG,OAAO,CAAC,IAClB;AAAA,EAAA;AAIN,SAAAC,gBAAAA,EAAA,cAAC,SAAI,WAAU,gBACZN,IACEM,gBAAAA,EAAA,cAAA,OAAA,EAAI,KAAAN,GAAU,KAAKD,GAAM,WAAU,yDAEnC,QAAK,EAAA,WAAU,0BAAwBE,EAAYF,CAAI,CAAE,CAE9D;AAEJ;"}
+{"version":3,"file":"Avatar.mjs","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport \"./styles.css\";\n\nexport interface AvatarProps {\n  name: string;\n  src?: string | null;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ name, src }) => {\n  function getInitials(name: string) {\n    const [firstName, lastName] = name.split(\" \");\n    return firstName && lastName\n      ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n      : firstName\n        ? firstName.charAt(0)\n        : \"\";\n  }\n\n  return (\n    <div className=\"rnf-avatar\">\n      {src ? (\n        <img src={src} alt={name} className=\"rnf-avatar__image\" />\n      ) : (\n        <span className=\"rnf-avatar__initials\">{getInitials(name)}</span>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;AASA,IAAa,KAAiC,EAAE,SAAM,aAAU;CAC9D,SAAS,EAAY,GAAc;EACjC,IAAM,CAAC,GAAW,KAAY,EAAK,MAAM,GAAG;EAC5C,OAAO,KAAa,IAChB,GAAG,EAAU,OAAO,CAAC,IAAI,EAAS,OAAO,CAAC,MAC1C,IACE,EAAU,OAAO,CAAC,IAClB;CACR;CAEA,OACE,kBAAC,OAAD;EAAK,WAAU;YACZ,IACC,kBAAC,OAAD;GAAU;GAAK,KAAK;GAAM,WAAU;EAAqB,CAAA,IAEzD,kBAAC,QAAD;GAAM,WAAU;aAAwB,EAAY,CAAI;EAAQ,CAAA;CAE/D,CAAA;AAET"}

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

@@ -1,66 +1,90 @@
-import { useKnockFeed as w, useTranslations as T, renderNodeOrFallback as u, formatTimestamp as h } from "@knocklabs/react-core";
-import n, { useMemo as A } from "react";
-import { Button as B } from "../../../core/components/Button/Button.mjs";
-import { ButtonGroup as H } from "../../../core/components/Button/ButtonGroup.mjs";
-import { ArchiveButton as M } from "./ArchiveButton.mjs";
-import { Avatar as x } from "./Avatar.mjs";
-/* empty css            */
-function p(e) {
-  e && e !== "" && setTimeout(() => window.location.assign(e), 200);
+import { Button as e } from "../../../core/components/Button/Button.mjs";
+import { ButtonGroup as t } from "../../../core/components/Button/ButtonGroup.mjs";
+import "../../../core/index.mjs";
+import { ArchiveButton as n } from "./ArchiveButton.mjs";
+/* empty css        */
+import { Avatar as r } from "./Avatar.mjs";
+import { formatTimestamp as i, renderNodeOrFallback as a, useKnockFeed as o, useTranslations as s } from "@knocklabs/react-core";
+import c, { useMemo as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/modules/feed/components/NotificationCell/NotificationCell.tsx
+function f(e) {
+	e && e !== "" && setTimeout(() => window.location.assign(e), 200);
 }
-const G = n.forwardRef(({
-  item: e,
-  onItemClick: l,
-  onButtonClick: i,
-  avatar: k,
-  children: f,
-  archiveButton: y
-}, E) => {
-  var _;
-  const {
-    feedClient: o,
-    colorMode: N
-  } = w(), {
-    locale: b
-  } = T(), c = A(() => e.blocks.reduce((t, a) => ({
-    ...t,
-    [a.name]: a
-  }), {}), [e]), s = (_ = c.action_url) == null ? void 0 : _.rendered, d = c.actions, m = n.useCallback(() => (o.markAsInteracted(e, {
-    type: "cell_click",
-    action: s
-  }), l ? l(e) : p(s)), [e, s, l, o]), v = n.useCallback((t, a) => (o.markAsInteracted(e, {
-    type: "button_click",
-    name: a.name,
-    label: a.label,
-    action: a.action
-  }), i ? i(e, a) : p(a.action)), [i, o, e]), C = n.useCallback((t) => {
-    switch (t.key) {
-      case "Enter": {
-        t.stopPropagation(), m();
-        break;
-      }
-    }
-  }, [m]), r = e.actors[0];
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ n.createElement(
-      "div",
-      {
-        ref: E,
-        className: `rnf-notification-cell rnf-notification-cell--${N}`,
-        onClick: m,
-        onKeyDown: C,
-        tabIndex: 0
-      },
-      /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__inner" }, !e.read_at && /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__unread-dot" }), u(k, r && "name" in r && r.name && /* @__PURE__ */ n.createElement(x, { name: r.name, src: r.avatar })), /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__content-outer" }, c.body && /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__content", dangerouslySetInnerHTML: {
-        __html: c.body.rendered
-      } }), d && /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__button-group" }, /* @__PURE__ */ n.createElement(H, null, d.buttons.map((t, a) => /* @__PURE__ */ n.createElement(B, { variant: a === 0 ? "primary" : "secondary", key: t.name, onClick: (g) => v(g, t) }, t.label)))), f && /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__child-content" }, f), /* @__PURE__ */ n.createElement("span", { className: "rnf-notification-cell__timestamp" }, h(e.inserted_at, {
-        locale: b
-      }))), u(y, /* @__PURE__ */ n.createElement(M, { item: e })))
-    )
-  );
+var p = c.forwardRef(({ item: p, onItemClick: m, onButtonClick: h, avatar: g, children: _, archiveButton: v }, y) => {
+	let { feedClient: b, colorMode: x } = o(), { locale: S } = s(), C = l(() => p.blocks.reduce((e, t) => ({
+		...e,
+		[t.name]: t
+	}), {}), [p]), w = C.action_url?.rendered, T = C.actions, E = c.useCallback(() => (b.markAsInteracted(p, {
+		type: "cell_click",
+		action: w
+	}), m ? m(p) : f(w)), [
+		p,
+		w,
+		m,
+		b
+	]), D = c.useCallback((e, t) => (b.markAsInteracted(p, {
+		type: "button_click",
+		name: t.name,
+		label: t.label,
+		action: t.action
+	}), h ? h(p, t) : f(t.action)), [
+		h,
+		b,
+		p
+	]), O = c.useCallback((e) => {
+		switch (e.key) {
+			case "Enter":
+				e.stopPropagation(), E();
+				break;
+			default: break;
+		}
+	}, [E]), k = p.actors[0];
+	return /* @__PURE__ */ u("div", {
+		ref: y,
+		className: `rnf-notification-cell rnf-notification-cell--${x}`,
+		onClick: E,
+		onKeyDown: O,
+		tabIndex: 0,
+		children: /* @__PURE__ */ d("div", {
+			className: "rnf-notification-cell__inner",
+			children: [
+				!p.read_at && /* @__PURE__ */ u("div", { className: "rnf-notification-cell__unread-dot" }),
+				a(g, k && "name" in k && k.name && /* @__PURE__ */ u(r, {
+					name: k.name,
+					src: k.avatar
+				})),
+				/* @__PURE__ */ d("div", {
+					className: "rnf-notification-cell__content-outer",
+					children: [
+						C.body && /* @__PURE__ */ u("div", {
+							className: "rnf-notification-cell__content",
+							dangerouslySetInnerHTML: { __html: C.body.rendered }
+						}),
+						T && /* @__PURE__ */ u("div", {
+							className: "rnf-notification-cell__button-group",
+							children: /* @__PURE__ */ u(t, { children: T.buttons.map((t, n) => /* @__PURE__ */ u(e, {
+								variant: n === 0 ? "primary" : "secondary",
+								onClick: (e) => D(e, t),
+								children: t.label
+							}, t.name)) })
+						}),
+						_ && /* @__PURE__ */ u("div", {
+							className: "rnf-notification-cell__child-content",
+							children: _
+						}),
+						/* @__PURE__ */ u("span", {
+							className: "rnf-notification-cell__timestamp",
+							children: i(p.inserted_at, { locale: S })
+						})
+					]
+				}),
+				a(v, /* @__PURE__ */ u(n, { item: p }))
+			]
+		})
+	});
 });
-export {
-  G as NotificationCell
-};
-//# sourceMappingURL=NotificationCell.mjs.map
+//#endregion
+export { p as NotificationCell };
+
+//# sourceMappingURL=NotificationCell.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationCell.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import {\n  ActionButton,\n  ButtonSetContentBlock,\n  ContentBlock,\n  FeedItem,\n  MarkdownContentBlock,\n  TextContentBlock,\n} from \"@knocklabs/client\";\nimport {\n  formatTimestamp,\n  renderNodeOrFallback,\n  useKnockFeed,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, { ReactNode, useMemo } from \"react\";\n\nimport { Button, ButtonGroup } from \"../../../core\";\n\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport { Avatar } from \"./Avatar\";\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n  item: FeedItem;\n  // Invoked when the outer container is clicked\n  onItemClick?: (item: FeedItem) => void;\n  // Invoked when a button in the notification cell is clicked\n  onButtonClick?: (item: FeedItem, action: ActionButton) => void;\n  avatar?: ReactNode;\n  children?: ReactNode;\n  archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n  [name: string]: ContentBlock;\n};\n\nfunction maybeNavigateToUrlWithDelay(url?: string) {\n  if (url && url !== \"\") {\n    setTimeout(() => window.location.assign(url), 200);\n  }\n}\n\nexport const NotificationCell = React.forwardRef<\n  HTMLDivElement,\n  NotificationCellProps\n>(\n  (\n    { item, onItemClick, onButtonClick, avatar, children, archiveButton },\n    ref,\n  ) => {\n    const { feedClient, colorMode } = useKnockFeed();\n    const { locale } = useTranslations();\n\n    const blocksByName: BlockByName = useMemo(() => {\n      return item.blocks.reduce((acc, block) => {\n        return { ...acc, [block.name]: block };\n      }, {});\n    }, [item]);\n\n    const actionUrl = (blocksByName.action_url as TextContentBlock)?.rendered;\n    const buttonSet = blocksByName.actions as ButtonSetContentBlock;\n\n    const onContainerClickHandler = React.useCallback(() => {\n      // Mark as interacted + read once we click the item\n      feedClient.markAsInteracted(item, {\n        type: \"cell_click\",\n        action: actionUrl,\n      });\n\n      if (onItemClick) return onItemClick(item);\n\n      return maybeNavigateToUrlWithDelay(actionUrl);\n    }, [item, actionUrl, onItemClick, feedClient]);\n\n    const onButtonClickHandler = React.useCallback(\n      (_e: React.MouseEvent, button: ActionButton) => {\n        // Record the interaction with the metadata for the button that was clicked\n        feedClient.markAsInteracted(item, {\n          type: \"button_click\",\n          name: button.name,\n          label: button.label,\n          action: button.action,\n        });\n\n        if (onButtonClick) return onButtonClick(item, button);\n\n        return maybeNavigateToUrlWithDelay(button.action);\n      },\n      [onButtonClick, feedClient, item],\n    );\n\n    const onKeyDown = React.useCallback(\n      (ev: React.KeyboardEvent<HTMLDivElement>) => {\n        switch (ev.key) {\n          case \"Enter\": {\n            ev.stopPropagation();\n            onContainerClickHandler();\n            break;\n          }\n          default:\n            break;\n        }\n      },\n      [onContainerClickHandler],\n    );\n\n    const actor = item.actors[0];\n\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n      <div\n        ref={ref}\n        className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n        onClick={onContainerClickHandler}\n        onKeyDown={onKeyDown}\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n      >\n        <div className=\"rnf-notification-cell__inner\">\n          {!item.read_at && (\n            <div className=\"rnf-notification-cell__unread-dot\" />\n          )}\n\n          {renderNodeOrFallback(\n            avatar,\n            actor && \"name\" in actor && actor.name && (\n              <Avatar name={actor.name} src={actor.avatar} />\n            ),\n          )}\n\n          <div className=\"rnf-notification-cell__content-outer\">\n            {blocksByName.body && (\n              <div\n                className=\"rnf-notification-cell__content\"\n                dangerouslySetInnerHTML={{\n                  __html: (blocksByName.body as MarkdownContentBlock).rendered,\n                }}\n              />\n            )}\n\n            {buttonSet && (\n              <div className=\"rnf-notification-cell__button-group\">\n                <ButtonGroup>\n                  {buttonSet.buttons.map((button, i) => (\n                    <Button\n                      variant={i === 0 ? \"primary\" : \"secondary\"}\n                      key={button.name}\n                      onClick={(e) => onButtonClickHandler(e, button)}\n                    >\n                      {button.label}\n                    </Button>\n                  ))}\n                </ButtonGroup>\n              </div>\n            )}\n\n            {children && (\n              <div className=\"rnf-notification-cell__child-content\">\n                {children}\n              </div>\n            )}\n\n            <span className=\"rnf-notification-cell__timestamp\">\n              {formatTimestamp(item.inserted_at, { locale })}\n            </span>\n          </div>\n\n          {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["maybeNavigateToUrlWithDelay","url","setTimeout","window","location","assign","NotificationCell","React","forwardRef","item","onItemClick","onButtonClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","blocks","reduce","acc","block","name","actionUrl","action_url","rendered","buttonSet","actions","onContainerClickHandler","useCallback","markAsInteracted","type","action","onButtonClickHandler","_e","button","label","onKeyDown","ev","key","stopPropagation","actor","actors","read_at","renderNodeOrFallback","Avatar","body","__html","ButtonGroup","buttons","map","i","Button","e","formatTimestamp","inserted_at","ArchiveButton"],"mappings":"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"}
+{"version":3,"file":"NotificationCell.mjs","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import {\n  ActionButton,\n  ButtonSetContentBlock,\n  ContentBlock,\n  FeedItem,\n  MarkdownContentBlock,\n  TextContentBlock,\n} from \"@knocklabs/client\";\nimport {\n  formatTimestamp,\n  renderNodeOrFallback,\n  useKnockFeed,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, { ReactNode, useMemo } from \"react\";\n\nimport { Button, ButtonGroup } from \"../../../core\";\n\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport { Avatar } from \"./Avatar\";\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n  item: FeedItem;\n  // Invoked when the outer container is clicked\n  onItemClick?: (item: FeedItem) => void;\n  // Invoked when a button in the notification cell is clicked\n  onButtonClick?: (item: FeedItem, action: ActionButton) => void;\n  avatar?: ReactNode;\n  children?: ReactNode;\n  archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n  [name: string]: ContentBlock;\n};\n\nfunction maybeNavigateToUrlWithDelay(url?: string) {\n  if (url && url !== \"\") {\n    setTimeout(() => window.location.assign(url), 200);\n  }\n}\n\nexport const NotificationCell = React.forwardRef<\n  HTMLDivElement,\n  NotificationCellProps\n>(\n  (\n    { item, onItemClick, onButtonClick, avatar, children, archiveButton },\n    ref,\n  ) => {\n    const { feedClient, colorMode } = useKnockFeed();\n    const { locale } = useTranslations();\n\n    const blocksByName: BlockByName = useMemo(() => {\n      return item.blocks.reduce((acc, block) => {\n        return { ...acc, [block.name]: block };\n      }, {});\n    }, [item]);\n\n    const actionUrl = (blocksByName.action_url as TextContentBlock)?.rendered;\n    const buttonSet = blocksByName.actions as ButtonSetContentBlock;\n\n    const onContainerClickHandler = React.useCallback(() => {\n      // Mark as interacted + read once we click the item\n      feedClient.markAsInteracted(item, {\n        type: \"cell_click\",\n        action: actionUrl,\n      });\n\n      if (onItemClick) return onItemClick(item);\n\n      return maybeNavigateToUrlWithDelay(actionUrl);\n    }, [item, actionUrl, onItemClick, feedClient]);\n\n    const onButtonClickHandler = React.useCallback(\n      (_e: React.MouseEvent, button: ActionButton) => {\n        // Record the interaction with the metadata for the button that was clicked\n        feedClient.markAsInteracted(item, {\n          type: \"button_click\",\n          name: button.name,\n          label: button.label,\n          action: button.action,\n        });\n\n        if (onButtonClick) return onButtonClick(item, button);\n\n        return maybeNavigateToUrlWithDelay(button.action);\n      },\n      [onButtonClick, feedClient, item],\n    );\n\n    const onKeyDown = React.useCallback(\n      (ev: React.KeyboardEvent<HTMLDivElement>) => {\n        switch (ev.key) {\n          case \"Enter\": {\n            ev.stopPropagation();\n            onContainerClickHandler();\n            break;\n          }\n          default:\n            break;\n        }\n      },\n      [onContainerClickHandler],\n    );\n\n    const actor = item.actors[0];\n\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n      <div\n        ref={ref}\n        className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n        onClick={onContainerClickHandler}\n        onKeyDown={onKeyDown}\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n      >\n        <div className=\"rnf-notification-cell__inner\">\n          {!item.read_at && (\n            <div className=\"rnf-notification-cell__unread-dot\" />\n          )}\n\n          {renderNodeOrFallback(\n            avatar,\n            actor && \"name\" in actor && actor.name && (\n              <Avatar name={actor.name} src={actor.avatar} />\n            ),\n          )}\n\n          <div className=\"rnf-notification-cell__content-outer\">\n            {blocksByName.body && (\n              <div\n                className=\"rnf-notification-cell__content\"\n                dangerouslySetInnerHTML={{\n                  __html: (blocksByName.body as MarkdownContentBlock).rendered,\n                }}\n              />\n            )}\n\n            {buttonSet && (\n              <div className=\"rnf-notification-cell__button-group\">\n                <ButtonGroup>\n                  {buttonSet.buttons.map((button, i) => (\n                    <Button\n                      variant={i === 0 ? \"primary\" : \"secondary\"}\n                      key={button.name}\n                      onClick={(e) => onButtonClickHandler(e, button)}\n                    >\n                      {button.label}\n                    </Button>\n                  ))}\n                </ButtonGroup>\n              </div>\n            )}\n\n            {children && (\n              <div className=\"rnf-notification-cell__child-content\">\n                {children}\n              </div>\n            )}\n\n            <span className=\"rnf-notification-cell__timestamp\">\n              {formatTimestamp(item.inserted_at, { locale })}\n            </span>\n          </div>\n\n          {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAqCA,SAAS,EAA4B,GAAc;CACjD,AAAI,KAAO,MAAQ,MACjB,iBAAiB,OAAO,SAAS,OAAO,CAAG,GAAG,GAAG;AAErD;AAEA,IAAa,IAAmB,EAAM,YAKlC,EAAE,SAAM,gBAAa,kBAAe,WAAQ,aAAU,oBACtD,MACG;CACH,IAAM,EAAE,eAAY,iBAAc,EAAa,GACzC,EAAE,cAAW,EAAgB,GAE7B,IAA4B,QACzB,EAAK,OAAO,QAAQ,GAAK,OACvB;EAAE,GAAG;GAAM,EAAM,OAAO;CAAM,IACpC,CAAC,CAAC,GACJ,CAAC,CAAI,CAAC,GAEH,IAAa,EAAa,YAAiC,UAC3D,IAAY,EAAa,SAEzB,IAA0B,EAAM,mBAEpC,EAAW,iBAAiB,GAAM;EAChC,MAAM;EACN,QAAQ;CACV,CAAC,GAEG,IAAoB,EAAY,CAAI,IAEjC,EAA4B,CAAS,IAC3C;EAAC;EAAM;EAAW;EAAa;CAAU,CAAC,GAEvC,IAAuB,EAAM,aAChC,GAAsB,OAErB,EAAW,iBAAiB,GAAM;EAChC,MAAM;EACN,MAAM,EAAO;EACb,OAAO,EAAO;EACd,QAAQ,EAAO;CACjB,CAAC,GAEG,IAAsB,EAAc,GAAM,CAAM,IAE7C,EAA4B,EAAO,MAAM,IAElD;EAAC;EAAe;EAAY;CAAI,CAClC,GAEM,IAAY,EAAM,aACrB,MAA4C;EAC3C,QAAQ,EAAG,KAAX;GACE,KAAK;IAEH,AADA,EAAG,gBAAgB,GACnB,EAAwB;IACxB;GAEF,SACE;EACJ;CACF,GACA,CAAC,CAAuB,CAC1B,GAEM,IAAQ,EAAK,OAAO;CAE1B,OAEE,kBAAC,OAAD;EACO;EACL,WAAW,gDAAgD;EAC3D,SAAS;EACE;EAEX,UAAU;YAEV,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,CAAC,EAAK,WACL,kBAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;IAGrD,EACC,GACA,KAAS,UAAU,KAAS,EAAM,QAChC,kBAAC,GAAD;KAAQ,MAAM,EAAM;KAAM,KAAK,EAAM;IAAS,CAAA,CAElD;IAEA,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,EAAa,QACZ,kBAAC,OAAD;OACE,WAAU;OACV,yBAAyB,EACvB,QAAS,EAAa,KAA8B,SACtD;MACD,CAAA;MAGF,KACC,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAA,UACG,EAAU,QAAQ,KAAK,GAAQ,MAC9B,kBAAC,GAAD;QACE,SAAS,MAAM,IAAI,YAAY;QAE/B,UAAU,MAAM,EAAqB,GAAG,CAAM;kBAE7C,EAAO;OACF,GAJD,EAAO,IAIN,CACT,EACU,CAAA;MACV,CAAA;MAGN,KACC,kBAAC,OAAD;OAAK,WAAU;OACZ;MACE,CAAA;MAGP,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAgB,EAAK,aAAa,EAAE,UAAO,CAAC;MACzC,CAAA;KACH;;IAEJ,EAAqB,GAAe,kBAAC,GAAD,EAAqB,QAAO,CAAA,CAAC;GAC/D;;CACF,CAAA;AAET,CACF"}

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

@@ -0,0 +1,3 @@
+import { Avatar as e } from "./Avatar.mjs";
+import { NotificationCell as t } from "./NotificationCell.mjs";
+export { e as Avatar, t as NotificationCell };

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

@@ -1,18 +1,23 @@
-import { useKnockFeed as a } from "@knocklabs/react-core";
-import e from "react";
-import { ChevronDown as c } from "../../../core/components/Icons/ChevronDown.mjs";
-/* empty css            */
-const f = ({
-  children: o,
-  value: r,
-  onChange: t
-}) => {
-  const {
-    colorMode: n
-  } = a();
-  return /* @__PURE__ */ e.createElement("div", { className: `rnf-dropdown rnf-dropdown--${n}` }, /* @__PURE__ */ e.createElement("select", { "aria-label": "Select notification filter", value: r, onChange: t }, o), /* @__PURE__ */ e.createElement(c, { "aria-hidden": !0 }));
+import { ChevronDown as e } from "../../../core/components/Icons/ChevronDown.mjs";
+import "../../../core/components/Icons/index.mjs";
+/* empty css        */
+import { useKnockFeed as t } from "@knocklabs/react-core";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/modules/feed/components/NotificationFeed/Dropdown.tsx
+var i = ({ children: i, value: a, onChange: o }) => {
+	let { colorMode: s } = t();
+	return /* @__PURE__ */ r("div", {
+		className: `rnf-dropdown rnf-dropdown--${s}`,
+		children: [/* @__PURE__ */ n("select", {
+			"aria-label": "Select notification filter",
+			value: a,
+			onChange: o,
+			children: i
+		}), /* @__PURE__ */ n(e, { "aria-hidden": !0 })]
+	});
 };
-export {
-  f as Dropdown
-};
-//# sourceMappingURL=Dropdown.mjs.map
+//#endregion
+export { i as Dropdown };
+
+//# sourceMappingURL=Dropdown.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n  children,\n  value,\n  onChange,\n}) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n      <select\n        aria-label=\"Select notification filter\"\n        value={value}\n        onChange={onChange}\n      >\n        {children}\n      </select>\n      <ChevronDown aria-hidden />\n    </div>\n  );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","ChevronDown"],"mappings":";;;;AAYO,MAAMA,IAAuDA,CAAC;AAAA,EACnEC,UAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa;AAEnC,yCACG,OAAI,EAAA,WAAW,8BAA8BD,CAAS,GAAA,mCACpD,UACC,EAAA,cAAW,8BACX,OAAAF,GACA,UAAAC,KAECF,CACH,mCACCK,GAAY,EAAA,eAAW,GAAA,CAAA,CAC1B;AAEJ;"}
+{"version":3,"file":"Dropdown.mjs","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n  children,\n  value,\n  onChange,\n}) => {\n  const { colorMode } = useKnockFeed();\n\n  return (\n    <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n      <select\n        aria-label=\"Select notification filter\"\n        value={value}\n        onChange={onChange}\n      >\n        {children}\n      </select>\n      <ChevronDown aria-hidden />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAYA,IAAa,KAAwD,EACnE,aACA,UACA,kBACI;CACJ,IAAM,EAAE,iBAAc,EAAa;CAEnC,OACE,kBAAC,OAAD;EAAK,WAAW,8BAA8B;YAA9C,CACE,kBAAC,UAAD;GACE,cAAW;GACJ;GACG;GAET;EACK,CAAA,GACR,kBAAC,GAAD,EAAa,eAAA,GAAa,CAAA,CACvB;;AAET"}

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

@@ -1,22 +1,27 @@
-import { useKnockFeed as i, useTranslations as u } from "@knocklabs/react-core";
-import * as t from "react";
-import { CheckmarkCircle as k } from "../../../core/components/Icons/CheckmarkCircle.mjs";
-/* empty css            */
-const C = ({
-  onClick: a
-}) => {
-  const {
-    useFeedStore: r,
-    feedClient: n,
-    colorMode: s
-  } = i(), {
-    t: l
-  } = u(), o = r((e) => e.items.filter((c) => !c.read_at)), d = r((e) => e.metadata.unread_count), m = 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: d === 0, onClick: m, type: "button" }, l("markAllAsRead"), /* @__PURE__ */ t.createElement(k, { "aria-hidden": !0 }));
+import { CheckmarkCircle as e } from "../../../core/components/Icons/CheckmarkCircle.mjs";
+import "../../../core/components/Icons/index.mjs";
+/* empty css        */
+import { useKnockFeed as t, useTranslations as n } from "@knocklabs/react-core";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/modules/feed/components/NotificationFeed/MarkAsRead.tsx
+var o = ({ onClick: o }) => {
+	let { useFeedStore: s, feedClient: c, colorMode: l } = t(), { t: u } = n(), d = s((e) => e.items.filter((e) => !e.read_at)), f = s((e) => e.metadata.unread_count), p = r.useCallback((e) => {
+		c.markAllAsRead(), o && o(e, d);
+	}, [
+		c,
+		d,
+		o
+	]);
+	return /* @__PURE__ */ a("button", {
+		className: `rnf-mark-all-as-read rnf-mark-all-as-read--${l}`,
+		disabled: f === 0,
+		onClick: p,
+		type: "button",
+		children: [u("markAllAsRead"), /* @__PURE__ */ i(e, { "aria-hidden": !0 })]
+	});
 };
-export {
-  C as MarkAsRead
-};
-//# sourceMappingURL=MarkAsRead.mjs.map
+//#endregion
+export { o 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 { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport * as React from \"react\";\n\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 aria-hidden />\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":";;;;AAYO,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,KAAiBmB,EAAAA,GAAGZ,CAAW;AAAA,EAErC,GAAA,CAACL,GAAYK,GAAaP,CAAO,CACnC;AAGE,SAAA,gBAAAiB,EAAA,cAAC,YACC,WAAW,8CAA8Cd,CAAS,IAClE,UAAUU,MAAgB,GAC1B,SAASG,GACT,MAAK,YAEJX,EAAE,eAAe,mCACjBgB,GAAgB,EAAA,eAAW,GAAA,CAAA,CAC9B;AAEJ;"}
+{"version":3,"file":"MarkAsRead.mjs","names":[],"sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport * as React from \"react\";\n\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 aria-hidden />\n    </button>\n  );\n};\n"],"mappings":";;;;;;;AAYA,IAAa,KAAyC,EAAE,iBAAc;CACpE,IAAM,EAAE,iBAAc,eAAY,iBAAc,EAAa,GACvD,EAAE,SAAM,EAAgB,GAExB,IAAc,GAAc,MAChC,EAAM,MAAM,QAAQ,MAAS,CAAC,EAAK,OAAO,CAC5C,GAEM,IAAc,GAAc,MAAU,EAAM,SAAS,YAAY,GAEjE,IAAiB,EAAM,aAC1B,MAAwB;EAEvB,AADA,EAAW,cAAc,GACrB,KAAS,EAAQ,GAAG,CAAW;CACrC,GACA;EAAC;EAAY;EAAa;CAAO,CACnC;CAEA,OACE,kBAAC,UAAD;EACE,WAAW,8CAA8C;EACzD,UAAU,MAAgB;EAC1B,SAAS;EACT,MAAK;YAJP,CAMG,EAAE,eAAe,GAClB,kBAAC,GAAD,EAAiB,eAAA,GAAa,CAAA,CACxB;;AAEZ"}