@internetarchive/collection-browser 3.4.1-alpha-webdev7761.2 → 3.4.1-alpha-webdev7761.3

package/dist/src/combo-box/ia-combo-box.js

@@ -1,43 +1,15 @@
 import { __decorate } from "tslib";
-import { html, LitElement, css, } from 'lit';
+import { html, LitElement, nothing, css, } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { when } from 'lit/directives/when.js';
 import { msg } from '@lit/localize';
-import { hasAnyOf, } from './models';
-import caretClosed from './caret-closed';
-import caretOpen from './caret-open';
-/**
- * Tests whether the given `haystack` string has the given `needle` as a subsequence.
- * Returns `true` if the characters of `needle` appear in order within `haystack`,
- * regardless of whether they are contiguous. Returns `false` otherwise.
- *
- * E.g., `ace` is a subsequence of `archive` (but not a contiguous substring).
- *
- * Note: The empty string is a subsequence of any string, including itself.
- *
- * @param needle The potential subsequence to check for inside `haystack`.
- * @param haystack The string to be tested for containing the `needle` subsequence.
- * @returns Whether `haystack` has `needle` as a subsequence.
- */
-const isSubsequence = (needle, haystack) => {
-    const needleLen = needle.length;
-    const haystackLen = haystack.length;
-    if (needleLen === 0)
-        return true;
-    let needleIdx = 0;
-    let haystackIdx = 0;
-    while (haystackIdx < haystackLen) {
-        if (haystack[haystackIdx] === needle[needleIdx])
-            needleIdx += 1;
-        if (needleIdx >= needleLen)
-            return true;
-        haystackIdx += 1;
-    }
-    return false;
-};
+import { hasAnyOf, isSubsequence, } from './models';
+import caretClosedIcon from './caret-closed';
+import caretOpenIcon from './caret-open';
+import clearIcon from './clear';
 /**
  * Map from filter preset keys to their associated filtering function.
  * @see {@linkcode IAComboBox.filter}
@@ -119,7 +91,8 @@ let IAComboBox = class IAComboBox extends LitElement {
          */
         this.caseSensitive = false;
         /**
-         * Whether the filtered options should be listed in lexicographically-sorted order.
+         * Whether the filtered options should be listed in lexicographically-sorted order,
+         * respecting the current `caseSensitive` setting.
          * Default is `false`, displaying them in the same order as the provided options array.
          */
         this.sort = false;
@@ -141,6 +114,11 @@ let IAComboBox = class IAComboBox extends LitElement {
          * Default is `false`, closing the options list when a selection is made.
          */
         this.stayOpen = false;
+        /**
+         * Whether the combo box shows a clear button when a value is selected.
+         * Default is `false`.
+         */
+        this.clearable = false;
         /**
          * Whether the combo box's option menu is currently expanded. Default is `false`.
          */
@@ -213,19 +191,17 @@ let IAComboBox = class IAComboBox extends LitElement {
         this.internals = this.attachInternals();
     }
     render() {
+        const mainWidgetClasses = classMap({
+            disabled: this.disabled,
+            focused: this.hasFocus,
+        });
         return html `
-      <div
-        id="container"
-        class=${classMap({ focused: this.hasFocus })}
-        part="container"
-      >
+      <div id="container" part="container">
         ${this.labelTemplate}
-        <div
-          id="main-widget-row"
-          class=${classMap({ disabled: this.disabled })}
-          part="combo-box"
-        >
-          ${this.textInputTemplate} ${this.caretButtonTemplate}
+        <div id="main-widget-row" class=${mainWidgetClasses} part="combo-box">
+          ${this.textInputTemplate}
+          ${this.clearable ? this.clearButtonTemplate : nothing}
+          ${this.caretButtonTemplate}
         </div>
         ${this.optionsListTemplate}
       </div>
@@ -295,10 +271,14 @@ let IAComboBox = class IAComboBox extends LitElement {
     /**
      * Template for the main label for the combo box.
      *
-     * Uses the contents of the default (unnamed) slot as the label text.
+     * Uses the contents of the `label` named slot as the label text.
      */
     get labelTemplate() {
-        return html `<label id="label" for="text-input"><slot></slot></label>`;
+        return html `
+      <label id="label" for="text-input">
+        <slot name="label"></slot>
+      </label>
+    `;
     }
     /**
      * Template for the text input field that users can edit to filter the available
@@ -307,7 +287,7 @@ let IAComboBox = class IAComboBox extends LitElement {
     get textInputTemplate() {
         var _a;
         const textInputClasses = classMap({
-            editable: this.behavior !== 'select-only',
+            'clear-padding': this.clearable && !this.shouldShowClearButton,
         });
         return html `
       <input
@@ -323,6 +303,7 @@ let IAComboBox = class IAComboBox extends LitElement {
         aria-controls="options-list"
         aria-expanded=${this.open}
         aria-activedescendant=${ifDefined((_a = this.highlightedOption) === null || _a === void 0 ? void 0 : _a.id)}
+        ?readonly=${this.behavior === 'select-only'}
         ?disabled=${this.disabled}
         ?required=${this.required}
         @click=${this.handleComboBoxClick}
@@ -333,14 +314,39 @@ let IAComboBox = class IAComboBox extends LitElement {
       />
     `;
     }
+    /**
+     * Template for the clear button that is shown when the `clearable` property
+     * is true.
+     */
+    get clearButtonTemplate() {
+        return html `
+      <button
+        type="button"
+        id="clear-button"
+        part="clear-button"
+        tabindex="-1"
+        ?hidden=${!this.shouldShowClearButton}
+        @click=${this.handleClearButtonClick}
+      >
+        <span class="sr-only">${msg('Clear')}</span>
+        <slot name="clear-button">
+          ${clearIcon}
+        </slot>
+      </button>
+    `;
+    }
     /**
      * Template for the caret open/closed icons to show beside the text input.
      * The icons are wrapped in named slots to allow consumers to override them.
      */
     get caretTemplate() {
         return html `
-      <slot name="caret-closed" ?hidden=${this.open}> ${caretClosed} </slot>
-      <slot name="caret-open" ?hidden=${!this.open}> ${caretOpen} </slot>
+      <slot name="caret-closed" ?hidden=${this.open}>
+        ${caretClosedIcon}
+      </slot>
+      <slot name="caret-open" ?hidden=${!this.open}>
+        ${caretOpenIcon}
+      </slot>
     `;
     }
     /**
@@ -361,6 +367,7 @@ let IAComboBox = class IAComboBox extends LitElement {
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
       >
+        <span class="sr-only">${msg('Toggle options')}</span>
         ${this.caretTemplate}
       </button>
     `;
@@ -374,6 +381,7 @@ let IAComboBox = class IAComboBox extends LitElement {
         id="options-list"
         part="options-list"
         role="listbox"
+        tabindex="-1"
         popover
         ?hidden=${!this.open}
         @focus=${this.handleFocus}
@@ -405,6 +413,7 @@ let IAComboBox = class IAComboBox extends LitElement {
           id=${opt.id}
           class=${optionClasses}
           part="option"
+          role="option"
           tabindex="-1"
           @pointerenter=${this.handleOptionPointerEnter}
           @pointermove=${this.handleOptionPointerMove}
@@ -441,7 +450,7 @@ let IAComboBox = class IAComboBox extends LitElement {
      * Handler for when the pointer device is moved within an option in the dropdown.
      */
     handleOptionPointerMove(e) {
-        const target = e.target;
+        const target = e.currentTarget;
         const option = this.getOptionFor(target.id);
         if (option)
             this.setHighlightedOption(option);
@@ -450,7 +459,7 @@ let IAComboBox = class IAComboBox extends LitElement {
      * Handler for when the user clicks on an option in the dropdown.
      */
     handleOptionClick(e) {
-        const target = e.target;
+        const target = e.currentTarget;
         const option = this.getOptionFor(target.id);
         if (option) {
             this.setSelectedOption(option.id);
@@ -485,10 +494,16 @@ let IAComboBox = class IAComboBox extends LitElement {
                 }
                 break;
             case 'Tab':
-                this.textInput.focus();
-                return;
+                this.handleTabPressed();
+                return; // Never cancel the default behavior for Tab
+            case ' ':
+                this.handleSpacePressed();
+                // In the specific case of picking an option in select-only, we skip the defaults
+                if (this.behavior === 'select-only' && this.highlightedOption)
+                    break;
+                return; // Otherwise, don't cancel the default behavior
             default:
-                // Do nothing and allow propagation otherwise
+                // Do nothing and allow propagation for all other keys
                 return;
         }
         e.stopPropagation();
@@ -567,20 +582,46 @@ let IAComboBox = class IAComboBox extends LitElement {
     handleAltDownArrowPressed() {
         this.openOptionsMenu();
     }
+    /**
+     * Handler for when the Tab key is pressed
+     */
+    handleTabPressed() {
+        if (this.highlightedOption) {
+            this.setSelectedOption(this.highlightedOption.id);
+            if (!this.stayOpen)
+                this.open = false;
+        }
+    }
+    /**
+     * Handler for when the Space key is pressed
+     */
+    handleSpacePressed() {
+        if (this.behavior === 'select-only' && this.highlightedOption) {
+            this.setSelectedOption(this.highlightedOption.id);
+            if (!this.stayOpen)
+                this.open = false;
+        }
+    }
     /**
      * Handler for clicks on the combo box input field or caret button.
      */
     handleComboBoxClick() {
         this.toggleOptionsMenu();
     }
+    /**
+     * Handler for when the clear button is clicked.
+     */
+    handleClearButtonClick() {
+        this.clearSelectedOption();
+        this.textInput.focus();
+        this.openOptionsMenu();
+    }
     /**
      * Handler for when any part of the combo box receives focus.
      */
     handleFocus() {
-        if (this.behavior === 'select-only') {
-            this.caretButton.focus();
-        }
-        else {
+        if (this.behavior !== 'select-only') {
+            // Always keep focus on the text input if it's editable
             this.textInput.focus();
         }
         this.hasFocus = true;
@@ -592,13 +633,21 @@ let IAComboBox = class IAComboBox extends LitElement {
     handleBlur() {
         this.hasFocus = false;
         this.losingFocus = true;
+        // On the next tick, check whether we've actually lost focus to some other element,
+        // or just had a momentary internal focus switch. If it's the former, we should
+        // close the menu and possibly make a selection (depending on desired behavior).
         setTimeout(() => {
-            var _a;
+            var _a, _b, _c;
             if (this.losingFocus && !((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)) {
                 this.losingFocus = false;
                 this.closeOptionsMenu();
-                if (this.behavior === 'freeform')
+                if (this.behavior === 'list') {
+                    this.setTextValue((_c = (_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.text) !== null && _c !== void 0 ? _c : '', false);
+                }
+                else if (this.behavior === 'freeform' &&
+                    (this.enteredText || this.value)) {
                     this.setValue(this.enteredText);
+                }
             }
         }, 0);
     }
@@ -693,7 +742,8 @@ let IAComboBox = class IAComboBox extends LitElement {
         const prevValue = this.value;
         this.value = option.id;
         this.internals.setFormValue(this.value);
-        this.setTextValue(option.text);
+        this.setTextValue(option.text, false);
+        this.setFilterText('');
         if (this.value !== prevValue)
             this.emitChangeEvent();
         // Invoke the option's select callback if defined
@@ -738,10 +788,20 @@ let IAComboBox = class IAComboBox extends LitElement {
     /**
      * Changes the value of the text input box, and updates the filter accordingly.
      */
-    setTextValue(value) {
+    setTextValue(value, setFilter = true) {
         this.textInput.value = value;
         this.enteredText = value;
-        this.setFilterText(value);
+        if (setFilter)
+            this.setFilterText(value);
+    }
+    /**
+     * Sets the current filter text based on the provided string. The resulting filter
+     * text might not exactly match the provided value, depending on the current case
+     * sensitivity.
+     */
+    setFilterText(baseFilterText) {
+        const { caseTransform } = this;
+        this.filterText = caseTransform(baseFilterText);
     }
     openOptionsMenu() {
         this.open = true;
@@ -777,6 +837,19 @@ let IAComboBox = class IAComboBox extends LitElement {
     //
     // HELPERS
     //
+    /**
+     * True iff no selection has been made and no text has been entered.
+     */
+    get isEmpty() {
+        return !this.selectedOption && !this.enteredText;
+    }
+    /**
+     * We only show the clear button when the `clearable` property is set
+     * and the combo box is neither empty nor disabled.
+     */
+    get shouldShowClearButton() {
+        return this.clearable && !this.disabled && !this.isEmpty;
+    }
     /**
      * Sets the size and position of the options menu to match the size and position of
      * the combo box widget. Prefers to position below the main widget, but will flip
@@ -789,11 +862,11 @@ let IAComboBox = class IAComboBox extends LitElement {
         const usableHeightAbove = mainWidgetRect.top;
         const usableHeightBelow = innerHeight - mainWidgetRect.bottom;
         // We still want to respect any CSS var specified by the consumer
-        const maxHeightVar = 'var(--comboBoxListMaxHeight, 250px)';
+        const maxHeightVar = 'var(--combo-box-list-max-height, 250px)';
         const optionsListStyles = {
             top: `${mainWidgetRect.bottom + scrollY}px`,
             left: `${mainWidgetRect.left + scrollX}px`,
-            width: `var(--comboBoxListWidth, ${mainWidgetRect.width}px)`,
+            width: `var(--combo-box-list-width, ${mainWidgetRect.width}px)`,
             maxHeight: `min(${usableHeightBelow}px, ${maxHeightVar})`,
         };
         Object.assign(optionsList.style, optionsListStyles);
@@ -816,15 +889,6 @@ let IAComboBox = class IAComboBox extends LitElement {
     get caseTransform() {
         return this.caseSensitive ? STRING_IDENTITY_FN : STRING_LOWER_CASE_FN;
     }
-    /**
-     * Sets the current filter text based on the provided string. The resulting filter
-     * text might not exactly match the provided value, depending on the current case
-     * sensitivity.
-     */
-    setFilterText(baseFilterText) {
-        const { caseTransform } = this;
-        this.filterText = caseTransform(baseFilterText);
-    }
     /**
      * Returns the combo box option having the given ID, or null if none exists.
      */
@@ -938,6 +1002,11 @@ let IAComboBox = class IAComboBox extends LitElement {
     }
     static get styles() {
         return css `
+      #container {
+        display: inline-block;
+        width: var(--combo-box-width, auto);
+      }
+
       #label {
         display: block;
         width: fit-content;
@@ -949,9 +1018,15 @@ let IAComboBox = class IAComboBox extends LitElement {
         flex-wrap: nowrap;
         background: white;
         border: 1px solid black;
+        width: 100%;
+      }
+
+      #main-widget-row:not(.focused):hover,
+      #main-widget-row:not(.focused):active {
+        background: #fafafa;
       }
 
-      .focused #main-widget-row {
+      #main-widget-row.focused {
         outline: black auto 1px;
         outline-offset: 3px;
       }
@@ -960,27 +1035,47 @@ let IAComboBox = class IAComboBox extends LitElement {
         appearance: none;
         background: transparent;
         border: none;
-        padding: var(--comboBoxPadding, 5px);
+        padding: var(--combo-box-padding, 5px);
+        padding-right: 0;
         width: 100%;
         font-size: inherit;
+        color: inherit;
         outline: none;
+        text-overflow: ellipsis;
       }
 
-      #text-input:not(.editable) {
+      #text-input.clear-padding {
+        padding-right: 30px;
+      }
+
+      #text-input:read-only {
         cursor: pointer;
       }
 
+      #clear-button,
       #caret-button {
         display: inline-flex;
         align-items: center;
         appearance: none;
         background: transparent;
         border: none;
-        padding: var(--comboBoxPadding, 5px);
+        padding: var(--combo-box-padding, 5px) 5px;
         outline: none;
         cursor: pointer;
       }
 
+      #clear-button {
+        flex: 0 0 30px;
+      }
+
+      #clear-button[hidden] {
+        display: none;
+      }
+
+      #caret-button {
+        padding-right: var(--combo-box-padding, 5px);
+      }
+
       #options-list {
         position: absolute;
         list-style-type: none;
@@ -1005,13 +1100,23 @@ let IAComboBox = class IAComboBox extends LitElement {
         text-align: center;
       }
 
-      .caret {
+      #caret-button svg {
         width: 14px;
         height: 14px;
       }
 
+      #clear-button svg {
+        width: var(--combo-box-clear-icon-size, 16px);
+        height: var(--combo-box-clear-icon-size, 16px);
+      }
+
       .option {
-        padding: 5px;
+        padding: 7px 5px;
+        width: 100%;
+        box-sizing: border-box;
+        line-height: 1.1;
+        text-overflow: ellipsis;
+        overflow: hidden;
         cursor: pointer;
       }
 
@@ -1069,6 +1174,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'stay-open' })
 ], IAComboBox.prototype, "stayOpen", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IAComboBox.prototype, "clearable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IAComboBox.prototype, "open", void 0);
@@ -1099,9 +1207,6 @@ __decorate([
 __decorate([
     query('#text-input')
 ], IAComboBox.prototype, "textInput", void 0);
-__decorate([
-    query('#caret-button')
-], IAComboBox.prototype, "caretButton", void 0);
 __decorate([
     query('#options-list')
 ], IAComboBox.prototype, "optionsList", void 0);