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

package/dist/hooks/use-controllable.svelte.js

@@ -27,7 +27,8 @@ export function useControllable(input, onchange, defaultValue) {
             }
             else {
                 internalValue = value;
-                input.controlledValue = value;
+                if (isControlled)
+                    input.controlledValue = value;
             }
         },
     };

package/dist/hooks/use-did-element-move.svelte.js

@@ -1,23 +1,18 @@
 export function useDidElementMove(options) {
     const { enabled, element } = $derived(options);
-    let elementPosition = $state({ left: 0, top: 0 });
+    let elementPosition = $state();
     $effect(() => {
         if (!element)
             return;
-        let DOMRect = element.getBoundingClientRect();
+        const DOMRect = element.getBoundingClientRect();
         if (DOMRect)
             elementPosition = DOMRect;
     });
     const value = $derived.by(() => {
-        if (element == null)
+        if (element == null || !enabled || element === document.activeElement || elementPosition === undefined)
             return false;
-        if (!enabled)
-            return false;
-        if (element === document.activeElement)
-            return false;
-        let buttonRect = element.getBoundingClientRect();
-        let didElementMove = buttonRect.top !== elementPosition.top || buttonRect.left !== elementPosition.left;
-        return didElementMove;
+        const buttonRect = element.getBoundingClientRect();
+        return buttonRect.top !== elementPosition.top || buttonRect.left !== elementPosition.left;
     });
     return {
         get value() {

package/dist/internal/FloatingProvider.svelte

@@ -0,0 +1,12 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { useFloatingProvider } from "./floating-provider.svelte.js";
+const { children, enabled = true } = $props();
+useFloatingProvider({
+  get enabled() {
+    return enabled;
+  }
+});
+</script>
+
+{#if children}{@render children()}{/if}

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

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+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;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FloatingProvider: $$__sveltets_2_IsomorphicComponent<{
+    children: Snippet;
+    enabled?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type FloatingProvider = InstanceType<typeof FloatingProvider>;
+export default FloatingProvider;

package/dist/internal/floating-provider.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare const useFloatingProvider: (options?: {
+    enabled: boolean;
+}) => void;

package/dist/internal/floating-provider.svelte.js

@@ -0,0 +1,206 @@
+import { setContext } from "svelte";
+import { useFixScrollingPixel, useResolvedConfig, } from "./floating.svelte.js";
+import { autoUpdate, flip as flipMiddleware, inner as innerMiddleware, offset as offsetMiddleware, shift as shiftMiddleware, size as sizeMiddleware, useFloating, useInnerOffset, useInteractions, } from "../utils/floating-ui/svelte/index.js";
+export const useFloatingProvider = (options = { enabled: true }) => {
+    const { enabled } = $derived(options);
+    // TODO: Make this a config part of the `config`. Just need to decide on a name.
+    let MINIMUM_ITEMS_VISIBLE = 4;
+    let config = $state(null);
+    let innerOffset = $state(0);
+    const setInnerOffset = (offset) => (innerOffset = typeof offset === "function" ? offset(innerOffset) : offset);
+    let overflowRef = $state({ current: null });
+    let floatingEl = $state(null);
+    const setFloatingElement = (element) => (floatingEl = element);
+    useFixScrollingPixel({
+        get element() {
+            return floatingEl;
+        },
+    });
+    const isEnabled = $derived(enabled && config !== null && floatingEl !== null);
+    const resolvedConfig = useResolvedConfig({
+        get config() {
+            return config;
+        },
+        get element() {
+            return floatingEl;
+        },
+    });
+    const { to: placement = "bottom", gap = 0, offset = 0, padding = 0, inner } = $derived(resolvedConfig);
+    let [to, align = "center"] = $derived(placement.split(" "));
+    // Reset
+    $effect(() => {
+        if (!isEnabled)
+            return;
+        innerOffset = 0;
+    });
+    const middleware = $derived([
+        // - 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
+            ? 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));
+    const floating = useFloating({
+        get open() {
+            return isEnabled;
+        },
+        get placement() {
+            return (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,
+        get middleware() {
+            return middleware;
+        },
+        whileElementsMounted: autoUpdate,
+    });
+    const { refs, floatingStyles, context } = $derived(floating);
+    // Calculate placement information to expose as data attributes
+    const { exposedTo, exposedAlign } = $derived.by(() => {
+        let [exposedTo = to, exposedAlign = align] = context.placement.split("-");
+        return { exposedTo: to === "selection" ? "selection" : exposedTo, exposedAlign };
+    });
+    // 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({
+        get context() {
+            return context;
+        },
+        get props() {
+            return {
+                overflowRef,
+                onChange: setInnerOffset,
+            };
+        },
+    });
+    let { getReferenceProps, getFloatingProps } = useInteractions({
+        get propsList() {
+            return [innerOffsetConfig];
+        },
+    });
+    const setFloatingRef = (el) => {
+        setFloatingElement(el);
+        refs.setFloating(el);
+    };
+    setContext("PlacementContext", {
+        updatePlacementConfig: (value) => {
+            config = value;
+        },
+    });
+    setContext("FloatingContext", {
+        setFloating: setFloatingRef,
+        get setReference() {
+            return refs.setReference;
+        },
+        get styles() {
+            return floatingStyles;
+        },
+        getReferenceProps,
+        getFloatingProps,
+        get slot() {
+            return data;
+        },
+    });
+};

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

@@ -1,7 +1,8 @@
-import type { MutableRefObject } from "../utils/ref.svelte.js";
-type Align = "start" | "end";
-type Placement = "top" | "right" | "bottom" | "left";
-type BaseAnchorProps = {
+import { useInteractions, type InnerProps, type UseFloatingReturn } from "../utils/floating-ui/svelte/index.js";
+export { useFloatingProvider } from "./floating-provider.svelte.js";
+export type Align = "start" | "end";
+export type Placement = "top" | "right" | "bottom" | "left";
+export type BaseAnchorProps = {
     /**
      * The `gap` is the space between the trigger and the panel.
      */
@@ -31,32 +32,56 @@ export type AnchorPropsWithSelection = false | (`${Placement | "selection"}` | `
 }>;
 export type InternalFloatingPanelProps = Partial<{
     inner: {
-        listRef: MutableRefObject<(HTMLElement | null)[]>;
-        index: () => number | null;
+        listRef: InnerProps["listRef"];
+        index: InnerProps["index"];
     };
 }>;
-type FloatingContext = {
-    styles?: string;
-    setReference: (reference: HTMLElement | null | undefined) => void;
-    setFloating: (floating: HTMLElement | null | undefined) => void;
-    getReferenceProps: () => Record<string, any>;
-    getFloatingProps: () => Record<string, any>;
+export type FloatingContext = {
+    styles?: UseFloatingReturn<any>["floatingStyles"];
+    setReference: UseFloatingReturn<any>["refs"]["setReference"];
+    setFloating: UseFloatingReturn<any>["refs"]["setFloating"];
+    getReferenceProps: ReturnType<typeof useInteractions>["getReferenceProps"];
+    getFloatingProps: ReturnType<typeof useInteractions>["getFloatingProps"];
     slot: Partial<{
         anchor: `${Placement | "selection"}` | `${Placement | "selection"} ${Align}`;
     }>;
 };
-export declare function useResolvedAnchor<T extends AnchorProps | AnchorPropsWithSelection>(anchor?: T): Exclude<T, boolean | string> | null;
-export declare function useFloating(): FloatingContext;
-export declare function useFloatingPanelProps(): () => Record<string, any> & {
-    "data-anchor": Placement | "top end" | "top start" | "right end" | "right start" | "bottom end" | "bottom start" | "left end" | "left start" | "selection" | "selection end" | "selection start" | undefined;
+export type PlacementContext = {
+    updatePlacementConfig: ((value: Exclude<AnchorPropsWithSelection, boolean> | null) => void) | null;
 };
-export declare function useFloatingPanel(options: {
+export declare function useResolvedAnchor<T extends AnchorProps | AnchorPropsWithSelection>(options: {
+    anchor?: T;
+}): {
+    anchor: Exclude<T, boolean | string> | null;
+};
+export declare function useFloatingReference(): {
+    readonly setReference: ((node: import("../utils/floating-ui/svelte-dom/types.js").ReferenceType | null) => void) & ((node: any) => void);
+};
+export declare function useFloatingReferenceProps(): {
+    readonly getReferenceProps: (userProps?: import("svelte/elements.js").HTMLAttributes<Element>) => Record<string, unknown>;
+};
+export declare function useFloatingPanelProps(): (userProps?: import("svelte/elements.js").HTMLAttributes<HTMLElement> | undefined) => Record<string, unknown> & {
+    "data-anchor": Placement | "selection" | "top end" | "top start" | "right end" | "right start" | "bottom end" | "bottom start" | "left end" | "left start" | "selection end" | "selection start" | undefined;
+};
+export declare function useFloatingPanel(options?: {
     placement: (AnchorPropsWithSelection & InternalFloatingPanelProps) | null;
 }): {
-    readonly setFloating: (floating: HTMLElement | null | undefined) => void;
-    readonly style: string | undefined;
+    readonly setFloating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+    readonly styles: string | undefined;
+};
+export declare function useFixScrollingPixel(options: {
+    element: HTMLElement | null;
+}): void;
+export declare function useResolvedConfig(options: {
+    config: (Exclude<AnchorPropsWithSelection, boolean | string> & InternalFloatingPanelProps) | null;
+    element?: HTMLElement | null;
+}): {
+    readonly to: Placement | "selection" | "top end" | "top start" | "right end" | "right start" | "bottom end" | "bottom start" | "left end" | "left start" | "selection end" | "selection start" | undefined;
+    readonly gap: number | undefined;
+    readonly offset: number | undefined;
+    readonly padding: number | undefined;
+    readonly inner: {
+        listRef: InnerProps["listRef"];
+        index: InnerProps["index"];
+    } | undefined;
 };
-export declare const createFloatingContext: ({ enabled }?: {
-    enabled?: boolean;
-}) => FloatingContext;
-export {};