@ni/nimble-components 21.4.0 → 21.5.1

package/dist/esm/select/index.js.map

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

package/dist/esm/select/models/select-form-associated.d.ts

@@ -0,0 +1,16 @@
+import { FormAssociated, ListboxElement } from '@microsoft/fast-foundation';
+declare class Select extends ListboxElement {
+}
+interface Select extends FormAssociated {
+}
+declare const FormAssociatedSelect_base: typeof Select;
+/**
+ * A form-associated base class for the Select component. This was copied from the
+ * FAST FormAssociatedSelect (which is not exported by fast-foundation)
+ *
+ * @internal
+ */
+export declare class FormAssociatedSelect extends FormAssociatedSelect_base {
+    proxy: HTMLSelectElement;
+}
+export {};

package/dist/esm/select/models/select-form-associated.js

@@ -0,0 +1,19 @@
+// Based on: https://github.com/microsoft/fast/blob/%40microsoft/fast-foundation_v2.49.5/packages/web-components/fast-foundation/src/select/select.form-associated.ts
+/* eslint-disable max-classes-per-file */
+import { FormAssociated, ListboxElement } from '@microsoft/fast-foundation';
+// eslint-disable-next-line jsdoc/require-jsdoc
+class Select extends ListboxElement {
+}
+/**
+ * A form-associated base class for the Select component. This was copied from the
+ * FAST FormAssociatedSelect (which is not exported by fast-foundation)
+ *
+ * @internal
+ */
+export class FormAssociatedSelect extends FormAssociated(Select) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement('select');
+    }
+}
+//# sourceMappingURL=select-form-associated.js.map

package/dist/esm/select/models/select-form-associated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-form-associated.js","sourceRoot":"","sources":["../../../../src/select/models/select-form-associated.ts"],"names":[],"mappings":"AAAA,qKAAqK;AACrK,yCAAyC;AACzC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5E,+CAA+C;AAC/C,MAAM,MAAO,SAAQ,cAAc;CAAG;AAItC;;;;;GAKG;AACH,MAAM,OAAO,oBAAqB,SAAQ,cAAc,CAAC,MAAM,CAAC;IAAhE;;QACW,UAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACpD,CAAC;CAAA","sourcesContent":["// Based on: https://github.com/microsoft/fast/blob/%40microsoft/fast-foundation_v2.49.5/packages/web-components/fast-foundation/src/select/select.form-associated.ts\n/* eslint-disable max-classes-per-file */\nimport { FormAssociated, ListboxElement } from '@microsoft/fast-foundation';\n\n// eslint-disable-next-line jsdoc/require-jsdoc\nclass Select extends ListboxElement {}\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\ninterface Select extends FormAssociated {}\n\n/**\n * A form-associated base class for the Select component. This was copied from the\n * FAST FormAssociatedSelect (which is not exported by fast-foundation)\n *\n * @internal\n */\nexport class FormAssociatedSelect extends FormAssociated(Select) {\n    public proxy = document.createElement('select');\n}\n"]}

package/dist/esm/select/styles.js

@@ -1,9 +1,14 @@
 import { css } from '@microsoft/fast-element';
+import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { styles as dropdownStyles } from '../patterns/dropdown/styles';
 import { styles as errorStyles } from '../patterns/error/styles';
-import { borderWidth } from '../theme-provider/design-tokens';
+import { borderRgbPartialColor, borderWidth, controlHeight, mediumPadding, placeholderFontColor, smallPadding } from '../theme-provider/design-tokens';
 import { appearanceBehavior } from '../utilities/style/appearance';
 import { DropdownAppearance } from './types';
+import { focusVisible } from '../utilities/style/focus';
+import { themeBehavior } from '../utilities/style/theme';
+import { Theme } from '../theme-provider/types';
+import { hexToRgbaCssColor } from '../utilities/style/colors';
 export const styles = css `
     ${dropdownStyles}
     ${errorStyles}
@@ -26,10 +31,93 @@ export const styles = css `
     [part='end'] {
         display: contents;
     }
+
+    .listbox {
+        overflow-x: clip;
+    }
+
+    .listbox.empty slot {
+        display: none;
+    }
+
+    .listbox.above {
+        flex-flow: column-reverse;
+    }
+
+    .filter-field {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: ${controlHeight};
+        background: transparent;
+    }
+
+    .filter-field::before {
+        content: '';
+        position: absolute;
+        height: 0px;
+        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;
+        bottom: calc(${controlHeight} + ${smallPadding} - ${borderWidth});
+    }
+
+    .filter-field.above::before {
+        width: calc(100% - (2 * ${borderWidth}));
+    }
+
+    .filter-field::after {
+        content: '';
+        position: absolute;
+        height: 0px;
+        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;
+        top: calc(${controlHeight} + ${smallPadding} - ${borderWidth});
+    }
+
+    .filter-field:not(.above)::after {
+        width: calc(100% - (2 * ${borderWidth}));
+    }
+
+    .filter-icon {
+        padding-left: ${smallPadding};
+    }
+
+    .filter-input {
+        background: transparent;
+        border: none;
+        color: inherit;
+        font: inherit;
+        height: var(--ni-nimble-control-height);
+        padding: 0 ${smallPadding} 0 ${mediumPadding};
+        width: 100%;
+    }
+
+    .filter-input::placeholder {
+        color: ${placeholderFontColor};
+    }
+
+    .filter-input${focusVisible} {
+        outline: 0px;
+    }
+
+    .scrollable-region {
+        overflow: auto;
+    }
+
+    .no-results-label {
+        color: ${placeholderFontColor};
+        height: ${controlHeight};
+        display: inline-flex;
+        align-items: center;
+        padding: ${smallPadding} ${mediumPadding};
+    }
 `.withBehaviors(appearanceBehavior(DropdownAppearance.block, css `
             :host([error-visible]) .control {
                 border-bottom-width: ${borderWidth};
                 padding-bottom: 0;
             }
+        `), themeBehavior(Theme.color, css `
+            .filter-field,
+            .no-results-label {
+                background: ${hexToRgbaCssColor(White, 0.15)};
+            }
         `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/select/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;MAEX;AACE;gGACgG,CAAC,EACrG;;;;;;;;;;;;;;;;CAgBH,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EACH,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,aAAa,EACb,oBAAoB,EACpB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;MAEX;AACE;gGACgG,CAAC,EACrG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAiCc,aAAa;;;;;;;;8BAQD,qBAAqB;uBAC5B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIrC,WAAW;;;;;;;8BAOf,qBAAqB;oBAC/B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIlC,WAAW;;;;wBAIrB,YAAY;;;;;;;;;qBASf,YAAY,MAAM,aAAa;;;;;iBAKnC,oBAAoB;;;mBAGlB,YAAY;;;;;;;;;iBASd,oBAAoB;kBACnB,aAAa;;;mBAGZ,YAAY,IAAI,aAAa;;CAE/C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;8BAGmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport {\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    mediumPadding,\n    placeholderFontColor,\n    smallPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from './types';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\n\nexport const styles = css`\n    ${dropdownStyles}\n    ${errorStyles}\n\n    ${\n        /* We are using flex `order` to define the visual ordering of the selected value,\n         error icon, and dropdown arrow because they are not \"interactive\" i.e. part of the tab order */ ''\n    }\n    [part='selected-value'] {\n        order: 1;\n    }\n\n    [part='indicator'] {\n        order: 3;\n    }\n\n    .error-icon {\n        order: 2;\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    .listbox {\n        overflow-x: clip;\n    }\n\n    .listbox.empty slot {\n        display: none;\n    }\n\n    .listbox.above {\n        flex-flow: column-reverse;\n    }\n\n    .filter-field {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        height: ${controlHeight};\n        background: transparent;\n    }\n\n    .filter-field::before {\n        content: '';\n        position: absolute;\n        height: 0px;\n        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n        bottom: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n    }\n\n    .filter-field.above::before {\n        width: calc(100% - (2 * ${borderWidth}));\n    }\n\n    .filter-field::after {\n        content: '';\n        position: absolute;\n        height: 0px;\n        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n        top: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n    }\n\n    .filter-field:not(.above)::after {\n        width: calc(100% - (2 * ${borderWidth}));\n    }\n\n    .filter-icon {\n        padding-left: ${smallPadding};\n    }\n\n    .filter-input {\n        background: transparent;\n        border: none;\n        color: inherit;\n        font: inherit;\n        height: var(--ni-nimble-control-height);\n        padding: 0 ${smallPadding} 0 ${mediumPadding};\n        width: 100%;\n    }\n\n    .filter-input::placeholder {\n        color: ${placeholderFontColor};\n    }\n\n    .filter-input${focusVisible} {\n        outline: 0px;\n    }\n\n    .scrollable-region {\n        overflow: auto;\n    }\n\n    .no-results-label {\n        color: ${placeholderFontColor};\n        height: ${controlHeight};\n        display: inline-flex;\n        align-items: center;\n        padding: ${smallPadding} ${mediumPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            :host([error-visible]) .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .filter-field,\n            .no-results-label {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/select/template.js

@@ -3,6 +3,10 @@ import { endSlotTemplate, Listbox, startSlotTemplate } from '@microsoft/fast-fou
 import { anchoredRegionTag } from '../anchored-region';
 import { DropdownPosition } from '../patterns/dropdown/types';
 import { overflow } from '../utilities/directive/overflow';
+import { iconMagnifyingGlassTag } from '../icons/magnifying-glass';
+import { filterNoResultsLabel, filterSearchLabel } from '../label-provider/core/label-tokens';
+import { FilterMode } from './types';
+/* eslint-disable @typescript-eslint/indent */
 // prettier-ignore
 export const template = (context, definition) => html `
     <template
@@ -11,11 +15,9 @@ export const template = (context, definition) => html `
     x.collapsible && x.open && 'open',
     x.disabled && 'disabled',
     x.collapsible && x.position,
-]
-    .filter(Boolean)
-    .join(' ')}"
-        aria-activedescendant="${x => x.ariaActiveDescendant}"
-        aria-controls="${x => x.ariaControls}"
+].filter(Boolean).join(' ')}"
+        aria-activedescendant="${x => (x.filterMode === FilterMode.none ? x.ariaActiveDescendant : null)}"
+        aria-controls="${x => (x.filterMode === FilterMode.none ? x.ariaControls : null)}"
         aria-disabled="${x => x.ariaDisabled}"
         aria-expanded="${x => x.ariaExpanded}"
         aria-haspopup="${x => (x.collapsible ? 'listbox' : null)}"
@@ -24,34 +26,36 @@ export const template = (context, definition) => html `
         role="combobox"
         tabindex="${x => (!x.disabled ? '0' : null)}"
         @click="${(x, c) => x.clickHandler(c.event)}"
+        @change="${x => x.changeValueHandler()}"
+        @contentchange="${x => x.updateDisplayValue()}"
         @focusin="${(x, c) => x.focusinHandler(c.event)}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
         @mousedown="${(x, c) => x.mousedownHandler(c.event)}"
     >
         ${when(x => x.collapsible, html `
-                <div
-                    class="control"
-                    part="control"
-                    ?disabled="${x => x.disabled}"
-                    ${ref('control')}
-                >
-                    ${startSlotTemplate(context, definition)}
-                    <slot name="button-container">
-                        <div class="selected-value" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
-                            <slot name="selected-value">${x => x.displayValue}</slot>
-                        </div>
-                        <div aria-hidden="true" class="indicator" part="indicator">
-                            <slot name="indicator">
-                                ${definition.indicator || ''}
-                            </slot>
-                        </div>
-                    </slot>
-                    ${endSlotTemplate(context, definition)}
-                </div>
-                `)}
+            <div
+                class="control"
+                part="control"
+                ?disabled="${x => x.disabled}"
+                ${ref('control')}
+            >
+                ${startSlotTemplate(context, definition)}
+                <slot name="button-container">
+                    <div class="selected-value" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
+                        <slot name="selected-value">${x => x.displayValue}</slot>
+                    </div>
+                    <div aria-hidden="true" class="indicator" part="indicator">
+                        <slot name="indicator">
+                            ${definition.indicator || ''}
+                        </slot>
+                    </div>
+                </slot>
+                ${endSlotTemplate(context, definition)}
+            </div>
+            `)}
         <${anchoredRegionTag}
-            ${ref('region')}
+            ${ref('anchoredRegion')}
             class="anchored-region"
             fixed-placement
             auto-update-mode="auto"
@@ -60,22 +64,52 @@ export const template = (context, definition) => html `
             horizontal-default-position="center"
             horizontal-positioning-mode="locktodefault"
             horizontal-scaling="anchor"
+            @loaded="${x => x.regionLoadedHandler()}"
             ?hidden="${x => (x.collapsible ? !x.open : false)}">
-            <div
-                class="listbox"
-                id="${x => x.listboxId}"
-                part="listbox"
-                role="listbox"
-                ?disabled="${x => x.disabled}"
-                ${ref('listbox')}
-            >
-                <slot
-                    ${slotted({
+            <div class="listbox-background">
+                <div
+                    class="
+                        listbox 
+                        ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}
+                        ${x => x.positionAttribute}
+                    "
+                    id="${x => x.listboxId}"
+                    part="listbox"
+                    role="listbox"
+                    ?disabled="${x => x.disabled}"
+                    ${ref('listbox')}
+                >
+                    ${when(x => x.filterMode !== FilterMode.none, html `
+                        <div class="filter-field ${x => x.positionAttribute}">
+                            <${iconMagnifyingGlassTag} class="filter-icon"></${iconMagnifyingGlassTag}>
+                            <input
+                                ${ref('filterInput')}
+                                class="filter-input"
+                                aria-controls="${x => x.ariaControls}"
+                                aria-activedescendant="${x => x.ariaActiveDescendant}"
+                                @input="${(x, c) => x.inputHandler(c.event)}"
+                                @click="${(x, c) => x.inputClickHandler(c.event)}"
+                                placeholder="${x => filterSearchLabel.getValueFor(x)}"
+                                value="${x => x.filter}"
+                            />
+                        </div>
+                    `)}
+                    <div ${ref('scrollableRegion')}
+                        class="scrollable-region">
+                        <slot
+                            ${slotted({
     filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),
     flatten: true,
     property: 'slottedOptions',
 })}
-                ></slot>
+                        ></slot>
+                    </div>
+                    ${when(x => (x.filterMode !== FilterMode.none && x.filteredOptions.length === 0), html `
+                        <span class="no-results-label ${x => x.positionAttribute}">
+                            ${x => filterNoResultsLabel.getValueFor(x)}
+                        </span>
+                    `)}
+                </div>
             </div>
         </${anchoredRegionTag}>
     </template>

package/dist/esm/select/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/select/template.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/select/template.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    html,\n    ref,\n    slotted,\n    ViewTemplate,\n    when\n} from '@microsoft/fast-element';\nimport {\n    endSlotTemplate,\n    FoundationElementTemplate,\n    Listbox,\n    SelectOptions,\n    startSlotTemplate\n} from '@microsoft/fast-foundation';\nimport type { Select } from '.';\nimport { anchoredRegionTag } from '../anchored-region';\nimport { DropdownPosition } from '../patterns/dropdown/types';\nimport { overflow } from '../utilities/directive/overflow';\nimport { iconMagnifyingGlassTag } from '../icons/magnifying-glass';\nimport {\n    filterNoResultsLabel,\n    filterSearchLabel\n} from '../label-provider/core/label-tokens';\nimport { FilterMode } from './types';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<Select>,\nSelectOptions\n> = (context, definition) => html<Select>`\n    <template\n        class=\"${x => [\n                x.collapsible && 'collapsible',\n                x.collapsible && x.open && 'open',\n                x.disabled && 'disabled',\n                x.collapsible && x.position,\n            ].filter(Boolean).join(' ')}\"\n        aria-activedescendant=\"${x => (x.filterMode === FilterMode.none ? x.ariaActiveDescendant : null)}\"\n        aria-controls=\"${x => (x.filterMode === FilterMode.none ? x.ariaControls : null)}\"\n        aria-disabled=\"${x => x.ariaDisabled}\"\n        aria-expanded=\"${x => x.ariaExpanded}\"\n        aria-haspopup=\"${x => (x.collapsible ? 'listbox' : null)}\"\n        aria-multiselectable=\"${x => x.ariaMultiSelectable}\"\n        ?open=\"${x => x.open}\"\n        role=\"combobox\"\n        tabindex=\"${x => (!x.disabled ? '0' : null)}\"\n        @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n        @change=\"${x => x.changeValueHandler()}\"\n        @contentchange=\"${x => x.updateDisplayValue()}\"\n        @focusin=\"${(x, c) => x.focusinHandler(c.event as FocusEvent)}\"\n        @focusout=\"${(x, c) => x.focusoutHandler(c.event as FocusEvent)}\"\n        @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n        @mousedown=\"${(x, c) => x.mousedownHandler(c.event as MouseEvent)}\"\n    >\n        ${when(x => x.collapsible, html<Select>`\n            <div\n                class=\"control\"\n                part=\"control\"\n                ?disabled=\"${x => x.disabled}\"\n                ${ref('control')}\n            >\n                ${startSlotTemplate(context, definition)}\n                <slot name=\"button-container\">\n                    <div class=\"selected-value\" part=\"selected-value\" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>\n                        <slot name=\"selected-value\">${x => x.displayValue}</slot>\n                    </div>\n                    <div aria-hidden=\"true\" class=\"indicator\" part=\"indicator\">\n                        <slot name=\"indicator\">\n                            ${definition.indicator || ''}\n                        </slot>\n                    </div>\n                </slot>\n                ${endSlotTemplate(context, definition)}\n            </div>\n            `)\n        }\n        <${anchoredRegionTag}\n            ${ref('anchoredRegion')}\n            class=\"anchored-region\"\n            fixed-placement\n            auto-update-mode=\"auto\"\n            vertical-default-position=\"${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}\"\n            vertical-positioning-mode=\"${x => (!x.positionAttribute ? 'dynamic' : 'locktodefault')}\"\n            horizontal-default-position=\"center\"\n            horizontal-positioning-mode=\"locktodefault\"\n            horizontal-scaling=\"anchor\"\n            @loaded=\"${x => x.regionLoadedHandler()}\"\n            ?hidden=\"${x => (x.collapsible ? !x.open : false)}\">\n            <div class=\"listbox-background\">\n                <div\n                    class=\"\n                        listbox \n                        ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}\n                        ${x => x.positionAttribute}\n                    \"\n                    id=\"${x => x.listboxId}\"\n                    part=\"listbox\"\n                    role=\"listbox\"\n                    ?disabled=\"${x => x.disabled}\"\n                    ${ref('listbox')}\n                >\n                    ${when(x => x.filterMode !== FilterMode.none, html<Select>`\n                        <div class=\"filter-field ${x => x.positionAttribute}\">\n                            <${iconMagnifyingGlassTag} class=\"filter-icon\"></${iconMagnifyingGlassTag}>\n                            <input\n                                ${ref('filterInput')}\n                                class=\"filter-input\"\n                                aria-controls=\"${x => x.ariaControls}\"\n                                aria-activedescendant=\"${x => x.ariaActiveDescendant}\"\n                                @input=\"${(x, c) => x.inputHandler(c.event as InputEvent)}\"\n                                @click=\"${(x, c) => x.inputClickHandler(c.event as MouseEvent)}\"\n                                placeholder=\"${x => filterSearchLabel.getValueFor(x)}\"\n                                value=\"${x => x.filter}\"\n                            />\n                        </div>\n                    `)}\n                    <div ${ref('scrollableRegion')}\n                        class=\"scrollable-region\">\n                        <slot\n                            ${slotted({\n                                filter: (n: Node) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),\n                                flatten: true,\n                                property: 'slottedOptions',\n                            })}\n                        ></slot>\n                    </div>\n                    ${when(x => (x.filterMode !== FilterMode.none && x.filteredOptions.length === 0), html<Select>`\n                        <span class=\"no-results-label ${x => x.positionAttribute}\">\n                            ${x => filterNoResultsLabel.getValueFor(x)}\n                        </span>\n                    `)}\n                </div>\n            </div>\n        </${anchoredRegionTag}>\n    </template>\n`;\n"]}

package/dist/esm/select/testing/select.pageobject.d.ts

@@ -0,0 +1,32 @@
+import type { Select } from '..';
+import type { ListOption } from '../../list-option';
+/**
+ * Page object for the `nimble-select` component to provide consistent ways
+ * of querying and interacting with the component during tests.
+ */
+export declare class SelectPageObject {
+    private readonly selectElement;
+    constructor(selectElement: Select);
+    openAndSetFilterText(filterText: string): Promise<void>;
+    closeDropdown(): Promise<void>;
+    setOptions(options: ListOption[]): Promise<void>;
+    getFilteredOptions(): ListOption[];
+    getSelectedOption(): ListOption | null;
+    /**
+     * Either opens or closes the dropdown depending on its current state
+     */
+    clickSelect(): Promise<void>;
+    clickSelectedItem(): void;
+    clickFilterInput(): Promise<void>;
+    clickOption(index: number): void;
+    clickAway(): Promise<void>;
+    pressEnterKey(): void;
+    pressEscapeKey(): void;
+    pressArrowDownKey(): void;
+    pressSpaceKey(): Promise<void>;
+    isDropdownVisible(): boolean;
+    isFilterInputVisible(): boolean;
+    isNoResultsLabelVisible(): boolean;
+    getFilterInputText(): string;
+    private getFilterInput;
+}

package/dist/esm/select/testing/select.pageobject.js

@@ -0,0 +1,128 @@
+import { keyEnter, keyEscape, keyArrowDown, keySpace } from '@microsoft/fast-web-utilities';
+import { waitForUpdatesAsync } from '../../testing/async-helpers';
+import { FilterMode } from '../types';
+/**
+ * Page object for the `nimble-select` component to provide consistent ways
+ * of querying and interacting with the component during tests.
+ */
+export class SelectPageObject {
+    constructor(selectElement) {
+        this.selectElement = selectElement;
+    }
+    async openAndSetFilterText(filterText) {
+        if (this.selectElement.filterMode === FilterMode.none) {
+            throw new Error('Can not set filter text with filterMode set to "none".');
+        }
+        await this.clickSelect();
+        const filterInput = this.getFilterInput();
+        if (filterInput) {
+            filterInput.value = filterText;
+        }
+        await waitForUpdatesAsync();
+        const inputEvent = new InputEvent('input');
+        filterInput?.dispatchEvent(inputEvent);
+        await waitForUpdatesAsync();
+    }
+    async closeDropdown() {
+        this.selectElement.open = false;
+        await waitForUpdatesAsync();
+    }
+    async setOptions(options) {
+        options.forEach(option => {
+            option.setAttribute('role', 'option');
+        });
+        this.selectElement.slottedOptions = options;
+        await waitForUpdatesAsync();
+    }
+    getFilteredOptions() {
+        return this.selectElement.filteredOptions;
+    }
+    getSelectedOption() {
+        return this.selectElement.selectedOptions[0] ?? null;
+    }
+    /**
+     * Either opens or closes the dropdown depending on its current state
+     */
+    async clickSelect() {
+        this.selectElement.dispatchEvent(new Event('click'));
+        await waitForUpdatesAsync();
+    }
+    clickSelectedItem() {
+        if (!this.selectElement.open) {
+            throw new Error('Select must be open to click selectedItem');
+        }
+        this.clickOption(this.selectElement.selectedIndex);
+    }
+    async clickFilterInput() {
+        if (!this.selectElement.filterInput) {
+            throw new Error('Filter input is not available.');
+        }
+        this.selectElement.filterInput.click();
+        await waitForUpdatesAsync();
+    }
+    clickOption(index) {
+        if (!this.selectElement.open) {
+            throw new Error('Select must be open to click selectedItem');
+        }
+        if (index >= this.selectElement.options.length) {
+            throw new Error('"index" greater than number of current displayed options');
+        }
+        const option = this.selectElement.options[index];
+        option.scrollIntoView();
+        const optionRect = option.getClientRects()[0];
+        const clickEvent = new MouseEvent('click', {
+            clientY: optionRect.y + optionRect.height / 2,
+            clientX: optionRect.width / 2,
+            bubbles: true
+        });
+        option.dispatchEvent(clickEvent);
+    }
+    async clickAway() {
+        this.selectElement.dispatchEvent(new Event('focusout'));
+        await waitForUpdatesAsync();
+    }
+    pressEnterKey() {
+        this.selectElement.dispatchEvent(new KeyboardEvent('keydown', { key: keyEnter }));
+    }
+    pressEscapeKey() {
+        this.selectElement.dispatchEvent(new KeyboardEvent('keydown', { key: keyEscape }));
+    }
+    pressArrowDownKey() {
+        this.selectElement.dispatchEvent(new KeyboardEvent('keydown', { key: keyArrowDown }));
+    }
+    async pressSpaceKey() {
+        const alreadyOpen = this.selectElement.open;
+        this.selectElement.dispatchEvent(new KeyboardEvent('keydown', { key: keySpace, bubbles: true }));
+        await waitForUpdatesAsync();
+        if (this.selectElement.filterMode === FilterMode.standard
+            && alreadyOpen) {
+            // add space to end of current filter
+            const filterValue = `${this.selectElement.filterInput?.value ?? ''} `;
+            if (this.selectElement.filterInput) {
+                this.selectElement.filterInput.value = filterValue;
+            }
+            this.selectElement.filterInput?.dispatchEvent(new InputEvent('input', { inputType: 'insertText' }));
+        }
+        await waitForUpdatesAsync();
+    }
+    isDropdownVisible() {
+        return (this.selectElement.shadowRoot?.querySelector('.listbox') !== null);
+    }
+    isFilterInputVisible() {
+        return (this.selectElement.shadowRoot?.querySelector('.filter-field')
+            !== null);
+    }
+    isNoResultsLabelVisible() {
+        return (this.selectElement.shadowRoot?.querySelector('.no-results-label') !== null);
+    }
+    getFilterInputText() {
+        return this.getFilterInput()?.value ?? '';
+    }
+    getFilterInput() {
+        if (this.selectElement.filterMode === FilterMode.none) {
+            throw new Error('Select has filterMode of "none" so there is no filter input');
+        }
+        return this.selectElement.shadowRoot?.querySelector('.filter-input');
+    }
+}
+//# sourceMappingURL=select.pageobject.js.map