npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.890 → 3.0.892 - Mend

@cloudscape-design/components-themeable 3.0.890 → 3.0.892

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.

Files changed (62) hide show

package/lib/internal/template/date-range-picker/calendar/grids/monthly-grid.js CHANGED Viewed

@@ -2,50 +2,53 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useMemo } from 'react';
 import clsx from 'clsx';
-import { addDays, addWeeks, getDaysInMonth, isAfter, isBefore, isLastDayOfMonth, isSameDay, isSameMonth, isToday, } from 'date-fns';
-import { getCalendarMonth } from 'mnth';
+import { isAfter, isBefore, isLastDayOfMonth, isSameDay, isSameMonth, isToday } from 'date-fns';
 import { getDateLabel, renderDayName } from '../../../calendar/utils/intl';
 import ScreenreaderOnly from '../../../internal/components/screenreader-only/index.js';
 import { formatDate } from '../../../internal/utils/date-time';
+import { MonthCalendar } from '../../../internal/utils/date-time/calendar';
 import { GridCell } from './grid-cell';
+import testStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
-export function MonthlyGrid({ baseDate, selectedStartDate, selectedEndDate, rangeStartDate, rangeEndDate, focusedDate, focusedDateRef, onSelectDate, onGridKeyDownHandler, onFocusedDateChange, isDateEnabled, dateDisabledReason, locale, startOfWeek, todayAriaLabel, ariaLabelledby, className, }) {
-    const baseDateTime = baseDate === null || baseDate === void 0 ? void 0 : baseDate.getTime();
+export function MonthlyGrid({ padDates, baseDate, selectedStartDate, selectedEndDate, rangeStartDate, rangeEndDate, focusedDate, focusedDateRef, onSelectDate, onGridKeyDownHandler, onFocusedDateChange, isDateEnabled, dateDisabledReason, locale, startOfWeek, todayAriaLabel, ariaLabelledby, className, }) {
     // `baseDateTime` is used as a more stable replacement for baseDate
-    const weeks = useMemo(() => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),
+    const baseDateTime = baseDate === null || baseDate === void 0 ? void 0 : baseDate.getTime();
+    const calendar = useMemo(() => {
+        const startDate = rangeStartDate !== null && rangeStartDate !== void 0 ? rangeStartDate : rangeEndDate;
+        const endDate = rangeEndDate !== null && rangeEndDate !== void 0 ? rangeEndDate : rangeStartDate;
+        const selection = startDate && endDate ? [startDate, endDate] : null;
+        return new MonthCalendar({ padDates, startOfWeek, baseDate, selection });
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [baseDateTime, startOfWeek]);
-    const weekdays = weeks[0].map(date => date.getDay());
+    [padDates, startOfWeek, baseDateTime, rangeStartDate, rangeEndDate]);
     return (React.createElement("table", { role: "grid", "aria-labelledby": ariaLabelledby, className: clsx(styles.grid, className) },
         React.createElement("thead", null,
-            React.createElement("tr", null, weekdays.map(dayIndex => (React.createElement("th", { key: dayIndex, scope: "col", className: clsx(styles['grid-cell'], styles['day-header']) },
+            React.createElement("tr", null, calendar.weekdays.map(dayIndex => (React.createElement("th", { key: dayIndex, scope: "col", className: clsx(styles['grid-cell'], styles['day-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) => {
-            return (React.createElement("tr", { key: weekIndex, className: styles.week }, week.map((date, dateIndex) => {
+        React.createElement("tbody", { onKeyDown: onGridKeyDownHandler }, calendar.weeks.map(({ days, testIndex }, weekIndex) => {
+            const isWeekBelongsToMonth = days.some(({ date }) => isSameMonth(date, baseDate));
+            return (React.createElement("tr", { key: weekIndex, className: clsx(styles.week, isWeekBelongsToMonth && testStyles['calendar-week']), "data-awsui-weekindex": testIndex }, days.map(({ date, isVisible, isInRange, isSelectionTop, isSelectionBottom, isSelectionLeft, isSelectionRight }, dateIndex) => {
                 const isStartDate = !!selectedStartDate && isSameDay(date, selectedStartDate);
                 const isEndDate = !!selectedEndDate && isSameDay(date, selectedEndDate);
                 const isSelected = isStartDate || isEndDate;
-                const isRangeStartDate = !!rangeStartDate && isSameDay(date, rangeStartDate);
-                const isRangeEndDate = !!rangeEndDate && isSameDay(date, rangeEndDate);
-                const isFocused = !!focusedDate && isSameDay(date, focusedDate) && isSameMonth(date, baseDate);
-                const dateIsInRange = isStartDate || isEndDate || isInRange(date, rangeStartDate, rangeEndDate);
-                const inRangeStartWeek = rangeStartDate && isInRange(date, rangeStartDate, addDays(addWeeks(rangeStartDate, 1), -1));
-                const inRangeEndWeek = rangeEndDate && isInRange(date, rangeEndDate, addDays(addWeeks(rangeEndDate, -1), 1));
+                const isFocused = !!focusedDate && isSameDay(date, focusedDate);
                 const onlyOneSelected = !!rangeStartDate && !!rangeEndDate
                     ? isSameDay(rangeStartDate, rangeEndDate)
                     : !selectedStartDate || !selectedEndDate;
-                const isEnabled = !isDateEnabled || isDateEnabled(date);
+                const isDateBelongsToMonth = isSameMonth(date, baseDate);
+                const isEnabled = (!isDateEnabled || isDateEnabled(date)) && isDateBelongsToMonth;
                 const disabledReason = dateDisabledReason(date);
                 const isDisabledWithReason = !isEnabled && !!disabledReason;
                 const isFocusable = isFocused && (isEnabled || isDisabledWithReason);
                 const baseClasses = {
                     [styles.day]: true,
+                    [testStyles['calendar-date']]: isDateBelongsToMonth,
                     [styles['grid-cell']]: true,
                     [styles['in-first-row']]: weekIndex === 0,
                     [styles['in-first-column']]: dateIndex === 0,
                 };
-                if (!isSameMonth(date, baseDate)) {
+                if (!isVisible) {
                     return (React.createElement("td", { key: `${weekIndex}:${dateIndex}`, ref: isFocused ? focusedDateRef : undefined, className: clsx(baseClasses, {
                             [styles['in-previous-month']]: isBefore(date, baseDate),
                             [styles['last-day-of-month']]: isLastDayOfMonth(date),
@@ -73,31 +76,22 @@ export function MonthlyGrid({ baseDate, selectedStartDate, selectedEndDate, rang
                     dayAnnouncement += '. ' + todayAriaLabel;
                 }
                 return (React.createElement(GridCell, Object.assign({ ref: isFocused ? focusedDateRef : undefined, key: `${weekIndex}:${dateIndex}`, className: clsx(baseClasses, {
-                        [styles['in-current-month']]: isSameMonth(date, baseDate),
+                        [styles['in-visible-calendar']]: true,
                         [styles.enabled]: isEnabled,
                         [styles.selected]: isSelected,
                         [styles['start-date']]: isStartDate,
                         [styles['end-date']]: isEndDate,
-                        [styles['range-start-date']]: isRangeStartDate,
-                        [styles['range-end-date']]: isRangeEndDate,
                         [styles['no-range']]: isSelected && onlyOneSelected,
-                        [styles['in-range']]: dateIsInRange,
-                        [styles['in-range-border-block-start']]: !!inRangeStartWeek || date.getDate() <= 7,
-                        [styles['in-range-border-block-end']]: !!inRangeEndWeek || date.getDate() > getDaysInMonth(date) - 7,
-                        [styles['in-range-border-inline-start']]: dateIndex === 0 || date.getDate() === 1 || isRangeStartDate,
-                        [styles['in-range-border-inline-end']]: dateIndex === week.length - 1 || isLastDayOfMonth(date) || isRangeEndDate,
+                        [styles['in-range']]: isInRange,
+                        [styles['in-range-border-block-start']]: isSelectionTop,
+                        [styles['in-range-border-block-end']]: isSelectionBottom,
+                        [styles['in-range-border-inline-start']]: isSelectionLeft,
+                        [styles['in-range-border-inline-end']]: isSelectionRight,
                         [styles.today]: isToday(date),
-                    }), "aria-selected": isEnabled ? isSelected || dateIsInRange : undefined, "aria-current": isToday(date) ? 'date' : undefined, "data-date": formatDate(date), "aria-disabled": !isEnabled, tabIndex: tabIndex, disabledReason: isDisabledWithReason ? disabledReason : undefined }, handlers),
+                    }), "aria-selected": isEnabled ? isSelected || isInRange : undefined, "aria-current": isToday(date) ? 'date' : undefined, "data-date": formatDate(date), "aria-disabled": !isEnabled, tabIndex: tabIndex, disabledReason: isDisabledWithReason ? disabledReason : undefined }, handlers),
                     React.createElement("span", { className: styles['day-inner'], "aria-hidden": "true" }, date.getDate()),
                     React.createElement(ScreenreaderOnly, null, dayAnnouncement)));
             })));
         }))));
 }
-function isInRange(date, dateOne, dateTwo) {
-    if (!dateOne || !dateTwo || isSameDay(dateOne, dateTwo)) {
-        return false;
-    }
-    const inRange = (isAfter(date, dateOne) && isBefore(date, dateTwo)) || (isAfter(date, dateTwo) && isBefore(date, dateOne));
-    return inRange || isSameDay(date, dateOne) || isSameDay(date, dateTwo);
-}
 //# sourceMappingURL=monthly-grid.js.map

package/lib/internal/template/date-range-picker/calendar/grids/monthly-grid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"monthly-grid.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/monthly-grid.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 } from 'react';\nimport clsx from 'clsx';\nimport {\n addDays,\n addWeeks,\n getDaysInMonth,\n isAfter,\n isBefore,\n isLastDayOfMonth,\n isSameDay,\n isSameMonth,\n isToday,\n} from 'date-fns';\nimport { getCalendarMonth } from 'mnth';\n\nimport { getDateLabel, renderDayName } from '../../../calendar/utils/intl';\nimport ScreenreaderOnly from '../../../internal/components/screenreader-only/index.js';\nimport { formatDate } from '../../../internal/utils/date-time';\nimport { DateRangePickerProps, DayIndex } from '../../interfaces';\nimport { GridCell } from './grid-cell';\n\nimport styles from './styles.css.js';\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\ninterface GridProps {\n baseDate: Date;\n selectedStartDate: Date \| null;\n selectedEndDate: Date \| null;\n\n rangeStartDate: Date \| null;\n rangeEndDate: Date \| null;\n\n focusedDate: Date \| null;\n focusedDateRef: React.RefObject<HTMLTableCellElement>;\n\n onSelectDate: (date: Date) => void;\n onGridKeyDownHandler: (e: React.KeyboardEvent<HTMLElement>) => void;\n onFocusedDateChange: React.Dispatch<React.SetStateAction<Date \| null>>;\n\n isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;\n dateDisabledReason: DateRangePickerProps.DateDisabledReasonFunction;\n\n locale: string;\n startOfWeek: DayIndex;\n todayAriaLabel?: string;\n ariaLabelledby: string;\n\n className?: string;\n}\n\nexport function MonthlyGrid({\n baseDate,\n selectedStartDate,\n selectedEndDate,\n rangeStartDate,\n rangeEndDate,\n focusedDate,\n\n focusedDateRef,\n\n onSelectDate,\n onGridKeyDownHandler,\n onFocusedDateChange,\n\n isDateEnabled,\n dateDisabledReason,\n\n locale,\n startOfWeek,\n todayAriaLabel,\n ariaLabelledby,\n\n className,\n}: GridProps) {\n const baseDateTime = baseDate?.getTime();\n // `baseDateTime` is used as a more stable replacement for baseDate\n const weeks = useMemo<Date[][]>(\n () => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [baseDateTime, startOfWeek]\n );\n const weekdays = weeks[0].map(date => date.getDay());\n\n return (\n <table role=\"grid\" aria-labelledby={ariaLabelledby} className={clsx(styles.grid, className)}>\n <thead>\n <tr>\n {weekdays.map(dayIndex => (\n <th key={dayIndex} scope=\"col\" className={clsx(styles['grid-cell'], styles['day-header'])}>\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 return (\n <tr key={weekIndex} className={styles.week}>\n {week.map((date, dateIndex) => {\n const isStartDate = !!selectedStartDate && isSameDay(date, selectedStartDate);\n const isEndDate = !!selectedEndDate && isSameDay(date, selectedEndDate);\n const isSelected = isStartDate \|\| isEndDate;\n const isRangeStartDate = !!rangeStartDate && isSameDay(date, rangeStartDate);\n const isRangeEndDate = !!rangeEndDate && isSameDay(date, rangeEndDate);\n\n const isFocused = !!focusedDate && isSameDay(date, focusedDate) && isSameMonth(date, baseDate);\n\n const dateIsInRange = isStartDate \|\| isEndDate \|\| isInRange(date, rangeStartDate, rangeEndDate);\n const inRangeStartWeek =\n rangeStartDate && isInRange(date, rangeStartDate, addDays(addWeeks(rangeStartDate, 1), -1));\n const inRangeEndWeek =\n rangeEndDate && isInRange(date, rangeEndDate, addDays(addWeeks(rangeEndDate, -1), 1));\n const onlyOneSelected =\n !!rangeStartDate && !!rangeEndDate\n ? isSameDay(rangeStartDate, rangeEndDate)\n : !selectedStartDate \|\| !selectedEndDate;\n\n const isEnabled = !isDateEnabled \|\| isDateEnabled(date);\n const disabledReason = dateDisabledReason(date);\n const isDisabledWithReason = !isEnabled && !!disabledReason;\n const isFocusable = isFocused && (isEnabled \|\| isDisabledWithReason);\n\n const baseClasses = {\n [styles.day]: true,\n [styles['grid-cell']]: true,\n [styles['in-first-row']]: weekIndex === 0,\n [styles['in-first-column']]: dateIndex === 0,\n };\n\n if (!isSameMonth(date, baseDate)) {\n return (\n <td\n key={`${weekIndex}:${dateIndex}`}\n ref={isFocused ? focusedDateRef : undefined}\n className={clsx(baseClasses, {\n [styles['in-previous-month']]: isBefore(date, baseDate),\n [styles['last-day-of-month']]: isLastDayOfMonth(date),\n [styles['in-next-month']]: isAfter(date, baseDate),\n })}\n ></td>\n );\n }\n\n const handlers: React.HTMLAttributes<HTMLDivElement> = {};\n if (isEnabled) {\n handlers.onClick = () => onSelectDate(date);\n handlers.onFocus = () => onFocusedDateChange(date);\n }\n\n // Can't be focused.\n let tabIndex = undefined;\n if (isFocusable && (isEnabled \|\| isDisabledWithReason)) {\n // Next focus target.\n tabIndex = 0;\n } else if (isEnabled \|\| isDisabledWithReason) {\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 (isToday(date)) {\n dayAnnouncement += '. ' + todayAriaLabel;\n }\n\n return (\n <GridCell\n ref={isFocused ? focusedDateRef : undefined}\n key={`${weekIndex}:${dateIndex}`}\n className={clsx(baseClasses, {\n [styles['in-current-month']]: isSameMonth(date, baseDate),\n [styles.enabled]: isEnabled,\n [styles.selected]: isSelected,\n [styles['start-date']]: isStartDate,\n [styles['end-date']]: isEndDate,\n [styles['range-start-date']]: isRangeStartDate,\n [styles['range-end-date']]: isRangeEndDate,\n [styles['no-range']]: isSelected && onlyOneSelected,\n [styles['in-range']]: dateIsInRange,\n [styles['in-range-border-block-start']]: !!inRangeStartWeek \|\| date.getDate() <= 7,\n [styles['in-range-border-block-end']]:\n !!inRangeEndWeek \|\| date.getDate() > getDaysInMonth(date) - 7,\n [styles['in-range-border-inline-start']]:\n dateIndex === 0 \|\| date.getDate() === 1 \|\| isRangeStartDate,\n [styles['in-range-border-inline-end']]:\n dateIndex === week.length - 1 \|\| isLastDayOfMonth(date) \|\| isRangeEndDate,\n [styles.today]: isToday(date),\n })}\n aria-selected={isEnabled ? isSelected \|\| dateIsInRange : undefined}\n aria-current={isToday(date) ? 'date' : undefined}\n data-date={formatDate(date)}\n aria-disabled={!isEnabled}\n tabIndex={tabIndex}\n disabledReason={isDisabledWithReason ? disabledReason : undefined}\n {...handlers}\n >\n <span className={styles['day-inner']} aria-hidden=\"true\">\n {date.getDate()}\n </span>\n <ScreenreaderOnly>{dayAnnouncement}</ScreenreaderOnly>\n </GridCell>\n );\n })}\n </tr>\n );\n })}\n </tbody>\n </table>\n );\n}\n\nfunction isInRange(date: Date, dateOne: Date \| null, dateTwo: Date \| null) {\n if (!dateOne \|\| !dateTwo \|\| isSameDay(dateOne, dateTwo)) {\n return false;\n }\n\n const inRange =\n (isAfter(date, dateOne) && isBefore(date, dateTwo)) \|\| (isAfter(date, dateTwo) && isBefore(date, dateOne));\n\n return inRange \|\| isSameDay(date, dateOne) \|\| isSameDay(date, dateTwo);\n}\n"]}
1	+ {"version":3,"file":"monthly-grid.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/monthly-grid.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 } from 'react';\nimport clsx from 'clsx';\nimport { isAfter, isBefore, isLastDayOfMonth, isSameDay, isSameMonth, isToday } from 'date-fns';\n\nimport { getDateLabel, renderDayName } from '../../../calendar/utils/intl';\nimport ScreenreaderOnly from '../../../internal/components/screenreader-only/index.js';\nimport { formatDate } from '../../../internal/utils/date-time';\nimport { MonthCalendar } from '../../../internal/utils/date-time/calendar';\nimport { DateRangePickerProps, DayIndex } from '../../interfaces';\nimport { GridCell } from './grid-cell';\n\nimport testStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\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\ninterface GridProps {\n padDates: 'before' \| 'after';\n baseDate: Date;\n selectedStartDate: Date \| null;\n selectedEndDate: Date \| null;\n\n rangeStartDate: Date \| null;\n rangeEndDate: Date \| null;\n\n focusedDate: Date \| null;\n focusedDateRef: React.RefObject<HTMLTableCellElement>;\n\n onSelectDate: (date: Date) => void;\n onGridKeyDownHandler: (e: React.KeyboardEvent<HTMLElement>) => void;\n onFocusedDateChange: React.Dispatch<React.SetStateAction<Date \| null>>;\n\n isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;\n dateDisabledReason: DateRangePickerProps.DateDisabledReasonFunction;\n\n locale: string;\n startOfWeek: DayIndex;\n todayAriaLabel?: string;\n ariaLabelledby: string;\n\n className?: string;\n}\n\nexport function MonthlyGrid({\n padDates,\n baseDate,\n selectedStartDate,\n selectedEndDate,\n rangeStartDate,\n rangeEndDate,\n focusedDate,\n\n focusedDateRef,\n\n onSelectDate,\n onGridKeyDownHandler,\n onFocusedDateChange,\n\n isDateEnabled,\n dateDisabledReason,\n\n locale,\n startOfWeek,\n todayAriaLabel,\n ariaLabelledby,\n\n className,\n}: GridProps) {\n // `baseDateTime` is used as a more stable replacement for baseDate\n const baseDateTime = baseDate?.getTime();\n const calendar = useMemo(\n () => {\n const startDate = rangeStartDate ?? rangeEndDate;\n const endDate = rangeEndDate ?? rangeStartDate;\n const selection = startDate && endDate ? ([startDate, endDate] as [Date, Date]) : null;\n return new MonthCalendar({ padDates, startOfWeek, baseDate, selection });\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [padDates, startOfWeek, baseDateTime, rangeStartDate, rangeEndDate]\n );\n return (\n <table role=\"grid\" aria-labelledby={ariaLabelledby} className={clsx(styles.grid, className)}>\n <thead>\n <tr>\n {calendar.weekdays.map(dayIndex => (\n <th key={dayIndex} scope=\"col\" className={clsx(styles['grid-cell'], styles['day-header'])}>\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 {calendar.weeks.map(({ days, testIndex }, weekIndex) => {\n const isWeekBelongsToMonth = days.some(({ date }) => isSameMonth(date, baseDate));\n return (\n <tr\n key={weekIndex}\n className={clsx(styles.week, isWeekBelongsToMonth && testStyles['calendar-week'])}\n data-awsui-weekindex={testIndex}\n >\n {days.map(\n (\n { date, isVisible, isInRange, isSelectionTop, isSelectionBottom, isSelectionLeft, isSelectionRight },\n dateIndex\n ) => {\n const isStartDate = !!selectedStartDate && isSameDay(date, selectedStartDate);\n const isEndDate = !!selectedEndDate && isSameDay(date, selectedEndDate);\n const isSelected = isStartDate \|\| isEndDate;\n const isFocused = !!focusedDate && isSameDay(date, focusedDate);\n const onlyOneSelected =\n !!rangeStartDate && !!rangeEndDate\n ? isSameDay(rangeStartDate, rangeEndDate)\n : !selectedStartDate \|\| !selectedEndDate;\n\n const isDateBelongsToMonth = isSameMonth(date, baseDate);\n const isEnabled = (!isDateEnabled \|\| isDateEnabled(date)) && isDateBelongsToMonth;\n const disabledReason = dateDisabledReason(date);\n const isDisabledWithReason = !isEnabled && !!disabledReason;\n const isFocusable = isFocused && (isEnabled \|\| isDisabledWithReason);\n\n const baseClasses = {\n [styles.day]: true,\n [testStyles['calendar-date']]: isDateBelongsToMonth,\n [styles['grid-cell']]: true,\n [styles['in-first-row']]: weekIndex === 0,\n [styles['in-first-column']]: dateIndex === 0,\n };\n\n if (!isVisible) {\n return (\n <td\n key={`${weekIndex}:${dateIndex}`}\n ref={isFocused ? focusedDateRef : undefined}\n className={clsx(baseClasses, {\n [styles['in-previous-month']]: isBefore(date, baseDate),\n [styles['last-day-of-month']]: isLastDayOfMonth(date),\n [styles['in-next-month']]: isAfter(date, baseDate),\n })}\n ></td>\n );\n }\n\n const handlers: React.HTMLAttributes<HTMLDivElement> = {};\n if (isEnabled) {\n handlers.onClick = () => onSelectDate(date);\n handlers.onFocus = () => onFocusedDateChange(date);\n }\n\n // Can't be focused.\n let tabIndex = undefined;\n if (isFocusable && (isEnabled \|\| isDisabledWithReason)) {\n // Next focus target.\n tabIndex = 0;\n } else if (isEnabled \|\| isDisabledWithReason) {\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 (isToday(date)) {\n dayAnnouncement += '. ' + todayAriaLabel;\n }\n\n return (\n <GridCell\n ref={isFocused ? focusedDateRef : undefined}\n key={`${weekIndex}:${dateIndex}`}\n className={clsx(baseClasses, {\n [styles['in-visible-calendar']]: true,\n [styles.enabled]: isEnabled,\n [styles.selected]: isSelected,\n [styles['start-date']]: isStartDate,\n [styles['end-date']]: isEndDate,\n [styles['no-range']]: isSelected && onlyOneSelected,\n [styles['in-range']]: isInRange,\n [styles['in-range-border-block-start']]: isSelectionTop,\n [styles['in-range-border-block-end']]: isSelectionBottom,\n [styles['in-range-border-inline-start']]: isSelectionLeft,\n [styles['in-range-border-inline-end']]: isSelectionRight,\n [styles.today]: isToday(date),\n })}\n aria-selected={isEnabled ? isSelected \|\| isInRange : undefined}\n aria-current={isToday(date) ? 'date' : undefined}\n data-date={formatDate(date)}\n aria-disabled={!isEnabled}\n tabIndex={tabIndex}\n disabledReason={isDisabledWithReason ? disabledReason : undefined}\n {...handlers}\n >\n <span className={styles['day-inner']} aria-hidden=\"true\">\n {date.getDate()}\n </span>\n <ScreenreaderOnly>{dayAnnouncement}</ScreenreaderOnly>\n </GridCell>\n );\n }\n )}\n </tr>\n );\n })}\n </tbody>\n </table>\n );\n}\n"]}

package/lib/internal/template/date-range-picker/calendar/grids/styles.css.js CHANGED Viewed

@@ -1,33 +1,29 @@
     import './styles.scoped.css';
     export default {
-  "grid": "awsui_grid_1mfbn_1agc5_149",
-  "grid-cell": "awsui_grid-cell_1mfbn_1agc5_154",
-  "day-header": "awsui_day-header_1mfbn_1agc5_161",
-  "week": "awsui_week_1mfbn_1agc5_171",
-  "day": "awsui_day_1mfbn_1agc5_161",
-  "day-inner": "awsui_day-inner_1mfbn_1agc5_218",
-  "in-first-row": "awsui_in-first-row_1mfbn_1agc5_223",
-  "in-previous-month": "awsui_in-previous-month_1mfbn_1agc5_223",
-  "last-day-of-month": "awsui_last-day-of-month_1mfbn_1agc5_227",
-  "in-next-month": "awsui_in-next-month_1mfbn_1agc5_231",
-  "in-first-column": "awsui_in-first-column_1mfbn_1agc5_235",
-  "in-current-month": "awsui_in-current-month_1mfbn_1agc5_238",
-  "enabled": "awsui_enabled_1mfbn_1agc5_242",
-  "in-range": "awsui_in-range_1mfbn_1agc5_248",
-  "end-date": "awsui_end-date_1mfbn_1agc5_248",
-  "start-date": "awsui_start-date_1mfbn_1agc5_248",
-  "no-range": "awsui_no-range_1mfbn_1agc5_248",
-  "selected": "awsui_selected_1mfbn_1agc5_258",
-  "today": "awsui_today_1mfbn_1agc5_263",
-  "range-start-date": "awsui_range-start-date_1mfbn_1agc5_308",
-  "in-range-border-bottom": "awsui_in-range-border-bottom_1mfbn_1agc5_311",
-  "range-end-date": "awsui_range-end-date_1mfbn_1agc5_314",
-  "in-range-border-top": "awsui_in-range-border-top_1mfbn_1agc5_317",
-  "in-range-border-block-start": "awsui_in-range-border-block-start_1mfbn_1agc5_330",
-  "in-range-border-inline-end": "awsui_in-range-border-inline-end_1mfbn_1agc5_333",
-  "in-range-border-block-end": "awsui_in-range-border-block-end_1mfbn_1agc5_336",
-  "in-range-border-inline-start": "awsui_in-range-border-inline-start_1mfbn_1agc5_339",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_1mfbn_1agc5_355"
+  "grid": "awsui_grid_1mfbn_1xshi_149",
+  "grid-cell": "awsui_grid-cell_1mfbn_1xshi_154",
+  "day-header": "awsui_day-header_1mfbn_1xshi_161",
+  "week": "awsui_week_1mfbn_1xshi_171",
+  "day": "awsui_day_1mfbn_1xshi_161",
+  "day-inner": "awsui_day-inner_1mfbn_1xshi_218",
+  "in-first-row": "awsui_in-first-row_1mfbn_1xshi_223",
+  "in-previous-month": "awsui_in-previous-month_1mfbn_1xshi_223",
+  "last-day-of-month": "awsui_last-day-of-month_1mfbn_1xshi_227",
+  "in-next-month": "awsui_in-next-month_1mfbn_1xshi_231",
+  "in-first-column": "awsui_in-first-column_1mfbn_1xshi_235",
+  "in-visible-calendar": "awsui_in-visible-calendar_1mfbn_1xshi_238",
+  "enabled": "awsui_enabled_1mfbn_1xshi_242",
+  "in-range": "awsui_in-range_1mfbn_1xshi_248",
+  "end-date": "awsui_end-date_1mfbn_1xshi_248",
+  "start-date": "awsui_start-date_1mfbn_1xshi_248",
+  "no-range": "awsui_no-range_1mfbn_1xshi_248",
+  "selected": "awsui_selected_1mfbn_1xshi_258",
+  "today": "awsui_today_1mfbn_1xshi_263",
+  "in-range-border-block-start": "awsui_in-range-border-block-start_1mfbn_1xshi_321",
+  "in-range-border-inline-end": "awsui_in-range-border-inline-end_1mfbn_1xshi_324",
+  "in-range-border-block-end": "awsui_in-range-border-block-end_1mfbn_1xshi_327",
+  "in-range-border-inline-start": "awsui_in-range-border-inline-start_1mfbn_1xshi_330",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_1mfbn_1xshi_346"
 };

package/lib/internal/template/date-range-picker/calendar/grids/styles.scoped.css CHANGED Viewed

@@ -146,19 +146,19 @@ 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_grid_1mfbn_1agc5_149:not(#\9) {
+.awsui_grid_1mfbn_1xshi_149:not(#\9) {
   inline-size: var(--size-calendar-grid-width-arud77, 234px);
   border-spacing: 0;
 }
-.awsui_grid-cell_1mfbn_1agc5_154:not(#\9) {
+.awsui_grid-cell_1mfbn_1xshi_154:not(#\9) {
   inline-size: 14.2857142857%;
   word-break: break-word;
   text-align: center;
   font-weight: unset;
 }
-.awsui_day-header_1mfbn_1agc5_161:not(#\9) {
+.awsui_day-header_1mfbn_1xshi_161:not(#\9) {
   padding-block-start: var(--space-s-vmutj3, 12px);
   padding-block-end: var(--space-xxs-y2432o, 4px);
   padding-inline: 0;
@@ -168,11 +168,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   letter-spacing: var(--letter-spacing-body-s-cbaxyl, normal);
 }
-.awsui_week_1mfbn_1agc5_171:not(#\9) {
+.awsui_week_1mfbn_1xshi_171:not(#\9) {
   /* used for identifying element */
 }
-.awsui_day_1mfbn_1agc5_161:not(#\9) {
+.awsui_day_1mfbn_1xshi_161:not(#\9) {
   border-block-end: 1px solid var(--color-border-calendar-grid-3f7bvh, #eaeded);
   border-inline-end: 1px solid var(--color-border-calendar-grid-3f7bvh, #eaeded);
   padding-block: var(--space-xxs-y2432o, 4px);
@@ -180,10 +180,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   color: var(--color-text-dropdown-item-disabled-gk1x2u, #aab7b8);
   position: relative;
 }
-.awsui_day_1mfbn_1agc5_161:not(#\9):focus {
+.awsui_day_1mfbn_1xshi_161:not(#\9):focus {
   outline: none;
 }
-.awsui_day_1mfbn_1agc5_161:not(#\9)::after {
+.awsui_day_1mfbn_1xshi_161:not(#\9)::after {
   content: "";
   position: absolute;
   z-index: 1;
@@ -193,15 +193,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline-end: calc(-1 * var(--border-item-width-bjacxs, 1px));
   background-color: transparent;
 }
-body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1agc5_161:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1xshi_161:not(#\9):focus {
   z-index: 2;
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1agc5_161:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1xshi_161:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-xwymmd, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1agc5_161:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1xshi_161:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -215,52 +215,52 @@ body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1agc5_161:not(#\9):focus::b
   border-end-end-radius: var(--border-radius-calendar-day-focus-ring-wmrhyj, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-q68bgg, #0073bb);
 }
-.awsui_day_1mfbn_1agc5_161 > .awsui_day-inner_1mfbn_1agc5_218:not(#\9) {
+.awsui_day_1mfbn_1xshi_161 > .awsui_day-inner_1mfbn_1xshi_218:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_in-first-row_1mfbn_1agc5_223:not(#\9):not(.awsui_in-previous-month_1mfbn_1agc5_223) {
+.awsui_in-first-row_1mfbn_1xshi_223:not(#\9):not(.awsui_in-previous-month_1mfbn_1xshi_223) {
   border-block-start: 1px solid var(--color-border-calendar-grid-3f7bvh, #eaeded);
 }
-.awsui_in-previous-month_1mfbn_1agc5_223:not(#\9):not(.awsui_last-day-of-month_1mfbn_1agc5_227) {
+.awsui_in-previous-month_1mfbn_1xshi_223:not(#\9):not(.awsui_last-day-of-month_1mfbn_1xshi_227) {
   border-inline-end-color: transparent;
 }
-.awsui_in-next-month_1mfbn_1agc5_231:not(#\9) {
+.awsui_in-next-month_1mfbn_1xshi_231:not(#\9) {
   border-color: transparent;
 }
-.awsui_in-first-column_1mfbn_1agc5_235:not(#\9) {
-  border-inline-start: 1px solid transparent;
+.awsui_in-first-column_1mfbn_1xshi_235:not(#\9) {
+  border-inline-start: 1px solid 1px solid var(--color-border-calendar-grid-3f7bvh, #eaeded);
 }
-.awsui_in-first-column_1mfbn_1agc5_235.awsui_in-current-month_1mfbn_1agc5_238:not(#\9) {
+.awsui_in-first-column_1mfbn_1xshi_235.awsui_in-visible-calendar_1mfbn_1xshi_238:not(#\9) {
   border-inline-start: 1px solid var(--color-border-calendar-grid-3f7bvh, #eaeded);
 }
-.awsui_enabled_1mfbn_1agc5_242:not(#\9) {
+.awsui_enabled_1mfbn_1xshi_242:not(#\9) {
   cursor: pointer;
 }
-.awsui_enabled_1mfbn_1agc5_242.awsui_in-current-month_1mfbn_1agc5_238:not(#\9) {
+.awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238:not(#\9) {
   color: var(--color-text-dropdown-item-default-o6jy8o, #16191f);
 }
-.awsui_enabled_1mfbn_1agc5_242.awsui_in-current-month_1mfbn_1agc5_238:not(#\9):not(.awsui_in-range_1mfbn_1agc5_248), .awsui_enabled_1mfbn_1agc5_242.awsui_in-current-month_1mfbn_1agc5_238:not(#\9):not(.awsui_in-range_1mfbn_1agc5_248)::after, .awsui_enabled_1mfbn_1agc5_242.awsui_in-current-month_1mfbn_1agc5_238.awsui_end-date_1mfbn_1agc5_248.awsui_start-date_1mfbn_1agc5_248:not(#\9), .awsui_enabled_1mfbn_1agc5_242.awsui_in-current-month_1mfbn_1agc5_238.awsui_end-date_1mfbn_1agc5_248.awsui_start-date_1mfbn_1agc5_248:not(#\9)::after, .awsui_enabled_1mfbn_1agc5_242.awsui_in-current-month_1mfbn_1agc5_238.awsui_no-range_1mfbn_1agc5_248:not(#\9), .awsui_enabled_1mfbn_1agc5_242.awsui_in-current-month_1mfbn_1agc5_238.awsui_no-range_1mfbn_1agc5_248:not(#\9)::after {
+.awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238:not(#\9):not(.awsui_in-range_1mfbn_1xshi_248), .awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238:not(#\9):not(.awsui_in-range_1mfbn_1xshi_248)::after, .awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238.awsui_end-date_1mfbn_1xshi_248.awsui_start-date_1mfbn_1xshi_248:not(#\9), .awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238.awsui_end-date_1mfbn_1xshi_248.awsui_start-date_1mfbn_1xshi_248:not(#\9)::after, .awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238.awsui_no-range_1mfbn_1xshi_248:not(#\9), .awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238.awsui_no-range_1mfbn_1xshi_248:not(#\9)::after {
   border-start-start-radius: var(--border-radius-item-q4wr0w, 0px);
   border-start-end-radius: var(--border-radius-item-q4wr0w, 0px);
   border-end-start-radius: var(--border-radius-item-q4wr0w, 0px);
   border-end-end-radius: var(--border-radius-item-q4wr0w, 0px);
 }
-.awsui_enabled_1mfbn_1agc5_242.awsui_in-current-month_1mfbn_1agc5_238:not(#\9):hover {
+.awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238:not(#\9):hover {
   color: var(--color-text-calendar-date-hover-tw9220, #16191f);
   background-color: var(--color-background-dropdown-item-hover-r5jqv1, #f2f3f3);
 }
-.awsui_enabled_1mfbn_1agc5_242.awsui_in-current-month_1mfbn_1agc5_238:not(#\9):hover:not(.awsui_selected_1mfbn_1agc5_258)::after {
+.awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238:not(#\9):hover:not(.awsui_selected_1mfbn_1xshi_258)::after {
   border-block: var(--border-item-width-bjacxs, 1px) solid var(--color-border-dropdown-item-hover-69t7jr, #879596);
   border-inline: var(--border-item-width-bjacxs, 1px) solid var(--color-border-dropdown-item-hover-69t7jr, #879596);
 }
-.awsui_today_1mfbn_1agc5_263:not(#\9):not(.awsui_in-range_1mfbn_1agc5_248) {
+.awsui_today_1mfbn_1xshi_263:not(#\9):not(.awsui_in-range_1mfbn_1xshi_248) {
   background-color: var(--color-background-calendar-current-date-du8mmf, #f2f3f3);
   border-start-start-radius: var(--border-radius-item-q4wr0w, 0px);
   border-start-end-radius: var(--border-radius-item-q4wr0w, 0px);
@@ -269,20 +269,20 @@ body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1agc5_161:not(#\9):focus::b
   font-weight: 700;
 }
-.awsui_selected_1mfbn_1agc5_258:not(#\9) {
+.awsui_selected_1mfbn_1xshi_258:not(#\9) {
   border-color: transparent;
   position: relative;
   z-index: 2;
   font-weight: 700;
 }
-body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1agc5_258:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1xshi_258:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1agc5_258:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1xshi_258:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-calendar-grid-selected-focus-outline-gutter-alnmsa, 2px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1agc5_258:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1xshi_258:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -296,62 +296,53 @@ body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1agc5_258:not(#\9):foc
   border-end-end-radius: var(--border-radius-calendar-day-focus-ring-wmrhyj, 2px);
   box-shadow: 0 0 0 2px var(--color-border-calendar-grid-selected-focus-ring-faye0i, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1agc5_258:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1xshi_258:not(#\9):focus::before {
   z-index: 1;
 }
-.awsui_selected_1mfbn_1agc5_258:not(#\9)::after {
+.awsui_selected_1mfbn_1xshi_258:not(#\9)::after {
   background-color: var(--color-background-control-checked-aeun6h, #0073bb);
   border-block: var(--border-item-width-bjacxs, 1px) solid var(--color-background-control-checked-aeun6h, #0073bb);
   border-inline: var(--border-item-width-bjacxs, 1px) solid var(--color-background-control-checked-aeun6h, #0073bb);
   z-index: 0;
 }
-.awsui_selected_1mfbn_1agc5_258.awsui_start-date_1mfbn_1agc5_248:not(#\9), .awsui_selected_1mfbn_1agc5_258.awsui_start-date_1mfbn_1agc5_248:not(#\9)::after, .awsui_selected_1mfbn_1agc5_258.awsui_range-start-date_1mfbn_1agc5_308:not(#\9), .awsui_selected_1mfbn_1agc5_258.awsui_range-start-date_1mfbn_1agc5_308:not(#\9)::after {
-  border-start-start-radius: var(--border-radius-item-q4wr0w, 0px);
-}
-.awsui_selected_1mfbn_1agc5_258.awsui_start-date_1mfbn_1agc5_248.awsui_in-range-border-bottom_1mfbn_1agc5_311:not(#\9), .awsui_selected_1mfbn_1agc5_258.awsui_start-date_1mfbn_1agc5_248.awsui_in-range-border-bottom_1mfbn_1agc5_311:not(#\9)::after, .awsui_selected_1mfbn_1agc5_258.awsui_range-start-date_1mfbn_1agc5_308.awsui_in-range-border-bottom_1mfbn_1agc5_311:not(#\9), .awsui_selected_1mfbn_1agc5_258.awsui_range-start-date_1mfbn_1agc5_308.awsui_in-range-border-bottom_1mfbn_1agc5_311:not(#\9)::after {
-  border-end-start-radius: var(--border-radius-item-q4wr0w, 0px);
-}
-.awsui_selected_1mfbn_1agc5_258.awsui_end-date_1mfbn_1agc5_248:not(#\9), .awsui_selected_1mfbn_1agc5_258.awsui_end-date_1mfbn_1agc5_248:not(#\9)::after, .awsui_selected_1mfbn_1agc5_258.awsui_range-end-date_1mfbn_1agc5_314:not(#\9), .awsui_selected_1mfbn_1agc5_258.awsui_range-end-date_1mfbn_1agc5_314:not(#\9)::after {
-  border-end-end-radius: var(--border-radius-item-q4wr0w, 0px);
-}
-.awsui_selected_1mfbn_1agc5_258.awsui_end-date_1mfbn_1agc5_248.awsui_in-range-border-top_1mfbn_1agc5_317:not(#\9), .awsui_selected_1mfbn_1agc5_258.awsui_end-date_1mfbn_1agc5_248.awsui_in-range-border-top_1mfbn_1agc5_317:not(#\9)::after, .awsui_selected_1mfbn_1agc5_258.awsui_range-end-date_1mfbn_1agc5_314.awsui_in-range-border-top_1mfbn_1agc5_317:not(#\9), .awsui_selected_1mfbn_1agc5_258.awsui_range-end-date_1mfbn_1agc5_314.awsui_in-range-border-top_1mfbn_1agc5_317:not(#\9)::after {
-  border-start-end-radius: var(--border-radius-item-q4wr0w, 0px);
+.awsui_selected_1mfbn_1xshi_258.awsui_start-date_1mfbn_1xshi_248:not(#\9), .awsui_selected_1mfbn_1xshi_258.awsui_end-date_1mfbn_1xshi_248:not(#\9) {
+  /* used in test utils */
 }
-.awsui_selected_1mfbn_1agc5_258 > .awsui_day-inner_1mfbn_1agc5_218:not(#\9) {
+.awsui_selected_1mfbn_1xshi_258 > .awsui_day-inner_1mfbn_1xshi_218:not(#\9) {
   color: var(--color-background-control-default-mfefru, #ffffff);
   position: relative;
   z-index: 2;
 }
-.awsui_in-range_1mfbn_1agc5_248:not(#\9) {
+.awsui_in-range_1mfbn_1xshi_248:not(#\9) {
   background-color: var(--color-background-dropdown-item-selected-i187hy, #f1faff);
   font-weight: 700;
 }
-.awsui_in-range_1mfbn_1agc5_248.awsui_in-range-border-block-start_1mfbn_1agc5_330:not(#\9)::after {
+.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-start_1mfbn_1xshi_321:not(#\9)::after {
   border-block-start: var(--border-item-width-bjacxs, 1px) solid var(--color-background-control-checked-aeun6h, #0073bb);
 }
-.awsui_in-range_1mfbn_1agc5_248.awsui_in-range-border-inline-end_1mfbn_1agc5_333:not(#\9)::after {
+.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-inline-end_1mfbn_1xshi_324:not(#\9)::after {
   border-inline-end: var(--border-item-width-bjacxs, 1px) solid var(--color-background-control-checked-aeun6h, #0073bb);
 }
-.awsui_in-range_1mfbn_1agc5_248.awsui_in-range-border-block-end_1mfbn_1agc5_336:not(#\9)::after {
+.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-end_1mfbn_1xshi_327:not(#\9)::after {
   border-block-end: var(--border-item-width-bjacxs, 1px) solid var(--color-background-control-checked-aeun6h, #0073bb);
 }
-.awsui_in-range_1mfbn_1agc5_248.awsui_in-range-border-inline-start_1mfbn_1agc5_339:not(#\9)::after {
+.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-inline-start_1mfbn_1xshi_330:not(#\9)::after {
   border-inline-start: var(--border-item-width-bjacxs, 1px) solid var(--color-background-control-checked-aeun6h, #0073bb);
 }
-.awsui_in-range_1mfbn_1agc5_248.awsui_in-range-border-block-start_1mfbn_1agc5_330.awsui_in-range-border-inline-end_1mfbn_1agc5_333:not(#\9), .awsui_in-range_1mfbn_1agc5_248.awsui_in-range-border-block-start_1mfbn_1agc5_330.awsui_in-range-border-inline-end_1mfbn_1agc5_333:not(#\9)::after {
+.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-start_1mfbn_1xshi_321.awsui_in-range-border-inline-end_1mfbn_1xshi_324:not(#\9), .awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-start_1mfbn_1xshi_321.awsui_in-range-border-inline-end_1mfbn_1xshi_324:not(#\9)::after {
   border-start-end-radius: var(--border-radius-item-q4wr0w, 0px);
 }
-.awsui_in-range_1mfbn_1agc5_248.awsui_in-range-border-block-end_1mfbn_1agc5_336.awsui_in-range-border-inline-end_1mfbn_1agc5_333:not(#\9), .awsui_in-range_1mfbn_1agc5_248.awsui_in-range-border-block-end_1mfbn_1agc5_336.awsui_in-range-border-inline-end_1mfbn_1agc5_333:not(#\9)::after {
+.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-end_1mfbn_1xshi_327.awsui_in-range-border-inline-end_1mfbn_1xshi_324:not(#\9), .awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-end_1mfbn_1xshi_327.awsui_in-range-border-inline-end_1mfbn_1xshi_324:not(#\9)::after {
   border-end-end-radius: var(--border-radius-item-q4wr0w, 0px);
 }
-.awsui_in-range_1mfbn_1agc5_248.awsui_in-range-border-block-end_1mfbn_1agc5_336.awsui_in-range-border-inline-start_1mfbn_1agc5_339:not(#\9), .awsui_in-range_1mfbn_1agc5_248.awsui_in-range-border-block-end_1mfbn_1agc5_336.awsui_in-range-border-inline-start_1mfbn_1agc5_339:not(#\9)::after {
+.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-end_1mfbn_1xshi_327.awsui_in-range-border-inline-start_1mfbn_1xshi_330:not(#\9), .awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-end_1mfbn_1xshi_327.awsui_in-range-border-inline-start_1mfbn_1xshi_330:not(#\9)::after {
   border-end-start-radius: var(--border-radius-item-q4wr0w, 0px);
 }
-.awsui_in-range_1mfbn_1agc5_248.awsui_in-range-border-block-start_1mfbn_1agc5_330.awsui_in-range-border-inline-start_1mfbn_1agc5_339:not(#\9), .awsui_in-range_1mfbn_1agc5_248.awsui_in-range-border-block-start_1mfbn_1agc5_330.awsui_in-range-border-inline-start_1mfbn_1agc5_339:not(#\9)::after {
+.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-start_1mfbn_1xshi_321.awsui_in-range-border-inline-start_1mfbn_1xshi_330:not(#\9), .awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-start_1mfbn_1xshi_321.awsui_in-range-border-inline-start_1mfbn_1xshi_330:not(#\9)::after {
   border-start-start-radius: var(--border-radius-item-q4wr0w, 0px);
 }
-.awsui_disabled-reason-tooltip_1mfbn_1agc5_355:not(#\9) {
+.awsui_disabled-reason-tooltip_1mfbn_1xshi_346:not(#\9) {
   /* used in test-utils or tests */
 }

package/lib/internal/template/date-range-picker/calendar/grids/styles.selectors.js CHANGED Viewed

@@ -2,33 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "grid": "awsui_grid_1mfbn_1agc5_149",
-  "grid-cell": "awsui_grid-cell_1mfbn_1agc5_154",
-  "day-header": "awsui_day-header_1mfbn_1agc5_161",
-  "week": "awsui_week_1mfbn_1agc5_171",
-  "day": "awsui_day_1mfbn_1agc5_161",
-  "day-inner": "awsui_day-inner_1mfbn_1agc5_218",
-  "in-first-row": "awsui_in-first-row_1mfbn_1agc5_223",
-  "in-previous-month": "awsui_in-previous-month_1mfbn_1agc5_223",
-  "last-day-of-month": "awsui_last-day-of-month_1mfbn_1agc5_227",
-  "in-next-month": "awsui_in-next-month_1mfbn_1agc5_231",
-  "in-first-column": "awsui_in-first-column_1mfbn_1agc5_235",
-  "in-current-month": "awsui_in-current-month_1mfbn_1agc5_238",
-  "enabled": "awsui_enabled_1mfbn_1agc5_242",
-  "in-range": "awsui_in-range_1mfbn_1agc5_248",
-  "end-date": "awsui_end-date_1mfbn_1agc5_248",
-  "start-date": "awsui_start-date_1mfbn_1agc5_248",
-  "no-range": "awsui_no-range_1mfbn_1agc5_248",
-  "selected": "awsui_selected_1mfbn_1agc5_258",
-  "today": "awsui_today_1mfbn_1agc5_263",
-  "range-start-date": "awsui_range-start-date_1mfbn_1agc5_308",
-  "in-range-border-bottom": "awsui_in-range-border-bottom_1mfbn_1agc5_311",
-  "range-end-date": "awsui_range-end-date_1mfbn_1agc5_314",
-  "in-range-border-top": "awsui_in-range-border-top_1mfbn_1agc5_317",
-  "in-range-border-block-start": "awsui_in-range-border-block-start_1mfbn_1agc5_330",
-  "in-range-border-inline-end": "awsui_in-range-border-inline-end_1mfbn_1agc5_333",
-  "in-range-border-block-end": "awsui_in-range-border-block-end_1mfbn_1agc5_336",
-  "in-range-border-inline-start": "awsui_in-range-border-inline-start_1mfbn_1agc5_339",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_1mfbn_1agc5_355"
+  "grid": "awsui_grid_1mfbn_1xshi_149",
+  "grid-cell": "awsui_grid-cell_1mfbn_1xshi_154",
+  "day-header": "awsui_day-header_1mfbn_1xshi_161",
+  "week": "awsui_week_1mfbn_1xshi_171",
+  "day": "awsui_day_1mfbn_1xshi_161",
+  "day-inner": "awsui_day-inner_1mfbn_1xshi_218",
+  "in-first-row": "awsui_in-first-row_1mfbn_1xshi_223",
+  "in-previous-month": "awsui_in-previous-month_1mfbn_1xshi_223",
+  "last-day-of-month": "awsui_last-day-of-month_1mfbn_1xshi_227",
+  "in-next-month": "awsui_in-next-month_1mfbn_1xshi_231",
+  "in-first-column": "awsui_in-first-column_1mfbn_1xshi_235",
+  "in-visible-calendar": "awsui_in-visible-calendar_1mfbn_1xshi_238",
+  "enabled": "awsui_enabled_1mfbn_1xshi_242",
+  "in-range": "awsui_in-range_1mfbn_1xshi_248",
+  "end-date": "awsui_end-date_1mfbn_1xshi_248",
+  "start-date": "awsui_start-date_1mfbn_1xshi_248",
+  "no-range": "awsui_no-range_1mfbn_1xshi_248",
+  "selected": "awsui_selected_1mfbn_1xshi_258",
+  "today": "awsui_today_1mfbn_1xshi_263",
+  "in-range-border-block-start": "awsui_in-range-border-block-start_1mfbn_1xshi_321",
+  "in-range-border-inline-end": "awsui_in-range-border-inline-end_1mfbn_1xshi_324",
+  "in-range-border-block-end": "awsui_in-range-border-block-end_1mfbn_1xshi_327",
+  "in-range-border-inline-start": "awsui_in-range-border-inline-start_1mfbn_1xshi_330",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_1mfbn_1xshi_346"
 };

package/lib/internal/template/date-range-picker/test-classes/styles.css.js ADDED Viewed

@@ -0,0 +1,7 @@
+    import './styles.scoped.css';
+    export default {
+  "calendar-week": "awsui_calendar-week_1afkv_11mwc_5",
+  "calendar-date": "awsui_calendar-date_1afkv_11mwc_6"
+};

package/lib/internal/template/date-range-picker/test-classes/styles.scoped.css ADDED Viewed

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_calendar-week_1afkv_11mwc_5:not(#\9),
+.awsui_calendar-date_1afkv_11mwc_6:not(#\9) {
+  /* used in test-utils */
+}

package/lib/internal/template/date-range-picker/test-classes/styles.selectors.js ADDED Viewed

@@ -0,0 +1,8 @@
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "calendar-week": "awsui_calendar-week_1afkv_11mwc_5",
+  "calendar-date": "awsui_calendar-date_1afkv_11mwc_6"
+};

package/lib/internal/template/internal/components/chart-legend/styles.css.js CHANGED Viewed

@@ -1,11 +1,11 @@
     import './styles.scoped.css';
     export default {
-  "marker": "awsui_marker_1kjc7_pzjzk_153",
-  "root": "awsui_root_1kjc7_pzjzk_167",
-  "title": "awsui_title_1kjc7_pzjzk_202",
-  "list": "awsui_list_1kjc7_pzjzk_206",
-  "marker--dimmed": "awsui_marker--dimmed_1kjc7_pzjzk_255",
-  "marker--highlighted": "awsui_marker--highlighted_1kjc7_pzjzk_258"
+  "marker": "awsui_marker_1kjc7_rmeoy_153",
+  "root": "awsui_root_1kjc7_rmeoy_167",
+  "title": "awsui_title_1kjc7_rmeoy_202",
+  "list": "awsui_list_1kjc7_rmeoy_206",
+  "marker--dimmed": "awsui_marker--dimmed_1kjc7_rmeoy_252",
+  "marker--highlighted": "awsui_marker--highlighted_1kjc7_rmeoy_255"
 };