@cloudscape-design/components 3.0.1 → 3.0.4

package/container/styles.css.js

@@ -1,19 +1,20 @@
 
     import './styles.scoped.css';
     export 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"
+  "root": "awsui_root_14iqq_1cpw0_97",
+  "variant-default": "awsui_variant-default_14iqq_1cpw0_109",
+  "variant-stacked": "awsui_variant-stacked_14iqq_1cpw0_109",
+  "header": "awsui_header_14iqq_1cpw0_132",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1cpw0_136",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1cpw0_140",
+  "header-stuck": "awsui_header-stuck_14iqq_1cpw0_146",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1cpw0_151",
+  "with-paddings": "awsui_with-paddings_14iqq_1cpw0_157",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_1cpw0_160",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1cpw0_184",
+  "dark-header": "awsui_dark-header_14iqq_1cpw0_192",
+  "content": "awsui_content_14iqq_1cpw0_196",
+  "footer": "awsui_footer_14iqq_1cpw0_203",
+  "with-divider": "awsui_with-divider_14iqq_1cpw0_206"
 };
   

package/container/styles.scoped.css

@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_14iqq_1tfbz_97:not(#\9) {
+.awsui_root_14iqq_1cpw0_97:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -137,7 +137,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   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) {
+.awsui_root_14iqq_1cpw0_97.awsui_variant-default_14iqq_1cpw0_109:not(#\9), .awsui_root_14iqq_1cpw0_97.awsui_variant-stacked_14iqq_1cpw0_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;
@@ -149,16 +149,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   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) {
+  .awsui_root_14iqq_1cpw0_97.awsui_variant-default_14iqq_1cpw0_109:not(#\9), .awsui_root_14iqq_1cpw0_97.awsui_variant-stacked_14iqq_1cpw0_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) {
+.awsui_root_14iqq_1cpw0_97.awsui_variant-stacked_14iqq_1cpw0_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) {
+.awsui_root_14iqq_1cpw0_97.awsui_variant-stacked_14iqq_1cpw0_109 + .awsui_root_14iqq_1cpw0_97.awsui_variant-stacked_14iqq_1cpw0_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;
@@ -167,41 +167,41 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   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) {
+.awsui_header_14iqq_1cpw0_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) {
+.awsui_header-sticky-disabled_14iqq_1cpw0_136:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_header-sticky-enabled_14iqq_1tfbz_140:not(#\9) {
+.awsui_header-sticky-enabled_14iqq_1cpw0_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));
+.awsui_header-stuck_14iqq_1cpw0_146:not(#\9) {
+  box-shadow: 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.1);
+  box-shadow: var(--shadow-sticky-embedded-qit8ba, 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px 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) {
+.awsui_header-dynamic-height_14iqq_1cpw0_151.awsui_header-stuck_14iqq_1cpw0_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) {
+.awsui_header_14iqq_1cpw0_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) {
+.awsui_header_14iqq_1cpw0_132.awsui_with-paddings_14iqq_1cpw0_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) {
+.awsui_header-variant-cards_14iqq_1cpw0_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;
@@ -211,48 +211,52 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-sizing: border-box;
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_header-variant-cards_14iqq_1tfbz_160:not(#\9) {
+  .awsui_header-variant-cards_14iqq_1cpw0_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) {
+.awsui_header-variant-cards_14iqq_1cpw0_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) {
+  .awsui_header-variant-cards_14iqq_1cpw0_160:not(#\9):not(:empty) {
     border-bottom: 0;
   }
 }
-.awsui_header-variant-cards_14iqq_1tfbz_160.awsui_header-stuck_14iqq_1tfbz_146:not(#\9) {
+.awsui_header-variant-cards_14iqq_1cpw0_160.awsui_header-stuck_14iqq_1cpw0_146:not(#\9) {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
+.awsui_header-variant-full-page_14iqq_1cpw0_184.awsui_header-stuck_14iqq_1cpw0_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));
+}
 
 /*
 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) {
+.awsui_dark-header_14iqq_1cpw0_192: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) {
+.awsui_content_14iqq_1cpw0_196.awsui_with-paddings_14iqq_1cpw0_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) {
+.awsui_header_14iqq_1cpw0_132 + .awsui_content_14iqq_1cpw0_196.awsui_with-paddings_14iqq_1cpw0_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) {
+.awsui_footer_14iqq_1cpw0_203.awsui_with-paddings_14iqq_1cpw0_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) {
+.awsui_footer_14iqq_1cpw0_203.awsui_with-divider_14iqq_1cpw0_206: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

@@ -2,19 +2,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"
+  "root": "awsui_root_14iqq_1cpw0_97",
+  "variant-default": "awsui_variant-default_14iqq_1cpw0_109",
+  "variant-stacked": "awsui_variant-stacked_14iqq_1cpw0_109",
+  "header": "awsui_header_14iqq_1cpw0_132",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1cpw0_136",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1cpw0_140",
+  "header-stuck": "awsui_header-stuck_14iqq_1cpw0_146",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1cpw0_151",
+  "with-paddings": "awsui_with-paddings_14iqq_1cpw0_157",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_1cpw0_160",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1cpw0_184",
+  "dark-header": "awsui_dark-header_14iqq_1cpw0_192",
+  "content": "awsui_content_14iqq_1cpw0_196",
+  "footer": "awsui_footer_14iqq_1cpw0_203",
+  "with-divider": "awsui_with-divider_14iqq_1cpw0_206"
 };
   

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

@@ -1 +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"}
+{"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;;;;;;;;;;CAuFrC,CAAC;AAEF,wBAAgB,uBAAuB,YAGtC"}

package/container/use-sticky-header.js

@@ -3,7 +3,7 @@
 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 { findUpUntil, 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';
@@ -20,19 +20,26 @@ export var useStickyHeader = function (rootRef, headerRef, __stickyHeader, __sti
             : 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]);
+    // 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 stickyOffsetTop = useAppLayoutContext().stickyOffsetTop;
-    var effectiveStickyOffset = __stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : (usesBodyScroll ? stickyOffsetTop : 0);
     var isSticky = useSupportsStickyHeader() && !!__stickyHeader;
     var isRefresh = useVisualRefresh(rootRef);
+    // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.
+    var _a = useState(false), hasInnerOverflowParents = _a[0], setHasInnerOverflowParents = _a[1];
+    var _b = useState(false), isStuck = _b[0], setIsStuck = _b[1];
+    useLayoutEffect(function () {
+        if (rootRef.current) {
+            var overflowParents = getOverflowParents(rootRef.current);
+            var mainElement = findUpUntil(rootRef.current, function (elem) { return elem.tagName === 'MAIN'; });
+            // In both versions of the app layout, the scrolling element for disableBodyScroll
+            // is the <main>. If the closest overflow parent is also the closest <main> and we have
+            // offset values, it's safe to assume that it's the app layout scroll root and we
+            // should stop there.
+            setHasInnerOverflowParents(overflowParents.length > 0 && overflowParents[0] !== mainElement);
+        }
+    }, [rootRef]);
+    var effectiveStickyOffset = __stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : (hasInnerOverflowParents ? 0 : stickyOffsetTop);
     /**
      * 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
@@ -41,7 +48,7 @@ export var useStickyHeader = function (rootRef, headerRef, __stickyHeader, __sti
      * to the default offset calculated in AppLayoutDomContext.
      */
     var computedOffset = "".concat(effectiveStickyOffset - totalBorder, "px");
-    if (usesBodyScroll && isRefresh) {
+    if (isRefresh && !hasInnerOverflowParents) {
         computedOffset = "var(".concat(customCssProps.offsetTopWithNotifications, ", ").concat(computedOffset, ")");
     }
     var stickyStyles = isSticky

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

@@ -1 +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"]}
+{"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 { findUpUntil, 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  // We reach into AppLayoutContext in case sticky header needs to be offset down by the height\n  // of other sticky elements positioned on top of the view.\n  const { stickyOffsetTop } = useAppLayoutContext();\n  const isSticky = useSupportsStickyHeader() && !!__stickyHeader;\n  const isRefresh = useVisualRefresh(rootRef);\n\n  // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.\n  const [hasInnerOverflowParents, setHasInnerOverflowParents] = useState(false);\n  const [isStuck, setIsStuck] = useState(false);\n  useLayoutEffect(() => {\n    if (rootRef.current) {\n      const overflowParents = getOverflowParents(rootRef.current);\n      const mainElement = findUpUntil(rootRef.current, elem => elem.tagName === 'MAIN');\n      // In both versions of the app layout, the scrolling element for disableBodyScroll\n      // is the <main>. If the closest overflow parent is also the closest <main> and we have\n      // offset values, it's safe to assume that it's the app layout scroll root and we\n      // should stop there.\n      setHasInnerOverflowParents(overflowParents.length > 0 && overflowParents[0] !== mainElement);\n    }\n  }, [rootRef]);\n\n  const effectiveStickyOffset = __stickyOffset ?? (hasInnerOverflowParents ? 0 : stickyOffsetTop);\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 (isRefresh && !hasInnerOverflowParents) {\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/flashbar/interfaces.d.ts

@@ -35,12 +35,12 @@ export interface FlashbarProps extends BaseComponentProps {
      * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.
      * When a user clicks on this button the `onButtonClick` handler is called. If the `action` property is set, this property is ignored.
      * **Deprecated**, replaced by `action`.
-     * *`id` (string) - Specifies a unique flash message identifier. This property  is used in two ways:
-     * 1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.
-     * 2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.
-     * @visualrefresh `id` property
      * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button
      *   using the `action` property. **Deprecated**, replaced by `action`.
+     * * `id` (string) - Specifies a unique flash message identifier. This property  is used in two ways:
+     *   1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.
+     *   2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.
+     * @visualrefresh `id` property
      */
     items: ReadonlyArray<FlashbarProps.MessageDefinition>;
 }

package/flashbar/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/flashbar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { ButtonProps } from '../button/interfaces';\n\nexport namespace FlashbarProps {\n  export interface MessageDefinition {\n    header?: React.ReactNode;\n    content?: React.ReactNode;\n    dismissible?: boolean;\n    dismissLabel?: string;\n    loading?: boolean;\n    type?: FlashbarProps.Type;\n    action?: React.ReactNode;\n    id?: string;\n    buttonText?: ButtonProps['children'];\n    onButtonClick?: ButtonProps['onClick'];\n    onDismiss?: ButtonProps['onClick'];\n  }\n\n  export type Type = 'success' | 'warning' | 'info' | 'error';\n}\n\nexport interface FlashbarProps extends BaseComponentProps {\n  /**\n   * Specifies flash messages that appear in the same order that they are listed.\n   * The value is an array of flash message definition objects.\n   *\n   * A flash message object contains the following properties:\n   * * `header` (ReactNode) - Specifies the heading text.\n   * * `content` (ReactNode) - Specifies the primary text displayed in the flash element.\n   * * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info`. The default is `info`.\n   * * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.\n   * * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.\n   * When a user clicks on this button the `onDismiss` handler is called.\n   * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.\n   * * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,\n   * our UX guidelines only allow you to add a button.\n   * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.\n   * When a user clicks on this button the `onButtonClick` handler is called. If the `action` property is set, this property is ignored.\n   * **Deprecated**, replaced by `action`.\n   * *`id` (string) - Specifies a unique flash message identifier. This property  is used in two ways:\n   * 1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.\n   * 2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.\n   * @visualrefresh `id` property\n   * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button\n   *   using the `action` property. **Deprecated**, replaced by `action`.\n   */\n  items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/flashbar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { ButtonProps } from '../button/interfaces';\n\nexport namespace FlashbarProps {\n  export interface MessageDefinition {\n    header?: React.ReactNode;\n    content?: React.ReactNode;\n    dismissible?: boolean;\n    dismissLabel?: string;\n    loading?: boolean;\n    type?: FlashbarProps.Type;\n    action?: React.ReactNode;\n    id?: string;\n    buttonText?: ButtonProps['children'];\n    onButtonClick?: ButtonProps['onClick'];\n    onDismiss?: ButtonProps['onClick'];\n  }\n\n  export type Type = 'success' | 'warning' | 'info' | 'error';\n}\n\nexport interface FlashbarProps extends BaseComponentProps {\n  /**\n   * Specifies flash messages that appear in the same order that they are listed.\n   * The value is an array of flash message definition objects.\n   *\n   * A flash message object contains the following properties:\n   * * `header` (ReactNode) - Specifies the heading text.\n   * * `content` (ReactNode) - Specifies the primary text displayed in the flash element.\n   * * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info`. The default is `info`.\n   * * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.\n   * * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.\n   * When a user clicks on this button the `onDismiss` handler is called.\n   * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.\n   * * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,\n   * our UX guidelines only allow you to add a button.\n   * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.\n   * When a user clicks on this button the `onButtonClick` handler is called. If the `action` property is set, this property is ignored.\n   * **Deprecated**, replaced by `action`.\n   * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button\n   *   using the `action` property. **Deprecated**, replaced by `action`.\n   * * `id` (string) - Specifies a unique flash message identifier. This property  is used in two ways:\n   *   1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.\n   *   2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.\n   * @visualrefresh `id` property\n   */\n  items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n}\n"]}

package/form-field/internal.js

@@ -4,7 +4,7 @@ import { __assign, __rest } from "tslib";
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { getBaseProps } from '../internal/base-component';
-import { FormFieldDomContext, useFormFieldContext } from '../internal/context/form-field-context';
+import { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import InternalGrid from '../grid/internal';
@@ -46,8 +46,8 @@ export default function InternalFormField(_a) {
         description && (React.createElement("div", { className: styles.description, id: slotIds.description }, description)),
         React.createElement("div", { className: clsx(styles.controls, __hideLabel && styles['label-hidden']) },
             React.createElement(InternalGrid, { gridDefinition: gridDefinition },
-                React.createElement(FormFieldDomContext.RootProvider, { value: __assign({ controlId: generatedControlId }, contextValuesWithoutControlId) }, children && React.createElement("div", { className: styles.control }, children)),
-                secondaryControl && (React.createElement(FormFieldDomContext.RootProvider, { value: contextValuesWithoutControlId },
+                React.createElement(FormFieldContext.Provider, { value: __assign({ controlId: generatedControlId }, contextValuesWithoutControlId) }, children && React.createElement("div", { className: styles.control }, children)),
+                secondaryControl && (React.createElement(FormFieldContext.Provider, { value: contextValuesWithoutControlId },
                     React.createElement("div", { className: styles['secondary-control'] }, secondaryControl))))),
         (constraintText || errorText) && (React.createElement("div", { className: styles.hints },
             errorText && React.createElement(FormFieldError, { id: slotIds.error }, errorText),

package/form-field/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAE3E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAOxD,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,EAAqC;QAAnC,EAAE,QAAA,EAAE,QAAQ,cAAA;IAA4B,OAAA,CACvE,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK;QAC1B,6BAAK,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;YAChD,6BAAK,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;gBAChD,oBAAC,YAAY,IAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,GAAG,CAC/C,CACF;QACN,8BAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,IAC3C,QAAQ,CACJ,CACH,CACP;AAXwE,CAWxE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAajB;IAZvB,IAAA,SAAS,eAAA,EACT,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,gBAAgB,sBAAA,EAChB,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACrB,IAAI,cAZiC,2JAazC,CADQ;IAEP,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,IAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACtC,IAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAExC,IAAM,gBAAgB,GAAG,WAAW,CAAC,WAAW,CAAC,CAAC;IAClD,IAAM,kBAAkB,GAAG,SAAS,IAAI,gBAAgB,CAAC;IACzD,IAAM,WAAW,GAAG,SAAS,IAAI,kBAAkB,CAAC;IAEpD,IAAM,OAAO,GAAG,UAAU,CAAC,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,CAAC,CAAC;IAEvF,IAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAEpD,IAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAE3E,IAAA,KAIF,mBAAmB,CAAC,EAAE,CAAC,EAHT,oBAAoB,oBAAA,EACnB,qBAAqB,qBAAA,EAC7B,aAAa,aACG,CAAC;IAE5B,IAAM,6BAA6B,GAAG;QACpC,cAAc,EAAE,WAAW,CAAC,oBAAoB,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,SAAS;QAC7E,eAAe,EAAE,WAAW,CAAC,qBAAqB,EAAE,eAAe,CAAC,IAAI,SAAS;QACjF,OAAO,EAAE,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,aAAa;KACxC,CAAC;IAEF,IAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,iBAAiB,CAAC,CAAC;IAEvD,OAAO,CACL,wCAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,SAAS;QACnF,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC;YAC3D,KAAK,IAAI,CACR,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,kBAAkB,IAC3E,KAAK,CACA,CACT;YACA,CAAC,WAAW,IAAI,IAAI,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,IAAI,CAAQ,CAChE;QAEL,WAAW,IAAI,CACd,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,EAAE,EAAE,OAAO,CAAC,WAAW,IACxD,WAAW,CACR,CACP;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,WAAW,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC;YAC1E,oBAAC,YAAY,IAAC,cAAc,EAAE,cAAc;gBAC1C,oBAAC,mBAAmB,CAAC,YAAY,IAC/B,KAAK,aACH,SAAS,EAAE,kBAAkB,IAC1B,6BAA6B,KAGjC,QAAQ,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CAC5B;gBAElC,gBAAgB,IAAI,CACnB,oBAAC,mBAAmB,CAAC,YAAY,IAAC,KAAK,EAAE,6BAA6B;oBACpE,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,gBAAgB,CAAO,CACpC,CACpC,CACY,CACX;QAEL,CAAC,cAAc,IAAI,SAAS,CAAC,IAAI,CAChC,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK;YACzB,SAAS,IAAI,oBAAC,cAAc,IAAC,EAAE,EAAE,OAAO,CAAC,KAAK,IAAG,SAAS,CAAkB;YAC5E,cAAc,IAAI,CACjB,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,IAAI,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAC/E,EAAE,EAAE,OAAO,CAAC,UAAU,IAErB,cAAc,CACX,CACP,CACG,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 React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldDomContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { joinStrings } from '../internal/utils/strings';\n\ninterface FormFieldErrorProps {\n  id?: string;\n  children?: React.ReactNode;\n}\n\nexport const FormFieldError = ({ id, children }: FormFieldErrorProps) => (\n  <div className={styles.error}>\n    <div className={styles['error-icon-shake-wrapper']}>\n      <div className={styles['error-icon-scale-wrapper']}>\n        <InternalIcon name=\"status-warning\" size=\"small\" />\n      </div>\n    </div>\n    <span id={id} className={styles.error__message}>\n      {children}\n    </span>\n  </div>\n);\n\nexport default function InternalFormField({\n  controlId,\n  stretch = false,\n  label,\n  info,\n  children,\n  secondaryControl,\n  description,\n  constraintText,\n  errorText,\n  __hideLabel,\n  __internalRootRef = null,\n  ...rest\n}: InternalFormFieldProps) {\n  const baseProps = getBaseProps(rest);\n  const ref = useRef<HTMLElement>(null);\n  const isRefresh = useVisualRefresh(ref);\n\n  const instanceUniqueId = useUniqueId('formField');\n  const generatedControlId = controlId || instanceUniqueId;\n  const formFieldId = controlId || generatedControlId;\n\n  const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n  const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n  const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n  const {\n    ariaLabelledby: parentAriaLabelledby,\n    ariaDescribedby: parentAriaDescribedby,\n    invalid: parentInvalid,\n  } = useFormFieldContext({});\n\n  const contextValuesWithoutControlId = {\n    ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n    ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n    invalid: !!errorText || !!parentInvalid,\n  };\n\n  const mergedRef = useMergeRefs(ref, __internalRootRef);\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n      <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n        {label && (\n          <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n            {label}\n          </label>\n        )}\n        {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n      </div>\n\n      {description && (\n        <div className={styles.description} id={slotIds.description}>\n          {description}\n        </div>\n      )}\n\n      <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n        <InternalGrid gridDefinition={gridDefinition}>\n          <FormFieldDomContext.RootProvider\n            value={{\n              controlId: generatedControlId,\n              ...contextValuesWithoutControlId,\n            }}\n          >\n            {children && <div className={styles.control}>{children}</div>}\n          </FormFieldDomContext.RootProvider>\n\n          {secondaryControl && (\n            <FormFieldDomContext.RootProvider value={contextValuesWithoutControlId}>\n              <div className={styles['secondary-control']}>{secondaryControl}</div>\n            </FormFieldDomContext.RootProvider>\n          )}\n        </InternalGrid>\n      </div>\n\n      {(constraintText || errorText) && (\n        <div className={styles.hints}>\n          {errorText && <FormFieldError id={slotIds.error}>{errorText}</FormFieldError>}\n          {constraintText && (\n            <div\n              className={clsx(styles.constraint, errorText && styles['constraint-has-error'])}\n              id={slotIds.constraint}\n            >\n              {constraintText}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/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 React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { joinStrings } from '../internal/utils/strings';\n\ninterface FormFieldErrorProps {\n  id?: string;\n  children?: React.ReactNode;\n}\n\nexport const FormFieldError = ({ id, children }: FormFieldErrorProps) => (\n  <div className={styles.error}>\n    <div className={styles['error-icon-shake-wrapper']}>\n      <div className={styles['error-icon-scale-wrapper']}>\n        <InternalIcon name=\"status-warning\" size=\"small\" />\n      </div>\n    </div>\n    <span id={id} className={styles.error__message}>\n      {children}\n    </span>\n  </div>\n);\n\nexport default function InternalFormField({\n  controlId,\n  stretch = false,\n  label,\n  info,\n  children,\n  secondaryControl,\n  description,\n  constraintText,\n  errorText,\n  __hideLabel,\n  __internalRootRef = null,\n  ...rest\n}: InternalFormFieldProps) {\n  const baseProps = getBaseProps(rest);\n  const ref = useRef<HTMLElement>(null);\n  const isRefresh = useVisualRefresh(ref);\n\n  const instanceUniqueId = useUniqueId('formField');\n  const generatedControlId = controlId || instanceUniqueId;\n  const formFieldId = controlId || generatedControlId;\n\n  const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n  const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n  const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n  const {\n    ariaLabelledby: parentAriaLabelledby,\n    ariaDescribedby: parentAriaDescribedby,\n    invalid: parentInvalid,\n  } = useFormFieldContext({});\n\n  const contextValuesWithoutControlId = {\n    ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n    ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n    invalid: !!errorText || !!parentInvalid,\n  };\n\n  const mergedRef = useMergeRefs(ref, __internalRootRef);\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n      <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n        {label && (\n          <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n            {label}\n          </label>\n        )}\n        {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n      </div>\n\n      {description && (\n        <div className={styles.description} id={slotIds.description}>\n          {description}\n        </div>\n      )}\n\n      <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n        <InternalGrid gridDefinition={gridDefinition}>\n          <FormFieldContext.Provider\n            value={{\n              controlId: generatedControlId,\n              ...contextValuesWithoutControlId,\n            }}\n          >\n            {children && <div className={styles.control}>{children}</div>}\n          </FormFieldContext.Provider>\n\n          {secondaryControl && (\n            <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n              <div className={styles['secondary-control']}>{secondaryControl}</div>\n            </FormFieldContext.Provider>\n          )}\n        </InternalGrid>\n      </div>\n\n      {(constraintText || errorText) && (\n        <div className={styles.hints}>\n          {errorText && <FormFieldError id={slotIds.error}>{errorText}</FormFieldError>}\n          {constraintText && (\n            <div\n              className={clsx(styles.constraint, errorText && styles['constraint-has-error'])}\n              id={slotIds.constraint}\n            >\n              {constraintText}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/internal/base-component/styles.scoped.css

@@ -567,6 +567,7 @@
   --shadow-split-bottom-otfetg:0px -36px 36px -36px rgba(0, 7, 22, 0.10);
   --shadow-split-side-qv353u:-1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.10);
   --shadow-sticky-aijlo6:0px 4px 20px 1px rgba(0, 7, 22, 0.10);
+  --shadow-sticky-embedded-qit8ba:0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.10);
 }
 
 .awsui-dark-mode:not(#\9) {
@@ -902,6 +903,7 @@
   --shadow-split-bottom-otfetg:0px -36px 36px -36px rgba(0, 7, 22, 1);
   --shadow-split-side-qv353u:-1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1);
   --shadow-sticky-aijlo6:0px 4px 20px 1px rgba(0, 7, 22, 1);
+  --shadow-sticky-embedded-qit8ba:0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1);
 }
 
 .awsui-compact-mode:not(#\9) {
@@ -1304,6 +1306,7 @@
   --shadow-split-bottom-otfetg:0px -36px 36px -36px rgba(0, 7, 22, 1);
   --shadow-split-side-qv353u:-1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1);
   --shadow-sticky-aijlo6:0px 4px 20px 1px rgba(0, 7, 22, 1);
+  --shadow-sticky-embedded-qit8ba:0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1);
 }
 
 .awsui-context-flashbar:not(#\9) {

package/internal/components/dropdown/dropdown-fit-handler.js

@@ -107,7 +107,7 @@ export var getDropdownPosition = function (trigger, dropdown, overflowParents, m
     var dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;
     var availableHeight = dropUp ? availableSpace.above : availableSpace.below;
     // Try and crop the bottom item when all options can't be displayed, affordance for "there's more"
-    var croppedHeight = Math.floor(availableHeight / 31) * 31 + 16;
+    var croppedHeight = stretchHeight ? availableHeight : Math.floor(availableHeight / 31) * 31 + 16;
     return {
         dropUp: dropUp,
         dropLeft: dropLeft,

package/internal/components/dropdown/dropdown-fit-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-fit-handler.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/dropdown-fit-handler.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 { Dimensions, getOverflowParents, getOverflowParentDimensions } from '../../utils/scrollable-containers';\nimport styles from './styles.css.js';\n\nconst AVAILABLE_SPACE_RESERVE_DEFAULT = 50;\nconst AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL = 19; // 50 - 31\nconst AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL = 20;\n\ninterface AvailableSpace {\n  above: number;\n  below: number;\n  left: number;\n  right: number;\n}\nexport interface DropdownPosition {\n  height: string;\n  width: string;\n  dropUp: boolean;\n  dropLeft: boolean;\n  left: string;\n}\nexport interface InteriorDropdownPosition extends DropdownPosition {\n  bottom: string;\n  top: string;\n}\n\nconst getClosestParentDimensions = (element: HTMLElement): any => {\n  const parents = getOverflowParents(element).map(el => {\n    const { height, width, top, left } = el.getBoundingClientRect();\n    return {\n      height,\n      width,\n      top,\n      left,\n    };\n  });\n\n  return parents.shift();\n};\n\nexport const getAvailableSpace = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  stretchWidth = false,\n  stretchHeight = false,\n  isMobile?: boolean\n): AvailableSpace => {\n  const availableSpaceReserveVertical = stretchHeight\n    ? 0\n    : isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const availableSpaceReserveHorizontal = stretchWidth\n    ? 0\n    : isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const { bottom: triggerBottom, left: triggerLeft, right: triggerRight } = trigger.getBoundingClientRect();\n\n  return overflowParents.reduce(\n    ({ above, below, left, right }, overflowParent) => {\n      const offsetTop = triggerBottom - overflowParent.top;\n      const currentAbove = offsetTop - trigger.offsetHeight - availableSpaceReserveVertical;\n      const currentBelow = overflowParent.height - offsetTop - availableSpaceReserveVertical;\n      const currentLeft = triggerRight - overflowParent.left - availableSpaceReserveHorizontal;\n      const currentRight = overflowParent.left + overflowParent.width - triggerLeft - availableSpaceReserveHorizontal;\n\n      return {\n        above: Math.min(above, currentAbove),\n        below: Math.min(below, currentBelow),\n        left: Math.min(left, currentLeft),\n        right: Math.min(right, currentRight),\n      };\n    },\n    { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE }\n  );\n};\n\nexport const getInteriorAvailableSpace = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  isMobile?: boolean\n): AvailableSpace => {\n  const AVAILABLE_SPACE_RESERVE_VERTICAL = isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const AVAILABLE_SPACE_RESERVE_HORIZONTAL = isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const {\n    bottom: triggerBottom,\n    top: triggerTop,\n    left: triggerLeft,\n    right: triggerRight,\n  } = trigger.getBoundingClientRect();\n\n  return overflowParents.reduce(\n    ({ above, below, left, right }, overflowParent) => {\n      const currentAbove = triggerBottom - overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;\n      const currentBelow = overflowParent.height - triggerTop + overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;\n      const currentLeft = triggerLeft - overflowParent.left - AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n      const currentRight =\n        overflowParent.left + overflowParent.width - triggerRight - AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n\n      return {\n        above: Math.min(above, currentAbove),\n        below: Math.min(below, currentBelow),\n        left: Math.min(left, currentLeft),\n        right: Math.min(right, currentRight),\n      };\n    },\n    { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE }\n  );\n};\n\nexport const getDropdownPosition = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  minWidth?: number,\n  preferCenter = false,\n  stretchWidth = false,\n  stretchHeight = false,\n  isMobile?: boolean\n): DropdownPosition => {\n  const availableSpace = getAvailableSpace(trigger, dropdown, overflowParents, stretchWidth, stretchHeight, isMobile);\n  const triggerWidth = trigger.getBoundingClientRect().width;\n  minWidth = minWidth ? Math.min(triggerWidth, minWidth) : triggerWidth;\n  const requiredWidth = dropdown.getBoundingClientRect().width;\n  // dropdown should not be smaller than the trigger\n  const idealWidth = Math.max(requiredWidth, minWidth);\n\n  let dropLeft: boolean;\n  let left: number | null = null;\n  let width = idealWidth;\n\n  //1. Can it be positioned with ideal width to the right?\n  if (idealWidth <= availableSpace.right) {\n    dropLeft = false;\n    //2. Can it be positioned with ideal width to the left?\n  } else if (idealWidth <= availableSpace.left) {\n    dropLeft = true;\n    //3. Fit into biggest available space either on left or right\n  } else {\n    dropLeft = availableSpace.left > availableSpace.right;\n    width = Math.max(availableSpace.left, availableSpace.right, minWidth);\n  }\n\n  if (preferCenter) {\n    const spillOver = (idealWidth - triggerWidth) / 2;\n\n    // availableSpace always includes the trigger width, but we want to exclude that\n    const availableOutsideLeft = availableSpace.left - triggerWidth;\n    const availableOutsideRight = availableSpace.right - triggerWidth;\n\n    const fitsInCenter = availableOutsideLeft >= spillOver && availableOutsideRight >= spillOver;\n    if (fitsInCenter) {\n      left = -spillOver;\n    }\n  }\n\n  const dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;\n  const availableHeight = dropUp ? availableSpace.above : availableSpace.below;\n  // Try and crop the bottom item when all options can't be displayed, affordance for \"there's more\"\n  const croppedHeight = Math.floor(availableHeight / 31) * 31 + 16;\n\n  return {\n    dropUp,\n    dropLeft,\n    left: left === null ? 'auto' : `${left}px`,\n    height: `${croppedHeight}px`,\n    width: `${width}px`,\n  };\n};\n\nexport const getInteriorDropdownPosition = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  isMobile?: boolean\n): InteriorDropdownPosition => {\n  const availableSpace = getInteriorAvailableSpace(trigger, dropdown, overflowParents, isMobile);\n  const { bottom: triggerBottom, top: triggerTop, width: triggerWidth } = trigger.getBoundingClientRect();\n  const { top: parentDropdownTop, height: parentDropdownHeight } = getClosestParentDimensions(trigger);\n\n  let dropLeft;\n\n  let width = dropdown.getBoundingClientRect().width;\n  const top = triggerTop - parentDropdownTop;\n  if (width <= availableSpace.right) {\n    dropLeft = false;\n  } else if (width <= availableSpace.left) {\n    dropLeft = true;\n  } else {\n    dropLeft = availableSpace.left > availableSpace.right;\n    width = Math.max(availableSpace.left, availableSpace.right);\n  }\n\n  const left = dropLeft ? 0 - width : triggerWidth;\n\n  const dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;\n  const bottom = dropUp ? parentDropdownTop + parentDropdownHeight - triggerBottom : 0;\n  const availableHeight = dropUp ? availableSpace.above : availableSpace.below;\n  // Try and crop the bottom item when all options can't be displayed, affordance for \"there's more\"\n  const croppedHeight = Math.floor(availableHeight / 31) * 31 + 16;\n\n  return {\n    dropUp,\n    dropLeft,\n    height: `${croppedHeight}px`,\n    width: `${width}px`,\n    top: `${top}px`,\n    bottom: `${bottom}px`,\n    left: `${left}px`,\n  };\n};\n\nexport const calculatePosition = (\n  dropdownElement: HTMLDivElement,\n  triggerElement: HTMLDivElement,\n  verticalContainerElement: HTMLDivElement,\n  interior: boolean,\n  expandToViewport: boolean,\n  preferCenter: boolean,\n  stretchWidth: boolean,\n  stretchHeight: boolean,\n  isMobile: boolean,\n  minWidth?: number\n): [DropdownPosition, DOMRect] => {\n  // cleaning previously assigned values,\n  // so that they are not reused in case of screen resize and similar events\n  verticalContainerElement.style.maxHeight = '';\n  dropdownElement.style.width = '';\n  dropdownElement.style.top = '';\n  dropdownElement.style.bottom = '';\n  dropdownElement.style.left = '';\n\n  dropdownElement.classList.remove(styles['dropdown-drop-left']);\n  dropdownElement.classList.remove(styles['dropdown-drop-right']);\n  dropdownElement.classList.remove(styles['dropdown-drop-up']);\n\n  const overflowParents = getOverflowParentDimensions(dropdownElement, interior, expandToViewport, stretchHeight);\n  const position = interior\n    ? getInteriorDropdownPosition(triggerElement, dropdownElement, overflowParents, isMobile)\n    : getDropdownPosition(\n        triggerElement,\n        dropdownElement,\n        overflowParents,\n        minWidth,\n        preferCenter,\n        stretchWidth,\n        stretchHeight,\n        isMobile\n      );\n  const triggerBox = triggerElement.getBoundingClientRect();\n  return [position, triggerBox];\n};\n"]}
+{"version":3,"file":"dropdown-fit-handler.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/dropdown-fit-handler.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 { Dimensions, getOverflowParents, getOverflowParentDimensions } from '../../utils/scrollable-containers';\nimport styles from './styles.css.js';\n\nconst AVAILABLE_SPACE_RESERVE_DEFAULT = 50;\nconst AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL = 19; // 50 - 31\nconst AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL = 20;\n\ninterface AvailableSpace {\n  above: number;\n  below: number;\n  left: number;\n  right: number;\n}\nexport interface DropdownPosition {\n  height: string;\n  width: string;\n  dropUp: boolean;\n  dropLeft: boolean;\n  left: string;\n}\nexport interface InteriorDropdownPosition extends DropdownPosition {\n  bottom: string;\n  top: string;\n}\n\nconst getClosestParentDimensions = (element: HTMLElement): any => {\n  const parents = getOverflowParents(element).map(el => {\n    const { height, width, top, left } = el.getBoundingClientRect();\n    return {\n      height,\n      width,\n      top,\n      left,\n    };\n  });\n\n  return parents.shift();\n};\n\nexport const getAvailableSpace = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  stretchWidth = false,\n  stretchHeight = false,\n  isMobile?: boolean\n): AvailableSpace => {\n  const availableSpaceReserveVertical = stretchHeight\n    ? 0\n    : isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const availableSpaceReserveHorizontal = stretchWidth\n    ? 0\n    : isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const { bottom: triggerBottom, left: triggerLeft, right: triggerRight } = trigger.getBoundingClientRect();\n\n  return overflowParents.reduce(\n    ({ above, below, left, right }, overflowParent) => {\n      const offsetTop = triggerBottom - overflowParent.top;\n      const currentAbove = offsetTop - trigger.offsetHeight - availableSpaceReserveVertical;\n      const currentBelow = overflowParent.height - offsetTop - availableSpaceReserveVertical;\n      const currentLeft = triggerRight - overflowParent.left - availableSpaceReserveHorizontal;\n      const currentRight = overflowParent.left + overflowParent.width - triggerLeft - availableSpaceReserveHorizontal;\n\n      return {\n        above: Math.min(above, currentAbove),\n        below: Math.min(below, currentBelow),\n        left: Math.min(left, currentLeft),\n        right: Math.min(right, currentRight),\n      };\n    },\n    { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE }\n  );\n};\n\nexport const getInteriorAvailableSpace = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  isMobile?: boolean\n): AvailableSpace => {\n  const AVAILABLE_SPACE_RESERVE_VERTICAL = isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_VERTICAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const AVAILABLE_SPACE_RESERVE_HORIZONTAL = isMobile\n    ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL\n    : AVAILABLE_SPACE_RESERVE_DEFAULT;\n  const {\n    bottom: triggerBottom,\n    top: triggerTop,\n    left: triggerLeft,\n    right: triggerRight,\n  } = trigger.getBoundingClientRect();\n\n  return overflowParents.reduce(\n    ({ above, below, left, right }, overflowParent) => {\n      const currentAbove = triggerBottom - overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;\n      const currentBelow = overflowParent.height - triggerTop + overflowParent.top - AVAILABLE_SPACE_RESERVE_VERTICAL;\n      const currentLeft = triggerLeft - overflowParent.left - AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n      const currentRight =\n        overflowParent.left + overflowParent.width - triggerRight - AVAILABLE_SPACE_RESERVE_HORIZONTAL;\n\n      return {\n        above: Math.min(above, currentAbove),\n        below: Math.min(below, currentBelow),\n        left: Math.min(left, currentLeft),\n        right: Math.min(right, currentRight),\n      };\n    },\n    { above: Number.MAX_VALUE, below: Number.MAX_VALUE, left: Number.MAX_VALUE, right: Number.MAX_VALUE }\n  );\n};\n\nexport const getDropdownPosition = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  minWidth?: number,\n  preferCenter = false,\n  stretchWidth = false,\n  stretchHeight = false,\n  isMobile?: boolean\n): DropdownPosition => {\n  const availableSpace = getAvailableSpace(trigger, dropdown, overflowParents, stretchWidth, stretchHeight, isMobile);\n  const triggerWidth = trigger.getBoundingClientRect().width;\n  minWidth = minWidth ? Math.min(triggerWidth, minWidth) : triggerWidth;\n  const requiredWidth = dropdown.getBoundingClientRect().width;\n  // dropdown should not be smaller than the trigger\n  const idealWidth = Math.max(requiredWidth, minWidth);\n\n  let dropLeft: boolean;\n  let left: number | null = null;\n  let width = idealWidth;\n\n  //1. Can it be positioned with ideal width to the right?\n  if (idealWidth <= availableSpace.right) {\n    dropLeft = false;\n    //2. Can it be positioned with ideal width to the left?\n  } else if (idealWidth <= availableSpace.left) {\n    dropLeft = true;\n    //3. Fit into biggest available space either on left or right\n  } else {\n    dropLeft = availableSpace.left > availableSpace.right;\n    width = Math.max(availableSpace.left, availableSpace.right, minWidth);\n  }\n\n  if (preferCenter) {\n    const spillOver = (idealWidth - triggerWidth) / 2;\n\n    // availableSpace always includes the trigger width, but we want to exclude that\n    const availableOutsideLeft = availableSpace.left - triggerWidth;\n    const availableOutsideRight = availableSpace.right - triggerWidth;\n\n    const fitsInCenter = availableOutsideLeft >= spillOver && availableOutsideRight >= spillOver;\n    if (fitsInCenter) {\n      left = -spillOver;\n    }\n  }\n\n  const dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;\n  const availableHeight = dropUp ? availableSpace.above : availableSpace.below;\n  // Try and crop the bottom item when all options can't be displayed, affordance for \"there's more\"\n  const croppedHeight = stretchHeight ? availableHeight : Math.floor(availableHeight / 31) * 31 + 16;\n\n  return {\n    dropUp,\n    dropLeft,\n    left: left === null ? 'auto' : `${left}px`,\n    height: `${croppedHeight}px`,\n    width: `${width}px`,\n  };\n};\n\nexport const getInteriorDropdownPosition = (\n  trigger: HTMLElement,\n  dropdown: HTMLElement,\n  overflowParents: ReadonlyArray<Dimensions>,\n  isMobile?: boolean\n): InteriorDropdownPosition => {\n  const availableSpace = getInteriorAvailableSpace(trigger, dropdown, overflowParents, isMobile);\n  const { bottom: triggerBottom, top: triggerTop, width: triggerWidth } = trigger.getBoundingClientRect();\n  const { top: parentDropdownTop, height: parentDropdownHeight } = getClosestParentDimensions(trigger);\n\n  let dropLeft;\n\n  let width = dropdown.getBoundingClientRect().width;\n  const top = triggerTop - parentDropdownTop;\n  if (width <= availableSpace.right) {\n    dropLeft = false;\n  } else if (width <= availableSpace.left) {\n    dropLeft = true;\n  } else {\n    dropLeft = availableSpace.left > availableSpace.right;\n    width = Math.max(availableSpace.left, availableSpace.right);\n  }\n\n  const left = dropLeft ? 0 - width : triggerWidth;\n\n  const dropUp = availableSpace.below < dropdown.offsetHeight && availableSpace.above > availableSpace.below;\n  const bottom = dropUp ? parentDropdownTop + parentDropdownHeight - triggerBottom : 0;\n  const availableHeight = dropUp ? availableSpace.above : availableSpace.below;\n  // Try and crop the bottom item when all options can't be displayed, affordance for \"there's more\"\n  const croppedHeight = Math.floor(availableHeight / 31) * 31 + 16;\n\n  return {\n    dropUp,\n    dropLeft,\n    height: `${croppedHeight}px`,\n    width: `${width}px`,\n    top: `${top}px`,\n    bottom: `${bottom}px`,\n    left: `${left}px`,\n  };\n};\n\nexport const calculatePosition = (\n  dropdownElement: HTMLDivElement,\n  triggerElement: HTMLDivElement,\n  verticalContainerElement: HTMLDivElement,\n  interior: boolean,\n  expandToViewport: boolean,\n  preferCenter: boolean,\n  stretchWidth: boolean,\n  stretchHeight: boolean,\n  isMobile: boolean,\n  minWidth?: number\n): [DropdownPosition, DOMRect] => {\n  // cleaning previously assigned values,\n  // so that they are not reused in case of screen resize and similar events\n  verticalContainerElement.style.maxHeight = '';\n  dropdownElement.style.width = '';\n  dropdownElement.style.top = '';\n  dropdownElement.style.bottom = '';\n  dropdownElement.style.left = '';\n\n  dropdownElement.classList.remove(styles['dropdown-drop-left']);\n  dropdownElement.classList.remove(styles['dropdown-drop-right']);\n  dropdownElement.classList.remove(styles['dropdown-drop-up']);\n\n  const overflowParents = getOverflowParentDimensions(dropdownElement, interior, expandToViewport, stretchHeight);\n  const position = interior\n    ? getInteriorDropdownPosition(triggerElement, dropdownElement, overflowParents, isMobile)\n    : getDropdownPosition(\n        triggerElement,\n        dropdownElement,\n        overflowParents,\n        minWidth,\n        preferCenter,\n        stretchWidth,\n        stretchHeight,\n        isMobile\n      );\n  const triggerBox = triggerElement.getBoundingClientRect();\n  return [position, triggerBox];\n};\n"]}

package/internal/context/app-layout-context.d.ts

@@ -2,7 +2,7 @@ export interface AppLayoutContextProps {
     stickyOffsetBottom: number;
     stickyOffsetTop: number;
 }
-export declare const AppLayoutDomContext: import("../hooks/dom-context").DomContextDeclaration<AppLayoutContextProps>;
+export declare const AppLayoutContext: import("react").Context<AppLayoutContextProps>;
 export declare function useAppLayoutContext(): {
     stickyOffsetBottom: number;
     stickyOffsetTop: number;

package/internal/context/app-layout-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-layout-context.d.ts","sourceRoot":"","sources":["../../../../src/internal/context/app-layout-context.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,qBAAqB;IACpC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,mBAAmB,6EAG9B,CAAC;AAEH,wBAAgB,mBAAmB;;;EAGlC"}
+{"version":3,"file":"app-layout-context.d.ts","sourceRoot":"","sources":["../../../../src/internal/context/app-layout-context.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,gDAG3B,CAAC;AAEH,wBAAgB,mBAAmB;;;EAGlC"}

package/internal/context/app-layout-context.js

@@ -1,14 +1,13 @@
 import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useContext } from 'react';
-import { createDomContext } from '../hooks/dom-context';
-export var AppLayoutDomContext = createDomContext('app-layout-context', {
+import { useContext, createContext } from 'react';
+export var AppLayoutContext = createContext({
     stickyOffsetTop: 0,
     stickyOffsetBottom: 0
 });
 export function useAppLayoutContext() {
-    var context = useContext(AppLayoutDomContext.context);
+    var context = useContext(AppLayoutContext);
     return __assign({}, context);
 }
 //# sourceMappingURL=app-layout-context.js.map

package/internal/context/app-layout-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-layout-context.js","sourceRoot":"","sources":["../../../../src/internal/context/app-layout-context.ts"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAOxD,MAAM,CAAC,IAAM,mBAAmB,GAAG,gBAAgB,CAAwB,oBAAoB,EAAE;IAC/F,eAAe,EAAE,CAAC;IAClB,kBAAkB,EAAE,CAAC;CACtB,CAAC,CAAC;AAEH,MAAM,UAAU,mBAAmB;IACjC,IAAM,OAAO,GAAG,UAAU,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACxD,oBAAY,OAAO,EAAG;AACxB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext } from 'react';\nimport { createDomContext } from '../hooks/dom-context';\n\nexport interface AppLayoutContextProps {\n  stickyOffsetBottom: number;\n  stickyOffsetTop: number;\n}\n\nexport const AppLayoutDomContext = createDomContext<AppLayoutContextProps>('app-layout-context', {\n  stickyOffsetTop: 0,\n  stickyOffsetBottom: 0,\n});\n\nexport function useAppLayoutContext() {\n  const context = useContext(AppLayoutDomContext.context);\n  return { ...context };\n}\n"]}
+{"version":3,"file":"app-layout-context.js","sourceRoot":"","sources":["../../../../src/internal/context/app-layout-context.ts"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAOlD,MAAM,CAAC,IAAM,gBAAgB,GAAG,aAAa,CAAwB;IACnE,eAAe,EAAE,CAAC;IAClB,kBAAkB,EAAE,CAAC;CACtB,CAAC,CAAC;AAEH,MAAM,UAAU,mBAAmB;IACjC,IAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC7C,oBAAY,OAAO,EAAG;AACxB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, createContext } from 'react';\n\nexport interface AppLayoutContextProps {\n  stickyOffsetBottom: number;\n  stickyOffsetTop: number;\n}\n\nexport const AppLayoutContext = createContext<AppLayoutContextProps>({\n  stickyOffsetTop: 0,\n  stickyOffsetBottom: 0,\n});\n\nexport function useAppLayoutContext() {\n  const context = useContext(AppLayoutContext);\n  return { ...context };\n}\n"]}

package/internal/context/form-field-context.d.ts

@@ -39,6 +39,6 @@ export interface FormFieldValidationControlProps extends FormFieldControlProps {
      */
     invalid?: boolean;
 }
-export declare const FormFieldDomContext: import("../hooks/dom-context").DomContextDeclaration<FormFieldValidationControlProps>;
+export declare const FormFieldContext: import("react").Context<FormFieldValidationControlProps>;
 export declare function useFormFieldContext(props: FormFieldValidationControlProps): FormFieldValidationControlProps;
 //# sourceMappingURL=form-field-context.d.ts.map