@cloudscape-design/components 3.0.0

package/container/styles.scoped.css

@@ -0,0 +1,258 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_14iqq_1tfbz_97:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-weight: 400;
+  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  display: block;
+  word-wrap: break-word;
+}
+.awsui_root_14iqq_1tfbz_97.awsui_variant-default_14iqq_1tfbz_109:not(#\9), .awsui_root_14iqq_1tfbz_97.awsui_variant-stacked_14iqq_1tfbz_109:not(#\9) {
+  box-shadow: 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12);
+  box-shadow: var(--shadow-container-7nblnj, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
+  border-top: 0px solid transparent;
+  border-top: var(--border-container-top-width-jk6fhm, 0px) solid var(--color-border-container-top-srcvx4, transparent);
+  border-radius: 16px;
+  border-radius: var(--border-container-radius-8dqnwf, 16px);
+  box-sizing: border-box;
+  background-color: #ffffff;
+  background-color: var(--color-background-container-content-i8i4a0, #ffffff);
+}
+@media screen and (-ms-high-contrast: active) {
+  .awsui_root_14iqq_1tfbz_97.awsui_variant-default_14iqq_1tfbz_109:not(#\9), .awsui_root_14iqq_1tfbz_97.awsui_variant-stacked_14iqq_1tfbz_109:not(#\9) {
+    border: 2px solid transparent;
+    border: var(--border-field-width-idlekx, 2px) solid var(--color-border-container-top-srcvx4, transparent);
+  }
+}
+.awsui_root_14iqq_1tfbz_97.awsui_variant-stacked_14iqq_1tfbz_109:not(#\9):not(:last-child) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.awsui_root_14iqq_1tfbz_97.awsui_variant-stacked_14iqq_1tfbz_109 + .awsui_root_14iqq_1tfbz_97.awsui_variant-stacked_14iqq_1tfbz_109:not(#\9) {
+  border-top: 2px solid #e9ebed;
+  border-top: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  box-shadow: -1px 1px 1px 0px #e9ebed, 1px 1px 1px 0px #e9ebed, 0px 9px 8px -7px rgba(0, 7, 22, 0.12), 8px 0px 8px -7px rgba(0, 7, 22, 0.12), -8px 0px 8px -7px rgba(0, 7, 22, 0.12);
+  box-shadow: var(--shadow-container-stacked-lumzae, -1px 1px 1px 0px #e9ebed, 1px 1px 1px 0px #e9ebed, 0px 9px 8px -7px rgba(0, 7, 22, 0.12), 8px 0px 8px -7px rgba(0, 7, 22, 0.12), -8px 0px 8px -7px rgba(0, 7, 22, 0.12));
+}
+
+.awsui_header_14iqq_1tfbz_132:not(#\9) {
+  background-color: #ffffff;
+  background-color: var(--color-background-container-header-4flbq5, #ffffff);
+  border-radius: 16px;
+  border-radius: var(--border-container-radius-8dqnwf, 16px);
+}
+.awsui_header-sticky-disabled_14iqq_1tfbz_136:not(#\9) {
+  position: relative;
+  z-index: 1;
+}
+.awsui_header-sticky-enabled_14iqq_1tfbz_140:not(#\9) {
+  top: 0;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  position: sticky;
+  z-index: 800;
+}
+.awsui_header-stuck_14iqq_1tfbz_146:not(#\9) {
+  box-shadow: 0px 4px 20px 1px rgba(0, 7, 22, 0.1);
+  box-shadow: var(--shadow-sticky-aijlo6, 0px 4px 20px 1px rgba(0, 7, 22, 0.1));
+  border: 0;
+  border-radius: 0;
+}
+.awsui_header-dynamic-height_14iqq_1tfbz_151.awsui_header-stuck_14iqq_1tfbz_146:not(#\9) {
+  margin-bottom: calc(40px - 30px);
+  margin-bottom: calc(var(--font-heading-xl-line-height-doxfdj, 40px) - var(--font-heading-l-line-height-gev4n1, 30px));
+}
+.awsui_header_14iqq_1tfbz_132:not(#\9):not(:empty) {
+  border-bottom: 0px solid transparent;
+  border-bottom: var(--border-container-sticky-width-i7t7xe, 0px) solid var(--color-border-container-divider-4ade7z, transparent);
+}
+.awsui_header_14iqq_1tfbz_132.awsui_with-paddings_14iqq_1tfbz_157:not(#\9) {
+  padding: 12px 24px;
+  padding: var(--space-container-header-vertical-zsjhel, 12px) var(--space-container-horizontal-ddrezg, 24px);
+}
+.awsui_header-variant-cards_14iqq_1tfbz_160:not(#\9) {
+  box-shadow: 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12);
+  box-shadow: var(--shadow-container-7nblnj, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
+  border-top: 0px solid transparent;
+  border-top: var(--border-container-top-width-jk6fhm, 0px) solid var(--color-border-container-top-srcvx4, transparent);
+  border-radius: 16px;
+  border-radius: var(--border-container-radius-8dqnwf, 16px);
+  box-sizing: border-box;
+}
+@media screen and (-ms-high-contrast: active) {
+  .awsui_header-variant-cards_14iqq_1tfbz_160:not(#\9) {
+    border: 2px solid transparent;
+    border: var(--border-field-width-idlekx, 2px) solid var(--color-border-container-top-srcvx4, transparent);
+  }
+}
+.awsui_header-variant-cards_14iqq_1tfbz_160:not(#\9):not(:empty) {
+  border-bottom: 1px solid #d5dbdb;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+}
+@supports (--css-variable-support-check: #000) {
+  .awsui_header-variant-cards_14iqq_1tfbz_160:not(#\9):not(:empty) {
+    border-bottom: 0;
+  }
+}
+.awsui_header-variant-cards_14iqq_1tfbz_160.awsui_header-stuck_14iqq_1tfbz_146:not(#\9) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+/*
+The dynamic height dark header needs a background that will cover
+the default white background of the container component.
+*/
+.awsui_dark-header_14iqq_1tfbz_189:not(#\9) {
+  background-color: #ffffff;
+  background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
+}
+
+.awsui_content_14iqq_1tfbz_193.awsui_with-paddings_14iqq_1tfbz_157:not(#\9) {
+  padding: 20px 24px;
+  padding: var(--space-scaled-l-t03y3z, 20px) var(--space-container-horizontal-ddrezg, 24px);
+}
+.awsui_header_14iqq_1tfbz_132 + .awsui_content_14iqq_1tfbz_193.awsui_with-paddings_14iqq_1tfbz_157:not(#\9) {
+  padding-top: 0px;
+  padding-top: var(--space-container-content-top-fsd8nr, 0px);
+}
+
+.awsui_footer_14iqq_1tfbz_200.awsui_with-paddings_14iqq_1tfbz_157:not(#\9) {
+  padding: 12px 24px;
+  padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-container-horizontal-ddrezg, 24px);
+}
+.awsui_footer_14iqq_1tfbz_200.awsui_with-divider_14iqq_1tfbz_203:not(#\9) {
+  border-top: 2px solid #e9ebed;
+  border-top: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+}

package/container/styles.selectors.js

@@ -0,0 +1,20 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_14iqq_1tfbz_97",
+  "variant-default": "awsui_variant-default_14iqq_1tfbz_109",
+  "variant-stacked": "awsui_variant-stacked_14iqq_1tfbz_109",
+  "header": "awsui_header_14iqq_1tfbz_132",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1tfbz_136",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1tfbz_140",
+  "header-stuck": "awsui_header-stuck_14iqq_1tfbz_146",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1tfbz_151",
+  "with-paddings": "awsui_with-paddings_14iqq_1tfbz_157",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_1tfbz_160",
+  "dark-header": "awsui_dark-header_14iqq_1tfbz_189",
+  "content": "awsui_content_14iqq_1tfbz_193",
+  "footer": "awsui_footer_14iqq_1tfbz_200",
+  "with-divider": "awsui_with-divider_14iqq_1tfbz_203"
+};
+  

package/container/use-sticky-header.d.ts

@@ -0,0 +1,19 @@
+import { RefObject } from 'react';
+interface StickyHeaderContextProps {
+    isStuck: boolean;
+}
+export declare const StickyHeaderContext: import("react").Context<StickyHeaderContextProps>;
+export declare const useStickyHeader: (rootRef: RefObject<HTMLDivElement>, headerRef: RefObject<HTMLDivElement>, __stickyHeader?: boolean | undefined, __stickyOffset?: number | undefined) => {
+    isSticky: boolean;
+    isStuck: boolean;
+    stickyStyles: {
+        style: {
+            top: string;
+        };
+    } | {
+        style?: undefined;
+    };
+};
+export declare function useSupportsStickyHeader(): boolean;
+export {};
+//# sourceMappingURL=use-sticky-header.d.ts.map

package/container/use-sticky-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAA6E,MAAM,OAAO,CAAC;AAQ7G,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,mDAA8D,CAAC;AAE/F,eAAO,MAAM,eAAe,YACjB,UAAU,cAAc,CAAC,aACvB,UAAU,cAAc,CAAC;;;;;;;;;;CA8ErC,CAAC;AAEF,wBAAgB,uBAAuB,YAGtC"}

package/container/use-sticky-header.js

@@ -0,0 +1,88 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useState, useLayoutEffect, useCallback, useEffect, createContext, useMemo } from 'react';
+import { useAppLayoutContext } from '../internal/context/app-layout-context';
+import { useMobile } from '../internal/hooks/use-mobile';
+import { supportsStickyPosition } from '../internal/utils/dom';
+import { getOverflowParents } from '../internal/utils/scrollable-containers';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import customCssProps from '../internal/generated/custom-css-properties';
+export var StickyHeaderContext = createContext({ isStuck: false });
+export var useStickyHeader = function (rootRef, headerRef, __stickyHeader, __stickyOffset) {
+    var currentRootRef = rootRef.current;
+    var currentHeaderRef = headerRef.current;
+    var totalBorder = useMemo(function () {
+        var containerRootBorder = currentRootRef
+            ? parseInt(getComputedStyle(currentRootRef).getPropertyValue('border-top-width'), 10)
+            : 0;
+        var headerBorder = currentHeaderRef
+            ? parseInt(getComputedStyle(currentHeaderRef).getPropertyValue('border-top-width'), 10)
+            : 0;
+        return containerRootBorder + headerBorder;
+    }, [currentRootRef, currentHeaderRef]);
+    // Having no overflow parents, means that the component uses body scroll.
+    // In that case, we reach into AppLayoutContext in case sticky header needs to be
+    //  offset down by the height of other sticky elements positioned on top of the view.
+    var _a = useState(false), usesBodyScroll = _a[0], setState = _a[1];
+    var _b = useState(false), isStuck = _b[0], setIsStuck = _b[1];
+    useLayoutEffect(function () {
+        var overflowParents = rootRef.current && getOverflowParents(rootRef.current).length;
+        setState(!overflowParents);
+    }, [rootRef]);
+    var stickyOffsetTop = useAppLayoutContext().stickyOffsetTop;
+    var effectiveStickyOffset = __stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : (usesBodyScroll ? stickyOffsetTop : 0);
+    var isSticky = useSupportsStickyHeader() && !!__stickyHeader;
+    var isRefresh = useVisualRefresh(rootRef);
+    /**
+     * The AppLayout refactor removed the need for passing the sticky offset in px all the time through the
+     * AppLayoutDomContext provider because that information already exists on the DOM in a custom property
+     * on the Layout subcomponent. Thus, if the Container header is sticky, we are in Visual Refresh and use
+     * body scroll then we will use that property. When a component is used outside AppLayout, we fall back
+     * to the default offset calculated in AppLayoutDomContext.
+     */
+    var computedOffset = "".concat(effectiveStickyOffset - totalBorder, "px");
+    if (usesBodyScroll && isRefresh) {
+        computedOffset = "var(".concat(customCssProps.offsetTopWithNotifications, ", ").concat(computedOffset, ")");
+    }
+    var stickyStyles = isSticky
+        ? {
+            style: {
+                top: computedOffset
+            }
+        }
+        : {};
+    // "stuck" state, when the header has moved from its original posititon has a
+    // box-shadow, applied here by a "header-stuck" className
+    var checkIfStuck = useCallback(function () {
+        if (rootRef.current && headerRef.current) {
+            var rootTop = rootRef.current.getBoundingClientRect().top;
+            var headerTop = headerRef.current.getBoundingClientRect().top;
+            if (rootTop + totalBorder < headerTop) {
+                setIsStuck(true);
+            }
+            else {
+                setIsStuck(false);
+            }
+        }
+    }, [rootRef, headerRef, totalBorder]);
+    useEffect(function () {
+        if (isSticky) {
+            window.addEventListener('scroll', checkIfStuck, true);
+            window.addEventListener('resize', checkIfStuck);
+            return function () {
+                window.removeEventListener('scroll', checkIfStuck, true);
+                window.removeEventListener('resize', checkIfStuck);
+            };
+        }
+    }, [isSticky, checkIfStuck]);
+    return {
+        isSticky: isSticky,
+        isStuck: isStuck,
+        stickyStyles: stickyStyles
+    };
+};
+export function useSupportsStickyHeader() {
+    var isMobile = useMobile();
+    return supportsStickyPosition() && !isMobile;
+}
+//# sourceMappingURL=use-sticky-header.js.map

package/container/use-sticky-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"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 { RefObject, useState, useLayoutEffect, useCallback, useEffect, createContext, useMemo } from 'react';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { supportsStickyPosition } from '../internal/utils/dom';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport customCssProps from '../internal/generated/custom-css-properties';\n\ninterface StickyHeaderContextProps {\n  isStuck: boolean;\n}\n\nexport const StickyHeaderContext = createContext<StickyHeaderContextProps>({ isStuck: false });\n\nexport const useStickyHeader = (\n  rootRef: RefObject<HTMLDivElement>,\n  headerRef: RefObject<HTMLDivElement>,\n  __stickyHeader?: boolean,\n  __stickyOffset?: number\n) => {\n  const currentRootRef = rootRef.current;\n  const currentHeaderRef = headerRef.current;\n  const totalBorder = useMemo(() => {\n    const containerRootBorder = currentRootRef\n      ? parseInt(getComputedStyle(currentRootRef).getPropertyValue('border-top-width'), 10)\n      : 0;\n    const headerBorder = currentHeaderRef\n      ? parseInt(getComputedStyle(currentHeaderRef).getPropertyValue('border-top-width'), 10)\n      : 0;\n    return containerRootBorder + headerBorder;\n  }, [currentRootRef, currentHeaderRef]);\n\n  // Having no overflow parents, means that the component uses body scroll.\n  // In that case, we reach into AppLayoutContext in case sticky header needs to be\n  //  offset down by the height of other sticky elements positioned on top of the view.\n  const [usesBodyScroll, setState] = useState<boolean>(false);\n  const [isStuck, setIsStuck] = useState(false);\n  useLayoutEffect(() => {\n    const overflowParents = rootRef.current && getOverflowParents(rootRef.current).length;\n    setState(!overflowParents);\n  }, [rootRef]);\n  const { stickyOffsetTop } = useAppLayoutContext();\n  const effectiveStickyOffset = __stickyOffset ?? (usesBodyScroll ? stickyOffsetTop : 0);\n  const isSticky = useSupportsStickyHeader() && !!__stickyHeader;\n  const isRefresh = useVisualRefresh(rootRef);\n\n  /**\n   * The AppLayout refactor removed the need for passing the sticky offset in px all the time through the\n   * AppLayoutDomContext provider because that information already exists on the DOM in a custom property\n   * on the Layout subcomponent. Thus, if the Container header is sticky, we are in Visual Refresh and use\n   * body scroll then we will use that property. When a component is used outside AppLayout, we fall back\n   * to the default offset calculated in AppLayoutDomContext.\n   */\n  let computedOffset = `${effectiveStickyOffset - totalBorder}px`;\n  if (usesBodyScroll && isRefresh) {\n    computedOffset = `var(${customCssProps.offsetTopWithNotifications}, ${computedOffset})`;\n  }\n\n  const stickyStyles = isSticky\n    ? {\n        style: {\n          top: computedOffset,\n        },\n      }\n    : {};\n\n  // \"stuck\" state, when the header has moved from its original posititon has a\n  // box-shadow, applied here by a \"header-stuck\" className\n  const checkIfStuck = useCallback(() => {\n    if (rootRef.current && headerRef.current) {\n      const rootTop = rootRef.current.getBoundingClientRect().top;\n      const headerTop = headerRef.current.getBoundingClientRect().top;\n      if (rootTop + totalBorder < headerTop) {\n        setIsStuck(true);\n      } else {\n        setIsStuck(false);\n      }\n    }\n  }, [rootRef, headerRef, totalBorder]);\n  useEffect(() => {\n    if (isSticky) {\n      window.addEventListener('scroll', checkIfStuck, true);\n      window.addEventListener('resize', checkIfStuck);\n      return () => {\n        window.removeEventListener('scroll', checkIfStuck, true);\n        window.removeEventListener('resize', checkIfStuck);\n      };\n    }\n  }, [isSticky, checkIfStuck]);\n  return {\n    isSticky,\n    isStuck,\n    stickyStyles,\n  };\n};\n\nexport function useSupportsStickyHeader() {\n  const isMobile = useMobile();\n  return supportsStickyPosition() && !isMobile;\n}\n"]}

package/contexts/form-field.d.ts

@@ -0,0 +1,2 @@
+export { FormFieldValidationControlProps as FormFieldContextValue, useFormFieldContext, } from '../internal/context/form-field-context';
+//# sourceMappingURL=form-field.d.ts.map

package/contexts/form-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../src/contexts/form-field.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,+BAA+B,IAAI,qBAAqB,EACxD,mBAAmB,GACpB,MAAM,wCAAwC,CAAC"}

package/contexts/form-field.js

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export { useFormFieldContext, } from '../internal/context/form-field-context';
+//# sourceMappingURL=form-field.js.map

package/contexts/form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../src/contexts/form-field.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAEL,mBAAmB,GACpB,MAAM,wCAAwC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport {\n  FormFieldValidationControlProps as FormFieldContextValue,\n  useFormFieldContext,\n} from '../internal/context/form-field-context';\n"]}

package/date-picker/calendar/definitions.d.ts

@@ -0,0 +1,9 @@
+export declare namespace CalendarTypes {
+    interface DateDetail {
+        date: Date;
+    }
+    interface DateDetailNullable {
+        date: Date | null;
+    }
+}
+//# sourceMappingURL=definitions.d.ts.map

package/date-picker/calendar/definitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"definitions.d.ts","sourceRoot":"","sources":["../../../../src/date-picker/calendar/definitions.ts"],"names":[],"mappings":"AAEA,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,UAAU;QACzB,IAAI,EAAE,IAAI,CAAC;KACZ;IAED,UAAiB,kBAAkB;QACjC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;KACnB;CACF"}

package/date-picker/calendar/definitions.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=definitions.js.map

package/date-picker/calendar/definitions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"definitions.js","sourceRoot":"","sources":["../../../../src/date-picker/calendar/definitions.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport namespace CalendarTypes {\n  export interface DateDetail {\n    date: Date;\n  }\n\n  export interface DateDetailNullable {\n    date: Date | null;\n  }\n}\n"]}

package/date-picker/calendar/grid/day/index.d.ts

@@ -0,0 +1,15 @@
+import { DatePickerProps } from '../../../interfaces';
+interface GridDayProps {
+    locale: string;
+    baseDate: Date;
+    date: Date;
+    selectedDate?: Date | null;
+    focusedDate: Date | null;
+    isDateEnabled?: DatePickerProps.IsDateEnabledFunction;
+    todayAriaLabel: string;
+    onSelectDate: (date: Date) => void;
+    isDateInLastWeek: boolean;
+}
+declare const GridDay: ({ locale, baseDate, date, selectedDate, focusedDate, isDateEnabled, todayAriaLabel, onSelectDate, isDateInLastWeek, }: GridDayProps) => JSX.Element;
+export default GridDay;
+//# sourceMappingURL=index.d.ts.map

package/date-picker/calendar/grid/day/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/date-picker/calendar/grid/day/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAKtD,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,IAAI,CAAC;IACf,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,eAAe,CAAC,qBAAqB,CAAC;IACtD,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,QAAA,MAAM,OAAO,0HAUV,YAAY,gBAwCd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/date-picker/calendar/grid/day/index.js

@@ -0,0 +1,46 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import styles from '../../../styles.css.js';
+import { isSameDay, isSameMonth } from 'date-fns';
+import { getDateLabel } from '../../utils/intl';
+import clsx from 'clsx';
+var GridDay = function (_a) {
+    var _b;
+    var locale = _a.locale, baseDate = _a.baseDate, date = _a.date, selectedDate = _a.selectedDate, focusedDate = _a.focusedDate, isDateEnabled = _a.isDateEnabled, todayAriaLabel = _a.todayAriaLabel, onSelectDate = _a.onSelectDate, isDateInLastWeek = _a.isDateInLastWeek;
+    var labels = [getDateLabel(locale, date)];
+    var isFocusable = !!focusedDate && isSameDay(date, focusedDate);
+    var isSelected = !!selectedDate && isSameDay(date, selectedDate);
+    var isEnabled = !isDateEnabled || isDateEnabled(date);
+    var isDateOnSameDay = isSameDay(date, new Date());
+    var computedAttributes = {};
+    var classNames = clsx(styles['calendar-day'], (_b = {},
+        _b[styles['calendar-day-in-last-week']] = isDateInLastWeek,
+        _b[styles['calendar-day-current-month']] = isSameMonth(date, baseDate),
+        _b[styles['calendar-day-enabled']] = isEnabled,
+        _b[styles['calendar-day-selected']] = isSelected,
+        _b[styles['calendar-day-today']] = isDateOnSameDay,
+        _b[styles['calendar-day-focusable']] = isFocusable && isEnabled,
+        _b));
+    if (isSelected) {
+        computedAttributes['aria-current'] = 'date';
+    }
+    if (isDateOnSameDay) {
+        labels.push(todayAriaLabel);
+    }
+    if (isEnabled) {
+        computedAttributes.onClick = function () { return onSelectDate(date); };
+        computedAttributes.tabIndex = -1;
+    }
+    else {
+        computedAttributes['aria-disabled'] = true;
+    }
+    if (isFocusable && isEnabled) {
+        computedAttributes.tabIndex = 0;
+    }
+    return (React.createElement("div", __assign({ className: classNames, "aria-label": labels.join('. '), role: "button" }, computedAttributes),
+        React.createElement("span", { className: styles['day-inner'] }, date.getDate())));
+};
+export default GridDay;
+//# sourceMappingURL=index.js.map

package/date-picker/calendar/grid/day/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/date-picker/calendar/grid/day/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,IAAI,MAAM,MAAM,CAAC;AAcxB,IAAM,OAAO,GAAG,UAAC,EAUF;;QATb,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,YAAY,kBAAA,EACZ,WAAW,iBAAA,EACX,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,YAAY,kBAAA,EACZ,gBAAgB,sBAAA;IAEhB,IAAM,MAAM,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;IAC5C,IAAM,WAAW,GAAG,CAAC,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IAClE,IAAM,UAAU,GAAG,CAAC,CAAC,YAAY,IAAI,SAAS,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;IACnE,IAAM,SAAS,GAAG,CAAC,aAAa,IAAI,aAAa,CAAC,IAAI,CAAC,CAAC;IACxD,IAAM,eAAe,GAAG,SAAS,CAAC,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;IACpD,IAAM,kBAAkB,GAAyC,EAAE,CAAC;IACpE,IAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;QAC5C,GAAC,MAAM,CAAC,2BAA2B,CAAC,IAAG,gBAAgB;QACvD,GAAC,MAAM,CAAC,4BAA4B,CAAC,IAAG,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC;QACnE,GAAC,MAAM,CAAC,sBAAsB,CAAC,IAAG,SAAS;QAC3C,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,UAAU;QAC7C,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,eAAe;QAC/C,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,WAAW,IAAI,SAAS;YAC5D,CAAC;IAEH,IAAI,UAAU,EAAE;QACd,kBAAkB,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC;KAC7C;IAED,IAAI,eAAe,EAAE;QACnB,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC7B;IAED,IAAI,SAAS,EAAE;QACb,kBAAkB,CAAC,OAAO,GAAG,cAAM,OAAA,YAAY,CAAC,IAAI,CAAC,EAAlB,CAAkB,CAAC;QACtD,kBAAkB,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;KAClC;SAAM;QACL,kBAAkB,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC;KAC5C;IAED,IAAI,WAAW,IAAI,SAAS,EAAE;QAC5B,kBAAkB,CAAC,QAAQ,GAAG,CAAC,CAAC;KACjC;IAED,OAAO,CACL,sCAAK,SAAS,EAAE,UAAU,gBAAc,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,QAAQ,IAAK,kBAAkB;QAC7F,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,IAAG,IAAI,CAAC,OAAO,EAAE,CAAQ,CACzD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from '../../../styles.css.js';\nimport { DatePickerProps } from '../../../interfaces';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { getDateLabel } from '../../utils/intl';\nimport clsx from 'clsx';\n\ninterface GridDayProps {\n  locale: string;\n  baseDate: Date;\n  date: Date;\n  selectedDate?: Date | null;\n  focusedDate: Date | null;\n  isDateEnabled?: DatePickerProps.IsDateEnabledFunction;\n  todayAriaLabel: string;\n  onSelectDate: (date: Date) => void;\n  isDateInLastWeek: boolean;\n}\n\nconst GridDay = ({\n  locale,\n  baseDate,\n  date,\n  selectedDate,\n  focusedDate,\n  isDateEnabled,\n  todayAriaLabel,\n  onSelectDate,\n  isDateInLastWeek,\n}: GridDayProps) => {\n  const labels = [getDateLabel(locale, date)];\n  const isFocusable = !!focusedDate && isSameDay(date, focusedDate);\n  const isSelected = !!selectedDate && isSameDay(date, selectedDate);\n  const isEnabled = !isDateEnabled || isDateEnabled(date);\n  const isDateOnSameDay = isSameDay(date, new Date());\n  const computedAttributes: React.HTMLAttributes<HTMLDivElement> = {};\n  const classNames = clsx(styles['calendar-day'], {\n    [styles['calendar-day-in-last-week']]: isDateInLastWeek,\n    [styles['calendar-day-current-month']]: isSameMonth(date, baseDate),\n    [styles['calendar-day-enabled']]: isEnabled,\n    [styles['calendar-day-selected']]: isSelected,\n    [styles['calendar-day-today']]: isDateOnSameDay,\n    [styles['calendar-day-focusable']]: isFocusable && isEnabled,\n  });\n\n  if (isSelected) {\n    computedAttributes['aria-current'] = 'date';\n  }\n\n  if (isDateOnSameDay) {\n    labels.push(todayAriaLabel);\n  }\n\n  if (isEnabled) {\n    computedAttributes.onClick = () => onSelectDate(date);\n    computedAttributes.tabIndex = -1;\n  } else {\n    computedAttributes['aria-disabled'] = true;\n  }\n\n  if (isFocusable && isEnabled) {\n    computedAttributes.tabIndex = 0;\n  }\n\n  return (\n    <div className={classNames} aria-label={labels.join('. ')} role=\"button\" {...computedAttributes}>\n      <span className={styles['day-inner']}>{date.getDate()}</span>\n    </div>\n  );\n};\n\nexport default GridDay;\n"]}

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

@@ -0,0 +1,23 @@
+import { DateChangeHandler, DayIndex, MonthChangeHandler } from '../index';
+import { MoveFocusHandler } from '../utils/move-focus-handler';
+import { CalendarTypes } from '../definitions';
+import { DatePickerProps } from '../../interfaces';
+export interface GridProps {
+    locale: string;
+    baseDate: Date;
+    isDateEnabled: DatePickerProps.IsDateEnabledFunction;
+    focusedDate: Date | null;
+    onSelectDate: DateChangeHandler;
+    onFocusDate: DateChangeHandlerNullable;
+    onChangeMonth: MonthChangeHandler;
+    startOfWeek: DayIndex;
+    todayAriaLabel: string;
+    selectedDate: Date | null;
+    handleFocusMove: MoveFocusHandler;
+}
+export interface DateChangeHandlerNullable {
+    (detail: CalendarTypes.DateDetailNullable): void;
+}
+declare const Grid: ({ locale, baseDate, isDateEnabled, focusedDate, onSelectDate, onFocusDate, onChangeMonth, startOfWeek, todayAriaLabel, selectedDate, handleFocusMove, }: GridProps) => JSX.Element;
+export default Grid;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-picker/calendar/grid/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAInD,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,IAAI,CAAC;IACf,aAAa,EAAE,eAAe,CAAC,qBAAqB,CAAC;IACrD,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,yBAAyB,CAAC;IACvC,aAAa,EAAE,kBAAkB,CAAC;IAClC,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,eAAe,EAAE,gBAAgB,CAAC;CACnC;AAED,MAAM,WAAW,yBAAyB;IACxC,CAAC,MAAM,EAAE,aAAa,CAAC,kBAAkB,GAAG,IAAI,CAAC;CAClD;AAED,QAAA,MAAM,IAAI,4JAYP,SAAS,gBAsFX,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,63 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useMemo } from 'react';
+import styles from '../../styles.css.js';
+import GridDay from './day';
+import { KeyCode } from '../../../internal/keycode';
+import { addDays, addWeeks, isSameMonth } from 'date-fns';
+import { getCalendarMonth } from 'mnth';
+import rotateDayIndexes from '../utils/rotate-day-indexes';
+import { renderDayName } from '../utils/intl';
+var Grid = function (_a) {
+    var locale = _a.locale, baseDate = _a.baseDate, isDateEnabled = _a.isDateEnabled, focusedDate = _a.focusedDate, onSelectDate = _a.onSelectDate, onFocusDate = _a.onFocusDate, onChangeMonth = _a.onChangeMonth, startOfWeek = _a.startOfWeek, todayAriaLabel = _a.todayAriaLabel, selectedDate = _a.selectedDate, handleFocusMove = _a.handleFocusMove;
+    var onGridKeyDownHandler = function (event) {
+        var updatedFocusDate;
+        if (focusedDate === null) {
+            return;
+        }
+        switch (event.keyCode) {
+            case KeyCode.enter:
+                event.preventDefault();
+                if (focusedDate) {
+                    onFocusDate({ date: null });
+                    onSelectDate({ date: focusedDate });
+                }
+                return;
+            case KeyCode.right:
+                event.preventDefault();
+                updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, function (date) { return addDays(date, 1); });
+                break;
+            case KeyCode.left:
+                event.preventDefault();
+                updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, function (date) { return addDays(date, -1); });
+                break;
+            case KeyCode.up:
+                event.preventDefault();
+                updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, function (date) { return addWeeks(date, -1); });
+                break;
+            case KeyCode.down:
+                event.preventDefault();
+                updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, function (date) { return addWeeks(date, 1); });
+                break;
+            default:
+                return;
+        }
+        if (!isSameMonth(updatedFocusDate, baseDate)) {
+            onChangeMonth(updatedFocusDate);
+        }
+        onFocusDate({ date: updatedFocusDate });
+    };
+    var weeks = useMemo(function () { return getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }); }, [baseDate, startOfWeek]);
+    return (React.createElement("div", null,
+        React.createElement("div", { className: styles['calendar-day-names'] }, rotateDayIndexes(startOfWeek).map(function (i) { return (React.createElement("div", { key: "day-name-".concat(i), className: styles['calendar-day-name'] }, renderDayName(locale, i))); })),
+        React.createElement("div", { className: styles['calendar-dates'], onKeyDown: onGridKeyDownHandler }, weeks.map(function (week, weekIndex) {
+            var isDateInLastWeek = weeks.length - 1 === weekIndex;
+            return (React.createElement("div", { key: "week-".concat(weekIndex), className: styles['calendar-week'] }, week.map(function (date, dateIndex) {
+                return (React.createElement(GridDay, { key: "date-".concat(weekIndex, "-").concat(dateIndex), locale: locale, baseDate: baseDate, selectedDate: selectedDate, date: date, focusedDate: focusedDate, todayAriaLabel: todayAriaLabel, onSelectDate: function (date) {
+                        onSelectDate({ date: date });
+                    }, isDateEnabled: isDateEnabled, isDateInLastWeek: isDateInLastWeek }));
+            })));
+        }))));
+};
+export default Grid;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/date-picker/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, { useMemo } from 'react';\nimport styles from '../../styles.css.js';\nimport GridDay from './day';\nimport { KeyCode } from '../../../internal/keycode';\nimport { addDays, addWeeks, isSameMonth } from 'date-fns';\nimport { getCalendarMonth } from 'mnth';\nimport { DateChangeHandler, DayIndex, MonthChangeHandler } from '../index';\nimport { MoveFocusHandler } from '../utils/move-focus-handler';\nimport { CalendarTypes } from '../definitions';\nimport { DatePickerProps } from '../../interfaces';\nimport rotateDayIndexes from '../utils/rotate-day-indexes';\nimport { renderDayName } from '../utils/intl';\n\nexport interface GridProps {\n  locale: string;\n  baseDate: Date;\n  isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n  focusedDate: Date | null;\n  onSelectDate: DateChangeHandler;\n  onFocusDate: DateChangeHandlerNullable;\n  onChangeMonth: MonthChangeHandler;\n  startOfWeek: DayIndex;\n  todayAriaLabel: string;\n  selectedDate: Date | null;\n  handleFocusMove: MoveFocusHandler;\n}\n\nexport interface DateChangeHandlerNullable {\n  (detail: CalendarTypes.DateDetailNullable): void;\n}\n\nconst Grid = ({\n  locale,\n  baseDate,\n  isDateEnabled,\n  focusedDate,\n  onSelectDate,\n  onFocusDate,\n  onChangeMonth,\n  startOfWeek,\n  todayAriaLabel,\n  selectedDate,\n  handleFocusMove,\n}: GridProps) => {\n  const onGridKeyDownHandler = (event: React.KeyboardEvent) => {\n    let updatedFocusDate;\n\n    if (focusedDate === null) {\n      return;\n    }\n\n    switch (event.keyCode) {\n      case KeyCode.enter:\n        event.preventDefault();\n        if (focusedDate) {\n          onFocusDate({ date: null });\n          onSelectDate({ date: focusedDate });\n        }\n        return;\n      case KeyCode.right:\n        event.preventDefault();\n        updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, date => addDays(date, 1));\n        break;\n      case KeyCode.left:\n        event.preventDefault();\n        updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, date => addDays(date, -1));\n        break;\n      case KeyCode.up:\n        event.preventDefault();\n        updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, date => addWeeks(date, -1));\n        break;\n      case KeyCode.down:\n        event.preventDefault();\n        updatedFocusDate = handleFocusMove(focusedDate, isDateEnabled, date => addWeeks(date, 1));\n        break;\n      default:\n        return;\n    }\n\n    if (!isSameMonth(updatedFocusDate, baseDate)) {\n      onChangeMonth(updatedFocusDate);\n    }\n    onFocusDate({ date: updatedFocusDate });\n  };\n\n  const weeks = useMemo<Date[][]>(\n    () => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),\n    [baseDate, startOfWeek]\n  );\n\n  return (\n    <div>\n      <div className={styles['calendar-day-names']}>\n        {rotateDayIndexes(startOfWeek).map(i => (\n          <div key={`day-name-${i}`} className={styles['calendar-day-name']}>\n            {renderDayName(locale, i)}\n          </div>\n        ))}\n      </div>\n      <div className={styles['calendar-dates']} onKeyDown={onGridKeyDownHandler}>\n        {weeks.map((week, weekIndex) => {\n          const isDateInLastWeek = weeks.length - 1 === weekIndex;\n\n          return (\n            <div key={`week-${weekIndex}`} className={styles['calendar-week']}>\n              {week.map((date, dateIndex) => {\n                return (\n                  <GridDay\n                    key={`date-${weekIndex}-${dateIndex}`}\n                    locale={locale}\n                    baseDate={baseDate}\n                    selectedDate={selectedDate}\n                    date={date}\n                    focusedDate={focusedDate}\n                    todayAriaLabel={todayAriaLabel}\n                    onSelectDate={date => {\n                      onSelectDate({ date });\n                    }}\n                    isDateEnabled={isDateEnabled}\n                    isDateInLastWeek={isDateInLastWeek}\n                  />\n                );\n              })}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default Grid;\n"]}