@reshaped/utilities 3.10.0-canary.9 → 3.10.0

package/dist/flyout/utilities/applyPosition.js

@@ -19,7 +19,7 @@ const applyPosition = (args) => {
     };
     contentClone.style.cssText = "";
     if (!triggerBounds)
-        throw new Error("Trigger bounds are required");
+        return { position };
     const resolvedTriggerBounds = getRectFromCoordinates(triggerBounds);
     Object.keys(RESET_STYLES).forEach((_key) => {
         const key = _key;

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

@@ -0,0 +1,15 @@
+import type { Position, Coordinates } from "../types";
+type CreateSafeAreaArgs = {
+    coordinates: Coordinates;
+    content: HTMLElement;
+    trigger: HTMLElement;
+    position: Position;
+    existingSafeArea: HTMLElement | null;
+};
+/**
+ * Creates an SVG element representing the safe area triangle
+ * from the mouse coordinates to the closest side of the content.
+ * The safe area is limited by the trigger's boundaries.
+ */
+declare const createSafeArea: (args: CreateSafeAreaArgs) => HTMLElement;
+export default createSafeArea;

package/dist/flyout/utilities/createSafeArea.js

@@ -0,0 +1,62 @@
+/**
+ * Creates an SVG element representing the safe area triangle
+ * from the mouse coordinates to the closest side of the content.
+ * The safe area is limited by the trigger's boundaries.
+ */
+const createSafeArea = (args) => {
+    const { coordinates, content, trigger, position, existingSafeArea } = args;
+    const contentBounds = content.getBoundingClientRect();
+    const isHorizontal = position.startsWith("start") || position.startsWith("end");
+    const isLogicalStart = position.startsWith("start") || position.startsWith("top");
+    const BUFFER = 10;
+    let points;
+    if (isHorizontal) {
+        const originX = isLogicalStart ? coordinates.x + BUFFER : coordinates.x - BUFFER;
+        const x = isLogicalStart ? contentBounds.left + contentBounds.width : contentBounds.left;
+        const topCoordinates = { x, y: contentBounds.top };
+        const bottomCoordinates = { x, y: contentBounds.top + contentBounds.height };
+        points = `${originX},${coordinates.y} ${topCoordinates.x},${topCoordinates.y} ${bottomCoordinates.x},${bottomCoordinates.y}`;
+    }
+    else {
+        const originY = isLogicalStart ? coordinates.y + BUFFER : coordinates.y - BUFFER;
+        const y = isLogicalStart ? contentBounds.top + contentBounds.height : contentBounds.top;
+        const leftCoordinates = { x: contentBounds.left, y };
+        const rightCoordinates = { x: contentBounds.left + contentBounds.width, y };
+        points = `${coordinates.x},${originY} ${leftCoordinates.x},${leftCoordinates.y} ${rightCoordinates.x},${rightCoordinates.y}`;
+    }
+    // Calculate SVG viewBox to cover the triangle area
+    const pointCoords = points.split(" ").map((p) => p.split(",").map(Number));
+    const minX = Math.min(...pointCoords.map((p) => p[0]));
+    const maxX = Math.max(...pointCoords.map((p) => p[0]));
+    const minY = Math.min(...pointCoords.map((p) => p[1]));
+    const maxY = Math.max(...pointCoords.map((p) => p[1]));
+    const svgWidth = maxX - minX;
+    const svgHeight = maxY - minY;
+    // Adjust points relative to SVG origin
+    const adjustedPoints = pointCoords.map((p) => `${p[0] - minX},${p[1] - minY}`).join(" ");
+    const styles = `
+		position: fixed;
+		left: ${minX}px;
+		top: ${minY}px;
+		width: ${svgWidth}px;
+		height: ${svgHeight}px;
+		pointer-events: none;
+		z-index: 9999;
+	`;
+    const svgContent = `
+		<svg width="${svgWidth}" height="${svgHeight}" viewBox="0 0 ${svgWidth} ${svgHeight}">
+			<polygon points="${adjustedPoints}" fill="red" opacity="0.5" style="pointer-events: auto;" />
+		</svg>
+	`;
+    if (existingSafeArea) {
+        existingSafeArea.style.cssText = styles;
+        existingSafeArea.innerHTML = svgContent;
+        return existingSafeArea;
+    }
+    const container = document.createElement("div");
+    container.style.cssText = styles;
+    container.innerHTML = svgContent;
+    trigger.appendChild(container);
+    return container;
+};
+export default createSafeArea;

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

@@ -0,0 +1,5 @@
+type Args = {
+    el: HTMLElement | null;
+};
+declare const _default: (args: Args) => HTMLElement;
+export default _default;

package/dist/flyout/utilities/findClosestFixedContainer.js

@@ -0,0 +1,18 @@
+import getShadowRoot from "../../dom/getShadowRoot.js";
+const findClosestPositionContainer = (args) => {
+    const { el, iteration = 0 } = args;
+    const style = el && window.getComputedStyle(el);
+    const position = style?.position;
+    const isFixed = position === "fixed" || position === "sticky";
+    if (iteration === 0) {
+        const shadowRoot = getShadowRoot(el);
+        if (shadowRoot?.firstElementChild)
+            return shadowRoot.firstElementChild;
+    }
+    if (el === document.body || !el)
+        return document.body;
+    if (isFixed)
+        return el;
+    return findClosestPositionContainer({ el: el.parentElement, iteration: iteration + 1 });
+};
+export default (args) => findClosestPositionContainer({ ...args, iteration: 0 });

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

@@ -0,0 +1,5 @@
+type Args = {
+    el: HTMLElement;
+};
+declare const _default: (args: Args) => HTMLElement | null;
+export default _default;

package/dist/flyout/utilities/findClosestScrollableContainer.js

@@ -0,0 +1,12 @@
+const findClosestScrollableContainer = (args) => {
+    const { el, iteration } = args;
+    const style = el && window.getComputedStyle(el);
+    const overflowY = style.overflowY;
+    const isScrollable = overflowY.includes("scroll") || overflowY.includes("auto");
+    if (!el.parentElement)
+        return null;
+    if (isScrollable && el.scrollHeight > el.clientHeight)
+        return el;
+    return findClosestScrollableContainer({ el: el.parentElement, iteration: iteration + 1 });
+};
+export default (args) => findClosestScrollableContainer({ ...args, iteration: 0 });

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

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

package/dist/flyout/utilities/tests/findClosestFixedContainer.test.js

@@ -0,0 +1,46 @@
+import { expect, test, describe } from "vitest";
+import findClosestFixedContainer from "../findClosestFixedContainer.js";
+describe("flyout/findClosestFixedContainer", () => {
+    test("returns document.body when element is null", () => {
+        const result = findClosestFixedContainer({ el: null });
+        expect(result).toBe(document.body);
+    });
+    test("returns document.body when element is document.body", () => {
+        const result = findClosestFixedContainer({ el: document.body });
+        expect(result).toBe(document.body);
+    });
+    test("returns the element itself when it has position fixed", () => {
+        const fixedEl = document.createElement("div");
+        fixedEl.style.position = "fixed";
+        document.body.appendChild(fixedEl);
+        const result = findClosestFixedContainer({ el: fixedEl });
+        expect(result).toBe(fixedEl);
+    });
+    test("returns the element itself when it has position sticky", () => {
+        const stickyEl = document.createElement("div");
+        stickyEl.style.position = "sticky";
+        document.body.appendChild(stickyEl);
+        const result = findClosestFixedContainer({ el: stickyEl });
+        expect(result).toBe(stickyEl);
+    });
+    test("returns grandparent when it has position fixed", () => {
+        const fixedEl = document.createElement("div");
+        fixedEl.style.position = "fixed";
+        const childEl = document.createElement("div");
+        const grandChildEl = document.createElement("div");
+        childEl.appendChild(grandChildEl);
+        fixedEl.appendChild(childEl);
+        document.body.appendChild(fixedEl);
+        const result = findClosestFixedContainer({ el: grandChildEl });
+        expect(result).toBe(fixedEl);
+    });
+    test("returns document.body when no fixed container is found", () => {
+        const staticEl = document.createElement("div");
+        staticEl.style.position = "static";
+        const childEl = document.createElement("div");
+        staticEl.appendChild(childEl);
+        document.body.appendChild(staticEl);
+        const result = findClosestFixedContainer({ el: childEl });
+        expect(result).toBe(document.body);
+    });
+});

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

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

package/dist/flyout/utilities/tests/findClosestScrollableContainer.test.js

@@ -0,0 +1,66 @@
+import { expect, test, describe } from "vitest";
+import findClosestScrollableContainer from "../findClosestScrollableContainer.js";
+describe("flyout/findClosestScrollableContainer", () => {
+    test("returns null when element has no parent", () => {
+        const result = findClosestScrollableContainer({ el: document.documentElement });
+        expect(result).toBe(null);
+    });
+    test("returns the element itself has overflow auto", () => {
+        const scrollableEl = document.createElement("div");
+        scrollableEl.style.overflowY = "auto";
+        scrollableEl.style.height = "100px";
+        const childEl = document.createElement("div");
+        childEl.style.height = "200px";
+        scrollableEl.appendChild(childEl);
+        document.body.appendChild(scrollableEl);
+        const result = findClosestScrollableContainer({ el: scrollableEl });
+        expect(result).toBe(scrollableEl);
+    });
+    test("returns the element itself has overflow scroll", () => {
+        const scrollableEl = document.createElement("div");
+        scrollableEl.style.overflowY = "scroll";
+        scrollableEl.style.height = "100px";
+        const childEl = document.createElement("div");
+        childEl.style.height = "200px";
+        scrollableEl.appendChild(childEl);
+        document.body.appendChild(scrollableEl);
+        const result = findClosestScrollableContainer({ el: scrollableEl });
+        expect(result).toBe(scrollableEl);
+    });
+    test("returns grandparent when it is scrollable", () => {
+        const scrollableEl = document.createElement("div");
+        scrollableEl.style.overflowY = "auto";
+        scrollableEl.style.height = "100px";
+        const childEl = document.createElement("div");
+        childEl.style.height = "200px";
+        const grandChildEl = document.createElement("div");
+        grandChildEl.style.height = "100px";
+        childEl.appendChild(grandChildEl);
+        scrollableEl.appendChild(childEl);
+        document.body.appendChild(scrollableEl);
+        const result = findClosestScrollableContainer({ el: grandChildEl });
+        expect(result).toBe(scrollableEl);
+    });
+    test("returns null when no scrollable container is found", () => {
+        const scrollableEl = document.createElement("div");
+        scrollableEl.style.overflowY = "visible";
+        scrollableEl.style.height = "100px";
+        const childEl = document.createElement("div");
+        childEl.style.height = "200px";
+        scrollableEl.appendChild(childEl);
+        document.body.appendChild(scrollableEl);
+        const result = findClosestScrollableContainer({ el: childEl });
+        expect(result).toBe(null);
+    });
+    test("does not return element with overflow auto but scrollHeight <= clientHeight", () => {
+        const scrollableEl = document.createElement("div");
+        scrollableEl.style.overflowY = "auto";
+        scrollableEl.style.height = "100px";
+        const childEl = document.createElement("div");
+        childEl.style.height = "100px";
+        scrollableEl.appendChild(childEl);
+        document.body.appendChild(scrollableEl);
+        const result = findClosestScrollableContainer({ el: childEl });
+        expect(result).toBe(null);
+    });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@reshaped/utilities",
   "description": "Vanilla JS utilities for implementing common UI patterns",
-  "version": "3.10.0-canary.9",
+  "version": "3.10.0",
   "license": "MIT",
   "homepage": "https://reshaped.so",
   "repository": {