@spectrum-web-components/picker 0.11.5 → 0.12.0

package/src/Picker.js

@@ -1,290 +1,277 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-var _a;
-import { __decorate } from "tslib";
-import { html, nothing, render, SizedMixin, } from '@spectrum-web-components/base';
-import { classMap } from '@spectrum-web-components/base/src/directives.js';
-import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
-import pickerStyles from './picker.css.js';
-import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
-import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-import { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/tray/sp-tray.js';
-import '@spectrum-web-components/popover/sp-popover.js';
-import { openOverlay, } from '@spectrum-web-components/overlay';
-import { IS_MOBILE, MatchMediaController, } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  nothing,
+  render,
+  SizedMixin
+} from "@spectrum-web-components/base";
+import { classMap } from "@spectrum-web-components/base/src/directives.js";
+import {
+  property,
+  query
+} from "@spectrum-web-components/base/src/decorators.js";
+import pickerStyles from "./picker.css.js";
+import chevronStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";
+import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
+import { reparentChildren } from "@spectrum-web-components/shared/src/reparent-children.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/tray/sp-tray.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import {
+  openOverlay
+} from "@spectrum-web-components/overlay";
+import {
+  IS_MOBILE,
+  MatchMediaController
+} from "@spectrum-web-components/reactive-controllers/src/MatchMedia.js";
 const chevronClass = {
-    s: 'spectrum-UIIcon-ChevronDown75',
-    m: 'spectrum-UIIcon-ChevronDown100',
-    l: 'spectrum-UIIcon-ChevronDown200',
-    xl: 'spectrum-UIIcon-ChevronDown300',
+  s: "spectrum-UIIcon-ChevronDown75",
+  m: "spectrum-UIIcon-ChevronDown100",
+  l: "spectrum-UIIcon-ChevronDown200",
+  xl: "spectrum-UIIcon-ChevronDown300"
 };
-/**
- * @element sp-picker
- *
- * @slot label - The placeholder content for the Picker
- * @slot - menu items to be listed in the Picker
- * @fires change - Announces that the `value` of the element has changed
- * @fires sp-opened - Announces that the overlay has been opened
- * @fires sp-closed - Announces that the overlay has been closed
- */
 export class PickerBase extends SizedMixin(Focusable) {
-    constructor() {
-        super();
-        this.isMobile = new MatchMediaController(this, IS_MOBILE);
-        this.disabled = false;
-        this.focused = false;
-        this.invalid = false;
-        this.open = false;
-        this.readonly = false;
-        this.selects = 'single';
-        this.menuItems = [];
-        /**
-         * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}
-         * @attr
-         */
-        this.placement = 'bottom-start';
-        this.quiet = false;
-        this.value = '';
-        this.listRole = 'listbox';
-        this.itemRole = 'option';
-        this.onKeydown = (event) => {
-            this.focused = true;
-            if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {
-                return;
-            }
-            event.preventDefault();
-            this.toggle(true);
-        };
-        this.overlayOpenCallback = async () => {
-            this.updateMenuItems();
-            await this.itemsUpdated;
-            await this.optionsMenu.updateComplete;
-            requestAnimationFrame(() => this.menuStateResolver());
-        };
-        this.overlayCloseCallback = async () => {
-            if (this.restoreChildren) {
-                this.restoreChildren();
-                this.restoreChildren = undefined;
-            }
-            this.close();
-            requestAnimationFrame(() => this.menuStateResolver());
-        };
-        this._willUpdateItems = false;
-        this.itemsUpdated = Promise.resolve();
-        this.menuStatePromise = Promise.resolve();
-        this.selectionPromise = Promise.resolve();
-        this.onKeydown = this.onKeydown.bind(this);
+  constructor() {
+    super();
+    this.isMobile = new MatchMediaController(this, IS_MOBILE);
+    this.disabled = false;
+    this.focused = false;
+    this.invalid = false;
+    this.open = false;
+    this.readonly = false;
+    this.selects = "single";
+    this.menuItems = [];
+    this.placement = "bottom-start";
+    this.quiet = false;
+    this.value = "";
+    this.listRole = "listbox";
+    this.itemRole = "option";
+    this.onKeydown = (event) => {
+      this.focused = true;
+      if (event.code !== "ArrowDown" && event.code !== "ArrowUp") {
+        return;
+      }
+      event.preventDefault();
+      this.toggle(true);
+    };
+    this.overlayOpenCallback = async () => {
+      this.updateMenuItems();
+      await this.itemsUpdated;
+      await this.optionsMenu.updateComplete;
+      requestAnimationFrame(() => this.menuStateResolver());
+    };
+    this.overlayCloseCallback = async () => {
+      if (this.restoreChildren) {
+        this.restoreChildren();
+        this.restoreChildren = void 0;
+      }
+      this.close();
+      requestAnimationFrame(() => this.menuStateResolver());
+    };
+    this._willUpdateItems = false;
+    this.itemsUpdated = Promise.resolve();
+    this.menuStatePromise = Promise.resolve();
+    this.selectionPromise = Promise.resolve();
+    this.onKeydown = this.onKeydown.bind(this);
+  }
+  get target() {
+    return this.button;
+  }
+  get focusElement() {
+    if (this.open) {
+      return this.optionsMenu;
     }
-    get target() {
-        return this.button;
+    return this.button;
+  }
+  forceFocusVisible() {
+    this.focused = true;
+  }
+  onButtonBlur() {
+    this.focused = false;
+    this.target.removeEventListener("keydown", this.onKeydown);
+  }
+  onButtonClick() {
+    this.toggle();
+  }
+  focus(options) {
+    super.focus(options);
+    if (!this.disabled && this.focusElement) {
+      this.focused = this.hasVisibleFocusInTree();
     }
-    get focusElement() {
-        if (this.open) {
-            return this.optionsMenu;
-        }
-        return this.button;
-    }
-    forceFocusVisible() {
-        this.focused = true;
+  }
+  onHelperFocus() {
+    this.focused = true;
+    this.button.focus();
+  }
+  onButtonFocus() {
+    this.target.addEventListener("keydown", this.onKeydown);
+  }
+  handleChange(event) {
+    event.stopPropagation();
+    const target = event.target;
+    const [selected] = target.selectedItems;
+    this.setValueFromItem(selected, event);
+  }
+  async setValueFromItem(item, menuChangeEvent) {
+    const oldSelectedItem = this.selectedItem;
+    const oldValue = this.value;
+    this.selectedItem = item;
+    this.value = item.value;
+    this.open = false;
+    await this.updateComplete;
+    const applyDefault = this.dispatchEvent(new Event("change", {
+      bubbles: true,
+      cancelable: true,
+      composed: true
+    }));
+    if (!applyDefault) {
+      if (menuChangeEvent) {
+        menuChangeEvent.preventDefault();
+      }
+      this.selectedItem.selected = false;
+      if (oldSelectedItem) {
+        oldSelectedItem.selected = true;
+      }
+      this.selectedItem = oldSelectedItem;
+      this.value = oldValue;
+      this.open = true;
+      return;
     }
-    onButtonBlur() {
-        this.focused = false;
-        this.target.removeEventListener('keydown', this.onKeydown);
+    if (oldSelectedItem) {
+      oldSelectedItem.selected = false;
     }
-    onButtonClick() {
-        this.toggle();
+    item.selected = !!this.selects;
+  }
+  toggle(target) {
+    if (this.readonly) {
+      return;
     }
-    focus(options) {
-        super.focus(options);
-        if (!this.disabled && this.focusElement) {
-            this.focused = this.hasVisibleFocusInTree();
-        }
+    this.open = typeof target !== "undefined" ? target : !this.open;
+  }
+  close() {
+    if (this.readonly) {
+      return;
     }
-    onHelperFocus() {
-        // set focused to true here instead of onButtonFocus so clicks don't flash a focus outline
-        this.focused = true;
-        this.button.focus();
+    this.open = false;
+  }
+  async generatePopover() {
+    if (!this.popoverFragment) {
+      this.popoverFragment = document.createDocumentFragment();
     }
-    onButtonFocus() {
-        this.target.addEventListener('keydown', this.onKeydown);
+    render(this.renderPopover, this.popoverFragment, { host: this });
+    this.popover = this.popoverFragment.children[0];
+    this.optionsMenu = this.popover.children[1];
+  }
+  async openMenu() {
+    let reparentableChildren = [];
+    const deprecatedMenu = this.querySelector(":scope > sp-menu");
+    await this.generatePopover();
+    if (deprecatedMenu) {
+      reparentableChildren = Array.from(deprecatedMenu.children);
+    } else {
+      reparentableChildren = Array.from(this.children).filter((element) => {
+        return !element.hasAttribute("slot");
+      });
     }
-    handleChange(event) {
-        event.stopPropagation();
-        const target = event.target;
-        const [selected] = target.selectedItems;
-        this.setValueFromItem(selected, event);
+    if (reparentableChildren.length === 0) {
+      this.menuStateResolver();
+      return;
     }
-    async setValueFromItem(item, menuChangeEvent) {
-        const oldSelectedItem = this.selectedItem;
-        const oldValue = this.value;
-        this.selectedItem = item;
-        this.value = item.value;
-        this.open = false;
-        await this.updateComplete;
-        const applyDefault = this.dispatchEvent(new Event('change', {
-            bubbles: true,
-            cancelable: true,
-            composed: true,
-        }));
-        if (!applyDefault) {
-            if (menuChangeEvent) {
-                menuChangeEvent.preventDefault();
-            }
-            this.selectedItem.selected = false;
-            if (oldSelectedItem) {
-                oldSelectedItem.selected = true;
-            }
-            this.selectedItem = oldSelectedItem;
-            this.value = oldValue;
-            this.open = true;
-            return;
+    this.restoreChildren = reparentChildren(reparentableChildren, this.optionsMenu, {
+      position: "beforeend",
+      prepareCallback: (el) => {
+        if (this.value === el.value) {
+          el.selected = true;
         }
-        if (oldSelectedItem) {
-            oldSelectedItem.selected = false;
-        }
-        item.selected = !!this.selects;
-    }
-    toggle(target) {
-        if (this.readonly) {
-            return;
-        }
-        this.open = typeof target !== 'undefined' ? target : !this.open;
-    }
-    close() {
-        if (this.readonly) {
-            return;
-        }
-        this.open = false;
-    }
-    async generatePopover(deprecatedMenu) {
-        if (!this.popoverFragment) {
-            this.popoverFragment = document.createDocumentFragment();
-        }
-        render(this.renderPopover, this.popoverFragment, { host: this });
-        this.popover = this.popoverFragment.children[0];
-        this.optionsMenu = this.popover.children[1];
-        if (deprecatedMenu) {
-            console.warn(`Deprecation Notice: You no longer need to provide an sp-menu child to ${this.tagName.toLowerCase()}. Any styling or attributes on the sp-menu will be ignored.`);
-        }
-    }
-    async openMenu() {
-        /* c8 ignore next 9 */
-        let reparentableChildren = [];
-        const deprecatedMenu = this.querySelector(':scope > sp-menu');
-        await this.generatePopover(deprecatedMenu);
-        if (deprecatedMenu) {
-            reparentableChildren = Array.from(deprecatedMenu.children);
-        }
-        else {
-            reparentableChildren = Array.from(this.children).filter((element) => {
-                return !element.hasAttribute('slot');
-            });
-        }
-        if (reparentableChildren.length === 0) {
-            this.menuStateResolver();
-            return;
-        }
-        this.restoreChildren = reparentChildren(reparentableChildren, this.optionsMenu, {
-            position: 'beforeend',
-            prepareCallback: (el) => {
-                if (this.value === el.value) {
-                    el.selected = true;
-                }
-                return (el) => {
-                    if (typeof el.focused !== 'undefined') {
-                        el.focused = false;
-                    }
-                };
-            },
-        });
-        this.sizePopover(this.popover);
-        this.closeOverlay = Picker.openOverlay(this, 'modal', this.popover, {
-            placement: this.isMobile.matches ? 'none' : this.placement,
-            receivesFocus: 'auto',
-        });
+        return (el2) => {
+          if (typeof el2.focused !== "undefined") {
+            el2.focused = false;
+          }
+        };
+      }
+    });
+    this.sizePopover(this.popover);
+    this.closeOverlay = Picker.openOverlay(this, "modal", this.popover, {
+      placement: this.isMobile.matches ? "none" : this.placement,
+      receivesFocus: "auto"
+    });
+  }
+  sizePopover(popover) {
+    if (this.isMobile.matches) {
+      popover.style.setProperty("--swc-menu-width", `100%`);
+      return;
     }
-    sizePopover(popover) {
-        if (this.isMobile.matches) {
-            popover.style.setProperty('--swc-menu-width', `100%`);
-            return;
-        }
-        if (this.quiet)
-            return;
-        // only use `this.offsetWidth` when Standard variant
-        popover.style.setProperty('min-width', `${this.offsetWidth}px`);
+    if (this.quiet)
+      return;
+    popover.style.setProperty("min-width", `${this.offsetWidth}px`);
+  }
+  async closeMenu() {
+    if (this.closeOverlay) {
+      const closeOverlay = this.closeOverlay;
+      delete this.closeOverlay;
+      (await closeOverlay)();
     }
-    async closeMenu() {
-        if (this.closeOverlay) {
-            const closeOverlay = this.closeOverlay;
-            delete this.closeOverlay;
-            (await closeOverlay)();
-        }
+  }
+  get selectedItemContent() {
+    if (this.selectedItem) {
+      return this.selectedItem.itemChildren;
     }
-    get selectedItemContent() {
-        if (this.selectedItem) {
-            return this.selectedItem.itemChildren;
-        }
-        return { icon: [], content: [] };
+    return { icon: [], content: [] };
+  }
+  renderLabelContent(content) {
+    if (this.value && this.selectedItem) {
+      return content;
     }
-    renderLabelContent(content) {
-        if (this.value && this.selectedItem) {
-            return content;
-        }
-        return html `
+    return html`
             <slot name="label">${this.label}</slot>
         `;
-    }
-    get buttonContent() {
-        const labelClasses = {
-            'visually-hidden': this.icons === 'only' && !!this.value,
-            placeholder: !this.value,
-        };
-        return [
-            html `
-                <span id="icon" ?hidden=${this.icons === 'none'}>
+  }
+  get buttonContent() {
+    const labelClasses = {
+      "visually-hidden": this.icons === "only" && !!this.value,
+      placeholder: !this.value
+    };
+    return [
+      html`
+                <span id="icon" ?hidden=${this.icons === "none"}>
                     ${this.selectedItemContent.icon}
                 </span>
                 <span id="label" class=${classMap(labelClasses)}>
                     ${this.renderLabelContent(this.selectedItemContent.content)}
                 </span>
-                ${this.invalid
-                ? html `
+                ${this.invalid ? html`
                           <sp-icon-alert
                               class="validation-icon"
                           ></sp-icon-alert>
-                      `
-                : nothing}
+                      ` : nothing}
                 <sp-icon-chevron100
                     class="picker ${chevronClass[this.size]}"
                 ></sp-icon-chevron100>
-            `,
-        ];
-    }
-    // a helper to throw focus to the button is needed because Safari
-    // won't include buttons in the tab order even with tabindex="0"
-    render() {
-        return html `
+            `
+    ];
+  }
+  render() {
+    return html`
             <span
                 id="focus-helper"
-                tabindex="${this.focused ? '-1' : '0'}"
+                tabindex="${this.focused ? "-1" : "0"}"
                 @focus=${this.onHelperFocus}
             ></span>
             <button
                 aria-haspopup="true"
-                aria-expanded=${this.open ? 'true' : 'false'}
+                aria-expanded=${this.open ? "true" : "false"}
                 aria-labelledby="button icon label"
                 id="button"
                 class="button"
@@ -297,33 +284,35 @@ export class PickerBase extends SizedMixin(Focusable) {
                 ${this.buttonContent}
             </button>
         `;
+  }
+  update(changes) {
+    if (this.selects) {
+      this.selects = "single";
     }
-    update(changes) {
-        if (this.selects) {
-            // Always force `selects` to "single" when set.
-            // TODO: Add support functionally and visually for "multiple"
-            this.selects = 'single';
-        }
-        if (changes.has('disabled') && this.disabled) {
-            this.open = false;
-        }
-        if (changes.has('open') &&
-            (this.open || typeof changes.get('open') !== 'undefined')) {
-            this.menuStatePromise = new Promise((res) => (this.menuStateResolver = res));
-            if (this.open) {
-                this.openMenu();
-            }
-            else {
-                this.closeMenu();
-            }
-        }
-        if (changes.has('value') && !changes.has('selectedItem')) {
-            this.updateMenuItems();
-        }
-        super.update(changes);
+    if (changes.has("disabled") && this.disabled) {
+      this.open = false;
     }
-    get dismissHelper() {
-        return html `
+    if (changes.has("open") && (this.open || typeof changes.get("open") !== "undefined")) {
+      this.menuStatePromise = new Promise((res) => this.menuStateResolver = res);
+      if (this.open) {
+        this.openMenu();
+      } else {
+        this.closeMenu();
+      }
+    }
+    if (changes.has("value") && !changes.has("selectedItem")) {
+      this.updateMenuItems();
+    }
+    if (false) {
+      if (!this.hasUpdated && this.querySelector("sp-menu")) {
+        const { localName } = this;
+        window.__swc.warn(this, `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`, "https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes", { level: "deprecation" });
+      }
+    }
+    super.update(changes);
+  }
+  get dismissHelper() {
+    return html`
             <div class="visually-hidden">
                 <button
                     tabindex="-1"
@@ -332,9 +321,9 @@ export class PickerBase extends SizedMixin(Focusable) {
                 ></button>
             </div>
         `;
-    }
-    get renderPopover() {
-        const content = html `
+  }
+  get renderPopover() {
+    const content = html`
             ${this.dismissHelper}
             <sp-menu
                 id="menu"
@@ -344,8 +333,8 @@ export class PickerBase extends SizedMixin(Focusable) {
             ></sp-menu>
             ${this.dismissHelper}
         `;
-        if (this.isMobile.matches) {
-            return html `
+    if (this.isMobile.matches) {
+      return html`
                 <sp-tray
                     id="popover"
                     role="dialog"
@@ -356,8 +345,8 @@ export class PickerBase extends SizedMixin(Focusable) {
                     ${content}
                 </sp-tray>
             `;
-        }
-        return html `
+    }
+    return html`
             <sp-popover
                 id="popover"
                 role="dialog"
@@ -368,163 +357,145 @@ export class PickerBase extends SizedMixin(Focusable) {
                 ${content}
             </sp-popover>
         `;
+  }
+  updateMenuItems(event) {
+    if (this.open && (event == null ? void 0 : event.type) === "sp-menu-item-removed")
+      return;
+    if (this._willUpdateItems)
+      return;
+    this._willUpdateItems = true;
+    if ((event == null ? void 0 : event.item) === this.selectedItem) {
+      this.requestUpdate();
     }
-    /**
-     * Acquire the available MenuItems in the Picker by
-     * direct element query or by assuming the list managed
-     * by the Menu within the open options overlay.
-     */
-    updateMenuItems(event) {
-        if (this.open && (event === null || event === void 0 ? void 0 : event.type) === 'sp-menu-item-removed')
-            return;
-        if (this._willUpdateItems)
-            return;
-        this._willUpdateItems = true;
-        if ((event === null || event === void 0 ? void 0 : event.item) === this.selectedItem) {
-            this.requestUpdate();
-        }
-        let resolve = () => {
-            return;
-        };
-        this.itemsUpdated = new Promise((res) => (resolve = res));
-        // Debounce the update so we only update once
-        // if multiple items have changed
-        window.requestAnimationFrame(async () => {
-            if (this.open) {
-                await this.optionsMenu.updateComplete;
-                this.menuItems = this.optionsMenu.childItems;
-            }
-            else {
-                this.menuItems = [
-                    ...this.querySelectorAll('sp-menu-item'),
-                ];
-            }
-            this.manageSelection();
-            resolve();
-            this._willUpdateItems = false;
-        });
-    }
-    async manageSelection() {
-        await this.menuStatePromise;
-        this.selectionPromise = new Promise((res) => (this.selectionResolver = res));
-        let selectedItem;
-        this.menuItems.forEach((item) => {
-            if (this.value === item.value && !item.disabled) {
-                selectedItem = item;
-            }
-            else {
-                item.selected = false;
-            }
-        });
-        if (selectedItem) {
-            selectedItem.selected = !!this.selects;
-            this.selectedItem = selectedItem;
-        }
-        else {
-            this.value = '';
-            this.selectedItem = undefined;
-        }
-        if (this.open) {
-            await this.optionsMenu.updateComplete;
-            this.optionsMenu.updateSelectedItemIndex();
-        }
-        this.selectionResolver();
-    }
-    async getUpdateComplete() {
-        const complete = (await super.getUpdateComplete());
-        await this.menuStatePromise;
-        await this.itemsUpdated;
-        await this.selectionPromise;
-        return complete;
-    }
-    connectedCallback() {
-        this.updateMenuItems();
-        this.addEventListener('sp-menu-item-added-or-updated', this.updateMenuItems);
-        this.addEventListener('sp-menu-item-removed', this.updateMenuItems);
-        super.connectedCallback();
+    let resolve = () => {
+      return;
+    };
+    this.itemsUpdated = new Promise((res) => resolve = res);
+    window.requestAnimationFrame(async () => {
+      if (this.open) {
+        await this.optionsMenu.updateComplete;
+        this.menuItems = this.optionsMenu.childItems;
+      } else {
+        this.menuItems = [
+          ...this.querySelectorAll('sp-menu-item:not([slot="submenu"] *)')
+        ];
+      }
+      this.manageSelection();
+      resolve();
+      this._willUpdateItems = false;
+    });
+  }
+  async manageSelection() {
+    await this.menuStatePromise;
+    this.selectionPromise = new Promise((res) => this.selectionResolver = res);
+    let selectedItem;
+    this.menuItems.forEach((item) => {
+      if (this.value === item.value && !item.disabled) {
+        selectedItem = item;
+      } else {
+        item.selected = false;
+      }
+    });
+    if (selectedItem) {
+      selectedItem.selected = !!this.selects;
+      this.selectedItem = selectedItem;
+    } else {
+      this.value = "";
+      this.selectedItem = void 0;
     }
-    disconnectedCallback() {
-        this.close();
-        super.disconnectedCallback();
+    if (this.open) {
+      await this.optionsMenu.updateComplete;
+      this.optionsMenu.updateSelectedItemIndex();
     }
+    this.selectionResolver();
+  }
+  async getUpdateComplete() {
+    const complete = await super.getUpdateComplete();
+    await this.menuStatePromise;
+    await this.itemsUpdated;
+    await this.selectionPromise;
+    return complete;
+  }
+  connectedCallback() {
+    this.updateMenuItems();
+    this.addEventListener("sp-menu-item-added-or-updated", this.updateMenuItems);
+    this.addEventListener("sp-menu-item-removed", this.updateMenuItems);
+    super.connectedCallback();
+  }
+  disconnectedCallback() {
+    this.close();
+    super.disconnectedCallback();
+  }
 }
-_a = PickerBase;
-/**
- * @private
- */
 PickerBase.openOverlay = async (target, interaction, content, options) => {
-    return await openOverlay(target, interaction, content, options);
+  return await openOverlay(target, interaction, content, options);
 };
-__decorate([
-    query('#button')
-], PickerBase.prototype, "button", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], PickerBase.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], PickerBase.prototype, "focused", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], PickerBase.prototype, "icons", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], PickerBase.prototype, "invalid", void 0);
-__decorate([
-    property()
-], PickerBase.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], PickerBase.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], PickerBase.prototype, "readonly", void 0);
-__decorate([
-    property()
-], PickerBase.prototype, "placement", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], PickerBase.prototype, "quiet", void 0);
-__decorate([
-    property({ type: String })
-], PickerBase.prototype, "value", void 0);
-__decorate([
-    property({ attribute: false })
-], PickerBase.prototype, "selectedItem", void 0);
+__decorateClass([
+  query("#button")
+], PickerBase.prototype, "button", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PickerBase.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PickerBase.prototype, "focused", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], PickerBase.prototype, "icons", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PickerBase.prototype, "invalid", 2);
+__decorateClass([
+  property()
+], PickerBase.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PickerBase.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PickerBase.prototype, "readonly", 2);
+__decorateClass([
+  property()
+], PickerBase.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PickerBase.prototype, "quiet", 2);
+__decorateClass([
+  property({ type: String })
+], PickerBase.prototype, "value", 2);
+__decorateClass([
+  property({ attribute: false })
+], PickerBase.prototype, "selectedItem", 2);
 export class Picker extends PickerBase {
-    constructor() {
-        super(...arguments);
-        this.onKeydown = (event) => {
-            const { code } = event;
-            this.focused = true;
-            if (!code.startsWith('Arrow') || this.readonly) {
-                return;
-            }
-            event.preventDefault();
-            if (code === 'ArrowUp' || code === 'ArrowDown') {
-                this.toggle(true);
-                return;
-            }
-            const selectedIndex = this.selectedItem
-                ? this.menuItems.indexOf(this.selectedItem)
-                : -1;
-            // use a positive offset to find the first non-disabled item when no selection is available.
-            const nextOffset = !this.value || code === 'ArrowRight' ? 1 : -1;
-            let nextIndex = selectedIndex + nextOffset;
-            while (this.menuItems[nextIndex] &&
-                this.menuItems[nextIndex].disabled) {
-                nextIndex += nextOffset;
-            }
-            if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {
-                return;
-            }
-            if (!this.value || nextIndex !== selectedIndex) {
-                this.setValueFromItem(this.menuItems[nextIndex]);
-            }
-        };
-    }
-    static get styles() {
-        return [pickerStyles, chevronStyles];
-    }
+  constructor() {
+    super(...arguments);
+    this.onKeydown = (event) => {
+      const { code } = event;
+      this.focused = true;
+      if (!code.startsWith("Arrow") || this.readonly) {
+        return;
+      }
+      event.preventDefault();
+      if (code === "ArrowUp" || code === "ArrowDown") {
+        this.toggle(true);
+        return;
+      }
+      const selectedIndex = this.selectedItem ? this.menuItems.indexOf(this.selectedItem) : -1;
+      const nextOffset = !this.value || code === "ArrowRight" ? 1 : -1;
+      let nextIndex = selectedIndex + nextOffset;
+      while (this.menuItems[nextIndex] && this.menuItems[nextIndex].disabled) {
+        nextIndex += nextOffset;
+      }
+      if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {
+        return;
+      }
+      if (!this.value || nextIndex !== selectedIndex) {
+        this.setValueFromItem(this.menuItems[nextIndex]);
+      }
+    };
+  }
+  static get styles() {
+    return [pickerStyles, chevronStyles];
+  }
 }
-//# sourceMappingURL=Picker.js.map
+//# sourceMappingURL=Picker.js.map