@knocklabs/react 0.3.0 → 0.4.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 +28 -0
- package/dist/cjs/index.css +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.js +2 -0
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.js.map +1 -0
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.js +2 -0
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.js.map +1 -0
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsConnectionError.js +2 -0
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsConnectionError.js.map +1 -0
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsErrorMessage.js +2 -0
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsErrorMessage.js.map +1 -0
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.js +2 -0
- package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.js.map +1 -0
- package/dist/cjs/modules/ms-teams/utils.js +2 -0
- package/dist/cjs/modules/ms-teams/utils.js.map +1 -0
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js.map +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectionError.js +1 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/SlackConnectionError.js.map +1 -1
- package/dist/esm/index.mjs +22 -20
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs +28 -0
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs.map +1 -0
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.mjs +48 -0
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.mjs.map +1 -0
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsConnectionError.mjs +15 -0
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsConnectionError.mjs.map +1 -0
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsErrorMessage.mjs +10 -0
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsErrorMessage.mjs.map +1 -0
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.mjs +36 -0
- package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.mjs.map +1 -0
- package/dist/esm/modules/ms-teams/utils.mjs +16 -0
- package/dist/esm/modules/ms-teams/utils.mjs.map +1 -0
- package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs.map +1 -1
- package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackConnectionError.mjs +4 -4
- package/dist/esm/modules/slack/components/SlackChannelCombobox/SlackConnectionError.mjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.d.ts +10 -0
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.d.ts.map +1 -0
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.d.ts +10 -0
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.d.ts.map +1 -0
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsConnectionError.d.ts +4 -0
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsConnectionError.d.ts.map +1 -0
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsErrorMessage.d.ts +7 -0
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsErrorMessage.d.ts.map +1 -0
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.d.ts +12 -0
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.d.ts.map +1 -0
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/index.d.ts +2 -0
- package/dist/types/modules/ms-teams/components/MsTeamsChannelCombobox/index.d.ts.map +1 -0
- package/dist/types/modules/ms-teams/index.d.ts +1 -0
- package/dist/types/modules/ms-teams/index.d.ts.map +1 -1
- package/dist/types/modules/ms-teams/utils.d.ts +11 -0
- package/dist/types/modules/ms-teams/utils.d.ts.map +1 -0
- package/dist/types/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.d.ts +2 -2
- package/package.json +10 -6
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,33 @@
|
|
1
1
|
# Changelog
|
2
2
|
|
3
|
+
## 0.4.0
|
4
|
+
|
5
|
+
### Minor Changes
|
6
|
+
|
7
|
+
- 2161d3f: Add `MsTeamsChannelCombobox` component to allow connecting Microsoft Teams channels to a Knock object
|
8
|
+
|
9
|
+
### Patch Changes
|
10
|
+
|
11
|
+
- 1ba1393: add TeamsKit hooks for teams and channels
|
12
|
+
- Updated dependencies [85418a0]
|
13
|
+
- Updated dependencies [2161d3f]
|
14
|
+
- Updated dependencies [8cc9338]
|
15
|
+
- Updated dependencies [da84a75]
|
16
|
+
- Updated dependencies [2161d3f]
|
17
|
+
- Updated dependencies [2161d3f]
|
18
|
+
- Updated dependencies [1ba1393]
|
19
|
+
- Updated dependencies [b4b5c02]
|
20
|
+
- @knocklabs/react-core@0.3.2
|
21
|
+
- @knocklabs/client@0.11.2
|
22
|
+
|
23
|
+
## 0.3.1
|
24
|
+
|
25
|
+
### Patch Changes
|
26
|
+
|
27
|
+
- Updated dependencies [b9f6712]
|
28
|
+
- @knocklabs/react-core@0.3.1
|
29
|
+
- @knocklabs/client@0.11.1
|
30
|
+
|
3
31
|
## 0.3.0
|
4
32
|
|
5
33
|
### Minor Changes
|
package/dist/cjs/index.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
:root{--rnf-font-size-xs: .75rem;--rnf-font-size-sm: .875rem;--rnf-font-size-md: 1rem;--rnf-font-size-lg: 1.125rem;--rnf-font-size-xl: 1.266rem;--rnf-font-size-2xl: 1.5rem;--rnf-font-size-3xl: 1.75rem;--rnf-spacing-0: 0;--rnf-spacing-1: 4px;--rnf-spacing-2: 8px;--rnf-spacing-3: 12px;--rnf-spacing-4: 16px;--rnf-spacing-5: 20px;--rnf-spacing-6: 24px;--rnf-spacing-7: 32px;--rnf-spacing-8: 42px;--rnf-font-weight-normal: 400;--rnf-font-weight-medium: 500;--rnf-font-weight-semibold: 600;--rnf-font-weight-bold: 700;--rnf-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rnf-border-radius-sm: 2px;--rnf-border-radius-md: 4px;--rnf-border-radius-lg: 8px;--rnf-shadow-sm: 0px 5px 10px rgba(0, 0, 0, .12);--rnf-shadow-md: 0px 8px 30px rgba(0, 0, 0, .24);--rnf-color-white: #fff;--rnf-color-white-a-75: rgba(255, 255, 255, .75);--rnf-color-black: #000;--rnf-color-gray-900: #1a1f36;--rnf-color-gray-800: #3c4257;--rnf-color-gray-700: #3c4257;--rnf-color-gray-600: #515669;--rnf-color-gray-500: #697386;--rnf-color-gray-400: #9ea0aa;--rnf-color-gray-300: #a5acb8;--rnf-color-gray-200: #dddee1;--rnf-color-gray-100: #e4e8ee;--rnf-color-brand-500: #e95744;--rnf-color-brand-700: #e4321b;--rnf-color-brand-900: #891e10;--rnf-unread-badge-bg-color: #dd514c;--rnf-avatar-bg-color: #ef8476;--rnf-message-cell-unread-dot-bg-color: #f4ada4;--rnf-message-cell-hover-bg-color: #f1f6fc}:root{--rnf-button-padding-x: 8px;--rnf-button-padding-y: 4px;--rnf-button-border-radius: 4px;--rnf-button-font-weight: var(--rnf-font-weight-medium);--rnf-button-font-size: var(--rnf-font-size-sm);--rnf-button-primary-bg-color: var(--rnf-color-brand-500);--rnf-button-primary-hover-bg-color: var(--rnf-color-brand-700);--rnf-button-primary-border-color: transparent;--rnf-button-primary-text-color: var(--rnf-color-white);--rnf-button-secondary-bg-color: var(--rnf-color-white);--rnf-button-secondary-hover-bg-color: #dddee1;--rnf-button-secondary-border-color: #dddee1;--rnf-button-secondary-text-color: var(--rnf-color-gray-700)}.rnf-button{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;width:auto;padding:var(--rnf-button-padding-y) var(--rnf-button-padding-x);border-radius:var(--rnf-button-border-radius);font-size:var(--rnf-button-font-size);line-height:var(--rnf-font-size-lg);font-weight:var(--rnf-button-font-weight);border:1px solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:all .1s ease-in-out}.rnf-button--full-width{width:100%}.rnf-button--primary{background-color:var(--rnf-button-primary-bg-color);color:var(--rnf-button-primary-text-color);border-color:var(--rnf-button-primary-border-color)}.rnf-button--primary:hover:not(:disabled),.rnf-button--primary:active:not(:disabled){background-color:var(--rnf-button-primary-hover-bg-color)}.rnf-button:disabled{opacity:.4;cursor:not-allowed}.rnf-button--secondary{background-color:var(--rnf-button-secondary-bg-color);color:var(--rnf-button-secondary-text-color);border-color:var(--rnf-button-secondary-border-color)}.rnf-button--secondary:hover:not(:disabled),.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-button-secondary-hover-bg-color)}.rnf-button--dark.rnf-button--secondary{border-color:#43464c;background-color:#43464c;color:var(--rnf-color-white-a-75)}.rnf-button__button-text-hidden{opacity:0}.rnf-button--dark.rnf-button--secondary:hover:not(:disabled),.rnf-button--dark.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-color-gray-600)}.rnf-button-spinner{display:flex;align-items:center;font-size:1rem;line-height:"normal"}.rnf-button-spinner--without-label{position:absolute}.rnf-button-spinner--with-label{margin-right:6px}.rnf-button--primary .rnf-button-spinner circle{stroke:#fff}.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-button-secondary-text-color)}.rnf-button--dark.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-color-white-a-75)}.rnf-button-group>.rnf-button+.rnf-button{margin-left:8px}:root{--rnf-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:break-word;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content,.rnf-notification-cell__button-group{margin:.75em 0 .5em}.rnf-archive-notification-btn{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;opacity:0;width:24px;height:24px;cursor:pointer;margin-left:auto;color:var(--rnf-archive-notification-btn-bg-color);padding:var(--rnf-spacing-1) var(--rnf-spacing-2);transition:color .1s ease-in-out,opacity .2s ease-in-out}.rnf-notification-cell:focus .rnf-archive-notification-btn,.rnf-notification-cell:hover .rnf-archive-notification-btn,.rnf-notification-cell:active .rnf-archive-notification-btn{opacity:1}.rnf-archive-notification-btn:focus,.rnf-archive-notification-btn:hover,.rnf-archive-notification-btn:active{outline:none;opacity:1;color:var(--rnf-archive-notification-btn-bg-color-active)}.rnf-tooltip{background-color:var(--rnf-color-gray-700);border-radius:4px;box-shadow:0 2px 4px #0000002e;color:#fff;display:flex;flex-direction:column;padding:var(--rnf-spacing-1) var(--rnf-spacing-2);font-size:var(--rnf-font-size-xs);line-height:var(--rnf-font-size-s);font-weight:var(--rnf-font-weight-medium);transition:opacity .3s;z-index:9999}.rnf-notification-cell--dark{--rnf-notification-cell-border-bottom-color: rgba(105, 115, 134, .65);--rnf-notification-cell-active-bg-color: #393b40;--rnf-notification-cell-content-color: var(--rnf-color-white-a-75)}.rnf-notification-cell--dark:last-child{border-bottom-color:transparent}.rnf-notification-cell--dark .rnf-notification-cell__timestamp{color:var(--rnf-color-gray-500)}.rnf-archive-notification-btn--dark{--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-500);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-400)}.rnf-tooltip--dark{background-color:#565a61}@media screen and (hover: none){.rnf-archive-notification-btn{opacity:1}}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}.rnf-feed-provider{font-family:var(--rnf-font-family-sanserif)!important;margin:0!important;padding:0!important}.rnf-feed-provider [class^=rnf-]{font-family:var(--rnf-font-family-sanserif)!important;box-sizing:border-box}:root{--rnf-notification-feed-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--rnf-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}:root{--rtk-font-size-xs: .75rem;--rtk-font-size-sm: .875rem;--rtk-font-size-md: 1rem;--rtk-font-size-lg: 1.125rem;--rtk-font-size-xl: 1.266rem;--rtk-font-size-2xl: 1.5rem;--rtk-font-size-3xl: 1.75rem;--rtk-spacing-0: 0rem;--rtk-spacing-1: .25rem;--rtk-spacing-2: .5rem;--rtk-spacing-3: .75rem;--rtk-spacing-4: 1rem;--rtk-spacing-5: 1.25rem;--rtk-spacing-6: 1.5rem;--rtk-spacing-7: 2rem;--rtk-font-weight-normal: 400;--rtk-font-weight-medium: 500;--rtk-font-weight-semibold: 600;--rtk-font-weight-bold: 700;--rtk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rtk-border-radius-sm: 2px;--rtk-border-radius-md: 4px;--rtk-border-radius-lg: 8px;--rtk-button-border-radius: 6px;--rtk-color-white: #fff;--rtk-color-white-a-75: rgba(255, 255, 255, .75);--rtk-color-black: #000;--rtk-color-gray-900: #1a1f36;--rtk-color-gray-800: #3c4257;--rtk-color-gray-700: #3c4257;--rtk-color-gray-600: #515669;--rtk-color-gray-500: #697386;--rtk-color-gray-400: #9ea0aa;--rtk-color-gray-300: #a5acb8;--rtk-color-gray-200: #dddee1;--rtk-color-gray-100: #e4e8ee;--rtk-color-brand-500: #e95744;--rtk-color-brand-700: #e4321b;--rtk-color-brand-900: #891e10;--rtk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rtk-connected-color: rgba(51, 163, 102, 1);--rtk-disconnect-border-color: rgba(230, 71, 51, 1);--rtk-disconnect-background-color: rgba(255, 245, 245, 1);--rtk-error-red: rgba(205, 123, 46, 1)}.rtk-connect__button{background-color:var(--rtk-color-white);border:1px solid var(--rtk-color-gray-200);border-radius:var(--rtk-button-border-radius);box-sizing:border-box;color:var(--rtk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rtk-font-family-sanserif);font-size:var(--rtk-font-size-sm);font-weight:var(--rtk-font-weight-normal);gap:var(--rtk-spacing-2);padding:var(--rtk-spacing-1) var(--rtk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rtk-connect__button--connected{border-color:var(--rtk-connected-color);color:var(--rtk-connected-color);width:120px}.rtk-connect__button--error{border-color:var(--rtk-error-red);color:var(--rtk-error-red)}.rtk-connect__button--loading{border-color:var(--rtk-color-gray-100);color:var(--rtk-color-gray-400);pointer-events:none}.rtk-connect__button--disconnected:hover{background-color:var(--rtk-button-hover-color)}.rtk-connect__button--connected:hover,.rtk-connect__button__text--connected:hover{background-color:var(--rtk-disconnect-background-color);border-color:var(--rtk-disconnect-border-color);color:var(--rtk-disconnect-border-color)}.rtk-connect__button--error:hover,.rtk-connect__button__text--error:hover{border-color:var(--rtk-color-black);color:var(--rtk-color-black)}.rtk-connect__button:active{transform:translate(1px,1px)}.rtk-auth{background:var(--rtk-color-white);border:1px solid var(--rtk-color-gray-100);border-radius:var(--rtk-border-radius-lg);font-family:var(--rtk-font-family-sanserif);font-size:var(--rtk-font-size-sm);font-weight:var(--rtk-font-weight-normal);padding:var(--rtk-spacing-5)}.rtk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rtk-auth__title{color:#1a1f36;font-size:var(--rtk-font-size-md);line-height:var(--rtk-spacing-5);margin-top:var(--rtk-spacing-4)}.rtk-auth__description{color:#515669;font-size:var(--rtk-font-size-sm);line-height:var(--rtk-spacing-5)}:root{--rsk-font-size-xs: .75rem;--rsk-font-size-sm: .875rem;--rsk-font-size-md: 1rem;--rsk-font-size-lg: 1.125rem;--rsk-font-size-xl: 1.266rem;--rsk-font-size-2xl: 1.5rem;--rsk-font-size-3xl: 1.75rem;--rsk-spacing-0: 0rem;--rsk-spacing-1: .25rem;--rsk-spacing-2: .5rem;--rsk-spacing-3: .75rem;--rsk-spacing-4: 1rem;--rsk-spacing-5: 1.25rem;--rsk-spacing-6: 1.5rem;--rsk-spacing-7: 2rem;--rsk-font-weight-normal: 400;--rsk-font-weight-medium: 500;--rsk-font-weight-semibold: 600;--rsk-font-weight-bold: 700;--rsk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rsk-border-radius-sm: 2px;--rsk-border-radius-md: 4px;--rsk-border-radius-lg: 8px;--rsk-button-border-radius: 6px;--rsk-color-white: #fff;--rsk-color-white-a-75: rgba(255, 255, 255, .75);--rsk-color-black: #000;--rsk-color-gray-900: #1a1f36;--rsk-color-gray-800: #3c4257;--rsk-color-gray-700: #3c4257;--rsk-color-gray-600: #515669;--rsk-color-gray-500: #697386;--rsk-color-gray-400: #9ea0aa;--rsk-color-gray-300: #a5acb8;--rsk-color-gray-200: #dddee1;--rsk-color-gray-100: #e4e8ee;--rsk-color-brand-500: #e95744;--rsk-color-brand-700: #e4321b;--rsk-color-brand-900: #891e10;--rsk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rsk-connected-color: rgba(51, 163, 102, 1);--rsk-disconnect-border-color: rgba(230, 71, 51, 1);--rsk-disconnect-background-color: rgba(255, 245, 245, 1);--rsk-error-red: rgba(205, 123, 46, 1)}.rsk-connect__button{background-color:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);box-sizing:border-box;color:var(--rsk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);padding:var(--rsk-spacing-1) var(--rsk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rsk-connect__button--connected{border-color:var(--rsk-connected-color);color:var(--rsk-connected-color);width:120px}.rsk-connect__button--error{border-color:var(--rsk-error-red);color:var(--rsk-error-red)}.rsk-connect__button--loading{border-color:var(--rsk-color-gray-100);color:var(--rsk-color-gray-400);pointer-events:none}.rsk-connect__button--disconnected:hover{background-color:var(--rsk-button-hover-color)}.rsk-connect__button--connected:hover,.rsk-connect__button__text--connected:hover{background-color:var(--rsk-disconnect-background-color);border-color:var(--rsk-disconnect-border-color);color:var(--rsk-disconnect-border-color)}.rsk-connect__button--error:hover,.rsk-connect__button__text--error:hover{border-color:var(--rsk-color-black);color:var(--rsk-color-black)}.rsk-connect__button:active{transform:translate(1px,1px)}.rsk-auth{background:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-lg);font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);padding:var(--rsk-spacing-5)}.rsk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rsk-auth__title{color:#1a1f36;font-size:var(--rsk-font-size-md);line-height:var(--rsk-spacing-5);margin-top:var(--rsk-spacing-4)}.rsk-auth__description{color:#515669;font-size:var(--rsk-font-size-sm);line-height:var(--rsk-spacing-5)}.rsk-connect-channel{align-items:center;display:flex;gap:var(--rsk-spacing-1)}.rsk-connect-channel__input{border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);height:32px;padding-left:var(--rsk-spacing-2);width:270px}.rsk-connect-channel__button{background-color:var(--rsk-color-white);border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);color:var(--rsk-color-black);display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);height:24px;padding:var(--rsk-spacing-2);text-decoration:none}.rsk-connect-channel__button:hover{background-color:var(--rsk-button-hover-color)}:root{--rsk-error-yellow: rgba(247, 212, 102, 1);--rsk-error-yellow-background: rgba(255, 255, 240, 1)}.rsk-combobox,.rsk-combobox__list-box,.rsk-combobox__searchbar,.rsk-combobox__searchbar__input-container{width:286px}.rsk-combobox{font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal)}.rsk-combobox__searchbar__input-container{align-items:center;color:var(--rsk-color-gray-200);display:flex;position:relative}.rsk-combobox__searchbar__input-container__icon,.rsk-combobox__searchbar__input-container__icon--error{left:var(--rsk-spacing-3);position:absolute;top:.65rem;z-index:10}.rsk-combobox__searchbar__input-container__icon--error{color:var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input{border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);border-style:solid;border-width:1px;height:32px;padding-left:var(--rsk-spacing-7);padding-right:var(--rsk-spacing-1);position:relative;width:100%}.rsk-combobox__searchbar__input-container__input:disabled{background-color:var(--rsk-error-yellow-background);border:1px solid var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input--error{cursor:not-allowed}.rsk-combobox__searchbar__input-container__input--error::placeholder{color:#a95823}.rsk-combobox__list-box{background-color:var(--rsk-color-white);border-radius:var(--rsk-border-radius-sm);box-shadow:0 1px 2px #0000000f,0 1px 3px #0000001a;display:flex;flex-direction:column;height:223px;margin-top:var(--rsk-spacing-1);overflow-x:hidden;overflow-y:auto;width:284px}.rsk-combobox__option__button{background-color:var(--rsk-color-white);border-width:var(--rsk-spacing-0);padding:var(--rsk-spacing-2)}.rsk-combobox__option__button:hover{cursor:pointer}.rsk-combobox__option__button:disabled{color:var(--rsk-color-gray-700);cursor:not-allowed}.rsk-combobox__option__text-container{display:flex}.rsk-combobox__option__text-container__empty-icon,.rsk-combobox__option__text-container__channel-icon,.rsk-combobox__option__text-container__connection-icon{height:15px;width:20px}.rsk-combobox__option__text-container__channel-icon{align-items:center;display:flex;justify-content:center}.rsk-combobox__option__text-container__text{height:15px}.rsk-combobox__error{align-items:flex-start;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);justify-content:center;margin-top:var(--rsk-spacing-1);padding:var(--rsk-spacing-2)}.rsk-combobox__error__text{color:var(--rsk-color-gray-700);font-size:var(--rsk-font-size-xs);line-height:normal}.rsk-combobox__connected_channel_tag_list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--rsk-spacing-2);margin-top:var(--rsk-spacing-2);width:286px;font-size:var(--rsk-font-size-sm);font-family:var(--rsk-font-family-sanserif);color:var(--rsk-color-gray-800)}.rsk-combobox__connected_channel_tag{align-items:center;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);max-width:286px;padding:var(--rsk-spacing-1) var(--rsk-spacing-2) var(--rsk-spacing-1) var(--rsk-spacing-2)}.rsk-combobox__connected_channel_tag__delete_button,.rsk-combobox__connected_channel_tag__channel_type_icon,.rsk-combobox__connected_channel_tag__text{display:flex}.rsk-combobox__connected_channel_tag__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rsk-combobox__connected_channel_tag__delete_button{background-color:unset;border-style:none;cursor:pointer;padding:.05rem 0rem 0rem}.rsk-combobox__connected_channel_tag__delete_button:hover{background-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md)}
|
1
|
+
:root{--rnf-font-size-xs: .75rem;--rnf-font-size-sm: .875rem;--rnf-font-size-md: 1rem;--rnf-font-size-lg: 1.125rem;--rnf-font-size-xl: 1.266rem;--rnf-font-size-2xl: 1.5rem;--rnf-font-size-3xl: 1.75rem;--rnf-spacing-0: 0;--rnf-spacing-1: 4px;--rnf-spacing-2: 8px;--rnf-spacing-3: 12px;--rnf-spacing-4: 16px;--rnf-spacing-5: 20px;--rnf-spacing-6: 24px;--rnf-spacing-7: 32px;--rnf-spacing-8: 42px;--rnf-font-weight-normal: 400;--rnf-font-weight-medium: 500;--rnf-font-weight-semibold: 600;--rnf-font-weight-bold: 700;--rnf-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rnf-border-radius-sm: 2px;--rnf-border-radius-md: 4px;--rnf-border-radius-lg: 8px;--rnf-shadow-sm: 0px 5px 10px rgba(0, 0, 0, .12);--rnf-shadow-md: 0px 8px 30px rgba(0, 0, 0, .24);--rnf-color-white: #fff;--rnf-color-white-a-75: rgba(255, 255, 255, .75);--rnf-color-black: #000;--rnf-color-gray-900: #1a1f36;--rnf-color-gray-800: #3c4257;--rnf-color-gray-700: #3c4257;--rnf-color-gray-600: #515669;--rnf-color-gray-500: #697386;--rnf-color-gray-400: #9ea0aa;--rnf-color-gray-300: #a5acb8;--rnf-color-gray-200: #dddee1;--rnf-color-gray-100: #e4e8ee;--rnf-color-brand-500: #e95744;--rnf-color-brand-700: #e4321b;--rnf-color-brand-900: #891e10;--rnf-unread-badge-bg-color: #dd514c;--rnf-avatar-bg-color: #ef8476;--rnf-message-cell-unread-dot-bg-color: #f4ada4;--rnf-message-cell-hover-bg-color: #f1f6fc}:root{--rnf-button-padding-x: 8px;--rnf-button-padding-y: 4px;--rnf-button-border-radius: 4px;--rnf-button-font-weight: var(--rnf-font-weight-medium);--rnf-button-font-size: var(--rnf-font-size-sm);--rnf-button-primary-bg-color: var(--rnf-color-brand-500);--rnf-button-primary-hover-bg-color: var(--rnf-color-brand-700);--rnf-button-primary-border-color: transparent;--rnf-button-primary-text-color: var(--rnf-color-white);--rnf-button-secondary-bg-color: var(--rnf-color-white);--rnf-button-secondary-hover-bg-color: #dddee1;--rnf-button-secondary-border-color: #dddee1;--rnf-button-secondary-text-color: var(--rnf-color-gray-700)}.rnf-button{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;width:auto;padding:var(--rnf-button-padding-y) var(--rnf-button-padding-x);border-radius:var(--rnf-button-border-radius);font-size:var(--rnf-button-font-size);line-height:var(--rnf-font-size-lg);font-weight:var(--rnf-button-font-weight);border:1px solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:all .1s ease-in-out}.rnf-button--full-width{width:100%}.rnf-button--primary{background-color:var(--rnf-button-primary-bg-color);color:var(--rnf-button-primary-text-color);border-color:var(--rnf-button-primary-border-color)}.rnf-button--primary:hover:not(:disabled),.rnf-button--primary:active:not(:disabled){background-color:var(--rnf-button-primary-hover-bg-color)}.rnf-button:disabled{opacity:.4;cursor:not-allowed}.rnf-button--secondary{background-color:var(--rnf-button-secondary-bg-color);color:var(--rnf-button-secondary-text-color);border-color:var(--rnf-button-secondary-border-color)}.rnf-button--secondary:hover:not(:disabled),.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-button-secondary-hover-bg-color)}.rnf-button--dark.rnf-button--secondary{border-color:#43464c;background-color:#43464c;color:var(--rnf-color-white-a-75)}.rnf-button__button-text-hidden{opacity:0}.rnf-button--dark.rnf-button--secondary:hover:not(:disabled),.rnf-button--dark.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-color-gray-600)}.rnf-button-spinner{display:flex;align-items:center;font-size:1rem;line-height:"normal"}.rnf-button-spinner--without-label{position:absolute}.rnf-button-spinner--with-label{margin-right:6px}.rnf-button--primary .rnf-button-spinner circle{stroke:#fff}.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-button-secondary-text-color)}.rnf-button--dark.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-color-white-a-75)}.rnf-button-group>.rnf-button+.rnf-button{margin-left:8px}:root{--rnf-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:break-word;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content,.rnf-notification-cell__button-group{margin:.75em 0 .5em}.rnf-archive-notification-btn{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;opacity:0;width:24px;height:24px;cursor:pointer;margin-left:auto;color:var(--rnf-archive-notification-btn-bg-color);padding:var(--rnf-spacing-1) var(--rnf-spacing-2);transition:color .1s ease-in-out,opacity .2s ease-in-out}.rnf-notification-cell:focus .rnf-archive-notification-btn,.rnf-notification-cell:hover .rnf-archive-notification-btn,.rnf-notification-cell:active .rnf-archive-notification-btn{opacity:1}.rnf-archive-notification-btn:focus,.rnf-archive-notification-btn:hover,.rnf-archive-notification-btn:active{outline:none;opacity:1;color:var(--rnf-archive-notification-btn-bg-color-active)}.rnf-tooltip{background-color:var(--rnf-color-gray-700);border-radius:4px;box-shadow:0 2px 4px #0000002e;color:#fff;display:flex;flex-direction:column;padding:var(--rnf-spacing-1) var(--rnf-spacing-2);font-size:var(--rnf-font-size-xs);line-height:var(--rnf-font-size-s);font-weight:var(--rnf-font-weight-medium);transition:opacity .3s;z-index:9999}.rnf-notification-cell--dark{--rnf-notification-cell-border-bottom-color: rgba(105, 115, 134, .65);--rnf-notification-cell-active-bg-color: #393b40;--rnf-notification-cell-content-color: var(--rnf-color-white-a-75)}.rnf-notification-cell--dark:last-child{border-bottom-color:transparent}.rnf-notification-cell--dark .rnf-notification-cell__timestamp{color:var(--rnf-color-gray-500)}.rnf-archive-notification-btn--dark{--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-500);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-400)}.rnf-tooltip--dark{background-color:#565a61}@media screen and (hover: none){.rnf-archive-notification-btn{opacity:1}}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}.rnf-feed-provider{font-family:var(--rnf-font-family-sanserif)!important;margin:0!important;padding:0!important}.rnf-feed-provider [class^=rnf-]{font-family:var(--rnf-font-family-sanserif)!important;box-sizing:border-box}:root{--rnf-notification-feed-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--rnf-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}:root{--tgph-surface-1:#fff;--tgph-surface-2:#f9f9f8;--tgph-gray-1:#fcfcfd;--tgph-gray-2:#f9f9fb;--tgph-gray-3:#f0f0f3;--tgph-gray-4:#e8e8ec;--tgph-gray-5:#e0e1e6;--tgph-gray-6:#d9d9e0;--tgph-gray-7:#cdced6;--tgph-gray-8:#b9bbc6;--tgph-gray-9:#8b8d98;--tgph-gray-10:#80838d;--tgph-gray-11:#60646c;--tgph-gray-12:#1c2024;--tgph-beige-1:#fdfdfc;--tgph-beige-2:#f9f9f8;--tgph-beige-3:#f1f0ef;--tgph-beige-4:#e9e8e6;--tgph-beige-5:#e2e1de;--tgph-beige-6:#dad9d6;--tgph-beige-7:#cfceca;--tgph-beige-8:#bcbbb5;--tgph-beige-9:#8d8d86;--tgph-beige-10:#82827c;--tgph-beige-11:#63635e;--tgph-beige-12:#21201c;--tgph-accent-1:#fffcfc;--tgph-accent-2:#fff8f7;--tgph-accent-3:#feebe7;--tgph-accent-4:#ffdcd3;--tgph-accent-5:#ffcdc2;--tgph-accent-6:#fdbdaf;--tgph-accent-7:#f5a898;--tgph-accent-8:#ec8e7b;--tgph-accent-9:#e54d2e;--tgph-accent-10:#dd4425;--tgph-accent-11:#d13415;--tgph-accent-12:#5c271f;--tgph-green-1:#fbfefd;--tgph-green-2:#f4fbf7;--tgph-green-3:#e6f7ed;--tgph-green-4:#d6f1e3;--tgph-green-5:#c3e9d7;--tgph-green-6:#acdec8;--tgph-green-7:#8bceb6;--tgph-green-8:#56ba9f;--tgph-green-9:#29a383;--tgph-green-10:#26997b;--tgph-green-11:#208368;--tgph-green-12:#1d3b31;--tgph-yellow-1:#fefdfb;--tgph-yellow-2:#fefbe9;--tgph-yellow-3:#fff7c2;--tgph-yellow-4:#ffee9c;--tgph-yellow-5:#fbe577;--tgph-yellow-6:#f3d673;--tgph-yellow-7:#e9c162;--tgph-yellow-8:#f3d673;--tgph-yellow-9:#ffc53d;--tgph-yellow-10:#ffba18;--tgph-yellow-11:#ab6400;--tgph-yellow-12:#4f3422;--tgph-blue-1:#fdfdfe;--tgph-blue-2:#f7f9ff;--tgph-blue-3:#edf2fe;--tgph-blue-4:#e1e9ff;--tgph-blue-5:#d2deff;--tgph-blue-6:#c1d0ff;--tgph-blue-7:#abbdf9;--tgph-blue-8:#8da4ef;--tgph-blue-9:#3e63dd;--tgph-blue-10:#3358d4;--tgph-blue-11:#3a5bc7;--tgph-blue-12:#1f2d5c;--tgph-red-1:#fffcfd;--tgph-red-2:#fff7f8;--tgph-red-3:#feeaed;--tgph-red-4:#ffdce1;--tgph-red-5:#ffced6;--tgph-red-6:#f8bfc8;--tgph-red-7:#efacb8;--tgph-red-8:#e592a3;--tgph-red-9:#e54666;--tgph-red-10:#dc3b5d;--tgph-red-11:#ca244d;--tgph-red-12:#64172b;--tgph-purple-1:#fdfcfe;--tgph-purple-2:#faf8ff;--tgph-purple-3:#f4f0fe;--tgph-purple-4:#ebe4ff;--tgph-purple-5:#e1d9ff;--tgph-purple-6:#d4cafe;--tgph-purple-7:#c2b5f5;--tgph-purple-8:#aa99ec;--tgph-purple-9:#654dc4;--tgph-purple-10:#654dc4;--tgph-purple-11:#6550b9;--tgph-purple-12:#2f265f;--tgph-border-style-solid:solid;--tgph-border-style-dashed:dashed;--tgph-transparent:transparent;--tgph-white:#fff;--tgph-black:#000;--tgph-alpha-white-1:#ffffff0d;--tgph-alpha-white-2:#ffffff1a;--tgph-alpha-white-3:#ffffff26;--tgph-alpha-white-4:#fff3;--tgph-alpha-white-5:#ffffff4d;--tgph-alpha-white-6:#fff6;--tgph-alpha-white-7:#ffffff80;--tgph-alpha-white-8:#fff9;--tgph-alpha-white-9:#ffffffb3;--tgph-alpha-white-10:#fffc;--tgph-alpha-white-11:#ffffffe6;--tgph-alpha-white-12:#fffffff2;--tgph-alpha-black-1:#0000000d;--tgph-alpha-black-2:#0000001a;--tgph-alpha-black-3:#00000026;--tgph-alpha-black-4:#0003;--tgph-alpha-black-5:#0000004d;--tgph-alpha-black-6:#0006;--tgph-alpha-black-7:#00000080;--tgph-alpha-black-8:#0009;--tgph-alpha-black-9:#000000b3;--tgph-alpha-black-10:#000c;--tgph-alpha-black-11:#000000e6;--tgph-alpha-black-12:#000000f2;--tgph-rounded-0:0px;--tgph-rounded-1:.125rem;--tgph-rounded-2:.25rem;--tgph-rounded-3:.375rem;--tgph-rounded-4:.5rem;--tgph-rounded-5:.75rem;--tgph-rounded-6:1rem;--tgph-rounded-full:9999px;--tgph-shadow-0:0px 0px 0px 0px #0000;--tgph-shadow-1:0px 5px 2px 0px #1c202403,0px 3px 2px 0px #1c202408,0px 1px 1px 0px #1c20240d,0px 0px 1px 0px #1c20240f;--tgph-shadow-2:0px 16px 7px 0px #1c202403,0px 9px 6px 0px #1c202408,0px 4px 4px 0px #1c20240d,0px 1px 2px 0px #1c20240f;--tgph-shadow-3:0px 29px 12px 0px #1c202403,0px 16px 10px 0px #1c202408,0px 7px 7px 0px #1c20240d,0px 2px 4px 0px #1c20240f;--tgph-shadow-inner:0px 5px 2px 0px #1c202403 inset,0px 3px 2px 0px #1c202408 inset,0px 1px 1px 0px #1c20240d inset,0px 0px 1px 0px #1c20240f inset;--tgph-spacing-0:0px;--tgph-spacing-1:.25rem;--tgph-spacing-2:.5rem;--tgph-spacing-3:.75rem;--tgph-spacing-4:1rem;--tgph-spacing-5:1.25rem;--tgph-spacing-6:1.5rem;--tgph-spacing-7:1.75rem;--tgph-spacing-8:2rem;--tgph-spacing-9:2.25rem;--tgph-spacing-10:2.5rem;--tgph-spacing-11:2.75rem;--tgph-spacing-12:3rem;--tgph-spacing-14:3.5rem;--tgph-spacing-16:4rem;--tgph-spacing-20:5rem;--tgph-spacing-24:6rem;--tgph-spacing-28:7rem;--tgph-spacing-32:8rem;--tgph-spacing-36:9rem;--tgph-spacing-40:10rem;--tgph-spacing-44:11rem;--tgph-spacing-48:12rem;--tgph-spacing-52:13rem;--tgph-spacing-56:14rem;--tgph-spacing-60:15rem;--tgph-spacing-64:16rem;--tgph-spacing-72:18rem;--tgph-spacing-80:20rem;--tgph-spacing-96:24rem;--tgph-spacing-140:35rem;--tgph-spacing-160:40rem;--tgph-spacing-px:1px;--tgph-spacing-full:100%;--tgph-spacing-auto:auto;--tgph-family-sans:Inter,-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--tgph-family-mono:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;--tgph-leading-0:1rem;--tgph-leading-1:1rem;--tgph-leading-2:1.25rem;--tgph-leading-3:1.5rem;--tgph-leading-4:1.75rem;--tgph-leading-5:1.75rem;--tgph-leading-6:2rem;--tgph-leading-7:2.25rem;--tgph-leading-8:2.5rem;--tgph-leading-9:3.5rem;--tgph-leading-code-0:1rem;--tgph-leading-code-1:1rem;--tgph-leading-code-2:1.25rem;--tgph-leading-code-3:1.5rem;--tgph-leading-code-4:1.75rem;--tgph-leading-code-5:1.75rem;--tgph-leading-code-6:2rem;--tgph-leading-code-7:2.25rem;--tgph-leading-code-8:2.5rem;--tgph-leading-code-9:3rem;--tgph-tracking-0:.25%;--tgph-tracking-1:.25%;--tgph-tracking-2:0;--tgph-tracking-3:0;--tgph-tracking-4:-.25%;--tgph-tracking-5:-.5%;--tgph-tracking-6:-.625%;--tgph-tracking-7:-.75%;--tgph-tracking-8:-1%;--tgph-tracking-9:-2.5%;--tgph-text-0:.6875rem;--tgph-text-1:.75rem;--tgph-text-2:.875rem;--tgph-text-3:1rem;--tgph-text-4:1.125rem;--tgph-text-5:1.25rem;--tgph-text-6:1.5rem;--tgph-text-7:1.875rem;--tgph-text-8:2.25rem;--tgph-text-9:3rem;--tgph-text-code-0:.625rem;--tgph-text-code-1:.688rem;--tgph-text-code-2:.812rem;--tgph-text-code-4:1.062rem;--tgph-text-code-5:1.188rem;--tgph-text-code-6:1.438rem;--tgph-text-code-7:1.75rem;--tgph-text-code-8:2.125rem;--tgph-text-code-9:2.875rem;--tgph-weight-regular:400;--tgph-weight-medium:500;--tgph-weight-semi-bold:600;--tgph-breakpoint-sm:640px;--tgph-breakpoint-md:768px;--tgph-breakpoint-lg:1024px;--tgph-breakpoint-xl:1280px;--tgph-breakpoint-2xl:1536px;--tgph-zIndex-hidden:-1;--tgph-zIndex-base:0;--tgph-zIndex-auto:auto;--tgph-zIndex-dropdown:1000;--tgph-zIndex-sticky:1100;--tgph-zIndex-banner:1200;--tgph-zIndex-overlay:1300;--tgph-zIndex-modal:1400;--tgph-zIndex-popover:1500;--tgph-zIndex-skipLink:1600;--tgph-zIndex-toast:1700;--tgph-zIndex-tooltip:1800}.tgph-text,.tgph-heading,.tgph-code{--color: var(--tgph-gray-12);--font-size: var(--tgph-text-2);--weight: var(--tgph-weight-regular);--leading: var(--tgph-leading-2);--tracking: var(--tgph-tracking-2);--text-align: left;--font-family: var(--tgph-family-sans);color:var(--color);font-size:var(--font-size);font-weight:var(--weight);line-height:var(--leading);letter-spacing:var(--tracking);text-align:var(--text-align);box-sizing:border-box;font-family:var(--font-family)}.tgph-button{--tgph-button-default-shadow: none;--tgph-button-hover-shadow: none;--tgph-button-focus-shadow: none;--tgph-button-active-shadow: none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;box-sizing:border-box;font-family:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out,box-shadow .2s ease-in-out;text-decoration:none;box-shadow:var(--tgph-button-default-shadow)}.tgph-button:hover{box-shadow:var(--tgph-button-hover-shadow)}.tgph-button:focus{box-shadow:var(--tgph-button-focus-shadow)}.tgph-button[data-tgph-button-state=active]{box-shadow:var(--tgph-button-active-shadow);background-color:var(--active_backgroundColor)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=solid],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=soft],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=outline]{background-color:var(--tgph-gray-3)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=ghost]{background-color:var(--tgph-transparent)}.tgph-button:disabled{cursor:not-allowed}.tgph-button[data-tgph-button-state=disabled]:hover{background-color:revert}[data-tgph-button-loading-icon]{animation:button-loading-icon 1s infinite linear,button-loading-icon-fade-in .2s ease-in-out}@keyframes button-loading-icon{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes button-loading-icon-fade-in{0%{opacity:0}to{opacity:1}}.tgph-icon{display:inline-block}.tgph-box{--background-color: none;--border-color: var(--tgph-gray-6);--border-style: solid;--border-width: 0;--padding: 0;--margin: 0;--border-radius: 0;--width: auto;--max-width: auto;--min-width: auto;--height: auto;--max-height: auto;--min-height: auto;--z-index: auto;--position: static;--top: auto;--left: auto;--right: auto;--bottom: auto;--overflow: visible;background-color:var(--background-color);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);padding:var(--padding);margin:var(--margin);border-radius:var(--border-radius);width:var(--width);max-width:var(--max-width);min-width:var(--min-width);height:var(--height);max-height:var(--max-height);min-height:var(--min-height);z-index:var(--z-index);position:var(--position);top:var(--top);left:var(--left);right:var(--right);bottom:var(--bottom);overflow:var(--overflow)}.tgph-box--interactive{--hover_backgroundColor: none;--focus_backgroundColor: none;--active_backgroundColor: none}.tgph-box--interactive:hover{background-color:var(--hover_backgroundColor)}.tgph-box--interactive:focus{background-color:var(--focus_backgroundColor)}.tgph-box--interactive:active{background-color:var(--active_backgroundColor)}.tgph-stack{--display: flex;--direction: row;--wrap: nowrap;--justify: flex-start;--align: stretch;--gap: 0;display:var(--display);flex-direction:var(--direction);flex-wrap:var(--wrap);justify-content:var(--justify);align-items:var(--align);gap:var(--gap)}.tgph .order-1{order:1}.tgph .order-2{order:2}.tgph .order-3{order:3}.tgph .box-border{box-sizing:border-box}.tgph .flex{display:flex}.tgph .aspect-square{aspect-ratio:1 / 1}.tgph .h-10{height:var(--tgph-spacing-10)}.tgph .h-6{height:var(--tgph-spacing-6)}.tgph .h-8{height:var(--tgph-spacing-8)}.tgph .h-full{height:var(--tgph-spacing-full)}.tgph .w-full{width:var(--tgph-spacing-full)}.tgph .cursor-not-allowed{cursor:not-allowed}.tgph .appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.tgph .items-center{align-items:center}.tgph .justify-center{justify-content:center}.tgph .rounded-2{border-radius:var(--tgph-rounded-2)}.tgph .rounded-3{border-radius:var(--tgph-rounded-3)}.tgph .border,.tgph .border-\[1px\]{border-width:1px}.tgph .border-solid{border-style:solid}.tgph .border-none{border-style:none}.tgph .border-gray-2{border-color:var(--tgph-gray-2)}.tgph .border-gray-6{border-color:var(--tgph-gray-6)}.tgph .border-red-6{border-color:var(--tgph-red-6)}.tgph .border-transparent{border-color:var(--tgph-transparent)}.tgph .bg-gray-2{background-color:var(--tgph-gray-2)}.tgph .bg-surface-1{background-color:var(--tgph-surface-1)}.tgph .bg-transparent{background-color:var(--tgph-transparent)}.tgph .\!p-1{padding:var(--tgph-spacing-1)!important}.tgph .px-1{padding-left:var(--tgph-spacing-1);padding-right:var(--tgph-spacing-1)}.tgph .px-2{padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph .px-3{padding-left:var(--tgph-spacing-3);padding-right:var(--tgph-spacing-3)}.tgph .pl-0{padding-left:var(--tgph-spacing-0)}.tgph .pl-1{padding-left:var(--tgph-spacing-1)}.tgph .pl-2{padding-left:var(--tgph-spacing-2)}.tgph .pl-3{padding-left:var(--tgph-spacing-3)}.tgph .pr-1{padding-right:var(--tgph-spacing-1)}.tgph .pr-2{padding-right:var(--tgph-spacing-2)}.tgph .pr-3{padding-right:var(--tgph-spacing-3)}.tgph .text-gray-12{color:var(--tgph-gray-12)}.tgph .shadow-0{--tw-shadow: var(--tgph-shadow-0);--tw-shadow-colored: var(--tgph-shadow-0);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tgph .outline{outline-style:solid}.tgph .outline-0{outline-width:0px}.tgph .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tgph .\[font-family\:inherit\]{font-family:inherit}.tgph .placeholder\:text-gray-10::-moz-placeholder{color:var(--tgph-gray-10)}.tgph .placeholder\:text-gray-10::placeholder{color:var(--tgph-gray-10)}.tgph .placeholder\:text-gray-9::-moz-placeholder{color:var(--tgph-gray-9)}.tgph .placeholder\:text-gray-9::placeholder{color:var(--tgph-gray-9)}.tgph .focus-within\:\!border-blue-8:focus-within{border-color:var(--tgph-blue-8)!important}.tgph .focus-within\:\!bg-gray-4:focus-within{background-color:var(--tgph-gray-4)!important}.tgph .hover\:border-gray-7:hover{border-color:var(--tgph-gray-7)}.tgph .hover\:bg-gray-3:hover{background-color:var(--tgph-gray-3)}.tgph .\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:aspect-square:has([data-tgph-button-layout=icon-only]){aspect-ratio:1 / 1}.tgph .\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:\!p-1:has([data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-1)!important}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'default\'\]\]\:px-2>[data-tgph-button-layout=default]){padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:aspect-square>[data-tgph-button-layout=icon-only]){aspect-ratio:1 / 1}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:p-0>[data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-0)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:h-auto>[data-tgph-button]){height:var(--tgph-spacing-auto)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:w-full>[data-tgph-button]){width:var(--tgph-spacing-full)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-1>[data-tgph-button]){border-radius:var(--tgph-rounded-1)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-2>[data-tgph-button]){border-radius:var(--tgph-rounded-2)}.tgph :is(.\[\&\>input\]\:text-gray-9>input){color:var(--tgph-gray-9)}.tgph :is(.\[\&_\[data-tgph-icon\]\]\:text-gray-8 [data-tgph-icon]){color:var(--tgph-gray-8)}.tgph-motion{--motion-opacity: 1;--motion-scale: 1;--motion-x: 0;--motion-y: 0;--motion-transition-duration: .2s;--motion-transition-type: ease-in-out;--motion-rotate: 0deg;opacity:var(--motion-opacity);transform:scale(var(--motion-scale)) translate(var(--motion-x),var(--motion-y)) rotate(var(--motion-rotate));transition:all var(--motion-transition-duration) var(--motion-transition-type)}:root{--rtk-font-size-xs: .75rem;--rtk-font-size-sm: .875rem;--rtk-font-size-md: 1rem;--rtk-font-size-lg: 1.125rem;--rtk-font-size-xl: 1.266rem;--rtk-font-size-2xl: 1.5rem;--rtk-font-size-3xl: 1.75rem;--rtk-spacing-0: 0rem;--rtk-spacing-1: .25rem;--rtk-spacing-2: .5rem;--rtk-spacing-3: .75rem;--rtk-spacing-4: 1rem;--rtk-spacing-5: 1.25rem;--rtk-spacing-6: 1.5rem;--rtk-spacing-7: 2rem;--rtk-font-weight-normal: 400;--rtk-font-weight-medium: 500;--rtk-font-weight-semibold: 600;--rtk-font-weight-bold: 700;--rtk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rtk-border-radius-sm: 2px;--rtk-border-radius-md: 4px;--rtk-border-radius-lg: 8px;--rtk-button-border-radius: 6px;--rtk-color-white: #fff;--rtk-color-white-a-75: rgba(255, 255, 255, .75);--rtk-color-black: #000;--rtk-color-gray-900: #1a1f36;--rtk-color-gray-800: #3c4257;--rtk-color-gray-700: #3c4257;--rtk-color-gray-600: #515669;--rtk-color-gray-500: #697386;--rtk-color-gray-400: #9ea0aa;--rtk-color-gray-300: #a5acb8;--rtk-color-gray-200: #dddee1;--rtk-color-gray-100: #e4e8ee;--rtk-color-brand-500: #e95744;--rtk-color-brand-700: #e4321b;--rtk-color-brand-900: #891e10;--rtk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rtk-connected-color: rgba(51, 163, 102, 1);--rtk-disconnect-border-color: rgba(230, 71, 51, 1);--rtk-disconnect-background-color: rgba(255, 245, 245, 1);--rtk-error-red: rgba(205, 123, 46, 1)}.rtk-connect__button{background-color:var(--rtk-color-white);border:1px solid var(--rtk-color-gray-200);border-radius:var(--rtk-button-border-radius);box-sizing:border-box;color:var(--rtk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rtk-font-family-sanserif);font-size:var(--rtk-font-size-sm);font-weight:var(--rtk-font-weight-normal);gap:var(--rtk-spacing-2);padding:var(--rtk-spacing-1) var(--rtk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rtk-connect__button--connected{border-color:var(--rtk-connected-color);color:var(--rtk-connected-color);width:120px}.rtk-connect__button--error{border-color:var(--rtk-error-red);color:var(--rtk-error-red)}.rtk-connect__button--loading{border-color:var(--rtk-color-gray-100);color:var(--rtk-color-gray-400);pointer-events:none}.rtk-connect__button--disconnected:hover{background-color:var(--rtk-button-hover-color)}.rtk-connect__button--connected:hover,.rtk-connect__button__text--connected:hover{background-color:var(--rtk-disconnect-background-color);border-color:var(--rtk-disconnect-border-color);color:var(--rtk-disconnect-border-color)}.rtk-connect__button--error:hover,.rtk-connect__button__text--error:hover{border-color:var(--rtk-color-black);color:var(--rtk-color-black)}.rtk-connect__button:active{transform:translate(1px,1px)}.rtk-auth{background:var(--rtk-color-white);border:1px solid var(--rtk-color-gray-100);border-radius:var(--rtk-border-radius-lg);font-family:var(--rtk-font-family-sanserif);font-size:var(--rtk-font-size-sm);font-weight:var(--rtk-font-weight-normal);padding:var(--rtk-spacing-5)}.rtk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rtk-auth__title{color:#1a1f36;font-size:var(--rtk-font-size-md);line-height:var(--rtk-spacing-5);margin-top:var(--rtk-spacing-4)}.rtk-auth__description{color:#515669;font-size:var(--rtk-font-size-sm);line-height:var(--rtk-spacing-5)}.rtk-combobox__grid{width:352px;display:grid;grid-template-columns:min-content 1fr;align-items:center;font-size:var(--rtk-font-size-sm);font-family:var(--rtk-font-family-sanserif)}.rtk-combobox__options{overflow-y:auto!important;max-height:144px!important}.rtk-combobox__team__value span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.rtk-combobox__error{grid-column:span 2;align-items:flex-start;background-color:var(--rtk-color-gray-100);border-radius:var(--rtk-border-radius-md);display:flex;gap:var(--rtk-spacing-1);padding:var(--rtk-spacing-2)}:root{--rsk-font-size-xs: .75rem;--rsk-font-size-sm: .875rem;--rsk-font-size-md: 1rem;--rsk-font-size-lg: 1.125rem;--rsk-font-size-xl: 1.266rem;--rsk-font-size-2xl: 1.5rem;--rsk-font-size-3xl: 1.75rem;--rsk-spacing-0: 0rem;--rsk-spacing-1: .25rem;--rsk-spacing-2: .5rem;--rsk-spacing-3: .75rem;--rsk-spacing-4: 1rem;--rsk-spacing-5: 1.25rem;--rsk-spacing-6: 1.5rem;--rsk-spacing-7: 2rem;--rsk-font-weight-normal: 400;--rsk-font-weight-medium: 500;--rsk-font-weight-semibold: 600;--rsk-font-weight-bold: 700;--rsk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rsk-border-radius-sm: 2px;--rsk-border-radius-md: 4px;--rsk-border-radius-lg: 8px;--rsk-button-border-radius: 6px;--rsk-color-white: #fff;--rsk-color-white-a-75: rgba(255, 255, 255, .75);--rsk-color-black: #000;--rsk-color-gray-900: #1a1f36;--rsk-color-gray-800: #3c4257;--rsk-color-gray-700: #3c4257;--rsk-color-gray-600: #515669;--rsk-color-gray-500: #697386;--rsk-color-gray-400: #9ea0aa;--rsk-color-gray-300: #a5acb8;--rsk-color-gray-200: #dddee1;--rsk-color-gray-100: #e4e8ee;--rsk-color-brand-500: #e95744;--rsk-color-brand-700: #e4321b;--rsk-color-brand-900: #891e10;--rsk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rsk-connected-color: rgba(51, 163, 102, 1);--rsk-disconnect-border-color: rgba(230, 71, 51, 1);--rsk-disconnect-background-color: rgba(255, 245, 245, 1);--rsk-error-red: rgba(205, 123, 46, 1)}.rsk-connect__button{background-color:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);box-sizing:border-box;color:var(--rsk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);padding:var(--rsk-spacing-1) var(--rsk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rsk-connect__button--connected{border-color:var(--rsk-connected-color);color:var(--rsk-connected-color);width:120px}.rsk-connect__button--error{border-color:var(--rsk-error-red);color:var(--rsk-error-red)}.rsk-connect__button--loading{border-color:var(--rsk-color-gray-100);color:var(--rsk-color-gray-400);pointer-events:none}.rsk-connect__button--disconnected:hover{background-color:var(--rsk-button-hover-color)}.rsk-connect__button--connected:hover,.rsk-connect__button__text--connected:hover{background-color:var(--rsk-disconnect-background-color);border-color:var(--rsk-disconnect-border-color);color:var(--rsk-disconnect-border-color)}.rsk-connect__button--error:hover,.rsk-connect__button__text--error:hover{border-color:var(--rsk-color-black);color:var(--rsk-color-black)}.rsk-connect__button:active{transform:translate(1px,1px)}.rsk-auth{background:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-lg);font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);padding:var(--rsk-spacing-5)}.rsk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rsk-auth__title{color:#1a1f36;font-size:var(--rsk-font-size-md);line-height:var(--rsk-spacing-5);margin-top:var(--rsk-spacing-4)}.rsk-auth__description{color:#515669;font-size:var(--rsk-font-size-sm);line-height:var(--rsk-spacing-5)}.rsk-connect-channel{align-items:center;display:flex;gap:var(--rsk-spacing-1)}.rsk-connect-channel__input{border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);height:32px;padding-left:var(--rsk-spacing-2);width:270px}.rsk-connect-channel__button{background-color:var(--rsk-color-white);border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);color:var(--rsk-color-black);display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);height:24px;padding:var(--rsk-spacing-2);text-decoration:none}.rsk-connect-channel__button:hover{background-color:var(--rsk-button-hover-color)}:root{--rsk-error-yellow: rgba(247, 212, 102, 1);--rsk-error-yellow-background: rgba(255, 255, 240, 1)}.rsk-combobox,.rsk-combobox__list-box,.rsk-combobox__searchbar,.rsk-combobox__searchbar__input-container{width:286px}.rsk-combobox{font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal)}.rsk-combobox__searchbar__input-container{align-items:center;color:var(--rsk-color-gray-200);display:flex;position:relative}.rsk-combobox__searchbar__input-container__icon,.rsk-combobox__searchbar__input-container__icon--error{left:var(--rsk-spacing-3);position:absolute;top:.65rem;z-index:10}.rsk-combobox__searchbar__input-container__icon--error{color:var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input{border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);border-style:solid;border-width:1px;height:32px;padding-left:var(--rsk-spacing-7);padding-right:var(--rsk-spacing-1);position:relative;width:100%}.rsk-combobox__searchbar__input-container__input:disabled{background-color:var(--rsk-error-yellow-background);border:1px solid var(--rsk-error-yellow)}.rsk-combobox__searchbar__input-container__input--error{cursor:not-allowed}.rsk-combobox__searchbar__input-container__input--error::placeholder{color:#a95823}.rsk-combobox__list-box{background-color:var(--rsk-color-white);border-radius:var(--rsk-border-radius-sm);box-shadow:0 1px 2px #0000000f,0 1px 3px #0000001a;display:flex;flex-direction:column;height:223px;margin-top:var(--rsk-spacing-1);overflow-x:hidden;overflow-y:auto;width:284px}.rsk-combobox__option__button{background-color:var(--rsk-color-white);border-width:var(--rsk-spacing-0);padding:var(--rsk-spacing-2)}.rsk-combobox__option__button:hover{cursor:pointer}.rsk-combobox__option__button:disabled{color:var(--rsk-color-gray-700);cursor:not-allowed}.rsk-combobox__option__text-container{display:flex}.rsk-combobox__option__text-container__empty-icon,.rsk-combobox__option__text-container__channel-icon,.rsk-combobox__option__text-container__connection-icon{height:15px;width:20px}.rsk-combobox__option__text-container__channel-icon{align-items:center;display:flex;justify-content:center}.rsk-combobox__option__text-container__text{height:15px}.rsk-combobox__error{align-items:flex-start;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);justify-content:center;margin-top:var(--rsk-spacing-1);padding:var(--rsk-spacing-2)}.rsk-combobox__error__text{color:var(--rsk-color-gray-700);font-size:var(--rsk-font-size-xs);line-height:normal}.rsk-combobox__connected_channel_tag_list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--rsk-spacing-2);margin-top:var(--rsk-spacing-2);width:286px;font-size:var(--rsk-font-size-sm);font-family:var(--rsk-font-family-sanserif);color:var(--rsk-color-gray-800)}.rsk-combobox__connected_channel_tag{align-items:center;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);max-width:286px;padding:var(--rsk-spacing-1) var(--rsk-spacing-2) var(--rsk-spacing-1) var(--rsk-spacing-2)}.rsk-combobox__connected_channel_tag__delete_button,.rsk-combobox__connected_channel_tag__channel_type_icon,.rsk-combobox__connected_channel_tag__text{display:flex}.rsk-combobox__connected_channel_tag__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rsk-combobox__connected_channel_tag__delete_button{background-color:unset;border-style:none;cursor:pointer;padding:.05rem 0rem 0rem}.rsk-combobox__connected_channel_tag__delete_button:hover{background-color:var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md)}
|
package/dist/cjs/index.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */const o=require("./modules/core/components/Button/Button.js"),n=require("./modules/core/components/Button/ButtonGroup.js"),
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */const o=require("./modules/core/components/Button/Button.js"),n=require("./modules/core/components/Button/ButtonGroup.js"),r=require("./modules/core/components/Icons/Bell.js"),i=require("./modules/core/components/Icons/CheckmarkCircle.js"),c=require("./modules/core/components/Icons/ChevronDown.js"),a=require("./modules/core/components/Icons/CloseCircle.js"),u=require("./modules/core/components/Spinner/Spinner.js"),s=require("./modules/core/hooks/useOnBottomScroll.js"),l=require("./modules/core/hooks/useOutsideClick.js"),C=require("./modules/feed/components/EmptyFeed/EmptyFeed.js"),d=require("./modules/feed/components/NotificationCell/NotificationCell.js"),q=require("./modules/feed/components/NotificationCell/Avatar.js"),h=require("./modules/feed/components/NotificationFeed/NotificationFeed.js"),f=require("./modules/feed/components/NotificationFeed/NotificationFeedHeader.js"),m=require("./modules/feed/components/NotificationFeed/MarkAsRead.js"),B=require("./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.js"),k=require("./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js"),A=require("./modules/feed/components/NotificationIconButton/NotificationIconButton.js"),N=require("./modules/feed/components/UnseenBadge/UnseenBadge.js"),p=require("./modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.js"),b=require("./modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.js"),S=require("./modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.js"),F=require("./modules/slack/components/SlackAuthButton/SlackAuthButton.js"),M=require("./modules/slack/components/SlackAuthContainer/SlackAuthContainer.js"),v=require("./modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js"),t=require("@knocklabs/react-core");exports.Button=o.Button;exports.ButtonGroup=n.ButtonGroup;exports.BellIcon=r.BellIcon;exports.CheckmarkCircle=i.CheckmarkCircle;exports.ChevronDown=c.ChevronDown;exports.CloseCircle=a.CloseCircle;exports.Spinner=u.Spinner;exports.useOnBottomScroll=s;exports.useOutsideClick=l;exports.EmptyFeed=C.EmptyFeed;exports.NotificationCell=d.NotificationCell;exports.Avatar=q.Avatar;exports.NotificationFeed=h.NotificationFeed;exports.NotificationFeedHeader=f.NotificationFeedHeader;exports.MarkAsRead=m.MarkAsRead;exports.NotificationFeedContainer=B.NotificationFeedContainer;exports.NotificationFeedPopover=k.NotificationFeedPopover;exports.NotificationIconButton=A.NotificationIconButton;exports.UnseenBadge=N.UnseenBadge;exports.MsTeamsAuthButton=p.MsTeamsAuthButton;exports.MsTeamsAuthContainer=b.MsTeamsAuthContainer;exports.MsTeamsChannelCombobox=S;exports.SlackAuthButton=F.SlackAuthButton;exports.SlackAuthContainer=M.SlackAuthContainer;exports.SlackChannelCombobox=v.SlackChannelCombobox;Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
|
2
2
|
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1,2 @@
|
|
1
|
+
"use strict";const n=require("react"),f=require("@knocklabs/react-core"),s=require("@telegraph/icon"),l=require("@telegraph/layout"),c=require("@telegraph/typography");;/* empty css */const g=require("./MsTeamsChannelInTeamCombobox.js"),T=require("./MsTeamsConnectionError.js"),b=require("./MsTeamsTeamCombobox.js");;/* empty css */const h=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=h(n),q=({msTeamsChannelsRecipientObject:e,teamQueryOptions:m,channelQueryOptions:u})=>{const[a,i]=n.useState(null),{data:o}=f.useConnectedMsTeamsChannels({msTeamsChannelsRecipientObject:e}),d=n.useCallback(C=>(o==null?void 0:o.filter(r=>r.ms_teams_team_id===C&&!!r.ms_teams_channel_id).length)??0,[o]);return t.default.createElement(l.Stack,{className:"tgph rtk-combobox__grid",gap:"3"},t.default.createElement(c.Text,{color:"gray",size:"2",as:"div"},"Team"),t.default.createElement(b.MsTeamsTeamCombobox,{team:a,onTeamChange:i,getChannelCount:d,queryOptions:m}),t.default.createElement(l.Stack,{alignItems:"center",gap:"3",minHeight:"8",style:{alignSelf:"start"}},t.default.createElement(s.Icon,{color:"gray",size:"1",icon:s.Lucide.CornerDownRight,"aria-hidden":!0}),t.default.createElement(c.Text,{color:"gray",size:"2",as:"div"},"Channel")),t.default.createElement(g.MsTeamsChannelInTeamCombobox,{teamId:a==null?void 0:a.id,msTeamsChannelsRecipientObject:e,queryOptions:u}),t.default.createElement(T,null))};module.exports=q;
|
2
|
+
//# sourceMappingURL=MsTeamsChannelCombobox.js.map
|
package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.js.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MsTeamsChannelCombobox.js","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 Channel\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":"0aAyBMA,EAAmDA,CAAC,CACxDC,+BAAAA,EACAC,iBAAAA,EACAC,oBAAAA,CACF,IAAM,CACJ,KAAM,CAACC,EAAcC,CAAe,EAAIC,WAA6B,IAAI,EAEnE,CAAEC,KAAMC,GAAuBC,8BAA4B,CAC/DR,+BAAAA,CAAAA,CACD,EAEKS,EAAkBC,EACtB,YAACC,IACCJ,GAAAA,YAAAA,EAAoBK,UAEhBC,EAAWC,mBAAqBH,GAChC,CAAC,CAACE,EAAWE,qBACfC,SAAU,EACd,CAACT,CAAkB,CACrB,EAEA,OACGU,EAAA,QAAA,cAAAC,QAAA,CAAM,UAAU,0BAA0B,IAAI,GAC7C,EAAAD,EAAA,QAAA,cAACE,OAAK,CAAA,MAAM,OAAO,KAAK,IAAI,GAAG,OAAK,MAEpC,EACAF,EAAAA,QAAA,cAACG,EACC,oBAAA,CAAA,KAAMjB,EACN,aAAcC,EACd,gBAAAK,EACA,aAAcR,EAAiB,EAEhCgB,EAAA,QAAA,cAAAC,EAAAA,MAAA,CACC,WAAW,SACX,IAAI,IACJ,UAAU,IACV,MAAO,CAAEG,UAAW,OAAA,GAEpBJ,EAAAA,QAAA,cAACK,EAAK,KAAA,CAAA,MAAM,OAAO,KAAK,IAAI,KAAMC,EAAAA,OAAOC,gBAAiB,cAAW,EAAA,CAAA,EACrEP,EAAAA,QAAA,cAACE,QAAK,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,EAAA,SAEpC,CACF,0BACCM,+BACC,CAAA,OAAQtB,GAAAA,YAAAA,EAAcuB,GACtB,+BAAA1B,EACA,aAAcE,EAAoB,EAEpCe,EAAA,QAAA,cAACU,MAAsB,CACzB,CAEJ"}
|
package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.js
ADDED
@@ -0,0 +1,2 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),h=require("@knocklabs/react-core"),l=require("@telegraph/combobox"),y=require("@telegraph/layout"),_=require("../../utils.js"),S=require("./MsTeamsErrorMessage.js"),O=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},a=O(s),v=({teamId:t,msTeamsChannelsRecipientObject:C,queryOptions:f})=>{const{connectionStatus:c}=h.useKnockMsTeamsClient(),{data:n=[]}=h.useMsTeamsChannels({teamId:t,queryOptions:f}),p=s.useMemo(()=>_.sortByDisplayName(n),[n]),{data:o,updateConnectedChannels:T,error:r}=h.useConnectedMsTeamsChannels({msTeamsChannelsRecipientObject:C}),E=s.useMemo(()=>c==="disconnected"||c==="error"||!!r,[c,r]),g=s.useMemo(()=>c==="connecting"||c==="disconnecting",[c]),u=s.useCallback(e=>n.some(m=>m.id===e),[n]),d=s.useCallback(e=>_.toLabelSearchableOption({value:e.id,label:e.displayName}),[]),x=s.useMemo(()=>o==null?void 0:o.filter(e=>e.ms_teams_channel_id&&u(e.ms_teams_channel_id)).map(e=>{const m=n.find(b=>b.id===e.ms_teams_channel_id);return m?d(m):{label:"Loading…",value:e.ms_teams_channel_id}}),[o,u,n,d]);return a.default.createElement(a.default.Fragment,null,a.default.createElement(y.Box,{w:"full",minW:"0"},a.default.createElement(l.Combobox.Root,{value:x,onValueChange:e=>{const b=e.map(_.fromLabelSearchableOption).map(({value:i})=>({ms_teams_team_id:t,ms_teams_channel_id:i})),M=[...(o==null?void 0:o.filter(i=>!i.ms_teams_channel_id||!u(i.ms_teams_channel_id)))??[],...b];T(M).catch(console.error)},placeholder:"Select channels",disabled:t===void 0||E||g||n.length===0,closeOnSelect:!1,layout:"wrap"},a.default.createElement(l.Combobox.Trigger,null),a.default.createElement(l.Combobox.Content,null,a.default.createElement(l.Combobox.Search,null),a.default.createElement(l.Combobox.Options,{className:"rtk-combobox__options"},p.map(e=>a.default.createElement(l.Combobox.Option,{key:e.id,...d(e)}))),a.default.createElement(l.Combobox.Empty,null)))),!!r&&a.default.createElement(S,{message:r}))};exports.MsTeamsChannelInTeamCombobox=v;
|
2
|
+
//# sourceMappingURL=MsTeamsChannelInTeamCombobox.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MsTeamsChannelInTeamCombobox.js","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.tsx"],"sourcesContent":["import { MsTeamsChannel, 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 {\n fromLabelSearchableOption,\n sortByDisplayName,\n toLabelSearchableOption,\n} 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 channelToOption = useCallback(\n (channel: MsTeamsChannel) =>\n toLabelSearchableOption({\n value: channel.id,\n label: channel.displayName,\n }),\n [],\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) => {\n const channel = availableChannels.find(\n (c) => c.id === connection.ms_teams_channel_id,\n );\n return channel\n ? channelToOption(channel)\n : { label: \"Loading…\", value: connection.ms_teams_channel_id! };\n }),\n [\n currentConnections,\n isChannelInThisTeam,\n availableChannels,\n channelToOption,\n ],\n );\n\n return (\n <>\n <Box w=\"full\" minW=\"0\">\n <Combobox.Root\n value={comboboxValue}\n onValueChange={(searchableOptions) => {\n const options = searchableOptions.map(fromLabelSearchableOption);\n const connectedChannelsInThisTeam =\n options.map<MsTeamsChannelConnection>(({ value: 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 />\n <Combobox.Options className=\"rtk-combobox__options\">\n {sortedChannels.map((channel) => (\n <Combobox.Option\n key={channel.id}\n {...channelToOption(channel)}\n />\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","channelToOption","toLabelSearchableOption","value","label","displayName","comboboxValue","filter","connection","ms_teams_channel_id","map","find","c","React","Box","Combobox","searchableOptions","connectedChannelsInThisTeam","fromLabelSearchableOption","ms_teams_team_id","updatedConnections","catch","console","undefined","length","MsTeamsErrorMessage"],"mappings":"6UA0BaA,EAETA,CAAC,CAAEC,OAAAA,EAAQC,+BAAAA,EAAgCC,aAAAA,CAAa,IAAM,CAC1D,KAAA,CAAEC,iBAAAA,GAAqBC,EAAsB,sBAAA,EAE7C,CAAEC,KAAMC,EAAoB,CAAA,GAAOC,qBAAmB,CAC1DP,OAAAA,EACAE,aAAAA,CAAAA,CACD,EAEKM,EAAiBC,EAAAA,QACrB,IAAMC,EAAAA,kBAAkBJ,CAAiB,EACzC,CAACA,CAAiB,CACpB,EAEM,CACJD,KAAMM,EACNC,wBAAAA,EACAC,MAAOC,GACLC,8BAA4B,CAAEd,+BAAAA,CAAAA,CAAgC,EAE5De,EAAeP,EAAAA,QACnB,IACEN,IAAqB,gBACrBA,IAAqB,SACrB,CAAC,CAACW,EACJ,CAACX,EAAkBW,CAAsB,CAC3C,EAEMG,EAAiBR,UACrB,IACEN,IAAqB,cAAgBA,IAAqB,gBAC5D,CAACA,CAAgB,CACnB,EAEMe,EAAsBC,EAAAA,YACzBC,GACCd,EAAkBe,KAAkBC,GAAAA,EAAQC,KAAOH,CAAS,EAC9D,CAACd,CAAiB,CACpB,EAEMkB,EAAkBL,EAAAA,YACrBG,GACCG,EAAAA,wBAAwB,CACtBC,MAAOJ,EAAQC,GACfI,MAAOL,EAAQM,WAAAA,CAChB,EACH,CACF,CAAA,EAEMC,EAAgBpB,EAAAA,QACpB,IACEE,GAAAA,YAAAA,EACImB,OAEEC,GAAAA,EAAWC,qBACXd,EAAoBa,EAAWC,mBAAmB,GAErDC,IAAoBF,GAAA,CACnB,MAAMT,EAAUhB,EAAkB4B,QACzBC,EAAEZ,KAAOQ,EAAWC,mBAC7B,EACOV,OAAAA,EACHE,EAAgBF,CAAO,EACvB,CAAEK,MAAO,WAAYD,MAAOK,EAAWC,mBAAAA,CAAqB,GAEtE,CACErB,EACAO,EACAZ,EACAkB,CAAe,CAEnB,EAEA,OAEIY,UAAA,cAAAA,EAAA,QAAA,SAAA,KAAAA,EAAA,QAAA,cAACC,EAAAA,IAAI,CAAA,EAAE,OAAO,KAAK,KAChBD,EAAAA,QAAA,cAAAE,WAAS,KAAT,CACC,MAAOT,EACP,cAAsCU,GAAA,CAE9BC,MAAAA,EADUD,EAAkBN,IAAIQ,EAAyB,yBAAA,EAErDR,IAA8B,CAAC,CAAEP,MAAON,CAAAA,KAAiB,CAC/DsB,iBAAkB1C,EAClBgC,oBAAqBZ,CACrB,EAAA,EAQEuB,EAAqB,CACzB,IAPAhC,GAAAA,YAAAA,EAAoBmB,OACjBC,GACC,CAACA,EAAWC,qBACZ,CAACd,EAAoBa,EAAWC,mBAAmB,KAClD,CAAA,EAIL,GAAGQ,CAA2B,EAGhC5B,EAAwB+B,CAAkB,EAAEC,MAAMC,QAAQhC,KAAK,CAAA,EAEjE,YAAY,kBACZ,SACEb,IAAW8C,QACX9B,GACAC,GACAX,EAAkByC,SAAW,EAE/B,cAAe,GACf,OAAO,MAAA,EAENX,UAAA,cAAAE,EAAAA,SAAS,QAAT,IAAgB,EACjBF,EAAAA,QAAA,cAACE,EAAAA,SAAS,QAAT,KACEF,EAAA,QAAA,cAAAE,EAAA,SAAS,OAAT,IAAe,EAChBF,EAAA,QAAA,cAACE,WAAS,QAAT,CAAiB,UAAU,uBAAA,EACzB9B,EAAeyB,IACdX,GAAAc,EAAAA,QAAA,cAACE,WAAS,OAAT,CACC,IAAKhB,EAAQC,GACb,GAAIC,EAAgBF,CAAO,CAAE,CAAA,CAEhC,CACH,EACAc,EAAAA,QAAA,cAACE,EAAS,SAAA,MAAT,IAAc,CACjB,CACF,CACF,EACC,CAAC,CAACxB,GACDsB,EAAAA,QAAA,cAACY,EAAoB,CAAA,QAASlC,CAC/B,CAAA,CACH,CAEJ"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
"use strict";const r=require("react"),n=require("@knocklabs/react-core"),s=require("./MsTeamsErrorMessage.js"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=o(r),a=()=>{const{t:e}=n.useTranslations(),{connectionStatus:t}=n.useKnockMsTeamsClient();return t==="disconnected"||t==="error"?c.default.createElement(s,{message:e(t==="disconnected"?"msTeamsConnectionErrorOccurred":"msTeamsConnectionErrorExists")}):null};module.exports=a;
|
2
|
+
//# sourceMappingURL=MsTeamsConnectionError.js.map
|
package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsConnectionError.js.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MsTeamsConnectionError.js","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsConnectionError.tsx"],"sourcesContent":["import { useKnockMsTeamsClient, useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport MsTeamsErrorMessage from \"./MsTeamsErrorMessage\";\n\nconst MsTeamsConnectionError: FunctionComponent = () => {\n const { t } = useTranslations();\n const { connectionStatus } = useKnockMsTeamsClient();\n\n if (connectionStatus === \"disconnected\" || connectionStatus === \"error\") {\n return (\n <MsTeamsErrorMessage\n message={\n connectionStatus === \"disconnected\"\n ? t(\"msTeamsConnectionErrorOccurred\")\n : t(\"msTeamsConnectionErrorExists\")\n }\n />\n );\n }\n\n return null;\n};\n\nexport default MsTeamsConnectionError;\n"],"names":["MsTeamsConnectionError","t","useTranslations","connectionStatus","useKnockMsTeamsClient","React","MsTeamsErrorMessage"],"mappings":"8KAKMA,EAA4CA,IAAM,CAChD,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EACxB,CAAEC,iBAAAA,GAAqBC,EAAsB,sBAAA,EAE/CD,OAAAA,IAAqB,gBAAkBA,IAAqB,QAE5DE,EAAA,QAAA,cAACC,EACC,CAAA,QAEML,EADJE,IAAqB,eACf,iCACA,8BADgC,CAGxC,CAAA,EAIC,IACT"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
"use strict";const a=require("react"),r=require("@telegraph/icon"),o=require("@telegraph/typography"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=c(a),n=({message:e})=>t.default.createElement("div",{className:"rtk-combobox__error"},t.default.createElement("span",null,t.default.createElement(r.Icon,{icon:r.Lucide.Info,color:"black",size:"1","aria-hidden":!0})),t.default.createElement(o.Text,{as:"div",color:"black",size:"1"},e));module.exports=n;
|
2
|
+
//# sourceMappingURL=MsTeamsErrorMessage.js.map
|
package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsErrorMessage.js.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MsTeamsErrorMessage.js","sources":["../../../../../../src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsErrorMessage.tsx"],"sourcesContent":["import { Icon, Lucide } from \"@telegraph/icon\";\nimport { Text } from \"@telegraph/typography\";\nimport { FunctionComponent } from \"react\";\n\ninterface Props {\n message?: string;\n}\n\nconst MsTeamsErrorMessage: FunctionComponent<Props> = ({ message }) => {\n return (\n <div className=\"rtk-combobox__error\">\n <span>\n <Icon icon={Lucide.Info} color=\"black\" size=\"1\" aria-hidden />\n </span>\n <Text as=\"div\" color=\"black\" size=\"1\">\n {message}\n </Text>\n </div>\n );\n};\n\nexport default MsTeamsErrorMessage;\n"],"names":["MsTeamsErrorMessage","message","React","Icon","Lucide","Info","Text"],"mappings":"qKAQMA,EAAgDA,CAAC,CAAEC,QAAAA,CAAQ,IAE5DC,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,qBAAA,EACZA,EAAAA,QAAA,cAAA,OAAA,KACEA,EAAA,QAAA,cAAAC,EAAAA,KAAA,CAAK,KAAMC,EAAAA,OAAOC,KAAM,MAAM,QAAQ,KAAK,IAAI,cAAW,EAAA,CAAA,CAC7D,EACAH,EAAAA,QAAA,cAACI,EAAK,KAAA,CAAA,GAAG,MAAM,MAAM,QAAQ,KAAK,GAC/BL,EAAAA,CACH,CACF"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),f=require("@knocklabs/react-core"),a=require("@telegraph/combobox"),y=require("@telegraph/layout"),r=require("../../utils.js"),E=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},t=E(l),S=({team:o,onTeamChange:p,getChannelCount:m,queryOptions:C})=>{const{connectionStatus:n}=f.useKnockMsTeamsClient(),{data:i,isLoading:u}=f.useMsTeamsTeams({queryOptions:C}),c=l.useMemo(()=>r.sortByDisplayName(i),[i]),x=l.useMemo(()=>n==="disconnected"||n==="error",[n]),T=l.useMemo(()=>n==="connecting"||n==="disconnecting"||u,[n,u]),b=l.useCallback(e=>{const s=m(e.id);return r.toLabelSearchableOption({value:e.id,label:s>0?`${e.displayName} (${s})`:e.displayName})},[m]);return t.default.createElement(y.Box,{w:"full",minW:"0"},t.default.createElement(a.Combobox.Root,{value:o?b(o):void 0,onValueChange:e=>{const{value:s}=r.fromLabelSearchableOption(e),d=c.find(g=>g.id===s);d&&p(d)},placeholder:"Select team",disabled:x||T||c.length===0},t.default.createElement(a.Combobox.Trigger,{className:"rtk-combobox__team__value"}),t.default.createElement(a.Combobox.Content,null,t.default.createElement(a.Combobox.Search,null),t.default.createElement(a.Combobox.Options,{className:"rtk-combobox__options"},c.map(e=>t.default.createElement(a.Combobox.Option,{key:e.id,...b(e)}))),t.default.createElement(a.Combobox.Empty,null))))};exports.MsTeamsTeamCombobox=S;
|
2
|
+
//# sourceMappingURL=MsTeamsTeamCombobox.js.map
|
package/dist/cjs/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.js.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MsTeamsTeamCombobox.js","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, useCallback, useMemo } from \"react\";\n\nimport {\n fromLabelSearchableOption,\n sortByDisplayName,\n toLabelSearchableOption,\n} 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 const teamToOption = useCallback(\n (team: MsTeamsTeam) => {\n const channelCount = getChannelCount(team.id);\n return toLabelSearchableOption({\n value: team.id,\n label:\n channelCount > 0\n ? `${team.displayName} (${channelCount})`\n : team.displayName,\n });\n },\n [getChannelCount],\n );\n\n return (\n <Box w=\"full\" minW=\"0\">\n <Combobox.Root\n value={team ? teamToOption(team) : undefined}\n onValueChange={(searchableOption) => {\n const { value: teamId } = fromLabelSearchableOption(searchableOption);\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 className=\"rtk-combobox__team__value\" />\n <Combobox.Content>\n <Combobox.Search />\n <Combobox.Options className=\"rtk-combobox__options\">\n {sortedTeams.map((team) => (\n <Combobox.Option key={team.id} {...teamToOption(team)} />\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","teamToOption","useCallback","channelCount","id","toLabelSearchableOption","value","label","displayName","Box","React","Combobox","undefined","searchableOption","teamId","fromLabelSearchableOption","selectedTeam","find","length","map"],"mappings":"uSAuBaA,EAETA,CAAC,CAAEC,KAAAA,EAAMC,aAAAA,EAAcC,gBAAAA,EAAiBC,aAAAA,CAAa,IAAM,CACvD,KAAA,CAAEC,iBAAAA,GAAqBC,EAAsB,sBAAA,EAE7C,CAAEC,KAAMC,EAAOC,UAAWC,GAAmBC,kBAAgB,CACjEP,aAAAA,CAAAA,CACD,EAEKQ,EAAcC,EAAAA,QAAQ,IAAMC,EAAAA,kBAAkBN,CAAK,EAAG,CAACA,CAAK,CAAC,EAE7DO,EAAeF,UACnB,IAAMR,IAAqB,gBAAkBA,IAAqB,QAClE,CAACA,CAAgB,CACnB,EAEMW,EAAiBH,EAAAA,QACrB,IACER,IAAqB,cACrBA,IAAqB,iBACrBK,EACF,CAACL,EAAkBK,CAAc,CACnC,EAEMO,EAAeC,cAClBjB,GAAsB,CACfkB,MAAAA,EAAehB,EAAgBF,EAAKmB,EAAE,EAC5C,OAAOC,0BAAwB,CAC7BC,MAAOrB,EAAKmB,GACZG,MACEJ,EAAe,EACX,GAAGlB,EAAKuB,WAAW,KAAKL,CAAY,IACpClB,EAAKuB,WAAAA,CACZ,CAAA,EAEH,CAACrB,CAAe,CAClB,EAEA,+BACGsB,EAAAA,IAAI,CAAA,EAAE,OAAO,KAAK,KAChBC,EAAAA,QAAA,cAAAC,EAAA,SAAS,KAAT,CACC,MAAO1B,EAAOgB,EAAahB,CAAI,EAAI2B,OACnC,cAAqCC,GAAA,CAC7B,KAAA,CAAEP,MAAOQ,CAAAA,EAAWC,EAAAA,0BAA0BF,CAAgB,EAC9DG,EAAepB,EAAYqB,KAAMhC,GAASA,EAAKmB,KAAOU,CAAM,EAC9DE,GACF9B,EAAa8B,CAAY,CAE7B,EACA,YAAY,cACZ,SAAUjB,GAAgBC,GAAkBJ,EAAYsB,SAAW,CAEnE,EAAAR,EAAAA,QAAA,cAACC,EAAAA,SAAS,QAAT,CAAiB,UAAU,2BAA2B,CAAA,EACvDD,EAAAA,QAAA,cAACC,EAAS,SAAA,QAAT,KACCD,EAAAA,QAAA,cAACC,EAAAA,SAAS,OAAT,IAAe,EACfD,EAAA,QAAA,cAAAC,EAAAA,SAAS,QAAT,CAAiB,UAAU,uBACzBf,EAAAA,EAAYuB,IAAKlC,GAChByB,EAAA,QAAA,cAACC,EAAS,SAAA,OAAT,CAAgB,IAAK1B,EAAKmB,GAAI,GAAIH,EAAahB,CAAI,CAAE,CAAA,CACvD,CACH,EACCyB,UAAA,cAAAC,EAAAA,SAAS,MAAT,IAAc,CACjB,CACF,CACF,CAEJ"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="::::",o=e=>e.sort((l,a)=>l.displayName.toLowerCase().localeCompare(a.displayName.toLowerCase())),r=e=>({value:`${e.label}${t}${e.value}`,label:e.label}),s=e=>{const[l,a]=e.value.split(t);return{value:a,label:e.label}};exports.fromLabelSearchableOption=s;exports.sortByDisplayName=o;exports.toLabelSearchableOption=r;
|
2
|
+
//# sourceMappingURL=utils.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/modules/ms-teams/utils.ts"],"sourcesContent":["const SEARCHABLE_OPTION_DELIMITER = \"::::\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\nexport const sortByDisplayName = <T extends { displayName: string }>(\n items: T[],\n) =>\n items.sort((a, b) =>\n a.displayName.toLowerCase().localeCompare(b.displayName.toLowerCase()),\n );\n\n// Telegraph Combobox only supports searching by value, so we use this utility to make teams and channels searchable by their labels\nexport const toLabelSearchableOption = (option: Option): Option => ({\n value: `${option.label}${SEARCHABLE_OPTION_DELIMITER}${option.value}`,\n label: option.label,\n});\n\nexport const fromLabelSearchableOption = (option: Option): Option => {\n const [_, value] = option.value.split(SEARCHABLE_OPTION_DELIMITER);\n return {\n value: value!,\n label: option.label,\n };\n};\n"],"names":["SEARCHABLE_OPTION_DELIMITER","sortByDisplayName","items","sort","a","b","displayName","toLowerCase","localeCompare","toLabelSearchableOption","option","value","label","fromLabelSearchableOption","_","split"],"mappings":"gFAAA,MAAMA,EAA8B,OAOvBC,EACXC,GAEAA,EAAMC,KAAK,CAACC,EAAGC,IACbD,EAAEE,YAAYC,YAAcC,EAAAA,cAAcH,EAAEC,YAAYC,YAAAA,CAAa,CACvE,EAGWE,EAA2BC,IAA4B,CAClEC,MAAO,GAAGD,EAAOE,KAAK,GAAGZ,CAA2B,GAAGU,EAAOC,KAAK,GACnEC,MAAOF,EAAOE,KAChB,GAEaC,EAA6BH,GAA2B,CACnE,KAAM,CAACI,EAAGH,CAAK,EAAID,EAAOC,MAAMI,MAAMf,CAA2B,EAC1D,MAAA,CACLW,MAAAA,EACAC,MAAOF,EAAOE,KAAAA,CAElB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SlackChannelCombobox.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport {\n ContainerObject,\n SlackChannelQueryOptions,\n useConnectedSlackChannels,\n useKnockSlackClient,\n useSlackChannels,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { Spinner, useOutsideClick } from \"../../../core\";\nimport \"../../theme.css\";\nimport SlackAddChannelInput from \"../SlackAddChannelInput/SlackAddChannelInput\";\n\nimport SlackChannelListBox from \"./SlackChannelListBox\";\nimport SlackConnectedChannelTagList from \"./SlackConnectedChannelTagList\";\nimport SlackConnectionError from \"./SlackConnectionError\";\nimport { strContains } from \"./helpers\";\nimport SearchIcon from \"./icons/SearchIcon\";\nimport \"./styles.css\";\n\nconst MAX_ALLOWED_CHANNELS = 1000;\n\nexport type SlackChannelComboboxInputMessages = {\n disconnected: string;\n error: string;\n singleChannelConnected: string;\n multipleChannelsConnected: string;\n noChannelsConnected: string;\n noSlackChannelsFound: string;\n};\n\nexport interface SlackChannelComboboxProps {\n slackChannelsRecipientObject: ContainerObject;\n queryOptions?: SlackChannelQueryOptions;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n inputContainerProps?: React.HTMLAttributes<HTMLDivElement>;\n listBoxProps?: React.HTMLAttributes<HTMLDivElement>;\n channelOptionProps?: React.HtmlHTMLAttributes<HTMLButtonElement>;\n inputMessages?: SlackChannelComboboxInputMessages;\n showConnectedChannelTags?: boolean;\n}\n\nexport const SlackChannelCombobox: FunctionComponent<\n SlackChannelComboboxProps\n> = ({\n slackChannelsRecipientObject,\n queryOptions,\n inputProps,\n inputContainerProps,\n listBoxProps,\n channelOptionProps,\n inputMessages,\n showConnectedChannelTags = false,\n}) => {\n const { t } = useTranslations();\n\n const [comboboxListOpen, setComboboxListOpen] = useState<boolean>(false);\n const [inputValue, setInputValue] = useState(\"\");\n\n // Used to close the combobox when clicking outside of it\n const comboboxRef = useRef(null);\n useOutsideClick({\n ref: comboboxRef,\n fn: () => {\n setInputValue(\"\");\n setComboboxListOpen(false);\n },\n });\n\n // Gather API data\n const { connectionStatus, errorLabel: connectionErrorLabel } =\n useKnockSlackClient();\n\n const { data: slackChannels, isLoading: slackChannelsLoading } =\n useSlackChannels({ queryOptions });\n\n const {\n data: connectedChannels,\n updateConnectedChannels,\n loading: connectedChannelsLoading,\n error: connectedChannelsError,\n updating: connectedChannelsUpdating,\n } = useConnectedSlackChannels({ slackChannelsRecipientObject });\n\n const [currentConnectedChannels, setCurrentConnectedChannels] = useState<\n SlackChannelConnection[] | null\n >(null);\n\n useEffect(() => {\n if (comboboxListOpen) {\n // Timeout to allow for the state to update and the component to re-render\n // when we change the `comboboxListOpen` state upon focus\n setTimeout(() => {\n document.getElementById(\"slack-channel-search\")?.focus();\n }, 0);\n }\n }, [comboboxListOpen]);\n\n useEffect(() => {\n // Used to make sure we're only showing currently available channels to select from.\n // There are cases where a channel is \"connected\" in Knock, but it wouldn't be\n // posting to it if the channel is private and the Slackbot doesn't belong to it,\n // so the channel won't show up here and it won't be posted to.\n const slackChannelsMap = new Map(\n slackChannels.map((channel) => [channel.id, channel]),\n );\n\n const channels =\n connectedChannels?.filter((connectedChannel) => {\n return slackChannelsMap.has(connectedChannel.channel_id || \"\");\n }) || [];\n\n setCurrentConnectedChannels(channels);\n }, [connectedChannels, slackChannels]);\n\n const inErrorState = useMemo(\n () =>\n connectionStatus === \"disconnected\" ||\n connectionStatus === \"error\" ||\n connectedChannelsError,\n [connectedChannelsError, connectionStatus],\n );\n\n const inLoadingState = useMemo(\n () =>\n connectionStatus === \"connecting\" ||\n connectionStatus === \"disconnecting\" ||\n slackChannelsLoading,\n\n [connectionStatus, slackChannelsLoading],\n );\n\n // Construct placeholder text\n const searchPlaceholder = useMemo(() => {\n const DEFAULT_INPUT_MESSAGES = {\n disconnected: t(\"slackSearchbarDisconnected\"),\n multipleChannelsConnected: t(\"slackSearchbarMultipleChannels\"),\n noChannelsConnected: t(\"slackSearchbarNoChannelsConnected\"),\n noSlackChannelsFound: t(\"slackSearchbarNoChannelsFound\"),\n channelsError: t(\"slackSearchbarChannelsError\"),\n };\n\n // Connection status message\n if (connectionStatus === \"disconnected\") {\n return inputMessages?.disconnected || DEFAULT_INPUT_MESSAGES.disconnected;\n }\n\n if (connectionStatus === \"error\") {\n return inputMessages?.error || connectionErrorLabel;\n }\n\n // Channels status messages\n if (!inLoadingState && slackChannels.length === 0) {\n return (\n inputMessages?.noSlackChannelsFound ||\n DEFAULT_INPUT_MESSAGES.noSlackChannelsFound\n );\n }\n\n if (connectedChannelsError) {\n return connectedChannelsError;\n }\n\n const numberConnectedChannels = currentConnectedChannels?.length || 0;\n\n if (currentConnectedChannels && numberConnectedChannels === 0) {\n return (\n inputMessages?.noChannelsConnected ||\n DEFAULT_INPUT_MESSAGES.noChannelsConnected\n );\n }\n\n if (currentConnectedChannels && numberConnectedChannels === 1) {\n const connectedChannel = slackChannels?.find(\n (slackChannel) =>\n slackChannel.id === currentConnectedChannels[0]?.channel_id,\n );\n\n return (\n inputMessages?.singleChannelConnected || `# ${connectedChannel?.name}`\n );\n }\n\n if (currentConnectedChannels && numberConnectedChannels > 1) {\n return (\n inputMessages?.multipleChannelsConnected ||\n `${numberConnectedChannels} channels connected`\n );\n }\n\n return \"\";\n }, [\n connectionStatus,\n inLoadingState,\n slackChannels,\n connectedChannelsError,\n currentConnectedChannels,\n inputMessages,\n connectionErrorLabel,\n t,\n ]);\n\n // Handle channel click\n const handleOptionClick = async (channelId: string) => {\n if (!currentConnectedChannels) {\n return;\n }\n\n const isChannelConnected = currentConnectedChannels.find(\n (channel) => channel.channel_id === channelId,\n );\n\n if (isChannelConnected) {\n const channelsToSendToKnock = currentConnectedChannels.filter(\n (connectedChannel) => connectedChannel.channel_id !== channelId,\n );\n\n setCurrentConnectedChannels(channelsToSendToKnock);\n updateConnectedChannels(channelsToSendToKnock);\n } else {\n const channelsToSendToKnock = [\n ...currentConnectedChannels,\n { channel_id: channelId } as SlackChannelConnection,\n ];\n\n setCurrentConnectedChannels(channelsToSendToKnock);\n updateConnectedChannels(channelsToSendToKnock);\n }\n };\n\n // Handle channel search\n const matchedChannels = slackChannels.filter((slackChannel) =>\n strContains(slackChannel.name, inputValue),\n );\n\n if (slackChannels.length > MAX_ALLOWED_CHANNELS) {\n return (\n <SlackAddChannelInput\n inErrorState={!!inErrorState}\n connectedChannels={currentConnectedChannels || []}\n updateConnectedChannels={updateConnectedChannels}\n connectedChannelsError={connectedChannelsError}\n connectedChannelsUpdating={connectedChannelsUpdating}\n />\n );\n }\n\n return (\n <div ref={comboboxRef} className=\"rsk-combobox\">\n <Popover.Root\n open={connectionStatus !== \"disconnected\" ? comboboxListOpen : false}\n >\n <VisuallyHidden.Root>\n <label htmlFor=\"slack-channel-search\">\n {t(\"slackSearchChannels\")}\n </label>\n </VisuallyHidden.Root>\n <Popover.Trigger asChild>\n <div className=\"rsk-combobox__searchbar\">\n <div\n className={\"rsk-combobox__searchbar__input-container\"}\n {...inputContainerProps}\n >\n <div\n className={`rsk-combobox__searchbar__input-container__icon ${inErrorState && \"rsk-combobox__searchbar__input-container__icon--error\"}`}\n >\n {inLoadingState ? (\n <Spinner size=\"15px\" thickness={3} />\n ) : (\n <SearchIcon />\n )}\n </div>\n\n <input\n className={`rsk-combobox__searchbar__input-container__input ${inErrorState ? \"rsk-combobox__searchbar__input-container__input--error\" : \"\"}`}\n tabIndex={-1}\n id=\"slack-channel-search\"\n type=\"text\"\n onFocus={() =>\n slackChannels.length > 0 && setComboboxListOpen(true)\n }\n onChange={(e) => setInputValue(e.target.value)}\n value={inputValue}\n placeholder={searchPlaceholder || \"\"}\n disabled={!!inErrorState}\n {...inputProps}\n />\n </div>\n\n <SlackConnectionError />\n </div>\n </Popover.Trigger>\n\n <Popover.Content>\n <SlackChannelListBox\n isLoading={slackChannelsLoading || connectedChannelsLoading}\n isUpdating={connectedChannelsUpdating}\n connectedChannels={currentConnectedChannels}\n onClick={handleOptionClick}\n slackChannels={matchedChannels}\n listBoxProps={listBoxProps}\n channelOptionProps={channelOptionProps}\n />\n </Popover.Content>\n </Popover.Root>\n {showConnectedChannelTags && (\n <SlackConnectedChannelTagList\n connectedChannels={currentConnectedChannels}\n slackChannels={slackChannels}\n updateConnectedChannels={handleOptionClick}\n />\n )}\n </div>\n );\n};\n"],"names":["MAX_ALLOWED_CHANNELS","SlackChannelCombobox","slackChannelsRecipientObject","queryOptions","inputProps","inputContainerProps","listBoxProps","channelOptionProps","inputMessages","showConnectedChannelTags","t","useTranslations","comboboxListOpen","setComboboxListOpen","useState","inputValue","setInputValue","comboboxRef","useRef","useOutsideClick","ref","fn","connectionStatus","errorLabel","connectionErrorLabel","useKnockSlackClient","data","slackChannels","isLoading","slackChannelsLoading","useSlackChannels","connectedChannels","updateConnectedChannels","loading","connectedChannelsLoading","error","connectedChannelsError","updating","connectedChannelsUpdating","useConnectedSlackChannels","currentConnectedChannels","setCurrentConnectedChannels","useEffect","setTimeout","getElementById","focus","slackChannelsMap","Map","map","channel","id","channels","filter","connectedChannel","has","channel_id","inErrorState","useMemo","inLoadingState","searchPlaceholder","DEFAULT_INPUT_MESSAGES","disconnected","multipleChannelsConnected","noChannelsConnected","noSlackChannelsFound","channelsError","length","numberConnectedChannels","find","slackChannel","singleChannelConnected","name","handleOptionClick","channelId","channelsToSendToKnock","matchedChannels","strContains","React","SlackAddChannelInput","Popover","VisuallyHidden","Spinner","SearchIcon","e","target","value","SlackConnectionError","SlackChannelListBox","SlackConnectedChannelTagList"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"SlackChannelCombobox.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.tsx"],"sourcesContent":["import { SlackChannelConnection } from \"@knocklabs/client\";\nimport {\n RecipientObject,\n SlackChannelQueryOptions,\n useConnectedSlackChannels,\n useKnockSlackClient,\n useSlackChannels,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { FunctionComponent } from \"react\";\n\nimport { Spinner, useOutsideClick } from \"../../../core\";\nimport \"../../theme.css\";\nimport SlackAddChannelInput from \"../SlackAddChannelInput/SlackAddChannelInput\";\n\nimport SlackChannelListBox from \"./SlackChannelListBox\";\nimport SlackConnectedChannelTagList from \"./SlackConnectedChannelTagList\";\nimport SlackConnectionError from \"./SlackConnectionError\";\nimport { strContains } from \"./helpers\";\nimport SearchIcon from \"./icons/SearchIcon\";\nimport \"./styles.css\";\n\nconst MAX_ALLOWED_CHANNELS = 1000;\n\nexport type SlackChannelComboboxInputMessages = {\n disconnected: string;\n error: string;\n singleChannelConnected: string;\n multipleChannelsConnected: string;\n noChannelsConnected: string;\n noSlackChannelsFound: string;\n};\n\nexport interface SlackChannelComboboxProps {\n slackChannelsRecipientObject: RecipientObject;\n queryOptions?: SlackChannelQueryOptions;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n inputContainerProps?: React.HTMLAttributes<HTMLDivElement>;\n listBoxProps?: React.HTMLAttributes<HTMLDivElement>;\n channelOptionProps?: React.HtmlHTMLAttributes<HTMLButtonElement>;\n inputMessages?: SlackChannelComboboxInputMessages;\n showConnectedChannelTags?: boolean;\n}\n\nexport const SlackChannelCombobox: FunctionComponent<\n SlackChannelComboboxProps\n> = ({\n slackChannelsRecipientObject,\n queryOptions,\n inputProps,\n inputContainerProps,\n listBoxProps,\n channelOptionProps,\n inputMessages,\n showConnectedChannelTags = false,\n}) => {\n const { t } = useTranslations();\n\n const [comboboxListOpen, setComboboxListOpen] = useState<boolean>(false);\n const [inputValue, setInputValue] = useState(\"\");\n\n // Used to close the combobox when clicking outside of it\n const comboboxRef = useRef(null);\n useOutsideClick({\n ref: comboboxRef,\n fn: () => {\n setInputValue(\"\");\n setComboboxListOpen(false);\n },\n });\n\n // Gather API data\n const { connectionStatus, errorLabel: connectionErrorLabel } =\n useKnockSlackClient();\n\n const { data: slackChannels, isLoading: slackChannelsLoading } =\n useSlackChannels({ queryOptions });\n\n const {\n data: connectedChannels,\n updateConnectedChannels,\n loading: connectedChannelsLoading,\n error: connectedChannelsError,\n updating: connectedChannelsUpdating,\n } = useConnectedSlackChannels({ slackChannelsRecipientObject });\n\n const [currentConnectedChannels, setCurrentConnectedChannels] = useState<\n SlackChannelConnection[] | null\n >(null);\n\n useEffect(() => {\n if (comboboxListOpen) {\n // Timeout to allow for the state to update and the component to re-render\n // when we change the `comboboxListOpen` state upon focus\n setTimeout(() => {\n document.getElementById(\"slack-channel-search\")?.focus();\n }, 0);\n }\n }, [comboboxListOpen]);\n\n useEffect(() => {\n // Used to make sure we're only showing currently available channels to select from.\n // There are cases where a channel is \"connected\" in Knock, but it wouldn't be\n // posting to it if the channel is private and the Slackbot doesn't belong to it,\n // so the channel won't show up here and it won't be posted to.\n const slackChannelsMap = new Map(\n slackChannels.map((channel) => [channel.id, channel]),\n );\n\n const channels =\n connectedChannels?.filter((connectedChannel) => {\n return slackChannelsMap.has(connectedChannel.channel_id || \"\");\n }) || [];\n\n setCurrentConnectedChannels(channels);\n }, [connectedChannels, slackChannels]);\n\n const inErrorState = useMemo(\n () =>\n connectionStatus === \"disconnected\" ||\n connectionStatus === \"error\" ||\n connectedChannelsError,\n [connectedChannelsError, connectionStatus],\n );\n\n const inLoadingState = useMemo(\n () =>\n connectionStatus === \"connecting\" ||\n connectionStatus === \"disconnecting\" ||\n slackChannelsLoading,\n\n [connectionStatus, slackChannelsLoading],\n );\n\n // Construct placeholder text\n const searchPlaceholder = useMemo(() => {\n const DEFAULT_INPUT_MESSAGES = {\n disconnected: t(\"slackSearchbarDisconnected\"),\n multipleChannelsConnected: t(\"slackSearchbarMultipleChannels\"),\n noChannelsConnected: t(\"slackSearchbarNoChannelsConnected\"),\n noSlackChannelsFound: t(\"slackSearchbarNoChannelsFound\"),\n channelsError: t(\"slackSearchbarChannelsError\"),\n };\n\n // Connection status message\n if (connectionStatus === \"disconnected\") {\n return inputMessages?.disconnected || DEFAULT_INPUT_MESSAGES.disconnected;\n }\n\n if (connectionStatus === \"error\") {\n return inputMessages?.error || connectionErrorLabel;\n }\n\n // Channels status messages\n if (!inLoadingState && slackChannels.length === 0) {\n return (\n inputMessages?.noSlackChannelsFound ||\n DEFAULT_INPUT_MESSAGES.noSlackChannelsFound\n );\n }\n\n if (connectedChannelsError) {\n return connectedChannelsError;\n }\n\n const numberConnectedChannels = currentConnectedChannels?.length || 0;\n\n if (currentConnectedChannels && numberConnectedChannels === 0) {\n return (\n inputMessages?.noChannelsConnected ||\n DEFAULT_INPUT_MESSAGES.noChannelsConnected\n );\n }\n\n if (currentConnectedChannels && numberConnectedChannels === 1) {\n const connectedChannel = slackChannels?.find(\n (slackChannel) =>\n slackChannel.id === currentConnectedChannels[0]?.channel_id,\n );\n\n return (\n inputMessages?.singleChannelConnected || `# ${connectedChannel?.name}`\n );\n }\n\n if (currentConnectedChannels && numberConnectedChannels > 1) {\n return (\n inputMessages?.multipleChannelsConnected ||\n `${numberConnectedChannels} channels connected`\n );\n }\n\n return \"\";\n }, [\n connectionStatus,\n inLoadingState,\n slackChannels,\n connectedChannelsError,\n currentConnectedChannels,\n inputMessages,\n connectionErrorLabel,\n t,\n ]);\n\n // Handle channel click\n const handleOptionClick = async (channelId: string) => {\n if (!currentConnectedChannels) {\n return;\n }\n\n const isChannelConnected = currentConnectedChannels.find(\n (channel) => channel.channel_id === channelId,\n );\n\n if (isChannelConnected) {\n const channelsToSendToKnock = currentConnectedChannels.filter(\n (connectedChannel) => connectedChannel.channel_id !== channelId,\n );\n\n setCurrentConnectedChannels(channelsToSendToKnock);\n updateConnectedChannels(channelsToSendToKnock);\n } else {\n const channelsToSendToKnock = [\n ...currentConnectedChannels,\n { channel_id: channelId } as SlackChannelConnection,\n ];\n\n setCurrentConnectedChannels(channelsToSendToKnock);\n updateConnectedChannels(channelsToSendToKnock);\n }\n };\n\n // Handle channel search\n const matchedChannels = slackChannels.filter((slackChannel) =>\n strContains(slackChannel.name, inputValue),\n );\n\n if (slackChannels.length > MAX_ALLOWED_CHANNELS) {\n return (\n <SlackAddChannelInput\n inErrorState={!!inErrorState}\n connectedChannels={currentConnectedChannels || []}\n updateConnectedChannels={updateConnectedChannels}\n connectedChannelsError={connectedChannelsError}\n connectedChannelsUpdating={connectedChannelsUpdating}\n />\n );\n }\n\n return (\n <div ref={comboboxRef} className=\"rsk-combobox\">\n <Popover.Root\n open={connectionStatus !== \"disconnected\" ? comboboxListOpen : false}\n >\n <VisuallyHidden.Root>\n <label htmlFor=\"slack-channel-search\">\n {t(\"slackSearchChannels\")}\n </label>\n </VisuallyHidden.Root>\n <Popover.Trigger asChild>\n <div className=\"rsk-combobox__searchbar\">\n <div\n className={\"rsk-combobox__searchbar__input-container\"}\n {...inputContainerProps}\n >\n <div\n className={`rsk-combobox__searchbar__input-container__icon ${inErrorState && \"rsk-combobox__searchbar__input-container__icon--error\"}`}\n >\n {inLoadingState ? (\n <Spinner size=\"15px\" thickness={3} />\n ) : (\n <SearchIcon />\n )}\n </div>\n\n <input\n className={`rsk-combobox__searchbar__input-container__input ${inErrorState ? \"rsk-combobox__searchbar__input-container__input--error\" : \"\"}`}\n tabIndex={-1}\n id=\"slack-channel-search\"\n type=\"text\"\n onFocus={() =>\n slackChannels.length > 0 && setComboboxListOpen(true)\n }\n onChange={(e) => setInputValue(e.target.value)}\n value={inputValue}\n placeholder={searchPlaceholder || \"\"}\n disabled={!!inErrorState}\n {...inputProps}\n />\n </div>\n\n <SlackConnectionError />\n </div>\n </Popover.Trigger>\n\n <Popover.Content>\n <SlackChannelListBox\n isLoading={slackChannelsLoading || connectedChannelsLoading}\n isUpdating={connectedChannelsUpdating}\n connectedChannels={currentConnectedChannels}\n onClick={handleOptionClick}\n slackChannels={matchedChannels}\n listBoxProps={listBoxProps}\n channelOptionProps={channelOptionProps}\n />\n </Popover.Content>\n </Popover.Root>\n {showConnectedChannelTags && (\n <SlackConnectedChannelTagList\n connectedChannels={currentConnectedChannels}\n slackChannels={slackChannels}\n updateConnectedChannels={handleOptionClick}\n />\n )}\n </div>\n );\n};\n"],"names":["MAX_ALLOWED_CHANNELS","SlackChannelCombobox","slackChannelsRecipientObject","queryOptions","inputProps","inputContainerProps","listBoxProps","channelOptionProps","inputMessages","showConnectedChannelTags","t","useTranslations","comboboxListOpen","setComboboxListOpen","useState","inputValue","setInputValue","comboboxRef","useRef","useOutsideClick","ref","fn","connectionStatus","errorLabel","connectionErrorLabel","useKnockSlackClient","data","slackChannels","isLoading","slackChannelsLoading","useSlackChannels","connectedChannels","updateConnectedChannels","loading","connectedChannelsLoading","error","connectedChannelsError","updating","connectedChannelsUpdating","useConnectedSlackChannels","currentConnectedChannels","setCurrentConnectedChannels","useEffect","setTimeout","getElementById","focus","slackChannelsMap","Map","map","channel","id","channels","filter","connectedChannel","has","channel_id","inErrorState","useMemo","inLoadingState","searchPlaceholder","DEFAULT_INPUT_MESSAGES","disconnected","multipleChannelsConnected","noChannelsConnected","noSlackChannelsFound","channelsError","length","numberConnectedChannels","find","slackChannel","singleChannelConnected","name","handleOptionClick","channelId","channelsToSendToKnock","matchedChannels","strContains","React","SlackAddChannelInput","Popover","VisuallyHidden","Spinner","SearchIcon","e","target","value","SlackConnectionError","SlackChannelListBox","SlackConnectedChannelTagList"],"mappings":"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"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";const o=require("react"),r=require("@knocklabs/react-core"),c=require("./icons/InfoIcon.js"),
|
1
|
+
"use strict";const o=require("react"),r=require("@knocklabs/react-core"),c=require("./icons/InfoIcon.js"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=s(o),a=()=>{const{t:e}=r.useTranslations(),{connectionStatus:n}=r.useKnockSlackClient();return n==="disconnected"||n==="error"?t.default.createElement("div",{className:"rsk-combobox__error"},t.default.createElement("span",null,t.default.createElement(c,null)),t.default.createElement("div",{className:"rsk-combobox__error__text"},e(n==="disconnected"?"slackConnectionErrorOccurred":"slackConnectionErrorExists"))):null};module.exports=a;
|
2
2
|
//# sourceMappingURL=SlackConnectionError.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SlackConnectionError.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackConnectionError.tsx"],"sourcesContent":["import { useKnockSlackClient, useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport InfoIcon from \"./icons/InfoIcon\";\n\nconst SlackConnectionError: FunctionComponent = () => {\n const { t } = useTranslations();\n const { connectionStatus } = useKnockSlackClient();\n\n if (connectionStatus === \"disconnected\" || connectionStatus === \"error\") {\n return (\n <div className=\"rsk-combobox__error\">\n <span>\n <InfoIcon />\n </span>\n\n <div className=\"rsk-combobox__error__text\">\n {connectionStatus === \"disconnected\"\n ? t(\"slackConnectionErrorOccurred\")\n : t(\"slackConnectionErrorExists\")}\n </div>\n </div>\n );\n }\n\n return
|
1
|
+
{"version":3,"file":"SlackConnectionError.js","sources":["../../../../../../src/modules/slack/components/SlackChannelCombobox/SlackConnectionError.tsx"],"sourcesContent":["import { useKnockSlackClient, useTranslations } from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\n\nimport InfoIcon from \"./icons/InfoIcon\";\n\nconst SlackConnectionError: FunctionComponent = () => {\n const { t } = useTranslations();\n const { connectionStatus } = useKnockSlackClient();\n\n if (connectionStatus === \"disconnected\" || connectionStatus === \"error\") {\n return (\n <div className=\"rsk-combobox__error\">\n <span>\n <InfoIcon />\n </span>\n\n <div className=\"rsk-combobox__error__text\">\n {connectionStatus === \"disconnected\"\n ? t(\"slackConnectionErrorOccurred\")\n : t(\"slackConnectionErrorExists\")}\n </div>\n </div>\n );\n }\n\n return null;\n};\n\nexport default SlackConnectionError;\n"],"names":["SlackConnectionError","t","useTranslations","connectionStatus","useKnockSlackClient","React","InfoIcon"],"mappings":"yKAKMA,EAA0CA,IAAM,CAC9C,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EACxB,CAAEC,iBAAAA,GAAqBC,EAAoB,oBAAA,EAE7CD,OAAAA,IAAqB,gBAAkBA,IAAqB,QAE5DE,EAAA,QAAA,cAAC,OAAI,UAAU,qBAAA,0BACZ,OACC,KAAAA,EAAA,QAAA,cAACC,EAAQ,IAAA,CACX,EAEAD,EAAAA,QAAA,cAAC,OAAI,UAAU,2BAAA,EAETJ,EADHE,IAAqB,eAChB,+BACA,4BAD8B,CAEtC,CACF,EAIG,IACT"}
|
package/dist/esm/index.mjs
CHANGED
@@ -1,18 +1,18 @@
|
|
1
1
|
/* empty css */
|
2
|
-
import { Button as
|
2
|
+
import { Button as t } from "./modules/core/components/Button/Button.mjs";
|
3
3
|
import { ButtonGroup as m } from "./modules/core/components/Button/ButtonGroup.mjs";
|
4
|
-
import { BellIcon as
|
5
|
-
import { CheckmarkCircle as
|
6
|
-
import { ChevronDown as
|
4
|
+
import { BellIcon as a } from "./modules/core/components/Icons/Bell.mjs";
|
5
|
+
import { CheckmarkCircle as x } from "./modules/core/components/Icons/CheckmarkCircle.mjs";
|
6
|
+
import { ChevronDown as l } from "./modules/core/components/Icons/ChevronDown.mjs";
|
7
7
|
import { CloseCircle as u } from "./modules/core/components/Icons/CloseCircle.mjs";
|
8
8
|
import { Spinner as C } from "./modules/core/components/Spinner/Spinner.mjs";
|
9
|
-
import { default as
|
9
|
+
import { default as h } from "./modules/core/hooks/useOnBottomScroll.mjs";
|
10
10
|
import { default as k } from "./modules/core/hooks/useOutsideClick.mjs";
|
11
11
|
import { EmptyFeed as N } from "./modules/feed/components/EmptyFeed/EmptyFeed.mjs";
|
12
12
|
import { NotificationCell as S } from "./modules/feed/components/NotificationCell/NotificationCell.mjs";
|
13
13
|
import { Avatar as M } from "./modules/feed/components/NotificationCell/Avatar.mjs";
|
14
|
-
import { NotificationFeed as
|
15
|
-
import { NotificationFeedHeader as
|
14
|
+
import { NotificationFeed as T } from "./modules/feed/components/NotificationFeed/NotificationFeed.mjs";
|
15
|
+
import { NotificationFeedHeader as O } from "./modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs";
|
16
16
|
import { MarkAsRead as w } from "./modules/feed/components/NotificationFeed/MarkAsRead.mjs";
|
17
17
|
import { NotificationFeedContainer as D } from "./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs";
|
18
18
|
import { NotificationFeedPopover as G } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs";
|
@@ -20,34 +20,36 @@ import { NotificationIconButton as P } from "./modules/feed/components/Notificat
|
|
20
20
|
import { UnseenBadge as U } from "./modules/feed/components/UnseenBadge/UnseenBadge.mjs";
|
21
21
|
import { MsTeamsAuthButton as q } from "./modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.mjs";
|
22
22
|
import { MsTeamsAuthContainer as J } from "./modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.mjs";
|
23
|
-
import {
|
24
|
-
import {
|
25
|
-
import {
|
23
|
+
import { default as L } from "./modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs";
|
24
|
+
import { SlackAuthButton as V } from "./modules/slack/components/SlackAuthButton/SlackAuthButton.mjs";
|
25
|
+
import { SlackAuthContainer as X } from "./modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs";
|
26
|
+
import { SlackChannelCombobox as Z } from "./modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs";
|
26
27
|
export * from "@knocklabs/react-core";
|
27
28
|
export {
|
28
29
|
M as Avatar,
|
29
|
-
|
30
|
-
|
30
|
+
a as BellIcon,
|
31
|
+
t as Button,
|
31
32
|
m as ButtonGroup,
|
32
|
-
|
33
|
-
|
33
|
+
x as CheckmarkCircle,
|
34
|
+
l as ChevronDown,
|
34
35
|
u as CloseCircle,
|
35
36
|
N as EmptyFeed,
|
36
37
|
w as MarkAsRead,
|
37
38
|
q as MsTeamsAuthButton,
|
38
39
|
J as MsTeamsAuthContainer,
|
40
|
+
L as MsTeamsChannelCombobox,
|
39
41
|
S as NotificationCell,
|
40
|
-
|
42
|
+
T as NotificationFeed,
|
41
43
|
D as NotificationFeedContainer,
|
42
|
-
|
44
|
+
O as NotificationFeedHeader,
|
43
45
|
G as NotificationFeedPopover,
|
44
46
|
P as NotificationIconButton,
|
45
|
-
|
46
|
-
|
47
|
-
|
47
|
+
V as SlackAuthButton,
|
48
|
+
X as SlackAuthContainer,
|
49
|
+
Z as SlackChannelCombobox,
|
48
50
|
C as Spinner,
|
49
51
|
U as UnseenBadge,
|
50
|
-
|
52
|
+
h as useOnBottomScroll,
|
51
53
|
k as useOutsideClick
|
52
54
|
};
|
53
55
|
//# sourceMappingURL=index.mjs.map
|
package/dist/esm/index.mjs.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs
ADDED
@@ -0,0 +1,28 @@
|
|
1
|
+
import e, { useState as d, useCallback as g } from "react";
|
2
|
+
import { useConnectedMsTeamsChannels as f } from "@knocklabs/react-core";
|
3
|
+
import { Icon as u, Lucide as C } from "@telegraph/icon";
|
4
|
+
import { Stack as r } from "@telegraph/layout";
|
5
|
+
import { Text as n } from "@telegraph/typography";
|
6
|
+
/* empty css */
|
7
|
+
import { MsTeamsChannelInTeamCombobox as h } from "./MsTeamsChannelInTeamCombobox.mjs";
|
8
|
+
import _ from "./MsTeamsConnectionError.mjs";
|
9
|
+
import { MsTeamsTeamCombobox as E } from "./MsTeamsTeamCombobox.mjs";
|
10
|
+
/* empty css */
|
11
|
+
const v = ({
|
12
|
+
msTeamsChannelsRecipientObject: o,
|
13
|
+
teamQueryOptions: l,
|
14
|
+
channelQueryOptions: s
|
15
|
+
}) => {
|
16
|
+
const [t, i] = d(null), {
|
17
|
+
data: a
|
18
|
+
} = f({
|
19
|
+
msTeamsChannelsRecipientObject: o
|
20
|
+
}), c = g((p) => (a == null ? void 0 : a.filter((m) => m.ms_teams_team_id === p && !!m.ms_teams_channel_id).length) ?? 0, [a]);
|
21
|
+
return /* @__PURE__ */ e.createElement(r, { className: "tgph rtk-combobox__grid", gap: "3" }, /* @__PURE__ */ e.createElement(n, { color: "gray", size: "2", as: "div" }, "Team"), /* @__PURE__ */ e.createElement(E, { team: t, onTeamChange: i, getChannelCount: c, queryOptions: l }), /* @__PURE__ */ e.createElement(r, { alignItems: "center", gap: "3", minHeight: "8", style: {
|
22
|
+
alignSelf: "start"
|
23
|
+
} }, /* @__PURE__ */ e.createElement(u, { color: "gray", size: "1", icon: C.CornerDownRight, "aria-hidden": !0 }), /* @__PURE__ */ e.createElement(n, { color: "gray", size: "2", as: "div" }, "Channel")), /* @__PURE__ */ e.createElement(h, { teamId: t == null ? void 0 : t.id, msTeamsChannelsRecipientObject: o, queryOptions: s }), /* @__PURE__ */ e.createElement(_, null));
|
24
|
+
};
|
25
|
+
export {
|
26
|
+
v as default
|
27
|
+
};
|
28
|
+
//# sourceMappingURL=MsTeamsChannelCombobox.mjs.map
|
package/dist/esm/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs.map
ADDED
@@ -0,0 +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 Channel\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,SAEpC,CACF,mCACCM,GACC,EAAA,QAAQtB,KAAAA,gBAAAA,EAAcuB,IACtB,gCAAA1B,GACA,cAAcE,GAAoB,GAEpCe,gBAAAA,EAAA,cAACU,OAAsB,CACzB;AAEJ;"}
|