@cerberus-design/react 0.16.0-next-270c731 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/legacy/_tsup-dts-rollup.d.cts +25 -82
- package/build/legacy/components/for.cjs +4 -3
- package/build/legacy/components/for.cjs.map +1 -1
- package/build/legacy/{components/cta-dialog/provider.cjs → context/cta-modal.cjs} +150 -187
- package/build/legacy/context/cta-modal.cjs.map +1 -0
- package/build/legacy/index.cjs +715 -771
- package/build/legacy/index.cjs.map +1 -1
- package/build/modern/_tsup-dts-rollup.d.ts +25 -82
- package/build/modern/{chunk-O542MPR7.js → chunk-CMYD5KWA.js} +4 -4
- package/build/modern/{chunk-Z4342DRO.js → chunk-FMRWRVUS.js} +4 -4
- package/build/modern/chunk-IIH363FO.js +13 -0
- package/build/modern/chunk-IIH363FO.js.map +1 -0
- package/build/modern/{chunk-6ICNCCPD.js → chunk-P3SF56LT.js} +4 -4
- package/build/modern/{chunk-QEM3M4N3.js → chunk-ZDANBCM3.js} +31 -22
- package/build/modern/chunk-ZDANBCM3.js.map +1 -0
- package/build/modern/components/for.js +1 -1
- package/build/modern/components/select/index.js +2 -2
- package/build/modern/components/select/select.js +2 -2
- package/build/modern/context/cta-modal.js +19 -0
- package/build/modern/context/notification-center.js +2 -2
- package/build/modern/context/prompt-modal.js +2 -2
- package/build/modern/index.js +76 -83
- package/build/modern/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/for.tsx +18 -13
- package/src/{components/cta-dialog/provider.tsx → context/cta-modal.tsx} +68 -34
- package/src/index.ts +1 -1
- package/build/legacy/components/cta-dialog/context.cjs +0 -33
- package/build/legacy/components/cta-dialog/context.cjs.map +0 -1
- package/build/legacy/components/cta-dialog/index.cjs +0 -433
- package/build/legacy/components/cta-dialog/index.cjs.map +0 -1
- package/build/legacy/components/cta-dialog/provider.cjs.map +0 -1
- package/build/legacy/components/cta-dialog/trigger-item.cjs +0 -99
- package/build/legacy/components/cta-dialog/trigger-item.cjs.map +0 -1
- package/build/legacy/components/cta-dialog/utils.cjs +0 -47
- package/build/legacy/components/cta-dialog/utils.cjs.map +0 -1
- package/build/modern/chunk-4LSTU6WU.js +0 -8
- package/build/modern/chunk-4LSTU6WU.js.map +0 -1
- package/build/modern/chunk-DXOKSZVQ.js +0 -12
- package/build/modern/chunk-DXOKSZVQ.js.map +0 -1
- package/build/modern/chunk-IKDXADLX.js +0 -1
- package/build/modern/chunk-MVO2GNUA.js +0 -47
- package/build/modern/chunk-MVO2GNUA.js.map +0 -1
- package/build/modern/chunk-PLHYOCY3.js +0 -23
- package/build/modern/chunk-PLHYOCY3.js.map +0 -1
- package/build/modern/chunk-QEM3M4N3.js.map +0 -1
- package/build/modern/components/cta-dialog/context.js +0 -8
- package/build/modern/components/cta-dialog/context.js.map +0 -1
- package/build/modern/components/cta-dialog/index.js +0 -26
- package/build/modern/components/cta-dialog/index.js.map +0 -1
- package/build/modern/components/cta-dialog/provider.js +0 -22
- package/build/modern/components/cta-dialog/provider.js.map +0 -1
- package/build/modern/components/cta-dialog/trigger-item.js +0 -10
- package/build/modern/components/cta-dialog/trigger-item.js.map +0 -1
- package/build/modern/components/cta-dialog/utils.js +0 -7
- package/build/modern/components/cta-dialog/utils.js.map +0 -1
- package/src/components/cta-dialog/context.tsx +0 -34
- package/src/components/cta-dialog/index.ts +0 -2
- package/src/components/cta-dialog/trigger-item.tsx +0 -53
- package/src/components/cta-dialog/utils.ts +0 -57
- /package/build/modern/{chunk-O542MPR7.js.map → chunk-CMYD5KWA.js.map} +0 -0
- /package/build/modern/{chunk-Z4342DRO.js.map → chunk-FMRWRVUS.js.map} +0 -0
- /package/build/modern/{chunk-6ICNCCPD.js.map → chunk-P3SF56LT.js.map} +0 -0
- /package/build/modern/{chunk-IKDXADLX.js.map → context/cta-modal.js.map} +0 -0
package/build/modern/index.js
CHANGED
|
@@ -1,15 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Label
|
|
3
|
-
} from "./chunk-LT62577B.js";
|
|
4
|
-
import {
|
|
5
|
-
Modal
|
|
6
|
-
} from "./chunk-Q3I4H6EC.js";
|
|
7
|
-
import {
|
|
8
|
-
ModalDescription
|
|
9
|
-
} from "./chunk-WECB67DC.js";
|
|
10
|
-
import {
|
|
11
|
-
ModalHeader
|
|
12
|
-
} from "./chunk-AUALRL3U.js";
|
|
13
1
|
import {
|
|
14
2
|
ModalHeading
|
|
15
3
|
} from "./chunk-SWX5JWZR.js";
|
|
@@ -29,6 +17,18 @@ import {
|
|
|
29
17
|
import {
|
|
30
18
|
FieldsetLabel
|
|
31
19
|
} from "./chunk-DRDNNRU3.js";
|
|
20
|
+
import {
|
|
21
|
+
Label
|
|
22
|
+
} from "./chunk-LT62577B.js";
|
|
23
|
+
import {
|
|
24
|
+
Modal
|
|
25
|
+
} from "./chunk-Q3I4H6EC.js";
|
|
26
|
+
import {
|
|
27
|
+
ModalDescription
|
|
28
|
+
} from "./chunk-WECB67DC.js";
|
|
29
|
+
import {
|
|
30
|
+
ModalHeader
|
|
31
|
+
} from "./chunk-AUALRL3U.js";
|
|
32
32
|
import {
|
|
33
33
|
NavMenu,
|
|
34
34
|
useNavMenuContext
|
|
@@ -36,18 +36,15 @@ import {
|
|
|
36
36
|
import {
|
|
37
37
|
NotificationCenter,
|
|
38
38
|
useNotificationCenter
|
|
39
|
-
} from "./chunk-
|
|
39
|
+
} from "./chunk-FMRWRVUS.js";
|
|
40
40
|
import {
|
|
41
41
|
PromptModal,
|
|
42
42
|
usePromptModal
|
|
43
|
-
} from "./chunk-
|
|
43
|
+
} from "./chunk-CMYD5KWA.js";
|
|
44
44
|
import {
|
|
45
45
|
ThemeProvider,
|
|
46
46
|
useThemeContext
|
|
47
47
|
} from "./chunk-EB37HRCN.js";
|
|
48
|
-
import {
|
|
49
|
-
Td
|
|
50
|
-
} from "./chunk-3R4TIF2X.js";
|
|
51
48
|
import {
|
|
52
49
|
Th
|
|
53
50
|
} from "./chunk-SGKHA4EB.js";
|
|
@@ -57,10 +54,17 @@ import {
|
|
|
57
54
|
import {
|
|
58
55
|
Tooltip
|
|
59
56
|
} from "./chunk-LPALHB6R.js";
|
|
57
|
+
import {
|
|
58
|
+
For
|
|
59
|
+
} from "./chunk-IIH363FO.js";
|
|
60
60
|
import {
|
|
61
61
|
ConfirmModal,
|
|
62
62
|
useConfirmModal
|
|
63
63
|
} from "./chunk-H54FR7IP.js";
|
|
64
|
+
import {
|
|
65
|
+
CTAModal,
|
|
66
|
+
useCTAModal
|
|
67
|
+
} from "./chunk-ZDANBCM3.js";
|
|
64
68
|
import {
|
|
65
69
|
Table,
|
|
66
70
|
Tr
|
|
@@ -84,15 +88,8 @@ import {
|
|
|
84
88
|
Tbody
|
|
85
89
|
} from "./chunk-ZR37P4NZ.js";
|
|
86
90
|
import {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
} from "./chunk-ZFFW5ELD.js";
|
|
90
|
-
import {
|
|
91
|
-
ProgressBar
|
|
92
|
-
} from "./chunk-WZJ5UQNM.js";
|
|
93
|
-
import {
|
|
94
|
-
FileUploader
|
|
95
|
-
} from "./chunk-7SU6FCTJ.js";
|
|
91
|
+
Td
|
|
92
|
+
} from "./chunk-3R4TIF2X.js";
|
|
96
93
|
import {
|
|
97
94
|
Legend
|
|
98
95
|
} from "./chunk-RBNOEAWJ.js";
|
|
@@ -114,9 +111,6 @@ import {
|
|
|
114
111
|
import {
|
|
115
112
|
NotificationHeading
|
|
116
113
|
} from "./chunk-SLHYBPJ5.js";
|
|
117
|
-
import {
|
|
118
|
-
CircularProgress
|
|
119
|
-
} from "./chunk-6QHOKCV3.js";
|
|
120
114
|
import {
|
|
121
115
|
DatePicker,
|
|
122
116
|
DatePickerCalendar,
|
|
@@ -139,6 +133,20 @@ import {
|
|
|
139
133
|
DatePickerView,
|
|
140
134
|
DatePickerViewControl
|
|
141
135
|
} from "./chunk-5EWCH7AI.js";
|
|
136
|
+
import {
|
|
137
|
+
DialogCloseIconTrigger
|
|
138
|
+
} from "./chunk-6BN3XKQF.js";
|
|
139
|
+
import {
|
|
140
|
+
Dialog,
|
|
141
|
+
DialogBackdrop,
|
|
142
|
+
DialogCloseTrigger,
|
|
143
|
+
DialogContent,
|
|
144
|
+
DialogDescription,
|
|
145
|
+
DialogHeading,
|
|
146
|
+
DialogPositioner,
|
|
147
|
+
DialogProvider,
|
|
148
|
+
DialogTrigger
|
|
149
|
+
} from "./chunk-TFL56AYR.js";
|
|
142
150
|
import {
|
|
143
151
|
Droppable
|
|
144
152
|
} from "./chunk-TKI2CKHH.js";
|
|
@@ -149,7 +157,19 @@ import {
|
|
|
149
157
|
FeatureFlags,
|
|
150
158
|
useFeatureFlags
|
|
151
159
|
} from "./chunk-CJFW36DZ.js";
|
|
152
|
-
import
|
|
160
|
+
import {
|
|
161
|
+
FileStatus,
|
|
162
|
+
processStatus
|
|
163
|
+
} from "./chunk-ZFFW5ELD.js";
|
|
164
|
+
import {
|
|
165
|
+
ProgressBar
|
|
166
|
+
} from "./chunk-WZJ5UQNM.js";
|
|
167
|
+
import {
|
|
168
|
+
IconButton
|
|
169
|
+
} from "./chunk-APD6IX5R.js";
|
|
170
|
+
import {
|
|
171
|
+
FileUploader
|
|
172
|
+
} from "./chunk-7SU6FCTJ.js";
|
|
153
173
|
import {
|
|
154
174
|
AccordionItemGroup
|
|
155
175
|
} from "./chunk-WN7TJX6J.js";
|
|
@@ -168,23 +188,12 @@ import {
|
|
|
168
188
|
AdmonitionHeading
|
|
169
189
|
} from "./chunk-DXBZ3HMY.js";
|
|
170
190
|
import "./chunk-2HOUQ2DX.js";
|
|
171
|
-
import "./chunk-OGYMMATX.js";
|
|
172
191
|
import {
|
|
173
|
-
|
|
174
|
-
} from "./chunk-
|
|
175
|
-
import {
|
|
176
|
-
RadioParts
|
|
177
|
-
} from "./chunk-FUL2VRDU.js";
|
|
192
|
+
Avatar
|
|
193
|
+
} from "./chunk-SXLPDPOZ.js";
|
|
178
194
|
import {
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
RadioGroupItem,
|
|
182
|
-
RadioGroupItemControl,
|
|
183
|
-
RadioGroupItemHiddenInput,
|
|
184
|
-
RadioGroupItemText,
|
|
185
|
-
RadioGroupLabel,
|
|
186
|
-
RadioGroupRoot
|
|
187
|
-
} from "./chunk-5RTNSVYU.js";
|
|
195
|
+
CircularProgress
|
|
196
|
+
} from "./chunk-6QHOKCV3.js";
|
|
188
197
|
import "./chunk-2LF3HPNA.js";
|
|
189
198
|
import {
|
|
190
199
|
OptionGroup,
|
|
@@ -193,7 +202,10 @@ import {
|
|
|
193
202
|
import {
|
|
194
203
|
Option,
|
|
195
204
|
Select
|
|
196
|
-
} from "./chunk-
|
|
205
|
+
} from "./chunk-P3SF56LT.js";
|
|
206
|
+
import {
|
|
207
|
+
Portal
|
|
208
|
+
} from "./chunk-IQJDVFPP.js";
|
|
197
209
|
import {
|
|
198
210
|
SelectParts
|
|
199
211
|
} from "./chunk-XTNGF4D6.js";
|
|
@@ -238,6 +250,7 @@ import {
|
|
|
238
250
|
ToggleIndicator,
|
|
239
251
|
ToggleRoot
|
|
240
252
|
} from "./chunk-CIMY2U22.js";
|
|
253
|
+
import "./chunk-V3M3ZOQI.js";
|
|
241
254
|
import "./chunk-TIJAFPHQ.js";
|
|
242
255
|
import {
|
|
243
256
|
Checkbox
|
|
@@ -257,42 +270,6 @@ import {
|
|
|
257
270
|
CheckboxLabel,
|
|
258
271
|
CheckboxRoot
|
|
259
272
|
} from "./chunk-BPRF34DU.js";
|
|
260
|
-
import "./chunk-IKDXADLX.js";
|
|
261
|
-
import {
|
|
262
|
-
CTAModal,
|
|
263
|
-
useCTAModal
|
|
264
|
-
} from "./chunk-QEM3M4N3.js";
|
|
265
|
-
import "./chunk-4LSTU6WU.js";
|
|
266
|
-
import "./chunk-MVO2GNUA.js";
|
|
267
|
-
import {
|
|
268
|
-
For
|
|
269
|
-
} from "./chunk-DXOKSZVQ.js";
|
|
270
|
-
import {
|
|
271
|
-
DialogCloseIconTrigger
|
|
272
|
-
} from "./chunk-6BN3XKQF.js";
|
|
273
|
-
import {
|
|
274
|
-
IconButton
|
|
275
|
-
} from "./chunk-APD6IX5R.js";
|
|
276
|
-
import {
|
|
277
|
-
Dialog,
|
|
278
|
-
DialogBackdrop,
|
|
279
|
-
DialogCloseTrigger,
|
|
280
|
-
DialogContent,
|
|
281
|
-
DialogDescription,
|
|
282
|
-
DialogHeading,
|
|
283
|
-
DialogPositioner,
|
|
284
|
-
DialogProvider,
|
|
285
|
-
DialogTrigger
|
|
286
|
-
} from "./chunk-TFL56AYR.js";
|
|
287
|
-
import {
|
|
288
|
-
Avatar
|
|
289
|
-
} from "./chunk-SXLPDPOZ.js";
|
|
290
|
-
import {
|
|
291
|
-
Portal
|
|
292
|
-
} from "./chunk-IQJDVFPP.js";
|
|
293
|
-
import {
|
|
294
|
-
createCTAModalActions
|
|
295
|
-
} from "./chunk-PLHYOCY3.js";
|
|
296
273
|
import "./chunk-TYPULJMJ.js";
|
|
297
274
|
import {
|
|
298
275
|
Field
|
|
@@ -334,6 +311,23 @@ import {
|
|
|
334
311
|
FieldsetLegend,
|
|
335
312
|
FieldsetRoot
|
|
336
313
|
} from "./chunk-Z3FDG263.js";
|
|
314
|
+
import "./chunk-OGYMMATX.js";
|
|
315
|
+
import {
|
|
316
|
+
Radio
|
|
317
|
+
} from "./chunk-STLN7BMJ.js";
|
|
318
|
+
import {
|
|
319
|
+
RadioParts
|
|
320
|
+
} from "./chunk-FUL2VRDU.js";
|
|
321
|
+
import {
|
|
322
|
+
RadioGroup,
|
|
323
|
+
RadioGroupIndicator,
|
|
324
|
+
RadioGroupItem,
|
|
325
|
+
RadioGroupItemControl,
|
|
326
|
+
RadioGroupItemHiddenInput,
|
|
327
|
+
RadioGroupItemText,
|
|
328
|
+
RadioGroupLabel,
|
|
329
|
+
RadioGroupRoot
|
|
330
|
+
} from "./chunk-5RTNSVYU.js";
|
|
337
331
|
import {
|
|
338
332
|
useModal
|
|
339
333
|
} from "./chunk-KGQG5JGW.js";
|
|
@@ -564,7 +558,6 @@ export {
|
|
|
564
558
|
ToggleRoot,
|
|
565
559
|
Tooltip,
|
|
566
560
|
Tr,
|
|
567
|
-
createCTAModalActions,
|
|
568
561
|
createNavTriggerProps,
|
|
569
562
|
createSelectCollection,
|
|
570
563
|
defineIcons,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// deprecated\n\nexport * from './components/deprecated/FieldMessage'\nexport * from './components/deprecated/FieldsetLabel'\nexport * from './components/deprecated/Label'\nexport * from './components/deprecated/Modal'\nexport * from './components/deprecated/ModalHeader'\nexport * from './components/deprecated/ModalHeading'\nexport * from './components/deprecated/ModalDescription'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useToggle'\n\n// components\n\nexport * from './components/Accordion'\nexport * from './components/Accordion.client'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/button/index'\nexport * from './components/checkbox/index'\nexport * from './components/CircularProgress'\nexport * from './components/
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// deprecated\n\nexport * from './components/deprecated/FieldMessage'\nexport * from './components/deprecated/FieldsetLabel'\nexport * from './components/deprecated/Label'\nexport * from './components/deprecated/Modal'\nexport * from './components/deprecated/ModalHeader'\nexport * from './components/deprecated/ModalHeading'\nexport * from './components/deprecated/ModalDescription'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useToggle'\n\n// components\n\nexport * from './components/Accordion'\nexport * from './components/Accordion.client'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/button/index'\nexport * from './components/checkbox/index'\nexport * from './components/CircularProgress'\nexport * from './components/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/Dialog'\nexport * from './components/Dialog.client'\nexport * from './components/Droppable'\nexport * from './components/FeatureFlag'\nexport * from './components/field/index'\nexport * from './components/fieldset/index'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/for'\nexport * from './components/IconButton'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/radio/index'\nexport * from './components/select/index'\nexport * from './components/Show'\nexport * from './components/Spinner'\nexport * from './components/switch/index'\nexport * from './components/Tabs.client'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Text'\nexport * from './components/toggle/index'\nexport * from './components/Tooltip'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA,cAAc;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cerberus-design/react",
|
|
3
|
-
"version": "0.16.0
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"description": "The Cerberus Design React component library.",
|
|
5
5
|
"browserslist": "> 0.25%, not dead",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react-dom": "^18",
|
|
27
27
|
"tsup": "^8.1.0",
|
|
28
28
|
"@cerberus-design/configs": "0.0.0",
|
|
29
|
-
"@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.16.0
|
|
29
|
+
"@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.16.0"
|
|
30
30
|
},
|
|
31
31
|
"publishConfig": {
|
|
32
32
|
"access": "public"
|
package/src/components/for.tsx
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import type { ReactNode
|
|
1
|
+
import type { ReactNode } from 'react'
|
|
2
2
|
|
|
3
|
-
export interface ForProps<T
|
|
3
|
+
export interface ForProps<T> {
|
|
4
4
|
/**
|
|
5
|
-
* The array to iterate over
|
|
5
|
+
* The array to iterate over
|
|
6
6
|
*/
|
|
7
|
-
each: T
|
|
7
|
+
each: T[]
|
|
8
8
|
/**
|
|
9
|
-
* The fallback to render when the array is empty
|
|
9
|
+
* The fallback content to render when the array is empty
|
|
10
10
|
*/
|
|
11
|
-
fallback?:
|
|
11
|
+
fallback?: ReactNode
|
|
12
12
|
/**
|
|
13
|
-
* The
|
|
13
|
+
* The render function to render each item in the array
|
|
14
14
|
*/
|
|
15
|
-
children: (item: T
|
|
15
|
+
children: (item: Exclude<T, undefined>, index: number) => ReactNode
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
/**
|
|
@@ -27,12 +27,17 @@ export interface ForProps<T extends readonly unknown[], U extends JSX.Element> {
|
|
|
27
27
|
* </For>
|
|
28
28
|
* ```
|
|
29
29
|
*/
|
|
30
|
-
export function For<
|
|
31
|
-
|
|
32
|
-
) {
|
|
33
|
-
|
|
30
|
+
export function For<
|
|
31
|
+
T extends string | number | Record<string, unknown> | object | undefined,
|
|
32
|
+
>(props: ForProps<T>) {
|
|
33
|
+
const mappableChildren = props.children as unknown as (
|
|
34
|
+
item: T,
|
|
35
|
+
index: number,
|
|
36
|
+
) => ReactNode
|
|
37
|
+
|
|
38
|
+
if (props.each?.length === 0) {
|
|
34
39
|
return props.fallback || null
|
|
35
40
|
}
|
|
36
41
|
|
|
37
|
-
return props.each?.map(
|
|
42
|
+
return props.each?.map(mappableChildren) as ReactNode
|
|
38
43
|
}
|
|
@@ -1,39 +1,66 @@
|
|
|
1
1
|
'use client'
|
|
2
2
|
|
|
3
3
|
import {
|
|
4
|
+
createContext,
|
|
4
5
|
useCallback,
|
|
5
6
|
useContext,
|
|
6
7
|
useMemo,
|
|
7
8
|
useState,
|
|
8
9
|
type MouseEvent,
|
|
10
|
+
type MouseEventHandler,
|
|
9
11
|
type PropsWithChildren,
|
|
10
12
|
type ReactNode,
|
|
11
13
|
} from 'react'
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
14
|
+
import { Button } from '../components/button/button'
|
|
15
|
+
import { Show } from '../components/Show'
|
|
16
|
+
import { Avatar } from '../components/Avatar'
|
|
17
|
+
import { useCerberusContext } from './cerberus'
|
|
18
|
+
import { HStack } from '@cerberus/styled-system/jsx'
|
|
19
|
+
import { css } from '@cerberus/styled-system/css'
|
|
20
|
+
import { VStack } from '@cerberus/styled-system/jsx'
|
|
17
21
|
import {
|
|
18
22
|
Dialog,
|
|
19
23
|
DialogDescription,
|
|
20
24
|
DialogHeading,
|
|
21
25
|
DialogProvider,
|
|
22
|
-
} from '../Dialog'
|
|
23
|
-
import { DialogCloseIconTrigger } from '../Dialog.client'
|
|
24
|
-
import type { CTAButtonAction, CTAModalActionReturn } from './utils'
|
|
25
|
-
import {
|
|
26
|
-
CTAModalContext,
|
|
27
|
-
type CTAModalValue,
|
|
28
|
-
type ShowCTAModalOptions,
|
|
29
|
-
} from './context'
|
|
30
|
-
import { TriggerItem } from './trigger-item'
|
|
26
|
+
} from '../components/Dialog'
|
|
27
|
+
import { DialogCloseIconTrigger } from '../components/Dialog.client'
|
|
31
28
|
|
|
32
29
|
/**
|
|
33
|
-
* This module provides
|
|
34
|
-
* @module
|
|
30
|
+
* This module provides a context and hook for the cta modal.
|
|
31
|
+
* @module
|
|
35
32
|
*/
|
|
36
33
|
|
|
34
|
+
export interface ShowCTAModalOptions {
|
|
35
|
+
/**
|
|
36
|
+
* The heading of the cta modal.
|
|
37
|
+
*/
|
|
38
|
+
heading: string
|
|
39
|
+
/**
|
|
40
|
+
* The description of the cta modal.
|
|
41
|
+
*/
|
|
42
|
+
description?: string
|
|
43
|
+
/**
|
|
44
|
+
* The icon used for the modal Avatar.
|
|
45
|
+
*/
|
|
46
|
+
icon?: ReactNode
|
|
47
|
+
/**
|
|
48
|
+
* The actions for the cta modal. Max of 2 actions.
|
|
49
|
+
*/
|
|
50
|
+
actions: {
|
|
51
|
+
text: string
|
|
52
|
+
onClick: MouseEventHandler<HTMLButtonElement>
|
|
53
|
+
}[]
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export interface CTAModalValue {
|
|
57
|
+
show: (options: ShowCTAModalOptions) => void
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
const CTAModalContext = createContext<CTAModalValue | null>(null)
|
|
61
|
+
|
|
62
|
+
export type CTAModalProviderProps = PropsWithChildren<unknown>
|
|
63
|
+
|
|
37
64
|
/**
|
|
38
65
|
* Provides a CTA modal to the app.
|
|
39
66
|
* @see https://cerberus.digitalu.design/react/cta-modal
|
|
@@ -66,7 +93,7 @@ import { TriggerItem } from './trigger-item'
|
|
|
66
93
|
* }, [cta])
|
|
67
94
|
* ```
|
|
68
95
|
*/
|
|
69
|
-
export function CTAModal(props: PropsWithChildren<
|
|
96
|
+
export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
|
|
70
97
|
const [open, setOpen] = useState<boolean>(false)
|
|
71
98
|
const [content, setContent] = useState<ShowCTAModalOptions | null>(null)
|
|
72
99
|
const confirmIcon = content?.icon
|
|
@@ -76,6 +103,12 @@ export function CTAModal(props: PropsWithChildren<object>) {
|
|
|
76
103
|
|
|
77
104
|
const handleShow = useCallback(
|
|
78
105
|
(options: ShowCTAModalOptions) => {
|
|
106
|
+
const maxActions = 2
|
|
107
|
+
if (options.actions.length > maxActions) {
|
|
108
|
+
throw new Error(
|
|
109
|
+
`CTA Modal only supports a maximum of ${maxActions} actions.`,
|
|
110
|
+
)
|
|
111
|
+
}
|
|
79
112
|
setContent({ ...options })
|
|
80
113
|
setOpen(true)
|
|
81
114
|
},
|
|
@@ -84,10 +117,10 @@ export function CTAModal(props: PropsWithChildren<object>) {
|
|
|
84
117
|
|
|
85
118
|
const handleActionClick = useCallback(
|
|
86
119
|
(event: MouseEvent<HTMLButtonElement>) => {
|
|
87
|
-
const index =
|
|
88
|
-
const
|
|
89
|
-
const
|
|
90
|
-
|
|
120
|
+
const index = event.currentTarget.getAttribute('data-index')
|
|
121
|
+
const action = content?.actions[Number(index)]
|
|
122
|
+
const { onClick } = action || {}
|
|
123
|
+
onClick?.(event)
|
|
91
124
|
setOpen(false)
|
|
92
125
|
},
|
|
93
126
|
[content, setOpen],
|
|
@@ -130,21 +163,22 @@ export function CTAModal(props: PropsWithChildren<object>) {
|
|
|
130
163
|
</VStack>
|
|
131
164
|
|
|
132
165
|
<HStack gap="md" w="full">
|
|
133
|
-
<
|
|
134
|
-
{(action, index) => (
|
|
135
|
-
<
|
|
166
|
+
<Show when={Boolean(content?.actions?.length)}>
|
|
167
|
+
{content?.actions?.map((action, index) => (
|
|
168
|
+
<Button
|
|
169
|
+
data-index={index}
|
|
170
|
+
className={css({
|
|
171
|
+
w: '1/2',
|
|
172
|
+
})}
|
|
136
173
|
key={index}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}
|
|
174
|
+
onClick={handleActionClick}
|
|
175
|
+
shape="rounded"
|
|
176
|
+
usage="outlined"
|
|
141
177
|
>
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
)}
|
|
147
|
-
</For>
|
|
178
|
+
{action.text}
|
|
179
|
+
</Button>
|
|
180
|
+
))}
|
|
181
|
+
</Show>
|
|
148
182
|
</HStack>
|
|
149
183
|
</VStack>
|
|
150
184
|
</Dialog>
|
package/src/index.ts
CHANGED
|
@@ -29,7 +29,6 @@ export * from './components/Avatar'
|
|
|
29
29
|
export * from './components/button/index'
|
|
30
30
|
export * from './components/checkbox/index'
|
|
31
31
|
export * from './components/CircularProgress'
|
|
32
|
-
export * from './components/cta-dialog/index'
|
|
33
32
|
export * from './components/DatePicker.client'
|
|
34
33
|
export * from './components/DatePicker.server'
|
|
35
34
|
export * from './components/Dialog'
|
|
@@ -69,6 +68,7 @@ export * from './components/Tooltip'
|
|
|
69
68
|
|
|
70
69
|
export * from './context/cerberus'
|
|
71
70
|
export * from './context/confirm-modal'
|
|
71
|
+
export * from './context/cta-modal'
|
|
72
72
|
export * from './context/feature-flags'
|
|
73
73
|
export * from './context/navMenu'
|
|
74
74
|
export * from './context/notification-center'
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
"use client";
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __export = (target, all) => {
|
|
8
|
-
for (var name in all)
|
|
9
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
-
};
|
|
11
|
-
var __copyProps = (to, from, except, desc) => {
|
|
12
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
-
for (let key of __getOwnPropNames(from))
|
|
14
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
-
}
|
|
17
|
-
return to;
|
|
18
|
-
};
|
|
19
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
-
|
|
21
|
-
// src/components/cta-dialog/context.tsx
|
|
22
|
-
var context_exports = {};
|
|
23
|
-
__export(context_exports, {
|
|
24
|
-
CTAModalContext: () => CTAModalContext
|
|
25
|
-
});
|
|
26
|
-
module.exports = __toCommonJS(context_exports);
|
|
27
|
-
var import_react = require("react");
|
|
28
|
-
var CTAModalContext = (0, import_react.createContext)(null);
|
|
29
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
30
|
-
0 && (module.exports = {
|
|
31
|
-
CTAModalContext
|
|
32
|
-
});
|
|
33
|
-
//# sourceMappingURL=context.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/cta-dialog/context.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, type ReactNode } from 'react'\nimport type { CTAModalActionReturn } from './utils'\n\n/**\n * This module provides the context for the cta modal.\n * @module\n */\n\nexport interface ShowCTAModalOptions {\n /**\n * The heading of the cta modal.\n */\n heading: string\n /**\n * The description of the cta modal.\n */\n description?: string\n /**\n * The icon used for the modal Avatar.\n */\n icon?: ReactNode\n /**\n * The actions for the cta modal. Requires 2 actions.\n */\n actions: CTAModalActionReturn\n}\n\nexport interface CTAModalValue {\n show: (options: ShowCTAModalOptions) => void\n}\n\nexport const CTAModalContext = createContext<CTAModalValue | null>(null)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA8C;AA+BvC,IAAM,sBAAkB,4BAAoC,IAAI;","names":[]}
|