@cloudscape-design/components 3.0.10 → 3.0.11

package/app-layout/visual-refresh/hooks/use-dynamic-overlap.d.ts

@@ -0,0 +1,14 @@
+export interface UseDynamicOverlapProps {
+    /**
+     * Disables hook if not needed. By default, `false`.
+     */
+    disabled?: boolean;
+}
+/**
+ * Observes the height of an element referenced by the returning ref and sets the value as overlapping
+ * height for the surrounding AppLayout component.
+ * @param props.disabled disables hook if not applicable
+ * @returns ref to be measured as overlapping height
+ */
+export declare function useDynamicOverlap(props?: UseDynamicOverlapProps): import("react").Ref<any>;
+//# sourceMappingURL=use-dynamic-overlap.d.ts.map

package/app-layout/visual-refresh/hooks/use-dynamic-overlap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dynamic-overlap.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh/hooks/use-dynamic-overlap.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,CAAC,EAAE,sBAAsB,4BAqB/D"}

package/app-layout/visual-refresh/hooks/use-dynamic-overlap.js

@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useContext, useLayoutEffect } from 'react';
+import { AppLayoutContext } from '../context';
+import { useContainerQuery } from '../../../internal/hooks/container-queries';
+/**
+ * Observes the height of an element referenced by the returning ref and sets the value as overlapping
+ * height for the surrounding AppLayout component.
+ * @param props.disabled disables hook if not applicable
+ * @returns ref to be measured as overlapping height
+ */
+export function useDynamicOverlap(props) {
+    var _a;
+    var disabled = (_a = props === null || props === void 0 ? void 0 : props.disabled) !== null && _a !== void 0 ? _a : false;
+    var setDynamicOverlapHeight = useContext(AppLayoutContext).setDynamicOverlapHeight;
+    var _b = useContainerQuery(function (rect) { return rect.height; }), overlapContainerQuery = _b[0], overlapElementRef = _b[1];
+    useLayoutEffect(function handleDynamicOverlapHeight() {
+        if (!disabled) {
+            setDynamicOverlapHeight(overlapContainerQuery !== null && overlapContainerQuery !== void 0 ? overlapContainerQuery : 0);
+        }
+        return function () {
+            if (!disabled) {
+                setDynamicOverlapHeight(0);
+            }
+        };
+    }, [disabled, overlapContainerQuery, setDynamicOverlapHeight]);
+    return overlapElementRef;
+}
+//# sourceMappingURL=use-dynamic-overlap.js.map

package/app-layout/visual-refresh/hooks/use-dynamic-overlap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dynamic-overlap.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh/hooks/use-dynamic-overlap.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAS9E;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA8B;;IAC9D,IAAM,QAAQ,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,mCAAI,KAAK,CAAC;IAClC,IAAA,uBAAuB,GAAK,UAAU,CAAC,gBAAgB,CAAC,wBAAjC,CAAkC;IAC3D,IAAA,KAA6C,iBAAiB,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,MAAM,EAAX,CAAW,CAAC,EAAlF,qBAAqB,QAAA,EAAE,iBAAiB,QAA0C,CAAC;IAE1F,eAAe,CACb,SAAS,0BAA0B;QACjC,IAAI,CAAC,QAAQ,EAAE;YACb,uBAAuB,CAAC,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,CAAC,CAAC,CAAC;SACrD;QAED,OAAO;YACL,IAAI,CAAC,QAAQ,EAAE;gBACb,uBAAuB,CAAC,CAAC,CAAC,CAAC;aAC5B;QACH,CAAC,CAAC;IACJ,CAAC,EACD,CAAC,QAAQ,EAAE,qBAAqB,EAAE,uBAAuB,CAAC,CAC3D,CAAC;IAEF,OAAO,iBAAiB,CAAC;AAC3B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, useLayoutEffect } from 'react';\n\nimport { AppLayoutContext } from '../context';\nimport { useContainerQuery } from '../../../internal/hooks/container-queries';\n\nexport interface UseDynamicOverlapProps {\n  /**\n   * Disables hook if not needed. By default, `false`.\n   */\n  disabled?: boolean;\n}\n\n/**\n * Observes the height of an element referenced by the returning ref and sets the value as overlapping\n * height for the surrounding AppLayout component.\n * @param props.disabled disables hook if not applicable\n * @returns ref to be measured as overlapping height\n */\nexport function useDynamicOverlap(props?: UseDynamicOverlapProps) {\n  const disabled = props?.disabled ?? false;\n  const { setDynamicOverlapHeight } = useContext(AppLayoutContext);\n  const [overlapContainerQuery, overlapElementRef] = useContainerQuery(rect => rect.height);\n\n  useLayoutEffect(\n    function handleDynamicOverlapHeight() {\n      if (!disabled) {\n        setDynamicOverlapHeight(overlapContainerQuery ?? 0);\n      }\n\n      return () => {\n        if (!disabled) {\n          setDynamicOverlapHeight(0);\n        }\n      };\n    },\n    [disabled, overlapContainerQuery, setDynamicOverlapHeight]\n  );\n\n  return overlapElementRef;\n}\n"]}

package/container/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;CAC1E;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,cAAc,EACd,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,WAAW,EACX,GAAG,SAAS,EACb,EAAE,sBAAsB,eAyExB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;CAC1E;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,cAAc,EACd,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,WAAW,EACX,GAAG,SAAS,EACb,EAAE,sBAAsB,eA0DxB"}

package/container/internal.js

@@ -2,11 +2,10 @@ import { __assign, __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
-import React, { useContext, useLayoutEffect, useRef } from 'react';
-import { AppLayoutContext } from '../app-layout/visual-refresh/context';
+import React, { useRef } from 'react';
+import { useDynamicOverlap } from '../app-layout/visual-refresh/hooks/use-dynamic-overlap';
 import { getBaseProps } from '../internal/base-component';
 import { StickyHeaderContext, useStickyHeader } from './use-sticky-header';
-import { useContainerQuery } from '../internal/hooks/container-queries';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import styles from './styles.css.js';
@@ -16,20 +15,10 @@ export default function InternalContainer(_a) {
     var baseProps = getBaseProps(restProps);
     var rootRef = useRef(null);
     var headerRef = useRef(null);
+    var _m = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset), isSticky = _m.isSticky, isStuck = _m.isStuck, stickyStyles = _m.stickyStyles;
     var isRefresh = useVisualRefresh(rootRef);
     var hasDynamicHeight = isRefresh && variant === 'full-page';
-    var _m = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset), isSticky = _m.isSticky, isStuck = _m.isStuck, stickyStyles = _m.stickyStyles;
-    /**
-     * Observe the dynamic height of the full page container variant in
-     * visual refresh and update the AppLayout dynamicOverlapHeight property.
-     */
-    var setDynamicOverlapHeight = useContext(AppLayoutContext).setDynamicOverlapHeight;
-    var _o = useContainerQuery(function (rect) { return rect.height; }), overlapContainerQuery = _o[0], overlapElement = _o[1];
-    useLayoutEffect(function handleDynamicOverlapHeight() {
-        if (hasDynamicHeight) {
-            setDynamicOverlapHeight(overlapContainerQuery !== null && overlapContainerQuery !== void 0 ? overlapContainerQuery : 0);
-        }
-    }, [hasDynamicHeight, overlapContainerQuery, setDynamicOverlapHeight]);
+    var overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight });
     var mergedRef = useMergeRefs(rootRef, __internalRootRef);
     var headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);
     return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles["variant-".concat(variant)]), ref: mergedRef }),

package/container/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/internal.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 clsx from 'clsx';\nimport React, { useContext, useLayoutEffect, useRef } from 'react';\nimport { AppLayoutContext } from '../app-layout/visual-refresh/context';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __disableFooterPaddings?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  /**\n   * Additional internal variant:\n   * * `embedded` - Use this variant within a parent container (such as a modal,\n   *                expandable section, container or split panel).\n   * * `full-page` – Only for internal use in table, cards and other components\n   */\n  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n}\n\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  __stickyOffset,\n  __stickyHeader = false,\n  __internalRootRef = null,\n  __disableFooterDivider = false,\n  __disableFooterPaddings = false,\n  __headerRef,\n  ...restProps\n}: InternalContainerProps) {\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const isRefresh = useVisualRefresh(rootRef);\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n  const { isSticky, isStuck, stickyStyles } = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset);\n\n  /**\n   * Observe the dynamic height of the full page container variant in\n   * visual refresh and update the AppLayout dynamicOverlapHeight property.\n   */\n  const { setDynamicOverlapHeight } = useContext(AppLayoutContext);\n  const [overlapContainerQuery, overlapElement] = useContainerQuery(rect => rect.height);\n\n  useLayoutEffect(\n    function handleDynamicOverlapHeight() {\n      if (hasDynamicHeight) {\n        setDynamicOverlapHeight(overlapContainerQuery ?? 0);\n      }\n    },\n    [hasDynamicHeight, overlapContainerQuery, setDynamicOverlapHeight]\n  );\n\n  const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, styles[`variant-${variant}`])}\n      ref={mergedRef}\n    >\n      {header && (\n        <StickyHeaderContext.Provider value={{ isStuck }}>\n          <div\n            className={clsx(styles.header, styles[`header-variant-${variant}`], {\n              [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n              [styles['header-sticky-enabled']]: isSticky,\n              [styles['header-dynamic-height']]: hasDynamicHeight,\n              [styles['header-stuck']]: isStuck,\n              [styles['with-paddings']]: !disableHeaderPaddings,\n            })}\n            {...stickyStyles}\n            ref={headerMergedRef}\n          >\n            {hasDynamicHeight ? (\n              <div className={clsx(styles['dark-header'], 'awsui-context-content-header')}>{header}</div>\n            ) : (\n              header\n            )}\n          </div>\n        </StickyHeaderContext.Provider>\n      )}\n      <div\n        className={clsx(styles.content, {\n          [styles['with-paddings']]: !disableContentPaddings,\n        })}\n      >\n        {children}\n      </div>\n      {footer && (\n        <div\n          className={clsx(styles.footer, {\n            [styles['with-divider']]: !__disableFooterDivider,\n            [styles['with-paddings']]: !__disableFooterPaddings,\n          })}\n        >\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAC;AAE3F,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAiBrC,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAcjB;;IAbvB,IAAA,MAAM,YAAA,EACN,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EACnB,6BAA6B,EAA7B,qBAAqB,mBAAG,KAAK,KAAA,EAC7B,8BAA8B,EAA9B,sBAAsB,mBAAG,KAAK,KAAA,EAC9B,cAAc,oBAAA,EACd,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACxB,8BAA8B,EAA9B,sBAAsB,mBAAG,KAAK,KAAA,EAC9B,+BAA+B,EAA/B,uBAAuB,mBAAG,KAAK,KAAA,EAC/B,WAAW,iBAAA,EACR,SAAS,cAb4B,2NAczC,CADa;IAEZ,IAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,IAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,IAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,IAAA,KAAsC,eAAe,CAAC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,CAAC,EAAvG,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,YAAY,kBAAwE,CAAC;IAChH,IAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C,IAAM,gBAAgB,GAAG,SAAS,IAAI,OAAO,KAAK,WAAW,CAAC;IAC9D,IAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAE1E,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IAC3D,IAAM,eAAe,GAAG,YAAY,CAAC,SAAS,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC;IAE7E,OAAO,CACL,wCACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,kBAAW,OAAO,CAAE,CAAC,CAAC,EAC/E,GAAG,EAAE,SAAS;QAEb,MAAM,IAAI,CACT,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,SAAA,EAAE;YAC9C,sCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,yBAAkB,OAAO,CAAE,CAAC;oBAChE,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,cAAc,IAAI,CAAC,QAAQ;oBAC/D,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,QAAQ;oBAC3C,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,gBAAgB;oBACnD,GAAC,MAAM,CAAC,cAAc,CAAC,IAAG,OAAO;oBACjC,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,CAAC,qBAAqB;wBACjD,IACE,YAAY,IAChB,GAAG,EAAE,eAAe,KAEnB,gBAAgB,CAAC,CAAC,CAAC,CAClB,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,8BAA8B,CAAC,IAAG,MAAM,CAAO,CAC5F,CAAC,CAAC,CAAC,CACF,MAAM,CACP,CACG,CACuB,CAChC;QACD,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO;gBAC5B,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,CAAC,sBAAsB;oBAClD,IAED,QAAQ,CACL;QACL,MAAM,IAAI,CACT,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM;gBAC3B,GAAC,MAAM,CAAC,cAAc,CAAC,IAAG,CAAC,sBAAsB;gBACjD,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,CAAC,uBAAuB;oBACnD,IAED,MAAM,CACH,CACP,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { useDynamicOverlap } from '../app-layout/visual-refresh/hooks/use-dynamic-overlap';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __disableFooterPaddings?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  /**\n   * Additional internal variant:\n   * * `embedded` - Use this variant within a parent container (such as a modal,\n   *                expandable section, container or split panel).\n   * * `full-page` – Only for internal use in table, cards and other components\n   */\n  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n}\n\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  __stickyOffset,\n  __stickyHeader = false,\n  __internalRootRef = null,\n  __disableFooterDivider = false,\n  __disableFooterPaddings = false,\n  __headerRef,\n  ...restProps\n}: InternalContainerProps) {\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { isSticky, isStuck, stickyStyles } = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset);\n  const isRefresh = useVisualRefresh(rootRef);\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n  const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight });\n\n  const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, styles[`variant-${variant}`])}\n      ref={mergedRef}\n    >\n      {header && (\n        <StickyHeaderContext.Provider value={{ isStuck }}>\n          <div\n            className={clsx(styles.header, styles[`header-variant-${variant}`], {\n              [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n              [styles['header-sticky-enabled']]: isSticky,\n              [styles['header-dynamic-height']]: hasDynamicHeight,\n              [styles['header-stuck']]: isStuck,\n              [styles['with-paddings']]: !disableHeaderPaddings,\n            })}\n            {...stickyStyles}\n            ref={headerMergedRef}\n          >\n            {hasDynamicHeight ? (\n              <div className={clsx(styles['dark-header'], 'awsui-context-content-header')}>{header}</div>\n            ) : (\n              header\n            )}\n          </div>\n        </StickyHeaderContext.Provider>\n      )}\n      <div\n        className={clsx(styles.content, {\n          [styles['with-paddings']]: !disableContentPaddings,\n        })}\n      >\n        {children}\n      </div>\n      {footer && (\n        <div\n          className={clsx(styles.footer, {\n            [styles['with-divider']]: !__disableFooterDivider,\n            [styles['with-paddings']]: !__disableFooterPaddings,\n          })}\n        >\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

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

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

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

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

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

@@ -5,11 +5,10 @@ import React from 'react';
 import { InternalButton } from '../../../../button/internal';
 import styles from '../../../styles.css.js';
 var HeaderButton = function (_a) {
-    var ariaLabel = _a.ariaLabel, isPrevious = _a.isPrevious, onChangeMonth = _a.onChangeMonth, focusable = _a.focusable;
+    var ariaLabel = _a.ariaLabel, isPrevious = _a.isPrevious, onChangeMonth = _a.onChangeMonth;
     var iconName = isPrevious ? 'angle-left' : 'angle-right';
     var additionalAttributes = {
-        className: isPrevious ? styles['calendar-prev-month-btn'] : styles['calendar-next-month-btn'],
-        tabIndex: focusable ? 0 : -1
+        className: isPrevious ? styles['calendar-prev-month-btn'] : styles['calendar-next-month-btn']
     };
     var onClick = function (e) {
         e.preventDefault();

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-picker/calendar/header/index.tsx"],"names":[],"mappings":"AAOA,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,QAAA,MAAM,cAAc,yGAQjB,mBAAmB,gBAoBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-picker/calendar/header/index.tsx"],"names":[],"mappings":"AAOA,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,cAAc,uFAOjB,mBAAmB,gBAUrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -5,11 +5,11 @@ import styles from '../../styles.css.js';
 import { renderMonthAndYear } from '../utils/intl';
 import HeaderButton from './button';
 var CalendarHeader = function (_a) {
-    var headerId = _a.headerId, baseDate = _a.baseDate, locale = _a.locale, onChangeMonth = _a.onChangeMonth, previousMonthLabel = _a.previousMonthLabel, nextMonthLabel = _a.nextMonthLabel, calendarHasFocus = _a.calendarHasFocus;
+    var headerId = _a.headerId, baseDate = _a.baseDate, locale = _a.locale, onChangeMonth = _a.onChangeMonth, previousMonthLabel = _a.previousMonthLabel, nextMonthLabel = _a.nextMonthLabel;
     return (React.createElement("div", { className: styles['calendar-header'] },
-        React.createElement(HeaderButton, { ariaLabel: previousMonthLabel, isPrevious: true, onChangeMonth: onChangeMonth, focusable: calendarHasFocus }),
+        React.createElement(HeaderButton, { ariaLabel: previousMonthLabel, isPrevious: true, onChangeMonth: onChangeMonth }),
         React.createElement("div", { className: styles['calendar-header-month'], id: headerId, "aria-live": "polite" }, renderMonthAndYear(locale, baseDate)),
-        React.createElement(HeaderButton, { ariaLabel: nextMonthLabel, isPrevious: false, onChangeMonth: onChangeMonth, focusable: calendarHasFocus })));
+        React.createElement(HeaderButton, { ariaLabel: nextMonthLabel, isPrevious: false, onChangeMonth: onChangeMonth })));
 };
 export default CalendarHeader;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/date-picker/calendar/header/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,YAAY,MAAM,UAAU,CAAC;AAYpC,IAAM,cAAc,GAAG,UAAC,EAQF;QAPpB,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,kBAAkB,wBAAA,EAClB,cAAc,oBAAA,EACd,gBAAgB,sBAAA;IAEhB,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;QACvC,oBAAC,YAAY,IACX,SAAS,EAAE,kBAAkB,EAC7B,UAAU,EAAE,IAAI,EAChB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,gBAAgB,GAC3B;QACF,6BAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,EAAE,QAAQ,eAAY,QAAQ,IAC9E,kBAAkB,CAAC,MAAM,EAAE,QAAQ,CAAC,CACjC;QACN,oBAAC,YAAY,IACX,SAAS,EAAE,cAAc,EACzB,UAAU,EAAE,KAAK,EACjB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,gBAAgB,GAC3B,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from '../../styles.css.js';\nimport { renderMonthAndYear } from '../utils/intl';\nimport HeaderButton from './button';\n\ninterface CalendarHeaderProps {\n  headerId: string;\n  baseDate: Date;\n  locale: string;\n  onChangeMonth: (prev?: boolean) => void;\n  previousMonthLabel: string;\n  nextMonthLabel: string;\n  calendarHasFocus: boolean;\n}\n\nconst CalendarHeader = ({\n  headerId,\n  baseDate,\n  locale,\n  onChangeMonth,\n  previousMonthLabel,\n  nextMonthLabel,\n  calendarHasFocus,\n}: CalendarHeaderProps) => {\n  return (\n    <div className={styles['calendar-header']}>\n      <HeaderButton\n        ariaLabel={previousMonthLabel}\n        isPrevious={true}\n        onChangeMonth={onChangeMonth}\n        focusable={calendarHasFocus}\n      />\n      <div className={styles['calendar-header-month']} id={headerId} aria-live=\"polite\">\n        {renderMonthAndYear(locale, baseDate)}\n      </div>\n      <HeaderButton\n        ariaLabel={nextMonthLabel}\n        isPrevious={false}\n        onChangeMonth={onChangeMonth}\n        focusable={calendarHasFocus}\n      />\n    </div>\n  );\n};\n\nexport default CalendarHeader;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/date-picker/calendar/header/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,YAAY,MAAM,UAAU,CAAC;AAWpC,IAAM,cAAc,GAAG,UAAC,EAOF;QANpB,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,kBAAkB,wBAAA,EAClB,cAAc,oBAAA;IAEd,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;QACvC,oBAAC,YAAY,IAAC,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,GAAI;QAC/F,6BAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,EAAE,QAAQ,eAAY,QAAQ,IAC9E,kBAAkB,CAAC,MAAM,EAAE,QAAQ,CAAC,CACjC;QACN,oBAAC,YAAY,IAAC,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,GAAI,CACxF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from '../../styles.css.js';\nimport { renderMonthAndYear } from '../utils/intl';\nimport HeaderButton from './button';\n\ninterface CalendarHeaderProps {\n  headerId: string;\n  baseDate: Date;\n  locale: string;\n  onChangeMonth: (prev?: boolean) => void;\n  previousMonthLabel: string;\n  nextMonthLabel: string;\n}\n\nconst CalendarHeader = ({\n  headerId,\n  baseDate,\n  locale,\n  onChangeMonth,\n  previousMonthLabel,\n  nextMonthLabel,\n}: CalendarHeaderProps) => {\n  return (\n    <div className={styles['calendar-header']}>\n      <HeaderButton ariaLabel={previousMonthLabel} isPrevious={true} onChangeMonth={onChangeMonth} />\n      <div className={styles['calendar-header-month']} id={headerId} aria-live=\"polite\">\n        {renderMonthAndYear(locale, baseDate)}\n      </div>\n      <HeaderButton ariaLabel={nextMonthLabel} isPrevious={false} onChangeMonth={onChangeMonth} />\n    </div>\n  );\n};\n\nexport default CalendarHeader;\n"]}

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

@@ -1,8 +1,6 @@
-import React from 'react';
 import { BaseComponentProps } from '../../internal/base-component';
 import { DatePickerProps } from '../interfaces';
 import { CalendarTypes } from './definitions';
-import { DateChangeHandlerNullable } from './grid';
 export interface DateChangeHandler {
     (detail: CalendarTypes.DateDetail): void;
 }
@@ -15,16 +13,13 @@ interface CalendarProps extends BaseComponentProps {
     startOfWeek: DayIndex;
     selectedDate: Date | null;
     displayedDate: Date;
-    focusedDate?: Date | null;
     isDateEnabled: DatePickerProps.IsDateEnabledFunction;
-    calendarHasFocus: boolean;
     nextMonthLabel: string;
     previousMonthLabel: string;
     todayAriaLabel: string;
     onChangeMonth: MonthChangeHandler;
     onSelectDate: DateChangeHandler;
-    onFocusDate: DateChangeHandlerNullable;
 }
-declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<unknown>>;
+declare const Calendar: ({ locale, startOfWeek, displayedDate, todayAriaLabel, selectedDate, isDateEnabled, onChangeMonth, onSelectDate, previousMonthLabel, nextMonthLabel, }: CalendarProps) => JSX.Element;
 export default Calendar;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-picker/calendar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAa,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AAKzD,MAAM,WAAW,iBAAiB;IAChC,CAAC,MAAM,EAAE,aAAa,CAAC,UAAU,GAAG,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,kBAAkB;IACjC,CAAC,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAC;CACxB;AAED,oBAAY,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAMjD,UAAU,aAAc,SAAQ,kBAAkB;IAChD,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,QAAQ,CAAC;IACtB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,eAAe,CAAC,qBAAqB,CAAC;IACrD,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IAEvB,aAAa,EAAE,kBAAkB,CAAC;IAClC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,yBAAyB,CAAC;CACxC;AAED,QAAA,MAAM,QAAQ,+EAkIb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-picker/calendar/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAO9C,MAAM,WAAW,iBAAiB;IAChC,CAAC,MAAM,EAAE,aAAa,CAAC,UAAU,GAAG,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,kBAAkB;IACjC,CAAC,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAC;CACxB;AAED,oBAAY,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAMjD,UAAU,aAAc,SAAQ,kBAAkB;IAChD,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,QAAQ,CAAC;IACtB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,IAAI,CAAC;IACpB,aAAa,EAAE,eAAe,CAAC,qBAAqB,CAAC;IACrD,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IAEvB,aAAa,EAAE,kBAAkB,CAAC;IAClC,YAAY,EAAE,iBAAiB,CAAC;CACjC;AAED,QAAA,MAAM,QAAQ,0JAWX,aAAa,gBAgIf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/date-picker/calendar/index.js

@@ -9,15 +9,16 @@ import CalendarHeader from './header';
 import Grid from './grid';
 import moveFocusHandler from './utils/move-focus-handler';
 import { useUniqueId } from '../../internal/hooks/use-unique-id/index.js';
-import { useMergeRefs } from '../../internal/hooks/use-merge-refs/index.js';
-var Calendar = React.forwardRef(function (_a, ref) {
-    var locale = _a.locale, startOfWeek = _a.startOfWeek, displayedDate = _a.displayedDate, _b = _a.focusedDate, focusedDate = _b === void 0 ? null : _b, todayAriaLabel = _a.todayAriaLabel, calendarHasFocus = _a.calendarHasFocus, selectedDate = _a.selectedDate, isDateEnabled = _a.isDateEnabled, onChangeMonth = _a.onChangeMonth, onSelectDate = _a.onSelectDate, onFocusDate = _a.onFocusDate, previousMonthLabel = _a.previousMonthLabel, nextMonthLabel = _a.nextMonthLabel;
+import { formatDate, memoizedDate } from './utils/date.js';
+var Calendar = function (_a) {
+    var locale = _a.locale, startOfWeek = _a.startOfWeek, displayedDate = _a.displayedDate, todayAriaLabel = _a.todayAriaLabel, selectedDate = _a.selectedDate, isDateEnabled = _a.isDateEnabled, onChangeMonth = _a.onChangeMonth, onSelectDate = _a.onSelectDate, previousMonthLabel = _a.previousMonthLabel, nextMonthLabel = _a.nextMonthLabel;
     var focusVisible = useFocusVisible();
     var headerId = useUniqueId('calendar-dialog-title-');
     var elementRef = useRef(null);
-    var calendarRef = useMergeRefs(elementRef, ref);
     var gridWrapperRef = useRef(null);
-    var _c = useState(false), gridHasFocus = _c[0], setGridHasFocus = _c[1];
+    var _b = useState(false), gridHasFocus = _b[0], setGridHasFocus = _b[1];
+    var _c = useState(null), focusedDate = _c[0], setFocusedDate = _c[1];
+    var focusedDateMemoized = memoizedDate('focused', focusedDate);
     var selectFocusedDate = function (selected, baseDate) {
         if (selected && isDateEnabled(selected) && isSameMonth(selected, baseDate)) {
             return selected;
@@ -41,25 +42,40 @@ var Calendar = React.forwardRef(function (_a, ref) {
     var baseDate = getBaseDate(displayedDate);
     var focusCurrentDate = function () { var _a, _b; return (_b = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(styles['calendar-day-focusable']))) === null || _b === void 0 ? void 0 : _b.focus(); };
     var onHeaderChangeMonthHandler = function (isPrevious) {
-        return onChangeMonth(addMonths(baseDate, isPrevious ? -1 : 1));
+        onChangeMonth(addMonths(baseDate, isPrevious ? -1 : 1));
+        setFocusedDate(null);
+    };
+    var onGridChangeMonthHandler = function (newMonth) {
+        onChangeMonth(newMonth);
+        setFocusedDate(null);
+    };
+    var onGridFocusDateHandler = function (_a) {
+        var date = _a.date;
+        if (date) {
+            var value = formatDate(date);
+            setFocusedDate(value);
+        }
+    };
+    var onGridSelectDateHandler = function (detail) {
+        onSelectDate(detail);
+        setFocusedDate(null);
     };
     useEffect(function () {
         // focus current date if the focus is already inside the calendar grid
-        if (focusedDate instanceof Date && isSameMonth(focusedDate, baseDate) && gridHasFocus) {
+        if (focusedDateMemoized instanceof Date && isSameMonth(focusedDateMemoized, baseDate) && gridHasFocus) {
             focusCurrentDate();
         }
-    }, [baseDate, focusedDate, gridHasFocus]);
+    }, [baseDate, focusedDateMemoized, gridHasFocus]);
     useEffect(function () {
         var _a, _b;
-        var calendarShouldHaveFocus = calendarHasFocus;
-        var calendarActuallyHasFocus = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);
-        if (calendarShouldHaveFocus && !calendarActuallyHasFocus) {
+        var calendarHasFocus = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);
+        if (!calendarHasFocus) {
             (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
         // When the baseDate or isDateEnabled changes, there might not be a focusable date in the grid anymore
-    }, [calendarHasFocus, baseDate, isDateEnabled]);
-    if (calendarHasFocus && !focusedDate) {
-        focusedDate = selectFocusedDate(selectedDate, baseDate);
+    }, [baseDate, isDateEnabled]);
+    if (!focusedDate) {
+        focusedDateMemoized = selectFocusedDate(selectedDate, baseDate);
     }
     var onGridBlur = function (event) {
         var _a;
@@ -73,11 +89,11 @@ var Calendar = React.forwardRef(function (_a, ref) {
             setGridHasFocus(true);
         }
     };
-    return (React.createElement("div", __assign({}, focusVisible, { className: styles.calendar, tabIndex: 0, role: "application", "aria-describedby": headerId, ref: calendarRef }),
+    return (React.createElement("div", __assign({}, focusVisible, { className: styles.calendar, tabIndex: 0, role: "application", "aria-describedby": headerId, ref: elementRef }),
         React.createElement("div", { className: styles['calendar-inner'] },
-            React.createElement(CalendarHeader, { headerId: headerId, baseDate: baseDate, locale: locale, onChangeMonth: onHeaderChangeMonthHandler, previousMonthLabel: previousMonthLabel, nextMonthLabel: nextMonthLabel, calendarHasFocus: calendarHasFocus }),
+            React.createElement(CalendarHeader, { headerId: headerId, baseDate: baseDate, locale: locale, onChangeMonth: onHeaderChangeMonthHandler, previousMonthLabel: previousMonthLabel, nextMonthLabel: nextMonthLabel }),
             React.createElement("div", { onBlur: onGridBlur, onFocus: onGridFocus, ref: gridWrapperRef },
-                React.createElement(Grid, { locale: locale, baseDate: baseDate, isDateEnabled: isDateEnabled, focusedDate: focusedDate, onSelectDate: onSelectDate, onFocusDate: onFocusDate, onChangeMonth: onChangeMonth, startOfWeek: startOfWeek, todayAriaLabel: todayAriaLabel, selectedDate: selectedDate, handleFocusMove: moveFocusHandler })))));
-});
+                React.createElement(Grid, { locale: locale, baseDate: baseDate, isDateEnabled: isDateEnabled, focusedDate: focusedDateMemoized, onSelectDate: onGridSelectDateHandler, onFocusDate: onGridFocusDateHandler, onChangeMonth: onGridChangeMonthHandler, startOfWeek: startOfWeek, todayAriaLabel: todayAriaLabel, selectedDate: selectedDate, handleFocusMove: moveFocusHandler })))));
+};
 export default Calendar;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/date-picker/calendar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { addDays, addMonths, isSameMonth, startOfMonth } from 'date-fns';\nimport styles from '../styles.css.js';\nimport { FocusNextElement } from '../../internal/components/tab-trap';\nimport { BaseComponentProps } from '../../internal/base-component';\nimport useFocusVisible from '../../internal/hooks/focus-visible/index.js';\nimport { DatePickerProps } from '../interfaces';\nimport { CalendarTypes } from './definitions';\nimport CalendarHeader from './header';\nimport Grid, { DateChangeHandlerNullable } from './grid';\nimport moveFocusHandler from './utils/move-focus-handler';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id/index.js';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs/index.js';\n\nexport interface DateChangeHandler {\n  (detail: CalendarTypes.DateDetail): void;\n}\n\nexport interface MonthChangeHandler {\n  (newMonth: Date): void;\n}\n\nexport type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface HeaderChangeMonthHandler {\n  (isPreviousButtonClick?: boolean): void;\n}\n\ninterface CalendarProps extends BaseComponentProps {\n  locale: string;\n  startOfWeek: DayIndex;\n  selectedDate: Date | null;\n  displayedDate: Date;\n  focusedDate?: Date | null;\n  isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n  calendarHasFocus: boolean;\n  nextMonthLabel: string;\n  previousMonthLabel: string;\n  todayAriaLabel: string;\n\n  onChangeMonth: MonthChangeHandler;\n  onSelectDate: DateChangeHandler;\n  onFocusDate: DateChangeHandlerNullable;\n}\n\nconst Calendar = React.forwardRef(\n  (\n    {\n      locale,\n      startOfWeek,\n      displayedDate,\n      focusedDate = null,\n      todayAriaLabel,\n      calendarHasFocus,\n      selectedDate,\n      isDateEnabled,\n      onChangeMonth,\n      onSelectDate,\n      onFocusDate,\n      previousMonthLabel,\n      nextMonthLabel,\n    }: CalendarProps,\n    ref\n  ) => {\n    const focusVisible = useFocusVisible();\n    const headerId = useUniqueId('calendar-dialog-title-');\n    const elementRef = useRef<HTMLDivElement>(null);\n    const calendarRef = useMergeRefs(elementRef, ref);\n    const gridWrapperRef = useRef<HTMLDivElement>(null);\n    const [gridHasFocus, setGridHasFocus] = useState(false);\n\n    const selectFocusedDate = (selected: Date | null, baseDate: Date): Date | null => {\n      if (selected && isDateEnabled(selected) && isSameMonth(selected, baseDate)) {\n        return selected;\n      }\n      const today = new Date();\n      if (isDateEnabled(today) && isSameMonth(today, baseDate)) {\n        return today;\n      }\n      if (isDateEnabled(baseDate)) {\n        return baseDate;\n      }\n      return null;\n    };\n\n    const getBaseDate = (date: Date) => {\n      const startDate = startOfMonth(date);\n      if (isDateEnabled(startDate)) {\n        return startDate;\n      }\n      return moveFocusHandler(startDate, isDateEnabled, (date: Date) => addDays(date, 1));\n    };\n\n    const baseDate: Date = getBaseDate(displayedDate);\n\n    const focusCurrentDate: FocusNextElement = () =>\n      (elementRef.current?.querySelector(`.${styles['calendar-day-focusable']}`) as HTMLDivElement)?.focus();\n\n    const onHeaderChangeMonthHandler: HeaderChangeMonthHandler = isPrevious =>\n      onChangeMonth(addMonths(baseDate, isPrevious ? -1 : 1));\n\n    useEffect(() => {\n      // focus current date if the focus is already inside the calendar grid\n      if (focusedDate instanceof Date && isSameMonth(focusedDate, baseDate) && gridHasFocus) {\n        focusCurrentDate();\n      }\n    }, [baseDate, focusedDate, gridHasFocus]);\n\n    useEffect(() => {\n      const calendarShouldHaveFocus = calendarHasFocus;\n      const calendarActuallyHasFocus = elementRef.current?.contains(document.activeElement);\n\n      if (calendarShouldHaveFocus && !calendarActuallyHasFocus) {\n        elementRef.current?.focus();\n      }\n\n      // When the baseDate or isDateEnabled changes, there might not be a focusable date in the grid anymore\n    }, [calendarHasFocus, baseDate, isDateEnabled]);\n\n    if (calendarHasFocus && !focusedDate) {\n      focusedDate = selectFocusedDate(selectedDate, baseDate);\n    }\n\n    const onGridBlur = (event: React.FocusEvent) => {\n      const newFocusTargetIsInGrid =\n        event.relatedTarget && gridWrapperRef.current?.contains(event.relatedTarget as Node);\n      if (!newFocusTargetIsInGrid) {\n        setGridHasFocus(false);\n      }\n    };\n\n    const onGridFocus = () => {\n      if (!gridHasFocus) {\n        setGridHasFocus(true);\n      }\n    };\n\n    return (\n      <div\n        {...focusVisible}\n        className={styles.calendar}\n        tabIndex={0}\n        role=\"application\"\n        aria-describedby={headerId}\n        ref={calendarRef}\n      >\n        <div className={styles['calendar-inner']}>\n          <CalendarHeader\n            headerId={headerId}\n            baseDate={baseDate}\n            locale={locale}\n            onChangeMonth={onHeaderChangeMonthHandler}\n            previousMonthLabel={previousMonthLabel}\n            nextMonthLabel={nextMonthLabel}\n            calendarHasFocus={calendarHasFocus}\n          />\n          <div onBlur={onGridBlur} onFocus={onGridFocus} ref={gridWrapperRef}>\n            <Grid\n              locale={locale}\n              baseDate={baseDate}\n              isDateEnabled={isDateEnabled}\n              focusedDate={focusedDate}\n              onSelectDate={onSelectDate}\n              onFocusDate={onFocusDate}\n              onChangeMonth={onChangeMonth}\n              startOfWeek={startOfWeek}\n              todayAriaLabel={todayAriaLabel}\n              selectedDate={selectedDate}\n              handleFocusMove={moveFocusHandler}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default Calendar;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/date-picker/calendar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { addDays, addMonths, isSameMonth, startOfMonth } from 'date-fns';\nimport styles from '../styles.css.js';\nimport { FocusNextElement } from '../../internal/components/tab-trap';\nimport { BaseComponentProps } from '../../internal/base-component';\nimport useFocusVisible from '../../internal/hooks/focus-visible/index.js';\nimport { DatePickerProps } from '../interfaces';\nimport { CalendarTypes } from './definitions';\nimport CalendarHeader from './header';\nimport Grid, { DateChangeHandlerNullable } from './grid';\nimport moveFocusHandler from './utils/move-focus-handler';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id/index.js';\nimport { formatDate, memoizedDate } from './utils/date.js';\n\nexport interface DateChangeHandler {\n  (detail: CalendarTypes.DateDetail): void;\n}\n\nexport interface MonthChangeHandler {\n  (newMonth: Date): void;\n}\n\nexport type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface HeaderChangeMonthHandler {\n  (isPreviousButtonClick?: boolean): void;\n}\n\ninterface CalendarProps extends BaseComponentProps {\n  locale: string;\n  startOfWeek: DayIndex;\n  selectedDate: Date | null;\n  displayedDate: Date;\n  isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n  nextMonthLabel: string;\n  previousMonthLabel: string;\n  todayAriaLabel: string;\n\n  onChangeMonth: MonthChangeHandler;\n  onSelectDate: DateChangeHandler;\n}\n\nconst Calendar = ({\n  locale,\n  startOfWeek,\n  displayedDate,\n  todayAriaLabel,\n  selectedDate,\n  isDateEnabled,\n  onChangeMonth,\n  onSelectDate,\n  previousMonthLabel,\n  nextMonthLabel,\n}: CalendarProps) => {\n  const focusVisible = useFocusVisible();\n  const headerId = useUniqueId('calendar-dialog-title-');\n  const elementRef = useRef<HTMLDivElement>(null);\n  const gridWrapperRef = useRef<HTMLDivElement>(null);\n  const [gridHasFocus, setGridHasFocus] = useState(false);\n  const [focusedDate, setFocusedDate] = useState<string | null>(null);\n  let focusedDateMemoized: null | Date = memoizedDate('focused', focusedDate);\n\n  const selectFocusedDate = (selected: Date | null, baseDate: Date): Date | null => {\n    if (selected && isDateEnabled(selected) && isSameMonth(selected, baseDate)) {\n      return selected;\n    }\n    const today = new Date();\n    if (isDateEnabled(today) && isSameMonth(today, baseDate)) {\n      return today;\n    }\n    if (isDateEnabled(baseDate)) {\n      return baseDate;\n    }\n    return null;\n  };\n\n  const getBaseDate = (date: Date) => {\n    const startDate = startOfMonth(date);\n    if (isDateEnabled(startDate)) {\n      return startDate;\n    }\n    return moveFocusHandler(startDate, isDateEnabled, (date: Date) => addDays(date, 1));\n  };\n\n  const baseDate: Date = getBaseDate(displayedDate);\n\n  const focusCurrentDate: FocusNextElement = () =>\n    (elementRef.current?.querySelector(`.${styles['calendar-day-focusable']}`) as HTMLDivElement)?.focus();\n\n  const onHeaderChangeMonthHandler: HeaderChangeMonthHandler = isPrevious => {\n    onChangeMonth(addMonths(baseDate, isPrevious ? -1 : 1));\n    setFocusedDate(null);\n  };\n\n  const onGridChangeMonthHandler: MonthChangeHandler = newMonth => {\n    onChangeMonth(newMonth);\n    setFocusedDate(null);\n  };\n\n  const onGridFocusDateHandler: DateChangeHandlerNullable = ({ date }) => {\n    if (date) {\n      const value = formatDate(date);\n      setFocusedDate(value);\n    }\n  };\n\n  const onGridSelectDateHandler: DateChangeHandler = detail => {\n    onSelectDate(detail);\n    setFocusedDate(null);\n  };\n\n  useEffect(() => {\n    // focus current date if the focus is already inside the calendar grid\n    if (focusedDateMemoized instanceof Date && isSameMonth(focusedDateMemoized, baseDate) && gridHasFocus) {\n      focusCurrentDate();\n    }\n  }, [baseDate, focusedDateMemoized, gridHasFocus]);\n\n  useEffect(() => {\n    const calendarHasFocus = elementRef.current?.contains(document.activeElement);\n\n    if (!calendarHasFocus) {\n      elementRef.current?.focus();\n    }\n\n    // When the baseDate or isDateEnabled changes, there might not be a focusable date in the grid anymore\n  }, [baseDate, isDateEnabled]);\n\n  if (!focusedDate) {\n    focusedDateMemoized = selectFocusedDate(selectedDate, baseDate);\n  }\n\n  const onGridBlur = (event: React.FocusEvent) => {\n    const newFocusTargetIsInGrid = event.relatedTarget && gridWrapperRef.current?.contains(event.relatedTarget as Node);\n    if (!newFocusTargetIsInGrid) {\n      setGridHasFocus(false);\n    }\n  };\n\n  const onGridFocus = () => {\n    if (!gridHasFocus) {\n      setGridHasFocus(true);\n    }\n  };\n\n  return (\n    <div\n      {...focusVisible}\n      className={styles.calendar}\n      tabIndex={0}\n      role=\"application\"\n      aria-describedby={headerId}\n      ref={elementRef}\n    >\n      <div className={styles['calendar-inner']}>\n        <CalendarHeader\n          headerId={headerId}\n          baseDate={baseDate}\n          locale={locale}\n          onChangeMonth={onHeaderChangeMonthHandler}\n          previousMonthLabel={previousMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n        />\n        <div onBlur={onGridBlur} onFocus={onGridFocus} ref={gridWrapperRef}>\n          <Grid\n            locale={locale}\n            baseDate={baseDate}\n            isDateEnabled={isDateEnabled}\n            focusedDate={focusedDateMemoized}\n            onSelectDate={onGridSelectDateHandler}\n            onFocusDate={onGridFocusDateHandler}\n            onChangeMonth={onGridChangeMonthHandler}\n            startOfWeek={startOfWeek}\n            todayAriaLabel={todayAriaLabel}\n            selectedDate={selectedDate}\n            handleFocusMove={moveFocusHandler}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Calendar;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/date-picker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAwB/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,UAAU,6FAmOf,CAAC;AAGF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/date-picker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAwB/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,UAAU,6FA2Mf,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/date-picker/index.js

@@ -23,23 +23,20 @@ import { InternalButton } from '../button/internal';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
-import TabTrap from '../internal/components/tab-trap';
+import FocusLock from '../internal/components/focus-lock';
 var DatePicker = React.forwardRef(function (_a, ref) {
     var _b = _a.locale, locale = _b === void 0 ? '' : _b, startOfWeek = _a.startOfWeek, isDateEnabled = _a.isDateEnabled, nextMonthAriaLabel = _a.nextMonthAriaLabel, previousMonthAriaLabel = _a.previousMonthAriaLabel, todayAriaLabel = _a.todayAriaLabel, _c = _a.placeholder, placeholder = _c === void 0 ? '' : _c, _d = _a.value, value = _d === void 0 ? '' : _d, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, onBlur = _a.onBlur, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, onChange = _a.onChange, onFocus = _a.onFocus, name = _a.name, ariaLabel = _a.ariaLabel, ariaRequired = _a.ariaRequired, ariaLabelledby = _a.ariaLabelledby, ariaDescribedby = _a.ariaDescribedby, controlId = _a.controlId, invalid = _a.invalid, openCalendarAriaLabel = _a.openCalendarAriaLabel, expandToViewport = _a.expandToViewport, rest = __rest(_a, ["locale", "startOfWeek", "isDateEnabled", "nextMonthAriaLabel", "previousMonthAriaLabel", "todayAriaLabel", "placeholder", "value", "readOnly", "disabled", "onBlur", "autoFocus", "onChange", "onFocus", "name", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "controlId", "invalid", "openCalendarAriaLabel", "expandToViewport"]);
     var __internalRootRef = useBaseComponent('DatePicker').__internalRootRef;
     var baseProps = getBaseProps(rest);
     var _h = useState(false), isDropDownOpen = _h[0], setIsDropDownOpen = _h[1];
-    var _j = useState(false), calendarHasFocus = _j[0], setCalendarHasFocus = _j[1];
     var normalizedLocale = normalizeLocale('DatePicker', locale !== null && locale !== void 0 ? locale : '');
     var normalizedStartOfWeek = (typeof startOfWeek === 'number' ? startOfWeek : getWeekStartByLocale(normalizedLocale));
     var defaultSelectedDate = value.length >= 10 ? value : null;
-    var _k = useState(defaultSelectedDate), selectedDate = _k[0], setSelectedDate = _k[1];
+    var _j = useState(defaultSelectedDate), selectedDate = _j[0], setSelectedDate = _j[1];
     var defaultDisplayedDate = value.length >= 10 ? value : formatDate(new Date());
-    var _l = useState(defaultDisplayedDate), displayedDate = _l[0], setDisplayedDate = _l[1];
-    var _m = useState(null), focusedDate = _m[0], setFocusedDate = _m[1];
+    var _k = useState(defaultDisplayedDate), displayedDate = _k[0], setDisplayedDate = _k[1];
     var internalInputRef = useRef(null);
     var buttonRef = useRef(null);
-    var calendarRef = useRef(null);
     useForwardFocus(ref, internalInputRef);
     var rootRef = useRef(null);
     var dropdownId = useUniqueId('calender');
@@ -47,7 +44,6 @@ var DatePicker = React.forwardRef(function (_a, ref) {
     useFocusTracker({ rootRef: rootRef, onBlur: onBlur, onFocus: onFocus, viewportId: expandToViewport ? dropdownId : '' });
     var onChangeMonthHandler = function (newMonth) {
         setDisplayedDate(formatDate(newMonth));
-        setFocusedDate(null);
     };
     var onSelectDateHandler = function (_a) {
         var _b;
@@ -57,26 +53,15 @@ var DatePicker = React.forwardRef(function (_a, ref) {
         setIsDropDownOpen(false);
         setSelectedDate(formattedDate);
         setDisplayedDate(formattedDate);
-        setCalendarHasFocus(false);
-        setFocusedDate(null);
         fireNonCancelableEvent(onChange, { value: formattedDate });
     };
-    var onDateFocusHandler = function (_a) {
-        var date = _a.date;
-        if (date) {
-            var value_1 = formatDate(date);
-            setFocusedDate(value_1);
-        }
-    };
     var onDropdownCloseHandler = useCallback(function () {
         setDisplayedDate(defaultDisplayedDate);
-        setCalendarHasFocus(false);
         setIsDropDownOpen(false);
     }, [defaultDisplayedDate]);
     var onButtonClickHandler = function () {
         if (!isDropDownOpen) {
             setIsDropDownOpen(true);
-            setCalendarHasFocus(true);
         }
     };
     var onWrapperKeyDownHandler = function (event) {
@@ -91,7 +76,7 @@ var DatePicker = React.forwardRef(function (_a, ref) {
         fireNonCancelableEvent(onChange, { value: isoDateString });
     };
     var onInputBlurHandler = function () {
-        if (!calendarHasFocus) {
+        if (!isDropDownOpen) {
             setDisplayedDate(defaultDisplayedDate);
             setIsDropDownOpen(false);
         }
@@ -111,10 +96,9 @@ var DatePicker = React.forwardRef(function (_a, ref) {
             setSelectedDate(value);
         }
     }
-    var focusCurrentDate = function () { var _a, _b; return (_b = (_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(styles['calendar-day-focusable']))) === null || _b === void 0 ? void 0 : _b.focus(); };
     var DateInputElement = (React.createElement("div", { className: styles['date-picker-trigger'] },
         React.createElement("div", { className: styles['date-picker-input'] },
-            React.createElement(DateInput, { name: name, invalid: invalid, controlId: controlId, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaLabel: ariaLabel, ariaRequired: ariaRequired, value: isoToDisplay(value), autoComplete: false, disableBrowserAutocorrect: true, disableAutocompleteOnBlur: calendarHasFocus, disabled: disabled, readOnly: readOnly, onChange: onInputChangeHandler, onBlur: onInputBlurHandler, placeholder: placeholder, ref: internalInputRef, autoFocus: autoFocus })),
+            React.createElement(DateInput, { name: name, invalid: invalid, controlId: controlId, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaLabel: ariaLabel, ariaRequired: ariaRequired, value: isoToDisplay(value), autoComplete: false, disableBrowserAutocorrect: true, disableAutocompleteOnBlur: isDropDownOpen, disabled: disabled, readOnly: readOnly, onChange: onInputChangeHandler, onBlur: onInputBlurHandler, placeholder: placeholder, ref: internalInputRef, autoFocus: autoFocus })),
         React.createElement("div", null,
             React.createElement(InternalButton, { iconName: "calendar", className: styles['open-calendar-button'], onClick: onButtonClickHandler, ref: buttonRef, ariaLabel: openCalendarAriaLabel &&
                     openCalendarAriaLabel(value.length === 10 ? getDateLabel(normalizedLocale, memoizedDate('value', value)) : null), disabled: disabled || readOnly, formAction: "none" }))));
@@ -128,10 +112,8 @@ var DatePicker = React.forwardRef(function (_a, ref) {
         event.preventDefault();
     };
     return (React.createElement("div", __assign({}, baseProps, { ref: mergedRef, onKeyDown: onWrapperKeyDownHandler }),
-        React.createElement(Dropdown, { stretchWidth: true, stretchHeight: true, open: isDropDownOpen, onDropdownClose: onDropdownCloseHandler, onMouseDown: handleMouseDown, trigger: DateInputElement, expandToViewport: expandToViewport, scrollable: false, dropdownId: dropdownId }, isDropDownOpen && (React.createElement(React.Fragment, null,
-            calendarHasFocus && React.createElement(TabTrap, { focusNextCallback: focusCurrentDate }),
-            React.createElement(Calendar, { ref: calendarRef, selectedDate: memoizedDate('value', selectedDate), focusedDate: memoizedDate('focused', focusedDate), displayedDate: memoizedDate('displayed', displayedDate), locale: normalizedLocale, startOfWeek: normalizedStartOfWeek, isDateEnabled: isDateEnabled ? isDateEnabled : function () { return true; }, calendarHasFocus: calendarHasFocus, nextMonthLabel: nextMonthAriaLabel, previousMonthLabel: previousMonthAriaLabel, todayAriaLabel: todayAriaLabel, onChangeMonth: onChangeMonthHandler, onSelectDate: onSelectDateHandler, onFocusDate: onDateFocusHandler }),
-            calendarHasFocus && React.createElement(TabTrap, { focusNextCallback: function () { var _a; return (_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }))))));
+        React.createElement(Dropdown, { stretchWidth: true, stretchHeight: true, open: isDropDownOpen, onDropdownClose: onDropdownCloseHandler, onMouseDown: handleMouseDown, trigger: DateInputElement, expandToViewport: expandToViewport, scrollable: false, dropdownId: dropdownId }, isDropDownOpen && (React.createElement(FocusLock, null,
+            React.createElement(Calendar, { selectedDate: memoizedDate('value', selectedDate), displayedDate: memoizedDate('displayed', displayedDate), locale: normalizedLocale, startOfWeek: normalizedStartOfWeek, isDateEnabled: isDateEnabled ? isDateEnabled : function () { return true; }, nextMonthLabel: nextMonthAriaLabel, previousMonthLabel: previousMonthAriaLabel, todayAriaLabel: todayAriaLabel, onChangeMonth: onChangeMonthHandler, onSelectDate: onSelectDateHandler }))))));
 });
 applyDisplayName(DatePicker, 'DatePicker');
 export default DatePicker;