@knocklabs/react 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (194) hide show
  1. package/README.md +114 -0
  2. package/dist/cjs/index.css +1 -0
  3. package/dist/cjs/index.js +2 -0
  4. package/dist/cjs/index.js.map +1 -0
  5. package/dist/cjs/modules/core/components/Button/Button.js +2 -0
  6. package/dist/cjs/modules/core/components/Button/Button.js.map +1 -0
  7. package/dist/cjs/modules/core/components/Button/ButtonGroup.js +2 -0
  8. package/dist/cjs/modules/core/components/Button/ButtonGroup.js.map +1 -0
  9. package/dist/cjs/modules/core/components/Button/ButtonSpinner.js +2 -0
  10. package/dist/cjs/modules/core/components/Button/ButtonSpinner.js.map +1 -0
  11. package/dist/cjs/modules/core/components/Button/styles.css.js +2 -0
  12. package/dist/cjs/modules/core/components/Button/styles.css.js.map +1 -0
  13. package/dist/cjs/modules/core/components/Icons/Bell.js +2 -0
  14. package/dist/cjs/modules/core/components/Icons/Bell.js.map +1 -0
  15. package/dist/cjs/modules/core/components/Icons/CheckmarkCircle.js +2 -0
  16. package/dist/cjs/modules/core/components/Icons/CheckmarkCircle.js.map +1 -0
  17. package/dist/cjs/modules/core/components/Icons/ChevronDown.js +2 -0
  18. package/dist/cjs/modules/core/components/Icons/ChevronDown.js.map +1 -0
  19. package/dist/cjs/modules/core/components/Icons/CloseCircle.js +2 -0
  20. package/dist/cjs/modules/core/components/Icons/CloseCircle.js.map +1 -0
  21. package/dist/cjs/modules/core/components/Spinner/Spinner.js +13 -0
  22. package/dist/cjs/modules/core/components/Spinner/Spinner.js.map +1 -0
  23. package/dist/cjs/modules/core/hooks/useComponentVisible.js +2 -0
  24. package/dist/cjs/modules/core/hooks/useComponentVisible.js.map +1 -0
  25. package/dist/cjs/modules/core/hooks/useOnBottomScroll.js +2 -0
  26. package/dist/cjs/modules/core/hooks/useOnBottomScroll.js.map +1 -0
  27. package/dist/cjs/modules/feed/components/EmptyFeed/EmptyFeed.js +2 -0
  28. package/dist/cjs/modules/feed/components/EmptyFeed/EmptyFeed.js.map +1 -0
  29. package/dist/cjs/modules/feed/components/EmptyFeed/styles.css.js +2 -0
  30. package/dist/cjs/modules/feed/components/EmptyFeed/styles.css.js.map +1 -0
  31. package/dist/cjs/modules/feed/components/NotificationCell/ArchiveButton.js +2 -0
  32. package/dist/cjs/modules/feed/components/NotificationCell/ArchiveButton.js.map +1 -0
  33. package/dist/cjs/modules/feed/components/NotificationCell/Avatar.js +2 -0
  34. package/dist/cjs/modules/feed/components/NotificationCell/Avatar.js.map +1 -0
  35. package/dist/cjs/modules/feed/components/NotificationCell/NotificationCell.js +2 -0
  36. package/dist/cjs/modules/feed/components/NotificationCell/NotificationCell.js.map +1 -0
  37. package/dist/cjs/modules/feed/components/NotificationCell/styles.css.js +2 -0
  38. package/dist/cjs/modules/feed/components/NotificationCell/styles.css.js.map +1 -0
  39. package/dist/cjs/modules/feed/components/NotificationFeed/Dropdown.js +2 -0
  40. package/dist/cjs/modules/feed/components/NotificationFeed/Dropdown.js.map +1 -0
  41. package/dist/cjs/modules/feed/components/NotificationFeed/MarkAsRead.js +2 -0
  42. package/dist/cjs/modules/feed/components/NotificationFeed/MarkAsRead.js.map +1 -0
  43. package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeed.js +2 -0
  44. package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeed.js.map +1 -0
  45. package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeedHeader.js +2 -0
  46. package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeedHeader.js.map +1 -0
  47. package/dist/cjs/modules/feed/components/NotificationFeed/styles.css.js +2 -0
  48. package/dist/cjs/modules/feed/components/NotificationFeed/styles.css.js.map +1 -0
  49. package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js +2 -0
  50. package/dist/cjs/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js.map +1 -0
  51. package/dist/cjs/modules/feed/components/NotificationFeedPopover/styles.css.js +2 -0
  52. package/dist/cjs/modules/feed/components/NotificationFeedPopover/styles.css.js.map +1 -0
  53. package/dist/cjs/modules/feed/components/NotificationIconButton/NotificationIconButton.js +2 -0
  54. package/dist/cjs/modules/feed/components/NotificationIconButton/NotificationIconButton.js.map +1 -0
  55. package/dist/cjs/modules/feed/components/NotificationIconButton/styles.css.js +2 -0
  56. package/dist/cjs/modules/feed/components/NotificationIconButton/styles.css.js.map +1 -0
  57. package/dist/cjs/modules/feed/components/UnseenBadge/UnseenBadge.js +2 -0
  58. package/dist/cjs/modules/feed/components/UnseenBadge/UnseenBadge.js.map +1 -0
  59. package/dist/cjs/modules/feed/components/UnseenBadge/styles.css.js +2 -0
  60. package/dist/cjs/modules/feed/components/UnseenBadge/styles.css.js.map +1 -0
  61. package/dist/cjs/theme.css.js +2 -0
  62. package/dist/cjs/theme.css.js.map +1 -0
  63. package/dist/esm/index.mjs +39 -0
  64. package/dist/esm/index.mjs.map +1 -0
  65. package/dist/esm/modules/core/components/Button/Button.mjs +38 -0
  66. package/dist/esm/modules/core/components/Button/Button.mjs.map +1 -0
  67. package/dist/esm/modules/core/components/Button/ButtonGroup.mjs +7 -0
  68. package/dist/esm/modules/core/components/Button/ButtonGroup.mjs.map +1 -0
  69. package/dist/esm/modules/core/components/Button/ButtonSpinner.mjs +14 -0
  70. package/dist/esm/modules/core/components/Button/ButtonSpinner.mjs.map +1 -0
  71. package/dist/esm/modules/core/components/Button/styles.css.mjs +2 -0
  72. package/dist/esm/modules/core/components/Button/styles.css.mjs.map +1 -0
  73. package/dist/esm/modules/core/components/Icons/Bell.mjs +29 -0
  74. package/dist/esm/modules/core/components/Icons/Bell.mjs.map +1 -0
  75. package/dist/esm/modules/core/components/Icons/CheckmarkCircle.mjs +36 -0
  76. package/dist/esm/modules/core/components/Icons/CheckmarkCircle.mjs.map +1 -0
  77. package/dist/esm/modules/core/components/Icons/ChevronDown.mjs +25 -0
  78. package/dist/esm/modules/core/components/Icons/ChevronDown.mjs.map +1 -0
  79. package/dist/esm/modules/core/components/Icons/CloseCircle.mjs +22 -0
  80. package/dist/esm/modules/core/components/Icons/CloseCircle.mjs.map +1 -0
  81. package/dist/esm/modules/core/components/Spinner/Spinner.mjs +65 -0
  82. package/dist/esm/modules/core/components/Spinner/Spinner.mjs.map +1 -0
  83. package/dist/esm/modules/core/hooks/useComponentVisible.mjs +18 -0
  84. package/dist/esm/modules/core/hooks/useComponentVisible.mjs.map +1 -0
  85. package/dist/esm/modules/core/hooks/useOnBottomScroll.mjs +21 -0
  86. package/dist/esm/modules/core/hooks/useOnBottomScroll.mjs.map +1 -0
  87. package/dist/esm/modules/feed/components/EmptyFeed/EmptyFeed.mjs +14 -0
  88. package/dist/esm/modules/feed/components/EmptyFeed/EmptyFeed.mjs.map +1 -0
  89. package/dist/esm/modules/feed/components/EmptyFeed/styles.css.mjs +2 -0
  90. package/dist/esm/modules/feed/components/EmptyFeed/styles.css.mjs.map +1 -0
  91. package/dist/esm/modules/feed/components/NotificationCell/ArchiveButton.mjs +40 -0
  92. package/dist/esm/modules/feed/components/NotificationCell/ArchiveButton.mjs.map +1 -0
  93. package/dist/esm/modules/feed/components/NotificationCell/Avatar.mjs +13 -0
  94. package/dist/esm/modules/feed/components/NotificationCell/Avatar.mjs.map +1 -0
  95. package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.mjs +58 -0
  96. package/dist/esm/modules/feed/components/NotificationCell/NotificationCell.mjs.map +1 -0
  97. package/dist/esm/modules/feed/components/NotificationCell/styles.css.mjs +2 -0
  98. package/dist/esm/modules/feed/components/NotificationCell/styles.css.mjs.map +1 -0
  99. package/dist/esm/modules/feed/components/NotificationFeed/Dropdown.mjs +19 -0
  100. package/dist/esm/modules/feed/components/NotificationFeed/Dropdown.mjs.map +1 -0
  101. package/dist/esm/modules/feed/components/NotificationFeed/MarkAsRead.mjs +32 -0
  102. package/dist/esm/modules/feed/components/NotificationFeed/MarkAsRead.mjs.map +1 -0
  103. package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs +67 -0
  104. package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs.map +1 -0
  105. package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs +33 -0
  106. package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs.map +1 -0
  107. package/dist/esm/modules/feed/components/NotificationFeed/styles.css.mjs +2 -0
  108. package/dist/esm/modules/feed/components/NotificationFeed/styles.css.mjs.map +1 -0
  109. package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs +60 -0
  110. package/dist/esm/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs.map +1 -0
  111. package/dist/esm/modules/feed/components/NotificationFeedPopover/styles.css.mjs +2 -0
  112. package/dist/esm/modules/feed/components/NotificationFeedPopover/styles.css.mjs.map +1 -0
  113. package/dist/esm/modules/feed/components/NotificationIconButton/NotificationIconButton.mjs +27 -0
  114. package/dist/esm/modules/feed/components/NotificationIconButton/NotificationIconButton.mjs.map +1 -0
  115. package/dist/esm/modules/feed/components/NotificationIconButton/styles.css.mjs +2 -0
  116. package/dist/esm/modules/feed/components/NotificationIconButton/styles.css.mjs.map +1 -0
  117. package/dist/esm/modules/feed/components/UnseenBadge/UnseenBadge.mjs +25 -0
  118. package/dist/esm/modules/feed/components/UnseenBadge/UnseenBadge.mjs.map +1 -0
  119. package/dist/esm/modules/feed/components/UnseenBadge/styles.css.mjs +2 -0
  120. package/dist/esm/modules/feed/components/UnseenBadge/styles.css.mjs.map +1 -0
  121. package/dist/index.css +1 -0
  122. package/dist/types/App.d.ts +3 -0
  123. package/dist/types/App.d.ts.map +1 -0
  124. package/dist/types/index.d.ts +4 -0
  125. package/dist/types/index.d.ts.map +1 -0
  126. package/dist/types/main.d.ts +1 -0
  127. package/dist/types/main.d.ts.map +1 -0
  128. package/dist/types/modules/core/components/Button/Button.d.ts +11 -0
  129. package/dist/types/modules/core/components/Button/Button.d.ts.map +1 -0
  130. package/dist/types/modules/core/components/Button/ButtonGroup.d.ts +3 -0
  131. package/dist/types/modules/core/components/Button/ButtonGroup.d.ts.map +1 -0
  132. package/dist/types/modules/core/components/Button/ButtonSpinner.d.ts +7 -0
  133. package/dist/types/modules/core/components/Button/ButtonSpinner.d.ts.map +1 -0
  134. package/dist/types/modules/core/components/Button/index.d.ts +3 -0
  135. package/dist/types/modules/core/components/Button/index.d.ts.map +1 -0
  136. package/dist/types/modules/core/components/Icons/Bell.d.ts +6 -0
  137. package/dist/types/modules/core/components/Icons/Bell.d.ts.map +1 -0
  138. package/dist/types/modules/core/components/Icons/CheckmarkCircle.d.ts +3 -0
  139. package/dist/types/modules/core/components/Icons/CheckmarkCircle.d.ts.map +1 -0
  140. package/dist/types/modules/core/components/Icons/ChevronDown.d.ts +3 -0
  141. package/dist/types/modules/core/components/Icons/ChevronDown.d.ts.map +1 -0
  142. package/dist/types/modules/core/components/Icons/CloseCircle.d.ts +3 -0
  143. package/dist/types/modules/core/components/Icons/CloseCircle.d.ts.map +1 -0
  144. package/dist/types/modules/core/components/Icons/index.d.ts +5 -0
  145. package/dist/types/modules/core/components/Icons/index.d.ts.map +1 -0
  146. package/dist/types/modules/core/components/Spinner/Spinner.d.ts +12 -0
  147. package/dist/types/modules/core/components/Spinner/Spinner.d.ts.map +1 -0
  148. package/dist/types/modules/core/components/Spinner/index.d.ts +2 -0
  149. package/dist/types/modules/core/components/Spinner/index.d.ts.map +1 -0
  150. package/dist/types/modules/core/hooks/index.d.ts +2 -0
  151. package/dist/types/modules/core/hooks/index.d.ts.map +1 -0
  152. package/dist/types/modules/core/hooks/useComponentVisible.d.ts +9 -0
  153. package/dist/types/modules/core/hooks/useComponentVisible.d.ts.map +1 -0
  154. package/dist/types/modules/core/hooks/useOnBottomScroll.d.ts +9 -0
  155. package/dist/types/modules/core/hooks/useOnBottomScroll.d.ts.map +1 -0
  156. package/dist/types/modules/core/index.d.ts +5 -0
  157. package/dist/types/modules/core/index.d.ts.map +1 -0
  158. package/dist/types/modules/feed/components/EmptyFeed/EmptyFeed.d.ts +3 -0
  159. package/dist/types/modules/feed/components/EmptyFeed/EmptyFeed.d.ts.map +1 -0
  160. package/dist/types/modules/feed/components/EmptyFeed/index.d.ts +2 -0
  161. package/dist/types/modules/feed/components/EmptyFeed/index.d.ts.map +1 -0
  162. package/dist/types/modules/feed/components/NotificationCell/ArchiveButton.d.ts +8 -0
  163. package/dist/types/modules/feed/components/NotificationCell/ArchiveButton.d.ts.map +1 -0
  164. package/dist/types/modules/feed/components/NotificationCell/Avatar.d.ts +7 -0
  165. package/dist/types/modules/feed/components/NotificationCell/Avatar.d.ts.map +1 -0
  166. package/dist/types/modules/feed/components/NotificationCell/NotificationCell.d.ts +11 -0
  167. package/dist/types/modules/feed/components/NotificationCell/NotificationCell.d.ts.map +1 -0
  168. package/dist/types/modules/feed/components/NotificationCell/index.d.ts +3 -0
  169. package/dist/types/modules/feed/components/NotificationCell/index.d.ts.map +1 -0
  170. package/dist/types/modules/feed/components/NotificationFeed/Dropdown.d.ts +7 -0
  171. package/dist/types/modules/feed/components/NotificationFeed/Dropdown.d.ts.map +1 -0
  172. package/dist/types/modules/feed/components/NotificationFeed/MarkAsRead.d.ts +7 -0
  173. package/dist/types/modules/feed/components/NotificationFeed/MarkAsRead.d.ts.map +1 -0
  174. package/dist/types/modules/feed/components/NotificationFeed/NotificationFeed.d.ts +24 -0
  175. package/dist/types/modules/feed/components/NotificationFeed/NotificationFeed.d.ts.map +1 -0
  176. package/dist/types/modules/feed/components/NotificationFeed/NotificationFeedHeader.d.ts +10 -0
  177. package/dist/types/modules/feed/components/NotificationFeed/NotificationFeedHeader.d.ts.map +1 -0
  178. package/dist/types/modules/feed/components/NotificationFeed/index.d.ts +4 -0
  179. package/dist/types/modules/feed/components/NotificationFeed/index.d.ts.map +1 -0
  180. package/dist/types/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.d.ts +19 -0
  181. package/dist/types/modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.d.ts.map +1 -0
  182. package/dist/types/modules/feed/components/NotificationFeedPopover/index.d.ts +2 -0
  183. package/dist/types/modules/feed/components/NotificationFeedPopover/index.d.ts.map +1 -0
  184. package/dist/types/modules/feed/components/NotificationIconButton/NotificationIconButton.d.ts +8 -0
  185. package/dist/types/modules/feed/components/NotificationIconButton/NotificationIconButton.d.ts.map +1 -0
  186. package/dist/types/modules/feed/components/NotificationIconButton/index.d.ts +2 -0
  187. package/dist/types/modules/feed/components/NotificationIconButton/index.d.ts.map +1 -0
  188. package/dist/types/modules/feed/components/UnseenBadge/UnseenBadge.d.ts +7 -0
  189. package/dist/types/modules/feed/components/UnseenBadge/UnseenBadge.d.ts.map +1 -0
  190. package/dist/types/modules/feed/components/UnseenBadge/index.d.ts +2 -0
  191. package/dist/types/modules/feed/components/UnseenBadge/index.d.ts.map +1 -0
  192. package/dist/types/modules/feed/index.d.ts +7 -0
  193. package/dist/types/modules/feed/index.d.ts.map +1 -0
  194. package/package.json +70 -0
package/README.md ADDED
@@ -0,0 +1,114 @@
1
+ # @knocklabs/react
2
+
3
+ A set of components for integrating [Knock](https://knock.app) into a React application.
4
+
5
+ > Using `@knocklabs/react-notification-feed`? See the [migration guide](https://docs.knock.app/in-app-ui/react/migrating-from-react-notification-feed) for instructions on switching to `@knocklabs/react`.
6
+
7
+ [See a live demo](https://knock-in-app-notifications-react.vercel.app/)
8
+
9
+ ![In-app feed component example](NotificationFeed.png)
10
+
11
+ **Note: these components are designed to be used via React for web only.**
12
+
13
+ [Full documentation](https://docs.knock.app/in-app-ui/react/overview)
14
+
15
+ ## Installation
16
+
17
+ Via NPM:
18
+
19
+ ```
20
+ npm install @knocklabs/react
21
+ ```
22
+
23
+ Via Yarn:
24
+
25
+ ```
26
+ yarn add @knocklabs/react
27
+ ```
28
+
29
+ ## Configuration
30
+
31
+ To configure the feed you will need:
32
+
33
+ 1. A public API key (found in the Knock dashboard)
34
+ 1. A user ID, and optionally an auth token for production environments
35
+ 1. If integrating an in-app feed, a feed channel ID (found in the Knock dashboard)
36
+
37
+ ## Usage
38
+
39
+ You can integrate Knock into your app as follows:
40
+
41
+ ```jsx
42
+ import {
43
+ KnockProvider,
44
+ KnockFeedProvider,
45
+ NotificationIconButton,
46
+ NotificationFeedPopover,
47
+ } from "@knocklabs/react";
48
+
49
+ // Required CSS import, unless you're overriding the styling
50
+ import "@knocklabs/react/dist/index.css";
51
+
52
+ const YourAppLayout = () => {
53
+ const [isVisible, setIsVisible] = useState(false);
54
+ const notifButtonRef = useRef(null);
55
+
56
+ return (
57
+ <KnockProvider apiKey={process.env.KNOCK_PUBLIC_API_KEY} userId={userId}>
58
+ {/* Optionally, use the KnockFeedProvider to connect an in-app feed */}
59
+ <KnockFeedProvider feedId={process.env.KNOCK_FEED_ID}>
60
+ <>
61
+ <NotificationIconButton
62
+ ref={notifButtonRef}
63
+ onClick={(e) => setIsVisible(!isVisible)}
64
+ />
65
+ <NotificationFeedPopover
66
+ buttonRef={notifButtonRef}
67
+ isVisible={isVisible}
68
+ onClose={() => setIsVisible(false)}
69
+ />
70
+ </>
71
+ </KnockFeedProvider>
72
+ </KnockProvider>
73
+ );
74
+ };
75
+ ```
76
+
77
+ ## Headless usage
78
+
79
+ Alternatively, if you don't want to use our components you can render the feed in a headless mode using our hooks:
80
+
81
+ ```jsx
82
+ import {
83
+ useAuthenticatedKnockClient,
84
+ useNotifications,
85
+ } from "@knocklabs/react";
86
+ import create from "zustand";
87
+
88
+ const YourAppLayout = () => {
89
+ const knockClient = useAuthenticatedKnockClient(
90
+ process.env.KNOCK_PUBLIC_API_KEY,
91
+ currentUser.id,
92
+ );
93
+
94
+ const notificationFeed = useNotifications(
95
+ knockClient,
96
+ process.env.KNOCK_FEED_ID,
97
+ );
98
+
99
+ const useNotificationStore = create(notificationFeed.store);
100
+ const { metadata } = useNotificationStore();
101
+
102
+ useEffect(() => {
103
+ notificationFeed.fetch();
104
+ }, [notificationFeed]);
105
+
106
+ return <span>Total unread: {metadata.unread_count}</span>;
107
+ };
108
+ ```
109
+
110
+ ## Related links
111
+
112
+ - [Signup for Knock](https://knock.app)
113
+ - [Knock documentation](https://docs.knock.app)
114
+ - [Knock dashboard](https://dashboard.knock.app)
@@ -0,0 +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-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}: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-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-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-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}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./modules/core/components/Button/Button.js"),r=require("./modules/core/components/Button/ButtonGroup.js"),i=require("./modules/core/components/Icons/Bell.js"),n=require("./modules/core/components/Icons/CheckmarkCircle.js"),c=require("./modules/core/components/Icons/ChevronDown.js"),a=require("./modules/core/components/Icons/CloseCircle.js"),u=require("./modules/core/components/Spinner/Spinner.js"),s=require("./modules/core/hooks/useOnBottomScroll.js"),l=require("./modules/feed/components/EmptyFeed/EmptyFeed.js"),d=require("./modules/feed/components/NotificationCell/NotificationCell.js"),f=require("./modules/feed/components/NotificationCell/Avatar.js"),q=require("./modules/feed/components/NotificationFeed/NotificationFeed.js"),C=require("./modules/feed/components/NotificationFeed/NotificationFeedHeader.js"),p=require("./modules/feed/components/NotificationFeed/MarkAsRead.js"),B=require("./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js"),N=require("./modules/feed/components/NotificationIconButton/NotificationIconButton.js"),F=require("./modules/feed/components/UnseenBadge/UnseenBadge.js"),o=require("@knocklabs/react-core");exports.Button=t.Button;exports.ButtonGroup=r.ButtonGroup;exports.BellIcon=i.BellIcon;exports.CheckmarkCircle=n.CheckmarkCircle;exports.ChevronDown=c.ChevronDown;exports.CloseCircle=a.CloseCircle;exports.Spinner=u.Spinner;exports.useOnBottomScroll=s;exports.EmptyFeed=l.EmptyFeed;exports.NotificationCell=d.NotificationCell;exports.Avatar=f.Avatar;exports.NotificationFeed=q.NotificationFeed;exports.NotificationFeedHeader=C.NotificationFeedHeader;exports.MarkAsRead=p.MarkAsRead;exports.NotificationFeedPopover=B.NotificationFeedPopover;exports.NotificationIconButton=N.NotificationIconButton;exports.UnseenBadge=F.UnseenBadge;Object.keys(o).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>o[e]})});
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=const d=({variant:r="primary",loadingText:n,isLoading:t=!1,isDisabled:s=!1,isFullWidth:u=!1,onClick:a,children:o})=>{const{colorMode:c}=i.useKnockFeed(),l=["rnf-button",`rnf-button--${r}`,u?"rnf-button--full-width":"",t?"rnf-button--is-loading":"",`rnf-button--${c}`].join(" "),b=n||e.jsx("span",{className:"rnf-button__button-text-hidden",children:o});return e.jsxs("button",{onClick:a,className:l,disabled:t||s,type:"button",children:[t&&e.jsx(f.ButtonSpinner,{hasLabel:!!n}),t?b:o]})};exports.Button=d;
2
+ //# sourceMappingURL=Button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.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","textToShowWhileLoading","jsx","jsxs","ButtonSpinner"],"mappings":"mNAeO,MAAMA,EAAmD,CAAC,CAC/D,QAAAC,EAAU,UACV,YAAAC,EACA,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,YAAAC,EAAc,GACd,QAAAC,EACA,SAAAC,CACF,IAAM,CACE,KAAA,CAAE,UAAAC,GAAcC,EAAAA,eAEhBC,EAAa,CACjB,aACA,eAAeT,CAAO,GACtBI,EAAc,yBAA2B,GACzCF,EAAY,yBAA2B,GACvC,eAAeK,CAAS,EAAA,EACxB,KAAK,GAAG,EAKJG,EAAyBT,GAC7BU,MAAC,OAAK,CAAA,UAAU,iCAAkC,SAAAL,CAAS,CAAA,EAI3D,OAAAM,EAAA,KAAC,SAAA,CACC,QAAAP,EACA,UAAWI,EACX,SAAUP,GAAaC,EACvB,KAAK,SAEJ,SAAA,CAAAD,GAAcS,EAAA,IAAAE,EAAA,cAAA,CAAc,SAAU,CAAC,CAACZ,EAAa,EACrDC,EAAYQ,EAAyBJ,CAAA,CAAA,CAAA,CAG5C"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=const o=({children:t})=>e.jsx("div",{className:"rnf-button-group",children:t});exports.ButtonGroup=o;
2
+ //# sourceMappingURL=ButtonGroup.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ButtonGroup.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":"gJAIa,MAAAA,EAA2C,CAAC,CAAE,SAAAC,KACxDC,EAAAA,IAAA,MAAA,CAAI,UAAU,mBAAoB,SAAAD,CAAS,CAAA"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=const r=({hasLabel:e})=>n.jsx("div",{className:`rnf-button-spinner rnf-button-spinner--${e?"with-label":"without-label"}`,children:n.jsx(t.Spinner,{})});exports.ButtonSpinner=r;
2
+ //# sourceMappingURL=ButtonSpinner.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ButtonSpinner.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":"mLASO,MAAMA,EAA8C,CAAC,CAAE,SAAAC,CAAA,IAC5DC,EAAA,IAAC,MAAA,CACC,UAAW,0CACTD,EAAW,aAAe,eAC5B,GAEA,eAACE,EAAQ,QAAA,EAAA,CAAA,CACX"}
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ //# sourceMappingURL=styles.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");function n({width:o=24,height:r=24}){return e.jsxs("svg",{width:o,viewBox:"0 0 24 24",fill:"none",height:r,children:[e.jsx("path",{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",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsx("path",{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",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}exports.BellIcon=n;
2
+ //# sourceMappingURL=Bell.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Bell.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":"qHAAA,SAASA,EAAS,CAAE,MAAAC,EAAQ,GAAI,OAAAC,EAAS,IAAM,CAC7C,cACG,MAAI,CAAA,MAAAD,EAAc,QAAQ,YAAY,KAAK,OAAO,OAAAC,EACjD,SAAA,CAAAC,EAAA,IAAC,OAAA,CACC,EAAE,qfACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,OAAA,CACjB,EACAA,EAAA,IAAC,OAAA,CACC,EAAE,mOACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,OAAA,CACjB,CACF,CAAA,CAAA,CAEJ"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=()=>e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{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",stroke:"currentColor",strokeWidth:"1.5",strokeMiterlimit:"10"}),e.jsx("path",{d:"M10.9999 5.5004L6.79994 10.5004L4.99994 8.5004",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]});exports.CheckmarkCircle=r;
2
+ //# sourceMappingURL=CheckmarkCircle.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CheckmarkCircle.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":"qHAAMA,EAAkB,IACtBC,EAAA,KAAC,MAAA,CACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BAEN,SAAA,CAAAC,EAAA,IAAC,OAAA,CACC,EAAE,gMACF,OAAO,eACP,YAAY,MACZ,iBAAiB,IAAA,CACnB,EACAA,EAAA,IAAC,OAAA,CACC,EAAE,iDACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,OAAA,CACjB,CAAA,CAAA,CACF"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=()=>e.jsx("svg",{width:"8",height:"6",viewBox:"0 0 8 6",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M1.74994 1.87512L3.99994 4.12512L6.24994 1.87512",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})});exports.ChevronDown=o;
2
+ //# sourceMappingURL=ChevronDown.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ChevronDown.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":"qHAAMA,EAAc,IAClBC,EAAA,IAAC,MAAA,CACC,MAAM,IACN,OAAO,IACP,QAAQ,UACR,KAAK,OACL,MAAM,6BAEN,SAAAA,EAAA,IAAC,OAAA,CACC,EAAE,mDACF,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,OAAA,CACjB,CAAA,CACF"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react/jsx-runtime"),e=()=>C.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:C.jsx("path",{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",fill:"currentColor"})});exports.CloseCircle=e;
2
+ //# sourceMappingURL=CloseCircle.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CloseCircle.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":"qHAAMA,EAAc,IAClBC,EAAA,IAAC,MAAA,CACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BAEN,SAAAA,EAAA,IAAC,OAAA,CACC,EAAE,4xCACF,KAAK,cAAA,CACP,CAAA,CACF"}
@@ -0,0 +1,13 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");function o(i){return i==="fast"?600:i==="slow"?900:750}const c=({color:i="rgba(0,0,0,0.4)",speed:r="medium",gap:a=4,thickness:n=4,size:t="1em",...s})=>e.jsxs("svg",{height:t,width:t,...s,style:{animationDuration:`${o(r)}ms`},className:"__react-svg-spinner_circle",role:"img","aria-labelledby":"title desc",viewBox:"0 0 32 32",children:[e.jsx("title",{id:"title",children:"Circle loading spinner"}),e.jsx("desc",{id:"desc",children:'Image of a partial circle indicating "loading."'}),e.jsx("style",{dangerouslySetInnerHTML:{__html:`
2
+ .__react-svg-spinner_circle{
3
+ transition-property: transform;
4
+ animation-name: __react-svg-spinner_infinite-spin;
5
+ animation-iteration-count: infinite;
6
+ animation-timing-function: linear;
7
+ }
8
+ @keyframes __react-svg-spinner_infinite-spin {
9
+ from {transform: rotate(0deg)}
10
+ to {transform: rotate(360deg)}
11
+ }
12
+ `}}),e.jsx("circle",{role:"presentation",cx:16,cy:16,r:14-n/2,stroke:i,fill:"none",strokeWidth:n,strokeDasharray:Math.PI*2*(11-a),strokeLinecap:"round"})]});exports.Spinner=c;
13
+ //# sourceMappingURL=Spinner.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Spinner.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":"qHAIA,SAASA,EAAYC,EAAc,CACjC,OAAIA,IAAU,OAAe,IACzBA,IAAU,OAAe,IACtB,GACT,CAUO,MAAMC,EAAkC,CAAC,CAC9C,MAAAC,EAAQ,kBACR,MAAAF,EAAQ,SACR,IAAAG,EAAM,EACN,UAAAC,EAAY,EACZ,KAAAC,EAAO,MACP,GAAGC,CACL,IACEC,EAAA,KAAC,MAAA,CACC,OAAQF,EACR,MAAOA,EACN,GAAGC,EACJ,MAAO,CAAE,kBAAmB,GAAGP,EAAYC,CAAK,CAAC,IAAK,EACtD,UAAU,6BACV,KAAK,MACL,kBAAgB,aAChB,QAAQ,YAER,SAAA,CAACQ,EAAA,IAAA,QAAA,CAAM,GAAG,QAAQ,SAAsB,yBAAA,EACvCA,EAAA,IAAA,OAAA,CAAK,GAAG,OAAO,SAA+C,kDAAA,EAC/DA,EAAA,IAAC,QAAA,CACC,wBAAyB,CACvB,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAYV,CAAA,CACF,EACAA,EAAA,IAAC,SAAA,CACC,KAAK,eACL,GAAI,GACJ,GAAI,GACJ,EAAG,GAAKJ,EAAY,EACpB,OAAQF,EACR,KAAK,OACL,YAAaE,EACb,gBAAiB,KAAK,GAAK,GAAK,GAAKD,GACrC,cAAc,OAAA,CAChB,CAAA,CAAA,CACF"}
@@ -0,0 +1,2 @@
1
+ "use strict";const o=require("react");function i(e,n){return e?e===n||e.contains(n):!1}function d(e,n,s){const r=o.useRef(null),c=t=>{t.key==="Escape"&&n(t)},u=t=>{s.closeOnClickOutside&&!i(r.current,t.target)&&(t.stopPropagation(),n(t))};return o.useEffect(()=>(e&&(document.addEventListener("keydown",c,!0),document.addEventListener("click",u,!0)),()=>{document.removeEventListener("keydown",c,!0),document.removeEventListener("click",u,!0)}),[e]),{ref:r}}module.exports=d;
2
+ //# sourceMappingURL=useComponentVisible.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useComponentVisible.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":"sCAEA,SAASA,EAASC,EAA4BC,EAAoB,CAChE,OAAKD,EACEA,IAAWC,GAASD,EAAO,SAASC,CAAK,EAD5B,EAEtB,CAMwB,SAAAC,EACtBC,EACAC,EACAC,EACA,CACM,MAAAC,EAAMC,SAAuB,IAAI,EAEjCC,EAAiBC,GAAyB,CAC1CA,EAAM,MAAQ,UAChBL,EAAQK,CAAK,CACf,EAGIC,EAAsBD,GAAiB,CAEzCJ,EAAQ,qBACR,CAACN,EAASO,EAAI,QAASG,EAAM,MAAqB,IAElDA,EAAM,gBAAgB,EACtBL,EAAQK,CAAK,EACf,EAGFE,OAAAA,EAAAA,UAAU,KACJR,IACO,SAAA,iBAAiB,UAAWK,EAAe,EAAI,EAC/C,SAAA,iBAAiB,QAASE,EAAoB,EAAI,GAGtD,IAAM,CACF,SAAA,oBAAoB,UAAWF,EAAe,EAAI,EAClD,SAAA,oBAAoB,QAASE,EAAoB,EAAI,CAAA,GAE/D,CAACP,CAAS,CAAC,EAEP,CAAE,IAAAG,CAAI,CACf"}
@@ -0,0 +1,2 @@
1
+ "use strict";const n=require("react"),a=require("lodash.debounce"),i=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},f=i(a),d=()=>{};function b(t){const r=t.callback??d,o=t.ref,s=t.offset??0,l=n.useMemo(()=>f.default(r,200),[r]),e=n.useCallback(()=>{if(o.current){const c=o.current,u=Math.round(c.scrollTop+c.clientHeight);Math.round(c.scrollHeight-s)<=u&&l()}},[l]);n.useEffect(()=>(o.current&&o.current.addEventListener("scroll",e),()=>{o.current&&o.current.removeEventListener("scroll",e)}),[e])}module.exports=b;
2
+ //# sourceMappingURL=useOnBottomScroll.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useOnBottomScroll.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":"kIASMA,EAAO,IAAM,CAAC,EAEpB,SAASC,EAAkBC,EAAgC,CACnD,MAAAC,EAAWD,EAAQ,UAAYF,EAC/BI,EAAMF,EAAQ,IACdG,EAASH,EAAQ,QAAU,EAE3BI,EAAoBC,UAAQ,IAAMC,EAAA,QAASL,EAAU,GAAG,EAAG,CAACA,CAAQ,CAAC,EAErEM,EAAiBC,EAAAA,YAAY,IAAM,CACvC,GAAIN,EAAI,QAAS,CACf,MAAMO,EAAaP,EAAI,QACjBQ,EAAgC,KAAK,MACzCD,EAAW,UAAYA,EAAW,YAAA,EAEb,KAAK,MAAMA,EAAW,aAAeN,CAAM,GAE5CO,GACFN,GAEtB,CAAA,EACC,CAACA,CAAiB,CAAC,EAEtBO,EAAAA,UAAU,KACJT,EAAI,SACFA,EAAA,QAAQ,iBAAiB,SAAUK,CAAc,EAGhD,IAAM,CACPL,EAAI,SACFA,EAAA,QAAQ,oBAAoB,SAAUK,CAAc,CAC1D,GAED,CAACA,CAAc,CAAC,CACrB"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=const n=()=>{const{colorMode:s}=t.useKnockFeed(),{t:r}=t.useTranslations();return e.jsx("div",{className:`rnf-empty-feed rnf-empty-feed--${s}`,children:e.jsxs("div",{className:"rnf-empty-feed__inner",children:[e.jsx("h2",{className:"rnf-empty-feed__header",children:r("emptyFeedTitle")}),e.jsx("p",{className:"rnf-empty-feed__body",children:r("emptyFeedBody")})]})})};exports.EmptyFeed=n;
2
+ //# sourceMappingURL=EmptyFeed.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EmptyFeed.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":"mLAIO,MAAMA,EAAsB,IAAM,CACjC,KAAA,CAAE,UAAAC,GAAcC,EAAAA,eAChB,CAAE,EAAAC,GAAMC,EAAAA,kBAGZ,OAAAC,EAAA,IAAC,OAAI,UAAW,kCAAkCJ,CAAS,GACzD,SAAAK,EAAA,KAAC,MAAI,CAAA,UAAU,wBACb,SAAA,CAAAD,MAAC,KAAG,CAAA,UAAU,yBAA0B,SAAAF,EAAE,gBAAgB,EAAE,QAC3D,IAAE,CAAA,UAAU,uBAAwB,SAAAA,EAAE,eAAe,EAAE,CAAA,CAC1D,CAAA,CACF,CAAA,CAEJ"}
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ //# sourceMappingURL=styles.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("react"),v=require("react-popper-tooltip"),n=require("@knocklabs/react-core"),d=require("../../../core/components/Icons/CloseCircle.js"),b=({item:t})=>{const{colorMode:o,feedClient:c}=n.useKnockFeed(),{t:r}=n.useTranslations(),s=f.useCallback(i=>{i.preventDefault(),i.stopPropagation(),c.markAsArchived(t)},[t]),{getTooltipProps:a,setTooltipRef:l,setTriggerRef:u,visible:p}=v.usePopperTooltip({placement:"top-end"});return e.jsxs("button",{ref:u,onClick:s,type:"button","aria-label":r("archiveNotification"),className:`rnf-archive-notification-btn rnf-archive-notification-btn--${o}`,children:[e.jsx(d.CloseCircle,{}),p&&e.jsx("div",{ref:l,...a({className:`rnf-tooltip rnf-tooltip--${o}`}),children:r("archiveNotification")})]})};exports.ArchiveButton=b;
2
+ //# sourceMappingURL=ArchiveButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ArchiveButton.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":"wQAUMA,EAA8C,CAAC,CAAE,KAAAC,KAAW,CAChE,KAAM,CAAE,UAAAC,EAAW,WAAAC,CAAW,EAAIC,EAAa,aAAA,EACzC,CAAE,EAAAC,GAAMC,EAAAA,kBAERC,EAAUC,EAAA,YACbC,GAAqC,CACpCA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAElBN,EAAW,eAAeF,CAAI,CAChC,EACA,CAACA,CAAI,CAAA,EAGD,CAAE,gBAAAS,EAAiB,cAAAC,EAAe,cAAAC,EAAe,QAAAC,GACrDC,EAAAA,iBAAiB,CAAE,UAAW,SAAA,CAAW,EAGzC,OAAAC,EAAA,KAAC,SAAA,CACC,IAAKH,EACL,QAAAL,EACA,KAAK,SACL,aAAYF,EAAE,qBAAqB,EACnC,UAAW,8DAA8DH,CAAS,GAElF,SAAA,CAAAc,EAAA,IAACC,EAAY,YAAA,EAAA,EAEZJ,GACCG,EAAA,IAAC,MAAA,CACC,IAAKL,EACJ,GAAGD,EAAgB,CAClB,UAAW,4BAA4BR,CAAS,EAAA,CACjD,EAEA,WAAE,qBAAqB,CAAA,CAC1B,CAAA,CAAA,CAAA,CAIR"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=const c=({name:r,src:e})=>{function i(n){const[a,s]=n.split(" ");return a&&s?`${a.charAt(0)}${s.charAt(0)}`:a?a.charAt(0):""}return t.jsx("div",{className:"rnf-avatar",children:e?t.jsx("img",{src:e,alt:`Image of ${r}`,className:"rnf-avatar__image"}):t.jsx("span",{className:"rnf-avatar__initials",children:i(r)})})};exports.Avatar=c;
2
+ //# sourceMappingURL=Avatar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Avatar.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":"gJAQO,MAAMA,EAAgC,CAAC,CAAE,KAAAC,EAAM,IAAAC,KAAU,CAC9D,SAASC,EAAYF,EAAc,CACjC,KAAM,CAACG,EAAWC,CAAQ,EAAIJ,EAAK,MAAM,GAAG,EAC5C,OAAOG,GAAaC,EAChB,GAAGD,EAAU,OAAO,CAAC,CAAC,GAAGC,EAAS,OAAO,CAAC,CAAC,GAC3CD,EACEA,EAAU,OAAO,CAAC,EAClB,EACR,CAGE,OAAAE,EAAA,IAAC,OAAI,UAAU,aACZ,WACEA,EAAAA,IAAA,MAAA,CAAI,IAAAJ,EAAU,IAAK,YAAYD,CAAI,GAAI,UAAU,mBAAA,CAAoB,EAErEK,EAAA,IAAA,OAAA,CAAK,UAAU,uBAAwB,SAAAH,EAAYF,CAAI,CAAE,CAAA,CAE9D,CAAA,CAEJ"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=const y=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=y(f),h=i.default.forwardRef(({item:e,onItemClick:l,avatar:_,children:d,archiveButton:m},b)=>{const{feedClient:j,colorMode:N}=a.useKnockFeed(),{dateFnsLocale:v}=a.useTranslations(),o=f.useMemo(()=>e.blocks.reduce((r,u)=>({...r,[u.name]:u}),{}),[e]),c=o.action_url&&o.action_url.rendered,s=i.default.useCallback(()=>{if(j.markAsInteracted(e),l)return l(e);setTimeout(()=>{c&&c!==""&&window.location.assign(c)},200)},[e]),x=i.default.useCallback(r=>{switch(r.key){case"Enter":{r.stopPropagation(),s();break}}},[s]),t=e.actors[0];return n.jsx("div",{ref:b,className:`rnf-notification-cell rnf-notification-cell--${N}`,onClick:s,onKeyDown:x,tabIndex:0,children:n.jsxs("div",{className:"rnf-notification-cell__inner",children:[!e.read_at&&n.jsx("div",{className:"rnf-notification-cell__unread-dot"}),a.renderNodeOrFallback(_,t&&"name"in t&&t.name&&n.jsx(k.Avatar,{name:t.name,src:t.avatar})),n.jsxs("div",{className:"rnf-notification-cell__content-outer",children:[o.body&&n.jsx("div",{className:"rnf-notification-cell__content",dangerouslySetInnerHTML:{__html:o.body.rendered}}),d&&n.jsx("div",{className:"rnf-notification-cell__child-content",children:d}),n.jsx("span",{className:"rnf-notification-cell__timestamp",children:a.formatTimestamp(e.inserted_at,{locale:v()})})]}),a.renderNodeOrFallback(m,n.jsx(p.ArchiveButton,{item:e}))]})})});exports.NotificationCell=h;
2
+ //# sourceMappingURL=NotificationCell.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NotificationCell.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 { dateFnsLocale } = 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: dateFnsLocale() })}\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","dateFnsLocale","useTranslations","blocksByName","useMemo","acc","block","actionUrl","onClick","onKeyDown","ev","actor","jsx","jsxs","renderNodeOrFallback","Avatar","formatTimestamp","ArchiveButton"],"mappings":"oUAyBaA,EAAmBC,EAAM,QAAA,WAGpC,CAAC,CAAE,KAAAC,EAAM,YAAAC,EAAa,OAAAC,EAAQ,SAAAC,EAAU,cAAAC,CAAc,EAAGC,IAAQ,CACjE,KAAM,CAAE,WAAAC,EAAY,UAAAC,CAAU,EAAIC,EAAa,aAAA,EACzC,CAAE,cAAAC,GAAkBC,EAAAA,kBAEpBC,EAA4BC,EAAAA,QAAQ,IACjCZ,EAAK,OAAO,OAAO,CAACa,EAAKC,KACvB,CAAE,GAAGD,EAAK,CAACC,EAAM,IAAI,EAAGA,CAAM,GACpC,CAAE,CAAA,EACJ,CAACd,CAAI,CAAC,EAEHe,EAAYJ,EAAa,YAAcA,EAAa,WAAW,SAE/DK,EAAUjB,UAAM,YAAY,IAAM,CAIlC,GAFJO,EAAW,iBAAiBN,CAAI,EAE5BC,EAAa,OAAOA,EAAYD,CAAI,EAGxC,WAAW,IAAM,CACXe,GAAaA,IAAc,IACtB,OAAA,SAAS,OAAOA,CAAS,GAEjC,GAAG,CAAA,EACL,CAACf,CAAI,CAAC,EAEHiB,EAAYlB,EAAAA,QAAM,YACrBmB,GAA4C,CAC3C,OAAQA,EAAG,IAAK,CACd,IAAK,QAAS,CACZA,EAAG,gBAAgB,EACXF,IACR,KACF,CAGF,CACF,EACA,CAACA,CAAO,CAAA,EAGJG,EAAQnB,EAAK,OAAO,CAAC,EAGzB,OAAAoB,EAAA,IAAC,MAAA,CACC,IAAAf,EACA,UAAW,gDAAgDE,CAAS,GACpE,QAAAS,EACA,UAAAC,EACA,SAAU,EAEV,SAAAI,EAAA,KAAC,MAAI,CAAA,UAAU,+BACZ,SAAA,CAAA,CAACrB,EAAK,SAAYoB,EAAA,IAAA,MAAA,CAAI,UAAU,oCAAoC,EAEpEE,EAAA,qBACCpB,EACAiB,GAAS,SAAUA,GAASA,EAAM,MAChCC,EAAAA,IAACG,EAAAA,OAAO,CAAA,KAAMJ,EAAM,KAAM,IAAKA,EAAM,MAAQ,CAAA,CAEjD,EAEAE,EAAAA,KAAC,MAAI,CAAA,UAAU,uCACZ,SAAA,CAAAV,EAAa,MACZS,EAAA,IAAC,MAAA,CACC,UAAU,iCACV,wBAAyB,CAAE,OAAQT,EAAa,KAAK,QAAS,CAAA,CAChE,EAGDR,GACCiB,EAAA,IAAC,MAAI,CAAA,UAAU,uCACZ,SAAAjB,EACH,EAGDiB,EAAAA,IAAA,OAAA,CAAK,UAAU,mCACb,SAAgBI,EAAAA,gBAAAxB,EAAK,YAAa,CAAE,OAAQS,EAAgB,CAAA,CAAC,CAChE,CAAA,CAAA,EACF,EAECa,EAAqB,qBAAAlB,EAAgBgB,EAAA,IAAAK,EAAA,cAAA,CAAc,KAAAzB,CAAY,CAAA,CAAE,CAAA,EACpE,CAAA,CAAA,CAGN,CAAC"}
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ //# sourceMappingURL=styles.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=const d=({children:o,value:r,onChange:n})=>{const{colorMode:s}=c.useKnockFeed();return e.jsxs("div",{className:`rnf-dropdown rnf-dropdown--${s}`,children:[e.jsx("select",{value:r,onChange:n,children:o}),e.jsx(t.ChevronDown,{})]})};exports.Dropdown=d;
2
+ //# sourceMappingURL=Dropdown.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Dropdown.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":"8OAWO,MAAMA,EAAuD,CAAC,CACnE,SAAAC,EACA,MAAAC,EACA,SAAAC,CACF,IAAM,CACE,KAAA,CAAE,UAAAC,GAAcC,EAAAA,eAEtB,OACGC,EAAA,KAAA,MAAA,CAAI,UAAW,8BAA8BF,CAAS,GACrD,SAAA,CAACG,EAAAA,IAAA,SAAA,CAAO,MAAAL,EAAc,SAAAC,EACnB,SAAAF,CACH,CAAA,QACCO,EAAY,YAAA,EAAA,CACf,CAAA,CAAA,CAEJ"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=function b(e){if(e&&typeof e=="object"&&"default"in e)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const k=b(f),p=({onClick:e})=>{const{useFeedStore:r,feedClient:t,colorMode:n}=c.useKnockFeed(),{t:l}=c.useTranslations(),o=r(a=>a.items.filter(d=>!d.read_at)),u=r(a=>a.metadata.unread_count),i=k.useCallback(a=>{t.markAllAsRead(),e&&e(a,o)},[t,o,e]);return s.jsxs("button",{className:`rnf-mark-all-as-read rnf-mark-all-as-read--${n}`,disabled:u===0,onClick:i,type:"button",children:[l("markAllAsRead"),s.jsx(m.CheckmarkCircle,{})]})};exports.MarkAsRead=p;
2
+ //# sourceMappingURL=MarkAsRead.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MarkAsRead.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","e","jsxs","CheckmarkCircle"],"mappings":"glBAWaA,EAAwC,CAAC,CAAE,QAAAC,KAAc,CACpE,KAAM,CAAE,aAAAC,EAAc,WAAAC,EAAY,UAAAC,GAAcC,EAAa,aAAA,EACvD,CAAE,EAAAC,GAAMC,EAAAA,kBAERC,EAAcN,EAAcO,GAChCA,EAAM,MAAM,OAAQC,GAAS,CAACA,EAAK,OAAO,CAAA,EAGtCC,EAAcT,EAAcO,GAAUA,EAAM,SAAS,YAAY,EAEjEG,EAAiBC,EAAM,YAC1BC,GAAwB,CACvBX,EAAW,cAAc,EACrBF,GAASA,EAAQa,EAAGN,CAAW,CACrC,EACA,CAACL,EAAYK,EAAaP,CAAO,CAAA,EAIjC,OAAAc,EAAA,KAAC,SAAA,CACC,UAAW,8CAA8CX,CAAS,GAClE,SAAUO,IAAgB,EAC1B,QAASC,EACT,KAAK,SAEJ,SAAA,CAAAN,EAAE,eAAe,QACjBU,EAAgB,gBAAA,EAAA,CAAA,CAAA,CAAA,CAGvB"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=const I=require("../../../core/hooks/useOnBottomScroll.js"),B=t=>e.jsx(C.NotificationCell,{...t},t.item.id),E=t=>e.jsx(R.NotificationFeedHeader,{...t}),h=({colorMode:t})=>e.jsx("div",{className:"rnf-notification-feed__spinner-container",children:e.jsx(y.Spinner,{thickness:3,size:"16px",color:t==="dark"?"rgba(255, 255, 255, 0.65)":void 0})}),H="https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed",M=({EmptyComponent:t=e.jsx(w.EmptyFeed,{}),renderItem:p=B,onNotificationClick:x,onMarkAllAsReadClick:N,initialFilterStatus:c=s.FilterStatus.All,header:S,renderHeader:j=E})=>{const[a,u]=o.useState(c),{feedClient:n,useFeedStore:q,colorMode:d}=s.useKnockFeed(),{settings:f}=s.useFeedSettings(n),{t:_}=s.useTranslations(),{pageInfo:m,items:k,networkStatus:i}=q(),g=o.useRef(null);o.useEffect(()=>{u(c)},[c]),o.useEffect(()=>{n.fetch({status:a})},[n,a]);const b=k.length===0,l=r.isRequestInFlight(i),F=o.useCallback(()=>{!l&&m.after&&n.fetchNextPage()},[l,m,n]);return I({ref:g,callback:F,offset:70}),e.jsxs("div",{className:`rnf-notification-feed rnf-notification-feed--${d}`,children:[S||j({setFilterStatus:u,filterStatus:a,onMarkAllAsReadClick:N}),e.jsxs("div",{className:"rnf-notification-feed__container",ref:g,children:[i===r.NetworkStatus.loading&&e.jsx(h,{colorMode:d}),e.jsx("div",{className:"rnf-notification-feed__feed-items-container",children:i!==r.NetworkStatus.loading&&k.map(v=>p({item:v,onItemClick:x}))}),i===r.NetworkStatus.fetchMore&&e.jsx(h,{colorMode:d}),!l&&b&&t]}),(f==null?void 0:f.features.branding_required)&&e.jsx("div",{className:"rnf-notification-feed__knock-branding",children:e.jsx("a",{href:H,target:"_blank",children:_("poweredBy")})})]})};exports.NotificationFeed=M;
2
+ //# sourceMappingURL=NotificationFeed.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NotificationFeed.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":"khBA+CMA,EAAqBC,GACzBC,EAAA,IAACC,oBAAsC,GAAGF,CAAA,EAAnBA,EAAM,KAAK,EAAe,EAG7CG,EAAuBH,GAC1BC,EAAA,IAAAG,EAAA,uBAAA,CAAwB,GAAGJ,CAAO,CAAA,EAG/BK,EAAiB,CAAC,CAAE,UAAAC,CAAA,IACvBL,EAAA,IAAA,MAAA,CAAI,UAAU,2CACb,SAAAA,EAAA,IAACM,EAAA,QAAA,CACC,UAAW,EACX,KAAK,OACL,MAAOD,IAAc,OAAS,4BAA8B,MAAA,CAC9D,CACF,CAAA,EAGIE,EACJ,qGAEWC,EAAoD,CAAC,CAChE,eAAAC,QAAkBC,EAAU,UAAA,EAAA,EAC5B,WAAAC,EAAab,EACb,oBAAAc,EACA,qBAAAC,EACA,oBAAAC,EAAsBC,EAAa,aAAA,IACnC,OAAAC,EACA,aAAAC,EAAef,CACjB,IAAM,CACJ,KAAM,CAACgB,EAAQC,CAAS,EAAIC,WAASN,CAAmB,EAClD,CAAE,WAAAO,EAAY,aAAAC,EAAc,UAAAjB,GAAckB,EAAa,aAAA,EACvD,CAAE,SAAAC,CAAA,EAAaC,EAAA,gBAAgBJ,CAAU,EACzC,CAAE,EAAAK,GAAMC,EAAAA,kBAER,CAAE,SAAAC,EAAU,MAAAC,EAAO,cAAAC,GAAkBR,EAAa,EAClDS,EAAeC,SAAuB,IAAI,EAEhDC,EAAAA,UAAU,IAAM,CACdd,EAAUL,CAAmB,CAAA,EAC5B,CAACA,CAAmB,CAAC,EAExBmB,EAAAA,UAAU,IAAM,CAEHZ,EAAA,MAAM,CAAE,OAAAH,CAAA,CAAQ,CAAA,EAC1B,CAACG,EAAYH,CAAM,CAAC,EAEjB,MAAAgB,EAAUL,EAAM,SAAW,EAC3BM,EAAkBC,oBAAkBN,CAAa,EAGjDO,EAAmBC,EAAAA,YAAY,IAAM,CACrC,CAACH,GAAmBP,EAAS,OAC/BP,EAAW,cAAc,CAE1B,EAAA,CAACc,EAAiBP,EAAUP,CAAU,CAAC,EAIxB,OAAAkB,EAAA,CAChB,IAAKR,EACL,SAAUM,EACV,OAAQ,EAAA,CACT,EAGCG,EAAA,KAAC,MAAA,CACC,UAAW,gDAAgDnC,CAAS,GAEnE,SAAA,CAAAW,GACCC,EAAa,CACX,gBAAiBE,EACjB,aAAcD,EACd,qBAAAL,CAAA,CACD,EAEF2B,EAAA,KAAA,MAAA,CAAI,UAAU,mCAAmC,IAAKT,EACpD,SAAA,CAAAD,IAAkBW,EAAc,cAAA,SAC9BzC,EAAA,IAAAI,EAAA,CAAe,UAAAC,EAAsB,QAGvC,MAAI,CAAA,UAAU,8CACZ,SAAkByB,IAAAW,EAAA,cAAc,SAC/BZ,EAAM,IAAKa,GACT/B,EAAW,CAAE,KAAA+B,EAAM,YAAa9B,EAAqB,CAAA,EAE3D,EAECkB,IAAkBW,EAAA,cAAc,WAC/BzC,EAAA,IAACI,GAAe,UAAAC,EAAsB,EAGvC,CAAC8B,GAAmBD,GAAWzB,CAAA,EAClC,GAECe,GAAA,YAAAA,EAAU,SAAS,oBACjBxB,EAAA,IAAA,MAAA,CAAI,UAAU,wCACb,SAAAA,EAAA,IAAC,IAAE,CAAA,KAAMO,EAAmB,OAAO,SAChC,SAAEmB,EAAA,WAAW,CAChB,CAAA,EACF,CAAA,CAAA,CAAA,CAIR"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@knocklabs/react-core"),o=require("./Dropdown.js"),c=require("./MarkAsRead.js"),d=[r.FilterStatus.All,r.FilterStatus.Unread,r.FilterStatus.Read],l=({onMarkAllAsReadClick:i,filterStatus:a,setFilterStatus:s})=>{const{t:n}=r.useTranslations();return e.jsxs("header",{className:"rnf-notification-feed__header",children:[e.jsxs("div",{className:"rnf-notification-feed__selector",children:[e.jsx("span",{className:"rnf-notification-feed__type",children:n("notifications")}),e.jsx(o.Dropdown,{value:a,onChange:t=>s(t.target.value),children:d.map(t=>e.jsx("option",{value:t,children:n(t)},t))})]}),e.jsx(c.MarkAsRead,{onClick:i})]})};exports.NotificationFeedHeader=l;
2
+ //# sourceMappingURL=NotificationFeedHeader.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NotificationFeedHeader.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","e","MarkAsRead"],"mappings":"gNAaMA,EAAwB,CAC5BC,EAAAA,aAAa,IACbA,EAAAA,aAAa,OACbA,EAAAA,aAAa,IACf,EAEaC,EAAgE,CAAC,CAC5E,qBAAAC,EACA,aAAAC,EACA,gBAAAC,CACF,IAAM,CACE,KAAA,CAAE,EAAAC,GAAMC,EAAAA,kBAGZ,OAAAC,EAAA,KAAC,SAAO,CAAA,UAAU,gCAChB,SAAA,CAACA,EAAAA,KAAA,MAAA,CAAI,UAAU,kCACb,SAAA,CAAAC,MAAC,OAAK,CAAA,UAAU,8BACb,SAAAH,EAAE,eAAe,EACpB,EACAG,EAAA,IAACC,EAAA,SAAA,CACC,MAAON,EACP,SAAWO,GAAMN,EAAgBM,EAAE,OAAO,KAAK,EAE9C,SAAsBX,EAAA,IAAKI,GACzBK,EAAAA,IAAA,SAAA,CAA0B,MAAOL,EAC/B,SAAEA,EAAAA,CAAY,CADJA,EAAAA,CAEb,CACD,CAAA,CACH,CAAA,EACF,EACAK,EAAAA,IAACG,EAAW,WAAA,CAAA,QAAST,CAAsB,CAAA,CAC7C,CAAA,CAAA,CAEJ"}
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ //# sourceMappingURL=styles.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=const N=({store:e,feedClient:o})=>{e.metadata.unseen_count>0&&o.markAllAsSeen()},b=({isVisible:e,onOpen:o=N,onClose:i,buttonRef:n,closeOnClickOutside:s=!0,placement:c="bottom-end",...f})=>{const{colorMode:a,feedClient:d,useFeedStore:u}=y.useKnockFeed(),p=u(),{ref:r}=F(e,i,{closeOnClickOutside:s}),{styles:l,attributes:m}=q.usePopper(n.current,r.current,{strategy:"fixed",placement:c,modifiers:[{name:"offset",options:{offset:[0,8]}}]});return v.useEffect(()=>{e&&o&&o({store:p,feedClient:d})},[e]),t.jsx("div",{className:`rnf-notification-feed-popover rnf-notification-feed-popover--${a}`,style:{...l.popper,visibility:e?"visible":"hidden"},ref:r,...m.popper,role:"dialog",tabIndex:-1,children:t.jsx("div",{className:"rnf-notification-feed-popover__inner",children:t.jsx(x.NotificationFeed,{...f})})})};exports.NotificationFeedPopover=b;
2
+ //# sourceMappingURL=NotificationFeedPopover.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NotificationFeedPopover.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":"+bAeA,MAAMA,EAAgB,CAAC,CAAE,MAAAC,EAAO,WAAAC,KAAgC,CAC1DD,EAAM,SAAS,aAAe,GAChCC,EAAW,cAAc,CAE7B,EAWaC,EAET,CAAC,CACH,UAAAC,EACA,OAAAC,EAASL,EACT,QAAAM,EACA,UAAAC,EACA,oBAAAC,EAAsB,GACtB,UAAAC,EAAY,aACZ,GAAGC,CACL,IAAM,CACJ,KAAM,CAAE,UAAAC,EAAW,WAAAT,EAAY,aAAAU,GAAiBC,EAAa,aAAA,EACvDZ,EAAQW,IAER,CAAE,IAAKE,CAAA,EAAcC,EAAoBX,EAAWE,EAAS,CACjE,oBAAAE,CAAA,CACD,EAEK,CAAE,OAAAQ,EAAQ,WAAAC,CAAA,EAAeC,EAAA,UAC7BX,EAAU,QACVO,EAAU,QACV,CACE,SAAU,QACV,UAAAL,EACA,UAAW,CACT,CACE,KAAM,SACN,QAAS,CACP,OAAQ,CAAC,EAAG,CAAC,CACf,CACF,CACF,CACF,CAAA,EAGFU,OAAAA,EAAAA,UAAU,IAAM,CAGVf,GAAaC,GACRA,EAAA,CAAE,MAAAJ,EAAO,WAAAC,CAAA,CAAY,CAC9B,EACC,CAACE,CAAS,CAAC,EAGZgB,EAAA,IAAC,MAAA,CACC,UAAW,gEAAgET,CAAS,GACpF,MAAO,CACL,GAAGK,EAAO,OACV,WAAYZ,EAAY,UAAY,QACtC,EACA,IAAKU,EACJ,GAAGG,EAAW,OACf,KAAK,SACL,SAAU,GAEV,SAAAG,EAAA,IAAC,OAAI,UAAU,uCACb,eAACC,EAAAA,iBAAkB,CAAA,GAAGX,EAAW,CACnC,CAAA,CAAA,CAAA,CAGN"}
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ //# sourceMappingURL=styles.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=const s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},l=s(c),f=l.default.forwardRef(({onClick:t,badgeCountType:o},n)=>{const{colorMode:i}=a.useKnockFeed();return e.jsxs("button",{className:`rnf-notification-icon-button rnf-notification-icon-button--${i}`,role:"button","aria-label":"Open notification feed",ref:n,onClick:t,children:[e.jsx(r.BellIcon,{}),e.jsx(u.UnseenBadge,{badgeCountType:o})]})});exports.NotificationIconButton=f;
2
+ //# sourceMappingURL=NotificationIconButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NotificationIconButton.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":"0WAaaA,EAAyBC,UAAM,WAG1C,CAAC,CAAE,QAAAC,EAAS,eAAAC,GAAkBC,IAAQ,CAChC,KAAA,CAAE,UAAAC,GAAcC,EAAAA,eAGpB,OAAAC,EAAA,KAAC,SAAA,CACC,UAAW,8DAA8DF,CAAS,GAClF,KAAK,SACL,aAAW,yBACX,IAAAD,EACA,QAAAF,EAEA,SAAA,CAAAM,EAAA,IAACC,EAAS,SAAA,EAAA,EACVD,MAACE,EAAAA,aAAY,eAAAP,EAAgC,CAAA,CAAA,CAAA,CAGnD,CAAC"}
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ //# sourceMappingURL=styles.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=function c(n,e){switch(n){case"all":return e.total_count;case"unread":return e.unread_count;case"unseen":return e.unseen_count}}const o=({badgeCountType:n="unseen"})=>{const{useFeedStore:e}=t.useKnockFeed(),u=e(r=>c(n,r.metadata));return u!==0?s.jsx("div",{className:"rnf-unseen-badge",children:s.jsx("span",{className:"rnf-unseen-badge__count",children:t.formatBadgeCount(u)})}):null};exports.UnseenBadge=o;
2
+ //# sourceMappingURL=UnseenBadge.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UnseenBadge.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":"mLAYA,SAASA,EACPC,EACAC,EACA,CACA,OAAQD,EAAgB,CACtB,IAAK,MACH,OAAOC,EAAS,YAClB,IAAK,SACH,OAAOA,EAAS,aAClB,IAAK,SACH,OAAOA,EAAS,YACpB,CACF,CAEO,MAAMC,EAA0C,CAAC,CACtD,eAAAF,EAAiB,QACnB,IAAM,CACE,KAAA,CAAE,aAAAG,GAAiBC,EAAAA,eACnBC,EAAkBF,EAAcG,GACpCP,EAAiBC,EAAgBM,EAAM,QAAQ,CAAA,EAGjD,OAAOD,IAAoB,EACxBE,MAAA,MAAA,CAAI,UAAU,mBACb,SAAAA,EAAA,IAAC,OAAK,CAAA,UAAU,0BACb,SAAAC,EAAAA,iBAAiBH,CAAe,CACnC,CAAA,EACF,EACE,IACN"}
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ //# sourceMappingURL=styles.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ //# sourceMappingURL=theme.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,39 @@
1
+
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 i } from "./modules/core/components/Icons/Bell.mjs";
5
+ import { CheckmarkCircle as n } 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 B } from "./modules/core/components/Spinner/Spinner.mjs";
9
+ import { default as s } 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 { NotificationFeedPopover as G } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs";
17
+ import { NotificationIconButton as M } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.mjs";
18
+ import { UnseenBadge as P } from "./modules/feed/components/UnseenBadge/UnseenBadge.mjs";
19
+ export * from "@knocklabs/react-core";
20
+ export {
21
+ A as Avatar,
22
+ i as BellIcon,
23
+ t as Button,
24
+ p as ButtonGroup,
25
+ n as CheckmarkCircle,
26
+ c as ChevronDown,
27
+ d as CloseCircle,
28
+ F as EmptyFeed,
29
+ D as MarkAsRead,
30
+ v as NotificationCell,
31
+ S as NotificationFeed,
32
+ w as NotificationFeedHeader,
33
+ G as NotificationFeedPopover,
34
+ M as NotificationIconButton,
35
+ B as Spinner,
36
+ P as UnseenBadge,
37
+ s as useOnBottomScroll
38
+ };
39
+ //# sourceMappingURL=index.mjs.map