placer-toolkit 0.5.1 → 1.0.0-alpha.2

package/src/internal/scroll.ts

@@ -1,95 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

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

package/src/internal/tabbable.ts

@@ -1,207 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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);
-        };
-    };
-}