@cloudscape-design/components 3.0.602 → 3.0.604
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app-layout/classic.d.ts +5 -0
- package/app-layout/classic.d.ts.map +1 -1
- package/app-layout/classic.js +10 -18
- package/app-layout/classic.js.map +1 -1
- package/app-layout/defaults.d.ts +0 -1
- package/app-layout/defaults.d.ts.map +1 -1
- package/app-layout/defaults.js +1 -2
- package/app-layout/defaults.js.map +1 -1
- package/app-layout/implementation.d.ts +5 -0
- package/app-layout/implementation.d.ts.map +1 -1
- package/app-layout/index.d.ts.map +1 -1
- package/app-layout/index.js +31 -6
- package/app-layout/index.js.map +1 -1
- package/app-layout/interfaces.d.ts +1 -1
- package/app-layout/interfaces.d.ts.map +1 -1
- package/app-layout/interfaces.js.map +1 -1
- package/app-layout/internal.d.ts +5 -0
- package/app-layout/internal.d.ts.map +1 -1
- package/app-layout/utils/use-resize.d.ts +2 -1
- package/app-layout/utils/use-resize.d.ts.map +1 -1
- package/app-layout/utils/use-resize.js +7 -9
- package/app-layout/utils/use-resize.js.map +1 -1
- package/app-layout/visual-refresh/context.d.ts +1 -4
- package/app-layout/visual-refresh/context.d.ts.map +1 -1
- package/app-layout/visual-refresh/context.js +28 -64
- package/app-layout/visual-refresh/context.js.map +1 -1
- package/app-layout/visual-refresh/drawers.js +4 -4
- package/app-layout/visual-refresh/drawers.js.map +1 -1
- package/app-layout/visual-refresh/index.d.ts +5 -0
- package/app-layout/visual-refresh/index.d.ts.map +1 -1
- package/app-layout/visual-refresh/layout.js +2 -2
- package/app-layout/visual-refresh/layout.js.map +1 -1
- package/app-layout/visual-refresh/main.js +2 -2
- package/app-layout/visual-refresh/main.js.map +1 -1
- package/app-layout/visual-refresh/mobile-toolbar.js +3 -3
- package/app-layout/visual-refresh/mobile-toolbar.js.map +1 -1
- package/app-layout/visual-refresh/navigation.d.ts.map +1 -1
- package/app-layout/visual-refresh/navigation.js +10 -12
- package/app-layout/visual-refresh/navigation.js.map +1 -1
- package/app-layout/visual-refresh/split-panel.d.ts.map +1 -1
- package/app-layout/visual-refresh/split-panel.js +5 -5
- package/app-layout/visual-refresh/split-panel.js.map +1 -1
- package/app-layout/visual-refresh/styles.css.js +81 -81
- package/app-layout/visual-refresh/styles.scoped.css +169 -181
- package/app-layout/visual-refresh/styles.selectors.js +81 -81
- package/app-layout/visual-refresh/tools.d.ts.map +1 -1
- package/app-layout/visual-refresh/tools.js +2 -3
- package/app-layout/visual-refresh/tools.js.map +1 -1
- package/container/index.d.ts.map +1 -1
- package/container/index.js +4 -2
- package/container/index.js.map +1 -1
- package/form/index.d.ts.map +1 -1
- package/form/index.js +5 -5
- package/form/index.js.map +1 -1
- package/form-field/index.d.ts.map +1 -1
- package/form-field/index.js +2 -1
- package/form-field/index.js.map +1 -1
- package/internal/analytics/components/analytics-funnel.d.ts +9 -2
- package/internal/analytics/components/analytics-funnel.d.ts.map +1 -1
- package/internal/analytics/components/analytics-funnel.js +10 -2
- package/internal/analytics/components/analytics-funnel.js.map +1 -1
- package/internal/analytics/context/analytics-context.d.ts +3 -1
- package/internal/analytics/context/analytics-context.d.ts.map +1 -1
- package/internal/analytics/context/analytics-context.js.map +1 -1
- package/internal/analytics/hooks/use-funnel.d.ts +1 -0
- package/internal/analytics/hooks/use-funnel.d.ts.map +1 -1
- package/internal/analytics/hooks/use-funnel.js +3 -1
- package/internal/analytics/hooks/use-funnel.js.map +1 -1
- package/internal/analytics/interfaces.d.ts +12 -0
- package/internal/analytics/interfaces.d.ts.map +1 -1
- package/internal/analytics/interfaces.js.map +1 -1
- package/internal/base-component/index.d.ts +5 -0
- package/internal/base-component/index.d.ts.map +1 -1
- package/internal/base-component/index.js +3 -0
- package/internal/base-component/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/hooks/use-base-component/index.d.ts +2 -1
- package/internal/hooks/use-base-component/index.d.ts.map +1 -1
- package/internal/hooks/use-base-component/index.js +2 -2
- package/internal/hooks/use-base-component/index.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/wizard/index.d.ts.map +1 -1
- package/wizard/index.js +4 -4
- package/wizard/index.js.map +1 -1
- package/wizard/wizard-form.d.ts.map +1 -1
- package/wizard/wizard-form.js +10 -4
- package/wizard/wizard-form.js.map +1 -1
|
@@ -2,86 +2,86 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"background": "
|
|
6
|
-
"scrolling-background": "awsui_scrolling-
|
|
7
|
-
"sticky-background": "awsui_sticky-
|
|
8
|
-
"has-sticky-notifications": "awsui_has-sticky-
|
|
9
|
-
"breadcrumbs": "
|
|
10
|
-
"has-sticky-background": "awsui_has-sticky-
|
|
11
|
-
"drawers-container": "awsui_drawers-
|
|
12
|
-
"has-open-drawer": "awsui_has-open-
|
|
13
|
-
"disable-body-scroll": "awsui_disable-body-
|
|
14
|
-
"drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-
|
|
15
|
-
"has-multiple-triggers": "awsui_has-multiple-
|
|
16
|
-
"drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-
|
|
17
|
-
"drawers-trigger-content": "awsui_drawers-trigger-
|
|
18
|
-
"drawers-trigger-overflow": "awsui_drawers-trigger-
|
|
19
|
-
"drawers-trigger": "awsui_drawers-
|
|
20
|
-
"drawer": "
|
|
21
|
-
"drawer-content-container": "awsui_drawer-content-
|
|
22
|
-
"drawer-close-button": "awsui_drawer-close-
|
|
23
|
-
"drawer-content": "awsui_drawer-
|
|
24
|
-
"drawer-content-hidden": "awsui_drawer-content-
|
|
25
|
-
"drawer-slider": "awsui_drawer-
|
|
26
|
-
"is-drawer-open": "awsui_is-drawer-
|
|
27
|
-
"content": "
|
|
28
|
-
"layout": "
|
|
29
|
-
"has-max-content-width": "awsui_has-max-content-
|
|
30
|
-
"content-type-dashboard": "awsui_content-type-
|
|
31
|
-
"content-type-table": "awsui_content-type-
|
|
32
|
-
"content-type-cards": "awsui_content-type-
|
|
33
|
-
"is-overlap-disabled": "awsui_is-overlap-
|
|
34
|
-
"is-hide-mobile-toolbar": "awsui_is-hide-mobile-
|
|
35
|
-
"has-content-gap-left": "awsui_has-content-gap-
|
|
36
|
-
"has-content-gap-right": "awsui_has-content-gap-
|
|
37
|
-
"content-first-child-notifications": "awsui_content-first-child-
|
|
38
|
-
"has-breadcrumbs": "awsui_has-
|
|
39
|
-
"content-first-child-header": "awsui_content-first-child-
|
|
40
|
-
"has-header": "awsui_has-
|
|
41
|
-
"content-first-child-main": "awsui_content-first-child-
|
|
42
|
-
"disable-content-paddings": "awsui_disable-content-
|
|
43
|
-
"has-split-panel": "awsui_has-split-
|
|
44
|
-
"split-panel-position-bottom": "awsui_split-panel-position-
|
|
45
|
-
"block-body-scroll": "awsui_block-body-
|
|
46
|
-
"unfocusable": "
|
|
47
|
-
"container": "
|
|
48
|
-
"is-navigation-open": "awsui_is-navigation-
|
|
49
|
-
"is-tools-open": "awsui_is-tools-
|
|
50
|
-
"is-split-panel-open": "awsui_is-split-panel-
|
|
51
|
-
"split-panel-position-side": "awsui_split-panel-position-
|
|
52
|
-
"has-active-drawer": "awsui_has-active-
|
|
53
|
-
"mobile-toolbar": "awsui_mobile-
|
|
54
|
-
"remove-high-contrast-header": "awsui_remove-high-contrast-
|
|
55
|
-
"mobile-toolbar-nav": "awsui_mobile-toolbar-
|
|
56
|
-
"mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-
|
|
57
|
-
"mobile-toolbar-tools": "awsui_mobile-toolbar-
|
|
58
|
-
"navigation-container": "awsui_navigation-
|
|
59
|
-
"show-navigation": "awsui_show-
|
|
60
|
-
"animating": "
|
|
61
|
-
"showButtons": "
|
|
62
|
-
"navigation": "
|
|
63
|
-
"openNavigation": "
|
|
64
|
-
"animated-content": "awsui_animated-
|
|
65
|
-
"hide-navigation": "awsui_hide-
|
|
66
|
-
"notifications": "
|
|
67
|
-
"sticky-notifications": "awsui_sticky-
|
|
68
|
-
"split-panel-bottom": "awsui_split-panel-
|
|
69
|
-
"position-bottom": "awsui_position-
|
|
70
|
-
"openSplitPanelBottom": "
|
|
71
|
-
"split-panel-side": "awsui_split-panel-
|
|
72
|
-
"position-side": "awsui_position-
|
|
73
|
-
"tools-container": "awsui_tools-
|
|
74
|
-
"tools": "
|
|
75
|
-
"openTools": "
|
|
76
|
-
"has-tools-form-persistence": "awsui_has-tools-form-
|
|
77
|
-
"hide-tools": "awsui_hide-
|
|
78
|
-
"show-tools": "awsui_show-
|
|
79
|
-
"has-tools-form": "awsui_has-tools-
|
|
80
|
-
"trigger-badge-wrapper": "awsui_trigger-badge-
|
|
81
|
-
"trigger": "
|
|
82
|
-
"selected": "
|
|
83
|
-
"badge": "
|
|
84
|
-
"trigger-wrapper": "awsui_trigger-
|
|
85
|
-
"dot": "
|
|
5
|
+
"background": "awsui_background_hyvsj_1cour_99",
|
|
6
|
+
"scrolling-background": "awsui_scrolling-background_hyvsj_1cour_102",
|
|
7
|
+
"sticky-background": "awsui_sticky-background_hyvsj_1cour_108",
|
|
8
|
+
"has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_1cour_116",
|
|
9
|
+
"breadcrumbs": "awsui_breadcrumbs_hyvsj_1cour_129",
|
|
10
|
+
"has-sticky-background": "awsui_has-sticky-background_hyvsj_1cour_139",
|
|
11
|
+
"drawers-container": "awsui_drawers-container_hyvsj_1cour_151",
|
|
12
|
+
"has-open-drawer": "awsui_has-open-drawer_hyvsj_1cour_162",
|
|
13
|
+
"disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1cour_185",
|
|
14
|
+
"drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_1cour_190",
|
|
15
|
+
"has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_1cour_231",
|
|
16
|
+
"drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_1cour_241",
|
|
17
|
+
"drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_1cour_245",
|
|
18
|
+
"drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_1cour_259",
|
|
19
|
+
"drawers-trigger": "awsui_drawers-trigger_hyvsj_1cour_245",
|
|
20
|
+
"drawer": "awsui_drawer_hyvsj_1cour_151",
|
|
21
|
+
"drawer-content-container": "awsui_drawer-content-container_hyvsj_1cour_290",
|
|
22
|
+
"drawer-close-button": "awsui_drawer-close-button_hyvsj_1cour_299",
|
|
23
|
+
"drawer-content": "awsui_drawer-content_hyvsj_1cour_290",
|
|
24
|
+
"drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_1cour_307",
|
|
25
|
+
"drawer-slider": "awsui_drawer-slider_hyvsj_1cour_310",
|
|
26
|
+
"is-drawer-open": "awsui_is-drawer-open_hyvsj_1cour_317",
|
|
27
|
+
"content": "awsui_content_hyvsj_1cour_343",
|
|
28
|
+
"layout": "awsui_layout_hyvsj_1cour_364",
|
|
29
|
+
"has-max-content-width": "awsui_has-max-content-width_hyvsj_1cour_447",
|
|
30
|
+
"content-type-dashboard": "awsui_content-type-dashboard_hyvsj_1cour_462",
|
|
31
|
+
"content-type-table": "awsui_content-type-table_hyvsj_1cour_476",
|
|
32
|
+
"content-type-cards": "awsui_content-type-cards_hyvsj_1cour_476",
|
|
33
|
+
"is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1cour_482",
|
|
34
|
+
"is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_1cour_485",
|
|
35
|
+
"has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1cour_517",
|
|
36
|
+
"has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1cour_520",
|
|
37
|
+
"content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_1cour_530",
|
|
38
|
+
"has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1cour_533",
|
|
39
|
+
"content-first-child-header": "awsui_content-first-child-header_hyvsj_1cour_536",
|
|
40
|
+
"has-header": "awsui_has-header_hyvsj_1cour_536",
|
|
41
|
+
"content-first-child-main": "awsui_content-first-child-main_hyvsj_1cour_557",
|
|
42
|
+
"disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1cour_557",
|
|
43
|
+
"has-split-panel": "awsui_has-split-panel_hyvsj_1cour_600",
|
|
44
|
+
"split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1cour_600",
|
|
45
|
+
"block-body-scroll": "awsui_block-body-scroll_hyvsj_1cour_616",
|
|
46
|
+
"unfocusable": "awsui_unfocusable_hyvsj_1cour_621",
|
|
47
|
+
"container": "awsui_container_hyvsj_1cour_631",
|
|
48
|
+
"is-navigation-open": "awsui_is-navigation-open_hyvsj_1cour_657",
|
|
49
|
+
"is-tools-open": "awsui_is-tools-open_hyvsj_1cour_660",
|
|
50
|
+
"is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1cour_660",
|
|
51
|
+
"split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1cour_660",
|
|
52
|
+
"has-active-drawer": "awsui_has-active-drawer_hyvsj_1cour_660",
|
|
53
|
+
"mobile-toolbar": "awsui_mobile-toolbar_hyvsj_1cour_669",
|
|
54
|
+
"remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_1cour_686",
|
|
55
|
+
"mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_1cour_690",
|
|
56
|
+
"mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_1cour_694",
|
|
57
|
+
"mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_1cour_698",
|
|
58
|
+
"navigation-container": "awsui_navigation-container_hyvsj_1cour_707",
|
|
59
|
+
"show-navigation": "awsui_show-navigation_hyvsj_1cour_745",
|
|
60
|
+
"animating": "awsui_animating_hyvsj_1cour_768",
|
|
61
|
+
"showButtons": "awsui_showButtons_hyvsj_1cour_1",
|
|
62
|
+
"navigation": "awsui_navigation_hyvsj_1cour_707",
|
|
63
|
+
"openNavigation": "awsui_openNavigation_hyvsj_1cour_1",
|
|
64
|
+
"animated-content": "awsui_animated-content_hyvsj_1cour_830",
|
|
65
|
+
"hide-navigation": "awsui_hide-navigation_hyvsj_1cour_839",
|
|
66
|
+
"notifications": "awsui_notifications_hyvsj_1cour_849",
|
|
67
|
+
"sticky-notifications": "awsui_sticky-notifications_hyvsj_1cour_855",
|
|
68
|
+
"split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1cour_872",
|
|
69
|
+
"position-bottom": "awsui_position-bottom_hyvsj_1cour_919",
|
|
70
|
+
"openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1cour_1",
|
|
71
|
+
"split-panel-side": "awsui_split-panel-side_hyvsj_1cour_948",
|
|
72
|
+
"position-side": "awsui_position-side_hyvsj_1cour_961",
|
|
73
|
+
"tools-container": "awsui_tools-container_hyvsj_1cour_983",
|
|
74
|
+
"tools": "awsui_tools_hyvsj_1cour_983",
|
|
75
|
+
"openTools": "awsui_openTools_hyvsj_1cour_1",
|
|
76
|
+
"has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1cour_1074",
|
|
77
|
+
"hide-tools": "awsui_hide-tools_hyvsj_1cour_1084",
|
|
78
|
+
"show-tools": "awsui_show-tools_hyvsj_1cour_1096",
|
|
79
|
+
"has-tools-form": "awsui_has-tools-form_hyvsj_1cour_1074",
|
|
80
|
+
"trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_1cour_1179",
|
|
81
|
+
"trigger": "awsui_trigger_hyvsj_1cour_1179",
|
|
82
|
+
"selected": "awsui_selected_hyvsj_1cour_1253",
|
|
83
|
+
"badge": "awsui_badge_hyvsj_1cour_1273",
|
|
84
|
+
"trigger-wrapper": "awsui_trigger-wrapper_hyvsj_1cour_1277",
|
|
85
|
+
"dot": "awsui_dot_hyvsj_1cour_1288"
|
|
86
86
|
};
|
|
87
87
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tools.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"tools.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE,UAAU,sBAwIrD"}
|
|
@@ -19,7 +19,7 @@ import customCssProps from '../../internal/generated/custom-css-properties';
|
|
|
19
19
|
* split panel in large viewports;
|
|
20
20
|
*/
|
|
21
21
|
export default function Tools({ children }) {
|
|
22
|
-
const { ariaLabels, disableBodyScroll, drawers, handleSplitPanelClick, handleToolsClick,
|
|
22
|
+
const { ariaLabels, disableBodyScroll, drawers, handleSplitPanelClick, handleToolsClick, hasDrawerViewportOverlay, isMobile, isSplitPanelOpen, isToolsOpen, loseToolsFocus, splitPanel, splitPanelControlId, splitPanelDisplayed, splitPanelPosition, splitPanelRefs, splitPanelToggle, tools, toolsControlId, toolsHide, toolsRefs, toolsWidth, } = useAppLayoutInternals();
|
|
23
23
|
const hasSplitPanel = !!splitPanel && getSplitPanelStatus(splitPanelDisplayed, splitPanelPosition);
|
|
24
24
|
const hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);
|
|
25
25
|
const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);
|
|
@@ -39,8 +39,7 @@ export default function Tools({ children }) {
|
|
|
39
39
|
[testutilStyles['drawer-closed']]: !isToolsOpen,
|
|
40
40
|
}), style: {
|
|
41
41
|
[customCssProps.toolsAnimationStartingOpacity]: `${hasSplitPanel && isSplitPanelOpen ? 1 : 0}`,
|
|
42
|
-
|
|
43
|
-
[customCssProps.toolsWidth]: hasDefaultToolsWidth ? '' : `${toolsWidth}px`,
|
|
42
|
+
[customCssProps.toolsWidth]: `${toolsWidth}px`,
|
|
44
43
|
}, onBlur: e => {
|
|
45
44
|
if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
|
|
46
45
|
loseToolsFocus();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.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 from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../button/internal';\nimport { useAppLayoutInternals } from './context';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface ToolsProps {\n children: React.ReactNode;\n}\n\n/**\n * The Tools component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the split panel, which exists only if there is a split panel in side position;\n * the tools, or drawer, that contains the hide tools form and the children passed through the API;\n * the show tools form that contains the triggers for both the drawer and the\n * split panel in large viewports;\n */\nexport default function Tools({ children }: ToolsProps) {\n const {\n ariaLabels,\n disableBodyScroll,\n drawers,\n handleSplitPanelClick,\n handleToolsClick,\n hasDefaultToolsWidth,\n hasDrawerViewportOverlay,\n isMobile,\n isSplitPanelOpen,\n isToolsOpen,\n loseToolsFocus,\n splitPanel,\n splitPanelControlId,\n splitPanelDisplayed,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelToggle,\n tools,\n toolsControlId,\n toolsHide,\n toolsRefs,\n toolsWidth,\n } = useAppLayoutInternals();\n\n const hasSplitPanel = !!splitPanel && getSplitPanelStatus(splitPanelDisplayed, splitPanelPosition);\n const hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);\n const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);\n const isUnfocusable = hasDrawerViewportOverlay && !isToolsOpen;\n\n /**\n * If the drawers property is defined the SplitPanel will be mounted and rendered\n * by the Drawers component.\n */\n if ((toolsHide && !hasSplitPanel) || drawers) {\n return null;\n }\n\n return (\n <Transition in={isToolsOpen ?? false}>\n {(state, transitionEventsRef) => (\n <div\n className={clsx(styles['tools-container'], {\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles.unfocusable]: isUnfocusable,\n [testutilStyles['drawer-closed']]: !isToolsOpen,\n })}\n style={{\n [customCssProps.toolsAnimationStartingOpacity]: `${hasSplitPanel && isSplitPanelOpen ? 1 : 0}`,\n // Overwrite the default tools width (depends on breakpoints) only when the `toolsWidth` property has been set.\n [customCssProps.toolsWidth]: hasDefaultToolsWidth ? '' : `${toolsWidth}px`,\n }}\n onBlur={e => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n loseToolsFocus();\n }\n }}\n >\n {children}\n\n {!toolsHide && (\n <aside\n id={toolsControlId}\n aria-hidden={!isToolsOpen ? true : false}\n aria-label={ariaLabels?.tools ?? undefined}\n className={clsx(\n styles.tools,\n {\n [styles.animating]: state === 'entering',\n [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n [styles['is-tools-open']]: isToolsOpen,\n },\n testutilStyles.tools\n )}\n ref={state !== 'exiting' ? transitionEventsRef : undefined}\n >\n <div className={clsx(styles['animated-content'])}>\n <div className={clsx(styles['hide-tools'])}>\n <InternalButton\n ariaLabel={ariaLabels?.toolsClose ?? undefined}\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => handleToolsClick(false)}\n variant=\"icon\"\n formAction=\"none\"\n className={testutilStyles['tools-close']}\n ref={toolsRefs.close}\n />\n </div>\n\n {tools}\n </div>\n </aside>\n )}\n\n {!isMobile && (\n <aside\n aria-hidden={!hasToolsForm ? true : false}\n aria-label={ariaLabels?.tools ?? undefined}\n className={clsx(styles['show-tools'], {\n [styles.animating]: state === 'exiting',\n [styles['has-tools-form']]: hasToolsForm,\n [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n })}\n ref={state === 'exiting' ? transitionEventsRef : undefined}\n data-testid=\"side-split-panel-drawer\"\n >\n {!toolsHide && (\n <TriggerButton\n ariaLabel={ariaLabels?.toolsToggle}\n ariaControls={toolsControlId}\n ariaExpanded={isToolsOpen}\n iconName=\"status-info\"\n onClick={() => handleToolsClick(!isToolsOpen)}\n selected={hasSplitPanel && isToolsOpen}\n className={testutilStyles['tools-toggle']}\n ref={toolsRefs.toggle}\n />\n )}\n\n {hasSplitPanel && splitPanelToggle.displayed && (\n <TriggerButton\n ariaLabel={splitPanelToggle.ariaLabel}\n ariaControls={splitPanelControlId}\n ariaExpanded={!!isSplitPanelOpen}\n iconName=\"view-vertical\"\n onClick={() => handleSplitPanelClick()}\n selected={hasSplitPanel && isSplitPanelOpen}\n className={splitPanelStyles['open-button']}\n ref={splitPanelRefs.toggle}\n />\n )}\n </aside>\n )}\n </div>\n )}\n </Transition>\n );\n}\n\n/**\n * This simple function returns the presence of the split panel as a child of the\n * Tools component. It must exist and be in side position.\n */\nfunction getSplitPanelStatus(splitPanelDisplayed: boolean, splitPanelPosition: string) {\n return splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;\n}\n\n/**\n * By default the Tools form is styled as display: none; This behavior should\n * be unchanged in mobile viewports where the Tools form is always suppressed.\n * In large viewports, however the Tools form and its corresponding buttons\n * should be present in the UI under the below circumstances.\n */\nfunction getToolsFormStatus(\n hasSplitPanel: boolean,\n isMobile: boolean,\n isSplitPanelOpen?: boolean,\n isToolsOpen?: boolean,\n toolsHide?: boolean\n) {\n let hasToolsForm = false;\n\n if (!isMobile) {\n // Both the Split Panel and Tools button are needed\n if (hasSplitPanel && !toolsHide) {\n hasToolsForm = true;\n }\n\n // The Split Panel button is needed\n if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {\n hasToolsForm = true;\n }\n\n // The Tools button is needed\n if (!hasSplitPanel && !toolsHide && !isToolsOpen) {\n hasToolsForm = true;\n }\n }\n\n return hasToolsForm;\n}\n\n/**\n * Under two scenarios the Tools form that contains the triggers\n * for the Tools content and the Split Panel may be persistent\n * in the UI (as opposed to disappearing when one of the drawers\n * is open). This will also add a white background as opposed to the\n * default transparent background. The buttons will present and in a\n * selected / not selected state.\n */\nfunction getToolsFormPersistence(\n hasSplitPanel: boolean,\n isSplitPanelOpen?: boolean,\n isToolsOpen?: boolean,\n toolsHide?: boolean\n) {\n let hasToolsFormPersistence = false;\n\n // Both Tools and Split Panel exist and one or both is open\n if (hasSplitPanel && !toolsHide && (isSplitPanelOpen || isToolsOpen)) {\n hasToolsFormPersistence = true;\n }\n\n return hasToolsFormPersistence;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.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 from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../button/internal';\nimport { useAppLayoutInternals } from './context';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface ToolsProps {\n children: React.ReactNode;\n}\n\n/**\n * The Tools component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the split panel, which exists only if there is a split panel in side position;\n * the tools, or drawer, that contains the hide tools form and the children passed through the API;\n * the show tools form that contains the triggers for both the drawer and the\n * split panel in large viewports;\n */\nexport default function Tools({ children }: ToolsProps) {\n const {\n ariaLabels,\n disableBodyScroll,\n drawers,\n handleSplitPanelClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n isSplitPanelOpen,\n isToolsOpen,\n loseToolsFocus,\n splitPanel,\n splitPanelControlId,\n splitPanelDisplayed,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelToggle,\n tools,\n toolsControlId,\n toolsHide,\n toolsRefs,\n toolsWidth,\n } = useAppLayoutInternals();\n\n const hasSplitPanel = !!splitPanel && getSplitPanelStatus(splitPanelDisplayed, splitPanelPosition);\n const hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);\n const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);\n const isUnfocusable = hasDrawerViewportOverlay && !isToolsOpen;\n\n /**\n * If the drawers property is defined the SplitPanel will be mounted and rendered\n * by the Drawers component.\n */\n if ((toolsHide && !hasSplitPanel) || drawers) {\n return null;\n }\n\n return (\n <Transition in={isToolsOpen ?? false}>\n {(state, transitionEventsRef) => (\n <div\n className={clsx(styles['tools-container'], {\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles.unfocusable]: isUnfocusable,\n [testutilStyles['drawer-closed']]: !isToolsOpen,\n })}\n style={{\n [customCssProps.toolsAnimationStartingOpacity]: `${hasSplitPanel && isSplitPanelOpen ? 1 : 0}`,\n [customCssProps.toolsWidth]: `${toolsWidth}px`,\n }}\n onBlur={e => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n loseToolsFocus();\n }\n }}\n >\n {children}\n\n {!toolsHide && (\n <aside\n id={toolsControlId}\n aria-hidden={!isToolsOpen ? true : false}\n aria-label={ariaLabels?.tools ?? undefined}\n className={clsx(\n styles.tools,\n {\n [styles.animating]: state === 'entering',\n [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n [styles['is-tools-open']]: isToolsOpen,\n },\n testutilStyles.tools\n )}\n ref={state !== 'exiting' ? transitionEventsRef : undefined}\n >\n <div className={clsx(styles['animated-content'])}>\n <div className={clsx(styles['hide-tools'])}>\n <InternalButton\n ariaLabel={ariaLabels?.toolsClose ?? undefined}\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => handleToolsClick(false)}\n variant=\"icon\"\n formAction=\"none\"\n className={testutilStyles['tools-close']}\n ref={toolsRefs.close}\n />\n </div>\n\n {tools}\n </div>\n </aside>\n )}\n\n {!isMobile && (\n <aside\n aria-hidden={!hasToolsForm ? true : false}\n aria-label={ariaLabels?.tools ?? undefined}\n className={clsx(styles['show-tools'], {\n [styles.animating]: state === 'exiting',\n [styles['has-tools-form']]: hasToolsForm,\n [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n })}\n ref={state === 'exiting' ? transitionEventsRef : undefined}\n data-testid=\"side-split-panel-drawer\"\n >\n {!toolsHide && (\n <TriggerButton\n ariaLabel={ariaLabels?.toolsToggle}\n ariaControls={toolsControlId}\n ariaExpanded={isToolsOpen}\n iconName=\"status-info\"\n onClick={() => handleToolsClick(!isToolsOpen)}\n selected={hasSplitPanel && isToolsOpen}\n className={testutilStyles['tools-toggle']}\n ref={toolsRefs.toggle}\n />\n )}\n\n {hasSplitPanel && splitPanelToggle.displayed && (\n <TriggerButton\n ariaLabel={splitPanelToggle.ariaLabel}\n ariaControls={splitPanelControlId}\n ariaExpanded={!!isSplitPanelOpen}\n iconName=\"view-vertical\"\n onClick={() => handleSplitPanelClick()}\n selected={hasSplitPanel && isSplitPanelOpen}\n className={splitPanelStyles['open-button']}\n ref={splitPanelRefs.toggle}\n />\n )}\n </aside>\n )}\n </div>\n )}\n </Transition>\n );\n}\n\n/**\n * This simple function returns the presence of the split panel as a child of the\n * Tools component. It must exist and be in side position.\n */\nfunction getSplitPanelStatus(splitPanelDisplayed: boolean, splitPanelPosition: string) {\n return splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;\n}\n\n/**\n * By default the Tools form is styled as display: none; This behavior should\n * be unchanged in mobile viewports where the Tools form is always suppressed.\n * In large viewports, however the Tools form and its corresponding buttons\n * should be present in the UI under the below circumstances.\n */\nfunction getToolsFormStatus(\n hasSplitPanel: boolean,\n isMobile: boolean,\n isSplitPanelOpen?: boolean,\n isToolsOpen?: boolean,\n toolsHide?: boolean\n) {\n let hasToolsForm = false;\n\n if (!isMobile) {\n // Both the Split Panel and Tools button are needed\n if (hasSplitPanel && !toolsHide) {\n hasToolsForm = true;\n }\n\n // The Split Panel button is needed\n if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {\n hasToolsForm = true;\n }\n\n // The Tools button is needed\n if (!hasSplitPanel && !toolsHide && !isToolsOpen) {\n hasToolsForm = true;\n }\n }\n\n return hasToolsForm;\n}\n\n/**\n * Under two scenarios the Tools form that contains the triggers\n * for the Tools content and the Split Panel may be persistent\n * in the UI (as opposed to disappearing when one of the drawers\n * is open). This will also add a white background as opposed to the\n * default transparent background. The buttons will present and in a\n * selected / not selected state.\n */\nfunction getToolsFormPersistence(\n hasSplitPanel: boolean,\n isSplitPanelOpen?: boolean,\n isToolsOpen?: boolean,\n toolsHide?: boolean\n) {\n let hasToolsFormPersistence = false;\n\n // Both Tools and Split Panel exist and one or both is open\n if (hasSplitPanel && !toolsHide && (isSplitPanelOpen || isToolsOpen)) {\n hasToolsFormPersistence = true;\n }\n\n return hasToolsFormPersistence;\n}\n"]}
|
package/container/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAiB,EACjB,GAAG,KAAK,EACT,EAAE,cAAc,eAwBhB"}
|
package/container/index.js
CHANGED
|
@@ -7,13 +7,15 @@ import { getExternalProps } from '../internal/utils/external-props';
|
|
|
7
7
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
8
8
|
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
9
9
|
import { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';
|
|
10
|
+
import { getAnalyticsMetadataProps } from '../internal/base-component';
|
|
10
11
|
export default function Container(_a) {
|
|
11
12
|
var { variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, fitHeight = false } = _a, props = __rest(_a, ["variant", "disableHeaderPaddings", "disableContentPaddings", "fitHeight"]);
|
|
13
|
+
const analyticsMetadata = getAnalyticsMetadataProps(props);
|
|
12
14
|
const baseComponentProps = useBaseComponent('Container', {
|
|
13
15
|
props: { disableContentPaddings, disableHeaderPaddings, fitHeight, variant },
|
|
14
|
-
});
|
|
16
|
+
}, analyticsMetadata);
|
|
15
17
|
const externalProps = getExternalProps(props);
|
|
16
|
-
return (React.createElement(AnalyticsFunnelSubStep, null,
|
|
18
|
+
return (React.createElement(AnalyticsFunnelSubStep, { instanceId: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceId, errorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext },
|
|
17
19
|
React.createElement(InternalContainerAsSubstep, Object.assign({ variant: variant, disableContentPaddings: disableContentPaddings, disableHeaderPaddings: disableHeaderPaddings, fitHeight: fitHeight }, props, externalProps, baseComponentProps))));
|
|
18
20
|
}
|
|
19
21
|
applyDisplayName(Container, 'Container');
|
package/container/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/container/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mDAAmD,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/container/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mDAAmD,CAAC;AAC3F,OAAO,EAAkC,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAIvG,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAMjB;QANiB,EAChC,OAAO,GAAG,SAAS,EACnB,qBAAqB,GAAG,KAAK,EAC7B,sBAAsB,GAAG,KAAK,EAC9B,SAAS,GAAG,KAAK,OAEF,EADZ,KAAK,cALwB,2EAMjC,CADS;IAER,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,KAAuC,CAAC,CAAC;IAC7F,MAAM,kBAAkB,GAAG,gBAAgB,CACzC,WAAW,EACX;QACE,KAAK,EAAE,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,SAAS,EAAE,OAAO,EAAE;KAC7E,EACD,iBAAiB,CAClB,CAAC;IACF,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACL,oBAAC,sBAAsB,IAAC,UAAU,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,UAAU,EAAE,YAAY,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,YAAY;QAC9G,oBAAC,0BAA0B,kBACzB,OAAO,EAAE,OAAO,EAChB,sBAAsB,EAAE,sBAAsB,EAC9C,qBAAqB,EAAE,qBAAqB,EAC5C,SAAS,EAAE,SAAS,IAChB,KAAK,EACL,aAAa,EACb,kBAAkB,EACtB,CACqB,CAC1B,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { InternalContainerAsSubstep } from './internal';\nimport { ContainerProps } from './interfaces';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\n\nexport { ContainerProps };\n\nexport default function Container({\n variant = 'default',\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n fitHeight = false,\n ...props\n}: ContainerProps) {\n const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n const baseComponentProps = useBaseComponent(\n 'Container',\n {\n props: { disableContentPaddings, disableHeaderPaddings, fitHeight, variant },\n },\n analyticsMetadata\n );\n const externalProps = getExternalProps(props);\n\n return (\n <AnalyticsFunnelSubStep instanceId={analyticsMetadata?.instanceId} errorContext={analyticsMetadata?.errorContext}>\n <InternalContainerAsSubstep\n variant={variant}\n disableContentPaddings={disableContentPaddings}\n disableHeaderPaddings={disableHeaderPaddings}\n fitHeight={fitHeight}\n {...props}\n {...externalProps}\n {...baseComponentProps}\n />\n </AnalyticsFunnelSubStep>\n );\n}\n\napplyDisplayName(Container, 'Container');\n"]}
|
package/form/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAYzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAoBrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,OAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,eAyB1E"}
|
package/form/index.js
CHANGED
|
@@ -10,6 +10,7 @@ import { ButtonContext } from '../internal/context/button-context';
|
|
|
10
10
|
import { useFunnel, useFunnelNameSelector, useFunnelStep } from '../internal/analytics/hooks/use-funnel';
|
|
11
11
|
import formStyles from './styles.css.js';
|
|
12
12
|
import headerStyles from '../header/styles.css.js';
|
|
13
|
+
import { getAnalyticsMetadataProps } from '../internal/base-component';
|
|
13
14
|
const FormWithAnalytics = (_a) => {
|
|
14
15
|
var { variant = 'full-page', actions } = _a, props = __rest(_a, ["variant", "actions"]);
|
|
15
16
|
const { funnelProps, funnelSubmit, funnelNextOrSubmitAttempt } = useFunnel();
|
|
@@ -25,13 +26,12 @@ const FormWithAnalytics = (_a) => {
|
|
|
25
26
|
};
|
|
26
27
|
export default function Form(_a) {
|
|
27
28
|
var { variant = 'full-page' } = _a, props = __rest(_a, ["variant"]);
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
});
|
|
29
|
+
const analyticsMetadata = getAnalyticsMetadataProps(props);
|
|
30
|
+
const baseComponentProps = useBaseComponent('Form', { props: { variant } }, analyticsMetadata);
|
|
31
31
|
const inheritedFunnelNameSelector = useFunnelNameSelector();
|
|
32
32
|
const funnelNameSelector = inheritedFunnelNameSelector || `.${headerStyles['heading-text']}`;
|
|
33
|
-
return (React.createElement(AnalyticsFunnel, { funnelType: "single-page", optionalStepNumbers: [], totalFunnelSteps: 1, funnelNameSelectors: [funnelNameSelector, `.${formStyles.header}`] },
|
|
34
|
-
React.createElement(AnalyticsFunnelStep, { stepNumber: 1 },
|
|
33
|
+
return (React.createElement(AnalyticsFunnel, { instanceId: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceId, flowType: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.flowType, errorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, funnelType: "single-page", optionalStepNumbers: [], totalFunnelSteps: 1, funnelNameSelectors: [funnelNameSelector, `.${formStyles.header}`] },
|
|
34
|
+
React.createElement(AnalyticsFunnelStep, { instanceId: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceId, errorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, stepNumber: 1 },
|
|
35
35
|
React.createElement(FormWithAnalytics, Object.assign({ variant: variant }, props, baseComponentProps)))));
|
|
36
36
|
}
|
|
37
37
|
applyDisplayName(Form, 'Form');
|
package/form/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,YAAY,MAAM,YAAY,CAAC;AACtC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AACzG,OAAO,EAAE,aAAa,EAAsB,MAAM,oCAAoC,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAEzG,OAAO,UAAU,MAAM,iBAAiB,CAAC;AACzC,OAAO,YAAY,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form/index.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 from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FormProps } from './interfaces';\nimport InternalForm from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nimport { AnalyticsFunnel, AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';\nimport { ButtonContext, ButtonContextProps } from '../internal/context/button-context';\nimport { useFunnel, useFunnelNameSelector, useFunnelStep } from '../internal/analytics/hooks/use-funnel';\n\nimport formStyles from './styles.css.js';\nimport headerStyles from '../header/styles.css.js';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\n\nexport { FormProps };\n\nconst FormWithAnalytics = ({ variant = 'full-page', actions, ...props }: FormProps) => {\n const { funnelProps, funnelSubmit, funnelNextOrSubmitAttempt } = useFunnel();\n const { funnelStepProps } = useFunnelStep();\n\n const handleActionButtonClick: ButtonContextProps['onClick'] = ({ variant }) => {\n if (variant === 'primary') {\n funnelNextOrSubmitAttempt();\n funnelSubmit();\n }\n };\n\n return (\n <ButtonContext.Provider value={{ onClick: handleActionButtonClick }}>\n <InternalForm variant={variant} actions={actions} {...props} {...funnelProps} {...funnelStepProps} />\n </ButtonContext.Provider>\n );\n};\n\nexport default function Form({ variant = 'full-page', ...props }: FormProps) {\n const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n const baseComponentProps = useBaseComponent('Form', { props: { variant } }, analyticsMetadata);\n const inheritedFunnelNameSelector = useFunnelNameSelector();\n const funnelNameSelector = inheritedFunnelNameSelector || `.${headerStyles['heading-text']}`;\n\n return (\n <AnalyticsFunnel\n instanceId={analyticsMetadata?.instanceId}\n flowType={analyticsMetadata?.flowType}\n errorContext={analyticsMetadata?.errorContext}\n funnelType=\"single-page\"\n optionalStepNumbers={[]}\n totalFunnelSteps={1}\n funnelNameSelectors={[funnelNameSelector, `.${formStyles.header}`]}\n >\n <AnalyticsFunnelStep\n instanceId={analyticsMetadata?.instanceId}\n errorContext={analyticsMetadata?.errorContext}\n stepNumber={1}\n >\n <FormWithAnalytics variant={variant} {...props} {...baseComponentProps} />\n </AnalyticsFunnelStep>\n </AnalyticsFunnel>\n );\n}\n\napplyDisplayName(Form, 'Form');\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form-field/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form-field/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,OAAe,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,eAO9E"}
|
package/form-field/index.js
CHANGED
|
@@ -5,9 +5,10 @@ import React from 'react';
|
|
|
5
5
|
import InternalFormField from './internal';
|
|
6
6
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
7
7
|
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
8
|
+
import { getAnalyticsMetadataProps } from '../internal/base-component';
|
|
8
9
|
export default function FormField(_a) {
|
|
9
10
|
var { stretch = false } = _a, props = __rest(_a, ["stretch"]);
|
|
10
|
-
const baseComponentProps = useBaseComponent('FormField', { props: { stretch } });
|
|
11
|
+
const baseComponentProps = useBaseComponent('FormField', { props: { stretch } }, getAnalyticsMetadataProps(props));
|
|
11
12
|
return React.createElement(InternalFormField, Object.assign({ stretch: stretch }, props, { __hideLabel: false }, baseComponentProps));
|
|
12
13
|
}
|
|
13
14
|
applyDisplayName(FormField, 'FormField');
|
package/form-field/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form-field/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,iBAAiB,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form-field/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,iBAAiB,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAkC,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAMvG,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAA6C;QAA7C,EAAE,OAAO,GAAG,KAAK,OAA4B,EAAvB,KAAK,cAA3B,WAA6B,CAAF;IAC3D,MAAM,kBAAkB,GAAG,gBAAgB,CACzC,WAAW,EACX,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EACtB,yBAAyB,CAAC,KAAuC,CAAC,CACnE,CAAC;IACF,OAAO,oBAAC,iBAAiB,kBAAC,OAAO,EAAE,OAAO,IAAM,KAAK,IAAE,WAAW,EAAE,KAAK,IAAM,kBAAkB,EAAI,CAAC;AACxG,CAAC;AAED,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport InternalFormField from './internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\n\nimport { FormFieldProps } from './interfaces';\n\nexport { FormFieldProps };\n\nexport default function FormField({ stretch = false, ...props }: FormFieldProps) {\n const baseComponentProps = useBaseComponent(\n 'FormField',\n { props: { stretch } },\n getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata)\n );\n return <InternalFormField stretch={stretch} {...props} __hideLabel={false} {...baseComponentProps} />;\n}\n\napplyDisplayName(FormField, 'FormField');\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FunnelStepContextValue, FunnelSubStepContextValue } from '../context/analytics-context';
|
|
3
|
-
import { FunnelProps, FunnelStepProps, StepConfiguration } from '../interfaces';
|
|
3
|
+
import { AnalyticsMetadata, FunnelProps, FunnelStepProps, StepConfiguration } from '../interfaces';
|
|
4
4
|
export declare const FUNNEL_VERSION = "1.4";
|
|
5
5
|
interface AnalyticsFunnelProps {
|
|
6
6
|
children?: React.ReactNode;
|
|
@@ -9,18 +9,25 @@ interface AnalyticsFunnelProps {
|
|
|
9
9
|
funnelType: FunnelProps['funnelType'];
|
|
10
10
|
optionalStepNumbers: FunnelProps['optionalStepNumbers'];
|
|
11
11
|
totalFunnelSteps: FunnelProps['totalFunnelSteps'];
|
|
12
|
+
instanceId?: AnalyticsMetadata['instanceId'];
|
|
13
|
+
flowType?: AnalyticsMetadata['flowType'];
|
|
14
|
+
errorContext?: AnalyticsMetadata['errorContext'];
|
|
12
15
|
}
|
|
13
16
|
export declare const AnalyticsFunnel: (props: AnalyticsFunnelProps) => JSX.Element;
|
|
14
17
|
export declare const CREATION_EDIT_FLOW_DONE_EVENT_NAME = "awsui-creation-edit-flow-done";
|
|
15
18
|
interface AnalyticsFunnelStepProps {
|
|
19
|
+
instanceId?: AnalyticsMetadata['instanceId'];
|
|
20
|
+
errorContext?: AnalyticsMetadata['errorContext'];
|
|
16
21
|
children?: React.ReactNode | ((props: FunnelStepContextValue) => React.ReactNode);
|
|
17
22
|
stepNameSelector?: FunnelStepProps['stepNameSelector'];
|
|
18
23
|
stepNumber: FunnelStepProps['stepNumber'];
|
|
19
24
|
}
|
|
20
25
|
export declare const AnalyticsFunnelStep: (props: AnalyticsFunnelStepProps) => JSX.Element;
|
|
21
26
|
interface AnalyticsFunnelSubStepProps {
|
|
27
|
+
instanceId?: AnalyticsMetadata['instanceId'];
|
|
28
|
+
errorContext?: AnalyticsMetadata['errorContext'];
|
|
22
29
|
children?: React.ReactNode | ((props: FunnelSubStepContextValue) => React.ReactNode);
|
|
23
30
|
}
|
|
24
|
-
export declare const AnalyticsFunnelSubStep: ({ children }: AnalyticsFunnelSubStepProps) => JSX.Element;
|
|
31
|
+
export declare const AnalyticsFunnelSubStep: ({ children, instanceId }: AnalyticsFunnelSubStepProps) => JSX.Element;
|
|
25
32
|
export {};
|
|
26
33
|
//# sourceMappingURL=analytics-funnel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"","sources":["../../../../../src/internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAKL,sBAAsB,EAEtB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AAQtC,OAAO,
|
|
1
|
+
{"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"","sources":["../../../../../src/internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAKL,sBAAsB,EAEtB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AAQtC,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,eAAe,EACf,iBAAiB,EAElB,MAAM,eAAe,CAAC;AAavB,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,UAAU,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;IACtC,mBAAmB,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;IACxD,gBAAgB,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,UAAW,oBAAoB,gBAa1D,CAAC;AACF,eAAO,MAAM,kCAAkC,kCAAkC,CAAC;AAkLlF,UAAU,wBAAwB;IAChC,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC7C,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF,gBAAgB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACvD,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,gBAMlE,CAAC;AA4KF,UAAU,2BAA2B;IACnC,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC7C,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACtF;AAED,eAAO,MAAM,sBAAsB,6BAA8B,2BAA2B,gBAkG3F,CAAC"}
|
|
@@ -91,6 +91,8 @@ const InnerAnalyticsFunnel = (_a) => {
|
|
|
91
91
|
{ number: 1, isOptional: false, name: (_a = getNameFromSelector(funnelNameSelector.current)) !== null && _a !== void 0 ? _a : '' },
|
|
92
92
|
];
|
|
93
93
|
funnelInteractionId = FunnelMetrics.funnelStart({
|
|
94
|
+
instanceId: props.instanceId,
|
|
95
|
+
flowType: props.flowType,
|
|
94
96
|
funnelNameSelector: funnelNameSelector.current,
|
|
95
97
|
optionalStepNumbers: props.optionalStepNumbers,
|
|
96
98
|
funnelType: props.funnelType,
|
|
@@ -236,7 +238,7 @@ function useStepChangeListener(stepNumber, handler) {
|
|
|
236
238
|
return { onStepChange: stepChangeCallback, subStepConfiguration };
|
|
237
239
|
}
|
|
238
240
|
const InnerAnalyticsFunnelStep = (_a) => {
|
|
239
|
-
var { children, stepNumber } = _a, rest = __rest(_a, ["children", "stepNumber"]);
|
|
241
|
+
var { children, stepNumber, instanceId } = _a, rest = __rest(_a, ["children", "stepNumber", "instanceId"]);
|
|
240
242
|
const { funnelInteractionId, funnelNameSelector, funnelState, funnelType } = useFunnel();
|
|
241
243
|
const parentStep = useFunnelStep();
|
|
242
244
|
const parentStepExists = parentStep.isInStep;
|
|
@@ -251,6 +253,7 @@ const InnerAnalyticsFunnelStep = (_a) => {
|
|
|
251
253
|
}
|
|
252
254
|
const stepName = (_a = getNameFromSelector(stepNameSelector)) !== null && _a !== void 0 ? _a : '';
|
|
253
255
|
FunnelMetrics.funnelStepChange({
|
|
256
|
+
instanceId,
|
|
254
257
|
funnelInteractionId,
|
|
255
258
|
stepNumber,
|
|
256
259
|
stepName,
|
|
@@ -280,6 +283,7 @@ const InnerAnalyticsFunnelStep = (_a) => {
|
|
|
280
283
|
const stepName = getNameFromSelector(stepNameSelector);
|
|
281
284
|
if (funnelState.current === 'default') {
|
|
282
285
|
FunnelMetrics.funnelStepStart({
|
|
286
|
+
instanceId,
|
|
283
287
|
funnelInteractionId,
|
|
284
288
|
stepNumber,
|
|
285
289
|
stepName,
|
|
@@ -293,6 +297,7 @@ const InnerAnalyticsFunnelStep = (_a) => {
|
|
|
293
297
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
294
298
|
if (funnelState.current !== 'cancelled') {
|
|
295
299
|
FunnelMetrics.funnelStepComplete({
|
|
300
|
+
instanceId,
|
|
296
301
|
funnelInteractionId,
|
|
297
302
|
stepNumber,
|
|
298
303
|
stepName,
|
|
@@ -304,6 +309,7 @@ const InnerAnalyticsFunnelStep = (_a) => {
|
|
|
304
309
|
}
|
|
305
310
|
};
|
|
306
311
|
}, [
|
|
312
|
+
instanceId,
|
|
307
313
|
funnelInteractionId,
|
|
308
314
|
stepNumber,
|
|
309
315
|
stepNameSelector,
|
|
@@ -313,6 +319,7 @@ const InnerAnalyticsFunnelStep = (_a) => {
|
|
|
313
319
|
parentStepFunnelInteractionId,
|
|
314
320
|
]);
|
|
315
321
|
const contextValue = {
|
|
322
|
+
instanceId,
|
|
316
323
|
stepNumber,
|
|
317
324
|
stepNameSelector,
|
|
318
325
|
funnelStepProps,
|
|
@@ -330,7 +337,7 @@ const InnerAnalyticsFunnelStep = (_a) => {
|
|
|
330
337
|
const effectiveContextValue = parentStepExists && parentStepFunnelInteractionId ? parentStep : contextValue;
|
|
331
338
|
return (React.createElement(FunnelStepContext.Provider, { value: effectiveContextValue }, typeof children === 'function' ? children(effectiveContextValue) : children));
|
|
332
339
|
};
|
|
333
|
-
export const AnalyticsFunnelSubStep = ({ children }) => {
|
|
340
|
+
export const AnalyticsFunnelSubStep = ({ children, instanceId }) => {
|
|
334
341
|
const subStepId = useUniqueId('substep');
|
|
335
342
|
const subStepSelector = getSubStepSelector(subStepId);
|
|
336
343
|
const subStepNameSelector = getSubStepNameSelector(subStepId);
|
|
@@ -342,6 +349,7 @@ export const AnalyticsFunnelSubStep = ({ children }) => {
|
|
|
342
349
|
const { funnelState, funnelInteractionId } = useFunnel();
|
|
343
350
|
const { stepNumber, stepNameSelector } = useFunnelStep();
|
|
344
351
|
const newContext = {
|
|
352
|
+
instanceId,
|
|
345
353
|
subStepSelector,
|
|
346
354
|
subStepNameSelector,
|
|
347
355
|
subStepId,
|