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

package/dist/internal/inner.svelte.js

@@ -0,0 +1,202 @@
+import { evaluate, max, min, round } from "@floating-ui/utils";
+import { DEV } from "esm-env";
+import { detectOverflow, offset, } from "@floating-ui/dom";
+import { tick, untrack } from "svelte";
+let devMessageSet;
+if (DEV) {
+    devMessageSet = new Set();
+}
+export function warn(...messages) {
+    const message = `Floating UI: ${messages.join(" ")}`;
+    if (!devMessageSet?.has(message)) {
+        devMessageSet?.add(message);
+        console.warn(message);
+    }
+}
+export function error(...messages) {
+    const message = `Floating UI: ${messages.join(" ")}`;
+    if (!devMessageSet?.has(message)) {
+        devMessageSet?.add(message);
+        console.error(message);
+    }
+}
+export function getUserAgent() {
+    const uaData = navigator.userAgentData;
+    if (uaData && Array.isArray(uaData.brands)) {
+        return uaData.brands.map(({ brand, version }) => `${brand}/${version}`).join(" ");
+    }
+    return navigator.userAgent;
+}
+// ------
+function getArgsWithCustomFloatingHeight(state, height) {
+    return {
+        ...state,
+        rects: {
+            ...state.rects,
+            floating: {
+                ...state.rects.floating,
+                height,
+            },
+        },
+    };
+}
+/**
+ * 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 const inner = (props) => ({
+    name: "inner",
+    options: props,
+    async fn(state) {
+        const { listRef, overflowRef, onFallbackChange, offset: innerOffset = 0, index = 0, minItemsVisible = 4, referenceOverflowThreshold = 0, scrollRef, ...detectOverflowOptions } = evaluate(props, state);
+        const { rects, elements: { floating }, } = state;
+        const item = listRef.current[index];
+        const scrollEl = scrollRef?.current || floating;
+        // Valid combinations:
+        // 1. Floating element is the scrollRef and has a border (default)
+        // 2. Floating element is not the scrollRef, floating element has a border
+        // 3. Floating element is not the scrollRef, scrollRef has a border
+        // Floating > {...getFloatingProps()} wrapper > scrollRef > items is not
+        // allowed as VoiceOver doesn't work.
+        const clientTop = floating.clientTop || scrollEl.clientTop;
+        const floatingIsBordered = floating.clientTop !== 0;
+        const scrollElIsBordered = scrollEl.clientTop !== 0;
+        const floatingIsScrollEl = floating === scrollEl;
+        if (DEV) {
+            if (!state.placement.startsWith("bottom")) {
+                warn('`placement` side must be "bottom" when using the `inner`', "middleware.");
+            }
+        }
+        if (!item) {
+            return {};
+        }
+        const nextArgs = {
+            ...state,
+            ...(await offset(-item.offsetTop - floating.clientTop - rects.reference.height / 2 - item.offsetHeight / 2 - innerOffset).fn(state)),
+        };
+        const overflow = await detectOverflow(getArgsWithCustomFloatingHeight(nextArgs, scrollEl.scrollHeight + clientTop + floating.clientTop), detectOverflowOptions);
+        const refOverflow = await detectOverflow(nextArgs, {
+            ...detectOverflowOptions,
+            elementContext: "reference",
+        });
+        const diffY = max(0, overflow.top);
+        const nextY = nextArgs.y + diffY;
+        const maxHeight = round(max(0, scrollEl.scrollHeight +
+            ((floatingIsBordered && floatingIsScrollEl) || scrollElIsBordered ? clientTop * 2 : 0) -
+            diffY -
+            max(0, overflow.bottom)));
+        scrollEl.style.maxHeight = `${maxHeight}px`;
+        scrollEl.scrollTop = diffY;
+        // There is not enough space, fallback to standard anchored positioning
+        if (onFallbackChange) {
+            const shouldFallback = (scrollEl.scrollHeight > scrollEl.offsetHeight &&
+                scrollEl.offsetHeight < item.offsetHeight * minItemsVisible - 1) ||
+                refOverflow.top >= -referenceOverflowThreshold ||
+                refOverflow.bottom >= -referenceOverflowThreshold;
+            onFallbackChange(shouldFallback);
+            await tick();
+        }
+        if (overflowRef) {
+            overflowRef.current = await detectOverflow(getArgsWithCustomFloatingHeight({ ...nextArgs, y: nextY }, scrollEl.offsetHeight + clientTop + floating.clientTop), detectOverflowOptions);
+        }
+        return {
+            y: nextY,
+        };
+    },
+});
+/**
+ * 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 function useInnerOffset(options) {
+    const { context, props } = $derived(options);
+    const { open, elements } = $derived(context);
+    const { enabled = true, overflowRef, scrollRef, onChange: unstable_onChange } = $derived(props);
+    const onChange = unstable_onChange;
+    let controlledScrollingRef = $state(false);
+    let prevScrollTopRef = $state(null);
+    let initialOverflowRef = $state(null);
+    $effect(() => {
+        if (!enabled)
+            return;
+        [open, elements.floating, overflowRef, scrollRef, onChange];
+        untrack(() => {
+            function onWheel(e) {
+                if (e.ctrlKey || !el || overflowRef.current == null) {
+                    return;
+                }
+                const dY = e.deltaY;
+                const isAtTop = overflowRef.current.top >= -0.5;
+                const isAtBottom = overflowRef.current.bottom >= -0.5;
+                const remainingScroll = el.scrollHeight - el.clientHeight;
+                const sign = dY < 0 ? -1 : 1;
+                const method = dY < 0 ? "max" : "min";
+                if (el.scrollHeight <= el.clientHeight) {
+                    return;
+                }
+                if ((!isAtTop && dY > 0) || (!isAtBottom && dY < 0)) {
+                    e.preventDefault();
+                    onChange((d) => d + Math[method](dY, remainingScroll * sign));
+                    tick();
+                }
+                else if (/firefox/i.test(getUserAgent())) {
+                    // Needed to propagate scrolling during momentum scrolling phase once
+                    // it gets limited by the boundary. UX improvement, not critical.
+                    el.scrollTop += dY;
+                }
+            }
+            const el = scrollRef?.current || elements.floating;
+            if (open && el) {
+                el.addEventListener("wheel", onWheel);
+                // Wait for the position to be ready.
+                requestAnimationFrame(() => {
+                    prevScrollTopRef = el.scrollTop;
+                    if (overflowRef.current != null) {
+                        initialOverflowRef = { ...overflowRef.current };
+                    }
+                });
+                return () => {
+                    prevScrollTopRef = null;
+                    initialOverflowRef = null;
+                    el.removeEventListener("wheel", onWheel);
+                };
+            }
+        });
+    });
+    const floating = $derived({
+        onKeyDown() {
+            controlledScrollingRef = true;
+        },
+        onWheel() {
+            controlledScrollingRef = false;
+        },
+        onPointerMove() {
+            controlledScrollingRef = false;
+        },
+        async onScroll() {
+            const el = scrollRef?.current || elements.floating;
+            if (!overflowRef.current || !el || !controlledScrollingRef) {
+                return;
+            }
+            if (prevScrollTopRef !== null) {
+                const scrollDiff = el.scrollTop - prevScrollTopRef;
+                if ((overflowRef.current.bottom < -0.5 && scrollDiff < -1) ||
+                    (overflowRef.current.top < -0.5 && scrollDiff > 1)) {
+                    onChange((d) => d + scrollDiff);
+                    await tick();
+                }
+            }
+            // [Firefox] Wait for the height change to have been applied.
+            requestAnimationFrame(() => {
+                prevScrollTopRef = el.scrollTop;
+            });
+        },
+    });
+    return {
+        get floating() {
+            return enabled ? floating : undefined;
+        },
+    };
+}

package/dist/listbox/Listbox.svelte

@@ -4,38 +4,20 @@ import { useDisabled } from "../hooks/use-disabled.js";
 import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
 import { FocusableMode, isFocusableElement, sortByDomNode } from "../utils/focus-management.js";
 import { match } from "../utils/match.js";
-import { useRef } from "../utils/ref.svelte.js";
-import { getContext, setContext } from "svelte";
-import { ActivationTrigger, ListboxStates, ValueMode } from "./ListboxStates.js";
+import { setContext } from "svelte";
+import { ActivationTrigger, ListboxStates, ValueMode } from "./context.svelte.js";
 let DEFAULT_LISTBOX_TAG = "svelte:fragment";
-export * from "./ListboxStates.js";
-export function useActions(component) {
-  const context = getContext("ListboxActionsContext");
-  if (!context) {
-    let err = new Error(`<${component} /> is missing a parent <Listbox /> component.`);
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useActions);
-    throw err;
-  }
-  return context;
-}
-export function useData(component) {
-  const context = getContext("ListboxData");
-  if (context === null) {
-    let err = new Error(`<${component} /> is missing a parent <Listbox /> component.`);
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useData);
-    throw err;
-  }
-  return context;
-}
+export * from "./context.svelte.js";
 </script>
 
 <script lang="ts" generics="TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG">import { disposables } from "../utils/disposables.js";
 import FormFields from "../internal/FormFields.svelte";
-import { createFloatingContext } from "../internal/floating.svelte.js";
+import { useFloatingProvider } from "../internal/floating.svelte.js";
 import { createOpenClosedContext, State } from "../internal/open-closed.js";
 import { useLabels } from "../label/context.svelte.js";
 import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
 import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { SvelteMap } from "svelte/reactivity";
 function adjustOrderedState(state, adjustment = (i) => i) {
   let currentActiveOption = state.activeOptionIndex !== null ? state.options[state.activeOptionIndex] : null;
   let sortedOptions = sortByDomNode(
@@ -189,11 +171,11 @@ const stateReducer = (initialState) => {
       _state2.searchQuery = "";
       return _state2;
     },
-    registerOption(action) {
-      let option = { id: action.id, dataRef: action.dataRef };
+    registerOption(id, dataRef) {
+      let option = { id, dataRef };
       let adjustedState = adjustOrderedState(_state2, (options) => [...options, option]);
       if (_state2.activeOptionIndex === null) {
-        if (isSelected(action.dataRef.current.value)) {
+        if (isSelected(dataRef.current.value)) {
           adjustedState.activeOptionIndex = adjustedState.options.indexOf(option);
         }
       }
@@ -201,9 +183,9 @@ const stateReducer = (initialState) => {
       _state2.activeOptionIndex = adjustedState.activeOptionIndex;
       return _state2;
     },
-    unregisterOption(action) {
+    unregisterOption(id) {
       let adjustedState = adjustOrderedState(_state2, (options) => {
-        let idx = options.findIndex((a) => a.id === action.id);
+        let idx = options.findIndex((a) => a.id === id);
         if (idx !== -1) options.splice(idx, 1);
         return options;
       });
@@ -214,13 +196,9 @@ const stateReducer = (initialState) => {
     }
   };
 };
-const listboxActionsContext = null;
-setContext("ListboxActionsContext", listboxActionsContext);
-const listboxDataContext = null;
-setContext("ListboxDataContext", listboxDataContext);
 let {
   ref = $bindable(),
-  value: controlledValue,
+  value: controlledValue = $bindable(),
   defaultValue,
   form,
   name,
@@ -240,6 +218,9 @@ const controllable = useControllable(
   {
     get controlledValue() {
       return controlledValue;
+    },
+    set controlledValue(value2) {
+      controlledValue = value2;
     }
   },
   controlledOnChange,
@@ -255,10 +236,10 @@ const _state = stateReducer({
   optionsVisible: false,
   __demoMode
 });
-const optionsPropsRef = useRef({ static: false, hold: false });
-const buttonRef = useRef(null);
-const optionsRef = useRef(null);
-const listRef = useRef(/* @__PURE__ */ new Map());
+const optionsProps = $state({ static: false, hold: false });
+let buttonElement = $state(null);
+let optionsElement = $state(null);
+const listElements = new SvelteMap();
 const compare = useByComparator(by);
 const isSelected = (compareValue) => match(data.mode, {
   [ValueMode.Multi]: () => {
@@ -304,34 +285,39 @@ const data = {
   },
   compare,
   isSelected,
-  get optionsPropsRef() {
-    return optionsPropsRef;
+  get optionsProps() {
+    return optionsProps;
+  },
+  get buttonElement() {
+    return buttonElement;
+  },
+  set buttonElement(value2) {
+    buttonElement = value2;
   },
-  get buttonRef() {
-    return buttonRef;
+  get optionsElement() {
+    return optionsElement;
   },
-  get optionsRef() {
-    return optionsRef;
+  set optionsElement(value2) {
+    optionsElement = value2;
   },
-  get listRef() {
-    return listRef;
+  get listElements() {
+    return listElements;
   }
 };
 setContext("ListboxDataContext", data);
-setContext("ListboxData", data);
 const outsideClickEnabled = $derived(data.listboxState === ListboxStates.Open);
 useOutsideClick({
   get enabled() {
     return outsideClickEnabled;
   },
   get containers() {
-    return [data.buttonRef, data.optionsRef];
+    return [data.buttonElement, data.optionsElement];
   },
   cb: (event, target) => {
     _state.closeListbox();
     if (!isFocusableElement(target, FocusableMode.Loose)) {
       event.preventDefault();
-      data.buttonRef.current?.focus();
+      data.buttonElement?.focus();
     }
   }
 });
@@ -363,8 +349,8 @@ const goToOption = (focus, id, trigger) => {
   });
 };
 const registerOption = (id, dataRef) => {
-  _state.registerOption({ id, dataRef });
-  return () => _state.unregisterOption({ id });
+  _state.registerOption(id, dataRef);
+  return () => _state.unregisterOption(id);
 };
 const onChange = (value2) => {
   return match(data.mode, {
@@ -394,7 +380,7 @@ setContext("ListboxActionsContext", {
   search: _state.search,
   clearSearch: _state.clearSearch
 });
-createFloatingContext();
+useFloatingProvider();
 const openClosed = $derived(
   match(data.listboxState, {
     [ListboxStates.Open]: State.Open,
@@ -410,7 +396,7 @@ useLabels({
   inherit: true,
   props: {
     get htmlFor() {
-      return data.buttonRef.current?.id;
+      return data.buttonElement?.id;
     }
   },
   slot: {

package/dist/listbox/Listbox.svelte.d.ts

@@ -1,9 +1,6 @@
 import { type ByComparator } from "../hooks/use-by-comparator.js";
-import { Focus } from "../utils/calculate-active-index.js";
-import { type MutableRefObject } from "../utils/ref.svelte.js";
 import type { ElementType, Props } from "../utils/types.js";
 import { type Snippet } from "svelte";
-import { ActivationTrigger, ListboxStates, ValueMode } from "./ListboxStates.js";
 declare let DEFAULT_LISTBOX_TAG: string;
 type ListboxRenderPropArg<T> = {
     open: boolean;
@@ -25,59 +22,11 @@ export type ListboxProps<TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG,
     __demoMode?: boolean;
 }>;
 export type ListboxChildren<T> = Snippet<[ListboxRenderPropArg<T>]>;
-export * from "./ListboxStates.js";
-export type ListboxOptionDataRef<T> = MutableRefObject<{
-    textValue?: string;
-    disabled: boolean;
-    value: T;
-    domRef: MutableRefObject<HTMLElement | null>;
-}>;
-interface StateDefinition<T> {
-    listboxState: ListboxStates;
-    options: {
-        id: string;
-        dataRef: ListboxOptionDataRef<T>;
-    }[];
-    searchQuery: string;
-    activeOptionIndex: number | null;
-    activationTrigger: ActivationTrigger;
-    __demoMode: boolean;
-}
-type ListboxActionsContext = {
-    openListbox(): void;
-    closeListbox(): void;
-    registerOption(id: string, dataRef: ListboxOptionDataRef<unknown>): () => void;
-    goToOption(focus: Focus.Specific, id: string, trigger?: ActivationTrigger): void;
-    goToOption(focus: Focus, id?: string, trigger?: ActivationTrigger): void;
-    selectOption(id: string): void;
-    selectActiveOption(): void;
-    onChange(value: unknown): void;
-    search(query: string): void;
-    clearSearch(): void;
-};
-export declare function useActions(component: string): ListboxActionsContext;
-export type ListboxDataContext = {
-    value: unknown;
-    disabled: boolean;
-    invalid: boolean;
-    mode: ValueMode;
-    orientation: "horizontal" | "vertical";
-    activeOptionIndex: number | null;
-    compare(a: unknown, z: unknown): boolean;
-    isSelected(value: unknown): boolean;
-    optionsPropsRef: MutableRefObject<{
-        static: boolean;
-        hold: boolean;
-    }>;
-    listRef: MutableRefObject<Map<string, HTMLElement | null>>;
-    buttonRef: MutableRefObject<HTMLElement | null>;
-    optionsRef: MutableRefObject<HTMLElement | null>;
-} & Omit<StateDefinition<unknown>, "dataRef">;
-export declare function useData(component: string): ListboxDataContext;
+export * from "./context.svelte.js";
 declare class __sveltets_Render<TType, TActualType, TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "name" | "value" | "onchange" | "multiple" | "__demoMode" | "defaultValue" | "by" | "horizontal"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "name" | "value" | "onchange" | "multiple" | "__demoMode" | "horizontal" | "defaultValue" | "by"> 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<ListboxRenderPropArg<TType>> | 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) ? {
@@ -99,7 +48,7 @@ declare class __sveltets_Render<TType, TActualType, TTag extends ElementType = t
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "ref";
+    bindings(): "ref" | "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/listbox/ListboxButton.svelte

@@ -6,7 +6,7 @@ import { Focus } from "../utils/calculate-active-index.js";
 import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
 import { useActivePress } from "../hooks/use-active-press.svelte.js";
 import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js";
-import { useFloating } from "../internal/floating.svelte.js";
+import { useFloatingReference, useFloatingReferenceProps } from "../internal/floating.svelte.js";
 import { stateFromSlot } from "../utils/state.js";
 import { useLabelledBy } from "../label/context.svelte.js";
 import { useDescribedBy } from "../description/context.svelte.js";
@@ -27,9 +27,10 @@ let {
   autofocus = false,
   ...theirProps
 } = $props();
-const { setReference, getReferenceProps: getFloatingReferenceProps } = useFloating();
+const { setReference } = useFloatingReference();
+const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps();
 $effect(() => {
-  data.buttonRef.current = ref || null;
+  data.buttonElement = ref || null;
   setReference(ref);
 });
 const disabled = $derived(data.disabled || ownDisabled);
@@ -61,7 +62,7 @@ const handleKeyUp = (event) => {
 const handleClick = (event) => {
   if (data.listboxState === ListboxStates.Open) {
     actions.closeListbox();
-    data.buttonRef.current?.focus({ preventScroll: true });
+    data.buttonElement?.focus({ preventScroll: true });
   } else {
     event.preventDefault();
     actions.openListbox();
@@ -106,7 +107,7 @@ const buttonType = useResolveButtonType({
     return { type: theirProps.type, as: theirProps.as };
   },
   get ref() {
-    return data.buttonRef;
+    return { current: data.buttonElement };
   }
 });
 const ourProps = $derived(
@@ -116,7 +117,7 @@ const ourProps = $derived(
       id,
       type: buttonType.type,
       "aria-haspopup": "listbox",
-      "aria-controls": data.optionsRef.current?.id,
+      "aria-controls": data.optionsElement?.id,
       "aria-expanded": data.listboxState === ListboxStates.Open,
       "aria-labelledby": labelledBy.value,
       "aria-describedby": describedBy.value,

package/dist/listbox/ListboxOption.svelte

@@ -43,11 +43,15 @@ const bag = $derived({
   }
 });
 $effect(() => {
+  if (usedInSelectedOption) return;
   if (!ref) {
-    data.listRef.current.delete(id);
+    data.listElements.delete(id);
   } else {
-    data.listRef.current.set(id, ref);
+    data.listElements.set(id, ref);
   }
+  return () => {
+    if (ref) data.listElements.delete(id);
+  };
 });
 $effect(() => {
   if (data.__demoMode) return;
@@ -72,7 +76,7 @@ const handleClick = (event) => {
   actions.onChange(value);
   if (data.mode === ValueMode.Single) {
     actions.closeListbox();
-    data.buttonRef.current?.focus({ preventScroll: true });
+    data.buttonElement?.focus({ preventScroll: true });
   }
 };
 const handleFocus = () => {