@knocklabs/react 0.11.21 → 0.11.24

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## 0.11.24
+
+### Patch Changes
+
+- Updated dependencies [3d7a041]
+  - @knocklabs/client@0.21.15
+  - @knocklabs/react-core@0.13.16
+
+## 0.11.23
+
+### Patch Changes
+
+- dd1b724: Expose `./package.json` in each package's `exports` map. This restores the ability for tooling (bundlers, test mockers such as Storybook/Vitest, and version checks) to resolve the package manifest, which the `exports` field otherwise blocks.
+- 70e7669: Handle missing `features` in feed settings responses to prevent crashes on partial API responses.
+- 3dd0aa8: Remove the `clsx` and `lodash.debounce` dependencies. Guide components compose `className` with a small internal `cx` helper, and an internal trailing-edge debounce replaces `lodash.debounce`.
+- Updated dependencies [dd1b724]
+- Updated dependencies [70e7669]
+- Updated dependencies [3dd0aa8]
+- Updated dependencies [3dd0aa8]
+- Updated dependencies [b6c9be4]
+- Updated dependencies [b6c9be4]
+  - @knocklabs/client@0.21.14
+  - @knocklabs/react-core@0.13.15
+
+## 0.11.22
+
+### Patch Changes
+
+- Updated dependencies [e6ac8cc]
+- Updated dependencies [454f947]
+- Updated dependencies [abac967]
+  - @knocklabs/react-core@0.13.14
+  - @knocklabs/client@0.21.13
+
 ## 0.11.21
 
 ### Patch Changes

package/dist/cjs/modules/core/cx/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=(...e)=>e.filter(o=>!!o).join(" ");exports.cx=t;
+//# sourceMappingURL=index.js.map

package/dist/cjs/modules/core/cx/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/modules/core/cx/index.ts"],"sourcesContent":["type ClassValue = string | false | null | undefined;\n\n/**\n * Joins truthy class names into a space-separated string, e.g.\n * `cx(\"knock-guide-banner\", className)`. Falsy values are dropped, so\n * conditional modifiers work too: `cx(\"btn\", isActive && \"btn--active\")`.\n */\nexport const cx = (...classes: ClassValue[]): string =>\n  classes.filter((value): value is string => Boolean(value)).join(\" \");\n"],"names":["cx","classes","filter","value","Boolean","join"],"mappings":"gFAOO,MAAMA,EAAKA,IAAIC,IACpBA,EAAQC,OAAQC,GAA2BC,EAAQD,CAAM,EAAEE,KAAK,GAAG"}

package/dist/cjs/modules/core/debounce/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=(t,u=0)=>{let e=null;const l=(...n)=>{e!==null&&clearTimeout(e),e=setTimeout(()=>{e=null,t(...n)},u)};return l.cancel=()=>{e!==null&&(clearTimeout(e),e=null)},l};exports.debounce=o;
+//# sourceMappingURL=index.js.map

package/dist/cjs/modules/core/debounce/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/modules/core/debounce/index.ts"],"sourcesContent":["type DebouncedFunction<TArgs extends unknown[]> = {\n  (...args: TArgs): void;\n  cancel: () => void;\n};\n\n/**\n * Minimal trailing-edge debounce, replacing `lodash.debounce` for our single\n * use case (no `leading`/`maxWait` options). Invokes `func` once `wait`\n * milliseconds have elapsed since the last call.\n */\nexport const debounce = <TArgs extends unknown[]>(\n  func: (...args: TArgs) => void,\n  wait = 0,\n): DebouncedFunction<TArgs> => {\n  let timeout: ReturnType<typeof setTimeout> | null = null;\n\n  const debounced = (...args: TArgs) => {\n    if (timeout !== null) {\n      clearTimeout(timeout);\n    }\n    timeout = setTimeout(() => {\n      timeout = null;\n      func(...args);\n    }, wait);\n  };\n\n  debounced.cancel = () => {\n    if (timeout !== null) {\n      clearTimeout(timeout);\n      timeout = null;\n    }\n  };\n\n  return debounced;\n};\n"],"names":["debounce","func","wait","timeout","debounced","args","clearTimeout","setTimeout","cancel"],"mappings":"gFAUO,MAAMA,EAAW,CACtBC,EACAC,EAAO,IACsB,CAC7B,IAAIC,EAAgD,KAE9CC,MAAAA,EAAYA,IAAIC,IAAgB,CAChCF,IAAY,MACdG,aAAaH,CAAO,EAEtBA,EAAUI,WAAW,IAAM,CACfJ,EAAA,KACVF,EAAK,GAAGI,CAAI,GACXH,CAAI,CACT,EAEAE,OAAAA,EAAUI,OAAS,IAAM,CACnBL,IAAY,OACdG,aAAaH,CAAO,EACVA,EAAA,KAEd,EAEOC,CACT"}

package/dist/cjs/modules/core/hooks/useOnBottomScroll.js

@@ -1,2 +1,2 @@
-"use strict";const a=require("lodash.debounce"),n=require("react"),i=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},f=i(a),d=()=>{};function b(t){const l=t.callback??d,o=t.ref,s=t.offset??0,r=n.useMemo(()=>f.default(l,200),[l]),c=n.useCallback(()=>{if(o.current){const e=o.current,u=Math.round(e.scrollTop+e.clientHeight);Math.round(e.scrollHeight-s)<=u&&r()}},[r]);n.useEffect(()=>{let e;return o.current&&(e=o.current,o.current.addEventListener("scroll",c)),()=>{e&&e.removeEventListener("scroll",c)}},[c])}module.exports=b;
+"use strict";const n=require("react"),u=require("../debounce/index.js"),a=()=>{};function f(t){const r=t.callback??a,o=t.ref,s=t.offset??0,l=n.useMemo(()=>u.debounce(r,200),[r]),c=n.useCallback(()=>{if(o.current){const e=o.current,i=Math.round(e.scrollTop+e.clientHeight);Math.round(e.scrollHeight-s)<=i&&l()}},[l]);n.useEffect(()=>{let e;return o.current&&(e=o.current,o.current.addEventListener("scroll",c)),()=>{e&&e.removeEventListener("scroll",c)}},[c])}module.exports=f;
 //# sourceMappingURL=useOnBottomScroll.js.map

package/dist/cjs/modules/core/hooks/useOnBottomScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOnBottomScroll.js","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { RefObject, useCallback, useEffect, useMemo } from \"react\";\n\ntype OnBottomScrollOptions = {\n  ref: RefObject<HTMLDivElement | null>;\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    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debouncedCallback]);\n\n  useEffect(() => {\n    let element: HTMLElement | undefined;\n    if (ref.current) {\n      element = ref.current;\n      ref.current.addEventListener(\"scroll\", handleOnScroll);\n    }\n\n    return () => {\n      if (element) {\n        element.removeEventListener(\"scroll\", handleOnScroll);\n      }\n    };\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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","element","addEventListener","removeEventListener"],"mappings":"kIASMA,EAAOA,IAAM,CAAC,EAEpB,SAASC,EAAkBC,EAAgC,CACnDC,MAAAA,EAAWD,EAAQC,UAAYH,EAC/BI,EAAMF,EAAQE,IACdC,EAASH,EAAQG,QAAU,EAE3BC,EAAoBC,UAAQ,IAAMC,EAAAA,QAASL,EAAU,GAAG,EAAG,CAACA,CAAQ,CAAC,EAErEM,EAAiBC,EAAAA,YAAY,IAAM,CACvC,GAAIN,EAAIO,QAAS,CACf,MAAMC,EAAaR,EAAIO,QACjBE,EAAgCC,KAAKC,MACzCH,EAAWI,UAAYJ,EAAWK,YACpC,EACuBH,KAAKC,MAAMH,EAAWM,aAAeb,CAAM,GAE5CQ,GACFP,EAAA,CACpB,CACF,EAGC,CAACA,CAAiB,CAAC,EAEtBa,EAAAA,UAAU,IAAM,CACVC,IAAAA,EACJ,OAAIhB,EAAIO,UACNS,EAAUhB,EAAIO,QACVA,EAAAA,QAAQU,iBAAiB,SAAUZ,CAAc,GAGhD,IAAM,CACPW,GACME,EAAAA,oBAAoB,SAAUb,CAAc,CAExD,CAAA,EAGC,CAACA,CAAc,CAAC,CACrB"}
+{"version":3,"file":"useOnBottomScroll.js","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useMemo } from \"react\";\n\nimport { debounce } from \"../debounce\";\n\ntype OnBottomScrollOptions = {\n  ref: RefObject<HTMLDivElement | null>;\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    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debouncedCallback]);\n\n  useEffect(() => {\n    let element: HTMLElement | undefined;\n    if (ref.current) {\n      element = ref.current;\n      ref.current.addEventListener(\"scroll\", handleOnScroll);\n    }\n\n    return () => {\n      if (element) {\n        element.removeEventListener(\"scroll\", handleOnScroll);\n      }\n    };\n    // TODO: Check if we can remove this disable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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","element","addEventListener","removeEventListener"],"mappings":"wEAUMA,EAAOA,IAAM,CAAC,EAEpB,SAASC,EAAkBC,EAAgC,CACnDC,MAAAA,EAAWD,EAAQC,UAAYH,EAC/BI,EAAMF,EAAQE,IACdC,EAASH,EAAQG,QAAU,EAE3BC,EAAoBC,UAAQ,IAAMC,EAAAA,SAASL,EAAU,GAAG,EAAG,CAACA,CAAQ,CAAC,EAErEM,EAAiBC,EAAAA,YAAY,IAAM,CACvC,GAAIN,EAAIO,QAAS,CACf,MAAMC,EAAaR,EAAIO,QACjBE,EAAgCC,KAAKC,MACzCH,EAAWI,UAAYJ,EAAWK,YACpC,EACuBH,KAAKC,MAAMH,EAAWM,aAAeb,CAAM,GAE5CQ,GACFP,EAAA,CACpB,CACF,EAGC,CAACA,CAAiB,CAAC,EAEtBa,EAAAA,UAAU,IAAM,CACVC,IAAAA,EACJ,OAAIhB,EAAIO,UACNS,EAAUhB,EAAIO,QACVA,EAAAA,QAAQU,iBAAiB,SAAUZ,CAAc,GAGhD,IAAM,CACPW,GACME,EAAAA,oBAAoB,SAAUb,CAAc,CAExD,CAAA,EAGC,CAACA,CAAc,CAAC,CACrB"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@knocklabs/react-core"),y=require("react"),A=require("../../../core/components/Button/Button.js"),B=require("../../../core/components/Button/ButtonGroup.js");require("lodash.debounce");const T=require("./ArchiveButton.js"),h=require("./Avatar.js");;/* empty css            */const w=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=w(y);function p(e){e&&e!==""&&setTimeout(()=>window.location.assign(e),200)}const M=t.default.forwardRef(({item:e,onItemClick:i,onButtonClick:s,avatar:b,children:f,archiveButton:k},v)=>{var _;const{feedClient:l,colorMode:N}=c.useKnockFeed(),{locale:E}=c.useTranslations(),o=y.useMemo(()=>e.blocks.reduce((n,a)=>({...n,[a.name]:a}),{}),[e]),u=(_=o.action_url)==null?void 0:_.rendered,m=o.actions,d=t.default.useCallback(()=>(l.markAsInteracted(e,{type:"cell_click",action:u}),i?i(e):p(u)),[e,u,i,l]),C=t.default.useCallback((n,a)=>(l.markAsInteracted(e,{type:"button_click",name:a.name,label:a.label,action:a.action}),s?s(e,a):p(a.action)),[s,l,e]),q=t.default.useCallback(n=>{switch(n.key){case"Enter":{n.stopPropagation(),d();break}}},[d]),r=e.actors[0];return t.default.createElement("div",{ref:v,className:`rnf-notification-cell rnf-notification-cell--${N}`,onClick:d,onKeyDown:q,tabIndex:0},t.default.createElement("div",{className:"rnf-notification-cell__inner"},!e.read_at&&t.default.createElement("div",{className:"rnf-notification-cell__unread-dot"}),c.renderNodeOrFallback(b,r&&"name"in r&&r.name&&t.default.createElement(h.Avatar,{name:r.name,src:r.avatar})),t.default.createElement("div",{className:"rnf-notification-cell__content-outer"},o.body&&t.default.createElement("div",{className:"rnf-notification-cell__content",dangerouslySetInnerHTML:{__html:o.body.rendered}}),m&&t.default.createElement("div",{className:"rnf-notification-cell__button-group"},t.default.createElement(B.ButtonGroup,null,m.buttons.map((n,a)=>t.default.createElement(A.Button,{variant:a===0?"primary":"secondary",key:n.name,onClick:g=>C(g,n)},n.label)))),f&&t.default.createElement("div",{className:"rnf-notification-cell__child-content"},f),t.default.createElement("span",{className:"rnf-notification-cell__timestamp"},c.formatTimestamp(e.inserted_at,{locale:E}))),c.renderNodeOrFallback(k,t.default.createElement(T.ArchiveButton,{item:e}))))});exports.NotificationCell=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@knocklabs/react-core"),y=require("react"),A=require("../../../core/components/Button/Button.js"),B=require("../../../core/components/Button/ButtonGroup.js"),T=require("./ArchiveButton.js"),h=require("./Avatar.js");;/* empty css            */const w=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=w(y);function p(e){e&&e!==""&&setTimeout(()=>window.location.assign(e),200)}const M=t.default.forwardRef(({item:e,onItemClick:i,onButtonClick:s,avatar:b,children:f,archiveButton:k},v)=>{var _;const{feedClient:l,colorMode:N}=c.useKnockFeed(),{locale:E}=c.useTranslations(),o=y.useMemo(()=>e.blocks.reduce((n,a)=>({...n,[a.name]:a}),{}),[e]),d=(_=o.action_url)==null?void 0:_.rendered,m=o.actions,u=t.default.useCallback(()=>(l.markAsInteracted(e,{type:"cell_click",action:d}),i?i(e):p(d)),[e,d,i,l]),C=t.default.useCallback((n,a)=>(l.markAsInteracted(e,{type:"button_click",name:a.name,label:a.label,action:a.action}),s?s(e,a):p(a.action)),[s,l,e]),g=t.default.useCallback(n=>{switch(n.key){case"Enter":{n.stopPropagation(),u();break}}},[u]),r=e.actors[0];return t.default.createElement("div",{ref:v,className:`rnf-notification-cell rnf-notification-cell--${N}`,onClick:u,onKeyDown:g,tabIndex:0},t.default.createElement("div",{className:"rnf-notification-cell__inner"},!e.read_at&&t.default.createElement("div",{className:"rnf-notification-cell__unread-dot"}),c.renderNodeOrFallback(b,r&&"name"in r&&r.name&&t.default.createElement(h.Avatar,{name:r.name,src:r.avatar})),t.default.createElement("div",{className:"rnf-notification-cell__content-outer"},o.body&&t.default.createElement("div",{className:"rnf-notification-cell__content",dangerouslySetInnerHTML:{__html:o.body.rendered}}),m&&t.default.createElement("div",{className:"rnf-notification-cell__button-group"},t.default.createElement(B.ButtonGroup,null,m.buttons.map((n,a)=>t.default.createElement(A.Button,{variant:a===0?"primary":"secondary",key:n.name,onClick:q=>C(q,n)},n.label)))),f&&t.default.createElement("div",{className:"rnf-notification-cell__child-content"},f),t.default.createElement("span",{className:"rnf-notification-cell__timestamp"},c.formatTimestamp(e.inserted_at,{locale:E}))),c.renderNodeOrFallback(k,t.default.createElement(T.ArchiveButton,{item:e}))))});exports.NotificationCell=M;
 //# sourceMappingURL=NotificationCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationCell.js","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.js","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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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationFeed.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n  ColorMode,\n  FilterStatus,\n  useFeedSettings,\n  useKnockFeed,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n  NotificationFeedHeader,\n  NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n  item: FeedItem<T>;\n  onItemClick?: NotificationCellProps[\"onItemClick\"];\n  onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport type RenderLoadingProps = {\n  colorMode: ColorMode;\n};\n\nexport type RenderLoading = (props: RenderLoadingProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n  EmptyComponent?: ReactNode;\n  /**\n   * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n   */\n  header?: ReactNode;\n  renderItem?: RenderItem;\n  renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n  onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n  onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n  initialFilterStatus?: FilterStatus;\n  renderLoading?: RenderLoading;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n  <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n  <NotificationFeedHeader {...props} />\n);\n\nconst defaultRenderLoading = ({ colorMode }: RenderLoadingProps) => (\n  <div className=\"rnf-notification-feed__spinner-container\">\n    <Spinner\n      thickness={3}\n      size=\"16px\"\n      color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n    />\n  </div>\n);\n\nconst poweredByKnockUrl =\n  \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n  EmptyComponent = <EmptyFeed />,\n  renderItem = defaultRenderItem,\n  onNotificationClick,\n  onNotificationButtonClick,\n  onMarkAllAsReadClick,\n  initialFilterStatus = FilterStatus.All,\n  header,\n  renderHeader = defaultRenderHeader,\n  renderLoading = defaultRenderLoading,\n}) => {\n  const [status, setStatus] = useState(initialFilterStatus);\n  const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n  const { settings } = useFeedSettings(feedClient);\n  const { t } = useTranslations();\n\n  const { pageInfo, items, networkStatus } = useFeedStore();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setStatus(initialFilterStatus);\n  }, [initialFilterStatus]);\n\n  useEffect(() => {\n    // When the feed client changes, or the status changes issue a re-fetch\n    feedClient.fetch({ status });\n  }, [feedClient, status]);\n\n  const noItems = items.length === 0;\n  const requestInFlight = isRequestInFlight(networkStatus);\n\n  // Handle fetching more once we reach the bottom of the list\n  const onBottomCallback = useCallback(() => {\n    if (!requestInFlight && pageInfo.after) {\n      feedClient.fetchNextPage();\n    }\n  }, [requestInFlight, pageInfo, feedClient]);\n\n  // Once we scroll to the bottom of the view we want to automatically fetch\n  // more items for the feed and bring them into the list\n  useOnBottomScroll({\n    ref: containerRef,\n    callback: onBottomCallback,\n    offset: 70,\n  });\n\n  return (\n    <div\n      className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n    >\n      {header ||\n        renderHeader({\n          setFilterStatus: setStatus,\n          filterStatus: status,\n          onMarkAllAsReadClick,\n        })}\n\n      <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n        {networkStatus === NetworkStatus.loading &&\n          renderLoading({ colorMode })}\n\n        <div className=\"rnf-notification-feed__feed-items-container\">\n          {networkStatus !== NetworkStatus.loading &&\n            items.map((item: FeedItem) =>\n              renderItem({\n                item,\n                onItemClick: onNotificationClick,\n                onButtonClick: onNotificationButtonClick,\n              }),\n            )}\n        </div>\n\n        {networkStatus === NetworkStatus.fetchMore &&\n          renderLoading({ colorMode })}\n\n        {!requestInFlight && noItems && EmptyComponent}\n      </div>\n\n      {settings?.features.branding_required && (\n        <div className=\"rnf-notification-feed__knock-branding\">\n          <a href={poweredByKnockUrl} target=\"_blank\">\n            {t(\"poweredBy\") || \"Powered by Knock\"}\n          </a>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","defaultRenderLoading","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","renderLoading","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":"kjBAyDMA,EAAqBC,GACxBC,EAAA,QAAA,cAAAC,EAAA,iBAAA,CAAiB,IAAKF,EAAMG,KAAKC,GAAI,GAAIJ,CAC3C,CAAA,EAEKK,EAAuBL,GAC1BC,EAAA,QAAA,cAAAK,yBAAA,CAA2BN,GAAAA,EAC7B,EAEKO,EAAuBA,CAAC,CAAEC,UAAAA,CAA8B,IAC3DP,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,0CAAA,0BACZQ,EACC,QAAA,CAAA,UAAW,EACX,KAAK,OACL,MAAOD,IAAc,OAAS,4BAA8BE,OAAU,CAE1E,EAGIC,EACJ,qGAEWC,EAAoDA,CAAC,CAChEC,eAAAA,0BAAkBC,EAAAA,UAAY,IAAA,EAC9BC,WAAAA,EAAahB,EACbiB,oBAAAA,EACAC,0BAAAA,EACAC,qBAAAA,EACAC,oBAAAA,EAAsBC,EAAaC,aAAAA,IACnCC,OAAAA,EACAC,aAAAA,EAAelB,EACfmB,cAAAA,EAAgBjB,CAClB,IAAM,CACJ,KAAM,CAACkB,EAAQC,CAAS,EAAIC,EAAAA,SAASR,CAAmB,EAClD,CAAES,WAAAA,EAAYC,aAAAA,EAAcrB,UAAAA,GAAcsB,eAAa,EACvD,CAAEC,SAAAA,CAAAA,EAAaC,EAAAA,gBAAgBJ,CAAU,EACzC,CAAEK,EAAAA,GAAMC,kBAAgB,EAExB,CAAEC,SAAAA,EAAUC,MAAAA,EAAOC,cAAAA,GAAkBR,EAAa,EAClDS,EAAeC,SAAuB,IAAI,EAEhDC,EAAAA,UAAU,IAAM,CACdd,EAAUP,CAAmB,CAAA,EAC5B,CAACA,CAAmB,CAAC,EAExBqB,EAAAA,UAAU,IAAM,CAEdZ,EAAWa,MAAM,CAAEhB,OAAAA,CAAAA,CAAQ,CAAA,EAC1B,CAACG,EAAYH,CAAM,CAAC,EAEjBiB,MAAAA,EAAUN,EAAMO,SAAW,EAC3BC,EAAkBC,oBAAkBR,CAAa,EAGjDS,EAAmBC,EAAAA,YAAY,IAAM,CACrC,CAACH,GAAmBT,EAASa,OAC/BpB,EAAWqB,cAAc,CAE1B,EAAA,CAACL,EAAiBT,EAAUP,CAAU,CAAC,EAIxB,OAAAsB,EAAA,CAChBC,IAAKb,EACLc,SAAUN,EACVO,OAAQ,EAAA,CACT,0BAGE,MACC,CAAA,UAAW,gDAAgD7C,CAAS,IAEnEc,GACCC,EAAa,CACX+B,gBAAiB5B,EACjB6B,aAAc9B,EACdP,qBAAAA,CACD,CAAA,EAEHjB,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAU,mCAAmC,IAAKqC,CACpDD,EAAAA,IAAkBmB,EAAAA,cAAcC,SAC/BjC,EAAc,CAAEhB,UAAAA,CAAAA,CAAW,EAE5BP,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,6CAAA,EACZoC,IAAkBmB,EAAAA,cAAcC,SAC/BrB,EAAMsB,IAAKvD,GACTY,EAAW,CACTZ,KAAAA,EACAwD,YAAa3C,EACb4C,cAAe3C,CAChB,CAAA,CACH,CACJ,EAECoB,IAAkBmB,EAAAA,cAAcK,WAC/BrC,EAAc,CAAEhB,UAAAA,CAAW,CAAA,EAE5B,CAACoC,GAAmBF,GAAW7B,CAClC,GAECkB,GAAAA,YAAAA,EAAU+B,SAASC,oBACjB9D,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,yCACbA,EAAAA,QAAA,cAAC,IAAE,CAAA,KAAMU,EAAmB,OAAO,QAChCsB,EAAAA,EAAE,WAAW,GAAK,kBACrB,CACF,CAEJ,CAEJ"}
+{"version":3,"file":"NotificationFeed.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n  ColorMode,\n  FilterStatus,\n  useFeedSettings,\n  useKnockFeed,\n  useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n  NotificationFeedHeader,\n  NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n  item: FeedItem<T>;\n  onItemClick?: NotificationCellProps[\"onItemClick\"];\n  onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport type RenderLoadingProps = {\n  colorMode: ColorMode;\n};\n\nexport type RenderLoading = (props: RenderLoadingProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n  EmptyComponent?: ReactNode;\n  /**\n   * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n   */\n  header?: ReactNode;\n  renderItem?: RenderItem;\n  renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n  onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n  onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n  onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n  initialFilterStatus?: FilterStatus;\n  renderLoading?: RenderLoading;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n  <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n  <NotificationFeedHeader {...props} />\n);\n\nconst defaultRenderLoading = ({ colorMode }: RenderLoadingProps) => (\n  <div className=\"rnf-notification-feed__spinner-container\">\n    <Spinner\n      thickness={3}\n      size=\"16px\"\n      color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n    />\n  </div>\n);\n\nconst poweredByKnockUrl =\n  \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n  EmptyComponent = <EmptyFeed />,\n  renderItem = defaultRenderItem,\n  onNotificationClick,\n  onNotificationButtonClick,\n  onMarkAllAsReadClick,\n  initialFilterStatus = FilterStatus.All,\n  header,\n  renderHeader = defaultRenderHeader,\n  renderLoading = defaultRenderLoading,\n}) => {\n  const [status, setStatus] = useState(initialFilterStatus);\n  const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n  const { settings } = useFeedSettings(feedClient);\n  const { t } = useTranslations();\n\n  const { pageInfo, items, networkStatus } = useFeedStore();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setStatus(initialFilterStatus);\n  }, [initialFilterStatus]);\n\n  useEffect(() => {\n    // When the feed client changes, or the status changes issue a re-fetch\n    feedClient.fetch({ status });\n  }, [feedClient, status]);\n\n  const noItems = items.length === 0;\n  const requestInFlight = isRequestInFlight(networkStatus);\n\n  // Handle fetching more once we reach the bottom of the list\n  const onBottomCallback = useCallback(() => {\n    if (!requestInFlight && pageInfo.after) {\n      feedClient.fetchNextPage();\n    }\n  }, [requestInFlight, pageInfo, feedClient]);\n\n  // Once we scroll to the bottom of the view we want to automatically fetch\n  // more items for the feed and bring them into the list\n  useOnBottomScroll({\n    ref: containerRef,\n    callback: onBottomCallback,\n    offset: 70,\n  });\n\n  return (\n    <div\n      className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n    >\n      {header ||\n        renderHeader({\n          setFilterStatus: setStatus,\n          filterStatus: status,\n          onMarkAllAsReadClick,\n        })}\n\n      <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n        {networkStatus === NetworkStatus.loading &&\n          renderLoading({ colorMode })}\n\n        <div className=\"rnf-notification-feed__feed-items-container\">\n          {networkStatus !== NetworkStatus.loading &&\n            items.map((item: FeedItem) =>\n              renderItem({\n                item,\n                onItemClick: onNotificationClick,\n                onButtonClick: onNotificationButtonClick,\n              }),\n            )}\n        </div>\n\n        {networkStatus === NetworkStatus.fetchMore &&\n          renderLoading({ colorMode })}\n\n        {!requestInFlight && noItems && EmptyComponent}\n      </div>\n\n      {settings?.features?.branding_required && (\n        <div className=\"rnf-notification-feed__knock-branding\">\n          <a href={poweredByKnockUrl} target=\"_blank\">\n            {t(\"poweredBy\") || \"Powered by Knock\"}\n          </a>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","defaultRenderLoading","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","renderLoading","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":"kjBAyDMA,EAAqBC,GACxBC,EAAA,QAAA,cAAAC,EAAA,iBAAA,CAAiB,IAAKF,EAAMG,KAAKC,GAAI,GAAIJ,CAC3C,CAAA,EAEKK,EAAuBL,GAC1BC,EAAA,QAAA,cAAAK,yBAAA,CAA2BN,GAAAA,EAC7B,EAEKO,EAAuBA,CAAC,CAAEC,UAAAA,CAA8B,IAC3DP,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,0CAAA,0BACZQ,EACC,QAAA,CAAA,UAAW,EACX,KAAK,OACL,MAAOD,IAAc,OAAS,4BAA8BE,OAAU,CAE1E,EAGIC,EACJ,qGAEWC,EAAoDA,CAAC,CAChEC,eAAAA,0BAAkBC,EAAAA,UAAY,IAAA,EAC9BC,WAAAA,EAAahB,EACbiB,oBAAAA,EACAC,0BAAAA,EACAC,qBAAAA,EACAC,oBAAAA,EAAsBC,EAAaC,aAAAA,IACnCC,OAAAA,EACAC,aAAAA,EAAelB,EACfmB,cAAAA,EAAgBjB,CAClB,IAAM,OACJ,KAAM,CAACkB,EAAQC,CAAS,EAAIC,EAAAA,SAASR,CAAmB,EAClD,CAAES,WAAAA,EAAYC,aAAAA,EAAcrB,UAAAA,GAAcsB,eAAa,EACvD,CAAEC,SAAAA,CAAAA,EAAaC,EAAAA,gBAAgBJ,CAAU,EACzC,CAAEK,EAAAA,GAAMC,kBAAgB,EAExB,CAAEC,SAAAA,EAAUC,MAAAA,EAAOC,cAAAA,GAAkBR,EAAa,EAClDS,EAAeC,SAAuB,IAAI,EAEhDC,EAAAA,UAAU,IAAM,CACdd,EAAUP,CAAmB,CAAA,EAC5B,CAACA,CAAmB,CAAC,EAExBqB,EAAAA,UAAU,IAAM,CAEdZ,EAAWa,MAAM,CAAEhB,OAAAA,CAAAA,CAAQ,CAAA,EAC1B,CAACG,EAAYH,CAAM,CAAC,EAEjBiB,MAAAA,EAAUN,EAAMO,SAAW,EAC3BC,EAAkBC,oBAAkBR,CAAa,EAGjDS,EAAmBC,EAAAA,YAAY,IAAM,CACrC,CAACH,GAAmBT,EAASa,OAC/BpB,EAAWqB,cAAc,CAE1B,EAAA,CAACL,EAAiBT,EAAUP,CAAU,CAAC,EAIxB,OAAAsB,EAAA,CAChBC,IAAKb,EACLc,SAAUN,EACVO,OAAQ,EAAA,CACT,0BAGE,MACC,CAAA,UAAW,gDAAgD7C,CAAS,IAEnEc,GACCC,EAAa,CACX+B,gBAAiB5B,EACjB6B,aAAc9B,EACdP,qBAAAA,CACD,CAAA,EAEHjB,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAU,mCAAmC,IAAKqC,CACpDD,EAAAA,IAAkBmB,EAAAA,cAAcC,SAC/BjC,EAAc,CAAEhB,UAAAA,CAAAA,CAAW,EAE5BP,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,6CAAA,EACZoC,IAAkBmB,EAAAA,cAAcC,SAC/BrB,EAAMsB,IAAKvD,GACTY,EAAW,CACTZ,KAAAA,EACAwD,YAAa3C,EACb4C,cAAe3C,CAChB,CAAA,CACH,CACJ,EAECoB,IAAkBmB,EAAAA,cAAcK,WAC/BrC,EAAc,CAAEhB,UAAAA,CAAW,CAAA,EAE5B,CAACoC,GAAmBF,GAAW7B,CAClC,IAECkB,EAAAA,GAAAA,YAAAA,EAAU+B,WAAV/B,YAAAA,EAAoBgC,oBAClB9D,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,yCACbA,EAAAA,QAAA,cAAC,IAAE,CAAA,KAAMU,EAAmB,OAAO,QAChCsB,EAAAA,EAAE,WAAW,GAAK,kBACrB,CACF,CAEJ,CAEJ"}

package/dist/cjs/modules/guide/components/Banner/Banner.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("@knocklabs/react-core"),w=require("clsx"),v=require("react"),V=require("../helpers.js");;/* empty css            */const k=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=k(w),t=k(v),h="banner",u=({children:e,className:a,...n})=>t.default.createElement("div",{className:l.default("knock-guide-banner",a),...n},e);u.displayName="BannerView.Root";const d=({children:e,className:a,...n})=>t.default.createElement("div",{className:l.default("knock-guide-banner__message",a),...n},e);d.displayName="BannerView.Content";const s=({title:e,className:a,...n})=>t.default.createElement("div",{className:l.default("knock-guide-banner__title",a),...n},e);s.displayName="BannerView.Title";const m=({body:e,className:a,...n})=>t.default.createElement("div",{className:l.default("knock-guide-banner__body",a),dangerouslySetInnerHTML:{__html:e},...n});m.displayName="BannerView.Body";const f=({children:e,className:a,...n})=>t.default.createElement("div",{className:l.default("knock-guide-banner__actions",a),...n},e);f.displayName="BannerView.Actions";const y=({text:e,action:a,className:n,...r})=>t.default.createElement("button",{className:l.default("knock-guide-banner__action",n),...r},e);y.displayName="BannerView.PrimaryButton";const _=({text:e,action:a,className:n,...r})=>t.default.createElement("button",{className:l.default("knock-guide-banner__action knock-guide-banner__action--secondary",n),...r},e);_.displayName="BannerView.SecondaryButton";const b=({className:e,...a})=>t.default.createElement("button",{className:l.default("knock-guide-banner__close",e),...a},t.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},t.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},t.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),t.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));b.displayName="BannerView.DismissButton";const p=({content:e,colorMode:a="light",onDismiss:n,onButtonClick:r})=>t.default.createElement(u,{"data-knock-color-mode":a},t.default.createElement(d,null,t.default.createElement(s,{title:e.title}),t.default.createElement(m,{body:e.body})),t.default.createElement(f,null,e.secondary_button&&t.default.createElement(_,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:o=>{if(r){const{text:c,action:i}=e.secondary_button;r(o,{name:"secondary_button",text:c,action:i})}}}),e.primary_button&&t.default.createElement(y,{text:e.primary_button.text,action:e.primary_button.action,onClick:o=>{if(r){const{text:c,action:i}=e.primary_button;r(o,{name:"primary_button",text:c,action:i})}}}),e.dismissible&&t.default.createElement(b,{onClick:n})));p.displayName="BannerView.Default";const E=({guideKey:e,onButtonClick:a})=>{const{guide:n,step:r,colorMode:o}=N.useGuide({key:e,type:h});return t.default.useEffect(()=>{r&&r.markAsSeen()},[r]),!n||!r?null:t.default.createElement(p,{content:r.content,colorMode:o,onDismiss:()=>r.markAsArchived(),onButtonClick:(c,i)=>{const B={...i,type:"button_click"};return r.markAsInteracted({metadata:B}),a?a(c,{button:i,step:r,guide:n}):V.maybeNavigateToUrlWithDelay(i.action)}})};E.displayName="Banner";const g={};Object.assign(g,{Default:p,Root:u,Content:d,Title:s,Body:m,Actions:f,PrimaryButton:y,SecondaryButton:_,DismissButton:b});exports.Banner=E;exports.BannerView=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("@knocklabs/react-core"),N=require("react"),l=require("../../../core/cx/index.js"),w=require("../helpers.js");;/* empty css            */const x=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=x(N),v="banner",s=({children:e,className:a,...n})=>t.default.createElement("div",{className:l.cx("knock-guide-banner",a),...n},e);s.displayName="BannerView.Root";const u=({children:e,className:a,...n})=>t.default.createElement("div",{className:l.cx("knock-guide-banner__message",a),...n},e);u.displayName="BannerView.Content";const d=({title:e,className:a,...n})=>t.default.createElement("div",{className:l.cx("knock-guide-banner__title",a),...n},e);d.displayName="BannerView.Title";const m=({body:e,className:a,...n})=>t.default.createElement("div",{className:l.cx("knock-guide-banner__body",a),dangerouslySetInnerHTML:{__html:e},...n});m.displayName="BannerView.Body";const f=({children:e,className:a,...n})=>t.default.createElement("div",{className:l.cx("knock-guide-banner__actions",a),...n},e);f.displayName="BannerView.Actions";const y=({text:e,action:a,className:n,...r})=>t.default.createElement("button",{className:l.cx("knock-guide-banner__action",n),...r},e);y.displayName="BannerView.PrimaryButton";const _=({text:e,action:a,className:n,...r})=>t.default.createElement("button",{className:l.cx("knock-guide-banner__action knock-guide-banner__action--secondary",n),...r},e);_.displayName="BannerView.SecondaryButton";const b=({className:e,...a})=>t.default.createElement("button",{className:l.cx("knock-guide-banner__close",e),...a},t.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},t.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},t.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),t.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));b.displayName="BannerView.DismissButton";const p=({content:e,colorMode:a="light",onDismiss:n,onButtonClick:r})=>t.default.createElement(s,{"data-knock-color-mode":a},t.default.createElement(u,null,t.default.createElement(d,{title:e.title}),t.default.createElement(m,{body:e.body})),t.default.createElement(f,null,e.secondary_button&&t.default.createElement(_,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:c=>{if(r){const{text:o,action:i}=e.secondary_button;r(c,{name:"secondary_button",text:o,action:i})}}}),e.primary_button&&t.default.createElement(y,{text:e.primary_button.text,action:e.primary_button.action,onClick:c=>{if(r){const{text:o,action:i}=e.primary_button;r(c,{name:"primary_button",text:o,action:i})}}}),e.dismissible&&t.default.createElement(b,{onClick:n})));p.displayName="BannerView.Default";const k=({guideKey:e,onButtonClick:a})=>{const{guide:n,step:r,colorMode:c}=B.useGuide({key:e,type:v});return t.default.useEffect(()=>{r&&r.markAsSeen()},[r]),!n||!r?null:t.default.createElement(p,{content:r.content,colorMode:c,onDismiss:()=>r.markAsArchived(),onButtonClick:(o,i)=>{const g={...i,type:"button_click"};return r.markAsInteracted({metadata:g}),a?a(o,{button:i,step:r,guide:n}):w.maybeNavigateToUrlWithDelay(i.action)}})};k.displayName="Banner";const E={};Object.assign(E,{Default:p,Root:s,Content:u,Title:d,Body:m,Actions:f,PrimaryButton:y,SecondaryButton:_,DismissButton:b});exports.Banner=k;exports.BannerView=E;
 //# sourceMappingURL=Banner.js.map

package/dist/cjs/modules/guide/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../../../../src/modules/guide/components/Banner/Banner.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport { ButtonContent, TargetButton, TargetButtonWithGuide } from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"banner\";\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nRoot.displayName = \"BannerView.Root\";\n\nconst Content: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner__message\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nContent.displayName = \"BannerView.Content\";\n\nconst Title: React.FC<\n  { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner__title\", className)} {...props}>\n      {title}\n    </div>\n  );\n};\nTitle.displayName = \"BannerView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={clsx(\"knock-guide-banner__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"BannerView.Body\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-banner__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"BannerView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={clsx(\"knock-guide-banner__action\", className)}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"BannerView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={clsx(\n        \"knock-guide-banner__action knock-guide-banner__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"BannerView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={clsx(\"knock-guide-banner__close\", className)} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </button>\n  );\n};\nDismissButton.displayName = \"BannerView.DismissButton\";\n\ntype BannerContent = {\n  title: string;\n  body: string;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: BannerContent;\n  colorMode?: ColorMode;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({ content, colorMode = \"light\", onDismiss, onButtonClick }) => {\n  return (\n    <Root data-knock-color-mode={colorMode}>\n      <Content>\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      <Actions>\n        {content.secondary_button && (\n          <SecondaryButton\n            text={content.secondary_button.text}\n            action={content.secondary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.secondary_button!;\n                onButtonClick(e, { name: \"secondary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.primary_button && (\n          <PrimaryButton\n            text={content.primary_button.text}\n            action={content.primary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.primary_button!;\n                onButtonClick(e, { name: \"primary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.dismissible && <DismissButton onClick={onDismiss} />}\n      </Actions>\n    </Root>\n  );\n};\nDefaultView.displayName = \"BannerView.Default\";\n\ntype BannerProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n};\n\nexport const Banner: React.FC<BannerProps> = ({ guideKey, onButtonClick }) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as BannerContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n    />\n  );\n};\nBanner.displayName = \"Banner\";\n\nexport const BannerView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Content: typeof Content;\n  Title: typeof Title;\n  Body: typeof Body;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(BannerView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Title","title","Body","body","__html","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","secondary_button","e","name","primary_button","dismissible","Banner","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","BannerView","Object","assign","Default"],"mappings":"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"}
+{"version":3,"file":"Banner.js","sources":["../../../../../../src/modules/guide/components/Banner/Banner.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport { cx } from \"../../../core/cx\";\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport { ButtonContent, TargetButton, TargetButtonWithGuide } from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"banner\";\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-banner\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nRoot.displayName = \"BannerView.Root\";\n\nconst Content: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-banner__message\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nContent.displayName = \"BannerView.Content\";\n\nconst Title: React.FC<\n  { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-banner__title\", className)} {...props}>\n      {title}\n    </div>\n  );\n};\nTitle.displayName = \"BannerView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={cx(\"knock-guide-banner__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"BannerView.Body\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-banner__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"BannerView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={cx(\"knock-guide-banner__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"BannerView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={cx(\n        \"knock-guide-banner__action knock-guide-banner__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"BannerView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={cx(\"knock-guide-banner__close\", className)} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </button>\n  );\n};\nDismissButton.displayName = \"BannerView.DismissButton\";\n\ntype BannerContent = {\n  title: string;\n  body: string;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: BannerContent;\n  colorMode?: ColorMode;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({ content, colorMode = \"light\", onDismiss, onButtonClick }) => {\n  return (\n    <Root data-knock-color-mode={colorMode}>\n      <Content>\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      <Actions>\n        {content.secondary_button && (\n          <SecondaryButton\n            text={content.secondary_button.text}\n            action={content.secondary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.secondary_button!;\n                onButtonClick(e, { name: \"secondary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.primary_button && (\n          <PrimaryButton\n            text={content.primary_button.text}\n            action={content.primary_button.action}\n            onClick={(e) => {\n              if (onButtonClick) {\n                const { text, action } = content.primary_button!;\n                onButtonClick(e, { name: \"primary_button\", text, action });\n              }\n            }}\n          />\n        )}\n\n        {content.dismissible && <DismissButton onClick={onDismiss} />}\n      </Actions>\n    </Root>\n  );\n};\nDefaultView.displayName = \"BannerView.Default\";\n\ntype BannerProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n};\n\nexport const Banner: React.FC<BannerProps> = ({ guideKey, onButtonClick }) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as BannerContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n    />\n  );\n};\nBanner.displayName = \"Banner\";\n\nexport const BannerView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Content: typeof Content;\n  Title: typeof Title;\n  Body: typeof Body;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(BannerView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","cx","displayName","Content","Title","title","Body","body","__html","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","secondary_button","e","name","primary_button","dismissible","Banner","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","BannerView","Object","assign","Default"],"mappings":"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"}

package/dist/cjs/modules/guide/components/Card/Card.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("@knocklabs/react-core"),A=require("clsx"),D=require("react"),b=require("../helpers.js");;/* empty css            */const C=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=C(A),a=C(D),S="card",o=({children:e,className:t,...l})=>a.default.createElement("div",{className:i.default("knock-guide-card",t),...l},e);o.displayName="CardView.Root";const m=({children:e,className:t,...l})=>a.default.createElement("div",{className:i.default("knock-guide-card__message",t),...l},e);m.displayName="CardView.Content";const w=({children:e,className:t,...l})=>a.default.createElement("div",{className:i.default("knock-guide-card__header",t),...l},e);w.displayName="CardView.Header";const h=({headline:e,className:t,...l})=>a.default.createElement("div",{className:i.default("knock-guide-card__headline",t),...l},e);h.displayName="CardView.Headline";const f=({title:e,className:t,...l})=>a.default.createElement("div",{className:i.default("knock-guide-card__title",t),...l},e);f.displayName="CardView.Title";const y=({body:e,className:t,...l})=>a.default.createElement("div",{className:i.default("knock-guide-card__body",t),dangerouslySetInnerHTML:{__html:e},...l});y.displayName="CardView.Body";const _=({children:e,className:t,alt:l,...r})=>a.default.createElement("img",{className:i.default("knock-guide-card__img",t),alt:l||"",...r},e);_.displayName="CardView.Img";const g=({children:e,className:t,...l})=>a.default.createElement("div",{className:i.default("knock-guide-card__actions",t),...l},e);g.displayName="CardView.Actions";const k=({text:e,action:t,className:l,...r})=>a.default.createElement("button",{className:i.default("knock-guide-card__action",l),...r},e);k.displayName="CardView.PrimaryButton";const p=({text:e,action:t,className:l,...r})=>a.default.createElement("button",{className:i.default("knock-guide-card__action knock-guide-card__action--secondary",l),...r},e);p.displayName="CardView.SecondaryButton";const E=({className:e,...t})=>a.default.createElement("button",{className:i.default("knock-guide-card__close",e),...t},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},a.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},a.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),a.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));E.displayName="CardView.DismissButton";const N=({content:e,colorMode:t="light",onDismiss:l,onButtonClick:r,onImageClick:d})=>a.default.createElement(o,{"data-knock-color-mode":t},a.default.createElement(m,null,a.default.createElement(w,null,a.default.createElement(h,{headline:e.headline}),e.dismissible&&a.default.createElement(E,{onClick:l})),a.default.createElement(f,{title:e.title}),a.default.createElement(y,{body:e.body})),e.image&&a.default.createElement("a",{href:b.isValidHttpUrl(e.image.action)?e.image.action:void 0,target:"_blank"},a.default.createElement(_,{src:e.image.url,alt:e.image.alt,onClick:c=>{d&&d(c,e.image)}})),(e.primary_button||e.secondary_button)&&a.default.createElement(g,null,e.primary_button&&a.default.createElement(k,{text:e.primary_button.text,action:e.primary_button.action,onClick:c=>{if(r){const{text:u,action:n}=e.primary_button;r(c,{name:"primary_button",text:u,action:n})}}}),e.secondary_button&&a.default.createElement(p,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:c=>{if(r){const{text:u,action:n}=e.secondary_button;r(c,{name:"secondary_button",text:u,action:n})}}})));N.displayName="CardView.Default";const V=({guideKey:e,onButtonClick:t,onImageClick:l})=>{const{guide:r,step:d,colorMode:c}=x.useGuide({key:e,type:S});return a.default.useEffect(()=>{d&&d.markAsSeen()},[d]),!r||!d?null:a.default.createElement(N,{content:d.content,colorMode:c,onDismiss:()=>d.markAsArchived(),onButtonClick:(u,n)=>{const s={...n,type:"button_click"};return d.markAsInteracted({metadata:s}),t?t(u,{button:n,step:d,guide:r}):b.maybeNavigateToUrlWithDelay(n.action)},onImageClick:(u,n)=>{const s={...n,type:"image_click"};if(d.markAsInteracted({metadata:s}),l)return l(u,{image:n,step:d,guide:r})}})};V.displayName="Card";const v={};Object.assign(v,{Default:N,Root:o,Content:m,Title:f,Body:y,Img:_,Actions:g,PrimaryButton:k,SecondaryButton:p,DismissButton:E});exports.Card=V;exports.CardView=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("@knocklabs/react-core"),v=require("react"),i=require("../../../core/cx/index.js"),b=require("../helpers.js");;/* empty css            */const A=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=A(v),D="card",o=({children:e,className:t,...r})=>a.default.createElement("div",{className:i.cx("knock-guide-card",t),...r},e);o.displayName="CardView.Root";const m=({children:e,className:t,...r})=>a.default.createElement("div",{className:i.cx("knock-guide-card__message",t),...r},e);m.displayName="CardView.Content";const C=({children:e,className:t,...r})=>a.default.createElement("div",{className:i.cx("knock-guide-card__header",t),...r},e);C.displayName="CardView.Header";const w=({headline:e,className:t,...r})=>a.default.createElement("div",{className:i.cx("knock-guide-card__headline",t),...r},e);w.displayName="CardView.Headline";const f=({title:e,className:t,...r})=>a.default.createElement("div",{className:i.cx("knock-guide-card__title",t),...r},e);f.displayName="CardView.Title";const y=({body:e,className:t,...r})=>a.default.createElement("div",{className:i.cx("knock-guide-card__body",t),dangerouslySetInnerHTML:{__html:e},...r});y.displayName="CardView.Body";const _=({children:e,className:t,alt:r,...l})=>a.default.createElement("img",{className:i.cx("knock-guide-card__img",t),alt:r||"",...l},e);_.displayName="CardView.Img";const g=({children:e,className:t,...r})=>a.default.createElement("div",{className:i.cx("knock-guide-card__actions",t),...r},e);g.displayName="CardView.Actions";const k=({text:e,action:t,className:r,...l})=>a.default.createElement("button",{className:i.cx("knock-guide-card__action",r),...l},e);k.displayName="CardView.PrimaryButton";const p=({text:e,action:t,className:r,...l})=>a.default.createElement("button",{className:i.cx("knock-guide-card__action knock-guide-card__action--secondary",r),...l},e);p.displayName="CardView.SecondaryButton";const E=({className:e,...t})=>a.default.createElement("button",{className:i.cx("knock-guide-card__close",e),...t},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},a.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},a.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),a.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));E.displayName="CardView.DismissButton";const N=({content:e,colorMode:t="light",onDismiss:r,onButtonClick:l,onImageClick:d})=>a.default.createElement(o,{"data-knock-color-mode":t},a.default.createElement(m,null,a.default.createElement(C,null,a.default.createElement(w,{headline:e.headline}),e.dismissible&&a.default.createElement(E,{onClick:r})),a.default.createElement(f,{title:e.title}),a.default.createElement(y,{body:e.body})),e.image&&a.default.createElement("a",{href:b.isValidHttpUrl(e.image.action)?e.image.action:void 0,target:"_blank"},a.default.createElement(_,{src:e.image.url,alt:e.image.alt,onClick:n=>{d&&d(n,e.image)}})),(e.primary_button||e.secondary_button)&&a.default.createElement(g,null,e.primary_button&&a.default.createElement(k,{text:e.primary_button.text,action:e.primary_button.action,onClick:n=>{if(l){const{text:s,action:c}=e.primary_button;l(n,{name:"primary_button",text:s,action:c})}}}),e.secondary_button&&a.default.createElement(p,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:n=>{if(l){const{text:s,action:c}=e.secondary_button;l(n,{name:"secondary_button",text:s,action:c})}}})));N.displayName="CardView.Default";const x=({guideKey:e,onButtonClick:t,onImageClick:r})=>{const{guide:l,step:d,colorMode:n}=V.useGuide({key:e,type:D});return a.default.useEffect(()=>{d&&d.markAsSeen()},[d]),!l||!d?null:a.default.createElement(N,{content:d.content,colorMode:n,onDismiss:()=>d.markAsArchived(),onButtonClick:(s,c)=>{const u={...c,type:"button_click"};return d.markAsInteracted({metadata:u}),t?t(s,{button:c,step:d,guide:l}):b.maybeNavigateToUrlWithDelay(c.action)},onImageClick:(s,c)=>{const u={...c,type:"image_click"};if(d.markAsInteracted({metadata:u}),r)return r(s,{image:c,step:d,guide:l})}})};x.displayName="Card";const h={};Object.assign(h,{Default:N,Root:o,Content:m,Title:f,Body:y,Img:_,Actions:g,PrimaryButton:k,SecondaryButton:p,DismissButton:E});exports.Card=x;exports.CardView=h;
 //# sourceMappingURL=Card.js.map

package/dist/cjs/modules/guide/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../../src/modules/guide/components/Card/Card.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { isValidHttpUrl, maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n  ButtonContent,\n  ImageContent,\n  TargetButton,\n  TargetButtonWithGuide,\n  TargetImage,\n  TargetImageWithGuide,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"card\";\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nRoot.displayName = \"CardView.Root\";\n\nconst Content: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__message\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nContent.displayName = \"CardView.Content\";\n\nconst Header: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__header\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nHeader.displayName = \"CardView.Header\";\n\nconst Headline: React.FC<\n  { headline: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ headline, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__headline\", className)} {...props}>\n      {headline}\n    </div>\n  );\n};\nHeadline.displayName = \"CardView.Headline\";\n\nconst Title: React.FC<\n  { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__title\", className)} {...props}>\n      {title}\n    </div>\n  );\n};\nTitle.displayName = \"CardView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={clsx(\"knock-guide-card__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"CardView.Body\";\n\nconst Img: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"img\">>\n> = ({ children, className, alt, ...props }) => {\n  return (\n    <img\n      className={clsx(\"knock-guide-card__img\", className)}\n      alt={alt || \"\"}\n      {...props}\n    >\n      {children}\n    </img>\n  );\n};\nImg.displayName = \"CardView.Img\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-card__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"CardView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={clsx(\"knock-guide-card__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"CardView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={clsx(\n        \"knock-guide-card__action knock-guide-card__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"CardView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={clsx(\"knock-guide-card__close\", className)} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </button>\n  );\n};\nDismissButton.displayName = \"CardView.DismissButton\";\n\ntype CardContent = {\n  headline: string;\n  title: string;\n  body: string;\n  image?: ImageContent;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: CardContent;\n  colorMode?: ColorMode;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n  onImageClick?: (e: React.MouseEvent, image: TargetImage) => void;\n}> = ({\n  content,\n  colorMode = \"light\",\n  onDismiss,\n  onButtonClick,\n  onImageClick,\n}) => {\n  return (\n    <Root data-knock-color-mode={colorMode}>\n      <Content>\n        <Header>\n          <Headline headline={content.headline} />\n          {content.dismissible && <DismissButton onClick={onDismiss} />}\n        </Header>\n\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      {content.image && (\n        <a\n          href={\n            isValidHttpUrl(content.image.action)\n              ? content.image.action\n              : undefined\n          }\n          target=\"_blank\"\n        >\n          <Img\n            src={content.image.url}\n            alt={content.image.alt}\n            onClick={(e) => {\n              if (onImageClick) {\n                onImageClick(e, content.image!);\n              }\n            }}\n          />\n        </a>\n      )}\n      {(content.primary_button || content.secondary_button) && (\n        <Actions>\n          {content.primary_button && (\n            <PrimaryButton\n              text={content.primary_button.text}\n              action={content.primary_button.action}\n              onClick={(e) => {\n                if (onButtonClick) {\n                  const { text, action } = content.primary_button!;\n                  onButtonClick(e, { name: \"primary_button\", text, action });\n                }\n              }}\n            />\n          )}\n          {content.secondary_button && (\n            <SecondaryButton\n              text={content.secondary_button.text}\n              action={content.secondary_button.action}\n              onClick={(e) => {\n                if (onButtonClick) {\n                  const { text, action } = content.secondary_button!;\n                  onButtonClick(e, { name: \"secondary_button\", text, action });\n                }\n              }}\n            />\n          )}\n        </Actions>\n      )}\n    </Root>\n  );\n};\nDefaultView.displayName = \"CardView.Default\";\n\ntype CardProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n  onImageClick?: (e: React.MouseEvent, target: TargetImageWithGuide) => void;\n};\n\nexport const Card: React.FC<CardProps> = ({\n  guideKey,\n  onButtonClick,\n  onImageClick,\n}) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as CardContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n      onImageClick={(e, image) => {\n        const metadata = { ...image, type: \"image_click\" };\n        step.markAsInteracted({ metadata });\n\n        if (onImageClick) {\n          return onImageClick(e, { image, step, guide });\n        }\n      }}\n    />\n  );\n};\nCard.displayName = \"Card\";\n\nexport const CardView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Content: typeof Content;\n  Headline: typeof Headline;\n  Title: typeof Title;\n  Body: typeof Body;\n  Img: typeof Img;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(CardView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Img,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Header","Headline","headline","Title","title","Body","body","__html","Img","alt","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","onImageClick","dismissible","image","isValidHttpUrl","undefined","url","e","primary_button","secondary_button","name","Card","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","CardView","Object","assign","Default"],"mappings":"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"}
+{"version":3,"file":"Card.js","sources":["../../../../../../src/modules/guide/components/Card/Card.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport { cx } from \"../../../core/cx\";\nimport { isValidHttpUrl, maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n  ButtonContent,\n  ImageContent,\n  TargetButton,\n  TargetButtonWithGuide,\n  TargetImage,\n  TargetImageWithGuide,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"card\";\n\nconst Root: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nRoot.displayName = \"CardView.Root\";\n\nconst Content: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__message\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nContent.displayName = \"CardView.Content\";\n\nconst Header: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__header\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nHeader.displayName = \"CardView.Header\";\n\nconst Headline: React.FC<\n  { headline: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ headline, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__headline\", className)} {...props}>\n      {headline}\n    </div>\n  );\n};\nHeadline.displayName = \"CardView.Headline\";\n\nconst Title: React.FC<\n  { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__title\", className)} {...props}>\n      {title}\n    </div>\n  );\n};\nTitle.displayName = \"CardView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={cx(\"knock-guide-card__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"CardView.Body\";\n\nconst Img: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"img\">>\n> = ({ children, className, alt, ...props }) => {\n  return (\n    <img\n      className={cx(\"knock-guide-card__img\", className)}\n      alt={alt || \"\"}\n      {...props}\n    >\n      {children}\n    </img>\n  );\n};\nImg.displayName = \"CardView.Img\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-card__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"CardView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={cx(\"knock-guide-card__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"CardView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={cx(\n        \"knock-guide-card__action knock-guide-card__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"CardView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n  className,\n  ...props\n}) => {\n  return (\n    <button className={cx(\"knock-guide-card__close\", className)} {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </button>\n  );\n};\nDismissButton.displayName = \"CardView.DismissButton\";\n\ntype CardContent = {\n  headline: string;\n  title: string;\n  body: string;\n  image?: ImageContent;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: CardContent;\n  colorMode?: ColorMode;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n  onImageClick?: (e: React.MouseEvent, image: TargetImage) => void;\n}> = ({\n  content,\n  colorMode = \"light\",\n  onDismiss,\n  onButtonClick,\n  onImageClick,\n}) => {\n  return (\n    <Root data-knock-color-mode={colorMode}>\n      <Content>\n        <Header>\n          <Headline headline={content.headline} />\n          {content.dismissible && <DismissButton onClick={onDismiss} />}\n        </Header>\n\n        <Title title={content.title} />\n        <Body body={content.body} />\n      </Content>\n      {content.image && (\n        <a\n          href={\n            isValidHttpUrl(content.image.action)\n              ? content.image.action\n              : undefined\n          }\n          target=\"_blank\"\n        >\n          <Img\n            src={content.image.url}\n            alt={content.image.alt}\n            onClick={(e) => {\n              if (onImageClick) {\n                onImageClick(e, content.image!);\n              }\n            }}\n          />\n        </a>\n      )}\n      {(content.primary_button || content.secondary_button) && (\n        <Actions>\n          {content.primary_button && (\n            <PrimaryButton\n              text={content.primary_button.text}\n              action={content.primary_button.action}\n              onClick={(e) => {\n                if (onButtonClick) {\n                  const { text, action } = content.primary_button!;\n                  onButtonClick(e, { name: \"primary_button\", text, action });\n                }\n              }}\n            />\n          )}\n          {content.secondary_button && (\n            <SecondaryButton\n              text={content.secondary_button.text}\n              action={content.secondary_button.action}\n              onClick={(e) => {\n                if (onButtonClick) {\n                  const { text, action } = content.secondary_button!;\n                  onButtonClick(e, { name: \"secondary_button\", text, action });\n                }\n              }}\n            />\n          )}\n        </Actions>\n      )}\n    </Root>\n  );\n};\nDefaultView.displayName = \"CardView.Default\";\n\ntype CardProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n  onImageClick?: (e: React.MouseEvent, target: TargetImageWithGuide) => void;\n};\n\nexport const Card: React.FC<CardProps> = ({\n  guideKey,\n  onButtonClick,\n  onImageClick,\n}) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as CardContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n      onImageClick={(e, image) => {\n        const metadata = { ...image, type: \"image_click\" };\n        step.markAsInteracted({ metadata });\n\n        if (onImageClick) {\n          return onImageClick(e, { image, step, guide });\n        }\n      }}\n    />\n  );\n};\nCard.displayName = \"Card\";\n\nexport const CardView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Content: typeof Content;\n  Headline: typeof Headline;\n  Title: typeof Title;\n  Body: typeof Body;\n  Img: typeof Img;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  DismissButton: typeof DismissButton;\n};\n\nObject.assign(CardView, {\n  Default: DefaultView,\n  Root,\n  Content,\n  Title,\n  Body,\n  Img,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","cx","displayName","Content","Header","Headline","headline","Title","title","Body","body","__html","Img","alt","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","onImageClick","dismissible","image","isValidHttpUrl","undefined","url","e","primary_button","secondary_button","name","Card","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","CardView","Object","assign","Default"],"mappings":"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"}

package/dist/cjs/modules/guide/components/Modal/Modal.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("@knocklabs/react-core"),D=require("@radix-ui/react-dialog"),S=require("clsx"),x=require("react"),M=require("../helpers.js");;/* empty css            */const V=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function R(e){if(e&&typeof e=="object"&&"default"in e)return e;const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(l,a,o.get?o:{enumerable:!0,get:()=>e[a]})}}return l.default=e,Object.freeze(l)}const c=R(D),n=V(S),t=V(x),j="modal",m=({children:e,onOpenChange:l,...a})=>t.default.createElement(c.Root,{defaultOpen:!0,onOpenChange:l,...a},t.default.createElement(c.Portal,null,e));m.displayName="ModalView.Root";const f=t.default.forwardRef(({className:e,...l},a)=>t.default.createElement(c.Overlay,{className:n.default("knock-guide-modal__overlay",e),ref:a,...l}));f.displayName="ModalView.Overlay";const y=t.default.forwardRef(({children:e,className:l,...a},o)=>t.default.createElement(c.Content,{className:n.default("knock-guide-modal",l),ref:o,...a},e));y.displayName="ModalView.Content";const v=({children:e,className:l,...a})=>t.default.createElement("div",{className:n.default("knock-guide-modal__header",l),...a},e);v.displayName="ModalView.Header";const _=({title:e,className:l,...a})=>t.default.createElement(c.Title,{className:n.default("knock-guide-modal__title",l),...a},e);_.displayName="ModalView.Title";const p=({body:e,className:l,...a})=>t.default.createElement(c.Description,{className:n.default("knock-guide-modal__body",l),dangerouslySetInnerHTML:{__html:e},...a});p.displayName="ModalView.Body";const g=({children:e,className:l,alt:a,...o})=>t.default.createElement("img",{className:n.default("knock-guide-modal__img",l),alt:a||"",...o},e);g.displayName="ModalView.Img";const k=({children:e,className:l,...a})=>t.default.createElement("div",{className:n.default("knock-guide-modal__actions",l),...a},e);k.displayName="ModalView.Actions";const E=({text:e,action:l,className:a,...o})=>t.default.createElement("button",{className:n.default("knock-guide-modal__action",a),...o},e);E.displayName="ModalView.PrimaryButton";const b=({text:e,action:l,className:a,...o})=>t.default.createElement("button",{className:n.default("knock-guide-modal__action knock-guide-modal__action--secondary",a),...o},e);b.displayName="ModalView.SecondaryButton";const N=({className:e,...l})=>t.default.createElement(c.Close,{className:n.default("knock-guide-modal__close",e),...l},t.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},t.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},t.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),t.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));N.displayName="ModalView.Close";const w=({content:e,colorMode:l="light",onOpenChange:a,onDismiss:o,onButtonClick:r,onImageClick:s})=>t.default.createElement(m,{onOpenChange:a},t.default.createElement(f,null),t.default.createElement(y,{"data-knock-color-mode":l,onPointerDownOutside:o},t.default.createElement(v,null,t.default.createElement(_,{title:e.title}),e.dismissible&&t.default.createElement(N,{onClick:o})),t.default.createElement(p,{body:e.body}),e.image&&t.default.createElement("a",{href:M.isValidHttpUrl(e.image.action)?e.image.action:void 0,target:"_blank"},t.default.createElement(g,{src:e.image.url,alt:e.image.alt,onClick:i=>{s&&s(i,e.image)}})),(e.primary_button||e.secondary_button)&&t.default.createElement(k,null,e.secondary_button&&t.default.createElement(b,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:i=>{if(r){const{text:d,action:u}=e.secondary_button;r(i,{name:"secondary_button",text:d,action:u})}}}),e.primary_button&&t.default.createElement(E,{text:e.primary_button.text,action:e.primary_button.action,onClick:i=>{if(r){const{text:d,action:u}=e.primary_button;r(i,{name:"primary_button",text:d,action:u})}}}))));w.displayName="ModalView.Default";const h=({guideKey:e,onButtonClick:l,onImageClick:a})=>{const{guide:o,step:r,colorMode:s}=C.useGuide({key:e,type:j});return t.default.useEffect(()=>{r&&r.markAsSeen()},[r]),!o||!r?null:t.default.createElement(w,{content:r.content,colorMode:s,onDismiss:()=>r.markAsArchived(),onButtonClick:(i,d)=>{const u={...d,type:"button_click"};return r.markAsInteracted({metadata:u}),l?l(i,{button:d,step:r,guide:o}):M.maybeNavigateToUrlWithDelay(d.action)},onImageClick:(i,d)=>{const u={...d,type:"image_click"};if(r.markAsInteracted({metadata:u}),a)return a(i,{image:d,step:r,guide:o})}})};h.displayName="Modal";const O={};Object.assign(O,{Default:w,Root:m,Overlay:f,Content:y,Title:_,Body:p,Img:g,Actions:k,PrimaryButton:E,SecondaryButton:b,Close:N});exports.Modal=h;exports.ModalView=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("@knocklabs/react-core"),O=require("@radix-ui/react-dialog"),C=require("react"),d=require("../../../core/cx/index.js"),M=require("../helpers.js");;/* empty css            */const D=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function S(e){if(e&&typeof e=="object"&&"default"in e)return e;const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(l,a,o.get?o:{enumerable:!0,get:()=>e[a]})}}return l.default=e,Object.freeze(l)}const u=S(O),t=D(C),R="modal",m=({children:e,onOpenChange:l,...a})=>t.default.createElement(u.Root,{defaultOpen:!0,onOpenChange:l,...a},t.default.createElement(u.Portal,null,e));m.displayName="ModalView.Root";const f=t.default.forwardRef(({className:e,...l},a)=>t.default.createElement(u.Overlay,{className:d.cx("knock-guide-modal__overlay",e),ref:a,...l}));f.displayName="ModalView.Overlay";const y=t.default.forwardRef(({children:e,className:l,...a},o)=>t.default.createElement(u.Content,{className:d.cx("knock-guide-modal",l),ref:o,...a},e));y.displayName="ModalView.Content";const x=({children:e,className:l,...a})=>t.default.createElement("div",{className:d.cx("knock-guide-modal__header",l),...a},e);x.displayName="ModalView.Header";const _=({title:e,className:l,...a})=>t.default.createElement(u.Title,{className:d.cx("knock-guide-modal__title",l),...a},e);_.displayName="ModalView.Title";const p=({body:e,className:l,...a})=>t.default.createElement(u.Description,{className:d.cx("knock-guide-modal__body",l),dangerouslySetInnerHTML:{__html:e},...a});p.displayName="ModalView.Body";const g=({children:e,className:l,alt:a,...o})=>t.default.createElement("img",{className:d.cx("knock-guide-modal__img",l),alt:a||"",...o},e);g.displayName="ModalView.Img";const k=({children:e,className:l,...a})=>t.default.createElement("div",{className:d.cx("knock-guide-modal__actions",l),...a},e);k.displayName="ModalView.Actions";const E=({text:e,action:l,className:a,...o})=>t.default.createElement("button",{className:d.cx("knock-guide-modal__action",a),...o},e);E.displayName="ModalView.PrimaryButton";const b=({text:e,action:l,className:a,...o})=>t.default.createElement("button",{className:d.cx("knock-guide-modal__action knock-guide-modal__action--secondary",a),...o},e);b.displayName="ModalView.SecondaryButton";const N=({className:e,...l})=>t.default.createElement(u.Close,{className:d.cx("knock-guide-modal__close",e),...l},t.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},t.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},t.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),t.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));N.displayName="ModalView.Close";const w=({content:e,colorMode:l="light",onOpenChange:a,onDismiss:o,onButtonClick:r,onImageClick:s})=>t.default.createElement(m,{onOpenChange:a},t.default.createElement(f,null),t.default.createElement(y,{"data-knock-color-mode":l,onPointerDownOutside:o},t.default.createElement(x,null,t.default.createElement(_,{title:e.title}),e.dismissible&&t.default.createElement(N,{onClick:o})),t.default.createElement(p,{body:e.body}),e.image&&t.default.createElement("a",{href:M.isValidHttpUrl(e.image.action)?e.image.action:void 0,target:"_blank"},t.default.createElement(g,{src:e.image.url,alt:e.image.alt,onClick:i=>{s&&s(i,e.image)}})),(e.primary_button||e.secondary_button)&&t.default.createElement(k,null,e.secondary_button&&t.default.createElement(b,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:i=>{if(r){const{text:n,action:c}=e.secondary_button;r(i,{name:"secondary_button",text:n,action:c})}}}),e.primary_button&&t.default.createElement(E,{text:e.primary_button.text,action:e.primary_button.action,onClick:i=>{if(r){const{text:n,action:c}=e.primary_button;r(i,{name:"primary_button",text:n,action:c})}}}))));w.displayName="ModalView.Default";const V=({guideKey:e,onButtonClick:l,onImageClick:a})=>{const{guide:o,step:r,colorMode:s}=h.useGuide({key:e,type:R});return t.default.useEffect(()=>{r&&r.markAsSeen()},[r]),!o||!r?null:t.default.createElement(w,{content:r.content,colorMode:s,onDismiss:()=>r.markAsArchived(),onButtonClick:(i,n)=>{const c={...n,type:"button_click"};return r.markAsInteracted({metadata:c}),l?l(i,{button:n,step:r,guide:o}):M.maybeNavigateToUrlWithDelay(n.action)},onImageClick:(i,n)=>{const c={...n,type:"image_click"};if(r.markAsInteracted({metadata:c}),a)return a(i,{image:n,step:r,guide:o})}})};V.displayName="Modal";const v={};Object.assign(v,{Default:w,Root:m,Overlay:f,Content:y,Title:_,Body:p,Img:g,Actions:k,PrimaryButton:E,SecondaryButton:b,Close:N});exports.Modal=V;exports.ModalView=v;
 //# sourceMappingURL=Modal.js.map

package/dist/cjs/modules/guide/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../../../src/modules/guide/components/Modal/Modal.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { isValidHttpUrl, maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n  ButtonContent,\n  ImageContent,\n  TargetButton,\n  TargetButtonWithGuide,\n  TargetImage,\n  TargetImageWithGuide,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"modal\";\n\ntype RootProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n  \"modal\"\n> &\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>;\n\nconst Root = ({ children, onOpenChange, ...props }: RootProps) => {\n  return (\n    <Dialog.Root defaultOpen onOpenChange={onOpenChange} {...props}>\n      <Dialog.Portal>{children}</Dialog.Portal>\n    </Dialog.Root>\n  );\n};\nRoot.displayName = \"ModalView.Root\";\n\ntype OverlayProps = React.ComponentPropsWithoutRef<typeof Dialog.Overlay> &\n  React.ComponentPropsWithRef<\"div\">;\ntype OverlayRef = React.ElementRef<\"div\">;\n\nconst Overlay = React.forwardRef<OverlayRef, OverlayProps>(\n  ({ className, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Overlay\n        className={clsx(\"knock-guide-modal__overlay\", className)}\n        ref={forwardedRef}\n        {...props}\n      />\n    );\n  },\n);\nOverlay.displayName = \"ModalView.Overlay\";\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content> &\n  React.ComponentPropsWithRef<\"div\">;\ntype ContentRef = React.ElementRef<\"div\">;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n  ({ children, className, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Content\n        className={clsx(\"knock-guide-modal\", className)}\n        ref={forwardedRef}\n        {...props}\n      >\n        {children}\n      </Dialog.Content>\n    );\n  },\n);\nContent.displayName = \"ModalView.Content\";\n\nconst Header: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-modal__header\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nHeader.displayName = \"ModalView.Header\";\n\ntype TitleProps = React.ComponentPropsWithoutRef<typeof Dialog.Title> &\n  React.ComponentPropsWithRef<\"div\"> & {\n    title: string;\n  };\n\nconst Title = ({ title, className, ...props }: TitleProps) => {\n  return (\n    <Dialog.Title\n      className={clsx(\"knock-guide-modal__title\", className)}\n      {...props}\n    >\n      {title}\n    </Dialog.Title>\n  );\n};\nTitle.displayName = \"ModalView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <Dialog.Description\n      className={clsx(\"knock-guide-modal__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"ModalView.Body\";\n\nconst Img: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"img\">>\n> = ({ children, className, alt, ...props }) => {\n  return (\n    <img\n      className={clsx(\"knock-guide-modal__img\", className)}\n      alt={alt || \"\"}\n      {...props}\n    >\n      {children}\n    </img>\n  );\n};\nImg.displayName = \"ModalView.Img\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={clsx(\"knock-guide-modal__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"ModalView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={clsx(\"knock-guide-modal__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"ModalView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={clsx(\n        \"knock-guide-modal__action knock-guide-modal__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"ModalView.SecondaryButton\";\n\ntype CloseProps = React.ComponentPropsWithoutRef<typeof Dialog.Close> &\n  React.ComponentPropsWithRef<\"button\">;\n\nconst Close = ({ className, ...props }: CloseProps) => {\n  return (\n    <Dialog.Close\n      className={clsx(\"knock-guide-modal__close\", className)}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </Dialog.Close>\n  );\n};\nClose.displayName = \"ModalView.Close\";\n\ntype ModalContent = {\n  title: string;\n  body: string;\n  image?: ImageContent;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: ModalContent;\n  colorMode?: ColorMode;\n  onOpenChange?: (open: boolean) => void;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n  onImageClick?: (e: React.MouseEvent, image: TargetImage) => void;\n}> = ({\n  content,\n  colorMode = \"light\",\n  onOpenChange,\n  onDismiss,\n  onButtonClick,\n  onImageClick,\n}) => {\n  return (\n    <Root onOpenChange={onOpenChange}>\n      <Overlay />\n      {/* Must pass color mode to content for css variables to be set properly */}\n      <Content\n        data-knock-color-mode={colorMode}\n        onPointerDownOutside={onDismiss}\n      >\n        <Header>\n          <Title title={content.title} />\n          {content.dismissible && <Close onClick={onDismiss} />}\n        </Header>\n\n        <Body body={content.body} />\n\n        {content.image && (\n          <a\n            href={\n              isValidHttpUrl(content.image.action)\n                ? content.image.action\n                : undefined\n            }\n            target=\"_blank\"\n          >\n            <Img\n              src={content.image.url}\n              alt={content.image.alt}\n              onClick={(e) => {\n                if (onImageClick) {\n                  onImageClick(e, content.image!);\n                }\n              }}\n            />\n          </a>\n        )}\n\n        {(content.primary_button || content.secondary_button) && (\n          <Actions>\n            {content.secondary_button && (\n              <SecondaryButton\n                text={content.secondary_button.text}\n                action={content.secondary_button.action}\n                onClick={(e) => {\n                  if (onButtonClick) {\n                    const { text, action } = content.secondary_button!;\n                    onButtonClick(e, {\n                      name: \"secondary_button\",\n                      text,\n                      action,\n                    });\n                  }\n                }}\n              />\n            )}\n            {content.primary_button && (\n              <PrimaryButton\n                text={content.primary_button.text}\n                action={content.primary_button.action}\n                onClick={(e) => {\n                  if (onButtonClick) {\n                    const { text, action } = content.primary_button!;\n                    onButtonClick(e, { name: \"primary_button\", text, action });\n                  }\n                }}\n              />\n            )}\n          </Actions>\n        )}\n      </Content>\n    </Root>\n  );\n};\nDefaultView.displayName = \"ModalView.Default\";\n\ntype ModalProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n  onImageClick?: (e: React.MouseEvent, target: TargetImageWithGuide) => void;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n  guideKey,\n  onButtonClick,\n  onImageClick,\n}) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as ModalContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n      onImageClick={(e, image) => {\n        const metadata = { ...image, type: \"image_click\" };\n        step.markAsInteracted({ metadata });\n\n        if (onImageClick) {\n          return onImageClick(e, { image, step, guide });\n        }\n      }}\n    />\n  );\n};\nModal.displayName = \"Modal\";\n\nexport const ModalView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Overlay: typeof Overlay;\n  Content: typeof Content;\n  Title: typeof Title;\n  Body: typeof Body;\n  Img: typeof Img;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  Close: typeof Close;\n};\n\nObject.assign(ModalView, {\n  Default: DefaultView,\n  Root,\n  Overlay,\n  Content,\n  Title,\n  Body,\n  Img,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  Close,\n});\n"],"names":["MESSAGE_TYPE","Root","children","onOpenChange","props","React","Dialog","displayName","Overlay","forwardRef","className","forwardedRef","clsx","Content","Header","Title","title","Body","body","__html","Img","alt","Actions","PrimaryButton","text","action","SecondaryButton","Close","DefaultView","content","colorMode","onDismiss","onButtonClick","onImageClick","dismissible","image","isValidHttpUrl","undefined","url","e","primary_button","secondary_button","name","Modal","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","ModalView","Object","assign","Default"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../../../../src/modules/guide/components/Modal/Modal.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport React from \"react\";\n\nimport { cx } from \"../../../core/cx\";\nimport { isValidHttpUrl, maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n  ButtonContent,\n  ImageContent,\n  TargetButton,\n  TargetButtonWithGuide,\n  TargetImage,\n  TargetImageWithGuide,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"modal\";\n\ntype RootProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n  \"modal\"\n> &\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>;\n\nconst Root = ({ children, onOpenChange, ...props }: RootProps) => {\n  return (\n    <Dialog.Root defaultOpen onOpenChange={onOpenChange} {...props}>\n      <Dialog.Portal>{children}</Dialog.Portal>\n    </Dialog.Root>\n  );\n};\nRoot.displayName = \"ModalView.Root\";\n\ntype OverlayProps = React.ComponentPropsWithoutRef<typeof Dialog.Overlay> &\n  React.ComponentPropsWithRef<\"div\">;\ntype OverlayRef = React.ElementRef<\"div\">;\n\nconst Overlay = React.forwardRef<OverlayRef, OverlayProps>(\n  ({ className, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Overlay\n        className={cx(\"knock-guide-modal__overlay\", className)}\n        ref={forwardedRef}\n        {...props}\n      />\n    );\n  },\n);\nOverlay.displayName = \"ModalView.Overlay\";\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content> &\n  React.ComponentPropsWithRef<\"div\">;\ntype ContentRef = React.ElementRef<\"div\">;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n  ({ children, className, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Content\n        className={cx(\"knock-guide-modal\", className)}\n        ref={forwardedRef}\n        {...props}\n      >\n        {children}\n      </Dialog.Content>\n    );\n  },\n);\nContent.displayName = \"ModalView.Content\";\n\nconst Header: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-modal__header\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nHeader.displayName = \"ModalView.Header\";\n\ntype TitleProps = React.ComponentPropsWithoutRef<typeof Dialog.Title> &\n  React.ComponentPropsWithRef<\"div\"> & {\n    title: string;\n  };\n\nconst Title = ({ title, className, ...props }: TitleProps) => {\n  return (\n    <Dialog.Title\n      className={cx(\"knock-guide-modal__title\", className)}\n      {...props}\n    >\n      {title}\n    </Dialog.Title>\n  );\n};\nTitle.displayName = \"ModalView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n  body,\n  className,\n  ...props\n}) => {\n  return (\n    <Dialog.Description\n      className={cx(\"knock-guide-modal__body\", className)}\n      dangerouslySetInnerHTML={{ __html: body }}\n      {...props}\n    />\n  );\n};\nBody.displayName = \"ModalView.Body\";\n\nconst Img: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"img\">>\n> = ({ children, className, alt, ...props }) => {\n  return (\n    <img\n      className={cx(\"knock-guide-modal__img\", className)}\n      alt={alt || \"\"}\n      {...props}\n    >\n      {children}\n    </img>\n  );\n};\nImg.displayName = \"ModalView.Img\";\n\nconst Actions: React.FC<\n  React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n  return (\n    <div className={cx(\"knock-guide-modal__actions\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\nActions.displayName = \"ModalView.Actions\";\n\nconst PrimaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button className={cx(\"knock-guide-modal__action\", className)} {...props}>\n      {text}\n    </button>\n  );\n};\nPrimaryButton.displayName = \"ModalView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n  ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n  return (\n    <button\n      className={cx(\n        \"knock-guide-modal__action knock-guide-modal__action--secondary\",\n        className,\n      )}\n      {...props}\n    >\n      {text}\n    </button>\n  );\n};\nSecondaryButton.displayName = \"ModalView.SecondaryButton\";\n\ntype CloseProps = React.ComponentPropsWithoutRef<typeof Dialog.Close> &\n  React.ComponentPropsWithRef<\"button\">;\n\nconst Close = ({ className, ...props }: CloseProps) => {\n  return (\n    <Dialog.Close\n      className={cx(\"knock-guide-modal__close\", className)}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        fill=\"none\"\n      >\n        <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n          <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n          <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n        </g>\n      </svg>\n    </Dialog.Close>\n  );\n};\nClose.displayName = \"ModalView.Close\";\n\ntype ModalContent = {\n  title: string;\n  body: string;\n  image?: ImageContent;\n  primary_button?: ButtonContent;\n  secondary_button?: ButtonContent;\n  dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n  content: ModalContent;\n  colorMode?: ColorMode;\n  onOpenChange?: (open: boolean) => void;\n  onDismiss?: () => void;\n  onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n  onImageClick?: (e: React.MouseEvent, image: TargetImage) => void;\n}> = ({\n  content,\n  colorMode = \"light\",\n  onOpenChange,\n  onDismiss,\n  onButtonClick,\n  onImageClick,\n}) => {\n  return (\n    <Root onOpenChange={onOpenChange}>\n      <Overlay />\n      {/* Must pass color mode to content for css variables to be set properly */}\n      <Content\n        data-knock-color-mode={colorMode}\n        onPointerDownOutside={onDismiss}\n      >\n        <Header>\n          <Title title={content.title} />\n          {content.dismissible && <Close onClick={onDismiss} />}\n        </Header>\n\n        <Body body={content.body} />\n\n        {content.image && (\n          <a\n            href={\n              isValidHttpUrl(content.image.action)\n                ? content.image.action\n                : undefined\n            }\n            target=\"_blank\"\n          >\n            <Img\n              src={content.image.url}\n              alt={content.image.alt}\n              onClick={(e) => {\n                if (onImageClick) {\n                  onImageClick(e, content.image!);\n                }\n              }}\n            />\n          </a>\n        )}\n\n        {(content.primary_button || content.secondary_button) && (\n          <Actions>\n            {content.secondary_button && (\n              <SecondaryButton\n                text={content.secondary_button.text}\n                action={content.secondary_button.action}\n                onClick={(e) => {\n                  if (onButtonClick) {\n                    const { text, action } = content.secondary_button!;\n                    onButtonClick(e, {\n                      name: \"secondary_button\",\n                      text,\n                      action,\n                    });\n                  }\n                }}\n              />\n            )}\n            {content.primary_button && (\n              <PrimaryButton\n                text={content.primary_button.text}\n                action={content.primary_button.action}\n                onClick={(e) => {\n                  if (onButtonClick) {\n                    const { text, action } = content.primary_button!;\n                    onButtonClick(e, { name: \"primary_button\", text, action });\n                  }\n                }}\n              />\n            )}\n          </Actions>\n        )}\n      </Content>\n    </Root>\n  );\n};\nDefaultView.displayName = \"ModalView.Default\";\n\ntype ModalProps = {\n  guideKey?: string;\n  onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n  onImageClick?: (e: React.MouseEvent, target: TargetImageWithGuide) => void;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n  guideKey,\n  onButtonClick,\n  onImageClick,\n}) => {\n  const { guide, step, colorMode } = useGuide({\n    key: guideKey,\n    type: MESSAGE_TYPE,\n  });\n\n  React.useEffect(() => {\n    if (step) step.markAsSeen();\n  }, [step]);\n\n  if (!guide || !step) return null;\n\n  return (\n    <DefaultView\n      content={step.content as ModalContent}\n      colorMode={colorMode}\n      onDismiss={() => step.markAsArchived()}\n      onButtonClick={(e, button) => {\n        const metadata = { ...button, type: \"button_click\" };\n        step.markAsInteracted({ metadata });\n\n        return onButtonClick\n          ? onButtonClick(e, { button, step, guide })\n          : maybeNavigateToUrlWithDelay(button.action);\n      }}\n      onImageClick={(e, image) => {\n        const metadata = { ...image, type: \"image_click\" };\n        step.markAsInteracted({ metadata });\n\n        if (onImageClick) {\n          return onImageClick(e, { image, step, guide });\n        }\n      }}\n    />\n  );\n};\nModal.displayName = \"Modal\";\n\nexport const ModalView = {} as {\n  Default: typeof DefaultView;\n  Root: typeof Root;\n  Overlay: typeof Overlay;\n  Content: typeof Content;\n  Title: typeof Title;\n  Body: typeof Body;\n  Img: typeof Img;\n  Actions: typeof Actions;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  Close: typeof Close;\n};\n\nObject.assign(ModalView, {\n  Default: DefaultView,\n  Root,\n  Overlay,\n  Content,\n  Title,\n  Body,\n  Img,\n  Actions,\n  PrimaryButton,\n  SecondaryButton,\n  Close,\n});\n"],"names":["MESSAGE_TYPE","Root","children","onOpenChange","props","React","Dialog","displayName","Overlay","forwardRef","className","forwardedRef","cx","Content","Header","Title","title","Body","body","__html","Img","alt","Actions","PrimaryButton","text","action","SecondaryButton","Close","DefaultView","content","colorMode","onDismiss","onButtonClick","onImageClick","dismissible","image","isValidHttpUrl","undefined","url","e","primary_button","secondary_button","name","Modal","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","ModalView","Object","assign","Default"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SlackAddChannelInput.js","sources":["../../../../../../src/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport { useTranslations } from \"@knocklabs/react-core\";\nimport { useState } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\nimport ConnectionErrorInfoBoxes from \"../SlackChannelCombobox/SlackConnectionError\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAddChannelInputProps {\n  inErrorState: boolean;\n  connectedChannels: SlackChannelConnection[];\n  updateConnectedChannels: (channels: SlackChannelConnection[]) => void;\n  connectedChannelsError: string | null;\n  connectedChannelsUpdating: boolean;\n}\n\nconst SlackAddChannelInput: FunctionComponent<SlackAddChannelInputProps> = ({\n  inErrorState,\n  connectedChannels = [],\n  updateConnectedChannels,\n  connectedChannelsError,\n  connectedChannelsUpdating,\n}) => {\n  const { t } = useTranslations();\n  const [value, setValue] = useState<string | null>(null);\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  const submitChannel = () => {\n    if (!value) {\n      return;\n    }\n\n    if (localError) {\n      setLocalError(null);\n    }\n\n    const alreadyConnected = connectedChannels.find(\n      (channel) => channel.channel_id === value,\n    );\n\n    if (alreadyConnected) {\n      setValue(\"\");\n      return setLocalError(t(\"slackChannelAlreadyConnected\") || \"\");\n    }\n\n    const channelsToSendToKnock = [...connectedChannels, { channel_id: value }];\n    updateConnectedChannels(channelsToSendToKnock);\n    setValue(\"\");\n  };\n\n  return (\n    <div className=\"rsk-connect-channel\">\n      <input\n        className={`rsk-connect-channel__input ${(inErrorState || !!localError) && !value && \"rsk-connect-channel__input--error\"}`}\n        tabIndex={-1}\n        id=\"slack-channel-search\"\n        type=\"text\"\n        placeholder={\n          localError || connectedChannelsError || t(\"slackChannelId\")\n        }\n        onChange={(e) => setValue(e.target.value)}\n        value={value || \"\"}\n      />\n      <button className=\"rsk-connect-channel__button\" onClick={submitChannel}>\n        {connectedChannelsUpdating ? (\n          <Spinner size=\"15px\" thickness={3} />\n        ) : (\n          <SlackIcon height=\"16px\" width=\"16px\" />\n        )}\n        {t(\"slackConnectChannel\")}\n      </button>\n      <ConnectionErrorInfoBoxes />\n    </div>\n  );\n};\n\nexport default SlackAddChannelInput;\n"],"names":["SlackAddChannelInput","inErrorState","connectedChannels","updateConnectedChannels","connectedChannelsError","connectedChannelsUpdating","t","useTranslations","value","setValue","useState","localError","setLocalError","submitChannel","find","channel","channel_id","channelsToSendToKnock","React","e","target","Spinner","SlackIcon","ConnectionErrorInfoBoxes"],"mappings":"8bAoBMA,EAAqEA,CAAC,CAC1EC,aAAAA,EACAC,kBAAAA,EAAoB,CAAE,EACtBC,wBAAAA,EACAC,uBAAAA,EACAC,0BAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,kBAAgB,EACxB,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAwB,IAAI,EAChD,CAACC,EAAYC,CAAa,EAAIF,EAAAA,SAAwB,IAAI,EAE1DG,EAAgBA,IAAM,CAC1B,GAAI,CAACL,EACH,OAWF,GARIG,GACFC,EAAc,IAAI,EAGKV,EAAkBY,KAC5BC,GAAAA,EAAQC,aAAeR,CACtC,EAGEC,OAAAA,EAAS,EAAE,EACJG,EAAcN,EAAE,8BAA8B,GAAK,EAAE,EAGxDW,MAAAA,EAAwB,CAAC,GAAGf,EAAmB,CAAEc,WAAYR,CAAAA,CAAO,EAC1EL,EAAwBc,CAAqB,EAC7CR,EAAS,EAAE,CACb,EAEA,OACGS,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,qBAAA,EACZA,EAAAA,QAAA,cAAA,QAAA,CACC,UAAW,+BAA+BjB,GAAgB,CAAC,CAACU,IAAe,CAACH,GAAS,mCAAmC,GACxH,SAAU,GACV,GAAG,uBACH,KAAK,OACL,YACEG,GAAcP,GAA0BE,EAAE,gBAAgB,EAE5D,SAAWa,GAAMV,EAASU,EAAEC,OAAOZ,KAAK,EACxC,MAAOA,GAAS,GAAG,EAEpBU,EAAA,QAAA,cAAA,SAAA,CAAO,UAAU,8BAA8B,QAASL,CAAAA,EACtDR,EACCa,EAAAA,QAAA,cAACG,WAAQ,KAAK,OAAO,UAAW,CAAA,CAAK,EAErCH,UAAA,cAACI,EAAAA,UAAU,CAAA,OAAO,OAAO,MAAM,MAAA,CAChC,EACAhB,EAAE,qBAAqB,CAC1B,EACAY,EAAA,QAAA,cAACK,MAAwB,CAC3B,CAEJ"}
+{"version":3,"file":"SlackAddChannelInput.js","sources":["../../../../../../src/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport { useTranslations } from \"@knocklabs/react-core\";\nimport { useState } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { Spinner } from \"../../../core\";\nimport \"../../theme.css\";\nimport ConnectionErrorInfoBoxes from \"../SlackChannelCombobox/SlackConnectionError\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAddChannelInputProps {\n  inErrorState: boolean;\n  connectedChannels: SlackChannelConnection[];\n  updateConnectedChannels: (channels: SlackChannelConnection[]) => void;\n  connectedChannelsError: string | null;\n  connectedChannelsUpdating: boolean;\n}\n\nconst SlackAddChannelInput: FunctionComponent<SlackAddChannelInputProps> = ({\n  inErrorState,\n  connectedChannels = [],\n  updateConnectedChannels,\n  connectedChannelsError,\n  connectedChannelsUpdating,\n}) => {\n  const { t } = useTranslations();\n  const [value, setValue] = useState<string | null>(null);\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  const submitChannel = () => {\n    if (!value) {\n      return;\n    }\n\n    if (localError) {\n      setLocalError(null);\n    }\n\n    const alreadyConnected = connectedChannels.find(\n      (channel) => channel.channel_id === value,\n    );\n\n    if (alreadyConnected) {\n      setValue(\"\");\n      return setLocalError(t(\"slackChannelAlreadyConnected\") || \"\");\n    }\n\n    const channelsToSendToKnock = [...connectedChannels, { channel_id: value }];\n    updateConnectedChannels(channelsToSendToKnock);\n    setValue(\"\");\n  };\n\n  return (\n    <div className=\"rsk-connect-channel\">\n      <input\n        className={`rsk-connect-channel__input ${(inErrorState || !!localError) && !value && \"rsk-connect-channel__input--error\"}`}\n        tabIndex={-1}\n        id=\"slack-channel-search\"\n        type=\"text\"\n        placeholder={\n          localError || connectedChannelsError || t(\"slackChannelId\")\n        }\n        onChange={(e) => setValue(e.target.value)}\n        value={value || \"\"}\n      />\n      <button className=\"rsk-connect-channel__button\" onClick={submitChannel}>\n        {connectedChannelsUpdating ? (\n          <Spinner size=\"15px\" thickness={3} />\n        ) : (\n          <SlackIcon height=\"16px\" width=\"16px\" />\n        )}\n        {t(\"slackConnectChannel\")}\n      </button>\n      <ConnectionErrorInfoBoxes />\n    </div>\n  );\n};\n\nexport default SlackAddChannelInput;\n"],"names":["SlackAddChannelInput","inErrorState","connectedChannels","updateConnectedChannels","connectedChannelsError","connectedChannelsUpdating","t","useTranslations","value","setValue","useState","localError","setLocalError","submitChannel","find","channel","channel_id","channelsToSendToKnock","React","e","target","Spinner","SlackIcon","ConnectionErrorInfoBoxes"],"mappings":"maAoBMA,EAAqEA,CAAC,CAC1EC,aAAAA,EACAC,kBAAAA,EAAoB,CAAE,EACtBC,wBAAAA,EACAC,uBAAAA,EACAC,0BAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,kBAAgB,EACxB,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAwB,IAAI,EAChD,CAACC,EAAYC,CAAa,EAAIF,EAAAA,SAAwB,IAAI,EAE1DG,EAAgBA,IAAM,CAC1B,GAAI,CAACL,EACH,OAWF,GARIG,GACFC,EAAc,IAAI,EAGKV,EAAkBY,KAC5BC,GAAAA,EAAQC,aAAeR,CACtC,EAGEC,OAAAA,EAAS,EAAE,EACJG,EAAcN,EAAE,8BAA8B,GAAK,EAAE,EAGxDW,MAAAA,EAAwB,CAAC,GAAGf,EAAmB,CAAEc,WAAYR,CAAAA,CAAO,EAC1EL,EAAwBc,CAAqB,EAC7CR,EAAS,EAAE,CACb,EAEA,OACGS,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,qBAAA,EACZA,EAAAA,QAAA,cAAA,QAAA,CACC,UAAW,+BAA+BjB,GAAgB,CAAC,CAACU,IAAe,CAACH,GAAS,mCAAmC,GACxH,SAAU,GACV,GAAG,uBACH,KAAK,OACL,YACEG,GAAcP,GAA0BE,EAAE,gBAAgB,EAE5D,SAAWa,GAAMV,EAASU,EAAEC,OAAOZ,KAAK,EACxC,MAAOA,GAAS,GAAG,EAEpBU,EAAA,QAAA,cAAA,SAAA,CAAO,UAAU,8BAA8B,QAASL,CAAAA,EACtDR,EACCa,EAAAA,QAAA,cAACG,WAAQ,KAAK,OAAO,UAAW,CAAA,CAAK,EAErCH,UAAA,cAACI,EAAAA,UAAU,CAAA,OAAO,OAAO,MAAM,MAAA,CAChC,EACAhB,EAAE,qBAAqB,CAC1B,EACAY,EAAA,QAAA,cAACK,MAAwB,CAC3B,CAEJ"}

package/dist/esm/modules/core/cx/index.mjs

@@ -0,0 +1,5 @@
+const n = (...o) => o.filter((e) => !!e).join(" ");
+export {
+  n as cx
+};
+//# sourceMappingURL=index.mjs.map

package/dist/esm/modules/core/cx/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../src/modules/core/cx/index.ts"],"sourcesContent":["type ClassValue = string | false | null | undefined;\n\n/**\n * Joins truthy class names into a space-separated string, e.g.\n * `cx(\"knock-guide-banner\", className)`. Falsy values are dropped, so\n * conditional modifiers work too: `cx(\"btn\", isActive && \"btn--active\")`.\n */\nexport const cx = (...classes: ClassValue[]): string =>\n  classes.filter((value): value is string => Boolean(value)).join(\" \");\n"],"names":["cx","classes","filter","value","Boolean","join"],"mappings":"AAOO,MAAMA,IAAKA,IAAIC,MACpBA,EAAQC,OAAO,CAACC,MAA2BC,EAAQD,CAAM,EAAEE,KAAK,GAAG;"}