@cloudscape-design/components 3.0.89 → 3.0.90
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/calendar/grid/index.d.ts +2 -1
- package/calendar/grid/index.d.ts.map +1 -1
- package/calendar/grid/index.js +2 -2
- package/calendar/grid/index.js.map +1 -1
- package/calendar/header/index.d.ts +2 -1
- package/calendar/header/index.d.ts.map +1 -1
- package/calendar/header/index.js +2 -2
- package/calendar/header/index.js.map +1 -1
- package/calendar/internal.d.ts.map +1 -1
- package/calendar/internal.js +4 -2
- package/calendar/internal.js.map +1 -1
- package/calendar/styles.css.js +18 -18
- package/calendar/styles.scoped.css +39 -38
- package/calendar/styles.selectors.js +18 -18
- package/internal/environment.js +1 -1
- package/package.json +1 -1
package/calendar/grid/index.d.ts
CHANGED
|
@@ -26,6 +26,7 @@ export interface GridProps {
|
|
|
26
26
|
startOfWeek: DayIndex;
|
|
27
27
|
todayAriaLabel: string;
|
|
28
28
|
selectedDate: Date | null;
|
|
29
|
+
ariaLabelledby: string;
|
|
29
30
|
}
|
|
30
|
-
export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, focusableDate, onSelectDate, onFocusDate, onChangeMonth, startOfWeek, todayAriaLabel, selectedDate, }: GridProps): JSX.Element;
|
|
31
|
+
export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, focusableDate, onSelectDate, onFocusDate, onChangeMonth, startOfWeek, todayAriaLabel, selectedDate, ariaLabelledby, }: GridProps): JSX.Element;
|
|
31
32
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/calendar/grid/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAQ/D;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,IAAI,CAAC;IACf,aAAa,EAAE,eAAe,CAAC,qBAAqB,CAAC;IACrD,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,aAAa,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/calendar/grid/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAQ/D;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,IAAI,CAAC;IACf,aAAa,EAAE,eAAe,CAAC,qBAAqB,CAAC;IACrD,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,aAAa,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,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,GACf,EAAE,SAAS,eAoIX"}
|
package/calendar/grid/index.js
CHANGED
|
@@ -13,7 +13,7 @@ import { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update.js'
|
|
|
13
13
|
import ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';
|
|
14
14
|
import { moveNextDay, movePrevDay, moveNextWeek, movePrevWeek } from '../utils/navigation';
|
|
15
15
|
export default function Grid(_a) {
|
|
16
|
-
var locale = _a.locale, baseDate = _a.baseDate, isDateEnabled = _a.isDateEnabled, focusedDate = _a.focusedDate, focusableDate = _a.focusableDate, onSelectDate = _a.onSelectDate, onFocusDate = _a.onFocusDate, onChangeMonth = _a.onChangeMonth, startOfWeek = _a.startOfWeek, todayAriaLabel = _a.todayAriaLabel, selectedDate = _a.selectedDate;
|
|
16
|
+
var locale = _a.locale, baseDate = _a.baseDate, isDateEnabled = _a.isDateEnabled, focusedDate = _a.focusedDate, focusableDate = _a.focusableDate, onSelectDate = _a.onSelectDate, onFocusDate = _a.onFocusDate, onChangeMonth = _a.onChangeMonth, startOfWeek = _a.startOfWeek, todayAriaLabel = _a.todayAriaLabel, selectedDate = _a.selectedDate, ariaLabelledby = _a.ariaLabelledby;
|
|
17
17
|
var focusedDateRef = useRef(null);
|
|
18
18
|
var onGridKeyDownHandler = function (event) {
|
|
19
19
|
var updatedFocusDate;
|
|
@@ -63,7 +63,7 @@ export default function Grid(_a) {
|
|
|
63
63
|
var weeks = useMemo(function () { return getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }); }, [baseDate, startOfWeek]);
|
|
64
64
|
var weekdays = weeks[0].map(function (date) { return date.getDay(); });
|
|
65
65
|
var focusVisible = useFocusVisible();
|
|
66
|
-
return (React.createElement("table", { role: "grid", className: styles['calendar-grid'] },
|
|
66
|
+
return (React.createElement("table", { role: "grid", className: styles['calendar-grid'], "aria-labelledby": ariaLabelledby },
|
|
67
67
|
React.createElement("thead", null,
|
|
68
68
|
React.createElement("tr", null, weekdays.map(function (dayIndex) { return (React.createElement("th", { key: dayIndex, scope: "col", className: clsx(styles['calendar-grid-cell'], styles['calendar-day-header']) },
|
|
69
69
|
React.createElement("span", { "aria-hidden": "true" }, renderDayName(locale, dayIndex, 'short')),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/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 useFocusVisible from '../../internal/hooks/focus-visible/index.js';\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}\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}: 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 const focusVisible = useFocusVisible();\n\n return (\n <table role=\"grid\" className={styles['calendar-grid']}>\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 {...focusVisible}\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":"","sources":["../../../../src/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 useFocusVisible from '../../internal/hooks/focus-visible/index.js';\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 const focusVisible = useFocusVisible();\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 {...focusVisible}\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"]}
|
|
@@ -4,7 +4,8 @@ interface CalendarHeaderProps {
|
|
|
4
4
|
onChangeMonth: (prev?: boolean) => void;
|
|
5
5
|
previousMonthLabel: string;
|
|
6
6
|
nextMonthLabel: string;
|
|
7
|
+
headingId: string;
|
|
7
8
|
}
|
|
8
|
-
declare const CalendarHeader: ({ baseDate, locale, onChangeMonth, previousMonthLabel, nextMonthLabel, }: CalendarHeaderProps) => JSX.Element;
|
|
9
|
+
declare const CalendarHeader: ({ baseDate, locale, onChangeMonth, previousMonthLabel, nextMonthLabel, headingId, }: CalendarHeaderProps) => JSX.Element;
|
|
9
10
|
export default CalendarHeader;
|
|
10
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/calendar/header/index.tsx"],"names":[],"mappings":"AAOA,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/calendar/header/index.tsx"],"names":[],"mappings":"AAOA,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,cAAc,wFAOjB,mBAAmB,gBAUrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
package/calendar/header/index.js
CHANGED
|
@@ -5,10 +5,10 @@ import styles from '../styles.css.js';
|
|
|
5
5
|
import { renderMonthAndYear } from '../utils/intl';
|
|
6
6
|
import HeaderButton from './button';
|
|
7
7
|
var CalendarHeader = function (_a) {
|
|
8
|
-
var baseDate = _a.baseDate, locale = _a.locale, onChangeMonth = _a.onChangeMonth, previousMonthLabel = _a.previousMonthLabel, nextMonthLabel = _a.nextMonthLabel;
|
|
8
|
+
var baseDate = _a.baseDate, locale = _a.locale, onChangeMonth = _a.onChangeMonth, previousMonthLabel = _a.previousMonthLabel, nextMonthLabel = _a.nextMonthLabel, headingId = _a.headingId;
|
|
9
9
|
return (React.createElement("div", { className: styles['calendar-header'] },
|
|
10
10
|
React.createElement(HeaderButton, { ariaLabel: previousMonthLabel, isPrevious: true, onChangeMonth: onChangeMonth }),
|
|
11
|
-
React.createElement("
|
|
11
|
+
React.createElement("h2", { className: styles['calendar-header-month'], id: headingId }, renderMonthAndYear(locale, baseDate)),
|
|
12
12
|
React.createElement(HeaderButton, { ariaLabel: nextMonthLabel, isPrevious: false, onChangeMonth: onChangeMonth })));
|
|
13
13
|
};
|
|
14
14
|
export default CalendarHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/calendar/header/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,YAAY,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/calendar/header/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,YAAY,MAAM,UAAU,CAAC;AAWpC,IAAM,cAAc,GAAG,UAAC,EAOF;QANpB,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,kBAAkB,wBAAA,EAClB,cAAc,oBAAA,EACd,SAAS,eAAA;IAET,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;QACvC,oBAAC,YAAY,IAAC,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,GAAI;QAC/F,4BAAI,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,EAAE,SAAS,IAC1D,kBAAkB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAClC;QACL,oBAAC,YAAY,IAAC,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,GAAI,CACxF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from '../styles.css.js';\nimport { renderMonthAndYear } from '../utils/intl';\nimport HeaderButton from './button';\n\ninterface CalendarHeaderProps {\n baseDate: Date;\n locale: string;\n onChangeMonth: (prev?: boolean) => void;\n previousMonthLabel: string;\n nextMonthLabel: string;\n headingId: string;\n}\n\nconst CalendarHeader = ({\n baseDate,\n locale,\n onChangeMonth,\n previousMonthLabel,\n nextMonthLabel,\n headingId,\n}: CalendarHeaderProps) => {\n return (\n <div className={styles['calendar-header']}>\n <HeaderButton ariaLabel={previousMonthLabel} isPrevious={true} onChangeMonth={onChangeMonth} />\n <h2 className={styles['calendar-header-month']} id={headingId}>\n {renderMonthAndYear(locale, baseDate)}\n </h2>\n <HeaderButton ariaLabel={nextMonthLabel} isPrevious={false} onChangeMonth={onChangeMonth} />\n </div>\n );\n};\n\nexport default CalendarHeader;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/calendar/internal.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/calendar/internal.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAK3F,oBAAY,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,cAAc,EACd,kBAAkB,EAClB,sBAAsB,EACtB,QAAQ,EACR,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,aAAa,GAAG,0BAA0B,eA4G5C"}
|
package/calendar/internal.js
CHANGED
|
@@ -14,6 +14,7 @@ import clsx from 'clsx';
|
|
|
14
14
|
import { getBaseProps } from '../internal/base-component';
|
|
15
15
|
import { getBaseDate } from './utils/navigation';
|
|
16
16
|
import { useDateCache } from '../internal/hooks/use-date-cache/index.js';
|
|
17
|
+
import { useUniqueId } from '../internal/hooks/use-unique-id/index.js';
|
|
17
18
|
export default function Calendar(_a) {
|
|
18
19
|
var value = _a.value, _b = _a.locale, locale = _b === void 0 ? '' : _b, startOfWeek = _a.startOfWeek, _c = _a.isDateEnabled, isDateEnabled = _c === void 0 ? function () { return true; } : _c, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, ariaDescribedby = _a.ariaDescribedby, todayAriaLabel = _a.todayAriaLabel, nextMonthAriaLabel = _a.nextMonthAriaLabel, previousMonthAriaLabel = _a.previousMonthAriaLabel, onChange = _a.onChange, __internalRootRef = _a.__internalRootRef, rest = __rest(_a, ["value", "locale", "startOfWeek", "isDateEnabled", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "todayAriaLabel", "nextMonthAriaLabel", "previousMonthAriaLabel", "onChange", "__internalRootRef"]);
|
|
19
20
|
checkControlled('Calendar', 'value', value, 'onChange', onChange);
|
|
@@ -29,6 +30,7 @@ export default function Calendar(_a) {
|
|
|
29
30
|
var memoizedValue = parsedValue ? valueDateCache(parsedValue) : null;
|
|
30
31
|
var defaultDisplayedDate = memoizedValue !== null && memoizedValue !== void 0 ? memoizedValue : new Date();
|
|
31
32
|
var _e = useState(defaultDisplayedDate), displayedDate = _e[0], setDisplayedDate = _e[1];
|
|
33
|
+
var headingId = useUniqueId('calendar-heading');
|
|
32
34
|
// Update displayed date if value changes.
|
|
33
35
|
useEffect(function () {
|
|
34
36
|
memoizedValue && setDisplayedDate(function (prev) { return (prev.getTime() !== memoizedValue.getTime() ? memoizedValue : prev); });
|
|
@@ -74,8 +76,8 @@ export default function Calendar(_a) {
|
|
|
74
76
|
};
|
|
75
77
|
return (React.createElement("div", __assign({ ref: __internalRootRef }, baseProps, { role: "group", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: clsx(styles.root, styles.calendar, baseProps.className) }),
|
|
76
78
|
React.createElement("div", { className: styles['calendar-inner'] },
|
|
77
|
-
React.createElement(CalendarHeader, { baseDate: baseDate, locale: normalizedLocale, onChangeMonth: onHeaderChangeMonthHandler, previousMonthLabel: previousMonthAriaLabel, nextMonthLabel: nextMonthAriaLabel }),
|
|
79
|
+
React.createElement(CalendarHeader, { baseDate: baseDate, locale: normalizedLocale, onChangeMonth: onHeaderChangeMonthHandler, previousMonthLabel: previousMonthAriaLabel, nextMonthLabel: nextMonthAriaLabel, headingId: headingId }),
|
|
78
80
|
React.createElement("div", { onBlur: onGridBlur, ref: gridWrapperRef },
|
|
79
|
-
React.createElement(Grid, { locale: normalizedLocale, baseDate: baseDate, isDateEnabled: isDateEnabled, focusedDate: focusedDate, focusableDate: focusableDate, onSelectDate: onGridSelectDateHandler, onFocusDate: onGridFocusDateHandler, onChangeMonth: onGridChangeMonthHandler, startOfWeek: normalizedStartOfWeek, todayAriaLabel: todayAriaLabel, selectedDate: memoizedValue })))));
|
|
81
|
+
React.createElement(Grid, { locale: normalizedLocale, baseDate: baseDate, isDateEnabled: isDateEnabled, focusedDate: focusedDate, focusableDate: focusableDate, onSelectDate: onGridSelectDateHandler, onFocusDate: onGridFocusDateHandler, onChangeMonth: onGridChangeMonthHandler, startOfWeek: normalizedStartOfWeek, todayAriaLabel: todayAriaLabel, selectedDate: memoizedValue, ariaLabelledby: headingId })))));
|
|
80
82
|
}
|
|
81
83
|
//# sourceMappingURL=internal.js.map
|
package/calendar/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/calendar/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,UAAU,CAAC;AACtC,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,eAAe,MAAM,6CAA6C,CAAC;AAC1E,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/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 { addMonths, isSameMonth } from 'date-fns';\nimport styles from './styles.css.js';\nimport CalendarHeader from './header';\nimport Grid from './grid';\nimport { normalizeLocale, normalizeStartOfWeek } from './utils/locales.js';\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';\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 todayAriaLabel,\n nextMonthAriaLabel,\n previousMonthAriaLabel,\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 // 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 = (isPreviousButtonClick?: boolean) => {\n setDisplayedDate(addMonths(baseDate, isPreviousButtonClick ? -1 : 1));\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_2m5xj_93",
|
|
5
|
+
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_2m5xj_1",
|
|
6
|
+
"root": "awsui_root_1ykar_2m5xj_124",
|
|
7
|
+
"calendar-inner": "awsui_calendar-inner_1ykar_2m5xj_141",
|
|
8
|
+
"calendar-header": "awsui_calendar-header_1ykar_2m5xj_144",
|
|
9
|
+
"calendar-header-month": "awsui_calendar-header-month_1ykar_2m5xj_149",
|
|
10
|
+
"calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_2m5xj_156",
|
|
11
|
+
"calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_2m5xj_159",
|
|
12
|
+
"calendar-grid": "awsui_calendar-grid_1ykar_2m5xj_162",
|
|
13
|
+
"calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_2m5xj_166",
|
|
14
|
+
"calendar-day-header": "awsui_calendar-day-header_1ykar_2m5xj_172",
|
|
15
|
+
"calendar-day": "awsui_calendar-day_1ykar_2m5xj_172",
|
|
16
|
+
"calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_2m5xj_189",
|
|
17
|
+
"calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_2m5xj_196",
|
|
18
|
+
"calendar-day-selected": "awsui_calendar-day-selected_1ykar_2m5xj_203",
|
|
19
|
+
"calendar-day-today": "awsui_calendar-day-today_1ykar_2m5xj_206",
|
|
20
|
+
"day-inner": "awsui_day-inner_1ykar_2m5xj_221",
|
|
21
|
+
"calendar-week": "awsui_calendar-week_1ykar_2m5xj_286"
|
|
22
22
|
};
|
|
23
23
|
|
|
@@ -90,11 +90,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
90
90
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
91
|
SPDX-License-Identifier: Apache-2.0
|
|
92
92
|
*/
|
|
93
|
-
.
|
|
94
|
-
animation: awsui_awsui-motion-fade-in-
|
|
93
|
+
.awsui_calendar_1ykar_2m5xj_93:not(#\9) {
|
|
94
|
+
animation: awsui_awsui-motion-fade-in-0_1ykar_2m5xj_1 var(--motion-duration-show-quick-tyaalm, 135ms) var(--motion-easing-show-quick-1fcgbv, ease-out);
|
|
95
95
|
animation-fill-mode: both;
|
|
96
96
|
}
|
|
97
|
-
@keyframes awsui_awsui-motion-fade-in-
|
|
97
|
+
@keyframes awsui_awsui-motion-fade-in-0_1ykar_2m5xj_1 {
|
|
98
98
|
from {
|
|
99
99
|
opacity: 0;
|
|
100
100
|
}
|
|
@@ -103,12 +103,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
@media (prefers-reduced-motion: reduce) {
|
|
106
|
-
.
|
|
106
|
+
.awsui_calendar_1ykar_2m5xj_93:not(#\9) {
|
|
107
107
|
animation: none;
|
|
108
108
|
transition: none;
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
|
-
.awsui-motion-disabled .
|
|
111
|
+
.awsui-motion-disabled .awsui_calendar_1ykar_2m5xj_93:not(#\9), .awsui-mode-entering .awsui_calendar_1ykar_2m5xj_93:not(#\9) {
|
|
112
112
|
animation: none;
|
|
113
113
|
transition: none;
|
|
114
114
|
}
|
|
@@ -121,11 +121,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
121
121
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
122
122
|
SPDX-License-Identifier: Apache-2.0
|
|
123
123
|
*/
|
|
124
|
-
.
|
|
124
|
+
.awsui_root_1ykar_2m5xj_124:not(#\9) {
|
|
125
125
|
/* used in test-utils */
|
|
126
126
|
}
|
|
127
127
|
|
|
128
|
-
.
|
|
128
|
+
.awsui_calendar_1ykar_2m5xj_93:not(#\9) {
|
|
129
129
|
display: block;
|
|
130
130
|
width: var(--size-calendar-grid-width-lxsx0p, 238px);
|
|
131
131
|
overflow: auto;
|
|
@@ -164,76 +164,77 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
164
164
|
font-weight: 400;
|
|
165
165
|
font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
|
|
166
166
|
}
|
|
167
|
-
.awsui_calendar-
|
|
167
|
+
.awsui_calendar-inner_1ykar_2m5xj_141:not(#\9) {
|
|
168
168
|
margin: var(--space-xs-rsr2qu, 8px);
|
|
169
169
|
}
|
|
170
|
-
.awsui_calendar-
|
|
170
|
+
.awsui_calendar-header_1ykar_2m5xj_144:not(#\9) {
|
|
171
171
|
display: flex;
|
|
172
172
|
justify-content: space-between;
|
|
173
173
|
align-items: center;
|
|
174
174
|
}
|
|
175
|
-
.awsui_calendar-header-
|
|
175
|
+
.awsui_calendar-header-month_1ykar_2m5xj_149:not(#\9) {
|
|
176
176
|
font-size: var(--font-body-m-size-sregvd, 14px);
|
|
177
177
|
line-height: var(--font-body-m-line-height-i7xxvv, 22px);
|
|
178
178
|
font-weight: 700;
|
|
179
179
|
color: var(--color-text-dropdown-item-default-7tg9p2, #000716);
|
|
180
|
+
margin: 0;
|
|
180
181
|
}
|
|
181
|
-
.awsui_calendar-next-month-
|
|
182
|
+
.awsui_calendar-next-month-btn_1ykar_2m5xj_156:not(#\9) {
|
|
182
183
|
/* used for identifying element */
|
|
183
184
|
}
|
|
184
|
-
.awsui_calendar-prev-month-
|
|
185
|
+
.awsui_calendar-prev-month-btn_1ykar_2m5xj_159:not(#\9) {
|
|
185
186
|
/* used for identifying element */
|
|
186
187
|
}
|
|
187
|
-
.awsui_calendar-
|
|
188
|
+
.awsui_calendar-grid_1ykar_2m5xj_162:not(#\9) {
|
|
188
189
|
width: 100%;
|
|
189
190
|
border-spacing: 0;
|
|
190
191
|
}
|
|
191
|
-
.awsui_calendar-grid-
|
|
192
|
+
.awsui_calendar-grid-cell_1ykar_2m5xj_166:not(#\9) {
|
|
192
193
|
width: 14.2857142857%;
|
|
193
194
|
word-break: break-word;
|
|
194
195
|
text-align: center;
|
|
195
196
|
font-weight: unset;
|
|
196
197
|
}
|
|
197
|
-
.awsui_calendar-day-
|
|
198
|
+
.awsui_calendar-day-header_1ykar_2m5xj_172:not(#\9) {
|
|
198
199
|
padding: var(--space-s-hv8c1d, 12px) 0 var(--space-xxs-ynfts5, 4px);
|
|
199
200
|
color: var(--color-text-calendar-month-elf7e9, #5f6b7a);
|
|
200
201
|
font-size: var(--font-body-s-size-ukw2p9, 12px);
|
|
201
202
|
line-height: var(--font-body-s-line-height-kdsbrl, 16px);
|
|
202
203
|
letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
|
|
203
204
|
}
|
|
204
|
-
.awsui_calendar-
|
|
205
|
+
.awsui_calendar-day_1ykar_2m5xj_172:not(#\9) {
|
|
205
206
|
border-bottom: 1px solid var(--color-border-calendar-grid-sshunw, transparent);
|
|
206
207
|
border-right: 1px solid var(--color-border-calendar-grid-sshunw, transparent);
|
|
207
208
|
padding: var(--space-xxs-ynfts5, 4px) 0;
|
|
208
209
|
color: var(--color-text-dropdown-item-disabled-varol7, #9ba7b6);
|
|
209
210
|
position: relative;
|
|
210
211
|
}
|
|
211
|
-
.awsui_calendar-
|
|
212
|
+
.awsui_calendar-day_1ykar_2m5xj_172:not(#\9):first-child {
|
|
212
213
|
border-left: 1px solid var(--color-border-calendar-grid-sshunw, transparent);
|
|
213
214
|
}
|
|
214
|
-
.awsui_calendar-day-
|
|
215
|
+
.awsui_calendar-day-enabled_1ykar_2m5xj_189:not(#\9) {
|
|
215
216
|
cursor: pointer;
|
|
216
217
|
color: var(--color-text-dropdown-item-secondary-0me7js, #5f6b7a);
|
|
217
218
|
}
|
|
218
|
-
.awsui_calendar-day-
|
|
219
|
+
.awsui_calendar-day-enabled_1ykar_2m5xj_189:not(#\9)::after {
|
|
219
220
|
border-radius: var(--border-radius-item-u2ibpi, 8px);
|
|
220
221
|
}
|
|
221
|
-
.awsui_calendar-day-
|
|
222
|
+
.awsui_calendar-day-enabled_1ykar_2m5xj_189.awsui_calendar-day-current-month_1ykar_2m5xj_196:not(#\9) {
|
|
222
223
|
color: var(--color-text-dropdown-item-default-7tg9p2, #000716);
|
|
223
224
|
}
|
|
224
|
-
.awsui_calendar-day-
|
|
225
|
+
.awsui_calendar-day-enabled_1ykar_2m5xj_189.awsui_calendar-day-current-month_1ykar_2m5xj_196:not(#\9):hover {
|
|
225
226
|
color: var(--color-text-calendar-day-hover-graajh, #000716);
|
|
226
227
|
background-color: var(--color-background-dropdown-item-hover-mqsxkv, #f4f4f4);
|
|
227
228
|
}
|
|
228
|
-
.awsui_calendar-day-
|
|
229
|
+
.awsui_calendar-day-enabled_1ykar_2m5xj_189.awsui_calendar-day-current-month_1ykar_2m5xj_196:not(#\9):hover:not(.awsui_calendar-day-selected_1ykar_2m5xj_203)::after {
|
|
229
230
|
border: var(--border-item-width-qbbbsa, 2px) solid var(--color-border-dropdown-item-hover-tyzq9m, #7d8998);
|
|
230
231
|
}
|
|
231
|
-
.awsui_calendar-day-
|
|
232
|
+
.awsui_calendar-day-today_1ykar_2m5xj_206:not(#\9) {
|
|
232
233
|
background-color: var(--color-background-calendar-today-762czq, #f4f4f4);
|
|
233
234
|
border-radius: var(--border-radius-item-u2ibpi, 8px);
|
|
234
235
|
font-weight: 700;
|
|
235
236
|
}
|
|
236
|
-
.awsui_calendar-
|
|
237
|
+
.awsui_calendar-day_1ykar_2m5xj_172:not(#\9)::after {
|
|
237
238
|
content: "";
|
|
238
239
|
position: absolute;
|
|
239
240
|
z-index: 1;
|
|
@@ -243,21 +244,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
243
244
|
right: calc(-1 * var(--border-item-width-qbbbsa, 2px));
|
|
244
245
|
background-color: transparent;
|
|
245
246
|
}
|
|
246
|
-
.awsui_calendar-
|
|
247
|
+
.awsui_calendar-day_1ykar_2m5xj_172 > .awsui_day-inner_1ykar_2m5xj_221:not(#\9) {
|
|
247
248
|
position: relative;
|
|
248
249
|
z-index: 1;
|
|
249
250
|
}
|
|
250
|
-
.awsui_calendar-
|
|
251
|
+
.awsui_calendar-day_1ykar_2m5xj_172:not(#\9):focus {
|
|
251
252
|
outline: none;
|
|
252
253
|
}
|
|
253
|
-
.awsui_calendar-
|
|
254
|
+
.awsui_calendar-day_1ykar_2m5xj_172:not(#\9):focus[data-awsui-focus-visible=true]:focus {
|
|
254
255
|
position: relative;
|
|
255
256
|
}
|
|
256
|
-
.awsui_calendar-
|
|
257
|
+
.awsui_calendar-day_1ykar_2m5xj_172:not(#\9):focus[data-awsui-focus-visible=true]:focus {
|
|
257
258
|
outline: 2px dotted transparent;
|
|
258
259
|
outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-v3dwvl, -5px) - 1px);
|
|
259
260
|
}
|
|
260
|
-
.awsui_calendar-
|
|
261
|
+
.awsui_calendar-day_1ykar_2m5xj_172:not(#\9):focus[data-awsui-focus-visible=true]:focus::before {
|
|
261
262
|
content: " ";
|
|
262
263
|
display: block;
|
|
263
264
|
position: absolute;
|
|
@@ -268,23 +269,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
268
269
|
border-radius: var(--border-radius-calendar-day-focus-ring-a8mlqd, 3px);
|
|
269
270
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
270
271
|
}
|
|
271
|
-
.awsui_calendar-
|
|
272
|
+
.awsui_calendar-day_1ykar_2m5xj_172:not(#\9):focus[data-awsui-focus-visible=true]:focus::before {
|
|
272
273
|
z-index: 2;
|
|
273
274
|
}
|
|
274
|
-
.awsui_calendar-day-
|
|
275
|
+
.awsui_calendar-day-selected_1ykar_2m5xj_203:not(#\9) {
|
|
275
276
|
border-color: transparent;
|
|
276
277
|
position: relative;
|
|
277
278
|
z-index: 2;
|
|
278
279
|
font-weight: 700;
|
|
279
280
|
}
|
|
280
|
-
.awsui_calendar-day-
|
|
281
|
+
.awsui_calendar-day-selected_1ykar_2m5xj_203:not(#\9):focus[data-awsui-focus-visible=true]:focus {
|
|
281
282
|
position: relative;
|
|
282
283
|
}
|
|
283
|
-
.awsui_calendar-day-
|
|
284
|
+
.awsui_calendar-day-selected_1ykar_2m5xj_203:not(#\9):focus[data-awsui-focus-visible=true]:focus {
|
|
284
285
|
outline: 2px dotted transparent;
|
|
285
286
|
outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-v3dwvl, -5px) - 1px);
|
|
286
287
|
}
|
|
287
|
-
.awsui_calendar-day-
|
|
288
|
+
.awsui_calendar-day-selected_1ykar_2m5xj_203:not(#\9):focus[data-awsui-focus-visible=true]:focus::before {
|
|
288
289
|
content: " ";
|
|
289
290
|
display: block;
|
|
290
291
|
position: absolute;
|
|
@@ -295,19 +296,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
295
296
|
border-radius: var(--border-radius-calendar-day-focus-ring-a8mlqd, 3px);
|
|
296
297
|
box-shadow: 0 0 0 2px var(--color-border-calendar-grid-selected-focus-ring-cxqa0s, #fbfbfb);
|
|
297
298
|
}
|
|
298
|
-
.awsui_calendar-day-
|
|
299
|
+
.awsui_calendar-day-selected_1ykar_2m5xj_203:not(#\9):focus[data-awsui-focus-visible=true]:focus::before {
|
|
299
300
|
z-index: 2;
|
|
300
301
|
}
|
|
301
|
-
.awsui_calendar-day-
|
|
302
|
+
.awsui_calendar-day-selected_1ykar_2m5xj_203:not(#\9)::after {
|
|
302
303
|
background-color: var(--color-background-control-checked-9admlu, #0972d3);
|
|
303
304
|
border: var(--border-item-width-qbbbsa, 2px) solid var(--color-background-control-checked-9admlu, #0972d3);
|
|
304
305
|
border-radius: var(--border-radius-item-u2ibpi, 8px);
|
|
305
306
|
}
|
|
306
|
-
.awsui_calendar-day-
|
|
307
|
+
.awsui_calendar-day-selected_1ykar_2m5xj_203 > .awsui_day-inner_1ykar_2m5xj_221:not(#\9) {
|
|
307
308
|
z-index: 2;
|
|
308
309
|
color: var(--color-background-control-default-4pa05r, #ffffff);
|
|
309
310
|
position: relative;
|
|
310
311
|
}
|
|
311
|
-
.awsui_calendar-
|
|
312
|
+
.awsui_calendar-week_1ykar_2m5xj_286:not(#\9):first-child > .awsui_calendar-day_1ykar_2m5xj_172 {
|
|
312
313
|
border-top: 1px solid var(--color-border-calendar-grid-sshunw, transparent);
|
|
313
314
|
}
|
|
@@ -2,23 +2,23 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"calendar": "
|
|
6
|
-
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-
|
|
7
|
-
"root": "
|
|
8
|
-
"calendar-inner": "awsui_calendar-
|
|
9
|
-
"calendar-header": "awsui_calendar-
|
|
10
|
-
"calendar-header-month": "awsui_calendar-header-
|
|
11
|
-
"calendar-next-month-btn": "awsui_calendar-next-month-
|
|
12
|
-
"calendar-prev-month-btn": "awsui_calendar-prev-month-
|
|
13
|
-
"calendar-grid": "awsui_calendar-
|
|
14
|
-
"calendar-grid-cell": "awsui_calendar-grid-
|
|
15
|
-
"calendar-day-header": "awsui_calendar-day-
|
|
16
|
-
"calendar-day": "awsui_calendar-
|
|
17
|
-
"calendar-day-enabled": "awsui_calendar-day-
|
|
18
|
-
"calendar-day-current-month": "awsui_calendar-day-current-
|
|
19
|
-
"calendar-day-selected": "awsui_calendar-day-
|
|
20
|
-
"calendar-day-today": "awsui_calendar-day-
|
|
21
|
-
"day-inner": "awsui_day-
|
|
22
|
-
"calendar-week": "awsui_calendar-
|
|
5
|
+
"calendar": "awsui_calendar_1ykar_2m5xj_93",
|
|
6
|
+
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_2m5xj_1",
|
|
7
|
+
"root": "awsui_root_1ykar_2m5xj_124",
|
|
8
|
+
"calendar-inner": "awsui_calendar-inner_1ykar_2m5xj_141",
|
|
9
|
+
"calendar-header": "awsui_calendar-header_1ykar_2m5xj_144",
|
|
10
|
+
"calendar-header-month": "awsui_calendar-header-month_1ykar_2m5xj_149",
|
|
11
|
+
"calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_2m5xj_156",
|
|
12
|
+
"calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_2m5xj_159",
|
|
13
|
+
"calendar-grid": "awsui_calendar-grid_1ykar_2m5xj_162",
|
|
14
|
+
"calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_2m5xj_166",
|
|
15
|
+
"calendar-day-header": "awsui_calendar-day-header_1ykar_2m5xj_172",
|
|
16
|
+
"calendar-day": "awsui_calendar-day_1ykar_2m5xj_172",
|
|
17
|
+
"calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_2m5xj_189",
|
|
18
|
+
"calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_2m5xj_196",
|
|
19
|
+
"calendar-day-selected": "awsui_calendar-day-selected_1ykar_2m5xj_203",
|
|
20
|
+
"calendar-day-today": "awsui_calendar-day-today_1ykar_2m5xj_206",
|
|
21
|
+
"day-inner": "awsui_day-inner_1ykar_2m5xj_221",
|
|
22
|
+
"calendar-week": "awsui_calendar-week_1ykar_2m5xj_286"
|
|
23
23
|
};
|
|
24
24
|
|
package/internal/environment.js
CHANGED