@pzerelles/headlessui-svelte 2.0.0-next.1

package/dist/utils/focusVisible.svelte.js

@@ -0,0 +1,278 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+// Portions of the code in this file are based on code from react.
+// Original licensing for the following can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
+import { getOwnerDocument, getOwnerWindow } from "./dom.js";
+import { isVirtualClick } from "./isVirtualEvent.js";
+import { isMac } from "./platform.js";
+let currentModality = null;
+let changeHandlers = new Set();
+export let hasSetupGlobalListeners = new Map(); // We use a map here to support setting event listeners across multiple document objects.
+let hasEventBeforeFocus = false;
+let hasBlurredWindowRecently = false;
+// Only Tab or Esc keys will make focus visible on text input elements
+const FOCUS_VISIBLE_INPUT_KEYS = {
+    Tab: true,
+    Escape: true,
+};
+function triggerChangeHandlers(modality, e) {
+    for (let handler of changeHandlers) {
+        handler(modality, e);
+    }
+}
+/**
+ * Helper function to determine if a KeyboardEvent is unmodified and could make keyboard focus styles visible.
+ */
+function isValidKey(e) {
+    // Control and Shift keys trigger when navigating back to the tab with keyboard.
+    return !(e.metaKey ||
+        (!isMac() && e.altKey) ||
+        e.ctrlKey ||
+        e.key === "Control" ||
+        e.key === "Shift" ||
+        e.key === "Meta");
+}
+function handleKeyboardEvent(e) {
+    hasEventBeforeFocus = true;
+    if (isValidKey(e)) {
+        currentModality = "keyboard";
+        triggerChangeHandlers("keyboard", e);
+    }
+}
+function handlePointerEvent(e) {
+    currentModality = "pointer";
+    if (e.type === "mousedown" || e.type === "pointerdown") {
+        hasEventBeforeFocus = true;
+        triggerChangeHandlers("pointer", e);
+    }
+}
+function handleClickEvent(e) {
+    if (isVirtualClick(e)) {
+        hasEventBeforeFocus = true;
+        currentModality = "virtual";
+    }
+}
+function handleFocusEvent(e) {
+    // Firefox fires two extra focus events when the user first clicks into an iframe:
+    // first on the window, then on the document. We ignore these events so they don't
+    // cause keyboard focus rings to appear.
+    if (e.target === window || e.target === document) {
+        return;
+    }
+    // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.
+    // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
+    if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
+        currentModality = "virtual";
+        triggerChangeHandlers("virtual", e);
+    }
+    hasEventBeforeFocus = false;
+    hasBlurredWindowRecently = false;
+}
+function handleWindowBlur() {
+    // When the window is blurred, reset state. This is necessary when tabbing out of the window,
+    // for example, since a subsequent focus event won't be fired.
+    hasEventBeforeFocus = false;
+    hasBlurredWindowRecently = true;
+}
+/**
+ * Setup global event listeners to control when keyboard focus style should be visible.
+ */
+function setupGlobalFocusEvents(element) {
+    if (typeof window === "undefined" || hasSetupGlobalListeners.get(getOwnerWindow(element))) {
+        return;
+    }
+    const windowObject = getOwnerWindow(element);
+    const documentObject = getOwnerDocument(element);
+    // Programmatic focus() calls shouldn't affect the current input modality.
+    // However, we need to detect other cases when a focus event occurs without
+    // a preceding user event (e.g. screen reader focus). Overriding the focus
+    // method on HTMLElement.prototype is a bit hacky, but works.
+    let focus = windowObject.HTMLElement.prototype.focus;
+    windowObject.HTMLElement.prototype.focus = function () {
+        hasEventBeforeFocus = true;
+        focus.apply(this, arguments);
+    };
+    documentObject.addEventListener("keydown", handleKeyboardEvent, true);
+    documentObject.addEventListener("keyup", handleKeyboardEvent, true);
+    documentObject.addEventListener("click", handleClickEvent, true);
+    // Register focus events on the window so they are sure to happen
+    // before React's event listeners (registered on the document).
+    windowObject.addEventListener("focus", handleFocusEvent, true);
+    windowObject.addEventListener("blur", handleWindowBlur, false);
+    if (typeof PointerEvent !== "undefined") {
+        documentObject.addEventListener("pointerdown", handlePointerEvent, true);
+        documentObject.addEventListener("pointermove", handlePointerEvent, true);
+        documentObject.addEventListener("pointerup", handlePointerEvent, true);
+    }
+    else {
+        documentObject.addEventListener("mousedown", handlePointerEvent, true);
+        documentObject.addEventListener("mousemove", handlePointerEvent, true);
+        documentObject.addEventListener("mouseup", handlePointerEvent, true);
+    }
+    // Add unmount handler
+    windowObject.addEventListener("beforeunload", () => {
+        tearDownWindowFocusTracking(element);
+    }, { once: true });
+    hasSetupGlobalListeners.set(windowObject, { focus });
+}
+const tearDownWindowFocusTracking = (element, loadListener) => {
+    const windowObject = getOwnerWindow(element);
+    const documentObject = getOwnerDocument(element);
+    if (loadListener) {
+        documentObject.removeEventListener("DOMContentLoaded", loadListener);
+    }
+    if (!hasSetupGlobalListeners.has(windowObject)) {
+        return;
+    }
+    windowObject.HTMLElement.prototype.focus = hasSetupGlobalListeners.get(windowObject).focus;
+    documentObject.removeEventListener("keydown", handleKeyboardEvent, true);
+    documentObject.removeEventListener("keyup", handleKeyboardEvent, true);
+    documentObject.removeEventListener("click", handleClickEvent, true);
+    windowObject.removeEventListener("focus", handleFocusEvent, true);
+    windowObject.removeEventListener("blur", handleWindowBlur, false);
+    if (typeof PointerEvent !== "undefined") {
+        documentObject.removeEventListener("pointerdown", handlePointerEvent, true);
+        documentObject.removeEventListener("pointermove", handlePointerEvent, true);
+        documentObject.removeEventListener("pointerup", handlePointerEvent, true);
+    }
+    else {
+        documentObject.removeEventListener("mousedown", handlePointerEvent, true);
+        documentObject.removeEventListener("mousemove", handlePointerEvent, true);
+        documentObject.removeEventListener("mouseup", handlePointerEvent, true);
+    }
+    hasSetupGlobalListeners.delete(windowObject);
+};
+/**
+ * EXPERIMENTAL
+ * Adds a window (i.e. iframe) to the list of windows that are being tracked for focus visible.
+ *
+ * Sometimes apps render portions of their tree into an iframe. In this case, we cannot accurately track if the focus
+ * is visible because we cannot see interactions inside the iframe. If you have this in your application's architecture,
+ * then this function will attach event listeners inside the iframe. You should call `addWindowFocusTracking` with an
+ * element from inside the window you wish to add. We'll retrieve the relevant elements based on that.
+ * Note, you do not need to call this for the default window, as we call it for you.
+ *
+ * When you are ready to stop listening, but you do not wish to unmount the iframe, you may call the cleanup function
+ * returned by `addWindowFocusTracking`. Otherwise, when you unmount the iframe, all listeners and state will be cleaned
+ * up automatically for you.
+ *
+ * @param element @default document.body - The element provided will be used to get the window to add.
+ * @returns A function to remove the event listeners and cleanup the state.
+ */
+export function addWindowFocusTracking(element) {
+    const documentObject = getOwnerDocument(element);
+    let loadListener;
+    if (documentObject.readyState !== "loading") {
+        setupGlobalFocusEvents(element);
+    }
+    else {
+        loadListener = () => {
+            setupGlobalFocusEvents(element);
+        };
+        documentObject.addEventListener("DOMContentLoaded", loadListener);
+    }
+    return () => tearDownWindowFocusTracking(element, loadListener);
+}
+// Server-side rendering does not have the document object defined
+// eslint-disable-next-line no-restricted-globals
+if (typeof document !== "undefined") {
+    addWindowFocusTracking();
+}
+/**
+ * If true, keyboard focus is visible.
+ */
+export function isFocusVisible() {
+    return currentModality !== "pointer";
+}
+export function getInteractionModality() {
+    return currentModality;
+}
+export function setInteractionModality(modality) {
+    currentModality = modality;
+    triggerChangeHandlers(modality, null);
+}
+/**
+ * Keeps state of the current modality.
+ */
+/*export function useInteractionModality(): Modality | null {
+  setupGlobalFocusEvents()
+
+  let [modality, setModality] = useState(currentModality)
+  useEffect(() => {
+    let handler = () => {
+      setModality(currentModality)
+    }
+
+    changeHandlers.add(handler)
+    return () => {
+      changeHandlers.delete(handler)
+    }
+  }, [])
+
+  return useIsSSR() ? null : modality
+}*/
+const nonTextInputTypes = new Set(["checkbox", "radio", "range", "color", "file", "image", "button", "submit", "reset"]);
+/**
+ * If this is attached to text input component, return if the event is a focus event (Tab/Escape keys pressed) so that
+ * focus visible style can be properly set.
+ */
+function isKeyboardFocusEvent(isTextInput, modality, e) {
+    const IHTMLInputElement = typeof window !== "undefined" ? getOwnerWindow(e?.target).HTMLInputElement : HTMLInputElement;
+    const IHTMLTextAreaElement = typeof window !== "undefined" ? getOwnerWindow(e?.target).HTMLTextAreaElement : HTMLTextAreaElement;
+    const IHTMLElement = typeof window !== "undefined" ? getOwnerWindow(e?.target).HTMLElement : HTMLElement;
+    const IKeyboardEvent = typeof window !== "undefined" ? getOwnerWindow(e?.target).KeyboardEvent : KeyboardEvent;
+    isTextInput =
+        isTextInput ||
+            (e?.target instanceof IHTMLInputElement && !nonTextInputTypes.has(e.target.type)) ||
+            e?.target instanceof IHTMLTextAreaElement ||
+            (e?.target instanceof IHTMLElement && e.target.isContentEditable);
+    return !(isTextInput &&
+        modality === "keyboard" &&
+        e instanceof IKeyboardEvent &&
+        !FOCUS_VISIBLE_INPUT_KEYS[e.key]);
+}
+/**
+ * Manages focus visible state for the page, and subscribes individual components for updates.
+ */
+/*export function useFocusVisible(props: FocusVisibleProps = {}): FocusVisibleResult {
+  let { isTextInput, autoFocus } = props
+  let [isFocusVisibleState, setFocusVisible] = useState(autoFocus || isFocusVisible())
+  useFocusVisibleListener(
+    (isFocusVisible) => {
+      setFocusVisible(isFocusVisible)
+    },
+    [isTextInput],
+    { isTextInput }
+  )
+
+  return { isFocusVisible: isFocusVisibleState }
+}*/
+/**
+ * Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).
+ */
+export function useFocusVisibleListener(fn, opts) {
+    setupGlobalFocusEvents();
+    $effect(() => {
+        const handler = (modality, e) => {
+            if (!isKeyboardFocusEvent(!!opts?.isTextInput, modality, e)) {
+                return;
+            }
+            fn(isFocusVisible());
+        };
+        changeHandlers.add(handler);
+        return () => {
+            changeHandlers.delete(handler);
+        };
+    });
+}

package/dist/utils/form.d.ts

@@ -0,0 +1,4 @@
+type Entries = [string, string][];
+export declare function objectToFormEntries(source?: Record<string, any>, parentKey?: string | null, entries?: Entries): Entries;
+export declare function attemptSubmit(elementInForm: HTMLElement): void;
+export {};

package/dist/utils/form.js

@@ -0,0 +1,57 @@
+export function objectToFormEntries(source = {}, parentKey = null, entries = []) {
+    for (let [key, value] of Object.entries(source)) {
+        append(entries, composeKey(parentKey, key), value);
+    }
+    return entries;
+}
+function composeKey(parent, key) {
+    return parent ? parent + "[" + key + "]" : key;
+}
+function append(entries, key, value) {
+    if (Array.isArray(value)) {
+        for (let [subkey, subvalue] of value.entries()) {
+            append(entries, composeKey(key, subkey.toString()), subvalue);
+        }
+    }
+    else if (value instanceof Date) {
+        entries.push([key, value.toISOString()]);
+    }
+    else if (typeof value === "boolean") {
+        entries.push([key, value ? "1" : "0"]);
+    }
+    else if (typeof value === "string") {
+        entries.push([key, value]);
+    }
+    else if (typeof value === "number") {
+        entries.push([key, `${value}`]);
+    }
+    else if (value === null || value === undefined) {
+        entries.push([key, ""]);
+    }
+    else {
+        objectToFormEntries(value, key, entries);
+    }
+}
+export function attemptSubmit(elementInForm) {
+    let form = elementInForm?.form ?? elementInForm.closest("form");
+    if (!form)
+        return;
+    for (let element of form.elements) {
+        if (element === elementInForm)
+            continue;
+        if ((element.tagName === "INPUT" && element.type === "submit") ||
+            (element.tagName === "BUTTON" && element.type === "submit") ||
+            (element.nodeName === "INPUT" && element.type === "image")) {
+            // If you press `enter` in a normal input[type='text'] field, then the form will submit by
+            // searching for the a submit element and "click" it. We could also use the
+            // `form.requestSubmit()` function, but this has a downside where an `event.preventDefault()`
+            // inside a `click` listener on the submit button won't stop the form from submitting.
+            element.click();
+            return;
+        }
+    }
+    // If we get here, then there is no submit button in the form. We can use the
+    // `form.requestSubmit()` function to submit the form instead. We cannot use `form.submit()`
+    // because then the `submit` event won't be fired and `onSubmit` listeners won't be fired.
+    form.requestSubmit?.();
+}

package/dist/utils/id.d.ts

@@ -0,0 +1,4 @@
+export declare const alphaid: (size?: number | undefined) => string;
+export declare const htmlid: (size?: number) => string;
+export declare const getIdContext: () => string | undefined;
+export declare const createIdContext: (id: string) => string | undefined;

package/dist/utils/id.js

@@ -0,0 +1,6 @@
+import { nanoid, customAlphabet } from "nanoid";
+import { getContext, setContext } from "svelte";
+export const alphaid = customAlphabet("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz");
+export const htmlid = (size = 10) => alphaid(1) + nanoid(size - 1);
+export const getIdContext = () => getContext("Id");
+export const createIdContext = (id) => setContext("Id", id);

package/dist/utils/isVirtualEvent.d.ts

@@ -0,0 +1,2 @@
+export declare function isVirtualClick(event: MouseEvent | PointerEvent): boolean;
+export declare function isVirtualPointerEvent(event: PointerEvent): boolean;

package/dist/utils/isVirtualEvent.js

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { isAndroid } from "./platform.js";
+// Original licensing for the following method can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/facebook/react/blob/3c713d513195a53788b3f8bb4b70279d68b15bcc/packages/react-interactions/events/src/dom/shared/index.js#L74-L87
+// Keyboards, Assistive Technologies, and element.click() all produce a "virtual"
+// click event. This is a method of inferring such clicks. Every browser except
+// IE 11 only sets a zero value of "detail" for click events that are "virtual".
+// However, IE 11 uses a zero value for all click events. For IE 11 we rely on
+// the quirk that it produces click events that are of type PointerEvent, and
+// where only the "virtual" click lacks a pointerType field.
+export function isVirtualClick(event) {
+    // JAWS/NVDA with Firefox.
+    if (event.mozInputSource === 0 && event.isTrusted) {
+        return true;
+    }
+    // Android TalkBack's detail value varies depending on the event listener providing the event so we have specific logic here instead
+    // If pointerType is defined, event is from a click listener. For events from mousedown listener, detail === 0 is a sufficient check
+    // to detect TalkBack virtual clicks.
+    if (isAndroid() && event.pointerType) {
+        return event.type === "click" && event.buttons === 1;
+    }
+    return event.detail === 0 && !event.pointerType;
+}
+export function isVirtualPointerEvent(event) {
+    // If the pointer size is zero, then we assume it's from a screen reader.
+    // Android TalkBack double tap will sometimes return a event with width and height of 1
+    // and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
+    // Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
+    // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216. event.pointerType === 'mouse' is to distingush
+    // Talkback double tap from Windows Firefox touch screen press
+    return ((!isAndroid() && event.width === 0 && event.height === 0) ||
+        (event.width === 1 &&
+            event.height === 1 &&
+            event.pressure === 0 &&
+            event.detail === 0 &&
+            event.pointerType === "mouse"));
+}

package/dist/utils/microTask.d.ts

@@ -0,0 +1 @@
+export declare function microTask(cb: () => void): void;

package/dist/utils/microTask.js

@@ -0,0 +1,13 @@
+// Polyfill
+export function microTask(cb) {
+    if (typeof queueMicrotask === "function") {
+        queueMicrotask(cb);
+    }
+    else {
+        Promise.resolve()
+            .then(cb)
+            .catch((e) => setTimeout(() => {
+            throw e;
+        }));
+    }
+}

package/dist/utils/object.d.ts

@@ -0,0 +1 @@
+export declare function compact<T extends Record<any, any>>(object: T): {} & T;

package/dist/utils/object.js

@@ -0,0 +1,8 @@
+export function compact(object) {
+    let clone = Object.assign({}, object);
+    for (let key in clone) {
+        if (clone[key] === undefined)
+            delete clone[key];
+    }
+    return clone;
+}

package/dist/utils/platform.d.ts

@@ -0,0 +1,4 @@
+export declare function testUserAgent(re: RegExp): any;
+export declare function testPlatform(re: RegExp): boolean;
+export declare const isMac: () => boolean;
+export declare const isAndroid: () => boolean;

package/dist/utils/platform.js

@@ -0,0 +1,29 @@
+export function testUserAgent(re) {
+    if (typeof window === "undefined" || window.navigator == null) {
+        return false;
+    }
+    return (window.navigator["userAgentData"]?.brands.some((brand) => re.test(brand.brand)) || re.test(window.navigator.userAgent));
+}
+export function testPlatform(re) {
+    return typeof window !== "undefined" && window.navigator != null
+        ? re.test(window.navigator["userAgentData"]?.platform || window.navigator.platform)
+        : false;
+}
+function cached(fn) {
+    if (process.env.NODE_ENV === "test") {
+        return fn;
+    }
+    let res = null;
+    return () => {
+        if (res == null) {
+            res = fn();
+        }
+        return res;
+    };
+}
+export const isMac = cached(function () {
+    return testPlatform(/^Mac/i);
+});
+export const isAndroid = cached(function () {
+    return testUserAgent(/Android/i);
+});

package/dist/utils/state.d.ts

@@ -0,0 +1 @@
+export declare const stateFromSlot: <TSlot extends Record<string, any>>(slot?: TSlot) => Record<string, string>;

package/dist/utils/state.js

@@ -0,0 +1,20 @@
+export const stateFromSlot = (slot = {}) => {
+    let dataAttributes = {};
+    let exposeState = false;
+    let states = [];
+    for (let [k, v] of Object.entries(slot)) {
+        if (typeof v === "boolean") {
+            exposeState = true;
+        }
+        if (v === true) {
+            states.push(k.replace(/([A-Z])/g, (m) => `-${m.toLowerCase()}`));
+        }
+    }
+    if (exposeState) {
+        dataAttributes["data-headlessui-state"] = states.join(" ");
+        for (let s of states) {
+            dataAttributes[`data-${s}`] = "";
+        }
+    }
+    return dataAttributes;
+};

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@pzerelles/headlessui-svelte",
+  "version": "2.0.0-next.1",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0-next.1"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.5",
+    "@changesets/types": "^6.0.0",
+    "@playwright/test": "^1.44.1",
+    "@sveltejs/adapter-auto": "^3.2.1",
+    "@sveltejs/kit": "^2.5.10",
+    "@sveltejs/package": "^2.3.1",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@types/eslint": "^8.56.10",
+    "@types/node": "^20.14.2",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^9.4.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.39.0",
+    "globals": "^15.3.0",
+    "outdent": "^0.8.0",
+    "postcss": "^8.4.38",
+    "prettier": "^3.3.1",
+    "prettier-plugin-svelte": "^3.2.3",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "publint": "^0.1.16",
+    "svelte": "5.0.0-next.150",
+    "svelte-check": "^3.8.0",
+    "tailwindcss": "^3.4.4",
+    "tslib": "^2.6.3",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "8.0.0-alpha.28",
+    "vite": "^5.2.12",
+    "vitest": "^1.6.0"
+  },
+  "dependencies": {
+    "nanoid": "^5.0.7",
+    "svelte-interactions": "^0.2.0"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "test": "npm run test:integration && npm run test:unit",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
+    "test:integration": "playwright test",
+    "test:unit": "vitest",
+    "release": "pnpm package && changeset publish"
+  }
+}