@pzerelles/headlessui-svelte 2.1.2-next.3 → 2.1.2-next.31

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/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,20 @@
 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 ElementType = keyof SvelteHTMLElements;
 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";
+export type PropsOf<TTag extends ElementType> = SvelteHTMLElements[TTag];
+type PropsWeControl = "as" | "children" | "class" | "ref" | "slot";
 type CleanProps<TTag extends ElementType, TOmittableProps extends PropertyKey = never> = Omit<PropsOf<TTag>, TOmittableProps | PropsWeControl>;
 type OurProps<TSlot> = {
-    children?: Children<TSlot>;
+    children?: Snippet<[{
+        slot: TSlot;
+        props: Record<string, any>;
+    }]>;
+    class?: string | null | ((bag: TSlot) => string);
     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 ElementType, TSlot = {}, TOmittableProps extends PropertyKey = never, Overrides = {}> = CleanProps<TTag, TOmittableProps | keyof Overrides> & OurProps<TSlot> & 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.3",
+  "version": "2.1.2-next.31",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -13,46 +13,47 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^5.0.0-next.1"
+    "svelte": "^5.0.0-next.244"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.7",
+    "@changesets/cli": "^2.27.8",
     "@changesets/types": "^6.0.0",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.47.2",
     "@pzerelles/heroicons-svelte": "^2.1.5",
-    "@sveltejs/adapter-auto": "^3.2.4",
-    "@sveltejs/kit": "^2.5.24",
-    "@sveltejs/package": "^2.3.4",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/adapter-auto": "^3.2.5",
+    "@sveltejs/kit": "^2.6.1",
+    "@sveltejs/package": "^2.3.5",
+    "@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/svelte": "^5.2.1",
-    "@types/eslint": "^8.56.12",
-    "@types/node": "^20.16.1",
+    "@types/eslint": "^9.6.1",
+    "@types/node": "^20.16.10",
     "autoprefixer": "^10.4.20",
-    "clsx": "^2.1.1",
-    "eslint": "^9.9.1",
+    "eslint": "^9.11.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.43.0",
+    "eslint-plugin-svelte": "^2.44.1",
     "globals": "^15.9.0",
     "jsdom": "^24.1.3",
     "outdent": "^0.8.0",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.6",
-    "prettier-plugin-tailwindcss": "^0.5.14",
-    "publint": "^0.1.16",
-    "svelte": "5.0.0-next.238",
-    "svelte-check": "^3.8.6",
-    "tailwindcss": "^3.4.10",
+    "prettier-plugin-svelte": "^3.2.7",
+    "prettier-plugin-tailwindcss": "^0.6.8",
+    "publint": "^0.2.11",
+    "svelte": "5.0.0-next.260",
+    "svelte-check": "^4.0.4",
+    "tailwindcss": "^3.4.13",
     "tslib": "^2.7.0",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "8.0.0-alpha.28",
-    "vite": "^5.4.2",
-    "vitest": "^2.0.5"
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.7.0",
+    "vite": "^5.4.8",
+    "vitest": "^2.1.1"
   },
   "dependencies": {
-    "@floating-ui/core": "^1.6.7",
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/core": "^1.6.8",
+    "@floating-ui/dom": "^1.6.11",
+    "@floating-ui/utils": "^0.2.8",
+    "clsx": "^2.1.1",
     "esm-env": "^1.0.0",
     "nanoid": "^5.0.7"
   },

package/dist/dialog/InternalDialog.svelte

@@ -1,233 +0,0 @@
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DIALOG_TAG">import { useId } from "../hooks/use-id.js";
-import { useMainTreeNode, useRootContainers } from "../hooks/use-root-containers.svelte.js";
-import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js";
-import { useNestedPortals } from "../portal/InternalPortal.svelte";
-import { getOwnerDocument } from "../utils/owner.js";
-import { DEFAULT_DIALOG_TAG, DialogRenderFeatures } from "./Dialog.svelte";
-import { useInertOthers } from "../hooks/use-inert-others.svelte.js";
-import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
-import { useEscape } from "../hooks/use-escape.svelte.js";
-import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js";
-import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js";
-import { setContext } from "svelte";
-import { useIsTouchDevice } from "../hooks/use-is-touch-device.svelte.js";
-import FocusTrap, { FocusTrapFeatures } from "../focus-trap/FocusTrap.svelte";
-import Portal from "../portal/Portal.svelte";
-import PortalGroup from "../portal/PortalGroup.svelte";
-import ForcePortalRoot from "../internal/ForcePortalRoot.svelte";
-import { createCloseContext } from "../internal/close-provider.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { DialogStates } from "./context.svelte.js";
-import { useDescriptions } from "../description/context.svelte.js";
-const internalId = useId();
-let {
-  ref = $bindable(),
-  id = `headlessui-dialog-${internalId}`,
-  open: theirOpen,
-  onclose,
-  initialFocus,
-  role: theirRole = "dialog",
-  autofocus = true,
-  __demoMode = false,
-  unmount = false,
-  ...theirProps
-} = $props();
-let didWarnOnRole = $state(false);
-const role = $derived.by(() => {
-  if (theirRole === "dialog" || theirRole === "alertdialog") {
-    return theirRole;
-  }
-  if (!didWarnOnRole) {
-    didWarnOnRole = true;
-    console.warn(
-      `Invalid role [${theirRole}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`
-    );
-  }
-  return "dialog";
-});
-const usesOpenClosedState = useOpenClosed();
-const open = $derived(
-  theirOpen === void 0 && usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Open) === State.Open : theirOpen
-);
-const ownerDocument = $derived(getOwnerDocument(ref));
-const dialogState = $derived(open ? DialogStates.Open : DialogStates.Closed);
-let _state = $state({
-  titleId: null,
-  panelRef: null
-});
-const close = $derived(() => onclose(false));
-const setTitleId = (id2) => _state.titleId = id2;
-const enabled = $derived(dialogState === DialogStates.Open);
-const nestedPortals = useNestedPortals();
-const { portals } = $derived(nestedPortals);
-const defaultContainer = {
-  get current() {
-    return _state.panelRef ?? ref;
-  }
-};
-const mainTreeNode = useMainTreeNode();
-let { resolvedContainers: resolvedRootContainers } = $derived(
-  useRootContainers({
-    get mainTreeNode() {
-      return mainTreeNode.node;
-    },
-    get portals() {
-      return portals;
-    },
-    get defaultContainers() {
-      return defaultContainer.current ? [defaultContainer.current] : [];
-    }
-  })
-);
-const isClosing = $derived(
-  usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Closing) === State.Closing : false
-);
-const inertOthersEnabled = $derived(__demoMode ? false : isClosing ? false : enabled);
-useInertOthers({
-  get enabled() {
-    return inertOthersEnabled;
-  },
-  elements: {
-    get allowed() {
-      return [
-        // Allow the headlessui-portal of the Dialog to be interactive. This
-        // contains the current dialog and the necessary focus guard elements.
-        ref?.closest("[data-headlessui-portal]") ?? null
-      ];
-    },
-    get disallowed() {
-      return [
-        // Disallow the "main" tree root node
-        mainTreeNode.node?.closest("body > *:not(#headlessui-portal-root)") ?? null
-      ];
-    }
-  }
-});
-useOutsideClick({
-  get enabled() {
-    return enabled;
-  },
-  get containers() {
-    return resolvedRootContainers;
-  },
-  cb(event) {
-    event.preventDefault();
-    close();
-  }
-});
-useEscape({
-  get enabled() {
-    return enabled;
-  },
-  get view() {
-    return ownerDocument?.defaultView ?? null;
-  },
-  cb(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (document.activeElement && "blur" in document.activeElement && typeof document.activeElement.blur === "function") {
-      document.activeElement.blur();
-    }
-    close();
-  }
-});
-const scrollLockEnabled = $derived(__demoMode ? false : isClosing ? false : enabled);
-useScrollLock({
-  get enabled() {
-    return scrollLockEnabled;
-  },
-  get ownerDocument() {
-    return ownerDocument;
-  },
-  resolveAllowedContainers() {
-    return resolvedRootContainers;
-  }
-});
-useOnDisappear({
-  get enabled() {
-    return enabled;
-  },
-  get ref() {
-    return ref;
-  },
-  get ondisappear() {
-    return close;
-  }
-});
-const describedby = useDescriptions();
-setContext("DialogContext", {
-  get titleId() {
-    return _state.titleId;
-  },
-  get panelRef() {
-    return _state.panelRef;
-  },
-  get dialogState() {
-    return dialogState;
-  },
-  get close() {
-    return close;
-  },
-  get unmount() {
-    return unmount;
-  },
-  setTitleId
-});
-const slot = $derived({ open: dialogState === DialogStates.Open });
-const ourProps = $derived({
-  id,
-  role,
-  tabIndex: -1,
-  "aria-modal": __demoMode ? void 0 : dialogState === DialogStates.Open ? true : void 0,
-  "aria-labelledby": _state.titleId,
-  "aria-describedby": describedby.value,
-  unmount
-});
-const shouldMoveFocusInside = !useIsTouchDevice().value;
-const focusTrapFeatures = $derived.by(() => {
-  let focusTrapFeatures2 = FocusTrapFeatures.None;
-  if (enabled && !__demoMode) {
-    focusTrapFeatures2 |= FocusTrapFeatures.RestoreFocus;
-    focusTrapFeatures2 |= FocusTrapFeatures.TabLock;
-    if (autofocus) {
-      focusTrapFeatures2 |= FocusTrapFeatures.AutoFocus;
-    }
-    if (shouldMoveFocusInside) {
-      focusTrapFeatures2 |= FocusTrapFeatures.InitialFocus;
-    }
-  }
-  return focusTrapFeatures2;
-});
-clearOpenClosedContext();
-createCloseContext({
-  get close() {
-    return close;
-  }
-});
-</script>
-
-<ForcePortalRoot force={true}>
-  <Portal>
-    <PortalGroup target={ref ?? null}>
-      <ForcePortalRoot force={false}>
-        <FocusTrap
-          {initialFocus}
-          initialFocusFallback={ref}
-          containers={resolvedRootContainers}
-          features={focusTrapFeatures}
-        >
-          <ElementOrComponent
-            {ourProps}
-            {theirProps}
-            slots={slot}
-            defaultTag={DEFAULT_DIALOG_TAG}
-            features={DialogRenderFeatures}
-            visible={dialogState === DialogStates.Open}
-            name="Dialog"
-            bind:ref
-          />
-        </FocusTrap>
-      </ForcePortalRoot>
-    </PortalGroup>
-  </Portal>
-</ForcePortalRoot>