@pzerelles/headlessui-svelte 2.1.1-next.1 → 2.1.2-next.2

package/dist/utils/active-element-history.js

@@ -0,0 +1,35 @@
+import { focusableSelector } from "./focus-management.js";
+import { onDocumentReady } from "./on-document-ready.js";
+export let history = [];
+onDocumentReady(() => {
+    function handle(e) {
+        if (!(e.target instanceof HTMLElement))
+            return;
+        if (e.target === document.body)
+            return;
+        if (history[0] === e.target)
+            return;
+        let focusableElement = e.target;
+        // Figure out the closest focusable element, this is needed in a situation
+        // where you click on a non-focusable element inside a focusable element.
+        //
+        // E.g.:
+        //
+        // ```html
+        // <button>
+        //   <span>Click me</span>
+        // </button>
+        // ```
+        focusableElement = focusableElement.closest(focusableSelector);
+        history.unshift(focusableElement ?? e.target);
+        // Filter out DOM Nodes that don't exist anymore
+        history = history.filter((x) => x != null && x.isConnected);
+        history.splice(10); // Only keep the 10 most recent items
+    }
+    window.addEventListener("click", handle, { capture: true });
+    window.addEventListener("mousedown", handle, { capture: true });
+    window.addEventListener("focus", handle, { capture: true });
+    document.body.addEventListener("click", handle, { capture: true });
+    document.body.addEventListener("mousedown", handle, { capture: true });
+    document.body.addEventListener("focus", handle, { capture: true });
+});

package/dist/utils/alternative-types.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+export interface SvelteHTMLProps extends SvelteHTMLElements {
+    "svelte:fragment": {};
+}
+export type ElementType = keyof SvelteHTMLProps;
+export type Expand<T> = T extends infer O ? {
+    [K in keyof O]: O[K];
+} : never;
+export type Children<TSlot> = Snippet | Snippet<[TSlot, Record<string, any>]>;
+type OurProps<TSlot> = {
+    children?: Children<TSlot>;
+    ref?: HTMLElement;
+    class?: string | null | ((bag: TSlot) => string);
+};
+type MergeProps3<T, U, V> = {
+    [K in keyof T | keyof U | keyof V]?: K extends keyof V ? V[K] : K extends keyof U ? U[K] : K extends keyof T ? T[K] : never;
+};
+export type Props<TTag extends ElementType, TSlot = {}, TOmittableProps extends PropertyKey = never, Overrides = {}> = MergeProps3<SvelteHTMLProps[TTag], OurProps<TSlot>, Overrides>;
+export type EnsureArray<T> = T extends any[] ? T : Expand<T>[];
+export {};

package/dist/utils/alternative-types.js

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

package/dist/utils/class-names.d.ts

@@ -0,0 +1 @@
+export declare function classNames(...classes: (false | null | undefined | string)[]): string;

package/dist/utils/class-names.js

@@ -0,0 +1,10 @@
+export function classNames(...classes) {
+    return Array.from(new Set(classes.flatMap((value) => {
+        if (typeof value === "string") {
+            return value.split(" ");
+        }
+        return [];
+    })))
+        .filter(Boolean)
+        .join(" ");
+}

package/dist/utils/focus-management.d.ts

@@ -1,3 +1,4 @@
+export declare let focusableSelector: string;
 export declare enum Focus {
     /** Focus the first non-disabled element */
     First = 1,
@@ -35,7 +36,7 @@ export declare enum FocusableMode {
 export declare function isFocusableElement(element: HTMLElement, mode?: FocusableMode): boolean;
 export declare function restoreFocusIfNecessary(element: HTMLElement | null): void;
 export declare function focusElement(element: HTMLElement | null): void;
-export declare function sortByDomNode<T>(nodes: T[], resolveKey?: (item: T) => HTMLElement | null | undefined): T[];
+export declare function sortByDomNode<T>(nodes: T[], resolveKey?: (item: T) => HTMLElement | null): T[];
 export declare function focusFrom(current: HTMLElement | null, focus: Focus): FocusResult;
 export declare function focusIn(container: HTMLElement | HTMLElement[], focus: Focus, { sorted, relativeTo, skipElements, }?: Partial<{
     sorted: boolean;

package/dist/utils/focus-management.js

@@ -3,7 +3,7 @@ import { match } from "./match.js";
 import { getOwnerDocument } from "./owner.js";
 // Credit:
 //  - https://stackoverflow.com/a/30753870
-const focusableSelector = [
+export let focusableSelector = [
     "[contentEditable=true]",
     "[tabindex]",
     "a[href]",
@@ -21,7 +21,7 @@ const focusableSelector = [
         (selector) => `${selector}:not([tabindex='-1']):not([style*='display: none'])`
     : (selector) => `${selector}:not([tabindex='-1'])`)
     .join(",");
-const autoFocusableSelector = [
+let autoFocusableSelector = [
     // In a perfect world this was just `autofocus`, but React doesn't pass `autofocus` to the DOM...
     "[data-autofocus]",
 ]
@@ -105,7 +105,7 @@ export function isFocusableElement(element, mode = FocusableMode.Strict) {
     });
 }
 export function restoreFocusIfNecessary(element) {
-    const ownerDocument = getOwnerDocument(element);
+    let ownerDocument = getOwnerDocument(element);
     disposables().nextFrame(() => {
         if (ownerDocument && !isFocusableElement(ownerDocument.activeElement, FocusableMode.Strict)) {
             focusElement(element);
@@ -144,17 +144,17 @@ export function focusElement(element) {
     element?.focus({ preventScroll: true });
 }
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
-const selectableSelector = ["textarea", "input"].join(",");
+let selectableSelector = ["textarea", "input"].join(",");
 function isSelectableElement(element) {
     return element?.matches?.(selectableSelector) ?? false;
 }
 export function sortByDomNode(nodes, resolveKey = (i) => i) {
     return nodes.slice().sort((aItem, zItem) => {
-        const a = resolveKey(aItem);
-        const z = resolveKey(zItem);
-        if (!a || !z)
+        let a = resolveKey(aItem);
+        let z = resolveKey(zItem);
+        if (a === null || z === null)
             return 0;
-        const position = a.compareDocumentPosition(z);
+        let position = a.compareDocumentPosition(z);
         if (position & Node.DOCUMENT_POSITION_FOLLOWING)
             return -1;
         if (position & Node.DOCUMENT_POSITION_PRECEDING)
@@ -166,7 +166,7 @@ export function focusFrom(current, focus) {
     return focusIn(getFocusableElements(), focus, { relativeTo: current });
 }
 export function focusIn(container, focus, { sorted = true, relativeTo = null, skipElements = [], } = {}) {
-    const ownerDocument = Array.isArray(container)
+    let ownerDocument = Array.isArray(container)
         ? container.length > 0
             ? container[0].ownerDocument
             : document
@@ -185,14 +185,14 @@ export function focusIn(container, focus, { sorted = true, relativeTo = null, sk
         ));
     }
     relativeTo = relativeTo ?? ownerDocument.activeElement;
-    const direction = (() => {
+    let direction = (() => {
         if (focus & (Focus.First | Focus.Next))
             return Direction.Next;
         if (focus & (Focus.Previous | Focus.Last))
             return Direction.Previous;
         throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
     })();
-    const startIndex = (() => {
+    let startIndex = (() => {
         if (focus & Focus.First)
             return 0;
         if (focus & Focus.Previous)
@@ -203,9 +203,9 @@ export function focusIn(container, focus, { sorted = true, relativeTo = null, sk
             return elements.length - 1;
         throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
     })();
-    const focusOptions = focus & Focus.NoScroll ? { preventScroll: true } : {};
+    let focusOptions = focus & Focus.NoScroll ? { preventScroll: true } : {};
     let offset = 0;
-    const total = elements.length;
+    let total = elements.length;
     let next = undefined;
     do {
         // Guard against infinite loops

package/dist/utils/on-document-ready.d.ts

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

package/dist/utils/on-document-ready.js

@@ -0,0 +1,12 @@
+export function onDocumentReady(cb) {
+    function check() {
+        if (document.readyState === "loading")
+            return;
+        cb();
+        document.removeEventListener("DOMContentLoaded", check);
+    }
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+        document.addEventListener("DOMContentLoaded", check);
+        check();
+    }
+}

package/dist/utils/render.d.ts

@@ -28,4 +28,7 @@ export type PropsForFeatures<T extends RenderFeatures> = Expand<UnionToIntersect
     unmount?: boolean;
 }>>>;
 export declare function mergeProps<T extends Props<any, any>[]>(...listOfProps: T): Props<any, any>;
+export declare function mergePropsAdvanced(...listOfProps: Props<any, any>[]): Props<any, any>;
+export declare function compact<T extends Record<any, any>>(object: T): {} & T;
+export declare function omit<T extends Record<any, any>>(object: T, keysToOmit?: string[]): T;
 export {};

package/dist/utils/render.js

@@ -54,3 +54,66 @@ export function mergeProps(...listOfProps) {
     }
     return target;
 }
+// A more complex example fo the `mergeProps` function, this one also cancels subsequent event
+// listeners if the event has already been `preventDefault`ed.
+export function mergePropsAdvanced(...listOfProps) {
+    if (listOfProps.length === 0)
+        return {};
+    if (listOfProps.length === 1)
+        return listOfProps[0];
+    let target = {};
+    let eventHandlers = {};
+    for (let props of listOfProps) {
+        for (let prop in props) {
+            // Collect event handlers
+            if (prop.startsWith("on") && typeof props[prop] === "function") {
+                eventHandlers[prop] ??= [];
+                eventHandlers[prop].push(props[prop]);
+            }
+            else {
+                // Override incoming prop
+                target[prop] = props[prop];
+            }
+        }
+    }
+    // Ensure event listeners are not called if `disabled` or `aria-disabled` is true
+    if (target.disabled || target["aria-disabled"]) {
+        for (let eventName in eventHandlers) {
+            // Prevent default events for `onclick`, `onmousedown`, `onkeydown`, etc.
+            if (/^(on(?:click|pointer|mouse|key)(?:down|up|press)?)$/.test(eventName)) {
+                eventHandlers[eventName] = [(e) => e?.preventDefault?.()];
+            }
+        }
+    }
+    // Merge event handlers
+    for (let eventName in eventHandlers) {
+        Object.assign(target, {
+            [eventName](event, ...args) {
+                let handlers = eventHandlers[eventName];
+                for (let handler of handlers) {
+                    if ((event instanceof Event || event?.nativeEvent instanceof Event) && event.defaultPrevented) {
+                        return;
+                    }
+                    handler(event, ...args);
+                }
+            },
+        });
+    }
+    return target;
+}
+export function compact(object) {
+    let clone = Object.assign({}, object);
+    for (let key in clone) {
+        if (clone[key] === undefined)
+            delete clone[key];
+    }
+    return clone;
+}
+export function omit(object, keysToOmit = []) {
+    let clone = Object.assign({}, object);
+    for (let key of keysToOmit) {
+        if (key in clone)
+            delete clone[key];
+    }
+    return clone;
+}

package/dist/utils/state.d.ts

@@ -1 +1,7 @@
-export declare const stateFromSlot: <TSlot extends Record<string, any>>(slot?: TSlot) => Record<string, string>;
+export type SlotStateProps<TSlot> = {
+    [Property in keyof TSlot as TSlot[Property] extends boolean ? `data-${string & Property}` : never]?: string;
+};
+export type StateProps<TSlot> = SlotStateProps<TSlot> & {
+    "data-headlessui-state"?: string;
+};
+export declare const stateFromSlot: <TSlot>(slot?: TSlot) => StateProps<TSlot>;

package/dist/utils/state.js

@@ -1,4 +1,6 @@
 export const stateFromSlot = (slot = {}) => {
+    if (typeof slot !== "object")
+        return {};
     let dataAttributes = {};
     let exposeState = false;
     let states = [];
@@ -10,11 +12,13 @@ export const stateFromSlot = (slot = {}) => {
             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}`] = "";
-        }
+    if (!exposeState)
+        return {};
+    for (let s of states) {
+        dataAttributes[`data-${s}`] = "";
     }
-    return dataAttributes;
+    return {
+        "data-headlessui-state": states.join(" "),
+        ...dataAttributes,
+    };
 };

package/dist/utils/types.d.ts

@@ -1,27 +1,24 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes, SvelteHTMLElements } from "svelte/elements";
-declare const __: "1D45E01E-AF44-47C4-988A-19A94EBAF55C";
-export type __ = typeof __;
-export type ElementType = keyof SvelteHTMLElements;
-export type HTMLElementType<T extends keyof SvelteHTMLElements> = SvelteHTMLElements[T] extends HTMLAttributes<infer U> ? (U extends HTMLElement ? U : never) : never;
+import type { SvelteHTMLElements } from "svelte/elements";
+export interface SvelteHTMLProps extends SvelteHTMLElements {
+    "svelte:fragment": {};
+}
+export type ElementType = keyof SvelteHTMLProps;
 export type Expand<T> = T extends infer O ? {
     [K in keyof O]: O[K];
 } : never;
-export type PropsOf<TTag extends keyof SvelteHTMLElements> = TTag extends keyof SvelteHTMLElements ? SvelteHTMLElements[TTag] : never;
-type PropsWeControl = "as" | "children" | "class";
-type CleanProps<TTag extends keyof SvelteHTMLElements, TOmittableProps extends PropertyKey = never> = Omit<SvelteHTMLElements[TTag], TOmittableProps | PropsWeControl>;
-type OurProps<TTag extends keyof SvelteHTMLElements, TSlot> = {
-    as?: TTag;
-    children?: Snippet<[TSlot]>;
+export type PropsOf<TTag extends ElementType> = SvelteHTMLProps[TTag];
+export type Children<TSlot> = Snippet | Snippet<[TSlot, Record<string, any>]>;
+type PropsWeControl = "as" | "children" | "refName" | "class";
+type CleanProps<TTag extends ElementType, TOmittableProps extends PropertyKey = never> = Omit<PropsOf<TTag>, TOmittableProps | PropsWeControl>;
+type OurProps<TSlot> = {
+    children?: Children<TSlot>;
+    ref?: HTMLElement;
 };
 type HasProperty<T extends object, K extends PropertyKey> = T extends never ? never : K extends keyof T ? true : never;
-type ClassNameOverride<TTag extends keyof SvelteHTMLElements, TSlot = {}> = true extends HasProperty<PropsOf<TTag>, "class"> ? {
+type ClassNameOverride<TTag extends ElementType, TSlot = {}> = true extends HasProperty<PropsOf<TTag>, "class"> ? {
     class?: PropsOf<TTag>["class"] | ((bag: TSlot) => string);
 } : {};
-export type Props<TTag extends keyof SvelteHTMLElements, TSlot = {}, TOmittableProps extends PropertyKey = never, Overrides = {}> = CleanProps<TTag, TOmittableProps | keyof Overrides> & OurProps<TTag, TSlot> & ClassNameOverride<TTag, TSlot> & Overrides;
-type Without<T, U> = {
-    [P in Exclude<keyof T, keyof U>]?: never;
-};
-export type XOR<T, U> = T | U extends __ ? never : T extends __ ? U : U extends __ ? T : T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export type Props<TTag extends ElementType, TSlot = {}, TOmittableProps extends PropertyKey = never, Overrides = {}> = CleanProps<TTag, TOmittableProps | keyof Overrides> & OurProps<TSlot> & ClassNameOverride<TTag, TSlot> & Overrides;
 export type EnsureArray<T> = T extends any[] ? T : Expand<T>[];
 export {};

package/dist/utils/types.js

@@ -1,6 +1 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-// A unique placeholder we can use as a default. This is nice because we can use this instead of
-// defaulting to null / never / ... and possibly collide with actual data.
-// Ideally we use a unique symbol here.
-const __ = "1D45E01E-AF44-47C4-988A-19A94EBAF55C";
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.1-next.1",
+  "version": "2.1.2-next.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -18,40 +18,41 @@
   "devDependencies": {
     "@changesets/cli": "^2.27.7",
     "@changesets/types": "^6.0.0",
-    "@playwright/test": "^1.45.2",
+    "@playwright/test": "^1.46.1",
     "@pzerelles/heroicons-svelte": "^2.1.5",
-    "@sveltejs/adapter-auto": "^3.2.2",
-    "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/package": "^2.3.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/svelte": "^5.2.0",
-    "@types/eslint": "^8.56.10",
-    "@types/node": "^20.14.10",
-    "autoprefixer": "^10.4.19",
+    "@sveltejs/adapter-auto": "^3.2.4",
+    "@sveltejs/kit": "^2.5.24",
+    "@sveltejs/package": "^2.3.4",
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/svelte": "^5.2.1",
+    "@types/eslint": "^8.56.12",
+    "@types/node": "^20.16.1",
+    "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
-    "eslint": "^9.7.0",
+    "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.42.0",
-    "globals": "^15.8.0",
-    "jsdom": "^24.1.0",
+    "eslint-plugin-svelte": "^2.43.0",
+    "globals": "^15.9.0",
+    "jsdom": "^24.1.3",
     "outdent": "^0.8.0",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.41",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.6",
     "prettier-plugin-tailwindcss": "^0.5.14",
     "publint": "^0.1.16",
-    "svelte": "5.0.0-next.184",
-    "svelte-check": "^3.8.4",
-    "tailwindcss": "^3.4.5",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.3",
+    "svelte": "5.0.0-next.238",
+    "svelte-check": "^3.8.6",
+    "tailwindcss": "^3.4.10",
+    "tslib": "^2.7.0",
+    "typescript": "^5.5.4",
     "typescript-eslint": "8.0.0-alpha.28",
-    "vite": "^5.3.4",
-    "vitest": "^2.0.3"
+    "vite": "^5.4.2",
+    "vitest": "^2.0.5"
   },
   "dependencies": {
-    "@skeletonlabs/floating-ui-svelte": "^0.3.1",
+    "@floating-ui/core": "^1.6.7",
+    "@floating-ui/dom": "^1.6.10",
     "esm-env": "^1.0.0",
     "nanoid": "^5.0.7"
   },

package/dist/tabs/Button.svelte

@@ -1,65 +0,0 @@
-<script lang="ts" context="module">const DEFAULT_BUTTON_TAG = "button";
-</script>
-
-<script lang="ts" generics="TTag extends keyof SvelteHTMLElements, TType">import { useActivePress } from "../hooks/use-active-press.svelte.js";
-import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { stateFromSlot } from "../utils/state.js";
-import { useHover } from "../hooks/use-hover.svelte.js";
-import { mergeProps } from "../utils/render.js";
-const providedDisabled = useDisabled();
-let {
-  as,
-  disabled: ownDisabled = false,
-  autofocus = false,
-  type = "button",
-  children,
-  ...theirProps
-} = $props();
-const disabled = $derived(providedDisabled.value || ownDisabled);
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { pressed: active, pressProps } = $derived(
-  useActivePress({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
-    }
-  })
-);
-const slot = $derived({
-  disabled,
-  hover,
-  focus,
-  active,
-  autofocus
-});
-const ownProps = $derived(
-  mergeProps(
-    {
-      type,
-      disabled: disabled || void 0,
-      autofocus
-    },
-    focusProps,
-    hoverProps,
-    pressProps,
-    stateFromSlot(slot)
-  )
-);
-</script>
-
-<svelte:element this={as ?? DEFAULT_BUTTON_TAG} {...ownProps} {...theirProps}>
-  {#if children}{@render children(slot)}{/if}
-</svelte:element>

package/dist/tabs/Button.svelte.d.ts

@@ -1,39 +0,0 @@
-import type { SvelteHTMLElements } from "svelte/elements";
-export type ButtonProps<TTag extends keyof SvelteHTMLElements = typeof DEFAULT_BUTTON_TAG> = SvelteHTMLElements[TTag] & {
-    as?: TTag;
-    disabled?: boolean;
-    autofocus?: boolean;
-    type?: "button" | "submit" | "reset";
-    children?: Snippet<[
-        {
-            disabled: boolean;
-            hover: boolean;
-            focus: boolean;
-            active: boolean;
-            autofocus: boolean;
-        }
-    ]>;
-};
-declare const DEFAULT_BUTTON_TAG: "button";
-import type { Snippet } from "svelte";
-declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements, TType> {
-    props(): ButtonProps<TTag>;
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends keyof SvelteHTMLElements, TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TType>['props']>, ReturnType<__sveltets_Render<TTag, TType>['events']>, ReturnType<__sveltets_Render<TTag, TType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TType>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    <TTag extends keyof SvelteHTMLElements, TType>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TType>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag, TType>['events']>;
-    }): ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
-}
-declare const Button: $$IsomorphicComponent;
-type Button<TTag extends keyof SvelteHTMLElements, TType> = InstanceType<typeof Button<TTag, TType>>;
-export default Button;

package/dist/utils/close.d.ts

@@ -1,2 +0,0 @@
-export declare const createCloseContext: (close: () => void) => () => void;
-export declare const getCloseContext: () => (() => void) | undefined;

package/dist/utils/close.js

@@ -1,3 +0,0 @@
-import { getContext, setContext } from "svelte";
-export const createCloseContext = (close) => setContext("Close", close);
-export const getCloseContext = () => getContext("Close");