@limetech/lime-elements 40.18.1 → 40.18.3

package/dist/cjs/typeahead-CnyIjog_.js

@@ -0,0 +1,194 @@
+'use strict';
+
+var keycodes = require('./keycodes-BQ_AERli.js');
+
+/**
+ * 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.
+ *
+ * `isTextEditingKey` is for the other side of a list: a field with a list
+ * under it uses it to tell which keys belong to the field.
+ */
+/**
+ * How long a buffer of typed characters is kept before it is discarded, in
+ * milliseconds. Roughly matches a native `<select>`.
+ */
+const TYPEAHEAD_BUFFER_TIMEOUT = 1000;
+/**
+ * Returned by `findTypeaheadMatch` when nothing matched.
+ */
+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
+ */
+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`
+ */
+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`.
+ */
+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;
+    }
+}
+/**
+ * Whether a keyboard event edits text: a typed character, or Backspace or
+ * Delete. A bare space is left out, since on an option of a list it selects
+ * the option.
+ *
+ * A character typed with Option, or with AltGr, which is reported as Ctrl and
+ * Alt together, counts, since many layouts type `@` and `$` that way. A
+ * shortcut with Ctrl or Meta does not.
+ *
+ * @param event - the keyboard event to inspect
+ * @returns `true` when the event edits text
+ */
+function isTextEditingKey(event) {
+    if (event.key === keycodes.BACKSPACE || event.key === keycodes.DELETE) {
+        return true;
+    }
+    const isCharacter = event.key.length === 1 &&
+        event.key !== keycodes.SPACEBAR &&
+        !event.metaKey &&
+        !event.isComposing;
+    return isCharacter && (!event.ctrlKey || event.altKey);
+}
+
+exports.NO_TYPEAHEAD_MATCH = NO_TYPEAHEAD_MATCH;
+exports.TypeaheadBuffer = TypeaheadBuffer;
+exports.findTypeaheadMatch = findTypeaheadMatch;
+exports.isTextEditingKey = isTextEditingKey;
+exports.isTypeaheadKey = isTypeaheadKey;

package/dist/collection/components/callout/callout.css

@@ -16,6 +16,7 @@
   display: flex;
   border-radius: 0.5rem;
   overflow: hidden;
+  border: 0.0625rem solid color-mix(in srgb, var(--limel-callout-tint-color), transparent 70%);
   --limel-callout-tint-color: var(
       --callout-color,
       rgb(var(--color-contrast-100))

package/dist/collection/components/input-field/input-field.js

@@ -4,9 +4,11 @@ import { debounce } from "lodash-es";
 import { ARROW_DOWN, ARROW_UP, ENTER, ESCAPE, SPACE, TAB, } from "../../util/keycodes";
 import { getHref, getTarget, getRel } from "../../util/link-helper";
 import { createRandomString } from "../../util/random-string";
+import { isTextEditingKey } from "../../util/typeahead";
 import { globalConfig } from "../../global/config";
 const CHANGE_EVENT_DEBOUNCE_TIMEOUT = 300;
 const RESIZE_HANDLER_DEBOUNCE_TIMEOUT = 100;
+const MAX_FRAMES_TO_WAIT_FOR_LIST = 20;
 /**
  * @exampleComponent limel-example-input-field-text
  * @exampleComponent limel-example-input-field-placeholder
@@ -367,41 +369,64 @@ export class InputField {
             }
             return (h("span", { class: "lime-formatted-input lime-looks-like-input-value", "aria-hidden": this.readonly ? 'true' : undefined }, renderValue));
         };
-        /**
-         * Key handler for the input field
-         * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard
-         *
-         * @param event - event
-         */
         this.onKeyDown = (event) => {
-            this.showCompletions = true;
-            const isForwardTab = event.key === TAB &&
+            if (event.key === ESCAPE) {
+                this.closeListWithEscape(event);
+                return;
+            }
+            const isTab = event.key === TAB &&
                 !event.altKey &&
                 !event.metaKey &&
-                !event.shiftKey;
-            const isUp = event.key === ARROW_UP;
-            const isDown = event.key === ARROW_DOWN;
-            if (event.key === TAB && event.shiftKey) {
+                !event.ctrlKey;
+            if (isTab) {
                 this.showCompletions = false;
-            }
-            if (!isForwardTab && !isUp && !isDown) {
                 return;
             }
-            const list = document.querySelector(` #${this.portalId} limel-list`);
-            if (!list) {
+            const wasOpen = this.isSuggestionListOpen();
+            this.showCompletions = true;
+            if (event.key === ARROW_DOWN || event.key === ARROW_UP) {
+                this.moveIntoList(event, wasOpen);
+            }
+        };
+        this.moveIntoList = (event, wasOpen) => {
+            var _a;
+            if (!this.isSuggestionListOpen()) {
                 return;
             }
             event.preventDefault();
-            if (isForwardTab || isDown) {
-                const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item:first-child');
-                listElement.focus();
+            const position = event.key === ARROW_DOWN ? 'first' : 'last';
+            if (wasOpen) {
+                (_a = this.getListOption(position)) === null || _a === void 0 ? void 0 : _a.focus();
                 return;
             }
-            if (!isUp) {
+            this.focusOptionWhenShown(position);
+        };
+        this.getListOption = (position) => {
+            const list = document.querySelector(` #${this.portalId} limel-list`);
+            return list === null || list === void 0 ? void 0 : list.shadowRoot.querySelector(`.mdc-deprecated-list-item:${position}-child`);
+        };
+        this.focusOptionWhenShown = (position) => {
+            let frames = 0;
+            const focusOption = () => {
+                const option = this.getListOption(position);
+                if ((option === null || option === void 0 ? void 0 : option.getClientRects().length) > 0) {
+                    option.focus();
+                    return;
+                }
+                frames += 1;
+                if (frames < MAX_FRAMES_TO_WAIT_FOR_LIST) {
+                    requestAnimationFrame(focusOption);
+                }
+            };
+            requestAnimationFrame(focusOption);
+        };
+        this.closeListWithEscape = (event) => {
+            if (!this.isSuggestionListOpen()) {
                 return;
             }
-            const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item:last-child');
-            listElement.focus();
+            event.preventDefault();
+            event.stopPropagation();
+            this.showCompletions = false;
         };
         this.handleCompletionChange = (event) => {
             event.stopPropagation();
@@ -418,10 +443,18 @@ export class InputField {
             this.changeEmitter(event.detail.text);
             this.changeEmitter.flush();
         };
+        this.hasSuggestions = () => {
+            return (!this.readonly &&
+                this.type !== 'textarea' &&
+                this.completions.length > 0);
+        };
+        this.isSuggestionListOpen = () => {
+            return (this.hasSuggestions() &&
+                this.showCompletions &&
+                this.filterCompletions(this.getCurrentValue()).length > 0);
+        };
         this.renderAutocompleteList = () => {
-            if (this.readonly ||
-                this.type === 'textarea' ||
-                this.completions.length === 0) {
+            if (!this.hasSuggestions()) {
                 return;
             }
             const dropdownZIndex = getComputedStyle(this.limelInputField).getPropertyValue('--dropdown-z-index');
@@ -439,8 +472,14 @@ export class InputField {
             return (h("limel-list", { onChange: this.handleCompletionChange, onKeyDown: this.handleKeyDownInDropdown, type: "selectable", items: filteredCompletions }));
         };
         this.handleKeyDownInDropdown = (event) => {
-            const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);
-            if (keyFound) {
+            if (event.key === ESCAPE) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.setFocus();
+                this.showCompletions = false;
+                return;
+            }
+            if ([TAB, ENTER].includes(event.key) || isTextEditingKey(event)) {
                 this.setFocus();
             }
         };
@@ -598,10 +637,10 @@ export class InputField {
         if (this.isInvalid()) {
             properties['aria-invalid'] = 'true';
         }
-        if (this.renderAutocompleteList()) {
+        if (this.hasSuggestions()) {
             properties['aria-controls'] = this.portalId;
         }
-        return (h(Host, { key: '3abb0e074f55f8e47f46cf77ed885797047e44b9' }, h("limel-notched-outline", { key: '0d25df2774e7cda39da90163b0832a1ea117d7c8', labelId: this.inputId, labelElementId: this.labelElementId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: 'a60a2bfcdafe232b32a0d67f972c3885fc5b6428', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
+        return (h(Host, { key: 'e09ee9e3102d6a15d0806602c65361001cd20c63' }, h("limel-notched-outline", { key: 'c2301d9fd1af41e8b4396dc5f2978e51b260fe2f', labelId: this.inputId, labelElementId: this.labelElementId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: '69e02e5df31a6ce10743c3c8a9e78c5765794a18', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
     }
     valueWatcher(newValue) {
         if (!this.mdcTextField || this.changeWaiting) {

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

@@ -50,26 +50,16 @@ 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's typeahead (`hasTypeahead`) is left off, so that typed
+            // characters are not taken from a field with a list under it. The list
+            // test in `list.e2e.tsx` fails if it is turned on. `limel-select` has
+            // its own typeahead, see `src/util/typeahead.ts`.
             //
-            // 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;
+            // Adding MDC's class name to `limel-list-item` does nothing while it is
+            // off. Turning it on as well would bring its 300ms buffer, `Enter`
+            // being ignored while the buffer lives and the space bar being left out
+            // of matches, none of which can be configured, and it would collide
+            // with the single characters that `limel-menu` uses as hotkeys.
         };
         /**
          * Focus the pressed list item directly, without scrolling.

package/dist/collection/components/picker/picker.js

@@ -3,6 +3,7 @@ import { h, } from "@stencil/core";
 import { isDescendant } from "../../util/dom";
 import { ARROW_DOWN, ARROW_UP, ENTER, ESCAPE, TAB } from "../../util/keycodes";
 import { createRandomString } from "../../util/random-string";
+import { isTextEditingKey } from "../../util/typeahead";
 import { getIconFillColor, getIconName } from "../icon/get-icon-props";
 import { debounce } from "lodash-es";
 const SEARCH_DEBOUNCE = 300;
@@ -199,7 +200,7 @@ export class Picker {
             props.maxItems = 1;
         }
         return [
-            h("limel-chip-set", Object.assign({ key: 'eed0789b538bd50638936e1c6ad7e9deaef954ec', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
+            h("limel-chip-set", Object.assign({ key: 'c3f4fd001d63a287a8a9f447f7c9df65279fbc34', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
             this.renderDropdown(),
         ];
     }
@@ -247,7 +248,7 @@ export class Picker {
                     'is-on-top': this.actionPosition === 'top',
                     'is-at-bottom': this.actionPosition === 'bottom',
                     'has-position-sticky': this.actionScrollBehavior === 'sticky',
-                }, badgeIcons: true, type: 'selectable', onChange: this.handleActionListChange, items: this.actions.map(this.removeUnusedPropertiesOnAction) }),
+                }, badgeIcons: true, type: 'selectable', onChange: this.handleActionListChange, onKeyDown: this.onListKeyDown, items: this.actions.map(this.removeUnusedPropertiesOnAction) }),
         ];
     }
     removeUnusedPropertiesOnAction(action) {
@@ -311,7 +312,7 @@ export class Picker {
         return h("p", { style: style }, text);
     }
     renderListResult() {
-        return (h("limel-list", { badgeIcons: this.badgeIcons, onChange: this.handleListChange, onKeyDown: this.onListKeyDown, type: "selectable", items: this.items }));
+        return (h("limel-list", { "data-suggestions": "", badgeIcons: this.badgeIcons, onChange: this.handleListChange, onKeyDown: this.onListKeyDown, type: "selectable", items: this.items }));
     }
     onListKeyDown(event) {
         if (event.key === ESCAPE) {
@@ -323,7 +324,7 @@ export class Picker {
             this.chipSet.setFocus();
             return;
         }
-        if ([TAB, ENTER].includes(event.key)) {
+        if ([TAB, ENTER].includes(event.key) || isTextEditingKey(event)) {
             this.chipSet.setFocus();
         }
     }
@@ -452,10 +453,7 @@ export class Picker {
      * @param event - event
      */
     handleInputKeyDown(event) {
-        const isForwardTab = event.key === TAB &&
-            !event.altKey &&
-            !event.metaKey &&
-            !event.shiftKey;
+        var _a;
         const isUp = event.key === ARROW_UP;
         const isDown = event.key === ARROW_DOWN;
         const isEscape = event.key === ESCAPE;
@@ -465,14 +463,14 @@ export class Picker {
             this.handleEscape();
             return;
         }
-        if (!isForwardTab && !isUp && !isDown) {
+        if (!isUp && !isDown) {
             return;
         }
-        const list = document.querySelector(` #${this.portalId} limel-list`);
+        const list = (_a = document.querySelector(` #${this.portalId} limel-list[data-suggestions]`)) !== null && _a !== void 0 ? _a : document.querySelector(` #${this.portalId} limel-list`);
         if (!list) {
             return;
         }
-        if (isForwardTab || isDown) {
+        if (isDown) {
             // Match by class only (not `:first-child`) so a leading
             // `ListSeparator` doesn't shadow the first focusable item.
             const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item');
@@ -483,9 +481,6 @@ export class Picker {
             listElement.focus();
             return;
         }
-        if (!isUp) {
-            return;
-        }
         const listItems = list.shadowRoot.querySelectorAll('.mdc-deprecated-list-item');
         const listElement = [...listItems].at(-1);
         if (!listElement) {

package/dist/collection/util/typeahead.js

@@ -1,3 +1,4 @@
+import { BACKSPACE, DELETE, SPACEBAR } from "./keycodes";
 /**
  * These helpers implement "type to jump", the behavior a native `<select>` has:
  * typing characters moves to the option whose text starts with those
@@ -7,6 +8,9 @@
  * 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.
+ *
+ * `isTextEditingKey` is for the other side of a list: a field with a list
+ * under it uses it to tell which keys belong to the field.
  */
 /**
  * How long a buffer of typed characters is kept before it is discarded, in
@@ -157,3 +161,25 @@ export class TypeaheadBuffer {
         this.resetTimeoutId = undefined;
     }
 }
+/**
+ * Whether a keyboard event edits text: a typed character, or Backspace or
+ * Delete. A bare space is left out, since on an option of a list it selects
+ * the option.
+ *
+ * A character typed with Option, or with AltGr, which is reported as Ctrl and
+ * Alt together, counts, since many layouts type `@` and `$` that way. A
+ * shortcut with Ctrl or Meta does not.
+ *
+ * @param event - the keyboard event to inspect
+ * @returns `true` when the event edits text
+ */
+export function isTextEditingKey(event) {
+    if (event.key === BACKSPACE || event.key === DELETE) {
+        return true;
+    }
+    const isCharacter = event.key.length === 1 &&
+        event.key !== SPACEBAR &&
+        !event.metaKey &&
+        !event.isComposing;
+    return isCharacter && (!event.ctrlKey || event.altKey);
+}