@knocklabs/react 0.5.0 → 0.6.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +3 -3
  3. package/dist/cjs/index.css +1 -1
  4. package/dist/cjs/modules/core/components/Button/Button.js.map +1 -1
  5. package/dist/cjs/modules/core/components/Icons/Bell.js.map +1 -1
  6. package/dist/cjs/modules/core/hooks/useComponentVisible.js.map +1 -1
  7. package/dist/cjs/modules/core/hooks/useOnBottomScroll.js.map +1 -1
  8. package/dist/cjs/modules/feed/components/EmptyFeed/EmptyFeed.js.map +1 -1
  9. package/dist/cjs/modules/feed/components/NotificationCell/ArchiveButton.js +1 -1
  10. package/dist/cjs/modules/feed/components/NotificationCell/ArchiveButton.js.map +1 -1
  11. package/dist/cjs/modules/feed/components/NotificationCell/Avatar.js.map +1 -1
  12. package/dist/cjs/modules/feed/components/NotificationCell/NotificationCell.js.map +1 -1
  13. package/dist/cjs/modules/feed/components/NotificationFeed/Dropdown.js.map +1 -1
  14. package/dist/cjs/modules/feed/components/NotificationFeed/MarkAsRead.js.map +1 -1
  15. package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeed.js.map +1 -1
  16. package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeedHeader.js.map +1 -1
  17. package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js +1 -1
  18. package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js.map +1 -1
  19. package/dist/cjs/modules/feed/components/NotificationIconButton/NotificationIconButton.js.map +1 -1
  20. package/dist/cjs/modules/feed/components/UnseenBadge/UnseenBadge.js.map +1 -1
  21. package/dist/cjs/modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.js.map +1 -1
  22. package/dist/cjs/modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.js.map +1 -1
  23. package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.js.map +1 -1
  24. package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.js +1 -1
  25. package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.js.map +1 -1
  26. package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsConnectionError.js.map +1 -1
  27. package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsErrorMessage.js.map +1 -1
  28. package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.js +1 -1
  29. package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.js.map +1 -1
  30. package/dist/cjs/modules/ms-teams/components/MsTeamsIcon/MsTeamsIcon.js.map +1 -1
  31. package/dist/cjs/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.js.map +1 -1
  32. package/dist/cjs/modules/slack/components/SlackAuthButton/SlackAuthButton.js.map +1 -1
  33. package/dist/cjs/modules/slack/components/SlackAuthContainer/SlackAuthContainer.js.map +1 -1
  34. package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js +1 -1
  35. package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js.map +1 -1
  36. package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectionError.js.map +1 -1
  37. package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackErrorMessage.js.map +1 -1
  38. package/dist/cjs/modules/slack/components/SlackIcon/SlackIcon.js.map +1 -1
  39. package/dist/esm/modules/core/components/Button/Button.mjs.map +1 -1
  40. package/dist/esm/modules/core/components/Icons/Bell.mjs.map +1 -1
  41. package/dist/esm/modules/core/hooks/useComponentVisible.mjs.map +1 -1
  42. package/dist/esm/modules/core/hooks/useOnBottomScroll.mjs.map +1 -1
  43. package/dist/esm/modules/feed/components/NotificationCell/ArchiveButton.mjs +30 -24
  44. package/dist/esm/modules/feed/components/NotificationCell/ArchiveButton.mjs.map +1 -1
  45. package/dist/esm/modules/feed/components/NotificationCell/Avatar.mjs.map +1 -1
  46. package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.mjs.map +1 -1
  47. package/dist/esm/modules/feed/components/NotificationFeed/Dropdown.mjs.map +1 -1
  48. package/dist/esm/modules/feed/components/NotificationFeed/MarkAsRead.mjs.map +1 -1
  49. package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs +5 -5
  50. package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs.map +1 -1
  51. package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs.map +1 -1
  52. package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs +40 -37
  53. package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs.map +1 -1
  54. package/dist/esm/modules/feed/components/NotificationIconButton/NotificationIconButton.mjs.map +1 -1
  55. package/dist/esm/modules/feed/components/UnseenBadge/UnseenBadge.mjs.map +1 -1
  56. package/dist/esm/modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.mjs.map +1 -1
  57. package/dist/esm/modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.mjs.map +1 -1
  58. package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs.map +1 -1
  59. package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.mjs +11 -8
  60. package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.mjs.map +1 -1
  61. package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.mjs +14 -11
  62. package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.mjs.map +1 -1
  63. package/dist/esm/modules/ms-teams/components/MsTeamsIcon/MsTeamsIcon.mjs.map +1 -1
  64. package/dist/esm/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.mjs.map +1 -1
  65. package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs.map +1 -1
  66. package/dist/esm/modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs.map +1 -1
  67. package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs +13 -10
  68. package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs.map +1 -1
  69. package/dist/esm/modules/slack/components/SlackIcon/SlackIcon.mjs.map +1 -1
  70. package/dist/index.css +1 -1
  71. package/dist/types/modules/feed/components/NotificationCell/ArchiveButton.d.ts +0 -1
  72. package/dist/types/modules/feed/components/NotificationCell/ArchiveButton.d.ts.map +1 -1
  73. package/dist/types/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.d.ts.map +1 -1
  74. package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.d.ts.map +1 -1
  75. package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.d.ts.map +1 -1
  76. package/dist/types/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.d.ts.map +1 -1
  77. package/package.json +12 -13
@@ -1 +1 @@
1
- {"version":3,"file":"ArchiveButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport React, { MouseEvent, useCallback } from \"react\";\nimport { usePopperTooltip } from \"react-popper-tooltip\";\n\nimport { CloseCircle } from \"../../../core/components/Icons\";\n\nexport interface ArchiveButtonProps {\n item: FeedItem;\n}\n\nconst ArchiveButton: React.FC<ArchiveButtonProps> = ({ item }) => {\n const { colorMode, feedClient } = useKnockFeed();\n const { t } = useTranslations();\n\n const onClick = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n\n feedClient.markAsArchived(item);\n },\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [item],\n );\n\n const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =\n usePopperTooltip({ placement: \"top-end\" });\n\n return (\n <button\n ref={setTriggerRef}\n onClick={onClick}\n type=\"button\"\n aria-label={t(\"archiveNotification\")}\n className={`rnf-archive-notification-btn rnf-archive-notification-btn--${colorMode}`}\n >\n <CloseCircle aria-hidden />\n\n {visible && (\n <div\n ref={setTooltipRef}\n {...getTooltipProps({\n className: `rnf-tooltip rnf-tooltip--${colorMode}`,\n })}\n >\n {t(\"archiveNotification\")}\n </div>\n )}\n </button>\n );\n};\n\nexport { ArchiveButton };\n"],"names":["ArchiveButton","item","colorMode","feedClient","useKnockFeed","t","useTranslations","onClick","useCallback","e","preventDefault","stopPropagation","markAsArchived","getTooltipProps","setTooltipRef","setTriggerRef","visible","usePopperTooltip","placement","React","CloseCircle","className"],"mappings":";;;;AAWA,MAAMA,IAA8CA,CAAC;AAAA,EAAEC,MAAAA;AAAK,MAAM;AAC1D,QAAA;AAAA,IAAEC,WAAAA;AAAAA,IAAWC,YAAAA;AAAAA,MAAeC,EAAa,GACzC;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GAExBC,IAAUC;AAAAA,IACd,CAACC,MAAqC;AACpCA,MAAAA,EAAEC,eAAe,GACjBD,EAAEE,gBAAgB,GAElBR,EAAWS,eAAeX,CAAI;AAAA,IAChC;AAAA;AAAA;AAAA,IAGA,CAACA,CAAI;AAAA,EAAA,GAGD;AAAA,IAAEY,iBAAAA;AAAAA,IAAiBC,eAAAA;AAAAA,IAAeC,eAAAA;AAAAA,IAAeC,SAAAA;AAAAA,MACrDC,EAAiB;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAW;AAGzC,SAAAC,gBAAAA,EAAA,cAAC,UACC,EAAA,KAAKJ,GACL,SAAAR,GACA,MAAK,UACL,cAAYF,EAAE,qBAAqB,GACnC,WAAW,8DAA8DH,CAAS,GAElF,GAAAiB,gBAAAA,EAAA,cAACC,GAAY,EAAA,eAAW,IAAA,GAEvBJ,KACCG,gBAAAA,EAAA,cAAC,OACC,EAAA,KAAKL,GACL,GAAID,EAAgB;AAAA,IAClBQ,WAAW,4BAA4BnB,CAAS;AAAA,EACjD,CAAA,KAEAG,EAAE,qBAAqB,CAC1B,CAEJ;AAEJ;"}
1
+ {"version":3,"file":"ArchiveButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { createPopper } from \"@popperjs/core\";\nimport { MouseEvent, useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CloseCircle } from \"../../../core/components/Icons\";\n\nexport interface ArchiveButtonProps {\n item: FeedItem;\n}\n\nconst ArchiveButton: React.FC<ArchiveButtonProps> = ({ item }) => {\n const { colorMode, feedClient } = useKnockFeed();\n const { t } = useTranslations();\n const [visible, setVisible] = useState(false);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const tooltipRef = useRef<HTMLDivElement>(null);\n\n const onClick = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n\n feedClient.markAsArchived(item);\n },\n // TODO: Check if we can remove this disable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [item],\n );\n\n useEffect(() => {\n if (triggerRef.current && tooltipRef.current && visible) {\n const popperInstance = createPopper(\n triggerRef.current,\n tooltipRef.current,\n {\n placement: \"top-end\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 8],\n },\n },\n ],\n },\n );\n\n return () => {\n popperInstance.destroy();\n };\n }\n }, [visible]);\n\n return (\n <button\n ref={triggerRef}\n onClick={onClick}\n onMouseEnter={() => setVisible(true)}\n onMouseLeave={() => setVisible(false)}\n type=\"button\"\n aria-label={t(\"archiveNotification\")}\n className={`rnf-archive-notification-btn rnf-archive-notification-btn--${colorMode}`}\n >\n <CloseCircle aria-hidden />\n\n {visible && (\n <div\n ref={tooltipRef}\n className={`rnf-tooltip rnf-tooltip--${colorMode}`}\n >\n {t(\"archiveNotification\")}\n </div>\n )}\n </button>\n );\n};\n\nexport { ArchiveButton };\n"],"names":["ArchiveButton","item","colorMode","feedClient","useKnockFeed","t","useTranslations","visible","setVisible","useState","triggerRef","useRef","tooltipRef","onClick","useCallback","e","preventDefault","stopPropagation","markAsArchived","useEffect","current","popperInstance","createPopper","placement","modifiers","name","options","offset","destroy","React","CloseCircle"],"mappings":";;;;AAWA,MAAMA,IAA8CA,CAAC;AAAA,EAAEC,MAAAA;AAAK,MAAM;AAC1D,QAAA;AAAA,IAAEC,WAAAA;AAAAA,IAAWC,YAAAA;AAAAA,MAAeC,EAAa,GACzC;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GACxB,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAaC,EAA0B,IAAI,GAC3CC,IAAaD,EAAuB,IAAI,GAExCE,IAAUC;AAAAA,IACd,CAACC,MAAqC;AACpCA,QAAEC,eAAe,GACjBD,EAAEE,gBAAgB,GAElBd,EAAWe,eAAejB,CAAI;AAAA,IAChC;AAAA;AAAA;AAAA,IAGA,CAACA,CAAI;AAAA,EACP;AAEAkB,SAAAA,EAAU,MAAM;AACd,QAAIT,EAAWU,WAAWR,EAAWQ,WAAWb,GAAS;AACvD,YAAMc,IAAiBC,EACrBZ,EAAWU,SACXR,EAAWQ,SACX;AAAA,QACEG,WAAW;AAAA,QACXC,WAAW,CACT;AAAA,UACEC,MAAM;AAAA,UACNC,SAAS;AAAA,YACPC,QAAQ,CAAC,GAAG,CAAC;AAAA,UAAA;AAAA,QAEhB,CAAA;AAAA,MAAA,CAGP;AAEA,aAAO,MAAM;AACXN,QAAAA,EAAeO,QAAQ;AAAA,MACzB;AAAA,IAAA;AAAA,EACF,GACC,CAACrB,CAAO,CAAC,mCAGT,UACC,EAAA,KAAKG,GACL,SAAAG,GACA,cAAc,MAAML,EAAW,EAAI,GACnC,cAAc,MAAMA,EAAW,EAAK,GACpC,MAAK,UACL,cAAYH,EAAE,qBAAqB,GACnC,WAAW,8DAA8DH,CAAS,MAElF2B,gBAAAA,EAAA,cAACC,KAAY,eAAW,IAAA,GAEvBvB,KACCsB,gBAAAA,EAAA,cAAC,SACC,KAAKjB,GACL,WAAW,4BAA4BV,CAAS,MAE/CG,EAAE,qBAAqB,CAC1B,CAEJ;AAEJ;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport \"./styles.css\";\n\nexport interface AvatarProps {\n name: string;\n src?: string | null;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ name, src }) => {\n function getInitials(name: string) {\n const [firstName, lastName] = name.split(\" \");\n return firstName && lastName\n ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n : firstName\n ? firstName.charAt(0)\n : \"\";\n }\n\n return (\n <div className=\"rnf-avatar\">\n {src ? (\n <img src={src} alt={name} className=\"rnf-avatar__image\" />\n ) : (\n <span className=\"rnf-avatar__initials\">{getInitials(name)}</span>\n )}\n </div>\n );\n};\n"],"names":["Avatar","name","src","getInitials","firstName","lastName","split","charAt","React"],"mappings":";;AASO,MAAMA,IAAgCA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,KAAAA;AAAI,MAAM;AAC9D,WAASC,EAAYF,GAAc;AACjC,UAAM,CAACG,GAAWC,CAAQ,IAAIJ,EAAKK,MAAM,GAAG;AAC5C,WAAOF,KAAaC,IAChB,GAAGD,EAAUG,OAAO,CAAC,CAAC,GAAGF,EAASE,OAAO,CAAC,CAAC,KAC3CH,IACEA,EAAUG,OAAO,CAAC,IAClB;AAAA,EACR;AAGE,SAAAC,gBAAAA,EAAA,cAAC,SAAI,WAAU,aAAA,GACZN,IACEM,gBAAAA,EAAA,cAAA,OAAA,EAAI,KAAAN,GAAU,KAAKD,GAAM,WAAU,yDAEnC,QAAK,EAAA,WAAU,0BAAwBE,EAAYF,CAAI,CAAE,CAE9D;AAEJ;"}
1
+ {"version":3,"file":"Avatar.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport \"./styles.css\";\n\nexport interface AvatarProps {\n name: string;\n src?: string | null;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ name, src }) => {\n function getInitials(name: string) {\n const [firstName, lastName] = name.split(\" \");\n return firstName && lastName\n ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n : firstName\n ? firstName.charAt(0)\n : \"\";\n }\n\n return (\n <div className=\"rnf-avatar\">\n {src ? (\n <img src={src} alt={name} className=\"rnf-avatar__image\" />\n ) : (\n <span className=\"rnf-avatar__initials\">{getInitials(name)}</span>\n )}\n </div>\n );\n};\n"],"names":["Avatar","name","src","getInitials","firstName","lastName","split","charAt","React"],"mappings":";;AASO,MAAMA,IAAgCA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,KAAAA;AAAI,MAAM;AAC9D,WAASC,EAAYF,GAAc;AACjC,UAAM,CAACG,GAAWC,CAAQ,IAAIJ,EAAKK,MAAM,GAAG;AAC5C,WAAOF,KAAaC,IAChB,GAAGD,EAAUG,OAAO,CAAC,CAAC,GAAGF,EAASE,OAAO,CAAC,CAAC,KAC3CH,IACEA,EAAUG,OAAO,CAAC,IAClB;AAAA,EAAA;AAIN,SAAAC,gBAAAA,EAAA,cAAC,SAAI,WAAU,gBACZN,IACEM,gBAAAA,EAAA,cAAA,OAAA,EAAI,KAAAN,GAAU,KAAKD,GAAM,WAAU,yDAEnC,QAAK,EAAA,WAAU,0BAAwBE,EAAYF,CAAI,CAAE,CAE9D;AAEJ;"}
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationCell.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import {\n ActionButton,\n ButtonSetContentBlock,\n ContentBlock,\n FeedItem,\n MarkdownContentBlock,\n TextContentBlock,\n} from \"@knocklabs/client\";\nimport {\n formatTimestamp,\n renderNodeOrFallback,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, { ReactNode, useMemo } from \"react\";\n\nimport { Button, ButtonGroup } from \"../../../core\";\n\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport { Avatar } from \"./Avatar\";\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n item: FeedItem;\n // Invoked when the outer container is clicked\n onItemClick?: (item: FeedItem) => void;\n // Invoked when a button in the notification cell is clicked\n onButtonClick?: (item: FeedItem, action: ActionButton) => void;\n avatar?: ReactNode;\n children?: ReactNode;\n archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n [name: string]: ContentBlock;\n};\n\nfunction maybeNavigateToUrlWithDelay(url?: string) {\n if (url && url !== \"\") {\n setTimeout(() => window.location.assign(url), 200);\n }\n}\n\nexport const NotificationCell = React.forwardRef<\n HTMLDivElement,\n NotificationCellProps\n>(\n (\n { item, onItemClick, onButtonClick, avatar, children, archiveButton },\n ref,\n ) => {\n const { feedClient, colorMode } = useKnockFeed();\n const { locale } = useTranslations();\n\n const blocksByName: BlockByName = useMemo(() => {\n return item.blocks.reduce((acc, block) => {\n return { ...acc, [block.name]: block };\n }, {});\n }, [item]);\n\n const actionUrl = (blocksByName.action_url as TextContentBlock)?.rendered;\n const buttonSet = blocksByName.actions as ButtonSetContentBlock;\n\n const onContainerClickHandler = React.useCallback(() => {\n // Mark as interacted + read once we click the item\n feedClient.markAsInteracted(item, {\n type: \"cell_click\",\n action: actionUrl,\n });\n\n if (onItemClick) return onItemClick(item);\n\n return maybeNavigateToUrlWithDelay(actionUrl);\n }, [item, actionUrl, onItemClick, feedClient]);\n\n const onButtonClickHandler = React.useCallback(\n (_e: React.MouseEvent, button: ActionButton) => {\n // Record the interaction with the metadata for the button that was clicked\n feedClient.markAsInteracted(item, {\n type: \"button_click\",\n name: button.name,\n label: button.label,\n action: button.action,\n });\n\n if (onButtonClick) return onButtonClick(item, button);\n\n return maybeNavigateToUrlWithDelay(button.action);\n },\n [onButtonClick, feedClient, item],\n );\n\n const onKeyDown = React.useCallback(\n (ev: React.KeyboardEvent<HTMLDivElement>) => {\n switch (ev.key) {\n case \"Enter\": {\n ev.stopPropagation();\n onContainerClickHandler();\n break;\n }\n default:\n break;\n }\n },\n [onContainerClickHandler],\n );\n\n const actor = item.actors[0];\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n ref={ref}\n className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n onClick={onContainerClickHandler}\n onKeyDown={onKeyDown}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n >\n <div className=\"rnf-notification-cell__inner\">\n {!item.read_at && (\n <div className=\"rnf-notification-cell__unread-dot\" />\n )}\n\n {renderNodeOrFallback(\n avatar,\n actor && \"name\" in actor && actor.name && (\n <Avatar name={actor.name} src={actor.avatar} />\n ),\n )}\n\n <div className=\"rnf-notification-cell__content-outer\">\n {blocksByName.body && (\n <div\n className=\"rnf-notification-cell__content\"\n dangerouslySetInnerHTML={{\n __html: (blocksByName.body as MarkdownContentBlock).rendered,\n }}\n />\n )}\n\n {buttonSet && (\n <div className=\"rnf-notification-cell__button-group\">\n <ButtonGroup>\n {buttonSet.buttons.map((button, i) => (\n <Button\n variant={i === 0 ? \"primary\" : \"secondary\"}\n key={button.name}\n onClick={(e) => onButtonClickHandler(e, button)}\n >\n {button.label}\n </Button>\n ))}\n </ButtonGroup>\n </div>\n )}\n\n {children && (\n <div className=\"rnf-notification-cell__child-content\">\n {children}\n </div>\n )}\n\n <span className=\"rnf-notification-cell__timestamp\">\n {formatTimestamp(item.inserted_at, { locale })}\n </span>\n </div>\n\n {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n </div>\n </div>\n );\n },\n);\n"],"names":["maybeNavigateToUrlWithDelay","url","setTimeout","window","location","assign","NotificationCell","React","forwardRef","item","onItemClick","onButtonClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","blocks","reduce","acc","block","name","actionUrl","action_url","rendered","buttonSet","actions","onContainerClickHandler","useCallback","markAsInteracted","type","action","onButtonClickHandler","_e","button","label","onKeyDown","ev","key","stopPropagation","actor","actors","read_at","renderNodeOrFallback","Avatar","body","__html","ButtonGroup","buttons","map","i","Button","e","formatTimestamp","inserted_at","ArchiveButton"],"mappings":"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"}
1
+ {"version":3,"file":"NotificationCell.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import {\n ActionButton,\n ButtonSetContentBlock,\n ContentBlock,\n FeedItem,\n MarkdownContentBlock,\n TextContentBlock,\n} from \"@knocklabs/client\";\nimport {\n formatTimestamp,\n renderNodeOrFallback,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, { ReactNode, useMemo } from \"react\";\n\nimport { Button, ButtonGroup } from \"../../../core\";\n\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport { Avatar } from \"./Avatar\";\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n item: FeedItem;\n // Invoked when the outer container is clicked\n onItemClick?: (item: FeedItem) => void;\n // Invoked when a button in the notification cell is clicked\n onButtonClick?: (item: FeedItem, action: ActionButton) => void;\n avatar?: ReactNode;\n children?: ReactNode;\n archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n [name: string]: ContentBlock;\n};\n\nfunction maybeNavigateToUrlWithDelay(url?: string) {\n if (url && url !== \"\") {\n setTimeout(() => window.location.assign(url), 200);\n }\n}\n\nexport const NotificationCell = React.forwardRef<\n HTMLDivElement,\n NotificationCellProps\n>(\n (\n { item, onItemClick, onButtonClick, avatar, children, archiveButton },\n ref,\n ) => {\n const { feedClient, colorMode } = useKnockFeed();\n const { locale } = useTranslations();\n\n const blocksByName: BlockByName = useMemo(() => {\n return item.blocks.reduce((acc, block) => {\n return { ...acc, [block.name]: block };\n }, {});\n }, [item]);\n\n const actionUrl = (blocksByName.action_url as TextContentBlock)?.rendered;\n const buttonSet = blocksByName.actions as ButtonSetContentBlock;\n\n const onContainerClickHandler = React.useCallback(() => {\n // Mark as interacted + read once we click the item\n feedClient.markAsInteracted(item, {\n type: \"cell_click\",\n action: actionUrl,\n });\n\n if (onItemClick) return onItemClick(item);\n\n return maybeNavigateToUrlWithDelay(actionUrl);\n }, [item, actionUrl, onItemClick, feedClient]);\n\n const onButtonClickHandler = React.useCallback(\n (_e: React.MouseEvent, button: ActionButton) => {\n // Record the interaction with the metadata for the button that was clicked\n feedClient.markAsInteracted(item, {\n type: \"button_click\",\n name: button.name,\n label: button.label,\n action: button.action,\n });\n\n if (onButtonClick) return onButtonClick(item, button);\n\n return maybeNavigateToUrlWithDelay(button.action);\n },\n [onButtonClick, feedClient, item],\n );\n\n const onKeyDown = React.useCallback(\n (ev: React.KeyboardEvent<HTMLDivElement>) => {\n switch (ev.key) {\n case \"Enter\": {\n ev.stopPropagation();\n onContainerClickHandler();\n break;\n }\n default:\n break;\n }\n },\n [onContainerClickHandler],\n );\n\n const actor = item.actors[0];\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n ref={ref}\n className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n onClick={onContainerClickHandler}\n onKeyDown={onKeyDown}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n >\n <div className=\"rnf-notification-cell__inner\">\n {!item.read_at && (\n <div className=\"rnf-notification-cell__unread-dot\" />\n )}\n\n {renderNodeOrFallback(\n avatar,\n actor && \"name\" in actor && actor.name && (\n <Avatar name={actor.name} src={actor.avatar} />\n ),\n )}\n\n <div className=\"rnf-notification-cell__content-outer\">\n {blocksByName.body && (\n <div\n className=\"rnf-notification-cell__content\"\n dangerouslySetInnerHTML={{\n __html: (blocksByName.body as MarkdownContentBlock).rendered,\n }}\n />\n )}\n\n {buttonSet && (\n <div className=\"rnf-notification-cell__button-group\">\n <ButtonGroup>\n {buttonSet.buttons.map((button, i) => (\n <Button\n variant={i === 0 ? \"primary\" : \"secondary\"}\n key={button.name}\n onClick={(e) => onButtonClickHandler(e, button)}\n >\n {button.label}\n </Button>\n ))}\n </ButtonGroup>\n </div>\n )}\n\n {children && (\n <div className=\"rnf-notification-cell__child-content\">\n {children}\n </div>\n )}\n\n <span className=\"rnf-notification-cell__timestamp\">\n {formatTimestamp(item.inserted_at, { locale })}\n </span>\n </div>\n\n {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n </div>\n </div>\n );\n },\n);\n"],"names":["maybeNavigateToUrlWithDelay","url","setTimeout","window","location","assign","NotificationCell","React","forwardRef","item","onItemClick","onButtonClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","blocks","reduce","acc","block","name","actionUrl","action_url","rendered","buttonSet","actions","onContainerClickHandler","useCallback","markAsInteracted","type","action","onButtonClickHandler","_e","button","label","onKeyDown","ev","key","stopPropagation","actor","actors","read_at","renderNodeOrFallback","Avatar","body","__html","ButtonGroup","buttons","map","i","Button","e","formatTimestamp","inserted_at","ArchiveButton"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n value: string;\n onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n children,\n value,\n onChange,\n}) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n <select\n aria-label=\"Select notification filter\"\n value={value}\n onChange={onChange}\n >\n {children}\n </select>\n <ChevronDown aria-hidden />\n </div>\n );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","ChevronDown"],"mappings":";;;;AAYO,MAAMA,IAAuDA,CAAC;AAAA,EACnEC,UAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa;AAEnC,yCACG,OAAI,EAAA,WAAW,8BAA8BD,CAAS,GAAA,mCACpD,UACC,EAAA,cAAW,8BACX,OAAAF,GACA,UAAAC,KAECF,CACH,mCACCK,GAAY,EAAA,eAAW,IAAA,CAC1B;AAEJ;"}
1
+ {"version":3,"file":"Dropdown.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n value: string;\n onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n children,\n value,\n onChange,\n}) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n <select\n aria-label=\"Select notification filter\"\n value={value}\n onChange={onChange}\n >\n {children}\n </select>\n <ChevronDown aria-hidden />\n </div>\n );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","ChevronDown"],"mappings":";;;;AAYO,MAAMA,IAAuDA,CAAC;AAAA,EACnEC,UAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa;AAEnC,yCACG,OAAI,EAAA,WAAW,8BAA8BD,CAAS,GAAA,mCACpD,UACC,EAAA,cAAW,8BACX,OAAAF,GACA,UAAAC,KAECF,CACH,mCACCK,GAAY,EAAA,eAAW,GAAA,CAAA,CAC1B;AAEJ;"}
@@ -1 +1 @@
1
- {"version":3,"file":"MarkAsRead.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport * as React from \"react\";\n\nimport { CheckmarkCircle } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type MarkAsReadProps = {\n onClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nexport const MarkAsRead: React.FC<MarkAsReadProps> = ({ onClick }) => {\n const { useFeedStore, feedClient, colorMode } = useKnockFeed();\n const { t } = useTranslations();\n\n const unreadItems = useFeedStore((state) =>\n state.items.filter((item) => !item.read_at),\n );\n\n const unreadCount = useFeedStore((state) => state.metadata.unread_count);\n\n const onClickHandler = React.useCallback(\n (e: React.MouseEvent) => {\n feedClient.markAllAsRead();\n if (onClick) onClick(e, unreadItems);\n },\n [feedClient, unreadItems, onClick],\n );\n\n return (\n <button\n className={`rnf-mark-all-as-read rnf-mark-all-as-read--${colorMode}`}\n disabled={unreadCount === 0}\n onClick={onClickHandler}\n type=\"button\"\n >\n {t(\"markAllAsRead\")}\n <CheckmarkCircle aria-hidden />\n </button>\n );\n};\n"],"names":["MarkAsRead","onClick","useFeedStore","feedClient","colorMode","useKnockFeed","t","useTranslations","unreadItems","state","items","filter","item","read_at","unreadCount","metadata","unread_count","onClickHandler","React","useCallback","e","markAllAsRead","CheckmarkCircle"],"mappings":";;;;AAYO,MAAMA,IAAwCA,CAAC;AAAA,EAAEC,SAAAA;AAAQ,MAAM;AAC9D,QAAA;AAAA,IAAEC,cAAAA;AAAAA,IAAcC,YAAAA;AAAAA,IAAYC,WAAAA;AAAAA,MAAcC,EAAa,GACvD;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GAExBC,IAAcN,EAAcO,CAAAA,MAChCA,EAAMC,MAAMC,OAAQC,CAASA,MAAA,CAACA,EAAKC,OAAO,CAC5C,GAEMC,IAAcZ,EAAcO,CAAUA,MAAAA,EAAMM,SAASC,YAAY,GAEjEC,IAAiBC,EAAMC,YAC3B,CAACC,MAAwB;AACvBjB,IAAAA,EAAWkB,cAAc,GACrBpB,KAAiBmB,EAAAA,GAAGZ,CAAW;AAAA,EAErC,GAAA,CAACL,GAAYK,GAAaP,CAAO,CACnC;AAGE,SAAA,gBAAAiB,EAAA,cAAC,YACC,WAAW,8CAA8Cd,CAAS,IAClE,UAAUU,MAAgB,GAC1B,SAASG,GACT,MAAK,SAAA,GAEJX,EAAE,eAAe,mCACjBgB,GAAgB,EAAA,eAAW,IAAA,CAC9B;AAEJ;"}
1
+ {"version":3,"file":"MarkAsRead.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport * as React from \"react\";\n\nimport { CheckmarkCircle } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type MarkAsReadProps = {\n onClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nexport const MarkAsRead: React.FC<MarkAsReadProps> = ({ onClick }) => {\n const { useFeedStore, feedClient, colorMode } = useKnockFeed();\n const { t } = useTranslations();\n\n const unreadItems = useFeedStore((state) =>\n state.items.filter((item) => !item.read_at),\n );\n\n const unreadCount = useFeedStore((state) => state.metadata.unread_count);\n\n const onClickHandler = React.useCallback(\n (e: React.MouseEvent) => {\n feedClient.markAllAsRead();\n if (onClick) onClick(e, unreadItems);\n },\n [feedClient, unreadItems, onClick],\n );\n\n return (\n <button\n className={`rnf-mark-all-as-read rnf-mark-all-as-read--${colorMode}`}\n disabled={unreadCount === 0}\n onClick={onClickHandler}\n type=\"button\"\n >\n {t(\"markAllAsRead\")}\n <CheckmarkCircle aria-hidden />\n </button>\n );\n};\n"],"names":["MarkAsRead","onClick","useFeedStore","feedClient","colorMode","useKnockFeed","t","useTranslations","unreadItems","state","items","filter","item","read_at","unreadCount","metadata","unread_count","onClickHandler","React","useCallback","e","markAllAsRead","CheckmarkCircle"],"mappings":";;;;AAYO,MAAMA,IAAwCA,CAAC;AAAA,EAAEC,SAAAA;AAAQ,MAAM;AAC9D,QAAA;AAAA,IAAEC,cAAAA;AAAAA,IAAcC,YAAAA;AAAAA,IAAYC,WAAAA;AAAAA,MAAcC,EAAa,GACvD;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GAExBC,IAAcN,EAAcO,CAAAA,MAChCA,EAAMC,MAAMC,OAAQC,CAASA,MAAA,CAACA,EAAKC,OAAO,CAC5C,GAEMC,IAAcZ,EAAcO,CAAUA,MAAAA,EAAMM,SAASC,YAAY,GAEjEC,IAAiBC,EAAMC,YAC3B,CAACC,MAAwB;AACvBjB,IAAAA,EAAWkB,cAAc,GACrBpB,KAAiBmB,EAAAA,GAAGZ,CAAW;AAAA,EAErC,GAAA,CAACL,GAAYK,GAAaP,CAAO,CACnC;AAGE,SAAA,gBAAAiB,EAAA,cAAC,YACC,WAAW,8CAA8Cd,CAAS,IAClE,UAAUU,MAAgB,GAC1B,SAASG,GACT,MAAK,YAEJX,EAAE,eAAe,mCACjBgB,GAAgB,EAAA,eAAW,GAAA,CAAA,CAC9B;AAEJ;"}
@@ -1,5 +1,5 @@
1
1
  import { isRequestInFlight as C, NetworkStatus as f } from "@knocklabs/client";
2
- import { useKnockFeed as I, useFeedSettings as R, useTranslations as B, FilterStatus as q } from "@knocklabs/react-core";
2
+ import { FilterStatus as I, useKnockFeed as R, useFeedSettings as B, useTranslations as q } from "@knocklabs/react-core";
3
3
  import e, { useState as x, useRef as K, useEffect as p, useCallback as H } from "react";
4
4
  import { Spinner as M } from "../../../core/components/Spinner/Spinner.mjs";
5
5
  import P from "../../../core/hooks/useOnBottomScroll.mjs";
@@ -16,7 +16,7 @@ const O = (t) => /* @__PURE__ */ e.createElement(A, { key: t.item.id, ...t }), T
16
16
  onNotificationClick: g,
17
17
  onNotificationButtonClick: E,
18
18
  onMarkAllAsReadClick: b,
19
- initialFilterStatus: r = q.All,
19
+ initialFilterStatus: r = I.All,
20
20
  header: N,
21
21
  renderHeader: S = T
22
22
  }) => {
@@ -24,11 +24,11 @@ const O = (t) => /* @__PURE__ */ e.createElement(A, { key: t.item.id, ...t }), T
24
24
  feedClient: n,
25
25
  useFeedStore: h,
26
26
  colorMode: c
27
- } = I(), {
27
+ } = R(), {
28
28
  settings: i
29
- } = R(n), {
29
+ } = B(n), {
30
30
  t: F
31
- } = B(), {
31
+ } = q(), {
32
32
  pageInfo: l,
33
33
  items: d,
34
34
  networkStatus: o
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationFeed.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n ColorMode,\n FilterStatus,\n useFeedSettings,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n NotificationFeedHeader,\n NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n item: FeedItem<T>;\n onItemClick?: NotificationCellProps[\"onItemClick\"];\n onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport 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}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n <div className=\"rnf-notification-feed__spinner-container\">\n <Spinner\n thickness={3}\n size=\"16px\"\n color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n />\n </div>\n);\n\nconst poweredByKnockUrl =\n \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n EmptyComponent = <EmptyFeed />,\n renderItem = defaultRenderItem,\n onNotificationClick,\n onNotificationButtonClick,\n onMarkAllAsReadClick,\n initialFilterStatus = FilterStatus.All,\n header,\n renderHeader = defaultRenderHeader,\n}) => {\n const [status, setStatus] = useState(initialFilterStatus);\n const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n const { settings } = useFeedSettings(feedClient);\n const { t } = useTranslations();\n\n const { pageInfo, items, networkStatus } = useFeedStore();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setStatus(initialFilterStatus);\n }, [initialFilterStatus]);\n\n useEffect(() => {\n // When the feed client changes, or the status changes issue a re-fetch\n feedClient.fetch({ status });\n }, [feedClient, status]);\n\n const noItems = items.length === 0;\n const requestInFlight = isRequestInFlight(networkStatus);\n\n // Handle fetching more once we reach the bottom of the list\n const onBottomCallback = useCallback(() => {\n if (!requestInFlight && pageInfo.after) {\n feedClient.fetchNextPage();\n }\n }, [requestInFlight, pageInfo, feedClient]);\n\n // Once we scroll to the bottom of the view we want to automatically fetch\n // more items for the feed and bring them into the list\n useOnBottomScroll({\n ref: containerRef,\n callback: onBottomCallback,\n offset: 70,\n });\n\n return (\n <div\n className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n >\n {header ||\n renderHeader({\n setFilterStatus: setStatus,\n filterStatus: status,\n onMarkAllAsReadClick,\n })}\n\n <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n {networkStatus === NetworkStatus.loading && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n <div className=\"rnf-notification-feed__feed-items-container\">\n {networkStatus !== NetworkStatus.loading &&\n items.map((item: FeedItem) =>\n renderItem({\n item,\n onItemClick: onNotificationClick,\n onButtonClick: onNotificationButtonClick,\n }),\n )}\n </div>\n\n {networkStatus === NetworkStatus.fetchMore && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n {!requestInFlight && noItems && EmptyComponent}\n </div>\n\n {settings?.features.branding_required && (\n <div className=\"rnf-notification-feed__knock-branding\">\n <a href={poweredByKnockUrl} target=\"_blank\">\n {t(\"poweredBy\") || \"Powered by Knock\"}\n </a>\n </div>\n )}\n </div>\n );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":";;;;;;;;;;AAkDA,MAAMA,IAAoBA,CAACC,MACxBC,gBAAAA,EAAA,cAAAC,GAAA,EAAiB,KAAKF,EAAMG,KAAKC,IAAI,GAAIJ,EAC3C,CAAA,GAEKK,IAAsBA,CAACL,MAC1BC,gBAAAA,EAAA,cAAAK,GAAA,EAA2BN,GAAAA,EAC7B,CAAA,GAEKO,IAAiBA,CAAC;AAAA,EAAEC,WAAAA;AAAoC,MAC3DP,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,8EACZQ,GACC,EAAA,WAAW,GACX,MAAK,QACL,OAAOD,MAAc,SAAS,8BAA8BE,OAAU,CAAA,CAE1E,GAGIC,IACJ,sGAEWC,IAAoDA,CAAC;AAAA,EAChEC,gBAAAA,oCAAkBC,GAAY,IAAA;AAAA,EAC9BC,YAAAA,IAAahB;AAAAA,EACbiB,qBAAAA;AAAAA,EACAC,2BAAAA;AAAAA,EACAC,sBAAAA;AAAAA,EACAC,qBAAAA,IAAsBC,EAAaC;AAAAA,EACnCC,QAAAA;AAAAA,EACAC,cAAAA,IAAelB;AACjB,MAAM;AACJ,QAAM,CAACmB,GAAQC,CAAS,IAAIC,EAASP,CAAmB,GAClD;AAAA,IAAEQ,YAAAA;AAAAA,IAAYC,cAAAA;AAAAA,IAAcpB,WAAAA;AAAAA,MAAcqB,EAAa,GACvD;AAAA,IAAEC,UAAAA;AAAAA,EAAAA,IAAaC,EAAgBJ,CAAU,GACzC;AAAA,IAAEK,GAAAA;AAAAA,MAAMC,EAAgB,GAExB;AAAA,IAAEC,UAAAA;AAAAA,IAAUC,OAAAA;AAAAA,IAAOC,eAAAA;AAAAA,MAAkBR,EAAa,GAClDS,IAAeC,EAAuB,IAAI;AAEhDC,EAAAA,EAAU,MAAM;AACdd,IAAAA,EAAUN,CAAmB;AAAA,EAAA,GAC5B,CAACA,CAAmB,CAAC,GAExBoB,EAAU,MAAM;AAEdZ,IAAAA,EAAWa,MAAM;AAAA,MAAEhB,QAAAA;AAAAA,IAAAA,CAAQ;AAAA,EAAA,GAC1B,CAACG,GAAYH,CAAM,CAAC;AAEjBiB,QAAAA,IAAUN,EAAMO,WAAW,GAC3BC,IAAkBC,EAAkBR,CAAa,GAGjDS,IAAmBC,EAAY,MAAM;AACrC,IAAA,CAACH,KAAmBT,EAASa,SAC/BpB,EAAWqB,cAAc;AAAA,EAE1B,GAAA,CAACL,GAAiBT,GAAUP,CAAU,CAAC;AAIxB,SAAAsB,EAAA;AAAA,IAChBC,KAAKb;AAAAA,IACLc,UAAUN;AAAAA,IACVO,QAAQ;AAAA,EAAA,CACT,mCAGE,OACC,EAAA,WAAW,gDAAgD5C,CAAS,MAEnEc,KACCC,EAAa;AAAA,IACX8B,iBAAiB5B;AAAAA,IACjB6B,cAAc9B;AAAAA,IACdN,sBAAAA;AAAAA,EAAAA,CACD,GAEHjB,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,oCAAmC,KAAKoC,EACpDD,GAAAA,MAAkBmB,EAAcC,WAC9BvD,gBAAAA,EAAA,cAAAM,GAAA,EAAe,WAAAC,EACjB,CAAA,GAEDP,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,8CACZmC,GAAAA,MAAkBmB,EAAcC,WAC/BrB,EAAMsB,IAAI,CAACtD,MACTY,EAAW;AAAA,IACTZ,MAAAA;AAAAA,IACAuD,aAAa1C;AAAAA,IACb2C,eAAe1C;AAAAA,EAAAA,CAChB,CACH,CACJ,GAECmB,MAAkBmB,EAAcK,aAC9B3D,gBAAAA,EAAA,cAAAM,GAAA,EAAe,WAAAC,GACjB,GAEA,CAACmC,KAAmBF,KAAW5B,CAClC,IAECiB,KAAAA,gBAAAA,EAAU+B,SAASC,sBACjB7D,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,wCAAA,mCACZ,KAAE,EAAA,MAAMU,GAAmB,QAAO,YAChCqB,EAAE,WAAW,KAAK,kBACrB,CACF,CAEJ;AAEJ;"}
1
+ {"version":3,"file":"NotificationFeed.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n ColorMode,\n FilterStatus,\n useFeedSettings,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n NotificationFeedHeader,\n NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n item: FeedItem<T>;\n onItemClick?: NotificationCellProps[\"onItemClick\"];\n onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport 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}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n <div className=\"rnf-notification-feed__spinner-container\">\n <Spinner\n thickness={3}\n size=\"16px\"\n color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n />\n </div>\n);\n\nconst poweredByKnockUrl =\n \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n EmptyComponent = <EmptyFeed />,\n renderItem = defaultRenderItem,\n onNotificationClick,\n onNotificationButtonClick,\n onMarkAllAsReadClick,\n initialFilterStatus = FilterStatus.All,\n header,\n renderHeader = defaultRenderHeader,\n}) => {\n const [status, setStatus] = useState(initialFilterStatus);\n const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n const { settings } = useFeedSettings(feedClient);\n const { t } = useTranslations();\n\n const { pageInfo, items, networkStatus } = useFeedStore();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setStatus(initialFilterStatus);\n }, [initialFilterStatus]);\n\n useEffect(() => {\n // When the feed client changes, or the status changes issue a re-fetch\n feedClient.fetch({ status });\n }, [feedClient, status]);\n\n const noItems = items.length === 0;\n const requestInFlight = isRequestInFlight(networkStatus);\n\n // Handle fetching more once we reach the bottom of the list\n const onBottomCallback = useCallback(() => {\n if (!requestInFlight && pageInfo.after) {\n feedClient.fetchNextPage();\n }\n }, [requestInFlight, pageInfo, feedClient]);\n\n // Once we scroll to the bottom of the view we want to automatically fetch\n // more items for the feed and bring them into the list\n useOnBottomScroll({\n ref: containerRef,\n callback: onBottomCallback,\n offset: 70,\n });\n\n return (\n <div\n className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n >\n {header ||\n renderHeader({\n setFilterStatus: setStatus,\n filterStatus: status,\n onMarkAllAsReadClick,\n })}\n\n <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n {networkStatus === NetworkStatus.loading && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n <div className=\"rnf-notification-feed__feed-items-container\">\n {networkStatus !== NetworkStatus.loading &&\n items.map((item: FeedItem) =>\n renderItem({\n item,\n onItemClick: onNotificationClick,\n onButtonClick: onNotificationButtonClick,\n }),\n )}\n </div>\n\n {networkStatus === NetworkStatus.fetchMore && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n {!requestInFlight && noItems && EmptyComponent}\n </div>\n\n {settings?.features.branding_required && (\n <div className=\"rnf-notification-feed__knock-branding\">\n <a href={poweredByKnockUrl} target=\"_blank\">\n {t(\"poweredBy\") || \"Powered by Knock\"}\n </a>\n </div>\n )}\n </div>\n );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationFeedHeader.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport React, { SetStateAction } from \"react\";\n\nimport { Dropdown } from \"./Dropdown\";\nimport { MarkAsRead } from \"./MarkAsRead\";\n\nexport type NotificationFeedHeaderProps = {\n filterStatus: FilterStatus;\n setFilterStatus: React.Dispatch<SetStateAction<FilterStatus>>;\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nconst OrderedFilterStatuses = [\n FilterStatus.All,\n FilterStatus.Unread,\n FilterStatus.Read,\n];\n\nexport const NotificationFeedHeader: React.FC<NotificationFeedHeaderProps> = ({\n onMarkAllAsReadClick,\n filterStatus,\n setFilterStatus,\n}) => {\n const { t } = useTranslations();\n\n return (\n <header className=\"rnf-notification-feed__header\">\n <div className=\"rnf-notification-feed__selector\">\n <span className=\"rnf-notification-feed__type\">\n {t(\"notifications\")}\n </span>\n <Dropdown\n value={filterStatus}\n onChange={(e) => setFilterStatus(e.target.value as FilterStatus)}\n >\n {OrderedFilterStatuses.map((filterStatus) => (\n <option key={filterStatus} value={filterStatus}>\n {t(filterStatus)}\n </option>\n ))}\n </Dropdown>\n </div>\n <MarkAsRead onClick={onMarkAllAsReadClick} />\n </header>\n );\n};\n"],"names":["OrderedFilterStatuses","FilterStatus","All","Unread","Read","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","React","Dropdown","e","target","value","map","MarkAsRead"],"mappings":";;;;AAaA,MAAMA,IAAwB,CAC5BC,EAAaC,KACbD,EAAaE,QACbF,EAAaG,IAAI,GAGNC,IAAgEA,CAAC;AAAA,EAC5EC,sBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,iBAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB;AAG5B,SAAAC,gBAAAA,EAAA,cAAC,YAAO,WAAU,gCAAA,mCACf,OAAI,EAAA,WAAU,kCACb,GAAAA,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,iCACbF,EAAE,eAAe,CACpB,GACAE,gBAAAA,EAAA,cAACC,KACC,OAAOL,GACP,UAAWM,CAAAA,MAAML,EAAgBK,EAAEC,OAAOC,KAAqB,EAAA,GAE9Df,EAAsBgB,IAAKT,CAAAA,MACzBI,gBAAAA,EAAA,cAAA,UAAA,EAAO,KAAKJ,GAAc,OAAOA,EAAAA,GAC/BE,EAAEF,CAAY,CACjB,CACD,CACH,CACF,GACCI,gBAAAA,EAAA,cAAAM,GAAA,EAAW,SAASX,EAAAA,CAAqB,CAC5C;AAEJ;"}
1
+ {"version":3,"file":"NotificationFeedHeader.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport React, { SetStateAction } from \"react\";\n\nimport { Dropdown } from \"./Dropdown\";\nimport { MarkAsRead } from \"./MarkAsRead\";\n\nexport type NotificationFeedHeaderProps = {\n filterStatus: FilterStatus;\n setFilterStatus: React.Dispatch<SetStateAction<FilterStatus>>;\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nconst OrderedFilterStatuses = [\n FilterStatus.All,\n FilterStatus.Unread,\n FilterStatus.Read,\n];\n\nexport const NotificationFeedHeader: React.FC<NotificationFeedHeaderProps> = ({\n onMarkAllAsReadClick,\n filterStatus,\n setFilterStatus,\n}) => {\n const { t } = useTranslations();\n\n return (\n <header className=\"rnf-notification-feed__header\">\n <div className=\"rnf-notification-feed__selector\">\n <span className=\"rnf-notification-feed__type\">\n {t(\"notifications\")}\n </span>\n <Dropdown\n value={filterStatus}\n onChange={(e) => setFilterStatus(e.target.value as FilterStatus)}\n >\n {OrderedFilterStatuses.map((filterStatus) => (\n <option key={filterStatus} value={filterStatus}>\n {t(filterStatus)}\n </option>\n ))}\n </Dropdown>\n </div>\n <MarkAsRead onClick={onMarkAllAsReadClick} />\n </header>\n );\n};\n"],"names":["OrderedFilterStatuses","FilterStatus","All","Unread","Read","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","React","Dropdown","e","target","value","map","MarkAsRead"],"mappings":";;;;AAaA,MAAMA,IAAwB,CAC5BC,EAAaC,KACbD,EAAaE,QACbF,EAAaG,IAAI,GAGNC,IAAgEA,CAAC;AAAA,EAC5EC,sBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,iBAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB;AAG5B,SAAAC,gBAAAA,EAAA,cAAC,YAAO,WAAU,gCAAA,mCACf,OAAI,EAAA,WAAU,kCACb,GAAAA,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,iCACbF,EAAE,eAAe,CACpB,GACAE,gBAAAA,EAAA,cAACC,KACC,OAAOL,GACP,UAAWM,CAAAA,MAAML,EAAgBK,EAAEC,OAAOC,KAAqB,EAAA,GAE9Df,EAAsBgB,IAAKT,CAAAA,MACzBI,gBAAAA,EAAA,cAAA,UAAA,EAAO,KAAKJ,GAAc,OAAOA,EAAAA,GAC/BE,EAAEF,CAAY,CACjB,CACD,CACH,CACF,GACCI,gBAAAA,EAAA,cAAAM,GAAA,EAAW,SAASX,EAAqB,CAAA,CAC5C;AAEJ;"}
@@ -1,8 +1,8 @@
1
1
  import { useTranslations as y, useKnockFeed as _ } from "@knocklabs/react-core";
2
- import o, { useEffect as E } from "react";
3
- import { usePopper as F } from "react-popper";
4
- import N from "../../../core/hooks/useComponentVisible.mjs";
5
- import { NotificationFeed as b } from "../NotificationFeed/NotificationFeed.mjs";
2
+ import { createPopper as E } from "@popperjs/core";
3
+ import n, { useEffect as c } from "react";
4
+ import F from "../../../core/hooks/useComponentVisible.mjs";
5
+ import { NotificationFeed as N } from "../NotificationFeed/NotificationFeed.mjs";
6
6
  import "../NotificationFeed/NotificationFeedHeader.mjs";
7
7
  /* empty css */
8
8
  /* empty css */
@@ -11,50 +11,53 @@ const x = ({
11
11
  feedClient: t
12
12
  }) => {
13
13
  e.metadata.unseen_count > 0 && t.markAllAsSeen();
14
- }, I = ({
14
+ }, K = ({
15
15
  isVisible: e,
16
16
  onOpen: t = x,
17
- onClose: f,
18
- buttonRef: a,
19
- closeOnClickOutside: p = !0,
20
- placement: s = "bottom-end",
21
- ...c
17
+ onClose: p,
18
+ buttonRef: r,
19
+ closeOnClickOutside: s = !0,
20
+ placement: i = "bottom-end",
21
+ ...m
22
22
  }) => {
23
23
  const {
24
- t: m
24
+ t: d
25
25
  } = y(), {
26
- colorMode: d,
27
- feedClient: r,
28
- useFeedStore: l
29
- } = _(), n = l(), {
30
- ref: i
31
- } = N(e, f, {
32
- closeOnClickOutside: p
33
- }), {
34
- styles: u,
35
- attributes: v
36
- } = F(a.current, i.current, {
37
- strategy: "fixed",
38
- placement: s,
39
- modifiers: [{
40
- name: "offset",
41
- options: {
42
- offset: [0, 8]
43
- }
44
- }]
26
+ colorMode: l,
27
+ feedClient: f,
28
+ useFeedStore: u
29
+ } = _(), a = u(), {
30
+ ref: o
31
+ } = F(e, p, {
32
+ closeOnClickOutside: s
45
33
  });
46
- return E(() => {
34
+ return c(() => {
47
35
  e && t && t({
48
- store: n,
49
- feedClient: r
36
+ store: a,
37
+ feedClient: f
50
38
  });
51
- }, [e, t, n, r]), /* @__PURE__ */ o.createElement("div", { className: `rnf-notification-feed-popover rnf-notification-feed-popover--${d}`, style: {
52
- ...u.popper,
39
+ }, [e, t, a, f]), c(() => {
40
+ if (r.current && o.current) {
41
+ const v = E(r.current, o.current, {
42
+ strategy: "fixed",
43
+ placement: i,
44
+ modifiers: [{
45
+ name: "offset",
46
+ options: {
47
+ offset: [0, 8]
48
+ }
49
+ }]
50
+ });
51
+ return () => {
52
+ v.destroy();
53
+ };
54
+ }
55
+ }, [r, o, i]), /* @__PURE__ */ n.createElement("div", { className: `rnf-notification-feed-popover rnf-notification-feed-popover--${l}`, style: {
53
56
  visibility: e ? "visible" : "hidden",
54
57
  opacity: e ? 1 : 0
55
- }, ref: i, ...v.popper, role: "dialog", "aria-label": m("notifications"), tabIndex: -1 }, /* @__PURE__ */ o.createElement("div", { className: "rnf-notification-feed-popover__inner" }, /* @__PURE__ */ o.createElement(b, { ...c })));
58
+ }, ref: o, role: "dialog", "aria-label": d("notifications"), tabIndex: -1 }, /* @__PURE__ */ n.createElement("div", { className: "rnf-notification-feed-popover__inner" }, /* @__PURE__ */ n.createElement(N, { ...m })));
56
59
  };
57
60
  export {
58
- I as NotificationFeedPopover
61
+ K as NotificationFeedPopover
59
62
  };
60
63
  //# sourceMappingURL=NotificationFeedPopover.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationFeedPopover.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { Placement } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\nimport { usePopper } from \"react-popper\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n store: FeedStoreState;\n feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n if (store.metadata.unseen_count > 0) {\n feedClient.markAllAsSeen();\n }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n isVisible: boolean;\n onOpen?: (arg: OnOpenOptions) => void;\n onClose: (e: Event) => void;\n buttonRef: RefObject<HTMLElement>;\n closeOnClickOutside?: boolean;\n placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n NotificationFeedPopoverProps\n> = ({\n isVisible,\n onOpen = defaultOnOpen,\n onClose,\n buttonRef,\n closeOnClickOutside = true,\n placement = \"bottom-end\",\n ...feedProps\n}) => {\n const { t } = useTranslations();\n const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n const store = useFeedStore();\n\n const { ref: popperRef } = useComponentVisible(isVisible, onClose, {\n closeOnClickOutside,\n });\n\n const { styles, attributes } = usePopper(\n buttonRef.current,\n popperRef.current,\n {\n strategy: \"fixed\",\n placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 8],\n },\n },\n ],\n },\n );\n\n useEffect(() => {\n // Whenever the feed is opened, we want to invoke the `onOpen` callback\n // function to handle any side effects.\n if (isVisible && onOpen) {\n onOpen({ store, feedClient });\n }\n }, [isVisible, onOpen, store, feedClient]);\n\n return (\n <div\n className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n style={{\n ...styles.popper,\n visibility: isVisible ? \"visible\" : \"hidden\",\n opacity: isVisible ? 1 : 0,\n }}\n ref={popperRef}\n {...attributes.popper}\n role=\"dialog\"\n aria-label={t(\"notifications\")}\n tabIndex={-1}\n >\n <div className=\"rnf-notification-feed-popover__inner\">\n <NotificationFeed {...feedProps} />\n </div>\n </div>\n );\n};\n"],"names":["defaultOnOpen","store","feedClient","metadata","unseen_count","markAllAsSeen","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","t","useTranslations","colorMode","useFeedStore","useKnockFeed","ref","popperRef","useComponentVisible","styles","attributes","usePopper","current","strategy","modifiers","name","options","offset","useEffect","popper","visibility","opacity","React","NotificationFeed"],"mappings":";;;;;;;;AAgBA,MAAMA,IAAgBA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,YAAAA;AAA0B,MAAM;AAC1DD,EAAAA,EAAME,SAASC,eAAe,KAChCF,EAAWG,cAAc;AAE7B,GAWaC,IAETA,CAAC;AAAA,EACHC,WAAAA;AAAAA,EACAC,QAAAA,IAASR;AAAAA,EACTS,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,qBAAAA,IAAsB;AAAA,EACtBC,WAAAA,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACE,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GACxB;AAAA,IAAEC,WAAAA;AAAAA,IAAWd,YAAAA;AAAAA,IAAYe,cAAAA;AAAAA,MAAiBC,EAAa,GACvDjB,IAAQgB,KAER;AAAA,IAAEE,KAAKC;AAAAA,EAAAA,IAAcC,EAAoBd,GAAWE,GAAS;AAAA,IACjEE,qBAAAA;AAAAA,EAAAA,CACD,GAEK;AAAA,IAAEW,QAAAA;AAAAA,IAAQC,YAAAA;AAAAA,EAAeC,IAAAA,EAC7Bd,EAAUe,SACVL,EAAUK,SACV;AAAA,IACEC,UAAU;AAAA,IACVd,WAAAA;AAAAA,IACAe,WAAW,CACT;AAAA,MACEC,MAAM;AAAA,MACNC,SAAS;AAAA,QACPC,QAAQ,CAAC,GAAG,CAAC;AAAA,MACf;AAAA,IAAA,CACD;AAAA,EAAA,CAGP;AAEAC,SAAAA,EAAU,MAAM;AAGd,IAAIxB,KAAaC,KACRA,EAAA;AAAA,MAAEP,OAAAA;AAAAA,MAAOC,YAAAA;AAAAA,IAAAA,CAAY;AAAA,KAE7B,CAACK,GAAWC,GAAQP,GAAOC,CAAU,CAAC,mCAGtC,OACC,EAAA,WAAW,gEAAgEc,CAAS,IACpF,OAAO;AAAA,IACL,GAAGM,EAAOU;AAAAA,IACVC,YAAY1B,IAAY,YAAY;AAAA,IACpC2B,SAAS3B,IAAY,IAAI;AAAA,EAC3B,GACA,KAAKa,GACL,GAAIG,EAAWS,QACf,MAAK,UACL,cAAYlB,EAAE,eAAe,GAC7B,UAAU,GAAA,GAETqB,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,uCAAA,mCACZC,GAAiB,EAAA,GAAIvB,EAAU,CAAA,CAClC,CACF;AAEJ;"}
1
+ {"version":3,"file":"NotificationFeedPopover.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { Placement, createPopper } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n store: FeedStoreState;\n feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n if (store.metadata.unseen_count > 0) {\n feedClient.markAllAsSeen();\n }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n isVisible: boolean;\n onOpen?: (arg: OnOpenOptions) => void;\n onClose: (e: Event) => void;\n buttonRef: RefObject<HTMLElement>;\n closeOnClickOutside?: boolean;\n placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n NotificationFeedPopoverProps\n> = ({\n isVisible,\n onOpen = defaultOnOpen,\n onClose,\n buttonRef,\n closeOnClickOutside = true,\n placement = \"bottom-end\",\n ...feedProps\n}) => {\n const { t } = useTranslations();\n const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n const store = useFeedStore();\n\n const { ref: popperRef } = useComponentVisible(isVisible, onClose, {\n closeOnClickOutside,\n });\n\n useEffect(() => {\n // Whenever the feed is opened, we want to invoke the `onOpen` callback\n // function to handle any side effects.\n if (isVisible && onOpen) {\n onOpen({ store, feedClient });\n }\n }, [isVisible, onOpen, store, feedClient]);\n\n useEffect(() => {\n if (buttonRef.current && popperRef.current) {\n const popperInstance = createPopper(\n buttonRef.current,\n popperRef.current,\n {\n strategy: \"fixed\",\n placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 8],\n },\n },\n ],\n },\n );\n\n // Cleanup\n return () => {\n popperInstance.destroy();\n };\n }\n }, [buttonRef, popperRef, placement]);\n\n return (\n <div\n className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n style={{\n visibility: isVisible ? \"visible\" : \"hidden\",\n opacity: isVisible ? 1 : 0,\n }}\n ref={popperRef}\n role=\"dialog\"\n aria-label={t(\"notifications\")}\n tabIndex={-1}\n >\n <div className=\"rnf-notification-feed-popover__inner\">\n <NotificationFeed {...feedProps} />\n </div>\n </div>\n );\n};\n"],"names":["defaultOnOpen","store","feedClient","metadata","unseen_count","markAllAsSeen","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","t","useTranslations","colorMode","useFeedStore","useKnockFeed","ref","popperRef","useComponentVisible","useEffect","current","popperInstance","createPopper","strategy","modifiers","name","options","offset","destroy","visibility","opacity","React","NotificationFeed"],"mappings":";;;;;;;;AAeA,MAAMA,IAAgBA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,YAAAA;AAA0B,MAAM;AAC1DD,EAAAA,EAAME,SAASC,eAAe,KAChCF,EAAWG,cAAc;AAE7B,GAWaC,IAETA,CAAC;AAAA,EACHC,WAAAA;AAAAA,EACAC,QAAAA,IAASR;AAAAA,EACTS,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,qBAAAA,IAAsB;AAAA,EACtBC,WAAAA,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACE,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GACxB;AAAA,IAAEC,WAAAA;AAAAA,IAAWd,YAAAA;AAAAA,IAAYe,cAAAA;AAAAA,MAAiBC,EAAa,GACvDjB,IAAQgB,EAAa,GAErB;AAAA,IAAEE,KAAKC;AAAAA,EAAAA,IAAcC,EAAoBd,GAAWE,GAAS;AAAA,IACjEE,qBAAAA;AAAAA,EAAAA,CACD;AAEDW,SAAAA,EAAU,MAAM;AAGd,IAAIf,KAAaC,KACRA,EAAA;AAAA,MAAEP,OAAAA;AAAAA,MAAOC,YAAAA;AAAAA,IAAAA,CAAY;AAAA,KAE7B,CAACK,GAAWC,GAAQP,GAAOC,CAAU,CAAC,GAEzCoB,EAAU,MAAM;AACVZ,QAAAA,EAAUa,WAAWH,EAAUG,SAAS;AAC1C,YAAMC,IAAiBC,EACrBf,EAAUa,SACVH,EAAUG,SACV;AAAA,QACEG,UAAU;AAAA,QACVd,WAAAA;AAAAA,QACAe,WAAW,CACT;AAAA,UACEC,MAAM;AAAA,UACNC,SAAS;AAAA,YACPC,QAAQ,CAAC,GAAG,CAAC;AAAA,UAAA;AAAA,QAEhB,CAAA;AAAA,MAAA,CAGP;AAGA,aAAO,MAAM;AACXN,QAAAA,EAAeO,QAAQ;AAAA,MACzB;AAAA,IAAA;AAAA,EAED,GAAA,CAACrB,GAAWU,GAAWR,CAAS,CAAC,mCAGjC,OACC,EAAA,WAAW,gEAAgEI,CAAS,IACpF,OAAO;AAAA,IACLgB,YAAYzB,IAAY,YAAY;AAAA,IACpC0B,SAAS1B,IAAY,IAAI;AAAA,EAC3B,GACA,KAAKa,GACL,MAAK,UACL,cAAYN,EAAE,eAAe,GAC7B,UAAU,MAEToB,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,0CACbA,gBAAAA,EAAA,cAACC,KAAiB,GAAItB,EAAAA,CAAU,CAClC,CACF;AAEJ;"}
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationIconButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { SyntheticEvent } from \"react\";\n\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { BadgeCountType, UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n // What value should we use to drive the badge count?\n badgeCountType?: BadgeCountType;\n onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n HTMLButtonElement,\n NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <button\n className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n aria-label=\"Open notification feed\"\n ref={ref}\n onClick={onClick}\n >\n <BellIcon aria-hidden />\n <UnseenBadge badgeCountType={badgeCountType} />\n </button>\n );\n});\n"],"names":["NotificationIconButton","React","forwardRef","onClick","badgeCountType","ref","colorMode","useKnockFeed","BellIcon","UnseenBadge"],"mappings":";;;;;AAcaA,MAAAA,IAAyBC,EAAMC,WAG1C,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,gBAAAA;AAAe,GAAGC,MAAQ;AAChC,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa;AAEnC,yCACG,UACC,EAAA,WAAW,8DAA8DD,CAAS,IAClF,cAAW,0BACX,KAAAD,GACA,SAAAF,EAEA,GAAAF,gBAAAA,EAAA,cAACO,KAAS,eAAW,GAAA,CAAA,GACpBP,gBAAAA,EAAA,cAAAQ,GAAA,EAAY,gBAAAL,GAA+B,CAC9C;AAEJ,CAAC;"}
1
+ {"version":3,"file":"NotificationIconButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { SyntheticEvent } from \"react\";\n\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { BadgeCountType, UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n // What value should we use to drive the badge count?\n badgeCountType?: BadgeCountType;\n onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n HTMLButtonElement,\n NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <button\n className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n aria-label=\"Open notification feed\"\n ref={ref}\n onClick={onClick}\n >\n <BellIcon aria-hidden />\n <UnseenBadge badgeCountType={badgeCountType} />\n </button>\n );\n});\n"],"names":["NotificationIconButton","React","forwardRef","onClick","badgeCountType","ref","colorMode","useKnockFeed","BellIcon","UnseenBadge"],"mappings":";;;;;AAcaA,MAAAA,IAAyBC,EAAMC,WAG1C,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,gBAAAA;AAAe,GAAGC,MAAQ;AAChC,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa;AAEnC,yCACG,UACC,EAAA,WAAW,8DAA8DD,CAAS,IAClF,cAAW,0BACX,KAAAD,GACA,SAAAF,KAEAF,gBAAAA,EAAA,cAACO,KAAS,eAAW,GAAA,CAAA,GACpBP,gBAAAA,EAAA,cAAAQ,GAAA,EAAY,gBAAAL,EAA+B,CAAA,CAC9C;AAEJ,CAAC;"}
@@ -1 +1 @@
1
- {"version":3,"file":"UnseenBadge.mjs","sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import { FeedMetadata } from \"@knocklabs/client\";\nimport { formatBadgeCount, useKnockFeed } from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport \"./styles.css\";\n\nexport type BadgeCountType = \"unseen\" | \"unread\" | \"all\";\n\nexport type UnseenBadgeProps = {\n badgeCountType?: BadgeCountType;\n};\n\nfunction selectBadgeCount(\n badgeCountType: BadgeCountType,\n metadata: FeedMetadata,\n) {\n switch (badgeCountType) {\n case \"all\":\n return metadata.total_count;\n case \"unread\":\n return metadata.unread_count;\n case \"unseen\":\n return metadata.unseen_count;\n }\n}\n\nexport const UnseenBadge: React.FC<UnseenBadgeProps> = ({\n badgeCountType = \"unseen\",\n}) => {\n const { useFeedStore } = useKnockFeed();\n const badgeCountValue = useFeedStore((state) =>\n selectBadgeCount(badgeCountType, state.metadata),\n );\n\n return badgeCountValue !== 0 ? (\n <div className=\"rnf-unseen-badge\">\n <span className=\"rnf-unseen-badge__count\">\n {formatBadgeCount(badgeCountValue)}\n </span>\n </div>\n ) : null;\n};\n"],"names":["selectBadgeCount","badgeCountType","metadata","total_count","unread_count","unseen_count","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","React","formatBadgeCount"],"mappings":";;;AAYA,SAASA,EACPC,GACAC,GACA;AACA,UAAQD,GAAc;AAAA,IACpB,KAAK;AACH,aAAOC,EAASC;AAAAA,IAClB,KAAK;AACH,aAAOD,EAASE;AAAAA,IAClB,KAAK;AACH,aAAOF,EAASG;AAAAA,EACpB;AACF;AAEO,MAAMC,IAA0CA,CAAC;AAAA,EACtDL,gBAAAA,IAAiB;AACnB,MAAM;AACE,QAAA;AAAA,IAAEM,cAAAA;AAAAA,MAAiBC,EAAa,GAChCC,IAAkBF,EAAcG,CAAAA,MACpCV,EAAiBC,GAAgBS,EAAMR,QAAQ,CACjD;AAEA,SAAOO,MAAoB,IACxBE,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,sBACbA,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,0BACbC,GAAAA,EAAiBH,CAAe,CACnC,CACF,IACE;AACN;"}
1
+ {"version":3,"file":"UnseenBadge.mjs","sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import { FeedMetadata } from \"@knocklabs/client\";\nimport { formatBadgeCount, useKnockFeed } from \"@knocklabs/react-core\";\nimport React from \"react\";\n\nimport \"./styles.css\";\n\nexport type BadgeCountType = \"unseen\" | \"unread\" | \"all\";\n\nexport type UnseenBadgeProps = {\n badgeCountType?: BadgeCountType;\n};\n\nfunction selectBadgeCount(\n badgeCountType: BadgeCountType,\n metadata: FeedMetadata,\n) {\n switch (badgeCountType) {\n case \"all\":\n return metadata.total_count;\n case \"unread\":\n return metadata.unread_count;\n case \"unseen\":\n return metadata.unseen_count;\n }\n}\n\nexport const UnseenBadge: React.FC<UnseenBadgeProps> = ({\n badgeCountType = \"unseen\",\n}) => {\n const { useFeedStore } = useKnockFeed();\n const badgeCountValue = useFeedStore((state) =>\n selectBadgeCount(badgeCountType, state.metadata),\n );\n\n return badgeCountValue !== 0 ? (\n <div className=\"rnf-unseen-badge\">\n <span className=\"rnf-unseen-badge__count\">\n {formatBadgeCount(badgeCountValue)}\n </span>\n </div>\n ) : null;\n};\n"],"names":["selectBadgeCount","badgeCountType","metadata","total_count","unread_count","unseen_count","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","React","formatBadgeCount"],"mappings":";;;AAYA,SAASA,EACPC,GACAC,GACA;AACA,UAAQD,GAAc;AAAA,IACpB,KAAK;AACH,aAAOC,EAASC;AAAAA,IAClB,KAAK;AACH,aAAOD,EAASE;AAAAA,IAClB,KAAK;AACH,aAAOF,EAASG;AAAAA,EAAAA;AAEtB;AAEO,MAAMC,IAA0CA,CAAC;AAAA,EACtDL,gBAAAA,IAAiB;AACnB,MAAM;AACE,QAAA;AAAA,IAAEM,cAAAA;AAAAA,MAAiBC,EAAa,GAChCC,IAAkBF,EAAcG,CAAAA,MACpCV,EAAiBC,GAAgBS,EAAMR,QAAQ,CACjD;AAEA,SAAOO,MAAoB,IACxBE,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,sBACbA,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,0BACbC,GAAAA,EAAiBH,CAAe,CACnC,CACF,IACE;AACN;"}
@@ -1 +1 @@
1
- {"version":3,"file":"MsTeamsAuthButton.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.tsx"],"sourcesContent":["import {\n useKnockClient,\n useKnockMsTeamsClient,\n useMsTeamsAuth,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent, useEffect } from \"react\";\n\nimport { openPopupWindow } from \"../../../core/utils\";\nimport \"../../theme.css\";\nimport { MsTeamsIcon } from \"../MsTeamsIcon\";\n\nimport \"./styles.css\";\n\nexport interface MsTeamsAuthButtonProps {\n msTeamsBotId: string;\n redirectUrl?: string;\n onAuthenticationComplete?: (authenticationResp: string) => void;\n}\n\nexport const MsTeamsAuthButton: FunctionComponent<MsTeamsAuthButtonProps> = ({\n msTeamsBotId,\n redirectUrl,\n onAuthenticationComplete,\n}) => {\n const { t } = useTranslations();\n const knock = useKnockClient();\n\n const {\n setConnectionStatus,\n connectionStatus,\n setActionLabel,\n actionLabel,\n errorLabel,\n } = useKnockMsTeamsClient();\n\n const { buildMsTeamsAuthUrl, disconnectFromMsTeams } = useMsTeamsAuth(\n msTeamsBotId,\n redirectUrl,\n );\n\n useEffect(() => {\n const receiveMessage = (event: MessageEvent) => {\n if (event.origin !== knock.host) {\n return;\n }\n\n try {\n if (event.data === \"authComplete\") {\n setConnectionStatus(\"connected\");\n }\n\n if (event.data === \"authFailed\") {\n setConnectionStatus(\"error\");\n }\n\n onAuthenticationComplete?.(event.data);\n } catch (_error) {\n setConnectionStatus(\"error\");\n }\n };\n\n window.addEventListener(\"message\", receiveMessage, false);\n\n // Cleanup the event listener when the component unmounts\n return () => {\n window.removeEventListener(\"message\", receiveMessage);\n };\n }, [knock.host, onAuthenticationComplete, setConnectionStatus]);\n\n const disconnectLabel = t(\"msTeamsDisconnect\") || null;\n const reconnectLabel = t(\"msTeamsReconnect\") || null;\n\n // Loading states\n if (\n connectionStatus === \"connecting\" ||\n connectionStatus === \"disconnecting\"\n ) {\n return (\n <div className=\"rtk-connect__button rtk-connect__button--loading\">\n <MsTeamsIcon height=\"16px\" width=\"16px\" />\n <span>\n {connectionStatus === \"connecting\"\n ? t(\"msTeamsConnecting\")\n : t(\"msTeamsDisconnecting\")}\n </span>\n </div>\n );\n }\n\n // Error state\n if (connectionStatus === \"error\") {\n return (\n <button\n onClick={() => openPopupWindow(buildMsTeamsAuthUrl())}\n className=\"rtk-connect__button rtk-connect__button--error\"\n onMouseEnter={() => setActionLabel(reconnectLabel)}\n onMouseLeave={() => setActionLabel(null)}\n >\n <MsTeamsIcon height=\"16px\" width=\"16px\" />\n <span className=\"rtk-connect__button__text--error\">\n {actionLabel || errorLabel || t(\"msTeamsError\")}\n </span>\n </button>\n );\n }\n\n // Disconnected state\n if (connectionStatus === \"disconnected\") {\n return (\n <button\n onClick={() => openPopupWindow(buildMsTeamsAuthUrl())}\n className=\"rtk-connect__button rtk-connect__button--disconnected\"\n >\n <MsTeamsIcon height=\"16px\" width=\"16px\" />\n <span>{t(\"msTeamsConnect\")}</span>\n </button>\n );\n }\n\n // Connected state\n return (\n <button\n onClick={disconnectFromMsTeams}\n className=\"rtk-connect__button rtk-connect__button--connected\"\n onMouseEnter={() => setActionLabel(disconnectLabel)}\n onMouseLeave={() => setActionLabel(null)}\n >\n <MsTeamsIcon height=\"16px\" width=\"16px\" />\n <span className=\"rtk-connect__button__text--connected\">\n {actionLabel || t(\"msTeamsConnected\")}\n </span>\n </button>\n );\n};\n"],"names":["MsTeamsAuthButton","msTeamsBotId","redirectUrl","onAuthenticationComplete","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockMsTeamsClient","buildMsTeamsAuthUrl","disconnectFromMsTeams","useMsTeamsAuth","useEffect","receiveMessage","event","origin","host","data","addEventListener","removeEventListener","disconnectLabel","reconnectLabel","React","MsTeamsIcon","openPopupWindow"],"mappings":";;;;;;AAoBO,MAAMA,IAA+DA,CAAC;AAAA,EAC3EC,cAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,0BAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAMC,EAAgB,GACxBC,IAAQC,KAER;AAAA,IACJC,qBAAAA;AAAAA,IACAC,kBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,YAAAA;AAAAA,MACEC,EAAsB,GAEpB;AAAA,IAAEC,qBAAAA;AAAAA,IAAqBC,uBAAAA;AAAAA,EAAAA,IAA0BC,EACrDf,GACAC,CACF;AAEAe,EAAAA,EAAU,MAAM;AACRC,UAAAA,IAAiBA,CAACC,MAAwB;AAC1CA,UAAAA,EAAMC,WAAWd,EAAMe;AAIvB,YAAA;AACEF,UAAAA,EAAMG,SAAS,kBACjBd,EAAoB,WAAW,GAG7BW,EAAMG,SAAS,gBACjBd,EAAoB,OAAO,GAG7BL,KAAAA,QAAAA,EAA2BgB,EAAMG;AAAAA,gBAClB;AACfd,UAAAA,EAAoB,OAAO;AAAA,QAC7B;AAAA,IAAA;AAGKe,kBAAAA,iBAAiB,WAAWL,GAAgB,EAAK,GAGjD,MAAM;AACJM,aAAAA,oBAAoB,WAAWN,CAAc;AAAA,IAAA;AAAA,KAErD,CAACZ,EAAMe,MAAMlB,GAA0BK,CAAmB,CAAC;AAExDiB,QAAAA,IAAkBrB,EAAE,mBAAmB,KAAK,MAC5CsB,IAAiBtB,EAAE,kBAAkB,KAAK;AAI9CK,SAAAA,MAAqB,gBACrBA,MAAqB,kBAGnBkB,gBAAAA,EAAA,cAAC,SAAI,WAAU,mDAAA,mCACZC,GAAY,EAAA,QAAO,QAAO,OAAM,OAAM,CAAA,GACtCD,gBAAAA,EAAA,cAAA,QAAA,MAEKvB,EADHK,MAAqB,eAChB,sBACA,sBADmB,CAE3B,CACF,IAKAA,MAAqB,0CAEpB,UACC,EAAA,SAAS,MAAMoB,EAAgBf,GAAqB,GACpD,WAAU,kDACV,cAAc,MAAMJ,EAAegB,CAAc,GACjD,cAAc,MAAMhB,EAAe,IAAI,EAAA,mCAEtCkB,GAAY,EAAA,QAAO,QAAO,OAAM,QAAM,GACvCD,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,sCACbhB,KAAeC,KAAcR,EAAE,cAAc,CAChD,CACF,IAKAK,MAAqB,iBAErBkB,gBAAAA,EAAA,cAAC,YACC,SAAS,MAAME,EAAgBf,EAAoB,CAAC,GACpD,WAAU,wDAEV,GAAAa,gBAAAA,EAAA,cAACC,KAAY,QAAO,QAAO,OAAM,OAAM,CAAA,mCACtC,QAAMxB,MAAAA,EAAE,gBAAgB,CAAE,CAC7B,IAMDuB,gBAAAA,EAAA,cAAA,UAAA,EACC,SAASZ,GACT,WAAU,sDACV,cAAc,MAAML,EAAee,CAAe,GAClD,cAAc,MAAMf,EAAe,IAAI,EAEvC,GAAAiB,gBAAAA,EAAA,cAACC,GAAY,EAAA,QAAO,QAAO,OAAM,QAAM,GACvCD,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,uCACbhB,GAAAA,KAAeP,EAAE,kBAAkB,CACtC,CACF;AAEJ;"}
1
+ {"version":3,"file":"MsTeamsAuthButton.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.tsx"],"sourcesContent":["import {\n useKnockClient,\n useKnockMsTeamsClient,\n useMsTeamsAuth,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent, useEffect } from \"react\";\n\nimport { openPopupWindow } from \"../../../core/utils\";\nimport \"../../theme.css\";\nimport { MsTeamsIcon } from \"../MsTeamsIcon\";\n\nimport \"./styles.css\";\n\nexport interface MsTeamsAuthButtonProps {\n msTeamsBotId: string;\n redirectUrl?: string;\n onAuthenticationComplete?: (authenticationResp: string) => void;\n}\n\nexport const MsTeamsAuthButton: FunctionComponent<MsTeamsAuthButtonProps> = ({\n msTeamsBotId,\n redirectUrl,\n onAuthenticationComplete,\n}) => {\n const { t } = useTranslations();\n const knock = useKnockClient();\n\n const {\n setConnectionStatus,\n connectionStatus,\n setActionLabel,\n actionLabel,\n errorLabel,\n } = useKnockMsTeamsClient();\n\n const { buildMsTeamsAuthUrl, disconnectFromMsTeams } = useMsTeamsAuth(\n msTeamsBotId,\n redirectUrl,\n );\n\n useEffect(() => {\n const receiveMessage = (event: MessageEvent) => {\n if (event.origin !== knock.host) {\n return;\n }\n\n try {\n if (event.data === \"authComplete\") {\n setConnectionStatus(\"connected\");\n }\n\n if (event.data === \"authFailed\") {\n setConnectionStatus(\"error\");\n }\n\n onAuthenticationComplete?.(event.data);\n } catch (_error) {\n setConnectionStatus(\"error\");\n }\n };\n\n window.addEventListener(\"message\", receiveMessage, false);\n\n // Cleanup the event listener when the component unmounts\n return () => {\n window.removeEventListener(\"message\", receiveMessage);\n };\n }, [knock.host, onAuthenticationComplete, setConnectionStatus]);\n\n const disconnectLabel = t(\"msTeamsDisconnect\") || null;\n const reconnectLabel = t(\"msTeamsReconnect\") || null;\n\n // Loading states\n if (\n connectionStatus === \"connecting\" ||\n connectionStatus === \"disconnecting\"\n ) {\n return (\n <div className=\"rtk-connect__button rtk-connect__button--loading\">\n <MsTeamsIcon height=\"16px\" width=\"16px\" />\n <span>\n {connectionStatus === \"connecting\"\n ? t(\"msTeamsConnecting\")\n : t(\"msTeamsDisconnecting\")}\n </span>\n </div>\n );\n }\n\n // Error state\n if (connectionStatus === \"error\") {\n return (\n <button\n onClick={() => openPopupWindow(buildMsTeamsAuthUrl())}\n className=\"rtk-connect__button rtk-connect__button--error\"\n onMouseEnter={() => setActionLabel(reconnectLabel)}\n onMouseLeave={() => setActionLabel(null)}\n >\n <MsTeamsIcon height=\"16px\" width=\"16px\" />\n <span className=\"rtk-connect__button__text--error\">\n {actionLabel || errorLabel || t(\"msTeamsError\")}\n </span>\n </button>\n );\n }\n\n // Disconnected state\n if (connectionStatus === \"disconnected\") {\n return (\n <button\n onClick={() => openPopupWindow(buildMsTeamsAuthUrl())}\n className=\"rtk-connect__button rtk-connect__button--disconnected\"\n >\n <MsTeamsIcon height=\"16px\" width=\"16px\" />\n <span>{t(\"msTeamsConnect\")}</span>\n </button>\n );\n }\n\n // Connected state\n return (\n <button\n onClick={disconnectFromMsTeams}\n className=\"rtk-connect__button rtk-connect__button--connected\"\n onMouseEnter={() => setActionLabel(disconnectLabel)}\n onMouseLeave={() => setActionLabel(null)}\n >\n <MsTeamsIcon height=\"16px\" width=\"16px\" />\n <span className=\"rtk-connect__button__text--connected\">\n {actionLabel || t(\"msTeamsConnected\")}\n </span>\n </button>\n );\n};\n"],"names":["MsTeamsAuthButton","msTeamsBotId","redirectUrl","onAuthenticationComplete","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockMsTeamsClient","buildMsTeamsAuthUrl","disconnectFromMsTeams","useMsTeamsAuth","useEffect","receiveMessage","event","origin","host","data","addEventListener","removeEventListener","disconnectLabel","reconnectLabel","React","MsTeamsIcon","openPopupWindow"],"mappings":";;;;;;AAoBO,MAAMA,IAA+DA,CAAC;AAAA,EAC3EC,cAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,0BAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAMC,EAAgB,GACxBC,IAAQC,EAAe,GAEvB;AAAA,IACJC,qBAAAA;AAAAA,IACAC,kBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,YAAAA;AAAAA,MACEC,EAAsB,GAEpB;AAAA,IAAEC,qBAAAA;AAAAA,IAAqBC,uBAAAA;AAAAA,EAAAA,IAA0BC,EACrDf,GACAC,CACF;AAEAe,EAAAA,EAAU,MAAM;AACRC,UAAAA,IAAiBA,CAACC,MAAwB;AAC1CA,UAAAA,EAAMC,WAAWd,EAAMe;AAIvB,YAAA;AACEF,UAAAA,EAAMG,SAAS,kBACjBd,EAAoB,WAAW,GAG7BW,EAAMG,SAAS,gBACjBd,EAAoB,OAAO,GAG7BL,KAAAA,QAAAA,EAA2BgB,EAAMG;AAAAA,gBAClB;AACfd,UAAAA,EAAoB,OAAO;AAAA,QAAA;AAAA,IAE/B;AAEOe,kBAAAA,iBAAiB,WAAWL,GAAgB,EAAK,GAGjD,MAAM;AACJM,aAAAA,oBAAoB,WAAWN,CAAc;AAAA,IACtD;AAAA,KACC,CAACZ,EAAMe,MAAMlB,GAA0BK,CAAmB,CAAC;AAExDiB,QAAAA,IAAkBrB,EAAE,mBAAmB,KAAK,MAC5CsB,IAAiBtB,EAAE,kBAAkB,KAAK;AAI9CK,SAAAA,MAAqB,gBACrBA,MAAqB,kBAGnBkB,gBAAAA,EAAA,cAAC,SAAI,WAAU,mDAAA,mCACZC,GAAY,EAAA,QAAO,QAAO,OAAM,OAAM,CAAA,GACtCD,gBAAAA,EAAA,cAAA,QAAA,MAEKvB,EADHK,MAAqB,eAChB,sBACA,sBADmB,CAE3B,CACF,IAKAA,MAAqB,0CAEpB,UACC,EAAA,SAAS,MAAMoB,EAAgBf,GAAqB,GACpD,WAAU,kDACV,cAAc,MAAMJ,EAAegB,CAAc,GACjD,cAAc,MAAMhB,EAAe,IAAI,EAAA,mCAEtCkB,GAAY,EAAA,QAAO,QAAO,OAAM,QAAM,GACvCD,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,sCACbhB,KAAeC,KAAcR,EAAE,cAAc,CAChD,CACF,IAKAK,MAAqB,iBAErBkB,gBAAAA,EAAA,cAAC,YACC,SAAS,MAAME,EAAgBf,EAAoB,CAAC,GACpD,WAAU,wDAEV,GAAAa,gBAAAA,EAAA,cAACC,KAAY,QAAO,QAAO,OAAM,OAAM,CAAA,mCACtC,QAAMxB,MAAAA,EAAE,gBAAgB,CAAE,CAC7B,IAMDuB,gBAAAA,EAAA,cAAA,UAAA,EACC,SAASZ,GACT,WAAU,sDACV,cAAc,MAAML,EAAee,CAAe,GAClD,cAAc,MAAMf,EAAe,IAAI,KAEvCiB,gBAAAA,EAAA,cAACC,GAAY,EAAA,QAAO,QAAO,OAAM,OAAM,CAAA,GACvCD,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAU,uCACbhB,GAAAA,KAAeP,EAAE,kBAAkB,CACtC,CACF;AAEJ;"}
@@ -1 +1 @@
1
- {"version":3,"file":"MsTeamsAuthContainer.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.tsx"],"sourcesContent":["import { useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport \"../../theme.css\";\nimport { MsTeamsIcon } from \"../MsTeamsIcon\";\n\nimport \"./styles.css\";\n\nexport interface MsTeamsAuthContainerProps {\n actionButton: React.ReactElement;\n}\n\nexport const MsTeamsAuthContainer: FunctionComponent<\n MsTeamsAuthContainerProps\n> = ({ actionButton }) => {\n const { t } = useTranslations();\n\n return (\n <div className=\"rtk-auth\">\n <div className=\"rtk-auth__header\">\n <MsTeamsIcon height=\"32px\" width=\"32px\" />\n <div>{actionButton}</div>\n </div>\n <div className=\"rtk-auth__title\">Microsoft Teams</div>\n <div className=\"rtk-auth__description\">\n {t(\"msTeamsConnectContainerDescription\")}\n </div>\n </div>\n );\n};\n"],"names":["MsTeamsAuthContainer","actionButton","t","useTranslations","React","MsTeamsIcon"],"mappings":";;;;;AAYO,MAAMA,IAETA,CAAC;AAAA,EAAEC,cAAAA;AAAa,MAAM;AAClB,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB;AAE9B,SACGC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,8CACZ,OAAI,EAAA,WAAU,mBACb,GAAAA,gBAAAA,EAAA,cAACC,GAAY,EAAA,QAAO,QAAO,OAAM,QAAM,GACvCD,gBAAAA,EAAA,cAAC,OAAKH,MAAAA,CAAa,CACrB,GACCG,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,kBAAkB,GAAA,iBAAe,GAChDA,gBAAAA,EAAA,cAAC,SAAI,WAAU,wBAAA,GACZF,EAAE,oCAAoC,CACzC,CACF;AAEJ;"}
1
+ {"version":3,"file":"MsTeamsAuthContainer.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.tsx"],"sourcesContent":["import { useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport \"../../theme.css\";\nimport { MsTeamsIcon } from \"../MsTeamsIcon\";\n\nimport \"./styles.css\";\n\nexport interface MsTeamsAuthContainerProps {\n actionButton: React.ReactElement;\n}\n\nexport const MsTeamsAuthContainer: FunctionComponent<\n MsTeamsAuthContainerProps\n> = ({ actionButton }) => {\n const { t } = useTranslations();\n\n return (\n <div className=\"rtk-auth\">\n <div className=\"rtk-auth__header\">\n <MsTeamsIcon height=\"32px\" width=\"32px\" />\n <div>{actionButton}</div>\n </div>\n <div className=\"rtk-auth__title\">Microsoft Teams</div>\n <div className=\"rtk-auth__description\">\n {t(\"msTeamsConnectContainerDescription\")}\n </div>\n </div>\n );\n};\n"],"names":["MsTeamsAuthContainer","actionButton","t","useTranslations","React","MsTeamsIcon"],"mappings":";;;;;AAYO,MAAMA,IAETA,CAAC;AAAA,EAAEC,cAAAA;AAAa,MAAM;AAClB,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB;AAE9B,SACGC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,8CACZ,OAAI,EAAA,WAAU,mBACb,GAAAA,gBAAAA,EAAA,cAACC,GAAY,EAAA,QAAO,QAAO,OAAM,QAAM,GACvCD,gBAAAA,EAAA,cAAC,OAAKH,MAAAA,CAAa,CACrB,GACCG,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,kBAAkB,GAAA,iBAAe,GAChDA,gBAAAA,EAAA,cAAC,SAAI,WAAU,2BACZF,EAAE,oCAAoC,CACzC,CACF;AAEJ;"}
@@ -1 +1 @@
1
- {"version":3,"file":"MsTeamsChannelCombobox.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.tsx"],"sourcesContent":["import { MsTeamsTeam } from \"@knocklabs/client\";\nimport {\n MsTeamsChannelQueryOptions,\n MsTeamsTeamQueryOptions,\n RecipientObject,\n useConnectedMsTeamsChannels,\n} from \"@knocklabs/react-core\";\nimport { Icon, Lucide } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { FunctionComponent, useCallback, useState } from \"react\";\n\nimport \"../../theme.css\";\n\nimport { MsTeamsChannelInTeamCombobox } from \"./MsTeamsChannelInTeamCombobox\";\nimport MsTeamsConnectionError from \"./MsTeamsConnectionError\";\nimport { MsTeamsTeamCombobox } from \"./MsTeamsTeamCombobox\";\nimport \"./styles.css\";\n\ninterface Props {\n msTeamsChannelsRecipientObject: RecipientObject;\n teamQueryOptions?: MsTeamsTeamQueryOptions;\n channelQueryOptions?: MsTeamsChannelQueryOptions;\n}\n\nconst MsTeamsChannelCombobox: FunctionComponent<Props> = ({\n msTeamsChannelsRecipientObject,\n teamQueryOptions,\n channelQueryOptions,\n}) => {\n const [selectedTeam, setSelectedTeam] = useState<MsTeamsTeam | null>(null);\n\n const { data: currentConnections } = useConnectedMsTeamsChannels({\n msTeamsChannelsRecipientObject,\n });\n\n const getChannelCount = useCallback(\n (teamId: string) =>\n currentConnections?.filter(\n (connection) =>\n connection.ms_teams_team_id === teamId &&\n !!connection.ms_teams_channel_id,\n ).length ?? 0,\n [currentConnections],\n );\n\n return (\n <Stack className=\"tgph rtk-combobox__grid\" gap=\"3\">\n <Text color=\"gray\" size=\"2\" as=\"div\">\n Team\n </Text>\n <MsTeamsTeamCombobox\n team={selectedTeam}\n onTeamChange={setSelectedTeam}\n getChannelCount={getChannelCount}\n queryOptions={teamQueryOptions}\n />\n <Stack\n alignItems=\"center\"\n gap=\"3\"\n minHeight=\"8\"\n style={{ alignSelf: \"start\" }}\n >\n <Icon color=\"gray\" size=\"1\" icon={Lucide.CornerDownRight} aria-hidden />\n <Text color=\"gray\" size=\"2\" as=\"div\">\n Channels\n </Text>\n </Stack>\n <MsTeamsChannelInTeamCombobox\n teamId={selectedTeam?.id}\n msTeamsChannelsRecipientObject={msTeamsChannelsRecipientObject}\n queryOptions={channelQueryOptions}\n />\n <MsTeamsConnectionError />\n </Stack>\n );\n};\n\nexport default MsTeamsChannelCombobox;\n"],"names":["MsTeamsChannelCombobox","msTeamsChannelsRecipientObject","teamQueryOptions","channelQueryOptions","selectedTeam","setSelectedTeam","useState","data","currentConnections","useConnectedMsTeamsChannels","getChannelCount","useCallback","teamId","filter","connection","ms_teams_team_id","ms_teams_channel_id","length","React","Stack","Text","MsTeamsTeamCombobox","alignSelf","Icon","Lucide","CornerDownRight","MsTeamsChannelInTeamCombobox","id","MsTeamsConnectionError"],"mappings":";;;;;;;;;;AAyBA,MAAMA,IAAmDA,CAAC;AAAA,EACxDC,gCAAAA;AAAAA,EACAC,kBAAAA;AAAAA,EACAC,qBAAAA;AACF,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAA6B,IAAI,GAEnE;AAAA,IAAEC,MAAMC;AAAAA,MAAuBC,EAA4B;AAAA,IAC/DR,gCAAAA;AAAAA,EAAAA,CACD,GAEKS,IAAkBC,EACtB,CAACC,OACCJ,KAAAA,gBAAAA,EAAoBK,OACjBC,OACCA,EAAWC,qBAAqBH,KAChC,CAAC,CAACE,EAAWE,qBACfC,WAAU,GACd,CAACT,CAAkB,CACrB;AAEA,SACGU,gBAAAA,EAAA,cAAAC,GAAA,EAAM,WAAU,2BAA0B,KAAI,IAC7C,GAAAD,gBAAAA,EAAA,cAACE,GAAK,EAAA,OAAM,QAAO,MAAK,KAAI,IAAG,SAAK,MAEpC,GACAF,gBAAAA,EAAA,cAACG,GACC,EAAA,MAAMjB,GACN,cAAcC,GACd,iBAAAK,GACA,cAAcR,GAAiB,GAEhCgB,gBAAAA,EAAA,cAAAC,GAAA,EACC,YAAW,UACX,KAAI,KACJ,WAAU,KACV,OAAO;AAAA,IAAEG,WAAW;AAAA,EAAA,KAEpBJ,gBAAAA,EAAA,cAACK,GAAK,EAAA,OAAM,QAAO,MAAK,KAAI,MAAMC,EAAOC,iBAAiB,eAAW,GAAA,CAAA,GACrEP,gBAAAA,EAAA,cAACE,KAAK,OAAM,QAAO,MAAK,KAAI,IAAG,MAAK,GAAA,UAEpC,CACF,mCACCM,GACC,EAAA,QAAQtB,KAAAA,gBAAAA,EAAcuB,IACtB,gCAAA1B,GACA,cAAcE,GAAoB,GAEpCe,gBAAAA,EAAA,cAACU,OAAsB,CACzB;AAEJ;"}
1
+ {"version":3,"file":"MsTeamsChannelCombobox.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.tsx"],"sourcesContent":["import { MsTeamsTeam } from \"@knocklabs/client\";\nimport {\n MsTeamsChannelQueryOptions,\n MsTeamsTeamQueryOptions,\n RecipientObject,\n useConnectedMsTeamsChannels,\n} from \"@knocklabs/react-core\";\nimport { Icon, Lucide } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { FunctionComponent, useCallback, useState } from \"react\";\n\nimport \"../../theme.css\";\n\nimport { MsTeamsChannelInTeamCombobox } from \"./MsTeamsChannelInTeamCombobox\";\nimport MsTeamsConnectionError from \"./MsTeamsConnectionError\";\nimport { MsTeamsTeamCombobox } from \"./MsTeamsTeamCombobox\";\nimport \"./styles.css\";\n\ninterface Props {\n msTeamsChannelsRecipientObject: RecipientObject;\n teamQueryOptions?: MsTeamsTeamQueryOptions;\n channelQueryOptions?: MsTeamsChannelQueryOptions;\n}\n\nconst MsTeamsChannelCombobox: FunctionComponent<Props> = ({\n msTeamsChannelsRecipientObject,\n teamQueryOptions,\n channelQueryOptions,\n}) => {\n const [selectedTeam, setSelectedTeam] = useState<MsTeamsTeam | null>(null);\n\n const { data: currentConnections } = useConnectedMsTeamsChannels({\n msTeamsChannelsRecipientObject,\n });\n\n const getChannelCount = useCallback(\n (teamId: string) =>\n currentConnections?.filter(\n (connection) =>\n connection.ms_teams_team_id === teamId &&\n !!connection.ms_teams_channel_id,\n ).length ?? 0,\n [currentConnections],\n );\n\n return (\n <Stack className=\"tgph rtk-combobox__grid\" gap=\"3\">\n <Text color=\"gray\" size=\"2\" as=\"div\">\n Team\n </Text>\n <MsTeamsTeamCombobox\n team={selectedTeam}\n onTeamChange={setSelectedTeam}\n getChannelCount={getChannelCount}\n queryOptions={teamQueryOptions}\n />\n <Stack\n alignItems=\"center\"\n gap=\"3\"\n minHeight=\"8\"\n style={{ alignSelf: \"start\" }}\n >\n <Icon color=\"gray\" size=\"1\" icon={Lucide.CornerDownRight} aria-hidden />\n <Text color=\"gray\" size=\"2\" as=\"div\">\n Channels\n </Text>\n </Stack>\n <MsTeamsChannelInTeamCombobox\n teamId={selectedTeam?.id}\n msTeamsChannelsRecipientObject={msTeamsChannelsRecipientObject}\n queryOptions={channelQueryOptions}\n />\n <MsTeamsConnectionError />\n </Stack>\n );\n};\n\nexport default MsTeamsChannelCombobox;\n"],"names":["MsTeamsChannelCombobox","msTeamsChannelsRecipientObject","teamQueryOptions","channelQueryOptions","selectedTeam","setSelectedTeam","useState","data","currentConnections","useConnectedMsTeamsChannels","getChannelCount","useCallback","teamId","filter","connection","ms_teams_team_id","ms_teams_channel_id","length","React","Stack","Text","MsTeamsTeamCombobox","alignSelf","Icon","Lucide","CornerDownRight","MsTeamsChannelInTeamCombobox","id","MsTeamsConnectionError"],"mappings":";;;;;;;;;;AAyBA,MAAMA,IAAmDA,CAAC;AAAA,EACxDC,gCAAAA;AAAAA,EACAC,kBAAAA;AAAAA,EACAC,qBAAAA;AACF,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAA6B,IAAI,GAEnE;AAAA,IAAEC,MAAMC;AAAAA,MAAuBC,EAA4B;AAAA,IAC/DR,gCAAAA;AAAAA,EAAAA,CACD,GAEKS,IAAkBC,EACtB,CAACC,OACCJ,KAAAA,gBAAAA,EAAoBK,OACjBC,OACCA,EAAWC,qBAAqBH,KAChC,CAAC,CAACE,EAAWE,qBACfC,WAAU,GACd,CAACT,CAAkB,CACrB;AAEA,SACGU,gBAAAA,EAAA,cAAAC,GAAA,EAAM,WAAU,2BAA0B,KAAI,IAC7C,GAAAD,gBAAAA,EAAA,cAACE,GAAK,EAAA,OAAM,QAAO,MAAK,KAAI,IAAG,SAAK,MAEpC,GACAF,gBAAAA,EAAA,cAACG,GACC,EAAA,MAAMjB,GACN,cAAcC,GACd,iBAAAK,GACA,cAAcR,GAAiB,GAEhCgB,gBAAAA,EAAA,cAAAC,GAAA,EACC,YAAW,UACX,KAAI,KACJ,WAAU,KACV,OAAO;AAAA,IAAEG,WAAW;AAAA,EAAA,KAEpBJ,gBAAAA,EAAA,cAACK,GAAK,EAAA,OAAM,QAAO,MAAK,KAAI,MAAMC,EAAOC,iBAAiB,eAAW,GAAA,CAAA,GACrEP,gBAAAA,EAAA,cAACE,KAAK,OAAM,QAAO,MAAK,KAAI,IAAG,MAAK,GAAA,UAEpC,CACF,mCACCM,GACC,EAAA,QAAQtB,KAAAA,gBAAAA,EAAcuB,IACtB,gCAAA1B,GACA,cAAcE,EAAoB,CAAA,GAEpCe,gBAAAA,EAAA,cAACU,OAAsB,CACzB;AAEJ;"}
@@ -1,4 +1,4 @@
1
- import n, { useMemo as c, useCallback as f } from "react";
1
+ import n, { useMemo as c, useCallback as b } from "react";
2
2
  import { useKnockMsTeamsClient as g, useMsTeamsChannels as x, useConnectedMsTeamsChannels as M } from "@knocklabs/react-core";
3
3
  import { Combobox as t } from "@telegraph/combobox";
4
4
  import { Box as y } from "@telegraph/layout";
@@ -19,17 +19,20 @@ const V = ({
19
19
  }), p = c(() => S(o), [o]), {
20
20
  data: a,
21
21
  updateConnectedChannels: u,
22
- error: m
22
+ error: l
23
23
  } = M({
24
24
  msTeamsChannelsRecipientObject: h
25
- }), C = c(() => s === "disconnected" || s === "error" || !!m, [s, m]), E = c(() => s === "connecting" || s === "disconnecting", [s]), i = f((e) => o.some((d) => d.id === e), [o]), T = c(() => a == null ? void 0 : a.filter((e) => e.ms_teams_channel_id && i(e.ms_teams_channel_id)).map((e) => e.ms_teams_channel_id), [a, i]);
25
+ }), C = c(() => s === "disconnected" || s === "error" || !!l, [s, l]), E = c(() => s === "connecting" || s === "disconnecting", [s]), i = b((e) => o.some((d) => d.id === e), [o]), T = c(() => a == null ? void 0 : a.filter((e) => e.ms_teams_channel_id && i(e.ms_teams_channel_id)).map((e) => e.ms_teams_channel_id), [a, i]);
26
26
  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(y, { w: "full", minW: "0" }, /* @__PURE__ */ n.createElement(t.Root, { value: T, onValueChange: (e) => {
27
- const d = e.map((l) => ({
27
+ const d = e.map((m) => ({
28
28
  ms_teams_team_id: r,
29
- ms_teams_channel_id: l
30
- })), b = [...(a == null ? void 0 : a.filter((l) => !l.ms_teams_channel_id || !i(l.ms_teams_channel_id))) ?? [], ...d];
31
- u(b).catch(console.error);
32
- }, placeholder: "Select channels", disabled: r === void 0 || C || E || o.length === 0, closeOnSelect: !1, layout: "wrap" }, /* @__PURE__ */ n.createElement(t.Trigger, null), /* @__PURE__ */ n.createElement(t.Content, null, /* @__PURE__ */ n.createElement(t.Search, { className: "rtk-combobox__search" }), /* @__PURE__ */ n.createElement(t.Options, { maxHeight: "36" }, p.map((e) => /* @__PURE__ */ n.createElement(t.Option, { key: e.id, value: e.id }, e.displayName))), /* @__PURE__ */ n.createElement(t.Empty, null)))), !!m && /* @__PURE__ */ n.createElement(O, { message: m }));
29
+ ms_teams_channel_id: m
30
+ })), f = [...(a == null ? void 0 : a.filter((m) => !m.ms_teams_channel_id || !i(m.ms_teams_channel_id))) ?? [], ...d];
31
+ u(f).catch(console.error);
32
+ }, placeholder: "Select channels", disabled: r === void 0 || C || E || o.length === 0, closeOnSelect: !1, layout: "wrap", modal: (
33
+ // Modal comboboxes cause page layout to shift when body has padding. See KNO-7854.
34
+ !1
35
+ ) }, /* @__PURE__ */ n.createElement(t.Trigger, null), /* @__PURE__ */ n.createElement(t.Content, null, /* @__PURE__ */ n.createElement(t.Search, { className: "rtk-combobox__search" }), /* @__PURE__ */ n.createElement(t.Options, { maxHeight: "36" }, p.map((e) => /* @__PURE__ */ n.createElement(t.Option, { key: e.id, value: e.id }, e.displayName))), /* @__PURE__ */ n.createElement(t.Empty, null)))), !!l && /* @__PURE__ */ n.createElement(O, { message: l }));
33
36
  };
34
37
  export {
35
38
  V as MsTeamsChannelInTeamCombobox
@@ -1 +1 @@
1
- {"version":3,"file":"MsTeamsChannelInTeamCombobox.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.tsx"],"sourcesContent":["import { MsTeamsChannelConnection } from \"@knocklabs/client\";\nimport {\n MsTeamsChannelQueryOptions,\n RecipientObject,\n useConnectedMsTeamsChannels,\n useKnockMsTeamsClient,\n useMsTeamsChannels,\n} from \"@knocklabs/react-core\";\nimport { Combobox } from \"@telegraph/combobox\";\nimport { Box } from \"@telegraph/layout\";\nimport { FunctionComponent, useCallback, useMemo } from \"react\";\n\nimport { sortByDisplayName } from \"../../utils\";\n\nimport MsTeamsErrorMessage from \"./MsTeamsErrorMessage\";\n\ninterface MsTeamsChannelInTeamComboboxProps {\n teamId?: string;\n msTeamsChannelsRecipientObject: RecipientObject;\n queryOptions?: MsTeamsChannelQueryOptions;\n}\n\nexport const MsTeamsChannelInTeamCombobox: FunctionComponent<\n MsTeamsChannelInTeamComboboxProps\n> = ({ teamId, msTeamsChannelsRecipientObject, queryOptions }) => {\n const { connectionStatus } = useKnockMsTeamsClient();\n\n const { data: availableChannels = [] } = useMsTeamsChannels({\n teamId,\n queryOptions,\n });\n\n const sortedChannels = useMemo(\n () => sortByDisplayName(availableChannels),\n [availableChannels],\n );\n\n const {\n data: currentConnections,\n updateConnectedChannels,\n error: connectedChannelsError,\n } = useConnectedMsTeamsChannels({ msTeamsChannelsRecipientObject });\n\n const inErrorState = useMemo(\n () =>\n connectionStatus === \"disconnected\" ||\n connectionStatus === \"error\" ||\n !!connectedChannelsError,\n [connectionStatus, connectedChannelsError],\n );\n\n const inLoadingState = useMemo(\n () =>\n connectionStatus === \"connecting\" || connectionStatus === \"disconnecting\",\n [connectionStatus],\n );\n\n const isChannelInThisTeam = useCallback(\n (channelId: string) =>\n availableChannels.some((channel) => channel.id === channelId),\n [availableChannels],\n );\n\n const comboboxValue = useMemo(\n () =>\n currentConnections\n ?.filter(\n (connection) =>\n connection.ms_teams_channel_id &&\n isChannelInThisTeam(connection.ms_teams_channel_id),\n )\n .map((connection) => connection.ms_teams_channel_id),\n [currentConnections, isChannelInThisTeam],\n );\n\n return (\n <>\n <Box w=\"full\" minW=\"0\">\n <Combobox.Root\n value={comboboxValue}\n onValueChange={(channelIds) => {\n const connectedChannelsInThisTeam =\n channelIds.map<MsTeamsChannelConnection>((channelId) => ({\n ms_teams_team_id: teamId,\n ms_teams_channel_id: channelId,\n }));\n const connectedChannelsInOtherTeams =\n currentConnections?.filter(\n (connection) =>\n !connection.ms_teams_channel_id ||\n !isChannelInThisTeam(connection.ms_teams_channel_id),\n ) ?? [];\n\n const updatedConnections = [\n ...connectedChannelsInOtherTeams,\n ...connectedChannelsInThisTeam,\n ];\n\n updateConnectedChannels(updatedConnections).catch(console.error);\n }}\n placeholder=\"Select channels\"\n disabled={\n teamId === undefined ||\n inErrorState ||\n inLoadingState ||\n availableChannels.length === 0\n }\n closeOnSelect={false}\n layout=\"wrap\"\n >\n <Combobox.Trigger />\n <Combobox.Content>\n <Combobox.Search className=\"rtk-combobox__search\" />\n <Combobox.Options maxHeight=\"36\">\n {sortedChannels.map((channel) => (\n <Combobox.Option key={channel.id} value={channel.id}>\n {channel.displayName}\n </Combobox.Option>\n ))}\n </Combobox.Options>\n <Combobox.Empty />\n </Combobox.Content>\n </Combobox.Root>\n </Box>\n {!!connectedChannelsError && (\n <MsTeamsErrorMessage message={connectedChannelsError} />\n )}\n </>\n );\n};\n"],"names":["MsTeamsChannelInTeamCombobox","teamId","msTeamsChannelsRecipientObject","queryOptions","connectionStatus","useKnockMsTeamsClient","data","availableChannels","useMsTeamsChannels","sortedChannels","useMemo","sortByDisplayName","currentConnections","updateConnectedChannels","error","connectedChannelsError","useConnectedMsTeamsChannels","inErrorState","inLoadingState","isChannelInThisTeam","useCallback","channelId","some","channel","id","comboboxValue","filter","connection","ms_teams_channel_id","map","React","Box","Combobox","channelIds","connectedChannelsInThisTeam","ms_teams_team_id","updatedConnections","catch","console","undefined","length","displayName","MsTeamsErrorMessage"],"mappings":";;;;;;AAsBO,MAAMA,IAETA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,gCAAAA;AAAAA,EAAgCC,cAAAA;AAAa,MAAM;AAC1D,QAAA;AAAA,IAAEC,kBAAAA;AAAAA,MAAqBC,EAAsB,GAE7C;AAAA,IAAEC,MAAMC,IAAoB,CAAA;AAAA,MAAOC,EAAmB;AAAA,IAC1DP,QAAAA;AAAAA,IACAE,cAAAA;AAAAA,EAAAA,CACD,GAEKM,IAAiBC,EACrB,MAAMC,EAAkBJ,CAAiB,GACzC,CAACA,CAAiB,CACpB,GAEM;AAAA,IACJD,MAAMM;AAAAA,IACNC,yBAAAA;AAAAA,IACAC,OAAOC;AAAAA,MACLC,EAA4B;AAAA,IAAEd,gCAAAA;AAAAA,EAAAA,CAAgC,GAE5De,IAAeP,EACnB,MACEN,MAAqB,kBACrBA,MAAqB,WACrB,CAAC,CAACW,GACJ,CAACX,GAAkBW,CAAsB,CAC3C,GAEMG,IAAiBR,EACrB,MACEN,MAAqB,gBAAgBA,MAAqB,iBAC5D,CAACA,CAAgB,CACnB,GAEMe,IAAsBC,EAC1B,CAACC,MACCd,EAAkBe,KAAMC,CAAYA,MAAAA,EAAQC,OAAOH,CAAS,GAC9D,CAACd,CAAiB,CACpB,GAEMkB,IAAgBf,EACpB,MACEE,KAAAA,gBAAAA,EACIc,OACCC,CACCA,MAAAA,EAAWC,uBACXT,EAAoBQ,EAAWC,mBAAmB,GAErDC,IAAKF,CAAeA,MAAAA,EAAWC,sBACpC,CAAChB,GAAoBO,CAAmB,CAC1C;AAEA,SAEIW,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA,cAACC,GAAI,EAAA,GAAE,QAAO,MAAK,OAChBD,gBAAAA,EAAA,cAAAE,EAAS,MAAT,EACC,OAAOP,GACP,eAAgBQ,CAAeA,MAAA;AACvBC,UAAAA,IACJD,EAAWJ,IAA+BR,CAAeA,OAAA;AAAA,MACvDc,kBAAkBlC;AAAAA,MAClB2B,qBAAqBP;AAAAA,IACrB,EAAA,GAQEe,IAAqB,CACzB,IAPAxB,KAAAA,gBAAAA,EAAoBc,OACjBC,CAAAA,MACC,CAACA,EAAWC,uBACZ,CAACT,EAAoBQ,EAAWC,mBAAmB,OAClD,CAAA,GAIL,GAAGM,CAA2B;AAGhCrB,IAAAA,EAAwBuB,CAAkB,EAAEC,MAAMC,QAAQxB,KAAK;AAAA,EAAA,GAEjE,aAAY,mBACZ,UACEb,MAAWsC,UACXtB,KACAC,KACAX,EAAkBiC,WAAW,GAE/B,eAAe,IACf,QAAO,OAEP,GAAAV,gBAAAA,EAAA,cAACE,EAAS,SAAT,IAAgB,GAChBF,gBAAAA,EAAA,cAAAE,EAAS,SAAT,MACCF,gBAAAA,EAAA,cAACE,EAAS,QAAT,EAAgB,WAAU,uBAAsB,CAAA,GACjDF,gBAAAA,EAAA,cAACE,EAAS,SAAT,EAAiB,WAAU,KAAA,GACzBvB,EAAeoB,IAAKN,CACnBA,MAAAO,gBAAAA,EAAA,cAACE,EAAS,QAAT,EAAgB,KAAKT,EAAQC,IAAI,OAAOD,EAAQC,GAAAA,GAC9CD,EAAQkB,WACX,CACD,CACH,GACCX,gBAAAA,EAAA,cAAAE,EAAS,OAAT,IAAc,CACjB,CACF,CACF,GACC,CAAC,CAACjB,KACDe,gBAAAA,EAAA,cAACY,GAAoB,EAAA,SAAS3B,EAC/B,CAAA,CACH;AAEJ;"}
1
+ {"version":3,"file":"MsTeamsChannelInTeamCombobox.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.tsx"],"sourcesContent":["import { MsTeamsChannelConnection } from \"@knocklabs/client\";\nimport {\n MsTeamsChannelQueryOptions,\n RecipientObject,\n useConnectedMsTeamsChannels,\n useKnockMsTeamsClient,\n useMsTeamsChannels,\n} from \"@knocklabs/react-core\";\nimport { Combobox } from \"@telegraph/combobox\";\nimport { Box } from \"@telegraph/layout\";\nimport { FunctionComponent, useCallback, useMemo } from \"react\";\n\nimport { sortByDisplayName } from \"../../utils\";\n\nimport MsTeamsErrorMessage from \"./MsTeamsErrorMessage\";\n\ninterface MsTeamsChannelInTeamComboboxProps {\n teamId?: string;\n msTeamsChannelsRecipientObject: RecipientObject;\n queryOptions?: MsTeamsChannelQueryOptions;\n}\n\nexport const MsTeamsChannelInTeamCombobox: FunctionComponent<\n MsTeamsChannelInTeamComboboxProps\n> = ({ teamId, msTeamsChannelsRecipientObject, queryOptions }) => {\n const { connectionStatus } = useKnockMsTeamsClient();\n\n const { data: availableChannels = [] } = useMsTeamsChannels({\n teamId,\n queryOptions,\n });\n\n const sortedChannels = useMemo(\n () => sortByDisplayName(availableChannels),\n [availableChannels],\n );\n\n const {\n data: currentConnections,\n updateConnectedChannels,\n error: connectedChannelsError,\n } = useConnectedMsTeamsChannels({ msTeamsChannelsRecipientObject });\n\n const inErrorState = useMemo(\n () =>\n connectionStatus === \"disconnected\" ||\n connectionStatus === \"error\" ||\n !!connectedChannelsError,\n [connectionStatus, connectedChannelsError],\n );\n\n const inLoadingState = useMemo(\n () =>\n connectionStatus === \"connecting\" || connectionStatus === \"disconnecting\",\n [connectionStatus],\n );\n\n const isChannelInThisTeam = useCallback(\n (channelId: string) =>\n availableChannels.some((channel) => channel.id === channelId),\n [availableChannels],\n );\n\n const comboboxValue = useMemo(\n () =>\n currentConnections\n ?.filter(\n (connection) =>\n connection.ms_teams_channel_id &&\n isChannelInThisTeam(connection.ms_teams_channel_id),\n )\n .map((connection) => connection.ms_teams_channel_id),\n [currentConnections, isChannelInThisTeam],\n );\n\n return (\n <>\n <Box w=\"full\" minW=\"0\">\n <Combobox.Root\n value={comboboxValue}\n onValueChange={(channelIds) => {\n const connectedChannelsInThisTeam =\n channelIds.map<MsTeamsChannelConnection>((channelId) => ({\n ms_teams_team_id: teamId,\n ms_teams_channel_id: channelId,\n }));\n const connectedChannelsInOtherTeams =\n currentConnections?.filter(\n (connection) =>\n !connection.ms_teams_channel_id ||\n !isChannelInThisTeam(connection.ms_teams_channel_id),\n ) ?? [];\n\n const updatedConnections = [\n ...connectedChannelsInOtherTeams,\n ...connectedChannelsInThisTeam,\n ];\n\n updateConnectedChannels(updatedConnections).catch(console.error);\n }}\n placeholder=\"Select channels\"\n disabled={\n teamId === undefined ||\n inErrorState ||\n inLoadingState ||\n availableChannels.length === 0\n }\n closeOnSelect={false}\n layout=\"wrap\"\n modal={\n // Modal comboboxes cause page layout to shift when body has padding. See KNO-7854.\n false\n }\n >\n <Combobox.Trigger />\n <Combobox.Content>\n <Combobox.Search className=\"rtk-combobox__search\" />\n <Combobox.Options maxHeight=\"36\">\n {sortedChannels.map((channel) => (\n <Combobox.Option key={channel.id} value={channel.id}>\n {channel.displayName}\n </Combobox.Option>\n ))}\n </Combobox.Options>\n <Combobox.Empty />\n </Combobox.Content>\n </Combobox.Root>\n </Box>\n {!!connectedChannelsError && (\n <MsTeamsErrorMessage message={connectedChannelsError} />\n )}\n </>\n );\n};\n"],"names":["MsTeamsChannelInTeamCombobox","teamId","msTeamsChannelsRecipientObject","queryOptions","connectionStatus","useKnockMsTeamsClient","data","availableChannels","useMsTeamsChannels","sortedChannels","useMemo","sortByDisplayName","currentConnections","updateConnectedChannels","error","connectedChannelsError","useConnectedMsTeamsChannels","inErrorState","inLoadingState","isChannelInThisTeam","useCallback","channelId","some","channel","id","comboboxValue","filter","connection","ms_teams_channel_id","map","React","Box","Combobox","channelIds","connectedChannelsInThisTeam","ms_teams_team_id","updatedConnections","catch","console","undefined","length","displayName","MsTeamsErrorMessage"],"mappings":";;;;;;AAsBO,MAAMA,IAETA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,gCAAAA;AAAAA,EAAgCC,cAAAA;AAAa,MAAM;AAC1D,QAAA;AAAA,IAAEC,kBAAAA;AAAAA,MAAqBC,EAAsB,GAE7C;AAAA,IAAEC,MAAMC,IAAoB,CAAA;AAAA,MAAOC,EAAmB;AAAA,IAC1DP,QAAAA;AAAAA,IACAE,cAAAA;AAAAA,EAAAA,CACD,GAEKM,IAAiBC,EACrB,MAAMC,EAAkBJ,CAAiB,GACzC,CAACA,CAAiB,CACpB,GAEM;AAAA,IACJD,MAAMM;AAAAA,IACNC,yBAAAA;AAAAA,IACAC,OAAOC;AAAAA,MACLC,EAA4B;AAAA,IAAEd,gCAAAA;AAAAA,EAAAA,CAAgC,GAE5De,IAAeP,EACnB,MACEN,MAAqB,kBACrBA,MAAqB,WACrB,CAAC,CAACW,GACJ,CAACX,GAAkBW,CAAsB,CAC3C,GAEMG,IAAiBR,EACrB,MACEN,MAAqB,gBAAgBA,MAAqB,iBAC5D,CAACA,CAAgB,CACnB,GAEMe,IAAsBC,EAC1B,CAACC,MACCd,EAAkBe,KAAMC,CAAYA,MAAAA,EAAQC,OAAOH,CAAS,GAC9D,CAACd,CAAiB,CACpB,GAEMkB,IAAgBf,EACpB,MACEE,KAAAA,gBAAAA,EACIc,OACCC,CACCA,MAAAA,EAAWC,uBACXT,EAAoBQ,EAAWC,mBAAmB,GAErDC,IAAKF,CAAeA,MAAAA,EAAWC,sBACpC,CAAChB,GAAoBO,CAAmB,CAC1C;AAEA,SAEIW,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA,cAACC,GAAI,EAAA,GAAE,QAAO,MAAK,OAChBD,gBAAAA,EAAA,cAAAE,EAAS,MAAT,EACC,OAAOP,GACP,eAAgBQ,CAAeA,MAAA;AACvBC,UAAAA,IACJD,EAAWJ,IAA+BR,CAAeA,OAAA;AAAA,MACvDc,kBAAkBlC;AAAAA,MAClB2B,qBAAqBP;AAAAA,IAAAA,EACrB,GAQEe,IAAqB,CACzB,IAPAxB,KAAAA,gBAAAA,EAAoBc,OACjBC,CAAAA,MACC,CAACA,EAAWC,uBACZ,CAACT,EAAoBQ,EAAWC,mBAAmB,OAClD,CAAE,GAIP,GAAGM,CAA2B;AAGhCrB,IAAAA,EAAwBuB,CAAkB,EAAEC,MAAMC,QAAQxB,KAAK;AAAA,EAAA,GAEjE,aAAY,mBACZ,UACEb,MAAWsC,UACXtB,KACAC,KACAX,EAAkBiC,WAAW,GAE/B,eAAe,IACf,QAAO,QACP;AAAA;AAAA,IAEE;AAAA,IAGF,GAAAV,gBAAAA,EAAA,cAACE,EAAS,SAAT,IAAgB,mCAChBA,EAAS,SAAT,MACCF,gBAAAA,EAAA,cAACE,EAAS,QAAT,EAAgB,WAAU,uBAAsB,CAAA,GACjDF,gBAAAA,EAAA,cAACE,EAAS,SAAT,EAAiB,WAAU,KACzBvB,GAAAA,EAAeoB,IAAKN,CAAAA,MAClBO,gBAAAA,EAAA,cAAAE,EAAS,QAAT,EAAgB,KAAKT,EAAQC,IAAI,OAAOD,EAAQC,GAC9CD,GAAAA,EAAQkB,WACX,CACD,CACH,GACCX,gBAAAA,EAAA,cAAAE,EAAS,OAAT,IAAc,CACjB,CACF,CACF,GACC,CAAC,CAACjB,KACAe,gBAAAA,EAAA,cAAAY,GAAA,EAAoB,SAAS3B,EAC/B,CAAA,CACH;AAEJ;"}
@@ -1,29 +1,32 @@
1
1
  import e, { useMemo as c } from "react";
2
- import { useKnockMsTeamsClient as f, useMsTeamsTeams as T } from "@knocklabs/react-core";
3
- import { Combobox as n } from "@telegraph/combobox";
2
+ import { useKnockMsTeamsClient as E, useMsTeamsTeams as T } from "@knocklabs/react-core";
3
+ import { Combobox as o } from "@telegraph/combobox";
4
4
  import { Box as b } from "@telegraph/layout";
5
5
  import { sortByDisplayName as h } from "../../utils.mjs";
6
6
  const N = ({
7
- team: r,
7
+ team: s,
8
8
  onTeamChange: m,
9
9
  getChannelCount: d,
10
10
  queryOptions: u
11
11
  }) => {
12
12
  const {
13
- connectionStatus: o
14
- } = f(), {
13
+ connectionStatus: n
14
+ } = E(), {
15
15
  data: i,
16
16
  isLoading: l
17
17
  } = T({
18
18
  queryOptions: u
19
- }), s = c(() => h(i), [i]), p = c(() => o === "disconnected" || o === "error", [o]), g = c(() => o === "connecting" || o === "disconnecting" || l, [o, l]);
20
- return /* @__PURE__ */ e.createElement(b, { w: "full", minW: "0" }, /* @__PURE__ */ e.createElement(n.Root, { value: r == null ? void 0 : r.id, onValueChange: (t) => {
21
- const a = s.find((E) => E.id === t);
19
+ }), r = c(() => h(i), [i]), p = c(() => n === "disconnected" || n === "error", [n]), f = c(() => n === "connecting" || n === "disconnecting" || l, [n, l]);
20
+ return /* @__PURE__ */ e.createElement(b, { w: "full", minW: "0" }, /* @__PURE__ */ e.createElement(o.Root, { value: s == null ? void 0 : s.id, onValueChange: (t) => {
21
+ const a = r.find((g) => g.id === t);
22
22
  a && m(a);
23
- }, placeholder: "Select team", disabled: p || g || s.length === 0 }, /* @__PURE__ */ e.createElement(n.Trigger, null), /* @__PURE__ */ e.createElement(n.Content, null, /* @__PURE__ */ e.createElement(n.Search, { className: "rtk-combobox__search" }), /* @__PURE__ */ e.createElement(n.Options, { maxHeight: "36" }, s.map((t) => {
23
+ }, placeholder: "Select team", disabled: p || f || r.length === 0, modal: (
24
+ // Modal comboboxes cause page layout to shift when body has padding. See KNO-7854.
25
+ !1
26
+ ) }, /* @__PURE__ */ e.createElement(o.Trigger, null), /* @__PURE__ */ e.createElement(o.Content, null, /* @__PURE__ */ e.createElement(o.Search, { className: "rtk-combobox__search" }), /* @__PURE__ */ e.createElement(o.Options, { maxHeight: "36" }, r.map((t) => {
24
27
  const a = d(t.id);
25
- return /* @__PURE__ */ e.createElement(n.Option, { key: t.id, value: t.id }, a > 0 ? `${t.displayName} (${a})` : t.displayName);
26
- })), /* @__PURE__ */ e.createElement(n.Empty, null))));
28
+ return /* @__PURE__ */ e.createElement(o.Option, { key: t.id, value: t.id }, a > 0 ? `${t.displayName} (${a})` : t.displayName);
29
+ })), /* @__PURE__ */ e.createElement(o.Empty, null))));
27
30
  };
28
31
  export {
29
32
  N as MsTeamsTeamCombobox
@@ -1 +1 @@
1
- {"version":3,"file":"MsTeamsTeamCombobox.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.tsx"],"sourcesContent":["import { MsTeamsTeam } from \"@knocklabs/client\";\nimport {\n MsTeamsTeamQueryOptions,\n useKnockMsTeamsClient,\n useMsTeamsTeams,\n} from \"@knocklabs/react-core\";\nimport { Combobox } from \"@telegraph/combobox\";\nimport { Box } from \"@telegraph/layout\";\nimport { FunctionComponent, useMemo } from \"react\";\n\nimport { sortByDisplayName } from \"../../utils\";\n\ninterface MsTeamsTeamComboboxProps {\n team: MsTeamsTeam | null;\n onTeamChange: (team: MsTeamsTeam) => void;\n getChannelCount: (teamId: string) => number;\n queryOptions?: MsTeamsTeamQueryOptions;\n}\n\nexport const MsTeamsTeamCombobox: FunctionComponent<\n MsTeamsTeamComboboxProps\n> = ({ team, onTeamChange, getChannelCount, queryOptions }) => {\n const { connectionStatus } = useKnockMsTeamsClient();\n\n const { data: teams, isLoading: isLoadingTeams } = useMsTeamsTeams({\n queryOptions,\n });\n\n const sortedTeams = useMemo(() => sortByDisplayName(teams), [teams]);\n\n const inErrorState = useMemo(\n () => connectionStatus === \"disconnected\" || connectionStatus === \"error\",\n [connectionStatus],\n );\n\n const inLoadingState = useMemo(\n () =>\n connectionStatus === \"connecting\" ||\n connectionStatus === \"disconnecting\" ||\n isLoadingTeams,\n [connectionStatus, isLoadingTeams],\n );\n\n return (\n <Box w=\"full\" minW=\"0\">\n <Combobox.Root\n value={team?.id}\n onValueChange={(teamId) => {\n const selectedTeam = sortedTeams.find((team) => team.id === teamId);\n if (selectedTeam) {\n onTeamChange(selectedTeam);\n }\n }}\n placeholder=\"Select team\"\n disabled={inErrorState || inLoadingState || sortedTeams.length === 0}\n >\n <Combobox.Trigger />\n <Combobox.Content>\n <Combobox.Search className=\"rtk-combobox__search\" />\n <Combobox.Options maxHeight=\"36\">\n {sortedTeams.map((team) => {\n const channelCount = getChannelCount(team.id);\n return (\n <Combobox.Option key={team.id} value={team.id}>\n {channelCount > 0\n ? `${team.displayName} (${channelCount})`\n : team.displayName}\n </Combobox.Option>\n );\n })}\n </Combobox.Options>\n <Combobox.Empty />\n </Combobox.Content>\n </Combobox.Root>\n </Box>\n );\n};\n"],"names":["MsTeamsTeamCombobox","team","onTeamChange","getChannelCount","queryOptions","connectionStatus","useKnockMsTeamsClient","data","teams","isLoading","isLoadingTeams","useMsTeamsTeams","sortedTeams","useMemo","sortByDisplayName","inErrorState","inLoadingState","React","Box","Combobox","id","teamId","selectedTeam","find","length","map","channelCount","displayName"],"mappings":";;;;;AAmBO,MAAMA,IAETA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,cAAAA;AAAAA,EAAcC,iBAAAA;AAAAA,EAAiBC,cAAAA;AAAa,MAAM;AACvD,QAAA;AAAA,IAAEC,kBAAAA;AAAAA,MAAqBC,EAAsB,GAE7C;AAAA,IAAEC,MAAMC;AAAAA,IAAOC,WAAWC;AAAAA,MAAmBC,EAAgB;AAAA,IACjEP,cAAAA;AAAAA,EAAAA,CACD,GAEKQ,IAAcC,EAAQ,MAAMC,EAAkBN,CAAK,GAAG,CAACA,CAAK,CAAC,GAE7DO,IAAeF,EACnB,MAAMR,MAAqB,kBAAkBA,MAAqB,SAClE,CAACA,CAAgB,CACnB,GAEMW,IAAiBH,EACrB,MACER,MAAqB,gBACrBA,MAAqB,mBACrBK,GACF,CAACL,GAAkBK,CAAc,CACnC;AAEA,SACGO,gBAAAA,EAAA,cAAAC,GAAA,EAAI,GAAE,QAAO,MAAK,OACjBD,gBAAAA,EAAA,cAACE,EAAS,MAAT,EACC,OAAOlB,KAAAA,gBAAAA,EAAMmB,IACb,eAAgBC,CAAWA,MAAA;AACzB,UAAMC,IAAeV,EAAYW,KAAMtB,CAAAA,MAASA,EAAKmB,OAAOC,CAAM;AAClE,IAAIC,KACFpB,EAAaoB,CAAY;AAAA,EAC3B,GAEF,aAAY,eACZ,UAAUP,KAAgBC,KAAkBJ,EAAYY,WAAW,EAAA,mCAElEL,EAAS,SAAT,IAAgB,mCAChBA,EAAS,SAAT,MACCF,gBAAAA,EAAA,cAACE,EAAS,QAAT,EAAgB,WAAU,uBAAsB,CAAA,GACjDF,gBAAAA,EAAA,cAACE,EAAS,SAAT,EAAiB,WAAU,KAAA,GACzBP,EAAYa,IAAKxB,CAAAA,MAAS;AACnByB,UAAAA,IAAevB,EAAgBF,EAAKmB,EAAE;AAC5C,2CACGD,EAAS,QAAT,EAAgB,KAAKlB,EAAKmB,IAAI,OAAOnB,EAAKmB,MACxCM,IAAe,IACZ,GAAGzB,EAAK0B,WAAW,KAAKD,CAAY,MACpCzB,EAAK0B,WACX;AAAA,EAAA,CAEH,CACH,GACAV,gBAAAA,EAAA,cAACE,EAAS,OAAT,IAAc,CACjB,CACF,CACF;AAEJ;"}
1
+ {"version":3,"file":"MsTeamsTeamCombobox.mjs","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.tsx"],"sourcesContent":["import { MsTeamsTeam } from \"@knocklabs/client\";\nimport {\n MsTeamsTeamQueryOptions,\n useKnockMsTeamsClient,\n useMsTeamsTeams,\n} from \"@knocklabs/react-core\";\nimport { Combobox } from \"@telegraph/combobox\";\nimport { Box } from \"@telegraph/layout\";\nimport { FunctionComponent, useMemo } from \"react\";\n\nimport { sortByDisplayName } from \"../../utils\";\n\ninterface MsTeamsTeamComboboxProps {\n team: MsTeamsTeam | null;\n onTeamChange: (team: MsTeamsTeam) => void;\n getChannelCount: (teamId: string) => number;\n queryOptions?: MsTeamsTeamQueryOptions;\n}\n\nexport const MsTeamsTeamCombobox: FunctionComponent<\n MsTeamsTeamComboboxProps\n> = ({ team, onTeamChange, getChannelCount, queryOptions }) => {\n const { connectionStatus } = useKnockMsTeamsClient();\n\n const { data: teams, isLoading: isLoadingTeams } = useMsTeamsTeams({\n queryOptions,\n });\n\n const sortedTeams = useMemo(() => sortByDisplayName(teams), [teams]);\n\n const inErrorState = useMemo(\n () => connectionStatus === \"disconnected\" || connectionStatus === \"error\",\n [connectionStatus],\n );\n\n const inLoadingState = useMemo(\n () =>\n connectionStatus === \"connecting\" ||\n connectionStatus === \"disconnecting\" ||\n isLoadingTeams,\n [connectionStatus, isLoadingTeams],\n );\n\n return (\n <Box w=\"full\" minW=\"0\">\n <Combobox.Root\n value={team?.id}\n onValueChange={(teamId) => {\n const selectedTeam = sortedTeams.find((team) => team.id === teamId);\n if (selectedTeam) {\n onTeamChange(selectedTeam);\n }\n }}\n placeholder=\"Select team\"\n disabled={inErrorState || inLoadingState || sortedTeams.length === 0}\n modal={\n // Modal comboboxes cause page layout to shift when body has padding. See KNO-7854.\n false\n }\n >\n <Combobox.Trigger />\n <Combobox.Content>\n <Combobox.Search className=\"rtk-combobox__search\" />\n <Combobox.Options maxHeight=\"36\">\n {sortedTeams.map((team) => {\n const channelCount = getChannelCount(team.id);\n return (\n <Combobox.Option key={team.id} value={team.id}>\n {channelCount > 0\n ? `${team.displayName} (${channelCount})`\n : team.displayName}\n </Combobox.Option>\n );\n })}\n </Combobox.Options>\n <Combobox.Empty />\n </Combobox.Content>\n </Combobox.Root>\n </Box>\n );\n};\n"],"names":["MsTeamsTeamCombobox","team","onTeamChange","getChannelCount","queryOptions","connectionStatus","useKnockMsTeamsClient","data","teams","isLoading","isLoadingTeams","useMsTeamsTeams","sortedTeams","useMemo","sortByDisplayName","inErrorState","inLoadingState","React","Box","Combobox","id","teamId","selectedTeam","find","length","map","channelCount","displayName"],"mappings":";;;;;AAmBO,MAAMA,IAETA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,cAAAA;AAAAA,EAAcC,iBAAAA;AAAAA,EAAiBC,cAAAA;AAAa,MAAM;AACvD,QAAA;AAAA,IAAEC,kBAAAA;AAAAA,MAAqBC,EAAsB,GAE7C;AAAA,IAAEC,MAAMC;AAAAA,IAAOC,WAAWC;AAAAA,MAAmBC,EAAgB;AAAA,IACjEP,cAAAA;AAAAA,EAAAA,CACD,GAEKQ,IAAcC,EAAQ,MAAMC,EAAkBN,CAAK,GAAG,CAACA,CAAK,CAAC,GAE7DO,IAAeF,EACnB,MAAMR,MAAqB,kBAAkBA,MAAqB,SAClE,CAACA,CAAgB,CACnB,GAEMW,IAAiBH,EACrB,MACER,MAAqB,gBACrBA,MAAqB,mBACrBK,GACF,CAACL,GAAkBK,CAAc,CACnC;AAEA,SACGO,gBAAAA,EAAA,cAAAC,GAAA,EAAI,GAAE,QAAO,MAAK,OACjBD,gBAAAA,EAAA,cAACE,EAAS,MAAT,EACC,OAAOlB,KAAAA,gBAAAA,EAAMmB,IACb,eAAgBC,CAAWA,MAAA;AACzB,UAAMC,IAAeV,EAAYW,KAAMtB,CAAAA,MAASA,EAAKmB,OAAOC,CAAM;AAClE,IAAIC,KACFpB,EAAaoB,CAAY;AAAA,EAC3B,GAEF,aAAY,eACZ,UAAUP,KAAgBC,KAAkBJ,EAAYY,WAAW,GACnE;AAAA;AAAA,IAEE;AAAA,IAGF,GAAAP,gBAAAA,EAAA,cAACE,EAAS,SAAT,IAAgB,mCAChBA,EAAS,SAAT,MACCF,gBAAAA,EAAA,cAACE,EAAS,QAAT,EAAgB,WAAU,uBAAA,CAAsB,GACjDF,gBAAAA,EAAA,cAACE,EAAS,SAAT,EAAiB,WAAU,KACzBP,GAAAA,EAAYa,IAAKxB,CAAAA,MAAS;AACnByB,UAAAA,IAAevB,EAAgBF,EAAKmB,EAAE;AAC5C,2CACGD,EAAS,QAAT,EAAgB,KAAKlB,EAAKmB,IAAI,OAAOnB,EAAKmB,MACxCM,IAAe,IACZ,GAAGzB,EAAK0B,WAAW,KAAKD,CAAY,MACpCzB,EAAK0B,WACX;AAAA,EAAA,CAEH,CACH,GACAV,gBAAAA,EAAA,cAACE,EAAS,OAAT,IAAc,CACjB,CACF,CACF;AAEJ;"}