@cloudscape-design/components-themeable 3.0.803 → 3.0.805

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 (46) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/app-layout/visual-refresh-toolbar/skeleton/styles.scss +1 -1
  3. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +19 -19
  4. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +40 -40
  5. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +19 -19
  6. package/lib/internal/template/collection-preferences/content-display/index.d.ts.map +1 -1
  7. package/lib/internal/template/collection-preferences/content-display/index.js +15 -8
  8. package/lib/internal/template/collection-preferences/content-display/index.js.map +1 -1
  9. package/lib/internal/template/collection-preferences/content-display/utils.d.ts +2 -2
  10. package/lib/internal/template/collection-preferences/content-display/utils.d.ts.map +1 -1
  11. package/lib/internal/template/collection-preferences/content-display/utils.js +13 -4
  12. package/lib/internal/template/collection-preferences/content-display/utils.js.map +1 -1
  13. package/lib/internal/template/form/index.d.ts.map +1 -1
  14. package/lib/internal/template/form/index.js +3 -3
  15. package/lib/internal/template/form/index.js.map +1 -1
  16. package/lib/internal/template/internal/analytics/components/analytics-funnel.d.ts +2 -0
  17. package/lib/internal/template/internal/analytics/components/analytics-funnel.d.ts.map +1 -1
  18. package/lib/internal/template/internal/analytics/components/analytics-funnel.js +48 -5
  19. package/lib/internal/template/internal/analytics/components/analytics-funnel.js.map +1 -1
  20. package/lib/internal/template/internal/analytics/hooks/use-funnel.d.ts +6 -21
  21. package/lib/internal/template/internal/analytics/hooks/use-funnel.d.ts.map +1 -1
  22. package/lib/internal/template/internal/analytics/hooks/use-funnel.js +0 -7
  23. package/lib/internal/template/internal/analytics/hooks/use-funnel.js.map +1 -1
  24. package/lib/internal/template/internal/analytics/interfaces.d.ts +3 -2
  25. package/lib/internal/template/internal/analytics/interfaces.d.ts.map +1 -1
  26. package/lib/internal/template/internal/analytics/interfaces.js.map +1 -1
  27. package/lib/internal/template/internal/base-component/styles.scoped.css +48 -0
  28. package/lib/internal/template/internal/environment.js +1 -1
  29. package/lib/internal/template/internal/environment.json +1 -1
  30. package/lib/internal/template/internal/generated/styles/tokens.d.ts +5 -0
  31. package/lib/internal/template/internal/generated/styles/tokens.js +5 -0
  32. package/lib/internal/template/internal/generated/theming/index.cjs +134 -0
  33. package/lib/internal/template/internal/generated/theming/index.cjs.d.ts +16 -0
  34. package/lib/internal/template/internal/generated/theming/index.d.ts +16 -0
  35. package/lib/internal/template/internal/generated/theming/index.js +134 -0
  36. package/lib/internal/template/modal/index.d.ts.map +1 -1
  37. package/lib/internal/template/modal/index.js +22 -2
  38. package/lib/internal/template/modal/index.js.map +1 -1
  39. package/lib/internal/template/modal/interfaces.d.ts +14 -0
  40. package/lib/internal/template/modal/interfaces.d.ts.map +1 -1
  41. package/lib/internal/template/modal/interfaces.js.map +1 -1
  42. package/lib/internal/template/modal/internal.d.ts +9 -0
  43. package/lib/internal/template/modal/internal.d.ts.map +1 -1
  44. package/lib/internal/template/modal/internal.js +20 -6
  45. package/lib/internal/template/modal/internal.js.map +1 -1
  46. package/package.json +1 -1
@@ -1069,6 +1069,22 @@ export var preset = {
1069
1069
  "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
1070
1070
  "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)"
1071
1071
  },
1072
+ "colorBackgroundChatBubbleOutgoing": {
1073
+ "light": "transparent",
1074
+ "dark": "transparent"
1075
+ },
1076
+ "colorBackgroundChatBubbleIncoming": {
1077
+ "light": "{colorGrey150}",
1078
+ "dark": "{colorGrey850}"
1079
+ },
1080
+ "colorTextChatBubbleOutgoing": {
1081
+ "light": "{colorTextBodyDefault}",
1082
+ "dark": "{colorTextBodyDefault}"
1083
+ },
1084
+ "colorTextChatBubbleIncoming": {
1085
+ "light": "{colorTextBodyDefault}",
1086
+ "dark": "{colorTextBodyDefault}"
1087
+ },
1072
1088
  "colorBorderButtonNormalActive": {
1073
1089
  "light": "{colorBlue800}",
1074
1090
  "dark": "{colorBlue400}"
@@ -1855,6 +1871,7 @@ export var preset = {
1855
1871
  "borderRadiusTabsFocusRing": "20px",
1856
1872
  "borderRadiusTiles": "{borderRadiusInput}",
1857
1873
  "borderRadiusToken": "{borderRadiusInput}",
1874
+ "borderRadiusChatBubble": "2px",
1858
1875
  "borderRadiusTutorialPanelItem": "{borderRadiusInput}",
1859
1876
  "borderTableStickyWidth": "1px",
1860
1877
  "borderLinkFocusRingOutline": "0",
@@ -3287,6 +3304,22 @@ export var preset = {
3287
3304
  "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
3288
3305
  "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)"
3289
3306
  },
3307
+ "colorBackgroundChatBubbleOutgoing": {
3308
+ "light": "transparent",
3309
+ "dark": "transparent"
3310
+ },
3311
+ "colorBackgroundChatBubbleIncoming": {
3312
+ "light": "{colorGrey850}",
3313
+ "dark": "{colorGrey850}"
3314
+ },
3315
+ "colorTextChatBubbleOutgoing": {
3316
+ "light": "{colorTextBodyDefault}",
3317
+ "dark": "{colorTextBodyDefault}"
3318
+ },
3319
+ "colorTextChatBubbleIncoming": {
3320
+ "light": "{colorTextBodyDefault}",
3321
+ "dark": "{colorTextBodyDefault}"
3322
+ },
3290
3323
  "colorBorderButtonNormalActive": {
3291
3324
  "light": "{colorBlue400}",
3292
3325
  "dark": "{colorBlue400}"
@@ -4425,6 +4458,22 @@ export var preset = {
4425
4458
  "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
4426
4459
  "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)"
4427
4460
  },
4461
+ "colorBackgroundChatBubbleOutgoing": {
4462
+ "light": "transparent",
4463
+ "dark": "transparent"
4464
+ },
4465
+ "colorBackgroundChatBubbleIncoming": {
4466
+ "light": "{colorGrey850}",
4467
+ "dark": "{colorGrey850}"
4468
+ },
4469
+ "colorTextChatBubbleOutgoing": {
4470
+ "light": "{colorTextBodyDefault}",
4471
+ "dark": "{colorTextBodyDefault}"
4472
+ },
4473
+ "colorTextChatBubbleIncoming": {
4474
+ "light": "{colorTextBodyDefault}",
4475
+ "dark": "{colorTextBodyDefault}"
4476
+ },
4428
4477
  "colorBorderButtonNormalActive": {
4429
4478
  "light": "{colorBlue400}",
4430
4479
  "dark": "{colorBlue400}"
@@ -5495,6 +5544,22 @@ export var preset = {
5495
5544
  "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
5496
5545
  "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)"
5497
5546
  },
5547
+ "colorBackgroundChatBubbleOutgoing": {
5548
+ "light": "transparent",
5549
+ "dark": "transparent"
5550
+ },
5551
+ "colorBackgroundChatBubbleIncoming": {
5552
+ "light": "{colorGrey150}",
5553
+ "dark": "{colorGrey850}"
5554
+ },
5555
+ "colorTextChatBubbleOutgoing": {
5556
+ "light": "{colorTextBodyDefault}",
5557
+ "dark": "{colorTextBodyDefault}"
5558
+ },
5559
+ "colorTextChatBubbleIncoming": {
5560
+ "light": "{colorTextBodyDefault}",
5561
+ "dark": "{colorTextBodyDefault}"
5562
+ },
5498
5563
  "colorBorderButtonNormalActive": {
5499
5564
  "light": "{colorWhite}",
5500
5565
  "dark": "{colorWhite}"
@@ -6565,6 +6630,22 @@ export var preset = {
6565
6630
  "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
6566
6631
  "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)"
6567
6632
  },
6633
+ "colorBackgroundChatBubbleOutgoing": {
6634
+ "light": "transparent",
6635
+ "dark": "transparent"
6636
+ },
6637
+ "colorBackgroundChatBubbleIncoming": {
6638
+ "light": "{colorGrey150}",
6639
+ "dark": "{colorGrey850}"
6640
+ },
6641
+ "colorTextChatBubbleOutgoing": {
6642
+ "light": "{colorTextBodyDefault}",
6643
+ "dark": "{colorTextBodyDefault}"
6644
+ },
6645
+ "colorTextChatBubbleIncoming": {
6646
+ "light": "{colorTextBodyDefault}",
6647
+ "dark": "{colorTextBodyDefault}"
6648
+ },
6568
6649
  "colorBorderButtonNormalActive": {
6569
6650
  "light": "{colorTextButtonNormalHover}",
6570
6651
  "dark": "{colorTextButtonNormalHover}"
@@ -7635,6 +7716,22 @@ export var preset = {
7635
7716
  "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
7636
7717
  "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)"
7637
7718
  },
7719
+ "colorBackgroundChatBubbleOutgoing": {
7720
+ "light": "transparent",
7721
+ "dark": "transparent"
7722
+ },
7723
+ "colorBackgroundChatBubbleIncoming": {
7724
+ "light": "{colorGrey150}",
7725
+ "dark": "{colorGrey850}"
7726
+ },
7727
+ "colorTextChatBubbleOutgoing": {
7728
+ "light": "{colorTextBodyDefault}",
7729
+ "dark": "{colorTextBodyDefault}"
7730
+ },
7731
+ "colorTextChatBubbleIncoming": {
7732
+ "light": "{colorTextBodyDefault}",
7733
+ "dark": "{colorTextBodyDefault}"
7734
+ },
7638
7735
  "colorBorderButtonNormalActive": {
7639
7736
  "light": "{colorTextButtonNormalHover}",
7640
7737
  "dark": "{colorTextButtonNormalHover}"
@@ -8707,6 +8804,22 @@ export var preset = {
8707
8804
  "light": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)",
8708
8805
  "dark": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)"
8709
8806
  },
8807
+ "colorBackgroundChatBubbleOutgoing": {
8808
+ "light": "transparent",
8809
+ "dark": "transparent"
8810
+ },
8811
+ "colorBackgroundChatBubbleIncoming": {
8812
+ "light": "{colorGrey850}",
8813
+ "dark": "{colorGrey850}"
8814
+ },
8815
+ "colorTextChatBubbleOutgoing": {
8816
+ "light": "{colorTextBodyDefault}",
8817
+ "dark": "{colorTextBodyDefault}"
8818
+ },
8819
+ "colorTextChatBubbleIncoming": {
8820
+ "light": "{colorTextBodyDefault}",
8821
+ "dark": "{colorTextBodyDefault}"
8822
+ },
8710
8823
  "colorBorderButtonNormalActive": {
8711
8824
  "light": "{colorTextButtonNormalHover}",
8712
8825
  "dark": "{colorTextButtonNormalHover}"
@@ -9659,6 +9772,10 @@ export var preset = {
9659
9772
  "colorBackgroundAvatarDefault": "color",
9660
9773
  "colorTextAvatar": "color",
9661
9774
  "colorBackgroundLoadingBarGenAi": "color",
9775
+ "colorBackgroundChatBubbleOutgoing": "color",
9776
+ "colorBackgroundChatBubbleIncoming": "color",
9777
+ "colorTextChatBubbleOutgoing": "color",
9778
+ "colorTextChatBubbleIncoming": "color",
9662
9779
  "colorBorderButtonNormalActive": "color",
9663
9780
  "colorBorderButtonNormalDefault": "color",
9664
9781
  "colorBorderToggleButtonNormalPressed": "color",
@@ -10109,6 +10226,8 @@ export var preset = {
10109
10226
  "colorBackgroundStatusSuccess",
10110
10227
  "colorBackgroundStatusWarning",
10111
10228
  "colorBackgroundToggleCheckedDisabled",
10229
+ "colorTextChatBubbleOutgoing",
10230
+ "colorTextChatBubbleIncoming",
10112
10231
  "colorBorderButtonNormalActive",
10113
10232
  "colorBorderButtonNormalDefault",
10114
10233
  "colorBorderToggleButtonNormalPressed",
@@ -10435,6 +10554,10 @@ export var preset = {
10435
10554
  "colorBackgroundAvatarDefault",
10436
10555
  "colorTextAvatar",
10437
10556
  "colorBackgroundLoadingBarGenAi",
10557
+ "colorBackgroundChatBubbleOutgoing",
10558
+ "colorBackgroundChatBubbleIncoming",
10559
+ "colorTextChatBubbleOutgoing",
10560
+ "colorTextChatBubbleIncoming",
10438
10561
  "colorBorderButtonNormalActive",
10439
10562
  "colorBorderButtonNormalDefault",
10440
10563
  "colorBorderToggleButtonNormalPressed",
@@ -10558,6 +10681,7 @@ export var preset = {
10558
10681
  "borderRadiusTabsFocusRing",
10559
10682
  "borderRadiusTiles",
10560
10683
  "borderRadiusToken",
10684
+ "borderRadiusChatBubble",
10561
10685
  "borderRadiusTutorialPanelItem",
10562
10686
  "motionDurationAvatarGenAiGradient",
10563
10687
  "motionDurationAvatarLoadingDots",
@@ -10893,6 +11017,10 @@ export var preset = {
10893
11017
  "colorBackgroundAvatarDefault": "color-background-avatar-default",
10894
11018
  "colorTextAvatar": "color-text-avatar",
10895
11019
  "colorBackgroundLoadingBarGenAi": "color-background-loading-bar-gen-ai",
11020
+ "colorBackgroundChatBubbleOutgoing": "color-background-chat-bubble-outgoing",
11021
+ "colorBackgroundChatBubbleIncoming": "color-background-chat-bubble-incoming",
11022
+ "colorTextChatBubbleOutgoing": "color-text-chat-bubble-outgoing",
11023
+ "colorTextChatBubbleIncoming": "color-text-chat-bubble-incoming",
10896
11024
  "colorBorderButtonNormalActive": "color-border-button-normal-active",
10897
11025
  "colorBorderButtonNormalDefault": "color-border-button-normal-default",
10898
11026
  "colorBorderToggleButtonNormalPressed": "color-border-toggle-button-normal-pressed",
@@ -11151,6 +11279,7 @@ export var preset = {
11151
11279
  "borderRadiusTabsFocusRing": "border-radius-tabs-focus-ring",
11152
11280
  "borderRadiusTiles": "border-radius-tiles",
11153
11281
  "borderRadiusToken": "border-radius-token",
11282
+ "borderRadiusChatBubble": "border-radius-chat-bubble",
11154
11283
  "borderRadiusTutorialPanelItem": "border-radius-tutorial-panel-item",
11155
11284
  "borderTableStickyWidth": "border-table-sticky-width",
11156
11285
  "borderLinkFocusRingOutline": "border-link-focus-ring-outline",
@@ -11620,6 +11749,10 @@ export var preset = {
11620
11749
  "colorBackgroundAvatarDefault": "--color-background-avatar-default-rci9zy",
11621
11750
  "colorTextAvatar": "--color-text-avatar-jddpvm",
11622
11751
  "colorBackgroundLoadingBarGenAi": "--color-background-loading-bar-gen-ai-7qfi9s",
11752
+ "colorBackgroundChatBubbleOutgoing": "--color-background-chat-bubble-outgoing-pfqan2",
11753
+ "colorBackgroundChatBubbleIncoming": "--color-background-chat-bubble-incoming-brq006",
11754
+ "colorTextChatBubbleOutgoing": "--color-text-chat-bubble-outgoing-bvbr0v",
11755
+ "colorTextChatBubbleIncoming": "--color-text-chat-bubble-incoming-x2kig8",
11623
11756
  "colorBorderButtonNormalActive": "--color-border-button-normal-active-mn0ayd",
11624
11757
  "colorBorderButtonNormalDefault": "--color-border-button-normal-default-uzqi0v",
11625
11758
  "colorBorderToggleButtonNormalPressed": "--color-border-toggle-button-normal-pressed-lylxt2",
@@ -11878,6 +12011,7 @@ export var preset = {
11878
12011
  "borderRadiusTabsFocusRing": "--border-radius-tabs-focus-ring-1q0rjo",
11879
12012
  "borderRadiusTiles": "--border-radius-tiles-60y8e6",
11880
12013
  "borderRadiusToken": "--border-radius-token-923jqq",
12014
+ "borderRadiusChatBubble": "--border-radius-chat-bubble-ur269r",
11881
12015
  "borderRadiusTutorialPanelItem": "--border-radius-tutorial-panel-item-b44p0a",
11882
12016
  "borderTableStickyWidth": "--border-table-sticky-width-87kf12",
11883
12017
  "borderLinkFocusRingOutline": "--border-link-focus-ring-outline-kkfop6",
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modal/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAe,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,eAKtE"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modal/index.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AA0CtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAe,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,eA2BtE"}
@@ -2,14 +2,34 @@ import { __rest } from "tslib";
2
2
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  import React from 'react';
5
+ import { AnalyticsFunnel, AnalyticsFunnelStep, AnalyticsFunnelSubStep, } from '../internal/analytics/components/analytics-funnel';
6
+ import { useFunnel } from '../internal/analytics/hooks/use-funnel';
7
+ import { getAnalyticsMetadataProps } from '../internal/base-component';
5
8
  import useBaseComponent from '../internal/hooks/use-base-component';
6
9
  import { applyDisplayName } from '../internal/utils/apply-display-name';
7
- import InternalModal from './internal';
10
+ import InternalModal, { InternalModalAsFunnel } from './internal';
11
+ import styles from './styles.css.js';
12
+ function ModalWithAnalyticsFunnel(_a) {
13
+ var { analyticsMetadata, baseComponentProps, size = 'medium' } = _a, props = __rest(_a, ["analyticsMetadata", "baseComponentProps", "size"]);
14
+ return (React.createElement(AnalyticsFunnel, { mounted: props.visible, funnelIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, funnelFlowType: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.flowType, funnelErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, funnelResourceType: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.resourceType, funnelType: "modal", optionalStepNumbers: [], totalFunnelSteps: 1, funnelNameSelectors: [`.${styles['header--text']}`] },
15
+ React.createElement(AnalyticsFunnelStep, { mounted: props.visible, stepIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, stepErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, stepNumber: 1 },
16
+ React.createElement(AnalyticsFunnelSubStep, { subStepIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, subStepErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext },
17
+ React.createElement(InternalModalAsFunnel, Object.assign({ size: size }, props, baseComponentProps, { __injectAnalyticsComponentMetadata: true }))))));
18
+ }
8
19
  export default function Modal(_a) {
9
20
  var { size = 'medium' } = _a, props = __rest(_a, ["size"]);
21
+ const { isInFunnel } = useFunnel();
22
+ const analyticsMetadata = getAnalyticsMetadataProps(props);
10
23
  const baseComponentProps = useBaseComponent('Modal', {
11
24
  props: { size, disableContentPaddings: props.disableContentPaddings },
12
- });
25
+ metadata: {
26
+ hasResourceType: Boolean(analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.resourceType),
27
+ hasInstanceIdentifier: Boolean(analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier),
28
+ },
29
+ }, analyticsMetadata);
30
+ if (!isInFunnel) {
31
+ return (React.createElement(ModalWithAnalyticsFunnel, Object.assign({ analyticsMetadata: analyticsMetadata, baseComponentProps: baseComponentProps, size: size }, props)));
32
+ }
13
33
  return React.createElement(InternalModal, Object.assign({ size: size }, props, baseComponentProps, { __injectAnalyticsComponentMetadata: true }));
14
34
  }
15
35
  applyDisplayName(Modal, 'Modal');
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/modal/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,MAAM,YAAY,CAAC;AAIvC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAyC;QAAzC,EAAE,IAAI,GAAG,QAAQ,OAAwB,EAAnB,KAAK,cAA3B,QAA6B,CAAF;IACvD,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,EAAE;QACnD,KAAK,EAAE,EAAE,IAAI,EAAE,sBAAsB,EAAE,KAAK,CAAC,sBAAsB,EAAE;KACtE,CAAC,CAAC;IACH,OAAO,oBAAC,aAAa,kBAAC,IAAI,EAAE,IAAI,IAAM,KAAK,EAAM,kBAAkB,IAAE,kCAAkC,EAAE,IAAI,IAAI,CAAC;AACpH,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ModalProps } from './interfaces';\nimport InternalModal from './internal';\n\nexport { ModalProps };\n\nexport default function Modal({ size = 'medium', ...props }: ModalProps) {\n const baseComponentProps = useBaseComponent('Modal', {\n props: { size, disableContentPaddings: props.disableContentPaddings },\n });\n return <InternalModal size={size} {...props} {...baseComponentProps} __injectAnalyticsComponentMetadata={true} />;\n}\n\napplyDisplayName(Modal, 'Modal');\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/modal/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAkC,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AACvG,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,EAAE,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAElE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,SAAS,wBAAwB,CAAC,EAKiE;QALjE,EAChC,iBAAiB,EACjB,kBAAkB,EAClB,IAAI,GAAG,QAAQ,OAEkF,EAD9F,KAAK,cAJwB,mDAKjC,CADS;IAER,OAAO,CACL,oBAAC,eAAe,IACd,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,gBAAgB,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,kBAAkB,EACvD,cAAc,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,QAAQ,EAC3C,kBAAkB,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,YAAY,EACnD,kBAAkB,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,YAAY,EACnD,UAAU,EAAC,OAAO,EAClB,mBAAmB,EAAE,EAAE,EACvB,gBAAgB,EAAE,CAAC,EACnB,mBAAmB,EAAE,CAAC,IAAI,MAAM,CAAC,cAAc,CAAC,EAAE,CAAC;QAEnD,oBAAC,mBAAmB,IAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,cAAc,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,kBAAkB,EACrD,gBAAgB,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,YAAY,EACjD,UAAU,EAAE,CAAC;YAEb,oBAAC,sBAAsB,IACrB,iBAAiB,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,kBAAkB,EACxD,mBAAmB,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,YAAY;gBAEpD,oBAAC,qBAAqB,kBACpB,IAAI,EAAE,IAAI,IACN,KAAK,EACL,kBAAkB,IACtB,kCAAkC,EAAE,IAAI,IACxC,CACqB,CACL,CACN,CACnB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAyC;QAAzC,EAAE,IAAI,GAAG,QAAQ,OAAwB,EAAnB,KAAK,cAA3B,QAA6B,CAAF;IACvD,MAAM,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,CAAC;IACnC,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,KAAuC,CAAC,CAAC;IAC7F,MAAM,kBAAkB,GAAG,gBAAgB,CACzC,OAAO,EACP;QACE,KAAK,EAAE,EAAE,IAAI,EAAE,sBAAsB,EAAE,KAAK,CAAC,sBAAsB,EAAE;QACrE,QAAQ,EAAE;YACR,eAAe,EAAE,OAAO,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,YAAY,CAAC;YACzD,qBAAqB,EAAE,OAAO,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,kBAAkB,CAAC;SACtE;KACF,EACD,iBAAiB,CAClB,CAAC;IAEF,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,CACL,oBAAC,wBAAwB,kBACvB,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,IAAI,EAAE,IAAI,IACN,KAAK,EACT,CACH,CAAC;KACH;IAED,OAAO,oBAAC,aAAa,kBAAC,IAAI,EAAE,IAAI,IAAM,KAAK,EAAM,kBAAkB,IAAE,kCAAkC,EAAE,IAAI,IAAI,CAAC;AACpH,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport {\n AnalyticsFunnel,\n AnalyticsFunnelStep,\n AnalyticsFunnelSubStep,\n} from '../internal/analytics/components/analytics-funnel';\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ModalProps } from './interfaces';\nimport InternalModal, { InternalModalAsFunnel } from './internal';\n\nimport styles from './styles.css.js';\n\nexport { ModalProps };\n\nfunction ModalWithAnalyticsFunnel({\n analyticsMetadata,\n baseComponentProps,\n size = 'medium',\n ...props\n}: ModalProps & { analyticsMetadata: any; baseComponentProps: ReturnType<typeof useBaseComponent> }) {\n return (\n <AnalyticsFunnel\n mounted={props.visible}\n funnelIdentifier={analyticsMetadata?.instanceIdentifier}\n funnelFlowType={analyticsMetadata?.flowType}\n funnelErrorContext={analyticsMetadata?.errorContext}\n funnelResourceType={analyticsMetadata?.resourceType}\n funnelType=\"modal\"\n optionalStepNumbers={[]}\n totalFunnelSteps={1}\n funnelNameSelectors={[`.${styles['header--text']}`]}\n >\n <AnalyticsFunnelStep\n mounted={props.visible}\n stepIdentifier={analyticsMetadata?.instanceIdentifier}\n stepErrorContext={analyticsMetadata?.errorContext}\n stepNumber={1}\n >\n <AnalyticsFunnelSubStep\n subStepIdentifier={analyticsMetadata?.instanceIdentifier}\n subStepErrorContext={analyticsMetadata?.errorContext}\n >\n <InternalModalAsFunnel\n size={size}\n {...props}\n {...baseComponentProps}\n __injectAnalyticsComponentMetadata={true}\n />\n </AnalyticsFunnelSubStep>\n </AnalyticsFunnelStep>\n </AnalyticsFunnel>\n );\n}\n\nexport default function Modal({ size = 'medium', ...props }: ModalProps) {\n const { isInFunnel } = useFunnel();\n const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n const baseComponentProps = useBaseComponent(\n 'Modal',\n {\n props: { size, disableContentPaddings: props.disableContentPaddings },\n metadata: {\n hasResourceType: Boolean(analyticsMetadata?.resourceType),\n hasInstanceIdentifier: Boolean(analyticsMetadata?.instanceIdentifier),\n },\n },\n analyticsMetadata\n );\n\n if (!isInFunnel) {\n return (\n <ModalWithAnalyticsFunnel\n analyticsMetadata={analyticsMetadata}\n baseComponentProps={baseComponentProps}\n size={size}\n {...props}\n />\n );\n }\n\n return <InternalModal size={size} {...props} {...baseComponentProps} __injectAnalyticsComponentMetadata={true} />;\n}\n\napplyDisplayName(Modal, 'Modal');\n"]}
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { FlowType } from '../internal/analytics/interfaces';
2
3
  import { BaseComponentProps } from '../internal/base-component';
3
4
  import { NonCancelableEventHandler } from '../internal/events';
4
5
  export interface BaseModalProps {
@@ -60,11 +61,24 @@ export interface ModalProps extends BaseComponentProps, BaseModalProps {
60
61
  * render to an element under `document.body`.
61
62
  */
62
63
  modalRoot?: HTMLElement;
64
+ /**
65
+ * Specifies additional analytics-related metadata.
66
+ * * `instanceIdentifier` - A unique string that identifies this component instance in your application.
67
+ * * `flowType` - Identifies the type of flow represented by the component.
68
+ * * `resourceType` - Identifies the type of resource represented by the flow. **Note:** This API is currently experimental.
69
+ * @analytics
70
+ */
71
+ analyticsMetadata?: ModalProps.AnalyticsMetadata;
63
72
  }
64
73
  export declare namespace ModalProps {
65
74
  type Size = 'small' | 'medium' | 'large' | 'max';
66
75
  interface DismissDetail {
67
76
  reason: string;
68
77
  }
78
+ interface AnalyticsMetadata {
79
+ instanceIdentifier?: string;
80
+ flowType?: FlowType;
81
+ resourceType?: string;
82
+ }
69
83
  }
70
84
  //# sourceMappingURL=interfaces.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/modal/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;IAE1C;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,cAAc;IACpE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IACvB;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAChE;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD,UAAiB,aAAa;QAC5B,MAAM,EAAE,MAAM,CAAC;KAChB;CACF"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/modal/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;IAE1C;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,cAAc;IACpE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IACvB;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAChE;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC;CAClD;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD,UAAiB,aAAa;QAC5B,MAAM,EAAE,MAAM,CAAC;KAChB;IAED,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/modal/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface BaseModalProps {\n /**\n * Use this property to specify a different dynamic modal root for the dialog.\n * The function will be called when a user clicks on the trigger button.\n */\n getModalRoot?: () => Promise<HTMLElement>;\n\n /**\n * Use this property when `getModalRoot` is used to clean up the modal root\n * element after a user closes the dialog. The function receives the return value\n * of the most recent getModalRoot call as an argument.\n */\n removeModalRoot?: (rootElement: HTMLElement) => void;\n}\n\nexport interface ModalProps extends BaseComponentProps, BaseModalProps {\n /**\n * Sets the width of the modal. `max` uses variable width up to the\n * largest size allowed by the design guidelines. Other sizes\n * (`small`/`medium`/`large`) have fixed widths.\n */\n size?: ModalProps.Size;\n /**\n * Determines whether the modal is displayed on the screen. Modals are hidden by default.\n * Set this property to `true` to show them.\n */\n visible: boolean;\n /**\n * Adds an `aria-label` to the close button, for accessibility.\n * @i18n\n */\n closeAriaLabel?: string;\n /**\n * Specifies a title for the modal. Although this can be empty, we suggest that you always provide a title.\n */\n header?: React.ReactNode;\n /**\n * Body of the modal.\n */\n children?: React.ReactNode;\n /**\n * Specifies a footer for the modal. If empty, the footer isn't displayed.\n */\n footer?: React.ReactNode;\n /**\n * Determines whether the modal content has padding. If `true`, removes the default padding from the content area.\n */\n disableContentPaddings?: boolean;\n /**\n * Called when a user closes the modal by using the close icon button,\n * clicking outside of the modal, or pressing ESC.\n * The event detail contains the `reason`, which can be any of the following:\n * `['closeButton', 'overlay', 'keyboard']`.\n */\n onDismiss?: NonCancelableEventHandler<ModalProps.DismissDetail>;\n /**\n * Specifies the HTML element where the modal is rendered.\n * If neither `modalRoot` or `getModalRoot` properties are provided, the modal will\n * render to an element under `document.body`.\n */\n modalRoot?: HTMLElement;\n}\n\nexport namespace ModalProps {\n export type Size = 'small' | 'medium' | 'large' | 'max';\n\n export interface DismissDetail {\n reason: string;\n }\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/modal/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { FlowType } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface BaseModalProps {\n /**\n * Use this property to specify a different dynamic modal root for the dialog.\n * The function will be called when a user clicks on the trigger button.\n */\n getModalRoot?: () => Promise<HTMLElement>;\n\n /**\n * Use this property when `getModalRoot` is used to clean up the modal root\n * element after a user closes the dialog. The function receives the return value\n * of the most recent getModalRoot call as an argument.\n */\n removeModalRoot?: (rootElement: HTMLElement) => void;\n}\n\nexport interface ModalProps extends BaseComponentProps, BaseModalProps {\n /**\n * Sets the width of the modal. `max` uses variable width up to the\n * largest size allowed by the design guidelines. Other sizes\n * (`small`/`medium`/`large`) have fixed widths.\n */\n size?: ModalProps.Size;\n /**\n * Determines whether the modal is displayed on the screen. Modals are hidden by default.\n * Set this property to `true` to show them.\n */\n visible: boolean;\n /**\n * Adds an `aria-label` to the close button, for accessibility.\n * @i18n\n */\n closeAriaLabel?: string;\n /**\n * Specifies a title for the modal. Although this can be empty, we suggest that you always provide a title.\n */\n header?: React.ReactNode;\n /**\n * Body of the modal.\n */\n children?: React.ReactNode;\n /**\n * Specifies a footer for the modal. If empty, the footer isn't displayed.\n */\n footer?: React.ReactNode;\n /**\n * Determines whether the modal content has padding. If `true`, removes the default padding from the content area.\n */\n disableContentPaddings?: boolean;\n /**\n * Called when a user closes the modal by using the close icon button,\n * clicking outside of the modal, or pressing ESC.\n * The event detail contains the `reason`, which can be any of the following:\n * `['closeButton', 'overlay', 'keyboard']`.\n */\n onDismiss?: NonCancelableEventHandler<ModalProps.DismissDetail>;\n /**\n * Specifies the HTML element where the modal is rendered.\n * If neither `modalRoot` or `getModalRoot` properties are provided, the modal will\n * render to an element under `document.body`.\n */\n modalRoot?: HTMLElement;\n\n /**\n * Specifies additional analytics-related metadata.\n * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n * * `flowType` - Identifies the type of flow represented by the component.\n * * `resourceType` - Identifies the type of resource represented by the flow. **Note:** This API is currently experimental.\n * @analytics\n */\n analyticsMetadata?: ModalProps.AnalyticsMetadata;\n}\n\nexport namespace ModalProps {\n export type Size = 'small' | 'medium' | 'large' | 'max';\n\n export interface DismissDetail {\n reason: string;\n }\n\n export interface AnalyticsMetadata {\n instanceIdentifier?: string;\n flowType?: FlowType;\n resourceType?: string;\n }\n}\n"]}
@@ -1,9 +1,18 @@
1
1
  /// <reference types="react" />
2
+ import { FunnelStepContextValue, FunnelSubStepContextValue } from '../internal/analytics/context/analytics-context';
3
+ import { FunnelProps } from '../internal/analytics/hooks/use-funnel';
4
+ import { ButtonContextProps } from '../internal/context/button-context';
2
5
  import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
3
6
  import { SomeRequired } from '../internal/types';
4
7
  import { ModalProps } from './interfaces';
8
+ export declare function InternalModalAsFunnel(props: InternalModalProps): JSX.Element;
5
9
  type InternalModalProps = SomeRequired<ModalProps, 'size'> & InternalBaseComponentProps & {
10
+ __funnelProps?: FunnelProps;
11
+ __funnelStepProps?: FunnelStepContextValue['funnelStepProps'];
12
+ __subStepRef?: FunnelSubStepContextValue['subStepRef'];
13
+ __subStepFunnelProps?: FunnelSubStepContextValue['funnelSubStepProps'];
6
14
  __injectAnalyticsComponentMetadata?: boolean;
15
+ onButtonClick?: ButtonContextProps['onClick'];
7
16
  referrerId?: string;
8
17
  };
9
18
  export default function InternalModal({ modalRoot, getModalRoot, removeModalRoot, ...rest }: InternalModalProps): JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/modal/internal.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,GACxD,0BAA0B,GAAG;IAAE,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAErG,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,eAM9G"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/modal/internal.tsx"],"names":[],"mappings":";AAWA,OAAO,EAEL,sBAAsB,EACtB,yBAAyB,EAC1B,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,WAAW,EAA8C,MAAM,wCAAwC,CAAC;AAIjH,OAAO,EAAiB,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAKvF,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,kBAAkB,eAqB9D;AAED,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,GACxD,0BAA0B,GAAG;IAC3B,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,iBAAiB,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,CAAC,CAAC;IAC9D,YAAY,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;IACvD,oBAAoB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,CAAC;IACvE,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,aAAa,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,eAM9G"}
@@ -8,11 +8,12 @@ import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-tool
8
8
  import { InternalButton } from '../button/internal';
9
9
  import InternalHeader from '../header/internal';
10
10
  import { useInternalI18n } from '../i18n/context';
11
- import { FunnelNameSelectorContext } from '../internal/analytics/context/analytics-context';
12
- import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
11
+ import { FunnelNameSelectorContext, } from '../internal/analytics/context/analytics-context';
12
+ import { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
13
13
  import { getBaseProps } from '../internal/base-component';
14
14
  import FocusLock from '../internal/components/focus-lock';
15
15
  import Portal from '../internal/components/portal';
16
+ import { ButtonContext } from '../internal/context/button-context';
16
17
  import { ModalContext } from '../internal/context/modal-context';
17
18
  import ResetContextsForModal from '../internal/context/reset-contexts-for-modal';
18
19
  import { fireNonCancelableEvent } from '../internal/events';
@@ -25,6 +26,18 @@ import { KeyCode } from '../internal/keycode';
25
26
  import { disableBodyScrolling, enableBodyScrolling } from './body-scroll';
26
27
  import analyticsSelectors from './analytics-metadata/styles.css.js';
27
28
  import styles from './styles.css.js';
29
+ export function InternalModalAsFunnel(props) {
30
+ const { funnelProps, funnelSubmit, funnelNextOrSubmitAttempt } = useFunnel();
31
+ const { funnelStepProps } = useFunnelStep();
32
+ const { subStepRef, funnelSubStepProps } = useFunnelSubStep();
33
+ const onButtonClick = ({ variant }) => {
34
+ if (variant === 'primary') {
35
+ funnelNextOrSubmitAttempt();
36
+ funnelSubmit();
37
+ }
38
+ };
39
+ return (React.createElement(InternalModal, Object.assign({ __funnelProps: funnelProps, __funnelStepProps: funnelStepProps, __subStepRef: subStepRef, __subStepFunnelProps: funnelSubStepProps, onButtonClick: onButtonClick }, props)));
40
+ }
28
41
  export default function InternalModal(_a) {
29
42
  var { modalRoot, getModalRoot, removeModalRoot } = _a, rest = __rest(_a, ["modalRoot", "getModalRoot", "removeModalRoot"]);
30
43
  return (React.createElement(Portal, { container: modalRoot, getContainer: getModalRoot, removeContainer: removeModalRoot },
@@ -34,7 +47,7 @@ export default function InternalModal(_a) {
34
47
  // useContainerQuery needs its targeted element to exist on the first render in order to work properly.
35
48
  function PortaledModal(_a) {
36
49
  var _b;
37
- var { size, visible, header, children, footer, disableContentPaddings, onDismiss, __internalRootRef = null, __injectAnalyticsComponentMetadata, referrerId } = _a, rest = __rest(_a, ["size", "visible", "header", "children", "footer", "disableContentPaddings", "onDismiss", "__internalRootRef", "__injectAnalyticsComponentMetadata", "referrerId"]);
50
+ var { size, visible, header, children, footer, disableContentPaddings, onButtonClick = () => { }, onDismiss, __internalRootRef = null, __injectAnalyticsComponentMetadata, __funnelProps, __funnelStepProps, __subStepRef, __subStepFunnelProps, referrerId } = _a, rest = __rest(_a, ["size", "visible", "header", "children", "footer", "disableContentPaddings", "onButtonClick", "onDismiss", "__internalRootRef", "__injectAnalyticsComponentMetadata", "__funnelProps", "__funnelStepProps", "__subStepRef", "__subStepFunnelProps", "referrerId"]);
38
51
  const instanceUniqueId = useUniqueId();
39
52
  const headerId = `${rest.id || instanceUniqueId}-header`;
40
53
  const lastMouseDownElementRef = useRef(null);
@@ -100,7 +113,7 @@ function PortaledModal(_a) {
100
113
  return (React.createElement(FunnelNameSelectorContext.Provider, { value: `.${styles['header--text']}` },
101
114
  React.createElement(ResetContextsForModal, null,
102
115
  React.createElement(ModalContext.Provider, { value: { isInModal: true } },
103
- React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, isRefresh && styles.refresh), role: "dialog", "aria-modal": true, "aria-labelledby": headerId, onMouseDown: onOverlayMouseDown, onClick: onOverlayClick, ref: mergedRef, style: footerHeight ? { scrollPaddingBottom: footerHeight } : undefined, "data-awsui-referrer-id": ((_b = subStepRef.current) === null || _b === void 0 ? void 0 : _b.id) || referrerId }),
116
+ React.createElement("div", Object.assign({}, baseProps, __funnelProps, __funnelStepProps, { className: clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, isRefresh && styles.refresh), role: "dialog", "aria-modal": true, "aria-labelledby": headerId, onMouseDown: onOverlayMouseDown, onClick: onOverlayClick, ref: mergedRef, style: footerHeight ? { scrollPaddingBottom: footerHeight } : undefined, "data-awsui-referrer-id": ((_b = subStepRef.current) === null || _b === void 0 ? void 0 : _b.id) || referrerId }),
104
117
  React.createElement(FocusLock, { disabled: !visible, autoFocus: true, restoreFocus: true, className: styles['focus-lock'] },
105
118
  React.createElement("div", Object.assign({ className: clsx(styles.dialog, styles[size], styles[`breakpoint-${breakpoint}`], isRefresh && styles.refresh), onKeyDown: escKeyHandler }, metadataAttribute),
106
119
  React.createElement("div", { className: styles.container },
@@ -110,9 +123,10 @@ function PortaledModal(_a) {
110
123
  })),
111
124
  React.createElement(InternalButton, { ariaLabel: closeAriaLabel, className: styles['dismiss-control'], variant: "modal-dismiss", iconName: "close", formAction: "none", onClick: onCloseButtonClick })) },
112
125
  React.createElement("span", { id: headerId, className: styles['header--text'] }, header))),
113
- React.createElement("div", { className: clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings }) },
126
+ React.createElement("div", Object.assign({ ref: __subStepRef }, __subStepFunnelProps, { className: clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings }) }),
114
127
  children,
115
128
  React.createElement("div", { ref: stickySentinelRef })),
116
- footer && (React.createElement("div", { ref: footerRef, className: clsx(styles.footer, footerStuck && styles['footer--stuck']) }, footer))))))))));
129
+ footer && (React.createElement(ButtonContext.Provider, { value: { onClick: onButtonClick } },
130
+ React.createElement("div", { ref: footerRef, className: clsx(styles.footer, footerStuck && styles['footer--stuck']) }, footer)))))))))));
117
131
  }
118
132
  //# sourceMappingURL=internal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/modal/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,iDAAiD,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,qBAAqB,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AACtF,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAM9C,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAG1E,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAKrC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAyE;QAAzE,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,OAA+B,EAA1B,IAAI,cAAnD,gDAAqD,CAAF;IACvF,OAAO,CACL,oBAAC,MAAM,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,eAAe;QACxF,oBAAC,aAAa,oBAAK,IAAI,EAAI,CACpB,CACV,CAAC;AACJ,CAAC;AAID,qIAAqI;AACrI,uGAAuG;AACvG,SAAS,aAAa,CAAC,EAYF;;QAZE,EACrB,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,EACR,MAAM,EACN,sBAAsB,EACtB,SAAS,EACT,iBAAiB,GAAG,IAAI,EACxB,kCAAkC,EAClC,UAAU,OAES,EADhB,IAAI,cAXc,mKAYtB,CADQ;IAEP,MAAM,gBAAgB,GAAG,WAAW,EAAE,CAAC;IACvC,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,gBAAgB,SAAS,CAAC;IACzD,MAAM,uBAAuB,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACjE,MAAM,CAAC,UAAU,EAAE,cAAc,CAAC,GAAG,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAErE,MAAM,IAAI,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAEnE,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC;IAE7E,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,0BAA0B,GAA6C;QAC3E,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,IAAI,kBAAkB,CAAC,MAAM,KAAK;KAC1C,CAAC;IAEF,MAAM,iBAAiB,GAAG,kCAAkC;QAC1D,CAAC,CAAC,6BAA6B,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC;QAC1E,CAAC,CAAC,EAAE,CAAC;IAEP,mEAAmE;IACnE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,mBAAmB,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,+BAA+B;IAC/B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE;YACX,oBAAoB,EAAE,CAAC;SACxB;aAAM;YACL,mBAAmB,EAAE,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,0GAA0G;IAC1G,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;YAChC,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,OAAO,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,sBAAsB,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IAElF,MAAM,kBAAkB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACrD,uBAAuB,CAAC,OAAO,GAAG,KAAK,CAAC,MAAqB,CAAC;IAChE,CAAC,CAAC;IACF,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE;QACjD,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC;QAClC,MAAM,WAAW,GAAG,uBAAuB,CAAC,OAAO,CAAC;QAEpD,IAAI,KAAK,CAAC,MAAM,KAAK,OAAO,IAAI,WAAW,KAAK,OAAO,EAAE;YACvD,OAAO,CAAC,SAAS,CAAC,CAAC;SACpB;IACH,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,CAAC,KAA0B,EAAE,EAAE;QACnD,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,MAAM,EAAE;YACpC,OAAO,CAAC,UAAU,CAAC,CAAC;SACrB;IACH,CAAC,CAAC;IAEF,2EAA2E;IAC3E,sDAAsD;IACtD,MAAM,EAAE,GAAG,EAAE,iBAAiB,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAE1F,2EAA2E;IAC3E,gDAAgD;IAChD,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAClF,MAAM,EAAE,UAAU,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE1C,OAAO,CACL,oBAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,MAAM,CAAC,cAAc,CAAC,EAAE;QACrE,oBAAC,qBAAqB;YACpB,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE;gBAC/C,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,IAAI,EACX,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,EAC7B,SAAS,CAAC,SAAS,EACnB,SAAS,IAAI,MAAM,CAAC,OAAO,CAC5B,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,qBACC,QAAQ,EACzB,WAAW,EAAE,kBAAkB,EAC/B,OAAO,EAAE,cAAc,EACvB,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,mBAAmB,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,4BAC/C,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,EAAE,KAAI,UAAU;oBAE5D,oBAAC,SAAS,IAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC;wBACjG,2CACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,IAAI,CAAC,EACZ,MAAM,CAAC,cAAc,UAAU,EAAE,CAAC,EAClC,SAAS,IAAI,MAAM,CAAC,OAAO,CAC5B,EACD,SAAS,EAAE,aAAa,IACpB,iBAAiB;4BAErB,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;gCAC9B,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,MAAM,CAAC;oCAC5D,oBAAC,cAAc,IACb,OAAO,EAAC,IAAI,EACZ,wBAAwB,EAAE,IAAI,EAC9B,OAAO,EACL,6CACM,6BAA6B,CAAC;4CAChC,MAAM,EAAE,SAAS;yCACiC,CAAC;4CAErD,oBAAC,cAAc,IACb,SAAS,EAAE,cAAc,EACzB,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EACpC,OAAO,EAAC,eAAe,EACvB,QAAQ,EAAC,OAAO,EAChB,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,kBAAkB,GAC3B,CACE;wCAGR,8BAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,IAClD,MAAM,CACF,CACQ,CACb;gCACN,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,sBAAsB,EAAE,CAAC;oCACtF,QAAQ;oCACT,6BAAK,GAAG,EAAE,iBAAiB,GAAI,CAC3B;gCACL,MAAM,IAAI,CACT,6BAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,IAAI,MAAM,CAAC,eAAe,CAAC,CAAC,IACxF,MAAM,CACH,CACP,CACG,CACF,CACI,CACR,CACgB,CACF,CACW,CACtC,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalButton } from '../button/internal';\nimport InternalHeader from '../header/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { FunnelNameSelectorContext } from '../internal/analytics/context/analytics-context';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport FocusLock from '../internal/components/focus-lock';\nimport Portal from '../internal/components/portal';\nimport { ModalContext } from '../internal/context/modal-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useIntersectionObserver } from '../internal/hooks/use-intersection-observer';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport { SomeRequired } from '../internal/types';\nimport {\n GeneratedAnalyticsMetadataModalComponent,\n GeneratedAnalyticsMetadataModalDismiss,\n} from './analytics-metadata/interfaces';\nimport { disableBodyScrolling, enableBodyScrolling } from './body-scroll';\nimport { ModalProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalModalProps = SomeRequired<ModalProps, 'size'> &\n InternalBaseComponentProps & { __injectAnalyticsComponentMetadata?: boolean; referrerId?: string };\n\nexport default function InternalModal({ modalRoot, getModalRoot, removeModalRoot, ...rest }: InternalModalProps) {\n return (\n <Portal container={modalRoot} getContainer={getModalRoot} removeContainer={removeModalRoot}>\n <PortaledModal {...rest} />\n </Portal>\n );\n}\n\ntype PortaledModalProps = Omit<InternalModalProps, 'modalRoot' | 'getModalRoot' | 'removeModalRoot'>;\n\n// Separate component to prevent the Portal from getting in the way of refs, as it needs extra cycles to render the inner components.\n// useContainerQuery needs its targeted element to exist on the first render in order to work properly.\nfunction PortaledModal({\n size,\n visible,\n header,\n children,\n footer,\n disableContentPaddings,\n onDismiss,\n __internalRootRef = null,\n __injectAnalyticsComponentMetadata,\n referrerId,\n ...rest\n}: PortaledModalProps) {\n const instanceUniqueId = useUniqueId();\n const headerId = `${rest.id || instanceUniqueId}-header`;\n const lastMouseDownElementRef = useRef<HTMLElement | null>(null);\n const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n\n const i18n = useInternalI18n('modal');\n const closeAriaLabel = i18n('closeAriaLabel', rest.closeAriaLabel);\n\n const refObject = useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs(breakpointsRef, refObject, __internalRootRef);\n\n const isRefresh = useVisualRefresh();\n\n const baseProps = getBaseProps(rest);\n\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataModalComponent = {\n name: 'awsui.Modal',\n label: `.${analyticsSelectors.header} h2`,\n };\n\n const metadataAttribute = __injectAnalyticsComponentMetadata\n ? getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })\n : {};\n\n // enable body scroll and restore focus if unmounting while visible\n useEffect(() => {\n return () => {\n enableBodyScrolling();\n };\n }, []);\n\n // enable / disable body scroll\n useEffect(() => {\n if (visible) {\n disableBodyScrolling();\n } else {\n enableBodyScrolling();\n }\n }, [visible]);\n\n // Because we hide the element with styles (and not actually detach it from DOM), we need to scroll to top\n useEffect(() => {\n if (visible && refObject.current) {\n refObject.current.scrollTop = 0;\n }\n }, [visible]);\n\n const dismiss = (reason: string) => fireNonCancelableEvent(onDismiss, { reason });\n\n const onOverlayMouseDown = (event: React.MouseEvent) => {\n lastMouseDownElementRef.current = event.target as HTMLElement;\n };\n const onOverlayClick = (event: React.MouseEvent) => {\n const overlay = refObject.current;\n const lastClicked = lastMouseDownElementRef.current;\n\n if (event.target === overlay && lastClicked === overlay) {\n dismiss('overlay');\n }\n };\n const onCloseButtonClick = () => dismiss('closeButton');\n const escKeyHandler = (event: React.KeyboardEvent) => {\n if (event.keyCode === KeyCode.escape) {\n dismiss('keyboard');\n }\n };\n\n // We use an empty div element at the end of the content slot as a sentinel\n // to detect when the user has scrolled to the bottom.\n const { ref: stickySentinelRef, isIntersecting: footerStuck } = useIntersectionObserver();\n\n // Add extra scroll padding to account for the height of the sticky footer,\n // to prevent it from covering focused elements.\n const [footerHeight, footerRef] = useContainerQuery(rect => rect.borderBoxHeight);\n const { subStepRef } = useFunnelSubStep();\n\n return (\n <FunnelNameSelectorContext.Provider value={`.${styles['header--text']}`}>\n <ResetContextsForModal>\n <ModalContext.Provider value={{ isInModal: true }}>\n <div\n {...baseProps}\n className={clsx(\n styles.root,\n { [styles.hidden]: !visible },\n baseProps.className,\n isRefresh && styles.refresh\n )}\n role=\"dialog\"\n aria-modal={true}\n aria-labelledby={headerId}\n onMouseDown={onOverlayMouseDown}\n onClick={onOverlayClick}\n ref={mergedRef}\n style={footerHeight ? { scrollPaddingBottom: footerHeight } : undefined}\n data-awsui-referrer-id={subStepRef.current?.id || referrerId}\n >\n <FocusLock disabled={!visible} autoFocus={true} restoreFocus={true} className={styles['focus-lock']}>\n <div\n className={clsx(\n styles.dialog,\n styles[size],\n styles[`breakpoint-${breakpoint}`],\n isRefresh && styles.refresh\n )}\n onKeyDown={escKeyHandler}\n {...metadataAttribute}\n >\n <div className={styles.container}>\n <div className={clsx(styles.header, analyticsSelectors.header)}>\n <InternalHeader\n variant=\"h2\"\n __disableActionsWrapping={true}\n actions={\n <div\n {...getAnalyticsMetadataAttribute({\n action: 'dismiss',\n } as Partial<GeneratedAnalyticsMetadataModalDismiss>)}\n >\n <InternalButton\n ariaLabel={closeAriaLabel}\n className={styles['dismiss-control']}\n variant=\"modal-dismiss\"\n iconName=\"close\"\n formAction=\"none\"\n onClick={onCloseButtonClick}\n />\n </div>\n }\n >\n <span id={headerId} className={styles['header--text']}>\n {header}\n </span>\n </InternalHeader>\n </div>\n <div className={clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings })}>\n {children}\n <div ref={stickySentinelRef} />\n </div>\n {footer && (\n <div ref={footerRef} className={clsx(styles.footer, footerStuck && styles['footer--stuck'])}>\n {footer}\n </div>\n )}\n </div>\n </div>\n </FocusLock>\n </div>\n </ModalContext.Provider>\n </ResetContextsForModal>\n </FunnelNameSelectorContext.Provider>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/modal/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalButton } from '../button/internal';\nimport InternalHeader from '../header/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport {\n FunnelNameSelectorContext,\n FunnelStepContextValue,\n FunnelSubStepContextValue,\n} from '../internal/analytics/context/analytics-context';\nimport { FunnelProps, useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport FocusLock from '../internal/components/focus-lock';\nimport Portal from '../internal/components/portal';\nimport { ButtonContext, ButtonContextProps } from '../internal/context/button-context';\nimport { ModalContext } from '../internal/context/modal-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useIntersectionObserver } from '../internal/hooks/use-intersection-observer';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport { SomeRequired } from '../internal/types';\nimport {\n GeneratedAnalyticsMetadataModalComponent,\n GeneratedAnalyticsMetadataModalDismiss,\n} from './analytics-metadata/interfaces';\nimport { disableBodyScrolling, enableBodyScrolling } from './body-scroll';\nimport { ModalProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport function InternalModalAsFunnel(props: InternalModalProps) {\n const { funnelProps, funnelSubmit, funnelNextOrSubmitAttempt } = useFunnel();\n const { funnelStepProps } = useFunnelStep();\n const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n const onButtonClick: ButtonContextProps['onClick'] = ({ variant }) => {\n if (variant === 'primary') {\n funnelNextOrSubmitAttempt();\n funnelSubmit();\n }\n };\n\n return (\n <InternalModal\n __funnelProps={funnelProps}\n __funnelStepProps={funnelStepProps}\n __subStepRef={subStepRef}\n __subStepFunnelProps={funnelSubStepProps}\n onButtonClick={onButtonClick}\n {...props}\n />\n );\n}\n\ntype InternalModalProps = SomeRequired<ModalProps, 'size'> &\n InternalBaseComponentProps & {\n __funnelProps?: FunnelProps;\n __funnelStepProps?: FunnelStepContextValue['funnelStepProps'];\n __subStepRef?: FunnelSubStepContextValue['subStepRef'];\n __subStepFunnelProps?: FunnelSubStepContextValue['funnelSubStepProps'];\n __injectAnalyticsComponentMetadata?: boolean;\n onButtonClick?: ButtonContextProps['onClick'];\n referrerId?: string;\n };\n\nexport default function InternalModal({ modalRoot, getModalRoot, removeModalRoot, ...rest }: InternalModalProps) {\n return (\n <Portal container={modalRoot} getContainer={getModalRoot} removeContainer={removeModalRoot}>\n <PortaledModal {...rest} />\n </Portal>\n );\n}\n\ntype PortaledModalProps = Omit<InternalModalProps, 'modalRoot' | 'getModalRoot' | 'removeModalRoot'>;\n\n// Separate component to prevent the Portal from getting in the way of refs, as it needs extra cycles to render the inner components.\n// useContainerQuery needs its targeted element to exist on the first render in order to work properly.\nfunction PortaledModal({\n size,\n visible,\n header,\n children,\n footer,\n disableContentPaddings,\n onButtonClick = () => {},\n onDismiss,\n __internalRootRef = null,\n __injectAnalyticsComponentMetadata,\n __funnelProps,\n __funnelStepProps,\n __subStepRef,\n __subStepFunnelProps,\n referrerId,\n ...rest\n}: PortaledModalProps) {\n const instanceUniqueId = useUniqueId();\n const headerId = `${rest.id || instanceUniqueId}-header`;\n const lastMouseDownElementRef = useRef<HTMLElement | null>(null);\n const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n\n const i18n = useInternalI18n('modal');\n const closeAriaLabel = i18n('closeAriaLabel', rest.closeAriaLabel);\n\n const refObject = useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs(breakpointsRef, refObject, __internalRootRef);\n\n const isRefresh = useVisualRefresh();\n\n const baseProps = getBaseProps(rest);\n\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataModalComponent = {\n name: 'awsui.Modal',\n label: `.${analyticsSelectors.header} h2`,\n };\n\n const metadataAttribute = __injectAnalyticsComponentMetadata\n ? getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })\n : {};\n\n // enable body scroll and restore focus if unmounting while visible\n useEffect(() => {\n return () => {\n enableBodyScrolling();\n };\n }, []);\n\n // enable / disable body scroll\n useEffect(() => {\n if (visible) {\n disableBodyScrolling();\n } else {\n enableBodyScrolling();\n }\n }, [visible]);\n\n // Because we hide the element with styles (and not actually detach it from DOM), we need to scroll to top\n useEffect(() => {\n if (visible && refObject.current) {\n refObject.current.scrollTop = 0;\n }\n }, [visible]);\n\n const dismiss = (reason: string) => fireNonCancelableEvent(onDismiss, { reason });\n\n const onOverlayMouseDown = (event: React.MouseEvent) => {\n lastMouseDownElementRef.current = event.target as HTMLElement;\n };\n const onOverlayClick = (event: React.MouseEvent) => {\n const overlay = refObject.current;\n const lastClicked = lastMouseDownElementRef.current;\n\n if (event.target === overlay && lastClicked === overlay) {\n dismiss('overlay');\n }\n };\n const onCloseButtonClick = () => dismiss('closeButton');\n const escKeyHandler = (event: React.KeyboardEvent) => {\n if (event.keyCode === KeyCode.escape) {\n dismiss('keyboard');\n }\n };\n\n // We use an empty div element at the end of the content slot as a sentinel\n // to detect when the user has scrolled to the bottom.\n const { ref: stickySentinelRef, isIntersecting: footerStuck } = useIntersectionObserver();\n\n // Add extra scroll padding to account for the height of the sticky footer,\n // to prevent it from covering focused elements.\n const [footerHeight, footerRef] = useContainerQuery(rect => rect.borderBoxHeight);\n const { subStepRef } = useFunnelSubStep();\n\n return (\n <FunnelNameSelectorContext.Provider value={`.${styles['header--text']}`}>\n <ResetContextsForModal>\n <ModalContext.Provider value={{ isInModal: true }}>\n <div\n {...baseProps}\n {...__funnelProps}\n {...__funnelStepProps}\n className={clsx(\n styles.root,\n { [styles.hidden]: !visible },\n baseProps.className,\n isRefresh && styles.refresh\n )}\n role=\"dialog\"\n aria-modal={true}\n aria-labelledby={headerId}\n onMouseDown={onOverlayMouseDown}\n onClick={onOverlayClick}\n ref={mergedRef}\n style={footerHeight ? { scrollPaddingBottom: footerHeight } : undefined}\n data-awsui-referrer-id={subStepRef.current?.id || referrerId}\n >\n <FocusLock disabled={!visible} autoFocus={true} restoreFocus={true} className={styles['focus-lock']}>\n <div\n className={clsx(\n styles.dialog,\n styles[size],\n styles[`breakpoint-${breakpoint}`],\n isRefresh && styles.refresh\n )}\n onKeyDown={escKeyHandler}\n {...metadataAttribute}\n >\n <div className={styles.container}>\n <div className={clsx(styles.header, analyticsSelectors.header)}>\n <InternalHeader\n variant=\"h2\"\n __disableActionsWrapping={true}\n actions={\n <div\n {...getAnalyticsMetadataAttribute({\n action: 'dismiss',\n } as Partial<GeneratedAnalyticsMetadataModalDismiss>)}\n >\n <InternalButton\n ariaLabel={closeAriaLabel}\n className={styles['dismiss-control']}\n variant=\"modal-dismiss\"\n iconName=\"close\"\n formAction=\"none\"\n onClick={onCloseButtonClick}\n />\n </div>\n }\n >\n <span id={headerId} className={styles['header--text']}>\n {header}\n </span>\n </InternalHeader>\n </div>\n <div\n ref={__subStepRef}\n {...__subStepFunnelProps}\n className={clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings })}\n >\n {children}\n <div ref={stickySentinelRef} />\n </div>\n {footer && (\n <ButtonContext.Provider value={{ onClick: onButtonClick }}>\n <div ref={footerRef} className={clsx(styles.footer, footerStuck && styles['footer--stuck'])}>\n {footer}\n </div>\n </ButtonContext.Provider>\n )}\n </div>\n </div>\n </FocusLock>\n </div>\n </ModalContext.Provider>\n </ResetContextsForModal>\n </FunnelNameSelectorContext.Provider>\n );\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloudscape-design/components-themeable",
3
- "version": "3.0.803",
3
+ "version": "3.0.805",
4
4
  "files": [
5
5
  "lib"
6
6
  ],