@pzerelles/headlessui-svelte 2.1.2-next.10 → 2.1.2-next.11

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) {
@@ -62,233 +69,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 +114,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 +122,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 +146,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 +231,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 = 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/inner.svelte.d.ts

@@ -0,0 +1,91 @@
+import { type DetectOverflowOptions, type Middleware, type SideObject, type Derivable } from "@floating-ui/dom";
+import type { HTMLAttributes } from "svelte/elements";
+import type { MutableRefObject } from "../utils/ref.svelte.js";
+export declare function warn(...messages: string[]): void;
+export declare function error(...messages: string[]): void;
+export interface ElementProps {
+    reference?: HTMLAttributes<Element>;
+    floating?: HTMLAttributes<HTMLElement>;
+    item?: HTMLAttributes<HTMLElement> | ((props: Record<string, any>) => HTMLAttributes<HTMLElement>);
+}
+export declare function getUserAgent(): string;
+export interface InnerProps extends DetectOverflowOptions {
+    /**
+     * A ref which contains an array of HTML elements.
+     * @default empty list
+     */
+    listRef: MutableRefObject<Array<HTMLElement | null>>;
+    /**
+     * The index of the active (focused or highlighted) item in the list.
+     * @default 0
+     */
+    index: number;
+    /**
+     * Callback invoked when the fallback state changes.
+     */
+    onFallbackChange?: null | ((fallback: boolean) => void);
+    /**
+     * The offset to apply to the floating element.
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * A ref which contains the overflow of the floating element.
+     */
+    overflowRef?: MutableRefObject<SideObject | null>;
+    /**
+     * An optional ref containing an HTMLElement. This may be used as the
+     * scrolling container instead of the floating element — for instance,
+     * to position inner elements as direct children without being interfered by
+     * scrolling layout.
+     */
+    scrollRef?: MutableRefObject<HTMLElement | null>;
+    /**
+     * The minimum number of items that should be visible in the list.
+     * @default 4
+     */
+    minItemsVisible?: number;
+    /**
+     * The threshold for the reference element's overflow in pixels.
+     * @default 0
+     */
+    referenceOverflowThreshold?: number;
+}
+/**
+ * Positions the floating element such that an inner element inside of it is
+ * anchored to the reference element.
+ * @see https://floating-ui.com/docs/inner
+ */
+export declare const inner: (props: InnerProps | Derivable<InnerProps>) => Middleware;
+export interface UseInnerOffsetProps {
+    /**
+     * Whether the Hook is enabled, including all internal Effects and event
+     * handlers.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * A ref which contains the overflow of the floating element.
+     */
+    overflowRef: MutableRefObject<SideObject | null>;
+    /**
+     * An optional ref containing an HTMLElement. This may be used as the
+     * scrolling container instead of the floating element — for instance,
+     * to position inner elements as direct children without being interfered by
+     * scrolling layout.
+     */
+    scrollRef?: MutableRefObject<HTMLElement | null>;
+    /**
+     * Callback invoked when the offset changes.
+     */
+    onChange: (offset: number | ((offset: number) => number)) => void;
+}
+/**
+ * Changes the `inner` middleware's `offset` upon a `wheel` event to
+ * expand the floating element's height, revealing more list items.
+ * @see https://floating-ui.com/docs/inner
+ */
+export declare function useInnerOffset(options: {
+    context: FloatingRootContext;
+    props: UseInnerOffsetProps;
+}): ElementProps;