placer-toolkit 0.5.1 → 1.0.0-alpha.2

package/src/internal/default-value.ts

@@ -1,40 +0,0 @@
-import { defaultConverter } from "lit";
-import type { ReactiveElement } from "lit";
-
-export const defaultValue =
-    (propertyName = "value") =>
-    (proto: ReactiveElement, key: string) => {
-        const ctor = proto.constructor as typeof ReactiveElement;
-
-        const attributeChangedCallback =
-            ctor.prototype.attributeChangedCallback;
-        ctor.prototype.attributeChangedCallback = function (
-            this: ReactiveElement & { [name: string]: unknown },
-            name,
-            old,
-            value,
-        ) {
-            const options = ctor.getPropertyOptions(propertyName);
-            const attributeName =
-                typeof options.attribute === "string"
-                    ? options.attribute
-                    : propertyName;
-
-            if (name === attributeName) {
-                const converter = options.converter || defaultConverter;
-                const fromAttribute =
-                    typeof converter === "function"
-                        ? converter
-                        : (converter?.fromAttribute ??
-                          defaultConverter.fromAttribute);
-
-                const newValue: unknown = fromAttribute!(value, options.type);
-
-                if (this[propertyName] !== newValue) {
-                    this[key] = newValue;
-                }
-            }
-
-            attributeChangedCallback.call(this, name, old, value);
-        };
-    };

package/src/internal/drag.ts

@@ -1,36 +0,0 @@
-interface DragOptions {
-    onMove: (x: number, y: number) => void;
-    onStop: () => void;
-    initialEvent: PointerEvent;
-}
-
-export function drag(container: HTMLElement, options?: Partial<DragOptions>) {
-    function move(pointerEvent: PointerEvent) {
-        const dims = container.getBoundingClientRect();
-        const defaultView = container.ownerDocument.defaultView!;
-        const offsetX = dims.left + defaultView.scrollX;
-        const offsetY = dims.top + defaultView.scrollY;
-        const x = pointerEvent.pageX - offsetX;
-        const y = pointerEvent.pageY - offsetY;
-
-        if (options?.onMove) {
-            options.onMove(x, y);
-        }
-    }
-
-    function stop() {
-        document.removeEventListener("pointermove", move);
-        document.removeEventListener("pointerup", stop);
-
-        if (options?.onStop) {
-            options.onStop();
-        }
-    }
-
-    document.addEventListener("pointermove", move, { passive: true });
-    document.addEventListener("pointerup", stop);
-
-    if (options?.initialEvent instanceof PointerEvent) {
-        move(options.initialEvent);
-    }
-}

package/src/internal/emit.ts

@@ -1,19 +0,0 @@
-export function emit(
-    target: EventTarget,
-    eventName: string,
-    eventDetail?: CustomEventInit,
-): CustomEvent {
-    const { detail, cancelable, ...rest } = eventDetail || {};
-
-    const event = new CustomEvent(eventName, {
-        bubbles: true,
-        cancelable: cancelable !== undefined ? cancelable : false,
-        composed: true,
-        detail: detail,
-        ...rest,
-    });
-
-    target.dispatchEvent(event);
-
-    return event;
-}

package/src/internal/event.ts

@@ -1,12 +0,0 @@
-export function waitForEvent(element: HTMLElement, eventName: string) {
-    return new Promise<void>((resolve) => {
-        function done(event: Event) {
-            if (event.target === element) {
-                element.removeEventListener(eventName, done);
-                resolve();
-            }
-        }
-
-        element.addEventListener(eventName, done);
-    });
-}

package/src/internal/form.ts

@@ -1,389 +0,0 @@
-import type { ReactiveController, ReactiveControllerHost } from "lit";
-
-export const formCollections: WeakMap<
-    HTMLFormElement,
-    Set<HTMLInputElement>
-> = new WeakMap();
-
-const reportValidityOverloads: WeakMap<HTMLFormElement, () => boolean> =
-    new WeakMap();
-const checkValidityOverloads: WeakMap<HTMLFormElement, () => boolean> =
-    new WeakMap();
-
-const userInteractedControls: WeakSet<HTMLInputElement> = new WeakSet();
-const interactions = new WeakMap<HTMLInputElement, string[]>();
-
-export interface FormControlControllerOptions {
-    form: (input: HTMLInputElement) => HTMLFormElement | null;
-    name: (input: HTMLInputElement) => string;
-    value: (input: HTMLInputElement) => unknown | unknown[];
-    defaultValue: (input: HTMLInputElement) => unknown | unknown[];
-    disabled: (input: HTMLInputElement) => boolean;
-    reportValidity: (input: HTMLInputElement) => boolean;
-    checkValidity: (input: HTMLInputElement) => boolean;
-    setValue: (input: HTMLInputElement, value: unknown) => void;
-    assumeInteractionOn: string[];
-}
-
-export class FormControlController implements ReactiveController {
-    host: HTMLInputElement & ReactiveControllerHost;
-    form?: HTMLFormElement | null;
-    options: FormControlControllerOptions;
-
-    constructor(
-        host: ReactiveControllerHost & HTMLInputElement,
-        options?: Partial<FormControlControllerOptions>,
-    ) {
-        (this.host = host).addController(this);
-        this.options = {
-            form: (input) => input.closest("form"),
-            name: (input) => input.name,
-            value: (input) => input.value,
-            defaultValue: (input) => input.defaultValue,
-            disabled: (input) => input.disabled,
-            reportValidity: (input) =>
-                typeof input.reportValidity === "function"
-                    ? input.reportValidity()
-                    : true,
-            checkValidity: (input) =>
-                typeof input.checkValidity === "function"
-                    ? input.checkValidity()
-                    : true,
-            setValue: (input, value: unknown) =>
-                (input.value = value as string),
-            assumeInteractionOn: ["input"],
-            ...options,
-        };
-    }
-
-    hostConnected() {
-        const form = this.options.form(this.host);
-
-        if (form) {
-            this.attachForm(form);
-        }
-
-        interactions.set(this.host, []);
-        this.options.assumeInteractionOn.forEach((event) => {
-            this.host.addEventListener(event, this.handleInteraction);
-        });
-    }
-
-    hostDisconnected() {
-        this.detachForm();
-
-        interactions.delete(this.host);
-        this.options.assumeInteractionOn.forEach((event) => {
-            this.host.removeEventListener(event, this.handleInteraction);
-        });
-    }
-
-    hostUpdated() {
-        const form = this.options.form(this.host);
-
-        if (!form) {
-            this.detachForm();
-        }
-
-        if (form && this.form !== form) {
-            this.detachForm();
-            this.attachForm(form);
-        }
-
-        if ("hasUpdated" in this.host && this.host.hasUpdated) {
-            this.setValidity(this.host.validity.valid);
-        }
-    }
-
-    private attachForm(form?: HTMLFormElement) {
-        if (form) {
-            this.form = form;
-
-            if (formCollections.has(this.form)) {
-                formCollections.get(this.form)!.add(this.host);
-            } else {
-                formCollections.set(
-                    this.form,
-                    new Set<HTMLInputElement>([this.host]),
-                );
-            }
-
-            this.form.addEventListener("formdata", this.handleFormData);
-            this.form.addEventListener("submit", this.handleFormSubmit);
-            this.form.addEventListener("reset", this.handleFormReset);
-
-            if (!reportValidityOverloads.has(this.form)) {
-                reportValidityOverloads.set(
-                    this.form,
-                    this.form.reportValidity,
-                );
-                this.form.reportValidity = () => this.reportFormValidity();
-            }
-
-            if (!checkValidityOverloads.has(this.form)) {
-                checkValidityOverloads.set(this.form, this.form.checkValidity);
-                this.form.checkValidity = () => this.checkFormValidity();
-            }
-        } else {
-            this.form = undefined;
-        }
-    }
-
-    private detachForm() {
-        if (!this.form) {
-            return;
-        }
-
-        const formCollection = formCollections.get(this.form);
-
-        if (!formCollection) {
-            return;
-        }
-
-        formCollection.delete(this.host);
-
-        if (formCollection.size <= 0) {
-            this.form.removeEventListener("formdata", this.handleFormData);
-            this.form.removeEventListener("submit", this.handleFormSubmit);
-            this.form.removeEventListener("reset", this.handleFormReset);
-
-            if (reportValidityOverloads.has(this.form)) {
-                this.form.reportValidity = reportValidityOverloads.get(
-                    this.form,
-                )!;
-                reportValidityOverloads.delete(this.form);
-            }
-
-            if (checkValidityOverloads.has(this.form)) {
-                this.form.checkValidity = checkValidityOverloads.get(
-                    this.form,
-                )!;
-                checkValidityOverloads.delete(this.form);
-            }
-
-            this.form = undefined;
-        }
-    }
-
-    private handleFormData = (event: FormDataEvent) => {
-        const disabled = this.options.disabled(this.host);
-        const name = this.options.name(this.host);
-        const value = this.options.value(this.host);
-
-        if (
-            this.host.isConnected &&
-            !disabled &&
-            typeof name === "string" &&
-            name.length > 0 &&
-            typeof value !== "undefined"
-        ) {
-            if (Array.isArray(value)) {
-                (value as unknown[]).forEach((val) => {
-                    event.formData.append(
-                        name,
-                        (val as string | number | boolean).toString(),
-                    );
-                });
-            } else {
-                event.formData.append(
-                    name,
-                    (value as string | number | boolean).toString(),
-                );
-            }
-        }
-    };
-
-    private handleFormSubmit = (event: Event) => {
-        const disabled = this.options.disabled(this.host);
-        const reportValidity = this.options.reportValidity;
-
-        if (this.form && !this.form.noValidate) {
-            formCollections.get(this.form)?.forEach((control) => {
-                this.setUserInteracted(control, true);
-            });
-        }
-
-        if (
-            this.form &&
-            !this.form.noValidate &&
-            !disabled &&
-            !reportValidity(this.host)
-        ) {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-        }
-    };
-
-    private handleFormReset = () => {
-        this.options.setValue(this.host, this.options.defaultValue(this.host));
-        this.setUserInteracted(this.host, false);
-        interactions.set(this.host, []);
-    };
-
-    private handleInteraction = (event: Event) => {
-        const emittedEvents = interactions.get(this.host)!;
-
-        if (!emittedEvents.includes(event.type)) {
-            emittedEvents.push(event.type);
-        }
-
-        if (emittedEvents.length === this.options.assumeInteractionOn.length) {
-            this.setUserInteracted(this.host, true);
-        }
-    };
-
-    private checkFormValidity = () => {
-        if (this.form && !this.form.noValidate) {
-            const elements = this.form.querySelectorAll<HTMLInputElement>("*");
-
-            for (const element of Array.from(elements)) {
-                if (typeof element.checkValidity === "function") {
-                    if (!element.checkValidity()) {
-                        return false;
-                    }
-                }
-            }
-        }
-
-        return true;
-    };
-
-    private reportFormValidity = () => {
-        if (this.form && !this.form.noValidate) {
-            const elements = this.form.querySelectorAll<HTMLInputElement>("*");
-
-            for (const element of Array.from(elements)) {
-                if (typeof element.reportValidity === "function") {
-                    if (!element.reportValidity()) {
-                        return false;
-                    }
-                }
-            }
-        }
-
-        return true;
-    };
-
-    private setUserInteracted(el: HTMLInputElement, hasInteracted: boolean) {
-        if (hasInteracted) {
-            userInteractedControls.add(el);
-        } else {
-            userInteractedControls.delete(el);
-        }
-
-        el.dispatchEvent(new Event("update"));
-    }
-
-    private doAction(type: "submit" | "reset", submitter?: HTMLInputElement) {
-        if (this.form) {
-            const button = document.createElement("button");
-            button.type = type;
-            button.style.position = "absolute";
-            button.style.width = "0";
-            button.style.height = "0";
-            button.style.clipPath = "inset(50%)";
-            button.style.overflow = "hidden";
-            button.style.whiteSpace = "nowrap";
-
-            if (submitter) {
-                button.name = submitter.name;
-                button.value = submitter.value;
-
-                [
-                    "formaction",
-                    "formenctype",
-                    "formmethod",
-                    "formnovalidate",
-                    "formtarget",
-                ].forEach((attr) => {
-                    if (submitter.hasAttribute(attr)) {
-                        button.setAttribute(
-                            attr,
-                            submitter.getAttribute(attr)!,
-                        );
-                    }
-                });
-            }
-
-            this.form.append(button);
-            button.click();
-            button.remove();
-        }
-    }
-
-    getForm() {
-        return this.form ?? null;
-    }
-
-    reset(submitter?: HTMLInputElement) {
-        this.doAction("reset", submitter);
-    }
-
-    submit(submitter?: HTMLInputElement) {
-        this.doAction("submit", submitter);
-    }
-
-    setValidity(isValid: boolean) {
-        const host = this.host;
-        const hasInteracted = Boolean(userInteractedControls.has(host));
-        const required = Boolean(host.required);
-
-        host.toggleAttribute("data-required", required);
-        host.toggleAttribute("data-optional", !required);
-        host.toggleAttribute("data-invalid", !isValid);
-        host.toggleAttribute("data-valid", isValid);
-        host.toggleAttribute("data-user-invalid", !isValid && hasInteracted);
-        host.toggleAttribute("data-user-valid", isValid && hasInteracted);
-    }
-
-    updateValidity() {
-        const host = this.host;
-        this.setValidity(host.validity.valid);
-    }
-
-    emitInvalidEvent(originalInvalidEvent?: Event) {
-        const pcInvalidEvent = new CustomEvent<Record<PropertyKey, never>>(
-            "pc-invalid",
-            {
-                bubbles: false,
-                composed: false,
-                cancelable: true,
-                detail: {},
-            },
-        );
-
-        if (!originalInvalidEvent) {
-            pcInvalidEvent.preventDefault();
-        }
-
-        if (!this.host.dispatchEvent(pcInvalidEvent)) {
-            originalInvalidEvent?.preventDefault();
-        }
-    }
-}
-
-export const validValidityState: ValidityState = Object.freeze({
-    badInput: false,
-    customError: false,
-    patternMismatch: false,
-    rangeOverflow: false,
-    rangeUnderflow: false,
-    stepMismatch: false,
-    tooLong: false,
-    tooShort: false,
-    typeMismatch: false,
-    valid: true,
-    valueMissing: false,
-});
-
-export const valueMissingValidityState: ValidityState = Object.freeze({
-    ...validValidityState,
-    valid: false,
-    valueMissing: true,
-});
-
-export const customErrorValidityState: ValidityState = Object.freeze({
-    ...validValidityState,
-    valid: false,
-    customError: true,
-});

package/src/internal/math.ts

@@ -1,14 +0,0 @@
-export function clamp(value: number, min: number, max: number) {
-    const noNegativeZero = (number: number) =>
-        Object.is(number, -0) ? 0 : number;
-
-    if (value < min) {
-        return noNegativeZero(min);
-    }
-
-    if (value > max) {
-        return noNegativeZero(max);
-    }
-
-    return noNegativeZero(value);
-}

package/src/internal/modal.ts

@@ -1,157 +0,0 @@
-import { activeElements, getDeepestActiveElement } from "./active-elements.js";
-import { getTabbableElements } from "./tabbable.js";
-
-let activeModals: HTMLElement[] = [];
-
-export class Modal {
-    element: HTMLElement;
-    isExternalActivated?: boolean;
-    tabDirection: "forward" | "backward" = "forward";
-    currentFocus?: HTMLElement | null;
-    previousFocus?: HTMLElement | null;
-    elementsWithTabbableControls: string[];
-
-    constructor(element: HTMLElement) {
-        this.element = element;
-
-        this.elementsWithTabbableControls = ["iframe"];
-    }
-
-    activate() {
-        activeModals.push(this.element);
-        document.addEventListener("focusin", this.handleFocusIn);
-        document.addEventListener("keydown", this.handleKeyDown);
-        document.addEventListener("keyup", this.handleKeyUp);
-    }
-
-    deactivate() {
-        activeModals = activeModals.filter((modal) => modal !== this.element);
-        this.currentFocus = null;
-        document.removeEventListener("focusin", this.handleFocusIn);
-        document.removeEventListener("keydown", this.handleKeyDown);
-        document.removeEventListener("keyup", this.handleKeyUp);
-    }
-
-    isActive() {
-        return activeModals[activeModals.length - 1] === this.element;
-    }
-
-    activateExternal() {
-        this.isExternalActivated = true;
-    }
-
-    deactivateExternal() {
-        this.isExternalActivated = false;
-    }
-
-    private checkFocus() {
-        if (this.isActive() && !this.isExternalActivated) {
-            const tabbableElements = getTabbableElements(this.element);
-            if (!this.element.matches(":focus-within")) {
-                const start = tabbableElements[0];
-                const end = tabbableElements[tabbableElements.length - 1];
-                const target = this.tabDirection === "forward" ? start : end;
-
-                if (typeof target?.focus === "function") {
-                    this.currentFocus = target;
-                    target.focus({ preventScroll: false });
-                }
-            }
-        }
-    }
-
-    private handleFocusIn = () => {
-        if (!this.isActive()) {
-            return;
-        }
-        this.checkFocus();
-    };
-
-    private possiblyHasTabbableChildren(element: HTMLElement) {
-        return (
-            this.elementsWithTabbableControls.includes(
-                element.tagName.toLowerCase(),
-            ) || element.hasAttribute("controls")
-        );
-    }
-
-    private handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key !== "Tab" || this.isExternalActivated) {
-            return;
-        }
-
-        if (!this.isActive()) {
-            return;
-        }
-
-        const currentActiveElement = getDeepestActiveElement();
-        this.previousFocus = currentActiveElement as HTMLElement | null;
-
-        if (
-            this.previousFocus &&
-            this.possiblyHasTabbableChildren(this.previousFocus)
-        ) {
-            return;
-        }
-
-        if (event.shiftKey) {
-            this.tabDirection = "backward";
-        } else {
-            this.tabDirection = "forward";
-        }
-
-        const tabbableElements = getTabbableElements(this.element);
-
-        let currentFocusIndex = tabbableElements.findIndex(
-            (element) => element === currentActiveElement,
-        );
-
-        this.previousFocus = this.currentFocus;
-
-        const addition = this.tabDirection === "forward" ? 1 : -1;
-
-        while (true) {
-            if (currentFocusIndex + addition >= tabbableElements.length) {
-                currentFocusIndex = 0;
-            } else if (currentFocusIndex + addition < 0) {
-                currentFocusIndex = tabbableElements.length - 1;
-            } else {
-                currentFocusIndex += addition;
-            }
-
-            this.previousFocus = this.currentFocus;
-            const nextFocus = tabbableElements[currentFocusIndex];
-
-            if (this.tabDirection === "backward") {
-                if (
-                    this.previousFocus &&
-                    this.possiblyHasTabbableChildren(this.previousFocus)
-                ) {
-                    return;
-                }
-            }
-
-            if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {
-                return;
-            }
-
-            event.preventDefault();
-            this.currentFocus = nextFocus;
-            this.currentFocus?.focus({ preventScroll: false });
-
-            const allActiveElements = [...activeElements()];
-            if (
-                allActiveElements.includes(this.currentFocus) ||
-                !allActiveElements.includes(this.previousFocus!)
-            ) {
-                break;
-            }
-        }
-
-        setTimeout(() => this.checkFocus());
-    };
-
-    private handleKeyUp = () => {
-        this.tabDirection = "forward";
-    };
-}

package/src/internal/offset.ts

@@ -1,12 +0,0 @@
-export function getOffset(element: HTMLElement, parent: HTMLElement) {
-    return {
-        top: Math.round(
-            element.getBoundingClientRect().top -
-                parent.getBoundingClientRect().top,
-        ),
-        left: Math.round(
-            element.getBoundingClientRect().left -
-                parent.getBoundingClientRect().left,
-        ),
-    };
-}