placer-toolkit 0.5.1

package/src/internal/scroll.ts

@@ -0,0 +1,95 @@
+import { getOffset } from "./offset.js";
+
+const locks = new Set();
+
+function getScrollbarWidth() {
+    const documentWidth = document.documentElement.clientWidth;
+    return Math.abs(window.innerWidth - documentWidth);
+}
+
+function getExistingBodyPadding() {
+    const padding = Number(
+        getComputedStyle(document.body).paddingRight.replace(/px/, ""),
+    );
+
+    if (isNaN(padding) || !padding) {
+        return 0;
+    }
+
+    return padding;
+}
+
+export function lockBodyScrolling(lockingElement: HTMLElement) {
+    locks.add(lockingElement);
+
+    if (!document.documentElement.classList.contains("pc-scroll-lock")) {
+        const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding();
+
+        let scrollbarGutterProperty = getComputedStyle(
+            document.documentElement,
+        ).scrollbarGutter;
+
+        if (!scrollbarGutterProperty || scrollbarGutterProperty === "auto") {
+            scrollbarGutterProperty = "stable";
+        }
+
+        if (scrollbarWidth < 2) {
+            scrollbarGutterProperty = "";
+        }
+        document.documentElement.style.setProperty(
+            "--pc-scroll-lock-gutter",
+            scrollbarGutterProperty,
+        );
+        document.documentElement.classList.add("pc-scroll-lock");
+        document.documentElement.style.setProperty(
+            "--pc-scroll-lock-size",
+            `${scrollbarWidth}px`,
+        );
+    }
+}
+
+export function unlockBodyScrolling(lockingElement: HTMLElement) {
+    locks.delete(lockingElement);
+
+    if (locks.size === 0) {
+        document.documentElement.classList.remove("pc-scroll-lock");
+        document.documentElement.style.removeProperty("--pc-scroll-lock-size");
+    }
+}
+
+export function scrollIntoView(
+    element: HTMLElement,
+    container: HTMLElement,
+    direction: "horizontal" | "vertical" | "both" = "vertical",
+    behavior: "smooth" | "auto" = "smooth",
+) {
+    const offset = getOffset(element, container);
+    const offsetTop = offset.top + container.scrollTop;
+    const offsetLeft = offset.left + container.scrollLeft;
+    const minX = container.scrollLeft;
+    const maxX = container.scrollLeft + container.offsetWidth;
+    const minY = container.scrollTop;
+    const maxY = container.scrollTop + container.offsetHeight;
+
+    if (direction === "horizontal" || direction === "both") {
+        if (offsetLeft < minX) {
+            container.scrollTo({ left: offsetLeft, behavior });
+        } else if (offsetLeft + element.clientWidth > maxX) {
+            container.scrollTo({
+                left: offsetLeft - container.offsetWidth + element.clientWidth,
+                behavior,
+            });
+        }
+    }
+
+    if (direction === "vertical" || direction === "both") {
+        if (offsetTop < minY) {
+            container.scrollTo({ top: offsetTop, behavior });
+        } else if (offsetTop + element.clientHeight > maxY) {
+            container.scrollTo({
+                top: offsetTop - container.offsetHeight + element.clientHeight,
+                behavior,
+            });
+        }
+    }
+}

package/src/internal/scrollend-polyfill.ts

@@ -0,0 +1,99 @@
+type GenericCallback = (this: unknown, ...args: unknown[]) => unknown;
+
+type MethodOf<T, K extends keyof T> = T[K] extends GenericCallback
+    ? T[K]
+    : never;
+
+const debounce = <T extends GenericCallback>(fn: T, delay: number) => {
+    let timerId = 0;
+
+    return function (this: unknown, ...args: unknown[]) {
+        window.clearTimeout(timerId);
+        timerId = window.setTimeout(() => {
+            fn.call(this, ...args);
+        }, delay);
+    };
+};
+
+const decorate = <T, M extends keyof T>(
+    proto: T,
+    method: M,
+    decorateFn: (this: T, superFn: T[M], ...args: unknown[]) => unknown,
+) => {
+    const superFn = proto[method] as MethodOf<T, M>;
+
+    proto[method] = function (this: unknown, ...args: unknown[]) {
+        superFn.call(this, ...args);
+        decorateFn.call(this as T, superFn, ...args);
+    } as MethodOf<T, M>;
+};
+
+(() => {
+    if (typeof window === "undefined") {
+        return;
+    }
+
+    const isSupported = "onscrollend" in window;
+
+    if (!isSupported) {
+        const pointers = new Set();
+        const scrollHandlers = new WeakMap<
+            EventTarget,
+            EventListenerOrEventListenerObject
+        >();
+
+        const handlePointerDown = (event: TouchEvent) => {
+            for (const touch of Array.from(event.changedTouches)) {
+                pointers.add(touch.identifier);
+            }
+        };
+
+        const handlePointerUp = (event: TouchEvent) => {
+            for (const touch of Array.from(event.changedTouches)) {
+                pointers.delete(touch.identifier);
+            }
+        };
+
+        document.addEventListener("touchstart", handlePointerDown, true);
+        document.addEventListener("touchend", handlePointerUp, true);
+        document.addEventListener("touchcancel", handlePointerUp, true);
+
+        decorate(
+            EventTarget.prototype,
+            "addEventListener",
+            function (this: EventTarget, addEventListener, type) {
+                if (type !== "scrollend") return;
+
+                const handleScrollEnd = debounce(() => {
+                    if (!pointers.size) {
+                        this.dispatchEvent(new Event("scrollend"));
+                    } else {
+                        handleScrollEnd();
+                    }
+                }, 100);
+
+                addEventListener.call(this, "scroll", handleScrollEnd, {
+                    passive: true,
+                });
+                scrollHandlers.set(this, handleScrollEnd);
+            },
+        );
+
+        decorate(
+            EventTarget.prototype,
+            "removeEventListener",
+            function (this: EventTarget, removeEventListener, type) {
+                if (type !== "scrollend") return;
+
+                const scrollHandler = scrollHandlers.get(this);
+                if (scrollHandler) {
+                    removeEventListener.call(this, "scroll", scrollHandler, {
+                        passive: true,
+                    } as unknown as EventListenerOptions);
+                }
+            },
+        );
+    }
+})();
+
+export {};

package/src/internal/slot.ts

@@ -0,0 +1,110 @@
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+
+export class HasSlotController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    slotNames: string[] = [];
+
+    constructor(
+        host: ReactiveControllerHost & Element,
+        ...slotNames: string[]
+    ) {
+        (this.host = host).addController(this);
+        this.slotNames = slotNames;
+    }
+
+    private hasDefaultSlot() {
+        return Array.from(this.host.childNodes).some((node) => {
+            if (
+                node.nodeType === node.TEXT_NODE &&
+                node.textContent!.trim() !== ""
+            ) {
+                return true;
+            }
+
+            if (node.nodeType === node.ELEMENT_NODE) {
+                const element = node as HTMLElement;
+                const tagName = element.tagName.toLowerCase();
+
+                if (tagName === "sl-visually-hidden") {
+                    return false;
+                }
+
+                if (!element.hasAttribute("slot")) {
+                    return true;
+                }
+            }
+
+            return false;
+        });
+    }
+
+    private hasNamedSlot(name: string) {
+        return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+    }
+
+    test(slotName: string) {
+        return slotName === "[default]"
+            ? this.hasDefaultSlot()
+            : this.hasNamedSlot(slotName);
+    }
+
+    hostConnected() {
+        this.host.shadowRoot!.addEventListener(
+            "slotchange",
+            this.handleSlotChange,
+        );
+    }
+
+    hostDisconnected() {
+        this.host.shadowRoot!.removeEventListener(
+            "slotchange",
+            this.handleSlotChange,
+        );
+    }
+
+    private handleSlotChange = (event: Event) => {
+        const slot = event.target as HTMLSlotElement;
+
+        if (
+            (this.slotNames.includes("[default]") && !slot.name) ||
+            (slot.name && this.slotNames.includes(slot.name))
+        ) {
+            this.host.requestUpdate();
+        }
+    };
+}
+
+export function getInnerHTML(slot: HTMLSlotElement): string {
+    const nodes = slot.assignedNodes({ flatten: true });
+    let html = "";
+
+    [...nodes].forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            html += (node as HTMLElement).outerHTML;
+        }
+
+        if (node.nodeType === Node.TEXT_NODE) {
+            html += node.textContent;
+        }
+    });
+
+    return html;
+}
+
+export function getTextContent(
+    slot: HTMLSlotElement | undefined | null,
+): string {
+    if (!slot) {
+        return "";
+    }
+    const nodes = slot.assignedNodes({ flatten: true });
+    let text = "";
+
+    [...nodes].forEach((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            text += node.textContent;
+        }
+    });
+
+    return text;
+}

package/src/internal/string.ts

@@ -0,0 +1,3 @@
+export function uppercaseFirstLetter(string: string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}

package/src/internal/tabbable.ts

@@ -0,0 +1,207 @@
+const computedStyleMap = new WeakMap<Element, CSSStyleDeclaration>();
+
+function getCachedComputedStyle(el: HTMLElement): CSSStyleDeclaration {
+    let computedStyle: undefined | CSSStyleDeclaration =
+        computedStyleMap.get(el);
+
+    if (!computedStyle) {
+        computedStyle = window.getComputedStyle(el, null);
+        computedStyleMap.set(el, computedStyle);
+    }
+
+    return computedStyle;
+}
+
+function isVisible(element: HTMLElement): boolean {
+    if (typeof element.checkVisibility === "function") {
+        return element.checkVisibility({
+            checkOpacity: false,
+            checkVisibilityCSS: true,
+        });
+    }
+
+    const computedStyle = getCachedComputedStyle(element);
+
+    return (
+        computedStyle.visibility !== "hidden" &&
+        computedStyle.display !== "none"
+    );
+}
+
+function isOverflowingAndTabbable(element: HTMLElement): boolean {
+    const computedStyle = getCachedComputedStyle(element);
+
+    const { overflowY, overflowX } = computedStyle;
+
+    if (overflowY === "scroll" || overflowX === "scroll") {
+        return true;
+    }
+
+    if (overflowY !== "auto" || overflowX !== "auto") {
+        return false;
+    }
+
+    const isOverflowingY = element.scrollHeight > element.clientHeight;
+
+    if (isOverflowingY && overflowY === "auto") {
+        return true;
+    }
+
+    const isOverflowingX = element.scrollWidth > element.clientWidth;
+
+    if (isOverflowingX && overflowX === "auto") {
+        return true;
+    }
+
+    return false;
+}
+
+function isTabbable(element: HTMLElement) {
+    const tag = element.tagName.toLowerCase();
+
+    const tabindex = Number(element.getAttribute("tabindex"));
+    const hasTabindex = element.hasAttribute("tabindex");
+
+    if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
+        return false;
+    }
+
+    if (element.hasAttribute("disabled")) {
+        return false;
+    }
+
+    if (element.closest("[inert]")) {
+        return false;
+    }
+
+    if (tag === "input" && element.getAttribute("type") === "radio") {
+        const rootNode = element.getRootNode() as HTMLElement;
+
+        const findRadios = `input[type='radio'][name="${element.getAttribute(
+            "name",
+        )}"]`;
+        const firstChecked = rootNode.querySelector(`${findRadios}:checked`);
+
+        if (firstChecked) {
+            return firstChecked === element;
+        }
+
+        const firstRadio = rootNode.querySelector(findRadios);
+
+        return firstRadio === element;
+    }
+
+    if (!isVisible(element)) {
+        return false;
+    }
+
+    if (
+        (tag === "audio" || tag === "video") &&
+        element.hasAttribute("controls")
+    ) {
+        return true;
+    }
+
+    if (element.hasAttribute("tabindex")) {
+        return true;
+    }
+
+    if (
+        element.hasAttribute("contenteditable") &&
+        element.getAttribute("contenteditable") !== "false"
+    ) {
+        return true;
+    }
+
+    const isNativelyTabbable = [
+        "button",
+        "input",
+        "select",
+        "textarea",
+        "a",
+        "audio",
+        "video",
+        "summary",
+        "iframe",
+    ].includes(tag);
+
+    if (isNativelyTabbable) {
+        return true;
+    }
+
+    return isOverflowingAndTabbable(element);
+}
+
+export function getTabbableBoundary(root: HTMLElement | ShadowRoot) {
+    const tabbableElements = getTabbableElements(root);
+
+    const start = tabbableElements[0] ?? null;
+    const end = tabbableElements[tabbableElements.length - 1] ?? null;
+
+    return { start, end };
+}
+
+function getSlottedChildrenOutsideRootElement(
+    slotElement: HTMLSlotElement,
+    root: HTMLElement | ShadowRoot,
+) {
+    return (
+        (slotElement.getRootNode({ composed: true }) as ShadowRoot | null)
+            ?.host !== root
+    );
+}
+
+export function getTabbableElements(root: HTMLElement | ShadowRoot) {
+    const walkedElements = new WeakMap();
+    const tabbableElements: HTMLElement[] = [];
+
+    function walk(element: HTMLElement | ShadowRoot) {
+        if (element instanceof Element) {
+            if (element.hasAttribute("inert") || element.closest("[inert]")) {
+                return;
+            }
+
+            if (walkedElements.has(element)) {
+                return;
+            }
+
+            walkedElements.set(element, true);
+
+            if (!tabbableElements.includes(element) && isTabbable(element)) {
+                tabbableElements.push(element);
+            }
+
+            if (
+                element instanceof HTMLSlotElement &&
+                getSlottedChildrenOutsideRootElement(element, root)
+            ) {
+                element
+                    .assignedElements({ flatten: true })
+                    .forEach((assignedElement) => {
+                        if (assignedElement instanceof HTMLElement) {
+                            walk(assignedElement);
+                        }
+                    });
+            }
+
+            if (
+                element.shadowRoot !== null &&
+                element.shadowRoot.mode === "open"
+            ) {
+                walk(element.shadowRoot);
+            }
+        }
+
+        for (const e of Array.from(element.children)) {
+            walk(e as HTMLElement);
+        }
+    }
+
+    walk(root);
+
+    return tabbableElements.sort((a, b) => {
+        const aTabindex = Number(a.getAttribute("tabindex")) || 0;
+        const bTabindex = Number(b.getAttribute("tabindex")) || 0;
+        return bTabindex - aTabindex;
+    });
+}

package/src/internal/watch.ts

@@ -0,0 +1,58 @@
+import type { LitElement } from "lit";
+
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+
+type NonUndefined<A> = A extends undefined ? never : A;
+
+type UpdateHandlerFunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+
+interface WatchOptions {
+    waitUntilFirstUpdate?: boolean;
+}
+
+export function watch(propertyName: string | string[], options?: WatchOptions) {
+    const resolvedOptions: Required<WatchOptions> = {
+        waitUntilFirstUpdate: false,
+        ...options,
+    };
+    return <ElemClass extends LitElement>(
+        proto: ElemClass,
+        decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>,
+    ) => {
+        // @ts-expect-error — “update” is a protected property
+        const { update } = proto;
+        const watchedProperties = Array.isArray(propertyName)
+            ? propertyName
+            : [propertyName];
+
+        // @ts-expect-error — “update” is a protected property
+        proto.update = function (
+            this: ElemClass,
+            changedProps: Map<keyof ElemClass, ElemClass[keyof ElemClass]>,
+        ) {
+            watchedProperties.forEach((property) => {
+                const key = property as keyof ElemClass;
+                if (changedProps.has(key)) {
+                    const oldValue = changedProps.get(key);
+                    const newValue = this[key];
+
+                    if (oldValue !== newValue) {
+                        if (
+                            !resolvedOptions.waitUntilFirstUpdate ||
+                            this.hasUpdated
+                        ) {
+                            (this[decoratedFnName] as unknown as UpdateHandler)(
+                                oldValue,
+                                newValue,
+                            );
+                        }
+                    }
+                }
+            });
+
+            update.call(this, changedProps);
+        };
+    };
+}