@cloudscape-design/components 3.0.72 → 3.0.74
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/toggles/index.d.ts.map +1 -1
- package/app-layout/toggles/index.js +2 -2
- package/app-layout/toggles/index.js.map +1 -1
- package/app-layout/visual-refresh/app-bar.d.ts.map +1 -1
- package/app-layout/visual-refresh/app-bar.js +2 -2
- package/app-layout/visual-refresh/app-bar.js.map +1 -1
- package/app-layout/visual-refresh/navigation.d.ts.map +1 -1
- package/app-layout/visual-refresh/navigation.js +1 -1
- package/app-layout/visual-refresh/navigation.js.map +1 -1
- package/app-layout/visual-refresh/tools.d.ts.map +1 -1
- package/app-layout/visual-refresh/tools.js +1 -1
- package/app-layout/visual-refresh/tools.js.map +1 -1
- package/app-layout/visual-refresh/trigger-button.d.ts.map +1 -1
- package/app-layout/visual-refresh/trigger-button.js +1 -1
- package/app-layout/visual-refresh/trigger-button.js.map +1 -1
- package/breadcrumb-group/item/styles.css.js +7 -7
- package/breadcrumb-group/item/styles.scoped.css +16 -15
- package/breadcrumb-group/item/styles.selectors.js +7 -7
- package/calendar/grid/index.d.ts +2 -2
- package/calendar/grid/index.d.ts.map +1 -1
- package/calendar/grid/index.js +64 -23
- package/calendar/grid/index.js.map +1 -1
- package/calendar/internal.d.ts.map +1 -1
- package/calendar/internal.js +3 -15
- package/calendar/internal.js.map +1 -1
- package/calendar/styles.css.js +18 -20
- package/calendar/styles.scoped.css +46 -58
- package/calendar/styles.selectors.js +18 -20
- package/date-range-picker/calendar/grids/grid.d.ts +1 -1
- package/date-range-picker/calendar/grids/grid.d.ts.map +1 -1
- package/date-range-picker/calendar/grids/grid.js +65 -9
- package/date-range-picker/calendar/grids/grid.js.map +1 -1
- package/date-range-picker/calendar/grids/index.d.ts.map +1 -1
- package/date-range-picker/calendar/grids/index.js +1 -0
- package/date-range-picker/calendar/grids/index.js.map +1 -1
- package/date-range-picker/calendar/grids/styles.css.js +30 -0
- package/date-range-picker/calendar/grids/{day/styles.scoped.css → styles.scoped.css} +60 -40
- package/date-range-picker/calendar/grids/styles.selectors.js +31 -0
- package/date-range-picker/index.js +2 -2
- package/date-range-picker/index.js.map +1 -1
- package/date-range-picker/styles.css.js +37 -40
- package/date-range-picker/styles.scoped.css +48 -67
- package/date-range-picker/styles.selectors.js +37 -40
- package/expandable-section/expandable-section-header.d.ts +3 -2
- package/expandable-section/expandable-section-header.d.ts.map +1 -1
- package/expandable-section/expandable-section-header.js +3 -3
- package/expandable-section/expandable-section-header.js.map +1 -1
- package/expandable-section/interfaces.d.ts +5 -0
- package/expandable-section/interfaces.d.ts.map +1 -1
- package/expandable-section/interfaces.js.map +1 -1
- package/expandable-section/internal.d.ts +1 -1
- package/expandable-section/internal.d.ts.map +1 -1
- package/expandable-section/internal.js +4 -3
- package/expandable-section/internal.js.map +1 -1
- package/internal/base-component/styles.scoped.css +4 -4
- package/internal/components/dropdown-status/index.d.ts +3 -1
- package/internal/components/dropdown-status/index.d.ts.map +1 -1
- package/internal/components/dropdown-status/index.js +7 -4
- package/internal/components/dropdown-status/index.js.map +1 -1
- package/internal/components/live-region/index.d.ts.map +1 -1
- package/internal/components/live-region/index.js +1 -0
- package/internal/components/live-region/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/generated/styles/tokens.js +2 -2
- package/internal/generated/theming/index.cjs +3 -3
- package/internal/generated/theming/index.js +3 -3
- package/modal/internal.d.ts.map +1 -1
- package/modal/internal.js +6 -10
- package/modal/internal.js.map +1 -1
- package/multiselect/internal.d.ts.map +1 -1
- package/multiselect/internal.js +3 -2
- package/multiselect/internal.js.map +1 -1
- package/package.json +1 -1
- package/property-filter/controller.d.ts +2 -0
- package/property-filter/controller.d.ts.map +1 -1
- package/property-filter/controller.js +37 -0
- package/property-filter/controller.js.map +1 -1
- package/property-filter/index.d.ts.map +1 -1
- package/property-filter/index.js +21 -6
- package/property-filter/index.js.map +1 -1
- package/property-filter/interfaces.d.ts +9 -2
- package/property-filter/interfaces.d.ts.map +1 -1
- package/property-filter/interfaces.js +2 -0
- package/property-filter/interfaces.js.map +1 -1
- package/property-filter/property-editor.d.ts +13 -0
- package/property-filter/property-editor.d.ts.map +1 -0
- package/property-filter/property-editor.js +18 -0
- package/property-filter/property-editor.js.map +1 -0
- package/property-filter/property-filter-autosuggest.d.ts +1 -0
- package/property-filter/property-filter-autosuggest.d.ts.map +1 -1
- package/property-filter/property-filter-autosuggest.js +17 -3
- package/property-filter/property-filter-autosuggest.js.map +1 -1
- package/property-filter/styles.css.js +32 -24
- package/property-filter/styles.scoped.css +45 -27
- package/property-filter/styles.selectors.js +32 -24
- package/property-filter/token-editor.d.ts.map +1 -1
- package/property-filter/token-editor.js +17 -4
- package/property-filter/token-editor.js.map +1 -1
- package/property-filter/token.d.ts.map +1 -1
- package/property-filter/token.js +6 -3
- package/property-filter/token.js.map +1 -1
- package/select/internal.d.ts.map +1 -1
- package/select/internal.js +3 -2
- package/select/internal.js.map +1 -1
- package/select/parts/filter.d.ts +1 -1
- package/select/utils/use-select.d.ts +15 -1
- package/select/utils/use-select.d.ts.map +1 -1
- package/select/utils/use-select.js +11 -1
- package/select/utils/use-select.js.map +1 -1
- package/split-panel/index.d.ts.map +1 -1
- package/split-panel/index.js +8 -6
- package/split-panel/index.js.map +1 -1
- package/split-panel/interfaces.d.ts +1 -0
- package/split-panel/interfaces.d.ts.map +1 -1
- package/split-panel/interfaces.js.map +1 -1
- package/split-panel/utils/use-pointer-events.d.ts +1 -1
- package/split-panel/utils/use-pointer-events.d.ts.map +1 -1
- package/split-panel/utils/use-pointer-events.js +9 -5
- package/split-panel/utils/use-pointer-events.js.map +1 -1
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +8 -1
- package/table/internal.js.map +1 -1
- package/table/use-mouse-down-target.d.ts +6 -0
- package/table/use-mouse-down-target.d.ts.map +1 -0
- package/table/use-mouse-down-target.js +30 -0
- package/table/use-mouse-down-target.js.map +1 -0
- package/tabs/styles.css.js +21 -21
- package/tabs/styles.scoped.css +38 -37
- package/tabs/styles.selectors.js +21 -21
- package/test-utils/dom/date-range-picker/index.js +2 -2
- package/test-utils/dom/date-range-picker/index.js.map +1 -1
- package/test-utils/selectors/date-range-picker/index.js +2 -2
- package/test-utils/selectors/date-range-picker/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
- package/calendar/grid/day/index.d.ts +0 -15
- package/calendar/grid/day/index.d.ts.map +0 -1
- package/calendar/grid/day/index.js +0 -47
- package/calendar/grid/day/index.js.map +0 -1
- package/date-range-picker/calendar/grids/day/index.d.ts +0 -27
- package/date-range-picker/calendar/grids/day/index.d.ts.map +0 -1
- package/date-range-picker/calendar/grids/day/index.js +0 -95
- package/date-range-picker/calendar/grids/day/index.js.map +0 -1
- package/date-range-picker/calendar/grids/day/styles.css.js +0 -26
- package/date-range-picker/calendar/grids/day/styles.selectors.js +0 -27
|
@@ -1,45 +1,42 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"calendar": "
|
|
5
|
-
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-
|
|
6
|
-
"root": "
|
|
7
|
-
"trigger-wrapper": "awsui_trigger-
|
|
8
|
-
"trigger-flexbox": "awsui_trigger-
|
|
9
|
-
"one-grid": "awsui_one-
|
|
10
|
-
"calendar-header": "awsui_calendar-
|
|
11
|
-
"calendar-header-months-wrapper": "awsui_calendar-header-months-
|
|
12
|
-
"calendar-header-month": "awsui_calendar-header-
|
|
13
|
-
"calendar-next-month-btn": "awsui_calendar-next-month-
|
|
14
|
-
"calendar-prev-month-btn": "awsui_calendar-prev-month-
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"apply-button": "awsui_apply-button_mgja0_x71bz_310",
|
|
42
|
-
"cancel-button": "awsui_cancel-button_mgja0_x71bz_314",
|
|
43
|
-
"calendar-aria-live": "awsui_calendar-aria-live_mgja0_x71bz_318"
|
|
4
|
+
"calendar": "awsui_calendar_mgja0_1vo3v_93",
|
|
5
|
+
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_1vo3v_1",
|
|
6
|
+
"root": "awsui_root_mgja0_1vo3v_120",
|
|
7
|
+
"trigger-wrapper": "awsui_trigger-wrapper_mgja0_1vo3v_132",
|
|
8
|
+
"trigger-flexbox": "awsui_trigger-flexbox_mgja0_1vo3v_136",
|
|
9
|
+
"one-grid": "awsui_one-grid_mgja0_1vo3v_144",
|
|
10
|
+
"calendar-header": "awsui_calendar-header_mgja0_1vo3v_147",
|
|
11
|
+
"calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_1vo3v_153",
|
|
12
|
+
"calendar-header-month": "awsui_calendar-header-month_mgja0_1vo3v_153",
|
|
13
|
+
"calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_1vo3v_173",
|
|
14
|
+
"calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_1vo3v_176",
|
|
15
|
+
"first-grid": "awsui_first-grid_mgja0_1vo3v_180",
|
|
16
|
+
"second-grid": "awsui_second-grid_mgja0_1vo3v_181",
|
|
17
|
+
"date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_1vo3v_185",
|
|
18
|
+
"date-only": "awsui_date-only_mgja0_1vo3v_189",
|
|
19
|
+
"date-and-time-constrainttext": "awsui_date-and-time-constrainttext_mgja0_1vo3v_195",
|
|
20
|
+
"footer": "awsui_footer_mgja0_1vo3v_202",
|
|
21
|
+
"has-clear-button": "awsui_has-clear-button_mgja0_1vo3v_209",
|
|
22
|
+
"footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_1vo3v_216",
|
|
23
|
+
"icon-wrapper": "awsui_icon-wrapper_mgja0_1vo3v_220",
|
|
24
|
+
"label": "awsui_label_mgja0_1vo3v_225",
|
|
25
|
+
"label-enabled": "awsui_label-enabled_mgja0_1vo3v_230",
|
|
26
|
+
"label-text": "awsui_label-text_mgja0_1vo3v_234",
|
|
27
|
+
"label-token-nowrap": "awsui_label-token-nowrap_mgja0_1vo3v_239",
|
|
28
|
+
"mode-switch": "awsui_mode-switch_mgja0_1vo3v_243",
|
|
29
|
+
"dropdown": "awsui_dropdown_mgja0_1vo3v_247",
|
|
30
|
+
"dropdown-content": "awsui_dropdown-content_mgja0_1vo3v_263",
|
|
31
|
+
"start-date-input": "awsui_start-date-input_mgja0_1vo3v_272",
|
|
32
|
+
"start-time-input": "awsui_start-time-input_mgja0_1vo3v_273",
|
|
33
|
+
"end-date-input": "awsui_end-date-input_mgja0_1vo3v_274",
|
|
34
|
+
"end-time-input": "awsui_end-time-input_mgja0_1vo3v_275",
|
|
35
|
+
"validation-section": "awsui_validation-section_mgja0_1vo3v_279",
|
|
36
|
+
"validation-error": "awsui_validation-error_mgja0_1vo3v_283",
|
|
37
|
+
"clear-button": "awsui_clear-button_mgja0_1vo3v_287",
|
|
38
|
+
"apply-button": "awsui_apply-button_mgja0_1vo3v_291",
|
|
39
|
+
"cancel-button": "awsui_cancel-button_mgja0_1vo3v_295",
|
|
40
|
+
"calendar-aria-live": "awsui_calendar-aria-live_mgja0_1vo3v_299"
|
|
44
41
|
};
|
|
45
42
|
|
|
@@ -90,11 +90,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
90
90
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
91
|
SPDX-License-Identifier: Apache-2.0
|
|
92
92
|
*/
|
|
93
|
-
.
|
|
94
|
-
animation: awsui_awsui-motion-fade-in-
|
|
93
|
+
.awsui_calendar_mgja0_1vo3v_93:not(#\9) {
|
|
94
|
+
animation: awsui_awsui-motion-fade-in-0_mgja0_1vo3v_1 var(--motion-duration-show-quick-tyaalm, 135ms) var(--motion-easing-show-quick-1fcgbv, ease-out);
|
|
95
95
|
animation-fill-mode: both;
|
|
96
96
|
}
|
|
97
|
-
@keyframes awsui_awsui-motion-fade-in-
|
|
97
|
+
@keyframes awsui_awsui-motion-fade-in-0_mgja0_1vo3v_1 {
|
|
98
98
|
from {
|
|
99
99
|
opacity: 0;
|
|
100
100
|
}
|
|
@@ -103,12 +103,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
@media (prefers-reduced-motion: reduce) {
|
|
106
|
-
.
|
|
106
|
+
.awsui_calendar_mgja0_1vo3v_93:not(#\9) {
|
|
107
107
|
animation: none;
|
|
108
108
|
transition: none;
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
|
-
.awsui-motion-disabled .
|
|
111
|
+
.awsui-motion-disabled .awsui_calendar_mgja0_1vo3v_93:not(#\9), .awsui-mode-entering .awsui_calendar_mgja0_1vo3v_93:not(#\9) {
|
|
112
112
|
animation: none;
|
|
113
113
|
transition: none;
|
|
114
114
|
}
|
|
@@ -117,7 +117,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
117
117
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
118
118
|
SPDX-License-Identifier: Apache-2.0
|
|
119
119
|
*/
|
|
120
|
-
.
|
|
120
|
+
.awsui_root_mgja0_1vo3v_120:not(#\9) {
|
|
121
121
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
122
122
|
border-collapse: separate;
|
|
123
123
|
border-spacing: 0;
|
|
@@ -155,28 +155,28 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
155
155
|
max-width: 32em;
|
|
156
156
|
}
|
|
157
157
|
|
|
158
|
-
.awsui_trigger-
|
|
158
|
+
.awsui_trigger-wrapper_mgja0_1vo3v_132:not(#\9) {
|
|
159
159
|
min-width: calc(var(--size-calendar-grid-width-lxsx0p, 238px) + 2 * var(--space-l-4vl6xu, 20px));
|
|
160
160
|
}
|
|
161
161
|
|
|
162
|
-
.awsui_trigger-
|
|
162
|
+
.awsui_trigger-flexbox_mgja0_1vo3v_136:not(#\9) {
|
|
163
163
|
display: flex;
|
|
164
164
|
}
|
|
165
165
|
|
|
166
|
-
.
|
|
166
|
+
.awsui_calendar_mgja0_1vo3v_93:not(#\9) {
|
|
167
167
|
display: block;
|
|
168
168
|
width: calc(2 * var(--size-calendar-grid-width-lxsx0p, 238px) + var(--space-xs-rsr2qu, 8px));
|
|
169
169
|
}
|
|
170
|
-
.
|
|
170
|
+
.awsui_calendar_mgja0_1vo3v_93.awsui_one-grid_mgja0_1vo3v_144:not(#\9) {
|
|
171
171
|
width: var(--size-calendar-grid-width-lxsx0p, 238px);
|
|
172
172
|
}
|
|
173
|
-
.awsui_calendar-
|
|
173
|
+
.awsui_calendar-header_mgja0_1vo3v_147:not(#\9) {
|
|
174
174
|
display: flex;
|
|
175
175
|
justify-content: space-between;
|
|
176
176
|
align-items: center;
|
|
177
177
|
position: relative;
|
|
178
178
|
}
|
|
179
|
-
.awsui_calendar-header-months-
|
|
179
|
+
.awsui_calendar-header-months-wrapper_mgja0_1vo3v_153:not(#\9) {
|
|
180
180
|
position: absolute;
|
|
181
181
|
right: 0;
|
|
182
182
|
left: 0;
|
|
@@ -188,7 +188,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
188
188
|
flex: 1;
|
|
189
189
|
pointer-events: none;
|
|
190
190
|
}
|
|
191
|
-
.awsui_calendar-header-
|
|
191
|
+
.awsui_calendar-header-month_mgja0_1vo3v_153:not(#\9) {
|
|
192
192
|
font-size: var(--font-body-m-size-sregvd, 14px);
|
|
193
193
|
line-height: var(--font-body-m-line-height-i7xxvv, 22px);
|
|
194
194
|
font-weight: 700;
|
|
@@ -196,153 +196,134 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
196
196
|
display: flex;
|
|
197
197
|
pointer-events: auto;
|
|
198
198
|
}
|
|
199
|
-
.awsui_calendar-next-month-
|
|
199
|
+
.awsui_calendar-next-month-btn_mgja0_1vo3v_173:not(#\9) {
|
|
200
200
|
/* used for identifying element */
|
|
201
201
|
}
|
|
202
|
-
.awsui_calendar-prev-month-
|
|
202
|
+
.awsui_calendar-prev-month-btn_mgja0_1vo3v_176:not(#\9) {
|
|
203
203
|
/* used for identifying element */
|
|
204
204
|
}
|
|
205
|
-
.awsui_calendar-day-names_mgja0_x71bz_179:not(#\9) {
|
|
206
|
-
display: flex;
|
|
207
|
-
justify-content: stretch;
|
|
208
|
-
}
|
|
209
|
-
.awsui_calendar-day-name_mgja0_x71bz_179:not(#\9) {
|
|
210
|
-
flex: 1 1 0%;
|
|
211
|
-
width: 0;
|
|
212
|
-
word-break: break-word;
|
|
213
|
-
text-align: center;
|
|
214
|
-
padding: var(--space-s-hv8c1d, 12px) 0 var(--space-xxs-ynfts5, 4px);
|
|
215
|
-
color: var(--color-text-calendar-month-elf7e9, #5f6b7a);
|
|
216
|
-
font-size: var(--font-body-s-size-ukw2p9, 12px);
|
|
217
|
-
line-height: var(--font-body-s-line-height-kdsbrl, 16px);
|
|
218
|
-
letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
|
|
219
|
-
}
|
|
220
|
-
.awsui_calendar-week_mgja0_x71bz_194:not(#\9) {
|
|
221
|
-
display: flex;
|
|
222
|
-
justify-content: stretch;
|
|
223
|
-
}
|
|
224
205
|
|
|
225
|
-
.awsui_first-
|
|
226
|
-
.awsui_second-
|
|
206
|
+
.awsui_first-grid_mgja0_1vo3v_180:not(#\9),
|
|
207
|
+
.awsui_second-grid_mgja0_1vo3v_181:not(#\9) {
|
|
227
208
|
/* used in test-utils */
|
|
228
209
|
}
|
|
229
210
|
|
|
230
|
-
.
|
|
231
|
-
width: var(--size-calendar-grid-width-lxsx0p, 238px);
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
.awsui_date-and-time-wrapper_mgja0_x71bz_208:not(#\9) {
|
|
211
|
+
.awsui_date-and-time-wrapper_mgja0_1vo3v_185:not(#\9) {
|
|
235
212
|
width: var(--size-calendar-grid-width-lxsx0p, 238px);
|
|
236
213
|
}
|
|
237
214
|
|
|
238
|
-
.awsui_date-and-time-
|
|
215
|
+
.awsui_date-and-time-wrapper_mgja0_1vo3v_185:not(#\9):not(.awsui_date-only_mgja0_1vo3v_189) {
|
|
239
216
|
display: grid;
|
|
240
217
|
column-gap: var(--space-xs-rsr2qu, 8px);
|
|
241
218
|
grid-template-columns: 1fr 1fr;
|
|
242
219
|
}
|
|
243
220
|
|
|
244
|
-
.awsui_date-and-time-
|
|
221
|
+
.awsui_date-and-time-constrainttext_mgja0_1vo3v_195:not(#\9) {
|
|
245
222
|
color: var(--color-text-form-secondary-ih9x7l, #5f6b7a);
|
|
246
223
|
font-size: var(--font-body-s-size-ukw2p9, 12px);
|
|
247
224
|
line-height: var(--font-body-s-line-height-kdsbrl, 16px);
|
|
248
225
|
letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
|
|
249
226
|
}
|
|
250
227
|
|
|
251
|
-
.
|
|
228
|
+
.awsui_footer_mgja0_1vo3v_202:not(#\9) {
|
|
252
229
|
display: flex;
|
|
253
230
|
flex-wrap: wrap;
|
|
254
231
|
justify-content: flex-end;
|
|
255
232
|
border-top: 1px solid var(--color-border-dropdown-item-default-faosd8, #e9ebed);
|
|
256
233
|
padding: 0 var(--space-l-4vl6xu, 20px) var(--space-s-hv8c1d, 12px);
|
|
257
234
|
}
|
|
258
|
-
.
|
|
235
|
+
.awsui_footer_mgja0_1vo3v_202.awsui_has-clear-button_mgja0_1vo3v_209:not(#\9) {
|
|
259
236
|
justify-content: space-between;
|
|
260
237
|
}
|
|
261
|
-
.
|
|
238
|
+
.awsui_footer_mgja0_1vo3v_202.awsui_one-grid_mgja0_1vo3v_144:not(#\9) {
|
|
262
239
|
padding: 0 var(--space-xs-rsr2qu, 8px) var(--space-s-hv8c1d, 12px);
|
|
263
240
|
}
|
|
264
241
|
|
|
265
|
-
.awsui_footer-button-
|
|
242
|
+
.awsui_footer-button-wrapper_mgja0_1vo3v_216:not(#\9) {
|
|
266
243
|
padding-top: var(--space-s-hv8c1d, 12px);
|
|
267
244
|
}
|
|
268
245
|
|
|
269
|
-
.awsui_icon-
|
|
246
|
+
.awsui_icon-wrapper_mgja0_1vo3v_220:not(#\9) {
|
|
270
247
|
color: var(--color-text-interactive-default-eg5fsa, #414d5c);
|
|
271
248
|
margin-right: var(--space-xs-rsr2qu, 8px);
|
|
272
249
|
}
|
|
273
250
|
|
|
274
|
-
.
|
|
251
|
+
.awsui_label_mgja0_1vo3v_225:not(#\9) {
|
|
275
252
|
-webkit-user-select: text;
|
|
276
253
|
user-select: text;
|
|
277
254
|
cursor: default;
|
|
278
255
|
}
|
|
279
256
|
|
|
280
|
-
.
|
|
257
|
+
.awsui_label_mgja0_1vo3v_225.awsui_label-enabled_mgja0_1vo3v_230:not(#\9):hover > .awsui_trigger-flexbox_mgja0_1vo3v_136 > .awsui_icon-wrapper_mgja0_1vo3v_220 {
|
|
281
258
|
color: var(--color-text-interactive-hover-v3lasm, #000716);
|
|
282
259
|
}
|
|
283
260
|
|
|
284
|
-
.awsui_label-
|
|
261
|
+
.awsui_label-text_mgja0_1vo3v_234:not(#\9) {
|
|
285
262
|
color: var(--color-text-input-placeholder-j53j3c, #5f6b7a);
|
|
286
263
|
font-style: italic;
|
|
287
264
|
}
|
|
288
265
|
|
|
289
|
-
.
|
|
266
|
+
.awsui_label-token-nowrap_mgja0_1vo3v_239:not(#\9) {
|
|
267
|
+
white-space: nowrap;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.awsui_mode-switch_mgja0_1vo3v_243:not(#\9) {
|
|
290
271
|
/* used in test-utils */
|
|
291
272
|
}
|
|
292
273
|
|
|
293
|
-
.
|
|
274
|
+
.awsui_dropdown_mgja0_1vo3v_247:not(#\9) {
|
|
294
275
|
overflow: auto;
|
|
295
276
|
border-top: 1px solid var(--color-border-container-top-srcvx4, transparent);
|
|
296
277
|
border-bottom: 1px solid var(--color-border-container-top-srcvx4, transparent);
|
|
297
278
|
border-radius: var(--border-radius-dropdown-ujknaf, 8px);
|
|
298
279
|
}
|
|
299
|
-
.
|
|
280
|
+
.awsui_dropdown_mgja0_1vo3v_247:not(#\9):focus {
|
|
300
281
|
outline: none;
|
|
301
282
|
}
|
|
302
|
-
.
|
|
283
|
+
.awsui_dropdown_mgja0_1vo3v_247[data-awsui-focus-visible=true]:not(#\9):focus {
|
|
303
284
|
outline: 2px dotted transparent;
|
|
304
285
|
outline-offset: 2px;
|
|
305
286
|
border-radius: var(--border-radius-dropdown-ujknaf, 8px);
|
|
306
287
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
307
288
|
}
|
|
308
289
|
|
|
309
|
-
.awsui_dropdown-
|
|
290
|
+
.awsui_dropdown-content_mgja0_1vo3v_263:not(#\9) {
|
|
310
291
|
-webkit-user-select: text;
|
|
311
292
|
user-select: text;
|
|
312
293
|
background-color: var(--color-background-container-content-i8i4a0, #ffffff);
|
|
313
294
|
width: calc(2 * var(--size-calendar-grid-width-lxsx0p, 238px) + var(--space-xs-rsr2qu, 8px) + 2 * var(--space-l-4vl6xu, 20px));
|
|
314
295
|
}
|
|
315
|
-
.awsui_dropdown-
|
|
296
|
+
.awsui_dropdown-content_mgja0_1vo3v_263.awsui_one-grid_mgja0_1vo3v_144:not(#\9) {
|
|
316
297
|
width: calc(var(--size-calendar-grid-width-lxsx0p, 238px) + 2 * var(--space-l-4vl6xu, 20px));
|
|
317
298
|
}
|
|
318
299
|
|
|
319
|
-
.awsui_start-date-
|
|
320
|
-
.awsui_start-time-
|
|
321
|
-
.awsui_end-date-
|
|
322
|
-
.awsui_end-time-
|
|
300
|
+
.awsui_start-date-input_mgja0_1vo3v_272:not(#\9),
|
|
301
|
+
.awsui_start-time-input_mgja0_1vo3v_273:not(#\9),
|
|
302
|
+
.awsui_end-date-input_mgja0_1vo3v_274:not(#\9),
|
|
303
|
+
.awsui_end-time-input_mgja0_1vo3v_275:not(#\9) {
|
|
323
304
|
/* used in test-utils */
|
|
324
305
|
}
|
|
325
306
|
|
|
326
|
-
.awsui_validation-
|
|
307
|
+
.awsui_validation-section_mgja0_1vo3v_279:not(#\9) {
|
|
327
308
|
/* used in test-utils */
|
|
328
309
|
}
|
|
329
310
|
|
|
330
|
-
.awsui_validation-
|
|
311
|
+
.awsui_validation-error_mgja0_1vo3v_283:not(#\9) {
|
|
331
312
|
/* used in test-utils */
|
|
332
313
|
}
|
|
333
314
|
|
|
334
|
-
.awsui_clear-
|
|
315
|
+
.awsui_clear-button_mgja0_1vo3v_287:not(#\9) {
|
|
335
316
|
/* used in test-utils */
|
|
336
317
|
}
|
|
337
318
|
|
|
338
|
-
.awsui_apply-
|
|
319
|
+
.awsui_apply-button_mgja0_1vo3v_291:not(#\9) {
|
|
339
320
|
/* used in test-utils */
|
|
340
321
|
}
|
|
341
322
|
|
|
342
|
-
.awsui_cancel-
|
|
323
|
+
.awsui_cancel-button_mgja0_1vo3v_295:not(#\9) {
|
|
343
324
|
/* used in test-utils */
|
|
344
325
|
}
|
|
345
326
|
|
|
346
|
-
.awsui_calendar-aria-
|
|
327
|
+
.awsui_calendar-aria-live_mgja0_1vo3v_299:not(#\9) {
|
|
347
328
|
/* used in test-utils */
|
|
348
329
|
}
|
|
@@ -2,45 +2,42 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"calendar": "
|
|
6
|
-
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-
|
|
7
|
-
"root": "
|
|
8
|
-
"trigger-wrapper": "awsui_trigger-
|
|
9
|
-
"trigger-flexbox": "awsui_trigger-
|
|
10
|
-
"one-grid": "awsui_one-
|
|
11
|
-
"calendar-header": "awsui_calendar-
|
|
12
|
-
"calendar-header-months-wrapper": "awsui_calendar-header-months-
|
|
13
|
-
"calendar-header-month": "awsui_calendar-header-
|
|
14
|
-
"calendar-next-month-btn": "awsui_calendar-next-month-
|
|
15
|
-
"calendar-prev-month-btn": "awsui_calendar-prev-month-
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"apply-button": "awsui_apply-button_mgja0_x71bz_310",
|
|
43
|
-
"cancel-button": "awsui_cancel-button_mgja0_x71bz_314",
|
|
44
|
-
"calendar-aria-live": "awsui_calendar-aria-live_mgja0_x71bz_318"
|
|
5
|
+
"calendar": "awsui_calendar_mgja0_1vo3v_93",
|
|
6
|
+
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_1vo3v_1",
|
|
7
|
+
"root": "awsui_root_mgja0_1vo3v_120",
|
|
8
|
+
"trigger-wrapper": "awsui_trigger-wrapper_mgja0_1vo3v_132",
|
|
9
|
+
"trigger-flexbox": "awsui_trigger-flexbox_mgja0_1vo3v_136",
|
|
10
|
+
"one-grid": "awsui_one-grid_mgja0_1vo3v_144",
|
|
11
|
+
"calendar-header": "awsui_calendar-header_mgja0_1vo3v_147",
|
|
12
|
+
"calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_1vo3v_153",
|
|
13
|
+
"calendar-header-month": "awsui_calendar-header-month_mgja0_1vo3v_153",
|
|
14
|
+
"calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_1vo3v_173",
|
|
15
|
+
"calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_1vo3v_176",
|
|
16
|
+
"first-grid": "awsui_first-grid_mgja0_1vo3v_180",
|
|
17
|
+
"second-grid": "awsui_second-grid_mgja0_1vo3v_181",
|
|
18
|
+
"date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_1vo3v_185",
|
|
19
|
+
"date-only": "awsui_date-only_mgja0_1vo3v_189",
|
|
20
|
+
"date-and-time-constrainttext": "awsui_date-and-time-constrainttext_mgja0_1vo3v_195",
|
|
21
|
+
"footer": "awsui_footer_mgja0_1vo3v_202",
|
|
22
|
+
"has-clear-button": "awsui_has-clear-button_mgja0_1vo3v_209",
|
|
23
|
+
"footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_1vo3v_216",
|
|
24
|
+
"icon-wrapper": "awsui_icon-wrapper_mgja0_1vo3v_220",
|
|
25
|
+
"label": "awsui_label_mgja0_1vo3v_225",
|
|
26
|
+
"label-enabled": "awsui_label-enabled_mgja0_1vo3v_230",
|
|
27
|
+
"label-text": "awsui_label-text_mgja0_1vo3v_234",
|
|
28
|
+
"label-token-nowrap": "awsui_label-token-nowrap_mgja0_1vo3v_239",
|
|
29
|
+
"mode-switch": "awsui_mode-switch_mgja0_1vo3v_243",
|
|
30
|
+
"dropdown": "awsui_dropdown_mgja0_1vo3v_247",
|
|
31
|
+
"dropdown-content": "awsui_dropdown-content_mgja0_1vo3v_263",
|
|
32
|
+
"start-date-input": "awsui_start-date-input_mgja0_1vo3v_272",
|
|
33
|
+
"start-time-input": "awsui_start-time-input_mgja0_1vo3v_273",
|
|
34
|
+
"end-date-input": "awsui_end-date-input_mgja0_1vo3v_274",
|
|
35
|
+
"end-time-input": "awsui_end-time-input_mgja0_1vo3v_275",
|
|
36
|
+
"validation-section": "awsui_validation-section_mgja0_1vo3v_279",
|
|
37
|
+
"validation-error": "awsui_validation-error_mgja0_1vo3v_283",
|
|
38
|
+
"clear-button": "awsui_clear-button_mgja0_1vo3v_287",
|
|
39
|
+
"apply-button": "awsui_apply-button_mgja0_1vo3v_291",
|
|
40
|
+
"cancel-button": "awsui_cancel-button_mgja0_1vo3v_295",
|
|
41
|
+
"calendar-aria-live": "awsui_calendar-aria-live_mgja0_1vo3v_299"
|
|
45
42
|
};
|
|
46
43
|
|
|
@@ -7,11 +7,12 @@ interface ExpandableSectionHeaderProps {
|
|
|
7
7
|
children?: ReactNode;
|
|
8
8
|
expanded: boolean;
|
|
9
9
|
ariaControls: string;
|
|
10
|
-
ariaLabelledBy
|
|
10
|
+
ariaLabelledBy?: string;
|
|
11
|
+
ariaLabel?: string;
|
|
11
12
|
onKeyUp: KeyboardEventHandler;
|
|
12
13
|
onKeyDown: KeyboardEventHandler;
|
|
13
14
|
onClick: MouseEventHandler;
|
|
14
15
|
}
|
|
15
|
-
export declare const ExpandableSectionHeader: ({ id, className, variant, children, expanded, ariaControls, ariaLabelledBy, onKeyUp, onKeyDown, onClick, }: ExpandableSectionHeaderProps) => JSX.Element;
|
|
16
|
+
export declare const ExpandableSectionHeader: ({ id, className, variant, children, expanded, ariaControls, ariaLabel, ariaLabelledBy, onKeyUp, onKeyDown, onClick, }: ExpandableSectionHeaderProps) => JSX.Element;
|
|
16
17
|
export {};
|
|
17
18
|
//# sourceMappingURL=expandable-section-header.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlF,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlF,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,eAAO,MAAM,uBAAuB,0HAYjC,4BAA4B,gBAmD9B,CAAC"}
|
|
@@ -5,7 +5,7 @@ import InternalIcon from '../icon/internal';
|
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import styles from './styles.css.js';
|
|
7
7
|
export var ExpandableSectionHeader = function (_a) {
|
|
8
|
-
var id = _a.id, className = _a.className, variant = _a.variant, children = _a.children, expanded = _a.expanded, ariaControls = _a.ariaControls, ariaLabelledBy = _a.ariaLabelledBy, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onClick = _a.onClick;
|
|
8
|
+
var id = _a.id, className = _a.className, variant = _a.variant, children = _a.children, expanded = _a.expanded, ariaControls = _a.ariaControls, ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onClick = _a.onClick;
|
|
9
9
|
var focusVisible = useFocusVisible();
|
|
10
10
|
var icon = (React.createElement(InternalIcon, { size: variant === 'container' ? 'medium' : 'normal', className: clsx(styles.icon, expanded && styles.expanded), name: "caret-down-filled" }));
|
|
11
11
|
var ariaAttributes = {
|
|
@@ -15,10 +15,10 @@ export var ExpandableSectionHeader = function (_a) {
|
|
|
15
15
|
var triggerClassName = clsx(styles.trigger, styles["trigger-".concat(variant)], expanded && styles['trigger-expanded']);
|
|
16
16
|
if (variant === 'navigation') {
|
|
17
17
|
return (React.createElement("div", { id: id, className: clsx(className, triggerClassName), onClick: onClick },
|
|
18
|
-
React.createElement("button", __assign({ className: styles['icon-container'], type: "button", "aria-labelledby": ariaLabelledBy }, focusVisible, ariaAttributes), icon),
|
|
18
|
+
React.createElement("button", __assign({ className: styles['icon-container'], type: "button", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel }, focusVisible, ariaAttributes), icon),
|
|
19
19
|
children));
|
|
20
20
|
}
|
|
21
|
-
return (React.createElement("div", __assign({ id: id, role: "button", className: clsx(className, triggerClassName, styles.focusable, expanded && styles.expanded), tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onClick: onClick }, focusVisible, ariaAttributes),
|
|
21
|
+
return (React.createElement("div", __assign({ id: id, role: "button", className: clsx(className, triggerClassName, styles.focusable, expanded && styles.expanded), tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onClick: onClick, "aria-label": ariaLabel }, focusVisible, ariaAttributes),
|
|
22
22
|
React.createElement("div", { className: styles['icon-container'] }, icon),
|
|
23
23
|
children));
|
|
24
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expandable-section-header.js","sourceRoot":"","sources":["../../../src/expandable-section/expandable-section-header.tsx"],"names":[],"mappings":";AAGA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAClF,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"expandable-section-header.js","sourceRoot":"","sources":["../../../src/expandable-section/expandable-section-header.tsx"],"names":[],"mappings":";AAGA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAClF,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAgBrC,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAC,EAYT;QAX7B,EAAE,QAAA,EACF,SAAS,eAAA,EACT,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,SAAS,eAAA,EACT,OAAO,aAAA;IAEP,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,IAAM,IAAI,GAAG,CACX,oBAAC,YAAY,IACX,IAAI,EAAE,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACnD,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EACzD,IAAI,EAAC,mBAAmB,GACxB,CACH,CAAC;IACF,IAAM,cAAc,GAAG;QACrB,eAAe,EAAE,YAAY;QAC7B,eAAe,EAAE,QAAQ;KAC1B,CAAC;IAEF,IAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,kBAAW,OAAO,CAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACpH,IAAI,OAAO,KAAK,YAAY,EAAE;QAC5B,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAO;YACzE,yCACE,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,IAAI,EAAC,QAAQ,qBACI,cAAc,gBACnB,SAAS,IACjB,YAAY,EACZ,cAAc,GAEjB,IAAI,CACE;YACR,QAAQ,CACL,CACP,CAAC;KACH;IAED,OAAO,CACL,sCACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,gBACJ,SAAS,IACjB,YAAY,EACZ,cAAc;QAElB,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,IAAI,CAAO;QACrD,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\ninterface ExpandableSectionHeaderProps {\n id: string;\n className?: string;\n variant: ExpandableSectionProps.Variant;\n children?: ReactNode;\n expanded: boolean;\n ariaControls: string;\n ariaLabelledBy?: string;\n ariaLabel?: string;\n onKeyUp: KeyboardEventHandler;\n onKeyDown: KeyboardEventHandler;\n onClick: MouseEventHandler;\n}\n\nexport const ExpandableSectionHeader = ({\n id,\n className,\n variant,\n children,\n expanded,\n ariaControls,\n ariaLabel,\n ariaLabelledBy,\n onKeyUp,\n onKeyDown,\n onClick,\n}: ExpandableSectionHeaderProps) => {\n const focusVisible = useFocusVisible();\n\n const icon = (\n <InternalIcon\n size={variant === 'container' ? 'medium' : 'normal'}\n className={clsx(styles.icon, expanded && styles.expanded)}\n name=\"caret-down-filled\"\n />\n );\n const ariaAttributes = {\n 'aria-controls': ariaControls,\n 'aria-expanded': expanded,\n };\n\n const triggerClassName = clsx(styles.trigger, styles[`trigger-${variant}`], expanded && styles['trigger-expanded']);\n if (variant === 'navigation') {\n return (\n <div id={id} className={clsx(className, triggerClassName)} onClick={onClick}>\n <button\n className={styles['icon-container']}\n type=\"button\"\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n {...focusVisible}\n {...ariaAttributes}\n >\n {icon}\n </button>\n {children}\n </div>\n );\n }\n\n return (\n <div\n id={id}\n role=\"button\"\n className={clsx(className, triggerClassName, styles.focusable, expanded && styles.expanded)}\n tabIndex={0}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n onClick={onClick}\n aria-label={ariaLabel}\n {...focusVisible}\n {...ariaAttributes}\n >\n <div className={styles['icon-container']}>{icon}</div>\n {children}\n </div>\n );\n};\n"]}
|
|
@@ -41,6 +41,11 @@ export interface ExpandableSectionProps extends BaseComponentProps {
|
|
|
41
41
|
* When using the container variant, use the Header component. Otherwise, use plain text.
|
|
42
42
|
*/
|
|
43
43
|
header?: React.ReactNode;
|
|
44
|
+
/**
|
|
45
|
+
* Adds `aria-label` to the header element.
|
|
46
|
+
* Use to assign unique labels when there are multiple expandable sections with the same header text on one page.
|
|
47
|
+
*/
|
|
48
|
+
headerAriaLabel?: string;
|
|
44
49
|
/**
|
|
45
50
|
* Called when the state changes (that is, when the user expands or collapses the component).
|
|
46
51
|
* The event `detail` contains the current value of the `expanded` property.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,yBAAiB,sBAAsB,CAAC;IACtC,KAAY,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC;IACxE,UAAiB,YAAY;QAC3B,QAAQ,EAAE,OAAO,CAAC;KACnB;CACF;AAED,MAAM,WAAW,sBAAuB,SAAQ,kBAAkB;IAChE;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;SAOK;IACL,OAAO,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC;IAEzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC;CAC3E"}
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,yBAAiB,sBAAsB,CAAC;IACtC,KAAY,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC;IACxE,UAAiB,YAAY;QAC3B,QAAQ,EAAE,OAAO,CAAC;KACnB;CACF;AAED,MAAM,WAAW,sBAAuB,SAAQ,kBAAkB;IAChE;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;SAOK;IACL,OAAO,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC;IAEzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC;CAC3E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/expandable-section/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace ExpandableSectionProps {\n export type Variant = 'default' | 'footer' | 'container' | 'navigation';\n export interface ChangeDetail {\n expanded: boolean;\n }\n}\n\nexport interface ExpandableSectionProps extends BaseComponentProps {\n /**\n * Determines whether the component initially displays in expanded state (that is, with content visible). The component operates in an uncontrolled\n * manner even if you provide a value for this property.\n */\n defaultExpanded?: boolean;\n\n /**\n * Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled\n * manner if you provide a value for this property.\n */\n expanded?: boolean;\n\n /**\n * The possible variants of an expandable section are as follows:\n * * `default` - Use this variant in any context.\n * * `footer` - Use this variant in container footers.\n * * `container` - Use this variant in a detail page alongside other containers.\n * * `navigation` - Use this variant in the navigation panel with anchors and custom styled content.\n * It doesn't have any default styles.\n * */\n variant?: ExpandableSectionProps.Variant;\n\n /**\n * Determines whether the content section's default padding is removed. This default padding is only present for the `container` variant.\n */\n disableContentPaddings?: boolean;\n\n /**\n * Primary content displayed in the expandable section element.\n */\n children?: React.ReactNode;\n\n /**\n * Heading displayed above the content text.\n *\n * When using the container variant, use the Header component. Otherwise, use plain text.\n */\n header?: React.ReactNode;\n\n /**\n * Called when the state changes (that is, when the user expands or collapses the component).\n * The event `detail` contains the current value of the `expanded` property.\n */\n onChange?: NonCancelableEventHandler<ExpandableSectionProps.ChangeDetail>;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/expandable-section/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace ExpandableSectionProps {\n export type Variant = 'default' | 'footer' | 'container' | 'navigation';\n export interface ChangeDetail {\n expanded: boolean;\n }\n}\n\nexport interface ExpandableSectionProps extends BaseComponentProps {\n /**\n * Determines whether the component initially displays in expanded state (that is, with content visible). The component operates in an uncontrolled\n * manner even if you provide a value for this property.\n */\n defaultExpanded?: boolean;\n\n /**\n * Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled\n * manner if you provide a value for this property.\n */\n expanded?: boolean;\n\n /**\n * The possible variants of an expandable section are as follows:\n * * `default` - Use this variant in any context.\n * * `footer` - Use this variant in container footers.\n * * `container` - Use this variant in a detail page alongside other containers.\n * * `navigation` - Use this variant in the navigation panel with anchors and custom styled content.\n * It doesn't have any default styles.\n * */\n variant?: ExpandableSectionProps.Variant;\n\n /**\n * Determines whether the content section's default padding is removed. This default padding is only present for the `container` variant.\n */\n disableContentPaddings?: boolean;\n\n /**\n * Primary content displayed in the expandable section element.\n */\n children?: React.ReactNode;\n\n /**\n * Heading displayed above the content text.\n *\n * When using the container variant, use the Header component. Otherwise, use plain text.\n */\n header?: React.ReactNode;\n\n /**\n * Adds `aria-label` to the header element.\n * Use to assign unique labels when there are multiple expandable sections with the same header text on one page.\n */\n headerAriaLabel?: string;\n\n /**\n * Called when the state changes (that is, when the user expands or collapses the component).\n * The event `detail` contains the current value of the `expanded` property.\n */\n onChange?: NonCancelableEventHandler<ExpandableSectionProps.ChangeDetail>;\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ExpandableSectionProps } from './interfaces';
|
|
2
2
|
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
3
3
|
declare type InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;
|
|
4
|
-
export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant, children, header, disableContentPaddings, __internalRootRef, ...props }: InternalExpandableSectionProps): JSX.Element;
|
|
4
|
+
export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant, children, header, disableContentPaddings, headerAriaLabel, __internalRootRef, ...props }: InternalExpandableSectionProps): JSX.Element;
|
|
5
5
|
export {};
|
|
6
6
|
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/internal.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,aAAK,8BAA8B,GAAG,sBAAsB,GAAG,0BAA0B,CAAC;AAE1F,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,QAAQ,EAAE,kBAAkB,EAC5B,eAAe,EACf,QAAQ,EACR,OAAmB,EACnB,QAAQ,EACR,MAAM,EACN,sBAAsB,EACtB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,8BAA8B,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/internal.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,aAAK,8BAA8B,GAAG,sBAAsB,GAAG,0BAA0B,CAAC;AAE1F,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,QAAQ,EAAE,kBAAkB,EAC5B,eAAe,EACf,QAAQ,EACR,OAAmB,EACnB,QAAQ,EACR,MAAM,EACN,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,8BAA8B,eAqFhC"}
|
|
@@ -13,7 +13,7 @@ import styles from './styles.css.js';
|
|
|
13
13
|
import { ExpandableSectionContainer } from './expandable-section-container';
|
|
14
14
|
import { ExpandableSectionHeader } from './expandable-section-header';
|
|
15
15
|
export default function InternalExpandableSection(_a) {
|
|
16
|
-
var controlledExpanded = _a.expanded, defaultExpanded = _a.defaultExpanded, onChange = _a.onChange, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, children = _a.children, header = _a.header, disableContentPaddings = _a.disableContentPaddings, __internalRootRef = _a.__internalRootRef, props = __rest(_a, ["expanded", "defaultExpanded", "onChange", "variant", "children", "header", "disableContentPaddings", "__internalRootRef"]);
|
|
16
|
+
var controlledExpanded = _a.expanded, defaultExpanded = _a.defaultExpanded, onChange = _a.onChange, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, children = _a.children, header = _a.header, disableContentPaddings = _a.disableContentPaddings, headerAriaLabel = _a.headerAriaLabel, __internalRootRef = _a.__internalRootRef, props = __rest(_a, ["expanded", "defaultExpanded", "onChange", "variant", "children", "header", "disableContentPaddings", "headerAriaLabel", "__internalRootRef"]);
|
|
17
17
|
var ref = useRef(null);
|
|
18
18
|
var controlId = useUniqueId();
|
|
19
19
|
var triggerControlId = "".concat(controlId, "-trigger");
|
|
@@ -44,13 +44,14 @@ export default function InternalExpandableSection(_a) {
|
|
|
44
44
|
}, []);
|
|
45
45
|
var triggerProps = {
|
|
46
46
|
ariaControls: controlId,
|
|
47
|
-
|
|
47
|
+
ariaLabel: headerAriaLabel,
|
|
48
|
+
ariaLabelledBy: headerAriaLabel ? undefined : triggerControlId,
|
|
48
49
|
onKeyUp: onKeyUp,
|
|
49
50
|
onKeyDown: onKeyDown,
|
|
50
51
|
onClick: onClick
|
|
51
52
|
};
|
|
52
53
|
return (React.createElement(ExpandableSectionContainer, __assign({}, baseProps, { expanded: expanded, className: clsx(baseProps.className, styles.root), variant: variant, disableContentPaddings: disableContentPaddings, header: React.createElement(ExpandableSectionHeader, __assign({ id: triggerControlId, className: clsx(styles.header, styles["header-".concat(variant)]), variant: variant, expanded: !!expanded }, triggerProps), header), __internalRootRef: __internalRootRef }),
|
|
53
54
|
React.createElement(CSSTransition, { "in": expanded, timeout: 30, classNames: { enter: styles['content-enter'] }, nodeRef: ref },
|
|
54
|
-
React.createElement("div", { id: controlId, ref: ref, className: clsx(styles.content, styles["content-".concat(variant)], expanded && styles['content-expanded']), role: "group", "aria-labelledby":
|
|
55
|
+
React.createElement("div", { id: controlId, ref: ref, className: clsx(styles.content, styles["content-".concat(variant)], expanded && styles['content-expanded']), role: "group", "aria-label": triggerProps.ariaLabel, "aria-labelledby": triggerProps.ariaLabelledBy }, children))));
|
|
55
56
|
}
|
|
56
57
|
//# sourceMappingURL=internal.js.map
|