@spectrum-web-components/picker 0.35.1-rc.43 → 0.36.0

package/src/Picker.dev.js

@@ -13,12 +13,12 @@ var __decorateClass = (decorators, target, key, kind) => {
 import {
   html,
   nothing,
+  render,
   SizedMixin
 } from "@spectrum-web-components/base";
 import {
   classMap,
-  ifDefined,
-  styleMap
+  ifDefined
 } from "@spectrum-web-components/base/src/directives.js";
 import {
   property,
@@ -28,12 +28,15 @@ import {
 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/overlay/sp-overlay.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
@@ -54,13 +57,13 @@ export class PickerBase extends SizedMixin(Focusable) {
     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.preventNextToggle = false;
-    this.handleKeydown = (event) => {
+    this.onKeydown = (event) => {
       this.focused = true;
       if (event.code !== "ArrowDown" && event.code !== "ArrowUp") {
         return;
@@ -68,54 +71,31 @@ export class PickerBase extends SizedMixin(Focusable) {
       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.applyFocusElementLabel = (value) => {
       this.appliedLabel = value;
     };
-    this.willManageSelection = false;
+    this._willUpdateItems = false;
+    this.itemsUpdated = Promise.resolve();
+    this.menuStatePromise = Promise.resolve();
     this.selectionPromise = Promise.resolve();
-    this.recentlyConnected = false;
-    this.enterKeydownOn = null;
-    this.handleEnterKeydown = (event) => {
-      if (event.code !== "Enter") {
-        return;
-      }
-      if (this.enterKeydownOn) {
-        event.preventDefault();
-        return;
-      } else {
-        this.addEventListener(
-          "keyup",
-          (keyupEvent) => {
-            if (keyupEvent.code !== "Enter") {
-              return;
-            }
-            this.enterKeydownOn = null;
-          },
-          { once: true }
-        );
-      }
-      this.enterKeydownOn = this.enterKeydownOn || event.target;
-    };
-    this.addEventListener("focusout", (event) => {
-      if (event.relatedTarget && this.contains(event.relatedTarget) || event.target !== this) {
-        return;
-      }
-      this.open = false;
-    });
+    this.onKeydown = this.onKeydown.bind(this);
   }
-  get menuItems() {
-    return this.optionsMenu.childItems;
-  }
-  get selectedItem() {
-    return this._selectedItem;
-  }
-  set selectedItem(selectedItem) {
-    this.selectedItemContent = selectedItem ? selectedItem.itemChildren : void 0;
-    if (selectedItem === this.selectedItem)
-      return;
-    const oldSelectedItem = this.selectedItem;
-    this._selectedItem = selectedItem;
-    this.requestUpdate("selectedItem", oldSelectedItem);
+  get target() {
+    return this.button;
   }
   get focusElement() {
     if (this.open) {
@@ -126,20 +106,15 @@ export class PickerBase extends SizedMixin(Focusable) {
   forceFocusVisible() {
     this.focused = true;
   }
-  handleButtonBlur() {
+  onButtonBlur() {
     this.focused = false;
+    this.target.removeEventListener(
+      "keydown",
+      this.onKeydown
+    );
   }
-  handlePointerdown() {
-    this.preventNextToggle = this.open;
-  }
-  handleButtonClick() {
-    if (this.enterKeydownOn && this.enterKeydownOn !== this.button) {
-      return;
-    }
-    if (!this.preventNextToggle) {
-      this.toggle();
-    }
-    this.preventNextToggle = false;
+  onButtonClick() {
+    this.toggle();
   }
   focus(options) {
     super.focus(options);
@@ -147,36 +122,41 @@ export class PickerBase extends SizedMixin(Focusable) {
       this.focused = this.hasVisibleFocusInTree();
     }
   }
-  handleHelperFocus() {
+  onHelperFocus() {
     this.focused = true;
     this.button.focus();
   }
+  onButtonFocus() {
+    this.target.addEventListener(
+      "keydown",
+      this.onKeydown
+    );
+  }
   handleChange(event) {
     const target = event.target;
     const [selected] = target.selectedItems;
-    event.stopPropagation();
     if (event.cancelable) {
+      event.stopPropagation();
       this.setValueFromItem(selected, event);
     } else {
       this.open = false;
     }
   }
   async setValueFromItem(item, menuChangeEvent) {
-    this.open = false;
     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,
-        // Allow it to be prevented.
         cancelable: true,
         composed: true
       })
     );
-    if (!applyDefault && this.selects) {
+    if (!applyDefault) {
       if (menuChangeEvent) {
         menuChangeEvent.preventDefault();
       }
@@ -188,10 +168,6 @@ export class PickerBase extends SizedMixin(Focusable) {
       this.value = oldValue;
       this.open = true;
       return;
-    } else if (!this.selects) {
-      this.selectedItem = oldSelectedItem;
-      this.value = oldValue;
-      return;
     }
     if (oldSelectedItem) {
       this.setMenuItemSelected(oldSelectedItem, false);
@@ -215,23 +191,74 @@ export class PickerBase extends SizedMixin(Focusable) {
     }
     this.open = false;
   }
-  get containerStyles() {
+  async generatePopover() {
+    if (!this.popoverFragment) {
+      this.popoverFragment = document.createDocumentFragment();
+    }
+    render(this.renderPopover, this.popoverFragment, { host: this });
+    this.popoverEl = this.popoverFragment.children[0];
+    this.optionsMenu = this.popoverEl.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");
+        }
+      );
+    }
+    if (reparentableChildren.length === 0) {
+      this.menuStateResolver();
+      return;
+    }
+    this.restoreChildren = reparentChildren(reparentableChildren, this.optionsMenu, {
+      position: "beforeend",
+      prepareCallback: (el) => {
+        if (this.value === el.value) {
+          this.setMenuItemSelected(el, true);
+        }
+        return (el2) => {
+          if (typeof el2.focused !== "undefined") {
+            el2.focused = false;
+          }
+        };
+      }
+    });
+    this.sizePopover(this.popoverEl);
+    if (true) {
+      window.__swc.ignoreWarningLevels.deprecation = true;
+    }
+    this.closeOverlay = Picker.openOverlay(this, "modal", this.popoverEl, {
+      placement: this.isMobile.matches ? "none" : this.placement,
+      receivesFocus: "auto"
+    });
+    if (true) {
+      window.__swc.ignoreWarningLevels.deprecation = false;
+    }
+  }
+  sizePopover(popover) {
     if (this.isMobile.matches) {
-      return {
-        "--swc-menu-width": "100%"
-      };
+      popover.style.setProperty("--swc-menu-width", `100%`);
+      return;
     }
-    return {};
   }
-  get selectedItemContent() {
-    return this._selectedItemContent || { icon: [], content: [] };
+  async closeMenu() {
+    if (this.closeOverlay) {
+      const closeOverlay = this.closeOverlay;
+      delete this.closeOverlay;
+      (await closeOverlay)();
+    }
   }
-  set selectedItemContent(selectedItemContent) {
-    if (selectedItemContent === this.selectedItemContent)
-      return;
-    const oldContent = this.selectedItemContent;
-    this._selectedItemContent = selectedItemContent;
-    this.requestUpdate("selectedItemContent", oldContent);
+  get selectedItemContent() {
+    if (this.selectedItem) {
+      return this.selectedItem.itemChildren;
+    }
+    return { icon: [], content: [] };
   }
   renderLabelContent(content) {
     if (this.value && this.selectedItem) {
@@ -289,38 +316,14 @@ export class PickerBase extends SizedMixin(Focusable) {
             `
     ];
   }
-  get renderOverlay() {
-    return html`
-            <sp-overlay
-                .triggerElement=${this}
-                .offset=${0}
-                ?open=${this.open}
-                .placement=${this.placement}
-                type="auto"
-                .receivesFocus=${"true"}
-                @beforetoggle=${(event) => {
-      if (event.composedPath()[0] !== event.target) {
-        return;
-      }
-      this.open = event.newState === "open";
-      if (!this.open) {
-        this.optionsMenu.updateSelectedItemIndex();
-        this.optionsMenu.closeDescendentOverlays();
-      }
-    }}
-            >
-                ${this.renderContainer}
-            </sp-overlay>
-        `;
-  }
   // 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`
             <span
                 id="focus-helper"
-                tabindex="${this.focused || this.open ? "-1" : "0"}"
-                @focus=${this.handleHelperFocus}
+                tabindex="${this.focused ? "-1" : "0"}"
+                @focus=${this.onHelperFocus}
             ></span>
             <button
                 aria-haspopup="true"
@@ -329,19 +332,14 @@ export class PickerBase extends SizedMixin(Focusable) {
                 aria-labelledby="icon label applied-label"
                 id="button"
                 class="button"
-                @blur=${this.handleButtonBlur}
-                @click=${this.handleButtonClick}
-                @keydown=${{
-      handleEvent: this.handleEnterKeydown,
-      capture: true
-    }}
-                @pointerdown=${this.handlePointerdown}
+                @blur=${this.onButtonBlur}
+                @click=${this.onButtonClick}
+                @focus=${this.onButtonFocus}
                 ?disabled=${this.disabled}
                 tabindex="-1"
             >
                 ${this.buttonContent}
             </button>
-            ${this.renderOverlay}
         `;
   }
   update(changes) {
@@ -351,15 +349,21 @@ export class PickerBase extends SizedMixin(Focusable) {
     if (changes.has("disabled") && this.disabled) {
       this.open = false;
     }
-    if (changes.has("value")) {
-      this.shouldScheduleManageSelection();
+    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 (!this.hasUpdated) {
-      const deprecatedMenu = this.querySelector(":scope > sp-menu");
-      deprecatedMenu == null ? void 0 : deprecatedMenu.setAttribute("selects", "inherit");
+    if (changes.has("value") && !changes.has("selectedItem")) {
+      this.updateMenuItems();
     }
     if (true) {
-      if (!this.hasUpdated && this.querySelector(":scope > sp-menu")) {
+      if (!this.hasUpdated && this.querySelector("sp-menu")) {
         const { localName } = this;
         window.__swc.warn(
           this,
@@ -371,13 +375,6 @@ export class PickerBase extends SizedMixin(Focusable) {
     }
     super.update(changes);
   }
-  bindButtonKeydownListener() {
-    this.button.addEventListener("keydown", this.handleKeydown);
-  }
-  firstUpdated(changes) {
-    super.firstUpdated(changes);
-    this.bindButtonKeydownListener();
-  }
   get dismissHelper() {
     return html`
             <div class="visually-hidden">
@@ -389,7 +386,7 @@ export class PickerBase extends SizedMixin(Focusable) {
             </div>
         `;
   }
-  get renderContainer() {
+  get renderPopover() {
     const content = html`
             ${this.dismissHelper}
             <sp-menu
@@ -397,15 +394,8 @@ export class PickerBase extends SizedMixin(Focusable) {
                 role="${this.listRole}"
                 @change=${this.handleChange}
                 .selects=${this.selects}
-                .selected=${this.value ? [this.value] : []}
-                @sp-menu-item-added-or-updated=${this.shouldManageSelection}
-                @keydown=${{
-      handleEvent: this.handleEnterKeydown,
-      capture: true
-    }}
-            >
-                <slot @slotchange=${this.shouldScheduleManageSelection}></slot>
-            </sp-menu>
+                size=${this.size}
+            ></sp-menu>
             ${this.dismissHelper}
         `;
     if (this.isMobile.matches) {
@@ -413,7 +403,9 @@ export class PickerBase extends SizedMixin(Focusable) {
                 <sp-tray
                     id="popover"
                     role="presentation"
-                    style=${styleMap(this.containerStyles)}
+                    @sp-menu-item-added-or-updated=${this.updateMenuItems}
+                    .overlayOpenCallback=${this.overlayOpenCallback}
+                    .overlayCloseCallback=${this.overlayCloseCallback}
                 >
                     ${content}
                 </sp-tray>
@@ -423,42 +415,56 @@ export class PickerBase extends SizedMixin(Focusable) {
             <sp-popover
                 id="popover"
                 role="presentation"
-                style=${styleMap(this.containerStyles)}
-                placement=${this.placement}
+                @sp-menu-item-added-or-updated=${this.updateMenuItems}
+                .overlayOpenCallback=${this.overlayOpenCallback}
+                .overlayCloseCallback=${this.overlayCloseCallback}
             >
                 ${content}
             </sp-popover>
         `;
   }
-  shouldScheduleManageSelection(event) {
-    if (!this.willManageSelection && (!event || event.target.getRootNode().host === this)) {
-      this.willManageSelection = true;
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          this.manageSelection();
-        });
-      });
-    }
-  }
-  shouldManageSelection() {
-    if (this.willManageSelection) {
+  /**
+   * 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 ? 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();
     }
-    this.willManageSelection = true;
-    this.manageSelection();
+    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() {
     if (this.selects == null)
       return;
+    await this.menuStatePromise;
     this.selectionPromise = new Promise(
       (res) => this.selectionResolver = res
     );
     let selectedItem;
-    await this.optionsMenu.updateComplete;
-    if (this.recentlyConnected) {
-      await new Promise((res) => requestAnimationFrame(() => res(true)));
-      this.recentlyConnected = false;
-    }
     this.menuItems.forEach((item) => {
       if (this.value === item.value && !item.disabled) {
         selectedItem = item;
@@ -478,22 +484,34 @@ export class PickerBase extends SizedMixin(Focusable) {
       this.optionsMenu.updateSelectedItemIndex();
     }
     this.selectionResolver();
-    this.willManageSelection = false;
   }
   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();
-    this.recentlyConnected = this.hasUpdated;
   }
   disconnectedCallback() {
     this.close();
     super.disconnectedCallback();
   }
 }
+/**
+ * @private
+ */
+PickerBase.openOverlay = async (target, interaction, content, options) => {
+  return await openOverlay(target, interaction, content, options);
+};
 __decorateClass([
   state()
 ], PickerBase.prototype, "appliedLabel", 2);
@@ -521,9 +539,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], PickerBase.prototype, "readonly", 2);
-__decorateClass([
-  query("sp-menu")
-], PickerBase.prototype, "optionsMenu", 2);
 __decorateClass([
   property()
 ], PickerBase.prototype, "placement", 2);
@@ -535,20 +550,13 @@ __decorateClass([
 ], PickerBase.prototype, "value", 2);
 __decorateClass([
   property({ attribute: false })
-], PickerBase.prototype, "selectedItem", 1);
-__decorateClass([
-  property({ attribute: false })
-], PickerBase.prototype, "selectedItemContent", 1);
+], PickerBase.prototype, "selectedItem", 2);
 export class Picker extends PickerBase {
   constructor() {
     super(...arguments);
-    this.handleKeydown = (event) => {
+    this.onKeydown = (event) => {
       const { code } = event;
       this.focused = true;
-      if (code === "ArrowUp" || code === "ArrowDown") {
-        this.toggle(true);
-        return;
-      }
       if (!code.startsWith("Arrow") || this.readonly) {
         return;
       }
@@ -574,12 +582,11 @@ export class Picker extends PickerBase {
   static get styles() {
     return [pickerStyles, chevronStyles];
   }
-  get containerStyles() {
-    const styles = super.containerStyles;
-    if (!this.quiet) {
-      styles["min-width"] = `${this.offsetWidth}px`;
-    }
-    return styles;
+  sizePopover(popover) {
+    super.sizePopover(popover);
+    if (this.quiet)
+      return;
+    popover.style.setProperty("min-width", `${this.offsetWidth}px`);
   }
 }
 //# sourceMappingURL=Picker.dev.js.map