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

package/dist/description/context.svelte.js

@@ -1,7 +1,7 @@
 import { getContext, setContext } from "svelte";
 export function useDescriptionContext() {
     let context = getContext("DescriptionContext");
-    if (context === null) {
+    if (!context) {
         let err = new Error("You used a <Description /> component, but it is not inside a relevant parent.");
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useDescriptionContext);

package/dist/dialog/context.svelte.js

@@ -6,7 +6,7 @@ export var DialogStates;
 })(DialogStates || (DialogStates = {}));
 export function useDialogContext(component) {
     const context = getContext("DialogContext");
-    if (context === null) {
+    if (!context) {
         let err = new Error(`<${component} /> is missing a parent <Dialog /> component.`);
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useDialogContext);

package/dist/internal/floating.svelte.js

@@ -234,7 +234,7 @@ function useResolvePxValue(options) {
     const immediateValue = $derived(computeValue(input, element)[0]);
     let explicitValue = $state();
     const setValue = (value) => (explicitValue = value);
-    const value = explicitValue ?? immediateValue;
+    const value = $derived(explicitValue ?? immediateValue);
     $effect(() => {
         const [value, watcher] = computeValue(input, element);
         setValue(value);

package/dist/label/context.svelte.js

@@ -1,7 +1,7 @@
 import { getContext, setContext } from "svelte";
 export function useLabelContext() {
     let context = getContext("LabelContext");
-    if (context === null) {
+    if (!context) {
         let err = new Error("You used a <Label /> component, but it is not inside a relevant parent.");
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useLabelContext);

package/dist/listbox/ListboxOption.svelte

@@ -27,7 +27,8 @@ let {
 const usedInSelectedOption = getContext("SelectedOptionContext") === true;
 const data = useData("ListboxOption");
 const actions = useActions("ListboxOption");
-const active = $derived(data.activeOptionIndex !== null ? data.options[data.activeOptionIndex].id === id : false);
+const { activeOptionIndex, options } = $derived(data);
+const active = $derived(activeOptionIndex !== null ? options[activeOptionIndex].id === id : false);
 const selected = $derived(data.isSelected(value));
 const getTextValue = useTextValue({
   get element() {

package/dist/listbox/ListboxOptions.svelte

@@ -245,13 +245,65 @@ const ourProps = $derived({
   }),
   ...transitionDataAttributes(transitionData)
 });
-const derivedData = {
+const derivedData = $derived({
   ...data,
   get isSelected() {
     return data.mode === ValueMode.Multi ? data.isSelected : isSelected;
   }
-};
-setContext("ListboxDataContext", derivedData);
+});
+setContext("ListboxDataContext", {
+  get value() {
+    return data.value;
+  },
+  get disabled() {
+    return data.disabled;
+  },
+  get invalid() {
+    return data.invalid;
+  },
+  get mode() {
+    return data.mode;
+  },
+  get orientation() {
+    return data.orientation;
+  },
+  get activeOptionIndex() {
+    return data.activeOptionIndex;
+  },
+  get compare() {
+    return data.compare;
+  },
+  get isSelected() {
+    return data.mode === ValueMode.Multi ? data.isSelected : isSelected;
+  },
+  get optionsProps() {
+    return data.optionsProps;
+  },
+  get listElements() {
+    return data.listElements;
+  },
+  get buttonElement() {
+    return data.buttonElement;
+  },
+  get optionsElement() {
+    return data.optionsElement;
+  },
+  get listboxState() {
+    return data.listboxState;
+  },
+  get options() {
+    return data.options;
+  },
+  get searchQuery() {
+    return data.searchQuery;
+  },
+  get activationTrigger() {
+    return data.activationTrigger;
+  },
+  get __demoMode() {
+    return data.__demoMode;
+  }
+});
 </script>
 
 <Portal enabled={portal ? theirProps.static || visible : false}>

package/dist/listbox/context.svelte.js

@@ -26,7 +26,7 @@ export function useActions(component) {
 }
 export function useData(component) {
     const context = getContext("ListboxDataContext");
-    if (context === null) {
+    if (!context) {
         let err = new Error(`<${component} /> is missing a parent <Listbox /> component.`);
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useData);

package/dist/menu/Menu.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
 import { useFloatingProvider } from "../internal/floating.svelte.js";
 import { createOpenClosedContext, State } from "../internal/open-closed.js";
-import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
 import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { FocusableMode, isFocusableElement, sortByDomNode } from "../utils/focus-management.js";
+import { FocusableMode, isFocusableElement } from "../utils/focus-management.js";
 import { match } from "../utils/match.js";
 let DEFAULT_MENU_TAG = "svelte:fragment";
 </script>
@@ -11,180 +10,9 @@ let DEFAULT_MENU_TAG = "svelte:fragment";
 <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_MENU_TAG">import { setContext } from "svelte";
 import {
   ActivationTrigger,
-  MenuStates
+  MenuStates,
+  stateReducer
 } from "./context.svelte.js";
-function adjustOrderedState(state, adjustment = (i) => i) {
-  let currentActiveItem = state.activeItemIndex !== null ? state.items[state.activeItemIndex] : null;
-  let sortedItems = sortByDomNode(adjustment(state.items.slice()), (item) => item.dataRef.current.domRef.current);
-  let adjustedActiveItemIndex = currentActiveItem ? sortedItems.indexOf(currentActiveItem) : null;
-  if (adjustedActiveItemIndex === -1) {
-    adjustedActiveItemIndex = null;
-  }
-  return {
-    items: sortedItems,
-    activeItemIndex: adjustedActiveItemIndex
-  };
-}
-const stateReducer = (initialState) => {
-  let _state2 = $state(initialState);
-  return {
-    get menuState() {
-      return _state2.menuState;
-    },
-    get buttonElement() {
-      return _state2.buttonElement;
-    },
-    get itemsElement() {
-      return _state2.itemsElement;
-    },
-    get items() {
-      return _state2.items;
-    },
-    get searchQuery() {
-      return _state2.searchQuery;
-    },
-    get activeItemIndex() {
-      return _state2.activeItemIndex;
-    },
-    get activationTrigger() {
-      return _state2.activationTrigger;
-    },
-    get __demoMode() {
-      return _state2.__demoMode;
-    },
-    closeMenu() {
-      if (_state2.menuState === MenuStates.Closed) return _state2;
-      _state2.activeItemIndex = null;
-      _state2.menuState = MenuStates.Closed;
-      return _state2;
-    },
-    openMenu() {
-      if (_state2.menuState === MenuStates.Open) return _state2;
-      _state2.__demoMode = false;
-      _state2.menuState = MenuStates.Open;
-      return _state2;
-    },
-    goToItem(action) {
-      if (_state2.menuState === MenuStates.Closed) return _state2;
-      _state2.searchQuery = "";
-      _state2.activationTrigger = action.trigger ?? ActivationTrigger.Other;
-      _state2.__demoMode = false;
-      if (action.focus === Focus.Nothing) {
-        _state2.activeItemIndex = null;
-        return _state2;
-      }
-      if (action.focus === Focus.Specific) {
-        _state2.activeItemIndex = _state2.items.findIndex((o) => o.id === action.id);
-        return _state2;
-      } else if (action.focus === Focus.Previous) {
-        let activeItemIdx = _state2.activeItemIndex;
-        if (activeItemIdx !== null) {
-          let currentDom = _state2.items[activeItemIdx].dataRef.current.domRef;
-          let previousItemIndex = calculateActiveIndex(action, {
-            resolveItems: () => _state2.items,
-            resolveActiveIndex: () => _state2.activeItemIndex,
-            resolveId: (item) => item.id,
-            resolveDisabled: (item) => item.dataRef.current.disabled
-          });
-          if (previousItemIndex !== null) {
-            let previousDom = _state2.items[previousItemIndex].dataRef.current.domRef;
-            if (
-              // Next to each other
-              currentDom.current?.previousElementSibling === previousDom.current || // Or already the first element
-              previousDom.current?.previousElementSibling === null
-            ) {
-              _state2.activeItemIndex = previousItemIndex;
-              return _state2;
-            }
-          }
-        }
-      } else if (action.focus === Focus.Next) {
-        let activeItemIdx = _state2.activeItemIndex;
-        if (activeItemIdx !== null) {
-          let currentDom = _state2.items[activeItemIdx].dataRef.current.domRef;
-          let nextItemIndex = calculateActiveIndex(action, {
-            resolveItems: () => _state2.items,
-            resolveActiveIndex: () => _state2.activeItemIndex,
-            resolveId: (item) => item.id,
-            resolveDisabled: (item) => item.dataRef.current.disabled
-          });
-          if (nextItemIndex !== null) {
-            let nextDom = _state2.items[nextItemIndex].dataRef.current.domRef;
-            if (
-              // Next to each other
-              currentDom.current?.nextElementSibling === nextDom.current || // Or already the last element
-              nextDom.current?.nextElementSibling === null
-            ) {
-              _state2.activeItemIndex = nextItemIndex;
-              return _state2;
-            }
-          }
-        }
-      }
-      let adjustedState = adjustOrderedState(_state2);
-      let activeItemIndex = calculateActiveIndex(action, {
-        resolveItems: () => adjustedState.items,
-        resolveActiveIndex: () => adjustedState.activeItemIndex,
-        resolveId: (item) => item.id,
-        resolveDisabled: (item) => item.dataRef.current.disabled
-      });
-      _state2.items = adjustedState.items;
-      _state2.activeItemIndex = activeItemIndex;
-      return _state2;
-    },
-    search(value) {
-      let wasAlreadySearching = _state2.searchQuery !== "";
-      let offset = wasAlreadySearching ? 0 : 1;
-      let searchQuery = _state2.searchQuery + value.toLowerCase();
-      let reOrderedItems = _state2.activeItemIndex !== null ? _state2.items.slice(_state2.activeItemIndex + offset).concat(_state2.items.slice(0, _state2.activeItemIndex + offset)) : _state2.items;
-      let matchingItem = reOrderedItems.find(
-        (item) => item.dataRef.current.textValue?.startsWith(searchQuery) && !item.dataRef.current.disabled
-      );
-      let matchIdx = matchingItem ? _state2.items.indexOf(matchingItem) : -1;
-      if (matchIdx === -1 || matchIdx === _state2.activeItemIndex) {
-        _state2.searchQuery = searchQuery;
-        return _state2;
-      }
-      _state2.searchQuery = searchQuery;
-      _state2.activeItemIndex = matchIdx;
-      _state2.activationTrigger = ActivationTrigger.Other;
-      return _state2;
-    },
-    clearSearch() {
-      if (_state2.searchQuery === "") return _state2;
-      _state2.searchQuery = "";
-      return _state2;
-    },
-    registerItem(id, dataRef) {
-      let item = { id, dataRef };
-      let adjustedState = adjustOrderedState(_state2, (items) => [...items, item]);
-      _state2.items = adjustedState.items;
-      _state2.activeItemIndex = adjustedState.activeItemIndex;
-      return _state2;
-    },
-    unregisterItem(id) {
-      let adjustedState = adjustOrderedState(_state2, (items) => {
-        let idx = items.findIndex((a) => a.id === id);
-        if (idx !== -1) items.splice(idx, 1);
-        return items;
-      });
-      _state2.items = adjustedState.items;
-      _state2.activeItemIndex = adjustedState.activeItemIndex;
-      _state2.activationTrigger = ActivationTrigger.Other;
-      return _state2;
-    },
-    setButtonElement(element) {
-      if (_state2.buttonElement === element) return _state2;
-      _state2.buttonElement = element;
-      return _state2;
-    },
-    setItemsElement(element) {
-      if (_state2.itemsElement === element) return _state2;
-      _state2.itemsElement = element;
-      return _state2;
-    }
-  };
-};
 let { ref = $bindable(), __demoMode = false, ...theirProps } = $props();
 const _state = stateReducer({
   __demoMode,

package/dist/menu/context.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Focus } from "../utils/calculate-active-index.js";
+import { Focus } from "../utils/calculate-active-index.js";
 import type { MutableRefObject } from "../utils/ref.svelte.js";
 export declare enum MenuStates {
     Open = 0,
@@ -45,3 +45,32 @@ export type MenuContext = StateDefinition & {
     setItemsElement(element: HTMLElement | null): void;
 };
 export declare function useMenuContext(component: string): MenuContext;
+export declare const stateReducer: (initialState: StateDefinition) => {
+    readonly menuState: MenuStates;
+    readonly buttonElement: HTMLButtonElement | null;
+    readonly itemsElement: HTMLElement | null;
+    readonly items: {
+        id: string;
+        dataRef: MenuItemDataRef;
+    }[];
+    readonly searchQuery: string;
+    readonly activeItemIndex: number | null;
+    readonly activationTrigger: ActivationTrigger;
+    readonly __demoMode: boolean;
+    closeMenu(): StateDefinition;
+    openMenu(): StateDefinition;
+    goToItem(action: {
+        focus: Focus.Specific;
+        id: string;
+        trigger?: ActivationTrigger;
+    } | {
+        focus: Exclude<Focus, Focus.Specific>;
+        trigger?: ActivationTrigger;
+    }): StateDefinition;
+    search(value: string): StateDefinition;
+    clearSearch(): StateDefinition;
+    registerItem(id: string, dataRef: MenuItemDataRef): StateDefinition;
+    unregisterItem(id: string): StateDefinition;
+    setButtonElement(element: HTMLButtonElement | null): StateDefinition;
+    setItemsElement(element: HTMLElement | null): StateDefinition;
+};

package/dist/menu/context.svelte.js

@@ -1,3 +1,5 @@
+import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
+import { sortByDomNode } from "../utils/focus-management.js";
 import { getContext } from "svelte";
 export var MenuStates;
 (function (MenuStates) {
@@ -19,3 +21,209 @@ export function useMenuContext(component) {
     }
     return context;
 }
+function adjustOrderedState(state, adjustment = (i) => i) {
+    let currentActiveItem = state.activeItemIndex !== null ? state.items[state.activeItemIndex] : null;
+    let sortedItems = sortByDomNode(adjustment(state.items.slice()), (item) => item.dataRef.current.domRef.current);
+    // If we inserted an item before the current active item then the active item index
+    // would be wrong. To fix this, we will re-lookup the correct index.
+    let adjustedActiveItemIndex = currentActiveItem ? sortedItems.indexOf(currentActiveItem) : null;
+    // Reset to `null` in case the currentActiveItem was removed.
+    if (adjustedActiveItemIndex === -1) {
+        adjustedActiveItemIndex = null;
+    }
+    return {
+        items: sortedItems,
+        activeItemIndex: adjustedActiveItemIndex,
+    };
+}
+export const stateReducer = (initialState) => {
+    let _state = $state(initialState);
+    return {
+        get menuState() {
+            return _state.menuState;
+        },
+        get buttonElement() {
+            return _state.buttonElement;
+        },
+        get itemsElement() {
+            return _state.itemsElement;
+        },
+        get items() {
+            return _state.items;
+        },
+        get searchQuery() {
+            return _state.searchQuery;
+        },
+        get activeItemIndex() {
+            return _state.activeItemIndex;
+        },
+        get activationTrigger() {
+            return _state.activationTrigger;
+        },
+        get __demoMode() {
+            return _state.__demoMode;
+        },
+        closeMenu() {
+            if (_state.menuState === MenuStates.Closed)
+                return _state;
+            _state.activeItemIndex = null;
+            _state.menuState = MenuStates.Closed;
+            return _state;
+        },
+        openMenu() {
+            if (_state.menuState === MenuStates.Open)
+                return _state;
+            /* We can turn off demo mode once we re-open the `Menu` */
+            _state.__demoMode = false;
+            _state.menuState = MenuStates.Open;
+            return _state;
+        },
+        goToItem(action) {
+            if (_state.menuState === MenuStates.Closed)
+                return _state;
+            _state.searchQuery = "";
+            _state.activationTrigger = action.trigger ?? ActivationTrigger.Other;
+            _state.__demoMode = false;
+            // Optimization:
+            //
+            // There is no need to sort the DOM nodes if we know that we don't want to focus anything
+            if (action.focus === Focus.Nothing) {
+                _state.activeItemIndex = null;
+                return _state;
+            }
+            // Optimization:
+            //
+            // There is no need to sort the DOM nodes if we know exactly where to go
+            if (action.focus === Focus.Specific) {
+                _state.activeItemIndex = _state.items.findIndex((o) => o.id === action.id);
+                return _state;
+            }
+            // Optimization:
+            //
+            // If the current DOM node and the previous DOM node are next to each other,
+            // or if the previous DOM node is already the first DOM node, then we don't
+            // have to sort all the DOM nodes.
+            else if (action.focus === Focus.Previous) {
+                let activeItemIdx = _state.activeItemIndex;
+                if (activeItemIdx !== null) {
+                    let currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
+                    let previousItemIndex = calculateActiveIndex(action, {
+                        resolveItems: () => _state.items,
+                        resolveActiveIndex: () => _state.activeItemIndex,
+                        resolveId: (item) => item.id,
+                        resolveDisabled: (item) => item.dataRef.current.disabled,
+                    });
+                    if (previousItemIndex !== null) {
+                        let previousDom = _state.items[previousItemIndex].dataRef.current.domRef;
+                        if (
+                        // Next to each other
+                        currentDom.current?.previousElementSibling === previousDom.current ||
+                            // Or already the first element
+                            previousDom.current?.previousElementSibling === null) {
+                            _state.activeItemIndex = previousItemIndex;
+                            return _state;
+                        }
+                    }
+                }
+            }
+            // Optimization:
+            //
+            // If the current DOM node and the next DOM node are next to each other, or
+            // if the next DOM node is already the last DOM node, then we don't have to
+            // sort all the DOM nodes.
+            else if (action.focus === Focus.Next) {
+                let activeItemIdx = _state.activeItemIndex;
+                if (activeItemIdx !== null) {
+                    let currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
+                    let nextItemIndex = calculateActiveIndex(action, {
+                        resolveItems: () => _state.items,
+                        resolveActiveIndex: () => _state.activeItemIndex,
+                        resolveId: (item) => item.id,
+                        resolveDisabled: (item) => item.dataRef.current.disabled,
+                    });
+                    if (nextItemIndex !== null) {
+                        let nextDom = _state.items[nextItemIndex].dataRef.current.domRef;
+                        if (
+                        // Next to each other
+                        currentDom.current?.nextElementSibling === nextDom.current ||
+                            // Or already the last element
+                            nextDom.current?.nextElementSibling === null) {
+                            _state.activeItemIndex = nextItemIndex;
+                            return _state;
+                        }
+                    }
+                }
+            }
+            // Slow path:
+            //
+            // Ensure all the items are correctly sorted according to DOM position
+            let adjustedState = adjustOrderedState(_state);
+            let activeItemIndex = calculateActiveIndex(action, {
+                resolveItems: () => adjustedState.items,
+                resolveActiveIndex: () => adjustedState.activeItemIndex,
+                resolveId: (item) => item.id,
+                resolveDisabled: (item) => item.dataRef.current.disabled,
+            });
+            _state.items = adjustedState.items;
+            _state.activeItemIndex = activeItemIndex;
+            return _state;
+        },
+        search(value) {
+            let wasAlreadySearching = _state.searchQuery !== "";
+            let offset = wasAlreadySearching ? 0 : 1;
+            let searchQuery = _state.searchQuery + value.toLowerCase();
+            let reOrderedItems = _state.activeItemIndex !== null
+                ? _state.items
+                    .slice(_state.activeItemIndex + offset)
+                    .concat(_state.items.slice(0, _state.activeItemIndex + offset))
+                : _state.items;
+            let matchingItem = reOrderedItems.find((item) => item.dataRef.current.textValue?.startsWith(searchQuery) && !item.dataRef.current.disabled);
+            let matchIdx = matchingItem ? _state.items.indexOf(matchingItem) : -1;
+            if (matchIdx === -1 || matchIdx === _state.activeItemIndex) {
+                _state.searchQuery = searchQuery;
+                return _state;
+            }
+            _state.searchQuery = searchQuery;
+            _state.activeItemIndex = matchIdx;
+            _state.activationTrigger = ActivationTrigger.Other;
+            return _state;
+        },
+        clearSearch() {
+            if (_state.searchQuery === "")
+                return _state;
+            _state.searchQuery = "";
+            return _state;
+        },
+        registerItem(id, dataRef) {
+            let item = { id, dataRef };
+            let adjustedState = adjustOrderedState(_state, (items) => [...items, item]);
+            _state.items = adjustedState.items;
+            _state.activeItemIndex = adjustedState.activeItemIndex;
+            return _state;
+        },
+        unregisterItem(id) {
+            let adjustedState = adjustOrderedState(_state, (items) => {
+                let idx = items.findIndex((a) => a.id === id);
+                if (idx !== -1)
+                    items.splice(idx, 1);
+                return items;
+            });
+            _state.items = adjustedState.items;
+            _state.activeItemIndex = adjustedState.activeItemIndex;
+            _state.activationTrigger = ActivationTrigger.Other;
+            return _state;
+        },
+        setButtonElement(element) {
+            if (_state.buttonElement === element)
+                return _state;
+            _state.buttonElement = element;
+            return _state;
+        },
+        setItemsElement(element) {
+            if (_state.itemsElement === element)
+                return _state;
+            _state.itemsElement = element;
+            return _state;
+        },
+    };
+};

package/dist/transition/context.svelte.js

@@ -10,14 +10,14 @@ export var TreeStates;
 })(TreeStates || (TreeStates = {}));
 export function useTransitionContext() {
     const context = getContext("TransitionContext");
-    if (context === null) {
+    if (!context) {
         throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
     }
     return context;
 }
 export function useParentNesting() {
     let context = getContext("NestingContext");
-    if (context === null) {
+    if (!context) {
         throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
     }
     return context;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.12",
+  "version": "2.1.2-next.14",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",