@pzerelles/headlessui-svelte 2.1.2-next.3 → 2.1.2-next.31

package/dist/internal/Hidden.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" module>import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { HiddenFeatures } from "./HiddenFeatures.js";
+export * from "./HiddenFeatures.js";
 const DEFAULT_VISUALLY_HIDDEN_TAG = "span";
-export var HiddenFeatures = /* @__PURE__ */ ((HiddenFeatures2) => {
-  HiddenFeatures2[HiddenFeatures2["None"] = 1] = "None";
-  HiddenFeatures2[HiddenFeatures2["Focusable"] = 2] = "Focusable";
-  HiddenFeatures2[HiddenFeatures2["Hidden"] = 4] = "Hidden";
-  return HiddenFeatures2;
-})(HiddenFeatures || {});
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">let { ref = $bindable(), features = HiddenFeatures.None, ...theirProps } = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">let {
+  ref = $bindable(),
+  value,
+  checked,
+  features = HiddenFeatures.None,
+  ...theirProps
+} = $props();
 let ourProps = {
   "aria-hidden": (features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable ? true : theirProps["aria-hidden"] ?? void 0,
   hidden: (features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden ? true : void 0,
@@ -29,4 +31,12 @@ let ourProps = {
 };
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG} name="Hidden" bind:ref />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG}
+  name="Hidden"
+  bind:ref
+  {value}
+  {checked}
+/>

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

@@ -1,10 +1,7 @@
 import type { ElementType, Props } from "../utils/types.js";
+import { HiddenFeatures } from "./HiddenFeatures.js";
+export * from "./HiddenFeatures.js";
 declare const DEFAULT_VISUALLY_HIDDEN_TAG: "span";
-export declare enum HiddenFeatures {
-    None = 1,
-    Focusable = 2,
-    Hidden = 4
-}
 type HiddenRenderPropArg = {};
 type HiddenPropsWeControl = never;
 export type HiddenProps<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = Props<TTag, HiddenRenderPropArg, HiddenPropsWeControl, {
@@ -13,17 +10,17 @@ export type HiddenProps<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDE
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "features"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<HiddenRenderPropArg> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "features"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: HiddenRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: HiddenRenderPropArg) => string) | null | undefined;
         ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.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("../utils/types.js").PropsOf<TTag>["class"] | ((bag: HiddenRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         features?: HiddenFeatures;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -32,9 +29,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_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_VISUALLY_HIDDEN_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Hidden: $$IsomorphicComponent;

package/dist/internal/HiddenFeatures.d.ts

@@ -0,0 +1,5 @@
+export declare enum HiddenFeatures {
+    None = 1,
+    Focusable = 2,
+    Hidden = 4
+}

package/dist/internal/HiddenFeatures.js

@@ -0,0 +1,9 @@
+export var HiddenFeatures;
+(function (HiddenFeatures) {
+    // The default, no features.
+    HiddenFeatures[HiddenFeatures["None"] = 1] = "None";
+    // Whether the element should be focusable or not.
+    HiddenFeatures[HiddenFeatures["Focusable"] = 2] = "Focusable";
+    // Whether it should be completely hidden, even to assistive technologies.
+    HiddenFeatures[HiddenFeatures["Hidden"] = 4] = "Hidden";
+})(HiddenFeatures || (HiddenFeatures = {}));

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

@@ -8,24 +8,8 @@ export declare function useMainTreeNode(options?: {
     fallbackMainTreeNode?: HTMLElement | null;
 }): MainTreeContext;
 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 MainTreeProvider: $$__sveltets_2_IsomorphicComponent<{
+declare const MainTreeProvider: import("svelte").Component<{
     children: Snippet;
     node?: HTMLElement | null;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type MainTreeProvider = InstanceType<typeof MainTreeProvider>;
+}, {}, "">;
 export default MainTreeProvider;

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

@@ -1,22 +1,6 @@
 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 Portal: $$__sveltets_2_IsomorphicComponent<{
+declare const Portal: import("svelte").Component<{
     target: HTMLElement;
     children: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Portal = InstanceType<typeof Portal>;
+}, {}, "">;
 export default Portal;

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.
+    const MINIMUM_ITEMS_VISIBLE = 4;
+    let config = $state(null);
+    let innerOffset = $state(0);
+    const setInnerOffset = (offset) => (innerOffset = typeof offset === "function" ? offset(innerOffset) : offset);
+    const overflowRef = $state({ current: null });
+    let floatingEl = $state(null);
+    const setFloatingElement = (element) => (floatingEl = element ?? null);
+    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);
+    const [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;
+                    const parent = context.elements.floating;
+                    if (!parent)
+                        return;
+                    const 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 (const child of context.elements.floating?.childNodes ?? []) {
+                        if (child instanceof HTMLElement) {
+                            const 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.
+                            const childBottom = childTop + child.clientHeight + scrollPaddingBottom;
+                            const parentTop = parent.scrollTop;
+                            const 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) => {
+                            const 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(() => {
+        const [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(" "),
+    });
+    const innerOffsetConfig = useInnerOffset({
+        get context() {
+            return context;
+        },
+        get props() {
+            return {
+                overflowRef,
+                onChange: setInnerOffset,
+            };
+        },
+    });
+    const { 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,7 @@
-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 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 +31,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["floatingStyles"];
+    setReference: UseFloatingReturn["refs"]["setReference"];
+    setFloating: UseFloatingReturn["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> & {
+export type PlacementContext = {
+    updatePlacementConfig: ((value: Exclude<AnchorPropsWithSelection, boolean> | null) => void) | null;
+};
+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 | undefined) => void) & ((node: import("../utils/floating-ui/svelte/types.js").ReferenceType | null | undefined) => 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 | "top end" | "top start" | "right end" | "right start" | "bottom end" | "bottom start" | "left end" | "left start" | "selection" | "selection end" | "selection start" | undefined;
 };
-export declare function useFloatingPanel(options: {
+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 | undefined) => void) & ((node: HTMLElement | null | undefined) => 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 | "top end" | "top start" | "right end" | "right start" | "bottom end" | "bottom start" | "left end" | "left start" | "selection" | "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 {};