@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.
- package/CHANGELOG.md +16 -0
- package/README.md +3 -3
- package/dist/cjs/index.css +1 -1
- package/dist/cjs/modules/core/components/Button/Button.js.map +1 -1
- package/dist/cjs/modules/core/components/Icons/Bell.js.map +1 -1
- package/dist/cjs/modules/core/hooks/useComponentVisible.js.map +1 -1
- package/dist/cjs/modules/core/hooks/useOnBottomScroll.js.map +1 -1
- package/dist/cjs/modules/feed/components/EmptyFeed/EmptyFeed.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationCell/ArchiveButton.js +1 -1
- package/dist/cjs/modules/feed/components/NotificationCell/ArchiveButton.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationCell/Avatar.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationCell/NotificationCell.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/Dropdown.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/MarkAsRead.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeed.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeedHeader.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationIconButton/NotificationIconButton.js.map +1 -1
- package/dist/cjs/modules/feed/components/UnseenBadge/UnseenBadge.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.js +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsConnectionError.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsErrorMessage.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.js +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.js.map +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsIcon/MsTeamsIcon.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackAuthButton/SlackAuthButton.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackAuthContainer/SlackAuthContainer.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectionError.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackErrorMessage.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackIcon/SlackIcon.js.map +1 -1
- package/dist/esm/modules/core/components/Button/Button.mjs.map +1 -1
- package/dist/esm/modules/core/components/Icons/Bell.mjs.map +1 -1
- package/dist/esm/modules/core/hooks/useComponentVisible.mjs.map +1 -1
- package/dist/esm/modules/core/hooks/useOnBottomScroll.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationCell/ArchiveButton.mjs +30 -24
- package/dist/esm/modules/feed/components/NotificationCell/ArchiveButton.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationCell/Avatar.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationFeed/Dropdown.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationFeed/MarkAsRead.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs +5 -5
- package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs +40 -37
- package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationIconButton/NotificationIconButton.mjs.map +1 -1
- package/dist/esm/modules/feed/components/UnseenBadge/UnseenBadge.mjs.map +1 -1
- package/dist/esm/modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.mjs.map +1 -1
- package/dist/esm/modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.mjs.map +1 -1
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs.map +1 -1
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.mjs +11 -8
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.mjs.map +1 -1
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.mjs +14 -11
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.mjs.map +1 -1
- package/dist/esm/modules/ms-teams/components/MsTeamsIcon/MsTeamsIcon.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackAddChannelInput/SlackAddChannelInput.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs +13 -10
- package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackIcon/SlackIcon.mjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/types/modules/feed/components/NotificationCell/ArchiveButton.d.ts +0 -1
- package/dist/types/modules/feed/components/NotificationCell/ArchiveButton.d.ts.map +1 -1
- package/dist/types/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.d.ts.map +1 -1
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.d.ts.map +1 -1
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.d.ts.map +1 -1
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.d.ts.map +1 -1
- 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
|
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,
|
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":";;;;;;;;AAqCA,SAASA,EAA4BC,GAAc;AAC7CA,EAAAA,KAAOA,MAAQ,MACjBC,WAAW,MAAMC,OAAOC,SAASC,OAAOJ,CAAG,GAAG,GAAG;AAErD;AAEaK,MAAAA,IAAmBC,EAAMC,WAIpC,CACE;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,aAAAA;AAAAA,EAAaC,eAAAA;AAAAA,EAAeC,QAAAA;AAAAA,EAAQC,UAAAA;AAAAA,EAAUC,eAAAA;AAAc,GACpEC,MACG;;AACG,QAAA;AAAA,IAAEC,YAAAA;AAAAA,IAAYC,WAAAA;AAAAA,MAAcC,EAAa,GACzC;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAgB,GAE7BC,IAA4BC,EAAQ,MACjCb,EAAKc,OAAOC,OAAO,CAACC,GAAKC,OACvB;AAAA,IAAE,GAAGD;AAAAA,IAAK,CAACC,EAAMC,IAAI,GAAGD;AAAAA,
|
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":";;;;;;;;AAqCA,SAASA,EAA4BC,GAAc;AAC7CA,EAAAA,KAAOA,MAAQ,MACjBC,WAAW,MAAMC,OAAOC,SAASC,OAAOJ,CAAG,GAAG,GAAG;AAErD;AAEaK,MAAAA,IAAmBC,EAAMC,WAIpC,CACE;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,aAAAA;AAAAA,EAAaC,eAAAA;AAAAA,EAAeC,QAAAA;AAAAA,EAAQC,UAAAA;AAAAA,EAAUC,eAAAA;AAAc,GACpEC,MACG;;AACG,QAAA;AAAA,IAAEC,YAAAA;AAAAA,IAAYC,WAAAA;AAAAA,MAAcC,EAAa,GACzC;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAgB,GAE7BC,IAA4BC,EAAQ,MACjCb,EAAKc,OAAOC,OAAO,CAACC,GAAKC,OACvB;AAAA,IAAE,GAAGD;AAAAA,IAAK,CAACC,EAAMC,IAAI,GAAGD;AAAAA,EAAM,IACpC,EAAE,GACJ,CAACjB,CAAI,CAAC,GAEHmB,KAAaP,IAAAA,EAAaQ,eAAbR,gBAAAA,EAA8CS,UAC3DC,IAAYV,EAAaW,SAEzBC,IAA0B1B,EAAM2B,YAAY,OAEhDlB,EAAWmB,iBAAiB1B,GAAM;AAAA,IAChC2B,MAAM;AAAA,IACNC,QAAQT;AAAAA,EAAAA,CACT,GAEGlB,IAAoBA,EAAYD,CAAI,IAEjCT,EAA4B4B,CAAS,IAC3C,CAACnB,GAAMmB,GAAWlB,GAAaM,CAAU,CAAC,GAEvCsB,IAAuB/B,EAAM2B,YACjC,CAACK,GAAsBC,OAErBxB,EAAWmB,iBAAiB1B,GAAM;AAAA,IAChC2B,MAAM;AAAA,IACNT,MAAMa,EAAOb;AAAAA,IACbc,OAAOD,EAAOC;AAAAA,IACdJ,QAAQG,EAAOH;AAAAA,EAAAA,CAChB,GAEG1B,IAAsBA,EAAcF,GAAM+B,CAAM,IAE7CxC,EAA4BwC,EAAOH,MAAM,IAElD,CAAC1B,GAAeK,GAAYP,CAAI,CAClC,GAEMiC,IAAYnC,EAAM2B,YACtB,CAACS,MAA4C;AAC3C,YAAQA,EAAGC,KAAG;AAAA,MACZ,KAAK,SAAS;AACZD,QAAAA,EAAGE,gBAAgB,GACKZ,EAAA;AACxB;AAAA,MAAA;AAAA,IAGA;AAAA,EACJ,GAEF,CAACA,CAAuB,CAC1B,GAEMa,IAAQrC,EAAKsC,OAAO,CAAC;AAE3B;AAAA;AAAA,IAEExC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAQ;AAAA,QACA,WAAW,gDAAgDE,CAAS;AAAA,QACpE,SAASgB;AAAAA,QACT,WAAAS;AAAA,QAEA,UAAU;AAAA,MAAA;AAAA,sCAET,OAAI,EAAA,WAAU,kCACZ,CAACjC,EAAKuC,WACLzC,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,qCAChB,GAEA0C,EACCrC,GACAkC,KAAS,UAAUA,KAASA,EAAMnB,QAC/BpB,gBAAAA,EAAA,cAAA2C,GAAA,EAAO,MAAMJ,EAAMnB,MAAM,KAAKmB,EAAMlC,SAEzC,GAEAL,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,0CACZc,EAAa8B,wCACX,OACC,EAAA,WAAU,kCACV,yBAAyB;AAAA,QACvBC,QAAS/B,EAAa8B,KAA8BrB;AAAAA,MACtD,EAAA,CAEH,GAEAC,KACCxB,gBAAAA,EAAA,cAAC,SAAI,WAAU,sCAAA,GACZA,gBAAAA,EAAA,cAAA8C,GAAA,MACEtB,EAAUuB,QAAQC,IAAI,CAACf,GAAQgB,MAC9BjD,gBAAAA,EAAA,cAACkD,GACC,EAAA,SAASD,MAAM,IAAI,YAAY,aAC/B,KAAKhB,EAAOb,MACZ,SAAU+B,CAAMpB,MAAAA,EAAqBoB,GAAGlB,CAAM,EAAA,GAE7CA,EAAOC,KACV,CACD,CACH,CACF,GAGD5B,qCACE,OAAI,EAAA,WAAU,uCACZA,GAAAA,CACH,GAGFN,gBAAAA,EAAA,cAAC,UAAK,WAAU,mCAAA,GACboD,EAAgBlD,EAAKmD,aAAa;AAAA,QAAEzC,QAAAA;AAAAA,MAAAA,CAAQ,CAC/C,CACF,GAEC8B,EAAqBnC,GAAgBP,gBAAAA,EAAA,cAAAsD,GAAA,EAAc,MAAApD,IAAc,CACpE;AAAA,IAAA;AAAA;AAGN,CACF;"}
|
@@ -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,
|
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,
|
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 {
|
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 =
|
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
|
-
} =
|
27
|
+
} = R(), {
|
28
28
|
settings: i
|
29
|
-
} =
|
29
|
+
} = B(n), {
|
30
30
|
t: F
|
31
|
-
} =
|
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,
|
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,GAC7B,GAEKO,IAAiBA,CAAC;AAAA,EAAEC,WAAAA;AAAoC,MAC3DP,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,2CAAA,mCACZQ,GACC,EAAA,WAAW,GACX,MAAK,QACL,OAAOD,MAAc,SAAS,8BAA8BE,QAAU,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,EACjB,CAAA,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 +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,
|
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;"}
|
package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
import { useTranslations as y, useKnockFeed as _ } from "@knocklabs/react-core";
|
2
|
-
import
|
3
|
-
import {
|
4
|
-
import
|
5
|
-
import { NotificationFeed as
|
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
|
-
},
|
14
|
+
}, K = ({
|
15
15
|
isVisible: e,
|
16
16
|
onOpen: t = x,
|
17
|
-
onClose:
|
18
|
-
buttonRef:
|
19
|
-
closeOnClickOutside:
|
20
|
-
placement:
|
21
|
-
...
|
17
|
+
onClose: p,
|
18
|
+
buttonRef: r,
|
19
|
+
closeOnClickOutside: s = !0,
|
20
|
+
placement: i = "bottom-end",
|
21
|
+
...m
|
22
22
|
}) => {
|
23
23
|
const {
|
24
|
-
t:
|
24
|
+
t: d
|
25
25
|
} = y(), {
|
26
|
-
colorMode:
|
27
|
-
feedClient:
|
28
|
-
useFeedStore:
|
29
|
-
} = _(),
|
30
|
-
ref:
|
31
|
-
} =
|
32
|
-
closeOnClickOutside:
|
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
|
34
|
+
return c(() => {
|
47
35
|
e && t && t({
|
48
|
-
store:
|
49
|
-
feedClient:
|
36
|
+
store: a,
|
37
|
+
feedClient: f
|
50
38
|
});
|
51
|
-
}, [e, t,
|
52
|
-
|
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:
|
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
|
-
|
61
|
+
K as NotificationFeedPopover
|
59
62
|
};
|
60
63
|
//# sourceMappingURL=NotificationFeedPopover.mjs.map
|
package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs.map
CHANGED
@@ -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\";\
|
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;"}
|
package/dist/esm/modules/feed/components/NotificationIconButton/NotificationIconButton.mjs.map
CHANGED
@@ -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,
|
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,
|
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,
|
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;"}
|
package/dist/esm/modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.mjs.map
CHANGED
@@ -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,
|
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;"}
|
package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs.map
CHANGED
@@ -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,
|
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;"}
|
package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.mjs
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import n, { useMemo as c, useCallback as
|
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:
|
22
|
+
error: l
|
23
23
|
} = M({
|
24
24
|
msTeamsChannelsRecipientObject: h
|
25
|
-
}), C = c(() => s === "disconnected" || s === "error" || !!
|
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((
|
27
|
+
const d = e.map((m) => ({
|
28
28
|
ms_teams_team_id: r,
|
29
|
-
ms_teams_channel_id:
|
30
|
-
})),
|
31
|
-
u(
|
32
|
-
}, placeholder: "Select channels", disabled: r === void 0 || C || E || o.length === 0, closeOnSelect: !1, layout: "wrap"
|
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,
|
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
|
3
|
-
import { Combobox as
|
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:
|
7
|
+
team: s,
|
8
8
|
onTeamChange: m,
|
9
9
|
getChannelCount: d,
|
10
10
|
queryOptions: u
|
11
11
|
}) => {
|
12
12
|
const {
|
13
|
-
connectionStatus:
|
14
|
-
} =
|
13
|
+
connectionStatus: n
|
14
|
+
} = E(), {
|
15
15
|
data: i,
|
16
16
|
isLoading: l
|
17
17
|
} = T({
|
18
18
|
queryOptions: u
|
19
|
-
}),
|
20
|
-
return /* @__PURE__ */ e.createElement(b, { w: "full", minW: "0" }, /* @__PURE__ */ e.createElement(
|
21
|
-
const a =
|
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 ||
|
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(
|
26
|
-
})), /* @__PURE__ */ e.createElement(
|
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
|
package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.mjs.map
CHANGED
@@ -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,
|
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;"}
|