svelte-5-select 1.0.2 → 2.1.0

package/dist/use-hover.svelte.d.ts

@@ -1,11 +1,7 @@
-import type { HoverContext, SelectItem } from './types';
-export declare function useHover(context: HoverContext): {
-    computeNextIndex: (filteredItems: SelectItem[], fromIndex: number, increment: number) => number;
+import type { ItemLike, SelectItem, SelectState } from './types.js';
+export declare function useHover<Item extends ItemLike = SelectItem>(state: SelectState<Item>): {
     setHoverIndex: (increment: number) => void;
-    setValueIndexAsHoverIndex: () => void;
-    checkHoverSelectable: (startingIndex?: number, ignoreGroup?: boolean) => void;
-    getFirstSelectableIndex: () => number;
-    isItemActive: (item: SelectItem, val: SelectItem | SelectItem[] | null | undefined, itemId: string) => boolean | undefined;
+    isItemActive: (item: SelectItem) => boolean;
     isItemSelectable: (item: SelectItem) => boolean;
     handleHover: (i: number) => void;
     handleListScroll: () => void;

package/dist/use-hover.svelte.js

@@ -1,7 +1,10 @@
-import { areItemsEqual, isItemSelectableCheck } from './utils';
-export function useHover(context) {
+import { untrack } from 'svelte';
+import { areItemsEqual, getItemProperty, isItemSelectableCheck, normalizeItem } from './utils.js';
+export function useHover(state) {
     function computeNextIndex(filteredItems, fromIndex, increment) {
-        let selectableFilteredItems = filteredItems.filter((item) => !Object.hasOwn(item, 'selectable') || item.selectable === true);
+        // Same predicate as click/Enter selection: arrow keys must be able to
+        // reach every item the user can otherwise select
+        const selectableFilteredItems = filteredItems.filter((item) => isItemSelectableCheck(item));
         if (selectableFilteredItems.length === 0) {
             return 0;
         }
@@ -9,7 +12,7 @@ export function useHover(context) {
         const isCurrentSelectable = isItemSelectableCheck(currentItem);
         let currentSelectableIndex;
         if (isCurrentSelectable) {
-            currentSelectableIndex = selectableFilteredItems.findIndex(item => item === currentItem);
+            currentSelectableIndex = selectableFilteredItems.findIndex((item) => item === currentItem);
         }
         else {
             currentSelectableIndex = increment > 0 ? -1 : selectableFilteredItems.length;
@@ -19,40 +22,40 @@ export function useHover(context) {
             newSelectableIndex = (currentSelectableIndex + 1) % selectableFilteredItems.length;
         }
         else {
-            newSelectableIndex = (currentSelectableIndex - 1 + selectableFilteredItems.length) % selectableFilteredItems.length;
+            newSelectableIndex =
+                (currentSelectableIndex - 1 + selectableFilteredItems.length) % selectableFilteredItems.length;
         }
         const newItem = selectableFilteredItems[newSelectableIndex];
-        return filteredItems.findIndex(item => item === newItem);
+        return filteredItems.findIndex((item) => item === newItem);
     }
     function setHoverIndex(increment) {
-        const { filteredItems, hoverItemIndex } = context.getState();
-        context.setHoverItemIndex(computeNextIndex(filteredItems, hoverItemIndex, increment));
+        const { filteredItems, hoverItemIndex } = state;
+        state.hoverItemIndex = computeNextIndex(filteredItems, hoverItemIndex, increment);
     }
     function setValueIndexAsHoverIndex() {
-        const { value, filteredItems, itemId } = context.getState();
-        const normalizedValue = !value ? null : typeof value === 'string' ? { value, label: value } : value;
+        const { normalizedValue, filteredItems, itemId } = state;
         if (!normalizedValue || Array.isArray(normalizedValue))
             return;
-        const singleValue = normalizedValue;
-        const valueIndex = filteredItems.findIndex((i) => {
-            return i[itemId] === singleValue[itemId];
-        });
+        const valueIndex = filteredItems.findIndex((item) => getItemProperty(item, itemId) === getItemProperty(normalizedValue, itemId));
         checkHoverSelectable(valueIndex, true);
     }
-    function checkHoverSelectable(startingIndex = 0, ignoreGroup) {
-        const { groupBy, filteredItems } = context.getState();
+    function checkHoverSelectable(startingIndex = 0, trustIndex) {
+        const { filteredItems } = state;
         const idx = startingIndex < 0 ? 0 : startingIndex;
-        if (!ignoreGroup && groupBy && filteredItems[idx] && !filteredItems[idx].selectable) {
+        // Same predicate as click/Enter selection (a missing `selectable` key
+        // means selectable), and not gated on groupBy: a plain list can start
+        // with a non-selectable item too
+        if (!trustIndex && filteredItems[idx] && !isItemSelectableCheck(filteredItems[idx])) {
             // Compute the final index without intermediate state writes
-            context.setHoverItemIndex(computeNextIndex(filteredItems, idx, 1));
+            state.hoverItemIndex = computeNextIndex(filteredItems, idx, 1);
         }
         else {
-            context.setHoverItemIndex(idx);
+            state.hoverItemIndex = idx;
         }
     }
     function getFirstSelectableIndex() {
-        const { groupBy, filteredItems } = context.getState();
-        if (!groupBy || filteredItems.length === 0)
+        const { filteredItems } = state;
+        if (filteredItems.length === 0)
             return 0;
         if (!isItemSelectableCheck(filteredItems[0])) {
             const firstSelectable = filteredItems.findIndex(isItemSelectableCheck);
@@ -60,34 +63,105 @@ export function useHover(context) {
         }
         return 0;
     }
-    function isItemActive(item, val, itemId) {
-        const { multiple } = context.getState();
-        if (multiple)
-            return;
-        const normalized = !val ? null : typeof val === 'string' ? { value: val, label: val } : val;
-        return areItemsEqual(normalized, item, itemId);
+    function isItemActive(item) {
+        const { multiple, normalizedValue, itemId } = state;
+        if (multiple) {
+            if (!Array.isArray(normalizedValue))
+                return false;
+            // Array entries may still be raw strings; normalize each before comparing
+            return normalizedValue.some((v) => areItemsEqual(normalizeItem(v), item, itemId));
+        }
+        if (Array.isArray(normalizedValue))
+            return false;
+        return areItemsEqual(normalizedValue, item, itemId);
     }
     function isItemSelectable(item) {
         return (item.groupHeader && item.selectable) || isItemSelectableCheck(item);
     }
     function handleHover(i) {
-        const { isScrolling } = context.getState();
-        if (isScrolling)
+        if (state.isScrolling)
             return;
-        context.setHoverItemIndex(i);
+        state.hoverItemIndex = i;
+        // Driven by row mousemove (never mouseover): browsers synthesize
+        // mouseover when the list renders — or scrolls rows — under a
+        // stationary cursor, which is zero user action and used to yank both
+        // hover and aria-activedescendant off the keyboard cursor right after
+        // open. mousemove only fires for real pointer movement. Deliberately
+        // NOT commit-intent for Tab either; that is the list-level mousemove
+        // handler in Select.svelte.
     }
+    let scrollEndFallback;
     function handleListScroll() {
-        context.setIsScrolling(true);
+        state.isScrolling = true;
+        // scrollend never fires on some browsers (e.g. Safari < 18.2); without a
+        // fallback a single scroll would wedge isScrolling and kill hover + blur
+        clearTimeout(scrollEndFallback);
+        scrollEndFallback = setTimeout(() => {
+            state.isScrolling = false;
+        }, 150);
     }
     function handleListScrollEnd() {
-        context.setIsScrolling(false);
+        clearTimeout(scrollEndFallback);
+        state.isScrolling = false;
     }
+    // Teardown-only effect (not onDestroy: composables are also created inside
+    // $effect.root in tests, where onDestroy has no component context)
+    $effect(() => {
+        return () => clearTimeout(scrollEndFallback);
+    });
+    // Set value index as hover when list opens
+    $effect(() => {
+        const shouldSnap = !state.multiple && state.listOpen && !!state.value && !!state.filteredItems;
+        untrack(() => {
+            // One-shot: a type-ahead keypress that opened the list has already
+            // parked hover on its match — snapping to the value would clobber
+            // it. Consume the flag on every run so it can never go stale.
+            const suppressed = state.suppressValueHoverSnap;
+            state.suppressValueHoverSnap = false;
+            if (shouldSnap && !suppressed)
+                setValueIndexAsHoverIndex();
+        });
+    });
+    // Keep hover on a selectable item
+    $effect(() => {
+        state.filteredItems;
+        state.value;
+        state.multiple;
+        state.listOpen;
+        untrack(() => {
+            if (state.listOpen && state.filteredItems.length > 0) {
+                if (!isItemSelectableCheck(state.filteredItems[state.hoverItemIndex])) {
+                    checkHoverSelectable();
+                }
+            }
+        });
+    });
+    // A parent can write any number through bind:hoverItemIndex; internal
+    // writers are all range-safe. An out-of-range cursor silently kills
+    // Enter/Space/Tab (they read filteredItems[hoverItemIndex] → undefined)
+    // until the next arrow key, so correct it as soon as it lands. Only
+    // genuinely out-of-range values are touched: a pointer resting on a
+    // non-selectable row is a valid cursor position, which is why the
+    // keep-hover effect above reads the index untracked and must stay that way.
+    $effect(() => {
+        const idx = state.hoverItemIndex;
+        const inRange = idx >= 0 && idx < state.filteredItems.length;
+        untrack(() => {
+            if (!state.listOpen || state.filteredItems.length === 0 || inRange)
+                return;
+            checkHoverSelectable();
+        });
+    });
+    // Reset hover to the first selectable item on filterText change
+    $effect(() => {
+        if (state.filterText) {
+            untrack(() => {
+                state.hoverItemIndex = getFirstSelectableIndex();
+            });
+        }
+    });
     return {
-        computeNextIndex,
         setHoverIndex,
-        setValueIndexAsHoverIndex,
-        checkHoverSelectable,
-        getFirstSelectableIndex,
         isItemActive,
         isItemSelectable,
         handleHover,

package/dist/use-load-options.svelte.d.ts

@@ -1,4 +1,19 @@
-import type { LoadOptionsContext } from './types';
-export declare function useLoadOptions(context: LoadOptionsContext): {
-    handleLoadOptions: (currentFilterText: string, currentDeps: any[]) => void;
+import type { ItemLike, LoadOptionsActions, SelectItem, SelectState } from './types.js';
+export interface HandleLoadOptionsOptions {
+    /**
+     * Validate the selection against the loaded items (dependency-driven reloads):
+     * entries missing from a non-empty result are dropped; an empty result is no
+     * evidence and never clears.
+     */
+    validateValue?: boolean;
+    /** Defer the fetch through the debounce action (typing); defaults to the legacy prevFilterText comparison. */
+    debounce?: boolean;
+    /** Clear value/items in the disabled branch; the load effect only passes true on an actual disabled transition. */
+    clearValueOnDisabled?: boolean;
+}
+export declare function useLoadOptions<Item extends ItemLike = SelectItem>(state: SelectState<Item>, actions: LoadOptionsActions): {
+    handleLoadOptions: (currentFilterText: string, options?: HandleLoadOptionsOptions) => void;
+    cancelPendingFilterLoad: () => void;
+    retireValidationForFreshSelection: () => void;
+    invalidateLoads: () => void;
 };