@limetech/lime-elements 39.44.5 → 39.44.6

package/dist/collection/components/list/list.js

@@ -50,6 +50,25 @@ export class List {
             this.listElement.removeEventListener('mousedown', this.handleItemMouseDown);
             this.listElement.addEventListener('mousedown', this.handleItemMouseDown);
             this.mdcList = new MDCList(element);
+            // NOTE: This has no effect. It is kept as a marker rather than
+            // removed, so that its absence isn't mistaken for an oversight.
+            //
+            // MDC indexes each row for typeahead by looking for
+            // `.mdc-deprecated-list-item__primary-text` inside it, while
+            // `limel-list-item` renders its label as `<span class="label">`. MDC
+            // therefore builds an empty index, and typing does nothing.
+            //
+            // Do not "fix" this by adding MDC's class name to `limel-list-item`.
+            // That revives MDC's typeahead along with three behaviors that cannot
+            // be configured from the outside: a hard coded 300ms buffer, `Enter`
+            // being ignored for as long as that buffer lives (its `notifyAction`
+            // is guarded by `isTypeaheadInProgress`), and the space bar being
+            // excluded from matches. It would also collide with `limel-menu`,
+            // where single characters are used as item hotkeys.
+            //
+            // `limel-select` implements its own typeahead instead, see
+            // `src/util/typeahead.ts`. It intercepts typed characters in the
+            // capture phase on this very element, so they never reach MDC.
             this.mdcList.hasTypeahead = true;
         };
         /**

package/dist/collection/components/select/select.js

@@ -2,11 +2,23 @@ import { MDCFloatingLabel } from "@material/floating-label";
 import { MDCSelectHelperText } from "@material/select/helper-text";
 import { h, } from "@stencil/core";
 import { isMobileDevice } from "../../util/device";
-import { ENTER, SPACE } from "../../util/keycodes";
+import { ENTER, SPACEBAR } from "../../util/keycodes";
 import { isMultiple } from "../../util/multiple";
 import { createRandomString } from "../../util/random-string";
-import { SelectTemplate, triggerIconColorWarning } from "./select.template";
+import { findTypeaheadMatch, isTypeaheadKey, NO_TYPEAHEAD_MATCH, TypeaheadBuffer, } from "../../util/typeahead";
+import { createMenuItems, SelectTemplate, triggerIconColorWarning, } from "./select.template";
 /**
+ * ## Keyboard
+ *
+ * Typing characters jumps to the option whose text starts with them, the way
+ * a native `<select>` does. Characters accumulate for a short while, so typing
+ * `n`, `e` finds "Netherlands" rather than the next option starting with `n`.
+ * Pressing the same character repeatedly cycles through all options starting
+ * with it. This works both while the dropdown is open, and while the closed
+ * component has focus — in which case the dropdown opens with the match
+ * highlighted. Typing only moves the highlight; the value is not changed until
+ * the option is picked with `Enter` or a click.
+ *
  * @exampleComponent limel-example-select-basic
  * @exampleComponent limel-example-select-with-icons
  * @exampleComponent limel-example-select-with-separators
@@ -26,6 +38,15 @@ export class Select {
     updateHasPrimaryComponent() {
         this.hasPrimaryComponentMemo = this.computeHasPrimaryComponent();
     }
+    /**
+     * `options` and `required` are the inputs that decide which rows the
+     * dropdown renders, and therefore which row an index refers to. When
+     * either changes, a buffered typeahead match no longer points at what the
+     * user was aiming for.
+     */
+    resetTypeaheadOnItemsChange() {
+        this.resetTypeahead();
+    }
     constructor() {
         /**
          * Set to `true` to make the field disabled.
@@ -57,10 +78,51 @@ export class Select {
         this.hasChanged = false;
         this.hasPrimaryComponentMemo = false;
         this.checkValid = false;
+        this.typeaheadBuffer = new TypeaheadBuffer();
+        this.handleMenuTriggerKeyDown = (event) => {
+            // Typeahead runs first, so that a space extends an ongoing typeahead
+            // instead of just opening the dropdown. A *bare* space is declined by
+            // `handleTypeaheadKey`, and keeps its usual meaning below.
+            if (this.handleTypeaheadKey(event, NO_TYPEAHEAD_MATCH)) {
+                return;
+            }
+            const isEnter = event.key === ENTER;
+            const isSpace = event.key === SPACEBAR;
+            if (!this.menuOpen && (isSpace || isEnter)) {
+                event.stopPropagation();
+                event.preventDefault();
+                // `preventDefault` cancels the activation click that the trigger
+                // `button` would otherwise synthesize, so the menu has to be
+                // opened here rather than through the click handler.
+                this.openMenu();
+            }
+        };
+        this.setListElement = (element) => {
+            var _a, _b;
+            if (this.list === element) {
+                return;
+            }
+            (_a = this.list) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleListKeyDownCapture, true);
+            this.list = element;
+            (_b = this.list) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.handleListKeyDownCapture, true);
+        };
+        /**
+         * Key handler for the dropdown, in the capture phase.
+         *
+         * `MDCList` listens for `keydown` on the `ul` inside `limel-list`'s shadow
+         * root, so capturing on the `limel-list` element itself is the only place
+         * a typed character can be stopped before MDC sees it. It has to be
+         * stopped: MDC would add it to its own typeahead buffer, which suppresses
+         * selection with `Enter` for as long as that buffer lives, and it treats
+         * the space bar as a selection.
+         *
+         * @param event - the key that was pressed
+         */
+        this.handleListKeyDownCapture = (event) => {
+            this.handleTypeaheadKey(event, this.getFocusedMenuItemIndex());
+        };
         this.handleMenuChange = this.handleMenuChange.bind(this);
         this.handleNativeChange = this.handleNativeChange.bind(this);
-        this.handleMenuTriggerKeyPress =
-            this.handleMenuTriggerKeyPress.bind(this);
         this.openMenu = this.openMenu.bind(this);
         this.closeMenu = this.closeMenu.bind(this);
         this.portalId = createRandomString();
@@ -96,6 +158,7 @@ export class Select {
     }
     disconnectedCallback() {
         this.cancelPendingFocus();
+        this.resetTypeahead();
         if (this.mdcFloatingLabel) {
             this.mdcFloatingLabel.destroy();
         }
@@ -110,7 +173,7 @@ export class Select {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (h(SelectTemplate, { key: '8f65bfbadfa797644b4d458452e2eceac2dbcda8', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerPress: this.handleMenuTriggerKeyPress, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
+        return (h(SelectTemplate, { key: '97e6b0b033a487e26ab7e4abe7165837ebe08911', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerKeyDown: this.handleMenuTriggerKeyDown, listRef: this.setListElement, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
     }
     watchOpen(newValue, oldValue) {
         if (this.checkValid) {
@@ -145,6 +208,21 @@ export class Select {
                 if (!this.menuOpen) {
                     return;
                 }
+                // Consumed on read, so that a later, unrelated re-render
+                // cannot resurrect a stale index and yank focus.
+                const typeaheadIndex = this.pendingTypeaheadIndex;
+                this.pendingTypeaheadIndex = undefined;
+                if (typeaheadIndex !== undefined &&
+                    this.focusMenuItemAtIndex(list, typeaheadIndex)) {
+                    return;
+                }
+                // Picking an option while `multiple` re-renders the dropdown
+                // without closing it, which brings us back here with a row
+                // already focused. Moving to the first option then would lose
+                // the user's place in the list after every pick.
+                if (this.getFocusedMenuItemIndex() !== NO_TYPEAHEAD_MATCH) {
+                    return;
+                }
                 this.focusFirstMenuItem(list);
             });
             this.focusObserver.observe(list);
@@ -167,6 +245,30 @@ export class Select {
             firstItem.focus({ preventScroll: true });
         }
     }
+    /**
+     * Focus the row at a given index in the dropdown.
+     *
+     * The rows only become focusable once `limel-list` has set up `MDCList`,
+     * which is what gives them a `tabindex`. Callers use the return value to
+     * fall back to `pendingTypeaheadIndex` when that has not happened yet.
+     *
+     * @param list - the `limel-list` of the dropdown
+     * @param index - the index of the row, as rendered in its `data-index`
+     * @returns whether the row could be focused
+     */
+    focusMenuItemAtIndex(list, index) {
+        var _a;
+        const item = (_a = list === null || list === void 0 ? void 0 : list.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-index="${index}"]`);
+        if (!item) {
+            return false;
+        }
+        // Scrolled explicitly, and only within the dropdown: letting `focus()`
+        // scroll would scroll the page, since the dropdown is rendered into a
+        // portal that is absolutely positioned on the `body`.
+        item.focus({ preventScroll: true });
+        item.scrollIntoView({ block: 'nearest' });
+        return list.shadowRoot.activeElement === item;
+    }
     setTriggerFocus() {
         const trigger = this.host.shadowRoot.querySelector('.limel-select-trigger');
         trigger.focus();
@@ -218,6 +320,7 @@ export class Select {
         this.change.emit(option);
         this.menuOpen = false;
         this.cancelPendingFocus();
+        this.resetTypeahead();
         this.setTriggerFocus();
     }
     openMenu() {
@@ -251,17 +354,111 @@ export class Select {
     closeMenu() {
         this.menuOpen = false;
         this.cancelPendingFocus();
+        this.resetTypeahead();
         this.setTriggerFocus();
     }
-    handleMenuTriggerKeyPress(event) {
-        const isEnter = event.key === ENTER;
-        const isSpace = event.key === SPACE;
-        if (!this.menuOpen && (isSpace || isEnter)) {
-            event.stopPropagation();
-            event.preventDefault();
-            this.menuOpen = true;
+    /**
+     * Move the highlight to the option matching the characters typed so far,
+     * the way a native `<select>` does. Never changes the value — the option
+     * still has to be picked with `Enter` or a click.
+     *
+     * @param event - the key that was pressed
+     * @param focusedIndex - the row that currently has focus, if any
+     * @returns whether the key was handled as typeahead
+     */
+    handleTypeaheadKey(event, focusedIndex) {
+        // The native dropdown on mobile devices does its own typeahead. Note
+        // that `setMenuFocus` bails out on mobile too, so a pending index
+        // would never be consumed there.
+        if (this.isMobileDevice || !isTypeaheadKey(event)) {
+            return false;
+        }
+        // A space only continues an ongoing typeahead. On its own it keeps its
+        // usual meaning of opening the dropdown, or selecting the focused
+        // option.
+        if (event.key === SPACEBAR && this.typeaheadBuffer.isEmpty) {
+            return false;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        // Derived per key press rather than cached, so that the indices always
+        // refer to the rows the dropdown renders right now.
+        const items = createMenuItems(this.options, this.value, this.required);
+        const candidates = items.map((item) => ('separator' in item ? null : item));
+        const buffer = this.typeaheadBuffer.append(event.key);
+        const currentIndex = this.resolveTypeaheadIndex(items, focusedIndex);
+        const index = findTypeaheadMatch(candidates, buffer, currentIndex);
+        if (index !== NO_TYPEAHEAD_MATCH) {
+            this.focusTypeaheadMatch(index);
+        }
+        return true;
+    }
+    /**
+     * @param items - the items of the dropdown
+     * @param focusedIndex - the row that currently has focus, if any
+     * @returns the index a typeahead search should start from
+     */
+    resolveTypeaheadIndex(items, focusedIndex) {
+        if (focusedIndex !== NO_TYPEAHEAD_MATCH) {
+            return focusedIndex;
+        }
+        // Typed again before focus had time to land in the dropdown.
+        if (this.pendingTypeaheadIndex !== undefined) {
+            return this.pendingTypeaheadIndex;
+        }
+        // Falls back to the selected option, so that typing continues from
+        // wherever the highlight already is. `findIndex` returning `-1` for a
+        // select without a value is exactly the "no current row" that
+        // `findTypeaheadMatch` expects.
+        return items.findIndex((item) => !('separator' in item) && item.selected);
+    }
+    focusTypeaheadMatch(index) {
+        // Overwrites any index still pending from an earlier character, even
+        // when this one can be focused right away. Opening the dropdown queues
+        // a `setMenuFocus` that waits for it to become visible, and someone
+        // typing quickly gets the next character in before that resolves;
+        // leaving the earlier index in place would let the queued focus apply
+        // it on top of this newer match.
+        this.pendingTypeaheadIndex = index;
+        if (this.menuOpen && this.focusMenuItemAtIndex(this.list, index)) {
+            // Focus landed synchronously, so this index has already done its
+            // job. Clearing it — rather than leaving it for `setMenuFocus` to
+            // consume later — stops it from being replayed by some unrelated
+            // future re-render, such as picking an option in a `multiple`
+            // select, after the user has since moved focus elsewhere with the
+            // arrow keys. A `setMenuFocus` still queued from opening the
+            // dropdown a moment ago is unaffected: it finds this row already
+            // focused and leaves it alone, below.
+            this.pendingTypeaheadIndex = undefined;
+            return;
+        }
+        if (this.menuOpen) {
+            // Already open, so no re-render is coming that would trigger
+            // `componentDidUpdate`. Schedule the focus explicitly.
+            this.setMenuFocus();
+        }
+        else {
+            this.openMenu();
         }
     }
+    /**
+     * @returns the index of the focused row of the dropdown, or
+     * `NO_TYPEAHEAD_MATCH` when no row has focus
+     */
+    getFocusedMenuItemIndex() {
+        var _a, _b, _c;
+        // Deliberately not `event.target`: a listener on the `limel-list`
+        // element sees events from inside its shadow root retargeted to the
+        // element itself, never to the row that was actually focused.
+        const focused = (_b = (_a = this.list) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement;
+        const row = focused === null || focused === void 0 ? void 0 : focused.closest('[data-index]');
+        const index = Number.parseInt((_c = row === null || row === void 0 ? void 0 : row.dataset.index) !== null && _c !== void 0 ? _c : '', 10);
+        return Number.isNaN(index) ? NO_TYPEAHEAD_MATCH : index;
+    }
+    resetTypeahead() {
+        this.typeaheadBuffer.clear();
+        this.pendingTypeaheadIndex = undefined;
+    }
     handleNativeChange(event) {
         event.stopPropagation();
         const element = this.host.shadowRoot.querySelector('select.limel-select__native-control');
@@ -543,6 +740,12 @@ export class Select {
             }, {
                 "propName": "options",
                 "methodName": "updateHasPrimaryComponent"
+            }, {
+                "propName": "options",
+                "methodName": "resetTypeaheadOnItemsChange"
+            }, {
+                "propName": "required",
+                "methodName": "resetTypeaheadOnItemsChange"
             }, {
                 "propName": "menuOpen",
                 "methodName": "watchOpen"

package/dist/collection/components/select/select.template.js

@@ -52,7 +52,7 @@ const SelectValue = (props) => {
         'limel-select-trigger': true,
         'limel-select--focused': props.isOpen,
     };
-    return (h("button", { slot: "content", class: anchorClassList, onClick: props.open, onKeyPress: props.onTriggerPress, "aria-haspopup": "listbox", "aria-expanded": props.isOpen, "aria-controls": props.id, "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, disabled: props.disabled || props.readonly }, h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), getSelectedPrimaryComponent(props.value), h("span", { id: "s-selected-text", class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
+    return (h("button", { slot: "content", class: anchorClassList, onClick: props.open, onKeyDown: props.onTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": props.isOpen, "aria-controls": props.id, "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, disabled: props.disabled || props.readonly }, h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), getSelectedPrimaryComponent(props.value), h("span", { id: "s-selected-text", class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
 };
 const ShowIcon = (props) => {
     if (props.isValid) {
@@ -80,7 +80,7 @@ const MenuDropdown = (props) => {
             display: 'flex',
             'min-width': '100%',
             width: 'fit-content',
-        } }, h("limel-list", { items: items, type: props.multiple ? 'checkbox' : 'selectable', onChange: props.onMenuChange }))));
+        } }, h("limel-list", { ref: props.listRef, items: items, type: props.multiple ? 'checkbox' : 'selectable', onChange: props.onMenuChange }))));
 };
 const NativeDropdown = (props) => {
     const options = props.options
@@ -103,7 +103,21 @@ function isSelected(option, value) {
     }
     return option.value === value.value;
 }
-function createMenuItems(options, value, selectIsRequired = false) {
+/**
+ * Create the items for the dropdown.
+ *
+ * The returned array is index-aligned with the `data-index` attribute that
+ * `limel-list` renders on each row. Separators are included, and occupy an
+ * index. Anything that needs to address a row by index — such as the
+ * typeahead in `select.tsx` — must derive its indices from this same array.
+ *
+ * @param options - the options of the select
+ * @param value - the currently selected option or options
+ * @param selectIsRequired - whether the select requires a value, in which
+ * case the "empty" option is left out
+ * @returns the items to render in the dropdown
+ */
+export function createMenuItems(options, value, selectIsRequired = false) {
     const menuOptionFilter = getMenuOptionFilter(selectIsRequired);
     return options.filter(menuOptionFilter).map((option) => {
         if ('separator' in option) {

package/dist/collection/util/keycodes.js

@@ -3,7 +3,10 @@
 export const TAB = 'Tab';
 export const ENTER = 'Enter';
 export const ESCAPE = 'Escape';
+/** `KeyboardEvent.code` for the space bar. NOT a `KeyboardEvent.key`. */
 export const SPACE = 'Space';
+/** `KeyboardEvent.key` for the space bar. */
+export const SPACEBAR = ' ';
 export const BACKSPACE = 'Backspace';
 export const DELETE = 'Delete';
 export const ARROW_UP = 'ArrowUp';

package/dist/collection/util/typeahead.js

@@ -0,0 +1,159 @@
+/**
+ * These helpers implement "type to jump", the behavior a native `<select>` has:
+ * typing characters moves to the option whose text starts with those
+ * characters. Characters accumulate into a short-lived buffer, so typing
+ * `n`, `e` finds "Netherlands" instead of re-matching on `n` every time.
+ *
+ * The matching itself is pure and stateless — all the state lives in a
+ * `TypeaheadBuffer`, which owns the timer that discards the buffer once the
+ * user stops typing.
+ */
+/**
+ * How long a buffer of typed characters is kept before it is discarded, in
+ * milliseconds. Roughly matches a native `<select>`.
+ */
+export const TYPEAHEAD_BUFFER_TIMEOUT = 1000;
+/**
+ * Returned by `findTypeaheadMatch` when nothing matched.
+ */
+export const NO_TYPEAHEAD_MATCH = -1;
+/**
+ * Whether a keyboard event should be treated as a typed character.
+ *
+ * The space bar counts as a character here. Whether a *bare* space should
+ * start a buffer, or keep whatever meaning it has in the consuming component,
+ * is the consumer's decision.
+ *
+ * `shiftKey` is allowed, since capital letters are typed with it, and
+ * `event.repeat` is allowed, since holding a key down cycles through matches
+ * in a native `<select>` too.
+ *
+ * @param event - the keyboard event to inspect
+ * @returns `true` when the event represents a typed character
+ */
+export function isTypeaheadKey(event) {
+    return (event.key.length === 1 &&
+        !event.altKey &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !event.isComposing);
+}
+/**
+ * Find the candidate to move to for a given buffer of typed characters.
+ *
+ * Two different searches are used, mirroring a native `<select>`:
+ * - When the buffer is a single character, possibly repeated (`b`, `bb`,
+ *   `bbb`), only that character is matched and the search starts *after*
+ *   `currentIndex`. Pressing the same key repeatedly therefore cycles through
+ *   all candidates starting with it.
+ * - Otherwise the whole buffer is matched and the search starts *at*
+ *   `currentIndex`, so continuing to type on an already-matching candidate
+ *   keeps it rather than jumping to the next one.
+ *
+ * Both searches wrap around the end of the list.
+ *
+ * @param candidates - the candidates to search, index-aligned with the rows
+ * they are rendered as. Use `null` for rows that can never match, such as
+ * separators, so that they still occupy their index.
+ * @param buffer - the characters typed so far
+ * @param currentIndex - the index to search from. Anything outside
+ * `candidates` is treated as "no current candidate", and the search starts
+ * from the beginning.
+ * @returns the index of the matching candidate, or `NO_TYPEAHEAD_MATCH`
+ */
+export function findTypeaheadMatch(candidates, buffer, currentIndex) {
+    const count = candidates.length;
+    const query = buffer.toLowerCase();
+    if (!query || count === 0) {
+        return NO_TYPEAHEAD_MATCH;
+    }
+    const characters = [...query];
+    const cycles = isSingleDistinctCharacter(characters);
+    const needle = cycles ? characters[0] : query;
+    // Cycling starts one past the current candidate, so that pressing the same
+    // key again advances. Matching several characters starts at it, so that
+    // continuing to type keeps a candidate that already matches.
+    const offset = cycles ? 1 : 0;
+    const hasCurrent = currentIndex >= 0 && currentIndex < count;
+    const start = hasCurrent ? (currentIndex + offset) % count : 0;
+    for (let step = 0; step < count; step += 1) {
+        const index = (start + step) % count;
+        if (candidateMatches(candidates[index], needle)) {
+            return index;
+        }
+    }
+    return NO_TYPEAHEAD_MATCH;
+}
+/**
+ * Whether a string consists of a single character, possibly repeated. Also
+ * `true` for one character on its own, which is what makes a single key press
+ * advance past the current candidate rather than re-matching it.
+ *
+ * Takes the characters already split apart, so that the caller and this
+ * function agree on what "a character" is for anything outside the basic
+ * multilingual plane.
+ *
+ * @param characters - the characters of the string
+ * @returns `true` when every character is the same
+ */
+function isSingleDistinctCharacter(characters) {
+    return characters.every((character) => character === characters[0]);
+}
+/**
+ * @param candidate - the candidate to test, or `null` for a row that can
+ * never match
+ * @param needle - the lower cased characters to match
+ * @returns `true` when the candidate starts with the given characters
+ */
+function candidateMatches(candidate, needle) {
+    var _a;
+    if (!candidate || candidate.disabled) {
+        return false;
+    }
+    const text = (_a = candidate.text) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase();
+    return !!text && text.startsWith(needle);
+}
+/**
+ * Accumulates typed characters, and discards them again once the user stops
+ * typing for `TYPEAHEAD_BUFFER_TIMEOUT`.
+ */
+export class TypeaheadBuffer {
+    constructor(timeout = TYPEAHEAD_BUFFER_TIMEOUT) {
+        this.buffer = '';
+        this.timeout = timeout;
+    }
+    /**
+     * The characters typed so far.
+     */
+    get value() {
+        return this.buffer;
+    }
+    /**
+     * Whether nothing has been typed, or the buffer has been discarded.
+     */
+    get isEmpty() {
+        return this.buffer === '';
+    }
+    /**
+     * Append a character, and restart the timer that discards the buffer.
+     *
+     * @param character - the character to append
+     * @returns the buffer, including the appended character
+     */
+    append(character) {
+        this.buffer += character;
+        clearTimeout(this.resetTimeoutId);
+        this.resetTimeoutId = setTimeout(() => {
+            this.clear();
+        }, this.timeout);
+        return this.buffer;
+    }
+    /**
+     * Discard the buffer, and cancel the timer that would have discarded it.
+     */
+    clear() {
+        this.buffer = '';
+        clearTimeout(this.resetTimeoutId);
+        this.resetTimeoutId = undefined;
+    }
+}

package/dist/esm/{keycodes-rI0IeKpx.js → keycodes-C4_9qUMP.js}

@@ -3,7 +3,10 @@
 const TAB = 'Tab';
 const ENTER = 'Enter';
 const ESCAPE = 'Escape';
+/** `KeyboardEvent.code` for the space bar. NOT a `KeyboardEvent.key`. */
 const SPACE = 'Space';
+/** `KeyboardEvent.key` for the space bar. */
+const SPACEBAR = ' ';
 const BACKSPACE = 'Backspace';
 const DELETE = 'Delete';
 const ARROW_UP = 'ArrowUp';
@@ -11,4 +14,4 @@ const ARROW_DOWN = 'ArrowDown';
 const ARROW_LEFT = 'ArrowLeft';
 const ARROW_RIGHT = 'ArrowRight';
 
-export { ARROW_UP as A, BACKSPACE as B, DELETE as D, ESCAPE as E, SPACE as S, TAB as T, ENTER as a, ARROW_DOWN as b, ARROW_LEFT as c, ARROW_RIGHT as d };
+export { ARROW_UP as A, BACKSPACE as B, DELETE as D, ESCAPE as E, SPACEBAR as S, TAB as T, ENTER as a, ARROW_DOWN as b, ARROW_LEFT as c, ARROW_RIGHT as d, SPACE as e };