@knocklabs/react 0.1.7 → 0.1.9
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 +92 -0
- package/dist/cjs/index.css +1 -1
- package/dist/esm/{index.esm.js → index.mjs} +19 -19
- package/dist/esm/index.mjs.map +1 -0
- package/dist/esm/modules/core/components/Button/{Button.esm.js → Button.mjs} +2 -2
- package/dist/esm/modules/core/components/Button/Button.mjs.map +1 -0
- package/dist/esm/modules/core/components/Button/{ButtonGroup.esm.js → ButtonGroup.mjs} +1 -1
- package/dist/esm/modules/core/components/Button/ButtonGroup.mjs.map +1 -0
- package/dist/esm/modules/core/components/Button/{ButtonSpinner.esm.js → ButtonSpinner.mjs} +2 -2
- package/dist/esm/modules/core/components/Button/ButtonSpinner.mjs.map +1 -0
- package/dist/esm/modules/core/components/Icons/{Bell.esm.js → Bell.mjs} +1 -1
- package/dist/esm/modules/core/components/Icons/Bell.mjs.map +1 -0
- package/dist/esm/modules/core/components/Icons/{CheckmarkCircle.esm.js → CheckmarkCircle.mjs} +1 -1
- package/dist/esm/modules/core/components/Icons/CheckmarkCircle.mjs.map +1 -0
- package/dist/esm/modules/core/components/Icons/{ChevronDown.esm.js → ChevronDown.mjs} +1 -1
- package/dist/esm/modules/core/components/Icons/ChevronDown.mjs.map +1 -0
- package/dist/esm/modules/core/components/Icons/{CloseCircle.esm.js → CloseCircle.mjs} +1 -1
- package/dist/esm/modules/core/components/Icons/CloseCircle.mjs.map +1 -0
- package/dist/esm/modules/core/components/Spinner/{Spinner.esm.js → Spinner.mjs} +1 -1
- package/dist/esm/modules/core/components/Spinner/Spinner.mjs.map +1 -0
- package/dist/esm/modules/core/hooks/{useComponentVisible.esm.js → useComponentVisible.mjs} +1 -1
- package/dist/esm/modules/core/hooks/useComponentVisible.mjs.map +1 -0
- package/dist/esm/modules/core/hooks/{useOnBottomScroll.esm.js → useOnBottomScroll.mjs} +1 -1
- package/dist/esm/modules/core/hooks/useOnBottomScroll.mjs.map +1 -0
- package/dist/esm/modules/feed/components/EmptyFeed/{EmptyFeed.esm.js → EmptyFeed.mjs} +1 -1
- package/dist/esm/modules/feed/components/EmptyFeed/EmptyFeed.mjs.map +1 -0
- package/dist/esm/modules/feed/components/NotificationCell/{ArchiveButton.esm.js → ArchiveButton.mjs} +2 -2
- package/dist/esm/modules/feed/components/NotificationCell/ArchiveButton.mjs.map +1 -0
- package/dist/esm/modules/feed/components/NotificationCell/{Avatar.esm.js → Avatar.mjs} +1 -1
- package/dist/esm/modules/feed/components/NotificationCell/Avatar.mjs.map +1 -0
- package/dist/esm/modules/feed/components/NotificationCell/{NotificationCell.esm.js → NotificationCell.mjs} +3 -3
- package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.mjs.map +1 -0
- package/dist/esm/modules/feed/components/NotificationFeed/{Dropdown.esm.js → Dropdown.mjs} +2 -2
- package/dist/esm/modules/feed/components/NotificationFeed/Dropdown.mjs.map +1 -0
- package/dist/esm/modules/feed/components/NotificationFeed/{MarkAsRead.esm.js → MarkAsRead.mjs} +2 -2
- package/dist/esm/modules/feed/components/NotificationFeed/MarkAsRead.mjs.map +1 -0
- package/dist/esm/modules/feed/components/NotificationFeed/{NotificationFeed.esm.js → NotificationFeed.mjs} +6 -6
- package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs.map +1 -0
- package/dist/esm/modules/feed/components/NotificationFeed/{NotificationFeedHeader.esm.js → NotificationFeedHeader.mjs} +3 -3
- package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs.map +1 -0
- package/dist/esm/modules/feed/components/NotificationFeedContainer/{NotificationFeedContainer.esm.js → NotificationFeedContainer.mjs} +1 -1
- package/dist/esm/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs.map +1 -0
- package/dist/esm/modules/feed/components/NotificationFeedPopover/{NotificationFeedPopover.esm.js → NotificationFeedPopover.mjs} +4 -4
- package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs.map +1 -0
- package/dist/esm/modules/feed/components/NotificationIconButton/{NotificationIconButton.esm.js → NotificationIconButton.mjs} +3 -3
- package/dist/esm/modules/feed/components/NotificationIconButton/NotificationIconButton.mjs.map +1 -0
- package/dist/esm/modules/feed/components/UnseenBadge/{UnseenBadge.esm.js → UnseenBadge.mjs} +1 -1
- package/dist/esm/modules/feed/components/UnseenBadge/UnseenBadge.mjs.map +1 -0
- package/dist/index.css +1 -1
- package/package.json +9 -9
- package/dist/cjs/modules/core/components/Button/styles.css.js +0 -2
- package/dist/cjs/modules/core/components/Button/styles.css.js.map +0 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/styles.css.js +0 -2
- package/dist/cjs/modules/feed/components/NotificationFeedContainer/styles.css.js +0 -2
- package/dist/cjs/modules/feed/components/NotificationFeedPopover/styles.css.js +0 -2
- package/dist/cjs/modules/feed/components/NotificationIconButton/styles.css.js +0 -2
- package/dist/cjs/modules/feed/components/UnseenBadge/styles.css.js +0 -2
- package/dist/esm/index.esm.js.map +0 -1
- package/dist/esm/modules/core/components/Button/Button.esm.js.map +0 -1
- package/dist/esm/modules/core/components/Button/ButtonGroup.esm.js.map +0 -1
- package/dist/esm/modules/core/components/Button/ButtonSpinner.esm.js.map +0 -1
- package/dist/esm/modules/core/components/Icons/Bell.esm.js.map +0 -1
- package/dist/esm/modules/core/components/Icons/CheckmarkCircle.esm.js.map +0 -1
- package/dist/esm/modules/core/components/Icons/ChevronDown.esm.js.map +0 -1
- package/dist/esm/modules/core/components/Icons/CloseCircle.esm.js.map +0 -1
- package/dist/esm/modules/core/components/Spinner/Spinner.esm.js.map +0 -1
- package/dist/esm/modules/core/hooks/useComponentVisible.esm.js.map +0 -1
- package/dist/esm/modules/core/hooks/useOnBottomScroll.esm.js.map +0 -1
- package/dist/esm/modules/feed/components/EmptyFeed/EmptyFeed.esm.js.map +0 -1
- package/dist/esm/modules/feed/components/NotificationCell/ArchiveButton.esm.js.map +0 -1
- package/dist/esm/modules/feed/components/NotificationCell/Avatar.esm.js.map +0 -1
- package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.esm.js.map +0 -1
- package/dist/esm/modules/feed/components/NotificationFeed/Dropdown.esm.js.map +0 -1
- package/dist/esm/modules/feed/components/NotificationFeed/MarkAsRead.esm.js.map +0 -1
- package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.esm.js.map +0 -1
- package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeedHeader.esm.js.map +0 -1
- package/dist/esm/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.esm.js.map +0 -1
- package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.esm.js.map +0 -1
- package/dist/esm/modules/feed/components/NotificationIconButton/NotificationIconButton.esm.js.map +0 -1
- package/dist/esm/modules/feed/components/UnseenBadge/UnseenBadge.esm.js.map +0 -1
package/CHANGELOG.md
ADDED
@@ -0,0 +1,92 @@
|
|
1
|
+
# Changelog
|
2
|
+
|
3
|
+
## 0.1.9
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- c9faba5: fix esm build issues with mjs files
|
8
|
+
- Updated dependencies [c9faba5]
|
9
|
+
- @knocklabs/react-core@0.1.6
|
10
|
+
- @knocklabs/client@0.8.21
|
11
|
+
|
12
|
+
## 0.1.8
|
13
|
+
|
14
|
+
### Patch Changes
|
15
|
+
|
16
|
+
- Re-releasing packages
|
17
|
+
- Updated dependencies
|
18
|
+
- @knocklabs/client@0.8.20
|
19
|
+
- @knocklabs/react-core@0.1.5
|
20
|
+
|
21
|
+
## 0.1.7
|
22
|
+
|
23
|
+
### Patch Changes
|
24
|
+
|
25
|
+
- 9dd0d15: chore: update dependencies
|
26
|
+
- 7786ec5: chore: upgrade to yarn modern and update local package references
|
27
|
+
- 9dd0d15: feat: add onUserTokenExpiring callback option to client
|
28
|
+
- Updated dependencies [7786ec5]
|
29
|
+
- Updated dependencies [9dd0d15]
|
30
|
+
- @knocklabs/react-core@0.1.4
|
31
|
+
- @knocklabs/client@0.8.19
|
32
|
+
|
33
|
+
## 0.1.6
|
34
|
+
|
35
|
+
### Patch Changes
|
36
|
+
|
37
|
+
- 59ce044: fix: build process causing esm issues
|
38
|
+
|
39
|
+
## 0.1.5
|
40
|
+
|
41
|
+
### Patch Changes
|
42
|
+
|
43
|
+
- 1050660: feat: switch timestamp formatting to date-fns intlFormatDistance
|
44
|
+
- Updated dependencies [e53c200]
|
45
|
+
- Updated dependencies [1050660]
|
46
|
+
- Updated dependencies [d4ba1f2]
|
47
|
+
- @knocklabs/client@0.8.18
|
48
|
+
- @knocklabs/react-core@0.1.3
|
49
|
+
|
50
|
+
## 0.1.4
|
51
|
+
|
52
|
+
### Patch Changes
|
53
|
+
|
54
|
+
- 4c16762: fix: update popperjs dependency
|
55
|
+
|
56
|
+
## 0.1.3
|
57
|
+
|
58
|
+
### Patch Changes
|
59
|
+
|
60
|
+
- 4673d95: fix: scope feed provider styles to only Knock elements
|
61
|
+
- Updated dependencies [7bc5e4a]
|
62
|
+
- @knocklabs/client@0.8.16
|
63
|
+
|
64
|
+
## 0.1.2
|
65
|
+
|
66
|
+
### Patch Changes
|
67
|
+
|
68
|
+
- 8988230: Fix esm exports and date-fns/locale imports
|
69
|
+
- 8315372: Fix cjs build output for React components
|
70
|
+
- Updated dependencies [8988230]
|
71
|
+
- Updated dependencies [8315372]
|
72
|
+
- @knocklabs/react-core@0.1.2
|
73
|
+
|
74
|
+
## 0.1.1
|
75
|
+
|
76
|
+
### Patch Changes
|
77
|
+
|
78
|
+
- d8a216e: fix: react-core build process
|
79
|
+
fix: remove headless prop from KnockFeedProvider
|
80
|
+
fix: move KnockFeedContainer from react-core to react and rename to NotificationFeedContainer
|
81
|
+
- Updated dependencies [d8a216e]
|
82
|
+
- @knocklabs/react-core@0.1.1
|
83
|
+
|
84
|
+
## 0.1.0
|
85
|
+
|
86
|
+
### Patch Changes
|
87
|
+
|
88
|
+
- 5850374: chore: only redirect when action url is not empty
|
89
|
+
feat: add a11y improvements to buttons
|
90
|
+
- bcdbc86: Initialize monorepo
|
91
|
+
- Updated dependencies [bcdbc86]
|
92
|
+
- @knocklabs/react-core@0.1.0
|
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-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}: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-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--rnf-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}.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-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}
|
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-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-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-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-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-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-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}
|
@@ -1,22 +1,22 @@
|
|
1
1
|
|
2
|
-
import { Button as t } from "./modules/core/components/Button/Button.
|
3
|
-
import { ButtonGroup as p } from "./modules/core/components/Button/ButtonGroup.
|
4
|
-
import { BellIcon as m } from "./modules/core/components/Icons/Bell.
|
5
|
-
import { CheckmarkCircle as x } from "./modules/core/components/Icons/CheckmarkCircle.
|
6
|
-
import { ChevronDown as c } from "./modules/core/components/Icons/ChevronDown.
|
7
|
-
import { CloseCircle as d } from "./modules/core/components/Icons/CloseCircle.
|
8
|
-
import { Spinner as u } from "./modules/core/components/Spinner/Spinner.
|
9
|
-
import { default as N } from "./modules/core/hooks/useOnBottomScroll.
|
10
|
-
import { EmptyFeed as F } from "./modules/feed/components/EmptyFeed/EmptyFeed.
|
11
|
-
import { NotificationCell as v } from "./modules/feed/components/NotificationCell/NotificationCell.
|
12
|
-
import { Avatar as A } from "./modules/feed/components/NotificationCell/Avatar.
|
13
|
-
import { NotificationFeed as S } from "./modules/feed/components/NotificationFeed/NotificationFeed.
|
14
|
-
import { NotificationFeedHeader as w } from "./modules/feed/components/NotificationFeed/NotificationFeedHeader.
|
15
|
-
import { MarkAsRead as D } from "./modules/feed/components/NotificationFeed/MarkAsRead.
|
16
|
-
import { NotificationFeedContainer as G } from "./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.
|
17
|
-
import { NotificationFeedPopover as M } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.
|
18
|
-
import { NotificationIconButton as P } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.
|
19
|
-
import { UnseenBadge as U } from "./modules/feed/components/UnseenBadge/UnseenBadge.
|
2
|
+
import { Button as t } from "./modules/core/components/Button/Button.mjs";
|
3
|
+
import { ButtonGroup as p } from "./modules/core/components/Button/ButtonGroup.mjs";
|
4
|
+
import { BellIcon as m } from "./modules/core/components/Icons/Bell.mjs";
|
5
|
+
import { CheckmarkCircle as x } from "./modules/core/components/Icons/CheckmarkCircle.mjs";
|
6
|
+
import { ChevronDown as c } from "./modules/core/components/Icons/ChevronDown.mjs";
|
7
|
+
import { CloseCircle as d } from "./modules/core/components/Icons/CloseCircle.mjs";
|
8
|
+
import { Spinner as u } from "./modules/core/components/Spinner/Spinner.mjs";
|
9
|
+
import { default as N } from "./modules/core/hooks/useOnBottomScroll.mjs";
|
10
|
+
import { EmptyFeed as F } from "./modules/feed/components/EmptyFeed/EmptyFeed.mjs";
|
11
|
+
import { NotificationCell as v } from "./modules/feed/components/NotificationCell/NotificationCell.mjs";
|
12
|
+
import { Avatar as A } from "./modules/feed/components/NotificationCell/Avatar.mjs";
|
13
|
+
import { NotificationFeed as S } from "./modules/feed/components/NotificationFeed/NotificationFeed.mjs";
|
14
|
+
import { NotificationFeedHeader as w } from "./modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs";
|
15
|
+
import { MarkAsRead as D } from "./modules/feed/components/NotificationFeed/MarkAsRead.mjs";
|
16
|
+
import { NotificationFeedContainer as G } from "./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs";
|
17
|
+
import { NotificationFeedPopover as M } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs";
|
18
|
+
import { NotificationIconButton as P } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.mjs";
|
19
|
+
import { UnseenBadge as U } from "./modules/feed/components/UnseenBadge/UnseenBadge.mjs";
|
20
20
|
export * from "@knocklabs/react-core";
|
21
21
|
export {
|
22
22
|
A as Avatar,
|
@@ -38,4 +38,4 @@ export {
|
|
38
38
|
U as UnseenBadge,
|
39
39
|
N as useOnBottomScroll
|
40
40
|
};
|
41
|
-
//# sourceMappingURL=index.
|
41
|
+
//# sourceMappingURL=index.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { jsxs as b, jsx as e } from "react/jsx-runtime";
|
2
2
|
import { useKnockFeed as m } from "@knocklabs/react-core";
|
3
|
-
import { ButtonSpinner as c } from "./ButtonSpinner.
|
3
|
+
import { ButtonSpinner as c } from "./ButtonSpinner.mjs";
|
4
4
|
|
5
5
|
const j = ({
|
6
6
|
variant: r = "primary",
|
@@ -35,4 +35,4 @@ const j = ({
|
|
35
35
|
export {
|
36
36
|
j as Button
|
37
37
|
};
|
38
|
-
//# sourceMappingURL=Button.
|
38
|
+
//# sourceMappingURL=Button.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Button.mjs","sources":["../../../../../../src/modules/core/components/Button/Button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { ButtonSpinner } from \"./ButtonSpinner\";\n\nimport \"./styles.css\";\n\nexport type ButtonProps = {\n variant: \"primary\" | \"secondary\";\n loadingText?: string;\n isLoading?: boolean;\n isDisabled?: boolean;\n isFullWidth?: boolean;\n onClick: (e: React.MouseEvent) => void;\n};\n\nexport const Button: React.FC<PropsWithChildren<ButtonProps>> = ({\n variant = \"primary\",\n loadingText,\n isLoading = false,\n isDisabled = false,\n isFullWidth = false,\n onClick,\n children,\n}) => {\n const { colorMode } = useKnockFeed();\n\n const classNames = [\n \"rnf-button\",\n `rnf-button--${variant}`,\n isFullWidth ? \"rnf-button--full-width\" : \"\",\n isLoading ? \"rnf-button--is-loading\" : \"\",\n `rnf-button--${colorMode}`,\n ].join(\" \");\n\n // In this case when there's no loading text, we still want to display the original\n // content of the button, but make it hidden. That allows us to keep the button width\n // consistent and show the spinner in the middle, meaning no layout shift.\n const textToShowWhileLoading = loadingText || (\n <span className=\"rnf-button__button-text-hidden\">{children}</span>\n );\n\n return (\n <button\n onClick={onClick}\n className={classNames}\n disabled={isLoading || isDisabled}\n type=\"button\"\n >\n {isLoading && <ButtonSpinner hasLabel={!!loadingText} />}\n {isLoading ? textToShowWhileLoading : children}\n </button>\n );\n};\n"],"names":["Button","variant","loadingText","isLoading","isDisabled","isFullWidth","onClick","children","colorMode","useKnockFeed","classNames","jsxs","jsx","ButtonSpinner"],"mappings":";;;;AAeO,MAAMA,IAAmD,CAAC;AAAA,EAC/D,SAAAC,IAAU;AAAA,EACV,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc;AAAA,EACd,SAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAA,EAAE,WAAAC,MAAcC,KAEhBC,IAAa;AAAA,IACjB;AAAA,IACA,eAAeT,CAAO;AAAA,IACtBI,IAAc,2BAA2B;AAAA,IACzCF,IAAY,2BAA2B;AAAA,IACvC,eAAeK,CAAS;AAAA,EAAA,EACxB,KAAK,GAAG;AAUR,SAAA,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAL;AAAA,MACA,WAAWI;AAAA,MACX,UAAUP,KAAaC;AAAA,MACvB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAAD,KAAc,gBAAAS,EAAAC,GAAA,EAAc,UAAU,CAAC,CAACX,GAAa;AAAA,QACrDC,IAZ0BD,KAC7B,gBAAAU,EAAC,QAAK,EAAA,WAAU,kCAAkC,UAAAL,EAAS,CAAA,IAWnBA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5C;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ButtonGroup.mjs","sources":["../../../../../../src/modules/core/components/Button/ButtonGroup.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport \"./styles.css\";\n\nexport const ButtonGroup: React.FC<PropsWithChildren> = ({ children }) => (\n <div className=\"rnf-button-group\">{children}</div>\n);\n"],"names":["ButtonGroup","children","jsx"],"mappings":";;AAIa,MAAAA,IAA2C,CAAC,EAAE,UAAAC,QACxD,gBAAAC,EAAA,OAAA,EAAI,WAAU,oBAAoB,UAAAD,EAAS,CAAA;"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsx as n } from "react/jsx-runtime";
|
2
|
-
import { Spinner as r } from "../Spinner/Spinner.
|
2
|
+
import { Spinner as r } from "../Spinner/Spinner.mjs";
|
3
3
|
|
4
4
|
const p = ({ hasLabel: t }) => /* @__PURE__ */ n(
|
5
5
|
"div",
|
@@ -11,4 +11,4 @@ const p = ({ hasLabel: t }) => /* @__PURE__ */ n(
|
|
11
11
|
export {
|
12
12
|
p as ButtonSpinner
|
13
13
|
};
|
14
|
-
//# sourceMappingURL=ButtonSpinner.
|
14
|
+
//# sourceMappingURL=ButtonSpinner.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ButtonSpinner.mjs","sources":["../../../../../../src/modules/core/components/Button/ButtonSpinner.tsx"],"sourcesContent":["import React from \"react\";\nimport { Spinner } from \"../Spinner\";\n\nimport \"./styles.css\";\n\ntype ButtonSpinnerProps = {\n hasLabel: boolean;\n};\n\nexport const ButtonSpinner: React.FC<ButtonSpinnerProps> = ({ hasLabel }) => (\n <div\n className={`rnf-button-spinner rnf-button-spinner--${\n hasLabel ? \"with-label\" : \"without-label\"\n }`}\n >\n <Spinner />\n </div>\n);\n"],"names":["ButtonSpinner","hasLabel","jsx","Spinner"],"mappings":";;;AASO,MAAMA,IAA8C,CAAC,EAAE,UAAAC,EAAA,MAC5D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,0CACTD,IAAW,eAAe,eAC5B;AAAA,IAEA,4BAACE,GAAQ,EAAA;AAAA,EAAA;AACX;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Bell.mjs","sources":["../../../../../../src/modules/core/components/Icons/Bell.tsx"],"sourcesContent":["function BellIcon({ width = 24, height = 24 }) {\n return (\n <svg width={width} viewBox=\"0 0 24 24\" fill=\"none\" height={height}>\n <path\n d=\"M20.0474 16.4728C18.8436 14.9996 17.9938 14.2496 17.9938 10.1879C17.9938 6.46832 16.0944 5.14317 14.5311 4.49957C14.3235 4.41426 14.128 4.21832 14.0647 4.00504C13.7905 3.07176 13.0217 2.24957 11.9999 2.24957C10.978 2.24957 10.2088 3.07223 9.93736 4.00598C9.87408 4.2216 9.67861 4.41426 9.47096 4.49957C7.9058 5.1441 6.0083 6.46457 6.0083 10.1879C6.00596 14.2496 5.15611 14.9996 3.95237 16.4728C3.45362 17.0832 3.89049 17.9996 4.76283 17.9996H19.2416C20.1092 17.9996 20.5433 17.0803 20.0474 16.4728Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M14.9999 17.9988V18.7488C14.9999 19.5445 14.6838 20.3075 14.1212 20.8701C13.5586 21.4327 12.7955 21.7488 11.9999 21.7488C11.2042 21.7488 10.4412 21.4327 9.87856 20.8701C9.31595 20.3075 8.99988 19.5445 8.99988 18.7488V17.9988\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport { BellIcon };\n"],"names":["BellIcon","width","height","jsx"],"mappings":";AAAA,SAASA,EAAS,EAAE,OAAAC,IAAQ,IAAI,QAAAC,IAAS,MAAM;AAC7C,2BACG,OAAI,EAAA,OAAAD,GAAc,SAAQ,aAAY,MAAK,QAAO,QAAAC,GACjD,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,MAAA;AAAA,IACjB;AAAA,IACA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"CheckmarkCircle.mjs","sources":["../../../../../../src/modules/core/components/Icons/CheckmarkCircle.tsx"],"sourcesContent":["const CheckmarkCircle = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 8.00012C14 4.68762 11.3125 2.00012 7.99997 2.00012C4.68747 2.00012 1.99997 4.68762 1.99997 8.00012C1.99997 11.3126 4.68747 14.0001 7.99997 14.0001C11.3125 14.0001 14 11.3126 14 8.00012Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeMiterlimit=\"10\"\n />\n <path\n d=\"M10.9999 5.5004L6.79994 10.5004L4.99994 8.5004\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nexport { CheckmarkCircle };\n"],"names":["CheckmarkCircle","jsxs","jsx"],"mappings":";AAAA,MAAMA,IAAkB,MACtB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,kBAAiB;AAAA,QAAA;AAAA,MACnB;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AACF;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ChevronDown.mjs","sources":["../../../../../../src/modules/core/components/Icons/ChevronDown.tsx"],"sourcesContent":["const ChevronDown = () => (\n <svg\n width=\"8\"\n height=\"6\"\n viewBox=\"0 0 8 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.74994 1.87512L3.99994 4.12512L6.24994 1.87512\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nexport { ChevronDown };\n"],"names":["ChevronDown","jsx"],"mappings":";AAAA,MAAMA,IAAc,MAClB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AACF;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"CloseCircle.mjs","sources":["../../../../../../src/modules/core/components/Icons/CloseCircle.tsx"],"sourcesContent":["const CloseCircle = () => (\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M7.00012 0.499939C3.41606 0.499939 0.500122 3.41588 0.500122 6.99994C0.500122 10.584 3.41606 13.4999 7.00012 13.4999C10.5842 13.4999 13.5001 10.584 13.5001 6.99994C13.5001 3.41588 10.5842 0.499939 7.00012 0.499939ZM9.35356 8.6465C9.40194 8.69247 9.44063 8.74766 9.46735 8.80881C9.49407 8.86997 9.50828 8.93585 9.50913 9.00259C9.50999 9.06932 9.49747 9.13555 9.47233 9.19737C9.44718 9.25919 9.40992 9.31535 9.36273 9.36254C9.31553 9.40973 9.25937 9.447 9.19755 9.47214C9.13573 9.49729 9.0695 9.5098 9.00277 9.50895C8.93604 9.50809 8.87015 9.49389 8.809 9.46717C8.74784 9.44045 8.69265 9.40176 8.64668 9.35337L7.00012 7.70712L5.35356 9.35337C5.25903 9.44318 5.13315 9.49251 5.00277 9.49084C4.87239 9.48918 4.74782 9.43664 4.65562 9.34444C4.56342 9.25224 4.51088 9.12767 4.50921 8.99729C4.50755 8.86691 4.55687 8.74103 4.64668 8.6465L6.29293 6.99994L4.64668 5.35338C4.55687 5.25884 4.50755 5.13297 4.50921 5.00259C4.51088 4.87221 4.56342 4.74764 4.65562 4.65544C4.74782 4.56324 4.87239 4.5107 5.00277 4.50903C5.13315 4.50736 5.25903 4.55669 5.35356 4.6465L7.00012 6.29275L8.64668 4.6465C8.74121 4.55669 8.86709 4.50736 8.99747 4.50903C9.12785 4.5107 9.25242 4.56324 9.34462 4.65544C9.43682 4.74764 9.48936 4.87221 9.49103 5.00259C9.4927 5.13297 9.44337 5.25884 9.35356 5.35338L7.70731 6.99994L9.35356 8.6465Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nexport { CloseCircle };\n"],"names":["CloseCircle","jsx"],"mappings":";AAAA,MAAMA,IAAc,MAClB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,MAAA;AAAA,IACP;AAAA,EAAA;AACF;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Spinner.mjs","sources":["../../../../../../src/modules/core/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from \"react\";\n\ntype Speed = \"fast\" | \"slow\" | \"medium\";\n\nfunction speedSwitch(speed: Speed) {\n if (speed === \"fast\") return 600;\n if (speed === \"slow\") return 900;\n return 750;\n}\n\nexport interface SpinnerProps {\n color?: string;\n speed?: Speed;\n gap?: number;\n thickness?: number;\n size?: string;\n}\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n color = \"rgba(0,0,0,0.4)\",\n speed = \"medium\",\n gap = 4,\n thickness = 4,\n size = \"1em\",\n ...props\n}) => (\n <svg\n height={size}\n width={size}\n {...props}\n style={{ animationDuration: `${speedSwitch(speed)}ms` }}\n className=\"__react-svg-spinner_circle\"\n role=\"img\"\n aria-labelledby=\"title desc\"\n viewBox=\"0 0 32 32\"\n >\n <title id=\"title\">Circle loading spinner</title>\n <desc id=\"desc\">Image of a partial circle indicating \"loading.\"</desc>\n <style\n dangerouslySetInnerHTML={{\n __html: `\n .__react-svg-spinner_circle{\n transition-property: transform;\n animation-name: __react-svg-spinner_infinite-spin;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n }\n @keyframes __react-svg-spinner_infinite-spin {\n from {transform: rotate(0deg)}\n to {transform: rotate(360deg)}\n }\n `,\n }}\n />\n <circle\n role=\"presentation\"\n cx={16}\n cy={16}\n r={14 - thickness / 2}\n stroke={color}\n fill=\"none\"\n strokeWidth={thickness}\n strokeDasharray={Math.PI * 2 * (11 - gap)}\n strokeLinecap=\"round\"\n />\n </svg>\n);\n"],"names":["speedSwitch","speed","Spinner","color","gap","thickness","size","props","jsxs","jsx"],"mappings":";AAIA,SAASA,EAAYC,GAAc;AACjC,SAAIA,MAAU,SAAe,MACzBA,MAAU,SAAe,MACtB;AACT;AAUO,MAAMC,IAAkC,CAAC;AAAA,EAC9C,OAAAC,IAAQ;AAAA,EACR,OAAAF,IAAQ;AAAA,EACR,KAAAG,IAAM;AAAA,EACN,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,QAAQF;AAAA,IACR,OAAOA;AAAA,IACN,GAAGC;AAAA,IACJ,OAAO,EAAE,mBAAmB,GAAGP,EAAYC,CAAK,CAAC,KAAK;AAAA,IACtD,WAAU;AAAA,IACV,MAAK;AAAA,IACL,mBAAgB;AAAA,IAChB,SAAQ;AAAA,IAER,UAAA;AAAA,MAAC,gBAAAQ,EAAA,SAAA,EAAM,IAAG,SAAQ,UAAsB,0BAAA;AAAA,MACvC,gBAAAA,EAAA,QAAA,EAAK,IAAG,QAAO,UAA+C,mDAAA;AAAA,MAC/D,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,yBAAyB;AAAA,YACvB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAYV;AAAA,QAAA;AAAA,MACF;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,GAAG,KAAKJ,IAAY;AAAA,UACpB,QAAQF;AAAA,UACR,MAAK;AAAA,UACL,aAAaE;AAAA,UACb,iBAAiB,KAAK,KAAK,KAAK,KAAKD;AAAA,UACrC,eAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IAAA;AAAA,EAAA;AACF;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useComponentVisible.mjs","sources":["../../../../../src/modules/core/hooks/useComponentVisible.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nfunction contains(parent: HTMLElement | null, child: HTMLElement) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\n}\n\ntype Options = {\n closeOnClickOutside: boolean;\n};\n\nexport default function useComponentVisible(\n isVisible: boolean,\n onClose: (event: Event) => void,\n options: Options\n) {\n const ref = useRef<HTMLDivElement>(null);\n\n const handleKeydown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onClose(event);\n }\n };\n\n const handleClickOutside = (event: Event) => {\n if (\n options.closeOnClickOutside &&\n !contains(ref.current, event.target as HTMLElement)\n ) {\n event.stopPropagation();\n onClose(event);\n }\n };\n\n useEffect(() => {\n if (isVisible) {\n document.addEventListener(\"keydown\", handleKeydown, true);\n document.addEventListener(\"click\", handleClickOutside, true);\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown, true);\n document.removeEventListener(\"click\", handleClickOutside, true);\n };\n }, [isVisible]);\n\n return { ref };\n}\n"],"names":["contains","parent","child","useComponentVisible","isVisible","onClose","options","ref","useRef","handleKeydown","event","handleClickOutside","useEffect"],"mappings":";AAEA,SAASA,EAASC,GAA4BC,GAAoB;AAChE,SAAKD,IACEA,MAAWC,KAASD,EAAO,SAASC,CAAK,IAD5B;AAEtB;AAMwB,SAAAC,EACtBC,GACAC,GACAC,GACA;AACM,QAAAC,IAAMC,EAAuB,IAAI,GAEjCC,IAAgB,CAACC,MAAyB;AAC1C,IAAAA,EAAM,QAAQ,YAChBL,EAAQK,CAAK;AAAA,EACf,GAGIC,IAAqB,CAACD,MAAiB;AAEzC,IAAAJ,EAAQ,uBACR,CAACN,EAASO,EAAI,SAASG,EAAM,MAAqB,MAElDA,EAAM,gBAAgB,GACtBL,EAAQK,CAAK;AAAA,EACf;AAGF,SAAAE,EAAU,OACJR,MACO,SAAA,iBAAiB,WAAWK,GAAe,EAAI,GAC/C,SAAA,iBAAiB,SAASE,GAAoB,EAAI,IAGtD,MAAM;AACF,aAAA,oBAAoB,WAAWF,GAAe,EAAI,GAClD,SAAA,oBAAoB,SAASE,GAAoB,EAAI;AAAA,EAAA,IAE/D,CAACP,CAAS,CAAC,GAEP,EAAE,KAAAG,EAAI;AACf;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useOnBottomScroll.mjs","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useMemo } from \"react\";\nimport debounce from \"lodash.debounce\";\n\ntype OnBottomScrollOptions = {\n ref: RefObject<HTMLDivElement | undefined>;\n callback: () => void;\n offset?: number;\n};\n\nconst noop = () => {};\n\nfunction useOnBottomScroll(options: OnBottomScrollOptions) {\n const callback = options.callback ?? noop;\n const ref = options.ref;\n const offset = options.offset ?? 0;\n\n const debouncedCallback = useMemo(() => debounce(callback, 200), [callback]);\n\n const handleOnScroll = useCallback(() => {\n if (ref.current) {\n const scrollNode = ref.current;\n const scrollContainerBottomPosition = Math.round(\n scrollNode.scrollTop + scrollNode.clientHeight,\n );\n const scrollPosition = Math.round(scrollNode.scrollHeight - offset);\n\n if (scrollPosition <= scrollContainerBottomPosition) {\n debouncedCallback();\n }\n }\n }, [debouncedCallback]);\n\n useEffect(() => {\n if (ref.current) {\n ref.current.addEventListener(\"scroll\", handleOnScroll);\n }\n\n return () => {\n if (ref.current) {\n ref.current.removeEventListener(\"scroll\", handleOnScroll);\n }\n };\n }, [handleOnScroll]);\n}\n\nexport default useOnBottomScroll;\n"],"names":["noop","useOnBottomScroll","options","callback","ref","offset","debouncedCallback","useMemo","debounce","handleOnScroll","useCallback","scrollNode","scrollContainerBottomPosition","useEffect"],"mappings":";;AASA,MAAMA,IAAO,MAAM;AAAC;AAEpB,SAASC,EAAkBC,GAAgC;AACnD,QAAAC,IAAWD,EAAQ,YAAYF,GAC/BI,IAAMF,EAAQ,KACdG,IAASH,EAAQ,UAAU,GAE3BI,IAAoBC,EAAQ,MAAMC,EAASL,GAAU,GAAG,GAAG,CAACA,CAAQ,CAAC,GAErEM,IAAiBC,EAAY,MAAM;AACvC,QAAIN,EAAI,SAAS;AACf,YAAMO,IAAaP,EAAI,SACjBQ,IAAgC,KAAK;AAAA,QACzCD,EAAW,YAAYA,EAAW;AAAA,MAAA;AAIpC,MAFuB,KAAK,MAAMA,EAAW,eAAeN,CAAM,KAE5CO,KACFN;IAEtB;AAAA,EAAA,GACC,CAACA,CAAiB,CAAC;AAEtB,EAAAO,EAAU,OACJT,EAAI,WACFA,EAAA,QAAQ,iBAAiB,UAAUK,CAAc,GAGhD,MAAM;AACX,IAAIL,EAAI,WACFA,EAAA,QAAQ,oBAAoB,UAAUK,CAAc;AAAA,EAC1D,IAED,CAACA,CAAc,CAAC;AACrB;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"EmptyFeed.mjs","sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslations, useKnockFeed } from \"@knocklabs/react-core\";\nimport \"./styles.css\";\n\nexport const EmptyFeed: React.FC = () => {\n const { colorMode } = useKnockFeed();\n const { t } = useTranslations();\n\n return (\n <div className={`rnf-empty-feed rnf-empty-feed--${colorMode}`}>\n <div className=\"rnf-empty-feed__inner\">\n <h2 className=\"rnf-empty-feed__header\">{t(\"emptyFeedTitle\")}</h2>\n <p className=\"rnf-empty-feed__body\">{t(\"emptyFeedBody\")}</p>\n </div>\n </div>\n );\n};\n"],"names":["EmptyFeed","colorMode","useKnockFeed","t","useTranslations","jsx","jsxs"],"mappings":";;;AAIO,MAAMA,IAAsB,MAAM;AACjC,QAAA,EAAE,WAAAC,MAAcC,KAChB,EAAE,GAAAC,MAAMC;AAGZ,SAAA,gBAAAC,EAAC,SAAI,WAAW,kCAAkCJ,CAAS,IACzD,UAAA,gBAAAK,EAAC,OAAI,EAAA,WAAU,yBACb,UAAA;AAAA,IAAA,gBAAAD,EAAC,MAAG,EAAA,WAAU,0BAA0B,UAAAF,EAAE,gBAAgB,GAAE;AAAA,sBAC3D,KAAE,EAAA,WAAU,wBAAwB,UAAAA,EAAE,eAAe,GAAE;AAAA,EAAA,EAC1D,CAAA,EACF,CAAA;AAEJ;"}
|
package/dist/esm/modules/feed/components/NotificationCell/{ArchiveButton.esm.js → ArchiveButton.mjs}
RENAMED
@@ -2,7 +2,7 @@ import { jsxs as f, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback as m } from "react";
|
3
3
|
import { usePopperTooltip as u } from "react-popper-tooltip";
|
4
4
|
import { useKnockFeed as v, useTranslations as d } from "@knocklabs/react-core";
|
5
|
-
import { CloseCircle as h } from "../../../core/components/Icons/CloseCircle.
|
5
|
+
import { CloseCircle as h } from "../../../core/components/Icons/CloseCircle.mjs";
|
6
6
|
const N = ({ item: o }) => {
|
7
7
|
const { colorMode: t, feedClient: n } = v(), { t: e } = d(), c = m(
|
8
8
|
(i) => {
|
@@ -37,4 +37,4 @@ const N = ({ item: o }) => {
|
|
37
37
|
export {
|
38
38
|
N as ArchiveButton
|
39
39
|
};
|
40
|
-
//# sourceMappingURL=ArchiveButton.
|
40
|
+
//# sourceMappingURL=ArchiveButton.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ArchiveButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport React, { MouseEvent, useCallback } from \"react\";\nimport { usePopperTooltip } from \"react-popper-tooltip\";\nimport { useTranslations, useKnockFeed } from \"@knocklabs/react-core\";\nimport { CloseCircle } from \"../../../core/components/Icons\";\n\nexport interface ArchiveButtonProps {\n item: FeedItem;\n}\n\nconst ArchiveButton: React.FC<ArchiveButtonProps> = ({ item }) => {\n const { colorMode, feedClient } = useKnockFeed();\n const { t } = useTranslations();\n\n const onClick = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n\n feedClient.markAsArchived(item);\n },\n [item],\n );\n\n const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =\n usePopperTooltip({ placement: \"top-end\" });\n\n return (\n <button\n ref={setTriggerRef}\n onClick={onClick}\n type=\"button\"\n aria-label={t(\"archiveNotification\")}\n className={`rnf-archive-notification-btn rnf-archive-notification-btn--${colorMode}`}\n >\n <CloseCircle />\n\n {visible && (\n <div\n ref={setTooltipRef}\n {...getTooltipProps({\n className: `rnf-tooltip rnf-tooltip--${colorMode}`,\n })}\n >\n {t(\"archiveNotification\")}\n </div>\n )}\n </button>\n );\n};\n\nexport { ArchiveButton };\n"],"names":["ArchiveButton","item","colorMode","feedClient","useKnockFeed","t","useTranslations","onClick","useCallback","e","getTooltipProps","setTooltipRef","setTriggerRef","visible","usePopperTooltip","jsxs","jsx","CloseCircle"],"mappings":";;;;;AAUA,MAAMA,IAA8C,CAAC,EAAE,MAAAC,QAAW;AAChE,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAa,GACzC,EAAE,GAAAC,MAAMC,KAERC,IAAUC;AAAA,IACd,CAACC,MAAqC;AACpC,MAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GAElBN,EAAW,eAAeF,CAAI;AAAA,IAChC;AAAA,IACA,CAACA,CAAI;AAAA,EAAA,GAGD,EAAE,iBAAAS,GAAiB,eAAAC,GAAe,eAAAC,GAAe,SAAAC,MACrDC,EAAiB,EAAE,WAAW,UAAA,CAAW;AAGzC,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKH;AAAA,MACL,SAAAL;AAAA,MACA,MAAK;AAAA,MACL,cAAYF,EAAE,qBAAqB;AAAA,MACnC,WAAW,8DAA8DH,CAAS;AAAA,MAElF,UAAA;AAAA,QAAA,gBAAAc,EAACC,GAAY,EAAA;AAAA,QAEZJ,KACC,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKL;AAAA,YACJ,GAAGD,EAAgB;AAAA,cAClB,WAAW,4BAA4BR,CAAS;AAAA,YAAA,CACjD;AAAA,YAEA,YAAE,qBAAqB;AAAA,UAAA;AAAA,QAC1B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Avatar.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\nimport \"./styles.css\";\n\nexport interface AvatarProps {\n name: string;\n src?: string | null;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ name, src }) => {\n function getInitials(name: string) {\n const [firstName, lastName] = name.split(\" \");\n return firstName && lastName\n ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n : firstName\n ? firstName.charAt(0)\n : \"\";\n }\n\n return (\n <div className=\"rnf-avatar\">\n {src ? (\n <img src={src} alt={`Image of ${name}`} className=\"rnf-avatar__image\" />\n ) : (\n <span className=\"rnf-avatar__initials\">{getInitials(name)}</span>\n )}\n </div>\n );\n};\n"],"names":["Avatar","name","src","getInitials","firstName","lastName","jsx"],"mappings":";;AAQO,MAAMA,IAAgC,CAAC,EAAE,MAAAC,GAAM,KAAAC,QAAU;AAC9D,WAASC,EAAYF,GAAc;AACjC,UAAM,CAACG,GAAWC,CAAQ,IAAIJ,EAAK,MAAM,GAAG;AAC5C,WAAOG,KAAaC,IAChB,GAAGD,EAAU,OAAO,CAAC,CAAC,GAAGC,EAAS,OAAO,CAAC,CAAC,KAC3CD,IACEA,EAAU,OAAO,CAAC,IAClB;AAAA,EACR;AAGE,SAAA,gBAAAE,EAAC,SAAI,WAAU,cACZ,cACE,gBAAAA,EAAA,OAAA,EAAI,KAAAJ,GAAU,KAAK,YAAYD,CAAI,IAAI,WAAU,oBAAA,CAAoB,IAErE,gBAAAK,EAAA,QAAA,EAAK,WAAU,wBAAwB,UAAAH,EAAYF,CAAI,EAAE,CAAA,EAE9D,CAAA;AAEJ;"}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { jsx as e, jsxs as f } from "react/jsx-runtime";
|
2
2
|
import i, { useMemo as h } from "react";
|
3
|
-
import { Avatar as y } from "./Avatar.
|
4
|
-
import { ArchiveButton as w } from "./ArchiveButton.
|
3
|
+
import { Avatar as y } from "./Avatar.mjs";
|
4
|
+
import { ArchiveButton as w } from "./ArchiveButton.mjs";
|
5
5
|
import { useKnockFeed as x, useTranslations as C, renderNodeOrFallback as m, formatTimestamp as T } from "@knocklabs/react-core";
|
6
6
|
|
7
7
|
const I = i.forwardRef(({ item: n, onItemClick: l, avatar: _, children: s, archiveButton: u }, p) => {
|
@@ -55,4 +55,4 @@ const I = i.forwardRef(({ item: n, onItemClick: l, avatar: _, children: s, archi
|
|
55
55
|
export {
|
56
56
|
I as NotificationCell
|
57
57
|
};
|
58
|
-
//# sourceMappingURL=NotificationCell.
|
58
|
+
//# sourceMappingURL=NotificationCell.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"NotificationCell.mjs","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\nimport { ContentBlock, FeedItem } from \"@knocklabs/client\";\nimport { Avatar } from \"./Avatar\";\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport {\n useKnockFeed,\n useTranslations,\n formatTimestamp,\n renderNodeOrFallback,\n} from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n item: FeedItem;\n onItemClick?: (item: FeedItem) => void;\n avatar?: ReactNode;\n children?: ReactNode;\n archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n [name: string]: ContentBlock;\n};\n\nexport const NotificationCell = React.forwardRef<\n HTMLDivElement,\n NotificationCellProps\n>(({ item, onItemClick, avatar, children, archiveButton }, ref) => {\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 && blocksByName.action_url.rendered;\n\n const onClick = 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 // Delay when we navigate, until we've actually issued our API call.\n setTimeout(() => {\n if (actionUrl && actionUrl !== \"\") {\n window.location.assign(actionUrl);\n }\n }, 200);\n }, [item]);\n\n const onKeyDown = React.useCallback(\n (ev: React.KeyboardEvent<HTMLDivElement>) => {\n switch (ev.key) {\n case \"Enter\": {\n ev.stopPropagation();\n onClick();\n break;\n }\n default:\n break;\n }\n },\n [onClick],\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={onClick}\n onKeyDown={onKeyDown}\n tabIndex={0}\n >\n <div className=\"rnf-notification-cell__inner\">\n {!item.read_at && <div className=\"rnf-notification-cell__unread-dot\" />}\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={{ __html: blocksByName.body.rendered }}\n />\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"],"names":["NotificationCell","React","item","onItemClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","acc","block","actionUrl","onClick","onKeyDown","ev","actor","jsx","jsxs","renderNodeOrFallback","Avatar","formatTimestamp","ArchiveButton"],"mappings":";;;;;;AAyBa,MAAAA,IAAmBC,EAAM,WAGpC,CAAC,EAAE,MAAAC,GAAM,aAAAC,GAAa,QAAAC,GAAQ,UAAAC,GAAU,eAAAC,EAAc,GAAGC,MAAQ;AACjE,QAAM,EAAE,YAAAC,GAAY,WAAAC,EAAU,IAAIC,EAAa,GACzC,EAAE,QAAAC,MAAWC,KAEbC,IAA4BC,EAAQ,MACjCZ,EAAK,OAAO,OAAO,CAACa,GAAKC,OACvB,EAAE,GAAGD,GAAK,CAACC,EAAM,IAAI,GAAGA,EAAM,IACpC,CAAE,CAAA,GACJ,CAACd,CAAI,CAAC,GAEHe,IAAYJ,EAAa,cAAcA,EAAa,WAAW,UAE/DK,IAAUjB,EAAM,YAAY,MAAM;AAIlC,QAFJO,EAAW,iBAAiBN,CAAI,GAE5BC;AAAa,aAAOA,EAAYD,CAAI;AAGxC,eAAW,MAAM;AACX,MAAAe,KAAaA,MAAc,MACtB,OAAA,SAAS,OAAOA,CAAS;AAAA,OAEjC,GAAG;AAAA,EAAA,GACL,CAACf,CAAI,CAAC,GAEHiB,IAAYlB,EAAM;AAAA,IACtB,CAACmB,MAA4C;AAC3C,cAAQA,EAAG,KAAK;AAAA,QACd,KAAK,SAAS;AACZ,UAAAA,EAAG,gBAAgB,GACXF;AACR;AAAA,QACF;AAAA,MAGF;AAAA,IACF;AAAA,IACA,CAACA,CAAO;AAAA,EAAA,GAGJG,IAAQnB,EAAK,OAAO,CAAC;AAGzB,SAAA,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAf;AAAA,MACA,WAAW,gDAAgDE,CAAS;AAAA,MACpE,SAAAS;AAAA,MACA,WAAAC;AAAA,MACA,UAAU;AAAA,MAEV,UAAA,gBAAAI,EAAC,OAAI,EAAA,WAAU,gCACZ,UAAA;AAAA,QAAA,CAACrB,EAAK,WAAY,gBAAAoB,EAAA,OAAA,EAAI,WAAU,qCAAoC;AAAA,QAEpEE;AAAA,UACCpB;AAAA,UACAiB,KAAS,UAAUA,KAASA,EAAM,QAChC,gBAAAC,EAACG,GAAO,EAAA,MAAMJ,EAAM,MAAM,KAAKA,EAAM,OAAQ,CAAA;AAAA,QAEjD;AAAA,QAEA,gBAAAE,EAAC,OAAI,EAAA,WAAU,wCACZ,UAAA;AAAA,UAAAV,EAAa,QACZ,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,yBAAyB,EAAE,QAAQT,EAAa,KAAK,SAAS;AAAA,YAAA;AAAA,UAChE;AAAA,UAGDR,KACC,gBAAAiB,EAAC,OAAI,EAAA,WAAU,wCACZ,UAAAjB,GACH;AAAA,UAGF,gBAAAiB,EAAC,QAAK,EAAA,WAAU,oCACb,UAAAI,EAAgBxB,EAAK,aAAa,EAAE,QAAAS,EAAO,CAAC,EAC/C,CAAA;AAAA,QAAA,GACF;AAAA,QAECa,EAAqBlB,GAAgB,gBAAAgB,EAAAK,GAAA,EAAc,MAAAzB,EAAY,CAAA,CAAE;AAAA,MAAA,GACpE;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsxs as s, jsx as o } from "react/jsx-runtime";
|
2
|
-
import { ChevronDown as t } from "../../../core/components/Icons/ChevronDown.
|
2
|
+
import { ChevronDown as t } from "../../../core/components/Icons/ChevronDown.mjs";
|
3
3
|
import { useKnockFeed as m } from "@knocklabs/react-core";
|
4
4
|
|
5
5
|
const l = ({
|
@@ -16,4 +16,4 @@ const l = ({
|
|
16
16
|
export {
|
17
17
|
l as Dropdown
|
18
18
|
};
|
19
|
-
//# sourceMappingURL=Dropdown.
|
19
|
+
//# sourceMappingURL=Dropdown.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Dropdown.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { ChevronDown } from \"../../../core/components/Icons\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n value: string;\n onChange: (e: any) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n children,\n value,\n onChange,\n}) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n <select value={value} onChange={onChange}>\n {children}\n </select>\n <ChevronDown />\n </div>\n );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","jsxs","jsx","ChevronDown"],"mappings":";;;;AAWO,MAAMA,IAAuD,CAAC;AAAA,EACnE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAA,EAAE,WAAAC,MAAcC;AAEtB,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAW,8BAA8BF,CAAS,IACrD,UAAA;AAAA,IAAC,gBAAAG,EAAA,UAAA,EAAO,OAAAL,GAAc,UAAAC,GACnB,UAAAF,EACH,CAAA;AAAA,sBACCO,GAAY,EAAA;AAAA,EACf,EAAA,CAAA;AAEJ;"}
|
package/dist/esm/modules/feed/components/NotificationFeed/{MarkAsRead.esm.js → MarkAsRead.mjs}
RENAMED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { jsxs as c, jsx as i } from "react/jsx-runtime";
|
2
2
|
import * as u from "react";
|
3
3
|
import { useKnockFeed as f, useTranslations as k } from "@knocklabs/react-core";
|
4
|
-
import { CheckmarkCircle as p } from "../../../core/components/Icons/CheckmarkCircle.
|
4
|
+
import { CheckmarkCircle as p } from "../../../core/components/Icons/CheckmarkCircle.mjs";
|
5
5
|
|
6
6
|
const x = ({ onClick: a }) => {
|
7
7
|
const { useFeedStore: r, feedClient: t, colorMode: s } = f(), { t: n } = k(), o = r(
|
@@ -29,4 +29,4 @@ const x = ({ onClick: a }) => {
|
|
29
29
|
export {
|
30
30
|
x as MarkAsRead
|
31
31
|
};
|
32
|
-
//# sourceMappingURL=MarkAsRead.
|
32
|
+
//# sourceMappingURL=MarkAsRead.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MarkAsRead.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { CheckmarkCircle } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type MarkAsReadProps = {\n onClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nexport const MarkAsRead: React.FC<MarkAsReadProps> = ({ onClick }) => {\n const { useFeedStore, feedClient, colorMode } = useKnockFeed();\n const { t } = useTranslations();\n\n const unreadItems = useFeedStore((state) =>\n state.items.filter((item) => !item.read_at),\n );\n\n const unreadCount = useFeedStore((state) => state.metadata.unread_count);\n\n const onClickHandler = React.useCallback(\n (e: React.MouseEvent) => {\n feedClient.markAllAsRead();\n if (onClick) onClick(e, unreadItems);\n },\n [feedClient, unreadItems, onClick],\n );\n\n return (\n <button\n className={`rnf-mark-all-as-read rnf-mark-all-as-read--${colorMode}`}\n disabled={unreadCount === 0}\n onClick={onClickHandler}\n type=\"button\"\n >\n {t(\"markAllAsRead\")}\n <CheckmarkCircle />\n </button>\n );\n};\n"],"names":["MarkAsRead","onClick","useFeedStore","feedClient","colorMode","useKnockFeed","t","useTranslations","unreadItems","state","item","unreadCount","onClickHandler","React","jsxs","CheckmarkCircle"],"mappings":";;;;;AAWO,MAAMA,IAAwC,CAAC,EAAE,SAAAC,QAAc;AACpE,QAAM,EAAE,cAAAC,GAAc,YAAAC,GAAY,WAAAC,MAAcC,EAAa,GACvD,EAAE,GAAAC,MAAMC,KAERC,IAAcN;AAAA,IAAa,CAACO,MAChCA,EAAM,MAAM,OAAO,CAACC,MAAS,CAACA,EAAK,OAAO;AAAA,EAAA,GAGtCC,IAAcT,EAAa,CAACO,MAAUA,EAAM,SAAS,YAAY,GAEjEG,IAAiBC,EAAM;AAAA,IAC3B,CAAC,MAAwB;AACvB,MAAAV,EAAW,cAAc,GACrBF,KAASA,EAAQ,GAAGO,CAAW;AAAA,IACrC;AAAA,IACA,CAACL,GAAYK,GAAaP,CAAO;AAAA,EAAA;AAIjC,SAAA,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8CAA8CV,CAAS;AAAA,MAClE,UAAUO,MAAgB;AAAA,MAC1B,SAASC;AAAA,MACT,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAAN,EAAE,eAAe;AAAA,0BACjBS,GAAgB,EAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvB;"}
|
@@ -1,14 +1,14 @@
|
|
1
1
|
import { jsxs as p, jsx as e } from "react/jsx-runtime";
|
2
2
|
import { isRequestInFlight as C, NetworkStatus as f } from "@knocklabs/client";
|
3
3
|
import { useState as R, useRef as y, useEffect as k, useCallback as B } from "react";
|
4
|
-
import { EmptyFeed as q } from "../EmptyFeed/EmptyFeed.
|
4
|
+
import { EmptyFeed as q } from "../EmptyFeed/EmptyFeed.mjs";
|
5
5
|
import { useKnockFeed as j, useFeedSettings as E, useTranslations as H, FilterStatus as K } from "@knocklabs/react-core";
|
6
|
-
import { Spinner as M } from "../../../core/components/Spinner/Spinner.
|
7
|
-
import { NotificationCell as z } from "../NotificationCell/NotificationCell.
|
6
|
+
import { Spinner as M } from "../../../core/components/Spinner/Spinner.mjs";
|
7
|
+
import { NotificationCell as z } from "../NotificationCell/NotificationCell.mjs";
|
8
8
|
|
9
|
-
import { NotificationFeedHeader as A } from "./NotificationFeedHeader.
|
9
|
+
import { NotificationFeedHeader as A } from "./NotificationFeedHeader.mjs";
|
10
10
|
|
11
|
-
import L from "../../../core/hooks/useOnBottomScroll.
|
11
|
+
import L from "../../../core/hooks/useOnBottomScroll.mjs";
|
12
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(
|
13
13
|
M,
|
14
14
|
{
|
@@ -64,4 +64,4 @@ const O = (t) => /* @__PURE__ */ e(z, { ...t }, t.item.id), P = (t) => /* @__PUR
|
|
64
64
|
export {
|
65
65
|
ee as NotificationFeed
|
66
66
|
};
|
67
|
-
//# sourceMappingURL=NotificationFeed.
|
67
|
+
//# sourceMappingURL=NotificationFeed.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"NotificationFeed.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, isRequestInFlight, NetworkStatus } from \"@knocklabs/client\";\nimport React, {\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport {\n useKnockFeed,\n useFeedSettings,\n ColorMode,\n FilterStatus,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport { NotificationCell } from \"../NotificationCell\";\nimport {\n NotificationFeedHeader,\n NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\n\nimport \"./styles.css\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\n\nexport type OnNotificationClick = (item: FeedItem) => void;\nexport type RenderItem = ({ item }: RenderItemProps) => ReactNode;\nexport type RenderItemProps = {\n item: FeedItem;\n onItemClick?: OnNotificationClick;\n};\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?: OnNotificationClick;\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 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({ item, onItemClick: onNotificationClick }),\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","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":";;;;;;;;;;;AA+CA,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,sBAAAC;AAAA,EACA,qBAAAC,IAAsBC,EAAa;AAAA,EACnC,QAAAC;AAAA,EACA,cAAAC,IAAef;AACjB,MAAM;AACJ,QAAM,CAACgB,GAAQC,CAAS,IAAIC,EAASN,CAAmB,GAClD,EAAE,YAAAO,GAAY,cAAAC,GAAc,WAAAjB,MAAckB,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,gDAAgDnC,CAAS;AAAA,MAEnE,UAAA;AAAA,QAAAW,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,gBAAAzC,EAAAI,GAAA,EAAe,WAAAC,GAAsB;AAAA,4BAGvC,OAAI,EAAA,WAAU,+CACZ,UAAkByB,MAAAW,EAAc,WAC/BZ,EAAM;AAAA,YAAI,CAACa,MACT/B,EAAW,EAAE,MAAA+B,GAAM,aAAa9B,GAAqB;AAAA,UAAA,GAE3D;AAAA,UAECkB,MAAkBW,EAAc,aAC/B,gBAAAzC,EAACI,KAAe,WAAAC,GAAsB;AAAA,UAGvC,CAAC8B,KAAmBD,KAAWzB;AAAA,QAAA,GAClC;AAAA,SAECe,KAAA,gBAAAA,EAAU,SAAS,sBACjB,gBAAAxB,EAAA,OAAA,EAAI,WAAU,yCACb,UAAA,gBAAAA,EAAC,KAAE,EAAA,MAAMO,GAAmB,QAAO,UAChC,UAAEmB,EAAA,WAAW,EAChB,CAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { jsxs as i, jsx as n } from "react/jsx-runtime";
|
2
2
|
import { FilterStatus as o, useTranslations as d } from "@knocklabs/react-core";
|
3
|
-
import { Dropdown as c } from "./Dropdown.
|
4
|
-
import { MarkAsRead as l } from "./MarkAsRead.
|
3
|
+
import { Dropdown as c } from "./Dropdown.mjs";
|
4
|
+
import { MarkAsRead as l } from "./MarkAsRead.mjs";
|
5
5
|
const f = [
|
6
6
|
o.All,
|
7
7
|
o.Unread,
|
@@ -30,4 +30,4 @@ const f = [
|
|
30
30
|
export {
|
31
31
|
u as NotificationFeedHeader
|
32
32
|
};
|
33
|
-
//# sourceMappingURL=NotificationFeedHeader.
|
33
|
+
//# sourceMappingURL=NotificationFeedHeader.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"NotificationFeedHeader.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import React, { SetStateAction } from \"react\";\nimport { FeedItem } from \"@knocklabs/client\";\n\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport { Dropdown } from \"./Dropdown\";\nimport { MarkAsRead } from \"./MarkAsRead\";\n\nexport type NotificationFeedHeaderProps = {\n filterStatus: FilterStatus;\n setFilterStatus: React.Dispatch<SetStateAction<FilterStatus>>;\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nconst OrderedFilterStatuses = [\n FilterStatus.All,\n FilterStatus.Unread,\n FilterStatus.Read,\n];\n\nexport const NotificationFeedHeader: React.FC<NotificationFeedHeaderProps> = ({\n onMarkAllAsReadClick,\n filterStatus,\n setFilterStatus,\n}) => {\n const { t } = useTranslations();\n\n return (\n <header className=\"rnf-notification-feed__header\">\n <div className=\"rnf-notification-feed__selector\">\n <span className=\"rnf-notification-feed__type\">\n {t(\"notifications\")}\n </span>\n <Dropdown\n value={filterStatus}\n onChange={(e) => setFilterStatus(e.target.value)}\n >\n {OrderedFilterStatuses.map((filterStatus) => (\n <option key={filterStatus} value={filterStatus}>\n {t(filterStatus)}\n </option>\n ))}\n </Dropdown>\n </div>\n <MarkAsRead onClick={onMarkAllAsReadClick} />\n </header>\n );\n};\n"],"names":["OrderedFilterStatuses","FilterStatus","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","jsxs","jsx","Dropdown","MarkAsRead"],"mappings":";;;;AAaA,MAAMA,IAAwB;AAAA,EAC5BC,EAAa;AAAA,EACbA,EAAa;AAAA,EACbA,EAAa;AACf,GAEaC,IAAgE,CAAC;AAAA,EAC5E,sBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AACF,MAAM;AACE,QAAA,EAAE,GAAAC,MAAMC;AAGZ,SAAA,gBAAAC,EAAC,UAAO,EAAA,WAAU,iCAChB,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAK,EAAA,WAAU,+BACb,UAAAH,EAAE,eAAe,GACpB;AAAA,MACA,gBAAAG;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAON;AAAA,UACP,UAAU,CAAC,MAAMC,EAAgB,EAAE,OAAO,KAAK;AAAA,UAE9C,UAAsBL,EAAA,IAAI,CAACI,MACzB,gBAAAK,EAAA,UAAA,EAA0B,OAAOL,GAC/B,UAAEA,EAAAA,CAAY,EADJA,GAAAA,CAEb,CACD;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,GACF;AAAA,IACA,gBAAAK,EAACE,GAAW,EAAA,SAASR,EAAsB,CAAA;AAAA,EAC7C,EAAA,CAAA;AAEJ;"}
|
package/dist/esm/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"NotificationFeedContainer.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\nimport \"./styles.css\";\n\nexport const NotificationFeedContainer: React.FC<PropsWithChildren> = ({\n children,\n}) => {\n return <div className=\"rnf-feed-provider\">{children}</div>;\n};\n"],"names":["NotificationFeedContainer","children","jsx"],"mappings":";;AAGO,MAAMA,IAAyD,CAAC;AAAA,EACrE,UAAAC;AACF,MACU,gBAAAC,EAAA,OAAA,EAAI,WAAU,qBAAqB,UAAAD,EAAS,CAAA;"}
|
@@ -1,11 +1,11 @@
|
|
1
1
|
import { jsx as t } from "react/jsx-runtime";
|
2
2
|
import { useEffect as v } from "react";
|
3
3
|
import { usePopper as x } from "react-popper";
|
4
|
-
import { NotificationFeed as y } from "../NotificationFeed/NotificationFeed.
|
5
|
-
import "../NotificationFeed/NotificationFeedHeader.
|
4
|
+
import { NotificationFeed as y } from "../NotificationFeed/NotificationFeed.mjs";
|
5
|
+
import "../NotificationFeed/NotificationFeedHeader.mjs";
|
6
6
|
import { useKnockFeed as F } from "@knocklabs/react-core";
|
7
7
|
|
8
|
-
import N from "../../../core/hooks/useComponentVisible.
|
8
|
+
import N from "../../../core/hooks/useComponentVisible.mjs";
|
9
9
|
|
10
10
|
const b = ({ store: e, feedClient: o }) => {
|
11
11
|
e.metadata.unseen_count > 0 && o.markAllAsSeen();
|
@@ -57,4 +57,4 @@ const b = ({ store: e, feedClient: o }) => {
|
|
57
57
|
export {
|
58
58
|
E as NotificationFeedPopover
|
59
59
|
};
|
60
|
-
//# sourceMappingURL=NotificationFeedPopover.
|
60
|
+
//# sourceMappingURL=NotificationFeedPopover.mjs.map
|
package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"NotificationFeedPopover.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import React, { RefObject, useEffect } from \"react\";\nimport { usePopper } from \"react-popper\";\nimport { Placement } from \"@popperjs/core\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\n\nimport \"./styles.css\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { Feed, FeedStoreState } from \"@knocklabs/client\";\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]);\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 }}\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":";;;;;;;;;AAeA,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,EAC9B,GACC,CAACE,CAAS,CAAC,GAGZ,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gEAAgET,CAAS;AAAA,MACpF,OAAO;AAAA,QACL,GAAGK,EAAO;AAAA,QACV,YAAYZ,IAAY,YAAY;AAAA,MACtC;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;"}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import { jsxs as e, jsx as o } from "react/jsx-runtime";
|
2
2
|
import c from "react";
|
3
|
-
import { BellIcon as f } from "../../../core/components/Icons/Bell.
|
3
|
+
import { BellIcon as f } from "../../../core/components/Icons/Bell.mjs";
|
4
4
|
import { useKnockFeed as a } from "@knocklabs/react-core";
|
5
|
-
import { UnseenBadge as m } from "../UnseenBadge/UnseenBadge.
|
5
|
+
import { UnseenBadge as m } from "../UnseenBadge/UnseenBadge.mjs";
|
6
6
|
|
7
7
|
const x = c.forwardRef(({ onClick: t, badgeCountType: n }, i) => {
|
8
8
|
const { colorMode: r } = a();
|
@@ -24,4 +24,4 @@ const x = c.forwardRef(({ onClick: t, badgeCountType: n }, i) => {
|
|
24
24
|
export {
|
25
25
|
x as NotificationIconButton
|
26
26
|
};
|
27
|
-
//# sourceMappingURL=NotificationIconButton.
|
27
|
+
//# sourceMappingURL=NotificationIconButton.mjs.map
|
package/dist/esm/modules/feed/components/NotificationIconButton/NotificationIconButton.mjs.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"NotificationIconButton.mjs","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import React, { SyntheticEvent } from \"react\";\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { BadgeCountType, UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n // What value should we use to drive the badge count?\n badgeCountType?: BadgeCountType;\n onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n HTMLButtonElement,\n NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <button\n className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n role=\"button\"\n aria-label=\"Open notification feed\"\n ref={ref}\n onClick={onClick}\n >\n <BellIcon />\n <UnseenBadge badgeCountType={badgeCountType} />\n </button>\n );\n});\n"],"names":["NotificationIconButton","React","onClick","badgeCountType","ref","colorMode","useKnockFeed","jsxs","jsx","BellIcon","UnseenBadge"],"mappings":";;;;;;AAaa,MAAAA,IAAyBC,EAAM,WAG1C,CAAC,EAAE,SAAAC,GAAS,gBAAAC,KAAkBC,MAAQ;AAChC,QAAA,EAAE,WAAAC,MAAcC;AAGpB,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8DAA8DF,CAAS;AAAA,MAClF,MAAK;AAAA,MACL,cAAW;AAAA,MACX,KAAAD;AAAA,MACA,SAAAF;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAM,EAACC,GAAS,EAAA;AAAA,QACV,gBAAAD,EAACE,KAAY,gBAAAP,GAAgC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnD,CAAC;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"UnseenBadge.mjs","sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { useKnockFeed, formatBadgeCount } from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\nimport { FeedMetadata } from \"@knocklabs/client\";\n\nexport type BadgeCountType = \"unseen\" | \"unread\" | \"all\";\n\nexport type UnseenBadgeProps = {\n badgeCountType?: BadgeCountType;\n};\n\nfunction selectBadgeCount(\n badgeCountType: BadgeCountType,\n metadata: FeedMetadata,\n) {\n switch (badgeCountType) {\n case \"all\":\n return metadata.total_count;\n case \"unread\":\n return metadata.unread_count;\n case \"unseen\":\n return metadata.unseen_count;\n }\n}\n\nexport const UnseenBadge: React.FC<UnseenBadgeProps> = ({\n badgeCountType = \"unseen\",\n}) => {\n const { useFeedStore } = useKnockFeed();\n const badgeCountValue = useFeedStore((state) =>\n selectBadgeCount(badgeCountType, state.metadata),\n );\n\n return badgeCountValue !== 0 ? (\n <div className=\"rnf-unseen-badge\">\n <span className=\"rnf-unseen-badge__count\">\n {formatBadgeCount(badgeCountValue)}\n </span>\n </div>\n ) : null;\n};\n"],"names":["selectBadgeCount","badgeCountType","metadata","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","jsx","formatBadgeCount"],"mappings":";;;AAYA,SAASA,EACPC,GACAC,GACA;AACA,UAAQD,GAAgB;AAAA,IACtB,KAAK;AACH,aAAOC,EAAS;AAAA,IAClB,KAAK;AACH,aAAOA,EAAS;AAAA,IAClB,KAAK;AACH,aAAOA,EAAS;AAAA,EACpB;AACF;AAEO,MAAMC,IAA0C,CAAC;AAAA,EACtD,gBAAAF,IAAiB;AACnB,MAAM;AACE,QAAA,EAAE,cAAAG,MAAiBC,KACnBC,IAAkBF;AAAA,IAAa,CAACG,MACpCP,EAAiBC,GAAgBM,EAAM,QAAQ;AAAA,EAAA;AAGjD,SAAOD,MAAoB,IACxB,gBAAAE,EAAA,OAAA,EAAI,WAAU,oBACb,UAAA,gBAAAA,EAAC,QAAK,EAAA,WAAU,2BACb,UAAAC,EAAiBH,CAAe,EACnC,CAAA,GACF,IACE;AACN;"}
|
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{--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-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-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-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}.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)}
|
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-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}}.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-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-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-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-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}
|
package/package.json
CHANGED
@@ -2,10 +2,10 @@
|
|
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.1.
|
5
|
+
"version": "0.1.9",
|
6
6
|
"license": "MIT",
|
7
7
|
"main": "dist/cjs/index.js",
|
8
|
-
"module": "dist/esm/index.
|
8
|
+
"module": "dist/esm/index.mjs",
|
9
9
|
"types": "dist/types/index.d.ts",
|
10
10
|
"typings": "dist/types/index.d.ts",
|
11
11
|
"style": "dist/index.css",
|
@@ -14,8 +14,8 @@
|
|
14
14
|
".": {
|
15
15
|
"require": "./dist/cjs/index.js",
|
16
16
|
"types": "./dist/types/index.d.ts",
|
17
|
-
"import": "./dist/esm/index.
|
18
|
-
"default": "./dist/
|
17
|
+
"import": "./dist/esm/index.mjs",
|
18
|
+
"default": "./dist/cjs/index.js"
|
19
19
|
}
|
20
20
|
},
|
21
21
|
"files": [
|
@@ -28,8 +28,8 @@
|
|
28
28
|
"//": "dev:local runs a dev server and lets you test components at localhost:5173",
|
29
29
|
"dev:local": "vite",
|
30
30
|
"build": "yarn clean && yarn build:esm && yarn build:cjs",
|
31
|
-
"build:esm": "BUILD_TARGET=esm;
|
32
|
-
"build:cjs": "BUILD_TARGET=cjs;
|
31
|
+
"build:esm": "BUILD_TARGET=esm; vite build",
|
32
|
+
"build:cjs": "BUILD_TARGET=cjs; vite build",
|
33
33
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
34
34
|
"format": "prettier \"src/**/*.{js,ts,tsx}\" --write",
|
35
35
|
"format:check": "prettier \"src/**/*.{js,ts,tsx}\" --check",
|
@@ -50,8 +50,8 @@
|
|
50
50
|
"react-dom": ">=16.8.0"
|
51
51
|
},
|
52
52
|
"dependencies": {
|
53
|
-
"@knocklabs/client": "
|
54
|
-
"@knocklabs/react-core": "
|
53
|
+
"@knocklabs/client": "^0.8.21",
|
54
|
+
"@knocklabs/react-core": "^0.1.6",
|
55
55
|
"@popperjs/core": "^2.11.8",
|
56
56
|
"lodash.debounce": "^4.0.8",
|
57
57
|
"react-popper": "^2.3.0",
|
@@ -79,4 +79,4 @@
|
|
79
79
|
"vite-plugin-no-bundle": "^3.0.0",
|
80
80
|
"vitest": "^1.2.2"
|
81
81
|
}
|
82
|
-
}
|
82
|
+
}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Button.esm.js","sources":["../../../../../../src/modules/core/components/Button/Button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { ButtonSpinner } from \"./ButtonSpinner\";\n\nimport \"./styles.css\";\n\nexport type ButtonProps = {\n variant: \"primary\" | \"secondary\";\n loadingText?: string;\n isLoading?: boolean;\n isDisabled?: boolean;\n isFullWidth?: boolean;\n onClick: (e: React.MouseEvent) => void;\n};\n\nexport const Button: React.FC<PropsWithChildren<ButtonProps>> = ({\n variant = \"primary\",\n loadingText,\n isLoading = false,\n isDisabled = false,\n isFullWidth = false,\n onClick,\n children,\n}) => {\n const { colorMode } = useKnockFeed();\n\n const classNames = [\n \"rnf-button\",\n `rnf-button--${variant}`,\n isFullWidth ? \"rnf-button--full-width\" : \"\",\n isLoading ? \"rnf-button--is-loading\" : \"\",\n `rnf-button--${colorMode}`,\n ].join(\" \");\n\n // In this case when there's no loading text, we still want to display the original\n // content of the button, but make it hidden. That allows us to keep the button width\n // consistent and show the spinner in the middle, meaning no layout shift.\n const textToShowWhileLoading = loadingText || (\n <span className=\"rnf-button__button-text-hidden\">{children}</span>\n );\n\n return (\n <button\n onClick={onClick}\n className={classNames}\n disabled={isLoading || isDisabled}\n type=\"button\"\n >\n {isLoading && <ButtonSpinner hasLabel={!!loadingText} />}\n {isLoading ? textToShowWhileLoading : children}\n </button>\n );\n};\n"],"names":["Button","variant","loadingText","isLoading","isDisabled","isFullWidth","onClick","children","colorMode","useKnockFeed","classNames","jsxs","jsx","ButtonSpinner"],"mappings":";;;;AAeO,MAAMA,IAAmD,CAAC;AAAA,EAC/D,SAAAC,IAAU;AAAA,EACV,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc;AAAA,EACd,SAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAA,EAAE,WAAAC,MAAcC,KAEhBC,IAAa;AAAA,IACjB;AAAA,IACA,eAAeT,CAAO;AAAA,IACtBI,IAAc,2BAA2B;AAAA,IACzCF,IAAY,2BAA2B;AAAA,IACvC,eAAeK,CAAS;AAAA,EAAA,EACxB,KAAK,GAAG;AAUR,SAAA,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAL;AAAA,MACA,WAAWI;AAAA,MACX,UAAUP,KAAaC;AAAA,MACvB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAAD,KAAc,gBAAAS,EAAAC,GAAA,EAAc,UAAU,CAAC,CAACX,GAAa;AAAA,QACrDC,IAZ0BD,KAC7B,gBAAAU,EAAC,QAAK,EAAA,WAAU,kCAAkC,UAAAL,EAAS,CAAA,IAWnBA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5C;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ButtonGroup.esm.js","sources":["../../../../../../src/modules/core/components/Button/ButtonGroup.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport \"./styles.css\";\n\nexport const ButtonGroup: React.FC<PropsWithChildren> = ({ children }) => (\n <div className=\"rnf-button-group\">{children}</div>\n);\n"],"names":["ButtonGroup","children","jsx"],"mappings":";;AAIa,MAAAA,IAA2C,CAAC,EAAE,UAAAC,QACxD,gBAAAC,EAAA,OAAA,EAAI,WAAU,oBAAoB,UAAAD,EAAS,CAAA;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ButtonSpinner.esm.js","sources":["../../../../../../src/modules/core/components/Button/ButtonSpinner.tsx"],"sourcesContent":["import React from \"react\";\nimport { Spinner } from \"../Spinner\";\n\nimport \"./styles.css\";\n\ntype ButtonSpinnerProps = {\n hasLabel: boolean;\n};\n\nexport const ButtonSpinner: React.FC<ButtonSpinnerProps> = ({ hasLabel }) => (\n <div\n className={`rnf-button-spinner rnf-button-spinner--${\n hasLabel ? \"with-label\" : \"without-label\"\n }`}\n >\n <Spinner />\n </div>\n);\n"],"names":["ButtonSpinner","hasLabel","jsx","Spinner"],"mappings":";;;AASO,MAAMA,IAA8C,CAAC,EAAE,UAAAC,EAAA,MAC5D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,0CACTD,IAAW,eAAe,eAC5B;AAAA,IAEA,4BAACE,GAAQ,EAAA;AAAA,EAAA;AACX;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Bell.esm.js","sources":["../../../../../../src/modules/core/components/Icons/Bell.tsx"],"sourcesContent":["function BellIcon({ width = 24, height = 24 }) {\n return (\n <svg width={width} viewBox=\"0 0 24 24\" fill=\"none\" height={height}>\n <path\n d=\"M20.0474 16.4728C18.8436 14.9996 17.9938 14.2496 17.9938 10.1879C17.9938 6.46832 16.0944 5.14317 14.5311 4.49957C14.3235 4.41426 14.128 4.21832 14.0647 4.00504C13.7905 3.07176 13.0217 2.24957 11.9999 2.24957C10.978 2.24957 10.2088 3.07223 9.93736 4.00598C9.87408 4.2216 9.67861 4.41426 9.47096 4.49957C7.9058 5.1441 6.0083 6.46457 6.0083 10.1879C6.00596 14.2496 5.15611 14.9996 3.95237 16.4728C3.45362 17.0832 3.89049 17.9996 4.76283 17.9996H19.2416C20.1092 17.9996 20.5433 17.0803 20.0474 16.4728Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M14.9999 17.9988V18.7488C14.9999 19.5445 14.6838 20.3075 14.1212 20.8701C13.5586 21.4327 12.7955 21.7488 11.9999 21.7488C11.2042 21.7488 10.4412 21.4327 9.87856 20.8701C9.31595 20.3075 8.99988 19.5445 8.99988 18.7488V17.9988\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport { BellIcon };\n"],"names":["BellIcon","width","height","jsx"],"mappings":";AAAA,SAASA,EAAS,EAAE,OAAAC,IAAQ,IAAI,QAAAC,IAAS,MAAM;AAC7C,2BACG,OAAI,EAAA,OAAAD,GAAc,SAAQ,aAAY,MAAK,QAAO,QAAAC,GACjD,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,MAAA;AAAA,IACjB;AAAA,IACA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"CheckmarkCircle.esm.js","sources":["../../../../../../src/modules/core/components/Icons/CheckmarkCircle.tsx"],"sourcesContent":["const CheckmarkCircle = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 8.00012C14 4.68762 11.3125 2.00012 7.99997 2.00012C4.68747 2.00012 1.99997 4.68762 1.99997 8.00012C1.99997 11.3126 4.68747 14.0001 7.99997 14.0001C11.3125 14.0001 14 11.3126 14 8.00012Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeMiterlimit=\"10\"\n />\n <path\n d=\"M10.9999 5.5004L6.79994 10.5004L4.99994 8.5004\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nexport { CheckmarkCircle };\n"],"names":["CheckmarkCircle","jsxs","jsx"],"mappings":";AAAA,MAAMA,IAAkB,MACtB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,kBAAiB;AAAA,QAAA;AAAA,MACnB;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AACF;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ChevronDown.esm.js","sources":["../../../../../../src/modules/core/components/Icons/ChevronDown.tsx"],"sourcesContent":["const ChevronDown = () => (\n <svg\n width=\"8\"\n height=\"6\"\n viewBox=\"0 0 8 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.74994 1.87512L3.99994 4.12512L6.24994 1.87512\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nexport { ChevronDown };\n"],"names":["ChevronDown","jsx"],"mappings":";AAAA,MAAMA,IAAc,MAClB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AACF;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"CloseCircle.esm.js","sources":["../../../../../../src/modules/core/components/Icons/CloseCircle.tsx"],"sourcesContent":["const CloseCircle = () => (\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M7.00012 0.499939C3.41606 0.499939 0.500122 3.41588 0.500122 6.99994C0.500122 10.584 3.41606 13.4999 7.00012 13.4999C10.5842 13.4999 13.5001 10.584 13.5001 6.99994C13.5001 3.41588 10.5842 0.499939 7.00012 0.499939ZM9.35356 8.6465C9.40194 8.69247 9.44063 8.74766 9.46735 8.80881C9.49407 8.86997 9.50828 8.93585 9.50913 9.00259C9.50999 9.06932 9.49747 9.13555 9.47233 9.19737C9.44718 9.25919 9.40992 9.31535 9.36273 9.36254C9.31553 9.40973 9.25937 9.447 9.19755 9.47214C9.13573 9.49729 9.0695 9.5098 9.00277 9.50895C8.93604 9.50809 8.87015 9.49389 8.809 9.46717C8.74784 9.44045 8.69265 9.40176 8.64668 9.35337L7.00012 7.70712L5.35356 9.35337C5.25903 9.44318 5.13315 9.49251 5.00277 9.49084C4.87239 9.48918 4.74782 9.43664 4.65562 9.34444C4.56342 9.25224 4.51088 9.12767 4.50921 8.99729C4.50755 8.86691 4.55687 8.74103 4.64668 8.6465L6.29293 6.99994L4.64668 5.35338C4.55687 5.25884 4.50755 5.13297 4.50921 5.00259C4.51088 4.87221 4.56342 4.74764 4.65562 4.65544C4.74782 4.56324 4.87239 4.5107 5.00277 4.50903C5.13315 4.50736 5.25903 4.55669 5.35356 4.6465L7.00012 6.29275L8.64668 4.6465C8.74121 4.55669 8.86709 4.50736 8.99747 4.50903C9.12785 4.5107 9.25242 4.56324 9.34462 4.65544C9.43682 4.74764 9.48936 4.87221 9.49103 5.00259C9.4927 5.13297 9.44337 5.25884 9.35356 5.35338L7.70731 6.99994L9.35356 8.6465Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nexport { CloseCircle };\n"],"names":["CloseCircle","jsx"],"mappings":";AAAA,MAAMA,IAAc,MAClB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,MAAA;AAAA,IACP;AAAA,EAAA;AACF;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Spinner.esm.js","sources":["../../../../../../src/modules/core/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from \"react\";\n\ntype Speed = \"fast\" | \"slow\" | \"medium\";\n\nfunction speedSwitch(speed: Speed) {\n if (speed === \"fast\") return 600;\n if (speed === \"slow\") return 900;\n return 750;\n}\n\nexport interface SpinnerProps {\n color?: string;\n speed?: Speed;\n gap?: number;\n thickness?: number;\n size?: string;\n}\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n color = \"rgba(0,0,0,0.4)\",\n speed = \"medium\",\n gap = 4,\n thickness = 4,\n size = \"1em\",\n ...props\n}) => (\n <svg\n height={size}\n width={size}\n {...props}\n style={{ animationDuration: `${speedSwitch(speed)}ms` }}\n className=\"__react-svg-spinner_circle\"\n role=\"img\"\n aria-labelledby=\"title desc\"\n viewBox=\"0 0 32 32\"\n >\n <title id=\"title\">Circle loading spinner</title>\n <desc id=\"desc\">Image of a partial circle indicating \"loading.\"</desc>\n <style\n dangerouslySetInnerHTML={{\n __html: `\n .__react-svg-spinner_circle{\n transition-property: transform;\n animation-name: __react-svg-spinner_infinite-spin;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n }\n @keyframes __react-svg-spinner_infinite-spin {\n from {transform: rotate(0deg)}\n to {transform: rotate(360deg)}\n }\n `,\n }}\n />\n <circle\n role=\"presentation\"\n cx={16}\n cy={16}\n r={14 - thickness / 2}\n stroke={color}\n fill=\"none\"\n strokeWidth={thickness}\n strokeDasharray={Math.PI * 2 * (11 - gap)}\n strokeLinecap=\"round\"\n />\n </svg>\n);\n"],"names":["speedSwitch","speed","Spinner","color","gap","thickness","size","props","jsxs","jsx"],"mappings":";AAIA,SAASA,EAAYC,GAAc;AACjC,SAAIA,MAAU,SAAe,MACzBA,MAAU,SAAe,MACtB;AACT;AAUO,MAAMC,IAAkC,CAAC;AAAA,EAC9C,OAAAC,IAAQ;AAAA,EACR,OAAAF,IAAQ;AAAA,EACR,KAAAG,IAAM;AAAA,EACN,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,QAAQF;AAAA,IACR,OAAOA;AAAA,IACN,GAAGC;AAAA,IACJ,OAAO,EAAE,mBAAmB,GAAGP,EAAYC,CAAK,CAAC,KAAK;AAAA,IACtD,WAAU;AAAA,IACV,MAAK;AAAA,IACL,mBAAgB;AAAA,IAChB,SAAQ;AAAA,IAER,UAAA;AAAA,MAAC,gBAAAQ,EAAA,SAAA,EAAM,IAAG,SAAQ,UAAsB,0BAAA;AAAA,MACvC,gBAAAA,EAAA,QAAA,EAAK,IAAG,QAAO,UAA+C,mDAAA;AAAA,MAC/D,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,yBAAyB;AAAA,YACvB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAYV;AAAA,QAAA;AAAA,MACF;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,GAAG,KAAKJ,IAAY;AAAA,UACpB,QAAQF;AAAA,UACR,MAAK;AAAA,UACL,aAAaE;AAAA,UACb,iBAAiB,KAAK,KAAK,KAAK,KAAKD;AAAA,UACrC,eAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IAAA;AAAA,EAAA;AACF;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useComponentVisible.esm.js","sources":["../../../../../src/modules/core/hooks/useComponentVisible.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nfunction contains(parent: HTMLElement | null, child: HTMLElement) {\n if (!parent) return false;\n return parent === child || parent.contains(child);\n}\n\ntype Options = {\n closeOnClickOutside: boolean;\n};\n\nexport default function useComponentVisible(\n isVisible: boolean,\n onClose: (event: Event) => void,\n options: Options\n) {\n const ref = useRef<HTMLDivElement>(null);\n\n const handleKeydown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onClose(event);\n }\n };\n\n const handleClickOutside = (event: Event) => {\n if (\n options.closeOnClickOutside &&\n !contains(ref.current, event.target as HTMLElement)\n ) {\n event.stopPropagation();\n onClose(event);\n }\n };\n\n useEffect(() => {\n if (isVisible) {\n document.addEventListener(\"keydown\", handleKeydown, true);\n document.addEventListener(\"click\", handleClickOutside, true);\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown, true);\n document.removeEventListener(\"click\", handleClickOutside, true);\n };\n }, [isVisible]);\n\n return { ref };\n}\n"],"names":["contains","parent","child","useComponentVisible","isVisible","onClose","options","ref","useRef","handleKeydown","event","handleClickOutside","useEffect"],"mappings":";AAEA,SAASA,EAASC,GAA4BC,GAAoB;AAChE,SAAKD,IACEA,MAAWC,KAASD,EAAO,SAASC,CAAK,IAD5B;AAEtB;AAMwB,SAAAC,EACtBC,GACAC,GACAC,GACA;AACM,QAAAC,IAAMC,EAAuB,IAAI,GAEjCC,IAAgB,CAACC,MAAyB;AAC1C,IAAAA,EAAM,QAAQ,YAChBL,EAAQK,CAAK;AAAA,EACf,GAGIC,IAAqB,CAACD,MAAiB;AAEzC,IAAAJ,EAAQ,uBACR,CAACN,EAASO,EAAI,SAASG,EAAM,MAAqB,MAElDA,EAAM,gBAAgB,GACtBL,EAAQK,CAAK;AAAA,EACf;AAGF,SAAAE,EAAU,OACJR,MACO,SAAA,iBAAiB,WAAWK,GAAe,EAAI,GAC/C,SAAA,iBAAiB,SAASE,GAAoB,EAAI,IAGtD,MAAM;AACF,aAAA,oBAAoB,WAAWF,GAAe,EAAI,GAClD,SAAA,oBAAoB,SAASE,GAAoB,EAAI;AAAA,EAAA,IAE/D,CAACP,CAAS,CAAC,GAEP,EAAE,KAAAG,EAAI;AACf;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useOnBottomScroll.esm.js","sources":["../../../../../src/modules/core/hooks/useOnBottomScroll.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useMemo } from \"react\";\nimport debounce from \"lodash.debounce\";\n\ntype OnBottomScrollOptions = {\n ref: RefObject<HTMLDivElement | undefined>;\n callback: () => void;\n offset?: number;\n};\n\nconst noop = () => {};\n\nfunction useOnBottomScroll(options: OnBottomScrollOptions) {\n const callback = options.callback ?? noop;\n const ref = options.ref;\n const offset = options.offset ?? 0;\n\n const debouncedCallback = useMemo(() => debounce(callback, 200), [callback]);\n\n const handleOnScroll = useCallback(() => {\n if (ref.current) {\n const scrollNode = ref.current;\n const scrollContainerBottomPosition = Math.round(\n scrollNode.scrollTop + scrollNode.clientHeight,\n );\n const scrollPosition = Math.round(scrollNode.scrollHeight - offset);\n\n if (scrollPosition <= scrollContainerBottomPosition) {\n debouncedCallback();\n }\n }\n }, [debouncedCallback]);\n\n useEffect(() => {\n if (ref.current) {\n ref.current.addEventListener(\"scroll\", handleOnScroll);\n }\n\n return () => {\n if (ref.current) {\n ref.current.removeEventListener(\"scroll\", handleOnScroll);\n }\n };\n }, [handleOnScroll]);\n}\n\nexport default useOnBottomScroll;\n"],"names":["noop","useOnBottomScroll","options","callback","ref","offset","debouncedCallback","useMemo","debounce","handleOnScroll","useCallback","scrollNode","scrollContainerBottomPosition","useEffect"],"mappings":";;AASA,MAAMA,IAAO,MAAM;AAAC;AAEpB,SAASC,EAAkBC,GAAgC;AACnD,QAAAC,IAAWD,EAAQ,YAAYF,GAC/BI,IAAMF,EAAQ,KACdG,IAASH,EAAQ,UAAU,GAE3BI,IAAoBC,EAAQ,MAAMC,EAASL,GAAU,GAAG,GAAG,CAACA,CAAQ,CAAC,GAErEM,IAAiBC,EAAY,MAAM;AACvC,QAAIN,EAAI,SAAS;AACf,YAAMO,IAAaP,EAAI,SACjBQ,IAAgC,KAAK;AAAA,QACzCD,EAAW,YAAYA,EAAW;AAAA,MAAA;AAIpC,MAFuB,KAAK,MAAMA,EAAW,eAAeN,CAAM,KAE5CO,KACFN;IAEtB;AAAA,EAAA,GACC,CAACA,CAAiB,CAAC;AAEtB,EAAAO,EAAU,OACJT,EAAI,WACFA,EAAA,QAAQ,iBAAiB,UAAUK,CAAc,GAGhD,MAAM;AACX,IAAIL,EAAI,WACFA,EAAA,QAAQ,oBAAoB,UAAUK,CAAc;AAAA,EAC1D,IAED,CAACA,CAAc,CAAC;AACrB;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"EmptyFeed.esm.js","sources":["../../../../../../src/modules/feed/components/EmptyFeed/EmptyFeed.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslations, useKnockFeed } from \"@knocklabs/react-core\";\nimport \"./styles.css\";\n\nexport const EmptyFeed: React.FC = () => {\n const { colorMode } = useKnockFeed();\n const { t } = useTranslations();\n\n return (\n <div className={`rnf-empty-feed rnf-empty-feed--${colorMode}`}>\n <div className=\"rnf-empty-feed__inner\">\n <h2 className=\"rnf-empty-feed__header\">{t(\"emptyFeedTitle\")}</h2>\n <p className=\"rnf-empty-feed__body\">{t(\"emptyFeedBody\")}</p>\n </div>\n </div>\n );\n};\n"],"names":["EmptyFeed","colorMode","useKnockFeed","t","useTranslations","jsx","jsxs"],"mappings":";;;AAIO,MAAMA,IAAsB,MAAM;AACjC,QAAA,EAAE,WAAAC,MAAcC,KAChB,EAAE,GAAAC,MAAMC;AAGZ,SAAA,gBAAAC,EAAC,SAAI,WAAW,kCAAkCJ,CAAS,IACzD,UAAA,gBAAAK,EAAC,OAAI,EAAA,WAAU,yBACb,UAAA;AAAA,IAAA,gBAAAD,EAAC,MAAG,EAAA,WAAU,0BAA0B,UAAAF,EAAE,gBAAgB,GAAE;AAAA,sBAC3D,KAAE,EAAA,WAAU,wBAAwB,UAAAA,EAAE,eAAe,GAAE;AAAA,EAAA,EAC1D,CAAA,EACF,CAAA;AAEJ;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ArchiveButton.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/ArchiveButton.tsx"],"sourcesContent":["import { FeedItem } from \"@knocklabs/client\";\nimport React, { MouseEvent, useCallback } from \"react\";\nimport { usePopperTooltip } from \"react-popper-tooltip\";\nimport { useTranslations, useKnockFeed } from \"@knocklabs/react-core\";\nimport { CloseCircle } from \"../../../core/components/Icons\";\n\nexport interface ArchiveButtonProps {\n item: FeedItem;\n}\n\nconst ArchiveButton: React.FC<ArchiveButtonProps> = ({ item }) => {\n const { colorMode, feedClient } = useKnockFeed();\n const { t } = useTranslations();\n\n const onClick = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n\n feedClient.markAsArchived(item);\n },\n [item],\n );\n\n const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =\n usePopperTooltip({ placement: \"top-end\" });\n\n return (\n <button\n ref={setTriggerRef}\n onClick={onClick}\n type=\"button\"\n aria-label={t(\"archiveNotification\")}\n className={`rnf-archive-notification-btn rnf-archive-notification-btn--${colorMode}`}\n >\n <CloseCircle />\n\n {visible && (\n <div\n ref={setTooltipRef}\n {...getTooltipProps({\n className: `rnf-tooltip rnf-tooltip--${colorMode}`,\n })}\n >\n {t(\"archiveNotification\")}\n </div>\n )}\n </button>\n );\n};\n\nexport { ArchiveButton };\n"],"names":["ArchiveButton","item","colorMode","feedClient","useKnockFeed","t","useTranslations","onClick","useCallback","e","getTooltipProps","setTooltipRef","setTriggerRef","visible","usePopperTooltip","jsxs","jsx","CloseCircle"],"mappings":";;;;;AAUA,MAAMA,IAA8C,CAAC,EAAE,MAAAC,QAAW;AAChE,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAa,GACzC,EAAE,GAAAC,MAAMC,KAERC,IAAUC;AAAA,IACd,CAACC,MAAqC;AACpC,MAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GAElBN,EAAW,eAAeF,CAAI;AAAA,IAChC;AAAA,IACA,CAACA,CAAI;AAAA,EAAA,GAGD,EAAE,iBAAAS,GAAiB,eAAAC,GAAe,eAAAC,GAAe,SAAAC,MACrDC,EAAiB,EAAE,WAAW,UAAA,CAAW;AAGzC,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKH;AAAA,MACL,SAAAL;AAAA,MACA,MAAK;AAAA,MACL,cAAYF,EAAE,qBAAqB;AAAA,MACnC,WAAW,8DAA8DH,CAAS;AAAA,MAElF,UAAA;AAAA,QAAA,gBAAAc,EAACC,GAAY,EAAA;AAAA,QAEZJ,KACC,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKL;AAAA,YACJ,GAAGD,EAAgB;AAAA,cAClB,WAAW,4BAA4BR,CAAS;AAAA,YAAA,CACjD;AAAA,YAEA,YAAE,qBAAqB;AAAA,UAAA;AAAA,QAC1B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Avatar.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/Avatar.tsx"],"sourcesContent":["import React from \"react\";\nimport \"./styles.css\";\n\nexport interface AvatarProps {\n name: string;\n src?: string | null;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ name, src }) => {\n function getInitials(name: string) {\n const [firstName, lastName] = name.split(\" \");\n return firstName && lastName\n ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n : firstName\n ? firstName.charAt(0)\n : \"\";\n }\n\n return (\n <div className=\"rnf-avatar\">\n {src ? (\n <img src={src} alt={`Image of ${name}`} className=\"rnf-avatar__image\" />\n ) : (\n <span className=\"rnf-avatar__initials\">{getInitials(name)}</span>\n )}\n </div>\n );\n};\n"],"names":["Avatar","name","src","getInitials","firstName","lastName","jsx"],"mappings":";;AAQO,MAAMA,IAAgC,CAAC,EAAE,MAAAC,GAAM,KAAAC,QAAU;AAC9D,WAASC,EAAYF,GAAc;AACjC,UAAM,CAACG,GAAWC,CAAQ,IAAIJ,EAAK,MAAM,GAAG;AAC5C,WAAOG,KAAaC,IAChB,GAAGD,EAAU,OAAO,CAAC,CAAC,GAAGC,EAAS,OAAO,CAAC,CAAC,KAC3CD,IACEA,EAAU,OAAO,CAAC,IAClB;AAAA,EACR;AAGE,SAAA,gBAAAE,EAAC,SAAI,WAAU,cACZ,cACE,gBAAAA,EAAA,OAAA,EAAI,KAAAJ,GAAU,KAAK,YAAYD,CAAI,IAAI,WAAU,oBAAA,CAAoB,IAErE,gBAAAK,EAAA,QAAA,EAAK,WAAU,wBAAwB,UAAAH,EAAYF,CAAI,EAAE,CAAA,EAE9D,CAAA;AAEJ;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"NotificationCell.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationCell/NotificationCell.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\nimport { ContentBlock, FeedItem } from \"@knocklabs/client\";\nimport { Avatar } from \"./Avatar\";\nimport { ArchiveButton } from \"./ArchiveButton\";\nimport {\n useKnockFeed,\n useTranslations,\n formatTimestamp,\n renderNodeOrFallback,\n} from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\n\nexport interface NotificationCellProps {\n item: FeedItem;\n onItemClick?: (item: FeedItem) => void;\n avatar?: ReactNode;\n children?: ReactNode;\n archiveButton?: ReactNode;\n}\n\ntype BlockByName = {\n [name: string]: ContentBlock;\n};\n\nexport const NotificationCell = React.forwardRef<\n HTMLDivElement,\n NotificationCellProps\n>(({ item, onItemClick, avatar, children, archiveButton }, ref) => {\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 && blocksByName.action_url.rendered;\n\n const onClick = 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 // Delay when we navigate, until we've actually issued our API call.\n setTimeout(() => {\n if (actionUrl && actionUrl !== \"\") {\n window.location.assign(actionUrl);\n }\n }, 200);\n }, [item]);\n\n const onKeyDown = React.useCallback(\n (ev: React.KeyboardEvent<HTMLDivElement>) => {\n switch (ev.key) {\n case \"Enter\": {\n ev.stopPropagation();\n onClick();\n break;\n }\n default:\n break;\n }\n },\n [onClick],\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={onClick}\n onKeyDown={onKeyDown}\n tabIndex={0}\n >\n <div className=\"rnf-notification-cell__inner\">\n {!item.read_at && <div className=\"rnf-notification-cell__unread-dot\" />}\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={{ __html: blocksByName.body.rendered }}\n />\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"],"names":["NotificationCell","React","item","onItemClick","avatar","children","archiveButton","ref","feedClient","colorMode","useKnockFeed","locale","useTranslations","blocksByName","useMemo","acc","block","actionUrl","onClick","onKeyDown","ev","actor","jsx","jsxs","renderNodeOrFallback","Avatar","formatTimestamp","ArchiveButton"],"mappings":";;;;;;AAyBa,MAAAA,IAAmBC,EAAM,WAGpC,CAAC,EAAE,MAAAC,GAAM,aAAAC,GAAa,QAAAC,GAAQ,UAAAC,GAAU,eAAAC,EAAc,GAAGC,MAAQ;AACjE,QAAM,EAAE,YAAAC,GAAY,WAAAC,EAAU,IAAIC,EAAa,GACzC,EAAE,QAAAC,MAAWC,KAEbC,IAA4BC,EAAQ,MACjCZ,EAAK,OAAO,OAAO,CAACa,GAAKC,OACvB,EAAE,GAAGD,GAAK,CAACC,EAAM,IAAI,GAAGA,EAAM,IACpC,CAAE,CAAA,GACJ,CAACd,CAAI,CAAC,GAEHe,IAAYJ,EAAa,cAAcA,EAAa,WAAW,UAE/DK,IAAUjB,EAAM,YAAY,MAAM;AAIlC,QAFJO,EAAW,iBAAiBN,CAAI,GAE5BC;AAAa,aAAOA,EAAYD,CAAI;AAGxC,eAAW,MAAM;AACX,MAAAe,KAAaA,MAAc,MACtB,OAAA,SAAS,OAAOA,CAAS;AAAA,OAEjC,GAAG;AAAA,EAAA,GACL,CAACf,CAAI,CAAC,GAEHiB,IAAYlB,EAAM;AAAA,IACtB,CAACmB,MAA4C;AAC3C,cAAQA,EAAG,KAAK;AAAA,QACd,KAAK,SAAS;AACZ,UAAAA,EAAG,gBAAgB,GACXF;AACR;AAAA,QACF;AAAA,MAGF;AAAA,IACF;AAAA,IACA,CAACA,CAAO;AAAA,EAAA,GAGJG,IAAQnB,EAAK,OAAO,CAAC;AAGzB,SAAA,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAf;AAAA,MACA,WAAW,gDAAgDE,CAAS;AAAA,MACpE,SAAAS;AAAA,MACA,WAAAC;AAAA,MACA,UAAU;AAAA,MAEV,UAAA,gBAAAI,EAAC,OAAI,EAAA,WAAU,gCACZ,UAAA;AAAA,QAAA,CAACrB,EAAK,WAAY,gBAAAoB,EAAA,OAAA,EAAI,WAAU,qCAAoC;AAAA,QAEpEE;AAAA,UACCpB;AAAA,UACAiB,KAAS,UAAUA,KAASA,EAAM,QAChC,gBAAAC,EAACG,GAAO,EAAA,MAAMJ,EAAM,MAAM,KAAKA,EAAM,OAAQ,CAAA;AAAA,QAEjD;AAAA,QAEA,gBAAAE,EAAC,OAAI,EAAA,WAAU,wCACZ,UAAA;AAAA,UAAAV,EAAa,QACZ,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,yBAAyB,EAAE,QAAQT,EAAa,KAAK,SAAS;AAAA,YAAA;AAAA,UAChE;AAAA,UAGDR,KACC,gBAAAiB,EAAC,OAAI,EAAA,WAAU,wCACZ,UAAAjB,GACH;AAAA,UAGF,gBAAAiB,EAAC,QAAK,EAAA,WAAU,oCACb,UAAAI,EAAgBxB,EAAK,aAAa,EAAE,QAAAS,EAAO,CAAC,EAC/C,CAAA;AAAA,QAAA,GACF;AAAA,QAECa,EAAqBlB,GAAgB,gBAAAgB,EAAAK,GAAA,EAAc,MAAAzB,EAAY,CAAA,CAAE;AAAA,MAAA,GACpE;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Dropdown.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { ChevronDown } from \"../../../core/components/Icons\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n value: string;\n onChange: (e: any) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n children,\n value,\n onChange,\n}) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n <select value={value} onChange={onChange}>\n {children}\n </select>\n <ChevronDown />\n </div>\n );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","jsxs","jsx","ChevronDown"],"mappings":";;;;AAWO,MAAMA,IAAuD,CAAC;AAAA,EACnE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAA,EAAE,WAAAC,MAAcC;AAEtB,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAW,8BAA8BF,CAAS,IACrD,UAAA;AAAA,IAAC,gBAAAG,EAAA,UAAA,EAAO,OAAAL,GAAc,UAAAC,GACnB,UAAAF,EACH,CAAA;AAAA,sBACCO,GAAY,EAAA;AAAA,EACf,EAAA,CAAA;AAEJ;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"MarkAsRead.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/MarkAsRead.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FeedItem } from \"@knocklabs/client\";\nimport { useKnockFeed, useTranslations } from \"@knocklabs/react-core\";\nimport { CheckmarkCircle } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type MarkAsReadProps = {\n onClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nexport const MarkAsRead: React.FC<MarkAsReadProps> = ({ onClick }) => {\n const { useFeedStore, feedClient, colorMode } = useKnockFeed();\n const { t } = useTranslations();\n\n const unreadItems = useFeedStore((state) =>\n state.items.filter((item) => !item.read_at),\n );\n\n const unreadCount = useFeedStore((state) => state.metadata.unread_count);\n\n const onClickHandler = React.useCallback(\n (e: React.MouseEvent) => {\n feedClient.markAllAsRead();\n if (onClick) onClick(e, unreadItems);\n },\n [feedClient, unreadItems, onClick],\n );\n\n return (\n <button\n className={`rnf-mark-all-as-read rnf-mark-all-as-read--${colorMode}`}\n disabled={unreadCount === 0}\n onClick={onClickHandler}\n type=\"button\"\n >\n {t(\"markAllAsRead\")}\n <CheckmarkCircle />\n </button>\n );\n};\n"],"names":["MarkAsRead","onClick","useFeedStore","feedClient","colorMode","useKnockFeed","t","useTranslations","unreadItems","state","item","unreadCount","onClickHandler","React","jsxs","CheckmarkCircle"],"mappings":";;;;;AAWO,MAAMA,IAAwC,CAAC,EAAE,SAAAC,QAAc;AACpE,QAAM,EAAE,cAAAC,GAAc,YAAAC,GAAY,WAAAC,MAAcC,EAAa,GACvD,EAAE,GAAAC,MAAMC,KAERC,IAAcN;AAAA,IAAa,CAACO,MAChCA,EAAM,MAAM,OAAO,CAACC,MAAS,CAACA,EAAK,OAAO;AAAA,EAAA,GAGtCC,IAAcT,EAAa,CAACO,MAAUA,EAAM,SAAS,YAAY,GAEjEG,IAAiBC,EAAM;AAAA,IAC3B,CAAC,MAAwB;AACvB,MAAAV,EAAW,cAAc,GACrBF,KAASA,EAAQ,GAAGO,CAAW;AAAA,IACrC;AAAA,IACA,CAACL,GAAYK,GAAaP,CAAO;AAAA,EAAA;AAIjC,SAAA,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8CAA8CV,CAAS;AAAA,MAClE,UAAUO,MAAgB;AAAA,MAC1B,SAASC;AAAA,MACT,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAAN,EAAE,eAAe;AAAA,0BACjBS,GAAgB,EAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvB;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"NotificationFeed.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, isRequestInFlight, NetworkStatus } from \"@knocklabs/client\";\nimport React, {\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport {\n useKnockFeed,\n useFeedSettings,\n ColorMode,\n FilterStatus,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport { NotificationCell } from \"../NotificationCell\";\nimport {\n NotificationFeedHeader,\n NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\n\nimport \"./styles.css\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\n\nexport type OnNotificationClick = (item: FeedItem) => void;\nexport type RenderItem = ({ item }: RenderItemProps) => ReactNode;\nexport type RenderItemProps = {\n item: FeedItem;\n onItemClick?: OnNotificationClick;\n};\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?: OnNotificationClick;\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 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({ item, onItemClick: onNotificationClick }),\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","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":";;;;;;;;;;;AA+CA,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,sBAAAC;AAAA,EACA,qBAAAC,IAAsBC,EAAa;AAAA,EACnC,QAAAC;AAAA,EACA,cAAAC,IAAef;AACjB,MAAM;AACJ,QAAM,CAACgB,GAAQC,CAAS,IAAIC,EAASN,CAAmB,GAClD,EAAE,YAAAO,GAAY,cAAAC,GAAc,WAAAjB,MAAckB,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,gDAAgDnC,CAAS;AAAA,MAEnE,UAAA;AAAA,QAAAW,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,gBAAAzC,EAAAI,GAAA,EAAe,WAAAC,GAAsB;AAAA,4BAGvC,OAAI,EAAA,WAAU,+CACZ,UAAkByB,MAAAW,EAAc,WAC/BZ,EAAM;AAAA,YAAI,CAACa,MACT/B,EAAW,EAAE,MAAA+B,GAAM,aAAa9B,GAAqB;AAAA,UAAA,GAE3D;AAAA,UAECkB,MAAkBW,EAAc,aAC/B,gBAAAzC,EAACI,KAAe,WAAAC,GAAsB;AAAA,UAGvC,CAAC8B,KAAmBD,KAAWzB;AAAA,QAAA,GAClC;AAAA,SAECe,KAAA,gBAAAA,EAAU,SAAS,sBACjB,gBAAAxB,EAAA,OAAA,EAAI,WAAU,yCACb,UAAA,gBAAAA,EAAC,KAAE,EAAA,MAAMO,GAAmB,QAAO,UAChC,UAAEmB,EAAA,WAAW,EAChB,CAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"NotificationFeedHeader.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeedHeader.tsx"],"sourcesContent":["import React, { SetStateAction } from \"react\";\nimport { FeedItem } from \"@knocklabs/client\";\n\nimport { FilterStatus, useTranslations } from \"@knocklabs/react-core\";\nimport { Dropdown } from \"./Dropdown\";\nimport { MarkAsRead } from \"./MarkAsRead\";\n\nexport type NotificationFeedHeaderProps = {\n filterStatus: FilterStatus;\n setFilterStatus: React.Dispatch<SetStateAction<FilterStatus>>;\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n};\n\nconst OrderedFilterStatuses = [\n FilterStatus.All,\n FilterStatus.Unread,\n FilterStatus.Read,\n];\n\nexport const NotificationFeedHeader: React.FC<NotificationFeedHeaderProps> = ({\n onMarkAllAsReadClick,\n filterStatus,\n setFilterStatus,\n}) => {\n const { t } = useTranslations();\n\n return (\n <header className=\"rnf-notification-feed__header\">\n <div className=\"rnf-notification-feed__selector\">\n <span className=\"rnf-notification-feed__type\">\n {t(\"notifications\")}\n </span>\n <Dropdown\n value={filterStatus}\n onChange={(e) => setFilterStatus(e.target.value)}\n >\n {OrderedFilterStatuses.map((filterStatus) => (\n <option key={filterStatus} value={filterStatus}>\n {t(filterStatus)}\n </option>\n ))}\n </Dropdown>\n </div>\n <MarkAsRead onClick={onMarkAllAsReadClick} />\n </header>\n );\n};\n"],"names":["OrderedFilterStatuses","FilterStatus","NotificationFeedHeader","onMarkAllAsReadClick","filterStatus","setFilterStatus","t","useTranslations","jsxs","jsx","Dropdown","MarkAsRead"],"mappings":";;;;AAaA,MAAMA,IAAwB;AAAA,EAC5BC,EAAa;AAAA,EACbA,EAAa;AAAA,EACbA,EAAa;AACf,GAEaC,IAAgE,CAAC;AAAA,EAC5E,sBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AACF,MAAM;AACE,QAAA,EAAE,GAAAC,MAAMC;AAGZ,SAAA,gBAAAC,EAAC,UAAO,EAAA,WAAU,iCAChB,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAK,EAAA,WAAU,+BACb,UAAAH,EAAE,eAAe,GACpB;AAAA,MACA,gBAAAG;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAON;AAAA,UACP,UAAU,CAAC,MAAMC,EAAgB,EAAE,OAAO,KAAK;AAAA,UAE9C,UAAsBL,EAAA,IAAI,CAACI,MACzB,gBAAAK,EAAA,UAAA,EAA0B,OAAOL,GAC/B,UAAEA,EAAAA,CAAY,EADJA,GAAAA,CAEb,CACD;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,GACF;AAAA,IACA,gBAAAK,EAACE,GAAW,EAAA,SAASR,EAAsB,CAAA;AAAA,EAC7C,EAAA,CAAA;AAEJ;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"NotificationFeedContainer.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\nimport \"./styles.css\";\n\nexport const NotificationFeedContainer: React.FC<PropsWithChildren> = ({\n children,\n}) => {\n return <div className=\"rnf-feed-provider\">{children}</div>;\n};\n"],"names":["NotificationFeedContainer","children","jsx"],"mappings":";;AAGO,MAAMA,IAAyD,CAAC;AAAA,EACrE,UAAAC;AACF,MACU,gBAAAC,EAAA,OAAA,EAAI,WAAU,qBAAqB,UAAAD,EAAS,CAAA;"}
|
package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.esm.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"NotificationFeedPopover.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.tsx"],"sourcesContent":["import React, { RefObject, useEffect } from \"react\";\nimport { usePopper } from \"react-popper\";\nimport { Placement } from \"@popperjs/core\";\nimport { NotificationFeed, NotificationFeedProps } from \"../NotificationFeed\";\nimport useComponentVisible from \"../../../core/hooks/useComponentVisible\";\n\nimport \"./styles.css\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { Feed, FeedStoreState } from \"@knocklabs/client\";\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]);\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 }}\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":";;;;;;;;;AAeA,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,EAC9B,GACC,CAACE,CAAS,CAAC,GAGZ,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gEAAgET,CAAS;AAAA,MACpF,OAAO;AAAA,QACL,GAAGK,EAAO;AAAA,QACV,YAAYZ,IAAY,YAAY;AAAA,MACtC;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/esm/modules/feed/components/NotificationIconButton/NotificationIconButton.esm.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"NotificationIconButton.esm.js","sources":["../../../../../../src/modules/feed/components/NotificationIconButton/NotificationIconButton.tsx"],"sourcesContent":["import React, { SyntheticEvent } from \"react\";\nimport { BellIcon } from \"../../../core/components/Icons\";\nimport { useKnockFeed } from \"@knocklabs/react-core\";\nimport { BadgeCountType, UnseenBadge } from \"../UnseenBadge\";\n\nimport \"./styles.css\";\n\nexport interface NotificationIconButtonProps {\n // What value should we use to drive the badge count?\n badgeCountType?: BadgeCountType;\n onClick: (e: SyntheticEvent) => void;\n}\n\nexport const NotificationIconButton = React.forwardRef<\n HTMLButtonElement,\n NotificationIconButtonProps\n>(({ onClick, badgeCountType }, ref) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <button\n className={`rnf-notification-icon-button rnf-notification-icon-button--${colorMode}`}\n role=\"button\"\n aria-label=\"Open notification feed\"\n ref={ref}\n onClick={onClick}\n >\n <BellIcon />\n <UnseenBadge badgeCountType={badgeCountType} />\n </button>\n );\n});\n"],"names":["NotificationIconButton","React","onClick","badgeCountType","ref","colorMode","useKnockFeed","jsxs","jsx","BellIcon","UnseenBadge"],"mappings":";;;;;;AAaa,MAAAA,IAAyBC,EAAM,WAG1C,CAAC,EAAE,SAAAC,GAAS,gBAAAC,KAAkBC,MAAQ;AAChC,QAAA,EAAE,WAAAC,MAAcC;AAGpB,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8DAA8DF,CAAS;AAAA,MAClF,MAAK;AAAA,MACL,cAAW;AAAA,MACX,KAAAD;AAAA,MACA,SAAAF;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAM,EAACC,GAAS,EAAA;AAAA,QACV,gBAAAD,EAACE,KAAY,gBAAAP,GAAgC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnD,CAAC;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"UnseenBadge.esm.js","sources":["../../../../../../src/modules/feed/components/UnseenBadge/UnseenBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { useKnockFeed, formatBadgeCount } from \"@knocklabs/react-core\";\n\nimport \"./styles.css\";\nimport { FeedMetadata } from \"@knocklabs/client\";\n\nexport type BadgeCountType = \"unseen\" | \"unread\" | \"all\";\n\nexport type UnseenBadgeProps = {\n badgeCountType?: BadgeCountType;\n};\n\nfunction selectBadgeCount(\n badgeCountType: BadgeCountType,\n metadata: FeedMetadata,\n) {\n switch (badgeCountType) {\n case \"all\":\n return metadata.total_count;\n case \"unread\":\n return metadata.unread_count;\n case \"unseen\":\n return metadata.unseen_count;\n }\n}\n\nexport const UnseenBadge: React.FC<UnseenBadgeProps> = ({\n badgeCountType = \"unseen\",\n}) => {\n const { useFeedStore } = useKnockFeed();\n const badgeCountValue = useFeedStore((state) =>\n selectBadgeCount(badgeCountType, state.metadata),\n );\n\n return badgeCountValue !== 0 ? (\n <div className=\"rnf-unseen-badge\">\n <span className=\"rnf-unseen-badge__count\">\n {formatBadgeCount(badgeCountValue)}\n </span>\n </div>\n ) : null;\n};\n"],"names":["selectBadgeCount","badgeCountType","metadata","UnseenBadge","useFeedStore","useKnockFeed","badgeCountValue","state","jsx","formatBadgeCount"],"mappings":";;;AAYA,SAASA,EACPC,GACAC,GACA;AACA,UAAQD,GAAgB;AAAA,IACtB,KAAK;AACH,aAAOC,EAAS;AAAA,IAClB,KAAK;AACH,aAAOA,EAAS;AAAA,IAClB,KAAK;AACH,aAAOA,EAAS;AAAA,EACpB;AACF;AAEO,MAAMC,IAA0C,CAAC;AAAA,EACtD,gBAAAF,IAAiB;AACnB,MAAM;AACE,QAAA,EAAE,cAAAG,MAAiBC,KACnBC,IAAkBF;AAAA,IAAa,CAACG,MACpCP,EAAiBC,GAAgBM,EAAM,QAAQ;AAAA,EAAA;AAGjD,SAAOD,MAAoB,IACxB,gBAAAE,EAAA,OAAA,EAAI,WAAU,oBACb,UAAA,gBAAAA,EAAC,QAAK,EAAA,WAAU,2BACb,UAAAC,EAAiBH,CAAe,EACnC,CAAA,GACF,IACE;AACN;"}
|