svelte-5-select 1.0.2 → 2.1.0

package/dist/Select.svelte.d.ts

@@ -1,6 +1,38 @@
-import type { SelectProps } from './types';
-declare const Select: import("svelte").Component<SelectProps, {
-    reset: () => void;
-}, "loading" | "value" | "hoverItemIndex" | "listOpen" | "filterText" | "items" | "focused" | "justValue">;
-type Select = ReturnType<typeof Select>;
+import type { ItemLike, SelectProps, SelectRow } from './types.js';
+import type { SelectItem } from './types.js';
+declare function $$render<Item extends ItemLike = SelectItem, Multiple extends boolean = false>(): {
+    props: SelectProps<Item, Multiple>;
+    exports: {
+        getFilteredItems: () => SelectRow<Item>[];
+        reset: () => void;
+    };
+    bindings: "loading" | "value" | "hoverItemIndex" | "listOpen" | "filterText" | "items" | "justValue" | "focused" | "container" | "input";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends ItemLike = SelectItem, Multiple extends boolean = false> {
+    props(): ReturnType<typeof $$render<Item, Multiple>>['props'];
+    events(): ReturnType<typeof $$render<Item, Multiple>>['events'];
+    slots(): ReturnType<typeof $$render<Item, Multiple>>['slots'];
+    bindings(): "loading" | "value" | "hoverItemIndex" | "listOpen" | "filterText" | "items" | "justValue" | "focused" | "container" | "input";
+    exports(): {
+        getFilteredItems: () => SelectRow<Item>[];
+        reset: () => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <Item extends ItemLike = SelectItem, Multiple extends boolean = false>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item, Multiple>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item, Multiple>['props']>, ReturnType<__sveltets_Render<Item, Multiple>['events']>, ReturnType<__sveltets_Render<Item, Multiple>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item, Multiple>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item, Multiple>['exports']>;
+    <Item extends ItemLike = SelectItem, Multiple extends boolean = false>(internal: unknown, props: ReturnType<__sveltets_Render<Item, Multiple>['props']> & {}): ReturnType<__sveltets_Render<Item, Multiple>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+/**
+ * A select/autocomplete/typeahead control: a WAI-ARIA combobox with a floating
+ * listbox popup. Generic over your item type; supports multi-select, async
+ * loading (`loadOptions`), grouping (`groupBy`), and snippet-based customization.
+ * Bind `value` (and optionally `justValue`, `filterText`, `listOpen`, `focused`).
+ */
+declare const Select: $$IsomorphicComponent;
+type Select<Item extends ItemLike = SelectItem, Multiple extends boolean = false> = InstanceType<typeof Select<Item, Multiple>>;
 export default Select;

package/dist/aria-handlers.svelte.d.ts

@@ -1,16 +1,19 @@
-import type { SelectItem } from './types';
+import type { SelectItem } from './types.js';
 interface AriaHandlersConfig {
     ariaValues: (values: string) => string;
     ariaListOpen: (label: string, count: number) => string;
     ariaFocused: () => string;
+    ariaEmpty?: () => string;
+    ariaLoading?: () => string;
 }
 interface AriaHandlersContext {
-    value: string | SelectItem | SelectItem[] | null | undefined;
+    value: string | SelectItem | (SelectItem | string)[] | null | undefined;
     filteredItems: SelectItem[];
     hoverItemIndex: number;
     listOpen: boolean;
     multiple: boolean;
     label: string;
+    loading?: boolean;
 }
 export declare function useAriaHandlers(config: AriaHandlersConfig): {
     handleAriaSelection: (context: AriaHandlersContext) => string;

package/dist/aria-handlers.svelte.js

@@ -1,8 +1,10 @@
+import { isItemSelectableCheck } from './utils.js';
 export function useAriaHandlers(config) {
-    const { ariaValues, ariaListOpen, ariaFocused } = config;
+    // Read the config properties at call time so live getters (see Select.svelte) stay reactive
     function handleAriaSelection(context) {
         const { value, multiple, label } = context;
-        if (!value)
+        // An empty array is no selection: announcing it would claim one exists
+        if (!value || (Array.isArray(value) && value.length === 0))
             return '';
         let selected = undefined;
         if (typeof value === 'string') {
@@ -14,19 +16,39 @@ export function useAriaHandlers(config) {
         else if (!multiple && value) {
             selected = value[label];
         }
-        return ariaValues(selected || '');
+        return config.ariaValues(selected || '');
     }
     function handleAriaContent(context) {
-        const { filteredItems, hoverItemIndex, listOpen, label } = context;
-        if (!filteredItems || filteredItems.length === 0)
+        const { filteredItems, hoverItemIndex, listOpen, label, loading } = context;
+        if (!filteredItems || filteredItems.length === 0) {
+            // The visible list shows a loading/empty state here; silence would leave
+            // screen-reader users unable to tell pending results from no results
+            if (listOpen) {
+                return loading ? (config.ariaLoading?.() ?? 'Loading Data') : (config.ariaEmpty?.() ?? 'No options');
+            }
             return '';
+        }
         const _item = filteredItems[hoverItemIndex];
         if (listOpen && _item) {
-            const count = filteredItems.length;
-            return ariaListOpen(_item[label], count);
+            // Presentational group headers are aria-hidden and unreachable by the
+            // cursor, so counting them would announce more "results" than a
+            // screen-reader user can ever reach. Selectable headers
+            // (groupHeaderSelectable) are real options and do count.
+            const count = filteredItems.filter((item) => !(item.groupHeader && !item.selectable)).length;
+            // This text renders before use-hover's keep-hover-selectable
+            // correction runs, so on the first open of a grouped list the cursor
+            // is still parked on a non-selectable header. Announce the option the
+            // correction is about to land on (the first selectable row — the same
+            // index checkHoverSelectable computes) instead of a row the cursor can
+            // never reach; the region won't recompute after the correction because
+            // hoverItemIndex is deliberately untracked (see Select.svelte).
+            const announced = isItemSelectableCheck(_item)
+                ? _item
+                : (filteredItems.find(isItemSelectableCheck) ?? _item);
+            return config.ariaListOpen(announced[label], count);
         }
         else {
-            return ariaFocused();
+            return config.ariaFocused();
         }
     }
     return {

package/dist/filter.d.ts

@@ -1,2 +1,10 @@
-import type { FilterConfig, SelectItem } from './types';
-export default function filter({ loadOptions, filterText, items, multiple, value, itemId, groupBy, filterSelectedItems, itemFilter, convertStringItemsToObjects, filterGroupedItems, label, }: FilterConfig): SelectItem[];
+import type { FilterConfig, ItemLike, SelectItem } from './types.js';
+/**
+ * The built-in filtering pipeline: converts raw string items, applies
+ * `itemFilter` against the filter text (skipped when `loadOptions` is set —
+ * loader results are already filtered remotely), hides selected options in
+ * multiple mode (`filterSelectedItems`), and applies grouping. Exported so a
+ * custom `filter` prop can delegate to it before or after its own logic; see
+ * {@link FilterConfig} for what each field carries.
+ */
+export default function filter<Item extends ItemLike = SelectItem>({ loadOptions, filterText, items, multiple, value, itemId, groupBy, filterSelectedItems, itemFilter, convertStringItemsToObjects, applyGrouping, label, }: FilterConfig<Item>): SelectItem[];

package/dist/filter.js

@@ -1,8 +1,13 @@
-import { areItemsEqual, isStringArray } from './utils';
-export default function filter({ loadOptions, filterText = '', items, multiple, value, itemId, groupBy, filterSelectedItems, itemFilter, convertStringItemsToObjects, filterGroupedItems, label, }) {
-    if (items && loadOptions) {
-        return items;
-    }
+import { areItemsEqual, isStringArray } from './utils.js';
+/**
+ * The built-in filtering pipeline: converts raw string items, applies
+ * `itemFilter` against the filter text (skipped when `loadOptions` is set —
+ * loader results are already filtered remotely), hides selected options in
+ * multiple mode (`filterSelectedItems`), and applies grouping. Exported so a
+ * custom `filter` prop can delegate to it before or after its own logic; see
+ * {@link FilterConfig} for what each field carries.
+ */
+export default function filter({ loadOptions, filterText = '', items, multiple, value, itemId, groupBy, filterSelectedItems, itemFilter, convertStringItemsToObjects, applyGrouping, label, }) {
     // If no items, return empty array
     if (!items) {
         return [];
@@ -12,9 +17,11 @@ export default function filter({ loadOptions, filterText = '', items, multiple,
     if (aStringArray) {
         typedItems = convertStringItemsToObjects(typedItems);
     }
-    // Filter items based on filter text and selection
+    // Filter items based on filter text and selection.
+    // With loadOptions the results are already filtered remotely, so skip itemFilter.
+    // String items were converted to plain SelectItems above, hence the Item cast.
     let filterResults = typedItems.filter((item) => {
-        let matchesFilter = itemFilter(item[label], filterText, item);
+        let matchesFilter = loadOptions ? true : itemFilter(item[label], filterText, item);
         if (matchesFilter && multiple && Array.isArray(value) && value.length > 0) {
             matchesFilter = !value.some((x) => {
                 return filterSelectedItems ? areItemsEqual(x, item, itemId) : false;
@@ -24,7 +31,7 @@ export default function filter({ loadOptions, filterText = '', items, multiple,
     });
     // Apply grouping if groupBy function is provided
     if (groupBy) {
-        filterResults = filterGroupedItems(filterResults);
+        filterResults = applyGrouping(filterResults);
     }
     return filterResults;
 }

package/dist/index.d.ts

@@ -2,7 +2,6 @@ export { default as Select } from './Select.svelte';
 export { default as ChevronIcon } from './ChevronIcon.svelte';
 export { default as ClearIcon } from './ClearIcon.svelte';
 export { default as LoadingIcon } from './LoadingIcon.svelte';
-export { default as filter } from './filter';
-export { useKeyboardNavigation } from './keyboard-navigation.svelte';
-export { isStringArray, isCancelled, areItemsEqual } from './utils';
-export type { SelectItem, SelectProps, SelectValue, JustValue, FloatingConfig, FilterConfig, KeyboardNavigationContext, ErrorEvent, } from './types';
+export { default as filter } from './filter.js';
+export { areItemsEqual, isGroupHeader, normalizeItem } from './utils.js';
+export type { ItemLike, SelectItem, SelectGroupHeader, SelectRow, SelectProps, SelectValue, SelectValueProp, SelectClearValue, JustValue, FloatingConfig, FilterConfig, SelectErrorEvent, } from './types.js';

package/dist/index.js

@@ -5,6 +5,5 @@ export { default as ChevronIcon } from './ChevronIcon.svelte';
 export { default as ClearIcon } from './ClearIcon.svelte';
 export { default as LoadingIcon } from './LoadingIcon.svelte';
 // Utility functions
-export { default as filter } from './filter';
-export { useKeyboardNavigation } from './keyboard-navigation.svelte';
-export { isStringArray, isCancelled, areItemsEqual } from './utils';
+export { default as filter } from './filter.js';
+export { areItemsEqual, isGroupHeader, normalizeItem } from './utils.js';

package/dist/keyboard-navigation.svelte.d.ts

@@ -1,12 +1,17 @@
-import type { KeyboardNavigationContext } from './types';
-export declare function useKeyboardNavigation(context: KeyboardNavigationContext): {
+import type { ItemLike, KeyboardNavigationActions, KeyboardNavigationState, SelectItem } from './types.js';
+export declare function useKeyboardNavigation<Item extends ItemLike = SelectItem>(state: KeyboardNavigationState<Item>, actions: KeyboardNavigationActions): {
     handleKeyDown: (e: KeyboardEvent) => void;
     handleEscapeKey: (e: KeyboardEvent) => void;
     handleEnterKey: (e: KeyboardEvent) => void;
+    handleSpaceKey: (e: KeyboardEvent) => void;
     handleArrowDownKey: (e: KeyboardEvent) => void;
     handleArrowUpKey: (e: KeyboardEvent) => void;
     handleTabKey: (e: KeyboardEvent) => void;
     handleBackspaceKey: (e: KeyboardEvent) => void;
     handleArrowLeftKey: (e: KeyboardEvent) => void;
     handleArrowRightKey: (e: KeyboardEvent) => void;
+    handleHomeKey: (e: KeyboardEvent) => void;
+    handleEndKey: (e: KeyboardEvent) => void;
+    handlePageUpKey: (e: KeyboardEvent) => void;
+    handlePageDownKey: (e: KeyboardEvent) => void;
 };

package/dist/keyboard-navigation.svelte.js

@@ -1,124 +1,370 @@
-import { areItemsEqual } from './utils';
-export function useKeyboardNavigation(context) {
+import { areItemsEqual, getItemProperty, isItemSelectableCheck } from './utils.js';
+export function useKeyboardNavigation(state, actions) {
+    // Handlers claim an event (preventDefault/stopPropagation) only on branches
+    // that actually act on it. Unclaimed keys keep bubbling so ancestors still
+    // see them — Escape can close a surrounding dialog, Enter can submit a form.
+    // Claimed keys must stop propagation so the component's window listener does
+    // not handle the same bubbled event a second time.
     function handleKeyDown(e) {
-        e.stopPropagation();
-        const { focused } = context.getState();
-        if (!focused)
+        // The disabled gate is defence in depth: disabling releases focus, but
+        // `focused` can lag DOM focus (e.g. the deferred-blur window), and a
+        // disabled control must never mutate its value from the keyboard.
+        if (!state.focused || state.disabled)
+            return;
+        // While an IME composition is active every key belongs to the IME:
+        // Enter commits the conversion, arrows move through the candidate
+        // window, Escape cancels it. Acting on those presses would select the
+        // hovered option and wipe the half-composed filter text. keyCode 229
+        // catches the WebKit/legacy path where the composition keydown
+        // reports isComposing === false.
+        if (e.isComposing || e.keyCode === 229)
             return;
         const handlers = {
-            'Escape': handleEscapeKey,
-            'Enter': handleEnterKey,
-            'ArrowDown': handleArrowDownKey,
-            'ArrowUp': handleArrowUpKey,
-            'Tab': handleTabKey,
-            'Backspace': handleBackspaceKey,
-            'ArrowLeft': handleArrowLeftKey,
-            'ArrowRight': handleArrowRightKey,
+            Escape: handleEscapeKey,
+            Enter: handleEnterKey,
+            ' ': handleSpaceKey,
+            ArrowDown: handleArrowDownKey,
+            ArrowUp: handleArrowUpKey,
+            Tab: handleTabKey,
+            Backspace: handleBackspaceKey,
+            ArrowLeft: handleArrowLeftKey,
+            ArrowRight: handleArrowRightKey,
+            Home: handleHomeKey,
+            End: handleEndKey,
+            PageUp: handlePageUpKey,
+            PageDown: handlePageDownKey,
         };
         const handler = handlers[e.key];
         if (handler) {
             handler(e);
+            return;
+        }
+        handleTypeAheadKey(e);
+    }
+    // Type-ahead for select-only mode (APG combobox pattern): the input is
+    // readonly when searchable is false, so printable characters move hover to
+    // the next option whose label starts with what was typed. Searchable
+    // selects filter by typing instead and never enter this path.
+    let typeAheadQuery = '';
+    let typeAheadLastKeyTime = 0;
+    const TYPE_AHEAD_RESET_MS = 700;
+    function handleTypeAheadKey(e) {
+        if (state.searchable)
+            return;
+        if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey)
+            return;
+        if (e.key === ' ' && typeAheadQuery === '')
+            return; // a bare Space is not a query
+        e.preventDefault();
+        e.stopPropagation();
+        // Event timestamps instead of a reset timer: nothing to clean up on destroy
+        if (e.timeStamp - typeAheadLastKeyTime > TYPE_AHEAD_RESET_MS)
+            typeAheadQuery = '';
+        typeAheadLastKeyTime = e.timeStamp;
+        typeAheadQuery += e.key.toLowerCase();
+        let openedByThisKey = false;
+        if (!state.listOpen) {
+            state.listOpen = true;
+            state.activeValue = undefined;
+            openedByThisKey = true;
+        }
+        const { filteredItems, hoverItemIndex, label } = state;
+        if (filteredItems.length === 0)
+            return;
+        // Repeating one character cycles through the options with that initial;
+        // a growing query refines the match starting from the current option
+        const isSameCharRun = typeAheadQuery.length > 1 && typeAheadQuery.split('').every((ch) => ch === typeAheadQuery[0]);
+        const query = isSameCharRun ? typeAheadQuery[0] : typeAheadQuery;
+        const startOffset = isSameCharRun || typeAheadQuery.length === 1 ? 1 : 0;
+        for (let step = 0; step < filteredItems.length; step++) {
+            const i = (hoverItemIndex + startOffset + step) % filteredItems.length;
+            const item = filteredItems[i];
+            if (!isItemSelectableCheck(item))
+                continue;
+            const itemLabel = String(getItemProperty(item, label) ?? '').toLowerCase();
+            if (itemLabel.startsWith(query)) {
+                state.hoverItemIndex = i;
+                state.userNavigatedSinceOpen = true;
+                // Handlers run before effects flush: when this keypress also
+                // opened the list, the open-with-value hover effect would fire
+                // next and snap hover back to the selected value, clobbering
+                // the match we just parked it on. Only an open that found a
+                // match suppresses the snap — Arrow/Space opens keep it.
+                if (openedByThisKey)
+                    state.suppressValueHoverSnap = true;
+                return;
+            }
+        }
+    }
+    // Space has combobox semantics (open, then select the current option) only in
+    // select-only mode. In a searchable/editable combobox it is an ordinary
+    // character for the filter text, so we leave it entirely alone there.
+    function handleSpaceKey(e) {
+        if (state.searchable)
+            return;
+        if (e.ctrlKey || e.metaKey || e.altKey)
+            return;
+        // While a type-ahead query is still live, Space belongs to it so labels
+        // that contain spaces ("New York") stay reachable by typing.
+        const typeAheadLive = typeAheadQuery !== '' && e.timeStamp - typeAheadLastKeyTime <= TYPE_AHEAD_RESET_MS;
+        if (typeAheadLive) {
+            handleTypeAheadKey(e);
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        if (!state.listOpen) {
+            state.listOpen = true;
+            state.activeValue = undefined;
+            return;
+        }
+        // List open: behave like Enter — select the current option, or close if it
+        // is already the (single) selected value.
+        const { filteredItems, hoverItemIndex, value, multiple, itemId } = state;
+        if (filteredItems.length === 0)
+            return;
+        const hoverItem = filteredItems[hoverItemIndex];
+        if (!multiple && areItemsEqual(value, hoverItem, itemId)) {
+            actions.closeList();
+        }
+        else {
+            actions.handleSelect(hoverItem);
         }
     }
     function handleEscapeKey(e) {
+        if (!state.listOpen)
+            return;
         e.preventDefault();
-        context.closeList();
+        e.stopPropagation();
+        actions.closeList();
     }
     function handleEnterKey(e) {
-        e.preventDefault();
-        const { listOpen, filteredItems, hoverItemIndex, value, multiple, itemId } = context.getState();
-        if (!listOpen)
+        const { listOpen, filteredItems, hoverItemIndex, value, multiple, itemId } = state;
+        if (!listOpen) {
+            // Searchable mode leaves Enter alone on a closed list (implicit form
+            // submission must keep working), but the select-only combobox
+            // pattern (APG, searchable={false}) specifies Enter opens the
+            // listbox — a native-<select>-like control must not submit the form
+            // instead of opening.
+            if (state.searchable)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            state.listOpen = true;
+            state.activeValue = undefined;
             return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
         if (filteredItems.length === 0)
             return;
         const hoverItem = filteredItems[hoverItemIndex];
         if (!multiple && areItemsEqual(value, hoverItem, itemId)) {
-            context.closeList();
+            actions.closeList();
         }
         else {
-            context.handleSelect(filteredItems[hoverItemIndex]);
+            actions.handleSelect(filteredItems[hoverItemIndex]);
         }
     }
     function handleArrowDownKey(e) {
         e.preventDefault();
-        const { listOpen } = context.getState();
-        if (listOpen) {
-            context.setHoverIndex(1);
+        e.stopPropagation();
+        // APG: Alt+Down opens the list without moving the visual cursor.
+        if (e.altKey) {
+            if (!state.listOpen) {
+                state.listOpen = true;
+                state.activeValue = undefined;
+            }
+            return;
+        }
+        if (state.listOpen) {
+            actions.setHoverIndex(1);
+            state.userNavigatedSinceOpen = true;
         }
         else {
-            context.setListOpen(true);
-            context.setActiveValue(undefined);
+            state.listOpen = true;
+            state.activeValue = undefined;
         }
     }
     function handleArrowUpKey(e) {
         e.preventDefault();
-        const { listOpen } = context.getState();
-        if (listOpen) {
-            context.setHoverIndex(-1);
+        e.stopPropagation();
+        // APG: Alt+Up closes the list without changing the selection.
+        if (e.altKey) {
+            if (state.listOpen)
+                actions.closeList();
+            return;
+        }
+        if (state.listOpen) {
+            actions.setHoverIndex(-1);
+            state.userNavigatedSinceOpen = true;
         }
         else {
-            context.setListOpen(true);
-            context.setActiveValue(undefined);
+            state.listOpen = true;
+            state.activeValue = undefined;
         }
     }
     function handleTabKey(e) {
-        const { listOpen, focused, filteredItems, hoverItemIndex, value, itemId } = context.getState();
+        const { listOpen, focused, filteredItems, hoverItemIndex, value, itemId } = state;
         if (!listOpen || !focused)
             return;
-        if (filteredItems.length === 0 || areItemsEqual(value, filteredItems[hoverItemIndex], itemId)) {
-            context.closeList();
+        // Tab is never claimed: committing must close the popup and move focus in
+        // the same press (APG), so no preventDefault, and the event keeps bubbling
+        // for focus traps and ancestor handlers. Re-entry via the window listener
+        // is safe because the list is closed by then.
+        //
+        // Committing also requires expressed intent: the cursor auto-parks on an
+        // option the moment the list opens, so a bare open-then-Tab (click the
+        // control, decide against picking, tab away) must close without
+        // selecting. Intent is navigating (keys, or real pointer movement over
+        // the list), type-ahead, or typing — all of which set the flag at their
+        // event sites — and a completed selection consumes it (see
+        // itemSelected): with closeListOnChange={false} the list stays open and
+        // the cursor re-parks on a neighbour, which tabbing away must not
+        // commit. Deliberately NOT the current filterText: a seeded initial
+        // value or text retained across a close (clearFilterTextOnBlur={false})
+        // is not something the user typed this open.
+        if (e.shiftKey || // Tabbing backwards leaves the field; it must never commit
+            !state.userNavigatedSinceOpen ||
+            filteredItems.length === 0 ||
+            areItemsEqual(value, filteredItems[hoverItemIndex], itemId)) {
+            actions.closeList();
             return;
         }
-        e.preventDefault();
-        context.handleSelect(filteredItems[hoverItemIndex]);
-        context.closeList();
+        actions.handleSelect(filteredItems[hoverItemIndex]);
+        actions.closeList();
     }
     function handleBackspaceKey(e) {
-        const { multiple, filterText, value, activeValue } = context.getState();
+        const { multiple, filterText, value, activeValue } = state;
         if (!multiple || filterText.length > 0)
             return;
-        if (multiple && value && value.length > 0) {
+        if (Array.isArray(value) && value.length > 0) {
+            e.stopPropagation();
+            // A cursor left stale by a mouse removal's reindexing points at
+            // nothing: reset it and consume the press, rather than remove a tag
+            // the user never targeted
+            if (activeValue !== undefined && activeValue >= value.length) {
+                state.activeValue = undefined;
+                return;
+            }
             const indexToRemove = activeValue !== undefined ? activeValue : value.length - 1;
-            context.handleMultiItemClear(indexToRemove);
+            actions.handleMultiItemClear(indexToRemove);
             if (activeValue === 0 || activeValue === undefined)
                 return;
             const newActiveValue = value.length > activeValue ? activeValue - 1 : undefined;
-            context.setActiveValue(newActiveValue);
+            state.activeValue = newActiveValue;
         }
     }
     function handleArrowLeftKey(e) {
-        const { value, multiple, filterText, activeValue } = context.getState();
+        const { value, multiple, filterText, activeValue } = state;
         if (!value || !multiple || filterText.length > 0)
             return;
         if (Array.isArray(value)) {
-            if (activeValue === undefined) {
-                context.setActiveValue(value.length - 1);
+            e.stopPropagation();
+            // `>= length` re-enters like undefined: a stale cursor (mouse
+            // removal reindexed the tags) restarts from the last tag
+            if (activeValue === undefined || activeValue >= value.length) {
+                state.activeValue = value.length - 1;
+            }
+            else if (activeValue !== 0) {
+                state.activeValue = activeValue - 1;
             }
-            else if (value.length > activeValue && activeValue !== 0) {
-                context.setActiveValue(activeValue - 1);
+        }
+    }
+    // Home/End only take over list navigation while no filter text is
+    // entered, so text-caret movement in the input keeps working
+    function handleHomeKey(e) {
+        const { listOpen, filteredItems, filterText } = state;
+        if (!listOpen || filterText.length > 0)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const firstSelectable = filteredItems.findIndex((item) => isItemSelectableCheck(item));
+        if (firstSelectable >= 0) {
+            state.hoverItemIndex = firstSelectable;
+            state.userNavigatedSinceOpen = true;
+        }
+    }
+    function handleEndKey(e) {
+        const { listOpen, filteredItems, filterText } = state;
+        if (!listOpen || filterText.length > 0)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        for (let i = filteredItems.length - 1; i >= 0; i--) {
+            if (isItemSelectableCheck(filteredItems[i])) {
+                state.hoverItemIndex = i;
+                state.userNavigatedSinceOpen = true;
+                return;
             }
         }
     }
+    // PageUp/PageDown jump the hover by a page of selectable options, clamped to
+    // the first/last selectable (no wrap, unlike the Arrow keys). They stay active
+    // while filtering: PageUp/PageDown do not move the caret in a single-line
+    // input, so there is nothing to conflict with the way Home/End would.
+    const PAGE_SIZE = 10;
+    function pageHover(direction) {
+        const { listOpen, filteredItems } = state;
+        if (!listOpen)
+            return false;
+        const selectable = [];
+        for (let i = 0; i < filteredItems.length; i++) {
+            if (isItemSelectableCheck(filteredItems[i]))
+                selectable.push(i);
+        }
+        if (selectable.length === 0)
+            return false;
+        // Where the current hover sits among selectable rows; if it is parked on a
+        // non-selectable header, anchor just outside so a full page still moves.
+        let pos = selectable.indexOf(state.hoverItemIndex);
+        if (pos === -1)
+            pos = direction > 0 ? -1 : selectable.length;
+        const targetPos = Math.min(selectable.length - 1, Math.max(0, pos + direction * PAGE_SIZE));
+        state.hoverItemIndex = selectable[targetPos];
+        state.userNavigatedSinceOpen = true;
+        return true;
+    }
+    function handlePageDownKey(e) {
+        if (!pageHover(1))
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    function handlePageUpKey(e) {
+        if (!pageHover(-1))
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+    }
     function handleArrowRightKey(e) {
-        const { value, multiple, filterText, activeValue } = context.getState();
+        const { value, multiple, filterText, activeValue } = state;
         if (!value || !multiple || filterText.length > 0 || activeValue === undefined)
             return;
+        if (!Array.isArray(value))
+            return;
+        e.stopPropagation();
         if (activeValue === value.length - 1) {
-            context.setActiveValue(undefined);
+            state.activeValue = undefined;
         }
         else if (activeValue < value.length - 1) {
-            context.setActiveValue(activeValue + 1);
+            state.activeValue = activeValue + 1;
         }
     }
     return {
         handleKeyDown,
         handleEscapeKey,
         handleEnterKey,
+        handleSpaceKey,
         handleArrowDownKey,
         handleArrowUpKey,
         handleTabKey,
         handleBackspaceKey,
         handleArrowLeftKey,
         handleArrowRightKey,
+        handleHomeKey,
+        handleEndKey,
+        handlePageUpKey,
+        handlePageDownKey,
     };
 }