@pzerelles/headlessui-svelte 2.1.2-next.2 → 2.1.2-next.20

package/dist/internal/floating.svelte.js

@@ -1,47 +1,54 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable prefer-const */
+import { useInteractions } from "../utils/floating-ui/svelte/index.js";
 import { useDisposables } from "../utils/disposables.js";
-import { computePosition } from "@floating-ui/dom";
-import { flip as flipMiddleware, 
-//inner as innerMiddleware,
-offset as offsetMiddleware, shift as shiftMiddleware, size as sizeMiddleware, } from "@floating-ui/core";
-/*import {
-  autoUpdate,
-  useFloating as _useFloating,
-  //useInnerOffset,
-  useInteractions,
-  //type InnerProps,
-  type UseFloatingReturn,
-} from "@skeletonlabs/floating-ui-svelte"*/
-import { getContext, setContext, untrack } from "svelte";
-export function useResolvedAnchor(anchor) {
-    if (!anchor)
-        return null; // Disable entirely
-    if (typeof anchor === "string")
-        return { to: anchor }; // Simple string based value,
-    return anchor; // User-provided value
+import { getContext, untrack } from "svelte";
+export { useFloatingProvider } from "./floating-provider.svelte.js";
+export function useResolvedAnchor(options) {
+    const { anchor } = $derived(options);
+    return {
+        get anchor() {
+            if (!anchor)
+                return null; // Disable entirely
+            if (typeof anchor === "string")
+                return { to: anchor }; // Simple string based value,
+            return anchor; // User-provided value
+        },
+    };
 }
-export function useFloating() {
-    return getContext("FloatingContext");
+export function useFloatingReference() {
+    const context = getContext("FloatingContext");
+    return {
+        get setReference() {
+            return context.setReference;
+        },
+    };
+}
+export function useFloatingReferenceProps() {
+    const context = getContext("FloatingContext");
+    return {
+        get getReferenceProps() {
+            return context.getReferenceProps;
+        },
+    };
 }
 export function useFloatingPanelProps() {
-    const { getFloatingProps, slot } = getContext("FloatingContext");
+    const context = getContext("FloatingContext");
+    const { getFloatingProps, slot } = $derived(context);
     return (...args) => {
         return Object.assign({}, getFloatingProps(...args), {
             "data-anchor": slot.anchor,
         });
     };
 }
-export function useFloatingPanel(options) {
-    const placement = $derived.by(() => {
-        if (options.placement === false)
-            return null; // Disable entirely
-        if (typeof options.placement === "string")
-            return { to: options.placement }; // Simple string based value
-        return options.placement;
-    });
-    const updatePlacementConfig = getContext("PlacementContext");
+export function useFloatingPanel(options = { placement: null }) {
+    const placement = $derived(options.placement === false
+        ? null
+        : typeof options.placement === "string"
+            ? { to: options.placement }
+            : options.placement);
+    //if (placement === false) placement = null // Disable entirely
+    //if (typeof placement === "string") placement = { to: placement } // Simple string based value
+    const placementContext = getContext("PlacementContext");
+    const { updatePlacementConfig } = $derived(placementContext);
     const trigger = $derived(JSON.stringify(placement, typeof HTMLElement !== "undefined"
         ? (_, v) => {
             if (v instanceof HTMLElement) {
@@ -51,6 +58,7 @@ export function useFloatingPanel(options) {
         }
         : undefined));
     const stablePlacement = $derived.by(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         trigger;
         return untrack(() => placement);
     });
@@ -62,233 +70,41 @@ export function useFloatingPanel(options) {
         get setFloating() {
             return context.setFloating;
         },
-        get style() {
+        get styles() {
             return placement ? context.styles : undefined;
         },
     };
 }
-// TODO: Make this a config part of the `config`. Just need to decide on a name.
-//let MINIMUM_ITEMS_VISIBLE = 4
-export const createFloatingContext = ({ enabled = true } = {}) => {
-    let config = $state(null);
-    //let innerOffset = $state(0)
-    //let overflowRef = $state<HTMLElement | null>(null)
-    let referenceEl = $state(null);
-    let floatingEl = $state(null);
-    $effect(() => useFixScrollingPixel(floatingEl));
-    const isEnabled = $derived(enabled && config !== null && floatingEl !== null);
-    const { to: placement = "bottom", gap = 0, offset = 0, padding = 0, inner, } = $derived(useResolvedConfig({
-        get config() {
-            return config;
-        },
-        get element() {
-            return floatingEl;
-        },
-    }));
-    const [to, align = "center"] = $derived(placement.split(" "));
-    // Reset
-    $effect(() => {
-        if (!isEnabled)
-            return;
-        //innerOffset = 0
-    });
-    let floatingStyles = $state();
-    let context = $state();
-    let currentComputeId = $state(0);
+export function useFixScrollingPixel(options) {
+    const { element } = $derived(options);
     $effect(() => {
-        if (!referenceEl || !floatingEl)
+        if (!element)
             return;
-        const computeId = untrack(() => currentComputeId + 1);
-        currentComputeId = computeId;
-        computePosition(referenceEl, floatingEl, {
-            placement: to === "selection"
-                ? align === "center"
-                    ? "bottom"
-                    : `bottom-${align}`
-                : align === "center"
-                    ? `${to}`
-                    : `${to}-${align}`,
-            // This component will be used in combination with a `Portal`, which means the floating
-            // element will be rendered outside of the current DOM tree.
-            strategy: "absolute",
-            middleware: [
-                // - The `mainAxis` is set to `gap` which defines the gap between the panel and the
-                //   trigger/reference.
-                // - The `crossAxis` is set to `offset` which nudges the panel from its original position.
-                //
-                // When we are showing the panel on top of the selected item, we don't want a gap between the
-                // reference and the panel, therefore setting the `mainAxis` to `0`.
-                offsetMiddleware({
-                    mainAxis: to === "selection" ? 0 : gap,
-                    crossAxis: offset,
-                }),
-                // When the panel overflows the viewport, we will try to nudge the panel to the other side to
-                // ensure it's not clipped. We use the `padding` to define the  minimum space between the
-                // panel and the viewport.
-                shiftMiddleware({ padding }),
-                // The `flip` middleware will swap the `placement` of the panel if there is not enough room.
-                // This is not compatible with the `inner` middleware (which is only enabled when `to` is set
-                // to "selection").
-                to !== "selection" && flipMiddleware({ padding }),
-                // The `inner` middleware will ensure the panel is always fully visible on screen and
-                // positioned on top of the reference and moved to the currently selected item.
-                to === "selection" && inner
-                    ? null /* TODO: use inner when available: innerMiddleware({
-                          ...inner,
-                          padding, // For overflow detection
-                          overflowRef,
-                          offset: innerOffset,
-                          minItemsVisible: MINIMUM_ITEMS_VISIBLE,
-                          referenceOverflowThreshold: padding,
-                          onFallbackChange(fallback) {
-                            if (!fallback) return
-                            let parent = context.elements.floating
-                            if (!parent) return
-                            let scrollPaddingBottom =
-                              parseFloat(getComputedStyle(parent!).scrollPaddingBottom) || 0
-              
-                            // We want at least X visible items, but if there are less than X items in the list,
-                            // we want to show as many as possible.
-                            let missing = Math.min(MINIMUM_ITEMS_VISIBLE, parent.childElementCount)
-              
-                            let elementHeight = 0
-                            let elementAmountVisible = 0
-              
-                            for (let child of context.elements.floating?.childNodes ?? []) {
-                              if (child instanceof HTMLElement) {
-                                let childTop = child.offsetTop
-                                // It can be that the child is fully visible, but we also want to keep the scroll
-                                // padding into account to ensure the UI looks good. Therefore we fake that the
-                                // bottom of the child is actually `scrollPaddingBottom` amount of pixels lower.
-                                let childBottom = childTop + child.clientHeight + scrollPaddingBottom
-              
-                                let parentTop = parent.scrollTop
-                                let parentBottom = parentTop + parent.clientHeight
-              
-                                // Figure out if the child is fully visible in the scroll parent.
-                                if (childTop >= parentTop && childBottom <= parentBottom) {
-                                  missing--
-                                } else {
-                                  // Not fully visible, so we will use this child to calculate the height of
-                                  // each item. We will also use this to calculate how much of the item is
-                                  // already visible.
-                                  elementAmountVisible = Math.max(
-                                    0,
-                                    Math.min(childBottom, parentBottom) - Math.max(childTop, parentTop)
-                                  )
-                                  elementHeight = child.clientHeight
-                                  break
-                                }
-                              }
-                            }
-              
-                            // There are fewer visible items than we want, so we will try to nudge the offset
-                            // to show more items.
-                            if (missing >= 1) {
-                              setInnerOffset((existingOffset) => {
-                                let newInnerOffset =
-                                  elementHeight * missing - // `missing` amount of `elementHeight`
-                                  elementAmountVisible + // The amount of the last item that is visible
-                                  scrollPaddingBottom // The scroll padding to ensure the UI looks good
-              
-                                // Nudged enough already, no need to continue
-                                if (existingOffset >= newInnerOffset) {
-                                  return existingOffset
-                                }
-              
-                                return newInnerOffset
-                              })
-                            }
-                          },
-                        })*/
-                    : null,
-                // The `size` middleware will ensure the panel is never bigger than the viewport minus the
-                // provided `padding` that we want.
-                sizeMiddleware({
-                    padding,
-                    apply({ availableWidth, availableHeight, elements }) {
-                        Object.assign(elements.floating.style, {
-                            overflow: "auto",
-                            maxWidth: `${availableWidth}px`,
-                            maxHeight: `min(var(--anchor-max-height, 100vh), ${availableHeight}px)`,
-                        });
-                    },
-                }),
-            ].filter(Boolean),
-        }).then((res) => {
-            if (currentComputeId === computeId) {
-                // Ensure only the last compute updates the context if multiple are running in parallel
-                context = res;
-                const { x, y } = res;
-                floatingStyles = `position: absolute; left: ${x}px; top: ${y}px;`;
-            }
+        untrack(() => {
+            let observer = new MutationObserver(() => {
+                let maxHeight = window.getComputedStyle(element).maxHeight;
+                let maxHeightFloat = parseFloat(maxHeight);
+                if (isNaN(maxHeightFloat))
+                    return;
+                let maxHeightInt = parseInt(maxHeight);
+                if (isNaN(maxHeightInt))
+                    return;
+                if (maxHeightFloat !== maxHeightInt) {
+                    element.style.maxHeight = `${Math.ceil(maxHeightFloat)}px`;
+                }
+            });
+            observer.observe(element, {
+                attributes: true,
+                attributeFilter: ["style"],
+            });
+            return () => {
+                observer.disconnect();
+            };
         });
     });
-    // Calculate placement information to expose as data attributes
-    let [exposedTo = to, exposedAlign = align] = context?.placement.split("-") ?? [];
-    // If user-land code is using custom styles specifically for `bottom`, but
-    // they chose `selection`, then we want to make sure to map it to selection
-    // again otherwise styles could be wrong.
-    if (to === "selection")
-        exposedTo = "selection";
-    const data = $derived({
-        anchor: [exposedTo, exposedAlign].filter(Boolean).join(" "),
-    });
-    /*let innerOffsetConfig = useInnerOffset(context, {
-        overflowRef,
-        onChange: setInnerOffset,
-      })*/
-    const getReferenceProps = () => ({});
-    const getFloatingProps = () => ({});
-    /*let { getReferenceProps, getFloatingProps } = useInteractions([
-      innerOffsetConfig
-    ])*/
-    const floatingContext = {
-        setFloating: (floating) => {
-            floatingEl = floating || null;
-        },
-        setReference: (reference) => {
-            referenceEl = reference || null;
-        },
-        get styles() {
-            return floatingStyles;
-        },
-        getReferenceProps,
-        getFloatingProps,
-        get slot() {
-            return data;
-        },
-    };
-    setContext("FloatingContext", floatingContext);
-    setContext("PlacementContext", (value) => {
-        config = value;
-    });
-    return floatingContext;
-};
-function useFixScrollingPixel(element) {
-    if (!element)
-        return;
-    let observer = new MutationObserver(() => {
-        let maxHeight = window.getComputedStyle(element).maxHeight;
-        let maxHeightFloat = parseFloat(maxHeight);
-        if (isNaN(maxHeightFloat))
-            return;
-        let maxHeightInt = parseInt(maxHeight);
-        if (isNaN(maxHeightInt))
-            return;
-        if (maxHeightFloat !== maxHeightInt) {
-            element.style.maxHeight = `${Math.ceil(maxHeightFloat)}px`;
-        }
-    });
-    observer.observe(element, {
-        attributes: true,
-        attributeFilter: ["style"],
-    });
-    return () => {
-        observer.disconnect();
-    };
 }
-function useResolvedConfig({ config, element, }) {
+export function useResolvedConfig(options) {
+    const { config, element } = $derived(options);
     const gap = useResolvePxValue({
         get input() {
             return config?.gap ?? "var(--anchor-gap, 0)";
@@ -299,7 +115,7 @@ function useResolvedConfig({ config, element, }) {
     });
     const offset = useResolvePxValue({
         get input() {
-            return config?.gap ?? "var(--anchor-offset, 0)";
+            return config?.offset ?? "var(--anchor-offset, 0)";
         },
         get element() {
             return element;
@@ -307,7 +123,7 @@ function useResolvedConfig({ config, element, }) {
     });
     const padding = useResolvePxValue({
         get input() {
-            return config?.gap ?? "var(--anchor-padding, 0)";
+            return config?.padding ?? "var(--anchor-padding, 0)";
         },
         get element() {
             return element;
@@ -331,7 +147,8 @@ function useResolvedConfig({ config, element, }) {
         },
     };
 }
-function useResolvePxValue({ input, element, defaultValue, }) {
+function useResolvePxValue(options) {
+    const { input, element, defaultValue } = $derived(options);
     let d = useDisposables();
     const computeValue = (value, element) => {
         // Nullish
@@ -415,14 +232,16 @@ function useResolvePxValue({ input, element, defaultValue, }) {
     };
     // Calculate the value immediately when the input or element changes. Later we can setup a watcher
     // to track the value changes over time.
-    const immediateValue = computeValue(input, element)[0];
-    let value = $state(immediateValue);
+    const immediateValue = $derived(computeValue(input, element)[0]);
+    let explicitValue = $state();
+    const setValue = (value) => (explicitValue = value);
+    const value = $derived(explicitValue ?? immediateValue);
     $effect(() => {
-        let [newValue, watcher] = computeValue(input, element);
-        value = newValue;
+        const [value, watcher] = computeValue(input, element);
+        setValue(value);
         if (!watcher)
             return;
-        return watcher((_value) => (value = _value));
+        return watcher(setValue);
     });
     return {
         get value() {

package/dist/internal/form-fields.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Snippet } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+export type FormFieldsContext = {
+    registerField: (field: Snippet) => () => void;
+};
+export declare const createFormFieldsContext: () => {
+    registerField: (field: Snippet) => () => boolean;
+    readonly fields: SvelteSet<Snippet<[]>>;
+};
+export declare const hoistFormFields: (fields: Snippet) => boolean;

package/dist/internal/form-fields.svelte.js

@@ -0,0 +1,23 @@
+import { getContext, setContext } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+export const createFormFieldsContext = () => {
+    const fields = new SvelteSet();
+    const context = {
+        registerField: (field) => {
+            fields.add(field);
+            return () => fields.delete(field);
+        },
+        get fields() {
+            return fields;
+        },
+    };
+    setContext("FormFieldsContext", context);
+    return context;
+};
+export const hoistFormFields = (fields) => {
+    const context = getContext("FormFieldsContext");
+    if (!context)
+        return false;
+    $effect(() => context.registerField(fields));
+    return true;
+};

package/dist/label/Label.svelte

@@ -2,14 +2,14 @@
 </script>
 
 <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LABEL_TAG">import { onMount } from "svelte";
-import { getIdContext, htmlid } from "../utils/id.js";
+import { useProvidedId, htmlid } from "../utils/id.js";
 import { useDisabled } from "../hooks/use-disabled.js";
 import { stateFromSlot } from "../utils/state.js";
 import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 import { useLabelContext } from "./context.svelte.js";
 const internalId = htmlid();
 const context = useLabelContext();
-const providedHtmlFor = getIdContext();
+const providedHtmlFor = useProvidedId();
 const providedDisabled = useDisabled();
 let {
   ref = $bindable(),
@@ -26,8 +26,9 @@ let handleClick = (e) => {
   if (current instanceof HTMLLabelElement) {
     e.preventDefault();
   }
+  console.log("click", providedHtmlFor);
   if (current instanceof HTMLLabelElement) {
-    let target = document.getElementById(current.getAttribute("htmlFor") ?? "");
+    let target = document.getElementById(current.getAttribute("for") ?? "");
     if (target) {
       let actuallyDisabled = target.getAttribute("disabled");
       if (actuallyDisabled === "true" || actuallyDisabled === "") {
@@ -48,7 +49,7 @@ const disabled = $derived(providedDisabled.value ?? false);
 const slot = $derived({ disabled });
 const ourProps = $derived({
   id,
-  htmlFor: passive ? void 0 : htmlFor,
+  for: passive ? void 0 : htmlFor,
   onclick: passive ? void 0 : handleClick,
   ...stateFromSlot(slot)
 });

package/dist/label/Label.svelte.d.ts

@@ -8,7 +8,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LABEL_
     props(): {
         as?: TTag | undefined;
     } & (Exclude<keyof PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<{}> | undefined;
+        children?: import("svelte").Snippet<[{}, Record<string, any>]> | undefined;
         ref?: HTMLElement;
     } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
         class?: PropsOf<TTag>["class"] | ((bag: {}) => string) | undefined;

package/dist/label/context.svelte.js

@@ -1,7 +1,7 @@
 import { getContext, setContext } from "svelte";
 export function useLabelContext() {
     let context = getContext("LabelContext");
-    if (context === null) {
+    if (!context) {
         let err = new Error("You used a <Label /> component, but it is not inside a relevant parent.");
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useLabelContext);

package/dist/legend/Legend.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>import { Label } from "../index.js";
-const DEFAULT_LEGEND_TAG = Label;
+const DEFAULT_LEGEND_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LEGEND_TAG">let { ...props } = $props();
+<script lang="ts">let { ...props } = $props();
 </script>
 
 <Label as="div" {...props} />

package/dist/legend/Legend.svelte.d.ts

@@ -1,35 +1,23 @@
-import { type LabelProps } from "../index.js";
-import type { ElementType, Props } from "../utils/types.js";
-import type { Component } from "svelte";
-declare const DEFAULT_LEGEND_TAG: Component<LabelProps, any>;
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_LEGEND_TAG: "div";
 type LegendRenderPropArg = {};
 type LegendPropsWeControl = never;
-export type LegendProps<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> = Props<TTag, LegendRenderPropArg, LegendPropsWeControl, {}>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../index.js").PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof import("../index.js").PropsOf<TTag> ? { [P in T]: import("../index.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../index.js").Children<LegendRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../index.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../index.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../index.js").PropsOf<TTag>["class"] | ((bag: LegendRenderPropArg) => string) | undefined;
-    } : {});
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
+export type LegendProps = Props<typeof DEFAULT_LEGEND_TAG, LegendRenderPropArg, LegendPropsWeControl, {}>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots(): {};
-    bindings(): "";
-    exports(): {};
+    z_$$bindings?: Bindings;
 }
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_LEGEND_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_LEGEND_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Legend: $$IsomorphicComponent;
-type Legend<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG> = InstanceType<typeof Legend<TTag>>;
+declare const Legend: $$__sveltets_2_IsomorphicComponent<LegendProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Legend = InstanceType<typeof Legend>;
 export default Legend;