@spectrum-web-components/picker 0.14.2 → 0.15.1-overlay.22

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/picker",
-    "version": "0.14.2",
+    "version": "0.15.1-overlay.22+e296a22f1",
     "publishConfig": {
         "access": "public"
     },
@@ -65,17 +65,17 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.7.4",
-        "@spectrum-web-components/button": "^0.20.2",
-        "@spectrum-web-components/icon": "^0.12.8",
-        "@spectrum-web-components/icons-ui": "^0.9.9",
-        "@spectrum-web-components/icons-workflow": "^0.9.9",
-        "@spectrum-web-components/menu": "^0.16.14",
-        "@spectrum-web-components/overlay": "^0.19.2",
-        "@spectrum-web-components/popover": "^0.12.14",
-        "@spectrum-web-components/reactive-controllers": "^0.3.5",
-        "@spectrum-web-components/shared": "^0.15.5",
-        "@spectrum-web-components/tray": "^0.5.0"
+        "@spectrum-web-components/base": "^0.7.5-overlay.250+e296a22f1",
+        "@spectrum-web-components/button": "^0.20.4-overlay.22+e296a22f1",
+        "@spectrum-web-components/icon": "^0.12.10-overlay.22+e296a22f1",
+        "@spectrum-web-components/icons-ui": "^0.9.11-overlay.22+e296a22f1",
+        "@spectrum-web-components/icons-workflow": "^0.9.11-overlay.22+e296a22f1",
+        "@spectrum-web-components/menu": "^0.16.16-overlay.22+e296a22f1",
+        "@spectrum-web-components/overlay": "^0.19.4-overlay.22+e296a22f1",
+        "@spectrum-web-components/popover": "^0.12.16-overlay.22+e296a22f1",
+        "@spectrum-web-components/reactive-controllers": "^0.3.6-overlay.280+e296a22f1",
+        "@spectrum-web-components/shared": "^0.15.6-overlay.250+e296a22f1",
+        "@spectrum-web-components/tray": "^0.5.2-overlay.22+e296a22f1"
     },
     "devDependencies": {
         "@spectrum-css/picker": "^2.0.5"
@@ -88,5 +88,5 @@
         "./sync/index.js",
         "./sync/sp-*.js"
     ],
-    "gitHead": "5e11d828243bb3ff572c25b33a8d58844a89f524"
+    "gitHead": "e296a22f1eeff7d62753caf21d2bae4ba406cbbd"
 }

package/src/Picker.d.ts

@@ -1,12 +1,14 @@
 import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
+import { StyleInfo } from '@spectrum-web-components/base/src/directives.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.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 type { Menu, MenuItem, MenuItemAddedOrUpdatedEvent, MenuItemChildren, MenuItemRemovedEvent } from '@spectrum-web-components/menu';
+import type { Menu, MenuItem, MenuItemChildren } from '@spectrum-web-components/menu';
 import '@spectrum-web-components/tray/sp-tray.js';
 import '@spectrum-web-components/popover/sp-popover.js';
-import { OverlayOptions, Placement, TriggerInteractions } from '@spectrum-web-components/overlay';
+import { Placement } from '@spectrum-web-components/overlay';
 import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
 declare const PickerBase_base: typeof Focusable & {
     new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
@@ -22,10 +24,6 @@ declare const PickerBase_base: typeof Focusable & {
  * @fires sp-closed - Announces that the overlay has been closed
  */
 export declare class PickerBase extends PickerBase_base {
-    /**
-     * @private
-     */
-    static openOverlay: (target: HTMLElement, interaction: TriggerInteractions, content: HTMLElement, options: OverlayOptions) => Promise<() => void>;
     protected isMobile: MatchMediaController;
     button: HTMLButtonElement;
     get target(): HTMLButtonElement | this;
@@ -37,8 +35,7 @@ export declare class PickerBase extends PickerBase_base {
     open: boolean;
     readonly: boolean;
     selects: undefined | 'single';
-    menuItems: MenuItem[];
-    private restoreChildren?;
+    get menuItems(): MenuItem[];
     optionsMenu: Menu;
     /**
      * @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"}
@@ -47,9 +44,9 @@ export declare class PickerBase extends PickerBase_base {
     placement: Placement;
     quiet: boolean;
     value: string;
-    selectedItem?: MenuItem;
-    private closeOverlay?;
-    private popoverEl;
+    get selectedItem(): MenuItem | undefined;
+    set selectedItem(selectedItem: MenuItem | undefined);
+    _selectedItem?: MenuItem;
     protected listRole: 'listbox' | 'menu';
     protected itemRole: string;
     constructor();
@@ -64,33 +61,24 @@ export declare class PickerBase extends PickerBase_base {
     protected onKeydown: (event: KeyboardEvent) => void;
     setValueFromItem(item: MenuItem, menuChangeEvent?: Event): Promise<void>;
     protected setMenuItemSelected(item: MenuItem, value: boolean): void;
+    private preventToggle;
     toggle(target?: boolean): void;
     close(): void;
-    overlayOpenCallback: () => Promise<void>;
-    overlayCloseCallback: () => Promise<void>;
-    private popoverFragment;
-    private generatePopover;
-    private openMenu;
-    protected sizePopover(popover: HTMLElement): void;
-    private closeMenu;
+    protected get containerStyles(): StyleInfo;
     protected get selectedItemContent(): MenuItemChildren;
+    protected set selectedItemContent(selectedItemContent: MenuItemChildren | undefined);
+    _selectedItemContent?: MenuItemChildren;
     protected renderLabelContent(content: Node[]): TemplateResult | Node[];
     protected get buttonContent(): TemplateResult[];
+    protected get renderOverlay(): TemplateResult;
     protected render(): TemplateResult;
     protected update(changes: PropertyValues<this>): void;
     protected get dismissHelper(): TemplateResult;
-    protected get renderPopover(): TemplateResult;
-    private _willUpdateItems;
-    protected itemsUpdated: Promise<void>;
-    /**
-     * 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.
-     */
-    protected updateMenuItems(event?: MenuItemAddedOrUpdatedEvent | MenuItemRemovedEvent): void;
+    protected get renderContainer(): TemplateResult;
+    private willManageSelection;
+    protected shouldScheduleManageSelection(event?: Event): void;
+    protected shouldManageSelection(): void;
     protected manageSelection(): Promise<void>;
-    private menuStatePromise;
-    private menuStateResolver;
     private selectionPromise;
     private selectionResolver;
     protected getUpdateComplete(): Promise<boolean>;
@@ -99,6 +87,7 @@ export declare class PickerBase extends PickerBase_base {
 }
 export declare class Picker extends PickerBase {
     static get styles(): CSSResultArray;
+    protected get containerStyles(): StyleInfo;
     protected onKeydown: (event: KeyboardEvent) => void;
 }
 export {};

package/src/Picker.dev.js

@@ -13,10 +13,12 @@ var __decorateClass = (decorators, target, key, kind) => {
 import {
   html,
   nothing,
-  render,
   SizedMixin
 } from "@spectrum-web-components/base";
-import { classMap } from "@spectrum-web-components/base/src/directives.js";
+import {
+  classMap,
+  styleMap
+} from "@spectrum-web-components/base/src/directives.js";
 import {
   property,
   query
@@ -24,15 +26,12 @@ 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
@@ -53,7 +52,6 @@ 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 = "";
@@ -67,29 +65,34 @@ 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._willUpdateItems = false;
-    this.itemsUpdated = Promise.resolve();
-    this.menuStatePromise = Promise.resolve();
+    this.preventToggle = false;
+    this.willManageSelection = false;
     this.selectionPromise = Promise.resolve();
     this.onKeydown = this.onKeydown.bind(this);
+    this.addEventListener("focusout", (event) => {
+      if (event.relatedTarget && this.contains(event.relatedTarget) || event.target !== this) {
+        return;
+      }
+      this.open = false;
+    });
   }
   get target() {
     return this.button;
   }
+  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 focusElement() {
     if (this.open) {
       return this.optionsMenu;
@@ -128,20 +131,22 @@ export class PickerBase extends SizedMixin(Focusable) {
   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;
+    if (this.selects) {
+      this.selectedItem = item;
+      this.value = item.value;
+      await this.updateComplete;
+    }
     const applyDefault = this.dispatchEvent(
       new Event("change", {
         bubbles: true,
@@ -149,7 +154,7 @@ export class PickerBase extends SizedMixin(Focusable) {
         composed: true
       })
     );
-    if (!applyDefault) {
+    if (!applyDefault && this.selects) {
       if (menuChangeEvent) {
         menuChangeEvent.preventDefault();
       }
@@ -173,6 +178,8 @@ export class PickerBase extends SizedMixin(Focusable) {
     item.selected = value;
   }
   toggle(target) {
+    if (this.preventToggle)
+      return;
     if (this.readonly) {
       return;
     }
@@ -184,77 +191,23 @@ export class PickerBase extends SizedMixin(Focusable) {
     }
     this.open = false;
   }
-  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) {
+  get containerStyles() {
     if (this.isMobile.matches) {
-      popover.style.setProperty("--swc-menu-width", `100%`);
-      return;
-    }
-    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)();
+      return {
+        "--swc-menu-width": "100%"
+      };
     }
+    return {};
   }
   get selectedItemContent() {
-    if (this.selectedItem) {
-      return this.selectedItem.itemChildren;
-    }
-    return { icon: [], content: [] };
+    return this._selectedItemContent || { icon: [], content: [] };
+  }
+  set selectedItemContent(selectedItemContent) {
+    if (selectedItemContent === this.selectedItemContent)
+      return;
+    const oldContent = this.selectedItemContent;
+    this._selectedItemContent = selectedItemContent;
+    this.requestUpdate("selectedItemContent", oldContent);
   }
   renderLabelContent(content) {
     if (this.value && this.selectedItem) {
@@ -288,13 +241,39 @@ export class PickerBase extends SizedMixin(Focusable) {
             `
     ];
   }
+  get renderOverlay() {
+    return html`
+            <sp-overlay
+                .triggerElement=${this}
+                .offset=${0}
+                ?open=${this.open}
+                .placement=${this.placement}
+                type="auto"
+                @beforetoggle=${(event) => {
+      this.open = event.target.open;
+      if (!this.open) {
+        this.preventToggle = true;
+        requestAnimationFrame(
+          () => this.preventToggle = false
+        );
+        this.optionsMenu.updateSelectedItemIndex();
+        this.optionsMenu.closeDescendentOverlays();
+      } else {
+        this.optionsMenu.focus();
+      }
+    }}
+            >
+                ${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 ? "-1" : "0"}"
+                tabindex="${this.focused || this.open ? "-1" : "0"}"
                 @focus=${this.onHelperFocus}
             ></span>
             <button
@@ -311,6 +290,7 @@ export class PickerBase extends SizedMixin(Focusable) {
             >
                 ${this.buttonContent}
             </button>
+            ${this.renderOverlay}
         `;
   }
   update(changes) {
@@ -320,18 +300,8 @@ export class PickerBase extends SizedMixin(Focusable) {
     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();
+    if (changes.has("value")) {
+      this.shouldScheduleManageSelection();
     }
     if (true) {
       if (!this.hasUpdated && this.querySelector("sp-menu")) {
@@ -357,7 +327,7 @@ export class PickerBase extends SizedMixin(Focusable) {
             </div>
         `;
   }
-  get renderPopover() {
+  get renderContainer() {
     const content = html`
             ${this.dismissHelper}
             <sp-menu
@@ -365,7 +335,11 @@ export class PickerBase extends SizedMixin(Focusable) {
                 role="${this.listRole}"
                 @change=${this.handleChange}
                 .selects=${this.selects}
-            ></sp-menu>
+                .selected=${this.value ? [this.value] : []}
+                @sp-menu-item-added-or-updated=${this.shouldManageSelection}
+            >
+                <slot @slotchange=${this.shouldScheduleManageSelection}></slot>
+            </sp-menu>
             ${this.dismissHelper}
         `;
     if (this.isMobile.matches) {
@@ -373,9 +347,7 @@ export class PickerBase extends SizedMixin(Focusable) {
                 <sp-tray
                     id="popover"
                     role="dialog"
-                    @sp-menu-item-added-or-updated=${this.updateMenuItems}
-                    .overlayOpenCallback=${this.overlayOpenCallback}
-                    .overlayCloseCallback=${this.overlayCloseCallback}
+                    style=${styleMap(this.containerStyles)}
                 >
                     ${content}
                 </sp-tray>
@@ -385,56 +357,38 @@ export class PickerBase extends SizedMixin(Focusable) {
             <sp-popover
                 id="popover"
                 role="dialog"
-                @sp-menu-item-added-or-updated=${this.updateMenuItems}
-                .overlayOpenCallback=${this.overlayOpenCallback}
-                .overlayCloseCallback=${this.overlayCloseCallback}
+                style=${styleMap(this.containerStyles)}
+                placement=${this.placement}
             >
                 ${content}
             </sp-popover>
         `;
   }
-  /**
-   * 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();
+  shouldScheduleManageSelection(event) {
+    if (!this.willManageSelection && (!event || event.target.getRootNode().host === this)) {
+      this.willManageSelection = true;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          this.manageSelection();
+        });
+      });
     }
-    let resolve = () => {
+  }
+  shouldManageSelection() {
+    if (this.willManageSelection) {
       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;
-    });
+    }
+    this.willManageSelection = true;
+    this.manageSelection();
   }
   async manageSelection() {
     if (this.selects == null)
       return;
-    await this.menuStatePromise;
     this.selectionPromise = new Promise(
       (res) => this.selectionResolver = res
     );
     let selectedItem;
+    await this.optionsMenu.updateComplete;
     this.menuItems.forEach((item) => {
       if (this.value === item.value && !item.disabled) {
         selectedItem = item;
@@ -454,21 +408,14 @@ 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();
   }
   disconnectedCallback() {
@@ -476,12 +423,6 @@ export class PickerBase extends SizedMixin(Focusable) {
     super.disconnectedCallback();
   }
 }
-/**
- * @private
- */
-PickerBase.openOverlay = async (target, interaction, content, options) => {
-  return await openOverlay(target, interaction, content, options);
-};
 __decorateClass([
   query("#button")
 ], PickerBase.prototype, "button", 2);
@@ -506,6 +447,9 @@ __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);
@@ -517,7 +461,10 @@ __decorateClass([
 ], PickerBase.prototype, "value", 2);
 __decorateClass([
   property({ attribute: false })
-], PickerBase.prototype, "selectedItem", 2);
+], PickerBase.prototype, "selectedItem", 1);
+__decorateClass([
+  property({ attribute: false })
+], PickerBase.prototype, "selectedItemContent", 1);
 export class Picker extends PickerBase {
   constructor() {
     super(...arguments);
@@ -549,5 +496,12 @@ 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;
+  }
 }
 //# sourceMappingURL=Picker.dev.js.map