@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.
Files changed (64) hide show
  1. package/build/legacy/_tsup-dts-rollup.d.cts +25 -82
  2. package/build/legacy/components/for.cjs +4 -3
  3. package/build/legacy/components/for.cjs.map +1 -1
  4. package/build/legacy/{components/cta-dialog/provider.cjs → context/cta-modal.cjs} +150 -187
  5. package/build/legacy/context/cta-modal.cjs.map +1 -0
  6. package/build/legacy/index.cjs +715 -771
  7. package/build/legacy/index.cjs.map +1 -1
  8. package/build/modern/_tsup-dts-rollup.d.ts +25 -82
  9. package/build/modern/{chunk-O542MPR7.js → chunk-CMYD5KWA.js} +4 -4
  10. package/build/modern/{chunk-Z4342DRO.js → chunk-FMRWRVUS.js} +4 -4
  11. package/build/modern/chunk-IIH363FO.js +13 -0
  12. package/build/modern/chunk-IIH363FO.js.map +1 -0
  13. package/build/modern/{chunk-6ICNCCPD.js → chunk-P3SF56LT.js} +4 -4
  14. package/build/modern/{chunk-QEM3M4N3.js → chunk-ZDANBCM3.js} +31 -22
  15. package/build/modern/chunk-ZDANBCM3.js.map +1 -0
  16. package/build/modern/components/for.js +1 -1
  17. package/build/modern/components/select/index.js +2 -2
  18. package/build/modern/components/select/select.js +2 -2
  19. package/build/modern/context/cta-modal.js +19 -0
  20. package/build/modern/context/notification-center.js +2 -2
  21. package/build/modern/context/prompt-modal.js +2 -2
  22. package/build/modern/index.js +76 -83
  23. package/build/modern/index.js.map +1 -1
  24. package/package.json +2 -2
  25. package/src/components/for.tsx +18 -13
  26. package/src/{components/cta-dialog/provider.tsx → context/cta-modal.tsx} +68 -34
  27. package/src/index.ts +1 -1
  28. package/build/legacy/components/cta-dialog/context.cjs +0 -33
  29. package/build/legacy/components/cta-dialog/context.cjs.map +0 -1
  30. package/build/legacy/components/cta-dialog/index.cjs +0 -433
  31. package/build/legacy/components/cta-dialog/index.cjs.map +0 -1
  32. package/build/legacy/components/cta-dialog/provider.cjs.map +0 -1
  33. package/build/legacy/components/cta-dialog/trigger-item.cjs +0 -99
  34. package/build/legacy/components/cta-dialog/trigger-item.cjs.map +0 -1
  35. package/build/legacy/components/cta-dialog/utils.cjs +0 -47
  36. package/build/legacy/components/cta-dialog/utils.cjs.map +0 -1
  37. package/build/modern/chunk-4LSTU6WU.js +0 -8
  38. package/build/modern/chunk-4LSTU6WU.js.map +0 -1
  39. package/build/modern/chunk-DXOKSZVQ.js +0 -12
  40. package/build/modern/chunk-DXOKSZVQ.js.map +0 -1
  41. package/build/modern/chunk-IKDXADLX.js +0 -1
  42. package/build/modern/chunk-MVO2GNUA.js +0 -47
  43. package/build/modern/chunk-MVO2GNUA.js.map +0 -1
  44. package/build/modern/chunk-PLHYOCY3.js +0 -23
  45. package/build/modern/chunk-PLHYOCY3.js.map +0 -1
  46. package/build/modern/chunk-QEM3M4N3.js.map +0 -1
  47. package/build/modern/components/cta-dialog/context.js +0 -8
  48. package/build/modern/components/cta-dialog/context.js.map +0 -1
  49. package/build/modern/components/cta-dialog/index.js +0 -26
  50. package/build/modern/components/cta-dialog/index.js.map +0 -1
  51. package/build/modern/components/cta-dialog/provider.js +0 -22
  52. package/build/modern/components/cta-dialog/provider.js.map +0 -1
  53. package/build/modern/components/cta-dialog/trigger-item.js +0 -10
  54. package/build/modern/components/cta-dialog/trigger-item.js.map +0 -1
  55. package/build/modern/components/cta-dialog/utils.js +0 -7
  56. package/build/modern/components/cta-dialog/utils.js.map +0 -1
  57. package/src/components/cta-dialog/context.tsx +0 -34
  58. package/src/components/cta-dialog/index.ts +0 -2
  59. package/src/components/cta-dialog/trigger-item.tsx +0 -53
  60. package/src/components/cta-dialog/utils.ts +0 -57
  61. /package/build/modern/{chunk-O542MPR7.js.map → chunk-CMYD5KWA.js.map} +0 -0
  62. /package/build/modern/{chunk-Z4342DRO.js.map → chunk-FMRWRVUS.js.map} +0 -0
  63. /package/build/modern/{chunk-6ICNCCPD.js.map → chunk-P3SF56LT.js.map} +0 -0
  64. /package/build/modern/{chunk-IKDXADLX.js.map → context/cta-modal.js.map} +0 -0
@@ -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-Z4342DRO.js";
39
+ } from "./chunk-FMRWRVUS.js";
40
40
  import {
41
41
  PromptModal,
42
42
  usePromptModal
43
- } from "./chunk-O542MPR7.js";
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
- FileStatus,
88
- processStatus
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 "./chunk-V3M3ZOQI.js";
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
- Radio
174
- } from "./chunk-STLN7BMJ.js";
175
- import {
176
- RadioParts
177
- } from "./chunk-FUL2VRDU.js";
192
+ Avatar
193
+ } from "./chunk-SXLPDPOZ.js";
178
194
  import {
179
- RadioGroup,
180
- RadioGroupIndicator,
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-6ICNCCPD.js";
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/cta-dialog/index'\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/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":[]}
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-next-270c731",
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-next-270c731"
29
+ "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.16.0"
30
30
  },
31
31
  "publishConfig": {
32
32
  "access": "public"
@@ -1,18 +1,18 @@
1
- import type { ReactNode, JSX } from 'react'
1
+ import type { ReactNode } from 'react'
2
2
 
3
- export interface ForProps<T extends readonly unknown[], U extends JSX.Element> {
3
+ export interface ForProps<T> {
4
4
  /**
5
- * The array to iterate over.
5
+ * The array to iterate over
6
6
  */
7
- each: T | undefined | null | false
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?: JSX.Element
11
+ fallback?: ReactNode
12
12
  /**
13
- * The children to render for each item in the array.
13
+ * The render function to render each item in the array
14
14
  */
15
- children: (item: T[number], index: number) => U
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<T extends readonly unknown[], U extends JSX.Element>(
31
- props: ForProps<T, U>,
32
- ) {
33
- if (!props.each || !props.each.length) {
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(props.children) as ReactNode
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 { HStack, VStack } from '@cerberus/styled-system/jsx'
13
- import { useCerberusContext } from '../../context/cerberus'
14
- import { Show } from '../Show'
15
- import { For } from '../for'
16
- import { Avatar } from '../Avatar'
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 the provider and hook for the cta modal.
34
- * @module 'react/cta-modal/provider'
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<object>) {
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 = Number(event.currentTarget.getAttribute('data-index'))
88
- const contentActions = content?.actions as CTAModalActionReturn
89
- const action = contentActions._actions[index] as CTAButtonAction
90
- action?.handleClick?.(event)
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
- <For each={content?.actions._actions}>
134
- {(action, index) => (
135
- <Show
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
- when={content?.actions?.type === 'btnAction'}
138
- fallback={
139
- <TriggerItem asChild>{action as ReactNode}</TriggerItem>
140
- }
174
+ onClick={handleActionClick}
175
+ shape="rounded"
176
+ usage="outlined"
141
177
  >
142
- <TriggerItem data-index={index} onClick={handleActionClick}>
143
- {(action as CTAButtonAction)?.text}
144
- </TriggerItem>
145
- </Show>
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":[]}