@ni/nimble-components 21.4.0 → 21.5.0

package/dist/esm/select/index.js

@@ -1,75 +1,708 @@
 import { __decorate } from "tslib";
-import { attr, html, observable } from '@microsoft/fast-element';
-import { DesignSystem, Select as FoundationSelect } from '@microsoft/fast-foundation';
+// Based on: https://github.com/microsoft/fast/blob/%40microsoft/fast-foundation_v2.49.5/packages/web-components/fast-foundation/src/select/select.ts
+import { attr, html, observable, Observable, volatile } from '@microsoft/fast-element';
+import { DesignSystem, Select as FoundationSelect, SelectPosition, applyMixins, StartEnd, DelegatesARIASelect, Listbox } from '@microsoft/fast-foundation';
+import { keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyHome, keySpace, keyTab, uniqueId } from '@microsoft/fast-web-utilities';
 import { arrowExpanderDown16X16 } from '@ni/nimble-tokens/dist/icons/js';
 import { styles } from './styles';
 import { DropdownAppearance } from '../patterns/dropdown/types';
 import { errorTextTemplate } from '../patterns/error/template';
 import { iconExclamationMarkTag } from '../icons/exclamation-mark';
 import { template } from './template';
+import { FilterMode } from './types';
+import { diacriticInsensitiveStringNormalizer } from '../utilities/models/string-normalizers';
+import { FormAssociatedSelect } from './models/select-form-associated';
 /**
- * A nimble-styled HTML select
+ * A nimble-styled HTML select.
  */
-export class Select extends FoundationSelect {
+export class Select extends FormAssociatedSelect {
     constructor() {
         super(...arguments);
         this.appearance = DropdownAppearance.underline;
         this.errorVisible = false;
+        this.filterMode = FilterMode.none;
+        /**
+         * @internal
+         */
+        this.open = false;
+        /**
+         * The unique id for the internal listbox element.
+         *
+         * @internal
+         */
+        this.listboxId = uniqueId('listbox-');
         /** @internal */
         this.hasOverflow = false;
+        /**
+         * @internal
+         */
+        this.filteredOptions = [];
+        /**
+         * @internal
+         */
+        this.filter = '';
+        /**
+         * @internal
+         */
+        this.committedSelectedOption = undefined;
+        /**
+         * The max height for the listbox when opened.
+         *
+         * @internal
+         */
+        this.maxHeight = 0;
+        this._value = '';
+        this.forcedPosition = false;
+    }
+    /**
+     * The component is collapsible when in single-selection mode with no size attribute.
+     *
+     * @internal
+     */
+    get collapsible() {
+        return !(this.multiple || typeof this.size === 'number');
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.forcedPosition = !!this.positionAttribute;
+        this.initializeOpenState();
+    }
+    /**
+     * The list of options. This mirrors FAST's override implementation for this
+     * member for the Combobox to support a filtered list in the dropdown.
+     *
+     * @public
+     * @remarks
+     * 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 value() {
+        Observable.track(this, 'value');
+        return this._value;
+    }
+    set value(next) {
+        const prev = this._value;
+        let newValue = next;
+        // use 'options' here instead of '_options' as 'selectedIndex' may be relative
+        // to filtered set
+        if (this.options?.length) {
+            const newValueIndex = this.options.findIndex(el => el.value === newValue);
+            const prevSelectedValue = this.options[this.selectedIndex]?.value ?? null;
+            const nextSelectedValue = this.options[newValueIndex]?.value ?? null;
+            if (newValueIndex === -1
+                || prevSelectedValue !== nextSelectedValue) {
+                newValue = '';
+                this.selectedIndex = newValueIndex;
+            }
+            newValue = this.firstSelectedOption?.value ?? newValue;
+        }
+        if (prev !== newValue && !(this.open && this.selectedIndex < 0)) {
+            this._value = newValue;
+            super.valueChanged(prev, newValue);
+            if (!this.open) {
+                this.committedSelectedOption = this._options.find(o => o.value === newValue);
+            }
+            Observable.notify(this, 'value');
+            if (this.collapsible) {
+                Observable.notify(this, 'displayValue');
+            }
+        }
+    }
+    /**
+     * @internal
+     */
+    get displayValue() {
+        Observable.track(this, 'displayValue');
+        return this.committedSelectedOption?.text ?? '';
+    }
+    /**
+     * @internal
+     */
+    anchoredRegionChanged(_prev, _next) {
+        if (this.anchoredRegion && this.control) {
+            this.anchoredRegion.anchorElement = this.control;
+        }
+    }
+    /**
+     * @internal
+     */
+    controlChanged(_prev, _next) {
+        if (this.anchoredRegion && this.control) {
+            this.anchoredRegion.anchorElement = this.control;
+        }
+    }
+    /**
+     * @internal
+     */
+    slottedOptionsChanged(prev, next) {
+        const value = this.value;
+        this._options.forEach(o => {
+            const notifier = Observable.getNotifier(o);
+            notifier.unsubscribe(this, 'value');
+        });
+        super.slottedOptionsChanged(prev, next);
+        this._options.forEach(o => {
+            const notifier = Observable.getNotifier(o);
+            notifier.subscribe(this, 'value');
+        });
+        this.setProxyOptions();
+        this.updateValue();
+        // We need to force an update to the filteredOptions observable
+        // (by calling 'filterOptions()) so that the template correctly updates.
+        this.filterOptions();
+        if (value) {
+            this.value = value;
+        }
+        this.committedSelectedOption = this.options[this.selectedIndex];
+    }
+    /**
+     * @internal
+     */
+    clickHandler(e) {
+        // do nothing if the select is disabled
+        if (this.disabled) {
+            return;
+        }
+        if (this.open) {
+            const captured = e.target.closest('option,[role=option]');
+            if (!captured?.disabled) {
+                this.updateSelectedIndexFromFilteredSet();
+            }
+            if (captured?.disabled) {
+                return;
+            }
+        }
+        super.clickHandler(e);
+        this.open = this.collapsible && !this.open;
+        if (!this.open && this.indexWhenOpened !== this.selectedIndex) {
+            this.updateValue(true);
+        }
+    }
+    /**
+     * Updates the value when an option's value changes.
+     *
+     * @param source - the source object
+     * @param propertyName - the property to evaluate
+     *
+     * @internal
+     * @override
+     */
+    handleChange(source, propertyName) {
+        super.handleChange(source, propertyName);
+        if (propertyName === 'value') {
+            this.updateValue();
+        }
+    }
+    /**
+     * Prevents focus when size is set and a scrollbar is clicked.
+     *
+     * @param e - the mouse event object
+     *
+     * @override
+     * @internal
+     */
+    mousedownHandler(e) {
+        if (e.offsetX >= 0 && e.offsetX <= this.listbox?.scrollWidth) {
+            return super.mousedownHandler(e);
+        }
+        return this.collapsible;
+    }
+    /**
+     * @internal
+     */
+    regionLoadedHandler() {
+        this.focusAndScrollOptionIntoView();
+    }
+    /**
+     * Sets the multiple property on the proxy element.
+     *
+     * @param prev - the previous multiple value
+     * @param next - the current multiple value
+     */
+    multipleChanged(prev, next) {
+        super.multipleChanged(prev, next);
+        if (this.proxy) {
+            this.proxy.multiple = next;
+        }
+    }
+    /**
+     * @internal
+     */
+    inputClickHandler(e) {
+        e.stopPropagation(); // clicking in filter input shouldn't close dropdown
+    }
+    /**
+     * @internal
+     */
+    changeValueHandler() {
+        this.committedSelectedOption = this.options.find(option => option.selected);
+    }
+    /**
+     * @internal
+     */
+    updateDisplayValue() {
+        if (this.collapsible) {
+            Observable.notify(this, 'displayValue');
+        }
+    }
+    /**
+     * Handle content changes on the control input.
+     *
+     * @param e - the input event
+     * @internal
+     */
+    inputHandler(e) {
+        this.filter = this.filterInput?.value ?? '';
+        if (!this.committedSelectedOption) {
+            this.committedSelectedOption = this._options.find(option => option.selected);
+        }
+        this.clearSelection();
+        this.filterOptions();
+        if (this.filteredOptions.length > 0
+            && this.committedSelectedOption
+            && !this.filteredOptions.includes(this.committedSelectedOption)) {
+            const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
+            if (enabledOptions.length > 0) {
+                enabledOptions[0].selected = true;
+            }
+            else {
+                // only filtered option is disabled
+                this.selectedOptions = [];
+                this.selectedIndex = -1;
+            }
+        }
+        else if (this.committedSelectedOption) {
+            this.committedSelectedOption.selected = true;
+        }
+        if (e.inputType.includes('deleteContent') || !this.filter.length) {
+            return true;
+        }
+        e.stopPropagation();
+        return true;
+    }
+    /**
+     * @internal
+     */
+    focusoutHandler(e) {
+        this.updateSelectedIndexFromFilteredSet();
+        super.focusoutHandler(e);
+        if (!this.open) {
+            return true;
+        }
+        const focusTarget = e.relatedTarget;
+        if (this.isSameNode(focusTarget)) {
+            this.focus();
+            return true;
+        }
+        if (!this.options?.includes(focusTarget)) {
+            this.open = false;
+            if (this.indexWhenOpened !== this.selectedIndex) {
+                this.updateValue(true);
+            }
+        }
+        return true;
+    }
+    /**
+     * @internal
+     */
+    keydownHandler(e) {
+        super.keydownHandler(e);
+        const key = e.key;
+        if (e.ctrlKey || e.shiftKey) {
+            return true;
+        }
+        switch (key) {
+            case keySpace: {
+                // when dropdown is open allow user to enter a space for filter text
+                if (this.open && this.filterMode !== FilterMode.none) {
+                    break;
+                }
+                e.preventDefault();
+                if (this.collapsible && this.typeAheadExpired) {
+                    this.open = !this.open;
+                }
+                if (!this.open) {
+                    this.focus();
+                }
+                break;
+            }
+            case keyHome:
+            case keyEnd: {
+                e.preventDefault();
+                break;
+            }
+            case keyEnter: {
+                e.preventDefault();
+                if (this.filteredOptions.length === 0
+                    || this.filteredOptions.every(o => o.disabled)) {
+                    return false;
+                }
+                this.updateSelectedIndexFromFilteredSet();
+                this.open = !this.open;
+                if (!this.open) {
+                    this.focus();
+                }
+                break;
+            }
+            case keyEscape: {
+                // clear filter as update to "selectedIndex" will result in processing
+                // "options" and not "_options"
+                this.filter = '';
+                if (this.committedSelectedOption) {
+                    this.clearSelection();
+                    this.selectedIndex = this._options.indexOf(this.committedSelectedOption);
+                }
+                if (this.collapsible && this.open) {
+                    e.preventDefault();
+                    this.open = false;
+                }
+                // reset 'selected' state otherwise the selected state doesn't stick.
+                const selectedOption = this._options[this.selectedIndex];
+                if (selectedOption) {
+                    selectedOption.selected = true;
+                }
+                this.focus();
+                break;
+            }
+            case keyTab: {
+                if (this.collapsible && this.open) {
+                    e.preventDefault();
+                    this.open = false;
+                }
+                return true;
+            }
+            default: {
+                break;
+            }
+        }
+        if (!this.open && this.indexWhenOpened !== this.selectedIndex) {
+            this.updateValue(true);
+            this.indexWhenOpened = this.selectedIndex;
+        }
+        return !(key === keyArrowDown || key === keyArrowUp);
+    }
+    /**
+     * Updates the proxy value when the selected index changes.
+     *
+     * @param prev - the previous selected index
+     * @param next - the next selected index
+     *
+     * @internal
+     */
+    selectedIndexChanged(prev, next) {
+        super.selectedIndexChanged(prev, next);
+        this.updateValue();
+    }
+    /**
+     * Synchronize the `aria-disabled` property when the `disabled` property changes.
+     *
+     * @param prev - The previous disabled value
+     * @param next - The next disabled value
+     *
+     * @internal
+     */
+    disabledChanged(prev, next) {
+        if (super.disabledChanged) {
+            super.disabledChanged(prev, next);
+        }
+        this.ariaDisabled = this.disabled ? 'true' : 'false';
+    }
+    /**
+     * Reset the element to its first selectable option when its parent form is reset.
+     *
+     * @internal
+     */
+    formResetCallback() {
+        this.setProxyOptions();
+        // Call the base class's implementation setDefaultSelectedOption instead of the select's
+        // override, in order to reset the selectedIndex without using the value property.
+        super.setDefaultSelectedOption();
+        if (this.selectedIndex === -1) {
+            this.selectedIndex = 0;
+        }
+    }
+    // Prevents parent classes from resetting selectedIndex to a positive
+    // value while filtering, which can result in a disabled option being
+    // selected.
+    setSelectedOptions() {
+        if (this.open && this.selectedIndex === -1) {
+            return;
+        }
+        super.setSelectedOptions();
+    }
+    focusAndScrollOptionIntoView() {
+        super.focusAndScrollOptionIntoView();
+        if (this.open) {
+            window.requestAnimationFrame(() => {
+                this.filterInput?.focus();
+            });
+        }
+    }
+    positionChanged(_, next) {
+        this.positionAttribute = next;
+        this.setPositioning();
+    }
+    /**
+     * Updates the proxy's size property when the size attribute changes.
+     *
+     * @param prev - the previous size
+     * @param next - the current size
+     *
+     * @override
+     * @internal
+     */
+    sizeChanged(prev, next) {
+        super.sizeChanged(prev, next);
+        if (this.proxy) {
+            this.proxy.size = next;
+        }
+    }
+    openChanged() {
+        if (!this.collapsible) {
+            return;
+        }
+        if (this.open) {
+            this.initializeOpenState();
+            this.indexWhenOpened = this.selectedIndex;
+            return;
+        }
+        this.filter = '';
+        if (this.filterInput) {
+            this.filterInput.value = '';
+        }
+        this.ariaControls = '';
+        this.ariaExpanded = 'false';
+    }
+    /**
+     * Updates the selectedness of each option when the list of selected options changes.
+     *
+     * @param prev - the previous list of selected options
+     * @param next - the current list of selected options
+     *
+     * @override
+     * @internal
+     */
+    selectedOptionsChanged(prev, next) {
+        super.selectedOptionsChanged(prev, next);
+        this.options?.forEach((o, i) => {
+            const proxyOption = this.proxy?.options.item(i);
+            if (proxyOption) {
+                proxyOption.selected = o.selected;
+            }
+        });
+    }
+    /**
+     * Sets the selected index to match the first option with the selected attribute, or
+     * the first selectable option.
+     *
+     * @override
+     * @internal
+     */
+    setDefaultSelectedOption() {
+        const options = this.options
+            ?? Array.from(this.children).filter(o => Listbox.slottedOptionFilter(o));
+        const selectedIndex = options?.findIndex(el => el.hasAttribute('selected')
+            || el.selected
+            || el.value === this.value);
+        if (selectedIndex !== -1) {
+            this.selectedIndex = selectedIndex;
+            return;
+        }
+        this.selectedIndex = 0;
     }
-    // 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();
+        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);
         this.updateListboxMaxHeightCssVariable();
     }
-    // Workaround for https://github.com/microsoft/fast/issues/5773
-    slottedOptionsChanged(prev, next) {
-        const value = this.value;
-        super.slottedOptionsChanged(prev, next);
-        if (value) {
-            this.value = value;
+    /**
+     * Filter available options by text value.
+     *
+     * @public
+     */
+    filterOptions() {
+        const filter = this.filter.toLowerCase();
+        if (filter) {
+            this.filteredOptions = this._options.filter(option => {
+                return diacriticInsensitiveStringNormalizer(option.text).includes(diacriticInsensitiveStringNormalizer(filter));
+            });
+        }
+        else {
+            this.filteredOptions = this._options;
         }
+        this._options.forEach(o => {
+            o.hidden = !this.filteredOptions.includes(o);
+        });
     }
-    regionChanged(_prev, _next) {
-        if (this.region && this.control) {
-            this.region.anchorElement = this.control;
+    /**
+     * Sets the value and display value to match the first selected option.
+     *
+     * @param shouldEmit - if true, the input and change events will be emitted
+     *
+     * @internal
+     */
+    updateValue(shouldEmit) {
+        if (this.$fastController.isConnected) {
+            this.value = this.firstSelectedOption?.value ?? '';
+        }
+        if (shouldEmit) {
+            this.$emit('input');
+            this.$emit('change', this, {
+                bubbles: true,
+                composed: undefined
+            });
         }
     }
-    controlChanged(_prev, _next) {
-        if (this.region && this.control) {
-            this.region.anchorElement = this.control;
+    /**
+     * Resets and fills the proxy to match the component's options.
+     *
+     * @internal
+     */
+    setProxyOptions() {
+        if (this.proxy instanceof HTMLSelectElement && this.options) {
+            this.proxy.options.length = 0;
+            this.options.forEach(option => {
+                const proxyOption = option.proxy
+                    || (option instanceof HTMLOptionElement
+                        ? option.cloneNode()
+                        : null);
+                if (proxyOption) {
+                    this.proxy.options.add(proxyOption);
+                }
+            });
         }
     }
+    clearSelection() {
+        this.options.forEach(option => {
+            option.selected = false;
+        });
+    }
+    filterChanged() {
+        this.filterOptions();
+    }
     maxHeightChanged() {
         this.updateListboxMaxHeightCssVariable();
     }
+    initializeOpenState() {
+        if (!this.open) {
+            this.ariaExpanded = 'false';
+            this.ariaControls = '';
+            return;
+        }
+        this.committedSelectedOption = this._options[this.selectedIndex];
+        this.ariaControls = this.listboxId;
+        this.ariaExpanded = 'true';
+        this.setPositioning();
+        this.focusAndScrollOptionIntoView();
+    }
     updateListboxMaxHeightCssVariable() {
         if (this.listbox) {
             this.listbox.style.setProperty('--ni-private-select-max-height', `${this.maxHeight}px`);
         }
     }
+    updateSelectedIndexFromFilteredSet() {
+        const selectedItem = this.filteredOptions.length > 0
+            ? this.options[this.selectedIndex]
+                ?? this.committedSelectedOption
+            : this.committedSelectedOption;
+        if (!selectedItem) {
+            return;
+        }
+        // Clear filter so any logic resolving against 'this.options' resolves against all options,
+        // since selectedIndex should be relative to entire set.
+        this.filter = '';
+        // translate selectedIndex for filtered list to selectedIndex for all items
+        this.selectedIndex = this._options.indexOf(selectedItem);
+        // force selected to true again if the selection hasn't actually changed
+        if (selectedItem === this.committedSelectedOption) {
+            selectedItem.selected = true;
+        }
+    }
 }
 __decorate([
     attr
 ], Select.prototype, "appearance", void 0);
+__decorate([
+    attr({ attribute: 'position' })
+], Select.prototype, "positionAttribute", void 0);
 __decorate([
     attr({ attribute: 'error-text' })
 ], Select.prototype, "errorText", void 0);
 __decorate([
     attr({ attribute: 'error-visible', mode: 'boolean' })
 ], Select.prototype, "errorVisible", void 0);
+__decorate([
+    attr({ attribute: 'filter-mode' })
+], Select.prototype, "filterMode", void 0);
+__decorate([
+    attr({ attribute: 'open', mode: 'boolean' })
+], Select.prototype, "open", void 0);
+__decorate([
+    observable
+], Select.prototype, "position", void 0);
+__decorate([
+    observable
+], Select.prototype, "control", void 0);
+__decorate([
+    observable
+], Select.prototype, "scrollableRegion", void 0);
 __decorate([
     observable
-], Select.prototype, "region", void 0);
+], Select.prototype, "filterInput", void 0);
+__decorate([
+    observable
+], Select.prototype, "anchoredRegion", void 0);
 __decorate([
     observable
 ], Select.prototype, "hasOverflow", void 0);
+__decorate([
+    observable
+], Select.prototype, "filteredOptions", void 0);
+__decorate([
+    observable
+], Select.prototype, "filter", void 0);
+__decorate([
+    observable
+], Select.prototype, "committedSelectedOption", void 0);
+__decorate([
+    observable
+], Select.prototype, "maxHeight", void 0);
+__decorate([
+    volatile
+], Select.prototype, "collapsible", null);
 const nimbleSelect = Select.compose({
     baseName: 'select',
     baseClass: FoundationSelect,
@@ -84,6 +717,7 @@ const nimbleSelect = Select.compose({
         ${errorTextTemplate}
     `
 });
+applyMixins(Select, StartEnd, DelegatesARIASelect);
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 export const selectTag = 'nimble-select';
 //# sourceMappingURL=index.js.map