@reshaped/utilities 3.9.1-canary.2 → 3.9.1-canary.3

package/dist/flyout/Flyout.js

@@ -9,10 +9,9 @@ class Flyout {
     constructor(options) {
         this.#options = options;
     }
-    #update = (options) => {
+    #update = () => {
         const result = applyPosition({
             ...this.#options,
-            fallbackPositions: options?.fallback === false ? [] : this.#options.fallbackPositions,
             lastUsedPosition: this.#lastUsedPosition,
         });
         this.#lastUsedPosition = result.position;
@@ -23,11 +22,14 @@ class Flyout {
         if (!trigger)
             return;
         const container = findClosestScrollableContainer({ el: trigger });
-        if (!container)
-            return;
+        const root = container || window;
         const handleScroll = rafThrottle(() => {
             if (!this.#active)
                 return;
+            if (!container) {
+                this.#update();
+                return;
+            }
             const triggerBounds = trigger.getBoundingClientRect();
             const containerBounds = container.getBoundingClientRect();
             if (triggerBounds.top < containerBounds.top ||
@@ -37,11 +39,11 @@ class Flyout {
                 onClose();
             }
             else {
-                this.#update({ fallback: false });
+                this.#update();
             }
         });
-        container.addEventListener("scroll", handleScroll, { passive: true });
-        this.#handlerCleanupMap.scroll = () => container.removeEventListener("scroll", handleScroll);
+        root.addEventListener("scroll", handleScroll, { passive: true });
+        this.#handlerCleanupMap.scroll = () => root.removeEventListener("scroll", handleScroll);
     };
     #addRTLHandler = () => {
         const observer = new MutationObserver(() => {

package/dist/flyout/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const CONTAINER_OFFSET = 8;
+export declare const VIEWPORT_OFFSET = 8;
 export declare const RESET_STYLES: {
     readonly left: "0";
     readonly top: "0";

package/dist/flyout/constants.js

@@ -1,4 +1,4 @@
-export const CONTAINER_OFFSET = 8;
+export const VIEWPORT_OFFSET = 8;
 export const RESET_STYLES = {
     left: "0",
     top: "0",

package/dist/flyout/utilities/applyPosition.js

@@ -1,16 +1,22 @@
 import getShadowRoot from "../../dom/getShadowRoot.js";
 import isRTL from "../../i18n/isRTL.js";
-import { CONTAINER_OFFSET, RESET_STYLES } from "../constants.js";
+import { VIEWPORT_OFFSET, RESET_STYLES } from "../constants.js";
+import calculateLayoutAdjustment from "./calculateLayoutAdjustment.js";
 import calculatePosition from "./calculatePosition.js";
-import findClosestFixedContainer from "./findClosestFixedContainer.js";
 import getPositionFallbacks from "./getPositionFallbacks.js";
 import getRectFromCoordinates from "./getRectFromCoordinates.js";
 import isFullyVisible from "./isFullyVisible.js";
 const applyPosition = (args) => {
-    const { trigger, content, triggerCoordinates, container: passedContainer, contentShift = 0, contentGap = 0, position, fallbackPositions, fallbackAdjustLayout, fallbackMinHeight, width, lastUsedPosition, } = args;
+    const { trigger, content, triggerCoordinates, container, contentShift = 0, contentGap = 0, position, fallbackPositions, fallbackAdjustLayout, fallbackMinHeight, width, lastUsedPosition, } = args;
     const rtl = isRTL();
     const contentClone = content.cloneNode(true);
     const triggerBounds = triggerCoordinates || trigger?.getBoundingClientRect();
+    const containerBounds = container?.getBoundingClientRect() ?? {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        left: 0,
+        top: 0,
+    };
     contentClone.style.cssText = "";
     if (!triggerBounds)
         throw new Error("Trigger bounds are required");
@@ -24,15 +30,9 @@ const applyPosition = (args) => {
     // Insert inside shadow root if possible to make sure styles are applied correctly
     const root = (trigger && getShadowRoot(trigger)) ?? document.body;
     root.appendChild(contentClone);
-    const closestFixedContainer = !passedContainer && trigger ? findClosestFixedContainer({ el: trigger }) : undefined;
-    const container = passedContainer ||
-        // Render inside fixed position container automatically to keep their position synced on scroll
-        closestFixedContainer ||
-        document.body;
-    const renderContainerBounds = container.getBoundingClientRect();
     const testPosition = (position, options) => {
         if (options?.width === "100%") {
-            contentClone.style.width = `calc(100% - ${CONTAINER_OFFSET * 2}px)`;
+            contentClone.style.width = `calc(100% - ${VIEWPORT_OFFSET * 2}px)`;
         }
         else if (options?.width === "trigger") {
             contentClone.style.width = `${resolvedTriggerBounds.width}px`;
@@ -43,32 +43,37 @@ const applyPosition = (args) => {
         else {
             contentClone.style.width = "";
         }
-        return calculatePosition({
+        const flyoutBounds = contentClone.getBoundingClientRect();
+        const result = calculatePosition({
             triggerBounds: resolvedTriggerBounds,
-            flyoutBounds: contentClone.getBoundingClientRect(),
-            containerBounds: renderContainerBounds,
+            flyoutBounds,
             position,
             contentGap,
             contentShift,
             rtl,
-            width,
-            passedContainer: passedContainer ||
-                (closestFixedContainer !== document.body ? closestFixedContainer : undefined),
+        });
+        const adjustedResult = calculateLayoutAdjustment({
+            ...result,
             fallbackAdjustLayout,
             fallbackMinHeight,
+            width,
+            flyoutBounds,
+            containerBounds,
+            triggerBounds: resolvedTriggerBounds,
         });
+        return adjustedResult;
     };
     const testVisibility = (calculated) => {
-        const visualContainerBounds = passedContainer?.getBoundingClientRect() ?? {
-            width: window.innerWidth,
-            height: window.innerHeight,
-            left: window.scrollX,
-            top: window.scrollY,
+        const flyoutBounds = {
+            // Flyout is rendered in body with position absolute, so bounds need to include the page scroll
+            left: calculated.styles.left,
+            top: calculated.styles.top,
+            height: calculated.styles.height ?? Math.ceil(contentClone.clientHeight),
+            width: calculated.styles.width ?? Math.ceil(contentClone.clientWidth),
         };
         return isFullyVisible({
-            flyoutBounds: calculated.boundaries,
-            visualContainerBounds,
-            renderContainerBounds,
+            flyoutBounds,
+            containerBounds,
         });
     };
     let calculated = null;
@@ -95,7 +100,22 @@ const applyPosition = (args) => {
     if (!calculated)
         calculated = testPosition(lastUsedPosition ?? position);
     root.removeChild(contentClone);
-    Object.entries(calculated.styles).forEach(([key, value]) => {
+    const { styles } = calculated;
+    const translateX = (styles.right !== null ? -styles.right : styles.left) + window.scrollX;
+    const translateY = (styles.bottom !== null ? -styles.bottom : styles.top) + window.scrollY;
+    const resolvedStyles = {
+        left: styles.right === null ? "0px" : undefined,
+        right: styles.right === null ? undefined : "0px",
+        top: styles.bottom === null ? "0px" : undefined,
+        bottom: styles.bottom === null ? undefined : "0px",
+        height: styles.height !== null ? `${styles.height}px` : undefined,
+        width: styles.width !== null ? `${styles.width}px` : (width ?? undefined),
+        transform: `translate(${translateX}px, ${translateY}px)`,
+    };
+    content.style.cssText = "";
+    Object.entries(resolvedStyles).forEach(([key, value]) => {
+        if (!value)
+            return;
         content.style.setProperty(key, value);
     });
     return { position: calculated.position };

package/dist/flyout/utilities/calculateLayoutAdjustment.d.ts

@@ -0,0 +1,19 @@
+import type { CalculatePositionResult } from "./calculatePosition";
+import type { Options } from "../types";
+type CalculateLayoutAdjustmentArgs = CalculatePositionResult & Pick<Options, "fallbackAdjustLayout" | "fallbackMinHeight" | "width"> & {
+    flyoutBounds: DOMRect;
+    triggerBounds: DOMRect;
+    containerBounds: Pick<DOMRect, "left" | "top" | "width" | "height">;
+};
+declare const calculateLayoutAdjustment: (args: CalculateLayoutAdjustmentArgs) => {
+    position: import("../types").Position;
+    styles: {
+        left: number;
+        right: number | null;
+        top: number;
+        bottom: number | null;
+        height: number | null;
+        width: number | null;
+    };
+};
+export default calculateLayoutAdjustment;

package/dist/flyout/utilities/calculateLayoutAdjustment.js

@@ -0,0 +1,73 @@
+import { VIEWPORT_OFFSET } from "../constants.js";
+const calculateLayoutAdjustment = (args) => {
+    const { position, styles, fallbackAdjustLayout, fallbackMinHeight, width: passedWidth, flyoutBounds, containerBounds, triggerBounds, } = args;
+    const { width: flyoutWidth, height: flyoutHeight } = flyoutBounds;
+    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft, } = containerBounds;
+    const isHorizontalPosition = !!position.match(/^(start|end)/);
+    let top = styles.top;
+    let left = styles.left;
+    let bottom = styles.bottom;
+    let right = styles.right;
+    let height = null;
+    let width = null;
+    if (fallbackAdjustLayout) {
+        const getOverflow = () => {
+            return {
+                top: containerTop + VIEWPORT_OFFSET - top,
+                bottom: top + flyoutHeight + VIEWPORT_OFFSET - containerTop - containerHeight,
+                left: containerLeft + VIEWPORT_OFFSET - left,
+                right: left + flyoutWidth + VIEWPORT_OFFSET - containerLeft - containerWidth,
+            };
+        };
+        const overflow = getOverflow();
+        if (isHorizontalPosition) {
+            if (overflow.top > 0) {
+                top = containerTop + VIEWPORT_OFFSET;
+                if (bottom !== null)
+                    bottom = bottom - overflow.top;
+            }
+            else if (overflow.bottom > 0) {
+                top = top - overflow.bottom;
+            }
+        }
+        else {
+            if (overflow.left > 0) {
+                left = VIEWPORT_OFFSET + containerLeft;
+                if (right !== null)
+                    right = right - overflow.left;
+            }
+            else if (overflow.right > 0) {
+                left = left - overflow.right;
+            }
+        }
+        const updatedOverflow = getOverflow();
+        if (updatedOverflow.top > 0) {
+            height = Math.max(parseInt(fallbackMinHeight ?? "0"), flyoutHeight - updatedOverflow.top);
+            top = top + (flyoutHeight - height);
+        }
+        else if (updatedOverflow.bottom > 0) {
+            height = Math.max(parseInt(fallbackMinHeight ?? "0"), flyoutHeight - updatedOverflow.bottom);
+            if (bottom !== null)
+                bottom = bottom + (flyoutHeight - height);
+        }
+    }
+    if (passedWidth === "100%") {
+        left = VIEWPORT_OFFSET;
+        width = window.innerWidth - VIEWPORT_OFFSET * 2;
+    }
+    else if (passedWidth === "trigger") {
+        width = triggerBounds.width;
+    }
+    return {
+        position,
+        styles: {
+            left,
+            right,
+            top,
+            bottom,
+            height,
+            width,
+        },
+    };
+};
+export default calculateLayoutAdjustment;

package/dist/flyout/utilities/calculatePosition.d.ts

@@ -1,33 +1,20 @@
-import type { Width, Position } from "../types";
-type Args = {
+import type { Position } from "../types";
+type CalculatePositionArgs = {
     triggerBounds: DOMRect;
     flyoutBounds: DOMRect;
-    containerBounds: DOMRect;
-    passedContainer?: HTMLElement | null;
     position: Position;
     rtl: boolean;
-    width?: Width;
     contentGap: number;
     contentShift: number;
-    fallbackAdjustLayout?: boolean;
-    fallbackMinHeight?: string;
 };
-declare const calculatePosition: (args: Args) => {
+export type CalculatePositionResult = {
     position: Position;
     styles: {
-        left: string | null;
-        right: string | null;
-        top: string | null;
-        bottom: string | null;
-        transform: string;
-        height: string | null;
-        width: string | null;
-    };
-    boundaries: {
-        left: number;
         top: number;
-        height: number;
-        width: number;
+        left: number;
+        bottom: number | null;
+        right: number | null;
     };
 };
+declare const calculatePosition: (args: CalculatePositionArgs) => CalculatePositionResult;
 export default calculatePosition;

package/dist/flyout/utilities/calculatePosition.js

@@ -1,36 +1,19 @@
-import { CONTAINER_OFFSET } from "../constants.js";
 import centerBySize from "./centerBySize.js";
 import getRTLPosition from "./getRTLPosition.js";
 const calculatePosition = (args) => {
-    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width: passedWidth, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, fallbackMinHeight, } = args;
+    const { triggerBounds, flyoutBounds, position: passedPosition, rtl, contentGap = 0, contentShift = 0, } = args;
     const position = rtl ? getRTLPosition(passedPosition) : passedPosition;
-    const isHorizontalPosition = !!position.match(/^(start|end)/);
     let left = 0;
     let top = 0;
     let bottom = null;
     let right = null;
-    let height = null;
-    let width = null;
-    const flyoutWidth = flyoutBounds.width;
-    const flyoutHeight = flyoutBounds.height;
-    const triggerWidth = triggerBounds.width;
-    const triggerHeight = triggerBounds.height;
-    // Detect passed container scroll to sync the flyout position with it
-    const containerX = passedContainer?.scrollLeft;
-    const containerY = passedContainer?.scrollTop;
-    const scrollX = containerX ?? window.scrollX;
-    const scrollY = containerY ?? window.scrollY;
-    const renderContainerHeight = passedContainer?.clientHeight ?? window.innerHeight;
-    const renderContainerWidth = passedContainer?.clientWidth ?? window.innerWidth;
-    // When rendering in the body, bottom bounds will be larrger than the viewport so we calculate it manually
-    const containerBoundsBottom = passedContainer
-        ? containerBounds.bottom
-        : window.innerHeight - scrollY;
-    // When inside a container, adjut position based on the container scroll since flyout is rendered outside the scroll area
-    const relativeLeft = triggerBounds.left - containerBounds.left + (containerX || 0);
-    const relativeRight = containerBounds.right - triggerBounds.right - (containerX || 0);
-    const relativeTop = triggerBounds.top - containerBounds.top - (containerY || 0);
-    const relativeBottom = containerBoundsBottom - triggerBounds.bottom - (containerY || 0);
+    const { width: flyoutWidth, height: flyoutHeight } = flyoutBounds;
+    const { width: triggerWidth, height: triggerHeight, left: triggerLeft, top: triggerTop, right: triggerRight, bottom: triggerBottom, } = triggerBounds;
+    // Convert rect values to css position values
+    const relativeLeft = triggerLeft;
+    const relativeRight = window.innerWidth - triggerRight;
+    const relativeTop = triggerTop;
+    const relativeBottom = window.innerHeight - triggerBottom;
     switch (position) {
         case "start":
         case "start-top":
@@ -87,72 +70,13 @@ const calculatePosition = (args) => {
         default:
             break;
     }
-    if (fallbackAdjustLayout) {
-        const getOverflow = () => {
-            return {
-                top: -top + scrollY + CONTAINER_OFFSET,
-                bottom: top + flyoutHeight + CONTAINER_OFFSET - scrollY - renderContainerHeight,
-                left: -left + scrollX + CONTAINER_OFFSET,
-                right: left + flyoutWidth + CONTAINER_OFFSET - scrollX - renderContainerWidth,
-            };
-        };
-        const overflow = getOverflow();
-        if (isHorizontalPosition) {
-            if (overflow.top > 0) {
-                top = CONTAINER_OFFSET + scrollY;
-                if (bottom !== null)
-                    bottom = bottom - overflow.top;
-            }
-            else if (overflow.bottom > 0) {
-                top = top - overflow.bottom;
-            }
-        }
-        else {
-            if (overflow.left > 0) {
-                left = CONTAINER_OFFSET + scrollX;
-                if (right !== null)
-                    right = right - overflow.left;
-            }
-            else if (overflow.right > 0) {
-                left = left - overflow.right;
-            }
-        }
-        const updatedOverflow = getOverflow();
-        if (updatedOverflow.top > 0) {
-            height = Math.max(parseInt(fallbackMinHeight ?? "0"), flyoutHeight - updatedOverflow.top);
-            top = top + (flyoutHeight - height);
-        }
-        else if (updatedOverflow.bottom > 0) {
-            height = Math.max(parseInt(fallbackMinHeight ?? "0"), flyoutHeight - updatedOverflow.bottom);
-            if (bottom !== null)
-                bottom = bottom + (flyoutHeight - height);
-        }
-    }
-    if (passedWidth === "100%") {
-        left = CONTAINER_OFFSET;
-        width = window.innerWidth - CONTAINER_OFFSET * 2;
-    }
-    else if (passedWidth === "trigger") {
-        width = triggerBounds.width;
-    }
-    const translateX = right !== null ? -right : left;
-    const translateY = bottom !== null ? -bottom : top;
     return {
         position,
         styles: {
-            left: right === null ? "0px" : null,
-            right: right === null ? null : "0px",
-            top: bottom === null ? "0px" : null,
-            bottom: bottom === null ? null : "0px",
-            transform: `translate(${translateX}px, ${translateY}px)`,
-            height: height !== null ? `${height}px` : null,
-            width: width !== null ? `${width}px` : (passedWidth ?? null),
-        },
-        boundaries: {
-            left,
             top,
-            height: height ?? Math.ceil(flyoutHeight),
-            width: width ?? Math.ceil(flyoutWidth),
+            left,
+            bottom,
+            right,
         },
     };
 };

package/dist/flyout/utilities/isFullyVisible.d.ts

@@ -2,12 +2,10 @@ type Bounds = Pick<DOMRect, "left" | "top" | "width" | "height">;
 /**
  * Check if element visually fits within its render container
  * @param flyoutBounds - Bounds of the flyout content
- * @param visualContainerBounds - Bounds of the container where the flyout content should visually fit
- * @param renderContainerBounds - Bounds of the container where flyout content is rendered
+ * @param containerBounds - Bounds of the container where the flyout content should visually fit
  */
 declare const isFullyVisible: (args: {
     flyoutBounds: Bounds;
-    visualContainerBounds: Bounds;
-    renderContainerBounds: Bounds;
+    containerBounds: Bounds;
 }) => boolean;
 export default isFullyVisible;

package/dist/flyout/utilities/isFullyVisible.js

@@ -1,26 +1,23 @@
-import { CONTAINER_OFFSET } from "../constants.js";
+import { VIEWPORT_OFFSET } from "../constants.js";
 /**
  * Check if element visually fits within its render container
  * @param flyoutBounds - Bounds of the flyout content
- * @param visualContainerBounds - Bounds of the container where the flyout content should visually fit
- * @param renderContainerBounds - Bounds of the container where flyout content is rendered
+ * @param containerBounds - Bounds of the container where the flyout content should visually fit
  */
 const isFullyVisible = (args) => {
-    const { flyoutBounds, visualContainerBounds, renderContainerBounds } = args;
-    const flyoutLeft = renderContainerBounds.left + flyoutBounds.left;
-    const flyoutTop = renderContainerBounds.top + flyoutBounds.top;
-    const containerLeft = visualContainerBounds.left;
-    const containerTop = visualContainerBounds.top;
-    if (flyoutLeft < containerLeft + CONTAINER_OFFSET)
+    const { flyoutBounds, containerBounds } = args;
+    const flyoutLeft = flyoutBounds.left;
+    const flyoutTop = flyoutBounds.top;
+    const containerLeft = containerBounds.left;
+    const containerTop = containerBounds.top;
+    if (flyoutLeft < containerLeft + VIEWPORT_OFFSET)
         return false;
-    if (flyoutTop < containerTop + CONTAINER_OFFSET)
+    if (flyoutTop < containerTop + VIEWPORT_OFFSET)
         return false;
-    if (flyoutLeft + flyoutBounds.width >
-        containerLeft + visualContainerBounds.width - CONTAINER_OFFSET) {
+    if (flyoutLeft + flyoutBounds.width > containerLeft + containerBounds.width - VIEWPORT_OFFSET) {
         return false;
     }
-    if (flyoutTop + flyoutBounds.height >
-        containerTop + visualContainerBounds.height - CONTAINER_OFFSET) {
+    if (flyoutTop + flyoutBounds.height > containerTop + containerBounds.height - VIEWPORT_OFFSET) {
         return false;
     }
     return true;

package/dist/flyout/utilities/tests/calculateLayoutAdjustment.test.d.ts

@@ -0,0 +1 @@
+export {};