@cloudscape-design/components 3.0.0

package/date-range-picker/calendar/header/button/index.js

@@ -0,0 +1,18 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { InternalButton } from '../../../../button/internal';
+import styles from '../../../styles.css.js';
+var HeaderButton = function (_a) {
+    var ariaLabel = _a.ariaLabel, isPrevious = _a.isPrevious, onChangeMonth = _a.onChangeMonth, focusable = _a.focusable;
+    var iconName = isPrevious ? 'angle-left' : 'angle-right';
+    var additionalAttributes = {
+        className: isPrevious ? styles['calendar-prev-month-btn'] : styles['calendar-next-month-btn'],
+        tabIndex: focusable ? 0 : -1
+    };
+    var onClick = function () { return onChangeMonth(isPrevious); };
+    return (React.createElement(InternalButton, __assign({}, additionalAttributes, { iconName: iconName, ariaLabel: ariaLabel, variant: 'icon', onClick: onClick, formAction: "none" })));
+};
+export default HeaderButton;
+//# sourceMappingURL=index.js.map

package/date-range-picker/calendar/header/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/date-range-picker/calendar/header/button/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAS5C,IAAM,YAAY,GAAG,UAAC,EAAsE;QAApE,SAAS,eAAA,EAAE,UAAU,gBAAA,EAAE,aAAa,mBAAA,EAAE,SAAS,eAAA;IACrE,IAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC;IAC3D,IAAM,oBAAoB,GAA4C;QACpE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,yBAAyB,CAAC;QAC7F,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KAC7B,CAAC;IAEF,IAAM,OAAO,GAAG,cAAM,OAAA,aAAa,CAAC,UAAU,CAAC,EAAzB,CAAyB,CAAC;IAEhD,OAAO,CACL,oBAAC,cAAc,eACT,oBAAoB,IACxB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,OAAO,EAChB,UAAU,EAAC,MAAM,IACjB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { InternalButton } from '../../../../button/internal';\nimport styles from '../../../styles.css.js';\n\ninterface HeaderButtonProps {\n  ariaLabel: string;\n  isPrevious: boolean;\n  focusable: boolean;\n  onChangeMonth: (isPrevious: boolean) => void;\n}\n\nconst HeaderButton = ({ ariaLabel, isPrevious, onChangeMonth, focusable }: HeaderButtonProps) => {\n  const iconName = isPrevious ? 'angle-left' : 'angle-right';\n  const additionalAttributes: React.HTMLAttributes<HTMLButtonElement> = {\n    className: isPrevious ? styles['calendar-prev-month-btn'] : styles['calendar-next-month-btn'],\n    tabIndex: focusable ? 0 : -1,\n  };\n\n  const onClick = () => onChangeMonth(isPrevious);\n\n  return (\n    <InternalButton\n      {...additionalAttributes}\n      iconName={iconName}\n      ariaLabel={ariaLabel}\n      variant={'icon'}\n      onClick={onClick}\n      formAction=\"none\"\n    />\n  );\n};\n\nexport default HeaderButton;\n"]}

package/date-range-picker/calendar/header/index.d.ts

@@ -0,0 +1,12 @@
+interface CalendarHeaderProps {
+    baseDate: Date;
+    locale: string;
+    onChangeMonth: (prev?: boolean) => void;
+    previousMonthLabel: string;
+    nextMonthLabel: string;
+    calendarHasFocus: boolean;
+    isSingleGrid: boolean;
+}
+declare const CalendarHeader: ({ baseDate, locale, onChangeMonth, previousMonthLabel, nextMonthLabel, calendarHasFocus, isSingleGrid, }: CalendarHeaderProps) => JSX.Element;
+export default CalendarHeader;
+//# sourceMappingURL=index.d.ts.map

package/date-range-picker/calendar/header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/index.tsx"],"names":[],"mappings":"AAQA,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,gBAAgB,EAAE,OAAO,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,cAAc,6GAQjB,mBAAmB,gBAyBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/date-range-picker/calendar/header/index.js

@@ -0,0 +1,18 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { add } from 'date-fns';
+import React from 'react';
+import styles from '../../styles.css.js';
+import { renderMonthAndYear } from '../../../date-picker/calendar/utils/intl';
+import HeaderButton from './button';
+var CalendarHeader = function (_a) {
+    var baseDate = _a.baseDate, locale = _a.locale, onChangeMonth = _a.onChangeMonth, previousMonthLabel = _a.previousMonthLabel, nextMonthLabel = _a.nextMonthLabel, calendarHasFocus = _a.calendarHasFocus, isSingleGrid = _a.isSingleGrid;
+    return (React.createElement("div", { className: styles['calendar-header'] },
+        React.createElement(HeaderButton, { ariaLabel: previousMonthLabel, isPrevious: true, onChangeMonth: onChangeMonth, focusable: calendarHasFocus }),
+        React.createElement("div", { "aria-live": "polite", className: styles['calendar-header-months-wrapper'] },
+            !isSingleGrid && (React.createElement("div", { className: styles['calendar-header-month'] }, renderMonthAndYear(locale, add(baseDate, { months: -1 })))),
+            React.createElement("div", { className: styles['calendar-header-month'] }, renderMonthAndYear(locale, baseDate))),
+        React.createElement(HeaderButton, { ariaLabel: nextMonthLabel, isPrevious: false, onChangeMonth: onChangeMonth, focusable: calendarHasFocus })));
+};
+export default CalendarHeader;
+//# sourceMappingURL=index.js.map

package/date-range-picker/calendar/header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AAC9E,OAAO,YAAY,MAAM,UAAU,CAAC;AAYpC,IAAM,cAAc,GAAG,UAAC,EAQF;QAPpB,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,kBAAkB,wBAAA,EAClB,cAAc,oBAAA,EACd,gBAAgB,sBAAA,EAChB,YAAY,kBAAA;IAEZ,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;QACvC,oBAAC,YAAY,IACX,SAAS,EAAE,kBAAkB,EAC7B,UAAU,EAAE,IAAI,EAChB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,gBAAgB,GAC3B;QACF,0CAAe,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,gCAAgC,CAAC;YACxE,CAAC,YAAY,IAAI,CAChB,6BAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,IAC5C,kBAAkB,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CACtD,CACP;YACD,6BAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,IAAG,kBAAkB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAO,CACzF;QACN,oBAAC,YAAY,IACX,SAAS,EAAE,cAAc,EACzB,UAAU,EAAE,KAAK,EACjB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,gBAAgB,GAC3B,CACE,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 { add } from 'date-fns';\nimport React from 'react';\nimport styles from '../../styles.css.js';\nimport { renderMonthAndYear } from '../../../date-picker/calendar/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  calendarHasFocus: boolean;\n  isSingleGrid: boolean;\n}\n\nconst CalendarHeader = ({\n  baseDate,\n  locale,\n  onChangeMonth,\n  previousMonthLabel,\n  nextMonthLabel,\n  calendarHasFocus,\n  isSingleGrid,\n}: CalendarHeaderProps) => {\n  return (\n    <div className={styles['calendar-header']}>\n      <HeaderButton\n        ariaLabel={previousMonthLabel}\n        isPrevious={true}\n        onChangeMonth={onChangeMonth}\n        focusable={calendarHasFocus}\n      />\n      <div aria-live=\"polite\" className={styles['calendar-header-months-wrapper']}>\n        {!isSingleGrid && (\n          <div className={styles['calendar-header-month']}>\n            {renderMonthAndYear(locale, add(baseDate, { months: -1 }))}\n          </div>\n        )}\n        <div className={styles['calendar-header-month']}>{renderMonthAndYear(locale, baseDate)}</div>\n      </div>\n      <HeaderButton\n        ariaLabel={nextMonthLabel}\n        isPrevious={false}\n        onChangeMonth={onChangeMonth}\n        focusable={calendarHasFocus}\n      />\n    </div>\n  );\n};\n\nexport default CalendarHeader;\n"]}

package/date-range-picker/calendar/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { BaseComponentProps } from '../../internal/base-component';
+import { DateRangePickerProps, Focusable } from '../interfaces';
+import { TimeInputProps } from '../../time-input/interfaces';
+export interface DateChangeHandler {
+    (detail: Date): void;
+}
+export interface MonthChangeHandler {
+    (newMonth: Date): void;
+}
+export declare type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export interface CalendarProps extends BaseComponentProps {
+    locale: string;
+    startOfWeek: DayIndex;
+    isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;
+    onSelectDateRange: (value: DateRangePickerProps.AbsoluteValue) => void;
+    initialStartDate: string | undefined;
+    initialEndDate: string | undefined;
+    i18nStrings: DateRangePickerProps.I18nStrings;
+    dateOnly: boolean;
+    timeInputFormat: TimeInputProps.Format;
+    isSingleGrid: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<Focusable>>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/date-range-picker/calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAG5F,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAgBhE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAQ7D,MAAM,WAAW,iBAAiB;IAChC,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,CAAC,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAC;CACxB;AAED,oBAAY,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAMjD,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,QAAQ,CAAC;IACtB,aAAa,EAAE,oBAAoB,CAAC,qBAAqB,CAAC;IAC1D,iBAAiB,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,aAAa,KAAK,IAAI,CAAC;IACvE,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,WAAW,EAAE,oBAAoB,CAAC,WAAW,CAAC;IAC9C,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,cAAc,CAAC,MAAM,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;CACvB;;AAED,wBAAoC"}

package/date-range-picker/calendar/index.js

@@ -0,0 +1,224 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { addMonths, endOfDay, isBefore, startOfDay, startOfMonth, isAfter, isSameMonth } from 'date-fns';
+import styles from '../styles.css.js';
+import CalendarHeader from './header';
+import { Grids, selectFocusedDate } from './grids';
+import moveFocusHandler from '../../date-picker/calendar/utils/move-focus-handler';
+import { displayToIso, formatDate, formatTime, formatISOStringWithoutTimezone, isoToDisplay, parseDate, } from '../../date-picker/calendar/utils/date';
+import InternalSpaceBetween from '../../space-between/internal';
+import InternalFormField from '../../form-field/internal';
+import DateInput from '../../internal/components/date-input';
+import InternalTimeInput from '../../time-input/internal';
+import clsx from 'clsx';
+import { getBaseDate } from './get-base-date.js';
+import { useUniqueId } from '../../internal/hooks/use-unique-id';
+import { getDateLabel, renderTimeLabel } from '../../date-picker/calendar/utils/intl';
+import LiveRegion from '../../internal/components/live-region';
+export default forwardRef(Calendar);
+function Calendar(_a, ref) {
+    var _b;
+    var locale = _a.locale, startOfWeek = _a.startOfWeek, isDateEnabled = _a.isDateEnabled, onSelectDateRange = _a.onSelectDateRange, _c = _a.initialEndDate, initialEndDate = _c === void 0 ? '' : _c, _d = _a.initialStartDate, initialStartDate = _d === void 0 ? '' : _d, i18nStrings = _a.i18nStrings, dateOnly = _a.dateOnly, isSingleGrid = _a.isSingleGrid, timeInputFormat = _a.timeInputFormat;
+    var elementRef = useRef(null);
+    useImperativeHandle(ref, function () { return ({
+        focus: function () {
+            if (elementRef.current) {
+                var prevButton = elementRef.current.getElementsByClassName(styles['calendar-prev-month-btn'])[0];
+                prevButton === null || prevButton === void 0 ? void 0 : prevButton.focus();
+            }
+        }
+    }); });
+    var _e = initialStartDate.split('T'), _f = _e[0], initialStartDateString = _f === void 0 ? '' : _f, _g = _e[1], initialStartTimeString = _g === void 0 ? '' : _g;
+    var _h = initialEndDate.split('T'), _j = _h[0], initialEndDateString = _j === void 0 ? '' : _j, _k = _h[1], initialEndTimeString = _k === void 0 ? '' : _k;
+    var _l = useState(initialStartDateString), startDateString = _l[0], setStartDateString = _l[1];
+    var _m = useState(initialStartTimeString), startTimeString = _m[0], setStartTimeString = _m[1];
+    var _o = useState(initialEndDateString), endDateString = _o[0], setEndDateString = _o[1];
+    var _p = useState(initialEndTimeString), endTimeString = _p[0], setEndTimeString = _p[1];
+    var selectedStartDate = parseDate(startDateString, true);
+    var selectedEndDate = parseDate(endDateString, true);
+    var _q = useState(''), announcement = _q[0], setAnnouncement = _q[1];
+    var _r = useState(function () {
+        if (startDateString) {
+            var startDate = parseDate(startDateString);
+            if (isSingleGrid) {
+                return startOfMonth(startDate);
+            }
+            return startOfMonth(addMonths(startDate, 1));
+        }
+        if (endDateString) {
+            return startOfMonth(parseDate(endDateString));
+        }
+        return startOfMonth(Date.now());
+    }), currentMonth = _r[0], setCurrentMonth = _r[1];
+    var _s = useState(function () {
+        if (selectedStartDate) {
+            if (isSameMonth(selectedStartDate, currentMonth)) {
+                return selectedStartDate;
+            }
+            if (!isSingleGrid && isSameMonth(selectedStartDate, addMonths(currentMonth, -1))) {
+                return selectedStartDate;
+            }
+        }
+        return selectFocusedDate(selectedStartDate, currentMonth, isDateEnabled);
+    }), focusedDate = _s[0], setFocusedDate = _s[1];
+    useEffect(function () {
+        // This effect "synchronizes" the local state update back up to the overall DateRangePicker component
+        var startDate = formatISOStringWithoutTimezone(startDateString, startTimeString);
+        var endDate = formatISOStringWithoutTimezone(endDateString, endTimeString);
+        if (startDate !== initialStartDate || endDate !== initialEndDate) {
+            onSelectDateRange({
+                startDate: startDate,
+                endDate: endDate,
+                type: 'absolute'
+            });
+        }
+    }, [
+        startDateString,
+        startTimeString,
+        endDateString,
+        endTimeString,
+        onSelectDateRange,
+        initialStartDate,
+        initialEndDate,
+    ]);
+    var onSelectDateHandler = function (selectedDate) {
+        // recommended to include the start/end time announced with the selection
+        // because the user is not aware of the fact that a start/end time is also set as soon as they select a date
+        var announceStart = function (startDate) {
+            return (i18nStrings.startDateLabel +
+                ', ' +
+                getDateLabel(locale, startDate) +
+                ', ' +
+                i18nStrings.startTimeLabel +
+                ', ' +
+                renderTimeLabel(locale, startDate, timeInputFormat) +
+                '. ');
+        };
+        var announceEnd = function (endDate) {
+            return (i18nStrings.endDateLabel +
+                ', ' +
+                getDateLabel(locale, endDate) +
+                ', ' +
+                i18nStrings.endTimeLabel +
+                ', ' +
+                renderTimeLabel(locale, endDate, timeInputFormat) +
+                '. ');
+        };
+        var announceRange = function (startDate, endDate) {
+            if (!i18nStrings.renderSelectedAbsoluteRangeAriaLive) {
+                return "".concat(getDateLabel(locale, startDate), " \u2013 ").concat(getDateLabel(locale, endDate));
+            }
+            return i18nStrings.renderSelectedAbsoluteRangeAriaLive(getDateLabel(locale, startDate), getDateLabel(locale, endDate));
+        };
+        // If both fields are empty, we set the start date
+        if (!startDateString && !endDateString) {
+            var startDate = startOfDay(selectedDate);
+            setStartDateString(formatDate(startDate));
+            setStartTimeString(formatTime(startDate));
+            setAnnouncement(announceStart(startDate));
+            return;
+        }
+        // If both fields are set, we start new
+        if (startDateString && endDateString) {
+            var startDate = startOfDay(selectedDate);
+            setStartDateString(formatDate(startDate));
+            setStartTimeString(formatTime(startDate));
+            setEndDateString('');
+            setEndTimeString('');
+            setAnnouncement(announceStart(startDate));
+            return;
+        }
+        // If only the END date is empty, we fill it (and swap dates if needed)
+        if (startDateString && !endDateString) {
+            var parsedStartDate = parseDate(startDateString);
+            if (isBefore(selectedDate, parsedStartDate)) {
+                // The user has selected the range backwards, so we swap start and end
+                var startDate = startOfDay(selectedDate);
+                var endDate = endOfDay(parsedStartDate);
+                setStartDateString(formatDate(startDate));
+                setStartTimeString(formatTime(startDate));
+                setEndDateString(formatDate(endDate));
+                setEndTimeString(formatTime(endDate));
+                setAnnouncement(announceStart(startDate) + announceRange(startDate, endDate));
+            }
+            else {
+                var endDate = endOfDay(selectedDate);
+                setEndDateString(formatDate(endDate));
+                setEndTimeString(formatTime(endDate));
+                setAnnouncement(announceEnd(endDate) + announceRange(parsedStartDate, endDate));
+            }
+            return;
+        }
+        // If only the START date is empty, we fill it (and swap dates if needed)
+        if (!startDateString && endDateString) {
+            var existingEndDate = parseDate(endDateString);
+            if (isAfter(selectedDate, existingEndDate)) {
+                // The user has selected the range backwards, so we swap start and end
+                var startDate = startOfDay(existingEndDate);
+                var endDate = endOfDay(selectedDate);
+                setStartDateString(formatDate(startDate));
+                setStartTimeString(formatTime(startDate));
+                setEndDateString(formatDate(endDate));
+                setEndTimeString(formatTime(endDate));
+                setAnnouncement(announceEnd(endDate) + announceRange(startDate, endDate));
+            }
+            else {
+                var startDate = startOfDay(selectedDate);
+                setStartDateString(formatDate(startDate));
+                setStartTimeString(formatTime(startDate));
+                setAnnouncement(announceStart(startDate) + announceRange(startDate, existingEndDate));
+            }
+            return;
+        }
+        // All possible conditions are covered above
+    };
+    var onHeaderChangeMonthHandler = function (isPrevious) {
+        var newCurrentMonth = addMonths(currentMonth, isPrevious ? -1 : 1);
+        setCurrentMonth(newCurrentMonth);
+        var newBaseDateMonth = isSingleGrid ? newCurrentMonth : addMonths(newCurrentMonth, -1);
+        var newBaseDate = getBaseDate(newBaseDateMonth, 1, isDateEnabled);
+        setFocusedDate(newBaseDate);
+    };
+    var onChangeStartDate = function (e) {
+        var isoDateString = displayToIso(e.detail.value);
+        setStartDateString(isoDateString);
+        if (isoDateString.length >= 8) {
+            var newCurrentMonth = startOfMonth(parseDate(isoDateString));
+            setCurrentMonth(isSingleGrid ? newCurrentMonth : addMonths(newCurrentMonth, 1));
+        }
+    };
+    var onChangeEndDate = function (e) {
+        var isoDateString = displayToIso(e.detail.value);
+        setEndDateString(isoDateString);
+    };
+    var constrainttextId = useUniqueId('awsui-area-date-range-picker');
+    constrainttextId = i18nStrings.dateTimeConstraintText ? constrainttextId : '';
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InternalSpaceBetween, { size: "m" },
+            React.createElement("div", { className: clsx(styles.calendar, (_b = {},
+                    _b[styles['one-grid']] = isSingleGrid,
+                    _b)), role: "application", ref: elementRef },
+                React.createElement(CalendarHeader, { baseDate: currentMonth, locale: locale, onChangeMonth: onHeaderChangeMonthHandler, previousMonthLabel: i18nStrings.previousMonthAriaLabel, nextMonthLabel: i18nStrings.nextMonthAriaLabel, calendarHasFocus: true, isSingleGrid: isSingleGrid }),
+                React.createElement(Grids, { isSingleGrid: isSingleGrid, locale: locale, baseDate: currentMonth, focusedDate: focusedDate, onFocusedDateChange: setFocusedDate, isDateEnabled: isDateEnabled, onSelectDate: onSelectDateHandler, onChangeMonth: setCurrentMonth, startOfWeek: startOfWeek, todayAriaLabel: i18nStrings.todayAriaLabel, selectedStartDate: selectedStartDate, selectedEndDate: selectedEndDate, handleFocusMove: moveFocusHandler })),
+            React.createElement(InternalSpaceBetween, { direction: "vertical", size: "xxs" },
+                React.createElement(InternalSpaceBetween, { size: "xs", direction: isSingleGrid ? 'vertical' : 'horizontal' },
+                    React.createElement("div", { className: styles['date-and-time-wrapper'] },
+                        React.createElement("div", { className: styles['date-and-time-wrapper__date'] },
+                            React.createElement(InternalFormField, { label: i18nStrings.startDateLabel, stretch: true },
+                                React.createElement(DateInput, { value: isoToDisplay(startDateString), autoComplete: false, disableBrowserAutocorrect: true, disableAutocompleteOnBlur: false, className: styles['start-date-input'], onChange: onChangeStartDate, placeholder: "YYYY/MM/DD", ariaDescribedby: constrainttextId }))),
+                        !dateOnly && (React.createElement("div", { className: styles['date-and-time-wrapper__time'] },
+                            React.createElement(InternalFormField, { label: i18nStrings.startTimeLabel, stretch: true },
+                                React.createElement(InternalTimeInput, { value: startTimeString, onChange: function (e) { return setStartTimeString(e.detail.value); }, format: timeInputFormat, placeholder: timeInputFormat, className: styles['start-time-input'], ariaDescribedby: constrainttextId }))))),
+                    React.createElement("div", { className: styles['date-and-time-wrapper'] },
+                        React.createElement("div", { className: styles['date-and-time-wrapper__date'] },
+                            React.createElement(InternalFormField, { label: i18nStrings.endDateLabel, stretch: true },
+                                React.createElement(DateInput, { value: isoToDisplay(endDateString), autoComplete: false, disableBrowserAutocorrect: true, disableAutocompleteOnBlur: false, className: styles['end-date-input'], onChange: onChangeEndDate, placeholder: "YYYY/MM/DD", ariaDescribedby: constrainttextId }))),
+                        !dateOnly && (React.createElement("div", { className: styles['date-and-time-wrapper__time'] },
+                            React.createElement(InternalFormField, { label: i18nStrings.endTimeLabel, stretch: true },
+                                React.createElement(InternalTimeInput, { value: endTimeString, onChange: function (e) { return setEndTimeString(e.detail.value); }, format: timeInputFormat, placeholder: timeInputFormat, className: styles['end-time-input'], ariaDescribedby: constrainttextId })))))),
+                i18nStrings.dateTimeConstraintText && (React.createElement("div", { className: styles['date-and-time-constrainttext'], id: constrainttextId }, i18nStrings.dateTimeConstraintText)))),
+        React.createElement(LiveRegion, null,
+            React.createElement("span", { className: styles['calendar-aria-live'] }, announcement))));
+}
+//# sourceMappingURL=index.js.map

package/date-range-picker/calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/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, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { addMonths, endOfDay, isBefore, startOfDay, startOfMonth, isAfter, isSameMonth } from 'date-fns';\nimport styles from '../styles.css.js';\nimport { BaseComponentProps } from '../../internal/base-component';\nimport { DateRangePickerProps, Focusable } from '../interfaces';\nimport CalendarHeader from './header';\nimport { Grids, selectFocusedDate } from './grids';\nimport moveFocusHandler from '../../date-picker/calendar/utils/move-focus-handler';\nimport {\n  displayToIso,\n  formatDate,\n  formatTime,\n  formatISOStringWithoutTimezone,\n  isoToDisplay,\n  parseDate,\n} from '../../date-picker/calendar/utils/date';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport InternalFormField from '../../form-field/internal';\nimport { InputProps } from '../../input/interfaces';\nimport DateInput from '../../internal/components/date-input';\nimport { TimeInputProps } from '../../time-input/interfaces';\nimport InternalTimeInput from '../../time-input/internal';\nimport clsx from 'clsx';\nimport { getBaseDate } from './get-base-date.js';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { getDateLabel, renderTimeLabel } from '../../date-picker/calendar/utils/intl';\nimport LiveRegion from '../../internal/components/live-region';\n\nexport interface DateChangeHandler {\n  (detail: Date): void;\n}\n\nexport interface MonthChangeHandler {\n  (newMonth: Date): void;\n}\n\nexport type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface HeaderChangeMonthHandler {\n  (isPreviousButtonClick?: boolean): void;\n}\n\nexport interface CalendarProps extends BaseComponentProps {\n  locale: string;\n  startOfWeek: DayIndex;\n  isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;\n  onSelectDateRange: (value: DateRangePickerProps.AbsoluteValue) => void;\n  initialStartDate: string | undefined;\n  initialEndDate: string | undefined;\n  i18nStrings: DateRangePickerProps.I18nStrings;\n  dateOnly: boolean;\n  timeInputFormat: TimeInputProps.Format;\n  isSingleGrid: boolean;\n}\n\nexport default forwardRef(Calendar);\n\nfunction Calendar(\n  {\n    locale,\n    startOfWeek,\n    isDateEnabled,\n    onSelectDateRange,\n    initialEndDate = '',\n    initialStartDate = '',\n    i18nStrings,\n    dateOnly,\n    isSingleGrid,\n    timeInputFormat,\n  }: CalendarProps,\n  ref: React.Ref<Focusable>\n) {\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    focus() {\n      if (elementRef.current) {\n        const prevButton = elementRef.current.getElementsByClassName(styles['calendar-prev-month-btn'])[0];\n        (prevButton as undefined | HTMLButtonElement)?.focus();\n      }\n    },\n  }));\n\n  const [initialStartDateString = '', initialStartTimeString = ''] = initialStartDate.split('T');\n  const [initialEndDateString = '', initialEndTimeString = ''] = initialEndDate.split('T');\n\n  const [startDateString, setStartDateString] = useState(initialStartDateString);\n  const [startTimeString, setStartTimeString] = useState(initialStartTimeString);\n\n  const [endDateString, setEndDateString] = useState(initialEndDateString);\n  const [endTimeString, setEndTimeString] = useState(initialEndTimeString);\n\n  const selectedStartDate = parseDate(startDateString, true);\n  const selectedEndDate = parseDate(endDateString, true);\n\n  const [announcement, setAnnouncement] = useState('');\n\n  const [currentMonth, setCurrentMonth] = useState(() => {\n    if (startDateString) {\n      const startDate = parseDate(startDateString);\n      if (isSingleGrid) {\n        return startOfMonth(startDate);\n      }\n      return startOfMonth(addMonths(startDate, 1));\n    }\n    if (endDateString) {\n      return startOfMonth(parseDate(endDateString));\n    }\n    return startOfMonth(Date.now());\n  });\n\n  const [focusedDate, setFocusedDate] = useState<Date | null>(() => {\n    if (selectedStartDate) {\n      if (isSameMonth(selectedStartDate, currentMonth)) {\n        return selectedStartDate;\n      }\n      if (!isSingleGrid && isSameMonth(selectedStartDate, addMonths(currentMonth, -1))) {\n        return selectedStartDate;\n      }\n    }\n    return selectFocusedDate(selectedStartDate, currentMonth, isDateEnabled);\n  });\n\n  useEffect(() => {\n    // This effect \"synchronizes\" the local state update back up to the overall DateRangePicker component\n\n    const startDate = formatISOStringWithoutTimezone(startDateString, startTimeString);\n    const endDate = formatISOStringWithoutTimezone(endDateString, endTimeString);\n\n    if (startDate !== initialStartDate || endDate !== initialEndDate) {\n      onSelectDateRange({\n        startDate,\n        endDate,\n        type: 'absolute',\n      });\n    }\n  }, [\n    startDateString,\n    startTimeString,\n    endDateString,\n    endTimeString,\n    onSelectDateRange,\n    initialStartDate,\n    initialEndDate,\n  ]);\n\n  const onSelectDateHandler = (selectedDate: Date) => {\n    // recommended to include the start/end time announced with the selection\n    // because the user is not aware of the fact that a start/end time is also set as soon as they select a date\n    const announceStart = (startDate: Date) => {\n      return (\n        i18nStrings.startDateLabel +\n        ', ' +\n        getDateLabel(locale, startDate) +\n        ', ' +\n        i18nStrings.startTimeLabel +\n        ', ' +\n        renderTimeLabel(locale, startDate, timeInputFormat) +\n        '. '\n      );\n    };\n\n    const announceEnd = (endDate: Date) => {\n      return (\n        i18nStrings.endDateLabel +\n        ', ' +\n        getDateLabel(locale, endDate) +\n        ', ' +\n        i18nStrings.endTimeLabel +\n        ', ' +\n        renderTimeLabel(locale, endDate, timeInputFormat) +\n        '. '\n      );\n    };\n\n    const announceRange = (startDate: Date, endDate: Date) => {\n      if (!i18nStrings.renderSelectedAbsoluteRangeAriaLive) {\n        return `${getDateLabel(locale, startDate)} – ${getDateLabel(locale, endDate)}`;\n      }\n      return i18nStrings.renderSelectedAbsoluteRangeAriaLive(\n        getDateLabel(locale, startDate),\n        getDateLabel(locale, endDate)\n      );\n    };\n\n    // If both fields are empty, we set the start date\n    if (!startDateString && !endDateString) {\n      const startDate = startOfDay(selectedDate);\n      setStartDateString(formatDate(startDate));\n      setStartTimeString(formatTime(startDate));\n      setAnnouncement(announceStart(startDate));\n      return;\n    }\n\n    // If both fields are set, we start new\n    if (startDateString && endDateString) {\n      const startDate = startOfDay(selectedDate);\n      setStartDateString(formatDate(startDate));\n      setStartTimeString(formatTime(startDate));\n\n      setEndDateString('');\n      setEndTimeString('');\n      setAnnouncement(announceStart(startDate));\n      return;\n    }\n\n    // If only the END date is empty, we fill it (and swap dates if needed)\n    if (startDateString && !endDateString) {\n      const parsedStartDate = parseDate(startDateString);\n\n      if (isBefore(selectedDate, parsedStartDate)) {\n        // The user has selected the range backwards, so we swap start and end\n\n        const startDate = startOfDay(selectedDate);\n        const endDate = endOfDay(parsedStartDate);\n\n        setStartDateString(formatDate(startDate));\n        setStartTimeString(formatTime(startDate));\n\n        setEndDateString(formatDate(endDate));\n        setEndTimeString(formatTime(endDate));\n        setAnnouncement(announceStart(startDate) + announceRange(startDate, endDate));\n      } else {\n        const endDate = endOfDay(selectedDate);\n        setEndDateString(formatDate(endDate));\n        setEndTimeString(formatTime(endDate));\n        setAnnouncement(announceEnd(endDate) + announceRange(parsedStartDate, endDate));\n      }\n      return;\n    }\n\n    // If only the START date is empty, we fill it (and swap dates if needed)\n    if (!startDateString && endDateString) {\n      const existingEndDate = parseDate(endDateString);\n\n      if (isAfter(selectedDate, existingEndDate)) {\n        // The user has selected the range backwards, so we swap start and end\n\n        const startDate = startOfDay(existingEndDate);\n        const endDate = endOfDay(selectedDate);\n\n        setStartDateString(formatDate(startDate));\n        setStartTimeString(formatTime(startDate));\n\n        setEndDateString(formatDate(endDate));\n        setEndTimeString(formatTime(endDate));\n        setAnnouncement(announceEnd(endDate) + announceRange(startDate, endDate));\n      } else {\n        const startDate = startOfDay(selectedDate);\n        setStartDateString(formatDate(startDate));\n        setStartTimeString(formatTime(startDate));\n        setAnnouncement(announceStart(startDate) + announceRange(startDate, existingEndDate));\n      }\n      return;\n    }\n    // All possible conditions are covered above\n  };\n\n  const onHeaderChangeMonthHandler: HeaderChangeMonthHandler = isPrevious => {\n    const newCurrentMonth = addMonths(currentMonth, isPrevious ? -1 : 1);\n    setCurrentMonth(newCurrentMonth);\n\n    const newBaseDateMonth = isSingleGrid ? newCurrentMonth : addMonths(newCurrentMonth, -1);\n    const newBaseDate = getBaseDate(newBaseDateMonth, 1, isDateEnabled);\n    setFocusedDate(newBaseDate);\n  };\n\n  const onChangeStartDate: InputProps['onChange'] = e => {\n    const isoDateString = displayToIso(e.detail.value);\n    setStartDateString(isoDateString);\n\n    if (isoDateString.length >= 8) {\n      const newCurrentMonth = startOfMonth(parseDate(isoDateString));\n      setCurrentMonth(isSingleGrid ? newCurrentMonth : addMonths(newCurrentMonth, 1));\n    }\n  };\n\n  const onChangeEndDate: InputProps['onChange'] = e => {\n    const isoDateString = displayToIso(e.detail.value);\n    setEndDateString(isoDateString);\n  };\n\n  let constrainttextId = useUniqueId('awsui-area-date-range-picker');\n  constrainttextId = i18nStrings.dateTimeConstraintText ? constrainttextId : '';\n\n  return (\n    <>\n      <InternalSpaceBetween size=\"m\">\n        <div\n          className={clsx(styles.calendar, {\n            [styles['one-grid']]: isSingleGrid,\n          })}\n          role=\"application\"\n          ref={elementRef}\n        >\n          <CalendarHeader\n            baseDate={currentMonth}\n            locale={locale}\n            onChangeMonth={onHeaderChangeMonthHandler}\n            previousMonthLabel={i18nStrings.previousMonthAriaLabel}\n            nextMonthLabel={i18nStrings.nextMonthAriaLabel}\n            calendarHasFocus={true}\n            isSingleGrid={isSingleGrid}\n          />\n\n          <Grids\n            isSingleGrid={isSingleGrid}\n            locale={locale}\n            baseDate={currentMonth}\n            focusedDate={focusedDate}\n            onFocusedDateChange={setFocusedDate}\n            isDateEnabled={isDateEnabled}\n            onSelectDate={onSelectDateHandler}\n            onChangeMonth={setCurrentMonth}\n            startOfWeek={startOfWeek}\n            todayAriaLabel={i18nStrings.todayAriaLabel}\n            selectedStartDate={selectedStartDate}\n            selectedEndDate={selectedEndDate}\n            handleFocusMove={moveFocusHandler}\n          />\n        </div>\n        <InternalSpaceBetween direction=\"vertical\" size=\"xxs\">\n          <InternalSpaceBetween size=\"xs\" direction={isSingleGrid ? 'vertical' : 'horizontal'}>\n            <div className={styles['date-and-time-wrapper']}>\n              <div className={styles['date-and-time-wrapper__date']}>\n                <InternalFormField label={i18nStrings.startDateLabel} stretch={true}>\n                  <DateInput\n                    value={isoToDisplay(startDateString)}\n                    autoComplete={false}\n                    disableBrowserAutocorrect={true}\n                    disableAutocompleteOnBlur={false}\n                    className={styles['start-date-input']}\n                    onChange={onChangeStartDate}\n                    placeholder=\"YYYY/MM/DD\"\n                    ariaDescribedby={constrainttextId}\n                  />\n                </InternalFormField>\n              </div>\n              {!dateOnly && (\n                <div className={styles['date-and-time-wrapper__time']}>\n                  <InternalFormField label={i18nStrings.startTimeLabel} stretch={true}>\n                    <InternalTimeInput\n                      value={startTimeString}\n                      onChange={e => setStartTimeString(e.detail.value)}\n                      format={timeInputFormat}\n                      placeholder={timeInputFormat}\n                      className={styles['start-time-input']}\n                      ariaDescribedby={constrainttextId}\n                    />\n                  </InternalFormField>\n                </div>\n              )}\n            </div>\n\n            <div className={styles['date-and-time-wrapper']}>\n              <div className={styles['date-and-time-wrapper__date']}>\n                <InternalFormField label={i18nStrings.endDateLabel} stretch={true}>\n                  <DateInput\n                    value={isoToDisplay(endDateString)}\n                    autoComplete={false}\n                    disableBrowserAutocorrect={true}\n                    disableAutocompleteOnBlur={false}\n                    className={styles['end-date-input']}\n                    onChange={onChangeEndDate}\n                    placeholder=\"YYYY/MM/DD\"\n                    ariaDescribedby={constrainttextId}\n                  />\n                </InternalFormField>\n              </div>\n              {!dateOnly && (\n                <div className={styles['date-and-time-wrapper__time']}>\n                  <InternalFormField label={i18nStrings.endTimeLabel} stretch={true}>\n                    <InternalTimeInput\n                      value={endTimeString}\n                      onChange={e => setEndTimeString(e.detail.value)}\n                      format={timeInputFormat}\n                      placeholder={timeInputFormat}\n                      className={styles['end-time-input']}\n                      ariaDescribedby={constrainttextId}\n                    />\n                  </InternalFormField>\n                </div>\n              )}\n            </div>\n          </InternalSpaceBetween>\n          {i18nStrings.dateTimeConstraintText && (\n            <div className={styles['date-and-time-constrainttext']} id={constrainttextId}>\n              {i18nStrings.dateTimeConstraintText}\n            </div>\n          )}\n        </InternalSpaceBetween>\n      </InternalSpaceBetween>\n      <LiveRegion>\n        <span className={styles['calendar-aria-live']}>{announcement}</span>\n      </LiveRegion>\n    </>\n  );\n}\n"]}

package/date-range-picker/dropdown.d.ts

@@ -0,0 +1,13 @@
+import { DateRangePickerProps } from './interfaces';
+import { DayIndex } from './calendar';
+export interface DateRangePickerDropdownProps extends Pick<Required<DateRangePickerProps>, 'locale' | 'isDateEnabled' | 'isValidRange' | 'value' | 'relativeOptions' | 'showClearButton' | 'i18nStrings' | 'dateOnly' | 'timeInputFormat' | 'rangeSelectorMode'> {
+    onClear: () => void;
+    onApply: (value: null | DateRangePickerProps.Value) => DateRangePickerProps.ValidationResult;
+    startOfWeek: DayIndex;
+    onDropdownClose: () => void;
+    isSingleGrid: boolean;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+}
+export declare function DateRangePickerDropdown({ locale, startOfWeek, isDateEnabled, isValidRange, value, onClear: clearValue, onApply: applyValue, onDropdownClose, relativeOptions, showClearButton, isSingleGrid, i18nStrings, dateOnly, timeInputFormat, rangeSelectorMode, ariaLabelledby, ariaDescribedby, }: DateRangePickerDropdownProps): JSX.Element;
+//# sourceMappingURL=dropdown.d.ts.map

package/date-range-picker/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/date-range-picker/dropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAa,MAAM,cAAc,CAAC;AAC/D,OAAiB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAiChD,MAAM,WAAW,4BACf,SAAQ,IAAI,CACV,QAAQ,CAAC,oBAAoB,CAAC,EAC5B,QAAQ,GACR,eAAe,GACf,cAAc,GACd,OAAO,GACP,iBAAiB,GACjB,iBAAiB,GACjB,aAAa,GACb,UAAU,GACV,iBAAiB,GACjB,mBAAmB,CACtB;IACD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,oBAAoB,CAAC,KAAK,KAAK,oBAAoB,CAAC,gBAAgB,CAAC;IAC7F,WAAW,EAAE,QAAQ,CAAC;IACtB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAmBD,wBAAgB,uBAAuB,CAAC,EACtC,MAAW,EACX,WAAW,EACX,aAAa,EACb,YAAY,EACZ,KAAK,EACL,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,UAAU,EACnB,eAAe,EACf,eAAe,EACf,eAAe,EACf,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,eAAe,GAChB,EAAE,4BAA4B,eAwL9B"}

package/date-range-picker/dropdown.js

@@ -0,0 +1,117 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef, useState } from 'react';
+import Calendar from './calendar';
+import { InternalButton } from '../button/internal';
+import TabTrap from '../internal/components/tab-trap';
+import InternalBox from '../box/internal';
+import SpaceBetween from '../space-between/index.js';
+import styles from './styles.css.js';
+import RelativeRangePicker from './relative-range';
+import ModeSwitcher from './mode-switcher';
+import clsx from 'clsx';
+import InternalAlert from '../alert/internal';
+import LiveRegion from '../internal/components/live-region';
+import useFocusVisible from '../internal/hooks/focus-visible';
+var VALID_RANGE = { valid: true };
+/**
+ * This function fills in a start and end time if they are missing.
+ */
+function fillMissingTime(value) {
+    if (!value) {
+        return value;
+    }
+    var _a = value.startDate.split('T'), startDate = _a[0], startTime = _a[1];
+    var _b = value.endDate.split('T'), endDate = _b[0], endTime = _b[1];
+    return __assign(__assign({}, value), { startDate: startTime ? value.startDate : "".concat(startDate, "T00:00:00"), endDate: endTime ? value.endDate : "".concat(endDate, "T23:59:59") });
+}
+function getDefaultMode(value, relativeOptions, rangeSelectorMode) {
+    if (value && value.type) {
+        return value.type;
+    }
+    if (rangeSelectorMode === 'relative-only') {
+        return 'relative';
+    }
+    if (rangeSelectorMode === 'absolute-only') {
+        return 'absolute';
+    }
+    return relativeOptions.length > 0 ? 'relative' : 'absolute';
+}
+export function DateRangePickerDropdown(_a) {
+    var _b, _c;
+    var _d = _a.locale, locale = _d === void 0 ? '' : _d, startOfWeek = _a.startOfWeek, isDateEnabled = _a.isDateEnabled, isValidRange = _a.isValidRange, value = _a.value, clearValue = _a.onClear, applyValue = _a.onApply, onDropdownClose = _a.onDropdownClose, relativeOptions = _a.relativeOptions, showClearButton = _a.showClearButton, isSingleGrid = _a.isSingleGrid, i18nStrings = _a.i18nStrings, dateOnly = _a.dateOnly, timeInputFormat = _a.timeInputFormat, rangeSelectorMode = _a.rangeSelectorMode, ariaLabelledby = _a.ariaLabelledby, ariaDescribedby = _a.ariaDescribedby;
+    var focusVisible = useFocusVisible();
+    var scrollableContainerRef = useRef(null);
+    var applyButtonRef = useRef(null);
+    var _e = useState(getDefaultMode(value, relativeOptions, rangeSelectorMode)), rangeSelectionMode = _e[0], setRangeSelectionMode = _e[1];
+    var _f = useState((value === null || value === void 0 ? void 0 : value.type) === 'absolute' ? value : null), selectedAbsoluteRange = _f[0], setSelectedAbsoluteRange = _f[1];
+    var _g = useState((value === null || value === void 0 ? void 0 : value.type) === 'relative' ? value : null), selectedRelativeRange = _g[0], setSelectedRelativeRange = _g[1];
+    var _h = useState(false), applyClicked = _h[0], setApplyClicked = _h[1];
+    var _j = useState(VALID_RANGE), validationResult = _j[0], setValidationResult = _j[1];
+    var closeDropdown = function () {
+        setApplyClicked(false);
+        onDropdownClose();
+    };
+    var onClear = function () {
+        closeDropdown();
+        clearValue();
+    };
+    var onApply = function () {
+        var newValue = rangeSelectionMode === 'relative' ? selectedRelativeRange : fillMissingTime(selectedAbsoluteRange);
+        var newValidationResult = applyValue(newValue);
+        if (newValidationResult.valid === false) {
+            setApplyClicked(true);
+            setValidationResult(newValidationResult);
+        }
+        else {
+            setApplyClicked(false);
+            closeDropdown();
+        }
+    };
+    useEffect(function () {
+        if (applyClicked) {
+            var visibleRange = rangeSelectionMode === 'relative' ? selectedRelativeRange : fillMissingTime(selectedAbsoluteRange);
+            var newValidationResult = isValidRange(visibleRange);
+            setValidationResult(newValidationResult || VALID_RANGE);
+        }
+    }, [applyClicked, isValidRange, rangeSelectionMode, selectedRelativeRange, selectedAbsoluteRange]);
+    var focusRefs = {
+        "default": useRef(null),
+        'absolute-only': useRef(null),
+        'relative-only': useRef(null)
+    };
+    useEffect(function () { var _a; return (_a = scrollableContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, [scrollableContainerRef]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TabTrap, { focusNextCallback: function () { var _a; return (_a = applyButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }),
+        React.createElement("div", __assign({}, focusVisible, { ref: scrollableContainerRef, className: styles.dropdown, tabIndex: 0, role: "dialog", "aria-modal": "true", "aria-label": i18nStrings.ariaLabel, "aria-labelledby": ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : i18nStrings.ariaLabelledby, "aria-describedby": ariaDescribedby !== null && ariaDescribedby !== void 0 ? ariaDescribedby : i18nStrings.ariaDescribedby }),
+            React.createElement("div", { className: clsx(styles['dropdown-content'], (_b = {},
+                    _b[styles['one-grid']] = isSingleGrid,
+                    _b)) },
+                React.createElement(SpaceBetween, { size: "l" },
+                    React.createElement(InternalBox, { padding: { top: 'm', horizontal: 'l' } },
+                        React.createElement(SpaceBetween, { direction: "vertical", size: "s" },
+                            rangeSelectorMode === 'default' && (React.createElement(ModeSwitcher, { ref: focusRefs["default"], mode: rangeSelectionMode, onChange: function (mode) {
+                                    setRangeSelectionMode(mode);
+                                    setApplyClicked(false);
+                                    setValidationResult(VALID_RANGE);
+                                }, i18nStrings: i18nStrings })),
+                            rangeSelectionMode === 'absolute' && (React.createElement(Calendar, { ref: focusRefs['absolute-only'], isSingleGrid: isSingleGrid, initialEndDate: selectedAbsoluteRange === null || selectedAbsoluteRange === void 0 ? void 0 : selectedAbsoluteRange.endDate, initialStartDate: selectedAbsoluteRange === null || selectedAbsoluteRange === void 0 ? void 0 : selectedAbsoluteRange.startDate, locale: locale, startOfWeek: startOfWeek, isDateEnabled: isDateEnabled, i18nStrings: i18nStrings, onSelectDateRange: setSelectedAbsoluteRange, dateOnly: dateOnly, timeInputFormat: timeInputFormat })),
+                            rangeSelectionMode === 'relative' && (React.createElement(RelativeRangePicker, { ref: focusRefs['relative-only'], isSingleGrid: isSingleGrid, options: relativeOptions, dateOnly: dateOnly, initialSelection: selectedRelativeRange, onChange: function (range) { return setSelectedRelativeRange(range); }, i18nStrings: i18nStrings }))),
+                        React.createElement(InternalBox, { className: styles['validation-section'], margin: !validationResult.valid ? { top: 's' } : undefined }, !validationResult.valid && (React.createElement(React.Fragment, null,
+                            React.createElement(InternalAlert, { type: "error" },
+                                React.createElement("span", { className: styles['validation-error'] }, validationResult.errorMessage)),
+                            React.createElement(LiveRegion, null, validationResult.errorMessage))))),
+                    React.createElement("div", { className: clsx(styles.footer, (_c = {},
+                            _c[styles['one-grid']] = isSingleGrid,
+                            _c[styles['has-clear-button']] = showClearButton,
+                            _c)) },
+                        showClearButton && (React.createElement("div", { className: styles['footer-button-wrapper'] },
+                            React.createElement(InternalButton, { onClick: onClear, className: styles['clear-button'], variant: "link", formAction: "none" }, i18nStrings.clearButtonLabel))),
+                        React.createElement("div", { className: styles['footer-button-wrapper'] },
+                            React.createElement(SpaceBetween, { size: "xs", direction: "horizontal" },
+                                React.createElement(InternalButton, { onClick: closeDropdown, className: styles['cancel-button'], variant: "link", formAction: "none" }, i18nStrings.cancelButtonLabel),
+                                React.createElement(InternalButton, { onClick: onApply, className: styles['apply-button'], ref: applyButtonRef, formAction: "none" }, i18nStrings.applyButtonLabel))))),
+                React.createElement(TabTrap, { focusNextCallback: function () { var _a; return (_a = scrollableContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } })))));
+}
+//# sourceMappingURL=dropdown.js.map

package/date-range-picker/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/date-range-picker/dropdown.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, { useEffect, useRef, useState } from 'react';\nimport { DateRangePickerProps, Focusable } from './interfaces';\nimport Calendar, { DayIndex } from './calendar';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport TabTrap from '../internal/components/tab-trap';\nimport InternalBox from '../box/internal';\nimport SpaceBetween from '../space-between/index.js';\n\nimport styles from './styles.css.js';\nimport RelativeRangePicker from './relative-range';\nimport ModeSwitcher from './mode-switcher';\nimport clsx from 'clsx';\nimport InternalAlert from '../alert/internal';\nimport LiveRegion from '../internal/components/live-region';\nimport useFocusVisible from '../internal/hooks/focus-visible';\n\nconst VALID_RANGE: DateRangePickerProps.ValidRangeResult = { valid: true };\n\n/**\n * This function fills in a start and end time if they are missing.\n */\nfunction fillMissingTime(value: DateRangePickerProps.AbsoluteValue | null) {\n  if (!value) {\n    return value;\n  }\n  const [startDate, startTime] = value.startDate.split('T');\n  const [endDate, endTime] = value.endDate.split('T');\n  return {\n    ...value,\n    startDate: startTime ? value.startDate : `${startDate}T00:00:00`,\n    endDate: endTime ? value.endDate : `${endDate}T23:59:59`,\n  };\n}\n\nexport interface DateRangePickerDropdownProps\n  extends Pick<\n    Required<DateRangePickerProps>,\n    | 'locale'\n    | 'isDateEnabled'\n    | 'isValidRange'\n    | 'value'\n    | 'relativeOptions'\n    | 'showClearButton'\n    | 'i18nStrings'\n    | 'dateOnly'\n    | 'timeInputFormat'\n    | 'rangeSelectorMode'\n  > {\n  onClear: () => void;\n  onApply: (value: null | DateRangePickerProps.Value) => DateRangePickerProps.ValidationResult;\n  startOfWeek: DayIndex;\n  onDropdownClose: () => void;\n  isSingleGrid: boolean;\n\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n}\n\nfunction getDefaultMode(\n  value: null | DateRangePickerProps.Value,\n  relativeOptions: readonly DateRangePickerProps.RelativeOption[],\n  rangeSelectorMode: DateRangePickerProps.RangeSelectorMode\n) {\n  if (value && value.type) {\n    return value.type;\n  }\n  if (rangeSelectorMode === 'relative-only') {\n    return 'relative';\n  }\n  if (rangeSelectorMode === 'absolute-only') {\n    return 'absolute';\n  }\n  return relativeOptions.length > 0 ? 'relative' : 'absolute';\n}\n\nexport function DateRangePickerDropdown({\n  locale = '',\n  startOfWeek,\n  isDateEnabled,\n  isValidRange,\n  value,\n  onClear: clearValue,\n  onApply: applyValue,\n  onDropdownClose,\n  relativeOptions,\n  showClearButton,\n  isSingleGrid,\n  i18nStrings,\n  dateOnly,\n  timeInputFormat,\n  rangeSelectorMode,\n  ariaLabelledby,\n  ariaDescribedby,\n}: DateRangePickerDropdownProps) {\n  const focusVisible = useFocusVisible();\n  const scrollableContainerRef = useRef<HTMLDivElement | null>(null);\n  const applyButtonRef = useRef<ButtonProps.Ref>(null);\n\n  const [rangeSelectionMode, setRangeSelectionMode] = useState<'absolute' | 'relative'>(\n    getDefaultMode(value, relativeOptions, rangeSelectorMode)\n  );\n\n  const [selectedAbsoluteRange, setSelectedAbsoluteRange] = useState<DateRangePickerProps.AbsoluteValue | null>(\n    value?.type === 'absolute' ? value : null\n  );\n\n  const [selectedRelativeRange, setSelectedRelativeRange] = useState<DateRangePickerProps.RelativeValue | null>(\n    value?.type === 'relative' ? value : null\n  );\n\n  const [applyClicked, setApplyClicked] = useState<boolean>(false);\n\n  const [validationResult, setValidationResult] = useState<\n    DateRangePickerProps.ValidRangeResult | DateRangePickerProps.InvalidRangeResult\n  >(VALID_RANGE);\n\n  const closeDropdown = () => {\n    setApplyClicked(false);\n    onDropdownClose();\n  };\n\n  const onClear = () => {\n    closeDropdown();\n    clearValue();\n  };\n\n  const onApply = () => {\n    const newValue = rangeSelectionMode === 'relative' ? selectedRelativeRange : fillMissingTime(selectedAbsoluteRange);\n    const newValidationResult = applyValue(newValue);\n    if (newValidationResult.valid === false) {\n      setApplyClicked(true);\n      setValidationResult(newValidationResult);\n    } else {\n      setApplyClicked(false);\n      closeDropdown();\n    }\n  };\n\n  useEffect(() => {\n    if (applyClicked) {\n      const visibleRange =\n        rangeSelectionMode === 'relative' ? selectedRelativeRange : fillMissingTime(selectedAbsoluteRange);\n\n      const newValidationResult = isValidRange(visibleRange);\n      setValidationResult(newValidationResult || VALID_RANGE);\n    }\n  }, [applyClicked, isValidRange, rangeSelectionMode, selectedRelativeRange, selectedAbsoluteRange]);\n\n  const focusRefs = {\n    default: useRef<Focusable>(null),\n    'absolute-only': useRef<Focusable>(null),\n    'relative-only': useRef<Focusable>(null),\n  };\n\n  useEffect(() => scrollableContainerRef.current?.focus(), [scrollableContainerRef]);\n\n  return (\n    <>\n      <TabTrap focusNextCallback={() => applyButtonRef.current?.focus()} />\n      <div\n        {...focusVisible}\n        ref={scrollableContainerRef}\n        className={styles.dropdown}\n        tabIndex={0}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={i18nStrings.ariaLabel}\n        aria-labelledby={ariaLabelledby ?? i18nStrings.ariaLabelledby}\n        aria-describedby={ariaDescribedby ?? i18nStrings.ariaDescribedby}\n      >\n        <div\n          className={clsx(styles['dropdown-content'], {\n            [styles['one-grid']]: isSingleGrid,\n          })}\n        >\n          <SpaceBetween size=\"l\">\n            <InternalBox padding={{ top: 'm', horizontal: 'l' }}>\n              <SpaceBetween direction=\"vertical\" size=\"s\">\n                {rangeSelectorMode === 'default' && (\n                  <ModeSwitcher\n                    ref={focusRefs.default}\n                    mode={rangeSelectionMode}\n                    onChange={(mode: 'absolute' | 'relative') => {\n                      setRangeSelectionMode(mode);\n                      setApplyClicked(false);\n                      setValidationResult(VALID_RANGE);\n                    }}\n                    i18nStrings={i18nStrings}\n                  />\n                )}\n\n                {rangeSelectionMode === 'absolute' && (\n                  <Calendar\n                    ref={focusRefs['absolute-only']}\n                    isSingleGrid={isSingleGrid}\n                    initialEndDate={selectedAbsoluteRange?.endDate}\n                    initialStartDate={selectedAbsoluteRange?.startDate}\n                    locale={locale}\n                    startOfWeek={startOfWeek}\n                    isDateEnabled={isDateEnabled}\n                    i18nStrings={i18nStrings}\n                    onSelectDateRange={setSelectedAbsoluteRange}\n                    dateOnly={dateOnly}\n                    timeInputFormat={timeInputFormat}\n                  />\n                )}\n\n                {rangeSelectionMode === 'relative' && (\n                  <RelativeRangePicker\n                    ref={focusRefs['relative-only']}\n                    isSingleGrid={isSingleGrid}\n                    options={relativeOptions}\n                    dateOnly={dateOnly}\n                    initialSelection={selectedRelativeRange}\n                    onChange={range => setSelectedRelativeRange(range)}\n                    i18nStrings={i18nStrings}\n                  />\n                )}\n              </SpaceBetween>\n\n              <InternalBox\n                className={styles['validation-section']}\n                margin={!validationResult.valid ? { top: 's' } : undefined}\n              >\n                {!validationResult.valid && (\n                  <>\n                    <InternalAlert type=\"error\">\n                      <span className={styles['validation-error']}>{validationResult.errorMessage}</span>\n                    </InternalAlert>\n                    <LiveRegion>{validationResult.errorMessage}</LiveRegion>\n                  </>\n                )}\n              </InternalBox>\n            </InternalBox>\n\n            <div\n              className={clsx(styles.footer, {\n                [styles['one-grid']]: isSingleGrid,\n                [styles['has-clear-button']]: showClearButton,\n              })}\n            >\n              {showClearButton && (\n                <div className={styles['footer-button-wrapper']}>\n                  <InternalButton onClick={onClear} className={styles['clear-button']} variant=\"link\" formAction=\"none\">\n                    {i18nStrings.clearButtonLabel}\n                  </InternalButton>\n                </div>\n              )}\n              <div className={styles['footer-button-wrapper']}>\n                <SpaceBetween size=\"xs\" direction=\"horizontal\">\n                  <InternalButton\n                    onClick={closeDropdown}\n                    className={styles['cancel-button']}\n                    variant=\"link\"\n                    formAction=\"none\"\n                  >\n                    {i18nStrings.cancelButtonLabel}\n                  </InternalButton>\n\n                  <InternalButton\n                    onClick={onApply}\n                    className={styles['apply-button']}\n                    ref={applyButtonRef}\n                    formAction=\"none\"\n                  >\n                    {i18nStrings.applyButtonLabel}\n                  </InternalButton>\n                </SpaceBetween>\n              </div>\n            </div>\n          </SpaceBetween>\n\n          <TabTrap focusNextCallback={() => scrollableContainerRef.current?.focus()} />\n        </div>\n      </div>\n    </>\n  );\n}\n"]}

package/date-range-picker/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DateRangePickerProps } from './interfaces';
+export { DateRangePickerProps };
+declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<DateRangePickerProps.Ref>>;
+export default DateRangePicker;
+//# sourceMappingURL=index.d.ts.map

package/date-range-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/date-range-picker/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AA2BpD,OAAO,EAAE,oBAAoB,EAAE,CAAC;AAkEhC,QAAA,MAAM,eAAe,uGAmMpB,CAAC;AAGF,eAAe,eAAe,CAAC"}