@cloudscape-design/components 3.0.883 → 3.0.885

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

@@ -1,10 +1,11 @@
 /// <reference types="react" />
+import { DateRangePickerProps } from '../../interfaces';
 interface HeaderButtonProps {
     ariaLabel?: string;
-    baseDate: Date;
-    onChangeMonth: (date: Date) => void;
+    onChangePage: (n: number) => void;
+    granularity?: DateRangePickerProps.Granularity;
 }
-export declare function PrevMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps): JSX.Element;
-export declare function NextMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps): JSX.Element;
+export declare function PrevPageButton({ ariaLabel, onChangePage }: HeaderButtonProps): JSX.Element;
+export declare function NextPageButton({ ariaLabel, onChangePage }: HeaderButtonProps): JSX.Element;
 export {};
 //# sourceMappingURL=header-button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"header-button.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/header-button.tsx"],"names":[],"mappings":";AASA,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,IAAI,CAAC;IACf,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,iBAAiB,eAWxF;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,iBAAiB,eAWxF"}
+{"version":3,"file":"header-button.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/header-button.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAIxD,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC;CAChD;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,iBAAiB,eAW5E;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,iBAAiB,eAW5E"}

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

@@ -1,13 +1,13 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import { addMonths } from 'date-fns';
+import clsx from 'clsx';
 import { InternalButton } from '../../../button/internal';
-import styles from '../../styles.css.js';
-export function PrevMonthButton({ ariaLabel, baseDate, onChangeMonth }) {
-    return (React.createElement(InternalButton, { iconName: "angle-left", ariaLabel: ariaLabel, variant: 'icon', onClick: () => onChangeMonth(addMonths(baseDate, -1)), formAction: "none", className: styles['calendar-prev-month-btn'] }));
+import testutilStyles from '../../test-classes/styles.css.js';
+export function PrevPageButton({ ariaLabel, onChangePage }) {
+    return (React.createElement(InternalButton, { iconName: "angle-left", ariaLabel: ariaLabel, variant: 'icon', onClick: () => onChangePage(-1), formAction: "none", className: clsx(testutilStyles[`calendar-prev-page-btn`], testutilStyles[`calendar-prev-month-btn`]) }));
 }
-export function NextMonthButton({ ariaLabel, baseDate, onChangeMonth }) {
-    return (React.createElement(InternalButton, { iconName: "angle-right", ariaLabel: ariaLabel, variant: 'icon', onClick: () => onChangeMonth(addMonths(baseDate, 1)), formAction: "none", className: styles['calendar-next-month-btn'] }));
+export function NextPageButton({ ariaLabel, onChangePage }) {
+    return (React.createElement(InternalButton, { iconName: "angle-right", ariaLabel: ariaLabel, variant: 'icon', onClick: () => onChangePage(1), formAction: "none", className: clsx(testutilStyles[`calendar-next-page-btn`], testutilStyles[`calendar-next-month-btn`]) }));
 }
 //# sourceMappingURL=header-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"header-button.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/header-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAQzC,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAqB;IACvF,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EACrD,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,GAC5C,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAqB;IACvF,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,aAAa,EACtB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EACpD,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,GAC5C,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { addMonths } from 'date-fns';\n\nimport { InternalButton } from '../../../button/internal';\n\nimport styles from '../../styles.css.js';\n\ninterface HeaderButtonProps {\n  ariaLabel?: string;\n  baseDate: Date;\n  onChangeMonth: (date: Date) => void;\n}\n\nexport function PrevMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps) {\n  return (\n    <InternalButton\n      iconName=\"angle-left\"\n      ariaLabel={ariaLabel}\n      variant={'icon'}\n      onClick={() => onChangeMonth(addMonths(baseDate, -1))}\n      formAction=\"none\"\n      className={styles['calendar-prev-month-btn']}\n    />\n  );\n}\n\nexport function NextMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps) {\n  return (\n    <InternalButton\n      iconName=\"angle-right\"\n      ariaLabel={ariaLabel}\n      variant={'icon'}\n      onClick={() => onChangeMonth(addMonths(baseDate, 1))}\n      formAction=\"none\"\n      className={styles['calendar-next-month-btn']}\n    />\n  );\n}\n"]}
+{"version":3,"file":"header-button.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/header-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG1D,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAQ9D,MAAM,UAAU,cAAc,CAAC,EAAE,SAAS,EAAE,YAAY,EAAqB;IAC3E,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAC/B,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,wBAAwB,CAAC,EAAE,cAAc,CAAC,yBAAyB,CAAC,CAAC,GACpG,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAE,SAAS,EAAE,YAAY,EAAqB;IAC3E,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,aAAa,EACtB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAC9B,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,wBAAwB,CAAC,EAAE,cAAc,CAAC,yBAAyB,CAAC,CAAC,GACpG,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport { DateRangePickerProps } from '../../interfaces';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\n\ninterface HeaderButtonProps {\n  ariaLabel?: string;\n  onChangePage: (n: number) => void;\n  granularity?: DateRangePickerProps.Granularity;\n}\n\nexport function PrevPageButton({ ariaLabel, onChangePage }: HeaderButtonProps) {\n  return (\n    <InternalButton\n      iconName=\"angle-left\"\n      ariaLabel={ariaLabel}\n      variant={'icon'}\n      onClick={() => onChangePage(-1)}\n      formAction=\"none\"\n      className={clsx(testutilStyles[`calendar-prev-page-btn`], testutilStyles[`calendar-prev-month-btn`])}\n    />\n  );\n}\n\nexport function NextPageButton({ ariaLabel, onChangePage }: HeaderButtonProps) {\n  return (\n    <InternalButton\n      iconName=\"angle-right\"\n      ariaLabel={ariaLabel}\n      variant={'icon'}\n      onClick={() => onChangePage(1)}\n      formAction=\"none\"\n      className={clsx(testutilStyles[`calendar-next-page-btn`], testutilStyles[`calendar-next-month-btn`])}\n    />\n  );\n}\n"]}

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

@@ -1,13 +1,15 @@
 /// <reference types="react" />
+import { DateRangePickerProps } from '../../interfaces';
 interface CalendarHeaderProps {
     baseDate: Date;
     locale: string;
-    onChangeMonth: (date: Date) => void;
-    previousMonthLabel?: string;
-    nextMonthLabel?: string;
+    onChangePage: (n: number) => void;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
     isSingleGrid: boolean;
     headingIdPrefix: string;
+    granularity?: DateRangePickerProps.Granularity;
 }
-export default function CalendarHeader({ baseDate, locale, onChangeMonth, previousMonthLabel, nextMonthLabel, isSingleGrid, headingIdPrefix, }: CalendarHeaderProps): JSX.Element;
+export default function CalendarHeader({ baseDate, locale, onChangePage, previousPageLabel, nextPageLabel, isSingleGrid, headingIdPrefix, granularity, }: CalendarHeaderProps): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/index.tsx"],"names":[],"mappings":";AAYA,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,MAAM,EACN,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,YAAY,EACZ,eAAe,GAChB,EAAE,mBAAmB,eAkCrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAMxD,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,WAAmB,GACpB,EAAE,mBAAmB,eA4CrB"}

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

@@ -1,23 +1,28 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+import clsx from 'clsx';
 import { add } from 'date-fns';
-import { renderMonthAndYear } from '../../../calendar/utils/intl';
+import { renderMonthAndYear, renderYear } from '../../../calendar/utils/intl';
 import { useInternalI18n } from '../../../i18n/context.js';
 import InternalLiveRegion from '../../../live-region/internal';
-import { NextMonthButton, PrevMonthButton } from './header-button';
+import { NextPageButton, PrevPageButton } from './header-button';
 import styles from '../../styles.css.js';
-export default function CalendarHeader({ baseDate, locale, onChangeMonth, previousMonthLabel, nextMonthLabel, isSingleGrid, headingIdPrefix, }) {
-    const i18n = useInternalI18n('calendar');
-    const prevMonthLabel = renderMonthAndYear(locale, add(baseDate, { months: -1 }));
-    const currentMonthLabel = renderMonthAndYear(locale, baseDate);
+import testutilStyles from '../../test-classes/styles.css.js';
+export default function CalendarHeader({ baseDate, locale, onChangePage, previousPageLabel, nextPageLabel, isSingleGrid, headingIdPrefix, granularity = 'day', }) {
+    const i18n = useInternalI18n('date-range-picker');
+    const isMonthPicker = granularity === 'month';
+    const renderLabel = isMonthPicker ? renderYear : renderMonthAndYear;
+    const prevPageHeaderLabel = renderLabel(locale, add(baseDate, granularity === 'month' ? { years: -1 } : { months: -1 }));
+    const currentPageHeaderLabel = renderLabel(locale, baseDate);
+    const pageUnit = isMonthPicker ? 'year' : 'month';
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles['calendar-header'] },
-            React.createElement(PrevMonthButton, { ariaLabel: i18n('previousMonthAriaLabel', previousMonthLabel), baseDate: baseDate, onChangeMonth: onChangeMonth }),
-            React.createElement("h2", { className: styles['calendar-header-months-wrapper'] },
-                !isSingleGrid && (React.createElement("span", { className: styles['calendar-header-month'], id: `${headingIdPrefix}-prevmonth` }, prevMonthLabel)),
-                React.createElement("span", { className: styles['calendar-header-month'], id: `${headingIdPrefix}-currentmonth` }, currentMonthLabel)),
-            React.createElement(NextMonthButton, { ariaLabel: i18n('nextMonthAriaLabel', nextMonthLabel), baseDate: baseDate, onChangeMonth: onChangeMonth })),
-        React.createElement(InternalLiveRegion, { hidden: true }, isSingleGrid ? currentMonthLabel : `${prevMonthLabel}, ${currentMonthLabel}`)));
+        React.createElement("div", { className: clsx(testutilStyles['calendar-header'], styles['calendar-header']) },
+            React.createElement(PrevPageButton, { ariaLabel: i18n(isMonthPicker ? 'i18nStrings.previousYearAriaLabel' : 'i18nStrings.previousMonthAriaLabel', previousPageLabel), onChangePage: onChangePage }),
+            React.createElement("h2", { className: styles['calendar-header-pages-wrapper'] },
+                !isSingleGrid && (React.createElement("span", { className: styles['calendar-header-page'], id: `${headingIdPrefix}-prev${pageUnit}` }, prevPageHeaderLabel)),
+                React.createElement("span", { className: styles['calendar-header-page'], id: `${headingIdPrefix}-current${pageUnit}` }, currentPageHeaderLabel)),
+            React.createElement(NextPageButton, { ariaLabel: i18n(isMonthPicker ? 'i18nStrings.nextYearAriaLabel' : 'i18nStrings.nextMonthAriaLabel', nextPageLabel), onChangePage: onChangePage })),
+        React.createElement(InternalLiveRegion, { hidden: true }, isSingleGrid ? currentPageHeaderLabel : `${prevPageHeaderLabel}, ${currentPageHeaderLabel}`)));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEnE,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAYzC,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,MAAM,EACN,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,YAAY,EACZ,eAAe,GACK;IACpB,MAAM,IAAI,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IACzC,MAAM,cAAc,GAAG,kBAAkB,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACjF,MAAM,iBAAiB,GAAG,kBAAkB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAE/D,OAAO,CACL;QACE,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;YACvC,oBAAC,eAAe,IACd,SAAS,EAAE,IAAI,CAAC,wBAAwB,EAAE,kBAAkB,CAAC,EAC7D,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,GAC5B;YACF,4BAAI,SAAS,EAAE,MAAM,CAAC,gCAAgC,CAAC;gBACpD,CAAC,YAAY,IAAI,CAChB,8BAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,EAAE,GAAG,eAAe,YAAY,IACjF,cAAc,CACV,CACR;gBACD,8BAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,EAAE,GAAG,eAAe,eAAe,IACpF,iBAAiB,CACb,CACJ;YACL,oBAAC,eAAe,IACd,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,cAAc,CAAC,EACrD,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,GAC5B,CACE;QACN,oBAAC,kBAAkB,IAAC,MAAM,EAAE,IAAI,IAC7B,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,cAAc,KAAK,iBAAiB,EAAE,CAC1D,CACpB,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { add } from 'date-fns';\n\nimport { renderMonthAndYear } from '../../../calendar/utils/intl';\nimport { useInternalI18n } from '../../../i18n/context.js';\nimport InternalLiveRegion from '../../../live-region/internal';\nimport { NextMonthButton, PrevMonthButton } from './header-button';\n\nimport styles from '../../styles.css.js';\n\ninterface CalendarHeaderProps {\n  baseDate: Date;\n  locale: string;\n  onChangeMonth: (date: Date) => void;\n  previousMonthLabel?: string;\n  nextMonthLabel?: string;\n  isSingleGrid: boolean;\n  headingIdPrefix: string;\n}\n\nexport default function CalendarHeader({\n  baseDate,\n  locale,\n  onChangeMonth,\n  previousMonthLabel,\n  nextMonthLabel,\n  isSingleGrid,\n  headingIdPrefix,\n}: CalendarHeaderProps) {\n  const i18n = useInternalI18n('calendar');\n  const prevMonthLabel = renderMonthAndYear(locale, add(baseDate, { months: -1 }));\n  const currentMonthLabel = renderMonthAndYear(locale, baseDate);\n\n  return (\n    <>\n      <div className={styles['calendar-header']}>\n        <PrevMonthButton\n          ariaLabel={i18n('previousMonthAriaLabel', previousMonthLabel)}\n          baseDate={baseDate}\n          onChangeMonth={onChangeMonth}\n        />\n        <h2 className={styles['calendar-header-months-wrapper']}>\n          {!isSingleGrid && (\n            <span className={styles['calendar-header-month']} id={`${headingIdPrefix}-prevmonth`}>\n              {prevMonthLabel}\n            </span>\n          )}\n          <span className={styles['calendar-header-month']} id={`${headingIdPrefix}-currentmonth`}>\n            {currentMonthLabel}\n          </span>\n        </h2>\n        <NextMonthButton\n          ariaLabel={i18n('nextMonthAriaLabel', nextMonthLabel)}\n          baseDate={baseDate}\n          onChangeMonth={onChangeMonth}\n        />\n      </div>\n      <InternalLiveRegion hidden={true}>\n        {isSingleGrid ? currentMonthLabel : `${prevMonthLabel}, ${currentMonthLabel}`}\n      </InternalLiveRegion>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjE,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAa9D,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,WAAW,GAAG,KAAK,GACC;IACpB,MAAM,IAAI,GAAG,eAAe,CAAC,mBAAmB,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,WAAW,KAAK,OAAO,CAAC;IAC9C,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC;IACpE,MAAM,mBAAmB,GAAG,WAAW,CACrC,MAAM,EACN,GAAG,CAAC,QAAQ,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CACxE,CAAC;IACF,MAAM,sBAAsB,GAAG,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC7D,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAElD,OAAO,CACL;QACE,6BAAK,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAC;YAChF,oBAAC,cAAc,IACb,SAAS,EAAE,IAAI,CACb,aAAa,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,oCAAoC,EAC1F,iBAAiB,CAClB,EACD,YAAY,EAAE,YAAY,GAC1B;YACF,4BAAI,SAAS,EAAE,MAAM,CAAC,+BAA+B,CAAC;gBACnD,CAAC,YAAY,IAAI,CAChB,8BAAM,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,EAAE,EAAE,GAAG,eAAe,QAAQ,QAAQ,EAAE,IACtF,mBAAmB,CACf,CACR;gBACD,8BAAM,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,EAAE,EAAE,GAAG,eAAe,WAAW,QAAQ,EAAE,IACzF,sBAAsB,CAClB,CACJ;YACL,oBAAC,cAAc,IACb,SAAS,EAAE,IAAI,CACb,aAAa,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,gCAAgC,EAClF,aAAa,CACd,EACD,YAAY,EAAE,YAAY,GAC1B,CACE;QACN,oBAAC,kBAAkB,IAAC,MAAM,EAAE,IAAI,IAC7B,YAAY,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,GAAG,mBAAmB,KAAK,sBAAsB,EAAE,CACzE,CACpB,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { add } from 'date-fns';\n\nimport { renderMonthAndYear, renderYear } from '../../../calendar/utils/intl';\nimport { useInternalI18n } from '../../../i18n/context.js';\nimport InternalLiveRegion from '../../../live-region/internal';\nimport { DateRangePickerProps } from '../../interfaces';\nimport { NextPageButton, PrevPageButton } from './header-button';\n\nimport styles from '../../styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\n\ninterface CalendarHeaderProps {\n  baseDate: Date;\n  locale: string;\n  onChangePage: (n: number) => void;\n  previousPageLabel?: string;\n  nextPageLabel?: string;\n  isSingleGrid: boolean;\n  headingIdPrefix: string;\n  granularity?: DateRangePickerProps.Granularity;\n}\n\nexport default function CalendarHeader({\n  baseDate,\n  locale,\n  onChangePage,\n  previousPageLabel,\n  nextPageLabel,\n  isSingleGrid,\n  headingIdPrefix,\n  granularity = 'day',\n}: CalendarHeaderProps) {\n  const i18n = useInternalI18n('date-range-picker');\n  const isMonthPicker = granularity === 'month';\n  const renderLabel = isMonthPicker ? renderYear : renderMonthAndYear;\n  const prevPageHeaderLabel = renderLabel(\n    locale,\n    add(baseDate, granularity === 'month' ? { years: -1 } : { months: -1 })\n  );\n  const currentPageHeaderLabel = renderLabel(locale, baseDate);\n  const pageUnit = isMonthPicker ? 'year' : 'month';\n\n  return (\n    <>\n      <div className={clsx(testutilStyles['calendar-header'], styles['calendar-header'])}>\n        <PrevPageButton\n          ariaLabel={i18n(\n            isMonthPicker ? 'i18nStrings.previousYearAriaLabel' : 'i18nStrings.previousMonthAriaLabel',\n            previousPageLabel\n          )}\n          onChangePage={onChangePage}\n        />\n        <h2 className={styles['calendar-header-pages-wrapper']}>\n          {!isSingleGrid && (\n            <span className={styles['calendar-header-page']} id={`${headingIdPrefix}-prev${pageUnit}`}>\n              {prevPageHeaderLabel}\n            </span>\n          )}\n          <span className={styles['calendar-header-page']} id={`${headingIdPrefix}-current${pageUnit}`}>\n            {currentPageHeaderLabel}\n          </span>\n        </h2>\n        <NextPageButton\n          ariaLabel={i18n(\n            isMonthPicker ? 'i18nStrings.nextYearAriaLabel' : 'i18nStrings.nextMonthAriaLabel',\n            nextPageLabel\n          )}\n          onChangePage={onChangePage}\n        />\n      </div>\n      <InternalLiveRegion hidden={true}>\n        {isSingleGrid ? currentPageHeaderLabel : `${prevPageHeaderLabel}, ${currentPageHeaderLabel}`}\n      </InternalLiveRegion>\n    </>\n  );\n}\n"]}

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

@@ -13,6 +13,7 @@ export interface DateRangePickerCalendarProps extends BaseComponentProps {
     dateOnly?: boolean;
     timeInputFormat?: TimeInputProps.Format;
     customAbsoluteRangeControl: DateRangePickerProps.AbsoluteRangeControl | undefined;
+    granularity?: DateRangePickerProps.Granularity;
 }
-export default function DateRangePickerCalendar({ value, setValue, locale, startOfWeek, isDateEnabled, dateDisabledReason, i18nStrings, dateOnly, timeInputFormat, customAbsoluteRangeControl, }: DateRangePickerCalendarProps): JSX.Element;
+export default function DateRangePickerCalendar({ value, setValue, locale, startOfWeek, isDateEnabled, dateDisabledReason, i18nStrings, dateOnly, timeInputFormat, customAbsoluteRangeControl, granularity, }: DateRangePickerCalendarProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAOxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAOnE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAQ/E,MAAM,WAAW,4BAA6B,SAAQ,kBAAkB;IACtE,KAAK,EAAE,oBAAoB,CAAC,oBAAoB,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACxC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAC5C,WAAW,CAAC,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACxC,0BAA0B,EAAE,oBAAoB,CAAC,oBAAoB,GAAG,SAAS,CAAC;CACnF;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,KAAK,EACL,QAAQ,EACR,MAAW,EACX,WAAW,EACX,aAA0B,EAC1B,kBAA6B,EAC7B,WAAW,EACX,QAAgB,EAChB,eAA4B,EAC5B,0BAA0B,GAC3B,EAAE,4BAA4B,eAqO9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAmBxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAOnE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAS/E,MAAM,WAAW,4BAA6B,SAAQ,kBAAkB;IACtE,KAAK,EAAE,oBAAoB,CAAC,oBAAoB,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACxC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAC5C,WAAW,CAAC,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACxC,0BAA0B,EAAE,oBAAoB,CAAC,oBAAoB,GAAG,SAAS,CAAC;IAClF,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,KAAK,EACL,QAAQ,EACR,MAAW,EACX,WAAW,EACX,aAA0B,EAC1B,kBAA6B,EAC7B,WAAW,EACX,QAAgB,EAChB,eAA4B,EAC5B,0BAA0B,EAC1B,WAAmB,GACpB,EAAE,4BAA4B,eAyP9B"}

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

@@ -2,67 +2,67 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useState } from 'react';
 import clsx from 'clsx';
-import { addMonths, endOfDay, isAfter, isBefore, isSameMonth, startOfDay, startOfMonth } from 'date-fns';
+import { addMonths, addYears, endOfDay, isAfter, isBefore, isSameMonth, isSameYear, startOfDay, startOfMonth, startOfYear, } from 'date-fns';
 import { getDateLabel, renderTimeLabel } from '../../calendar/utils/intl';
 import { getBaseDay } from '../../calendar/utils/navigation-day';
+import { getBaseMonth } from '../../calendar/utils/navigation-month';
 import { useInternalI18n } from '../../i18n/context.js';
 import { useMobile } from '../../internal/hooks/use-mobile/index.js';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
-import { formatDateTime, parseDate, splitDateTime } from '../../internal/utils/date-time';
+import { formatDate, formatDateTime, parseDate, splitDateTime } from '../../internal/utils/date-time';
 import { normalizeLocale, normalizeStartOfWeek } from '../../internal/utils/locale';
 import InternalLiveRegion from '../../live-region/internal';
 import SpaceBetween from '../../space-between/internal';
 import { Grids } from './grids';
 import CalendarHeader from './header';
 import RangeInputs from './range-inputs.js';
-import { findDateToFocus, findMonthToDisplay } from './utils';
+import { findDateToFocus, findMonthToDisplay, findMonthToFocus, findYearToDisplay } from './utils';
 import styles from '../styles.css.js';
-export default function DateRangePickerCalendar({ value, setValue, locale = '', startOfWeek, isDateEnabled = () => true, dateDisabledReason = () => '', i18nStrings, dateOnly = false, timeInputFormat = 'hh:mm:ss', customAbsoluteRangeControl, }) {
+import testutilStyles from '../test-classes/styles.css.js';
+export default function DateRangePickerCalendar({ value, setValue, locale = '', startOfWeek, isDateEnabled = () => true, dateDisabledReason = () => '', i18nStrings, dateOnly = false, timeInputFormat = 'hh:mm:ss', customAbsoluteRangeControl, granularity = 'day', }) {
+    var _a, _b;
     const isSingleGrid = useMobile();
+    const isMonthPicker = granularity === 'month';
+    const hideTime = isMonthPicker || dateOnly;
     const normalizedLocale = normalizeLocale('DateRangePicker', locale);
     const normalizedStartOfWeek = normalizeStartOfWeek(startOfWeek, normalizedLocale);
     const i18n = useInternalI18n('date-range-picker');
     const [announcement, setAnnouncement] = useState('');
-    const [currentMonth, setCurrentMonth] = useState(() => findMonthToDisplay(value, isSingleGrid));
+    const findPageToDisplay = isMonthPicker ? findYearToDisplay : findMonthToDisplay;
+    const isSamePage = isMonthPicker ? isSameYear : isSameMonth;
+    const addPage = isMonthPicker ? addYears : addMonths;
+    const startOfPage = isMonthPicker ? startOfYear : startOfMonth;
+    const findItemToFocus = isMonthPicker ? findMonthToFocus : findDateToFocus;
+    const [currentPage, setCurrentPage] = useState(() => findPageToDisplay(value, isSingleGrid));
     const [focusedDate, setFocusedDate] = useState(() => {
         if (value.start.date) {
             const startDate = parseDate(value.start.date);
-            if (isSameMonth(startDate, currentMonth)) {
+            if (isSamePage(startDate, currentPage)) {
                 return startDate;
             }
-            if (!isSingleGrid && isSameMonth(startDate, addMonths(currentMonth, -1))) {
+            if (!isSingleGrid && isSamePage(startDate, addPage(currentPage, -1))) {
                 return startDate;
             }
         }
-        return findDateToFocus(parseDate(value.start.date), currentMonth, isDateEnabled);
+        return findItemToFocus(parseDate(value.start.date), currentPage, isDateEnabled);
     });
-    const updateCurrentMonth = (startDate) => {
-        if (startDate.length >= 8) {
-            const newCurrentMonth = startOfMonth(parseDate(startDate));
-            setCurrentMonth(isSingleGrid ? newCurrentMonth : addMonths(newCurrentMonth, 1));
+    const updateCurrentPage = (startDate) => {
+        if ((isMonthPicker && startDate.length >= 4) || startDate.length >= 8) {
+            const newCurrentPage = startOfPage(parseDate(startDate));
+            setCurrentPage(isSingleGrid ? newCurrentPage : addPage(newCurrentPage, 1));
         }
     };
     // 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
     const announceStart = (startDate) => {
-        return (i18n('i18nStrings.startDateLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.startDateLabel) +
-            ', ' +
-            getDateLabel(normalizedLocale, startDate) +
-            ', ' +
-            i18n('i18nStrings.startTimeLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.startTimeLabel) +
-            ', ' +
-            renderTimeLabel(normalizedLocale, startDate, timeInputFormat) +
-            '. ');
+        return `${i18n('i18nStrings.startDateLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.startDateLabel)}, ${getDateLabel(normalizedLocale, startDate)}${hideTime
+            ? ''
+            : `, ${i18n('i18nStrings.startTimeLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.startTimeLabel)}, ${renderTimeLabel(normalizedLocale, startDate, timeInputFormat)}`}. `;
     };
     const announceEnd = (endDate) => {
-        return (i18n('i18nStrings.endDateLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.endDateLabel) +
-            ', ' +
-            getDateLabel(normalizedLocale, endDate) +
-            ', ' +
-            i18n('i18nStrings.endTimeLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.endTimeLabel) +
-            ', ' +
-            renderTimeLabel(normalizedLocale, endDate, timeInputFormat) +
-            '. ');
+        return `${i18n('i18nStrings.endDateLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.endDateLabel)}, ${getDateLabel(normalizedLocale, endDate)}${hideTime
+            ? ''
+            : `, ${i18n('i18nStrings.endTimeLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.endTimeLabel)}, ${renderTimeLabel(normalizedLocale, endDate, timeInputFormat)}`}. `;
     };
     const renderSelectedAbsoluteRangeAriaLive = i18n('i18nStrings.renderSelectedAbsoluteRangeAriaLive', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.renderSelectedAbsoluteRangeAriaLive, format => (startDate, endDate) => format({ startDate, endDate }));
     const announceRange = (startDate, endDate) => {
@@ -115,7 +115,7 @@ export default function DateRangePickerCalendar({ value, setValue, locale = '',
                 announcement = announceStart(newStart) + announceRange(newStart, existingEndDate);
             }
         }
-        const formatValue = (date, previous) => {
+        const formatValue = (date, previous, includeTime) => {
             if (date === null) {
                 // explicitly reset to empty
                 return { date: '', time: '' };
@@ -124,28 +124,36 @@ export default function DateRangePickerCalendar({ value, setValue, locale = '',
                 // keep old value
                 return previous;
             }
+            if (!includeTime) {
+                return {
+                    date: formatDate(date),
+                    time: '',
+                };
+            }
             return splitDateTime(formatDateTime(date));
         };
         setValue({
-            start: formatValue(newStart, value.start),
-            end: formatValue(newEnd, value.end),
+            start: formatValue(newStart, value.start, !hideTime),
+            end: formatValue(newEnd, value.end, !hideTime),
         });
         setAnnouncement(announcement);
     };
-    const onHeaderChangeMonthHandler = (newCurrentMonth) => {
-        setCurrentMonth(newCurrentMonth);
-        const newBaseDateMonth = isSingleGrid ? newCurrentMonth : addMonths(newCurrentMonth, -1);
-        const newBaseDate = getBaseDay(newBaseDateMonth, isDateEnabled);
+    const onHeaderChangePageHandler = (amount) => {
+        const addPageFn = isMonthPicker ? addYears : addMonths;
+        const getBaseFn = isMonthPicker ? getBaseMonth : getBaseDay;
+        const newBasePage = addPageFn(currentPage, amount);
+        setCurrentPage(newBasePage);
+        const newBaseDate = getBaseFn(newBasePage, isDateEnabled);
         setFocusedDate(newBaseDate);
     };
     const onChangeStartDate = (value) => {
         setValue((oldValue) => (Object.assign(Object.assign({}, oldValue), { start: Object.assign(Object.assign({}, oldValue.start), { date: value }) })));
-        updateCurrentMonth(value);
+        updateCurrentPage(value);
     };
     const interceptedSetValue = newValue => {
         setValue(oldValue => {
             const updated = typeof newValue === 'function' ? newValue(oldValue) : newValue;
-            updateCurrentMonth(updated.start.date);
+            updateCurrentPage(updated.start.date);
             return updated;
         });
     };
@@ -158,10 +166,10 @@ export default function DateRangePickerCalendar({ value, setValue, locale = '',
                 React.createElement("div", { className: clsx(styles.calendar, {
                         [styles['one-grid']]: isSingleGrid,
                     }) },
-                    React.createElement(CalendarHeader, { baseDate: currentMonth, locale: normalizedLocale, onChangeMonth: onHeaderChangeMonthHandler, previousMonthLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.previousMonthAriaLabel, nextMonthLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.nextMonthAriaLabel, isSingleGrid: isSingleGrid, headingIdPrefix: headingIdPrefix }),
-                    React.createElement(Grids, { isSingleGrid: isSingleGrid, locale: normalizedLocale, baseDate: currentMonth, focusedDate: focusedDate, onFocusedDateChange: setFocusedDate, isDateEnabled: isDateEnabled, dateDisabledReason: dateDisabledReason, onSelectDate: onSelectDateHandler, onChangeMonth: setCurrentMonth, startOfWeek: normalizedStartOfWeek, todayAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.todayAriaLabel, selectedStartDate: parseDate(value.start.date, true), selectedEndDate: parseDate(value.end.date, true), headingIdPrefix: headingIdPrefix })),
-                React.createElement(RangeInputs, { startDate: value.start.date, onChangeStartDate: onChangeStartDate, startTime: value.start.time, onChangeStartTime: value => setValue(oldValue => (Object.assign(Object.assign({}, oldValue), { start: Object.assign(Object.assign({}, oldValue.start), { time: value }) }))), endDate: value.end.date, onChangeEndDate: value => setValue(oldValue => (Object.assign(Object.assign({}, oldValue), { end: Object.assign(Object.assign({}, oldValue.end), { date: value }) }))), endTime: value.end.time, onChangeEndTime: value => setValue(oldValue => (Object.assign(Object.assign({}, oldValue), { end: Object.assign(Object.assign({}, oldValue.end), { time: value }) }))), i18nStrings: i18nStrings, dateOnly: dateOnly, timeInputFormat: timeInputFormat }),
+                    React.createElement(CalendarHeader, { granularity: granularity, baseDate: currentPage, locale: normalizedLocale, onChangePage: onHeaderChangePageHandler, previousPageLabel: isMonthPicker ? i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.previousYearAriaLabel : i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.previousMonthAriaLabel, nextPageLabel: isMonthPicker ? i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.nextYearAriaLabel : i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.nextMonthAriaLabel, isSingleGrid: isSingleGrid, headingIdPrefix: headingIdPrefix }),
+                    React.createElement(Grids, { granularity: granularity, isSingleGrid: isSingleGrid, locale: normalizedLocale, baseDate: currentPage, focusedDate: focusedDate, onFocusedDateChange: setFocusedDate, isDateEnabled: isDateEnabled, dateDisabledReason: dateDisabledReason, onSelectDate: onSelectDateHandler, onPageChange: setCurrentPage, startOfWeek: normalizedStartOfWeek, todayAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.todayAriaLabel, currentMonthAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.currentMonthAriaLabel, selectedStartDate: ((_a = value === null || value === void 0 ? void 0 : value.start) === null || _a === void 0 ? void 0 : _a.date) ? parseDate(value.start.date, !isMonthPicker) : null, selectedEndDate: ((_b = value === null || value === void 0 ? void 0 : value.end) === null || _b === void 0 ? void 0 : _b.date) ? parseDate(value.end.date, !isMonthPicker) : null, headingIdPrefix: headingIdPrefix })),
+                React.createElement(RangeInputs, { startDate: value.start.date, onChangeStartDate: onChangeStartDate, startTime: value.start.time, onChangeStartTime: value => setValue(oldValue => (Object.assign(Object.assign({}, oldValue), { start: Object.assign(Object.assign({}, oldValue.start), { time: value }) }))), endDate: value.end.date, onChangeEndDate: value => setValue(oldValue => (Object.assign(Object.assign({}, oldValue), { end: Object.assign(Object.assign({}, oldValue.end), { date: value }) }))), endTime: value.end.time, onChangeEndTime: value => setValue(oldValue => (Object.assign(Object.assign({}, oldValue), { end: Object.assign(Object.assign({}, oldValue.end), { time: value }) }))), i18nStrings: i18nStrings, dateOnly: dateOnly, timeInputFormat: timeInputFormat, granularity: granularity }),
                 customAbsoluteRangeControl && React.createElement("div", null, customAbsoluteRangeControl(value, interceptedSetValue)))),
-        React.createElement(InternalLiveRegion, { className: styles['calendar-aria-live'], hidden: true, tagName: "span" }, announcement)));
+        React.createElement(InternalLiveRegion, { className: testutilStyles['calendar-aria-live'], hidden: true, tagName: "span" }, announcement)));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +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\n\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\nimport { addMonths, endOfDay, isAfter, isBefore, isSameMonth, startOfDay, startOfMonth } from 'date-fns';\n\nimport { getDateLabel, renderTimeLabel } from '../../calendar/utils/intl';\nimport { getBaseDay } from '../../calendar/utils/navigation-day';\nimport { useInternalI18n } from '../../i18n/context.js';\nimport { BaseComponentProps } from '../../internal/base-component';\nimport { useMobile } from '../../internal/hooks/use-mobile/index.js';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { formatDateTime, parseDate, splitDateTime } from '../../internal/utils/date-time';\nimport { normalizeLocale, normalizeStartOfWeek } from '../../internal/utils/locale';\nimport InternalLiveRegion from '../../live-region/internal';\nimport SpaceBetween from '../../space-between/internal';\nimport { TimeInputProps } from '../../time-input/interfaces';\nimport { DateRangePickerProps, RangeCalendarI18nStrings } from '../interfaces';\nimport { Grids } from './grids';\nimport CalendarHeader from './header';\nimport RangeInputs from './range-inputs.js';\nimport { findDateToFocus, findMonthToDisplay } from './utils';\n\nimport styles from '../styles.css.js';\n\nexport interface DateRangePickerCalendarProps extends BaseComponentProps {\n  value: DateRangePickerProps.PendingAbsoluteValue;\n  setValue: React.Dispatch<React.SetStateAction<DateRangePickerProps.PendingAbsoluteValue>>;\n  locale?: string;\n  startOfWeek?: number;\n  isDateEnabled?: (date: Date) => boolean;\n  dateDisabledReason?: (date: Date) => string;\n  i18nStrings?: RangeCalendarI18nStrings;\n  dateOnly?: boolean;\n  timeInputFormat?: TimeInputProps.Format;\n  customAbsoluteRangeControl: DateRangePickerProps.AbsoluteRangeControl | undefined;\n}\n\nexport default function DateRangePickerCalendar({\n  value,\n  setValue,\n  locale = '',\n  startOfWeek,\n  isDateEnabled = () => true,\n  dateDisabledReason = () => '',\n  i18nStrings,\n  dateOnly = false,\n  timeInputFormat = 'hh:mm:ss',\n  customAbsoluteRangeControl,\n}: DateRangePickerCalendarProps) {\n  const isSingleGrid = useMobile();\n  const normalizedLocale = normalizeLocale('DateRangePicker', locale);\n  const normalizedStartOfWeek = normalizeStartOfWeek(startOfWeek, normalizedLocale);\n  const i18n = useInternalI18n('date-range-picker');\n\n  const [announcement, setAnnouncement] = useState('');\n  const [currentMonth, setCurrentMonth] = useState(() => findMonthToDisplay(value, isSingleGrid));\n  const [focusedDate, setFocusedDate] = useState<Date | null>(() => {\n    if (value.start.date) {\n      const startDate = parseDate(value.start.date);\n      if (isSameMonth(startDate, currentMonth)) {\n        return startDate;\n      }\n      if (!isSingleGrid && isSameMonth(startDate, addMonths(currentMonth, -1))) {\n        return startDate;\n      }\n    }\n    return findDateToFocus(parseDate(value.start.date), currentMonth, isDateEnabled);\n  });\n\n  const updateCurrentMonth = (startDate: string) => {\n    if (startDate.length >= 8) {\n      const newCurrentMonth = startOfMonth(parseDate(startDate));\n      setCurrentMonth(isSingleGrid ? newCurrentMonth : addMonths(newCurrentMonth, 1));\n    }\n  };\n\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      i18n('i18nStrings.startDateLabel', i18nStrings?.startDateLabel) +\n      ', ' +\n      getDateLabel(normalizedLocale, startDate) +\n      ', ' +\n      i18n('i18nStrings.startTimeLabel', i18nStrings?.startTimeLabel) +\n      ', ' +\n      renderTimeLabel(normalizedLocale, startDate, timeInputFormat) +\n      '. '\n    );\n  };\n\n  const announceEnd = (endDate: Date) => {\n    return (\n      i18n('i18nStrings.endDateLabel', i18nStrings?.endDateLabel) +\n      ', ' +\n      getDateLabel(normalizedLocale, endDate) +\n      ', ' +\n      i18n('i18nStrings.endTimeLabel', i18nStrings?.endTimeLabel) +\n      ', ' +\n      renderTimeLabel(normalizedLocale, endDate, timeInputFormat) +\n      '. '\n    );\n  };\n\n  const renderSelectedAbsoluteRangeAriaLive = i18n(\n    'i18nStrings.renderSelectedAbsoluteRangeAriaLive',\n    i18nStrings?.renderSelectedAbsoluteRangeAriaLive,\n    format => (startDate, endDate) => format({ startDate, endDate })\n  );\n\n  const announceRange = (startDate: Date, endDate: Date) => {\n    if (!renderSelectedAbsoluteRangeAriaLive) {\n      return `${getDateLabel(normalizedLocale, startDate)} – ${getDateLabel(normalizedLocale, endDate)}`;\n    }\n    return renderSelectedAbsoluteRangeAriaLive(\n      getDateLabel(normalizedLocale, startDate),\n      getDateLabel(normalizedLocale, endDate)\n    );\n  };\n\n  const onSelectDateHandler = (selectedDate: Date) => {\n    const { start, end } = value;\n    let newStart: Date | undefined = undefined;\n    let newEnd: Date | null | undefined = undefined;\n    let announcement = '';\n\n    // If both fields are empty, we set the start date\n    if (!start.date && !end.date) {\n      newStart = startOfDay(selectedDate);\n      announcement = announceStart(newStart);\n    }\n    // If both fields are set, we start new\n    else if (start.date && end.date) {\n      newStart = startOfDay(selectedDate);\n      newEnd = null;\n      announcement = announceStart(newStart);\n    }\n    // If only the END date is empty, we fill it (and swap dates if needed)\n    else if (start.date && !end.date) {\n      const parsedStartDate = parseDate(start.date);\n\n      if (isBefore(selectedDate, parsedStartDate)) {\n        // The user has selected the range backwards, so we swap start and end\n        newStart = startOfDay(selectedDate);\n        newEnd = endOfDay(parsedStartDate);\n        announcement = announceStart(newStart) + announceRange(newStart, newEnd);\n      } else {\n        newEnd = endOfDay(selectedDate);\n        announcement = announceEnd(newEnd) + announceRange(parsedStartDate, newEnd);\n      }\n    }\n    // If only the START date is empty, we fill it (and swap dates if needed)\n    else if (!start.date && end.date) {\n      const existingEndDate = parseDate(end.date);\n\n      if (isAfter(selectedDate, existingEndDate)) {\n        // The user has selected the range backwards, so we swap start and end\n        newStart = startOfDay(existingEndDate);\n        newEnd = endOfDay(selectedDate);\n        announcement = announceEnd(newEnd) + announceRange(newStart, newEnd);\n      } else {\n        newStart = startOfDay(selectedDate);\n        announcement = announceStart(newStart) + announceRange(newStart, existingEndDate);\n      }\n    }\n\n    const formatValue = (\n      date: Date | null | undefined,\n      previous: DateRangePickerProps.DateTimeStrings\n    ): DateRangePickerProps.DateTimeStrings => {\n      if (date === null) {\n        // explicitly reset to empty\n        return { date: '', time: '' };\n      } else if (date === undefined) {\n        // keep old value\n        return previous;\n      }\n      return splitDateTime(formatDateTime(date));\n    };\n\n    setValue({\n      start: formatValue(newStart, value.start),\n      end: formatValue(newEnd, value.end),\n    });\n    setAnnouncement(announcement);\n  };\n\n  const onHeaderChangeMonthHandler = (newCurrentMonth: Date) => {\n    setCurrentMonth(newCurrentMonth);\n\n    const newBaseDateMonth = isSingleGrid ? newCurrentMonth : addMonths(newCurrentMonth, -1);\n    const newBaseDate = getBaseDay(newBaseDateMonth, isDateEnabled);\n    setFocusedDate(newBaseDate);\n  };\n\n  const onChangeStartDate = (value: string) => {\n    setValue((oldValue: DateRangePickerProps.PendingAbsoluteValue) => ({\n      ...oldValue,\n      start: { ...oldValue.start, date: value },\n    }));\n    updateCurrentMonth(value);\n  };\n\n  const interceptedSetValue: DateRangePickerCalendarProps['setValue'] = newValue => {\n    setValue(oldValue => {\n      const updated = typeof newValue === 'function' ? newValue(oldValue) : newValue;\n      updateCurrentMonth(updated.start.date);\n      return updated;\n    });\n  };\n\n  const headingIdPrefix = useUniqueId('date-range-picker-calendar-heading');\n  return (\n    <>\n      <div\n        className={clsx(styles['calendar-container'], {\n          [styles['one-grid']]: isSingleGrid,\n        })}\n      >\n        <SpaceBetween size=\"s\">\n          <div\n            className={clsx(styles.calendar, {\n              [styles['one-grid']]: isSingleGrid,\n            })}\n          >\n            <CalendarHeader\n              baseDate={currentMonth}\n              locale={normalizedLocale}\n              onChangeMonth={onHeaderChangeMonthHandler}\n              previousMonthLabel={i18nStrings?.previousMonthAriaLabel}\n              nextMonthLabel={i18nStrings?.nextMonthAriaLabel}\n              isSingleGrid={isSingleGrid}\n              headingIdPrefix={headingIdPrefix}\n            />\n\n            <Grids\n              isSingleGrid={isSingleGrid}\n              locale={normalizedLocale}\n              baseDate={currentMonth}\n              focusedDate={focusedDate}\n              onFocusedDateChange={setFocusedDate}\n              isDateEnabled={isDateEnabled}\n              dateDisabledReason={dateDisabledReason}\n              onSelectDate={onSelectDateHandler}\n              onChangeMonth={setCurrentMonth}\n              startOfWeek={normalizedStartOfWeek}\n              todayAriaLabel={i18nStrings?.todayAriaLabel}\n              selectedStartDate={parseDate(value.start.date, true)}\n              selectedEndDate={parseDate(value.end.date, true)}\n              headingIdPrefix={headingIdPrefix}\n            />\n          </div>\n\n          <RangeInputs\n            startDate={value.start.date}\n            onChangeStartDate={onChangeStartDate}\n            startTime={value.start.time}\n            onChangeStartTime={value =>\n              setValue(oldValue => ({ ...oldValue, start: { ...oldValue.start, time: value } }))\n            }\n            endDate={value.end.date}\n            onChangeEndDate={value => setValue(oldValue => ({ ...oldValue, end: { ...oldValue.end, date: value } }))}\n            endTime={value.end.time}\n            onChangeEndTime={value => setValue(oldValue => ({ ...oldValue, end: { ...oldValue.end, time: value } }))}\n            i18nStrings={i18nStrings}\n            dateOnly={dateOnly}\n            timeInputFormat={timeInputFormat}\n          />\n          {customAbsoluteRangeControl && <div>{customAbsoluteRangeControl(value, interceptedSetValue)}</div>}\n        </SpaceBetween>\n      </div>\n      {/* Can't use message here because the contents are checked in tests */}\n      <InternalLiveRegion className={styles['calendar-aria-live']} hidden={true} tagName=\"span\">\n        {announcement}\n      </InternalLiveRegion>\n    </>\n  );\n}\n"]}
+{"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\n\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\nimport {\n  addMonths,\n  addYears,\n  endOfDay,\n  isAfter,\n  isBefore,\n  isSameMonth,\n  isSameYear,\n  startOfDay,\n  startOfMonth,\n  startOfYear,\n} from 'date-fns';\n\nimport { getDateLabel, renderTimeLabel } from '../../calendar/utils/intl';\nimport { getBaseDay } from '../../calendar/utils/navigation-day';\nimport { getBaseMonth } from '../../calendar/utils/navigation-month';\nimport { useInternalI18n } from '../../i18n/context.js';\nimport { BaseComponentProps } from '../../internal/base-component';\nimport { useMobile } from '../../internal/hooks/use-mobile/index.js';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { formatDate, formatDateTime, parseDate, splitDateTime } from '../../internal/utils/date-time';\nimport { normalizeLocale, normalizeStartOfWeek } from '../../internal/utils/locale';\nimport InternalLiveRegion from '../../live-region/internal';\nimport SpaceBetween from '../../space-between/internal';\nimport { TimeInputProps } from '../../time-input/interfaces';\nimport { DateRangePickerProps, RangeCalendarI18nStrings } from '../interfaces';\nimport { Grids } from './grids';\nimport CalendarHeader from './header';\nimport RangeInputs from './range-inputs.js';\nimport { findDateToFocus, findMonthToDisplay, findMonthToFocus, findYearToDisplay } from './utils';\n\nimport styles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport interface DateRangePickerCalendarProps extends BaseComponentProps {\n  value: DateRangePickerProps.PendingAbsoluteValue;\n  setValue: React.Dispatch<React.SetStateAction<DateRangePickerProps.PendingAbsoluteValue>>;\n  locale?: string;\n  startOfWeek?: number;\n  isDateEnabled?: (date: Date) => boolean;\n  dateDisabledReason?: (date: Date) => string;\n  i18nStrings?: RangeCalendarI18nStrings;\n  dateOnly?: boolean;\n  timeInputFormat?: TimeInputProps.Format;\n  customAbsoluteRangeControl: DateRangePickerProps.AbsoluteRangeControl | undefined;\n  granularity?: DateRangePickerProps.Granularity;\n}\n\nexport default function DateRangePickerCalendar({\n  value,\n  setValue,\n  locale = '',\n  startOfWeek,\n  isDateEnabled = () => true,\n  dateDisabledReason = () => '',\n  i18nStrings,\n  dateOnly = false,\n  timeInputFormat = 'hh:mm:ss',\n  customAbsoluteRangeControl,\n  granularity = 'day',\n}: DateRangePickerCalendarProps) {\n  const isSingleGrid = useMobile();\n  const isMonthPicker = granularity === 'month';\n  const hideTime = isMonthPicker || dateOnly;\n  const normalizedLocale = normalizeLocale('DateRangePicker', locale);\n  const normalizedStartOfWeek = normalizeStartOfWeek(startOfWeek, normalizedLocale);\n  const i18n = useInternalI18n('date-range-picker');\n\n  const [announcement, setAnnouncement] = useState('');\n  const findPageToDisplay = isMonthPicker ? findYearToDisplay : findMonthToDisplay;\n  const isSamePage = isMonthPicker ? isSameYear : isSameMonth;\n  const addPage = isMonthPicker ? addYears : addMonths;\n  const startOfPage = isMonthPicker ? startOfYear : startOfMonth;\n  const findItemToFocus = isMonthPicker ? findMonthToFocus : findDateToFocus;\n  const [currentPage, setCurrentPage] = useState(() => findPageToDisplay(value, isSingleGrid));\n  const [focusedDate, setFocusedDate] = useState<Date | null>(() => {\n    if (value.start.date) {\n      const startDate = parseDate(value.start.date);\n      if (isSamePage(startDate, currentPage)) {\n        return startDate;\n      }\n      if (!isSingleGrid && isSamePage(startDate, addPage(currentPage, -1))) {\n        return startDate;\n      }\n    }\n    return findItemToFocus(parseDate(value.start.date), currentPage, isDateEnabled);\n  });\n\n  const updateCurrentPage = (startDate: string) => {\n    if ((isMonthPicker && startDate.length >= 4) || startDate.length >= 8) {\n      const newCurrentPage = startOfPage(parseDate(startDate));\n      setCurrentPage(isSingleGrid ? newCurrentPage : addPage(newCurrentPage, 1));\n    }\n  };\n\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 `${i18n('i18nStrings.startDateLabel', i18nStrings?.startDateLabel)}, ${getDateLabel(normalizedLocale, startDate)}${\n      hideTime\n        ? ''\n        : `, ${i18n('i18nStrings.startTimeLabel', i18nStrings?.startTimeLabel)}, ${renderTimeLabel(\n            normalizedLocale,\n            startDate,\n            timeInputFormat\n          )}`\n    }. `;\n  };\n\n  const announceEnd = (endDate: Date) => {\n    return `${i18n('i18nStrings.endDateLabel', i18nStrings?.endDateLabel)}, ${getDateLabel(normalizedLocale, endDate)}${\n      hideTime\n        ? ''\n        : `, ${i18n('i18nStrings.endTimeLabel', i18nStrings?.endTimeLabel)}, ${renderTimeLabel(\n            normalizedLocale,\n            endDate,\n            timeInputFormat\n          )}`\n    }. `;\n  };\n\n  const renderSelectedAbsoluteRangeAriaLive = i18n(\n    'i18nStrings.renderSelectedAbsoluteRangeAriaLive',\n    i18nStrings?.renderSelectedAbsoluteRangeAriaLive,\n    format => (startDate, endDate) => format({ startDate, endDate })\n  );\n\n  const announceRange = (startDate: Date, endDate: Date) => {\n    if (!renderSelectedAbsoluteRangeAriaLive) {\n      return `${getDateLabel(normalizedLocale, startDate)} – ${getDateLabel(normalizedLocale, endDate)}`;\n    }\n    return renderSelectedAbsoluteRangeAriaLive(\n      getDateLabel(normalizedLocale, startDate),\n      getDateLabel(normalizedLocale, endDate)\n    );\n  };\n\n  const onSelectDateHandler = (selectedDate: Date) => {\n    const { start, end } = value;\n    let newStart: Date | undefined = undefined;\n    let newEnd: Date | null | undefined = undefined;\n    let announcement = '';\n\n    // If both fields are empty, we set the start date\n    if (!start.date && !end.date) {\n      newStart = startOfDay(selectedDate);\n      announcement = announceStart(newStart);\n    }\n    // If both fields are set, we start new\n    else if (start.date && end.date) {\n      newStart = startOfDay(selectedDate);\n      newEnd = null;\n      announcement = announceStart(newStart);\n    }\n    // If only the END date is empty, we fill it (and swap dates if needed)\n    else if (start.date && !end.date) {\n      const parsedStartDate = parseDate(start.date);\n\n      if (isBefore(selectedDate, parsedStartDate)) {\n        // The user has selected the range backwards, so we swap start and end\n        newStart = startOfDay(selectedDate);\n        newEnd = endOfDay(parsedStartDate);\n        announcement = announceStart(newStart) + announceRange(newStart, newEnd);\n      } else {\n        newEnd = endOfDay(selectedDate);\n        announcement = announceEnd(newEnd) + announceRange(parsedStartDate, newEnd);\n      }\n    }\n    // If only the START date is empty, we fill it (and swap dates if needed)\n    else if (!start.date && end.date) {\n      const existingEndDate = parseDate(end.date);\n\n      if (isAfter(selectedDate, existingEndDate)) {\n        // The user has selected the range backwards, so we swap start and end\n        newStart = startOfDay(existingEndDate);\n        newEnd = endOfDay(selectedDate);\n        announcement = announceEnd(newEnd) + announceRange(newStart, newEnd);\n      } else {\n        newStart = startOfDay(selectedDate);\n        announcement = announceStart(newStart) + announceRange(newStart, existingEndDate);\n      }\n    }\n\n    const formatValue = (\n      date: Date | null | undefined,\n      previous: DateRangePickerProps.DateTimeStrings,\n      includeTime: boolean\n    ): DateRangePickerProps.DateTimeStrings => {\n      if (date === null) {\n        // explicitly reset to empty\n        return { date: '', time: '' };\n      } else if (date === undefined) {\n        // keep old value\n        return previous;\n      }\n      if (!includeTime) {\n        return {\n          date: formatDate(date),\n          time: '',\n        };\n      }\n      return splitDateTime(formatDateTime(date));\n    };\n\n    setValue({\n      start: formatValue(newStart, value.start, !hideTime),\n      end: formatValue(newEnd, value.end, !hideTime),\n    });\n    setAnnouncement(announcement);\n  };\n\n  const onHeaderChangePageHandler = (amount: number) => {\n    const addPageFn = isMonthPicker ? addYears : addMonths;\n    const getBaseFn = isMonthPicker ? getBaseMonth : getBaseDay;\n    const newBasePage = addPageFn(currentPage, amount);\n    setCurrentPage(newBasePage);\n    const newBaseDate = getBaseFn(newBasePage, isDateEnabled);\n    setFocusedDate(newBaseDate);\n  };\n\n  const onChangeStartDate = (value: string) => {\n    setValue((oldValue: DateRangePickerProps.PendingAbsoluteValue) => ({\n      ...oldValue,\n      start: { ...oldValue.start, date: value },\n    }));\n    updateCurrentPage(value);\n  };\n\n  const interceptedSetValue: DateRangePickerCalendarProps['setValue'] = newValue => {\n    setValue(oldValue => {\n      const updated = typeof newValue === 'function' ? newValue(oldValue) : newValue;\n      updateCurrentPage(updated.start.date);\n      return updated;\n    });\n  };\n\n  const headingIdPrefix = useUniqueId('date-range-picker-calendar-heading');\n\n  return (\n    <>\n      <div\n        className={clsx(styles['calendar-container'], {\n          [styles['one-grid']]: isSingleGrid,\n        })}\n      >\n        <SpaceBetween size=\"s\">\n          <div\n            className={clsx(styles.calendar, {\n              [styles['one-grid']]: isSingleGrid,\n            })}\n          >\n            <CalendarHeader\n              granularity={granularity}\n              baseDate={currentPage}\n              locale={normalizedLocale}\n              onChangePage={onHeaderChangePageHandler}\n              previousPageLabel={\n                isMonthPicker ? i18nStrings?.previousYearAriaLabel : i18nStrings?.previousMonthAriaLabel\n              }\n              nextPageLabel={isMonthPicker ? i18nStrings?.nextYearAriaLabel : i18nStrings?.nextMonthAriaLabel}\n              isSingleGrid={isSingleGrid}\n              headingIdPrefix={headingIdPrefix}\n            />\n\n            <Grids\n              granularity={granularity}\n              isSingleGrid={isSingleGrid}\n              locale={normalizedLocale}\n              baseDate={currentPage}\n              focusedDate={focusedDate}\n              onFocusedDateChange={setFocusedDate}\n              isDateEnabled={isDateEnabled}\n              dateDisabledReason={dateDisabledReason}\n              onSelectDate={onSelectDateHandler}\n              onPageChange={setCurrentPage}\n              startOfWeek={normalizedStartOfWeek}\n              todayAriaLabel={i18nStrings?.todayAriaLabel}\n              currentMonthAriaLabel={i18nStrings?.currentMonthAriaLabel}\n              selectedStartDate={value?.start?.date ? parseDate(value.start.date, !isMonthPicker) : null}\n              selectedEndDate={value?.end?.date ? parseDate(value.end.date, !isMonthPicker) : null}\n              headingIdPrefix={headingIdPrefix}\n            />\n          </div>\n\n          <RangeInputs\n            startDate={value.start.date}\n            onChangeStartDate={onChangeStartDate}\n            startTime={value.start.time}\n            onChangeStartTime={value =>\n              setValue(oldValue => ({ ...oldValue, start: { ...oldValue.start, time: value } }))\n            }\n            endDate={value.end.date}\n            onChangeEndDate={value => setValue(oldValue => ({ ...oldValue, end: { ...oldValue.end, date: value } }))}\n            endTime={value.end.time}\n            onChangeEndTime={value => setValue(oldValue => ({ ...oldValue, end: { ...oldValue.end, time: value } }))}\n            i18nStrings={i18nStrings}\n            dateOnly={dateOnly}\n            timeInputFormat={timeInputFormat}\n            granularity={granularity}\n          />\n          {customAbsoluteRangeControl && <div>{customAbsoluteRangeControl(value, interceptedSetValue)}</div>}\n        </SpaceBetween>\n      </div>\n      {/* Can't use message here because the contents are checked in tests */}\n      <InternalLiveRegion className={testutilStyles['calendar-aria-live']} hidden={true} tagName=\"span\">\n        {announcement}\n      </InternalLiveRegion>\n    </>\n  );\n}\n"]}

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { BaseComponentProps } from '../../internal/base-component';
 import { TimeInputProps } from '../../time-input/interfaces';
-import { RangeCalendarI18nStrings } from '../interfaces';
-type I18nStrings = Pick<RangeCalendarI18nStrings, 'dateTimeConstraintText' | 'startDateLabel' | 'startTimeLabel' | 'endDateLabel' | 'endTimeLabel'>;
+import { DateRangePickerProps, RangeCalendarI18nStrings } from '../interfaces';
+type I18nStrings = Pick<RangeCalendarI18nStrings, 'dateConstraintText' | 'dateTimeConstraintText' | 'monthConstraintText' | 'startMonthLabel' | 'startDateLabel' | 'startTimeLabel' | 'endMonthLabel' | 'endDateLabel' | 'endTimeLabel'>;
 interface RangeInputsProps extends BaseComponentProps {
     startDate: string;
     onChangeStartDate: (value: string) => void;
@@ -15,7 +15,8 @@ interface RangeInputsProps extends BaseComponentProps {
     i18nStrings?: I18nStrings;
     dateOnly: boolean;
     timeInputFormat: TimeInputProps.Format;
+    granularity?: DateRangePickerProps.Granularity;
 }
-export default function RangeInputs({ startDate, onChangeStartDate, startTime, onChangeStartTime, endDate, onChangeEndDate, endTime, onChangeEndTime, i18nStrings, dateOnly, timeInputFormat, }: RangeInputsProps): JSX.Element;
+export default function RangeInputs({ startDate, onChangeStartDate, startTime, onChangeStartTime, endDate, onChangeEndDate, endTime, onChangeEndTime, i18nStrings, dateOnly, timeInputFormat, granularity, }: RangeInputsProps): JSX.Element;
 export {};
 //# sourceMappingURL=range-inputs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"range-inputs.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/range-inputs.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAIzD,KAAK,WAAW,GAAG,IAAI,CACrB,wBAAwB,EACxB,wBAAwB,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,cAAc,GAAG,cAAc,CACjG,CAAC;AAEF,UAAU,gBAAiB,SAAQ,kBAAkB;IACnD,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,cAAc,CAAC,MAAM,CAAC;CACxC;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,OAAO,EACP,eAAe,EACf,OAAO,EACP,eAAe,EACf,WAAW,EACX,QAAQ,EACR,eAAe,GAChB,EAAE,gBAAgB,eAoDlB"}
+{"version":3,"file":"range-inputs.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/range-inputs.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAK/E,KAAK,WAAW,GAAG,IAAI,CACrB,wBAAwB,EACtB,oBAAoB,GACpB,wBAAwB,GACxB,qBAAqB,GACrB,iBAAiB,GACjB,gBAAgB,GAChB,gBAAgB,GAChB,eAAe,GACf,cAAc,GACd,cAAc,CACjB,CAAC;AAEF,UAAU,gBAAiB,SAAQ,kBAAkB;IACnD,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,cAAc,CAAC,MAAM,CAAC;IACvC,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,OAAO,EACP,eAAe,EACf,OAAO,EACP,eAAe,EACf,WAAW,EACX,QAAQ,EACR,eAAe,EACf,WAAmB,GACpB,EAAE,gBAAgB,eAkFlB"}

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

@@ -1,24 +1,37 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+import clsx from 'clsx';
 import InternalDateInput from '../../date-input/internal';
 import InternalFormField from '../../form-field/internal';
 import { useInternalI18n } from '../../i18n/context.js';
 import InternalTimeInput from '../../time-input/internal';
 import styles from '../styles.css.js';
-export default function RangeInputs({ startDate, onChangeStartDate, startTime, onChangeStartTime, endDate, onChangeEndDate, endTime, onChangeEndTime, i18nStrings, dateOnly, timeInputFormat, }) {
+import testutilStyles from '../test-classes/styles.css.js';
+export default function RangeInputs({ startDate, onChangeStartDate, startTime, onChangeStartTime, endDate, onChangeEndDate, endTime, onChangeEndTime, i18nStrings, dateOnly, timeInputFormat, granularity = 'day', }) {
     const i18n = useInternalI18n('date-range-picker');
-    return (React.createElement(InternalFormField, { constraintText: i18n('i18nStrings.dateTimeConstraintText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dateTimeConstraintText) },
+    const isMonthPicker = granularity === 'month';
+    const dateInputPlaceholder = isMonthPicker ? 'YYYY/MM' : 'YYYY/MM/DD';
+    const showTimeInput = !dateOnly && !isMonthPicker;
+    return (React.createElement(InternalFormField, { constraintText: i18n(isMonthPicker
+            ? 'i18nStrings.monthConstraintText'
+            : dateOnly
+                ? 'i18nStrings.dateConstraintText'
+                : 'i18nStrings.dateTimeConstraintText', isMonthPicker
+            ? i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.monthConstraintText
+            : dateOnly
+                ? i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dateConstraintText
+                : i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dateTimeConstraintText) },
         React.createElement("div", { className: styles['date-and-time-container'] },
             React.createElement("div", { className: styles['date-and-time-wrapper'] },
-                React.createElement(InternalFormField, { label: i18n('i18nStrings.startDateLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.startDateLabel), stretch: true },
-                    React.createElement(InternalDateInput, { value: startDate, className: styles['start-date-input'], onChange: event => onChangeStartDate(event.detail.value), placeholder: "YYYY/MM/DD" })),
-                !dateOnly && (React.createElement(InternalFormField, { label: i18n('i18nStrings.startTimeLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.startTimeLabel), stretch: true },
-                    React.createElement(InternalTimeInput, { value: startTime, onChange: event => onChangeStartTime(event.detail.value), format: timeInputFormat, placeholder: timeInputFormat, className: styles['start-time-input'] })))),
+                React.createElement(InternalFormField, { stretch: true, label: i18n(isMonthPicker ? 'i18nStrings.startMonthLabel' : 'i18nStrings.startDateLabel', isMonthPicker ? i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.startMonthLabel : i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.startDateLabel) },
+                    React.createElement(InternalDateInput, { value: startDate, className: clsx(testutilStyles['start-date-input'], isMonthPicker && testutilStyles['start-month-input']), onChange: event => onChangeStartDate(event.detail.value), placeholder: dateInputPlaceholder, granularity: granularity })),
+                showTimeInput && (React.createElement(InternalFormField, { stretch: true, label: i18n('i18nStrings.startTimeLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.startTimeLabel) },
+                    React.createElement(InternalTimeInput, { value: startTime, onChange: event => onChangeStartTime(event.detail.value), format: timeInputFormat, placeholder: timeInputFormat, className: testutilStyles['start-time-input'] })))),
             React.createElement("div", { className: styles['date-and-time-wrapper'] },
-                React.createElement(InternalFormField, { label: i18n('i18nStrings.endDateLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.endDateLabel), stretch: true },
-                    React.createElement(InternalDateInput, { value: endDate, className: styles['end-date-input'], onChange: event => onChangeEndDate(event.detail.value), placeholder: "YYYY/MM/DD" })),
-                !dateOnly && (React.createElement(InternalFormField, { label: i18n('i18nStrings.endTimeLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.endTimeLabel), stretch: true },
-                    React.createElement(InternalTimeInput, { value: endTime, onChange: event => onChangeEndTime(event.detail.value), format: timeInputFormat, placeholder: timeInputFormat, className: styles['end-time-input'] })))))));
+                React.createElement(InternalFormField, { stretch: true, label: i18n(isMonthPicker ? 'i18nStrings.endMonthLabel' : 'i18nStrings.endDateLabel', isMonthPicker ? i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.endMonthLabel : i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.endDateLabel) },
+                    React.createElement(InternalDateInput, { value: endDate, className: clsx(testutilStyles['end-date-input'], isMonthPicker && testutilStyles['end-month-picker']), onChange: event => onChangeEndDate(event.detail.value), placeholder: dateInputPlaceholder, granularity: granularity })),
+                showTimeInput && (React.createElement(InternalFormField, { label: i18n('i18nStrings.endTimeLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.endTimeLabel), stretch: true },
+                    React.createElement(InternalTimeInput, { value: endTime, onChange: event => onChangeEndTime(event.detail.value), format: timeInputFormat, placeholder: timeInputFormat, className: testutilStyles['end-time-input'] })))))));
 }
 //# sourceMappingURL=range-inputs.js.map