@cloudscape-design/components 3.0.521 → 3.0.523
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.js +1 -1
- package/calendar/grid/index.js.map +1 -1
- package/calendar/interfaces.d.ts +23 -3
- package/calendar/interfaces.d.ts.map +1 -1
- package/calendar/interfaces.js.map +1 -1
- package/calendar/internal.d.ts +1 -1
- package/calendar/internal.d.ts.map +1 -1
- package/calendar/internal.js +5 -4
- package/calendar/internal.js.map +1 -1
- package/calendar/styles.css.js +18 -18
- package/calendar/styles.scoped.css +75 -59
- 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/ace-themes.d.ts +6 -0
- package/code-editor/ace-themes.d.ts.map +1 -1
- package/code-editor/ace-themes.js +2 -0
- package/code-editor/ace-themes.js.map +1 -1
- package/code-editor/index.js +3 -3
- package/code-editor/index.js.map +1 -1
- package/code-editor/preferences-modal.d.ts +1 -1
- package/code-editor/preferences-modal.d.ts.map +1 -1
- package/code-editor/preferences-modal.js +3 -6
- package/code-editor/preferences-modal.js.map +1 -1
- 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/code-editor/use-editor.d.ts.map +1 -1
- package/code-editor/use-editor.js +4 -2
- package/code-editor/use-editor.js.map +1 -1
- package/code-editor/util.d.ts +3 -4
- package/code-editor/util.d.ts.map +1 -1
- package/code-editor/util.js +29 -10
- package/code-editor/util.js.map +1 -1
- 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/index.d.ts.map +1 -1
- package/date-picker/index.js +6 -2
- package/date-picker/index.js.map +1 -1
- package/date-picker/interfaces.d.ts +7 -0
- package/date-picker/interfaces.d.ts.map +1 -1
- package/date-picker/interfaces.js.map +1 -1
- 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 +71 -60
- 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/environment.js +1 -1
- package/internal/environment.json +1 -1
- 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/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.js
CHANGED
|
@@ -81,7 +81,7 @@ export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, foc
|
|
|
81
81
|
}
|
|
82
82
|
// Screen-reader announcement for the focused day.
|
|
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,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["calendar/grid/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,gBAAgB,MAAM,sDAAsD,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAgC3F,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,MAAM,EACN,QAAQ,EACR,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,EACb,WAAW,EACX,cAAc,EACd,YAAY,EACZ,cAAc,GACJ;IACV,MAAM,cAAc,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IAE1D,MAAM,oBAAoB,GAAG,CAAC,KAA0B,EAAE,EAAE;QAC1D,IAAI,gBAAgB,CAAC;QAErB,IAAI,aAAa,KAAK,IAAI,EAAE;YAC1B,OAAO;SACR;QAED,QAAQ,KAAK,CAAC,OAAO,EAAE;YACrB,KAAK,OAAO,CAAC,KAAK,CAAC;YACnB,KAAK,OAAO,CAAC,KAAK;gBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,aAAa,EAAE;oBACjB,WAAW,CAAC,IAAI,CAAC,CAAC;oBAClB,YAAY,CAAC,aAAa,CAAC,CAAC;iBAC7B;gBACD,OAAO;YACT,KAAK,OAAO,CAAC,KAAK;gBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,gBAAgB,GAAG,WAAW,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;gBAC7D,MAAM;YACR,KAAK,OAAO,CAAC,IAAI;gBACf,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,gBAAgB,GAAG,WAAW,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;gBAC7D,MAAM;YACR,KAAK,OAAO,CAAC,EAAE;gBACb,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,gBAAgB,GAAG,YAAY,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;gBAC9D,MAAM;YACR,KAAK,OAAO,CAAC,IAAI;gBACf,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,gBAAgB,GAAG,YAAY,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;gBAC9D,MAAM;YACR;gBACE,OAAO;SACV;QAED,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE,QAAQ,CAAC,EAAE;YAC5C,aAAa,CAAC,gBAAgB,CAAC,CAAC;SACjC;QACD,WAAW,CAAC,gBAAgB,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,6EAA6E;IAC7E,gFAAgF;IAChF,iBAAiB,CAAC,GAAG,EAAE;QACrB,IAAI,WAAW,IAAI,cAAc,CAAC,OAAO,EAAE;YACxC,cAAc,CAAC,OAA0B,CAAC,KAAK,EAAE,CAAC;SACpD;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC,EACjE,CAAC,QAAQ,EAAE,WAAW,CAAC,CACxB,CAAC;IACF,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAErD,OAAO,CACL,+BAAO,IAAI,EAAC,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,qBAAmB,cAAc;QACpF;YACE,gCACG,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CACxB,4BACE,GAAG,EAAE,QAAQ,EACb,KAAK,EAAC,KAAK,EACX,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,qBAAqB,CAAC,CAAC;gBAE5E,6CAAkB,MAAM,IAAE,aAAa,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAQ;gBAC1E,oBAAC,gBAAgB,QAAE,aAAa,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAoB,CAC3E,CACN,CAAC,CACC,CACC;QACR,+BAAO,SAAS,EAAE,oBAAoB,IACnC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CAC9B,4BAAI,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IACnD,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE;YAC5B,MAAM,WAAW,GAAG,CAAC,CAAC,aAAa,IAAI,SAAS,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;YACtE,MAAM,UAAU,GAAG,CAAC,CAAC,YAAY,IAAI,SAAS,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;YACnE,MAAM,SAAS,GAAG,CAAC,aAAa,IAAI,aAAa,CAAC,IAAI,CAAC,CAAC;YACxD,MAAM,eAAe,GAAG,SAAS,CAAC,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;YAEpD,oBAAoB;YACpB,IAAI,QAAQ,GAAG,SAAS,CAAC;YACzB,IAAI,WAAW,IAAI,SAAS,EAAE;gBAC5B,qBAAqB;gBACrB,QAAQ,GAAG,CAAC,CAAC;aACd;iBAAM,IAAI,SAAS,EAAE;gBACpB,mCAAmC;gBACnC,QAAQ,GAAG,CAAC,CAAC,CAAC;aACf;YAED,kDAAkD;YAClD,IAAI,eAAe,GAAG,YAAY,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;YAC1D,IAAI,eAAe,EAAE;gBACnB,eAAe,IAAI,IAAI,GAAG,cAAc,CAAC;aAC1C;YAED,OAAO,CACL,4BACE,GAAG,EAAE,GAAG,SAAS,IAAI,SAAS,EAAE,EAChC,GAAG,EAAE,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAChD,QAAQ,EAAE,QAAQ,kBACJ,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBACnC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,mBAClC,CAAC,SAAS;gBACzB,+FAA+F;gBAC/F,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EACzD,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,EAAE;oBACpE,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,EAAE,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC;oBACnE,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,SAAS;oBAC3C,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,UAAU;oBAC7C,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,eAAe;iBAChD,CAAC;gBAEF,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,iBAAc,MAAM,IACrD,IAAI,CAAC,OAAO,EAAE,CACV;gBACP,oBAAC,gBAAgB,QAAE,eAAe,CAAoB,CACnD,CACN,CAAC;QACJ,CAAC,CAAC,CACC,CACN,CAAC,CACI,CACF,CACT,CAAC;AACJ,CAAC","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 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 && 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-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"]}
|
package/calendar/interfaces.d.ts
CHANGED
|
@@ -39,17 +39,17 @@ export interface CalendarProps extends BaseComponentProps {
|
|
|
39
39
|
ariaDescribedby?: string;
|
|
40
40
|
/**
|
|
41
41
|
* Used as part of the `aria-label` for today's date in the calendar.
|
|
42
|
-
* @
|
|
42
|
+
* @deprecated Use `i18nString.todayAriaLabel` instead.
|
|
43
43
|
*/
|
|
44
44
|
todayAriaLabel?: string;
|
|
45
45
|
/**
|
|
46
46
|
* Specifies an `aria-label` for the 'next month' button.
|
|
47
|
-
* @
|
|
47
|
+
* @deprecated Use `i18nStrings.nextMonthAriaLabel` instead.
|
|
48
48
|
*/
|
|
49
49
|
nextMonthAriaLabel?: string;
|
|
50
50
|
/**
|
|
51
51
|
* Specifies an `aria-label` for the 'previous month' button.
|
|
52
|
-
* @
|
|
52
|
+
* @deprecated Use `i18nStrings.previousMonthAriaLabel` instead.
|
|
53
53
|
*/
|
|
54
54
|
previousMonthAriaLabel?: string;
|
|
55
55
|
/**
|
|
@@ -57,6 +57,12 @@ export interface CalendarProps extends BaseComponentProps {
|
|
|
57
57
|
* The event `detail` contains the current value of the field.
|
|
58
58
|
*/
|
|
59
59
|
onChange?: NonCancelableEventHandler<CalendarProps.ChangeDetail>;
|
|
60
|
+
/**
|
|
61
|
+
* An object containing all the necessary localized strings required by
|
|
62
|
+
* the component.
|
|
63
|
+
* @i18n
|
|
64
|
+
*/
|
|
65
|
+
i18nStrings?: CalendarProps.I18nStrings;
|
|
60
66
|
}
|
|
61
67
|
export declare namespace CalendarProps {
|
|
62
68
|
interface ChangeDetail {
|
|
@@ -68,5 +74,19 @@ export declare namespace CalendarProps {
|
|
|
68
74
|
interface IsDateEnabledFunction {
|
|
69
75
|
(date: Date): boolean;
|
|
70
76
|
}
|
|
77
|
+
interface I18nStrings {
|
|
78
|
+
/**
|
|
79
|
+
* Used as part of the `aria-label` for today's date in the calendar.
|
|
80
|
+
*/
|
|
81
|
+
todayAriaLabel?: string;
|
|
82
|
+
/**
|
|
83
|
+
* Specifies an `aria-label` for the 'next month' button.
|
|
84
|
+
*/
|
|
85
|
+
nextMonthAriaLabel?: string;
|
|
86
|
+
/**
|
|
87
|
+
* Specifies an `aria-label` for the 'previous month' button.
|
|
88
|
+
*/
|
|
89
|
+
previousMonthAriaLabel?: string;
|
|
90
|
+
}
|
|
71
91
|
}
|
|
72
92
|
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["calendar/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC;IAEpD;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["calendar/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC;IAEpD;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAEjE;;;;OAIG;IACH,WAAW,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC;CACzC;AAED,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,YAAY;QAC3B;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,qBAAqB;QACpC,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC;KACvB;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QAExB;;WAEG;QACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAE5B;;WAEG;QACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["calendar/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface CalendarProps extends BaseComponentProps {\n /**\n * The current input value, in YYYY-MM-DD format.\n */\n value: string;\n\n /**\n * Defines whether a particular date is enabled in the calendar or not.\n * If you disable a date in the calendar, users can still enter this date using a keyboard.\n * We recommend that you also validate these constraints on the client-side and server-side\n * as you would for other form elements.\n * @param date\n */\n isDateEnabled?: CalendarProps.IsDateEnabledFunction;\n\n /**\n * Specifies the locale to use to render month names and determine the starting day of the week.\n * If you don't provide this, the locale is determined by the page and browser locales.\n * Supported values and formats are listed in the\n * [JavaScript Intl API specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).\n */\n locale?: string;\n\n /**\n * Determines the starting day of the week. The values 0-6 map to Sunday-Saturday.\n * By default the starting day of the week is defined by the locale, but you can use this property to override it.\n */\n startOfWeek?: number;\n\n /**\n * Adds an `aria-label` to the calendar.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-labelledby` to the calendar.\n */\n ariaLabelledby?: string;\n\n /**\n * Adds `aria-describedby` to the calendar.\n */\n ariaDescribedby?: string;\n\n /**\n * Used as part of the `aria-label` for today's date in the calendar.\n * @
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["calendar/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface CalendarProps extends BaseComponentProps {\n /**\n * The current input value, in YYYY-MM-DD format.\n */\n value: string;\n\n /**\n * Defines whether a particular date is enabled in the calendar or not.\n * If you disable a date in the calendar, users can still enter this date using a keyboard.\n * We recommend that you also validate these constraints on the client-side and server-side\n * as you would for other form elements.\n * @param date\n */\n isDateEnabled?: CalendarProps.IsDateEnabledFunction;\n\n /**\n * Specifies the locale to use to render month names and determine the starting day of the week.\n * If you don't provide this, the locale is determined by the page and browser locales.\n * Supported values and formats are listed in the\n * [JavaScript Intl API specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).\n */\n locale?: string;\n\n /**\n * Determines the starting day of the week. The values 0-6 map to Sunday-Saturday.\n * By default the starting day of the week is defined by the locale, but you can use this property to override it.\n */\n startOfWeek?: number;\n\n /**\n * Adds an `aria-label` to the calendar.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-labelledby` to the calendar.\n */\n ariaLabelledby?: string;\n\n /**\n * Adds `aria-describedby` to the calendar.\n */\n ariaDescribedby?: string;\n\n /**\n * Used as part of the `aria-label` for today's date in the calendar.\n * @deprecated Use `i18nString.todayAriaLabel` instead.\n */\n todayAriaLabel?: string;\n\n /**\n * Specifies an `aria-label` for the 'next month' button.\n * @deprecated Use `i18nStrings.nextMonthAriaLabel` instead.\n */\n nextMonthAriaLabel?: string;\n\n /**\n * Specifies an `aria-label` for the 'previous month' button.\n * @deprecated Use `i18nStrings.previousMonthAriaLabel` instead.\n */\n previousMonthAriaLabel?: string;\n\n /**\n * Called whenever a user changes the input value (by typing, pasting, or selecting a value).\n * The event `detail` contains the current value of the field.\n */\n onChange?: NonCancelableEventHandler<CalendarProps.ChangeDetail>;\n\n /**\n * An object containing all the necessary localized strings required by\n * the component.\n * @i18n\n */\n i18nStrings?: CalendarProps.I18nStrings;\n}\n\nexport namespace CalendarProps {\n export interface ChangeDetail {\n /**\n * The new value of this component.\n */\n value: string;\n }\n\n export interface IsDateEnabledFunction {\n (date: Date): boolean;\n }\n\n export interface I18nStrings {\n /**\n * Used as part of the `aria-label` for today's date in the calendar.\n */\n todayAriaLabel?: string;\n\n /**\n * Specifies an `aria-label` for the 'next month' button.\n */\n nextMonthAriaLabel?: string;\n\n /**\n * Specifies an `aria-label` for the 'previous month' button.\n */\n previousMonthAriaLabel?: string;\n }\n}\n"]}
|
package/calendar/internal.d.ts
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
import { CalendarProps } from './interfaces.js';
|
|
3
3
|
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';
|
|
4
4
|
export type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
5
|
-
export default function Calendar({ value, locale, startOfWeek, isDateEnabled, ariaLabel, ariaLabelledby, ariaDescribedby, onChange, __internalRootRef, ...rest }: CalendarProps & InternalBaseComponentProps): JSX.Element;
|
|
5
|
+
export default function Calendar({ value, locale, startOfWeek, isDateEnabled, ariaLabel, ariaLabelledby, ariaDescribedby, onChange, __internalRootRef, i18nStrings, ...rest }: CalendarProps & InternalBaseComponentProps): JSX.Element;
|
|
6
6
|
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["calendar/internal.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAM3F,MAAM,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,MAAW,EACX,WAAW,EACX,aAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,QAAQ,EACR,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,aAAa,GAAG,0BAA0B,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["calendar/internal.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAM3F,MAAM,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,MAAW,EACX,WAAW,EACX,aAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,QAAQ,EACR,iBAAiB,EACjB,WAAW,EACX,GAAG,IAAI,EACR,EAAE,aAAa,GAAG,0BAA0B,eAoH5C"}
|
package/calendar/internal.js
CHANGED
|
@@ -17,7 +17,8 @@ import { useDateCache } from '../internal/hooks/use-date-cache/index.js';
|
|
|
17
17
|
import { useUniqueId } from '../internal/hooks/use-unique-id/index.js';
|
|
18
18
|
import { useInternalI18n } from '../i18n/context.js';
|
|
19
19
|
export default function Calendar(_a) {
|
|
20
|
-
var
|
|
20
|
+
var _b, _c, _d;
|
|
21
|
+
var { value, locale = '', startOfWeek, isDateEnabled = () => true, ariaLabel, ariaLabelledby, ariaDescribedby, onChange, __internalRootRef, i18nStrings } = _a, rest = __rest(_a, ["value", "locale", "startOfWeek", "isDateEnabled", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "onChange", "__internalRootRef", "i18nStrings"]);
|
|
21
22
|
checkControlled('Calendar', 'value', value, 'onChange', onChange);
|
|
22
23
|
const baseProps = getBaseProps(rest);
|
|
23
24
|
const normalizedLocale = normalizeLocale('Calendar', locale);
|
|
@@ -33,9 +34,9 @@ export default function Calendar(_a) {
|
|
|
33
34
|
const [displayedDate, setDisplayedDate] = useState(defaultDisplayedDate);
|
|
34
35
|
const headingId = useUniqueId('calendar-heading');
|
|
35
36
|
const i18n = useInternalI18n('calendar');
|
|
36
|
-
const nextMonthAriaLabel = i18n('nextMonthAriaLabel', rest.nextMonthAriaLabel);
|
|
37
|
-
const previousMonthAriaLabel = i18n('previousMonthAriaLabel', rest.previousMonthAriaLabel);
|
|
38
|
-
const todayAriaLabel = i18n('todayAriaLabel', rest.todayAriaLabel);
|
|
37
|
+
const nextMonthAriaLabel = i18n('nextMonthAriaLabel', (_b = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.nextMonthAriaLabel) !== null && _b !== void 0 ? _b : rest.nextMonthAriaLabel);
|
|
38
|
+
const previousMonthAriaLabel = i18n('previousMonthAriaLabel', (_c = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.previousMonthAriaLabel) !== null && _c !== void 0 ? _c : rest.previousMonthAriaLabel);
|
|
39
|
+
const todayAriaLabel = i18n('todayAriaLabel', (_d = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.todayAriaLabel) !== null && _d !== void 0 ? _d : rest.todayAriaLabel);
|
|
39
40
|
// Update displayed date if value changes.
|
|
40
41
|
useEffect(() => {
|
|
41
42
|
memoizedValue && setDisplayedDate(prev => (prev.getTime() !== memoizedValue.getTime() ? memoizedValue : prev));
|
package/calendar/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["calendar/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { isSameMonth } from 'date-fns';\nimport styles from './styles.css.js';\nimport CalendarHeader from './header';\nimport Grid from './grid';\nimport { normalizeLocale, normalizeStartOfWeek } from '../internal/utils/locale';\nimport { formatDate, parseDate } from '../internal/utils/date-time';\nimport { fireNonCancelableEvent } from '../internal/events/index.js';\nimport checkControlled from '../internal/hooks/check-controlled/index.js';\nimport clsx from 'clsx';\nimport { CalendarProps } from './interfaces.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { getBaseDate } from './utils/navigation';\nimport { useDateCache } from '../internal/hooks/use-date-cache/index.js';\nimport { useUniqueId } from '../internal/hooks/use-unique-id/index.js';\nimport { useInternalI18n } from '../i18n/context.js';\n\nexport type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\nexport default function Calendar({\n value,\n locale = '',\n startOfWeek,\n isDateEnabled = () => true,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n onChange,\n __internalRootRef,\n ...rest\n}: CalendarProps & InternalBaseComponentProps) {\n checkControlled('Calendar', 'value', value, 'onChange', onChange);\n\n const baseProps = getBaseProps(rest);\n const normalizedLocale = normalizeLocale('Calendar', locale);\n const normalizedStartOfWeek = normalizeStartOfWeek(startOfWeek, normalizedLocale);\n const gridWrapperRef = useRef<HTMLDivElement>(null);\n const [focusedDate, setFocusedDate] = useState<Date | null>(null);\n\n const valueDateCache = useDateCache();\n const focusedDateCache = useDateCache();\n\n // Set displayed date to value if defined or to current date otherwise.\n const parsedValue = value && value.length >= 4 ? parseDate(value) : null;\n const memoizedValue = parsedValue ? valueDateCache(parsedValue) : null;\n const defaultDisplayedDate = memoizedValue ?? new Date();\n const [displayedDate, setDisplayedDate] = useState(defaultDisplayedDate);\n\n const headingId = useUniqueId('calendar-heading');\n\n const i18n = useInternalI18n('calendar');\n const nextMonthAriaLabel = i18n('nextMonthAriaLabel', rest.nextMonthAriaLabel);\n const previousMonthAriaLabel = i18n('previousMonthAriaLabel', rest.previousMonthAriaLabel);\n const todayAriaLabel = i18n('todayAriaLabel', rest.todayAriaLabel);\n\n // Update displayed date if value changes.\n useEffect(() => {\n memoizedValue && setDisplayedDate(prev => (prev.getTime() !== memoizedValue.getTime() ? memoizedValue : prev));\n }, [memoizedValue]);\n\n const selectFocusedDate = (selected: Date | null, baseDate: Date): Date | null => {\n if (selected && isDateEnabled(selected) && isSameMonth(selected, baseDate)) {\n return selected;\n }\n const today = new Date();\n if (isDateEnabled(today) && isSameMonth(today, baseDate)) {\n return today;\n }\n if (isDateEnabled(baseDate)) {\n return baseDate;\n }\n return null;\n };\n\n const baseDate = getBaseDate(displayedDate, isDateEnabled);\n const focusableDate = focusedDate || selectFocusedDate(memoizedValue, baseDate);\n\n const onHeaderChangeMonthHandler = (date: Date) => {\n setDisplayedDate(date);\n setFocusedDate(null);\n };\n\n const onGridChangeMonthHandler = (newMonth: Date) => {\n setDisplayedDate(newMonth);\n setFocusedDate(null);\n };\n\n const onGridFocusDateHandler = (date: null | Date) => {\n if (date) {\n setFocusedDate(date ? focusedDateCache(date) : null);\n }\n };\n\n const onGridSelectDateHandler = (date: Date) => {\n fireNonCancelableEvent(onChange, { value: formatDate(date) });\n setFocusedDate(null);\n };\n\n const onGridBlur = (event: React.FocusEvent) => {\n const newFocusTargetIsInGrid = event.relatedTarget && gridWrapperRef.current?.contains(event.relatedTarget as Node);\n if (!newFocusTargetIsInGrid) {\n setFocusedDate(null);\n }\n };\n\n return (\n <div\n ref={__internalRootRef}\n {...baseProps}\n role=\"group\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n className={clsx(styles.root, styles.calendar, baseProps.className)}\n >\n <div className={styles['calendar-inner']}>\n <CalendarHeader\n baseDate={baseDate}\n locale={normalizedLocale}\n onChangeMonth={onHeaderChangeMonthHandler}\n previousMonthLabel={previousMonthAriaLabel}\n nextMonthLabel={nextMonthAriaLabel}\n headingId={headingId}\n />\n <div onBlur={onGridBlur} ref={gridWrapperRef}>\n <Grid\n locale={normalizedLocale}\n baseDate={baseDate}\n isDateEnabled={isDateEnabled}\n focusedDate={focusedDate}\n focusableDate={focusableDate}\n onSelectDate={onGridSelectDateHandler}\n onFocusDate={onGridFocusDateHandler}\n onChangeMonth={onGridChangeMonthHandler}\n startOfWeek={normalizedStartOfWeek}\n todayAriaLabel={todayAriaLabel}\n selectedDate={memoizedValue}\n ariaLabelledby={headingId}\n />\n </div>\n </div>\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["calendar/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { isSameMonth } from 'date-fns';\nimport styles from './styles.css.js';\nimport CalendarHeader from './header';\nimport Grid from './grid';\nimport { normalizeLocale, normalizeStartOfWeek } from '../internal/utils/locale';\nimport { formatDate, parseDate } from '../internal/utils/date-time';\nimport { fireNonCancelableEvent } from '../internal/events/index.js';\nimport checkControlled from '../internal/hooks/check-controlled/index.js';\nimport clsx from 'clsx';\nimport { CalendarProps } from './interfaces.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { getBaseDate } from './utils/navigation';\nimport { useDateCache } from '../internal/hooks/use-date-cache/index.js';\nimport { useUniqueId } from '../internal/hooks/use-unique-id/index.js';\nimport { useInternalI18n } from '../i18n/context.js';\n\nexport type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\nexport default function Calendar({\n value,\n locale = '',\n startOfWeek,\n isDateEnabled = () => true,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n onChange,\n __internalRootRef,\n i18nStrings,\n ...rest\n}: CalendarProps & InternalBaseComponentProps) {\n checkControlled('Calendar', 'value', value, 'onChange', onChange);\n\n const baseProps = getBaseProps(rest);\n const normalizedLocale = normalizeLocale('Calendar', locale);\n const normalizedStartOfWeek = normalizeStartOfWeek(startOfWeek, normalizedLocale);\n const gridWrapperRef = useRef<HTMLDivElement>(null);\n const [focusedDate, setFocusedDate] = useState<Date | null>(null);\n\n const valueDateCache = useDateCache();\n const focusedDateCache = useDateCache();\n\n // Set displayed date to value if defined or to current date otherwise.\n const parsedValue = value && value.length >= 4 ? parseDate(value) : null;\n const memoizedValue = parsedValue ? valueDateCache(parsedValue) : null;\n const defaultDisplayedDate = memoizedValue ?? new Date();\n const [displayedDate, setDisplayedDate] = useState(defaultDisplayedDate);\n\n const headingId = useUniqueId('calendar-heading');\n\n const i18n = useInternalI18n('calendar');\n const nextMonthAriaLabel = i18n('nextMonthAriaLabel', i18nStrings?.nextMonthAriaLabel ?? rest.nextMonthAriaLabel);\n const previousMonthAriaLabel = i18n(\n 'previousMonthAriaLabel',\n i18nStrings?.previousMonthAriaLabel ?? rest.previousMonthAriaLabel\n );\n const todayAriaLabel = i18n('todayAriaLabel', i18nStrings?.todayAriaLabel ?? rest.todayAriaLabel);\n\n // Update displayed date if value changes.\n useEffect(() => {\n memoizedValue && setDisplayedDate(prev => (prev.getTime() !== memoizedValue.getTime() ? memoizedValue : prev));\n }, [memoizedValue]);\n\n const selectFocusedDate = (selected: Date | null, baseDate: Date): Date | null => {\n if (selected && isDateEnabled(selected) && isSameMonth(selected, baseDate)) {\n return selected;\n }\n const today = new Date();\n if (isDateEnabled(today) && isSameMonth(today, baseDate)) {\n return today;\n }\n if (isDateEnabled(baseDate)) {\n return baseDate;\n }\n return null;\n };\n\n const baseDate = getBaseDate(displayedDate, isDateEnabled);\n const focusableDate = focusedDate || selectFocusedDate(memoizedValue, baseDate);\n\n const onHeaderChangeMonthHandler = (date: Date) => {\n setDisplayedDate(date);\n setFocusedDate(null);\n };\n\n const onGridChangeMonthHandler = (newMonth: Date) => {\n setDisplayedDate(newMonth);\n setFocusedDate(null);\n };\n\n const onGridFocusDateHandler = (date: null | Date) => {\n if (date) {\n setFocusedDate(date ? focusedDateCache(date) : null);\n }\n };\n\n const onGridSelectDateHandler = (date: Date) => {\n fireNonCancelableEvent(onChange, { value: formatDate(date) });\n setFocusedDate(null);\n };\n\n const onGridBlur = (event: React.FocusEvent) => {\n const newFocusTargetIsInGrid = event.relatedTarget && gridWrapperRef.current?.contains(event.relatedTarget as Node);\n if (!newFocusTargetIsInGrid) {\n setFocusedDate(null);\n }\n };\n\n return (\n <div\n ref={__internalRootRef}\n {...baseProps}\n role=\"group\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n className={clsx(styles.root, styles.calendar, baseProps.className)}\n >\n <div className={styles['calendar-inner']}>\n <CalendarHeader\n baseDate={baseDate}\n locale={normalizedLocale}\n onChangeMonth={onHeaderChangeMonthHandler}\n previousMonthLabel={previousMonthAriaLabel}\n nextMonthLabel={nextMonthAriaLabel}\n headingId={headingId}\n />\n <div onBlur={onGridBlur} ref={gridWrapperRef}>\n <Grid\n locale={normalizedLocale}\n baseDate={baseDate}\n isDateEnabled={isDateEnabled}\n focusedDate={focusedDate}\n focusableDate={focusableDate}\n onSelectDate={onGridSelectDateHandler}\n onFocusDate={onGridFocusDateHandler}\n onChangeMonth={onGridChangeMonthHandler}\n startOfWeek={normalizedStartOfWeek}\n todayAriaLabel={todayAriaLabel}\n selectedDate={memoizedValue}\n ariaLabelledby={headingId}\n />\n </div>\n </div>\n </div>\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-month-btn": "awsui_calendar-next-month-
|
|
11
|
-
"calendar-prev-month-btn": "awsui_calendar-prev-month-
|
|
12
|
-
"calendar-grid": "awsui_calendar-
|
|
13
|
-
"calendar-grid-cell": "awsui_calendar-grid-
|
|
14
|
-
"calendar-day-header": "awsui_calendar-day-
|
|
15
|
-
"calendar-day": "awsui_calendar-
|
|
16
|
-
"calendar-day-enabled": "awsui_calendar-day-
|
|
17
|
-
"calendar-day-current-month": "awsui_calendar-day-current-
|
|
18
|
-
"calendar-day-selected": "awsui_calendar-day-
|
|
19
|
-
"calendar-day-today": "awsui_calendar-day-
|
|
20
|
-
"day-inner": "awsui_day-
|
|
21
|
-
"calendar-week": "awsui_calendar-
|
|
4
|
+
"calendar": "awsui_calendar_1ykar_1818s_93",
|
|
5
|
+
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_1818s_1",
|
|
6
|
+
"root": "awsui_root_1ykar_1818s_124",
|
|
7
|
+
"calendar-inner": "awsui_calendar-inner_1ykar_1818s_165",
|
|
8
|
+
"calendar-header": "awsui_calendar-header_1ykar_1818s_169",
|
|
9
|
+
"calendar-header-month": "awsui_calendar-header-month_1ykar_1818s_174",
|
|
10
|
+
"calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_1818s_182",
|
|
11
|
+
"calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_1818s_185",
|
|
12
|
+
"calendar-grid": "awsui_calendar-grid_1ykar_1818s_188",
|
|
13
|
+
"calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_1818s_192",
|
|
14
|
+
"calendar-day-header": "awsui_calendar-day-header_1ykar_1818s_198",
|
|
15
|
+
"calendar-day": "awsui_calendar-day_1ykar_1818s_198",
|
|
16
|
+
"calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_1818s_218",
|
|
17
|
+
"calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_1818s_228",
|
|
18
|
+
"calendar-day-selected": "awsui_calendar-day-selected_1ykar_1818s_235",
|
|
19
|
+
"calendar-day-today": "awsui_calendar-day-today_1ykar_1818s_239",
|
|
20
|
+
"day-inner": "awsui_day-inner_1ykar_1818s_257",
|
|
21
|
+
"calendar-week": "awsui_calendar-week_1ykar_1818s_332"
|
|
22
22
|
};
|
|
23
23
|
|