@reshaped/utilities 3.10.0-canary.5 → 3.10.0-canary.7

package/dist/a11y/TrapFocus.js

@@ -1,5 +1,5 @@
 var _a;
-import * as keys from "../constants/keys.js";
+import keys from "../constants/keys.js";
 import { getShadowRoot } from "../dom/index.js";
 import Chain from "./Chain.js";
 import { getActiveElement, getFocusableElements, focusElement, getFocusData } from "./focus.js";

package/dist/constants/keys.d.ts

@@ -1,11 +1,14 @@
-export declare const ESC = "Escape";
-export declare const SPACE = " ";
-export declare const ENTER = "Enter";
-export declare const TAB = "Tab";
-export declare const UP = "ArrowUp";
-export declare const DOWN = "ArrowDown";
-export declare const RIGHT = "ArrowRight";
-export declare const LEFT = "ArrowLeft";
-export declare const HOME = "Home";
-export declare const END = "End";
-export declare const BACKSPACE = "Backspace";
+declare const keys: {
+    ESC: string;
+    SPACE: string;
+    ENTER: string;
+    TAB: string;
+    UP: string;
+    DOWN: string;
+    RIGHT: string;
+    LEFT: string;
+    HOME: string;
+    END: string;
+    BACKSPACE: string;
+};
+export default keys;

package/dist/constants/keys.js

@@ -1,11 +1,14 @@
-export const ESC = "Escape";
-export const SPACE = " ";
-export const ENTER = "Enter";
-export const TAB = "Tab";
-export const UP = "ArrowUp";
-export const DOWN = "ArrowDown";
-export const RIGHT = "ArrowRight";
-export const LEFT = "ArrowLeft";
-export const HOME = "Home";
-export const END = "End";
-export const BACKSPACE = "Backspace";
+const keys = {
+    ESC: "Escape",
+    SPACE: " ",
+    ENTER: "Enter",
+    TAB: "Tab",
+    UP: "ArrowUp",
+    DOWN: "ArrowDown",
+    RIGHT: "ArrowRight",
+    LEFT: "ArrowLeft",
+    HOME: "Home",
+    END: "End",
+    BACKSPACE: "Backspace",
+};
+export default keys;

package/dist/flyout/types.d.ts

@@ -1,11 +1,8 @@
+import type { Coordinates } from "../types/global";
 type XSide = "start" | "end";
 type YSide = "top" | "bottom";
 export type Side = XSide | YSide;
 export type Position = `${YSide}` | `${YSide}-${XSide}` | `${XSide}` | `${XSide}-${YSide}`;
-export type Coordinates = {
-    x: number;
-    y: number;
-};
 export type Width = "trigger" | string;
 export type Options = {
     content: HTMLElement;

package/dist/flyout/utilities/applyPosition.js

@@ -56,7 +56,7 @@ const applyPosition = (args) => {
             ...result,
             fallbackAdjustLayout,
             fallbackMinHeight,
-            width,
+            width: options?.width,
             flyoutBounds,
             containerBounds,
             triggerBounds: resolvedTriggerBounds,
@@ -79,7 +79,7 @@ const applyPosition = (args) => {
     let calculated = null;
     const testOrder = getPositionFallbacks(position, fallbackPositions);
     testOrder.some((currentPosition) => {
-        const tested = testPosition(currentPosition);
+        const tested = testPosition(currentPosition, { width });
         const visible = testVisibility(tested);
         if (visible)
             calculated = tested;
@@ -98,7 +98,7 @@ const applyPosition = (args) => {
     }
     // None of the positions fit, use the last used position or the default position
     if (!calculated)
-        calculated = testPosition(lastUsedPosition ?? position);
+        calculated = testPosition(lastUsedPosition ?? position, { width });
     root.removeChild(contentClone);
     const { styles } = calculated;
     const translateX = (styles.right !== null ? -styles.right : styles.left) + window.scrollX;
@@ -112,8 +112,8 @@ const applyPosition = (args) => {
         width: styles.width !== null ? `${styles.width}px` : (width ?? undefined),
         transform: `translate(${translateX}px, ${translateY}px)`,
     };
-    content.style.cssText = "";
     Object.entries(resolvedStyles).forEach(([key, value]) => {
+        content.style.removeProperty(key);
         if (!value)
             return;
         content.style.setProperty(key, value);

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

@@ -1,4 +1,4 @@
-import type { Coordinates } from "../types";
+import type { Coordinates } from "../../types/global";
 /**
  * Include any missing properties to match DOMRect interface when coordinates are passed
  */

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

@@ -1,5 +1,5 @@
-import isFullyVisible from "flyout/utilities/isFullyVisible";
 import { expect, test, describe } from "vitest";
+import isFullyVisible from "../isFullyVisible.js";
 describe("flyout/isFullyVisible", () => {
     test("returns true when flyout is fully visible within visual container", () => {
         const result = isFullyVisible({

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export { TrapFocus } from "./a11y";
 export { lockScroll } from "./scroll";
 export { isRTL } from "./i18n";
 export { classNames, type ClassName } from "./css";
+export { default as keys } from "./constants/keys";

package/dist/index.js

@@ -3,3 +3,4 @@ export { TrapFocus } from "./a11y/index.js";
 export { lockScroll } from "./scroll/index.js";
 export { isRTL } from "./i18n/index.js";
 export { classNames } from "./css/index.js";
+export { default as keys } from "./constants/keys.js";

package/dist/internal.d.ts

@@ -9,3 +9,4 @@ export type { TrapMode, FocusableElement } from "./a11y";
 export { disableScroll, enableScroll } from "./scroll";
 export { rafThrottle } from "./helpers";
 export { getShadowRoot, findParent } from "./dom";
+export type { Coordinates } from "./types/global";

package/dist/types/global.d.ts

@@ -0,0 +1,4 @@
+export type Coordinates = {
+    x: number;
+    y: number;
+};

package/package.json

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

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

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

package/dist/flyout/utilities/findClosestScrollableContainer.js

@@ -1,12 +0,0 @@
-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/findClosestScrollableContainer.test.js

@@ -1,66 +0,0 @@
-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/dist/helpers/classNames.d.ts

@@ -1,7 +0,0 @@
-type ClassNameValue = string | null | undefined | false;
-export type ClassName = ClassNameValue | ClassNameValue[] | ClassName[];
-/**
- * Resolve an array of values into a classname string
- */
-declare const classNames: (...args: ClassName[]) => string;
-export default classNames;

package/dist/helpers/classNames.js

@@ -1,19 +0,0 @@
-/**
- * Resolve an array of values into a classname string
- */
-const classNames = (...args) => {
-    return args
-        .reduce((acc, cur) => {
-        if (Array.isArray(cur)) {
-            const className = classNames(...cur);
-            if (!className)
-                return acc;
-            return `${acc} ${className}`;
-        }
-        if (cur)
-            return `${acc} ${cur}`;
-        return acc;
-    }, "")
-        .trim();
-};
-export default classNames;

package/dist/helpers/tests/classNames.test.d.ts

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

package/dist/helpers/tests/classNames.test.js

@@ -1,63 +0,0 @@
-import { expect, test, describe } from "vitest";
-import classNames from "../classNames.js";
-describe("helpers/classNames", () => {
-    test("returns empty string when no arguments are provided", () => {
-        expect(classNames()).toBe("");
-    });
-    test("returns a single class name", () => {
-        expect(classNames("foo")).toBe("foo");
-    });
-    test("concatenates multiple class names", () => {
-        expect(classNames("foo", "bar", "baz")).toBe("foo bar baz");
-    });
-    test("filters out null values", () => {
-        expect(classNames("foo", null, "bar")).toBe("foo bar");
-        expect(classNames(null, "foo", null)).toBe("foo");
-        expect(classNames(null, null)).toBe("");
-    });
-    test("filters out undefined values", () => {
-        expect(classNames("foo", undefined, "bar")).toBe("foo bar");
-        expect(classNames(undefined, "foo", undefined)).toBe("foo");
-        expect(classNames(undefined, undefined)).toBe("");
-    });
-    test("filters out false values", () => {
-        expect(classNames("foo", false, "bar")).toBe("foo bar");
-        expect(classNames(false, "foo", false)).toBe("foo");
-        expect(classNames(false, false)).toBe("");
-    });
-    test("handles arrays of class names", () => {
-        expect(classNames(["foo", "bar"])).toBe("foo bar");
-        expect(classNames(["foo", "bar"], "baz")).toBe("foo bar baz");
-        expect(classNames("foo", ["bar", "baz"])).toBe("foo bar baz");
-    });
-    test("handles nested arrays", () => {
-        expect(classNames(["foo", ["bar", "baz"]])).toBe("foo bar baz");
-        expect(classNames([["foo", "bar"], "baz"])).toBe("foo bar baz");
-        expect(classNames([["foo"], ["bar"], ["baz"]])).toBe("foo bar baz");
-    });
-    test("filters out falsy values in arrays", () => {
-        expect(classNames(["foo", null, "bar"])).toBe("foo bar");
-        expect(classNames(["foo", undefined, "bar"])).toBe("foo bar");
-        expect(classNames(["foo", false, "bar"])).toBe("foo bar");
-        expect(classNames([null, undefined, false])).toBe("");
-    });
-    test("handles deeply nested arrays with falsy values", () => {
-        expect(classNames([["foo", null], [undefined, "bar"], false])).toBe("foo bar");
-        expect(classNames(["foo", [null, undefined, ["bar", false, "baz"]]])).toBe("foo bar baz");
-    });
-    test("handles empty arrays", () => {
-        expect(classNames([])).toBe("");
-        expect(classNames("foo", [], "bar")).toBe("foo bar");
-        expect(classNames([[], []])).toBe("");
-    });
-    test("handles empty strings", () => {
-        expect(classNames("", "foo")).toBe("foo");
-        expect(classNames("foo", "", "bar")).toBe("foo bar");
-        expect(classNames("", "", "")).toBe("");
-    });
-    test("handles conditional class names", () => {
-        const isActive = true;
-        const isDisabled = false;
-        expect(classNames("button", isActive && "active", isDisabled && "disabled")).toBe("button active");
-    });
-});