@pzerelles/headlessui-svelte 2.1.1-next.1 → 2.1.2-next.11

package/dist/internal/floating.svelte.js

@@ -1,288 +1,109 @@
+import { useInteractions } from "../utils/floating-ui/svelte/index.js";
 import { useDisposables } from "../utils/disposables.js";
-import { useRef } from "../utils/ref.svelte.js";
-import { autoUpdate, flip as flipMiddleware, 
-//inner as innerMiddleware,
-offset as offsetMiddleware, shift as shiftMiddleware, size as sizeMiddleware, useFloating as _useFloating, 
-//useInnerOffset,
-useInteractions, } from "@skeletonlabs/floating-ui-svelte";
-import { getContext, setContext } 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() {
-    let { 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(placement = null) {
-    if (placement === false)
-        placement = null; // Disable entirely
-    if (typeof placement === "string")
-        placement = { to: placement }; // Simple string based value
-    const updatePlacementConfig = getContext("PlacementContext");
-    /*let stablePlacement = useMemo(
-        () => placement,
-        [
-          JSON.stringify(
-            placement,
-            typeof HTMLElement !== 'undefined'
-              ? (_, v) => {
-                  if (v instanceof HTMLElement) {
-                    return v.outerHTML
-                  }
-                  return v
-                }
-              : undefined
-          ),
-        ]
-      )*/
-    updatePlacementConfig?.(placement ?? null);
+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) {
+                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() {
+        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 = useRef(null);
-    let floatingEl = $state(null);
-    $effect(() => useFixScrollingPixel(floatingEl));
-    const isEnabled = $derived(enabled && config !== null && floatingEl !== null);
-    let { to: placement = "bottom", gap = 0, offset = 0, padding = 0, inner, } = useResolvedConfig({
-        get config() {
-            return config;
-        },
-        get element() {
-            return floatingEl;
-        },
-    });
-    let [to, align = "center"] = placement.split(" ");
-    // Reset
+export function useFixScrollingPixel(options) {
+    const { element } = $derived(options);
     $effect(() => {
-        if (!isEnabled)
-            return;
-        innerOffset = 0;
-    });
-    const { elements, floatingStyles, context } = $derived(_useFloating({
-        open: isEnabled,
-        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",
-        // We use the panel in a `Dialog` which is making the page inert, therefore no re-positioning is
-        // needed when scrolling changes.
-        transform: false,
-        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),
-        whileElementsMounted: autoUpdate,
-    }));
-    // 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,
-      })*/
-    let { getReferenceProps, getFloatingProps } = useInteractions([
-    /*innerOffsetConfig*/
-    ]);
-    let setFloatingRef = (el) => {
-        floatingEl = el || null;
-        elements.floating = el;
-    };
-    /*
-    
-      return (
-        <PlacementContext.Provider value={setConfig}>
-          <FloatingContext.Provider
-            value={{
-              setFloating: setFloatingRef,
-              setReference: refs.setReference,
-              styles: floatingStyles,
-              getReferenceProps,
-              getFloatingProps,
-              slot: data,
-            }}
-          >
-            {children}
-          </FloatingContext.Provider>
-        </PlacementContext.Provider>
-      )*/
-    const floatingContext = {
-        setFloating: setFloatingRef,
-        setReference: (reference) => {
-            elements.reference = reference;
-        },
-        get styles() {
-            return floatingStyles;
-        },
-        getReferenceProps,
-        getFloatingProps,
-        get slot() {
-            return data;
-        },
-    };
-    setContext("FloatingContext", floatingContext);
-    setContext("PlacementContext", null);
-    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))
+        if (!element)
             return;
-        if (maxHeightFloat !== maxHeightInt) {
-            element.style.maxHeight = `${Math.ceil(maxHeightFloat)}px`;
-        }
-    });
-    observer.observe(element, {
-        attributes: true,
-        attributeFilter: ["style"],
+        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();
+            };
+        });
     });
-    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)";
@@ -293,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;
@@ -301,14 +122,16 @@ 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;
         },
     });
     return {
-        ...config,
+        get to() {
+            return config?.to;
+        },
         get gap() {
             return gap.value;
         },
@@ -318,9 +141,13 @@ function useResolvedConfig({ config, element, }) {
         get padding() {
             return padding.value;
         },
+        get inner() {
+            return config?.inner;
+        },
     };
 }
-function useResolvePxValue({ input, element, defaultValue, }) {
+function useResolvePxValue(options) {
+    const { input, element, defaultValue } = $derived(options);
     let d = useDisposables();
     const computeValue = (value, element) => {
         // Nullish
@@ -404,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;