@cloudscape-design/components-themeable 3.0.537 → 3.0.539

package/lib/internal/template/button-dropdown/styles.scoped.css

@@ -90,101 +90,104 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_button-dropdown_sne0l_jrij7_93:not(#\9) {
+.awsui_button-dropdown_sne0l_59w95_93:not(#\9) {
   display: inline-block;
 }
 
-.awsui_items-list-container_sne0l_jrij7_97:not(#\9) {
-  padding: 0;
-  margin: 0;
-  animation: awsui_awsui-motion-fade-in-0_sne0l_jrij7_1 500ms var(--motion-easing-show-quick-lvi5i8, ease-out);
+.awsui_items-list-container_sne0l_59w95_97:not(#\9) {
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  animation: awsui_awsui-motion-fade-in-0_sne0l_59w95_1 500ms var(--motion-easing-show-quick-lvi5i8, ease-out);
   animation-fill-mode: none;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_items-list-container_sne0l_jrij7_97:not(#\9) {
+  .awsui_items-list-container_sne0l_59w95_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_items-list-container_sne0l_jrij7_97:not(#\9), .awsui-mode-entering .awsui_items-list-container_sne0l_jrij7_97:not(#\9) {
+.awsui-motion-disabled .awsui_items-list-container_sne0l_59w95_97:not(#\9), .awsui-mode-entering .awsui_items-list-container_sne0l_59w95_97:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_rotate-up_sne0l_jrij7_114:not(#\9) {
+.awsui_rotate-up_sne0l_59w95_116:not(#\9) {
   transform: rotate(-180deg);
   transition: transform var(--motion-duration-rotate-180-6z1h8e, 135ms) var(--motion-easing-rotate-180-l3wboa, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_rotate-up_sne0l_jrij7_114:not(#\9) {
+  .awsui_rotate-up_sne0l_59w95_116:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_rotate-up_sne0l_jrij7_114:not(#\9), .awsui-mode-entering .awsui_rotate-up_sne0l_jrij7_114:not(#\9) {
+.awsui-motion-disabled .awsui_rotate-up_sne0l_59w95_116:not(#\9), .awsui-mode-entering .awsui_rotate-up_sne0l_59w95_116:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_rotate-down_sne0l_jrij7_129:not(#\9) {
+.awsui_rotate-down_sne0l_59w95_131:not(#\9) {
   transform: rotate(0deg);
   transition: transform var(--motion-duration-rotate-180-6z1h8e, 135ms) var(--motion-easing-rotate-180-l3wboa, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_rotate-down_sne0l_jrij7_129:not(#\9) {
+  .awsui_rotate-down_sne0l_59w95_131:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_rotate-down_sne0l_jrij7_129:not(#\9), .awsui-mode-entering .awsui_rotate-down_sne0l_jrij7_129:not(#\9) {
+.awsui-motion-disabled .awsui_rotate-down_sne0l_59w95_131:not(#\9), .awsui-mode-entering .awsui_rotate-down_sne0l_59w95_131:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_header_sne0l_jrij7_144:not(#\9) {
+.awsui_header_sne0l_59w95_146:not(#\9) {
   display: flex;
   flex-direction: column;
   list-style: none;
-  padding: var(--space-s-2025hl, 12px) var(--space-l-xu1x80, 20px);
-  border: var(--border-field-width-yoy972, 1px) solid transparent;
-  border-bottom: var(--border-field-width-yoy972, 1px) solid var(--color-border-dropdown-group-mkqzrv, #eaeded);
+  padding-block: var(--space-s-2025hl, 12px);
+  padding-inline: var(--space-l-xu1x80, 20px);
+  border-block-start: var(--border-field-width-yoy972, 1px) solid transparent;
+  border-block-end: var(--border-field-width-yoy972, 1px) solid var(--color-border-dropdown-group-mkqzrv, #eaeded);
+  border-inline: var(--border-field-width-yoy972, 1px) solid transparent;
 }
 
-.awsui_title_sne0l_jrij7_153:not(#\9),
-.awsui_description_sne0l_jrij7_154:not(#\9) {
+.awsui_title_sne0l_59w95_157:not(#\9),
+.awsui_description_sne0l_59w95_158:not(#\9) {
   color: var(--color-text-dropdown-header-z1le22, #16191f);
 }
 
-.awsui_split-trigger-wrapper_sne0l_jrij7_158:not(#\9) {
+.awsui_split-trigger-wrapper_sne0l_59w95_162:not(#\9) {
   display: flex;
 }
-.awsui_split-trigger-wrapper_sne0l_jrij7_158 > .awsui_trigger-item_sne0l_jrij7_161 > button:not(#\9):focus {
+.awsui_split-trigger-wrapper_sne0l_59w95_162 > .awsui_trigger-item_sne0l_59w95_165 > button:not(#\9):focus {
   z-index: 1;
 }
-.awsui_split-trigger-wrapper_sne0l_jrij7_158 > .awsui_trigger-item_sne0l_jrij7_161:not(#\9):not(:last-child) > .awsui_trigger-button_sne0l_jrij7_164 {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  padding-right: var(--space-m-kpg8id, 16px);
-  margin-right: var(--space-xxxs-z28114, 2px);
+.awsui_split-trigger-wrapper_sne0l_59w95_162 > .awsui_trigger-item_sne0l_59w95_165:not(#\9):not(:last-child) > .awsui_trigger-button_sne0l_59w95_168 {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  padding-inline-end: var(--space-m-kpg8id, 16px);
+  margin-inline-end: var(--space-xxxs-z28114, 2px);
 }
-.awsui_split-trigger-wrapper_sne0l_jrij7_158 > .awsui_trigger-item_sne0l_jrij7_161:not(#\9):not(:first-child) > .awsui_trigger-button_sne0l_jrij7_164 {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  padding-left: calc(var(--space-xs-xf5ch3, 8px) - 2px);
-  padding-right: calc(var(--space-xs-xf5ch3, 8px) - 2px);
+.awsui_split-trigger-wrapper_sne0l_59w95_162 > .awsui_trigger-item_sne0l_59w95_165:not(#\9):not(:first-child) > .awsui_trigger-button_sne0l_59w95_168 {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  padding-inline: calc(var(--space-xs-xf5ch3, 8px) - 2px);
 }
-.awsui_split-trigger-wrapper_sne0l_jrij7_158 > .awsui_trigger-item_sne0l_jrij7_161:not(#\9):not(:first-child).awsui_visual-refresh_sne0l_jrij7_176 > .awsui_trigger-button_sne0l_jrij7_164 {
-  padding-right: calc(var(--space-s-2025hl, 12px) - 2px);
+.awsui_split-trigger-wrapper_sne0l_59w95_162 > .awsui_trigger-item_sne0l_59w95_165:not(#\9):not(:first-child).awsui_visual-refresh_sne0l_59w95_179 > .awsui_trigger-button_sne0l_59w95_168 {
+  padding-inline-end: calc(var(--space-s-2025hl, 12px) - 2px);
 }
 
-.awsui_split-trigger_sne0l_jrij7_158:not(#\9) {
+.awsui_split-trigger_sne0l_59w95_162:not(#\9) {
   display: contents;
 }
 
-.awsui_dropdown-trigger_sne0l_jrij7_184:not(#\9) {
+.awsui_dropdown-trigger_sne0l_59w95_187:not(#\9) {
   display: contents;
 }
 
-.awsui_test-utils-button-trigger_sne0l_jrij7_188:not(#\9) {
+.awsui_test-utils-button-trigger_sne0l_59w95_191:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/button-dropdown/styles.selectors.js

@@ -2,20 +2,20 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "button-dropdown": "awsui_button-dropdown_sne0l_jrij7_93",
-  "items-list-container": "awsui_items-list-container_sne0l_jrij7_97",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_sne0l_jrij7_1",
-  "rotate-up": "awsui_rotate-up_sne0l_jrij7_114",
-  "rotate-down": "awsui_rotate-down_sne0l_jrij7_129",
-  "header": "awsui_header_sne0l_jrij7_144",
-  "title": "awsui_title_sne0l_jrij7_153",
-  "description": "awsui_description_sne0l_jrij7_154",
-  "split-trigger-wrapper": "awsui_split-trigger-wrapper_sne0l_jrij7_158",
-  "trigger-item": "awsui_trigger-item_sne0l_jrij7_161",
-  "trigger-button": "awsui_trigger-button_sne0l_jrij7_164",
-  "visual-refresh": "awsui_visual-refresh_sne0l_jrij7_176",
-  "split-trigger": "awsui_split-trigger_sne0l_jrij7_158",
-  "dropdown-trigger": "awsui_dropdown-trigger_sne0l_jrij7_184",
-  "test-utils-button-trigger": "awsui_test-utils-button-trigger_sne0l_jrij7_188"
+  "button-dropdown": "awsui_button-dropdown_sne0l_59w95_93",
+  "items-list-container": "awsui_items-list-container_sne0l_59w95_97",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_sne0l_59w95_1",
+  "rotate-up": "awsui_rotate-up_sne0l_59w95_116",
+  "rotate-down": "awsui_rotate-down_sne0l_59w95_131",
+  "header": "awsui_header_sne0l_59w95_146",
+  "title": "awsui_title_sne0l_59w95_157",
+  "description": "awsui_description_sne0l_59w95_158",
+  "split-trigger-wrapper": "awsui_split-trigger-wrapper_sne0l_59w95_162",
+  "trigger-item": "awsui_trigger-item_sne0l_59w95_165",
+  "trigger-button": "awsui_trigger-button_sne0l_59w95_168",
+  "visual-refresh": "awsui_visual-refresh_sne0l_59w95_179",
+  "split-trigger": "awsui_split-trigger_sne0l_59w95_162",
+  "dropdown-trigger": "awsui_dropdown-trigger_sne0l_59w95_187",
+  "test-utils-button-trigger": "awsui_test-utils-button-trigger_sne0l_59w95_191"
 };
   

package/lib/internal/template/calendar/grid/index.d.ts

@@ -10,10 +10,10 @@ import { DatePickerProps } from '../../date-picker/interfaces';
  * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;
  * - (table navigation) Safari+VO - "dimmed" state is announced twice;
  * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;
- * - (keyboard navigation) Firefox+NVDA - every day is announced as "not selected";
+ * - (keyboard navigation) Firefox+NVDA - every date is announced as "not selected";
  * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;
- * - (keyboard navigation) Safari/Chrome+VO - days are not announced as interactive (clickable or selectable);
- * - (keyboard navigation) Safari/Chrome+VO - day announcements are not interruptive and can be missed if navigating fast.
+ * - (keyboard navigation) Safari/Chrome+VO - dates are not announced as interactive (clickable or selectable);
+ * - (keyboard navigation) Safari/Chrome+VO - date announcements are not interruptive and can be missed if navigating fast.
  */
 export interface GridProps {
     locale: string;

package/lib/internal/template/calendar/grid/index.js

@@ -51,7 +51,7 @@ export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, foc
         onFocusDate(updatedFocusDate);
     };
     // The focused date changes as a feedback to keyboard navigation in the grid.
-    // Once changed, the corresponding day button needs to receive the actual focus.
+    // Once changed, the corresponding date button needs to receive the actual focus.
     useEffectOnUpdate(() => {
         if (focusedDate && focusedDateRef.current) {
             focusedDateRef.current.focus();
@@ -61,10 +61,10 @@ export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, foc
     const weekdays = weeks[0].map(date => date.getDay());
     return (React.createElement("table", { role: "grid", className: styles['calendar-grid'], "aria-labelledby": ariaLabelledby },
         React.createElement("thead", null,
-            React.createElement("tr", null, weekdays.map(dayIndex => (React.createElement("th", { key: dayIndex, scope: "col", className: clsx(styles['calendar-grid-cell'], styles['calendar-day-header']) },
+            React.createElement("tr", null, weekdays.map(dayIndex => (React.createElement("th", { key: dayIndex, scope: "col", className: clsx(styles['calendar-grid-cell'], styles['calendar-date-header']) },
                 React.createElement("span", { "aria-hidden": "true" }, renderDayName(locale, dayIndex, 'short')),
                 React.createElement(ScreenreaderOnly, null, renderDayName(locale, dayIndex, 'long'))))))),
-        React.createElement("tbody", { onKeyDown: onGridKeyDownHandler }, weeks.map((week, weekIndex) => (React.createElement("tr", { key: weekIndex, className: styles['calendar-week'] }, week.map((date, dateIndex) => {
+        React.createElement("tbody", { onKeyDown: onGridKeyDownHandler }, weeks.map((week, weekIndex) => (React.createElement("tr", { key: weekIndex, className: styles['calendar-row'] }, week.map((date, dateIndex) => {
             const isFocusable = !!focusableDate && isSameDay(date, focusableDate);
             const isSelected = !!selectedDate && isSameDay(date, selectedDate);
             const isEnabled = !isDateEnabled || isDateEnabled(date);
@@ -79,20 +79,20 @@ export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, foc
                 // Can be focused programmatically.
                 tabIndex = -1;
             }
-            // Screen-reader announcement for the focused day.
+            // Screen-reader announcement for the focused date.
             let dayAnnouncement = getDateLabel(locale, date, 'short');
-            if (isDateOnSameDay) {
+            if (isDateOnSameDay && todayAriaLabel) {
                 dayAnnouncement += '. ' + todayAriaLabel;
             }
             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, 
                 // Do not attach click event when the date is disabled, otherwise VO+safari announces clickable
-                onClick: isEnabled ? () => onSelectDate(date) : undefined, className: clsx(styles['calendar-grid-cell'], styles['calendar-day'], {
-                    [styles['calendar-day-current-month']]: isSameMonth(date, baseDate),
-                    [styles['calendar-day-enabled']]: isEnabled,
-                    [styles['calendar-day-selected']]: isSelected,
-                    [styles['calendar-day-today']]: isDateOnSameDay,
+                onClick: isEnabled ? () => onSelectDate(date) : undefined, className: clsx(styles['calendar-grid-cell'], styles['calendar-date'], {
+                    [styles['calendar-date-current-page']]: isSameMonth(date, baseDate),
+                    [styles['calendar-date-enabled']]: isEnabled,
+                    [styles['calendar-date-selected']]: isSelected,
+                    [styles['calendar-date-current']]: isDateOnSameDay,
                 }) },
-                React.createElement("span", { className: styles['day-inner'], "aria-hidden": "true" }, date.getDate()),
+                React.createElement("span", { className: styles['date-inner'], "aria-hidden": "true" }, date.getDate()),
                 React.createElement(ScreenreaderOnly, null, dayAnnouncement)));
         })))))));
 }

package/lib/internal/template/calendar/grid/index.js.map

@@ -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"]}
+{"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"]}

package/lib/internal/template/calendar/header/header-button.js

@@ -5,9 +5,9 @@ import { InternalButton } from '../../button/internal';
 import styles from '../styles.css.js';
 import { addMonths } from 'date-fns';
 export function PrevMonthButton({ ariaLabel, baseDate, onChangeMonth }) {
-    return (React.createElement(InternalButton, { iconName: "angle-left", ariaLabel: ariaLabel, variant: "icon", onClick: () => onChangeMonth(addMonths(baseDate, -1)), formAction: "none", className: styles['calendar-prev-month-btn'] }));
+    return (React.createElement(InternalButton, { iconName: "angle-left", ariaLabel: ariaLabel, variant: "icon", onClick: () => onChangeMonth(addMonths(baseDate, -1)), formAction: "none", className: styles['calendar-prev-btn'] }));
 }
 export function NextMonthButton({ ariaLabel, baseDate, onChangeMonth }) {
-    return (React.createElement(InternalButton, { iconName: "angle-right", ariaLabel: ariaLabel, variant: "icon", onClick: () => onChangeMonth(addMonths(baseDate, 1)), formAction: "none", className: styles['calendar-next-month-btn'] }));
+    return (React.createElement(InternalButton, { iconName: "angle-right", ariaLabel: ariaLabel, variant: "icon", onClick: () => onChangeMonth(addMonths(baseDate, 1)), formAction: "none", className: styles['calendar-next-btn'] }));
 }
 //# sourceMappingURL=header-button.js.map

package/lib/internal/template/calendar/header/header-button.js.map

@@ -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,yBAAyB,CAAC,GAC5C,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,yBAAyB,CAAC,GAC5C,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-month-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-month-btn']}\n    />\n  );\n}\n"]}
+{"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/lib/internal/template/calendar/styles.css.js

@@ -1,23 +1,23 @@
 
     import './styles.scoped.css';
     export default {
-  "calendar": "awsui_calendar_1ykar_uooqo_93",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_uooqo_1",
-  "root": "awsui_root_1ykar_uooqo_124",
-  "calendar-inner": "awsui_calendar-inner_1ykar_uooqo_165",
-  "calendar-header": "awsui_calendar-header_1ykar_uooqo_168",
-  "calendar-header-month": "awsui_calendar-header-month_1ykar_uooqo_173",
-  "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_uooqo_180",
-  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_uooqo_183",
-  "calendar-grid": "awsui_calendar-grid_1ykar_uooqo_186",
-  "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_uooqo_190",
-  "calendar-day-header": "awsui_calendar-day-header_1ykar_uooqo_196",
-  "calendar-day": "awsui_calendar-day_1ykar_uooqo_196",
-  "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_uooqo_213",
-  "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_uooqo_220",
-  "calendar-day-selected": "awsui_calendar-day-selected_1ykar_uooqo_227",
-  "calendar-day-today": "awsui_calendar-day-today_1ykar_uooqo_230",
-  "day-inner": "awsui_day-inner_1ykar_uooqo_245",
-  "calendar-week": "awsui_calendar-week_1ykar_uooqo_316"
+  "calendar": "awsui_calendar_1ykar_641py_93",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_641py_1",
+  "root": "awsui_root_1ykar_641py_124",
+  "calendar-inner": "awsui_calendar-inner_1ykar_641py_165",
+  "calendar-header": "awsui_calendar-header_1ykar_641py_169",
+  "calendar-header-month": "awsui_calendar-header-month_1ykar_641py_174",
+  "calendar-next-btn": "awsui_calendar-next-btn_1ykar_641py_182",
+  "calendar-prev-btn": "awsui_calendar-prev-btn_1ykar_641py_185",
+  "calendar-grid": "awsui_calendar-grid_1ykar_641py_188",
+  "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_641py_192",
+  "calendar-date-header": "awsui_calendar-date-header_1ykar_641py_198",
+  "calendar-date": "awsui_calendar-date_1ykar_641py_198",
+  "calendar-date-enabled": "awsui_calendar-date-enabled_1ykar_641py_218",
+  "calendar-date-current-page": "awsui_calendar-date-current-page_1ykar_641py_228",
+  "calendar-date-selected": "awsui_calendar-date-selected_1ykar_641py_235",
+  "calendar-date-current": "awsui_calendar-date-current_1ykar_641py_228",
+  "date-inner": "awsui_date-inner_1ykar_641py_257",
+  "calendar-row": "awsui_calendar-row_1ykar_641py_332"
 };