@cloudscape-design/components 3.0.522 → 3.0.524
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/alert/styles.css.js +25 -25
- package/alert/styles.scoped.css +61 -54
- package/alert/styles.selectors.js +25 -25
- package/anchor-navigation/styles.css.js +8 -8
- package/anchor-navigation/styles.scoped.css +39 -30
- package/anchor-navigation/styles.selectors.js +8 -8
- package/annotation-context/annotation/styles.css.js +24 -24
- package/annotation-context/annotation/styles.scoped.css +57 -49
- package/annotation-context/annotation/styles.selectors.js +24 -24
- package/app-layout/content-wrapper/styles.css.js +3 -3
- package/app-layout/content-wrapper/styles.scoped.css +15 -15
- package/app-layout/content-wrapper/styles.selectors.js +3 -3
- package/app-layout/drawer/styles.css.js +12 -12
- package/app-layout/drawer/styles.scoped.css +29 -30
- package/app-layout/drawer/styles.selectors.js +12 -12
- package/app-layout/mobile-toolbar/styles.css.js +8 -8
- package/app-layout/mobile-toolbar/styles.scoped.css +18 -17
- package/app-layout/mobile-toolbar/styles.selectors.js +8 -8
- package/app-layout/notifications/styles.css.js +3 -3
- package/app-layout/notifications/styles.scoped.css +6 -6
- package/app-layout/notifications/styles.selectors.js +3 -3
- package/app-layout/split-panel/styles.css.js +2 -2
- package/app-layout/split-panel/styles.scoped.css +3 -3
- package/app-layout/split-panel/styles.selectors.js +2 -2
- package/app-layout/styles.css.js +16 -16
- package/app-layout/styles.scoped.css +26 -26
- package/app-layout/styles.selectors.js +16 -16
- package/app-layout/toggles/styles.css.js +2 -2
- package/app-layout/toggles/styles.scoped.css +12 -10
- package/app-layout/toggles/styles.selectors.js +2 -2
- package/app-layout/visual-refresh/styles.css.js +81 -81
- package/app-layout/visual-refresh/styles.scoped.css +279 -261
- package/app-layout/visual-refresh/styles.selectors.js +81 -81
- package/area-chart/styles.css.js +6 -6
- package/area-chart/styles.scoped.css +12 -11
- package/area-chart/styles.selectors.js +6 -6
- package/attribute-editor/styles.css.js +14 -14
- package/attribute-editor/styles.scoped.css +30 -29
- package/attribute-editor/styles.selectors.js +14 -14
- package/autosuggest/styles.css.js +3 -3
- package/autosuggest/styles.scoped.css +5 -5
- package/autosuggest/styles.selectors.js +3 -3
- package/badge/styles.css.js +5 -5
- package/badge/styles.scoped.css +11 -7
- package/badge/styles.selectors.js +5 -5
- package/box/styles.css.js +190 -190
- package/box/styles.scoped.css +244 -240
- package/box/styles.selectors.js +190 -190
- package/breadcrumb-group/item/styles.css.js +9 -9
- package/breadcrumb-group/item/styles.scoped.css +20 -19
- package/breadcrumb-group/item/styles.selectors.js +9 -9
- package/breadcrumb-group/styles.css.js +7 -7
- package/breadcrumb-group/styles.scoped.css +28 -21
- package/breadcrumb-group/styles.selectors.js +7 -7
- package/button/styles.css.js +20 -20
- package/button/styles.scoped.css +155 -153
- package/button/styles.selectors.js +20 -20
- package/button-dropdown/category-elements/styles.css.js +13 -13
- package/button-dropdown/category-elements/styles.scoped.css +61 -50
- package/button-dropdown/category-elements/styles.selectors.js +13 -13
- package/button-dropdown/item-element/styles.css.js +15 -15
- package/button-dropdown/item-element/styles.scoped.css +38 -33
- package/button-dropdown/item-element/styles.selectors.js +15 -15
- package/button-dropdown/mobile-expandable-group/styles.css.js +5 -5
- package/button-dropdown/mobile-expandable-group/styles.scoped.css +8 -8
- package/button-dropdown/mobile-expandable-group/styles.selectors.js +5 -5
- package/button-dropdown/styles.css.js +15 -15
- package/button-dropdown/styles.scoped.css +39 -36
- package/button-dropdown/styles.selectors.js +15 -15
- package/calendar/grid/index.d.ts +3 -3
- package/calendar/grid/index.js +11 -11
- package/calendar/grid/index.js.map +1 -1
- package/calendar/header/header-button.js +2 -2
- package/calendar/header/header-button.js.map +1 -1
- package/calendar/styles.css.js +18 -18
- package/calendar/styles.scoped.css +77 -61
- package/calendar/styles.selectors.js +18 -18
- package/cards/styles.css.js +40 -40
- package/cards/styles.scoped.css +126 -99
- package/cards/styles.selectors.js +40 -40
- package/code-editor/resizable-box/styles.css.js +3 -3
- package/code-editor/resizable-box/styles.scoped.css +10 -10
- package/code-editor/resizable-box/styles.selectors.js +3 -3
- package/code-editor/styles.css.js +32 -32
- package/code-editor/styles.scoped.css +210 -198
- package/code-editor/styles.selectors.js +32 -32
- package/collection-preferences/content-display/styles.css.js +11 -11
- package/collection-preferences/content-display/styles.scoped.css +40 -30
- package/collection-preferences/content-display/styles.selectors.js +11 -11
- package/collection-preferences/styles.css.js +37 -37
- package/collection-preferences/styles.scoped.css +79 -66
- package/collection-preferences/styles.selectors.js +37 -37
- package/column-layout/flexible-column-layout/styles.css.js +5 -5
- package/column-layout/flexible-column-layout/styles.scoped.css +8 -9
- package/column-layout/flexible-column-layout/styles.selectors.js +5 -5
- package/column-layout/styles.css.js +13 -13
- package/column-layout/styles.scoped.css +70 -64
- package/column-layout/styles.selectors.js +13 -13
- package/container/styles.css.js +30 -30
- package/container/styles.scoped.css +114 -106
- package/container/styles.selectors.js +30 -30
- package/content-layout/styles.css.js +7 -7
- package/content-layout/styles.scoped.css +15 -15
- package/content-layout/styles.selectors.js +7 -7
- package/date-picker/styles.css.js +7 -7
- package/date-picker/styles.scoped.css +12 -12
- package/date-picker/styles.selectors.js +7 -7
- package/date-range-picker/calendar/grids/styles.css.js +25 -25
- package/date-range-picker/calendar/grids/styles.scoped.css +73 -62
- package/date-range-picker/calendar/grids/styles.selectors.js +25 -25
- package/date-range-picker/relative-range/styles.css.js +9 -9
- package/date-range-picker/relative-range/styles.scoped.css +21 -21
- package/date-range-picker/relative-range/styles.selectors.js +9 -9
- package/date-range-picker/styles.css.js +38 -38
- package/date-range-picker/styles.scoped.css +72 -67
- package/date-range-picker/styles.selectors.js +38 -38
- package/drawer/styles.css.js +3 -3
- package/drawer/styles.scoped.css +21 -18
- package/drawer/styles.selectors.js +3 -3
- package/expandable-section/styles.css.js +32 -32
- package/expandable-section/styles.scoped.css +103 -98
- package/expandable-section/styles.selectors.js +32 -32
- package/file-upload/dropzone/styles.css.js +2 -2
- package/file-upload/dropzone/styles.scoped.css +8 -4
- package/file-upload/dropzone/styles.selectors.js +2 -2
- package/file-upload/file-option/styles.css.js +7 -7
- package/file-upload/file-option/styles.scoped.css +15 -15
- package/file-upload/file-option/styles.selectors.js +7 -7
- package/file-upload/styles.css.js +2 -2
- package/file-upload/styles.scoped.css +4 -4
- package/file-upload/styles.selectors.js +2 -2
- package/flashbar/styles.css.js +47 -47
- package/flashbar/styles.scoped.css +220 -215
- package/flashbar/styles.selectors.js +47 -47
- package/form/styles.css.js +9 -9
- package/form/styles.scoped.css +18 -18
- package/form/styles.selectors.js +9 -9
- package/form-field/styles.css.js +19 -19
- package/form-field/styles.scoped.css +34 -34
- package/form-field/styles.selectors.js +19 -19
- package/internal/base-component/styles.scoped.css +10 -10
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/theming/index.cjs +30 -30
- package/internal/generated/theming/index.js +30 -30
- package/internal/manifest.json +1 -1
- package/modal/styles.css.js +23 -23
- package/modal/styles.scoped.css +39 -39
- package/modal/styles.selectors.js +23 -23
- package/package.json +1 -1
- package/test-utils/dom/calendar/index.js +4 -4
- package/test-utils/dom/calendar/index.js.map +1 -1
- package/test-utils/selectors/calendar/index.js +4 -4
- package/test-utils/selectors/calendar/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
- package/tiles/styles.css.js +29 -29
- package/tiles/styles.scoped.css +97 -91
- package/tiles/styles.selectors.js +29 -29
|
@@ -90,101 +90,104 @@ 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
|
-
.awsui_button-
|
|
93
|
+
.awsui_button-dropdown_sne0l_swbn4_93:not(#\9) {
|
|
94
94
|
display: inline-block;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
.awsui_items-list-
|
|
98
|
-
padding: 0;
|
|
99
|
-
|
|
100
|
-
|
|
97
|
+
.awsui_items-list-container_sne0l_swbn4_97:not(#\9) {
|
|
98
|
+
padding-block: 0;
|
|
99
|
+
padding-inline: 0;
|
|
100
|
+
margin-block: 0;
|
|
101
|
+
margin-inline: 0;
|
|
102
|
+
animation: awsui_awsui-motion-fade-in-0_sne0l_swbn4_1 500ms var(--motion-easing-show-quick-vc5zgd, ease-out);
|
|
101
103
|
animation-fill-mode: none;
|
|
102
104
|
}
|
|
103
105
|
@media (prefers-reduced-motion: reduce) {
|
|
104
|
-
.awsui_items-list-
|
|
106
|
+
.awsui_items-list-container_sne0l_swbn4_97:not(#\9) {
|
|
105
107
|
animation: none;
|
|
106
108
|
transition: none;
|
|
107
109
|
}
|
|
108
110
|
}
|
|
109
|
-
.awsui-motion-disabled .awsui_items-list-
|
|
111
|
+
.awsui-motion-disabled .awsui_items-list-container_sne0l_swbn4_97:not(#\9), .awsui-mode-entering .awsui_items-list-container_sne0l_swbn4_97:not(#\9) {
|
|
110
112
|
animation: none;
|
|
111
113
|
transition: none;
|
|
112
114
|
}
|
|
113
115
|
|
|
114
|
-
.awsui_rotate-
|
|
116
|
+
.awsui_rotate-up_sne0l_swbn4_116:not(#\9) {
|
|
115
117
|
transform: rotate(-180deg);
|
|
116
118
|
transition: transform var(--motion-duration-rotate-180-dpvl4m, 135ms) var(--motion-easing-rotate-180-e270ko, cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
117
119
|
}
|
|
118
120
|
@media (prefers-reduced-motion: reduce) {
|
|
119
|
-
.awsui_rotate-
|
|
121
|
+
.awsui_rotate-up_sne0l_swbn4_116:not(#\9) {
|
|
120
122
|
animation: none;
|
|
121
123
|
transition: none;
|
|
122
124
|
}
|
|
123
125
|
}
|
|
124
|
-
.awsui-motion-disabled .awsui_rotate-
|
|
126
|
+
.awsui-motion-disabled .awsui_rotate-up_sne0l_swbn4_116:not(#\9), .awsui-mode-entering .awsui_rotate-up_sne0l_swbn4_116:not(#\9) {
|
|
125
127
|
animation: none;
|
|
126
128
|
transition: none;
|
|
127
129
|
}
|
|
128
130
|
|
|
129
|
-
.awsui_rotate-
|
|
131
|
+
.awsui_rotate-down_sne0l_swbn4_131:not(#\9) {
|
|
130
132
|
transform: rotate(0deg);
|
|
131
133
|
transition: transform var(--motion-duration-rotate-180-dpvl4m, 135ms) var(--motion-easing-rotate-180-e270ko, cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
132
134
|
}
|
|
133
135
|
@media (prefers-reduced-motion: reduce) {
|
|
134
|
-
.awsui_rotate-
|
|
136
|
+
.awsui_rotate-down_sne0l_swbn4_131:not(#\9) {
|
|
135
137
|
animation: none;
|
|
136
138
|
transition: none;
|
|
137
139
|
}
|
|
138
140
|
}
|
|
139
|
-
.awsui-motion-disabled .awsui_rotate-
|
|
141
|
+
.awsui-motion-disabled .awsui_rotate-down_sne0l_swbn4_131:not(#\9), .awsui-mode-entering .awsui_rotate-down_sne0l_swbn4_131:not(#\9) {
|
|
140
142
|
animation: none;
|
|
141
143
|
transition: none;
|
|
142
144
|
}
|
|
143
145
|
|
|
144
|
-
.
|
|
146
|
+
.awsui_header_sne0l_swbn4_146:not(#\9) {
|
|
145
147
|
display: flex;
|
|
146
148
|
flex-direction: column;
|
|
147
149
|
list-style: none;
|
|
148
|
-
padding: var(--space-s-34lx8l, 12px)
|
|
149
|
-
|
|
150
|
-
border-
|
|
150
|
+
padding-block: var(--space-s-34lx8l, 12px);
|
|
151
|
+
padding-inline: var(--space-l-t419sm, 20px);
|
|
152
|
+
border-block-start: var(--border-field-width-09w7vk, 2px) solid transparent;
|
|
153
|
+
border-block-end: var(--border-field-width-09w7vk, 2px) solid var(--color-border-dropdown-group-yakmix, #b6bec9);
|
|
154
|
+
border-inline: var(--border-field-width-09w7vk, 2px) solid transparent;
|
|
151
155
|
}
|
|
152
156
|
|
|
153
|
-
.
|
|
154
|
-
.
|
|
157
|
+
.awsui_title_sne0l_swbn4_157:not(#\9),
|
|
158
|
+
.awsui_description_sne0l_swbn4_158:not(#\9) {
|
|
155
159
|
color: var(--color-text-dropdown-header-ga95zo, #000716);
|
|
156
160
|
}
|
|
157
161
|
|
|
158
|
-
.awsui_split-trigger-
|
|
162
|
+
.awsui_split-trigger-wrapper_sne0l_swbn4_162:not(#\9) {
|
|
159
163
|
display: flex;
|
|
160
164
|
}
|
|
161
|
-
.awsui_split-trigger-
|
|
165
|
+
.awsui_split-trigger-wrapper_sne0l_swbn4_162 > .awsui_trigger-item_sne0l_swbn4_165 > button:not(#\9):focus {
|
|
162
166
|
z-index: 1;
|
|
163
167
|
}
|
|
164
|
-
.awsui_split-trigger-
|
|
165
|
-
border-
|
|
166
|
-
border-
|
|
167
|
-
padding-
|
|
168
|
-
margin-
|
|
168
|
+
.awsui_split-trigger-wrapper_sne0l_swbn4_162 > .awsui_trigger-item_sne0l_swbn4_165:not(#\9):not(:last-child) > .awsui_trigger-button_sne0l_swbn4_168 {
|
|
169
|
+
border-start-end-radius: 0;
|
|
170
|
+
border-end-end-radius: 0;
|
|
171
|
+
padding-inline-end: var(--space-m-udix3p, 16px);
|
|
172
|
+
margin-inline-end: var(--space-xxxs-zbmxqb, 2px);
|
|
169
173
|
}
|
|
170
|
-
.awsui_split-trigger-
|
|
171
|
-
border-
|
|
172
|
-
border-
|
|
173
|
-
padding-
|
|
174
|
-
padding-right: calc(var(--space-xs-zb16t3, 8px) - 2px);
|
|
174
|
+
.awsui_split-trigger-wrapper_sne0l_swbn4_162 > .awsui_trigger-item_sne0l_swbn4_165:not(#\9):not(:first-child) > .awsui_trigger-button_sne0l_swbn4_168 {
|
|
175
|
+
border-start-start-radius: 0;
|
|
176
|
+
border-end-start-radius: 0;
|
|
177
|
+
padding-inline: calc(var(--space-xs-zb16t3, 8px) - 2px);
|
|
175
178
|
}
|
|
176
|
-
.awsui_split-trigger-
|
|
177
|
-
padding-
|
|
179
|
+
.awsui_split-trigger-wrapper_sne0l_swbn4_162 > .awsui_trigger-item_sne0l_swbn4_165:not(#\9):not(:first-child).awsui_visual-refresh_sne0l_swbn4_179 > .awsui_trigger-button_sne0l_swbn4_168 {
|
|
180
|
+
padding-inline-end: calc(var(--space-s-34lx8l, 12px) - 2px);
|
|
178
181
|
}
|
|
179
182
|
|
|
180
|
-
.awsui_split-
|
|
183
|
+
.awsui_split-trigger_sne0l_swbn4_162:not(#\9) {
|
|
181
184
|
display: contents;
|
|
182
185
|
}
|
|
183
186
|
|
|
184
|
-
.awsui_dropdown-
|
|
187
|
+
.awsui_dropdown-trigger_sne0l_swbn4_187:not(#\9) {
|
|
185
188
|
display: contents;
|
|
186
189
|
}
|
|
187
190
|
|
|
188
|
-
.awsui_test-utils-button-
|
|
191
|
+
.awsui_test-utils-button-trigger_sne0l_swbn4_191:not(#\9) {
|
|
189
192
|
/* used in test-utils */
|
|
190
193
|
}
|
|
@@ -2,20 +2,20 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"button-dropdown": "awsui_button-
|
|
6
|
-
"items-list-container": "awsui_items-list-
|
|
7
|
-
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-
|
|
8
|
-
"rotate-up": "awsui_rotate-
|
|
9
|
-
"rotate-down": "awsui_rotate-
|
|
10
|
-
"header": "
|
|
11
|
-
"title": "
|
|
12
|
-
"description": "
|
|
13
|
-
"split-trigger-wrapper": "awsui_split-trigger-
|
|
14
|
-
"trigger-item": "awsui_trigger-
|
|
15
|
-
"trigger-button": "awsui_trigger-
|
|
16
|
-
"visual-refresh": "awsui_visual-
|
|
17
|
-
"split-trigger": "awsui_split-
|
|
18
|
-
"dropdown-trigger": "awsui_dropdown-
|
|
19
|
-
"test-utils-button-trigger": "awsui_test-utils-button-
|
|
5
|
+
"button-dropdown": "awsui_button-dropdown_sne0l_swbn4_93",
|
|
6
|
+
"items-list-container": "awsui_items-list-container_sne0l_swbn4_97",
|
|
7
|
+
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_sne0l_swbn4_1",
|
|
8
|
+
"rotate-up": "awsui_rotate-up_sne0l_swbn4_116",
|
|
9
|
+
"rotate-down": "awsui_rotate-down_sne0l_swbn4_131",
|
|
10
|
+
"header": "awsui_header_sne0l_swbn4_146",
|
|
11
|
+
"title": "awsui_title_sne0l_swbn4_157",
|
|
12
|
+
"description": "awsui_description_sne0l_swbn4_158",
|
|
13
|
+
"split-trigger-wrapper": "awsui_split-trigger-wrapper_sne0l_swbn4_162",
|
|
14
|
+
"trigger-item": "awsui_trigger-item_sne0l_swbn4_165",
|
|
15
|
+
"trigger-button": "awsui_trigger-button_sne0l_swbn4_168",
|
|
16
|
+
"visual-refresh": "awsui_visual-refresh_sne0l_swbn4_179",
|
|
17
|
+
"split-trigger": "awsui_split-trigger_sne0l_swbn4_162",
|
|
18
|
+
"dropdown-trigger": "awsui_dropdown-trigger_sne0l_swbn4_187",
|
|
19
|
+
"test-utils-button-trigger": "awsui_test-utils-button-trigger_sne0l_swbn4_191"
|
|
20
20
|
};
|
|
21
21
|
|
package/calendar/grid/index.d.ts
CHANGED
|
@@ -10,10 +10,10 @@ import { DatePickerProps } from '../../date-picker/interfaces';
|
|
|
10
10
|
* - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;
|
|
11
11
|
* - (table navigation) Safari+VO - "dimmed" state is announced twice;
|
|
12
12
|
* - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;
|
|
13
|
-
* - (keyboard navigation) Firefox+NVDA - every
|
|
13
|
+
* - (keyboard navigation) Firefox+NVDA - every date is announced as "not selected";
|
|
14
14
|
* - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;
|
|
15
|
-
* - (keyboard navigation) Safari/Chrome+VO -
|
|
16
|
-
* - (keyboard navigation) Safari/Chrome+VO -
|
|
15
|
+
* - (keyboard navigation) Safari/Chrome+VO - dates are not announced as interactive (clickable or selectable);
|
|
16
|
+
* - (keyboard navigation) Safari/Chrome+VO - date announcements are not interruptive and can be missed if navigating fast.
|
|
17
17
|
*/
|
|
18
18
|
export interface GridProps {
|
|
19
19
|
locale: string;
|
package/calendar/grid/index.js
CHANGED
|
@@ -51,7 +51,7 @@ export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, foc
|
|
|
51
51
|
onFocusDate(updatedFocusDate);
|
|
52
52
|
};
|
|
53
53
|
// The focused date changes as a feedback to keyboard navigation in the grid.
|
|
54
|
-
// Once changed, the corresponding
|
|
54
|
+
// Once changed, the corresponding date button needs to receive the actual focus.
|
|
55
55
|
useEffectOnUpdate(() => {
|
|
56
56
|
if (focusedDate && focusedDateRef.current) {
|
|
57
57
|
focusedDateRef.current.focus();
|
|
@@ -61,10 +61,10 @@ export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, foc
|
|
|
61
61
|
const weekdays = weeks[0].map(date => date.getDay());
|
|
62
62
|
return (React.createElement("table", { role: "grid", className: styles['calendar-grid'], "aria-labelledby": ariaLabelledby },
|
|
63
63
|
React.createElement("thead", null,
|
|
64
|
-
React.createElement("tr", null, weekdays.map(dayIndex => (React.createElement("th", { key: dayIndex, scope: "col", className: clsx(styles['calendar-grid-cell'], styles['calendar-
|
|
64
|
+
React.createElement("tr", null, weekdays.map(dayIndex => (React.createElement("th", { key: dayIndex, scope: "col", className: clsx(styles['calendar-grid-cell'], styles['calendar-date-header']) },
|
|
65
65
|
React.createElement("span", { "aria-hidden": "true" }, renderDayName(locale, dayIndex, 'short')),
|
|
66
66
|
React.createElement(ScreenreaderOnly, null, renderDayName(locale, dayIndex, 'long'))))))),
|
|
67
|
-
React.createElement("tbody", { onKeyDown: onGridKeyDownHandler }, weeks.map((week, weekIndex) => (React.createElement("tr", { key: weekIndex, className: styles['calendar-
|
|
67
|
+
React.createElement("tbody", { onKeyDown: onGridKeyDownHandler }, weeks.map((week, weekIndex) => (React.createElement("tr", { key: weekIndex, className: styles['calendar-row'] }, week.map((date, dateIndex) => {
|
|
68
68
|
const isFocusable = !!focusableDate && isSameDay(date, focusableDate);
|
|
69
69
|
const isSelected = !!selectedDate && isSameDay(date, selectedDate);
|
|
70
70
|
const isEnabled = !isDateEnabled || isDateEnabled(date);
|
|
@@ -79,20 +79,20 @@ export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, foc
|
|
|
79
79
|
// Can be focused programmatically.
|
|
80
80
|
tabIndex = -1;
|
|
81
81
|
}
|
|
82
|
-
// Screen-reader announcement for the focused
|
|
82
|
+
// Screen-reader announcement for the focused date.
|
|
83
83
|
let dayAnnouncement = getDateLabel(locale, date, 'short');
|
|
84
|
-
if (isDateOnSameDay) {
|
|
84
|
+
if (isDateOnSameDay && todayAriaLabel) {
|
|
85
85
|
dayAnnouncement += '. ' + todayAriaLabel;
|
|
86
86
|
}
|
|
87
87
|
return (React.createElement("td", { key: `${weekIndex}:${dateIndex}`, ref: tabIndex === 0 ? focusedDateRef : undefined, tabIndex: tabIndex, "aria-current": isDateOnSameDay ? 'date' : undefined, "aria-selected": isEnabled ? isSelected : undefined, "aria-disabled": !isEnabled,
|
|
88
88
|
// Do not attach click event when the date is disabled, otherwise VO+safari announces clickable
|
|
89
|
-
onClick: isEnabled ? () => onSelectDate(date) : undefined, className: clsx(styles['calendar-grid-cell'], styles['calendar-
|
|
90
|
-
[styles['calendar-
|
|
91
|
-
[styles['calendar-
|
|
92
|
-
[styles['calendar-
|
|
93
|
-
[styles['calendar-
|
|
89
|
+
onClick: isEnabled ? () => onSelectDate(date) : undefined, className: clsx(styles['calendar-grid-cell'], styles['calendar-date'], {
|
|
90
|
+
[styles['calendar-date-current-page']]: isSameMonth(date, baseDate),
|
|
91
|
+
[styles['calendar-date-enabled']]: isEnabled,
|
|
92
|
+
[styles['calendar-date-selected']]: isSelected,
|
|
93
|
+
[styles['calendar-date-current']]: isDateOnSameDay,
|
|
94
94
|
}) },
|
|
95
|
-
React.createElement("span", { className: styles['
|
|
95
|
+
React.createElement("span", { className: styles['date-inner'], "aria-hidden": "true" }, date.getDate()),
|
|
96
96
|
React.createElement(ScreenreaderOnly, null, dayAnnouncement)));
|
|
97
97
|
})))))));
|
|
98
98
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["calendar/grid/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo, useRef } from 'react';\nimport styles from '../styles.css.js';\nimport { KeyCode } from '../../internal/keycode';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { getCalendarMonth } from 'mnth';\nimport { DayIndex } from '../internal';\nimport { DatePickerProps } from '../../date-picker/interfaces';\nimport { getDateLabel, renderDayName } from '../utils/intl';\nimport clsx from 'clsx';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update.js';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';\nimport { moveNextDay, movePrevDay, moveNextWeek, movePrevWeek } from '../utils/navigation';\n\n/**\n * Calendar grid supports two mechanisms of keyboard navigation:\n * - Native screen-reader table navigation (semantic table markup);\n * - Keyboard arrow-keys navigation (a custom key-down handler).\n *\n * The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:\n * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;\n * - (table navigation) Safari+VO - \"dimmed\" state is announced twice;\n * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;\n * - (keyboard navigation) Firefox+NVDA - every day is announced as \"not selected\";\n * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;\n * - (keyboard navigation) Safari/Chrome+VO - days are not announced as interactive (clickable or selectable);\n * - (keyboard navigation) Safari/Chrome+VO - day announcements are not interruptive and can be missed if navigating fast.\n */\n\nexport interface GridProps {\n locale: string;\n baseDate: Date;\n isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n focusedDate: Date | null;\n focusableDate: Date | null;\n onSelectDate: (date: Date) => void;\n onFocusDate: (date: null | Date) => void;\n onChangeMonth: (date: Date) => void;\n startOfWeek: DayIndex;\n todayAriaLabel?: string;\n selectedDate: Date | null;\n ariaLabelledby: string;\n}\n\nexport default function Grid({\n locale,\n baseDate,\n isDateEnabled,\n focusedDate,\n focusableDate,\n onSelectDate,\n onFocusDate,\n onChangeMonth,\n startOfWeek,\n todayAriaLabel,\n selectedDate,\n ariaLabelledby,\n}: GridProps) {\n const focusedDateRef = useRef<HTMLTableCellElement>(null);\n\n const onGridKeyDownHandler = (event: React.KeyboardEvent) => {\n let updatedFocusDate;\n\n if (focusableDate === null) {\n return;\n }\n\n switch (event.keyCode) {\n case KeyCode.space:\n case KeyCode.enter:\n event.preventDefault();\n if (focusableDate) {\n onFocusDate(null);\n onSelectDate(focusableDate);\n }\n return;\n case KeyCode.right:\n event.preventDefault();\n updatedFocusDate = moveNextDay(focusableDate, isDateEnabled);\n break;\n case KeyCode.left:\n event.preventDefault();\n updatedFocusDate = movePrevDay(focusableDate, isDateEnabled);\n break;\n case KeyCode.up:\n event.preventDefault();\n updatedFocusDate = movePrevWeek(focusableDate, isDateEnabled);\n break;\n case KeyCode.down:\n event.preventDefault();\n updatedFocusDate = moveNextWeek(focusableDate, isDateEnabled);\n break;\n default:\n return;\n }\n\n if (!isSameMonth(updatedFocusDate, baseDate)) {\n onChangeMonth(updatedFocusDate);\n }\n onFocusDate(updatedFocusDate);\n };\n\n // The focused date changes as a feedback to keyboard navigation in the grid.\n // Once changed, the corresponding day button needs to receive the actual focus.\n useEffectOnUpdate(() => {\n if (focusedDate && focusedDateRef.current) {\n (focusedDateRef.current as HTMLDivElement).focus();\n }\n }, [focusedDate]);\n\n const weeks = useMemo<Date[][]>(\n () => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),\n [baseDate, startOfWeek]\n );\n const weekdays = weeks[0].map(date => date.getDay());\n\n return (\n <table role=\"grid\" className={styles['calendar-grid']} aria-labelledby={ariaLabelledby}>\n <thead>\n <tr>\n {weekdays.map(dayIndex => (\n <th\n key={dayIndex}\n scope=\"col\"\n className={clsx(styles['calendar-grid-cell'], styles['calendar-day-header'])}\n >\n <span aria-hidden=\"true\">{renderDayName(locale, dayIndex, 'short')}</span>\n <ScreenreaderOnly>{renderDayName(locale, dayIndex, 'long')}</ScreenreaderOnly>\n </th>\n ))}\n </tr>\n </thead>\n <tbody onKeyDown={onGridKeyDownHandler}>\n {weeks.map((week, weekIndex) => (\n <tr key={weekIndex} className={styles['calendar-week']}>\n {week.map((date, dateIndex) => {\n const isFocusable = !!focusableDate && isSameDay(date, focusableDate);\n const isSelected = !!selectedDate && isSameDay(date, selectedDate);\n const isEnabled = !isDateEnabled || isDateEnabled(date);\n const isDateOnSameDay = isSameDay(date, new Date());\n\n // Can't be focused.\n let tabIndex = undefined;\n if (isFocusable && isEnabled) {\n // Next focus target.\n tabIndex = 0;\n } else if (isEnabled) {\n // Can be focused programmatically.\n tabIndex = -1;\n }\n\n // Screen-reader announcement for the focused day.\n let dayAnnouncement = getDateLabel(locale, date, 'short');\n if (isDateOnSameDay) {\n dayAnnouncement += '. ' + todayAriaLabel;\n }\n\n return (\n <td\n key={`${weekIndex}:${dateIndex}`}\n ref={tabIndex === 0 ? focusedDateRef : undefined}\n tabIndex={tabIndex}\n aria-current={isDateOnSameDay ? 'date' : undefined}\n aria-selected={isEnabled ? isSelected : undefined}\n aria-disabled={!isEnabled}\n // Do not attach click event when the date is disabled, otherwise VO+safari announces clickable\n onClick={isEnabled ? () => onSelectDate(date) : undefined}\n className={clsx(styles['calendar-grid-cell'], styles['calendar-day'], {\n [styles['calendar-day-current-month']]: isSameMonth(date, baseDate),\n [styles['calendar-day-enabled']]: isEnabled,\n [styles['calendar-day-selected']]: isSelected,\n [styles['calendar-day-today']]: isDateOnSameDay,\n })}\n >\n <span className={styles['day-inner']} aria-hidden=\"true\">\n {date.getDate()}\n </span>\n <ScreenreaderOnly>{dayAnnouncement}</ScreenreaderOnly>\n </td>\n );\n })}\n </tr>\n ))}\n </tbody>\n </table>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["calendar/grid/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo, useRef } from 'react';\nimport styles from '../styles.css.js';\nimport { KeyCode } from '../../internal/keycode';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { getCalendarMonth } from 'mnth';\nimport { DayIndex } from '../internal';\nimport { DatePickerProps } from '../../date-picker/interfaces';\nimport { getDateLabel, renderDayName } from '../utils/intl';\nimport clsx from 'clsx';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update.js';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';\nimport { moveNextDay, movePrevDay, moveNextWeek, movePrevWeek } from '../utils/navigation';\n\n/**\n * Calendar grid supports two mechanisms of keyboard navigation:\n * - Native screen-reader table navigation (semantic table markup);\n * - Keyboard arrow-keys navigation (a custom key-down handler).\n *\n * The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:\n * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;\n * - (table navigation) Safari+VO - \"dimmed\" state is announced twice;\n * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;\n * - (keyboard navigation) Firefox+NVDA - every date is announced as \"not selected\";\n * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;\n * - (keyboard navigation) Safari/Chrome+VO - dates are not announced as interactive (clickable or selectable);\n * - (keyboard navigation) Safari/Chrome+VO - date announcements are not interruptive and can be missed if navigating fast.\n */\n\nexport interface GridProps {\n locale: string;\n baseDate: Date;\n isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n focusedDate: Date | null;\n focusableDate: Date | null;\n onSelectDate: (date: Date) => void;\n onFocusDate: (date: null | Date) => void;\n onChangeMonth: (date: Date) => void;\n startOfWeek: DayIndex;\n todayAriaLabel?: string;\n selectedDate: Date | null;\n ariaLabelledby: string;\n}\n\nexport default function Grid({\n locale,\n baseDate,\n isDateEnabled,\n focusedDate,\n focusableDate,\n onSelectDate,\n onFocusDate,\n onChangeMonth,\n startOfWeek,\n todayAriaLabel,\n selectedDate,\n ariaLabelledby,\n}: GridProps) {\n const focusedDateRef = useRef<HTMLTableCellElement>(null);\n\n const onGridKeyDownHandler = (event: React.KeyboardEvent) => {\n let updatedFocusDate;\n\n if (focusableDate === null) {\n return;\n }\n\n switch (event.keyCode) {\n case KeyCode.space:\n case KeyCode.enter:\n event.preventDefault();\n if (focusableDate) {\n onFocusDate(null);\n onSelectDate(focusableDate);\n }\n return;\n case KeyCode.right:\n event.preventDefault();\n updatedFocusDate = moveNextDay(focusableDate, isDateEnabled);\n break;\n case KeyCode.left:\n event.preventDefault();\n updatedFocusDate = movePrevDay(focusableDate, isDateEnabled);\n break;\n case KeyCode.up:\n event.preventDefault();\n updatedFocusDate = movePrevWeek(focusableDate, isDateEnabled);\n break;\n case KeyCode.down:\n event.preventDefault();\n updatedFocusDate = moveNextWeek(focusableDate, isDateEnabled);\n break;\n default:\n return;\n }\n\n if (!isSameMonth(updatedFocusDate, baseDate)) {\n onChangeMonth(updatedFocusDate);\n }\n onFocusDate(updatedFocusDate);\n };\n\n // The focused date changes as a feedback to keyboard navigation in the grid.\n // Once changed, the corresponding date button needs to receive the actual focus.\n useEffectOnUpdate(() => {\n if (focusedDate && focusedDateRef.current) {\n (focusedDateRef.current as HTMLDivElement).focus();\n }\n }, [focusedDate]);\n\n const weeks = useMemo<Date[][]>(\n () => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),\n [baseDate, startOfWeek]\n );\n const weekdays = weeks[0].map(date => date.getDay());\n\n return (\n <table role=\"grid\" className={styles['calendar-grid']} aria-labelledby={ariaLabelledby}>\n <thead>\n <tr>\n {weekdays.map(dayIndex => (\n <th\n key={dayIndex}\n scope=\"col\"\n className={clsx(styles['calendar-grid-cell'], styles['calendar-date-header'])}\n >\n <span aria-hidden=\"true\">{renderDayName(locale, dayIndex, 'short')}</span>\n <ScreenreaderOnly>{renderDayName(locale, dayIndex, 'long')}</ScreenreaderOnly>\n </th>\n ))}\n </tr>\n </thead>\n <tbody onKeyDown={onGridKeyDownHandler}>\n {weeks.map((week, weekIndex) => (\n <tr key={weekIndex} className={styles['calendar-row']}>\n {week.map((date, dateIndex) => {\n const isFocusable = !!focusableDate && isSameDay(date, focusableDate);\n const isSelected = !!selectedDate && isSameDay(date, selectedDate);\n const isEnabled = !isDateEnabled || isDateEnabled(date);\n const isDateOnSameDay = isSameDay(date, new Date());\n\n // Can't be focused.\n let tabIndex = undefined;\n if (isFocusable && isEnabled) {\n // Next focus target.\n tabIndex = 0;\n } else if (isEnabled) {\n // Can be focused programmatically.\n tabIndex = -1;\n }\n\n // Screen-reader announcement for the focused date.\n let dayAnnouncement = getDateLabel(locale, date, 'short');\n if (isDateOnSameDay && todayAriaLabel) {\n dayAnnouncement += '. ' + todayAriaLabel;\n }\n\n return (\n <td\n key={`${weekIndex}:${dateIndex}`}\n ref={tabIndex === 0 ? focusedDateRef : undefined}\n tabIndex={tabIndex}\n aria-current={isDateOnSameDay ? 'date' : undefined}\n aria-selected={isEnabled ? isSelected : undefined}\n aria-disabled={!isEnabled}\n // Do not attach click event when the date is disabled, otherwise VO+safari announces clickable\n onClick={isEnabled ? () => onSelectDate(date) : undefined}\n className={clsx(styles['calendar-grid-cell'], styles['calendar-date'], {\n [styles['calendar-date-current-page']]: isSameMonth(date, baseDate),\n [styles['calendar-date-enabled']]: isEnabled,\n [styles['calendar-date-selected']]: isSelected,\n [styles['calendar-date-current']]: isDateOnSameDay,\n })}\n >\n <span className={styles['date-inner']} aria-hidden=\"true\">\n {date.getDate()}\n </span>\n <ScreenreaderOnly>{dayAnnouncement}</ScreenreaderOnly>\n </td>\n );\n })}\n </tr>\n ))}\n </tbody>\n </table>\n );\n}\n"]}
|
|
@@ -5,9 +5,9 @@ import { InternalButton } from '../../button/internal';
|
|
|
5
5
|
import styles from '../styles.css.js';
|
|
6
6
|
import { addMonths } from 'date-fns';
|
|
7
7
|
export function PrevMonthButton({ ariaLabel, baseDate, onChangeMonth }) {
|
|
8
|
-
return (React.createElement(InternalButton, { iconName: "angle-left", ariaLabel: ariaLabel, variant: "icon", onClick: () => onChangeMonth(addMonths(baseDate, -1)), formAction: "none", className: styles['calendar-prev-
|
|
8
|
+
return (React.createElement(InternalButton, { iconName: "angle-left", ariaLabel: ariaLabel, variant: "icon", onClick: () => onChangeMonth(addMonths(baseDate, -1)), formAction: "none", className: styles['calendar-prev-btn'] }));
|
|
9
9
|
}
|
|
10
10
|
export function NextMonthButton({ ariaLabel, baseDate, onChangeMonth }) {
|
|
11
|
-
return (React.createElement(InternalButton, { iconName: "angle-right", ariaLabel: ariaLabel, variant: "icon", onClick: () => onChangeMonth(addMonths(baseDate, 1)), formAction: "none", className: styles['calendar-next-
|
|
11
|
+
return (React.createElement(InternalButton, { iconName: "angle-right", ariaLabel: ariaLabel, variant: "icon", onClick: () => onChangeMonth(addMonths(baseDate, 1)), formAction: "none", className: styles['calendar-next-btn'] }));
|
|
12
12
|
}
|
|
13
13
|
//# sourceMappingURL=header-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-button.js","sourceRoot":"lib/default/","sources":["calendar/header/header-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAQrC,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAqB;IACvF,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EACrD,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"header-button.js","sourceRoot":"lib/default/","sources":["calendar/header/header-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAQrC,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAqB;IACvF,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EACrD,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,GACtC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAqB;IACvF,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,aAAa,EACtB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EACpD,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,GACtC,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport { InternalButton } from '../../button/internal';\nimport styles from '../styles.css.js';\nimport { addMonths } from 'date-fns';\n\ninterface HeaderButtonProps {\n ariaLabel?: string;\n baseDate: Date;\n onChangeMonth: (date: Date) => void;\n}\n\nexport function PrevMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps) {\n return (\n <InternalButton\n iconName=\"angle-left\"\n ariaLabel={ariaLabel}\n variant=\"icon\"\n onClick={() => onChangeMonth(addMonths(baseDate, -1))}\n formAction=\"none\"\n className={styles['calendar-prev-btn']}\n />\n );\n}\n\nexport function NextMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps) {\n return (\n <InternalButton\n iconName=\"angle-right\"\n ariaLabel={ariaLabel}\n variant=\"icon\"\n onClick={() => onChangeMonth(addMonths(baseDate, 1))}\n formAction=\"none\"\n className={styles['calendar-next-btn']}\n />\n );\n}\n"]}
|
package/calendar/styles.css.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
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
|
-
"calendar-inner": "awsui_calendar-
|
|
8
|
-
"calendar-header": "awsui_calendar-
|
|
9
|
-
"calendar-header-month": "awsui_calendar-header-
|
|
10
|
-
"calendar-next-
|
|
11
|
-
"calendar-prev-
|
|
12
|
-
"calendar-grid": "awsui_calendar-
|
|
13
|
-
"calendar-grid-cell": "awsui_calendar-grid-
|
|
14
|
-
"calendar-
|
|
15
|
-
"calendar-
|
|
16
|
-
"calendar-
|
|
17
|
-
"calendar-
|
|
18
|
-
"calendar-
|
|
19
|
-
"calendar-
|
|
20
|
-
"
|
|
21
|
-
"calendar-
|
|
4
|
+
"calendar": "awsui_calendar_1ykar_2xzng_93",
|
|
5
|
+
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_2xzng_1",
|
|
6
|
+
"root": "awsui_root_1ykar_2xzng_124",
|
|
7
|
+
"calendar-inner": "awsui_calendar-inner_1ykar_2xzng_165",
|
|
8
|
+
"calendar-header": "awsui_calendar-header_1ykar_2xzng_169",
|
|
9
|
+
"calendar-header-month": "awsui_calendar-header-month_1ykar_2xzng_174",
|
|
10
|
+
"calendar-next-btn": "awsui_calendar-next-btn_1ykar_2xzng_182",
|
|
11
|
+
"calendar-prev-btn": "awsui_calendar-prev-btn_1ykar_2xzng_185",
|
|
12
|
+
"calendar-grid": "awsui_calendar-grid_1ykar_2xzng_188",
|
|
13
|
+
"calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_2xzng_192",
|
|
14
|
+
"calendar-date-header": "awsui_calendar-date-header_1ykar_2xzng_198",
|
|
15
|
+
"calendar-date": "awsui_calendar-date_1ykar_2xzng_198",
|
|
16
|
+
"calendar-date-enabled": "awsui_calendar-date-enabled_1ykar_2xzng_218",
|
|
17
|
+
"calendar-date-current-page": "awsui_calendar-date-current-page_1ykar_2xzng_228",
|
|
18
|
+
"calendar-date-selected": "awsui_calendar-date-selected_1ykar_2xzng_235",
|
|
19
|
+
"calendar-date-current": "awsui_calendar-date-current_1ykar_2xzng_228",
|
|
20
|
+
"date-inner": "awsui_date-inner_1ykar_2xzng_257",
|
|
21
|
+
"calendar-row": "awsui_calendar-row_1ykar_2xzng_332"
|
|
22
22
|
};
|
|
23
23
|
|