@cloudscape-design/components 3.0.0

package/date-range-picker/calendar/grids/day/styles.scoped.css

@@ -0,0 +1,302 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_day_vci2l_12jxi_93:not(#\9) {
+  flex: 1 1 0%;
+  width: 0;
+  word-break: break-word;
+  text-align: center;
+  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--color-border-calendar-grid-sshunw, transparent);
+  border-right: 1px solid transparent;
+  border-right: 1px solid var(--color-border-calendar-grid-sshunw, transparent);
+  padding: 4px 0;
+  padding: var(--space-xxs-ynfts5, 4px) 0;
+  color: #9ba7b6;
+  color: var(--color-text-dropdown-item-disabled-varol7, #9ba7b6);
+  position: relative;
+}
+.awsui_day_vci2l_12jxi_93:not(#\9):focus {
+  outline: none;
+}
+.awsui_day_vci2l_12jxi_93:not(#\9)::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: calc(-1 * 2px);
+  top: calc(-1 * var(--border-item-width-qbbbsa, 2px));
+  left: -1px;
+  bottom: -1px;
+  right: calc(-1 * 2px);
+  right: calc(-1 * var(--border-item-width-qbbbsa, 2px));
+  background-color: transparent;
+}
+.awsui_day_vci2l_12jxi_93 > .awsui_day-inner_vci2l_12jxi_117:not(#\9) {
+  position: relative;
+  z-index: 1;
+}
+.awsui_day_vci2l_12jxi_93[data-awsui-focus-visible=true]:not(#\9):focus {
+  z-index: 2;
+  position: relative;
+}
+.awsui_day_vci2l_12jxi_93[data-awsui-focus-visible=true]:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(-5px - 1px);
+  outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-v3dwvl, -5px) - 1px);
+}
+.awsui_day_vci2l_12jxi_93[data-awsui-focus-visible=true]:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: calc(-1 * -5px);
+  left: calc(-1 * var(--space-calendar-grid-focus-outline-gutter-v3dwvl, -5px));
+  top: calc(-1 * -5px);
+  top: calc(-1 * var(--space-calendar-grid-focus-outline-gutter-v3dwvl, -5px));
+  width: calc(100% + 2 * -5px);
+  width: calc(100% + 2 * var(--space-calendar-grid-focus-outline-gutter-v3dwvl, -5px));
+  height: calc(100% + 2 * -5px);
+  height: calc(100% + 2 * var(--space-calendar-grid-focus-outline-gutter-v3dwvl, -5px));
+  border-radius: 3px;
+  border-radius: var(--border-calendar-grid-focus-ring-radius-8tejwi, 3px);
+  box-shadow: 0 0 0 2px #0972d3;
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+
+.awsui_in-first-row_vci2l_12jxi_141:not(#\9):not(.awsui_in-previous-month_vci2l_12jxi_141) {
+  border-top: 1px solid transparent;
+  border-top: 1px solid var(--color-border-calendar-grid-sshunw, transparent);
+}
+
+.awsui_in-previous-month_vci2l_12jxi_141:not(#\9):not(.awsui_last-day-of-month_vci2l_12jxi_145) {
+  border-right-color: transparent;
+}
+
+.awsui_in-next-month_vci2l_12jxi_149:not(#\9) {
+  border-color: transparent;
+}
+
+.awsui_in-first-column_vci2l_12jxi_153:not(#\9) {
+  border-left: 1px solid transparent;
+}
+.awsui_in-first-column_vci2l_12jxi_153.awsui_in-current-month_vci2l_12jxi_156:not(#\9) {
+  border-left: 1px solid transparent;
+  border-left: 1px solid var(--color-border-calendar-grid-sshunw, transparent);
+}
+
+.awsui_enabled_vci2l_12jxi_160:not(#\9) {
+  cursor: pointer;
+}
+.awsui_enabled_vci2l_12jxi_160.awsui_in-current-month_vci2l_12jxi_156:not(#\9) {
+  color: #000716;
+  color: var(--color-text-dropdown-item-default-7tg9p2, #000716);
+}
+.awsui_enabled_vci2l_12jxi_160.awsui_in-current-month_vci2l_12jxi_156:not(#\9):not(.awsui_in-range_vci2l_12jxi_166), .awsui_enabled_vci2l_12jxi_160.awsui_in-current-month_vci2l_12jxi_156:not(#\9):not(.awsui_in-range_vci2l_12jxi_166)::after, .awsui_enabled_vci2l_12jxi_160.awsui_in-current-month_vci2l_12jxi_156.awsui_end-date_vci2l_12jxi_166.awsui_start-date_vci2l_12jxi_166:not(#\9), .awsui_enabled_vci2l_12jxi_160.awsui_in-current-month_vci2l_12jxi_156.awsui_end-date_vci2l_12jxi_166.awsui_start-date_vci2l_12jxi_166:not(#\9)::after, .awsui_enabled_vci2l_12jxi_160.awsui_in-current-month_vci2l_12jxi_156.awsui_no-range_vci2l_12jxi_166:not(#\9), .awsui_enabled_vci2l_12jxi_160.awsui_in-current-month_vci2l_12jxi_156.awsui_no-range_vci2l_12jxi_166:not(#\9)::after {
+  border-radius: 8px;
+  border-radius: var(--border-calendar-grid-radius-9lpwqf, 8px);
+}
+.awsui_enabled_vci2l_12jxi_160.awsui_in-current-month_vci2l_12jxi_156:not(#\9):hover {
+  color: #000716;
+  color: var(--color-text-calendar-day-hover-graajh, #000716);
+  background-color: #f4f4f4;
+  background-color: var(--color-background-dropdown-item-hover-mqsxkv, #f4f4f4);
+}
+.awsui_enabled_vci2l_12jxi_160.awsui_in-current-month_vci2l_12jxi_156:not(#\9):hover:not(.awsui_selected_vci2l_12jxi_173)::after {
+  border: 2px solid #7d8998;
+  border: var(--border-item-width-qbbbsa, 2px) solid var(--color-border-dropdown-item-hover-tyzq9m, #7d8998);
+}
+
+.awsui_today_vci2l_12jxi_177:not(#\9):not(.awsui_in-range_vci2l_12jxi_166) {
+  background-color: #f4f4f4;
+  background-color: var(--color-background-calendar-today-762czq, #f4f4f4);
+  border-radius: 8px;
+  border-radius: var(--border-calendar-grid-radius-9lpwqf, 8px);
+}
+
+.awsui_selected_vci2l_12jxi_173:not(#\9) {
+  border-color: transparent;
+  position: relative;
+  z-index: 2;
+}
+.awsui_selected_vci2l_12jxi_173[data-awsui-focus-visible=true]:not(#\9):focus {
+  position: relative;
+}
+.awsui_selected_vci2l_12jxi_173[data-awsui-focus-visible=true]:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(-5px - 1px);
+  outline-offset: calc(var(--space-calendar-grid-selected-focus-outline-gutter-gqgjqz, -5px) - 1px);
+}
+.awsui_selected_vci2l_12jxi_173[data-awsui-focus-visible=true]:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: calc(-1 * -5px);
+  left: calc(-1 * var(--space-calendar-grid-selected-focus-outline-gutter-gqgjqz, -5px));
+  top: calc(-1 * -5px);
+  top: calc(-1 * var(--space-calendar-grid-selected-focus-outline-gutter-gqgjqz, -5px));
+  width: calc(100% + 2 * -5px);
+  width: calc(100% + 2 * var(--space-calendar-grid-selected-focus-outline-gutter-gqgjqz, -5px));
+  height: calc(100% + 2 * -5px);
+  height: calc(100% + 2 * var(--space-calendar-grid-selected-focus-outline-gutter-gqgjqz, -5px));
+  border-radius: 3px;
+  border-radius: var(--border-calendar-grid-focus-ring-radius-8tejwi, 3px);
+  box-shadow: 0 0 0 2px #fbfbfb;
+  box-shadow: 0 0 0 2px var(--color-border-calendar-grid-selected-focus-ring-cxqa0s, #fbfbfb);
+}
+.awsui_selected_vci2l_12jxi_173[data-awsui-focus-visible=true]:not(#\9):focus::before {
+  z-index: 1;
+}
+.awsui_selected_vci2l_12jxi_173:not(#\9)::after {
+  background-color: #0972d3;
+  background-color: var(--color-background-control-checked-9admlu, #0972d3);
+  border: 2px solid #0972d3;
+  border: var(--border-item-width-qbbbsa, 2px) solid var(--color-background-control-checked-9admlu, #0972d3);
+  z-index: 0;
+}
+.awsui_selected_vci2l_12jxi_173.awsui_start-date_vci2l_12jxi_166:not(#\9), .awsui_selected_vci2l_12jxi_173.awsui_start-date_vci2l_12jxi_166:not(#\9)::after, .awsui_selected_vci2l_12jxi_173.awsui_range-start-date_vci2l_12jxi_213:not(#\9), .awsui_selected_vci2l_12jxi_173.awsui_range-start-date_vci2l_12jxi_213:not(#\9)::after {
+  border-top-left-radius: 8px;
+  border-top-left-radius: var(--border-item-radius-43830w, 8px);
+}
+.awsui_selected_vci2l_12jxi_173.awsui_start-date_vci2l_12jxi_166.awsui_in-range-border-bottom_vci2l_12jxi_216:not(#\9), .awsui_selected_vci2l_12jxi_173.awsui_start-date_vci2l_12jxi_166.awsui_in-range-border-bottom_vci2l_12jxi_216:not(#\9)::after, .awsui_selected_vci2l_12jxi_173.awsui_range-start-date_vci2l_12jxi_213.awsui_in-range-border-bottom_vci2l_12jxi_216:not(#\9), .awsui_selected_vci2l_12jxi_173.awsui_range-start-date_vci2l_12jxi_213.awsui_in-range-border-bottom_vci2l_12jxi_216:not(#\9)::after {
+  border-bottom-left-radius: 8px;
+  border-bottom-left-radius: var(--border-item-radius-43830w, 8px);
+}
+.awsui_selected_vci2l_12jxi_173.awsui_end-date_vci2l_12jxi_166:not(#\9), .awsui_selected_vci2l_12jxi_173.awsui_end-date_vci2l_12jxi_166:not(#\9)::after, .awsui_selected_vci2l_12jxi_173.awsui_range-end-date_vci2l_12jxi_219:not(#\9), .awsui_selected_vci2l_12jxi_173.awsui_range-end-date_vci2l_12jxi_219:not(#\9)::after {
+  border-bottom-right-radius: 8px;
+  border-bottom-right-radius: var(--border-item-radius-43830w, 8px);
+}
+.awsui_selected_vci2l_12jxi_173.awsui_end-date_vci2l_12jxi_166.awsui_in-range-border-top_vci2l_12jxi_222:not(#\9), .awsui_selected_vci2l_12jxi_173.awsui_end-date_vci2l_12jxi_166.awsui_in-range-border-top_vci2l_12jxi_222:not(#\9)::after, .awsui_selected_vci2l_12jxi_173.awsui_range-end-date_vci2l_12jxi_219.awsui_in-range-border-top_vci2l_12jxi_222:not(#\9), .awsui_selected_vci2l_12jxi_173.awsui_range-end-date_vci2l_12jxi_219.awsui_in-range-border-top_vci2l_12jxi_222:not(#\9)::after {
+  border-top-right-radius: 8px;
+  border-top-right-radius: var(--border-item-radius-43830w, 8px);
+}
+.awsui_selected_vci2l_12jxi_173 > .awsui_day-inner_vci2l_12jxi_117:not(#\9) {
+  color: #ffffff;
+  color: var(--color-background-control-default-4pa05r, #ffffff);
+  position: relative;
+  z-index: 2;
+}
+
+.awsui_in-range_vci2l_12jxi_166:not(#\9) {
+  background-color: #f2f8fd;
+  background-color: var(--color-background-dropdown-item-selected-8l4mpk, #f2f8fd);
+}
+.awsui_in-range_vci2l_12jxi_166.awsui_in-range-border-top_vci2l_12jxi_222:not(#\9)::after {
+  border-top: 2px solid #0972d3;
+  border-top: var(--border-item-width-qbbbsa, 2px) solid var(--color-background-control-checked-9admlu, #0972d3);
+}
+.awsui_in-range_vci2l_12jxi_166.awsui_in-range-border-right_vci2l_12jxi_237:not(#\9)::after {
+  border-right: 2px solid #0972d3;
+  border-right: var(--border-item-width-qbbbsa, 2px) solid var(--color-background-control-checked-9admlu, #0972d3);
+}
+.awsui_in-range_vci2l_12jxi_166.awsui_in-range-border-bottom_vci2l_12jxi_216:not(#\9)::after {
+  border-bottom: 2px solid #0972d3;
+  border-bottom: var(--border-item-width-qbbbsa, 2px) solid var(--color-background-control-checked-9admlu, #0972d3);
+}
+.awsui_in-range_vci2l_12jxi_166.awsui_in-range-border-left_vci2l_12jxi_243:not(#\9)::after {
+  border-left: 2px solid #0972d3;
+  border-left: var(--border-item-width-qbbbsa, 2px) solid var(--color-background-control-checked-9admlu, #0972d3);
+}
+.awsui_in-range_vci2l_12jxi_166.awsui_in-range-border-top_vci2l_12jxi_222.awsui_in-range-border-right_vci2l_12jxi_237:not(#\9), .awsui_in-range_vci2l_12jxi_166.awsui_in-range-border-top_vci2l_12jxi_222.awsui_in-range-border-right_vci2l_12jxi_237:not(#\9)::after {
+  border-top-right-radius: 8px;
+  border-top-right-radius: var(--border-item-radius-43830w, 8px);
+}
+.awsui_in-range_vci2l_12jxi_166.awsui_in-range-border-bottom_vci2l_12jxi_216.awsui_in-range-border-right_vci2l_12jxi_237:not(#\9), .awsui_in-range_vci2l_12jxi_166.awsui_in-range-border-bottom_vci2l_12jxi_216.awsui_in-range-border-right_vci2l_12jxi_237:not(#\9)::after {
+  border-bottom-right-radius: 8px;
+  border-bottom-right-radius: var(--border-item-radius-43830w, 8px);
+}
+.awsui_in-range_vci2l_12jxi_166.awsui_in-range-border-bottom_vci2l_12jxi_216.awsui_in-range-border-left_vci2l_12jxi_243:not(#\9), .awsui_in-range_vci2l_12jxi_166.awsui_in-range-border-bottom_vci2l_12jxi_216.awsui_in-range-border-left_vci2l_12jxi_243:not(#\9)::after {
+  border-bottom-left-radius: 8px;
+  border-bottom-left-radius: var(--border-item-radius-43830w, 8px);
+}
+.awsui_in-range_vci2l_12jxi_166.awsui_in-range-border-top_vci2l_12jxi_222.awsui_in-range-border-left_vci2l_12jxi_243:not(#\9), .awsui_in-range_vci2l_12jxi_166.awsui_in-range-border-top_vci2l_12jxi_222.awsui_in-range-border-left_vci2l_12jxi_243:not(#\9)::after {
+  border-top-left-radius: 8px;
+  border-top-left-radius: var(--border-item-radius-43830w, 8px);
+}

package/date-range-picker/calendar/grids/day/styles.selectors.js

@@ -0,0 +1,27 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "day": "awsui_day_vci2l_12jxi_93",
+  "day-inner": "awsui_day-inner_vci2l_12jxi_117",
+  "in-first-row": "awsui_in-first-row_vci2l_12jxi_141",
+  "in-previous-month": "awsui_in-previous-month_vci2l_12jxi_141",
+  "last-day-of-month": "awsui_last-day-of-month_vci2l_12jxi_145",
+  "in-next-month": "awsui_in-next-month_vci2l_12jxi_149",
+  "in-first-column": "awsui_in-first-column_vci2l_12jxi_153",
+  "in-current-month": "awsui_in-current-month_vci2l_12jxi_156",
+  "enabled": "awsui_enabled_vci2l_12jxi_160",
+  "in-range": "awsui_in-range_vci2l_12jxi_166",
+  "end-date": "awsui_end-date_vci2l_12jxi_166",
+  "start-date": "awsui_start-date_vci2l_12jxi_166",
+  "no-range": "awsui_no-range_vci2l_12jxi_166",
+  "selected": "awsui_selected_vci2l_12jxi_173",
+  "today": "awsui_today_vci2l_12jxi_177",
+  "range-start-date": "awsui_range-start-date_vci2l_12jxi_213",
+  "in-range-border-bottom": "awsui_in-range-border-bottom_vci2l_12jxi_216",
+  "range-end-date": "awsui_range-end-date_vci2l_12jxi_219",
+  "in-range-border-top": "awsui_in-range-border-top_vci2l_12jxi_222",
+  "in-range-border-right": "awsui_in-range-border-right_vci2l_12jxi_237",
+  "in-range-border-left": "awsui_in-range-border-left_vci2l_12jxi_243"
+};
+  

package/date-range-picker/calendar/grids/grid.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { DateChangeHandler, DayIndex } from '../index';
+import { DateRangePickerProps } from '../../interfaces';
+export interface GridProps {
+    baseDate: Date;
+    selectedStartDate: Date | null;
+    selectedEndDate: Date | null;
+    rangeStartDate: Date | null;
+    rangeEndDate: Date | null;
+    focusedDate: Date | null;
+    focusedDateRef: React.RefObject<HTMLDivElement>;
+    onSelectDate: DateChangeHandler;
+    onGridKeyDownHandler: (e: React.KeyboardEvent) => void;
+    onFocusedDateChange: React.Dispatch<React.SetStateAction<Date | null>>;
+    isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;
+    locale: string;
+    startOfWeek: DayIndex;
+    todayAriaLabel: string;
+    className?: string;
+}
+export declare function Grid({ baseDate, selectedStartDate, selectedEndDate, rangeStartDate, rangeEndDate, focusedDate, focusedDateRef, onSelectDate, onGridKeyDownHandler, onFocusedDateChange, isDateEnabled, locale, startOfWeek, todayAriaLabel, className, }: GridProps): JSX.Element;
+//# sourceMappingURL=grid.d.ts.map

package/date-range-picker/calendar/grids/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAKxD,MAAM,WAAW,SAAS;IACxB,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,cAAc,CAAC,CAAC;IAEhD,YAAY,EAAE,iBAAiB,CAAC;IAChC,oBAAoB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IACvD,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC;IAEvE,aAAa,EAAE,oBAAoB,CAAC,qBAAqB,CAAC;IAE1D,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,YAAY,EACZ,WAAW,EAEX,cAAc,EAEd,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EAEnB,aAAa,EAEb,MAAM,EACN,WAAW,EACX,cAAc,EAEd,SAAS,GACV,EAAE,SAAS,eA0EX"}

package/date-range-picker/calendar/grids/grid.js

@@ -0,0 +1,45 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useMemo } from 'react';
+import styles from '../../styles.css.js';
+import GridDay from './day';
+import { isSameMonth, isAfter, isBefore, isSameDay, addWeeks, addDays } from 'date-fns';
+import { getCalendarMonth } from 'mnth';
+import rotateDayIndexes from '../../../date-picker/calendar/utils/rotate-day-indexes';
+import { renderDayName } from '../../../date-picker/calendar/utils/intl';
+import clsx from 'clsx';
+export function Grid(_a) {
+    var baseDate = _a.baseDate, selectedStartDate = _a.selectedStartDate, selectedEndDate = _a.selectedEndDate, rangeStartDate = _a.rangeStartDate, rangeEndDate = _a.rangeEndDate, focusedDate = _a.focusedDate, focusedDateRef = _a.focusedDateRef, onSelectDate = _a.onSelectDate, onGridKeyDownHandler = _a.onGridKeyDownHandler, onFocusedDateChange = _a.onFocusedDateChange, isDateEnabled = _a.isDateEnabled, locale = _a.locale, startOfWeek = _a.startOfWeek, todayAriaLabel = _a.todayAriaLabel, className = _a.className;
+    var baseDateTime = baseDate === null || baseDate === void 0 ? void 0 : baseDate.getTime();
+    // `baseDateTime` is used as a more stable replacement for baseDate
+    var weeks = useMemo(function () { return getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [baseDateTime, startOfWeek]);
+    return (React.createElement("div", { className: clsx(styles.grid, className) },
+        React.createElement("div", { className: styles['calendar-day-names'] }, rotateDayIndexes(startOfWeek).map(function (i) { return (React.createElement("div", { key: "day-name-".concat(i), className: styles['calendar-day-name'] }, renderDayName(locale, i))); })),
+        React.createElement("div", { className: styles['calendar-dates'], onKeyDown: onGridKeyDownHandler }, weeks.map(function (week, weekIndex) {
+            return (React.createElement("div", { key: "week-".concat(weekIndex), className: styles['calendar-week'] }, week.map(function (date, dateIndex) {
+                var isStartDate = !!selectedStartDate && isSameDay(date, selectedStartDate);
+                var isEndDate = !!selectedEndDate && isSameDay(date, selectedEndDate);
+                var isSelected = isStartDate || isEndDate;
+                var isRangeStartDate = !!rangeStartDate && isSameDay(date, rangeStartDate);
+                var isRangeEndDate = !!rangeEndDate && isSameDay(date, rangeEndDate);
+                var isFocused = !!focusedDate && isSameDay(date, focusedDate) && isSameMonth(date, baseDate);
+                var dateIsInRange = isStartDate || isEndDate || isInRange(date, rangeStartDate, rangeEndDate);
+                var inRangeStartWeek = rangeStartDate && isInRange(date, rangeStartDate, addDays(addWeeks(rangeStartDate, 1), -1));
+                var inRangeEndWeek = rangeEndDate && isInRange(date, rangeEndDate, addDays(addWeeks(rangeEndDate, -1), 1));
+                var onlyOneSelected = !!rangeStartDate && !!rangeEndDate
+                    ? isSameDay(rangeStartDate, rangeEndDate)
+                    : !selectedStartDate || !selectedEndDate;
+                return (React.createElement(GridDay, { key: "date-".concat(weekIndex, "-").concat(dateIndex), locale: locale, baseDate: baseDate, isSelected: isSelected, isStartDate: isStartDate, isEndDate: isEndDate, onlyOneSelected: onlyOneSelected, isRangeStartDate: isRangeStartDate, isRangeEndDate: isRangeEndDate, date: date, isFocusedDate: isFocused, ref: isFocused ? focusedDateRef : undefined, todayAriaLabel: todayAriaLabel, onSelectDate: onSelectDate, onFocusDate: onFocusedDateChange, isInRange: dateIsInRange, isDateEnabled: isDateEnabled, isDateInFirstRow: weekIndex === 0, isDateInFirstColumn: dateIndex === 0, isDateInLastColumn: dateIndex === week.length - 1, isDateInSelectionStartWeek: !!inRangeStartWeek, isDateInSelectionEndWeek: !!inRangeEndWeek }));
+            })));
+        }))));
+}
+function isInRange(date, dateOne, dateTwo) {
+    if (!dateOne || !dateTwo || isSameDay(dateOne, dateTwo)) {
+        return false;
+    }
+    var inRange = (isAfter(date, dateOne) && isBefore(date, dateTwo)) || (isAfter(date, dateTwo) && isBefore(date, dateOne));
+    return inRange || isSameDay(date, dateOne) || isSameDay(date, dateTwo);
+}
+//# sourceMappingURL=grid.js.map

package/date-range-picker/calendar/grids/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/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 styles from '../../styles.css.js';\nimport GridDay from './day';\nimport { isSameMonth, isAfter, isBefore, isSameDay, addWeeks, addDays } from 'date-fns';\nimport { getCalendarMonth } from 'mnth';\nimport { DateChangeHandler, DayIndex } from '../index';\nimport { DateRangePickerProps } from '../../interfaces';\nimport rotateDayIndexes from '../../../date-picker/calendar/utils/rotate-day-indexes';\nimport { renderDayName } from '../../../date-picker/calendar/utils/intl';\nimport clsx from 'clsx';\n\nexport interface GridProps {\n  baseDate: Date;\n  selectedStartDate: Date | null;\n  selectedEndDate: Date | null;\n\n  rangeStartDate: Date | null;\n  rangeEndDate: Date | null;\n\n  focusedDate: Date | null;\n  focusedDateRef: React.RefObject<HTMLDivElement>;\n\n  onSelectDate: DateChangeHandler;\n  onGridKeyDownHandler: (e: React.KeyboardEvent) => void;\n  onFocusedDateChange: React.Dispatch<React.SetStateAction<Date | null>>;\n\n  isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;\n\n  locale: string;\n  startOfWeek: DayIndex;\n  todayAriaLabel: string;\n\n  className?: string;\n}\n\nexport function Grid({\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\n  locale,\n  startOfWeek,\n  todayAriaLabel,\n\n  className,\n}: GridProps) {\n  const baseDateTime = baseDate?.getTime();\n  // `baseDateTime` is used as a more stable replacement for baseDate\n  const weeks = useMemo<Date[][]>(\n    () => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [baseDateTime, startOfWeek]\n  );\n\n  return (\n    <div className={clsx(styles.grid, className)}>\n      <div className={styles['calendar-day-names']}>\n        {rotateDayIndexes(startOfWeek).map(i => (\n          <div key={`day-name-${i}`} className={styles['calendar-day-name']}>\n            {renderDayName(locale, i)}\n          </div>\n        ))}\n      </div>\n      <div className={styles['calendar-dates']} onKeyDown={onGridKeyDownHandler}>\n        {weeks.map((week, weekIndex) => {\n          return (\n            <div key={`week-${weekIndex}`} className={styles['calendar-week']}>\n              {week.map((date, dateIndex) => {\n                const isStartDate = !!selectedStartDate && isSameDay(date, selectedStartDate);\n                const isEndDate = !!selectedEndDate && isSameDay(date, selectedEndDate);\n                const isSelected = isStartDate || isEndDate;\n                const isRangeStartDate = !!rangeStartDate && isSameDay(date, rangeStartDate);\n                const isRangeEndDate = !!rangeEndDate && isSameDay(date, rangeEndDate);\n\n                const isFocused = !!focusedDate && isSameDay(date, focusedDate) && isSameMonth(date, baseDate);\n\n                const dateIsInRange = isStartDate || isEndDate || isInRange(date, rangeStartDate, rangeEndDate);\n                const inRangeStartWeek =\n                  rangeStartDate && isInRange(date, rangeStartDate, addDays(addWeeks(rangeStartDate, 1), -1));\n                const inRangeEndWeek =\n                  rangeEndDate && isInRange(date, rangeEndDate, addDays(addWeeks(rangeEndDate, -1), 1));\n                const onlyOneSelected =\n                  !!rangeStartDate && !!rangeEndDate\n                    ? isSameDay(rangeStartDate, rangeEndDate)\n                    : !selectedStartDate || !selectedEndDate;\n\n                return (\n                  <GridDay\n                    key={`date-${weekIndex}-${dateIndex}`}\n                    locale={locale}\n                    baseDate={baseDate}\n                    isSelected={isSelected}\n                    isStartDate={isStartDate}\n                    isEndDate={isEndDate}\n                    onlyOneSelected={onlyOneSelected}\n                    isRangeStartDate={isRangeStartDate}\n                    isRangeEndDate={isRangeEndDate}\n                    date={date}\n                    isFocusedDate={isFocused}\n                    ref={isFocused ? focusedDateRef : undefined}\n                    todayAriaLabel={todayAriaLabel}\n                    onSelectDate={onSelectDate}\n                    onFocusDate={onFocusedDateChange}\n                    isInRange={dateIsInRange}\n                    isDateEnabled={isDateEnabled}\n                    isDateInFirstRow={weekIndex === 0}\n                    isDateInFirstColumn={dateIndex === 0}\n                    isDateInLastColumn={dateIndex === week.length - 1}\n                    isDateInSelectionStartWeek={!!inRangeStartWeek}\n                    isDateInSelectionEndWeek={!!inRangeEndWeek}\n                  />\n                );\n              })}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nfunction isInRange(date: Date, dateOne: Date | null, dateTwo: Date | null) {\n  if (!dateOne || !dateTwo || isSameDay(dateOne, dateTwo)) {\n    return false;\n  }\n\n  const inRange =\n    (isAfter(date, dateOne) && isBefore(date, dateTwo)) || (isAfter(date, dateTwo) && isBefore(date, dateOne));\n\n  return inRange || isSameDay(date, dateOne) || isSameDay(date, dateTwo);\n}\n"]}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { DateChangeHandler, DayIndex, MonthChangeHandler } from '../index';
+import { MoveFocusHandler } from '../../../date-picker/calendar/utils/move-focus-handler';
+import { DateRangePickerProps } from '../../interfaces';
+export interface GridProps {
+    baseDate: Date;
+    selectedStartDate: Date | null;
+    selectedEndDate: Date | null;
+    focusedDate: Date | null;
+    onFocusedDateChange: React.Dispatch<React.SetStateAction<Date | null>>;
+    isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;
+    isSingleGrid: boolean;
+    onSelectDate: DateChangeHandler;
+    onChangeMonth: MonthChangeHandler;
+    handleFocusMove: MoveFocusHandler;
+    locale: string;
+    startOfWeek: DayIndex;
+    todayAriaLabel: string;
+}
+export declare function selectFocusedDate(selected: Date | null, baseDate: Date, isDateEnabled: DateRangePickerProps.IsDateEnabledFunction): Date | null;
+export declare const Grids: ({ baseDate, selectedStartDate, selectedEndDate, focusedDate, onFocusedDateChange, isDateEnabled, isSingleGrid, onSelectDate, onChangeMonth, handleFocusMove, locale, startOfWeek, todayAriaLabel, }: GridProps) => JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAmBxD,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,IAAI,CAAC;IACf,iBAAiB,EAAE,IAAI,GAAG,IAAI,CAAC;IAC/B,eAAe,EAAE,IAAI,GAAG,IAAI,CAAC;IAE7B,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC;IAEvE,aAAa,EAAE,oBAAoB,CAAC,qBAAqB,CAAC;IAC1D,YAAY,EAAE,OAAO,CAAC;IAEtB,YAAY,EAAE,iBAAiB,CAAC;IAChC,aAAa,EAAE,kBAAkB,CAAC;IAClC,eAAe,EAAE,gBAAgB,CAAC;IAElC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,IAAI,GAAG,IAAI,EACrB,QAAQ,EAAE,IAAI,EACd,aAAa,EAAE,oBAAoB,CAAC,qBAAqB,eAa1D;AAED,eAAO,MAAM,KAAK,wMAkBf,SAAS,gBA0JX,CAAC"}

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

@@ -0,0 +1,130 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef, useState } from 'react';
+import { KeyCode } from '../../../internal/keycode';
+import { addDays, addWeeks, isSameMonth, isAfter, isBefore, addMonths, min, max } from 'date-fns';
+import InternalSpaceBetween from '../../../space-between/internal';
+import { Grid } from './grid';
+import styles from '../../styles.css.js';
+import useFocusVisible from '../../../internal/hooks/focus-visible/index';
+import { getBaseDate } from '../get-base-date';
+import { hasValue } from '../../../internal/utils/has-value';
+function isVisible(date, baseDate, isSingleGrid) {
+    if (isSingleGrid) {
+        return isSameMonth(date, baseDate);
+    }
+    var previousMonth = addMonths(baseDate, -1);
+    return isSameMonth(date, previousMonth) || isSameMonth(date, baseDate);
+}
+export function selectFocusedDate(selected, baseDate, isDateEnabled) {
+    if (selected && isDateEnabled(selected) && isSameMonth(selected, baseDate)) {
+        return selected;
+    }
+    var today = new Date();
+    if (isDateEnabled(today) && isSameMonth(today, baseDate)) {
+        return today;
+    }
+    if (isDateEnabled(baseDate)) {
+        return baseDate;
+    }
+    return null;
+}
+export var Grids = function (_a) {
+    var baseDate = _a.baseDate, selectedStartDate = _a.selectedStartDate, selectedEndDate = _a.selectedEndDate, focusedDate = _a.focusedDate, onFocusedDateChange = _a.onFocusedDateChange, isDateEnabled = _a.isDateEnabled, isSingleGrid = _a.isSingleGrid, onSelectDate = _a.onSelectDate, onChangeMonth = _a.onChangeMonth, handleFocusMove = _a.handleFocusMove, locale = _a.locale, startOfWeek = _a.startOfWeek, todayAriaLabel = _a.todayAriaLabel;
+    var containerRef = useRef(null);
+    var _b = useState(false), gridHasFocus = _b[0], setGridHasFocus = _b[1];
+    var focusedDateRef = useRef(null);
+    var baseDateTime = baseDate === null || baseDate === void 0 ? void 0 : baseDate.getTime();
+    var focusedDateTime = focusedDate === null || focusedDate === void 0 ? void 0 : focusedDate.getTime();
+    useEffect(function () {
+        if (focusedDate && !isVisible(focusedDate, baseDate, isSingleGrid)) {
+            // The nearestBaseDate depends on the direction of the month change
+            var direction = isAfter(focusedDate, baseDate) ? 'backwards' : 'forwards';
+            var newMonth = !isSingleGrid && direction === 'backwards' ? addMonths(baseDate, -1) : baseDate;
+            var nearestBaseDate = getBaseDate(newMonth, direction === 'backwards' ? -1 : 1, isDateEnabled);
+            var newFocusedDate = selectFocusedDate(focusedDate, nearestBaseDate, isDateEnabled);
+            onFocusedDateChange(newFocusedDate);
+        }
+        // `baseDateTime` and `focusedDateTime` are used as more stable replacements for baseDate and focusedDate
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [focusedDateTime, baseDateTime, isSingleGrid, isDateEnabled, onFocusedDateChange]);
+    var onGridKeyDownHandler = function (e) {
+        var updatedFocusDate;
+        if (focusedDate === null) {
+            return;
+        }
+        switch (e.keyCode) {
+            case KeyCode.enter:
+                e.preventDefault();
+                if (focusedDate) {
+                    onSelectDate(focusedDate);
+                }
+                return;
+            case KeyCode.right:
+                e.preventDefault();
+                updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, function (date) { return addDays(date, 1); });
+                break;
+            case KeyCode.left:
+                e.preventDefault();
+                updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, function (date) { return addDays(date, -1); });
+                break;
+            case KeyCode.up:
+                e.preventDefault();
+                updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, function (date) { return addWeeks(date, -1); });
+                break;
+            case KeyCode.down:
+                e.preventDefault();
+                updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, function (date) { return addWeeks(date, 1); });
+                break;
+            default:
+                return;
+        }
+        var updatedDateIsVisible = isVisible(updatedFocusDate, baseDate, isSingleGrid);
+        if (!updatedDateIsVisible) {
+            var newMonthIsOnLeftSide = !isSingleGrid && isBefore(updatedFocusDate, baseDate);
+            onChangeMonth(newMonthIsOnLeftSide ? addMonths(updatedFocusDate, 1) : updatedFocusDate);
+        }
+        onFocusedDateChange(updatedFocusDate);
+    };
+    useEffect(function () {
+        // focus current date if the focus is already inside the calendar
+        if (focusedDate !== null && gridHasFocus) {
+            if (focusedDateRef.current && focusedDateRef.current !== document.activeElement) {
+                focusedDateRef.current.focus();
+            }
+        }
+        // `focusedDateTime` is used as a more stable replacement for focusedDate
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [focusedDateTime, gridHasFocus]);
+    var onGridBlur = function (event) {
+        var _a;
+        /*
+         IE11 does not support event.relatedTarget, but sets document.activeElement to the newly
+         focused element before the onBlur handler is called.
+    
+         However, other browsers do not make any guarantees for the value of document.activeElement
+         during the execution of an onBlur handler. Therefore, we have to use event.relatedTarget
+         instead.
+         */
+        var newFocusTarget = event.relatedTarget || document.activeElement;
+        var newFocusTargetIsInGrid = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(newFocusTarget);
+        if (newFocusTarget && !newFocusTargetIsInGrid && gridHasFocus) {
+            setGridHasFocus(false);
+        }
+    };
+    var onGridFocus = function () {
+        if (!gridHasFocus) {
+            setGridHasFocus(true);
+        }
+    };
+    var focusVisible = useFocusVisible();
+    var isRangeVisible = (selectedStartDate && selectedEndDate) || (gridHasFocus && !!focusVisible['data-awsui-focus-visible']);
+    var rangeEnds = [selectedStartDate !== null && selectedStartDate !== void 0 ? selectedStartDate : focusedDate, selectedEndDate !== null && selectedEndDate !== void 0 ? selectedEndDate : focusedDate].filter(hasValue);
+    var rangeStartDate = min(rangeEnds);
+    var rangeEndDate = max(rangeEnds);
+    return (React.createElement("div", { ref: containerRef, onFocus: onGridFocus, onBlur: onGridBlur },
+        React.createElement(InternalSpaceBetween, { size: "xs", direction: "horizontal" },
+            !isSingleGrid && (React.createElement(Grid, { className: styles['first-grid'], baseDate: addMonths(baseDate, -1), selectedEndDate: selectedEndDate, selectedStartDate: selectedStartDate, rangeStartDate: isRangeVisible ? rangeStartDate : null, rangeEndDate: isRangeVisible ? rangeEndDate : null, focusedDate: focusedDate, focusedDateRef: focusedDateRef, isDateEnabled: isDateEnabled, onSelectDate: onSelectDate, onGridKeyDownHandler: onGridKeyDownHandler, onFocusedDateChange: onFocusedDateChange, locale: locale, startOfWeek: startOfWeek, todayAriaLabel: todayAriaLabel })),
+            React.createElement(Grid, { className: styles['second-grid'], baseDate: baseDate, selectedEndDate: selectedEndDate, selectedStartDate: selectedStartDate, rangeStartDate: isRangeVisible ? rangeStartDate : null, rangeEndDate: isRangeVisible ? rangeEndDate : null, focusedDate: focusedDate, focusedDateRef: focusedDateRef, isDateEnabled: isDateEnabled, onSelectDate: onSelectDate, onGridKeyDownHandler: onGridKeyDownHandler, onFocusedDateChange: onFocusedDateChange, locale: locale, startOfWeek: startOfWeek, todayAriaLabel: todayAriaLabel }))));
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/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, { useEffect, useRef, useState } from 'react';\nimport { KeyCode } from '../../../internal/keycode';\nimport { addDays, addWeeks, isSameMonth, isAfter, isBefore, addMonths, min, max } from 'date-fns';\n\nimport { DateChangeHandler, DayIndex, MonthChangeHandler } from '../index';\nimport { MoveFocusHandler } from '../../../date-picker/calendar/utils/move-focus-handler';\nimport { DateRangePickerProps } from '../../interfaces';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport { Grid } from './grid';\nimport styles from '../../styles.css.js';\n\nimport useFocusVisible from '../../../internal/hooks/focus-visible/index';\nimport { getBaseDate } from '../get-base-date';\nimport { hasValue } from '../../../internal/utils/has-value';\n\nfunction isVisible(date: Date, baseDate: Date, isSingleGrid: boolean) {\n  if (isSingleGrid) {\n    return isSameMonth(date, baseDate);\n  }\n\n  const previousMonth = addMonths(baseDate, -1);\n\n  return isSameMonth(date, previousMonth) || isSameMonth(date, baseDate);\n}\n\nexport interface GridProps {\n  baseDate: Date;\n  selectedStartDate: Date | null;\n  selectedEndDate: Date | null;\n\n  focusedDate: Date | null;\n  onFocusedDateChange: React.Dispatch<React.SetStateAction<Date | null>>;\n\n  isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;\n  isSingleGrid: boolean;\n\n  onSelectDate: DateChangeHandler;\n  onChangeMonth: MonthChangeHandler;\n  handleFocusMove: MoveFocusHandler;\n\n  locale: string;\n  startOfWeek: DayIndex;\n  todayAriaLabel: string;\n}\n\nexport function selectFocusedDate(\n  selected: Date | null,\n  baseDate: Date,\n  isDateEnabled: DateRangePickerProps.IsDateEnabledFunction\n) {\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\nexport const Grids = ({\n  baseDate,\n  selectedStartDate,\n  selectedEndDate,\n\n  focusedDate,\n  onFocusedDateChange,\n\n  isDateEnabled,\n  isSingleGrid,\n\n  onSelectDate,\n  onChangeMonth,\n  handleFocusMove,\n\n  locale,\n  startOfWeek,\n  todayAriaLabel,\n}: GridProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [gridHasFocus, setGridHasFocus] = useState(false);\n\n  const focusedDateRef = useRef<HTMLDivElement>(null);\n\n  const baseDateTime = baseDate?.getTime();\n  const focusedDateTime = focusedDate?.getTime();\n\n  useEffect(() => {\n    if (focusedDate && !isVisible(focusedDate, baseDate, isSingleGrid)) {\n      // The nearestBaseDate depends on the direction of the month change\n      const direction = isAfter(focusedDate, baseDate) ? 'backwards' : 'forwards';\n\n      const newMonth = !isSingleGrid && direction === 'backwards' ? addMonths(baseDate, -1) : baseDate;\n      const nearestBaseDate = getBaseDate(newMonth, direction === 'backwards' ? -1 : 1, isDateEnabled);\n\n      const newFocusedDate = selectFocusedDate(focusedDate, nearestBaseDate, isDateEnabled);\n\n      onFocusedDateChange(newFocusedDate);\n    }\n    // `baseDateTime` and `focusedDateTime` are used as more stable replacements for baseDate and focusedDate\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [focusedDateTime, baseDateTime, isSingleGrid, isDateEnabled, onFocusedDateChange]);\n\n  const onGridKeyDownHandler = (e: React.KeyboardEvent) => {\n    let updatedFocusDate;\n\n    if (focusedDate === null) {\n      return;\n    }\n\n    switch (e.keyCode) {\n      case KeyCode.enter:\n        e.preventDefault();\n        if (focusedDate) {\n          onSelectDate(focusedDate);\n        }\n        return;\n      case KeyCode.right:\n        e.preventDefault();\n        updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, date => addDays(date, 1));\n        break;\n      case KeyCode.left:\n        e.preventDefault();\n        updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, date => addDays(date, -1));\n        break;\n      case KeyCode.up:\n        e.preventDefault();\n        updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, date => addWeeks(date, -1));\n        break;\n      case KeyCode.down:\n        e.preventDefault();\n        updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, date => addWeeks(date, 1));\n        break;\n      default:\n        return;\n    }\n\n    const updatedDateIsVisible = isVisible(updatedFocusDate, baseDate, isSingleGrid);\n\n    if (!updatedDateIsVisible) {\n      const newMonthIsOnLeftSide = !isSingleGrid && isBefore(updatedFocusDate, baseDate);\n\n      onChangeMonth(newMonthIsOnLeftSide ? addMonths(updatedFocusDate, 1) : updatedFocusDate);\n    }\n    onFocusedDateChange(updatedFocusDate);\n  };\n\n  useEffect(() => {\n    // focus current date if the focus is already inside the calendar\n    if (focusedDate !== null && gridHasFocus) {\n      if (focusedDateRef.current && focusedDateRef.current !== document.activeElement) {\n        focusedDateRef.current.focus();\n      }\n    }\n    // `focusedDateTime` is used as a more stable replacement for focusedDate\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [focusedDateTime, gridHasFocus]);\n\n  const onGridBlur = (event: React.FocusEvent) => {\n    /*\n     IE11 does not support event.relatedTarget, but sets document.activeElement to the newly\n     focused element before the onBlur handler is called.\n\n     However, other browsers do not make any guarantees for the value of document.activeElement\n     during the execution of an onBlur handler. Therefore, we have to use event.relatedTarget\n     instead.\n     */\n    const newFocusTarget = event.relatedTarget || document.activeElement;\n    const newFocusTargetIsInGrid = containerRef.current?.contains(newFocusTarget as Node);\n    if (newFocusTarget && !newFocusTargetIsInGrid && gridHasFocus) {\n      setGridHasFocus(false);\n    }\n  };\n\n  const onGridFocus = () => {\n    if (!gridHasFocus) {\n      setGridHasFocus(true);\n    }\n  };\n\n  const focusVisible = useFocusVisible();\n\n  const isRangeVisible =\n    (selectedStartDate && selectedEndDate) || (gridHasFocus && !!focusVisible['data-awsui-focus-visible']);\n\n  const rangeEnds: Date[] = [selectedStartDate ?? focusedDate, selectedEndDate ?? focusedDate].filter(hasValue);\n\n  const rangeStartDate = min(rangeEnds);\n  const rangeEndDate = max(rangeEnds);\n\n  return (\n    <div ref={containerRef} onFocus={onGridFocus} onBlur={onGridBlur}>\n      <InternalSpaceBetween size=\"xs\" direction=\"horizontal\">\n        {!isSingleGrid && (\n          <Grid\n            className={styles['first-grid']}\n            baseDate={addMonths(baseDate, -1)}\n            selectedEndDate={selectedEndDate}\n            selectedStartDate={selectedStartDate}\n            rangeStartDate={isRangeVisible ? rangeStartDate : null}\n            rangeEndDate={isRangeVisible ? rangeEndDate : null}\n            focusedDate={focusedDate}\n            focusedDateRef={focusedDateRef}\n            isDateEnabled={isDateEnabled}\n            onSelectDate={onSelectDate}\n            onGridKeyDownHandler={onGridKeyDownHandler}\n            onFocusedDateChange={onFocusedDateChange}\n            locale={locale}\n            startOfWeek={startOfWeek}\n            todayAriaLabel={todayAriaLabel}\n          />\n        )}\n        <Grid\n          className={styles['second-grid']}\n          baseDate={baseDate}\n          selectedEndDate={selectedEndDate}\n          selectedStartDate={selectedStartDate}\n          rangeStartDate={isRangeVisible ? rangeStartDate : null}\n          rangeEndDate={isRangeVisible ? rangeEndDate : null}\n          focusedDate={focusedDate}\n          focusedDateRef={focusedDateRef}\n          isDateEnabled={isDateEnabled}\n          onSelectDate={onSelectDate}\n          onGridKeyDownHandler={onGridKeyDownHandler}\n          onFocusedDateChange={onFocusedDateChange}\n          locale={locale}\n          startOfWeek={startOfWeek}\n          todayAriaLabel={todayAriaLabel}\n        />\n      </InternalSpaceBetween>\n    </div>\n  );\n};\n"]}

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

@@ -0,0 +1,9 @@
+interface HeaderButtonProps {
+    ariaLabel: string;
+    isPrevious: boolean;
+    focusable: boolean;
+    onChangeMonth: (isPrevious: boolean) => void;
+}
+declare const HeaderButton: ({ ariaLabel, isPrevious, onChangeMonth, focusable }: HeaderButtonProps) => JSX.Element;
+export default HeaderButton;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/date-range-picker/calendar/header/button/index.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,YAAY,wDAAyD,iBAAiB,gBAmB3F,CAAC;AAEF,eAAe,YAAY,CAAC"}