@pzerelles/headlessui-svelte 2.1.2-next.4 → 2.1.2-next.41

package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.js

@@ -0,0 +1,182 @@
+import { computePosition } from "@floating-ui/dom";
+import { deepEqual } from "./utils/deepEqual.js";
+import { getDPR } from "./utils/getDPR.js";
+import { roundByDPR } from "./utils/roundByDPR.js";
+import { useLatestRef } from "./utils/useLatestRef.js";
+import { tick, untrack } from "svelte";
+import { stylePropsToString } from "../../style.js";
+/**
+ * Provides data to position a floating element.
+ * @see https://floating-ui.com/docs/useFloating
+ */
+export function useFloating(options = {}) {
+    const { placement = "bottom", strategy = "absolute", middleware = [], platform, elements: externalElements = {}, transform = true, whileElementsMounted, open, } = $derived(options);
+    const { reference: externalReference, floating: externalFloating } = $derived(externalElements);
+    let data = $state({
+        x: 0,
+        y: 0,
+        strategy,
+        placement,
+        middlewareData: {},
+        isPositioned: false,
+    });
+    const setData = (value) => (data = value);
+    let latestMiddleware = $state(middleware);
+    $effect(() => {
+        if (!deepEqual(latestMiddleware, middleware)) {
+            latestMiddleware = middleware;
+        }
+    });
+    let _reference = $state(null);
+    let _floating = $state(null);
+    const setReference = (node) => {
+        if ((node ?? null) !== referenceRef.current) {
+            referenceRef.current = node ?? null;
+            _reference = node ?? null;
+        }
+    };
+    const setFloating = (node) => {
+        if ((node ?? null) !== floatingRef.current) {
+            floatingRef.current = node ?? null;
+            _floating = node ?? null;
+        }
+    };
+    const referenceEl = $derived((externalReference || _reference));
+    const floatingEl = $derived(externalFloating || _floating);
+    const referenceRef = $state({ current: null });
+    const floatingRef = $state({ current: null });
+    const dataRef = $state({ current: data });
+    const hasWhileElementsMounted = whileElementsMounted != null;
+    const whileElementsMountedRef = useLatestRef({
+        get value() {
+            return whileElementsMounted;
+        },
+    });
+    const platformRef = useLatestRef({
+        get value() {
+            return platform;
+        },
+    });
+    const openRef = useLatestRef({
+        get value() {
+            return open;
+        },
+    });
+    const update = () => {
+        if (!referenceRef.current || !floatingRef.current) {
+            return;
+        }
+        const config = {
+            placement,
+            strategy,
+            middleware: latestMiddleware,
+        };
+        if (platformRef.current) {
+            config.platform = platformRef.current;
+        }
+        computePosition(referenceRef.current, floatingRef.current, config).then(async (data) => {
+            const fullData = {
+                ...data,
+                // The floating element's position may be recomputed while it's closed
+                // but still mounted (such as when transitioning out). To ensure
+                // `isPositioned` will be `false` initially on the next open, avoid
+                // setting it to `true` when `open === false` (must be specified).
+                isPositioned: openRef.current !== false,
+            };
+            if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
+                dataRef.current = fullData;
+                setData(fullData);
+                await tick();
+            }
+        });
+    };
+    $effect(() => {
+        open;
+        untrack(() => {
+            if (open === false && dataRef.current.isPositioned) {
+                dataRef.current.isPositioned = false;
+                data.isPositioned = false;
+            }
+        });
+    });
+    const isMountedRef = $state({ current: false });
+    $effect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    });
+    $effect(() => {
+        if (referenceEl)
+            referenceRef.current = referenceEl;
+        if (floatingEl)
+            floatingRef.current = floatingEl;
+        if (referenceEl && floatingEl) {
+            if (whileElementsMountedRef.current) {
+                return whileElementsMountedRef.current(referenceEl, floatingEl, update);
+            }
+            update();
+        }
+    }); //, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted])
+    const refs = $derived({
+        reference: referenceRef,
+        floating: floatingRef,
+        setReference,
+        setFloating,
+    });
+    const elements = $derived({ reference: referenceEl, floating: floatingEl });
+    const floatingStyles = $derived.by(() => {
+        const initialStyles = {
+            position: strategy,
+            left: 0,
+            top: 0,
+        };
+        if (!elements.floating) {
+            return stylePropsToString(initialStyles);
+        }
+        const x = roundByDPR(elements.floating, data.x);
+        const y = roundByDPR(elements.floating, data.y);
+        if (transform) {
+            return stylePropsToString({
+                ...initialStyles,
+                transform: `translate(${x}px, ${y}px)`,
+                ...(getDPR(elements.floating) >= 1.5 && { "will-change": "transform" }),
+            });
+        }
+        return stylePropsToString({
+            position: strategy,
+            left: x,
+            top: y,
+        });
+    });
+    return {
+        get placement() {
+            return data.placement;
+        },
+        get strategy() {
+            return data.strategy;
+        },
+        get middlewareData() {
+            return data.middlewareData;
+        },
+        get x() {
+            return data.x;
+        },
+        get y() {
+            return data.y;
+        },
+        get isPositioned() {
+            return data.isPositioned;
+        },
+        update,
+        get refs() {
+            return refs;
+        },
+        get elements() {
+            return elements;
+        },
+        get floatingStyles() {
+            return floatingStyles;
+        },
+    };
+}

package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.d.ts

@@ -0,0 +1 @@
+export declare function deepEqual(a: any, b: any): boolean;

package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.js

@@ -0,0 +1,50 @@
+// Fork of `fast-deep-equal` that only does the comparisons we need and compares
+// functions
+export function deepEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (typeof a !== typeof b) {
+        return false;
+    }
+    if (typeof a === "function" && a.toString() === b.toString()) {
+        return true;
+    }
+    let length;
+    let i;
+    let keys;
+    if (a && b && typeof a === "object") {
+        if (Array.isArray(a)) {
+            length = a.length;
+            if (length !== b.length)
+                return false;
+            for (i = length; i-- !== 0;) {
+                if (!deepEqual(a[i], b[i])) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        keys = Object.keys(a);
+        length = keys.length;
+        if (length !== Object.keys(b).length) {
+            return false;
+        }
+        for (i = length; i-- !== 0;) {
+            if (!{}.hasOwnProperty.call(b, keys[i])) {
+                return false;
+            }
+        }
+        for (i = length; i-- !== 0;) {
+            const key = keys[i];
+            if (key === "_owner" && a.$$typeof) {
+                continue;
+            }
+            if (!deepEqual(a[key], b[key])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return a !== a && b !== b;
+}

package/dist/utils/floating-ui/svelte-dom/utils/getDPR.d.ts

@@ -0,0 +1 @@
+export declare function getDPR(element: Element): number;

package/dist/utils/floating-ui/svelte-dom/utils/getDPR.js

@@ -0,0 +1,7 @@
+export function getDPR(element) {
+    if (typeof window === "undefined") {
+        return 1;
+    }
+    const win = element.ownerDocument.defaultView || window;
+    return win.devicePixelRatio || 1;
+}

package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.d.ts

@@ -0,0 +1 @@
+export declare function roundByDPR(element: Element, value: number): number;

package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.js

@@ -0,0 +1,5 @@
+import { getDPR } from "./getDPR.js";
+export function roundByDPR(element, value) {
+    const dpr = getDPR(element);
+    return Math.round(value * dpr) / dpr;
+}

package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.d.ts

@@ -0,0 +1,4 @@
+import type { MutableRefObject } from "../../../ref.svelte.js";
+export declare function useLatestRef<T>(options: {
+    value: T;
+}): MutableRefObject<T>;

package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.js

@@ -0,0 +1,7 @@
+export function useLatestRef(options) {
+    return {
+        get current() {
+            return options.value;
+        },
+    };
+}

package/dist/utils/id.d.ts

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

package/dist/utils/id.js

@@ -2,5 +2,5 @@ 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 useProvidedId = () => getContext("Id");
 export const createIdContext = (id) => setContext("Id", id);

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./types.js";
+export { mergeProps } from "./render.js";
+export { default as DisabledProvider } from "./DisabledProvider.svelte";

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+export * from "./types.js";
+export { mergeProps } from "./render.js";
+export { default as DisabledProvider } from "./DisabledProvider.svelte";

package/dist/utils/state.js

@@ -1,10 +1,10 @@
 export const stateFromSlot = (slot = {}) => {
     if (typeof slot !== "object")
         return {};
-    let dataAttributes = {};
+    const dataAttributes = {};
     let exposeState = false;
-    let states = [];
-    for (let [k, v] of Object.entries(slot)) {
+    const states = [];
+    for (const [k, v] of Object.entries(slot)) {
         if (typeof v === "boolean") {
             exposeState = true;
         }
@@ -14,7 +14,7 @@ export const stateFromSlot = (slot = {}) => {
     }
     if (!exposeState)
         return {};
-    for (let s of states) {
+    for (const s of states) {
         dataAttributes[`data-${s}`] = "";
     }
     return {

package/dist/utils/style.d.ts

@@ -0,0 +1,2 @@
+export declare const camelToKebab: (s: string) => string;
+export declare const stylePropsToString: (props: Record<string, unknown>) => string;

package/dist/utils/style.js

@@ -0,0 +1,6 @@
+export const camelToKebab = (s) => s.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+export const stylePropsToString = (props) => {
+    return Object.entries(props)
+        .map(([key, value]) => `${camelToKebab(key)}: ${typeof value === "number" ? `${value}px` : value}`)
+        .join(";");
+};

package/dist/utils/types.d.ts

@@ -1,24 +1,18 @@
 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 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 ElementType, TSlot = {}> = true extends HasProperty<PropsOf<TTag>, "class"> ? {
-    class?: PropsOf<TTag>["class"] | ((bag: TSlot) => string);
-} : {};
-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 Props<TTag extends string | Record<string, any>, TSlot extends Record<string, any> = {}, Overrides = {}> = Omit<TTag extends string ? SvelteHTMLElements[TTag] : TTag, "asChild" | "children" | "class" | keyof Overrides> & {
+    asChild?: boolean;
+    children?: Snippet<[TSlot & {
+        props?: Record<string, any>;
+    }]>;
+    class?: string | null | ((bag: TSlot) => string);
+} & Overrides;
+export type PropsAsChild<TSlot extends Record<string, any> = {}, Overrides = {}> = {
+    children?: Snippet<[TSlot & {
+        props?: Record<string, any>;
+    }]>;
+} & Overrides;
 export type EnsureArray<T> = T extends any[] ? T : Expand<T>[];
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.4",
+  "version": "2.1.2-next.41",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -13,48 +13,49 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^5.0.0-next.242"
+    "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.7",
+    "@changesets/cli": "^2.27.11",
     "@changesets/types": "^6.0.0",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.49.1",
     "@pzerelles/heroicons-svelte": "^2.1.5",
-    "@sveltejs/adapter-auto": "^3.2.4",
-    "@sveltejs/kit": "^2.5.25",
-    "@sveltejs/package": "^2.3.4",
-    "@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/svelte": "^5.2.1",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.15.3",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.6",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^20.16.1",
+    "@types/node": "^20.17.13",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.9.1",
+    "eslint": "^9.18.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.43.0",
-    "globals": "^15.9.0",
-    "jsdom": "^24.1.3",
+    "eslint-plugin-svelte": "^2.46.1",
+    "globals": "^15.14.0",
+    "jsdom": "^25.0.1",
     "outdent": "^0.8.0",
-    "postcss": "^8.4.41",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.6",
-    "prettier-plugin-tailwindcss": "^0.6.6",
-    "publint": "^0.2.10",
-    "svelte": "^5.0.0-next.242",
-    "svelte-check": "^3.8.6",
-    "tailwindcss": "^3.4.10",
-    "tslib": "^2.7.0",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.3.0",
-    "vite": "^5.4.2",
-    "vitest": "^2.0.5"
+    "postcss": "^8.5.1",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "publint": "^0.3.2",
+    "svelte": "^5.18.0",
+    "svelte-check": "^4.1.4",
+    "tailwindcss": "^3.4.17",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.8"
   },
   "dependencies": {
-    "@floating-ui/core": "^1.6.7",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/core": "^1.6.9",
+    "@floating-ui/dom": "^1.6.13",
+    "@floating-ui/utils": "^0.2.9",
     "clsx": "^2.1.1",
-    "esm-env": "^1.0.0",
-    "nanoid": "^5.0.7"
+    "esm-env": "^1.2.2",
+    "nanoid": "^5.0.9"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/combobox/Combobox.svelte

@@ -1,53 +0,0 @@
-<script lang="ts" module>
-  import type { ElementType, EnsureArray, Props } from "../utils/types.js"
-  import type { ByComparator } from "../hooks/use-by-comparator.js"
-
-  const DEFAULT_COMBOBOX_TAG = "svelte:fragment" as const
-  type ComboboxRenderPropArg<TValue, TActive = TValue> = {
-    open: boolean
-    disabled: boolean
-    activeIndex: number | null
-    activeOption: TActive | null
-    value: TValue
-  }
-
-  export type CheckboxProps<
-    TValue,
-    TMultiple extends boolean | undefined,
-    TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG,
-  > = Props<
-    TTag,
-    ComboboxRenderPropArg<NoInfer<TValue>>,
-    "value" | "defaultValue" | "multiple" | "onChange" | "by",
-    {
-      value?: TMultiple extends true ? EnsureArray<TValue> : TValue
-      defaultValue?: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue>
-
-      onChange?(value: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue> | null): void
-      by?: ByComparator<TMultiple extends true ? EnsureArray<NoInfer<TValue>>[number] : NoInfer<TValue>>
-
-      /** @deprecated The `<Combobox />` is now nullable default */
-      nullable?: boolean
-
-      multiple?: TMultiple
-      disabled?: boolean
-      form?: string
-      name?: string
-      immediate?: boolean
-      virtual?: {
-        options: NoInfer<TValue>[]
-        disabled?: (value: NoInfer<TValue>) => boolean
-      } | null
-
-      onclose?(): void
-
-      __demoMode?: boolean
-    }
-  >
-</script>
-
-<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG">
-  import { useDisabled } from "../hooks/use-disabled.js"
-
-  const providedDisabled = useDisabled()
-</script>

package/dist/combobox/Combobox.svelte.d.ts

@@ -1,50 +0,0 @@
-import type { ElementType, EnsureArray, Props } from "../utils/types.js";
-import type { ByComparator } from "../hooks/use-by-comparator.js";
-declare const DEFAULT_COMBOBOX_TAG: "svelte:fragment";
-type ComboboxRenderPropArg<TValue, TActive = TValue> = {
-    open: boolean;
-    disabled: boolean;
-    activeIndex: number | null;
-    activeOption: TActive | null;
-    value: TValue;
-};
-export type CheckboxProps<TValue, TMultiple extends boolean | undefined, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG> = Props<TTag, ComboboxRenderPropArg<NoInfer<TValue>>, "value" | "defaultValue" | "multiple" | "onChange" | "by", {
-    value?: TMultiple extends true ? EnsureArray<TValue> : TValue;
-    defaultValue?: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue>;
-    onChange?(value: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue> | null): void;
-    by?: ByComparator<TMultiple extends true ? EnsureArray<NoInfer<TValue>>[number] : NoInfer<TValue>>;
-    /** @deprecated The `<Combobox />` is now nullable default */
-    nullable?: boolean;
-    multiple?: TMultiple;
-    disabled?: boolean;
-    form?: string;
-    name?: string;
-    immediate?: boolean;
-    virtual?: {
-        options: NoInfer<TValue>[];
-        disabled?: (value: NoInfer<TValue>) => boolean;
-    } | null;
-    onclose?(): void;
-    __demoMode?: boolean;
-}>;
-declare class __sveltets_Render<TType, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG> {
-    props(): Record<string, never>;
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): string;
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TType, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType, TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType, TTag>['props']>, ReturnType<__sveltets_Render<TType, TTag>['events']>, ReturnType<__sveltets_Render<TType, TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TType, TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TType, TTag>['exports']>;
-    <TType, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(internal: unknown, props: {
-        $$events?: ReturnType<__sveltets_Render<TType, TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TType, TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
-}
-declare const Combobox: $$IsomorphicComponent;
-type Combobox<TType, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG> = InstanceType<typeof Combobox<TType, TTag>>;
-export default Combobox;