npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.2 → 3.0.5 - Mend

@cloudscape-design/components-themeable 3.0.2 → 3.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/lib/internal/template/container/styles.css.js CHANGED Viewed

@@ -1,19 +1,20 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_14iqq_1asmt_97",
-  "variant-default": "awsui_variant-default_14iqq_1asmt_109",
-  "variant-stacked": "awsui_variant-stacked_14iqq_1asmt_109",
-  "header": "awsui_header_14iqq_1asmt_132",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1asmt_136",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1asmt_140",
-  "header-stuck": "awsui_header-stuck_14iqq_1asmt_146",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1asmt_151",
-  "with-paddings": "awsui_with-paddings_14iqq_1asmt_157",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_1asmt_160",
-  "dark-header": "awsui_dark-header_14iqq_1asmt_189",
-  "content": "awsui_content_14iqq_1asmt_193",
-  "footer": "awsui_footer_14iqq_1asmt_200",
-  "with-divider": "awsui_with-divider_14iqq_1asmt_203"
+  "root": "awsui_root_14iqq_wvh8f_97",
+  "variant-default": "awsui_variant-default_14iqq_wvh8f_109",
+  "variant-stacked": "awsui_variant-stacked_14iqq_wvh8f_109",
+  "header": "awsui_header_14iqq_wvh8f_132",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_wvh8f_136",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_wvh8f_140",
+  "header-stuck": "awsui_header-stuck_14iqq_wvh8f_146",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_wvh8f_151",
+  "with-paddings": "awsui_with-paddings_14iqq_wvh8f_157",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_wvh8f_160",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_wvh8f_184",
+  "dark-header": "awsui_dark-header_14iqq_wvh8f_192",
+  "content": "awsui_content_14iqq_wvh8f_196",
+  "footer": "awsui_footer_14iqq_wvh8f_203",
+  "with-divider": "awsui_with-divider_14iqq_wvh8f_206"
 };

package/lib/internal/template/container/styles.scoped.css CHANGED Viewed

@@ -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_1asmt_97:not(#\9) {
+.awsui_root_14iqq_wvh8f_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_1asmt_97.awsui_variant-default_14iqq_1asmt_109:not(#\9), .awsui_root_14iqq_1asmt_97.awsui_variant-stacked_14iqq_1asmt_109:not(#\9) {
+.awsui_root_14iqq_wvh8f_97.awsui_variant-default_14iqq_wvh8f_109:not(#\9), .awsui_root_14iqq_wvh8f_97.awsui_variant-stacked_14iqq_wvh8f_109:not(#\9) {
   box-shadow: 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
   box-shadow: var(--shadow-container-0bkp96, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
   border-top: 1px solid #eaeded;
@@ -149,16 +149,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background-color: var(--color-background-container-content-o88wxm, #ffffff);
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_root_14iqq_1asmt_97.awsui_variant-default_14iqq_1asmt_109:not(#\9), .awsui_root_14iqq_1asmt_97.awsui_variant-stacked_14iqq_1asmt_109:not(#\9) {
+  .awsui_root_14iqq_wvh8f_97.awsui_variant-default_14iqq_wvh8f_109:not(#\9), .awsui_root_14iqq_wvh8f_97.awsui_variant-stacked_14iqq_wvh8f_109:not(#\9) {
     border: 1px solid #eaeded;
     border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
   }
 }
-.awsui_root_14iqq_1asmt_97.awsui_variant-stacked_14iqq_1asmt_109:not(#\9):not(:last-child) {
+.awsui_root_14iqq_wvh8f_97.awsui_variant-stacked_14iqq_wvh8f_109:not(#\9):not(:last-child) {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.awsui_root_14iqq_1asmt_97.awsui_variant-stacked_14iqq_1asmt_109 + .awsui_root_14iqq_1asmt_97.awsui_variant-stacked_14iqq_1asmt_109:not(#\9) {
+.awsui_root_14iqq_wvh8f_97.awsui_variant-stacked_14iqq_wvh8f_109 + .awsui_root_14iqq_wvh8f_97.awsui_variant-stacked_14iqq_wvh8f_109:not(#\9) {
   border-top: 1px solid #eaeded;
   border-top: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
   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-j8j87i, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_header_14iqq_1asmt_132:not(#\9) {
+.awsui_header_14iqq_wvh8f_132:not(#\9) {
   background-color: #fafafa;
   background-color: var(--color-background-container-header-g9rg0j, #fafafa);
   border-radius: 0px;
   border-radius: var(--border-container-radius-gcr27z, 0px);
 }
-.awsui_header-sticky-disabled_14iqq_1asmt_136:not(#\9) {
+.awsui_header-sticky-disabled_14iqq_wvh8f_136:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_header-sticky-enabled_14iqq_1asmt_140:not(#\9) {
+.awsui_header-sticky-enabled_14iqq_wvh8f_140:not(#\9) {
   top: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   z-index: 800;
 }
-.awsui_header-stuck_14iqq_1asmt_146:not(#\9) {
+.awsui_header-stuck_14iqq_wvh8f_146:not(#\9) {
   box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5);
-  box-shadow: var(--shadow-sticky-thyisb, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
+  box-shadow: var(--shadow-sticky-embedded-5acv0s, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
   border: 0;
   border-radius: 0;
 }
-.awsui_header-dynamic-height_14iqq_1asmt_151.awsui_header-stuck_14iqq_1asmt_146:not(#\9) {
+.awsui_header-dynamic-height_14iqq_wvh8f_151.awsui_header-stuck_14iqq_wvh8f_146:not(#\9) {
   margin-bottom: calc(36px - 22px);
   margin-bottom: calc(var(--font-heading-xl-line-height-qeciux, 36px) - var(--font-heading-l-line-height-oujdab, 22px));
 }
-.awsui_header_14iqq_1asmt_132:not(#\9):not(:empty) {
+.awsui_header_14iqq_wvh8f_132:not(#\9):not(:empty) {
   border-bottom: 1px solid #eaeded;
   border-bottom: var(--border-container-sticky-width-pybmba, 1px) solid var(--color-border-container-divider-z203b8, #eaeded);
 }
-.awsui_header_14iqq_1asmt_132.awsui_with-paddings_14iqq_1asmt_157:not(#\9) {
+.awsui_header_14iqq_wvh8f_132.awsui_with-paddings_14iqq_wvh8f_157:not(#\9) {
   padding: 12px 20px;
   padding: var(--space-container-header-vertical-0bd19u, 12px) var(--space-container-horizontal-tlw03i, 20px);
 }
-.awsui_header-variant-cards_14iqq_1asmt_160:not(#\9) {
+.awsui_header-variant-cards_14iqq_wvh8f_160:not(#\9) {
   box-shadow: 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
   box-shadow: var(--shadow-container-0bkp96, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
   border-top: 1px solid #eaeded;
@@ -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_1asmt_160:not(#\9) {
+  .awsui_header-variant-cards_14iqq_wvh8f_160:not(#\9) {
     border: 1px solid #eaeded;
     border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
   }
 }
-.awsui_header-variant-cards_14iqq_1asmt_160:not(#\9):not(:empty) {
+.awsui_header-variant-cards_14iqq_wvh8f_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_1asmt_160:not(#\9):not(:empty) {
+  .awsui_header-variant-cards_14iqq_wvh8f_160:not(#\9):not(:empty) {
     border-bottom: 0;
   }
 }
-.awsui_header-variant-cards_14iqq_1asmt_160.awsui_header-stuck_14iqq_1asmt_146:not(#\9) {
+.awsui_header-variant-cards_14iqq_wvh8f_160.awsui_header-stuck_14iqq_wvh8f_146:not(#\9) {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
+.awsui_header-variant-full-page_14iqq_wvh8f_184.awsui_header-stuck_14iqq_wvh8f_146:not(#\9) {
+  box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5);
+  box-shadow: var(--shadow-sticky-thyisb, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
+}
 /*
 The dynamic height dark header needs a background that will cover
 the default white background of the container component.
 */
-.awsui_dark-header_14iqq_1asmt_189:not(#\9) {
+.awsui_dark-header_14iqq_wvh8f_192:not(#\9) {
   background-color: #f2f3f3;
   background-color: var(--color-background-layout-main-q0tbxx, #f2f3f3);
 }
-.awsui_content_14iqq_1asmt_193.awsui_with-paddings_14iqq_1asmt_157:not(#\9) {
+.awsui_content_14iqq_wvh8f_196.awsui_with-paddings_14iqq_wvh8f_157:not(#\9) {
   padding: 20px 20px;
   padding: var(--space-scaled-l-t03y3z, 20px) var(--space-container-horizontal-tlw03i, 20px);
 }
-.awsui_header_14iqq_1asmt_132 + .awsui_content_14iqq_1asmt_193.awsui_with-paddings_14iqq_1asmt_157:not(#\9) {
+.awsui_header_14iqq_wvh8f_132 + .awsui_content_14iqq_wvh8f_196.awsui_with-paddings_14iqq_wvh8f_157:not(#\9) {
   padding-top: 16px;
   padding-top: var(--space-container-content-top-u412x3, 16px);
 }
-.awsui_footer_14iqq_1asmt_200.awsui_with-paddings_14iqq_1asmt_157:not(#\9) {
+.awsui_footer_14iqq_wvh8f_203.awsui_with-paddings_14iqq_wvh8f_157:not(#\9) {
   padding: 12px 20px;
   padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-container-horizontal-tlw03i, 20px);
 }
-.awsui_footer_14iqq_1asmt_200.awsui_with-divider_14iqq_1asmt_203:not(#\9) {
+.awsui_footer_14iqq_wvh8f_203.awsui_with-divider_14iqq_wvh8f_206:not(#\9) {
   border-top: 1px solid #eaeded;
   border-top: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }

package/lib/internal/template/container/styles.selectors.js CHANGED Viewed

@@ -2,19 +2,20 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_14iqq_1asmt_97",
-  "variant-default": "awsui_variant-default_14iqq_1asmt_109",
-  "variant-stacked": "awsui_variant-stacked_14iqq_1asmt_109",
-  "header": "awsui_header_14iqq_1asmt_132",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1asmt_136",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1asmt_140",
-  "header-stuck": "awsui_header-stuck_14iqq_1asmt_146",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1asmt_151",
-  "with-paddings": "awsui_with-paddings_14iqq_1asmt_157",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_1asmt_160",
-  "dark-header": "awsui_dark-header_14iqq_1asmt_189",
-  "content": "awsui_content_14iqq_1asmt_193",
-  "footer": "awsui_footer_14iqq_1asmt_200",
-  "with-divider": "awsui_with-divider_14iqq_1asmt_203"
+  "root": "awsui_root_14iqq_wvh8f_97",
+  "variant-default": "awsui_variant-default_14iqq_wvh8f_109",
+  "variant-stacked": "awsui_variant-stacked_14iqq_wvh8f_109",
+  "header": "awsui_header_14iqq_wvh8f_132",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_wvh8f_136",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_wvh8f_140",
+  "header-stuck": "awsui_header-stuck_14iqq_wvh8f_146",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_wvh8f_151",
+  "with-paddings": "awsui_with-paddings_14iqq_wvh8f_157",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_wvh8f_160",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_wvh8f_184",
+  "dark-header": "awsui_dark-header_14iqq_wvh8f_192",
+  "content": "awsui_content_14iqq_wvh8f_196",
+  "footer": "awsui_footer_14iqq_wvh8f_203",
+  "with-divider": "awsui_with-divider_14iqq_wvh8f_206"
 };

package/lib/internal/template/container/use-sticky-header.d.ts.map CHANGED Viewed

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

package/lib/internal/template/container/use-sticky-header.js CHANGED Viewed

@@ -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/lib/internal/template/container/use-sticky-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAa,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7G,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;~~AAC/D~~,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAMzE,MAAM,CAAC,IAAM,mBAAmB,GAAG,aAAa,CAA2B,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;AAE/F,MAAM,CAAC,IAAM,eAAe,GAAG,UAC7B,OAAkC,EAClC,SAAoC,EACpC,cAAwB,EACxB,cAAuB;IAEvB,IAAM,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC;IACvC,IAAM,gBAAgB,GAAG,SAAS,CAAC,OAAO,CAAC;IAC3C,IAAM,WAAW,GAAG,OAAO,CAAC;QAC1B,IAAM,mBAAmB,GAAG,cAAc;YACxC,CAAC,CAAC,QAAQ,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,EAAE,CAAC;YACrF,CAAC,CAAC,CAAC,CAAC;QACN,IAAM,YAAY,GAAG,gBAAgB;YACnC,CAAC,CAAC,QAAQ,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,EAAE,CAAC;YACvF,CAAC,CAAC,CAAC,CAAC;QACN,OAAO,mBAAmB,GAAG,YAAY,CAAC;IAC5C,CAAC,EAAE,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEvC,~~yEAAyE~~;~~IACzE~~,~~iFAAiF~~;~~IACjF~~,~~qFAAqF~~;IAC/E,IAAA,~~KAA6B~~,QAAQ,~~CAAU~~,KAAK,CAAC,~~EAApD~~,~~cAAc~~,QAAA,EAAE,~~QAAQ~~,~~QAA4B~~,CAAC;~~IACtD~~,IAAA,KAAwB,QAAQ,CAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAC9C,eAAe,CAAC;QACd,~~IAAM~~,~~eAAe,GAAG,~~OAAO,CAAC,OAAO,~~IAAI~~,kBAAkB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,~~MAAM~~,~~CAAC;QACtF~~,~~QAAQ~~,~~CAAC~~,CAAC,~~eAAe~~,CAAC,~~CAAC;IAC7B~~,~~CAAC,~~EAAE,CAAC,OAAO,~~CAAC~~,CAAC,CAAC;~~IACN~~,~~IAAA~~,~~eAAe~~,~~GAAK~~,~~mBAAmB~~,~~EAAE~~,~~gBAA1B~~,~~CAA2B;IAClD~~,~~IAAM~~,~~qBAAqB~~,GAAG,~~cAAc~~,~~aAAd~~,~~cAAc~~,~~cAAd~~,~~cAAc~~,~~GAAI,~~CAAC,~~cAAc~~,CAAC,CAAC,CAAC,~~eAAe~~,CAAC,~~CAAC~~,CAAC,CAAC,CAAC~~,CAAC~~;~~IACvF~~,IAAM,~~QAAQ~~,GAAG,~~uBAAuB~~,~~EAAE~~,~~IAAI~~,~~CAAC~~,CAAC,~~cAAc~~,CAAC~~;IAC/D~~,~~IAAM~~,~~SAAS~~,~~GAAG~~,~~gBAAgB~~,CAAC,~~OAAO~~,CAAC,CAAC;~~IAE5C~~;;;;;;OAMG;IACH,IAAI,cAAc,GAAG,UAAG,qBAAqB,GAAG,WAAW,OAAI,CAAC;IAChE,IAAI,~~cAAc~~,IAAI,~~SAAS~~,EAAE;~~QAC/B~~,cAAc,GAAG,cAAO,cAAc,CAAC,0BAA0B,eAAK,cAAc,MAAG,CAAC;KACzF;IAED,IAAM,YAAY,GAAG,QAAQ;QAC3B,CAAC,CAAC;YACE,KAAK,EAAE;gBACL,GAAG,EAAE,cAAc;aACpB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,6EAA6E;IAC7E,yDAAyD;IACzD,IAAM,YAAY,GAAG,WAAW,CAAC;QAC/B,IAAI,OAAO,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;YACxC,IAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;YAC5D,IAAM,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;YAChE,IAAI,OAAO,GAAG,WAAW,GAAG,SAAS,EAAE;gBACrC,UAAU,CAAC,IAAI,CAAC,CAAC;aAClB;iBAAM;gBACL,UAAU,CAAC,KAAK,CAAC,CAAC;aACnB;SACF;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IACtC,SAAS,CAAC;QACR,IAAI,QAAQ,EAAE;YACZ,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;YACtD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAChD,OAAO;gBACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;gBACzD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACrD,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAC7B,OAAO;QACL,QAAQ,UAAA;QACR,OAAO,SAAA;QACP,YAAY,cAAA;KACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,uBAAuB;IACrC,IAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,OAAO,sBAAsB,EAAE,IAAI,CAAC,QAAQ,CAAC;AAC/C,CAAC","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"]}
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 { 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/lib/internal/template/flashbar/interfaces.d.ts CHANGED Viewed

@@ -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/lib/internal/template/flashbar/interfaces.js.map CHANGED Viewed

	@@ -1 +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"]}
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 * * `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/lib/internal/template/form-field/internal.js CHANGED Viewed

@@ -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/lib/internal/template/form-field/internal.js.map CHANGED Viewed

	@@ -1 +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"]}
1	+ {"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/lib/internal/template/internal/base-component/styles.scoped.css CHANGED Viewed

@@ -567,6 +567,7 @@
   --shadow-split-bottom-nxe040:0 -2px 1px -1px rgba(0, 28, 36, 0.15), 0 -1px 1px -1px rgba(0, 28, 36, 0.3);
   --shadow-split-side-dzdo00:0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
   --shadow-sticky-thyisb:0px 1px 4px -2px rgba(0, 28, 36, 0.5);
+  --shadow-sticky-embedded-5acv0s:0px 1px 4px -2px rgba(0, 28, 36, 0.5);
 }
 .awsui-dark-mode:not(#\9) {
@@ -898,6 +899,7 @@
   --shadow-split-bottom-nxe040:0 -2px 1px -1px rgba(0, 0, 0, 0.3), 0 -1px 1px -1px rgba(0, 0, 0, 0.3);
   --shadow-split-side-dzdo00:0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3);
   --shadow-sticky-thyisb:0px 1px 4px -2px rgba(0, 0, 0, 0.5);
+  --shadow-sticky-embedded-5acv0s:0px 1px 4px -2px rgba(0, 0, 0, 0.5);
 }
 .awsui-compact-mode:not(#\9) {
@@ -1436,6 +1438,7 @@
   --shadow-split-bottom-nxe040:0px -36px 36px -36px rgba(0, 7, 22, 0.10);
   --shadow-split-side-dzdo00:-1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.10);
   --shadow-sticky-thyisb:0px 4px 20px 1px rgba(0, 7, 22, 0.10);
+  --shadow-sticky-embedded-5acv0s:0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.10);
 }
 .awsui-dark-mode.awsui-visual-refresh:not(#\9) {
@@ -1626,6 +1629,7 @@
   --shadow-split-bottom-nxe040:0px -36px 36px -36px rgba(0, 7, 22, 1);
   --shadow-split-side-dzdo00:-1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1);
   --shadow-sticky-thyisb:0px 4px 20px 1px rgba(0, 7, 22, 1);
+  --shadow-sticky-embedded-5acv0s:0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1);
 }
 .awsui-compact-mode.awsui-visual-refresh:not(#\9) {
@@ -2178,6 +2182,7 @@
   --shadow-split-bottom-nxe040:0px -36px 36px -36px rgba(0, 7, 22, 1);
   --shadow-split-side-dzdo00:-1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1);
   --shadow-sticky-thyisb:0px 4px 20px 1px rgba(0, 7, 22, 1);
+  --shadow-sticky-embedded-5acv0s:0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1);
 }
 .awsui-context-content-header.awsui-visual-refresh:not(#\9) {
@@ -2357,6 +2362,7 @@
   --shadow-split-bottom-nxe040:0px -36px 36px -36px rgba(0, 7, 22, 1);
   --shadow-split-side-dzdo00:-1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1);
   --shadow-sticky-thyisb:0px 4px 20px 1px rgba(0, 7, 22, 1);
+  --shadow-sticky-embedded-5acv0s:0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1);
 }
 .awsui-visual-refresh .awsui-context-flashbar:not(#\9) {

package/lib/internal/template/internal/components/dropdown/dropdown-fit-handler.js CHANGED Viewed

@@ -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/lib/internal/template/internal/components/dropdown/dropdown-fit-handler.js.map CHANGED Viewed

	@@ -1 +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"]}
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 = 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/lib/internal/template/internal/context/app-layout-context.d.ts CHANGED Viewed

@@ -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/lib/internal/template/internal/context/app-layout-context.d.ts.map CHANGED Viewed

	@@ -1 +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"}
1	+ {"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/lib/internal/template/internal/context/app-layout-context.js CHANGED Viewed

@@ -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