@knocklabs/react 0.2.8 → 0.2.10

package/dist/esm/modules/core/components/Icons/CloseCircle.mjs

@@ -1,22 +1,6 @@
-import { jsx as C } from "react/jsx-runtime";
-const l = () => /* @__PURE__ */ C(
-  "svg",
-  {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ C(
-      "path",
-      {
-        d: "M7.00012 0.499939C3.41606 0.499939 0.500122 3.41588 0.500122 6.99994C0.500122 10.584 3.41606 13.4999 7.00012 13.4999C10.5842 13.4999 13.5001 10.584 13.5001 6.99994C13.5001 3.41588 10.5842 0.499939 7.00012 0.499939ZM9.35356 8.6465C9.40194 8.69247 9.44063 8.74766 9.46735 8.80881C9.49407 8.86997 9.50828 8.93585 9.50913 9.00259C9.50999 9.06932 9.49747 9.13555 9.47233 9.19737C9.44718 9.25919 9.40992 9.31535 9.36273 9.36254C9.31553 9.40973 9.25937 9.447 9.19755 9.47214C9.13573 9.49729 9.0695 9.5098 9.00277 9.50895C8.93604 9.50809 8.87015 9.49389 8.809 9.46717C8.74784 9.44045 8.69265 9.40176 8.64668 9.35337L7.00012 7.70712L5.35356 9.35337C5.25903 9.44318 5.13315 9.49251 5.00277 9.49084C4.87239 9.48918 4.74782 9.43664 4.65562 9.34444C4.56342 9.25224 4.51088 9.12767 4.50921 8.99729C4.50755 8.86691 4.55687 8.74103 4.64668 8.6465L6.29293 6.99994L4.64668 5.35338C4.55687 5.25884 4.50755 5.13297 4.50921 5.00259C4.51088 4.87221 4.56342 4.74764 4.65562 4.65544C4.74782 4.56324 4.87239 4.5107 5.00277 4.50903C5.13315 4.50736 5.25903 4.55669 5.35356 4.6465L7.00012 6.29275L8.64668 4.6465C8.74121 4.55669 8.86709 4.50736 8.99747 4.50903C9.12785 4.5107 9.25242 4.56324 9.34462 4.65544C9.43682 4.74764 9.48936 4.87221 9.49103 5.00259C9.4927 5.13297 9.44337 5.25884 9.35356 5.35338L7.70731 6.99994L9.35356 8.6465Z",
-        fill: "currentColor"
-      }
-    )
-  }
-);
+import C from "react";
+const t = () => /* @__PURE__ */ C.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ C.createElement("path", { d: "M7.00012 0.499939C3.41606 0.499939 0.500122 3.41588 0.500122 6.99994C0.500122 10.584 3.41606 13.4999 7.00012 13.4999C10.5842 13.4999 13.5001 10.584 13.5001 6.99994C13.5001 3.41588 10.5842 0.499939 7.00012 0.499939ZM9.35356 8.6465C9.40194 8.69247 9.44063 8.74766 9.46735 8.80881C9.49407 8.86997 9.50828 8.93585 9.50913 9.00259C9.50999 9.06932 9.49747 9.13555 9.47233 9.19737C9.44718 9.25919 9.40992 9.31535 9.36273 9.36254C9.31553 9.40973 9.25937 9.447 9.19755 9.47214C9.13573 9.49729 9.0695 9.5098 9.00277 9.50895C8.93604 9.50809 8.87015 9.49389 8.809 9.46717C8.74784 9.44045 8.69265 9.40176 8.64668 9.35337L7.00012 7.70712L5.35356 9.35337C5.25903 9.44318 5.13315 9.49251 5.00277 9.49084C4.87239 9.48918 4.74782 9.43664 4.65562 9.34444C4.56342 9.25224 4.51088 9.12767 4.50921 8.99729C4.50755 8.86691 4.55687 8.74103 4.64668 8.6465L6.29293 6.99994L4.64668 5.35338C4.55687 5.25884 4.50755 5.13297 4.50921 5.00259C4.51088 4.87221 4.56342 4.74764 4.65562 4.65544C4.74782 4.56324 4.87239 4.5107 5.00277 4.50903C5.13315 4.50736 5.25903 4.55669 5.35356 4.6465L7.00012 6.29275L8.64668 4.6465C8.74121 4.55669 8.86709 4.50736 8.99747 4.50903C9.12785 4.5107 9.25242 4.56324 9.34462 4.65544C9.43682 4.74764 9.48936 4.87221 9.49103 5.00259C9.4927 5.13297 9.44337 5.25884 9.35356 5.35338L7.70731 6.99994L9.35356 8.6465Z", fill: "currentColor" }));
 export {
-  l as CloseCircle
+  t as CloseCircle
 };
 //# sourceMappingURL=CloseCircle.mjs.map

package/dist/esm/modules/core/components/Icons/CloseCircle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CloseCircle.mjs","sources":["../../../../../../src/modules/core/components/Icons/CloseCircle.tsx"],"sourcesContent":["const CloseCircle = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 14 14\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M7.00012 0.499939C3.41606 0.499939 0.500122 3.41588 0.500122 6.99994C0.500122 10.584 3.41606 13.4999 7.00012 13.4999C10.5842 13.4999 13.5001 10.584 13.5001 6.99994C13.5001 3.41588 10.5842 0.499939 7.00012 0.499939ZM9.35356 8.6465C9.40194 8.69247 9.44063 8.74766 9.46735 8.80881C9.49407 8.86997 9.50828 8.93585 9.50913 9.00259C9.50999 9.06932 9.49747 9.13555 9.47233 9.19737C9.44718 9.25919 9.40992 9.31535 9.36273 9.36254C9.31553 9.40973 9.25937 9.447 9.19755 9.47214C9.13573 9.49729 9.0695 9.5098 9.00277 9.50895C8.93604 9.50809 8.87015 9.49389 8.809 9.46717C8.74784 9.44045 8.69265 9.40176 8.64668 9.35337L7.00012 7.70712L5.35356 9.35337C5.25903 9.44318 5.13315 9.49251 5.00277 9.49084C4.87239 9.48918 4.74782 9.43664 4.65562 9.34444C4.56342 9.25224 4.51088 9.12767 4.50921 8.99729C4.50755 8.86691 4.55687 8.74103 4.64668 8.6465L6.29293 6.99994L4.64668 5.35338C4.55687 5.25884 4.50755 5.13297 4.50921 5.00259C4.51088 4.87221 4.56342 4.74764 4.65562 4.65544C4.74782 4.56324 4.87239 4.5107 5.00277 4.50903C5.13315 4.50736 5.25903 4.55669 5.35356 4.6465L7.00012 6.29275L8.64668 4.6465C8.74121 4.55669 8.86709 4.50736 8.99747 4.50903C9.12785 4.5107 9.25242 4.56324 9.34462 4.65544C9.43682 4.74764 9.48936 4.87221 9.49103 5.00259C9.4927 5.13297 9.44337 5.25884 9.35356 5.35338L7.70731 6.99994L9.35356 8.6465Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nexport { CloseCircle };\n"],"names":["CloseCircle","jsx"],"mappings":";AAAA,MAAMA,IAAc,MAClB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,MAAA;AAAA,IACP;AAAA,EAAA;AACF;"}
+{"version":3,"file":"CloseCircle.mjs","sources":["../../../../../../src/modules/core/components/Icons/CloseCircle.tsx"],"sourcesContent":["const CloseCircle = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 14 14\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M7.00012 0.499939C3.41606 0.499939 0.500122 3.41588 0.500122 6.99994C0.500122 10.584 3.41606 13.4999 7.00012 13.4999C10.5842 13.4999 13.5001 10.584 13.5001 6.99994C13.5001 3.41588 10.5842 0.499939 7.00012 0.499939ZM9.35356 8.6465C9.40194 8.69247 9.44063 8.74766 9.46735 8.80881C9.49407 8.86997 9.50828 8.93585 9.50913 9.00259C9.50999 9.06932 9.49747 9.13555 9.47233 9.19737C9.44718 9.25919 9.40992 9.31535 9.36273 9.36254C9.31553 9.40973 9.25937 9.447 9.19755 9.47214C9.13573 9.49729 9.0695 9.5098 9.00277 9.50895C8.93604 9.50809 8.87015 9.49389 8.809 9.46717C8.74784 9.44045 8.69265 9.40176 8.64668 9.35337L7.00012 7.70712L5.35356 9.35337C5.25903 9.44318 5.13315 9.49251 5.00277 9.49084C4.87239 9.48918 4.74782 9.43664 4.65562 9.34444C4.56342 9.25224 4.51088 9.12767 4.50921 8.99729C4.50755 8.86691 4.55687 8.74103 4.64668 8.6465L6.29293 6.99994L4.64668 5.35338C4.55687 5.25884 4.50755 5.13297 4.50921 5.00259C4.51088 4.87221 4.56342 4.74764 4.65562 4.65544C4.74782 4.56324 4.87239 4.5107 5.00277 4.50903C5.13315 4.50736 5.25903 4.55669 5.35356 4.6465L7.00012 6.29275L8.64668 4.6465C8.74121 4.55669 8.86709 4.50736 8.99747 4.50903C9.12785 4.5107 9.25242 4.56324 9.34462 4.65544C9.43682 4.74764 9.48936 4.87221 9.49103 5.00259C9.4927 5.13297 9.44337 5.25884 9.35356 5.35338L7.70731 6.99994L9.35356 8.6465Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nexport { CloseCircle };\n"],"names":["CloseCircle","React"],"mappings":";AAAMA,MAAAA,IAAcA,MACjBC,gBAAAA,EAAA,cAAA,OAAA,EACC,OAAM,MACN,QAAO,MACP,SAAQ,aACR,MAAK,QACL,OAAM,gCAELA,gBAAAA,EAAA,cAAA,QAAA,EACC,GAAE,6xCACF,MAAK,gBAAc,CAEvB;"}

package/dist/esm/modules/core/components/Spinner/Spinner.mjs

@@ -1,33 +1,18 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-function c(i) {
-  return i === "fast" ? 600 : i === "slow" ? 900 : 750;
+import e from "react";
+function s(t) {
+  return t === "fast" ? 600 : t === "slow" ? 900 : 750;
 }
-const m = ({
-  color: i = "rgba(0,0,0,0.4)",
-  speed: t = "medium",
+const l = ({
+  color: t = "rgba(0,0,0,0.4)",
+  speed: r = "medium",
   gap: a = 4,
   thickness: n = 4,
-  size: r = "1em",
+  size: i = "1em",
   ...o
-}) => /* @__PURE__ */ s(
-  "svg",
-  {
-    height: r,
-    width: r,
-    ...o,
-    style: { animationDuration: `${c(t)}ms` },
-    className: "__react-svg-spinner_circle",
-    role: "img",
-    "aria-labelledby": "title desc",
-    viewBox: "0 0 32 32",
-    children: [
-      /* @__PURE__ */ e("title", { id: "title", children: "Circle loading spinner" }),
-      /* @__PURE__ */ e("desc", { id: "desc", children: 'Image of a partial circle indicating "loading."' }),
-      /* @__PURE__ */ e(
-        "style",
-        {
-          dangerouslySetInnerHTML: {
-            __html: `
+}) => /* @__PURE__ */ e.createElement("svg", { height: i, width: i, ...o, style: {
+  animationDuration: `${s(r)}ms`
+}, className: "__react-svg-spinner_circle", role: "img", "aria-labelledby": "title desc", viewBox: "0 0 32 32" }, /* @__PURE__ */ e.createElement("title", { id: "title" }, "Circle loading spinner"), /* @__PURE__ */ e.createElement("desc", { id: "desc" }, 'Image of a partial circle indicating "loading."'), /* @__PURE__ */ e.createElement("style", { dangerouslySetInnerHTML: {
+  __html: `
       .__react-svg-spinner_circle{
           transition-property: transform;
           animation-name: __react-svg-spinner_infinite-spin;
@@ -39,27 +24,8 @@ const m = ({
           to {transform: rotate(360deg)}
       }
     `
-          }
-        }
-      ),
-      /* @__PURE__ */ e(
-        "circle",
-        {
-          role: "presentation",
-          cx: 16,
-          cy: 16,
-          r: 14 - n / 2,
-          stroke: i,
-          fill: "none",
-          strokeWidth: n,
-          strokeDasharray: Math.PI * 2 * (11 - a),
-          strokeLinecap: "round"
-        }
-      )
-    ]
-  }
-);
+} }), /* @__PURE__ */ e.createElement("circle", { role: "presentation", cx: 16, cy: 16, r: 14 - n / 2, stroke: t, fill: "none", strokeWidth: n, strokeDasharray: Math.PI * 2 * (11 - a), strokeLinecap: "round" }));
 export {
-  m as Spinner
+  l as Spinner
 };
 //# sourceMappingURL=Spinner.mjs.map

package/dist/esm/modules/core/components/Spinner/Spinner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.mjs","sources":["../../../../../../src/modules/core/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from \"react\";\n\ntype Speed = \"fast\" | \"slow\" | \"medium\";\n\nfunction speedSwitch(speed: Speed) {\n  if (speed === \"fast\") return 600;\n  if (speed === \"slow\") return 900;\n  return 750;\n}\n\nexport interface SpinnerProps {\n  color?: string;\n  speed?: Speed;\n  gap?: number;\n  thickness?: number;\n  size?: string;\n}\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n  color = \"rgba(0,0,0,0.4)\",\n  speed = \"medium\",\n  gap = 4,\n  thickness = 4,\n  size = \"1em\",\n  ...props\n}) => (\n  <svg\n    height={size}\n    width={size}\n    {...props}\n    style={{ animationDuration: `${speedSwitch(speed)}ms` }}\n    className=\"__react-svg-spinner_circle\"\n    role=\"img\"\n    aria-labelledby=\"title desc\"\n    viewBox=\"0 0 32 32\"\n  >\n    <title id=\"title\">Circle loading spinner</title>\n    <desc id=\"desc\">Image of a partial circle indicating \"loading.\"</desc>\n    <style\n      dangerouslySetInnerHTML={{\n        __html: `\n      .__react-svg-spinner_circle{\n          transition-property: transform;\n          animation-name: __react-svg-spinner_infinite-spin;\n          animation-iteration-count: infinite;\n          animation-timing-function: linear;\n      }\n      @keyframes __react-svg-spinner_infinite-spin {\n          from {transform: rotate(0deg)}\n          to {transform: rotate(360deg)}\n      }\n    `,\n      }}\n    />\n    <circle\n      role=\"presentation\"\n      cx={16}\n      cy={16}\n      r={14 - thickness / 2}\n      stroke={color}\n      fill=\"none\"\n      strokeWidth={thickness}\n      strokeDasharray={Math.PI * 2 * (11 - gap)}\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n"],"names":["speedSwitch","speed","Spinner","color","gap","thickness","size","props","jsxs","jsx"],"mappings":";AAIA,SAASA,EAAYC,GAAc;AACjC,SAAIA,MAAU,SAAe,MACzBA,MAAU,SAAe,MACtB;AACT;AAUO,MAAMC,IAAkC,CAAC;AAAA,EAC9C,OAAAC,IAAQ;AAAA,EACR,OAAAF,IAAQ;AAAA,EACR,KAAAG,IAAM;AAAA,EACN,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,QAAQF;AAAA,IACR,OAAOA;AAAA,IACN,GAAGC;AAAA,IACJ,OAAO,EAAE,mBAAmB,GAAGP,EAAYC,CAAK,CAAC,KAAK;AAAA,IACtD,WAAU;AAAA,IACV,MAAK;AAAA,IACL,mBAAgB;AAAA,IAChB,SAAQ;AAAA,IAER,UAAA;AAAA,MAAC,gBAAAQ,EAAA,SAAA,EAAM,IAAG,SAAQ,UAAsB,0BAAA;AAAA,MACvC,gBAAAA,EAAA,QAAA,EAAK,IAAG,QAAO,UAA+C,mDAAA;AAAA,MAC/D,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,yBAAyB;AAAA,YACvB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAYV;AAAA,QAAA;AAAA,MACF;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,GAAG,KAAKJ,IAAY;AAAA,UACpB,QAAQF;AAAA,UACR,MAAK;AAAA,UACL,aAAaE;AAAA,UACb,iBAAiB,KAAK,KAAK,KAAK,KAAKD;AAAA,UACrC,eAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IAAA;AAAA,EAAA;AACF;"}
+{"version":3,"file":"Spinner.mjs","sources":["../../../../../../src/modules/core/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from \"react\";\n\ntype Speed = \"fast\" | \"slow\" | \"medium\";\n\nfunction speedSwitch(speed: Speed) {\n  if (speed === \"fast\") return 600;\n  if (speed === \"slow\") return 900;\n  return 750;\n}\n\nexport interface SpinnerProps {\n  color?: string;\n  speed?: Speed;\n  gap?: number;\n  thickness?: number;\n  size?: string;\n}\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n  color = \"rgba(0,0,0,0.4)\",\n  speed = \"medium\",\n  gap = 4,\n  thickness = 4,\n  size = \"1em\",\n  ...props\n}) => (\n  <svg\n    height={size}\n    width={size}\n    {...props}\n    style={{ animationDuration: `${speedSwitch(speed)}ms` }}\n    className=\"__react-svg-spinner_circle\"\n    role=\"img\"\n    aria-labelledby=\"title desc\"\n    viewBox=\"0 0 32 32\"\n  >\n    <title id=\"title\">Circle loading spinner</title>\n    <desc id=\"desc\">Image of a partial circle indicating \"loading.\"</desc>\n    <style\n      dangerouslySetInnerHTML={{\n        __html: `\n      .__react-svg-spinner_circle{\n          transition-property: transform;\n          animation-name: __react-svg-spinner_infinite-spin;\n          animation-iteration-count: infinite;\n          animation-timing-function: linear;\n      }\n      @keyframes __react-svg-spinner_infinite-spin {\n          from {transform: rotate(0deg)}\n          to {transform: rotate(360deg)}\n      }\n    `,\n      }}\n    />\n    <circle\n      role=\"presentation\"\n      cx={16}\n      cy={16}\n      r={14 - thickness / 2}\n      stroke={color}\n      fill=\"none\"\n      strokeWidth={thickness}\n      strokeDasharray={Math.PI * 2 * (11 - gap)}\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n"],"names":["speedSwitch","speed","Spinner","color","gap","thickness","size","props","React","animationDuration","__html","Math","PI"],"mappings":";AAIA,SAASA,EAAYC,GAAc;AACjC,SAAIA,MAAU,SAAe,MACzBA,MAAU,SAAe,MACtB;AACT;AAUO,MAAMC,IAAkCA,CAAC;AAAA,EAC9CC,OAAAA,IAAQ;AAAA,EACRF,OAAAA,IAAQ;AAAA,EACRG,KAAAA,IAAM;AAAA,EACNC,WAAAA,IAAY;AAAA,EACZC,MAAAA,IAAO;AAAA,EACP,GAAGC;AACL,MACEC,gBAAAA,EAAA,cAAC,SACC,QAAQF,GACR,OAAOA,GACP,GAAIC,GACJ,OAAO;AAAA,EAAEE,mBAAoB,GAAET,EAAYC,CAAK,CAAE;AAAI,GACtD,WAAU,8BACV,MAAK,OACL,mBAAgB,cAChB,SAAQ,YAER,GAAAO,gBAAAA,EAAA,cAAC,SAAM,EAAA,IAAG,WAAQ,wBAAsB,mCACvC,QAAK,EAAA,IAAG,UAAO,iDAA+C,GAC9DA,gBAAAA,EAAA,cAAA,SAAA,EACC,yBAAyB;AAAA,EACvBE,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYX,EAAE,CAAA,GAEHF,gBAAAA,EAAA,cAAA,UAAA,EACC,MAAK,gBACL,IAAI,IACJ,IAAI,IACJ,GAAG,KAAKH,IAAY,GACpB,QAAQF,GACR,MAAK,QACL,aAAaE,GACb,iBAAiBM,KAAKC,KAAK,KAAK,KAAKR,IACrC,eAAc,QAAA,CAAO,CAEzB;"}

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

@@ -10,7 +10,9 @@ function a(e, n, c) {
   };
   return s(() => (e && (document.addEventListener("keydown", o, !0), document.addEventListener("click", u, !0)), () => {
     document.removeEventListener("keydown", o, !0), document.removeEventListener("click", u, !0);
-  }), [e]), { ref: r };
+  }), [e]), {
+    ref: r
+  };
 }
 export {
   a as default

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

@@ -1 +1 @@
-{"version":3,"file":"useComponentVisible.mjs","sources":["../../../../../src/modules/core/hooks/useComponentVisible.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nfunction contains(parent: HTMLElement | null, child: HTMLElement) {\n  if (!parent) return false;\n  return parent === child || parent.contains(child);\n}\n\ntype Options = {\n  closeOnClickOutside: boolean;\n};\n\nexport default function useComponentVisible(\n  isVisible: boolean,\n  onClose: (event: Event) => void,\n  options: Options\n) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\") {\n      onClose(event);\n    }\n  };\n\n  const handleClickOutside = (event: Event) => {\n    if (\n      options.closeOnClickOutside &&\n      !contains(ref.current, event.target as HTMLElement)\n    ) {\n      event.stopPropagation();\n      onClose(event);\n    }\n  };\n\n  useEffect(() => {\n    if (isVisible) {\n      document.addEventListener(\"keydown\", handleKeydown, true);\n      document.addEventListener(\"click\", handleClickOutside, true);\n    }\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown, true);\n      document.removeEventListener(\"click\", handleClickOutside, true);\n    };\n  }, [isVisible]);\n\n  return { ref };\n}\n"],"names":["contains","parent","child","useComponentVisible","isVisible","onClose","options","ref","useRef","handleKeydown","event","handleClickOutside","useEffect"],"mappings":";AAEA,SAASA,EAASC,GAA4BC,GAAoB;AAChE,SAAKD,IACEA,MAAWC,KAASD,EAAO,SAASC,CAAK,IAD5B;AAEtB;AAMwB,SAAAC,EACtBC,GACAC,GACAC,GACA;AACM,QAAAC,IAAMC,EAAuB,IAAI,GAEjCC,IAAgB,CAACC,MAAyB;AAC1C,IAAAA,EAAM,QAAQ,YAChBL,EAAQK,CAAK;AAAA,EACf,GAGIC,IAAqB,CAACD,MAAiB;AAEzC,IAAAJ,EAAQ,uBACR,CAACN,EAASO,EAAI,SAASG,EAAM,MAAqB,MAElDA,EAAM,gBAAgB,GACtBL,EAAQK,CAAK;AAAA,EACf;AAGF,SAAAE,EAAU,OACJR,MACO,SAAA,iBAAiB,WAAWK,GAAe,EAAI,GAC/C,SAAA,iBAAiB,SAASE,GAAoB,EAAI,IAGtD,MAAM;AACF,aAAA,oBAAoB,WAAWF,GAAe,EAAI,GAClD,SAAA,oBAAoB,SAASE,GAAoB,EAAI;AAAA,EAAA,IAE/D,CAACP,CAAS,CAAC,GAEP,EAAE,KAAAG,EAAI;AACf;"}
+{"version":3,"file":"useComponentVisible.mjs","sources":["../../../../../src/modules/core/hooks/useComponentVisible.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nfunction contains(parent: HTMLElement | null, child: HTMLElement) {\n  if (!parent) return false;\n  return parent === child || parent.contains(child);\n}\n\ntype Options = {\n  closeOnClickOutside: boolean;\n};\n\nexport default function useComponentVisible(\n  isVisible: boolean,\n  onClose: (event: Event) => void,\n  options: Options\n) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\") {\n      onClose(event);\n    }\n  };\n\n  const handleClickOutside = (event: Event) => {\n    if (\n      options.closeOnClickOutside &&\n      !contains(ref.current, event.target as HTMLElement)\n    ) {\n      event.stopPropagation();\n      onClose(event);\n    }\n  };\n\n  useEffect(() => {\n    if (isVisible) {\n      document.addEventListener(\"keydown\", handleKeydown, true);\n      document.addEventListener(\"click\", handleClickOutside, true);\n    }\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown, true);\n      document.removeEventListener(\"click\", handleClickOutside, true);\n    };\n  }, [isVisible]);\n\n  return { ref };\n}\n"],"names":["contains","parent","child","useComponentVisible","isVisible","onClose","options","ref","useRef","handleKeydown","event","key","handleClickOutside","closeOnClickOutside","current","target","stopPropagation","useEffect","addEventListener","removeEventListener"],"mappings":";AAEA,SAASA,EAASC,GAA4BC,GAAoB;AAChE,SAAKD,IACEA,MAAWC,KAASD,EAAOD,SAASE,CAAK,IAD5B;AAEtB;AAMwBC,SAAAA,EACtBC,GACAC,GACAC,GACA;AACMC,QAAAA,IAAMC,EAAuB,IAAI,GAEjCC,IAAgBA,CAACC,MAAyB;AAC1CA,IAAAA,EAAMC,QAAQ,YAChBN,EAAQK,CAAK;AAAA,EACf,GAGIE,IAAqBA,CAACF,MAAiB;AAEzCJ,IAAAA,EAAQO,uBACR,CAACb,EAASO,EAAIO,SAASJ,EAAMK,YAE7BL,EAAMM,gBAAgB,GACtBX,EAAQK,CAAK;AAAA,EACf;AAGFO,SAAAA,EAAU,OACJb,MACOc,SAAAA,iBAAiB,WAAWT,GAAe,EAAI,GAC/CS,SAAAA,iBAAiB,SAASN,GAAoB,EAAI,IAGtD,MAAM;AACFO,aAAAA,oBAAoB,WAAWV,GAAe,EAAI,GAClDU,SAAAA,oBAAoB,SAASP,GAAoB,EAAI;AAAA,EAAA,IAE/D,CAACR,CAAS,CAAC,GAEP;AAAA,IAAEG,KAAAA;AAAAA,EAAAA;AACX;"}

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

@@ -5,9 +5,7 @@ const d = () => {
 function k(t) {
   const c = t.callback ?? d, o = t.ref, l = t.offset ?? 0, n = i(() => a(c, 200), [c]), e = u(() => {
     if (o.current) {
-      const r = o.current, s = Math.round(
-        r.scrollTop + r.clientHeight
-      );
+      const r = o.current, s = Math.round(r.scrollTop + r.clientHeight);
       Math.round(r.scrollHeight - l) <= s && n();
     }
   }, [n]);

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

@@ -1 +1 @@
-{"version":3,"file":"useOnBottomScroll.mjs","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useMemo } from \"react\";\nimport debounce from \"lodash.debounce\";\n\ntype OnBottomScrollOptions = {\n  ref: RefObject<HTMLDivElement | undefined>;\n  callback: () => void;\n  offset?: number;\n};\n\nconst noop = () => {};\n\nfunction useOnBottomScroll(options: OnBottomScrollOptions) {\n  const callback = options.callback ?? noop;\n  const ref = options.ref;\n  const offset = options.offset ?? 0;\n\n  const debouncedCallback = useMemo(() => debounce(callback, 200), [callback]);\n\n  const handleOnScroll = useCallback(() => {\n    if (ref.current) {\n      const scrollNode = ref.current;\n      const scrollContainerBottomPosition = Math.round(\n        scrollNode.scrollTop + scrollNode.clientHeight,\n      );\n      const scrollPosition = Math.round(scrollNode.scrollHeight - offset);\n\n      if (scrollPosition <= scrollContainerBottomPosition) {\n        debouncedCallback();\n      }\n    }\n  }, [debouncedCallback]);\n\n  useEffect(() => {\n    if (ref.current) {\n      ref.current.addEventListener(\"scroll\", handleOnScroll);\n    }\n\n    return () => {\n      if (ref.current) {\n        ref.current.removeEventListener(\"scroll\", handleOnScroll);\n      }\n    };\n  }, [handleOnScroll]);\n}\n\nexport default useOnBottomScroll;\n"],"names":["noop","useOnBottomScroll","options","callback","ref","offset","debouncedCallback","useMemo","debounce","handleOnScroll","useCallback","scrollNode","scrollContainerBottomPosition","useEffect"],"mappings":";;AASA,MAAMA,IAAO,MAAM;AAAC;AAEpB,SAASC,EAAkBC,GAAgC;AACnD,QAAAC,IAAWD,EAAQ,YAAYF,GAC/BI,IAAMF,EAAQ,KACdG,IAASH,EAAQ,UAAU,GAE3BI,IAAoBC,EAAQ,MAAMC,EAASL,GAAU,GAAG,GAAG,CAACA,CAAQ,CAAC,GAErEM,IAAiBC,EAAY,MAAM;AACvC,QAAIN,EAAI,SAAS;AACf,YAAMO,IAAaP,EAAI,SACjBQ,IAAgC,KAAK;AAAA,QACzCD,EAAW,YAAYA,EAAW;AAAA,MAAA;AAIpC,MAFuB,KAAK,MAAMA,EAAW,eAAeN,CAAM,KAE5CO,KACFN;IAEtB;AAAA,EAAA,GACC,CAACA,CAAiB,CAAC;AAEtB,EAAAO,EAAU,OACJT,EAAI,WACFA,EAAA,QAAQ,iBAAiB,UAAUK,CAAc,GAGhD,MAAM;AACX,IAAIL,EAAI,WACFA,EAAA,QAAQ,oBAAoB,UAAUK,CAAc;AAAA,EAC1D,IAED,CAACA,CAAc,CAAC;AACrB;"}
+{"version":3,"file":"useOnBottomScroll.mjs","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useMemo } from \"react\";\nimport debounce from \"lodash.debounce\";\n\ntype OnBottomScrollOptions = {\n  ref: RefObject<HTMLDivElement | undefined>;\n  callback: () => void;\n  offset?: number;\n};\n\nconst noop = () => {};\n\nfunction useOnBottomScroll(options: OnBottomScrollOptions) {\n  const callback = options.callback ?? noop;\n  const ref = options.ref;\n  const offset = options.offset ?? 0;\n\n  const debouncedCallback = useMemo(() => debounce(callback, 200), [callback]);\n\n  const handleOnScroll = useCallback(() => {\n    if (ref.current) {\n      const scrollNode = ref.current;\n      const scrollContainerBottomPosition = Math.round(\n        scrollNode.scrollTop + scrollNode.clientHeight,\n      );\n      const scrollPosition = Math.round(scrollNode.scrollHeight - offset);\n\n      if (scrollPosition <= scrollContainerBottomPosition) {\n        debouncedCallback();\n      }\n    }\n  }, [debouncedCallback]);\n\n  useEffect(() => {\n    if (ref.current) {\n      ref.current.addEventListener(\"scroll\", handleOnScroll);\n    }\n\n    return () => {\n      if (ref.current) {\n        ref.current.removeEventListener(\"scroll\", handleOnScroll);\n      }\n    };\n  }, [handleOnScroll]);\n}\n\nexport default useOnBottomScroll;\n"],"names":["noop","useOnBottomScroll","options","callback","ref","offset","debouncedCallback","useMemo","debounce","handleOnScroll","useCallback","current","scrollNode","scrollContainerBottomPosition","Math","round","scrollTop","clientHeight","scrollHeight","useEffect","addEventListener","removeEventListener"],"mappings":";;AASA,MAAMA,IAAOA,MAAM;AAAC;AAEpB,SAASC,EAAkBC,GAAgC;AACnDC,QAAAA,IAAWD,EAAQC,YAAYH,GAC/BI,IAAMF,EAAQE,KACdC,IAASH,EAAQG,UAAU,GAE3BC,IAAoBC,EAAQ,MAAMC,EAASL,GAAU,GAAG,GAAG,CAACA,CAAQ,CAAC,GAErEM,IAAiBC,EAAY,MAAM;AACvC,QAAIN,EAAIO,SAAS;AACf,YAAMC,IAAaR,EAAIO,SACjBE,IAAgCC,KAAKC,MACzCH,EAAWI,YAAYJ,EAAWK,YACpC;AAGA,MAFuBH,KAAKC,MAAMH,EAAWM,eAAeb,CAAM,KAE5CQ,KACFP;IAEtB;AAAA,EAAA,GACC,CAACA,CAAiB,CAAC;AAEtBa,EAAAA,EAAU,OACJf,EAAIO,WACFA,EAAAA,QAAQS,iBAAiB,UAAUX,CAAc,GAGhD,MAAM;AACX,IAAIL,EAAIO,WACFA,EAAAA,QAAQU,oBAAoB,UAAUZ,CAAc;AAAA,EAC1D,IAED,CAACA,CAAc,CAAC;AACrB;"}

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

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

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

@@ -1,14 +1,15 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { useKnockFeed as n, useTranslations as s } from "@knocklabs/react-core";
+import e from "react";
+import { useKnockFeed as r, useTranslations as n } from "@knocklabs/react-core";
 
-const p = () => {
-  const { colorMode: d } = n(), { t: r } = s();
-  return /* @__PURE__ */ e("div", { className: `rnf-empty-feed rnf-empty-feed--${d}`, children: /* @__PURE__ */ t("div", { className: "rnf-empty-feed__inner", children: [
-    /* @__PURE__ */ e("h2", { className: "rnf-empty-feed__header", children: r("emptyFeedTitle") }),
-    /* @__PURE__ */ e("p", { className: "rnf-empty-feed__body", children: r("emptyFeedBody") })
-  ] }) });
+const s = () => {
+  const {
+    colorMode: m
+  } = r(), {
+    t
+  } = n();
+  return /* @__PURE__ */ e.createElement("div", { className: `rnf-empty-feed rnf-empty-feed--${m}` }, /* @__PURE__ */ e.createElement("div", { className: "rnf-empty-feed__inner" }, /* @__PURE__ */ e.createElement("h2", { className: "rnf-empty-feed__header" }, t("emptyFeedTitle")), /* @__PURE__ */ e.createElement("p", { className: "rnf-empty-feed__body" }, t("emptyFeedBody"))));
 };
 export {
-  p as EmptyFeed
+  s as EmptyFeed
 };
 //# sourceMappingURL=EmptyFeed.mjs.map

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 React from \"react\";\nimport { useTranslations, useKnockFeed } from \"@knocklabs/react-core\";\nimport \"./styles.css\";\n\nexport const EmptyFeed: React.FC = () => {\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","jsx","jsxs"],"mappings":";;;AAIO,MAAMA,IAAsB,MAAM;AACjC,QAAA,EAAE,WAAAC,MAAcC,KAChB,EAAE,GAAAC,MAAMC;AAGZ,SAAA,gBAAAC,EAAC,SAAI,WAAW,kCAAkCJ,CAAS,IACzD,UAAA,gBAAAK,EAAC,OAAI,EAAA,WAAU,yBACb,UAAA;AAAA,IAAA,gBAAAD,EAAC,MAAG,EAAA,WAAU,0BAA0B,UAAAF,EAAE,gBAAgB,GAAE;AAAA,sBAC3D,KAAE,EAAA,WAAU,wBAAwB,UAAAA,EAAE,eAAe,GAAE;AAAA,EAAA,EAC1D,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"EmptyFeed.mjs","sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslations, useKnockFeed } from \"@knocklabs/react-core\";\nimport \"./styles.css\";\n\nexport const EmptyFeed: React.FC = () => {\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":";;;AAIO,MAAMA,IAAsBA,MAAM;AACjC,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa,GAC7B;AAAA,IAAEC;AAAAA,MAAMC,EAAgB;AAG5B,SAAAC,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAY,kCAAiCJ,CAAU,GAC1D,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;"}

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

@@ -1,40 +1,30 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import { useCallback as m } from "react";
-import { usePopperTooltip as u } from "react-popper-tooltip";
-import { useKnockFeed as v, useTranslations as d } from "@knocklabs/react-core";
-import { CloseCircle as h } from "../../../core/components/Icons/CloseCircle.mjs";
-const N = ({ item: o }) => {
-  const { colorMode: t, feedClient: n } = v(), { t: e } = d(), c = m(
-    (i) => {
-      i.preventDefault(), i.stopPropagation(), n.markAsArchived(o);
-    },
-    [o]
-  ), { getTooltipProps: s, setTooltipRef: a, setTriggerRef: l, visible: p } = u({ placement: "top-end" });
-  return /* @__PURE__ */ f(
-    "button",
-    {
-      ref: l,
-      onClick: c,
-      type: "button",
-      "aria-label": e("archiveNotification"),
-      className: `rnf-archive-notification-btn rnf-archive-notification-btn--${t}`,
-      children: [
-        /* @__PURE__ */ r(h, {}),
-        p && /* @__PURE__ */ r(
-          "div",
-          {
-            ref: a,
-            ...s({
-              className: `rnf-tooltip rnf-tooltip--${t}`
-            }),
-            children: e("archiveNotification")
-          }
-        )
-      ]
-    }
-  );
+import t, { useCallback as p } from "react";
+import { usePopperTooltip as m } from "react-popper-tooltip";
+import { useKnockFeed as u, useTranslations as v } from "@knocklabs/react-core";
+import { CloseCircle as b } from "../../../core/components/Icons/CloseCircle.mjs";
+const g = ({
+  item: e
+}) => {
+  const {
+    colorMode: o,
+    feedClient: n
+  } = u(), {
+    t: r
+  } = v(), a = p((i) => {
+    i.preventDefault(), i.stopPropagation(), n.markAsArchived(e);
+  }, [e]), {
+    getTooltipProps: c,
+    setTooltipRef: l,
+    setTriggerRef: s,
+    visible: f
+  } = m({
+    placement: "top-end"
+  });
+  return /* @__PURE__ */ t.createElement("button", { ref: s, onClick: a, type: "button", "aria-label": r("archiveNotification"), className: `rnf-archive-notification-btn rnf-archive-notification-btn--${o}` }, /* @__PURE__ */ t.createElement(b, null), f && /* @__PURE__ */ t.createElement("div", { ref: l, ...c({
+    className: `rnf-tooltip rnf-tooltip--${o}`
+  }) }, r("archiveNotification")));
 };
 export {
-  N as ArchiveButton
+  g 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 React, { MouseEvent, useCallback } from \"react\";\nimport { usePopperTooltip } from \"react-popper-tooltip\";\nimport { useTranslations, useKnockFeed } from \"@knocklabs/react-core\";\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\n  const onClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      feedClient.markAsArchived(item);\n    },\n    [item],\n  );\n\n  const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =\n    usePopperTooltip({ placement: \"top-end\" });\n\n  return (\n    <button\n      ref={setTriggerRef}\n      onClick={onClick}\n      type=\"button\"\n      aria-label={t(\"archiveNotification\")}\n      className={`rnf-archive-notification-btn rnf-archive-notification-btn--${colorMode}`}\n    >\n      <CloseCircle />\n\n      {visible && (\n        <div\n          ref={setTooltipRef}\n          {...getTooltipProps({\n            className: `rnf-tooltip rnf-tooltip--${colorMode}`,\n          })}\n        >\n          {t(\"archiveNotification\")}\n        </div>\n      )}\n    </button>\n  );\n};\n\nexport { ArchiveButton };\n"],"names":["ArchiveButton","item","colorMode","feedClient","useKnockFeed","t","useTranslations","onClick","useCallback","e","getTooltipProps","setTooltipRef","setTriggerRef","visible","usePopperTooltip","jsxs","jsx","CloseCircle"],"mappings":";;;;;AAUA,MAAMA,IAA8C,CAAC,EAAE,MAAAC,QAAW;AAChE,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAa,GACzC,EAAE,GAAAC,MAAMC,KAERC,IAAUC;AAAA,IACd,CAACC,MAAqC;AACpC,MAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GAElBN,EAAW,eAAeF,CAAI;AAAA,IAChC;AAAA,IACA,CAACA,CAAI;AAAA,EAAA,GAGD,EAAE,iBAAAS,GAAiB,eAAAC,GAAe,eAAAC,GAAe,SAAAC,MACrDC,EAAiB,EAAE,WAAW,UAAA,CAAW;AAGzC,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKH;AAAA,MACL,SAAAL;AAAA,MACA,MAAK;AAAA,MACL,cAAYF,EAAE,qBAAqB;AAAA,MACnC,WAAW,8DAA8DH,CAAS;AAAA,MAElF,UAAA;AAAA,QAAA,gBAAAc,EAACC,GAAY,EAAA;AAAA,QAEZJ,KACC,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKL;AAAA,YACJ,GAAGD,EAAgB;AAAA,cAClB,WAAW,4BAA4BR,CAAS;AAAA,YAAA,CACjD;AAAA,YAEA,YAAE,qBAAqB;AAAA,UAAA;AAAA,QAC1B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"ArchiveButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport React, { MouseEvent, useCallback } from \"react\";\nimport { usePopperTooltip } from \"react-popper-tooltip\";\nimport { useTranslations, useKnockFeed } from \"@knocklabs/react-core\";\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\n  const onClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      feedClient.markAsArchived(item);\n    },\n    [item],\n  );\n\n  const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =\n    usePopperTooltip({ placement: \"top-end\" });\n\n  return (\n    <button\n      ref={setTriggerRef}\n      onClick={onClick}\n      type=\"button\"\n      aria-label={t(\"archiveNotification\")}\n      className={`rnf-archive-notification-btn rnf-archive-notification-btn--${colorMode}`}\n    >\n      <CloseCircle />\n\n      {visible && (\n        <div\n          ref={setTooltipRef}\n          {...getTooltipProps({\n            className: `rnf-tooltip rnf-tooltip--${colorMode}`,\n          })}\n        >\n          {t(\"archiveNotification\")}\n        </div>\n      )}\n    </button>\n  );\n};\n\nexport { ArchiveButton };\n"],"names":["ArchiveButton","item","colorMode","feedClient","useKnockFeed","t","useTranslations","onClick","useCallback","e","preventDefault","stopPropagation","markAsArchived","getTooltipProps","setTooltipRef","setTriggerRef","visible","usePopperTooltip","placement","React","CloseCircle","className"],"mappings":";;;;AAUA,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,GAExBC,IAAUC,EACd,CAACC,MAAqC;AACpCA,IAAAA,EAAEC,eAAe,GACjBD,EAAEE,gBAAgB,GAElBR,EAAWS,eAAeX,CAAI;AAAA,EAAA,GAEhC,CAACA,CAAI,CACP,GAEM;AAAA,IAAEY,iBAAAA;AAAAA,IAAiBC,eAAAA;AAAAA,IAAeC,eAAAA;AAAAA,IAAeC,SAAAA;AAAAA,MACrDC,EAAiB;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAW;AAGzC,SAAAC,gBAAAA,EAAA,cAAC,UACC,EAAA,KAAKJ,GACL,SAAAR,GACA,MAAK,UACL,cAAYF,EAAE,qBAAqB,GACnC,WAAY,8DAA6DH,CAAU,GAAA,GAElFiB,gBAAAA,EAAA,cAAAC,GAAA,IAAW,GAEXJ,qCACE,OACC,EAAA,KAAKF,GACL,GAAID,EAAgB;AAAA,IAClBQ,WAAY,4BAA2BnB,CAAU;AAAA,EAClD,CAAA,KAEAG,EAAE,qBAAqB,CAC1B,CAEJ;AAEJ;"}

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

@@ -1,13 +1,16 @@
-import { jsx as t } from "react/jsx-runtime";
+import t from "react";
 
-const m = ({ name: r, src: i }) => {
-  function n(e) {
-    const [a, s] = e.split(" ");
-    return a && s ? `${a.charAt(0)}${s.charAt(0)}` : a ? a.charAt(0) : "";
+const l = ({
+  name: e,
+  src: r
+}) => {
+  function i(m) {
+    const [a, n] = m.split(" ");
+    return a && n ? `${a.charAt(0)}${n.charAt(0)}` : a ? a.charAt(0) : "";
   }
-  return /* @__PURE__ */ t("div", { className: "rnf-avatar", children: i ? /* @__PURE__ */ t("img", { src: i, alt: `Image of ${r}`, className: "rnf-avatar__image" }) : /* @__PURE__ */ t("span", { className: "rnf-avatar__initials", children: n(r) }) });
+  return /* @__PURE__ */ t.createElement("div", { className: "rnf-avatar" }, r ? /* @__PURE__ */ t.createElement("img", { src: r, alt: `Image of ${e}`, className: "rnf-avatar__image" }) : /* @__PURE__ */ t.createElement("span", { className: "rnf-avatar__initials" }, i(e)));
 };
 export {
-  m as Avatar
+  l 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\";\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={`Image of ${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","jsx"],"mappings":";;AAQO,MAAMA,IAAgC,CAAC,EAAE,MAAAC,GAAM,KAAAC,QAAU;AAC9D,WAASC,EAAYF,GAAc;AACjC,UAAM,CAACG,GAAWC,CAAQ,IAAIJ,EAAK,MAAM,GAAG;AAC5C,WAAOG,KAAaC,IAChB,GAAGD,EAAU,OAAO,CAAC,CAAC,GAAGC,EAAS,OAAO,CAAC,CAAC,KAC3CD,IACEA,EAAU,OAAO,CAAC,IAClB;AAAA,EACR;AAGE,SAAA,gBAAAE,EAAC,SAAI,WAAU,cACZ,cACE,gBAAAA,EAAA,OAAA,EAAI,KAAAJ,GAAU,KAAK,YAAYD,CAAI,IAAI,WAAU,oBAAA,CAAoB,IAErE,gBAAAK,EAAA,QAAA,EAAK,WAAU,wBAAwB,UAAAH,EAAYF,CAAI,EAAE,CAAA,EAE9D,CAAA;AAEJ;"}
+{"version":3,"file":"Avatar.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\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={`Image of ${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":";;AAQO,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,IACf,GAAED,EAAUG,OAAO,CAAC,CAAE,GAAEF,EAASE,OAAO,CAAC,CAAE,KAC5CH,IACEA,EAAUG,OAAO,CAAC,IAClB;AAAA,EACR;AAGE,SAAAC,gBAAAA,EAAA,cAAC,SAAI,WAAU,aAAA,GACZN,IACEM,gBAAAA,EAAA,cAAA,OAAA,EAAI,KAAAN,GAAU,KAAM,YAAWD,CAAK,IAAG,WAAU,oBAAA,CAAsB,IAEvEO,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAU,uBAAwBL,GAAAA,EAAYF,CAAI,CAAE,CAE9D;AAEJ;"}

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

@@ -1,75 +1,46 @@
-import { jsx as a, jsxs as p } from "react/jsx-runtime";
-import { useKnockFeed as x, useTranslations as A, renderNodeOrFallback as N, formatTimestamp as B } from "@knocklabs/react-core";
-import i, { useMemo as H } from "react";
-import { Button as M } from "../../../core/components/Button/Button.mjs";
-import { ButtonGroup as j } from "../../../core/components/Button/ButtonGroup.mjs";
+import { useKnockFeed as w, useTranslations as T, renderNodeOrFallback as _, 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 "lodash.debounce";
-import { ArchiveButton as D } from "./ArchiveButton.mjs";
-import { Avatar as F } from "./Avatar.mjs";
+import { ArchiveButton as M } from "./ArchiveButton.mjs";
+import { Avatar as x } from "./Avatar.mjs";
 
-function b(n) {
-  n && n !== "" && setTimeout(() => window.location.assign(n), 200);
+function p(e) {
+  e && e !== "" && setTimeout(() => window.location.assign(e), 200);
 }
-const P = i.forwardRef(
-  ({ item: n, onItemClick: l, onButtonClick: s, avatar: h, children: f, archiveButton: v }, k) => {
-    var _;
-    const { feedClient: t, colorMode: y } = x(), { locale: C } = A(), c = H(() => n.blocks.reduce((e, o) => ({ ...e, [o.name]: o }), {}), [n]), m = (_ = c.action_url) == null ? void 0 : _.rendered, u = c.actions, d = i.useCallback(() => (t.markAsInteracted(n), l ? l(n) : b(m)), [n, m, l, t]), g = i.useCallback(
-      (e, o) => (t.markAsInteracted(n), s ? s(n, o) : b(o.action)),
-      [s, t, n]
-    ), w = i.useCallback(
-      (e) => {
-        switch (e.key) {
-          case "Enter": {
-            e.stopPropagation(), d();
-            break;
-          }
-        }
-      },
-      [d]
-    ), r = n.actors[0];
-    return /* @__PURE__ */ a(
-      "div",
-      {
-        ref: k,
-        className: `rnf-notification-cell rnf-notification-cell--${y}`,
-        onClick: d,
-        onKeyDown: w,
-        tabIndex: 0,
-        children: /* @__PURE__ */ p("div", { className: "rnf-notification-cell__inner", children: [
-          !n.read_at && /* @__PURE__ */ a("div", { className: "rnf-notification-cell__unread-dot" }),
-          N(
-            h,
-            r && "name" in r && r.name && /* @__PURE__ */ a(F, { name: r.name, src: r.avatar })
-          ),
-          /* @__PURE__ */ p("div", { className: "rnf-notification-cell__content-outer", children: [
-            c.body && /* @__PURE__ */ a(
-              "div",
-              {
-                className: "rnf-notification-cell__content",
-                dangerouslySetInnerHTML: {
-                  __html: c.body.rendered
-                }
-              }
-            ),
-            u && /* @__PURE__ */ a("div", { className: "rnf-notification-cell__button-group", children: /* @__PURE__ */ a(j, { children: u.buttons.map((e, o) => /* @__PURE__ */ a(
-              M,
-              {
-                variant: o === 0 ? "primary" : "secondary",
-                onClick: (T) => g(T, e),
-                children: e.label
-              },
-              e.name
-            )) }) }),
-            f && /* @__PURE__ */ a("div", { className: "rnf-notification-cell__child-content", children: f }),
-            /* @__PURE__ */ a("span", { className: "rnf-notification-cell__timestamp", children: B(n.inserted_at, { locale: C }) })
-          ] }),
-          N(v, /* @__PURE__ */ a(D, { item: n }))
-        ] })
+const L = n.forwardRef(({
+  item: e,
+  onItemClick: l,
+  onButtonClick: i,
+  avatar: E,
+  children: m,
+  archiveButton: N
+}, b) => {
+  var u;
+  const {
+    feedClient: o,
+    colorMode: k
+  } = w(), {
+    locale: v
+  } = T(), c = A(() => e.blocks.reduce((t, a) => ({
+    ...t,
+    [a.name]: a
+  }), {}), [e]), f = (u = c.action_url) == null ? void 0 : u.rendered, d = c.actions, s = n.useCallback(() => (o.markAsInteracted(e), l ? l(e) : p(f)), [e, f, l, o]), y = n.useCallback((t, a) => (o.markAsInteracted(e), i ? i(e, a) : p(a.action)), [i, o, e]), C = n.useCallback((t) => {
+    switch (t.key) {
+      case "Enter": {
+        t.stopPropagation(), s();
+        break;
       }
-    );
-  }
-);
+    }
+  }, [s]), r = e.actors[0];
+  return /* @__PURE__ */ n.createElement("div", { ref: b, className: `rnf-notification-cell rnf-notification-cell--${k}`, onClick: s, 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" }), _(E, 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) => y(g, t) }, t.label)))), m && /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-cell__child-content" }, m), /* @__PURE__ */ n.createElement("span", { className: "rnf-notification-cell__timestamp" }, h(e.inserted_at, {
+    locale: v
+  }))), _(N, /* @__PURE__ */ n.createElement(M, { item: e }))));
+});
 export {
-  P as NotificationCell
+  L 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\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        feedClient.markAsInteracted(item);\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      <div\n        ref={ref}\n        className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n        onClick={onContainerClickHandler}\n        onKeyDown={onKeyDown}\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","NotificationCell","React","item","onItemClick","onButtonClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","acc","block","actionUrl","_a","buttonSet","onContainerClickHandler","onButtonClickHandler","button","onKeyDown","ev","actor","jsx","jsxs","renderNodeOrFallback","Avatar","ButtonGroup","i","Button","e","formatTimestamp","ArchiveButton"],"mappings":"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"}
+{"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\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        feedClient.markAsInteracted(item);\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      <div\n        ref={ref}\n        className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n        onClick={onContainerClickHandler}\n        onKeyDown={onKeyDown}\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","onButtonClickHandler","e","button","action","onKeyDown","ev","key","stopPropagation","actor","actors","read_at","renderNodeOrFallback","Avatar","body","__html","ButtonGroup","buttons","map","i","Button","label","formatTimestamp","inserted_at","ArchiveButton"],"mappings":"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"}

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

@@ -1,19 +1,18 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import { ChevronDown as t } from "../../../core/components/Icons/ChevronDown.mjs";
-import { useKnockFeed as m } from "@knocklabs/react-core";
+import e from "react";
+import { ChevronDown as m } from "../../../core/components/Icons/ChevronDown.mjs";
+import { useKnockFeed as c } from "@knocklabs/react-core";
 
-const l = ({
-  children: r,
-  value: n,
-  onChange: e
+const f = ({
+  children: o,
+  value: r,
+  onChange: t
 }) => {
-  const { colorMode: d } = m();
-  return /* @__PURE__ */ s("div", { className: `rnf-dropdown rnf-dropdown--${d}`, children: [
-    /* @__PURE__ */ o("select", { value: n, onChange: e, children: r }),
-    /* @__PURE__ */ o(t, {})
-  ] });
+  const {
+    colorMode: n
+  } = c();
+  return /* @__PURE__ */ e.createElement("div", { className: `rnf-dropdown rnf-dropdown--${n}` }, /* @__PURE__ */ e.createElement("select", { value: r, onChange: t }, o), /* @__PURE__ */ e.createElement(m, null));
 };
 export {
-  l as Dropdown
+  f 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 React, { PropsWithChildren } from \"react\";\nimport { ChevronDown } from \"../../../core/components/Icons\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n  value: string;\n  onChange: (e: any) => 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 value={value} onChange={onChange}>\n        {children}\n      </select>\n      <ChevronDown />\n    </div>\n  );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","jsxs","jsx","ChevronDown"],"mappings":";;;;AAWO,MAAMA,IAAuD,CAAC;AAAA,EACnE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAA,EAAE,WAAAC,MAAcC;AAEtB,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAW,8BAA8BF,CAAS,IACrD,UAAA;AAAA,IAAC,gBAAAG,EAAA,UAAA,EAAO,OAAAL,GAAc,UAAAC,GACnB,UAAAF,EACH,CAAA;AAAA,sBACCO,GAAY,EAAA;AAAA,EACf,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Dropdown.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { ChevronDown } from \"../../../core/components/Icons\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n  value: string;\n  onChange: (e: any) => 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 value={value} onChange={onChange}>\n        {children}\n      </select>\n      <ChevronDown />\n    </div>\n  );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","React","ChevronDown"],"mappings":";;;;AAWO,MAAMA,IAAuDA,CAAC;AAAA,EACnEC,UAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa;AAEnC,SACGC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAY,8BAA6BF,CAAU,GACtD,GAAAE,gBAAAA,EAAA,cAAC,UAAO,EAAA,OAAAJ,GAAc,UAAAC,EACnBF,GAAAA,CACH,GACAK,gBAAAA,EAAA,cAACC,OAAW,CACd;AAEJ;"}