@cloudscape-design/components-themeable 3.0.624 → 3.0.626

package/lib/internal/template/popover/styles.selectors.js

@@ -2,55 +2,55 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "arrow": "awsui_arrow_xjuzf_1wdzy_197",
-  "arrow-outer": "awsui_arrow-outer_xjuzf_1wdzy_201",
-  "arrow-inner": "awsui_arrow-inner_xjuzf_1wdzy_201",
-  "refresh": "awsui_refresh_xjuzf_1wdzy_231",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_1wdzy_241",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_1wdzy_241",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_1wdzy_244",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_1wdzy_244",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_1wdzy_247",
-  "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_1wdzy_247",
-  "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_1wdzy_247",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_1wdzy_247",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_1wdzy_250",
-  "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_1wdzy_250",
-  "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_1wdzy_250",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_1wdzy_250",
-  "body": "awsui_body_xjuzf_1wdzy_352",
-  "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_1wdzy_391",
-  "has-dismiss": "awsui_has-dismiss_xjuzf_1wdzy_395",
-  "dismiss": "awsui_dismiss_xjuzf_1wdzy_400",
-  "dismiss-control": "awsui_dismiss-control_xjuzf_1wdzy_408",
-  "header-row": "awsui_header-row_xjuzf_1wdzy_412",
-  "header": "awsui_header_xjuzf_1wdzy_412",
-  "content": "awsui_content_xjuzf_1wdzy_438",
-  "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_1wdzy_446",
-  "container": "awsui_container_xjuzf_1wdzy_548",
-  "container-body": "awsui_container-body_xjuzf_1wdzy_556",
-  "container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_1wdzy_599",
-  "container-body-size-small": "awsui_container-body-size-small_xjuzf_1wdzy_604",
-  "fixed-width": "awsui_fixed-width_xjuzf_1wdzy_607",
-  "container-body-size-medium": "awsui_container-body-size-medium_xjuzf_1wdzy_611",
-  "container-body-size-large": "awsui_container-body-size-large_xjuzf_1wdzy_618",
-  "container-arrow": "awsui_container-arrow_xjuzf_1wdzy_630",
-  "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_1wdzy_634",
-  "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_1wdzy_634",
-  "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_1wdzy_646",
-  "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_1wdzy_646",
-  "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_1wdzy_658",
-  "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_1wdzy_658",
-  "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_1wdzy_658",
-  "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_1wdzy_658",
-  "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_1wdzy_674",
-  "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_1wdzy_678",
-  "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_1wdzy_682",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_1wdzy_1",
-  "root": "awsui_root_xjuzf_1wdzy_828",
-  "trigger": "awsui_trigger_xjuzf_1wdzy_864",
-  "trigger-type-text": "awsui_trigger-type-text_xjuzf_1wdzy_871",
-  "trigger-inner-text": "awsui_trigger-inner-text_xjuzf_1wdzy_906",
-  "popover-inline-content": "awsui_popover-inline-content_xjuzf_1wdzy_910"
+  "arrow": "awsui_arrow_xjuzf_2nwcz_197",
+  "arrow-outer": "awsui_arrow-outer_xjuzf_2nwcz_201",
+  "arrow-inner": "awsui_arrow-inner_xjuzf_2nwcz_201",
+  "refresh": "awsui_refresh_xjuzf_2nwcz_235",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_2nwcz_245",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_2nwcz_245",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_2nwcz_248",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_2nwcz_248",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_2nwcz_251",
+  "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_2nwcz_251",
+  "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_2nwcz_251",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_2nwcz_251",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_2nwcz_254",
+  "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_2nwcz_254",
+  "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_2nwcz_254",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_2nwcz_254",
+  "body": "awsui_body_xjuzf_2nwcz_356",
+  "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_2nwcz_395",
+  "has-dismiss": "awsui_has-dismiss_xjuzf_2nwcz_399",
+  "dismiss": "awsui_dismiss_xjuzf_2nwcz_404",
+  "dismiss-control": "awsui_dismiss-control_xjuzf_2nwcz_412",
+  "header-row": "awsui_header-row_xjuzf_2nwcz_416",
+  "header": "awsui_header_xjuzf_2nwcz_416",
+  "content": "awsui_content_xjuzf_2nwcz_442",
+  "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_2nwcz_450",
+  "container": "awsui_container_xjuzf_2nwcz_552",
+  "container-body": "awsui_container-body_xjuzf_2nwcz_560",
+  "container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_2nwcz_603",
+  "container-body-size-small": "awsui_container-body-size-small_xjuzf_2nwcz_608",
+  "fixed-width": "awsui_fixed-width_xjuzf_2nwcz_611",
+  "container-body-size-medium": "awsui_container-body-size-medium_xjuzf_2nwcz_615",
+  "container-body-size-large": "awsui_container-body-size-large_xjuzf_2nwcz_622",
+  "container-arrow": "awsui_container-arrow_xjuzf_2nwcz_634",
+  "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_2nwcz_638",
+  "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_2nwcz_638",
+  "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_2nwcz_654",
+  "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_2nwcz_654",
+  "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_2nwcz_670",
+  "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_2nwcz_670",
+  "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_2nwcz_670",
+  "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_2nwcz_670",
+  "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_2nwcz_686",
+  "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_2nwcz_690",
+  "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_2nwcz_694",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_2nwcz_1",
+  "root": "awsui_root_xjuzf_2nwcz_840",
+  "trigger": "awsui_trigger_xjuzf_2nwcz_876",
+  "trigger-type-text": "awsui_trigger-type-text_xjuzf_2nwcz_883",
+  "trigger-inner-text": "awsui_trigger-inner-text_xjuzf_2nwcz_918",
+  "popover-inline-content": "awsui_popover-inline-content_xjuzf_2nwcz_922"
 };
   

package/lib/internal/template/popover/use-popover-position.d.ts

@@ -4,7 +4,7 @@ export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trac
     popoverRef: React.RefObject<HTMLDivElement | null>;
     bodyRef: React.RefObject<HTMLDivElement | null>;
     arrowRef: React.RefObject<HTMLDivElement | null>;
-    trackRef: React.RefObject<Element | null>;
+    trackRef: React.RefObject<HTMLElement | SVGElement | null>;
     contentRef: React.RefObject<HTMLDivElement | null>;
     allowScrollToFit?: boolean;
     allowVerticalOverflow?: boolean;

package/lib/internal/template/popover/use-popover-position.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-popover-position.d.ts","sourceRoot":"","sources":["../../../src/popover/use-popover-position.ts"],"names":[],"mappings":"AAGA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAUnF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,GACb,EAAE;IACD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,EAAE,YAAY,CAAC,QAAQ,CAAC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;;;;qDAMyC,IAAI;EAoI7C"}
+{"version":3,"file":"use-popover-position.d.ts","sourceRoot":"","sources":["../../../src/popover/use-popover-position.ts"],"names":[],"mappings":"AAGA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAWnF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,GACb,EAAE;IACD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC,CAAC;IAC3D,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,EAAE,YAAY,CAAC,QAAQ,CAAC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;;;;qDAMyC,IAAI;EAsI7C"}

package/lib/internal/template/popover/use-popover-position.js

@@ -5,6 +5,7 @@ import { calculatePosition, getDimensions, getOffsetDimensions } from './utils/p
 import { nodeContains } from '@cloudscape-design/component-toolkit/dom';
 import { calculateScroll, getFirstScrollableParent, scrollRectangleIntoView, } from '../internal/utils/scrollable-containers';
 import { getContainingBlock } from '../internal/utils/dom';
+import { getLogicalBoundingClientRect } from '../internal/direction';
 export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trackRef, contentRef, allowScrollToFit, allowVerticalOverflow, preferredPosition, renderWithPortal, keepPosition, }) {
     const previousInternalPositionRef = useRef(null);
     const [popoverStyle, setPopoverStyle] = useState({});
@@ -31,26 +32,26 @@ export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trac
         // 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.
-        const prevTop = popover.style.top;
-        const prevLeft = popover.style.left;
-        popover.style.top = '0';
-        popover.style.left = '0';
+        const prevInsetBlockStart = popover.style.insetBlockStart;
+        const prevInsetInlineStart = popover.style.insetInlineStart;
+        popover.style.insetBlockStart = '0';
+        popover.style.insetInlineStart = '0';
         // Imperatively remove body styles that can remain from the previous computation.
-        body.style.maxHeight = '';
+        body.style.maxBlockSize = '';
         body.style.overflowX = '';
         body.style.overflowY = '';
         // Get rects representing key elements
         // Use getComputedStyle for arrowRect to avoid modifications made by transform
         const viewportRect = getViewportRect(document.defaultView);
-        const trackRect = track.getBoundingClientRect();
+        const trackRect = getLogicalBoundingClientRect(track);
         const arrowRect = getDimensions(arrow);
         const containingBlock = getContainingBlock(popover);
-        const containingBlockRect = containingBlock ? containingBlock.getBoundingClientRect() : viewportRect;
+        const containingBlockRect = containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect;
         const bodyBorderWidth = getBorderWidth(body);
-        const contentRect = contentRef.current.getBoundingClientRect();
+        const contentRect = getLogicalBoundingClientRect(contentRef.current);
         const contentBoundingBox = {
-            width: contentRect.width + 2 * bodyBorderWidth,
-            height: contentRect.height + 2 * bodyBorderWidth,
+            inlineSize: contentRect.inlineSize + 2 * bodyBorderWidth,
+            blockSize: contentRect.blockSize + 2 * bodyBorderWidth,
         };
         // When keepPosition is true and the recalculation was triggered by a resize of the popover content,
         // we maintain the previously defined internal position,
@@ -75,11 +76,11 @@ export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trac
         // and use that to recalculate the new popover position.
         const trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));
         // Bring back the container to its original position to prevent any flashing.
-        popover.style.top = prevTop;
-        popover.style.left = prevLeft;
+        popover.style.insetBlockStart = prevInsetBlockStart;
+        popover.style.insetInlineStart = prevInsetInlineStart;
         // Allow popover body to scroll if can't fit the popover into the container/viewport otherwise.
         if (scrollable) {
-            body.style.maxHeight = rect.height + 'px';
+            body.style.maxBlockSize = rect.blockSize + 'px';
             body.style.overflowX = 'hidden';
             body.style.overflowY = 'auto';
         }
@@ -88,18 +89,20 @@ export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trac
         setInternalPosition(newInternalPosition);
         const shouldScroll = allowScrollToFit && !shouldKeepPosition;
         // Position the popover
-        const top = shouldScroll ? popoverOffset.top + calculateScroll(rect) : popoverOffset.top;
-        setPopoverStyle({ top, left: popoverOffset.left });
+        const insetBlockStart = shouldScroll
+            ? popoverOffset.insetBlockStart + calculateScroll(rect)
+            : popoverOffset.insetBlockStart;
+        setPopoverStyle({ insetBlockStart, insetInlineStart: popoverOffset.insetInlineStart });
         // Scroll if necessary
         if (shouldScroll) {
             const scrollableParent = getFirstScrollableParent(popover);
             scrollRectangleIntoView(rect, scrollableParent);
         }
         positionHandlerRef.current = () => {
-            const newTrackOffset = toRelativePosition(track.getBoundingClientRect(), containingBlock ? containingBlock.getBoundingClientRect() : viewportRect);
+            const newTrackOffset = toRelativePosition(getLogicalBoundingClientRect(track), containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect);
             setPopoverStyle({
-                top: newTrackOffset.top + trackRelativeOffset.top,
-                left: newTrackOffset.left + trackRelativeOffset.left,
+                insetBlockStart: newTrackOffset.insetBlockStart + trackRelativeOffset.insetBlockStart,
+                insetInlineStart: newTrackOffset.insetInlineStart + trackRelativeOffset.insetInlineStart,
             });
         };
     }, [
@@ -124,8 +127,8 @@ function getBorderWidth(element) {
  */
 function toRelativePosition(element, parent) {
     return {
-        top: element.top - parent.top,
-        left: element.left - parent.left,
+        insetBlockStart: element.insetBlockStart - parent.insetBlockStart,
+        insetInlineStart: element.insetInlineStart - parent.insetInlineStart,
     };
 }
 /**
@@ -133,19 +136,19 @@ function toRelativePosition(element, parent) {
  */
 function getViewportRect(window) {
     return {
-        top: 0,
-        left: 0,
-        width: window.innerWidth,
-        height: window.innerHeight,
+        insetBlockStart: 0,
+        insetInlineStart: 0,
+        inlineSize: window.innerWidth,
+        blockSize: window.innerHeight,
     };
 }
 function getDocumentRect(document) {
-    const { top, left } = document.documentElement.getBoundingClientRect();
+    const { insetBlockStart, insetInlineStart } = getLogicalBoundingClientRect(document.documentElement);
     return {
-        top,
-        left,
-        width: document.documentElement.scrollWidth,
-        height: document.documentElement.scrollHeight,
+        insetBlockStart,
+        insetInlineStart,
+        inlineSize: document.documentElement.scrollWidth,
+        blockSize: document.documentElement.scrollHeight,
     };
 }
 //# sourceMappingURL=use-popover-position.js.map

package/lib/internal/template/popover/use-popover-position.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-popover-position.js","sourceRoot":"","sources":["../../../src/popover/use-popover-position.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\n\nimport React, { useCallback, useRef, useState } from 'react';\nimport { BoundingBox, InternalPosition, Offset, PopoverProps } from './interfaces';\nimport { calculatePosition, getDimensions, getOffsetDimensions } from './utils/positions';\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport {\n  calculateScroll,\n  getFirstScrollableParent,\n  scrollRectangleIntoView,\n} from '../internal/utils/scrollable-containers';\nimport { getContainingBlock } from '../internal/utils/dom';\n\nexport default function usePopoverPosition({\n  popoverRef,\n  bodyRef,\n  arrowRef,\n  trackRef,\n  contentRef,\n  allowScrollToFit,\n  allowVerticalOverflow,\n  preferredPosition,\n  renderWithPortal,\n  keepPosition,\n}: {\n  popoverRef: React.RefObject<HTMLDivElement | null>;\n  bodyRef: React.RefObject<HTMLDivElement | null>;\n  arrowRef: React.RefObject<HTMLDivElement | null>;\n  trackRef: React.RefObject<Element | null>;\n  contentRef: React.RefObject<HTMLDivElement | null>;\n  allowScrollToFit?: boolean;\n  allowVerticalOverflow?: boolean;\n  preferredPosition: PopoverProps.Position;\n  renderWithPortal?: boolean;\n  keepPosition?: boolean;\n}) {\n  const previousInternalPositionRef = useRef<InternalPosition | null>(null);\n  const [popoverStyle, setPopoverStyle] = useState<Partial<Offset>>({});\n  const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);\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  const updatePositionHandler = useCallback(\n    (onContentResize = false) => {\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      const { offsetWidth, offsetHeight } = getOffsetDimensions(popover);\n      if (offsetWidth === 0 || 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\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 = getDimensions(arrow);\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      // When keepPosition is true and the recalculation was triggered by a resize of the popover content,\n      // we maintain the previously defined internal position,\n      // but we still call calculatePosition to know if the popover should be scrollable.\n      const shouldKeepPosition = keepPosition && onContentResize && !!previousInternalPositionRef.current;\n      const fixedInternalPosition = (shouldKeepPosition && previousInternalPositionRef.current) ?? undefined;\n\n      // Calculate the arrow direction and viewport-relative position of the popover.\n      const {\n        scrollable,\n        internalPosition: newInternalPosition,\n        rect,\n      } = calculatePosition({\n        preferredPosition,\n        fixedInternalPosition,\n        trigger: trackRect,\n        arrow: arrowRect,\n        body: contentBoundingBox,\n        container: containingBlock ? containingBlockRect : getDocumentRect(document),\n        viewport: viewportRect,\n        renderWithPortal,\n        allowVerticalOverflow,\n      });\n\n      // Get the position of the popover relative to the offset parent.\n      const popoverOffset = toRelativePosition(rect, 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 = rect.height + 'px';\n        body.style.overflowX = 'hidden';\n        body.style.overflowY = 'auto';\n      }\n\n      // Remember the internal position in case we want to keep it later.\n      previousInternalPositionRef.current = newInternalPosition;\n      setInternalPosition(newInternalPosition);\n\n      const shouldScroll = allowScrollToFit && !shouldKeepPosition;\n\n      // Position the popover\n      const top = shouldScroll ? popoverOffset.top + calculateScroll(rect) : popoverOffset.top;\n      setPopoverStyle({ top, left: popoverOffset.left });\n\n      // Scroll if necessary\n      if (shouldScroll) {\n        const scrollableParent = getFirstScrollableParent(popover);\n        scrollRectangleIntoView(rect, scrollableParent);\n      }\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    },\n    [\n      trackRef,\n      popoverRef,\n      bodyRef,\n      contentRef,\n      arrowRef,\n      keepPosition,\n      allowScrollToFit,\n      preferredPosition,\n      renderWithPortal,\n      allowVerticalOverflow,\n    ]\n  );\n  return { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef };\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 BoundingBox that represents the visible viewport.\n */\nfunction getViewportRect(window: Window): BoundingBox {\n  return {\n    top: 0,\n    left: 0,\n    width: window.innerWidth,\n    height: window.innerHeight,\n  };\n}\n\nfunction getDocumentRect(document: Document): BoundingBox {\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":"use-popover-position.js","sourceRoot":"","sources":["../../../src/popover/use-popover-position.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\n\nimport React, { useCallback, useRef, useState } from 'react';\nimport { BoundingBox, InternalPosition, Offset, PopoverProps } from './interfaces';\nimport { calculatePosition, getDimensions, getOffsetDimensions } from './utils/positions';\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport {\n  calculateScroll,\n  getFirstScrollableParent,\n  scrollRectangleIntoView,\n} from '../internal/utils/scrollable-containers';\nimport { getContainingBlock } from '../internal/utils/dom';\nimport { getLogicalBoundingClientRect } from '../internal/direction';\n\nexport default function usePopoverPosition({\n  popoverRef,\n  bodyRef,\n  arrowRef,\n  trackRef,\n  contentRef,\n  allowScrollToFit,\n  allowVerticalOverflow,\n  preferredPosition,\n  renderWithPortal,\n  keepPosition,\n}: {\n  popoverRef: React.RefObject<HTMLDivElement | null>;\n  bodyRef: React.RefObject<HTMLDivElement | null>;\n  arrowRef: React.RefObject<HTMLDivElement | null>;\n  trackRef: React.RefObject<HTMLElement | SVGElement | null>;\n  contentRef: React.RefObject<HTMLDivElement | null>;\n  allowScrollToFit?: boolean;\n  allowVerticalOverflow?: boolean;\n  preferredPosition: PopoverProps.Position;\n  renderWithPortal?: boolean;\n  keepPosition?: boolean;\n}) {\n  const previousInternalPositionRef = useRef<InternalPosition | null>(null);\n  const [popoverStyle, setPopoverStyle] = useState<Partial<Offset>>({});\n  const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);\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  const updatePositionHandler = useCallback(\n    (onContentResize = false) => {\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      const { offsetWidth, offsetHeight } = getOffsetDimensions(popover);\n      if (offsetWidth === 0 || 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 prevInsetBlockStart = popover.style.insetBlockStart;\n      const prevInsetInlineStart = popover.style.insetInlineStart;\n\n      popover.style.insetBlockStart = '0';\n      popover.style.insetInlineStart = '0';\n      // Imperatively remove body styles that can remain from the previous computation.\n      body.style.maxBlockSize = '';\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 = getLogicalBoundingClientRect(track);\n      const arrowRect = getDimensions(arrow);\n      const containingBlock = getContainingBlock(popover);\n      const containingBlockRect = containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect;\n\n      const bodyBorderWidth = getBorderWidth(body);\n      const contentRect = getLogicalBoundingClientRect(contentRef.current);\n      const contentBoundingBox = {\n        inlineSize: contentRect.inlineSize + 2 * bodyBorderWidth,\n        blockSize: contentRect.blockSize + 2 * bodyBorderWidth,\n      };\n\n      // When keepPosition is true and the recalculation was triggered by a resize of the popover content,\n      // we maintain the previously defined internal position,\n      // but we still call calculatePosition to know if the popover should be scrollable.\n      const shouldKeepPosition = keepPosition && onContentResize && !!previousInternalPositionRef.current;\n      const fixedInternalPosition = (shouldKeepPosition && previousInternalPositionRef.current) ?? undefined;\n\n      // Calculate the arrow direction and viewport-relative position of the popover.\n      const {\n        scrollable,\n        internalPosition: newInternalPosition,\n        rect,\n      } = calculatePosition({\n        preferredPosition,\n        fixedInternalPosition,\n        trigger: trackRect,\n        arrow: arrowRect,\n        body: contentBoundingBox,\n        container: containingBlock ? containingBlockRect : getDocumentRect(document),\n        viewport: viewportRect,\n        renderWithPortal,\n        allowVerticalOverflow,\n      });\n\n      // Get the position of the popover relative to the offset parent.\n      const popoverOffset = toRelativePosition(rect, 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.insetBlockStart = prevInsetBlockStart;\n      popover.style.insetInlineStart = prevInsetInlineStart;\n\n      // Allow popover body to scroll if can't fit the popover into the container/viewport otherwise.\n      if (scrollable) {\n        body.style.maxBlockSize = rect.blockSize + 'px';\n        body.style.overflowX = 'hidden';\n        body.style.overflowY = 'auto';\n      }\n\n      // Remember the internal position in case we want to keep it later.\n      previousInternalPositionRef.current = newInternalPosition;\n      setInternalPosition(newInternalPosition);\n\n      const shouldScroll = allowScrollToFit && !shouldKeepPosition;\n\n      // Position the popover\n      const insetBlockStart = shouldScroll\n        ? popoverOffset.insetBlockStart + calculateScroll(rect)\n        : popoverOffset.insetBlockStart;\n      setPopoverStyle({ insetBlockStart, insetInlineStart: popoverOffset.insetInlineStart });\n\n      // Scroll if necessary\n      if (shouldScroll) {\n        const scrollableParent = getFirstScrollableParent(popover);\n        scrollRectangleIntoView(rect, scrollableParent);\n      }\n\n      positionHandlerRef.current = () => {\n        const newTrackOffset = toRelativePosition(\n          getLogicalBoundingClientRect(track),\n          containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect\n        );\n        setPopoverStyle({\n          insetBlockStart: newTrackOffset.insetBlockStart + trackRelativeOffset.insetBlockStart,\n          insetInlineStart: newTrackOffset.insetInlineStart + trackRelativeOffset.insetInlineStart,\n        });\n      };\n    },\n    [\n      trackRef,\n      popoverRef,\n      bodyRef,\n      contentRef,\n      arrowRef,\n      keepPosition,\n      allowScrollToFit,\n      preferredPosition,\n      renderWithPortal,\n      allowVerticalOverflow,\n    ]\n  );\n  return { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef };\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    insetBlockStart: element.insetBlockStart - parent.insetBlockStart,\n    insetInlineStart: element.insetInlineStart - parent.insetInlineStart,\n  };\n}\n\n/**\n * Get a BoundingBox that represents the visible viewport.\n */\nfunction getViewportRect(window: Window): BoundingBox {\n  return {\n    insetBlockStart: 0,\n    insetInlineStart: 0,\n    inlineSize: window.innerWidth,\n    blockSize: window.innerHeight,\n  };\n}\n\nfunction getDocumentRect(document: Document): BoundingBox {\n  const { insetBlockStart, insetInlineStart } = getLogicalBoundingClientRect(document.documentElement);\n\n  return {\n    insetBlockStart,\n    insetInlineStart,\n    inlineSize: document.documentElement.scrollWidth,\n    blockSize: document.documentElement.scrollHeight,\n  };\n}\n"]}

package/lib/internal/template/popover/utils/positions.d.ts

@@ -28,8 +28,8 @@ export declare function getOffsetDimensions(element: HTMLElement): {
     offsetWidth: number;
 };
 export declare function getDimensions(element: HTMLElement): {
-    width: number;
-    height: number;
+    inlineSize: number;
+    blockSize: number;
 };
 export {};
 //# sourceMappingURL=positions.d.ts.map

package/lib/internal/template/popover/utils/positions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"positions.d.ts","sourceRoot":"","sources":["../../../../src/popover/utils/positions.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGxF,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,IAAI,EAAE,WAAW,CAAC;CACnB;AAUD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,gBAAgB,EAAE,CAiD9E,CAAC;AA0IF;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,WAAW,EAAE,GAAG,MAAM,GAAG,IAAI,CAG5E;AAID;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,iBAAiB,EACjB,qBAAqB,EACrB,OAAO,EACP,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EAER,gBAAgB,EAChB,qBAAqB,GACtB,EAAE;IACD,iBAAiB,EAAE,YAAY,CAAC,QAAQ,CAAC;IACzC,qBAAqB,CAAC,EAAE,gBAAgB,CAAC;IACzC,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,WAAW,CAAC;IACvB,QAAQ,EAAE,WAAW,CAAC;IAEtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,GAAG,kBAAkB,CAmDrB;AAmBD,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW;;;EAEvD;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,WAAW;;;EAMjD"}
+{"version":3,"file":"positions.d.ts","sourceRoot":"","sources":["../../../../src/popover/utils/positions.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGxF,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,IAAI,EAAE,WAAW,CAAC;CACnB;AAUD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,gBAAgB,EAAE,CAiD9E,CAAC;AAqJF;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,WAAW,EAAE,GAAG,MAAM,GAAG,IAAI,CAG5E;AAID;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,iBAAiB,EACjB,qBAAqB,EACrB,OAAO,EACP,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EAER,gBAAgB,EAChB,qBAAqB,GACtB,EAAE;IACD,iBAAiB,EAAE,YAAY,CAAC,QAAQ,CAAC;IACzC,qBAAqB,CAAC,EAAE,gBAAgB,CAAC;IACzC,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,WAAW,CAAC;IACvB,QAAQ,EAAE,WAAW,CAAC;IAEtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,GAAG,kBAAkB,CAoDrB;AAmBD,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW;;;EAEvD;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,WAAW;;;EAMjD"}

package/lib/internal/template/popover/utils/positions.js

@@ -52,109 +52,109 @@ export const PRIORITY_MAPPING = {
 const RECTANGLE_CALCULATIONS = {
     'top-center': ({ body, trigger, arrow }) => {
         return {
-            top: trigger.top - body.height - arrow.height,
-            left: trigger.left + trigger.width / 2 - body.width / 2,
-            width: body.width,
-            height: body.height,
+            insetBlockStart: trigger.insetBlockStart - body.blockSize - arrow.blockSize,
+            insetInlineStart: trigger.insetInlineStart + trigger.inlineSize / 2 - body.inlineSize / 2,
+            inlineSize: body.inlineSize,
+            blockSize: body.blockSize,
         };
     },
     'top-right': ({ body, trigger, arrow }) => {
         return {
-            top: trigger.top - body.height - arrow.height,
-            left: trigger.left + trigger.width / 2 - ARROW_OFFSET - arrow.width / 2,
-            width: body.width,
-            height: body.height,
+            insetBlockStart: trigger.insetBlockStart - body.blockSize - arrow.blockSize,
+            insetInlineStart: trigger.insetInlineStart + trigger.inlineSize / 2 - ARROW_OFFSET - arrow.inlineSize / 2,
+            inlineSize: body.inlineSize,
+            blockSize: body.blockSize,
         };
     },
     'top-left': ({ body, trigger, arrow }) => {
         return {
-            top: trigger.top - body.height - arrow.height,
-            left: trigger.left + trigger.width / 2 + ARROW_OFFSET + arrow.width / 2 - body.width,
-            width: body.width,
-            height: body.height,
+            insetBlockStart: trigger.insetBlockStart - body.blockSize - arrow.blockSize,
+            insetInlineStart: trigger.insetInlineStart + trigger.inlineSize / 2 + ARROW_OFFSET + arrow.inlineSize / 2 - body.inlineSize,
+            inlineSize: body.inlineSize,
+            blockSize: body.blockSize,
         };
     },
     'bottom-center': ({ body, trigger, arrow }) => {
         return {
-            top: trigger.top + trigger.height + arrow.height,
-            left: trigger.left + trigger.width / 2 - body.width / 2,
-            width: body.width,
-            height: body.height,
+            insetBlockStart: trigger.insetBlockStart + trigger.blockSize + arrow.blockSize,
+            insetInlineStart: trigger.insetInlineStart + trigger.inlineSize / 2 - body.inlineSize / 2,
+            inlineSize: body.inlineSize,
+            blockSize: body.blockSize,
         };
     },
     'bottom-right': ({ body, trigger, arrow }) => {
         return {
-            top: trigger.top + trigger.height + arrow.height,
-            left: trigger.left + trigger.width / 2 - ARROW_OFFSET - arrow.width / 2,
-            width: body.width,
-            height: body.height,
+            insetBlockStart: trigger.insetBlockStart + trigger.blockSize + arrow.blockSize,
+            insetInlineStart: trigger.insetInlineStart + trigger.inlineSize / 2 - ARROW_OFFSET - arrow.inlineSize / 2,
+            inlineSize: body.inlineSize,
+            blockSize: body.blockSize,
         };
     },
     'bottom-left': ({ body, trigger, arrow }) => {
         return {
-            top: trigger.top + trigger.height + arrow.height,
-            left: trigger.left + trigger.width / 2 + ARROW_OFFSET + arrow.width / 2 - body.width,
-            width: body.width,
-            height: body.height,
+            insetBlockStart: trigger.insetBlockStart + trigger.blockSize + arrow.blockSize,
+            insetInlineStart: trigger.insetInlineStart + trigger.inlineSize / 2 + ARROW_OFFSET + arrow.inlineSize / 2 - body.inlineSize,
+            inlineSize: body.inlineSize,
+            blockSize: body.blockSize,
         };
     },
     'right-top': ({ body, trigger, arrow }) => {
         return {
-            top: trigger.top + trigger.height / 2 - ARROW_OFFSET - arrow.height,
-            left: trigger.left + trigger.width + arrow.height,
-            width: body.width,
-            height: body.height,
+            insetBlockStart: trigger.insetBlockStart + trigger.blockSize / 2 - ARROW_OFFSET - arrow.blockSize,
+            insetInlineStart: trigger.insetInlineStart + trigger.inlineSize + arrow.blockSize,
+            inlineSize: body.inlineSize,
+            blockSize: body.blockSize,
         };
     },
     'right-bottom': ({ body, trigger, arrow }) => {
         return {
-            top: trigger.top + trigger.height / 2 - body.height + ARROW_OFFSET + arrow.height,
-            left: trigger.left + trigger.width + arrow.height,
-            width: body.width,
-            height: body.height,
+            insetBlockStart: trigger.insetBlockStart + trigger.blockSize / 2 - body.blockSize + ARROW_OFFSET + arrow.blockSize,
+            insetInlineStart: trigger.insetInlineStart + trigger.inlineSize + arrow.blockSize,
+            inlineSize: body.inlineSize,
+            blockSize: body.blockSize,
         };
     },
     'left-top': ({ body, trigger, arrow }) => {
         return {
-            top: trigger.top + trigger.height / 2 - ARROW_OFFSET - arrow.height,
-            left: trigger.left - body.width - arrow.height,
-            width: body.width,
-            height: body.height,
+            insetBlockStart: trigger.insetBlockStart + trigger.blockSize / 2 - ARROW_OFFSET - arrow.blockSize,
+            insetInlineStart: trigger.insetInlineStart - body.inlineSize - arrow.blockSize,
+            inlineSize: body.inlineSize,
+            blockSize: body.blockSize,
         };
     },
     'left-bottom': ({ body, trigger, arrow }) => {
         return {
-            top: trigger.top + trigger.height / 2 - body.height + ARROW_OFFSET + arrow.height,
-            left: trigger.left - body.width - arrow.height,
-            width: body.width,
-            height: body.height,
+            insetBlockStart: trigger.insetBlockStart + trigger.blockSize / 2 - body.blockSize + ARROW_OFFSET + arrow.blockSize,
+            insetInlineStart: trigger.insetInlineStart - body.inlineSize - arrow.blockSize,
+            inlineSize: body.inlineSize,
+            blockSize: body.blockSize,
         };
     },
 };
 function fitIntoContainer(inner, outer) {
-    let { left, width, top, height } = inner;
+    let { insetInlineStart, inlineSize, insetBlockStart, blockSize } = inner;
     // Adjust left boundary.
-    if (left < outer.left) {
-        width = left + width - outer.left;
-        left = outer.left;
+    if (insetInlineStart < outer.insetInlineStart) {
+        inlineSize = insetInlineStart + inlineSize - outer.insetInlineStart;
+        insetInlineStart = outer.insetInlineStart;
     }
     // Adjust right boundary.
-    else if (left + width > outer.left + outer.width) {
-        width = outer.left + outer.width - left;
+    else if (insetInlineStart + inlineSize > outer.insetInlineStart + outer.inlineSize) {
+        inlineSize = outer.insetInlineStart + outer.inlineSize - insetInlineStart;
     }
     // Adjust top boundary.
-    if (top < outer.top) {
-        height = top + height - outer.top;
-        top = outer.top;
+    if (insetBlockStart < outer.insetBlockStart) {
+        blockSize = insetBlockStart + blockSize - outer.insetBlockStart;
+        insetBlockStart = outer.insetBlockStart;
     }
     // Adjust bottom boundary.
-    else if (top + height > outer.top + outer.height) {
-        height = outer.top + outer.height - top;
+    else if (insetBlockStart + blockSize > outer.insetBlockStart + outer.blockSize) {
+        blockSize = outer.insetBlockStart + outer.blockSize - insetBlockStart;
     }
-    return { left, width, top, height };
+    return { insetInlineStart, inlineSize, insetBlockStart, blockSize };
 }
 function getTallestRect(rect1, rect2) {
-    return rect1.height >= rect2.height ? rect1 : rect2;
+    return rect1.blockSize >= rect2.blockSize ? rect1 : rect2;
 }
 function getIntersection(rectangles) {
     let boundingBox = null;
@@ -163,18 +163,18 @@ function getIntersection(rectangles) {
             boundingBox = currentRect;
             continue;
         }
-        const left = Math.max(boundingBox.left, currentRect.left);
-        const top = Math.max(boundingBox.top, currentRect.top);
-        const right = Math.min(boundingBox.left + boundingBox.width, currentRect.left + currentRect.width);
-        const bottom = Math.min(boundingBox.top + boundingBox.height, currentRect.top + currentRect.height);
-        if (right < left || bottom < top) {
+        const insetInlineStart = Math.max(boundingBox.insetInlineStart, currentRect.insetInlineStart);
+        const insetBlockStart = Math.max(boundingBox.insetBlockStart, currentRect.insetBlockStart);
+        const insetInlineEnd = Math.min(boundingBox.insetInlineStart + boundingBox.inlineSize, currentRect.insetInlineStart + currentRect.inlineSize);
+        const insetBlockEnd = Math.min(boundingBox.insetBlockStart + boundingBox.blockSize, currentRect.insetBlockStart + currentRect.blockSize);
+        if (insetInlineEnd < insetInlineStart || insetBlockEnd < insetBlockStart) {
             return null;
         }
         boundingBox = {
-            left,
-            top,
-            width: right - left,
-            height: bottom - top,
+            insetInlineStart,
+            insetBlockStart,
+            inlineSize: insetInlineEnd - insetInlineStart,
+            blockSize: insetBlockEnd - insetBlockStart,
         };
     }
     return boundingBox;
@@ -184,7 +184,7 @@ function getIntersection(rectangles) {
  */
 export function intersectRectangles(rectangles) {
     const boundingBox = getIntersection(rectangles);
-    return boundingBox && boundingBox.height * boundingBox.width;
+    return boundingBox && boundingBox.blockSize * boundingBox.inlineSize;
 }
 /**
  * A functions that returns the correct popover position based on screen dimensions.
@@ -203,7 +203,7 @@ renderWithPortal, allowVerticalOverflow, }) {
         const visibleArea = renderWithPortal
             ? getIntersection([rect, viewport])
             : getIntersection([rect, viewport, container]);
-        const fitsWithoutOverflow = visibleArea && visibleArea.width === body.width && visibleArea.height === body.height;
+        const fitsWithoutOverflow = visibleArea && visibleArea.inlineSize === body.inlineSize && visibleArea.blockSize === body.blockSize;
         if (fitsWithoutOverflow) {
             return { internalPosition, rect };
         }
@@ -220,15 +220,15 @@ renderWithPortal, allowVerticalOverflow, }) {
     const tallestBoundingContainer = getTallestRect(viewport, container);
     const boundingContainer = allowVerticalOverflow && isTopOrBottom(internalPosition)
         ? {
-            top: tallestBoundingContainer.top,
-            height: tallestBoundingContainer.height,
-            left: viewport.left,
-            width: viewport.width,
+            insetBlockStart: tallestBoundingContainer.insetBlockStart,
+            blockSize: tallestBoundingContainer.blockSize,
+            insetInlineStart: viewport.insetInlineStart,
+            inlineSize: viewport.inlineSize,
         }
         : viewport;
     const optimizedRect = fitIntoContainer(rect, boundingContainer);
     // If largest possible rect is shorter than original - set body scroll.
-    const scrollable = optimizedRect.height < rect.height;
+    const scrollable = optimizedRect.blockSize < rect.blockSize;
     return { internalPosition, rect: optimizedRect, scrollable };
 }
 function getBestOption(option1, option2) {
@@ -241,11 +241,11 @@ function getBestOption(option1, option2) {
         return option2;
     }
     // Only if none of the two options overflows horizontally, choose the best based on the visible height.
-    if (option1.visibleArea.width === option2.visibleArea.width) {
-        return option1.visibleArea.height > option2.visibleArea.height ? option1 : option2;
+    if (option1.visibleArea.inlineSize === option2.visibleArea.inlineSize) {
+        return option1.visibleArea.blockSize > option2.visibleArea.blockSize ? option1 : option2;
     }
     // Otherwise, choose the option that is less cut off horizontally.
-    return option1.visibleArea.width > option2.visibleArea.width ? option1 : option2;
+    return option1.visibleArea.inlineSize > option2.visibleArea.inlineSize ? option1 : option2;
 }
 export function getOffsetDimensions(element) {
     return { offsetHeight: element.offsetHeight, offsetWidth: element.offsetWidth };
@@ -253,8 +253,8 @@ export function getOffsetDimensions(element) {
 export function getDimensions(element) {
     const computedStyle = getComputedStyle(element);
     return {
-        width: parseFloat(computedStyle.width),
-        height: parseFloat(computedStyle.height),
+        inlineSize: parseFloat(computedStyle.inlineSize),
+        blockSize: parseFloat(computedStyle.blockSize),
     };
 }
 function isTopOrBottom(internalPosition) {