@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.2-next.10

package/dist/internal/floating.svelte.js

@@ -0,0 +1,488 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable prefer-const */
+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
+}
+export function useFloating() {
+    return getContext("FloatingContext");
+}
+export function useFloatingPanelProps() {
+    const { getFloatingProps, slot } = getContext("FloatingContext");
+    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");
+    const trigger = $derived(JSON.stringify(placement, typeof HTMLElement !== "undefined"
+        ? (_, v) => {
+            if (v instanceof HTMLElement) {
+                return v.outerHTML;
+            }
+            return v;
+        }
+        : undefined));
+    const stablePlacement = $derived.by(() => {
+        trigger;
+        return untrack(() => placement);
+    });
+    $effect(() => {
+        updatePlacementConfig?.(stablePlacement ?? null);
+    });
+    const context = getContext("FloatingContext");
+    return {
+        get setFloating() {
+            return context.setFloating;
+        },
+        get style() {
+            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);
+    $effect(() => {
+        if (!referenceEl || !floatingEl)
+            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;`;
+            }
+        });
+    });
+    // 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, }) {
+    const gap = useResolvePxValue({
+        get input() {
+            return config?.gap ?? "var(--anchor-gap, 0)";
+        },
+        get element() {
+            return element;
+        },
+    });
+    const offset = useResolvePxValue({
+        get input() {
+            return config?.gap ?? "var(--anchor-offset, 0)";
+        },
+        get element() {
+            return element;
+        },
+    });
+    const padding = useResolvePxValue({
+        get input() {
+            return config?.gap ?? "var(--anchor-padding, 0)";
+        },
+        get element() {
+            return element;
+        },
+    });
+    return {
+        get to() {
+            return config?.to;
+        },
+        get gap() {
+            return gap.value;
+        },
+        get offset() {
+            return offset.value;
+        },
+        get padding() {
+            return padding.value;
+        },
+        get inner() {
+            return config?.inner;
+        },
+    };
+}
+function useResolvePxValue({ input, element, defaultValue, }) {
+    let d = useDisposables();
+    const computeValue = (value, element) => {
+        // Nullish
+        if (value == null)
+            return [defaultValue, null];
+        // Number as-is
+        if (typeof value === "number")
+            return [value, null];
+        // String values, the interesting part
+        if (typeof value === "string") {
+            if (!element)
+                return [defaultValue, null];
+            let result = resolveCSSVariablePxValue(value, element);
+            return [
+                result,
+                (setValue) => {
+                    let variables = resolveVariables(value);
+                    // TODO: Improve this part and make it work
+                    //
+                    // Observe variables themselves. Currently the browser doesn't support this, but the
+                    // variables we are interested in resolve to a pixel value. Which means that we can use
+                    // this variable in the `margin` of an element. Then we can observe the `margin` of the
+                    // element and we will be notified when the variable changes.
+                    //
+                    // if (typeof ResizeObserver !== 'undefined') {
+                    //   let tmpEl = document.createElement('div')
+                    //   element.appendChild(tmpEl)
+                    //
+                    //   // Didn't use `fontSize` because a `fontSize` can't be negative.
+                    //   tmpEl.style.setProperty('margin-top', '0px', 'important')
+                    //
+                    //   // Set the new value, if this is invalid the previous value will be used.
+                    //   tmpEl.style.setProperty('margin-top', value, 'important')
+                    //
+                    //   let observer = new ResizeObserver(() => {
+                    //     let newResult = resolveCSSVariableValue(value, element)
+                    //
+                    //     if (result !== newResult) {
+                    //       setValue(newResult)
+                    //       result = newResult
+                    //     }
+                    //   })
+                    //   observer.observe(tmpEl)
+                    //   d.add(() => observer.disconnect())
+                    //   return d.dispose
+                    // }
+                    // Works as a fallback, but not very performant because we are polling the value.
+                    {
+                        let history = variables.map((variable) => window.getComputedStyle(element).getPropertyValue(variable));
+                        d.requestAnimationFrame(function check() {
+                            d.nextFrame(check);
+                            // Fast path, detect if the value of the CSS Variable has changed before completely
+                            // computing the new value. Once we use `resolveCSSVariablePxValue` we will have to
+                            // compute the actual px value by injecting a temporary element into the DOM.
+                            //
+                            // This is a lot of work, so we want to avoid it if possible.
+                            let changed = false;
+                            for (let [idx, variable] of variables.entries()) {
+                                let value = window.getComputedStyle(element).getPropertyValue(variable);
+                                if (history[idx] !== value) {
+                                    history[idx] = value;
+                                    changed = true;
+                                    break;
+                                }
+                            }
+                            // Nothing changed, no need to perform the expensive computation.
+                            if (!changed)
+                                return;
+                            let newResult = resolveCSSVariablePxValue(value, element);
+                            if (result !== newResult) {
+                                setValue(newResult);
+                                result = newResult;
+                            }
+                        });
+                    }
+                    return d.dispose;
+                },
+            ];
+        }
+        return [defaultValue, null];
+    };
+    // 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);
+    $effect(() => {
+        let [newValue, watcher] = computeValue(input, element);
+        value = newValue;
+        if (!watcher)
+            return;
+        return watcher((_value) => (value = _value));
+    });
+    return {
+        get value() {
+            return value;
+        },
+    };
+}
+function resolveVariables(value) {
+    let matches = /var\((.*)\)/.exec(value);
+    if (matches) {
+        let idx = matches[1].indexOf(",");
+        if (idx === -1) {
+            return [matches[1]];
+        }
+        let variable = matches[1].slice(0, idx).trim();
+        let fallback = matches[1].slice(idx + 1).trim();
+        if (fallback) {
+            return [variable, ...resolveVariables(fallback)];
+        }
+        return [variable];
+    }
+    return [];
+}
+function resolveCSSVariablePxValue(input, element) {
+    // Resolve the value: Instead of trying to compute the value ourselves by converting rem /
+    // vwh / ... values to pixels or by parsing out the fallback values and evaluating it
+    // (because it can contain calc expressions or other variables).
+    //
+    // We will let the browser compute all of it by creating a temporary element and setting
+    // the value as a CSS variable. Then we can read the computed value from the browser.
+    //
+    //
+    // BUG REPORT ABOUT INCORRECT VALUES, look here:
+    // ---------------------------------------------
+    //
+    // Currently this technically contains a bug because we are rendering a new element inside of the
+    // current element. Which means that if the passed in element has CSS that looks like:
+    //
+    // ```css
+    // .the-element {
+    //   --the-variable: 1rem
+    // }
+    //
+    // .the-element > * {
+    //   --the-variable: 2rem
+    // }
+    // ```
+    //
+    // Then this will result to resolved value of `2rem`, instead of `1rem`
+    let tmpEl = document.createElement("div");
+    element.appendChild(tmpEl);
+    // Set the value to `0px` otherwise if an invalid value is provided later the browser will read
+    // out the default value.
+    //
+    // Didn't use `fontSize` because a `fontSize` can't be negative.
+    tmpEl.style.setProperty("margin-top", "0px", "important");
+    // Set the new value, if this is invalid the previous value will be used.
+    tmpEl.style.setProperty("margin-top", input, "important");
+    // Reading the `margin-top` will already be in pixels (e.g.: 123px).
+    let pxValue = parseFloat(window.getComputedStyle(tmpEl).marginTop) || 0;
+    element.removeChild(tmpEl);
+    return pxValue;
+}

package/dist/internal/frozen.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare function useFrozenData<T>(options: {
+    freeze: boolean;
+    data: T;
+}): {
+    readonly data: T;
+};

package/dist/internal/frozen.svelte.js

@@ -0,0 +1,18 @@
+import { untrack } from "svelte";
+export function useFrozenData(options) {
+    const { freeze, data } = $derived(options);
+    let frozenValue = $state(data);
+    $effect(() => {
+        // We should keep updating the frozen value, as long as we shouldn't freeze
+        // the value yet. The moment we should freeze the value we stop updating it
+        // which allows us to reference the "previous" (thus frozen) value.
+        if (!freeze && untrack(() => frozenValue) !== data) {
+            frozenValue = data;
+        }
+    });
+    return {
+        get data() {
+            return freeze ? frozenValue : data;
+        },
+    };
+}

package/dist/internal/open-closed.d.ts

@@ -0,0 +1,14 @@
+export declare enum State {
+    Open = 1,
+    Closed = 2,
+    Closing = 4,
+    Opening = 8
+}
+export type OpenClosedContext = {
+    readonly value: State;
+};
+export declare function useOpenClosed(): OpenClosedContext | null;
+export declare function createOpenClosedContext(options: {
+    readonly value: State;
+}): void;
+export declare function clearOpenClosedContext(): void;

package/dist/internal/open-closed.js

@@ -0,0 +1,17 @@
+import { getContext, setContext } from "svelte";
+export var State;
+(function (State) {
+    State[State["Open"] = 1] = "Open";
+    State[State["Closed"] = 2] = "Closed";
+    State[State["Closing"] = 4] = "Closing";
+    State[State["Opening"] = 8] = "Opening";
+})(State || (State = {}));
+export function useOpenClosed() {
+    return getContext("OpenClosedContext") ?? null;
+}
+export function createOpenClosedContext(options) {
+    setContext("OpenClosedContext", options);
+}
+export function clearOpenClosedContext() {
+    setContext("OpenClosedContext", undefined);
+}

package/dist/internal/portal-force-root.svelte.d.ts

@@ -0,0 +1,6 @@
+type ForcePortalRootContext = {
+    readonly force: boolean;
+};
+export declare function usePortalRoot(): ForcePortalRootContext;
+export declare function createPortalRoot(context: ForcePortalRootContext): void;
+export {};

package/dist/internal/portal-force-root.svelte.js

@@ -0,0 +1,11 @@
+import { getContext, setContext } from "svelte";
+export function usePortalRoot() {
+    return getContext("ForcePortalRootContext");
+}
+export function createPortalRoot(context) {
+    setContext("ForcePortalRootContext", {
+        get force() {
+            return context.force;
+        },
+    });
+}

package/dist/label/Label.svelte

@@ -1,65 +1,34 @@
-<script lang="ts" context="module">import { setContext, untrack } from "svelte";
-const DEFAULT_LABEL_TAG = "label";
-export const createLabelContext = () => {
-  let labelledBy = $state();
-  const context = {
-    get labelledBy() {
-      return labelledBy;
-    },
-    register(id) {
-      labelledBy = untrack(() => labelledBy === void 0 ? id : `${labelledBy} ${id}`.trim());
-    },
-    unregister(id) {
-      labelledBy = untrack(
-        () => labelledBy?.split(" ").filter((value) => value !== id).join(" ")
-      );
-    }
-  };
-  return setContext("Label", context);
-};
-export const getLabelContext = () => getContext("Label");
-const validateLabelContext = () => {
-  const context = getLabelContext();
-  if (context === void 0) {
-    const err = new Error("You used a <Label /> component, but it is not inside a relevant parent.");
-    if (Error.captureStackTrace)
-      Error.captureStackTrace(err, validateLabelContext);
-    throw err;
-  }
-  return context;
-};
+<script lang="ts" module>let DEFAULT_LABEL_TAG = "label";
 </script>
 
-<script lang="ts" generics="TTag extends keyof SvelteHTMLElements">import { getContext } from "svelte";
-import { getIdContext, htmlid } from "../utils/id.js";
-import { getDisabledContext } from "../utils/disabled.js";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LABEL_TAG">import { onMount } from "svelte";
+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 = validateLabelContext();
-const providedHtmlFor = getIdContext();
-const providedDisabled = getDisabledContext();
+const context = useLabelContext();
+const providedHtmlFor = useProvidedId();
+const providedDisabled = useDisabled();
 let {
-  as,
+  ref = $bindable(),
   id = `headlessui-label-${internalId}`,
   htmlFor = providedHtmlFor,
   passive = false,
-  children,
   ...theirOriginalProps
 } = $props();
-$effect(() => {
+onMount(() => {
   context.register(id);
-  const registeredId = id;
-  return () => {
-    context.unregister(registeredId);
-  };
 });
 let handleClick = (e) => {
   let current = e.currentTarget;
   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 === "") {
@@ -76,11 +45,11 @@ let handleClick = (e) => {
     }
   }
 };
-const disabled = $derived(providedDisabled?.disabled ?? false);
+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)
 });
@@ -94,6 +63,10 @@ const theirProps = $derived.by(() => {
 });
 </script>
 
-<svelte:element this={as ?? (htmlFor ? DEFAULT_LABEL_TAG : "div")} {...ourProps} {...theirProps}>
-  {#if children}{@render children(slot)}{/if}
-</svelte:element>
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  defaultTag={htmlFor ? DEFAULT_LABEL_TAG : "div"}
+  name={context.name || "Label"}
+  bind:ref
+/>