@cloudscape-design/components 3.0.882 → 3.0.884

package/button-group/menu-dropdown-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-dropdown-item.d.ts","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAGpE,OAAO,EAAE,sBAAsB,EAAuB,MAAM,oBAAoB,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIhD,UAAU,qBAAqB;IAC7B,IAAI,EAAE,gBAAgB,CAAC,YAAY,CAAC;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACxE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB,uGAiDrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"menu-dropdown-item.d.ts","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAGpE,OAAO,EAAE,sBAAsB,EAAuB,MAAM,oBAAoB,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIhD,UAAU,qBAAqB;IAC7B,IAAI,EAAE,gBAAgB,CAAC,YAAY,CAAC;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACxE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB,uGAkDrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/button-group/menu-dropdown-item.js

@@ -7,13 +7,13 @@ import ButtonDropdown from '../button-dropdown/internal';
 import Tooltip from '../internal/components/tooltip';
 import { fireCancelableEvent } from '../internal/events';
 import testUtilStyles from './test-classes/styles.css.js';
-const MenuDropdownItem = React.forwardRef(({ item, showTooltip, onItemClick, expandToViewport }, ref) => {
+const MenuDropdownItem = React.forwardRef(({ item, showTooltip, onItemClick, onTooltipDismiss, expandToViewport }, ref) => {
     const containerRef = React.useRef(null);
     const onClickHandler = (event) => {
         fireCancelableEvent(onItemClick, { id: event.detail.id, checked: event.detail.checked }, event);
     };
     return (React.createElement(ButtonDropdown, { ref: ref, variant: "icon", items: item.items, onItemClick: onClickHandler, expandToViewport: expandToViewport, ariaLabel: item.text, className: testUtilStyles['button-group-item'], "data-testid": item.id, customTriggerBuilder: ({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (React.createElement("div", { ref: containerRef },
-            !isOpen && showTooltip && !item.disabled && !item.loading && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']) })),
+            !isOpen && showTooltip && !item.disabled && !item.loading && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']), onDismiss: onTooltipDismiss })),
             React.createElement(InternalButton, { ref: triggerRef, variant: "icon", ariaLabel: ariaLabel, "data-itemid": item.id, ariaExpanded: ariaExpanded, className: clsx(testUtilStyles.item, testUtilsClass), iconName: "ellipsis", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, onClick: onClick, __title: "" }))) }));
 });
 export default MenuDropdownItem;

package/button-group/menu-dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-dropdown-item.js","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,EAA0B,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGjF,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAS1D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAyB,EAC3E,GAAuC,EACvC,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,CAAC,KAAwD,EAAE,EAAE;QAClF,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,KAAK,CAAC,CAAC;IAClG,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,cAAc,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,iBACjC,IAAI,CAAC,EAAE,EACpB,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAClG,6BAAK,GAAG,EAAE,YAAY;YACnB,CAAC,MAAM,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAC5D,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,GAC/E,CACH;YACD,oBAAC,cAAc,IACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,SAAS,iBACP,IAAI,CAAC,EAAE,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,EACpD,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,EAAE,GACV,CACE,CACP,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,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 { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport ButtonDropdown from '../button-dropdown/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events';\nimport { ButtonGroupProps } from './interfaces';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface MenuDropdownItemProps {\n  item: ButtonGroupProps.MenuDropdown;\n  showTooltip: boolean;\n  onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n  expandToViewport?: boolean;\n}\n\nconst MenuDropdownItem = React.forwardRef(\n  (\n    { item, showTooltip, onItemClick, expandToViewport }: MenuDropdownItemProps,\n    ref: React.Ref<ButtonDropdownProps.Ref>\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const onClickHandler = (event: CustomEvent<ButtonDropdownProps.ItemClickDetails>) => {\n      fireCancelableEvent(onItemClick, { id: event.detail.id, checked: event.detail.checked }, event);\n    };\n\n    return (\n      <ButtonDropdown\n        ref={ref}\n        variant=\"icon\"\n        items={item.items}\n        onItemClick={onClickHandler}\n        expandToViewport={expandToViewport}\n        ariaLabel={item.text}\n        className={testUtilStyles['button-group-item']}\n        data-testid={item.id}\n        customTriggerBuilder={({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n          <div ref={containerRef}>\n            {!isOpen && showTooltip && !item.disabled && !item.loading && (\n              <Tooltip\n                trackRef={containerRef}\n                trackKey={item.id}\n                value={item.text}\n                className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n              />\n            )}\n            <InternalButton\n              ref={triggerRef}\n              variant=\"icon\"\n              ariaLabel={ariaLabel}\n              data-itemid={item.id}\n              ariaExpanded={ariaExpanded}\n              className={clsx(testUtilStyles.item, testUtilsClass)}\n              iconName=\"ellipsis\"\n              loading={item.loading}\n              loadingText={item.loadingText}\n              disabled={item.disabled}\n              onClick={onClick}\n              __title=\"\"\n            />\n          </div>\n        )}\n      />\n    );\n  }\n);\n\nexport default MenuDropdownItem;\n"]}
+{"version":3,"file":"menu-dropdown-item.js","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,EAA0B,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGjF,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAU1D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAyB,EAC7F,GAAuC,EACvC,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,CAAC,KAAwD,EAAE,EAAE;QAClF,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,KAAK,CAAC,CAAC;IAClG,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,cAAc,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,iBACjC,IAAI,CAAC,EAAE,EACpB,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAClG,6BAAK,GAAG,EAAE,YAAY;YACnB,CAAC,MAAM,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAC5D,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,EAC/E,SAAS,EAAE,gBAAgB,GAC3B,CACH;YACD,oBAAC,cAAc,IACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,SAAS,iBACP,IAAI,CAAC,EAAE,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,EACpD,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,EAAE,GACV,CACE,CACP,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,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 { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport ButtonDropdown from '../button-dropdown/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events';\nimport { ButtonGroupProps } from './interfaces';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface MenuDropdownItemProps {\n  item: ButtonGroupProps.MenuDropdown;\n  showTooltip: boolean;\n  onTooltipDismiss: () => void;\n  onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n  expandToViewport?: boolean;\n}\n\nconst MenuDropdownItem = React.forwardRef(\n  (\n    { item, showTooltip, onItemClick, onTooltipDismiss, expandToViewport }: MenuDropdownItemProps,\n    ref: React.Ref<ButtonDropdownProps.Ref>\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const onClickHandler = (event: CustomEvent<ButtonDropdownProps.ItemClickDetails>) => {\n      fireCancelableEvent(onItemClick, { id: event.detail.id, checked: event.detail.checked }, event);\n    };\n\n    return (\n      <ButtonDropdown\n        ref={ref}\n        variant=\"icon\"\n        items={item.items}\n        onItemClick={onClickHandler}\n        expandToViewport={expandToViewport}\n        ariaLabel={item.text}\n        className={testUtilStyles['button-group-item']}\n        data-testid={item.id}\n        customTriggerBuilder={({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n          <div ref={containerRef}>\n            {!isOpen && showTooltip && !item.disabled && !item.loading && (\n              <Tooltip\n                trackRef={containerRef}\n                trackKey={item.id}\n                value={item.text}\n                className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n                onDismiss={onTooltipDismiss}\n              />\n            )}\n            <InternalButton\n              ref={triggerRef}\n              variant=\"icon\"\n              ariaLabel={ariaLabel}\n              data-itemid={item.id}\n              ariaExpanded={ariaExpanded}\n              className={clsx(testUtilStyles.item, testUtilsClass)}\n              iconName=\"ellipsis\"\n              loading={item.loading}\n              loadingText={item.loadingText}\n              disabled={item.disabled}\n              onClick={onClick}\n              __title=\"\"\n            />\n          </div>\n        )}\n      />\n    );\n  }\n);\n\nexport default MenuDropdownItem;\n"]}

package/calendar/grid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/calendar/grid/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAG9E,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAO/D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI9C;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,SAAS;IACxB,aAAa,EAAE,eAAe,CAAC,qBAAqB,CAAC;IACrD,kBAAkB,EAAE,aAAa,CAAC,0BAA0B,CAAC;IAC7D,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,aAAa,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACnC,sBAAsB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,KAAK,MAAM,CAAC;IACzE,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,KAAK,OAAO,CAAC;IACpD,oBAAoB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACzE;AAsCD,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,aAAa,EACb,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,MAAM,EACN,IAAI,EACJ,aAAa,EACb,UAAU,EACV,sBAAsB,EACtB,UAAU,EACV,oBAAoB,GACrB,EAAE,SAAS,eA2EX"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/calendar/grid/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAG9E,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAO/D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI9C;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,SAAS;IACxB,aAAa,EAAE,eAAe,CAAC,qBAAqB,CAAC;IACrD,kBAAkB,EAAE,aAAa,CAAC,0BAA0B,CAAC;IAC7D,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,aAAa,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACnC,sBAAsB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,KAAK,MAAM,CAAC;IACzE,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,KAAK,OAAO,CAAC;IACpD,oBAAoB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACzE;AA2CD,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,aAAa,EACb,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,MAAM,EACN,IAAI,EACJ,aAAa,EACb,UAAU,EACV,sBAAsB,EACtB,UAAU,EACV,oBAAoB,GACrB,EAAE,SAAS,eA2EX"}

package/calendar/grid/index.js

@@ -20,7 +20,7 @@ const GridCell = forwardRef((props, focusedDateRef) => {
         props.children,
         isDisabledWithReason && (React.createElement(React.Fragment, null,
             descriptionEl,
-            showTooltip && (React.createElement(Tooltip, { className: styles['disabled-reason-tooltip'], trackRef: ref, value: disabledReason }))))));
+            showTooltip && (React.createElement(Tooltip, { className: styles['disabled-reason-tooltip'], trackRef: ref, value: disabledReason, onDismiss: () => setShowTooltip(false) }))))));
 });
 applyDisplayName(GridCell, 'GridCell');
 export default function Grid({ isDateEnabled, dateDisabledReason, focusedDate, focusableDate, onSelectDate, selectedDate, ariaLabelledby, header, rows, isCurrentPage, renderDate, renderDateAnnouncement, isSameDate, onGridKeyDownHandler, }) {

package/calendar/grid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/calendar/grid/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, TdHTMLAttributes, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { DatePickerProps } from '../../date-picker/interfaces';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';\nimport Tooltip from '../../internal/components/tooltip';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update.js';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\nimport { applyDisplayName } from '../../internal/utils/apply-display-name';\nimport { CalendarProps } from '../interfaces';\n\nimport styles from '../styles.css.js';\n\n/**\n * Calendar grid supports two mechanisms of keyboard navigation:\n * - Native screen-reader table navigation (semantic table markup);\n * - Keyboard arrow-keys navigation (a custom key-down handler).\n *\n * The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:\n * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;\n * - (table navigation) Safari+VO - \"dimmed\" state is announced twice;\n * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;\n * - (keyboard navigation) Firefox+NVDA - every date is announced as \"not selected\";\n * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;\n * - (keyboard navigation) Safari/Chrome+VO - dates are not announced as interactive (clickable or selectable);\n * - (keyboard navigation) Safari/Chrome+VO - date announcements are not interruptive and can be missed if navigating fast.\n */\n\nexport interface GridProps {\n  isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n  dateDisabledReason: CalendarProps.DateDisabledReasonFunction;\n  focusedDate: Date | null;\n  focusableDate: Date | null;\n  onSelectDate: (date: Date) => void;\n  onFocusDate: (date: null | Date) => void;\n  onChangePage: (date: Date) => void;\n  selectedDate: Date | null;\n  ariaLabelledby: string;\n  header?: React.ReactNode;\n  rows: ReadonlyArray<ReadonlyArray<Date>>;\n  isCurrentPage: (date: Date) => boolean;\n  renderDate: (date: Date) => string;\n  renderDateAnnouncement: (date: Date, isOnCurrentDate: boolean) => string;\n  isSameDate: (date: Date, baseDate: Date) => boolean;\n  onGridKeyDownHandler: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\ninterface GridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  disabledReason?: string;\n}\n\nconst GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTMLTableCellElement>) => {\n  const { disabledReason, ...rest } = props;\n  const isDisabledWithReason = !!disabledReason;\n  const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n  const ref = useRef<HTMLTableCellElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  return (\n    <td\n      ref={useMergeRefs(focusedDateRef, ref)}\n      {...(isDisabledWithReason ? targetProps : {})}\n      {...rest}\n      onFocus={() => (isDisabledWithReason ? setShowTooltip(true) : undefined)}\n      onBlur={() => (isDisabledWithReason ? setShowTooltip(false) : undefined)}\n      onMouseEnter={() => (isDisabledWithReason ? setShowTooltip(true) : undefined)}\n      onMouseLeave={() => (isDisabledWithReason ? setShowTooltip(false) : undefined)}\n    >\n      {props.children}\n      {isDisabledWithReason && (\n        <>\n          {descriptionEl}\n          {showTooltip && (\n            <Tooltip className={styles['disabled-reason-tooltip']} trackRef={ref} value={disabledReason!} />\n          )}\n        </>\n      )}\n    </td>\n  );\n});\n\napplyDisplayName(GridCell, 'GridCell');\n\nexport default function Grid({\n  isDateEnabled,\n  dateDisabledReason,\n  focusedDate,\n  focusableDate,\n  onSelectDate,\n  selectedDate,\n  ariaLabelledby,\n  header,\n  rows,\n  isCurrentPage,\n  renderDate,\n  renderDateAnnouncement,\n  isSameDate,\n  onGridKeyDownHandler,\n}: GridProps) {\n  const focusedDateRef = useRef<HTMLTableCellElement>(null);\n\n  // The focused date changes as a feedback to keyboard navigation in the grid.\n  // Once changed, the corresponding date button needs to receive the actual focus.\n  useEffectOnUpdate(() => {\n    if (focusedDate && focusedDateRef.current) {\n      (focusedDateRef.current as HTMLDivElement).focus();\n    }\n  }, [focusedDate]);\n\n  const rowLength = rows[0].length;\n\n  const denseGrid = rowLength > 3;\n\n  return (\n    <table\n      role=\"grid\"\n      className={clsx(styles['calendar-grid'], denseGrid && styles['calendar-grid-dense'])}\n      aria-labelledby={ariaLabelledby}\n    >\n      {header}\n      <tbody onKeyDown={onGridKeyDownHandler}>\n        {rows.map((row, rowIndex) => (\n          <tr key={rowIndex} className={styles['calendar-row']}>\n            {row.map((date, dateIndex) => {\n              const isFocusable = !!focusableDate && isSameDate(date, focusableDate);\n              const isSelected = !!selectedDate && isSameDate(date, selectedDate);\n              const isEnabled = !isDateEnabled || isDateEnabled(date);\n              const disabledReason = dateDisabledReason(date);\n              const isDisabledWithReason = !isEnabled && !!disabledReason;\n              const isCurrentDate = isSameDate(date, new Date());\n\n              // Can't be focused.\n              let tabIndex = undefined;\n              if (isFocusable && (isEnabled || isDisabledWithReason)) {\n                // Next focus target.\n                tabIndex = 0;\n              } else if (isEnabled || isDisabledWithReason) {\n                // Can be focused programmatically.\n                tabIndex = -1;\n              }\n\n              return (\n                <GridCell\n                  key={`${rowIndex}:${dateIndex}`}\n                  ref={tabIndex === 0 ? focusedDateRef : undefined}\n                  tabIndex={tabIndex}\n                  aria-current={isCurrentDate ? 'date' : undefined}\n                  aria-selected={isEnabled ? isSelected : undefined}\n                  aria-disabled={!isEnabled}\n                  // Do not attach click event when the date is disabled, otherwise VO+safari announces clickable\n                  onClick={isEnabled ? () => onSelectDate(date) : undefined}\n                  className={clsx(styles['calendar-grid-cell'], styles['calendar-date'], {\n                    [styles['calendar-date-current-page']]: isCurrentPage(date),\n                    [styles['calendar-date-enabled']]: isEnabled,\n                    [styles['calendar-date-selected']]: isSelected,\n                    [styles['calendar-date-current']]: isCurrentDate,\n                    [styles['calendar-date-dense']]: denseGrid,\n                  })}\n                  disabledReason={isDisabledWithReason ? disabledReason : undefined}\n                >\n                  <span className={styles['date-inner']} aria-hidden=\"true\">\n                    {renderDate(date)}\n                  </span>\n                  {/* Screen-reader announcement for the focused date. */}\n                  <ScreenreaderOnly>{renderDateAnnouncement(date, isCurrentDate)}</ScreenreaderOnly>\n                </GridCell>\n              );\n            })}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/calendar/grid/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, TdHTMLAttributes, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { DatePickerProps } from '../../date-picker/interfaces';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';\nimport Tooltip from '../../internal/components/tooltip';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update.js';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\nimport { applyDisplayName } from '../../internal/utils/apply-display-name';\nimport { CalendarProps } from '../interfaces';\n\nimport styles from '../styles.css.js';\n\n/**\n * Calendar grid supports two mechanisms of keyboard navigation:\n * - Native screen-reader table navigation (semantic table markup);\n * - Keyboard arrow-keys navigation (a custom key-down handler).\n *\n * The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:\n * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;\n * - (table navigation) Safari+VO - \"dimmed\" state is announced twice;\n * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;\n * - (keyboard navigation) Firefox+NVDA - every date is announced as \"not selected\";\n * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;\n * - (keyboard navigation) Safari/Chrome+VO - dates are not announced as interactive (clickable or selectable);\n * - (keyboard navigation) Safari/Chrome+VO - date announcements are not interruptive and can be missed if navigating fast.\n */\n\nexport interface GridProps {\n  isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n  dateDisabledReason: CalendarProps.DateDisabledReasonFunction;\n  focusedDate: Date | null;\n  focusableDate: Date | null;\n  onSelectDate: (date: Date) => void;\n  onFocusDate: (date: null | Date) => void;\n  onChangePage: (date: Date) => void;\n  selectedDate: Date | null;\n  ariaLabelledby: string;\n  header?: React.ReactNode;\n  rows: ReadonlyArray<ReadonlyArray<Date>>;\n  isCurrentPage: (date: Date) => boolean;\n  renderDate: (date: Date) => string;\n  renderDateAnnouncement: (date: Date, isOnCurrentDate: boolean) => string;\n  isSameDate: (date: Date, baseDate: Date) => boolean;\n  onGridKeyDownHandler: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\ninterface GridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  disabledReason?: string;\n}\n\nconst GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTMLTableCellElement>) => {\n  const { disabledReason, ...rest } = props;\n  const isDisabledWithReason = !!disabledReason;\n  const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n  const ref = useRef<HTMLTableCellElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  return (\n    <td\n      ref={useMergeRefs(focusedDateRef, ref)}\n      {...(isDisabledWithReason ? targetProps : {})}\n      {...rest}\n      onFocus={() => (isDisabledWithReason ? setShowTooltip(true) : undefined)}\n      onBlur={() => (isDisabledWithReason ? setShowTooltip(false) : undefined)}\n      onMouseEnter={() => (isDisabledWithReason ? setShowTooltip(true) : undefined)}\n      onMouseLeave={() => (isDisabledWithReason ? setShowTooltip(false) : undefined)}\n    >\n      {props.children}\n      {isDisabledWithReason && (\n        <>\n          {descriptionEl}\n          {showTooltip && (\n            <Tooltip\n              className={styles['disabled-reason-tooltip']}\n              trackRef={ref}\n              value={disabledReason!}\n              onDismiss={() => setShowTooltip(false)}\n            />\n          )}\n        </>\n      )}\n    </td>\n  );\n});\n\napplyDisplayName(GridCell, 'GridCell');\n\nexport default function Grid({\n  isDateEnabled,\n  dateDisabledReason,\n  focusedDate,\n  focusableDate,\n  onSelectDate,\n  selectedDate,\n  ariaLabelledby,\n  header,\n  rows,\n  isCurrentPage,\n  renderDate,\n  renderDateAnnouncement,\n  isSameDate,\n  onGridKeyDownHandler,\n}: GridProps) {\n  const focusedDateRef = useRef<HTMLTableCellElement>(null);\n\n  // The focused date changes as a feedback to keyboard navigation in the grid.\n  // Once changed, the corresponding date button needs to receive the actual focus.\n  useEffectOnUpdate(() => {\n    if (focusedDate && focusedDateRef.current) {\n      (focusedDateRef.current as HTMLDivElement).focus();\n    }\n  }, [focusedDate]);\n\n  const rowLength = rows[0].length;\n\n  const denseGrid = rowLength > 3;\n\n  return (\n    <table\n      role=\"grid\"\n      className={clsx(styles['calendar-grid'], denseGrid && styles['calendar-grid-dense'])}\n      aria-labelledby={ariaLabelledby}\n    >\n      {header}\n      <tbody onKeyDown={onGridKeyDownHandler}>\n        {rows.map((row, rowIndex) => (\n          <tr key={rowIndex} className={styles['calendar-row']}>\n            {row.map((date, dateIndex) => {\n              const isFocusable = !!focusableDate && isSameDate(date, focusableDate);\n              const isSelected = !!selectedDate && isSameDate(date, selectedDate);\n              const isEnabled = !isDateEnabled || isDateEnabled(date);\n              const disabledReason = dateDisabledReason(date);\n              const isDisabledWithReason = !isEnabled && !!disabledReason;\n              const isCurrentDate = isSameDate(date, new Date());\n\n              // Can't be focused.\n              let tabIndex = undefined;\n              if (isFocusable && (isEnabled || isDisabledWithReason)) {\n                // Next focus target.\n                tabIndex = 0;\n              } else if (isEnabled || isDisabledWithReason) {\n                // Can be focused programmatically.\n                tabIndex = -1;\n              }\n\n              return (\n                <GridCell\n                  key={`${rowIndex}:${dateIndex}`}\n                  ref={tabIndex === 0 ? focusedDateRef : undefined}\n                  tabIndex={tabIndex}\n                  aria-current={isCurrentDate ? 'date' : undefined}\n                  aria-selected={isEnabled ? isSelected : undefined}\n                  aria-disabled={!isEnabled}\n                  // Do not attach click event when the date is disabled, otherwise VO+safari announces clickable\n                  onClick={isEnabled ? () => onSelectDate(date) : undefined}\n                  className={clsx(styles['calendar-grid-cell'], styles['calendar-date'], {\n                    [styles['calendar-date-current-page']]: isCurrentPage(date),\n                    [styles['calendar-date-enabled']]: isEnabled,\n                    [styles['calendar-date-selected']]: isSelected,\n                    [styles['calendar-date-current']]: isCurrentDate,\n                    [styles['calendar-date-dense']]: denseGrid,\n                  })}\n                  disabledReason={isDisabledWithReason ? disabledReason : undefined}\n                >\n                  <span className={styles['date-inner']} aria-hidden=\"true\">\n                    {renderDate(date)}\n                  </span>\n                  {/* Screen-reader announcement for the focused date. */}\n                  <ScreenreaderOnly>{renderDateAnnouncement(date, isCurrentDate)}</ScreenreaderOnly>\n                </GridCell>\n              );\n            })}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"grid-cell.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/grid-cell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,gBAAgB,EAAoB,MAAM,OAAO,CAAC;AAS9E,UAAU,aAAc,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IACpE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,4FA4DnB,CAAC"}
+{"version":3,"file":"grid-cell.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/grid-cell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,gBAAgB,EAAoB,MAAM,OAAO,CAAC;AAS9E,UAAU,aAAc,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IACpE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,4FAiEnB,CAAC"}

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

@@ -6,7 +6,7 @@ import Tooltip from '../../../internal/components/tooltip';
 import useHiddenDescription from '../../../internal/hooks/use-hidden-description';
 import { useMergeRefs } from '../../../internal/hooks/use-merge-refs';
 import { applyDisplayName } from '../../../internal/utils/apply-display-name';
-import styles from './styles.css.js';
+import testutilStyles from '../../test-classes/styles.css.js';
 export const GridCell = forwardRef((props, focusedDateRef) => {
     const { disabledReason } = props, rest = __rest(props, ["disabledReason"]);
     const isDisabledWithReason = !!disabledReason;
@@ -45,7 +45,7 @@ export const GridCell = forwardRef((props, focusedDateRef) => {
         props.children,
         isDisabledWithReason && (React.createElement(React.Fragment, null,
             descriptionEl,
-            showTooltip && (React.createElement(Tooltip, { className: styles['disabled-reason-tooltip'], trackRef: ref, value: disabledReason }))))));
+            showTooltip && (React.createElement(Tooltip, { className: testutilStyles['disabled-reason-tooltip'], trackRef: ref, value: disabledReason, onDismiss: () => setShowTooltip(false) }))))));
 });
 applyDisplayName(GridCell, 'GridCell');
 //# sourceMappingURL=grid-cell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"grid-cell.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/grid-cell.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAoB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,OAAO,MAAM,sCAAsC,CAAC;AAC3D,OAAO,oBAAoB,MAAM,gDAAgD,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAE9E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,KAAoB,EAAE,cAA+C,EAAE,EAAE;IAC3G,MAAM,EAAE,cAAc,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAnC,kBAA2B,CAAQ,CAAC;IAC1C,MAAM,oBAAoB,GAAG,CAAC,CAAC,cAAc,CAAC;IAC9C,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAC5E,MAAM,GAAG,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,OAAO,CACL,0CACE,GAAG,EAAE,YAAY,CAAC,cAAc,EAAE,GAAG,CAAC,IAClC,IAAI,EACJ,CAAC,oBAAoB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,IAC7C,OAAO,EAAE,KAAK,CAAC,EAAE;YACf,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;aACrB;YAED,IAAI,oBAAoB,EAAE;gBACxB,cAAc,CAAC,IAAI,CAAC,CAAC;aACtB;QACH,CAAC,EACD,MAAM,EAAE,KAAK,CAAC,EAAE;YACd,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACpB;YAED,IAAI,oBAAoB,EAAE;gBACxB,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;QACH,CAAC,EACD,YAAY,EAAE,KAAK,CAAC,EAAE;YACpB,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;aAC1B;YAED,IAAI,oBAAoB,EAAE;gBACxB,cAAc,CAAC,IAAI,CAAC,CAAC;aACtB;QACH,CAAC,EACD,YAAY,EAAE,KAAK,CAAC,EAAE;YACpB,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;aAC1B;YAED,IAAI,oBAAoB,EAAE;gBACxB,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;QACH,CAAC;QAEA,KAAK,CAAC,QAAQ;QACd,oBAAoB,IAAI,CACvB;YACG,aAAa;YACb,WAAW,IAAI,CACd,oBAAC,OAAO,IAAC,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,cAAe,GAAI,CACjG,CACA,CACJ,CACE,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, TdHTMLAttributes, useRef, useState } from 'react';\n\nimport Tooltip from '../../../internal/components/tooltip';\nimport useHiddenDescription from '../../../internal/hooks/use-hidden-description';\nimport { useMergeRefs } from '../../../internal/hooks/use-merge-refs';\nimport { applyDisplayName } from '../../../internal/utils/apply-display-name';\n\nimport styles from './styles.css.js';\n\ninterface GridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  disabledReason?: string;\n}\n\nexport const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTMLTableCellElement>) => {\n  const { disabledReason, ...rest } = props;\n  const isDisabledWithReason = !!disabledReason;\n  const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n  const ref = useRef<HTMLTableCellElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  return (\n    <td\n      ref={useMergeRefs(focusedDateRef, ref)}\n      {...rest}\n      {...(isDisabledWithReason ? targetProps : {})}\n      onFocus={event => {\n        if (rest.onFocus) {\n          rest.onFocus(event);\n        }\n\n        if (isDisabledWithReason) {\n          setShowTooltip(true);\n        }\n      }}\n      onBlur={event => {\n        if (rest.onBlur) {\n          rest.onBlur(event);\n        }\n\n        if (isDisabledWithReason) {\n          setShowTooltip(false);\n        }\n      }}\n      onMouseEnter={event => {\n        if (rest.onMouseEnter) {\n          rest.onMouseEnter(event);\n        }\n\n        if (isDisabledWithReason) {\n          setShowTooltip(true);\n        }\n      }}\n      onMouseLeave={event => {\n        if (rest.onMouseLeave) {\n          rest.onMouseLeave(event);\n        }\n\n        if (isDisabledWithReason) {\n          setShowTooltip(false);\n        }\n      }}\n    >\n      {props.children}\n      {isDisabledWithReason && (\n        <>\n          {descriptionEl}\n          {showTooltip && (\n            <Tooltip className={styles['disabled-reason-tooltip']} trackRef={ref} value={disabledReason!} />\n          )}\n        </>\n      )}\n    </td>\n  );\n});\n\napplyDisplayName(GridCell, 'GridCell');\n"]}
+{"version":3,"file":"grid-cell.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/grid-cell.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAoB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,OAAO,MAAM,sCAAsC,CAAC;AAC3D,OAAO,oBAAoB,MAAM,gDAAgD,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAE9E,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAM9D,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,KAAoB,EAAE,cAA+C,EAAE,EAAE;IAC3G,MAAM,EAAE,cAAc,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAnC,kBAA2B,CAAQ,CAAC;IAC1C,MAAM,oBAAoB,GAAG,CAAC,CAAC,cAAc,CAAC;IAC9C,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAC5E,MAAM,GAAG,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,OAAO,CACL,0CACE,GAAG,EAAE,YAAY,CAAC,cAAc,EAAE,GAAG,CAAC,IAClC,IAAI,EACJ,CAAC,oBAAoB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,IAC7C,OAAO,EAAE,KAAK,CAAC,EAAE;YACf,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;aACrB;YAED,IAAI,oBAAoB,EAAE;gBACxB,cAAc,CAAC,IAAI,CAAC,CAAC;aACtB;QACH,CAAC,EACD,MAAM,EAAE,KAAK,CAAC,EAAE;YACd,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACpB;YAED,IAAI,oBAAoB,EAAE;gBACxB,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;QACH,CAAC,EACD,YAAY,EAAE,KAAK,CAAC,EAAE;YACpB,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;aAC1B;YAED,IAAI,oBAAoB,EAAE;gBACxB,cAAc,CAAC,IAAI,CAAC,CAAC;aACtB;QACH,CAAC,EACD,YAAY,EAAE,KAAK,CAAC,EAAE;YACpB,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;aAC1B;YAED,IAAI,oBAAoB,EAAE;gBACxB,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;QACH,CAAC;QAEA,KAAK,CAAC,QAAQ;QACd,oBAAoB,IAAI,CACvB;YACG,aAAa;YACb,WAAW,IAAI,CACd,oBAAC,OAAO,IACN,SAAS,EAAE,cAAc,CAAC,yBAAyB,CAAC,EACpD,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,cAAe,EACtB,SAAS,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,GACtC,CACH,CACA,CACJ,CACE,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, TdHTMLAttributes, useRef, useState } from 'react';\n\nimport Tooltip from '../../../internal/components/tooltip';\nimport useHiddenDescription from '../../../internal/hooks/use-hidden-description';\nimport { useMergeRefs } from '../../../internal/hooks/use-merge-refs';\nimport { applyDisplayName } from '../../../internal/utils/apply-display-name';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\n\ninterface GridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  disabledReason?: string;\n}\n\nexport const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTMLTableCellElement>) => {\n  const { disabledReason, ...rest } = props;\n  const isDisabledWithReason = !!disabledReason;\n  const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n  const ref = useRef<HTMLTableCellElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  return (\n    <td\n      ref={useMergeRefs(focusedDateRef, ref)}\n      {...rest}\n      {...(isDisabledWithReason ? targetProps : {})}\n      onFocus={event => {\n        if (rest.onFocus) {\n          rest.onFocus(event);\n        }\n\n        if (isDisabledWithReason) {\n          setShowTooltip(true);\n        }\n      }}\n      onBlur={event => {\n        if (rest.onBlur) {\n          rest.onBlur(event);\n        }\n\n        if (isDisabledWithReason) {\n          setShowTooltip(false);\n        }\n      }}\n      onMouseEnter={event => {\n        if (rest.onMouseEnter) {\n          rest.onMouseEnter(event);\n        }\n\n        if (isDisabledWithReason) {\n          setShowTooltip(true);\n        }\n      }}\n      onMouseLeave={event => {\n        if (rest.onMouseLeave) {\n          rest.onMouseLeave(event);\n        }\n\n        if (isDisabledWithReason) {\n          setShowTooltip(false);\n        }\n      }}\n    >\n      {props.children}\n      {isDisabledWithReason && (\n        <>\n          {descriptionEl}\n          {showTooltip && (\n            <Tooltip\n              className={testutilStyles['disabled-reason-tooltip']}\n              trackRef={ref}\n              value={disabledReason!}\n              onDismiss={() => setShowTooltip(false)}\n            />\n          )}\n        </>\n      )}\n    </td>\n  );\n});\n\napplyDisplayName(GridCell, 'GridCell');\n"]}

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { GridProps } from './interfaces';
+/**
+ * Calendar grid supports two mechanisms of keyboard navigation:
+ * - Native screen-reader table navigation (semantic table markup);
+ * - Keyboard arrow-keys navigation (a custom key-down handler).
+ *
+ * The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:
+ * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;
+ * - (table navigation) Safari+VO - "dimmed" state is announced twice;
+ * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;
+ * - (keyboard navigation) Firefox+NVDA - every day is announced as "not selected";
+ * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;
+ * - (keyboard navigation) Safari/Chrome+VO - days are not announced as interactive (clickable or selectable);
+ * - (keyboard navigation) Safari/Chrome+VO - day announcements are not interruptive and can be missed if navigating fast.
+ */
+export declare function Grid({ padDates, baseDate, selectedStartDate, selectedEndDate, rangeStartDate, rangeEndDate, focusedDate, focusedDateRef, onSelectDate, onGridKeyDownHandler, onFocusedDateChange, isDateEnabled, dateDisabledReason, locale, todayAriaLabel, currentMonthAriaLabel, ariaLabelledby, className, startOfWeek: rawStartOfWeek, granularity, }: 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":";AAYA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAoCzC;;;;;;;;;;;;;GAaG;AAEH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,YAAY,EACZ,WAAW,EAEX,cAAc,EAEd,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EAEnB,aAAa,EACb,kBAAkB,EAElB,MAAM,EACN,cAAc,EACd,qBAAqB,EACrB,cAAc,EACd,SAAS,EACT,WAAW,EAAE,cAAkB,EAC/B,WAAmB,GACpB,EAAE,SAAS,eA6MX"}

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

@@ -0,0 +1,174 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { isLastDayOfMonth, isSameDay, isSameMonth, isSameYear, isThisMonth, isToday } from 'date-fns';
+import { useInternalI18n } from '../../../i18n/context';
+import ScreenreaderOnly from '../../../internal/components/screenreader-only';
+import { formatDate } from '../../../internal/utils/date-time';
+import { MonthCalendar, YearCalendar } from '../../../internal/utils/date-time/calendar';
+import { normalizeStartOfWeek } from '../../../internal/utils/locale/index.js';
+import { GridCell } from './grid-cell';
+import { renderDateAnnouncement, renderDayName } from './intl';
+import testutilStyles from '../../test-classes/styles.css.js';
+import styles from './styles.css.js';
+const dayUtils = {
+    getItemKey: (rowIndex, rowItemIndex) => `${rowIndex}:${rowItemIndex}`,
+    isSameItem: (date1, date2) => isSameDay(date1, date2),
+    isSamePage: (date1, date2) => isSameMonth(date1, date2),
+    checkIfCurrentDay: date => isToday(date),
+    checkIfCurrentMonth: () => false,
+    checkIfCurrent: date => isToday(date),
+    getPageName: () => 'month',
+};
+const monthUtils = {
+    getItemKey: (rowIndex, rowItemIndex) => `Month ${rowIndex * 3 + rowItemIndex + 1}`,
+    isSameItem: (date1, date2) => isSameMonth(date1, date2),
+    isSamePage: (date1, date2) => isSameYear(date1, date2),
+    checkIfCurrentDay: () => false,
+    checkIfCurrentMonth: date => isThisMonth(date),
+    checkIfCurrent: date => isThisMonth(date),
+    getPageName: () => 'year',
+};
+/**
+ * Calendar grid supports two mechanisms of keyboard navigation:
+ * - Native screen-reader table navigation (semantic table markup);
+ * - Keyboard arrow-keys navigation (a custom key-down handler).
+ *
+ * The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:
+ * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;
+ * - (table navigation) Safari+VO - "dimmed" state is announced twice;
+ * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;
+ * - (keyboard navigation) Firefox+NVDA - every day is announced as "not selected";
+ * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;
+ * - (keyboard navigation) Safari/Chrome+VO - days are not announced as interactive (clickable or selectable);
+ * - (keyboard navigation) Safari/Chrome+VO - day announcements are not interruptive and can be missed if navigating fast.
+ */
+export function Grid({ padDates, baseDate, selectedStartDate, selectedEndDate, rangeStartDate, rangeEndDate, focusedDate, focusedDateRef, onSelectDate, onGridKeyDownHandler, onFocusedDateChange, isDateEnabled, dateDisabledReason, locale, todayAriaLabel, currentMonthAriaLabel, ariaLabelledby, className, startOfWeek: rawStartOfWeek = 0, granularity = 'day', }) {
+    const baseDateTime = baseDate === null || baseDate === void 0 ? void 0 : baseDate.getTime();
+    const i18n = useInternalI18n('date-range-picker');
+    const isMonthPicker = granularity === 'month';
+    const startOfWeek = normalizeStartOfWeek(rawStartOfWeek, locale);
+    const calendar = useMemo(() => {
+        const startDate = rangeStartDate !== null && rangeStartDate !== void 0 ? rangeStartDate : rangeEndDate;
+        const endDate = rangeEndDate !== null && rangeEndDate !== void 0 ? rangeEndDate : rangeStartDate;
+        const selection = startDate && endDate ? [startDate, endDate] : null;
+        if (isMonthPicker) {
+            const calendarData = new YearCalendar({ baseDate, selection });
+            return {
+                header: [],
+                rows: calendarData.quarters,
+                range: calendarData.range,
+            };
+        }
+        const calendarData = new MonthCalendar({ padDates, startOfWeek, baseDate, selection });
+        return {
+            header: calendarData.weekdays,
+            rows: calendarData.weeks,
+            range: calendarData.range,
+        };
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [padDates, startOfWeek, baseDateTime, rangeStartDate, rangeEndDate]);
+    const currentAnnouncement = i18n(isMonthPicker ? 'i18nStrings.currentMonthAriaLabel' : 'i18nStrings.todayAriaLabel', isMonthPicker ? currentMonthAriaLabel : todayAriaLabel);
+    return (React.createElement("table", { role: "grid", "aria-labelledby": ariaLabelledby, className: clsx(styles.grid, className) },
+        !isMonthPicker && (React.createElement("thead", null,
+            React.createElement("tr", null, calendar.header.map(dayIndex => (React.createElement("th", { key: dayIndex, scope: "col", className: clsx(styles['grid-cell'], styles['day-header'], testutilStyles['day-header']) },
+                React.createElement("span", { "aria-hidden": "true" }, renderDayName(locale, dayIndex, 'short')),
+                React.createElement(ScreenreaderOnly, null, renderDayName(locale, dayIndex, 'long')))))))),
+        React.createElement("tbody", { onKeyDown: onGridKeyDownHandler }, calendar.rows.map((row, rowIndex) => {
+            const rowItems = isMonthPicker ? row.months : row.days;
+            const weekTestIndex = !isMonthPicker ? row.testIndex : undefined;
+            return (React.createElement("tr", Object.assign({ key: rowIndex, className: clsx({
+                    [testutilStyles['calendar-quarter']]: isMonthPicker,
+                    [testutilStyles['calendar-week']]: !isMonthPicker,
+                }) }, (!isMonthPicker && weekTestIndex
+                ? {
+                    ['data-awsui-weekindex']: weekTestIndex,
+                }
+                : {})), rowItems.map(({ date, isVisible, isInRange, isSelectionTop, isSelectionBottom, isSelectionLeft, isSelectionRight }, rowItemIndex) => {
+                const { getItemKey, isSameItem, isSamePage, checkIfCurrent, checkIfCurrentDay, checkIfCurrentMonth, getPageName, } = isMonthPicker ? monthUtils : dayUtils;
+                const itemKey = getItemKey(rowIndex, rowItemIndex);
+                const pageName = getPageName();
+                const isCurrentDay = checkIfCurrentDay(date);
+                const isCurrentMonth = checkIfCurrentMonth(date);
+                const isCurrent = checkIfCurrent(date);
+                const isStartDate = !!selectedStartDate && isSameItem(date, selectedStartDate);
+                const isEndDate = !!selectedEndDate && isSameItem(date, selectedEndDate);
+                const isSelected = isStartDate || isEndDate;
+                const isFocused = !!focusedDate && isSameItem(date, focusedDate) && isSamePage(date, baseDate);
+                const onlyOneSelected = !!rangeStartDate && !!rangeEndDate
+                    ? isSameItem(rangeStartDate, rangeEndDate)
+                    : !selectedStartDate || !selectedEndDate;
+                const isEnabled = (!isDateEnabled || isDateEnabled(date)) && isSamePage(date, baseDate);
+                const disabledReason = dateDisabledReason(date);
+                const isDisabledWithReason = !isEnabled && !!disabledReason;
+                const isFocusable = isFocused && (isEnabled || isDisabledWithReason);
+                const baseClasses = {
+                    [testutilStyles['calendar-date']]: !isMonthPicker && isSameMonth(date, baseDate),
+                    [testutilStyles['calendar-month']]: isMonthPicker && isSameYear(date, baseDate),
+                    [styles.day]: !isMonthPicker,
+                    [styles.month]: isMonthPicker,
+                    [styles['grid-cell']]: true,
+                    [styles['in-first-row']]: rowIndex === 0,
+                    [styles['in-first-column']]: rowItemIndex === 0,
+                };
+                if (!isVisible) {
+                    return (React.createElement("td", { key: itemKey, ref: isFocused ? focusedDateRef : undefined, className: clsx(baseClasses, {
+                            [styles[`last-day-of-month`]]: !isMonthPicker && isLastDayOfMonth(date),
+                            [styles[`last-month-of-year`]]: isMonthPicker && date.getMonth() === 11,
+                        }) }));
+                }
+                const handlers = {};
+                if (isEnabled) {
+                    handlers.onClick = () => onSelectDate(date);
+                    handlers.onFocus = () => onFocusedDateChange(date);
+                }
+                // Screen-reader announcement for the focused day/month.
+                let announcement = renderDateAnnouncement({
+                    date,
+                    isCurrent,
+                    locale,
+                    granularity,
+                });
+                if (currentAnnouncement) {
+                    if (isMonthPicker && isThisMonth(date)) {
+                        announcement += `. ${currentAnnouncement}`;
+                    }
+                    else if (!isMonthPicker && isToday(date)) {
+                        announcement += `. ${currentAnnouncement}`;
+                    }
+                }
+                // Can't be focused.
+                let tabIndex = undefined;
+                if (isEnabled || isDisabledWithReason) {
+                    tabIndex = isFocusable
+                        ? 0 // Next focus target.
+                        : -1; // Can be focused programmatically.
+                }
+                return (React.createElement(GridCell, Object.assign({ ref: isFocused ? focusedDateRef : undefined, key: itemKey, className: clsx(baseClasses, {
+                        [styles['in-visible-calendar']]: true,
+                        [styles[`in-current-${pageName}`]]: isSamePage(date, baseDate),
+                        [styles.enabled]: isEnabled,
+                        [styles.selected]: isSelected,
+                        [styles['start-date']]: isStartDate,
+                        [styles['end-date']]: isEndDate,
+                        [testutilStyles['start-date']]: isStartDate,
+                        [testutilStyles['end-date']]: isEndDate,
+                        [styles['no-range']]: isSelected && onlyOneSelected,
+                        [styles['in-range']]: isInRange,
+                        [styles['in-range-border-block-start']]: isSelectionTop,
+                        [styles['in-range-border-block-end']]: isSelectionBottom,
+                        [styles['in-range-border-inline-start']]: isSelectionLeft,
+                        [styles['in-range-border-inline-end']]: isSelectionRight,
+                        [styles.today]: isCurrentDay,
+                        [testutilStyles.today]: isCurrentDay,
+                        [styles['this-month']]: isCurrentMonth,
+                        [testutilStyles['this-month']]: isCurrentMonth,
+                    }), "aria-selected": isEnabled ? isSelected || isInRange : undefined, "aria-current": isCurrent ? 'date' : undefined, "data-date": formatDate(date, granularity), "aria-disabled": !isEnabled, tabIndex: tabIndex, disabledReason: isDisabledWithReason ? disabledReason : undefined }, handlers),
+                    React.createElement("span", { className: styles[`${granularity}-inner`], "aria-hidden": "true" }, isMonthPicker ? date.toLocaleString(locale, { month: 'short' }) : date.getDate()),
+                    React.createElement(ScreenreaderOnly, null, announcement)));
+            })));
+        }))));
+}
+//# 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 clsx from 'clsx';\nimport { isLastDayOfMonth, isSameDay, isSameMonth, isSameYear, isThisMonth, isToday } from 'date-fns';\n\nimport { useInternalI18n } from '../../../i18n/context';\nimport ScreenreaderOnly from '../../../internal/components/screenreader-only';\nimport { formatDate } from '../../../internal/utils/date-time';\nimport { CalendarQuarter, CalendarWeek, MonthCalendar, YearCalendar } from '../../../internal/utils/date-time/calendar';\nimport { normalizeStartOfWeek } from '../../../internal/utils/locale/index.js';\nimport { GridCell } from './grid-cell';\nimport { GridProps } from './interfaces';\nimport { renderDateAnnouncement, renderDayName } from './intl';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface DatePickerUtils {\n  getItemKey: (rowIndex: number, rowItemIndex: number) => string;\n  isSameItem: (date1: Date, date2: Date) => boolean;\n  isSamePage: (date1: Date, date2: Date) => boolean;\n  checkIfCurrentDay: (date: Date) => boolean;\n  checkIfCurrentMonth: (date: Date) => boolean;\n  checkIfCurrent: (date: Date) => boolean;\n  getPageName: () => string;\n}\n\nconst dayUtils: DatePickerUtils = {\n  getItemKey: (rowIndex, rowItemIndex) => `${rowIndex}:${rowItemIndex}`,\n  isSameItem: (date1: Date, date2: Date) => isSameDay(date1, date2),\n  isSamePage: (date1: Date, date2: Date) => isSameMonth(date1, date2),\n  checkIfCurrentDay: date => isToday(date),\n  checkIfCurrentMonth: () => false,\n  checkIfCurrent: date => isToday(date),\n  getPageName: () => 'month',\n};\n\nconst monthUtils: DatePickerUtils = {\n  getItemKey: (rowIndex, rowItemIndex) => `Month ${rowIndex * 3 + rowItemIndex + 1}`,\n  isSameItem: (date1: Date, date2: Date) => isSameMonth(date1, date2),\n  isSamePage: (date1: Date, date2: Date) => isSameYear(date1, date2),\n  checkIfCurrentDay: () => false,\n  checkIfCurrentMonth: date => isThisMonth(date),\n  checkIfCurrent: date => isThisMonth(date),\n  getPageName: () => 'year',\n};\n\n/**\n * Calendar grid supports two mechanisms of keyboard navigation:\n * - Native screen-reader table navigation (semantic table markup);\n * - Keyboard arrow-keys navigation (a custom key-down handler).\n *\n * The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:\n * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;\n * - (table navigation) Safari+VO - \"dimmed\" state is announced twice;\n * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;\n * - (keyboard navigation) Firefox+NVDA - every day is announced as \"not selected\";\n * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;\n * - (keyboard navigation) Safari/Chrome+VO - days are not announced as interactive (clickable or selectable);\n * - (keyboard navigation) Safari/Chrome+VO - day announcements are not interruptive and can be missed if navigating fast.\n */\n\nexport function Grid({\n  padDates,\n  baseDate,\n  selectedStartDate,\n  selectedEndDate,\n  rangeStartDate,\n  rangeEndDate,\n  focusedDate,\n\n  focusedDateRef,\n\n  onSelectDate,\n  onGridKeyDownHandler,\n  onFocusedDateChange,\n\n  isDateEnabled,\n  dateDisabledReason,\n\n  locale,\n  todayAriaLabel,\n  currentMonthAriaLabel,\n  ariaLabelledby,\n  className,\n  startOfWeek: rawStartOfWeek = 0,\n  granularity = 'day',\n}: GridProps) {\n  const baseDateTime = baseDate?.getTime();\n  const i18n = useInternalI18n('date-range-picker');\n  const isMonthPicker = granularity === 'month';\n  const startOfWeek = normalizeStartOfWeek(rawStartOfWeek, locale);\n  const calendar = useMemo(\n    () => {\n      const startDate = rangeStartDate ?? rangeEndDate;\n      const endDate = rangeEndDate ?? rangeStartDate;\n      const selection = startDate && endDate ? ([startDate, endDate] as [Date, Date]) : null;\n      if (isMonthPicker) {\n        const calendarData = new YearCalendar({ baseDate, selection });\n        return {\n          header: [],\n          rows: calendarData.quarters,\n          range: calendarData.range,\n        };\n      }\n\n      const calendarData = new MonthCalendar({ padDates, startOfWeek, baseDate, selection });\n      return {\n        header: calendarData.weekdays,\n        rows: calendarData.weeks,\n        range: calendarData.range,\n      };\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [padDates, startOfWeek, baseDateTime, rangeStartDate, rangeEndDate]\n  );\n\n  const currentAnnouncement = i18n(\n    isMonthPicker ? 'i18nStrings.currentMonthAriaLabel' : 'i18nStrings.todayAriaLabel',\n    isMonthPicker ? currentMonthAriaLabel : todayAriaLabel\n  );\n\n  return (\n    <table role=\"grid\" aria-labelledby={ariaLabelledby} className={clsx(styles.grid, className)}>\n      {!isMonthPicker && (\n        <thead>\n          <tr>\n            {calendar.header.map(dayIndex => (\n              <th\n                key={dayIndex}\n                scope=\"col\"\n                className={clsx(styles['grid-cell'], styles['day-header'], testutilStyles['day-header'])}\n              >\n                <span aria-hidden=\"true\">{renderDayName(locale, dayIndex, 'short')}</span>\n                <ScreenreaderOnly>{renderDayName(locale, dayIndex, 'long')}</ScreenreaderOnly>\n              </th>\n            ))}\n          </tr>\n        </thead>\n      )}\n      <tbody onKeyDown={onGridKeyDownHandler}>\n        {calendar.rows.map((row, rowIndex) => {\n          const rowItems = isMonthPicker ? (row as CalendarQuarter).months : (row as CalendarWeek).days;\n          const weekTestIndex = !isMonthPicker ? (row as CalendarWeek).testIndex : undefined;\n          return (\n            <tr\n              key={rowIndex}\n              className={clsx({\n                [testutilStyles['calendar-quarter']]: isMonthPicker,\n                [testutilStyles['calendar-week']]: !isMonthPicker,\n              })}\n              {...(!isMonthPicker && weekTestIndex\n                ? {\n                    ['data-awsui-weekindex']: weekTestIndex,\n                  }\n                : {})}\n            >\n              {rowItems.map(\n                (\n                  { date, isVisible, isInRange, isSelectionTop, isSelectionBottom, isSelectionLeft, isSelectionRight },\n                  rowItemIndex\n                ) => {\n                  const {\n                    getItemKey,\n                    isSameItem,\n                    isSamePage,\n                    checkIfCurrent,\n                    checkIfCurrentDay,\n                    checkIfCurrentMonth,\n                    getPageName,\n                  } = isMonthPicker ? monthUtils : dayUtils;\n                  const itemKey = getItemKey(rowIndex, rowItemIndex);\n                  const pageName = getPageName();\n                  const isCurrentDay = checkIfCurrentDay(date);\n                  const isCurrentMonth = checkIfCurrentMonth(date);\n                  const isCurrent = checkIfCurrent(date);\n                  const isStartDate = !!selectedStartDate && isSameItem(date, selectedStartDate);\n                  const isEndDate = !!selectedEndDate && isSameItem(date, selectedEndDate);\n                  const isSelected = isStartDate || isEndDate;\n\n                  const isFocused = !!focusedDate && isSameItem(date, focusedDate) && isSamePage(date, baseDate);\n\n                  const onlyOneSelected =\n                    !!rangeStartDate && !!rangeEndDate\n                      ? isSameItem(rangeStartDate, rangeEndDate)\n                      : !selectedStartDate || !selectedEndDate;\n\n                  const isEnabled = (!isDateEnabled || isDateEnabled(date)) && isSamePage(date, baseDate);\n                  const disabledReason = dateDisabledReason(date);\n\n                  const isDisabledWithReason = !isEnabled && !!disabledReason;\n                  const isFocusable = isFocused && (isEnabled || isDisabledWithReason);\n\n                  const baseClasses = {\n                    [testutilStyles['calendar-date']]: !isMonthPicker && isSameMonth(date, baseDate),\n                    [testutilStyles['calendar-month']]: isMonthPicker && isSameYear(date, baseDate),\n                    [styles.day]: !isMonthPicker,\n                    [styles.month]: isMonthPicker,\n                    [styles['grid-cell']]: true,\n                    [styles['in-first-row']]: rowIndex === 0,\n                    [styles['in-first-column']]: rowItemIndex === 0,\n                  };\n\n                  if (!isVisible) {\n                    return (\n                      <td\n                        key={itemKey}\n                        ref={isFocused ? focusedDateRef : undefined}\n                        className={clsx(baseClasses, {\n                          [styles[`last-day-of-month`]]: !isMonthPicker && isLastDayOfMonth(date),\n                          [styles[`last-month-of-year`]]: isMonthPicker && date.getMonth() === 11,\n                        })}\n                      />\n                    );\n                  }\n\n                  const handlers: React.HTMLAttributes<HTMLDivElement> = {};\n                  if (isEnabled) {\n                    handlers.onClick = () => onSelectDate(date);\n                    handlers.onFocus = () => onFocusedDateChange(date);\n                  }\n\n                  // Screen-reader announcement for the focused day/month.\n                  let announcement = renderDateAnnouncement({\n                    date,\n                    isCurrent,\n                    locale,\n                    granularity,\n                  });\n\n                  if (currentAnnouncement) {\n                    if (isMonthPicker && isThisMonth(date)) {\n                      announcement += `. ${currentAnnouncement}`;\n                    } else if (!isMonthPicker && isToday(date)) {\n                      announcement += `. ${currentAnnouncement}`;\n                    }\n                  }\n\n                  // Can't be focused.\n                  let tabIndex: number | undefined = undefined;\n                  if (isEnabled || isDisabledWithReason) {\n                    tabIndex = isFocusable\n                      ? 0 // Next focus target.\n                      : -1; // Can be focused programmatically.\n                  }\n\n                  return (\n                    <GridCell\n                      ref={isFocused ? focusedDateRef : undefined}\n                      key={itemKey}\n                      className={clsx(baseClasses, {\n                        [styles['in-visible-calendar']]: true,\n                        [styles[`in-current-${pageName}`]]: isSamePage(date, baseDate),\n                        [styles.enabled]: isEnabled,\n                        [styles.selected]: isSelected,\n                        [styles['start-date']]: isStartDate,\n                        [styles['end-date']]: isEndDate,\n                        [testutilStyles['start-date']]: isStartDate,\n                        [testutilStyles['end-date']]: isEndDate,\n                        [styles['no-range']]: isSelected && onlyOneSelected,\n                        [styles['in-range']]: isInRange,\n                        [styles['in-range-border-block-start']]: isSelectionTop,\n                        [styles['in-range-border-block-end']]: isSelectionBottom,\n                        [styles['in-range-border-inline-start']]: isSelectionLeft,\n                        [styles['in-range-border-inline-end']]: isSelectionRight,\n                        [styles.today]: isCurrentDay,\n                        [testutilStyles.today]: isCurrentDay,\n                        [styles['this-month']]: isCurrentMonth,\n                        [testutilStyles['this-month']]: isCurrentMonth,\n                      })}\n                      aria-selected={isEnabled ? isSelected || isInRange : undefined}\n                      aria-current={isCurrent ? 'date' : undefined}\n                      data-date={formatDate(date, granularity)}\n                      aria-disabled={!isEnabled}\n                      tabIndex={tabIndex}\n                      disabledReason={isDisabledWithReason ? disabledReason : undefined}\n                      {...handlers}\n                    >\n                      <span className={styles[`${granularity}-inner`]} aria-hidden=\"true\">\n                        {isMonthPicker ? date.toLocaleString(locale, { month: 'short' }) : date.getDate()}\n                      </span>\n                      <ScreenreaderOnly>{announcement}</ScreenreaderOnly>\n                    </GridCell>\n                  );\n                }\n              )}\n            </tr>\n          );\n        })}\n      </tbody>\n    </table>\n  );\n}\n"]}

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

@@ -1,21 +1,4 @@
-import React from 'react';
-import { DateRangePickerProps, DayIndex } from '../../interfaces';
-interface GridProps {
-    baseDate: Date;
-    selectedStartDate: Date | null;
-    selectedEndDate: Date | null;
-    focusedDate: Date | null;
-    onFocusedDateChange: React.Dispatch<React.SetStateAction<Date | null>>;
-    isDateEnabled: DateRangePickerProps.IsDateEnabledFunction;
-    dateDisabledReason: DateRangePickerProps.DateDisabledReasonFunction;
-    isSingleGrid: boolean;
-    onSelectDate: (date: Date) => void;
-    onChangeMonth: (date: Date) => void;
-    locale: string;
-    startOfWeek: DayIndex;
-    todayAriaLabel?: string;
-    headingIdPrefix: string;
-}
-export declare const Grids: ({ baseDate, selectedStartDate, selectedEndDate, focusedDate, onFocusedDateChange, isDateEnabled, dateDisabledReason, isSingleGrid, onSelectDate, onChangeMonth, locale, startOfWeek, todayAriaLabel, headingIdPrefix, }: GridProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { SelectGridProps } from './interfaces';
+export declare const Grids: ({ baseDate, selectedStartDate, selectedEndDate, focusedDate, onFocusedDateChange, isDateEnabled, dateDisabledReason, isSingleGrid, onSelectDate, onPageChange, locale, todayAriaLabel, currentMonthAriaLabel, headingIdPrefix, startOfWeek, granularity, }: SelectGridProps) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAexE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAgBlE,UAAU,SAAS;IACjB,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,kBAAkB,EAAE,oBAAoB,CAAC,0BAA0B,CAAC;IACpE,YAAY,EAAE,OAAO,CAAC;IAEtB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAEpC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,KAAK,4NAmBf,SAAS,gBAmJX,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/grids/index.tsx"],"names":[],"mappings":";AA2BA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAgB/C,eAAO,MAAM,KAAK,+PAqBf,eAAe,gBAkJjB,CAAC"}

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

@@ -1,27 +1,37 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { addMonths, isAfter, isBefore, isSameMonth, max, min } from 'date-fns';
+import { addMonths, addYears, isAfter, isBefore, isSameMonth, isSameYear, max, min } from 'date-fns';
 import { getBaseDay, moveNextDay, moveNextWeek, movePrevDay, movePrevWeek, } from '../../../calendar/utils/navigation-day';
+import { getBaseMonth, moveMonthDown, moveMonthUp, moveNextMonth, movePrevMonth, } from '../../../calendar/utils/navigation-month';
 import { useDateCache } from '../../../internal/hooks/use-date-cache';
 import { KeyCode } from '../../../internal/keycode';
 import handleKey from '../../../internal/utils/handle-key';
 import { hasValue } from '../../../internal/utils/has-value';
 import InternalSpaceBetween from '../../../space-between/internal';
 import { findDateToFocus } from '../utils';
-import { MonthlyGrid } from './monthly-grid';
-import styles from '../../styles.css.js';
-function isVisible(date, baseDate, isSingleGrid) {
+import { Grid } from './grid';
+import testutilStyles from '../../test-classes/styles.css.js';
+function isVisible(date, baseDate, isSingleGrid, granularity) {
+    const isSame = granularity === 'day' ? isSameMonth : isSameYear;
+    const add = granularity === 'day' ? addMonths : addYears;
     if (isSingleGrid) {
-        return isSameMonth(date, baseDate);
+        return isSame(date, baseDate);
     }
-    const previousMonth = addMonths(baseDate, -1);
-    return isSameMonth(date, previousMonth) || isSameMonth(date, baseDate);
+    const previous = add(baseDate, -1);
+    return isSame(date, previous) || isSame(date, baseDate);
 }
-export const Grids = ({ baseDate, selectedStartDate, selectedEndDate, focusedDate, onFocusedDateChange, isDateEnabled, dateDisabledReason, isSingleGrid, onSelectDate, onChangeMonth, locale, startOfWeek, todayAriaLabel, headingIdPrefix, }) => {
+export const Grids = ({ baseDate, selectedStartDate, selectedEndDate, focusedDate, onFocusedDateChange, isDateEnabled, dateDisabledReason, isSingleGrid, onSelectDate, onPageChange, locale, todayAriaLabel, currentMonthAriaLabel, headingIdPrefix, startOfWeek = 0, granularity = 'day', }) => {
     const containerRef = useRef(null);
     const [gridHasFocus, setGridHasFocus] = useState(false);
+    const isMonthPicker = granularity === 'month';
     const focusedDateRef = useRef(null);
+    const addPages = !isMonthPicker ? addMonths : addYears;
+    const getBase = !isMonthPicker ? getBaseDay : getBaseMonth;
+    const moveDown = isMonthPicker ? moveMonthDown : moveNextWeek;
+    const moveLeft = isMonthPicker ? movePrevMonth : movePrevDay;
+    const moveRight = isMonthPicker ? moveNextMonth : moveNextDay;
+    const moveUp = isMonthPicker ? moveMonthUp : movePrevWeek;
     const dateCache = useDateCache();
     baseDate = dateCache(baseDate);
     focusedDate = focusedDate ? dateCache(focusedDate) : null;
@@ -29,16 +39,16 @@ export const Grids = ({ baseDate, selectedStartDate, selectedEndDate, focusedDat
         return isDateEnabled(date) || (!isDateEnabled(date) && !!dateDisabledReason(date));
     }, [isDateEnabled, dateDisabledReason]);
     useEffect(() => {
-        if (focusedDate && !isVisible(focusedDate, baseDate, isSingleGrid)) {
+        if (focusedDate && !isVisible(focusedDate, baseDate, isSingleGrid, granularity)) {
             const direction = isAfter(focusedDate, baseDate) ? -1 : 1;
-            const newMonth = !isSingleGrid && direction === -1 ? addMonths(baseDate, -1) : baseDate;
-            const nearestBaseDate = getBaseDay(newMonth, isDateFocusable);
+            const newPage = !isSingleGrid && direction === -1 ? addPages(baseDate, -1) : baseDate;
+            const nearestBaseDate = getBase(newPage, isDateFocusable);
             const newFocusedDate = findDateToFocus(focusedDate, nearestBaseDate, isDateFocusable);
             onFocusedDateChange(newFocusedDate);
         }
-    }, [baseDate, focusedDate, isSingleGrid, isDateFocusable, onFocusedDateChange]);
+    }, [baseDate, focusedDate, isSingleGrid, granularity, addPages, isDateFocusable, onFocusedDateChange, getBase]);
     const onGridKeyDownHandler = (event) => {
-        let updatedFocusDate;
+        let updatedFocusDate = null;
         const keys = [KeyCode.up, KeyCode.down, KeyCode.left, KeyCode.right, KeyCode.space, KeyCode.enter];
         if (focusedDate === null || keys.indexOf(event.keyCode) === -1) {
             return;
@@ -51,18 +61,18 @@ export const Grids = ({ baseDate, selectedStartDate, selectedEndDate, focusedDat
                 }
                 onSelectDate(focusedDate);
             },
-            onBlockEnd: () => focusedDate && (updatedFocusDate = moveNextWeek(focusedDate, isDateFocusable)),
-            onBlockStart: () => focusedDate && (updatedFocusDate = movePrevWeek(focusedDate, isDateFocusable)),
-            onInlineEnd: () => focusedDate && (updatedFocusDate = moveNextDay(focusedDate, isDateFocusable)),
-            onInlineStart: () => focusedDate && (updatedFocusDate = movePrevDay(focusedDate, isDateFocusable)),
+            onBlockEnd: () => focusedDate && (updatedFocusDate = moveDown(focusedDate, isDateFocusable)),
+            onBlockStart: () => focusedDate && (updatedFocusDate = moveUp(focusedDate, isDateFocusable)),
+            onInlineStart: () => focusedDate && (updatedFocusDate = moveLeft(focusedDate, isDateFocusable)),
+            onInlineEnd: () => focusedDate && (updatedFocusDate = moveRight(focusedDate, isDateFocusable)),
         });
         if (!updatedFocusDate) {
             return;
         }
-        const updatedDateIsVisible = isVisible(updatedFocusDate, baseDate, isSingleGrid);
+        const updatedDateIsVisible = isVisible(updatedFocusDate, baseDate, isSingleGrid, granularity);
         if (!updatedDateIsVisible) {
-            const newMonthIsOnLeftSide = !isSingleGrid && isBefore(updatedFocusDate, baseDate);
-            onChangeMonth(newMonthIsOnLeftSide ? addMonths(updatedFocusDate, 1) : updatedFocusDate);
+            const newPageIsOnLeftSide = !isSingleGrid && isBefore(updatedFocusDate, baseDate);
+            onPageChange(newPageIsOnLeftSide ? addPages(updatedFocusDate, 1) : updatedFocusDate);
         }
         onFocusedDateChange(updatedFocusDate);
     };
@@ -91,9 +101,28 @@ export const Grids = ({ baseDate, selectedStartDate, selectedEndDate, focusedDat
     const rangeEnds = [selectedStartDate !== null && selectedStartDate !== void 0 ? selectedStartDate : focusedDate, selectedEndDate !== null && selectedEndDate !== void 0 ? selectedEndDate : focusedDate].filter(hasValue);
     const rangeStartDate = min(rangeEnds);
     const rangeEndDate = max(rangeEnds);
+    const pageUnit = isMonthPicker ? 'year' : 'month';
+    const sharedGridProps = {
+        selectedEndDate,
+        selectedStartDate,
+        focusedDate,
+        focusedDateRef,
+        rangeStartDate: isRangeVisible ? rangeStartDate : null,
+        rangeEndDate: isRangeVisible ? rangeEndDate : null,
+        isDateEnabled,
+        dateDisabledReason,
+        onSelectDate,
+        onGridKeyDownHandler,
+        onFocusedDateChange,
+        locale,
+        granularity,
+        currentMonthAriaLabel,
+        startOfWeek,
+        todayAriaLabel,
+    };
     return (React.createElement("div", { ref: containerRef, onFocus: onGridFocus, onBlur: onGridBlur },
         React.createElement(InternalSpaceBetween, { size: "xs", direction: "horizontal" },
-            !isSingleGrid && (React.createElement(MonthlyGrid, { padDates: "before", 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, dateDisabledReason: dateDisabledReason, onSelectDate: onSelectDate, onGridKeyDownHandler: onGridKeyDownHandler, onFocusedDateChange: onFocusedDateChange, locale: locale, startOfWeek: startOfWeek, todayAriaLabel: todayAriaLabel, ariaLabelledby: `${headingIdPrefix}-prevmonth` })),
-            React.createElement(MonthlyGrid, { padDates: "after", className: styles['second-grid'], baseDate: baseDate, selectedEndDate: selectedEndDate, selectedStartDate: selectedStartDate, rangeStartDate: isRangeVisible ? rangeStartDate : null, rangeEndDate: isRangeVisible ? rangeEndDate : null, focusedDate: focusedDate, focusedDateRef: focusedDateRef, isDateEnabled: isDateEnabled, dateDisabledReason: dateDisabledReason, onSelectDate: onSelectDate, onGridKeyDownHandler: onGridKeyDownHandler, onFocusedDateChange: onFocusedDateChange, locale: locale, startOfWeek: startOfWeek, todayAriaLabel: todayAriaLabel, ariaLabelledby: `${headingIdPrefix}-currentmonth` }))));
+            !isSingleGrid && (React.createElement(Grid, Object.assign({}, sharedGridProps, { padDates: 'before', className: testutilStyles['first-grid'], baseDate: addPages(baseDate, -1), ariaLabelledby: `${headingIdPrefix}-prev${pageUnit}` }))),
+            React.createElement(Grid, Object.assign({}, sharedGridProps, { padDates: 'after', className: testutilStyles['second-grid'], baseDate: baseDate, ariaLabelledby: `${headingIdPrefix}-current${pageUnit}` })))));
 };
 //# sourceMappingURL=index.js.map