@knocklabs/react 0.2.2 → 0.2.3
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 +9 -0
- package/dist/cjs/index.css +1 -1
- package/dist/cjs/modules/feed/components/NotificationCell/NotificationCell.js +1 -1
- package/dist/cjs/modules/feed/components/NotificationCell/NotificationCell.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeed.js +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeed.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js.map +1 -1
- package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.mjs +69 -52
- package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs +31 -26
- package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs +26 -25
- package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/types/modules/feed/components/NotificationCell/NotificationCell.d.ts +2 -1
- package/dist/types/modules/feed/components/NotificationCell/NotificationCell.d.ts.map +1 -1
- package/dist/types/modules/feed/components/NotificationFeed/NotificationFeed.d.ts +7 -5
- package/dist/types/modules/feed/components/NotificationFeed/NotificationFeed.d.ts.map +1 -1
- package/dist/types/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.d.ts +2 -2
- package/dist/types/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.d.ts.map +1 -1
- package/package.json +3 -3
- package/dist/cjs/modules/feed/components/UnseenBadge/styles.css.js.map +0 -1
- package/dist/cjs/modules/slack/components/SlackAuthContainer/styles.css.js.map +0 -1
- package/dist/cjs/modules/slack/components/SlackChannelCombobox/styles.css.js.map +0 -1
- /package/dist/cjs/modules/{feed/components/NotificationFeedContainer → core/components/Button}/styles.css.js.map +0 -0
- /package/dist/cjs/modules/feed/components/{NotificationIconButton → EmptyFeed}/styles.css.js.map +0 -0
package/CHANGELOG.md
CHANGED
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:normal;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{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{--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)}: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{--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}.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)}: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)}.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)}
|
|
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:normal;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-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-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{--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}: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)}: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}.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{--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)}.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)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("@knocklabs/react-core"),p=require("react"),g=require("../../../core/components/Button/Button.js"),A=require("../../../core/components/Button/ButtonGroup.js");require("lodash.debounce");const B=require("./ArchiveButton.js"),T=require("./Avatar.js");const w=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=w(p);function j(e){e&&e!==""&&setTimeout(()=>window.location.assign(e),200)}const M=i.default.forwardRef(({item:e,onItemClick:l,onButtonClick:d,avatar:v,children:f,archiveButton:x},N)=>{var b;const{feedClient:c,colorMode:y}=o.useKnockFeed(),{locale:h}=o.useTranslations(),s=p.useMemo(()=>e.blocks.reduce((t,a)=>({...t,[a.name]:a}),{}),[e]),_=(b=s.action_url)==null?void 0:b.rendered,m=s.actions,u=i.default.useCallback(()=>(c.markAsInteracted(e),l?l(e):j(_)),[e,_,l,c]),k=i.default.useCallback((t,a)=>(c.markAsInteracted(e),d?d(e,a):j(a.action)),[d,c,e]),q=i.default.useCallback(t=>{switch(t.key){case"Enter":{t.stopPropagation(),u();break}}},[u]),r=e.actors[0];return n.jsx("div",{ref:N,className:`rnf-notification-cell rnf-notification-cell--${y}`,onClick:u,onKeyDown:q,tabIndex:0,children:n.jsxs("div",{className:"rnf-notification-cell__inner",children:[!e.read_at&&n.jsx("div",{className:"rnf-notification-cell__unread-dot"}),o.renderNodeOrFallback(v,r&&"name"in r&&r.name&&n.jsx(T.Avatar,{name:r.name,src:r.avatar})),n.jsxs("div",{className:"rnf-notification-cell__content-outer",children:[s.body&&n.jsx("div",{className:"rnf-notification-cell__content",dangerouslySetInnerHTML:{__html:s.body.rendered}}),m&&n.jsx("div",{className:"rnf-notification-cell__button-group",children:n.jsx(A.ButtonGroup,{children:m.buttons.map((t,a)=>n.jsx(g.Button,{variant:a===0?"primary":"secondary",onClick:C=>k(C,t),children:t.label},t.name))})}),f&&n.jsx("div",{className:"rnf-notification-cell__child-content",children:f}),n.jsx("span",{className:"rnf-notification-cell__timestamp",children:o.formatTimestamp(e.inserted_at,{locale:h})})]}),o.renderNodeOrFallback(x,n.jsx(B.ArchiveButton,{item:e}))]})})});exports.NotificationCell=M;
|
|
2
2
|
//# sourceMappingURL=NotificationCell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationCell.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"NotificationCell.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import {\n ActionButton,\n ButtonSetContentBlock,\n ContentBlock,\n FeedItem,\n MarkdownContentBlock,\n TextContentBlock,\n} from \"@knocklabs/client\";\nimport {\n formatTimestamp,\n renderNodeOrFallback,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, { ReactNode, useMemo } from \"react\";\n\nimport { Button, ButtonGroup } from \"../../../core\";\n\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport { Avatar } from \"./Avatar\";\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n item: FeedItem;\n // Invoked when the outer container is clicked\n onItemClick?: (item: FeedItem) => void;\n // Invoked when a button in the notification cell is clicked\n onButtonClick?: (item: FeedItem, action: ActionButton) => void;\n avatar?: ReactNode;\n children?: ReactNode;\n archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n [name: string]: ContentBlock;\n};\n\nfunction maybeNavigateToUrlWithDelay(url?: string) {\n if (url && url !== \"\") {\n setTimeout(() => window.location.assign(url), 200);\n }\n}\n\nexport const NotificationCell = React.forwardRef<\n HTMLDivElement,\n NotificationCellProps\n>(\n (\n { item, onItemClick, onButtonClick, avatar, children, archiveButton },\n ref,\n ) => {\n const { feedClient, colorMode } = useKnockFeed();\n const { locale } = useTranslations();\n\n const blocksByName: BlockByName = useMemo(() => {\n return item.blocks.reduce((acc, block) => {\n return { ...acc, [block.name]: block };\n }, {});\n }, [item]);\n\n const actionUrl = (blocksByName.action_url as TextContentBlock)?.rendered;\n const buttonSet = blocksByName.actions as ButtonSetContentBlock;\n\n const onContainerClickHandler = React.useCallback(() => {\n // Mark as interacted + read once we click the item\n feedClient.markAsInteracted(item);\n\n if (onItemClick) return onItemClick(item);\n\n return maybeNavigateToUrlWithDelay(actionUrl);\n }, [item, actionUrl, onItemClick, feedClient]);\n\n const onButtonClickHandler = React.useCallback(\n (e: React.MouseEvent, button: ActionButton) => {\n feedClient.markAsInteracted(item);\n\n if (onButtonClick) return onButtonClick(item, button);\n\n return maybeNavigateToUrlWithDelay(button.action);\n },\n [onButtonClick, feedClient, item],\n );\n\n const onKeyDown = React.useCallback(\n (ev: React.KeyboardEvent<HTMLDivElement>) => {\n switch (ev.key) {\n case \"Enter\": {\n ev.stopPropagation();\n onContainerClickHandler();\n break;\n }\n default:\n break;\n }\n },\n [onContainerClickHandler],\n );\n\n const actor = item.actors[0];\n\n return (\n <div\n ref={ref}\n className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n onClick={onContainerClickHandler}\n onKeyDown={onKeyDown}\n tabIndex={0}\n >\n <div className=\"rnf-notification-cell__inner\">\n {!item.read_at && (\n <div className=\"rnf-notification-cell__unread-dot\" />\n )}\n\n {renderNodeOrFallback(\n avatar,\n actor && \"name\" in actor && actor.name && (\n <Avatar name={actor.name} src={actor.avatar} />\n ),\n )}\n\n <div className=\"rnf-notification-cell__content-outer\">\n {blocksByName.body && (\n <div\n className=\"rnf-notification-cell__content\"\n dangerouslySetInnerHTML={{\n __html: (blocksByName.body as MarkdownContentBlock).rendered,\n }}\n />\n )}\n\n {buttonSet && (\n <div className=\"rnf-notification-cell__button-group\">\n <ButtonGroup>\n {buttonSet.buttons.map((button, i) => (\n <Button\n variant={i === 0 ? \"primary\" : \"secondary\"}\n key={button.name}\n onClick={(e) => onButtonClickHandler(e, button)}\n >\n {button.label}\n </Button>\n ))}\n </ButtonGroup>\n </div>\n )}\n\n {children && (\n <div className=\"rnf-notification-cell__child-content\">\n {children}\n </div>\n )}\n\n <span className=\"rnf-notification-cell__timestamp\">\n {formatTimestamp(item.inserted_at, { locale })}\n </span>\n </div>\n\n {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n </div>\n </div>\n );\n },\n);\n"],"names":["maybeNavigateToUrlWithDelay","url","NotificationCell","React","item","onItemClick","onButtonClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","acc","block","actionUrl","_a","buttonSet","onContainerClickHandler","onButtonClickHandler","e","button","onKeyDown","ev","actor","jsx","jsxs","renderNodeOrFallback","Avatar","ButtonGroup","i","Button","formatTimestamp","ArchiveButton"],"mappings":"wdAqCA,SAASA,EAA4BC,EAAc,CAC7CA,GAAOA,IAAQ,IACjB,WAAW,IAAM,OAAO,SAAS,OAAOA,CAAG,EAAG,GAAG,CAErD,CAEO,MAAMC,EAAmBC,EAAM,QAAA,WAIpC,CACE,CAAE,KAAAC,EAAM,YAAAC,EAAa,cAAAC,EAAe,OAAAC,EAAQ,SAAAC,EAAU,cAAAC,CAAc,EACpEC,IACG,OACH,KAAM,CAAE,WAAAC,EAAY,UAAAC,CAAU,EAAIC,EAAa,aAAA,EACzC,CAAE,OAAAC,GAAWC,EAAAA,kBAEbC,EAA4BC,EAAAA,QAAQ,IACjCb,EAAK,OAAO,OAAO,CAACc,EAAKC,KACvB,CAAE,GAAGD,EAAK,CAACC,EAAM,IAAI,EAAGA,CAAM,GACpC,CAAE,CAAA,EACJ,CAACf,CAAI,CAAC,EAEHgB,GAAaC,EAAAL,EAAa,aAAb,YAAAK,EAA8C,SAC3DC,EAAYN,EAAa,QAEzBO,EAA0BpB,UAAM,YAAY,KAEhDQ,EAAW,iBAAiBP,CAAI,EAE5BC,EAAoBA,EAAYD,CAAI,EAEjCJ,EAA4BoB,CAAS,GAC3C,CAAChB,EAAMgB,EAAWf,EAAaM,CAAU,CAAC,EAEvCa,EAAuBrB,EAAAA,QAAM,YACjC,CAACsB,EAAqBC,KACpBf,EAAW,iBAAiBP,CAAI,EAE5BE,EAAsBA,EAAcF,EAAMsB,CAAM,EAE7C1B,EAA4B0B,EAAO,MAAM,GAElD,CAACpB,EAAeK,EAAYP,CAAI,CAAA,EAG5BuB,EAAYxB,EAAAA,QAAM,YACrByB,GAA4C,CAC3C,OAAQA,EAAG,IAAK,CACd,IAAK,QAAS,CACZA,EAAG,gBAAgB,EACKL,IACxB,KACF,CAGF,CACF,EACA,CAACA,CAAuB,CAAA,EAGpBM,EAAQzB,EAAK,OAAO,CAAC,EAGzB,OAAA0B,EAAA,IAAC,MAAA,CACC,IAAApB,EACA,UAAW,gDAAgDE,CAAS,GACpE,QAASW,EACT,UAAAI,EACA,SAAU,EAEV,SAAAI,EAAA,KAAC,MAAI,CAAA,UAAU,+BACZ,SAAA,CAAA,CAAC3B,EAAK,SACJ0B,EAAA,IAAA,MAAA,CAAI,UAAU,oCAAoC,EAGpDE,EAAA,qBACCzB,EACAsB,GAAS,SAAUA,GAASA,EAAM,MAChCC,EAAAA,IAACG,EAAAA,OAAO,CAAA,KAAMJ,EAAM,KAAM,IAAKA,EAAM,MAAQ,CAAA,CAEjD,EAEAE,EAAAA,KAAC,MAAI,CAAA,UAAU,uCACZ,SAAA,CAAAf,EAAa,MACZc,EAAA,IAAC,MAAA,CACC,UAAU,iCACV,wBAAyB,CACvB,OAASd,EAAa,KAA8B,QACtD,CAAA,CACF,EAGDM,GACCQ,EAAA,IAAC,MAAI,CAAA,UAAU,sCACb,SAAAA,EAAA,IAACI,EACE,YAAA,CAAA,SAAAZ,EAAU,QAAQ,IAAI,CAACI,EAAQS,IAC9BL,EAAA,IAACM,EAAA,OAAA,CACC,QAASD,IAAM,EAAI,UAAY,YAE/B,QAAUV,GAAMD,EAAqBC,EAAGC,CAAM,EAE7C,SAAOA,EAAA,KAAA,EAHHA,EAAO,IAAA,CAKf,EACH,CACF,CAAA,EAGDlB,GACCsB,EAAA,IAAC,MAAI,CAAA,UAAU,uCACZ,SAAAtB,EACH,EAGFsB,EAAAA,IAAC,OAAK,CAAA,UAAU,mCACb,SAAAO,kBAAgBjC,EAAK,YAAa,CAAE,OAAAU,CAAO,CAAC,CAC/C,CAAA,CAAA,EACF,EAECkB,EAAqB,qBAAAvB,EAAgBqB,EAAA,IAAAQ,EAAA,cAAA,CAAc,KAAAlC,CAAY,CAAA,CAAE,CAAA,EACpE,CAAA,CAAA,CAGN,CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@knocklabs/client"),o=require("react"),w=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@knocklabs/client"),s=require("@knocklabs/react-core"),o=require("react"),w=require("../../../core/components/Spinner/Spinner.js"),y=require("../../../core/hooks/useOnBottomScroll.js"),R=require("../EmptyFeed/EmptyFeed.js"),I=require("../NotificationCell/NotificationCell.js");const B=require("./NotificationFeedHeader.js");const E=t=>e.jsx(I.NotificationCell,{...t},t.item.id),H=t=>e.jsx(B.NotificationFeedHeader,{...t}),h=({colorMode:t})=>e.jsx("div",{className:"rnf-notification-feed__spinner-container",children:e.jsx(w.Spinner,{thickness:3,size:"16px",color:t==="dark"?"rgba(255, 255, 255, 0.65)":void 0})}),M="https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed",K=({EmptyComponent:t=e.jsx(R.EmptyFeed,{}),renderItem:p=E,onNotificationClick:x,onNotificationButtonClick:N,onMarkAllAsReadClick:S,initialFilterStatus:c=s.FilterStatus.All,header:j,renderHeader:q=H})=>{const[a,u]=o.useState(c),{feedClient:n,useFeedStore:_,colorMode:d}=s.useKnockFeed(),{settings:f}=s.useFeedSettings(n),{t:b}=s.useTranslations(),{pageInfo:m,items:k,networkStatus:i}=_(),g=o.useRef(null);o.useEffect(()=>{u(c)},[c]),o.useEffect(()=>{n.fetch({status:a})},[n,a]);const F=k.length===0,l=r.isRequestInFlight(i),C=o.useCallback(()=>{!l&&m.after&&n.fetchNextPage()},[l,m,n]);return y({ref:g,callback:C,offset:70}),e.jsxs("div",{className:`rnf-notification-feed rnf-notification-feed--${d}`,children:[j||q({setFilterStatus:u,filterStatus:a,onMarkAllAsReadClick:S}),e.jsxs("div",{className:"rnf-notification-feed__container",ref:g,children:[i===r.NetworkStatus.loading&&e.jsx(h,{colorMode:d}),e.jsx("div",{className:"rnf-notification-feed__feed-items-container",children:i!==r.NetworkStatus.loading&&k.map(v=>p({item:v,onItemClick:x,onButtonClick:N}))}),i===r.NetworkStatus.fetchMore&&e.jsx(h,{colorMode:d}),!l&&F&&t]}),(f==null?void 0:f.features.branding_required)&&e.jsx("div",{className:"rnf-notification-feed__knock-branding",children:e.jsx("a",{href:M,target:"_blank",children:b("poweredBy")})})]})};exports.NotificationFeed=K;
|
|
2
2
|
//# sourceMappingURL=NotificationFeed.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationFeed.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem,
|
|
1
|
+
{"version":3,"file":"NotificationFeed.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n ColorMode,\n FilterStatus,\n useFeedSettings,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, {\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n NotificationFeedHeader,\n NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps = {\n item: FeedItem;\n onItemClick?: NotificationCellProps[\"onItemClick\"];\n onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n EmptyComponent?: ReactNode;\n /**\n * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n */\n header?: ReactElement<any>;\n renderItem?: RenderItem;\n renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n initialFilterStatus?: FilterStatus;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n <div className=\"rnf-notification-feed__spinner-container\">\n <Spinner\n thickness={3}\n size=\"16px\"\n color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n />\n </div>\n);\n\nconst poweredByKnockUrl =\n \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n EmptyComponent = <EmptyFeed />,\n renderItem = defaultRenderItem,\n onNotificationClick,\n onNotificationButtonClick,\n onMarkAllAsReadClick,\n initialFilterStatus = FilterStatus.All,\n header,\n renderHeader = defaultRenderHeader,\n}) => {\n const [status, setStatus] = useState(initialFilterStatus);\n const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n const { settings } = useFeedSettings(feedClient);\n const { t } = useTranslations();\n\n const { pageInfo, items, networkStatus } = useFeedStore();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setStatus(initialFilterStatus);\n }, [initialFilterStatus]);\n\n useEffect(() => {\n // When the feed client changes, or the status changes issue a re-fetch\n feedClient.fetch({ status });\n }, [feedClient, status]);\n\n const noItems = items.length === 0;\n const requestInFlight = isRequestInFlight(networkStatus);\n\n // Handle fetching more once we reach the bottom of the list\n const onBottomCallback = useCallback(() => {\n if (!requestInFlight && pageInfo.after) {\n feedClient.fetchNextPage();\n }\n }, [requestInFlight, pageInfo, feedClient]);\n\n // Once we scroll to the bottom of the view we want to automatically fetch\n // more items for the feed and bring them into the list\n useOnBottomScroll({\n ref: containerRef,\n callback: onBottomCallback,\n offset: 70,\n });\n\n return (\n <div\n className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n >\n {header ||\n renderHeader({\n setFilterStatus: setStatus,\n filterStatus: status,\n onMarkAllAsReadClick,\n })}\n\n <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n {networkStatus === NetworkStatus.loading && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n <div className=\"rnf-notification-feed__feed-items-container\">\n {networkStatus !== NetworkStatus.loading &&\n items.map((item: FeedItem) =>\n renderItem({\n item,\n onItemClick: onNotificationClick,\n onButtonClick: onNotificationButtonClick,\n }),\n )}\n </div>\n\n {networkStatus === NetworkStatus.fetchMore && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n {!requestInFlight && noItems && EmptyComponent}\n </div>\n\n {settings?.features.branding_required && (\n <div className=\"rnf-notification-feed__knock-branding\">\n <a href={poweredByKnockUrl} target=\"_blank\">\n {t(\"poweredBy\")}\n </a>\n </div>\n )}\n </div>\n );\n};\n"],"names":["defaultRenderItem","props","jsx","NotificationCell","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","noItems","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","useOnBottomScroll","jsxs","NetworkStatus","item"],"mappings":"4gBAkDA,MAAMA,EAAqBC,GACzBC,EAAA,IAACC,oBAAsC,GAAGF,CAAA,EAAnBA,EAAM,KAAK,EAAe,EAG7CG,EAAuBH,GAC1BC,EAAA,IAAAG,EAAA,uBAAA,CAAwB,GAAGJ,CAAO,CAAA,EAG/BK,EAAiB,CAAC,CAAE,UAAAC,CAAA,IACvBL,EAAA,IAAA,MAAA,CAAI,UAAU,2CACb,SAAAA,EAAA,IAACM,EAAA,QAAA,CACC,UAAW,EACX,KAAK,OACL,MAAOD,IAAc,OAAS,4BAA8B,MAAA,CAC9D,CACF,CAAA,EAGIE,EACJ,qGAEWC,EAAoD,CAAC,CAChE,eAAAC,QAAkBC,EAAU,UAAA,EAAA,EAC5B,WAAAC,EAAab,EACb,oBAAAc,EACA,0BAAAC,EACA,qBAAAC,EACA,oBAAAC,EAAsBC,EAAa,aAAA,IACnC,OAAAC,EACA,aAAAC,EAAehB,CACjB,IAAM,CACJ,KAAM,CAACiB,EAAQC,CAAS,EAAIC,WAASN,CAAmB,EAClD,CAAE,WAAAO,EAAY,aAAAC,EAAc,UAAAlB,GAAcmB,EAAa,aAAA,EACvD,CAAE,SAAAC,CAAA,EAAaC,EAAA,gBAAgBJ,CAAU,EACzC,CAAE,EAAAK,GAAMC,EAAAA,kBAER,CAAE,SAAAC,EAAU,MAAAC,EAAO,cAAAC,GAAkBR,EAAa,EAClDS,EAAeC,SAAuB,IAAI,EAEhDC,EAAAA,UAAU,IAAM,CACdd,EAAUL,CAAmB,CAAA,EAC5B,CAACA,CAAmB,CAAC,EAExBmB,EAAAA,UAAU,IAAM,CAEHZ,EAAA,MAAM,CAAE,OAAAH,CAAA,CAAQ,CAAA,EAC1B,CAACG,EAAYH,CAAM,CAAC,EAEjB,MAAAgB,EAAUL,EAAM,SAAW,EAC3BM,EAAkBC,oBAAkBN,CAAa,EAGjDO,EAAmBC,EAAAA,YAAY,IAAM,CACrC,CAACH,GAAmBP,EAAS,OAC/BP,EAAW,cAAc,CAE1B,EAAA,CAACc,EAAiBP,EAAUP,CAAU,CAAC,EAIxB,OAAAkB,EAAA,CAChB,IAAKR,EACL,SAAUM,EACV,OAAQ,EAAA,CACT,EAGCG,EAAA,KAAC,MAAA,CACC,UAAW,gDAAgDpC,CAAS,GAEnE,SAAA,CAAAY,GACCC,EAAa,CACX,gBAAiBE,EACjB,aAAcD,EACd,qBAAAL,CAAA,CACD,EAEF2B,EAAA,KAAA,MAAA,CAAI,UAAU,mCAAmC,IAAKT,EACpD,SAAA,CAAAD,IAAkBW,EAAc,cAAA,SAC9B1C,EAAA,IAAAI,EAAA,CAAe,UAAAC,EAAsB,QAGvC,MAAI,CAAA,UAAU,8CACZ,SAAkB0B,IAAAW,EAAA,cAAc,SAC/BZ,EAAM,IAAKa,GACThC,EAAW,CACT,KAAAgC,EACA,YAAa/B,EACb,cAAeC,CAAA,CAChB,CAAA,EAEP,EAECkB,IAAkBW,EAAA,cAAc,WAC/B1C,EAAA,IAACI,GAAe,UAAAC,EAAsB,EAGvC,CAAC+B,GAAmBD,GAAW1B,CAAA,EAClC,GAECgB,GAAA,YAAAA,EAAU,SAAS,oBACjBzB,EAAA,IAAA,MAAA,CAAI,UAAU,wCACb,SAAAA,EAAA,IAAC,IAAE,CAAA,KAAMO,EAAmB,OAAO,SAChC,SAAEoB,EAAA,WAAW,CAChB,CAAA,EACF,CAAA,CAAA,CAAA,CAIR"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),v=require("@knocklabs/react-core"),q=require("react"),y=require("react-popper"),x=require("../../../core/hooks/useComponentVisible.js"),F=require("../NotificationFeed/NotificationFeed.js");require("../NotificationFeed/NotificationFeedHeader.js");const N=({store:e,feedClient:t})=>{e.metadata.unseen_count>0&&t.markAllAsSeen()},j=({isVisible:e,onOpen:t=N,onClose:c,buttonRef:s,closeOnClickOutside:f=!0,placement:a="bottom-end",...d})=>{const{colorMode:u,feedClient:r,useFeedStore:p}=v.useKnockFeed(),i=p(),{ref:n}=x(e,c,{closeOnClickOutside:f}),{styles:l,attributes:m}=y.usePopper(s.current,n.current,{strategy:"fixed",placement:a,modifiers:[{name:"offset",options:{offset:[0,8]}}]});return q.useEffect(()=>{e&&t&&t({store:i,feedClient:r})},[e,t,i,r]),o.jsx("div",{className:`rnf-notification-feed-popover rnf-notification-feed-popover--${u}`,style:{...l.popper,visibility:e?"visible":"hidden",opacity:e?1:0},ref:n,...m.popper,role:"dialog",tabIndex:-1,children:o.jsx("div",{className:"rnf-notification-feed-popover__inner",children:o.jsx(F.NotificationFeed,{...d})})})};exports.NotificationFeedPopover=j;
|
|
2
2
|
//# sourceMappingURL=NotificationFeedPopover.js.map
|
package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationFeedPopover.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"NotificationFeedPopover.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { Placement } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\nimport { usePopper } from \"react-popper\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n store: FeedStoreState;\n feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n if (store.metadata.unseen_count > 0) {\n feedClient.markAllAsSeen();\n }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n isVisible: boolean;\n onOpen?: (arg: OnOpenOptions) => void;\n onClose: (e: Event) => void;\n buttonRef: RefObject<HTMLElement>;\n closeOnClickOutside?: boolean;\n placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n NotificationFeedPopoverProps\n> = ({\n isVisible,\n onOpen = defaultOnOpen,\n onClose,\n buttonRef,\n closeOnClickOutside = true,\n placement = \"bottom-end\",\n ...feedProps\n}) => {\n const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n const store = useFeedStore();\n\n const { ref: popperRef } = useComponentVisible(isVisible, onClose, {\n closeOnClickOutside,\n });\n\n const { styles, attributes } = usePopper(\n buttonRef.current,\n popperRef.current,\n {\n strategy: \"fixed\",\n placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 8],\n },\n },\n ],\n },\n );\n\n useEffect(() => {\n // Whenever the feed is opened, we want to invoke the `onOpen` callback\n // function to handle any side effects.\n if (isVisible && onOpen) {\n onOpen({ store, feedClient });\n }\n }, [isVisible, onOpen, store, feedClient]);\n\n return (\n <div\n className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n style={{\n ...styles.popper,\n visibility: isVisible ? \"visible\" : \"hidden\",\n opacity: isVisible ? 1 : 0,\n }}\n ref={popperRef}\n {...attributes.popper}\n role=\"dialog\"\n tabIndex={-1}\n >\n <div className=\"rnf-notification-feed-popover__inner\">\n <NotificationFeed {...feedProps} />\n </div>\n </div>\n );\n};\n"],"names":["defaultOnOpen","store","feedClient","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","colorMode","useFeedStore","useKnockFeed","popperRef","useComponentVisible","styles","attributes","usePopper","useEffect","jsx","NotificationFeed"],"mappings":"mbAgBA,MAAMA,EAAgB,CAAC,CAAE,MAAAC,EAAO,WAAAC,KAAgC,CAC1DD,EAAM,SAAS,aAAe,GAChCC,EAAW,cAAc,CAE7B,EAWaC,EAET,CAAC,CACH,UAAAC,EACA,OAAAC,EAASL,EACT,QAAAM,EACA,UAAAC,EACA,oBAAAC,EAAsB,GACtB,UAAAC,EAAY,aACZ,GAAGC,CACL,IAAM,CACJ,KAAM,CAAE,UAAAC,EAAW,WAAAT,EAAY,aAAAU,GAAiBC,EAAa,aAAA,EACvDZ,EAAQW,IAER,CAAE,IAAKE,CAAA,EAAcC,EAAoBX,EAAWE,EAAS,CACjE,oBAAAE,CAAA,CACD,EAEK,CAAE,OAAAQ,EAAQ,WAAAC,CAAA,EAAeC,EAAA,UAC7BX,EAAU,QACVO,EAAU,QACV,CACE,SAAU,QACV,UAAAL,EACA,UAAW,CACT,CACE,KAAM,SACN,QAAS,CACP,OAAQ,CAAC,EAAG,CAAC,CACf,CACF,CACF,CACF,CAAA,EAGFU,OAAAA,EAAAA,UAAU,IAAM,CAGVf,GAAaC,GACRA,EAAA,CAAE,MAAAJ,EAAO,WAAAC,CAAA,CAAY,GAE7B,CAACE,EAAWC,EAAQJ,EAAOC,CAAU,CAAC,EAGvCkB,EAAA,IAAC,MAAA,CACC,UAAW,gEAAgET,CAAS,GACpF,MAAO,CACL,GAAGK,EAAO,OACV,WAAYZ,EAAY,UAAY,SACpC,QAASA,EAAY,EAAI,CAC3B,EACA,IAAKU,EACJ,GAAGG,EAAW,OACf,KAAK,SACL,SAAU,GAEV,SAAAG,EAAA,IAAC,OAAI,UAAU,uCACb,eAACC,EAAAA,iBAAkB,CAAA,GAAGX,EAAW,CACnC,CAAA,CAAA,CAAA,CAGN"}
|
|
@@ -1,58 +1,75 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
1
|
+
import { jsx as a, jsxs as p } from "react/jsx-runtime";
|
|
2
|
+
import { useKnockFeed as x, useTranslations as A, renderNodeOrFallback as N, formatTimestamp as B } from "@knocklabs/react-core";
|
|
3
|
+
import i, { useMemo as H } from "react";
|
|
4
|
+
import { Button as M } from "../../../core/components/Button/Button.mjs";
|
|
5
|
+
import { ButtonGroup as j } from "../../../core/components/Button/ButtonGroup.mjs";
|
|
6
|
+
import "lodash.debounce";
|
|
7
|
+
import { ArchiveButton as D } from "./ArchiveButton.mjs";
|
|
8
|
+
import { Avatar as F } from "./Avatar.mjs";
|
|
6
9
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
},
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
10
|
+
function b(n) {
|
|
11
|
+
n && n !== "" && setTimeout(() => window.location.assign(n), 200);
|
|
12
|
+
}
|
|
13
|
+
const P = i.forwardRef(
|
|
14
|
+
({ item: n, onItemClick: l, onButtonClick: s, avatar: h, children: f, archiveButton: v }, k) => {
|
|
15
|
+
var _;
|
|
16
|
+
const { feedClient: t, colorMode: y } = x(), { locale: C } = A(), c = H(() => n.blocks.reduce((e, o) => ({ ...e, [o.name]: o }), {}), [n]), m = (_ = c.action_url) == null ? void 0 : _.rendered, u = c.actions, d = i.useCallback(() => (t.markAsInteracted(n), l ? l(n) : b(m)), [n, m, l, t]), g = i.useCallback(
|
|
17
|
+
(e, o) => (t.markAsInteracted(n), s ? s(n, o) : b(o.action)),
|
|
18
|
+
[s, t, n]
|
|
19
|
+
), w = i.useCallback(
|
|
20
|
+
(e) => {
|
|
21
|
+
switch (e.key) {
|
|
22
|
+
case "Enter": {
|
|
23
|
+
e.stopPropagation(), d();
|
|
24
|
+
break;
|
|
25
|
+
}
|
|
20
26
|
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
[
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
o && "name" in o && o.name && /* @__PURE__ */ e(y, { name: o.name, src: o.avatar })
|
|
38
|
-
),
|
|
39
|
-
/* @__PURE__ */ f("div", { className: "rnf-notification-cell__content-outer", children: [
|
|
40
|
-
a.body && /* @__PURE__ */ e(
|
|
41
|
-
"div",
|
|
42
|
-
{
|
|
43
|
-
className: "rnf-notification-cell__content",
|
|
44
|
-
dangerouslySetInnerHTML: { __html: a.body.rendered }
|
|
45
|
-
}
|
|
27
|
+
},
|
|
28
|
+
[d]
|
|
29
|
+
), r = n.actors[0];
|
|
30
|
+
return /* @__PURE__ */ a(
|
|
31
|
+
"div",
|
|
32
|
+
{
|
|
33
|
+
ref: k,
|
|
34
|
+
className: `rnf-notification-cell rnf-notification-cell--${y}`,
|
|
35
|
+
onClick: d,
|
|
36
|
+
onKeyDown: w,
|
|
37
|
+
tabIndex: 0,
|
|
38
|
+
children: /* @__PURE__ */ p("div", { className: "rnf-notification-cell__inner", children: [
|
|
39
|
+
!n.read_at && /* @__PURE__ */ a("div", { className: "rnf-notification-cell__unread-dot" }),
|
|
40
|
+
N(
|
|
41
|
+
h,
|
|
42
|
+
r && "name" in r && r.name && /* @__PURE__ */ a(F, { name: r.name, src: r.avatar })
|
|
46
43
|
),
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
44
|
+
/* @__PURE__ */ p("div", { className: "rnf-notification-cell__content-outer", children: [
|
|
45
|
+
c.body && /* @__PURE__ */ a(
|
|
46
|
+
"div",
|
|
47
|
+
{
|
|
48
|
+
className: "rnf-notification-cell__content",
|
|
49
|
+
dangerouslySetInnerHTML: {
|
|
50
|
+
__html: c.body.rendered
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
),
|
|
54
|
+
u && /* @__PURE__ */ a("div", { className: "rnf-notification-cell__button-group", children: /* @__PURE__ */ a(j, { children: u.buttons.map((e, o) => /* @__PURE__ */ a(
|
|
55
|
+
M,
|
|
56
|
+
{
|
|
57
|
+
variant: o === 0 ? "primary" : "secondary",
|
|
58
|
+
onClick: (T) => g(T, e),
|
|
59
|
+
children: e.label
|
|
60
|
+
},
|
|
61
|
+
e.name
|
|
62
|
+
)) }) }),
|
|
63
|
+
f && /* @__PURE__ */ a("div", { className: "rnf-notification-cell__child-content", children: f }),
|
|
64
|
+
/* @__PURE__ */ a("span", { className: "rnf-notification-cell__timestamp", children: B(n.inserted_at, { locale: C }) })
|
|
65
|
+
] }),
|
|
66
|
+
N(v, /* @__PURE__ */ a(D, { item: n }))
|
|
67
|
+
] })
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
);
|
|
55
72
|
export {
|
|
56
|
-
|
|
73
|
+
P as NotificationCell
|
|
57
74
|
};
|
|
58
75
|
//# sourceMappingURL=NotificationCell.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationCell.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"NotificationCell.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import {\n ActionButton,\n ButtonSetContentBlock,\n ContentBlock,\n FeedItem,\n MarkdownContentBlock,\n TextContentBlock,\n} from \"@knocklabs/client\";\nimport {\n formatTimestamp,\n renderNodeOrFallback,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, { ReactNode, useMemo } from \"react\";\n\nimport { Button, ButtonGroup } from \"../../../core\";\n\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport { Avatar } from \"./Avatar\";\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n item: FeedItem;\n // Invoked when the outer container is clicked\n onItemClick?: (item: FeedItem) => void;\n // Invoked when a button in the notification cell is clicked\n onButtonClick?: (item: FeedItem, action: ActionButton) => void;\n avatar?: ReactNode;\n children?: ReactNode;\n archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n [name: string]: ContentBlock;\n};\n\nfunction maybeNavigateToUrlWithDelay(url?: string) {\n if (url && url !== \"\") {\n setTimeout(() => window.location.assign(url), 200);\n }\n}\n\nexport const NotificationCell = React.forwardRef<\n HTMLDivElement,\n NotificationCellProps\n>(\n (\n { item, onItemClick, onButtonClick, avatar, children, archiveButton },\n ref,\n ) => {\n const { feedClient, colorMode } = useKnockFeed();\n const { locale } = useTranslations();\n\n const blocksByName: BlockByName = useMemo(() => {\n return item.blocks.reduce((acc, block) => {\n return { ...acc, [block.name]: block };\n }, {});\n }, [item]);\n\n const actionUrl = (blocksByName.action_url as TextContentBlock)?.rendered;\n const buttonSet = blocksByName.actions as ButtonSetContentBlock;\n\n const onContainerClickHandler = React.useCallback(() => {\n // Mark as interacted + read once we click the item\n feedClient.markAsInteracted(item);\n\n if (onItemClick) return onItemClick(item);\n\n return maybeNavigateToUrlWithDelay(actionUrl);\n }, [item, actionUrl, onItemClick, feedClient]);\n\n const onButtonClickHandler = React.useCallback(\n (e: React.MouseEvent, button: ActionButton) => {\n feedClient.markAsInteracted(item);\n\n if (onButtonClick) return onButtonClick(item, button);\n\n return maybeNavigateToUrlWithDelay(button.action);\n },\n [onButtonClick, feedClient, item],\n );\n\n const onKeyDown = React.useCallback(\n (ev: React.KeyboardEvent<HTMLDivElement>) => {\n switch (ev.key) {\n case \"Enter\": {\n ev.stopPropagation();\n onContainerClickHandler();\n break;\n }\n default:\n break;\n }\n },\n [onContainerClickHandler],\n );\n\n const actor = item.actors[0];\n\n return (\n <div\n ref={ref}\n className={`rnf-notification-cell rnf-notification-cell--${colorMode}`}\n onClick={onContainerClickHandler}\n onKeyDown={onKeyDown}\n tabIndex={0}\n >\n <div className=\"rnf-notification-cell__inner\">\n {!item.read_at && (\n <div className=\"rnf-notification-cell__unread-dot\" />\n )}\n\n {renderNodeOrFallback(\n avatar,\n actor && \"name\" in actor && actor.name && (\n <Avatar name={actor.name} src={actor.avatar} />\n ),\n )}\n\n <div className=\"rnf-notification-cell__content-outer\">\n {blocksByName.body && (\n <div\n className=\"rnf-notification-cell__content\"\n dangerouslySetInnerHTML={{\n __html: (blocksByName.body as MarkdownContentBlock).rendered,\n }}\n />\n )}\n\n {buttonSet && (\n <div className=\"rnf-notification-cell__button-group\">\n <ButtonGroup>\n {buttonSet.buttons.map((button, i) => (\n <Button\n variant={i === 0 ? \"primary\" : \"secondary\"}\n key={button.name}\n onClick={(e) => onButtonClickHandler(e, button)}\n >\n {button.label}\n </Button>\n ))}\n </ButtonGroup>\n </div>\n )}\n\n {children && (\n <div className=\"rnf-notification-cell__child-content\">\n {children}\n </div>\n )}\n\n <span className=\"rnf-notification-cell__timestamp\">\n {formatTimestamp(item.inserted_at, { locale })}\n </span>\n </div>\n\n {renderNodeOrFallback(archiveButton, <ArchiveButton item={item} />)}\n </div>\n </div>\n );\n },\n);\n"],"names":["maybeNavigateToUrlWithDelay","url","NotificationCell","React","item","onItemClick","onButtonClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","acc","block","actionUrl","_a","buttonSet","onContainerClickHandler","onButtonClickHandler","button","onKeyDown","ev","actor","jsx","jsxs","renderNodeOrFallback","Avatar","ButtonGroup","i","Button","e","formatTimestamp","ArchiveButton"],"mappings":";;;;;;;;;AAqCA,SAASA,EAA4BC,GAAc;AAC7C,EAAAA,KAAOA,MAAQ,MACjB,WAAW,MAAM,OAAO,SAAS,OAAOA,CAAG,GAAG,GAAG;AAErD;AAEO,MAAMC,IAAmBC,EAAM;AAAA,EAIpC,CACE,EAAE,MAAAC,GAAM,aAAAC,GAAa,eAAAC,GAAe,QAAAC,GAAQ,UAAAC,GAAU,eAAAC,EAAc,GACpEC,MACG;;AACH,UAAM,EAAE,YAAAC,GAAY,WAAAC,EAAU,IAAIC,EAAa,GACzC,EAAE,QAAAC,MAAWC,KAEbC,IAA4BC,EAAQ,MACjCb,EAAK,OAAO,OAAO,CAACc,GAAKC,OACvB,EAAE,GAAGD,GAAK,CAACC,EAAM,IAAI,GAAGA,EAAM,IACpC,CAAE,CAAA,GACJ,CAACf,CAAI,CAAC,GAEHgB,KAAaC,IAAAL,EAAa,eAAb,gBAAAK,EAA8C,UAC3DC,IAAYN,EAAa,SAEzBO,IAA0BpB,EAAM,YAAY,OAEhDQ,EAAW,iBAAiBP,CAAI,GAE5BC,IAAoBA,EAAYD,CAAI,IAEjCJ,EAA4BoB,CAAS,IAC3C,CAAChB,GAAMgB,GAAWf,GAAaM,CAAU,CAAC,GAEvCa,IAAuBrB,EAAM;AAAA,MACjC,CAAC,GAAqBsB,OACpBd,EAAW,iBAAiBP,CAAI,GAE5BE,IAAsBA,EAAcF,GAAMqB,CAAM,IAE7CzB,EAA4ByB,EAAO,MAAM;AAAA,MAElD,CAACnB,GAAeK,GAAYP,CAAI;AAAA,IAAA,GAG5BsB,IAAYvB,EAAM;AAAA,MACtB,CAACwB,MAA4C;AAC3C,gBAAQA,EAAG,KAAK;AAAA,UACd,KAAK,SAAS;AACZ,YAAAA,EAAG,gBAAgB,GACKJ;AACxB;AAAA,UACF;AAAA,QAGF;AAAA,MACF;AAAA,MACA,CAACA,CAAuB;AAAA,IAAA,GAGpBK,IAAQxB,EAAK,OAAO,CAAC;AAGzB,WAAA,gBAAAyB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAnB;AAAA,QACA,WAAW,gDAAgDE,CAAS;AAAA,QACpE,SAASW;AAAA,QACT,WAAAG;AAAA,QACA,UAAU;AAAA,QAEV,UAAA,gBAAAI,EAAC,OAAI,EAAA,WAAU,gCACZ,UAAA;AAAA,UAAA,CAAC1B,EAAK,WACJ,gBAAAyB,EAAA,OAAA,EAAI,WAAU,qCAAoC;AAAA,UAGpDE;AAAA,YACCxB;AAAA,YACAqB,KAAS,UAAUA,KAASA,EAAM,QAChC,gBAAAC,EAACG,GAAO,EAAA,MAAMJ,EAAM,MAAM,KAAKA,EAAM,OAAQ,CAAA;AAAA,UAEjD;AAAA,UAEA,gBAAAE,EAAC,OAAI,EAAA,WAAU,wCACZ,UAAA;AAAA,YAAAd,EAAa,QACZ,gBAAAa;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,yBAAyB;AAAA,kBACvB,QAASb,EAAa,KAA8B;AAAA,gBACtD;AAAA,cAAA;AAAA,YACF;AAAA,YAGDM,KACC,gBAAAO,EAAC,OAAI,EAAA,WAAU,uCACb,UAAA,gBAAAA,EAACI,GACE,EAAA,UAAAX,EAAU,QAAQ,IAAI,CAACG,GAAQS,MAC9B,gBAAAL;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,SAASD,MAAM,IAAI,YAAY;AAAA,gBAE/B,SAAS,CAACE,MAAMZ,EAAqBY,GAAGX,CAAM;AAAA,gBAE7C,UAAOA,EAAA;AAAA,cAAA;AAAA,cAHHA,EAAO;AAAA,YAAA,CAKf,GACH,EACF,CAAA;AAAA,YAGDjB,KACC,gBAAAqB,EAAC,OAAI,EAAA,WAAU,wCACZ,UAAArB,GACH;AAAA,YAGF,gBAAAqB,EAAC,QAAK,EAAA,WAAU,oCACb,UAAAQ,EAAgBjC,EAAK,aAAa,EAAE,QAAAU,EAAO,CAAC,EAC/C,CAAA;AAAA,UAAA,GACF;AAAA,UAECiB,EAAqBtB,GAAgB,gBAAAoB,EAAAS,GAAA,EAAc,MAAAlC,EAAY,CAAA,CAAE;AAAA,QAAA,GACpE;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
|
|
@@ -1,67 +1,72 @@
|
|
|
1
1
|
import { jsxs as p, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { isRequestInFlight as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { useKnockFeed as j, useFeedSettings as E, useTranslations as H, FilterStatus as K } from "@knocklabs/react-core";
|
|
2
|
+
import { isRequestInFlight as B, NetworkStatus as f } from "@knocklabs/client";
|
|
3
|
+
import { useKnockFeed as R, useFeedSettings as y, useTranslations as q, FilterStatus as j } from "@knocklabs/react-core";
|
|
4
|
+
import { useState as E, useRef as H, useEffect as k, useCallback as K } from "react";
|
|
6
5
|
import { Spinner as M } from "../../../core/components/Spinner/Spinner.mjs";
|
|
7
|
-
import
|
|
6
|
+
import z from "../../../core/hooks/useOnBottomScroll.mjs";
|
|
7
|
+
import { EmptyFeed as A } from "../EmptyFeed/EmptyFeed.mjs";
|
|
8
|
+
import { NotificationCell as L } from "../NotificationCell/NotificationCell.mjs";
|
|
8
9
|
|
|
9
|
-
import { NotificationFeedHeader as
|
|
10
|
+
import { NotificationFeedHeader as O } from "./NotificationFeedHeader.mjs";
|
|
10
11
|
|
|
11
|
-
|
|
12
|
-
const O = (t) => /* @__PURE__ */ e(z, { ...t }, t.item.id), P = (t) => /* @__PURE__ */ e(A, { ...t }), h = ({ colorMode: t }) => /* @__PURE__ */ e("div", { className: "rnf-notification-feed__spinner-container", children: /* @__PURE__ */ e(
|
|
12
|
+
const P = (t) => /* @__PURE__ */ e(L, { ...t }, t.item.id), T = (t) => /* @__PURE__ */ e(O, { ...t }), h = ({ colorMode: t }) => /* @__PURE__ */ e("div", { className: "rnf-notification-feed__spinner-container", children: /* @__PURE__ */ e(
|
|
13
13
|
M,
|
|
14
14
|
{
|
|
15
15
|
thickness: 3,
|
|
16
16
|
size: "16px",
|
|
17
17
|
color: t === "dark" ? "rgba(255, 255, 255, 0.65)" : void 0
|
|
18
18
|
}
|
|
19
|
-
) }),
|
|
20
|
-
EmptyComponent: t = /* @__PURE__ */ e(
|
|
21
|
-
renderItem: g =
|
|
19
|
+
) }), U = "https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed", te = ({
|
|
20
|
+
EmptyComponent: t = /* @__PURE__ */ e(A, {}),
|
|
21
|
+
renderItem: g = P,
|
|
22
22
|
onNotificationClick: _,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
onNotificationButtonClick: N,
|
|
24
|
+
onMarkAllAsReadClick: S,
|
|
25
|
+
initialFilterStatus: r = j.All,
|
|
26
|
+
header: b,
|
|
27
|
+
renderHeader: F = T
|
|
27
28
|
}) => {
|
|
28
|
-
const [i, d] =
|
|
29
|
+
const [i, d] = E(r), { feedClient: o, useFeedStore: v, colorMode: c } = R(), { settings: a } = y(o), { t: C } = q(), { pageInfo: m, items: l, networkStatus: n } = v(), u = H(null);
|
|
29
30
|
k(() => {
|
|
30
31
|
d(r);
|
|
31
32
|
}, [r]), k(() => {
|
|
32
33
|
o.fetch({ status: i });
|
|
33
34
|
}, [o, i]);
|
|
34
|
-
const I = l.length === 0, s =
|
|
35
|
+
const I = l.length === 0, s = B(n), w = K(() => {
|
|
35
36
|
!s && m.after && o.fetchNextPage();
|
|
36
37
|
}, [s, m, o]);
|
|
37
|
-
return
|
|
38
|
+
return z({
|
|
38
39
|
ref: u,
|
|
39
40
|
callback: w,
|
|
40
41
|
offset: 70
|
|
41
42
|
}), /* @__PURE__ */ p(
|
|
42
43
|
"div",
|
|
43
44
|
{
|
|
44
|
-
className: `rnf-notification-feed rnf-notification-feed--${
|
|
45
|
+
className: `rnf-notification-feed rnf-notification-feed--${c}`,
|
|
45
46
|
children: [
|
|
46
|
-
|
|
47
|
+
b || F({
|
|
47
48
|
setFilterStatus: d,
|
|
48
49
|
filterStatus: i,
|
|
49
|
-
onMarkAllAsReadClick:
|
|
50
|
+
onMarkAllAsReadClick: S
|
|
50
51
|
}),
|
|
51
52
|
/* @__PURE__ */ p("div", { className: "rnf-notification-feed__container", ref: u, children: [
|
|
52
|
-
n === f.loading && /* @__PURE__ */ e(h, { colorMode:
|
|
53
|
+
n === f.loading && /* @__PURE__ */ e(h, { colorMode: c }),
|
|
53
54
|
/* @__PURE__ */ e("div", { className: "rnf-notification-feed__feed-items-container", children: n !== f.loading && l.map(
|
|
54
|
-
(x) => g({
|
|
55
|
+
(x) => g({
|
|
56
|
+
item: x,
|
|
57
|
+
onItemClick: _,
|
|
58
|
+
onButtonClick: N
|
|
59
|
+
})
|
|
55
60
|
) }),
|
|
56
|
-
n === f.fetchMore && /* @__PURE__ */ e(h, { colorMode:
|
|
61
|
+
n === f.fetchMore && /* @__PURE__ */ e(h, { colorMode: c }),
|
|
57
62
|
!s && I && t
|
|
58
63
|
] }),
|
|
59
|
-
(
|
|
64
|
+
(a == null ? void 0 : a.features.branding_required) && /* @__PURE__ */ e("div", { className: "rnf-notification-feed__knock-branding", children: /* @__PURE__ */ e("a", { href: U, target: "_blank", children: C("poweredBy") }) })
|
|
60
65
|
]
|
|
61
66
|
}
|
|
62
67
|
);
|
|
63
68
|
};
|
|
64
69
|
export {
|
|
65
|
-
|
|
70
|
+
te as NotificationFeed
|
|
66
71
|
};
|
|
67
72
|
//# sourceMappingURL=NotificationFeed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationFeed.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem,
|
|
1
|
+
{"version":3,"file":"NotificationFeed.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n ColorMode,\n FilterStatus,\n useFeedSettings,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport React, {\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n NotificationFeedHeader,\n NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps = {\n item: FeedItem;\n onItemClick?: NotificationCellProps[\"onItemClick\"];\n onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n EmptyComponent?: ReactNode;\n /**\n * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n */\n header?: ReactElement<any>;\n renderItem?: RenderItem;\n renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n initialFilterStatus?: FilterStatus;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n <div className=\"rnf-notification-feed__spinner-container\">\n <Spinner\n thickness={3}\n size=\"16px\"\n color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n />\n </div>\n);\n\nconst poweredByKnockUrl =\n \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n EmptyComponent = <EmptyFeed />,\n renderItem = defaultRenderItem,\n onNotificationClick,\n onNotificationButtonClick,\n onMarkAllAsReadClick,\n initialFilterStatus = FilterStatus.All,\n header,\n renderHeader = defaultRenderHeader,\n}) => {\n const [status, setStatus] = useState(initialFilterStatus);\n const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n const { settings } = useFeedSettings(feedClient);\n const { t } = useTranslations();\n\n const { pageInfo, items, networkStatus } = useFeedStore();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setStatus(initialFilterStatus);\n }, [initialFilterStatus]);\n\n useEffect(() => {\n // When the feed client changes, or the status changes issue a re-fetch\n feedClient.fetch({ status });\n }, [feedClient, status]);\n\n const noItems = items.length === 0;\n const requestInFlight = isRequestInFlight(networkStatus);\n\n // Handle fetching more once we reach the bottom of the list\n const onBottomCallback = useCallback(() => {\n if (!requestInFlight && pageInfo.after) {\n feedClient.fetchNextPage();\n }\n }, [requestInFlight, pageInfo, feedClient]);\n\n // Once we scroll to the bottom of the view we want to automatically fetch\n // more items for the feed and bring them into the list\n useOnBottomScroll({\n ref: containerRef,\n callback: onBottomCallback,\n offset: 70,\n });\n\n return (\n <div\n className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n >\n {header ||\n renderHeader({\n setFilterStatus: setStatus,\n filterStatus: status,\n onMarkAllAsReadClick,\n })}\n\n <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n {networkStatus === NetworkStatus.loading && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n <div className=\"rnf-notification-feed__feed-items-container\">\n {networkStatus !== NetworkStatus.loading &&\n items.map((item: FeedItem) =>\n renderItem({\n item,\n onItemClick: onNotificationClick,\n onButtonClick: onNotificationButtonClick,\n }),\n )}\n </div>\n\n {networkStatus === NetworkStatus.fetchMore && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n {!requestInFlight && noItems && EmptyComponent}\n </div>\n\n {settings?.features.branding_required && (\n <div className=\"rnf-notification-feed__knock-branding\">\n <a href={poweredByKnockUrl} target=\"_blank\">\n {t(\"poweredBy\")}\n </a>\n </div>\n )}\n </div>\n );\n};\n"],"names":["defaultRenderItem","props","jsx","NotificationCell","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","noItems","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","useOnBottomScroll","jsxs","NetworkStatus","item"],"mappings":";;;;;;;;;;;AAkDA,MAAMA,IAAoB,CAACC,MACzB,gBAAAC,EAACC,KAAsC,GAAGF,EAAA,GAAnBA,EAAM,KAAK,EAAe,GAG7CG,IAAsB,CAACH,MAC1B,gBAAAC,EAAAG,GAAA,EAAwB,GAAGJ,EAAO,CAAA,GAG/BK,IAAiB,CAAC,EAAE,WAAAC,EAAA,MACvB,gBAAAL,EAAA,OAAA,EAAI,WAAU,4CACb,UAAA,gBAAAA;AAAA,EAACM;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,IACX,MAAK;AAAA,IACL,OAAOD,MAAc,SAAS,8BAA8B;AAAA,EAAA;AAC9D,EACF,CAAA,GAGIE,IACJ,sGAEWC,KAAoD,CAAC;AAAA,EAChE,gBAAAC,sBAAkBC,GAAU,EAAA;AAAA,EAC5B,YAAAC,IAAab;AAAA,EACb,qBAAAc;AAAA,EACA,2BAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,qBAAAC,IAAsBC,EAAa;AAAA,EACnC,QAAAC;AAAA,EACA,cAAAC,IAAehB;AACjB,MAAM;AACJ,QAAM,CAACiB,GAAQC,CAAS,IAAIC,EAASN,CAAmB,GAClD,EAAE,YAAAO,GAAY,cAAAC,GAAc,WAAAlB,MAAcmB,EAAa,GACvD,EAAE,UAAAC,EAAA,IAAaC,EAAgBJ,CAAU,GACzC,EAAE,GAAAK,MAAMC,KAER,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,MAAkBR,EAAa,GAClDS,IAAeC,EAAuB,IAAI;AAEhD,EAAAC,EAAU,MAAM;AACd,IAAAd,EAAUL,CAAmB;AAAA,EAAA,GAC5B,CAACA,CAAmB,CAAC,GAExBmB,EAAU,MAAM;AAEH,IAAAZ,EAAA,MAAM,EAAE,QAAAH,EAAA,CAAQ;AAAA,EAAA,GAC1B,CAACG,GAAYH,CAAM,CAAC;AAEjB,QAAAgB,IAAUL,EAAM,WAAW,GAC3BM,IAAkBC,EAAkBN,CAAa,GAGjDO,IAAmBC,EAAY,MAAM;AACrC,IAAA,CAACH,KAAmBP,EAAS,SAC/BP,EAAW,cAAc;AAAA,EAE1B,GAAA,CAACc,GAAiBP,GAAUP,CAAU,CAAC;AAIxB,SAAAkB,EAAA;AAAA,IAChB,KAAKR;AAAA,IACL,UAAUM;AAAA,IACV,QAAQ;AAAA,EAAA,CACT,GAGC,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gDAAgDpC,CAAS;AAAA,MAEnE,UAAA;AAAA,QAAAY,KACCC,EAAa;AAAA,UACX,iBAAiBE;AAAA,UACjB,cAAcD;AAAA,UACd,sBAAAL;AAAA,QAAA,CACD;AAAA,QAEF,gBAAA2B,EAAA,OAAA,EAAI,WAAU,oCAAmC,KAAKT,GACpD,UAAA;AAAA,UAAAD,MAAkBW,EAAc,WAC9B,gBAAA1C,EAAAI,GAAA,EAAe,WAAAC,GAAsB;AAAA,4BAGvC,OAAI,EAAA,WAAU,+CACZ,UAAkB0B,MAAAW,EAAc,WAC/BZ,EAAM;AAAA,YAAI,CAACa,MACThC,EAAW;AAAA,cACT,MAAAgC;AAAA,cACA,aAAa/B;AAAA,cACb,eAAeC;AAAA,YAAA,CAChB;AAAA,UAAA,GAEP;AAAA,UAECkB,MAAkBW,EAAc,aAC/B,gBAAA1C,EAACI,KAAe,WAAAC,GAAsB;AAAA,UAGvC,CAAC+B,KAAmBD,KAAW1B;AAAA,QAAA,GAClC;AAAA,SAECgB,KAAA,gBAAAA,EAAU,SAAS,sBACjB,gBAAAzB,EAAA,OAAA,EAAI,WAAU,yCACb,UAAA,gBAAAA,EAAC,KAAE,EAAA,MAAMO,GAAmB,QAAO,UAChC,UAAEoB,EAAA,WAAW,EAChB,CAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useKnockFeed as v } from "@knocklabs/react-core";
|
|
3
|
+
import { useEffect as y } from "react";
|
|
3
4
|
import { usePopper as x } from "react-popper";
|
|
4
|
-
import
|
|
5
|
+
import F from "../../../core/hooks/useComponentVisible.mjs";
|
|
6
|
+
import { NotificationFeed as N } from "../NotificationFeed/NotificationFeed.mjs";
|
|
5
7
|
import "../NotificationFeed/NotificationFeedHeader.mjs";
|
|
6
|
-
import { useKnockFeed as F } from "@knocklabs/react-core";
|
|
7
8
|
|
|
8
|
-
import N from "../../../core/hooks/useComponentVisible.mjs";
|
|
9
9
|
|
|
10
|
-
const
|
|
10
|
+
const h = ({ store: e, feedClient: o }) => {
|
|
11
11
|
e.metadata.unseen_count > 0 && o.markAllAsSeen();
|
|
12
12
|
}, E = ({
|
|
13
13
|
isVisible: e,
|
|
14
|
-
onOpen: o =
|
|
15
|
-
onClose:
|
|
16
|
-
buttonRef:
|
|
17
|
-
closeOnClickOutside:
|
|
18
|
-
placement:
|
|
19
|
-
...
|
|
14
|
+
onOpen: o = h,
|
|
15
|
+
onClose: f,
|
|
16
|
+
buttonRef: p,
|
|
17
|
+
closeOnClickOutside: m = !0,
|
|
18
|
+
placement: s = "bottom-end",
|
|
19
|
+
...c
|
|
20
20
|
}) => {
|
|
21
|
-
const { colorMode:
|
|
22
|
-
closeOnClickOutside:
|
|
23
|
-
}), { styles:
|
|
21
|
+
const { colorMode: d, feedClient: r, useFeedStore: a } = v(), i = a(), { ref: n } = F(e, f, {
|
|
22
|
+
closeOnClickOutside: m
|
|
23
|
+
}), { styles: u, attributes: l } = x(
|
|
24
|
+
p.current,
|
|
24
25
|
n.current,
|
|
25
|
-
r.current,
|
|
26
26
|
{
|
|
27
27
|
strategy: "fixed",
|
|
28
|
-
placement:
|
|
28
|
+
placement: s,
|
|
29
29
|
modifiers: [
|
|
30
30
|
{
|
|
31
31
|
name: "offset",
|
|
@@ -36,21 +36,22 @@ const b = ({ store: e, feedClient: o }) => {
|
|
|
36
36
|
]
|
|
37
37
|
}
|
|
38
38
|
);
|
|
39
|
-
return
|
|
40
|
-
e && o && o({ store:
|
|
41
|
-
}, [e]), /* @__PURE__ */ t(
|
|
39
|
+
return y(() => {
|
|
40
|
+
e && o && o({ store: i, feedClient: r });
|
|
41
|
+
}, [e, o, i, r]), /* @__PURE__ */ t(
|
|
42
42
|
"div",
|
|
43
43
|
{
|
|
44
|
-
className: `rnf-notification-feed-popover rnf-notification-feed-popover--${
|
|
44
|
+
className: `rnf-notification-feed-popover rnf-notification-feed-popover--${d}`,
|
|
45
45
|
style: {
|
|
46
|
-
...
|
|
47
|
-
visibility: e ? "visible" : "hidden"
|
|
46
|
+
...u.popper,
|
|
47
|
+
visibility: e ? "visible" : "hidden",
|
|
48
|
+
opacity: e ? 1 : 0
|
|
48
49
|
},
|
|
49
|
-
ref:
|
|
50
|
-
...
|
|
50
|
+
ref: n,
|
|
51
|
+
...l.popper,
|
|
51
52
|
role: "dialog",
|
|
52
53
|
tabIndex: -1,
|
|
53
|
-
children: /* @__PURE__ */ t("div", { className: "rnf-notification-feed-popover__inner", children: /* @__PURE__ */ t(
|
|
54
|
+
children: /* @__PURE__ */ t("div", { className: "rnf-notification-feed-popover__inner", children: /* @__PURE__ */ t(N, { ...c }) })
|
|
54
55
|
}
|
|
55
56
|
);
|
|
56
57
|
};
|
package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationFeedPopover.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"NotificationFeedPopover.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import { Feed, FeedStoreState } from \"@knocklabs/client\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { Placement } from \"@popperjs/core\";\nimport React, { RefObject, useEffect } from \"react\";\nimport { usePopper } from \"react-popper\";\n\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\n\nimport \"./styles.css\";\n\ntype OnOpenOptions = {\n store: FeedStoreState;\n feedClient: Feed;\n};\n\nconst defaultOnOpen = ({ store, feedClient }: OnOpenOptions) => {\n if (store.metadata.unseen_count > 0) {\n feedClient.markAllAsSeen();\n }\n};\n\nexport interface NotificationFeedPopoverProps extends NotificationFeedProps {\n isVisible: boolean;\n onOpen?: (arg: OnOpenOptions) => void;\n onClose: (e: Event) => void;\n buttonRef: RefObject<HTMLElement>;\n closeOnClickOutside?: boolean;\n placement?: Placement;\n}\n\nexport const NotificationFeedPopover: React.FC<\n NotificationFeedPopoverProps\n> = ({\n isVisible,\n onOpen = defaultOnOpen,\n onClose,\n buttonRef,\n closeOnClickOutside = true,\n placement = \"bottom-end\",\n ...feedProps\n}) => {\n const { colorMode, feedClient, useFeedStore } = useKnockFeed();\n const store = useFeedStore();\n\n const { ref: popperRef } = useComponentVisible(isVisible, onClose, {\n closeOnClickOutside,\n });\n\n const { styles, attributes } = usePopper(\n buttonRef.current,\n popperRef.current,\n {\n strategy: \"fixed\",\n placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 8],\n },\n },\n ],\n },\n );\n\n useEffect(() => {\n // Whenever the feed is opened, we want to invoke the `onOpen` callback\n // function to handle any side effects.\n if (isVisible && onOpen) {\n onOpen({ store, feedClient });\n }\n }, [isVisible, onOpen, store, feedClient]);\n\n return (\n <div\n className={`rnf-notification-feed-popover rnf-notification-feed-popover--${colorMode}`}\n style={{\n ...styles.popper,\n visibility: isVisible ? \"visible\" : \"hidden\",\n opacity: isVisible ? 1 : 0,\n }}\n ref={popperRef}\n {...attributes.popper}\n role=\"dialog\"\n tabIndex={-1}\n >\n <div className=\"rnf-notification-feed-popover__inner\">\n <NotificationFeed {...feedProps} />\n </div>\n </div>\n );\n};\n"],"names":["defaultOnOpen","store","feedClient","NotificationFeedPopover","isVisible","onOpen","onClose","buttonRef","closeOnClickOutside","placement","feedProps","colorMode","useFeedStore","useKnockFeed","popperRef","useComponentVisible","styles","attributes","usePopper","useEffect","jsx","NotificationFeed"],"mappings":";;;;;;;;;AAgBA,MAAMA,IAAgB,CAAC,EAAE,OAAAC,GAAO,YAAAC,QAAgC;AAC1D,EAAAD,EAAM,SAAS,eAAe,KAChCC,EAAW,cAAc;AAE7B,GAWaC,IAET,CAAC;AAAA,EACH,WAAAC;AAAA,EACA,QAAAC,IAASL;AAAA,EACT,SAAAM;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,WAAAC,GAAW,YAAAT,GAAY,cAAAU,MAAiBC,EAAa,GACvDZ,IAAQW,KAER,EAAE,KAAKE,EAAA,IAAcC,EAAoBX,GAAWE,GAAS;AAAA,IACjE,qBAAAE;AAAA,EAAA,CACD,GAEK,EAAE,QAAAQ,GAAQ,YAAAC,EAAA,IAAeC;AAAA,IAC7BX,EAAU;AAAA,IACVO,EAAU;AAAA,IACV;AAAA,MACE,UAAU;AAAA,MACV,WAAAL;AAAA,MACA,WAAW;AAAA,QACT;AAAA,UACE,MAAM;AAAA,UACN,SAAS;AAAA,YACP,QAAQ,CAAC,GAAG,CAAC;AAAA,UACf;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EAAA;AAGF,SAAAU,EAAU,MAAM;AAGd,IAAIf,KAAaC,KACRA,EAAA,EAAE,OAAAJ,GAAO,YAAAC,EAAA,CAAY;AAAA,KAE7B,CAACE,GAAWC,GAAQJ,GAAOC,CAAU,CAAC,GAGvC,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gEAAgET,CAAS;AAAA,MACpF,OAAO;AAAA,QACL,GAAGK,EAAO;AAAA,QACV,YAAYZ,IAAY,YAAY;AAAA,QACpC,SAASA,IAAY,IAAI;AAAA,MAC3B;AAAA,MACA,KAAKU;AAAA,MACJ,GAAGG,EAAW;AAAA,MACf,MAAK;AAAA,MACL,UAAU;AAAA,MAEV,UAAA,gBAAAG,EAAC,SAAI,WAAU,wCACb,4BAACC,GAAkB,EAAA,GAAGX,GAAW,EACnC,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
package/dist/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{--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)}: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)}: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:normal;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{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-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-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}.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-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}: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}.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)}
|
|
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}.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-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}: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{--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:normal;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-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-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{--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)}: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)}: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)}.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)}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
import { ActionButton, FeedItem } from "@knocklabs/client";
|
|
1
2
|
import React, { ReactNode } from "react";
|
|
2
|
-
import { FeedItem } from "@knocklabs/client";
|
|
3
3
|
import "./styles.css";
|
|
4
4
|
export interface NotificationCellProps {
|
|
5
5
|
item: FeedItem;
|
|
6
6
|
onItemClick?: (item: FeedItem) => void;
|
|
7
|
+
onButtonClick?: (item: FeedItem, action: ActionButton) => void;
|
|
7
8
|
avatar?: ReactNode;
|
|
8
9
|
children?: ReactNode;
|
|
9
10
|
archiveButton?: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationCell.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"NotificationCell.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAGZ,QAAQ,EAGT,MAAM,mBAAmB,CAAC;AAO3B,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAMlD,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,QAAQ,CAAC;IAEf,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAEvC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAYD,eAAO,MAAM,gBAAgB,8FAuH5B,CAAC"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { FeedItem } from "@knocklabs/client";
|
|
2
|
-
import React, { ReactElement, ReactNode } from "react";
|
|
3
2
|
import { FilterStatus } from "@knocklabs/react-core";
|
|
3
|
+
import React, { ReactElement, ReactNode } from "react";
|
|
4
|
+
import { NotificationCellProps } from "../NotificationCell";
|
|
4
5
|
import { NotificationFeedHeaderProps } from "./NotificationFeedHeader";
|
|
5
6
|
import "./styles.css";
|
|
6
|
-
export type OnNotificationClick = (item: FeedItem) => void;
|
|
7
|
-
export type RenderItem = ({ item }: RenderItemProps) => ReactNode;
|
|
8
7
|
export type RenderItemProps = {
|
|
9
8
|
item: FeedItem;
|
|
10
|
-
onItemClick?:
|
|
9
|
+
onItemClick?: NotificationCellProps["onItemClick"];
|
|
10
|
+
onButtonClick?: NotificationCellProps["onButtonClick"];
|
|
11
11
|
};
|
|
12
|
+
export type RenderItem = (props: RenderItemProps) => ReactNode;
|
|
12
13
|
export interface NotificationFeedProps {
|
|
13
14
|
EmptyComponent?: ReactNode;
|
|
14
15
|
/**
|
|
@@ -17,7 +18,8 @@ export interface NotificationFeedProps {
|
|
|
17
18
|
header?: ReactElement<any>;
|
|
18
19
|
renderItem?: RenderItem;
|
|
19
20
|
renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;
|
|
20
|
-
onNotificationClick?:
|
|
21
|
+
onNotificationClick?: NotificationCellProps["onItemClick"];
|
|
22
|
+
onNotificationButtonClick?: NotificationCellProps["onButtonClick"];
|
|
21
23
|
onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;
|
|
22
24
|
initialFilterStatus?: FilterStatus;
|
|
23
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationFeed.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAoC,MAAM,mBAAmB,CAAC;AAC/E,OAAO,KAAK,EAAE,EACZ,YAAY,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"NotificationFeed.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAoC,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAEL,YAAY,EAIb,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,EACZ,YAAY,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAKf,OAAO,EAAoB,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,EAEL,2BAA2B,EAC5B,MAAM,0BAA0B,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IACnD,aAAa,CAAC,EAAE,qBAAqB,CAAC,eAAe,CAAC,CAAC;CACxD,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;AAE/D,MAAM,WAAW,qBAAqB;IACpC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,SAAS,CAAC;IACjE,mBAAmB,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IAC3D,yBAAyB,CAAC,EAAE,qBAAqB,CAAC,eAAe,CAAC,CAAC;IACnE,oBAAoB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAC9E,mBAAmB,CAAC,EAAE,YAAY,CAAC;CACpC;AAuBD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwF5D,CAAC"}
|
package/dist/types/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Feed, FeedStoreState } from "@knocklabs/client";
|
|
2
2
|
import { Placement } from "@popperjs/core";
|
|
3
|
+
import React, { RefObject } from "react";
|
|
3
4
|
import { NotificationFeedProps } from "../NotificationFeed";
|
|
4
5
|
import "./styles.css";
|
|
5
|
-
import { Feed, FeedStoreState } from "@knocklabs/client";
|
|
6
6
|
type OnOpenOptions = {
|
|
7
7
|
store: FeedStoreState;
|
|
8
8
|
feedClient: Feed;
|
package/dist/types/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationFeedPopover.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"NotificationFeedPopover.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,EAAE,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAIpD,OAAO,EAAoB,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,IAAI,CAAC;CAClB,CAAC;AAQF,MAAM,WAAW,4BAA6B,SAAQ,qBAAqB;IACzE,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,SAAS,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC5C,4BAA4B,CA4D7B,CAAC"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@knocklabs/react",
|
|
3
3
|
"description": "A set of React components to build notification experiences powered by Knock",
|
|
4
4
|
"author": "@knocklabs",
|
|
5
|
-
"version": "0.2.
|
|
5
|
+
"version": "0.2.3",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/cjs/index.js",
|
|
8
8
|
"module": "dist/esm/index.mjs",
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"react-dom": ">=16.8.0"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@knocklabs/client": "^0.9.
|
|
54
|
-
"@knocklabs/react-core": "^0.2.
|
|
53
|
+
"@knocklabs/client": "^0.9.2",
|
|
54
|
+
"@knocklabs/react-core": "^0.2.3",
|
|
55
55
|
"@popperjs/core": "^2.11.8",
|
|
56
56
|
"@radix-ui/react-popover": "^1.0.7",
|
|
57
57
|
"@radix-ui/react-visually-hidden": "^1.0.3",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
File without changes
|
/package/dist/cjs/modules/feed/components/{NotificationIconButton → EmptyFeed}/styles.css.js.map
RENAMED
|
File without changes
|