@cloudscape-design/components-themeable 3.0.895 → 3.0.896

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/components-themeable",
-  "version": "3.0.895",
+  "version": "3.0.896",
   "files": [
     "lib"
   ],

package/lib/internal/template/date-range-picker/calendar/grids/monthly-grid.d.ts

@@ -1,39 +0,0 @@
-import React from 'react';
-import { DateRangePickerProps, DayIndex } from '../../interfaces';
-/**
- * Calendar grid supports two mechanisms of keyboard navigation:
- * - Native screen-reader table navigation (semantic table markup);
- * - Keyboard arrow-keys navigation (a custom key-down handler).
- *
- * 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:
- * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;
- * - (table navigation) Safari+VO - "dimmed" state is announced twice;
- * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;
- * - (keyboard navigation) Firefox+NVDA - every day is announced as "not selected";
- * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;
- * - (keyboard navigation) Safari/Chrome+VO - days are not announced as interactive (clickable or selectable);
- * - (keyboard navigation) Safari/Chrome+VO - day announcements are not interruptive and can be missed if navigating fast.
- */
-interface GridProps {
-    padDates: 'before' | 'after';
-    baseDate: Date;
-    selectedStartDate: Date | null;
-    selectedEndDate: Date | null;
-    rangeStartDate: Date | null;
-    rangeEndDate: Date | null;
-    focusedDate: Date | null;
-    focusedDateRef: React.RefObject<HTMLTableCellElement>;
-    onSelectDate: (date: Date) => void;
-    onGridKeyDownHandler: (e: React.KeyboardEvent<HTMLElement>) => void;
-    onFocusedDateChange: React.Dispatch<React.SetStateAction<Date | null>>;
-    isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;
-    dateDisabledReason: DateRangePickerProps.DateDisabledReasonFunction;
-    locale: string;
-    startOfWeek: DayIndex;
-    todayAriaLabel?: string;
-    ariaLabelledby: string;
-    className?: string;
-}
-export declare function MonthlyGrid({ padDates, baseDate, selectedStartDate, selectedEndDate, rangeStartDate, rangeEndDate, focusedDate, focusedDateRef, onSelectDate, onGridKeyDownHandler, onFocusedDateChange, isDateEnabled, dateDisabledReason, locale, startOfWeek, todayAriaLabel, ariaLabelledby, className, }: GridProps): JSX.Element;
-export {};
-//# sourceMappingURL=monthly-grid.d.ts.map

package/lib/internal/template/date-range-picker/calendar/grids/monthly-grid.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"monthly-grid.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/monthly-grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAQvC,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMlE;;;;;;;;;;;;;GAaG;AAEH,UAAU,SAAS;IACjB,QAAQ,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B,QAAQ,EAAE,IAAI,CAAC;IACf,iBAAiB,EAAE,IAAI,GAAG,IAAI,CAAC;IAC/B,eAAe,EAAE,IAAI,GAAG,IAAI,CAAC;IAE7B,cAAc,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAE1B,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;IAEtD,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,oBAAoB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACpE,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC;IAEvE,aAAa,EAAE,oBAAoB,CAAC,qBAAqB,CAAC;IAC1D,kBAAkB,EAAE,oBAAoB,CAAC,0BAA0B,CAAC;IAEpE,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,YAAY,EACZ,WAAW,EAEX,cAAc,EAEd,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EAEnB,aAAa,EACb,kBAAkB,EAElB,MAAM,EACN,WAAW,EACX,cAAc,EACd,cAAc,EAEd,SAAS,GACV,EAAE,SAAS,eA0IX"}

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

@@ -1,97 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import React, { useMemo } from 'react';
-import clsx from 'clsx';
-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({ 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 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
-    [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, 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 }, 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 isFocused = !!focusedDate && isSameDay(date, focusedDate);
-                const onlyOneSelected = !!rangeStartDate && !!rangeEndDate
-                    ? isSameDay(rangeStartDate, rangeEndDate)
-                    : !selectedStartDate || !selectedEndDate;
-                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 (!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),
-                            [styles['in-next-month']]: isAfter(date, baseDate),
-                        }) }));
-                }
-                const handlers = {};
-                if (isEnabled) {
-                    handlers.onClick = () => onSelectDate(date);
-                    handlers.onFocus = () => onFocusedDateChange(date);
-                }
-                // Can't be focused.
-                let tabIndex = undefined;
-                if (isFocusable && (isEnabled || isDisabledWithReason)) {
-                    // Next focus target.
-                    tabIndex = 0;
-                }
-                else if (isEnabled || isDisabledWithReason) {
-                    // Can be focused programmatically.
-                    tabIndex = -1;
-                }
-                // Screen-reader announcement for the focused day.
-                let dayAnnouncement = getDateLabel(locale, date, 'short');
-                if (isToday(date)) {
-                    dayAnnouncement += '. ' + todayAriaLabel;
-                }
-                return (React.createElement(GridCell, Object.assign({ ref: isFocused ? focusedDateRef : undefined, key: `${weekIndex}:${dateIndex}`, className: clsx(baseClasses, {
-                        [styles['in-visible-calendar']]: true,
-                        [styles.enabled]: isEnabled,
-                        [styles.selected]: isSelected,
-                        [styles['start-date']]: isStartDate,
-                        [styles['end-date']]: isEndDate,
-                        [styles['no-range']]: isSelected && onlyOneSelected,
-                        [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 || 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)));
-            })));
-        }))));
-}
-//# sourceMappingURL=monthly-grid.js.map

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

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