@cloudscape-design/components 3.0.638 → 3.0.640
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/annotation-context/annotation/styles.css.js +24 -24
- package/annotation-context/annotation/styles.scoped.css +31 -31
- package/annotation-context/annotation/styles.selectors.js +24 -24
- package/app-layout/implementation.d.ts +31 -0
- package/app-layout/implementation.d.ts.map +1 -1
- package/app-layout/implementation.js +2 -0
- package/app-layout/implementation.js.map +1 -1
- package/app-layout/interfaces.d.ts +7 -0
- package/app-layout/interfaces.d.ts.map +1 -1
- package/app-layout/interfaces.js.map +1 -1
- package/app-layout/internal.js +1 -1
- package/app-layout/internal.js.map +1 -1
- package/app-layout/notifications/styles.css.js +3 -3
- package/app-layout/notifications/styles.scoped.css +7 -7
- package/app-layout/notifications/styles.selectors.js +3 -3
- package/app-layout/skeleton/index.d.ts +1 -1
- package/app-layout/skeleton/index.d.ts.map +1 -1
- package/app-layout/skeleton/index.js +2 -2
- package/app-layout/skeleton/index.js.map +1 -1
- package/app-layout/skeleton/layout.d.ts +2 -2
- package/app-layout/skeleton/layout.d.ts.map +1 -1
- package/app-layout/skeleton/layout.js +5 -4
- package/app-layout/skeleton/layout.js.map +1 -1
- package/app-layout/skeleton/styles.css.js +11 -11
- package/app-layout/skeleton/styles.scoped.css +99 -38
- package/app-layout/skeleton/styles.selectors.js +11 -11
- package/app-layout/utils/use-app-layout-placement.js +1 -1
- package/app-layout/utils/use-app-layout-placement.js.map +1 -1
- package/app-layout/utils/use-pointer-events.d.ts.map +1 -1
- package/app-layout/utils/use-pointer-events.js +1 -1
- package/app-layout/utils/use-pointer-events.js.map +1 -1
- package/app-layout/visual-refresh/background.d.ts.map +1 -1
- package/app-layout/visual-refresh/background.js +3 -3
- package/app-layout/visual-refresh/background.js.map +1 -1
- package/app-layout/visual-refresh/breadcrumbs.d.ts.map +1 -1
- package/app-layout/visual-refresh/breadcrumbs.js +4 -3
- package/app-layout/visual-refresh/breadcrumbs.js.map +1 -1
- package/app-layout/visual-refresh/context.js +1 -1
- package/app-layout/visual-refresh/context.js.map +1 -1
- package/app-layout/visual-refresh/drawers.d.ts.map +1 -1
- package/app-layout/visual-refresh/drawers.js +5 -5
- package/app-layout/visual-refresh/drawers.js.map +1 -1
- package/app-layout/visual-refresh/header.d.ts.map +1 -1
- package/app-layout/visual-refresh/header.js +4 -3
- package/app-layout/visual-refresh/header.js.map +1 -1
- package/app-layout/visual-refresh/layout.d.ts.map +1 -1
- package/app-layout/visual-refresh/layout.js +2 -0
- package/app-layout/visual-refresh/layout.js.map +1 -1
- package/app-layout/visual-refresh/mobile-toolbar.d.ts.map +1 -1
- package/app-layout/visual-refresh/mobile-toolbar.js +4 -4
- 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 +2 -2
- package/app-layout/visual-refresh/navigation.js.map +1 -1
- package/app-layout/visual-refresh/notifications.d.ts.map +1 -1
- package/app-layout/visual-refresh/notifications.js +4 -3
- package/app-layout/visual-refresh/notifications.js.map +1 -1
- package/app-layout/visual-refresh/styles.css.js +83 -81
- package/app-layout/visual-refresh/styles.scoped.css +266 -258
- package/app-layout/visual-refresh/styles.selectors.js +83 -81
- package/app-layout/visual-refresh/tools.d.ts.map +1 -1
- package/app-layout/visual-refresh/tools.js +4 -4
- package/app-layout/visual-refresh/tools.js.map +1 -1
- package/app-layout/visual-refresh/trigger-button.d.ts +1 -0
- package/app-layout/visual-refresh/trigger-button.d.ts.map +1 -1
- package/app-layout/visual-refresh/trigger-button.js +2 -3
- package/app-layout/visual-refresh/trigger-button.js.map +1 -1
- package/area-chart/internal.js +1 -1
- package/area-chart/internal.js.map +1 -1
- package/cards/index.d.ts.map +1 -1
- package/cards/index.js +4 -6
- package/cards/index.js.map +1 -1
- package/cards/styles.css.js +39 -40
- package/cards/styles.scoped.css +50 -50
- package/cards/styles.selectors.js +39 -40
- package/container/internal.d.ts +2 -2
- package/container/internal.d.ts.map +1 -1
- package/container/internal.js +5 -7
- package/container/internal.js.map +1 -1
- package/container/styles.css.js +28 -30
- package/container/styles.scoped.css +52 -65
- package/container/styles.selectors.js +28 -30
- package/container/use-sticky-header.js +2 -2
- package/container/use-sticky-header.js.map +1 -1
- package/content-layout/interfaces.d.ts +52 -0
- package/content-layout/interfaces.d.ts.map +1 -1
- package/content-layout/interfaces.js.map +1 -1
- package/content-layout/internal.d.ts +1 -1
- package/content-layout/internal.d.ts.map +1 -1
- package/content-layout/internal.js +37 -7
- package/content-layout/internal.js.map +1 -1
- package/content-layout/styles.css.js +14 -7
- package/content-layout/styles.scoped.css +57 -37
- package/content-layout/styles.selectors.js +14 -7
- package/content-layout/test-classes/styles.css.js +9 -0
- package/content-layout/test-classes/styles.scoped.css +19 -0
- package/content-layout/test-classes/styles.selectors.js +10 -0
- package/flashbar/styles.css.js +47 -47
- package/flashbar/styles.scoped.css +171 -171
- package/flashbar/styles.selectors.js +47 -47
- package/internal/components/cartesian-chart/inline-start-labels.js +1 -1
- package/internal/components/cartesian-chart/inline-start-labels.js.map +1 -1
- package/internal/components/dropdown/dropdown-fit-handler.js +1 -1
- package/internal/components/dropdown/dropdown-fit-handler.js.map +1 -1
- package/internal/components/dropdown/index.js +1 -1
- package/internal/components/dropdown/index.js.map +1 -1
- package/internal/components/dropdown/styles.css.js +20 -20
- package/internal/components/dropdown/styles.scoped.css +41 -41
- package/internal/components/dropdown/styles.selectors.js +20 -20
- package/internal/components/responsive-text/index.js +1 -1
- package/internal/components/responsive-text/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/custom-css-properties/index.d.ts.map +1 -1
- package/internal/generated/custom-css-properties/index.js +56 -51
- package/internal/generated/custom-css-properties/index.js.map +1 -1
- package/internal/hooks/use-scroll-sync/index.d.ts +1 -1
- package/internal/hooks/use-scroll-sync/index.d.ts.map +1 -1
- package/internal/hooks/use-scroll-sync/index.js +2 -4
- package/internal/hooks/use-scroll-sync/index.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/internal/utils/content-header-utils.d.ts +1 -0
- package/internal/utils/content-header-utils.d.ts.map +1 -1
- package/internal/utils/content-header-utils.js +2 -1
- package/internal/utils/content-header-utils.js.map +1 -1
- package/internal/utils/dom.d.ts +0 -5
- package/internal/utils/dom.d.ts.map +1 -1
- package/internal/utils/dom.js +0 -12
- package/internal/utils/dom.js.map +1 -1
- package/internal/utils/handle-key.js +1 -1
- package/internal/utils/handle-key.js.map +1 -1
- package/link/interfaces.d.ts +6 -1
- package/link/interfaces.d.ts.map +1 -1
- package/link/interfaces.js.map +1 -1
- package/link/internal.d.ts.map +1 -1
- package/link/internal.js +12 -2
- package/link/internal.js.map +1 -1
- package/mixed-line-bar-chart/chart-container.js +1 -1
- package/mixed-line-bar-chart/chart-container.js.map +1 -1
- package/package.json +1 -1
- package/pie-chart/responsive-text.js +1 -1
- package/pie-chart/responsive-text.js.map +1 -1
- package/popover/use-popover-position.js +1 -1
- package/popover/use-popover-position.js.map +1 -1
- package/slider/styles.css.js +25 -25
- package/slider/styles.scoped.css +71 -71
- package/slider/styles.selectors.js +25 -25
- package/spinner/styles.css.js +13 -13
- package/spinner/styles.scoped.css +39 -39
- package/spinner/styles.selectors.js +13 -13
- package/split-panel/bottom.d.ts.map +1 -1
- package/split-panel/bottom.js +4 -2
- package/split-panel/bottom.js.map +1 -1
- package/split-panel/icons/bottom-icon-refresh.d.ts.map +1 -1
- package/split-panel/icons/bottom-icon-refresh.js +1 -2
- package/split-panel/icons/bottom-icon-refresh.js.map +1 -1
- package/split-panel/icons/bottom-icon.js +1 -1
- package/split-panel/icons/bottom-icon.js.map +1 -1
- package/split-panel/icons/side-position-refresh.d.ts.map +1 -1
- package/split-panel/icons/side-position-refresh.js +2 -3
- package/split-panel/icons/side-position-refresh.js.map +1 -1
- package/split-panel/icons/side-position.js +1 -1
- package/split-panel/icons/side-position.js.map +1 -1
- package/split-panel/icons/styles.css.js +27 -0
- package/split-panel/icons/styles.scoped.css +168 -0
- package/split-panel/icons/styles.selectors.js +28 -0
- package/split-panel/implementation.d.ts.map +1 -1
- package/split-panel/implementation.js +7 -6
- package/split-panel/implementation.js.map +1 -1
- package/split-panel/internal.js +1 -1
- package/split-panel/internal.js.map +1 -1
- package/split-panel/side.d.ts.map +1 -1
- package/split-panel/side.js +5 -3
- package/split-panel/side.js.map +1 -1
- package/split-panel/styles.css.js +31 -57
- package/split-panel/styles.scoped.css +51 -235
- package/split-panel/styles.selectors.js +31 -57
- package/split-panel/test-classes/styles.css.js +13 -0
- package/split-panel/test-classes/styles.scoped.css +14 -0
- package/split-panel/test-classes/styles.selectors.js +14 -0
- package/table/interfaces.d.ts +1 -0
- package/table/interfaces.d.ts.map +1 -1
- package/table/interfaces.js.map +1 -1
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +2 -8
- package/table/internal.js.map +1 -1
- package/table/no-data-cell.d.ts.map +1 -1
- package/table/no-data-cell.js +1 -2
- package/table/no-data-cell.js.map +1 -1
- package/table/progressive-loading/progressive-loading-utils.d.ts.map +1 -1
- package/table/progressive-loading/progressive-loading-utils.js +8 -3
- package/table/progressive-loading/progressive-loading-utils.js.map +1 -1
- package/table/resizer/index.js +1 -1
- package/table/resizer/index.js.map +1 -1
- package/table/resizer/resizer-lookup.js +1 -1
- package/table/resizer/resizer-lookup.js.map +1 -1
- package/table/sticky-columns/use-sticky-columns.js +1 -1
- package/table/sticky-columns/use-sticky-columns.js.map +1 -1
- package/table/sticky-columns/utils.js +1 -1
- package/table/sticky-columns/utils.js.map +1 -1
- package/table/sticky-scrollbar/use-sticky-scrollbar.d.ts.map +1 -1
- package/table/sticky-scrollbar/use-sticky-scrollbar.js +12 -14
- package/table/sticky-scrollbar/use-sticky-scrollbar.js.map +1 -1
- package/table/sticky-scrolling.js +1 -1
- package/table/sticky-scrolling.js.map +1 -1
- package/table/styles.css.js +34 -35
- package/table/styles.scoped.css +39 -48
- package/table/styles.selectors.js +34 -35
- package/table/table-role/grid-navigation.js +13 -13
- package/table/table-role/grid-navigation.js.map +1 -1
- package/table/use-column-widths.js +1 -1
- package/table/use-column-widths.js.map +1 -1
- package/tabs/scroll-utils.js +1 -1
- package/tabs/scroll-utils.js.map +1 -1
- package/test-utils/dom/app-layout/index.js +1 -1
- package/test-utils/dom/app-layout/index.js.map +1 -1
- package/test-utils/dom/content-layout/index.d.ts +3 -0
- package/test-utils/dom/content-layout/index.js +11 -1
- package/test-utils/dom/content-layout/index.js.map +1 -1
- package/test-utils/dom/split-panel/index.js +3 -3
- package/test-utils/dom/split-panel/index.js.map +1 -1
- package/test-utils/selectors/app-layout/index.js +1 -1
- package/test-utils/selectors/app-layout/index.js.map +1 -1
- package/test-utils/selectors/content-layout/index.d.ts +3 -0
- package/test-utils/selectors/content-layout/index.js +11 -1
- package/test-utils/selectors/content-layout/index.js.map +1 -1
- package/test-utils/selectors/split-panel/index.js +3 -3
- package/test-utils/selectors/split-panel/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
- package/wizard/internal.d.ts.map +1 -1
- package/wizard/internal.js +3 -5
- package/wizard/internal.js.map +1 -1
- package/wizard/styles.css.js +31 -32
- package/wizard/styles.scoped.css +59 -116
- package/wizard/styles.selectors.js +31 -32
- package/wizard/wizard-form-header.d.ts.map +1 -1
- package/wizard/wizard-form-header.js +2 -4
- package/wizard/wizard-form-header.js.map +1 -1
- package/wizard/wizard-navigation.d.ts.map +1 -1
- package/wizard/wizard-navigation.js +2 -3
- package/wizard/wizard-navigation.js.map +1 -1
- package/app-layout/widget.d.ts +0 -6
- package/app-layout/widget.d.ts.map +0 -1
- package/app-layout/widget.js +0 -16
- package/app-layout/widget.js.map +0 -1
- package/internal/direction.d.ts +0 -36
- package/internal/direction.d.ts.map +0 -1
- package/internal/direction.js +0 -66
- package/internal/direction.js.map +0 -1
- package/split-panel/widget.d.ts +0 -2
- package/split-panel/widget.d.ts.map +0 -1
- package/split-panel/widget.js +0 -4
- package/split-panel/widget.js.map +0 -1
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
*/
|
|
5
|
+
/* stylelint-disable plugin/no-unsupported-browser-features */
|
|
6
|
+
/* stylelint-enable plugin/no-unsupported-browser-features */
|
|
7
|
+
/*
|
|
8
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
9
|
+
SPDX-License-Identifier: Apache-2.0
|
|
10
|
+
*/
|
|
11
|
+
/*
|
|
12
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
13
|
+
SPDX-License-Identifier: Apache-2.0
|
|
14
|
+
*/
|
|
15
|
+
/*
|
|
16
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
17
|
+
SPDX-License-Identifier: Apache-2.0
|
|
18
|
+
*/
|
|
19
|
+
/*
|
|
20
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
21
|
+
SPDX-License-Identifier: Apache-2.0
|
|
22
|
+
*/
|
|
23
|
+
/*
|
|
24
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
25
|
+
SPDX-License-Identifier: Apache-2.0
|
|
26
|
+
*/
|
|
27
|
+
/*
|
|
28
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
29
|
+
SPDX-License-Identifier: Apache-2.0
|
|
30
|
+
*/
|
|
31
|
+
/*
|
|
32
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
33
|
+
SPDX-License-Identifier: Apache-2.0
|
|
34
|
+
*/
|
|
35
|
+
/*
|
|
36
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
37
|
+
SPDX-License-Identifier: Apache-2.0
|
|
38
|
+
*/
|
|
39
|
+
/*
|
|
40
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
41
|
+
SPDX-License-Identifier: Apache-2.0
|
|
42
|
+
*/
|
|
43
|
+
/*
|
|
44
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
45
|
+
SPDX-License-Identifier: Apache-2.0
|
|
46
|
+
*/
|
|
47
|
+
/*
|
|
48
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
49
|
+
SPDX-License-Identifier: Apache-2.0
|
|
50
|
+
*/
|
|
51
|
+
/*
|
|
52
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
53
|
+
SPDX-License-Identifier: Apache-2.0
|
|
54
|
+
*/
|
|
55
|
+
/*
|
|
56
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
57
|
+
SPDX-License-Identifier: Apache-2.0
|
|
58
|
+
*/
|
|
59
|
+
/*
|
|
60
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
61
|
+
SPDX-License-Identifier: Apache-2.0
|
|
62
|
+
*/
|
|
63
|
+
/*
|
|
64
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
65
|
+
SPDX-License-Identifier: Apache-2.0
|
|
66
|
+
*/
|
|
67
|
+
/*
|
|
68
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
69
|
+
SPDX-License-Identifier: Apache-2.0
|
|
70
|
+
*/
|
|
71
|
+
/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
72
|
+
/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
73
|
+
/*
|
|
74
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
75
|
+
SPDX-License-Identifier: Apache-2.0
|
|
76
|
+
*/
|
|
77
|
+
/*
|
|
78
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
79
|
+
SPDX-License-Identifier: Apache-2.0
|
|
80
|
+
*/
|
|
81
|
+
/*
|
|
82
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
83
|
+
SPDX-License-Identifier: Apache-2.0
|
|
84
|
+
*/
|
|
85
|
+
/*
|
|
86
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
87
|
+
SPDX-License-Identifier: Apache-2.0
|
|
88
|
+
*/
|
|
89
|
+
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
90
|
+
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
91
|
+
/*
|
|
92
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
93
|
+
SPDX-License-Identifier: Apache-2.0
|
|
94
|
+
*/
|
|
95
|
+
/*
|
|
96
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
97
|
+
SPDX-License-Identifier: Apache-2.0
|
|
98
|
+
*/
|
|
99
|
+
.awsui_preference-icon--svg_d4xxm_ki3ox_99:not(#\9):dir(rtl) {
|
|
100
|
+
transform: scaleX(-1);
|
|
101
|
+
}
|
|
102
|
+
.awsui_preference-icon--layout-border_d4xxm_ki3ox_102:not(#\9) {
|
|
103
|
+
stroke: var(--color-background-home-header-2rudu7, #000716);
|
|
104
|
+
fill: var(--color-background-container-content-4un1ap, #ffffff);
|
|
105
|
+
}
|
|
106
|
+
.awsui_preference-icon--layout-background_d4xxm_ki3ox_106:not(#\9) {
|
|
107
|
+
fill: var(--color-background-layout-main-nx09lr, #ffffff);
|
|
108
|
+
}
|
|
109
|
+
.awsui_preference-icon--layout-header_d4xxm_ki3ox_109:not(#\9) {
|
|
110
|
+
fill: var(--color-background-home-header-2rudu7, #000716);
|
|
111
|
+
}
|
|
112
|
+
.awsui_preference-icon--border_d4xxm_ki3ox_112:not(#\9) {
|
|
113
|
+
stroke: var(--color-text-group-label-jpw8sm, #414d5c);
|
|
114
|
+
fill: var(--color-background-container-content-4un1ap, #ffffff);
|
|
115
|
+
}
|
|
116
|
+
.awsui_preference-icon--primary-button_d4xxm_ki3ox_116:not(#\9) {
|
|
117
|
+
fill: var(--color-background-button-primary-default-jrg2xu, #0972d3);
|
|
118
|
+
}
|
|
119
|
+
.awsui_preference-icon--secondary_d4xxm_ki3ox_119:not(#\9) {
|
|
120
|
+
fill: var(--color-text-group-label-jpw8sm, #414d5c);
|
|
121
|
+
}
|
|
122
|
+
.awsui_preference-icon--disabled-element_d4xxm_ki3ox_122:not(#\9) {
|
|
123
|
+
fill: var(--color-background-control-disabled-pwkvgd, #d1d5db);
|
|
124
|
+
}
|
|
125
|
+
.awsui_preference-icon--separator_d4xxm_ki3ox_125:not(#\9) {
|
|
126
|
+
stroke: var(--color-background-control-disabled-pwkvgd, #d1d5db);
|
|
127
|
+
}
|
|
128
|
+
.awsui_preference-icon--focus-text_d4xxm_ki3ox_128:not(#\9) {
|
|
129
|
+
fill: var(--color-text-interactive-default-lnx6lk, #414d5c);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.awsui_preference-icon-refresh--svg_d4xxm_ki3ox_132:not(#\9):dir(rtl) {
|
|
133
|
+
transform: scaleX(-1);
|
|
134
|
+
}
|
|
135
|
+
.awsui_preference-icon-refresh--layout-top_d4xxm_ki3ox_135:not(#\9) {
|
|
136
|
+
fill: var(--color-background-button-primary-disabled-31l9pn, #e9ebed);
|
|
137
|
+
}
|
|
138
|
+
.awsui_preference-icon-refresh--layout-main_d4xxm_ki3ox_138:not(#\9) {
|
|
139
|
+
fill: var(--color-background-layout-main-nx09lr, #ffffff);
|
|
140
|
+
}
|
|
141
|
+
.awsui_preference-icon-refresh--primary_d4xxm_ki3ox_141:not(#\9) {
|
|
142
|
+
fill: var(--color-background-button-primary-default-jrg2xu, #0972d3);
|
|
143
|
+
}
|
|
144
|
+
.awsui_preference-icon-refresh--disabled_d4xxm_ki3ox_144:not(#\9) {
|
|
145
|
+
fill: var(--color-background-control-disabled-pwkvgd, #d1d5db);
|
|
146
|
+
}
|
|
147
|
+
.awsui_preference-icon-refresh--column-header_d4xxm_ki3ox_147:not(#\9) {
|
|
148
|
+
fill: var(--color-text-input-disabled-f8pjm5, #9ba7b6);
|
|
149
|
+
}
|
|
150
|
+
.awsui_preference-icon-refresh--window_d4xxm_ki3ox_150:not(#\9) {
|
|
151
|
+
stroke: var(--color-background-home-header-2rudu7, #000716);
|
|
152
|
+
fill: var(--color-background-container-content-4un1ap, #ffffff);
|
|
153
|
+
}
|
|
154
|
+
.awsui_preference-icon-refresh--secondary_d4xxm_ki3ox_154:not(#\9) {
|
|
155
|
+
fill: var(--color-text-body-secondary-w9jvno, #414d5c);
|
|
156
|
+
}
|
|
157
|
+
.awsui_preference-icon-refresh--default_d4xxm_ki3ox_157:not(#\9) {
|
|
158
|
+
fill: var(--color-text-body-default-at06ol, #000716);
|
|
159
|
+
}
|
|
160
|
+
.awsui_preference-icon-refresh--separator_d4xxm_ki3ox_160:not(#\9) {
|
|
161
|
+
stroke: var(--color-border-divider-default-j74lyz, #b6bec9);
|
|
162
|
+
}
|
|
163
|
+
.awsui_preference-icon-refresh--input-default_d4xxm_ki3ox_163:not(#\9) {
|
|
164
|
+
fill: var(--color-border-input-default-1zl7hq, #7d8998);
|
|
165
|
+
}
|
|
166
|
+
.awsui_preference-icon-refresh--heading_d4xxm_ki3ox_166:not(#\9) {
|
|
167
|
+
fill: var(--color-text-heading-default-lstrpn, #000716);
|
|
168
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
|
|
2
|
+
// es-module interop with Babel and Typescript
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
module.exports.default = {
|
|
5
|
+
"preference-icon--svg": "awsui_preference-icon--svg_d4xxm_ki3ox_99",
|
|
6
|
+
"preference-icon--layout-border": "awsui_preference-icon--layout-border_d4xxm_ki3ox_102",
|
|
7
|
+
"preference-icon--layout-background": "awsui_preference-icon--layout-background_d4xxm_ki3ox_106",
|
|
8
|
+
"preference-icon--layout-header": "awsui_preference-icon--layout-header_d4xxm_ki3ox_109",
|
|
9
|
+
"preference-icon--border": "awsui_preference-icon--border_d4xxm_ki3ox_112",
|
|
10
|
+
"preference-icon--primary-button": "awsui_preference-icon--primary-button_d4xxm_ki3ox_116",
|
|
11
|
+
"preference-icon--secondary": "awsui_preference-icon--secondary_d4xxm_ki3ox_119",
|
|
12
|
+
"preference-icon--disabled-element": "awsui_preference-icon--disabled-element_d4xxm_ki3ox_122",
|
|
13
|
+
"preference-icon--separator": "awsui_preference-icon--separator_d4xxm_ki3ox_125",
|
|
14
|
+
"preference-icon--focus-text": "awsui_preference-icon--focus-text_d4xxm_ki3ox_128",
|
|
15
|
+
"preference-icon-refresh--svg": "awsui_preference-icon-refresh--svg_d4xxm_ki3ox_132",
|
|
16
|
+
"preference-icon-refresh--layout-top": "awsui_preference-icon-refresh--layout-top_d4xxm_ki3ox_135",
|
|
17
|
+
"preference-icon-refresh--layout-main": "awsui_preference-icon-refresh--layout-main_d4xxm_ki3ox_138",
|
|
18
|
+
"preference-icon-refresh--primary": "awsui_preference-icon-refresh--primary_d4xxm_ki3ox_141",
|
|
19
|
+
"preference-icon-refresh--disabled": "awsui_preference-icon-refresh--disabled_d4xxm_ki3ox_144",
|
|
20
|
+
"preference-icon-refresh--column-header": "awsui_preference-icon-refresh--column-header_d4xxm_ki3ox_147",
|
|
21
|
+
"preference-icon-refresh--window": "awsui_preference-icon-refresh--window_d4xxm_ki3ox_150",
|
|
22
|
+
"preference-icon-refresh--secondary": "awsui_preference-icon-refresh--secondary_d4xxm_ki3ox_154",
|
|
23
|
+
"preference-icon-refresh--default": "awsui_preference-icon-refresh--default_d4xxm_ki3ox_157",
|
|
24
|
+
"preference-icon-refresh--separator": "awsui_preference-icon-refresh--separator_d4xxm_ki3ox_160",
|
|
25
|
+
"preference-icon-refresh--input-default": "awsui_preference-icon-refresh--input-default_d4xxm_ki3ox_163",
|
|
26
|
+
"preference-icon-refresh--heading": "awsui_preference-icon-refresh--heading_d4xxm_ki3ox_166"
|
|
27
|
+
};
|
|
28
|
+
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/split-panel/implementation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAO5E,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/split-panel/implementation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAO5E,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAmB/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,eAAO,MAAM,wBAAwB,qFA6OpC,CAAC;AAEF,eAAO,MAAM,0BAA0B,mMAIZ,CAAC"}
|
|
@@ -10,7 +10,6 @@ import ResizeHandler from './icons/resize-handler';
|
|
|
10
10
|
import PreferencesModal from './preferences-modal';
|
|
11
11
|
import { usePointerEvents } from '../app-layout/utils/use-pointer-events';
|
|
12
12
|
import { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';
|
|
13
|
-
import styles from './styles.css.js';
|
|
14
13
|
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
15
14
|
import { Transition } from '../internal/components/transition';
|
|
16
15
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
@@ -20,6 +19,8 @@ import { SplitPanelContentBottom } from './bottom';
|
|
|
20
19
|
import { useInternalI18n } from '../i18n/context';
|
|
21
20
|
import globalVars from '../internal/styles/global-vars';
|
|
22
21
|
import { createWidgetizedForwardRef } from '../internal/widgets';
|
|
22
|
+
import styles from './styles.css.js';
|
|
23
|
+
import testUtilStyles from './test-classes/styles.css.js';
|
|
23
24
|
export const SplitPanelImplementation = React.forwardRef((_a, __internalRootRef) => {
|
|
24
25
|
var { header, children, hidePreferencesButton = false, closeBehavior = 'collapse', i18nStrings } = _a, restProps = __rest(_a, ["header", "children", "hidePreferencesButton", "closeBehavior", "i18nStrings"]);
|
|
25
26
|
const isRefresh = useVisualRefresh();
|
|
@@ -47,17 +48,17 @@ export const SplitPanelImplementation = React.forwardRef((_a, __internalRootRef)
|
|
|
47
48
|
};
|
|
48
49
|
const panelHeaderId = useUniqueId('split-panel-header');
|
|
49
50
|
const wrappedHeader = (React.createElement("div", { className: styles.header, style: appLayoutMaxWidth },
|
|
50
|
-
React.createElement("h2", { className: styles['header-text'], id: panelHeaderId }, header),
|
|
51
|
+
React.createElement("h2", { className: clsx(styles['header-text'], testUtilStyles['header-text']), id: panelHeaderId }, header),
|
|
51
52
|
React.createElement("div", { className: styles['header-actions'] },
|
|
52
53
|
!hidePreferencesButton && isOpen && (React.createElement(React.Fragment, null,
|
|
53
|
-
React.createElement(InternalButton, { className:
|
|
54
|
+
React.createElement(InternalButton, { className: testUtilStyles['preferences-button'], iconName: "settings", variant: "icon", onClick: () => setPreferencesOpen(true), formAction: "none", ariaLabel: i18n('i18nStrings.preferencesTitle', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesTitle), ref: refs.preferences }),
|
|
54
55
|
React.createElement("span", { className: styles.divider }))),
|
|
55
|
-
isOpen ? (React.createElement(InternalButton, { className:
|
|
56
|
+
isOpen ? (React.createElement(InternalButton, { className: testUtilStyles['close-button'], iconName: isRefresh && closeBehavior === 'collapse'
|
|
56
57
|
? position === 'side'
|
|
57
58
|
? 'angle-right'
|
|
58
59
|
: 'angle-down'
|
|
59
|
-
: 'close', variant: "icon", onClick: onToggle, formAction: "none", ariaLabel: i18n('i18nStrings.closeButtonAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.closeButtonAriaLabel), ariaExpanded: isOpen })) : position === 'side' ? null : (React.createElement(InternalButton, { className:
|
|
60
|
-
const resizeHandle = (React.createElement("div", { ref: refs.slider, role: "slider", tabIndex: 0, "aria-label": i18n('i18nStrings.resizeHandleAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.resizeHandleAriaLabel), "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": position === 'bottom' ? relativeSize : 100 - relativeSize, className: clsx(styles.slider, styles[`slider-${position}`]), onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown },
|
|
60
|
+
: 'close', variant: "icon", onClick: onToggle, formAction: "none", ariaLabel: i18n('i18nStrings.closeButtonAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.closeButtonAriaLabel), ariaExpanded: isOpen })) : position === 'side' ? null : (React.createElement(InternalButton, { className: testUtilStyles['open-button'], iconName: "angle-up", variant: "icon", formAction: "none", ariaLabel: i18n('i18nStrings.openButtonAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.openButtonAriaLabel), ref: refs.toggle, ariaExpanded: isOpen })))));
|
|
61
|
+
const resizeHandle = (React.createElement("div", { ref: refs.slider, role: "slider", tabIndex: 0, "aria-label": i18n('i18nStrings.resizeHandleAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.resizeHandleAriaLabel), "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": position === 'bottom' ? relativeSize : 100 - relativeSize, className: clsx(styles.slider, styles[`slider-${position}`], testUtilStyles.slider), onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown },
|
|
61
62
|
React.createElement(ResizeHandler, { className: clsx(styles['slider-icon'], styles[`slider-icon-${position}`]) })));
|
|
62
63
|
/*
|
|
63
64
|
This effect forces the browser to recalculate the layout
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/split-panel/implementation.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAG/E,OAAO,aAAa,MAAM,wBAAwB,CAAC;AACnD,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAG5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAC;AAIjE,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC,UAAU,CACtD,CACE,EAA0G,EAC1G,iBAAiB,EACjB,EAAE;QAFF,EAAE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,GAAG,KAAK,EAAE,aAAa,GAAG,UAAU,EAAE,WAAW,OAAgB,EAAX,SAAS,cAAxG,+EAA0G,CAAF;IAGxG,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,MAAM,EACN,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,IAAI,GACL,GAAG,oBAAoB,EAAE,CAAC;IAC3B,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C,MAAM,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEzE,MAAM,iBAAiB,GAAG,SAAS,IAAI,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9F,MAAM,mBAAmB,GAAG,IAAI,CAAC,iCAAiC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC,CAAC;IACtG,SAAS,CAAC,GAAG,EAAE;QACb,mBAAmB,CAAC,EAAE,SAAS,EAAE,aAAa,KAAK,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC,CAAC;IACnG,CAAC,EAAE,CAAC,mBAAmB,EAAE,mBAAmB,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9D,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,gBAAgB,GAAqB;QACzC,QAAQ;QACR,QAAQ,EAAE,mBAAmB;QAC7B,SAAS,EAAE,IAAI,CAAC,MAAM;QACtB,QAAQ;KACT,CAAC;IACF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG;QACnB,CAAC,UAAU,CAAC,uBAAuB,CAAC,EAAE,SAAS;QAC/C,CAAC,UAAU,CAAC,0BAA0B,CAAC,EAAE,YAAY;KACtD,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAExD,MAAM,aAAa,GAAG,CACpB,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,iBAAiB;QACrD,4BAAI,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE,EAAE,EAAE,aAAa,IACpD,MAAM,CACJ;QACL,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;YACrC,CAAC,qBAAqB,IAAI,MAAM,IAAI,CACnC;gBACE,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,EACvC,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,EACvC,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,EAC9E,GAAG,EAAE,IAAI,CAAC,WAAW,GACrB;gBACF,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,CAClC,CACJ;YAEA,MAAM,CAAC,CAAC,CAAC,CACR,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EACjC,QAAQ,EACN,SAAS,IAAI,aAAa,KAAK,UAAU;oBACvC,CAAC,CAAC,QAAQ,KAAK,MAAM;wBACnB,CAAC,CAAC,aAAa;wBACf,CAAC,CAAC,YAAY;oBAChB,CAAC,CAAC,OAAO,EAEb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,QAAQ,EACjB,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,IAAI,CAAC,kCAAkC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oBAAoB,CAAC,EACtF,YAAY,EAAE,MAAM,GACpB,CACH,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/B,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAChC,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,IAAI,CAAC,iCAAiC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC,EACpF,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,YAAY,EAAE,MAAM,GACpB,CACH,CACG,CACF,CACP,CAAC;IAEF,MAAM,YAAY,GAAG,CACnB,6BACE,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACC,IAAI,CAAC,mCAAmC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,qBAAqB,CAAC,mBAC1E,GAAG,mBACH,CAAC,mBAID,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAAG,YAAY,EACxE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,QAAQ,EAAE,CAAC,CAAC,EAC5D,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,mBAAmB;QAElC,oBAAC,aAAa,IAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC,GAAI,CACxF,CACP,CAAC;IAEF;;;;;;;IAOA;IACA,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,mBAAmB,CAAC,OAAO,CAAC;QAEzC,IAAI,IAAI,EAAE;YACR,MAAM,QAAQ,GAAG,WAAW,CAAC;YAC7B,MAAM,cAAc,GAAG,eAAe,CAAC;YAEvC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YACzC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,cAAc,CAAC;YAEtC,yDAAyD;YACzD,KAAK,IAAI,CAAC,YAAY,CAAC;YAEvB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,WAAW,CAAC;SACpC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAErC,MAAM,SAAS,GAAG,YAAY,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;IAEvE,IAAI,aAAa,KAAK,MAAM,IAAI,CAAC,MAAM,EAAE;QACvC,OAAO,yCAAK,CAAC;KACd;IAED;;;;;OAKG;IACH,IAAI,SAAS,IAAI,CAAC,MAAM,IAAI,QAAQ,KAAK,MAAM,EAAE;QAC/C,OAAO,yCAAK,CAAC;KACd;IAED,OAAO,CACL,oBAAC,UAAU,IAAC,EAAE,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,KAAK,IAC5B,CAAC,KAAK,EAAE,uBAAuB,EAAE,EAAE,CAAC,CACnC;QACG,QAAQ,KAAK,MAAM,IAAI,CACtB,oBAAC,qBAAqB,IACpB,KAAK,EAAE,YAAY,EACnB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,SAAS,EACxB,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,mBAAmB,EAAE,IAAI,CAAC,iCAAiC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC,EAC9F,SAAS,EAAE,IAAI,CAAC,MAAM,EACtB,MAAM,EAAE,aAAa,EACrB,aAAa,EAAE,aAAa,IAE3B,QAAQ,CACa,CACzB;QAEA,QAAQ,KAAK,QAAQ,IAAI,CACxB,oBAAC,uBAAuB,IACtB,KAAK,EAAE,YAAY,EACnB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,SAAS,EACxB,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,aAAa,EACrB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,uBAAuB,EAAE,uBAAuB,EAChD,iBAAiB,EAAE,iBAAiB,IAEnC,QAAQ,CACe,CAC3B;QACA,iBAAiB,IAAI,CACpB,oBAAC,gBAAgB,IACf,OAAO,EAAE,IAAI,EACb,WAAW,EAAE,EAAE,QAAQ,EAAE,EACzB,oBAAoB,EAAE,QAAQ,KAAK,QAAQ,IAAI,gBAAgB,EAC/D,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE;gBACX,MAAM,EAAE,IAAI,CAAC,8BAA8B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC;gBAC3E,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,kBAAkB,CAAC;gBAChF,MAAM,EAAE,IAAI,CAAC,+BAA+B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,CAAC;gBAC7E,aAAa,EAAE,IAAI,CAAC,sCAAsC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,wBAAwB,CAAC;gBAClG,mBAAmB,EAAE,IAAI,CACvB,4CAA4C,EAC5C,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,8BAA8B,CAC5C;gBACD,cAAc,EAAE,IAAI,CAAC,uCAAuC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,yBAAyB,CAAC;gBACrG,YAAY,EAAE,IAAI,CAAC,qCAAqC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,uBAAuB,CAAC;aAChG,EACD,SAAS,EAAE,WAAW,CAAC,EAAE;gBACvB,mBAAmB,mBAAM,WAAW,EAAG,CAAC;gBACxC,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;gBACd,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC,GACD,CACH,CACA,CACJ,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,0BAA0B,CAIlE,wBAAwB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\n\nimport { SplitPanelProps } from './interfaces';\nimport ResizeHandler from './icons/resize-handler';\nimport PreferencesModal from './preferences-modal';\nimport { usePointerEvents } from '../app-layout/utils/use-pointer-events';\nimport { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';\nimport { SizeControlProps } from '../app-layout/utils/interfaces';\n\nimport styles from './styles.css.js';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Transition } from '../internal/components/transition';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { SplitPanelContentSide } from './side';\nimport { SplitPanelContentBottom } from './bottom';\nimport { useInternalI18n } from '../i18n/context';\nimport globalVars from '../internal/styles/global-vars';\nimport { createWidgetizedForwardRef } from '../internal/widgets';\n\nexport { SplitPanelProps };\n\nexport const SplitPanelImplementation = React.forwardRef<HTMLElement, SplitPanelProps>(\n (\n { header, children, hidePreferencesButton = false, closeBehavior = 'collapse', i18nStrings, ...restProps },\n __internalRootRef\n ) => {\n const isRefresh = useVisualRefresh();\n\n const {\n position,\n topOffset,\n bottomOffset,\n rightOffset,\n contentWidthStyles,\n isOpen,\n isForcedPosition,\n onPreferencesChange,\n onResize,\n onToggle,\n size,\n relativeSize,\n setSplitPanelToggle,\n refs,\n } = useSplitPanelContext();\n const baseProps = getBaseProps(restProps);\n const i18n = useInternalI18n('split-panel');\n const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);\n\n const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;\n\n const openButtonAriaLabel = i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel);\n useEffect(() => {\n setSplitPanelToggle({ displayed: closeBehavior === 'collapse', ariaLabel: openButtonAriaLabel });\n }, [setSplitPanelToggle, openButtonAriaLabel, closeBehavior]);\n\n const splitPanelRefObject = useRef<HTMLDivElement>(null);\n\n const sizeControlProps: SizeControlProps = {\n position,\n panelRef: splitPanelRefObject,\n handleRef: refs.slider,\n onResize,\n };\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const contentStyle = {\n [globalVars.stickyVerticalTopOffset]: topOffset,\n [globalVars.stickyVerticalBottomOffset]: bottomOffset,\n };\n\n const panelHeaderId = useUniqueId('split-panel-header');\n\n const wrappedHeader = (\n <div className={styles.header} style={appLayoutMaxWidth}>\n <h2 className={styles['header-text']} id={panelHeaderId}>\n {header}\n </h2>\n <div className={styles['header-actions']}>\n {!hidePreferencesButton && isOpen && (\n <>\n <InternalButton\n className={styles['preferences-button']}\n iconName=\"settings\"\n variant=\"icon\"\n onClick={() => setPreferencesOpen(true)}\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle)}\n ref={refs.preferences}\n />\n <span className={styles.divider} />\n </>\n )}\n\n {isOpen ? (\n <InternalButton\n className={styles['close-button']}\n iconName={\n isRefresh && closeBehavior === 'collapse'\n ? position === 'side'\n ? 'angle-right'\n : 'angle-down'\n : 'close'\n }\n variant=\"icon\"\n onClick={onToggle}\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.closeButtonAriaLabel', i18nStrings?.closeButtonAriaLabel)}\n ariaExpanded={isOpen}\n />\n ) : position === 'side' ? null : (\n <InternalButton\n className={styles['open-button']}\n iconName=\"angle-up\"\n variant=\"icon\"\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel)}\n ref={refs.toggle}\n ariaExpanded={isOpen}\n />\n )}\n </div>\n </div>\n );\n\n const resizeHandle = (\n <div\n ref={refs.slider}\n role=\"slider\"\n tabIndex={0}\n aria-label={i18n('i18nStrings.resizeHandleAriaLabel', i18nStrings?.resizeHandleAriaLabel)}\n aria-valuemax={100}\n aria-valuemin={0}\n // Allows us to use the logical left/right keys to move the slider left/right,\n // but match aria keyboard behavior of using left/right to decrease/increase\n // the slider value.\n aria-valuenow={position === 'bottom' ? relativeSize : 100 - relativeSize}\n className={clsx(styles.slider, styles[`slider-${position}`])}\n onKeyDown={onKeyDown}\n onPointerDown={onSliderPointerDown}\n >\n <ResizeHandler className={clsx(styles['slider-icon'], styles[`slider-icon-${position}`])} />\n </div>\n );\n\n /*\n This effect forces the browser to recalculate the layout\n whenever the split panel might have moved.\n\n This is needed as a workaround for a bug in Safari, which does\n not automatically calculate the new position of the split panel\n _content_ when the split panel moves.\n */\n useLayoutEffect(() => {\n const root = splitPanelRefObject.current;\n\n if (root) {\n const property = 'transform';\n const temporaryValue = 'translateZ(0)';\n\n const valueBefore = root.style[property];\n root.style[property] = temporaryValue;\n\n // This line forces the browser to recalculate the layout\n void root.offsetHeight;\n\n root.style[property] = valueBefore;\n }\n }, [rightOffset, __internalRootRef]);\n\n const mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef);\n\n if (closeBehavior === 'hide' && !isOpen) {\n return <></>;\n }\n\n /**\n * The AppLayout factor moved the circular buttons out of the\n * SplitPanel and into the Tools component. This conditional\n * is still needed for the early return to prevent execution\n * of the following code.\n */\n if (isRefresh && !isOpen && position === 'side') {\n return <></>;\n }\n\n return (\n <Transition in={isOpen ?? false}>\n {(state, transitioningElementRef) => (\n <>\n {position === 'side' && (\n <SplitPanelContentSide\n style={contentStyle}\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={size}\n onToggle={onToggle}\n openButtonAriaLabel={i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel)}\n toggleRef={refs.toggle}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n >\n {children}\n </SplitPanelContentSide>\n )}\n\n {position === 'bottom' && (\n <SplitPanelContentBottom\n style={contentStyle}\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={size}\n onToggle={onToggle}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n state={state}\n transitioningElementRef={transitioningElementRef}\n appLayoutMaxWidth={appLayoutMaxWidth}\n >\n {children}\n </SplitPanelContentBottom>\n )}\n {isPreferencesOpen && (\n <PreferencesModal\n visible={true}\n preferences={{ position }}\n disabledSidePosition={position === 'bottom' && isForcedPosition}\n isRefresh={isRefresh}\n i18nStrings={{\n header: i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle),\n confirm: i18n('i18nStrings.preferencesConfirm', i18nStrings?.preferencesConfirm),\n cancel: i18n('i18nStrings.preferencesCancel', i18nStrings?.preferencesCancel),\n positionLabel: i18n('i18nStrings.preferencesPositionLabel', i18nStrings?.preferencesPositionLabel),\n positionDescription: i18n(\n 'i18nStrings.preferencesPositionDescription',\n i18nStrings?.preferencesPositionDescription\n ),\n positionBottom: i18n('i18nStrings.preferencesPositionBottom', i18nStrings?.preferencesPositionBottom),\n positionSide: i18n('i18nStrings.preferencesPositionSide', i18nStrings?.preferencesPositionSide),\n }}\n onConfirm={preferences => {\n onPreferencesChange({ ...preferences });\n setPreferencesOpen(false);\n }}\n onDismiss={() => {\n setPreferencesOpen(false);\n }}\n />\n )}\n </>\n )}\n </Transition>\n );\n }\n);\n\nexport const createWidgetizedSplitPanel = createWidgetizedForwardRef<\n SplitPanelProps,\n HTMLElement,\n typeof SplitPanelImplementation\n>(SplitPanelImplementation);\n"]}
|
|
1
|
+
{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/split-panel/implementation.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, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\n\nimport { SplitPanelProps } from './interfaces';\nimport ResizeHandler from './icons/resize-handler';\nimport PreferencesModal from './preferences-modal';\nimport { usePointerEvents } from '../app-layout/utils/use-pointer-events';\nimport { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';\nimport { SizeControlProps } from '../app-layout/utils/interfaces';\n\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Transition } from '../internal/components/transition';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { SplitPanelContentSide } from './side';\nimport { SplitPanelContentBottom } from './bottom';\nimport { useInternalI18n } from '../i18n/context';\nimport globalVars from '../internal/styles/global-vars';\nimport { createWidgetizedForwardRef } from '../internal/widgets';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport { SplitPanelProps };\n\nexport const SplitPanelImplementation = React.forwardRef<HTMLElement, SplitPanelProps>(\n (\n { header, children, hidePreferencesButton = false, closeBehavior = 'collapse', i18nStrings, ...restProps },\n __internalRootRef\n ) => {\n const isRefresh = useVisualRefresh();\n\n const {\n position,\n topOffset,\n bottomOffset,\n rightOffset,\n contentWidthStyles,\n isOpen,\n isForcedPosition,\n onPreferencesChange,\n onResize,\n onToggle,\n size,\n relativeSize,\n setSplitPanelToggle,\n refs,\n } = useSplitPanelContext();\n const baseProps = getBaseProps(restProps);\n const i18n = useInternalI18n('split-panel');\n const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);\n\n const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;\n\n const openButtonAriaLabel = i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel);\n useEffect(() => {\n setSplitPanelToggle({ displayed: closeBehavior === 'collapse', ariaLabel: openButtonAriaLabel });\n }, [setSplitPanelToggle, openButtonAriaLabel, closeBehavior]);\n\n const splitPanelRefObject = useRef<HTMLDivElement>(null);\n\n const sizeControlProps: SizeControlProps = {\n position,\n panelRef: splitPanelRefObject,\n handleRef: refs.slider,\n onResize,\n };\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const contentStyle = {\n [globalVars.stickyVerticalTopOffset]: topOffset,\n [globalVars.stickyVerticalBottomOffset]: bottomOffset,\n };\n\n const panelHeaderId = useUniqueId('split-panel-header');\n\n const wrappedHeader = (\n <div className={styles.header} style={appLayoutMaxWidth}>\n <h2 className={clsx(styles['header-text'], testUtilStyles['header-text'])} id={panelHeaderId}>\n {header}\n </h2>\n <div className={styles['header-actions']}>\n {!hidePreferencesButton && isOpen && (\n <>\n <InternalButton\n className={testUtilStyles['preferences-button']}\n iconName=\"settings\"\n variant=\"icon\"\n onClick={() => setPreferencesOpen(true)}\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle)}\n ref={refs.preferences}\n />\n <span className={styles.divider} />\n </>\n )}\n\n {isOpen ? (\n <InternalButton\n className={testUtilStyles['close-button']}\n iconName={\n isRefresh && closeBehavior === 'collapse'\n ? position === 'side'\n ? 'angle-right'\n : 'angle-down'\n : 'close'\n }\n variant=\"icon\"\n onClick={onToggle}\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.closeButtonAriaLabel', i18nStrings?.closeButtonAriaLabel)}\n ariaExpanded={isOpen}\n />\n ) : position === 'side' ? null : (\n <InternalButton\n className={testUtilStyles['open-button']}\n iconName=\"angle-up\"\n variant=\"icon\"\n formAction=\"none\"\n ariaLabel={i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel)}\n ref={refs.toggle}\n ariaExpanded={isOpen}\n />\n )}\n </div>\n </div>\n );\n\n const resizeHandle = (\n <div\n ref={refs.slider}\n role=\"slider\"\n tabIndex={0}\n aria-label={i18n('i18nStrings.resizeHandleAriaLabel', i18nStrings?.resizeHandleAriaLabel)}\n aria-valuemax={100}\n aria-valuemin={0}\n // Allows us to use the logical left/right keys to move the slider left/right,\n // but match aria keyboard behavior of using left/right to decrease/increase\n // the slider value.\n aria-valuenow={position === 'bottom' ? relativeSize : 100 - relativeSize}\n className={clsx(styles.slider, styles[`slider-${position}`], testUtilStyles.slider)}\n onKeyDown={onKeyDown}\n onPointerDown={onSliderPointerDown}\n >\n <ResizeHandler className={clsx(styles['slider-icon'], styles[`slider-icon-${position}`])} />\n </div>\n );\n\n /*\n This effect forces the browser to recalculate the layout\n whenever the split panel might have moved.\n\n This is needed as a workaround for a bug in Safari, which does\n not automatically calculate the new position of the split panel\n _content_ when the split panel moves.\n */\n useLayoutEffect(() => {\n const root = splitPanelRefObject.current;\n\n if (root) {\n const property = 'transform';\n const temporaryValue = 'translateZ(0)';\n\n const valueBefore = root.style[property];\n root.style[property] = temporaryValue;\n\n // This line forces the browser to recalculate the layout\n void root.offsetHeight;\n\n root.style[property] = valueBefore;\n }\n }, [rightOffset, __internalRootRef]);\n\n const mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef);\n\n if (closeBehavior === 'hide' && !isOpen) {\n return <></>;\n }\n\n /**\n * The AppLayout factor moved the circular buttons out of the\n * SplitPanel and into the Tools component. This conditional\n * is still needed for the early return to prevent execution\n * of the following code.\n */\n if (isRefresh && !isOpen && position === 'side') {\n return <></>;\n }\n\n return (\n <Transition in={isOpen ?? false}>\n {(state, transitioningElementRef) => (\n <>\n {position === 'side' && (\n <SplitPanelContentSide\n style={contentStyle}\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={size}\n onToggle={onToggle}\n openButtonAriaLabel={i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel)}\n toggleRef={refs.toggle}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n >\n {children}\n </SplitPanelContentSide>\n )}\n\n {position === 'bottom' && (\n <SplitPanelContentBottom\n style={contentStyle}\n resizeHandle={resizeHandle}\n baseProps={baseProps}\n isOpen={isOpen}\n splitPanelRef={mergedRef}\n cappedSize={size}\n onToggle={onToggle}\n header={wrappedHeader}\n panelHeaderId={panelHeaderId}\n state={state}\n transitioningElementRef={transitioningElementRef}\n appLayoutMaxWidth={appLayoutMaxWidth}\n >\n {children}\n </SplitPanelContentBottom>\n )}\n {isPreferencesOpen && (\n <PreferencesModal\n visible={true}\n preferences={{ position }}\n disabledSidePosition={position === 'bottom' && isForcedPosition}\n isRefresh={isRefresh}\n i18nStrings={{\n header: i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle),\n confirm: i18n('i18nStrings.preferencesConfirm', i18nStrings?.preferencesConfirm),\n cancel: i18n('i18nStrings.preferencesCancel', i18nStrings?.preferencesCancel),\n positionLabel: i18n('i18nStrings.preferencesPositionLabel', i18nStrings?.preferencesPositionLabel),\n positionDescription: i18n(\n 'i18nStrings.preferencesPositionDescription',\n i18nStrings?.preferencesPositionDescription\n ),\n positionBottom: i18n('i18nStrings.preferencesPositionBottom', i18nStrings?.preferencesPositionBottom),\n positionSide: i18n('i18nStrings.preferencesPositionSide', i18nStrings?.preferencesPositionSide),\n }}\n onConfirm={preferences => {\n onPreferencesChange({ ...preferences });\n setPreferencesOpen(false);\n }}\n onDismiss={() => {\n setPreferencesOpen(false);\n }}\n />\n )}\n </>\n )}\n </Transition>\n );\n }\n);\n\nexport const createWidgetizedSplitPanel = createWidgetizedForwardRef<\n SplitPanelProps,\n HTMLElement,\n typeof SplitPanelImplementation\n>(SplitPanelImplementation);\n"]}
|
package/split-panel/internal.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import { createWidgetizedSplitPanel } from './
|
|
3
|
+
import { createWidgetizedSplitPanel } from './implementation';
|
|
4
4
|
export const SplitPanelInternal = createWidgetizedSplitPanel();
|
|
5
5
|
//# sourceMappingURL=internal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/split-panel/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/split-panel/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAE9D,MAAM,CAAC,MAAM,kBAAkB,GAAG,0BAA0B,EAAE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createWidgetizedSplitPanel } from './implementation';\n\nexport const SplitPanelInternal = createWidgetizedSplitPanel();\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side.d.ts","sourceRoot":"","sources":["../../../src/split-panel/side.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"side.d.ts","sourceRoot":"","sources":["../../../src/split-panel/side.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAKtD,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;CAC7C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,SAAS,EACT,aAAa,EACb,SAAS,EACT,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,QAAQ,GACT,EAAE,0BAA0B,eA+C5B"}
|
package/split-panel/side.js
CHANGED
|
@@ -4,19 +4,21 @@ import React from 'react';
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import InternalButton from '../button/internal';
|
|
6
6
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
7
|
-
import styles from './styles.css.js';
|
|
8
7
|
import { useSplitPanelContext } from '../internal/context/split-panel-context';
|
|
8
|
+
import styles from './styles.css.js';
|
|
9
|
+
import testUtilStyles from './test-classes/styles.css.js';
|
|
9
10
|
export function SplitPanelContentSide({ style, baseProps, splitPanelRef, toggleRef, header, children, resizeHandle, isOpen, cappedSize, openButtonAriaLabel, panelHeaderId, onToggle, }) {
|
|
10
11
|
const { topOffset, bottomOffset } = useSplitPanelContext();
|
|
11
12
|
const isRefresh = useVisualRefresh();
|
|
12
|
-
return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.drawer, styles
|
|
13
|
+
return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.drawer, styles['position-side'], testUtilStyles.root, {
|
|
14
|
+
[testUtilStyles['open-position-side']]: isOpen,
|
|
13
15
|
[styles['drawer-closed']]: !isOpen,
|
|
14
16
|
}), style: Object.assign({ width: isOpen && isRefresh ? cappedSize : undefined, maxWidth: isRefresh ? '100%' : undefined }, style), ref: splitPanelRef }),
|
|
15
17
|
React.createElement("div", { className: clsx(styles['drawer-content-side']), style: {
|
|
16
18
|
top: topOffset,
|
|
17
19
|
bottom: bottomOffset,
|
|
18
20
|
}, onClick: () => !isOpen && onToggle(), "aria-labelledby": panelHeaderId, role: "region" },
|
|
19
|
-
isOpen ? (React.createElement("div", { className: styles['slider-wrapper-side'] }, resizeHandle)) : (React.createElement(InternalButton, { className: clsx(
|
|
21
|
+
isOpen ? (React.createElement("div", { className: styles['slider-wrapper-side'] }, resizeHandle)) : (React.createElement(InternalButton, { className: clsx(testUtilStyles['open-button'], styles['open-button-side']), iconName: "angle-left", variant: "icon", formAction: "none", ariaLabel: openButtonAriaLabel, ariaExpanded: isOpen, ref: isRefresh ? null : toggleRef })),
|
|
20
22
|
React.createElement("div", { className: styles['content-side'], "aria-hidden": !isOpen },
|
|
21
23
|
React.createElement("div", { className: clsx(styles['pane-header-wrapper-side']) }, header),
|
|
22
24
|
React.createElement("div", { className: clsx(styles['pane-content-wrapper-side']) }, children)))));
|
package/split-panel/side.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side.js","sourceRoot":"","sources":["../../../src/split-panel/side.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,
|
|
1
|
+
{"version":3,"file":"side.js","sourceRoot":"","sources":["../../../src/split-panel/side.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC/E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAO1D,MAAM,UAAU,qBAAqB,CAAC,EACpC,KAAK,EACL,SAAS,EACT,aAAa,EACb,SAAS,EACT,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,QAAQ,GACmB;IAC3B,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC3D,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,cAAc,CAAC,IAAI,EAAE;YAChG,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC,EAAE,MAAM;YAC9C,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,MAAM;SACnC,CAAC,EACF,KAAK,kBACH,KAAK,EAAE,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACnD,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACrC,KAAK,GAEV,GAAG,EAAE,aAAa;QAElB,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAC9C,KAAK,EAAE;gBACL,GAAG,EAAE,SAAS;gBACd,MAAM,EAAE,YAAY;aACrB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,QAAQ,EAAE,qBACnB,aAAa,EAC9B,IAAI,EAAC,QAAQ;YAEZ,MAAM,CAAC,CAAC,CAAC,CACR,6BAAK,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,IAAG,YAAY,CAAO,CACpE,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IACb,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAC1E,QAAQ,EAAC,YAAY,EACrB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,mBAAmB,EAC9B,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,GACjC,CACH;YACD,6BAAK,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,iBAAe,CAAC,MAAM;gBAC1D,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,IAAG,MAAM,CAAO;gBACxE,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,IAAG,QAAQ,CAAO,CACvE,CACF,CACF,CACP,CAAC;AACJ,CAAC","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 { ButtonProps } from '../button/interfaces';\nimport InternalButton from '../button/internal';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SplitPanelContentProps } from './interfaces';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface SplitPanelContentSideProps extends SplitPanelContentProps {\n openButtonAriaLabel?: string;\n toggleRef: React.RefObject<ButtonProps.Ref>;\n}\n\nexport function SplitPanelContentSide({\n style,\n baseProps,\n splitPanelRef,\n toggleRef,\n header,\n children,\n resizeHandle,\n isOpen,\n cappedSize,\n openButtonAriaLabel,\n panelHeaderId,\n onToggle,\n}: SplitPanelContentSideProps) {\n const { topOffset, bottomOffset } = useSplitPanelContext();\n const isRefresh = useVisualRefresh();\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.drawer, styles['position-side'], testUtilStyles.root, {\n [testUtilStyles['open-position-side']]: isOpen,\n [styles['drawer-closed']]: !isOpen,\n })}\n style={{\n width: isOpen && isRefresh ? cappedSize : undefined,\n maxWidth: isRefresh ? '100%' : undefined,\n ...style,\n }}\n ref={splitPanelRef}\n >\n <div\n className={clsx(styles['drawer-content-side'])}\n style={{\n top: topOffset,\n bottom: bottomOffset,\n }}\n onClick={() => !isOpen && onToggle()}\n aria-labelledby={panelHeaderId}\n role=\"region\"\n >\n {isOpen ? (\n <div className={styles['slider-wrapper-side']}>{resizeHandle}</div>\n ) : (\n <InternalButton\n className={clsx(testUtilStyles['open-button'], styles['open-button-side'])}\n iconName=\"angle-left\"\n variant=\"icon\"\n formAction=\"none\"\n ariaLabel={openButtonAriaLabel}\n ariaExpanded={isOpen}\n ref={isRefresh ? null : toggleRef}\n />\n )}\n <div className={styles['content-side']} aria-hidden={!isOpen}>\n <div className={clsx(styles['pane-header-wrapper-side'])}>{header}</div>\n <div className={clsx(styles['pane-content-wrapper-side'])}>{children}</div>\n </div>\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -1,62 +1,36 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"drawer": "
|
|
5
|
-
"refresh": "
|
|
6
|
-
"animating": "
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"position-bottom": "awsui_position-bottom_1r9lg_1csb3_478",
|
|
36
|
-
"position-side": "awsui_position-side_1r9lg_1csb3_505",
|
|
37
|
-
"slider": "awsui_slider_1r9lg_1csb3_511",
|
|
38
|
-
"slider-side": "awsui_slider-side_1r9lg_1csb3_546",
|
|
39
|
-
"slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_1csb3_553",
|
|
40
|
-
"slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_1csb3_564",
|
|
41
|
-
"open-button": "awsui_open-button_1r9lg_1csb3_575",
|
|
42
|
-
"open-button-side": "awsui_open-button-side_1r9lg_1csb3_579",
|
|
43
|
-
"slider-icon": "awsui_slider-icon_1r9lg_1csb3_588",
|
|
44
|
-
"slider-icon-bottom": "awsui_slider-icon-bottom_1r9lg_1csb3_594",
|
|
45
|
-
"slider-icon-side": "awsui_slider-icon-side_1r9lg_1csb3_598",
|
|
46
|
-
"pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_1csb3_602",
|
|
47
|
-
"drawer-mobile": "awsui_drawer-mobile_1r9lg_1csb3_613",
|
|
48
|
-
"drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_1csb3_617",
|
|
49
|
-
"content-bottom": "awsui_content-bottom_1r9lg_1csb3_626",
|
|
50
|
-
"pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_1csb3_642",
|
|
51
|
-
"pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_1csb3_647",
|
|
52
|
-
"pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_1csb3_651",
|
|
53
|
-
"content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_1csb3_655",
|
|
54
|
-
"content-side": "awsui_content-side_1r9lg_1csb3_660",
|
|
55
|
-
"pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_1csb3_670",
|
|
56
|
-
"pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_1csb3_676",
|
|
57
|
-
"header": "awsui_header_1r9lg_1csb3_684",
|
|
58
|
-
"header-text": "awsui_header-text_1r9lg_1csb3_694",
|
|
59
|
-
"header-actions": "awsui_header-actions_1r9lg_1csb3_707",
|
|
60
|
-
"divider": "awsui_divider_1r9lg_1csb3_715"
|
|
4
|
+
"drawer": "awsui_drawer_1r9lg_jkoke_201",
|
|
5
|
+
"refresh": "awsui_refresh_1r9lg_jkoke_201",
|
|
6
|
+
"animating": "awsui_animating_1r9lg_jkoke_215",
|
|
7
|
+
"drawer-closed": "awsui_drawer-closed_1r9lg_jkoke_270",
|
|
8
|
+
"drawer-content-side": "awsui_drawer-content-side_1r9lg_jkoke_275",
|
|
9
|
+
"drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_jkoke_291",
|
|
10
|
+
"position-bottom": "awsui_position-bottom_1r9lg_jkoke_298",
|
|
11
|
+
"position-side": "awsui_position-side_1r9lg_jkoke_325",
|
|
12
|
+
"slider": "awsui_slider_1r9lg_jkoke_331",
|
|
13
|
+
"slider-side": "awsui_slider-side_1r9lg_jkoke_366",
|
|
14
|
+
"slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_jkoke_373",
|
|
15
|
+
"slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_jkoke_384",
|
|
16
|
+
"open-button-side": "awsui_open-button-side_1r9lg_jkoke_395",
|
|
17
|
+
"slider-icon": "awsui_slider-icon_1r9lg_jkoke_404",
|
|
18
|
+
"slider-icon-bottom": "awsui_slider-icon-bottom_1r9lg_jkoke_410",
|
|
19
|
+
"slider-icon-side": "awsui_slider-icon-side_1r9lg_jkoke_414",
|
|
20
|
+
"pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_jkoke_418",
|
|
21
|
+
"drawer-mobile": "awsui_drawer-mobile_1r9lg_jkoke_429",
|
|
22
|
+
"drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_jkoke_433",
|
|
23
|
+
"content-bottom": "awsui_content-bottom_1r9lg_jkoke_442",
|
|
24
|
+
"pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_jkoke_458",
|
|
25
|
+
"pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_jkoke_463",
|
|
26
|
+
"pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_jkoke_467",
|
|
27
|
+
"content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_jkoke_471",
|
|
28
|
+
"content-side": "awsui_content-side_1r9lg_jkoke_476",
|
|
29
|
+
"pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_jkoke_486",
|
|
30
|
+
"pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_jkoke_492",
|
|
31
|
+
"header": "awsui_header_1r9lg_jkoke_500",
|
|
32
|
+
"header-text": "awsui_header-text_1r9lg_jkoke_510",
|
|
33
|
+
"header-actions": "awsui_header-actions_1r9lg_jkoke_523",
|
|
34
|
+
"divider": "awsui_divider_1r9lg_jkoke_531"
|
|
61
35
|
};
|
|
62
36
|
|