@vscode-elements/elements 2.0.0-pre.1 → 2.0.0-pre.3

package/dist/includes/vscode-select/vscode-select-base.js

@@ -4,20 +4,35 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, nothing } from 'lit';
-import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { html, render, nothing } from 'lit';
+import { property, queryAssignedElements, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { when } from 'lit/directives/when.js';
 import '../../vscode-button/index.js';
 import '../../vscode-option/index.js';
-import { filterOptionsByPattern } from './helpers.js';
+import { stylePropertyMap } from '../style-property-map.js';
 import { VscElement } from '../VscElement.js';
-const VISIBLE_OPTS = 10;
-const OPT_HEIGHT = 22;
-const LIST_HEIGHT = VISIBLE_OPTS + OPT_HEIGHT + 2;
+import { filterOptionsByPattern, highlightRanges } from './helpers.js';
+import { OptionListController } from './OptionListController.js';
+import { checkIcon } from './template-elements.js';
+import '../../vscode-scrollable/vscode-scrollable.js';
+export const VISIBLE_OPTS = 10;
+export const OPT_HEIGHT = 22;
 /**
  * @cssprop --dropdown-z-index - workaround for dropdown z-index issues
  */
 export class VscodeSelectBase extends VscElement {
+    /**
+     * Options can be filtered by typing into a text input field.
+     */
+    set combobox(enabled) {
+        this._opts.comboboxMode = enabled;
+    }
+    get combobox() {
+        return this._opts.comboboxMode;
+    }
     /**
      * The element cannot be used and is not focusable.
      */
@@ -54,26 +69,31 @@ export class VscodeSelectBase extends VscElement {
             'startsWith',
             'startsWithPerTerm',
         ];
+        let fm;
         if (validValues.includes(val)) {
-            this._filter = val;
+            // this._filter = val as FilterMethod;
+            fm = val;
         }
         else {
-            this._filter = 'fuzzy';
+            // this._filter = 'fuzzy';
+            // eslint-disable-next-line no-console
             console.warn(`[VSCode Webview Elements] Invalid filter: "${val}", fallback to default. Valid values are: "contains", "fuzzy", "startsWith", "startsWithPerm".`, this);
+            fm = 'fuzzy';
         }
+        this._opts.filterMethod = fm;
     }
     get filter() {
-        return this._filter;
+        return this._opts.filterMethod;
     }
     /**
      * @attr [options=[]]
      * @type {Option[]}
      */
     set options(opts) {
-        this._options = opts.map((op, index) => ({ ...op, index }));
+        this._opts.populate(opts);
     }
     get options() {
-        return this._options.map(({ label, value, description, selected, disabled }) => ({
+        return this._opts.options.map(({ label, value, description, selected, disabled }) => ({
             label,
             value,
             description,
@@ -83,12 +103,12 @@ export class VscodeSelectBase extends VscElement {
     }
     constructor() {
         super();
-        /** @internal */
-        this.ariaExpanded = 'false';
+        this.creatable = false;
         /**
-         * Options can be filtered by typing into a text input field.
+         * Accessible label for screen readers. When a `<vscode-label>` is connected
+         * to the component, it will be filled automatically.
          */
-        this.combobox = false;
+        this.label = '';
         /**
          * Sets the invalid state manually.
          */
@@ -105,26 +125,17 @@ export class VscodeSelectBase extends VscElement {
          * Position of the options list when visible.
          */
         this.position = 'below';
-        /** @internal */
-        this.tabIndex = 0;
-        this._activeIndex = -1;
+        this._opts = new OptionListController(this);
+        this._firstUpdateCompleted = false;
         this._currentDescription = '';
         this._filter = 'fuzzy';
-        this._filterPattern = '';
-        this._selectedIndex = -1;
         this._selectedIndexes = [];
         this._options = [];
         this._value = '';
         this._values = [];
-        this._listScrollTop = 0;
-        /** @internal */
-        this._multiple = false;
-        /**
-         * @internal
-         * Quick-searchable map for searching a value in the options list.
-         * Keys are the options values, values are the option indexes.
-         */
-        this._valueOptionIndexMap = {};
+        this._isPlaceholderOptionActive = false;
+        this._isBeingFiltered = false;
+        this._optionListScrollPos = 0;
         this._isHoverForbidden = false;
         this._disabled = false;
         this._originalTabIndex = undefined;
@@ -132,14 +143,43 @@ export class VscodeSelectBase extends VscElement {
             const path = event.composedPath();
             const found = path.findIndex((et) => et === this);
             if (found === -1) {
-                this._toggleDropdown(false);
-                window.removeEventListener('click', this._onClickOutside);
+                this.open = false;
             }
         };
         this._onMouseMove = () => {
             this._isHoverForbidden = false;
             window.removeEventListener('mousemove', this._onMouseMove);
         };
+        this._onOptionListScroll = (ev) => {
+            this._optionListScrollPos = ev.detail;
+        };
+        this._onComponentKeyDown = (event) => {
+            if ([' ', 'ArrowUp', 'ArrowDown', 'Escape'].includes(event.key)) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+            if (event.key === 'Enter') {
+                this._onEnterKeyDown(event);
+            }
+            if (event.key === ' ') {
+                this._onSpaceKeyDown();
+            }
+            if (event.key === 'Escape') {
+                this._onEscapeKeyDown();
+            }
+            if (event.key === 'ArrowUp') {
+                this._onArrowUpKeyDown();
+            }
+            if (event.key === 'ArrowDown') {
+                this._onArrowDownKeyDown();
+            }
+        };
+        this._onComponentFocus = () => {
+            this.focused = true;
+        };
+        this._onComponentBlur = () => {
+            this.focused = false;
+        };
         this.addEventListener('vsc-option-state-change', (ev) => {
             ev.stopPropagation();
             this._setStateFromSlottedElements();
@@ -151,6 +191,7 @@ export class VscodeSelectBase extends VscElement {
         this.addEventListener('keydown', this._onComponentKeyDown);
         this.addEventListener('focus', this._onComponentFocus);
         this.addEventListener('blur', this._onComponentBlur);
+        this._setAutoFocus();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -158,23 +199,67 @@ export class VscodeSelectBase extends VscElement {
         this.removeEventListener('focus', this._onComponentFocus);
         this.removeEventListener('blur', this._onComponentBlur);
     }
+    firstUpdated(_changedProperties) {
+        this._firstUpdateCompleted = true;
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('required') && this._firstUpdateCompleted) {
+            this._manageRequired();
+        }
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('open')) {
+            if (this.open) {
+                this._opts.activateDefault();
+                this._scrollActiveElementToTop();
+                window.addEventListener('click', this._onClickOutside);
+            }
+            else {
+                window.removeEventListener('click', this._onClickOutside);
+            }
+        }
+    }
     get _filteredOptions() {
-        if (!this.combobox || this._filterPattern === '') {
+        if (!this.combobox || this._opts.filterPattern === '') {
             return this._options;
         }
-        return filterOptionsByPattern(this._options, this._filterPattern, this._filter);
+        return filterOptionsByPattern(this._options, this._opts.filterPattern, this._filter);
     }
-    get _currentOptions() {
-        return this.combobox ? this._filteredOptions : this._options;
+    _setAutoFocus() {
+        if (this.hasAttribute('autofocus')) {
+            if (this.tabIndex < 0) {
+                this.tabIndex = 0;
+            }
+            if (this.combobox) {
+                this.updateComplete.then(() => {
+                    this.shadowRoot
+                        ?.querySelector('.combobox-input')
+                        .focus();
+                });
+            }
+            else {
+                this.updateComplete.then(() => {
+                    this.shadowRoot
+                        ?.querySelector('.select-face')
+                        .focus();
+                });
+            }
+        }
     }
+    get _isSuggestedOptionVisible() {
+        if (!(this.combobox && this.creatable)) {
+            return false;
+        }
+        const filterPatternExistsAsOption = this._opts.getOptionByValue(this._opts.filterPattern) !== null;
+        const filtered = this._opts.filterPattern.length > 0;
+        return !filterPatternExistsAsOption && filtered;
+    }
+    _manageRequired() { }
     _setStateFromSlottedElements() {
-        const options = [];
-        let nextIndex = 0;
         const optionElements = this._assignedOptions ?? [];
-        const selectedIndexes = [];
-        const values = [];
-        this._valueOptionIndexMap = {};
-        optionElements.forEach((el, i) => {
+        this._opts.clear();
+        optionElements.forEach((el) => {
             const { innerText, description, disabled } = el;
             const value = typeof el.value === 'string' ? el.value : innerText.trim();
             const selected = el.selected ?? false;
@@ -183,81 +268,61 @@ export class VscodeSelectBase extends VscElement {
                 value,
                 description,
                 selected,
-                index: nextIndex,
                 disabled,
             };
-            nextIndex = options.push(op);
-            if (selected && !this._multiple) {
-                this._activeIndex = i;
-            }
-            if (selected) {
-                selectedIndexes.push(options.length - 1);
-                values.push(value);
-            }
-            this._valueOptionIndexMap[op.value] = op.index;
+            this._opts.add(op);
         });
-        this._options = options;
-        if (selectedIndexes.length > 0) {
-            this._selectedIndex = selectedIndexes[0];
-            this._selectedIndexes = selectedIndexes;
-            this._value = values[0];
-            this._values = values;
-        }
-        if (!this._multiple && !this.combobox && selectedIndexes.length === 0) {
-            this._selectedIndex = this._options.length > 0 ? 0 : -1;
-        }
     }
-    async _toggleDropdown(visible) {
-        this.open = visible;
-        this.ariaExpanded = String(visible);
-        if (visible && !this._multiple && !this.combobox) {
-            this._activeIndex = this._selectedIndex;
-            if (this._activeIndex > VISIBLE_OPTS - 1) {
-                await this.updateComplete;
-                this._listElement.scrollTop = Math.floor(this._activeIndex * OPT_HEIGHT);
-            }
-        }
-        if (visible) {
-            window.addEventListener('click', this._onClickOutside);
-        }
-        else {
-            window.removeEventListener('click', this._onClickOutside);
-        }
+    _createSuggestedOption() {
+        const nextSelectedIndex = this._opts.numOptions;
+        const op = document.createElement('vscode-option');
+        op.value = this._opts.filterPattern;
+        render(this._opts.filterPattern, op);
+        this.appendChild(op);
+        return nextSelectedIndex;
     }
     _dispatchChangeEvent() {
-        if (!this._multiple) {
-            /** @deprecated */
-            this.dispatchEvent(new CustomEvent('vsc-change', {
-                detail: {
-                    selectedIndex: this._selectedIndex,
-                    value: this._value,
-                },
-            }));
-        }
-        else {
-            /** @deprecated */
-            this.dispatchEvent(new CustomEvent('vsc-change', {
-                detail: {
-                    selectedIndexes: this._selectedIndexes,
-                    value: this._values,
-                },
-            }));
-        }
         this.dispatchEvent(new Event('change'));
         this.dispatchEvent(new Event('input'));
     }
-    _onFaceClick() {
-        this._toggleDropdown(!this.open);
-        if (this._multiple) {
-            this._activeIndex = 0;
-        }
-    }
+    async _createAndSelectSuggestedOption() { }
     _toggleComboboxDropdown() {
-        this._filterPattern = '';
-        this._toggleDropdown(!this.open);
-        if (this._multiple) {
-            this._activeIndex = -1;
+        this._opts.filterPattern = '';
+        this.open = !this.open;
+    }
+    _scrollActiveElementToTop() {
+        this._optionListScrollPos = Math.floor(this._opts.relativeActiveIndex * OPT_HEIGHT);
+    }
+    async _adjustOptionListScrollPos(direction, optionIndex) {
+        let numOpts = this._opts.numOfVisibleOptions;
+        const suggestedOptionVisible = this._isSuggestedOptionVisible;
+        if (suggestedOptionVisible) {
+            numOpts += 1;
+        }
+        if (numOpts <= VISIBLE_OPTS) {
+            return;
         }
+        this._isHoverForbidden = true;
+        window.addEventListener('mousemove', this._onMouseMove);
+        const ulScrollTop = this._optionListScrollPos;
+        const liPosY = optionIndex * OPT_HEIGHT;
+        const fullyVisible = liPosY >= ulScrollTop &&
+            liPosY <= ulScrollTop + VISIBLE_OPTS * OPT_HEIGHT - OPT_HEIGHT;
+        if (direction === 'down') {
+            if (!fullyVisible) {
+                this._optionListScrollPos =
+                    optionIndex * OPT_HEIGHT - (VISIBLE_OPTS - 1) * OPT_HEIGHT;
+            }
+        }
+        if (direction === 'up') {
+            if (!fullyVisible) {
+                this._optionListScrollPos = Math.floor(this._opts.relativeActiveIndex * OPT_HEIGHT);
+            }
+        }
+    }
+    //#region event handlers
+    _onFaceClick() {
+        this.open = !this.open;
     }
     _onComboboxButtonClick() {
         this._toggleComboboxDropdown();
@@ -275,130 +340,97 @@ export class VscodeSelectBase extends VscElement {
         if (!el.matches('.option')) {
             return;
         }
-        this._activeIndex = Number(this.combobox ? el.dataset.filteredIndex : el.dataset.index);
-    }
-    _onEnterKeyDown() {
-        const list = this.combobox ? this._filteredOptions : this._options;
-        const showDropdownNext = !this.open;
-        this._toggleDropdown(showDropdownNext);
-        if (!this._multiple &&
-            !showDropdownNext &&
-            this._selectedIndex !== this._activeIndex) {
-            this._selectedIndex =
-                this._activeIndex > -1 ? list[this._activeIndex].index : -1;
-            this._value =
-                this._selectedIndex > -1
-                    ? this._options[this._selectedIndex].value
-                    : '';
-            this._dispatchChangeEvent();
+        if (el.matches('.placeholder')) {
+            this._isPlaceholderOptionActive = true;
+            this._opts.activeIndex = -1;
         }
-        if (this.combobox) {
-            if (!this._multiple && !showDropdownNext) {
-                this._selectedIndex =
-                    this._activeIndex > -1
-                        ? this._filteredOptions[this._activeIndex].index
-                        : -1;
-            }
-            if (!this._multiple && showDropdownNext) {
-                this.updateComplete.then(() => {
-                    this._scrollActiveElementToTop();
-                });
-            }
-        }
-        if (this._multiple && showDropdownNext) {
-            this._activeIndex = 0;
+        else {
+            this._isPlaceholderOptionActive = false;
+            this._opts.activeIndex = +el.dataset.index;
+        }
+    }
+    _onPlaceholderOptionMouseOut() {
+        this._isPlaceholderOptionActive = false;
+    }
+    _onNoOptionsClick(ev) {
+        ev.stopPropagation();
+    }
+    _onEnterKeyDown(ev) {
+        this._isBeingFiltered = false;
+        const clickedOnAcceptButton = ev?.composedPath
+            ? ev
+                .composedPath()
+                .find((el) => el.matches
+                ? el.matches('vscode-button.button-accept')
+                : false)
+            : false;
+        if (clickedOnAcceptButton) {
+            return;
         }
     }
     _onSpaceKeyDown() {
         if (!this.open) {
-            this._toggleDropdown(true);
+            this.open = true;
             return;
         }
-        if (this.open && this._multiple && this._activeIndex > -1) {
-            const opts = this.combobox ? this._filteredOptions : this._options;
-            const { selected } = opts[this._activeIndex];
-            opts[this._activeIndex].selected = !selected;
-            this._selectedIndexes = [];
-            opts.forEach(({ index, selected }) => {
-                if (selected) {
-                    this._selectedIndexes.push(index);
-                }
-            });
-        }
-    }
-    _scrollActiveElementToTop() {
-        this._listElement.scrollTop = Math.floor(this._activeIndex * OPT_HEIGHT);
-    }
-    async _adjustOptionListScrollPos(direction) {
-        const numOpts = this.combobox
-            ? this._filteredOptions.length
-            : this._options.length;
-        if (numOpts <= VISIBLE_OPTS) {
-            return;
-        }
-        this._isHoverForbidden = true;
-        window.addEventListener('mousemove', this._onMouseMove);
-        if (!this._listElement) {
-            await this.updateComplete;
-        }
-        const ulScrollTop = this._listElement.scrollTop;
-        const liPosY = this._activeIndex * OPT_HEIGHT;
-        if (direction === 'down') {
-            if (liPosY + OPT_HEIGHT >= LIST_HEIGHT + ulScrollTop) {
-                this._listElement.scrollTop =
-                    (this._activeIndex - (VISIBLE_OPTS - 1)) * OPT_HEIGHT;
-            }
-        }
-        if (direction === 'up') {
-            if (liPosY <= ulScrollTop - OPT_HEIGHT) {
-                this._scrollActiveElementToTop();
-            }
-        }
     }
     _onArrowUpKeyDown() {
         if (this.open) {
-            if (this._activeIndex <= 0) {
+            if (this._opts.activeIndex <= 0 && !(this.combobox && this.creatable)) {
                 return;
             }
-            this._activeIndex -= 1;
-            this._adjustOptionListScrollPos('up');
+            if (this._isPlaceholderOptionActive) {
+                const optionIndex = this._opts.numOfVisibleOptions - 1;
+                this._opts.activeIndex = optionIndex;
+                this._isPlaceholderOptionActive = false;
+            }
+            else {
+                const prevOp = this._opts.prev();
+                if (prevOp !== null) {
+                    this._opts.activeIndex = prevOp?.index ?? -1;
+                    const prevSelectableIndex = prevOp?.filteredIndex ?? -1;
+                    if (prevSelectableIndex > -1) {
+                        this._adjustOptionListScrollPos('up', prevSelectableIndex);
+                    }
+                }
+            }
+        }
+        else {
+            this.open = true;
+            this._opts.activateDefault();
         }
     }
     _onArrowDownKeyDown() {
+        let numOpts = this._opts.numOfVisibleOptions;
+        const suggestedOptionVisible = this._isSuggestedOptionVisible;
+        if (suggestedOptionVisible) {
+            numOpts += 1;
+        }
         if (this.open) {
-            if (this._activeIndex >= this._currentOptions.length - 1) {
+            if (this._isPlaceholderOptionActive && this._opts.activeIndex === -1) {
                 return;
             }
-            this._activeIndex += 1;
-            this._adjustOptionListScrollPos('down');
-        }
-    }
-    _onComponentKeyDown(event) {
-        if ([' ', 'ArrowUp', 'ArrowDown', 'Escape'].includes(event.key)) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-        if (event.key === 'Enter') {
-            this._onEnterKeyDown();
-        }
-        if (event.key === ' ') {
-            this._onSpaceKeyDown();
-        }
-        if (event.key === 'Escape') {
-            this._toggleDropdown(false);
-        }
-        if (event.key === 'ArrowUp') {
-            this._onArrowUpKeyDown();
+            const nextOp = this._opts.next();
+            if (suggestedOptionVisible && nextOp === null) {
+                this._isPlaceholderOptionActive = true;
+                this._adjustOptionListScrollPos('down', numOpts - 1);
+                this._opts.activeIndex = -1;
+            }
+            else if (nextOp !== null) {
+                const nextSelectableIndex = nextOp?.filteredIndex ?? -1;
+                this._opts.activeIndex = nextOp?.index ?? -1;
+                if (nextSelectableIndex > -1) {
+                    this._adjustOptionListScrollPos('down', nextSelectableIndex);
+                }
+            }
         }
-        if (event.key === 'ArrowDown') {
-            this._onArrowDownKeyDown();
+        else {
+            this.open = true;
+            this._opts.activateDefault();
         }
     }
-    _onComponentFocus() {
-        this.focused = true;
-    }
-    _onComponentBlur() {
-        this.focused = false;
+    _onEscapeKeyDown() {
+        this.open = false;
     }
     _onSlotChange() {
         this._setStateFromSlottedElements();
@@ -406,23 +438,121 @@ export class VscodeSelectBase extends VscElement {
     }
     _onComboboxInputFocus(ev) {
         ev.target.select();
+        this._isBeingFiltered = false;
+        this._opts.filterPattern = '';
+    }
+    _onComboboxInputBlur() {
+        this._isBeingFiltered = false;
     }
     _onComboboxInputInput(ev) {
-        this._filterPattern = ev.target.value;
-        this._activeIndex = -1;
-        this._toggleDropdown(true);
+        this._isBeingFiltered = true;
+        this._opts.filterPattern = ev.target.value;
+        this._opts.activeIndex = -1;
+        this.open = true;
     }
     _onComboboxInputClick() {
-        this._toggleDropdown(true);
+        this._isBeingFiltered = this._opts.filterPattern !== '';
+        this.open = true;
+    }
+    _onComboboxInputSpaceKeyDown(ev) {
+        if (ev.key === ' ') {
+            ev.stopPropagation();
+        }
+    }
+    _onOptionClick(_ev) {
+        this._isBeingFiltered = false;
+        return;
+    }
+    //#endregion
+    //#region render functions
+    _renderCheckbox(checked, label) {
+        const checkboxClasses = {
+            'checkbox-icon': true,
+            checked,
+        };
+        return html `<span class=${classMap(checkboxClasses)}>${checkIcon}</span
+      ><span class="option-label">${label}</span>`;
     }
     _renderOptions() {
-        return [];
+        const list = this._opts.options;
+        return html `
+      <ul
+        aria-label=${ifDefined(this.label ?? undefined)}
+        aria-multiselectable=${ifDefined(this._opts.multiSelect ? 'true' : undefined)}
+        class="options"
+        id="select-listbox"
+        role="listbox"
+        tabindex="-1"
+        @click=${this._onOptionClick}
+        @mouseover=${this._onOptionMouseOver}
+      >
+        ${repeat(list, (op) => op.index, (op, index) => {
+            if (!op.visible) {
+                return nothing;
+            }
+            const active = op.index === this._opts.activeIndex && !op.disabled;
+            const selected = this._opts.getIsIndexSelected(op.index);
+            const optionClasses = {
+                active,
+                disabled: op.disabled,
+                option: true,
+                selected,
+            };
+            const labelText = (op.ranges?.length ?? 0 > 0)
+                ? highlightRanges(op.label, op.ranges ?? [])
+                : op.label;
+            return html `
+              <li
+                aria-selected=${selected ? 'true' : 'false'}
+                class=${classMap(optionClasses)}
+                data-index=${op.index}
+                data-filtered-index=${index}
+                id=${`op-${op.index}`}
+                role="option"
+                tabindex="-1"
+              >
+                ${when(this._opts.multiSelect, () => this._renderCheckbox(selected, labelText), () => labelText)}
+              </li>
+            `;
+        })}
+        ${this._renderPlaceholderOption(this._opts.numOfVisibleOptions < 1)}
+      </ul>
+    `;
+    }
+    _renderPlaceholderOption(isListEmpty) {
+        if (!this.combobox) {
+            return nothing;
+        }
+        const foundOption = this._opts.getOptionByLabel(this._opts.filterPattern);
+        if (foundOption) {
+            return nothing;
+        }
+        if (this.creatable && this._opts.filterPattern.length > 0) {
+            return html `<li
+        class=${classMap({
+                option: true,
+                placeholder: true,
+                active: this._isPlaceholderOptionActive,
+            })}
+        @mouseout=${this._onPlaceholderOptionMouseOut}
+      >
+        Add "${this._opts.filterPattern}"
+      </li>`;
+        }
+        else {
+            return isListEmpty
+                ? html `<li class="no-options" @click=${this._onNoOptionsClick}>
+            No options
+          </li>`
+                : nothing;
+        }
     }
     _renderDescription() {
-        if (!this._options[this._activeIndex]) {
+        const op = this._opts.getActiveOption();
+        if (!op) {
             return nothing;
         }
-        const { description } = this._options[this._activeIndex];
+        const { description } = op;
         return description
             ? html `<div class="description">${description}</div>`
             : nothing;
@@ -437,32 +567,45 @@ export class VscodeSelectBase extends VscElement {
         return html `${nothing}`;
     }
     _renderDropdown() {
-        const classes = classMap({
+        const classes = {
             dropdown: true,
-            multiple: this._multiple,
-        });
+            multiple: this._opts.multiSelect,
+            open: this.open,
+        };
+        const visibleOptions = this._isSuggestedOptionVisible || this._opts.numOfVisibleOptions === 0
+            ? this._opts.numOfVisibleOptions + 1
+            : this._opts.numOfVisibleOptions;
+        const scrollPaneHeight = Math.min(visibleOptions * OPT_HEIGHT, VISIBLE_OPTS * OPT_HEIGHT);
         return html `
-      <div class=${classes}>
+      <div class=${classMap(classes)}>
         ${this.position === 'above' ? this._renderDescription() : nothing}
-        ${this._renderOptions()} ${this._renderDropdownControls()}
+        <vscode-scrollable
+          always-visible
+          class="scrollable"
+          min-thumb-size="40"
+          tabindex="-1"
+          @vsc-scrollable-scroll=${this._onOptionListScroll}
+          .scrollPos=${this._optionListScrollPos}
+          .style=${stylePropertyMap({
+            height: `${scrollPaneHeight}px`,
+        })}
+        >
+          ${this._renderOptions()} ${this._renderDropdownControls()}
+        </vscode-scrollable>
         ${this.position === 'below' ? this._renderDescription() : nothing}
       </div>
     `;
     }
-    render() {
-        return html `
-      <slot class="main-slot" @slotchange=${this._onSlotChange}></slot>
-      ${this.combobox ? this._renderComboboxFace() : this._renderSelectFace()}
-      ${this.open ? this._renderDropdown() : nothing}
-    `;
-    }
 }
 __decorate([
-    property({ type: String, reflect: true, attribute: 'aria-expanded' })
-], VscodeSelectBase.prototype, "ariaExpanded", void 0);
+    property({ type: Boolean, reflect: true })
+], VscodeSelectBase.prototype, "creatable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], VscodeSelectBase.prototype, "combobox", void 0);
+], VscodeSelectBase.prototype, "combobox", null);
+__decorate([
+    property({ reflect: true })
+], VscodeSelectBase.prototype, "label", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], VscodeSelectBase.prototype, "disabled", null);
@@ -484,18 +627,12 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], VscodeSelectBase.prototype, "position", void 0);
-__decorate([
-    property({ type: Number, attribute: true, reflect: true })
-], VscodeSelectBase.prototype, "tabIndex", void 0);
 __decorate([
     queryAssignedElements({
         flatten: true,
         selector: 'vscode-option',
     })
 ], VscodeSelectBase.prototype, "_assignedOptions", void 0);
-__decorate([
-    state()
-], VscodeSelectBase.prototype, "_activeIndex", void 0);
 __decorate([
     state()
 ], VscodeSelectBase.prototype, "_currentDescription", void 0);
@@ -505,12 +642,6 @@ __decorate([
 __decorate([
     state()
 ], VscodeSelectBase.prototype, "_filteredOptions", null);
-__decorate([
-    state()
-], VscodeSelectBase.prototype, "_filterPattern", void 0);
-__decorate([
-    state()
-], VscodeSelectBase.prototype, "_selectedIndex", void 0);
 __decorate([
     state()
 ], VscodeSelectBase.prototype, "_selectedIndexes", void 0);
@@ -525,8 +656,11 @@ __decorate([
 ], VscodeSelectBase.prototype, "_values", void 0);
 __decorate([
     state()
-], VscodeSelectBase.prototype, "_listScrollTop", void 0);
+], VscodeSelectBase.prototype, "_isPlaceholderOptionActive", void 0);
+__decorate([
+    state()
+], VscodeSelectBase.prototype, "_isBeingFiltered", void 0);
 __decorate([
-    query('.options')
-], VscodeSelectBase.prototype, "_listElement", void 0);
+    state()
+], VscodeSelectBase.prototype, "_optionListScrollPos", void 0);
 //# sourceMappingURL=vscode-select-base.js.map