@ni/nimble-components 24.1.6 → 24.1.8

package/dist/esm/combobox/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
-import { attr, html, observable, ref } from '@microsoft/fast-element';
-import { DesignSystem, Combobox as FoundationCombobox } from '@microsoft/fast-foundation';
-import { keyArrowDown, keyArrowUp, keyEnter, keySpace } from '@microsoft/fast-web-utilities';
+import { DOM, Observable, attr, html, observable, ref } from '@microsoft/fast-element';
+import { DesignSystem, ComboboxAutocomplete, SelectPosition, DelegatesARIACombobox, applyMixins, StartEnd } from '@microsoft/fast-foundation';
+import { keyArrowDown, keyArrowUp, keyEnter, keyEscape, keySpace, keyTab, limit, uniqueId } from '@microsoft/fast-web-utilities';
 import { toggleButtonTag } from '../toggle-button';
 import { errorTextTemplate } from '../patterns/error/template';
 import { iconArrowExpanderDownTag } from '../icons/arrow-expander-down';
@@ -9,65 +9,156 @@ import { iconExclamationMarkTag } from '../icons/exclamation-mark';
 import { styles } from './styles';
 import { DropdownAppearance } from '../patterns/dropdown/types';
 import { template } from './template';
+import { FormAssociatedCombobox } from './models/combobox-form-associated';
 /**
  * A nimble-styed HTML combobox
  */
-export class Combobox extends FoundationCombobox {
+export class Combobox extends FormAssociatedCombobox {
     constructor() {
         super(...arguments);
         this.appearance = DropdownAppearance.underline;
         this.errorVisible = false;
+        /**
+         * The open attribute.
+         */
+        this.open = false;
+        /**
+         * The collection of currently filtered options.
+         */
+        this.filteredOptions = [];
         /** @internal */
         this.hasOverflow = false;
+        /**
+         * The unique id for the internal listbox element.
+         *
+         * @internal
+         */
+        this.listboxId = uniqueId('listbox-');
+        /**
+         * The max height for the listbox when opened.
+         *
+         * @internal
+         */
+        this.maxHeight = 0;
         this.valueUpdatedByInput = false;
+        this._value = '';
+        this.filter = '';
+        /**
+         * The initial state of the position attribute.
+         */
+        this.forcedPosition = false;
     }
     get value() {
-        return super.value;
+        Observable.track(this, 'value');
+        return this._value;
     }
-    // This override is to work around an issue in FAST where an old filter value
-    // is used after programmatically setting the value property.
-    // See: https://github.com/microsoft/fast/issues/6749
     set value(next) {
-        super.value = next;
-        // Workaround using index notation to manipulate private member
+        const prev = `${this._value}`;
+        let updatedValue = next;
+        if (this.$fastController.isConnected && this.options) {
+            const selectedIndex = this.options.findIndex(el => el.text.toLowerCase() === next.toLowerCase());
+            const prevSelectedValue = this.options[this.selectedIndex]?.text;
+            const nextSelectedValue = this.options[selectedIndex]?.text;
+            this.selectedIndex = prevSelectedValue !== nextSelectedValue
+                ? selectedIndex
+                : this.selectedIndex;
+            updatedValue = this.firstSelectedOption?.text || next;
+        }
+        if (prev !== updatedValue) {
+            this._value = updatedValue;
+            super.valueChanged(prev, updatedValue);
+            Observable.notify(this, 'value');
+        }
         // Can remove when following resolved: https://github.com/microsoft/fast/issues/6749
-        // eslint-disable-next-line @typescript-eslint/dot-notation
-        this['filter'] = next;
+        this.filter = next;
         this.filterOptions();
         this.selectedIndex = this.options
             .map(option => option.text)
             .indexOf(this.value);
     }
-    // Workaround for https://github.com/microsoft/fast/issues/5123
-    setPositioning() {
-        if (!this.$fastController.isConnected) {
-            // Don't call setPositioning() until we're connected,
-            // since this.forcedPosition isn't initialized yet.
-            return;
-        }
-        super.setPositioning();
+    /**
+     * The list of options.
+     *
+     * Overrides `Listbox.options`.
+     */
+    get options() {
+        Observable.track(this, 'options');
+        return this.filteredOptions?.length
+            ? this.filteredOptions
+            : this._options;
+    }
+    set options(value) {
+        this._options = value;
+        Observable.notify(this, 'options');
+    }
+    get isAutocompleteInline() {
+        return (this.autocomplete === ComboboxAutocomplete.inline
+            || this.isAutocompleteBoth);
+    }
+    get isAutocompleteList() {
+        return (this.autocomplete === ComboboxAutocomplete.list
+            || this.isAutocompleteBoth);
+    }
+    get isAutocompleteBoth() {
+        return this.autocomplete === ComboboxAutocomplete.both;
     }
-    // Workaround for https://github.com/microsoft/fast/issues/5773
     slottedOptionsChanged(prev, next) {
+        // Workaround for https://github.com/microsoft/fast/issues/5773
         const value = this.value;
         super.slottedOptionsChanged(prev, next);
+        this.updateValue();
         if (value) {
             this.value = value;
         }
     }
     connectedCallback() {
         super.connectedCallback();
-        // Call setPositioning() after this.forcedPosition is initialized.
+        this.forcedPosition = !!this.positionAttribute;
+        if (this.value) {
+            this.initialValue = this.value;
+        }
         this.setPositioning();
         this.updateInputAriaLabel();
     }
+    /**
+     * @internal
+     */
+    clickHandler(e) {
+        if (this.disabled) {
+            return false;
+        }
+        if (this.open) {
+            const captured = e.target.closest('option,[role=option]');
+            if (!captured || captured.disabled) {
+                return false;
+            }
+            this.selectedOptions = [captured];
+            this.control.value = captured.text;
+            this.clearSelectionRange();
+            this.updateValue(true);
+        }
+        this.open = !this.open;
+        if (this.open) {
+            this.control.focus();
+        }
+        return true;
+    }
+    /**
+     * @internal
+     */
     toggleButtonClickHandler(e) {
         e.stopImmediatePropagation();
     }
+    /**
+     * @internal
+     */
     toggleButtonChangeHandler(e) {
         this.open = this.dropdownButton.checked;
         e.stopImmediatePropagation();
     }
+    /**
+     * @internal
+     */
     toggleButtonKeyDownHandler(e) {
         switch (e.key) {
             case keyArrowUp:
@@ -81,20 +172,57 @@ export class Combobox extends FoundationCombobox {
                 return true;
         }
     }
+    /**
+     * @internal
+     */
     filterOptions() {
-        super.filterOptions();
+        if (!this.autocomplete
+            || this.autocomplete === ComboboxAutocomplete.none) {
+            this.filter = '';
+        }
+        const filter = this.filter.toLowerCase();
+        this.filteredOptions = this._options.filter(o => o.text.toLowerCase().startsWith(filter));
+        if (this.isAutocompleteList) {
+            if (!this.filteredOptions.length && !filter) {
+                this.filteredOptions = this._options;
+            }
+            this._options.forEach(o => {
+                o.visuallyHidden = !this.filteredOptions.includes(o);
+            });
+        }
         const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
         this.filteredOptions = enabledOptions;
     }
     /**
-     * This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267
-     * For now, we will update the value ourselves while a user types in text. Note that there is other
-     * implementation related to this (like the 'keydownEventHandler') needed to create the complete set
-     * of desired behavior described in the issue noted above.
+     * @internal
      */
-    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
     inputHandler(e) {
-        const returnValue = super.inputHandler(e);
+        this.filter = this.control.value;
+        this.filterOptions();
+        if (!this.isAutocompleteInline) {
+            this.selectedIndex = this.options
+                .map(option => option.text)
+                .indexOf(this.control.value);
+        }
+        if (!(e.inputType.includes('deleteContent') || !this.filter.length)) {
+            if (this.isAutocompleteList && !this.open) {
+                this.open = true;
+            }
+            if (this.isAutocompleteInline) {
+                if (this.filteredOptions.length) {
+                    this.selectedOptions = [this.filteredOptions[0]];
+                    this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
+                    this.setInlineSelection();
+                }
+                else {
+                    this.selectedIndex = -1;
+                }
+            }
+        }
+        // This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267
+        // For now, we will update the value ourselves while a user types in text. Note that there is other
+        // implementation related to this (like the 'keydownEventHandler') needed to create the complete set
+        // of desired behavior described in the issue noted above.
         if (!this.valueUpdatedByInput) {
             this.valueBeforeTextUpdate = this.value;
         }
@@ -104,47 +232,260 @@ export class Combobox extends FoundationCombobox {
             this.focusAndScrollOptionIntoView();
         }
         this.value = this.control.value;
-        return returnValue;
+        return true;
     }
-    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
     keydownHandler(e) {
-        const returnValue = super.keydownHandler(e);
         if (e.ctrlKey || e.altKey) {
-            return returnValue;
+            return true;
         }
         switch (e.key) {
             case keyEnter:
+                this.syncValue();
+                if (this.isAutocompleteInline) {
+                    this.filter = this.value;
+                }
+                this.open = false;
+                this.clearSelectionRange();
                 this.emitChangeIfValueUpdated();
                 break;
+            case keyEscape:
+                if (!this.isAutocompleteInline) {
+                    this.selectedIndex = -1;
+                }
+                if (this.open) {
+                    this.open = false;
+                    break;
+                }
+                this.value = '';
+                this.control.value = '';
+                this.filter = '';
+                this.filterOptions();
+                break;
+            case keyTab:
+                this.setInputToSelection();
+                if (!this.open) {
+                    return true;
+                }
+                e.preventDefault();
+                this.open = false;
+                break;
             case keyArrowDown:
             case keyArrowUp:
+                this.filterOptions();
+                if (!this.open) {
+                    this.open = true;
+                    break;
+                }
+                if (this.filteredOptions.length > 0) {
+                    super.keydownHandler(e);
+                }
+                if (this.isAutocompleteInline) {
+                    this.setInlineSelection();
+                }
                 if (this.open && this.valueUpdatedByInput) {
                     this.valueUpdatedByInput = false;
                 }
                 break;
             default:
-                return returnValue;
+                return true;
         }
-        return returnValue;
+        return true;
     }
-    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    /**
+     * @internal
+     */
+    keyupHandler(e) {
+        const key = e.key;
+        switch (key) {
+            case 'ArrowLeft':
+            case 'ArrowRight':
+            case 'Backspace':
+            case 'Delete':
+            case 'Home':
+            case 'End': {
+                this.filter = this.control.value;
+                this.selectedIndex = -1;
+                this.filterOptions();
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+        return true;
+    }
+    /**
+     * @internal
+     */
     focusoutHandler(e) {
-        const returnValue = super.focusoutHandler(e);
+        this.syncValue();
+        if (this.open) {
+            const focusTarget = e.relatedTarget;
+            if (this.isSameNode(focusTarget)) {
+                this.focus();
+            }
+        }
         this.open = false;
         this.emitChangeIfValueUpdated();
-        return returnValue;
+        return true;
+    }
+    /**
+     * Reset the element to its first selectable option when its parent form is reset.
+     *
+     * @internal
+     */
+    formResetCallback() {
+        super.formResetCallback();
+        this.setDefaultSelectedOption();
+        this.updateValue();
+    }
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate() {
+        super.validate(this.control);
+    }
+    /**
+     * Set the default selected options at initialization or reset.
+     *
+     * @internal
+     * @remarks
+     * Overrides `Listbox.setDefaultSelectedOption`
+     */
+    setDefaultSelectedOption() {
+        if (this.$fastController.isConnected && this.options) {
+            const selectedIndex = this.options.findIndex(el => el.getAttribute('selected') !== null || el.selected);
+            this.selectedIndex = selectedIndex;
+            if (!this.dirtyValue && this.firstSelectedOption) {
+                this.value = this.firstSelectedOption.text;
+            }
+            this.setSelectedOptions();
+        }
+    }
+    /**
+     * @internal
+     */
+    selectedIndexChanged(prev, next) {
+        if (this.$fastController.isConnected) {
+            const pinnedSelectedIndex = limit(-1, this.options.length - 1, next);
+            // we only want to call the super method when the selectedIndex is in range
+            if (pinnedSelectedIndex !== this.selectedIndex) {
+                this.selectedIndex = pinnedSelectedIndex;
+                return;
+            }
+            super.selectedIndexChanged(prev, pinnedSelectedIndex);
+        }
+    }
+    /**
+     * Synchronize the `aria-disabled` property when the `disabled` property changes.
+     *
+     * @internal
+     */
+    disabledChanged(prev, next) {
+        if (super.disabledChanged) {
+            super.disabledChanged(prev, next);
+        }
+        this.ariaDisabled = this.disabled ? 'true' : 'false';
+    }
+    /**
+     * Move focus to the previous selectable option.
+     *
+     * @internal
+     * @remarks
+     * Overrides `Listbox.selectPreviousOption`
+     */
+    selectPreviousOption() {
+        if (!this.disabled && this.selectedIndex >= 0) {
+            this.selectedIndex -= 1;
+        }
     }
+    /**
+     * @internal
+     */
+    setPositioning() {
+        // Workaround for https://github.com/microsoft/fast/issues/5123
+        if (!this.$fastController.isConnected) {
+            // Don't call setPositioning() until we're connected,
+            // since this.forcedPosition isn't initialized yet.
+            return;
+        }
+        const currentBox = this.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const availableBottom = viewportHeight - currentBox.bottom;
+        if (this.forcedPosition) {
+            this.position = this.positionAttribute;
+        }
+        else if (currentBox.top > availableBottom) {
+            this.position = SelectPosition.above;
+        }
+        else {
+            this.position = SelectPosition.below;
+        }
+        this.positionAttribute = this.forcedPosition
+            ? this.positionAttribute
+            : this.position;
+        this.maxHeight = this.position === SelectPosition.above
+            ? Math.trunc(currentBox.top)
+            : Math.trunc(availableBottom);
+    }
+    /**
+     * Focus the control and scroll the first selected option into view.
+     *
+     * @internal
+     * @remarks
+     * Overrides: `Listbox.focusAndScrollOptionIntoView`
+     */
     focusAndScrollOptionIntoView() {
         if (this.open) {
-            super.focusAndScrollOptionIntoView();
+            if (this.contains(document.activeElement)) {
+                this.control.focus();
+                if (this.firstSelectedOption) {
+                    requestAnimationFrame(() => {
+                        this.firstSelectedOption?.scrollIntoView({
+                            block: 'nearest'
+                        });
+                    });
+                }
+            }
         }
     }
     openChanged() {
-        super.openChanged();
+        if (this.open) {
+            this.ariaControls = this.listboxId;
+            this.ariaExpanded = 'true';
+            this.setPositioning();
+            this.focusAndScrollOptionIntoView();
+            // focus is directed to the element when `open` is changed programmatically
+            DOM.queueUpdate(() => this.focus());
+        }
+        else {
+            this.ariaControls = '';
+            this.ariaExpanded = 'false';
+        }
         if (this.dropdownButton) {
             this.dropdownButton.checked = this.open;
         }
     }
+    placeholderChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.placeholder = this.placeholder ?? '';
+        }
+    }
+    /**
+     * Ensure that the entire list of options is used when setting the selected property.
+     * @internal
+     * @remarks
+     * Overrides: `Listbox.selectedOptionsChanged`
+     */
+    selectedOptionsChanged(_, next) {
+        if (this.$fastController.isConnected) {
+            this._options.forEach(o => {
+                o.selected = next.includes(o);
+            });
+        }
+    }
+    positionChanged(_, next) {
+        this.positionAttribute = next;
+        this.setPositioning();
+    }
     regionChanged(_prev, _next) {
         if (this.region && this.controlWrapper) {
             this.region.anchorElement = this.controlWrapper;
@@ -162,6 +503,49 @@ export class Combobox extends FoundationCombobox {
     maxHeightChanged() {
         this.updateListboxMaxHeightCssVariable();
     }
+    /**
+     * Sets the value and to match the first selected option.
+     */
+    updateValue(shouldEmit) {
+        if (this.$fastController.isConnected) {
+            this.value = this.firstSelectedOption?.text || this.control.value;
+            this.control.value = this.value;
+        }
+        if (shouldEmit) {
+            this.$emit('change');
+        }
+    }
+    /**
+     * Focus and set the content of the control based on the first selected option.
+     */
+    setInputToSelection() {
+        if (this.firstSelectedOption) {
+            this.control.value = this.firstSelectedOption.text;
+            this.control.focus();
+        }
+    }
+    /**
+     * Focus, set and select the content of the control based on the first selected option.
+     */
+    setInlineSelection() {
+        if (this.firstSelectedOption) {
+            this.setInputToSelection();
+            this.control.setSelectionRange(this.filter.length, this.control.value.length, 'backward');
+        }
+    }
+    clearSelectionRange() {
+        const controlValueLength = this.control.value.length;
+        this.control.setSelectionRange(controlValueLength, controlValueLength);
+    }
+    /**
+     * Determines if a value update should involve emitting a change event, then updates the value.
+     */
+    syncValue() {
+        const newValue = this.selectedIndex > -1
+            ? this.firstSelectedOption?.text
+            : this.control.value;
+        this.updateValue(this.value !== newValue);
+    }
     updateListboxMaxHeightCssVariable() {
         if (this.listbox) {
             this.listbox.style.setProperty('--ni-private-select-max-height', `${this.maxHeight}px`);
@@ -198,27 +582,51 @@ export class Combobox extends FoundationCombobox {
 __decorate([
     attr
 ], Combobox.prototype, "appearance", void 0);
-__decorate([
-    observable
-], Combobox.prototype, "dropdownButton", void 0);
 __decorate([
     attr({ attribute: 'error-text' })
 ], Combobox.prototype, "errorText", void 0);
 __decorate([
     attr({ attribute: 'error-visible', mode: 'boolean' })
 ], Combobox.prototype, "errorVisible", void 0);
+__decorate([
+    attr({ attribute: 'autocomplete', mode: 'fromView' })
+], Combobox.prototype, "autocomplete", void 0);
+__decorate([
+    attr({ attribute: 'position' })
+], Combobox.prototype, "positionAttribute", void 0);
+__decorate([
+    attr({ attribute: 'open', mode: 'boolean' })
+], Combobox.prototype, "open", void 0);
+__decorate([
+    attr
+], Combobox.prototype, "placeholder", void 0);
+__decorate([
+    observable
+], Combobox.prototype, "position", void 0);
 __decorate([
     observable
 ], Combobox.prototype, "region", void 0);
 __decorate([
     observable
 ], Combobox.prototype, "controlWrapper", void 0);
+__decorate([
+    observable
+], Combobox.prototype, "control", void 0);
+__decorate([
+    observable
+], Combobox.prototype, "listbox", void 0);
+__decorate([
+    observable
+], Combobox.prototype, "dropdownButton", void 0);
 __decorate([
     observable
 ], Combobox.prototype, "hasOverflow", void 0);
+__decorate([
+    observable
+], Combobox.prototype, "maxHeight", void 0);
 const nimbleCombobox = Combobox.compose({
     baseName: 'combobox',
-    baseClass: FoundationCombobox,
+    baseClass: FormAssociatedCombobox,
     template,
     styles,
     shadowOptions: {
@@ -256,6 +664,7 @@ const nimbleCombobox = Combobox.compose({
         ${errorTextTemplate}
     `
 });
+applyMixins(Combobox, StartEnd, DelegatesARIACombobox);
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCombobox());
 export const comboboxTag = 'nimble-combobox';
 //# sourceMappingURL=index.js.map