@cloudscape-design/components 3.0.65 → 3.0.66

package/popover/container.js

@@ -4,47 +4,50 @@ import { __assign } from "tslib";
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { getContainingBlock, nodeContains } from '../internal/utils/dom';
-import { useContainerQuery } from '../internal/hooks/container-queries';
+import { useResizeObserver } from '../internal/hooks/container-queries';
 import { calculatePosition } from './utils/positions';
 import styles from './styles.css.js';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 var INITIAL_STYLES = { position: 'absolute', top: -9999, left: -9999 };
 export default function PopoverContainer(_a) {
-    var position = _a.position, trackRef = _a.trackRef, trackKey = _a.trackKey, arrow = _a.arrow, children = _a.children, zIndex = _a.zIndex, renderWithPortal = _a.renderWithPortal;
-    var _b = useContainerQuery(function (rect, prev) {
-        var roundedRect = { width: Math.round(rect.width), height: Math.round(rect.height) };
-        return (prev === null || prev === void 0 ? void 0 : prev.width) === roundedRect.width && (prev === null || prev === void 0 ? void 0 : prev.height) === roundedRect.height ? prev : rect;
-    }), popoverRect = _b[0], ref = _b[1];
+    var _b;
+    var position = _a.position, trackRef = _a.trackRef, trackKey = _a.trackKey, arrow = _a.arrow, children = _a.children, zIndex = _a.zIndex, renderWithPortal = _a.renderWithPortal, size = _a.size, fixedWidth = _a.fixedWidth, variant = _a.variant;
     var bodyRef = useRef(null);
+    var contentRef = useRef(null);
+    var popoverRef = useRef(null);
     var arrowRef = useRef(null);
-    var _c = useState(INITIAL_STYLES), inlineStyle = _c[0], setInlineStyle = _c[1];
+    var _c = useState(INITIAL_STYLES), popoverStyle = _c[0], setPopoverStyle = _c[1];
     var _d = useState(null), internalPosition = _d[0], setInternalPosition = _d[1];
     var isRefresh = useVisualRefresh();
     // Store the handler in a ref so that it can still be replaced from outside of the listener closure.
     var positionHandlerRef = useRef(function () { });
     // Updates the position handler.
     var updatePositionHandler = useCallback(function () {
-        if (!trackRef.current || !ref.current || !bodyRef.current || !arrowRef.current) {
+        if (!trackRef.current || !popoverRef.current || !bodyRef.current || !contentRef.current || !arrowRef.current) {
             return;
         }
         // Get important elements
+        var popover = popoverRef.current;
         var body = bodyRef.current;
         var arrow = arrowRef.current;
-        var document = ref.current.ownerDocument;
+        var document = popover.ownerDocument;
         var track = trackRef.current;
         // If the popover body isn't being rendered for whatever reason (e.g. "display: none" or JSDOM),
         // or track does not belong to the document - bail on calculating dimensions.
-        if (body.offsetWidth === 0 || body.offsetHeight === 0 || !nodeContains(document.body, track)) {
+        if (popover.offsetWidth === 0 || popover.offsetHeight === 0 || !nodeContains(document.body, track)) {
             return;
         }
         // Imperatively move body off-screen to give it room to expand.
         // Not doing this in React because this recalculation should happen
         // in the span of a single frame without rerendering anything.
-        var prevTop = body.style.top;
-        var prevLeft = body.style.left;
-        body.style.top = '0';
-        body.style.left = '0';
+        var prevTop = popover.style.top;
+        var prevLeft = popover.style.left;
+        popover.style.top = '0';
+        popover.style.left = '0';
+        // Imperatively remove body styles that can remain from the previous computation.
+        body.style.maxHeight = '';
+        body.style.overflowX = '';
+        body.style.overflowY = '';
         // Get rects representing key elements
         // Use getComputedStyle for arrowRect to avoid modifications made by transform
         var viewportRect = getViewportRect(document.defaultView);
@@ -53,43 +56,48 @@ export default function PopoverContainer(_a) {
             width: parseFloat(getComputedStyle(arrow).width),
             height: parseFloat(getComputedStyle(arrow).height)
         };
-        var containingBlock = getContainingBlock(body);
+        var containingBlock = getContainingBlock(popover);
         var containingBlockRect = containingBlock ? containingBlock.getBoundingClientRect() : viewportRect;
-        // Round up dimensions (IE11 doesn't handle subpixels too accurately)
-        var bodyRect = body.getBoundingClientRect();
-        var bodyRectCeil = {
-            top: bodyRect.top,
-            left: bodyRect.left,
-            width: Math.ceil(bodyRect.width),
-            height: Math.ceil(bodyRect.height)
+        var bodyBorderWidth = getBorderWidth(body);
+        var contentRect = contentRef.current.getBoundingClientRect();
+        var contentBoundingBox = {
+            width: contentRect.width + 2 * bodyBorderWidth,
+            height: contentRect.height + 2 * bodyBorderWidth
         };
         // Calculate the arrow direction and viewport-relative position of the popover.
-        var _a = calculatePosition(position, trackRect, arrowRect, bodyRectCeil, containingBlock ? containingBlockRect : getDocumentRect(document), viewportRect, renderWithPortal), newInternalPosition = _a.internalPosition, boundingOffset = _a.boundingOffset;
+        var _a = calculatePosition(position, trackRect, arrowRect, contentBoundingBox, containingBlock ? containingBlockRect : getDocumentRect(document), viewportRect, renderWithPortal), scrollable = _a.scrollable, newInternalPosition = _a.internalPosition, boundingOffset = _a.boundingOffset;
         // Get the position of the popover relative to the offset parent.
         var popoverOffset = toRelativePosition(boundingOffset, containingBlockRect);
         // Cache the distance between the trigger and the popover (which stays the same as you scroll),
         // and use that to recalculate the new popover position.
         var trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));
-        // Bring back the container to its original position to prevent any
-        // flashing.
-        body.style.top = prevTop;
-        body.style.left = prevLeft;
+        // Bring back the container to its original position to prevent any flashing.
+        popover.style.top = prevTop;
+        popover.style.left = prevLeft;
+        // Allow popover body to scroll if can't fit the popover into the container/viewport otherwise.
+        if (scrollable) {
+            body.style.maxHeight = boundingOffset.height + 'px';
+            body.style.overflowX = 'hidden';
+            body.style.overflowY = 'auto';
+        }
         // Position the popover
         setInternalPosition(newInternalPosition);
-        setInlineStyle({ top: popoverOffset.top, left: popoverOffset.left });
+        setPopoverStyle({ top: popoverOffset.top, left: popoverOffset.left });
         positionHandlerRef.current = function () {
             var newTrackOffset = toRelativePosition(track.getBoundingClientRect(), containingBlock ? containingBlock.getBoundingClientRect() : viewportRect);
-            setInlineStyle({
+            setPopoverStyle({
                 top: newTrackOffset.top + trackRelativeOffset.top,
                 left: newTrackOffset.left + trackRelativeOffset.left
             });
         };
-    }, [position, trackRef, ref, renderWithPortal]);
-    // Update the handler when properties change.
+    }, [position, trackRef, renderWithPortal]);
+    // Recalculate position when properties change.
     useLayoutEffect(function () {
         updatePositionHandler();
-    }, [updatePositionHandler, trackKey, popoverRect]);
-    // Attach document listeners.
+    }, [updatePositionHandler, trackKey]);
+    // Recalculate position when content size changes.
+    useResizeObserver(contentRef, function () { return updatePositionHandler(); });
+    // Recalculate position on DOM events.
     useLayoutEffect(function () {
         /*
           This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),
@@ -108,10 +116,16 @@ export default function PopoverContainer(_a) {
             window.removeEventListener('scroll', refreshPosition, true);
         };
     }, [updatePositionHandler]);
-    var mergedRef = useMergeRefs(bodyRef, ref);
-    return (React.createElement("div", { ref: mergedRef, style: __assign(__assign({}, inlineStyle), { zIndex: zIndex }), className: clsx(styles.container, isRefresh && styles.refresh) },
+    return (React.createElement("div", { ref: popoverRef, style: __assign(__assign({}, popoverStyle), { zIndex: zIndex }), className: clsx(styles.container, isRefresh && styles.refresh) },
         React.createElement("div", { ref: arrowRef, className: clsx(styles["container-arrow"], styles["container-arrow-position-".concat(internalPosition)]), "aria-hidden": true }, arrow(internalPosition)),
-        children));
+        React.createElement("div", { ref: bodyRef, className: clsx(styles['container-body'], styles["container-body-size-".concat(size)], (_b = {},
+                _b[styles['fixed-width']] = fixedWidth,
+                _b[styles["container-body-variant-".concat(variant)]] = variant,
+                _b)) },
+            React.createElement("div", { ref: contentRef }, children))));
+}
+function getBorderWidth(element) {
+    return parseInt(getComputedStyle(element).borderWidth) || 0;
 }
 /**
  * Convert a viewport-relative offset to an element-relative offset.

package/popover/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.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, { CSSProperties, useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getContainingBlock, nodeContains } from '../internal/utils/dom';\nimport { ContainerQueryEntry, useContainerQuery } from '../internal/hooks/container-queries';\nimport { BoundingOffset, InternalPosition, Offset, PopoverProps } from './interfaces';\nimport { calculatePosition } from './utils/positions';\nimport styles from './styles.css.js';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nexport interface PopoverContainerProps {\n  /** References the element the container is positioned against. */\n  trackRef: React.RefObject<Element>;\n  /**\n    Used to update the container position in case track or track position changes:\n    \n    const trackRef = useRef<Element>(null)\n    return (<>\n      <Track style={getPosition(selectedItemId)} ref={trackRef} />\n      <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n    </>)\n  */\n  trackKey?: string | number;\n  position: PopoverProps.Position;\n  zIndex?: React.CSSProperties['zIndex'];\n  arrow: (position: InternalPosition | null) => React.ReactNode;\n  children: React.ReactNode;\n  renderWithPortal?: boolean;\n}\n\nconst INITIAL_STYLES: CSSProperties = { position: 'absolute', top: -9999, left: -9999 };\n\nexport default function PopoverContainer({\n  position,\n  trackRef,\n  trackKey,\n  arrow,\n  children,\n  zIndex,\n  renderWithPortal,\n}: PopoverContainerProps) {\n  const [popoverRect, ref] = useContainerQuery((rect, prev) => {\n    const roundedRect = { width: Math.round(rect.width), height: Math.round(rect.height) };\n    return prev?.width === roundedRect.width && prev?.height === roundedRect.height ? prev : rect;\n  }) as [ContainerQueryEntry | null, React.MutableRefObject<HTMLDivElement | null>];\n\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const [inlineStyle, setInlineStyle] = useState<CSSProperties>(INITIAL_STYLES);\n  const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);\n  const isRefresh = useVisualRefresh();\n\n  // Store the handler in a ref so that it can still be replaced from outside of the listener closure.\n  const positionHandlerRef = useRef<() => void>(() => {});\n\n  // Updates the position handler.\n  const updatePositionHandler = useCallback(() => {\n    if (!trackRef.current || !ref.current || !bodyRef.current || !arrowRef.current) {\n      return;\n    }\n\n    // Get important elements\n    const body = bodyRef.current;\n    const arrow = arrowRef.current;\n    const document = ref.current.ownerDocument;\n    const track = trackRef.current;\n\n    // If the popover body isn't being rendered for whatever reason (e.g. \"display: none\" or JSDOM),\n    // or track does not belong to the document - bail on calculating dimensions.\n    if (body.offsetWidth === 0 || body.offsetHeight === 0 || !nodeContains(document.body, track)) {\n      return;\n    }\n\n    // Imperatively move body off-screen to give it room to expand.\n    // Not doing this in React because this recalculation should happen\n    // in the span of a single frame without rerendering anything.\n    const prevTop = body.style.top;\n    const prevLeft = body.style.left;\n    body.style.top = '0';\n    body.style.left = '0';\n\n    // Get rects representing key elements\n    // Use getComputedStyle for arrowRect to avoid modifications made by transform\n    const viewportRect = getViewportRect(document.defaultView!);\n    const trackRect = track.getBoundingClientRect();\n    const arrowRect = {\n      width: parseFloat(getComputedStyle(arrow).width),\n      height: parseFloat(getComputedStyle(arrow).height),\n    };\n    const containingBlock = getContainingBlock(body);\n    const containingBlockRect = containingBlock ? containingBlock.getBoundingClientRect() : viewportRect;\n\n    // Round up dimensions (IE11 doesn't handle subpixels too accurately)\n    const bodyRect = body.getBoundingClientRect();\n    const bodyRectCeil = {\n      top: bodyRect.top,\n      left: bodyRect.left,\n      width: Math.ceil(bodyRect.width),\n      height: Math.ceil(bodyRect.height),\n    };\n\n    // Calculate the arrow direction and viewport-relative position of the popover.\n    const { internalPosition: newInternalPosition, boundingOffset } = calculatePosition(\n      position,\n      trackRect,\n      arrowRect,\n      bodyRectCeil,\n      containingBlock ? containingBlockRect : getDocumentRect(document),\n      viewportRect,\n      renderWithPortal\n    );\n\n    // Get the position of the popover relative to the offset parent.\n    const popoverOffset = toRelativePosition(boundingOffset, containingBlockRect);\n\n    // Cache the distance between the trigger and the popover (which stays the same as you scroll),\n    // and use that to recalculate the new popover position.\n    const trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));\n\n    // Bring back the container to its original position to prevent any\n    // flashing.\n    body.style.top = prevTop;\n    body.style.left = prevLeft;\n\n    // Position the popover\n    setInternalPosition(newInternalPosition);\n    setInlineStyle({ top: popoverOffset.top, left: popoverOffset.left });\n\n    positionHandlerRef.current = () => {\n      const newTrackOffset = toRelativePosition(\n        track.getBoundingClientRect(),\n        containingBlock ? containingBlock.getBoundingClientRect() : viewportRect\n      );\n      setInlineStyle({\n        top: newTrackOffset.top + trackRelativeOffset.top,\n        left: newTrackOffset.left + trackRelativeOffset.left,\n      });\n    };\n  }, [position, trackRef, ref, renderWithPortal]);\n\n  // Update the handler when properties change.\n  useLayoutEffect(() => {\n    updatePositionHandler();\n  }, [updatePositionHandler, trackKey, popoverRect]);\n\n  // Attach document listeners.\n  useLayoutEffect(() => {\n    /*\n      This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),\n      and by tracking the click event we can adapt the popover's position to the new layout.\n\n      TODO: extend this to Enter and Spacebar?\n    */\n    const updatePosition = () => requestAnimationFrame(() => updatePositionHandler());\n    const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n\n    window.addEventListener('click', updatePosition);\n    window.addEventListener('resize', updatePosition);\n    window.addEventListener('scroll', refreshPosition, true);\n    return () => {\n      window.removeEventListener('click', updatePosition);\n      window.removeEventListener('resize', updatePosition);\n      window.removeEventListener('scroll', refreshPosition, true);\n    };\n  }, [updatePositionHandler]);\n\n  const mergedRef = useMergeRefs(bodyRef, ref);\n\n  return (\n    <div\n      ref={mergedRef}\n      style={{ ...inlineStyle, zIndex }}\n      className={clsx(styles.container, isRefresh && styles.refresh)}\n    >\n      <div\n        ref={arrowRef}\n        className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n        aria-hidden={true}\n      >\n        {arrow(internalPosition)}\n      </div>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Convert a viewport-relative offset to an element-relative offset.\n */\nfunction toRelativePosition(element: Offset, parent: Offset): Offset {\n  return {\n    top: element.top - parent.top,\n    left: element.left - parent.left,\n  };\n}\n\n/**\n * Get a BoundingOffset that represents the visible viewport.\n */\nfunction getViewportRect(window: Window): BoundingOffset {\n  return {\n    top: 0,\n    left: 0,\n    width: window.innerWidth,\n    height: window.innerHeight,\n  };\n}\n\nfunction getDocumentRect(document: Document): BoundingOffset {\n  const { top, left } = document.documentElement.getBoundingClientRect();\n  return {\n    top,\n    left,\n    width: document.documentElement.scrollWidth,\n    height: document.documentElement.scrollHeight,\n  };\n}\n"]}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.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, { CSSProperties, useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getContainingBlock, nodeContains } from '../internal/utils/dom';\nimport { useResizeObserver } from '../internal/hooks/container-queries';\nimport { BoundingOffset, InternalPosition, Offset, PopoverProps } from './interfaces';\nimport { calculatePosition } from './utils/positions';\nimport styles from './styles.css.js';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport interface PopoverContainerProps {\n  /** References the element the container is positioned against. */\n  trackRef: React.RefObject<Element>;\n  /**\n    Used to update the container position in case track or track position changes:\n    \n    const trackRef = useRef<Element>(null)\n    return (<>\n      <Track style={getPosition(selectedItemId)} ref={trackRef} />\n      <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n    </>)\n  */\n  trackKey?: string | number;\n  position: PopoverProps.Position;\n  zIndex?: React.CSSProperties['zIndex'];\n  arrow: (position: InternalPosition | null) => React.ReactNode;\n  children: React.ReactNode;\n  renderWithPortal?: boolean;\n  size: PopoverProps.Size;\n  fixedWidth: boolean;\n  variant?: 'annotation';\n}\n\nconst INITIAL_STYLES: CSSProperties = { position: 'absolute', top: -9999, left: -9999 };\n\nexport default function PopoverContainer({\n  position,\n  trackRef,\n  trackKey,\n  arrow,\n  children,\n  zIndex,\n  renderWithPortal,\n  size,\n  fixedWidth,\n  variant,\n}: PopoverContainerProps) {\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement | null>(null);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const [popoverStyle, setPopoverStyle] = useState<CSSProperties>(INITIAL_STYLES);\n  const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);\n  const isRefresh = useVisualRefresh();\n\n  // Store the handler in a ref so that it can still be replaced from outside of the listener closure.\n  const positionHandlerRef = useRef<() => void>(() => {});\n\n  // Updates the position handler.\n  const updatePositionHandler = useCallback(() => {\n    if (!trackRef.current || !popoverRef.current || !bodyRef.current || !contentRef.current || !arrowRef.current) {\n      return;\n    }\n\n    // Get important elements\n    const popover = popoverRef.current;\n    const body = bodyRef.current;\n    const arrow = arrowRef.current;\n    const document = popover.ownerDocument;\n    const track = trackRef.current;\n\n    // If the popover body isn't being rendered for whatever reason (e.g. \"display: none\" or JSDOM),\n    // or track does not belong to the document - bail on calculating dimensions.\n    if (popover.offsetWidth === 0 || popover.offsetHeight === 0 || !nodeContains(document.body, track)) {\n      return;\n    }\n\n    // Imperatively move body off-screen to give it room to expand.\n    // Not doing this in React because this recalculation should happen\n    // in the span of a single frame without rerendering anything.\n    const prevTop = popover.style.top;\n    const prevLeft = popover.style.left;\n    popover.style.top = '0';\n    popover.style.left = '0';\n    // Imperatively remove body styles that can remain from the previous computation.\n    body.style.maxHeight = '';\n    body.style.overflowX = '';\n    body.style.overflowY = '';\n\n    // Get rects representing key elements\n    // Use getComputedStyle for arrowRect to avoid modifications made by transform\n    const viewportRect = getViewportRect(document.defaultView!);\n    const trackRect = track.getBoundingClientRect();\n    const arrowRect = {\n      width: parseFloat(getComputedStyle(arrow).width),\n      height: parseFloat(getComputedStyle(arrow).height),\n    };\n    const containingBlock = getContainingBlock(popover);\n    const containingBlockRect = containingBlock ? containingBlock.getBoundingClientRect() : viewportRect;\n\n    const bodyBorderWidth = getBorderWidth(body);\n    const contentRect = contentRef.current.getBoundingClientRect();\n    const contentBoundingBox = {\n      width: contentRect.width + 2 * bodyBorderWidth,\n      height: contentRect.height + 2 * bodyBorderWidth,\n    };\n\n    // Calculate the arrow direction and viewport-relative position of the popover.\n    const {\n      scrollable,\n      internalPosition: newInternalPosition,\n      boundingOffset,\n    } = calculatePosition(\n      position,\n      trackRect,\n      arrowRect,\n      contentBoundingBox,\n      containingBlock ? containingBlockRect : getDocumentRect(document),\n      viewportRect,\n      renderWithPortal\n    );\n\n    // Get the position of the popover relative to the offset parent.\n    const popoverOffset = toRelativePosition(boundingOffset, containingBlockRect);\n\n    // Cache the distance between the trigger and the popover (which stays the same as you scroll),\n    // and use that to recalculate the new popover position.\n    const trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));\n\n    // Bring back the container to its original position to prevent any flashing.\n    popover.style.top = prevTop;\n    popover.style.left = prevLeft;\n\n    // Allow popover body to scroll if can't fit the popover into the container/viewport otherwise.\n    if (scrollable) {\n      body.style.maxHeight = boundingOffset.height + 'px';\n      body.style.overflowX = 'hidden';\n      body.style.overflowY = 'auto';\n    }\n\n    // Position the popover\n    setInternalPosition(newInternalPosition);\n    setPopoverStyle({ top: popoverOffset.top, left: popoverOffset.left });\n\n    positionHandlerRef.current = () => {\n      const newTrackOffset = toRelativePosition(\n        track.getBoundingClientRect(),\n        containingBlock ? containingBlock.getBoundingClientRect() : viewportRect\n      );\n      setPopoverStyle({\n        top: newTrackOffset.top + trackRelativeOffset.top,\n        left: newTrackOffset.left + trackRelativeOffset.left,\n      });\n    };\n  }, [position, trackRef, renderWithPortal]);\n\n  // Recalculate position when properties change.\n  useLayoutEffect(() => {\n    updatePositionHandler();\n  }, [updatePositionHandler, trackKey]);\n\n  // Recalculate position when content size changes.\n  useResizeObserver(contentRef, () => updatePositionHandler());\n\n  // Recalculate position on DOM events.\n  useLayoutEffect(() => {\n    /*\n      This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),\n      and by tracking the click event we can adapt the popover's position to the new layout.\n\n      TODO: extend this to Enter and Spacebar?\n    */\n    const updatePosition = () => requestAnimationFrame(() => updatePositionHandler());\n    const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n\n    window.addEventListener('click', updatePosition);\n    window.addEventListener('resize', updatePosition);\n    window.addEventListener('scroll', refreshPosition, true);\n    return () => {\n      window.removeEventListener('click', updatePosition);\n      window.removeEventListener('resize', updatePosition);\n      window.removeEventListener('scroll', refreshPosition, true);\n    };\n  }, [updatePositionHandler]);\n\n  return (\n    <div\n      ref={popoverRef}\n      style={{ ...popoverStyle, zIndex }}\n      className={clsx(styles.container, isRefresh && styles.refresh)}\n    >\n      <div\n        ref={arrowRef}\n        className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n        aria-hidden={true}\n      >\n        {arrow(internalPosition)}\n      </div>\n\n      <div\n        ref={bodyRef}\n        className={clsx(styles['container-body'], styles[`container-body-size-${size}`], {\n          [styles['fixed-width']]: fixedWidth,\n          [styles[`container-body-variant-${variant}`]]: variant,\n        })}\n      >\n        <div ref={contentRef}>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nfunction getBorderWidth(element: HTMLElement) {\n  return parseInt(getComputedStyle(element).borderWidth) || 0;\n}\n\n/**\n * Convert a viewport-relative offset to an element-relative offset.\n */\nfunction toRelativePosition(element: Offset, parent: Offset): Offset {\n  return {\n    top: element.top - parent.top,\n    left: element.left - parent.left,\n  };\n}\n\n/**\n * Get a BoundingOffset that represents the visible viewport.\n */\nfunction getViewportRect(window: Window): BoundingOffset {\n  return {\n    top: 0,\n    left: 0,\n    width: window.innerWidth,\n    height: window.innerHeight,\n  };\n}\n\nfunction getDocumentRect(document: Document): BoundingOffset {\n  const { top, left } = document.documentElement.getBoundingClientRect();\n  return {\n    top,\n    left,\n    width: document.documentElement.scrollWidth,\n    height: document.documentElement.scrollHeight,\n  };\n}\n"]}

package/popover/internal.js

@@ -65,8 +65,8 @@ function InternalPopover(_a, ref) {
         onKeyDown: onTriggerKeyDown,
         className: clsx(styles.trigger, styles["trigger-type-".concat(triggerType)])
     };
-    var popoverContent = (React.createElement("span", { "aria-live": dismissButton ? undefined : 'polite', "aria-atomic": dismissButton ? undefined : true, className: popoverClasses }, visible && (React.createElement(PopoverContainer, { position: position, trackRef: triggerRef, arrow: function (position) { return React.createElement(Arrow, { position: position }); }, renderWithPortal: renderWithPortal, zIndex: renderWithPortal ? 7000 : undefined },
-        React.createElement(PopoverBody, { size: size, fixedWidth: fixedWidth, dismissButton: dismissButton, dismissAriaLabel: dismissAriaLabel, header: header, onDismiss: onDismiss, overflowVisible: "both" }, content)))));
+    var popoverContent = (React.createElement("span", { "aria-live": dismissButton ? undefined : 'polite', "aria-atomic": dismissButton ? undefined : true, className: popoverClasses }, visible && (React.createElement(PopoverContainer, { size: size, fixedWidth: fixedWidth, position: position, trackRef: triggerRef, arrow: function (position) { return React.createElement(Arrow, { position: position }); }, renderWithPortal: renderWithPortal, zIndex: renderWithPortal ? 7000 : undefined },
+        React.createElement(PopoverBody, { dismissButton: dismissButton, dismissAriaLabel: dismissAriaLabel, header: header, onDismiss: onDismiss, overflowVisible: "both" }, content)))));
     var mergedRef = useMergeRefs(popoverRef, __internalRootRef);
     return (React.createElement("span", __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), ref: mergedRef, onMouseDown: function () {
             // Indicate there was a click inside popover recently, including nested portals.

package/popover/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/popover/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, { useCallback, useEffect, useRef, useState, useImperativeHandle } from 'react';\nimport clsx from 'clsx';\n\nimport { KeyCode } from '../internal/keycode';\nimport { getBaseProps } from '../internal/base-component';\nimport useFocusVisible from '../internal/hooks/focus-visible';\n\nimport Arrow from './arrow';\nimport Portal from '../internal/components/portal';\nimport { PopoverProps } from './interfaces';\nimport PopoverContainer from './container';\nimport PopoverBody from './body';\n\nimport styles from './styles.css.js';\nimport { NonCancelableEventHandler, fireNonCancelableEvent } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\n\nexport interface InternalPopoverProps extends PopoverProps, InternalBaseComponentProps {\n  __onOpen?: NonCancelableEventHandler<null>;\n}\n\nexport interface InternalPopoverRef {\n  dismissPopover: () => void;\n}\n\nexport default React.forwardRef(InternalPopover);\n\nfunction InternalPopover(\n  {\n    position = 'right',\n    size = 'medium',\n    fixedWidth = false,\n    triggerType = 'text',\n    dismissButton = true,\n    dismissAriaLabel,\n\n    children,\n    header,\n    content,\n\n    renderWithPortal = false,\n\n    __onOpen,\n    __internalRootRef = null,\n    ...restProps\n  }: InternalPopoverProps,\n  ref: React.Ref<InternalPopoverRef>\n) {\n  const baseProps = getBaseProps(restProps);\n  const focusVisible = useFocusVisible();\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const popoverRef = useRef<HTMLSpanElement | null>(null);\n  const clickFrameId = useRef<number | null>(null);\n\n  const [visible, setVisible] = useState(false);\n\n  const onTriggerClick = useCallback(() => {\n    fireNonCancelableEvent(__onOpen);\n    setVisible(true);\n  }, [__onOpen]);\n\n  const onDismiss = useCallback(() => {\n    setVisible(false);\n  }, []);\n\n  const onTriggerKeyDown = useCallback((event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.tab || event.keyCode === KeyCode.escape) {\n      setVisible(false);\n    }\n  }, []);\n\n  useImperativeHandle(ref, () => ({\n    dismissPopover: onDismiss,\n  }));\n\n  useEffect(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n    const document = triggerRef.current.ownerDocument;\n\n    const onDocumentClick = () => {\n      // Dismiss popover unless there was a click inside within the last animation frame.\n      if (clickFrameId.current === null) {\n        setVisible(false);\n      }\n    };\n\n    // useCapture=false makes sure this listener is called after the one attached to the element.\n    // the options.capture notation is unsupported by IE.\n    document.addEventListener('mousedown', onDocumentClick, false);\n\n    return () => {\n      document.removeEventListener('mousedown', onDocumentClick, false);\n    };\n  }, []);\n\n  const popoverClasses = usePortalModeClasses(triggerRef);\n\n  const triggerProps = {\n    // https://github.com/microsoft/TypeScript/issues/36659\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    ref: triggerRef as any,\n    onClick: onTriggerClick,\n    onKeyDown: onTriggerKeyDown,\n    className: clsx(styles.trigger, styles[`trigger-type-${triggerType}`]),\n  };\n\n  const popoverContent = (\n    <span\n      aria-live={dismissButton ? undefined : 'polite'}\n      aria-atomic={dismissButton ? undefined : true}\n      className={popoverClasses}\n    >\n      {visible && (\n        <PopoverContainer\n          position={position}\n          trackRef={triggerRef}\n          arrow={position => <Arrow position={position} />}\n          renderWithPortal={renderWithPortal}\n          zIndex={renderWithPortal ? 7000 : undefined}\n        >\n          <PopoverBody\n            size={size}\n            fixedWidth={fixedWidth}\n            dismissButton={dismissButton}\n            dismissAriaLabel={dismissAriaLabel}\n            header={header}\n            onDismiss={onDismiss}\n            overflowVisible=\"both\"\n          >\n            {content}\n          </PopoverBody>\n        </PopoverContainer>\n      )}\n    </span>\n  );\n\n  const mergedRef = useMergeRefs(popoverRef, __internalRootRef);\n\n  return (\n    <span\n      {...baseProps}\n      className={clsx(styles.root, baseProps.className)}\n      ref={mergedRef}\n      onMouseDown={() => {\n        // Indicate there was a click inside popover recently, including nested portals.\n        clickFrameId.current = requestAnimationFrame(() => {\n          clickFrameId.current = null;\n        });\n      }}\n    >\n      {triggerType === 'text' ? (\n        <button {...triggerProps} type=\"button\" aria-haspopup=\"dialog\" {...focusVisible}>\n          <span className={styles['trigger-inner-text']}>{children}</span>\n        </button>\n      ) : (\n        <span {...triggerProps}>{children}</span>\n      )}\n      {renderWithPortal ? <Portal>{popoverContent}</Portal> : popoverContent}\n    </span>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/popover/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, { useCallback, useEffect, useRef, useState, useImperativeHandle } from 'react';\nimport clsx from 'clsx';\n\nimport { KeyCode } from '../internal/keycode';\nimport { getBaseProps } from '../internal/base-component';\nimport useFocusVisible from '../internal/hooks/focus-visible';\n\nimport Arrow from './arrow';\nimport Portal from '../internal/components/portal';\nimport { PopoverProps } from './interfaces';\nimport PopoverContainer from './container';\nimport PopoverBody from './body';\n\nimport styles from './styles.css.js';\nimport { NonCancelableEventHandler, fireNonCancelableEvent } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\n\nexport interface InternalPopoverProps extends PopoverProps, InternalBaseComponentProps {\n  __onOpen?: NonCancelableEventHandler<null>;\n}\n\nexport interface InternalPopoverRef {\n  dismissPopover: () => void;\n}\n\nexport default React.forwardRef(InternalPopover);\n\nfunction InternalPopover(\n  {\n    position = 'right',\n    size = 'medium',\n    fixedWidth = false,\n    triggerType = 'text',\n    dismissButton = true,\n    dismissAriaLabel,\n\n    children,\n    header,\n    content,\n\n    renderWithPortal = false,\n\n    __onOpen,\n    __internalRootRef = null,\n    ...restProps\n  }: InternalPopoverProps,\n  ref: React.Ref<InternalPopoverRef>\n) {\n  const baseProps = getBaseProps(restProps);\n  const focusVisible = useFocusVisible();\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const popoverRef = useRef<HTMLSpanElement | null>(null);\n  const clickFrameId = useRef<number | null>(null);\n\n  const [visible, setVisible] = useState(false);\n\n  const onTriggerClick = useCallback(() => {\n    fireNonCancelableEvent(__onOpen);\n    setVisible(true);\n  }, [__onOpen]);\n\n  const onDismiss = useCallback(() => {\n    setVisible(false);\n  }, []);\n\n  const onTriggerKeyDown = useCallback((event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.tab || event.keyCode === KeyCode.escape) {\n      setVisible(false);\n    }\n  }, []);\n\n  useImperativeHandle(ref, () => ({\n    dismissPopover: onDismiss,\n  }));\n\n  useEffect(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n    const document = triggerRef.current.ownerDocument;\n\n    const onDocumentClick = () => {\n      // Dismiss popover unless there was a click inside within the last animation frame.\n      if (clickFrameId.current === null) {\n        setVisible(false);\n      }\n    };\n\n    // useCapture=false makes sure this listener is called after the one attached to the element.\n    // the options.capture notation is unsupported by IE.\n    document.addEventListener('mousedown', onDocumentClick, false);\n\n    return () => {\n      document.removeEventListener('mousedown', onDocumentClick, false);\n    };\n  }, []);\n\n  const popoverClasses = usePortalModeClasses(triggerRef);\n\n  const triggerProps = {\n    // https://github.com/microsoft/TypeScript/issues/36659\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    ref: triggerRef as any,\n    onClick: onTriggerClick,\n    onKeyDown: onTriggerKeyDown,\n    className: clsx(styles.trigger, styles[`trigger-type-${triggerType}`]),\n  };\n\n  const popoverContent = (\n    <span\n      aria-live={dismissButton ? undefined : 'polite'}\n      aria-atomic={dismissButton ? undefined : true}\n      className={popoverClasses}\n    >\n      {visible && (\n        <PopoverContainer\n          size={size}\n          fixedWidth={fixedWidth}\n          position={position}\n          trackRef={triggerRef}\n          arrow={position => <Arrow position={position} />}\n          renderWithPortal={renderWithPortal}\n          zIndex={renderWithPortal ? 7000 : undefined}\n        >\n          <PopoverBody\n            dismissButton={dismissButton}\n            dismissAriaLabel={dismissAriaLabel}\n            header={header}\n            onDismiss={onDismiss}\n            overflowVisible=\"both\"\n          >\n            {content}\n          </PopoverBody>\n        </PopoverContainer>\n      )}\n    </span>\n  );\n\n  const mergedRef = useMergeRefs(popoverRef, __internalRootRef);\n\n  return (\n    <span\n      {...baseProps}\n      className={clsx(styles.root, baseProps.className)}\n      ref={mergedRef}\n      onMouseDown={() => {\n        // Indicate there was a click inside popover recently, including nested portals.\n        clickFrameId.current = requestAnimationFrame(() => {\n          clickFrameId.current = null;\n        });\n      }}\n    >\n      {triggerType === 'text' ? (\n        <button {...triggerProps} type=\"button\" aria-haspopup=\"dialog\" {...focusVisible}>\n          <span className={styles['trigger-inner-text']}>{children}</span>\n        </button>\n      ) : (\n        <span {...triggerProps}>{children}</span>\n      )}\n      {renderWithPortal ? <Portal>{popoverContent}</Portal> : popoverContent}\n    </span>\n  );\n}\n"]}

package/popover/styles.css.js

@@ -1,53 +1,54 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_xjuzf_1bftv_185",
-  "arrow-outer": "awsui_arrow-outer_xjuzf_1bftv_189",
-  "arrow-inner": "awsui_arrow-inner_xjuzf_1bftv_189",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_1bftv_220",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_1bftv_220",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_1bftv_223",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_1bftv_223",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_1bftv_226",
-  "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_1bftv_226",
-  "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_1bftv_226",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_1bftv_226",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_1bftv_229",
-  "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_1bftv_229",
-  "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_1bftv_229",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_1bftv_229",
-  "body": "awsui_body_xjuzf_1bftv_325",
-  "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_1bftv_344",
-  "variant-annotation": "awsui_variant-annotation_xjuzf_1bftv_348",
-  "body-size-small": "awsui_body-size-small_xjuzf_1bftv_353",
-  "fixed-width": "awsui_fixed-width_xjuzf_1bftv_356",
-  "body-size-medium": "awsui_body-size-medium_xjuzf_1bftv_360",
-  "body-size-large": "awsui_body-size-large_xjuzf_1bftv_367",
-  "has-dismiss": "awsui_has-dismiss_xjuzf_1bftv_379",
-  "dismiss": "awsui_dismiss_xjuzf_1bftv_384",
-  "dismiss-control": "awsui_dismiss-control_xjuzf_1bftv_391",
-  "header-row": "awsui_header-row_xjuzf_1bftv_395",
-  "header": "awsui_header_xjuzf_1bftv_395",
-  "content": "awsui_content_xjuzf_1bftv_417",
-  "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_1bftv_424",
-  "container": "awsui_container_xjuzf_1bftv_436",
-  "container-arrow": "awsui_container-arrow_xjuzf_1bftv_444",
-  "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_1bftv_448",
-  "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_1bftv_448",
-  "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_1bftv_460",
-  "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_1bftv_460",
-  "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_1bftv_472",
-  "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_1bftv_472",
-  "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_1bftv_472",
-  "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_1bftv_472",
-  "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_1bftv_488",
-  "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_1bftv_492",
-  "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_1bftv_496",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_1bftv_1",
-  "refresh": "awsui_refresh_xjuzf_1bftv_614",
-  "root": "awsui_root_xjuzf_1bftv_636",
-  "trigger": "awsui_trigger_xjuzf_1bftv_648",
-  "trigger-type-text": "awsui_trigger-type-text_xjuzf_1bftv_655",
-  "trigger-inner-text": "awsui_trigger-inner-text_xjuzf_1bftv_684"
+  "arrow": "awsui_arrow_xjuzf_1aa2b_185",
+  "arrow-outer": "awsui_arrow-outer_xjuzf_1aa2b_189",
+  "arrow-inner": "awsui_arrow-inner_xjuzf_1aa2b_189",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_1aa2b_220",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_1aa2b_220",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_1aa2b_223",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_1aa2b_223",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_1aa2b_226",
+  "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_1aa2b_226",
+  "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_1aa2b_226",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_1aa2b_226",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_1aa2b_229",
+  "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_1aa2b_229",
+  "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_1aa2b_229",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_1aa2b_229",
+  "body": "awsui_body_xjuzf_1aa2b_325",
+  "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_1aa2b_339",
+  "has-dismiss": "awsui_has-dismiss_xjuzf_1aa2b_343",
+  "dismiss": "awsui_dismiss_xjuzf_1aa2b_348",
+  "dismiss-control": "awsui_dismiss-control_xjuzf_1aa2b_355",
+  "header-row": "awsui_header-row_xjuzf_1aa2b_359",
+  "header": "awsui_header_xjuzf_1aa2b_359",
+  "content": "awsui_content_xjuzf_1aa2b_381",
+  "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_1aa2b_388",
+  "container": "awsui_container_xjuzf_1aa2b_484",
+  "container-body": "awsui_container-body_xjuzf_1aa2b_492",
+  "container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_1aa2b_507",
+  "container-body-size-small": "awsui_container-body-size-small_xjuzf_1aa2b_512",
+  "fixed-width": "awsui_fixed-width_xjuzf_1aa2b_515",
+  "container-body-size-medium": "awsui_container-body-size-medium_xjuzf_1aa2b_519",
+  "container-body-size-large": "awsui_container-body-size-large_xjuzf_1aa2b_526",
+  "container-arrow": "awsui_container-arrow_xjuzf_1aa2b_538",
+  "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_1aa2b_542",
+  "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_1aa2b_542",
+  "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_1aa2b_554",
+  "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_1aa2b_554",
+  "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_1aa2b_566",
+  "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_1aa2b_566",
+  "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_1aa2b_566",
+  "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_1aa2b_566",
+  "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_1aa2b_582",
+  "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_1aa2b_586",
+  "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_1aa2b_590",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_1aa2b_1",
+  "refresh": "awsui_refresh_xjuzf_1aa2b_708",
+  "root": "awsui_root_xjuzf_1aa2b_730",
+  "trigger": "awsui_trigger_xjuzf_1aa2b_742",
+  "trigger-type-text": "awsui_trigger-type-text_xjuzf_1aa2b_749",
+  "trigger-inner-text": "awsui_trigger-inner-text_xjuzf_1aa2b_778"
 };